hongluan-ui
Version:
Hongluan Component Library for Vue 3
1 lines • 7.11 kB
Source Map (JSON)
{"version":3,"file":"transfer2.mjs","sources":["../../../../../../packages/components/transfer/src/transfer.vue"],"sourcesContent":["<template>\n <div\n :class=\"[\n namespace,\n !showButtons ? 'no-buttons' : '',\n block ? 'block' : '',\n ]\"\n :style=\"[\n gap ? `--transfer-gap: ${gap}` : '',\n listGap ? `--transfer-list-gap: ${listGap}` : '',\n itemGap ? `--transfer-item-gap: ${itemGap}` : '',\n ]\"\n >\n <transfer-panel\n ref=\"leftPanel\"\n mark=\"left\"\n :data=\"sourceData\"\n :option-render=\"optionRender\"\n :placeholder=\"panelFilterPlaceholder\"\n :title=\"leftPanelTitle\"\n :filterable=\"filterable\"\n :format=\"format\"\n :filter-method=\"filterMethod\"\n :filter-props=\"filterProps\"\n :confirm-method=\"confirmMethod\"\n :default-checked=\"leftDefaultChecked\"\n :show-buttons=\"showButtons\"\n :props=\"props.props\"\n @checked-change=\"onSourceCheckedChange\"\n >\n <slot name=\"left-footer\"></slot>\n </transfer-panel>\n <slot name=\"buttons\">\n <hl-group\n v-if=\"showButtons\"\n align=\"items-center\"\n dir=\"vertical\"\n gap=\"var(--md)\"\n class=\"transfer-buttons\"\n >\n <hl-button\n :class=\"['transfer-button', hasButtonTexts ? 'is-with-texts' : '']\"\n :disabled=\"isEmpty(checkedState.rightChecked)\"\n :equal=\"!hasButtonTexts\"\n icon-position=\"left\"\n @click=\"addToLeft\"\n >\n <hl-icon>\n <system-arrow-left />\n </hl-icon>\n <span v-if=\"!isUndefined(buttonTexts[0])\">{{ buttonTexts[0] }}</span>\n </hl-button>\n <hl-button\n :class=\"['transfer-button', hasButtonTexts ? 'is-with-texts' : '']\"\n :disabled=\"isEmpty(checkedState.leftChecked)\"\n :equal=\"!hasButtonTexts\"\n icon-position=\"right\"\n @click=\"addToRight\"\n >\n <span v-if=\"!isUndefined(buttonTexts[1])\">{{ buttonTexts[1] }}</span>\n <hl-icon>\n <system-arrow-right />\n </hl-icon>\n </hl-button>\n </hl-group>\n </slot>\n <transfer-panel\n ref=\"rightPanel\"\n mark=\"right\"\n :data=\"targetData\"\n :option-render=\"optionRender\"\n :placeholder=\"panelFilterPlaceholder\"\n :filterable=\"filterable\"\n :format=\"format\"\n :filter-method=\"filterMethod\"\n :filter-props=\"filterProps\"\n :confirm-method=\"confirmMethod\"\n :title=\"rightPanelTitle\"\n :default-checked=\"rightDefaultChecked\"\n :show-buttons=\"showButtons\"\n :props=\"props.props\"\n @checked-change=\"onTargetCheckedChange\"\n >\n <slot name=\"right-footer\"></slot>\n </transfer-panel>\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, h, reactive, ref, useSlots, watch } from 'vue'\nimport { debugWarn, isEmpty, isUndefined } from '@hongluan-ui/utils'\nimport { useFormItem, useLocale, useNamespace } from '@hongluan-ui/hooks'\nimport { FormItemEvents } from '@hongluan-ui/tokens'\nimport HlGroup from '@hongluan-ui/components/group'\nimport HlButton from '@hongluan-ui/components/button'\nimport HlIcon from '@hongluan-ui/components/icon'\nimport { SystemArrowLeft, SystemArrowRight } from '@hongluan-ui/components/system-icon'\nimport { transferEmits, transferProps } from './transfer'\nimport {\n useCheckedChange,\n useComputedData,\n useMove,\n usePropsAlias,\n} from './composables'\nimport TransferPanel from './transfer-panel.vue'\n\nimport type {\n TransferCheckedState,\n TransferDataItem,\n TransferDirection,\n} from './transfer'\nimport type { TransferPanelInstance } from './transfer-panel'\n\n\ndefineOptions({\n name: 'Transfer',\n})\n\nconst props = defineProps(transferProps)\nconst emit = defineEmits(transferEmits)\nconst slots = useSlots()\n\nconst { t } = useLocale()\nconst { namespace } = useNamespace('transfer')\nconst { formItem } = useFormItem()\n\nconst checkedState = reactive<TransferCheckedState>({\n leftChecked: [],\n rightChecked: [],\n})\n\nconst propsAlias = usePropsAlias(props)\n\nconst { sourceData, targetData } = useComputedData(props)\n\nconst { addToLeft, addToRight } = useMove(props, checkedState, emit)\n\nconst { onSourceCheckedChange, onTargetCheckedChange } = useCheckedChange(\n checkedState,\n emit,\n props,\n addToLeft,\n addToRight,\n)\n\nconst leftPanel = ref<TransferPanelInstance>()\nconst rightPanel = ref<TransferPanelInstance>()\n\nconst clearQuery = (which: TransferDirection) => {\n switch (which) {\n case 'left':\n leftPanel.value!.query = ''\n break\n case 'right':\n rightPanel.value!.query = ''\n break\n }\n}\n\nconst hasButtonTexts = computed(() => props.buttonTexts.length === 2)\n\nconst leftPanelTitle = computed(\n () => props.titles[0] || t('hl.transfer.titles.0'),\n)\n\nconst rightPanelTitle = computed(\n () => props.titles[1] || t('hl.transfer.titles.1'),\n)\n\nconst panelFilterPlaceholder = computed(\n () => props.filterPlaceholder || t('hl.transfer.filterPlaceholder'),\n)\n\nwatch(\n () => props.modelValue,\n () => {\n if (props.validateEvent) {\n formItem?.validate?.(FormItemEvents.change).catch(err => debugWarn(err))\n }\n },\n)\n\nconst optionRender = computed(() => (option: TransferDataItem) => {\n if (props.renderContent) return props.renderContent(h, option)\n\n if (slots.default) return slots.default({ option })\n\n return h(\n 'span',\n option[propsAlias.value.label] || option[propsAlias.value.key],\n )\n})\n\ndefineExpose({\n /** @description clear the filter keyword of a certain panel */\n clearQuery,\n /** @description left panel ref */\n leftPanel,\n /** @description left panel ref */\n rightPanel,\n /** @description add items to left */\n addToLeft,\n /** @description add items to right */\n addToRight,\n})\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;oCAkHc;AAAA,EACZ,MAAM;AACR;;;;;;;AAIA,UAAM,QAAQ;AAEd,UAAM,EAAE,MAAM;AACd,UAAM,EAAE,cAAc,aAAa,UAAU;AAC7C,UAAM,EAAE,aAAa;AAErB,UAAM,eAAe,SAA+B;AAAA,MAClD,aAAa;AAAC,MACd,cAAc;AAAC,KAChB;AAED,UAAM,aAAa,cAAc,KAAK;AAEtC,UAAM,EAAE,YAAY,eAAe,gBAAgB,KAAK;AAExD,UAAM,EAAE,WAAW,eAAe,QAAQ,OAAO,cAAc,IAAI;AAEnE,UAAM,EAAE,uBAAuB,0BAA0B,iBACvD,cACA,MACA,OACA,WACA,UACF;AAEA,UAAM,YAAY;AAClB,UAAM,aAAa;AAEnB,UAAM,aAAa,CAAC,UAA6B;AAC/C,cAAQ;AAAA,aACD;AACH,oBAAU,MAAO,QAAQ;AACzB;AAAA,aACG;AACH,qBAAW,MAAO,QAAQ;AAC1B;AAAA;AAAA;AAIN,UAAM,iBAAiB,SAAS,MAAM,MAAM,YAAY,WAAW,CAAC;AAEpE,UAAM,iBAAiB,SACrB,MAAM,MAAM,OAAO,MAAM,EAAE,sBAAsB,CACnD;AAEA,UAAM,kBAAkB,SACtB,MAAM,MAAM,OAAO,MAAM,EAAE,sBAAsB,CACnD;AAEA,UAAM,yBAAyB,SAC7B,MAAM,MAAM,qBAAqB,EAAE,+BAA+B,CACpE;AAEA,UACE,MAAM,MAAM,YACZ,MAAM;AACJ,UAAI;AACF,6BAAqB;AAAkD;AACzE;AAIJ;AACE,UAAI;AAAqB,eAAO;AAEhC;AAAmB,eAAO;AAE1B,eACE,0BACkB;AACpB;AAGF;AAAa;AAEX,MAEA;AAAA,MAEA;AAAA,MAEA;AAAA,MAEA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}