@dpa-id-components/dpa-shared-components 22.0.0-next.9 → 22.0.0

package/dist/eslint.base.config.js

@@ -30,10 +30,7 @@ export default defineConfigWithVueTs(
       "vue/no-v-html": "off",
     },
     languageOptions: {
-      globals: {
-        ...globals.node,
-        ...globals.browser,
-      },
+      globals: globals.browser,
     },
   },
 

package/dist/src/assets/icons/bot.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M12 3C12.5523 3 13 3.44772 13 4V7H18C19.6569 7 21 8.34315 21 10V13H22C22.5523 13 23 13.4477 23 14C23 14.5523 22.5523 15 22 15H21V18C21 19.6569 19.6569 21 18 21H6C4.34315 21 3 19.6569 3 18V15H2C1.44772 15 1 14.5523 1 14C1 13.4477 1.44772 13 2 13H3V10C3 8.34315 4.34315 7 6 7H11V5H8C7.44772 5 7 4.55228 7 4C7 3.44772 7.44772 3 8 3H12ZM6 9C5.44772 9 5 9.44772 5 10V18C5 18.5523 5.44772 19 6 19H18C18.5523 19 19 18.5523 19 18V10C19 9.44772 18.5523 9 18 9H6ZM9 12C9.55228 12 10 12.4477 10 13V15C10 15.5523 9.55228 16 9 16C8.44772 16 8 15.5523 8 15V13C8 12.4477 8.44772 12 9 12ZM15 12C15.5523 12 16 12.4477 16 13V15C16 15.5523 15.5523 16 15 16C14.4477 16 14 15.5523 14 15V13C14 12.4477 14.4477 12 15 12Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/dist/src/components/UiChip/UiChip.spec.ts

