@dpa-id-components/dpa-shared-components 16.0.0 → 17.0.0

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

@@ -0,0 +1,102 @@
+import UiTooltip from "./UiTooltip.vue";
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+import { shift } from "@floating-ui/vue";
+
+const meta = {
+  title: "Ui/UiTooltip",
+  component: UiTooltip,
+  argTypes: {
+    position: {
+      control: { type: "select" },
+      options: [
+        "top-start",
+        "top",
+        "top-end",
+        "right",
+        "bottom-end",
+        "bottom",
+        "bottom-start",
+        "left",
+      ],
+    },
+    structuredLayout: {
+      control: "boolean",
+    },
+    structuredInfo: {
+      control: "object",
+    },
+    fixed: {
+      control: "boolean",
+    },
+    multilines: {
+      control: "boolean",
+    },
+    enterActiveClasses: {
+      control: "text",
+    },
+    leaveActiveClasses: {
+      control: "text",
+    },
+  },
+  args: {
+    position: "bottom",
+    structuredLayout: false,
+    structuredInfo: [],
+    fixed: false,
+    multilines: false,
+    enterActiveClasses:
+      "motion-safe:transition motion-safe:duration-300 motion-safe:delay-500",
+    leaveActiveClasses: "motion-safe:transition",
+  },
+  render: (args) => ({
+    setup() {
+      return { args };
+    },
+    components: { UiTooltip },
+    template: `
+      <div style="margin-top: 50px; margin-left: 120px; max-width: max-content;">
+      <ui-tooltip v-bind="args">
+        <template v-slot:activator>
+          <button>Target</button>
+        </template>
+        Tooltip Content
+      </ui-tooltip>
+      </div>
+    `,
+  }),
+} satisfies Meta<typeof UiTooltip>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Structured: Story = {
+  args: {
+    structuredLayout: true,
+    structuredInfo: [
+      {
+        title: "Typ",
+        description: "Termine",
+      },
+      {
+        title: "Ressort",
+        description: "Wirtschaft",
+      },
+      {
+        title: "Veranstaltungsort",
+        description: "Hamburg",
+      },
+    ],
+  },
+};
+
+export const CustomFloatingUi: Story = {
+  args: {
+    animate: true,
+    floatingUiOptions: {
+      middleware: [shift()],
+    },
+    position: "bottom-end",
+  },
+};

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

@@ -0,0 +1,170 @@
+<template>
+  <div>
+    <div
+      ref="activatorElm"
+      data-testid="activator"
+      tabindex="1"
+      @mouseenter="isShown = true"
+      @focus="isShown = true"
+      @mouseleave="isShown = false"
+      @blur="isShown = false"
+    >
+      <slot name="activator" />
+    </div>
+
+    <Teleport :disabled="!fixed" to="body">
+      <template v-if="structuredLayout">
+        <div
+          ref="tooltipElm"
+          :style="floatingStyles"
+          data-testid="structuredTooltip"
+          :data-placement="placement"
+        >
+          <Transition
+            :enter-active-class="enterActive"
+            :leave-active-class="leaveActive"
+            :leave-to-class="activeTransition"
+            :enter-from-class="activeTransition"
+          >
+            <ul
+              v-show="isShown"
+              data-testid="tooltipElement"
+              class="border-1 my-1 w-72 rounded-2xl border-gray-300 bg-white text-xs leading-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 leading-5 text-white"
+              :class="[
+                tooltipClasses,
+                multilines
+                  ? 'h-auto max-w-[300px] flex-wrap rounded-2xl '
+                  : 'h-6 w-max rounded-full',
+              ]"
+            >
+              <slot />
+            </div>
+          </Transition>
+        </div>
+      </template>
+    </Teleport>
+  </div>
+</template>
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import {
+  autoUpdate,
+  type Placement,
+  useFloating,
+  type UseFloatingOptions,
+} from "@floating-ui/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;
+  }>(),
+  {
+    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",
+  },
+);
+
+const activeTransition = computed(() => {
+  if (!props.animate) {
+    return "";
+  }
+  return props.transitionClasses[props.position];
+});
+
+const enterActive = computed(() => {
+  if (!props.animate) {
+    return "";
+  }
+  return props.enterActiveClasses;
+});
+
+const leaveActive = computed(() => {
+  if (!props.animate) {
+    return "";
+  }
+  return props.leaveActiveClasses;
+});
+
+const isShown = ref(false);
+
+const activatorElm = ref<HTMLElement>();
+const tooltipElm = ref<HTMLElement>();
+
+// 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 : {}),
+  },
+);
+</script>

