@antify/ui-module 1.1.3

package/package.json

@@ -0,0 +1,81 @@
+{
+  "name": "@antify/ui-module",
+  "private": false,
+  "version": "1.1.3",
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./dist/module.mjs",
+      "require": "./dist/module.cjs",
+      "types": "./dist/types.d.ts"
+    }
+  },
+  "files": [
+    "dist",
+    "src/runtime/components/**/*.vue"
+  ],
+  "main": "./dist/module.cjs",
+  "types": "./dist/types.d.ts",
+  "dependencies": {
+    "@antify/validate": "1.14.0",
+    "@fortawesome/free-regular-svg-icons": "^6.5.1",
+    "@fortawesome/free-solid-svg-icons": "^6.5.1",
+    "@fortawesome/vue-fontawesome": "^3.0.5",
+    "@nuxt/kit": "^3.9.3",
+    "@tailwindcss/forms": "^0.5.7",
+    "@tiptap/extension-heading": "^2.1.16",
+    "@tiptap/extension-underline": "^2.1.16",
+    "@tiptap/pm": "^2.1.16",
+    "@tiptap/starter-kit": "^2.1.16",
+    "@tiptap/vue-3": "^2.1.16",
+    "@vuepic/vue-datepicker": "^6.1.0",
+    "@vueuse/components": "^10.7.2",
+    "@vueuse/core": "^10.7.2",
+    "@vueuse/router": "^10.7.2",
+    "autoprefixer": "^10.4.17",
+    "postcss": "^8.4.33",
+    "tailwindcss": "^3.4.1",
+    "vue": "^3.4.15",
+    "vue-router": "^4.2.5"
+  },
+  "devDependencies": {
+    "@faker-js/faker": "^8.3.1",
+    "@nuxt/eslint-config": "^0.2.0",
+    "@nuxt/module-builder": "^0.5.5",
+    "@storybook/addon-docs": "^7.6.10",
+    "@storybook/addon-essentials": "^7.6.10",
+    "@storybook/addon-interactions": "^7.6.10",
+    "@storybook/addon-links": "^7.6.10",
+    "@storybook/blocks": "^7.6.10",
+    "@storybook/test": "^7.6.10",
+    "@storybook/vue3": "^7.6.10",
+    "@storybook/vue3-vite": "^7.6.10",
+    "@typescript-eslint/eslint-plugin": "^6.19.1",
+    "@typescript-eslint/parser": "^6.19.1",
+    "autoprefixer": "^10.4.16",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-storybook": "^0.6.15",
+    "eslint-plugin-vue": "^9.20.1",
+    "nuxt": "^3.9.3",
+    "ofetch": "^1.3.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "standard-version": "latest",
+    "storybook": "7.5.3",
+    "typescript": "^5.3.3",
+    "unbuild": "^2.0.0",
+    "vue-cli-plugin-tailwind": "3.0.0"
+  },
+  "scripts": {
+    "build": "nuxt-module-build",
+    "dev": "nuxi dev playground",
+    "dev:build": "nuxi build playground",
+    "dev:prepare": "nuxt-module-build build && nuxi prepare playground",
+    "storybook": "storybook dev -p 6006 --no-open",
+    "build-storybook": "storybook build",
+    "release": "standard-version && git push --follow-tags && pnpm publish --access public",
+    "release-minor": "standard-version -- --release-as minor && git push --follow-tags && pnpm publish"
+  }
+}

package/src/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/src/runtime/components/AntAccordionItem.vue

@@ -0,0 +1,104 @@
+<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% {
+    transform: translateY(-100%);
+    opacity: 0;
+  }
+  50% {
+    transform: translateY(5%);
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(0%);
+    opacity: 1;
+  }
+}
+
+.slide-enter-active {
+  animation: slide 1s;
+}
+
+.slide-leave-active {
+  animation: slide 1s reverse;
+}
+
+@keyframes slide {
+  0% {
+  //transform: translateY(-100%); max-height: 0; opacity: 0;
+  }
+  100% {
+  //transform: translateY(0%); max-height: 100%; opacity: 1;
+  }
+}
+</style>

package/src/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/src/runtime/components/AntDropdown.vue

