@das-fed/ui 6.4.0-hot.33 → 6.4.0-hot.35

package/packages/components/search/index.d.ts

@@ -1,108 +1,138 @@
-declare const DasSearch: import("@das-fed/utils").SFCWithInstall<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    modelValue: {
-        type: StringConstructor;
+declare const DasSearch: import("@das-fed/utils").SFCWithInstall<import("vue").DefineComponent<{
+    size: {
+        type: import("vue").PropType<"small" | "custom" | "large" | "middle" | "middle-l" | "middle-xl">;
+        required: true;
         default: string;
     };
-    searchType: {
-        type: StringConstructor;
-        default: string;
+    disabled: {
+        type: import("vue").PropType<boolean>;
+        required: true;
+        default: boolean;
     };
-    size: {
-        type: StringConstructor;
+    modelValue: {
+        type: import("vue").PropType<string>;
+        required: true;
         default: string;
     };
-    prefixIcon: {
-        type: StringConstructor;
+    placeholder: {
+        type: import("vue").PropType<string>;
         default: string;
     };
+    clearable: {
+        type: import("vue").PropType<boolean>;
+        required: true;
+        default: boolean;
+    };
     suffixIcon: {
-        type: StringConstructor;
+        type: import("vue").PropType<string>;
+        required: true;
+        default: string;
+    };
+    prefixIcon: {
+        type: import("vue").PropType<string>;
+        required: true;
         default: string;
     };
     isIconLeft: {
-        type: BooleanConstructor;
+        type: import("vue").PropType<boolean>;
+        required: true;
         default: boolean;
     };
-    clearable: {
-        type: BooleanConstructor;
+    border: {
+        type: import("vue").PropType<boolean>;
+        required: true;
         default: boolean;
     };
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
+    searchType: {
+        type: import("vue").PropType<"basis">;
+        default: string;
     };
-    border: {
-        type: BooleanConstructor;
+    isTitle: {
+        type: import("vue").PropType<boolean>;
         default: boolean;
     };
     isExpandAtFocus: {
-        type: (BooleanConstructor | StringConstructor)[];
+        type: import("vue").PropType<boolean>;
+        required: true;
         default: boolean;
     };
-}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    search: (...args: any[]) => void;
-    "update:modelValue": (...args: any[]) => void;
-    change: (...args: any[]) => void;
-    blur: (...args: any[]) => void;
-    "press-enter": (...args: any[]) => void;
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (val: string) => void;
+    change: (val: string) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    modelValue: {
-        type: StringConstructor;
+    size: {
+        type: import("vue").PropType<"small" | "custom" | "large" | "middle" | "middle-l" | "middle-xl">;
+        required: true;
         default: string;
     };
-    searchType: {
-        type: StringConstructor;
-        default: string;
+    disabled: {
+        type: import("vue").PropType<boolean>;
+        required: true;
+        default: boolean;
     };
-    size: {
-        type: StringConstructor;
+    modelValue: {
+        type: import("vue").PropType<string>;
+        required: true;
         default: string;
     };
-    prefixIcon: {
-        type: StringConstructor;
+    placeholder: {
+        type: import("vue").PropType<string>;
         default: string;
     };
+    clearable: {
+        type: import("vue").PropType<boolean>;
+        required: true;
+        default: boolean;
+    };
     suffixIcon: {
-        type: StringConstructor;
+        type: import("vue").PropType<string>;
+        required: true;
+        default: string;
+    };
+    prefixIcon: {
+        type: import("vue").PropType<string>;
+        required: true;
         default: string;
     };
     isIconLeft: {
-        type: BooleanConstructor;
+        type: import("vue").PropType<boolean>;
+        required: true;
         default: boolean;
     };
-    clearable: {
-        type: BooleanConstructor;
+    border: {
+        type: import("vue").PropType<boolean>;
+        required: true;
         default: boolean;
     };
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
+    searchType: {
+        type: import("vue").PropType<"basis">;
+        default: string;
     };
-    border: {
-        type: BooleanConstructor;
+    isTitle: {
+        type: import("vue").PropType<boolean>;
         default: boolean;
     };
     isExpandAtFocus: {
-        type: (BooleanConstructor | StringConstructor)[];
+        type: import("vue").PropType<boolean>;
+        required: true;
         default: boolean;
     };
-}>> & Readonly<{
-    onSearch?: ((...args: any[]) => any) | undefined;
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-    onChange?: ((...args: any[]) => any) | undefined;
-    onBlur?: ((...args: any[]) => any) | undefined;
-    "onPress-enter"?: ((...args: any[]) => any) | undefined;
-}>, {
-    size: string;
+}>> & {
+    onChange?: ((val: string) => any) | undefined;
+    "onUpdate:modelValue"?: ((val: string) => any) | undefined;
+}, {
+    size: "large" | "middle" | "small" | "custom" | "middle-l" | "middle-xl";
     disabled: boolean;
     modelValue: string;
+    placeholder: string;
     clearable: boolean;
     suffixIcon: string;
     prefixIcon: string;
     isIconLeft: boolean;
-    isExpandAtFocus: string | boolean;
     border: boolean;
-    searchType: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>>;
+    searchType: "basis";
+    isTitle: boolean;
+    isExpandAtFocus: boolean;
+}, {}>>;
 export { DasSearch };
 export default DasSearch;

package/packages/components/search/index.js

@@ -1,156 +1,147 @@
 import '@das-fed/ui/packages/components/search/style.css';
-import { withInstall as S } from "@das-fed/utils/with-install/index";
-import { defineComponent as B, ref as o, watch as k, computed as E, openBlock as h, createElementBlock as C, normalizeClass as F, normalizeStyle as z, createVNode as A, unref as u, mergeProps as $, isRef as L, withCtx as v, createBlock as y, createCommentVNode as b } from "vue";
+import { withInstall as R } from "@das-fed/utils/with-install/index";
+import { defineComponent as S, ref as o, computed as T, watch as y, openBlock as g, createElementBlock as _, normalizeClass as w, normalizeStyle as N, createVNode as V, unref as v, withCtx as k, mergeProps as O, createBlock as W, createCommentVNode as $, nextTick as P } from "vue";
 import "element-plus/es/components/input/style/css";
-import { ElInput as w } from "element-plus";
-import { DasAutoRegisterIcon as D, DasIcon as x } from "@das-fed/ui/packages/components/icon/index";
-import { setThemeRule as R } from "@das-fed/web/packages/theme/index";
-const N = {
+import { ElInput as U } from "element-plus";
+import { DasAutoRegisterIcon as j, DasIcon as C } from "@das-fed/ui/packages/components/icon/index";
+import { DasTooltip as q } from "@das-fed/ui/packages/components/tooltip/index";
+import { calcTextWidth as G } from "@das-fed/utils/common-tools";
+import { setThemeRule as H } from "@das-fed/web/packages/theme/index";
+const J = {
   inheritAttrs: !1
-}, T = /* @__PURE__ */ B({
-  ...N,
+}, K = /* @__PURE__ */ S({
+  ...J,
   __name: "Index",
   props: {
-    modelValue: {
-      type: String,
-      default: ""
-    },
-    /**
-     * 搜索类型
-     * basis 基础搜索
-     * quick-search 多条件搜索
-     * panel 高级搜索
-     * smart 智能搜索
-     */
-    searchType: {
-      type: String,
-      default: "basis"
-    },
-    /**
-     * 搜索框尺寸
-     * large | middle | small | custom | middle-l | middle-xl
-     * custom 自适应
-     */
-    size: {
-      type: String,
-      default: "middle"
-    },
-    /**
-     * 前缀图标
-     */
-    prefixIcon: {
-      type: String,
-      default: ""
-    },
-    /**
-     * 后缀图标
-     */
-    suffixIcon: {
-      type: String,
-      default: ""
-    },
-    isIconLeft: {
-      type: Boolean,
-      default: !1
-    },
-    //是否显示清空图标
-    clearable: {
-      type: Boolean,
-      default: !0
-    },
-    /**
-     * 是否禁用
-     */
-    disabled: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * 是否需要边框
-     */
-    border: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-    * 聚焦是否需要展开输入框宽度
-    */
-    isExpandAtFocus: {
-      type: [Boolean, String],
-      default: !1
-    }
+    modelValue: { default: "" },
+    border: { type: Boolean, default: !1 },
+    searchType: { default: "basis" },
+    placeholder: { default: "" },
+    size: { default: "middle" },
+    disabled: { type: Boolean, default: !1 },
+    clearable: { type: Boolean, default: !0 },
+    prefixIcon: { default: "" },
+    suffixIcon: { default: "" },
+    isIconLeft: { type: Boolean, default: !1 },
+    isTitle: { type: Boolean, default: !0 },
+    isExpandAtFocus: { type: Boolean, default: !1 }
   },
-  emits: ["update:modelValue", "change", "blur", "press-enter", "search"],
-  setup(e, { emit: i }) {
-    D({
+  emits: ["update:modelValue", "change"],
+  setup(f, { emit: m }) {
+    const l = f, d = m;
+    j({
       search: import("@das-fed/ui/packages/icons/search"),
       empty: import("@das-fed/ui/packages/icons/empty")
     });
-    const t = e, n = i;
-    let a = o(t.modelValue), s = o(t.modelValue);
-    const g = () => {
-      n("update:modelValue", a.value), s.value = a.value, n("change", a.value);
-    }, c = (l) => l === null || typeof l > "u" || l === "";
-    k(
-      () => t.modelValue,
-      (l, r) => {
-        a.value = l, !c(r) && !c(s.value) && c(l) && (s.value = "", n("change", a.value));
-      },
-      {
-        immediate: !0,
-        deep: !0
+    const p = o(null), c = o(null), a = T({
+      get: () => l.modelValue,
+      set: (e) => d("update:modelValue", e)
+    }), u = o(!1), F = T(() => a.value ? a.value : l.placeholder), L = (e) => {
+      let t = e + "";
+      a.value = t, d("change", t);
+    }, B = () => G(l.placeholder, 12);
+    y(
+      () => c.value,
+      (e) => {
+        setTimeout(() => {
+          var n, x;
+          const t = e;
+          t && (s.value = ((n = t == null ? void 0 : t.ref) == null ? void 0 : n.offsetWidth) ?? 0, r.value = a.value ? (x = t == null ? void 0 : t.ref) == null ? void 0 : x.scrollWidth : B());
+        }, 200);
       }
     );
-    const d = o(""), f = o(!1), m = E(() => (t == null ? void 0 : t.isExpandAtFocus) === !0 || (t == null ? void 0 : t.isExpandAtFocus) === "true"), I = () => {
-      m.value && (d.value = "400px", f.value = !0);
-    }, V = () => {
-      m.value && (d.value = "", f.value = !1);
+    const s = o(0), r = o(0), E = () => {
+      P(() => {
+        var e, t, n;
+        (e = c.value) != null && e.ref && (s.value = (t = c.value) == null ? void 0 : t.ref.offsetWidth, r.value = a.value ? (n = c.value) == null ? void 0 : n.ref.scrollWidth : B(), (s.value === r.value || r.value - s.value < 1) && (u.value = !1));
+      });
+    };
+    y(() => [a.value, l.placeholder], E);
+    const i = o(), A = () => {
+      E(), s.value === r.value || r.value - s.value < 1 ? u.value = !1 : (u.value = !0, i.value && clearTimeout(i.value));
+    }, z = () => {
+      i.value = setTimeout(() => {
+        u.value = !1;
+      }, 200);
     };
-    return (l, r) => (h(), C(
-      "div",
-      {
-        class: F(`das-ui-search ${e.size}`),
-        style: z({ width: m.value && f.value ? d.value : "" })
+    y(
+      () => {
+        var e;
+        return (e = p.value) == null ? void 0 : e.$tooltipRef.popperRef.contentRef;
       },
-      [
-        A(u(w), $({ ref: "$refSearch" }, l.$attrs, {
-          type: "text",
-          class: `main-input ${e.size} ${e.border ? "border" : ""} ${e.isIconLeft ? "left" : ""}`,
-          modelValue: u(a),
-          "onUpdate:modelValue": r[0] || (r[0] = (p) => L(a) ? a.value = p : a = p),
-          disabled: e.disabled,
-          onChange: g,
-          clearable: t.clearable,
-          onFocus: I,
-          onBlur: V
-        }), {
-          prefix: v(() => [
-            e.isIconLeft ? (h(), y(u(x), {
-              key: 0,
-              icon: e.prefixIcon ? e.prefixIcon : "search"
-            }, null, 8, ["icon"])) : b("v-if", !0)
-          ]),
-          suffix: v(() => [
-            e.isIconLeft ? b("v-if", !0) : (h(), y(u(x), {
-              key: 0,
-              icon: e.suffixIcon ? e.suffixIcon : "search",
-              style: { cursor: "pointer" }
-            }, null, 8, ["icon"]))
-          ]),
-          _: 1
-          /* STABLE */
-        }, 16, ["class", "modelValue", "disabled", "clearable"])
-      ],
-      6
-      /* CLASS, STYLE */
-    ));
+      (e) => {
+        e && (e.addEventListener("mouseenter", function() {
+          u.value = !0, i.value && clearTimeout(i.value);
+        }), e.addEventListener("mouseleave", function() {
+          i.value = setTimeout(() => {
+            u.value = !1;
+          }, 200);
+        }));
+      }
+    );
+    const h = o(""), b = o(!1), I = T(() => (l == null ? void 0 : l.isExpandAtFocus) === !0 || (l == null ? void 0 : l.isExpandAtFocus) === "true"), D = () => {
+      !I.value || s.value > 400 || (h.value = "400px", b.value = !0);
+    }, M = (e) => {
+      I.value && (h.value = "", b.value = !1);
+    };
+    return (e, t) => (g(), _("div", {
+      class: w(`das-ui-search ${e.size}`),
+      style: N({ width: I.value && b.value ? h.value : "" })
+    }, [
+      V(v(q), {
+        ref_key: "inputTooltipRef",
+        ref: p,
+        effect: "light",
+        placement: "top",
+        manual: !0,
+        visible: u.value,
+        disabled: e.isExpandAtFocus || !e.isTitle,
+        content: F.value
+      }, {
+        default: k(() => [
+          V(v(U), O({
+            ref_key: "$refInput",
+            ref: c
+          }, e.$attrs, {
+            placeholder: e.placeholder,
+            type: "text",
+            class: `main-input ${e.size} ${e.border ? "border" : ""} ${e.isIconLeft ? "left" : ""}`,
+            modelValue: a.value,
+            "onUpdate:modelValue": t[0] || (t[0] = (n) => a.value = n),
+            disabled: e.disabled,
+            onChange: L,
+            clearable: l.clearable,
+            onFocus: D,
+            onBlur: M,
+            onMouseenter: A,
+            onMouseleave: z
+          }), {
+            prefix: k(() => [
+              e.isIconLeft ? (g(), W(v(C), {
+                key: 0,
+                icon: e.prefixIcon ? e.prefixIcon : "search"
+              }, null, 8, ["icon"])) : $("", !0)
+            ]),
+            suffix: k(() => [
+              e.isIconLeft ? $("", !0) : (g(), W(v(C), {
+                key: 0,
+                icon: e.suffixIcon ? e.suffixIcon : "search",
+                style: { cursor: "pointer" }
+              }, null, 8, ["icon"]))
+            ]),
+            _: 1
+          }, 16, ["placeholder", "class", "modelValue", "disabled", "clearable"])
+        ]),
+        _: 1
+      }, 8, ["visible", "disabled", "content"])
+    ], 6));
   }
-}), O = (e, i) => {
-  const t = e.__vccOpts || e;
-  for (const [n, a] of i)
-    t[n] = a;
-  return t;
-}, P = /* @__PURE__ */ O(T, [["__scopeId", "data-v-812ea8e1"]]), U = {
+}), Q = (f, m) => {
+  const l = f.__vccOpts || f;
+  for (const [d, p] of m)
+    l[d] = p;
+  return l;
+}, X = /* @__PURE__ */ Q(K, [["__scopeId", "data-v-0b97f6a7"]]), Y = {
   "--demo-alert-bg": {
     light: "#fff",
     dark: "rgba(255,255,255,.2)"
@@ -160,9 +151,9 @@ const N = {
   "--das-ui-search-text": "#212121",
   "--das-ui-search-border-active": "#5582F3"
 };
-R(U);
-const K = S(P);
+H(Y);
+const ne = R(X);
 export {
-  K as DasSearch,
-  K as default
+  ne as DasSearch,
+  ne as default
 };