### Development Setup Source: https://github.com/iduxfe/idux/blob/main/packages/site/src/docs/Introduce.en.md Installs project dependencies and starts the development server for Idux. ```bash npm install npm start Open a browser: http://localhost:3000 ``` -------------------------------- ### Create Vite Project and Install iDux Components Source: https://github.com/iduxfe/idux/blob/main/packages/site/src/docs/GettingStarted.zh.md Commands to create a new project using Vite, install dependencies, and install iDux components including core, components, and pro modules. ```bash npm create vite@latest cd vite-project npm install npm install @idux/cdk @idux/components @idux/pro ``` -------------------------------- ### Project Setup and Testing Commands Source: https://github.com/iduxfe/idux/blob/main/packages/site/src/docs/Contributing.en.md Commands for installing dependencies, running tests, and checking code style within the IDux project. ```bash npm install npm run test npm run lint ``` -------------------------------- ### Development Setup Source: https://github.com/iduxfe/idux/blob/main/README.md Installs project dependencies using pnpm and starts the development server. Access the application at http://localhost:3000. ```bash pnpm install pnpm start ``` -------------------------------- ### Development Setup Source: https://github.com/iduxfe/idux/blob/main/packages/site/src/docs/Introduce.zh.md Installs project dependencies and starts the development server for Idux. Access the development environment at http://localhost:3000. ```bash npm install npm start ``` -------------------------------- ### Start Development Server Source: https://github.com/iduxfe/idux/blob/main/packages/site/src/docs/GettingStarted.zh.md Command to start the development server for debugging and previewing the application. ```bash npm run dev ``` -------------------------------- ### Development Setup for IDux Source: https://github.com/iduxfe/idux/blob/main/README.zh.md Installs project dependencies and starts the development server for IDux. Access the development environment via http://localhost:3000. ```bash npm install npm start ``` -------------------------------- ### Wrap App with IxThemeProvider Source: https://github.com/iduxfe/idux/blob/main/packages/site/src/docs/GettingStarted.zh.md HTML template snippet showing how to wrap the main Vue application with IxThemeProvider for theme management. ```html ``` -------------------------------- ### Including CSS Resets in HTML Source: https://github.com/iduxfe/idux/blob/main/packages/site/src/docs/GettingStarted.zh.md Shows how to link the copied CSS reset files in the `index.html` file to ensure they are loaded correctly by the browser. ```html ... ... ``` -------------------------------- ### Dependency Installation with pnpm Source: https://github.com/iduxfe/idux/blob/main/packages/site/src/docs/Contributing.en.md Installs project dependencies using the pnpm package manager. ```bash pnpm install ``` -------------------------------- ### Manual Component Loading Source: https://github.com/iduxfe/idux/blob/main/packages/site/src/docs/GettingStarted.zh.md Illustrates how to manually import specific IDUX components and their corresponding styles in a Vue component. ```typescript // App.vue or other components import { IxButton } from "@idux/components/button" import "@idux/components/button/style" ``` -------------------------------- ### Commit Message Examples Source: https://github.com/iduxfe/idux/blob/main/packages/site/src/docs/Contributing.en.md Provides examples of valid commit messages, demonstrating the correct usage of type, scope, subject, body, and footer for documentation and bug fixes. ```vim docs(changelog): update change log to beta.5 ``` ```vim fix(component:button): change type not work Button doesn't work when setting its type dynamically. fix #123 ``` -------------------------------- ### Integrate iDux Initialization in main.ts Source: https://github.com/iduxfe/idux/blob/main/packages/site/src/docs/GettingStarted.zh.md TypeScript code to integrate the iDux initialization configuration into the main Vue application entry point. ```typescript // main.ts import { createApp } from "vue"; import Idux from "./idux"; import App from "./App.vue"; createApp(App).use(Idux).mount("#app"); ``` -------------------------------- ### Install Idux Packages Source: https://github.com/iduxfe/idux/blob/main/packages/site/src/docs/Introduce.en.md Installs the core Idux packages (cdk, components, pro) using npm. ```bash npm install --save @idux/cdk @idux/components @idux/pro ``` -------------------------------- ### Configure Vite for Dynamic Icon Loading Source: https://github.com/iduxfe/idux/blob/main/packages/site/src/docs/GettingStarted.zh.md Vite configuration to enable static copying of SVG assets for dynamic icon loading in iDux. ```json // vite.config.ts import { viteStaticCopy } from "vite-plugin-static-copy"; // https://vitejs.dev/config/ export default defineConfig({ plugins: [ ... viteStaticCopy({ targets: [ { src: "./node_modules/@idux/components/icon/assets/*.svg", dest: "idux-icons", }, ], }), ], }); ``` -------------------------------- ### Importing IDUX Styles On-Demand Source: https://github.com/iduxfe/idux/blob/main/packages/site/src/docs/GettingStarted.zh.md Demonstrates how to import core and reset styles for IDUX components when using on-demand loading. It highlights potential issues with reset style order and provides solutions. ```typescript import "@idux/cdk/index.css"; import "@idux/components/style/core/reset.css"; import "@idux/components/style/core/reset-scroll.css"; ``` -------------------------------- ### Initialize iDux Configuration Source: https://github.com/iduxfe/idux/blob/main/packages/site/src/docs/GettingStarted.zh.md TypeScript code for initializing iDux in a Vue application. It includes importing CSS, loading icons (statically and dynamically), and configuring global settings. ```typescript // idux.ts import { type App } from "vue"; // If you need on-demand CSS loading, remove the following 2 lines import "@idux/components/index.full.css"; import "@idux/pro/index.css"; // If you need on-demand CSS loading, add the following code as needed // import "@idux/cdk/index.css"; // import "@idux/components/style/core/reset.css"; // import "@idux/components/style/core/reset-scroll.css"; // If you need on-demand JS loading, remove the following 3 lines import IduxCdk from "@idux/cdk"; import IduxComponents from "@idux/components"; import IduxPro from "@idux/pro"; import { createGlobalConfig } from "@idux/components/config"; import { IDUX_ICON_DEPENDENCIES, addIconDefinitions } from "@idux/components/icon"; // import { enUS } from "@idux/components/locales"; // Static loading: `IDUX_ICON_DEPENDENCIES` are icons used by some components in `@idux`, it is recommended to import them statically at this time. addIconDefinitions(IDUX_ICON_DEPENDENCIES); // Dynamic loading: Will not be bundled, can reduce package size, requires http request when loading // Note: Please ensure that the icon's svg resource is correctly placed in the `public/idux-icons` directory, you can refer to the vite configuration below const loadIconDynamically = (iconName: string) => { return fetch(`/idux-icons/${iconName}.svg`).then((res) => res.text()); }; const customConfig = { icon: { loadIconDynamically } } const globalConfig = createGlobalConfig(customConfig) const install = (app: App): void => { app.use(IduxCdk).use(IduxComponents).use(IduxPro).use(globalConfig); }; export default { install }; ``` -------------------------------- ### Modify idux.ts for On-Demand Loading Source: https://github.com/iduxfe/idux/blob/main/packages/site/src/docs/GettingStarted.zh.md This snippet shows how to modify the `idux.ts` file to import only necessary components instead of the entire library, reducing package size. ```diff - import IduxCdk from "@idux/cdk"; - import IduxComponents from "@idux/components"; - import IduxPro from "@idux/pro"; const install = (app: App): void => { - app.use(IduxCdk).use(IduxComponents).use(IduxPro).use(globalConfig); + app.use(globalConfig) }; ``` -------------------------------- ### Webpack Configuration for Component Auto-Import Source: https://github.com/iduxfe/idux/blob/main/packages/site/src/docs/GettingStarted.zh.md Configures Webpack to automatically resolve and import IDUX components using `unplugin-vue-components`. ```typescript // webpack.config import { IduxResolver } from 'unplugin-vue-components/resolvers' import Components from 'unplugin-vue-components/webpack' module.exports = { plugins: [ /* ... */ Components({ resolvers: [IduxResolver()], }), ] } ``` -------------------------------- ### Vite Configuration for Component Auto-Import Source: https://github.com/iduxfe/idux/blob/main/packages/site/src/docs/GettingStarted.zh.md Configures Vite to automatically resolve and import IDUX components using `unplugin-vue-components`. It demonstrates how to specify style import options. ```typescript // vite.config import { IduxResolver } from 'unplugin-vue-components/resolvers' import Components from 'unplugin-vue-components/vite' // https://vitejs.dev/config/ export default defineConfig({ plugins: [ /* ... */ Components({ resolvers: [IduxResolver()], // 可以通过指定 `importStyle` 来按需加载 css 或 less 代码 // 主题默认会通过 IxThemeProvider 自动插入，但如果使用 IxThemeProvider，可以配置 `importStyleTheme` 来引入组件的 css 变量 // 别忘了修改 idux.ts 中的样式导入代码 // resolvers: [IduxResolver({ importStyle: 'css', importStyleTheme: 'default' })], }), ] }) ``` -------------------------------- ### Handling CSS Reset Order with Vite Source: https://github.com/iduxfe/idux/blob/main/packages/site/src/docs/GettingStarted.zh.md Provides a Vite configuration using `vite-plugin-static-copy` to ensure CSS reset files are correctly placed in the public directory, preventing style conflicts in on-demand loading scenarios. ```typescript // vite.config.ts import { viteStaticCopy } from "vite-plugin-static-copy"; // https://vitejs.dev/config/ export default defineConfig({ plugins: [ ... viteStaticCopy({ targets: [ { src: "./node_modules/@idux/components/style/core/reset*.css", dest: "assets", }, ], }), ], }); ``` -------------------------------- ### Install Idux Packages Source: https://github.com/iduxfe/idux/blob/main/packages/site/src/docs/Introduce.zh.md Installs the necessary Idux packages (@idux/cdk, @idux/components, @idux/pro) for your project using npm. ```bash npm install --save @idux/cdk @idux/components @idux/pro ``` -------------------------------- ### Add iDux Type References to env.d.ts Source: https://github.com/iduxfe/idux/blob/main/packages/site/src/docs/GettingStarted.zh.md TypeScript declaration file snippet to include type definitions for iDux components, enabling better IDE support. ```typescript // env.d.ts /// /// /// /// ``` -------------------------------- ### Basic IxSpinProvider Setup Source: https://github.com/iduxfe/idux/blob/main/packages/components/spin/demo/UseSpin.md Demonstrates the basic structure for using `useSpin` by wrapping child components within `IxSpinProvider`. This is a prerequisite for the `useSpin` hook to function correctly. ```html ``` -------------------------------- ### Install @idux Packages Source: https://github.com/iduxfe/idux/blob/main/README.md Installs the core @idux packages for CDK, components, and pro features using npm. ```bash npm install --save @idux/cdk @idux/components @idux/pro ``` -------------------------------- ### Development Workflow Commands Source: https://github.com/iduxfe/idux/blob/main/packages/site/src/docs/Contributing.en.md Commands for local development, code linting, and running unit tests in the IDux project. ```bash npm start npm run lint npm run lint-fix npm run test ``` -------------------------------- ### Responsive Gutter Example Source: https://github.com/iduxfe/idux/blob/main/packages/components/grid/demo/Gutter.md Demonstrates how to set responsive gutter values for the IxRow component using an object with breakpoint keys. ```html ``` -------------------------------- ### IDUX Component Usage Examples Source: https://github.com/iduxfe/idux/blob/main/packages/pro/layout/docs/Theme.zh.md Demonstrates how to use various IDUX components in JavaScript and TypeScript projects. These examples showcase common patterns for integrating IDUX into your applications. ```javascript import { Button } from 'idux/components/button'; const MyButton = () => ( ); export default MyButton; ``` ```typescript import { Input } from 'idux/components/input'; const MyInput: React.FC = () => ( ); export default MyInput; ``` -------------------------------- ### Git Workflow for Pull Requests Source: https://github.com/iduxfe/idux/blob/main/packages/site/src/docs/Contributing.en.md Steps for forking the repository, managing branches, rebasing, and pushing code for a pull request. ```bash git remote add upstream https://github.com/IDuxFE/idux.git git pull upstream main git push origin main git checkout docs-fix git rebase main git rebase main -i git add . git commit -m "Your commit message" git push git push -f ``` -------------------------------- ### Install IDux Components Source: https://github.com/iduxfe/idux/blob/main/README.zh.md Installs the necessary IDux packages (@idux/cdk, @idux/components, @idux/pro) for your project using npm. ```bash npm install --save @idux/cdk @idux/components @idux/pro ``` -------------------------------- ### Date Picker Quick Select Example Addition Source: https://github.com/iduxfe/idux/blob/main/packages/site/src/docs/Changelog.zh.md Adds an example for quick selection in the date picker component. Addresses issue #1664. ```javascript /* comp:date-picker: Add quick select example */ /* commit: 485e9ae */ ``` -------------------------------- ### Basic Message Usage Example Source: https://github.com/iduxfe/idux/blob/main/packages/components/message/docs/Api.zh.md Demonstrates how to use the IxMessageProvider and the useMessage hook to display a simple message when a button is clicked. ```html ``` -------------------------------- ### Code Formatting and Linting Tools Source: https://github.com/iduxfe/idux/blob/main/packages/site/src/docs/Contributing.en.md Lists the tools used for maintaining code style consistency in the IDux project. ```javascript eslint stylelint markdownlint ls-lint ``` -------------------------------- ### IxMenu Component Usage Examples Source: https://github.com/iduxfe/idux/blob/main/packages/components/menu/docs/Api.zh.md Illustrates how to use the IxMenu component and its sub-components (IxMenuItem, IxMenuSub, IxMenuItemGroup, IxMenuDivider) within a Vue template. ```html ``` -------------------------------- ### Scope Naming Conventions Source: https://github.com/iduxfe/idux/blob/main/packages/site/src/docs/Contributing.en.md Illustrates the conventions for specifying the scope of a commit, including module names with optional prefixes and exceptions for global changes. ```vim ``` -------------------------------- ### Fix: DatePicker start and end dates swapped Source: https://github.com/iduxfe/idux/blob/main/packages/site/src/docs/Changelog.zh.md Addresses a bug in the DatePicker where the start and end dates were being swapped incorrectly. ```javascript /* comp:date-picker: start and end dates swapped */ /* Fixes #1258 */ ``` -------------------------------- ### Applying a Preset Theme with IxThemeProvider Source: https://github.com/iduxfe/idux/blob/main/packages/site/src/docs/CustomizeTheme.zh.md Shows how to wrap your application with IxThemeProvider and specify a preset theme, such as 'default' or 'dark', using the `presetTheme` prop. ```html ``` -------------------------------- ### Custom Form Component Example Source: https://github.com/iduxfe/idux/blob/main/packages/components/form/docs/Api.zh.md An example demonstrating how to create a custom form component that integrates with IxFormItem using useAccessorAndControl and useFormItemRegister. ```html ``` -------------------------------- ### Register Page Tokens in Component Setup Source: https://github.com/iduxfe/idux/blob/main/packages/site/src/docs/CustomizeTheme.zh.md Illustrates how to register the custom page token getter and transformers within a Vue component's setup function using `useThemeToken`. This makes the tokens available as JavaScript variables and CSS variables. ```vue import { defineComponent } from 'vue' import { useThemeToken } from '@idux/components/theme' import { transforms, getThemeTokens } from './tokens' export default defineComponent({ setup() { const { globalHashId, hashId, tokens, registerToken } = useThemeToken('timePicker') registerToken(getThemeTokens, transforms) ... ... return () =>

