@antify/ui-module 1.5.0 → 1.6.0

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

@@ -1,7 +1,5 @@
 import AntCreateButton from "../AntCreateButton.vue";
-import { Size } from "../../../enums/Size.enum.mjs";
-import { Grouped as _Grouped } from "../../../enums/Grouped.enum.mjs";
-import { Position } from "../../../enums/index.mjs";
+import { Position, Grouped as _Grouped, Size } from "../../../enums/index.mjs";
 const meta = {
   title: "Components/Buttons/Create Button",
   component: AntCreateButton,
@@ -14,6 +12,10 @@ const meta = {
     grouped: {
       control: { type: "select" },
       options: Object.values(_Grouped)
+    },
+    tooltipPosition: {
+      control: { type: "select" },
+      options: Object.values(Position)
     }
   }
 };
@@ -27,7 +29,14 @@ export const Docs = {
     template: '<AntCreateButton v-bind="args"/>'
   }),
   args: {
-    invalidPermissionTooltipPosition: Position.right
+    tooltipPosition: Position.right
+  }
+};
+export const IconVariant = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    iconVariant: true
   }
 };
 export const Disabled = {

package/dist/runtime/components/buttons/__stories/AntDeleteButton.stories.d.ts

@@ -4,9 +4,9 @@ declare const meta: Meta<typeof AntDeleteButton>;
 export default meta;
 type Story = StoryObj<typeof AntDeleteButton>;
 export declare const Docs: Story;
+export declare const IconVariant: Story;
 export declare const Disabled: Story;
 export declare const Grouped: Story;
 export declare const Skeleton: Story;
 export declare const Expanded: Story;
-export declare const IconVariant: Story;
 export declare const InvalidPermission: Story;

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

@@ -1,7 +1,5 @@
 import AntDeleteButton from "../AntDeleteButton.vue";
-import { Size } from "../../../enums/Size.enum.mjs";
-import { Grouped as _Grouped } from "../../../enums/Grouped.enum.mjs";
-import { Position } from "../../../enums/index.mjs";
+import { Position, Grouped as _Grouped, Size } from "../../../enums/index.mjs";
 const meta = {
   title: "Components/Buttons/Delete Button",
   component: AntDeleteButton,
@@ -14,6 +12,10 @@ const meta = {
     grouped: {
       control: { type: "select" },
       options: Object.values(_Grouped)
+    },
+    tooltipPosition: {
+      control: { type: "select" },
+      options: Object.values(Position)
     }
   }
 };
@@ -27,7 +29,14 @@ export const Docs = {
     template: '<AntDeleteButton v-bind="args"/>'
   }),
   args: {
-    invalidPermissionTooltipPosition: Position.right
+    tooltipPosition: Position.right
+  }
+};
+export const IconVariant = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    iconVariant: true
   }
 };
 export const Disabled = {
@@ -58,13 +67,6 @@ export const Expanded = {
     expanded: true
   }
 };
