@db-ux/v-core-components 4.14.0-shell-52d18db → 5.0.0

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.
Files changed (84) hide show
  1. package/CHANGELOG.md +28 -0
  2. package/agent/TabItem.md +2 -2
  3. package/agent/Tabs.md +23 -20
  4. package/agent/_instructions.md +0 -10
  5. package/dist/components/accordion/accordion.vue.d.ts +1 -1
  6. package/dist/components/accordion/model.d.ts +8 -2
  7. package/dist/components/custom-select/custom-select.vue.d.ts +1 -1
  8. package/dist/components/custom-select/model.d.ts +1 -1
  9. package/dist/components/custom-select-list/custom-select-list.vue.d.ts +1 -1
  10. package/dist/components/drawer/model.d.ts +1 -1
  11. package/dist/components/header/header.vue.d.ts +2 -2
  12. package/dist/components/input/input.vue.d.ts +1 -1
  13. package/dist/components/navigation-item/navigation-item.vue.d.ts +2 -2
  14. package/dist/components/notification/notification.vue.d.ts +1 -1
  15. package/dist/components/select/select.vue.d.ts +1 -1
  16. package/dist/components/stack/model.d.ts +1 -1
  17. package/dist/components/tab-item/model.d.ts +24 -13
  18. package/dist/components/tab-item/tab-item.vue.d.ts +5 -12
  19. package/dist/components/tab-list/model.d.ts +5 -5
  20. package/dist/components/tab-list/tab-list.vue.d.ts +3 -1
  21. package/dist/components/tab-panel/model.d.ts +6 -4
  22. package/dist/components/tab-panel/tab-panel.vue.d.ts +1 -7
  23. package/dist/components/tabs/model.d.ts +93 -18
  24. package/dist/components/tabs/tabs.vue.d.ts +12 -12
  25. package/dist/db-ux.es.js +1824 -2614
  26. package/dist/db-ux.umd.js +1 -1
  27. package/dist/index.d.ts +0 -28
  28. package/dist/shared/constants.d.ts +1 -5
  29. package/dist/shared/model.d.ts +3 -90
  30. package/dist/utils/index.d.ts +9 -10
  31. package/dist/utils/navigation.d.ts +11 -22
  32. package/package.json +4 -4
  33. package/agent/ControlPanelBrand.md +0 -15
  34. package/agent/ControlPanelDesktop.md +0 -48
  35. package/agent/ControlPanelMeta.md +0 -19
  36. package/agent/ControlPanelMobile.md +0 -40
  37. package/agent/ControlPanelNavigation.md +0 -24
  38. package/agent/ControlPanelNavigationItem.md +0 -39
  39. package/agent/ControlPanelPrimaryActions.md +0 -20
  40. package/agent/ControlPanelSecondaryActions.md +0 -24
  41. package/agent/Shell.md +0 -28
  42. package/agent/ShellSubNavigation.md +0 -6
  43. package/dist/components/control-panel-brand/control-panel-brand.vue.d.ts +0 -18
  44. package/dist/components/control-panel-brand/index.d.ts +0 -1
  45. package/dist/components/control-panel-brand/model.d.ts +0 -5
  46. package/dist/components/control-panel-desktop/control-panel-desktop.vue.d.ts +0 -34
  47. package/dist/components/control-panel-desktop/index.d.ts +0 -1
  48. package/dist/components/control-panel-desktop/model.d.ts +0 -5
  49. package/dist/components/control-panel-flat-icon/control-panel-flat-icon.vue.d.ts +0 -22
  50. package/dist/components/control-panel-flat-icon/index.d.ts +0 -1
  51. package/dist/components/control-panel-flat-icon/model.d.ts +0 -12
  52. package/dist/components/control-panel-meta/control-panel-meta.vue.d.ts +0 -18
  53. package/dist/components/control-panel-meta/index.d.ts +0 -1
  54. package/dist/components/control-panel-meta/model.d.ts +0 -5
  55. package/dist/components/control-panel-mobile/control-panel-mobile.vue.d.ts +0 -33
  56. package/dist/components/control-panel-mobile/index.d.ts +0 -1
  57. package/dist/components/control-panel-mobile/model.d.ts +0 -21
  58. package/dist/components/control-panel-navigation/control-panel-navigation.vue.d.ts +0 -25
  59. package/dist/components/control-panel-navigation/index.d.ts +0 -1
  60. package/dist/components/control-panel-navigation/model.d.ts +0 -25
  61. package/dist/components/control-panel-navigation-item/control-panel-navigation-item.vue.d.ts +0 -27
  62. package/dist/components/control-panel-navigation-item/index.d.ts +0 -1
  63. package/dist/components/control-panel-navigation-item/model.d.ts +0 -20
  64. package/dist/components/control-panel-navigation-item-group/control-panel-navigation-item-group.vue.d.ts +0 -32
  65. package/dist/components/control-panel-navigation-item-group/index.d.ts +0 -1
  66. package/dist/components/control-panel-navigation-item-group/model.d.ts +0 -44
  67. package/dist/components/control-panel-primary-actions/control-panel-primary-actions.vue.d.ts +0 -18
  68. package/dist/components/control-panel-primary-actions/index.d.ts +0 -1
  69. package/dist/components/control-panel-primary-actions/model.d.ts +0 -5
  70. package/dist/components/control-panel-secondary-actions/control-panel-secondary-actions.vue.d.ts +0 -18
  71. package/dist/components/control-panel-secondary-actions/index.d.ts +0 -1
  72. package/dist/components/control-panel-secondary-actions/model.d.ts +0 -5
  73. package/dist/components/control-panel-skip-navigation/control-panel-skip-navigation.vue.d.ts +0 -21
  74. package/dist/components/control-panel-skip-navigation/index.d.ts +0 -1
  75. package/dist/components/control-panel-skip-navigation/model.d.ts +0 -16
  76. package/dist/components/shell/index.d.ts +0 -1
  77. package/dist/components/shell/model.d.ts +0 -34
  78. package/dist/components/shell/shell.vue.d.ts +0 -25
  79. package/dist/components/shell-content/index.d.ts +0 -1
  80. package/dist/components/shell-content/model.d.ts +0 -28
  81. package/dist/components/shell-content/shell-content.vue.d.ts +0 -27
  82. package/dist/components/shell-sub-navigation/index.d.ts +0 -1
  83. package/dist/components/shell-sub-navigation/model.d.ts +0 -5
  84. package/dist/components/shell-sub-navigation/shell-sub-navigation.vue.d.ts +0 -22
