@antify/ui-module 1.6.0 → 1.7.2

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

@@ -1,106 +0,0 @@
-import { AntTagInput } from "../index.mjs";
-import { ref } from "vue";
-import { InputColorType, Size } from "../../../enums/index.mjs";
-const meta = {
-  title: "Components/Forms/Tag input",
-  component: AntTagInput,
-  argTypes: {
-    modelValue: {
-      control: "text",
-      table: { type: { summary: "string|null" } }
-    },
-    colorType: {
-      control: { type: "select" },
-      options: Object.values(InputColorType)
-    },
-    size: {
-      control: { type: "radio" },
-      options: Object.values(Size),
-      table: { defaultValue: { summary: Size.md } }
-    },
-    placeholder: {
-      table: { defaultValue: { summary: "this.label" } }
-    },
-    createCallback: {
-      control: "none",
-      description: "If allowCreate is true the createCallback needs to be specified. It will be called when the user creates a new tag. It should return a promise that resolves to a SelectOption.",
-      table: {
-        type: {
-          summary: "(item: string) => Promise<SelectOption>",
-          detail: `
-Params:
-item: string - the label of the new tag
-
-Returns:
-Promise<SelectOption> - the new tag as a SelectOption
-          `
-        }
-      }
-    }
-  }
-};
-export default meta;
-const options = [
-  {
-    label: "Tag",
-    value: "1"
-  },
-  {
-    label: "Cat",
-    value: "2"
-  },
-  {
-    label: "Dog",
-    value: "3"
-  },
-  {
-    label: "Chicken",
-    value: "4"
-  }
-];
-export const Docs = {
-  render: (args) => ({
-    components: { AntTagInput },
-    setup() {
-      const value = ref([]);
-      return {
-        args,
-        value
-      };
-    },
-    template: `
-      <div style="width: 360px">
-      <AntTagInput v-model="value" v-bind="args"/>
-      </div>
-    `
-  }),
-  args: {
-    options
-  }
-};
-export const AllowCreate = {
-  render: Docs.render,
-  args: {
-    options,
-    allowCreate: true,
-    createCallback(item) {
-      return new Promise((resolve) => {
-        resolve({ label: item, value: `${Math.random()}-${item}` });
-      });
-    }
-  }
-};
-export const Disabled = {
-  render: Docs.render,
-  args: {
-    options,
-    disabled: true
-  }
-};
-export const Skeleton = {
-  render: Docs.render,
-  args: {
-    options,
-    skeleton: true
-  }
-};

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

@@ -1,68 +0,0 @@
-import { Size } from "../../../enums/Size.enum.mjs";
-import AntTextInput from "../AntTextInput.vue";
-import { isRequiredRule, notBlankRule, useFieldValidator } from "@antify/validate";
-import { TextInputType } from "../__types/AntTextInput.type.mjs";
-import { InputColorType } from "../../../enums/index.mjs";
-import { reactive } from "vue";
-const meta = {
-  title: "Components/Forms/Text Input",
-  component: AntTextInput,
-  parameters: { controls: { sort: "requiredFirst" } },
-  argTypes: {
-    modelValue: {
-      control: "text",
-      table: { type: { summary: "string|null" } }
-    },
-    colorType: {
-      control: { type: "select" },
-      options: Object.values(InputColorType)
-    },
-    size: {
-      control: { type: "radio" },
-      options: Object.values(Size),
-      table: { defaultValue: { summary: Size.md } }
-    },
-    placeholder: {
-      table: { defaultValue: { summary: "this.label" } }
-    },
-    type: {
-      control: { type: "select" },
-      options: Object.values(TextInputType),
-      table: { defaultValue: { summary: TextInputType.text } }
-    }
-  }
-};
-export default meta;
-export const Docs = {
-  render: (args) => ({
-    components: { AntTextInput },
-    setup() {
-      const validator = reactive(useFieldValidator([isRequiredRule, notBlankRule]));
-      return { args, validator };
-    },
-    template: `
-      <AntTextInput
-        v-bind="args"
-        v-model="args.modelValue"
-        :errors="Array.isArray(args.errors) ? args.errors : validator.getErrors()"
-        @validate="(val) => validator.validate(val)"
-      />`
-  }),
-  args: {
-    modelValue: null,
-    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: "A to long value",
-    max: 10,
-    limiter: true,
-    validator: useFieldValidator([
-      (val) => val.length <= 10 || "Max. 10 characters allowed"
-    ])
-  }
-};

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

