vft 0.0.369 → 0.0.370

package/es/hooks/use-model-toggle/index.js

@@ -1,123 +1,59 @@
-import { isFunction, isBoolean } from "@vft/utils";
-import { isClient } from "@vueuse/core";
-import { getCurrentInstance, computed, watch, onMounted } from "vue";
-const createModelToggleComposable = (name) => {
-  const updateEventKey = `update:${name}`;
-  const updateEventKeyRaw = `onUpdate:${name}`;
-  const useModelToggleEmits2 = [updateEventKey];
-  const useModelToggle2 = ({
-    indicator,
-    toggleReason,
-    shouldHideWhenRouteChanges,
-    shouldProceed,
-    onShow,
-    onHide
-  }) => {
-    const instance = getCurrentInstance();
-    const { emit } = instance;
-    const props = instance.props;
-    const hasUpdateHandler = computed(
-      () => isFunction(props[updateEventKeyRaw])
-    );
-    const isModelBindingAbsent = computed(() => props[name] === null);
-    const doShow = (event) => {
-      if (indicator.value === true) {
-        return;
-      }
-      indicator.value = true;
-      if (toggleReason) {
-        toggleReason.value = event;
-      }
-      if (isFunction(onShow)) {
-        onShow(event);
-      }
-    };
-    const doHide = (event) => {
-      if (indicator.value === false) {
-        return;
-      }
-      indicator.value = false;
-      if (toggleReason) {
-        toggleReason.value = event;
-      }
-      if (isFunction(onHide)) {
-        onHide(event);
-      }
-    };
-    const show = (event) => {
-      if (props.disabled === true || isFunction(shouldProceed) && !shouldProceed())
-        return;
-      const shouldEmit = hasUpdateHandler.value && isClient;
-      if (shouldEmit) {
-        emit(updateEventKey, true);
-      }
-      if (isModelBindingAbsent.value || !shouldEmit) {
-        doShow(event);
-      }
-    };
-    const hide = (event) => {
-      if (props.disabled === true || !isClient) return;
-      const shouldEmit = hasUpdateHandler.value && isClient;
-      if (shouldEmit) {
-        emit(updateEventKey, false);
-      }
-      if (isModelBindingAbsent.value || !shouldEmit) {
-        doHide(event);
-      }
-    };
-    const onChange = (val) => {
-      if (!isBoolean(val)) return;
-      if (props.disabled && val) {
-        if (hasUpdateHandler.value) {
-          emit(updateEventKey, false);
-        }
-      } else if (indicator.value !== val) {
-        if (val) {
-          doShow();
-        } else {
-          doHide();
-        }
-      }
-    };
-    const toggle = () => {
-      if (indicator.value) {
-        hide();
-      } else {
-        show();
-      }
-    };
-    watch(() => props[name], onChange);
-    if (shouldHideWhenRouteChanges && instance.appContext.config.globalProperties.$route !== void 0) {
-      watch(
+import { isFunction as f, isBoolean as y } from "@vft/utils";
+import { isClient as c } from "@vueuse/core";
+import { getCurrentInstance as B, computed as $, watch as h, onMounted as K } from "vue";
+const U = (s) => {
+  const u = `update:${s}`, w = `onUpdate:${s}`;
+  return {
+    useModelToggle: ({
+      indicator: o,
+      toggleReason: i,
+      shouldHideWhenRouteChanges: p,
+      shouldProceed: g,
+      onShow: v,
+      onHide: m
+    }) => {
+      const n = B(), { emit: a } = n, t = n.props, r = $(
+        () => f(t[w])
+      ), M = $(() => t[s] === null), T = (e) => {
+        o.value !== !0 && (o.value = !0, i && (i.value = e), f(v) && v(e));
+      }, E = (e) => {
+        o.value !== !1 && (o.value = !1, i && (i.value = e), f(m) && m(e));
+      }, b = (e) => {
+        if (t.disabled === !0 || f(g) && !g())
+          return;
+        const l = r.value && c;
+        l && a(u, !0), (M.value || !l) && T(e);
+      }, d = (e) => {
+        if (t.disabled === !0 || !c) return;
+        const l = r.value && c;
+        l && a(u, !1), (M.value || !l) && E(e);
+      }, C = (e) => {
+        y(e) && (t.disabled && e ? r.value && a(u, !1) : o.value !== e && (e ? T() : E()));
+      }, x = () => {
+        o.value ? d() : b();
+      };
+      return h(() => t[s], C), p && n.appContext.config.globalProperties.$route !== void 0 && h(
         () => ({
-          ...instance.proxy.$route
+          ...n.proxy.$route
         }),
         () => {
-          if (shouldHideWhenRouteChanges.value && indicator.value) {
-            hide();
-          }
+          p.value && o.value && d();
         }
-      );
-    }
-    onMounted(() => {
-      onChange(props[name]);
-    });
-    return {
-      hide,
-      show,
-      toggle,
-      hasUpdateHandler
-    };
-  };
-  return {
-    useModelToggle: useModelToggle2,
+      ), K(() => {
+        C(t[s]);
+      }), {
+        hide: d,
+        show: b,
+        toggle: x,
+        hasUpdateHandler: r
+      };
+    },
     // useModelToggleProps,
-    useModelToggleEmits: useModelToggleEmits2
+    useModelToggleEmits: [u]
   };
-};
-const { useModelToggle, useModelToggleEmits } = createModelToggleComposable("modelValue");
+}, { useModelToggle: k, useModelToggleEmits: q } = U("modelValue");
 export {
-  createModelToggleComposable,
-  useModelToggle,
-  useModelToggleEmits
+  U as createModelToggleComposable,
+  k as useModelToggle,
+  q as useModelToggleEmits
 };

package/es/hooks/use-namespace/index.js

@@ -1,80 +1,45 @@
-import { getCurrentInstance, inject, ref, computed, unref } from "vue";
-const defaultNamespace = "vft";
-const statePrefix = "is-";
-const _bem = (namespace, block, blockSuffix, element, modifier) => {
-  let cls = `${namespace}-${block}`;
-  if (blockSuffix) {
-    cls += `-${blockSuffix}`;
-  }
-  if (element) {
-    cls += `__${element}`;
-  }
-  if (modifier) {
-    cls += `--${modifier}`;
-  }
-  return cls;
-};
-const namespaceContextKey = Symbol("namespaceContextKey");
-const useGetDerivedNamespace = (namespaceOverrides) => {
-  const derivedNamespace = namespaceOverrides || (getCurrentInstance() ? inject(namespaceContextKey, ref(defaultNamespace)) : ref(defaultNamespace));
-  const namespace = computed(() => {
-    return unref(derivedNamespace) || defaultNamespace;
-  });
-  return namespace;
-};
-const useNamespace = (block, namespaceOverrides) => {
-  const namespace = useGetDerivedNamespace(namespaceOverrides);
-  const b = (blockSuffix = "") => _bem(namespace.value, block, blockSuffix, "", "");
-  const e = (element) => element ? _bem(namespace.value, block, "", element, "") : "";
-  const m = (modifier) => modifier ? _bem(namespace.value, block, "", "", modifier) : "";
-  const be = (blockSuffix, element) => blockSuffix && element ? _bem(namespace.value, block, blockSuffix, element, "") : "";
-  const em = (element, modifier) => element && modifier ? _bem(namespace.value, block, "", element, modifier) : "";
-  const bm = (blockSuffix, modifier) => blockSuffix && modifier ? _bem(namespace.value, block, blockSuffix, "", modifier) : "";
-  const bem = (blockSuffix, element, modifier) => blockSuffix && element && modifier ? _bem(namespace.value, block, blockSuffix, element, modifier) : "";
-  const is = (name, ...args) => {
-    const state = args.length >= 1 ? args[0] : true;
-    return name && state ? `${statePrefix}${name}` : "";
-  };
-  const cssVar = (object) => {
-    const styles = {};
-    for (const key in object) {
-      if (object[key]) {
-        styles[`--${namespace.value}-${key}`] = object[key];
-      }
-    }
-    return styles;
-  };
-  const cssVarBlock = (object) => {
-    const styles = {};
-    for (const key in object) {
-      if (object[key]) {
-        styles[`--${namespace.value}-${block}-${key}`] = object[key];
-      }
-    }
-    return styles;
-  };
-  const cssVarName = (name) => `--${namespace.value}-${name}`;
-  const cssVarBlockName = (name) => `--${namespace.value}-${block}-${name}`;
+import { getCurrentInstance as p, inject as N, ref as v, computed as V, unref as y } from "vue";
+const m = "vft", l = "is-", c = (a, r, t, o, $) => {
+  let u = `${a}-${r}`;
+  return t && (u += `-${t}`), o && (u += `__${o}`), $ && (u += `--${$}`), u;
+}, B = Symbol("namespaceContextKey"), C = (a) => {
+  const r = a || (p() ? N(B, v(m)) : v(m));
+  return V(() => y(r) || m);
+}, f = (a, r) => {
+  const t = C(r);
   return {
-    namespace,
-    b,
-    e,
-    m,
-    be,
-    em,
-    bm,
-    bem,
-    is,
+    namespace: t,
+    b: (s = "") => c(t.value, a, s, "", ""),
+    e: (s) => s ? c(t.value, a, "", s, "") : "",
+    m: (s) => s ? c(t.value, a, "", "", s) : "",
+    be: (s, e) => s && e ? c(t.value, a, s, e, "") : "",
+    em: (s, e) => s && e ? c(t.value, a, "", s, e) : "",
+    bm: (s, e) => s && e ? c(t.value, a, s, "", e) : "",
+    bem: (s, e, n) => s && e && n ? c(t.value, a, s, e, n) : "",
+    is: (s, ...e) => {
+      const n = e.length >= 1 ? e[0] : !0;
+      return s && n ? `${l}${s}` : "";
+    },
     // css
-    cssVar,
-    cssVarName,
-    cssVarBlock,
-    cssVarBlockName
+    cssVar: (s) => {
+      const e = {};
+      for (const n in s)
+        s[n] && (e[`--${t.value}-${n}`] = s[n]);
+      return e;
+    },
+    cssVarName: (s) => `--${t.value}-${s}`,
+    cssVarBlock: (s) => {
+      const e = {};
+      for (const n in s)
+        s[n] && (e[`--${t.value}-${a}-${n}`] = s[n]);
+      return e;
+    },
+    cssVarBlockName: (s) => `--${t.value}-${a}-${s}`
   };
 };
 export {
-  defaultNamespace,
-  namespaceContextKey,
-  useGetDerivedNamespace,
-  useNamespace
+  m as defaultNamespace,
+  B as namespaceContextKey,
+  C as useGetDerivedNamespace,
+  f as useNamespace
 };

package/es/hooks/use-ordered-children/index.js

@@ -1,78 +1,50 @@
-import { shallowRef, defineComponent, h, triggerRef, onMounted, isVNode } from "vue";
+import { shallowRef as m, defineComponent as v, h as x, triggerRef as p, onMounted as M, isVNode as O } from "vue";
 import "@vueuse/core";
 import "@vft/utils";
 import "../../components/config-provider/hooks/use-global-config.js";
 import "lodash-es";
-import { flattedChildren } from "../../utils/vue/vnode.js";
-const getOrderedChildren = (vm, childComponentName, children) => {
-  const nodes = flattedChildren(vm.subTree).filter(
-    (n) => isVNode(n) && n.type?.name === childComponentName && !!n.component
-  );
-  const uids = nodes.map((n) => n.component.uid);
-  return uids.map((uid) => children[uid]).filter((p) => !!p);
-};
-const useOrderedChildren = (vm, childComponentName) => {
-  const children = shallowRef({});
-  const orderedChildren = shallowRef([]);
-  const nodesMap = /* @__PURE__ */ new WeakMap();
-  const addChild = (child) => {
-    children.value[child.uid] = child;
-    triggerRef(children);
-    onMounted(() => {
-      const childNode = child.getVnode().el;
-      const parentNode = childNode.parentNode;
-      if (!nodesMap.has(parentNode)) {
-        nodesMap.set(parentNode, []);
-        const originalFn = parentNode.insertBefore.bind(parentNode);
-        parentNode.insertBefore = (node, anchor) => {
-          const shouldSortChildren = nodesMap.get(parentNode).some((el) => node === el || anchor === el);
-          if (shouldSortChildren) triggerRef(children);
-          return originalFn(node, anchor);
-        };
+import { flattedChildren as R } from "../../utils/vue/vnode.js";
+const S = (l, u, r) => R(l.subTree).filter(
+  (e) => O(e) && e.type?.name === u && !!e.component
+).map((e) => e.component.uid).map((e) => r[e]).filter((e) => !!e), I = (l, u) => {
+  const r = m({}), c = m([]), d = /* @__PURE__ */ new WeakMap(), e = (t) => {
+    r.value[t.uid] = t, p(r), M(() => {
+      const o = t.getVnode().el, n = o.parentNode;
+      if (!d.has(n)) {
+        d.set(n, []);
+        const s = n.insertBefore.bind(n);
+        n.insertBefore = (i, a) => (d.get(n).some((h) => i === h || a === h) && p(r), s(i, a));
       }
-      nodesMap.get(parentNode).push(childNode);
+      d.get(n).push(o);
     });
-  };
-  const removeChild = (child) => {
-    delete children.value[child.uid];
-    triggerRef(children);
-    const childNode = child.getVnode().el;
-    const parentNode = childNode.parentNode;
-    const childNodes = nodesMap.get(parentNode);
-    const index = childNodes.indexOf(childNode);
-    childNodes.splice(index, 1);
-  };
-  const sortChildren = () => {
-    orderedChildren.value = getOrderedChildren(
-      vm,
-      childComponentName,
-      children.value
+  }, f = (t) => {
+    delete r.value[t.uid], p(r);
+    const o = t.getVnode().el, n = o.parentNode, s = d.get(n), i = s.indexOf(o);
+    s.splice(i, 1);
+  }, C = () => {
+    c.value = S(
+      l,
+      u,
+      r.value
     );
-  };
-  const IsolatedRenderer = (props) => {
-    return props.render();
-  };
-  const ChildrenSorter = defineComponent({
-    setup(_, { slots }) {
-      return () => {
-        sortChildren();
-        return slots.default ? (
-          // Create a new `ReactiveEffect` to ensure `ChildrenSorter` doesn't track any extra dependencies
-          // @ts-ignore TODO: Remove this after Vue is upgraded
-          h(IsolatedRenderer, {
-            render: slots.default
-          })
-        ) : null;
-      };
+  }, g = (t) => t.render(), N = v({
+    setup(t, { slots: o }) {
+      return () => (C(), o.default ? (
+        // Create a new `ReactiveEffect` to ensure `ChildrenSorter` doesn't track any extra dependencies
+        // @ts-ignore TODO: Remove this after Vue is upgraded
+        x(g, {
+          render: o.default
+        })
+      ) : null);
     }
   });
   return {
-    children: orderedChildren,
-    addChild,
-    removeChild,
-    ChildrenSorter
+    children: c,
+    addChild: e,
+    removeChild: f,
+    ChildrenSorter: N
   };
 };
 export {
-  useOrderedChildren
+  I as useOrderedChildren
 };

package/es/hooks/use-popper/index.js

@@ -1,35 +1,32 @@
-import { createPopper } from "@popperjs/core";
-import { fromPairs } from "lodash-es";
-import { computed, unref, shallowRef, ref, watch, onBeforeUnmount } from "vue";
-const usePopper = (referenceElementRef, popperElementRef, opts = {}) => {
-  const stateUpdater = {
+import { createPopper as b } from "@popperjs/core";
+import { fromPairs as f } from "lodash-es";
+import { computed as n, unref as t, shallowRef as v, ref as S, watch as d, onBeforeUnmount as U } from "vue";
+const P = (a, i, p = {}) => {
+  const u = {
     name: "updateState",
-    enabled: true,
+    enabled: !0,
     phase: "write",
-    fn: ({ state }) => {
-      const derivedState = deriveState(state);
-      Object.assign(states.value, derivedState);
+    fn: ({ state: r }) => {
+      const o = g(r);
+      Object.assign(c.value, o);
     },
     requires: ["computeStyles"]
-  };
-  const options = computed(() => {
-    const { onFirstUpdate, placement, strategy, modifiers } = unref(opts);
+  }, e = n(() => {
+    const { onFirstUpdate: r, placement: o, strategy: m, modifiers: y } = t(p);
     return {
-      onFirstUpdate,
-      placement: placement || "bottom",
-      strategy: strategy || "absolute",
+      onFirstUpdate: r,
+      placement: o || "bottom",
+      strategy: m || "absolute",
       modifiers: [
-        ...modifiers || [],
-        stateUpdater,
-        { name: "applyStyles", enabled: false }
+        ...y || [],
+        u,
+        { name: "applyStyles", enabled: !1 }
       ]
     };
-  });
-  const instanceRef = shallowRef();
-  const states = ref({
+  }), s = v(), c = S({
     styles: {
       popper: {
-        position: unref(options).strategy,
+        position: t(e).strategy,
         left: "0",
         top: "0"
       },
@@ -38,66 +35,54 @@ const usePopper = (referenceElementRef, popperElementRef, opts = {}) => {
       }
     },
     attributes: {}
-  });
-  const destroy = () => {
-    if (!instanceRef.value) return;
-    instanceRef.value.destroy();
-    instanceRef.value = void 0;
+  }), l = () => {
+    s.value && (s.value.destroy(), s.value = void 0);
   };
-  watch(
-    options,
-    (newOptions) => {
-      const instance = unref(instanceRef);
-      if (instance) {
-        instance.setOptions(newOptions);
-      }
+  return d(
+    e,
+    (r) => {
+      const o = t(s);
+      o && o.setOptions(r);
     },
     {
-      deep: true
+      deep: !0
     }
-  );
-  watch(
-    [referenceElementRef, popperElementRef],
-    ([referenceElement, popperElement]) => {
-      destroy();
-      if (!referenceElement || !popperElement) return;
-      instanceRef.value = createPopper(
-        referenceElement,
-        popperElement,
-        unref(options)
-      );
+  ), d(
+    [a, i],
+    ([r, o]) => {
+      l(), !(!r || !o) && (s.value = b(
+        r,
+        o,
+        t(e)
+      ));
     }
-  );
-  onBeforeUnmount(() => {
-    destroy();
-  });
-  return {
-    state: computed(() => ({ ...unref(instanceRef)?.state || {} })),
-    styles: computed(() => unref(states).styles),
-    attributes: computed(() => unref(states).attributes),
-    update: () => unref(instanceRef)?.update(),
-    forceUpdate: () => unref(instanceRef)?.forceUpdate(),
+  ), U(() => {
+    l();
+  }), {
+    state: n(() => ({ ...t(s)?.state || {} })),
+    styles: n(() => t(c).styles),
+    attributes: n(() => t(c).attributes),
+    update: () => t(s)?.update(),
+    forceUpdate: () => t(s)?.forceUpdate(),
     // Preventing end users from modifying the instance.
-    instanceRef: computed(() => unref(instanceRef))
+    instanceRef: n(() => t(s))
   };
 };
-function deriveState(state) {
-  const elements = Object.keys(state.elements);
-  const styles = fromPairs(
-    elements.map(
-      (element) => [element, state.styles[element] || {}]
+function g(a) {
+  const i = Object.keys(a.elements), p = f(
+    i.map(
+      (e) => [e, a.styles[e] || {}]
     )
-  );
-  const attributes = fromPairs(
-    elements.map(
-      (element) => [element, state.attributes[element]]
+  ), u = f(
+    i.map(
+      (e) => [e, a.attributes[e]]
     )
   );
   return {
-    styles,
-    attributes
+    styles: p,
+    attributes: u
   };
 }
 export {
-  usePopper
+  P as usePopper
 };

package/es/hooks/use-popper-container/index.js

@@ -1,39 +1,26 @@
-import { isClient } from "@vueuse/core";
-import { computed, onBeforeMount } from "vue";
-import { useIdInjection } from "../use-id/index.js";
-import { useGetDerivedNamespace } from "../use-namespace/index.js";
-const usePopperContainerId = () => {
-  const namespace = useGetDerivedNamespace();
-  const idInjection = useIdInjection();
-  const id = computed(() => {
-    return `${namespace.value}-popper-container-${idInjection.prefix}`;
-  });
-  const selector = computed(() => `#${id.value}`);
+import { isClient as c } from "@vueuse/core";
+import { computed as n, onBeforeMount as i } from "vue";
+import { useIdInjection as s } from "../use-id/index.js";
+import { useGetDerivedNamespace as p } from "../use-namespace/index.js";
+const u = () => {
+  const o = p(), e = s(), t = n(() => `${o.value}-popper-container-${e.prefix}`), r = n(() => `#${t.value}`);
   return {
-    id,
-    selector
+    id: t,
+    selector: r
   };
-};
-const createContainer = (id) => {
-  const container = document.createElement("div");
-  container.id = id;
-  document.body.appendChild(container);
-  return container;
-};
-const usePopperContainer = () => {
-  const { id, selector } = usePopperContainerId();
-  onBeforeMount(() => {
-    if (!isClient) return;
-    if (process.env.NODE_ENV === "test" || !document.body.querySelector(selector.value)) {
-      createContainer(id.value);
-    }
-  });
-  return {
-    id,
-    selector
+}, a = (o) => {
+  const e = document.createElement("div");
+  return e.id = o, document.body.appendChild(e), e;
+}, v = () => {
+  const { id: o, selector: e } = u();
+  return i(() => {
+    c && (process.env.NODE_ENV === "test" || !document.body.querySelector(e.value)) && a(o.value);
+  }), {
+    id: o,
+    selector: e
   };
 };
 export {
-  usePopperContainer,
-  usePopperContainerId
+  v as usePopperContainer,
+  u as usePopperContainerId
 };