@vc-shell/vc-app-skill 2.1.0-pr255.87acc71 → 2.1.0-pr256.0fe3abb
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/runtime/knowledge/docs/core/api/platform.docs.md +20 -18
- package/runtime/knowledge/docs/core/blade-navigation/blade-nav-composables.docs.md +43 -34
- package/runtime/knowledge/docs/core/blade-navigation/table-query-state/useTableQueryState.docs.md +95 -0
- package/runtime/knowledge/docs/core/composables/useAppBarMobileButtons/useAppBarMobileButtons.docs.md +5 -3
- package/runtime/knowledge/docs/core/composables/useAppBarWidget/useAppBarWidget.docs.md +12 -10
- package/runtime/knowledge/docs/core/composables/useAppInsights/useAppInsights.docs.md +7 -5
- package/runtime/knowledge/docs/core/composables/useAssets/useAssets.docs.md +8 -6
- package/runtime/knowledge/docs/core/composables/useAssetsManager/useAssetsManager.docs.md +3 -1
- package/runtime/knowledge/docs/core/composables/useAsync/useAsync.docs.md +1 -1
- package/runtime/knowledge/docs/core/composables/useBladeRegistry/useBladeRegistry.docs.md +8 -5
- package/runtime/knowledge/docs/core/composables/useBladeWidgets/index.docs.md +12 -12
- package/runtime/knowledge/docs/core/composables/useBreadcrumbs/useBreadcrumbs.docs.md +3 -3
- package/runtime/knowledge/docs/core/composables/useConnectionStatus/useConnectionStatus.docs.md +4 -3
- package/runtime/knowledge/docs/core/composables/useDynamicProperties/useDynamicProperties.docs.md +1 -0
- package/runtime/knowledge/docs/core/composables/useFunctions/useFunctions.docs.md +3 -3
- package/runtime/knowledge/docs/core/composables/useKeyboardNavigation/useKeyboardNavigation.docs.md +5 -4
- package/runtime/knowledge/docs/core/composables/useLanguages/useLanguages.docs.md +3 -3
- package/runtime/knowledge/docs/core/composables/useLoading/useLoading.docs.md +2 -0
- package/runtime/knowledge/docs/core/composables/useModificationTracker/useModificationTracker.docs.md +1 -2
- package/runtime/knowledge/docs/core/composables/useNotifications/useNotifications.docs.md +1 -1
- package/runtime/knowledge/docs/core/composables/usePermissions/usePermissions.docs.md +3 -3
- package/runtime/knowledge/docs/core/composables/usePlatformLocaleSync/usePlatformLocaleSync.docs.md +35 -0
- package/runtime/knowledge/docs/core/composables/usePopup/usePopup.docs.md +1 -1
- package/runtime/knowledge/docs/core/composables/useResponsive/useResponsive.docs.md +2 -2
- package/runtime/knowledge/docs/core/composables/useSettings/useSettings.docs.md +2 -1
- package/runtime/knowledge/docs/core/composables/useSettingsMenu/useSettingsMenu.docs.md +18 -18
- package/runtime/knowledge/docs/core/composables/useSidebarState/useSidebarState.docs.md +3 -3
- package/runtime/knowledge/docs/core/composables/useSlowNetworkDetection/useSlowNetworkDetection.docs.md +10 -7
- package/runtime/knowledge/docs/core/composables/useTheme/useTheme.docs.md +7 -7
- package/runtime/knowledge/docs/core/composables/useToolbar/useToolbar.docs.md +18 -12
- package/runtime/knowledge/docs/core/composables/useUser/useUser.docs.md +2 -2
- package/runtime/knowledge/docs/core/composables/useUserManagement/useUserManagement.docs.md +20 -20
- package/runtime/knowledge/docs/core/composables/useWidgets/useWidgets.docs.md +15 -24
- package/runtime/knowledge/docs/core/directives/loading/loading.docs.md +2 -2
- package/runtime/knowledge/docs/core/notifications/composables/useBladeNotifications.docs.md +183 -0
- package/runtime/knowledge/docs/core/notifications/composables/useBroadcastFilter.docs.md +117 -0
- package/runtime/knowledge/docs/core/notifications/composables/useNotificationContext.docs.md +150 -0
- package/runtime/knowledge/docs/core/notifications/composables/useNotificationStore.docs.md +114 -0
- package/runtime/knowledge/docs/core/notifications/notifications.docs.md +50 -30
- package/runtime/knowledge/docs/core/plugins/ai-agent/ai-agent.docs.md +30 -11
- package/runtime/knowledge/docs/core/plugins/extension-points/extension-points.docs.md +1 -1
- package/runtime/knowledge/docs/core/plugins/global-error-handler/global-error-handler.docs.md +2 -3
- package/runtime/knowledge/docs/core/plugins/modularity/modularity.docs.md +26 -26
- package/runtime/knowledge/docs/core/plugins/permissions/permissions.docs.md +2 -3
- package/runtime/knowledge/docs/core/plugins/signalR/signalR.docs.md +11 -50
- package/runtime/knowledge/docs/core/plugins/validation/validation.docs.md +9 -6
- package/runtime/knowledge/docs/core/services/services.docs.md +15 -13
- package/runtime/knowledge/docs/core/types/types.docs.md +37 -40
- package/runtime/knowledge/docs/core/utilities/date/date-utilities.docs.md +1 -2
- package/runtime/knowledge/docs/core/utilities/shared-utilities.docs.md +21 -30
- package/runtime/knowledge/docs/core/utilities/thumbnail/thumbnail.docs.md +2 -2
- package/runtime/knowledge/docs/core/utilities/utilities.docs.md +9 -8
- package/runtime/knowledge/docs/injection-keys.docs.md +6 -11
- package/runtime/knowledge/docs/modules/assets/assets-details.docs.md +123 -0
- package/runtime/knowledge/docs/modules/assets-manager/assets-manager.docs.md +1 -1
- package/runtime/knowledge/docs/shell/_internal/popup/common/popup-common.docs.md +20 -12
- package/runtime/knowledge/docs/shell/auth/ChangePasswordPage/change-password-page.docs.md +10 -10
- package/runtime/knowledge/docs/shell/auth/ForgotPasswordPage/forgot-password-page.docs.md +6 -6
- package/runtime/knowledge/docs/shell/auth/InvitePage/invite-page.docs.md +4 -4
- package/runtime/knowledge/docs/shell/auth/LoginPage/login-page.docs.md +16 -14
- package/runtime/knowledge/docs/shell/auth/ResetPasswordPage/reset-password-page.docs.md +1 -1
- package/runtime/knowledge/docs/shell/auth/sign-in/sign-in.docs.md +12 -11
- package/runtime/knowledge/docs/shell/components/change-password/change-password.docs.md +10 -3
- package/runtime/knowledge/docs/shell/components/change-password-button/change-password-button.docs.md +3 -3
- package/runtime/knowledge/docs/shell/components/error-interceptor/error-interceptor.docs.md +9 -2
- package/runtime/knowledge/docs/shell/components/language-selector/language-selector.docs.md +4 -2
- package/runtime/knowledge/docs/shell/components/logout-button/logout-button.docs.md +1 -1
- package/runtime/knowledge/docs/shell/components/notification-dropdown/notification-dropdown.docs.md +35 -31
- package/runtime/knowledge/docs/shell/components/notification-template/notification-template.docs.md +17 -11
- package/runtime/knowledge/docs/shell/components/settings-menu/settings-menu.docs.md +8 -7
- package/runtime/knowledge/docs/shell/components/settings-menu-item/settings-menu-item.docs.md +23 -21
- package/runtime/knowledge/docs/shell/components/sidebar/sidebar.docs.md +5 -3
- package/runtime/knowledge/docs/shell/components/theme-selector/theme-selector.docs.md +7 -7
- package/runtime/knowledge/docs/shell/components/user-dropdown-button/user-dropdown-button.docs.md +11 -11
- package/runtime/knowledge/docs/shell/dashboard/dashboard-charts/dashboard-charts.docs.md +28 -16
- package/runtime/knowledge/docs/shell/dashboard/dashboard-widget-card/dashboard-widget-card.docs.md +17 -19
- package/runtime/knowledge/docs/shell/dashboard/draggable-dashboard/dashboard-widget-skeleton.docs.md +33 -0
- package/runtime/knowledge/docs/shell/dashboard/draggable-dashboard/draggable-dashboard.docs.md +21 -0
- package/runtime/knowledge/docs/ui/components/atoms/vc-badge/vc-badge.docs.md +2 -1
- package/runtime/knowledge/docs/ui/components/atoms/vc-banner/vc-banner.docs.md +2 -2
- package/runtime/knowledge/docs/ui/components/atoms/vc-button/vc-button.docs.md +15 -14
- package/runtime/knowledge/docs/ui/components/atoms/vc-container/vc-container.docs.md +9 -6
- package/runtime/knowledge/docs/ui/components/atoms/vc-environment-banner/vc-environment-banner.docs.md +42 -0
- package/runtime/knowledge/docs/ui/components/atoms/vc-hint/vc-hint.docs.md +1 -1
- package/runtime/knowledge/docs/ui/components/atoms/vc-icon/vc-icon.docs.md +10 -9
- package/runtime/knowledge/docs/ui/components/atoms/vc-image/vc-image.docs.md +19 -4
- package/runtime/knowledge/docs/ui/components/atoms/vc-label/vc-label.docs.md +2 -2
- package/runtime/knowledge/docs/ui/components/atoms/vc-link/vc-link.docs.md +5 -4
- package/runtime/knowledge/docs/ui/components/atoms/vc-loading/vc-loading.docs.md +5 -4
- package/runtime/knowledge/docs/ui/components/atoms/vc-progress/vc-progress.docs.md +9 -8
- package/runtime/knowledge/docs/ui/components/atoms/vc-scrollable-container/vc-scrollable-container.docs.md +7 -0
- package/runtime/knowledge/docs/ui/components/atoms/vc-skeleton/vc-skeleton.docs.md +1 -1
- package/runtime/knowledge/docs/ui/components/atoms/vc-status/vc-status.docs.md +2 -2
- package/runtime/knowledge/docs/ui/components/atoms/vc-status-icon/vc-status-icon.docs.md +1 -1
- package/runtime/knowledge/docs/ui/components/atoms/vc-tooltip/vc-tooltip.docs.md +11 -10
- package/runtime/knowledge/docs/ui/components/atoms/vc-video/vc-video.docs.md +28 -8
- package/runtime/knowledge/docs/ui/components/atoms/vc-widget/vc-widget.docs.md +22 -19
- package/runtime/knowledge/docs/ui/components/molecules/multilanguage-selector/multilanguage-selector.docs.md +8 -8
- package/runtime/knowledge/docs/ui/components/molecules/vc-accordion/vc-accordion.docs.md +16 -6
- package/runtime/knowledge/docs/ui/components/molecules/vc-breadcrumbs/vc-breadcrumbs.docs.md +9 -8
- package/runtime/knowledge/docs/ui/components/molecules/vc-checkbox/vc-checkbox.docs.md +42 -34
- package/runtime/knowledge/docs/ui/components/molecules/vc-checkbox-group/vc-checkbox-group.docs.md +1 -1
- package/runtime/knowledge/docs/ui/components/molecules/vc-color-input/vc-color-input.docs.md +14 -1
- package/runtime/knowledge/docs/ui/components/molecules/vc-date-picker/vc-date-picker.docs.md +3 -1
- package/runtime/knowledge/docs/ui/components/molecules/vc-dropdown/vc-dropdown.docs.md +34 -33
- package/runtime/knowledge/docs/ui/components/molecules/vc-editor/vc-editor.docs.md +26 -24
- package/runtime/knowledge/docs/ui/components/molecules/vc-field/vc-field.docs.md +12 -14
- package/runtime/knowledge/docs/ui/components/molecules/vc-file-upload/vc-file-upload.docs.md +30 -30
- package/runtime/knowledge/docs/ui/components/molecules/vc-input/vc-input.docs.md +2 -2
- package/runtime/knowledge/docs/ui/components/molecules/vc-input-currency/vc-input-currency.docs.md +1 -1
- package/runtime/knowledge/docs/ui/components/molecules/vc-input-dropdown/vc-input-dropdown.docs.md +34 -31
- package/runtime/knowledge/docs/ui/components/molecules/vc-input-group/vc-input-group.docs.md +14 -12
- package/runtime/knowledge/docs/ui/components/molecules/vc-menu/vc-menu.docs.md +1 -1
- package/runtime/knowledge/docs/ui/components/molecules/vc-multivalue/vc-multivalue.docs.md +36 -27
- package/runtime/knowledge/docs/ui/components/molecules/vc-pagination/vc-pagination.docs.md +5 -1
- package/runtime/knowledge/docs/ui/components/molecules/{vc-dropdown-panel/vc-dropdown-panel.docs.md → vc-popover/vc-popover.docs.md} +26 -25
- package/runtime/knowledge/docs/ui/components/molecules/vc-radio-button/vc-radio-button.docs.md +10 -9
- package/runtime/knowledge/docs/ui/components/molecules/vc-select/vc-select.docs.md +44 -19
- package/runtime/knowledge/docs/ui/components/molecules/vc-slider/vc-slider.docs.md +11 -11
- package/runtime/knowledge/docs/ui/components/molecules/vc-switch/vc-switch.docs.md +15 -14
- package/runtime/knowledge/docs/ui/components/molecules/vc-textarea/vc-textarea.docs.md +15 -15
- package/runtime/knowledge/docs/ui/components/molecules/vc-toast/vc-toast.docs.md +15 -13
- package/runtime/knowledge/docs/ui/components/organisms/vc-app/vc-app.docs.md +5 -1
- package/runtime/knowledge/docs/ui/components/organisms/vc-auth-layout/vc-auth-layout.docs.md +18 -0
- package/runtime/knowledge/docs/ui/components/organisms/vc-blade/vc-blade.docs.md +48 -78
- package/runtime/knowledge/docs/ui/components/organisms/vc-data-table/composables/table-composables.docs.md +9 -11
- package/runtime/knowledge/docs/ui/components/organisms/vc-data-table/vc-data-table.docs.md +71 -43
- package/runtime/knowledge/docs/ui/components/organisms/vc-dynamic-property/vc-dynamic-property.docs.md +27 -20
- package/runtime/knowledge/docs/ui/components/organisms/vc-gallery/vc-gallery.docs.md +2 -2
- package/runtime/knowledge/docs/ui/components/organisms/vc-image-upload/vc-image-upload.docs.md +12 -12
- package/runtime/knowledge/docs/ui/components/organisms/vc-popup/vc-popup.docs.md +33 -24
- package/runtime/knowledge/docs/ui/components/organisms/vc-scheduler/vc-scheduler.docs.md +412 -0
- package/runtime/knowledge/docs/ui/components/organisms/vc-sidebar/vc-sidebar.docs.md +43 -26
- package/runtime/knowledge/docs/ui/composables/ui-composables.docs.md +15 -9
- package/runtime/knowledge/docs/ui/composables/useDataTableSort.docs.md +8 -6
- package/runtime/knowledge/docs/ui/composables/useTableSearch.docs.md +130 -0
- package/runtime/knowledge/docs/ui/composables/useTableSelection.docs.md +4 -4
- package/runtime/knowledge/docs/ui/composables/useTableSort.docs.md +2 -3
package/runtime/knowledge/docs/ui/components/molecules/vc-input-dropdown/vc-input-dropdown.docs.md
CHANGED
|
@@ -240,40 +240,43 @@ Replace the default dropdown toggle with a custom element using the `button` slo
|
|
|
240
240
|
|
|
241
241
|
## Props
|
|
242
242
|
|
|
243
|
-
| Prop
|
|
244
|
-
|
|
|
245
|
-
| `modelValue`
|
|
246
|
-
| `option`
|
|
247
|
-
| `options`
|
|
248
|
-
| `optionValue`
|
|
249
|
-
| `optionLabel`
|
|
250
|
-
| `inputType`
|
|
251
|
-
| `searchable`
|
|
252
|
-
| `debounce`
|
|
253
|
-
| `clearable`
|
|
254
|
-
| `prefix`
|
|
255
|
-
| `suffix`
|
|
256
|
-
| `maxlength`
|
|
257
|
-
| `
|
|
258
|
-
| `
|
|
259
|
-
| `
|
|
260
|
-
| `
|
|
261
|
-
| `
|
|
262
|
-
| `
|
|
263
|
-
| `
|
|
264
|
-
| `
|
|
265
|
-
| `
|
|
266
|
-
| `
|
|
267
|
-
| `
|
|
243
|
+
| Prop | Type | Default | Description |
|
|
244
|
+
| ----------------- | -------------------------------------------------------------------------------------------------------------------- | --------- | --------------------------------------------------------------------------------- |
|
|
245
|
+
| `modelValue` | `string \| number \| Date \| null` | -- | Input field value via `v-model` |
|
|
246
|
+
| `option` | `unknown` | -- | Selected dropdown option via `v-model:option` |
|
|
247
|
+
| `options` | `unknown[]` | `[]` | Available options for the dropdown |
|
|
248
|
+
| `optionValue` | `string \| ((opt: unknown) => unknown)` | `"id"` | Property name or function to extract the option value |
|
|
249
|
+
| `optionLabel` | `string \| ((opt: unknown) => string)` | `"title"` | Property name or function to extract the display label |
|
|
250
|
+
| `inputType` | `"text" \| "number" \| "email" \| "tel" \| "password" \| "url" \| "time" \| "date" \| "datetime-local" \| "integer"` | `"text"` | HTML input type |
|
|
251
|
+
| `searchable` | `boolean` | `false` | Enable search filtering in the dropdown |
|
|
252
|
+
| `debounce` | `string \| number` | `0` | Debounce delay (ms) for search input |
|
|
253
|
+
| `clearable` | `boolean` | `false` | Show a clear button on the input |
|
|
254
|
+
| `prefix` | `string` | -- | Static prefix text inside the input |
|
|
255
|
+
| `suffix` | `string` | -- | Static suffix text inside the input |
|
|
256
|
+
| `maxlength` | `string \| number` | `1024` | Maximum character length for the input |
|
|
257
|
+
| `size` | `"default" \| "small"` | -- | Inherited from `ITextFieldProps`; currently inert (not forwarded to the template) |
|
|
258
|
+
| `label` | `string` | -- | Field label text |
|
|
259
|
+
| `placeholder` | `string` | -- | Input placeholder text |
|
|
260
|
+
| `hint` | `string` | -- | Hint text below the field |
|
|
261
|
+
| `tooltip` | `string` | -- | Tooltip on the label |
|
|
262
|
+
| `disabled` | `boolean` | `false` | Disable all interactions |
|
|
263
|
+
| `required` | `boolean` | `false` | Mark field as required (shows asterisk) |
|
|
264
|
+
| `loading` | `boolean` | `false` | Show loading spinner |
|
|
265
|
+
| `autofocus` | `boolean` | `false` | Auto-focus on mount |
|
|
266
|
+
| `error` | `boolean` | `false` | External error flag |
|
|
267
|
+
| `errorMessage` | `string` | -- | Error message (sets error state when truthy) |
|
|
268
|
+
| `name` | `string` | -- | HTML name attribute for the input |
|
|
269
|
+
| `multilanguage` | `boolean` | `false` | Enable multilanguage editing (forwarded to VcSelect) |
|
|
270
|
+
| `currentLanguage` | `string` | -- | Active language for multilanguage mode (forwarded to VcSelect) |
|
|
268
271
|
|
|
269
272
|
## Events
|
|
270
273
|
|
|
271
|
-
| Event | Payload | Description
|
|
272
|
-
| ------------------- | ---------------------------------- |
|
|
273
|
-
| `update:modelValue` | `string \| number \| Date \| null` | Input value changed
|
|
274
|
-
| `update:option` | `unknown` | Dropdown selection changed
|
|
275
|
-
| `change` | `unknown` |
|
|
276
|
-
| `blur` | `Event` | Input lost focus
|
|
274
|
+
| Event | Payload | Description |
|
|
275
|
+
| ------------------- | ---------------------------------- | ---------------------------------- |
|
|
276
|
+
| `update:modelValue` | `string \| number \| Date \| null` | Input value changed |
|
|
277
|
+
| `update:option` | `unknown` | Dropdown selection changed |
|
|
278
|
+
| `change` | `unknown` | Declared but not currently emitted |
|
|
279
|
+
| `blur` | `Event` | Input lost focus |
|
|
277
280
|
|
|
278
281
|
## Slots
|
|
279
282
|
|
package/runtime/knowledge/docs/ui/components/molecules/vc-input-group/vc-input-group.docs.md
CHANGED
|
@@ -48,17 +48,19 @@ const lastName = ref("");
|
|
|
48
48
|
|
|
49
49
|
## Key Props
|
|
50
50
|
|
|
51
|
-
| Prop | Type | Default | Description
|
|
52
|
-
| ------------------------ | ---------------------------- | ------------ |
|
|
53
|
-
| `label` | `string` | -- | Group label rendered as a `<legend>`
|
|
54
|
-
| `tooltip` | `string` | -- | Tooltip on the label's info icon
|
|
55
|
-
| `hint` | `string` | -- | Helper text below the group
|
|
56
|
-
| `orientation` | `"vertical" \| "horizontal"` | `"vertical"` | Layout direction for child controls
|
|
57
|
-
| `role` | `"group" \| "radiogroup"` | `"group"` | ARIA role for the fieldset
|
|
58
|
-
| `disabled` | `boolean` | `false` | Disables all controls in the group
|
|
59
|
-
| `error` / `errorMessage` | `boolean` / `string` | -- | Group-level error styling and message
|
|
60
|
-
| `required` | `boolean` | `false` | Shows required indicator on the label
|
|
61
|
-
| `name` | `string` | -- | Shared `name` propagated to child controls
|
|
51
|
+
| Prop | Type | Default | Description |
|
|
52
|
+
| ------------------------ | ---------------------------- | ------------ | ------------------------------------------------------------------- |
|
|
53
|
+
| `label` | `string` | -- | Group label rendered as a `<legend>` |
|
|
54
|
+
| `tooltip` | `string` | -- | Tooltip on the label's info icon |
|
|
55
|
+
| `hint` | `string` | -- | Helper text below the group |
|
|
56
|
+
| `orientation` | `"vertical" \| "horizontal"` | `"vertical"` | Layout direction for child controls |
|
|
57
|
+
| `role` | `"group" \| "radiogroup"` | `"group"` | ARIA role for the fieldset |
|
|
58
|
+
| `disabled` | `boolean` | `false` | Disables all controls in the group |
|
|
59
|
+
| `error` / `errorMessage` | `boolean` / `string` | -- | Group-level error styling and message |
|
|
60
|
+
| `required` | `boolean` | `false` | Shows required indicator on the label |
|
|
61
|
+
| `name` | `string` | -- | Shared `name` propagated to child controls |
|
|
62
|
+
| `ariaLabel` | `string` | -- | Sets `aria-label` on the fieldset |
|
|
63
|
+
| `ariaLabelledby` | `string` | -- | Sets `aria-labelledby` on the fieldset (fallback when no legend id) |
|
|
62
64
|
|
|
63
65
|
## Common Patterns
|
|
64
66
|
|
|
@@ -126,7 +128,7 @@ const lastName = ref("");
|
|
|
126
128
|
|
|
127
129
|
## Architecture Notes
|
|
128
130
|
|
|
129
|
-
-
|
|
131
|
+
- Group state is provided via `InputGroupContextKey` (defined locally in `./context.ts`), carrying `{ name, disabled, invalid, describedBy }`. Child form controls (`VcInput`, `VcRadioButton`, etc.) inject this context to inherit group-level state automatically.
|
|
130
132
|
- The `orientation` prop controls flex direction (`column` vs `row`) on the fieldset's content area.
|
|
131
133
|
- Source file: `framework/ui/components/molecules/vc-input-group/vc-input-group.vue`
|
|
132
134
|
- Context file: `framework/ui/components/molecules/vc-input-group/context.ts`
|
|
@@ -111,7 +111,7 @@ When `expanded` is `false`, the menu shows only icons and letter abbreviations.
|
|
|
111
111
|
|
|
112
112
|
| Variable | Default | Description |
|
|
113
113
|
| --------------- | ------- | ---------------------- |
|
|
114
|
-
| `--vc-menu-gap` | `
|
|
114
|
+
| `--vc-menu-gap` | `8px` | Gap between menu items |
|
|
115
115
|
|
|
116
116
|
## Accessibility
|
|
117
117
|
|
|
@@ -49,7 +49,7 @@ const tags = ref<Array<{ id?: string }>>([]);
|
|
|
49
49
|
|
|
50
50
|
### Free-form Text Entry
|
|
51
51
|
|
|
52
|
-
In the default mode (`multivalue` is `false`), users type a value into the input and press **Enter**
|
|
52
|
+
In the default mode (`multivalue` is `false`), users type a value into the input and press **Enter** to add it as a chip. This mode works with different input types.
|
|
53
53
|
|
|
54
54
|
```vue
|
|
55
55
|
<VcMultivalue v-model="tags" label="Keywords" placeholder="Type and press Enter" />
|
|
@@ -305,34 +305,44 @@ const selectedArray = ref([{ id: "1", title: "Option 1" }]);
|
|
|
305
305
|
|
|
306
306
|
## Slots
|
|
307
307
|
|
|
308
|
-
| Slot | Scope
|
|
309
|
-
| --------------- |
|
|
310
|
-
| `option` | `{ item: T, index: number }`
|
|
311
|
-
| `selected-item` | `{ value: string \| number, item: T, index: number, remove: () => void }` | Custom rendering for selected value chips |
|
|
312
|
-
| `prepend` | --
|
|
313
|
-
| `append` | --
|
|
314
|
-
| `error` | --
|
|
315
|
-
| `hint` | --
|
|
308
|
+
| Slot | Scope | Description |
|
|
309
|
+
| --------------- | --------------------------------------------------------------------------------------- | ---------------------------------------------------------- |
|
|
310
|
+
| `option` | `{ item: T, index: number }` | Custom rendering for dropdown options (dictionary mode) |
|
|
311
|
+
| `selected-item` | `{ value: string \| number \| T[keyof T], item: T, index: number, remove: () => void }` | Custom rendering for selected value chips |
|
|
312
|
+
| `prepend` | -- | Content rendered before the field area (inside the border) |
|
|
313
|
+
| `append` | -- | Content rendered after the field area (inside the border) |
|
|
314
|
+
| `error` | -- | Custom error message markup (replaces default VcHint) |
|
|
315
|
+
| `hint` | -- | Custom hint markup (replaces default VcHint) |
|
|
316
316
|
|
|
317
317
|
## CSS Variables
|
|
318
318
|
|
|
319
319
|
The component uses `--multivalue-*` variables that fall back to `--select-*` tokens for visual consistency with VcSelect.
|
|
320
320
|
|
|
321
|
-
| Variable
|
|
322
|
-
|
|
|
323
|
-
| `--multivalue-height`
|
|
324
|
-
| `--multivalue-border-radius`
|
|
325
|
-
| `--multivalue-border-color`
|
|
326
|
-
| `--multivalue-background-color`
|
|
327
|
-
| `--multivalue-text-color`
|
|
328
|
-
| `--multivalue-
|
|
329
|
-
| `--multivalue-
|
|
330
|
-
| `--multivalue-
|
|
331
|
-
| `--multivalue-
|
|
332
|
-
| `--multivalue-
|
|
333
|
-
| `--multivalue-
|
|
334
|
-
| `--multivalue-
|
|
335
|
-
| `--multivalue-
|
|
321
|
+
| Variable | Default | Description |
|
|
322
|
+
| ------------------------------------------ | ----------------------------------------------------------------------------------------------- | --------------------------------- |
|
|
323
|
+
| `--multivalue-height` | `36px` | Minimum height of the input field |
|
|
324
|
+
| `--multivalue-border-radius` | `var(--select-border-radius, 6px)` | Border radius |
|
|
325
|
+
| `--multivalue-border-color` | `var(--select-border-color, var(--neutrals-300))` | Default border color |
|
|
326
|
+
| `--multivalue-background-color` | `var(--select-background-color, transparent)` | Field background |
|
|
327
|
+
| `--multivalue-text-color` | `var(--select-text-color, var(--neutrals-800))` | Field text color |
|
|
328
|
+
| `--multivalue-placeholder-color` | `var(--select-placeholder-color, var(--neutrals-400))` | Placeholder text color |
|
|
329
|
+
| `--multivalue-padding` | `10px` | Field inner padding |
|
|
330
|
+
| `--multivalue-dropdown-bg` | `var(--select-dropdown-bg, var(--additional-50))` | Dropdown panel background |
|
|
331
|
+
| `--multivalue-dropdown-border` | `var(--select-dropdown-border, var(--neutrals-200))` | Dropdown panel border |
|
|
332
|
+
| `--multivalue-dropdown-shadow` | `var(--select-dropdown-shadow, 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1))` | Dropdown panel shadow |
|
|
333
|
+
| `--multivalue-search-border-color` | `var(--select-search-border-color, var(--neutrals-200))` | Search input border color |
|
|
334
|
+
| `--multivalue-item-hover-background-color` | `var(--select-option-background-color-hover, var(--neutrals-100))` | Option row hover background |
|
|
335
|
+
| `--multivalue-chip-background-color` | `var(--select-multiple-options-background-color, var(--neutrals-100))` | Chip background |
|
|
336
|
+
| `--multivalue-chip-border-color` | `var(--select-multiple-options-border-color, var(--neutrals-200))` | Chip border |
|
|
337
|
+
| `--multivalue-clear-icon-color` | `var(--select-clear-color, var(--neutrals-400))` | Clear icon color |
|
|
338
|
+
| `--multivalue-clear-icon-color-hover` | `var(--select-clear-color-hover, var(--neutrals-600))` | Clear icon hover color |
|
|
339
|
+
| `--multivalue-border-color-focus` | `var(--select-border-color-focus, var(--primary-500))` | Border color on focus |
|
|
340
|
+
| `--multivalue-focus-ring-color` | `var(--select-focus-ring-color, var(--primary-100))` | Focus ring color |
|
|
341
|
+
| `--multivalue-border-color-error` | `var(--select-border-color-error, var(--danger-500))` | Border on error |
|
|
342
|
+
| `--multivalue-error-ring-color` | `var(--select-error-ring-color, var(--danger-100))` | Error ring color |
|
|
343
|
+
| `--multivalue-hint-color` | `var(--danger-500)` | Hint/error message text color |
|
|
344
|
+
| `--multivalue-disabled-text-color` | `var(--neutrals-500)` | Disabled text color |
|
|
345
|
+
| `--multivalue-loading-color` | `var(--select-loading-color, var(--info-500))` | Loading spinner color |
|
|
336
346
|
|
|
337
347
|
## Accessibility
|
|
338
348
|
|
|
@@ -341,8 +351,7 @@ The component uses `--multivalue-*` variables that fall back to `--select-*` tok
|
|
|
341
351
|
- Dropdown list has `role="listbox"` with a generated `id`
|
|
342
352
|
- Chip remove buttons are individually focusable
|
|
343
353
|
- Keyboard navigation:
|
|
344
|
-
- **Enter**
|
|
345
|
-
- **Backspace** -- removes the last chip when the input is empty
|
|
354
|
+
- **Enter** -- submits the current input as a new value (blur also submits, via `onInputSubmit`)
|
|
346
355
|
- **Arrow keys** -- navigate items in the dropdown (dictionary mode)
|
|
347
356
|
- **Escape** -- closes the dropdown
|
|
348
357
|
- The `required` prop sets `aria-required` on the field
|
|
@@ -366,7 +375,7 @@ This behavior is powered by `BladeLoadingKey` via Vue's provide/inject. The comp
|
|
|
366
375
|
|
|
367
376
|
- Composed of internal sub-components in `vc-multivalue/_internal/`: the chip list renderer, the dropdown panel, and the trigger input.
|
|
368
377
|
- Composables are in `vc-multivalue/composables/` — chip management and dropdown open/close state are separated into composables.
|
|
369
|
-
- Free-form mode:
|
|
378
|
+
- Free-form mode: Enter (`@keypress.enter`) or blur triggers a chip add. Chip removal is done only via the chip's remove button.
|
|
370
379
|
- Dictionary mode: already-selected items are filtered out of the dropdown list reactively.
|
|
371
380
|
- Source file: `framework/ui/components/molecules/vc-multivalue/vc-multivalue.vue`
|
|
372
381
|
- Internal components: `framework/ui/components/molecules/vc-multivalue/_internal/`
|
|
@@ -57,7 +57,7 @@ VcPagination displays a sliding window of page number buttons centered on the cu
|
|
|
57
57
|
- **Desktop:** 5 visible page buttons (default)
|
|
58
58
|
- **Mobile:** 3 visible page buttons (default)
|
|
59
59
|
|
|
60
|
-
The component detects the viewport via
|
|
60
|
+
The component detects the viewport via `useResponsive()` (`isMobile`). You can override the window size with the `maxPages` prop regardless of viewport.
|
|
61
61
|
|
|
62
62
|
```vue
|
|
63
63
|
<!-- Always show exactly 3 page buttons -->
|
|
@@ -265,6 +265,7 @@ currentPage.value = Math.min(currentPage.value, totalPages.value);
|
|
|
265
265
|
| `maxPages` | `number` | -- | Override visible page button count. Default: 3 on mobile, 5 on desktop |
|
|
266
266
|
| `showFirstLast` | `boolean` | `true` | Show first/last page navigation buttons |
|
|
267
267
|
| `variant` | `"default" \| "minimal"` | `"default"` | Visual style variant |
|
|
268
|
+
| `expanded` | `boolean` | -- | Declared but currently unused in the template |
|
|
268
269
|
|
|
269
270
|
## Events
|
|
270
271
|
|
|
@@ -287,6 +288,9 @@ currentPage.value = Math.min(currentPage.value, totalPages.value);
|
|
|
287
288
|
| `--pagination-item-color-disabled` | `var(--neutrals-400)` | Disabled button text color |
|
|
288
289
|
| `--pagination-item-background-color-disabled` | `var(--neutrals-100)` | Disabled button background |
|
|
289
290
|
| `--pagination-item-border-color` | `var(--secondary-100)` | Default border color |
|
|
291
|
+
| `--pagination-item-border-color-hover` | `var(--neutrals-200)` | Hover border color |
|
|
292
|
+
| `--pagination-item-border-color-current` | `var(--neutrals-200)` | Current page border color |
|
|
293
|
+
| `--pagination-item-border-color-disabled` | `var(--neutrals-200)` | Disabled button border color |
|
|
290
294
|
| `--pagination-focus-ring-color` | `var(--primary-100)` | Focus ring color for keyboard navigation |
|
|
291
295
|
|
|
292
296
|
## Accessibility
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
---
|
|
2
|
-
title:
|
|
2
|
+
title: VcPopover
|
|
3
3
|
category: components
|
|
4
4
|
group: navigation
|
|
5
5
|
---
|
|
6
6
|
|
|
7
|
-
#
|
|
7
|
+
# VcPopover
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
Anchored floating panel (popover) positioned relative to an anchor element, with header, scrollable content, and optional footer. Built on `@floating-ui/vue`.
|
|
10
10
|
|
|
11
|
-
::storybook id="overlay-
|
|
11
|
+
::storybook id="overlay-vcpopover--default"
|
|
12
12
|
|
|
13
13
|
## When to Use
|
|
14
14
|
|
|
@@ -27,7 +27,7 @@ Floating dropdown panel positioned relative to an anchor element, with header, s
|
|
|
27
27
|
>
|
|
28
28
|
Toggle Panel
|
|
29
29
|
</button>
|
|
30
|
-
<
|
|
30
|
+
<VcPopover
|
|
31
31
|
v-model:show="open"
|
|
32
32
|
:anchor-ref="anchorEl"
|
|
33
33
|
title="Filter Options"
|
|
@@ -35,12 +35,12 @@ Floating dropdown panel positioned relative to an anchor element, with header, s
|
|
|
35
35
|
<div class="tw-p-4">
|
|
36
36
|
<p>Panel content here</p>
|
|
37
37
|
</div>
|
|
38
|
-
</
|
|
38
|
+
</VcPopover>
|
|
39
39
|
</template>
|
|
40
40
|
|
|
41
41
|
<script setup lang="ts">
|
|
42
42
|
import { ref } from "vue";
|
|
43
|
-
import {
|
|
43
|
+
import { VcPopover } from "@vc-shell/framework";
|
|
44
44
|
|
|
45
45
|
const anchorEl = ref<HTMLElement | null>(null);
|
|
46
46
|
const open = ref(false);
|
|
@@ -78,12 +78,12 @@ const open = ref(false);
|
|
|
78
78
|
|
|
79
79
|
## Common Patterns
|
|
80
80
|
|
|
81
|
-
::storybook id="overlay-
|
|
81
|
+
::storybook id="overlay-vcpopover--with-footer"
|
|
82
82
|
|
|
83
83
|
### Filter Panel with Footer Actions
|
|
84
84
|
|
|
85
85
|
```vue
|
|
86
|
-
<
|
|
86
|
+
<VcPopover v-model:show="showFilters" :anchor-ref="filterButton" title="Filters">
|
|
87
87
|
<div class="tw-p-4 tw-flex tw-flex-col tw-gap-2">
|
|
88
88
|
<VcCheckbox v-model="filters.active">Active only</VcCheckbox>
|
|
89
89
|
<VcCheckbox v-model="filters.inStock">In stock</VcCheckbox>
|
|
@@ -93,13 +93,13 @@ const open = ref(false);
|
|
|
93
93
|
<VcButton variant="secondary" @click="resetFilters">Reset</VcButton>
|
|
94
94
|
<VcButton @click="applyFilters">Apply</VcButton>
|
|
95
95
|
</template>
|
|
96
|
-
</
|
|
96
|
+
</VcPopover>
|
|
97
97
|
```
|
|
98
98
|
|
|
99
99
|
### Custom Header
|
|
100
100
|
|
|
101
101
|
```vue
|
|
102
|
-
<
|
|
102
|
+
<VcPopover v-model:show="open" :anchor-ref="anchor">
|
|
103
103
|
<template #header="{ close }">
|
|
104
104
|
<div class="tw-flex tw-items-center tw-justify-between tw-w-full tw-px-4 tw-py-3">
|
|
105
105
|
<span class="tw-font-semibold">Custom Header</span>
|
|
@@ -107,13 +107,13 @@ const open = ref(false);
|
|
|
107
107
|
</div>
|
|
108
108
|
</template>
|
|
109
109
|
<div class="tw-p-4">Content here</div>
|
|
110
|
-
</
|
|
110
|
+
</VcPopover>
|
|
111
111
|
```
|
|
112
112
|
|
|
113
113
|
### Scrollable List
|
|
114
114
|
|
|
115
115
|
```vue
|
|
116
|
-
<
|
|
116
|
+
<VcPopover v-model:show="open" :anchor-ref="anchor" title="Long Content" :max-height="250">
|
|
117
117
|
<div class="tw-py-1">
|
|
118
118
|
<div
|
|
119
119
|
v-for="item in items"
|
|
@@ -123,22 +123,23 @@ const open = ref(false);
|
|
|
123
123
|
{{ item.name }}
|
|
124
124
|
</div>
|
|
125
125
|
</div>
|
|
126
|
-
</
|
|
126
|
+
</VcPopover>
|
|
127
127
|
```
|
|
128
128
|
|
|
129
129
|
## CSS Variables
|
|
130
130
|
|
|
131
|
-
| Variable
|
|
132
|
-
|
|
|
133
|
-
| `--
|
|
134
|
-
| `--
|
|
135
|
-
| `--
|
|
136
|
-
| `--
|
|
137
|
-
| `--
|
|
138
|
-
| `--
|
|
139
|
-
| `--
|
|
140
|
-
| `--
|
|
141
|
-
|
|
131
|
+
| Variable | Default | Description |
|
|
132
|
+
| -------------------------------- | ----------------------------- | ------------------------ |
|
|
133
|
+
| `--vc-popover-bg` | `var(--additional-50)` | Panel background |
|
|
134
|
+
| `--vc-popover-border-color` | `var(--neutrals-200)` | Border color |
|
|
135
|
+
| `--vc-popover-border-radius` | `6px` | Corner radius |
|
|
136
|
+
| `--vc-popover-shadow` | `0 4px 16px rgba(0,0,0,0.08)` | Box shadow |
|
|
137
|
+
| `--vc-popover-title-color` | `var(--neutrals-900)` | Title text color |
|
|
138
|
+
| `--vc-popover-close-color` | `var(--neutrals-400)` | Close button color |
|
|
139
|
+
| `--vc-popover-close-hover-color` | `var(--neutrals-600)` | Close button hover color |
|
|
140
|
+
| `--vc-popover-footer-bg` | `var(--neutrals-50)` | Footer background |
|
|
141
|
+
|
|
142
|
+
The panel's z-index comes from the global `--z-critical-floating-panel` token and is not overridable per-instance.
|
|
142
143
|
|
|
143
144
|
## Accessibility
|
|
144
145
|
|
package/runtime/knowledge/docs/ui/components/molecules/vc-radio-button/vc-radio-button.docs.md
CHANGED
|
@@ -66,15 +66,16 @@ const method = ref("standard");
|
|
|
66
66
|
|
|
67
67
|
## Key Props
|
|
68
68
|
|
|
69
|
-
| Prop | Type | Default | Description
|
|
70
|
-
| ------------------------ | -------------------- | -------------- |
|
|
71
|
-
| `modelValue` | `T` | `undefined` | Bound value via `v-model` (shared across the group)
|
|
72
|
-
| `value` | `T` | -- | This radio button's value. Selected when `modelValue === value`
|
|
73
|
-
| `label` | `string` | -- | Text label next to the radio circle
|
|
74
|
-
| `name` | `string` | `"RadioField"` | HTML `name` attribute (must be shared within a group)
|
|
75
|
-
| `binary` | `boolean` | `false` | Enables boolean toggle mode (clicking toggles `true`/`false`)
|
|
76
|
-
| `disabled` | `boolean` | `false` | Disables this radio button
|
|
77
|
-
| `error` / `errorMessage` | `boolean` / `string` | -- | Error styling and message
|
|
69
|
+
| Prop | Type | Default | Description |
|
|
70
|
+
| ------------------------ | -------------------- | -------------- | ------------------------------------------------------------------------------------------------- |
|
|
71
|
+
| `modelValue` | `T` | `undefined` | Bound value via `v-model` (shared across the group) |
|
|
72
|
+
| `value` | `T` | -- | This radio button's value. Selected when `modelValue === value` |
|
|
73
|
+
| `label` | `string` | -- | Text label next to the radio circle |
|
|
74
|
+
| `name` | `string` | `"RadioField"` | HTML `name` attribute (must be shared within a group) |
|
|
75
|
+
| `binary` | `boolean` | `false` | Enables boolean toggle mode (clicking toggles `true`/`false`) |
|
|
76
|
+
| `disabled` | `boolean` | `false` | Disables this radio button |
|
|
77
|
+
| `error` / `errorMessage` | `boolean` / `string` | -- | Error styling and message |
|
|
78
|
+
| `ariaLabel` | `string` | -- | Accessible name for the input when no visible `label` is set. Applied only when `label` is empty. |
|
|
78
79
|
|
|
79
80
|
## Common Patterns
|
|
80
81
|
|
|
@@ -642,36 +642,61 @@ Don't forget `:key` with cascading selects, otherwise the second select will ret
|
|
|
642
642
|
|
|
643
643
|
## Slots
|
|
644
644
|
|
|
645
|
-
| Slot | Scope
|
|
646
|
-
| -------------------------------- |
|
|
647
|
-
| `option` | `{ index, opt, selected, toggleOption }`
|
|
648
|
-
| `selected-item` | `{ index, opt, selected, removeAtIndex }`
|
|
649
|
-
| `control` | `{ toggleHandler, isOpened }`
|
|
650
|
-
| `prepend` / `append` | —
|
|
651
|
-
| `prepend-inner` / `append-inner` | —
|
|
652
|
-
| `no-options` | —
|
|
653
|
-
| `error` / `hint` | —
|
|
645
|
+
| Slot | Scope | Description |
|
|
646
|
+
| -------------------------------- | ----------------------------------------------- | ------------------------------------------------------------------------ |
|
|
647
|
+
| `option` | `{ index, opt, selected, label, toggleOption }` | Custom option rendering. **You must call `toggleOption(opt)` on click.** |
|
|
648
|
+
| `selected-item` | `{ index, opt, selected, removeAtIndex }` | Custom rendering of selected chips (multiple) |
|
|
649
|
+
| `control` | `{ toggleHandler, isOpened }` | Full trigger replacement |
|
|
650
|
+
| `prepend` / `append` | — | Content outside the field |
|
|
651
|
+
| `prepend-inner` / `append-inner` | — | Content inside the field |
|
|
652
|
+
| `no-options` | — | Shown when there are no options |
|
|
653
|
+
| `error` / `hint` | — | Custom rendering of error/hint |
|
|
654
654
|
|
|
655
655
|
## CSS Variables
|
|
656
656
|
|
|
657
657
|
```css
|
|
658
658
|
:root {
|
|
659
659
|
--select-height: 36px;
|
|
660
|
-
--select-height-small:
|
|
661
|
-
--select-border-radius:
|
|
660
|
+
--select-height-small: 32px;
|
|
661
|
+
--select-border-radius: 6px;
|
|
662
662
|
--select-border-color: var(--neutrals-300);
|
|
663
|
-
--select-border-color-focus: var(--primary-100);
|
|
664
|
-
--select-border-color-error: var(--danger-500);
|
|
665
663
|
--select-text-color: var(--neutrals-800);
|
|
666
|
-
--select-padding:
|
|
664
|
+
--select-padding: 12px;
|
|
665
|
+
|
|
667
666
|
--select-background-color: var(--additional-50);
|
|
668
|
-
|
|
667
|
+
|
|
669
668
|
--select-placeholder-color: var(--neutrals-400);
|
|
670
|
-
|
|
671
|
-
--select-
|
|
669
|
+
|
|
670
|
+
--select-chevron-color: var(--neutrals-500);
|
|
671
|
+
--select-chevron-color-hover: var(--neutrals-700);
|
|
672
|
+
--select-clear-color: var(--neutrals-400);
|
|
673
|
+
--select-clear-color-hover: var(--neutrals-600);
|
|
674
|
+
|
|
675
|
+
--select-loading-color: var(--info-500);
|
|
676
|
+
|
|
677
|
+
--select-option-background-color-hover: var(--neutrals-100);
|
|
678
|
+
--select-option-background-color-selected: var(--accent-100);
|
|
679
|
+
--select-option-check-color: var(--primary-500);
|
|
680
|
+
|
|
681
|
+
--select-multiple-options-background-color: var(--neutrals-100);
|
|
682
|
+
--select-multiple-options-border-color: var(--neutrals-200);
|
|
683
|
+
|
|
672
684
|
--select-dropdown-bg: var(--additional-50);
|
|
673
|
-
--select-
|
|
674
|
-
--select-
|
|
685
|
+
--select-dropdown-border: var(--neutrals-200);
|
|
686
|
+
--select-dropdown-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
|
|
687
|
+
|
|
688
|
+
--select-search-border-color: var(--neutrals-200);
|
|
689
|
+
--select-search-background-color: var(--additional-50);
|
|
690
|
+
--select-border-color-input: var(--secondary-200);
|
|
691
|
+
|
|
692
|
+
--select-border-color-focus: var(--primary-500);
|
|
693
|
+
--select-focus-ring-color: var(--primary-100);
|
|
694
|
+
|
|
695
|
+
--select-background-color-disabled: var(--neutrals-200);
|
|
696
|
+
--select-disabled-text-color: var(--neutrals-500);
|
|
697
|
+
|
|
698
|
+
--select-border-color-error: var(--danger-500);
|
|
699
|
+
--select-error-ring-color: var(--danger-100);
|
|
675
700
|
}
|
|
676
701
|
```
|
|
677
702
|
|
|
@@ -50,21 +50,21 @@ const products = [
|
|
|
50
50
|
|
|
51
51
|
## Key Props
|
|
52
52
|
|
|
53
|
-
| Prop | Type | Default
|
|
54
|
-
| -------------------- | ---------------------------------------- |
|
|
55
|
-
| `slides` | `Record<string, unknown>[] \| unknown[]` | `[]`
|
|
56
|
-
| `navigation` | `boolean` | `false`
|
|
57
|
-
| `slidesPerView` | `string \| "auto"` | `"auto"`
|
|
58
|
-
| `spaceBetweenSlides` | `number` | `10`
|
|
59
|
-
| `overflow` | `boolean` | `false`
|
|
60
|
-
| `ariaLabel` | `string` |
|
|
53
|
+
| Prop | Type | Default | Description |
|
|
54
|
+
| -------------------- | ---------------------------------------- | -------- | ------------------------------------------------------------------------------------- |
|
|
55
|
+
| `slides` | `Record<string, unknown>[] \| unknown[]` | `[]` | Array of slide data objects |
|
|
56
|
+
| `navigation` | `boolean` | `false` | Show previous/next navigation buttons |
|
|
57
|
+
| `slidesPerView` | `string \| "auto"` | `"auto"` | Number of visible slides at once |
|
|
58
|
+
| `spaceBetweenSlides` | `number` | `10` | Gap between slides in pixels |
|
|
59
|
+
| `overflow` | `boolean` | `false` | Allow slides to be visible outside the container bounds |
|
|
60
|
+
| `ariaLabel` | `string` | -- | Accessible label for the slider region. Falls back to `"Content carousel"` when unset |
|
|
61
61
|
|
|
62
62
|
## Common Patterns
|
|
63
63
|
|
|
64
64
|
### Fixed Slides Per View
|
|
65
65
|
|
|
66
66
|
```vue
|
|
67
|
-
<VcSlider :slides="items" :slides-per-view="3" navigation :space-between-slides="20">
|
|
67
|
+
<VcSlider :slides="items" :slides-per-view="'3'" navigation :space-between-slides="20">
|
|
68
68
|
<template #default="{ slide }">
|
|
69
69
|
<ProductCard :product="slide" />
|
|
70
70
|
</template>
|
|
@@ -96,7 +96,7 @@ const products = [
|
|
|
96
96
|
### Single Slide View
|
|
97
97
|
|
|
98
98
|
```vue
|
|
99
|
-
<VcSlider :slides="banners" :slides-per-view="1" navigation>
|
|
99
|
+
<VcSlider :slides="banners" :slides-per-view="'1'" navigation>
|
|
100
100
|
<template #default="{ slide }">
|
|
101
101
|
<img :src="slide.imageUrl" class="tw-w-full tw-rounded" />
|
|
102
102
|
</template>
|
|
@@ -140,7 +140,7 @@ When placed inside a `VcBlade` with `loading=true`, the component automatically
|
|
|
140
140
|
|
|
141
141
|
- VcSlider wraps the `swiper/vue` `<Swiper>` / `<SwiperSlide>` components with the `Navigation` module. Navigation buttons are custom DOM elements (`.vc-slider__prev` / `.vc-slider__next`) referenced by Swiper's `navigation.prevEl` / `nextEl` selectors.
|
|
142
142
|
- `overflow` prop toggles `overflow: visible` on the swiper container, allowing slides to bleed outside bounds — useful for "peek" effects.
|
|
143
|
-
- `slidesPerView="auto"` (default) lets each slide size itself from content. Pass a
|
|
143
|
+
- `slidesPerView="auto"` (default) lets each slide size itself from content. Pass a numeric string (e.g. `"3"`) for fixed-count layouts.
|
|
144
144
|
- The `slides` prop accepts any array. Each item is exposed as `{ slide }` in the default scoped slot.
|
|
145
145
|
- Source file: `framework/ui/components/molecules/vc-slider/vc-slider.vue`
|
|
146
146
|
|