@@ -6,7 +6,7 @@ import UiChip from "./UiChip.vue";
 describe("UiChip", () => {
   test("renders sm size by default", () => {
     const wrapper = mount(UiChip);
-    expect(wrapper.classes("text-sm/5.5")).toBe(true);
+    expect(wrapper.classes("text-sm/6")).toBe(true);
   });
   test("renders md size", () => {
     const wrapper = mount(UiChip, {

package/dist/src/components/UiChip/UiChip.vue

@@ -31,8 +31,8 @@ defineEmits<{
 }>();
 
 const CHIP_SIZES: Record<Extract<Size, "xs" | "sm" | "md">, string> = {
-  xs: "text-xs",
-  sm: "text-sm/5.5",
+  xs: "text-xs/5",
+  sm: "text-sm/6",
   md: "text-sm/8",
 };
 

package/dist/src/components/UiDatePicker/UiDatePicker.vue

@@ -152,10 +152,7 @@ export interface PresetRange {
   name?: string;
 }
 export type DateType =
-  | Date
-  | [Date, Date]
-  | string
-  | { month: number; year: number };
+  Date | [Date, Date] | string | { month: number; year: number };
 
 const datePicker =
   useTemplateRef<InstanceType<typeof VueDatePicker>>("datePicker");
@@ -405,11 +402,17 @@ function formatInput(date: Date | [Date, Date]): string {
   --dp-hover-icon-color: var(--color-neutral);
   --dp-primary-disabled-color: var(--color-neutral-soft);
   --dp-primary-text-color: var(--color-neutral);
-  --dp-secondary-color: #c0c4cc;
+  --dp-secondary-color: oklch(0.82 0.012 264.559);
   --dp-border-color: var(--color-neutral-pale);
   --dp-menu-border-color: var(--color-neutral-pale);
-  --dp-range-between-dates-background-color: var(--dp-hover-color, #f3f3f3);
-  --dp-range-between-dates-text-color: var(--dp-hover-text-color, #212121);
-  --dp-range-between-border-color: var(--dp-hover-color, #f3f3f3);
+  --dp-range-between-dates-background-color: var(
+    --dp-hover-color,
+    oklch(0.964 0 0)
+  );
+  --dp-range-between-dates-text-color: var(
+    --dp-hover-text-color,
+    var(--color-neutral-primary)
+  );
+  --dp-range-between-border-color: var(--dp-hover-color, oklch(0.964 0 0));
 }
 </style>

package/dist/src/components/UiDialog/UiDialog.vue

@@ -13,9 +13,12 @@
   >
     <header
       v-if="$slots.header || hasCloseButton"
-      class="flex flex-wrap items-center justify-between gap-4 rounded-t-2xl bg-neutral-whisper px-4 py-2"
+      class="flex flex-wrap items-center justify-between gap-4 rounded-t-2xl bg-neutral-whisper py-2 pr-2 pl-4"
     >
-      <div v-if="$slots.header" class="text-lg font-semibold">
+      <div
+        v-if="$slots.header"
+        class="text-lg font-medium text-neutral-primary"
+      >
         <slot name="header" v-bind="{ close, requestClose }" />
       </div>
 
@@ -31,13 +34,13 @@
       </UiButton>
     </header>
 
-    <div v-if="$slots.default" class="space-y-2 px-4 py-3">
+    <div v-if="$slots.default" class="space-y-2 p-6">
       <slot />
     </div>
 
     <footer
       v-if="$slots.footer"
-      class="flex flex-wrap items-center justify-between gap-2 px-4 py-3"
+      class="flex flex-wrap items-center justify-between gap-2 px-4 pt-2 pb-4"
     >
       <slot name="footer" v-bind="{ close, requestClose }" />
     </footer>
@@ -98,7 +101,7 @@ defineExpose({
 @media (prefers-reduced-motion: no-preference) {
   /* Backdrop */
   .animate::backdrop {
-    background: rgb(0 0 0 / 0%);
+    background: oklch(0 0 0 / 0);
     transition:
       background 0.3s ease,
       display 0.2s ease allow-discrete,
@@ -106,10 +109,10 @@ defineExpose({
   }
 
   .animate[open]::backdrop {
-    background: rgb(0 0 0 / 50%);
+    background: oklch(0 0 0 / 0.5);
 
     @starting-style {
-      background: rgb(0 0 0 / 0%);
+      background: oklch(0 0 0 / 0);
     }
   }
 

package/dist/src/components/UiFilterBadge/UiFilterBadge.stories.ts

@@ -1,7 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/vue3-vite";
 
-import UiIconButton from "../UiIconButton/UiIconButton.vue";
-
 import UiFilterBadge from "./UiFilterBadge.vue";
 
 const meta = {
@@ -17,7 +15,7 @@ const meta = {
     setup() {
       return { args };
     },
-    components: { UiFilterBadge, UiIconButton },
+    components: { UiFilterBadge },
     template: "<UiFilterBadge v-bind='args'> slot </UiFilterBadge>",
   }),
 } satisfies Meta<typeof UiFilterBadge>;

package/dist/src/components/UiIcon/UiIcon.stories.ts

@@ -58,7 +58,7 @@ export const Overview: Story = {
           <UiIcon
             class="shrink-0"
             :class="{
-              'outline outline-alert-red-default': args.outline,
+              'outline outline-error': args.outline,
             }"
             v-bind="args"
             :name="icon"

package/dist/src/components/UiIcon/icons.ts

@@ -25,6 +25,7 @@ export const icons = {
   "book": () => import("../../assets/icons/book.vue"),
   "bookmark": () => import("../../assets/icons/bookmark.vue"),
   "bookmark-filled": () => import("../../assets/icons/bookmark-filled.vue"),
+  "bot": () => import('../../assets/icons/bot.vue'),
   "box": () => import("../../assets/icons/box.vue"),
   "bulb": () => import("../../assets/icons/bulb.vue"),
   "call": () => import("../../assets/icons/call.vue"),

package/dist/src/components/UiListItem/README.md

@@ -19,18 +19,19 @@
 
 ### Props
 
-| Name              | Type                        | Default    | Description                                              |
-|-------------------|-----------------------------|------------|----------------------------------------------------------|
-| `value`           | `string`                    | `""`       | Sets the value which gets emitted with the click event   |
-| `checkBoxMenu`    | `Boolean`                   | `false`    | Displays checkbox on the beginning of list item          |
-| `isChecked`       | `Boolean`                   | `false`    | Checked attribute of checkbox, if displayed              |
-| `selectable`      | `Boolean`                   | `false`    | Makes the list item selectable                           |
-| `selected`        | `Boolean`                   | `false`    | Displays checkmark at the end of the list item           |
-| `overrideClasses` | `String`                    | `false`    | Adds classes to the inner of the list item               |
-| `iconName`        | `UiIconName`                |            | Icon to be displayed at the beginning of the list item   |
-| `imageSrc`        | `String`                    | `""`       | Image to be displayed at the beginning of the list item. |
-| `imageShape`      | `"rounded" | "square"` | `"square"` | Shape pf the image to be displayed.                      |
-| `checkboxColor`   | `"blue" | "gray"`      | `"blue"`   | Checkbox color style.                                    |
+| Name              | Type                        | Default    | Description                                                         |
+|-------------------|-----------------------------|------------|---------------------------------------------------------------------|
+| `value`           | `string`                    | `""`       | Sets the value which gets emitted with the click event              |
+| `checkBoxMenu`    | `Boolean`                   | `false`    | Displays checkbox on the beginning of list item                     |
+| `isChecked`       | `Boolean`                   | `false`    | Checked attribute of checkbox, if displayed                         |
+| `selectable`      | `Boolean`                   | `false`    | Makes the list item selectable                                      |
+| `selected`        | `Boolean`                   | `false`    | Displays checkmark at the end of the list item                      |
+| `overrideClasses` | `String`                    | `false`    | Adds classes to the inner of the list item                          |
+| `iconName`        | `UiIconName`                |            | Icon to be displayed at the beginning of the list item              |
+| `iconSize`        | `sm` `md` `lg`              |            | Size of the checkmark icon when selected and selectable is set true |
+| `imageSrc`        | `String`                    | `""`       | Image to be displayed at the beginning of the list item.            |
+| `imageShape`      | `"rounded" | "square"` | `"square"` | Shape pf the image to be displayed.                                 |
+| `checkboxColor`   | `"blue" | "gray"`      | `"blue"`   | Checkbox color style.                                               |
 
 ### Events
 

package/dist/src/components/UiListItem/UiListItem.stories.ts

@@ -1,36 +1,10 @@
 import type { Meta, StoryObj } from "@storybook/vue3-vite";
 
-import { icons } from "../UiIcon/icons.ts";
-
 import UiListItem from "./UiListItem.vue";
 
 const meta = {
   title: "Ui/UiListItem",
   component: UiListItem,
-  argTypes: {
-    iconName: {
-      control: "select",
-      options: Object.keys(icons),
-    },
-    iconSize: {
-      control: "select",
-      options: ["small", "medium", "large"],
-    },
-    imageSrc: {
-      control: "text",
-    },
-    imageShape: {
-      control: "select",
-      options: ["rounded", "square"],
-    },
-    value: { control: false },
-    checkBoxMenu: { control: "boolean" },
-    isChecked: { control: "boolean" },
-    selected: { control: "boolean" },
-    selectable: { control: "boolean" },
-    disabled: { control: "boolean" },
-    overrideClasses: { control: "text" },
-  },
   args: {
     iconName: undefined,
     iconSize: "md",

package/dist/src/components/UiListItem/UiListItem.vue

@@ -2,7 +2,7 @@
   <li
     :class="
       cn(
-        'flex cursor-pointer list-none items-center gap-2 px-4 py-1.5 text-sm/normal text-neutral-emphasis select-none hover:text-primary focus:outline-hidden focus-visible:focus-outline focus-visible:-outline-offset-2',
+        'flex cursor-pointer list-none items-center gap-2 p-2 text-sm/4 text-neutral-primary select-none hover:bg-neutral-whisper hover:text-primary focus:bg-neutral-faint focus:outline-hidden focus-visible:focus-outline focus-visible:-outline-offset-2',
         {
           'cursor-default text-neutral-medium': disabled,
           'is-selected': selected,

package/dist/src/components/UiMediaTypeIcon/UiMediaTypeIcon.stories.ts

@@ -58,7 +58,7 @@ export const Overview: Story = {
           <UiMediaTypeIcon
             class="shrink-0"
             :class="{
-              'outline outline-alert-red-default': args.outline,
+              'outline outline-error': args.outline,
             }"
             v-bind="args"
             :name="icon"

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

@@ -57,6 +57,9 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
+  args: {
+    buttonAppearance: "fill-emphasis",
+  },
   render: (args) => ({
     setup() {
       const options = ref<UiMenuOptionType<string>[]>([
@@ -111,7 +114,7 @@ export const Default: Story = {
     },
     components: { UiMenu },
     template: /*html*/ `
-    <aside class="w-50 h-200 p-4 bg-accent-green">
+    <aside>
       <UiMenu
         v-bind="args"
         v-model:query="args.query"
@@ -128,6 +131,87 @@ export const Default: Story = {
   }),
 };
 
+export const WidthOverride: Story = {
+  args: {
+    buttonAppearance: "fill-emphasis",
+  },
+  render: (args) => ({
+    setup() {
+      const options = ref<UiMenuOptionType<string>[]>([
+        {
+          label: "Option 1",
+          value: "value 1",
+          selected: true,
+          iconName: "info",
+        },
+        {
+          label: "Option 2 is really long, much longer than the rest",
+          value: "value 2",
+          selected: false,
+          iconName: "alert",
+          hasDividerAbove: true,
+        },
+        {
+          label: "Option 3",
+          value: "value 3",
+          selected: false,
+          iconName: "bulb",
+        },
+        {
+          label: "Option 4",
+          value: "value 4",
+          selected: false,
+          iconName: "language",
+        },
+      ]);
+      const filteredOptions = ref(Array.from(options.value));
+
+      const onSelect = (selectedOption: UiMenuSelectedOption<string>) => {
+        for (const option of filteredOptions.value) {
+          option.selected =
+            option.value === selectedOption.value ? true : false;
+        }
+      };
+
+      const onUpdateQuery = (value: string) => {
+        filteredOptions.value = options.value.filter((option) =>
+          option.label.toLowerCase().includes(value.toLowerCase()),
+        );
+      };
+
+      return {
+        args,
+        onSelect,
+        onUpdateQuery,
+        filteredOptions,
+        options,
+      };
+    },
+    components: { UiMenu },
+    template: /*html*/ `
+    <aside class="w-70 h-200 p-4 bg-neutral-pale space-y-4">
+      <UiMenu
+        class="w-full"
+        v-bind="args"
+        v-model:query="args.query"
+        :options="filteredOptions"
+        @option-selected="(option)=> { onSelect(option); optionSelected(option); }"
+        @update:query="(value) => { onUpdateQuery(value); updateQuery(value); }"
+      />
+      <UiMenu
+        class="w-full"
+        v-bind="args"
+        :disabled="true"
+      />
+    </aside>
+  `,
+    methods: {
+      optionSelected: action("option-selected"),
+      updateQuery: action("update:query"),
+    },
+  }),
+};
+
 export const GroupedOptions: Story = {
   args: {
     hasResetOption: true,
@@ -251,7 +335,6 @@ export const GroupedOptions: Story = {
         v-bind="args"
         v-model:query="args.query"
         :grouped-options="filteredOptions"
-        has-search
         @option-selected="(option)=> { onSelect(option); optionSelected(option); }"
         @update:query="(value) => { onUpdateQuery(value); updateQuery(value); }"
       />

package/dist/src/components/UiMenu/UiMenu.vue

@@ -17,11 +17,11 @@
         data-testid="menu-button"
         @click="toggle"
       >
-        <div class="flex items-center gap-2">
-          <UiIcon v-if="iconLeft" :name="iconLeft" size="sm" />
-          {{ selectedOptionLabel }}
+        <div class="flex min-w-0 items-center gap-2 overflow-hidden">
+          <UiIcon v-if="iconLeft" class="shrink-0" :name="iconLeft" size="sm" />
+          <span class="truncate">{{ selectedOptionLabel }}</span>
         </div>
-        <UiIcon name="chevron-down" size="sm" />
+        <UiIcon class="shrink-0" name="chevron-down" size="sm" />
       </UiButton>
     </template>
 
@@ -30,7 +30,7 @@
     >
       <div
         v-if="hasSearch"
-        class="flex items-center gap-2 rounded-t-lg px-4 pt-2.5 pb-1.5 text-neutral-primary [&:has(>input:focus-visible)]:focus-outline [&:has(>input:focus-visible)]:-outline-offset-2"
+        class="flex items-center gap-2 rounded-t-lg p-2 text-neutral-primary [&:has(>input:focus-visible)]:focus-outline [&:has(>input:focus-visible)]:-outline-offset-2"
       >
         <UiIcon
           class="shrink-0 text-neutral-emphasis"
@@ -42,7 +42,7 @@
           v-model="queryModel"
           type="text"
           spellcheck="false"
-          class="w-full text-sm focus:outline-hidden"
+          class="w-full text-sm/4 focus:outline-hidden"
           :placeholder="searchPlaceholder"
           data-testid="menu-search-input"
         />
@@ -70,7 +70,7 @@
             <template v-if="group.options.length > 0">
               <li
                 v-if="group.groupLabel"
-                class="flex h-6 items-center bg-neutral-faint px-4 text-xs font-semibold tracking-wider text-neutral-subtle uppercase"
+                class="flex h-6 items-center bg-neutral-faint px-2 text-xs font-semibold tracking-wider text-neutral-subtle uppercase"
               >
                 {{ group.groupLabel }}
               </li>
@@ -87,7 +87,6 @@
                 :image-src="option.imageSrc"
                 :icon-name="option.iconName"
                 :checkbox-appearance="checkboxAppearance"
-                class="hover:bg-neutral-whisper focus:bg-neutral-faint"
                 :class="{
                   'border-t': option.hasDividerAbove,
                 }"

package/dist/src/components/UiSelect/UiSelect.vue

@@ -89,7 +89,7 @@ select,
 }
 
 ::picker(select) {
-  @apply mt-1 overscroll-none rounded-lg border border-neutral-faint shadow-md;
+  @apply my-1 overscroll-none rounded-lg border border-neutral-faint shadow-md;
 }
 
 select::picker-icon {

package/dist/src/components/index.ts

@@ -1,24 +1,16 @@
-import DpaMediaItem from "./DpaMediaItem/DpaMediaItem.vue";
 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 UiCheckBoxGroup from "./UiCheckBoxGroup/UiCheckBoxGroup.vue";
 import UiChip from "./UiChip/UiChip.vue";
-import UiCollapseNavigation from "./UiCollapseNavigation/UiCollapseNavigation.vue";
 import UiColorPicker from "./UiColorPicker/UiColorPicker.vue";
 import UiDatePicker from "./UiDatePicker/UiDatePicker.vue";
 import UiDialog from "./UiDialog/UiDialog.vue";
 import UiFilterBadge from "./UiFilterBadge/UiFilterBadge.vue";
-import UiFilterButton from "./UiFilterButton/UiFilterButton.vue";
 import UiIcon from "./UiIcon/UiIcon.vue";
 export type { UiIconName } from "./UiIcon/UiIcon.vue";
-import UiIconButton from "./UiIconButton/UiIconButton.vue";
 import UiInfoContent from "./UiInfoContent/UiInfoContent.vue";
 import UiInput from "./UiInput/UiInput.vue";
 import UiLabel from "./UiLabel/UiLabel.vue";
-import UiList from "./UiList/UiList.vue";
 import UiListItem from "./UiListItem/UiListItem.vue";
 import UiMediaTypeIcon from "./UiMediaTypeIcon/UiMediaTypeIcon.vue";
 export type { UiMediaTypeIconName } from "./UiMediaTypeIcon/UiMediaTypeIcon.vue";
@@ -28,66 +20,41 @@ export type {
   UiMenuOptionType,
   UiMenuSelectedOption,
 } from "./UiMenu/UiMenu.vue";
-import UiMenuItem from "./UiMenu/UiMenuItem.vue";
-import UiMenuList from "./UiMenu/UiMenuList.vue";
-import UiOverlay from "./UiOverlay/UiOverlay.vue";
-import UiOverlayMenu from "./UiOverlayMenu/UiOverlayMenu.vue";
 import UiPopover from "./UiPopover/UiPopover.vue";
 import UiRadioButton from "./UiRadioButton/UiRadioButton.vue";
-import UiRadioInputGroup from "./UiRadioInputGroup/UiRadioInputGroup.vue";
-export type { UiRadioInputGroupOption } from "./UiRadioInputGroup/UiRadioInputGroup.vue";
 import UiSearchBar from "./UiSearchBar/UiSearchBar.vue";
 import UiSearchInput from "./UiSearchInput/UiSearchInput.vue";
-import UiSection from "./UiSection/UiSection.vue";
-import UiSectionDivider from "./UiSectionDivider/UiSectionDivider.vue";
 import UiSelect from "./UiSelect/UiSelect.vue";
 import UiSkeletonBox from "./UiSkeletonBox/UiSkeletonBox.vue";
 import UiSnackbar from "./UiSnackbar/UiSnackbar.vue";
 import UiSpinner from "./UiSpinner/UiSpinner.vue";
-import UiTextButton from "./UiTextButton/UiTextButton.vue";
 import UiToggleButton from "./UiToggleButton/UiToggleButton.vue";
 import UiTooltip from "./UiTooltip/UiTooltip.vue";
 
 export {
-  DpaMediaItem,
   UiBadge,
   UiButton,
-  UiButtonGroup,
-  UiCard,
   UiCheckbox,
-  UiCheckBoxGroup,
   UiChip,
-  UiCollapseNavigation,
   UiColorPicker,
   UiDatePicker,
   UiDialog,
   UiFilterBadge,
-  UiFilterButton,
   UiIcon,
-  UiIconButton,
   UiInfoContent,
   UiInput,
   UiLabel,
-  UiList,
   UiListItem,
   UiMediaTypeIcon,
   UiMenu,
-  UiMenuItem,
-  UiMenuList,
-  UiOverlay,
-  UiOverlayMenu,
   UiPopover,
   UiRadioButton,
-  UiRadioInputGroup,
   UiSearchBar,
   UiSearchInput,
-  UiSection,
-  UiSectionDivider,
   UiSelect,
   UiSkeletonBox,
   UiSnackbar,
   UiSpinner,
-  UiTextButton,
   UiToggleButton,
   UiTooltip,
 };