@antify/ui-module 1.3.0 → 1.5.0

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

@@ -5,40 +5,46 @@ import AntTabs from '../tabs/AntTabs.vue';
 import AntDeleteButton from '../buttons/AntDeleteButton.vue';
 import AntDeleteDialog from '../dialogs/AntDeleteDialog.vue';
 import {ref} from 'vue';
+import {Position} from '../../enums';
 
 defineEmits(['delete']);
 withDefaults(defineProps<{
-  tabItems?: TabItem[]
-  disabled?: boolean
-  getEntityName: () => string
+	tabItems?: TabItem[]
+	deleteButtonDisabled?: boolean
+	getEntityName: () => string
+	canDelete?: boolean
 }>(), {
-  disabled: false,
+	deleteButtonDisabled: false,
+	canDelete: true
 });
 
 const dialogOpen = ref(false);
 </script>
 
 <template>
-  <div class="flex justify-between items-stretch gap-2.5 bg-neutral-50" data-e2e="crud-detail-nav">
+  <div
+    class="flex justify-between items-stretch gap-2.5 bg-white"
+    data-e2e="crud-detail-nav"
+  >
     <slot name="tabs">
       <AntTabs
-        :tabItems="tabItems"
+        :tab-items="tabItems"
       />
     </slot>
 
     <div class="flex gap-2.5 pr-2.5 py-2.5">
       <slot name="buttons">
-        <slot name="before-delete-button"/>
+        <slot name="before-delete-button" />
 
-        <slot name="delete-button">
-          <AntDeleteButton
-            :disabled="disabled"
-            filled
-            @click="() => dialogOpen = true"
-          />
-        </slot>
+        <AntDeleteButton
+          :disabled="deleteButtonDisabled || !canDelete"
+          filled
+          :can-delete="canDelete"
+          :invalid-permission-tooltip-position="Position.left"
+          @click="() => dialogOpen = true"
+        />
 
-        <slot name="after-delete-button"/>
+        <slot name="after-delete-button" />
       </slot>
     </div>
 

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

@@ -1,10 +1,8 @@
 <script lang="ts" setup>
 // TODO:: This component works only with vue-router. Make it work in storybook.
-// TODO:: add skeleton
 import AntSearch from '../form/AntSearch.vue';
 import AntCreateButton from '../buttons/AntCreateButton.vue';
 import AntDropdown from '../AntDropdown.vue';
-import AntIcon from '../AntIcon.vue';
 import {computed, ref, watch} from 'vue';
 import AntButton from '../buttons/AntButton.vue';
 import {faFilter, faMultiply} from '@fortawesome/free-solid-svg-icons';
@@ -12,17 +10,19 @@ import {ColorType, Grouped, Position} from '../../enums';
 import {useRoute, useRouter} from 'vue-router';
 
 const props = withDefaults(defineProps<{
-  fullWidth?: boolean,
-  showFilter?: boolean,
-  searchQuery?: string,
-  hasFilter?: boolean,
-  skeleton?: boolean,
+	fullWidth?: boolean,
+	showFilter?: boolean,
+	searchQuery?: string,
+	hasFilter?: boolean,
+	canCreate?: boolean,
+	skeleton?: boolean,
 }>(), {
-  fullWidth: true,
-  showFilter: true,
-  searchQuery: 'search',
-  hasFilter: false,
-  skeleton: false,
+	fullWidth: true,
+	showFilter: true,
+	searchQuery: 'search',
+	hasFilter: false,
+	canCreate: true,
+	skeleton: false,
 });
 const emit = defineEmits(['search', 'create', 'removeFilter']);
 const router = useRouter();
