@antify/ui-module 1.5.1 → 1.7.1

package/dist/runtime/components/buttons/__stories/AntSaveAndNewButton.stories.mjs

@@ -6,7 +6,7 @@ const meta = {
   parameters: { controls: { sort: "requiredFirst" } },
   argTypes: {
     size: {
-      control: { type: "radio" },
+      control: { type: "select" },
       options: Object.values(Size)
     },
     grouped: {

package/dist/runtime/components/buttons/__stories/AntSaveButton.stories.mjs

@@ -6,7 +6,7 @@ const meta = {
   parameters: { controls: { sort: "requiredFirst" } },
   argTypes: {
     size: {
-      control: { type: "radio" },
+      control: { type: "select" },
       options: Object.values(Size)
     },
     grouped: {

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

@@ -1 +1 @@
-export * from './AntButton.type';
+export * from './AntButton.types';

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

@@ -1 +1 @@
-export * from "./AntButton.type.mjs";
+export * from "./AntButton.types.mjs";

package/dist/runtime/components/crud/AntCrudDetailActions.vue

@@ -18,7 +18,7 @@ withDefaults(defineProps<{
 
 <template>
   <div
-    class="flex justify-between p-2.5 gap-2.5 bg-white"
+    class="flex justify-between p-2 gap-2 bg-white"
     data-e2e="crud-detail-actions"
   >
     <div class="flex gap-2.5">

package/dist/runtime/components/crud/AntCrudDetailNav.vue

@@ -23,7 +23,7 @@ const dialogOpen = ref(false);
 
 <template>
   <div
-    class="flex justify-between items-stretch gap-2.5 bg-white"
+    class="flex justify-between items-stretch gap-2 bg-white"
     data-e2e="crud-detail-nav"
   >
     <slot name="tabs">
@@ -32,7 +32,7 @@ const dialogOpen = ref(false);
       />
     </slot>
 
-    <div class="flex gap-2.5 pr-2.5 py-2.5">
+    <div class="flex gap-2 pr-2 py-2">
       <slot name="buttons">
         <slot name="before-delete-button" />
 

package/dist/runtime/components/crud/AntCrudTableFilter.vue

@@ -1,12 +1,12 @@
 <script lang="ts" setup>
 // TODO:: This component works only with vue-router. Make it work in storybook.
-import AntSearch from '../form/AntSearch.vue';
+import AntSearch from '../inputs/AntSearch.vue';
 import AntCreateButton from '../buttons/AntCreateButton.vue';
 import AntDropdown from '../AntDropdown.vue';
 import {computed, ref, watch} from 'vue';
 import AntButton from '../buttons/AntButton.vue';
 import {faFilter, faMultiply} from '@fortawesome/free-solid-svg-icons';
-import {ColorType, Grouped, Position} from '../../enums';
+import {State, Grouped, Position} from '../../enums';
 import {useRoute, useRouter} from 'vue-router';
 
 const props = withDefaults(defineProps<{
@@ -29,14 +29,14 @@ const router = useRouter();
 const route = useRoute();
 
 const showDropdown = ref(false);
-const _fullWidth = ref(props.fullWidth)
+const _fullWidth = ref(props.fullWidth);
 const search = computed({
 	get: () => route.query[props.searchQuery] as string || '',
 	set: (value) => {
 		const query = {
 			...route.query,
 			[props.searchQuery]: value
-		}
+		};
 
 		if (!value) {
 			delete query[props.searchQuery];
@@ -46,23 +46,23 @@ const search = computed({
 			await router.replace({
 				...route,
 				query
-			})
+			});
 
-			emit('search', value)
-		})()
+			emit('search', value);
+		})();
 	}
-})
+});
 
 watch(() => props.fullWidth, (val) => {
 	setTimeout(() => {
-		_fullWidth.value = val
-	}, val ? 250 : 300)
-})
+		_fullWidth.value = val;
+	}, val ? 250 : 300);
+});
 </script>
 
 <template>
   <div
-    class="flex h-full items-center p-2.5 gap-2.5 bg-white"
+    class="flex h-full items-center p-2 gap-2 bg-white"
     data-e2e="crud-table-filter"
   >
     <div