package/dist/index.d.ts CHANGED
@@ -12,28 +12,6 @@ export * from './components/card/index.js';
12
12
  export * from './components/card/model.js';
13
13
  export * from './components/checkbox/index.js';
14
14
  export * from './components/checkbox/model.js';
15
- export * from './components/control-panel-brand/index.js';
16
- export * from './components/control-panel-brand/model.js';
17
- export * from './components/control-panel-desktop/index.js';
18
- export * from './components/control-panel-desktop/model.js';
19
- export * from './components/control-panel-flat-icon/index.js';
20
- export * from './components/control-panel-flat-icon/model.js';
21
- export * from './components/control-panel-meta/index.js';
22
- export * from './components/control-panel-meta/model.js';
23
- export * from './components/control-panel-mobile/index.js';
24
- export * from './components/control-panel-mobile/model.js';
25
- export * from './components/control-panel-navigation/index.js';
26
- export * from './components/control-panel-navigation-item/index.js';
27
- export * from './components/control-panel-navigation-item-group/index.js';
28
- export * from './components/control-panel-navigation-item-group/model.js';
29
- export * from './components/control-panel-navigation-item/model.js';
30
- export * from './components/control-panel-navigation/model.js';
31
- export * from './components/control-panel-primary-actions/index.js';
32
- export * from './components/control-panel-primary-actions/model.js';
33
- export * from './components/control-panel-secondary-actions/index.js';
34
- export * from './components/control-panel-secondary-actions/model.js';
35
- export * from './components/control-panel-skip-navigation/index.js';
36
- export * from './components/control-panel-skip-navigation/model.js';
37
15
  export * from './components/custom-button/index.js';
38
16
  export * from './components/custom-button/model.js';
39
17
  export * from './components/custom-select/index.js';
@@ -80,12 +58,6 @@ export * from './components/section/index.js';
80
58
  export * from './components/section/model.js';
81
59
  export * from './components/select/index.js';
82
60
  export * from './components/select/model.js';
83
- export * from './components/shell/index.js';
84
- export * from './components/shell-content/index.js';
85
- export * from './components/shell-content/model.js';
86
- export * from './components/shell-sub-navigation/index.js';
87
- export * from './components/shell-sub-navigation/model.js';
88
- export * from './components/shell/model.js';
89
61
  export * from './components/stack/index.js';
90
62
  export * from './components/stack/model.js';
91
63
  export * from './components/switch/index.js';
@@ -14,15 +14,12 @@ export declare const DEFAULT_INVALID_MESSAGE: string;
14
14
  export declare const DEFAULT_REMOVE: string;
15
15
  export declare const DEFAULT_BACK: string;
16
16
  export declare const DEFAULT_SELECTED: string;
17
- export declare const DEFAULT_EXPAND: string;
18
- export declare const DEFAULT_COLLAPSE: string;
19
17
  export declare const DEFAULT_SCROLL_LEFT: string;
20
18
  export declare const DEFAULT_SCROLL_RIGHT: string;
21
- export declare const DEFAULT_ICON: string;
22
19
  export declare const DEFAULT_BURGER_MENU: string;
20
+ export declare const DEFAULT_ICON: string;
23
21
  export declare const DEFAULT_ROWS: number;
