vft 0.0.361 → 0.0.363

package/lib/components/scrollbar/scrollbar.vue2.cjs

@@ -1 +1,201 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),s=require("@vft/utils"),k=require("@vueuse/core"),q=require("../../utils/error.cjs"),x=require("../../utils/helper.cjs");require("lodash-es");const W=require("../../hooks/use-namespace/index.cjs");require("../../hooks/use-model-toggle/index.cjs");require("@popperjs/core");require("../../hooks/use-z-index/index.cjs");const L=require("./bar.vue2.cjs"),P=require("./constants.cjs"),c=require("./util.cjs"),B="ElScrollbar",j=e.defineComponent({name:"vft-scrollbar"}),G=e.defineComponent({...j,props:{height:{default:""},maxHeight:{default:""},native:{type:Boolean,default:!1},wrapStyle:{type:[Boolean,null,String,Object,Array],default:""},wrapClass:{default:""},viewClass:{default:""},viewStyle:{type:[Boolean,null,String,Object,Array],default:""},noresize:{type:Boolean},tag:{default:"div"},always:{type:Boolean},minSize:{default:20}},emits:{scroll:({scrollTop:r,scrollLeft:f})=>[r,f].every(s.isNumber)},setup(r,{expose:f,emit:N}){const o=W.useNamespace("scrollbar"),R=N;let h,y;const b=e.ref(),l=e.ref(),g=e.ref(),w=e.ref("0"),S=e.ref("0"),d=e.ref(),z=e.ref(1),p=e.ref(1),T=e.computed(()=>{const t={};return r.height&&(t.height=x.addUnit(r.height)),r.maxHeight&&(t.maxHeight=x.addUnit(r.maxHeight)),[r.wrapStyle,t]}),H=e.computed(()=>[r.wrapClass,o.e("wrap"),{[o.em("wrap","hidden-default")]:!r.native}]),E=e.computed(()=>[o.e("view"),r.viewClass]),C=()=>{l.value&&(d.value?.handleScroll(l.value),R("scroll",{scrollTop:l.value.scrollTop,scrollLeft:l.value.scrollLeft}))};function O(t,a){s.isObject(t)?l.value.scrollTo(t):s.isNumber(t)&&s.isNumber(a)&&l.value.scrollTo(t,a)}const A=t=>{if(!s.isNumber(t)){q.debugWarn(B,"value must be a number");return}l.value.scrollTop=t},M=t=>{if(!s.isNumber(t)){q.debugWarn(B,"value must be a number");return}l.value.scrollLeft=t},i=()=>{if(!l.value)return;const t=l.value.offsetHeight-c.GAP,a=l.value.offsetWidth-c.GAP,v=t**2/l.value.scrollHeight,m=a**2/l.value.scrollWidth,n=Math.max(v,r.minSize),u=Math.max(m,r.minSize);z.value=v/(t-v)/(n/(t-n)),p.value=m/(a-m)/(u/(a-u)),S.value=n+c.GAP<t?`${n}px`:"",w.value=u+c.GAP<a?`${u}px`:""};return e.watch(()=>r.noresize,t=>{t?(h?.(),y?.()):({stop:h}=k.useResizeObserver(g,i),y=k.useEventListener("resize",i))},{immediate:!0}),e.watch(()=>[r.maxHeight,r.height],()=>{r.native||e.nextTick(()=>{i(),l.value&&d.value?.handleScroll(l.value)})}),e.provide(P.scrollbarContextKey,e.reactive({scrollbarElement:b,wrapElement:l})),e.onMounted(()=>{r.native||e.nextTick(()=>{i()})}),e.onUpdated(()=>i()),f({wrapRef:l,update:i,scrollTo:O,setScrollTop:A,setScrollLeft:M,handleScroll:C}),(t,a)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"scrollbarRef",ref:b,class:e.normalizeClass(e.unref(o).b())},[e.createElementVNode("div",{ref_key:"wrapRef",ref:l,class:e.normalizeClass(H.value),style:e.normalizeStyle(T.value),onScroll:C},[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.tag),{ref_key:"resizeRef",ref:g,class:e.normalizeClass(E.value),style:e.normalizeStyle(t.viewStyle)},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"default")]),_:3},8,["class","style"]))],38),t.native?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(L.default,{key:0,ref_key:"barRef",ref:d,height:S.value,width:w.value,always:t.always,"ratio-x":p.value,"ratio-y":z.value},null,8,["height","width","always","ratio-x","ratio-y"]))],2))}});exports.default=G;
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const vue = require("vue");
+const utils = require("@vft/utils");
+const core = require("@vueuse/core");
+const bar_vue_vue_type_script_setup_true_lang = require("./bar.vue2.cjs");
+const constants = require("./constants.cjs");
+const util = require("./util.cjs");
+const index = require("../../hooks/use-namespace/index.cjs");
+const helper = require("../../utils/helper.cjs");
+const error = require("../../utils/error.cjs");
+const COMPONENT_NAME = "ElScrollbar";
+const __default__ = vue.defineComponent({
+  name: "vft-scrollbar"
+});
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...__default__,
+  props: {
+    height: { default: "" },
+    maxHeight: { default: "" },
+    native: { type: Boolean, default: false },
+    wrapStyle: { type: [Boolean, null, String, Object, Array], default: "" },
+    wrapClass: { default: "" },
+    viewClass: { default: "" },
+    viewStyle: { type: [Boolean, null, String, Object, Array], default: "" },
+    noresize: { type: Boolean },
+    tag: { default: "div" },
+    always: { type: Boolean },
+    minSize: { default: 20 }
+  },
+  emits: {
+    scroll: ({
+      scrollTop,
+      scrollLeft
+    }) => [scrollTop, scrollLeft].every(utils.isNumber)
+  },
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const ns = index.useNamespace("scrollbar");
+    const emit = __emit;
+    let stopResizeObserver = void 0;
+    let stopResizeListener = void 0;
+    const scrollbarRef = vue.ref();
+    const wrapRef = vue.ref();
+    const resizeRef = vue.ref();
+    const sizeWidth = vue.ref("0");
+    const sizeHeight = vue.ref("0");
+    const barRef = vue.ref();
+    const ratioY = vue.ref(1);
+    const ratioX = vue.ref(1);
+    const style = vue.computed(() => {
+      const style2 = {};
+      if (__props.height) style2.height = helper.addUnit(__props.height);
+      if (__props.maxHeight) style2.maxHeight = helper.addUnit(__props.maxHeight);
+      return [__props.wrapStyle, style2];
+    });
+    const wrapKls = vue.computed(() => {
+      return [
+        __props.wrapClass,
+        ns.e("wrap"),
+        { [ns.em("wrap", "hidden-default")]: !__props.native }
+      ];
+    });
+    const resizeKls = vue.computed(() => {
+      return [ns.e("view"), __props.viewClass];
+    });
+    const handleScroll = () => {
+      if (wrapRef.value) {
+        barRef.value?.handleScroll(wrapRef.value);
+        emit("scroll", {
+          scrollTop: wrapRef.value.scrollTop,
+          scrollLeft: wrapRef.value.scrollLeft
+        });
+      }
+    };
+    function scrollTo(arg1, arg2) {
+      if (utils.isObject(arg1)) {
+        wrapRef.value.scrollTo(arg1);
+      } else if (utils.isNumber(arg1) && utils.isNumber(arg2)) {
+        wrapRef.value.scrollTo(arg1, arg2);
+      }
+    }
+    const setScrollTop = (value) => {
+      if (!utils.isNumber(value)) {
+        error.debugWarn(COMPONENT_NAME, "value must be a number");
+        return;
+      }
+      wrapRef.value.scrollTop = value;
+    };
+    const setScrollLeft = (value) => {
+      if (!utils.isNumber(value)) {
+        error.debugWarn(COMPONENT_NAME, "value must be a number");
+        return;
+      }
+      wrapRef.value.scrollLeft = value;
+    };
+    const update = () => {
+      if (!wrapRef.value) return;
+      const offsetHeight = wrapRef.value.offsetHeight - util.GAP;
+      const offsetWidth = wrapRef.value.offsetWidth - util.GAP;
+      const originalHeight = offsetHeight ** 2 / wrapRef.value.scrollHeight;
+      const originalWidth = offsetWidth ** 2 / wrapRef.value.scrollWidth;
+      const height = Math.max(originalHeight, __props.minSize);
+      const width = Math.max(originalWidth, __props.minSize);
+      ratioY.value = originalHeight / (offsetHeight - originalHeight) / (height / (offsetHeight - height));
+      ratioX.value = originalWidth / (offsetWidth - originalWidth) / (width / (offsetWidth - width));
+      sizeHeight.value = height + util.GAP < offsetHeight ? `${height}px` : "";
+      sizeWidth.value = width + util.GAP < offsetWidth ? `${width}px` : "";
+    };
+    vue.watch(
+      () => __props.noresize,
+      (noresize) => {
+        if (noresize) {
+          stopResizeObserver?.();
+          stopResizeListener?.();
+        } else {
+          ({ stop: stopResizeObserver } = core.useResizeObserver(resizeRef, update));
+          stopResizeListener = core.useEventListener("resize", update);
+        }
+      },
+      { immediate: true }
+    );
+    vue.watch(
+      () => [__props.maxHeight, __props.height],
+      () => {
+        if (!__props.native)
+          vue.nextTick(() => {
+            update();
+            if (wrapRef.value) {
+              barRef.value?.handleScroll(wrapRef.value);
+            }
+          });
+      }
+    );
+    vue.provide(
+      constants.scrollbarContextKey,
+      vue.reactive({
+        scrollbarElement: scrollbarRef,
+        wrapElement: wrapRef
+      })
+    );
+    vue.onMounted(() => {
+      if (!__props.native)
+        vue.nextTick(() => {
+          update();
+        });
+    });
+    vue.onUpdated(() => update());
+    __expose({
+      /** @description scrollbar wrap ref */
+      wrapRef,
+      /** @description update scrollbar state manually */
+      update,
+      /** @description scrolls to a particular set of coordinates */
+      scrollTo,
+      /** @description set distance to scroll top */
+      setScrollTop,
+      /** @description set distance to scroll left */
+      setScrollLeft,
+      /** @description handle scroll event */
+      handleScroll
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        ref_key: "scrollbarRef",
+        ref: scrollbarRef,
+        class: vue.normalizeClass(vue.unref(ns).b())
+      }, [
+        vue.createElementVNode("div", {
+          ref_key: "wrapRef",
+          ref: wrapRef,
+          class: vue.normalizeClass(wrapKls.value),
+          style: vue.normalizeStyle(style.value),
+          onScroll: handleScroll
+        }, [
+          (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.tag), {
+            ref_key: "resizeRef",
+            ref: resizeRef,
+            class: vue.normalizeClass(resizeKls.value),
+            style: vue.normalizeStyle(_ctx.viewStyle)
+          }, {
+            default: vue.withCtx(() => [
+              vue.renderSlot(_ctx.$slots, "default")
+            ]),
+            _: 3
+          }, 8, ["class", "style"]))
+        ], 38),
+        !_ctx.native ? (vue.openBlock(), vue.createBlock(bar_vue_vue_type_script_setup_true_lang.default, {
+          key: 0,
+          ref_key: "barRef",
+          ref: barRef,
+          height: sizeHeight.value,
+          width: sizeWidth.value,
+          always: _ctx.always,
+          "ratio-x": ratioX.value,
+          "ratio-y": ratioY.value
+        }, null, 8, ["height", "width", "always", "ratio-x", "ratio-y"])) : vue.createCommentVNode("", true)
+      ], 2);
+    };
+  }
+});
+exports.default = _sfc_main;

