@antify/ui-module 1.1.3

package/dist/module.mjs

@@ -0,0 +1,339 @@
+import defaultColors from 'tailwindcss/colors.js';
+import { defineNuxtModule, createResolver, addPlugin, addImportsDir, addComponentsDir } from '@nuxt/kit';
+
+const colors = {
+  "white": defaultColors.white,
+  "black": defaultColors.black,
+  "neutral-50": defaultColors.slate["50"],
+  "neutral-100": defaultColors.slate["100"],
+  "neutral-200": defaultColors.slate["200"],
+  "neutral-300": defaultColors.slate["300"],
+  "neutral-400": defaultColors.slate["400"],
+  "neutral-500": defaultColors.slate["500"],
+  "neutral-600": defaultColors.slate["600"],
+  "neutral-700": defaultColors.slate["700"],
+  "neutral-800": defaultColors.slate["800"],
+  "neutral-900": defaultColors.slate["900"],
+  "neutral-950": defaultColors.slate["950"],
+  "primary-50": defaultColors.sky["50"],
+  "primary-100": defaultColors.sky["100"],
+  "primary-200": defaultColors.sky["200"],
+  "primary-300": defaultColors.sky["300"],
+  "primary-400": defaultColors.sky["400"],
+  "primary-500": defaultColors.sky["500"],
+  "primary-600": defaultColors.sky["600"],
+  "primary-700": defaultColors.sky["700"],
+  "primary-800": defaultColors.sky["800"],
+  "primary-900": defaultColors.sky["900"],
+  "primary-950": defaultColors.sky["950"],
+  "secondary-50": defaultColors.lime["50"],
+  "secondary-100": defaultColors.lime["100"],
+  "secondary-200": defaultColors.lime["200"],
+  "secondary-300": defaultColors.lime["300"],
+  "secondary-400": defaultColors.lime["400"],
+  "secondary-500": defaultColors.lime["500"],
+  "secondary-600": defaultColors.lime["600"],
+  "secondary-700": defaultColors.lime["700"],
+  "secondary-800": defaultColors.lime["800"],
+  "secondary-900": defaultColors.lime["900"],
+  "secondary-950": defaultColors.lime["950"],
+  "info-50": defaultColors.blue["50"],
+  "info-100": defaultColors.blue["100"],
+  "info-200": defaultColors.blue["200"],
+  "info-300": defaultColors.blue["300"],
+  "info-400": defaultColors.blue["400"],
+  "info-500": defaultColors.blue["500"],
+  "info-600": defaultColors.blue["600"],
+  "info-700": defaultColors.blue["700"],
+  "info-800": defaultColors.blue["800"],
+  "info-900": defaultColors.blue["900"],
+  "info-950": defaultColors.blue["950"],
+  "success-50": defaultColors.green["50"],
+  "success-100": defaultColors.green["100"],
+  "success-200": defaultColors.green["200"],
+  "success-300": defaultColors.green["300"],
+  "success-400": defaultColors.green["400"],
+  "success-500": defaultColors.green["500"],
+  "success-600": defaultColors.green["600"],
+  "success-700": defaultColors.green["700"],
+  "success-800": defaultColors.green["800"],
+  "success-900": defaultColors.green["900"],
+  "success-950": defaultColors.green["950"],
+  "warning-50": defaultColors.yellow["50"],
+  "warning-100": defaultColors.yellow["100"],
+  "warning-200": defaultColors.yellow["200"],
+  "warning-300": defaultColors.yellow["300"],
+  "warning-400": defaultColors.yellow["400"],
+  "warning-500": defaultColors.yellow["500"],
+  "warning-600": defaultColors.yellow["600"],
+  "warning-700": defaultColors.yellow["700"],
+  "warning-800": defaultColors.yellow["800"],
+  "warning-900": defaultColors.yellow["900"],
+  "warning-950": defaultColors.yellow["950"],
+  "danger-50": defaultColors.red["50"],
+  "danger-100": defaultColors.red["100"],
+  "danger-200": defaultColors.red["200"],
+  "danger-300": defaultColors.red["300"],
+  "danger-400": defaultColors.red["400"],
+  "danger-500": defaultColors.red["500"],
+  "danger-600": defaultColors.red["600"],
+  "danger-700": defaultColors.red["700"],
+  "danger-800": defaultColors.red["800"],
+  "danger-900": defaultColors.red["900"],
+  "danger-950": defaultColors.red["950"]
+};
+const fontColors = {
+  "for-white-bg-font": colors["neutral-900"],
+  "for-black-bg-font": colors["neutral-100"],
+  "neutral-50-font": colors["neutral-600"],
+  "neutral-100-font": colors["neutral-600"],
+  "neutral-200-font": colors["neutral-600"],
+  "neutral-300-font": colors["neutral-600"],
+  "neutral-400-font": colors["neutral-600"],
+  "neutral-500-font": colors["neutral-100"],
+  "neutral-600-font": colors["neutral-100"],
+  "neutral-700-font": colors["neutral-100"],
+  "neutral-800-font": colors["neutral-100"],
+  "neutral-900-font": colors["neutral-100"],
+  "neutral-950-font": colors["neutral-100"],
+  "primary-50-font": colors["neutral-600"],
+  "primary-100-font": colors["neutral-600"],
+  "primary-200-font": colors["neutral-600"],
+  "primary-300-font": colors["neutral-600"],
+  "primary-400-font": colors["neutral-600"],
+  "primary-500-font": colors["neutral-100"],
+  "primary-600-font": colors["neutral-100"],
+  "primary-700-font": colors["neutral-100"],
+  "primary-800-font": colors["neutral-100"],
+  "primary-900-font": colors["neutral-100"],
+  "primary-950-font": colors["neutral-100"],
+  "secondary-50-font": colors["neutral-600"],
+  "secondary-100-font": colors["neutral-600"],
+  "secondary-200-font": colors["neutral-600"],
+  "secondary-300-font": colors["neutral-600"],
+  "secondary-400-font": colors["neutral-600"],
+  "secondary-500-font": colors["neutral-100"],
+  "secondary-600-font": colors["neutral-100"],
+  "secondary-700-font": colors["neutral-100"],
+  "secondary-800-font": colors["neutral-100"],
+  "secondary-900-font": colors["neutral-100"],
+  "secondary-950-font": colors["neutral-100"],
+  "success-50-font": colors["neutral-600"],
+  "success-100-font": colors["neutral-600"],
+  "success-200-font": colors["neutral-600"],
+  "success-300-font": colors["neutral-600"],
+  "success-400-font": colors["neutral-600"],
+  "success-500-font": colors["neutral-100"],
+  "success-600-font": colors["neutral-100"],
+  "success-700-font": colors["neutral-100"],
+  "success-800-font": colors["neutral-100"],
+  "success-900-font": colors["neutral-100"],
+  "success-950-font": colors["neutral-100"],
+  "info-50-font": colors["neutral-600"],
+  "info-100-font": colors["neutral-600"],
+  "info-200-font": colors["neutral-600"],
+  "info-300-font": colors["neutral-600"],
+  "info-400-font": colors["neutral-600"],
+  "info-500-font": colors["neutral-100"],
+  "info-600-font": colors["neutral-100"],
+  "info-700-font": colors["neutral-100"],
+  "info-800-font": colors["neutral-100"],
+  "info-900-font": colors["neutral-100"],
+  "info-950-font": colors["neutral-100"],
+  "warning-50-font": colors["neutral-600"],
+  "warning-100-font": colors["neutral-600"],
+  "warning-200-font": colors["neutral-600"],
+  "warning-300-font": colors["neutral-600"],
+  "warning-400-font": colors["neutral-600"],
+  "warning-500-font": colors["neutral-100"],
+  "warning-600-font": colors["neutral-100"],
+  "warning-700-font": colors["neutral-100"],
+  "warning-800-font": colors["neutral-100"],
+  "warning-900-font": colors["neutral-100"],
+  "warning-950-font": colors["neutral-100"],
+  "danger-50-font": colors["neutral-600"],
+  "danger-100-font": colors["neutral-600"],
+  "danger-200-font": colors["neutral-600"],
+  "danger-300-font": colors["neutral-600"],
+  "danger-400-font": colors["neutral-600"],
+  "danger-500-font": colors["neutral-100"],
+  "danger-600-font": colors["neutral-100"],
+  "danger-700-font": colors["neutral-100"],
+  "danger-800-font": colors["neutral-100"],
+  "danger-900-font": colors["neutral-100"],
+  "danger-950-font": colors["neutral-100"]
+};
+const tailwindcss = {
+  content: [
+    // For module dev
+    "./src/runtime/**/*.{vue,js,ts,jsx,tsx}",
+    "./src/runtime/**/*.stories.ts",
+    "./playground/**/*.{vue,js,ts,jsx,tsx}",
+    "../ui-module/src/**/*.{vue,js,ts,jsx,tsx}",
+    // For project dev
+    "./app.vue",
+    "./components.{vue,js,ts,jsx,tsx}",
+    "./pages.{vue,js,ts,jsx,tsx}",
+    // If this config is used in a project
+    "./node_modules/@antify/*/dist/**/*.{js,vue,ts}",
+    "./node_modules/@antify/*/src/**/*.{js,vue,ts}"
+  ],
+  theme: {
+    colors: {
+      ...colors,
+      ...fontColors
+    },
+    extend: {
+      animation: {
+        skeleton: "skeleton 2s ease-out infinite"
+      },
+      keyframes: {
+        "skeleton": {
+          "0%, 100%": { "background-color": colors["neutral-300"] },
+          "50%": { "background-color": colors["neutral-100"] }
+        }
+      }
+    }
+  }
+};
+
+var ColorType = /* @__PURE__ */ ((ColorType2) => {
+  ColorType2["base"] = "base";
+  ColorType2["primary"] = "primary";
+  ColorType2["secondary"] = "secondary";
+  ColorType2["danger"] = "danger";
+  ColorType2["info"] = "info";
+  ColorType2["success"] = "success";
+  ColorType2["warning"] = "warning";
+  return ColorType2;
+})(ColorType || {});
+var InputColorType = /* @__PURE__ */ ((InputColorType2) => {
+  InputColorType2["base"] = "base";
+  InputColorType2["danger"] = "danger";
+  InputColorType2["info"] = "info";
+  InputColorType2["success"] = "success";
+  InputColorType2["warning"] = "warning";
+  return InputColorType2;
+})(InputColorType || {});
+
+var Grouped = /* @__PURE__ */ ((Grouped2) => {
+  Grouped2["none"] = "none";
+  Grouped2["left"] = "left";
+  Grouped2["center"] = "center";
+  Grouped2["right"] = "right";
+  return Grouped2;
+})(Grouped || {});
+
+var Position = /* @__PURE__ */ ((Position2) => {
+  Position2["top"] = "top";
+  Position2["right"] = "right";
+  Position2["bottom"] = "bottom";
+  Position2["left"] = "left";
+  return Position2;
+})(Position || {});
+var CornerPosition = /* @__PURE__ */ ((CornerPosition2) => {
+  CornerPosition2["topLeft"] = "topLeft";
+  CornerPosition2["topRight"] = "topRight";
+  CornerPosition2["bottomRight"] = "bottomRight";
+  CornerPosition2["bottomLeft"] = "bottomLeft";
+  return CornerPosition2;
+})(CornerPosition || {});
+
+var Size = /* @__PURE__ */ ((Size2) => {
+  Size2["sm"] = "sm";
+  Size2["md"] = "md";
+  return Size2;
+})(Size || {});
+
+var CollapseStrategy = /* @__PURE__ */ ((CollapseStrategy2) => {
+  CollapseStrategy2["single"] = "single";
+  CollapseStrategy2["multiple"] = "multiple";
+  return CollapseStrategy2;
+})(CollapseStrategy || {});
+
+var IconSize = /* @__PURE__ */ ((IconSize2) => {
+  IconSize2["sm"] = "sm";
+  IconSize2["md"] = "md";
+  IconSize2["xl3"] = "3xl";
+  return IconSize2;
+})(IconSize || {});
+
+var AntTableRowTypes = /* @__PURE__ */ ((AntTableRowTypes2) => {
+  AntTableRowTypes2["text"] = "text";
+  AntTableRowTypes2["html"] = "html";
+  AntTableRowTypes2["link"] = "link";
+  AntTableRowTypes2["slot"] = "slot";
+  return AntTableRowTypes2;
+})(AntTableRowTypes || {});
+var AntTableAlign = /* @__PURE__ */ ((AntTableAlign2) => {
+  AntTableAlign2["left"] = "left";
+  AntTableAlign2["center"] = "center";
+  AntTableAlign2["right"] = "right";
+  return AntTableAlign2;
+})(AntTableAlign || {});
+var AntTableSortDirection = /* @__PURE__ */ ((AntTableSortDirection2) => {
+  AntTableSortDirection2["asc"] = "asc";
+  AntTableSortDirection2["desc"] = "desc";
+  AntTableSortDirection2["neutral"] = "neutral";
+  return AntTableSortDirection2;
+})(AntTableSortDirection || {});
+
+var TextInputType = /* @__PURE__ */ ((TextInputType2) => {
+  TextInputType2["email"] = "email";
+  TextInputType2["password"] = "password";
+  TextInputType2["tel"] = "tel";
+  TextInputType2["text"] = "text";
+  TextInputType2["url"] = "url";
+  return TextInputType2;
+})(TextInputType || {});
+
+var ButtonType = /* @__PURE__ */ ((ButtonType2) => {
+  ButtonType2["button"] = "button";
+  ButtonType2["submit"] = "submit";
+  return ButtonType2;
+})(ButtonType || {});
+
+var BaseInputType = /* @__PURE__ */ ((BaseInputType2) => {
+  BaseInputType2["date"] = "date";
+  BaseInputType2["datetime"] = "datetime";
+  BaseInputType2["email"] = "email";
+  BaseInputType2["hidden"] = "hidden";
+  BaseInputType2["month"] = "month";
+  BaseInputType2["number"] = "number";
+  BaseInputType2["password"] = "password";
+  BaseInputType2["search"] = "search";
+  BaseInputType2["tel"] = "tel";
+  BaseInputType2["text"] = "text";
+  BaseInputType2["time"] = "time";
+  BaseInputType2["url"] = "url";
+  BaseInputType2["week"] = "week";
+  BaseInputType2["range"] = "range";
+  return BaseInputType2;
+})(BaseInputType || {});
+
+const moduleKey = "uiModule";
+const module = defineNuxtModule({
+  meta: {
+    name: "ui-module",
+    configKey: moduleKey
+  },
+  defaults: {},
+  async setup(options, nuxt) {
+    const { resolve } = createResolver(import.meta.url);
+    const runtimeDir = resolve("./runtime");
+    nuxt.options.build.transpile.push(runtimeDir);
+    addPlugin(resolve(runtimeDir, "plugins/ui-module"));
+    addImportsDir(resolve(runtimeDir, "composables"));
+    await addComponentsDir({
+      path: resolve(runtimeDir, "components"),
+      pattern: "**/*.vue",
+      pathPrefix: false,
+      global: true
+    });
+    nuxt.options.postcss.plugins.tailwindcss = tailwindcss;
+    nuxt.options.css.push(resolve(runtimeDir, "assets/tailwind.css"));
+    nuxt.options.runtimeConfig.public[moduleKey] = options;
+  }
+});
+
+export { AntTableAlign, AntTableRowTypes, AntTableSortDirection, BaseInputType, ButtonType, CollapseStrategy, ColorType, CornerPosition, Grouped, IconSize, InputColorType, Position, Size, TextInputType, module as default };

