@antify/ui-module 1.6.0 → 1.7.2

package/dist/runtime/components/{form → inputs}/__stories/AntUnitInput.stories.mjs

@@ -1,11 +1,11 @@
 import { Size } from "../../../enums/Size.enum.mjs";
 import AntUnitInput from "../AntUnitInput.vue";
 import { faEuroSign } from "@fortawesome/free-solid-svg-icons";
-import { InputColorType } from "../../../enums/index.mjs";
+import { InputState } from "../../../enums/index.mjs";
 import { isRequiredRule, useFieldValidator } from "@antify/validate";
 import { reactive } from "vue";
 const meta = {
-  title: "Components/Forms/Unit Input",
+  title: "Inputs/Unit Input",
   component: AntUnitInput,
   parameters: { controls: { sort: "requiredFirst" } },
   argTypes: {
@@ -17,12 +17,12 @@ const meta = {
       description: "Will be displayed right to the input.<br>Use text or Font-awesome Icons.",
       table: { type: { summary: "string|IconDefinition" } }
     },
-    colorType: {
+    state: {
       control: { type: "select" },
-      options: Object.values(InputColorType)
+      options: Object.values(InputState)
     },
     size: {
-      control: { type: "radio" },
+      control: { type: "select" },
       options: Object.values(Size)
     },
     placeholder: {
@@ -40,18 +40,36 @@ export const Docs = {
   render: (args) => ({
     components: { AntUnitInput },
     setup() {
-      const validator = reactive(useFieldValidator([
-        isRequiredRule,
-        (val) => typeof val !== "number" || val <= 8 || "Value should not be bigger than 8"
-      ]));
-      return { args, validator };
+      return { args };
     },
     template: `
       <AntUnitInput
         v-bind="args"
         v-model="args.modelValue"
         :unit="args.unit"
-        :errors="Array.isArray(args.errors) ? args.errors : validator.getErrors()"
+      />`
+  }),
+  args: {
+    modelValue: null,
+    unit: "\u20AC",
+    label: "Label",
+    description: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
+  }
+};
+export const withValidator = {
+  render: (args) => ({
+    components: { AntUnitInput },
+    setup() {
+      const validator = reactive(useFieldValidator([isRequiredRule]));
+      return { args, validator, InputState };
+    },
+    template: `
+      <AntUnitInput
+        v-bind="args"
+        v-model="args.modelValue"
+        :unit="args.unit"
+        :state="args.state ? args.state : (validator.hasErrors() ? InputState.danger : undefined)"
+        :messages="Array.isArray(args.messages) ? args.messages : validator.getErrors()"
         @validate="(val) => validator.validate(val)"
       />`
   }),
@@ -63,16 +81,30 @@ export const Docs = {
   }
 };
 export const Limited = {
-  render: Docs.render,
+  render: (args) => ({
+    components: { AntUnitInput },
+    setup() {
+      const validator = reactive(useFieldValidator([
+        isRequiredRule,
+        (val) => val <= 10 || "Value should not be bigger than 10",
+        (val) => val <= 11 || "It should be really not bigger than 10!!!!"
+      ]));
+      return { args, validator };
+    },
+    template: `
+      <AntUnitInput
+        v-bind="args"
+        v-model="args.modelValue"
+        :unit="args.unit"
+        :errors="Array.isArray(args.errors) ? args.errors : validator.getErrors()"
+        @validate="(val) => validator.validate(val)"
+      />`
+  }),
   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!!!!"
-    ])
+    max: 10
   }
 };
 export const UnitAsIcon = {

package/dist/runtime/components/{form/AntCheckboxWidget/__types/AntCheckbox.d.ts → inputs/__types/AntCheckbox.types.d.ts}

@@ -4,3 +4,7 @@ export type AntCheckboxType = {
     disabled?: boolean;
     readonly?: boolean;
 };
+export declare enum AntCheckboxSize {
+    md = "md",
+    sm = "sm"
+}

package/dist/runtime/components/inputs/__types/AntCheckbox.types.mjs

@@ -0,0 +1,5 @@
+export var AntCheckboxSize = /* @__PURE__ */ ((AntCheckboxSize2) => {
+  AntCheckboxSize2["md"] = "md";
+  AntCheckboxSize2["sm"] = "sm";
+  return AntCheckboxSize2;
+})(AntCheckboxSize || {});

package/dist/runtime/components/inputs/__types/AntDateInput.types.d.ts

@@ -0,0 +1,7 @@
+export declare enum AntDateInputTypes {
+    date = "date",
+    datetimeLocal = "datetime-local",
+    month = "month",
+    time = "time",
+    week = "week"
+}

package/dist/runtime/components/inputs/__types/AntDateInput.types.mjs

@@ -0,0 +1,8 @@
+export var AntDateInputTypes = /* @__PURE__ */ ((AntDateInputTypes2) => {
+  AntDateInputTypes2["date"] = "date";
+  AntDateInputTypes2["datetimeLocal"] = "datetime-local";
+  AntDateInputTypes2["month"] = "month";
+  AntDateInputTypes2["time"] = "time";
+  AntDateInputTypes2["week"] = "week";
+  return AntDateInputTypes2;
+})(AntDateInputTypes || {});

package/dist/runtime/components/inputs/__types/AntRadio.types.d.ts

@@ -0,0 +1,13 @@
+import { InputState } from '../../../enums';
+export declare enum AntRadioSize {
+    md = "md",
+    sm = "sm"
+}
+export type AntRadioTypes = {
+    value: string;
+    label?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    state?: InputState;
+    [key: string]: unknown;
+};

package/dist/runtime/components/inputs/__types/AntRadio.types.mjs

@@ -0,0 +1,5 @@
+export var AntRadioSize = /* @__PURE__ */ ((AntRadioSize2) => {
+  AntRadioSize2["md"] = "md";
+  AntRadioSize2["sm"] = "sm";
+  return AntRadioSize2;
+})(AntRadioSize || {});

package/dist/runtime/components/inputs/__types/AntTagInput.types.d.ts

@@ -0,0 +1,5 @@
+export declare enum AntTagInputSize {
+    lg = "lg",
+    md = "md",
+    sm = "sm"
+}

package/dist/runtime/components/inputs/__types/AntTagInput.types.mjs

@@ -0,0 +1,6 @@
+export var AntTagInputSize = /* @__PURE__ */ ((AntTagInputSize2) => {
+  AntTagInputSize2["lg"] = "lg";
+  AntTagInputSize2["md"] = "md";
+  AntTagInputSize2["sm"] = "sm";
+  return AntTagInputSize2;
+})(AntTagInputSize || {});

package/dist/runtime/components/{form/__types/AntTextInput.type.d.ts → inputs/__types/AntTextInput.types.d.ts}

@@ -1,6 +1,5 @@
 export declare enum TextInputType {
     email = "email",
-    password = "password",
     tel = "tel",
     text = "text",
     url = "url"

package/dist/runtime/components/{form/__types/AntTextInput.type.mjs → inputs/__types/AntTextInput.types.mjs}

@@ -1,6 +1,5 @@
 export var TextInputType = /* @__PURE__ */ ((TextInputType2) => {
   TextInputType2["email"] = "email";
-  TextInputType2["password"] = "password";
   TextInputType2["tel"] = "tel";
   TextInputType2["text"] = "text";
   TextInputType2["url"] = "url";

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

@@ -0,0 +1,7 @@
+export * from './AntCheckbox.types';
+export * from './AntDateInput.types';
+export * from './AntRadio.types';
+export * from './AntSelect.types';
+export * from './AntSwitcher.types';
+export * from './AntTagInput.types';
+export * from './AntTextInput.types';

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

@@ -0,0 +1,7 @@
+export * from "./AntCheckbox.types.mjs";
+export * from "./AntDateInput.types.mjs";
+export * from "./AntRadio.types.mjs";
+export * from "./AntSelect.types.mjs";
+export * from "./AntSwitcher.types.mjs";
+export * from "./AntTagInput.types.mjs";
+export * from "./AntTextInput.types.mjs";

package/dist/runtime/components/layouts/AntNavLeftLayout.vue

@@ -2,12 +2,12 @@
 import {computed, useSlots} from 'vue';
 import AntNavbar from '../navbar/AntNavbar.vue';
 import type {RouteLocationRaw} from 'vue-router';
-import type {NavbarItem} from '../navbar/__types/NavbarItem';
+import type {NavbarItemTypes} from '../navbar/__types/NavbarItem.types';
 
 defineProps<{
-  navbarItems: NavbarItem[];
+  navbarItems: NavbarItemTypes[];
   logoRoute?: RouteLocationRaw;
-}>()
+}>();
 
 const hasLogoImageSlot = computed(() => useSlots()['logo-image'] || false);
 </script>

package/dist/runtime/components/navbar/AntNavbar.vue

@@ -1,25 +1,25 @@
 <script setup lang="ts">
 
 import { computed } from 'vue';
-import type { NavbarItem } from './__types/NavbarItem';
+import type { NavbarItemTypes } from './__types/NavbarItem.types';
 import AntNavbarItem from './AntNavbarItem.vue';
 
 defineProps<{
-  navbarItems: NavbarItem[]
+  navbarItems: NavbarItemTypes[]
 }>();
 
 const containerClasses = computed(() => ({
   'w-full h-full bg-white flex flex-col gap-1 p-1.5': true,
-}))
+}));
 
 </script>
 
 <template>
- <div :class="containerClasses">
-   <AntNavbarItem
-     v-for="(navbarItem, index) in navbarItems"
-     :key="`navbar-item-${index}`"
-     :navbar-item="navbarItem"
-   />
- </div>
+  <div :class="containerClasses">
+    <AntNavbarItem
+      v-for="(navbarItem, index) in navbarItems"
+      :key="`navbar-item-${index}`"
+      :navbar-item="navbarItem"
+    />
+  </div>
 </template>

package/dist/runtime/components/navbar/AntNavbarItem.vue

@@ -1,21 +1,21 @@
 <script setup lang="ts">
-import type {NavbarItem} from './__types/NavbarItem';
+import type {NavbarItemTypes} from './__types/NavbarItem.types';
 import {computed, ref} from 'vue';
 import AntIcon from '../AntIcon.vue';
 import {faChevronDown, faChevronUp} from '@fortawesome/free-solid-svg-icons';
 import AntTransitionCollapseHeight from '../transitions/AntTransitionCollapseHeight.vue';
 
 const props = defineProps<{
-  navbarItem: NavbarItem
-}>()
+  navbarItem: NavbarItemTypes
+}>();
 
 const itemClasses = computed(() => ({
   'w-full text-sm p-1.5 rounded-md cursor-pointer flex items-center flex-nowrap gap-1': true,
   'transition-colors hover:bg-neutral-100': true,
   'text-primary-500': props.navbarItem.active
-}))
+}));
 
