@antify/ui-module 1.7.3 → 1.8.2

package/dist/runtime/components/inputs/Elements/AntDropDown.vue

@@ -1,189 +0,0 @@
-<script setup lang="ts">
-/**
- * This is the custom DropDown for each element (like select / tag-select)
- *
- * TODO:: add screen reader support
- * Fix overflow bug (See Ellipsis Text story)
- * TODO:: if the dropdown is open and the user types something, the element with a matching value should be focused.
- */
-
-import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
-import { InputState, Size } from '../../../enums';
-import type { SelectOption } from '../__types';
-import { useVModel } from '@vueuse/core';
-import type { Validator } from '@antify/validate';
-
-const emit = defineEmits([ 'update:open', 'update:modelValue', 'update:focused', 'selectElement' ]);
-const props = withDefaults(defineProps<{
-  modelValue: string | string[] | number | number[] | null;
-  focused: string | number | null;
-  open: boolean;
-  options: SelectOption[];
-  state?: InputState;
-  validator?: Validator;
-  size?: Size;
-  inputRef?: HTMLElement | null;
-  closeOnEnter?: boolean;
-  autoSelectFirstOnOpen?: boolean;
-}>(), {
-  state: InputState.base,
-  focusOnOpen: true,
-  closeOnEnter: false,
-  autoSelectFirstOnOpen: true
-});
-
-const _modelValue = useVModel(props, 'modelValue', emit);
-const isOpen = useVModel(props, 'open', emit);
-const focusedDropDownItem = useVModel(props, 'focused', emit);
-
-const dropdownClasses = computed(() => {
-  const variants: Record<InputState, string> = {
-    [InputState.base]: 'bg-neutral-300 border-neutral-300',
-    [InputState.success]: 'bg-success-500 border-success-500',
-    [InputState.info]: 'bg-info-500 border-info-500',
-    [InputState.warning]: 'bg-warning-500 border-warning-500',
-    [InputState.danger]: 'bg-danger-500 border-danger-500',
-  };
-
-  return {
-    'absolute w-full border flex flex-col gap-px outline-none -mt-px overflow-hidden shadow-md z-40': true,
-    'rounded-bl-md rounded-br-md': true,
-    [variants[props.state]]: true,
-    // Size
-    'text-sm': props.size === Size.sm ||  props.size === Size.md
-  };
-});
-const dropDownItemClasses = computed(() => {
-  const variants: Record<InputState, string> = {
-    [InputState.base]: 'bg-white text-for-white-bg-font',
-    [InputState.success]: 'bg-success-100 border-success-100-font',
-    [InputState.info]: 'bg-info-100 border-info-100-font',
-    [InputState.warning]: 'bg-warning-100 border-warning-100-font',
-    [InputState.danger]: 'bg-danger-100 border-danger-100-font',
-  };
-
-  return {
-    'select-none text-ellipsis overflow-hidden whitespace-nowrap': true,
-    [variants[props.state]]: true,
-    // Size
-    'p-1.5': props.size === Size.sm,
-    'p-2': props.size === Size.md,
-  };
-});
-
-watch(isOpen, () => {
-  nextTick(() => {
-    if (props.autoSelectFirstOnOpen) {
-      focusedDropDownItem.value =
-        typeof _modelValue.value === 'string' || typeof _modelValue.value === 'number' ? _modelValue.value :
-          Array.isArray(_modelValue.value) ? _modelValue.value[0] :
-            props.options[0].value;
-    } else {
-      focusedDropDownItem.value = null;
-    }
-  });
-});
-
-onMounted(() => {
-  nextTick(() => {
-    props.inputRef?.addEventListener('keydown', onKeyDownDropDown);
-  });
-});
-
-onUnmounted(() => {
-  props.inputRef?.removeEventListener('keydown', onKeyDownDropDown);
-});
-
-function onKeyDownDropDown(e: KeyboardEvent) {
-  if (e.key === 'Enter') {
-    if (props.closeOnEnter) {
-      isOpen.value = false;
-    }
-
-    emit('selectElement', focusedDropDownItem.value);
-  }
-
-  if (e.key === 'Escape') {
-    isOpen.value = false;
-  }
-
-  if (e.key === 'ArrowDown' || e.key === 'ArrowRight') {
-    isOpen.value = true;
-
-    const index = props.options.findIndex(option => option.value === focusedDropDownItem.value);
-    const option = props.options[index + 1];
-
-    if (index === -1) {
-      focusedDropDownItem.value = props.options[0].value;
-    } else if (option !== undefined) {
-      focusedDropDownItem.value = option.value;
-    }
-  }
-
-  if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') {
-    isOpen.value = true;
-
-    const index = props.options.findIndex(option => option.value === focusedDropDownItem.value);
-    const option = props.options[index - 1];
-
-    if (option !== undefined) {
-      focusedDropDownItem.value = option.value;
-    }
-  }
-
-  if (e.key === 'Tab') {
-    isOpen.value = false;
-  }
-}
-
-function getActiveDropDownItemClasses(option: SelectOption) {
-  const variants: Record<InputState, string> = {
-    [InputState.base]: 'bg-neutral-50/25',
-    [InputState.success]: 'bg-success-100/25',
-    [InputState.info]: 'bg-info-100/25',
-    [InputState.warning]: 'bg-warning-100/25',
-    [InputState.danger]: 'bg-danger-100/25',
-  };
-
-  return option.value === focusedDropDownItem.value ? { [variants[props.state]]: true } : {};
-}
-
-function onClickDropDownItem(e: MouseEvent, value: string | number | null) {
-  e.preventDefault();
-  props.inputRef?.focus();
-
-  isOpen.value = false;
-  emit('selectElement', value);
-  _modelValue.value = value;
-}
-
-watch(_modelValue, (val) => {
-  focusedDropDownItem.value = Array.isArray(val) ? val[0] : val;
-});
-</script>
-
-<template>
-  <div
-    v-if="isOpen"
-    :class="dropdownClasses"
-  >
-    <div
-      v-for="(option, index) in options"
-      :key="`option-${index}`"
-      :class="{...dropDownItemClasses, ...getActiveDropDownItemClasses(option)}"
-      @mousedown="(e) => onClickDropDownItem(e, option.value)"
-      @mouseover="() => focusedDropDownItem = option.value"
-    >
-      {{ option.label }}
-    </div>
-
-    <div
-      v-if="options.length === 0"
-      :class="{...dropDownItemClasses}"
-    >
-      <slot name="empty">
-        No options available
-      </slot>
-    </div>
-  </div>
-</template>