package/dist/runtime/assets/tailwind.css

@@ -0,0 +1 @@
+@tailwind base;@tailwind components;@tailwind utilities;

package/dist/runtime/components/AntAccordion.vue

@@ -0,0 +1,59 @@
+<script lang="ts" setup>
+import AntAccordionItem from './AntAccordionItem.vue';
+import {onMounted, ref} from 'vue';
+import {CollapseStrategy} from './__types/Accordion.types';
+
+const props = withDefaults(defineProps<{
+  items: {
+    label?: string;
+    content?: string;
+    isOpen?: boolean;
+  }[];
+  collapseStrategy?: CollapseStrategy;
+}>(), {
+  collapseStrategy: CollapseStrategy.single
+});
+
+const openItems = ref<number[]>([]);
+
+onMounted(() => {
+  openItems.value = props.items
+    .map((item, index) => item.isOpen ? index : -1)
+    .filter((index) => index !== -1);
+})
+
+function onOpen(index: number) {
+  if (props.collapseStrategy === CollapseStrategy.single) {
+    openItems.value = [index];
+  } else {
+    openItems.value = [...openItems.value, index];
+  }
+}
+
+function onClose(index: number) {
+  if (props.collapseStrategy === CollapseStrategy.single) {
+    openItems.value = [];
+  } else {
+    openItems.value = openItems.value.filter((item) => item !== index);
+  }
+}
+</script>
+
+<template>
+  <div class="w-full h-full flex flex-col bg-neutral-300 gap-px">
+    <slot>
+      <AntAccordionItem
+        v-for="(item, index) in items"
+        :label="item.label"
+        :is-open="openItems.includes(index)"
+        :key="`accordion-item-${index}`"
+        @open="() => onOpen(index)"
+        @close="() => onClose(index)"
+      >
+        <slot name="item-content" v-bind="{item, index}">
+          <div v-html="item.content"/>
+        </slot>
+      </AntAccordionItem>
+    </slot>
+  </div>
+</template>

