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

package/src/components/UiInput/UiInput.vue

@@ -1,16 +1,17 @@
 <template>
-  <div
-    :class="cn('relative', $attrs.class as string)"
-    :data-testid="$attrs['data-testid']"
-  >
+  <div :class="cn('relative', $attrs.class)">
     <UiLabel
       v-if="$slots.default || label"
-      :for="id"
+      :for="uniqueId"
       :class="
         cn(
-          'pointer-events-none absolute left-3 z-1 origin-left px-1 transition-all duration-150 select-none',
-          labelColorClass,
-          isLabelRaised ? '-translate-y-1/2 bg-white text-xs' : 'translate-y-4',
+          `pointer-events-none absolute left-3 z-1 origin-left translate-y-4 px-1 text-neutral-muted transition-all duration-150 select-none [&:has(+:is(input,textarea):where(:enabled:hover))]:text-neutral-subtle [&:has(+:is(input,textarea):where(:focus))]:text-primary [&:has(+:is(input,textarea):where(:read-only:enabled:hover))]:text-neutral-subtle [&:has(+:is(input,textarea):where(:read-only:focus))]:text-neutral-subtle [&:has(+:is(input,textarea):where([aria-invalid='true']))]:text-error [&:has(+:is(input,textarea):where([aria-invalid='true']:enabled:hover))]:text-error-hover [&:has(+:is(input,textarea):where([aria-invalid='true']:focus))]:text-error-hover [&:has(+[data-is-label-raised])]:-translate-y-1/2 [&:has(+[data-is-label-raised])]:bg-neutral [&:has(+[data-is-label-raised])]:text-xs`,
+          {
+            '[&:has(+:is(input,textarea):where(:focus))]:text-neutral-subtle':
+              inputStatus === 'info',
+            'text-orange-default [&:has(+:is(input,textarea):where(:enabled:hover))]:text-orange-dark [&:has(+:is(input,textarea):where(:focus))]:text-orange-dark':
+              inputStatus === 'warning',
+          },
         )
       "
     >
@@ -21,330 +22,130 @@
 
     <textarea
       v-if="isTextarea"
-      :id="id"
-      ref="inputRef"
+      :id="uniqueId"
       v-model="model"
-      :aria-invalid="status === 'error'"
-      :aria-errormessage="status === 'error' ? addonTextId : undefined"
-      :aria-label="label ? label : undefined"
-      :readonly="readonly"
-      :disabled="disabled"
-      class="peer block h-24 w-full rounded-t-sm p-4 text-sm text-gray-900 outline-hidden transition duration-150 placeholder:text-gray-400 disabled:bg-gray-100 disabled:opacity-70"
-      :class="
-        cn(
-          componentClass,
-          disabled ? 'cursor-not-allowed' : '',
-          readonly && isUiAutocomplete ? 'cursor-pointer' : '',
-        )
+      :aria-invalid="inputStatus === 'error'"
+      :aria-errormessage="
+        inputStatus === 'error' ? `${uniqueId}-extra` : undefined
       "
-      :placeholder="placeholder"
-      v-bind="{ ...$attrs, class: null, 'data-testid': null }"
+      :aria-label="label"
+      class="h-24"
+      :class="componentClass"
       data-testid="input-value"
-      @input="updateValue"
-      @focus="readonly && !isUiAutocomplete ? '' : handleFocus($event)"
-      @blur="readonly || isDateTimePicker ? '' : handleBlur($event)"
-      @keyup="handleKeyUp"
+      v-bind="{ ...$attrs, class: null }"
+      :data-is-label-raised="
+        $attrs.placeholder || isFocused || model ? '' : undefined
+      "
+      @focus="isFocused = true"
+      @blur="isFocused = false"
     />
     <input
       v-else
-      :id="id"
-      ref="inputRef"
+      :id="uniqueId"
       v-model="model"
