@antify/ui 2.5.6 → 3.0.0

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/table/AntTableSortButton.vue

@@ -6,7 +6,7 @@ import {
 import {
   AntTableSize, AntTableSortDirection,
 } from './__types/TableHeader.types';
-import AntButton from '../buttons/AntButton.vue';
+import AntButton from '../AntButton.vue';
 import {
   computed,
 } from 'vue';

package/dist/components/table/__stories/AntTable.stories.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 module.exports = exports.Skeleton = exports.MultipleCollapseStrategy = exports.Loading = exports.Empty = exports.Docs = exports.DefaultCollapseOpen = exports.Collapsible = void 0;
 var _AntTable = _interopRequireDefault(require("../AntTable.vue"));
-var _AntButton = _interopRequireDefault(require("../../buttons/AntButton.vue"));
+var _AntButton = _interopRequireDefault(require("../../AntButton.vue"));
 var _AntSelect = _interopRequireDefault(require("../../inputs/AntSelect.vue"));
 var _AntCheckboxGroup = _interopRequireDefault(require("../../inputs/AntCheckboxGroup.vue"));
 var _TableHeader = require("../__types/TableHeader.types");

package/dist/components/table/__stories/AntTable.stories.mjs

@@ -1,5 +1,5 @@
 import AntTable from "../AntTable.vue";
-import AntButton from "../../buttons/AntButton.vue";
+import AntButton from "../../AntButton.vue";
 import AntSelect from "../../inputs/AntSelect.vue";
 import AntCheckboxGroup from "../../inputs/AntCheckboxGroup.vue";
 import {

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/types.d.ts

@@ -1,6 +1,5 @@
 export * from './enums';
 export * from './components/__types';
-export * from './components/buttons/__types';
 export * from './components/inputs/__types';
 export * from './components/inputs/Elements/__types';
 export * from './components/navbar/__types';

package/dist/types.js

@@ -25,7 +25,7 @@ Object.keys(_types).forEach(function (key) {
     }
   });
 });
-var _types2 = require("./components/buttons/__types");
+var _types2 = require("./components/inputs/__types");
 Object.keys(_types2).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _types2[key]) return;
@@ -36,7 +36,7 @@ Object.keys(_types2).forEach(function (key) {
     }
   });
 });
-var _types3 = require("./components/inputs/__types");
+var _types3 = require("./components/inputs/Elements/__types");
 Object.keys(_types3).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _types3[key]) return;
@@ -47,7 +47,7 @@ Object.keys(_types3).forEach(function (key) {
     }
   });
 });
-var _types4 = require("./components/inputs/Elements/__types");
+var _types4 = require("./components/navbar/__types");
 Object.keys(_types4).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _types4[key]) return;
@@ -58,7 +58,7 @@ Object.keys(_types4).forEach(function (key) {
     }
   });
 });
-var _types5 = require("./components/navbar/__types");
+var _types5 = require("./components/table/__types");
 Object.keys(_types5).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _types5[key]) return;
@@ -69,7 +69,7 @@ Object.keys(_types5).forEach(function (key) {
     }
   });
 });
-var _types6 = require("./components/table/__types");
+var _types6 = require("./components/tabs/__types");
 Object.keys(_types6).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _types6[key]) return;
@@ -79,15 +79,4 @@ Object.keys(_types6).forEach(function (key) {
       return _types6[key];
     }
   });
-});
-var _types7 = require("./components/tabs/__types");
-Object.keys(_types7).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _types7[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _types7[key];
-    }
-  });
 });

package/dist/types.mjs

@@ -1,6 +1,5 @@
 export * from "./enums/index.mjs";
 export * from "./components/__types/index.mjs";
-export * from "./components/buttons/__types/index.mjs";
 export * from "./components/inputs/__types/index.mjs";
 export * from "./components/inputs/Elements/__types/index.mjs";
 export * from "./components/navbar/__types/index.mjs";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antify/ui",
-  "version": "2.5.6",
+  "version": "3.0.0",
   "private": false,
   "type": "module",
   "exports": {
@@ -96,6 +96,10 @@
     "vitest": "^1.6.1",
     "vue-tsc": "^2.2.8"
   },
