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

package/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/src/components/UiSearchBar/UiSearchBar.vue

@@ -1,128 +1,77 @@
 <template>
   <div
-    class="h-12 w-full overflow-hidden rounded-full border-2 border-transparent focus-within:border-blue-default hover:border-gray-400 hover:focus-within:border-blue-default"
-    :class="[
-      bgColorClass,
-      {
-        shadow: hasShadow,
-      },
-    ]"
+    class="h-12 w-full rounded-full outline-2 outline-transparent focus-within:outline-primary hover:outline-neutral-faint hover:focus-within:outline-primary"
+    :class="BG_COLOR[appearance]"
   >
-    <div class="relative flex h-full">
-      <div class="flex h-full grow-0 flex-row items-center">
-        <slot name="nonEditableChips"></slot>
-      </div>
+    <div class="relative flex h-full items-center pl-4">
       <div
-        v-if="!isFocused"
-        class="flex h-full grow-0 flex-row items-center overflow-hidden"
+        v-if="!isInputFocused && model"
+        class="flex h-full grow-0 flex-row items-center gap-x-1 overflow-hidden py-2"
+        @click="searchInputRef?.focus()"
       >
-        <slot name="editableChips"></slot>
+        <slot name="chips"></slot>
       </div>
-      <div class="h-full grow" @click="handleHiddenInputFocus()">
+      <div class="h-full min-w-0 flex-1">
         <input
           ref="searchInputRef"
-          :value="modelValue"
-          class="size-full bg-transparent outline-hidden placeholder:text-gray-700 lg:text-sm"
+          v-model="model"
+          class="size-full bg-transparent py-2 outline-hidden placeholder:text-neutral-subtle lg:text-sm"
           :class="[
-            isFilterChipEditable ? 'px-4' : 'px-2',
-            !isFocused && hasChips ? 'text-transparent' : '',
-            !isFocused && (modelValue || !isFilterChipEditable)
-              ? 'absolute'
+            !isInputFocused && $slots.chips?.().length
+              ? 'text-transparent'
               : '',
           ]"
           spellcheck="false"
           type="text"
-          :placeholder="!isFilterChipEditable ? '' : placeholder"
-          @input="updateValue($event as InputEvent)"
+          :placeholder="placeholder"
           @keyup.enter="onEnter"
           @focus="handleFocus($event)"
           @blur="handleBlur($event)"
         />
       </div>
-      <div
-        class="pointer-events-none relative flex h-full flex-none overflow-hidden"
-        :class="isFocused ? '' : '-ml-12'"
-      >
-        <!-- gradient -->
-        <div
-          v-if="!isFocused"
-          class="h-full w-12 flex-none bg-linear-to-l"
-          :class="gradientClass"
-        ></div>
-        <div
-          :class="
-            cn(
-              'pointer-events-auto flex items-center px-2',
-              slotClass,
-              bgColorClass,
-            )
-          "
-        >
-          <div>
-            <slot name="searchCriteriaButton"></slot>
-          </div>
-          <div>
-            <slot name="extendedSearchButton"></slot>
-          </div>
-
-          <div :class="cn('mx-2', resetButtonWrapperClass)">
-            <div
-              :class="
-                cn(
-                  'flex-none items-center justify-center',
-                  resetButtonClass,
-                  'h-full',
-                  showResetButtonOnMobile ? 'flex' : 'hidden lg:flex',
-                  bgColorClass,
-                )
-              "
-            >
-              <UiIconButton
-                :disabled="hasNoEntry && !isFocused"
-                icon-name="close"
-                :title="resetSearchButtonTittle"
-                :background-color="closeBtnBgColor"
-                :icon-color="isFocused ? 'blue' : 'gray'"
-                size="medium"
-                @click="handleResetButton"
-              />
-            </div>
-          </div>
-
-          <div
-            class="flex h-full w-12 flex-none items-center justify-center"
-            :class="bgColorClass"
+      <div class="relative flex items-center gap-x-1 px-2">
+        <slot name="action"></slot>
+
+        <div class="flex items-center">
+          <UiButton
+            :class="
+              showResetButtonOnMobile ? 'inline-flex' : 'hidden sm:inline-flex'
+            "
+            :aria-label="resetSearchButtonTitle"
+            :disabled="!model"
+            appearance="ghost"
+            size="sm"
+            @click="handleResetButton"
           >
-            <div class="flex items-center justify-center">
-              <div class="h-8 w-2 border-l border-gray-300"></div>
-              <UiIconButton
-                icon-name="search"
-                :title="executeSearchButtonTitle"
-                :background-color="
-                  isFocused || searchIconHover ? 'blue' : 'none'
-                "
-                :icon-color="isFocused || searchIconHover ? 'white' : 'gray'"
-                size="medium"
-                @click="handleSearchButton"
-                @mouseover="searchIconHover = true"
-                @mouseleave="searchIconHover = false"
-              />
-            </div>
-          </div>
+            <UiIcon name="close" size="sm" />
+          </UiButton>
+
+          <div class="mx-1 h-8 border-r border-neutral-faint"></div>
+
+          <UiButton
+            :aria-label="executeSearchButtonTitle"
+            :appearance="
+              isInputFocused || searchIconHover ? 'primary' : 'ghost'
+            "
+            size="sm"
+            @click="handleSearchButton"
+            @mouseover="searchIconHover = true"
+            @mouseleave="searchIconHover = false"
+          >
+            <UiIcon name="search" size="sm" />
+          </UiButton>
         </div>
       </div>
     </div>
   </div>
 </template>
 <script setup lang="ts">
