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

package/src/components/UiToggleButton/UiToggleButton.vue

@@ -1,76 +1,57 @@
 <template>
-  <div>
-    <UiLabel :for="toggleId" class="flex cursor-pointer text-base">
+  <UiLabel
+    :for="toggleId"
+    :class="
+      cn(
+        'inline-flex cursor-pointer gap-2 align-middle leading-4 font-normal text-neutral-emphasis',
+        $attrs.class,
+      )
+    "
+  >
+    <slot v-if="labelPosition === 'left'" />
+    <div class="relative">
+      <input
+        :id="toggleId"
+        v-model="modelValue"
+        type="checkbox"
+        data-testid="toggleButton"
+        role="switch"
+        class="sr-only"
+        v-bind="{ ...$attrs, class: null }"
+      />
       <div
-        v-if="$slots.default"
-        class="whitespace-nowrap"
+        class="line rounded-full shadow-inner transition-opacity duration-200 ease-in-out"
         :class="{
-          [labelSpaceClass]: true,
-          'order-2': !isLabelPositionLeft,
-          'sr-only': !labelVisible,
+          'bg-secondary opacity-50': modelValue,
+          'bg-neutral-faint': !modelValue,
+          'h-3 w-6': size === 'sm',
+          'h-4 w-10': size === 'lg',
         }"
-      >
-        <slot />
-      </div>
+      />
       <div
-        v-if="isLabelPositionLeft && !$slots.default"
-        class="leading-4 font-normal whitespace-nowrap text-gray-800"
-        :class="[labelSpaceClass, labelTextSizeClass]"
-      >
-        {{ labelText }}
-      </div>
-      <div class="relative">
-        <input
-          :id="toggleId"
-          type="checkbox"
-          data-testid="toggleButton"
-          role="checkbox"
-          :aria-checked="modelValue"
-          tabindex="0"
-          class="sr-only"
-          :disabled="disabled"
-          :aria-label="labelText"
-          @click="emit('update:modelValue', !modelValue)"
-        />
-        <div
-          class="line rounded-full shadow-inner transition-opacity duration-200 ease-in-out"
-          :class="{
-            'opacity-50': modelValue,
-            [colorClass]: modelValue,
-            'bg-gray-300': !modelValue,
-            [lineSize]: true,
-          }"
-        />
-        <div
-          :class="{
-            'translate-x-full': modelValue,
-            [colorClass]: modelValue,
-            'bg-gray-500': !modelValue,
-            [dotSize]: true,
-          }"
-          class="dot absolute -left-1 rounded-full shadow-sm transition-transform duration-200 ease-in-out"
-        />
-      </div>
-      <div
-        v-if="!isLabelPositionLeft && !$slots.default"
-        class="leading-4 font-normal whitespace-nowrap text-gray-800"
-        :class="[labelSpaceClass, labelTextSizeClass]"
-      >
-        {{ labelText }}
-      </div>
-    </UiLabel>
-  </div>
+        :class="{
+          'translate-x-full bg-secondary': modelValue,
+          'bg-neutral-muted': !modelValue,
+          '-top-0.5 size-4': size === 'sm',
+          '-top-1 size-6': size === 'lg',
+        }"
+        class="dot absolute -left-1 rounded-full shadow-sm transition-transform duration-200 ease-in-out"
+      />
+    </div>
+
+    <slot v-if="labelPosition === 'right'" />
+  </UiLabel>
 </template>
 
 <script setup lang="ts">
-import { v4 as uuidv4 } from "uuid";
-import { computed, ref } from "vue";
+import { computed, useId } from "vue";
 
+import { cn } from "../../utils/cn.ts";
 import UiLabel from "../UiLabel/UiLabel.vue";
 