@@ -1,3 +0,0 @@
-export * from './AntSelect.type';
-export * from './AntSwitcher.type';
-export * from './AntTextInput.type';

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

@@ -1,3 +0,0 @@
-export * from "./AntSelect.type.mjs";
-export * from "./AntSwitcher.type.mjs";
-export * from "./AntTextInput.type.mjs";

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

@@ -1,12 +0,0 @@
-import AntButton from '../buttons/AntButton.vue';
-import AntNumberInput from './AntNumberInput.vue';
-import AntRangeSlider from './AntRangeSlider.vue';
-import AntSwitcher from './AntSwitcher.vue';
-import AntSearch from './AntSearch.vue';
-import AntSelect from './AntSelect.vue';
-import AntSwitch from './AntSwitch.vue';
-import AntTagInput from './AntTagInput.vue';
-import AntTextarea from './AntTextarea.vue';
-import AntTextInput from './AntTextInput.vue';
-import AntUnitInput from './AntUnitInput.vue';
-export { AntButton, AntNumberInput, AntRangeSlider, AntSwitcher, AntSearch, AntSelect, AntSwitch, AntTagInput, AntTextarea, AntTextInput, AntUnitInput, };

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

@@ -1,24 +0,0 @@
-import AntButton from "../buttons/AntButton.vue";
-import AntNumberInput from "./AntNumberInput.vue";
-import AntRangeSlider from "./AntRangeSlider.vue";
-import AntSwitcher from "./AntSwitcher.vue";
-import AntSearch from "./AntSearch.vue";
-import AntSelect from "./AntSelect.vue";
-import AntSwitch from "./AntSwitch.vue";
-import AntTagInput from "./AntTagInput.vue";
-import AntTextarea from "./AntTextarea.vue";
-import AntTextInput from "./AntTextInput.vue";
-import AntUnitInput from "./AntUnitInput.vue";
-export {
-  AntButton,
-  AntNumberInput,
-  AntRangeSlider,
-  AntSwitcher,
-  AntSearch,
-  AntSelect,
-  AntSwitch,
-  AntTagInput,
-  AntTextarea,
-  AntTextInput,
-  AntUnitInput
-};

package/dist/runtime/enums/ColorType.enum.mjs

@@ -1,18 +0,0 @@
-export var ColorType = /* @__PURE__ */ ((ColorType2) => {
-  ColorType2["base"] = "base";
-  ColorType2["primary"] = "primary";
-  ColorType2["secondary"] = "secondary";
-  ColorType2["danger"] = "danger";
-  ColorType2["info"] = "info";
-  ColorType2["success"] = "success";
-  ColorType2["warning"] = "warning";
-  return ColorType2;
-})(ColorType || {});
-export var InputColorType = /* @__PURE__ */ ((InputColorType2) => {
-  InputColorType2["base"] = "base";
-  InputColorType2["danger"] = "danger";
-  InputColorType2["info"] = "info";
-  InputColorType2["success"] = "success";
-  InputColorType2["warning"] = "warning";
-  return InputColorType2;
-})(InputColorType || {});

package/dist/runtime/types/AntListGroupItem.type.d.ts

@@ -1,11 +0,0 @@
-export declare enum ListGroupItemColorType {
-    danger = "danger",
-    info = "info",
-    neutral700 = "neutral-700",
-    neutral300 = "neutral-300",
-    neutral50 = "neutral-50",
-    primary = "primary",
-    secondary = "secondary",
-    success = "success",
-    warning = "warning"
-}

