@antify/ui-module 1.6.0 → 1.7.2

package/dist/runtime/components/form/Elements/AntBaseInput.vue

@@ -1,220 +0,0 @@
-<script lang="ts" setup>
-import {computed, onMounted, watch} from 'vue';
-import {Size} from '../../../enums/Size.enum'
-import AntSkeleton from '../../AntSkeleton.vue';
-import AntIcon from '../../AntIcon.vue';
-import {BaseInputType} from './__types/AntBaseInput.type';
-import {Grouped} from '../../../enums/Grouped.enum';
-import {
-  faExclamationTriangle,
-  faExclamationCircle,
-  faCircleCheck,
-  faCircleInfo,
-  faXmark
-} from '@fortawesome/free-solid-svg-icons';
-import {handleEnumValidation} from '../../../handler';
-import {type IconDefinition} from '@fortawesome/free-solid-svg-icons';
-import {classesToObjectSyntax} from '../../../utils';
-import {InputColorType} from '../../../enums';
-import {IconSize} from '../../__types';
-
-defineOptions({ inheritAttrs: false });
-
-const emit = defineEmits(['update:value', 'blur', 'validate']);
-const props = withDefaults(defineProps<{
-  value: string | number | null;
-  size?: Size;
-  colorType?: InputColorType;
-  disabled?: boolean;
-  placeholder?: string;
-  skeleton?: boolean;
-  type?: BaseInputType;
-  grouped?: Grouped;
-  wrapperClass?: string | Record<string, boolean>;
-  showIcon?: boolean;
-  iconLeft?: IconDefinition;
-  nullable?: boolean;
-  hasErrors?: boolean;
-}>(), {
-  colorType: InputColorType.base,
-  disabled: false,
-  size: Size.md,
-  skeleton: false,
-  type: BaseInputType.text,
-  grouped: Grouped.none,
-  showIcon: true,
-  default: false,
-  nullable: false,
-  hasErrors: false
-});
-
-const icons = {
-  [InputColorType.info]: faCircleInfo,
-  [InputColorType.warning]: faExclamationTriangle,
-  [InputColorType.danger]: faExclamationCircle,
-  [InputColorType.success]: faCircleCheck,
-  [InputColorType.base]: null,
-};
-
-const inputClasses = computed(() => {
-  const variants: Record<InputColorType, string> = {
-    [InputColorType.base]: 'outline-neutral-300 focus:outline-primary-500 focus:ring-primary/25 bg-white placeholder:text-neutral-500',
-    [InputColorType.danger]: 'outline-danger-500 focus:outline-danger-500 focus:ring-danger/25 bg-danger-100 placeholder:text-danger-700',
-    [InputColorType.info]: 'outline-info-500 focus:outline-info-500 focus:ring-info/25 bg-info-100 placeholder:text-info-700',
-    [InputColorType.success]: 'outline-success-500 focus:outline-success-500 focus:ring-success/25 bg-success-100 placeholder:text-success-700',
-    [InputColorType.warning]: 'outline-warning-500 focus:outline-warning-500 focus:ring-warning/25 bg-warning-100 placeholder:text-warning-700',
-  };
-
-  return {
-    'transition-colors relative border-none outline w-full focus:z-10 text-black': true,
-    'outline-offset-[-1px] outline-1 focus:outline-offset-[-1px] focus:outline-1': true,
-    'disabled:opacity-50 disabled:cursor-not-allowed': props.disabled,
-    'text-right': props.type === BaseInputType.number,
-    [variants[_colorType.value]]: true,
-    // Size
-    'focus:ring-2 p-1.5 text-xs': props.size === Size.sm,
-    'focus:ring-4 p-2.5 text-sm': props.size === Size.md,
-    // Icon left
-    'pl-7': props.size === Size.sm && props.iconLeft,
-    'pl-10': props.size === Size.md && props.iconLeft,
-    // Icon right
-    'pr-7': props.size === Size.sm && props.showIcon && icon.value,
-    'pr-10': props.size === Size.md && props.showIcon && icon.value,
-    // Grouped
-    '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,
-    'rounded-md': props.grouped === Grouped.none,
-    'invisible': props.skeleton,
-  };
-});
-const iconClasses = computed(() => ({
-  'transition-[height]': true,
-}));
-const iconColorClass = computed(() => {
-  const variants: Record<InputColorType, string> = {
-    [InputColorType.base]: 'text-for-white-bg-font',
-    [InputColorType.danger]: 'text-danger-500',
-    [InputColorType.info]: 'text-info-500',
-    [InputColorType.success]: 'text-success-500',
-    [InputColorType.warning]: 'text-warning-500',
-  };
-
-  return variants[_colorType.value];
-});
-const _wrapperClass = computed(() => classesToObjectSyntax(props.wrapperClass));
-const icon = computed(() => icons[_colorType.value]);
-const _value = computed<string | number | null>({
-  get: () => props.value,
-  set: (val: string | number | null) => {
-    if (props.type === BaseInputType.number && typeof val !== 'number') {
-      return emit('update:value', null);
-    }
-
-    emit('update:value', val);
-  },
-});
-const _colorType = computed(() => props.hasErrors ? InputColorType.danger : props.colorType);
-
-watch(_value, (val) => {
-  if (props.hasErrors) {
-    emit('validate', val)
-  }
-});
-
-/**
- * Validate default value if given after delayed data fetching.
- */
-watch(() => props.skeleton, (val) => {
-  if (!val && props.value !== null) {
-    emit('validate', props.value)
-  }
-});
-
-onMounted(() => {
-  handleEnumValidation(props.size, Size, 'size');
-  handleEnumValidation(props.colorType, InputColorType, 'colorType');
-  handleEnumValidation(props.type, BaseInputType, 'Type');
-  handleEnumValidation(props.grouped, Grouped, 'grouped');
-
-  /**
-   * Validate default value without delayed data fetching.
-   */
-  if (!props.skeleton && props.value !== null) {
-    emit('validate', props.value)
-  }
-});
-
-function onBlur(e: FocusEvent) {
-  emit('validate', props.value)
-  emit('blur', e);
-}
-</script>
-
-<template>
-  <div
-    class="block relative w-full"
-    :class="{...{'-mr-px': grouped !== Grouped.none}, ..._wrapperClass}"
-  >
-    <div
-      v-if="iconLeft"
-      class="absolute h-full flex items-center justify-center z-20"
-      :class="{'w-7': size === Size.sm, 'w-10': size === Size.md}"
-    >
-      <AntIcon
-        :icon="iconLeft"
-        :size="size as unknown as IconSize"
-        color="text-for-white-bg-font"
-      />
-    </div>
-
-    <input
-      v-model="_value"
-      :class="inputClasses"
-      :type="type"
-      :placeholder="placeholder"
-      :disabled="disabled || skeleton"
-      v-bind="$attrs"
-      @blur="onBlur"
-    >
-
-    <div
-      v-if="nullable && _value !== null && _value !== ''"
-      class="absolute flex w-fit right-0 top-0 h-full transition-all z-20"
-      :class="{'p-1.5': size === Size.sm, 'p-2.5': size === Size.md}"
-    >
-      <AntIcon
-        :icon="faXmark"
-        :class="iconClasses"
-        class="cursor-pointer"
-        :color="iconColorClass"
-        :size="size as unknown as IconSize"
-        @click="() => _value = null"
-      />
-    </div>
-
-    <div
-      v-else-if="showIcon && icon"
-      class="absolute flex w-fit right-0 top-0 h-full transition-all z-20"
-      :class="{'p-1.5': size === Size.sm, 'p-2.5': size === Size.md}"
-    >
-      <AntIcon
-        :icon="icon"
-        :color="iconColorClass"
-        :class="iconClasses"
-        :size="size as unknown as IconSize"
-      />
-    </div>
-
-    <AntSkeleton
-      v-if="skeleton"
-      absolute
-      :grouped="grouped"
-      rounded
-    />
-  </div>
-</template>
-
-<style scoped>
-input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}input[type=search]::-ms-clear,input[type=search]::-ms-reveal{display:none;height:0;width:0}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{display:none}
-</style>