-      :aria-invalid="status === 'error'"
-      :aria-errormessage="status === 'error' ? addonTextId : undefined"
-      :aria-label="label ? label : undefined"
-      :readonly="readonly"
-      :disabled="disabled"
-      class="peer block h-14 w-full rounded-t-sm p-4 text-sm text-gray-900 outline-hidden transition duration-150 placeholder:text-gray-400 disabled:bg-gray-50 disabled:opacity-70"
-      :class="
-        cn(
-          componentClass,
-          disabled ? 'cursor-not-allowed' : '',
-          type === 'time' ? 'disabledTime' : '',
-          readonly && isUiAutocomplete ? 'cursor-pointer' : '',
-        )
+      :aria-invalid="inputStatus === 'error'"
+      :aria-errormessage="
+        inputStatus === 'error' ? `${uniqueId}-extra` : undefined
       "
+      :aria-label="label"
+      class="h-14"
+      :class="componentClass"
       :type="type"
-      :autocomplete="autocomplete"
-      :is-date-time-picker="isDateTimePicker"
-      :placeholder="placeholder"
-      v-bind="{ ...$attrs, class: null, 'data-testid': null }"
+      autocomplete="on"
       data-testid="input-value"
-      @input="updateValue"
-      @focus="readonly && !isUiAutocomplete ? '' : handleFocus($event)"
-      @blur="readonly || isDateTimePicker ? '' : handleBlur($event)"
-      @keyup="handleKeyUp"
+      v-bind="{ ...$attrs, class: null }"
+      :data-is-label-raised="
+        $attrs.placeholder || isFocused || model ? '' : undefined
+      "
+      @focus="isFocused = true"
+      @blur="isFocused = false"
     />
 
     <div
-      v-if="
-        $slots.errors ||
-        status === 'error' ||
-        status === 'warning' ||
-        status === 'info'
-      "
-      :id="addonTextId"
+      v-if="$slots.extra && inputStatus !== undefined"
+      :id="`${uniqueId}-extra`"
       :class="
         cn(
-          'rounded-b-sm px-4 py-1 text-xs/normal font-medium transition-all duration-150 ease-in-out peer-disabled:opacity-70 peer-aria-invalid:bg-alert-red-default peer-aria-invalid:text-white peer-enabled:peer-aria-invalid:peer-hover:bg-alert-red-dark peer-enabled:peer-aria-invalid:peer-focus:bg-alert-red-dark',
-          addonClass,
+          'rounded-b-sm px-4 py-1 text-xs/normal font-medium transition-all duration-150 ease-in-out peer-disabled:opacity-70 peer-aria-invalid:bg-error peer-aria-invalid:text-neutral peer-enabled:peer-aria-invalid:peer-hover:bg-error-hover peer-enabled:peer-aria-invalid:peer-focus:bg-error-hover',
+          {
+            'bg-neutral-faint text-neutral-primary': inputStatus === 'info',
+            'bg-orange-default text-neutral-primary peer-focus:bg-orange-dark peer-enabled:peer-hover:bg-orange-dark':
+              inputStatus === 'warning',
+          },
         )
       "
     >
-      <slot v-if="$slots.errors" name="errors" />
-
-      <template v-else>
-        {{ addonText }}
-      </template>
+      <slot name="extra" />
     </div>
 
     <slot name="buttons" />
-    <svg
-      v-if="chevron"
-      class="pointer-events-none absolute top-4 right-4 size-6 fill-current text-gray-900"
-      viewBox="0 0 16 16"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M8 10.3333C7.82934 10.3333 7.65867 10.268 7.52867 10.138L4.862 7.4713C4.60134 7.21063 4.60134 6.7893 4.862 6.52863C5.12267 6.26796 5.544 6.26796 5.80467 6.52863L8.008 8.73196L10.2033 6.61196C10.4693 6.35663 10.89 6.36396 11.146 6.62863C11.402 6.8933 11.3947 7.31596 11.13 7.5713L8.46334 10.146C8.33334 10.2713 8.16667 10.3333 8 10.3333Z"
-      />
-    </svg>
   </div>
 </template>
 
 <script setup lang="ts">