package/dist/runtime/types/AntListGroupItem.type.mjs

@@ -1,12 +0,0 @@
-export var ListGroupItemColorType = /* @__PURE__ */ ((ListGroupItemColorType2) => {
-  ListGroupItemColorType2["danger"] = "danger";
-  ListGroupItemColorType2["info"] = "info";
-  ListGroupItemColorType2["neutral700"] = "neutral-700";
-  ListGroupItemColorType2["neutral300"] = "neutral-300";
-  ListGroupItemColorType2["neutral50"] = "neutral-50";
-  ListGroupItemColorType2["primary"] = "primary";
-  ListGroupItemColorType2["secondary"] = "secondary";
-  ListGroupItemColorType2["success"] = "success";
-  ListGroupItemColorType2["warning"] = "warning";
-  return ListGroupItemColorType2;
-})(ListGroupItemColorType || {});

package/dist/runtime/types/AntTag.type.d.ts

@@ -1,7 +0,0 @@
-export declare enum TagColorType {
-    danger = "danger",
-    info = "info",
-    base = "base",
-    success = "success",
-    warning = "warning"
-}

package/dist/runtime/types/AntTag.type.mjs

@@ -1,8 +0,0 @@
-export var TagColorType = /* @__PURE__ */ ((TagColorType2) => {
-  TagColorType2["danger"] = "danger";
-  TagColorType2["info"] = "info";
-  TagColorType2["base"] = "base";
-  TagColorType2["success"] = "success";
-  TagColorType2["warning"] = "warning";
-  return TagColorType2;
-})(TagColorType || {});

package/dist/runtime/types/Checkbox.type.d.ts

@@ -1,8 +0,0 @@
-export type Checkbox = {
-    id?: string;
-    value?: any;
-    color?: string;
-    label?: string;
-    description?: string;
-    legend?: string;
-};

package/dist/runtime/types/NavItem.type.d.ts

@@ -1,9 +0,0 @@
-import { type RouteLocationRaw } from 'vue-router';
-export type NavItem = {
-    icon?: object;
-    label: string;
-    route?: RouteLocationRaw;
-    active: boolean;
-    subItems?: NavItem[];
-    clickHandler?: (payload: MouseEvent) => void;
-};

package/dist/runtime/types/RadioButton.type.d.ts

@@ -1,5 +0,0 @@
-export type RadioButton = {
-    id: string;
-    label: string;
-    value: string;
-};

package/dist/runtime/types/Tabs.type.d.ts

@@ -1,6 +0,0 @@
-import { type RouteLocationRaw } from 'vue-router';
-export type TabsType = {
-    name: string;
-    to?: RouteLocationRaw;
-    current: boolean;
-};

package/dist/runtime/types/Toaster.type.d.ts

@@ -1,6 +0,0 @@
-import { InputColorType } from '../enums';
-export type Toaster = {
-    id: string;
-    message: string;
-    type?: InputColorType;
-};

package/dist/runtime/types/index.d.ts

@@ -1,7 +0,0 @@
-export * from './AntListGroupItem.type';
-export * from './AntTag.type';
-export * from './Checkbox.type';
-export * from './NavItem.type';
-export * from './RadioButton.type';
-export * from './Tabs.type';
-export * from './Toaster.type';

package/dist/runtime/types/index.mjs

@@ -1,7 +0,0 @@
-export * from "./AntListGroupItem.type.mjs";
-export * from "./AntTag.type.mjs";
-export * from "./Checkbox.type.mjs";
-export * from "./NavItem.type.mjs";
-export * from "./RadioButton.type.mjs";
-export * from "./Tabs.type.mjs";
-export * from "./Toaster.type.mjs";

package/src/runtime/components/form/AntCheckboxWidget/AntCheckbox.vue