-export const IconVariant = {
-  render: Docs.render,
-  args: {
-    ...Docs.args,
-    iconVariant: true
-  }
-};
 export const InvalidPermission = {
   render: Docs.render,
   args: {

package/dist/runtime/components/buttons/__stories/AntDuplicateButton.stories.d.ts

@@ -4,6 +4,7 @@ declare const meta: Meta<typeof AntDuplicateButton>;
 export default meta;
 type Story = StoryObj<typeof AntDuplicateButton>;
 export declare const Docs: Story;
+export declare const IconVariant: Story;
 export declare const Disabled: Story;
 export declare const Grouped: Story;
 export declare const Skeleton: Story;

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

@@ -1,7 +1,5 @@
 import AntDuplicateButton from "../AntDuplicateButton.vue";
-import { Size } from "../../../enums/Size.enum.mjs";
-import { Grouped as _Grouped } from "../../../enums/Grouped.enum.mjs";
-import { Position } from "../../../enums/index.mjs";
+import { Position, Grouped as _Grouped, Size } from "../../../enums/index.mjs";
 const meta = {
   title: "Components/Buttons/Duplicate Button",
   component: AntDuplicateButton,
@@ -14,6 +12,10 @@ const meta = {
     grouped: {
       control: { type: "select" },
       options: Object.values(_Grouped)
+    },
+    tooltipPosition: {
+      control: { type: "select" },
+      options: Object.values(Position)
     }
   }
 };
@@ -27,7 +29,14 @@ export const Docs = {
     template: '<AntDuplicateButton v-bind="args"/>'
   }),
   args: {
-    invalidPermissionTooltipPosition: Position.right
+    tooltipPosition: Position.right
+  }
+};
+export const IconVariant = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    iconVariant: true
   }
 };
 export const Disabled = {

package/dist/runtime/components/buttons/__stories/AntEditButton.stories.d.ts

@@ -0,0 +1,12 @@
+import AntEditButton from '../AntEditButton.vue';
+import { type Meta, type StoryObj } from '@storybook/vue3';
+declare const meta: Meta<typeof AntEditButton>;
+export default meta;
+type Story = StoryObj<typeof AntEditButton>;
+export declare const Docs: Story;
+export declare const IconVariant: Story;
+export declare const Disabled: Story;
+export declare const Grouped: Story;
+export declare const Skeleton: Story;
+export declare const Expanded: Story;
+export declare const InvalidPermission: Story;

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

@@ -0,0 +1,76 @@
+import AntEditButton from "../AntEditButton.vue";
+import { Position, Grouped as _Grouped, Size } from "../../../enums/index.mjs";
+const meta = {
+  title: "Components/Buttons/Edit Button",
+  component: AntEditButton,
+  parameters: { controls: { sort: "requiredFirst" } },
+  argTypes: {
+    size: {
+      control: { type: "radio" },
+      options: Object.values(Size)
+    },
+    grouped: {
+      control: { type: "select" },
+      options: Object.values(_Grouped)
+    },
+    tooltipPosition: {
+      control: { type: "select" },
+      options: Object.values(Position)
+    }
+  }
+};
+export default meta;
+export const Docs = {
+  render: (args) => ({
+    components: { AntEditButton },
+    setup() {
+      return { args };
+    },
+    template: '<AntEditButton v-bind="args"/>'
+  }),
+  args: {
+    tooltipPosition: Position.right
+  }
+};
+export const IconVariant = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    iconVariant: true
+  }
+};
+export const Disabled = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    disabled: true
+  }
+};
+export const Grouped = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    grouped: _Grouped.left
+  }
+};
+export const Skeleton = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    skeleton: true
+  }
+};
+export const Expanded = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    expanded: true
+  }
+};
+export const InvalidPermission = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    canEdit: false
+  }
+};

package/dist/runtime/components/buttons/__stories/AntSaveAndNewButton.stories.d.ts

@@ -4,6 +4,7 @@ declare const meta: Meta<typeof AntSaveAndNewButton>;
 export default meta;
 type Story = StoryObj<typeof AntSaveAndNewButton>;
 export declare const Docs: Story;
+export declare const IconVariant: Story;
 export declare const Disabled: Story;
 export declare const Grouped: Story;
 export declare const Skeleton: Story;

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

@@ -1,7 +1,5 @@
 import AntSaveAndNewButton from "../AntSaveAndNewButton.vue";
-import { Size } from "../../../enums/Size.enum.mjs";
-import { Grouped as _Grouped } from "../../../enums/Grouped.enum.mjs";
-import { Position } from "../../../enums/index.mjs";
+import { Position, Grouped as _Grouped, Size } from "../../../enums/index.mjs";
 const meta = {
   title: "Components/Buttons/Save And New Button",
   component: AntSaveAndNewButton,
@@ -14,6 +12,10 @@ const meta = {
     grouped: {
       control: { type: "select" },
       options: Object.values(_Grouped)
+    },
+    tooltipPosition: {
+      control: { type: "select" },
+      options: Object.values(Position)
     }
   }
 };
