@dpa-id-components/dpa-shared-components 18.0.4 → 18.2.0

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

@@ -3,7 +3,11 @@ import { action } from "storybook/actions";
 import { computed, ref } from "vue";
 
 import { icons } from "../UiIcon/icons.js";
-import UiMenu from "./UiMenu.vue";
+import UiMenu, {
+  type UiMenuGroupedOption,
+  type UiMenuOptionType,
+  type UiMenuSelectedOption,
+} from "./UiMenu.vue";
 
 const meta = {
   title: "Ui/UiMenu",
@@ -111,7 +115,7 @@ type Story = StoryObj<typeof meta>;
 
 const renderDefault: Story["render"] = (args) => ({
   setup() {
-    const options = ref([
+    const options = ref<UiMenuOptionType<string>[]>([
       {
         label: "Option 1",
         value: "value 1",
@@ -140,7 +144,7 @@ const renderDefault: Story["render"] = (args) => ({
     });
     const onClose = () => (isOpen.value = false);
     const onOpen = () => (isOpen.value = true);
-    const onSelect = (e: { index: number; value: string }) => {
+    const onSelect = (e: UiMenuSelectedOption<string>) => {
       filteredOptions.value[e.index].selected =
         !filteredOptions.value[e.index].selected;
     };
@@ -168,8 +172,19 @@ const renderDefault: Story["render"] = (args) => ({
     };
   },
   components: { UiMenu },
-  template:
-    "<UiMenu v-bind='args' :options='filteredOptions' :is-open='isOpen' :disabled-reset='resetIsDisabled' @option-selected='(e)=> {onSelect(e); optionSelected(e)}' @open='() => {onOpen(); open();}' @close='() => {onClose(); close();}' @input='(e) => {onInput(e); input(e);}'  @reset='() => {onReset(); reset();}'></UiMenu>",
+  template: `
+    <UiMenu
+      v-bind="args"
+      :options="filteredOptions"
+      :is-open="isOpen"
+      :disabled-reset="resetIsDisabled"
+      @option-selected="(e)=> { onSelect(e); optionSelected(e); }"
+      @open="() => { onOpen(); open(); }"
+      @close="() => { onClose(); close(); }"
+      @input="(e) => { onInput(e); input(e); }"
+      @reset="() => { onReset(); reset(); }"
+    />
+  `,
   methods: {
     open: action("open"),
     close: action("close"),
@@ -182,40 +197,7 @@ const renderDefault: Story["render"] = (args) => ({
 export const Default: Story = {
   render: renderDefault,
 };
-export const WithBlankButton: Story = {
-  render: renderDefault,
-  args: {
-    buttonVariant: "blank",
-  },
-};
-export const WithCheckboxes: Story = {
-  render: renderDefault,
-  args: {
-    listVariant: "checkbox",
-  },
-};
-
-export const WithCheckmark: Story = {
-  render: renderDefault,
-  args: {
-    listVariant: "selectable",
-  },
-};
-export const WithFullWidth: Story = {
-  render: renderDefault,
-  args: {
-    listVariant: "selectable",
-    listWidth: "full",
-  },
-};
 
-export const WithMaxWidth: Story = {
-  render: renderDefault,
-  args: {
-    listVariant: "selectable",
-    listWidth: "max",
-  },
-};
 export const WithResetAndSearch: Story = {
   render: renderDefault,
   args: {
@@ -232,54 +214,85 @@ export const WithResetAndSearch: Story = {
 };
 
 export const WithGroupedOptions: Story = {
+  args: {
+    hasResetOption: true,
+    hasSearch: true,
+    resetLabel: "Zurücksetzen",
+    searchPlaceholder: "Suchen",
+    buttonVariant: "transparent-rounded",
+    listVariant: "checkbox",
+    checkboxSize: "small",
+    defaultTitle: "Optionen",
+    hasAutoFocus: true,
+  },
   render: (args) => ({
     setup() {
-      const groupedOptions = ref([
+      const groupedOptions = ref<UiMenuGroupedOption<string>[]>([
         {
           options: [
             {
-              label: "Option 1",
-              value: "value 1",
+              label: "Four Tet",
+              value: "four-tet",
               selected: true,
             },
             {
-              label: "Option 2",
-              value: "value 2",
+              label: "Floating Points",
+              value: "floating-points",
               selected: false,
             },
             {
-              label: "Option 3",
-              value: "value 3",
+              label: "Burial",
+              value: "burial",
               selected: false,
             },
             {
-              label: "Option 4",
-              value: "value 4",
+              label: "Daphni",
+              value: "daphni",
               selected: false,
             },
           ],
         },
         {
-          groupLabel: "Group 2",
+          groupLabel: "Aliases",
           options: [
             {
-              label: "Option 1",
-              value: "value 1",
+              label: "KH",
+              value: "alias-1",
               selected: true,
             },
             {
-              label: "Option 2",
-              value: "value 2",
+              label: "△▃△▓",
+              value: "alias-2",
+              selected: false,
+            },
+            {
+              label: "⣎⡇ꉺლ༽இ•̛)ྀ◞ ༎ຶ ༽ৣৢ؞ৢ؞ؖ ꉺლ",
+              value: "alias-3",
+              selected: false,
+            },
+            {
+              label: "00110100 01010100",
+              value: "alias-4",
+              selected: false,
+            },
+            {
+              label: "4T Recordings",
+              value: "alias-5",
               selected: false,
             },
             {
-              label: "Option 3",
-              value: "value 3",
+              label: "4TLRPercussions",
+              value: "alias-6",
               selected: false,
             },
             {
-              label: "Option 4",
-              value: "value 4",
+              label: "00000ooooo",
+              value: "alias-7",
+              selected: false,
+            },
+            {
+              label: "Joshua Falken",
+              value: "alias-8",
               selected: false,
             },
           ],
@@ -295,7 +308,7 @@ export const WithGroupedOptions: Story = {
       });
       const onClose = () => (isOpen.value = false);
       const onOpen = () => (isOpen.value = true);
-      const onSelect = (e: { index: number; value: string }) => {
+      const onSelect = (e: UiMenuSelectedOption<string>) => {
         filteredOptions.value.forEach(({ options }, groupIndex) => {
           options.forEach(({ value }, optionsIndex) => {
             if (value === e.value) {
@@ -340,16 +353,16 @@ export const WithGroupedOptions: Story = {
     components: { UiMenu },
     template: `
       <UiMenu
-        v-bind='args'
+        v-bind="args"
         :grouped-options="filteredOptions"
         :is-open="isOpen"
         has-search
-        :disabled-reset='resetIsDisabled'
-        @option-selected='(e)=> {onSelect(e); optionSelected(e)}'
-        @open='() => {onOpen(); open();}'
-        @close='() => {onClose(); close();}'
-        @input='(e) => {onInput(e); input(e);}'
-        @reset='() => {onReset(); reset();}'
+        :disabled-reset="resetIsDisabled"
+        @option-selected="(e)=> { onSelect(e); optionSelected(e); }"
+        @open="() => { onOpen(); open(); }"
+        @close="() => { onClose(); close(); }"
+        @input="(e) => { onInput(e); input(e); }"
+        @reset="() => { onReset(); reset(); }"
       />
     `,
     methods: {
@@ -360,22 +373,11 @@ export const WithGroupedOptions: Story = {
       reset: action("reset"),
     },
   }),
-  args: {
-    hasResetOption: true,
-    hasSearch: true,
-    resetLabel: "Zurücksetzen",
-    searchPlaceholder: "Suchen",
-    buttonVariant: "transparent-rounded",
-    listVariant: "checkbox",
-    checkboxSize: "small",
-    defaultTitle: "Optionen",
-    hasAutoFocus: true,
-  },
 };
 
 const renderWithImage: Story["render"] = (args) => ({
   setup() {
-    const options = ref([
+    const options = ref<UiMenuOptionType<string>[]>([
       {
         label: "T-Online",
         value: "t-online",
@@ -398,7 +400,7 @@ const renderWithImage: Story["render"] = (args) => ({
     });
     const onClose = () => (isOpen.value = false);
     const onOpen = () => (isOpen.value = true);
-    const onSelect = (e: { index: number; value: string }) => {
+    const onSelect = (e: UiMenuSelectedOption<string>) => {
       filteredOptions.value[e.index].selected =
         !filteredOptions.value[e.index].selected;
     };
@@ -426,8 +428,19 @@ const renderWithImage: Story["render"] = (args) => ({
     };
   },
   components: { UiMenu },
-  template:
-    "<UiMenu v-bind='args' :options='filteredOptions' :is-open='isOpen' :disabled-reset='resetIsDisabled' @option-selected='(e)=> {onSelect(e); optionSelected(e)}' @open='() => {onOpen(); open();}' @close='() => {onClose(); close();}' @input='(e) => {onInput(e); input(e);}'  @reset='() => {onReset(); reset();}'></UiMenu>",
+  template: `
+    <UiMenu
+      v-bind="args"
+      :options="filteredOptions"
+      :is-open="isOpen"
+      :disabled-reset="resetIsDisabled"
+      @option-selected="(e)=> { onSelect(e); optionSelected(e); }"
+      @open="() => { onOpen(); open(); }"
+      @close="() => { onClose(); close(); }"
+      @input="(e) => { onInput(e); input(e); }"
+      @reset="() => { onReset(); reset(); }"
+    />
+  `,
   methods: {
     open: action("open"),
     close: action("close"),
@@ -447,7 +460,7 @@ export const WithImages: Story = {
 
 const renderDefaultAnimated: Story["render"] = (args) => ({
   setup() {
-    const options = ref([
+    const options = ref<UiMenuOptionType<string>[]>([
       {
         label: "Option 1",
         value: "value 1",
@@ -476,7 +489,7 @@ const renderDefaultAnimated: Story["render"] = (args) => ({
     });
     const onClose = () => (isOpen.value = false);
     const onOpen = () => (isOpen.value = true);
-    const onSelect = (e: { index: number; value: string }) => {
+    const onSelect = (e: UiMenuSelectedOption<string>) => {
       filteredOptions.value[e.index].selected =
         !filteredOptions.value[e.index].selected;
     };
@@ -504,8 +517,20 @@ const renderDefaultAnimated: Story["render"] = (args) => ({
     };
   },
   components: { UiMenu },
-  template:
-    "<UiMenu    v-bind='args' :options='filteredOptions' :is-open='isOpen' :animate='true' :disabled-reset='resetIsDisabled' @option-selected='(e)=> {onSelect(e); optionSelected(e)}' @open='() => {onOpen(); open();}' @close='() => {onClose(); close();}' @input='(e) => {onInput(e); input(e);}'  @reset='() => {onReset(); reset();}'></UiMenu>",
+  template: `
+    <UiMenu
+      v-bind="args"
+      :options="filteredOptions"
+      :is-open="isOpen"
+      :animate="true"
+      :disabled-reset="resetIsDisabled"
+      @option-selected="(e)=> { onSelect(e); optionSelected(e); }"
+      @open="() => { onOpen(); open(); }"
+      @close="() => { onClose(); close(); }"
+      @input="(e) => { onInput(e); input(e); }"
+      @reset="() => { onReset(); reset(); }"
+    />
+  `,
   methods: {
     open: action("open"),
     close: action("close"),

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

@@ -74,7 +74,12 @@
             :grouped-options="groupedOptions"
           >
             <ul
-              v-if="!!groupedOptions"
+              v-if="
+                Array.isArray(groupedOptions) &&
+                groupedOptions.some(
+                  (groupedOption) => groupedOption.options.length > 0,
+                )
+              "
               class="max-h-80 overflow-y-auto"
               tabindex="0"
             >
@@ -82,29 +87,32 @@
                 v-for="groupedOption in groupedOptions"
                 :key="groupedOption.groupLabel"
               >
-                <li
-                  v-if="!!groupedOption.groupLabel"
-                  class="flex h-6 items-center border-t bg-gray-100 px-4 text-xs font-semibold tracking-wider text-gray-700 uppercase first:border-t-0"
-                >
-                  {{ groupedOption.groupLabel }}
-                </li>
-                <UiListItem
-                  v-for="(option, index) in groupedOption.options"
-                  :key="`${groupedOption.groupLabel}-menuOptions-${index}`"
-                  :selected="option.selected"
-                  :selectable="listVariant === 'selectable'"
-                  :is-checked="option.selected"
-                  :check-box-menu="listVariant === 'checkbox'"
-                  :icon-size="iconSize"
-                  :image-shape="imageShape"
-                  :image-src="option.imageSrc"
-                  :checkbox-size="checkboxSize"
-                  :check-box-color="checkboxColor"
-                  class="hover:bg-gray-100 focus:bg-gray-300"
-                  :data-testid="`menu-option-button-${index}`"
-                  @list-item-click="selectOption(option)"
-                  >{{ option.label }}
-                </UiListItem>
+                <template v-if="groupedOption.options.length > 0">
+                  <li
+                    v-if="groupedOption.groupLabel"
+                    class="flex h-6 items-center border-t bg-gray-100 px-4 text-xs font-semibold tracking-wider text-gray-700 uppercase first:border-t-0"
+                  >
+                    {{ groupedOption.groupLabel }}
+                  </li>
+
+                  <UiListItem
+                    v-for="(option, index) in groupedOption.options"
+                    :key="`${groupedOption.groupLabel}-menuOptions-${index}`"
+                    :selected="option.selected"
+                    :selectable="listVariant === 'selectable'"
+                    :is-checked="option.selected"
+                    :check-box-menu="listVariant === 'checkbox'"
+                    :icon-size="iconSize"
+                    :image-shape="imageShape"
+                    :image-src="option.imageSrc"
+                    :checkbox-size="checkboxSize"
+                    :check-box-color="checkboxColor"
+                    class="hover:bg-gray-100 focus:bg-gray-300"
+                    :data-testid="`menu-option-button-${index}`"
+                    @list-item-click="selectOption(option)"
+                    >{{ option.label }}
+                  </UiListItem>
+                </template>
               </template>
             </ul>
             <ul v-else class="max-h-60 overflow-y-auto" tabindex="0">
@@ -184,7 +192,7 @@ export type UiMenuSelectedOption<Value = unknown> = UiMenuOptionType<Value> & {
 };
 
 export type UiMenuGroupedOption<Value = unknown> = {
-  groupLabel: string;
+  groupLabel?: string;
   options: UiMenuOptionType<Value>[];
 };
 

package/dist/src/components/UiRadioInputGroup/UiRadioInputGroup.vue

@@ -9,7 +9,7 @@
     ]"
   >
     <li v-for="option in internalOptions" :key="option.value">
-      <label class="flex items-center text-sm">
+      <UiLabel class="flex">
         <input
           v-model="pickedOption"
           :name="groupName"
@@ -22,11 +22,11 @@
         />
         <span
           class="ml-1 cursor-pointer"
-          :class="[labelClass, disabled ? 'text-gray-500' : 'text-inherit']"
+          :class="[labelClass, disabled ? 'text-gray-500' : '']"
         >
           {{ option.label }}
         </span>
-      </label>
+      </UiLabel>
     </li>
   </ul>
 </template>
@@ -35,6 +35,7 @@
 import { computed } from "vue";
 
 import { cn } from "../../utils/cn.js";
+import UiLabel from "../UiLabel/UiLabel.vue";
 
 export interface UiRadioInputGroupOption<T> {
   value: T;

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

@@ -2,36 +2,36 @@
 
 ## Usage
 
-```html
+```vue
 <template>
-    <UiSearchInput
-            :has-add-entry-option="true"
-            :model-value="internalValue"
-            label="This is a Label"
-            placeholder="This is a placeholder"
-            @update:model-value="handleInput"
-            @handle-keypress="handleKeypress"
-            @blur="handleBlur"
-    />
+  <UiSearchInput
+    :has-add-entry-option="true"
+    :model-value="internalValue"
+    label="This is a Label"
+    placeholder="This is a placeholder"
+    @update:model-value="handleInput"
+    @handle-keypress="handleKeypress"
+    @blur="handleBlur"
+  />
 </template>
 
 <script setup lang="ts">
-    import { UiSearchInput } from "./UiSearchInput.vue";
+  import { UiSearchInput } from "./UiSearchInput.vue";
 
-    const internalValue = ref([""]);
-    function handleInput(newValue) {
-        internalValue.value = newValue;
-    }
+  const internalValue = ref([""]);
+  function handleInput(newValue) {
+    internalValue.value = newValue;
+  }
 
-    function handleKeypress({ event, value }) {
-        if (event.key === 'Enter') {
-            // do something when enter key is pressed
-        }
+  function handleKeypress({ event, value }) {
+    if (event.key === 'Enter') {
+      // do something when enter key is pressed
     }
+  }
 
-    function handleBlur(value) {
-        // value is the same as from handleInput
-    }
+  function handleBlur(value) {
+    // value is the same as from handleInput
+  }
 </script>
 ```
 
@@ -43,6 +43,12 @@
 | `label`             | `string`   | `""`                  | Sets Label for the input field                            |
 | `placeholder`       | `string`   | `Default placeholder` | Sets Placeholder attribute for the input                  |
 
+### Slots
+
+| Name      | Description   |
+|-----------|---------------|
+| `default` | Label content |
+
 ### Events
 
 | Name                | Type                  | Description                                                                         |

package/dist/src/components/UiSearchInput/UiSearchInput.vue

@@ -10,7 +10,11 @@
       v-if="hasLabel"
       class="col-span-1 flex items-center pr-5 text-sm lg:py-2"
     >
-      <label class="font-medium">{{ label }}</label>
+      <UiLabel :for="id" class="font-medium">
+        <slot>
+          {{ label }}
+        </slot>
+      </UiLabel>
       <slot name="tooltip"></slot>
     </div>
 
@@ -21,6 +25,7 @@
     >
       <div class="flex items-center">
         <input
+          :id="id"
           ref="inputs"
           :value="internalValue[index]"
           type="text"
@@ -56,18 +61,33 @@
 </template>
 
 <script setup lang="ts">
-import { computed, nextTick, ref, watchEffect } from "vue";
+import { v4 as uuidv4 } from "uuid";
+import { computed, nextTick, onBeforeUpdate, ref, watchEffect } from "vue";
 
 import UiIconButton from "../UiIconButton/UiIconButton.vue";
+import UiLabel from "../UiLabel/UiLabel.vue";
+
+const slots = defineSlots<{
+  /**
+   * Label content.
+   */
+  default?: () => any;
+  /**
+   * Tooltip content.
+   */
+  tooltip?: () => any;
+}>();
 
 const props = withDefaults(
   defineProps<{
+    id?: string;
     hasAddEntryOption?: boolean;
     label?: string;
     modelValue: string[];
     placeholder?: string;
   }>(),
   {
+    id: undefined,
     hasAddEntryOption: false,
     placeholder: "Default placeholder",
     label: "",
@@ -89,6 +109,8 @@ const addRow = async () => {
   }
 };
 
+const id = ref(props.id ?? `id-${uuidv4()}`);
+
 const canAddRow = computed(() => {
   return (
     internalValue.value[internalValue.value.length - 1].length > 0 &&
@@ -131,9 +153,15 @@ function handleBlur() {
 const isLastIndex = (index: number) => {
   return index === internalValue.value.length - 1;
 };
+const hasDefaultSlot = ref(false);
+
+// Manually tracks whether the “errors” slot is in use since `useSlots()` isn't reactive and so can't be correctly used inside computed reactive state.
+onBeforeUpdate(() => {
+  hasDefaultSlot.value = "default" in slots;
+});
 
 const hasLabel = computed(() => {
-  return props.label.length > 0;
+  return hasDefaultSlot.value || props.label.length > 0;
 });
 
 const inputWrapperClass = computed(() => {

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

@@ -0,0 +1,54 @@
+# UiSelect
+
+Wraps the native `select` element.
+
+## Usage
+
+```vue
+
+<UiSelect
+  v-model="appearance"
+  name="appearance"
+  required
+>
+  Appearance
+
+  <template #options>
+    <option
+      v-for="appearance in appearances"
+      :key="appearance.id"
+      :value="appearance.id"
+    >
+      {{ appearance.name }}
+    </option>
+  </template>
+</UiSelect>
+```
+
+## Props
+
+**Note**: This component binds all non-prop attributes (apart from `class`) on its principal element (the `select` element) instead of the root element. This allows you to add arbitrary HTML attributes (and event listeners) on the principal element without them being explicitly supported by the component.
+
+### modelValue
+
+- **Description**: Sets the `value` IDL attribute of the underlying `select` element. Allows using `v-model` on `UiSelect`.
+- **Type**: `string`
+- **Required**: No
+- **Default**: `undefined`
+
+## Slots
+
+### default
+
+The label content.
+
+### options
+
+Receives arbitrarily many `option` elements (or anything that is allowed in a native `select` element, see [select: Technical summary](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/select#technical_summary)).
+
+## Events
+
+### update:modelValue
+
+- **Description**: Fired when `select` fires `input`. Allows using `v-model` on `UiSelect`.
+- **Type**: `string`