vue-amazing-ui/es/cascader/Cascader.vue2.js

An Amazing Vue3 UI Components Library, Using TypeScript.

import { defineComponent as S, ref as r, computed as O, watchEffect as m, createElementBlock as D, openBlock as P, normalizeStyle as U, createVNode as v, unref as b } from "vue";
import y from "../select/index.js";
const E = /* @__PURE__ */ S({
  __name: "Cascader",
  props: {
    options: { default: () => [] },
    label: { default: "label" },
    value: { default: "value" },
    children: { default: "children" },
    placeholder: { default: "请选择" },
    disabled: { type: [Boolean, Array], default: !1 },
    width: { default: "auto" },
    height: { default: void 0 },
    size: { default: "middle" },
    gap: { default: void 0 },
    changeOnSelect: { type: Boolean, default: !1 },
    allowClear: { type: Boolean, default: !1 },
    search: { type: Boolean, default: !1 },
    placement: { default: "bottom" },
    flip: { type: Boolean, default: !0 },
    to: { type: [String, Boolean], default: "body" },
    filter: { type: [Function, Boolean], default: !0 },
    maxDisplay: { default: 6 },
    scrollbarProps: { default: () => ({}) },
    modelValue: { default: () => [] }
  },
  emits: ["update:modelValue", "change"],
  setup(e, { emit: w }) {
    const i = e, a = r([]), u = r([]), o = r([]), h = r([]), f = r([]), c = w, A = O(() => {
      const l = {
        small: 4,
        middle: 6,
        large: 8
      };
      return i.gap !== void 0 ? `${i.gap}px` : `${l[i.size]}px`;
    });
    m(() => {
      o.value = [...i.options];
    }), m(() => {
      a.value = [...i.modelValue];
    }), m(() => {
      V(a.value), C(a.value);
    });
    function g(l, t) {
      const d = l.length;
      for (let n = 0; n < d; n++)
        if (l[n][i.value] === a.value[t])
          return l[n][i.children] || [];
      return [];
    }
    function V(l) {
      h.value = g(o.value, 0), f.value = [], l.length > 1 && (f.value = g(h.value, 1));
    }
    function s(l, t) {
      const d = l.length;
      for (let n = 0; n < d; n++)
        if (l[n][i.value] === a.value[t])
          return l[n][i.label];
      return a.value[t];
    }
    function C(l) {
      u.value[0] = s(o.value, 0), l.length > 1 && (u.value[1] = s(h.value, 1)), l.length > 2 && (u.value[2] = s(f.value, 2));
    }
    function x(l, t) {
      i.changeOnSelect ? (c("update:modelValue", [l]), c("change", [l], [t])) : (a.value = [l], u.value = [t]);
    }
    function z(l, t) {
      i.changeOnSelect ? (c("update:modelValue", [a.value[0], l]), c("change", [a.value[0], l], [u.value[0], t])) : (a.value = [a.value[0], l], u.value = [u.value[0], t]);
    }
    function B(l, t) {
      c("update:modelValue", [...a.value.slice(0, 2), l]), c("change", [...a.value.slice(0, 2), l], [...u.value.slice(0, 2), t]);
    }
    return (l, t) => (P(), D("div", {
      class: "cascader-wrap",
      style: U(`--cascader-select-gap: ${A.value};`)
    }, [
      v(b(y), {
        options: o.value,
        label: e.label,
        value: e.value,
        placeholder: Array.isArray(e.placeholder) ? e.placeholder[0] : e.placeholder,
        disabled: Array.isArray(e.disabled) ? e.disabled[0] : e.disabled,
        width: Array.isArray(e.width) ? e.width[0] : e.width,
        height: e.height,
        size: e.size,
        "allow-clear": e.allowClear,
        search: e.search,
        placement: e.placement,
        flip: e.flip,
        to: e.to,
        filter: e.filter,
        "max-display": e.maxDisplay,
        "scrollbar-props": e.scrollbarProps,
        modelValue: a.value[0],
        "onUpdate:modelValue": t[0] || (t[0] = (d) => a.value[0] = d),
        onChange: x
      }, null, 8, ["options", "label", "value", "placeholder", "disabled", "width", "height", "size", "allow-clear", "search", "placement", "flip", "to", "filter", "max-display", "scrollbar-props", "modelValue"]),
      v(b(y), {
        options: h.value,
        label: e.label,
        value: e.value,
        placeholder: Array.isArray(e.placeholder) ? e.placeholder[1] : e.placeholder,
        disabled: Array.isArray(e.disabled) ? e.disabled[1] : e.disabled,
        width: Array.isArray(e.width) ? e.width[1] : e.width,
        height: e.height,
        size: e.size,
        "allow-clear": e.allowClear,
        search: e.search,
        placement: e.placement,
        flip: e.flip,
        to: e.to,
        filter: e.filter,
        "max-display": e.maxDisplay,
        "scrollbar-props": e.scrollbarProps,
        modelValue: a.value[1],
        "onUpdate:modelValue": t[1] || (t[1] = (d) => a.value[1] = d),
        onChange: z
      }, null, 8, ["options", "label", "value", "placeholder", "disabled", "width", "height", "size", "allow-clear", "search", "placement", "flip", "to", "filter", "max-display", "scrollbar-props", "modelValue"]),
      v(b(y), {
        options: f.value,
        label: e.label,
        value: e.value,
        placeholder: Array.isArray(e.placeholder) ? e.placeholder[2] : e.placeholder,
        disabled: Array.isArray(e.disabled) ? e.disabled[2] : e.disabled,
        width: Array.isArray(e.width) ? e.width[2] : e.width,
        height: e.height,
        size: e.size,
        "allow-clear": e.allowClear,
        search: e.search,
        placement: e.placement,
        flip: e.flip,
        to: e.to,
        filter: e.filter,
        "max-display": e.maxDisplay,
        "scrollbar-props": e.scrollbarProps,
        modelValue: a.value[2],
        "onUpdate:modelValue": t[2] || (t[2] = (d) => a.value[2] = d),
        onChange: B
      }, null, 8, ["options", "label", "value", "placeholder", "disabled", "width", "height", "size", "allow-clear", "search", "placement", "flip", "to", "filter", "max-display", "scrollbar-props", "modelValue"])
    ], 4));
  }
});
export {
  E as default
};