@@ -0,0 +1,100 @@
+<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% {
+    transform: scale(0);
+    opacity: 0;
+  }
+  50% {
+    transform: scale(1.05);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+</style>

package/src/runtime/components/AntIcon.vue

@@ -0,0 +1,51 @@
+<script lang="ts" setup>
+import {computed, onMounted} from 'vue';
+import {handleEnumValidation} from '../handler';
+import {type IconDefinition} from '@fortawesome/free-solid-svg-icons';
+import {IconSize} from './__types/AntIcon.types';
+
+const props = withDefaults(defineProps<{
+  icon: IconDefinition;
+  size?: IconSize;
+
+  /**
+   * A css text-* class
+   */
+  color?: string;
+}>(), {
+  size: IconSize.md,
+  color: 'text-for-white-bg-font'
+});
+
+const containerClasses = computed(() => ({
+  'inline-flex items-center justify-center': true,
+  'w-4 h-4': props.size === IconSize.sm,
+  'w-5 h-5': props.size === IconSize.md,
+  'w-9 h-9': props.size === IconSize.xl3,
+  [props.color]: true,
+}));
+
+// TODO:: replace with/height with font-size
+const iconClasses = computed(() => ({
+  'transition-colors': true,
+  'h-3 w-3': props.size === IconSize.sm,
+  'h-4 w-4': props.size === IconSize.md,
+  'text-3xl': props.size === IconSize.xl3,
+}));
+
+onMounted(() => {
+  handleEnumValidation(props.size, IconSize, 'size');
+});
+</script>
+
+<template>
+  <span
+      v-if="icon"
+      :class="containerClasses"
+  >
+    <fa-icon
+        :icon="icon"
+        :class="iconClasses"
+    />
+  </span>
+</template>

package/src/runtime/components/AntKeycap.vue

@@ -0,0 +1,24 @@
+<script lang="ts" setup>
+// TODO:: Fix typo KeyCap with upperchar C
+import AntIcon from './AntIcon.vue';
+import {type IconDefinition} from '@fortawesome/free-solid-svg-icons';
+import {IconSize} from './__types';
+
+defineProps<{
+  icon?: IconDefinition
+}>();
+</script>
+
+<template>
+  <span
+    class="inline-block py-0.5 px-1.5 bg-neutral-300 rounded-md text-sm min-w-[1.5rem] text-center text-neutral-500-font font-medium"
+  >
+    <AntIcon
+      v-if="icon"
+      :icon="icon"
+      :size="IconSize.sm"
+    />
+
+    <slot v-else/>
+  </span>
+</template>

package/src/runtime/components/AntListGroup.vue

@@ -0,0 +1,24 @@
+<script lang="ts" setup>
+import AntSkeleton from './AntSkeleton.vue';
+
+withDefaults(
+    defineProps<{
+      skeleton?: boolean
+    }>(), {
+      skeleton: false
+    }
+)
+</script>
+
+<template>
+  <div class="relative">
+    <AntSkeleton v-if="skeleton" absolute rounded/>
+
+    <div
+        class="flex flex-col rounded-md bg-neutral-300 gap-px relative border border-neutral-300 overflow-hidden"
+        :class="{'invisible': skeleton}"
+    >
+      <slot/>
+    </div>
+  </div>
+</template>

package/src/runtime/components/AntListGroupItem.vue

@@ -0,0 +1,81 @@
+<script lang="ts" setup>
+import {computed, onMounted} from 'vue';
+import {type IconDefinition} from '@fortawesome/free-solid-svg-icons';
+import {ListGroupItemColorType} from '../types/AntListGroupItem.type';
+import {handleEnumValidation} from '../handler';
+import {type RouteLocationRaw} from 'vue-router';
+import AntIcon from './AntIcon.vue';
+
+const props = withDefaults(defineProps<{
+  to?: RouteLocationRaw | string;
+  colorType?: ListGroupItemColorType;
+  iconLeft?: IconDefinition;
+  iconRight?: IconDefinition;
+}>(), {
+  colorType: ListGroupItemColorType.neutral50,
+});
+
+const classes = computed(() => {
+  const variants: Record<ListGroupItemColorType, string> = {
+    [ListGroupItemColorType.danger]: 'bg-danger-500 text-danger-500-font',
+    [ListGroupItemColorType.info]: 'bg-info-500 text-info-500-font',
+    [ListGroupItemColorType.neutral700]: 'bg-neutral-700 text-neutral-700-font',
+    [ListGroupItemColorType.neutral300]: 'bg-neutral-300 text-neutral-300-font',
+    [ListGroupItemColorType.neutral50]: 'bg-neutral-50 text-neutral-50-font',
+    [ListGroupItemColorType.primary]: 'bg-primary-500 text-primary-500-font',
+    [ListGroupItemColorType.secondary]: 'bg-secondary-500 text-secondary-500-font',
+    [ListGroupItemColorType.success]: 'bg-success-500 text-success-500-font',
+    [ListGroupItemColorType.warning]: 'bg-warning-500 text-warning-500-font',
+  };
+
+  return {
+    'text-sm transition-colors inline-block w-full': true,
+    [variants[props.colorType]]: true,
+  };
+});
+const contentWrapperClasses = computed(() => {
+  const variants: Record<ListGroupItemColorType, string> = {
+   [ListGroupItemColorType.danger]: 'text-danger-500-font',
+   [ListGroupItemColorType.info]: 'text-info-500-font',
+   [ListGroupItemColorType.neutral700]: 'text-neutral-700-font',
+   [ListGroupItemColorType.neutral300]: 'text-neutral-300-font',
+   [ListGroupItemColorType.neutral50]: 'text-neutral-50-font',
+   [ListGroupItemColorType.primary]: 'text-primary-500-font',
+   [ListGroupItemColorType.secondary]: 'text-secondary-500-font',
+   [ListGroupItemColorType.success]: 'text-success-500-font',
+   [ListGroupItemColorType.warning]: 'text-warning-500-font',
+  };
+
+  return {
+    'w-full p-2.5 flex gap-2.5 items-center justify-between': true,
+    'hover:bg-neutral-950/25 cursor-pointer transition-colors': props.to !== undefined,
+    [variants[props.colorType]]: props.to !== undefined
+  };
+});
+
+onMounted(() => {
+  handleEnumValidation(props.colorType, ListGroupItemColorType, 'colorType');
+});
+</script>
+
+<template>
+  <component
+      :is="to !== undefined ? 'router-link' : 'div'"
+      :to="to"
+      :class="classes"
+  >
+    <div :class="contentWrapperClasses">
+      <div class="flex items-center gap-2.5">
+        <slot v-if="iconLeft" name="icon-left">
+          <AntIcon :icon="iconLeft"/>
+        </slot>
+
+        <slot/>
+      </div>
+
+      <slot v-if="iconRight" name="icon-right">
+        <AntIcon :icon="iconRight"/>
+      </slot>
+    </div>
+  </component>
+</template>