y-design-ssr 0.2.1 → 0.2.2

package/libs/stepper/index.mjs

@@ -1,11 +1,40 @@
-import { ref as V, reactive as z, inject as E, getCurrentInstance as F, watch as x, onUnmounted as A, defineComponent as T, computed as f, createVNode as d, withDirectives as k, vModelText as w } from "vue";
-const b = (e, t) => t ? typeof t == "string" ? ` ${e}--${t}` : Array.isArray(t) ? t.reduce((l, n) => l + b(e, n), "") : Object.keys(t).reduce(
-  (l, n) => l + (t[n] ? b(e, n) : ""),
-  ""
-) : "", D = (e) => (t, l) => {
-  let n = t, i = l;
-  return n && typeof n != "string" && (i = n, n = ""), n = n ? `${e}__${n}` : e, `${n}${b(n, i)}`;
-}, R = () => (e, t) => t ? `${b(`y-${e}`, t)}` : `y-${e}`, W = {
+import { ref, reactive, inject, getCurrentInstance, watch, onUnmounted, defineComponent, computed, createVNode, withDirectives, vModelText } 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,31 +46,50 @@ const b = (e, t) => t ? typeof t == "string" ? ` ${e}--${t}` : Array.isArray(t)
     validateMessage: "请输入正确内容"
   }
 };
