y-design-ssr 0.2.2 → 0.2.4

package/libs/loading/index.mjs

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