@das-fed/ui 6.4.0-dev.9 → 6.4.0-dev.90

package/packages/components/select-input/index.js

@@ -1,24 +1,44 @@
 import '@das-fed/ui/packages/components/select-input/style.css';
-import { withInstall as C } from "@das-fed/utils/with-install/index";
-import { setThemeRule as I } from "@das-fed/web/packages/theme/index";
-import { defineComponent as b, openBlock as w, createBlock as y, unref as o, normalizeClass as H, isRef as m, createSlots as S, withCtx as h, createVNode as V } from "vue";
-import { DasInput as B } from "@das-fed/ui/packages/components/input/index";
-import { DasIconSearch as D } from "@das-fed/ui/packages/icons/search/index";
-import { DasSelect as k } from "@das-fed/ui/packages/components/select/index";
-import { useModelValue as f } from "@das-fed/utils/vue";
+import { withInstall as F } from "@das-fed/utils/with-install/index";
+import { setThemeRule as S } from "@das-fed/web/packages/theme/index";
+import { computed as H, ref as b, defineComponent as D, openBlock as k, createBlock as L, unref as e, normalizeClass as x, isRef as v, createSlots as E, withCtx as y, createVNode as B } from "vue";
+import { DasInput as W } from "@das-fed/ui/packages/components/input/index";
+import { DasIconSearch as K } from "@das-fed/ui/packages/icons/search/index";
+import { DasSelect as N } from "@das-fed/ui/packages/components/select/index";
+import { useModelValue as C } from "@das-fed/utils/vue";
 import "@das-fed/ui/packages/global/theme";
