uv-ui/es/components/picker/picker.js

基于vue3的移动端组件库

import { computed as d, inject as P, ref as g, watch as B, openBlock as p, createBlock as h, unref as s, mergeProps as F, withCtx as $, createElementVNode as a, toDisplayString as f, renderSlot as E, createElementBlock as H, Fragment as L, renderList as T } from "vue";
import U from "../popup/index.js";
import A from "./picker-column.js";
import { getColumnsType as D, formatCascadeColumns as q } from "./utils.js";
import "./picker.vue_vue_type_style_index_0_lang.js";
const z = { class: "uv-picker" }, G = { class: "uv-picker-title" }, I = { class: "uv-picker-title-center" }, J = { class: "uv-picker-content" }, K = /* @__PURE__ */ a("div", { class: "uv-picker-content-wrapper" }, null, -1), M = {
  name: "UvPicker"
}, Z = /* @__PURE__ */ Object.assign(M, {
  props: {
    modelValue: {
      type: [String, Number],
      default: ""
    },
    title: {
      type: String
    },
    leftName: {
      type: String,
      default: "\u53D6\u6D88"
    },
    rightName: {
      type: String,
      default: "\u786E\u5B9A"
    },
    list: {
      type: Array,
      default: () => []
    },
    keyName: {
      type: [String, Number],
      default: "value"
    },
    labelName: {
      type: [String, Number],
      default: "label"
    },
    childrenName: {
      type: String,
      default: "children"
    }
  },
  emits: ["update:modelValue", "change", "column-change", "cancle", "confim"],
  setup(n, { expose: y, emit: u }) {
    const r = n, k = d(() => {
      const e = String(r.modelValue);
      return /[\\/:\-\s]/.test(e) ? e.split(/[\\/:\-\s]/) : e.split(",");
    }), v = d(
      () => D(r.list, r.childrenName)
    ), N = d(() => {
      const { list: e, labelName: t, keyName: i, childrenName: c } = r;
      switch (v.value) {
        case "multiple":
          return e;
        case "cascade":
          return q(e, {
            label: t,
            value: i,
            children: c
          }, l);
        default:
          return [e];
      }
    }), { props: b, validateBlurOrChange: V } = P("form-item", {}), l = g([]);
    B(() => r.modelValue, (e) => {
      l.value = e.split(",");
    }, {
      immediate: !0
    });
    const o = g(!1), S = () => {
      o.value = !0;
    }, C = () => {
      o.value = !1;
    };
    function _() {
      u("cancle"), o.value = !1;
    }
    function j(e, t) {
      l.value[t] = e, l.value.join(","), u("change", l.value.join(",")), u("column-change", {
        value: e,
        index: t
      });
    }
    function w(e, t) {
      l.value[t] = e;
    }
    function O() {
      u("confim", l.value.join(",")), u("update:modelValue", l.value.join(",")), b && V("blur"), o.value = !1;
    }
    return y({
      open: S,
      close: C
    }), (e, t) => (p(), h(s(U), F({
      modelValue: o.value,
      "onUpdate:modelValue": t[0] || (t[0] = (i) => o.value = i),
      position: "bottom"
    }, e.$attrs), {
      default: $(() => [
        a("div", z, [
          a("div", G, [
            a("div", {
              class: "uv-picker-title-left",
              onClick: _
            }, f(n.leftName), 1),
            E(e.$slots, "title", {}, () => [
              a("div", I, f(n.title), 1)
            ]),
            a("div", {
              class: "uv-picker-title-right",
              onClick: O
            }, f(n.rightName), 1)
          ]),
          a("div", J, [
            K,
            (p(!0), H(L, null, T(s(N), (i, c) => (p(), h(A, {
              key: c,
              list: i,
              "key-name": n.keyName,
              "label-name": n.labelName,
              value: s(k)[c],
              "columns-type": s(v),
              onChange: (m) => j(m, c),
              onFirstOpen: (m) => w(m, c)
            }, null, 8, ["list", "key-name", "label-name", "value", "columns-type", "onChange", "onFirstOpen"]))), 128))
          ])
        ])
      ]),
      _: 3
    }, 16, ["modelValue"]));
  }
});
export {
  Z as default
};