package/lib/components/scrollbar/style/css.cjs

@@ -1 +1 @@
-"use strict";require("vft/theme-style/base.css");require("vft/theme-style/vft-scrollbar.css");
+"use strict";

package/lib/components/scrollbar/style/index.cjs

@@ -1 +1 @@
-"use strict";require("vft/theme-style/src/base.scss");require("vft/theme-style/src/scrollbar.scss");
+"use strict";

package/lib/components/scrollbar/thumb.vue.cjs

@@ -1 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./thumb.vue2.cjs");exports.default=e.default;
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const thumb_vue_vue_type_script_setup_true_lang = require("./thumb.vue2.cjs");
+exports.default = thumb_vue_vue_type_script_setup_true_lang.default;

package/lib/components/scrollbar/thumb.vue2.cjs

@@ -1 +1,143 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),E=require("@vueuse/core");require("@vft/utils");const B=require("../../utils/error.cjs");require("../config-provider/hooks/use-global-config.cjs");require("lodash-es");const L=require("../../hooks/use-namespace/index.cjs");require("../../hooks/use-model-toggle/index.cjs");require("@popperjs/core");require("../../hooks/use-z-index/index.cjs");const R=require("./constants.cjs"),S=require("./util.cjs"),T="Thumb",x=e.defineComponent({__name:"thumb",props:{vertical:{type:Boolean},size:{},move:{},ratio:{},always:{type:Boolean}},setup(s){const o=e.inject(R.scrollbarContextKey),u=L.useNamespace("scrollbar");o||B.throwError(T,"can not inject scrollbar context");const l=e.ref(),a=e.ref(),v=e.ref({}),c=e.ref(!1);let i=!1,m=!1,f=E.isClient?document.onselectstart:null;const t=e.computed(()=>S.BAR_MAP[s.vertical?"vertical":"horizontal"]),y=e.computed(()=>S.renderThumbStyle({size:s.size,move:s.move,bar:t.value})),g=e.computed(()=>l.value[t.value.offset]**2/o.wrapElement[t.value.scrollSize]/s.ratio/a.value[t.value.offset]),q=n=>{if(n.stopPropagation(),n.ctrlKey||[1,2].includes(n.button))return;window.getSelection()?.removeAllRanges(),C(n);const r=n.currentTarget;r&&(v.value[t.value.axis]=r[t.value.offset]-(n[t.value.client]-r.getBoundingClientRect()[t.value.direction]))},z=n=>{if(!a.value||!l.value||!o.wrapElement)return;const r=Math.abs(n.target.getBoundingClientRect()[t.value.direction]-n[t.value.client]),b=a.value[t.value.offset]/2,h=(r-b)*100*g.value/l.value[t.value.offset];o.wrapElement[t.value.scroll]=h*o.wrapElement[t.value.scrollSize]/100},C=n=>{n.stopImmediatePropagation(),i=!0,document.addEventListener("mousemove",p),document.addEventListener("mouseup",d),f=document.onselectstart,document.onselectstart=()=>!1},p=n=>{if(!l.value||!a.value||i===!1)return;const r=v.value[t.value.axis];if(!r)return;const b=(l.value.getBoundingClientRect()[t.value.direction]-n[t.value.client])*-1,h=a.value[t.value.offset]-r,k=(b-h)*100*g.value/l.value[t.value.offset];o.wrapElement[t.value.scroll]=k*o.wrapElement[t.value.scrollSize]/100},d=()=>{i=!1,v.value[t.value.axis]=0,document.removeEventListener("mousemove",p),document.removeEventListener("mouseup",d),w(),m&&(c.value=!1)},P=()=>{m=!1,c.value=!!s.size},M=()=>{m=!0,c.value=i};e.onBeforeUnmount(()=>{w(),document.removeEventListener("mouseup",d)});const w=()=>{document.onselectstart!==f&&(document.onselectstart=f)};return E.useEventListener(e.toRef(o,"scrollbarElement"),"mousemove",P),E.useEventListener(e.toRef(o,"scrollbarElement"),"mouseleave",M),(n,r)=>(e.openBlock(),e.createBlock(e.Transition,{name:e.unref(u).b("fade")},{default:e.withCtx(()=>[e.withDirectives(e.createElementVNode("div",{ref_key:"instance",ref:l,class:e.normalizeClass([e.unref(u).e("bar"),e.unref(u).is(t.value.key)]),onMousedown:z},[e.createElementVNode("div",{ref_key:"thumb",ref:a,class:e.normalizeClass(e.unref(u).e("thumb")),style:e.normalizeStyle(y.value),onMousedown:q},null,38)],34),[[e.vShow,n.always||c.value]])]),_:1},8,["name"]))}});exports.default=x;
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const vue = require("vue");
+const core = require("@vueuse/core");
+const constants = require("./constants.cjs");
+const util = require("./util.cjs");
+const index = require("../../hooks/use-namespace/index.cjs");
+const error = require("../../utils/error.cjs");
+const COMPONENT_NAME = "Thumb";
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "thumb",
+  props: {
+    vertical: { type: Boolean },
+    size: {},
+    move: {},
+    ratio: {},
+    always: { type: Boolean }
+  },
+  setup(__props) {
+    const scrollbar = vue.inject(constants.scrollbarContextKey);
+    const ns = index.useNamespace("scrollbar");
+    if (!scrollbar) error.throwError(COMPONENT_NAME, "can not inject scrollbar context");
+    const instance = vue.ref();
+    const thumb = vue.ref();
+    const thumbState = vue.ref({});
+    const visible = vue.ref(false);
+    let cursorDown = false;
+    let cursorLeave = false;
+    let originalOnSelectStart = core.isClient ? document.onselectstart : null;
+    const bar = vue.computed(() => util.BAR_MAP[__props.vertical ? "vertical" : "horizontal"]);
+    const thumbStyle = vue.computed(
+      () => util.renderThumbStyle({
+        size: __props.size,
+        move: __props.move,
+        bar: bar.value
+      })
+    );
+    const offsetRatio = vue.computed(
+      () => (
+        // offsetRatioX = original width of thumb / current width of thumb / ratioX
+        // offsetRatioY = original height of thumb / current height of thumb / ratioY
+        // instance height = wrap height - GAP
+        instance.value[bar.value.offset] ** 2 / scrollbar.wrapElement[bar.value.scrollSize] / __props.ratio / thumb.value[bar.value.offset]
+      )
+    );
+    const clickThumbHandler = (e) => {
+      e.stopPropagation();
+      if (e.ctrlKey || [1, 2].includes(e.button)) return;
+      window.getSelection()?.removeAllRanges();
+      startDrag(e);
+      const el = e.currentTarget;
+      if (!el) return;
+      thumbState.value[bar.value.axis] = el[bar.value.offset] - (e[bar.value.client] - el.getBoundingClientRect()[bar.value.direction]);
+    };
+    const clickTrackHandler = (e) => {
+      if (!thumb.value || !instance.value || !scrollbar.wrapElement) return;
+      const offset = Math.abs(
+        e.target.getBoundingClientRect()[bar.value.direction] - e[bar.value.client]
+      );
+      const thumbHalf = thumb.value[bar.value.offset] / 2;
+      const thumbPositionPercentage = (offset - thumbHalf) * 100 * offsetRatio.value / instance.value[bar.value.offset];
+      scrollbar.wrapElement[bar.value.scroll] = thumbPositionPercentage * scrollbar.wrapElement[bar.value.scrollSize] / 100;
+    };
+    const startDrag = (e) => {
+      e.stopImmediatePropagation();
+      cursorDown = true;
+      document.addEventListener("mousemove", mouseMoveDocumentHandler);
+      document.addEventListener("mouseup", mouseUpDocumentHandler);
+      originalOnSelectStart = document.onselectstart;
+      document.onselectstart = () => false;
+    };
+    const mouseMoveDocumentHandler = (e) => {
+      if (!instance.value || !thumb.value) return;
+      if (cursorDown === false) return;
+      const prevPage = thumbState.value[bar.value.axis];
+      if (!prevPage) return;
+      const offset = (instance.value.getBoundingClientRect()[bar.value.direction] - e[bar.value.client]) * -1;
+      const thumbClickPosition = thumb.value[bar.value.offset] - prevPage;
+      const thumbPositionPercentage = (offset - thumbClickPosition) * 100 * offsetRatio.value / instance.value[bar.value.offset];
+      scrollbar.wrapElement[bar.value.scroll] = thumbPositionPercentage * scrollbar.wrapElement[bar.value.scrollSize] / 100;
+    };
+    const mouseUpDocumentHandler = () => {
+      cursorDown = false;
+      thumbState.value[bar.value.axis] = 0;
+      document.removeEventListener("mousemove", mouseMoveDocumentHandler);
+      document.removeEventListener("mouseup", mouseUpDocumentHandler);
+      restoreOnselectstart();
+      if (cursorLeave) visible.value = false;
+    };
+    const mouseMoveScrollbarHandler = () => {
+      cursorLeave = false;
+      visible.value = !!__props.size;
+    };
+    const mouseLeaveScrollbarHandler = () => {
+      cursorLeave = true;
+      visible.value = cursorDown;
+    };
+    vue.onBeforeUnmount(() => {
+      restoreOnselectstart();
+      document.removeEventListener("mouseup", mouseUpDocumentHandler);
+    });
+    const restoreOnselectstart = () => {
+      if (document.onselectstart !== originalOnSelectStart)
+        document.onselectstart = originalOnSelectStart;
+    };
+    core.useEventListener(
+      vue.toRef(scrollbar, "scrollbarElement"),
+      "mousemove",
+      mouseMoveScrollbarHandler
+    );
+    core.useEventListener(
+      vue.toRef(scrollbar, "scrollbarElement"),
+      "mouseleave",
+      mouseLeaveScrollbarHandler
+    );
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(vue.Transition, {
+        name: vue.unref(ns).b("fade")
+      }, {
+        default: vue.withCtx(() => [
+          vue.withDirectives(vue.createElementVNode("div", {
+            ref_key: "instance",
+            ref: instance,
+            class: vue.normalizeClass([vue.unref(ns).e("bar"), vue.unref(ns).is(bar.value.key)]),
+            onMousedown: clickTrackHandler
+          }, [
+            vue.createElementVNode("div", {
+              ref_key: "thumb",
+              ref: thumb,
+              class: vue.normalizeClass(vue.unref(ns).e("thumb")),
+              style: vue.normalizeStyle(thumbStyle.value),
+              onMousedown: clickThumbHandler
+            }, null, 38)
+          ], 34), [
+            [vue.vShow, _ctx.always || visible.value]
+          ])
+        ]),
+        _: 1
+      }, 8, ["name"]);
+    };
+  }
+});
+exports.default = _sfc_main;

