@db-ux/v-core-components 1.0.0-test-13b991d
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/README.md +112 -0
- package/dist/components/accordion/accordion.vue.d.ts +22 -0
- package/dist/components/accordion/index.d.ts +1 -0
- package/dist/components/accordion/model.d.ts +41 -0
- package/dist/components/accordion-item/accordion-item.vue.d.ts +22 -0
- package/dist/components/accordion-item/index.d.ts +1 -0
- package/dist/components/accordion-item/model.d.ts +24 -0
- package/dist/components/badge/badge.vue.d.ts +22 -0
- package/dist/components/badge/index.d.ts +1 -0
- package/dist/components/badge/model.d.ts +16 -0
- package/dist/components/brand/brand.vue.d.ts +20 -0
- package/dist/components/brand/index.d.ts +1 -0
- package/dist/components/brand/model.d.ts +10 -0
- package/dist/components/button/button.vue.d.ts +33 -0
- package/dist/components/button/index.d.ts +1 -0
- package/dist/components/button/model.d.ts +52 -0
- package/dist/components/card/card.vue.d.ts +20 -0
- package/dist/components/card/index.d.ts +1 -0
- package/dist/components/card/model.d.ts +18 -0
- package/dist/components/checkbox/checkbox.vue.d.ts +41 -0
- package/dist/components/checkbox/index.d.ts +1 -0
- package/dist/components/checkbox/model.d.ts +10 -0
- package/dist/components/divider/divider.vue.d.ts +12 -0
- package/dist/components/divider/index.d.ts +1 -0
- package/dist/components/divider/model.d.ts +18 -0
- package/dist/components/drawer/drawer.vue.d.ts +28 -0
- package/dist/components/drawer/index.d.ts +1 -0
- package/dist/components/drawer/model.d.ts +41 -0
- package/dist/components/header/header.vue.d.ts +28 -0
- package/dist/components/header/index.d.ts +1 -0
- package/dist/components/header/model.d.ts +44 -0
- package/dist/components/icon/icon.vue.d.ts +20 -0
- package/dist/components/icon/index.d.ts +1 -0
- package/dist/components/icon/model.d.ts +12 -0
- package/dist/components/infotext/index.d.ts +1 -0
- package/dist/components/infotext/infotext.vue.d.ts +21 -0
- package/dist/components/infotext/model.d.ts +5 -0
- package/dist/components/input/index.d.ts +1 -0
- package/dist/components/input/input.vue.d.ts +59 -0
- package/dist/components/input/model.d.ts +39 -0
- package/dist/components/link/index.d.ts +1 -0
- package/dist/components/link/link.vue.d.ts +31 -0
- package/dist/components/link/model.d.ts +24 -0
- package/dist/components/navigation/index.d.ts +1 -0
- package/dist/components/navigation/model.d.ts +5 -0
- package/dist/components/navigation/navigation.vue.d.ts +17 -0
- package/dist/components/navigation-item/index.d.ts +1 -0
- package/dist/components/navigation-item/model.d.ts +34 -0
- package/dist/components/navigation-item/navigation-item.vue.d.ts +28 -0
- package/dist/components/notification/index.d.ts +1 -0
- package/dist/components/notification/model.d.ts +57 -0
- package/dist/components/notification/notification.vue.d.ts +33 -0
- package/dist/components/page/index.d.ts +1 -0
- package/dist/components/page/model.d.ts +32 -0
- package/dist/components/page/page.vue.d.ts +21 -0
- package/dist/components/popover/index.d.ts +1 -0
- package/dist/components/popover/model.d.ts +18 -0
- package/dist/components/popover/popover.vue.d.ts +24 -0
- package/dist/components/radio/index.d.ts +1 -0
- package/dist/components/radio/model.d.ts +7 -0
- package/dist/components/radio/radio.vue.d.ts +36 -0
- package/dist/components/section/index.d.ts +1 -0
- package/dist/components/section/model.d.ts +5 -0
- package/dist/components/section/section.vue.d.ts +18 -0
- package/dist/components/select/index.d.ts +1 -0
- package/dist/components/select/model.d.ts +43 -0
- package/dist/components/select/select.vue.d.ts +47 -0
- package/dist/components/stack/index.d.ts +1 -0
- package/dist/components/stack/model.d.ts +34 -0
- package/dist/components/stack/stack.vue.d.ts +22 -0
- package/dist/components/switch/index.d.ts +1 -0
- package/dist/components/switch/model.d.ts +12 -0
- package/dist/components/switch/switch.vue.d.ts +39 -0
- package/dist/components/tab-item/index.d.ts +1 -0
- package/dist/components/tab-item/model.d.ts +24 -0
- package/dist/components/tab-item/tab-item.vue.d.ts +31 -0
- package/dist/components/tab-list/index.d.ts +1 -0
- package/dist/components/tab-list/model.d.ts +5 -0
- package/dist/components/tab-list/tab-list.vue.d.ts +15 -0
- package/dist/components/tab-panel/index.d.ts +1 -0
- package/dist/components/tab-panel/model.d.ts +10 -0
- package/dist/components/tab-panel/tab-panel.vue.d.ts +18 -0
- package/dist/components/tabs/index.d.ts +1 -0
- package/dist/components/tabs/model.d.ts +47 -0
- package/dist/components/tabs/tabs.vue.d.ts +25 -0
- package/dist/components/tag/index.d.ts +1 -0
- package/dist/components/tag/model.d.ts +45 -0
- package/dist/components/tag/tag.vue.d.ts +29 -0
- package/dist/components/textarea/index.d.ts +1 -0
- package/dist/components/textarea/model.d.ts +30 -0
- package/dist/components/textarea/textarea.vue.d.ts +44 -0
- package/dist/components/tooltip/index.d.ts +1 -0
- package/dist/components/tooltip/model.d.ts +7 -0
- package/dist/components/tooltip/tooltip.vue.d.ts +22 -0
- package/dist/db-ux.es.js +2645 -0
- package/dist/db-ux.umd.js +1 -0
- package/dist/index.d.ts +36 -0
- package/dist/shared/constants.d.ts +83 -0
- package/dist/shared/model.d.ts +445 -0
- package/dist/utils/form-components.d.ts +2 -0
- package/dist/utils/index.d.ts +61 -0
- package/dist/utils/navigation.d.ts +32 -0
- package/package.json +58 -0
package/README.md
ADDED
|
@@ -0,0 +1,112 @@
|
|
|
1
|
+
# @db-ux/v-core-components
|
|
2
|
+
|
|
3
|
+

