@dpa-id-components/dpa-shared-components 18.0.3 → 18.1.0

package/src/components/UiSelect/UiSelect.vue

@@ -0,0 +1,76 @@
+<template>
+  <div :class="cn('group relative', $attrs.class as string)">
+    <UiLabel
+      v-if="$slots.default"
+      :for="id"
+      :class="
+        cn(
+          'absolute left-3 z-10 origin-left px-1 text-gray-500 transition-all duration-150 group-hover:text-gray-700 [*:has(+select:focus)]:text-blue-default',
+          model ? '-translate-y-1/2 bg-white text-xs' : 'translate-y-4',
+        )
+      "
+    >
+      <slot />
+    </UiLabel>
+
+    <select
+      :id
+      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 readonly:text-gray-800 peer h-14 w-full appearance-none border border-gray-300 p-4 pr-2 text-left text-gray-900 transition-all duration-150 outline-none 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" />
+    </select>
+
+    <UiIcon
+      class="pointer-events-none absolute top-4 right-3"
+      name="chevron-down"
+    />
+
+    <div
+      v-if="$slots.errors"
+      :id="`${id}-errors`"
+      class="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>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { v4 as uuidv4 } from "uuid";
+
+import { cn } from "../../utils/cn.js";
+import UiIcon from "../UiIcon/UiIcon.vue";
+import UiLabel from "../UiLabel/UiLabel.vue";
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+defineSlots<{
+  /**
+   * Label content.
+   */
+  default: () => any;
+  /**
+   * Error content.
+   */
+  errors?: () => any;
+  /**
+   * Select options.
+   */
+  options: () => any;
+}>();
+
+const { id = `id-${uuidv4()}` } = defineProps<{
+  /**
+   * ID of the `select` element. Used for the `label`'s `for` attribute if the `default` slot is provided.
+   */
+  id?: string;
+}>();
+
+const model = defineModel<string>();
+</script>

package/src/components/UiToggleButton/README.md

@@ -31,9 +31,9 @@
 
 ### Slots
 
-| Name      | Description                                  |
-| --------- | -------------------------------------------- |
-| `default` | slot for custom content and styling of label |
+| Name      | Description   |
+| --------- | ------------- |
+| `default` | Label content |
 
 ### Events
 

package/src/components/UiToggleButton/UiToggleButton.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <label :for="toggleId" class="flex cursor-pointer items-center">
+    <UiLabel :for="toggleId" class="flex cursor-pointer text-base">
       <div
         v-if="$slots.default"
         class="whitespace-nowrap"
@@ -58,7 +58,7 @@
       >
         {{ labelText }}
       </div>
-    </label>
+    </UiLabel>
   </div>
 </template>
 
@@ -66,14 +66,22 @@
 import { v4 as uuidv4 } from "uuid";
 import { computed, ref } from "vue";
 
-const toggleId = ref(`toggle-id-${uuidv4()}`);
+import UiLabel from "../UiLabel/UiLabel.vue";
 
 const emit = defineEmits<{
   "update:modelValue": [boolean];
 }>();
 
+defineSlots<{
+  /**
+   * Label content.
+   */
+  default?: () => any;
+}>();
+
 const props = withDefaults(
   defineProps<{
+    id?: string;
     modelValue?: boolean;
     disabled?: boolean;
     labelText?: string;
@@ -85,6 +93,7 @@ const props = withDefaults(
     size?: "small" | "large";
   }>(),
   {
+    id: undefined,
     modelValue: false,
     disabled: false,
     labelText: "",
@@ -97,6 +106,8 @@ const props = withDefaults(
   },
 );
 
+const toggleId = ref(props.id ?? `toggle-id-${uuidv4()}`);
+
 const labelSpaceClass = computed(() => {
   return props.labelPosition === "left"
     ? props.labelSpace === "default"

package/src/components/index.ts

@@ -18,6 +18,7 @@ export type { UiIconName } from "./UiIcon/UiIcon.vue";
 import UiIconButton from "./UiIconButton/UiIconButton.vue";
 import UiInfoContent from "./UiInfoContent/UiInfoContent.vue";
 import UiInput from "./UiInput/UiInput.vue";
+import UiLabel from "./UiLabel/UiLabel.vue";
 import UiList from "./UiList/UiList.vue";
 import UiListItem from "./UiListItem/UiListItem.vue";
 import UiMenu from "./UiMenu/UiMenu.vue";
@@ -37,6 +38,7 @@ import UiSearchBar from "./UiSearchBar/UiSearchBar.vue";
 import UiSearchInput from "./UiSearchInput/UiSearchInput.vue";
 import UiSection from "./UiSection/UiSection.vue";
 import UiSectionDivider from "./UiSectionDivider/UiSectionDivider.vue";
+import UiSelect from "./UiSelect/UiSelect.vue";
 import UiSimpleInput from "./UiSimpleInput/UiSimpleInput.vue";
 import UiSkeletonBox from "./UiSkeletonBox/UiSkeletonBox.vue";
 import UiSnackbar from "./UiSnackbar/UiSnackbar.vue";
@@ -66,6 +68,7 @@ export {
   UiIconButton,
   UiInfoContent,
   UiInput,
+  UiLabel,
   UiList,
   UiListItem,
   UiMenu,
@@ -78,6 +81,7 @@ export {
   UiSearchInput,
   UiSection,
   UiSectionDivider,
+  UiSelect,
   UiSimpleInput,
   UiSkeletonBox,
   UiSnackbar,