@vc-shell/vc-app-skill 2.1.0-pr255.4dc5c0d → 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
|
@@ -300,22 +300,23 @@ const selected = ref<string[]>([]);
|
|
|
300
300
|
|
|
301
301
|
## Props
|
|
302
302
|
|
|
303
|
-
| Prop | Type | Default | Description
|
|
304
|
-
| --------------- | ------------------- | ----------- |
|
|
305
|
-
| `modelValue` | `boolean \| T[]` | `undefined` | Bound value via `v-model`. Boolean for single, array for multi-select.
|
|
306
|
-
| `value` | `T` | -- | Value added to the array when checked (array mode only)
|
|
307
|
-
| `label` | `string` | -- | Label text displayed above the checkbox
|
|
308
|
-
| `tooltip` | `string` | -- | Tooltip on the label info icon
|
|
309
|
-
| `size` | `"s" \| "m" \| "l"` | `"s"` | Checkbox size variant
|
|
310
|
-
| `indeterminate` | `boolean` | `false` | Shows the indeterminate (dash) visual state
|
|
311
|
-
| `trueValue` | `boolean` | `true` | Value emitted when checked (boolean mode)
|
|
312
|
-
| `falseValue` | `boolean` | `false` | Value emitted when unchecked (boolean mode)
|
|
313
|
-
| `disabled` | `boolean` | `false` | Disables the checkbox
|
|
314
|
-
| `required` | `boolean` | `false` | Shows a required indicator
|
|
315
|
-
| `error` | `boolean` | `false` | Enables error styling
|
|
316
|
-
| `errorMessage` | `string` | -- | Error message displayed below the checkbox
|
|
317
|
-
| `
|
|
318
|
-
| `
|
|
303
|
+
| Prop | Type | Default | Description |
|
|
304
|
+
| --------------- | ------------------- | ----------- | ------------------------------------------------------------------------------------------------- |
|
|
305
|
+
| `modelValue` | `boolean \| T[]` | `undefined` | Bound value via `v-model`. Boolean for single, array for multi-select. |
|
|
306
|
+
| `value` | `T` | -- | Value added to the array when checked (array mode only) |
|
|
307
|
+
| `label` | `string` | -- | Label text displayed above the checkbox |
|
|
308
|
+
| `tooltip` | `string` | -- | Tooltip on the label info icon |
|
|
309
|
+
| `size` | `"s" \| "m" \| "l"` | `"s"` | Checkbox size variant |
|
|
310
|
+
| `indeterminate` | `boolean` | `false` | Shows the indeterminate (dash) visual state |
|
|
311
|
+
| `trueValue` | `boolean` | `true` | Value emitted when checked (boolean mode) |
|
|
312
|
+
| `falseValue` | `boolean` | `false` | Value emitted when unchecked (boolean mode) |
|
|
313
|
+
| `disabled` | `boolean` | `false` | Disables the checkbox |
|
|
314
|
+
| `required` | `boolean` | `false` | Shows a required indicator |
|
|
315
|
+
| `error` | `boolean` | `false` | Enables error styling |
|
|
316
|
+
| `errorMessage` | `string` | -- | Error message displayed below the checkbox |
|
|
317
|
+
| `ariaLabel` | `string` | -- | Accessible name for the input when no visible `label` is set. Applied only when `label` is empty. |
|
|
318
|
+
| `name` | `string` | `"Field"` | HTML name attribute |
|
|
319
|
+
| `outline` | `boolean` | `false` | Reserved; declared but currently has no effect |
|
|
319
320
|
|
|
320
321
|
## Events
|
|
321
322
|
|
|
@@ -333,24 +334,31 @@ const selected = ref<string[]>([]);
|
|
|
333
334
|
|
|
334
335
|
## CSS Variables
|
|
335
336
|
|
|
336
|
-
| Variable
|
|
337
|
-
|
|
|
338
|
-
| `--checkbox-size-s`
|
|
339
|
-
| `--checkbox-size-m`
|
|
340
|
-
| `--checkbox-size-l`
|
|
341
|
-
| `--checkbox-border-color`
|
|
342
|
-
| `--checkbox-border-color-hover`
|
|
343
|
-
| `--checkbox-bg-color`
|
|
344
|
-
| `--checkbox-checked-bg-color`
|
|
345
|
-
| `--checkbox-checked-border-color`
|
|
346
|
-
| `--checkbox-indeterminate-bg-color`
|
|
347
|
-
| `--checkbox-indeterminate-
|
|
348
|
-
| `--checkbox-
|
|
349
|
-
| `--checkbox-
|
|
350
|
-
| `--checkbox-
|
|
351
|
-
| `--checkbox-
|
|
352
|
-
| `--checkbox-
|
|
353
|
-
| `--checkbox-
|
|
337
|
+
| Variable | Default | Description |
|
|
338
|
+
| --------------------------------------- | ---------------------- | ------------------------------- |
|
|
339
|
+
| `--checkbox-size-s` | `16px` | Small variant size |
|
|
340
|
+
| `--checkbox-size-m` | `20px` | Medium variant size |
|
|
341
|
+
| `--checkbox-size-l` | `24px` | Large variant size |
|
|
342
|
+
| `--checkbox-border-color` | `var(--neutrals-300)` | Default border color |
|
|
343
|
+
| `--checkbox-border-color-hover` | `var(--neutrals-400)` | Border color on hover |
|
|
344
|
+
| `--checkbox-bg-color` | `var(--additional-50)` | Unchecked background |
|
|
345
|
+
| `--checkbox-checked-bg-color` | `var(--primary-500)` | Checked background color |
|
|
346
|
+
| `--checkbox-checked-border-color` | `var(--primary-500)` | Checked border color |
|
|
347
|
+
| `--checkbox-indeterminate-bg-color` | `var(--primary-500)` | Indeterminate background |
|
|
348
|
+
| `--checkbox-indeterminate-border-color` | `var(--primary-500)` | Indeterminate border color |
|
|
349
|
+
| `--checkbox-indeterminate-line-color` | `var(--additional-50)` | Indeterminate dash color |
|
|
350
|
+
| `--checkbox-text-color` | `var(--neutrals-900)` | Label text color |
|
|
351
|
+
| `--checkbox-icon-color` | `var(--additional-50)` | Check/dash icon color |
|
|
352
|
+
| `--checkbox-error-text-color` | `var(--danger-500)` | Error message text color |
|
|
353
|
+
| `--checkbox-required-color` | `var(--danger-500)` | Required indicator color |
|
|
354
|
+
| `--checkbox-label-spacing` | `0.5rem` | Spacing below the label |
|
|
355
|
+
| `--checkbox-text-margin` | `0.5rem` | Margin between control and text |
|
|
356
|
+
| `--checkbox-error-border-color` | `var(--danger-500)` | Error state border |
|
|
357
|
+
| `--checkbox-error-ring-color` | `var(--danger-100)` | Error ring color |
|
|
358
|
+
| `--checkbox-focus-ring-color` | `var(--primary-100)` | Focus ring color |
|
|
359
|
+
| `--checkbox-border-radius` | `4px` | Corner radius |
|
|
360
|
+
| `--checkbox-disabled-opacity` | `0.5` | Opacity when disabled |
|
|
361
|
+
| `--checkbox-transition-duration` | `200ms` | Animation duration |
|
|
354
362
|
|
|
355
363
|
## Accessibility
|
|
356
364
|
|
package/runtime/knowledge/docs/ui/components/molecules/vc-checkbox-group/vc-checkbox-group.docs.md
CHANGED
|
@@ -153,7 +153,7 @@ When placed inside a `VcBlade` with `loading=true`, the component renders a skel
|
|
|
153
153
|
## Architecture Notes
|
|
154
154
|
|
|
155
155
|
- VcCheckboxGroup delegates rendering to `VcInputGroup` (semantic fieldset wrapper) and renders `VcCheckbox` items from the `options` array, or passes through the default slot for custom layouts.
|
|
156
|
-
- The group generates a unique `name` attribute via `useId()` when none is provided, ensuring native
|
|
156
|
+
- The group generates a unique `name` attribute via `useId()` when none is provided, ensuring native checkbox group naming/behavior.
|
|
157
157
|
- `normalizedModelValue` guards against non-array `modelValue` to avoid runtime errors when the parent passes `undefined`.
|
|
158
158
|
- Source file: `framework/ui/components/molecules/vc-checkbox-group/vc-checkbox-group.vue`
|
|
159
159
|
|
package/runtime/knowledge/docs/ui/components/molecules/vc-color-input/vc-color-input.docs.md
CHANGED
|
@@ -60,6 +60,18 @@ const color = ref<string | null>(null);
|
|
|
60
60
|
| `error` / `errorMessage` | `boolean` / `string` | -- | Error styling and validation message |
|
|
61
61
|
| `disabled` | `boolean` | `false` | Disables the input and color picker |
|
|
62
62
|
|
|
63
|
+
## Events
|
|
64
|
+
|
|
65
|
+
| Event | Payload | Description |
|
|
66
|
+
| ------------------- | ---------------- | ------------------------------------ |
|
|
67
|
+
| `update:modelValue` | `string \| null` | Emitted when the color value changes |
|
|
68
|
+
| `blur` | `Event` | Emitted when the text input blurs |
|
|
69
|
+
| `focus` | -- | Emitted when the text input focuses |
|
|
70
|
+
|
|
71
|
+
## Exposed Methods
|
|
72
|
+
|
|
73
|
+
- `focus()` -- focuses the text input (accessible via a template ref).
|
|
74
|
+
|
|
63
75
|
## Common Patterns
|
|
64
76
|
|
|
65
77
|
### With Validation
|
|
@@ -194,6 +206,7 @@ Uses the same `--input-*` variables as VcInput, plus:
|
|
|
194
206
|
|
|
195
207
|
- `--color-input-swatch-size` -- swatch square size (default 20px)
|
|
196
208
|
- `--color-input-swatch-border-radius`, `--color-input-swatch-border-color`
|
|
209
|
+
- `--color-input-swatch-border-color-hover` -- swatch border color on hover (default var(--neutrals-400))
|
|
197
210
|
|
|
198
211
|
## Tip: CSS Color Names
|
|
199
212
|
|
|
@@ -218,7 +231,7 @@ When placed inside a `VcBlade` with `loading=true`, the component automatically
|
|
|
218
231
|
|
|
219
232
|
- The swatch button is a native `<button type="button">` that triggers a hidden `<input type="color">` via programmatic `.click()`. The native color picker is not visible — only the swatch button is.
|
|
220
233
|
- Color synchronization: typing in the text field updates `modelValue` directly; selecting from the native picker emits the new hex value and also updates the text field.
|
|
221
|
-
- The
|
|
234
|
+
- The text field accepts any string, but the swatch only updates for valid hex codes or recognized CSS color names; unrecognized input leaves the swatch unchanged.
|
|
222
235
|
- Source file: `framework/ui/components/molecules/vc-color-input/vc-color-input.vue`
|
|
223
236
|
|
|
224
237
|
<!-- internal:end -->
|
package/runtime/knowledge/docs/ui/components/molecules/vc-date-picker/vc-date-picker.docs.md
CHANGED
|
@@ -23,7 +23,9 @@ A date and datetime picker that wraps the [VueDatePicker](https://vue3datepicker
|
|
|
23
23
|
|
|
24
24
|
- Free-form text entry -- use [VcInput](../vc-input/)
|
|
25
25
|
- Time-only input -- use `VcInput` with `type="time"`
|
|
26
|
-
- Selecting multiple dates
|
|
26
|
+
- Selecting multiple discrete dates -- not supported (use VueDatePicker directly)
|
|
27
|
+
|
|
28
|
+
> **Note:** Date ranges are supported. Pass the `range` option through `datePickerOptions`; the component handles range start/end and commits a partial range on close.
|
|
27
29
|
|
|
28
30
|
> **Note:** `VcInput` with `type="date"` or `type="datetime-local"` automatically delegates to this component internally. You can also use `VcDatePicker` directly for more explicit control over date-specific props.
|
|
29
31
|
|
|
@@ -21,7 +21,7 @@ A headless, accessible dropdown primitive for building menus and listboxes. Prov
|
|
|
21
21
|
When NOT to use:
|
|
22
22
|
|
|
23
23
|
- For form field selection -- use [VcSelect](../vc-select/)
|
|
24
|
-
- For rich panel content with header/footer/scrollable body -- use [
|
|
24
|
+
- For rich panel content with header/footer/scrollable body -- use [VcPopover](../vc-popover/)
|
|
25
25
|
- For navigation menus -- use [VcMenu](../vc-menu/)
|
|
26
26
|
|
|
27
27
|
## Quick Start
|
|
@@ -307,28 +307,29 @@ By default, `padded` is `true`, which adds compact padding and rounded item back
|
|
|
307
307
|
|
|
308
308
|
## Props
|
|
309
309
|
|
|
310
|
-
| Prop | Type | Default | Description
|
|
311
|
-
| --------------------- | ---------------------------------------------- | ------------------------------- |
|
|
312
|
-
| `modelValue` | `boolean` | `false` | Controls open/closed state via `v-model`
|
|
313
|
-
| `items` | `T[]` | `[]` | Items to render in the dropdown
|
|
314
|
-
| `emptyText` | `string` | `""` | Text shown when items array is empty
|
|
315
|
-
| `itemText` | `(item: T) => string` | -- | Maps an item to display text (default renderer only)
|
|
316
|
-
| `isItemActive` | `(item: T) => boolean` | -- | Marks the currently active item (highlighted state)
|
|
317
|
-
| `itemKey` | `(item: T, index: number) => string \| number` | index | Unique key function for items
|
|
318
|
-
| `floating` | `boolean` | `false` | Enable floating positioning via `@floating-ui`
|
|
319
|
-
| `teleport` | `boolean` | -- | Force teleport to body (defaults to match `floating`)
|
|
320
|
-
| `teleportTo` | `string \| HTMLElement` | -- | Custom teleport target
|
|
321
|
-
| `placement` | `Placement` | `"bottom"` | Floating UI placement
|
|
322
|
-
| `offset` | `{ mainAxis?: number; crossAxis?: number }` | `{ mainAxis: 0, crossAxis: 0 }` | Offset from the trigger element
|
|
323
|
-
| `variant` | `"default" \| "secondary"` | `"default"` | Visual style variant
|
|
324
|
-
| `maxHeight` | `number \| string` | `300` | Maximum panel height (number = px, string = CSS value)
|
|
325
|
-
| `role` | `"menu" \| "listbox"` | `"menu"` | ARIA role for the dropdown panel
|
|
326
|
-
| `
|
|
327
|
-
| `
|
|
328
|
-
| `
|
|
329
|
-
| `
|
|
330
|
-
| `
|
|
331
|
-
| `
|
|
310
|
+
| Prop | Type | Default | Description |
|
|
311
|
+
| --------------------- | ---------------------------------------------- | ------------------------------- | -------------------------------------------------------------- |
|
|
312
|
+
| `modelValue` | `boolean` | `false` | Controls open/closed state via `v-model` |
|
|
313
|
+
| `items` | `T[]` | `[]` | Items to render in the dropdown |
|
|
314
|
+
| `emptyText` | `string` | `""` | Text shown when items array is empty |
|
|
315
|
+
| `itemText` | `(item: T) => string` | -- | Maps an item to display text (default renderer only) |
|
|
316
|
+
| `isItemActive` | `(item: T) => boolean` | -- | Marks the currently active item (highlighted state) |
|
|
317
|
+
| `itemKey` | `(item: T, index: number) => string \| number` | index | Unique key function for items |
|
|
318
|
+
| `floating` | `boolean` | `false` | Enable floating positioning via `@floating-ui` |
|
|
319
|
+
| `teleport` | `boolean` | -- | Force teleport to body (defaults to match `floating`) |
|
|
320
|
+
| `teleportTo` | `string \| HTMLElement` | -- | Custom teleport target |
|
|
321
|
+
| `placement` | `Placement` | `"bottom"` | Floating UI placement |
|
|
322
|
+
| `offset` | `{ mainAxis?: number; crossAxis?: number }` | `{ mainAxis: 0, crossAxis: 0 }` | Offset from the trigger element |
|
|
323
|
+
| `variant` | `"default" \| "secondary"` | `"default"` | Visual style variant |
|
|
324
|
+
| `maxHeight` | `number \| string` | `300` | Maximum panel height (number = px, string = CSS value) |
|
|
325
|
+
| `role` | `"menu" \| "listbox"` | `"menu"` | ARIA role for the dropdown panel |
|
|
326
|
+
| `ariaLabel` | `string` | -- | Accessible name for the panel. Required for a named `listbox`. |
|
|
327
|
+
| `closeOnClickOutside` | `boolean` | `true` | Close when clicking outside the dropdown |
|
|
328
|
+
| `closeOnEscape` | `boolean` | `true` | Close on Escape key press |
|
|
329
|
+
| `closeOnSelect` | `boolean` | `false` | Close after selecting an item |
|
|
330
|
+
| `autoFocusPanel` | `boolean` | `true` | Focus the panel element when opened |
|
|
331
|
+
| `padded` | `boolean` | `true` | Apply compact padding and rounded item backgrounds |
|
|
332
|
+
| `zIndex` | `number` | `9300` | Z-index for the floating panel |
|
|
332
333
|
|
|
333
334
|
## Events
|
|
334
335
|
|
|
@@ -341,12 +342,12 @@ By default, `padded` is `true`, which adds compact padding and rounded item back
|
|
|
341
342
|
|
|
342
343
|
## Slots
|
|
343
344
|
|
|
344
|
-
| Slot | Props
|
|
345
|
-
| ----------------- |
|
|
346
|
-
| `trigger` | `{ isActive: boolean, toggle: () => void, open: () => void, close: () => void }` | Custom trigger element
|
|
347
|
-
| `item` | `{ item: T, click: () => void }`
|
|
348
|
-
| `empty` | --
|
|
349
|
-
| `items-container` | `{ items: T[], close: () => void }`
|
|
345
|
+
| Slot | Props | Description |
|
|
346
|
+
| ----------------- | ------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
347
|
+
| `trigger` | `{ isActive: boolean, toggle: () => void, open: () => void, close: () => void, panelId: string }` | Custom trigger element. Render a real interactive control (e.g. `VcButton`) that calls `toggle` — the wrapper is a passive container, so nesting a button inside a `role="button"` wrapper is avoided. Use `panelId` to wire `aria-controls`/`aria-expanded` on your control. |
|
|
348
|
+
| `item` | `{ item: T, click: () => void }` | Custom item rendering |
|
|
349
|
+
| `empty` | -- | Content when items array is empty |
|
|
350
|
+
| `items-container` | `{ items: T[], close: () => void }` | Full control over the items list |
|
|
350
351
|
|
|
351
352
|
## CSS Variables
|
|
352
353
|
|
|
@@ -364,8 +365,8 @@ By default, `padded` is `true`, which adds compact padding and rounded item back
|
|
|
364
365
|
|
|
365
366
|
## Accessibility
|
|
366
367
|
|
|
367
|
-
- **Trigger element**:
|
|
368
|
-
- **Panel**: uses the specified `role` attribute (`"menu"` or `"listbox"`)
|
|
368
|
+
- **Trigger element**: a passive wrapper — the interactive control lives in the `#trigger` slot. Render a real `<button>` (e.g. `VcButton`) that calls `toggle`; wire `aria-expanded`/`aria-haspopup`/`aria-controls` (via the slot's `panelId`) on it. This avoids nesting interactive controls (WCAG 4.1.2).
|
|
369
|
+
- **Panel**: uses the specified `role` attribute (`"menu"` or `"listbox"`), is keyboard-focusable (`tabindex="0"`), and takes an accessible name from `ariaLabel`
|
|
369
370
|
- **Items**: use `role="menuitem"` (menu mode) or `role="option"` (listbox mode)
|
|
370
371
|
- **Active item tracking**: `aria-activedescendant` on the panel tracks the currently focused item
|
|
371
372
|
- **Listbox selection**: `aria-selected` is set on items when `role="listbox"` and `isItemActive` returns `true`
|
|
@@ -379,7 +380,7 @@ By default, `padded` is `true`, which adds compact padding and rounded item back
|
|
|
379
380
|
|
|
380
381
|
## Related Components
|
|
381
382
|
|
|
382
|
-
- [
|
|
383
|
+
- [VcPopover](../vc-popover/) -- floating panel with header, footer, and scrollable content
|
|
383
384
|
- [VcSelect](../vc-select/) -- form field dropdown for selecting values with label and validation
|
|
384
385
|
- [VcMenu](../vc-menu/) -- sidebar navigation menu
|
|
385
386
|
|
|
@@ -393,6 +394,6 @@ By default, `padded` is `true`, which adds compact padding and rounded item back
|
|
|
393
394
|
- Keyboard navigation (`ArrowDown`, `ArrowUp`, `Home`, `End`, `Enter`/`Space`, `Escape`) is handled in `onPanelKeydown`. Escape also attaches a document-level listener when the dropdown is open to catch events that bubble past the panel.
|
|
394
395
|
- `syncFocusedIndex` is called on open to pre-focus the active item (via `isItemActive`) or the first item.
|
|
395
396
|
- The `VcDropdownItem` internal sub-component (in `_internal/VcDropdownItem.vue`) is used by `VcBreadcrumbs` for its overflow menu items.
|
|
396
|
-
- Default `zIndex` is `9300` (matches the CSS custom property `--z-critical-
|
|
397
|
+
- Default `zIndex` is `9300` (matches the CSS custom property `--z-critical-floating-panel`).
|
|
397
398
|
|
|
398
399
|
<!-- internal:end -->
|
|
@@ -56,7 +56,7 @@ The editor header provides four view modes plus a fullscreen toggle:
|
|
|
56
56
|
| **Split** | Side-by-side editor + source view for simultaneous editing |
|
|
57
57
|
| **Fullscreen** | Any mode expanded to fill the entire viewport |
|
|
58
58
|
|
|
59
|
-
The editor automatically detects whether content is Markdown or HTML based on pattern analysis and outputs in the same format. HTML content is auto-formatted with
|
|
59
|
+
The editor automatically detects whether content is Markdown or HTML based on pattern analysis and outputs in the same format. HTML content is auto-formatted with js-beautify in source/split views.
|
|
60
60
|
|
|
61
61
|
!!! note "Content format is auto-detected"
|
|
62
62
|
VcEditor detects whether content is Markdown or HTML and outputs in the same format. If you pass Markdown input, you will get Markdown output. If you need HTML output, start with HTML content.
|
|
@@ -179,7 +179,7 @@ const form = reactive({ description: "" });
|
|
|
179
179
|
</script>
|
|
180
180
|
```
|
|
181
181
|
|
|
182
|
-
> **Note:** VcEditor
|
|
182
|
+
> **Note:** VcEditor inherits an `error` boolean prop (from `IFormFieldProps`), but it is unused — it has no effect. Error state is derived solely from the truthiness of `errorMessage`.
|
|
183
183
|
|
|
184
184
|
## Recipes
|
|
185
185
|
|
|
@@ -210,7 +210,7 @@ const form = reactive({ description: "" });
|
|
|
210
210
|
### 2. Using error prop instead of errorMessage
|
|
211
211
|
|
|
212
212
|
```vue
|
|
213
|
-
<!-- WRONG:
|
|
213
|
+
<!-- WRONG: the inherited `error` prop is inert on VcEditor and has no effect -->
|
|
214
214
|
<VcEditor v-model="content" :error="true" error-message="Required" />
|
|
215
215
|
|
|
216
216
|
<!-- CORRECT: errorMessage alone controls the error state -->
|
|
@@ -233,30 +233,31 @@ const content = ref("<h1>Title</h1>");
|
|
|
233
233
|
|
|
234
234
|
## Props
|
|
235
235
|
|
|
236
|
-
| Prop | Type | Default | Description
|
|
237
|
-
| ----------------- | --------------------- | ----------- |
|
|
238
|
-
| `modelValue` | `string` | `""` | Content string via `v-model` (Markdown or HTML)
|
|
239
|
-
| `label` | `string` | -- | Label text above the editor
|
|
240
|
-
| `placeholder` | `string` | -- | Placeholder when editor is empty
|
|
241
|
-
| `disabled` | `boolean` | `false` | Disables all editing
|
|
242
|
-
| `required` | `boolean` | `false` | Shows a required asterisk on the label
|
|
243
|
-
| `tooltip` | `string` | -- | Tooltip text shown on label hover
|
|
244
|
-
| `errorMessage` | `string` | -- | Error message below the editor (also activates error styling)
|
|
245
|
-
| `
|
|
246
|
-
| `
|
|
247
|
-
| `
|
|
248
|
-
| `
|
|
249
|
-
| `
|
|
250
|
-
| `
|
|
251
|
-
| `
|
|
252
|
-
| `
|
|
236
|
+
| Prop | Type | Default | Description |
|
|
237
|
+
| ----------------- | --------------------- | ----------- | ----------------------------------------------------------------- |
|
|
238
|
+
| `modelValue` | `string` | `""` | Content string via `v-model` (Markdown or HTML) |
|
|
239
|
+
| `label` | `string` | -- | Label text above the editor |
|
|
240
|
+
| `placeholder` | `string` | -- | Placeholder when editor is empty |
|
|
241
|
+
| `disabled` | `boolean` | `false` | Disables all editing |
|
|
242
|
+
| `required` | `boolean` | `false` | Shows a required asterisk on the label |
|
|
243
|
+
| `tooltip` | `string` | -- | Tooltip text shown on label hover |
|
|
244
|
+
| `errorMessage` | `string` | -- | Error message below the editor (also activates error styling) |
|
|
245
|
+
| `error` | `boolean` | `false` | Inherited from `IFormFieldProps`; accepted but unused (no effect) |
|
|
246
|
+
| `name` | `string` | -- | Form field name attribute |
|
|
247
|
+
| `toolbar` | `ToolbarNames[]` | all buttons | Array of toolbar button names to show |
|
|
248
|
+
| `maxlength` | `number` | -- | Character limit (counter shown in source/split mode) |
|
|
249
|
+
| `assetsFolder` | `string` | -- | API folder path for image uploads |
|
|
250
|
+
| `extensions` | `Extension[]` | -- | Additional TipTap extensions |
|
|
251
|
+
| `customButtons` | `CustomToolbarItem[]` | -- | Plugin toolbar buttons or dropdowns |
|
|
252
|
+
| `multilanguage` | `boolean` | `false` | Enables multilanguage indicator on the label |
|
|
253
|
+
| `currentLanguage` | `string` | -- | Current language code for multilanguage mode |
|
|
253
254
|
|
|
254
255
|
## Events
|
|
255
256
|
|
|
256
|
-
| Event | Payload | Description
|
|
257
|
-
| ------------------- | --------------------- |
|
|
258
|
-
| `update:modelValue` | `string \| undefined` | Emitted when content changes (from WYSIWYG or source editing)
|
|
259
|
-
| `upload-image` | -- |
|
|
257
|
+
| Event | Payload | Description |
|
|
258
|
+
| ------------------- | --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
|
|
259
|
+
| `update:modelValue` | `string \| undefined` | Emitted when content changes (from WYSIWYG or source editing) |
|
|
260
|
+
| `upload-image` | -- | Declared but currently never emitted; image upload is handled internally via the hidden file input and inserted directly into the editor |
|
|
260
261
|
|
|
261
262
|
## Slots
|
|
262
263
|
|
|
@@ -277,6 +278,7 @@ const content = ref("<h1>Title</h1>");
|
|
|
277
278
|
| `--vc-editor-text-disabled` | `var(--neutrals-500)` | Text color when disabled |
|
|
278
279
|
| `--vc-editor-background-disabled` | `var(--neutrals-200)` | Background when disabled |
|
|
279
280
|
| `--vc-editor-focus-border` | `var(--primary-500)` | Border color on focus |
|
|
281
|
+
| `--vc-editor-focus-shadow` | `var(--primary-500)` | Focus shadow color token |
|
|
280
282
|
| `--vc-editor-focus-ring-color` | `color-mix(in srgb, var(--primary-500) 30%, transparent)` | Focus ring color |
|
|
281
283
|
| `--vc-editor-error-border` | `var(--danger-500)` | Border color on error |
|
|
282
284
|
| `--vc-editor-error-ring-color` | `rgba(239, 68, 68, 0.2)` | Error ring color |
|
|
@@ -44,15 +44,16 @@ VcField renders without form-field chrome (borders, focus rings, placeholders) a
|
|
|
44
44
|
|
|
45
45
|
## Key Props
|
|
46
46
|
|
|
47
|
-
| Prop
|
|
48
|
-
|
|
|
49
|
-
| `label`
|
|
50
|
-
| `modelValue`
|
|
51
|
-
| `
|
|
52
|
-
| `
|
|
53
|
-
| `
|
|
54
|
-
| `
|
|
55
|
-
| `
|
|
47
|
+
| Prop | Type | Default | Description |
|
|
48
|
+
| -------------- | ----------------------------------------------------- | ------------ | ------------------------------------------------------------------------------------ |
|
|
49
|
+
| `label` | `string` | -- | Field label text |
|
|
50
|
+
| `modelValue` | `string \| number \| Date` | -- | Field content to display |
|
|
51
|
+
| `displayValue` | `string` | -- | Text shown instead of `modelValue`; `modelValue` is still used for copy/link actions |
|
|
52
|
+
| `type` | `"text" \| "date" \| "date-ago" \| "link" \| "email"` | `"text"` | Content type for formatting |
|
|
53
|
+
| `copyable` | `boolean` | `false` | Show a copy-to-clipboard button |
|
|
54
|
+
| `orientation` | `"vertical" \| "horizontal"` | `"vertical"` | Layout direction of label and value |
|
|
55
|
+
| `aspectRatio` | `[number, number]` | `[1, 1]` | Column width ratio for label and value in horizontal mode |
|
|
56
|
+
| `tooltip` | `string` | -- | Tooltip shown on the label |
|
|
56
57
|
|
|
57
58
|
## Type Formatting
|
|
58
59
|
|
|
@@ -185,13 +186,11 @@ const displayFields = computed(() => [
|
|
|
185
186
|
|
|
186
187
|
## CSS Variables
|
|
187
188
|
|
|
188
|
-
|
|
189
|
-
| ------------- | -------- | -------------------------------------------- |
|
|
190
|
-
| `--field-gap` | `0.5rem` | Gap between label and value in vertical mode |
|
|
189
|
+
VcField exposes no CSS custom properties. The gap between label and value is fixed in the component: `0.25rem` in vertical mode and `0.5rem` in horizontal mode.
|
|
191
190
|
|
|
192
191
|
## Accessibility
|
|
193
192
|
|
|
194
|
-
- The label is rendered via `VcLabel
|
|
193
|
+
- The label is rendered via `VcLabel` for consistent styling; there is no `for`/`id` association to the value (the value is not a focusable form control)
|
|
195
194
|
- The copy button has `aria-label="Copy to clipboard"`
|
|
196
195
|
- Provides visual feedback (checkmark icon) after successful copy
|
|
197
196
|
|
|
@@ -224,7 +223,6 @@ In `orientation="horizontal"` the component reserves the `aspectRatio[0]` track
|
|
|
224
223
|
|
|
225
224
|
- [VcInput](../vc-input/) -- editable text field (use instead when user input is needed)
|
|
226
225
|
- [VcLabel](../../atoms/vc-label/) -- standalone label atom used internally
|
|
227
|
-
- [VcCol](../../atoms/vc-col/) -- column layout atom used for aspect ratio
|
|
228
226
|
|
|
229
227
|
::storybook id="form-vcfield--skeleton"
|
|
230
228
|
|
package/runtime/knowledge/docs/ui/components/molecules/vc-file-upload/vc-file-upload.docs.md
CHANGED
|
@@ -94,7 +94,7 @@ Show a loading overlay while files are being processed or uploaded:
|
|
|
94
94
|
<VcFileUpload :loading="isUploading" @upload="onUpload" />
|
|
95
95
|
```
|
|
96
96
|
|
|
97
|
-
Set `isUploading` to `true` before the upload and reset in a `finally` block.
|
|
97
|
+
Set `isUploading` to `true` before the upload and reset in a `finally` block. When `loading` is `true`, the drop-zone content is replaced by a centered spinner (VcIcon `lucide-loader-2`) plus an "uploading" label, and pointer events on the drop zone are disabled.
|
|
98
98
|
|
|
99
99
|
## Custom Text and Icon
|
|
100
100
|
|
|
@@ -270,21 +270,21 @@ async function onUpload(files: FileList) {
|
|
|
270
270
|
|
|
271
271
|
## Props
|
|
272
272
|
|
|
273
|
-
| Prop | Type
|
|
274
|
-
| -------------- |
|
|
275
|
-
| `accept` | `string`
|
|
276
|
-
| `multiple` | `boolean`
|
|
277
|
-
| `loading` | `boolean`
|
|
278
|
-
| `icon` | `string`
|
|
279
|
-
| `customText` | `{ dragHere: string; browse: string }`
|
|
280
|
-
| `rules` | `IValidationRules`
|
|
281
|
-
| `name` | `string`
|
|
282
|
-
| `label` | `string`
|
|
283
|
-
| `tooltip` | `string`
|
|
284
|
-
| `disabled` | `boolean`
|
|
285
|
-
| `required` | `boolean`
|
|
286
|
-
| `error` | `boolean`
|
|
287
|
-
| `errorMessage` | `string`
|
|
273
|
+
| Prop | Type | Default | Description |
|
|
274
|
+
| -------------- | -------------------------------------------- | ----------------------------------------- | --------------------------------------------------- |
|
|
275
|
+
| `accept` | `string` | `".jpg, .png, .jpeg, .webp, .heic, .svg"` | Accepted file types (HTML accept attribute format) |
|
|
276
|
+
| `multiple` | `boolean` | `false` | Allow selecting multiple files |
|
|
277
|
+
| `loading` | `boolean` | `false` | Show loading spinner overlay |
|
|
278
|
+
| `icon` | `string` | `"lucide-cloud-upload"` | Icon displayed in the upload zone |
|
|
279
|
+
| `customText` | `{ dragHere: string; browse: string }` | -- | Override default drag/browse instruction text |
|
|
280
|
+
| `rules` | `keyof IValidationRules \| IValidationRules` | -- | Vee-validate validation rules (e.g., `{ size: 5 }`) |
|
|
281
|
+
| `name` | `string` | `"Gallery"` | Form field name attribute |
|
|
282
|
+
| `label` | `string` | -- | Field label text |
|
|
283
|
+
| `tooltip` | `string` | -- | Tooltip on the label |
|
|
284
|
+
| `disabled` | `boolean` | `false` | Disable all interactions |
|
|
285
|
+
| `required` | `boolean` | `false` | Mark field as required |
|
|
286
|
+
| `error` | `boolean` | `false` | External error flag |
|
|
287
|
+
| `errorMessage` | `string` | -- | Error message text (sets error state when truthy) |
|
|
288
288
|
|
|
289
289
|
## Events
|
|
290
290
|
|
|
@@ -300,20 +300,20 @@ async function onUpload(files: FileList) {
|
|
|
300
300
|
|
|
301
301
|
## CSS Variables
|
|
302
302
|
|
|
303
|
-
| Variable | Default
|
|
304
|
-
| ------------------------------------- |
|
|
305
|
-
| `--file-upload-border-color` | `var(--
|
|
306
|
-
| `--file-upload-border-color-hover` | `var(--
|
|
307
|
-
| `--file-upload-border-color-dragover` | `var(--primary-
|
|
308
|
-
| `--file-upload-border-color-error` | `var(--danger-500)`
|
|
309
|
-
| `--file-upload-border-
|
|
310
|
-
| `--file-upload-
|
|
311
|
-
| `--file-upload-
|
|
312
|
-
| `--file-upload-icon-color` | `var(--
|
|
313
|
-
| `--file-upload-text-color` | `var(--
|
|
314
|
-
| `--file-upload-error-color` | `var(--danger-500)`
|
|
315
|
-
| `--file-upload-focus-ring-color` | `var(--primary-100)`
|
|
316
|
-
| `--file-upload-error-ring-color` | `var(--danger-100)`
|
|
303
|
+
| Variable | Default | Description |
|
|
304
|
+
| ------------------------------------- | ---------------------- | --------------------------------- |
|
|
305
|
+
| `--file-upload-border-color` | `var(--secondary-300)` | Default border color |
|
|
306
|
+
| `--file-upload-border-color-hover` | `var(--secondary-400)` | Hover border color |
|
|
307
|
+
| `--file-upload-border-color-dragover` | `var(--primary-400)` | Border color while dragging over |
|
|
308
|
+
| `--file-upload-border-color-error` | `var(--danger-500)` | Error state border color |
|
|
309
|
+
| `--file-upload-border-width` | `1.5px` | Drop zone border width |
|
|
310
|
+
| `--file-upload-border-radius` | `6px` | Corner radius |
|
|
311
|
+
| `--file-upload-drag-bg` | `var(--primary-50)` | Background color during drag-over |
|
|
312
|
+
| `--file-upload-icon-color` | `var(--secondary-400)` | Upload icon color |
|
|
313
|
+
| `--file-upload-text-color` | `var(--secondary-500)` | Instruction text color |
|
|
314
|
+
| `--file-upload-error-color` | `var(--danger-500)` | Error text color |
|
|
315
|
+
| `--file-upload-focus-ring-color` | `var(--primary-100)` | Focus ring color |
|
|
316
|
+
| `--file-upload-error-ring-color` | `var(--danger-100)` | Error state ring color |
|
|
317
317
|
|
|
318
318
|
## Accessibility
|
|
319
319
|
|
|
@@ -641,7 +641,7 @@ VcInput only shows the error message when the computed `invalid` state is true.
|
|
|
641
641
|
<VcInput v-model="val" label="Name" :error="true" error-message="Required" />
|
|
642
642
|
```
|
|
643
643
|
|
|
644
|
-
> **Note:** As of the current implementation, `invalid` is computed as `!!error || !!errorMessage
|
|
644
|
+
> **Note:** As of the current implementation, `invalid` is computed as `!!error || !!errorMessage`, and is also true when the parent VcInputGroup is in an error state (see `useFormField.ts` line 19). So passing only `errorMessage` does work, but it is best practice to pass both for clarity and forward compatibility.
|
|
645
645
|
|
|
646
646
|
### 4. Expecting negative numbers from type="number"
|
|
647
647
|
|
|
@@ -796,7 +796,7 @@ This behavior is powered by `BladeLoadingKey` via Vue's provide/inject. The comp
|
|
|
796
796
|
- The `type="date"`, `type="datetime-local"`, and `type="color"` values trigger internal delegation — the component renders `VcDatePicker` or `VcColorInput` instead of a native `<input>`. All forwarded props are passed via `v-bind="$attrs"`.
|
|
797
797
|
- Debounce is implemented via a `useDebounceFn` wrapper from VueUse. The internal `temp` ref holds the raw typing value; the `modelValue` update is deferred.
|
|
798
798
|
- `number` / `integer` type filtering uses `keydown` event guards — not `input` event filtering — to block `-`, `+`, `e`, and (for `integer`) `.` keys before they reach the input.
|
|
799
|
-
- `type="password"` show/hide toggle is controlled by `
|
|
799
|
+
- `type="password"` show/hide toggle is controlled by the `internalType` ref; the native `input` type toggles between `"password"` and `"text"`.
|
|
800
800
|
- The `control` slot replaces the native `<input>` with an arbitrary element. The `emitValue` scope function wraps the debounce logic, so custom controls respect the `debounce` prop automatically.
|
|
801
801
|
- Source file: `framework/ui/components/molecules/vc-input/vc-input.vue`
|
|
802
802
|
|
package/runtime/knowledge/docs/ui/components/molecules/vc-input-currency/vc-input-currency.docs.md
CHANGED
|
@@ -319,7 +319,7 @@ const price = ref<number | null>(100);
|
|
|
319
319
|
| -------------------- | ---------------- | ------------------------------------------- |
|
|
320
320
|
| `update:model-value` | `number \| null` | Emitted when the numeric value changes |
|
|
321
321
|
| `update:option` | `unknown` | Emitted when the currency selection changes |
|
|
322
|
-
| `change` | `number \| null` |
|
|
322
|
+
| `change` | `number \| null` | Declared but not currently emitted |
|
|
323
323
|
| `blur` | `Event` | Emitted when the input loses focus |
|
|
324
324
|
|
|
325
325
|
## CSS Variables
|