hongluan-ui
Version:
Hongluan Component Library for Vue 3
1 lines • 4.97 kB
Source Map (JSON)
{"version":3,"file":"transfer-panel.mjs","sources":["../../../../../../packages/components/transfer/src/transfer-panel.vue"],"sourcesContent":["<template>\n <div :class=\"['transfer-panel', mark]\">\n <div v-if=\"!showButtons\" class=\"panel-header\">\n <span>{{ title }}</span>\n <span class=\"count\">{{ checkedSummary }}</span>\n </div>\n <div v-else class=\"panel-header\">\n <hl-checkbox\n v-model=\"allChecked\"\n :validate-event=\"false\"\n :indeterminate=\"isIndeterminate\"\n @change=\"handleAllCheckedChange\"\n >\n {{ title }}\n </hl-checkbox>\n <span class=\"count\">{{ checkedSummary }}</span>\n </div>\n\n <div\n :class=\"['panel-body', hasFooter ? 'is-with-footer' : '']\"\n >\n <div\n v-if=\"filterable\"\n class=\"panel-filter\"\n >\n <hl-input\n v-model=\"query\"\n class=\"no-verify\"\n block\n clearable\n :placeholder=\"placeholder\"\n :validate-event=\"false\"\n v-bind=\"filterProps\"\n @mouseenter=\"inputHover = true\"\n @mouseleave=\"inputHover = false\"\n >\n <template #prefix>\n <hl-icon><system-search /></hl-icon>\n </template>\n </hl-input>\n </div>\n <hl-checkbox-group\n v-show=\"!hasNoMatch && !isEmpty(data)\"\n v-model=\"checked\"\n dir=\"vertical\"\n :validate-event=\"false\"\n :class=\"{ 'panel-list': true, 'has-filterable': filterable }\"\n :custom=\"!showButtons\"\n >\n <hl-checkbox\n v-for=\"item in filteredData\"\n :key=\"item[propsAlias.key]\"\n class=\"item\"\n :label=\"item[propsAlias.key]\"\n :disabled=\"item[propsAlias.disabled]\"\n :validate-event=\"false\"\n >\n <option-content\n :option=\"optionRender?.(item)\"\n />\n <!-- <i v-if=\"mark === 'right' && !item[disabledProp]\" class=\"system-icon error-fill\"></i> -->\n </hl-checkbox>\n </hl-checkbox-group>\n <p v-show=\"hasNoMatch || isEmpty(data)\" class=\"panel-empty\">\n {{ hasNoMatch ? t('hl.transfer.noMatch') : t('hl.transfer.noData') }}\n </p>\n </div>\n <p v-if=\"hasFooter\" class=\"panel-footer\">\n <slot></slot>\n </p>\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, reactive, toRefs, useSlots } from 'vue'\nimport { isEmpty } from '@hongluan-ui/utils'\nimport { useLocale } from '@hongluan-ui/hooks'\nimport HlCheckbox from '@hongluan-ui/components/checkbox'\nimport HlCheckboxGroup from '@hongluan-ui/components/checkbox-group'\nimport HlInput from '@hongluan-ui/components/input'\nimport HlIcon from '@hongluan-ui/components/icon'\nimport { SystemClose, SystemSearch } from '@hongluan-ui/components/system-icon'\nimport { transferPanelEmits, transferPanelProps } from './transfer-panel'\nimport { useCheck, usePropsAlias } from './composables'\n\nimport type { VNode } from 'vue'\nimport type { TransferPanelState } from './transfer-panel'\n\ndefineOptions({\n name: 'TransferPanel',\n})\n\nconst props = defineProps(transferPanelProps)\nconst emit = defineEmits(transferPanelEmits)\nconst slots = useSlots()\n\nconst OptionContent = ({ option }: { option: VNode | VNode[]; }) => option\n\nconst { t } = useLocale()\n\nconst panelState = reactive<TransferPanelState>({\n checked: [],\n allChecked: false,\n query: '',\n inputHover: false,\n checkChangeByUser: true,\n})\n\nconst propsAlias = usePropsAlias(props)\n\nconst {\n filteredData,\n checkedSummary,\n isIndeterminate,\n handleAllCheckedChange,\n} = useCheck(props, panelState, emit)\n\nconst hasNoMatch = computed(\n () => !isEmpty(panelState.query) && isEmpty(filteredData.value),\n)\n\nconst hasFooter = computed(() => !isEmpty(slots.default!()[0].children))\nconst showClose = computed(() => {\n return panelState.query.length > 0 && panelState.inputHover ? 'show-close' : ''\n})\n\nconst { checked, allChecked, query, inputHover } = toRefs(panelState)\n\ndefineExpose({\n /** @description filter keyword */\n query,\n})\n</script>\n\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;oCAwFc;AAAA,EACZ,MAAM;AACR;;;;;;;AAIA,UAAM,QAAQ;AAEd,UAAM,gBAAgB,CAAC,EAAE,aAA2C;AAEpE,UAAM,EAAE,MAAM;AAEd,UAAM,aAAa,SAA6B;AAAA,MAC9C,SAAS;AAAC,MACV,YAAY;AAAA,MACZ,OAAO;AAAA,MACP,YAAY;AAAA,MACZ,mBAAmB;AAAA,KACpB;AAED,UAAM,aAAa,cAAc,KAAK;AAEtC,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,QACE,SAAS,OAAO,YAAY,IAAI;AAEpC,UAAM,aAAa,SACjB,MAAM,CAAC,QAAQ,WAAW,KAAK,KAAK,QAAQ,aAAa,KAAK,CAChE;AAEA,UAAM,YAAY,SAAS,MAAM,CAAC,QAAQ,MAAM,UAAW,GAAG,QAAQ,CAAC;AACvE,UAAM,YAAY,SAAS,MAAM;AAC/B,aAAO,WAAW,MAAM,SAAS,KAAK,WAAW,aAAa,eAAe;AAAA,KAC9E;AAED,UAAM,EAAE,SAAS,YAAY,OAAO,eAAe,OAAO,UAAU;AAEpE,WAAa;AAAA,MAEX;AAAA,KACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}