@dpa-id-components/dpa-shared-components 22.3.1 → 23.0.0

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

@@ -1,159 +0,0 @@
-import { mount } from "@vue/test-utils";
-import { describe, expect, test } from "vitest";
-
-import UiTooltip from "./UiTooltip.vue";
-
-document.body.innerHTML = `
-    <div id="app"></div>
-`;
-
-describe("UiTooltip", () => {
-  test("shows correct content", () => {
-    const wrapper = mount(UiTooltip, {
-      props: {
-        fixed: false,
-      },
-      slots: {
-        default: "tooltip content",
-      },
-    });
-    expect(wrapper.text()).toBe("tooltip content");
-  });
-
-  test("is not rendered without mouseover", () => {
-    const wrapper = mount(UiTooltip, {
-      props: {
-        fixed: false,
-      },
-      slots: {
-        activator: "<button>activate</button>",
-      },
-    });
-
-    expect(
-      wrapper.find('[data-testid="tooltipElement"]').isVisible(),
-    ).toBeFalsy();
-  });
-
-  test("is rendered upon mouseover", async () => {
-    const wrapper = mount(UiTooltip, {
-      props: {
-        fixed: false,
-      },
-      slots: {
-        activator: "<button>Hover me</button>",
-        default: "I'm a tooltip",
-      },
-    });
-    const activator = wrapper.find('[data-testid="activator"]');
-    await activator.trigger("mouseenter");
-
-    expect(wrapper.find('[data-testid="tooltip"]').classes("hidden")).toBe(
-      false,
-    );
-
-    expect(wrapper.find('[data-testid="tooltipElement"]').text()).toBe(
-      "I'm a tooltip",
-    );
-  });
-
-  test("is rendered in the correct position", async () => {
-    const wrapper = mount(UiTooltip, {
-      props: {
-        fixed: false,
-        position: "right",
-      },
-      slots: {
-        activator: "<button>Hover me</button>",
-      },
-    });
-    const activator = wrapper.find('[data-testid="activator"]');
-    await activator.trigger("mouseenter");
-
-    expect(
-      wrapper.find('[data-testid="tooltip"]').attributes("data-placement"),
-    ).toBe("right");
-  });
-
-  test("is in a fixed position", () => {
-    const wrapper = mount(UiTooltip, {
-      props: {
-        fixed: true,
-      },
-    });
-
-    // Find Tooltip that is teleported to the body
-    const tooltip = document.querySelector(
-      '[data-testid="tooltip"]',
-    ) as HTMLElement;
-
-    expect(tooltip).not.toBeNull();
-    expect(tooltip?.style.position).toBe("fixed");
-
-    // Cleanup after the test
-    wrapper.unmount();
-  });
-
-  test("shows no tooltip content when hidden", async () => {
-    const wrapper = mount(UiTooltip, {
-      props: {
-        hidden: true,
-        fixed: false,
-      },
-      slots: {
-        activator: "<button>Hover me</button>",
-        default: "I'm a Tooltip",
-      },
-    });
-
-    const activator = wrapper.find('[data-testid="activator"]');
-
-    expect(activator.exists()).toBe(true);
-    await activator.trigger("mouseenter");
-
-    expect(wrapper.find('[data-testid="tooltipElement"]').exists()).toBe(false);
-  });
-
-  test("applies no transition classes when animate is false", () => {
-    const wrapper = mount(UiTooltip, {
-      props: {
-        fixed: false,
-        animate: false,
-      },
-      slots: {
-        default: "tooltip content",
-      },
-    });
-
-    const transition = wrapper.findComponent({ name: "Transition" });
-    expect(transition.props("enterActiveClass")).toBeUndefined();
-    expect(transition.props("leaveActiveClass")).toBeUndefined();
-    expect(transition.props("enterFromClass")).toBeUndefined();
-    expect(transition.props("leaveToClass")).toBeUndefined();
-  });
-
-  test("applies transition classes when animate is true", () => {
-    const wrapper = mount(UiTooltip, {
-      props: {
-        fixed: false,
-        animate: true,
-        position: "bottom",
-      },
-      slots: {
-        default: "tooltip content",
-      },
-    });
-
-    const transition = wrapper.findComponent({ name: "Transition" });
-    expect(transition.props("enterActiveClass")).toBe(
-      "motion-safe:transition duration-300 delay-500",
-    );
-    expect(transition.props("leaveActiveClass")).toBe("motion-safe:transition");
-    expect(transition.props("enterFromClass")).toBe(
-      "scale-95 opacity-0 translate-y-2",
-    );
-    expect(transition.props("leaveToClass")).toBe(
-      "scale-95 opacity-0 translate-y-2",
-    );
-  });
-});

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

