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

package/dist/src/components/UiMenu/UiMenu.vue

@@ -0,0 +1,444 @@
+<template>
+  <div v-click-away="close" class="relative">
+    <UiFilterButton
+      ref="uiMenuActivator"
+      :variant="buttonVariant"
+      :title="selectedOptionLabel || defaultTitle"
+      data-testid="button"
+      :disabled="disabled"
+      :active="active"
+      icon-size="small"
+      :icon-left="iconLeft"
+      :class="{ 'border-gray-700': isOpen }"
+      :size="filterButtonSize"
+      @click="toggleDisplay"
+    ></UiFilterButton>
+    <Transition :name="animate ? `fade-up` : 'none'">
+      <div
+        v-if="isOpen"
+        ref="uiMenuDropdown"
+        :class="[
+          'absolute ',
+          cn(
+            'z-10 [--transition-duration:200ms] [--transition-close-duration:100ms]',
+            placedListClass,
+          ),
+        ]"
+        :data-side="floatingUi.placement.value"
+        :style="
+          floatingStylesActive
+            ? {
+                ...floatingStyles,
+                transform: floatingUi.isPositioned
+                  ? floatingStyles.transform
+                  : 'translate(0,-200%)',
+              }
+            : null
+        "
+        data-testid="menu"
+      >
+        <UiList
+          :data-side="floatingUi.placement.value"
+          :class="[
+            cn(
+              'block min-w-max border-none bg-white shadow-lg data-[side*=top]:mb-1 data-[side*=bottom]:mt-1',
+              menuClasses,
+            ),
+          ]"
+          data-testid="menu-option-list"
+        >
+          <li
+            v-if="hasSearch"
+            style="outline-offset: -2px"
+            class="border-b fill-current px-4 py-3 text-gray-900 shadow-none"
+            tabindex="-1"
+            data-testid="search-input"
+          >
+            <UiSimpleInput
+              :autofocus="hasAutoFocus"
+              :placeholder="searchPlaceholder"
+              :value="query"
+              data-testid="menu-search-input"
+              @input="(event) => updateValue(event)"
+            />
+          </li>
+          <slot
+            :checkbox-color="checkboxColor"
+            :checkbox-size="checkboxSize"
+            :icon-size="iconSize"
+            :image-shape="imageShape"
+            :list-variant="listVariant"
+            :options="options"
+            :grouped-options="groupedOptions"
+          >
+            <ul
+              v-if="!!groupedOptions"
+              class="max-h-80 overflow-y-auto"
+              tabindex="0"
+            >
+              <template
+                v-for="groupedOption in groupedOptions"
+                :key="groupedOption.groupLabel"
+              >
+                <li
+                  v-if="!!groupedOption.groupLabel"
+                  class="flex h-6 items-center border-t bg-gray-100 px-4 text-xs font-semibold uppercase tracking-wider text-gray-700 first:border-t-0"
+                >
+                  {{ groupedOption.groupLabel }}
+                </li>
+                <UiListItem
+                  v-for="(option, index) in groupedOption.options"
+                  :key="`${groupedOption.groupLabel}-menuOptions-${index}`"
+                  :selected="option.selected"
+                  :selectable="listVariant === 'selectable'"
+                  :is-checked="option.selected"
+                  :check-box-menu="listVariant === 'checkbox'"
+                  :icon-size="iconSize"
+                  :image-shape="imageShape"
+                  :image-src="option.imageSrc"
+                  :checkbox-size="checkboxSize"
+                  :check-box-color="checkboxColor"
+                  class="hover:bg-gray-100 focus:bg-gray-300"
+                  :data-testid="`menu-option-button-${index}`"
+                  @list-item-click="selectOption(option)"
+                  >{{ option.label }}
+                </UiListItem>
+              </template>
+            </ul>
+            <ul v-else class="max-h-60 overflow-y-auto" tabindex="0">
+              <UiListItem
+                v-for="(option, index) in options"
+                :key="`menuOptions-${index}`"
+                :selected="option.selected"
+                :selectable="listVariant === 'selectable'"
+                :is-checked="option.selected"
+                :check-box-menu="listVariant === 'checkbox'"
+                :icon-size="iconSize"
+                :image-shape="imageShape"
+                :image-src="option.imageSrc"
+                :checkbox-size="checkboxSize"
+                :check-box-color="checkboxColor"
+                class="hover:bg-gray-100 focus:bg-gray-300"
+                :data-testid="`menu-option-button-${index}`"
+                @list-item-click="selectOption(option)"
+                >{{ option.label }}
+              </UiListItem>
+            </ul>
+          </slot>
+
+          <li
+            v-if="hasResetOption"
+            style="outline-offset: -2px"
+            class="border-t fill-current px-4 py-2 text-gray-900 shadow-none"
+            data-testid="reset-button"
+          >
+            <UiButton
+              rounded
+              color="transparent"
+              :disabled="disabledReset"
+              disabled-variant="secondary"
+              icon-name="reset"
+              size="xs"
+              data-testid="menu-search-reset-button"
+              @click="handleReset"
+              >{{ resetLabel }}</UiButton
+            >
+          </li>
+        </UiList>
+      </div>
+    </Transition>
+  </div>
+</template>
+<script setup lang="ts" generic="Value">
+import { computed, type HTMLAttributes, ref, watchPostEffect } from "vue";
+import {
+  autoUpdate,
+  flip,
+  type Placement,
+  shift,
+  useFloating,
+  type UseFloatingOptions,
+} from "@floating-ui/vue";
+import UiFilterButton from "../UiFilterButton/UiFilterButton.vue";
+import UiList from "../UiList/UiList.vue";
+import UiListItem from "../UiListItem/UiListItem.vue";
+import { vClickAway } from "../../directives/vClickAway.js";
+import UiButton from "../UiButton/UiButton.vue";
+import UiSimpleInput from "../UiSimpleInput/UiSimpleInput.vue";
+import type {
+  UiMenuCheckboxColor,
+  UiMenuCheckboxSize,
+  UiMenuGroupedOption,
+  UiMenuIconSize,
+  UiMenuImageShape,
+  UiMenuListVariant,
+  UiMenuOptionType,
+  UiMenuSelectedOption,
+} from "./UiMenuTypes";
+import { cn } from "../../utils/cn.js";
+import type { UiIconName } from "../UiIcon/UiIcon.vue";
+
+defineSlots<{
+  // Marking the slot as optional avoids inexplicable TypeScript errors in the storybook story (see https://github.com/vuejs/core/issues/10647).
+  default?(props: {
+    checkboxColor: UiMenuCheckboxColor;
+    checkboxSize: UiMenuCheckboxSize;
+    iconSize: UiMenuIconSize;
+    imageShape: UiMenuImageShape;
+    listVariant: UiMenuListVariant;
+    options: UiMenuOptionType<Value>[];
+    groupedOptions: UiMenuGroupedOption<Value>[];
+  }): any;
+}>();
+
+const props = withDefaults(
+  defineProps<{
+    menuClasses?: HTMLAttributes["class"];
+    options?: UiMenuOptionType<Value>[];
+    groupedOptions?: UiMenuGroupedOption<Value>[];
+    hasAutoFocus?: boolean;
+    isOpen?: boolean;
+    disabled?: boolean;
+    active?: boolean;
+    defaultTitle?: string;
+    noTitle?: boolean;
+    multiLabel?: string;
+    filterButtonSize?: "small" | "xs";
+    iconSize?: UiMenuIconSize;
+    iconLeft?: UiIconName | null;
+    imageShape?: UiMenuImageShape;
+    checkboxSize?: UiMenuCheckboxSize;
+    buttonVariant?:
+      | "blue-rounded"
+      | "white-rounded"
+      | "transparent-rounded"
+      | "blank";
+    listVariant?: UiMenuListVariant;
+    checkboxColor?: UiMenuCheckboxColor;
+    hasResetOption?: boolean;
+    disabledReset?: boolean;
+    resetLabel?: string;
+    searchPlaceholder?: string;
+    hasSearch?: boolean;
+    floatingStylesActive?: boolean;
+    floatingUiPlacement?: Placement;
+    floatingUiOptions?: UseFloatingOptions | null;
+    animate?: boolean;
+    placedListClass?: string;
+    query?: string;
+  }>(),
+  {
+    isOpen: false,
+    disabled: false,
+    active: false,
+    defaultTitle: "",
+    noTitle: false,
+    multiLabel: "",
+    filterButtonSize: "small",
+    iconSize: "small",
+    iconLeft: null,
+    imageShape: "square",
+    checkboxSize: "medium",
+    buttonVariant: "white-rounded",
+    listVariant: "blank",
+    checkboxColor: "blue",
+    hasResetOption: false,
+    disabledReset: true,
+    resetLabel: "",
+    searchPlaceholder: "",
+    hasSearch: false,
+    hasAutoFocus: false,
+    floatingStylesActive: true,
+    options: undefined,
+    groupedOptions: undefined,
+    menuClasses: undefined,
+    floatingUiPlacement: "bottom-start",
+    floatingUiOptions: null,
+    animate: false,
+    placedListClass: undefined,
+    query: "",
+  },
+);
+
+const emit = defineEmits<{
+  open: [];
+  close: [];
+  "option-selected": [UiMenuSelectedOption<Value>];
+  input: [string];
+  reset: [];
+  placed: [];
+}>();
+
+const uiMenuActivator = ref();
+const uiMenuDropdown = ref();
+
+const { floatingStyles, ...floatingUi } = useFloating(
+  uiMenuActivator,
+  uiMenuDropdown,
+  {
+    placement: props.floatingUiPlacement,
+    middleware: [flip(), shift()],
+    whileElementsMounted: autoUpdate,
+    ...(props.floatingUiOptions ? props.floatingUiOptions : {}),
+  },
+);
+
+watchPostEffect(() => {
+  if (floatingUi.isPositioned.value) {
+    emit("placed");
+  }
+});
+
+const selectedOptionLabel = computed((): string => {
+  const options =
+    props.options || props.groupedOptions?.map((group) => group.options).flat();
+  const selectedOptions = options?.filter((option) => option?.selected);
+  const selectedValues = [
+    ...new Set(selectedOptions?.map(({ value }) => value)),
+  ];
+  if (selectedOptions && selectedValues.length > 0) {
+    if (props.noTitle) {
+      return "";
+    }
+    if (selectedValues.length === 1) {
+      return selectedOptions[0].label;
+    } else {
+      return `${selectedValues.length} ${props.multiLabel}`;
+    }
+  }
+  return "";
+});
+
+const selectOption = (selectedOption: UiMenuOptionType<Value>): void => {
+  const options =
+    props.options || props.groupedOptions?.map((group) => group.options).flat();
+  const index = options?.findIndex(
+    (option) => option.value === selectedOption.value,
+  ) as number;
+
+  emit("option-selected", {
+    ...selectedOption,
+    index,
+  });
+};
+
+const toggleDisplay = (): void => {
+  (props.isOpen ? close : open)();
+};
+
+const close = (): void => {
+  if (props.isOpen) emit("close");
+};
+
+const open = (): void => {
+  if (!props.isOpen) emit("open");
+};
+
+const updateValue = (value: string): void => {
+  emit("input", value);
+};
+
+const handleReset = () => {
+  emit("reset");
+};
+</script>
+
+<style scoped>
+@keyframes fade-slide-down {
+  0% {
+    opacity: 0;
+    transform: translate3d(0, -4px, 0);
+  }
+  100% {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes fade-slide-right {
+  0% {
+    opacity: 0;
+    transform: translate3d(4px, 0, 0);
+  }
+  100% {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes fade-slide-left {
+  0% {
+    opacity: 0;
+    transform: translate3d(-4px, 0, 0);
+  }
+  100% {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes fade-slide-up {
+  0% {
+    opacity: 0;
+    transform: translate3d(0, 4px, 0);
+  }
+  100% {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.fade-up-enter-active {
+  animation: fade-in calc(var(--transition-duration) + 5ms);
+}
+
+.fade-up-leave-active {
+  animation: fade-in calc(var(--transition-close-duration) + 5ms);
+  animation-direction: reverse;
+}
+
+[data-side*="bottom"].fade-up-enter-active > * {
+  animation: fade-slide-up var(--transition-duration);
+}
+
+[data-side*="bottom"].fade-up-leave-active > * {
+  animation: fade-slide-up var(--transition-close-duration);
+  animation-direction: reverse;
+}
+
+[data-side*="top"].fade-up-enter-active > * {
+  animation: fade-slide-down var(--transition-duration);
+}
+
+[data-side*="top"].fade-up-leave-active > * {
+  animation: fade-slide-down var(--transition-close-duration);
+  animation-direction: reverse;
+}
+
+[data-side*="left"].fade-up-enter-active > * {
+  animation: fade-slide-left var(--transition-duration);
+}
+
+[data-side*="left"].fade-up-leave-active > * {
+  animation: fade-slide-left var(--transition-close-duration);
+  animation-direction: reverse;
+}
+
+[data-side*="right"].fade-up-enter-active > * {
+  animation: fade-slide-right var(--transition-duration);
+}
+
+[data-side*="right"].fade-up-leave-active > * {
+  animation: fade-slide-right var(--transition-close-duration);
+  animation-direction: reverse;
+}
+</style>

package/dist/src/components/UiMenu/UiMenuItem.vue

@@ -0,0 +1,57 @@
+<template>
+  <UiListItem
+    :selectable="listVariant === 'selectable'"
+    :check-box-menu="listVariant === 'checkbox'"
+    :icon-size="iconSize"
+    :image-shape="imageShape"
+    :checkbox-size="checkboxSize"
+    :check-box-color="checkboxColor"
+    :class="cn('hover:bg-gray-100 focus:bg-gray-300', $props.class)"
+    v-bind="{
+      ...(props.option
+        ? {
+            selected: props.option.selected,
+            isChecked: props.option.selected,
+            imageSrc: props.option.imageSrc,
+          }
+        : {}),
+    }"
+  >
+    <slot :option="option" />
+  </UiListItem>
+</template>
+
+<script setup lang="ts" generic="Value">
+import UiListItem from "../UiListItem/UiListItem.vue";
+import type {
+  UiMenuCheckboxColor,
+  UiMenuCheckboxSize,
+  UiMenuIconSize,
+  UiMenuImageShape,
+  UiMenuListVariant,
+  UiMenuOptionType,
+} from "./UiMenuTypes";
+import type { HTMLAttributes } from "vue";
+import { cn } from "../../utils/cn.js";
+
+const props = withDefaults(
+  defineProps<{
+    class?: HTMLAttributes["class"];
+    option?: UiMenuOptionType<Value>;
+    listVariant?: UiMenuListVariant;
+    iconSize?: UiMenuIconSize;
+    imageShape?: UiMenuImageShape;
+    checkboxSize?: UiMenuCheckboxSize;
+    checkboxColor?: UiMenuCheckboxColor;
+  }>(),
+  {
+    class: undefined,
+    option: undefined,
+    checkboxColor: "blue",
+    checkboxSize: "medium",
+    iconSize: "small",
+    imageShape: "square",
+    listVariant: "blank",
+  },
+);
+</script>

package/dist/src/components/UiMenu/UiMenuList.vue

@@ -0,0 +1,18 @@
+<template>
+  <ul :class="cn('max-h-80 overflow-y-auto', $props.class)" tabindex="0">
+    <slot />
+  </ul>
+</template>
+
+<script lang="ts" setup>
+import { cn } from "../../utils/cn.js";
+
+withDefaults(
+  defineProps<{
+    class?: string;
+  }>(),
+  {
+    class: undefined,
+  },
+);
+</script>

package/dist/src/components/UiMenu/UiMenuTypes.ts

@@ -0,0 +1,20 @@
+export type UiMenuOptionType<Value = unknown> = {
+  label: string;
+  imageSrc?: string | undefined;
+  selected: boolean;
+  value: Value;
+};
+
+export type UiMenuSelectedOption<Value = unknown> = UiMenuOptionType<Value> & {
+  index: number;
+};
+
+export type UiMenuGroupedOption<Value = unknown> = {
+  groupLabel: string;
+  options: UiMenuOptionType<Value>[];
+};
+export type UiMenuListVariant = "checkbox" | "selectable" | "blank";
+export type UiMenuIconSize = "small" | "medium" | "large";
+export type UiMenuImageShape = "rounded" | "square";
+export type UiMenuCheckboxSize = "small" | "medium";
+export type UiMenuCheckboxColor = "blue" | "gray";

package/dist/src/components/UiOverlay/README.md

@@ -0,0 +1,36 @@
+# @dpa-shared-components/UiOverlay
+
+## Usage
+
+```html
+<!-- SomeComponent.vue using UiOverlay -->
+<template>
+    <UiOverlay>
+        <div class='grid place-items-center'>
+            <span class='text-white'>Here is a Overlay</span>
+        </div>
+    </UiOverlay>
+</template>
+
+<script setup lang="ts">
+    import {UiOverlay} from "@dpa-id-components/dpa-shared-components";
+</script>
+```
+
+## API
+
+### Props
+
+This component has no properties
+
+### Events
+
+| Name    | Type         | Description                        |
+|---------|--------------|------------------------------------|
+| `close` | none | Emitted when the Overlay is closed |
+
+### Slots
+
+| Name      | Description                                  |
+|-----------|----------------------------------------------|
+| `default` | slot for the rendering the overlay's content |

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

@@ -0,0 +1,15 @@
+import { describe, expect, it } from "vitest";
+import { mount } from "@vue/test-utils";
+import UiOverlay from "./UiOverlay.vue";
+
+describe("UiOverlay", () => {
+  const wrapper = mount(UiOverlay, {});
+
+  it("emits correct event when clicked", async () => {
+    const bg = wrapper.find('[data-testid="background"]');
+
+    await bg.trigger("click");
+    await wrapper.vm.$nextTick();
+    expect(wrapper.emitted().close).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,20 @@
+import UiOverlay from "./UiOverlay.vue";
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+
+const meta = {
+  title: "Ui/UiOverlay",
+  component: UiOverlay,
+  render: (args) => ({
+    setup() {
+      return { args };
+    },
+    components: { UiOverlay },
+    template:
+      "<UiOverlay v-bind='args'><div class='grid place-items-center'><span class='text-white'>Here is a Overlay</span></div></UiOverlay>",
+  }),
+} satisfies Meta<typeof UiOverlay>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/dist/src/components/UiOverlay/UiOverlay.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="fixed inset-0 z-50 max-h-screen" role="dialog">
+    <div
+      class="fixed inset-0 h-screen bg-black opacity-60"
+      data-testid="background"
+      style="z-index: -1"
+      @click="emit('close')"
+    />
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+const emit = defineEmits<{
+  close: [];
+}>();
+</script>

package/dist/src/components/UiOverlayMenu/README.md

@@ -0,0 +1,38 @@
+# @dpa-shared-components/UiOverlayMenu
+
+## Usage
+
+```html
+<!-- SomeComponent.vue using UiOverlay -->
+<template>
+    <UiOverlayMenu :is-open="true">
+        <div class='grid place-items-center'>
+            <span class='text-white'>Here is Content</span>
+        </div>
+    </UiOverlayMenu>
+</template>
+
+<script setup lang="ts">
+    import {UiOverlay} from "@dpa-id-components/dpa-shared-components";
+</script>
+```
+
+## API
+
+### Props
+
+| Name     | Type      | Default | Description                                |
+|----------|-----------|---------|--------------------------------------------|
+| `isOpen` | `boolean` | `false` | controls if Overlay Menu is open or closed |
+
+### Events
+
+| Name    | Type         | Description                                       |
+|---------|--------------|---------------------------------------------------|
+| `close` | none | Emitted when the clicked outside the Overlay Menu |
+
+### Slots
+
+| Name      | Description                                       |
+|-----------|---------------------------------------------------|
+| `default` | slot for the rendering the overlay menu's content |

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

@@ -0,0 +1,31 @@
+import { describe, expect, it } from "vitest";
+import { mount } from "@vue/test-utils";
+import UiOverlayMenu from "./UiOverlayMenu.vue";
+import { vClickAway } from "../../directives/vClickAway.js";
+import UiButton from "../UiButton/UiButton.vue";
+
+document.body.innerHTML = `
+    <div id="app"></div>
+`;
+describe("UiOverlayMenu", () => {
+  const overlayWrapper = mount(UiOverlayMenu, {
+    attachTo: document.getElementById("app") || "#app",
+    props: {
+      isOpen: true,
+    },
+    global: {
+      directives: {
+        clickAway: vClickAway,
+      },
+    },
+  });
+
+  const buttonWrapper = mount(UiButton, {
+    attachTo: document.getElementById("app") || "#app",
+  });
+
+  it("emits correct event when clicked outside of slot content", async () => {
+    await buttonWrapper.trigger("mousedown");
+    expect(overlayWrapper.emitted().close).toBeTruthy();
+  });
+});