@aurouscia/vue-china-area-select/dist/index.es.js

vue3中国大陆地区省市区(2025)联动选择器

import { defineComponent as F, ref as r, computed as m, onBeforeMount as L, createElementBlock as u, openBlock as o, Fragment as f, withDirectives as B, createCommentVNode as O, createElementVNode as p, normalizeClass as I, renderList as k, toDisplayString as D, vModelSelect as S } from "vue";
import { getTopDivisions as R, getDivisionChildren as U, matchDivisionByCode as T, matchDivisionByNames as j } from "@aurouscia/china-areas";
const q = ["value"], G = ["value"], H = ["value"], W = /* @__PURE__ */ F({
  __name: "ChinaAreaSelect",
  props: {
    namesInit: {},
    codeInit: {},
    emitOnInited: { type: Boolean }
  },
  emits: ["change"],
  setup($, { expose: M, emit: P }) {
    const d = $, a = r(), t = r(), n = r(), N = r(R()), s = r([]), i = r([]);
    function V() {
      a.value ? (s.value = U(a.value.code), t.value && !s.value.includes(t.value) && (t.value = void 0)) : (s.value = [], t.value = void 0), g();
    }
    function g() {
      if (!t.value) {
        i.value = [], n.value = void 0;
        return;
      }
      i.value = U(t.value.code), n.value && !i.value.includes(n.value) && (n.value = void 0);
    }
    const y = m(() => !(!a.value || !N.value.includes(a.value) || s.value.length > 0 && (!t.value || !s.value.includes(t.value)) || i.value.length > 0 && (!n.value || !i.value.includes(n.value))));
    function h() {
      var v, e, l, x, A, J;
      return n.value ? {
        names: [(v = a.value) == null ? void 0 : v.name, (e = t.value) == null ? void 0 : e.name, n.value.name],
        code: n.value.code,
        valid: y.value
      } : t.value ? {
        names: [(l = a.value) == null ? void 0 : l.name, (x = t.value) == null ? void 0 : x.name],
        code: t.value.code,
        valid: y.value
      } : a.value ? {
        names: [(A = a.value) == null ? void 0 : A.name],
        code: (J = a.value) == null ? void 0 : J.code,
        valid: y.value
      } : {
        names: [],
        code: "000000",
        valid: !1
      };
    }
    let C = "";
    function c(v) {
      const e = h();
      let l = JSON.stringify(e.names);
      if (v == "init") {
        C = l, d.emitOnInited && E("change", e);
        return;
      }
      l !== C && (C = l, E("change", e));
    }
    function b(v) {
      let e = [];
      d.codeInit ? e = T(d.codeInit) : d.namesInit && (e = j(d.namesInit)), a.value = e.at(0), t.value = e.at(1), n.value = e.at(2), V(), g(), c(v ? "init" : void 0);
    }
    L(() => {
      b(!0);
    }), M({
      initByProps: () => b(),
      getEmitData: h
    });
    const E = P, _ = m(() => ({ cas_not_selected: !a.value })), w = m(() => ({ cas_not_selected: !t.value })), z = m(() => ({ cas_not_selected: !n.value }));
    return (v, e) => (o(), u(f, null, [
      B(p("select", {
        "onUpdate:modelValue": e[0] || (e[0] = (l) => a.value = l),
        onChange: e[1] || (e[1] = (l) => {
          V(), c();
        }),
        class: I(_.value)
      }, [
        e[6] || (e[6] = p("option", {
          value: void 0,
          style: { color: "gray" }
        }, "选择省份", -1)),
        (o(!0), u(f, null, k(N.value, (l) => (o(), u("option", {
          key: l.code,
          value: l
        }, D(l.name), 9, q))), 128))
      ], 34), [
        [S, a.value]
      ]),
      s.value.length > 0 ? B((o(), u("select", {
        key: 0,
        "onUpdate:modelValue": e[2] || (e[2] = (l) => t.value = l),
        onChange: e[3] || (e[3] = (l) => {
          g(), c();
        }),
        class: I(w.value)
      }, [
        e[7] || (e[7] = p("option", {
          value: void 0,
          style: { color: "gray" }
        }, "选择城市", -1)),
        (o(!0), u(f, null, k(s.value, (l) => (o(), u("option", {
          key: l.code,
          value: l
        }, D(l.name), 9, G))), 128))
      ], 34)), [
        [S, t.value]
      ]) : O("", !0),
      i.value.length > 0 ? B((o(), u("select", {
        key: 1,
        "onUpdate:modelValue": e[4] || (e[4] = (l) => n.value = l),
        onChange: e[5] || (e[5] = (l) => c()),
        class: I(z.value)
      }, [
        e[8] || (e[8] = p("option", {
          value: void 0,
          style: { color: "gray" }
        }, "选择区县", -1)),
        (o(!0), u(f, null, k(i.value, (l) => (o(), u("option", {
          key: l.code,
          value: l
        }, D(l.name), 9, H))), 128))
      ], 34)), [
        [S, n.value]
      ]) : O("", !0)
    ], 64));
  }
}), X = "cas_not_selected";
export {
  X as casNotSelectedClassName,
  W as default
};