@@ -31,38 +31,38 @@ const route = useRoute();
 const showDropdown = ref(false);
 const _fullWidth = ref(props.fullWidth)
 const search = computed({
-  get: () => route.query[props.searchQuery] as string || '',
-  set: (value) => {
-    const query = {
-      ...route.query,
-      [props.searchQuery]: value
-    }
+	get: () => route.query[props.searchQuery] as string || '',
+	set: (value) => {
+		const query = {
+			...route.query,
+			[props.searchQuery]: value
+		}
 
-    if (!value) {
-      delete query[props.searchQuery];
-    }
+		if (!value) {
+			delete query[props.searchQuery];
+		}
 
-    (async () => {
-      await router.replace({
-        ...route,
-        query
-      })
+		(async () => {
+			await router.replace({
+				...route,
+				query
+			})
 
-      emit('search', value)
-    })()
-  }
+			emit('search', value)
+		})()
+	}
 })
 
 watch(() => props.fullWidth, (val) => {
-  setTimeout(() => {
-    _fullWidth.value = val
-  }, val ? 250 : 300)
+	setTimeout(() => {
+		_fullWidth.value = val
+	}, val ? 250 : 300)
 })
 </script>
 
 <template>
   <div
-    class="flex h-full items-center p-2.5 gap-2.5 bg-neutral-50"
+    class="flex h-full items-center p-2.5 gap-2.5 bg-white"
     data-e2e="crud-table-filter"
   >
     <div
