@dpa-id-components/dpa-shared-components 22.0.0-next.9 → 22.0.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.
Files changed (143) hide show
  1. package/dist/assets/icons/bot.vue.d.ts +3 -0
  2. package/dist/bot-C103nFwL.js +19 -0
  3. package/dist/components/UiCheckbox/UiCheckbox.vue.d.ts +1 -1
  4. package/dist/components/UiIcon/icons.d.ts +1 -0
  5. package/dist/components/UiInput/UiInput.vue.d.ts +1 -1
  6. package/dist/components/UiMenu/UiMenu.vue.d.ts +1 -1
  7. package/dist/components/index.d.ts +1 -18
  8. package/dist/dpa-shared-components.js +3326 -3978
  9. package/dist/eslint.base.config.js +1 -4
  10. package/dist/src/assets/icons/bot.vue +14 -0
  11. package/dist/src/components/UiChip/UiChip.spec.ts +1 -1
  12. package/dist/src/components/UiChip/UiChip.vue +2 -2
  13. package/dist/src/components/UiDatePicker/UiDatePicker.vue +11 -8
  14. package/dist/src/components/UiDialog/UiDialog.vue +10 -7
  15. package/dist/src/components/UiFilterBadge/UiFilterBadge.stories.ts +1 -3
  16. package/dist/src/components/UiIcon/UiIcon.stories.ts +1 -1
  17. package/dist/src/components/UiIcon/icons.ts +1 -0
  18. package/dist/src/components/UiListItem/README.md +13 -12
  19. package/dist/src/components/UiListItem/UiListItem.stories.ts +0 -26
  20. package/dist/src/components/UiListItem/UiListItem.vue +4 -2
  21. package/dist/src/components/UiMediaTypeIcon/UiMediaTypeIcon.stories.ts +1 -1
  22. package/dist/src/components/UiMenu/UiMenu.stories.ts +85 -2
  23. package/dist/src/components/UiMenu/UiMenu.vue +7 -8
  24. package/dist/src/components/UiSelect/UiSelect.vue +1 -1
  25. package/dist/src/components/index.ts +0 -33
  26. package/dist/src/tailwindPreset.css +70 -62
  27. package/dist/style.css +2 -2
  28. package/dist/tailwindPreset.css +70 -62
  29. package/package.json +22 -22
  30. package/src/assets/icons/bot.vue +14 -0
  31. package/src/components/UiChip/UiChip.vue +2 -2
  32. package/src/components/UiDatePicker/UiDatePicker.vue +11 -8
  33. package/src/components/UiDialog/UiDialog.vue +10 -7
  34. package/src/components/UiIcon/icons.ts +1 -0
  35. package/src/components/UiListItem/README.md +13 -12
  36. package/src/components/UiListItem/UiListItem.vue +4 -2
  37. package/src/components/UiMenu/UiMenu.vue +7 -8
  38. package/src/components/UiSelect/UiSelect.vue +1 -1
  39. package/src/tailwindPreset.css +70 -62
  40. package/dist/components/DpaMediaItem/DpaMediaItem.vue.d.ts +0 -43
  41. package/dist/components/UiButtonGroup/UiButtonGroup.vue.d.ts +0 -7
  42. package/dist/components/UiCard/UiCard.vue.d.ts +0 -7
  43. package/dist/components/UiCheckBoxGroup/UiCheckBoxGroup.vue.d.ts +0 -33
  44. package/dist/components/UiCollapseNavigation/UiCollapseNavigation.vue.d.ts +0 -28
  45. package/dist/components/UiFilterButton/UiFilterButton.vue.d.ts +0 -54
  46. package/dist/components/UiIconButton/UiIconButton.vue.d.ts +0 -30
  47. package/dist/components/UiList/UiList.vue.d.ts +0 -7
  48. package/dist/components/UiMenu/UiMenuItem.vue.d.ts +0 -35
  49. package/dist/components/UiMenu/UiMenuList.vue.d.ts +0 -20
  50. package/dist/components/UiOverlay/UiOverlay.vue.d.ts +0 -18
  51. package/dist/components/UiOverlayMenu/UiOverlayMenu.vue.d.ts +0 -24
  52. package/dist/components/UiRadioInputGroup/UiRadioInputGroup.vue.d.ts +0 -35
  53. package/dist/components/UiSection/UiSection.vue.d.ts +0 -29
  54. package/dist/components/UiSectionDivider/UiSectionDivider.vue.d.ts +0 -16
  55. package/dist/components/UiTextButton/UiTextButton.vue.d.ts +0 -42
  56. package/dist/src/components/DpaMediaItem/DpaMediaItem.spec.ts +0 -123
  57. package/dist/src/components/DpaMediaItem/DpaMediaItem.stories.ts +0 -140
  58. package/dist/src/components/DpaMediaItem/DpaMediaItem.vue +0 -146
  59. package/dist/src/components/DpaMediaItem/README.md +0 -42
  60. package/dist/src/components/UiButtonGroup/README.md +0 -29
  61. package/dist/src/components/UiButtonGroup/UiButtonGroup.spec.ts +0 -16
  62. package/dist/src/components/UiButtonGroup/UiButtonGroup.stories.ts +0 -53
  63. package/dist/src/components/UiButtonGroup/UiButtonGroup.vue +0 -29
  64. package/dist/src/components/UiCard/README.md +0 -32
  65. package/dist/src/components/UiCard/UiCard.spec.ts +0 -16
  66. package/dist/src/components/UiCard/UiCard.stories.ts +0 -30
  67. package/dist/src/components/UiCard/UiCard.vue +0 -28
  68. package/dist/src/components/UiCheckBoxGroup/README.md +0 -35
  69. package/dist/src/components/UiCheckBoxGroup/UiCheckBoxGroup.spec.ts +0 -70
  70. package/dist/src/components/UiCheckBoxGroup/UiCheckBoxGroup.stories.ts +0 -59
  71. package/dist/src/components/UiCheckBoxGroup/UiCheckBoxGroup.vue +0 -106
  72. package/dist/src/components/UiCollapseNavigation/README.md +0 -37
  73. package/dist/src/components/UiCollapseNavigation/UiCollapseNavigation.spec.ts +0 -21
  74. package/dist/src/components/UiCollapseNavigation/UiCollapseNavigation.stories.ts +0 -67
  75. package/dist/src/components/UiCollapseNavigation/UiCollapseNavigation.vue +0 -79
  76. package/dist/src/components/UiFilterButton/README.md +0 -37
  77. package/dist/src/components/UiFilterButton/UiFilterButton.spec.ts +0 -79
  78. package/dist/src/components/UiFilterButton/UiFilterButton.stories.ts +0 -90
  79. package/dist/src/components/UiFilterButton/UiFilterButton.vue +0 -170
  80. package/dist/src/components/UiIconButton/README.md +0 -31
  81. package/dist/src/components/UiIconButton/UiIconButton.spec.ts +0 -78
  82. package/dist/src/components/UiIconButton/UiIconButton.stories.ts +0 -65
  83. package/dist/src/components/UiIconButton/UiIconButton.vue +0 -112
  84. package/dist/src/components/UiList/README.md +0 -31
  85. package/dist/src/components/UiList/UiList.spec.ts +0 -23
  86. package/dist/src/components/UiList/UiList.stories.ts +0 -66
  87. package/dist/src/components/UiList/UiList.vue +0 -29
  88. package/dist/src/components/UiMenu/UiMenuItem.vue +0 -71
  89. package/dist/src/components/UiMenu/UiMenuList.vue +0 -40
  90. package/dist/src/components/UiOverlay/README.md +0 -38
  91. package/dist/src/components/UiOverlay/UiOverlay.spec.ts +0 -16
  92. package/dist/src/components/UiOverlay/UiOverlay.stories.ts +0 -22
  93. package/dist/src/components/UiOverlay/UiOverlay.vue +0 -36
  94. package/dist/src/components/UiOverlayMenu/README.md +0 -40
  95. package/dist/src/components/UiOverlayMenu/UiOverlayMenu.spec.ts +0 -33
  96. package/dist/src/components/UiOverlayMenu/UiOverlayMenu.stories.ts +0 -40
  97. package/dist/src/components/UiOverlayMenu/UiOverlayMenu.vue +0 -51
  98. package/dist/src/components/UiRadioInputGroup/README.md +0 -51
  99. package/dist/src/components/UiRadioInputGroup/UiRadioInputGroup.spec.ts +0 -66
  100. package/dist/src/components/UiRadioInputGroup/UiRadioInputGroup.stories.ts +0 -45
  101. package/dist/src/components/UiRadioInputGroup/UiRadioInputGroup.vue +0 -76
  102. package/dist/src/components/UiSection/README.md +0 -33
  103. package/dist/src/components/UiSection/UiSection.spec.ts +0 -49
  104. package/dist/src/components/UiSection/UiSection.stories.ts +0 -61
  105. package/dist/src/components/UiSection/UiSection.vue +0 -63
  106. package/dist/src/components/UiSectionDivider/README.md +0 -29
  107. package/dist/src/components/UiSectionDivider/UiSectionDivider.spec.ts +0 -19
  108. package/dist/src/components/UiSectionDivider/UiSectionDivider.stories.ts +0 -49
  109. package/dist/src/components/UiSectionDivider/UiSectionDivider.vue +0 -44
  110. package/dist/src/components/UiTextButton/README.md +0 -41
  111. package/dist/src/components/UiTextButton/UiTextButton.spec.ts +0 -99
  112. package/dist/src/components/UiTextButton/UiTextButton.stories.ts +0 -62
  113. package/dist/src/components/UiTextButton/UiTextButton.vue +0 -173
  114. package/src/components/DpaMediaItem/DpaMediaItem.vue +0 -146
  115. package/src/components/DpaMediaItem/README.md +0 -42
  116. package/src/components/UiButtonGroup/README.md +0 -29
  117. package/src/components/UiButtonGroup/UiButtonGroup.vue +0 -29
  118. package/src/components/UiCard/README.md +0 -32
  119. package/src/components/UiCard/UiCard.vue +0 -28
  120. package/src/components/UiCheckBoxGroup/README.md +0 -35
  121. package/src/components/UiCheckBoxGroup/UiCheckBoxGroup.vue +0 -106
  122. package/src/components/UiCollapseNavigation/README.md +0 -37
  123. package/src/components/UiCollapseNavigation/UiCollapseNavigation.vue +0 -79
  124. package/src/components/UiFilterButton/README.md +0 -37
  125. package/src/components/UiFilterButton/UiFilterButton.vue +0 -170
  126. package/src/components/UiIconButton/README.md +0 -31
  127. package/src/components/UiIconButton/UiIconButton.vue +0 -112
  128. package/src/components/UiList/README.md +0 -31
  129. package/src/components/UiList/UiList.vue +0 -29
  130. package/src/components/UiMenu/UiMenuItem.vue +0 -71
  131. package/src/components/UiMenu/UiMenuList.vue +0 -40
  132. package/src/components/UiOverlay/README.md +0 -38
  133. package/src/components/UiOverlay/UiOverlay.vue +0 -36
  134. package/src/components/UiOverlayMenu/README.md +0 -40
  135. package/src/components/UiOverlayMenu/UiOverlayMenu.vue +0 -51
  136. package/src/components/UiRadioInputGroup/README.md +0 -51
  137. package/src/components/UiRadioInputGroup/UiRadioInputGroup.vue +0 -76
  138. package/src/components/UiSection/README.md +0 -33
  139. package/src/components/UiSection/UiSection.vue +0 -63
  140. package/src/components/UiSectionDivider/README.md +0 -29
  141. package/src/components/UiSectionDivider/UiSectionDivider.vue +0 -44
  142. package/src/components/UiTextButton/README.md +0 -41
  143. package/src/components/UiTextButton/UiTextButton.vue +0 -173
