@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.
- package/CHANGELOG.md +28 -0
- package/agent/TabItem.md +2 -2
- package/agent/Tabs.md +23 -20
- package/agent/_instructions.md +0 -10
- package/dist/components/accordion/accordion.vue.d.ts +1 -1
- package/dist/components/accordion/model.d.ts +8 -2
- package/dist/components/custom-select/custom-select.vue.d.ts +1 -1
- package/dist/components/custom-select/model.d.ts +1 -1
- package/dist/components/custom-select-list/custom-select-list.vue.d.ts +1 -1
- package/dist/components/drawer/model.d.ts +1 -1
- package/dist/components/header/header.vue.d.ts +2 -2
- package/dist/components/input/input.vue.d.ts +1 -1
- package/dist/components/navigation-item/navigation-item.vue.d.ts +2 -2
- package/dist/components/notification/notification.vue.d.ts +1 -1
- package/dist/components/select/select.vue.d.ts +1 -1
- package/dist/components/stack/model.d.ts +1 -1
- package/dist/components/tab-item/model.d.ts +24 -13
- package/dist/components/tab-item/tab-item.vue.d.ts +5 -12
- package/dist/components/tab-list/model.d.ts +5 -5
- package/dist/components/tab-list/tab-list.vue.d.ts +3 -1
- package/dist/components/tab-panel/model.d.ts +6 -4
- package/dist/components/tab-panel/tab-panel.vue.d.ts +1 -7
- package/dist/components/tabs/model.d.ts +93 -18
- package/dist/components/tabs/tabs.vue.d.ts +12 -12
- package/dist/db-ux.es.js +1824 -2614
- package/dist/db-ux.umd.js +1 -1
- package/dist/index.d.ts +0 -28
- package/dist/shared/constants.d.ts +1 -5
- package/dist/shared/model.d.ts +3 -90
- package/dist/utils/index.d.ts +9 -10
- package/dist/utils/navigation.d.ts +11 -22
- package/package.json +4 -4
- package/agent/ControlPanelBrand.md +0 -15
- package/agent/ControlPanelDesktop.md +0 -48
- package/agent/ControlPanelMeta.md +0 -19
- package/agent/ControlPanelMobile.md +0 -40
- package/agent/ControlPanelNavigation.md +0 -24
- package/agent/ControlPanelNavigationItem.md +0 -39
- package/agent/ControlPanelPrimaryActions.md +0 -20
- package/agent/ControlPanelSecondaryActions.md +0 -24
- package/agent/Shell.md +0 -28
- package/agent/ShellSubNavigation.md +0 -6
- package/dist/components/control-panel-brand/control-panel-brand.vue.d.ts +0 -18
- package/dist/components/control-panel-brand/index.d.ts +0 -1
- package/dist/components/control-panel-brand/model.d.ts +0 -5
- package/dist/components/control-panel-desktop/control-panel-desktop.vue.d.ts +0 -34
- package/dist/components/control-panel-desktop/index.d.ts +0 -1
- package/dist/components/control-panel-desktop/model.d.ts +0 -5
- package/dist/components/control-panel-flat-icon/control-panel-flat-icon.vue.d.ts +0 -22
- package/dist/components/control-panel-flat-icon/index.d.ts +0 -1
- package/dist/components/control-panel-flat-icon/model.d.ts +0 -12
- package/dist/components/control-panel-meta/control-panel-meta.vue.d.ts +0 -18
- package/dist/components/control-panel-meta/index.d.ts +0 -1
- package/dist/components/control-panel-meta/model.d.ts +0 -5
- package/dist/components/control-panel-mobile/control-panel-mobile.vue.d.ts +0 -33
- package/dist/components/control-panel-mobile/index.d.ts +0 -1
- package/dist/components/control-panel-mobile/model.d.ts +0 -21
- package/dist/components/control-panel-navigation/control-panel-navigation.vue.d.ts +0 -25
- package/dist/components/control-panel-navigation/index.d.ts +0 -1
- package/dist/components/control-panel-navigation/model.d.ts +0 -25
- package/dist/components/control-panel-navigation-item/control-panel-navigation-item.vue.d.ts +0 -27
- package/dist/components/control-panel-navigation-item/index.d.ts +0 -1
- package/dist/components/control-panel-navigation-item/model.d.ts +0 -20
- package/dist/components/control-panel-navigation-item-group/control-panel-navigation-item-group.vue.d.ts +0 -32
- package/dist/components/control-panel-navigation-item-group/index.d.ts +0 -1
- package/dist/components/control-panel-navigation-item-group/model.d.ts +0 -44
- package/dist/components/control-panel-primary-actions/control-panel-primary-actions.vue.d.ts +0 -18
- package/dist/components/control-panel-primary-actions/index.d.ts +0 -1
- package/dist/components/control-panel-primary-actions/model.d.ts +0 -5
- package/dist/components/control-panel-secondary-actions/control-panel-secondary-actions.vue.d.ts +0 -18
- package/dist/components/control-panel-secondary-actions/index.d.ts +0 -1
- package/dist/components/control-panel-secondary-actions/model.d.ts +0 -5
- package/dist/components/control-panel-skip-navigation/control-panel-skip-navigation.vue.d.ts +0 -21
- package/dist/components/control-panel-skip-navigation/index.d.ts +0 -1
- package/dist/components/control-panel-skip-navigation/model.d.ts +0 -16
- package/dist/components/shell/index.d.ts +0 -1
- package/dist/components/shell/model.d.ts +0 -34
- package/dist/components/shell/shell.vue.d.ts +0 -25
- package/dist/components/shell-content/index.d.ts +0 -1
- package/dist/components/shell-content/model.d.ts +0 -28
- package/dist/components/shell-content/shell-content.vue.d.ts +0 -27
- package/dist/components/shell-sub-navigation/index.d.ts +0 -1
- package/dist/components/shell-sub-navigation/model.d.ts +0 -5
- 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",
|
package/dist/shared/model.d.ts
CHANGED
|
@@ -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
|
|
538
|
+
export type AriaControlsProps = {
|
|
543
539
|
/**
|
|
544
|
-
*
|
|
540
|
+
* Pass `aria-controls` to inner element
|
|
545
541
|
*/
|
|
546
|
-
|
|
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;
|
package/dist/utils/index.d.ts
CHANGED
|
@@ -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
|
-
|
|
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
|
-
|
|
39
|
-
|
|
40
|
-
clientY: number;
|
|
41
|
-
}): void;
|
|
25
|
+
private getTriangleCoordinates;
|
|
26
|
+
followByMouseEvent(event: MouseEvent): void;
|
|
42
27
|
}
|
|
43
|
-
|
|
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": "
|
|
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": "
|
|
32
|
-
"@db-ux/core-foundations": "
|
|
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.
|
|
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,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;
|