@@ -83,7 +83,7 @@ watch(() => props.fullWidth, (val) => {
       >
         <div class="flex">
           <AntButton
-            :color-type="hasFilter ? ColorType.info : ColorType.base"
+            :state="hasFilter ? State.info : State.base"
             :grouped="hasFilter ? Grouped.left : Grouped.none"
             :skeleton="skeleton"
             :icon-left="faFilter"
@@ -92,7 +92,7 @@ watch(() => props.fullWidth, (val) => {
 
           <AntButton
             v-if="hasFilter"
-            :color-type="ColorType.info"
+            :state="State.info"
             :grouped="Grouped.right"
             :skeleton="skeleton"
             :icon-left="faMultiply"

package/dist/runtime/components/crud/AntCrudTableNav.vue

@@ -4,14 +4,14 @@
  * TODO:: test me in storybook through vue router
  * TODO:: fix ts errors
  */
-import {useRouter, useRoute} from 'vue-router'
+import {useRouter, useRoute} from 'vue-router';
 import AntPagination from '../AntPagination.vue';
 import {computed, ref, watch} from 'vue';
-import AntSelect from '../form/AntSelect.vue';
+import AntSelect from '../inputs/AntSelect.vue';
 import AntSkeleton from '../AntSkeleton.vue';
-import {type SelectOption} from '../form/__types';
+import {type SelectOption} from '../inputs/__types';
 
-const emit = defineEmits(['changeItemsPerPage', 'changePage'])
+const emit = defineEmits(['changeItemsPerPage', 'changePage']);
 const props = withDefaults(
   defineProps<{
     count: number | null,
@@ -28,55 +28,64 @@ const props = withDefaults(
     validItemsPerPage: () => [20, 50, 100, 200],
     skeleton: false
   }
-)
+);
 
-const route = useRoute()
-const router = useRouter()
+const route = useRoute();
+const router = useRouter();
 const itemsPerPageOptions = computed(() =>
   props.validItemsPerPage.map(item => ({
     label: `${item}`,
     value: item
   }) as SelectOption)
-)
+);
 const page = computed(() => {
-  const _page = route.query[props.pageQuery] >= 1 ? Number.parseInt(route.query[props.pageQuery]) : 1
+  const _page = route.query[props.pageQuery] >= 1 ? Number.parseInt(route.query[props.pageQuery]) : 1;
 
   if (_page <= 0 || _page > pages.value) {
-    return 1
+    return 1;
   }
 
-  return _page
-})
+  return _page;
+});
 const itemsPerPage = computed({
   get() {
     return route.query[props.itemsPerPageQuery] ?
       Number.parseInt(route.query[props.itemsPerPageQuery]) :
-      props.validItemsPerPage[0]
+      props.validItemsPerPage[0];
   },
   set(val) {
-    const query = {...route.query}
-    query[props.itemsPerPageQuery] = `${val}`
+    const query = {...route.query};
+    query[props.itemsPerPageQuery] = `${val}`;
     delete query[props.pageQuery];
 
     (async () => {
       await router.push({
         ...route,
         query
-      })
+      });
 
-      emit('changeItemsPerPage', val)
-    })()
+      emit('changeItemsPerPage', val);
+    })();
   }
-})
-const fromItems = computed(() => (itemsPerPage.value * (page.value - 1)))
-const pages = computed(() => Math.ceil(props.count / itemsPerPage.value))
-const _fullWidth = ref(props.fullWidth)
+});
+const fromItems = computed(() => (itemsPerPage.value * (page.value - 1)) + 1);
+const toItems = computed(() => {
+	const items = itemsPerPage.value * page.value;
+
+	if (page.value === pages.value &&  items > props.count) {
+		return props.count;
+	}
+
+	return itemsPerPage.value * page.value;
+});
+const pages = computed(() => Math.ceil(props.count / itemsPerPage.value));
+const _fullWidth = ref(props.fullWidth);
 
 watch(() => props.fullWidth, (val) => {
   setTimeout(() => {
-    _fullWidth.value = val
-  }, val ? 300 : 200)
-})
+    _fullWidth.value = val;
+  }, val ? 300 : 200);
+});
 </script>
 
 <template>
