@antify/ui 2.5.7 → 3.1.0

package/dist/components/inputs/__stories/AntCheckbox.stories.mjs

@@ -89,6 +89,7 @@ export const Summary = {
         <AntFormGroup direction="row">
           <AntCheckbox
             v-model="offValue"
+            v-bind="args"
             class="w-28"
             :state="InputState.base"
             label="Label"
@@ -97,6 +98,7 @@ export const Summary = {
           />
           <AntCheckbox
             v-model="offValue"
+            v-bind="args"
             class="w-28"
             :state="InputState.info"
             label="Label"
@@ -105,6 +107,7 @@ export const Summary = {
           />
           <AntCheckbox
             v-model="offValue"
+            v-bind="args"
             class="w-28"
             :state="InputState.success"
             label="Label"
@@ -113,6 +116,7 @@ export const Summary = {
           />
           <AntCheckbox
             v-model="offValue"
+            v-bind="args"
             class="w-28"
             :state="InputState.warning"
             label="Label"
@@ -121,6 +125,7 @@ export const Summary = {
           />
           <AntCheckbox
             v-model="offValue"
+            v-bind="args"
             class="w-28"
             :state="InputState.danger"
             label="Label"
@@ -133,6 +138,7 @@ export const Summary = {
         <AntFormGroup direction="row">
           <AntCheckbox
             v-model="onValue"
+            v-bind="args"
             class="w-28"
             :state="InputState.base"
             label="Label"
@@ -141,6 +147,7 @@ export const Summary = {
           />
           <AntCheckbox
             v-model="onValue"
+            v-bind="args"
             class="w-28"
             :state="InputState.info"
             label="Label"
@@ -149,6 +156,7 @@ export const Summary = {
           />
           <AntCheckbox
             v-model="onValue"
+            v-bind="args"
             class="w-28"
             :state="InputState.success"
             label="Label"
@@ -157,6 +165,7 @@ export const Summary = {
           />
           <AntCheckbox
             v-model="onValue"
+            v-bind="args"
             class="w-28"
             :state="InputState.warning"
             label="Label"
@@ -165,6 +174,7 @@ export const Summary = {
           />
           <AntCheckbox
             v-model="onValue"
+            v-bind="args"
             class="w-28"
             :state="InputState.danger"
             label="Label"
@@ -177,6 +187,7 @@ export const Summary = {
         <AntFormGroup direction="row">
           <AntCheckbox
             v-model="offValue"
+            v-bind="args"
             class="w-28"
             :size="Size.lg"
             label="Label"
@@ -184,6 +195,7 @@ export const Summary = {
           />
           <AntCheckbox
             v-model="onValue"
+            v-bind="args"
             class="w-28"
             :size="Size.lg"
             label="Label"
@@ -191,6 +203,7 @@ export const Summary = {
           />
           <AntCheckbox
             v-model="offValue"
+            v-bind="args"
             class="w-28"
             :size="Size.md"
             label="Label"
@@ -198,6 +211,7 @@ export const Summary = {
           />
           <AntCheckbox
             v-model="onValue"
+            v-bind="args"
             class="w-28"
             :size="Size.md"
             label="Label"
@@ -205,6 +219,7 @@ export const Summary = {
           />
           <AntCheckbox
             v-model="offValue"
+            v-bind="args"
             class="w-28"
             :size="Size.sm"
             label="Label"
@@ -212,6 +227,7 @@ export const Summary = {
           />
           <AntCheckbox
             v-model="onValue"
+            v-bind="args"
             class="w-28"
             :size="Size.sm"
             label="Label"
@@ -219,6 +235,7 @@ export const Summary = {
           />
           <AntCheckbox
             v-model="offValue"
+            v-bind="args"
             class="w-28"
             :size="Size.xs"
             label="Label"
@@ -226,6 +243,7 @@ export const Summary = {
           />
           <AntCheckbox
             v-model="onValue"
+            v-bind="args"
             class="w-28"
             :size="Size.xs"
             label="Label"
@@ -233,6 +251,7 @@ export const Summary = {
           />
           <AntCheckbox
             v-model="offValue"
+            v-bind="args"
             class="w-28"
             :size="Size.xs2"
             label="Label"
@@ -240,6 +259,7 @@ export const Summary = {
           />
           <AntCheckbox
             v-model="onValue"
+            v-bind="args"
             class="w-28"
             :size="Size.xs"
             label="Label"
@@ -252,6 +272,7 @@ export const Summary = {
             <AntFormGroup direction="row">
               <AntCheckbox
                 v-model="offValue"
+                v-bind="args"
                 class="w-28"
                 label="Label"
                 description="Lorem ipsum dolor sit amet."
@@ -261,6 +282,7 @@ export const Summary = {
               </AntCheckbox>
               <AntCheckbox
                 v-model="onValue"
+                v-bind="args"
                 class="w-28"
                 label="Label"
                 description="Lorem ipsum dolor sit amet."
@@ -275,6 +297,7 @@ export const Summary = {
             <AntFormGroup direction="row">
               <AntCheckbox
                 v-model="offValue"
+                v-bind="args"
                 :readonly="true"
                 class="w-28"
                 label="Label"
@@ -284,6 +307,7 @@ export const Summary = {
               </AntCheckbox>
               <AntCheckbox
                 v-model="onValue"
+                v-bind="args"
                 :readonly="true"
                 class="w-28"
                 label="Label"
@@ -297,6 +321,7 @@ export const Summary = {
             <AntFormGroupLabel>Skeleton</AntFormGroupLabel>
             <AntCheckbox
               v-model="offValue"
+              v-bind="args"
               class="w-28"
               label="Label"
               description="Lorem ipsum dolor sit amet."
@@ -308,49 +333,50 @@ export const Summary = {
         </AntFormGroup>
         <AntFormGroupLabel>Plain</AntFormGroupLabel>
         <AntFormGroup direction="row">
-          <AntCheckbox v-model="offValue"/>
-          <AntCheckbox v-model="onValue"/>
+          <AntCheckbox v-model="offValue" v-bind="args" />
+          <AntCheckbox v-model="onValue"  v-bind="args" />
         </AntFormGroup>
         <AntFormGroupLabel>Label & label + value</AntFormGroupLabel>
         <AntFormGroup direction="row">
-          <AntCheckbox v-model="offValue" label="Label"/>
-          <AntCheckbox v-model="onValue" label="Label"/>
-          <AntCheckbox v-model="offValue" label="Label">
+          <AntCheckbox v-model="offValue" v-bind="args" label="Label"/>
+          <AntCheckbox v-model="onValue" v-bind="args" label="Label"/>
+          <AntCheckbox v-model="offValue" v-bind="args" label="Label">
             Value
           </AntCheckbox>
-          <AntCheckbox v-model="onValue" label="Label">
+          <AntCheckbox v-model="onValue" v-bind="args" label="Label">
             Value
           </AntCheckbox>
         </AntFormGroup>
         <AntFormGroupLabel>Description & description + value</AntFormGroupLabel>
         <AntFormGroup direction="row">
-          <AntCheckbox v-model="offValue" class="w-28" description="Lorem ipsum dolor sit amet"/>
-          <AntCheckbox v-model="onValue" class="w-28" description="Lorem ipsum dolor sit amet"/>
-          <AntCheckbox v-model="offValue" class="w-28" description="Lorem ipsum dolor sit amet">
+          <AntCheckbox v-model="offValue" v-bind="args" class="w-28" description="Lorem ipsum dolor sit amet"/>
+          <AntCheckbox v-model="onValue" v-bind="args" class="w-28" description="Lorem ipsum dolor sit amet"/>
+          <AntCheckbox v-model="offValue" v-bind="args" class="w-28" description="Lorem ipsum dolor sit amet">
             Value
           </AntCheckbox>
-          <AntCheckbox v-model="onValue" class="w-28" description="Lorem ipsum dolor sit amet">
+          <AntCheckbox v-model="onValue" v-bind="args" class="w-28" description="Lorem ipsum dolor sit amet">
             Value
           </AntCheckbox>
         </AntFormGroup>
         <AntFormGroupLabel>Content</AntFormGroupLabel>
         <AntFormGroup direction="row">
-          <AntCheckbox v-model="offValue" class="w-28">
+          <AntCheckbox v-model="offValue" v-bind="args" class="w-28">
             Value
           </AntCheckbox>
-          <AntCheckbox v-model="onValue" class="w-28">
+          <AntCheckbox v-model="onValue" v-bind="args" class="w-28">
             Value
           </AntCheckbox>
         </AntFormGroup>
         <AntFormGroupLabel>Label & Description</AntFormGroupLabel>
         <AntFormGroup direction="row">
-          <AntCheckbox v-model="offValue" class="w-28" description="Lorem ipsum dolor sit amet" label="Label"/>
-          <AntCheckbox v-model="onValue" class="w-28" description="Lorem ipsum dolor sit amet" label="Label"/>
+          <AntCheckbox v-model="offValue" v-bind="args" class="w-28" description="Lorem ipsum dolor sit amet" label="Label"/>
+          <AntCheckbox v-model="onValue" v-bind="args" class="w-28" description="Lorem ipsum dolor sit amet" label="Label"/>
         </AntFormGroup>
         <AntFormGroupLabel>Label & Description & Content</AntFormGroupLabel>
         <AntFormGroup direction="row">
           <AntCheckbox
             v-model="offValue"
+            v-bind="args"
             class="w-28"
             description="Lorem ipsum dolor sit amet"
             label="Label"
@@ -359,6 +385,7 @@ export const Summary = {
           </AntCheckbox>
           <AntCheckbox
             v-model="onValue"
+            v-bind="args"
             class="w-28"
             description="Lorem ipsum dolor sit amet"
             label="Label"

package/dist/components/table/AntTable.vue

@@ -27,6 +27,9 @@ import {
 import AntButton from '../AntButton.vue';
 import AntIcon from '../AntIcon.vue';
 import AntTableSkeleton from './AntTableSkeleton.vue';
+import {
+  useFlickerProtection,
+} from '../../composables/useFlickerProtection';
 
 defineOptions({
   inheritAttrs: false,
@@ -34,7 +37,6 @@ defineOptions({
 
 const emits = defineEmits([
   'update:modelValue',
-  'update:skeleton',
   'update:selectedRow',
   'rowClick',
   'updateSort',
@@ -53,6 +55,7 @@ const props = withDefaults(defineProps<{
   emptyStateText?: string;
   collapseStrategy?: CollapseStrategy;
   expandedRows?: boolean;
+  skeleton?: boolean;
 }>(), {
   rowKey: 'id',
   loading: false,
@@ -63,11 +66,11 @@ const props = withDefaults(defineProps<{
   emptyStateText: 'We couldn\'t find any entry',
   collapseStrategy: CollapseStrategy.single,
   expandedRows: false,
+  skeleton: false,
 });
 const slots = defineSlots();
 const openItems = ref<number[]>([]);
 const selected: Ref<Record<string, unknown> | undefined> = useVModel(props, 'selectedRow', emits);
-const _loading: Ref<boolean> = useVModel(props, 'loading', emits);
 const _showLightVersion = ref(props.showLightVersion);
 const _headers = computed(() => {
   // if (_showLightVersion.value) {
@@ -78,9 +81,10 @@ const _headers = computed(() => {
 
   return props.headers;
 });
+const _skeleton = useFlickerProtection(computed(() => props.skeleton));
+const _loading = useFlickerProtection(computed(() => props.loading));
 
 const maxColSpan = computed(() => _headers.value.length + (hasSlotContent(slots['rowFirstCell']) ? 1 : 0) + (hasSlotContent(slots['rowLastCell']) ? 1 : 0));
-const skeleton = computed(() => !props.data || props.data.length === 0 && _loading.value);
 
 function sortTable(header: TableHeader, newDirection: AntTableSortDirection) {
   // TODO:: Sorting is always done externally, here should only be a emit sort with header and direction.
@@ -180,7 +184,7 @@ onMounted(() => {
     data-e2e="table"
   >
     <div
-      v-if="!skeleton"
+      v-if="!_skeleton"
       class="overflow-hidden h-full overflow-x-auto overflow-y-auto"
     >
       <table
@@ -307,7 +311,7 @@ onMounted(() => {
             </template>
           </template>
 
-          <tr v-if="data.length === 0 && !_loading">
+          <tr v-if="data.length === 0">
             <td
               colspan="100"
               class="w-full h-full py-2 text-center text-for-white-bg-font text-lg"
@@ -324,7 +328,7 @@ onMounted(() => {
     </div>
 
     <div
-      v-if="data.length > 0 && _loading"
+      v-if="_loading"
       class="absolute w-full top-0 bottom-0 bg-base-300/50 flex items-center justify-center z-10"
     >
       <AntSpinner
@@ -334,7 +338,7 @@ onMounted(() => {
     </div>
 
     <AntTableSkeleton
-      v-if="skeleton"
+      :visible="_skeleton"
       :headers="_headers"
       :size="size"
       :get-row-classes="getRowClasses"

package/dist/components/table/AntTableSkeleton.vue

@@ -7,6 +7,7 @@ import AntTh from './AntTh.vue';
 import AntSkeleton from '../AntSkeleton.vue';
 
 withDefaults(defineProps<{
+  visible: boolean;
   headers: TableHeader[];
   getRowClasses: (element: Record<string, unknown>, rowIndex: number) => {};
   size?: AntTableSize;
@@ -20,7 +21,10 @@ withDefaults(defineProps<{
 </script>
 
 <template>
-  <div class="overflow-hidden h-full overflow-x-auto overflow-y-auto">
+  <div
+    v-if="visible"
+    class="overflow-hidden h-full overflow-x-auto overflow-y-auto"
+  >
     <table
       class="min-w-full max-h-full relative"
     >

package/dist/components/tabs/AntTabItem.vue

@@ -122,14 +122,12 @@ const iconColor = computed(() => {
       />
     </slot>
 
-    <div class="relative">
+    <AntSkeleton
+      :visible="skeleton"
+      rounded
+    >
       <slot>{{ label }}</slot>
-      <AntSkeleton
-        v-if="skeleton"
-        rounded
-        absolute
-      />
-    </div>
+    </AntSkeleton>
 
     <AntIcon
       v-if="iconRight && showIcon"

package/dist/composables/index.d.ts

@@ -1 +1,2 @@
 export * from './useToaster';
+export * from './useFlickerProtection';

package/dist/composables/index.js

@@ -13,4 +13,15 @@ Object.keys(_useToaster).forEach(function (key) {
       return _useToaster[key];
     }
   });
+});
+var _useFlickerProtection = require("./useFlickerProtection");
+Object.keys(_useFlickerProtection).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useFlickerProtection[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useFlickerProtection[key];
+    }
+  });
 });

package/dist/composables/index.mjs

@@ -1 +1,2 @@
 export * from "./useToaster.mjs";
+export * from "./useFlickerProtection.mjs";

package/dist/composables/useFlickerProtection.d.ts

@@ -0,0 +1,22 @@
+import { type Ref, type ComputedRef } from 'vue';
+/**
+ * Add flicker protection to a ref or computed ref to ensure
+ * the value change is not too fast and does not cause flicker.
+ *
+ * [refToWatch = true]
+ * [visible = false] [if refToWatch = false -> Finish] [visible = true] [freeze now, ignore any change]   [visible = refToWatch]        [unlock]
+ * [------------------ flickerThreshold ------------------][------------------ minShowTime ------------------]
+ *
+ * This logic is separated into 4 phases:
+ * - null: The initial phase where the value is hidden.
+ * - threshold: The initial phase where the value is hidden and waits for flicker threshold time.
+ * If in this phase, refToWatch changes to false, the process get canceled.
+ * - minShowTime: The phase where the value is shown for a minimum time.
+ * - over: The final phase where the value is shown or hidden based on the refToWatch.
+ *
+ * @param refToWatch - The ref or computed ref to watch for changes.
+ * @param minShowTime - The minimum time (in ms) the value should remain visible.
+ * @param flickerThreshold - The threshold (in ms) to ignore rapid changes.
+ * @returns A ref that manages the visibility state with flicker protection.
+ */
+export declare const useFlickerProtection: (refToWatch: Ref<boolean> | ComputedRef<boolean>, minShowTime?: number, flickerThreshold?: number) => Ref<boolean>;

package/dist/composables/useFlickerProtection.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useFlickerProtection = void 0;
+var _vue = require("vue");
+const useFlickerProtection = (refToWatch, minShowTime = 300, flickerThreshold = 50) => {
+  const visible = (0, _vue.ref)(refToWatch.value);
+  const phase = (0, _vue.ref)(null);
+  function startThresholdPhase() {
+    phase.value = "threshold";
+    visible.value = false;
+    setTimeout(() => {
+      if (refToWatch.value) {
+        startMinShowTimePhase();
+      }
+    }, flickerThreshold);
+  }
+  function startMinShowTimePhase() {
+    phase.value = "minShowTime";
+    visible.value = true;
+    setTimeout(() => {
+      visible.value = refToWatch.value;
+      phase.value = refToWatch.value ? "over" : null;
+    }, minShowTime);
+  }
+  (0, _vue.watch)(refToWatch, newValue => {
+    if (phase.value === "minShowTime") {
+      return;
+    }
+    if (phase.value === null && newValue) {
+      return startThresholdPhase();
+    }
+    if (phase.value === "threshold" && !newValue) {
+      phase.value = null;
+      return visible.value = false;
+    }
+    if (phase.value === "over" && !newValue) {
+      phase.value = null;
+      visible.value = false;
+    }
+  }, {
+    immediate: true
+  });
+  return visible;
+};
+exports.useFlickerProtection = useFlickerProtection;

package/dist/composables/useFlickerProtection.mjs

@@ -0,0 +1,48 @@
+import {
+  ref,
+  watch
+} from "vue";
+export const useFlickerProtection = (refToWatch, minShowTime = 300, flickerThreshold = 50) => {
+  const visible = ref(refToWatch.value);
+  const phase = ref(null);
+  function startThresholdPhase() {
+    phase.value = "threshold";
+    visible.value = false;
+    setTimeout(() => {
+      if (refToWatch.value) {
+        startMinShowTimePhase();
+      }
+    }, flickerThreshold);
+  }
+  function startMinShowTimePhase() {
+    phase.value = "minShowTime";
+    visible.value = true;
+    setTimeout(() => {
+      visible.value = refToWatch.value;
+      phase.value = refToWatch.value ? "over" : null;
+    }, minShowTime);
+  }
+  watch(
+    refToWatch,
+    (newValue) => {
+      if (phase.value === "minShowTime") {
+        return;
+      }
+      if (phase.value === null && newValue) {
+        return startThresholdPhase();
+      }
+      if (phase.value === "threshold" && !newValue) {
+        phase.value = null;
+        return visible.value = false;
+      }
+      if (phase.value === "over" && !newValue) {
+        phase.value = null;
+        visible.value = false;
+      }
+    },
+    {
+      immediate: true
+    }
+  );
+  return visible;
+};

package/dist/composables/useToaster.d.ts

@@ -18,4 +18,5 @@ export declare const useToaster: () => {
     toastCreated(): void;
     toastUpdated(): void;
     toastDuplicated(): void;
+    toastInvalidFormInfo(): void;
 };

package/dist/composables/useToaster.js

@@ -56,16 +56,19 @@ const useToaster = () => {
       });
     },
     toastDeleted() {
-      this.toastSuccess("Deleted");
+      this.toastSuccess("Gel\xF6scht");
     },
     toastCreated() {
-      this.toastSuccess("Saved");
+      this.toastSuccess("Gespeichert");
     },
     toastUpdated() {
-      this.toastSuccess("Saved");
+      this.toastSuccess("Gespeichert");
     },
     toastDuplicated() {
-      this.toastSuccess("Duplicated");
+      this.toastSuccess("Dupliziert");
+    },
+    toastInvalidFormInfo() {
+      this.toastInfo("Das Formular enth\xE4lt Fehler.\nBitte \xFCberpr\xFCfe alle Felder und behebe die Fehler.");
     }
   };
 };

package/dist/composables/useToaster.mjs

@@ -56,16 +56,19 @@ export const useToaster = () => {
       });
     },
     toastDeleted() {
-      this.toastSuccess("Deleted");
+      this.toastSuccess("Gel\xF6scht");
     },
     toastCreated() {
-      this.toastSuccess("Saved");
+      this.toastSuccess("Gespeichert");
     },
     toastUpdated() {
-      this.toastSuccess("Saved");
+      this.toastSuccess("Gespeichert");
     },
     toastDuplicated() {
-      this.toastSuccess("Duplicated");
+      this.toastSuccess("Dupliziert");
+    },
+    toastInvalidFormInfo() {
+      this.toastInfo("Das Formular enth\xE4lt Fehler.\nBitte \xFCberpr\xFCfe alle Felder und behebe die Fehler.");
     }
   };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antify/ui",
-  "version": "2.5.7",
+  "version": "3.1.0",
   "private": false,
   "type": "module",
   "exports": {