y-design-ssr 0.2.0 → 0.2.2

package/libs/input/index.mjs

@@ -1,27 +1,67 @@
-import { inject as k, getCurrentInstance as b, watch as s, onUnmounted as I, ref as T, reactive as D, defineComponent as W, onMounted as F, onBeforeUnmount as O, computed as P, withDirectives as h, createVNode as v, mergeProps as x, vModelText as U, vModelDynamic as j } from "vue";
-const A = "y-form-item", R = () => {
-  const e = k(A, null), t = b();
-  if (e && (t != null && t.proxy)) {
-    const { setField: a } = e, { resetValidation: n, change: o, validateWithTrigger: u } = e;
-    return s(
-      () => t.proxy.modelValue,
+import { inject, getCurrentInstance, watch, onUnmounted, ref, reactive, defineComponent, onMounted, onBeforeUnmount, computed, withDirectives, createVNode, mergeProps, vModelText, vModelDynamic } from "vue";
+const FORM_ITEM_PROVIDE = "y-form-item";
+const useFormItem = () => {
+  const parent = inject(FORM_ITEM_PROVIDE, null);
+  const instance = getCurrentInstance();
+  if (parent && (instance == null ? void 0 : instance.proxy)) {
+    const { setField } = parent;
+    const { resetValidation, change, validateWithTrigger } = parent;
+    watch(
+      () => instance.proxy.modelValue,
       () => {
-        e.instance && e.instance.exposed && (n(), o(), u("onChange"));
+        if (parent.instance && parent.instance.exposed) {
+          resetValidation();
+          change();
+          validateWithTrigger("onChange");
+        }
       }
-    ), a(t), I(() => a(null)), {
-      parent: e
+    );
+    setField(instance);
+    onUnmounted(() => setField(null));
+    return {
+      parent
     };
   }
   return {
     parent: null
   };
-}, c = (e, t) => t ? typeof t == "string" ? ` ${e}--${t}` : Array.isArray(t) ? t.reduce((a, n) => a + c(e, n), "") : Object.keys(t).reduce(
-  (a, n) => a + (t[n] ? c(e, n) : ""),
-  ""
-) : "", G = (e) => (t, a) => {
-  let n = t, o = a;
-  return n && typeof n != "string" && (o = n, n = ""), n = n ? `${e}__${n}` : e, `${n}${c(n, o)}`;
-}, H = () => (e, t) => t ? `${c(`y-${e}`, t)}` : `y-${e}`, K = {
+};
+const getMods = (el, mods) => {
+  if (!mods) {
+    return "";
+  }
+  if (typeof mods === "string") {
+    return ` ${el}--${mods}`;
+  }
+  if (Array.isArray(mods)) {
+    return mods.reduce((acc, cur) => acc + getMods(el, cur), "");
+  }
+  return Object.keys(mods).reduce(
+    (acc, cur) => acc + (mods[cur] ? getMods(el, cur) : ""),
+    ""
+  );
+};
+const createBEM = (block) => {
+  return (el, mods) => {
+    let _el = el;
+    let _mods = mods;
+    if (_el && typeof _el !== "string") {
+      _mods = _el;
+      _el = "";
+    }
+    _el = _el ? `${block}__${_el}` : block;
+    return `${_el}${getMods(_el, _mods)}`;
+  };
+};
+const createGlobalBem = () => {
+  return (el, mods) => {
+    if (!mods) {
+      return `y-${el}`;
+    }
+    return `${getMods(`y-${el}`, mods)}`;
+  };
+};
+const defaultLang = {
   "pull-refresh": {
     pulling: "下拉刷新...",
     loosing: "释放刷新...",
@@ -33,15 +73,18 @@ const A = "y-form-item", R = () => {
     validateMessage: "请输入正确内容"
   }
 };
-T("zh-CN");
-D({
-  "zh-CN": K
+ref("zh-CN");
+reactive({
+  "zh-CN": defaultLang
 });
-const q = (e) => {
-  const t = `y-${e}`;
-  return [t, G(t), H()];
-}, [J, Q] = q("input"), X = 13, f = /* @__PURE__ */ W({
-  name: J,
+const createNamespace = (name2) => {
+  const prefixedName = `y-${name2}`;
+  return [prefixedName, createBEM(prefixedName), createGlobalBem()];
+};
+const [name, bem] = createNamespace("input");
+const ENTER_CODE = 13;
+const Input = /* @__PURE__ */ defineComponent({
+  name,
   props: {
     modelValue: {
       type: [String, Number],
@@ -53,7 +96,7 @@ const q = (e) => {
     },
     border: {
       type: Boolean,
-      default: !1
+      default: false
     },
     placeholder: {
       type: String,
@@ -81,97 +124,145 @@ const q = (e) => {
     },
     showWordLimit: {
       type: Boolean,
-      default: !1
+      default: false
     },
     readonly: {
       type: Boolean,
-      default: !1
+      default: false
     },
     disabled: {
       type: Boolean,
-      default: !1
+      default: false
     }
   },
   emits: ["click", "input", "keypress", "focus", "blur", "update:modelValue"],
-  setup(e, {
-    emit: t
+  setup(props, {
+    emit
   }) {
-    const a = b(), {
-      parent: n
-    } = R();
-    let o = null;
-    const u = (l, r) => {
-      l !== r && o && (o.innerHTML = `${e.modelValue.toString().length}/${e.maxLength}`);
-    }, m = (l, r) => {
-      l !== r && (l ? (o = document.createElement("div"), o.className = "y-input__limit-num", (a == null ? void 0 : a.vnode.el).insertAdjacentElement("afterend", o), e.maxLength && u(e.maxLength)) : (o && o.remove(), o = null));
+    const instance = getCurrentInstance();
+    const {
+      parent
+    } = useFormItem();
+    let limitEl = null;
+    const setLimit = (value, oldValue) => {
+      if (value === oldValue)
+        return;
+      if (limitEl) {
+        limitEl.innerHTML = `${props.modelValue.toString().length}/${props.maxLength}`;
+      }
+    };
+    const setLimitContainer = (value, oldValue) => {
+      if (value === oldValue)
+        return;
+      if (value) {
+        limitEl = document.createElement("div");
+        limitEl.className = "y-input__limit-num";
+        const el = instance == null ? void 0 : instance.vnode.el;
+        el.insertAdjacentElement("afterend", limitEl);
+        if (props.maxLength)
+          setLimit(props.maxLength);
+      } else {
+        limitEl && limitEl.remove();
+        limitEl = null;
+      }
     };
-    s(() => e.showWordLimit, m), s(() => e.modelValue, u), s(() => e.maxLength, u);
-    const L = (l) => t("focus", l), V = (l) => t("click", l), $ = (l) => {
-      if (n) {
+    watch(() => props.showWordLimit, setLimitContainer);
+    watch(() => props.modelValue, setLimit);
+    watch(() => props.maxLength, setLimit);
+    const onFocus = (e) => emit("focus", e);
+    const onClick = (e) => emit("click", e);
+    const onBlur = (e) => {
+      if (parent) {
         const {
-          validateWithTrigger: r
-        } = n;
-        r("onBlur");
+          validateWithTrigger
+        } = parent;
+        validateWithTrigger("onBlur");
       }
-      t("blur", l);
-    }, N = (l) => {
-      t("update:modelValue", l.target.value), t("input", l);
-    }, B = (l) => {
-      l.keyCode === X && (n != null && n.getProp("enterable") || l.preventDefault(), e.type === "search" && (a == null ? void 0 : a.vnode.el).blur()), t("keypress", l);
+      emit("blur", e);
     };
-    F(() => {
-      m(e.showWordLimit), u(e.maxLength);
-    }), O(() => {
-      o && o.remove(), o = null;
+    const onInput = (e) => {
+      emit("update:modelValue", e.target.value);
+      emit("input", e);
+    };
+    const onKeypress = (e) => {
+      if (e.keyCode === ENTER_CODE) {
+        if (!(parent == null ? void 0 : parent.getProp("enterable"))) {
+          e.preventDefault();
+        }
+        if (props.type === "search") {
+          const el = instance == null ? void 0 : instance.vnode.el;
+          el.blur();
+        }
+      }
+      emit("keypress", e);
+    };
+    onMounted(() => {
+      setLimitContainer(props.showWordLimit);
+      setLimit(props.maxLength);
     });
-    const i = P({
-      get: () => e.modelValue,
-      set: (l) => t("update:modelValue", l)
+    onBeforeUnmount(() => {
+      limitEl && limitEl.remove();
+      limitEl = null;
+    });
+    const visible = computed({
+      get: () => props.modelValue,
+      set: (value) => emit("update:modelValue", value)
     });
     return () => {
       const {
-        type: l,
-        rows: r,
-        align: g,
-        disabled: C,
-        maxLength: E,
-        size: M,
-        border: _,
-        readonly: w,
-        autocomplete: S,
-        placeholder: z
-      } = e, y = M || (n == null ? void 0 : n.getProp("size")), p = {
-        class: Q({
-          [y]: y,
-          border: _
+        type,
+        rows,
+        align,
+        disabled,
+        maxLength,
+        size: inputSize,
+        border,
+        readonly,
+        autocomplete,
+        placeholder
+      } = props;
+      const size = inputSize || (parent == null ? void 0 : parent.getProp("size"));
+      const attrs = {
+        class: bem({
+          [size]: size,
+          border
         }),
         style: {
-          "text-align": g
+          "text-align": align
         },
-        disabled: C,
-        readonly: w,
-        placeholder: z,
-        maxlength: E,
-        onInput: N,
-        autocomplete: S,
-        onFocus: L,
-        onClick: V,
-        onKeypress: B,
-        onBlur: $
+        disabled,
+        readonly,
+        placeholder,
+        maxlength: maxLength,
+        onInput,
+        autocomplete,
+        onFocus,
+        onClick,
+        onKeypress,
+        onBlur
       };
-      return l === "textarea" ? h(v("textarea", x(p, {
-        rows: r,
-        "onUpdate:modelValue": (d) => i.value = d
-      }), null), [[U, i.value]]) : h(v("input", x(p, {
-        "onUpdate:modelValue": (d) => i.value = d,
-        type: l
-      }), null), [[j, i.value]]);
+      if (type === "textarea") {
+        return withDirectives(createVNode("textarea", mergeProps(attrs, {
+          "rows": rows,
+          "onUpdate:modelValue": ($event) => visible.value = $event
+        }), null), [[vModelText, visible.value]]);
+      }
+      return withDirectives(createVNode("input", mergeProps(attrs, {
+        "onUpdate:modelValue": ($event) => visible.value = $event,
+        "type": type
+      }), null), [[vModelDynamic, visible.value]]);
     };
   }
 });
-f.install = (e) => {
-  e.component(f.name, f);
+const reset = "";
+const libs = "";
+const font = "";
+const animation = "";
+const theme = "";
+const style = "";
+Input.install = (Vue) => {
+  Vue.component(Input.name, Input);
 };
 export {
-  f as default
+  Input as default
 };