...

} }) ``` -------------------------------- ### All Contributors Specification Reference Source: https://github.com/iduxfe/idux/blob/main/packages/site/src/docs/Contributors.zh.md References the all-contributors specification, which guides the format and generation of contributor lists. ```markdown This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome! ``` -------------------------------- ### Using IxThemeProvider for Theme Configuration Source: https://github.com/iduxfe/idux/blob/main/packages/site/src/docs/CustomizeTheme.zh.md Demonstrates how to import and use the IxThemeProvider component to apply a preset theme to your application. This is the primary way to enable dynamic theming. ```ts import { IxThemeProvider } from '@idux/components/theme' ``` -------------------------------- ### Getting Content Instance Reference Source: https://github.com/iduxfe/idux/blob/main/packages/components/drawer/docs/Api.zh.md Illustrates how to obtain a reference to the content instance when the content is a VNode, using contentProps. ```html ``` -------------------------------- ### Idux Project Badges Source: https://github.com/iduxfe/idux/blob/main/packages/site/src/docs/Introduce.en.md Displays various project status and information badges, including build status, code coverage, npm version, release date, code quality, and license. ```html

[![Build Status](https://dev.azure.com/iduxfeteam/IduxFE/_apis/build/status/IduxFE.idux?branchName=main)](https://dev.azure.com/iduxfeteam/IduxFE/_build/latest?definitionId=2&branchName=main) [![Codecov](https://codecov.io/gh/IDuxFE/idux/branch/main/graph/badge.svg?token=PGAUXP06V3)](https://codecov.io/gh/IDuxFE/idux) [![Npm version](https://img.shields.io/npm/v/@idux/components)](https://www.npmjs.com/package/@idux/components) [![Release Date](https://img.shields.io/github/release-date/IDuxFE/idux)](https://github.com/IDuxFE/idux/releases) [![CodeFactor](https://www.codefactor.io/repository/github/iduxfe/idux/badge)](https://www.codefactor.io/repository/github/iduxfe/idux) [![Code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4)](https://github.com/prettier/prettier) [![GitHub contributors](https://img.shields.io/github/contributors/IDuxFE/idux)](https://github.com/IDuxFE/idux/contributors) [![GitHub license](https://img.shields.io/github/license/IDuxFE/idux)](https://github.com/IDuxFE/idux/blob/main/LICENSE)

``` -------------------------------- ### Feature: comp:tour New Tour Component Source: https://github.com/iduxfe/idux/blob/main/packages/site/src/docs/Changelog.zh.md Introduces a new tour component for guided user experiences. ```javascript comp:tour: 新增新手引导组件 ([#1610](https://github.com/IDuxFE/idux/issues/1610)) ([79335e3](https://github.com/IDuxFE/idux/commit/79335e3917daf024b64b38f6ffdb78cedc4165e4)) ``` -------------------------------- ### Destroying All Drawers on Route Change Source: https://github.com/iduxfe/idux/blob/main/packages/components/drawer/docs/Api.zh.md Provides an example of how to destroy all drawers when the route changes, typically in the root App.vue component. ```html ```