package/dist/runtime/components/AntAccordionItem.vue

@@ -0,0 +1,66 @@
+<script lang="ts" setup>
+import {faAngleDown, faAngleUp} from '@fortawesome/free-solid-svg-icons';
+import AntIcon from './AntIcon.vue';
+import AntTransitionCollapseHeight from './transitions/AntTransitionCollapseHeight.vue';
+
+const props = withDefaults(defineProps<{
+  isOpen: boolean;
+  label?: string;
+  collapseTransition?: string;
+}>(), {
+  collapseTransition: 'slide'
+});
+const emit = defineEmits(['close', 'open']);
+
+// TODO:: Stehengeblieben: delays machen
+function onClick() {
+  if (props.isOpen) {
+    emit('close');
+  } else {
+    emit('open');
+  }
+}
+</script>
+
+<template>
+  <div
+      class="p-2.5 select-none cursor-pointer transition-colors"
+      :class="{'bg-primary-500 text-primary-500-font': isOpen, 'bg-neutral-50 text-neutral-50-font': !isOpen}"
+      @click="onClick"
+  >
+    <slot name="label" v-bind="{ isOpen: isOpen }">
+      <div
+          class="hover:text-gray-800 flex justify-between items-center"
+      >
+        <span class="text-sm font-semibold">
+          {{ label }}
+        </span>
+
+        <AntIcon
+            :icon="isOpen ? faAngleUp : faAngleDown"
+            :color="isOpen ? 'text-primary-500-font' : undefined"
+        />
+      </div>
+    </slot>
+  </div>
+
+  <AntTransitionCollapseHeight>
+    <div
+        v-show="isOpen"
+        class="bg-white overflow-hidden -mt-px"
+    >
+      <transition name="bounce">
+        <div
+            v-show="isOpen"
+            class="p-2.5 bg-neutral-50"
+        >
+          <slot/>
+        </div>
+      </transition>
+    </div>
+  </AntTransitionCollapseHeight>
+</template>
+
+<style scoped>
+.bounce-enter-active{animation:bounce .6s}.bounce-leave-active{animation:bounce .6s reverse}@keyframes bounce{0%{opacity:0;transform:translateY(-100%)}50%{opacity:1;transform:translateY(5%)}to{opacity:1;transform:translateY(0)}}.slide-enter-active{animation:slide 1s}.slide-leave-active{animation:slide 1s reverse}@keyframes slide{0%{//transform:translateY(-100%);max-height:0;opacity:0}to{//transform:translateY(0);max-height:100%;opacity:1}}
+</style>

package/dist/runtime/components/AntAlert.vue

@@ -0,0 +1,137 @@
+<script lang="ts" setup>
+import {computed, onMounted, useSlots} from 'vue';
+import {handleEnumValidation} from '../handler';
+import {
+  faCheckCircle,
+  faCircleQuestion,
+  faExclamationCircle,
+  faExclamationTriangle,
+  faInfoCircle,
+  faXmark
+} from '@fortawesome/free-solid-svg-icons';
+import AntIcon from './AntIcon.vue';
+import AntTooltip from './AntTooltip.vue';
+import AntSkeleton from './AntSkeleton.vue';
+import {InputColorType, Position} from '../enums';
+import {IconSize} from './__types';
+
+defineEmits(['close']);
+
+const props = withDefaults(defineProps<{
+  title: string,
+  colorType?: InputColorType,
+  icon?: boolean,
+  expanded?: boolean,
+  questionMarkText?: string,
+  skeleton?: boolean,
+  dismissBtn?: boolean,
+}>(), {
+  colorType: InputColorType.base,
+  icon: true,
+  expanded: false,
+  skeleton: false,
+  dismissBtn: true,
+});
+
+const icons = {
+  [InputColorType.base]: faInfoCircle,
+  [InputColorType.info]: faInfoCircle,
+  [InputColorType.danger]: faExclamationCircle,
+  [InputColorType.warning]: faExclamationTriangle,
+  [InputColorType.success]: faCheckCircle,
+};
+
+const _icon = computed(() => icons[props.colorType]);
+const classes = computed(() => {
+  const variants: Record<InputColorType, string> = {
+    [InputColorType.danger]: 'bg-danger-100 text-danger-500',
+    [InputColorType.info]: 'bg-info-100 text-info-500',
+    [InputColorType.base]: 'bg-neutral-100 text-neutral-500',
+    [InputColorType.success]: 'bg-success-100 text-success-500',
+    [InputColorType.warning]: 'bg-warning-100 text-warning-500',
+  };
+
+  return {
+    'inline-flex flex-col gap-2.5 rounded-md p-2.5 transition-colors text-sm relative': true,
+    'w-full': props.expanded,
+    [variants[props.colorType]]: true,
+  };
+});
+const hasDefaultSlot = computed(() => useSlots()['default'] || false);
+const hasQuestionMark = computed(() => (useSlots()['question-mark-text'] || false) || props.questionMarkText);
+const iconColor = computed(() => {
+  const variants = {
+    [InputColorType.base]: 'text-neutral-100-font',
+    [InputColorType.danger]: 'text-danger-500',
+    [InputColorType.info]: 'text-info-500',
+    [InputColorType.success]: 'text-success-500',
+    [InputColorType.warning]: 'text-warning-500',
+  };
+
+  return variants[props.colorType];
+});
+
+onMounted(() => {
+  handleEnumValidation(props.colorType, InputColorType, 'colorType');
+});
+</script>
+
+<template>
+  <div
+    :class="classes"
+    data-e2e="alert"
+  >
+    <AntSkeleton v-if="skeleton" absolute rounded/>
+
+    <div
+      class="inline-flex items-center justify-between w-content gap-2.5"
+      :class="{'invisible': skeleton}"
+    >
+      <div class="inline-flex items-center gap-2.5">
+        <AntIcon
+          v-if="icon"
+          :icon="_icon"
+          :color="iconColor"
+          :size="IconSize.sm"
+        />
+
+        <div :class="{'font-semibold': hasDefaultSlot}">
+          <slot name="title">
+            {{ title }}
+          </slot>
+        </div>
+      </div>
+
+      <div class="flex gap-2.5">
+        <div v-if="hasQuestionMark">
+          <slot name="questionMarkText">
+            <AntTooltip :position="Position.bottom">
+              <AntIcon
+                :icon="faCircleQuestion"
+                :color="iconColor"
+                :size="IconSize.sm"
+              />
+
+              <template #content>
+                {{ questionMarkText }}
+              </template>
+            </AntTooltip>
+          </slot>
+        </div>
+
+        <AntIcon
+          v-if="dismissBtn"
+          :icon="faXmark"
+          class="cursor-pointer"
+          :color="iconColor"
+          :size="IconSize.sm"
+          @click="() => $emit('close')"
+        />
+      </div>
+    </div>
+
+    <div v-if="hasDefaultSlot">
+      <slot/>
+    </div>
+  </div>
+</template>

package/dist/runtime/components/AntDropdown.vue

@@ -0,0 +1,79 @@
+<script lang="ts" setup>
+/**
+ * TODO:: Emit if there's enough space for the dropdown content. If not, reposition it automatically like the
+ * browsers select dropdown content does.
+ * TODO:: Known issue: open dropdown, click between button and dropdown. Dropdown will not click.
+ * The v-on-click-outside does not trigger, because it think it's the dropdown itself.
+ * Solution is using margin only (calc(50% + 0.625rem)) and not padding.
+ */
+import {computed, onMounted} from 'vue';
+import {handleEnumValidation} from '../handler';
+import {Position} from '../enums';
+import {classesToObjectSyntax} from '../utils';
+import {vOnClickOutside} from '@vueuse/components';
+import {onKeyStroke} from '@vueuse/core';
+
+const props = withDefaults(defineProps<{
+  showDropdown: boolean,
+  position?: Position,
+  dropdownClasses?: string | Record<string, boolean>,
+  contentPadding?: boolean
+}>(), {
+  showDropdown: false,
+  contentPadding: true,
+  position: Position.bottom,
+  dropdownClasses: '',
+});
+const emit = defineEmits(['update:showDropdown']);
+
+const _dropdownClasses = computed(() => ({
+  'absolute min-w-[10rem]': true,
+  'bottom-0 left-0 mb-[50%] pb-2.5': props.position === Position.top,
+  'top-0 left-0 mt-[50%] pt-2.5': props.position === Position.bottom,
+  'right-0 top-0 mr-[100%] pr-2.5': props.position === Position.left,
+  'left-0 top-0 ml-[100%] pl-2.5': props.position === Position.right,
+  ...classesToObjectSyntax(props.dropdownClasses)
+}));
+
+onMounted(() => {
+  handleEnumValidation(props.position, Position, 'Position')
+});
+onKeyStroke('Escape', (e: KeyboardEvent) => {
+  if (props.showDropdown) {
+    e.preventDefault();
+    emit('update:showDropdown', false);
+  }
+});
+
+function onClickOutside() {
+  emit('update:showDropdown', false);
+}
+</script>
+
+<template>
+  <div
+    class="relative inline-flex justify-center items-end z-40"
+    data-e2e="dropdown"
+    v-on-click-outside="onClickOutside"
+  >
+    <slot/>
+
+    <transition name="bounce">
+      <div
+        v-if="showDropdown"
+        :class="_dropdownClasses"
+      >
+        <div
+          class="shadow-lg border border-neutral-300 rounded-md text-sm relative inline-flex flex-col relative bg-neutral-50 text-neutral-50-font w-full"
+          :class="{'p-2.5': contentPadding}"
+        >
+          <slot name="content"/>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<style scoped>
+.bounce-enter-active{animation:bounce-in .4s}.bounce-leave-active{animation:bounce-in .4s reverse}@keyframes bounce-in{0%{opacity:0;transform:scale(0)}50%{opacity:1;transform:scale(1.05)}to{opacity:1;transform:scale(1)}}
+</style>