package/dist/runtime/components/form/Elements/AntField.vue

@@ -1,105 +0,0 @@
-<script lang="ts" setup>
-import {onMounted, computed} from 'vue';
-import {Size} from '../../../enums/Size.enum'
-import AntInputLabel from './AntInputLabel.vue';
-import AntInputDescription from './AntInputDescription.vue';
-import {handleEnumValidation} from '../../../handler';
-import AntInputLimiter from './AntInputLimiter.vue';
-import {InputColorType} from '../../../enums';
-
-defineEmits(['clickLabel', 'validate']);
-const props = withDefaults(defineProps<{
-  label?: string;
-  description?: string;
-  size?: Size;
-  colorType?: InputColorType;
-  skeleton?: boolean;
-  limiterValue?: number;
-  limiterMaxValue?: number;
-  labelFor?: string;
-  errors?: string[];
-  expanded?: boolean;
-}>(), {
-  colorType: InputColorType.base,
-  skeleton: false,
-  size: Size.md,
-  errors: () => [],
-  expanded: true
-});
-
-onMounted(() => {
-  handleEnumValidation(props.size, Size, 'size');
-  handleEnumValidation(props.colorType, InputColorType, 'colorType');
-});
-
-const _errors = computed(() => props.skeleton ? [] : props.errors);
-const _colorType = computed(() => _errors.value.length > 0 ? InputColorType.danger : props.colorType);
-</script>
-
-<template>
-  <div
-    class="flex flex-col items-start gap-1.5"
-    :class="{'w-full': expanded}"
-  >
-    <AntInputLabel
-      :label="label"
-      :size="size"
-      :skeleton="skeleton"
-      :for="labelFor"
-      @click-content="$emit('clickLabel')"
-    >
-      <div class="w-full">
-        <slot />
-      </div>
-    </AntInputLabel>
-
-    <div
-      v-if="description || _errors.length > 0 || (limiterMaxValue !== undefined && limiterValue !== undefined)"
-      class="flex justify-between w-full"
-    >
-      <AntInputDescription
-        v-if="description || _errors.length > 0"
-        :size="size"
-        :skeleton="skeleton"
-        :color-type="_colorType"
-      >
-        <slot name="description">
-          <template v-if="_errors.length === 1">
-            {{ errors[0] }}
-          </template>
-
-          <template v-else-if="_errors.length > 1">
-            <ul class="list-disc list-outside pl-4">
-              <li
-                v-for="(error, index) of _errors"
-                :key="`field-error-${index}`"
-                class="marker:m-none marker:p-none"
-              >
-                {{ error }}
-              </li>
-            </ul>
-          </template>
-
-          <template v-else>
-            {{ description }}
-          </template>
-        </slot>
-      </AntInputDescription>
-
-      <div
-        v-if="limiterMaxValue !== undefined && limiterValue !== undefined"
-        class="flex flex-grow justify-end"
-      >
-        <AntInputLimiter
-          :value="limiterValue"
-          :max-value="limiterMaxValue"
-          :color-type="_colorType"
-          :size="size"
-          :skeleton="skeleton"
-        >
-          {{ limiterValue }}/{{ limiterMaxValue }}
-        </AntInputLimiter>
-      </div>
-    </div>
-  </div>
-</template>

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