24
22
  export declare const DEFAULT_CLOSE_BUTTON: string;
25
- export declare const MAIN_CONTENT_ID: string;
26
23
  export declare const DENSITY_CONST: string;
27
24
  export declare const COLOR_CONST: string;
28
25
  export declare enum DENSITY {
@@ -69,7 +66,6 @@ export declare enum COLOR {
69
66
  export declare const COLORS: COLOR[];
70
67
  export declare const COLORS_SIMPLE: COLOR_SIMPLE[];
71
68
  export declare enum SEMANTIC {
72
- NEUTRAL = "neutral",
73
69
  CRITICAL = "critical",
74
70
  INFORMATIONAL = "informational",
75
71
  WARNING = "warning",
@@ -104,10 +104,6 @@ export type MarginProps = {
104
104
  */
105
105
  margin?: MarginType;
106
106
  };
107
- export declare const ShellControlPanelDesktopPosition: readonly ["top", "left"];
108
- export type ShellControlPanelDesktopPositionType = (typeof ShellControlPanelDesktopPosition)[number];
109
- export declare const ShellControlPanelMobilePosition: readonly ["top", "bottom"];
110
- export type ShellControlPanelMobilePositionType = (typeof ShellControlPanelMobilePosition)[number];
111
107
  export declare const PlacementHorizontalList: readonly ["left", "right", "left-start", "left-end", "right-start", "right-end"];
112
108
  export type PlacementHorizontalType = (typeof PlacementHorizontalList)[number];
113
109
  export declare const PlacementVerticalList: readonly ["top", "bottom", "top-start", "top-end", "bottom-start", "bottom-end"];
@@ -539,33 +535,11 @@ export type NavigationBackButtonProps = {
539
535
  */
540
536
  backButtonText?: string;
541
537
  };
542
- export type ControlPanelProps = {
538
+ export type AriaControlsProps = {
543
539
  /**
544
- * Slot to pass in the DBControlPanelBrand component
540
+ * Pass `aria-controls` to inner element
545
541
  */
546
- brand?: any;
547
- /**
548
- * Slot to pass in a meta navigation.
549
- * Desktop: Above the regular control-panel-desktop
550
- * Mobile: Inside the drawer
551
- */
552
- meta?: any;
553
- /**
554
- * Slot to pass one or more elements like DBButton (e.g. search) as primary action.
555
- * Desktop: Shown next to the main-navigation
556
- * Mobile: Shown next to the control-panel-brand
557
- */
558
- primaryActions?: any;
559
- /**
560
- * Slot to pass one or more elements like DBButton (e.g. profile, language, etc.) as secondary action.
561
- * Desktop: Shown separated by divider at the end of the control-panel-desktop
562
- * Mobile: Shown inside the drawer at the bottom.
563
- */
564
- secondaryActions?: any;
565
- /**
566
- * Slot to pass an anchor or link to skip the navigation and jump to main content.
567
- */
568
- skipNavigation?: any;
542
+ controls?: string;
569
543
  };
570
544
  export type NoTextProps = {
571
545
  /**
@@ -577,67 +551,6 @@ export type ValueLabelType = {
577
551
  value: string;
578
552
  label?: string;
579
553
  };
580
- export type OverflowScrollButtonProps = {
581
- /**
582
- * Change amount of scroll distance when clicking on an overflow scroll arrow button.
583
- */
584
- arrowScrollDistance?: number | string;
585
- /**
586
- * Set the text for the scroll left button
587
- */
588
- scrollLeftText?: string;
589
- /**
590
- * Set the text for the scroll right button
591
- */
592
- scrollRightText?: string;
593
- };
594
- export type OverflowScrollButtonState = {
595
- scroll: (left?: boolean) => void;
596
- showScrollLeft?: boolean;
597
- showScrollRight?: boolean;
598
- evaluateScrollButtons: (tabList: Element) => void;
599
- };
600
- export type SidebarProps = {
601
- /**
602
- * Set the expanded/collapsed state initially for the left sidebar
603
- */
604
- expanded?: boolean | string;
605
- /**
606
- * Set the tooltip for the expand/collapse button
607
- */
608
- expandButtonTooltip?: string;
609
- /**
610
- * Set the tooltip for the expand/collapse button based on the state. (only react|vue)
611
- */
612
- expandButtonTooltipFn?: (open: boolean) => string;
613
- /**
614
- * Set the tooltip for the expand/collapse button based on the state. (only react|vue)
615
- */
616
- onExpandButtonTooltipFn?: (open: boolean) => string;
617
- };
618
- export type SidebarState = {
619
- _open: boolean;
620
- getToggleButtonText: () => string;
621
- };
622
- export declare const NavigationItemGroupVariantList: readonly ["popover", "tree"];
623
- export type NavigationItemGroupVariantType = (typeof NavigationItemGroupVariantList)[number];
624
- export type NavigationItemGroupVariant = {
625
- /**
626
- * Selects the navigation interaction model: `popover` shows sub-items
627
- * in a flyout menu, `tree` shows a collapsible tree structure.
628
- * Note: This selects an interaction model, not just a visual variant.
629
- */
630
- variant?: NavigationItemGroupVariantType;
631
- };
632
- export declare const CollapsibleBehaviorList: readonly ["single", "multiple"];
633
- export type CollapsibleBehaviorType = (typeof CollapsibleBehaviorList)[number];
634
- export type CollapsibleBehaviorProps = {
635
- /**
636
- * To allow multiple items open at the same time or only 1 item
637
- * @default 'multiple'
638
- */
639
- behavior?: CollapsibleBehaviorType;
640
- };
641
554
  export type DocumentScrollState = {
642
555
  _documentScrollListenerCallbackId?: string;
643
556
  handleDocumentScroll: (event: any, parent?: HTMLElement) => void;
@@ -21,16 +21,6 @@ export declare const hasVoiceOver: () => boolean;
21
21
  */
22
22
  export declare const isIOSSafari: () => boolean;
23
23
  export declare const delay: (fn: () => void, ms: number) => Promise<unknown>;
24
- /**
25
- * Checks whether a CSS custom property on an element equals '1'.
26
- * Useful for detecting CSS-driven boolean state (e.g. responsive breakpoints)
27
- * without coupling JS to hardcoded breakpoint values.
28
- *
29
- * @param element - The element to read computed styles from
30
- * @param property - The CSS custom property name (e.g. '--db-my-flag')
31
- * @returns `true` if the trimmed property value is '1'
32
- */
33
- export declare const hasCssFlag: (element: Element, property: string) => boolean;
34
24
  /**
35
25
  * Converts boolean-like inputs to "true" or "false" strings.
36
26
  * Handles HTML-style boolean attributes where an empty string or the
@@ -86,3 +76,12 @@ export declare const getNotificationRole: ({ semantic, role, ariaLive }: {
86
76
  role?: string;
87
77
  ariaLive?: string;
88
78
  }) => string | undefined;
79
+ export declare const NAVIGATION_KEYS: readonly ["ArrowRight", "ArrowDown", "ArrowLeft", "ArrowUp", "Home", "End", "Enter", " "];
80
+ /**
81
+ * Checks whether the browser natively supports the `focusgroup` HTML attribute.
82
+ * When supported, the browser handles arrow-key navigation and roving tabindex
83
+ * for composite widgets (tablists, toolbars, etc.), so our JS fallback can be skipped.
84
+ *
85
+ * @public
86
+ */
87
+ export declare const hasFocusgroupSupport: () => boolean;
@@ -1,25 +1,10 @@
1
- /**
2
- * Adjusts a sub-navigation's position so it stays within the viewport.
3
- * Called from _handleMouseEnter for the specific hovered item's menu.
4
- * Computes a precise pixel-based transform instead of the CSS's fixed
5
- * `translateY(-200%)` which overshoots for most menu heights.
6
- *
7
- * Only applies to menus NOT already positioned by handleFixedPopover
8
- * (i.e., nested sub-navigations that use position: absolute).
9
- */
10
- export declare const adjustNestedSubNavigationPosition: (element: HTMLElement) => void;
11
1
  export type TriangleData = {
12
2
  itemRect: DOMRect;
13
3
  parentElementWidth: number;
14
4
  subNavigationHeight: number;
15
5
  padding: number;
16
- /**
17
- * The direction the sub-navigation opens relative to the element.
18
- * 'right' = sub-menu is to the right of the item
19
- * 'left' = sub-menu is to the left of the item
20
- * 'bottom' = sub-menu is below the item
21
- */
22
- openDirection: 'left' | 'right' | 'bottom';
6
+ outsideVX: 'left' | 'right' | undefined;
7
+ outsideVY: 'top' | 'bottom' | undefined;
23
8
  };
24
9
  export declare const isEventTargetNavigationItem: (event: unknown) => boolean;
25
10
  export declare class NavigationItemSafeTriangle {
@@ -34,10 +19,14 @@ export declare class NavigationItemSafeTriangle {
34
19
  private init;
35
20
  enableFollow(): void;
36
21
  disableFollow(): void;
22
+ private getTriangleTipX;
23
+ private getTriangleTipY;
37
24
  private hasMouseEnteredSubNavigation;
38
- followByMouseEvent(event: {
39
- clientX: number;
40
- clientY: number;
41
- }): void;
25
+ private getTriangleCoordinates;
26
+ followByMouseEvent(event: MouseEvent): void;
42
27
  }
43
- export declare const handleSubNavigationPosition: (element: HTMLElement, level?: number, vertical?: boolean) => void;
28
+ declare const _default: {
29
+ isEventTargetNavigationItem: (event: unknown) => boolean;
30
+ NavigationItemSafeTriangle: typeof NavigationItemSafeTriangle;
31
+ };
32
+ export default _default;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@db-ux/v-core-components",
3
- "version": "4.14.0-shell-52d18db",
3
+ "version": "5.0.0",
4
4
  "type": "module",
5
5
  "description": "Vue components for @db-ux/core-components",
6
6
  "repository": {
@@ -28,8 +28,8 @@
28
28
  "dist/"
29
29
  ],
30
30
  "dependencies": {
31
- "@db-ux/core-components": "4.14.0-shell-52d18db",
32
- "@db-ux/core-foundations": "4.14.0-shell-52d18db"
31
+ "@db-ux/core-components": "5.0.0",
32
+ "@db-ux/core-foundations": "5.0.0"
33
33
  },
34
34
  "devDependencies": {
35
35
  "@playwright/experimental-ct-vue": "1.60.0",
@@ -42,7 +42,7 @@
42
42
  "typescript": "5.9.3",
43
43
  "vite": "8.1.4",
44
44
  "vue": "3.5.39",
45
- "vue-tsc": "3.3.6"
45
+ "vue-tsc": "3.3.7"
46
46
  },
47
47
  "publishConfig": {
48
48
  "registry": "https://registry.npmjs.org/",
@@ -1,15 +0,0 @@
1
-
2
-
3
- # ControlPanelBrand Examples (vue)
4
-
5
- ```vue
6
- <template>
7
- <h1>DBControlPanelBrand Documentation Examples</h1>
8
- <h2>1. Default Control Panel Brand</h2>
9
- <DBControlPanelBrand></DBControlPanelBrand>
10
- </template>
11
-
12
- <script setup lang="ts">
13
- import { DBControlPanelBrand } from "@db-ux/v-v-core-components";
14
- </script>
15
- ```
@@ -1,48 +0,0 @@
1
-
2
-
3
- # ControlPanelDesktop Examples (vue)
4
-
5
- ```vue
6
- <template>
7
- <h1>DBControlPanelDesktop Documentation Examples</h1>
8
- <h2>1. Default Control Panel Desktop</h2>
9
- <DBControlPanelDesktop
10
- :brand="<DBControlPanelBrand>Application Name</DBControlPanelBrand>"
11
- ><DBControlPanelNavigation
12
- ><DBControlPanelNavigationItem icon="x_placeholder"
13
- ><a href="#">Navi-Item 1</a></DBControlPanelNavigationItem
14
- ><DBControlPanelNavigationItem icon="x_placeholder" :disabled="true"
15
- ><a href="#">Navi-Item 2</a></DBControlPanelNavigationItem
16
- ></DBControlPanelNavigation
17
- ></DBControlPanelDesktop
18
- >
19
- <h2>2. Vertical Orientation</h2>
20
- <DBControlPanelDesktop
21
- orientation="vertical"
22
- :brand="<DBControlPanelBrand>Application Name</DBControlPanelBrand>"
23
- ><DBControlPanelNavigation
24
- ><DBControlPanelNavigationItem icon="x_placeholder"
25
- ><a href="#">Navi-Item 1</a></DBControlPanelNavigationItem
26
- ></DBControlPanelNavigation
27
- ></DBControlPanelDesktop
28
- >
29
- <h2>3. Collapsed (expanded=false)</h2>
30
- <DBControlPanelDesktop
31
- orientation="vertical"
32
- :expanded="false"
33
- :brand="<DBControlPanelBrand>Application Name</DBControlPanelBrand>"
34
- ><DBControlPanelNavigation
35
- ><DBControlPanelNavigationItem icon="x_placeholder"
36
- ><a href="#">Navi-Item 1</a></DBControlPanelNavigationItem
37
- ></DBControlPanelNavigation
38
- ></DBControlPanelDesktop
39
- >
40
- </template>
41
-
42
- <script setup lang="ts">
43
- import { DBControlPanelBrand } from "@db-ux/v-v-core-components";
44
- import { DBControlPanelNavigation } from "@db-ux/v-v-core-components";
45
- import { DBControlPanelNavigationItem } from "@db-ux/v-v-core-components";
46
- import { DBControlPanelDesktop } from "@db-ux/v-v-core-components";
47
- </script>
48
- ```
@@ -1,19 +0,0 @@
1
-
2
-
3
- # ControlPanelMeta Examples (vue)
4
-
5
- ```vue
6
- <template>
7
- <h1>DBControlPanelMeta Documentation Examples</h1>
8
- <h2>1. Default Meta</h2>
9
- <DBControlPanelMeta
10
- ><DBLink href="#">Imprint</DBLink><DBLink href="#">Help</DBLink
11
- ><DBLink href="#">Privacy</DBLink></DBControlPanelMeta
12
- >
13
- </template>
14
-
15
- <script setup lang="ts">
16
- import { DBLink } from "@db-ux/v-v-core-components";
17
- import { DBControlPanelMeta } from "@db-ux/v-v-core-components";
18
- </script>
19
- ```
@@ -1,40 +0,0 @@
1
-
2
-
3
- # ControlPanelMobile Examples (vue)
4
-
5
- ```vue
6
- <template>
7
- <h1>DBControlPanelMobile Documentation Examples</h1>
8
- <h2>1. Default Control Panel Mobile (Drawer)</h2>
9
- <DBControlPanelMobile
10
- drawerHeaderText="Application Name"
11
- :brand="<DBControlPanelBrand>Application Name</DBControlPanelBrand>"
12
- ><DBControlPanelNavigation
13
- ><DBControlPanelNavigationItem icon="x_placeholder"
14
- ><a href="#">Navi-Item 1</a></DBControlPanelNavigationItem
15
- ><DBControlPanelNavigationItem icon="x_placeholder" :disabled="true"
16
- ><a href="#">Navi-Item 2</a></DBControlPanelNavigationItem
17
- ></DBControlPanelNavigation
18
- ></DBControlPanelMobile
19
- >
20
- <h2>2. Bottom Position + Flat Icon Variant</h2>
21
- <DBControlPanelMobile
22
- position="bottom"
23
- variant="flat-icon"
24
- drawerHeaderText="Application Name"
25
- :brand="<DBControlPanelBrand>Application Name</DBControlPanelBrand>"
26
- ><DBControlPanelNavigation
27
- ><DBControlPanelNavigationItem icon="x_placeholder"
28
- ><a href="#">Navi-Item 1</a></DBControlPanelNavigationItem
29
- ></DBControlPanelNavigation
30
- ></DBControlPanelMobile
31
- >
32
- </template>
33
-
34
- <script setup lang="ts">
35
- import { DBControlPanelBrand } from "@db-ux/v-v-core-components";
36
- import { DBControlPanelNavigation } from "@db-ux/v-v-core-components";
37
- import { DBControlPanelNavigationItem } from "@db-ux/v-v-core-components";
38
- import { DBControlPanelMobile } from "@db-ux/v-v-core-components";
39
- </script>
40
- ```
@@ -1,24 +0,0 @@
1
-
2
-
3
- # ControlPanelNavigation Examples (vue)
4
-
5
- ```vue
6
- <template>
7
- <h1>DBControlPanelNavigation Documentation Examples</h1>
8
- <h2>1. Default Navigation</h2>
9
- <DBControlPanelNavigation
10
- ><DBControlPanelNavigationItem
11
- ><a href="#">Navi-Item 1</a></DBControlPanelNavigationItem
12
- ><DBControlPanelNavigationItem icon="x_placeholder"
13
- ><a href="#">Navi-Item 2</a></DBControlPanelNavigationItem
14
- ><DBControlPanelNavigationItem :disabled="true"
15
- ><a href="#">Navi-Item 3</a></DBControlPanelNavigationItem
16
- ></DBControlPanelNavigation
17
- >
18
- </template>
19
-
20
- <script setup lang="ts">
21
- import { DBControlPanelNavigationItem } from "@db-ux/v-v-core-components";
22
- import { DBControlPanelNavigation } from "@db-ux/v-v-core-components";
23
- </script>
24
- ```
@@ -1,39 +0,0 @@
1
-
2
-
3
- # ControlPanelNavigationItem Examples (vue)
4
-
5
- ```vue
6
- <template>
7
- <h1>DBControlPanelNavigationItem Documentation Examples</h1>
8
- <h2>1. Default Navigation Item</h2>
9
- <DBControlPanelNavigationItem>
10
- Default Navigation Item
11
- </DBControlPanelNavigationItem>
12
- <h2>2. Active State</h2>
13
- <DBControlPanelNavigationItem :active="true">
14
- Active Navigation Item
15
- </DBControlPanelNavigationItem>
16
- <h2>3. Disabled State</h2>
17
- <DBControlPanelNavigationItem :disabled="true">
18
- Disabled Navigation Item
19
- </DBControlPanelNavigationItem>
20
- <h2>4. Sub-Navigation</h2>
21
- <DBControlPanelNavigationItem
22
- :subNavigation="<div>Sub Navigation Content</div>"
23
- >
24
- Navigation Item with Sub-Navigation
25
- </DBControlPanelNavigationItem>
26
- <h2>5. Icon Support</h2>
27
- <DBControlPanelNavigationItem icon="user">
28
- Navigation Item with Icon
29
- </DBControlPanelNavigationItem>
30
- <h2>6. Custom Class</h2>
31
- <DBControlPanelNavigationItem>
32
- Navigation Item with Custom Class
33
- </DBControlPanelNavigationItem>
34
- </template>
35
-
36
- <script setup lang="ts">
37
- import { DBControlPanelNavigationItem } from "@db-ux/v-v-core-components";
38
- </script>
39
- ```
@@ -1,20 +0,0 @@
1
-
2
-
3
- # ControlPanelPrimaryActions Examples (vue)
4
-
5
- ```vue
6
- <template>
7
- <h1>DBControlPanelPrimaryActions Documentation Examples</h1>
8
- <h2>1. Default Primary Actions</h2>
9
- <DBControlPanelPrimaryActions
10
- ><DBButton icon="magnifying_glass" variant="ghost" :noText="true">
11
- Search
12
- </DBButton></DBControlPanelPrimaryActions
13
- >
14
- </template>
15
-
16
- <script setup lang="ts">
17
- import { DBButton } from "@db-ux/v-v-core-components";
18
- import { DBControlPanelPrimaryActions } from "@db-ux/v-v-core-components";
19
- </script>
20
- ```
@@ -1,24 +0,0 @@
1
-
2
-
3
- # ControlPanelSecondaryActions Examples (vue)
4
-
5
- ```vue
6
- <template>
7
- <h1>DBControlPanelSecondaryActions Documentation Examples</h1>
8
- <h2>1. Default Secondary Actions</h2>
9
- <DBControlPanelSecondaryActions
10
- ><DBButton icon="x_placeholder" variant="ghost" :noText="true">
11
- Profile </DBButton
12
- ><DBButton icon="x_placeholder" variant="ghost" :noText="true">
13
- Notification </DBButton
14
- ><DBButton icon="x_placeholder" variant="ghost" :noText="true">
15
- Help
16
- </DBButton></DBControlPanelSecondaryActions
17
- >
18
- </template>
19
-
20
- <script setup lang="ts">
21
- import { DBButton } from "@db-ux/v-v-core-components";
22
- import { DBControlPanelSecondaryActions } from "@db-ux/v-v-core-components";
23
- </script>
24
- ```
package/agent/Shell.md DELETED
@@ -1,28 +0,0 @@
1
-
2
-
3
- # Shell Examples (vue)
4
-
5
- ```vue
6
- <template>
7
- <h1>DBShell Documentation Examples</h1>
8
- <h2>1. Full Shell (Desktop + Mobile Control Panel)</h2>
9
- <DBShell>
10
- <template v-slot:controlPanelDesktop><DBControlPanelDesktop><template v-slot:brand><DBControlPanelBrand data-logo="db-systel" /></template><template v-slot:meta><DBLink href="#">Imprint</DBLink><DBLink href="#">Help</DBLink></template><template v-slot:primaryActions><DBButton icon="magnifying_glass" variant="ghost" noText>Search</DBButton></template><template v-slot:secondaryActions><DBButton icon="x_placeholder" variant="ghost" noText>Profile</DBButton><DBButton icon="x_placeholder" variant="ghost" noText>Notification</DBButton><DBButton icon="x_placeholder" variant="ghost" noText>Help</DBButton></template><DBControlPanelNavigation><DBControlPanelNavigationItem icon="x_placeholder"><a href="#">Navi-Item 1</a></DBControlPanelNavigationItem><DBControlPanelNavigationItem icon="x_placeholder" disabled><a href="#">Navi-Item 2</a></DBControlPanelNavigationItem></DBControlPanelNavigation></DBControlPanelDesktop></template>
11
- <template v-slot:controlPanelMobile><DBControlPanelMobile drawerHeaderText="Application Name"><template v-slot:brand><DBControlPanelBrand data-logo="db-systel" /></template><template v-slot:meta><DBLink href="#">Imprint</DBLink><DBLink href="#">Help</DBLink></template><template v-slot:primaryActions><DBButton icon="magnifying_glass" variant="ghost" noText>Search</DBButton></template><template v-slot:secondaryActions><DBButton icon="x_placeholder" variant="ghost" noText>Profile</DBButton><DBButton icon="x_placeholder" variant="ghost" noText>Notification</DBButton><DBButton icon="x_placeholder" variant="ghost" noText>Help</DBButton></template><DBControlPanelNavigation><DBControlPanelNavigationItem icon="x_placeholder"><a href="#">Navi-Item 1</a></DBControlPanelNavigationItem><DBControlPanelNavigationItem icon="x_placeholder" disabled><a href="#">Navi-Item 2</a></DBControlPanelNavigationItem></DBControlPanelNavigation></DBControlPanelMobile></template>
12
-
13
- <DBControlPanelNavigation
14
- ><DBControlPanelNavigationItem icon="x_placeholder"
15
- ><a href="#">Navi-Item 1</a></DBControlPanelNavigationItem
16
- ><DBControlPanelNavigationItem icon="x_placeholder" :disabled="true"
17
- ><a href="#">Navi-Item 2</a></DBControlPanelNavigationItem
18
- ></DBControlPanelNavigation
19
- ></DBShell
20
- >
21
- </template>
22
-
23
- <script setup lang="ts">
24
- import { DBControlPanelNavigation } from "@db-ux/v-v-core-components";
25
- import { DBControlPanelNavigationItem } from "@db-ux/v-v-core-components";
26
- import { DBShell } from "@db-ux/v-v-core-components";
27
- </script>
28
- ```
@@ -1,6 +0,0 @@
1
- ## CSS Properties
2
-
3
- | CSS Variable | Default | CSS Property | Description | Example |
4
- | --- | --- | --- | --- | --- |
5
-
6
-
@@ -1,18 +0,0 @@
1
- declare var __VLS_1: {};
2
- type __VLS_Slots = {} & {
3
- default?: (props: typeof __VLS_1) => any;
4
- };
5
- declare const __VLS_base: import("@vue/runtime-core").DefineComponent<import("../../index.js", { with: { "resolution-mode": "import" } }).GlobalProps, {}, {}, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {}, string, import("@vue/runtime-core").PublicProps, Readonly<import("../../index.js", { with: { "resolution-mode": "import" } }).GlobalProps> & Readonly<{}>, {
6
- id: string;
7
- children: any;
8
- className: string;
9
- propOverrides: import("../../index.js", { with: { "resolution-mode": "import" } }).PropOverridesType;
10
- }, {}, {}, {}, string, import("@vue/runtime-core").ComponentProvideOptions, false, {}, any>;
11
- declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
12
- declare const _default: typeof __VLS_export;
13
- export default _default;
14
- type __VLS_WithSlots<T, S> = T & {
15
- new (): {
16
- $slots: S;
17
- };
18
- };
@@ -1 +0,0 @@
1
- export { default as DBControlPanelBrand } from './control-panel-brand.vue';
@@ -1,5 +0,0 @@
1
- import { GlobalProps, GlobalState } from '../../shared/model.js';
2
- export type DBControlPanelBrandDefaultProps = {};
3
- export type DBControlPanelBrandProps = DBControlPanelBrandDefaultProps & GlobalProps;
4
- export type DBControlPanelBrandDefaultState = {};
5
- export type DBControlPanelBrandState = DBControlPanelBrandDefaultState & GlobalState;
@@ -1,34 +0,0 @@
1
- import { DBControlPanelDesktopProps } from "./model.js";
2
- declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {}, __VLS_7: {}, __VLS_9: {}, __VLS_11: {};
3
- type __VLS_Slots = {} & {
4
- 'skip-navigation'?: (props: typeof __VLS_1) => any;
5
- } & {
6
- brand?: (props: typeof __VLS_3) => any;
7
- } & {
8
- default?: (props: typeof __VLS_5) => any;
9
- } & {
10
- meta?: (props: typeof __VLS_7) => any;
11
- } & {
12
- 'primary-actions'?: (props: typeof __VLS_9) => any;
13
- } & {
14
- 'secondary-actions'?: (props: typeof __VLS_11) => any;
15
- };
16
- declare const __VLS_base: import("@vue/runtime-core").DefineComponent<DBControlPanelDesktopProps, {}, {}, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {}, string, import("@vue/runtime-core").PublicProps, Readonly<DBControlPanelDesktopProps> & Readonly<{}>, {
17
- id: string;
18
- children: any;
19
- className: string;
20
- propOverrides: import("../../index.js", { with: { "resolution-mode": "import" } }).PropOverridesType;
21
- width: import("../../index.js", { with: { "resolution-mode": "import" } }).MaxWidthType;
22
- orientation: import("../../index.js", { with: { "resolution-mode": "import" } }).OrientationType;
23
- expanded: boolean | string;
24
- expandButtonTooltip: string;
25
- onExpandButtonTooltipFn: (open: boolean) => string;
26
- }, {}, {}, {}, string, import("@vue/runtime-core").ComponentProvideOptions, false, {}, any>;
27
- declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
28
- declare const _default: typeof __VLS_export;
29
- export default _default;
30
- type __VLS_WithSlots<T, S> = T & {
31
- new (): {
32
- $slots: S;
33
- };
34
- };
@@ -1 +0,0 @@
1
- export { default as DBControlPanelDesktop } from './control-panel-desktop.vue';
@@ -1,5 +0,0 @@
1
- import { ContainerWidthProps, ControlPanelProps, GlobalProps, GlobalState, OrientationProps, ResetIdState, SidebarProps, SidebarState, ToggleEventState } from '../../shared/model.js';
2
- export type DBControlPanelDesktopDefaultProps = {};
3
- export type DBControlPanelDesktopProps = DBControlPanelDesktopDefaultProps & GlobalProps & ContainerWidthProps & ControlPanelProps & OrientationProps & SidebarProps;
4
- export type DBControlPanelDesktopDefaultState = {};
5
- export type DBControlPanelDesktopState = DBControlPanelDesktopDefaultState & GlobalState & ToggleEventState<HTMLButtonElement> & SidebarState & ResetIdState;