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

SSR component library of YUI with Vue3

import { ref as C, reactive as _, defineComponent as L, createVNode as i, createApp as z, h as P } from "vue";
const l = (e, t) => t ? typeof t == "string" ? ` ${e}--${t}` : Array.isArray(t) ? t.reduce((n, r) => n + l(e, r), "") : Object.keys(t).reduce(
  (n, r) => n + (t[r] ? l(e, r) : ""),
  ""
) : "", R = (e) => (t, n) => {
  let r = t, o = n;
  return r && typeof r != "string" && (o = r, r = ""), r = r ? `${e}__${r}` : e, `${r}${l(r, o)}`;
}, k = () => (e, t) => t ? `${l(`y-${e}`, t)}` : `y-${e}`, B = {
  "pull-refresh": {
    pulling: "下拉刷新...",
    loosing: "释放刷新...",
    loading: "数据加载中...",
    success: "数据已更新",
    failed: "数据跟新失败，请稍后再试"
  },
  "form-item": {
    validateMessage: "请输入正确内容"
  }
};
C("zh-CN");
_({
  "zh-CN": B
});
const M = (e) => {
  const t = `y-${e}`;
  return [t, R(t), k()];
}, c = (e) => isNaN(Number(e)) && typeof e == "string" ? e : `${e}px`, A = (e) => {
  switch (e) {
    case "top":
      return "column-reverse";
    case "bottom":
      return "column";
    case "left":
      return "row-reverse";
    case "right":
      return "row";
    default:
      return "column";
  }
}, [D, s] = M("loading"), E = {
  // Loading icon 的颜色
  color: {
    type: String,
    default: ""
  },
  // 背景色
  bgColor: {
    type: String,
    default: ""
  },
  bgBorderRadius: {
    type: [Number, String],
    default: "16px"
  },
  // 粗细
  thick: {
    type: [Number, String],
    default: 8
  },
  // 方向
  direction: {
    type: String,
    default: "forward"
  },
  // 大小
  size: {
    type: [Number, String],
    default: "24px"
  },
  padding: {
    type: [Number, String],
    default: ""
  },
  // 文案
  text: {
    type: String,
    default: ""
  },
  // 文案位置
  textLocation: {
    type: String,
    default: "bottom"
  },
  // 文案大小
  textSize: {
    type: [Number, String],
    default: ""
  },
  // 文案颜色
  textColor: {
    type: String,
    default: ""
  },
  // 布局位置
  position: {
    type: String,
    default: "relative"
  }
}, y = /* @__PURE__ */ L({
  name: D,
  props: E,
  setup(e, {
    slots: t
  }) {
    return () => {
      var g, f;
      const {
        position: n,
        textLocation: r,
        bgColor: o,
        bgBorderRadius: S,
        size: u,
        padding: h,
        color: x,
        thick: b,
        direction: d,
        text: $,
        textColor: w,
        textSize: N
      } = e, p = ((g = t.default) == null ? void 0 : g.call(t)) || $;
      return i("div", {
        class: s({
          [n]: n !== "relative"
        })
      }, [i("div", {
        class: s("bg", {
          [n]: n !== "relative"
        }),
        style: {
          flexDirection: A(r),
          backgroundColor: o,
          borderRadius: c(S),
          padding: c(h)
        }
      }, [i("span", {
        class: s("icon-wrapper"),
        style: {
          width: c(u),
          height: c(u)
        }
      }, [((f = t.icon) == null ? void 0 : f.call(t)) || i("svg", {
        class: s("icon", {
          [d]: d
        }),
        viewBox: "25 25 50 50"
      }, [i("circle", {
        class: s("icon-circle"),
        style: {
          stroke: x,
          strokeWidth: c(b)
        },
        cx: "50",
        cy: "50",
        r: "20",
        fill: "none"
      }, null)])]), p && i("span", {
        class: s("text", {
          [r]: r
        }),
        style: {
          color: w,
          fontSize: c(N)
        }
      }, [p])])]);
    };
  }
}), I = {
  position: "fixed"
};
let a = null;
const v = (e, t) => {
  const r = z({
    render: () => P(y, { ...e }, { ...t })
  }), o = document.createElement("div");
  return r.mount(o);
}, T = {
  /**
   * @description: show
   * @param {LoadingPropsType} options
   * @return {*}
   */
  show: (e, t) => {
    a || (a = v(
      {
        ...I,
        ...e
      },
      t
    )), document.body.appendChild(a.$el);
  },
  /**
   * @description: hide
   * @param {*}
   * @return {*}
   */
  hide: () => {
    a && a.$el.remove();
  }
}, m = (e, t) => {
  t.value ? (e.classList.add("y-loading__wrap"), e.appendChild(e.instance.$el)) : (e.classList.remove("y-loading__wrap"), e.removeChild(e.instance.$el));
}, U = {
  install: (e) => {
    e.directive("loading", O), e.directive("loading-props", V), e.directive("loading-slots", j);
  }
}, O = {
  getSSRProps: (e) => ({ ...e }),
  mounted: (e, t) => {
    e.instance = v({ ...e.customProps }, { ...e.customSlots }), t.value && m(e, t);
  },
  updated: (e, t) => {
    t.oldValue !== t.value && m(e, t);
  },
  unmounted: (e) => {
    e.instance && e.instance.$el.remove();
  }
}, V = {
  getSSRProps: (e) => ({ ...e }),
  beforeMount: (e, t) => {
    e.customProps = { ...t.value };
  }
}, j = {
  getSSRProps: (e) => ({ ...e }),
  beforeMount: (e, t) => {
    e.customSlots = { ...t.value };
  }
};
function F(e) {
  const t = e;
  return t.install = (n) => {
    const { name: r } = e;
    r && n.component(r, e);
  }, t;
}
const W = F(y);
export {
  T as createLoading,
  W as default,
  O as directive,
  V as directiveProps,
  j as directiveSlots,
  U as loadingDirective
};