@@ -1,55 +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 classes = computed(() => ({
-  'relative font-medium w-fit': true,
-  'text-xs': props.size === Size.sm,
-  'text-sm': props.size === Size.md,
-}));
-
-onMounted(() => {
-  handleEnumValidation(props.size, Size, 'size');
-});
-</script>
-
-<template>
-  <label
-      class="flex flex-col gap-1.5 w-full"
-  >
-    <span
-        v-if="label"
-        :class="classes"
-    >
-      <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/form/Elements/AntInputLimiter.vue

@@ -1,55 +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 {InputColorType} from '../../../enums';
-
-const props = withDefaults(defineProps<{
-  value: number;
-  maxValue: number;
-  colorType?: InputColorType;
-  size?: Size;
-  skeleton?: boolean;
-}>(), {
-  skeleton: false,
-  size: Size.md,
-  colorType: InputColorType.base
-});
-
-const classes = computed(() => {
-  const variants: Record<InputColorType, string> = {
-    [InputColorType.base]: 'text-neutral-500',
-    [InputColorType.danger]: 'text-danger-500',
-    [InputColorType.info]: 'text-info-500',
-    [InputColorType.success]: 'text-success-500',
-    [InputColorType.warning]: 'text-warning-500',
-  };
-
-  return {
-    'relative font-regular inline-block transition-color': true,
-    'text-xs': props.size === Size.sm,
-    'text-sm': props.size === Size.md,
-    [variants[props.colorType]]: true,
-  };
-});
-
-onMounted(() => {
-  handleEnumValidation(props.size, Size, 'size');
-  handleEnumValidation(props.colorType, InputColorType, 'colorType');
-});
-</script>
-
-<template>
-  <div :class="classes">
-    <span :class="{'invisible': skeleton}">
-        {{ value }}/{{ maxValue }}
-    </span>
-
-    <AntSkeleton
-        v-if="skeleton"
-        absolute
-        rounded
-    />
-  </div>
-</template>

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