package/dist/runtime/components/inputs/Elements/AntInputDescription.vue

@@ -1,58 +0,0 @@
-<script lang="ts" setup>
-import {computed, onMounted} from 'vue';
-import {Size} from '../../../enums/Size.enum';
-import AntSkeleton from '../../AntSkeleton.vue';
-import {handleEnumValidation} from '../../../handler';
-import {InputState} from '../../../enums';
-
-const props = withDefaults(defineProps<{
-  state?: InputState,
-  size?: Size;
-  skeleton?: boolean;
-}>(), {
-  skeleton: false,
-  size: Size.md,
-  state: InputState.base
-});
-
-const classes = computed(() => {
-  const variants: Record<InputState, string> = {
-    [InputState.base]: 'text-for-white-bg-font',
-    [InputState.danger]: 'text-danger-500',
-    [InputState.info]: 'text-info-500',
-    [InputState.success]: 'text-success-500',
-    [InputState.warning]: 'text-warning-500',
-  };
-
-  return {
-    'relative font-regular inline-block transition-color': true,
-    'text-2xs': props.size === Size.xs2,
-    'text-xs': props.size === Size.xs,
-    'text-sm': props.size === Size.sm,
-    'text-md': props.size === Size.md,
-    'text-lg': props.size === Size.lg,
-    [variants[props.state]]: true
-  };
-});
-
-onMounted(() => {
-  handleEnumValidation(props.size, Size, 'size');
-  handleEnumValidation(props.state, InputState, 'state');
-});
-</script>
-
-<template>
-  <div
-    :class="classes"
-  >
-    <span :class="{'invisible': skeleton}">
-      <slot />
-    </span>
-
-    <AntSkeleton
-      v-if="skeleton"
-      absolute
-      rounded
-    />
-  </div>
-</template>

