@antify/ui-module 1.7.3 → 1.8.2

package/dist/runtime/components/AntSkeleton.vue

@@ -1,38 +0,0 @@
-<script lang="ts" setup>
-import {Grouped} from '../enums/Grouped.enum';
-import {computed} from 'vue';
-
-const props = withDefaults(defineProps<{
-  grouped?: Grouped;
-  rounded?: boolean;
-  roundedFull?: boolean;
-  absolute?: boolean;
-  minShowTime?: number;
-}>(), {
-  grouped: Grouped.none,
-  rounded: false,
-  roundedFull: false,
-  absolute: false,
-  minShowTime: 5000
-});
-
-const groupedClassList = computed(() => ({
-  'rounded-tl-md rounded-bl-md rounded-tr-none rounded-br-none': props.grouped === Grouped.left,
-  'rounded-none': props.grouped === Grouped.center,
-  'rounded-tl-none rounded-bl-none rounded-tr-md rounded-br-md': props.grouped === Grouped.right,
-}));
-const classList = computed(() => ({
-  'animate-skeleton min-h-[1px] min-w-[1px] inline-block': true,
-  'absolute inset-0 w-full h-full z-40': props.absolute,
-  'rounded-md': props.rounded && props.grouped === Grouped.none,
-  'rounded-xl': props.roundedFull && props.grouped === Grouped.none,
-  ...groupedClassList.value
-}));
-</script>
-
-<template>
-  <div
-    :class="classList"
-    data-e2e="skeleton"
-  />
-</template>

package/dist/runtime/components/AntSpinner.vue

@@ -1,101 +0,0 @@
-<script lang="ts" setup>
-import {computed, onMounted} from 'vue';
-import {AntSpinnerSize} from './__types/AntSpinner.types';
-import {handleEnumValidation} from '../handler';
-import {State} from '../enums/State.enum';
-
-const props = withDefaults(defineProps<{
-  state?: State,
-  size?: AntSpinnerSize;
-  inverted?: boolean;
-}>(), {
-  size: AntSpinnerSize.md,
-  state: State.base,
-  inverted: false
-});
-
-const classes = computed(() => ({
-  'animate-spin': true,
-  'w-3 h-3': props.size === AntSpinnerSize.xs2,
-  'w-4 h-4': props.size === AntSpinnerSize.xs,
-  'w-5 h-5': props.size === AntSpinnerSize.sm,
-  'w-6 h-6': props.size === AntSpinnerSize.md,
-  'w-7 h-7': props.size === AntSpinnerSize.lg,
-  'w-8 h-8': props.size === AntSpinnerSize.xl2,
-  'w-9 h-9': props.size === AntSpinnerSize.xl3,
-  'w-10 h-10': props.size === AntSpinnerSize.xl4,
-}));
-onMounted(() => {
-  handleEnumValidation(props.size, AntSpinnerSize, 'size');
-  handleEnumValidation(props.state, State, 'state');
-});
-const circleClass = computed(() => {
-  const invertedVariants: Record<State, string> = {
-    [State.base]: 'fill-neutral-500',
-    [State.primary]: 'fill-primary-700',
-    [State.secondary]: 'fill-secondary-700',
-    [State.danger]: 'fill-danger-700',
-    [State.info]: 'fill-info-700',
-    [State.success]: 'fill-success-700',
-    [State.warning]: 'fill-warning-700',
-  };
-  const notInvertedVariants: Record<State, string> = {
-    [State.base]: 'fill-neutral-100',
-    [State.primary]: 'fill-primary-100',
-    [State.secondary]: 'fill-secondary-100',
-    [State.danger]: 'fill-danger-100',
-    [State.info]: 'fill-info-100',
-    [State.success]: 'fill-success-100',
-    [State.warning]: 'fill-warning-100',
-  };
-
-  return {
-    [invertedVariants[props.state]]: props.inverted,
-    [notInvertedVariants[props.state]]: !props.inverted,
-  };
-});
-const spinningElementClass = computed(() => {
-  const invertedVariants: Record<State, string> = {
-    [State.base]: 'fill-neutral-100',
-    [State.primary]: 'fill-primary-100',
-    [State.secondary]: 'fill-secondary-100',
-    [State.danger]: 'fill-danger-100',
-    [State.info]: 'fill-info-100',
-    [State.success]: 'fill-success-100',
-    [State.warning]: 'fill-warning-100',
-  };
-  const notInvertedVariants: Record<State, string> = {
-    [State.base]: 'fill-neutral-500',
-    [State.primary]: 'fill-primary-500',
-    [State.secondary]: 'fill-secondary-500',
-    [State.danger]: 'fill-danger-500',
-    [State.info]: 'fill-info-500',
-    [State.success]: 'fill-success-500',
-    [State.warning]: 'fill-warning-500',
-  };
-
-  return {
-    [invertedVariants[props.state]]: props.inverted,
-    [notInvertedVariants[props.state]]: !props.inverted,
-  };
-});
-</script>
-
-<template>
-  <svg
-    :class="classes"
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    data-e2e="spinner"
-  >
-    <path
-      :class="circleClass"
-      d="M8 16C12.4183 16 16 12.4183 16 8H14C14 11.5346 11.5346 14 8 14C4.46538 14 2 11.5346 2 8C2 4.46538 4.46538 2 8 2V0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16Z"
-    />
-    <path
-      :class="spinningElementClass"
-      d="M16 8C16 6.94942 15.7931 5.90914 15.391 4.93853C14.989 3.96793 14.3997 3.08601 13.6569 2.34315C12.914 1.60028 12.0321 1.011 11.0615 0.608963C10.0909 0.206926 9.05057 -1.7116e-07 8 0L8 2C8.78793 2 9.56815 2.15519 10.2961 2.45672C11.0241 2.75825 11.6855 3.20021 12.2426 3.75736C12.7998 4.31451 13.2417 4.97595 13.5433 5.7039C13.8448 6.43185 14 7.21207 14 8H16Z"
-    />
-  </svg>
-</template>