package/dist/src/components/index.ts

@@ -0,0 +1,88 @@
+import DpaMediaItem from "./DpaMediaItem/DpaMediaItem.vue";
+import UiAutocomplete from "./UiAutocomplete/UiAutocomplete.vue";
+import UiBadge from "./UiBadge/UiBadge.vue";
+import UiButton from "./UiButton/UiButton.vue";
+import UiButtonGroup from "./UiButtonGroup/UiButtonGroup.vue";
+import UiCard from "./UiCard/UiCard.vue";
+import UiCheckbox from "./UiCheckBox/UiCheckBox.vue";
+import UiCheckBoxGroup from "./UiCheckBoxGroup/UiCheckBoxGroup.vue";
+import UiChip from "./UiChip/UiChip.vue";
+import UiCollapseNavigation from "./UiCollapseNavigation/UiCollapseNavigation.vue";
+import UiDatePicker from "./UiDatePicker/UiDatePicker.vue";
+import UiDialog from "./UiDialog/UiDialog.vue";
+import UiFilterBadge from "./UiFilterBadge/UiFilterBadge.vue";
+import UiFilterBadgeButton from "./UiFilterBadgeButton/UiFilterBadgeButton.vue";
+import UiFilterButton from "./UiFilterButton/UiFilterButton.vue";
+import UiIcon from "./UiIcon/UiIcon.vue";
+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 UiList from "./UiList/UiList.vue";
+import UiListItem from "./UiListItem/UiListItem.vue";
+import UiMenu from "./UiMenu/UiMenu.vue";
+export type {
+  UiMenuOptionType,
+  UiMenuSelectedOption,
+  UiMenuGroupedOption,
+} from "./UiMenu/UiMenuTypes.js";
+import UiMenuList from "./UiMenu/UiMenuList.vue";
+import UiMenuItem from "./UiMenu/UiMenuItem.vue";
+import UiOverlay from "./UiOverlay/UiOverlay.vue";
+import UiOverlayMenu from "./UiOverlayMenu/UiOverlayMenu.vue";
+import UiRadioInputGroup from "./UiRadioInputGroup/UiRadioInputGroup.vue";
+export type { UiRadioInputGroupOption } from "./UiRadioInputGroup/UiRadioInputGroup.vue";
+import UiSection from "./UiSection/UiSection.vue";
+import UiSectionDivider from "./UiSectionDivider/UiSectionDivider.vue";
+import UiSkeletonBox from "./UiSkeletonBox/UiSkeletonBox.vue";
+import UiSpinner from "./UiSpinner/UiSpinner.vue";
+import UiSnackbar from "./UiSnackbar/UiSnackbar.vue";
+import UiToggleButton from "./UiToggleButton/UiToggleButton.vue";
+import UiTooltip from "./UiTooltip/UiTooltip.vue";
+import UiSearchInput from "./UiSearchInput/UiSearchInput.vue";
+import UiSearchBar from "./UiSearchBar/UiSearchBar.vue";
+import UiSimpleInput from "./UiSimpleInput/UiSimpleInput.vue";
+import UiColorPicker from "./UiColorPicker/UiColorPicker.vue";
+import UiTextButton from "./UiTextButton/UiTextButton.vue";
+
+export {
+  DpaMediaItem,
+  UiAutocomplete,
+  UiBadge,
+  UiButton,
+  UiButtonGroup,
+  UiCard,
+  UiCheckbox,
+  UiCheckBoxGroup,
+  UiChip,
+  UiCollapseNavigation,
+  UiDatePicker,
+  UiDialog,
+  UiFilterBadge,
+  UiFilterBadgeButton,
+  UiFilterButton,
+  UiIcon,
+  UiIconButton,
+  UiInfoContent,
+  UiInput,
+  UiList,
+  UiListItem,
+  UiMenu,
+  UiMenuList,
+  UiMenuItem,
+  UiOverlay,
+  UiOverlayMenu,
+  UiRadioInputGroup,
+  UiSection,
+  UiSectionDivider,
+  UiSkeletonBox,
+  UiSpinner,
+  UiSnackbar,
+  UiToggleButton,
+  UiTooltip,
+  UiSearchInput,
+  UiSearchBar,
+  UiSimpleInput,
+  UiColorPicker,
+  UiTextButton,
+};

