@antify/ui-module 1.5.1 → 1.6.0

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "ui-module",
   "configKey": "uiModule",
-  "version": "1.5.1"
+  "version": "1.6.0"
 }

package/dist/runtime/components/AntAlert.vue

@@ -18,17 +18,19 @@ import {IconSize} from './__types';
 defineEmits(['close']);
 
 const props = withDefaults(defineProps<{
-  title: string,
+  title?: string | null,
   colorType?: InputColorType,
   icon?: boolean,
   expanded?: boolean,
-  questionMarkText?: string,
+  questionMarkText?: string | null,
   skeleton?: boolean,
   dismissBtn?: boolean,
 }>(), {
+	title: null,
   colorType: InputColorType.base,
   icon: true,
   expanded: false,
+	questionMarkText: null,
   skeleton: false,
   dismissBtn: true,
 });
@@ -81,9 +83,14 @@ onMounted(() => {
     :class="classes"
     data-e2e="alert"
   >
-    <AntSkeleton v-if="skeleton" absolute rounded/>
+    <AntSkeleton
+      v-if="skeleton"
+      absolute
+      rounded
+    />
 
     <div
+      v-if="icon || hasQuestionMark || dismissBtn || title"
       class="inline-flex items-center justify-between w-content gap-2.5"
       :class="{'invisible': skeleton}"
     >
@@ -95,7 +102,9 @@ onMounted(() => {
           :size="IconSize.sm"
         />
 
-        <div :class="{'font-semibold': hasDefaultSlot}">
+        <div
+          :class="{'font-semibold': hasDefaultSlot}"
+        >
           <slot name="title">
             {{ title }}
           </slot>
@@ -131,7 +140,7 @@ onMounted(() => {
     </div>
 
     <div v-if="hasDefaultSlot">
-      <slot/>
+      <slot />
     </div>
   </div>
 </template>

package/dist/runtime/components/AntContent.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+withDefaults(defineProps<{
+	padding?: boolean
+}>(), {
+	padding: true
+})
+</script>
+
+<template>
+  <div
+    :class="{ 'p-2.5': padding }"
+    class="bg-white overflow-auto"
+  >
+    <slot />
+  </div>
+</template>

package/dist/runtime/components/AntPagination.vue

@@ -162,7 +162,11 @@ const pagination = computed(() => {
     class="inline-flex relative"
     data-e2e="pagination"
   >
-    <AntSkeleton v-if="skeleton" rounded absolute/>
+    <AntSkeleton
+      v-if="skeleton"
+      rounded
+      absolute
+    />
 
     <div
       class="inline-flex gap-px"
@@ -177,14 +181,15 @@ const pagination = computed(() => {
       />
 
       <AntButton
-        v-for="(pageObj, index) in pagination"
+        v-for="(pageObj) in pagination"
+        :key="`pagination-button-${pageObj}`"
         :color-type="pageObj === page ? ColorType.primary : ColorType.base"
         :class="{'text-primary-500 z-10': pageObj === page}"
         :disabled="pageObj === '...'"
         :grouped="Grouped.center"
         :filled="pageObj !== page"
+        :readonly="pageObj === page"
         @click="() => page = pageObj"
-        v-bind:key="`pagination-button-${index}`"
       >
         {{ pageObj }}
       </AntButton>

package/dist/runtime/components/__stories/AntAlert.stories.d.ts

@@ -4,6 +4,7 @@ declare const meta: Meta<typeof AntAlert>;
 export default meta;
 type Story = StoryObj<typeof AntAlert>;
 export declare const Docs: Story;
+export declare const WithOutTitle: Story;
 export declare const WithContent: Story;
 export declare const WithoutContent: Story;
 export declare const WithQuestionIcon: Story;

package/dist/runtime/components/__stories/AntAlert.stories.mjs

@@ -22,21 +22,27 @@ export const Docs = {
       return { args, logClick };
     },
     template: `
-      <div class="p-4">
-        <AntAlert v-bind="args" @close="logClick">
-          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, <br/>
-          sed diam nonumy eirmod tempor invidunt <br/>
-          ut labore et dolore magna aliquyam erat, <br/>
-          sed diam voluptua. At vero eos et accusam et <br/>
-          justo duo dolores et ea rebum. Stet clita kasd
-        </AntAlert>
-      </div>
+			<AntAlert v-bind="args" @close="logClick">
+				Lorem ipsum dolor sit amet, consetetur sadipscing elitr, <br/>
+				sed diam nonumy eirmod tempor invidunt <br/>
+				ut labore et dolore magna aliquyam erat, <br/>
+				sed diam voluptua. At vero eos et accusam et <br/>
+				justo duo dolores et ea rebum. Stet clita kasd
+			</AntAlert>
     `
   }),
   args: {
     title: "Lorem ipsum dolor"
   }
 };
+export const WithOutTitle = {
+  render: Docs.render,
+  args: {
+    title: "",
+    dismissBtn: false,
+    icon: false
+  }
+};
 export const WithContent = {
   render: Docs.render,
   args: {

package/dist/runtime/components/__stories/AntContent.stories.d.ts

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

package/dist/runtime/components/__stories/AntContent.stories.mjs

@@ -0,0 +1,26 @@
+import AntContent from "../AntContent.vue";
+const meta = {
+  title: "Components/Content",
+  component: AntContent,
+  parameters: { controls: { sort: "requiredFirst" } },
+  argTypes: {}
+};
+export default meta;
+export const Docs = {
+  parameters: {
+    chromatic: { disableSnapshot: false }
+  },
+  render: (args) => ({
+    components: { AntContent },
+    setup() {
+      return { args };
+    },
+    template: `
+			<div class="outline outline-neutral-300">
+				<AntContent v-bind="args" class="h-40">
+					<div class="slot h-60">SLOT</div>
+				</AntContent>
+			</div>`
+  }),
+  args: {}
+};

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/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
+  }
+};

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

@@ -13,7 +13,7 @@ const hasLogoImageSlot = computed(() => useSlots()['logo-image'] || false);
 </script>
 
 <template>
-  <div class="flex gap-px bg-neutral-300 h-screen overflow-hidden">
+  <div class="flex gap-px bg-neutral-300 h-screen min-w-full overflow-y-hidden">
     <div class="flex flex-col gap-px bg-neutral-300 w-52 shrink-0">
       <component
         :is="logoRoute ? 'RouterLink' : 'div'"
@@ -29,7 +29,7 @@ const hasLogoImageSlot = computed(() => useSlots()['logo-image'] || false);
       />
     </div>
 
-    <div class="flex-grow">
+    <div class="w-px flex-grow">
       <slot />
     </div>
   </div>

package/dist/runtime/components/layouts/__stories/AntNavLeftLayout.stories.mjs

@@ -25,7 +25,7 @@ export const Docs = {
           <img src="/logo.svg" class="h-full w-full"/>
         </template>
 
-        <div class="slot m-2.5">SLOT</div>
+        <div class="slot m-2.5 h-full !text-white !border-white">SLOT</div>
       </AntNavLeftLayout>
     `
   }),

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@antify/ui-module",
   "private": false,
-  "version": "1.5.1",
+  "version": "1.6.0",
   "license": "MIT",
   "type": "module",
   "exports": {

package/src/runtime/components/AntAlert.vue

@@ -18,17 +18,19 @@ import {IconSize} from './__types';
 defineEmits(['close']);
 
 const props = withDefaults(defineProps<{
-  title: string,
+  title?: string | null,
   colorType?: InputColorType,
   icon?: boolean,
   expanded?: boolean,
-  questionMarkText?: string,
+  questionMarkText?: string | null,
   skeleton?: boolean,
   dismissBtn?: boolean,
 }>(), {
+	title: null,
   colorType: InputColorType.base,
   icon: true,
   expanded: false,
+	questionMarkText: null,
   skeleton: false,
   dismissBtn: true,
 });
@@ -81,9 +83,14 @@ onMounted(() => {
     :class="classes"
     data-e2e="alert"
   >
-    <AntSkeleton v-if="skeleton" absolute rounded/>
+    <AntSkeleton
+      v-if="skeleton"
+      absolute
+      rounded
+    />
 
     <div
+      v-if="icon || hasQuestionMark || dismissBtn || title"
       class="inline-flex items-center justify-between w-content gap-2.5"
       :class="{'invisible': skeleton}"
     >
@@ -95,7 +102,9 @@ onMounted(() => {
           :size="IconSize.sm"
         />
 
-        <div :class="{'font-semibold': hasDefaultSlot}">
+        <div
+          :class="{'font-semibold': hasDefaultSlot}"
+        >
           <slot name="title">
             {{ title }}
           </slot>
@@ -131,7 +140,7 @@ onMounted(() => {
     </div>
 
     <div v-if="hasDefaultSlot">
-      <slot/>
+      <slot />
     </div>
   </div>
 </template>

package/src/runtime/components/AntContent.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+withDefaults(defineProps<{
+	padding?: boolean
+}>(), {
+	padding: true
+})
+</script>
+
+<template>
+  <div
+    :class="{ 'p-2.5': padding }"
+    class="bg-white overflow-auto"
+  >
+    <slot />
+  </div>
+</template>

package/src/runtime/components/AntPagination.vue

@@ -162,7 +162,11 @@ const pagination = computed(() => {
     class="inline-flex relative"
     data-e2e="pagination"
   >
-    <AntSkeleton v-if="skeleton" rounded absolute/>
+    <AntSkeleton
+      v-if="skeleton"
+      rounded
+      absolute
+    />
 
     <div
       class="inline-flex gap-px"
@@ -177,14 +181,15 @@ const pagination = computed(() => {
       />
 
       <AntButton
-        v-for="(pageObj, index) in pagination"
+        v-for="(pageObj) in pagination"
+        :key="`pagination-button-${pageObj}`"
         :color-type="pageObj === page ? ColorType.primary : ColorType.base"
         :class="{'text-primary-500 z-10': pageObj === page}"
         :disabled="pageObj === '...'"
         :grouped="Grouped.center"
         :filled="pageObj !== page"
+        :readonly="pageObj === page"
         @click="() => page = pageObj"
-        v-bind:key="`pagination-button-${index}`"
       >
         {{ pageObj }}
       </AntButton>

package/src/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/src/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/src/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/src/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/src/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/src/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/src/runtime/components/layouts/AntNavLeftLayout.vue

@@ -13,7 +13,7 @@ const hasLogoImageSlot = computed(() => useSlots()['logo-image'] || false);
 </script>
 
 <template>
-  <div class="flex gap-px bg-neutral-300 h-screen overflow-hidden">
+  <div class="flex gap-px bg-neutral-300 h-screen min-w-full overflow-y-hidden">
     <div class="flex flex-col gap-px bg-neutral-300 w-52 shrink-0">
       <component
         :is="logoRoute ? 'RouterLink' : 'div'"
@@ -29,7 +29,7 @@ const hasLogoImageSlot = computed(() => useSlots()['logo-image'] || false);
       />
     </div>
 
-    <div class="flex-grow">
+    <div class="w-px flex-grow">
       <slot />
     </div>
   </div>