diff --git a/.changeset/.prettierrc.json b/.changeset/.prettierrc.json new file mode 100644 index 000000000..544138be4 --- /dev/null +++ b/.changeset/.prettierrc.json @@ -0,0 +1,3 @@ +{ + "singleQuote": true +} diff --git a/.changeset/fancy-ears-walk.md b/.changeset/fancy-ears-walk.md new file mode 100644 index 000000000..f73cb596b --- /dev/null +++ b/.changeset/fancy-ears-walk.md @@ -0,0 +1,7 @@ +--- +'@vben/styles': patch +'@vben-core/form-ui': patch +'@vben/web-naive': patch +--- + +feat(@core/form-ui): 新增 useVbenForm 数组编辑器 VbenFormFieldArray diff --git a/.github/workflows/codeql.yml b/.github/workflows/codeql.yml index 61137ad98..e0fbcacf4 100644 --- a/.github/workflows/codeql.yml +++ b/.github/workflows/codeql.yml @@ -61,7 +61,7 @@ jobs: # Initializes the CodeQL tools for scanning. - name: Initialize CodeQL - uses: github/codeql-action/init@v3 + uses: github/codeql-action/init@v4 with: languages: ${{ matrix.language }} build-mode: ${{ matrix.build-mode }} @@ -89,6 +89,6 @@ jobs: exit 1 - name: Perform CodeQL Analysis - uses: github/codeql-action/analyze@v3 + uses: github/codeql-action/analyze@v4 with: category: '/language:${{matrix.language}}' diff --git a/.github/workflows/issue-close-require.yml b/.github/workflows/issue-close-require.yml index 18c007bfd..4efc9ce7f 100644 --- a/.github/workflows/issue-close-require.yml +++ b/.github/workflows/issue-close-require.yml @@ -19,7 +19,7 @@ jobs: steps: # 关闭未活动的 Issues - name: Close Inactive Issues - uses: actions/stale@v9 + uses: actions/stale@v10 with: days-before-stale: -1 # Issues and PR will never be flagged stale automatically. stale-issue-label: needs-reproduction # Label that flags an issue as stale. diff --git a/.github/workflows/issue-labeled.yml b/.github/workflows/issue-labeled.yml index 2feda4ef7..7a461e3b6 100644 --- a/.github/workflows/issue-labeled.yml +++ b/.github/workflows/issue-labeled.yml @@ -18,7 +18,7 @@ jobs: steps: - name: remove enhancement pending if: github.event.label.name == 'enhancement' - uses: actions-cool/issues-helper@v3 + uses: actions-cool/issues-helper-backup@d65454423c6fbbd20026b9b499d403f79422ac69 with: actions: 'remove-labels' token: ${{ secrets.GITHUB_TOKEN }} @@ -27,7 +27,7 @@ jobs: - name: remove bug pending if: github.event.label.name == 'bug' - uses: actions-cool/issues-helper@v3 + uses: actions-cool/issues-helper-backup@d65454423c6fbbd20026b9b499d403f79422ac69 with: actions: 'remove-labels' token: ${{ secrets.GITHUB_TOKEN }} @@ -36,7 +36,7 @@ jobs: - name: needs reproduction if: github.event.label.name == 'needs reproduction' - uses: actions-cool/issues-helper@v3 + uses: actions-cool/issues-helper-backup@d65454423c6fbbd20026b9b499d403f79422ac69 with: actions: 'create-comment, remove-labels' token: ${{ secrets.GITHUB_TOKEN }} diff --git a/.github/workflows/lock.yml b/.github/workflows/lock.yml index bd73d5331..a12227ef1 100644 --- a/.github/workflows/lock.yml +++ b/.github/workflows/lock.yml @@ -14,7 +14,7 @@ jobs: if: github.repository == 'vbenjs/vue-vben-admin' runs-on: ubuntu-latest steps: - - uses: dessant/lock-threads@v5 + - uses: dessant/lock-threads@v6 with: github-token: ${{ secrets.GITHUB_TOKEN }} issue-inactive-days: '14' diff --git a/.github/workflows/release-tag.yml b/.github/workflows/release-tag.yml index 7258c11ff..a745510c0 100644 --- a/.github/workflows/release-tag.yml +++ b/.github/workflows/release-tag.yml @@ -3,60 +3,44 @@ name: Create Release Tag on: push: tags: - - 'v*.*.*' # Push events to matching v*, i.e. v1.0, v20.15.10 - -env: - HUSKY: '0' + - 'v*.*.*' + workflow_dispatch: + inputs: + tag: + description: 'Tag to create (e.g. v1.2.3)' + required: true + type: string permissions: - pull-requests: write contents: write jobs: - build: + release: name: Create Release if: github.repository == 'vbenjs/vue-vben-admin' runs-on: ubuntu-latest - strategy: - matrix: - node-version: [22] steps: - name: Checkout code uses: actions/checkout@v6 with: fetch-depth: 0 - # - name: Checkout code - # uses: actions/checkout@v6 - # with: - # fetch-depth: 0 - - # - name: Install pnpm - # uses: pnpm/action-setup@v4 - - # - name: Use Node.js ${{ matrix.node-version }} - # uses: actions/setup-node@v4 - # with: - # node-version: ${{ matrix.node-version }} - # cache: "pnpm" - - # - name: Install dependencies - # run: pnpm install --frozen-lockfile - - # - name: Test and Build - # run: | - # pnpm run test - # pnpm run build - - - name: version + - name: Extract version id: version run: | - tag=${GITHUB_REF/refs\/tags\//} - version=${tag#v} - major=${version%%.*} - echo "tag=${tag}" >> $GITHUB_OUTPUT - echo "version=${version}" >> $GITHUB_OUTPUT - echo "major=${major}" >> $GITHUB_OUTPUT + if [[ "${{ github.event_name }}" == "workflow_dispatch" ]]; then + raw_tag="${{ inputs.tag }}" + else + raw_tag="${GITHUB_REF_NAME}" + fi + # Normalize: ensure v prefix + tag="${raw_tag}" + [[ "${tag:0:1}" != "v" ]] && tag="v${tag}" + version="${tag#v}" + major="${version%%.*}" + echo "tag=${tag}" >> "${GITHUB_OUTPUT}" + echo "version=${version}" >> "${GITHUB_OUTPUT}" + echo "major=${major}" >> "${GITHUB_OUTPUT}" - uses: release-drafter/release-drafter@v7 with: @@ -64,17 +48,3 @@ jobs: publish: true env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} - - # - name: force update major tag - # run: | - # git tag v${{ steps.version.outputs.major }} ${{ steps.version.outputs.tag }} -f - # git push origin refs/tags/v${{ steps.version.outputs.major }} -f - - # - name: Create Release for Tag - # id: release_tag - # uses: ncipollo/release-action@v1 - # with: - # token: ${{ secrets.GITHUB_TOKEN }} - # generateReleaseNotes: "true" - # body: | - # > Please refer to [CHANGELOG.md](https://github.com/vbenjs/vue-vben-admin/blob/main/CHANGELOG.md) for details. diff --git a/.github/workflows/semantic-pull-request.yml b/.github/workflows/semantic-pull-request.yml index db8e9e091..02db08de6 100644 --- a/.github/workflows/semantic-pull-request.yml +++ b/.github/workflows/semantic-pull-request.yml @@ -14,7 +14,7 @@ jobs: runs-on: ubuntu-latest steps: - name: Validate PR title - uses: amannn/action-semantic-pull-request@v5 + uses: amannn/action-semantic-pull-request@v6 with: wip: true subjectPattern: ^(?![A-Z]).+$ diff --git a/.github/workflows/stale.yml b/.github/workflows/stale.yml index 991e1331d..3bf7ecee7 100644 --- a/.github/workflows/stale.yml +++ b/.github/workflows/stale.yml @@ -9,7 +9,7 @@ jobs: if: github.repository == 'vbenjs/vue-vben-admin' runs-on: ubuntu-latest steps: - - uses: actions/stale@v9 + - uses: actions/stale@v10 with: repo-token: ${{ secrets.GITHUB_TOKEN }} stale-issue-message: 'This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days' diff --git a/.gitignore b/.gitignore index 86d1f1f8a..20fba96c3 100644 --- a/.gitignore +++ b/.gitignore @@ -23,6 +23,7 @@ package-lock.json .VSCodeCounter **/backend-mock/data .omx +.pnpm-store # local env files .env.local .env.*.local @@ -57,3 +58,5 @@ vite.config.ts.* .claude .codex skills-lock.json +.atomcode +datalog diff --git a/.node-version b/.node-version index 85e502778..b832e4001 100644 --- a/.node-version +++ b/.node-version @@ -1 +1 @@ -22.22.0 +24.16.0 diff --git a/.npmrc b/.npmrc index 6d28fabf4..7549542d7 100644 --- a/.npmrc +++ b/.npmrc @@ -1,13 +1 @@ registry=https://registry.npmmirror.com -public-hoist-pattern[]=lefthook -public-hoist-pattern[]=eslint -public-hoist-pattern[]=oxfmt -public-hoist-pattern[]=oxlint -public-hoist-pattern[]=stylelint -public-hoist-pattern[]=*postcss* -public-hoist-pattern[]=@commitlint/* -public-hoist-pattern[]=czg - -strict-peer-dependencies=false -auto-install-peers=true -dedupe-peer-dependents=true diff --git a/.vscode/settings.json b/.vscode/settings.json index 993b52039..ff13cfa9c 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -38,7 +38,7 @@ // lint && format "oxc.enable": true, - "oxc.typeAware": true, + "oxc.typeAware": false, "oxc.configPath": "oxlint.config.ts", "oxc.fmt.configPath": "oxfmt.config.ts", "eslint.useFlatConfig": true, diff --git a/README.ja-JP.md b/README.ja-JP.md index 4ce285a74..ca0a9775d 100644 --- a/README.ja-JP.md +++ b/README.ja-JP.md @@ -114,7 +114,7 @@ pnpm build ## ブラウザサポート -ローカル開発には `Chrome 80+` ブラウザを推奨します +Tailwind CSS v4.0 is designed for Safari 16.4+, Chrome 111+, and Firefox 128+ モダンブラウザをサポートし、IEはサポートしません diff --git a/README.md b/README.md index ce8e89758..e1c9f29cd 100644 --- a/README.md +++ b/README.md @@ -114,7 +114,7 @@ Reference [vue](https://github.com/vuejs/vue/blob/dev/.github/COMMIT_CONVENTION. ## Browser Support -The `Chrome 80+` browser is recommended for local development +Tailwind CSS v4.0 is designed for Safari 16.4+, Chrome 111+, and Firefox 128+ Support modern browsers, not IE diff --git a/README.zh-CN.md b/README.zh-CN.md index d3193ef65..da7ec5fa8 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -114,7 +114,7 @@ pnpm build ## 浏览器支持 -本地开发推荐使用 `Chrome 80+` 浏览器 +Tailwind CSS v4.0 is designed for Safari 16.4+, Chrome 111+, and Firefox 128+ 支持现代浏览器，不支持 IE diff --git a/apps/backend-mock/api/system/user/list.ts b/apps/backend-mock/api/system/user/list.ts new file mode 100644 index 000000000..21d44c8ba --- /dev/null +++ b/apps/backend-mock/api/system/user/list.ts @@ -0,0 +1,85 @@ +import { faker } from '@faker-js/faker'; +import { eventHandler, getQuery } from 'h3'; +import { verifyAccessToken } from '~/utils/jwt-utils'; +import { unAuthorizedResponse, usePageResponseSuccess } from '~/utils/response'; + +const formatterCN = new Intl.DateTimeFormat('zh-CN', { + timeZone: 'Asia/Shanghai', + year: 'numeric', + month: '2-digit', + day: '2-digit', + hour: '2-digit', + minute: '2-digit', + second: '2-digit', +}); + +function generateMockDataList(count: number) { + const dataList = []; + + for (let i = 0; i < count; i++) { + const dataItem: Record = { + id: faker.string.uuid(), + name: faker.commerce.product(), + status: faker.helpers.arrayElement([0, 1]), + createTime: formatterCN.format( + faker.date.between({ from: '2022-01-01', to: '2025-01-01' }), + ), + deptId: faker.string.uuid(), + remark: faker.lorem.sentence(), + }; + + dataList.push(dataItem); + } + + return dataList; +} + +const mockData = generateMockDataList(100); + +export default eventHandler(async (event) => { + const userinfo = verifyAccessToken(event); + if (!userinfo) { + return unAuthorizedResponse(event); + } + + const { + page = 1, + pageSize = 20, + name, + id, + remark, + startTime, + endTime, + deptId, + status, + } = getQuery(event); + let listData = structuredClone(mockData); + if (name) { + listData = listData.filter((item) => + item.name.toLowerCase().includes(String(name).toLowerCase()), + ); + } + if (id) { + listData = listData.filter((item) => + item.id.toLowerCase().includes(String(id).toLowerCase()), + ); + } + if (remark) { + listData = listData.filter((item) => + item.remark?.toLowerCase()?.includes(String(remark).toLowerCase()), + ); + } + if (startTime) { + listData = listData.filter((item) => item.createTime >= startTime); + } + if (endTime) { + listData = listData.filter((item) => item.createTime <= endTime); + } + if (['0', '1'].includes(status as string)) { + listData = listData.filter((item) => item.status === Number(status)); + } + if (deptId) { + listData = listData.filter((item) => item.deptId === deptId); + } + return usePageResponseSuccess(page as string, pageSize as string, listData); +}); diff --git a/apps/web-antd/src/adapter/component/index.ts b/apps/web-antd/src/adapter/component/index.ts index bf34ba767..81b6e8fa3 100644 --- a/apps/web-antd/src/adapter/component/index.ts +++ b/apps/web-antd/src/adapter/component/index.ts @@ -131,8 +131,8 @@ const PreviewGroup = defineAsyncComponent(() => import('ant-design-vue/es/image').then((res) => res.ImagePreviewGroup), ); -const withDefaultPlaceholder = ( - component: T, +const withDefaultPlaceholder = ( + component: Component, type: 'input' | 'select', componentProps: Recordable = {}, ) => { @@ -702,7 +702,9 @@ async function initComponentAdapter() { modelValueProp: 'value', }), Input: withDefaultPlaceholder(Input, 'input'), - InputNumber: withDefaultPlaceholder(InputNumber, 'input'), + InputNumber: withDefaultPlaceholder(InputNumber, 'input', { + style: { width: '100%' }, + }), InputPassword: withDefaultPlaceholder(InputPassword, 'input'), Mentions: withDefaultPlaceholder(Mentions, 'input'), // 自定义主要按钮 diff --git a/apps/web-antd/src/layouts/basic.vue b/apps/web-antd/src/layouts/basic.vue index 1bb07ec8f..c938f09cd 100644 --- a/apps/web-antd/src/layouts/basic.vue +++ b/apps/web-antd/src/layouts/basic.vue @@ -226,6 +226,7 @@ watch( description="ann.vben@gmail.com" tag-text="Pro" @logout="handleLogout" + @clear-preferences-and-logout="handleLogout" /> diff --git a/docs/src/demos/vben-vxe-table/basic/index.vue b/docs/src/demos/vben-vxe-table/basic/index.vue index 4b6b5a632..5480f9945 100644 --- a/docs/src/demos/vben-vxe-table/basic/index.vue +++ b/docs/src/demos/vben-vxe-table/basic/index.vue @@ -1,7 +1,7 @@ +``` + +#### getCropImage + +Crop and retrieve the image. + +```ts +getCropImage( + format?: 'image/jpeg' | 'image/png', + quality?: number, + outputType?: 'base64' | 'blob', + targetWidth?: number, + targetHeight?: number, +): Promise +``` + +**Parameters:** + +| Parameter | Type | Default | Description | +| --- | --- | --- | --- | +| `format` | `'image/jpeg' \| 'image/png'` | `'image/png'` | Output image format | +| `quality` | `number` | `0.92` | Compression quality (0-1), only effective for jpeg | +| `outputType` | `'base64' \| 'blob'` | `'blob'` | Output type, base64 string or Blob object | +| `targetWidth` | `number` | - | Target width, defaults to original crop width if omitted | +| `targetHeight` | `number` | - | Target height, defaults to original crop height if omitted | + +## Features + +### Cropping Operations + +- **Drag to Move** - Drag the center area of the crop box to move its position +- **Corner Resize** - Drag the four corners to resize the crop box +- **Edge Resize** - Drag the midpoints of edges to adjust a single side + +### Aspect Ratio Control + +- **Free Ratio** - Without `aspectRatio`, adjust the crop box to any ratio +- **Fixed Ratio** - With `aspectRatio` set, the crop box maintains the specified ratio + +### HiDPI Support + +The component automatically adapts to Retina and other high-DPI screens, ensuring crisp output images. + +### Image Fitting + +- Images are automatically scaled to fit within the container +- Supports both local and remote images +- Remote images require CORS support from the server to export cropped results + +## Usage Example + +```vue + + + +``` diff --git a/docs/src/en/components/common-ui/vben-descriptions.md b/docs/src/en/components/common-ui/vben-descriptions.md new file mode 100644 index 000000000..4685b1f5b --- /dev/null +++ b/docs/src/en/components/common-ui/vben-descriptions.md @@ -0,0 +1,102 @@ +--- +outline: deep +--- + +# Vben Descriptions + +`Descriptions` displays a group of read-only fields, commonly used on detail pages and information previews. It is built on shadcn-ui with an API modeled after Ant Design Vue's Descriptions, supporting responsive columns, column spanning, borders, and vertical layout. + +> If the documentation does not cover the details you need, please refer to the online examples. + +::: info Before you start + +The component supports two usages: data-driven via `items` (recommended), or declaring entries with the `VbenDescriptionsItem` child component. `items` takes precedence when both are provided. ::: + +## Basic Usage + +Pass an array of fields via `items`, each with a `label` and `content`. Columns adapt to breakpoints by default (1 column on `xs`, 2 on `sm`, 3 on `md` and above). + + + +## Bordered + +Set `bordered` for a bordered style, combined with the `title` prop and the `#extra` slot (an action area on the right of the title). + + + +## Vertical Layout + +Use `layout="vertical"` to place labels above their content. + + + +## Sizes + +Use `size` to switch between `small`, `middle`, and `large`. + + + +## Span & Responsive + +Set `span` on an item to span multiple columns; `'filled'` fills the remaining space of the current row. `column` accepts a breakpoint-keyed object for responsive columns. + + + +## Child Component Usage + +When `items` is omitted, declare entries with `VbenDescriptionsItem` in the default slot. Content can be customized via the default slot or the `#content` slot. + + + +## API + +### Descriptions Props + +| Prop | Description | Type | Default | +| --- | --- | --- | --- | +| items | Data-driven entries; reads the default slot when omitted | `DescriptionsItemType[]` | - | +| bordered | Whether to show borders | `boolean` | `false` | +| column | Columns per row, supports breakpoint config | `number \| Partial>` | `{ xs: 1, sm: 2, md: 3, xxxl: 4 }` | +| layout | Layout direction | `'horizontal' \| 'vertical'` | `'horizontal'` | +| size | Size | `'small' \| 'middle' \| 'large'` | `'middle'` | +| colon | Show colon (only for non-bordered horizontal layout) | `boolean` | `true` | +| title | Title | `string` | - | +| extra | Action area on the right of the title | `string` | - | +| labelStyle | Shared label style | `CSSProperties` | - | +| contentStyle | Shared content style | `CSSProperties` | - | +| class | Custom class for the root node | `string` | - | + +### Descriptions Slots + +| Slot | Description | +| ------- | ------------------------------------- | +| title | Custom title | +| extra | Custom action area beside the title | +| default | Place `VbenDescriptionsItem` children | + +### DescriptionsItem + +Each entry in `items`, or the props of the `VbenDescriptionsItem` child component. + +| Prop | Description | Type | Default | +| --- | --- | --- | --- | +| label | Label | `string \| number \| (() => VNode) \| Component` | - | +| content | Content | `string \| number \| (() => VNode) \| Component` | - | +| span | Columns to span, `'filled'` fills the rest of the row | `number \| 'filled' \| Partial>` | `1` | +| labelStyle | Label style | `CSSProperties` | - | +| contentStyle | Content style | `CSSProperties` | - | +| key | Unique key | `string \| number` | - | + +### DescriptionsItem Slots + +Available only for the child component usage. + +| Slot | Description | +| ------- | --------------------------------- | +| default | Content (equivalent to `content`) | +| content | Custom content | +| label | Custom label | + +::: tip Breakpoint + +The responsive `Breakpoint` is one of `'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl'`, with pixel values aligned with Ant Design (`sm` 576, `md` 768, `lg` 992, `xl` 1200, `xxl` 1600, `xxxl` 2000). ::: diff --git a/docs/src/en/components/common-ui/vben-form.md b/docs/src/en/components/common-ui/vben-form.md index 58cd7a4d4..aa8d0589c 100644 --- a/docs/src/en/components/common-ui/vben-form.md +++ b/docs/src/en/components/common-ui/vben-form.md @@ -103,7 +103,7 @@ import { TimePicker, TreeSelect, Upload, -} from 'ant-design-vue'; +} from 'antdv-next'; const withDefaultPlaceholder = ( component: T, diff --git a/docs/src/en/components/common-ui/vben-table-action.md b/docs/src/en/components/common-ui/vben-table-action.md new file mode 100644 index 000000000..7c1e76553 --- /dev/null +++ b/docs/src/en/components/common-ui/vben-table-action.md @@ -0,0 +1,165 @@ +--- +outline: deep +--- + +# Vben TableAction + +`TableAction` renders a group of action buttons for table operation columns, inspired by the TableAction component from vben2. Built on shadcn-ui, it supports permission control, popconfirm, tooltips, a "more" dropdown, and dividers, and can be reused inside or outside tables. + +> If the documentation does not cover the details you need, please refer to the online examples. + +::: info Before you start + +The component carries no business logic (it does not read the permission store directly); permissions are handled by injecting `hasPermission`, keeping the core layer decoupled and reusable across frameworks. Inside vxe-table, the recommended approach is to render it via a column slot (`slots: { default: 'action' }`) on the page, without changing the table's original rendering mechanism. ::: + +## Basic Usage + +Pass an array of action items via `actions`, each with `text`, `onClick`, etc. `danger` marks destructive actions, and `divider` shows separators between buttons. + + + +## Tooltip + +Add a tooltip to an action via `tooltip`, accepting a string or a `{ content, side }` object. + + + +## PopConfirm + +Use `popConfirm` to require confirmation before the action runs, commonly used for destructive actions like delete. + + + +## More Dropdown + +Use `dropdownActions` to collapse secondary actions into a "more" dropdown. `moreText` customizes the button label. + + + +## Permission Control + +Set an `auth` code on an action and inject a `hasPermission` resolver; actions without permission are hidden. + + + +## Usage with vxe-table + +Without changing vxe-table's rendering mechanism, declare a slot in the column config and render it on the page. + +::: tip Recommended: use the adapter-wrapped version The project's `#/adapter/vxe-table` re-wraps `VbenTableAction` and injects `hasPermission` internally (based on `useAccess().hasAccessByCodes`). So when you import it from the adapter, **you no longer need to pass `:has-permission`** — just declare permission codes via the `auth` field of each action. ::: + +```ts +// data.ts — declare a slot in the column config +{ + align: 'center', + field: 'operation', + fixed: 'right', + slots: { default: 'action' }, + title: $t('system.user.operation'), + width: 180, +} +``` + +```vue + + + + +``` + +If you import the core component directly from `@vben/common-ui` (without going through the adapter), the component carries no business logic and you need to inject `hasPermission` yourself: + +```vue + + + +``` + +## API + +### TableAction Props + +| Prop | Description | Type | Default | +| --- | --- | --- | --- | +| actions | Main action buttons | `ActionItem[]` | `[]` | +| dropdownActions | Actions inside the "more" dropdown | `ActionItem[]` | `[]` | +| align | Alignment | `'start' \| 'center' \| 'end'` | `'end'` | +| divider | Whether to show separators between buttons | `boolean` | `false` | +| moreText | Label for the "more" button (shown beside the icon) | `string` | - | +| hasPermission | Permission resolver; returning `false` hides the action with that `auth` (auto-injected when imported from `#/adapter/vxe-table`, no need to pass manually) | `(auth?: string \| string[]) => boolean` | - | +| class | Custom class for the root node | `string` | - | + +### ActionItem + +| Prop | Description | Type | Default | +| --- | --- | --- | --- | +| text | Button text | `string` | - | +| icon | Icon component | `string` \| `VbenIcon` | - | +| onClick | Click callback | `() => void` | - | +| auth | Permission code, filtered by `hasPermission` | `string \| string[]` | - | +| ifShow | Whether to show | `boolean \| (() => boolean)` | `true` | +| disabled | Whether disabled | `boolean` | `false` | +| loading | Loading state | `boolean` | `false` | +| danger | Destructive action (red text) | `boolean` | `false` | +| tooltip | Tooltip | `string \| { content: string; side?: 'top' \| 'bottom' \| 'left' \| 'right' }` | - | +| popConfirm | PopConfirm | `TableActionPopConfirm` | - | +| variant | Button variant | `ButtonVariants['variant']` | `'link'` | +| size | Button size | `ButtonVariants['size']` | `'sm'` | +| key | Unique key | `string \| number` | - | + +### TableActionPopConfirm + +| Prop | Description | Type | Default | +| --- | --- | --- | --- | +| title | Confirm title | `string` | `'Are you sure?'` | +| okText | Confirm button text | `string` | `'OK'` | +| cancelText | Cancel button text | `string` | `'Cancel'` | +| confirm | Confirm callback; falls back to `action.onClick` if omitted | `() => void` | - | diff --git a/docs/src/en/guide/essentials/external-module.md b/docs/src/en/guide/essentials/external-module.md index f0a6d6e3f..0b1fc22b7 100644 --- a/docs/src/en/guide/essentials/external-module.md +++ b/docs/src/en/guide/essentials/external-module.md @@ -1,6 +1,6 @@ # External Modules -In addition to the external modules that are included by default in the project, sometimes we need to import other external modules. Let's take [ant-design-vue](https://antdv.com/components/overview) as an example: +In addition to the external modules that are included by default in the project, sometimes we need to import other external modules. Let's take [antdv-next](https://antdv.com/components/overview) as an example: ## Installing Dependencies @@ -13,7 +13,7 @@ In addition to the external modules that are included by default in the project, ```bash # cd /path/to/your/package -pnpm add ant-design-vue +pnpm add antdv-next ``` ## Usage @@ -22,9 +22,9 @@ pnpm add ant-design-vue ```ts import { createApp } from 'vue'; -import Antd from 'ant-design-vue'; +import Antd from 'antdv-next'; import App from './App'; -import 'ant-design-vue/dist/reset.css'; +import 'antdv-next/dist/reset.css'; const app = createApp(App); @@ -43,7 +43,7 @@ app.use(Antd).mount('#app'); ```vue