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

SSR component library of YUI with Vue3

import { ref as B, reactive as M, defineComponent as C, createVNode as r } from "vue";
const m = (e, t) => t ? typeof t == "string" ? ` ${e}--${t}` : Array.isArray(t) ? t.reduce((l, n) => l + m(e, n), "") : Object.keys(t).reduce(
  (l, n) => l + (t[n] ? m(e, n) : ""),
  ""
) : "", x = (e) => (t, l) => {
  let n = t, a = l;
  return n && typeof n != "string" && (a = n, n = ""), n = n ? `${e}__${n}` : e, `${n}${m(n, a)}`;
}, _ = () => (e, t) => t ? `${m(`y-${e}`, t)}` : `y-${e}`, I = {
  "pull-refresh": {
    pulling: "下拉刷新...",
    loosing: "释放刷新...",
    loading: "数据加载中...",
    success: "数据已更新",
    failed: "数据跟新失败，请稍后再试"
  },
  "form-item": {
    validateMessage: "请输入正确内容"
  }
};
B("zh-CN");
M({
  "zh-CN": I
});
const k = (e) => {
  const t = `y-${e}`;
  return [t, x(t), _()];
};
var N = /* @__PURE__ */ ((e) => (e.Mini = "mini", e.Small = "small", e.Middle = "middle", e.Large = "large", e))(N || {}), h = /* @__PURE__ */ ((e) => (e.Top = "top", e.Middle = "middle", e.Bottom = "bottom", e))(h || {});
const w = (e) => isNaN(Number(e)) && typeof e == "string" ? e : `${e}px`, [z, p] = k("icon"), j = (e) => new RegExp(/\.(https|png|jpg|gif|jpeg|webp|apng)$/).test(e.toLowerCase()), L = /* @__PURE__ */ C({
  name: z,
  props: {
    dot: {
      type: Boolean,
      default: !1
    },
    name: {
      type: String,
      default: ""
    },
    size: {
      type: [Number, String],
      default: ""
    },
    info: {
      type: [Number, String],
      default: ""
    },
    badge: {
      type: [Number, String],
      default: ""
    },
    color: {
      type: String,
      default: ""
    },
    subColor: {
      type: String,
      default: ""
    },
    subBg: {
      type: String,
      default: ""
    },
    classPrefix: {
      type: String,
      default: "y-icon"
    },
    /**
     * @ignore
     */
    tag: {
      type: String,
      default: "i"
    }
  },
  emits: ["click"],
  setup(e, {
    slots: t,
    emit: l
  }) {
    const n = j(e.name), a = () => ({
      fontSize: w(e.size),
      color: e.color
    }), u = (c) => {
      l("click", c);
    };
    return () => {
      const {
        name: c,
        classPrefix: o,
        badge: s,
        dot: d,
        subColor: y,
        subBg: f,
        tag: b
      } = e;
      return r(b, {
        class: `${o}${n ? "" : ` y-icon--${c}`}`,
        style: a(),
        onClick: u
      }, {
        default: () => {
          var g;
          return [n ? r("em", {
            class: p("node")
          }, [r("img", {
            class: p("image"),
            src: c,
            alt: "icon"
          }, null)]) : null, d ? r("em", {
            class: p("dot"),
            style: {
              backgroundColor: f
            }
          }, null) : null, s ? r("em", {
            class: p("badge"),
            style: {
              color: y,
              backgroundColor: f
            }
          }, [s]) : null, ((g = t.default) == null ? void 0 : g.call(t)) || null];
        }
      });
    };
  }
});
function v(e) {
  const t = e;
  return t.install = (l) => {
    const { name: n } = e;
    n && l.component(n, e);
  }, t;
}
const T = v(L), [A, i, E] = k("cell"), P = /* @__PURE__ */ C({
  name: A,
  props: {
    tag: {
      type: String,
      default: "div"
    },
    title: {
      type: [Number, String],
      default: ""
    },
    label: {
      type: [Number, String],
      default: ""
    },
    value: {
      type: [Number, String],
      default: ""
    },
    size: {
      type: String,
      default: N.Middle
    },
    // 垂直对齐方式
    vertical: {
      type: String,
      default: h.Middle
    },
    // 是否有 border
    border: {
      type: Boolean,
      default: !0
    },
    icon: {
      type: String,
      default: ""
    },
    // 点击态
    clickable: {
      type: Boolean,
      default: !1
    }
  },
  emits: ["click"],
  setup(e, {
    slots: t,
    emit: l
  }) {
    const n = (a) => {
      l("click", a);
    };
    return () => {
      const {
        tag: a,
        vertical: u,
        border: c,
        size: o,
        title: s,
        icon: d,
        label: y,
        value: f,
        clickable: b
      } = e, g = a === "a" ? !0 : b;
      return r(a, {
        class: [i({
          [`is-${u}`]: u,
          [o]: o,
          hairline: c
        }), E("el", {
          clickable: g
        })],
        onClick: n
      }, {
        default: () => {
          var $, S;
          return [($ = t.left) == null ? void 0 : $.call(t), r("div", {
            class: i("center", {
              "has-left": t.left
            })
          }, [t.center ? t.center() : [r("h4", {
            class: i("title")
          }, [s]), r("p", {
            class: i("label")
          }, [y])]]), t.default ? t.default() : r("div", {
            class: i("value")
          }, [f]), ((S = t.right) == null ? void 0 : S.call(t)) || d && r(T, {
            name: d,
            class: i("icon")
          }, null)];
        }
      });
    };
  }
});
const O = v(P);
export {
  O as default
};