y-design-ssr 0.2.0 → 0.2.2

package/libs/formItem/index.mjs

@@ -1,11 +1,48 @@
-import { ref as y, reactive as w, inject as z, getCurrentInstance as R, onUnmounted as j, computed as p, provide as W, defineComponent as D, createVNode as h } from "vue";
-const O = (t) => (e) => Object.prototype.toString.call(e) === `[object ${t}]`, L = O("Function"), G = O("String"), U = O("Object"), x = (t, e) => e ? typeof e == "string" ? ` ${t}--${e}` : Array.isArray(e) ? e.reduce((i, r) => i + x(t, r), "") : Object.keys(e).reduce(
-  (i, r) => i + (e[r] ? x(t, r) : ""),
-  ""
-) : "", k = (t) => (e, i) => {
-  let r = e, d = i;
-  return r && typeof r != "string" && (d = r, r = ""), r = r ? `${t}__${r}` : t, `${r}${x(r, d)}`;
-}, H = () => (t, e) => e ? `${x(`y-${t}`, e)}` : `y-${t}`, J = {
+import { ref, reactive, inject, getCurrentInstance, onUnmounted, computed, provide, defineComponent, createVNode } from "vue";
+const tagTester = (name2) => {
+  return (obj) => {
+    return Object.prototype.toString.call(obj) === `[object ${name2}]`;
+  };
+};
+const isFunction = tagTester("Function");
+const isString = tagTester("String");
+const isObject = tagTester("Object");
+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: "释放刷新...",
@@ -16,56 +53,77 @@ const O = (t) => (e) => Object.prototype.toString.call(e) === `[object ${t}]`, L
   "form-item": {
     validateMessage: "请输入正确内容"
   }
-}, I = y("zh-CN"), F = w({
-  "zh-CN": J
-}), K = {
+};
+const lang = ref("zh-CN");
+const langs = reactive({
+  "zh-CN": defaultLang
+});
+const locale$1 = {
   text() {
-    return F[I.value];
+    return langs[lang.value];
   },
-  use(t, e) {
-    I.value = t, this.add({ [t]: e });
+  use(newLang, newConfigs) {
+    lang.value = newLang;
+    this.add({ [newLang]: newConfigs });
   },
-  add(t = {}) {
-    Object.assign(F, t);
+  add(newConfigs = {}) {
+    Object.assign(langs, newConfigs);
   }
-}, _ = (t) => {
-  const e = `y-${t}`;
-  return [e, k(e), H()];
-}, Q = (t) => K.text()[t], X = (t) => {
-  const e = z(t, null), i = R();
-  if (e && i) {
-    const { childrens: r, addChild: d, removeChild: o } = e;
-    return d(i), j(() => o(i)), {
-      index: p(() => r.indexOf(i)),
-      parent: e
+};
+const createNamespace = (name2) => {
+  const prefixedName = `y-${name2}`;
+  return [prefixedName, createBEM(prefixedName), createGlobalBem()];
+};
+const createLocale = (name2) => {
+  return locale$1.text()[name2];
+};
+const useRelation = (key) => {
+  const parent = inject(key, null);
+  const currentInstance = getCurrentInstance();
+  if (parent && currentInstance) {
+    const { childrens, addChild, removeChild } = parent;
+    addChild(currentInstance);
+    onUnmounted(() => removeChild(currentInstance));
+    const index = computed(() => childrens.indexOf(currentInstance));
+    return {
+      index,
+      parent
     };
   }
   return {
     parent: null,
-    index: y(-1)
+    index: ref(-1)
+  };
+};
+const FORM_ITEM_PROVIDE = "y-form-item";
+const setFormItem = () => {
+  const instance = getCurrentInstance();
+  const filed = ref();
+  const initProvide = (value) => {
+    const setField = (obj) => {
+      if (obj == null ? void 0 : obj.proxy) {
+        filed.value = obj;
+      }
+    };
+    provide(FORM_ITEM_PROVIDE, {
+      setField,
+      instance,
+      ...value
+    });
   };
-}, Y = "y-form-item", Z = () => {
-  const t = R(), e = y();
   return {
-    filed: e,
-    initProvide: (r) => {
-      W(Y, {
-        setField: (o) => {
-          o != null && o.proxy && (e.value = o);
-        },
-        instance: t,
-        ...r
-      });
-    }
+    filed,
+    initProvide
   };
-}, ee = {
+};
+const commonProps = {
   size: {
     type: String,
     default: null
   },
   border: {
     type: Boolean,
-    default: !0
+    default: true
   },
   labelWidth: {
     type: [Number, String],
@@ -74,7 +132,7 @@ const O = (t) => (e) => Object.prototype.toString.call(e) === `[object ${t}]`, L
   colon: {
     // 是否有 "："
     type: Boolean,
-    default: !1
+    default: false
   },
   labelAlign: {
     type: String,
@@ -82,11 +140,11 @@ const O = (t) => (e) => Object.prototype.toString.call(e) === `[object ${t}]`, L
   },
   showError: {
     type: Boolean,
-    default: !0
+    default: true
   },
   showErrorMessage: {
     type: Boolean,
-    default: !0
+    default: true
   },
   errorMessageAlign: {
     type: String,
@@ -96,10 +154,16 @@ const O = (t) => (e) => Object.prototype.toString.call(e) === `[object ${t}]`, L
     type: [Object, Array],
     default: null
   }
-}, [te, oe] = _("form"), re = te, C = "form-item", [ne, b, le] = _(C), ae = Q(C), $ = /* @__PURE__ */ D({
-  name: ne,
+};
+const [name$1, bem$1] = createNamespace("form");
+const FORM_PROVIDE = name$1;
+const COMPONENT_NAME = "form-item";
+const [name, bem, gbem] = createNamespace(COMPONENT_NAME);
+const locale = createLocale(COMPONENT_NAME);
+const FormItem = /* @__PURE__ */ defineComponent({
+  name,
   props: {
-    ...ee,
+    ...commonProps,
     label: {
       type: [Number, String],
       default: ""
@@ -114,103 +178,189 @@ const O = (t) => (e) => Object.prototype.toString.call(e) === `[object ${t}]`, L
       default: ""
     }
   },
-  setup(t, {
-    slots: e,
-    expose: i
+  setup(props, {
+    slots,
+    expose
   }) {
     const {
-      parent: r
-    } = X(re), {
-      initProvide: d,
-      filed: o
-    } = Z(), c = y(!1), v = y(ae.validateMessage), f = (n) => {
-      if (t[n] && t[n] !== null)
-        return t[n];
-      const l = r && r.props;
-      return l && l[n] || null;
-    }, g = p(() => {
-      const n = r && r.props.rules, l = t.rules || (n == null ? void 0 : n[t.prop]);
-      return U(l) ? [l] : l;
-    }), N = p(() => g.value && g.value.some((n) => n.required)), M = p(() => o.value ? o.value.proxy.modelValue : null), A = p(() => f("showError") && c.value), q = (n, l) => !(l.required && (o.value && o.value.exposed && typeof o.value.exposed.isRequired < "u" && !o.value.exposed.isRequired || !(Array.isArray(n) ? n.length : n)) || l.pattern && G(n) && !l.pattern.test(n)), P = (n, l) => {
+      parent
+    } = useRelation(FORM_PROVIDE);
+    const {
+      initProvide: initFormItemProvide,
+      filed
+    } = setFormItem();
+    const validateFailed = ref(false);
+    const validateMessage = ref(locale.validateMessage);
+    const getProp = (propName) => {
+      if (props[propName] && props[propName] !== null)
+        return props[propName];
+      const parentProps = parent && parent.props;
+      return parentProps && parentProps[propName] || null;
+    };
+    const rules = computed(() => {
+      const parentRules = parent && parent.props.rules;
+      const curRules = props.rules || (parentRules == null ? void 0 : parentRules[props.prop]);
+      return isObject(curRules) ? [curRules] : curRules;
+    });
+    const required = computed(() => rules.value && rules.value.some((item) => item.required));
+    const formValue = computed(() => {
+      if (filed.value) {
+        const filedInstance = filed.value.proxy;
+        return filedInstance.modelValue;
+      }
+      return null;
+    });
+    const errorStatus = computed(() => {
+      return getProp("showError") && validateFailed.value;
+    });
+    const runSyncRule = (value, rule) => {
+      if (rule.required) {
+        if (filed.value && filed.value.exposed && typeof filed.value.exposed.isRequired !== "undefined" && !filed.value.exposed.isRequired) {
+          return false;
+        }
+        if (!(Array.isArray(value) ? value.length : value)) {
+          return false;
+        }
+      }
+      if (rule.pattern && isString(value) && !rule.pattern.test(value)) {
+        return false;
+      }
+      return true;
+    };
+    const getRuleMessage = (value, rule) => {
       const {
-        message: a
-      } = l;
-      return L(a) ? a(n, l) : a;
-    }, B = (n) => n.reduce((l, a) => l.then(() => {
-      if (c.value)
+        message
+      } = rule;
+      if (isFunction(message)) {
+        return message(value, rule);
+      }
+      return message;
+    };
+    const runRules = (ruleList) => {
+      return ruleList.reduce((promise, rule) => promise.then(() => {
+        if (validateFailed.value)
+          return null;
+        const value = rule.formatter ? rule.formatter(formValue.value, rule) : formValue.value;
+        if (!runSyncRule(value, rule)) {
+          validateFailed.value = true;
+          validateMessage.value = getRuleMessage(value, rule);
+          return null;
+        }
+        if (rule.validator) {
+          const cb = rule.validator(value, rule);
+          if (typeof cb === "boolean") {
+            if (!cb) {
+              validateFailed.value = true;
+              validateMessage.value = getRuleMessage(value, rule);
+            }
+            return Promise.resolve(cb);
+          }
+          return cb.then((result) => {
+            if (!result) {
+              validateFailed.value = true;
+              validateMessage.value = getRuleMessage(value, rule);
+            }
+            return result;
+          });
+        }
         return null;
-      const u = a.formatter ? a.formatter(M.value, a) : M.value;
-      if (!q(u, a))
-        return c.value = !0, v.value = P(u, a), null;
-      if (a.validator) {
-        const s = a.validator(u, a);
-        return typeof s == "boolean" ? (s || (c.value = !0, v.value = P(u, a)), Promise.resolve(s)) : s.then((m) => (m || (c.value = !0, v.value = P(u, a)), m));
+      }), Promise.resolve());
+    };
+    const validate = async (ruleList) => {
+      const ruleArr = ruleList || rules.value;
+      if (!ruleArr) {
+        return Promise.resolve();
+      }
+      await runRules(ruleArr);
+      if (validateFailed.value) {
+        return {
+          name: props.prop,
+          message: validateMessage.value
+        };
       }
       return null;
-    }), Promise.resolve()), S = async (n) => {
-      const l = n || g.value;
-      return l ? (await B(l), c.value ? {
-        name: t.prop,
-        message: v.value
-      } : null) : Promise.resolve();
-    }, T = (n) => {
-      var l;
-      if (r && g.value) {
-        const a = ((l = r.props) == null ? void 0 : l.validateTrigger) === n, u = g.value.filter((s) => s.trigger ? s.trigger === n : a);
-        return S(u);
+    };
+    const validateWithTrigger = (trigger) => {
+      var _a;
+      if (parent && rules.value) {
+        const defaultTrigger = ((_a = parent.props) == null ? void 0 : _a.validateTrigger) === trigger;
+        const ruleList = rules.value.filter((rule) => {
+          if (rule.trigger) {
+            return rule.trigger === trigger;
+          }
+          return defaultTrigger;
+        });
+        return validate(ruleList);
       }
       return Promise.resolve(null);
-    }, E = () => {
-      c.value && (c.value = !1, v.value = "");
     };
-    d({
-      getProp: f,
-      validateWithTrigger: T,
-      resetValidation: E,
-      change: r == null ? void 0 : r.change
-    }), i({
-      resetValidation: E,
-      formValue: M,
-      validate: S
-    });
-    const V = () => A.value ? e.error ? e.error() : f("showErrorMessage") ? h("p", {
-      class: b("error"),
-      style: {
-        textAlign: "left"
+    const resetValidation = () => {
+      if (validateFailed.value) {
+        validateFailed.value = false;
+        validateMessage.value = "";
       }
-    }, [v.value]) : null : null;
+    };
+    initFormItemProvide({
+      getProp,
+      validateWithTrigger,
+      resetValidation,
+      change: parent == null ? void 0 : parent.change
+    });
+    expose({
+      resetValidation,
+      formValue,
+      validate
+    });
+    const _renderError = () => {
+      if (!errorStatus.value)
+        return null;
+      if (slots.error)
+        return slots.error();
+      return getProp("showErrorMessage") ? createVNode("p", {
+        "class": bem("error"),
+        "style": {
+          textAlign: "left"
+        }
+      }, [validateMessage.value]) : null;
+    };
     return () => {
-      var u, s, m;
+      var _a, _b, _c;
       const {
-        label: n,
-        border: l,
-        colon: a
-      } = t;
-      return h("div", {
-        class: [b({
-          "is-error": A.value,
-          [f("size")]: f("size"),
-          hairline: l
-        }), le("el", {
-          "hairline-bottom": l
+        label,
+        border,
+        colon
+      } = props;
+      return createVNode("div", {
+        "class": [bem({
+          "is-error": errorStatus.value,
+          [getProp("size")]: getProp("size"),
+          hairline: border
+        }), gbem("el", {
+          "hairline-bottom": border
         })]
-      }, [h("label", {
-        class: b("label", {
-          "is-required": N.value
+      }, [createVNode("label", {
+        "class": bem("label", {
+          "is-required": required.value
         }),
-        style: {
-          width: f("labelWidth"),
-          textAlign: f("labelAlign") || "left"
+        "style": {
+          width: getProp("labelWidth"),
+          textAlign: getProp("labelAlign") || "left"
         }
-      }, [(u = e.labelIcon) == null ? void 0 : u.call(e), n, a ? " :" : ""]), h("div", {
-        class: b("content")
-      }, [(s = e.default) == null ? void 0 : s.call(e), V()]), (m = e.extra) == null ? void 0 : m.call(e)]);
+      }, [(_a = slots.labelIcon) == null ? void 0 : _a.call(slots), label, colon ? " :" : ""]), createVNode("div", {
+        "class": bem("content")
+      }, [(_b = slots.default) == null ? void 0 : _b.call(slots), _renderError()]), (_c = slots.extra) == null ? void 0 : _c.call(slots)]);
     };
   }
 });
-$.install = (t) => {
-  t.component($.name, $);
+const reset = "";
+const libs = "";
+const font = "";
+const animation = "";
+const theme = "";
+const style = "";
+FormItem.install = (Vue) => {
+  Vue.component(FormItem.name, FormItem);
 };
 export {
-  $ as default
+  FormItem as default
 };