-const open = ref(false)
+const open = ref(false);
 
 function itemClick(): void {
   if (props.navbarItem.click) {

package/dist/runtime/components/navbar/__types/{NavbarItem.d.ts → NavbarItem.types.d.ts}

@@ -1,10 +1,10 @@
 import type { IconDefinition } from '@fortawesome/free-solid-svg-icons';
 import type { RouteLocationRaw } from 'vue-router';
-export type NavbarItem = {
+export type NavbarItemTypes = {
     label: string;
     active?: boolean;
     to?: RouteLocationRaw;
     click?: () => void;
     icon?: IconDefinition;
-    children?: NavbarItem[];
+    children?: NavbarItemTypes[];
 };

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

@@ -0,0 +1 @@
+export * from './NavbarItem.types';

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

@@ -0,0 +1 @@
+export * from "./NavbarItem.types.mjs";

package/dist/runtime/components/table/AntTable.vue

@@ -1,14 +1,14 @@
 <script lang="ts" setup>
-import {AntTableSortDirection, type TableHeader} from './__types/TableHeader.type';
+import {AntTableSize, AntTableSortDirection, type TableHeader} from './__types/TableHeader.types';
 import {computed, ref, type Ref, watch} from 'vue';
 import {useVModel} from '@vueuse/core';
-import {ColorType} from '../../enums';
+import {State} from '../../enums';
 import AntTh from './AntTh.vue';
 import AntTd from './AntTd.vue';
 import AntSpinner from '../AntSpinner.vue';
 import AntSkeleton from '../AntSkeleton.vue';
 
-defineOptions({ inheritAttrs: false });
+defineOptions({inheritAttrs: false});
 
 const emits = defineEmits([
   'update:modelValue',
@@ -27,11 +27,13 @@ const props = withDefaults(
     loading?: boolean;
     selectableRows?: boolean;
     showLightVersion?: boolean;
+    size: AntTableSize
   }>(), {
     rowKey: 'id',
     loading: false,
     selectableRows: false,
     showLightVersion: false,
+    size: AntTableSize.md
   });
 
 const selected: Ref<Record<string, unknown> | undefined> = useVModel(props, 'selectedRow', emits);
@@ -45,10 +47,10 @@ const _headers = computed(() => {
   // }
 
   return props.headers;
-})
+});
 
 watch(() => props.showLightVersion, (val) => {
-  setTimeout(() => _showLightVersion.value = val, val ? 200 : 400)
+  setTimeout(() => _showLightVersion.value = val, val ? 200 : 400);
 });
 
 function sortTable(header: TableHeader, newDirection: AntTableSortDirection) {
@@ -103,6 +105,7 @@ function rowClick(elem: Record<string, unknown>): void {
                 v-if="!_showLightVersion || (_showLightVersion && header.lightVersion)"
                 :key="`table-header-${header.identifier}-${index}`"
                 :header="header"
+                :size="size"
                 @sort="sortTable"
               >
                 <template #headerContent>
@@ -144,6 +147,7 @@ function rowClick(elem: Record<string, unknown>): void {
                 :header="header"
                 :element="elem"
                 :align="header.align"
+                :size="size"
                 @click="rowClick(elem)"
               >
                 <template #beforeCellContent="props">
@@ -197,7 +201,7 @@ function rowClick(elem: Record<string, unknown>): void {
     >
       <AntSpinner
         class="!w-24 !h-24"
-        :color-type="ColorType.primary"
+        :state="State.primary"
       />
     </div>
 

package/dist/runtime/components/table/AntTableSortButton.vue

@@ -1,38 +1,48 @@
 <script setup lang="ts">
 
-import AntIcon from '../AntIcon.vue';
-import { faAngleDown, faAngleUp, faMinus } from '@fortawesome/free-solid-svg-icons';
-import { IconSize } from '../__types';
-import { AntTableSortDirection } from './__types/TableHeader.type';
+import {faAngleDown, faAngleUp, faMinus} from '@fortawesome/free-solid-svg-icons';
+import {AntTableSize, AntTableSortDirection} from './__types/TableHeader.types';
+import AntButton from '../buttons/AntButton.vue';
+import {computed} from 'vue';
+import {Size} from '../../enums/Size.enum';
 
-defineEmits([ 'sortClick' ])
-withDefaults(
+defineEmits(['sortClick']);
+const props = withDefaults(
   defineProps<{
     sortDirection?: AntTableSortDirection
+    size: AntTableSize
   }>(), {
-    sortDirection: AntTableSortDirection.neutral
+    sortDirection: AntTableSortDirection.neutral,
+    size: AntTableSize.md
   });
+
+const buttonSize = computed(() => {
+  if (props.size === AntTableSize.lg) {
+    return Size.sm;
+  } else if (props.size === AntTableSize.md) {
+    return Size.xs;
+  } else {
+    return Size.xs2;
+  }
+});
+const buttonIcon = computed(() => {
+  if (props.sortDirection === AntTableSortDirection.asc) {
+    return faAngleDown;
+  }
+
+  if (props.sortDirection === AntTableSortDirection.desc) {
+    return faAngleUp;
+  }
+
+  if (props.sortDirection === AntTableSortDirection.neutral) {
+    return faMinus;
+  }
+});
 </script>
 
 <template>
-  <button
-    class="bg-white text-for-white-bg-font rounded h-[26px] w-[26px] flex items-center justify-center"
-    @click="$emit('sortClick')"
-  >
-    <AntIcon
-      v-if="sortDirection === AntTableSortDirection.asc"
-      :icon="faAngleDown"
-      :size="IconSize.sm"
-    />
-    <AntIcon
-      v-if="sortDirection === AntTableSortDirection.desc"
-      :icon="faAngleUp"
-      :size="IconSize.sm"
-    />
-    <AntIcon
-      v-if="sortDirection === AntTableSortDirection.neutral"
-      :icon="faMinus"
-      :size="IconSize.sm"
-    />
-  </button>
+  <AntButton
+    :size="buttonSize"
+    :icon-left="buttonIcon"
+  />
 </template>

package/dist/runtime/components/table/AntTd.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 
-import { AntTableAlign, AntTableRowTypes, type TableHeader } from './__types/TableHeader.type';
-import { computed } from 'vue';
-import type { RouteLocationRaw } from 'vue-router';
+import {AntTableAlign, AntTableRowTypes, AntTableSize, type TableHeader} from './__types/TableHeader.types';
+import {computed} from 'vue';
+import type {RouteLocationRaw} from 'vue-router';
 
 const props =
   withDefaults(
@@ -10,15 +10,20 @@ const props =
       element: Record<string, unknown>;
       header: TableHeader;
       align?: AntTableAlign
+      size: AntTableSize
     }>(), {
-      align: AntTableAlign.left
+      align: AntTableAlign.left,
+      size: AntTableSize.md
     });
 
 const cellClasses = computed(() => ({
-  'whitespace-nowrap px-2.5 py-0 h-[40px] text-sm font-medium relative': true,
+  'whitespace-nowrap text-sm font-medium relative': true,
   'text-right': props.align === AntTableAlign.right,
-  'text-center': props.align === AntTableAlign.center
-}))
+  'text-center': props.align === AntTableAlign.center,
+  'px-2.5 py-0 h-10': props.size === AntTableSize.lg,
+  'px-2 py-0 h-9': props.size === AntTableSize.md,
+  'px-1.5 py-0 h-8': props.size === AntTableSize.sm
+}));
 </script>
 
 <template>
@@ -40,8 +45,11 @@ const cellClasses = computed(() => ({
     <div
       v-else-if="header.type === AntTableRowTypes.link && header.toProp"
     >
-      <router-link :to="element[header.toProp] as RouteLocationRaw" class="absolute inset-0">
-      </router-link>
+      <RouterLink
+        :to="element[header.toProp] as RouteLocationRaw"
+        class="absolute inset-0"
+      >
+      </RouterLink>
       {{ element[header.identifier] }}
     </div>
 
@@ -55,7 +63,10 @@ const cellClasses = computed(() => ({
       v-else-if="header.type === AntTableRowTypes.slot"
       :class="header.rowClassList"
     >
-      <slot name="cellContent" v-bind="{ element, header }"></slot>
+      <slot
+        name="cellContent"
+        v-bind="{ element, header }"
+      ></slot>
     </div>
 
     <slot

package/dist/runtime/components/table/AntTh.vue

@@ -1,32 +1,35 @@
 <script setup lang="ts">
 
-import { AntTableAlign, AntTableSortDirection, type TableHeader } from './__types/TableHeader.type';
-import { computed, ref, type Ref } from 'vue';
+import {AntTableAlign, AntTableSize, AntTableSortDirection, type TableHeader} from './__types/TableHeader.types';
+import {computed, ref, type Ref} from 'vue';
 import AntTableSortButton from './AntTableSortButton.vue';
 
-defineEmits([ 'sort' ])
+defineEmits([ 'sort' ]);
 const props = defineProps<{
   header: TableHeader
+	size: AntTableSize
 }>();
 
-const headerClasses = computed(() => {
-  const classes = {
+const headerClasses = computed(() => ({
     [props.header.headerClassList || '']: true,
-    'px-2.5 py-0 h-[40px] text-sm text-neutral-100-font uppercase font-semi-bold': true,
+    'text-sm text-neutral-100-font uppercase font-semi-bold': true,
     'text-left': !props.header.align || props.header.align === AntTableAlign.left,
     'text-center': props.header.align === AntTableAlign.center,
     'text-right': props.header.align === AntTableAlign.right,
-  };
-
-  return classes;
-});
+    'px-2.5 py-0 h-10': props.size === AntTableSize.lg,
+		'px-2 py-0 h-9': props.size === AntTableSize.md,
+		'px-1.5 py-0 h-8': props.size === AntTableSize.sm
+}));
 
 const cellClasses = computed(() => ({
-  'flex gap-2.5 items-center': true,
+  'flex items-center': true,
   'justify-start': !props.header.align || props.header.align === AntTableAlign.left,
   'justify-center': props.header.align === AntTableAlign.center,
   'justify-end': props.header.align === AntTableAlign.right,
-}))
+	'gap-2.5': props.size === AntTableSize.lg,
+	'gap-2': props.size === AntTableSize.md,
+	'gap-1.5': props.size === AntTableSize.sm,
+}));
 
 // TODO:: Initial sort should be possible with this
 const sortDirection: Ref<AntTableSortDirection> = ref(AntTableSortDirection.neutral);
@@ -53,14 +56,18 @@ function getNewSortDirection(): AntTableSortDirection {
     :class="headerClasses"
   >
     <div :class="cellClasses">
-      <slot name="headerContent" v-bind="header">
+      <slot
+        name="headerContent"
+        v-bind="header"
+      >
         {{ header.title }}
       </slot>
 
       <AntTableSortButton
         v-if="header.sortable"
-        @sort-click="$emit('sort', header, getNewSortDirection())"
         :sort-direction="sortDirection"
+        :size="size"
+        @sort-click="$emit('sort', header, getNewSortDirection())"
       />
     </div>
   </th>