-import { v4 as uuidv4 } from "uuid";
-import { computed, onBeforeUpdate, onMounted, ref } from "vue";
+import { computed, ref, useId } from "vue";
 
 import { cn } from "../../utils/cn.ts";
 import UiLabel from "../UiLabel/UiLabel.vue";
 
-type UiInputStatus = "default" | "info" | "readonly" | "warning" | "error";
-
 defineOptions({
   inheritAttrs: false,
 });
 
-const slots = defineSlots<{
-  buttons?: () => any;
+defineSlots<{
   /**
    * Label content.
    */
   default?: () => any;
   /**
-   * Error content.
+   * Extra content.
    */
-  errors?: () => any;
+  extra?: () => any;
+  buttons?: () => any;
 }>();
 
-const emit = defineEmits<{
-  input: [string];
-  focus: [FocusEvent];
-  blur: [FocusEvent];
-  keyup: [KeyboardEvent];
+const {
+  id = undefined,
+  type = "text",
+  label = undefined,
+  isTextarea = false,
+  inputStatus = undefined,
+} = defineProps<{
+  id?: string;
+  type?:
+    | "date"
+    | "datetime-local"
+    | "email"
+    | "number"
+    | "password"
+    | "search"
+    | "tel"
+    | "text"
+    | "time"
+    | "url"
+    // Allows arbitrary strings while still offering autocompletion on the explicitly listed strings.
+    | (string & {});
+  label?: string;
+  isTextarea?: boolean;
+  inputStatus?: "info" | "warning" | "error";
 }>();
 
-const props = withDefaults(
-  defineProps<{
-    id?: string;
-    type?:
-      | "date"
-      | "datetime-local"
-      | "email"
-      | "number"
-      | "password"
-      | "search"
-      | "tel"
-      | "text"
-      | "time"
-      | "url"
-      // Allows arbitrary strings while still offering autocompletion on the explicitly listed strings.
-      | (string & {});
-    label?: string;
-    placeholder?: string;
-    autofocus?: boolean;
-    chevron?: boolean;
-    readonly?: boolean;
-    disabled?: boolean;
-    isDateTimePicker?: boolean;
-    autocomplete?: string;
-    /**
-     * Use the `errors` slot for better flexibility instead.
-     */
-    errorMessage?: string;
-    warningMessage?: string;
-    isTextarea?: boolean;
-    infoText?: string;
-    inputStatus?: UiInputStatus;
-    isUiAutocomplete?: boolean;
-  }>(),
-  {
-    id: undefined,
-    type: "text",
-    label: "",
-    placeholder: undefined,
-    autofocus: false,
-    chevron: false,
-    readonly: false,
-    disabled: false,
-    isDateTimePicker: false,
-    autocomplete: "on",
-    errorMessage: "",
-    warningMessage: "",
-    isTextarea: false,
-    infoText: "",
-    inputStatus: "default",
-    isUiAutocomplete: false,
-  },
-);
-
 const model = defineModel<string>();
 
-const inputRef = ref<HTMLInputElement>();
-const hasErrorsSlot = ref(false);
 const isFocused = 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(() => {
-  hasErrorsSlot.value = "errors" in slots;
-});
-
-const id = computed(() => props.id || `id-${uuidv4()}`);
-const addonTextId = computed(() => `${id.value}-addon-text`);
-
-const status = computed<UiInputStatus>(() =>
-  hasErrorsSlot.value ? "error" : props.inputStatus,
+const defaultId = useId();
+const uniqueId = computed(() => id ?? `id-${defaultId}`);
+
+const componentClass = computed(() =>
+  cn(
+    "peer block w-full rounded-sm border border-neutral-faint p-4 text-sm text-neutral-primary outline-hidden transition duration-150 placeholder:text-neutral-soft read-only:border-neutral-faint focus:border-2 focus:border-primary focus:p-inputFocused not-read-only:enabled:cursor-pointer enabled:hover:border-neutral-subtle enabled:hover:focus:border-primary disabled:bg-neutral-whisper disabled:opacity-70 aria-invalid:rounded-b-none aria-invalid:border-2 aria-invalid:border-error aria-invalid:focus:border-error-hover aria-invalid:enabled:hover:border-error-hover",
+    {
+      "rounded-b-none focus:border-neutral-subtle enabled:hover:border-neutral-subtle":
+        inputStatus === "info",
+      "rounded-b-none border-2 border-orange-default focus:border-orange-dark enabled:hover:border-orange-dark":
+        inputStatus === "warning",
+    },
+  ),
 );
-
-const addonText = computed((): string => {
-  if (status.value === "error") {
-    return props.errorMessage;
-  }
-  if (status.value === "warning") {
-    return props.warningMessage;
-  }
-  if (status.value === "info") {
-    return props.infoText;
-  }
-  return "";
-});
-
-const labelColorClass = computed(() => {
-  return {
-    default: `
-      text-gray-500
-      [*:has(+:is(input,textarea):where(:enabled:hover))]:text-gray-700
-      [*:has(+:is(input,textarea):where(:focus))]:text-blue-default
-    `,
-    info: `
-      text-gray-500
-      [*:has(+:is(input,textarea):where(:enabled:hover))]:text-gray-700
-      [*:has(+:is(input,textarea):where(:focus))]:text-gray-700
-    `,
-    readonly: `
-      text-gray-500
-      [*:has(+:is(input,textarea):where(:enabled:hover))]:text-gray-700
-      [*:has(+:is(input,textarea):where(:focus))]:text-gray-700
-    `,
-    warning: `
-      text-orange-default
-      [*:has(+:is(input,textarea):where(:enabled:hover))]:text-orange-dark
-      [*:has(+:is(input,textarea):where(:focus))]:text-orange-dark
-    `,
-    error: `
-      text-alert-red-default
-      [*:has(+:is(input,textarea):where(:enabled:hover))]:text-alert-red-dark
-      [*:has(+:is(input,textarea):where(:focus))]:text-alert-red-dark
-    `,
-  }[status.value];
-});
-
-const addonClass = computed(() => {
-  return {
-    default: ``,
-    readonly: ``,
-    error: ``,
-    warning: `
-      bg-orange-default
-      text-gray-900
-      peer-focus:bg-orange-dark
-      peer-enabled:peer-hover:bg-orange-dark
-    `,
-    info: `
-      bg-gray-300
-      text-gray-900
-    `,
-  }[status.value];
-});
-
-const componentClass = computed(() => {
-  return {
-    default: `
-      rounded-b-sm
-      border
-      border-gray-300
-      focus:border-2
-      focus:p-inputFocused
-      enabled:hover:border-gray-700
-      enabled:focus:border-blue-default
-    `,
-    readonly: `
-      rounded-b-sm
-      border
-      border-gray-300
-    `,
-    error: `
-      border-2
-      border-alert-red-default
-      enabled:focus:border-alert-red-dark
-      enabled:hover:border-alert-red-dark
-    `,
-    warning: `
-      border-2
-      border-orange-default
-      enabled:focus:border-orange-dark
-      enabled:hover:border-orange-dark
-    `,
-    info: `
-      border
-      border-gray-300
-      enabled:focus:border-gray-700
-      enabled:hover:border-gray-700
-    `,
-  }[status.value];
-});
-
-const isLabelRaised = computed((): boolean => {
-  return !!props.placeholder || isFocused.value || !!model.value;
-});
-
-onMounted(() => {
-  if (props.autofocus) {
-    inputRef.value?.focus();
-  }
-});
-
-const updateValue = (event: Event): void => {
-  const input = event.target as HTMLInputElement | HTMLTextAreaElement;
-  emit("input", input.value);
-};
-
-const handleFocus = (event: FocusEvent): void => {
-  isFocused.value = true;
-  emit("focus", event);
-};
-
-const handleBlur = (event: FocusEvent): void => {
-  isFocused.value = false;
-  emit("blur", event);
-};
-
-const handleKeyUp = (event: KeyboardEvent): void => {
-  emit("keyup", event);
-};
-
-defineExpose({
-  inputRef,
-});
 </script>

package/src/components/UiLabel/README.md

@@ -22,12 +22,3 @@ Wraps the native `label` element. Currently only used to provide some default st
   <UiInput name="name" required />
 </UiLabel>
 ```
-
-**Associate with checkbox**:
-
-```vue
-<UiLabel class="flex">
-  <UiCheckbox name="terms" required />
-  I have read and accept the terms and conditions
-</UiLabel>
-```

package/src/components/UiLabel/UiLabel.vue

@@ -1,5 +1,5 @@
 <template>
-  <label :class="cn('max-w-max items-center text-sm', $attrs.class as string)">
+  <label :class="cn('max-w-max items-center text-sm', $attrs.class)">
     <slot />
   </label>
 </template>

package/src/components/UiList/UiList.vue

@@ -5,3 +5,25 @@
     <slot />
   </ul>
 </template>
+
+<script lang="ts">
+import { onMounted } from "vue";
+
+/**
+ * @deprecated
+ * Please replace with your own component
+ */
+export default {
+  name: "UiList",
+  setup() {
+    onMounted(() => {
+      if (window.location.origin.includes("local")) {
+        // eslint-disable-next-line no-console
+        console.warn(
+          "Component is deprecated. It will be removed in a future update.",
+        );
+      }
+    });
+  },
+};
+</script>

package/src/components/UiListItem/UiListItem.vue

@@ -1,110 +1,90 @@
 <template>
   <li
-    ref="itemEl"
-    class="relative cursor-pointer list-none border-t fill-current text-gray-900 shadow-none select-none first-of-type:border-none focus:outline-hidden focus-visible:outline-blue"
-    :class="disabled ? 'cursor-default' : 'cursor-pointer'"
-    style="outline-offset: -2px"
+    :class="
+      cn(
+        'flex cursor-pointer list-none items-center gap-2 px-4 py-2 text-sm/normal text-neutral-emphasis select-none hover:text-primary focus:outline-hidden focus-visible:focus-outline focus-visible:-outline-offset-2',
+        {
+          'cursor-default text-neutral-medium': disabled,
+          'is-selected': selected,
+          'py-3': checkboxSize === 'md',
+        },
+        overrideClasses,
+        $attrs.class,
+      )
+    "
     tabindex="0"
-    data-testid="list-item-button"
-    @click.prevent.stop="handleClick"
+    @click.prevent.stop="$emit('list-item-click', value, true)"
   >
-    <span
-      :class="
-        cn(
-          'flex items-center justify-between gap-1 text-sm/normal hover:text-blue-default',
-          itemClasses,
-          overrideClasses,
-        )
-      "
+    <UiCheckbox
+      v-if="checkBoxMenu"
+      :appearance="checkboxAppearance"
+      :model-value="isChecked"
+      :disabled="disabled"
+      :size="checkboxSize"
+      @click.stop="$emit('list-item-click', value, false)"
     >
-      <span class="flex items-center" data-testid="innerText">
-        <span v-if="checkBoxMenu" class="inset-y-0 flex items-center pr-2">
-          <UiCheckbox
-            :color="checkBoxColor"
-            :checked="isChecked"
-            :disabled="disabled"
-            :size="checkboxSize"
-          />
-        </span>
-        <UiIcon
-          v-if="iconName"
-          :name="iconName"
-          size-classes="mr-2 h-4 w-4"
-        ></UiIcon>
-        <img
-          v-if="imageSrc"
-          class="mr-2 w-4"
-          :class="{
-            'aspect-square': imageShape === 'square',
-            'aspect-square rounded-full object-center':
-              imageShape === 'rounded',
-          }"
-          :src="imageSrc"
-          :alt="value"
-        />
-        <slot />
-      </span>
+      <span class="sr-only"><slot /></span>
+    </UiCheckbox>
 
-      <span v-if="selected && selectable" class="flex items-center">
-        <UiIcon name="checkmark" :size="iconSize" />
-      </span>
-    </span>
+    <UiIcon v-if="iconName" :name="iconName" size="sm" />
+
+    <img
+      v-if="imageSrc"
+      class="size-4"
+      :class="{
+        'rounded-full object-center': imageShape === 'rounded',
+      }"
+      :src="imageSrc"
+      alt=""
+    />
+
+    <slot />
+
+    <UiIcon
+      v-if="selected && selectable"
+      class="ml-auto"
+      name="checkmark"
+      :size="iconSize"
+    />
   </li>
 </template>
 
 <script setup lang="ts">
-import { computed } from "vue";
-
 import { cn } from "../../utils/cn.ts";
 import UiCheckbox from "../UiCheckbox/UiCheckbox.vue";
 import UiIcon, { type UiIconName } from "../UiIcon/UiIcon.vue";
 
-const props = withDefaults(
-  defineProps<{
-    value?: string;
-    checkBoxMenu?: boolean;
-    isChecked?: boolean;
-    selected?: boolean;
-    selectable?: boolean;
-    overrideClasses?: string;
-    checkBoxColor?: "blue" | "gray";
-    iconName?: UiIconName | null;
-    imageSrc?: string;
-    imageShape?: "rounded" | "square";
-    iconSize?: "small" | "medium" | "large";
-    checkboxSize?: "small" | "medium";
-    disabled?: boolean;
-  }>(),
-  {
-    value: "",
-    checkBoxMenu: false,
-    isChecked: false,
-    selected: false,
-    selectable: false,
-    overrideClasses: "",
-    checkBoxColor: "blue",
-    iconName: null,
-    iconSize: "medium",
-    imageSrc: "",
-    imageShape: "rounded",
-    checkboxSize: "medium",
-    disabled: false,
-  },
-);
-
-const emit = defineEmits<{
-  "list-item-click": [string];
+const {
+  value = "",
+  checkBoxMenu = false,
+  selected = false,
+  selectable = false,
+  overrideClasses = undefined,
+  iconName = undefined,
+  iconSize = "md",
+  imageSrc = undefined,
+  imageShape = "rounded",
+  checkboxAppearance = "primary",
+  checkboxSize = "md",
+  isChecked = false,
+  disabled = false,
+} = defineProps<{
+  value?: string;
+  checkBoxMenu?: boolean;
+  selected?: boolean;
+  selectable?: boolean;
+  overrideClasses?: string;
+  iconName?: UiIconName;
+  imageSrc?: string;
+  imageShape?: "rounded" | "square";
+  iconSize?: "sm" | "md" | "lg";
+  checkboxAppearance?: "primary" | "secondary";
+  checkboxSize?: "sm" | "md";
+  isChecked?: boolean;
+  disabled?: boolean;
 }>();
-const itemClasses = computed(() => {
-  return [
-    props.selected ? "is-selected" : "",
-    props.disabled ? "text-gray-600" : "text-gray-800",
-    props.selectable ? "pr-9" : "pr-4",
-    props.checkboxSize === "medium" ? "py-3 px-4" : "px-4 py-2",
-  ];
-});
 
-const handleClick = () => {
-  emit("list-item-click", props.value);
-};
+defineEmits<{
+  "list-item-click": [value: string, shouldCloseMenu: boolean];
+}>();
 </script>