package/dist/runtime/components/AntTag.vue

@@ -1,114 +0,0 @@
-<script lang="ts" setup>
-import {computed, onMounted} from 'vue';
-import {handleEnumValidation} from '../handler';
-import {faCircleXmark, type IconDefinition} from '@fortawesome/free-solid-svg-icons';
-import {AntTagSize, TagState} from './__types/AntTag.types';
-import AntIcon from './AntIcon.vue';
-import {IconSize} from './__types/AntIcon.types';
-
-defineEmits(['close']);
-const props = withDefaults(defineProps<{
-  state?: TagState,
-  size?: AntTagSize;
-  iconLeft?: IconDefinition;
-  dismiss?: boolean
-}>(), {
-  size: AntTagSize.md,
-  state: TagState.base,
-  dismiss: false
-});
-
-const classes = computed(() => {
-  const variants: Record<TagState, string> = {
-    [TagState.danger]: 'bg-danger-500 text-danger-500-font',
-    [TagState.info]: 'bg-info-500 text-info-500-font',
-    [TagState.primary]: 'bg-primary-500 text-primary-500-font',
-    [TagState.secondary]: 'bg-secondary-500 text-secondary-500-font',
-    [TagState.base]: 'bg-neutral-300 text-neutral-300-font',
-    [TagState.success]: 'bg-success-500 text-success-500-font',
-    [TagState.warning]: 'bg-warning-500 text-warning-500-font',
-  };
-  return {
-    'rounded-md inline-flex items-center': true,
-    'px-1 py-0.5 text-xs gap-0.5': props.size === AntTagSize.xs3,
-    'px-1.5 py-1 text-xs gap-1': props.size === AntTagSize.xs2,
-    'px-2 py-1.5 text-xs gap-1.5': props.size === AntTagSize.xs,
-    'px-2 py-1.5 text-sm gap-1.5': props.size === AntTagSize.sm,
-    'px-2.5 py-2 text-sm gap-2': props.size === AntTagSize.md,
-    'px-3 py-2.5 text-sm gap-2.5': props.size === AntTagSize.lg,
-    [variants[props.state]]: true,
-  };
-});
-const getIconSize = computed(() => {
-  if (props.size === AntTagSize.xs || props.size === AntTagSize.xs2 || props.size === AntTagSize.xs3) {
-    return IconSize.xs;
-  } else {
-    return IconSize.sm;
-  }
-});
-const iconState = computed(() => {
-  switch (props.state) {
-    case TagState.info:
-      return 'text-info-500-font';
-    case TagState.success:
-      return 'text-success-500-font';
-    case TagState.warning:
-      return 'text-warning-500-font';
-    case TagState.danger:
-      return 'text-danger-500-font';
-    case TagState.primary:
-      return 'text-primary-500-font';
-    case TagState.secondary:
-      return 'text-secondary-500-font';
-    default:
-      return 'text-neutral-300-font';
-  }
-});
-const iconWrapperClass = computed(() => {
-  return {
-    'w-4 h-4': props.size === AntTagSize.xs2 || props.size === AntTagSize.xs,
-    'w-5 h-5': props.size === AntTagSize.sm || props.size === AntTagSize.md || props.size === AntTagSize.lg
-  };
-});
-
-onMounted(() => {
-  handleEnumValidation(props.size, AntTagSize, 'size');
-  handleEnumValidation(props.state, TagState, 'state');
-});
-</script>
-
-<template>
-  <span
-    :class="classes"
-    data-e2e="tag"
-  >
-    <span
-      v-if="iconLeft"
-      class="inline-flex items-center justify-center"
-      :class="iconWrapperClass"
-    >
-      <AntIcon
-        :icon="iconLeft"
-        :size="getIconSize"
-        :color="iconState"
-      >
-      </anticon>
-    </span>
-
-    <slot />
-
-    <span
-      v-if="dismiss"
-      class="inline-flex items-center justify-center"
-      :class="iconWrapperClass"
-    >
-      <AntIcon
-        :icon="faCircleXmark"
-        :size="getIconSize"
-        :color="iconState"
-        class="cursor-pointer"
-        @click="() => $emit('close')"
-      />
-    </span>
-  </span>
-</template>