package/dist/runtime/components/inputs/Elements/AntInputLabel.vue

@@ -1,62 +0,0 @@
-<script lang="ts" setup>
-import {computed, onMounted} from 'vue';
-import {Size} from '../../../enums/Size.enum';
-import AntSkeleton from '../../AntSkeleton.vue';
-import {handleEnumValidation} from '../../../handler';
-
-defineEmits(['clickContent']);
-
-const props = withDefaults(defineProps<{
-  label?: string;
-  size?: Size;
-  skeleton?: boolean;
-}>(), {
-  skeleton: false,
-  size: Size.md,
-});
-
-const fontClasses = computed(() => ({
-  'relative font-medium w-fit text-for-white-bg-font': true,
-  'text-xs': props.size === Size.xs || props.size === Size.xs2,
-  'text-sm': props.size === Size.lg || props.size === Size.md || props.size === Size.sm,
-}));
-const gapSize = computed(() => ({
-  'gap-2.5': props.size === Size.lg,
-  'gap-2': props.size === Size.md,
-  'gap-1.5': props.size === Size.sm || props.size === Size.xs,
-  'gap-1': props.size === Size.xs2,
-}));
-
-onMounted(() => {
-  handleEnumValidation(props.size, Size, 'size');
-});
-</script>
-
-<template>
-  <label
-    class="flex flex-col w-full"
-    :class="gapSize"
-  >
-    <span
-      v-if="label"
-      :class="fontClasses"
-    >
-      <span
-        :class="{'invisible': skeleton}"
-        @click="$emit('clickContent')"
-      >
-        <slot name="label">
-          {{ label }}
-        </slot>
-      </span>
-
-      <AntSkeleton
-        v-if="skeleton"
-        absolute
-        rounded
-      />
-    </span>
-
-    <slot />
-  </label>
-</template>

package/dist/runtime/components/inputs/Elements/AntInputLimiter.vue

@@ -1,58 +0,0 @@
-<script lang="ts" setup>
-import {computed, onMounted} from 'vue';
-import {Size} from '../../../enums/Size.enum';
-import AntSkeleton from '../../AntSkeleton.vue';
-import {handleEnumValidation} from '../../../handler';
-import {InputState} from '../../../enums';
-
-const props = withDefaults(defineProps<{
-  value: number;
-  maxValue: number;
-  state?: InputState;
-  size?: Size;
-  skeleton?: boolean;
-}>(), {
-  skeleton: false,
-  size: Size.md,
-  state: InputState.base
-});
-
-const classes = computed(() => {
-  const variants: Record<InputState, string> = {
-    [InputState.base]: 'text-for-white-bg-font',
-    [InputState.danger]: 'text-danger-500',
-    [InputState.info]: 'text-info-500',
-    [InputState.success]: 'text-success-500',
-    [InputState.warning]: 'text-warning-500',
-  };
-
-  return {
-    'relative font-regular inline-block transition-color': true,
-    'text-2xs': props.size === Size.xs2,
-    'text-xs': props.size === Size.xs,
-    'text-sm': props.size === Size.sm,
-    'text-md': props.size === Size.md,
-    'text-lg': props.size === Size.lg,
-    [variants[props.state]]: true,
-  };
-});
-
-onMounted(() => {
-  handleEnumValidation(props.size, Size, 'size');
-  handleEnumValidation(props.state, InputState, 'state');
-});
-</script>
-
-<template>
-  <div :class="classes">
-    <span :class="{'invisible': skeleton}">
-      {{ value }}/{{ maxValue }}
-    </span>
-
-    <AntSkeleton
-      v-if="skeleton"
-      absolute
-      rounded
-    />
-  </div>
-</template>

package/dist/runtime/components/inputs/Elements/__stories/AntBaseInput.stories.d.ts

