y-design-ssr 0.2.0 → 0.2.2

package/libs/cell/index.mjs

@@ -1,11 +1,40 @@
-import { ref as M, reactive as x, defineComponent as N, createVNode as l } from "vue";
-const y = (e, t) => t ? typeof t == "string" ? ` ${e}--${t}` : Array.isArray(t) ? t.reduce((r, n) => r + y(e, n), "") : Object.keys(t).reduce(
-  (r, n) => r + (t[n] ? y(e, n) : ""),
-  ""
-) : "", z = (e) => (t, r) => {
-  let n = t, a = r;
-  return n && typeof n != "string" && (a = n, n = ""), n = n ? `${e}__${n}` : e, `${n}${y(n, a)}`;
-}, _ = () => (e, t) => t ? `${y(`y-${e}`, t)}` : `y-${e}`, j = {
+import { ref, reactive, defineComponent, createVNode } 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,21 +46,44 @@ const y = (e, t) => t ? typeof t == "string" ? ` ${e}--${t}` : Array.isArray(t)
     validateMessage: "请输入正确内容"
   }
 };
-M("zh-CN");
-x({
-  "zh-CN": j
+ref("zh-CN");
+reactive({
+  "zh-CN": defaultLang
 });
-const h = (e) => {
-  const t = `y-${e}`;
-  return [t, z(t), _()];
+const createNamespace = (name2) => {
+  const prefixedName = `y-${name2}`;
+  return [prefixedName, createBEM(prefixedName), createGlobalBem()];
+};
+var Size = /* @__PURE__ */ ((Size2) => {
+  Size2["Mini"] = "mini";
+  Size2["Small"] = "small";
+  Size2["Middle"] = "middle";
+  Size2["Large"] = "large";
+  return Size2;
+})(Size || {});
+var Vertical = /* @__PURE__ */ ((Vertical2) => {
+  Vertical2["Top"] = "top";
+  Vertical2["Middle"] = "middle";
+  Vertical2["Bottom"] = "bottom";
+  return Vertical2;
+})(Vertical || {});
+const parseUnit = (val) => {
+  if (isNaN(Number(val)) && typeof val === "string") {
+    return val;
+  }
+  return `${val}px`;
+};
+const [cname, bem$1] = createNamespace("icon");
+const isImage = (name2) => {
+  const re = new RegExp(/\.(https|png|jpg|gif|jpeg|webp|apng)$/);
+  return re.test(name2.toLowerCase());
 };
-var v = /* @__PURE__ */ ((e) => (e.Mini = "mini", e.Small = "small", e.Middle = "middle", e.Large = "large", e))(v || {}), B = /* @__PURE__ */ ((e) => (e.Top = "top", e.Middle = "middle", e.Bottom = "bottom", e))(B || {});
-const w = (e) => isNaN(Number(e)) && typeof e == "string" ? e : `${e}px`, [I, p] = h("icon"), L = (e) => new RegExp(/\.(https|png|jpg|gif|jpeg|webp|apng)$/).test(e.toLowerCase()), m = /* @__PURE__ */ N({
-  name: I,
+const Icon = /* @__PURE__ */ defineComponent({
+  name: cname,
   props: {
     dot: {
       type: Boolean,
-      default: !1
+      default: false
     },
     name: {
       type: String,
@@ -74,62 +126,71 @@ const w = (e) => isNaN(Number(e)) && typeof e == "string" ? e : `${e}px`, [I, p]
     }
   },
   emits: ["click"],
-  setup(e, {
-    slots: t,
-    emit: r
+  setup(props, {
+    slots,
+    emit
   }) {
-    const n = L(e.name), a = () => ({
-      fontSize: w(e.size),
-      color: e.color
-    }), o = (i) => {
-      r("click", i);
+    const isImg = isImage(props.name);
+    const getStyle = () => ({
+      fontSize: parseUnit(props.size),
+      color: props.color
+    });
+    const onClick = (event) => {
+      emit("click", event);
     };
     return () => {
       const {
-        name: i,
-        classPrefix: u,
-        badge: s,
-        dot: d,
-        subColor: b,
-        subBg: f,
-        tag: $
-      } = e;
-      return l($, {
-        class: `${u}${n ? "" : ` y-icon--${i}`}`,
-        style: a(),
-        onClick: o
+        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 g;
-          return [n ? l("em", {
-            class: p("node")
-          }, [l("img", {
-            class: p("image"),
-            src: i,
-            alt: "icon"
-          }, null)]) : null, d ? l("em", {
-            class: p("dot"),
-            style: {
-              backgroundColor: f
+          var _a;
+          return [isImg ? createVNode("em", {
+            "class": bem$1("node")
+          }, [createVNode("img", {
+            "class": bem$1("image"),
+            "src": name2,
+            "alt": "icon"
+          }, null)]) : null, dot ? createVNode("em", {
+            "class": bem$1("dot"),
+            "style": {
+              backgroundColor: subBg
             }
-          }, null) : null, s ? l("em", {
-            class: p("badge"),
-            style: {
-              color: b,
-              backgroundColor: f
+          }, null) : null, badge ? createVNode("em", {
+            "class": bem$1("badge"),
+            "style": {
+              color: subColor,
+              backgroundColor: subBg
             }
-          }, [s]) : null, ((g = t.default) == null ? void 0 : g.call(t)) || null];
+          }, [badge]) : null, ((_a = slots.default) == null ? void 0 : _a.call(slots)) || null];
         }
       });
     };
   }
 });
-m.install = (e) => {
-  const { name: t } = m;
-  e.component(t, m);
+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 [T, c, A] = h("cell"), S = /* @__PURE__ */ N({
-  name: T,
+const [name, bem, gbem] = createNamespace("cell");
+const Cell = /* @__PURE__ */ defineComponent({
+  name,
   props: {
     tag: {
       type: String,
@@ -149,17 +210,17 @@ const [T, c, A] = h("cell"), S = /* @__PURE__ */ N({
     },
     size: {
       type: String,
-      default: v.Middle
+      default: Size.Middle
     },
     // 垂直对齐方式
     vertical: {
       type: String,
-      default: B.Middle
+      default: Vertical.Middle
     },
     // 是否有 border
     border: {
       type: Boolean,
-      default: !0
+      default: true
     },
     icon: {
       type: String,
@@ -168,64 +229,66 @@ const [T, c, A] = h("cell"), S = /* @__PURE__ */ N({
     // 点击态
     clickable: {
       type: Boolean,
-      default: !1
+      default: false
     }
   },
   emits: ["click"],
-  setup(e, {
-    slots: t,
-    emit: r
+  setup(props, {
+    slots,
+    emit
   }) {
-    const n = (a) => {
-      r("click", a);
+    const onClick = (event) => {
+      emit("click", event);
     };
     return () => {
       const {
-        tag: a,
-        vertical: o,
-        border: i,
-        size: u,
-        title: s,
-        icon: d,
-        label: b,
-        value: f,
-        clickable: $
-      } = e, g = a === "a" ? !0 : $;
-      return l(a, {
-        class: [c({
-          [`is-${o}`]: o,
-          [u]: u,
-          hairline: i
-        }), A("el", {
-          clickable: g
+        tag: Tag,
+        vertical,
+        border,
+        size,
+        title,
+        icon,
+        label,
+        value,
+        clickable
+      } = props;
+      const isClcickable = Tag === "a" ? true : clickable;
+      return createVNode(Tag, {
+        "class": [bem({
+          [`is-${vertical}`]: vertical,
+          [size]: size,
+          hairline: border
+        }), gbem("el", {
+          clickable: isClcickable
         })],
-        onClick: n
+        "onClick": onClick
       }, {
         default: () => {
-          var k, C;
-          return [(k = t.left) == null ? void 0 : k.call(t), l("div", {
-            class: c("center", {
-              "has-left": t.left
+          var _a, _b;
+          return [(_a = slots.left) == null ? void 0 : _a.call(slots), createVNode("div", {
+            "class": bem("center", {
+              "has-left": slots.left
             })
-          }, [t.center ? t.center() : [l("h4", {
-            class: c("title")
-          }, [s]), l("p", {
-            class: c("label")
-          }, [b])]]), t.default ? t.default() : l("div", {
-            class: c("value")
-          }, [f]), ((C = t.right) == null ? void 0 : C.call(t)) || d && l(m, {
-            name: d,
-            class: c("icon")
+          }, [slots.center ? slots.center() : [createVNode("h4", {
+            "class": bem("title")
+          }, [title]), createVNode("p", {
+            "class": bem("label")
+          }, [label])]]), slots.default ? slots.default() : createVNode("div", {
+            "class": bem("value")
+          }, [value]), ((_b = slots.right) == null ? void 0 : _b.call(slots)) || icon && createVNode(Icon, {
+            "name": icon,
+            "class": bem("icon")
           }, null)];
         }
       });
     };
   }
 });
-S.install = (e) => {
-  const { name: t } = S;
-  e.component(t, S);
+const style = "";
+Cell.install = (app) => {
+  const { name: name2 } = Cell;
+  app.component(name2, Cell);
 };
 export {
-  S as default
+  Cell as default
 };