@antify/ui-module 1.5.0 → 1.6.0

package/src/runtime/components/buttons/AntDuplicateButton.vue

@@ -1,42 +1,54 @@
 <script lang="ts" setup>
-import {Grouped} from '../../enums/Grouped.enum';
-import {Size} from '../../enums/Size.enum';
 import AntActionButton from './AntActionButton.vue';
-import {ColorType, Position} from '../../enums';
+import {Position, Size, Grouped, ColorType} from '../../enums';
 import {faCopy} from '@fortawesome/free-solid-svg-icons';
 
 defineEmits(['click', 'blur']);
 withDefaults(defineProps<{
+	iconVariant?: boolean;
 	size?: Size;
 	disabled?: boolean;
 	grouped?: Grouped;
 	skeleton?: boolean;
 	expanded?: boolean;
 	canDuplicate?: boolean;
-	invalidPermissionTooltipPosition?: Position;
+	tooltipPosition?: Position;
 }>(), {
+	iconVariant: false,
 	canDuplicate: true
 });
 </script>
 
 <template>
   <AntActionButton
-    :icon-left="faCopy"
+    :filled="false"
     :color-type="ColorType.base"
     :size="size"
     :disabled="disabled"
+    :icon-left="iconVariant ? faCopy : undefined"
     :grouped="grouped"
     :skeleton="skeleton"
     :expanded="expanded"
     :has-permission="canDuplicate"
-    :invalid-permission-tooltip-position="invalidPermissionTooltipPosition"
-    data-e2e="create-button"
+    :tooltip-position="tooltipPosition"
+    data-e2e="duplicate-button"
     @click="$emit('click')"
     @blur="$emit('blur')"
   >
+    <template
+      v-if="!iconVariant"
+      #default
+    >
+      Duplicate
+    </template>
+
     <template #invalidPermissionTooltipContent>
       You have no permission to duplicate entries.<br>
       Please contact your administrator.
     </template>
+
+    <template #tooltipContent>
+      Duplicate entry
+    </template>
   </AntActionButton>
 </template>

package/src/runtime/components/buttons/AntEditButton.vue

@@ -0,0 +1,54 @@
+<script lang="ts" setup>
+import AntActionButton from './AntActionButton.vue';
+import {Position, Size, Grouped, ColorType} from '../../enums';
+import {faPencil} from '@fortawesome/free-solid-svg-icons';
+
+defineEmits(['click', 'blur']);
+withDefaults(defineProps<{
+	iconVariant?: boolean;
+	size?: Size;
+	disabled?: boolean;
+	grouped?: Grouped;
+	skeleton?: boolean;
+	expanded?: boolean;
+	canEdit?: boolean;
+	tooltipPosition?: Position;
+}>(), {
+	iconVariant: false,
+	canEdit: true
+});
+</script>
+
+<template>
+  <AntActionButton
+    :filled="false"
+    :color-type="ColorType.base"
+    :size="size"
+    :disabled="disabled"
+    :icon-left="iconVariant ? faPencil : undefined"
+    :grouped="grouped"
+    :skeleton="skeleton"
+    :expanded="expanded"
+    :has-permission="canEdit"
+    :tooltip-position="tooltipPosition"
+    data-e2e="edit-button"
+    @click="$emit('click')"
+    @blur="$emit('blur')"
+  >
+    <template
+      v-if="!iconVariant"
+      #default
+    >
+      Edit
+    </template>
+
+    <template #invalidPermissionTooltipContent>
+      You have no permission to edit entries.<br>
+      Please contact your administrator.
+    </template>
+
+    <template #tooltipContent>
+      Edit entry
+    </template>
+  </AntActionButton>
+</template>

package/src/runtime/components/buttons/AntSaveAndNewButton.vue

@@ -1,42 +1,55 @@
 <script lang="ts" setup>
-import {Grouped} from '../../enums/Grouped.enum';
-import {Size} from '../../enums/Size.enum';
 import AntActionButton from './AntActionButton.vue';
