@dpa-id-components/dpa-shared-components 21.1.1 → 22.0.0-next.1

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

@@ -1,11 +1,11 @@
 import { mount } from "@vue/test-utils";
 import { describe, expect, it } from "vitest";
 
-import UiRadioInput from "./UiRadioInputGroup.vue";
+import UiRadioInputGroup from "./UiRadioInputGroup.vue";
 
-describe("UiRadioInput", () => {
+describe("UiRadioInputGroup", () => {
   it("renders UiRadioInputGroup with props content", () => {
-    const wrapper = mount(UiRadioInput, {
+    const wrapper = mount(UiRadioInputGroup, {
       props: {
         options: [
           {
@@ -21,7 +21,7 @@ describe("UiRadioInput", () => {
   });
 
   it("should click change value", async () => {
-    const wrapper = mount(UiRadioInput, {
+    const wrapper = mount(UiRadioInputGroup, {
       props: {
         modelValue: "default value",
         "onUpdate:modelValue": (e) => wrapper.setProps({ modelValue: e }),
@@ -46,7 +46,7 @@ describe("UiRadioInput", () => {
   });
 
   it("renders attributes on correct element", () => {
-    const wrapper = mount(UiRadioInput, {
+    const wrapper = mount(UiRadioInputGroup, {
       props: {
         options: [],
         groupName: "",

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

@@ -1,32 +1,10 @@
 import type { Meta, StoryObj } from "@storybook/vue3-vite";
-import { action } from "storybook/actions";
 
 import UiRadioInputGroup from "./UiRadioInputGroup.vue";
 
 const meta = {
-  title: "Ui/UiRadioInputGroup",
-  // @ts-expect-error generic components seem to cause type issues here that aren't easy to solve
+  title: "forms/UiRadioButtonGroup",
   component: UiRadioInputGroup,
-  argTypes: {
-    options: {
-      control: "object",
-    },
-    variant: {
-      control: "select",
-      options: ["blue", "gray"],
-    },
-    size: {
-      control: "select",
-      options: ["small", "medium"],
-    },
-    direction: {
-      control: "select",
-      options: ["horizontal", "vertical"],
-    },
-    disabled: { control: "boolean" },
-    groupName: { control: "text" },
-    class: { control: "text" },
-  },
   args: {
     options: [
       {
@@ -45,8 +23,8 @@ const meta = {
         selected: false,
       },
     ],
-    variant: "blue",
-    size: "medium",
+    appearance: "primary",
+    size: "md",
     direction: "horizontal",
     disabled: false,
     groupName: "default",
@@ -56,15 +34,12 @@ const meta = {
       return { args };
     },
     components: { UiRadioInputGroup },
-    template:
-      "<UiRadioInputGroup v-bind='args' @input='input'></UiRadioInputGroup>",
-    methods: { input: action("input") },
+    template: /*html*/ `<UiRadioInputGroup v-bind="args" />`,
   }),
   tags: ["deprecated"],
 } satisfies Meta<typeof UiRadioInputGroup>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
-// TODO: Remove this again once possible.
-// @ts-ignore Bogus TypeScript error
+
 export const Default: Story = {};

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

@@ -1,35 +1,30 @@
 <template>
   <ul
-    class="flex"
     :class="[
-      cn('gap-4', $attrs.class as string),
-      {
-        'flex-col': direction === 'vertical',
-      },
+      cn(
+        'flex gap-4',
+        {
+          'flex-col': direction === 'vertical',
+        },
+        $attrs.class,
+      ),
     ]"
   >
-    <li v-for="option in internalOptions" :key="option.value">
-      <UiLabel class="flex">
-        <input
-          v-model="pickedOption"
-          :name="groupName"
-          :value="option.value"
-          :checked="option.selected"
-          :disabled="disabled"
-          type="radio"
-          :class="cn(sizeClassName, variantClassName)"
-          class="cursor-pointer appearance-none rounded-full border-2 bg-clip-content disabled:cursor-default disabled:border-gray-500 disabled:bg-gray-500"
-        />
-        <span
-          class="ml-1 cursor-pointer"
-          :class="[labelClass, disabled ? 'text-gray-500' : '']"
-        >
-          {{ option.label }}
-        </span>
-      </UiLabel>
+    <li v-for="option in options" :key="option.value">
+      <UiRadioButton
+        v-model="model"
+        :appearance
+        :disabled
+        :size
+        :name="groupName"
+        :value="option.value"
+      >
+        {{ option.label }}
+      </UiRadioButton>
     </li>
   </ul>
 </template>
+
 <script lang="ts">
 /**
  * @deprecated
@@ -39,62 +34,42 @@ export default {
   name: "UiRadioInputGroup",
 };
 </script>
-<script setup lang="ts" generic="T extends string | number">
-import { computed, onMounted } from "vue";
+
+<script setup lang="ts">
+import { onMounted } from "vue";
 
 import { cn } from "../../utils/cn.ts";
-import UiLabel from "../UiLabel/UiLabel.vue";
+import UiRadioButton from "../UiRadioButton/UiRadioButton.vue";
 
-export interface UiRadioInputGroupOption<T> {
-  value: T;
+export interface UiRadioInputGroupOption {
+  value: string;
   label: string;
-  selected: boolean;
+  /** @deprecated has no effect */
+  selected?: boolean;
 }
 
-const pickedOption = defineModel<T>();
-const props = withDefaults(
-  defineProps<{
-    groupName: string;
-    disabled?: boolean;
-    direction?: "horizontal" | "vertical";
-    options: UiRadioInputGroupOption<T>[];
-    variant?: "blue" | "gray";
-    size?: "small" | "medium";
-    labelClass?: string;
-  }>(),
-  {
-    direction: "horizontal",
-    variant: "blue",
-    size: "medium",
-    disabled: false,
-    labelClass: "",
-  },
-);
-
-const variantClassName = computed(() => {
-  return props.variant === "blue"
-    ? "border-blue-default checked:bg-blue-default checked:hover:bg-blue-dark hover:border-blue-dark"
-    : "border-gray-800 checked:bg-gray-800 checked:hover:bg-gray-900 hover:border-gray-900";
-});
+const {
+  options,
+  direction = "horizontal",
+  appearance = "primary",
+  size = "md",
+  disabled = false,
+} = defineProps<{
+  options: UiRadioInputGroupOption[];
+  groupName: string;
+  disabled?: boolean;
+  direction?: "horizontal" | "vertical";
+  appearance?: "primary" | "secondary";
+  size?: "sm" | "md";
+}>();
 
-const sizeClassName = computed(() => {
-  return props.size === "medium" ? "h-5 w-5 p-1" : "w-4 h-4 p-[3px]";
-});
-
-const internalOptions = computed(() => {
-  return props.options.map((option) => {
-    return {
-      ...option,
-      selected: pickedOption.value === option.value,
-    };
-  });
-});
+const model = defineModel<string>();
 
 onMounted(() => {
   if (window.location.origin.includes("local")) {
-    // eslint-disable-next-line
+    // eslint-disable-next-line no-console
     console.warn(
-      "UiRadioInputGroup is deprecated. It will be removed in a future update.",
+      "Component is deprecated. It will be removed in a future update.",
     );
   }
 });

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

@@ -6,48 +6,51 @@
 <!-- SomeComponent.vue using UiSearchBar -->
 <template>
   <UiSearchBar
-    v-model="value"
-    :placeholder="placeholder"
-    @input="handleEvent"
-    @focus="handleEvent"
-    @blur="handleEvent"
-    @keyup.enter="handleEvent"
-  />
+    v-model="searchValue"
+    placeholder="Search..."
+    appearance="neutral-whisper"
+    @focus="handleFocus"
+    @blur="handleBlur"
+    @submit="handleSubmit"
+    @search="handleSearch"
+    @reset="handleReset"
+  >
+    <template #chips>
+      <!-- Optional: render filter chips when input is blurred and has a value -->
+    </template>
+    <template #action>
+      <!-- Optional: additional action buttons -->
+    </template>
+  </UiSearchBar>
 </template>
 
-<script setup lang="ts">
-  import UiSearchBar from "@dpa-shared-components";
-  const searchInput = ref();
-    const handleInput = (input) => {
-      searchInput.value = input;
-    }
-</script>
 ```
 
 ### Props
-| Name                       | Type      | Default          | Description                                   |
-|----------------------------|-----------|------------------|-----------------------------------------------|
-| `placeholder`              | `String`  | `""`             | Text for the `input`'s  placeholder           |
-| `value`                    | `String`  | `""`             | The `input`'s value                           |
-| `backgroundColor`          | `String`  | `"gray"`         | sets the `background-color` of the search bar |
-| `hiddenFilterRules`        | `Number`  | `0`              | Number of advance search criteria             |
-| `isFilterChipEditable`     | `Boolean` | `true`           | Defines if the Filter Chip is editable        |
-| `executeSearchButtonTtile` | `String`  | `Execute Search` | Aria-Label for searchIconBtn                  |
-| `resetSearchButtonTitle`   | `String`  | `Reset Search`   | Aria-Label for resetSearchBtn                 |
 
-### Events
-
-| Name                | Type            | Description                                              |
-| ------------------- |---------------- | -------------------------------------------------------- |
-| `blur`              | `FocusEvent`    | Emitted when the `input` loses focus                     |
-| `focus`             | `FocusEvent`    | Emitted when the `input` is focused                      |
-| `reset`             | `string`        | Emitted when the `reset` button is clicked               |
-| `search`            | `string`        | Emitted when the `search` button is clicked              |
-| `submit`            | `string`        |  |
-| `update:modelValue` | `string`        |  |
+| Name                       | Type                             | Default             | Description                                 |
+|----------------------------|----------------------------------|---------------------|---------------------------------------------|
+| `modelValue`               | `string`                         | `""`                | The `input`'s value (use with `v-model`)    |
+| `placeholder`              | `string`                         | `""`                | Text for the `input`'s placeholder          |
+| `appearance`               | `"neutral-whisper" \| "neutral"` | `"neutral-whisper"` | Sets the background color of the search bar |
+| `executeSearchButtonTitle` | `string`                         | `"Execute Search"`  | Aria-label for the search button            |
+| `resetSearchButtonTitle`   | `string`                         | `"Reset Search"`    | Aria-label for the reset button             |
+| `showResetButtonOnMobile`  | `boolean`                        | `false`             | Shows the reset button on mobile viewports  |
 
-### Exposes
+### Events
 
-| Name             | Type               | Description                                                      |
-|------------------|--------------------|------------------------------------------------------------------|
-| `searchInputRef` | `HTMLInputElement` | Exposes a ref to the input element to the parent component       |
+| Name                | Type         | Description                                             |
+|---------------------|--------------|---------------------------------------------------------|
+| `blur`              | `FocusEvent` | Emitted when the `input` loses focus                    |
+| `focus`             | `FocusEvent` | Emitted when the `input` is focused                     |
+| `reset`             | `string`     | Emitted when the reset button is clicked                |
+| `search`            | `string`     | Emitted when the search button is clicked               |
+| `submit`            | `string`     | Emitted when the user presses Enter                     |
+| `update:modelValue` | `string`     | Emitted when the input value changes (implicit v-model) |
+
+### Slots
+
+| Name     | Description                                                                            |
+|----------|----------------------------------------------------------------------------------------|
+| `chips`  | Content displayed in place of the input text when the input is blurred and has a value |
+| `action` | Additional action elements rendered before the reset and search buttons                |

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

@@ -46,37 +46,20 @@ describe("UiSearchBar", () => {
     expect(wrapper.emitted("blur")).toBeTruthy();
   });
 
-  it("renders slots", () => {
+  it("renders chips and action slot", async () => {
     const wrapper = createWrapper({
       props: {
-        modelValue: "Test",
         placeholder: "Suchen",
-        backgroundColor: "gray",
-        hiddenFilterRules: 0,
-        isFilterChipEditable: true,
+        backgroundColor: "neutral-whisper",
       },
       slots: {
-        searchCriteriaButton: "<button>+ 1 Suchkriterium</button>",
-        extendedSearchButton: "<button>Erweiterte Suche</button>",
-        nonEditableChips: "<p>Favorite</p>",
-        editableChips: "<p>Hamburg</p>",
+        action: "<button>Erweiterte Suche</button>",
+        chips: "<p>Hamburg</p>",
       },
     });
-    expect(wrapper.html()).toContain("<button>+ 1 Suchkriterium</button>");
+    const textInput = wrapper.find("input");
+    await textInput.setValue("Test");
     expect(wrapper.html()).toContain("<button>Erweiterte Suche</button>");
-    expect(wrapper.html()).toContain("<p>Favorite</p>");
     expect(wrapper.html()).toContain("<p>Hamburg</p>");
   });
-
-  it("can clear input value by setting modelValue to empty string (bug fix)", async () => {
-    const wrapper = createWrapper();
-    const input = wrapper.find("input");
-    expect(input.element.value).toBe("");
-
-    await input.setValue("test");
-    expect(input.element.value).toBe("test");
-
-    await wrapper.setProps({ modelValue: "" });
-    expect(input.element.value).toBe("");
-  });
 });

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

@@ -1,46 +1,23 @@
 import type { Meta, StoryObj } from "@storybook/vue3-vite";
+import { computed, ref } from "vue";
 
 import UiButton from "../UiButton/UiButton.vue";
 import UiChip from "../UiChip/UiChip.vue";
 import UiIcon from "../UiIcon/UiIcon.vue";
-import UiIconButton from "../UiIconButton/UiIconButton.vue";
 
 import UiSearchBar from "./UiSearchBar.vue";
 
-type PropsAndStoryProps = InstanceType<typeof UiSearchBar> & {
-  hiddenFilterRules: number;
-};
-
 const meta = {
   title: "Ui/UiSearchBar",
   component: UiSearchBar,
-  argTypes: {
-    modelValue: { control: "text" },
-    placeholder: { control: "text" },
-    backgroundColor: {
-      control: "select",
-      options: ["gray", "white"],
-    },
-    hiddenFilterRules: { control: "number" },
-    isFilterChipEditable: { control: "boolean" },
-    hasShadow: { control: "boolean" },
-    slotClass: { control: "text" },
-    resetButtonWrapperClass: { control: "text" },
-  },
   args: {
-    modelValue: "",
     placeholder: "Suchen",
-    backgroundColor: "gray",
-    hiddenFilterRules: 0,
-    isFilterChipEditable: true,
-    hasShadow: false,
-    slotClass: "",
-    resetButtonWrapperClass: "",
+    appearance: "neutral-whisper",
   },
-} satisfies Meta<PropsAndStoryProps>;
+} satisfies Meta<typeof UiSearchBar>;
 
 export default meta;
-type Story = StoryObj<PropsAndStoryProps>;
+type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   render: (args) => ({
@@ -49,7 +26,7 @@ export const Default: Story = {
       return { args };
     },
     template:
-      "<div class='bg-white h-24 flex items-center p-4 w-full'><UiSearchBar v-bind='args'></UiSearchBar></div>",
+      "<div class='bg-neutral h-24 flex items-center p-4 w-full'><UiSearchBar v-bind='args'></UiSearchBar></div>",
   }),
 };
 
@@ -58,84 +35,26 @@ export const WithActionButtons: Story = {
     components: {
       UiSearchBar,
       UiButton,
-      UiIconButton,
       UiIcon,
     },
     setup() {
-      const getLabelText = (num: number) => {
-        if (!num) {
-          return "";
-        }
-        if (num > 1) {
-          return `+ ${num} Suchkriterien`;
-        }
-        return "+ 1 Suchkriterium";
-      };
-      const criteriaLabelText = () => {
-        return getLabelText(args.hiddenFilterRules);
-      };
-      return { args, criteriaLabelText };
+      return { args };
     },
     template: `
-      <div class="bg-white h-24 flex items-center p-4 w-full">
       <UiSearchBar v-bind="args">
-        <template #searchCriteriaButton>
-          <div class="mr-2">
-            <span
-              v-if="criteriaLabelText"
-              class="
-                self-center
-                mr-1
-                text-xs
-                font-medium
-                whitespace-no-wrap
-                cursor-pointer
-                text-blue
-                hover:text-blue-dark
-              "
-            >
-              {{ criteriaLabelText() }}
-            </span>
-          </div>
-        </template>
-        <template #extendedSearchButton>
+        <template #action>
           <UiButton
             size="xs"
-            class="border-none mr-1 font-semibold text-gray-800 hover:text-blue-default"
-            color="transparent"
-
+            appearance="ghost"
           >
             Erweiterte Suche
             <UiIcon
               name="chevron-down"
-              size="medium"
+              size="xs"
             />
           </UiButton>
         </template>
-        <template #resetButton>
-          <div class="mx-2">
-            <div
-              class="
-                flex
-                items-center
-                justify-center
-                flex-none
-                h-full
-                bg-gray-100
-              "
-            >
-              <UiIconButton icon-name="close" background-color="none" icon-color="gray" size="large" />
-            </div>
-          </div>
-        </template>
-        <template #searchButton>
-          <div class="flex items-center justify-center">
-            <div class="w-2 h-8 border-l border-gray-300"></div>
-            <UiIconButton icon-name="search" background-color="none" icon-color="gray" size="large" />
-          </div>
-        </template>
-      </UiSearchBar>
-      </div>`,
+      </UiSearchBar>`,
   }),
 };
 
@@ -144,49 +63,28 @@ export const WithChips: Story = {
     components: {
       UiSearchBar,
       UiButton,
-      UiIconButton,
       UiIcon,
       UiChip,
     },
     setup() {
-      return { args };
+      const model = ref("Lorem Ipsum Dolor Sit Amet");
+      const chips = computed(() => {
+        return model.value.split(" ").filter((str) => str);
+      });
+
+      function removeChip(value: string) {
+        const arrayChips = chips.value.filter((chip) => chip !== value);
+        model.value = arrayChips.join(" ");
+      }
+      return { args, model, chips, removeChip };
     },
     template: `
-      <div class="bg-white h-24 flex items-center p-4 w-full">
-      <UiSearchBar v-bind="args">
-        <template #nonEditableChips>
-          <UiChip v-if="!args.isFilterChipEditable" class="ml-2">
-            <UiIcon
-              name="pin"
-              size="small"
-              class="mr-2"
-            />
-            <span class="text-small">Nur Top-Einträge</span>
-            <UiIconButton icon-name="close" background-color="none" icon-color="gray" size="small"
-                          class="hover:bg-gray-400 active:bg-gray-500 ml-1" />
-          </UiChip>
-        </template>
-        <template #editableChips>
-          <UiChip v-if="args.value" class="ml-2">
-            <span class="text-small">{{ args.value }}</span>
-            <UiIconButton icon-name="close" background-color="none" icon-color="gray" size="small"
-                          class="hover:bg-gray-400 active:bg-gray-500 ml-1" />
+      <UiSearchBar v-bind="args" v-model="model" @reset="model = ''">
+        <template #chips>
+          <UiChip v-for="chip in chips" :key="chip" :close-button="true" size="md" @close="removeChip(chip)">
+            {{ chip }}
           </UiChip>
         </template>
-        <template #extendedSearchButton>
-          <UiButton
-            size="xs"
-            class="border-none mr-1 font-semibold text-gray-800 hover:text-blue-default"
-            color="transparent"
-          >
-            Erweiterte Suche
-            <UiIcon
-              name="chevron-down"
-              size="medium"
-            />
-          </UiButton>
-        </template>
-      </UiSearchBar>
-      </div>`,
+      </UiSearchBar>`,
   }),
 };