package/dist/src/compositions/index.ts

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

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

@@ -0,0 +1,22 @@
+import UseBreakpoints from "./UseBreakpoints.stories.vue";
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+
+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

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

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

@@ -0,0 +1,19 @@
+import { useBreakpoints as vueUseBreakpoints } from "@vueuse/core";
+import { computed } from "vue";
+import screens from "../../tailwind/screens.js";
+
+export function useBreakpoints() {
+  const breakpoints = vueUseBreakpoints({
+    ...screens,
+  });
+
+  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 xxl = computed(() => currentBreakpoint.value.includes("xxl"));
+
+  return { currentBreakpoint, sm, md, lg, xl, xxl };
+}

package/dist/src/directives/index.ts

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

package/dist/src/directives/vClickAway.ts

@@ -0,0 +1,38 @@
+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

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

package/dist/src/tailwind/imports.css

@@ -0,0 +1,3 @@
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";

package/dist/src/tailwind/screens.js

@@ -0,0 +1,7 @@
+export default {
+  sm: "640px",
+  md: "768px",
+  lg: "1024px",
+  xl: "1280px",
+  xxl: "1600px",
+};

package/dist/src/tailwind/tailwind.config.js

@@ -0,0 +1,203 @@
+import screens from "./screens.js";
+import tailwindContainerQueries from "@tailwindcss/container-queries";
+import tailwindTypography from "@tailwindcss/typography";
+
+// This file is currently not type-checked. Adding `// @ts-check` to this file will turn type checking on and allow you to find issues within it. However, it will always mark the missing `"content"` property as an error. Unfortunately, "content" cannot be added as `"content": []` because projects consuming this config tend to write their `"content"` property _before_ pulling in the config and so the empty array would overwrite the project's `"content"` property.
+/** @type {import("tailwindcss").Config} */
+export default {
+  theme: {
+    inset: {
+      0: "0",
+      "1/2": "50%",
+      full: "100%",
+    },
+    screens,
+    fontSize: {
+      xs: "12px",
+      sm: "14px",
+      base: "16px",
+      lg: "18px",
+      xl: "20px",
+      "2xl": "24px",
+      "3xl": "30px",
+      "4xl": "36px",
+      "5xl": "48px",
+      "6xl": "60px",
+      "7xl": "72px",
+    },
+    spacing: {
+      px: "1px",
+      0: "0",
+      0.5: "2px",
+      1: "4px",
+      1.5: "6px",
+      2: "8px",
+      2.5: "10px",
+      3: "12px",
+      3.5: "14px",
+      4: "16px",
+      5: "20px",
+      6: "24px",
+      7: "28px",
+      8: "32px",
+      9: "36px",
+      10: "40px",
+      11: "46px",
+      12: "48px",
+      14: "56px",
+      16: "64px",
+      20: "80px",
+      24: "96px",
+      28: "108px",
+      32: "120px",
+      36: "136px",
+      37: "148px",
+      40: "160px",
+      41: "164px",
+      44: "176px",
+      48: "192px",
+      52: "208px",
+      56: "224px",
+      60: "240px",
+      64: "256px",
+      72: "288px",
+      80: "320px",
+      96: "384px",
+    },
+    extend: {
+      outline: {
+        blue: ["2px solid rgba(0, 62, 219, 0.5)", "2px"],
+      },
+      fontFamily: {
+        sans: ["Inter", "sans-serif"],
+        marketing: ["Futura", "sans-serif"],
+      },
+      spacing: {
+        inherit: "inherit",
+        half: "2px", // 2px,
+        inputFocused: "15px",
+      },
+      duration: {
+        0: "0ms",
+      },
+      colors: {
+        transparent: "rgba(255, 255, 255, 0)",
+        black: "#000",
+        white: "#fff",
+        gray: {
+          100: "#F5F5F5",
+          200: "#EEEEEE",
+          300: "#E3E3E3",
+          400: "#BABABA",
+          500: "#8C8C8C",
+          600: "#7E7E7E",
+          700: "#757575",
+          800: "#4D4D4D",
+          900: "#212121",
+        },
+        green: {
+          neon: "#00E281",
+          primary: "#00B064",
+          night: "#006345",
+        },
+        blue: {
+          default: "#003edb",
+          dark: "#0030aa",
+        },
+        red: {
+          default: "#E53935",
+          dark: "#AB000D",
+        },
+        pink: {
+          default: "#F5138D",
+          dark: "#BD0060",
+        },
+        purple: {
+          default: "#8E24AA",
+          dark: "#5C007A",
+        },
+        cyan: {
+          default: "#00ACC1",
+          dark: "#007C91",
+        },
+        teal: {
+          default: "#00897B",
+          dark: "#005B4F",
+        },
+        yellow: {
+          default: "#F9F500",
+          dark: "#C1BE00",
+        },
+        orange: {
+          default: "#FFB300",
+          dark: "#C68400",
+        },
+        "alert-red": {
+          default: "#F53000",
+          dark: "#BA2400",
+        },
+        "alert-green": {
+          default: "#00D200",
+          dark: "#00AA00",
+        },
+        rainbow: {
+          red: "#E53935",
+          "red-dark": "#AB000D",
+          orange: "#FFB300",
+          purple: "#8E24AA",
+        },
+      },
+      opacity: {
+        60: "0.6",
+        20: "0.2",
+      },
+      boxShadow: {
+        default: "0px 1px 1px rgba(0, 0, 0, 0.1)",
+        negative: "0px -1px 1px rgba(0, 0, 0, 0.1)",
+        md: "0px 1px 5px rgba(0, 0, 0, 0.1)",
+        lg: "0px 2px 6px rgba(0, 0, 0, 0.25)",
+      },
+      inset: {
+        0: "0",
+        auto: "auto",
+        1: "4px",
+        3: "12px",
+        4: "16px",
+        5: "20px",
+        12: "48px",
+        16: "64px",
+        full: "100%",
+      },
+      screens: {
+        print: { raw: "print" },
+      },
+      lineHeight: {
+        3: "12px",
+        4: "16px",
+        5: "20px",
+        6: "24px",
+        7: "28px",
+        8: "32px",
+        9: "36px",
+        10: "40px",
+      },
+      width: {
+        4.5: "18px",
+      },
+      height: {
+        4.5: "18px",
+      },
+      aria: {
+        invalid: 'invalid="true"',
+      },
+    },
+  },
+  variants: {
+    opacity: ["responsive", "hover", "focus", "group-hover"],
+    outline: ["focus", "focus-visible"],
+    display: ["responsive", "group-hover"],
+    textColor: ["responsive", "hover", "focus", "group-hover", "group-focus"],
+    textDecoration: ["group-hover"],
+  },
+  plugins: [tailwindContainerQueries, tailwindTypography],
+};

package/dist/src/utils/cn.ts

@@ -0,0 +1,7 @@
+import type { ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+import { clsx } from "clsx";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}