@@ -1,11 +0,0 @@
-import { type Meta, type StoryObj } from '@storybook/vue3';
-import AntBaseInput from '../AntBaseInput.vue';
-declare const meta: Meta<typeof AntBaseInput>;
-export default meta;
-type Story = StoryObj<typeof AntBaseInput>;
-export declare const Docs: Story;
-export declare const withValidator: Story;
-export declare const Nullable: Story;
-export declare const IconLeft: Story;
-export declare const IconRight: Story;
-export declare const Summary: Story;

package/dist/runtime/components/inputs/Elements/__stories/AntBaseInput.stories.mjs

@@ -1,234 +0,0 @@
-import { Size } from "../../../../enums/Size.enum.mjs";
-import { BaseInputType } from "../__types/AntBaseInput.types.mjs";
-import AntBaseInput from "../AntBaseInput.vue";
-import AntButton from "../../../buttons/AntButton.vue";
-import AntIcon from "../../../AntIcon.vue";
-import { Grouped as _Grouped } from "../../../../enums/Grouped.enum.mjs";
-import { isRequiredRule, notBlankRule, useFieldValidator } from "@antify/validate";
-import { reactive } from "vue";
-import { faSearch, faEye } from "@fortawesome/free-solid-svg-icons";
-import { InputState } from "../../../../enums/index.mjs";
-import AntFormGroup from "../../../forms/AntFormGroup.vue";
-import AntFormGroupLabel from "../../../forms/AntFormGroupLabel.vue";
-import { Direction } from "../../../../enums/Direction.enum.mjs";
-const meta = {
-  computed: {
-    Direction() {
-      return Direction;
-    }
-  },
-  components: { AntFormGroup },
-  title: "Inputs/Elements/Base Input",
-  component: AntBaseInput,
-  parameters: { controls: { sort: "requiredFirst" } },
-  argTypes: {
-    modelValue: {
-      control: { type: "text" },
-      table: { type: { summary: "string|number|null" } }
-    },
-    type: {
-      control: { type: "select" },
-      options: Object.values(BaseInputType),
-      table: { defaultValue: { summary: BaseInputType.text } }
-    },
-    state: {
-      control: { type: "select" },
-      options: Object.values(InputState)
-    },
-    size: {
-      control: { type: "select" },
-      options: Object.values(Size),
-      table: { defaultValue: { summary: Size.md } }
-    },
-    placeholder: {
-      control: "text",
-      table: { defaultValue: { summary: "this.label" } }
-    },
-    grouped: {
-      control: { type: "select" },
-      options: Object.values(_Grouped),
-      description: "Where is this fields position in a group",
-      table: { defaultValue: { summary: _Grouped.none } }
-    },
-    wrapperClass: {
-      control: "text",
-      description: 'Class for the first element because the attribute "class" would affect the input element.',
-      table: { type: { summary: "string|object" } }
-    },
-    showIcon: {
-      control: "boolean",
-      description: "Some InputStates can have an icon. Control with this property if it gets shown or not."
-    },
-    iconLeft: {
-      control: { type: "none" },
-      description: "Will be displayed left to the input text.<br>Use Font-awesome Icons."
-    }
-  }
-};
-export default meta;
-export const Docs = {
-  render: (args) => ({
-    components: { AntBaseInput },
-    setup: () => {
-      return { args };
-    },
-    template: `
-      <AntBaseInput
-        v-model="args.modelValue"
-        v-bind="args"
-      />`
-  }),
-  args: {
-    modelValue: null,
-    placeholder: "Placeholder"
-  }
-};
-export const withValidator = {
-  render: (args) => ({
-    components: { AntBaseInput },
-    setup: () => {
-      const validator = reactive(useFieldValidator([isRequiredRule, notBlankRule]));
-      return { args, validator, InputState };
-    },
-    template: `
-      <AntBaseInput
-        v-model="args.modelValue"
-        v-bind="args"
-        :state="args.state ? args.state : (validator.hasErrors() ? InputState.danger : undefined)"
-        @validate="(val) => validator.validate(val)"
-      />`
-  }),
-  args: {
-    ...Docs.args,
-    modelValue: ""
-  }
-};
-export const Nullable = {
-  render: Docs.render,
-  args: {
-    ...Docs.args,
-    nullable: true
-  }
-};
-export const IconLeft = {
-  render: Docs.render,
-  args: {
-    ...Docs.args,
-    iconLeft: faSearch
-  }
-};
-export const IconRight = {
-  render: (args) => ({
-    components: { AntBaseInput, AntIcon },
-    setup: () => {
-      return { args, faEye };
-    },
-    template: `
-      <AntBaseInput
-        v-model="args.modelValue"
-        v-bind="args"
-      >
-        <template #icon-right>
-          <AntIcon :icon="faEye"/>
-        </template>
-      </AntBaseInput>`
-  }),
-  args: {
-    ...Docs.args
-  }
-};
-export const Summary = {
-  parameters: {
-    chromatic: { disableSnapshot: false }
-  },
-  render: (args) => ({
-    components: { AntBaseInput, AntButton, AntFormGroup, AntFormGroupLabel },
-    setup: () => {
-      return { args, faSearch, Direction, Size };
-    },
-    template: `
-      <AntFormGroup>
-        <AntFormGroupLabel>State</AntFormGroupLabel>
-        <AntFormGroup :direction="Direction.row">
-          <AntBaseInput v-bind="args" v-model="modelValue" state="base"/>
-          <AntBaseInput v-bind="args" v-model="modelValue" state="info"/>
-          <AntBaseInput v-bind="args" v-model="modelValue" state="success"/>
-          <AntBaseInput v-bind="args" v-model="modelValue" state="warning"/>
-          <AntBaseInput v-bind="args" v-model="modelValue" state="danger"/>
-        </AntFormGroup>
-
-        <AntFormGroupLabel>Size</AntFormGroupLabel>
-        <AntFormGroup :direction="Direction.row">
-          <AntBaseInput v-bind="args" v-model="modelValue" state="base" :size="Size.lg"/>
-          <AntBaseInput v-bind="args" v-model="modelValue" state="info" :size="Size.md"/>
-          <AntBaseInput v-bind="args" v-model="modelValue" state="success" :size="Size.sm"/>
-          <AntBaseInput v-bind="args" v-model="modelValue" state="warning" :size="Size.xs"/>
-          <AntBaseInput v-bind="args" v-model="modelValue" state="danger" :size="Size.xs2"/>
-        </AntFormGroup>
-
-        <AntFormGroupLabel>Value</AntFormGroupLabel>
-        <AntFormGroup :direction="Direction.row">
-          <AntBaseInput v-bind="args" value="A value" state="base"/>
-          <AntBaseInput v-bind="args" value="A value" state="info"/>
-          <AntBaseInput v-bind="args" value="A value" state="success"/>
-          <AntBaseInput v-bind="args" value="A value" state="warning"/>
-          <AntBaseInput v-bind="args" value="A value" state="danger"/>
-        </AntFormGroup>
-
-        <AntFormGroupLabel>Disabled</AntFormGroupLabel>
-        <AntFormGroup :direction="Direction.row">
-          <AntBaseInput v-bind="args" value="A value" disabled state="base"/>
-          <AntBaseInput v-bind="args" value="A value" disabled state="info"/>
-          <AntBaseInput v-bind="args" value="A value" disabled state="success"/>
-          <AntBaseInput v-bind="args" value="A value" disabled state="warning"/>
-          <AntBaseInput v-bind="args" value="A value" disabled state="danger"/>
-        </AntFormGroup>
-
-        <AntFormGroupLabel>Value & Nullable</AntFormGroupLabel>
-        <AntFormGroup :direction="Direction.row">
-          <AntBaseInput v-bind="args" value="A value" nullable state="base"/>
-          <AntBaseInput v-bind="args" value="A value" nullable state="info"/>
-          <AntBaseInput v-bind="args" value="A value" nullable state="success"/>
-          <AntBaseInput v-bind="args" value="A value" nullable state="warning"/>
-          <AntBaseInput v-bind="args" value="A value" nullable state="danger"/>
-        </AntFormGroup>
-
-        <AntFormGroupLabel>Value & Nullable & Disabled</AntFormGroupLabel>
-        <AntFormGroup :direction="Direction.row">
-          <AntBaseInput v-bind="args" value="A value" nullable disabled state="base"/>
-          <AntBaseInput v-bind="args" value="A value" nullable disabled state="info"/>
-          <AntBaseInput v-bind="args" value="A value" nullable disabled state="success"/>
-          <AntBaseInput v-bind="args" value="A value" nullable disabled state="warning"/>
-          <AntBaseInput v-bind="args" value="A value" nullable disabled state="danger"/>
-        </AntFormGroup>
-
-        <AntFormGroupLabel>Placeholder</AntFormGroupLabel>
-        <AntFormGroup :direction="Direction.row">
-          <AntBaseInput v-bind="args" v-model="modelValue" :show-icon="false" state="base"/>
-          <AntBaseInput v-bind="args" v-model="modelValue" :show-icon="false" state="info"/>
-          <AntBaseInput v-bind="args" v-model="modelValue" :show-icon="false" state="success"/>
-          <AntBaseInput v-bind="args" v-model="modelValue" :show-icon="false" state="warning"/>
-          <AntBaseInput v-bind="args" v-model="modelValue" :show-icon="false" state="danger"/>
-        </AntFormGroup>
-
-        <AntFormGroupLabel>Icon left</AntFormGroupLabel>
-        <AntFormGroup :direction="Direction.row">
-          <AntBaseInput v-bind="args" v-model="modelValue" :icon-left="faSearch" state="base"/>
-          <AntBaseInput v-bind="args" v-model="modelValue" :icon-left="faSearch" state="info"/>
-          <AntBaseInput v-bind="args" v-model="modelValue" :icon-left="faSearch" state="success"/>
-          <AntBaseInput v-bind="args" v-model="modelValue" :icon-left="faSearch" state="warning"/>
-          <AntBaseInput v-bind="args" v-model="modelValue" :icon-left="faSearch" state="danger"/>
-        </AntFormGroup>
-
-        <AntFormGroupLabel>Grouped</AntFormGroupLabel>
-        <div class="flex gap-[-2px]">
-          <AntBaseInput v-bind="args" v-model="modelValue" grouped="left"/>
-          <AntBaseInput v-bind="args" v-model="modelValue" grouped="center" state="danger"/>
-          <AntBaseInput v-bind="args" v-model="modelValue" grouped="right" state="info"/>
-        </div>
-      </AntFormGroup>`
-  }),
-  args: {
-    placeholder: "Placeholder"
-  }
-};