@@ -1,64 +0,0 @@
-import { shift } from "@floating-ui/vue";
-import type { Meta, StoryObj } from "@storybook/vue3-vite";
-
-import UiTooltip from "./UiTooltip.vue";
-
-const meta = {
-  title: "Ui/UiTooltip",
-  component: UiTooltip,
-  args: {
-    position: "bottom",
-    fixed: true,
-    hidden: false,
-    animate: false,
-  },
-  render: (args) => ({
-    setup() {
-      return { args };
-    },
-    components: { UiTooltip },
-    template: `
-      <div style="margin-top: 50px; margin-left: 120px; max-width: max-content;">
-        <UiTooltip v-bind="args">
-          <template v-slot:activator>
-            <button>Target</button>
-          </template>
-          Tooltip Content
-        </UiTooltip>
-      </div>
-    `,
-  }),
-} satisfies Meta<typeof UiTooltip>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};
-
-export const CustomFloatingUi: Story = {
-  args: {
-    animate: true,
-    floatingUiOptions: {
-      middleware: [shift()],
-    },
-    position: "bottom-end",
-  },
-};
-
-export const MultiLine: Story = {
-  render: (args) => ({
-    components: { UiTooltip },
-    setup: () => ({ args }),
-    template: `
-      <div style="margin-top: 50px; margin-left: 120px; max-width: max-content;">
-      <UiTooltip v-bind="args">
-        <template #activator><button>Target</button></template>
-        <div class="max-w-75">
-          This longer tooltip text demonstrates how the multi-line behavior
-          wraps content across several lines within a 300px maximum width constraint.
-        </div>
-      </UiTooltip>
-      </div>
-    `,
-  }),
-};

package/dist/src/components/UiTooltip/UiTooltip.vue

@@ -1,99 +0,0 @@
-<template>
-  <div :class="cn('inline-block align-middle', $attrs.class)">
-    <div
-      ref="activatorElm"
-      data-testid="activator"
-      @mouseenter="isShown = true"
-      @focus="isShown = true"
-      @mouseleave="isShown = false"
-      @blur="isShown = false"
-    >
-      <slot name="activator" />
-    </div>
-
-    <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"
-        >
-          <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 }"
-          >
-            <slot />
-          </div>
-        </Transition>
-      </div>
-    </Teleport>
-  </div>
-</template>
-<script setup lang="ts">
-import {
-  autoUpdate,
-  type Placement,
-  useFloating,
-  type UseFloatingOptions,
-} from "@floating-ui/vue";
-import { computed, ref, useTemplateRef } from "vue";
-
-import { cn } from "../../utils/cn.ts";
-
-defineOptions({
-  inheritAttrs: false,
-});
-
-const {
-  position = "bottom",
-  fixed = true,
-  floatingUiOptions = null,
-  animate = false,
-  hidden = false,
-} = defineProps<{
-  position?: Placement;
-  fixed?: boolean;
-  floatingUiOptions?: UseFloatingOptions | null;
-  animate?: boolean;
-  hidden?: boolean;
-}>();
-
-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 = useTemplateRef<HTMLElement>("activatorElm");
-const tooltipElm = useTemplateRef<HTMLElement>("tooltipElm");
-
-const { floatingStyles, placement } = useFloating(activatorElm, tooltipElm, {
-  strategy: () => (fixed ? "fixed" : "absolute"),
-  placement: () => position,
-  whileElementsMounted: autoUpdate,
-  ...(floatingUiOptions ? floatingUiOptions : {}),
-});
-</script>

