vue-city-pinyin/es/components/city-select/city-select.vue2.js

City selection package

import { defineComponent as j, ref as l, reactive as x, computed as y, watch as g } from "vue";
import m from "../../assets/city-data.json.js";
import F from "../../utils/gen-class.js";
import { useCompRef as G } from "../../hooks/useCompRef.js";
import "../../node_modules/.pnpm/ts-tooltip@1.0.3_vue@3.5.13/node_modules/ts-tooltip/es/components/tooltip/index.js";
import H from "../../node_modules/.pnpm/ts-tooltip@1.0.3_vue@3.5.13/node_modules/ts-tooltip/es/components/tooltip/tooltip.vue.js";
const Z = j({
  name: "CitySelect",
  components: {
    Tooltip: H
  },
  props: {
    hot: {
      type: Boolean,
      default: !0
    },
    placement: {
      type: String,
      default: "bottom"
    },
    data: {
      type: Object,
      required: !0
    }
  },
  emits: ["onChange"],
  setup(u, { emit: T }) {
    var h, v;
    const p = l(), { c: o, cx: s } = F("city"), E = l(!1), c = l(!1), i = l("热门"), n = G(), A = (e) => {
      var t, r;
      e ? (t = n.value) == null || t.show() : (r = n.value) == null || r.hide();
    }, a = x({
      id: (h = u.data) == null ? void 0 : h.id,
      name: (v = u.data) == null ? void 0 : v.name
    });
    let f = ["热门", "ABCDE", "FGHJ", "KLMN", "PQRST", "WXYZ"];
    u.hot || (f = ["ABCD", "EFGH", "JKL", "MNPQ", "RSTW", "XYZ"], i.value = "ABCD");
    const d = {};
    f.forEach((e) => {
      e === "热门" ? d[e] = ["hot"] : d[e] = e.split("");
    });
    const C = y(() => d[i.value]), N = y(() => {
      let e = "";
      return Object.keys(m).forEach((t) => {
        m[t].forEach((r) => {
          a.id === r.id && (e = r.name);
        });
      }), e;
    }), O = ({ type: e }) => {
      e === "mouseout" && (c.value = !1), setTimeout(() => {
        var t;
        !c.value && p.value !== document.activeElement && ((t = n.value) == null || t.hide());
      }, 300);
    }, R = () => {
      c.value = !0;
    }, k = (e) => {
      var t;
      e.type === "keypress" && (e.returnValue = !1), (t = n.value) == null || t.show();
    }, w = (e) => {
      i.value = e;
    }, B = (e) => C.value.includes(e), M = (e) => {
      var t;
      a.id = e.id, a.name = e.name, c.value = !0, (t = n.value) == null || t.hide();
    };
    g(() => u.data, (e) => {
      a.id = e == null ? void 0 : e.id, a.name = e == null ? void 0 : e.name;
    }, { immediate: !0 }), g(a, (e) => {
      T("onChange", e);
    });
    const S = s(() => ({ [o("select")]: !0 })), b = s(() => ({ [o("inner")]: !0 })), D = s(() => ({ [o("input")]: !0 })), I = s(() => ({ [o("panel")]: !0 })), K = s(() => ({ [o("tags")]: !0 })), L = s(() => ({ [o("items")]: !0 }));
    return {
      wrapCls: S,
      pickerCls: b,
      inputCls: D,
      panelCls: I,
      tagsCls: K,
      itemsCls: L,
      cityList: m,
      inputRef: p,
      isMouseOver: c,
      panelActive: E,
      cityItem: a,
      currTag: C,
      tagsArr: f,
      tagKey: i,
      currCityName: N,
      endChoice: O,
      startMouseOver: R,
      startChoice: k,
      choiceTag: w,
      currTagIncludes: B,
      choiceCity: M,
      tooltipRef: n,
      clickOutside: A
    };
  }
});
export {
  Z as default
};