package/dist/runtime/components/inputs/Elements/__stories/AntInputDescription.stories.d.ts

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

package/dist/runtime/components/inputs/Elements/__stories/AntInputDescription.stories.mjs

@@ -1,34 +0,0 @@
-import AntInputDescription from "../AntInputDescription.vue";
-import { Size } from "../../../../enums/Size.enum.mjs";
-import { InputState } from "../../../../enums/index.mjs";
-const meta = {
-  title: "Inputs/Elements/Ant Input Description",
-  component: AntInputDescription,
-  parameters: { controls: { sort: "requiredFirst" } },
-  argTypes: {
-    size: {
-      control: { type: "select" },
-      options: Object.values(Size),
-      table: { defaultValue: { summary: Size.md } }
-    },
-    skeleton: {
-      control: "boolean",
-      table: { defaultValue: { summary: false } }
-    },
-    state: {
-      control: { type: "select" },
-      options: Object.values(InputState)
-    }
-  }
-};
-export default meta;
-export const Docs = {
-  render: (args) => ({
-    components: { AntInputDescription },
-    setup() {
-      return { args };
-    },
-    template: '<div class="p-4"><AntInputDescription v-bind="args">Description</AntInputDescription></div>'
-  }),
-  args: {}
-};

package/dist/runtime/components/inputs/Elements/__stories/AntInputLabel.stories.d.ts

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