package/dist/src/components/index.ts

@@ -1,60 +0,0 @@
-import UiBadge from "./UiBadge/UiBadge.vue";
-import UiButton from "./UiButton/UiButton.vue";
-import UiCheckbox from "./UiCheckbox/UiCheckbox.vue";
-import UiChip from "./UiChip/UiChip.vue";
-import UiColorPicker from "./UiColorPicker/UiColorPicker.vue";
-import UiDatePicker from "./UiDatePicker/UiDatePicker.vue";
-import UiDialog from "./UiDialog/UiDialog.vue";
-import UiFilterBadge from "./UiFilterBadge/UiFilterBadge.vue";
-import UiIcon from "./UiIcon/UiIcon.vue";
-export type { UiIconName } from "./UiIcon/UiIcon.vue";
-import UiInfoContent from "./UiInfoContent/UiInfoContent.vue";
-import UiInput from "./UiInput/UiInput.vue";
-import UiLabel from "./UiLabel/UiLabel.vue";
-import UiListItem from "./UiListItem/UiListItem.vue";
-import UiMediaTypeIcon from "./UiMediaTypeIcon/UiMediaTypeIcon.vue";
-export type { UiMediaTypeIconName } from "./UiMediaTypeIcon/UiMediaTypeIcon.vue";
-import UiMenu from "./UiMenu/UiMenu.vue";
-export type {
-  UiMenuGroupedOption,
-  UiMenuOptionType,
-  UiMenuSelectedOption,
-} from "./UiMenu/UiMenu.vue";
-import UiPopover from "./UiPopover/UiPopover.vue";
-import UiRadioButton from "./UiRadioButton/UiRadioButton.vue";
-import UiSearchBar from "./UiSearchBar/UiSearchBar.vue";
-import UiSearchInput from "./UiSearchInput/UiSearchInput.vue";
-import UiSelect from "./UiSelect/UiSelect.vue";
-import UiSkeletonBox from "./UiSkeletonBox/UiSkeletonBox.vue";
-import UiSnackbar from "./UiSnackbar/UiSnackbar.vue";
-import UiSpinner from "./UiSpinner/UiSpinner.vue";
-import UiToggleButton from "./UiToggleButton/UiToggleButton.vue";
-import UiTooltip from "./UiTooltip/UiTooltip.vue";
-
-export {
-  UiBadge,
-  UiButton,
-  UiCheckbox,
-  UiChip,
-  UiColorPicker,
-  UiDatePicker,
-  UiDialog,
-  UiFilterBadge,
-  UiIcon,
-  UiInfoContent,
-  UiInput,
-  UiLabel,
-  UiListItem,
-  UiMediaTypeIcon,
-  UiMenu,
-  UiPopover,
-  UiRadioButton,
-  UiSearchBar,
-  UiSearchInput,
-  UiSelect,
-  UiSkeletonBox,
-  UiSnackbar,
-  UiSpinner,
-  UiToggleButton,
-  UiTooltip,
-};

package/dist/src/compositions/index.ts

@@ -1 +0,0 @@
-export { useBreakpoints } from "./useBreakpoints/useBreakpoints.ts";

package/dist/src/compositions/useBreakpoints/UseBreakpoints.stories.ts