@@ -1,166 +0,0 @@
-<script lang="ts" setup>
-import { useVModel } from '@vueuse/core';
-import { AntField } from '../Elements';
-import { InputColorType, Size } from '../../../enums';
-import AntSkeleton from '../../AntSkeleton.vue';
-import { computed, onMounted, watch } from 'vue';
-import { handleEnumValidation } from '../../../handler';
-
-import { faCheck } from '@fortawesome/free-solid-svg-icons';
-import AntIcon from '../../AntIcon.vue';
-import { IconSize } from '../../__types';
-import { FieldValidator } from '@antify/validate';
-
-const emits = defineEmits([ 'update:modelValue', 'update:skeleton' ]);
-const props =
-  withDefaults(
-    defineProps<{
-      modelValue: boolean;
-      valueLabel?: string;
-      label?: string;
-      description?: string;
-      colorType?: InputColorType;
-      size?: Size,
-      skeleton?: boolean;
-      disabled?: boolean;
-      readonly?: boolean;
-      validator?: FieldValidator;
-    }>(), {
-      colorType: InputColorType.base,
-      size: Size.md,
-      skeleton: false,
-      disabled: false,
-      readonly: false,
-    });
-
-const _value = useVModel(props, 'modelValue', emits);
-const hasAction = computed(() => (!props.skeleton && !props.readonly && !props.disabled));
-const inputClasses = computed(() => {
-  const classes: { [key: string]: boolean } = {
-    'relative inline-flex flex-shrink-0 bg-neutral-100 border-0': true,
-    'outline outline-1 outline-offset-[-1px] outline-neutral-300 rounded': true,
-    'focus:ring-offset-0': true,
-    'invisible': props.skeleton,
-    'cursor-pointer': hasAction.value,
-    'focus:ring-2': props.size === Size.sm && hasAction.value,
-    'focus:ring-4': props.size === Size.md && hasAction.value,
-    'h-5 w-5': props.size === Size.md,
-    'h-4 w-4': props.size === Size.sm,
-    'cursor-not-allowed opacity-50': props.disabled
-  };
-
-  const focusColorVariant = {
-    [InputColorType.base]: 'text-primary-500 focus:ring-primary-100',
-    [InputColorType.danger]: 'text-danger-500 focus:ring-danger-100',
-    [InputColorType.info]: 'text-info-500 focus:ring-info-100',
-    [InputColorType.success]: 'text-success-500 focus:ring-success-100',
-    [InputColorType.warning]: 'text-warning-500 focus:ring-warning-100',
-  };
-
-  const activeColorVariant = {
-    [InputColorType.base]: 'text-primary-500 outline-primary-500 focus:outline-primary-500',
-    [InputColorType.danger]: 'text-danger-500 outline-danger-500 focus:outline-danger-500',
-    [InputColorType.info]: 'text-info-500 outline-info-500 focus:outline-info-500',
-    [InputColorType.success]: 'text-success-500 outline-success-500 focus:outline-success-500',
-    [InputColorType.warning]: 'text-warning-500 outline-warning-500 focus:outline-warning-500',
-  }
-
-  classes[focusColorVariant[props.colorType]] = hasAction.value;
-  classes[activeColorVariant[props.colorType]] = _value.value;
-
-  return classes;
-});
-
-const valueClass = computed(() => {
-  const classes = {
-    'text-sm': true,
-    'cursor-not-allowed opacity-50': props.disabled,
-  };
-
-  return classes;
-});
-
-watch(_value, () => {
-  props.validator?.validate(_value.value);
-});
-
-onMounted(() => {
-  handleEnumValidation(props.size, Size, 'size');
-  handleEnumValidation(props.colorType, InputColorType, 'colorType');
-});
-</script>
-
-<template>
-  <AntField
-    :label="label"
-    :description="description"
-    :skeleton="skeleton"
-    :color-type="colorType"
-    :validator="validator"
-    :size="size"
-    :expanded="false"
-  >
-    <div class="flex items-center gap-1.5">
-      <div class="relative full-height flex items-center">
-        <input
-          v-model="_value"
-          :class="inputClasses"
-          type="checkbox"
-          :aria-checked="_value"
-          :disabled="disabled || readonly"
-        />
-
-        <AntIcon
-          v-if="_value"
-          :icon="faCheck"
-          class="absolute !text-white pointer-events-none"
-          :size="size as unknown as IconSize"
-        />
-
-        <AntSkeleton
-          v-if="skeleton"
-          absolute
-          rounded
-        />
-      </div>
-
-      <div class="relative">
-        <span :class="valueClass">
-          {{ valueLabel }}
-        </span>
-
-        <AntSkeleton
-          v-if="skeleton"
-          absolute
-          rounded
-        />
-      </div>
-    </div>
-  </AntField>
-</template>
-
-<style scoped>
-input[type="checkbox"] {
-  -webkit-appearance: none;
-  appearance: none;
-
-  position: relative;
-}
-
-input[type="checkbox"]::before {
-  content: "";
-
-  position: absolute;
-
-  width: 100%;
-  height: 100%;
-  transform: scale(0);
-  transition: 120ms transform;
-  background: currentColor;
-  border-radius: inherit;
-}
-
-input[type="checkbox"]:checked::before {
-  transform: scale(1);
-}
-</style>