package/lib/components/scrollbar/util.cjs

@@ -1 +1,36 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=4,o={vertical:{offset:"offsetHeight",scroll:"scrollTop",scrollSize:"scrollHeight",size:"height",key:"vertical",axis:"Y",client:"clientY",direction:"top"},horizontal:{offset:"offsetWidth",scroll:"scrollLeft",scrollSize:"scrollWidth",size:"width",key:"horizontal",axis:"X",client:"clientX",direction:"left"}},s=({move:t,size:l,bar:e})=>({[e.size]:l,transform:`translate${e.axis}(${t}%)`});exports.BAR_MAP=o;exports.GAP=i;exports.renderThumbStyle=s;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const GAP = 4;
+const BAR_MAP = {
+  vertical: {
+    offset: "offsetHeight",
+    scroll: "scrollTop",
+    scrollSize: "scrollHeight",
+    size: "height",
+    key: "vertical",
+    axis: "Y",
+    client: "clientY",
+    direction: "top"
+  },
+  horizontal: {
+    offset: "offsetWidth",
+    scroll: "scrollLeft",
+    scrollSize: "scrollWidth",
+    size: "width",
+    key: "horizontal",
+    axis: "X",
+    client: "clientX",
+    direction: "left"
+  }
+};
+const renderThumbStyle = ({
+  move,
+  size,
+  bar
+}) => ({
+  [bar.size]: size,
+  transform: `translate${bar.axis}(${move}%)`
+});
+exports.BAR_MAP = BAR_MAP;
+exports.GAP = GAP;
+exports.renderThumbStyle = renderThumbStyle;