-import {Position} from '../../enums';
+import {Position, Size, Grouped, ColorType} from '../../enums';
+import {faFloppyDisk, faPlus} from '@fortawesome/free-solid-svg-icons';
 
 defineEmits(['click', 'blur']);
 withDefaults(defineProps<{
+	iconVariant?: boolean;
 	size?: Size;
 	disabled?: boolean;
 	grouped?: Grouped;
 	skeleton?: boolean;
 	expanded?: boolean;
 	canSave?: boolean;
-	invalidPermissionTooltipPosition?: Position;
+	tooltipPosition?: Position;
 }>(), {
+	iconVariant: false,
 	canSave: true
 });
 </script>
 
 <template>
   <AntActionButton
+    :filled="false"
+    :color-type="ColorType.primary"
     :size="size"
     :disabled="disabled"
+    :icon-left="iconVariant ? faFloppyDisk : undefined"
+    :icon-right="iconVariant ? faPlus : undefined"
     :grouped="grouped"
     :skeleton="skeleton"
     :expanded="expanded"
-    :filled="false"
     :has-permission="canSave"
-    :invalid-permission-tooltip-position="invalidPermissionTooltipPosition"
+    :tooltip-position="tooltipPosition"
     data-e2e="save-and-new-button"
     @click="$emit('click')"
     @blur="$emit('blur')"
   >
-    <template #default>Save and new</template>
+    <template
+      v-if="!iconVariant"
+      #default
+    >
+      Save and new
+    </template>
 
     <template #invalidPermissionTooltipContent>
-      You have no permission to save this entry.<br>
+      You have no permission to save entries.<br>
       Please contact your administrator.
     </template>
+
+    <template #tooltipContent>
+      Save entry
+    </template>
   </AntActionButton>
 </template>

package/src/runtime/components/buttons/AntSaveButton.vue

@@ -1,43 +1,54 @@
 <script lang="ts" setup>
-import {Grouped} from '../../enums/Grouped.enum';
-import {Size} from '../../enums/Size.enum';
-import {ColorType} from '../../enums/ColorType.enum';
 import AntActionButton from './AntActionButton.vue';
-import {Position} from '../../enums';
+import {Position, Size, Grouped, ColorType} from '../../enums';
+import {faFloppyDisk} from '@fortawesome/free-solid-svg-icons';
 
 defineEmits(['click', 'blur']);
 withDefaults(defineProps<{
+	iconVariant?: boolean;
 	size?: Size;
 	disabled?: boolean;
 	grouped?: Grouped;
 	skeleton?: boolean;
 	expanded?: boolean;
 	canSave?: boolean;
-	invalidPermissionTooltipPosition?: Position;
+	tooltipPosition?: Position;
 }>(), {
+	iconVariant: false,
 	canSave: true
 });
 </script>
 
 <template>
   <AntActionButton
+    :filled="true"
+    :color-type="ColorType.primary"
     :size="size"
     :disabled="disabled"
+    :icon-left="iconVariant ? faFloppyDisk : undefined"
     :grouped="grouped"
     :skeleton="skeleton"
     :expanded="expanded"
-    :color-type="ColorType.primary"
-    data-e2e="save-button"
     :has-permission="canSave"
-    :invalid-permission-tooltip-position="invalidPermissionTooltipPosition"
+    :tooltip-position="tooltipPosition"
+    data-e2e="save-button"
     @click="$emit('click')"
     @blur="$emit('blur')"
   >
-    <template #default>Save</template>
+    <template
+      v-if="!iconVariant"
+      #default
+    >
+      Save
+    </template>
 
     <template #invalidPermissionTooltipContent>
-      You have no permission to save this entry.<br>
+      You have no permission to save entries.<br>
       Please contact your administrator.
     </template>
+
+    <template #tooltipContent>
+      Save entry
+    </template>
   </AntActionButton>
 </template>

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/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/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>