package/dist/runtime/components/AntToast.vue

@@ -1,119 +0,0 @@
-<script lang="ts" setup>
-import {computed, onMounted, useSlots} from 'vue';
-import {handleEnumValidation} from '../handler';
-import {
-  faCheckCircle,
-  faExclamationCircle,
-  faExclamationTriangle,
-  faInfoCircle,
-  faXmark
-} from '@fortawesome/free-solid-svg-icons';
-import AntIcon from './AntIcon.vue';
-import AntButton from './buttons/AntButton.vue';
-import {State, InputState, Size} from '../enums';
-import {IconSize} from './__types/AntIcon.types';
-
-const props = withDefaults(defineProps<{
-  title?: string,
-  state?: InputState,
-  showUndo?: boolean,
-  icon?: boolean
-}>(), {
-  state: InputState.base,
-  showUndo: false,
-  icon: 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.base]: 'bg-neutral-100 border-neutral-500 text-neutral-500',
-    [InputState.danger]: 'bg-danger-100 border-danger-500 text-danger-500',
-    [InputState.info]: 'bg-info-100 border-info-500 text-info-500',
-    [InputState.success]: 'bg-success-100 border-success-500 text-success-500',
-    [InputState.warning]: 'bg-warning-100 border-warning-500 text-warning-500',
-  };
-
-  return {
-    'inline-flex flex-col gap-2 rounded-md p-2 border transition-colors shadow-md': true,
-    [variants[props.state]]: true,
-  };
-});
-const hasDefaultSlot = computed(() => useSlots()['default'] || false);
-const iconColor = computed(() => {
-  const variants = {
-    [InputState.base]: 'text-neutral-100-font',
-    [InputState.danger]: 'text-danger-500',
-    [InputState.info]: 'text-info-500',
-    [InputState.success]: 'text-success-500',
-    [InputState.warning]: 'text-warning-500',
-  };
-
-  return variants[props.state];
-});
-
-onMounted(() => {
-  handleEnumValidation(props.state, InputState, 'state');
-});
-</script>
-
-<template>
-  <div
-    :class="classes"
-    data-e2e="toast"
-    :data-e2e-state="props.state"
-  >
-    <div class="inline-flex items-center justify-between w-content gap-2">
-      <div class="inline-flex items-center gap-2">
-        <AntIcon
-          v-if="icon"
-          :icon="_icon"
-          :color="iconColor"
-          :size="IconSize.sm"
-        />
-
-        <div
-          class="whitespace-pre text-sm"
-          :class="{'font-semibold': hasDefaultSlot}"
-        >
-          <slot name="title">
-            {{ title }}
-          </slot>
-        </div>
-      </div>
-
-      <AntIcon
-        :icon="faXmark"
-        class="cursor-pointer"
-        :color="iconColor"
-        @click="() => $emit('close')"
-      />
-    </div>
-
-    <div v-if="hasDefaultSlot">
-      <slot />
-    </div>
-
-    <div
-      v-if="showUndo"
-      class="flex justify-end"
-    >
-      <AntButton
-        :state="props.state as unknown as State"
-        :size="Size.md"
-        filled
-        @click="() => $emit('undo')"
-      >
-        undo
-      </AntButton>
-    </div>
-  </div>
-</template>