@@ -1,171 +0,0 @@
-import { Size } from "../../../../enums/Size.enum.mjs";
-import { BaseInputType } from "../__types/AntBaseInput.type.mjs";
-import AntBaseInput from "../AntBaseInput.vue";
-import AntButton from "../../../buttons/AntButton.vue";
-import { Grouped as _Grouped } from "../../../../enums/Grouped.enum.mjs";
-import { isRequiredRule, notBlankRule, useFieldValidator } from "@antify/validate";
-import { computed, reactive } from "vue";
-import { faSearch } from "@fortawesome/free-solid-svg-icons";
-import { InputColorType } from "../../../../enums/index.mjs";
-const meta = {
-  title: "Components/Forms/Elements/Base Input",
-  component: AntBaseInput,
-  parameters: { controls: { sort: "requiredFirst" } },
-  argTypes: {
-    value: {
-      control: { type: "text" },
-      table: { type: { summary: "string|number|null" } }
-    },
-    type: {
-      control: { type: "select" },
-      options: Object.values(BaseInputType),
-      table: { defaultValue: { summary: BaseInputType.text } }
-    },
-    colorType: {
-      control: { type: "select" },
-      options: Object.values(InputColorType)
-    },
-    size: {
-      control: { type: "radio" },
-      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 InputColorTypes 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: () => {
-      const validator = reactive(useFieldValidator([isRequiredRule, notBlankRule]));
-      return { args, validator };
-    },
-    template: `
-      <AntBaseInput
-        v-bind="args"
-        v-model:value="args.value"
-        :has-errors="typeof args.hasErrors === 'boolean' ? args.hasErrors : validator.hasErrors()"
-        @validate="(val) => validator.validate(val)"
-      />`
-  }),
-  args: {
-    value: null,
-    placeholder: "Placeholder"
-  }
-};
-export const withValidator = {
-  render: (args) => ({
-    components: { AntBaseInput },
-    setup: () => {
-      setTimeout(() => {
-        args.skeleton = false;
-      }, 1e3);
-      const validator = reactive(useFieldValidator([isRequiredRule, notBlankRule]));
-      return { args, validator };
-    },
-    template: `
-      <AntBaseInput
-        v-bind="args"
-        v-model:value="args.value"
-        :has-errors="typeof args.hasErrors === 'boolean' ? args.hasErrors : validator.hasErrors()"
-        @validate="(val) => validator.validate(val)"
-      />`
-  }),
-  args: {
-    ...Docs.args,
-    value: null,
-    skeleton: true,
-    description: void 0
-  }
-};
-export const IconLeft = {
-  render: Docs.render,
-  args: {
-    ...Docs.args,
-    iconLeft: faSearch
-  }
-};
-export const Summary = {
-  parameters: {
-    chromatic: { disableSnapshot: false }
-  },
-  render: (args) => ({
-    components: { AntBaseInput, AntButton },
-    setup: () => {
-      const value = computed({
-        // @ts-ignore
-        get: () => args.value,
-        // @ts-ignore
-        set: (val) => args.value = val
-      });
-      return { args, value, faSearch };
-    },
-    template: `
-      <div class="p-4 pb-10 flex flex-col gap-2">
-        <div class="flex gap-2">
-          <AntBaseInput v-bind="args" v-model:value="value" color-type="base"/>
-          <AntBaseInput v-bind="args" v-model:value="value" color-type="info"/>
-          <AntBaseInput v-bind="args" v-model:value="value" color-type="success"/>
-          <AntBaseInput v-bind="args" v-model:value="value" color-type="warning"/>
-          <AntBaseInput v-bind="args" v-model:value="value" color-type="danger"/>
-        </div>
-
-        <div class="flex gap-2">
-          <AntBaseInput v-bind="args" value="A value" nullable color-type="base"/>
-          <AntBaseInput v-bind="args" value="A value" nullable color-type="info"/>
-          <AntBaseInput v-bind="args" value="A value" nullable color-type="success"/>
-          <AntBaseInput v-bind="args" value="A value" nullable color-type="warning"/>
-          <AntBaseInput v-bind="args" value="A value" nullable color-type="danger"/>
-        </div>
-
-        <div class="flex gap-2">
-          <AntBaseInput v-bind="args" v-model:value="value" :show-icon="false" color-type="base"/>
-          <AntBaseInput v-bind="args" v-model:value="value" :show-icon="false" color-type="info"/>
-          <AntBaseInput v-bind="args" v-model:value="value" :show-icon="false" color-type="success"/>
-          <AntBaseInput v-bind="args" v-model:value="value" :show-icon="false" color-type="warning"/>
-          <AntBaseInput v-bind="args" v-model:value="value" :show-icon="false" color-type="danger"/>
-        </div>
-
-        <div class="flex gap-2">
-          <AntBaseInput v-bind="args" v-model:value="value" :icon-left="faSearch" color-type="base"/>
-          <AntBaseInput v-bind="args" v-model:value="value" :icon-left="faSearch" color-type="info"/>
-          <AntBaseInput v-bind="args" v-model:value="value" :icon-left="faSearch" color-type="success"/>
-          <AntBaseInput v-bind="args" v-model:value="value" :icon-left="faSearch" color-type="warning"/>
-          <AntBaseInput v-bind="args" v-model:value="value" :icon-left="faSearch" color-type="danger"/>
-        </div>
-
-        <div class="flex gap-[-2px]">
-          <AntBaseInput v-bind="args" v-model:value="value" grouped="left"/>
-          <AntBaseInput v-bind="args" v-model:value="value" grouped="center" color-type="danger"/>
-          <AntBaseInput v-bind="args" v-model:value="value" grouped="right" color-type="info"/>
-        </div>
-      </div>`
-  }),
-  args: {
-    value: "",
-    placeholder: "Placeholder"
-  }
-};

