@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.
@@ -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
- ```
@@ -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
- ```
@@ -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
- ```
@@ -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