@antify/ui-module 1.3.0 → 1.5.0

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

@@ -2,28 +2,41 @@
 import {Grouped} from '../../enums/Grouped.enum';
 import {Size} from '../../enums/Size.enum';
 import AntActionButton from './AntActionButton.vue';
+import {Position} from '../../enums';
 
 defineEmits(['click', 'blur']);
-defineProps<{
-  size?: Size;
-  disabled?: boolean;
-  grouped?: Grouped;
-  skeleton?: boolean;
-  expanded?: boolean;
-}>()
+withDefaults(defineProps<{
+	size?: Size;
+	disabled?: boolean;
+	grouped?: Grouped;
+	skeleton?: boolean;
+	expanded?: boolean;
+	canCreate?: boolean;
+	invalidPermissionTooltipPosition?: Position;
+}>(), {
+	canCreate: true
+});
 </script>
 
 <template>
   <AntActionButton
+    :filled="false"
     :size="size"
     :disabled="disabled"
     :grouped="grouped"
     :skeleton="skeleton"
     :expanded="expanded"
+    :has-permission="canCreate"
+    :invalid-permission-tooltip-position="invalidPermissionTooltipPosition"
     data-e2e="create-button"
     @click="$emit('click')"
     @blur="$emit('blur')"
   >
-    Create
+    <template #default>Create</template>
+
+    <template #invalidPermissionTooltipContent>
+      You have no permission to create new entries.<br>
+      Please contact your administrator.
+    </template>
   </AntActionButton>
 </template>

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

@@ -3,29 +3,51 @@ 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 {faTrash} from '@fortawesome/free-solid-svg-icons';
 
 defineEmits(['click', 'blur']);
-defineProps<{
-  size?: Size;
-  disabled?: boolean;
-  grouped?: Grouped;
-  skeleton?: boolean;
-  expanded?: boolean;
-}>()
+withDefaults(defineProps<{
+	iconVariant?: boolean;
+	size?: Size;
+	disabled?: boolean;
+	grouped?: Grouped;
+	skeleton?: boolean;
+	expanded?: boolean;
+	canDelete?: boolean;
+	invalidPermissionTooltipPosition?: Position;
+}>(), {
+	iconVariant: false,
+	canDelete: true
+})
 </script>
 
 <template>
   <AntActionButton
+    :icon-left="iconVariant ? faTrash : undefined"
+    :filled="false"
     :size="size"
     :disabled="disabled"
     :grouped="grouped"
     :skeleton="skeleton"
     :expanded="expanded"
     :color-type="ColorType.danger"
+    :has-permission="canDelete"
+    :invalid-permission-tooltip-position="invalidPermissionTooltipPosition"
     data-e2e="delete-button"
     @click="$emit('click')"
     @blur="$emit('blur')"
   >
-    Delete
+    <template
+      v-if="!iconVariant"
+      #default
+    >
+      Delete
+    </template>
+
+    <template #invalidPermissionTooltipContent>
+      You have no permission to delete this entry.<br>
+      Please contact your administrator.
+    </template>
   </AntActionButton>
 </template>

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

@@ -0,0 +1,42 @@
+<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 {faCopy} from '@fortawesome/free-solid-svg-icons';
+
+defineEmits(['click', 'blur']);
+withDefaults(defineProps<{
+	size?: Size;
+	disabled?: boolean;
+	grouped?: Grouped;
+	skeleton?: boolean;
+	expanded?: boolean;
+	canDuplicate?: boolean;
+	invalidPermissionTooltipPosition?: Position;
+}>(), {
+	canDuplicate: true
+});
+</script>
+
+<template>
+  <AntActionButton
+    :icon-left="faCopy"
+    :color-type="ColorType.base"
+    :size="size"
+    :disabled="disabled"
+    :grouped="grouped"
+    :skeleton="skeleton"
+    :expanded="expanded"
+    :has-permission="canDuplicate"
+    :invalid-permission-tooltip-position="invalidPermissionTooltipPosition"
+    data-e2e="create-button"
+    @click="$emit('click')"
+    @blur="$emit('blur')"
+  >
+    <template #invalidPermissionTooltipContent>
+      You have no permission to duplicate entries.<br>
+      Please contact your administrator.
+    </template>
+  </AntActionButton>
+</template>

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

@@ -2,15 +2,20 @@
 import {Grouped} from '../../enums/Grouped.enum';
 import {Size} from '../../enums/Size.enum';
 import AntActionButton from './AntActionButton.vue';
+import {Position} from '../../enums';
 
 defineEmits(['click', 'blur']);
-defineProps<{
-  size?: Size;
-  disabled?: boolean;
-  grouped?: Grouped;
-  skeleton?: boolean;
-  expanded?: boolean;
-}>()
+withDefaults(defineProps<{
+	size?: Size;
+	disabled?: boolean;
+	grouped?: Grouped;
+	skeleton?: boolean;
+	expanded?: boolean;
+	canSave?: boolean;
+	invalidPermissionTooltipPosition?: Position;
+}>(), {
+	canSave: true
+});
 </script>
 
 <template>
