@dpa-id-components/dpa-shared-components 18.2.2 → 18.3.0

package/src/components/UiInput/UiInput.vue

@@ -29,7 +29,7 @@
       :aria-label="label ? label : undefined"
       :readonly="readonly"
       :disabled="disabled"
-      class="peer block h-24 w-full rounded-t-sm text-sm outline-hidden transition duration-150 placeholder:text-gray-400 disabled:bg-gray-100 disabled:opacity-70"
+      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,
@@ -55,7 +55,7 @@
       :aria-label="label ? label : undefined"
       :readonly="readonly"
       :disabled="disabled"
-      class="peer block h-14 w-full rounded-t-sm text-sm outline-hidden transition duration-150 placeholder:text-gray-400 disabled:bg-gray-50 disabled:opacity-70"
+      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,
@@ -221,28 +221,29 @@ const addonText = computed((): string => {
 const labelColorClass = computed(() => {
   return {
     default: `
-      [*:has(+:where(input,textarea):enabled:hover)]:text-gray-700
-      [*:has(+:where(input,textarea):focus)]:text-blue-default
-      [*:has(+:where(input,textarea):not(:focus))]:text-gray-500
+      text-gray-500
+      [*:has(+:is(input,textarea):where(:enabled:hover))]:text-gray-700
+      [*:has(+:is(input,textarea):where(:focus))]:text-blue-default
     `,
     info: `
-      [*:has(+:where(input,textarea):enabled:hover)]:text-gray-700
-      [*:has(+:where(input,textarea):focus)]:text-gray-700
-      [*:has(+:where(input,textarea):not(:focus))]:text-gray-500
+      text-gray-500
+      [*:has(+:is(input,textarea):where(:enabled:hover))]:text-gray-700
+      [*:has(+:is(input,textarea):where(:focus))]:text-gray-700
     `,
     readonly: `
-      [*:has(+:where(input,textarea):enabled:hover)]:text-gray-700
-      [*:has(+:where(input,textarea):not(:focus))]:text-gray-500
+      text-gray-500
+      [*:has(+:is(input,textarea):where(:enabled:hover))]:text-gray-700
+      [*:has(+:is(input,textarea):where(:focus))]:text-gray-700
     `,
     warning: `
-      [*:has(+:where(input,textarea):enabled:hover)]:text-orange-dark
-      [*:has(+:where(input,textarea):focus)]:text-orange-dark
-      [*:has(+:where(input,textarea):not(:focus))]:text-orange-default
+      text-orange-default
+      [*:has(+:is(input,textarea):where(:enabled:hover))]:text-orange-dark
+      [*:has(+:is(input,textarea):where(:focus))]:text-orange-dark
     `,
     error: `
-      [*:has(+:where(input,textarea):enabled:hover)]:text-alert-red-dark
-      [*:has(+:where(input,textarea):focus)]:text-alert-red-dark
-      [*:has(+:where(input,textarea):not(:focus))]:text-alert-red-default
+      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];
 });
@@ -271,43 +272,32 @@ const componentClass = computed(() => {
       rounded-b-sm
       border
       border-gray-300
-      p-4
-      text-gray-900
       focus:border-2
-      focus:border-blue-default
       focus:p-inputFocused
       enabled:hover:border-gray-700
+      enabled:focus:border-blue-default
     `,
     readonly: `
       rounded-b-sm
       border
       border-gray-300
-      p-4
-      text-gray-800
-      text-gray-900
     `,
     error: `
       border-2
       border-alert-red-default
-      p-4
-      text-gray-900
-      focus:border-alert-red-dark
+      enabled:focus:border-alert-red-dark
       enabled:hover:border-alert-red-dark
     `,
     warning: `
       border-2
       border-orange-default
-      p-4
-      text-gray-900
-      focus:border-orange-dark
+      enabled:focus:border-orange-dark
       enabled:hover:border-orange-dark
     `,
     info: `
       border
       border-gray-300
-      p-4
-      text-gray-900
-      focus:border-gray-700
+      enabled:focus:border-gray-700
       enabled:hover:border-gray-700
     `,
   }[status.value];

package/src/components/UiSelect/UiSelect.vue

@@ -5,7 +5,21 @@
       :for="id"
       :class="
         cn(
-          'absolute left-3 z-1 origin-left px-1 text-gray-500 transition-all duration-150 [*:has(+select:enabled:hover)]:text-gray-700 [*:has(+select:focus)]:text-blue-default [*:has(+select[aria-invalid=true])]:text-alert-red-default [*:has(+select[aria-invalid=true]:enabled:hover)]:text-alert-red-dark',
+          `
+            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
+          `,
           model ? '-translate-y-1/2 bg-white text-xs' : 'translate-y-4',
         )
       "
@@ -18,7 +32,38 @@
       v-model="model"
       :aria-invalid="Boolean($slots.errors)"
       :aria-errormessage="$slots.errors ? `${id}-errors` : undefined"
-      class="disabled:text-color-gray-400 disabled:border-gray-500 disabled:opacity-70 readonly:text-gray-800 peer 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 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"
+      :class="
+        cn(`
+          peer
+          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
+          disabled:text-color-gray-400
+          disabled:border-gray-500
+          disabled:opacity-70
+          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
+          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
+        `)
+      "
       v-bind="{ ...$attrs, class: null }"
     >
       <slot name="options" />
@@ -32,7 +77,24 @@
     <div
       v-if="$slots.errors"
       :id="`${id}-errors`"
-      class="rounded-b-sm bg-alert-red-default px-4 py-1 text-xs leading-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"
+      :class="
+        cn(`
+          rounded-b-sm
+          bg-alert-red-default
+          px-4
+          py-1
+          text-xs
+          leading-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
+        `)
+      "
     >
       <slot name="errors" />
     </div>
@@ -74,3 +136,36 @@ const { id = `id-${uuidv4()}` } = defineProps<{
 
 const model = defineModel<string>();
 </script>
+
+<style scoped>
+@reference "../../tailwindPreset.css";
+
+select,
+::picker(select) {
+  appearance: base-select;
+}
+
+::picker(select) {
+  @apply shadow-md border border-gray-100;
+}
+
+select::picker-icon {
+  @apply hidden;
+}
+
+select > :deep(option) {
+  @apply flex justify-between items-center px-4 py-3;
+
+  &:enabled:hover {
+    @apply bg-gray-200;
+  }
+
+  &::checkmark {
+    @apply order-1 text-lg;
+  }
+
+  & + option {
+    @apply border-t border-gray-100;
+  }
+}
+</style>

package/src/utils/cn.ts

@@ -3,5 +3,5 @@ import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
+  return twMerge(clsx(inputs)).replaceAll(/\s+/g, " ").trim();
 }