-V("zh-CN");
-z({
-  "zh-CN": W
+ref("zh-CN");
+reactive({
+  "zh-CN": defaultLang
 });
-const O = (e) => {
-  const t = `y-${e}`;
-  return [t, D(t), R()];
-}, U = (e) => isNaN(Number(e)) && typeof e == "string" ? e : `${e}px`, j = "y-form-item", G = () => {
-  const e = E(j, null), t = F();
-  if (e && (t != null && t.proxy)) {
-    const { setField: l } = e, { resetValidation: n, change: i, validateWithTrigger: s } = e;
-    return x(
-      () => t.proxy.modelValue,
+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 FORM_ITEM_PROVIDE = "y-form-item";
+const useFormItem = () => {
+  const parent = inject(FORM_ITEM_PROVIDE, null);
+  const instance = getCurrentInstance();
+  if (parent && (instance == null ? void 0 : instance.proxy)) {
+    const { setField } = parent;
+    const { resetValidation, change, validateWithTrigger } = parent;
+    watch(
+      () => instance.proxy.modelValue,
       () => {
-        e.instance && e.instance.exposed && (n(), i(), s("onChange"));
+        if (parent.instance && parent.instance.exposed) {
+          resetValidation();
+          change();
+          validateWithTrigger("onChange");
+        }
       }
-    ), l(t), A(() => l(null)), {
-      parent: e
+    );
+    setField(instance);
+    onUnmounted(() => setField(null));
+    return {
+      parent
     };
   }
   return {
     parent: null
   };
-}, [P, m, v] = O("stepper"), g = /* @__PURE__ */ T({
-  name: P,
+};
+const [name, bem, gbem] = createNamespace("stepper");
+const Stepper = /* @__PURE__ */ defineComponent({
+  name,
   props: {
     modelValue: {
       type: [Number, String],
@@ -61,7 +109,7 @@ const O = (e) => {
     },
     integer: {
       type: Boolean,
-      default: !1
+      default: false
     },
     max: {
       type: Number,
@@ -69,11 +117,11 @@ const O = (e) => {
     },
     disabled: {
       type: Boolean,
-      default: !1
+      default: false
     },
     disableInput: {
       type: Boolean,
-      default: !1
+      default: false
     },
     inputWidth: {
       type: [Number, String],
@@ -85,99 +133,131 @@ const O = (e) => {
     }
   },
   emits: ["change", "blur", "subtract", "addit", "foucs", "update:modelValue"],
-  setup(e, {
-    slots: t,
-    emit: l
+  setup(props, {
+    slots,
+    emit
   }) {
     const {
-      parent: n
-    } = G(), i = V(e.modelValue), s = f(() => e.size || (n == null ? void 0 : n.getProp("size"))), y = f(() => e.modelValue <= e.min || e.disabled), p = f(() => e.modelValue >= e.max || e.disabled), h = (a) => {
-      let u = e.integer;
-      return a.toString().replace(/([^0-9\.\-])/g, "").replace(/\./g, (r) => u ? "" : (u = !0, r)).replace(/\-/g, (r, c) => c === 0 ? "-" : "");
-    }, o = (a) => {
-      const u = h(a);
-      i.value = u, l("update:modelValue", u), l("change", u);
+      parent
+    } = useFormItem();
+    const currentValue = ref(props.modelValue);
+    const size = computed(() => props.size || (parent == null ? void 0 : parent.getProp("size")));
+    const subDisabled = computed(() => props.modelValue <= props.min || props.disabled);
+    const addDisabled = computed(() => props.modelValue >= props.max || props.disabled);
+    const format = (value) => {
+      let bool = props.integer;
+      return value.toString().replace(/([^0-9\.\-])/g, "").replace(/\./g, ($1) => {
+        if (bool)
+          return "";
+        bool = true;
+        return $1;
+      }).replace(/\-/g, (_, i) => i === 0 ? "-" : "");
     };
-    x(() => e.modelValue, (a) => {
-      i.value = a;
+    const changeValue = (number) => {
+      const fNumber = format(number);
+      currentValue.value = fNumber;
+      emit("update:modelValue", fNumber);
+      emit("change", fNumber);
+    };
+    watch(() => props.modelValue, (value) => {
+      currentValue.value = value;
     });
-    const $ = (a) => l("focus", a), _ = (a) => {
+    const onFocus = (e) => emit("focus", e);
+    const onChange = (e) => {
       const {
-        value: u
-      } = a.target;
-      o(u);
-    }, B = (a) => {
+        value
+      } = e.target;
+      changeValue(value);
+    };
+    const onBlurReset = (e) => {
       const {
-        value: u
-      } = a.target, r = Number(h(u));
-      if (r && r < e.min ? o(e.min) : r && r > e.max ? o(e.max) : r && o(r), n) {
+        value
+      } = e.target;
+      const number = Number(format(value));
+      if (number && number < props.min)
+        changeValue(props.min);
+      else if (number && number > props.max)
+        changeValue(props.max);
+      else if (number)
+        changeValue(number);
+      if (parent) {
         const {
-          validateWithTrigger: c
-        } = n;
-        c("onBlur");
+          validateWithTrigger
+        } = parent;
+        validateWithTrigger("onBlur");
       }
-      l("blur", a);
-    }, C = () => {
-      const a = Number(e.modelValue) - e.step;
-      o(a), l("subtract", a);
-    }, I = () => {
-      const a = Number(e.modelValue) + e.step;
-      o(a), l("addit", a);
+      emit("blur", e);
+    };
+    const onSubtract = () => {
+      const number = Number(props.modelValue) - props.step;
+      changeValue(number);
+      emit("subtract", number);
+    };
+    const onAddit = () => {
+      const number = Number(props.modelValue) + props.step;
+      changeValue(number);
+      emit("addit", number);
     };
     return () => {
       const {
-        min: a,
-        max: u,
-        inputWidth: r,
-        placeholder: c,
-        disabled: S,
-        disableInput: N
-      } = e;
-      return d("div", {
-        class: m({
-          [s.value]: s.value
+        min,
+        max,
+        inputWidth,
+        placeholder,
+        disabled,
+        disableInput
+      } = props;
+      return createVNode("div", {
+        "class": bem({
+          [size.value]: size.value
         })
-      }, [t.subtraction ? t.subtraction() : d("button", {
-        type: "button",
-        disabled: y.value,
-        class: [m("subtraction"), v("el", {
-          clickable: !y.value
+      }, [slots.subtraction ? slots.subtraction() : createVNode("button", {
+        "type": "button",
+        "disabled": subDisabled.value,
+        "class": [bem("subtraction"), gbem("el", {
+          clickable: !subDisabled.value
         })],
-        onClick: C
-      }, null), k(d("input", {
-        type: "text",
-        class: m("input", {
-          "only-disable": N
+        "onClick": onSubtract
+      }, null), withDirectives(createVNode("input", {
+        "type": "text",
+        "class": bem("input", {
+          "only-disable": disableInput
         }),
-        style: {
-          width: U(r)
+        "style": {
+          width: parseUnit(inputWidth)
         },
-        "onUpdate:modelValue": (M) => i.value = M,
-        role: "spinbutton",
-        inputmode: "decimal",
-        "aria-min": a,
-        "aria-max": u,
-        "aria-valuenow": i.value,
-        onInput: _,
-        onBlur: B,
-        onFocus: $,
-        placeholder: c,
-        disabled: S || N
-      }, null), [[w, i.value]]), t.addition ? t.addition() : d("button", {
-        type: "button",
-        disabled: p.value,
-        class: [m("addition"), v("el", {
-          clickable: !p.value
+        "onUpdate:modelValue": ($event) => currentValue.value = $event,
+        "role": "spinbutton",
+        "inputmode": "decimal",
+        "aria-min": min,
+        "aria-max": max,
+        "aria-valuenow": currentValue.value,
+        "onInput": onChange,
+        "onBlur": onBlurReset,
+        "onFocus": onFocus,
+        "placeholder": placeholder,
+        "disabled": disabled || disableInput
+      }, null), [[vModelText, currentValue.value]]), slots.addition ? slots.addition() : createVNode("button", {
+        "type": "button",
+        "disabled": addDisabled.value,
+        "class": [bem("addition"), gbem("el", {
+          clickable: !addDisabled.value
         })],
-        onClick: I
+        "onClick": onAddit
       }, null)]);
     };
   }
 });
-g.install = (e) => {
-  const { name: t } = g;
-  e.component(t, g);
+const reset = "";
+const libs = "";
+const font = "";
+const animation = "";
+const theme = "";
+const style = "";
+Stepper.install = (Vue) => {
+  const { name: name2 } = Stepper;
+  Vue.component(name2, Stepper);
 };
 export {
-  g as default
+  Stepper as default
 };