y-design-ssr/libs/layout/index.mjs

SSR component library of YUI with Vue3

import { ref as m, reactive as y, getCurrentInstance as v, provide as _, isVNode as j, inject as A, onUnmounted as L, computed as l, defineComponent as $, createVNode as b } 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)}`;
}, T = () => (e, t) => t ? `${p(`y-${e}`, t)}` : `y-${e}`, B = {
  "pull-refresh": {
    pulling: "下拉刷新...",
    loosing: "释放刷新...",
    loading: "数据加载中...",
    success: "数据已更新",
    failed: "数据跟新失败，请稍后再试"
  },
  "form-item": {
    validateMessage: "请输入正确内容"
  }
};
m("zh-CN");
y({
  "zh-CN": B
});
const C = (e) => {
  const t = `y-${e}`;
  return [t, P(t), T()];
};
var x = /* @__PURE__ */ ((e) => (e.Top = "top", e.Middle = "middle", e.Bottom = "bottom", e))(x || {}), S = /* @__PURE__ */ ((e) => (e.Start = "start", e.Center = "center", e.End = "end", e.SpaceBetween = "space-between", e.SpaceAround = "space-around", e))(S || {});
const N = Symbol("Y-Row"), M = (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));
    });
  };
  return n(e), t;
}, I = (e, t) => {
  const n = M(t.subTree.children);
  e.sort((r, i) => n.indexOf(r.vnode) - n.indexOf(i.vnode));
}, R = (e) => {
  const t = v(), n = y([]);
  return {
    children: n,
    initProvide: (i) => {
      _(e, {
        addChild: (o) => {
          o.proxy && (n.push(o), t && I(n, t));
        },
        removeChild: (o) => {
          const c = n.indexOf(o);
          n.splice(c, 1);
        },
        children: n,
        ...i
      });
    }
  };
}, z = (e) => {
  const t = A(e, null), n = v();
  if (t && n) {
    const { children: r, addChild: i, removeChild: a } = t;
    return i(n), L(() => a(n)), {
      index: l(() => r.indexOf(n)),
      parent: t
    };
  }
  return {
    parent: null,
    index: m(-1)
  };
}, [w, D] = C("row"), f = /* @__PURE__ */ $({
  name: w,
  props: {
    type: {
      type: String,
      default: ""
    },
    // 列元素之间的间距（单位为 px）
    gutter: {
      type: [Number, String],
      default: 0
    },
    align: {
      type: String,
      default: x.Top
    },
    justify: {
      type: String,
      default: S.Start
    }
  },
  setup(e, {
    slots: t
  }) {
    const {
      children: n,
      initProvide: r
    } = R(N), 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,
              left: 0
            });
          else {
            const h = s - o[d - 1].right, O = u - h;
            o.push({
              left: h,
              right: O
            });
          }
        });
      }), o;
    });
    return r({
      spaceList: a
    }), () => {
      var u;
      const {
        type: s,
        align: o,
        justify: c
      } = e;
      return b("div", {
        class: D({
          [s]: s,
          [`align-${o}`]: s && o,
          [`justify-${c}`]: s && c
        })
      }, [(u = t.default) == null ? void 0 : u.call(t)]);
    };
  }
}), [G, U] = C("col"), g = /* @__PURE__ */ $({
  name: G,
  props: {
    // 列数
    span: {
      type: [String, Number],
      default: 0
    },
    // 栅格左侧的间隔格数
    offset: {
      type: [String, Number],
      default: 0
    }
  },
  setup(e, {
    slots: t
  }) {
    const {
      parent: n,
      index: r
    } = z(N), i = l(() => {
      if (!n)
        return {};
      const {
        spaceList: a
      } = n, s = a.value;
      if (s.length === 0)
        return {};
      const {
        left: o,
        right: c
      } = s[r.value];
      return {
        paddingLeft: o ? `${o}px` : 0,
        paddingRight: c ? `${c}px` : 0
      };
    });
    return () => {
      var o;
      const {
        span: a,
        offset: s
      } = e;
      return b("div", {
        style: i.value,
        class: U({
          [a]: a,
          [`offset-${s}`]: s
        })
      }, [(o = t.default) == null ? void 0 : o.call(t)]);
    };
  }
});
f.install = (e) => {
  const { name: t } = f;
  e.component(t, f);
};
g.install = (e) => {
  const { name: t } = g;
  e.component(t, g);
};
export {
  g as Col,
  N as ROW_PROVIDE,
  f as Row
};