y-design-ssr 0.2.1 → 0.2.2

package/libs/checkbox/index.mjs

@@ -1,11 +1,40 @@
-import { ref as z, reactive as E, inject as I, getCurrentInstance as N, watch as j, onUnmounted as B, defineComponent as V, createVNode as i, computed as f, onBeforeUnmount as w } from "vue";
-const C = (e, n) => n ? typeof n == "string" ? ` ${e}--${n}` : Array.isArray(n) ? n.reduce((a, l) => a + C(e, l), "") : Object.keys(n).reduce(
-  (a, l) => a + (n[l] ? C(e, l) : ""),
-  ""
-) : "", M = (e) => (n, a) => {
-  let l = n, t = a;
-  return l && typeof l != "string" && (t = l, l = ""), l = l ? `${e}__${l}` : e, `${l}${C(l, t)}`;
-}, q = () => (e, n) => n ? `${C(`y-${e}`, n)}` : `y-${e}`, F = {
+import { ref, reactive, inject, getCurrentInstance, watch, onUnmounted, defineComponent, createVNode, computed, onBeforeUnmount } from "vue";
+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: "释放刷新...",
@@ -17,35 +46,58 @@ const C = (e, n) => n ? typeof n == "string" ? ` ${e}--${n}` : Array.isArray(n)
     validateMessage: "请输入正确内容"
   }
 };
