y-design-ssr 0.2.0 → 0.2.2

package/libs/form/index.mjs

@@ -1,40 +1,91 @@
-import { getCurrentInstance as O, reactive as B, provide as w, isVNode as N, ref as P, defineComponent as S, createVNode as V } from "vue";
-const F = (e) => {
-  const t = [], r = (o) => {
-    Array.isArray(o) && o.forEach((l) => {
-      var c;
-      N(l) && (t.push(l), (c = l.component) != null && c.subTree && r(l.component.subTree.children), l.children && r(l.children));
+import { getCurrentInstance, reactive, provide, isVNode, ref, defineComponent, createVNode } from "vue";
+const filterChildren = (children) => {
+  const vnodes = [];
+  const _filterChildren = (childrens) => {
+    if (Array.isArray(childrens)) {
+      childrens.forEach((child) => {
+        var _a;
+        if (isVNode(child)) {
+          vnodes.push(child);
+          if ((_a = child.component) == null ? void 0 : _a.subTree) {
+            _filterChildren(child.component.subTree.children);
+          }
+          if (child.children) {
+            _filterChildren(child.children);
+          }
+        }
+      });
+    }
+  };
+  _filterChildren(children);
+  return vnodes;
+};
+const sortChildren = (childrens, instance) => {
+  const vnodes = filterChildren(instance.subTree.children);
+  childrens.sort((a, b) => vnodes.indexOf(a.vnode) - vnodes.indexOf(b.vnode));
+};
+const setRelation = (key) => {
+  const instance = getCurrentInstance();
+  const childrens = reactive([]);
+  const initProvide = (value) => {
+    const addChild = (child) => {
+      if (child.proxy) {
+        childrens.push(child);
+        instance && sortChildren(childrens, instance);
+      }
+    };
+    const removeChild = (child) => {
+      const index = childrens.indexOf(child);
+      childrens.splice(index, 1);
+    };
+    provide(key, {
+      addChild,
+      removeChild,
+      childrens,
+      ...value
     });
   };
-  return r(e), t;
-}, M = (e, t) => {
-  const r = F(t.subTree.children);
-  e.sort((o, l) => r.indexOf(o.vnode) - r.indexOf(l.vnode));
-}, _ = (e) => {
-  const t = O(), r = B([]);
   return {
-    childrens: r,
-    initProvide: (l) => {
-      w(e, {
-        addChild: (d) => {
-          d.proxy && (r.push(d), t && M(r, t));
-        },
-        removeChild: (d) => {
-          const h = r.indexOf(d);
-          r.splice(h, 1);
-        },
-        childrens: r,
-        ...l
-      });
+    childrens,
+    initProvide
+  };
+};
+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)}`;
   };
-}, f = (e, t) => t ? typeof t == "string" ? ` ${e}--${t}` : Array.isArray(t) ? t.reduce((r, o) => r + f(e, o), "") : Object.keys(t).reduce(
-  (r, o) => r + (t[o] ? f(e, o) : ""),
-  ""
-) : "", T = (e) => (t, r) => {
-  let o = t, l = r;
-  return o && typeof o != "string" && (l = o, o = ""), o = o ? `${e}__${o}` : e, `${o}${f(o, l)}`;
-}, I = () => (e, t) => t ? `${f(`y-${e}`, t)}` : `y-${e}`, R = {
+};
+const createGlobalBem = () => {
+  return (el, mods) => {
+    if (!mods) {
+      return `y-${el}`;
+    }
+    return `${getMods(`y-${el}`, mods)}`;
+  };
+};
+const defaultLang = {
   "pull-refresh": {
     pulling: "下拉刷新...",
     loosing: "释放刷新...",
@@ -46,23 +97,27 @@ const F = (e) => {
     validateMessage: "请输入正确内容"
   }
 };
-P("zh-CN");
-B({
-  "zh-CN": R
+ref("zh-CN");
+reactive({
+  "zh-CN": defaultLang
 });
-const z = (e) => {
-  const t = `y-${e}`;
-  return [t, T(t), I()];
+const createNamespace = (name2) => {
+  const prefixedName = `y-${name2}`;
+  return [prefixedName, createBEM(prefixedName), createGlobalBem()];
 };
-var D = /* @__PURE__ */ ((e) => (e.ONCHANGE = "onChange", e.ONBLUR = "onBlur", e))(D || {});
-const G = {
+var TriggerTypes = /* @__PURE__ */ ((TriggerTypes2) => {
+  TriggerTypes2["ONCHANGE"] = "onChange";
+  TriggerTypes2["ONBLUR"] = "onBlur";
+  return TriggerTypes2;
+})(TriggerTypes || {});
+const commonProps = {
   size: {
     type: String,
     default: null
   },
   border: {
     type: Boolean,
-    default: !0
+    default: true
   },
   labelWidth: {
     type: [Number, String],
@@ -71,7 +126,7 @@ const G = {
   colon: {
     // 是否有 "："
     type: Boolean,
-    default: !1
+    default: false
   },
   labelAlign: {
     type: String,
@@ -79,11 +134,11 @@ const G = {
   },
   showError: {
     type: Boolean,
-    default: !0
+    default: true
   },
   showErrorMessage: {
     type: Boolean,
-    default: !0
+    default: true
   },
   errorMessageAlign: {
     type: String,
@@ -93,18 +148,21 @@ const G = {
     type: [Object, Array],
     default: null
   }
-}, [C, L] = z("form"), U = C, m = /* @__PURE__ */ S({
-  name: C,
+};
+const [name, bem] = createNamespace("form");
+const FORM_PROVIDE = name;
+const Form = /* @__PURE__ */ defineComponent({
+  name,
   props: {
-    ...G,
+    ...commonProps,
     validateFirst: {
       // 是否在某一项校验不通过时停止校验
       type: Boolean,
-      default: !1
+      default: false
     },
     scrollToError: {
       type: Boolean,
-      default: !0
+      default: true
     },
     validateTrigger: {
       type: String,
@@ -113,101 +171,143 @@ const G = {
     enterable: {
       // 回车可以submit
       type: Boolean,
-      default: !0
+      default: true
     }
   },
   emits: ["change", "submit", "failed"],
-  setup(e, {
-    slots: t,
-    emit: r,
-    expose: o
+  setup(props, {
+    slots,
+    emit,
+    expose
   }) {
     const {
-      initProvide: l,
-      childrens: c
-    } = _(U), p = () => {
-      const n = {};
-      return c.forEach((s) => {
-        const a = s.exposed;
-        n[s.props.prop] = a.formValue;
-      }), n;
-    }, d = (n) => {
-      const s = c.filter((a) => a.props.prop === n);
-      return new Promise((a, i) => {
-        if (s.length === 0)
-          i(new Error('【YUI】form method "validateField": no field, please check your param: "propName"!'));
-        else {
-          const u = s[0].exposed;
-          u == null || u.validate().then((x) => {
-            x ? i(x) : a();
+      initProvide,
+      childrens
+    } = setRelation(FORM_PROVIDE);
+    const getValues = () => {
+      const form = {};
+      childrens.forEach((child) => {
+        const exposed = child.exposed;
+        form[child.props.prop] = exposed.formValue;
+      });
+      return form;
+    };
+    const validateField = (propName) => {
+      const fields = childrens.filter((child) => child.props.prop === propName);
+      return new Promise((resolve, reject) => {
+        if (fields.length === 0) {
+          reject(new Error('【YUI】form method "validateField": no field, please check your param: "propName"!'));
+        } else {
+          const exposed = fields[0].exposed;
+          exposed == null ? void 0 : exposed.validate().then((error) => {
+            if (error) {
+              reject(error);
+            } else {
+              resolve();
+            }
           });
         }
       });
-    }, h = async () => {
-      const n = [];
-      if (await c.reduce((s, a) => s.then(() => {
-        if (!n.length) {
-          const i = a.exposed;
-          return i == null ? void 0 : i.validate().then((u) => {
-            u && n.push(u);
+    };
+    const validateOfSeq = async () => {
+      const errors = [];
+      await childrens.reduce((promise, child) => promise.then(() => {
+        if (!errors.length) {
+          const exposed = child.exposed;
+          return exposed == null ? void 0 : exposed.validate().then((error) => {
+            if (error) {
+              errors.push(error);
+            }
           });
         }
         return null;
-      }), Promise.resolve()), n.length)
-        throw n;
-    }, $ = async () => {
-      const s = (await Promise.all(c.map((a) => a.exposed.validate()))).filter((a) => a);
-      if (s.length)
-        throw s;
-    }, y = (n) => n ? d(n) : e.validateFirst ? h() : $(), v = (n, s) => {
-      const a = c.find((u) => u.props.prop === n);
-      (a == null ? void 0 : a.vnode.el).scrollIntoView(s);
-    }, g = () => {
-      const n = p();
-      y().then(() => {
-        r("submit", n);
-      }).catch((s) => {
-        r("failed", {
-          values: n,
-          errors: s
-        }), Array.isArray(s) && e.scrollToError && v(s == null ? void 0 : s[0].name);
+      }), Promise.resolve());
+      if (errors.length) {
+        throw errors;
+      }
+    };
+    const validateOfAll = async () => {
+      const errors = await Promise.all(childrens.map((child) => {
+        const exposed = child.exposed;
+        return exposed.validate();
+      }));
+      const errs = errors.filter((error) => error);
+      if (errs.length) {
+        throw errs;
+      }
+    };
+    const validate = (propName) => {
+      if (propName) {
+        return validateField(propName);
+      }
+      return props.validateFirst ? validateOfSeq() : validateOfAll();
+    };
+    const scrollToField = (propName, options) => {
+      const currentChild = childrens.find((child) => child.props.prop === propName);
+      const $el = currentChild == null ? void 0 : currentChild.vnode.el;
+      $el.scrollIntoView(options);
+    };
+    const submit = () => {
+      const values = getValues();
+      validate().then(() => {
+        emit("submit", values);
+      }).catch((errors) => {
+        emit("failed", {
+          values,
+          errors
+        });
+        if (Array.isArray(errors) && props.scrollToError) {
+          scrollToField(errors == null ? void 0 : errors[0].name);
+        }
       });
-    }, A = (n) => {
-      n.preventDefault(), g();
-    }, b = () => {
-      r("change", p());
-    }, E = (n) => {
-      c.forEach((s) => {
-        var a;
-        if (!n || s.props.prop === n) {
-          const i = s.exposed;
-          (a = i.resetValidation) == null || a.call(i);
+    };
+    const onSubmit = (event) => {
+      event.preventDefault();
+      submit();
+    };
+    const change = () => {
+      emit("change", getValues());
+    };
+    const resetValidation = (propName) => {
+      childrens.forEach((children) => {
+        var _a;
+        if (!propName || children.props.prop === propName) {
+          const exposed = children.exposed;
+          (_a = exposed.resetValidation) == null ? void 0 : _a.call(exposed);
         }
       });
     };
-    return l({
-      props: e,
-      change: b
-    }), o({
-      submit: g,
-      scrollToField: v,
-      validate: y,
-      change: b,
-      resetValidation: E
-    }), () => {
-      var n;
-      return V("form", {
-        onSubmit: A,
-        class: [L()]
-      }, [(n = t.default) == null ? void 0 : n.call(t)]);
+    initProvide({
+      props,
+      change
+    });
+    expose({
+      submit,
+      scrollToField,
+      validate,
+      change,
+      resetValidation
+    });
+    return () => {
+      var _a;
+      return createVNode("form", {
+        "onSubmit": onSubmit,
+        "class": [bem()]
+      }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
     };
   }
 });
-m.install = (e) => {
-  e.component(m.name, m);
+const reset = "";
+const libs = "";
+const font = "";
+const animation = "";
+const theme = "";
+const style = "";
+Form.install = (Vue) => {
+  Vue.component(Form.name, Form);
 };
 export {
-  D as TriggerTypes,
-  G as commonProps,
-  m as default
+  TriggerTypes,
+  commonProps,
+  Form as default
 };