diff --git a/docs/src/demos/vben-form/value-format/index.vue b/docs/src/demos/vben-form/value-format/index.vue deleted file mode 100644 index 0bd870d99..000000000 --- a/docs/src/demos/vben-form/value-format/index.vue +++ /dev/null @@ -1,138 +0,0 @@ - - - diff --git a/docs/src/en/components/common-ui/vben-alert.md b/docs/src/en/components/common-ui/vben-alert.md deleted file mode 100644 index fe2a13749..000000000 --- a/docs/src/en/components/common-ui/vben-alert.md +++ /dev/null @@ -1,76 +0,0 @@ ---- -outline: deep ---- - -# Vben Alert - -`Alert` provides lightweight JavaScript-driven dialogs for simple `alert`, `confirm`, and `prompt` style interactions. - -## Basic Usage - -Use `alert` for a single confirm button dialog: - - - -Use `confirm` for confirm/cancel interactions: - - - -Use `prompt` when you need simple user input: - - - -## useAlertContext - -If `content`, `footer`, or `icon` is rendered through a custom component, you can call `useAlertContext()` inside that component to access the current dialog actions. - -| Method | Description | Type | -| ----------- | -------------------------- | ------------ | -| `doConfirm` | trigger the confirm action | `() => void` | -| `doCancel` | trigger the cancel action | `() => void` | - -## Core Types - -```ts -export type IconType = 'error' | 'info' | 'question' | 'success' | 'warning'; - -export type BeforeCloseScope = { - isConfirm: boolean; -}; - -export type AlertProps = { - beforeClose?: ( - scope: BeforeCloseScope, - ) => boolean | Promise | undefined; - bordered?: boolean; - buttonAlign?: 'center' | 'end' | 'start'; - cancelText?: string; - centered?: boolean; - confirmText?: string; - containerClass?: string; - content: Component | string; - contentClass?: string; - contentMasking?: boolean; - footer?: Component | string; - icon?: Component | IconType; - overlayBlur?: number; - showCancel?: boolean; - title?: string; -}; - -export type PromptProps = { - beforeClose?: (scope: { - isConfirm: boolean; - value: T | undefined; - }) => boolean | Promise | undefined; - component?: Component; - componentProps?: Recordable; - componentSlots?: - | (() => any) - | Recordable - | VNode - | VNodeArrayChildren; - defaultValue?: T; - modelPropName?: string; -} & Omit; -``` diff --git a/docs/src/en/components/common-ui/vben-api-component.md b/docs/src/en/components/common-ui/vben-api-component.md deleted file mode 100644 index f260a3791..000000000 --- a/docs/src/en/components/common-ui/vben-api-component.md +++ /dev/null @@ -1,69 +0,0 @@ ---- -outline: deep ---- - -# Vben ApiComponent - -`ApiComponent` is a wrapper used to attach remote-option loading behavior to an existing component while preserving the original component usage pattern. - -## Common Usage - -The current wrapper flow is: - -- pass the target component through `component` -- fetch remote data through `api` -- transform data through `beforeFetch` and `afterFetch` -- map remote fields through `resultField`, `valueField`, `labelField`, and `childrenField` -- pass normalized options to the target component through `optionsPropName` - -```vue - - - -``` - -## Current Props - -| Prop | Description | Type | -| --- | --- | --- | -| `component` | wrapped target component | `Component` | -| `api` | remote request function | `(arg?: any) => Promise` | -| `params` | extra request params | `Record` | -| `beforeFetch` | hook before request | `AnyPromiseFunction` | -| `afterFetch` | hook after request | `AnyPromiseFunction` | -| `visibleEvent` | event name used to lazy-load data | `string` | -| `loadingSlot` | slot name used to render the loading icon | `string` | -| `modelPropName` | model prop name of the wrapped component | `string` | -| `autoSelect` | auto-pick the first / last / only option, or use a custom function | `'first' \| 'last' \| 'one' \| ((items) => item) \| false` | - -## Exposed Methods - -| Method | Description | -| ------------------------ | -------------------------------------- | -| `getComponentRef()` | returns the wrapped component instance | -| `updateParam(newParams)` | merges and updates request params | -| `getOptions()` | returns loaded options | -| `getValue()` | returns the current bound value | diff --git a/docs/src/en/components/common-ui/vben-count-to-animator.md b/docs/src/en/components/common-ui/vben-count-to-animator.md deleted file mode 100644 index 615a417b4..000000000 --- a/docs/src/en/components/common-ui/vben-count-to-animator.md +++ /dev/null @@ -1,51 +0,0 @@ ---- -outline: deep ---- - -# Vben CountToAnimator - -`CountToAnimator` renders animated number transitions. - -## Basic Usage - -Use `start-val`, `end-val`, and `duration` to control the animation range and timing. - - - -## Formatting - -Use `prefix`, `suffix`, `separator`, and `decimal` to control how the number is displayed. - - - -## Props - -| Prop | Description | Type | Default | -| --- | --- | --- | --- | -| `startVal` | starting value | `number` | `0` | -| `endVal` | ending value | `number` | `2021` | -| `duration` | animation duration in ms | `number` | `1500` | -| `autoplay` | start automatically | `boolean` | `true` | -| `prefix` | value prefix | `string` | `''` | -| `suffix` | value suffix | `string` | `''` | -| `separator` | thousands separator | `string` | `','` | -| `decimal` | decimal separator | `string` | `'.'` | -| `color` | text color | `string` | `''` | -| `useEasing` | enable transition preset easing | `boolean` | `true` | -| `transition` | transition preset name | `keyof typeof TransitionPresets` | `'linear'` | -| `decimals` | decimal places to keep | `number` | `0` | - -## Events - -| Event | Description | Type | -| ------------ | ------------------------------- | ------------ | -| `started` | fired when the animation starts | `() => void` | -| `finished` | fired when the animation ends | `() => void` | -| `onStarted` | deprecated alias of `started` | `() => void` | -| `onFinished` | deprecated alias of `finished` | `() => void` | - -## Exposed Methods - -| Method | Description | Type | -| ------- | --------------------------------- | ------------ | -| `reset` | reset to `startVal` and run again | `() => void` | diff --git a/docs/src/en/components/common-ui/vben-drawer.md b/docs/src/en/components/common-ui/vben-drawer.md deleted file mode 100644 index 20b1d7ddf..000000000 --- a/docs/src/en/components/common-ui/vben-drawer.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -outline: deep ---- - -# Vben Drawer - -`Vben Drawer` is the shared drawer wrapper used by the framework. It supports auto-height layout, loading state, connected components, and an imperative API similar to the modal API. - -## Basic Usage - -```ts -const [Drawer, drawerApi] = useVbenDrawer({ - // props - // events -}); -``` - - - -## Current Usage Notes - -- If you use `connectedComponent`, the inner and outer components share data through `drawerApi.setData()` and `drawerApi.getData()`. -- Default drawer behavior can be adjusted in `apps//src/bootstrap.ts` through `setDefaultDrawerProps(...)`. -- `setState(...)` works on `DrawerState`, not `ModalState`. - -## Key Props - -| Prop | Description | Type | -| --- | --- | --- | -| `appendToMain` | mount inside the main content area instead of `body` | `boolean` | -| `connectedComponent` | connect an inner component to the drawer wrapper | `Component` | -| `closeIconPlacement` | position of the close icon | `'left' \| 'right'` | -| `placement` | drawer side | `'left' \| 'right' \| 'top' \| 'bottom'` | -| `overlayBlur` | blur amount for the overlay | `number` | -| `submitting` | lock drawer interactions while submitting | `boolean` | - -## Events - -| Event | Description | Type | -| --- | --- | --- | -| `onBeforeClose` | called before close; returning `false` or rejecting prevents close | `() => Promise \| boolean \| undefined` | -| `onOpenChange` | called when open state changes | `(isOpen: boolean) => void` | -| `onOpened` | called after open animation completes | `() => void` | -| `onClosed` | called after close animation completes | `() => void` | - -## drawerApi - -| Method | Description | -| ----------------------- | -------------------------------------- | -| `setState(...)` | updates drawer state | -| `open()` | opens the drawer | -| `close()` | closes the drawer | -| `setData(data)` | stores shared data | -| `getData()` | reads shared data | -| `lock(isLocked = true)` | locks the drawer into submitting state | -| `unlock()` | alias for `lock(false)` | diff --git a/docs/src/en/components/common-ui/vben-ellipsis-text.md b/docs/src/en/components/common-ui/vben-ellipsis-text.md deleted file mode 100644 index 602812a07..000000000 --- a/docs/src/en/components/common-ui/vben-ellipsis-text.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -outline: deep ---- - -# Vben EllipsisText - -`EllipsisText` displays long text with truncation, tooltip support, and optional expand/collapse behavior. - -## Basic Usage - -Pass the text through the default slot and limit the visual width with `maxWidth`. - - - -## Current Props - -| Prop | Description | Type | Default | -| --- | --- | --- | --- | -| `expand` | allow click-to-expand behavior | `boolean` | `false` | -| `line` | max visible line count | `number` | `1` | -| `maxWidth` | max width of the text area | `number \| string` | `'100%'` | -| `placement` | tooltip placement | `'bottom' \| 'left' \| 'right' \| 'top'` | `'top'` | -| `tooltip` | enable tooltip | `boolean` | `true` | -| `tooltipWhenEllipsis` | only show tooltip when text is actually truncated | `boolean` | `false` | -| `ellipsisThreshold` | pixel threshold used when checking truncation | `number` | `3` | -| `tooltipBackgroundColor` | tooltip background color | `string` | `''` | -| `tooltipColor` | tooltip text color | `string` | `''` | -| `tooltipFontSize` | tooltip font size in px | `number` | `14` | -| `tooltipMaxWidth` | tooltip max width in px | `number` | - | -| `tooltipOverlayStyle` | tooltip content style | `CSSProperties` | `{ textAlign: 'justify' }` | - -## Events - -| Event | Description | Type | -| --- | --- | --- | -| `expandChange` | fired when expand state changes | `(isExpand: boolean) => void` | - -## Slots - -| Slot | Description | -| --------- | ---------------------- | -| `tooltip` | custom tooltip content | diff --git a/docs/src/en/components/common-ui/vben-form.md b/docs/src/en/components/common-ui/vben-form.md deleted file mode 100644 index 58cd7a4d4..000000000 --- a/docs/src/en/components/common-ui/vben-form.md +++ /dev/null @@ -1,214 +0,0 @@ ---- -outline: deep ---- - -# Vben Form - -`Vben Form` is the shared form abstraction used across different UI-library variants such as `Ant Design Vue`, `Element Plus`, `Naive UI`, and other adapters added inside this repository. - -> If some details are not obvious from the docs, check the live demos as well. - -## Adapter Setup - -Each app keeps its own adapter layer under `src/adapter/form.ts` and `src/adapter/component/index.ts`. - -The current adapter pattern is: - -- initialize the shared component adapter first -- call `setupVbenForm(...)` -- map special `v-model:*` prop names through `modelPropNameMap` -- keep the form empty state aligned with the actual UI library behavior - -### Form Adapter Example - -```ts -import type { - VbenFormSchema as FormSchema, - VbenFormProps, -} from '@vben/common-ui'; - -import type { ComponentType } from './component'; - -import { setupVbenForm, useVbenForm as useForm, z } from '@vben/common-ui'; -import { $t } from '@vben/locales'; - -import { initComponentAdapter } from './component'; - -initComponentAdapter(); -setupVbenForm({ - config: { - baseModelPropName: 'value', - emptyStateValue: null, - modelPropNameMap: { - Checkbox: 'checked', - Radio: 'checked', - Switch: 'checked', - Upload: 'fileList', - }, - }, - defineRules: { - required: (value, _params, ctx) => { - if (value === undefined || value === null || value.length === 0) { - return $t('ui.formRules.required', [ctx.label]); - } - return true; - }, - selectRequired: (value, _params, ctx) => { - if (value === undefined || value === null) { - return $t('ui.formRules.selectRequired', [ctx.label]); - } - return true; - }, - }, -}); - -const useVbenForm = useForm; - -export { useVbenForm, z }; -export type VbenFormSchema = FormSchema; -export type { VbenFormProps }; -``` - -### Component Adapter Example - -```ts -import type { Component, SetupContext } from 'vue'; - -import type { BaseFormComponentType } from '@vben/common-ui'; - -import { h } from 'vue'; - -import { globalShareState } from '@vben/common-ui'; -import { $t } from '@vben/locales'; -import { - AutoComplete, - Button, - Checkbox, - CheckboxGroup, - DatePicker, - Divider, - Input, - InputNumber, - InputPassword, - Mentions, - notification, - Radio, - RadioGroup, - RangePicker, - Rate, - Select, - Space, - Switch, - Textarea, - TimePicker, - TreeSelect, - Upload, -} from 'ant-design-vue'; - -const withDefaultPlaceholder = ( - component: T, - type: 'input' | 'select', -) => { - return (props: any, { attrs, slots }: Omit) => { - const placeholder = props?.placeholder || $t(`ui.placeholder.${type}`); - return h(component, { ...props, ...attrs, placeholder }, slots); - }; -}; - -export type ComponentType = - | 'AutoComplete' - | 'Checkbox' - | 'CheckboxGroup' - | 'DatePicker' - | 'DefaultButton' - | 'Divider' - | 'Input' - | 'InputNumber' - | 'InputPassword' - | 'Mentions' - | 'PrimaryButton' - | 'Radio' - | 'RadioGroup' - | 'RangePicker' - | 'Rate' - | 'Select' - | 'Space' - | 'Switch' - | 'Textarea' - | 'TimePicker' - | 'TreeSelect' - | 'Upload' - | BaseFormComponentType; - -async function initComponentAdapter() { - const components: Partial> = { - AutoComplete, - Checkbox, - CheckboxGroup, - DatePicker, - DefaultButton: (props, { attrs, slots }) => { - return h(Button, { ...props, attrs, type: 'default' }, slots); - }, - Divider, - Input: withDefaultPlaceholder(Input, 'input'), - InputNumber: withDefaultPlaceholder(InputNumber, 'input'), - InputPassword: withDefaultPlaceholder(InputPassword, 'input'), - Mentions: withDefaultPlaceholder(Mentions, 'input'), - PrimaryButton: (props, { attrs, slots }) => { - return h(Button, { ...props, attrs, type: 'primary' }, slots); - }, - Radio, - RadioGroup, - RangePicker, - Rate, - Select: withDefaultPlaceholder(Select, 'select'), - Space, - Switch, - Textarea: withDefaultPlaceholder(Textarea, 'input'), - TimePicker, - TreeSelect: withDefaultPlaceholder(TreeSelect, 'select'), - Upload, - }; - - globalShareState.setComponents(components); - globalShareState.defineMessage({ - copyPreferencesSuccess: (title, content) => { - notification.success({ - description: content, - message: title, - placement: 'bottomRight', - }); - }, - }); -} - -export { initComponentAdapter }; -``` - -## Basic Usage - -Create the form through `useVbenForm`: - - - -## Value Formatting - -Use `schema.valueFormat` when the component value is convenient for the UI but the final payload returned by `getValues()` should use a different shape. - -- return a value to write back to the current field -- call `setValue(key, nextValue)` to write derived fields -- return `undefined` to keep the original field removed after decomposition - - - -## Key API Notes - -- `useVbenForm` returns `[Form, formApi]` -- `formApi.getFieldComponentRef()` and `formApi.getFocusedField()` are available in current versions -- `handleValuesChange(values, fieldsChanged)` includes the second parameter in newer versions -- `fieldMappingTime` and `scrollToFirstError` are part of the current form props -- `schema.valueFormat` lets `getValues()` transform UI values into backend-friendly payloads - -## Reference - -For the complete Chinese API tables and more examples, see the Chinese component page if you need the full parameter matrix. diff --git a/docs/src/en/components/common-ui/vben-modal.md b/docs/src/en/components/common-ui/vben-modal.md deleted file mode 100644 index 0971c4413..000000000 --- a/docs/src/en/components/common-ui/vben-modal.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -outline: deep ---- - -# Vben Modal - -`Vben Modal` is the shared modal wrapper used by the framework. It supports draggable behavior, fullscreen mode, auto-height handling, loading state, connected components, and an imperative API. - -## Basic Usage - -```ts -const [Modal, modalApi] = useVbenModal({ - // props - // events -}); -``` - - - -## Current Usage Notes - -- If you use `connectedComponent`, the inner and outer components share data through `modalApi.setData()` and `modalApi.getData()`. -- When `connectedComponent` is present, avoid pushing extra modal props through the connected side. Prefer `useVbenModal(...)` or `modalApi.setState(...)`. -- Default modal behavior can be adjusted in `apps//src/bootstrap.ts` through `setDefaultModalProps(...)`. - -## Key Props - -| Prop | Description | Type | -| --- | --- | --- | -| `appendToMain` | mount inside the main content area instead of `body` | `boolean` | -| `connectedComponent` | connect an inner component to the modal wrapper | `Component` | -| `animationType` | modal enter/leave animation | `'slide' \| 'scale'` | -| `fullscreenButton` | show or hide the fullscreen toggle | `boolean` | -| `overlayBlur` | blur amount for the overlay | `number` | -| `submitting` | lock modal interactions while submitting | `boolean` | - -## Events - -| Event | Description | Type | -| --- | --- | --- | -| `onBeforeClose` | called before close; returning `false` or rejecting prevents close | `() => Promise \| boolean \| undefined` | -| `onOpenChange` | called when open state changes | `(isOpen: boolean) => void` | -| `onOpened` | called after open animation completes | `() => void` | -| `onClosed` | called after close animation completes | `() => void` | - -## modalApi - -| Method | Description | -| ----------------------- | ------------------------------------- | -| `setState(...)` | updates modal state | -| `open()` | opens the modal | -| `close()` | closes the modal | -| `setData(data)` | stores shared data | -| `getData()` | reads shared data | -| `lock(isLocked = true)` | locks the modal into submitting state | -| `unlock()` | alias for `lock(false)` | diff --git a/docs/src/en/components/common-ui/vben-vxe-table.md b/docs/src/en/components/common-ui/vben-vxe-table.md deleted file mode 100644 index 2fba1dc0c..000000000 --- a/docs/src/en/components/common-ui/vben-vxe-table.md +++ /dev/null @@ -1,87 +0,0 @@ ---- -outline: deep ---- - -# Vben Vxe Table - -`Vben Vxe Table` wraps `vxe-table` together with `Vben Form` so you can build searchable data grids with a shared API. - -## Adapter Example - -The current renderer adapter uses `renderTableDefault(...)` for table cell rendering: - -```ts -vxeUI.renderer.add('CellImage', { - renderTableDefault(_renderOpts, params) { - const { column, row } = params; - return h(Image, { src: row[column.field] }); - }, -}); - -vxeUI.renderer.add('CellLink', { - renderTableDefault(renderOpts) { - const { props } = renderOpts; - return h( - Button, - { size: 'small', type: 'link' }, - { default: () => props?.text }, - ); - }, -}); -``` - -## Basic Usage - -```vue - - - -``` - - - -## GridApi - -| Method | Description | Type | -| --- | --- | --- | -| `setLoading` | update loading state | `(loading: boolean) => void` | -| `setGridOptions` | merge new grid options | `(options: Partial) => void` | -| `reload` | reload data and reset pagination | `(params?: Record) => void` | -| `query` | query data while keeping the current page | `(params?: Record) => void` | -| `grid` | `vxe-grid` instance | `VxeGridInstance` | -| `formApi` | search form API | `FormApi` | -| `toggleSearchForm` | toggle or force the search form visible state | `(show?: boolean) => boolean` | - -## Props - -| Prop | Description | Type | -| --- | --- | --- | -| `tableTitle` | table title | `string` | -| `tableTitleHelp` | help text for the table title | `string` | -| `class` | class for the outer container | `string` | -| `gridClass` | class for the `vxe-grid` node | `string` | -| `gridOptions` | `vxe-grid` options | `DeepPartial` | -| `gridEvents` | `vxe-grid` event handlers | `DeepPartial` | -| `formOptions` | search form options | `VbenFormProps` | -| `showSearchForm` | whether the search form is visible | `boolean` | -| `separator` | separator between the search form and table body | `boolean \| SeparatorOptions` | - -## Slots - -| Slot | Description | -| ----------------- | ------------------------------------------------------- | -| `toolbar-actions` | left side of the toolbar, near the title | -| `toolbar-tools` | right side of the toolbar, before built-in tool buttons | -| `table-title` | custom table title | - -All named slots starting with `form-` are forwarded to the search form. diff --git a/docs/src/en/components/introduction.md b/docs/src/en/components/introduction.md deleted file mode 100644 index 806ef09ff..000000000 --- a/docs/src/en/components/introduction.md +++ /dev/null @@ -1,15 +0,0 @@ -# Introduction - -::: info README - -This section documents the framework components, including their usage patterns, configuration points, and major APIs. If the built-in wrappers do not fit your needs, you can always use native components directly or build your own abstractions. - -::: - -## Layout Components - -Layout components are usually used as top-level containers inside the page content area. They provide shared layout styles and some baseline behavior. - -## Common Components - -Common components include frequently used UI building blocks such as modals, drawers, forms, and API-backed selectors. Most of them are implemented on top of shared Tailwind CSS and shadcn-vue based primitives, while still allowing each app to adapt them to its own UI library. diff --git a/docs/src/en/components/layout-ui/page.md b/docs/src/en/components/layout-ui/page.md deleted file mode 100644 index 467d30c4c..000000000 --- a/docs/src/en/components/layout-ui/page.md +++ /dev/null @@ -1,29 +0,0 @@ ---- -outline: deep ---- - -# Page - -`Page` is the standard top-level layout container for business pages. It provides a header area, a content area, and an optional footer area. - -## Props - -| Prop | Description | Type | Default | -| --- | --- | --- | --- | -| `title` | page title | `string \| slot` | - | -| `description` | page description | `string \| slot` | - | -| `contentClass` | class for the content area | `string` | - | -| `headerClass` | class for the header area | `string` | - | -| `footerClass` | class for the footer area | `string` | - | -| `autoContentHeight` | auto-calculate the content area height from the visible layout height | `boolean` | `false` | -| `heightOffset` | extra height offset subtracted from the content area when auto height is enabled | `number` | `0` | - -## Slots - -| Slot | Description | -| ------------- | ------------------------- | -| `default` | page content | -| `title` | custom title | -| `description` | custom description | -| `extra` | right-side header content | -| `footer` | footer content | diff --git a/playground/src/views/demos/features/preferences-extension/index.vue b/playground/src/views/demos/features/preferences-extension/index.vue deleted file mode 100644 index 83b4c808d..000000000 --- a/playground/src/views/demos/features/preferences-extension/index.vue +++ /dev/null @@ -1,231 +0,0 @@ - - - diff --git a/playground/src/views/examples/tiptap/index.vue b/playground/src/views/examples/tiptap/index.vue deleted file mode 100644 index 009e18c7f..000000000 --- a/playground/src/views/examples/tiptap/index.vue +++ /dev/null @@ -1,39 +0,0 @@ - - -