|
|
4
|
+
[](https://github.com/prettier/prettier)
|
|
5
|
+
[](https://conventionalcommits.org)
|
|
6
|
+
[](https://makeapullrequest.com)
|
|
7
|
+
|
|
8
|
+
A Vue library containing all styles & components of [DB UX Design System (technical components)](https://github.com/db-ux-design-system/core-web).
|
|
9
|
+
|
|
10
|
+
> **Note:** Find more information about specific components [here](https://db-ux-design-system.github.io/core-web/review/main)
|
|
11
|
+
|
|
12
|
+
## Install
|
|
13
|
+
|
|
14
|
+
```shell
|
|
15
|
+
npm i @db-ux/v-core-components
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
> **Note:** This will install [`@db-ux/core-foundations`](https://www.npmjs.com/package/@db-ux/core-foundations) and [`@db-ux/core-components`](https://www.npmjs.com/package/@db-ux/core-components) as well which contains the `css`/`scss` files
|
|
19
|
+
|
|
20
|
+
## Styling Dependencies
|
|
21
|
+
|
|
22
|
+
Import the styles in scss or css. Based on your technology the file names could be different.
|
|
23
|
+
|
|
24
|
+
- Default (relative): points to `../assets`
|
|
25
|
+
- Rollup (rollup): points to `@db-ux/core-foundations/assets`
|
|
26
|
+
- Webpack (webpack): points to `~@db-ux/core-foundations/assets`
|
|
27
|
+
|
|
28
|
+
<details>
|
|
29
|
+
<summary><strong>SCSS</strong></summary>
|
|
30
|
+
|
|
31
|
+
```scss
|
|
32
|
+
// style.scss
|
|
33
|
+
@forward "@db-ux/core-components/build/styles/rollup";
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
```ts
|
|
37
|
+
// main.ts
|
|
38
|
+
import "./style.scss";
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
</details>
|
|
42
|
+
<details>
|
|
43
|
+
<summary><strong>CSS</strong></summary>
|
|
44
|
+
|
|
45
|
+
```ts
|
|
46
|
+
// main.ts
|
|
47
|
+
import "@db-ux/core-components/build/styles/rollup.css";
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
</details>
|
|
51
|
+
|
|
52
|
+
> **Note:** The `@db-ux/core-components/build/styles/relative` file contains optional and all components styles. If you consider performance issues see [@db-ux/core-components](https://www.npmjs.com/package/@db-ux/core-components) for more information.
|
|
53
|
+
|
|
54
|
+
## Usage
|
|
55
|
+
|
|
56
|
+
```vue
|
|
57
|
+
<script setup lang="ts">
|
|
58
|
+
import { DBButton } from "@db-ux/v-core-components";
|
|
59
|
+
</script>
|
|
60
|
+
|
|
61
|
+
<template>
|
|
62
|
+
<DBButton icon="x_placeholder">Test</DBButton>
|
|
63
|
+
</template>
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
### Events
|
|
67
|
+
|
|
68
|
+
We add `v-model` support which fires on every change.
|
|
69
|
+
But you can use normal `@` events as well.
|
|
70
|
+
|
|
71
|
+
Both Inputs in this example do the same:
|
|
72
|
+
|
|
73
|
+
```html
|
|
74
|
+
<script setup lang="ts">
|
|
75
|
+
import { DbInput } from "@db-ux/v-core-components";
|
|
76
|
+
import { ref } from "vue";
|
|
77
|
+
const input = ref("");
|
|
78
|
+
</script>
|
|
79
|
+
<template>
|
|
80
|
+
<DBInput
|
|
81
|
+
label="Inputfield"
|
|
82
|
+
name="input-name"
|
|
83
|
+
v-model:value="input"
|
|
84
|
+
></DBInput>
|
|
85
|
+
<DBInput
|
|
86
|
+
label="Inputfield"
|
|
87
|
+
name="input-name"
|
|
88
|
+
:value="input"
|
|
89
|
+
@change="e => input = e.target.value"
|
|
90
|
+
></DBInput>
|
|
91
|
+
</template>
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
## Deutsche Bahn brand
|
|
95
|
+
|
|
96
|
+
As we'd like to perfectly support our users and customers on their digital journey, the usage of Deutsche Bahn brand and trademarks are bound of clear guidelines and restrictions even when being used with the code that we're provide with this product; Deutsche Bahn fully reserves all rights regarding the Deutsche Bahn brand, even though that we're providing the code of DB UX Design System products free to use and release it under the Apache 2.0 license.
|
|
97
|
+
Please have a look at our brand portal at <https://marketingportal.extranet.deutschebahn.com/> for any further questions and whom to contact on any brand issues.
|
|
98
|
+
|
|
99
|
+
You must remove or replace any Deutsche Bahn brand and design assets as well as protected characteristics and trademarks. We're even also planning to provide a neutral theme that would make it much easier for you to use our product without the trademarks by Deutsche Bahn.
|
|
100
|
+
|
|
101
|
+
## Contributions
|
|
102
|
+
|
|
103
|
+
Contributions are very welcome, please refer to the [contribution guide](https://github.com/db-ux-design-system/core-web/blob/main/CONTRIBUTING.md).
|
|
104
|
+
|
|
105
|
+
## Code of conduct
|
|
106
|
+
|
|
107
|
+
We as members, contributors, and leaders pledge to make participation in our
|
|
108
|
+
community a harassment-free experience for everyone – have a look at our [Contributor Covenant Code of Conduct](https://github.com/db-ux-design-system/core-web/blob/main/CODE-OF-CONDUCT.md).
|
|
109
|
+
|
|
110
|
+
## License
|
|
111
|
+
|
|
112
|
+
This project is licensed under [Apache-2.0](LICENSE).
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { DBAccordionItemDefaultProps } from "../accordion-item/model";
|
|
2
|
+
import { DBAccordionProps } from "./model";
|
|
3
|
+
declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<DBAccordionProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DBAccordionProps> & Readonly<{}>, {
|
|
4
|
+
name: string;
|
|
5
|
+
variant: "card" | "divider";
|
|
6
|
+
children: any;
|
|
7
|
+
className: string;
|
|
8
|
+
id: string;
|
|
9
|
+
behavior: "multiple" | "single";
|
|
10
|
+
initOpenIndex: number[];
|
|
11
|
+
items: string | DBAccordionItemDefaultProps[];
|
|
12
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {
|
|
13
|
+
_ref: HTMLUListElement;
|
|
14
|
+
}, HTMLUListElement>, {
|
|
15
|
+
default?(_: {}): any;
|
|
16
|
+
}>;
|
|
17
|
+
export default _default;
|
|
18
|
+
type __VLS_WithTemplateSlots<T, S> = T & {
|
|
19
|
+
new (): {
|
|
20
|
+
$slots: S;
|
|
21
|
+
};
|
|
22
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as DBAccordion } from './accordion.vue';
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import { GlobalProps, GlobalState, InitializedState } from '../../shared/model';
|
|
2
|
+
import { DBAccordionItemDefaultProps } from '../accordion-item/model';
|
|
3
|
+
export declare const AccordionVariantList: readonly ["divider", "card"];
|
|
4
|
+
export type AccordionVariantType = (typeof AccordionVariantList)[number];
|
|
5
|
+
export declare const AccordionBehaviorList: readonly ["multiple", "single"];
|
|
6
|
+
export type AccordionBehaviorType = (typeof AccordionBehaviorList)[number];
|
|
7
|
+
export type DBAccordionDefaultProps = {
|
|
8
|
+
/**
|
|
9
|
+
* To allow multiple items open at the same time or only 1 item
|
|
10
|
+
*/
|
|
11
|
+
behavior?: AccordionBehaviorType;
|
|
12
|
+
/**
|
|
13
|
+
* The index of items which should be open when loading the accordion
|
|
14
|
+
*/
|
|
15
|
+
initOpenIndex?: number[];
|
|
16
|
+
/**
|
|
17
|
+
* Alternative to pass in a simple representation of accordion items
|
|
18
|
+
*/
|
|
19
|
+
items?: DBAccordionItemDefaultProps[] | string;
|
|
20
|
+
/**
|
|
21
|
+
* Set details name for exclusive accordions, see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details#name
|
|
22
|
+
*/
|
|
23
|
+
name?: string;
|
|
24
|
+
/**
|
|
25
|
+
* Informs about the changes in the internal state, which item is open
|
|
26
|
+
*/
|
|
27
|
+
onChange?: (openAccordionItemIds: string[]) => void;
|
|
28
|
+
/**
|
|
29
|
+
* Defines the display of the accordion and the items:
|
|
30
|
+
* "divider": with a dividing line between the items
|
|
31
|
+
* "card": w/o dividing line, but items are shown in the card variant
|
|
32
|
+
*/
|
|
33
|
+
variant?: AccordionVariantType;
|
|
34
|
+
};
|
|
35
|
+
export type DBAccordionProps = DBAccordionDefaultProps & GlobalProps;
|
|
36
|
+
export type DBAccordionDefaultState = {
|
|
37
|
+
_initOpenIndexDone: boolean;
|
|
38
|
+
_name: string;
|
|
39
|
+
convertItems: (items?: unknown[] | string) => DBAccordionItemDefaultProps[];
|
|
40
|
+
};
|
|
41
|
+
export type DBAccordionState = DBAccordionDefaultState & GlobalState & InitializedState;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { DBAccordionItemProps } from "./model";
|
|
2
|
+
declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<DBAccordionItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DBAccordionItemProps> & Readonly<{}>, {
|
|
3
|
+
disabled: boolean;
|
|
4
|
+
children: any;
|
|
5
|
+
className: string;
|
|
6
|
+
id: string;
|
|
7
|
+
text: string;
|
|
8
|
+
onToggle: (open: boolean) => void;
|
|
9
|
+
defaultOpen: boolean;
|
|
10
|
+
headlinePlain: string;
|
|
11
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {
|
|
12
|
+
_ref: HTMLDetailsElement;
|
|
13
|
+
}, HTMLLIElement>, {
|
|
14
|
+
headline?(_: {}): any;
|
|
15
|
+
default?(_: {}): any;
|
|
16
|
+
}>;
|
|
17
|
+
export default _default;
|
|
18
|
+
type __VLS_WithTemplateSlots<T, S> = T & {
|
|
19
|
+
new (): {
|
|
20
|
+
$slots: S;
|
|
21
|
+
};
|
|
22
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as DBAccordionItem } from './accordion-item.vue';
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { GlobalProps, GlobalState, TextProps, ToggleEventProps, ToggleEventState } from '../../shared/model';
|
|
2
|
+
export type DBAccordionItemDefaultProps = {
|
|
3
|
+
/**
|
|
4
|
+
* Initial state for the accordion item
|
|
5
|
+
*/
|
|
6
|
+
defaultOpen?: boolean;
|
|
7
|
+
/**
|
|
8
|
+
* The disabled attribute can be set to keep a user from clicking on the element.
|
|
9
|
+
*/
|
|
10
|
+
disabled?: boolean;
|
|
11
|
+
/**
|
|
12
|
+
* Title of the accordion-item as slot
|
|
13
|
+
*/
|
|
14
|
+
headline?: any;
|
|
15
|
+
/**
|
|
16
|
+
* Title of the accordion-item as plain text
|
|
17
|
+
*/
|
|
18
|
+
headlinePlain?: string;
|
|
19
|
+
} & TextProps;
|
|
20
|
+
export type DBAccordionItemProps = DBAccordionItemDefaultProps & GlobalProps & ToggleEventProps;
|
|
21
|
+
export type DBAccordionItemDefaultState = {
|
|
22
|
+
_open: boolean;
|
|
23
|
+
};
|
|
24
|
+
export type DBAccordionItemState = DBAccordionItemDefaultState & GlobalState & ToggleEventState<HTMLElement>;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { DBBadgeProps } from "./model";
|
|
2
|
+
declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<DBBadgeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DBBadgeProps> & Readonly<{}>, {
|
|
3
|
+
label: string;
|
|
4
|
+
children: any;
|
|
5
|
+
className: string;
|
|
6
|
+
id: string;
|
|
7
|
+
size: "medium" | "small";
|
|
8
|
+
text: string;
|
|
9
|
+
semantic: "adaptive" | "neutral" | "critical" | "informational" | "warning" | "successful";
|
|
10
|
+
placement: "inline" | "corner-top-left" | "corner-top-right" | "corner-center-left" | "corner-center-right" | "corner-bottom-left" | "corner-bottom-right";
|
|
11
|
+
emphasis: "weak" | "strong" | "origin";
|
|
12
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {
|
|
13
|
+
_ref: HTMLSpanElement;
|
|
14
|
+
}, HTMLSpanElement>, {
|
|
15
|
+
default?(_: {}): any;
|
|
16
|
+
}>;
|
|
17
|
+
export default _default;
|
|
18
|
+
type __VLS_WithTemplateSlots<T, S> = T & {
|
|
19
|
+
new (): {
|
|
20
|
+
$slots: S;
|
|
21
|
+
};
|
|
22
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as DBBadge } from './badge.vue';
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { GlobalProps, GlobalState, InitializedState, SemanticProps, SizeProps, TagEmphasisProps, TextProps } from '../../shared/model';
|
|
2
|
+
export declare const BadgePlacementList: readonly ["inline", "corner-top-left", "corner-top-right", "corner-center-left", "corner-center-right", "corner-bottom-left", "corner-bottom-right"];
|
|
3
|
+
export type BadgePlacementType = (typeof BadgePlacementList)[number];
|
|
4
|
+
export type DBBadgeDefaultProps = {
|
|
5
|
+
/**
|
|
6
|
+
* The `placement` attributes `corner-*` values change the position to absolute and adds a transform based on the placement.
|
|
7
|
+
*/
|
|
8
|
+
placement?: BadgePlacementType;
|
|
9
|
+
/**
|
|
10
|
+
* Describes the badge for a11y if you use placement attribute with `corner-*`
|
|
11
|
+
*/
|
|
12
|
+
label?: string;
|
|
13
|
+
};
|
|
14
|
+
export type DBBadgeProps = DBBadgeDefaultProps & GlobalProps & SemanticProps & SizeProps & TagEmphasisProps & TextProps;
|
|
15
|
+
export type DBBadgeDefaultState = {};
|
|
16
|
+
export type DBBadgeState = DBBadgeDefaultState & GlobalState & InitializedState;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { DBBrandProps } from "./model";
|
|
2
|
+
declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<DBBrandProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DBBrandProps> & Readonly<{}>, {
|
|
3
|
+
children: any;
|
|
4
|
+
className: string;
|
|
5
|
+
id: string;
|
|
6
|
+
icon: import("@db-ux/core-foundations").BaseIconTypes | import("@db-ux/core-foundations").LooseAutocomplete;
|
|
7
|
+
showIcon: boolean;
|
|
8
|
+
text: string;
|
|
9
|
+
hideLogo: boolean;
|
|
10
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {
|
|
11
|
+
_ref: HTMLDivElement;
|
|
12
|
+
}, HTMLDivElement>, {
|
|
13
|
+
default?(_: {}): any;
|
|
14
|
+
}>;
|
|
15
|
+
export default _default;
|
|
16
|
+
type __VLS_WithTemplateSlots<T, S> = T & {
|
|
17
|
+
new (): {
|
|
18
|
+
$slots: S;
|
|
19
|
+
};
|
|
20
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as DBBrand } from './brand.vue';
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { GlobalProps, GlobalState, IconProps, ShowIconProps, TextProps } from '../../shared/model';
|
|
2
|
+
export type DBBrandDefaultProps = {
|
|
3
|
+
/**
|
|
4
|
+
* @deprecated: Disable the default logo svg to pass in a custom `img`
|
|
5
|
+
*/
|
|
6
|
+
hideLogo?: boolean;
|
|
7
|
+
};
|
|
8
|
+
export type DBBrandProps = DBBrandDefaultProps & GlobalProps & IconProps & ShowIconProps & TextProps;
|
|
9
|
+
export type DBBrandDefaultState = {};
|
|
10
|
+
export type DBBrandState = DBBrandDefaultState & GlobalState;
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import type { DBButtonProps } from "./model";
|
|
2
|
+
declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<DBButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DBButtonProps> & Readonly<{}>, {
|
|
3
|
+
name: string;
|
|
4
|
+
ariaexpanded: boolean;
|
|
5
|
+
ariapressed: boolean;
|
|
6
|
+
disabled: boolean;
|
|
7
|
+
noText: boolean;
|
|
8
|
+
label: string;
|
|
9
|
+
type: "button" | "reset" | "submit";
|
|
10
|
+
value: string;
|
|
11
|
+
state: "loading";
|
|
12
|
+
variant: string;
|
|
13
|
+
children: any;
|
|
14
|
+
className: string;
|
|
15
|
+
describedbyid: string;
|
|
16
|
+
id: string;
|
|
17
|
+
onClick: (event: MouseEvent) => void;
|
|
18
|
+
icon: import("@db-ux/core-foundations").BaseIconTypes | import("@db-ux/core-foundations").LooseAutocomplete;
|
|
19
|
+
width: "full" | "auto";
|
|
20
|
+
size: "medium" | "small";
|
|
21
|
+
showIcon: boolean;
|
|
22
|
+
text: string;
|
|
23
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {
|
|
24
|
+
_ref: HTMLButtonElement;
|
|
25
|
+
}, HTMLButtonElement>, {
|
|
26
|
+
default?(_: {}): any;
|
|
27
|
+
}>;
|
|
28
|
+
export default _default;
|
|
29
|
+
type __VLS_WithTemplateSlots<T, S> = T & {
|
|
30
|
+
new (): {
|
|
31
|
+
$slots: S;
|
|
32
|
+
};
|
|
33
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as DBButton } from './button.vue';
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
import { ClickEventProps, ClickEventState, GlobalProps, GlobalState, IconProps, ShowIconProps, SizeProps, TextProps, WidthProps } from '../../shared/model';
|
|
2
|
+
export declare const ButtonVariantList: readonly ["outlined", "brand", "filled", "ghost"];
|
|
3
|
+
export type ButtonVariantType = (typeof ButtonVariantList)[number];
|
|
4
|
+
export declare const ButtonTypeList: readonly ["button", "reset", "submit"];
|
|
5
|
+
export type ButtonTypeType = (typeof ButtonTypeList)[number];
|
|
6
|
+
export declare const ButtonStateList: readonly ["loading"];
|
|
7
|
+
export type ButtonStateType = (typeof ButtonStateList)[number];
|
|
8
|
+
export type DBButtonDefaultProps = {
|
|
9
|
+
/**
|
|
10
|
+
* If the button controls a grouping of other elements, the ariaexpanded state [indicates whether the controlled grouping is currently expanded or collapsed](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded).
|
|
11
|
+
*/
|
|
12
|
+
ariaexpanded?: boolean;
|
|
13
|
+
/**
|
|
14
|
+
* Defines the button as a toggle button. The value of [ariapressed describes the state of the button](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-pressed).
|
|
15
|
+
*/
|
|
16
|
+
ariapressed?: boolean;
|
|
17
|
+
/**
|
|
18
|
+
* The disabled attribute can be set to [keep a user from clicking on the button](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled).
|
|
19
|
+
*/
|
|
20
|
+
disabled?: boolean;
|
|
21
|
+
/**
|
|
22
|
+
* Define the text next to the icon specified via the icon Property to get hidden.
|
|
23
|
+
*/
|
|
24
|
+
noText?: boolean;
|
|
25
|
+
/**
|
|
26
|
+
* The label represents the [aria-label attributes](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) value of the button
|
|
27
|
+
*/
|
|
28
|
+
label?: string;
|
|
29
|
+
/**
|
|
30
|
+
* The name attribute specifies a [name attributes value](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#name) for the button.
|
|
31
|
+
*/
|
|
32
|
+
name?: string;
|
|
33
|
+
/**
|
|
34
|
+
* The type attribute specifies the [type of button](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type).
|
|
35
|
+
*/
|
|
36
|
+
type?: ButtonTypeType;
|
|
37
|
+
/**
|
|
38
|
+
* The value attribute specifies an initial [value for the button](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#value).
|
|
39
|
+
*/
|
|
40
|
+
value?: string;
|
|
41
|
+
/**
|
|
42
|
+
* Show loading progress inside button.
|
|
43
|
+
*/
|
|
44
|
+
state?: ButtonStateType;
|
|
45
|
+
/**
|
|
46
|
+
* Variant of the button. Use only 1 primary button on a page as CTA otherwise use one of the adaptive buttons.
|
|
47
|
+
*/
|
|
48
|
+
variant?: ButtonVariantType | string;
|
|
49
|
+
};
|
|
50
|
+
export type DBButtonProps = DBButtonDefaultProps & GlobalProps & ClickEventProps<HTMLButtonElement> & IconProps & WidthProps & SizeProps & ShowIconProps & TextProps;
|
|
51
|
+
export type DBButtonDefaultState = {};
|
|
52
|
+
export type DBButtonState = DBButtonDefaultState & GlobalState & ClickEventState<HTMLButtonElement>;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import type { DBCardProps } from "./model";
|
|
2
|
+
declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<DBCardProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DBCardProps> & Readonly<{}>, {
|
|
3
|
+
children: any;
|
|
4
|
+
className: string;
|
|
5
|
+
id: string;
|
|
6
|
+
onClick: (event: MouseEvent) => void;
|
|
7
|
+
behavior: "static" | "interactive";
|
|
8
|
+
elevationLevel: "1" | "2" | "3";
|
|
9
|
+
spacing: "medium" | "small" | "large" | "none";
|
|
10
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {
|
|
11
|
+
_ref: HTMLDivElement;
|
|
12
|
+
}, HTMLDivElement>, {
|
|
13
|
+
default?(_: {}): any;
|
|
14
|
+
}>;
|
|
15
|
+
export default _default;
|
|
16
|
+
type __VLS_WithTemplateSlots<T, S> = T & {
|
|
17
|
+
new (): {
|
|
18
|
+
$slots: S;
|
|
19
|
+
};
|
|
20
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as DBCard } from './card.vue';
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { ClickEventProps, ClickEventState, GlobalProps, GlobalState, SpacingProps } from '../../shared/model';
|
|
2
|
+
export declare const CardBehaviorList: readonly ["static", "interactive"];
|
|
3
|
+
export type CardBehaviorType = (typeof CardBehaviorList)[number];
|
|
4
|
+
export declare const CardElevationLevelList: readonly ["1", "2", "3"];
|
|
5
|
+
export type CardElevationLevelType = (typeof CardElevationLevelList)[number];
|
|
6
|
+
export type DBCardDefaultProps = {
|
|
7
|
+
/**
|
|
8
|
+
* Makes the card interactive
|
|
9
|
+
*/
|
|
10
|
+
behavior?: CardBehaviorType;
|
|
11
|
+
/**
|
|
12
|
+
* Changes the elevation of the card which is equal to `basic-background-level`
|
|
13
|
+
*/
|
|
14
|
+
elevationLevel?: CardElevationLevelType;
|
|
15
|
+
};
|
|
16
|
+
export type DBCardProps = DBCardDefaultProps & GlobalProps & ClickEventProps<HTMLElement> & SpacingProps;
|
|
17
|
+
export type DBCardDefaultState = {};
|
|
18
|
+
export type DBCardState = DBCardDefaultState & GlobalState & ClickEventState<HTMLElement>;
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import { DBCheckboxProps } from "./model";
|
|
2
|
+
declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<DBCheckboxProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
3
|
+
"update:checked": (...args: any[]) => void;
|
|
4
|
+
}, string, import("vue").PublicProps, Readonly<DBCheckboxProps> & Readonly<{
|
|
5
|
+
"onUpdate:checked"?: ((...args: any[]) => any) | undefined;
|
|
6
|
+
}>, {
|
|
7
|
+
name: string;
|
|
8
|
+
disabled: boolean;
|
|
9
|
+
label: string;
|
|
10
|
+
value: any;
|
|
11
|
+
children: any;
|
|
12
|
+
className: string;
|
|
13
|
+
id: string;
|
|
14
|
+
size: "medium" | "small";
|
|
15
|
+
blur: (event: FocusEvent) => void;
|
|
16
|
+
change: (event: Event) => void;
|
|
17
|
+
focus: (event: FocusEvent) => void;
|
|
18
|
+
onFocus: (event: FocusEvent) => void;
|
|
19
|
+
onBlur: (event: FocusEvent) => void;
|
|
20
|
+
onChange: (event: Event) => void;
|
|
21
|
+
indeterminate: boolean;
|
|
22
|
+
validation: "invalid" | "valid" | "no-validation";
|
|
23
|
+
required: boolean;
|
|
24
|
+
showLabel: boolean;
|
|
25
|
+
checked: boolean;
|
|
26
|
+
message: string;
|
|
27
|
+
validMessage: string;
|
|
28
|
+
invalidMessage: string;
|
|
29
|
+
messageIcon: import("@db-ux/core-foundations").BaseIconTypes | import("@db-ux/core-foundations").LooseAutocomplete;
|
|
30
|
+
showMessage: boolean;
|
|
31
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {
|
|
32
|
+
_ref: HTMLInputElement;
|
|
33
|
+
}, HTMLDivElement>, {
|
|
34
|
+
default?(_: {}): any;
|
|
35
|
+
}>;
|
|
36
|
+
export default _default;
|
|
37
|
+
type __VLS_WithTemplateSlots<T, S> = T & {
|
|
38
|
+
new (): {
|
|
39
|
+
$slots: S;
|
|
40
|
+
};
|
|
41
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as DBCheckbox } from './checkbox.vue';
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { ChangeEventProps, ChangeEventState, FocusEventProps, FocusEventState, FormCheckProps, FormMessageProps, FormProps, FormState, GlobalProps, GlobalState, InitializedState, SizeProps } from '../../shared/model';
|
|
2
|
+
export type DBCheckboxDefaultProps = {
|
|
3
|
+
/**
|
|
4
|
+
* Define an [indeterminate](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#indeterminate) state of a checkbox
|
|
5
|
+
*/
|
|
6
|
+
indeterminate?: boolean;
|
|
7
|
+
};
|
|
8
|
+
export type DBCheckboxProps = DBCheckboxDefaultProps & GlobalProps & ChangeEventProps<HTMLInputElement> & FocusEventProps<HTMLInputElement> & FormProps & FormCheckProps & FormMessageProps & SizeProps;
|
|
9
|
+
export type DBCheckboxDefaultState = {};
|
|
10
|
+
export type DBCheckboxState = DBCheckboxDefaultState & GlobalState & ChangeEventState<HTMLInputElement> & FocusEventState<HTMLInputElement> & FormState & InitializedState;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { DBDividerProps } from "./model";
|
|
2
|
+
declare const _default: import("vue").DefineComponent<DBDividerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DBDividerProps> & Readonly<{}>, {
|
|
3
|
+
variant: "horizontal" | "vertical";
|
|
4
|
+
className: string;
|
|
5
|
+
id: string;
|
|
6
|
+
width: "full" | "auto";
|
|
7
|
+
emphasis: "weak" | "strong";
|
|
8
|
+
margin: "none";
|
|
9
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {
|
|
10
|
+
_ref: HTMLDivElement;
|
|
11
|
+
}, HTMLDivElement>;
|
|
12
|
+
export default _default;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as DBDivider } from './divider.vue';
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { EmphasisProps, GlobalProps, GlobalState, MarginProps, WidthProps } from '../../shared/model';
|
|
2
|
+
export declare const DividerMarginList: readonly ["none", "_"];
|
|
3
|
+
export type DividerMarginType = (typeof DividerMarginList)[number];
|
|
4
|
+
export declare const DividerVariantList: readonly ["horizontal", "vertical"];
|
|
5
|
+
export type DividerVariantType = (typeof DividerVariantList)[number];
|
|
6
|
+
export type DBDividerDefaultProps = {
|
|
7
|
+
/**
|
|
8
|
+
* Removes the margin of the divider.
|
|
9
|
+
*/
|
|
10
|
+
margin?: DividerMarginType;
|
|
11
|
+
/**
|
|
12
|
+
* Changes the orientation of the divider.
|
|
13
|
+
*/
|
|
14
|
+
variant?: DividerVariantType;
|
|
15
|
+
};
|
|
16
|
+
export type DBDividerProps = DBDividerDefaultProps & GlobalProps & EmphasisProps & MarginProps & WidthProps;
|
|
17
|
+
export type DBDividerDefaultState = {};
|
|
18
|
+
export type DBDividerState = DBDividerDefaultState & GlobalState;
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { DBDrawerProps } from "./model";
|
|
2
|
+
declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<DBDrawerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DBDrawerProps> & Readonly<{}>, {
|
|
3
|
+
variant: "modal" | "inside";
|
|
4
|
+
children: any;
|
|
5
|
+
className: string;
|
|
6
|
+
id: string;
|
|
7
|
+
width: "full" | "auto";
|
|
8
|
+
onClose: (event?: any) => void;
|
|
9
|
+
closeButtonId: string;
|
|
10
|
+
closeButtonText: string;
|
|
11
|
+
spacing: "medium" | "small" | "large" | "none";
|
|
12
|
+
backdrop: "none" | "weak" | "strong" | "invisible";
|
|
13
|
+
direction: "left" | "right" | "up" | "down";
|
|
14
|
+
open: boolean;
|
|
15
|
+
rounded: boolean;
|
|
16
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {
|
|
17
|
+
_ref: HTMLDialogElement;
|
|
18
|
+
dialogContainerRef: HTMLElement;
|
|
19
|
+
}, HTMLDialogElement>, {
|
|
20
|
+
'drawer-header'?(_: {}): any;
|
|
21
|
+
default?(_: {}): any;
|
|
22
|
+
}>;
|
|
23
|
+
export default _default;
|
|
24
|
+
type __VLS_WithTemplateSlots<T, S> = T & {
|
|
25
|
+
new (): {
|
|
26
|
+
$slots: S;
|
|
27
|
+
};
|
|
28
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as DBDrawer } from './drawer.vue';
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import { CloseEventProps, CloseEventState, GlobalProps, GlobalState, InnerCloseButtonProps, SpacingProps, WidthProps } from '../../shared/model';
|
|
2
|
+
export declare const DrawerBackdropList: readonly ["none", "strong", "weak", "invisible"];
|
|
3
|
+
export type DrawerBackdropType = (typeof DrawerBackdropList)[number];
|
|
4
|
+
export declare const DrawerDirectionList: readonly ["left", "right", "up", "down"];
|
|
5
|
+
export type DrawerDirectionType = (typeof DrawerDirectionList)[number];
|
|
6
|
+
export declare const DrawerVariantList: readonly ["modal", "inside"];
|
|
7
|
+
export type DrawerVariantType = (typeof DrawerVariantList)[number];
|
|
8
|
+
export type DBDrawerDefaultProps = {
|
|
9
|
+
/**
|
|
10
|
+
* The backdrop attribute changes the opacity of the backdrop.
|
|
11
|
+
* The backdrop 'none' will use `dialog.show()` instead of `dialog.showModal()`
|
|
12
|
+
*/
|
|
13
|
+
backdrop?: DrawerBackdropType;
|
|
14
|
+
/**
|
|
15
|
+
* The direction attribute changes the position & animation of the drawer.
|
|
16
|
+
* E.g. "left" slides from left screen border to the right.
|
|
17
|
+
*/
|
|
18
|
+
direction?: DrawerDirectionType;
|
|
19
|
+
/**
|
|
20
|
+
* Slot for changing the header of the drawer.
|
|
21
|
+
*/
|
|
22
|
+
drawerHeader?: any;
|
|
23
|
+
/**
|
|
24
|
+
* The open attribute opens or closes the drawer based on the state.
|
|
25
|
+
*/
|
|
26
|
+
open?: boolean;
|
|
27
|
+
/**
|
|
28
|
+
* The rounded attribute changes the border radius of the corners on the "end" of the drawer.
|
|
29
|
+
* The "end" depends on which direction you use.
|
|
30
|
+
*/
|
|
31
|
+
rounded?: boolean;
|
|
32
|
+
/**
|
|
33
|
+
* Set the variant modal|inside. Defaults to modal.
|
|
34
|
+
*/
|
|
35
|
+
variant?: DrawerVariantType;
|
|
36
|
+
};
|
|
37
|
+
export type DBDrawerProps = DBDrawerDefaultProps & GlobalProps & CloseEventProps & InnerCloseButtonProps & WidthProps & SpacingProps;
|
|
38
|
+
export type DBDrawerDefaultState = {
|
|
39
|
+
handleDialogOpen: () => void;
|
|
40
|
+
};
|
|
41
|
+
export type DBDrawerState = DBDrawerDefaultState & GlobalState & CloseEventState;
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { DBHeaderProps } from "./model";
|
|
2
|
+
declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<DBHeaderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DBHeaderProps> & Readonly<{}>, {
|
|
3
|
+
children: any;
|
|
4
|
+
className: string;
|
|
5
|
+
id: string;
|
|
6
|
+
width: "medium" | "small" | "large" | "full";
|
|
7
|
+
drawerOpen: boolean;
|
|
8
|
+
forceMobile: boolean;
|
|
9
|
+
burgerMenuLabel: string;
|
|
10
|
+
onToggle: (open: boolean) => void;
|
|
11
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {
|
|
12
|
+
_ref: HTMLElement;
|
|
13
|
+
}, HTMLElement>, {
|
|
14
|
+
default?(_: {}): any;
|
|
15
|
+
default?(_: {}): any;
|
|
16
|
+
'meta-navigation'?(_: {}): any;
|
|
17
|
+
'meta-navigation'?(_: {}): any;
|
|
18
|
+
'secondary-action'?(_: {}): any;
|
|
19
|
+
'secondary-action'?(_: {}): any;
|
|
20
|
+
brand?(_: {}): any;
|
|
21
|
+
'primary-action'?(_: {}): any;
|
|
22
|
+
}>;
|
|
23
|
+
export default _default;
|
|
24
|
+
type __VLS_WithTemplateSlots<T, S> = T & {
|
|
25
|
+
new (): {
|
|
26
|
+
$slots: S;
|
|
27
|
+
};
|
|
28
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as DBHeader } from './header.vue';
|