-z("zh-CN");
-E({
-  "zh-CN": F
+ref("zh-CN");
+reactive({
+  "zh-CN": defaultLang
 });
-const $ = (e) => {
-  const n = `y-${e}`;
-  return [n, M(n), q()];
-}, O = (e) => isNaN(Number(e)) && typeof e == "string" ? e : `${e}px`, P = "y-form-item", R = () => {
-  const e = I(P, null), n = N();
-  if (e && (n != null && n.proxy)) {
-    const { setField: a } = e, { resetValidation: l, change: t, validateWithTrigger: u } = e;
-    return j(
-      () => n.proxy.modelValue,
+const createNamespace = (name2) => {
+  const prefixedName = `y-${name2}`;
+  return [prefixedName, createBEM(prefixedName), createGlobalBem()];
+};
+const parseUnit = (val) => {
+  if (isNaN(Number(val)) && typeof val === "string") {
+    return val;
+  }
+  return `${val}px`;
+};
+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 && (l(), t(), u("onChange"));
+        if (parent.instance && parent.instance.exposed) {
+          resetValidation();
+          change();
+          validateWithTrigger("onChange");
+        }
       }
-    ), a(n), B(() => a(null)), {
-      parent: e
+    );
+    setField(instance);
+    onUnmounted(() => setField(null));
+    return {
+      parent
     };
   }
   return {
     parent: null
   };
-}, [T, b] = $("icon"), U = (e) => new RegExp(/\.(https|png|jpg|gif|jpeg|webp|apng)$/).test(e.toLowerCase()), p = /* @__PURE__ */ V({
-  name: T,
+};
+const [cname, bem$2] = createNamespace("icon");
+const isImage = (name2) => {
+  const re = new RegExp(/\.(https|png|jpg|gif|jpeg|webp|apng)$/);
+  return re.test(name2.toLowerCase());
+};
+const Icon = /* @__PURE__ */ defineComponent({
+  name: cname,
   props: {
     dot: {
       type: Boolean,
-      default: !1
+      default: false
     },
     name: {
       type: String,
@@ -88,79 +140,95 @@ const $ = (e) => {
     }
   },
   emits: ["click"],
-  setup(e, {
-    slots: n,
-    emit: a
+  setup(props, {
+    slots,
+    emit
   }) {
-    const l = U(e.name), t = () => ({
-      fontSize: O(e.size),
-      color: e.color
-    }), u = (o) => {
-      a("click", o);
+    const isImg = isImage(props.name);
+    const getStyle = () => ({
+      fontSize: parseUnit(props.size),
+      color: props.color
+    });
+    const onClick = (event) => {
+      emit("click", event);
     };
     return () => {
       const {
-        name: o,
-        classPrefix: m,
-        badge: g,
-        dot: y,
-        subColor: v,
-        subBg: c,
-        tag: h
-      } = e;
-      return i(h, {
-        class: `${m}${l ? "" : ` y-icon--${o}`}`,
-        style: t(),
-        onClick: u
+        name: name2,
+        classPrefix,
+        badge,
+        dot,
+        subColor,
+        subBg,
+        tag: Tag
+      } = props;
+      return createVNode(Tag, {
+        "class": `${classPrefix}${isImg ? "" : ` y-icon--${name2}`}`,
+        "style": getStyle(),
+        "onClick": onClick
       }, {
         default: () => {
-          var d;
-          return [l ? i("em", {
-            class: b("node")
-          }, [i("img", {
-            class: b("image"),
-            src: o,
-            alt: "icon"
-          }, null)]) : null, y ? i("em", {
-            class: b("dot"),
-            style: {
-              backgroundColor: c
+          var _a;
+          return [isImg ? createVNode("em", {
+            "class": bem$2("node")
+          }, [createVNode("img", {
+            "class": bem$2("image"),
+            "src": name2,
+            "alt": "icon"
+          }, null)]) : null, dot ? createVNode("em", {
+            "class": bem$2("dot"),
+            "style": {
+              backgroundColor: subBg
             }
-          }, null) : null, g ? i("em", {
-            class: b("badge"),
-            style: {
-              color: v,
-              backgroundColor: c
+          }, null) : null, badge ? createVNode("em", {
+            "class": bem$2("badge"),
+            "style": {
+              color: subColor,
+              backgroundColor: subBg
             }
-          }, [g]) : null, ((d = n.default) == null ? void 0 : d.call(n)) || null];
+          }, [badge]) : null, ((_a = slots.default) == null ? void 0 : _a.call(slots)) || null];
         }
       });
     };
   }
 });
-p.install = (e) => {
-  const { name: n } = p;
-  e.component(n, p);
+const reset = "";
+const libs = "";
+const font = "";
+const animation = "";
+const theme = "";
+const style$1 = "";
+Icon.install = (app) => {
+  const { name: name2 } = Icon;
+  app.component(name2, Icon);
 };
-const A = (e) => {
-  const n = I(e, null), a = N();
-  if (n && a) {
-    const { childrens: l, addChild: t, removeChild: u } = n;
-    return t(a), B(() => u(a)), {
-      index: f(() => l.indexOf(a)),
-      parent: n
+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: z(-1)
+    index: ref(-1)
   };
-}, [K, H] = $("checkbox-group"), L = K, [D, k] = $("checkbox"), x = /* @__PURE__ */ V({
-  name: D,
+};
+const [name$1, bem$1] = createNamespace("checkbox-group");
+const CHECKBOX_KEY = name$1;
+const [name, bem] = createNamespace("checkbox");
+const Checkbox = /* @__PURE__ */ defineComponent({
+  name,
   props: {
     modelValue: {
       type: Boolean,
-      default: !1
+      default: false
     },
     name: {
       type: String,
@@ -168,7 +236,7 @@ const A = (e) => {
     },
     disabled: {
       type: Boolean,
-      default: !1
+      default: false
     },
     size: {
       type: [String, Number],
@@ -176,73 +244,120 @@ const A = (e) => {
     },
     square: {
       type: Boolean,
-      default: !0
+      default: true
     },
     checkedColor: {
       type: String,
       default: ""
     }
   },
-  setup(e, {
-    slots: n,
-    emit: a,
-    expose: l
+  setup(props, {
+    slots,
+    emit,
+    expose
   }) {
     const {
-      parent: t
-    } = A(L), u = t === null ? R().parent : null;
-    t && t.allItemNames.push(e.name);
-    const o = (r, s = null) => f(() => t && t.props[r] !== null ? t.props[r] : Object.keys(e).includes(r) ? e[r] : s), m = o("disabled"), g = o("square"), y = o("checkedColor"), v = o("horizontal", !1), c = f(() => t ? t.props.modelValue.includes(e.name) : e.modelValue), h = (r) => {
-      var s;
-      m.value || typeof r < "u" && c.value === r || ((s = t == null ? void 0 : t.onItemChange) == null || s.call(t, e.name), a("update:modelValue", !e.modelValue), a("change", !e.modelValue));
+      parent
+    } = useRelation(CHECKBOX_KEY);
+    const formParent = parent === null ? useFormItem().parent : null;
+    if (parent) {
+      parent.allItemNames.push(props.name);
+    }
+    const getComputedFromParent = (propsName, defaultValue = null) => {
+      return computed(() => {
+        if (parent && parent.props[propsName] !== null) {
+          return parent.props[propsName];
+        }
+        if (Object.keys(props).includes(propsName)) {
+          return props[propsName];
+        }
+        return defaultValue;
+      });
     };
-    l({
-      toggle: h
+    const disabled = getComputedFromParent("disabled");
+    const square = getComputedFromParent("square");
+    const checkedColor = getComputedFromParent("checkedColor");
+    const horizontal = getComputedFromParent("horizontal", false);
+    const checked = computed(() => {
+      if (parent) {
+        return parent.props.modelValue.includes(props.name);
+      }
+      return props.modelValue;
     });
-    const d = f(() => ["mini", "small", "middle", "large"].includes(e.size.toString() || (u == null ? void 0 : u.getProp("size"))) ? null : O(e.size)), _ = f(() => {
-      const r = {};
-      return d.value && (r.width = d.value, r.height = d.value), c.value && y.value && (r.backgroundColor = y.value), r;
+    const toggle = (toChecked) => {
+      var _a;
+      if (disabled.value)
+        return;
+      if (typeof toChecked !== "undefined" && checked.value === toChecked)
+        return;
+      (_a = parent == null ? void 0 : parent.onItemChange) == null ? void 0 : _a.call(parent, props.name);
+      emit("update:modelValue", !props.modelValue);
+      emit("change", !props.modelValue);
+    };
+    expose({
+      toggle
     });
-    return w(() => {
-      if (!t)
+    const iconSize = computed(() => {
+      if (["mini", "small", "middle", "large"].includes(props.size.toString() || (formParent == null ? void 0 : formParent.getProp("size")))) {
+        return null;
+      }
+      return parseUnit(props.size);
+    });
+    const iconStyle = computed(() => {
+      const style2 = {};
+      if (iconSize.value) {
+        style2.width = iconSize.value;
+        style2.height = iconSize.value;
+      }
+      if (checked.value && checkedColor.value) {
+        style2.backgroundColor = checkedColor.value;
+      }
+      return style2;
+    });
+    onBeforeUnmount(() => {
+      if (!parent)
         return;
-      const r = t.allItemNames.indexOf(e.name);
-      r >= 0 && t.allItemNames.splice(r, 1);
-    }), () => {
-      var s, S;
+      const index = parent.allItemNames.indexOf(props.name);
+      if (index >= 0) {
+        parent.allItemNames.splice(index, 1);
+      }
+    });
+    return () => {
+      var _a, _b;
       const {
-        size: r
-      } = e;
-      return i("div", {
-        class: k({
-          disabled: m.value,
-          checked: c.value,
-          horizontal: v.value,
-          [r]: ["mini", "small", "middle", "large"].includes(r.toString())
+        size
+      } = props;
+      return createVNode("div", {
+        "class": bem({
+          disabled: disabled.value,
+          checked: checked.value,
+          horizontal: horizontal.value,
+          [size]: ["mini", "small", "middle", "large"].includes(size.toString())
         }),
-        onClick: () => h(),
-        role: "checkbox",
-        "aria-checked": c.value
-      }, [((s = n.icon) == null ? void 0 : s.call(n, {
-        checked: c.value
-      })) || i("div", {
-        class: k("icon", {
-          checked: c.value,
-          square: g.value
+        "onClick": () => toggle(),
+        "role": "checkbox",
+        "aria-checked": checked.value
+      }, [((_a = slots.icon) == null ? void 0 : _a.call(slots, {
+        checked: checked.value
+      })) || createVNode("div", {
+        "class": bem("icon", {
+          checked: checked.value,
+          square: square.value
         }),
-        style: _.value
-      }, [c.value ? i(p, {
-        name: "done"
-      }, null) : null]), i("div", {
-        class: k("label")
-      }, [(S = n.default) == null ? void 0 : S.call(n)])]);
+        "style": iconStyle.value
+      }, [checked.value ? createVNode(Icon, {
+        "name": "done"
+      }, null) : null]), createVNode("div", {
+        "class": bem("label")
+      }, [(_b = slots.default) == null ? void 0 : _b.call(slots)])]);
     };
   }
 });
-x.install = (e) => {
-  const { name: n } = x;
-  e.component(n, x);
+const style = "";
+Checkbox.install = (Vue) => {
+  const { name: name2 } = Checkbox;
+  Vue.component(name2, Checkbox);
 };
 export {
-  x as default
+  Checkbox as default
 };