@@ -1,42 +0,0 @@
1
- import { UiIconName } from '../UiIcon/UiIcon.vue';
2
- /**
3
- * @deprecated
4
- * Please replace with your own component
5
- */
6
- declare const _default: typeof __VLS_export;
7
- export default _default;
8
- declare const __VLS_export: __VLS_WithSlots<import('vue').DefineComponent<{
9
- color?: "blue" | "gray";
10
- href?: string;
11
- iconLeft?: UiIconName;
12
- iconRight?: UiIconName;
13
- placement?: "onsurface" | "oncanvas";
14
- size?: "xsmall" | "small" | "medium";
15
- weight?: "regular" | "semibold";
16
- linkTarget?: string;
17
- }, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{
18
- color?: "blue" | "gray";
19
- href?: string;
20
- iconLeft?: UiIconName;
21
- iconRight?: UiIconName;
22
- placement?: "onsurface" | "oncanvas";
23
- size?: "xsmall" | "small" | "medium";
24
- weight?: "regular" | "semibold";
25
- linkTarget?: string;
26
- }> & Readonly<{}>, {
27
- size: "xsmall" | "small" | "medium";
28
- href: string;
29
- color: "blue" | "gray";
30
- placement: "onsurface" | "oncanvas";
31
- iconLeft: UiIconName;
32
- iconRight: UiIconName;
33
- weight: "regular" | "semibold";
34
- linkTarget: string;
35
- }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>, {
36
- default?: (props: {}) => any;
37
- }>;
38
- type __VLS_WithSlots<T, S> = T & {
39
- new (): {
40
- $slots: S;
41
- };
42
- };
@@ -1,123 +0,0 @@
1
- import { mount } from "@vue/test-utils";
2
- import { describe, expect, test } from "vitest";
3
-
4
- import DpaMediaItem from "./DpaMediaItem.vue";
5
-
6
- describe("DpaMediaItem", () => {
7
- test("displays items in the time published slot", () => {
8
- const wrapper = mount(DpaMediaItem, {
9
- slots: {
10
- timePublished: "Time Slot",
11
- },
12
- });
13
- expect(wrapper.text()).toBe("Time Slot");
14
- });
15
-
16
- test("displays items in the description slot", () => {
17
- const wrapper = mount(DpaMediaItem, {
18
- slots: {
19
- description: "Description",
20
- },
21
- });
22
- expect(wrapper.text()).toBe("Description");
23
- });
24
-
25
- test("displays items in the planning slot", () => {
26
- const wrapper = mount(DpaMediaItem, {
27
- slots: {
28
- planning: "Planning",
29
- },
30
- });
31
- expect(wrapper.text()).toBe("Planning");
32
- });
33
-
34
- test("displays items in the textLength slot", () => {
35
- const wrapper = mount(DpaMediaItem, {
36
- slots: {
37
- textLength: "Text Length",
38
- },
39
- });
40
- expect(wrapper.text()).toBe("Text Length");
41
- });
42
-
43
- test("changes icon according to the genre", () => {
44
- const wrapper = mount(DpaMediaItem, {
45
- props: {
46
- genre: "audio",
47
- },
48
- });
49
-
50
- expect(wrapper.findComponent({ name: "UiIcon" }).props()).toMatchObject({
51
- name: "audio",
52
- });
53
- });
54
-
55
- test("changes icon when fulfilled", () => {
56
- const wrapper = mount(DpaMediaItem, {
57
- props: {
58
- genre: "audio",
59
-
60
- isFulfilled: true,
61
- },
62
- });
63
-
64
- expect(wrapper.findComponent({ name: "UiIcon" }).props()).toMatchObject({
65
- name: "audio",
66
- });
67
- });
68
-
69
- test("is styled differently when fulfilled", () => {
70
- const wrapper = mount(DpaMediaItem, {
71
- props: {
72
- isFulfilled: true,
73
- },
74
- });
75
-
76
- const rootDiv = wrapper.find('[data-testid="rootDiv"]');
77
- expect(rootDiv.classes("border-neutral-faint")).toBe(true);
78
- });
79
-
80
- test("renders images with the correct source", () => {
81
- const wrapper = mount(DpaMediaItem, {
82
- props: {
83
- imgSrc: "Source",
84
- },
85
- });
86
-
87
- expect(wrapper.find("img").attributes().src).toBe("Source");
88
- });
89
-
90
- test("renders images with correct alt-text", () => {
91
- const wrapper = mount(DpaMediaItem, {
92
- props: {
93
- imgSrc: "Source",
94
- imgAlt: "Alternative",
95
- },
96
- });
97
-
98
- expect(wrapper.find("img").attributes().alt).toBe("Thumbnail :Alternative");
99
- });
100
-
101
- test("displays the correct image count", () => {
102
- const wrapper = mount(DpaMediaItem, {
103
- props: {
104
- imgSrc: "Source",
105
- imgCount: 2,
106
- },
107
- });
108
-
109
- expect(wrapper.find("[data-testid='imageCount']").text()).toBe("2");
110
- });
111
-
112
- test("is styled differently when disabled", () => {
113
- const wrapper = mount(DpaMediaItem, {
114
- props: {
115
- isFulfilled: true,
116
- disabled: true,
117
- },
118
- });
119
-
120
- const rootDiv = wrapper.find('[data-testid="rootDiv"]');
121
- expect(rootDiv.classes("cursor-not-allowed")).toBe(true);
122
- });
123
- });
@@ -1,140 +0,0 @@
1
- import type { Meta, StoryObj } from "@storybook/vue3-vite";
2
-
3
- import DpaMediaItem from "./DpaMediaItem.vue";
4
-
5
- const meta = {
6
- title: "Ui/DpaMediaItem",
7
- component: DpaMediaItem,
8
- argTypes: {
9
- genre: {
10
- control: {
11
- type: "select",
12
- options: ["audio", "video", "text", "picture", "graphic"],
13
- },
14
- },
15
- isFulfilled: {
16
- control: "boolean",
17
- },
18
- imgSrc: {
19
- control: "text",
20
- },
21
- imgAlt: {
22
- control: "text",
23
- },
24
- imgCount: {
25
- control: "number",
26
- },
27
- },
28
- args: {
29
- genre: "text",
30
- isFulfilled: true,
31
- imgSrc: "",
32
- imgAlt: "",
33
- imgCount: 0,
34
- },
35
- tags: ["deprecated"],
36
- } satisfies Meta<typeof DpaMediaItem>;
37
-
38
- export default meta;
39
- type Story = StoryObj<typeof meta>;
40
-
41
- export const Default: Story = {
42
- render: (args) => ({
43
- setup() {
44
- return { args };
45
- },
46
- components: { DpaMediaItem },
47
- template: `
48
- <DpaMediaItem v-bind="args" auto-size style="cursor: pointer;">
49
- <template #timePublished>15.11.2021 16:41</template>
50
- <template #description>News Feature im Basisdienst</template>
51
- <span>BKA-Chef: Cannabis bleibt beliebteste Droge in Deutschland</span>
52
- <template #textLength>104 dpa-Zeilen / 7176 Zeichen</template>
53
- </DpaMediaItem>
54
- `,
55
- }),
56
- };
57
-
58
- export const Picture: Story = {
59
- render: (args) => ({
60
- setup() {
61
- return { args };
62
- },
63
- components: { DpaMediaItem },
64
- template: `
65
- <dpa-media-item v-bind="args" auto-size style="cursor: pointer;">
66
- <template #timePublished>15.11.2021 16:41</template>
67
- <template #description>Aktuelle Fotos</template>
68
- <span>Wahl des neuen EKD-Ratsvorsitzes</span>
69
- </dpa-media-item>
70
- `,
71
- }),
72
- args: {
73
- genre: "picture",
74
- isFulfilled: true,
75
- imgSrc: `data:image/jpeg;base64,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`,
76
- imgAlt: "Wahl des neuen EKD-Ratsvorsitzes",
77
- imgCount: 12,
78
- },
79
- };
80
-
81
- export const Disabled: Story = {
82
- render: (args) => ({
83
- setup() {
84
- return { args };
85
- },
86
- components: { DpaMediaItem },
87
- template: `
88
- <dpa-media-item v-bind="args" auto-size>
89
- <template #timePublished>15.11.2021 16:41</template>
90
- <template #description>Video-Beitrag</template>
91
- <span>Wahl des neuen EKD-Ratsvorsitzes</span>
92
- </dpa-media-item>
93
- `,
94
- }),
95
- args: {
96
- genre: "video",
97
- isFulfilled: true,
98
- imgCount: 1,
99
- disabled: true,
100
- },
101
- };
102
-
103
- export const Planned: Story = {
104
- render: (args) => ({
105
- setup() {
106
- return { args };
107
- },
108
- components: { DpaMediaItem },
109
- template: `
110
- <dpa-media-item v-bind="args" auto-size style="cursor: pointer;">
111
- <template #description>Zusammenfassung im Basisdienst</template>
112
- <template #planning>bis 16:30</template>
113
- <template #textLength>ca. 60 dpa-Zeilen / 4140 Zeichen</template>
114
- </dpa-media-item>
115
- `,
116
- }),
117
- args: {
118
- isFulfilled: false,
119
- },
120
- };
121
-
122
- export const PlannedWithHeadline: Story = {
123
- render: (args) => ({
124
- setup() {
125
- return { args };
126
- },
127
- components: { DpaMediaItem },
128
- template: `
129
- <dpa-media-item v-bind="args" auto-size style="cursor: pointer;">
130
- <span>Planned with headline: BKA-Chef: Cannabis bleibt beliebteste Droge in Deutschland</span>
131
- <template #description>Zusammenfassung im Basisdienst</template>
132
- <template #planning>bis 16:30</template>
133
- <template #textLength>ca. 60 dpa-Zeilen / 4140 Zeichen</template>
134
- </dpa-media-item>
135
- `,
136
- }),
137
- args: {
138
- isFulfilled: false,
139
- },
140
- };
@@ -1,146 +0,0 @@
1
- <template>
2
- <div
3
- class="mb-px w-full bg-neutral pt-2 pr-4 pb-3 pl-3 md:pt-3"
4
- :class="classObject"
5
- data-testid="rootDiv"
6
- >
7
- <div
8
- class="flex"
9
- :class="{
10
- 'flex-col-reverse': $slots.timePublished,
11
- 'flex-col': !$slots.timePublished,
12
- 'px-1': isFulfilled,
13
- }"
14
- >
15
- <!-- Meta description -->
16
- <div class="flex items-center justify-between py-1">
17
- <div class="flex items-center pr-2">
18
- <UiIcon
19
- size="sm"
20
- :name="genreIcon"
21
- class="mr-2 shrink-0 fill-current text-neutral-subtle"
22
- />
23
- <span class="text-xs font-medium text-neutral-primary">
24
- <slot name="description" />
25
- </span>
26
- </div>
27
- <span
28
- v-if="$slots.planning"
29
- class="w-16 shrink-0 text-right text-xs text-neutral-subtle"
30
- ><slot name="planning"
31
- /></span>
32
- </div>
33
-
34
- <div class="flex flex-col">
35
- <!-- Image and headline -->
36
- <div v-if="imgSrc || $slots.default" class="flex py-1">
37
- <div v-if="imgSrc" class="relative mr-2 flex-none">
38
- <img
39
- :src="imgSrc"
40
- class="h-14 object-cover"
41
- :alt="`Thumbnail${imgAlt ? ` :${imgAlt}` : ''}`"
42
- />
43
- <span
44
- v-if="imgCount > 1"
45
- class="absolute right-1 bottom-1 inline-block h-4 rounded-full bg-neutral-primary px-1 align-middle text-xs/4 font-semibold text-neutral"
46
- data-testid="imageCount"
47
- >{{ imgCount }}</span
48
- >
49
- </div>
50
- <h3
51
- v-if="$slots.default"
52
- class="text-sm/5 font-medium group-hover:underline"
53
- :class="{
54
- 'ml-6': !isFulfilled,
55
- 'mr-1': $slots.planning,
56
- 'pr-16': $slots.planning,
57
- }"
58
- >
59
- <slot />
60
- </h3>
61
- </div>
62
-
63
- <!-- Text length -->
64
- <span
65
- v-if="$slots.textLength"
66
- class="text-xs text-neutral-subtle"
67
- :class="!isFulfilled ? 'ml-6' : ''"
68
- ><slot name="textLength"
69
- /></span>
70
- </div>
71
-
72
- <!-- Time published -->
73
- <span
74
- v-if="$slots.timePublished"
75
- class="pt-1 text-xs font-medium text-neutral-subtle"
76
- ><slot name="timePublished"
77
- /></span>
78
- </div>
79
- </div>
80
- </template>
81
- <script lang="ts">
82
- /**
83
- * @deprecated
84
- * Please replace with your own component
85
- */
86
- export default {
87
- name: "DpaMediaItem",
88
- };
89
- </script>
90
- <script setup lang="ts">
91
- import { computed, onMounted } from "vue";
92
-
93
- import UiIcon, { type UiIconName } from "../UiIcon/UiIcon.vue";
94
-
95
- type Genre = "audio" | "video" | "text" | "picture" | "graphic";
96
-
97
- const props = withDefaults(
98
- defineProps<{
99
- genre?: Genre;
100
- isFulfilled?: boolean;
101
- imgSrc?: string;
102
- imgAlt?: string;
103
- imgCount?: number;
104
- disabled?: boolean;
105
- }>(),
106
- {
107
- genre: "text",
108
- isFulfilled: false,
109
- imgSrc: "",
110
- imgAlt: "",
111
- imgCount: 0,
112
- disabled: false,
113
- },
114
- );
115
-
116
- const genreIcon = computed<UiIconName>(() => {
117
- const icons: Record<Genre, UiIconName> = {
118
- audio: props.isFulfilled ? "audio" : "audio",
119
- video: props.isFulfilled ? "video" : "video",
120
- text: props.isFulfilled ? "text" : "text",
121
- picture: props.isFulfilled ? "picture" : "picture",
122
- graphic: props.isFulfilled ? "graphic" : "graphic",
123
- };
124
-
125
- return icons[props.genre];
126
- });
127
-
128
- const classObject = computed(() => {
129
- const { isFulfilled } = props;
130
- if (!isFulfilled) {
131
- return "cursor-auto";
132
- }
133
- return props.disabled
134
- ? "cursor-not-allowed transition shadow-sm border border-neutral-faint"
135
- : "cursor-pointer transition shadow-sm hover:shadow-md group border border-neutral-faint hover:border-neutral-muted";
136
- });
137
-
138
- onMounted(() => {
139
- if (window.location.origin.includes("local")) {
140
- // eslint-disable-next-line no-console
141
- console.warn(
142
- "Component is deprecated. It will be removed in a future update.",
143
- );
144
- }
145
- });
146
- </script>
@@ -1,42 +0,0 @@
1
- # @deprecated
2
- Component will be removed in a future update
3
- # @dpa-shared-components/dpa-media-item
4
-
5
-
6
- ## Usage
7
-
8
- ```html
9
- <!-- SomeComponent.vue using DpaMediaItem -->
10
- <template>
11
- <dpa-media-item genre="text" is-fulfilled auto-size style="cursor: pointer;">
12
- <template #timePublished>15.11.2021 16:41</template>
13
- <tempate #description>News Feature im Basisdienst</tempate>
14
- <span>BKA-Chef: Cannabis bleibt beliebteste Droge in Deutschland</span>
15
- <template #textLength>104 dpa-Zeilen / 7176 Zeichen</template>
16
- </dpa-media-item>
17
- </template>
18
-
19
- <script setup>
20
- import DpaMediaItem from "@dpa-id-components/dpa-shared-components";
21
- </script>
22
- ```
23
-
24
- ## API
25
-
26
- ### Props
27
- | Name | Type | Default | Description |
28
- |---------------|--------------------------------------------------------------------------|----------|------------------------------------------------------------------------------------|
29
- | `genre` | `"audio" &#124; "video" &#124; "text" &#124; "picture" &#124; "graphic"` | `"text"` | Genre variant; either `"text"`, `"picture"` , `"graphic"`, `"video"` or `"audio"` |
30
- | `isFulfilled` | `Boolean` | `false` | Whether the media item has been fulfilled/delivered (`true`), or planned (`false`) |
31
- | `imgSrc` | `String` | `""` | The `src` attribute of the `img` tag used for the thumbnail of pictures |
32
- | `imgAlt` | `String` | `""` | The `alt` attribute of the `img` tag used for the thumbnail of pictures |
33
- | `imgCount` | `Number` | `0` | The number of pictures published in this media coverage item |
34
- | `disabled` | `Boolean` | `false` | Sets the cursor and hover state of the DpaMediaItem |
35
- ### Slots
36
- | Name | Description |
37
- |-----------------|-------------------------------------------------------------------------------------------------|
38
- | `default` | slot for the media item's headline/title |
39
- | `timePublished` | slot for the media item's time of publishing for fulfilled items |
40
- | `description` | slot for the media item's description placed above the headline |
41
- | `planning` | slot for the media item's planning notes (e.g. schedule) placed to the right of the description |
42
- | `textLength` | slot for the media item's text length (e.g. schedule) placed below the description/headline |
@@ -1,29 +0,0 @@
1
- # @dpa-shared-components/UiButtonGroup
2
-
3
- ## Usage
4
- A container component for groups of `UiButton` components.
5
-
6
-
7
- ```html
8
- <!-- SomeComponent.vue using UiButtonGroup -->
9
- <template>
10
- <UiButton
11
- >
12
- Click
13
- </UiButton>
14
- <UiButton
15
- >
16
- me
17
- </UiButton>
18
- </template>
19
-
20
- <script setup lang="ts">
21
- import {UiButton, UiButtonGroup} from "@dpa-id-components/dpa-shared-components";
22
- </script>
23
- ```
24
-
25
- ### Slots
26
-
27
- | Name | Description |
28
- |-----------|---------------------------------------------|
29
- | `default` | slot for the contain the button groups's content (either `UiButton` or `UiRadioButton`) |
@@ -1,16 +0,0 @@
1
- import { mount } from "@vue/test-utils";
2
- import { describe, expect, test } from "vitest";
3
-
4
- import UiButtonGroup from "./UiButtonGroup.vue";
5
-
6
- describe("UiButtonGroup", () => {
7
- test("renders UiButtonGroup with default slot content", () => {
8
- const wrapper = mount(UiButtonGroup, {
9
- slots: {
10
- default: "Default Slot",
11
- },
12
- });
13
-
14
- expect(wrapper.text()).toBe("Default Slot");
15
- });
16
- });
@@ -1,53 +0,0 @@
1
- import type {
2
- ComponentPropsAndSlots,
3
- Meta,
4
- StoryObj,
5
- } from "@storybook/vue3-vite";
6
- import { ref } from "vue";
7
-
8
- import UiButton from "../UiButton/UiButton.vue";
9
-
10
- import UiButtonGroup from "./UiButtonGroup.vue";
11
-
12
- type PropsAndCustomArgs = ComponentPropsAndSlots<typeof UiButtonGroup> & {
13
- activeButton: number;
14
- };
15
-
16
- const meta = {
17
- tags: ["deprecated"],
18
- argTypes: {
19
- activeButton: { control: "number" },
20
- },
21
- args: {
22
- activeButton: 1,
23
- },
24
- title: "Ui/UiButtonGroup",
25
- component: UiButtonGroup,
26
- } satisfies Meta<PropsAndCustomArgs>;
27
-
28
- export default meta;
29
- type Story = StoryObj<PropsAndCustomArgs>;
30
-
31
- export const Default: Story = {
32
- render: (args) => ({
33
- components: { UiButtonGroup, UiButton },
34
- setup() {
35
- const activeButton = ref(args.activeButton);
36
- const activateButton = (button: number) => (activeButton.value = button);
37
- return { args, activeButton, activateButton };
38
- },
39
- template: `
40
- <UiButtonGroup>
41
- <UiButton :appearance="activeButton === 1 ? 'primary' : 'ghost'" @click="activateButton(1)">
42
- Group
43
- </UiButton>
44
- <UiButton disabled disabled-variant="primary" @click="activateButton(2)">
45
- of
46
- </UiButton>
47
- <UiButton :appearance="activeButton === 3 ? 'primary' : 'ghost'" @click="activateButton(3)">
48
- buttons
49
- </UiButton>
50
- </UiButtonGroup>
51
- `,
52
- }),
53
- };
@@ -1,29 +0,0 @@
1
- <template>
2
- <div
3
- class="flex *:rounded-none *:border *:border-r-0 *:border-neutral-faint [&>*:first-child]:rounded-l-full [&>*:last-child]:rounded-r-full [&>*:last-child]:border-r"
4
- >
5
- <slot />
6
- </div>
7
- </template>
8
-
9
- <script lang="ts">
10
- import { onMounted } from "vue";
11
-
12
- /**
13
- * @deprecated
14
- * Please replace with your own component
15
- */
16
- export default {
17
- name: "UiMenuList",
18
- setup() {
19
- onMounted(() => {
20
- if (window.location.origin.includes("local")) {
21
- // eslint-disable-next-line no-console
22
- console.warn(
23
- "Component is deprecated. It will be removed in a future update.",
24
- );
25
- }
26
- });
27
- },
28
- };
29
- </script>
@@ -1,32 +0,0 @@
1
- # @deprecated
2
- Component will be removed in a future update
3
- # @dpa-shared-components/UiCard
4
-
5
- ## Usage
6
-
7
- ```html
8
- <!-- SomeComponent.vue using UiCard -->
9
- <template>
10
- <UiCard>Autor: Max Mustermann (Berlin), +49 30 1234-56478, max.mustermann@dpa.com</UiCard>
11
- </template>
12
-
13
- <script setup lang="ts">
14
- import { UiCard } from "@dpa-id-components/dpa-shared-components";
15
- </script>
16
- ```
17
-
18
- ## API
19
-
20
- ### Props
21
-
22
- This component has no properties
23
-
24
- ### Events
25
-
26
- This component emits no events
27
-
28
- ### Slots
29
-
30
- | Name | Description |
31
- |-----------|--------------------------------------------|
32
- | `default` | Slot for the rendering the cards's content |
@@ -1,16 +0,0 @@
1
- import { mount } from "@vue/test-utils";
2
- import { describe, expect, test } from "vitest";
3
-
4
- import UiCard from "./UiCard.vue";
5
-
6
- describe("UiCard", () => {
7
- test("renders Card with default slot content", () => {
8
- const wrapper = mount(UiCard, {
9
- slots: {
10
- default: "Default Slot",
11
- },
12
- });
13
-
14
- expect(wrapper.text()).toBe("Default Slot");
15
- });
16
- });