@antify/ui-module 1.6.0 → 1.7.2

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

@@ -1,19 +1,19 @@
 import AntButton from "../AntButton.vue";
-import AntFormGroupLabel from "../../form/AntFormGroupLabel.vue";
-import AntFormGroup from "../../form/AntFormGroup.vue";
+import AntFormGroupLabel from "../../forms/AntFormGroupLabel.vue";
+import AntFormGroup from "../../forms/AntFormGroup.vue";
 import { faCaretRight, faCaretLeft } from "@fortawesome/free-solid-svg-icons";
 import { Size } from "../../../enums/Size.enum.mjs";
 import { Grouped as _Grouped } from "../../../enums/Grouped.enum.mjs";
-import { ColorType, InputColorType, Position } from "../../../enums/index.mjs";
+import { State, InputState, Position } from "../../../enums/index.mjs";
 import { within } from "@storybook/test";
 const meta = {
   component: AntButton,
   title: "Components/Buttons/Button",
   parameters: { controls: { sort: "requiredFirst" } },
   argTypes: {
-    colorType: {
+    state: {
       control: { type: "select" },
-      options: Object.values(ColorType)
+      options: Object.values(State)
     },
     grouped: {
       control: { type: "select" },
@@ -21,7 +21,7 @@ const meta = {
       description: "Where is this fields position in a group"
     },
     size: {
-      control: { type: "radio" },
+      control: { type: "select" },
       options: Object.values(Size),
       description: "Defines the size of the button"
     },
@@ -46,9 +46,9 @@ const meta = {
       options: Object.values(Position),
       description: "The tooltips position. Tooltip is only shown if a tooltip-content slot is provided."
     },
-    tooltipColorType: {
+    tooltipState: {
       control: { type: "select" },
-      options: Object.values(InputColorType),
+      options: Object.values(InputState),
       description: "The tooltips color type. Tooltip is only shown if a tooltip-content slot is provided."
     }
   }
@@ -192,100 +192,100 @@ export const Summary = {
 						Grouped | Filled | Outlined combinations
 					</AntFormGroupLabel>
 					<div class="flex">
-						<AntButton v-bind="args" color-type="base" grouped="left" :filled="true" :outlined="false">
+						<AntButton v-bind="args" state="base" grouped="left" :filled="true" :outlined="false">
 							Button
 						</AntButton>
-						<AntButton v-bind="args" color-type="base" grouped="center" :filled="false" :outlined="false">
+						<AntButton v-bind="args" state="base" grouped="center" :filled="false" :outlined="false">
 							Button
 						</AntButton>
-						<AntButton v-bind="args" color-type="base" grouped="center" :filled="true" :outlined="true">
+						<AntButton v-bind="args" state="base" grouped="center" :filled="true" :outlined="true">
 							Button
 						</AntButton>
-						<AntButton v-bind="args" color-type="base" grouped="right" :filled="false" :outlined="true">
+						<AntButton v-bind="args" state="base" grouped="right" :filled="false" :outlined="true">
 							Button
 						</AntButton>
 					</div>
 					<div class="flex">
-						<AntButton v-bind="args" color-type="primary" grouped="left" :filled="true" :outlined="false">
+						<AntButton v-bind="args" state="primary" grouped="left" :filled="true" :outlined="false">
 							Button
 						</AntButton>
-						<AntButton v-bind="args" color-type="primary" grouped="center" :filled="false" :outlined="false">
+						<AntButton v-bind="args" state="primary" grouped="center" :filled="false" :outlined="false">
 							Button
 						</AntButton>
-						<AntButton v-bind="args" color-type="primary" grouped="center" :filled="true" :outlined="true">
+						<AntButton v-bind="args" state="primary" grouped="center" :filled="true" :outlined="true">
 							Button
 						</AntButton>
-						<AntButton v-bind="args" color-type="primary" grouped="right" :filled="false" :outlined="true">
+						<AntButton v-bind="args" state="primary" grouped="right" :filled="false" :outlined="true">
 							Button
 						</AntButton>
 					</div>
 					<div class="flex">
-						<AntButton v-bind="args" color-type="secondary" grouped="left" :filled="true" :outlined="false">
+						<AntButton v-bind="args" state="secondary" grouped="left" :filled="true" :outlined="false">
 							Button
 						</AntButton>
-						<AntButton v-bind="args" color-type="secondary" grouped="center" :filled="false" :outlined="false">
+						<AntButton v-bind="args" state="secondary" grouped="center" :filled="false" :outlined="false">
 							Button
 						</AntButton>
-						<AntButton v-bind="args" color-type="secondary" grouped="center" :filled="true" :outlined="true">
+						<AntButton v-bind="args" state="secondary" grouped="center" :filled="true" :outlined="true">
 							Button
 						</AntButton>
-						<AntButton v-bind="args" color-type="secondary" grouped="right" :filled="false" :outlined="true">
+						<AntButton v-bind="args" state="secondary" grouped="right" :filled="false" :outlined="true">
 							Button
 						</AntButton>
 					</div>
 					<div class="flex">
-						<AntButton v-bind="args" color-type="success" grouped="left" :filled="true" :outlined="false">
+						<AntButton v-bind="args" state="success" grouped="left" :filled="true" :outlined="false">
 							Button
 						</AntButton>
-						<AntButton v-bind="args" color-type="success" grouped="center" :filled="false" :outlined="false">
+						<AntButton v-bind="args" state="success" grouped="center" :filled="false" :outlined="false">
 							Button
 						</AntButton>
-						<AntButton v-bind="args" color-type="success" grouped="center" :filled="true" :outlined="true">
+						<AntButton v-bind="args" state="success" grouped="center" :filled="true" :outlined="true">
 							Button
 						</AntButton>
-						<AntButton v-bind="args" color-type="success" grouped="right" :filled="false" :outlined="true">
+						<AntButton v-bind="args" state="success" grouped="right" :filled="false" :outlined="true">
 							Button
 						</AntButton>
 					</div>
 					<div class="flex">
-						<AntButton v-bind="args" color-type="info" grouped="left" :filled="true" :outlined="false">
+						<AntButton v-bind="args" state="info" grouped="left" :filled="true" :outlined="false">
 							Button
 						</AntButton>
-						<AntButton v-bind="args" color-type="info" grouped="center" :filled="false" :outlined="false">
+						<AntButton v-bind="args" state="info" grouped="center" :filled="false" :outlined="false">
 							Button
 						</AntButton>
-						<AntButton v-bind="args" color-type="info" grouped="center" :filled="true" :outlined="true">
+						<AntButton v-bind="args" state="info" grouped="center" :filled="true" :outlined="true">
 							Button
 						</AntButton>
-						<AntButton v-bind="args" color-type="info" grouped="right" :filled="false" :outlined="true">
+						<AntButton v-bind="args" state="info" grouped="right" :filled="false" :outlined="true">
 							Button
 						</AntButton>
 					</div>
 					<div class="flex">
-						<AntButton v-bind="args" color-type="warning" grouped="left" :filled="true" :outlined="false">
+						<AntButton v-bind="args" state="warning" grouped="left" :filled="true" :outlined="false">
 							Button
 						</AntButton>
-						<AntButton v-bind="args" color-type="warning" grouped="center" :filled="false" :outlined="false">
+						<AntButton v-bind="args" state="warning" grouped="center" :filled="false" :outlined="false">
 							Button
 						</AntButton>
-						<AntButton v-bind="args" color-type="warning" grouped="center" :filled="true" :outlined="true">
+						<AntButton v-bind="args" state="warning" grouped="center" :filled="true" :outlined="true">
 							Button
 						</AntButton>
-						<AntButton v-bind="args" color-type="warning" grouped="right" :filled="false" :outlined="true">
+						<AntButton v-bind="args" state="warning" grouped="right" :filled="false" :outlined="true">
 							Button
 						</AntButton>
 					</div>
 					<div class="flex">
-						<AntButton v-bind="args" color-type="danger" grouped="left" :filled="true" :outlined="false">
+						<AntButton v-bind="args" state="danger" grouped="left" :filled="true" :outlined="false">
 							Button
 						</AntButton>
-						<AntButton v-bind="args" color-type="danger" grouped="center" :filled="false" :outlined="false">
+						<AntButton v-bind="args" state="danger" grouped="center" :filled="false" :outlined="false">
 							Button
 						</AntButton>
-						<AntButton v-bind="args" color-type="danger" grouped="center" :filled="true" :outlined="true">
+						<AntButton v-bind="args" state="danger" grouped="center" :filled="true" :outlined="true">
 							Button
 						</AntButton>
-						<AntButton v-bind="args" color-type="danger" grouped="right" :filled="false" :outlined="true">
+						<AntButton v-bind="args" state="danger" grouped="right" :filled="false" :outlined="true">
 							Button
 						</AntButton>
 					</div>
@@ -296,8 +296,11 @@ export const Summary = {
 						Size
 					</AntFormGroupLabel>
 					<AntFormGroup direction="row">
+						<AntButton v-bind="args" size="lg">Button</AntButton>
 						<AntButton v-bind="args" size="md">Button</AntButton>
 						<AntButton v-bind="args" size="sm">Button</AntButton>
+						<AntButton v-bind="args" size="xs">Button</AntButton>
+						<AntButton v-bind="args" size="2xs">Button</AntButton>
 					</AntFormGroup>
 				</AntFormGroup>
 			</div>

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

@@ -6,7 +6,7 @@ const meta = {
   parameters: { controls: { sort: "requiredFirst" } },
   argTypes: {
     size: {
-      control: { type: "radio" },
+      control: { type: "select" },
       options: Object.values(Size)
     },
     grouped: {

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

@@ -6,7 +6,7 @@ const meta = {
   parameters: { controls: { sort: "requiredFirst" } },
   argTypes: {
     size: {
-      control: { type: "radio" },
+      control: { type: "select" },
       options: Object.values(Size)
     },
     grouped: {

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

@@ -6,7 +6,7 @@ const meta = {
   parameters: { controls: { sort: "requiredFirst" } },
   argTypes: {
     size: {
-      control: { type: "radio" },
+      control: { type: "select" },
       options: Object.values(Size)
     },
     grouped: {

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

@@ -6,7 +6,7 @@ const meta = {
   parameters: { controls: { sort: "requiredFirst" } },
   argTypes: {
     size: {
-      control: { type: "radio" },
+      control: { type: "select" },
       options: Object.values(Size)
     },
     grouped: {

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

@@ -6,7 +6,7 @@ const meta = {
   parameters: { controls: { sort: "requiredFirst" } },
   argTypes: {
     size: {
-      control: { type: "radio" },
+      control: { type: "select" },
       options: Object.values(Size)
     },
     grouped: {

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

@@ -6,7 +6,7 @@ const meta = {
   parameters: { controls: { sort: "requiredFirst" } },
   argTypes: {
     size: {
-      control: { type: "radio" },
+      control: { type: "select" },
       options: Object.values(Size)
     },
     grouped: {

package/dist/runtime/components/buttons/__types/index.d.ts

@@ -1 +1 @@
-export * from './AntButton.type';
+export * from './AntButton.types';

package/dist/runtime/components/buttons/__types/index.mjs

@@ -1 +1 @@
-export * from "./AntButton.type.mjs";
+export * from "./AntButton.types.mjs";

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

@@ -18,14 +18,14 @@ withDefaults(defineProps<{
 
 <template>
   <div
-    class="flex justify-between p-2.5 gap-2.5 bg-white"
+    class="flex justify-between p-2 gap-2 bg-white"
     data-e2e="crud-detail-actions"
   >
     <div class="flex gap-2.5">
       <slot name="buttons-left">
         <AntButton
           :outlined="false"
-          :filled="true"
+          :filled="false"
           :icon-left="faAngleLeft"
           :disabled="disabled"
           @click="$emit('back')"

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

@@ -13,9 +13,14 @@ withDefaults(defineProps<{
 	deleteButtonDisabled?: boolean
 	getEntityName: () => string
 	canDelete?: boolean
+  showDeleteButton?: boolean
+  skeleton?: boolean
 }>(), {
+  tabItems: () => [],
 	deleteButtonDisabled: false,
-	canDelete: true
+	canDelete: true,
+  showDeleteButton: true,
+  skeleton: false
 });
 
 const dialogOpen = ref(false);
@@ -23,7 +28,7 @@ const dialogOpen = ref(false);
 
 <template>
   <div
-    class="flex justify-between items-stretch gap-2.5 bg-white"
+    class="flex justify-between items-stretch gap-2 bg-white"
     data-e2e="crud-detail-nav"
   >
     <slot name="tabs">
@@ -32,12 +37,14 @@ const dialogOpen = ref(false);
       />
     </slot>
 
-    <div class="flex gap-2.5 pr-2.5 py-2.5">
+    <div class="flex gap-2 pr-2 py-2">
       <slot name="buttons">
         <slot name="before-delete-button" />
 
         <AntDeleteButton
+          v-if="showDeleteButton"
           :disabled="deleteButtonDisabled || !canDelete"
+          :skeleton="skeleton"
           filled
           :can-delete="canDelete"
           :invalid-permission-tooltip-position="Position.left"

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

@@ -1,12 +1,12 @@
 <script lang="ts" setup>
 // TODO:: This component works only with vue-router. Make it work in storybook.
-import AntSearch from '../form/AntSearch.vue';
+import AntSearch from '../inputs/AntSearch.vue';
 import AntCreateButton from '../buttons/AntCreateButton.vue';
 import AntDropdown from '../AntDropdown.vue';
 import {computed, ref, watch} from 'vue';
 import AntButton from '../buttons/AntButton.vue';
 import {faFilter, faMultiply} from '@fortawesome/free-solid-svg-icons';
-import {ColorType, Grouped, Position} from '../../enums';
+import {State, Grouped, Position} from '../../enums';
 import {useRoute, useRouter} from 'vue-router';
 
 const props = withDefaults(defineProps<{
@@ -29,14 +29,14 @@ const router = useRouter();
 const route = useRoute();
 
 const showDropdown = ref(false);
-const _fullWidth = ref(props.fullWidth)
+const _fullWidth = ref(props.fullWidth);
 const search = computed({
 	get: () => route.query[props.searchQuery] as string || '',
 	set: (value) => {
 		const query = {
 			...route.query,
 			[props.searchQuery]: value
-		}
+		};
 
 		if (!value) {
 			delete query[props.searchQuery];
@@ -46,23 +46,23 @@ const search = computed({
 			await router.replace({
 				...route,
 				query
-			})
+			});
 
-			emit('search', value)
-		})()
+			emit('search', value);
+		})();
 	}
-})
+});
 
 watch(() => props.fullWidth, (val) => {
 	setTimeout(() => {
-		_fullWidth.value = val
-	}, val ? 250 : 300)
-})
+		_fullWidth.value = val;
+	}, val ? 250 : 300);
+});
 </script>
 
 <template>
   <div
-    class="flex h-full items-center p-2.5 gap-2.5 bg-white"
+    class="flex h-full items-center p-2 gap-2 bg-white"
     data-e2e="crud-table-filter"
   >
     <div
@@ -83,7 +83,7 @@ watch(() => props.fullWidth, (val) => {
       >
         <div class="flex">
           <AntButton
-            :color-type="hasFilter ? ColorType.info : ColorType.base"
+            :state="hasFilter ? State.info : State.base"
             :grouped="hasFilter ? Grouped.left : Grouped.none"
             :skeleton="skeleton"
             :icon-left="faFilter"
@@ -92,7 +92,7 @@ watch(() => props.fullWidth, (val) => {
 
           <AntButton
             v-if="hasFilter"
-            :color-type="ColorType.info"
+            :state="State.info"
             :grouped="Grouped.right"
             :skeleton="skeleton"
             :icon-left="faMultiply"

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

@@ -4,14 +4,14 @@
  * TODO:: test me in storybook through vue router
  * TODO:: fix ts errors
  */
-import {useRouter, useRoute} from 'vue-router'
+import {useRouter, useRoute} from 'vue-router';
 import AntPagination from '../AntPagination.vue';
 import {computed, ref, watch} from 'vue';
-import AntSelect from '../form/AntSelect.vue';
+import AntSelect from '../inputs/AntSelect.vue';
 import AntSkeleton from '../AntSkeleton.vue';
-import {type SelectOption} from '../form/__types';
+import {type SelectOption} from '../inputs/__types';
 
-const emit = defineEmits(['changeItemsPerPage', 'changePage'])
+const emit = defineEmits(['changeItemsPerPage', 'changePage']);
 const props = withDefaults(
   defineProps<{
     count: number | null,
@@ -28,47 +28,47 @@ const props = withDefaults(
     validItemsPerPage: () => [20, 50, 100, 200],
     skeleton: false
   }
-)
+);
 
-const route = useRoute()
-const router = useRouter()
+const route = useRoute();
+const router = useRouter();
 const itemsPerPageOptions = computed(() =>
   props.validItemsPerPage.map(item => ({
     label: `${item}`,
     value: item
   }) as SelectOption)
-)
+);
 const page = computed(() => {
-  const _page = route.query[props.pageQuery] >= 1 ? Number.parseInt(route.query[props.pageQuery]) : 1
+  const _page = route.query[props.pageQuery] >= 1 ? Number.parseInt(route.query[props.pageQuery]) : 1;
 
   if (_page <= 0 || _page > pages.value) {
-    return 1
+    return 1;
   }
 
-  return _page
-})
+  return _page;
+});
 const itemsPerPage = computed({
   get() {
     return route.query[props.itemsPerPageQuery] ?
       Number.parseInt(route.query[props.itemsPerPageQuery]) :
-      props.validItemsPerPage[0]
+      props.validItemsPerPage[0];
   },
   set(val) {
-    const query = {...route.query}
-    query[props.itemsPerPageQuery] = `${val}`
+    const query = {...route.query};
+    query[props.itemsPerPageQuery] = `${val}`;
     delete query[props.pageQuery];
 
     (async () => {
       await router.push({
         ...route,
         query
-      })
+      });
 
-      emit('changeItemsPerPage', val)
-    })()
+      emit('changeItemsPerPage', val);
+    })();
   }
-})
-const fromItems = computed(() => (itemsPerPage.value * (page.value - 1)) + 1)
+});
+const fromItems = computed(() => (itemsPerPage.value * (page.value - 1)) + 1);
 const toItems = computed(() => {
 	const items = itemsPerPage.value * page.value;
 
@@ -77,15 +77,15 @@ const toItems = computed(() => {
 	}
 
 	return itemsPerPage.value * page.value;
-})
-const pages = computed(() => Math.ceil(props.count / itemsPerPage.value))
-const _fullWidth = ref(props.fullWidth)
+});
+const pages = computed(() => Math.ceil(props.count / itemsPerPage.value));
+const _fullWidth = ref(props.fullWidth);
 
 watch(() => props.fullWidth, (val) => {
   setTimeout(() => {
-    _fullWidth.value = val
-  }, val ? 300 : 200)
-})
+    _fullWidth.value = val;
+  }, val ? 300 : 200);
+});
 </script>
 
 <template>
@@ -94,7 +94,7 @@ watch(() => props.fullWidth, (val) => {
     data-e2e="crud-table-nav"
   >
     <div
-      class="flex w-full items-center p-2.5"
+      class="flex w-full items-center p-2"
       :class="{'justify-end': !_fullWidth, 'justify-between': _fullWidth}"
     >
       <div

package/dist/runtime/components/crud/__stories/AntCrud.stories.mjs

@@ -5,7 +5,7 @@ import AntCrudTableNav from "../AntCrudTableNav.vue";
 import AntTable from "../../table/AntTable.vue";
 import AntCrudTableFilter from "../AntCrudTableFilter.vue";
 import AntCrudDetail from "../AntCrudDetail.vue";
-import { AntTableRowTypes } from "../../table/__types/TableHeader.type.mjs";
+import { AntTableRowTypes } from "../../table/__types/TableHeader.types.mjs";
 const meta = {
   title: "Crud/Crud",
   component: AntCrud,

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import {InputColorType} from '../../enums';
+import {InputState} from '../../enums';
 import AntDialog from './AntDialog.vue';
 import {useVModel} from '@vueuse/core';
 
@@ -15,7 +15,7 @@ const _open = useVModel(props, 'open', emit);
 <template>
   <AntDialog
     v-model:open="_open"
-    :color-type="InputColorType.danger"
+    :state="InputState.danger"
     title="Delete"
     confirm-text="Delete"
     data-e2e="delete-dialog"
@@ -23,7 +23,7 @@ const _open = useVModel(props, 'open', emit);
     @close="() => $emit('close')"
   >
     <div>
-      Do you really want to delete <span class="font-semibold">{{entity}}</span>?
+      Do you really want to delete <span class="font-semibold">{{ entity }}</span>?
     </div>
   </AntDialog>
 </template>