-const v = (t, n) => {
-  const l = f(t, "modelValue"), i = f(t, "optionValue");
-  return { innerValue: l, selectValue: i, inputChangeHandler: (a) => {
-    n("update:modelValue", a), n("inputChange", a);
-  }, selectChangeHandler: (a) => {
-    n("update:optionValue", a), n("selectChange", a);
-  }, inputInputHandler: (a) => {
-    n("update:modelValue", a), n("dasInput", a);
-  }, searchHandler: () => {
-    n("update:modelValue", l.value);
-  } };
-}, L = /* @__PURE__ */ b({
+const P = (t, a) => {
+  const u = C(t, "modelValue"), i = C(t, "optionValue"), l = C(t, "isExpandAtFocus"), s = H(() => typeof t.width == "number" ? t.width + "px" : t == null ? void 0 : t.width), h = () => {
+    a("update:modelValue", u.value);
+  }, m = (o) => {
+    a("update:modelValue", o), a("inputChange", o);
+  }, f = (o) => {
+    a("update:modelValue", o), a("dasInput", o);
+  }, V = (o) => {
+    a("update:optionValue", o), a("selectChange", o);
+  }, d = b(""), r = b(!1);
+  return {
+    innerValue: u,
+    selectValue: i,
+    inputChangeHandler: m,
+    selectChangeHandler: V,
+    inputInputHandler: f,
+    searchHandler: h,
+    inputWidth: d,
+    isFocus: r,
+    onFocus: () => {
+      var p;
+      if (!l.value) return;
+      let o = (p = s.value) == null ? void 0 : p.replace("px", "");
+      d.value = s.value && o * 1 > 400 ? s.value : "400px", r.value = !0;
+    },
+    onBlur: () => {
+      l.value && (d.value = "", r.value = !1);
+    },
+    isExpandInput: l,
+    selectInputWidth: s
+  };
+}, A = /* @__PURE__ */ D({
   __name: "Index",
   props: {
     options: { default: [] },
@@ -32,68 +52,86 @@ const v = (t, n) => {
     disabled: { type: Boolean },
     isView: { type: Boolean },
     error: { type: Boolean },
-    isSearch: { type: Boolean, default: !1 }
+    isSearch: { type: Boolean, default: !1 },
+    isExpandAtFocus: { type: Boolean, default: !1 },
+    width: { default: "268px" }
   },
   emits: ["update:modelValue", "update:optionValue", "inputChange", "dasInput", "selectChange"],
-  setup(t, { emit: n }) {
-    const l = t, i = n, { innerValue: s, selectValue: u, inputChangeHandler: p, selectChangeHandler: c, inputInputHandler: a, searchHandler: g } = v(l, i);
-    return (e, d) => (w(), y(o(B), {
-      class: H(["das-select-input", { "is-error": e.error, "is-search": e.isSearch, "is-disabled": e.disabled }]),
-      modelValue: o(s),
-      "onUpdate:modelValue": d[1] || (d[1] = (r) => m(s) ? s.value = r : null),
-      width: "268px",
-      prepend: "",
-      onInput: o(a),
-      onChange: o(p),
-      disabled: e.disabled,
-      isView: e.isView,
-      maxLength: e.maxLength
-    }, S({
-      prepend: h(() => [
-        V(o(k), {
+  setup(t, { emit: a }) {
+    const u = t, i = a, {
+      innerValue: l,
+      selectValue: s,
+      inputChangeHandler: h,
+      selectChangeHandler: m,
+      inputInputHandler: f,
+      searchHandler: V,
+      inputWidth: d,
+      isFocus: r,
+      onFocus: I,
+      onBlur: w,
+      isExpandInput: o,
+      selectInputWidth: p
+    } = P(u, i);
+    return (n, c) => (k(), L(e(W), {
+      class: x(["das-select-input", { "is-error": n.error, "is-search": n.isSearch, "is-disabled": n.disabled }]),
+      modelValue: e(l),
+      "onUpdate:modelValue": c[1] || (c[1] = (g) => v(l) ? l.value = g : null),
+      width: e(o) && e(r) ? e(d) : e(p),
+      disabled: n.disabled,
+      isView: n.isView,
+      maxLength: n.maxLength,
+      filterSpace: !1,
+      isTitle: !n.isExpandAtFocus,
+      onInput: e(f),
+      onChange: e(h),
+      onFocus: e(I),
+      onBlur: e(w)
+    }, E({
+      prepend: y(() => [
+        B(e(N), {
           size: "mini",
-          disabled: e.disabled,
-          isView: e.isView,
+          disabled: n.disabled,
+          isView: n.isView,
           dropdownClassName: "das-select-input-select-container",
-          modelValue: o(u),
-          "onUpdate:modelValue": d[0] || (d[0] = (r) => m(u) ? u.value = r : null),
-          width: "68px",
+          modelValue: e(s),
+          "onUpdate:modelValue": c[0] || (c[0] = (g) => v(s) ? s.value = g : null),
+          width: "auto",
           dropdownMatchSelectWidth: !1,
           "border-type": "none",
-          options: e.options,
-          getPopupContainer: e.getPopupContainer,
+          options: n.options,
+          getPopupContainer: n.getPopupContainer,
           fieldNames: {
-            value: e.optionsValueKey,
-            label: e.optionsLabelKey
+            value: n.optionsValueKey,
+            label: n.optionsLabelKey
           },
-          onChange: o(c)
+          onChange: e(m)
         }, null, 8, ["disabled", "isView", "modelValue", "options", "getPopupContainer", "fieldNames", "onChange"])
       ]),
       _: 2
     }, [
-      e.hasIcon ? {
+      n.hasIcon ? {
         name: "suffix",
-        fn: h(() => [
-          V(o(D), {
+        fn: y(() => [
+          B(e(K), {
             style: { cursor: "pointer" },
-            onClick: o(g)
+            onClick: e(V)
           }, null, 8, ["onClick"])
         ]),
         key: "0"
       } : void 0
-    ]), 1032, ["class", "modelValue", "onInput", "onChange", "disabled", "isView", "maxLength"]));
+    ]), 1032, ["class", "modelValue", "width", "disabled", "isView", "maxLength", "isTitle", "onInput", "onChange", "onFocus", "onBlur"]));
   }
-}), K = (t, n) => {
-  const l = t.__vccOpts || t;
-  for (const [i, s] of n)
-    l[i] = s;
-  return l;
-}, N = /* @__PURE__ */ K(L, [["__scopeId", "data-v-56682d01"]]), P = {
+}), T = (t, a) => {
+  const u = t.__vccOpts || t;
+  for (const [i, l] of a)
+    u[i] = l;
+  return u;
+}, z = /* @__PURE__ */ T(A, [["__scopeId", "data-v-d2cb3159"]]), M = {
   "--das-ui-select-input-border-color": { light: "#999" },
   "--das-ui-select-input-border-color-search": { light: "#D9D9D9" }
-}, q = C(N);
-I(P);
+}, X = F(z);
+S(M);
 export {
-  q as DasSelectInput,
-  q as default
+  X as DasSelectInput,
+  X as default
 };

package/packages/components/select-input/src/Index.vue.d.ts

@@ -7,6 +7,8 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     options: never[];
     hasIcon: boolean;
     isSearch: boolean;
+    isExpandAtFocus: boolean;
+    width: string;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string) => void;
     "update:optionValue": (value: string | number) => void;
@@ -21,6 +23,8 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     options: never[];
     hasIcon: boolean;
     isSearch: boolean;
+    isExpandAtFocus: boolean;
+    width: string;
 }>>> & {
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
     "onUpdate:optionValue"?: ((value: string | number) => any) | undefined;
@@ -28,11 +32,13 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     onSelectChange?: ((value: string | number) => any) | undefined;
     onInputChange?: ((value: string) => any) | undefined;
 }, {
-    options: any;
     modelValue: any;
+    width: string | number;
+    options: any;
     optionValue: any;
     optionsLabelKey: string | number | object;
     optionsValueKey: string | number;
+    isExpandAtFocus: boolean;
     hasIcon: boolean;
     isSearch: boolean;
 }, {}>;

package/packages/components/select-input/src/hooks/use-select-input.d.ts

@@ -6,4 +6,10 @@ export declare const useSelectInput: (props: Props, emit: Emits) => {
     selectChangeHandler: (val: any) => void;
     inputInputHandler: (val: any) => void;
     searchHandler: () => void;
+    inputWidth: import("vue").Ref<string>;
+    isFocus: import("vue").Ref<boolean>;
+    onFocus: () => void;
+    onBlur: () => void;
+    isExpandInput: import("vue").Ref<any>;
+    selectInputWidth: import("vue").ComputedRef<string | undefined>;
 };

package/packages/components/select-input/src/type.d.ts

@@ -1,54 +1,59 @@
-export interface Props {
-  
-  options: any
-
-  
-  optionValue?: any
-
-  
-  optionsLabelKey?: string | number | object
-
-  
-  optionsValueKey?: string | number
-
-  
-  getPopupContainer?: any
-
-  
-  modelValue: any
-
-  
-  hasIcon?: boolean
-
-  
-  maxLength?: number | string
-
-  
-  disabled?: boolean
-
-  
-  isView?: boolean
-
-  
-  error?: boolean
-
-  
-  isSearch?: boolean
-}
-
-export interface Emits {
-  
-  (e: 'update:modelValue', value: string): void
-
-  
-  (e: 'update:optionValue', value: string | number): void
-
-  
-  (e: 'inputChange', value: string): void
-
-  
-  (e: 'dasInput', value: string): void
-
-  
-  (e: 'selectChange', value: string | number): void
-}
+export interface Props {
+  
+  options: any
+
+  
+  optionValue?: any
+
+  
+  optionsLabelKey?: string | number | object
+
+  
+  optionsValueKey?: string | number
+
+  
+  getPopupContainer?: any
+
+  
+  modelValue: any
+
+  
+  hasIcon?: boolean
+
+  
+  maxLength?: number | string
+
+  
+  disabled?: boolean
+
+  
+  isView?: boolean
+
+  
+  error?: boolean
+
+  
+  isSearch?: boolean
+
+   
+   isExpandAtFocus?: boolean 
+
+   width?:string | number
+}
+
+export interface Emits {
+  
+  (e: 'update:modelValue', value: string): void
+
+  
+  (e: 'update:optionValue', value: string | number): void
+
+  
+  (e: 'inputChange', value: string): void
+
+  
+  (e: 'dasInput', value: string): void
+
+  
+  (e: 'selectChange', value: string | number): void
+}

package/packages/components/select-input/style.css

@@ -1 +1 @@
-.das-ui-input.only-border-bottom[data-v-56682d01] .das-select-input{height:24px}.das-ui-input.only-border-bottom[data-v-56682d01] .das-select-input.el-input.el-input-group{border-color:var(--das-ui-select-input-border-color)}.das-ui-input.only-border-bottom[data-v-56682d01] .das-select-input.el-input.el-input-group.is-search{border-color:var(--das-ui-select-input-border-color-search)}.das-ui-input.only-border-bottom[data-v-56682d01] .das-select-input.el-input.el-input-group.input-focus-color,.das-ui-input.only-border-bottom[data-v-56682d01] .das-select-input.el-input.el-input-group:hover{border-color:var(--das-ui-input-only-bottom-active-border-color)}.das-ui-input.only-border-bottom[data-v-56682d01] .das-select-input.el-input.el-input-group.is-disabled{border-color:var(--das-ui-select-input-border-color-search)}.das-ui-input.only-border-bottom[data-v-56682d01] .das-select-input.el-input.el-input-group.is-error{border-color:var(--das-ui-input-error-color)}.das-ui-input.only-border-bottom[data-v-56682d01] .das-select-input.el-input.el-input-group .el-input-group__prepend{padding-right:8px!important}.das-ui-input.only-border-bottom[data-v-56682d01] .das-select-input.el-input.el-input-group .el-input-group__prepend .ant-select-selection-item{padding-right:18px}[data-v-56682d01] .el-input__icon{font-size:16px}.das-select-input-select-container.ant-select-dropdown{width:120px;padding:8px 0;max-height:176px}.das-select-input-select-container.ant-select-dropdown .rc-virtual-list-holder{max-height:160px!important}
+.das-ui-input.only-border-bottom[data-v-d2cb3159]{transition:width .3s ease}.das-ui-input.only-border-bottom[data-v-d2cb3159] .das-select-input{height:24px}.das-ui-input.only-border-bottom[data-v-d2cb3159] .das-select-input.el-input.el-input-group{border-color:var(--das-ui-select-input-border-color)}.das-ui-input.only-border-bottom[data-v-d2cb3159] .das-select-input.el-input.el-input-group.is-search{border-color:var(--das-ui-select-input-border-color-search)}.das-ui-input.only-border-bottom[data-v-d2cb3159] .das-select-input.el-input.el-input-group.input-focus-color,.das-ui-input.only-border-bottom[data-v-d2cb3159] .das-select-input.el-input.el-input-group:hover{border-color:var(--das-ui-input-only-bottom-active-border-color)}.das-ui-input.only-border-bottom[data-v-d2cb3159] .das-select-input.el-input.el-input-group.is-disabled{border-color:var(--das-ui-select-input-border-color-search)}.das-ui-input.only-border-bottom[data-v-d2cb3159] .das-select-input.el-input.el-input-group.is-error{border-color:var(--das-ui-input-error-color)}.das-ui-input.only-border-bottom[data-v-d2cb3159] .das-select-input.el-input.el-input-group .el-input-group__prepend{padding-right:8px!important}.das-ui-input.only-border-bottom[data-v-d2cb3159] .das-select-input.el-input.el-input-group .el-input-group__prepend .ant-select-selection-item{padding-right:18px}[data-v-d2cb3159] .el-input__icon{font-size:16px}.das-select-input-select-container.ant-select-dropdown{min-width:100px!important;padding:8px 0;max-height:328px;max-width:180px}.das-select-input-select-container.ant-select-dropdown .rc-virtual-list-holder{max-height:160px!important}.das-select-input .das-ui-select{min-width:68px}

package/packages/components/select-list/i18n/index.d.ts

@@ -2,18 +2,22 @@ declare const _default: {
     'das-select-list-removeAll': {
         'zh-CN': string;
         en: string;
+        _appCode: string;
     };
     'das-select-list-selected': {
         'zh-CN': string;
         en: string;
+        _appCode: string;
     };
     'das-select-list-parentheses-left': {
         'zh-CN': string;
         en: string;
+        _appCode: string;
     };
     'das-select-list-parentheses-right': {
         'zh-CN': string;
         en: string;
+        _appCode: string;
     };
 };
 export default _default;