@antify/ui 2.5.7 → 3.0.0

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/package.json

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