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

package/dist/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/dist/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/dist/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/dist/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.",
     );
   }
 });

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

@@ -13,7 +13,7 @@ const options: string[] = [
 ];
 
 const meta = {
-  title: "Ui/UiSelect",
+  title: "forms/UiSelect",
   component: UiSelect,
   args: {
     // Attributes

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

@@ -1,27 +1,13 @@
 <template>
-  <div :class="cn('relative', $attrs.class as string)">
+  <div :class="cn('relative', $attrs.class)">
     <UiLabel
       v-if="$slots.default"
-      :for="id"
+      :for="uniqueId"
       :class="
         cn(
-          `
-            absolute
-            left-3
-            z-1
-            origin-left
-            px-1
-            text-gray-500
-            transition-all
-            duration-150
-            [*:has(+select:where(:enabled:hover))]:text-gray-700
-            [*:has(+select:where(:focus))]:text-blue-default
-            [*:has(+select:where([aria-invalid=true]))]:text-alert-red-default
-            [*:has(+select:where([aria-invalid=true]:enabled:hover))]:text-alert-red-dark
-            [*:has(+select:where([aria-invalid=true]:focus))]:text-alert-red-dark
-          `,
+          'absolute left-3 z-1 origin-left px-1 text-neutral-muted transition-all duration-150 [*:has(+select:where(:enabled:hover))]:text-neutral-subtle [*:has(+select:where(:focus))]:text-primary [*:has(+select:where([aria-invalid=true]))]:text-error [*:has(+select:where([aria-invalid=true]:enabled:hover))]:text-error-hover [*:has(+select:where([aria-invalid=true]:focus))]:text-error-hover',
           model !== undefined
-            ? '-translate-y-1/2 bg-white text-xs'
+            ? '-translate-y-1/2 bg-neutral text-xs'
             : 'translate-y-4',
         )
       "
@@ -30,42 +16,11 @@
     </UiLabel>
 
     <select
-      :id
+      :id="uniqueId"
       v-model="model"
       :aria-invalid="Boolean($slots.errors)"
-      :aria-errormessage="$slots.errors ? `${id}-errors` : undefined"
-      :class="
-        cn(`
-          peer
-          disabled:text-color-gray-400
-          h-14
-          w-full
-          appearance-none
-          rounded-t-sm
-          border
-          border-gray-300
-          p-4
-          pr-2
-          text-left
-          text-sm
-          text-gray-900
-          transition-all
-          duration-150
-          outline-none
-          not-aria-invalid:rounded-b-sm
-          placeholder:text-gray-500
-          focus:border-2
-          focus:border-blue-default
-          focus:p-inputFocused
-          enabled:not-focus:hover:border-gray-700
-          disabled:border-gray-500
-          disabled:opacity-70
-          aria-invalid:border-2
-          aria-invalid:border-alert-red-default
-          aria-invalid:focus:border-alert-red-dark
-          enabled:aria-invalid:hover:border-alert-red-dark
-        `)
-      "
+      :aria-errormessage="$slots.errors ? `${uniqueId}-errors` : undefined"
+      class="peer disabled:text-color-neutral-soft h-14 w-full appearance-none rounded-t-sm border border-neutral-faint p-4 pr-2 text-left text-sm text-neutral-primary transition-all duration-150 outline-none not-aria-invalid:rounded-b-sm placeholder:text-neutral-muted focus:border-2 focus:border-primary focus:p-inputFocused not-read-only:enabled:cursor-pointer enabled:not-focus:hover:border-neutral-subtle disabled:border-neutral-muted disabled:opacity-70 aria-invalid:border-2 aria-invalid:border-error aria-invalid:focus:border-error-hover enabled:aria-invalid:hover:border-error-hover"
       v-bind="{ ...$attrs, class: null }"
     >
       <slot name="options" />
@@ -78,25 +33,8 @@
 
     <div
       v-if="$slots.errors"
-      :id="`${id}-errors`"
-      :class="
-        cn(`
-          rounded-b-sm
-          bg-alert-red-default
-          px-4
-          py-1
-          text-xs/normal
-
-          font-medium
-          text-white
-          transition-all
-          duration-150
-          ease-in-out
-          peer-focus:bg-alert-red-dark
-          peer-enabled:peer-hover:bg-alert-red-dark
-          peer-disabled:opacity-70
-        `)
-      "
+      :id="`${uniqueId}-errors`"
+      class="rounded-b-sm bg-error px-4 py-1 text-xs/normal font-medium text-neutral transition-all duration-150 ease-in-out peer-focus:bg-error-hover peer-enabled:peer-hover:bg-error-hover peer-disabled:opacity-70"
     >
       <slot name="errors" />
     </div>
@@ -104,7 +42,7 @@
 </template>
 
 <script setup lang="ts">
-import { v4 as uuidv4 } from "uuid";
+import { computed, useId } from "vue";
 
 import { cn } from "../../utils/cn.ts";
 import UiIcon from "../UiIcon/UiIcon.vue";
@@ -129,7 +67,7 @@ defineSlots<{
   options: () => any;
 }>();
 
-const { id = `id-${uuidv4()}` } = defineProps<{
+const { id = undefined } = defineProps<{
   /**
    * ID of the `select` element. Used for the `label`'s `for` attribute if the `default` slot is provided.
    */
@@ -137,6 +75,9 @@ const { id = `id-${uuidv4()}` } = defineProps<{
 }>();
 
 const model = defineModel<string>();
+
+const defaultId = useId();
+const uniqueId = computed(() => id ?? `id-${defaultId}`);
 </script>
 
 <style scoped>
@@ -148,7 +89,7 @@ select,
 }
 
 ::picker(select) {
-  @apply shadow-md border border-gray-100;
+  @apply shadow-lg border border-neutral-whisper;
 }
 
 select::picker-icon {
@@ -159,7 +100,7 @@ select > :deep(option) {
   @apply flex justify-between items-center px-4 py-3;
 
   &:enabled:hover {
-    @apply bg-gray-200;
+    @apply bg-neutral-pale;
   }
 
   &::checkmark {
@@ -167,7 +108,7 @@ select > :deep(option) {
   }
 
   & + option {
-    @apply border-t border-gray-100;
+    @apply border-t border-neutral-whisper;
   }
 }
 </style>

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

@@ -10,6 +10,6 @@ describe("UiSkeletonBox", () => {
     expect(wrapper.classes("inline-block")).toBe(true);
     expect(wrapper.classes("animate-pulse")).toBe(true);
     expect(wrapper.classes("rounded-sm")).toBe(true);
-    expect(wrapper.classes("bg-gray-200")).toBe(true);
+    expect(wrapper.classes("bg-neutral-pale")).toBe(true);
   });
 });