@dpa-id-components/dpa-shared-components 22.0.0-next.12 → 22.0.0-next.14

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/UiButtonGroup/UiButtonGroup.vue

@@ -14,7 +14,7 @@ import { onMounted } from "vue";
  * Please replace with your own component
  */
 export default {
-  name: "UiMenuList",
+  name: "UiButtonGroup",
   setup() {
     onMounted(() => {
       if (window.location.origin.includes("local")) {

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");

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>

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/UiIconButton/UiIconButton.vue

@@ -97,8 +97,7 @@ const buttonSizeClass = computed(() => {
 
 const iconSize = computed(() => {
   return sizeVariants[props.size as keyof typeof sizeVariants].iconSize as
-    | "lg"
-    | "sm";
+    "lg" | "sm";
 });
 
 onMounted(() => {

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/UiMenu/UiMenu.stories.ts

@@ -335,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

@@ -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/index.ts

@@ -1,12 +1,8 @@
-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";
@@ -30,16 +26,12 @@ export type {
 } 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";
@@ -49,15 +41,11 @@ 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,
@@ -74,15 +62,11 @@ export {
   UiMenu,
   UiMenuItem,
   UiMenuList,
-  UiOverlay,
-  UiOverlayMenu,
   UiPopover,
   UiRadioButton,
   UiRadioInputGroup,
   UiSearchBar,
   UiSearchInput,
-  UiSection,
-  UiSectionDivider,
   UiSelect,
   UiSkeletonBox,
   UiSnackbar,