hongluan-business-ui
Version:
Hongluan Business Component Library for Vue 3
1 lines • 6.7 kB
Source Map (JSON)
{"version":3,"file":"target-panel.mjs","sources":["../../../../../../packages/components/tree-transfer/src/target-panel.vue"],"sourcesContent":["<template>\n <div class=\"transfer-panel\">\n <div class=\"panel-header\">\n {{ title }}\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 block\n fill\n :placeholder=\"placeholder\"\n @mouseenter=\"inputHover = true\"\n @mouseleave=\"inputHover = false\"\n >\n <template #suffix>\n <i :class=\"['input-close', showClose]\" @click=\"clearQuery\"></i>\n </template>\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 && data.length > 0\"\n v-model=\"checked\"\n dir=\"vertical\"\n gap=\"0\"\n :class=\"{ 'panel-list': true, 'has-filterable': filterable }\"\n :custom=\"true\"\n >\n <hl-checkbox\n v-for=\"item in filteredData\"\n :key=\"item[keyProp]\"\n class=\"item\"\n :label=\"item[keyProp]\"\n :disabled=\"item[disabledProp]\"\n >\n <option-content\n :option=\"optionRender(item)\"\n />\n <hl-icon v-if=\"!item[disabledProp]\" class=\"item-close\" @click=\"$emit('checked-change', item[keyProp])\">\n <system-close />\n </hl-icon>\n </hl-checkbox>\n </hl-checkbox-group>\n <p v-show=\"hasNoMatch || data.length === 0\" 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\">\nimport { computed, defineComponent, ref } from 'vue'\nimport { HlCheckbox, HlCheckboxGroup, HlInput, HlIcon, SystemClose, SystemSearch, useLocale } from 'hongluan-ui'\nimport { useTreeProp } from './useTreeProp'\nimport type { TreeProps } from '@hongluan-business-ui/components/tree-selector'\n\nexport default defineComponent({\n name: 'TransferPanel',\n components: {\n HlCheckboxGroup,\n HlCheckbox,\n HlInput,\n HlIcon,\n SystemClose,\n SystemSearch,\n OptionContent: ({ option }) => option,\n },\n props: {\n data: {\n type: Array,\n default: () => [],\n },\n optionRender: Function,\n placeholder: String,\n title: String,\n filterable: Boolean,\n filterMethod: Function,\n props: Object,\n },\n emits: ['checked-change'],\n setup(props, { slots }) {\n const { t } = useLocale()\n const query = ref('')\n const inputHover = ref(false)\n const checked = ref([])\n\n const { key: keyProp, label: labelProp, disabled: disabledProp } = useTreeProp({ props } as unknown as TreeProps)\n\n const filteredData = computed(() => {\n return props.data.filter(item => {\n if (typeof props.filterMethod === 'function') {\n return props.filterMethod(query.value, item)\n } else {\n const label = item[labelProp.value] || item[keyProp.value].toString()\n return label.toLowerCase().includes(query.value.toLowerCase())\n }\n })\n })\n const hasNoMatch = computed(() => {\n return query.value.length > 0 && filteredData.value.length === 0\n })\n const showClose = computed(() => {\n return query.value.length > 0 && inputHover.value ? 'show-close' : ''\n })\n const hasFooter = computed(() => !!slots.default()[0].children.length)\n\n const clearQuery = () => {\n if (showClose.value === 'show-close') {\n query.value = ''\n }\n }\n\n return {\n t,\n checked,\n keyProp,\n labelProp,\n disabledProp,\n query,\n inputHover,\n filteredData,\n\n hasNoMatch,\n showClose,\n hasFooter,\n clearQuery,\n }\n },\n})\n</script>\n"],"names":["_createElementBlock","_createElementVNode","_toDisplayString","_normalizeClass","_createVNode","_withCtx","_Fragment","_createBlock","_renderSlot"],"mappings":"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"}