package/dist/runtime/components/AntToaster.vue

@@ -1,51 +0,0 @@
-<script lang="ts" setup>
-/**
- * To let the toaster show toasts, use the plugin "$uiModule.toaster" property.
- */
-import {computed} from 'vue';
-import AntToast from './AntToast.vue';
-import {CornerPosition} from '../enums/Position.enum';
-
-const props = withDefaults(defineProps<{
-  position?: CornerPosition;
-}>(), {
-  position: CornerPosition.bottomLeft
-});
-
-const classes = computed(() => ({
-  'left-0 top-0 items-start': props.position === CornerPosition.topLeft,
-  'right-0 top-0 items-end': props.position === CornerPosition.topRight,
-  'left-0 bottom-0 items-start': props.position === CornerPosition.bottomLeft,
-  'right-0 bottom-0 items-end': props.position === CornerPosition.bottomRight,
-}));
-</script>
-
-<template>
-  <div
-    class="absolute flex flex-col space-y-2.5 p-2.5"
-    :class="classes"
-    data-e2e="toaster"
-  >
-    <TransitionGroup name="list">
-      <AntToast
-        v-for="toast of $uiModule.toaster.getToasts()"
-        :key="`ant-toast-${toast.id}`"
-        :title="toast.title"
-        :state="toast.type"
-        :icon="toast.hasIcon"
-        @close="$uiModule.toaster.removeToast(toast)"
-      >
-        <template
-          v-if="toast.content"
-          #default
-        >
-          {{ toast.content }}
-        </template>
-      </AntToast>
-    </TransitionGroup>
-  </div>
-</template>
-
-<style>
-.list-move{transition:all .5s ease}.list-enter-active{animation:fade-in .6s}.list-leave-active{animation:fade-in .4s reverse}@keyframes fade-in{0%{opacity:0}to{opacity:1}}
-</style>

package/dist/runtime/components/AntTooltip.vue