package/lib/components/search/index.cjs

@@ -1 +1,7 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require("@vueuse/core");require("@vft/utils");require("../config-provider/hooks/use-global-config.cjs");require("vue");const r=require("../../utils/vue/install.cjs");require("lodash-es");const t=require("./search.vue2.cjs"),e=r.withInstall(t.default);exports.VftSearch=e;exports.default=e;
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const search_vue_vue_type_script_setup_true_lang = require("./search.vue2.cjs");
+const install = require("../../utils/vue/install.cjs");
+const VftSearch = install.withInstall(search_vue_vue_type_script_setup_true_lang.default);
+exports.VftSearch = VftSearch;
+exports.default = VftSearch;

package/lib/components/search/search.vue.cjs

@@ -1 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./search.vue2.cjs");exports.default=e.default;
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const search_vue_vue_type_script_setup_true_lang = require("./search.vue2.cjs");
+exports.default = search_vue_vue_type_script_setup_true_lang.default;

package/lib/components/search/search.vue2.cjs

@@ -1 +1,230 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue");require("@vueuse/core");require("@vft/utils");const a=require("../../utils/helper.cjs"),m=require("../../utils/ns-cover.cjs");require("lodash-es");const O=require("../input/index.cjs"),j=require("../popover/index.cjs"),A=require("../../hooks/use-namespace/index.cjs");require("../../hooks/use-model-toggle/index.cjs");require("@popperjs/core");require("../../hooks/use-z-index/index.cjs");const H=e.defineComponent({name:"vft-search"}),L=e.defineComponent({...H,props:{width:{default:200},activeWidth:{},usePopover:{type:Boolean,default:!1},popoverCfg:{},modelValue:{default:""},clearable:{type:Boolean,default:!0},placeholder:{default:"请输入你要搜索的内容"},suffixIcon:{default:()=>({icon:"icon-search",color:"#8B8C8C",pointer:!0})},prefixIcon:{},clearIcon:{}},emits:["update:modelValue","blur","focus","clear","enter","prefixClick","suffixClick","mouseenter","mouseleave","keydown","change","input","compositionstart","compositionupdate","compositionend"],setup(n,{expose:h,emit:C}){const r=A.useNamespace("search"),o=C,c=e.ref(),f=e.ref(),p=e.ref(),u=e.ref(!1),s=e.ref(!1),i=e.ref(!1),k=e.computed(()=>m.generateCssVars({width:n.activeWidth&&(i.value||n.modelValue)?a.addUnit(n.activeWidth):a.addUnit(n.width)},"input")),y=e.computed(()=>m.generateCssVars({"active-width":n.activeWidth?a.addUnit(n.activeWidth):a.addUnit(n.width)},"search")),V=e.computed(()=>({"show-arrow":!1,transition:"vft-zoom-in-top-fast",placement:"bottom-start","hide-after":100,offset:3,width:500,...n.popoverCfg})),w=t=>{o("update:modelValue",t),o("input",t)},g=()=>{d()};function x(){i.value=!0}function d(){i.value=!1}const S=()=>{o("clear"),l(!1)};function b(){s.value=!0,o("mouseenter",n.modelValue)}function q(){s.value=!1,o("mouseleave",n.modelValue)}const B=()=>{i.value=!0,u.value=!0,o("focus")};function P(){u.value=!1,o("blur")}function $(){l(),o("prefixClick",n.modelValue)}function R(){l(),o("suffixClick",n.modelValue)}function U(){l(),o("enter",n.modelValue)}function l(t=!0){n.usePopover&&d(),t&&p.value.blur()}const E=t=>{o("keydown",t)},M=e.computed(()=>c.value?.popperRef?.contentRef),I=t=>{o("update:modelValue",t)},W=t=>{o("change",t)},z=t=>{o("compositionstart",t)},F=t=>{o("compositionupdate",t)},N=t=>{o("compositionend",t)};return h({isFocus:u,isHover:s,visible:i,hidePopover:d,showPopover:x}),(t,v)=>{const D=e.resolveDirective("click-outside");return e.openBlock(),e.createElementBlock(e.Fragment,null,[e.withDirectives((e.openBlock(),e.createElementBlock("div",{ref_key:"searchRef",ref:f,class:e.normalizeClass([e.unref(r).b(),e.unref(r).is("active",i.value||t.modelValue)]),style:e.normalizeStyle(y.value)},[e.createVNode(e.unref(O.VftInput),e.mergeProps({ref_key:"inputRef",ref:p},t.$props,{"input-style":k.value,onInput:w,onFocus:B,onEnter:U,onBlur:P,onMouseenter:b,"onUpdate:modelValue":I,onMouseleave:q,onPrefixClick:$,onSuffixClick:R,onChange:W,onKeydown:E,onClear:S,onCompositionstart:z,onCompositionupdate:F,onCompositionend:N}),e.createSlots({_:2},[t.$slots.prefix?{name:"prefix",fn:e.withCtx(()=>[e.renderSlot(t.$slots,"prefix")]),key:"0"}:void 0,t.$slots.suffix?{name:"suffix",fn:e.withCtx(()=>[e.renderSlot(t.$slots,"suffix")]),key:"1"}:void 0,t.$slots.prepend?{name:"prepend",fn:e.withCtx(()=>[e.renderSlot(t.$slots,"prepend")]),key:"2"}:void 0,t.$slots.append?{name:"append",fn:e.withCtx(()=>[e.renderSlot(t.$slots,"append")]),key:"3"}:void 0]),1040,["input-style"])],6)),[[D,g,M.value]]),t.usePopover?(e.openBlock(),e.createBlock(e.unref(j.VftPopover),e.mergeProps({key:0,ref_key:"popoverRef",ref:c},V.value,{"virtual-ref":f.value,visible:i.value,"onUpdate:visible":v[0]||(v[0]=K=>i.value=K),"virtual-triggering":""}),{default:e.withCtx(()=>[e.createElementVNode("div",{class:e.normalizeClass(e.unref(r).e("content"))},[e.renderSlot(t.$slots,"default")],2)]),_:3},16,["virtual-ref","visible"])):e.createCommentVNode("",!0)],64)}}});exports.default=L;
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const vue = require("vue");
+const index$1 = require("../input/index.cjs");
+const index$2 = require("../popover/index.cjs");
+const index = require("../../hooks/use-namespace/index.cjs");
+const nsCover = require("../../utils/ns-cover.cjs");
+const helper = require("../../utils/helper.cjs");
+const __default__ = vue.defineComponent({
+  name: "vft-search"
+});
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...__default__,
+  props: {
+    width: { default: 200 },
+    activeWidth: {},
+    usePopover: { type: Boolean, default: false },
+    popoverCfg: {},
+    modelValue: { default: "" },
+    clearable: { type: Boolean, default: true },
+    placeholder: { default: "请输入你要搜索的内容" },
+    suffixIcon: { default: () => ({ icon: "icon-search", color: "#8B8C8C", pointer: true }) },
+    prefixIcon: {},
+    clearIcon: {}
+  },
+  emits: ["update:modelValue", "blur", "focus", "clear", "enter", "prefixClick", "suffixClick", "mouseenter", "mouseleave", "keydown", "change", "input", "compositionstart", "compositionupdate", "compositionend"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const ns = index.useNamespace("search");
+    const emit = __emit;
+    const popoverRef = vue.ref();
+    const searchRef = vue.ref();
+    const inputRef = vue.ref();
+    const isFocus = vue.ref(false);
+    const isHover = vue.ref(false);
+    const visible = vue.ref(false);
+    const inputStyle = vue.computed(
+      () => nsCover.generateCssVars(
+        {
+          width: __props.activeWidth && (visible.value || __props.modelValue) ? helper.addUnit(__props.activeWidth) : helper.addUnit(__props.width)
+        },
+        "input"
+      )
+    );
+    const activeWidthStyle = vue.computed(
+      () => nsCover.generateCssVars(
+        {
+          "active-width": __props.activeWidth ? helper.addUnit(__props.activeWidth) : helper.addUnit(__props.width)
+        },
+        "search"
+      )
+    );
+    const _popoverCfg = vue.computed(() => {
+      return {
+        "show-arrow": false,
+        transition: "vft-zoom-in-top-fast",
+        placement: "bottom-start",
+        "hide-after": 100,
+        offset: 3,
+        width: 500,
+        ...__props.popoverCfg
+      };
+    });
+    const handleInput = (value) => {
+      emit("update:modelValue", value);
+      emit("input", value);
+    };
+    const handleClickOut = () => {
+      hidePopover();
+    };
+    function showPopover() {
+      visible.value = true;
+    }
+    function hidePopover() {
+      visible.value = false;
+    }
+    const handleClear = () => {
+      emit("clear");
+      hideAndBlur(false);
+    };
+    function handleMouseEnter() {
+      isHover.value = true;
+      emit("mouseenter", __props.modelValue);
+    }
+    function handleMouseLeave() {
+      isHover.value = false;
+      emit("mouseleave", __props.modelValue);
+    }
+    const handleFocus = () => {
+      visible.value = true;
+      isFocus.value = true;
+      emit("focus");
+    };
+    function handleBlur() {
+      isFocus.value = false;
+      emit("blur");
+    }
+    function handlePrefixClick() {
+      hideAndBlur();
+      emit("prefixClick", __props.modelValue);
+    }
+    function handleSuffixClick() {
+      hideAndBlur();
+      emit("suffixClick", __props.modelValue);
+    }
+    function handleEnter() {
+      hideAndBlur();
+      emit("enter", __props.modelValue);
+    }
+    function hideAndBlur(blur = true) {
+      if (__props.usePopover) {
+        hidePopover();
+      }
+      if (blur) {
+        inputRef.value.blur();
+      }
+    }
+    const handleKeyDown = (data) => {
+      emit("keydown", data);
+    };
+    const popperPaneRef = vue.computed(() => {
+      return popoverRef.value?.popperRef?.contentRef;
+    });
+    const onUpdateModelValue = (data) => {
+      emit("update:modelValue", data);
+    };
+    const handleChange = (data) => {
+      emit("change", data);
+    };
+    const handleCompositionStart = (event) => {
+      emit("compositionstart", event);
+    };
+    const handleCompositionUpdate = (event) => {
+      emit("compositionupdate", event);
+    };
+    const handleCompositionEnd = (event) => {
+      emit("compositionend", event);
+    };
+    __expose({
+      isFocus,
+      isHover,
+      visible,
+      hidePopover,
+      showPopover
+    });
+    return (_ctx, _cache) => {
+      const _directive_click_outside = vue.resolveDirective("click-outside");
+      return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
+        vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
+          ref_key: "searchRef",
+          ref: searchRef,
+          class: vue.normalizeClass([vue.unref(ns).b(), vue.unref(ns).is("active", visible.value || _ctx.modelValue)]),
+          style: vue.normalizeStyle(activeWidthStyle.value)
+        }, [
+          vue.createVNode(vue.unref(index$1.VftInput), vue.mergeProps({
+            ref_key: "inputRef",
+            ref: inputRef
+          }, _ctx.$props, {
+            "input-style": inputStyle.value,
+            onInput: handleInput,
+            onFocus: handleFocus,
+            onEnter: handleEnter,
+            onBlur: handleBlur,
+            onMouseenter: handleMouseEnter,
+            "onUpdate:modelValue": onUpdateModelValue,
+            onMouseleave: handleMouseLeave,
+            onPrefixClick: handlePrefixClick,
+            onSuffixClick: handleSuffixClick,
+            onChange: handleChange,
+            onKeydown: handleKeyDown,
+            onClear: handleClear,
+            onCompositionstart: handleCompositionStart,
+            onCompositionupdate: handleCompositionUpdate,
+            onCompositionend: handleCompositionEnd
+          }), vue.createSlots({ _: 2 }, [
+            _ctx.$slots.prefix ? {
+              name: "prefix",
+              fn: vue.withCtx(() => [
+                vue.renderSlot(_ctx.$slots, "prefix")
+              ]),
+              key: "0"
+            } : void 0,
+            _ctx.$slots.suffix ? {
+              name: "suffix",
+              fn: vue.withCtx(() => [
+                vue.renderSlot(_ctx.$slots, "suffix")
+              ]),
+              key: "1"
+            } : void 0,
+            _ctx.$slots.prepend ? {
+              name: "prepend",
+              fn: vue.withCtx(() => [
+                vue.renderSlot(_ctx.$slots, "prepend")
+              ]),
+              key: "2"
+            } : void 0,
+            _ctx.$slots.append ? {
+              name: "append",
+              fn: vue.withCtx(() => [
+                vue.renderSlot(_ctx.$slots, "append")
+              ]),
+              key: "3"
+            } : void 0
+          ]), 1040, ["input-style"])
+        ], 6)), [
+          [_directive_click_outside, handleClickOut, popperPaneRef.value]
+        ]),
+        _ctx.usePopover ? (vue.openBlock(), vue.createBlock(vue.unref(index$2.VftPopover), vue.mergeProps({
+          key: 0,
+          ref_key: "popoverRef",
+          ref: popoverRef
+        }, _popoverCfg.value, {
+          "virtual-ref": searchRef.value,
+          visible: visible.value,
+          "onUpdate:visible": _cache[0] || (_cache[0] = ($event) => visible.value = $event),
+          "virtual-triggering": ""
+        }), {
+          default: vue.withCtx(() => [
+            vue.createElementVNode("div", {
+              class: vue.normalizeClass(vue.unref(ns).e("content"))
+            }, [
+              vue.renderSlot(_ctx.$slots, "default")
+            ], 2)
+          ]),
+          _: 3
+        }, 16, ["virtual-ref", "visible"])) : vue.createCommentVNode("", true)
+      ], 64);
+    };
+  }
+});
+exports.default = _sfc_main;

package/lib/components/search/style/css.cjs

@@ -1 +1 @@
-"use strict";require("vft/theme-style/base.css");require("vft/theme-style/vft-input.css");require("vft/theme-style/vft-popover.css");require("vft/theme-style/vft-popper.css");require("vft/theme-style/vft-icon.css");require("vft/theme-style/vft-search.css");
+"use strict";