y-design-ssr 0.2.5 → 0.2.6

package/libs/loading/index.mjs

@@ -1,11 +1,40 @@
-import { ref as C, reactive as _, defineComponent as L, createVNode as i, createApp as z, h as P } from "vue";
-const u = (e, t) => t ? typeof t == "string" ? ` ${e}--${t}` : Array.isArray(t) ? t.reduce((n, r) => n + u(e, r), "") : Object.keys(t).reduce(
-  (n, r) => n + (t[r] ? u(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}${u(r, o)}`;
-}, k = () => (e, t) => t ? `${u(`y-${e}`, t)}` : `y-${e}`, B = {
+import { ref, reactive, defineComponent, createVNode, createApp, h } 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,15 +46,22 @@ const u = (e, t) => t ? typeof t == "string" ? ` ${e}--${t}` : Array.isArray(t)
     validateMessage: "请输入正确内容"
   }
 };
-C("zh-CN");
-_({
-  "zh-CN": B
+ref("zh-CN");
+reactive({
+  "zh-CN": defaultLang
 });
-const M = (e) => {
-  const t = `y-${e}`;
-  return [t, R(t), k()];
-}, s = (e) => isNaN(Number(e)) && typeof e == "string" ? e : `${e}px`, A = (e) => {
-  switch (e) {
+const createNamespace = (name2) => {
+  const prefixedName = `y-${name2}`;
+  return [prefixedName, createBEM(prefixedName), createGlobalBem()];
+};
+const parseUnit = (val) => {
+  if (isNaN(Number(val)) && typeof val === "string") {
+    return val;
+  }
+  return `${val}px`;
+};
+const parseFlexDirection = (location) => {
+  switch (location) {
     case "top":
       return "column-reverse";
     case "bottom":
@@ -37,7 +73,9 @@ const M = (e) => {
     default:
       return "column";
   }
-}, [D, c] = M("loading"), E = {
+};
+const [name, bem] = createNamespace("loading");
+const _props = {
   // Loading icon 的颜色
   color: {
     type: String,
@@ -96,97 +134,107 @@ const M = (e) => {
     type: String,
     default: "relative"
   }
-}, l = /* @__PURE__ */ L({
-  name: D,
-  props: E,
-  setup(e, {
-    slots: t
+};
+const Loading = /* @__PURE__ */ defineComponent({
+  name,
+  props: _props,
+  setup(props, {
+    slots
   }) {
     return () => {
-      var f, m;
+      var _a, _b;
       const {
-        position: n,
-        textLocation: r,
-        bgColor: o,
-        bgBorderRadius: S,
-        size: d,
-        padding: x,
-        color: b,
-        thick: h,
-        direction: p,
-        text: $,
-        textColor: w,
-        textSize: N
-      } = e, g = ((f = t.default) == null ? void 0 : f.call(t)) || $;
-      return i("div", {
-        class: c({
-          [n]: n !== "relative"
+        position,
+        textLocation,
+        bgColor,
+        bgBorderRadius,
+        size,
+        padding,
+        color,
+        thick,
+        direction,
+        text,
+        textColor,
+        textSize
+      } = props;
+      const showText = ((_a = slots.default) == null ? void 0 : _a.call(slots)) || text;
+      return createVNode("div", {
+        "class": bem({
+          [position]: position !== "relative"
         })
-      }, [i("div", {
-        class: c("bg", {
-          [n]: n !== "relative"
+      }, [createVNode("div", {
+        "class": bem("bg", {
+          [position]: position !== "relative"
         }),
-        style: {
-          flexDirection: A(r),
-          backgroundColor: o,
-          borderRadius: s(S),
-          padding: s(x)
+        "style": {
+          flexDirection: parseFlexDirection(textLocation),
+          backgroundColor: bgColor,
+          borderRadius: parseUnit(bgBorderRadius),
+          padding: parseUnit(padding)
         }
-      }, [i("span", {
-        class: c("icon-wrapper"),
-        style: {
-          width: s(d),
-          height: s(d)
+      }, [createVNode("span", {
+        "class": bem("icon-wrapper"),
+        "style": {
+          width: parseUnit(size),
+          height: parseUnit(size)
         }
-      }, [((m = t.icon) == null ? void 0 : m.call(t)) || i("svg", {
-        class: c("icon", {
-          [p]: p
+      }, [((_b = slots.icon) == null ? void 0 : _b.call(slots)) || createVNode("svg", {
+        "class": bem("icon", {
+          [direction]: direction
         }),
-        viewBox: "25 25 50 50"
-      }, [i("circle", {
-        class: c("icon-circle"),
-        style: {
-          stroke: b,
-          strokeWidth: s(h)
+        "viewBox": "25 25 50 50"
+      }, [createVNode("circle", {
+        "class": bem("icon-circle"),
+        "style": {
+          stroke: color,
+          strokeWidth: parseUnit(thick)
         },
-        cx: "50",
-        cy: "50",
-        r: "20",
-        fill: "none"
-      }, null)])]), g && i("span", {
-        class: c("text", {
-          [r]: r
+        "cx": "50",
+        "cy": "50",
+        "r": "20",
+        "fill": "none"
+      }, null)])]), showText && createVNode("span", {
+        "class": bem("text", {
+          [textLocation]: textLocation
         }),
-        style: {
-          color: w,
-          fontSize: s(N)
+        "style": {
+          color: textColor,
+          fontSize: parseUnit(textSize)
         }
-      }, [g])])]);
+      }, [showText])])]);
     };
   }
-}), O = {
+});
+const globalOptions = {
   position: "fixed"
 };
-let a = null;
-const v = (e, t) => {
-  const r = z({
-    render: () => P(l, { ...e }, { ...t })
-  }), o = document.createElement("div");
-  return r.mount(o);
-}, V = {
+let instance = null;
+const initInstance = (customProps, customSlots) => {
+  const wrapper = {
+    render: () => {
+      return h(Loading, { ...customProps }, { ...customSlots });
+    }
+  };
+  const customApp = createApp(wrapper);
+  const element = document.createElement("div");
+  return customApp.mount(element);
+};
+const createLoading = {
   /**
    * @description: show
    * @param {LoadingPropsType} options
    * @return {*}
    */
-  show: (e, t) => {
-    a || (a = v(
-      {
-        ...O,
-        ...e
-      },
-      t
-    )), document.body.appendChild(a.$el);
+  show: (customProps, customSlots) => {
+    if (!instance)
+      instance = initInstance(
+        {
+          ...globalOptions,
+          ...customProps
+        },
+        customSlots
+      );
+    document.body.appendChild(instance.$el);
   },
   /**
    * @description: hide
@@ -194,44 +242,75 @@ const v = (e, t) => {
    * @return {*}
    */
   hide: () => {
-    a && a.$el.remove();
+    instance && instance.$el.remove();
+  }
+};
+const toggleLoading = (el, binding) => {
+  if (binding.value) {
+    el.classList.add("y-loading__wrap");
+    el.appendChild(el.instance.$el);
+  } else {
+    el.classList.remove("y-loading__wrap");
+    el.removeChild(el.instance.$el);
   }
-}, y = (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));
-}, j = {
-  install: (e) => {
-    e.directive("loading", F), e.directive("loading-props", G), e.directive("loading-slots", I);
+};
+const loadingDirective = {
+  install: (app) => {
+    app.directive("loading", directive);
+    app.directive("loading-props", directiveProps);
+    app.directive("loading-slots", directiveSlots);
   }
-}, F = {
-  getSSRProps: (e) => ({ ...e }),
-  mounted: (e, t) => {
-    e.instance = v({ ...e.customProps }, { ...e.customSlots }), t.value && y(e, t);
+};
+const directive = {
+  getSSRProps: (binding) => {
+    return { ...binding };
   },
-  updated: (e, t) => {
-    t.oldValue !== t.value && y(e, t);
+  mounted: (el, binding) => {
+    el.instance = initInstance({ ...el.customProps }, { ...el.customSlots });
+    binding.value && toggleLoading(el, binding);
   },
-  unmounted: (e) => {
-    e.instance && e.instance.$el.remove();
+  updated: (el, binding) => {
+    if (binding.oldValue !== binding.value) {
+      toggleLoading(el, binding);
+    }
+  },
+  unmounted: (el) => {
+    el.instance && el.instance.$el.remove();
   }
-}, G = {
-  getSSRProps: (e) => ({ ...e }),
-  beforeMount: (e, t) => {
-    e.customProps = { ...t.value };
+};
+const directiveProps = {
+  getSSRProps: (binding) => {
+    return { ...binding };
+  },
+  beforeMount: (el, binding) => {
+    el.customProps = { ...binding.value };
   }
-}, I = {
-  getSSRProps: (e) => ({ ...e }),
-  beforeMount: (e, t) => {
-    e.customSlots = { ...t.value };
+};
+const directiveSlots = {
+  getSSRProps: (binding) => {
+    return { ...binding };
+  },
+  beforeMount: (el, binding) => {
+    el.customSlots = { ...binding.value };
   }
 };
-l.install = (e) => {
-  e.component(l.name, l), e.provide("loading", V), e.use(j);
+const reset = "";
+const libs = "";
+const font = "";
+const animation = "";
+const theme = "";
+const style = "";
+Loading.install = (app) => {
+  app.component(Loading.name, Loading);
+  app.provide("loading", createLoading);
+  app.use(loadingDirective);
 };
 export {
-  V as createLoading,
-  l as default,
-  F as directive,
-  G as directiveProps,
-  I as directiveSlots,
-  j as loadingDirective
+  Loading,
+  createLoading,
+  Loading as default,
+  directive,
+  directiveProps,
+  directiveSlots,
+  loadingDirective
 };