package/src/runtime/components/form/AntCheckboxWidget/AntCheckboxGroup.vue

@@ -1,91 +0,0 @@
-<script setup lang="ts">
-import { type AntCheckboxType } from './__types/AntCheckbox';
-import { AntField } from '../Elements';
-import { useVModel } from '@vueuse/core';
-import AntCheckbox from './AntCheckbox.vue';
-import { computed, watch } from 'vue';
-import { Direction } from '../../../enums/Direction.enum';
-import { InputColorType, Size } from '../../../enums';
-import { FieldValidator } from '@antify/validate';
-
-const emits = defineEmits(['update:modelValue'])
-const props = withDefaults(
-  defineProps<{
-    modelValue: string[];
-    checkboxes?: AntCheckboxType[];
-    label?: string;
-    description?: string;
-    direction?: Direction;
-    colorType?: InputColorType;
-    size?: Size,
-    skeleton?: boolean;
-    readonly?: boolean;
-    disabled?: boolean;
-    validator?: FieldValidator;
-  }>(),
-  {
-    direction: Direction.column,
-    colorType: InputColorType.base,
-    size: Size.md,
-    skeleton: false,
-    readonly: false,
-    disabled: false
-  }
-)
-
-const _value = useVModel(props, 'modelValue', emits);
-const _colorType = computed(() => props.validator?.hasErrors() ? InputColorType.danger : props.colorType);
-const containerClasses = computed(() => {
-  const classes = {
-    'flex gap-2.5': true,
-    'flex-row': props.direction === Direction.row,
-    'flex-col': props.direction === Direction.column
-  };
-
-  return classes;
-})
-
-function updateValue(value: string) {
-  const index = _value.value.indexOf(value);
-
-  if (index === -1) {
-    _value.value.push(value);
-  } else {
-    _value.value.splice(index, 1);
-  }
-}
-
-watch(_value, () => {
-  props.validator?.validate(_value.value);
-}, {
-  deep: true,
-});
-
-</script>
-
-<template>
-  <AntField
-    :label="label"
-    :description="description"
-    :skeleton="skeleton"
-    :validator="validator"
-    :color-type="_colorType"
-    :size="size"
-    label-for="noop"
-  >
-    <div :class="containerClasses">
-      <AntCheckbox
-        v-for="(checkbox, index) in checkboxes"
-        :key="`checkbox-group-${index}`"
-        :model-value="_value.indexOf(checkbox.value) !== -1"
-        :value-label="checkbox.label"
-        :size="size"
-        :color-type="_colorType"
-        :skeleton="skeleton"
-        :disabled="disabled || checkbox.disabled"
-        :readonly="readonly || checkbox.readonly"
-        @update:model-value="updateValue(checkbox.value)"
-      />
-    </div>
-  </AntField>
-</template>

package/src/runtime/components/form/AntFormGroupLabel.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="text-primary-500 text-xl font-semibold">
-    <slot/>
-  </div>
-</template>