+  "engines": {
+    "node": "^22.14.0",
+    "pnpm": ">=10.10.0"
+  },
   "scripts": {
     "dev": "storybook dev -p 6006 --no-open",
     "build": "unbuild",

package/dist/components/buttons/AntActionButton.vue

@@ -1,83 +0,0 @@
-<script lang="ts" setup>
-/**
- * This button is used for everything what is the primary
- * action like save, confirm, create, etc.
- */
-import {
-  Position, State, InputState, Size, Grouped,
-} from '../../enums';
-import AntButton from './AntButton.vue';
-import type {
-  IconDefinition,
-} from '@fortawesome/free-solid-svg-icons';
-import {
-  computed, useSlots,
-} from 'vue';
-import {
-  hasSlotContent,
-} from '../../utils';
-
-defineEmits([
-  'click',
-  'blur',
-]);
-const props = withDefaults(defineProps<{
-  iconLeft?: IconDefinition;
-  iconRight?: IconDefinition;
-  size?: Size;
-  disabled?: boolean;
-  grouped?: Grouped;
-  state?: State;
-  skeleton?: boolean;
-  expanded?: boolean;
-  filled?: boolean;
-  hasPermission?: boolean;
-  tooltipPosition?: Position;
-  tooltipState?: InputState;
-  tooltipDelay?: number;
-  submit?: boolean;
-}>(), {
-  state: State.primary,
-  hasPermission: true,
-  filled: true,
-  submit: false,
-});
-const slots = useSlots();
-const hasTooltip = computed(() => !props.skeleton && !props.disabled && props.hasPermission && hasSlotContent(slots['tooltipContent']));
-const hasPermissionTooltip = computed(() => !props.skeleton && !props.disabled && !props.hasPermission && hasSlotContent(slots['invalidPermissionTooltipContent']));
-</script>
-
-<template>
-  <AntButton
-    :icon-left="iconLeft"
-    :icon-right="iconRight"
-    :size="size"
-    :disabled="disabled || !hasPermission"
-    :grouped="grouped"
-    :skeleton="skeleton"
-    :expanded="expanded"
-    :state="state"
-    :filled="filled"
-    :tooltip-position="tooltipPosition"
-    :tooltip-state="hasPermissionTooltip ? InputState.info : tooltipState"
-    :tooltip-delay="hasPermissionTooltip ? 300 : tooltipDelay"
-    :submit="submit"
-    data-e2e="action-button"
-    @click="$emit('click')"
-    @blur="$emit('blur')"
-  >
-    <slot />
-
-    <template #tooltip-content>
-      <slot
-        v-if="hasTooltip"
-        name="tooltipContent"
-      />
-
-      <slot
-        v-if="hasPermissionTooltip"
-        name="invalidPermissionTooltipContent"
-      />
-    </template>
-  </AntButton>
-</template>

package/dist/components/buttons/AntCreateButton.vue

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

package/dist/components/buttons/AntDeleteButton.vue

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

package/dist/components/buttons/AntDuplicateButton.vue

@@ -1,61 +0,0 @@
-<script lang="ts" setup>
-import AntActionButton from './AntActionButton.vue';
-import {
-  Position, Size, Grouped, State,
-} 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;
-  tooltipPosition?: Position;
-}>(), {
-  iconVariant: false,
-  canDuplicate: true,
-});
-</script>
-
-<template>
-  <AntActionButton
-    :filled="false"
-    :state="State.base"
-    :size="size"
-    :disabled="disabled"
-    :icon-left="iconVariant ? faCopy : undefined"
-    :grouped="grouped"
-    :skeleton="skeleton"
-    :expanded="expanded"
-    :has-permission="canDuplicate"
-    :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/dist/components/buttons/AntEditButton.vue

@@ -1,61 +0,0 @@
-<script lang="ts" setup>
-import AntActionButton from './AntActionButton.vue';
-import {
-  Position, Size, Grouped, State,
-} 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"
-    :state="State.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>