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

SSR component library of YUI with Vue3

import { ref as d, reactive as m, defineComponent as v, onMounted as $, onUnmounted as k, watch as M, createVNode as i, Transition as N, withDirectives as S, vShow as b } from "vue";
const u = (t, e) => e ? typeof e == "string" ? ` ${t}--${e}` : Array.isArray(e) ? e.reduce((o, n) => o + u(t, n), "") : Object.keys(e).reduce(
  (o, n) => o + (e[n] ? u(t, n) : ""),
  ""
) : "", x = (t) => (e, o) => {
  let n = e, l = o;
  return n && typeof n != "string" && (l = n, n = ""), n = n ? `${t}__${n}` : t, `${n}${u(n, l)}`;
}, A = () => (t, e) => e ? `${u(`y-${t}`, e)}` : `y-${t}`, B = {
  "pull-refresh": {
    pulling: "下拉刷新...",
    loosing: "释放刷新...",
    loading: "数据加载中...",
    success: "数据已更新",
    failed: "数据跟新失败，请稍后再试"
  },
  "form-item": {
    validateMessage: "请输入正确内容"
  }
};
d("zh-CN");
m({
  "zh-CN": B
});
const C = (t) => {
  const e = `y-${t}`;
  return [e, x(e), A()];
}, [I, V, w] = C("mask"), z = {
  // 控制显示
  modelValue: {
    type: Boolean,
    default: !1
  },
  // 层级
  zIndex: {
    type: [Number, String],
    default: null
  },
  // 动画时长
  duration: {
    type: Number,
    default: 300
  },
  // 自定义类名
  customClass: {
    type: String,
    default: ""
  },
  // 自定义样式
  customStyle: {
    type: Object,
    default: () => ({})
  },
  // 触摸滚动开关
  lockScroll: {
    type: Boolean,
    default: !0
  },
  onAfterLeave: {
    type: Function,
    default: null
  }
}, s = m([]);
let f = 0;
const L = /* @__PURE__ */ v({
  name: I,
  props: z,
  emits: ["update:modelValue"],
  setup(t, {
    slots: e
  }) {
    const o = d("");
    $(() => {
      o.value = `mask${f}`, f += 1, n(t.modelValue, !0);
    }), k(() => {
      const a = s.findIndex((r) => r._id === o.value);
      a >= 0 && s.splice(a, 1);
    }), M(() => t.modelValue, (a) => {
      n(a);
    });
    const n = (a, r) => {
      a ? (s.unshift({
        _id: o.value,
        _state: a
      }), s.length > 1 && (s[1]._state = !1)) : r || (s.splice(0, 1), s.length > 0 && (s[0]._state = !0));
    }, l = () => {
      let a = !1;
      for (let r = 0; r < s.length; r++)
        s[r]._id === o.value && (a = s[r]._state);
      return {
        _state: a
      };
    }, p = (a) => {
      const {
        lockScroll: r
      } = t;
      r && (a.preventDefault(), a.stopPropagation());
    };
    return () => {
      const {
        customClass: a,
        duration: r,
        zIndex: y,
        customStyle: g,
        onAfterLeave: _
      } = t, {
        _state: h
      } = l();
      return i(N, {
        name: w("animation", "fade"),
        onAfterLeave: _
      }, {
        default: () => {
          var c;
          return [S(i("div", {
            style: {
              animationDuration: `${r}ms`,
              zIndex: y,
              ...g
            },
            class: [V(), a],
            onTouchmove: p
          }, [(c = e.default) == null ? void 0 : c.call(e)]), [[b, h]])];
        }
      });
    };
  }
});
function D(t) {
  const e = t;
  return e.install = (o) => {
    const { name: n } = t;
    n && o.component(n, t);
  }, e;
}
const j = D(L);
export {
  j as default
};