-const emit = defineEmits<{
-  "update:modelValue": [boolean];
-}>();
+defineOptions({ inheritAttrs: false });
+
+const modelValue = defineModel<boolean>({ default: false });
 
 defineSlots<{
   /**
@@ -79,72 +60,16 @@ defineSlots<{
   default?: () => any;
 }>();
 
-const props = withDefaults(
-  defineProps<{
-    id?: string;
-    modelValue?: boolean;
-    disabled?: boolean;
-    labelText?: string;
-    labelSpace?: "default" | "xl";
-    labelTextSize?: "xs" | "sm" | "md" | "lg";
-    labelPosition?: "left" | "right";
-    labelVisible?: boolean;
-    color?: "blue" | "green";
-    size?: "small" | "large";
-  }>(),
-  {
-    id: undefined,
-    modelValue: false,
-    disabled: false,
-    labelText: "",
-    labelTextSize: "xs",
-    labelSpace: "default",
-    labelPosition: "left",
-    labelVisible: true,
-    color: "blue",
-    size: "small",
-  },
-);
-
-const toggleId = ref(props.id ?? `toggle-id-${uuidv4()}`);
-
-const labelSpaceClass = computed(() => {
-  return props.labelPosition === "left"
-    ? props.labelSpace === "default"
-      ? "mr-3"
-      : "mr-12"
-    : props.labelSpace === "default"
-      ? "ml-3"
-      : "ml-12";
-});
-
-const labelTextSizeClass = computed(() => {
-  switch (props.labelTextSize) {
-    case "xs":
-      return "text-xs";
-    case "sm":
-      return "text-sm";
-    case "md":
-      return "text-md";
-    case "lg":
-      return "text-lg";
-    default:
-      return "text-xs";
-  }
-});
-
-const isLabelPositionLeft = computed(() => {
-  return props.labelPosition === "left";
-});
-
-const colorClass = computed(() => {
-  return props.color === "blue" ? "bg-blue-default" : "bg-green-primary";
-});
+const {
+  id = undefined,
+  labelPosition = "left",
+  size = "sm",
+} = defineProps<{
+  id?: string;
+  labelPosition?: "left" | "right";
+  size?: "sm" | "lg";
+}>();
 
-const lineSize = computed(() => {
-  return props.size === "small" ? "h-3 w-6" : "h-4 w-10";
-});
-const dotSize = computed(() => {
-  return props.size === "small" ? "h-4 w-4 top-[-2px]" : "h-6 w-6 top-[-4px]";
-});
+const defaultId = useId();
+const toggleId = computed(() => id ?? `id-${defaultId}`);
 </script>

package/src/components/UiTooltip/README.md

@@ -5,16 +5,15 @@
 ```html
 <!-- SomeComponent.vue using UiTooltip -->
 <template>
-  <div style="margin: 50px; max-width: max-content;">
-    <UiTooltip>
-      <template v-slot:activator>
-        <button>Target</button>
-      </template>
-      Tooltip Content
-    </UiTooltip>
-  </div>
+  <UiTooltip>
+    <template #activator>
+      <button>Target</button>
+    </template>
+    Tooltip Content
+  </UiTooltip>
 </template>
 
+
 <script lang="ts" setup>
   import UiTooltip from "@dpa-id-components/dpa-shared-components";
 </script>
@@ -24,34 +23,24 @@
 
 ### Props
 
-| Name                 | Type                        | Default                             | Description                                                                                                                                                                             |
-|----------------------|-----------------------------|-------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| `position`           | `String`                    | `bottom-center`                     | Position of the tooltip relative to the activator slot                                                                                                                                  |
-| `structuredLayout`   | `Boolean`                   | `false`                             | Whether the structured layout should be used                                                                                                                                            |
-| `structuredInfo`     | `Array`                     | `[]`                                | Contains structured data for structured tooltips                                                                                                                                        |
-| `fixed`              | `Boolean`                   | `false`                             | Whether the tooltip positioning is fixed instead of absolute                                                                                                                            |
-| `multilines`         | `Boolean`                   | `false`                             | Whether the tooltip text has max-width (ideal for long tooltip-text)                                                                                                                    |
-| `tooltipClasses`     | `String`                    | `''`                                | Classes added to the tooltip Element                                                                                                                                                    |
-| `floatingUiOptions`  | `UseFloatingOptions`        | `null`                              | Options for [Floating Ui](https://floating-ui.com/) [Interface](https://github.com/floating-ui/floating-ui/blob/afca34cc59321569ccfca9b41934859809c47a3d/packages/vue/src/types.ts#L60) |
-| `animate`            | `Boolean`                   | `false`                             | Wether the tooltip should be animated                                                                                                                                                   |
-| `transitionClasses`  | `Record<Placement, string>` | `false`                             | Transition classes used based on position, the defaults are noted below                                                                                                                 |
-| `enterActiveClasses` | `string`                    | `transition duration-300 delay-500` | Classes that can be used to define the duration, delay and easing curve for the entering transition.                                                                                    |
-| `leaveActiveClasses` | `string`                    | `transition`                        | Classes that can be used to define the duration, delay and easing curve for the leaving transition                                                                                      |
-| `disabled`           | `Boolean`                   | `false`                             | Allows you to turn off the tooltip content, useful for scenarios like mobile devices where tooltips may not be needed.                                                                  |
-
-##### Default transition Classes
-```js
-{
-      "top-start": "scale-95 opacity-0 -translate-y-2 ",
-      top: "scale-95 opacity-0 -translate-y-2 ",
-      "top-end": "scale-95 opacity-0 -translate-y-2",
-      right: "scale-95 opacity-0 translate-x-2",
-      "bottom-end": "scale-95 opacity-0 translate-y-2 ",
-      bottom: "scale-95 opacity-0 translate-y-2",
-      "bottom-start": "scale-95 opacity-0 translate-y-2",
-      left: "scale-95 opacity-0 -translate-x-2",
-}
-```
+| Name                | Type                        | Default                             | Description                                                                                                                                                                             |
+|---------------------|-----------------------------|-------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| `position`          | `Placement`                 | `bottom`                            | Position of the tooltip relative to the activator slot                                                                                                                                  |
+| `fixed`             | `Boolean`                   | `true`                              | Whether the tooltip positioning is fixed instead of absolute                                                                                                                            |
+| `floatingUiOptions` | `UseFloatingOptions`        | `null`                              | Options for [Floating Ui](https://floating-ui.com/) [Interface](https://github.com/floating-ui/floating-ui/blob/afca34cc59321569ccfca9b41934859809c47a3d/packages/vue/src/types.ts#L60) |
+| `animate`           | `Boolean`                   | `false`                             | Whether the tooltip should be animated                                                                                                                                                  |
+| `hidden`            | `Boolean`                   | `false`                             | Allows you to turn off the tooltip content, useful for scenarios like mobile devices where tooltips may not be needed.                                                                  |
+
+### Attributes
+
+### Attributes
+
+The `class` attribute is forwarded to the component's root element, so e.g. `<UiTooltip class="mt-4">` styles the outer wrapper (useful for layout or positioning).
+The root element has `inline-block` and `align-middle` as default classes, which can be overridden via `tailwind-merge`.
+
+All other attributes (`aria-*`, `data-*`, event listeners, etc.) are forwarded to the inner tooltip content element via `v-bind="$attrs"`.
+
+To style the tooltip content itself, wrap the slot content in your own element with the desired classes.
 
 
 ### Slots

package/src/components/UiTooltip/UiTooltip.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div :class="cn('inline-block align-middle', $attrs.class)">
     <div
       ref="activatorElm"
       data-testid="activator"
@@ -11,74 +11,33 @@
       <slot name="activator" />
     </div>
 
-    <Teleport v-if="!disabled" :disabled="!fixed" to="body">
-      <template v-if="structuredLayout">
-        <div
-          ref="tooltipElm"
-          :style="floatingStyles"
-          data-testid="structuredTooltip"
-          :data-placement="placement"
+    <Teleport v-if="!hidden" :disabled="!fixed" to="body">
+      <div
+        ref="tooltipElm"
+        data-testid="tooltip"
+        :style="floatingStyles"
+        :data-placement="placement"
+      >
+        <Transition
+          :enter-active-class="
+            animate
+              ? 'motion-safe:transition duration-300 delay-500'
+              : undefined
+          "
+          :leave-active-class="animate ? 'motion-safe:transition' : undefined"
+          :leave-to-class="transitionFromTo"
+          :enter-from-class="transitionFromTo"
         >
-          <Transition
-            :enter-active-class="enterActive"
-            :leave-active-class="leaveActive"
-            :leave-to-class="activeTransition"
-            :enter-from-class="activeTransition"
+          <div
+            v-show="isShown"
+            data-testid="tooltipElement"
+            class="flex w-max flex-wrap items-center rounded-2xl bg-neutral-primary px-2 py-half text-xs/5 text-neutral"
+            v-bind="{ ...$attrs, class: null }"
           >
-            <ul
-              v-show="isShown"
-              data-testid="tooltipElement"
-              class="my-1 w-72 rounded-2xl border border-gray-300 bg-white text-xs/5 shadow-lg"
-              :class="[tooltipClasses]"
-            >
-              <slot>
-                <li
-                  v-for="({ title, description }, index) in structuredInfo"
-                  :key="`info-${index}`"
-                  class="mx-4 py-3 text-left"
-                  :class="
-                    index < structuredInfo.length - 1
-                      ? 'border-b border-b-gray-100'
-                      : ''
-                  "
-                >
-                  <h4 class="pb-1 text-sm font-semibold">{{ title }}</h4>
-                  <p class="text-sm">{{ description }}</p>
-                </li>
-              </slot>
-            </ul>
-          </Transition>
-        </div>
-      </template>
-      <template v-else>
-        <div
-          ref="tooltipElm"
-          data-testid="tooltip"
-          :style="floatingStyles"
-          :data-placement="placement"
-        >
-          <Transition
-            :enter-active-class="enterActive"
-            :leave-active-class="leaveActive"
-            :leave-to-class="activeTransition"
-            :enter-from-class="activeTransition"
-          >
-            <div
-              v-show="isShown"
-              data-testid="tooltipElement"
-              class="flex items-center bg-gray-900 px-2 py-half text-xs/5 text-white"
-              :class="[
-                tooltipClasses,
-                multilines
-                  ? 'h-auto max-w-75 flex-wrap rounded-2xl'
-                  : 'h-6 w-max rounded-full',
-              ]"
-            >
-              <slot />
-            </div>
-          </Transition>
-        </div>
-      </template>
+            <slot />
+          </div>
+        </Transition>
+      </div>
     </Teleport>
   </div>
 </template>
@@ -89,83 +48,52 @@ import {
   useFloating,
   type UseFloatingOptions,
 } from "@floating-ui/vue";
-import { computed, ref } from "vue";
+import { computed, ref, useTemplateRef } from "vue";
 
-const props = withDefaults(
-  defineProps<{
-    position?: Placement;
-    structuredLayout?: boolean;
-    structuredInfo?: { title: string; description: string }[];
-    fixed?: boolean;
-    multilines?: boolean;
-    tooltipClasses?: string;
-    floatingUiOptions?: UseFloatingOptions | null;
-    transitionClasses?: Partial<Record<Placement, string>>;
-    enterActiveClasses?: string;
-    leaveActiveClasses?: string;
-    animate?: boolean;
-    disabled?: boolean;
-  }>(),
-  {
-    position: "bottom",
-    structuredLayout: false,
-    structuredInfo: () => [],
-    fixed: true,
-    multilines: false,
-    tooltipClasses: "",
-    floatingUiOptions: null,
-    animate: false,
-    transitionClasses: () => ({
-      top: "scale-95 opacity-0 -translate-y-2",
-      "top-start": "scale-95 opacity-0 -translate-y-2",
-      "top-end": "scale-95 opacity-0 -translate-y-2",
-      right: "scale-95 opacity-0 translate-x-2",
-      "bottom-end": "scale-95 opacity-0 translate-y-2",
-      bottom: "scale-95 opacity-0 translate-y-2",
-      "bottom-start": "scale-95 opacity-0 translate-y-2",
-      left: "scale-95 opacity-0 -translate-x-2",
-    }),
-    enterActiveClasses: "motion-safe:transition duration-300 delay-500",
-    leaveActiveClasses: ":motion-safe:transition",
-    disabled: false,
-  },
-);
+import { cn } from "../../utils/cn.ts";
 
-const activeTransition = computed(() => {
-  if (!props.animate) {
-    return "";
-  }
-  return props.transitionClasses[props.position];
+defineOptions({
+  inheritAttrs: false,
 });
 
-const enterActive = computed(() => {
-  if (!props.animate) {
-    return "";
-  }
-  return props.enterActiveClasses;
-});
+const {
+  position = "bottom",
+  fixed = true,
+  floatingUiOptions = null,
+  animate = false,
+  hidden = false,
+} = defineProps<{
+  position?: Placement;
+  fixed?: boolean;
+  floatingUiOptions?: UseFloatingOptions | null;
+  animate?: boolean;
+  hidden?: boolean;
+}>();
 
-const leaveActive = computed(() => {
-  if (!props.animate) {
-    return "";
-  }
-  return props.leaveActiveClasses;
+const transitionFromTo = computed(() => {
+  if (!animate) return undefined;
+  const map: Partial<Record<Placement, string>> = {
+    top: "scale-95 opacity-0 -translate-y-2",
+    "top-start": "scale-95 opacity-0 -translate-y-2",
+    "top-end": "scale-95 opacity-0 -translate-y-2",
+    right: "scale-95 opacity-0 translate-x-2",
+    "bottom-end": "scale-95 opacity-0 translate-y-2",
+    bottom: "scale-95 opacity-0 translate-y-2",
+    "bottom-start": "scale-95 opacity-0 translate-y-2",
+    left: "scale-95 opacity-0 -translate-x-2",
+  };
+  return map[position];
 });
 
 const isShown = ref(false);
 
-const activatorElm = ref<HTMLElement>();
-const tooltipElm = ref<HTMLElement>();
+const activatorElm = useTemplateRef<HTMLElement>("activatorElm");
+const tooltipElm = useTemplateRef<HTMLElement>("tooltipElm");
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars -- Exporting floatingUi just for the sake of having it.
-const { floatingStyles, placement, ...floatingUi } = useFloating(
-  activatorElm,
-  tooltipElm,
-  {
-    strategy: props.fixed ? "fixed" : "absolute",
-    placement: props.position,
-    whileElementsMounted: autoUpdate,
-    ...(props.floatingUiOptions ? props.floatingUiOptions : {}),
-  },
-);
+const { floatingStyles, placement } = useFloating(activatorElm, tooltipElm, {
+  strategy: () => (fixed ? "fixed" : "absolute"),
+  placement: () => position,
+  whileElementsMounted: autoUpdate,
+  ...(floatingUiOptions ? floatingUiOptions : {}),
+});
 </script>