@@ -20,10 +25,18 @@ defineProps<{
     :grouped="grouped"
     :skeleton="skeleton"
     :expanded="expanded"
+    :filled="false"
+    :has-permission="canSave"
+    :invalid-permission-tooltip-position="invalidPermissionTooltipPosition"
     data-e2e="save-and-new-button"
     @click="$emit('click')"
     @blur="$emit('blur')"
   >
-    Save and new
+    <template #default>Save and new</template>
+
+    <template #invalidPermissionTooltipContent>
+      You have no permission to save this entry.<br>
+      Please contact your administrator.
+    </template>
   </AntActionButton>
 </template>

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

@@ -3,15 +3,20 @@ 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';
 
 defineEmits(['click', 'blur']);
-defineProps<{
-  size?: Size;
-  disabled?: boolean;
-  grouped?: Grouped;
-  skeleton?: boolean;
-  expanded?: boolean;
-}>()
+withDefaults(defineProps<{
+	size?: Size;
+	disabled?: boolean;
+	grouped?: Grouped;
+	skeleton?: boolean;
+	expanded?: boolean;
+	canSave?: boolean;
+	invalidPermissionTooltipPosition?: Position;
+}>(), {
+	canSave: true
+});
 </script>
 
 <template>
@@ -23,9 +28,16 @@ defineProps<{
     :expanded="expanded"
     :color-type="ColorType.primary"
     data-e2e="save-button"
+    :has-permission="canSave"
+    :invalid-permission-tooltip-position="invalidPermissionTooltipPosition"
     @click="$emit('click')"
     @blur="$emit('blur')"
   >
-    Save
+    <template #default>Save</template>
+
+    <template #invalidPermissionTooltipContent>
+      You have no permission to save this entry.<br>
+      Please contact your administrator.
+    </template>
   </AntActionButton>
 </template>

package/src/runtime/components/crud/AntCrud.vue

@@ -7,33 +7,36 @@ withDefaults(defineProps<{
 </script>
 
 <template>
-  <div class="flex w-full h-full" data-e2e="crud">
+  <div
+    class="flex w-full h-full"
+    data-e2e="crud"
+  >
     <div
       class="left-content h-full flex flex-col bg-neutral-300 gap-px overflow-hidden"
       :class="{'w-[40rem]': showDetail, 'w-full': !showDetail}"
     >
-      <div class="bg-neutral-50">
-        <slot name="search-section"/>
+      <div class="bg-white">
+        <slot name="search-section" />
       </div>
 
-      <div class="bg-neutral-50 flex-grow h-full overflow-hidden">
-        <slot name="table-section"/>
+      <div class="bg-white flex-grow h-full overflow-hidden">
+        <slot name="table-section" />
       </div>
 
-      <div class="bg-neutral-50">
-        <slot name="table-nav-section"/>
+      <div class="bg-white">
+        <slot name="table-nav-section" />
       </div>
     </div>
 
-    <transition name="right-content">
+    <Transition name="right-content">
       <div
         v-if="showDetail"
         class="flex flex-col gap-px border-l border-neutral-300 overflow-hidden"
         :class="{'w-full': showDetail}"
       >
-        <slot/>
+        <slot />
       </div>
-    </transition>
+    </Transition>
   </div>
 </template>
 

package/src/runtime/components/crud/AntCrudDetail.vue

@@ -2,7 +2,7 @@
   <div class="flex flex-col bg-neutral-300 gap-px h-full" data-e2e="crud-detail">
     <slot name="header"/>
 
-    <div class="flex-grow bg-neutral-50 h-full overflow-y-auto">
+    <div class="flex-grow bg-white h-full overflow-y-auto">
       <slot/>
     </div>
 

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

@@ -8,14 +8,19 @@ defineEmits(['back', 'save', 'save-and-new']);
 withDefaults(defineProps<{
   disabled?: boolean
   skeleton?: boolean
+	canSave?: boolean
 }>(), {
   disabled: false,
   skeleton: false,
+	canSave: true
 });
 </script>
 
 <template>
-  <div class="flex justify-between p-2.5 gap-2.5 bg-neutral-50" data-e2e="crud-detail-actions">
+  <div
+    class="flex justify-between p-2.5 gap-2.5 bg-white"
+    data-e2e="crud-detail-actions"
+  >
     <div class="flex gap-2.5">
       <slot name="buttons-left">
         <AntButton
@@ -31,21 +36,23 @@ withDefaults(defineProps<{
     </div>
 
     <div class="flex gap-2.5">
-      <slot name="before-buttons-right"/>
+      <slot name="before-buttons-right" />
       <slot name="buttons-right">
         <AntSaveAndNewButton
           :skeleton="skeleton"
           :disabled="disabled"
+          :can-save="canSave"
           @click="$emit('save-and-new')"
         />
 
         <AntSaveButton
           :skeleton="skeleton"
           :disabled="disabled"
+          :can-save="canSave"
           @click="$emit('save')"
         />
       </slot>
-      <slot name="after-buttons-right"/>
+      <slot name="after-buttons-right" />
     </div>
   </div>
 </template>

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