@@ -27,7 +29,14 @@ export const Docs = {
     template: '<AntSaveAndNewButton v-bind="args"/>'
   }),
   args: {
-    invalidPermissionTooltipPosition: Position.right
+    tooltipPosition: Position.right
+  }
+};
+export const IconVariant = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    iconVariant: true
   }
 };
 export const Disabled = {

package/dist/runtime/components/buttons/__stories/AntSaveButton.stories.d.ts

@@ -4,6 +4,7 @@ declare const meta: Meta<typeof AntSaveButton>;
 export default meta;
 type Story = StoryObj<typeof AntSaveButton>;
 export declare const Docs: Story;
+export declare const IconVariant: Story;
 export declare const Disabled: Story;
 export declare const Grouped: Story;
 export declare const Skeleton: Story;

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

@@ -1,7 +1,5 @@
 import AntSaveButton from "../AntSaveButton.vue";
-import { Size } from "../../../enums/Size.enum.mjs";
-import { Grouped as _Grouped } from "../../../enums/Grouped.enum.mjs";
-import { Position } from "../../../enums/index.mjs";
+import { Position, Grouped as _Grouped, Size } from "../../../enums/index.mjs";
 const meta = {
   title: "Components/Buttons/Save Button",
   component: AntSaveButton,
@@ -14,6 +12,10 @@ const meta = {
     grouped: {
       control: { type: "select" },
       options: Object.values(_Grouped)
+    },
+    tooltipPosition: {
+      control: { type: "select" },
+      options: Object.values(Position)
     }
   }
 };
@@ -27,7 +29,14 @@ export const Docs = {
     template: '<AntSaveButton v-bind="args"/>'
   }),
   args: {
-    invalidPermissionTooltipPosition: Position.right
+    tooltipPosition: Position.right
+  }
+};
+export const IconVariant = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    iconVariant: true
   }
 };
 export const Disabled = {

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

@@ -68,7 +68,16 @@ const itemsPerPage = computed({
     })()
   }
 })
-const fromItems = computed(() => (itemsPerPage.value * (page.value - 1)))
+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)
 
@@ -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/AntCrudTableNav.stories.mjs

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

package/dist/runtime/components/form/AntFormGroup.vue

@@ -1,21 +1,36 @@
 <script lang="ts" setup>
 import {Direction} from '../../enums/Direction.enum';
-import {computed} from 'vue';
+import {computed, useAttrs} from 'vue';
 
+const attrs = useAttrs();
 const props = withDefaults(defineProps<{
   direction?: Direction;
 }>(), {
   direction: Direction.column,
 });
 
-const classes = computed(() => ({
-  'flex-col space-y-2.5': props.direction === Direction.column,
-  'flex-row space-x-2.5': props.direction === Direction.row,
-}));
+const classes = computed(() => {
+	// Let override gap-x-* and gap-y-* classes from outside
+	const attrClasses = typeof attrs.class === 'string' ? attrs.class : ''
+	const hasGapX = /gap-x-\d/.test(attrClasses);
+	const hasGapY = /gap-y-\d/.test(attrClasses);
+
+	const classes: Record<string, boolean> = {
+		'flex-col': props.direction === Direction.column,
+		'gap-y-2.5': !hasGapY && props.direction === Direction.column,
+		'flex-row': props.direction === Direction.row,
+		'gap-x-2.5': !hasGapX && props.direction === Direction.row,
+	}
+
+	return classes;
+});
 </script>
 
 <template>
-  <section class="flex" :class="classes">
-    <slot/>
+  <section
+    class="flex"
+    :class="classes"
+  >
+    <slot />
   </section>
 </template>

package/dist/runtime/components/form/AntNumberInput.vue

