@db-ux/v-core-components 4.5.0 → 4.5.1
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 +14 -0
- package/agent/.gitkeep +0 -0
- package/dist/db-ux.es.js +112 -111
- package/dist/db-ux.umd.js +1 -1
- package/package.json +3 -3
- package/agent/Accordion.md +0 -42
- package/agent/AccordionItem.md +0 -31
- package/agent/Badge.md +0 -38
- package/agent/Brand.md +0 -19
- package/agent/Button.md +0 -47
- package/agent/Card.md +0 -29
- package/agent/Checkbox.md +0 -39
- package/agent/CustomSelect.md +0 -79
- package/agent/Divider.md +0 -27
- package/agent/Drawer.md +0 -91
- package/agent/Header.md +0 -35
- package/agent/Icon.md +0 -26
- package/agent/Infotext.md +0 -29
- package/agent/Input.md +0 -48
- package/agent/Link.md +0 -42
- package/agent/Navigation.md +0 -23
- package/agent/NavigationItem.md +0 -29
- package/agent/Notification.md +0 -40
- package/agent/Page.md +0 -33
- package/agent/Popover.md +0 -50
- package/agent/Radio.md +0 -29
- package/agent/Section.md +0 -27
- package/agent/Select.md +0 -70
- package/agent/Stack.md +0 -41
- package/agent/Switch.md +0 -36
- package/agent/TabItem.md +0 -29
- package/agent/Tabs.md +0 -55
- package/agent/Tag.md +0 -38
- package/agent/Textarea.md +0 -43
- package/agent/Tooltip.md +0 -48
- package/agent/_instructions.md +0 -31
package/agent/Navigation.md
DELETED
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
# Navigation Examples (vue)
|
|
4
|
-
|
|
5
|
-
```vue
|
|
6
|
-
<template>
|
|
7
|
-
<h1>DBNavigation Documentation Examples</h1>
|
|
8
|
-
<h2>1. Default Navigation</h2>
|
|
9
|
-
<DBNavigation
|
|
10
|
-
><DBNavigationItem><a href="#">Navi-Item 1</a></DBNavigationItem
|
|
11
|
-
><DBNavigationItem icon="x_placeholder"
|
|
12
|
-
><a href="#">Navi-Item 2</a></DBNavigationItem
|
|
13
|
-
><DBNavigationItem :disabled="true"
|
|
14
|
-
><a href="#">Navi-Item 3</a></DBNavigationItem
|
|
15
|
-
></DBNavigation
|
|
16
|
-
>
|
|
17
|
-
</template>
|
|
18
|
-
|
|
19
|
-
<script setup lang="ts">
|
|
20
|
-
import { DBNavigationItem } from "@db-ux/v-v-core-components";
|
|
21
|
-
import { DBNavigation } from "@db-ux/v-v-core-components";
|
|
22
|
-
</script>
|
|
23
|
-
```
|
package/agent/NavigationItem.md
DELETED
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
# NavigationItem Examples (vue)
|
|
4
|
-
|
|
5
|
-
```vue
|
|
6
|
-
<template>
|
|
7
|
-
<h1>DBNavigationItem Documentation Examples</h1>
|
|
8
|
-
<h2>1. Default Navigation Item</h2>
|
|
9
|
-
<DBNavigationItem>Default Navigation Item</DBNavigationItem>
|
|
10
|
-
<h2>2. Active State</h2>
|
|
11
|
-
<DBNavigationItem :active="true">Active Navigation Item</DBNavigationItem>
|
|
12
|
-
<h2>3. Disabled State</h2>
|
|
13
|
-
<DBNavigationItem :disabled="true">
|
|
14
|
-
Disabled Navigation Item
|
|
15
|
-
</DBNavigationItem>
|
|
16
|
-
<h2>4. Sub-Navigation</h2>
|
|
17
|
-
<DBNavigationItem :subNavigation="<div>Sub Navigation Content</div>">
|
|
18
|
-
Navigation Item with Sub-Navigation
|
|
19
|
-
</DBNavigationItem>
|
|
20
|
-
<h2>5. Icon Support</h2>
|
|
21
|
-
<DBNavigationItem icon="user"> Navigation Item with Icon </DBNavigationItem>
|
|
22
|
-
<h2>6. Custom Class</h2>
|
|
23
|
-
<DBNavigationItem> Navigation Item with Custom Class </DBNavigationItem>
|
|
24
|
-
</template>
|
|
25
|
-
|
|
26
|
-
<script setup lang="ts">
|
|
27
|
-
import { DBNavigationItem } from "@db-ux/v-v-core-components";
|
|
28
|
-
</script>
|
|
29
|
-
```
|
package/agent/Notification.md
DELETED
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
# Notification Examples (vue)
|
|
4
|
-
|
|
5
|
-
```vue
|
|
6
|
-
<template>
|
|
7
|
-
<h1>DBNotification Documentation Examples</h1>
|
|
8
|
-
<h2>1. Default Notification</h2>
|
|
9
|
-
<DBNotification>Default Notification</DBNotification>
|
|
10
|
-
<h2>2. Semantic Variants</h2>
|
|
11
|
-
<DBNotification semantic="adaptive">Adaptive</DBNotification>
|
|
12
|
-
<DBNotification semantic="neutral">Neutral</DBNotification>
|
|
13
|
-
<DBNotification semantic="critical">Critical</DBNotification>
|
|
14
|
-
<DBNotification semantic="informational"> Informational </DBNotification>
|
|
15
|
-
<DBNotification semantic="warning">Warning</DBNotification>
|
|
16
|
-
<DBNotification semantic="successful">Successful</DBNotification>
|
|
17
|
-
<h2>3. Variants</h2>
|
|
18
|
-
<DBNotification variant="docked">Docked</DBNotification>
|
|
19
|
-
<DBNotification variant="standalone">Standalone</DBNotification>
|
|
20
|
-
<DBNotification variant="overlay">Overlay</DBNotification>
|
|
21
|
-
<h2>4. Closeable</h2>
|
|
22
|
-
<DBNotification :closeable="true">Closeable Notification</DBNotification>
|
|
23
|
-
<h2>5. Headline</h2>
|
|
24
|
-
<DBNotification headline="Important Update">
|
|
25
|
-
Notification with Headline
|
|
26
|
-
</DBNotification>
|
|
27
|
-
<h2>6. Timestamp</h2>
|
|
28
|
-
<DBNotification timestamp="10:30 AM">
|
|
29
|
-
Notification with Timestamp
|
|
30
|
-
</DBNotification>
|
|
31
|
-
<h2>7. Icon Support</h2>
|
|
32
|
-
<DBNotification icon="info">Notification with Icon</DBNotification>
|
|
33
|
-
<h2>8. Custom Class</h2>
|
|
34
|
-
<DBNotification> Custom Class </DBNotification>
|
|
35
|
-
</template>
|
|
36
|
-
|
|
37
|
-
<script setup lang="ts">
|
|
38
|
-
import { DBNotification } from "@db-ux/v-v-core-components";
|
|
39
|
-
</script>
|
|
40
|
-
```
|
package/agent/Page.md
DELETED
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
# Page Examples (vue)
|
|
4
|
-
|
|
5
|
-
```vue
|
|
6
|
-
<template>
|
|
7
|
-
<h1>DBPage Documentation Examples</h1>
|
|
8
|
-
<h2>1. Default Page</h2>
|
|
9
|
-
<DBPage><template v-slot:header><DBHeader>Header Content</DBHeader></template>
|
|
10
|
-
Main Page</DBPage>
|
|
11
|
-
<h2>2. Document Overflow Variants</h2>
|
|
12
|
-
<DBPage documentOverflow="hidden">
|
|
13
|
-
<template v-slot:header><DBHeader>Header Content</DBHeader></template>
|
|
14
|
-
Main Page with Hidden Overflow
|
|
15
|
-
</DBPage>
|
|
16
|
-
<DBPage documentOverflow="auto">
|
|
17
|
-
<template v-slot:header><DBHeader>Header Content</DBHeader></template>
|
|
18
|
-
Main Page with Auto Overflow
|
|
19
|
-
</DBPage>
|
|
20
|
-
<h2>3. Fade-In Effect</h2>
|
|
21
|
-
<DBPage :fadeIn="true"><template v-slot:header><DBHeader>Header Content</DBHeader></template>
|
|
22
|
-
Main Page with Fade-In</DBPage>
|
|
23
|
-
<h2>4. Variant Examples</h2>
|
|
24
|
-
<DBPage variant="auto"><template v-slot:header><DBHeader>Header Content</DBHeader></template>
|
|
25
|
-
Page with Auto Variant</DBPage>
|
|
26
|
-
<DBPage variant="fixed"><template v-slot:header><DBHeader>Header Content</DBHeader></template>
|
|
27
|
-
Page with Fixed Variant</DBPage>
|
|
28
|
-
</template>
|
|
29
|
-
|
|
30
|
-
<script setup lang="ts">
|
|
31
|
-
import { DBPage } from "@db-ux/v-v-core-components";
|
|
32
|
-
</script>
|
|
33
|
-
```
|
package/agent/Popover.md
DELETED
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
# Popover Examples (vue)
|
|
4
|
-
|
|
5
|
-
```vue
|
|
6
|
-
<template>
|
|
7
|
-
<h1>DBPopover Documentation Examples</h1>
|
|
8
|
-
<h2>1. Default Popover</h2>
|
|
9
|
-
<DBPopover :trigger="<DBButton>Hover on me to open Popover</DBButton>">
|
|
10
|
-
Use any HTML code here like e.g. a <code>button</code>:
|
|
11
|
-
<button type="button">Test</button></DBPopover
|
|
12
|
-
>
|
|
13
|
-
<h2>2. Placement Variants</h2>
|
|
14
|
-
<DBPopover placement="top" :trigger="<DBButton>Top Placement</DBButton>">
|
|
15
|
-
Popover with top placement
|
|
16
|
-
</DBPopover>
|
|
17
|
-
<DBPopover
|
|
18
|
-
placement="bottom"
|
|
19
|
-
:trigger="<DBButton>Bottom Placement</DBButton>"
|
|
20
|
-
>
|
|
21
|
-
Popover with bottom placement
|
|
22
|
-
</DBPopover>
|
|
23
|
-
<h2>3. Delay Variants</h2>
|
|
24
|
-
<DBPopover delay="fast" :trigger="<DBButton>Fast Delay</DBButton>">
|
|
25
|
-
Popover with fast delay
|
|
26
|
-
</DBPopover>
|
|
27
|
-
<DBPopover delay="slow" :trigger="<DBButton>Slow Delay</DBButton>">
|
|
28
|
-
Popover with slow delay
|
|
29
|
-
</DBPopover>
|
|
30
|
-
<h2>4. Animation</h2>
|
|
31
|
-
<DBPopover :trigger="<DBButton>With Animation</DBButton>" :animation="true">
|
|
32
|
-
Popover with animation
|
|
33
|
-
</DBPopover>
|
|
34
|
-
<DBPopover :trigger="<DBButton>No Animation</DBButton>" :animation="false">
|
|
35
|
-
Popover without animation
|
|
36
|
-
</DBPopover>
|
|
37
|
-
<h2>5. Width Variants</h2>
|
|
38
|
-
<DBPopover width="auto" :trigger="<DBButton>Auto Width</DBButton>">
|
|
39
|
-
Popover with auto width
|
|
40
|
-
</DBPopover>
|
|
41
|
-
<DBPopover width="fixed" :trigger="<DBButton>Fixed Width</DBButton>">
|
|
42
|
-
Popover with fixed width
|
|
43
|
-
</DBPopover>
|
|
44
|
-
</template>
|
|
45
|
-
|
|
46
|
-
<script setup lang="ts">
|
|
47
|
-
import { DBButton } from "@db-ux/v-v-core-components";
|
|
48
|
-
import { DBPopover } from "@db-ux/v-v-core-components";
|
|
49
|
-
</script>
|
|
50
|
-
```
|
package/agent/Radio.md
DELETED
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
# Radio Examples (vue)
|
|
4
|
-
|
|
5
|
-
```vue
|
|
6
|
-
<template>
|
|
7
|
-
<h1>DBRadio Documentation Examples</h1>
|
|
8
|
-
<h2>1. Default Radio</h2>
|
|
9
|
-
<DBRadio label="Default Radio"></DBRadio>
|
|
10
|
-
<h2>2. Sizes</h2>
|
|
11
|
-
<DBRadio size="small" label="Small Radio"></DBRadio>
|
|
12
|
-
<DBRadio size="medium" label="Medium Radio"></DBRadio>
|
|
13
|
-
<h2>3. Validation States</h2>
|
|
14
|
-
<DBRadio validation="valid" label="Valid Radio"></DBRadio>
|
|
15
|
-
<DBRadio validation="invalid" label="Invalid Radio"></DBRadio>
|
|
16
|
-
<DBRadio validation="no-validation" label="No Validation Radio"></DBRadio>
|
|
17
|
-
<h2>4. Disabled State</h2>
|
|
18
|
-
<DBRadio label="Disabled Radio" :disabled="true"></DBRadio>
|
|
19
|
-
<h2>5. Change Event Example</h2>
|
|
20
|
-
<DBRadio
|
|
21
|
-
label="Change Event"
|
|
22
|
-
:onChange="(event) => console.log('Change event:', event.target.checked)"
|
|
23
|
-
></DBRadio>
|
|
24
|
-
</template>
|
|
25
|
-
|
|
26
|
-
<script setup lang="ts">
|
|
27
|
-
import { DBRadio } from "@db-ux/v-v-core-components";
|
|
28
|
-
</script>
|
|
29
|
-
```
|
package/agent/Section.md
DELETED
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
# Section Examples (vue)
|
|
4
|
-
|
|
5
|
-
```vue
|
|
6
|
-
<template>
|
|
7
|
-
<h1>DBSection Documentation Examples</h1>
|
|
8
|
-
<h2>1. Default Section</h2>
|
|
9
|
-
<DBSection>Default Section</DBSection>
|
|
10
|
-
<h2>2. Spacing Variants</h2>
|
|
11
|
-
<DBSection spacing="medium">Medium Spacing</DBSection>
|
|
12
|
-
<DBSection spacing="small">Small Spacing</DBSection>
|
|
13
|
-
<DBSection spacing="large">Large Spacing</DBSection>
|
|
14
|
-
<DBSection spacing="none">No Spacing</DBSection>
|
|
15
|
-
<h2>3. Container Width</h2>
|
|
16
|
-
<DBSection width="full">Full Width</DBSection>
|
|
17
|
-
<DBSection width="medium">Medium Width</DBSection>
|
|
18
|
-
<DBSection width="large">Large Width</DBSection>
|
|
19
|
-
<DBSection width="small">Small Width</DBSection>
|
|
20
|
-
<h2>4. Custom Class</h2>
|
|
21
|
-
<DBSection>Custom Class</DBSection>
|
|
22
|
-
</template>
|
|
23
|
-
|
|
24
|
-
<script setup lang="ts">
|
|
25
|
-
import { DBSection } from "@db-ux/v-v-core-components";
|
|
26
|
-
</script>
|
|
27
|
-
```
|
package/agent/Select.md
DELETED
|
@@ -1,70 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
# Select Examples (vue)
|
|
4
|
-
|
|
5
|
-
```vue
|
|
6
|
-
<template>
|
|
7
|
-
<h1>DBSelect Documentation Examples</h1>
|
|
8
|
-
<h2>1. Default Select</h2>
|
|
9
|
-
<DBSelect label="Default Select"
|
|
10
|
-
><option value="1">Option 1</option>
|
|
11
|
-
<option value="2" :disabled="true">Option 2</option></DBSelect
|
|
12
|
-
>
|
|
13
|
-
<h2>2. Options Array</h2>
|
|
14
|
-
<DBSelect label="Select with Options" :options="getOptions()"></DBSelect>
|
|
15
|
-
<h2>3. Multiple Select</h2>
|
|
16
|
-
<DBSelect label="Multiple Select" :multiple="true"
|
|
17
|
-
><option value="1">Option 1</option>
|
|
18
|
-
<option value="2" :disabled="true">Option 2</option></DBSelect
|
|
19
|
-
>
|
|
20
|
-
<h2>4. Disabled State</h2>
|
|
21
|
-
<DBSelect label="Disabled Select" :disabled="true"
|
|
22
|
-
><option value="1">Option 1</option>
|
|
23
|
-
<option value="2" :disabled="true">Option 2</option></DBSelect
|
|
24
|
-
>
|
|
25
|
-
<h2>5. Validation States</h2>
|
|
26
|
-
<DBSelect validation="valid" label="Valid Select"
|
|
27
|
-
><option value="1">Option 1</option>
|
|
28
|
-
<option value="2" :disabled="true">Option 2</option></DBSelect
|
|
29
|
-
>
|
|
30
|
-
<DBSelect validation="invalid" label="Invalid Select"
|
|
31
|
-
><option value="1">Option 1</option>
|
|
32
|
-
<option value="2" :disabled="true">Option 2</option></DBSelect
|
|
33
|
-
>
|
|
34
|
-
<DBSelect validation="no-validation" label="No Validation Select"
|
|
35
|
-
><option value="1">Option 1</option>
|
|
36
|
-
<option value="2" :disabled="true">Option 2</option></DBSelect
|
|
37
|
-
>
|
|
38
|
-
<h2>6. Change Event Example</h2>
|
|
39
|
-
<DBSelect
|
|
40
|
-
label="Change Event"
|
|
41
|
-
:onChange="(event) => console.log('Change event:', event.target.value)"
|
|
42
|
-
><option value="1">Option 1</option>
|
|
43
|
-
<option value="2" :disabled="true">Option 2</option></DBSelect
|
|
44
|
-
>
|
|
45
|
-
</template>
|
|
46
|
-
|
|
47
|
-
<script setup lang="ts">
|
|
48
|
-
import { DBSelect } from "@db-ux/v-v-core-components";
|
|
49
|
-
|
|
50
|
-
function getOptions() {
|
|
51
|
-
return [
|
|
52
|
-
{
|
|
53
|
-
id: "1",
|
|
54
|
-
label: "Option 1",
|
|
55
|
-
selected: false,
|
|
56
|
-
},
|
|
57
|
-
{
|
|
58
|
-
id: "2",
|
|
59
|
-
label: "Option 2",
|
|
60
|
-
selected: true,
|
|
61
|
-
},
|
|
62
|
-
{
|
|
63
|
-
id: "3",
|
|
64
|
-
label: "Option 3",
|
|
65
|
-
disabled: true,
|
|
66
|
-
},
|
|
67
|
-
];
|
|
68
|
-
}
|
|
69
|
-
</script>
|
|
70
|
-
```
|
package/agent/Stack.md
DELETED
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
# Stack Examples (vue)
|
|
4
|
-
|
|
5
|
-
```vue
|
|
6
|
-
<template>
|
|
7
|
-
<h1>DBStack Documentation Examples</h1>
|
|
8
|
-
<h2>1. Default Stack</h2>
|
|
9
|
-
<DBStack>Default Stack</DBStack>
|
|
10
|
-
<h2>2. Variants</h2>
|
|
11
|
-
<DBStack variant="simple">Simple Variant</DBStack>
|
|
12
|
-
<DBStack variant="divider">Divider Variant</DBStack>
|
|
13
|
-
<h2>3. Directions</h2>
|
|
14
|
-
<DBStack direction="row">Row Direction</DBStack>
|
|
15
|
-
<DBStack direction="column">Column Direction</DBStack>
|
|
16
|
-
<h2>4. Alignment</h2>
|
|
17
|
-
<DBStack alignment="stretch">Stretch Alignment</DBStack>
|
|
18
|
-
<DBStack alignment="start">Start Alignment</DBStack>
|
|
19
|
-
<DBStack alignment="end">End Alignment</DBStack>
|
|
20
|
-
<DBStack alignment="center">Center Alignment</DBStack>
|
|
21
|
-
<h2>5. Justify Content</h2>
|
|
22
|
-
<DBStack justifyContent="space-between">Space Between</DBStack>
|
|
23
|
-
<DBStack justifyContent="start">Start Justify</DBStack>
|
|
24
|
-
<DBStack justifyContent="end">End Justify</DBStack>
|
|
25
|
-
<DBStack justifyContent="center">Center Justify</DBStack>
|
|
26
|
-
<h2>6. Gap Spacing</h2>
|
|
27
|
-
<DBStack gap="medium">Medium Gap</DBStack>
|
|
28
|
-
<DBStack gap="small">Small Gap</DBStack>
|
|
29
|
-
<DBStack gap="large">Large Gap</DBStack>
|
|
30
|
-
<DBStack gap="none">No Gap</DBStack>
|
|
31
|
-
<h2>7. Wrap</h2>
|
|
32
|
-
<DBStack :wrap="true">Wrap Enabled</DBStack>
|
|
33
|
-
<DBStack :wrap="false">Wrap Disabled</DBStack>
|
|
34
|
-
<h2>8. Custom Class</h2>
|
|
35
|
-
<DBStack>Custom Class</DBStack>
|
|
36
|
-
</template>
|
|
37
|
-
|
|
38
|
-
<script setup lang="ts">
|
|
39
|
-
import { DBStack } from "@db-ux/v-v-core-components";
|
|
40
|
-
</script>
|
|
41
|
-
```
|
package/agent/Switch.md
DELETED
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
# Switch Examples (vue)
|
|
4
|
-
|
|
5
|
-
```vue
|
|
6
|
-
<template>
|
|
7
|
-
<h1>DBSwitch Documentation Examples</h1>
|
|
8
|
-
<h2>1. Default Switch</h2>
|
|
9
|
-
<DBSwitch label="Default Switch"></DBSwitch>
|
|
10
|
-
<h2>2. Visual Aid</h2>
|
|
11
|
-
<DBSwitch label="Switch with Visual Aid" :visualAid="true"></DBSwitch>
|
|
12
|
-
<DBSwitch label="Switch without Visual Aid" :visualAid="false"></DBSwitch>
|
|
13
|
-
<h2>3. Sizes</h2>
|
|
14
|
-
<DBSwitch size="small" label="Small Switch"></DBSwitch>
|
|
15
|
-
<DBSwitch size="medium" label="Medium Switch"></DBSwitch>
|
|
16
|
-
<h2>4. Validation States</h2>
|
|
17
|
-
<DBSwitch validation="valid" label="Valid Switch"></DBSwitch>
|
|
18
|
-
<DBSwitch validation="invalid" label="Invalid Switch"></DBSwitch>
|
|
19
|
-
<DBSwitch validation="no-validation" label="No Validation Switch"></DBSwitch>
|
|
20
|
-
<h2>5. Disabled State</h2>
|
|
21
|
-
<DBSwitch label="Disabled Switch" :disabled="true"></DBSwitch>
|
|
22
|
-
<h2>6. Icon Support</h2>
|
|
23
|
-
<DBSwitch icon="check" label="Switch with Icon"></DBSwitch>
|
|
24
|
-
<DBSwitch iconLeading="user" label="Switch with Leading Icon"></DBSwitch>
|
|
25
|
-
<DBSwitch iconTrailing="arrow" label="Switch with Trailing Icon"></DBSwitch>
|
|
26
|
-
<h2>7. Change Event Example</h2>
|
|
27
|
-
<DBSwitch
|
|
28
|
-
label="Change Event"
|
|
29
|
-
:onChange="(event) => console.log('Change event:', event.target.checked)"
|
|
30
|
-
></DBSwitch>
|
|
31
|
-
</template>
|
|
32
|
-
|
|
33
|
-
<script setup lang="ts">
|
|
34
|
-
import { DBSwitch } from "@db-ux/v-v-core-components";
|
|
35
|
-
</script>
|
|
36
|
-
```
|
package/agent/TabItem.md
DELETED
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
# TabItem Examples (vue)
|
|
4
|
-
|
|
5
|
-
```vue
|
|
6
|
-
<template>
|
|
7
|
-
<h1>DBTabItem Documentation Examples</h1>
|
|
8
|
-
<h2>1. Default Tab Item</h2>
|
|
9
|
-
<DBTabItem>Default Tab Item</DBTabItem>
|
|
10
|
-
<h2>2. Active State</h2>
|
|
11
|
-
<DBTabItem :active="true">Active Tab Item</DBTabItem>
|
|
12
|
-
<h2>3. Disabled State</h2>
|
|
13
|
-
<DBTabItem :disabled="true">Disabled Tab Item</DBTabItem>
|
|
14
|
-
<h2>4. Icon Variants</h2>
|
|
15
|
-
<DBTabItem icon="user">Tab Item with Icon</DBTabItem>
|
|
16
|
-
<DBTabItem iconLeading="arrow-left"> Tab Item with Leading Icon </DBTabItem>
|
|
17
|
-
<DBTabItem iconTrailing="arrow-right">
|
|
18
|
-
Tab Item with Trailing Icon
|
|
19
|
-
</DBTabItem>
|
|
20
|
-
<h2>5. Label Property</h2>
|
|
21
|
-
<DBTabItem label="Tab Item Label">Tab Item with Label</DBTabItem>
|
|
22
|
-
<h2>6. No Text</h2>
|
|
23
|
-
<DBTabItem icon="user" :noText="true"></DBTabItem>
|
|
24
|
-
</template>
|
|
25
|
-
|
|
26
|
-
<script setup lang="ts">
|
|
27
|
-
import { DBTabItem } from "@db-ux/v-v-core-components";
|
|
28
|
-
</script>
|
|
29
|
-
```
|
package/agent/Tabs.md
DELETED
|
@@ -1,55 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
# Tabs Examples (vue)
|
|
4
|
-
|
|
5
|
-
```vue
|
|
6
|
-
<template>
|
|
7
|
-
<h1>DBTabs Documentation Examples</h1>
|
|
8
|
-
<h2>1. Default Tabs</h2>
|
|
9
|
-
<DBTabs
|
|
10
|
-
><DBTabList
|
|
11
|
-
><DBTabItem>Tab 1</DBTabItem><DBTabItem>Tab 2</DBTabItem
|
|
12
|
-
><DBTabItem>Tab 3</DBTabItem></DBTabList
|
|
13
|
-
><DBTabPanel>Tab Panel 1</DBTabPanel><DBTabPanel>Tab Panel 2</DBTabPanel
|
|
14
|
-
><DBTabPanel>Tab Panel 3</DBTabPanel></DBTabs
|
|
15
|
-
>
|
|
16
|
-
<h2>2. Behavior Variants</h2>
|
|
17
|
-
<DBTabs behavior="scrollbar"
|
|
18
|
-
><DBTabList
|
|
19
|
-
><DBTabItem>Tab 1</DBTabItem><DBTabItem>Tab 2</DBTabItem
|
|
20
|
-
><DBTabItem>Tab 3</DBTabItem></DBTabList
|
|
21
|
-
><DBTabPanel>Tab Panel 1</DBTabPanel><DBTabPanel>Tab Panel 2</DBTabPanel
|
|
22
|
-
><DBTabPanel>Tab Panel 3</DBTabPanel></DBTabs
|
|
23
|
-
>
|
|
24
|
-
<DBTabs behavior="arrows"
|
|
25
|
-
><DBTabList
|
|
26
|
-
><DBTabItem>Tab 1</DBTabItem><DBTabItem>Tab 2</DBTabItem
|
|
27
|
-
><DBTabItem>Tab 3</DBTabItem></DBTabList
|
|
28
|
-
><DBTabPanel>Tab Panel 1</DBTabPanel><DBTabPanel>Tab Panel 2</DBTabPanel
|
|
29
|
-
><DBTabPanel>Tab Panel 3</DBTabPanel></DBTabs
|
|
30
|
-
>
|
|
31
|
-
<h2>3. Initial Selected Index</h2>
|
|
32
|
-
<DBTabs :initialSelectedIndex="1"
|
|
33
|
-
><DBTabList
|
|
34
|
-
><DBTabItem>Tab 1</DBTabItem><DBTabItem>Tab 2</DBTabItem
|
|
35
|
-
><DBTabItem>Tab 3</DBTabItem></DBTabList
|
|
36
|
-
><DBTabPanel>Tab Panel 1</DBTabPanel><DBTabPanel>Tab Panel 2</DBTabPanel
|
|
37
|
-
><DBTabPanel>Tab Panel 3</DBTabPanel></DBTabs
|
|
38
|
-
>
|
|
39
|
-
<h2>4. Initial Selected Mode</h2>
|
|
40
|
-
<DBTabs initialSelectedMode="manually"
|
|
41
|
-
><DBTabList
|
|
42
|
-
><DBTabItem>Tab 1</DBTabItem><DBTabItem>Tab 2</DBTabItem
|
|
43
|
-
><DBTabItem>Tab 3</DBTabItem></DBTabList
|
|
44
|
-
><DBTabPanel>Tab Panel 1</DBTabPanel><DBTabPanel>Tab Panel 2</DBTabPanel
|
|
45
|
-
><DBTabPanel>Tab Panel 3</DBTabPanel></DBTabs
|
|
46
|
-
>
|
|
47
|
-
</template>
|
|
48
|
-
|
|
49
|
-
<script setup lang="ts">
|
|
50
|
-
import { DBTabItem } from "@db-ux/v-v-core-components";
|
|
51
|
-
import { DBTabList } from "@db-ux/v-v-core-components";
|
|
52
|
-
import { DBTabPanel } from "@db-ux/v-v-core-components";
|
|
53
|
-
import { DBTabs } from "@db-ux/v-v-core-components";
|
|
54
|
-
</script>
|
|
55
|
-
```
|
package/agent/Tag.md
DELETED
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
# Tag Examples (vue)
|
|
4
|
-
|
|
5
|
-
```vue
|
|
6
|
-
<template>
|
|
7
|
-
<h1>DBTag Documentation Examples</h1>
|
|
8
|
-
<h2>1. Default Tags</h2>
|
|
9
|
-
<DBTag><DBButton>Tag as Button</DBButton></DBTag>
|
|
10
|
-
<DBTag><DBLink>Tag as Link</DBLink></DBTag>
|
|
11
|
-
<DBTag><DBCheckbox>Tag as Checkbox</DBCheckbox></DBTag>
|
|
12
|
-
<DBTag><DBRadio>Tag as Radio</DBRadio></DBTag>
|
|
13
|
-
<DBTag>Static Tag</DBTag>
|
|
14
|
-
<h2>2. Overflow Example</h2>
|
|
15
|
-
<DBTag :overflow="true"><span>Static Tag with overflow</span></DBTag>
|
|
16
|
-
<h2>3. Removable Tag</h2>
|
|
17
|
-
<DBTag behavior="removable" :onRemove="(event) => console.log('Tag removed')">
|
|
18
|
-
Removable Tag
|
|
19
|
-
</DBTag>
|
|
20
|
-
<h2>4. Semantic Variants</h2>
|
|
21
|
-
<DBTag semantic="adaptive">Adaptive Tag</DBTag>
|
|
22
|
-
<DBTag semantic="neutral">Neutral Tag</DBTag>
|
|
23
|
-
<DBTag semantic="critical">Critical Tag</DBTag>
|
|
24
|
-
<DBTag semantic="informational">Informational Tag</DBTag>
|
|
25
|
-
<DBTag semantic="warning">Warning Tag</DBTag>
|
|
26
|
-
<DBTag semantic="successful">Successful Tag</DBTag>
|
|
27
|
-
<h2>5. Icon Support</h2>
|
|
28
|
-
<DBTag icon="user">Tag with Icon</DBTag>
|
|
29
|
-
</template>
|
|
30
|
-
|
|
31
|
-
<script setup lang="ts">
|
|
32
|
-
import { DBButton } from "@db-ux/v-v-core-components";
|
|
33
|
-
import { DBCheckbox } from "@db-ux/v-v-core-components";
|
|
34
|
-
import { DBLink } from "@db-ux/v-v-core-components";
|
|
35
|
-
import { DBRadio } from "@db-ux/v-v-core-components";
|
|
36
|
-
import { DBTag } from "@db-ux/v-v-core-components";
|
|
37
|
-
</script>
|
|
38
|
-
```
|
package/agent/Textarea.md
DELETED
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
# Textarea Examples (vue)
|
|
4
|
-
|
|
5
|
-
```vue
|
|
6
|
-
<template>
|
|
7
|
-
<h1>DBTextarea Documentation Examples</h1>
|
|
8
|
-
<h2>1. Default Textarea</h2>
|
|
9
|
-
<DBTextarea label="Default Textarea"></DBTextarea>
|
|
10
|
-
<h2>2. Resizable Variants</h2>
|
|
11
|
-
<DBTextarea resize="none" label="No Resize"></DBTextarea>
|
|
12
|
-
<DBTextarea resize="both" label="Resize Both"></DBTextarea>
|
|
13
|
-
<DBTextarea resize="horizontal" label="Resize Horizontal"></DBTextarea>
|
|
14
|
-
<DBTextarea resize="vertical" label="Resize Vertical"></DBTextarea>
|
|
15
|
-
<h2>3. Rows and Columns</h2>
|
|
16
|
-
<DBTextarea label="Custom Rows and Columns" :rows="5" :cols="30"></DBTextarea>
|
|
17
|
-
<h2>4. Wrap Variants</h2>
|
|
18
|
-
<DBTextarea wrap="hard" label="Hard Wrap"></DBTextarea>
|
|
19
|
-
<DBTextarea wrap="soft" label="Soft Wrap"></DBTextarea>
|
|
20
|
-
<DBTextarea wrap="off" label="No Wrap"></DBTextarea>
|
|
21
|
-
<h2>5. Disabled State</h2>
|
|
22
|
-
<DBTextarea label="Disabled Textarea" :disabled="true"></DBTextarea>
|
|
23
|
-
<h2>6. Placeholder Examples</h2>
|
|
24
|
-
<DBTextarea
|
|
25
|
-
placeholder="Enter text here"
|
|
26
|
-
label="With Placeholder"
|
|
27
|
-
></DBTextarea>
|
|
28
|
-
<h2>7. Message Property Example</h2>
|
|
29
|
-
<DBTextarea
|
|
30
|
-
label="Textarea with Message"
|
|
31
|
-
message="This is a helper message."
|
|
32
|
-
></DBTextarea>
|
|
33
|
-
<h2>8. Input Event Example</h2>
|
|
34
|
-
<DBTextarea
|
|
35
|
-
label="Input Event"
|
|
36
|
-
:onInput="(event) => console.log('Input event:', event.target.value)"
|
|
37
|
-
></DBTextarea>
|
|
38
|
-
</template>
|
|
39
|
-
|
|
40
|
-
<script setup lang="ts">
|
|
41
|
-
import { DBTextarea } from "@db-ux/v-v-core-components";
|
|
42
|
-
</script>
|
|
43
|
-
```
|
package/agent/Tooltip.md
DELETED
|
@@ -1,48 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
# Tooltip Examples (vue)
|
|
4
|
-
|
|
5
|
-
```vue
|
|
6
|
-
<template>
|
|
7
|
-
<h1>DBTooltip Documentation Examples</h1>
|
|
8
|
-
<h2>1. Default Tooltip</h2>
|
|
9
|
-
<DBButton>
|
|
10
|
-
Hover on me to open Tooltip
|
|
11
|
-
<DBTooltip>Tooltip</DBTooltip></DBButton
|
|
12
|
-
>
|
|
13
|
-
<h2>2. Tooltip Variants</h2>
|
|
14
|
-
<DBButton>
|
|
15
|
-
Description Tooltip
|
|
16
|
-
<DBTooltip variant="description">
|
|
17
|
-
Description Tooltip Content
|
|
18
|
-
</DBTooltip></DBButton
|
|
19
|
-
>
|
|
20
|
-
<DBButton>
|
|
21
|
-
Label Tooltip
|
|
22
|
-
<DBTooltip variant="label">Label Tooltip Content</DBTooltip></DBButton
|
|
23
|
-
>
|
|
24
|
-
<h2>3. Tooltip with Arrow</h2>
|
|
25
|
-
<DBButton>
|
|
26
|
-
Tooltip with Arrow
|
|
27
|
-
<DBTooltip :showArrow="true">
|
|
28
|
-
Tooltip Content with Arrow
|
|
29
|
-
</DBTooltip></DBButton
|
|
30
|
-
>
|
|
31
|
-
<h2>4. Placement Variants</h2>
|
|
32
|
-
<DBButton>
|
|
33
|
-
Top Placement
|
|
34
|
-
<DBTooltip placement="top">Tooltip Content at Top</DBTooltip></DBButton
|
|
35
|
-
>
|
|
36
|
-
<DBButton>
|
|
37
|
-
Bottom Placement
|
|
38
|
-
<DBTooltip placement="bottom">
|
|
39
|
-
Tooltip Content at Bottom
|
|
40
|
-
</DBTooltip></DBButton
|
|
41
|
-
>
|
|
42
|
-
</template>
|
|
43
|
-
|
|
44
|
-
<script setup lang="ts">
|
|
45
|
-
import { DBButton } from "@db-ux/v-v-core-components";
|
|
46
|
-
import { DBTooltip } from "@db-ux/v-v-core-components";
|
|
47
|
-
</script>
|
|
48
|
-
```
|
package/agent/_instructions.md
DELETED
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
- Use "@db-ux/v-core-components" as import for components:
|
|
2
|
-
- use for `DBDrawer` or `Drawer` the file __agent-path__/agent/Drawer.md
|
|
3
|
-
- use for `DBTooltip` or `Tooltip` the file __agent-path__/agent/Tooltip.md
|
|
4
|
-
- use for `DBTextarea` or `Textarea` the file __agent-path__/agent/Textarea.md
|
|
5
|
-
- use for `DBTag` or `Tag` the file __agent-path__/agent/Tag.md
|
|
6
|
-
- use for `DBTabs` or `Tabs` the file __agent-path__/agent/Tabs.md
|
|
7
|
-
- use for `DBTabItem` or `TabItem` the file __agent-path__/agent/TabItem.md
|
|
8
|
-
- use for `DBSwitch` or `Switch` the file __agent-path__/agent/Switch.md
|
|
9
|
-
- use for `DBStack` or `Stack` the file __agent-path__/agent/Stack.md
|
|
10
|
-
- use for `DBSelect` or `Select` the file __agent-path__/agent/Select.md
|
|
11
|
-
- use for `DBSection` or `Section` the file __agent-path__/agent/Section.md
|
|
12
|
-
- use for `DBRadio` or `Radio` the file __agent-path__/agent/Radio.md
|
|
13
|
-
- use for `DBPopover` or `Popover` the file __agent-path__/agent/Popover.md
|
|
14
|
-
- use for `DBPage` or `Page` the file __agent-path__/agent/Page.md
|
|
15
|
-
- use for `DBNotification` or `Notification` the file __agent-path__/agent/Notification.md
|
|
16
|
-
- use for `DBNavigationItem` or `NavigationItem` the file __agent-path__/agent/NavigationItem.md
|
|
17
|
-
- use for `DBNavigation` or `Navigation` the file __agent-path__/agent/Navigation.md
|
|
18
|
-
- use for `DBLink` or `Link` the file __agent-path__/agent/Link.md
|
|
19
|
-
- use for `DBInput` or `Input` the file __agent-path__/agent/Input.md
|
|
20
|
-
- use for `DBInfotext` or `Infotext` the file __agent-path__/agent/Infotext.md
|
|
21
|
-
- use for `DBIcon` or `Icon` the file __agent-path__/agent/Icon.md
|
|
22
|
-
- use for `DBHeader` or `Header` the file __agent-path__/agent/Header.md
|
|
23
|
-
- use for `DBDivider` or `Divider` the file __agent-path__/agent/Divider.md
|
|
24
|
-
- use for `DBCustomSelect` or `CustomSelect` the file __agent-path__/agent/CustomSelect.md
|
|
25
|
-
- use for `DBCheckbox` or `Checkbox` the file __agent-path__/agent/Checkbox.md
|
|
26
|
-
- use for `DBCard` or `Card` the file __agent-path__/agent/Card.md
|
|
27
|
-
- use for `DBButton` or `Button` the file __agent-path__/agent/Button.md
|
|
28
|
-
- use for `DBBrand` or `Brand` the file __agent-path__/agent/Brand.md
|
|
29
|
-
- use for `DBBadge` or `Badge` the file __agent-path__/agent/Badge.md
|
|
30
|
-
- use for `DBAccordionItem` or `AccordionItem` the file __agent-path__/agent/AccordionItem.md
|
|
31
|
-
- use for `DBAccordion` or `Accordion` the file __agent-path__/agent/Accordion.md
|