@@ -102,7 +102,7 @@ watch(() => props.fullWidth, (val) => {
         </div>
 
         <template #content>
-          <slot name="dropdownContent"/>
+          <slot name="dropdownContent" />
         </template>
       </AntDropdown>
     </div>
@@ -112,6 +112,8 @@ watch(() => props.fullWidth, (val) => {
         <AntCreateButton
           filled
           :skeleton="skeleton"
+          :can-create="canCreate"
+          :invalid-permission-tooltip-position="Position.left"
           @click="() => emit('create')"
         />
       </slot>

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

@@ -90,11 +90,15 @@ watch(() => props.fullWidth, (val) => {
     >
       <div
         v-if="_fullWidth"
-        class="flex gap-2 items-center text-neutral-50-font text-sm"
+        class="flex gap-2 items-center text-for-white-bg-font text-sm"
         data-e2e="items-per-page"
       >
         <span class="relative">
-          <AntSkeleton v-if="skeleton" rounded absolute/>
+          <AntSkeleton
+            v-if="skeleton"
+            rounded
+            absolute
+          />
           Items per page
         </span>
 
@@ -105,8 +109,15 @@ watch(() => props.fullWidth, (val) => {
           :expanded="false"
         />
 
-        <div v-if="count !== null" class="flex gap-1 relative">
-          <AntSkeleton v-if="skeleton" rounded absolute/>
+        <div
+          v-if="count !== null"
+          class="flex gap-1 relative"
+        >
+          <AntSkeleton
+            v-if="skeleton"
+            rounded
+            absolute
+          />
 
           <span class="font-medium">{{ fromItems }} - {{ itemsPerPage * page }}</span>
           <span>of</span>

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

@@ -80,14 +80,14 @@ function confirmDialog() {
 </script>
 
 <template>
-  <transition name="fade">
+  <Transition name="fade">
     <div
       v-if="openBackground"
       class="absolute inset-0 flex items-center justify-center z-50 cursor-pointer overflow-hidden bg-black/50 backdrop-blur-sm"
       data-e2e="dialog"
       @click.self="closeDialog"
     >
-      <transition :name="'bounce'">
+      <Transition :name="'bounce'">
         <div
           v-if="openDialog"
           class="flex flex-col gap-px bg-neutral-300 overflow-hidden cursor-auto w-96 border border-neutral-300 rounded-md shadow-md"
@@ -101,7 +101,7 @@ function confirmDialog() {
             </slot>
           </div>
 
-          <div class="bg-neutral-50 p-2.5 grow flex items-center gap-2.5 text-sm">
+          <div class="bg-white p-2.5 grow flex items-center gap-2.5 text-sm">
             <slot name="icon">
               <AntIcon
                 v-if="icons[colorType]"
@@ -112,11 +112,11 @@ function confirmDialog() {
               />
             </slot>
 
-            <slot/>
+            <slot />
           </div>
 
           <div
-            class="bg-neutral-100 p-2.5 gap-2.5 text-neutral-50-font flex w-full justify-end"
+            class="bg-neutral-100 p-2.5 gap-2.5 text-for-white-bg-font flex w-full justify-end"
           >
             <slot name="footer">
               <AntButton
@@ -137,9 +137,9 @@ function confirmDialog() {
             </slot>
           </div>
         </div>
-      </transition>
+      </Transition>
     </div>
-  </transition>
+  </Transition>
 </template>
 
 <style scoped>

package/dist/runtime/components/form/AntCheckboxWidget/AntCheckbox.vue

@@ -113,7 +113,7 @@ onMounted(() => {
         <AntIcon
           v-if="_value"
           :icon="faCheck"
-          class="absolute !text-neutral-50 pointer-events-none"
+          class="absolute !text-white pointer-events-none"
           :size="size as unknown as IconSize"
         />
 
@@ -137,7 +137,6 @@ onMounted(() => {
       </div>
     </div>
   </AntField>
-
 </template>
 
 <style scoped>

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

@@ -70,7 +70,7 @@ const _modelValue = computed({
 const valueLabel = computed(() => props.options.find(option => option.value === _modelValue.value)?.label || null);
 const inputClasses = computed(() => {
   const variants: Record<InputColorType, string> = {
-    [InputColorType.base]: 'outline-neutral-300 focus:outline-primary-500 bg-neutral-50 focus:ring-primary/25',
+    [InputColorType.base]: 'outline-neutral-300 focus:outline-primary-500 bg-white focus:ring-primary/25',
     [InputColorType.success]: 'outline-success-500 focus:outline-success-500 bg-success-100 focus:ring-success/25',
     [InputColorType.info]: 'outline-info-500 focus:outline-info-500 bg-info-100 focus:ring-info/25',
     [InputColorType.warning]: 'outline-warning-500 focus:outline-warning-500 bg-warning-100 focus:ring-warning/25',
@@ -117,7 +117,7 @@ const placeholderClasses = computed(() => {
 });
 const inputValueClasses = computed(() => {
   const variants: Record<InputColorType, string> = {
-    [InputColorType.base]: 'text-neutral-50-font',
+    [InputColorType.base]: 'text-for-white-bg-font',
     [InputColorType.success]: 'text-success-100-font',
     [InputColorType.info]: 'text-info-100-font',
     [InputColorType.warning]: 'text-warning-100-font',
@@ -130,7 +130,7 @@ const inputValueClasses = computed(() => {
 });
 const arrowClasses = computed(() => {
   const variants: Record<InputColorType, string> = {
-    [InputColorType.base]: 'text-neutral-50-font',
+    [InputColorType.base]: 'text-for-white-bg-font',
     [InputColorType.success]: 'text-success-100-font',
     [InputColorType.info]: 'text-info-100-font',
     [InputColorType.warning]: 'text-warning-100-font',
@@ -196,103 +196,107 @@ function onClickRemoveButton() {
 
 <template>
   <AntField
-      :label="label"
-      :size="size"
-      :skeleton="skeleton"
-      :description="description"
-      :color-type="colorType"
-      :validator="validator"
-      :class="wrapperClass"
-      :show-message-on-error="showMessageOnError"
-      :expanded="expanded"
-      label-for="noop"
-      data-e2e="select"
-      @clickLabel="() => inputRef?.focus()"
+    :label="label"
+    :size="size"
+    :skeleton="skeleton"
+    :description="description"
+    :color-type="colorType"
+    :validator="validator"
+    :class="wrapperClass"
+    :show-message-on-error="showMessageOnError"
+    :expanded="expanded"
+    label-for="noop"
+    data-e2e="select"
+    @click-label="() => inputRef?.focus()"
   >
     <div
-        class="h-fit flex flex-row w-full"
+      class="h-fit flex flex-row w-full"
     >
       <div
-          class="relative w-full"
-          :class="{'cursor-pointer': !skeleton}"
-          v-on-click-outside="onClickOutside"
+        v-on-click-outside="onClickOutside"
+        class="relative w-full"
+        :class="{'cursor-pointer': !skeleton}"
       >
         <AntSkeleton
-            v-if="skeleton"
-            absolute
-            rounded
-            :grouped="skeletonGrouped"
+          v-if="skeleton"
+          absolute
+          rounded
+          :grouped="skeletonGrouped"
         />
 
-        <input type="hidden" :name="name" v-model="_modelValue">
+        <input
+          v-model="_modelValue"
+          type="hidden"
+          :name="name"
+        >
 
         <!-- Input -->
         <div
-            :class="inputClasses"
-            ref="inputRef"
-            :tabindex="disabled ? undefined : 0"
-            @mousedown="onClickSelectInput"
-            v-bind="$attrs"
-            @click="inputRef?.focus()"
+          ref="inputRef"
+          :class="inputClasses"
+          :tabindex="disabled ? undefined : 0"
+          v-bind="$attrs"
+          @mousedown="onClickSelectInput"
+          @click="inputRef?.focus()"
         >
           <div
-              v-if="_modelValue === null && placeholder !== undefined"
-              :class="placeholderClasses"
+            v-if="_modelValue === null && placeholder !== undefined"
+            :class="placeholderClasses"
           >
             {{ placeholder }}
           </div>
 
           <div
-              v-else-if="_modelValue === null && label !== undefined"
-              :class="placeholderClasses"
+            v-else-if="_modelValue === null && label !== undefined"
+            :class="placeholderClasses"
           >
             {{ label }}
           </div>
 
           <div
-              v-else
-              :class="inputValueClasses"
+            v-else
+            :class="inputValueClasses"
           >
             {{ valueLabel }}
           </div>
 
           <AntIcon
-              v-if="isOpen"
-              :icon="faChevronUp"
-              :size="size as unknown as IconSize"
-              :class="arrowClasses"
+            v-if="isOpen"
+            :icon="faChevronUp"
+            :size="size as unknown as IconSize"
+            :class="arrowClasses"
           />
 
           <AntIcon
-              v-else
-              :icon="faChevronDown"
-              :size="size as unknown as IconSize"
-              :class="arrowClasses"
+            v-else
+            :icon="faChevronDown"
+            :size="size as unknown as IconSize"
+            :class="arrowClasses"
           />
         </div>
 
         <!-- Dropdown -->
         <AntDropDown
+          ref="dropDownRef"
           v-model="_modelValue"
           v-model:open="isOpen"
-          ref="dropDownRef"
           :options="options"
           :input-ref="inputRef"
           :size="size"
           :color-type="_colorType"
-          @select-element="(e) => _modelValue = e"
           close-on-enter
+          @select-element="(e) => _modelValue = e"
         />
       </div>
 
       <AntButton
-          v-if="nullable && _modelValue !== null"
-          :icon-left="faMultiply"
-          :color-type="_colorType as unknown as ColorType"
-          :grouped="[Grouped.left, Grouped.center].some(item => item === grouped) ? Grouped.center : Grouped.right"
-          :size="size"
-          :skeleton="skeleton"
-          @click="onClickRemoveButton"
+        v-if="nullable && _modelValue !== null"
+        :icon-left="faMultiply"
+        :color-type="_colorType as unknown as ColorType"
+        :grouped="[Grouped.left, Grouped.center].some(item => item === grouped) ? Grouped.center : Grouped.right"
+        :size="size"
+        :skeleton="skeleton"
+        @click="onClickRemoveButton"
       />
     </div>
   </AntField>

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

@@ -82,7 +82,7 @@ const ballClasses = computed(() => ({
 
 const valueClasses = computed(() => {
   const classes = {
-    'text-neutral-50-font': true,
+    'text-for-white-bg-font': true,
     'text-sm': props.size === Size.sm,
     'text-md': props.size === Size.md,
     'opacity-50 cursor-not-allowed': props.disabled
@@ -115,17 +115,17 @@ function changeValue() {
           :class="buttonClasses"
           role="switch"
           :aria-checked="_value"
-          @click="changeValue"
-          @blur="validator?.validate(_value)"
           :disabled="disabled"
           :tabindex="readonly ? -1 : 1"
+          @click="changeValue"
+          @blur="validator?.validate(_value)"
         >
-        <span
-          aria-hidden="true"
-          :class="ballClasses"
-        >
-          <slot name="icon"></slot>
-        </span>
+          <span
+            aria-hidden="true"
+            :class="ballClasses"
+          >
+            <slot name="icon"></slot>
+          </span>
         </button>
 
         <AntSkeleton
@@ -135,7 +135,10 @@ function changeValue() {
         ></AntSkeleton>
       </div>
 
-      <div v-if="value" class="relative">
+      <div
+        v-if="value"
+        class="relative"
+      >
         <span :class="valueClasses">{{ value }}</span>
 
         <AntSkeleton

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

@@ -79,7 +79,7 @@ const itemClasses = computed(() => {
   };
 
   const colorVariant = {
-    [InputColorType.base]: 'border-neutral-300 bg-neutral-50 text-neutral-50-font',
+    [InputColorType.base]: 'border-neutral-300 bg-white text-for-white-bg-font',
     [InputColorType.danger]: 'border-danger-500 bg-danger-100 text-danger-100-font',
     [InputColorType.info]: 'border-info-500 bg-info-100 text-info-100-font',
     [InputColorType.success]: 'border-success-500 bg-success-100 text-success-100-font',
@@ -126,7 +126,7 @@ function nextOption() {
     :size="size"
     :skeleton="skeleton"
     :description="description"
-    :colorType="colorType"
+    :color-type="colorType"
     :validator="validator"
     label-for="noop"
   >
@@ -140,12 +140,12 @@ function nextOption() {
         :icon-left="faChevronLeft"
         :grouped="Grouped.left"
         no-focus
-        @click="prevOption"
         :color-type="_colorType as unknown as ColorType"
         :size="size"
         :skeleton="skeleton"
         :readonly="readonly"
         :disabled="disabled"
+        @click="prevOption"
       />
 
       <div class="grow relative">
@@ -168,12 +168,12 @@ function nextOption() {
         :icon-left="faChevronRight"
         :grouped="Grouped.right"
         no-focus
-        @click="nextOption"
         :color-type="_colorType as unknown as ColorType"
         :size="size"
         :skeleton="skeleton"
         :readonly="readonly"
         :disabled="disabled"
+        @click="nextOption"
       />
     </div>
   </AntField>

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

@@ -55,7 +55,7 @@ const icons = {
 };
 const inputClasses = computed(() => {
   const variants: Record<InputColorType, string> = {
-    [InputColorType.base]: 'outline-neutral-300 focus:outline-primary-500 focus:ring-primary/25 bg-neutral-50 placeholder:text-neutral-500',
+    [InputColorType.base]: 'outline-neutral-300 focus:outline-primary-500 focus:ring-primary/25 bg-white placeholder:text-neutral-500',
     [InputColorType.danger]: 'outline-danger-500 focus:outline-danger-500 focus:ring-danger/25 bg-danger-100 placeholder:text-danger-700',
     [InputColorType.info]: 'outline-info-500 focus:outline-info-500 focus:ring-info/25 bg-info-100 placeholder:text-info-700',
     [InputColorType.success]: 'outline-success-500 focus:outline-success-500 focus:ring-success/25 bg-success-100 placeholder:text-success-700',
@@ -132,12 +132,15 @@ function onBlur(e: FocusEvent) {
     :size="size"
     :skeleton="skeleton"
     :description="description"
-    :colorType="colorType"
+    :color-type="colorType"
     :limiter-max-value="limiter && max !== undefined ? max : undefined"
     :limiter-value="limiter ? _modelValue.length : undefined"
     :errors="errors"
   >
-    <div class="block relative w-full" :class="{...{'-mr-px': grouped !== Grouped.none}, ..._wrapperClass}">
+    <div
+      class="block relative w-full"
+      :class="{...{'-mr-px': grouped !== Grouped.none}, ..._wrapperClass}"
+    >
       <textarea
         v-model="_modelValue"
         :class="inputClasses"