@@ -1,23 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/vue3-vite";
-
-import UseBreakpoints from "./UseBreakpoints.stories.vue";
-
-const meta = {
-  title: "tailwind/UseBreakpoints.ts",
-  component: UseBreakpoints,
-  argTypes: {},
-  parameters: {},
-} satisfies Meta<typeof UseBreakpoints>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: (args) => ({
-    setup() {
-      return { args };
-    },
-    components: { UseBreakpoints },
-    template: `<div><UseBreakpoints /></div>`,
-  }),
-};

package/dist/src/compositions/useBreakpoints/UseBreakpoints.stories.vue

@@ -1,15 +0,0 @@
-<template>
-  <UiButton v-if="lg">Button for LG</UiButton>
-  <UiButton v-else aria-label="Button">
-    <UiIcon name="emoji" />
-  </UiButton>
-</template>
-
-<script setup lang="ts">
-import UiButton from "../../components/UiButton/UiButton.vue";
-import UiIcon from "../../components/UiIcon/UiIcon.vue";
-
-import { useBreakpoints } from "./useBreakpoints.ts";
-
-const { lg } = useBreakpoints();
-</script>

package/dist/src/compositions/useBreakpoints/useBreakpoints.ts

@@ -1,28 +0,0 @@
-import {
-  type Breakpoints,
-  useBreakpoints as vueUseBreakpoints,
-} from "@vueuse/core";
-import { computed } from "vue";
-
-// Deliberately not using `breakpointsTailwind` as exported by `@vueuse/core` as it doesn't pick up custom values from the CSS configuration meaning if we customize the breakpoints at some point, these values wouldn't be correct.
-const breakpointsTailwind: Breakpoints = {
-  sm: "40rem",
-  md: "48rem",
-  lg: "64rem",
-  xl: "80rem",
-  "2xl": "96rem",
-};
-
-export function useBreakpoints() {
-  const breakpoints = vueUseBreakpoints(breakpointsTailwind);
-
-  const currentBreakpoint = breakpoints.current();
-
-  const sm = computed(() => currentBreakpoint.value.includes("sm"));
-  const md = computed(() => currentBreakpoint.value.includes("md"));
-  const lg = computed(() => currentBreakpoint.value.includes("lg"));
-  const xl = computed(() => currentBreakpoint.value.includes("xl"));
-  const twoXl = computed(() => currentBreakpoint.value.includes("2xl"));
-
-  return { currentBreakpoint, sm, md, lg, xl, "2xl": twoXl };
-}

package/dist/src/directives/index.ts

@@ -1 +0,0 @@
-export { vClickAway } from "./vClickAway.ts";

package/dist/src/directives/vClickAway.ts

@@ -1,38 +0,0 @@
-import type { DirectiveBinding } from "vue";
-
-let handler: (ev: MouseEvent) => void;
-
-export const vClickAway = {
-  mounted(el: HTMLElement, binding: DirectiveBinding): void {
-    const vm = binding.instance;
-
-    // Provided expression must evaluate to a function
-    if (typeof binding.value !== "function") {
-      const compName = vm?.$options.name;
-      let warn = `[vue-click-away:] provided expression '${binding.value}' is not a function, but has to be`;
-      if (compName) {
-        warn += `Found in component '${compName}'`;
-      }
-
-      // eslint-disable-next-line no-console
-      console.warn(warn);
-    }
-
-    // Define event handler and cache it on the element
-    const { bubble } = binding.modifiers;
-    handler = (e: MouseEvent): void => {
-      const element = e.target as HTMLElement;
-      if (bubble || (!el.contains(element) && el !== e.target)) {
-        binding.value(e);
-      }
-    };
-
-    // Add event listener
-    document.addEventListener("mousedown", handler);
-  },
-
-  unmounted(): void {
-    // Remove event listener
-    document.removeEventListener("mousedown", handler);
-  },
-};

package/dist/src/index.ts

@@ -1,6 +0,0 @@
-import "./tailwindPreset.css";
-
-export * from "./components/index.ts";
-export * from "./compositions/index.ts";
-export * from "./directives/index.ts";
-export * from "./utils/index.ts";