@@ -1,189 +0,0 @@
-<script lang="ts" setup>
-import {computed, onMounted, ref, getCurrentInstance} from 'vue';
-import {handleEnumValidation} from '../handler';
-import {InputState, Position} from '../enums';
-import {classesToObjectSyntax} from '../utils';
-import {hasSlotContent} from '../utils';
-
-const props = withDefaults(defineProps<{
-  position?: Position
-  tooltipClasses?: string | Record<string, boolean>
-  state?: InputState
-  expanded?: boolean
-  delay?: number
-}>(), {
-  position: Position.left,
-  tooltipClasses: '',
-  state: InputState.base,
-  expanded: false,
-  delay: 800
-});
-const visible = ref(false);
-const _tooltipClasses = computed(() => ({
-  'absolute w-max inline-flex': true,
-  // Position
-  'bottom-full pb-3.5': props.position === Position.top,
-  'top-full pt-3.5': props.position === Position.bottom,
-  'right-full pr-3.5': props.position === Position.left,
-  'left-full pl-3.5': props.position === Position.right,
-  ...classesToObjectSyntax(props.tooltipClasses)
-}));
-const classes = computed(() => ({
-  'z-10 absolute flex': true,
-  'top-0 left-0 right-0 -m-[2px] justify-center': props.position === Position.bottom,
-  'bottom-0 left-0 right-0 -m-[2px] justify-center': props.position === Position.top,
-  'top-0 left-0 bottom-0 -ml-[2.2px] items-center': props.position === Position.right,
-  'top-0 right-0 bottom-0 -mr-[2.2px] items-center': props.position === Position.left,
-}));
-const itemContainerClasses = computed(() => ({
-  'relative flex items-center': true,
-  'justify-center': props.position === Position.bottom,
-  'justify-center rotate-180': props.position === Position.top,
-  'justify-center -rotate-90': props.position === Position.right,
-  'justify-center rotate-90': props.position === Position.left,
-}));
-const contentClasses = computed(() => {
-  const variants: Record<InputState, string> = {
-    [InputState.base]: 'text-for-white-bg-font bg-white border-neutral-300',
-    [InputState.danger]: 'text-danger-500-font bg-danger-500 border-danger-500',
-    [InputState.info]: 'text-info-500-font bg-info-500 border-info-500',
-    [InputState.success]: 'text-success-500-font bg-success-500 border-success-500',
-    [InputState.warning]: 'text-warning-500-font bg-warning-500 border-warning-500',
-  };
-
-  return {[variants[props.state]]: true};
-});
-const svgPathClasses = computed(() => {
-  const variants: Record<InputState, string> = {
-    [InputState.base]: 'fill-white stroke-white',
-    [InputState.danger]: 'fill-danger-500 stroke-danger-500',
-    [InputState.info]: 'fill-info-500 stroke-info-500',
-    [InputState.success]: 'fill-success-500 stroke-success-500',
-    [InputState.warning]: 'fill-warning-500 stroke-warning-500',
-  };
-
-  return {[variants[props.state]]: true};
-});
-const arrowSvgPathClasses = computed(() => {
-  const variants: Record<InputState, string> = {
-    [InputState.base]: 'stroke-neutral-300',
-    [InputState.danger]: 'stroke-danger-500',
-    [InputState.info]: 'stroke-info-500',
-    [InputState.success]: 'stroke-success-500',
-    [InputState.warning]: 'stroke-warning-500',
-  };
-
-  return {[variants[props.state]]: true};
-});
-const timeout = ref<number | undefined>();
-const clickLock = ref(false);
-const uuid = ref(getCurrentInstance()?.uid);
-
-onMounted(() => {
-  handleEnumValidation(props.position, Position, 'position');
-  handleEnumValidation(props.state, InputState, 'state');
-});
-
-function onMouseOver() {
-  if (visible.value || clickLock.value) {
-    return;
-  }
-
-  /**
-   * To prevent buggy behavior when hovering over multiple tooltips in quick succession,
-   * we clear the timeout before setting a new one.
-   */
-  clearTimeout(timeout.value);
-
-  timeout.value = setTimeout(() => visible.value = true, props.delay) as unknown as number;
-}
-
-function onMouseLeave() {
-  clearTimeout(timeout.value);
-
-  visible.value = false;
-  clickLock.value = false;
-}
-
-function onClick() {
-  clearTimeout(timeout.value);
-
-  visible.value = false;
-  clickLock.value = true;
-}
-</script>
-
-<template>
-  <div
-    :key="uuid"
-    class="relative justify-center items-center"
-    :class="{'flex w-full': props.expanded, 'inline-flex': !props.expanded}"
-    data-e2e="tooltip"
-    @mouseover="() => onMouseOver()"
-    @mouseleave="() => onMouseLeave()"
-  >
-    <div
-      class="w-full"
-      @click="() => onClick()"
-    >
-      <slot />
-    </div>
-
-    <div
-      v-if="visible && hasSlotContent($slots.content)"
-      :class="_tooltipClasses"
-    >
-      <div
-        class="shadow-lg text-sm relative"
-      >
-        <div
-          :class="classes"
-        >
-          <div
-            :class="itemContainerClasses"
-          >
-            <svg
-              class="absolute mt-[.5px]"
-              width="30"
-              height="8"
-              viewBox="0 0 35 8"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M20.3284 1.82843L23.1569 4.65685C24.6571 6.15715 26.692 7 28.8137 7L6.18629 7C8.30802 7 10.3429 6.15715 11.8431 4.65686L14.6716 1.82843C16.2337 0.266331 18.7663 0.266328 20.3284 1.82843Z"
-                :class="svgPathClasses"
-              />
-
-              <path
-                d="M34.5 7L28.8137 7C26.692 7 24.6571 6.15715 23.1569 4.65685L20.3284 1.82843C18.7663 0.266328 16.2337 0.266331 14.6716 1.82843L11.8431 4.65686C10.3429 6.15715 8.30802 7 6.18629 7L0.5 7L34.5 7Z"
-                :class="svgPathClasses"
-              />
-            </svg>
-
-            <svg
-              class="absolute"
-              width="30"
-              height="8"
-              viewBox="0 0 35 8"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M34.5 7L28.8137 7C26.692 7 24.6571 6.15715 23.1569 4.65685L20.3284 1.82843C18.7663 0.266328 16.2337 0.266331 14.6716 1.82843L11.8431 4.65686C10.3429 6.15715 8.30802 7 6.18629 7L0.5 7"
-                :class="arrowSvgPathClasses"
-              />
-            </svg>
-          </div>
-        </div>
-
-        <div
-          class="p-2 rounded-md border"
-          :class="contentClasses"
-        >
-          <slot name="content" />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>

package/dist/runtime/components/Main.mdx

@@ -1,11 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/blocks';
-import * as MainStories from './Main.stories';
-
-<Meta of={MainStories} />
-
-<h1>This is the storybook for Antify UI.</h1>
-
-<p>
-  Antify UI is a Tailwind based components library for use in Vue 3 / Nuxt
-  projects.{' '}
-</p>

package/dist/runtime/components/Main.stories.d.ts

@@ -1,7 +0,0 @@
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const Main: () => {
-    template: string;
-};

package/dist/runtime/components/Main.stories.mjs

@@ -1,8 +0,0 @@
-export default {
-  title: "Main"
-};
-export const Main = () => {
-  return {
-    template: "<div>main</div>"
-  };
-};

package/dist/runtime/components/__stories/AntAccordion.stories.d.ts

@@ -1,9 +0,0 @@
-import AntAccordion from '../AntAccordion.vue';
-import { type Meta, type StoryObj } from '@storybook/vue3';
-declare const meta: Meta<typeof AntAccordion>;
-export default meta;
-type Story = StoryObj<typeof AntAccordion>;
-export declare const Docs: Story;
-export declare const CustomContent: Story;
-export declare const MultipleCollapseStrategy: Story;
-export declare const htmlInContent: Story;