@antify/ui-module 1.7.3 → 1.8.2

package/dist/runtime/utils.mjs

@@ -1,41 +0,0 @@
-import { Fragment } from "vue";
-export function classesToObjectSyntax(classes) {
-  if (typeof classes === "object") {
-    return classes;
-  }
-  if (classes === void 0) {
-    return {};
-  }
-  return {
-    [classes]: true
-  };
-}
-export function enumToPlainText(value, className) {
-  let text = `enum ${className} {
-`;
-  Object.keys(value).forEach((key) => {
-    text += `    ${key} = '${value[key]}',
-`;
-  });
-  return text + "}";
-}
-export function hasSlotContent(slot) {
-  if (!slot) {
-    return false;
-  }
-  const isVnodeEmpty = (vnodes) => {
-    return vnodes.every((node) => {
-      if (node.type === Comment) {
-        return true;
-      }
-      if (node.type === Text && typeof node.children === "string" && !node.children.trim()) {
-        return true;
-      }
-      if (node.type === Fragment && isVnodeEmpty(node.children)) {
-        return true;
-      }
-      return false;
-    });
-  };
-  return !isVnodeEmpty(slot());
-}

package/src/runtime/components/AntAccordion.vue

@@ -1,64 +0,0 @@
-<script lang="ts" setup>
-import AntAccordionItem from './AntAccordionItem.vue';
-import {onMounted, ref} from 'vue';
-import {CollapseStrategy} from './__types/AntAccordion.types';
-
-const props = withDefaults(defineProps<{
-  items: {
-    label?: string;
-    content?: string;
-    isOpen?: boolean;
-    iconLeft?: 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"
-        :key="`accordion-item-${index}`"
-        :label="item.label"
-        :is-open="openItems.includes(index)"
-        :icon-left="item.iconLeft"
-        @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

@@ -1,119 +0,0 @@
-<script lang="ts" setup>
-import {faAngleDown, faAngleUp, faQuestionCircle} from '@fortawesome/free-solid-svg-icons';
-import AntIcon from './AntIcon.vue';
-import AntTransitionCollapseHeight from './transitions/AntTransitionCollapseHeight.vue';
-import {IconSize} from './__types/AntIcon.types';
-
-const props = withDefaults(defineProps<{
-  isOpen: boolean;
-  label?: string;
-  collapseTransition?: string;
-  iconLeft: boolean;
-}>(), {
-  collapseTransition: 'slide',
-  iconLeft: false,
-});
-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 select-none cursor-pointer transition-colors"
-    :class="{'bg-primary-500 text-primary-500-font': isOpen, 'bg-white text-for-white-bg-font': !isOpen}"
-    @click="onClick"
-  >
-    <slot
-      name="label"
-      v-bind="{ isOpen: isOpen }"
-    >
-      <div
-        class="hover:text-gray-800 flex justify-between items-center"
-      >
-        <div class="flex items-center gap-2">
-          <AntIcon
-            v-if="iconLeft"
-            :size="IconSize.sm"
-            :icon="faQuestionCircle"
-            :color="isOpen ? 'text-primary-500-font' : 'text-for-white-bg-font'"
-          />
-
-          <span class="text-sm font-semibold">
-            {{ label }}
-          </span>
-        </div>
-
-        <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 text-sm bg-white text-for-white-bg-font"
-        >
-          <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

@@ -1,146 +0,0 @@
-<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 {InputState, Position} from '../enums';
-import {IconSize} from './__types';
-
-defineEmits(['close']);
-
-const props = withDefaults(defineProps<{
-  title?: string | null,
-  state?: InputState,
-  icon?: boolean,
-  expanded?: boolean,
-  questionMarkText?: string | null,
-  skeleton?: boolean,
-  dismissBtn?: boolean,
-}>(), {
-	title: null,
-  state: InputState.base,
-  icon: true,
-  expanded: false,
-	questionMarkText: null,
-  skeleton: false,
-  dismissBtn: true,
-});
-
-const icons = {
-  [InputState.base]: faInfoCircle,
-  [InputState.info]: faInfoCircle,
-  [InputState.danger]: faExclamationCircle,
-  [InputState.warning]: faExclamationTriangle,
-  [InputState.success]: faCheckCircle,
-};
-
-const _icon = computed(() => icons[props.state]);
-const classes = computed(() => {
-  const variants: Record<InputState, string> = {
-    [InputState.danger]: 'bg-danger-100 text-danger-700',
-    [InputState.info]: 'bg-info-100 text-info-700',
-    [InputState.base]: 'bg-neutral-100 text-neutral-100-font',
-    [InputState.success]: 'bg-success-100 text-success-700',
-    [InputState.warning]: 'bg-warning-100 text-warning-700',
-  };
-
-  return {
-    'inline-flex flex-col gap-2 rounded-md p-2 transition-colors text-sm relative': true,
-    'w-full': props.expanded,
-    [variants[props.state]]: true,
-  };
-});
-const hasDefaultSlot = computed(() => useSlots()['default'] || false);
-const hasQuestionMark = computed(() => (useSlots()['question-mark-text'] || false) || props.questionMarkText);
-const iconColor = computed(() => {
-  const variants = {
-    [InputState.base]: 'text-neutral-100-font',
-    [InputState.danger]: 'text-danger-700',
-    [InputState.info]: 'text-info-700',
-    [InputState.success]: 'text-success-700',
-    [InputState.warning]: 'text-warning-700',
-  };
-
-  return variants[props.state];
-});
-
-onMounted(() => {
-  handleEnumValidation(props.state, InputState, 'state');
-});
-</script>
-
-<template>
-  <div
-    :class="classes"
-    data-e2e="alert"
-  >
-    <AntSkeleton
-      v-if="skeleton"
-      absolute
-      rounded
-    />
-
-    <div
-      v-if="icon || hasQuestionMark || dismissBtn || title"
-      class="inline-flex items-center justify-between w-content gap-2"
-      :class="{'invisible': skeleton}"
-    >
-      <div class="inline-flex items-center gap-2">
-        <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">
-        <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/AntCard.vue

@@ -1,34 +0,0 @@
-<script setup lang="ts">
-import {computed} from 'vue';
-import {Size} from '../enums/Size.enum';
-
-const props = withDefaults(defineProps<{
-  size?: Size;
-  padding?: boolean;
-  expanded?: boolean;
-}>(), {
-  size: Size.md,
-  padding: true,
-  expanded: false
-});
-
-const cardClass = computed(() => ({
-    'inline-block': true,
-    'w-full': props.expanded,
-    'p-0': !props.padding,
-    'p-2.5': props.size === Size.lg && props.padding,
-    'p-2': props.size === Size.md && props.padding,
-    'p-1.5': props.size === Size.sm || props.size === Size.xs && props.padding,
-    'p-1': props.size === Size.xs2 && props.padding,
-  })
-);
-</script>
-
-<template>
-  <div
-    :class="cardClass"
-    class="bg-white border border-neutral-300 rounded-md"
-  >
-    <slot />
-  </div>
-</template>

package/src/runtime/components/AntContent.vue

@@ -1,16 +0,0 @@
-<script setup lang="ts">
-withDefaults(defineProps<{
-	padding?: boolean
-}>(), {
-	padding: true
-})
-</script>
-
-<template>
-  <div
-    :class="{ 'p-2.5': padding }"
-    class="bg-white overflow-auto"
-  >
-    <slot />
-  </div>
-</template>

package/src/runtime/components/AntDropdown.vue

@@ -1,100 +0,0 @@
-<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
-    v-on-click-outside="onClickOutside"
-    class="relative inline-flex justify-center items-end z-40"
-    data-e2e="dropdown"
-  >
-    <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-white text-for-white-bg-font w-full"
-          :class="{'p-2': 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

@@ -1,56 +0,0 @@
-<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.sm,
-  color: 'text-for-white-bg-font'
-});
-
-const containerClasses = computed(() => ({
-	'inline-flex items-center justify-center': true,
-	'w-3 h-3': props.size === IconSize.xs2,
-	'w-4 h-4': props.size === IconSize.xs,
-	'w-5 h-5': props.size === IconSize.sm,
-	'w-6 h-6': props.size === IconSize.md,
-	'w-7 h-7': props.size === IconSize.lg,
-	'w-9 h-9': props.size === IconSize.xl3,
-	[props.color]: true,
-}));
-
-const iconClasses = computed(() => ({
-	'transition-colors': true,
-	'text-2xs': props.size === IconSize.xs2,
-	'text-xs': props.size === IconSize.xs,
-	'text-sm': props.size === IconSize.sm,
-	'text-md': props.size === IconSize.md,
-	'text-lg': props.size === IconSize.lg,
-	'text-3xl': props.size === IconSize.xl3,
-}));
-
-onMounted(() => {
-  handleEnumValidation(props.size, IconSize, 'size');
-});
-</script>
-
-<template>
-  <span
-    v-if="icon"
-    :class="containerClasses"
-  >
-    <FaIcon
-      :icon="icon"
-      :class="iconClasses"
-    />
-  </span>
-</template>

package/src/runtime/components/AntKeycap.vue

@@ -1,45 +0,0 @@
-<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';
-import {AntKeycapSize} from './__types/AntKeycap.types';
-import {computed} from 'vue';
-
-const props = withDefaults(defineProps<{
-  icon?: IconDefinition
-  size: AntKeycapSize
-
-}>(),{
-  size: AntKeycapSize.sm
-});
-
-const classes = computed(() => {
-  return {
-    'text-sm px-px min-w-5': props.size === AntKeycapSize.sm,
-    'text-2xs px-px py-0.5 min-w-[18px]': props.size === AntKeycapSize.xs,
-  };
-});
-const iconClasses = computed(() => {
-  if(props.size === AntKeycapSize.sm) {
-    return IconSize.sm;
-  } else {
-    return IconSize.xs2;
-  }
-});
-</script>
-
-<template>
-  <span
-    class="inline-block bg-neutral-300 rounded-md text-center text-neutral-500-font font-medium"
-    :class="classes"
-  >
-    <AntIcon
-      v-if="icon"
-      :icon="icon"
-      :size="iconClasses"
-    />
-
-    <slot v-else />
-  </span>
-</template>

package/src/runtime/components/AntListGroup.vue

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