-import type { ClassValue } from "clsx";
-import { computed, ref } from "vue";
+import { ref, useTemplateRef } from "vue";
 
-import { cn } from "../../utils/cn.ts";
-import UiIconButton from "../UiIconButton/UiIconButton.vue";
+import UiButton from "../UiButton/UiButton.vue";
+import UiIcon from "../UiIcon/UiIcon.vue";
 
 const emit = defineEmits<{
-  "update:modelValue": [string];
   blur: [FocusEvent];
   focus: [FocusEvent];
   reset: [string];
@@ -130,105 +79,50 @@ const emit = defineEmits<{
   submit: [string];
 }>();
 
-const props = withDefaults(
-  defineProps<{
-    modelValue?: string;
-    placeholder?: string;
-    backgroundColor?: "gray" | "white";
-    isFilterChipEditable?: boolean;
-    hasChips?: boolean;
-    executeSearchButtonTitle?: string;
-    resetSearchButtonTittle?: string;
-    hasShadow?: boolean;
-    slotClass?: ClassValue | ClassValue[];
-    resetButtonWrapperClass?: ClassValue | ClassValue[];
-    resetButtonClass?: ClassValue | ClassValue[];
-    showResetButtonOnMobile?: boolean;
-  }>(),
-  {
-    modelValue: "",
-    placeholder: "",
-    backgroundColor: "gray",
-    isFilterChipEditable: true,
-    hasChips: true,
-    executeSearchButtonTitle: "Execute Search",
-    resetSearchButtonTittle: "Reset Search",
-    hasShadow: false,
-    slotClass: undefined,
-    resetButtonWrapperClass: undefined,
-    resetButtonClass: undefined,
-    showResetButtonOnMobile: false,
-  },
-);
-
-const isFocused = ref(false);
-const searchIconHover = ref(false);
-const searchInputRef = ref<HTMLInputElement>();
-
-const hasNoEntry = computed(() => {
-  return props.modelValue === "" && props.isFilterChipEditable;
-});
-
-const bgColor = {
-  gray: "bg-gray-100",
-  white: "bg-white",
-};
+const model = defineModel<string>({ default: "" });
+
+const {
+  placeholder = "",
+  appearance = "neutral-whisper",
+  executeSearchButtonTitle = "Execute Search",
+  resetSearchButtonTitle = "Reset Search",
+  showResetButtonOnMobile = false,
+} = defineProps<{
+  placeholder?: string;
+  appearance?: "neutral-whisper" | "neutral";
+  executeSearchButtonTitle?: string;
+  resetSearchButtonTitle?: string;
+  showResetButtonOnMobile?: boolean;
+}>();
 
-const gradientColor = {
-  gray: "from-gray-100",
-  white: "from-white",
+const BG_COLOR = {
+  "neutral-whisper": "bg-neutral-whisper",
+  neutral: "bg-neutral shadow-sm",
 };
 
-const gradientClass = computed(() => {
-  return gradientColor[props.backgroundColor as keyof typeof gradientColor];
-});
-
-const bgColorClass = computed(() => {
-  return bgColor[props.backgroundColor as keyof typeof bgColor];
-});
+const isInputFocused = ref(false);
+const searchInputRef = useTemplateRef<HTMLInputElement>("searchInputRef");
 
-const closeBtnBgColor = computed(() => {
-  if (props.backgroundColor === "gray") {
-    return "gray-hover";
-  }
-  return "none";
-});
-
-const updateValue = ({ target }: InputEvent): void => {
-  emit("update:modelValue", (target as HTMLInputElement).value);
-};
-
-const handleHiddenInputFocus = (): void => {
-  (searchInputRef.value as HTMLInputElement)?.focus();
-};
+const searchIconHover = ref(false);
 
 const handleFocus = (event: FocusEvent): void => {
-  isFocused.value = true;
+  isInputFocused.value = true;
   emit("focus", event);
 };
 
 const handleBlur = (event: FocusEvent): void => {
-  isFocused.value = false;
+  isInputFocused.value = false;
   emit("blur", event);
 };
 
 const onEnter = (): void => {
-  isFocused.value = false;
-  (searchInputRef.value as HTMLInputElement)?.blur();
-  emit("submit", props.modelValue);
+  searchInputRef.value?.blur();
+  emit("submit", model.value);
 };
 const handleResetButton = (): void => {
-  isFocused.value = false;
-  (searchInputRef.value as HTMLInputElement)?.blur();
-  emit("reset", props.modelValue);
+  emit("reset", model.value);
 };
 const handleSearchButton = (): void => {
-  isFocused.value = false;
-  (searchInputRef.value as HTMLInputElement)?.blur();
-  emit("search", props.modelValue);
+  emit("search", model.value);
 };
-
-defineExpose({
-  searchInputRef,
-});
 </script>

package/src/components/UiSearchInput/UiSearchInput.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="mb-4 grid text-gray-900 lg:mb-0 lg:grid-rows-1 lg:gap-y-5"
+    class="mb-4 grid text-neutral-primary lg:mb-0 lg:grid-rows-1 lg:gap-y-5"
     :class="{
       'lg:grid-cols-[224px_1fr]': hasLabel,
       'lg:grid-cols-1': !hasLabel,
@@ -10,7 +10,7 @@
       v-if="hasLabel"
       class="col-span-1 flex items-center pr-5 text-sm lg:py-2"
     >
-      <UiLabel :for="id" class="font-medium">
+      <UiLabel :for="uniqueId" class="font-medium">
         <slot>
           {{ label }}
         </slot>
@@ -25,7 +25,7 @@
     >
       <div class="flex items-center">
         <input
-          :id="id"
+          :id="uniqueId"
           ref="inputs"
           :value="internalValue[index]"
           type="text"
@@ -44,27 +44,34 @@
             )
           "
         />
-        <UiIconButton
-          v-if="hasAddEntryOption && isLastIndex(index)"
-          icon-name="plus-circle"
-          icon-color="gray"
-          background-color="none"
-          size="medium"
-          title="Add Row"
-          data-testid="add-entry"
+        <UiButton
+          v-if="hasAddEntryOption && index === internalValue.length - 1"
+          aria-label="Add Row"
           :disabled="!canAddRow"
+          appearance="ghost"
+          size="sm"
+          data-testid="add-entry"
           @click="addRow"
-        />
+        >
+          <UiIcon name="plus" />
+        </UiButton>
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { v4 as uuidv4 } from "uuid";
-import { computed, nextTick, onBeforeUpdate, ref, watchEffect } from "vue";
-
-import UiIconButton from "../UiIconButton/UiIconButton.vue";
+import {
+  computed,
+  nextTick,
+  onBeforeUpdate,
+  ref,
+  useId,
+  watchEffect,
+} from "vue";
+
+import UiButton from "../UiButton/UiButton.vue";
+import UiIcon from "../UiIcon/UiIcon.vue";
 import UiLabel from "../UiLabel/UiLabel.vue";
 
 const slots = defineSlots<{
@@ -109,7 +116,8 @@ const addRow = async () => {
   }
 };
 
-const id = ref(props.id ?? `id-${uuidv4()}`);
+const defaultId = useId();
+const uniqueId = computed(() => props.id ?? `id-${defaultId}`);
 
 const canAddRow = computed(() => {
   return (
@@ -150,10 +158,7 @@ function handleBlur() {
   emit("blur", internalValue.value);
 }
 
-const isLastIndex = (index: number) => {
-  return index === internalValue.value.length - 1;
-};
-const hasDefaultSlot = ref(false);
+const hasDefaultSlot = ref("default" in slots);
 
 // 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(() => {
@@ -165,7 +170,7 @@ const hasLabel = computed(() => {
 });
 
 const inputWrapperClass = computed(() => {
-  const baseClass = "border-b border-b-gray-200 self-start shrink-0";
+  const baseClass = "border-b border-b-neutral-pale self-start shrink-0";
   return hasLabel.value
     ? ["lg:col-start-2 lg:text-base", baseClass]
     : [baseClass];

package/src/components/UiSection/UiSection.vue

@@ -1,5 +1,5 @@
 <template>
-  <section :class="borderClass" class="w-full border-gray-200 bg-white">
+  <section :class="borderClass" class="w-full border-neutral-pale bg-neutral">
     <div
       :class="[sizeClasses[size], paddingClasses[verticalPadding]]"
       data-testid="inner"
@@ -36,7 +36,7 @@ const props = withDefaults(
 );
 
 const sizeClasses: Record<string, string> = {
-  wide: "w-full  md:px-28 text-gray-900 lg:flex",
+  wide: "w-full  md:px-28 text-neutral-primary lg:flex",
   small: "w-full lg:mx-auto lg:w-2/3",
 };
 
@@ -54,9 +54,9 @@ const borderClass = computed(() => {
 
 onMounted(() => {
   if (window.location.origin.includes("local")) {
-    // eslint-disable-next-line
+    // eslint-disable-next-line no-console
     console.warn(
-      "UiSection is deprecated. It will be removed in a future update.",
+      "Component is deprecated. It will be removed in a future update.",
     );
   }
 });

package/src/components/UiSectionDivider/UiSectionDivider.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="[sizeClass, customClasses]" class="bg-gray-100" />
+  <div :class="[sizeClass, customClasses]" class="bg-neutral-whisper" />
 </template>
 <script lang="ts">
 /**
@@ -35,9 +35,9 @@ const sizeClass = computed(() => {
 
 onMounted(() => {
   if (window.location.origin.includes("local")) {
-    // eslint-disable-next-line
+    // eslint-disable-next-line no-console
     console.warn(
-      "UiSectionDivider is deprecated. It will be removed in a future update.",
+      "Component is deprecated. It will be removed in a future update.",
     );
   }
 });