@@ -85,7 +94,7 @@ watch(() => props.fullWidth, (val) => {
     data-e2e="crud-table-nav"
   >
     <div
-      class="flex w-full items-center p-2.5"
+      class="flex w-full items-center p-2"
       :class="{'justify-end': !_fullWidth, 'justify-between': _fullWidth}"
     >
       <div
@@ -119,7 +128,7 @@ watch(() => props.fullWidth, (val) => {
             absolute
           />
 
-          <span class="font-medium">{{ fromItems }} - {{ itemsPerPage * page }}</span>
+          <span class="font-medium">{{ fromItems }} - {{ toItems }}</span>
           <span>of</span>
           <span
             class="font-medium"

package/dist/runtime/components/crud/__stories/AntCrud.stories.mjs

@@ -5,7 +5,7 @@ import AntCrudTableNav from "../AntCrudTableNav.vue";
 import AntTable from "../../table/AntTable.vue";
 import AntCrudTableFilter from "../AntCrudTableFilter.vue";
 import AntCrudDetail from "../AntCrudDetail.vue";
-import { AntTableRowTypes } from "../../table/__types/TableHeader.type.mjs";
+import { AntTableRowTypes } from "../../table/__types/TableHeader.types.mjs";
 const meta = {
   title: "Crud/Crud",
   component: AntCrud,

package/dist/runtime/components/crud/__stories/AntCrudTableNav.stories.mjs

@@ -23,7 +23,7 @@ export const Docs = {
     `
   }),
   args: {
-    count: 1e6
+    count: 1000015
   }
 };
 export const fullWidth = {

package/dist/runtime/components/dialogs/AntDeleteDialog.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import {InputColorType} from '../../enums';
+import {InputState} from '../../enums';
 import AntDialog from './AntDialog.vue';
 import {useVModel} from '@vueuse/core';
 
@@ -15,7 +15,7 @@ const _open = useVModel(props, 'open', emit);
 <template>
   <AntDialog
     v-model:open="_open"
-    :color-type="InputColorType.danger"
+    :state="InputState.danger"
     title="Delete"
     confirm-text="Delete"
     data-e2e="delete-dialog"
@@ -23,7 +23,7 @@ const _open = useVModel(props, 'open', emit);
     @close="() => $emit('close')"
   >
     <div>
-      Do you really want to delete <span class="font-semibold">{{entity}}</span>?
+      Do you really want to delete <span class="font-semibold">{{ entity }}</span>?
     </div>
   </AntDialog>
 </template>

package/dist/runtime/components/dialogs/AntDialog.vue

@@ -11,7 +11,7 @@ import {
   faInfoCircle,
   type IconDefinition,
 } from '@fortawesome/free-solid-svg-icons';
-import {ColorType, InputColorType} from '../../enums';
+import {State, InputState} from '../../enums';
 import {IconSize} from '../__types';
 
 const emit = defineEmits(['update:open', 'close', 'confirm']);
@@ -21,9 +21,9 @@ const props = withDefaults(defineProps<{
   confirmText?: string,
   cancelText?: string,
   showCancel?: boolean,
-  colorType?: InputColorType
+  state?: InputState
 }>(), {
-  colorType: InputColorType.base,
+  state: InputState.base,
   confirmText: 'Confirm',
   cancelText: 'Cancel',
   showCancel: true,
@@ -32,23 +32,23 @@ const props = withDefaults(defineProps<{
 const openDialog = ref(props.open);
 const openBackground = ref(props.open);
 const icons = {
-  [InputColorType.base]: null,
-  [InputColorType.info]: faInfoCircle,
-  [InputColorType.danger]: faExclamationCircle,
-  [InputColorType.warning]: faExclamationTriangle,
-  [InputColorType.success]: faCheckCircle,
+  [InputState.base]: null,
+  [InputState.info]: faInfoCircle,
+  [InputState.danger]: faExclamationCircle,
+  [InputState.warning]: faExclamationTriangle,
+  [InputState.success]: faCheckCircle,
 };
 
 const iconColor = computed(() => {
   const variants = {
-    [InputColorType.base]: 'text-neutral-100-font',
-    [InputColorType.danger]: 'text-danger-500',
-    [InputColorType.info]: 'text-info-500',
-    [InputColorType.success]: 'text-success-500',
-    [InputColorType.warning]: 'text-warning-500',
+    [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.colorType];
+  return variants[props.state];
 });
 
 watch(() => props.open, (val) => {
@@ -60,11 +60,11 @@ watch(() => props.open, (val) => {
 
   if (val) {
     openBackground.value = true;
-    setTimeout(() => openDialog.value = true, 100)
+    setTimeout(() => openDialog.value = true, 100);
     document.addEventListener('keydown', onKeydown);
   } else {
     openDialog.value = false;
-    setTimeout(() => openBackground.value = false, 100)
+    setTimeout(() => openBackground.value = false, 100);
     document.removeEventListener('keydown', onKeydown);
   }
 });
@@ -94,19 +94,19 @@ function confirmDialog() {
         >
           <div
             v-if="title || $slots['title']"
-            class="bg-neutral-100 p-2.5 flex items-center justify-between text-neutral-100-font text-sm font-semibold"
+            class="bg-neutral-100 p-2 flex items-center justify-between text-neutral-100-font text-sm font-semibold"
           >
             <slot name="title">
               {{ title }}
             </slot>
           </div>
 
-          <div class="bg-white p-2.5 grow flex items-center gap-2.5 text-sm">
+          <div class="bg-white p-2 grow flex items-center gap-2 text-sm text-for-white-bg-font">
             <slot name="icon">
               <AntIcon
-                v-if="icons[colorType]"
+                v-if="icons[state]"
                 :size="IconSize.xl3"
-                :icon="icons[colorType] as unknown as IconDefinition"
+                :icon="icons[state] as unknown as IconDefinition"
                 :color="iconColor"
                 class="px-2.5 w-8 h-8"
               />
@@ -116,19 +116,19 @@ function confirmDialog() {
           </div>
 
           <div
-            class="bg-neutral-100 p-2.5 gap-2.5 text-for-white-bg-font flex w-full justify-end"
+            class="bg-neutral-100 p-2 gap-2 text-for-white-bg-font flex w-full justify-end"
           >
             <slot name="footer">
               <AntButton
                 v-if="showCancel"
-                :color-type="ColorType.base"
+                :state="State.base"
                 @click="closeDialog()"
               >
                 {{ cancelText }}
               </AntButton>
 
               <AntButton
-                :color-type="colorType === ColorType.base ? ColorType.primary : colorType as unknown as ColorType"
+                :state="state === State.base ? State.primary : state as unknown as State"
                 filled
                 @click="confirmDialog()"
               >

package/dist/runtime/components/dialogs/__stories/AndDeleteDialog.stories.mjs

@@ -14,13 +14,15 @@ export const Docs = {
       return { args };
     },
     template: `
-      <AntButton @click="() => args.open = true" color-type="danger">Delete</AntButton>
+    <div class="h-96">
+      <AntButton @click="() => args.open = true" state="danger">Delete</AntButton>
 
       <AntDeleteDialog
         v-model:open="args.open"
         :entity="args.entity"
         v-bind="args"
       />
+    </div>
     `
   }),
   args: {

package/dist/runtime/components/dialogs/__stories/AntDialog.stories.mjs

@@ -1,15 +1,15 @@
 import AntDialog from "../AntDialog.vue";
 import AntButton from "../../buttons/AntButton.vue";
-import { InputColorType } from "../../../enums/index.mjs";
+import { InputState } from "../../../enums/index.mjs";
 const meta = {
   title: "Components/Dialogs/Dialog",
   component: AntDialog,
   parameters: { controls: { sort: "requiredFirst" } },
   decorators: [() => ({ template: '<div class="border border-dashed border-neutral-300"><story/></div>' })],
   argTypes: {
-    colorType: {
+    state: {
       control: { type: "select" },
-      options: Object.values(InputColorType)
+      options: Object.values(InputState)
     },
     title: {
       control: "text",
@@ -44,7 +44,7 @@ export const Docs = {
           justo duo dolores et ea rebum. Stet clita kasd
         </div>
 
-        <AntButton @click="args.open = true" color-type="primary">Open Dialog</AntButton>
+        <AntButton @click="args.open = true" state="primary">Open Dialog</AntButton>
 
         <AntDialog v-bind="args" v-model:open="args.open">
           Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et

package/dist/runtime/components/forms/AntField.vue

@@ -0,0 +1,109 @@
+<script lang="ts" setup>
+import {onMounted, computed} from 'vue';
+import {Size} from '../../enums/Size.enum';
+import AntInputLabel from '../inputs/Elements/AntInputLabel.vue';
+import AntInputDescription from '../inputs/Elements/AntInputDescription.vue';
+import {handleEnumValidation} from '../../handler';
+import AntInputLimiter from '../inputs/Elements/AntInputLimiter.vue';
+import {InputState} from '../../enums';
+
+defineEmits(['clickLabel', 'validate']);
+
+const props = withDefaults(defineProps<{
+  label?: string;
+  description?: string;
+  messages?: string[];
+  size?: Size;
+  state?: InputState;
+  skeleton?: boolean;
+  limiterValue?: number;
+  limiterMaxValue?: number;
+  labelFor?: string;
+  expanded?: boolean;
+}>(), {
+  state: InputState.base,
+  skeleton: false,
+  size: Size.md,
+  messages: () => [],
+  expanded: true
+});
+
+onMounted(() => {
+  handleEnumValidation(props.size, Size, 'size');
+  handleEnumValidation(props.state, InputState, 'state');
+});
+
+const _state = computed(() => props.messages.length <= 0 ? InputState.base : props.state);
+const fontSize = computed(() => {
+  if (props.size === Size.xs2 || props.size === Size.xs) {
+    return Size.xs;
+  }
+
+  return Size.sm;
+});
+</script>
+
+<template>
+  <div
+    class="flex flex-col items-start gap-1.5"
+    :class="{'w-full': expanded}"
+  >
+    <AntInputLabel
+      :label="label"
+      :size="fontSize"
+      :skeleton="skeleton"
+      :for="labelFor"
+      @click-content="$emit('clickLabel')"
+    >
+      <div class="w-full">
+        <slot />
+      </div>
+    </AntInputLabel>
+
+    <div
+      v-if="description || messages.length > 0 || (limiterMaxValue !== undefined && limiterValue !== undefined)"
+      class="flex justify-between w-full"
+    >
+      <AntInputDescription
+        v-if="description || messages.length > 0"
+        :size="fontSize"
+        :skeleton="skeleton"
+        :state="_state"
+      >
+        <slot name="description">
+          <template v-if="_state !== InputState.base && messages.length === 1">
+            {{ messages[0] }}
+          </template>
+
+          <template v-else-if="_state !== InputState.base && messages.length > 1">
+            <ul class="list-disc list-outside pl-4">
+              <li
+                v-for="(message, index) of messages"
+                :key="`field-message-${index}`"
+                class="marker:m-none marker:p-none"
+              >
+                {{ message }}
+              </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"
+          :size="fontSize"
+          :skeleton="skeleton"
+        />
+      </div>
+    </div>
+  </div>
+</template>

package/dist/runtime/components/forms/AntFormGroupLabel.vue

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

package/dist/runtime/components/{form/Elements → forms}/__stories/AntField.stories.mjs

@@ -1,21 +1,21 @@
 import AntField from "../AntField.vue";
-import AntBaseInput from "../AntBaseInput.vue";
-import { Size } from "../../../../enums/Size.enum.mjs";
+import AntBaseInput from "../../inputs/Elements/AntBaseInput.vue";
+import { Size } from "../../../enums/Size.enum.mjs";
 import { computed, reactive, ref } from "vue";
-import { InputColorType } from "../../../../enums/index.mjs";
+import { InputState } from "../../../enums/index.mjs";
 import { isRequiredRule, notBlankRule, useFieldValidator } from "@antify/validate";
 const meta = {
-  title: "Components/Forms/Elements/Field",
+  title: "Forms/Field",
   component: AntField,
   parameters: { controls: { sort: "requiredFirst" } },
   argTypes: {
     size: {
-      control: { type: "radio" },
+      control: { type: "select" },
       options: Object.values(Size)
     },
-    colorType: {
+    state: {
       control: { type: "select" },
-      options: Object.values(InputColorType)
+      options: Object.values(InputState)
     },
     skeleton: {
       control: "boolean",
@@ -44,30 +44,30 @@ export const Docs = {
           args.size = val;
         }
       });
-      const colorType = computed({
+      const state = computed({
         get() {
-          return args.colorType;
+          return validator.hasErrors() ? InputState.danger : args.state;
         },
         set(val) {
-          args.colorType = val;
+          args.state = val;
         }
       });
       const value = ref(null);
       const validator = reactive(useFieldValidator([isRequiredRule, notBlankRule]));
-      return { args, value, validator, skeleton, size, colorType };
+      return { args, value, validator, skeleton, size, state, InputState };
     },
     template: `
       <AntField
         v-bind="args"
-        :errors="Array.isArray(args.errors) ? args.errors : validator.getErrors()"
+        :messages="Array.isArray(args.messages) ? args.messages : validator.getErrors()"
+        :state="state"
       >
         <AntBaseInput
-          v-model:value="value"
+          v-model="value"
           :skeleton="skeleton"
           :size="size"
-          :color-type="colorType"
+          :state="state"
           placeholder="Placeholder"
-          :has-errors="Array.isArray(args.errors) ? args.errors.length > 0 : validator.hasErrors()"
           @validate="(val) => validator.validate(val)"
         />
       </AntField>