package/dist/runtime/components/form/Elements/__types/index.d.ts

@@ -1 +0,0 @@
-export * from './AntBaseInput.type';

package/dist/runtime/components/form/Elements/__types/index.mjs

@@ -1 +0,0 @@
-export * from "./AntBaseInput.type.mjs";

package/dist/runtime/components/form/__stories/AntNumberInput.stories.mjs

@@ -1,74 +0,0 @@
-import { Size } from "../../../enums/Size.enum.mjs";
-import AntNumberInput from "../AntNumberInput.vue";
-import { ColorType } from "../../../enums/ColorType.enum.mjs";
-import { isRequiredRule, useFieldValidator } from "@antify/validate";
-import { reactive } from "vue";
-const meta = {
-  title: "Components/Forms/Number Input",
-  component: AntNumberInput,
-  parameters: { controls: { sort: "requiredFirst" } },
-  argTypes: {
-    modelValue: {
-      control: { type: "number" },
-      table: { type: { summary: "number|null" } }
-    },
-    colorType: {
-      control: { type: "select" },
-      options: Object.values(ColorType)
-    },
-    size: {
-      control: { type: "radio" },
-      options: Object.values(Size),
-      table: { defaultValue: { summary: Size.md } }
-    },
-    placeholder: {
-      table: { defaultValue: { summary: "this.label" } }
-    }
-  }
-};
-export default meta;
-export const Docs = {
-  render: (args) => ({
-    components: { AntNumberInput },
-    setup() {
-      const validator = reactive(useFieldValidator([
-        isRequiredRule,
-        (val) => typeof val !== "number" || val <= 8 || "Value should not be bigger than 8"
-      ]));
-      return { args, validator };
-    },
-    template: `
-      <AntNumberInput
-        v-bind="args"
-        v-model="args.modelValue"
-        :errors="Array.isArray(args.errors) ? args.errors : validator.getErrors()"
-        @validate="(val) => validator.validate(val)"
-      />`
-  }),
-  args: {
-    modelValue: null,
-    steps: 1,
-    label: "Label",
-    description: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
-  }
-};
-export const Limited = {
-  render: Docs.render,
-  args: {
-    ...Docs.args,
-    modelValue: 50,
-    limiter: true,
-    max: 10,
-    validator: useFieldValidator([
-      (val) => val <= 10 || "Value should not be bigger than 10",
-      (val) => val <= 11 || "It should be really not bigger than 10!!!!"
-    ])
-  }
-};
-export const WithoutIndicators = {
-  render: Docs.render,
-  args: {
-    ...Docs.args,
-    indicators: false
-  }
-};

package/dist/runtime/components/form/__stories/AntRangeSlider.stories.d.ts

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