@@ -27,6 +27,7 @@ const props = withDefaults(defineProps<{
   max?: number;
   limiter?: boolean;
   errors?: string[];
+	indicators?: boolean;
 }>(), {
   colorType: InputColorType.base,
   disabled: false,
@@ -34,7 +35,8 @@ const props = withDefaults(defineProps<{
   size: Size.md,
   steps: 1,
   limiter: false,
-  errors: []
+  errors: [],
+	indicators: false
 });
 const emit = defineEmits(['update:modelValue', 'validate']);
 const _modelValue = useVModel(props, 'modelValue', emit);
@@ -127,6 +129,7 @@ function onButtonBlur() {
       class="flex relative"
     >
       <AntButton
+        v-if="indicators"
         :icon-left="faMinus"
         :grouped="Grouped.left"
         :color-type="buttonColorType"
@@ -140,7 +143,7 @@ function onButtonBlur() {
       <AntBaseInput
         v-model:value.number="_modelValue"
         :type="BaseInputType.number"
-        :grouped="Grouped.center"
+        :grouped="indicators ? Grouped.center : Grouped.none"
         wrapper-class="flex-grow"
         :color-type="colorType"
         :size="size"
@@ -156,6 +159,7 @@ function onButtonBlur() {
       />
 
       <AntButton
+        v-if="indicators"
         :icon-left="faPlus"
         :grouped="Grouped.right"
         :color-type="buttonColorType"

package/dist/runtime/components/form/AntSelect.vue

@@ -45,7 +45,6 @@ const props = withDefaults(
       grouped?: Grouped;
       name?: string;
       wrapperClass?: string | Record<string, boolean>;
-      showMessageOnError?: boolean;
       expanded?: boolean;
     }>(), {
       colorType: InputColorType.base,
@@ -54,7 +53,6 @@ const props = withDefaults(
       disabled: false,
       skeleton: false,
       nullable: false,
-      showMessageOnError: true,
       expanded: true
     }
 );
@@ -154,6 +152,8 @@ const skeletonGrouped = computed(() => {
 const inputRef = ref<HTMLElement | null>(null);
 const dropDownRef = ref<HTMLElement | null>(null);
 const focusedDropDownItem = ref<string | number | null>(null);
+// TODO:: Hotfix to prevent missing required prop warning. Fix it with https://github.com/antify/ui-module/issues/52
+const dropDownFocused = ref(null);
 
 onMounted(() => {
   handleEnumValidation(props.size, Size, 'size');
@@ -203,7 +203,6 @@ function onClickRemoveButton() {
     :color-type="colorType"
     :validator="validator"
     :class="wrapperClass"
-    :show-message-on-error="showMessageOnError"
     :expanded="expanded"
     label-for="noop"
     data-e2e="select"
@@ -280,6 +279,7 @@ function onClickRemoveButton() {
           ref="dropDownRef"
           v-model="_modelValue"
           v-model:open="isOpen"
+          v-model:focused="dropDownFocused"
           :options="options"
           :input-ref="inputRef"
           :size="size"

package/dist/runtime/components/form/AntTagInput.vue

@@ -31,7 +31,6 @@ const props = withDefaults(
     skeleton?: boolean;
     validator?: FieldValidator;
     name?: string;
-    showMessageOnError?: boolean;
     expanded?: boolean;
     icon?: IconDefinition;
     grouped?: Grouped;
@@ -53,7 +52,6 @@ const props = withDefaults(
     allowDuplicates: false,
     openOnFocus: true,
     autoCloseAfterSelection: false,
-    showMessageOnError: true,
 
     placeholder: 'Add new tag'
   }
@@ -233,12 +231,11 @@ function filterDropDown() {
     :description="description"
     :color-type="colorType"
     :validator="validator"
-    :show-message-on-error="showMessageOnError"
     :expanded="expanded"
   >
     <div
-      class="relative w-full"
       v-on-click-outside="onClickOutside"
+      class="relative w-full"
     >
       <AntSkeleton
         v-if="skeleton"
@@ -264,12 +261,15 @@ function filterDropDown() {
 
         <!-- Input -->
         <div class="flex items-center gap-1 w-32 shrink grow">
-          <AntIcon :icon="icon" :size="size === Size.sm ? IconSize.xs : IconSize.sm"/>
+          <AntIcon
+            :icon="icon"
+            :size="size === Size.sm ? IconSize.xs : IconSize.sm"
+          />
 
           <input
+            ref="inputRef"
             v-model="tagInput"
             type="text"
-            ref="inputRef"
             :placeholder="placeholder"
             :class="inputClasses"
             :disabled="disabled"
@@ -283,9 +283,9 @@ function filterDropDown() {
 
       <AntDropDown
         v-if="filteredOptions && !disabled"
+        ref="dropDownRef"
         v-model:focused="focusedDropDownItem"
         v-model:open="dropDownOpen"
-        ref="dropDownRef"
         :model-value="null"
         :auto-select-first-on-open="!allowCreate"
         :options="filteredOptions"

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

@@ -17,14 +17,12 @@ const props = withDefaults(defineProps<{
   limiterValue?: number;
   limiterMaxValue?: number;
   labelFor?: string;
-  showMessageOnError?: boolean;
   errors?: string[];
   expanded?: boolean;
 }>(), {
   colorType: InputColorType.base,
   skeleton: false,
   size: Size.md,
-  showMessageOnError: true,
   errors: () => [],
   expanded: true
 });
@@ -35,34 +33,35 @@ onMounted(() => {
 });
 
 const _errors = computed(() => props.skeleton ? [] : props.errors);
-const _colorType = computed(() => _errors.value.length > 0 ? InputColorType.danger : props.colorType)
+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}"
+    class="flex flex-col items-start gap-1.5"
+    :class="{'w-full': expanded}"
   >
     <AntInputLabel
-        :label="label"
-        :size="size"
-        :skeleton="skeleton"
-        :for="labelFor"
-        @clickContent="$emit('clickLabel')"
+      :label="label"
+      :size="size"
+      :skeleton="skeleton"
+      :for="labelFor"
+      @click-content="$emit('clickLabel')"
     >
       <div class="w-full">
-        <slot/>
+        <slot />
       </div>
     </AntInputLabel>
 
     <div
-        v-if="showMessageOnError && (description || _errors.length > 0)"
-        class="flex justify-between w-full"
+      v-if="description || _errors.length > 0 || (limiterMaxValue !== undefined && limiterValue !== undefined)"
+      class="flex justify-between w-full"
     >
       <AntInputDescription
-          :size="size"
-          :skeleton="skeleton"
-          :color-type="_colorType"
+        v-if="description || _errors.length > 0"
+        :size="size"
+        :skeleton="skeleton"
+        :color-type="_colorType"
       >
         <slot name="description">
           <template v-if="_errors.length === 1">
@@ -87,16 +86,20 @@ const _colorType = computed(() => _errors.value.length > 0 ? InputColorType.dang
         </slot>
       </AntInputDescription>
 
-      <AntInputLimiter
-          v-if="limiterMaxValue !== undefined && limiterValue !== undefined"
+      <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>
+        >
+          {{ limiterValue }}/{{ limiterMaxValue }}
+        </AntInputLimiter>
+      </div>
     </div>
   </div>
 </template>

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

@@ -40,16 +40,16 @@ onMounted(() => {
 
 <template>
   <div
-      :class="classes"
+    :class="classes"
   >
     <span :class="{'invisible': skeleton}">
-      <slot/>
+      <slot />
     </span>
 
     <AntSkeleton
-        v-if="skeleton"
-        absolute
-        rounded
+      v-if="skeleton"
+      absolute
+      rounded
     />
   </div>
 </template>

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

@@ -5,3 +5,4 @@ export default meta;
 type Story = StoryObj<typeof AntNumberInput>;
 export declare const Docs: Story;
 export declare const Limited: Story;
+export declare const WithoutIndicators: Story;

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

@@ -65,3 +65,10 @@ export const Limited = {
     ])
   }
 };
+export const WithoutIndicators = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    indicators: false
+  }
+};