y-design-ssr 0.2.1 → 0.2.2

package/libs/layout/index.mjs

@@ -1,11 +1,40 @@
-import { ref as m, reactive as v, getCurrentInstance as y, provide as _, isVNode as j, inject as A, onUnmounted as L, computed as l, defineComponent as $, createVNode as x } from "vue";
-const p = (e, t) => t ? typeof t == "string" ? ` ${e}--${t}` : Array.isArray(t) ? t.reduce((n, r) => n + p(e, r), "") : Object.keys(t).reduce(
-  (n, r) => n + (t[r] ? p(e, r) : ""),
-  ""
-) : "", P = (e) => (t, n) => {
-  let r = t, i = n;
-  return r && typeof r != "string" && (i = r, r = ""), r = r ? `${e}__${r}` : e, `${r}${p(r, i)}`;
-}, B = () => (e, t) => t ? `${p(`y-${e}`, t)}` : `y-${e}`, M = {
+import { ref, reactive, getCurrentInstance, provide, isVNode, inject, onUnmounted, computed, 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,61 +46,106 @@ const p = (e, t) => t ? typeof t == "string" ? ` ${e}--${t}` : Array.isArray(t)
     validateMessage: "请输入正确内容"
   }
 };
-m("zh-CN");
-v({
-  "zh-CN": M
+ref("zh-CN");
+reactive({
+  "zh-CN": defaultLang
 });
-const b = (e) => {
-  const t = `y-${e}`;
-  return [t, P(t), B()];
+const createNamespace = (name2) => {
+  const prefixedName = `y-${name2}`;
+  return [prefixedName, createBEM(prefixedName), createGlobalBem()];
 };
-var C = /* @__PURE__ */ ((e) => (e.Top = "top", e.Middle = "middle", e.Bottom = "bottom", e))(C || {});
-const S = Symbol("Y-Row");
-var T = /* @__PURE__ */ ((e) => (e.Flex = "flex", e.Default = "", e))(T || {}), N = /* @__PURE__ */ ((e) => (e.Start = "start", e.Center = "center", e.End = "end", e.SpaceBetween = "space-between", e.SpaceAround = "space-around", e))(N || {});
-const I = (e) => {
-  const t = [], n = (r) => {
-    Array.isArray(r) && r.forEach((i) => {
-      var a;
-      j(i) && (t.push(i), (a = i.component) != null && a.subTree && n(i.component.subTree.children), i.children && n(i.children));
+var Vertical = /* @__PURE__ */ ((Vertical2) => {
+  Vertical2["Top"] = "top";
+  Vertical2["Middle"] = "middle";
+  Vertical2["Bottom"] = "bottom";
+  return Vertical2;
+})(Vertical || {});
+const ROW_PROVIDE = Symbol("Y-Row");
+var RowType = /* @__PURE__ */ ((RowType2) => {
+  RowType2["Flex"] = "flex";
+  RowType2["Default"] = "";
+  return RowType2;
+})(RowType || {});
+var RowJustify = /* @__PURE__ */ ((RowJustify2) => {
+  RowJustify2["Start"] = "start";
+  RowJustify2["Center"] = "center";
+  RowJustify2["End"] = "end";
+  RowJustify2["SpaceBetween"] = "space-between";
+  RowJustify2["SpaceAround"] = "space-around";
+  return RowJustify2;
+})(RowJustify || {});
+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 n(e), t;
-}, z = (e, t) => {
-  const n = I(t.subTree.children);
-  e.sort((r, i) => n.indexOf(r.vnode) - n.indexOf(i.vnode));
-}, D = (e) => {
-  const t = y(), n = v([]);
   return {
-    childrens: n,
-    initProvide: (i) => {
-      _(e, {
-        addChild: (o) => {
-          o.proxy && (n.push(o), t && z(n, t));
-        },
-        removeChild: (o) => {
-          const c = n.indexOf(o);
-          n.splice(c, 1);
-        },
-        childrens: n,
-        ...i
-      });
-    }
+    childrens,
+    initProvide
   };
-}, R = (e) => {
-  const t = A(e, null), n = y();
-  if (t && n) {
-    const { childrens: r, addChild: i, removeChild: a } = t;
-    return i(n), L(() => a(n)), {
-      index: l(() => r.indexOf(n)),
-      parent: t
+};
+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: m(-1)
+    index: ref(-1)
   };
-}, [F, G] = b("row"), f = /* @__PURE__ */ $({
-  name: F,
+};
+const [name$1, bem$1] = createNamespace("row");
+const Row = /* @__PURE__ */ defineComponent({
+  name: name$1,
   props: {
     type: {
       type: String,
@@ -84,66 +158,83 @@ const I = (e) => {
     },
     align: {
       type: String,
-      default: C.Top
+      default: Vertical.Top
     },
     justify: {
       type: String,
-      default: N.Start
+      default: RowJustify.Start
     }
   },
-  setup(e, {
-    slots: t
+  setup(props, {
+    slots
   }) {
     const {
-      childrens: n,
-      initProvide: r
-    } = D(S), i = l(() => {
-      const s = [[]];
-      let o = 0;
-      return n.forEach((c, u) => {
-        var d;
-        o += Number((d = c.proxy) == null ? void 0 : d.span), o > 24 ? (s.push([u]), o -= 24) : s[s.length - 1].push(u);
-      }), s;
-    }), a = l(() => {
-      const s = Number(e.gutter), o = [];
-      return s && i.value.forEach((c) => {
-        const u = s * (c.length - 1) / c.length;
-        c.forEach((d, E) => {
-          if (E === 0)
-            o.push({
-              right: u,
+      childrens,
+      initProvide
+    } = setRelation(ROW_PROVIDE);
+    const groupList = computed(() => {
+      const groups = [[]];
+      let totalSpan = 0;
+      childrens.forEach((child, index) => {
+        var _a;
+        totalSpan += Number((_a = child.proxy) == null ? void 0 : _a.span);
+        if (totalSpan > 24) {
+          groups.push([index]);
+          totalSpan -= 24;
+        } else {
+          groups[groups.length - 1].push(index);
+        }
+      });
+      return groups;
+    });
+    const spaceList = computed(() => {
+      const gutter = Number(props.gutter);
+      const spaces = [];
+      if (!gutter)
+        return spaces;
+      groupList.value.forEach((group) => {
+        const averagePadding = gutter * (group.length - 1) / group.length;
+        group.forEach((item, index) => {
+          if (index === 0) {
+            spaces.push({
+              right: averagePadding,
               left: 0
             });
-          else {
-            const h = s - o[d - 1].right, O = u - h;
-            o.push({
-              left: h,
-              right: O
+          } else {
+            const left = gutter - spaces[item - 1].right;
+            const right = averagePadding - left;
+            spaces.push({
+              left,
+              right
             });
           }
         });
-      }), o;
+      });
+      return spaces;
     });
-    return r({
-      spaceList: a
-    }), () => {
-      var u;
+    initProvide({
+      spaceList
+    });
+    return () => {
+      var _a;
       const {
-        type: s,
-        align: o,
-        justify: c
-      } = e;
-      return x("div", {
-        class: G({
-          [s]: s,
-          [`align-${o}`]: s && o,
-          [`justify-${c}`]: s && c
+        type,
+        align,
+        justify
+      } = props;
+      return createVNode("div", {
+        "class": bem$1({
+          [type]: type,
+          [`align-${align}`]: type && align,
+          [`justify-${justify}`]: type && justify
         })
-      }, [(u = t.default) == null ? void 0 : u.call(t)]);
+      }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
     };
   }
-}), [U, V] = b("col"), g = /* @__PURE__ */ $({
-  name: U,
+});
+const [name, bem] = createNamespace("col");
+const Col = /* @__PURE__ */ defineComponent({
+  name,
   props: {
     // 列数
     span: {
@@ -156,57 +247,66 @@ const I = (e) => {
       default: 0
     }
   },
-  setup(e, {
-    slots: t
+  setup(props, {
+    slots
   }) {
     const {
-      parent: n,
-      index: r
-    } = R(S), i = l(() => {
-      if (!n)
+      parent,
+      index
+    } = useRelation(ROW_PROVIDE);
+    const style2 = computed(() => {
+      if (!parent) {
         return {};
+      }
       const {
-        spaceList: a
-      } = n, s = a.value;
-      if (s.length === 0)
+        spaceList
+      } = parent;
+      const spaces = spaceList.value;
+      if (spaces.length === 0)
         return {};
       const {
-        left: o,
-        right: c
-      } = s[r.value];
+        left,
+        right
+      } = spaces[index.value];
       return {
-        paddingLeft: o ? `${o}px` : 0,
-        paddingRight: c ? `${c}px` : 0
+        paddingLeft: left ? `${left}px` : 0,
+        paddingRight: right ? `${right}px` : 0
       };
     });
     return () => {
-      var o;
+      var _a;
       const {
-        span: a,
-        offset: s
-      } = e;
-      return x("div", {
-        style: i.value,
-        class: V({
-          [a]: a,
-          [`offset-${s}`]: s
+        span,
+        offset
+      } = props;
+      return createVNode("div", {
+        "style": style2.value,
+        "class": bem({
+          [span]: span,
+          [`offset-${offset}`]: offset
         })
-      }, [(o = t.default) == null ? void 0 : o.call(t)]);
+      }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
     };
   }
 });
-f.install = (e) => {
-  const { name: t } = f;
-  e.component(t, f);
+const reset = "";
+const libs = "";
+const font = "";
+const animation = "";
+const theme = "";
+const style = "";
+Row.install = (app) => {
+  const { name: name2 } = Row;
+  app.component(name2, Row);
 };
-g.install = (e) => {
-  const { name: t } = g;
-  e.component(t, g);
+Col.install = (app) => {
+  const { name: name2 } = Col;
+  app.component(name2, Col);
 };
 export {
-  g as Col,
-  S as ROW_PROVIDE,
-  f as Row,
-  N as RowJustify,
-  T as RowType
+  Col,
+  ROW_PROVIDE,
+  Row,
+  RowJustify,
+  RowType
 };