hongluan-business-ui/es/components/tree-selector/src/index.mjs.map

Hongluan Business Component Library for Vue 3

{"version":3,"file":"index.mjs","sources":["../../../../../../packages/components/tree-selector/src/index.vue"],"sourcesContent":["<template>\n  <hl-selector\n    ref=\"hlSelector\"\n    :popper-class=\"`${prefix}-tree-selector-popper ${popperClass}`\"\n    :size=\"size\"\n    :disabled=\"disabled\"\n    :clearable=\"clearable\"\n    :placeholder=\"placeholder\"\n    :placement=\"placement\"\n    :collapse-tags=\"collapseTags\"\n    :filterable=\"filterable\"\n    :multiple=\"treeProps.showCheckbox\"\n    @resize=\"resizePopper\"\n    @input=\"onInput\"\n    @clear=\"onClear\"\n    @remove-tag=\"removeTag\"\n  >\n    <template #default>\n      <hl-scrollbar\n        ref=\"scrollbar\"\n        wrap-class=\"selector-dropdown-wrap\"\n        view-class=\"selector-dropdown-list\"\n      >\n        <hl-tree\n          ref=\"selectorTree\"\n          class=\"selector-tree\"\n          node-key=\"id\"\n          v-bind=\"treeProps\"\n          :style=\"treeStyle\"\n          @node-click=\"nodeClick\"\n          @check-change=\"checkChange\"\n        >\n          <template #default=\"{ node, data }\">\n            <slot name=\"tree-node\" :node=\"node\" :data=\"data\">\n              <span class=\"tree-node-label\">{{ node.label }}</span>\n            </slot>\n          </template>\n        </hl-tree>\n      </hl-scrollbar>\n    </template>\n    <template #tag=\"{ tag }\">\n      <slot name=\"tag\" :tag=\"tag\">\n        <span v-if=\"tag.key==='-1'\">{{ tag.text }}</span>\n        <span v-else>{{ tag.text[propsLabel] }}</span>\n      </slot>\n    </template>\n    <template v-if=\"$slots.prefix\" #prefix>\n      <slot name=\"prefix\"></slot>\n    </template>\n  </hl-selector>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, inject, onMounted, ref, watch } from 'vue'\nimport { HlSelector, HlScrollbar, HlTree, formItemContextKey, FormItemEvents } from 'hongluan-ui'\nimport { usePrefix } from '@hongluan-business-ui/utils/util'\n\nimport type { PropType } from 'vue'\nimport type { FormItemContext } from 'hongluan-ui'\nimport type { Indexable } from '@hongluan-business-ui/utils/types'\nimport type { TreeProps } from './tree.type'\n\nexport default defineComponent({\n  name: 'TreeSelector',\n  components: {\n    HlSelector,\n    HlTree,\n    HlScrollbar,\n  },\n  props: {\n    modelValue: [Array, String, Number, Object],\n    treeProps: Object as PropType<TreeProps>,\n    clearable: Boolean,\n    placeholder: String,\n    placement: String,\n    collapseTags: Boolean,\n    filterable: Boolean,\n    size: {\n      type: String,\n      default: null,\n    },\n    popperClass: {\n      type: String,\n      default: '',\n    },\n    disabled: Boolean,\n  },\n  emits: ['update:modelValue', 'change'],\n  setup(props, { emit }) {\n    const { prefix } = usePrefix()\n    const hlSelector = ref(null)\n    const selectorTree = ref(null)\n    const treeStyle = ref<Indexable<string>>({})\n    const propsLabel = computed(() => {\n      return props.treeProps.props.label || 'label'\n    })\n\n    const formItem = inject(formItemContextKey, {} as FormItemContext)\n\n    watch(() => props.modelValue, () => {\n      setSelected()\n    })\n    watch(() => props.treeProps.data, () => {\n      setSelected()\n    })\n\n    const valueChange = value => {\n      emit('update:modelValue', value)\n      emit('change', value)\n      formItem.validate?.(FormItemEvents.change)\n    }\n    const nodeClick = (data, node, component) => {\n      const treeProps = props.treeProps\n      const children = data[treeProps.props.children]\n      const value = data[treeProps.nodeKey]\n      if (\n        ((children && children.length) ||\n          (treeProps.lazy && !data['isLeaf'])) && !treeProps.checkStrictly\n      ) {\n        component.proxy.handleExpandIconClick()\n      } else if (!treeProps.showCheckbox && !data.disabled) {\n        if (value !== props.modelValue) {\n          valueChange(value)\n        }\n        hlSelector.value.togglePopperVisible(false)\n      }\n    }\n    const checkChange = () => {\n      const leafOnly = !props.treeProps.checkStrictly\n      const keys = selectorTree.value.getCheckedKeys(leafOnly)\n      valueChange(keys)\n    }\n    const setSelected = () => {\n      if (props.treeProps.showCheckbox && Array.isArray(props.modelValue)) {\n        selectorTree.value.setCheckedKeys(props.modelValue)\n        const selectedNodes = selectorTree.value.getCheckedNodes(!props.treeProps.checkStrictly)\n        hlSelector.value.setValue(selectedNodes)\n      } else {\n        const selectedNode = selectorTree.value.getNode(props.modelValue)\n        hlSelector.value.setValue(selectedNode ? selectedNode.data[propsLabel.value] : '')\n      }\n    }\n    const resizePopper = (inputWrapper: HTMLElement) => {\n      treeStyle.value.width = 30 + inputWrapper.offsetWidth + 'px'\n    }\n    const onInput = val => {\n      if (props.filterable) {\n        selectorTree.value.filter(val)\n      }\n    }\n    const onClear = () => {\n      if (props.filterable) {\n        selectorTree.value.filter('')\n      }\n      selectorTree.value.setCheckedNodes([])\n      valueChange(props.treeProps.showCheckbox ? [] : '')\n    }\n    const removeTag = tag => {\n      let treeNodes = selectorTree.value.getCheckedNodes(!props.treeProps.checkStrictly)\n      treeNodes = treeNodes.filter(n => n !== tag.text)\n      selectorTree.value.setCheckedNodes(treeNodes)\n    }\n\n    onMounted(() => {\n      setSelected()\n    })\n\n    return {\n      prefix,\n      hlSelector,\n      selectorTree,\n      treeStyle,\n      propsLabel,\n      onInput,\n      onClear,\n      removeTag,\n      nodeClick,\n      checkChange,\n      resizePopper,\n    }\n  },\n})\n</script>\n"],"names":["_openBlock"],"mappings":";;;;;AA8DA,MAAK,YAAa,gBAAa;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA;AAAA,EAEF,OAAO;AAAA,IACL,YAAY,CAAC,OAAO,QAAQ,QAAQ;AAAA,IACpC,WAAW;AAAA,IACX,WAAW;AAAA,IACX,aAAa;AAAA,IACb,WAAW;AAAA,IACX,cAAc;AAAA,IACd,YAAY;AAAA,IACZ,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA;AAAA,IAEX,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA;AAAA,IAEX,UAAU;AAAA;AAAA,EAEZ,OAAO,CAAC,qBAAqB;AAAA,EAC7B,MAAM,OAAO,EAAE,QAAQ;AACrB,UAAM,EAAE,WAAW;AACnB,UAAM,aAAa,IAAI;AACvB,UAAM,eAAe,IAAI;AACzB,UAAM,YAAY,IAAuB;AACzC,UAAM,aAAa,SAAS,MAAM;AAChC,aAAO,MAAM,UAAU,MAAM,SAAS;AAAA;AAGxC,UAAM,WAAW,OAAO,oBAAoB;AAE5C,UAAM,MAAM,MAAM,YAAY,MAAM;AAClC;AAAA;AAEF,UAAM,MAAM,MAAM,UAAU,MAAM,MAAM;AACtC;AAAA;AAGF,UAAM,cAAc,WAAS;AAC3B;AACA,WAAK;AACL,0BAAoB;AAAe;AAErC;AACE;AACA,YAAM;AACN,YAAM,QAAQ;AACd,0CAEK;AAEH;AAAgB,iBACP,CAAC,2BAA2B;AACrC,4BAAoB,YAAY;AAC9B,sBAAY;AAAA;AAEd;AAAqC;AAAA;AAGzC;AACE,wBAAkB,MAAM;AACxB,YAAM,yCAAyC;AAC/C;AAAY;AAEd;AACE,UAAI;AACF,0CAAkC,MAAM;AACxC;AACA;AAA0B;AAE1B;AACA,8DAAsD;AAAyB;AAAA;AAGnF;AACE,sBAAgB;AAAwC;AAE1D;AACE,UAAI;AACF;AAA0B;AAAA;AAG9B;AACE,UAAI;AACF;AAA0B;AAE5B;AACA,kBAAY,MAAM;AAA8B;AAElD;AACE,UAAI,YAAY;AAChB,mCAA6B;AAC7B;AAAmC;AAGrC;AACE;AAAA;AAGF;AAAO;AACL,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;;;;;;;;;AAjIU,SA/CRA;AAAA,IACH;AAAgD,IAChD;AAAM,IACN,UAAU;AAAA,IACV;AAAW,IACX;AAAa,IACb,WAAW;AAAA,IACX;AAAe,IACf;AAAY,IACZ,UAAU;AAAU,IACpB,UAAQ;AAAA,IACR;AAAO,IACP,SAAO;AAAA,IACP,aAAY;AAAA;;AAuBI;AAAA;AAnBT,QACJ;AAAW,QACX,cAAW;AAAA;;AAgBD;AAAA;AAbJ,YACJ;AAAM,YACN;AAAS;AACQ;AACT,YACP;AAAY,YACZ;AAAc;YAEJ;AAAqB;AAGvB;AAFiB,gBAAa;AAAA;AAE9B;AADsC;AAAA;AAAA;;;;;;;AAMhC,iBAIZ;AAAA;AAD8B;AAAA;AAAA;;;;AAGP;AACH,QAA3B;AAA2B;AAAA;;;;;;;;"}