@dpa-id-components/dpa-shared-components 17.0.1 → 17.0.3

package/dist/{video overlay-Dsw-DZ-u.js → video overlay-BUexv_iN.js }

@@ -1,5 +1,5 @@
 import { createElementBlock as o, openBlock as t, createElementVNode as r } from "vue";
-import { _ as n } from "./index-XKGgygaS.js";
+import { _ as n } from "./index-Du3qH_Js.js";
 const l = {}, s = {
   width: "24",
   height: "24",

package/dist/{video-B-4XVtOK.js → video-DDCV7bON.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as e, openBlock as t, createElementVNode as o } from "vue";
-import { _ as r } from "./index-XKGgygaS.js";
+import { _ as r } from "./index-Du3qH_Js.js";
 const n = {}, s = {
   width: "24",
   height: "24",

package/dist/{video-circled-BiGX6-PS.js → video-circled-BW1KyeyP.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as t, openBlock as o, createElementVNode as r } from "vue";
-import { _ as C } from "./index-XKGgygaS.js";
+import { _ as C } from "./index-Du3qH_Js.js";
 const n = {}, s = {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 16 16",

package/dist/{video-filled-CzradZGP.js → video-filled-DXyjsv8q.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as t, openBlock as o, createElementVNode as r } from "vue";
-import { _ as n } from "./index-XKGgygaS.js";
+import { _ as n } from "./index-Du3qH_Js.js";
 const s = {}, C = {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 16 16",

package/dist/{video-rounded-jJE1t6Pc.js → video-rounded-B6ypLlTl.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as t, openBlock as o, createElementVNode as r } from "vue";
-import { _ as n } from "./index-XKGgygaS.js";
+import { _ as n } from "./index-Du3qH_Js.js";
 const s = {}, c = {
   width: "24",
   height: "24",

package/dist/{view-Dm2Pk0Sn.js → view-DgibDoaD.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as e, openBlock as t, createElementVNode as o } from "vue";
-import { _ as r } from "./index-XKGgygaS.js";
+import { _ as r } from "./index-Du3qH_Js.js";
 const n = {}, s = {
   width: "24",
   height: "24",

package/dist/{view-off-Xsshy6wP.js → view-off-C9X9_pcX.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as e, openBlock as t, createElementVNode as o } from "vue";
-import { _ as r } from "./index-XKGgygaS.js";
+import { _ as r } from "./index-Du3qH_Js.js";
 const n = {}, s = {
   width: "24",
   height: "24",

package/dist/{volume-up-BWmu2SKB.js → volume-up-DlKkHPJ_.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as e, openBlock as t, createElementVNode as o } from "vue";
-import { _ as r } from "./index-XKGgygaS.js";
+import { _ as r } from "./index-Du3qH_Js.js";
 const n = {}, l = {
   width: "24",
   height: "24",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dpa-id-components/dpa-shared-components",
-  "version": "17.0.1",
+  "version": "17.0.3",
   "description": "Shared Vue components library for dpa projects",
   "files": [
     "src",

package/{dist/src/components/UiCheckBox → src/components/UiCheckbox}/README.md

@@ -4,9 +4,9 @@
 
 ```vue
 <template>
-  <UiCheckBox required name="terms" color="blue">
+  <UiCheckbox required name="terms" color="blue">
     Accept terms and conditions
-  </UiCheckBox>
+  </UiCheckbox>
 </template>
 
 <script setup lang="ts">

package/src/components/UiIconButton/README.md

@@ -17,13 +17,6 @@ Color is set by text color:
 
 ## API
 
-iconName: typeof iconNames[number];
-title: string;
-disabled: boolean;
-backgroundColor: "blue" | "none";
-iconColor: "blue" | "white" | "gray";
-size: "small" | "medium" | "large" | "xl";
-
 ### Props
 
 | Name              | Type                                                 | Default  | Description                                                                           |

package/src/components/UiListItem/UiListItem.vue

@@ -14,7 +14,7 @@
     >
       <span class="flex items-center" data-testid="innerText">
         <span v-if="checkBoxMenu" class="inset-y-0 flex items-center pr-2">
-          <UiCheckBox
+          <UiCheckbox
             :color="checkBoxColor"
             :checked="isChecked"
             :disabled="disabled"
@@ -52,7 +52,7 @@
 
 <script setup lang="ts">
 import { computed } from "vue";
-import UiCheckBox from "../UiCheckBox/UiCheckBox.vue";
+import UiCheckbox from "../UiCheckbox/UiCheckbox.vue";
 import UiIcon, { type UiIconName } from "../UiIcon/UiIcon.vue";
 import { cn } from "../../utils/cn.js";
 

package/src/components/UiMenu/README.md

@@ -82,11 +82,11 @@ Wraps the UiListItem and uses the same settings as in the original UiMenu, helps
 |------------------|-----------------------|-------------|-----------------------------------------------------------|
 | `class?`         | `string`              | `''`        | Classes for the menu, get merged with original classes    |
 | `option?`        | `UiMenuOptionType<T>` | `undefined` | Option like within the `options` array prop of UiMenu.vue |
-| `listVariant?`   | `UiMenuListVariant`   | `blank`     | Provide the list variant, same as in UiMenu.vue           |
-| `iconSize?`      | `UiMenuIconSize`      | `small`     | Provide the icon size, same as in UiMenu.vue              |
-| `imageShape?`    | `UiMenuImageShape`    | `square`    | Provide the imageShape, same as in UiMenu.vue             |
-| `checkboxSize?`  | `UiMenuCheckboxSize`  | `medium`    | Provide the checkboxSize, same as in UiMenu.vue           |
-| `checkboxColor?` | `UiMenuCheckboxColor` | `blue`      | Provide the checkboxColor, same as in UiMenu.vue          |
+| `listVariant?`   | `"checkbox" &#124; "selectable" &#124; "blank"`   | `blank`     | Provide the list variant, same as in UiMenu.vue           |
+| `iconSize?`      | `"small" &#124; "medium" &#124; "large"`      | `small`     | Provide the icon size, same as in UiMenu.vue              |
+| `imageShape?`    | `"rounded" &#124; "square"`    | `square`    | Provide the imageShape, same as in UiMenu.vue             |
+| `checkboxSize?`  | `"small" &#124; "medium"`  | `medium`    | Provide the checkboxSize, same as in UiMenu.vue           |
+| `checkboxColor?` | `"blue" &#124; "gray"` | `blue`      | Provide the checkboxColor, same as in UiMenu.vue          |
 
 #### Slots
 

package/src/components/UiMenu/UiMenu.vue

@@ -149,6 +149,7 @@
     </Transition>
   </div>
 </template>
+
 <script setup lang="ts" generic="Value">
 import { computed, type HTMLAttributes, ref, watchPostEffect } from "vue";
 import {
@@ -165,27 +166,33 @@ import UiListItem from "../UiListItem/UiListItem.vue";
 import { vClickAway } from "../../directives/vClickAway.js";
 import UiButton from "../UiButton/UiButton.vue";
 import UiSimpleInput from "../UiSimpleInput/UiSimpleInput.vue";
-import type {
-  UiMenuCheckboxColor,
-  UiMenuCheckboxSize,
-  UiMenuGroupedOption,
-  UiMenuIconSize,
-  UiMenuImageShape,
-  UiMenuListVariant,
-  UiMenuOptionType,
-  UiMenuSelectedOption,
-} from "./UiMenuTypes";
 import { cn } from "../../utils/cn.js";
 import type { UiIconName } from "../UiIcon/UiIcon.vue";
 
+export type UiMenuOptionType<Value = unknown> = {
+  label: string;
+  imageSrc?: string | undefined;
+  selected: boolean;
+  value: Value;
+};
+
+export type UiMenuSelectedOption<Value = unknown> = UiMenuOptionType<Value> & {
+  index: number;
+};
+
+export type UiMenuGroupedOption<Value = unknown> = {
+  groupLabel: string;
+  options: UiMenuOptionType<Value>[];
+};
+
 defineSlots<{
   // Marking the slot as optional avoids inexplicable TypeScript errors in the storybook story (see https://github.com/vuejs/core/issues/10647).
   default?(props: {
-    checkboxColor: UiMenuCheckboxColor;
-    checkboxSize: UiMenuCheckboxSize;
-    iconSize: UiMenuIconSize;
-    imageShape: UiMenuImageShape;
-    listVariant: UiMenuListVariant;
+    checkboxColor: "blue" | "gray";
+    checkboxSize: "small" | "medium";
+    iconSize: "small" | "medium" | "large";
+    imageShape: "rounded" | "square";
+    listVariant: "checkbox" | "selectable" | "blank";
     options: UiMenuOptionType<Value>[];
     groupedOptions: UiMenuGroupedOption<Value>[];
   }): any;
@@ -204,17 +211,17 @@ const props = withDefaults(
     noTitle?: boolean;
     multiLabel?: string;
     filterButtonSize?: "small" | "xs";
-    iconSize?: UiMenuIconSize;
+    iconSize?: "small" | "medium" | "large";
     iconLeft?: UiIconName | null;
-    imageShape?: UiMenuImageShape;
-    checkboxSize?: UiMenuCheckboxSize;
+    imageShape?: "rounded" | "square";
+    checkboxSize?: "small" | "medium";
     buttonVariant?:
       | "blue-rounded"
       | "white-rounded"
       | "transparent-rounded"
       | "blank";
-    listVariant?: UiMenuListVariant;
-    checkboxColor?: UiMenuCheckboxColor;
+    listVariant?: "checkbox" | "selectable" | "blank";
+    checkboxColor?: "blue" | "gray";
     hasResetOption?: boolean;
     disabledReset?: boolean;
     resetLabel?: string;

package/src/components/UiMenu/UiMenuItem.vue

@@ -23,14 +23,7 @@
 
 <script setup lang="ts" generic="Value">
 import UiListItem from "../UiListItem/UiListItem.vue";
-import type {
-  UiMenuCheckboxColor,
-  UiMenuCheckboxSize,
-  UiMenuIconSize,
-  UiMenuImageShape,
-  UiMenuListVariant,
-  UiMenuOptionType,
-} from "./UiMenuTypes";
+import type { UiMenuOptionType } from "./UiMenu.vue";
 import type { HTMLAttributes } from "vue";
 import { cn } from "../../utils/cn.js";
 
@@ -38,11 +31,11 @@ const props = withDefaults(
   defineProps<{
     class?: HTMLAttributes["class"];
     option?: UiMenuOptionType<Value>;
-    listVariant?: UiMenuListVariant;
-    iconSize?: UiMenuIconSize;
-    imageShape?: UiMenuImageShape;
-    checkboxSize?: UiMenuCheckboxSize;
-    checkboxColor?: UiMenuCheckboxColor;
+    listVariant?: "checkbox" | "selectable" | "blank";
+    iconSize?: "small" | "medium" | "large";
+    imageShape?: "rounded" | "square";
+    checkboxSize?: "small" | "medium";
+    checkboxColor?: "blue" | "gray";
   }>(),
   {
     class: undefined,

package/src/components/index.ts

@@ -4,7 +4,7 @@ import UiBadge from "./UiBadge/UiBadge.vue";
 import UiButton from "./UiButton/UiButton.vue";
 import UiButtonGroup from "./UiButtonGroup/UiButtonGroup.vue";
 import UiCard from "./UiCard/UiCard.vue";
-import UiCheckbox from "./UiCheckBox/UiCheckBox.vue";
+import UiCheckbox from "./UiCheckbox/UiCheckbox.vue";
 import UiCheckBoxGroup from "./UiCheckBoxGroup/UiCheckBoxGroup.vue";
 import UiChip from "./UiChip/UiChip.vue";
 import UiCollapseNavigation from "./UiCollapseNavigation/UiCollapseNavigation.vue";
@@ -25,7 +25,7 @@ export type {
   UiMenuOptionType,
   UiMenuSelectedOption,
   UiMenuGroupedOption,
-} from "./UiMenu/UiMenuTypes.js";
+} from "./UiMenu/UiMenu.vue";
 import UiMenuList from "./UiMenu/UiMenuList.vue";
 import UiMenuItem from "./UiMenu/UiMenuItem.vue";
 import UiOverlay from "./UiOverlay/UiOverlay.vue";

package/src/compositions/useBreakpoints/useBreakpoints.ts

@@ -1,11 +1,20 @@
-import { useBreakpoints as vueUseBreakpoints } from "@vueuse/core";
+import {
+  useBreakpoints as vueUseBreakpoints,
+  type Breakpoints,
+} from "@vueuse/core";
 import { computed } from "vue";
-import screens from "../../tailwind/screens.js";
+
+// Deliberately not using `breakpointsTailwind` as exported by `@vueuse/core` as it doesn't pick up custom values from the CSS configuration meaning if we customize the breakpoints at some point, these values wouldn't be correct.
+const breakpointsTailwind: Breakpoints = {
+  sm: "640px",
+  md: "768px",
+  lg: "1024px",
+  xl: "1280px",
+  xxl: "1600px",
+};
 
 export function useBreakpoints() {
-  const breakpoints = vueUseBreakpoints({
-    ...screens,
-  });
+  const breakpoints = vueUseBreakpoints(breakpointsTailwind);
 
   const currentBreakpoint = breakpoints.current();
 

package/dist/components/UiMenu/UiMenuTypes.d.ts

@@ -1,18 +0,0 @@
-export type UiMenuOptionType<Value = unknown> = {
-    label: string;
-    imageSrc?: string | undefined;
-    selected: boolean;
-    value: Value;
-};
-export type UiMenuSelectedOption<Value = unknown> = UiMenuOptionType<Value> & {
-    index: number;
-};
-export type UiMenuGroupedOption<Value = unknown> = {
-    groupLabel: string;
-    options: UiMenuOptionType<Value>[];
-};
-export type UiMenuListVariant = "checkbox" | "selectable" | "blank";
-export type UiMenuIconSize = "small" | "medium" | "large";
-export type UiMenuImageShape = "rounded" | "square";
-export type UiMenuCheckboxSize = "small" | "medium";
-export type UiMenuCheckboxColor = "blue" | "gray";

package/dist/src/components/UiMenu/UiMenuTypes.ts

@@ -1,20 +0,0 @@
-export type UiMenuOptionType<Value = unknown> = {
-  label: string;
-  imageSrc?: string | undefined;
-  selected: boolean;
-  value: Value;
-};
-
-export type UiMenuSelectedOption<Value = unknown> = UiMenuOptionType<Value> & {
-  index: number;
-};
-
-export type UiMenuGroupedOption<Value = unknown> = {
-  groupLabel: string;
-  options: UiMenuOptionType<Value>[];
-};
-export type UiMenuListVariant = "checkbox" | "selectable" | "blank";
-export type UiMenuIconSize = "small" | "medium" | "large";
-export type UiMenuImageShape = "rounded" | "square";
-export type UiMenuCheckboxSize = "small" | "medium";
-export type UiMenuCheckboxColor = "blue" | "gray";

package/src/components/UiMenu/UiMenuTypes.ts

@@ -1,20 +0,0 @@
-export type UiMenuOptionType<Value = unknown> = {
-  label: string;
-  imageSrc?: string | undefined;
-  selected: boolean;
-  value: Value;
-};
-
-export type UiMenuSelectedOption<Value = unknown> = UiMenuOptionType<Value> & {
-  index: number;
-};
-
-export type UiMenuGroupedOption<Value = unknown> = {
-  groupLabel: string;
-  options: UiMenuOptionType<Value>[];
-};
-export type UiMenuListVariant = "checkbox" | "selectable" | "blank";
-export type UiMenuIconSize = "small" | "medium" | "large";
-export type UiMenuImageShape = "rounded" | "square";
-export type UiMenuCheckboxSize = "small" | "medium";
-export type UiMenuCheckboxColor = "blue" | "gray";