@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
|
@@ -21,7 +21,7 @@ This plugin auto-registers every rule from `@vee-validate/rules` (required, emai
|
|
|
21
21
|
## When to Use
|
|
22
22
|
|
|
23
23
|
- Validate form fields in blades using `<Field>` components or `useField()` with declarative rules (`required`, `email`, `min`, etc.)
|
|
24
|
-
- Use custom vc-shell rules: image dimensions (`
|
|
24
|
+
- Use custom vc-shell rules: image dimensions (`mindimensions`), file weight, date comparisons, BigInt safety
|
|
25
25
|
- When NOT to use: for API-level validation -- that belongs server-side; for simple presence checks on non-form data -- use plain conditionals
|
|
26
26
|
|
|
27
27
|
The framework imports this module during setup. No manual installation is needed by module developers.
|
|
@@ -34,11 +34,11 @@ The framework imports this module during setup. No manual installation is needed
|
|
|
34
34
|
|
|
35
35
|
// Under the hood, the plugin does:
|
|
36
36
|
import { defineRule } from "vee-validate";
|
|
37
|
-
import
|
|
37
|
+
import { all } from "@vee-validate/rules";
|
|
38
38
|
|
|
39
39
|
// Register all standard rules
|
|
40
|
-
Object.
|
|
41
|
-
defineRule(
|
|
40
|
+
Object.keys(all).forEach((rule) => {
|
|
41
|
+
defineRule(rule, all[rule]);
|
|
42
42
|
});
|
|
43
43
|
|
|
44
44
|
// Then register custom vc-shell rules
|
|
@@ -187,7 +187,7 @@ const { handleSubmit, errors } = useForm({
|
|
|
187
187
|
},
|
|
188
188
|
});
|
|
189
189
|
|
|
190
|
-
const onSubmit = handleSubmit((values) => {
|
|
190
|
+
const onSubmit = handleSubmit(async (values) => {
|
|
191
191
|
// values is fully validated here
|
|
192
192
|
await saveProduct(values);
|
|
193
193
|
});
|
|
@@ -197,12 +197,15 @@ const onSubmit = handleSubmit((values) => {
|
|
|
197
197
|
|
|
198
198
|
All custom rules use localized error messages via `i18n.global.t()`. To customize messages, add the corresponding keys to your module's locale file:
|
|
199
199
|
|
|
200
|
+
`mindimensions` only treats files with a `.jpg`, `.svg`, `.jpeg`, `.png`, `.bmp`, or `.gif` extension as images; any other file fails with `messages.min_dimensions.not_image_error`.
|
|
201
|
+
|
|
200
202
|
```typescript
|
|
201
203
|
// locales/en.ts
|
|
202
204
|
export default {
|
|
203
205
|
messages: {
|
|
204
206
|
min_dimensions: {
|
|
205
207
|
error: "Image must be at least {width}x{height} pixels",
|
|
208
|
+
not_image_error: "File is not a supported image",
|
|
206
209
|
},
|
|
207
210
|
file_weight: "File must not exceed {size} KB",
|
|
208
211
|
before: "Date must be before {target}",
|
|
@@ -241,5 +244,5 @@ Do not forget that `mindimensions` and `fileWeight` rules work with File objects
|
|
|
241
244
|
|
|
242
245
|
- [vee-validate docs](https://vee-validate.logaretm.com/v4/) -- upstream validation library
|
|
243
246
|
- `framework/core/plugins/i18n/` -- error messages use `i18n.global.t()` for localization
|
|
244
|
-
- Locale keys: `messages.min_dimensions.error`, `messages.file_weight`, `messages.before`, `messages.after`, `messages.bigint`
|
|
247
|
+
- Locale keys: `messages.min_dimensions.error`, `messages.min_dimensions.not_image_error`, `messages.file_weight`, `messages.before`, `messages.after`, `messages.bigint`
|
|
245
248
|
- `framework/ui/components/molecules/vc-field/` -- VcField wrapper component for validation display
|
|
@@ -32,17 +32,17 @@ Every service follows the same architecture:
|
|
|
32
32
|
|
|
33
33
|
## Services
|
|
34
34
|
|
|
35
|
-
| Service | Factory
|
|
36
|
-
| ------------------------------ |
|
|
37
|
-
| **MenuService** | `createMenuService()`
|
|
38
|
-
| **WidgetService** | `createWidgetService()`
|
|
39
|
-
| **ToolbarService** | `createToolbarService()`
|
|
40
|
-
| **DashboardService** | `createDashboardService()`
|
|
41
|
-
| **SettingsMenuService** | `createSettingsMenuService()`
|
|
42
|
-
| **AppBarWidgetService** | `createAppBarWidgetService()`
|
|
43
|
-
| **AppBarMobileButtonsService** | `createAppBarMobileButtonsService()`
|
|
44
|
-
| **GlobalSearchService** | `createGlobalSearchService()`
|
|
45
|
-
| **LanguageService** | `createLanguageService()`
|
|
35
|
+
| Service | Factory | Module-level API | Key Type |
|
|
36
|
+
| ------------------------------ | ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------- |
|
|
37
|
+
| **MenuService** | `createMenuService()` | `addMenuItem()`, `removeRegisteredMenuItem()`, `setMenuBadge()`, `removeMenuBadge()`, `getMenuBadge()`, `getMenuBadges()` | `MenuItem` |
|
|
38
|
+
| **WidgetService** | `createWidgetService()` | `registerWidget()`, `registerExternalWidget()` | `IWidget` / `IExternalWidgetRegistration` |
|
|
39
|
+
| **ToolbarService** | `createToolbarService()` | `registerToolbarItem()` | `IToolbarItem` |
|
|
40
|
+
| **DashboardService** | `createDashboardService({ hasAccess? })` | `registerDashboardWidget()` | `DashboardWidget` |
|
|
41
|
+
| **SettingsMenuService** | `createSettingsMenuService()` | `addSettingsMenuItem()` | `ISettingsMenuItem` |
|
|
42
|
+
| **AppBarWidgetService** | `createAppBarWidgetService()` | `addAppBarWidget()` | `AppBarWidget` |
|
|
43
|
+
| **AppBarMobileButtonsService** | `createAppBarMobileButtonsService()` | (direct API) | `AppBarButtonContent` |
|
|
44
|
+
| **GlobalSearchService** | `createGlobalSearchService()` | (direct API) | per-blade search state |
|
|
45
|
+
| **LanguageService** | `createLanguageService()` | (direct API) | locale strings |
|
|
46
46
|
|
|
47
47
|
## Usage
|
|
48
48
|
|
|
@@ -59,7 +59,9 @@ addMenuItem({
|
|
|
59
59
|
priority: 10,
|
|
60
60
|
});
|
|
61
61
|
|
|
62
|
-
|
|
62
|
+
// The `component` field on IWidget is deprecated; prefer headless widgets (via
|
|
63
|
+
// `useBladeWidgets()`) or `registerExternalWidget()`.
|
|
64
|
+
registerWidget({ id: "order-stats", headless: { icon: "lucide-chart-bar" } }, "OrderDetails");
|
|
63
65
|
```
|
|
64
66
|
|
|
65
67
|
### Using inside a component
|
|
@@ -76,7 +78,7 @@ const { toolbarItems } = useToolbar(); // toolbar items for current blade
|
|
|
76
78
|
```typescript
|
|
77
79
|
import { setMenuBadge, removeMenuBadge } from "@vc-shell/framework";
|
|
78
80
|
|
|
79
|
-
setMenuBadge("OrdersList", {
|
|
81
|
+
setMenuBadge("OrdersList", { content: computed(() => pendingCount.value) });
|
|
80
82
|
removeMenuBadge("OrdersList");
|
|
81
83
|
```
|
|
82
84
|
|
|
@@ -27,60 +27,58 @@ All types are re-exported from `@vc-shell/framework`, so module developers impor
|
|
|
27
27
|
|
|
28
28
|
### Menu System (`menu-types.ts`)
|
|
29
29
|
|
|
30
|
-
| Type | Description
|
|
31
|
-
| --------------------- |
|
|
32
|
-
| `MenuItemConfig` | Configuration for registering a menu item: `title`, `icon`, `priority`, `permissions`, `
|
|
33
|
-
| `MenuItemBadge` | Badge display config: `content` (static, ref, computed, or function), `variant`, `isDot`.
|
|
34
|
-
| `MenuItemBadgeConfig` | Union: full `MenuItemBadge` object or shorthand `number \| string \| Ref \| ComputedRef \| function`.
|
|
35
|
-
| `MenuItem` | Runtime menu item extending `MenuItemConfig` with `routeId`, `url`, `children[]`, `groupIcon
|
|
30
|
+
| Type | Description |
|
|
31
|
+
| --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
32
|
+
| `MenuItemConfig` | Configuration for registering a menu item: `title`, `icon`, `priority`, `permissions`, `groupConfig`, `badge`. (`group` and `inGroupPriority` are deprecated — use `groupConfig`.) |
|
|
33
|
+
| `MenuItemBadge` | Badge display config: `content` (static, ref, computed, or function), `variant`, `isDot`. |
|
|
34
|
+
| `MenuItemBadgeConfig` | Union: full `MenuItemBadge` object or shorthand `number \| string \| Ref \| ComputedRef \| function`. |
|
|
35
|
+
| `MenuItem` | Runtime menu item extending `MenuItemConfig` with `routeId`, `url`, `children[]`, `groupId`. (`groupIcon` is deprecated — use `groupConfig.icon`.) |
|
|
36
36
|
|
|
37
37
|
### Toolbar
|
|
38
38
|
|
|
39
|
-
| Type
|
|
40
|
-
|
|
|
41
|
-
| `IBladeToolbar`
|
|
42
|
-
| `ToolbarMenu<T>` | Generic toolbar menu item that infers component props from the provided component type. |
|
|
39
|
+
| Type | Description |
|
|
40
|
+
| --------------- | ------------------------------------------------------------------------------------------------------------------ |
|
|
41
|
+
| `IBladeToolbar` | Toolbar button config: `id`, `icon`, `disabled`, `title`, `isVisible`, `clickHandler`, `separator`, `permissions`. |
|
|
43
42
|
|
|
44
43
|
### Table Columns
|
|
45
44
|
|
|
46
|
-
| Type | Description
|
|
47
|
-
| --------------------- |
|
|
48
|
-
| `ITableColumnsBase` | Column definition: `id`, `title`, `width`, `field`, `type` (money
|
|
49
|
-
| `ITableColumns` | Union of `ITableColumnsBase` with specialized image and money column variants.
|
|
50
|
-
| `IColumnFilterConfig` | Column filter: `true` (text), `string` (custom field), `{ options }` (select), `{ range }` (date range).
|
|
51
|
-
| `IFilterOption` | Select filter option: `{ value, label }`.
|
|
45
|
+
| Type | Description |
|
|
46
|
+
| --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
47
|
+
| `ITableColumnsBase` | Column definition: `id`, `title`, `width`, `field`, `type` (`money`, `date-ago`, `date`, `time`, `image`, `date-time`, `status`, `status-icon`, `number`, `link`, `html`), `sortable`, `editable`, `rules`, `filter`, `mobilePosition`, `mobileVisible`. |
|
|
48
|
+
| `ITableColumns` | Union of `ITableColumnsBase` with specialized image and money column variants. |
|
|
49
|
+
| `IColumnFilterConfig` | Column filter: `true` (text), `string` (custom field), `{ options }` (select), `{ range }` (date range). |
|
|
50
|
+
| `IFilterOption` | Select filter option: `{ value, label }`. |
|
|
52
51
|
|
|
53
52
|
### Assets
|
|
54
53
|
|
|
55
|
-
| Type | Description
|
|
56
|
-
| ------------------ |
|
|
57
|
-
| `ICommonAsset` |
|
|
58
|
-
| `AssetsHandler<T>` | Asset operations: `upload()`, `edit()`, `remove()`, `loading` ref, `noRemoveConfirmation`. |
|
|
54
|
+
| Type | Description |
|
|
55
|
+
| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
56
|
+
| `ICommonAsset` | Alias of `AssetLike`: declares only `url`, `name`, `sortOrder` plus an open `[key: string]: any` index signature (other fields are untyped passthrough). **Deprecated** (removed in v3.0) — use `AssetLike`. |
|
|
57
|
+
| `AssetsHandler<T>` | Asset operations: `upload()`, `edit()`, `remove()`, `loading` ref, `noRemoveConfirmation`. **Deprecated** (removed in v3.0) — use `UseAssetsManagerReturn`. |
|
|
59
58
|
|
|
60
59
|
### Service Abstractions (`services.ts`)
|
|
61
60
|
|
|
62
|
-
| Type | Description
|
|
63
|
-
| ------------------------------ |
|
|
64
|
-
| `ServiceLifecycle<T>` | Service create/provide/cleanup lifecycle.
|
|
65
|
-
| `PreregistrationQueue<T>` | Queue for items registered before a service initializes: `register()`, `flush()`, `clear()`.
|
|
66
|
-
| `RegistryService<TKey, TItem>` | Generic registry: `register()`, `unregister()`, `get()`, `has()`, `getAll()`, `clear()`.
|
|
67
|
-
| `ListService<T>` | Reactive list: `items` ref, `add()`, `remove()`, `find()`, `filter()`.
|
|
68
|
-
| `OrderedListService<T>` | Extends `ListService` with `reorder()` and `getSorted()`.
|
|
69
|
-
| `ObservableService<T>` | Subscribe/getValue pattern for change observation.
|
|
70
|
-
| `ServiceResult<T>` | Async operation result: `success`, `data?`, `error?` with code/message/details.
|
|
71
|
-
| `WidgetRegistration` | Widget entry: `id`, `component`, `props`, `order`, `isVisible`.
|
|
72
|
-
| `MenuItemRegistration` | Menu item entry: `id`, `title`, `icon`, `priority`, `permissions`, `routeId`, `group`, `children`. |
|
|
73
|
-
| `ToolbarItemRegistration` | Toolbar item entry: `id`, `title`, `icon`, `order`, `disabled`, `clickHandler`, `permissions`.
|
|
61
|
+
| Type | Description |
|
|
62
|
+
| ------------------------------ | --------------------------------------------------------------------------------------------------------- |
|
|
63
|
+
| `ServiceLifecycle<T>` | Service create/provide/cleanup lifecycle. |
|
|
64
|
+
| `PreregistrationQueue<T>` | Queue for items registered before a service initializes: `register()`, `flush()`, `clear()`. |
|
|
65
|
+
| `RegistryService<TKey, TItem>` | Generic registry: `register()`, `unregister()`, `get()`, `has()`, `getAll()`, `clear()`. |
|
|
66
|
+
| `ListService<T>` | Reactive list: `items` ref, `add()`, `remove()`, `find()`, `filter()`. |
|
|
67
|
+
| `OrderedListService<T>` | Extends `ListService` with `reorder()` and `getSorted()`. |
|
|
68
|
+
| `ObservableService<T>` | Subscribe/getValue pattern for change observation. |
|
|
69
|
+
| `ServiceResult<T>` | Async operation result: `success`, `data?`, `error?` with code/message/details. |
|
|
70
|
+
| `WidgetRegistration` | Widget entry: `id`, `component`, `props`, `order`, `isVisible`. |
|
|
71
|
+
| `MenuItemRegistration` | Menu item entry: `id`, `title`, `icon`, `priority`, `permissions`, `routeId`, `url`, `group`, `children`. |
|
|
72
|
+
| `ToolbarItemRegistration` | Toolbar item entry: `id`, `title`, `icon`, `order`, `disabled`, `clickHandler`, `permissions`. |
|
|
74
73
|
|
|
75
74
|
### Other
|
|
76
75
|
|
|
77
|
-
| Type
|
|
78
|
-
|
|
|
79
|
-
| `IBladeDropdownItem`
|
|
80
|
-
| `IMenuItem<T>`
|
|
81
|
-
| `
|
|
82
|
-
| `
|
|
83
|
-
| `RequestPasswordResult` | Password reset result: `succeeded`, `error`, `errorCode`. |
|
|
76
|
+
| Type | Description |
|
|
77
|
+
| ------------------------- | --------------------------------------------------------------------------------------------- |
|
|
78
|
+
| `IBladeDropdownItem` | Blade dropdown option: `id`, `title`, `icon`, `clickHandler`. |
|
|
79
|
+
| `IMenuItem<T>` | Generic menu item with optional component slot. |
|
|
80
|
+
| `IActionBuilderResult<T>` | Row action definition: `icon`, `title`, `type` (danger/success/warning/info), `clickHandler`. |
|
|
81
|
+
| `RequestPasswordResult` | Password reset result: `succeeded`, `error`, `errorCode`. |
|
|
84
82
|
|
|
85
83
|
## Usage Examples
|
|
86
84
|
|
|
@@ -94,7 +92,6 @@ const columns: ITableColumns[] = [
|
|
|
94
92
|
id: "name",
|
|
95
93
|
title: "Product Name",
|
|
96
94
|
sortable: true,
|
|
97
|
-
type: "text",
|
|
98
95
|
},
|
|
99
96
|
{
|
|
100
97
|
id: "price",
|
|
@@ -103,5 +103,4 @@ The locale resolver tries the full code first (e.g., `pt-BR`), then the base lan
|
|
|
103
103
|
|
|
104
104
|
## Related
|
|
105
105
|
|
|
106
|
-
- `framework/ui/components/organisms/vc-table/components/cells/` -- cell renderers use these for date/datetime/date-ago columns
|
|
107
|
-
- `framework/shared/modules/assets-manager/` -- uses `formatDateRelative` for asset timestamps
|
|
106
|
+
- `framework/ui/components/organisms/vc-data-table/components/cells/` -- cell renderers use these for date/datetime/date-ago columns
|
|
@@ -11,39 +11,39 @@ Helper functions and TypeScript type utilities used across the shared layer of t
|
|
|
11
11
|
|
|
12
12
|
## Overview
|
|
13
13
|
|
|
14
|
-
This directory provides small, focused utility modules for asset handling, color manipulation, badge formatting
|
|
14
|
+
This directory provides small, focused utility modules for asset handling, color manipulation, and badge formatting.
|
|
15
15
|
|
|
16
16
|
## Exports
|
|
17
17
|
|
|
18
|
-
| Export | Module | Description
|
|
19
|
-
| ----------------------------- | --------------------- |
|
|
20
|
-
| `isImage(name)` | `assets.ts` | Returns `true` if the file extension is an image (png, jpg, jpeg, svg, gif)
|
|
21
|
-
| `
|
|
22
|
-
| `
|
|
23
|
-
| `
|
|
24
|
-
| `
|
|
25
|
-
| `
|
|
26
|
-
| `
|
|
27
|
-
| `
|
|
28
|
-
| `ComponentSlots<T>` | `vueUtils.ts` | Extracts slots type from a Vue component |
|
|
29
|
-
| `ComponentEmit<T>` | `vueUtils.ts` | Extracts emit type from a Vue component |
|
|
18
|
+
| Export | Module | Description |
|
|
19
|
+
| ----------------------------- | --------------------- | ---------------------------------------------------------------------------- |
|
|
20
|
+
| `isImage(name)` | `assets.ts` | Returns `true` if the file extension is an image (png, jpg, jpeg, svg, gif) |
|
|
21
|
+
| `readableSize(bytes)` | `assets.ts` | Formats byte count as human-readable string (e.g., `"1.5 MB"`) |
|
|
22
|
+
| `getExtensionColor(name)` | `assets.ts` | Returns a CSS color for the file type, falling back to `var(--neutrals-400)` |
|
|
23
|
+
| `getExtensionLabel(name)` | `assets.ts` | Returns the uppercased file extension, or `"FILE"` when unknown |
|
|
24
|
+
| `convertColorNameToHex(name)` | `colorUtils.ts` | Converts a CSS color name to hex using the Canvas API |
|
|
25
|
+
| `isValidHexColor(value)` | `colorUtils.ts` | Validates a 6-digit hex color string |
|
|
26
|
+
| `normalizeHexColor(hex)` | `colorUtils.ts` | Ensures hex string starts with `#` |
|
|
27
|
+
| `formatBadgeCount(value)` | `formatBadgeCount.ts` | Truncates numbers > 99 to `"99+"` for badge display |
|
|
30
28
|
|
|
31
29
|
## Usage
|
|
32
30
|
|
|
33
31
|
### Asset helpers
|
|
34
32
|
|
|
35
33
|
```typescript
|
|
36
|
-
import { isImage,
|
|
34
|
+
import { isImage, readableSize, getExtensionColor, getExtensionLabel } from "@vc-shell/framework";
|
|
37
35
|
|
|
38
36
|
isImage("photo.jpg"); // true
|
|
39
37
|
isImage("document.pdf"); // false
|
|
40
38
|
|
|
41
|
-
getFileThumbnail("report.xlsx"); // "bi-filetype-xls"
|
|
42
|
-
getFileThumbnail("archive.zip"); // "bi-file-zip"
|
|
43
|
-
getFileThumbnail("unknown.abc"); // "bi-file-earmark"
|
|
44
|
-
|
|
45
39
|
readableSize(1536); // "1.5 KB"
|
|
46
40
|
readableSize(0); // "0 Bytes"
|
|
41
|
+
|
|
42
|
+
getExtensionColor("report.pdf"); // "#e74c3c"
|
|
43
|
+
getExtensionColor("unknown.abc"); // "var(--neutrals-400)"
|
|
44
|
+
|
|
45
|
+
getExtensionLabel("report.xlsx"); // "XLSX"
|
|
46
|
+
getExtensionLabel(undefined); // "FILE"
|
|
47
47
|
```
|
|
48
48
|
|
|
49
49
|
### Color utilities
|
|
@@ -71,23 +71,14 @@ formatBadgeCount(150); // "99+"
|
|
|
71
71
|
formatBadgeCount(undefined); // undefined
|
|
72
72
|
```
|
|
73
73
|
|
|
74
|
-
### Vue type utilities
|
|
75
|
-
|
|
76
|
-
```typescript
|
|
77
|
-
import type { ComponentProps, ComponentSlots } from "@vc-shell/framework";
|
|
78
|
-
|
|
79
|
-
type MyProps = ComponentProps<typeof MyComponent>;
|
|
80
|
-
type MySlots = ComponentSlots<typeof MyComponent>;
|
|
81
|
-
```
|
|
82
|
-
|
|
83
74
|
## Tips
|
|
84
75
|
|
|
85
76
|
- `convertColorNameToHex` creates a temporary Canvas element -- only use in browser context, not SSR.
|
|
86
77
|
- `readableSize` defaults to 2 decimal places; pass a second argument to change precision.
|
|
87
78
|
- `formatBadgeCount` is used by `VcWidget` and `WidgetDropdownItem` for consistent badge truncation.
|
|
88
|
-
-
|
|
79
|
+
- `getExtensionColor` / `getExtensionLabel` back the non-image file badges in assets-manager and assets-details.
|
|
89
80
|
|
|
90
81
|
## Related
|
|
91
82
|
|
|
92
|
-
- `framework/
|
|
93
|
-
- `framework/ui/components/
|
|
83
|
+
- `framework/modules/assets-manager/` -- uses asset helpers for file display
|
|
84
|
+
- `framework/ui/components/atoms/vc-widget/` -- VcWidget uses `formatBadgeCount`
|
|
@@ -42,7 +42,7 @@ Transforms full-size image URLs into thumbnail variants by appending size suffix
|
|
|
42
42
|
Transforms an image URL by inserting a size suffix before the file extension.
|
|
43
43
|
|
|
44
44
|
```ts
|
|
45
|
-
import { getThumbnailUrl } from "@
|
|
45
|
+
import { getThumbnailUrl } from "@vc-shell/framework";
|
|
46
46
|
|
|
47
47
|
getThumbnailUrl("https://cdn.example.com/photo.jpg", "sm");
|
|
48
48
|
// → "https://cdn.example.com/photo_sm.jpg"
|
|
@@ -69,7 +69,7 @@ getThumbnailUrl(undefined, "sm");
|
|
|
69
69
|
Maps a CSS pixel display size to the best-fit thumbnail preset. Picks the smallest thumbnail that is >= the display size.
|
|
70
70
|
|
|
71
71
|
```ts
|
|
72
|
-
import { getBestThumbnailSize } from "@
|
|
72
|
+
import { getBestThumbnailSize } from "@vc-shell/framework";
|
|
73
73
|
|
|
74
74
|
getBestThumbnailSize(48); // → "64x64"
|
|
75
75
|
getBestThumbnailSize(96); // → "128x128"
|
|
@@ -31,7 +31,8 @@ camelToSnake("myPropName"); // "my_prop_name"
|
|
|
31
31
|
camelToSnake("backgroundColor"); // "background_color"
|
|
32
32
|
|
|
33
33
|
camelize("some-prop-name"); // "somePropName"
|
|
34
|
-
camelize("
|
|
34
|
+
camelize("some prop.name"); // "somePropName" (splits on non-word chars)
|
|
35
|
+
camelize("SOME_CONSTANT"); // "SOME_CONSTANT" (unchanged: underscore is a word char)
|
|
35
36
|
|
|
36
37
|
kebabToCamel("vc-data-table"); // "vcDataTable"
|
|
37
38
|
kebabToCamel("my-component-name"); // "myComponentName"
|
|
@@ -65,9 +66,9 @@ formatDateRelative(new Date(Date.now() - 3600000)); // "about 1 hour ago"
|
|
|
65
66
|
formatDateRelative("2024-01-15", "de"); // "vor etwa 2 Jahren"
|
|
66
67
|
|
|
67
68
|
// Formatted dates using Moment.js-style patterns (auto-converted to date-fns)
|
|
68
|
-
formatDateWithPattern("2024-01-15", "LL"); // "
|
|
69
|
+
formatDateWithPattern("2024-01-15", "LL"); // "Jan 15, 2024"
|
|
69
70
|
formatDateWithPattern("2024-06-01", "DD/MM/YYYY"); // "01/06/2024"
|
|
70
|
-
formatDateWithPattern("2024-01-15", "LL", "de"); // "15.
|
|
71
|
+
formatDateWithPattern("2024-01-15", "LL", "de"); // "15. Jan. 2024"
|
|
71
72
|
|
|
72
73
|
// Format conversion
|
|
73
74
|
convertMomentFormat("YYYY-MM-DD"); // "yyyy-MM-dd"
|
|
@@ -118,7 +119,7 @@ if (isFrameworkError(err)) {
|
|
|
118
119
|
console.log(err.code); // e.g. "INJECTION_ERROR"
|
|
119
120
|
}
|
|
120
121
|
|
|
121
|
-
throw new InjectionError("WidgetService"); // "WidgetService
|
|
122
|
+
throw new InjectionError("WidgetService"); // "WidgetService not provided. Make sure to call the corresponding 'provide' function."
|
|
122
123
|
```
|
|
123
124
|
|
|
124
125
|
## ID Generation
|
|
@@ -151,11 +152,11 @@ Factory-based logger with level filtering. Default level: `debug` in dev, `warn`
|
|
|
151
152
|
import { createLogger, loggers } from "@vc-shell/framework";
|
|
152
153
|
|
|
153
154
|
const log = createLogger("OrdersModule");
|
|
154
|
-
log.info("Module initialized"); // [OrdersModule] Module initialized
|
|
155
|
-
log.error("Failed to load orders", error); // [OrdersModule] Failed to load orders Error: ...
|
|
155
|
+
log.info("Module initialized"); // [@vc-shell/framework#OrdersModule] Module initialized
|
|
156
|
+
log.error("Failed to load orders", error); // [@vc-shell/framework#OrdersModule] Failed to load orders Error: ...
|
|
156
157
|
|
|
157
158
|
const subLog = log.child("DataSync");
|
|
158
|
-
subLog.debug("Syncing 50 records"); // [OrdersModule:DataSync] Syncing 50 records
|
|
159
|
+
subLog.debug("Syncing 50 records"); // [@vc-shell/framework#OrdersModule:DataSync] Syncing 50 records
|
|
159
160
|
|
|
160
161
|
log.setLevel("error"); // Only errors will be logged
|
|
161
162
|
```
|
|
@@ -186,4 +187,4 @@ convertMomentFormat("X"); // May not convert as expected
|
|
|
186
187
|
|
|
187
188
|
- `framework/core/plugins/global-error-handler/` -- uses `parseError()` for global error catching
|
|
188
189
|
- `framework/core/plugins/i18n/` -- date formatting respects the active locale
|
|
189
|
-
- `framework/core/constants/` -- `
|
|
190
|
+
- `framework/core/constants/` -- `COMPONENT_DEFAULTS` (from `@core/constants/defaults`) holds standard delays (e.g. `select.debounce` 500, `input.debounce` 0)
|
|
@@ -13,7 +13,7 @@ Centralized Vue `InjectionKey` symbols for the vc-shell framework's provide/inje
|
|
|
13
13
|
|
|
14
14
|
The vc-shell framework uses Vue's provide/inject mechanism extensively to share services, navigation state, and configuration across the component tree. Instead of relying on global singletons or Pinia stores, the framework creates typed injection keys for each service, allowing components to declare their dependencies explicitly.
|
|
15
15
|
|
|
16
|
-
|
|
16
|
+
Most keys live in `framework/injection-keys.ts` to avoid symbol duplication and ensure type safety; a few blade-stack keys such as `BladeDescriptorKey` are declared in `core/blade-navigation/types` and re-exported from there. The app shell provides these values at the root during bootstrap; components and composables inject them using the corresponding key.
|
|
17
17
|
|
|
18
18
|
This centralized approach has several advantages:
|
|
19
19
|
|
|
@@ -34,6 +34,8 @@ This centralized approach has several advantages:
|
|
|
34
34
|
| `BladeContextKey` | `ComputedRef<Record<string, unknown>>` | Blade-exposed context for widgets/extensions |
|
|
35
35
|
| `BladeRoutesKey` | `BladeRoutesRecord[]` | Registered blade routes |
|
|
36
36
|
| `InternalRoutesKey` | `BladeRoutesRecord[]` | Internal framework routes |
|
|
37
|
+
| `BladeFormKey` | `BladeFormInjection` | Blade form context shared with child fields |
|
|
38
|
+
| `BladeLoadingKey` | `Ref<boolean>` | Blade loading (skeleton) state for children |
|
|
37
39
|
|
|
38
40
|
### Notifications
|
|
39
41
|
|
|
@@ -75,6 +77,8 @@ This centralized approach has several advantages:
|
|
|
75
77
|
|
|
76
78
|
### Breakpoints
|
|
77
79
|
|
|
80
|
+
> **Deprecated.** All five breakpoint keys below are deprecated in favor of the `useResponsive()` composable. Prefer `useResponsive()` over injecting these keys directly.
|
|
81
|
+
|
|
78
82
|
| Key | Type | Description |
|
|
79
83
|
| -------------- | -------------- | ---------------------- |
|
|
80
84
|
| `IsMobileKey` | `Ref<boolean>` | Mobile breakpoint |
|
|
@@ -85,15 +89,6 @@ This centralized approach has several advantages:
|
|
|
85
89
|
|
|
86
90
|
<!-- internal:start -->
|
|
87
91
|
|
|
88
|
-
### Legacy Aliases (Deprecated)
|
|
89
|
-
|
|
90
|
-
| Deprecated | Use Instead |
|
|
91
|
-
| ------------------- | -------------------- |
|
|
92
|
-
| `BladeDescriptor` | `BladeDescriptorKey` |
|
|
93
|
-
| `BLADE_BACK_BUTTON` | `BladeBackButtonKey` |
|
|
94
|
-
| `TOOLBAR_SERVICE` | `ToolbarServiceKey` |
|
|
95
|
-
| `EMBEDDED_MODE` | `EmbeddedModeKey` |
|
|
96
|
-
|
|
97
92
|
### Removed Keys (No Replacement)
|
|
98
93
|
|
|
99
94
|
These keys existed in v1.2.3 but have been removed from the framework entirely. There is no drop-in symbol replacement.
|
|
@@ -194,5 +189,5 @@ const service = inject(MenuServiceKey); // MenuService instance
|
|
|
194
189
|
|
|
195
190
|
- `framework/core/services/` -- Service implementations provided via these keys
|
|
196
191
|
- `framework/core/notifications/store.ts` -- NotificationStore provided via `NotificationStoreKey`
|
|
197
|
-
- `framework/
|
|
192
|
+
- `framework/core/blade-navigation/types/` -- Blade types for navigation keys
|
|
198
193
|
- `framework/core/composables/` -- Composable wrappers for most injection keys
|
|
@@ -0,0 +1,123 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Assets Module
|
|
3
|
+
category: reference
|
|
4
|
+
group: modules
|
|
5
|
+
slug: assets
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
# Assets Details Module
|
|
9
|
+
|
|
10
|
+
A built-in child blade for editing a single asset's metadata: display name, alt text (images only), and description. Opened by `AssetsManager` when the user clicks a table row, but also usable standalone from any parent blade that needs single-asset editing.
|
|
11
|
+
|
|
12
|
+
## Overview
|
|
13
|
+
|
|
14
|
+
The blade reads an `AssetLike` instance from `options.asset`, exposes a form pre-populated from it, and delegates persistence back to the caller through two callbacks (`assetEditHandler`, `assetRemoveHandler`). The blade itself never mutates the original asset and never talks to the network — the caller decides what saving and removing means.
|
|
15
|
+
|
|
16
|
+
The module is registered as `AssetsDetailsModule` and exposes the `AssetsDetails` blade (registered globally under the name `"AssetsDetails"`).
|
|
17
|
+
|
|
18
|
+
## Module Registration
|
|
19
|
+
|
|
20
|
+
```typescript
|
|
21
|
+
import { AssetsDetailsModule } from "@vc-shell/framework";
|
|
22
|
+
|
|
23
|
+
// Registered automatically when the framework loads
|
|
24
|
+
// Exposes: AssetsDetails blade component
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
## Options (via `useBlade`)
|
|
28
|
+
|
|
29
|
+
The blade reads its configuration from `options` via `useBlade<AssetsDetailsOptions>()` (not props):
|
|
30
|
+
|
|
31
|
+
| Option | Type | Description |
|
|
32
|
+
| -------------------- | ---------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
33
|
+
| `asset` | `AssetLike` | The asset to edit. The blade clones it into local state — the source object is never mutated until `assetEditHandler` is called. |
|
|
34
|
+
| `disabled` | `boolean?` | When true, every input is read-only and the toolbar Save/Delete buttons are disabled. |
|
|
35
|
+
| `hiddenFields` | `string[]?` | Field names to hide. Supported values: `"name"`, `"altText"`, `"description"`. The header (preview, size, created date, URL) is always shown. |
|
|
36
|
+
| `assetEditHandler` | `((asset: AssetLike) => void)?` | Called by the toolbar Save button with the edited copy. The blade closes itself after the handler resolves. If omitted, the Save button performs no action and the blade does not close. |
|
|
37
|
+
| `assetRemoveHandler` | `((asset: AssetLike) => Promise<void>)?` | Called by the toolbar Delete button. The blade closes itself after the handler resolves. If omitted, the Delete button performs no action and the blade does not close. |
|
|
38
|
+
|
|
39
|
+
## Usage
|
|
40
|
+
|
|
41
|
+
### Direct invocation
|
|
42
|
+
|
|
43
|
+
```typescript
|
|
44
|
+
import { useBlade } from "@vc-shell/framework";
|
|
45
|
+
|
|
46
|
+
const { openBlade } = useBlade();
|
|
47
|
+
|
|
48
|
+
openBlade({
|
|
49
|
+
name: "AssetsDetails",
|
|
50
|
+
options: {
|
|
51
|
+
asset: selectedAsset,
|
|
52
|
+
disabled: !canEdit.value,
|
|
53
|
+
hiddenFields: ["altText"],
|
|
54
|
+
assetEditHandler: async (edited) => {
|
|
55
|
+
await api.updateAsset(edited);
|
|
56
|
+
},
|
|
57
|
+
assetRemoveHandler: async (asset) => {
|
|
58
|
+
await api.deleteAsset(asset.id);
|
|
59
|
+
},
|
|
60
|
+
},
|
|
61
|
+
});
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
### Used by AssetsManager
|
|
65
|
+
|
|
66
|
+
When `AssetsManager` opens this blade on row click, it wires the manager's mutation methods into the handlers automatically:
|
|
67
|
+
|
|
68
|
+
```typescript
|
|
69
|
+
// inside AssetsManager
|
|
70
|
+
openBlade({
|
|
71
|
+
name: "AssetsDetails",
|
|
72
|
+
options: {
|
|
73
|
+
asset,
|
|
74
|
+
disabled: readonly.value,
|
|
75
|
+
hiddenFields: options.value?.hiddenFields,
|
|
76
|
+
assetEditHandler: (asset) => manager.updateItem(asset),
|
|
77
|
+
assetRemoveHandler: (asset) => manager.remove(asset),
|
|
78
|
+
},
|
|
79
|
+
});
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
## Header
|
|
83
|
+
|
|
84
|
+
The header is always rendered above the editable form and is not configurable through `hiddenFields`:
|
|
85
|
+
|
|
86
|
+
| Element | Source |
|
|
87
|
+
| ------------ | -------------------------------------------------------------------------------------------------- |
|
|
88
|
+
| Preview | `VcImage` thumbnail for image extensions (png/jpg/jpeg/svg/gif), colored extension badge otherwise |
|
|
89
|
+
| Size | `readableSize(asset.size)` — formatted as `KB`/`MB`/`GB` |
|
|
90
|
+
| Created date | `asset.createdDate` rendered with `type="date-ago"` |
|
|
91
|
+
| URL | `asset.url` displayed as a copyable link with `asset.name` as the visible label |
|
|
92
|
+
|
|
93
|
+
## Form fields
|
|
94
|
+
|
|
95
|
+
All fields are bound to a local clone of `asset`. They can be hidden individually via `hiddenFields`.
|
|
96
|
+
|
|
97
|
+
| Field | Visibility | Notes |
|
|
98
|
+
| ------------- | ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
|
|
99
|
+
| `name` | Hidden if `hiddenFields` includes `"name"` | Required. Edits the **base name only** — the original extension is preserved on save (e.g. editing `report.pdf` keeps `.pdf`). |
|
|
100
|
+
| `altText` | Image assets only; hide via `"altText"` | Plain string. Shown only when `asset.typeId === "Image"`. |
|
|
101
|
+
| `description` | Hidden if `hiddenFields` includes `"description"` | Multiline textarea. |
|
|
102
|
+
|
|
103
|
+
## Toolbar
|
|
104
|
+
|
|
105
|
+
| Button | Disabled condition | Action |
|
|
106
|
+
| ------ | ------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------- |
|
|
107
|
+
| Save | `disabled === true`, the form is invalid, or the form is not dirty (vee-validate `useIsFormValid`/`useIsFormDirty`) | `await assetEditHandler(editedAsset)`, then `closeSelf()` |
|
|
108
|
+
| Delete | `disabled === true` | `await assetRemoveHandler(editedAsset)`, then `closeSelf()` |
|
|
109
|
+
|
|
110
|
+
## Tips
|
|
111
|
+
|
|
112
|
+
- **Extension is locked.** The `name` input only edits the base name; the original extension is reattached on save. Renaming `photo.png` to `cover` produces `cover.png`.
|
|
113
|
+
- **Required name validation** uses vee-validate's `required` rule. The Save button stays disabled until validation passes.
|
|
114
|
+
- **`assetEditHandler`** is invoked with the edited clone — the original `options.asset` reference is never mutated. Callers should treat the argument as the new state.
|
|
115
|
+
- **`disabled` makes the blade fully read-only:** inputs are disabled and toolbar Save/Delete are disabled regardless of dirtiness.
|
|
116
|
+
- **`hiddenFields` does not enforce required-ness.** Hiding `"name"` skips the validated `<Field>`, so the Save button only depends on form dirtiness.
|
|
117
|
+
|
|
118
|
+
## Related
|
|
119
|
+
|
|
120
|
+
- `framework/modules/assets-manager/` -- parent `AssetsManager` blade that opens `AssetsDetails` on row click
|
|
121
|
+
- `framework/core/composables/useAssetsManager/` -- `AssetLike` type definition
|
|
122
|
+
- `framework/core/utilities/assets.ts` -- `isImage`, `readableSize`, `getExtensionColor`, `getExtensionLabel`
|
|
123
|
+
- `framework/ui/components/molecules/vc-field/` -- `VcField` used by the header for size/date/url
|
|
@@ -22,7 +22,7 @@ import { AssetsManagerModule } from "@vc-shell/framework";
|
|
|
22
22
|
// Exposes: AssetsManager blade component
|
|
23
23
|
```
|
|
24
24
|
|
|
25
|
-
The module exports `AssetsManagerModule` (a Vue plugin)
|
|
25
|
+
The module exports `AssetsManagerModule` (a Vue plugin) which registers the `AssetsManager` blade in the blade registry. It is opened by name via `openBlade({ name: "AssetsManager" })`, not used as a global `<AssetsManager>` tag.
|
|
26
26
|
|
|
27
27
|
## Options (via `useBlade`)
|
|
28
28
|
|