vft 0.0.373 → 0.0.375

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

@@ -1,59 +1,123 @@
-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(
+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(
         () => ({
-          ...n.proxy.$route
+          ...instance.proxy.$route
         }),
         () => {
-          p.value && o.value && d();
+          if (shouldHideWhenRouteChanges.value && indicator.value) {
+            hide();
+          }
         }
-      ), K(() => {
-        C(t[s]);
-      }), {
-        hide: d,
-        show: b,
-        toggle: x,
-        hasUpdateHandler: r
-      };
-    },
+      );
+    }
+    onMounted(() => {
+      onChange(props[name]);
+    });
+    return {
+      hide,
+      show,
+      toggle,
+      hasUpdateHandler
+    };
+  };
+  return {
+    useModelToggle: useModelToggle2,
     // useModelToggleProps,
-    useModelToggleEmits: [u]
+    useModelToggleEmits: useModelToggleEmits2
   };
-}, { useModelToggle: k, useModelToggleEmits: q } = U("modelValue");
+};
+const { useModelToggle, useModelToggleEmits } = createModelToggleComposable("modelValue");
 export {
-  U as createModelToggleComposable,
-  k as useModelToggle,
-  q as useModelToggleEmits
+  createModelToggleComposable,
+  useModelToggle,
+  useModelToggleEmits
 };

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

@@ -1,45 +1,80 @@
-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);
+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}`;
   return {
-    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}` : "";
-    },
+    namespace,
+    b,
+    e,
+    m,
+    be,
+    em,
+    bm,
+    bem,
+    is,
     // css
-    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}`
+    cssVar,
+    cssVarName,
+    cssVarBlock,
+    cssVarBlockName
   };
 };
 export {
-  m as defaultNamespace,
-  B as namespaceContextKey,
-  C as useGetDerivedNamespace,
-  f as useNamespace
+  defaultNamespace,
+  namespaceContextKey,
+  useGetDerivedNamespace,
+  useNamespace
 };

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

@@ -1,50 +1,78 @@
-import { shallowRef as m, defineComponent as v, h as x, triggerRef as p, onMounted as M, isVNode as O } from "vue";
+import { shallowRef, defineComponent, h, triggerRef, onMounted, isVNode } from "vue";
 import "@vueuse/core";
 import "@vft/utils";
 import "../../components/config-provider/hooks/use-global-config.js";
 import "lodash-es";
-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));
+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);
+        };
       }
-      d.get(n).push(o);
+      nodesMap.get(parentNode).push(childNode);
     });
-  }, 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 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
     );
-  }, 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);
+  };
+  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;
+      };
     }
   });
   return {
-    children: c,
-    addChild: e,
-    removeChild: f,
-    ChildrenSorter: N
+    children: orderedChildren,
+    addChild,
+    removeChild,
+    ChildrenSorter
   };
 };
 export {
-  I as useOrderedChildren
+  useOrderedChildren
 };

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

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

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

@@ -1,26 +1,39 @@
-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}`);
+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}`);
   return {
-    id: t,
-    selector: r
+    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
+};
+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
   };
 };
 export {
-  v as usePopperContainer,
-  u as usePopperContainerId
+  usePopperContainer,
+  usePopperContainerId
 };

package/es/hooks/use-same-target/index.js

@@ -1,16 +1,24 @@
-import { noop as t } from "@vft/utils";
-const g = (r) => {
-  if (!r)
-    return { onClick: t, onMousedown: t, onMouseup: t };
-  let e = !1, n = !1;
-  return { onClick: (o) => {
-    e && n && r(o), e = n = !1;
-  }, onMousedown: (o) => {
-    e = o.target === o.currentTarget;
-  }, onMouseup: (o) => {
-    n = o.target === o.currentTarget;
-  } };
+import { noop } from "@vft/utils";
+const useSameTarget = (handleClick) => {
+  if (!handleClick) {
+    return { onClick: noop, onMousedown: noop, onMouseup: noop };
+  }
+  let mousedownTarget = false;
+  let mouseupTarget = false;
+  const onClick = (e) => {
+    if (mousedownTarget && mouseupTarget) {
+      handleClick(e);
+    }
+    mousedownTarget = mouseupTarget = false;
+  };
+  const onMousedown = (e) => {
+    mousedownTarget = e.target === e.currentTarget;
+  };
+  const onMouseup = (e) => {
+    mouseupTarget = e.target === e.currentTarget;
+  };
+  return { onClick, onMousedown, onMouseup };
 };
 export {
-  g as useSameTarget
+  useSameTarget
 };