element-plus 1.3.0-beta.2 → 1.3.0-beta.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.full.js +25 -10
- package/dist/index.full.min.js +4 -4
- package/dist/index.full.min.js.map +1 -1
- package/dist/index.full.min.mjs +4 -4
- package/dist/index.full.min.mjs.map +1 -1
- package/dist/index.full.mjs +25 -10
- package/es/components/alert/index.mjs +2 -2
- package/es/components/alert/src/alert.mjs +5 -37
- package/es/components/alert/src/alert.mjs.map +1 -1
- package/es/components/alert/src/alert.vue_vue_type_script_lang.mjs +1 -1
- package/es/components/alert/src/alert2.mjs +37 -5
- package/es/components/alert/src/alert2.mjs.map +1 -1
- package/es/components/autocomplete/src/index.vue_vue_type_script_lang.mjs.map +1 -1
- package/es/components/autocomplete/src/index.vue_vue_type_template_id_2f09f285_lang.mjs +1 -0
- package/es/components/autocomplete/src/index.vue_vue_type_template_id_2f09f285_lang.mjs.map +1 -1
- package/es/components/badge/index.mjs +2 -2
- package/es/components/badge/src/badge.mjs +5 -20
- package/es/components/badge/src/badge.mjs.map +1 -1
- package/es/components/badge/src/badge.vue_vue_type_script_lang.mjs +1 -1
- package/es/components/badge/src/badge2.mjs +20 -5
- package/es/components/badge/src/badge2.mjs.map +1 -1
- package/es/components/color-picker/src/index.vue_vue_type_script_lang.mjs.map +1 -1
- package/es/components/color-picker/src/index.vue_vue_type_template_id_46a474d5_lang.mjs +2 -1
- package/es/components/color-picker/src/index.vue_vue_type_template_id_46a474d5_lang.mjs.map +1 -1
- package/es/components/dropdown/src/dropdown.mjs +1 -1
- package/es/components/dropdown/src/dropdown.vue_vue_type_script_lang.mjs.map +1 -1
- package/es/components/dropdown/src/dropdown.vue_vue_type_template_id_3ed790a5_lang.mjs +1 -0
- package/es/components/dropdown/src/dropdown.vue_vue_type_template_id_3ed790a5_lang.mjs.map +1 -1
- package/es/components/index.mjs +5 -5
- package/es/components/menu/src/menu-item.vue_vue_type_script_lang.mjs.map +1 -1
- package/es/components/menu/src/menu-item.vue_vue_type_template_id_aa755baa_lang.mjs +2 -1
- package/es/components/menu/src/menu-item.vue_vue_type_template_id_aa755baa_lang.mjs.map +1 -1
- package/es/components/popconfirm/src/popconfirm.vue_vue_type_script_lang.mjs.map +1 -1
- package/es/components/popconfirm/src/popconfirm.vue_vue_type_template_id_16409d25_lang.mjs +2 -1
- package/es/components/popconfirm/src/popconfirm.vue_vue_type_template_id_16409d25_lang.mjs.map +1 -1
- package/es/components/popover/src/index.vue_vue_type_script_lang.mjs.map +1 -1
- package/es/components/popover/src/index.vue_vue_type_template_id_15486cf0_lang.mjs +2 -1
- package/es/components/popover/src/index.vue_vue_type_template_id_15486cf0_lang.mjs.map +1 -1
- package/es/components/popover/src/popover.mjs +1 -1
- package/es/components/result/index.mjs +2 -2
- package/es/components/result/src/result.mjs +5 -30
- package/es/components/result/src/result.mjs.map +1 -1
- package/es/components/result/src/result.vue_vue_type_script_lang.mjs +1 -1
- package/es/components/result/src/result2.mjs +30 -5
- package/es/components/result/src/result2.mjs.map +1 -1
- package/es/components/select/src/select.vue_vue_type_script_lang.mjs.map +1 -1
- package/es/components/select/src/select.vue_vue_type_template_id_33774f85_lang.mjs +1 -0
- package/es/components/select/src/select.vue_vue_type_template_id_33774f85_lang.mjs.map +1 -1
- package/es/components/select-v2/src/select.vue_vue_type_script_lang.mjs.map +1 -1
- package/es/components/select-v2/src/select.vue_vue_type_template_id_13e598a4_lang.mjs +1 -0
- package/es/components/select-v2/src/select.vue_vue_type_template_id_13e598a4_lang.mjs.map +1 -1
- package/es/components/skeleton/index.mjs +2 -2
- package/es/components/skeleton/src/skeleton.mjs +5 -24
- package/es/components/skeleton/src/skeleton.mjs.map +1 -1
- package/es/components/skeleton/src/skeleton.vue_vue_type_script_lang.mjs +1 -1
- package/es/components/skeleton/src/skeleton2.mjs +24 -5
- package/es/components/skeleton/src/skeleton2.mjs.map +1 -1
- package/es/components/slider/src/button.vue_vue_type_script_lang.mjs.map +1 -1
- package/es/components/slider/src/button.vue_vue_type_template_id_9cd3e794_lang.mjs +2 -1
- package/es/components/slider/src/button.vue_vue_type_template_id_9cd3e794_lang.mjs.map +1 -1
- package/es/components/table/src/filter-panel.vue_vue_type_script_lang.mjs.map +1 -1
- package/es/components/table/src/filter-panel.vue_vue_type_template_id_fde1c940_lang.mjs +2 -1
- package/es/components/table/src/filter-panel.vue_vue_type_template_id_fde1c940_lang.mjs.map +1 -1
- package/es/components/time-picker/src/common/picker.vue_vue_type_script_lang.mjs +6 -2
- package/es/components/time-picker/src/common/picker.vue_vue_type_script_lang.mjs.map +1 -1
- package/es/components/time-picker/src/common/picker.vue_vue_type_template_id_1d54be91_lang.mjs +1 -0
- package/es/components/time-picker/src/common/picker.vue_vue_type_template_id_1d54be91_lang.mjs.map +1 -1
- package/es/components/tooltip/index.mjs +2 -2
- package/es/components/tooltip/src/content.vue_vue_type_script_lang.mjs +1 -1
- package/es/components/tooltip/src/tooltip.mjs +5 -61
- package/es/components/tooltip/src/tooltip.mjs.map +1 -1
- package/es/components/tooltip/src/tooltip.vue_vue_type_script_lang.mjs +1 -1
- package/es/components/tooltip/src/tooltip2.mjs +61 -5
- package/es/components/tooltip/src/tooltip2.mjs.map +1 -1
- package/es/components/tooltip/src/trigger.vue_vue_type_script_lang.mjs +1 -1
- package/es/index.mjs +5 -5
- package/es/version.d.ts +1 -1
- package/es/version.mjs +1 -1
- package/es/version.mjs.map +1 -1
- package/lib/components/alert/index.js +2 -2
- package/lib/components/alert/src/alert.js +5 -37
- package/lib/components/alert/src/alert.js.map +1 -1
- package/lib/components/alert/src/alert.vue_vue_type_script_lang.js +1 -1
- package/lib/components/alert/src/alert2.js +37 -5
- package/lib/components/alert/src/alert2.js.map +1 -1
- package/lib/components/autocomplete/src/index.vue_vue_type_script_lang.js.map +1 -1
- package/lib/components/autocomplete/src/index.vue_vue_type_template_id_2f09f285_lang.js +1 -0
- package/lib/components/autocomplete/src/index.vue_vue_type_template_id_2f09f285_lang.js.map +1 -1
- package/lib/components/badge/index.js +2 -2
- package/lib/components/badge/src/badge.js +5 -19
- package/lib/components/badge/src/badge.js.map +1 -1
- package/lib/components/badge/src/badge.vue_vue_type_script_lang.js +1 -1
- package/lib/components/badge/src/badge2.js +19 -5
- package/lib/components/badge/src/badge2.js.map +1 -1
- package/lib/components/color-picker/src/index.vue_vue_type_script_lang.js.map +1 -1
- package/lib/components/color-picker/src/index.vue_vue_type_template_id_46a474d5_lang.js +2 -1
- package/lib/components/color-picker/src/index.vue_vue_type_template_id_46a474d5_lang.js.map +1 -1
- package/lib/components/dropdown/src/dropdown.js +1 -1
- package/lib/components/dropdown/src/dropdown.vue_vue_type_script_lang.js.map +1 -1
- package/lib/components/dropdown/src/dropdown.vue_vue_type_template_id_3ed790a5_lang.js +1 -0
- package/lib/components/dropdown/src/dropdown.vue_vue_type_template_id_3ed790a5_lang.js.map +1 -1
- package/lib/components/index.js +5 -5
- package/lib/components/menu/src/menu-item.vue_vue_type_script_lang.js.map +1 -1
- package/lib/components/menu/src/menu-item.vue_vue_type_template_id_aa755baa_lang.js +2 -1
- package/lib/components/menu/src/menu-item.vue_vue_type_template_id_aa755baa_lang.js.map +1 -1
- package/lib/components/popconfirm/src/popconfirm.vue_vue_type_script_lang.js.map +1 -1
- package/lib/components/popconfirm/src/popconfirm.vue_vue_type_template_id_16409d25_lang.js +2 -1
- package/lib/components/popconfirm/src/popconfirm.vue_vue_type_template_id_16409d25_lang.js.map +1 -1
- package/lib/components/popover/src/index.vue_vue_type_script_lang.js.map +1 -1
- package/lib/components/popover/src/index.vue_vue_type_template_id_15486cf0_lang.js +2 -1
- package/lib/components/popover/src/index.vue_vue_type_template_id_15486cf0_lang.js.map +1 -1
- package/lib/components/popover/src/popover.js +1 -1
- package/lib/components/result/index.js +2 -2
- package/lib/components/result/src/result.js +5 -31
- package/lib/components/result/src/result.js.map +1 -1
- package/lib/components/result/src/result.vue_vue_type_script_lang.js +1 -1
- package/lib/components/result/src/result2.js +31 -5
- package/lib/components/result/src/result2.js.map +1 -1
- package/lib/components/select/src/select.vue_vue_type_script_lang.js.map +1 -1
- package/lib/components/select/src/select.vue_vue_type_template_id_33774f85_lang.js +1 -0
- package/lib/components/select/src/select.vue_vue_type_template_id_33774f85_lang.js.map +1 -1
- package/lib/components/select-v2/src/select.vue_vue_type_script_lang.js.map +1 -1
- package/lib/components/select-v2/src/select.vue_vue_type_template_id_13e598a4_lang.js +1 -0
- package/lib/components/select-v2/src/select.vue_vue_type_template_id_13e598a4_lang.js.map +1 -1
- package/lib/components/skeleton/index.js +2 -2
- package/lib/components/skeleton/src/skeleton.js +5 -23
- package/lib/components/skeleton/src/skeleton.js.map +1 -1
- package/lib/components/skeleton/src/skeleton.vue_vue_type_script_lang.js +1 -1
- package/lib/components/skeleton/src/skeleton2.js +23 -5
- package/lib/components/skeleton/src/skeleton2.js.map +1 -1
- package/lib/components/slider/src/button.vue_vue_type_script_lang.js.map +1 -1
- package/lib/components/slider/src/button.vue_vue_type_template_id_9cd3e794_lang.js +2 -1
- package/lib/components/slider/src/button.vue_vue_type_template_id_9cd3e794_lang.js.map +1 -1
- package/lib/components/table/src/filter-panel.vue_vue_type_script_lang.js.map +1 -1
- package/lib/components/table/src/filter-panel.vue_vue_type_template_id_fde1c940_lang.js +2 -1
- package/lib/components/table/src/filter-panel.vue_vue_type_template_id_fde1c940_lang.js.map +1 -1
- package/lib/components/time-picker/src/common/picker.vue_vue_type_script_lang.js +6 -2
- package/lib/components/time-picker/src/common/picker.vue_vue_type_script_lang.js.map +1 -1
- package/lib/components/time-picker/src/common/picker.vue_vue_type_template_id_1d54be91_lang.js +1 -0
- package/lib/components/time-picker/src/common/picker.vue_vue_type_template_id_1d54be91_lang.js.map +1 -1
- package/lib/components/tooltip/index.js +2 -2
- package/lib/components/tooltip/src/content.vue_vue_type_script_lang.js +1 -1
- package/lib/components/tooltip/src/tooltip.js +5 -62
- package/lib/components/tooltip/src/tooltip.js.map +1 -1
- package/lib/components/tooltip/src/tooltip.vue_vue_type_script_lang.js +1 -1
- package/lib/components/tooltip/src/tooltip2.js +62 -5
- package/lib/components/tooltip/src/tooltip2.js.map +1 -1
- package/lib/components/tooltip/src/trigger.vue_vue_type_script_lang.js +1 -1
- package/lib/index.js +5 -5
- package/lib/version.d.ts +1 -1
- package/lib/version.js +1 -1
- package/lib/version.js.map +1 -1
- package/package.json +2 -2
- package/web-types.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.vue_vue_type_template_id_46a474d5_lang.mjs","sources":["../../../../../../packages/components/color-picker/src/index.vue?vue&type=template&id=46a474d5&lang.js"],"sourcesContent":["<template>\n <el-tooltip\n ref=\"popper\"\n v-model:visible=\"showPicker\"\n :show-arrow=\"false\"\n :fallback-placements=\"['bottom', 'top', 'right', 'left']\"\n :offset=\"0\"\n :gpu-acceleration=\"false\"\n :popper-class=\"`el-color-picker__panel el-color-dropdown ${popperClass}`\"\n :stop-popper-mouse-event=\"false\"\n effect=\"light\"\n trigger=\"click\"\n transition=\"el-zoom-in-top\"\n >\n <template #content>\n <div v-click-outside=\"hide\">\n <div class=\"el-color-dropdown__main-wrapper\">\n <hue-slider ref=\"hue\" class=\"hue-slider\" :color=\"color\" vertical />\n <sv-panel ref=\"svPanel\" :color=\"color\" />\n </div>\n <alpha-slider v-if=\"showAlpha\" ref=\"alpha\" :color=\"color\" />\n <predefine\n v-if=\"predefine\"\n ref=\"predefine\"\n :color=\"color\"\n :colors=\"predefine\"\n />\n <div class=\"el-color-dropdown__btns\">\n <span class=\"el-color-dropdown__value\">\n <el-input\n v-model=\"customInput\"\n :validate-event=\"false\"\n size=\"small\"\n @keyup.enter=\"handleConfirm\"\n @blur=\"handleConfirm\"\n />\n </span>\n <el-button\n size=\"small\"\n type=\"text\"\n class=\"el-color-dropdown__link-btn\"\n @click=\"clear\"\n >\n {{ t('el.colorpicker.clear') }}\n </el-button>\n <el-button\n plain\n size=\"small\"\n class=\"el-color-dropdown__btn\"\n @click=\"confirmValue\"\n >\n {{ t('el.colorpicker.confirm') }}\n </el-button>\n </div>\n </div>\n </template>\n <template #default>\n <div\n :class=\"[\n 'el-color-picker',\n colorDisabled ? 'is-disabled' : '',\n colorSize ? `el-color-picker--${colorSize}` : '',\n ]\"\n >\n <div v-if=\"colorDisabled\" class=\"el-color-picker__mask\"></div>\n <div class=\"el-color-picker__trigger\" @click=\"handleTrigger\">\n <span\n class=\"el-color-picker__color\"\n :class=\"{ 'is-alpha': showAlpha }\"\n >\n <span\n class=\"el-color-picker__color-inner\"\n :style=\"{\n backgroundColor: displayedColor,\n }\"\n >\n <el-icon\n v-show=\"modelValue || showPanelColor\"\n class=\"el-color-picker__icon is-icon-arrow-down\"\n >\n <arrow-down />\n </el-icon>\n <el-icon\n v-if=\"!modelValue && !showPanelColor\"\n class=\"el-color-picker__empty is-icon-close\"\n >\n <close />\n </el-icon>\n </span>\n </span>\n </div>\n </div>\n </template>\n </el-tooltip>\n</template>\n\n<script lang=\"ts\">\nimport {\n computed,\n defineComponent,\n inject,\n nextTick,\n onMounted,\n provide,\n reactive,\n ref,\n watch,\n} from 'vue'\nimport debounce from 'lodash/debounce'\nimport ElButton from '@element-plus/components/button'\nimport ElIcon from '@element-plus/components/icon'\nimport { ClickOutside } from '@element-plus/directives'\nimport { elFormItemKey, elFormKey } from '@element-plus/tokens'\nimport { useLocale, useSize } from '@element-plus/hooks'\nimport ElTooltip from '@element-plus/components/tooltip'\nimport ElInput from '@element-plus/components/input'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'\nimport { isValidComponentSize } from '@element-plus/utils/validators'\nimport { Close, ArrowDown } from '@element-plus/icons-vue'\nimport AlphaSlider from './components/alpha-slider.vue'\nimport HueSlider from './components/hue-slider.vue'\nimport Predefine from './components/predefine.vue'\nimport SvPanel from './components/sv-panel.vue'\nimport Color from './color'\nimport { OPTIONS_KEY } from './useOption'\n\nimport type { PropType } from 'vue'\nimport type { ElFormContext, ElFormItemContext } from '@element-plus/tokens'\nimport type { ComponentSize } from '@element-plus/utils/types'\nimport type { IUseOptions } from './useOption'\n\nexport default defineComponent({\n name: 'ElColorPicker',\n components: {\n ElButton,\n ElTooltip,\n ElInput,\n ElIcon,\n Close,\n ArrowDown,\n SvPanel,\n HueSlider,\n AlphaSlider,\n Predefine,\n },\n directives: {\n ClickOutside,\n },\n props: {\n modelValue: String,\n showAlpha: Boolean,\n colorFormat: String,\n disabled: Boolean,\n size: {\n type: String as PropType<ComponentSize>,\n validator: isValidComponentSize,\n },\n popperClass: String,\n predefine: Array,\n },\n emits: ['change', 'active-change', UPDATE_MODEL_EVENT],\n setup(props, { emit }) {\n const { t } = useLocale()\n const elForm = inject(elFormKey, {} as ElFormContext)\n const elFormItem = inject(elFormItemKey, {} as ElFormItemContext)\n\n const hue = ref(null)\n const svPanel = ref(null)\n const alpha = ref(null)\n const popper = ref(null)\n // data\n const color = reactive(\n new Color({\n enableAlpha: props.showAlpha,\n format: props.colorFormat,\n })\n )\n const showPicker = ref(false)\n const showPanelColor = ref(false)\n const customInput = ref('')\n // computed\n const displayedColor = computed(() => {\n if (!props.modelValue && !showPanelColor.value) {\n return 'transparent'\n }\n return displayedRgb(color, props.showAlpha)\n })\n const colorSize = useSize()\n const colorDisabled = computed(() => {\n return props.disabled || elForm.disabled\n })\n\n const currentColor = computed(() => {\n return !props.modelValue && !showPanelColor.value ? '' : color.value\n })\n // watch\n watch(\n () => props.modelValue,\n (newVal) => {\n if (!newVal) {\n showPanelColor.value = false\n } else if (newVal && newVal !== color.value) {\n color.fromString(newVal)\n }\n }\n )\n watch(\n () => currentColor.value,\n (val) => {\n customInput.value = val\n emit('active-change', val)\n // showPanelColor.value = true\n }\n )\n\n watch(\n () => color.value,\n () => {\n if (!props.modelValue && !showPanelColor.value) {\n showPanelColor.value = true\n }\n }\n )\n\n // methods\n function displayedRgb(color, showAlpha) {\n if (!(color instanceof Color)) {\n throw Error('color should be instance of _color Class')\n }\n\n const { r, g, b } = color.toRgb()\n return showAlpha\n ? `rgba(${r}, ${g}, ${b}, ${color.get('alpha') / 100})`\n : `rgb(${r}, ${g}, ${b})`\n }\n\n function setShowPicker(value) {\n showPicker.value = value\n }\n\n const debounceSetShowPicker = debounce(setShowPicker, 100)\n\n function hide() {\n debounceSetShowPicker(false)\n resetColor()\n }\n\n function resetColor() {\n nextTick(() => {\n if (props.modelValue) {\n color.fromString(props.modelValue)\n } else {\n showPanelColor.value = false\n }\n })\n }\n\n function handleTrigger() {\n if (colorDisabled.value) return\n debounceSetShowPicker(!showPicker.value)\n }\n\n function handleConfirm() {\n color.fromString(customInput.value)\n }\n\n function confirmValue() {\n const value = color.value\n emit(UPDATE_MODEL_EVENT, value)\n emit('change', value)\n elFormItem.validate?.('change')\n debounceSetShowPicker(false)\n // check if modelValue change, if not change, then reset color.\n nextTick(() => {\n const newColor = new Color({\n enableAlpha: props.showAlpha,\n format: props.colorFormat,\n })\n newColor.fromString(props.modelValue)\n if (!color.compare(newColor)) {\n resetColor()\n }\n })\n }\n\n function clear() {\n debounceSetShowPicker(false)\n emit(UPDATE_MODEL_EVENT, null)\n emit('change', null)\n if (props.modelValue !== null) {\n elFormItem.validate?.('change')\n }\n resetColor()\n }\n\n onMounted(() => {\n if (props.modelValue) {\n color.fromString(props.modelValue)\n customInput.value = currentColor.value\n }\n })\n watch(\n () => showPicker.value,\n () => {\n nextTick(() => {\n hue.value?.update()\n svPanel.value?.update()\n alpha.value?.update()\n })\n }\n )\n\n provide<IUseOptions>(OPTIONS_KEY, {\n currentColor,\n })\n\n return {\n color: color as Color,\n colorDisabled,\n colorSize,\n displayedColor,\n showPanelColor,\n showPicker,\n customInput,\n handleConfirm,\n hide,\n handleTrigger,\n clear,\n confirmValue,\n t,\n hue,\n svPanel,\n alpha,\n popper,\n }\n },\n})\n</script>\n"],"names":["
|
|
1
|
+
{"version":3,"file":"index.vue_vue_type_template_id_46a474d5_lang.mjs","sources":["../../../../../../packages/components/color-picker/src/index.vue?vue&type=template&id=46a474d5&lang.js"],"sourcesContent":["<template>\n <el-tooltip\n ref=\"popper\"\n v-model:visible=\"showPicker\"\n :show-arrow=\"false\"\n :fallback-placements=\"['bottom', 'top', 'right', 'left']\"\n :offset=\"0\"\n :gpu-acceleration=\"false\"\n :popper-class=\"`el-color-picker__panel el-color-dropdown ${popperClass}`\"\n :stop-popper-mouse-event=\"false\"\n effect=\"light\"\n trigger=\"click\"\n transition=\"el-zoom-in-top\"\n persistent\n >\n <template #content>\n <div v-click-outside=\"hide\">\n <div class=\"el-color-dropdown__main-wrapper\">\n <hue-slider ref=\"hue\" class=\"hue-slider\" :color=\"color\" vertical />\n <sv-panel ref=\"svPanel\" :color=\"color\" />\n </div>\n <alpha-slider v-if=\"showAlpha\" ref=\"alpha\" :color=\"color\" />\n <predefine\n v-if=\"predefine\"\n ref=\"predefine\"\n :color=\"color\"\n :colors=\"predefine\"\n />\n <div class=\"el-color-dropdown__btns\">\n <span class=\"el-color-dropdown__value\">\n <el-input\n v-model=\"customInput\"\n :validate-event=\"false\"\n size=\"small\"\n @keyup.enter=\"handleConfirm\"\n @blur=\"handleConfirm\"\n />\n </span>\n <el-button\n size=\"small\"\n type=\"text\"\n class=\"el-color-dropdown__link-btn\"\n @click=\"clear\"\n >\n {{ t('el.colorpicker.clear') }}\n </el-button>\n <el-button\n plain\n size=\"small\"\n class=\"el-color-dropdown__btn\"\n @click=\"confirmValue\"\n >\n {{ t('el.colorpicker.confirm') }}\n </el-button>\n </div>\n </div>\n </template>\n <template #default>\n <div\n :class=\"[\n 'el-color-picker',\n colorDisabled ? 'is-disabled' : '',\n colorSize ? `el-color-picker--${colorSize}` : '',\n ]\"\n >\n <div v-if=\"colorDisabled\" class=\"el-color-picker__mask\"></div>\n <div class=\"el-color-picker__trigger\" @click=\"handleTrigger\">\n <span\n class=\"el-color-picker__color\"\n :class=\"{ 'is-alpha': showAlpha }\"\n >\n <span\n class=\"el-color-picker__color-inner\"\n :style=\"{\n backgroundColor: displayedColor,\n }\"\n >\n <el-icon\n v-show=\"modelValue || showPanelColor\"\n class=\"el-color-picker__icon is-icon-arrow-down\"\n >\n <arrow-down />\n </el-icon>\n <el-icon\n v-if=\"!modelValue && !showPanelColor\"\n class=\"el-color-picker__empty is-icon-close\"\n >\n <close />\n </el-icon>\n </span>\n </span>\n </div>\n </div>\n </template>\n </el-tooltip>\n</template>\n\n<script lang=\"ts\">\nimport {\n computed,\n defineComponent,\n inject,\n nextTick,\n onMounted,\n provide,\n reactive,\n ref,\n watch,\n} from 'vue'\nimport debounce from 'lodash/debounce'\nimport ElButton from '@element-plus/components/button'\nimport ElIcon from '@element-plus/components/icon'\nimport { ClickOutside } from '@element-plus/directives'\nimport { elFormItemKey, elFormKey } from '@element-plus/tokens'\nimport { useLocale, useSize } from '@element-plus/hooks'\nimport ElTooltip from '@element-plus/components/tooltip'\nimport ElInput from '@element-plus/components/input'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'\nimport { isValidComponentSize } from '@element-plus/utils/validators'\nimport { Close, ArrowDown } from '@element-plus/icons-vue'\nimport AlphaSlider from './components/alpha-slider.vue'\nimport HueSlider from './components/hue-slider.vue'\nimport Predefine from './components/predefine.vue'\nimport SvPanel from './components/sv-panel.vue'\nimport Color from './color'\nimport { OPTIONS_KEY } from './useOption'\n\nimport type { PropType } from 'vue'\nimport type { ElFormContext, ElFormItemContext } from '@element-plus/tokens'\nimport type { ComponentSize } from '@element-plus/utils/types'\nimport type { IUseOptions } from './useOption'\n\nexport default defineComponent({\n name: 'ElColorPicker',\n components: {\n ElButton,\n ElTooltip,\n ElInput,\n ElIcon,\n Close,\n ArrowDown,\n SvPanel,\n HueSlider,\n AlphaSlider,\n Predefine,\n },\n directives: {\n ClickOutside,\n },\n props: {\n modelValue: String,\n showAlpha: Boolean,\n colorFormat: String,\n disabled: Boolean,\n size: {\n type: String as PropType<ComponentSize>,\n validator: isValidComponentSize,\n },\n popperClass: String,\n predefine: Array,\n },\n emits: ['change', 'active-change', UPDATE_MODEL_EVENT],\n setup(props, { emit }) {\n const { t } = useLocale()\n const elForm = inject(elFormKey, {} as ElFormContext)\n const elFormItem = inject(elFormItemKey, {} as ElFormItemContext)\n\n const hue = ref(null)\n const svPanel = ref(null)\n const alpha = ref(null)\n const popper = ref(null)\n // data\n const color = reactive(\n new Color({\n enableAlpha: props.showAlpha,\n format: props.colorFormat,\n })\n )\n const showPicker = ref(false)\n const showPanelColor = ref(false)\n const customInput = ref('')\n // computed\n const displayedColor = computed(() => {\n if (!props.modelValue && !showPanelColor.value) {\n return 'transparent'\n }\n return displayedRgb(color, props.showAlpha)\n })\n const colorSize = useSize()\n const colorDisabled = computed(() => {\n return props.disabled || elForm.disabled\n })\n\n const currentColor = computed(() => {\n return !props.modelValue && !showPanelColor.value ? '' : color.value\n })\n // watch\n watch(\n () => props.modelValue,\n (newVal) => {\n if (!newVal) {\n showPanelColor.value = false\n } else if (newVal && newVal !== color.value) {\n color.fromString(newVal)\n }\n }\n )\n watch(\n () => currentColor.value,\n (val) => {\n customInput.value = val\n emit('active-change', val)\n // showPanelColor.value = true\n }\n )\n\n watch(\n () => color.value,\n () => {\n if (!props.modelValue && !showPanelColor.value) {\n showPanelColor.value = true\n }\n }\n )\n\n // methods\n function displayedRgb(color, showAlpha) {\n if (!(color instanceof Color)) {\n throw Error('color should be instance of _color Class')\n }\n\n const { r, g, b } = color.toRgb()\n return showAlpha\n ? `rgba(${r}, ${g}, ${b}, ${color.get('alpha') / 100})`\n : `rgb(${r}, ${g}, ${b})`\n }\n\n function setShowPicker(value) {\n showPicker.value = value\n }\n\n const debounceSetShowPicker = debounce(setShowPicker, 100)\n\n function hide() {\n debounceSetShowPicker(false)\n resetColor()\n }\n\n function resetColor() {\n nextTick(() => {\n if (props.modelValue) {\n color.fromString(props.modelValue)\n } else {\n showPanelColor.value = false\n }\n })\n }\n\n function handleTrigger() {\n if (colorDisabled.value) return\n debounceSetShowPicker(!showPicker.value)\n }\n\n function handleConfirm() {\n color.fromString(customInput.value)\n }\n\n function confirmValue() {\n const value = color.value\n emit(UPDATE_MODEL_EVENT, value)\n emit('change', value)\n elFormItem.validate?.('change')\n debounceSetShowPicker(false)\n // check if modelValue change, if not change, then reset color.\n nextTick(() => {\n const newColor = new Color({\n enableAlpha: props.showAlpha,\n format: props.colorFormat,\n })\n newColor.fromString(props.modelValue)\n if (!color.compare(newColor)) {\n resetColor()\n }\n })\n }\n\n function clear() {\n debounceSetShowPicker(false)\n emit(UPDATE_MODEL_EVENT, null)\n emit('change', null)\n if (props.modelValue !== null) {\n elFormItem.validate?.('change')\n }\n resetColor()\n }\n\n onMounted(() => {\n if (props.modelValue) {\n color.fromString(props.modelValue)\n customInput.value = currentColor.value\n }\n })\n watch(\n () => showPicker.value,\n () => {\n nextTick(() => {\n hue.value?.update()\n svPanel.value?.update()\n alpha.value?.update()\n })\n }\n )\n\n provide<IUseOptions>(OPTIONS_KEY, {\n currentColor,\n })\n\n return {\n color: color as Color,\n colorDisabled,\n colorSize,\n displayedColor,\n showPanelColor,\n showPicker,\n customInput,\n handleConfirm,\n hide,\n handleTrigger,\n clear,\n confirmValue,\n t,\n hue,\n svPanel,\n alpha,\n popper,\n }\n },\n})\n</script>\n"],"names":["_createElementVNode"],"mappings":";;;qBAiBa,KAAK,EAAC;qBAWN,KAAK,EAAC;;;;EAqCe;;;;;;;;;;;;;;;;wBAhEhC;IACE;IACQ,wBAAmB;;IAC1B;IACA;IACA;IACA;IACA;IACA;IACD;;IAEA;;;qBAIE;;;;YAEgB;iBAAe,EAAC;;YAA4B;;;;YAC/B;;;;;;;;;;SAInB;0BADR;;;cAGG,iBAAY;cACZ;;;;;;;;;kBAOO;;;;;;;YAON,IAAI;iBACC;;;;;;;;;;YAOL,IAAI;iBACC;;;;;;;;;;4CAjCe;;;;;QA2CvBA;;;;;;;;;;;;;;;;;mBAaU;;;;;;;;;;;;;gBAYI;;;;;;;;;;;"}
|
|
@@ -2,7 +2,7 @@ import { EVENT_CODE } from '../../../utils/aria.mjs';
|
|
|
2
2
|
import { buildProps, definePropType } from '../../../utils/props.mjs';
|
|
3
3
|
import '../../collection/index.mjs';
|
|
4
4
|
import '../../tooltip/index.mjs';
|
|
5
|
-
import { useTooltipTriggerProps, useTooltipContentProps } from '../../tooltip/src/
|
|
5
|
+
import { useTooltipTriggerProps, useTooltipContentProps } from '../../tooltip/src/tooltip2.mjs';
|
|
6
6
|
import { createCollectionWithScope } from '../../collection/src/collection.mjs';
|
|
7
7
|
|
|
8
8
|
const dropdownProps = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dropdown.vue_vue_type_script_lang.mjs","sources":["../../../../../../packages/components/dropdown/src/dropdown.vue"],"sourcesContent":["<template>\n <div class=\"el-dropdown\">\n <el-tooltip\n ref=\"popperRef\"\n :effect=\"effect\"\n :fallback-placements=\"['bottom', 'top', 'right', 'left']\"\n :gpu-acceleration=\"false\"\n :hide-after=\"hideTimeout\"\n :manual-mode=\"true\"\n :placement=\"placement\"\n :popper-class=\"`el-dropdown__popper ${popperClass}`\"\n :reference-element=\"referenceElementRef?.$el\"\n :trigger=\"trigger\"\n :show-after=\"showTimeout\"\n :stop-popper-mouse-event=\"false\"\n :virtual-ref=\"triggeringElementRef\"\n :virtual-triggering=\"splitButton\"\n append-to-body\n pure\n transition=\"el-zoom-in-top\"\n @show=\"$emit('visible-change', true)\"\n @hide=\"$emit('visible-change', false)\"\n >\n <template #content>\n <el-scrollbar\n ref=\"scrollbar\"\n :wrap-style=\"wrapStyle\"\n tag=\"ul\"\n view-class=\"el-dropdown__list\"\n >\n <el-focus-trap trapped @mount-on-focus=\"onMountOnFocus\">\n <el-roving-focus-group\n :loop=\"loop\"\n :current-tab-id=\"currentTabId\"\n orientation=\"horizontal\"\n @current-tab-id-change=\"handleCurrentTabIdChange\"\n @entry-focus=\"handleEntryFocus\"\n >\n <el-dropdown-collection>\n <slot name=\"dropdown\"></slot>\n </el-dropdown-collection>\n </el-roving-focus-group>\n </el-focus-trap>\n </el-scrollbar>\n </template>\n <template v-if=\"!splitButton\" #default>\n <div :class=\"dropdownTriggerKls\">\n <slot name=\"default\" />\n </div>\n </template>\n </el-tooltip>\n <template v-if=\"splitButton\">\n <el-button-group>\n <el-button\n ref=\"referenceElementRef\"\n :size=\"dropdownSize\"\n :type=\"type\"\n @click=\"handlerMainButtonClick\"\n >\n <slot name=\"default\" />\n </el-button>\n <el-button\n ref=\"triggeringElementRef\"\n :size=\"dropdownSize\"\n :type=\"type\"\n class=\"el-dropdown__caret-button\"\n >\n <el-icon class=\"el-dropdown__icon\"><arrow-down /></el-icon>\n </el-button>\n </el-button-group>\n </template>\n </div>\n</template>\n<script lang=\"ts\">\nimport {\n computed,\n defineComponent,\n getCurrentInstance,\n provide,\n ref,\n toRef,\n unref,\n} from 'vue'\nimport ElButton from '@element-plus/components/button'\nimport ElTooltip from '@element-plus/components/tooltip'\nimport ElScrollbar from '@element-plus/components/scrollbar'\nimport ElIcon from '@element-plus/components/icon'\nimport ElFocusTrap from '@element-plus/components/focus-trap'\nimport ElRovingFocusGroup from '@element-plus/components/roving-focus-group'\nimport { addUnit } from '@element-plus/utils/util'\nimport { ArrowDown } from '@element-plus/icons-vue'\nimport { useSize } from '@element-plus/hooks'\nimport { ElCollection as ElDropdownCollection, dropdownProps } from './dropdown'\nimport { DROPDOWN_INJECTION_KEY } from './tokens'\n\nimport type { CSSProperties } from 'vue'\n\nconst { ButtonGroup: ElButtonGroup } = ElButton\n\nexport default defineComponent({\n name: 'ElDropdown',\n components: {\n ElButton,\n ElFocusTrap,\n ElButtonGroup,\n ElScrollbar,\n ElDropdownCollection,\n ElTooltip,\n ElRovingFocusGroup,\n ElIcon,\n ArrowDown,\n },\n props: dropdownProps,\n emits: ['visible-change', 'click', 'command'],\n setup(props, { emit }) {\n const _instance = getCurrentInstance()\n\n const triggeringElementRef = ref()\n const referenceElementRef = ref()\n const popperRef = ref<InstanceType<typeof ElTooltip> | null>(null)\n const contentRef = ref<HTMLElement | null>(null)\n const visible = ref(false)\n const scrollbar = ref(null)\n const currentTabId = ref<string | null>(null)\n const isUsingKeyboard = ref(false)\n\n const wrapStyle = computed<CSSProperties>(() => ({\n maxHeight: addUnit(props.maxHeight),\n }))\n const dropdownTriggerKls = computed(() => [\n [dropdownSize.value ? `el-dropdown--${dropdownSize.value}` : ''],\n ])\n\n function handleClick() {\n popperRef.value?.onClose()\n }\n\n const dropdownSize = useSize()\n\n function commandHandler(...args: any[]) {\n emit('command', ...args)\n }\n\n function onItemEnter() {\n // NOOP for now\n }\n\n function onItemLeave() {\n const contentEl = unref(contentRef)\n\n contentEl?.focus()\n currentTabId.value = null\n }\n\n function handleCurrentTabIdChange(id: string) {\n currentTabId.value = id\n }\n\n function handleEntryFocus(e: Event) {\n if (!isUsingKeyboard.value) {\n e.preventDefault()\n e.stopImmediatePropagation()\n }\n }\n\n provide(DROPDOWN_INJECTION_KEY, {\n contentRef,\n isUsingKeyboard,\n onItemEnter,\n onItemLeave,\n })\n\n provide('elDropdown', {\n instance: _instance,\n dropdownSize,\n visible,\n handleClick,\n commandHandler,\n trigger: toRef(props, 'trigger'),\n hideOnClick: toRef(props, 'hideOnClick'),\n })\n\n const onMountOnFocus = (e: Event) => {\n e.preventDefault()\n contentRef.value?.focus?.({\n preventScroll: true,\n })\n }\n\n const handlerMainButtonClick = (event: MouseEvent) => {\n emit('click', event)\n }\n\n return {\n visible,\n scrollbar,\n wrapStyle,\n dropdownTriggerKls,\n dropdownSize,\n currentTabId,\n handleCurrentTabIdChange,\n handlerMainButtonClick,\n handleEntryFocus,\n onMountOnFocus,\n popperRef,\n triggeringElementRef,\n referenceElementRef,\n }\n },\n})\n</script>\n"],"names":["ElDropdownCollection","ElRovingFocusGroup"],"mappings":";;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"dropdown.vue_vue_type_script_lang.mjs","sources":["../../../../../../packages/components/dropdown/src/dropdown.vue"],"sourcesContent":["<template>\n <div class=\"el-dropdown\">\n <el-tooltip\n ref=\"popperRef\"\n :effect=\"effect\"\n :fallback-placements=\"['bottom', 'top', 'right', 'left']\"\n :gpu-acceleration=\"false\"\n :hide-after=\"hideTimeout\"\n :manual-mode=\"true\"\n :placement=\"placement\"\n :popper-class=\"`el-dropdown__popper ${popperClass}`\"\n :reference-element=\"referenceElementRef?.$el\"\n :trigger=\"trigger\"\n :show-after=\"showTimeout\"\n :stop-popper-mouse-event=\"false\"\n :virtual-ref=\"triggeringElementRef\"\n :virtual-triggering=\"splitButton\"\n append-to-body\n pure\n transition=\"el-zoom-in-top\"\n persistent\n @show=\"$emit('visible-change', true)\"\n @hide=\"$emit('visible-change', false)\"\n >\n <template #content>\n <el-scrollbar\n ref=\"scrollbar\"\n :wrap-style=\"wrapStyle\"\n tag=\"ul\"\n view-class=\"el-dropdown__list\"\n >\n <el-focus-trap trapped @mount-on-focus=\"onMountOnFocus\">\n <el-roving-focus-group\n :loop=\"loop\"\n :current-tab-id=\"currentTabId\"\n orientation=\"horizontal\"\n @current-tab-id-change=\"handleCurrentTabIdChange\"\n @entry-focus=\"handleEntryFocus\"\n >\n <el-dropdown-collection>\n <slot name=\"dropdown\"></slot>\n </el-dropdown-collection>\n </el-roving-focus-group>\n </el-focus-trap>\n </el-scrollbar>\n </template>\n <template v-if=\"!splitButton\" #default>\n <div :class=\"dropdownTriggerKls\">\n <slot name=\"default\" />\n </div>\n </template>\n </el-tooltip>\n <template v-if=\"splitButton\">\n <el-button-group>\n <el-button\n ref=\"referenceElementRef\"\n :size=\"dropdownSize\"\n :type=\"type\"\n @click=\"handlerMainButtonClick\"\n >\n <slot name=\"default\" />\n </el-button>\n <el-button\n ref=\"triggeringElementRef\"\n :size=\"dropdownSize\"\n :type=\"type\"\n class=\"el-dropdown__caret-button\"\n >\n <el-icon class=\"el-dropdown__icon\"><arrow-down /></el-icon>\n </el-button>\n </el-button-group>\n </template>\n </div>\n</template>\n<script lang=\"ts\">\nimport {\n computed,\n defineComponent,\n getCurrentInstance,\n provide,\n ref,\n toRef,\n unref,\n} from 'vue'\nimport ElButton from '@element-plus/components/button'\nimport ElTooltip from '@element-plus/components/tooltip'\nimport ElScrollbar from '@element-plus/components/scrollbar'\nimport ElIcon from '@element-plus/components/icon'\nimport ElFocusTrap from '@element-plus/components/focus-trap'\nimport ElRovingFocusGroup from '@element-plus/components/roving-focus-group'\nimport { addUnit } from '@element-plus/utils/util'\nimport { ArrowDown } from '@element-plus/icons-vue'\nimport { useSize } from '@element-plus/hooks'\nimport { ElCollection as ElDropdownCollection, dropdownProps } from './dropdown'\nimport { DROPDOWN_INJECTION_KEY } from './tokens'\n\nimport type { CSSProperties } from 'vue'\n\nconst { ButtonGroup: ElButtonGroup } = ElButton\n\nexport default defineComponent({\n name: 'ElDropdown',\n components: {\n ElButton,\n ElFocusTrap,\n ElButtonGroup,\n ElScrollbar,\n ElDropdownCollection,\n ElTooltip,\n ElRovingFocusGroup,\n ElIcon,\n ArrowDown,\n },\n props: dropdownProps,\n emits: ['visible-change', 'click', 'command'],\n setup(props, { emit }) {\n const _instance = getCurrentInstance()\n\n const triggeringElementRef = ref()\n const referenceElementRef = ref()\n const popperRef = ref<InstanceType<typeof ElTooltip> | null>(null)\n const contentRef = ref<HTMLElement | null>(null)\n const visible = ref(false)\n const scrollbar = ref(null)\n const currentTabId = ref<string | null>(null)\n const isUsingKeyboard = ref(false)\n\n const wrapStyle = computed<CSSProperties>(() => ({\n maxHeight: addUnit(props.maxHeight),\n }))\n const dropdownTriggerKls = computed(() => [\n [dropdownSize.value ? `el-dropdown--${dropdownSize.value}` : ''],\n ])\n\n function handleClick() {\n popperRef.value?.onClose()\n }\n\n const dropdownSize = useSize()\n\n function commandHandler(...args: any[]) {\n emit('command', ...args)\n }\n\n function onItemEnter() {\n // NOOP for now\n }\n\n function onItemLeave() {\n const contentEl = unref(contentRef)\n\n contentEl?.focus()\n currentTabId.value = null\n }\n\n function handleCurrentTabIdChange(id: string) {\n currentTabId.value = id\n }\n\n function handleEntryFocus(e: Event) {\n if (!isUsingKeyboard.value) {\n e.preventDefault()\n e.stopImmediatePropagation()\n }\n }\n\n provide(DROPDOWN_INJECTION_KEY, {\n contentRef,\n isUsingKeyboard,\n onItemEnter,\n onItemLeave,\n })\n\n provide('elDropdown', {\n instance: _instance,\n dropdownSize,\n visible,\n handleClick,\n commandHandler,\n trigger: toRef(props, 'trigger'),\n hideOnClick: toRef(props, 'hideOnClick'),\n })\n\n const onMountOnFocus = (e: Event) => {\n e.preventDefault()\n contentRef.value?.focus?.({\n preventScroll: true,\n })\n }\n\n const handlerMainButtonClick = (event: MouseEvent) => {\n emit('click', event)\n }\n\n return {\n visible,\n scrollbar,\n wrapStyle,\n dropdownTriggerKls,\n dropdownSize,\n currentTabId,\n handleCurrentTabIdChange,\n handlerMainButtonClick,\n handleEntryFocus,\n onMountOnFocus,\n popperRef,\n triggeringElementRef,\n referenceElementRef,\n }\n },\n})\n</script>\n"],"names":["ElDropdownCollection","ElRovingFocusGroup"],"mappings":";;;;;;;;;;;;;;;;AA8FA,mBAAmB,EAAE,aAAa,EAAE,GAAG,QAAQ,CAAC;;AAEhD,EAAE,MAAM,YAAY;;AAEpB,IAAI,QAAQ;;AAEZ,IAAI,aAAa;IACb,WAAW;0BACXA;IACA;wBACAC;IACA,MAAM;IACN,SAAS;;OAEN,EAAE;OACF,EAAE,CAAC;OACH,CAAC;IACJ,MAAM;;IAEN,MAAM;IACN,MAAM,SAAS,GAAG,GAAG,CAAC,IAAI,CAAC,CAAC;IAC5B,MAAM,UAAU,GAAG;IACnB,MAAM,OAAO,GAAG,GAAG,CAAC,KAAK,CAAC,CAAC;;IAE3B,MAAM,YAAY,GAAG,GAAG,CAAC,IAAI,CAAC,CAAC;IAC/B,MAAM,eAAe,GAAG,IAAI;IAC5B,MAAM,YAAY,QAAQ,CAAC,OAAO;MAChC,SAAS,EAAE,OAAO,CAAC,KAAK,CAAC,UAAU;KACpC,CAAC,CAAC,CAAC;IACJ,MAAM,kBAAkB;MACtB,CAAC,YAAY,CAAC,KAAK,GAAG,CAAC,aAAa,EAAE;KACvC,CAAC,CAAC;;MAED,IAAI,EAAE,CAAC;MACP,CAAC,EAAE,GAAG,SAAS,CAAC,KAAK,KAAK,IAAI,GAAG;KAClC;IACD,MAAM,YAAY,GAAG,OAAO,EAAE,CAAC;aACtB,eAAe,GAAG,IAAI,EAAE;;;IAGjC,SAAS,WAAW,GAAG;;IAEvB;;MAEE,SAAS,IAAI,IAAI,GAAG,KAAK,CAAC;;KAE3B;aACQ;;;IAGT,SAAS;MACP,IAAI,CAAC;;;OAGJ;;;MAGD,UAAU;MACV,eAAe;;;KAGhB,CAAC,CAAC;WACI,CAAC;;;MAGN,OAAO;MACP,WAAW;oBACG;aACP,EAAE,KAAK,CAAC,KAAK,EAAE;MACtB;;;MAGA,IAAI,EAAE,EAAE,EAAE,CAAC;MACX,CAAC,CAAC;MACF,CAAC,EAAE,GAAG,CAAC,EAAE,GAAG;QACV;OACD,CAAC,CAAC;KACJ;;MAEC,IAAI,CAAC,OAAO,EAAE,MAAM;MACpB;WACK;MACL,OAAO;MACP,SAAS;MACT,SAAS;MACT,kBAAkB;MAClB;;;MAGA,sBAAsB;MACtB,gBAAgB;MAChB,cAAc;eACL;MACT;;;;;;;;"}
|
|
@@ -31,6 +31,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
31
31
|
"append-to-body": "",
|
|
32
32
|
pure: "",
|
|
33
33
|
transition: "el-zoom-in-top",
|
|
34
|
+
persistent: "",
|
|
34
35
|
onShow: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("visible-change", true)),
|
|
35
36
|
onHide: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("visible-change", false))
|
|
36
37
|
}, createSlots({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dropdown.vue_vue_type_template_id_3ed790a5_lang.mjs","sources":["../../../../../../packages/components/dropdown/src/dropdown.vue?vue&type=template&id=3ed790a5&lang.js"],"sourcesContent":["<template>\n <div class=\"el-dropdown\">\n <el-tooltip\n ref=\"popperRef\"\n :effect=\"effect\"\n :fallback-placements=\"['bottom', 'top', 'right', 'left']\"\n :gpu-acceleration=\"false\"\n :hide-after=\"hideTimeout\"\n :manual-mode=\"true\"\n :placement=\"placement\"\n :popper-class=\"`el-dropdown__popper ${popperClass}`\"\n :reference-element=\"referenceElementRef?.$el\"\n :trigger=\"trigger\"\n :show-after=\"showTimeout\"\n :stop-popper-mouse-event=\"false\"\n :virtual-ref=\"triggeringElementRef\"\n :virtual-triggering=\"splitButton\"\n append-to-body\n pure\n transition=\"el-zoom-in-top\"\n @show=\"$emit('visible-change', true)\"\n @hide=\"$emit('visible-change', false)\"\n >\n <template #content>\n <el-scrollbar\n ref=\"scrollbar\"\n :wrap-style=\"wrapStyle\"\n tag=\"ul\"\n view-class=\"el-dropdown__list\"\n >\n <el-focus-trap trapped @mount-on-focus=\"onMountOnFocus\">\n <el-roving-focus-group\n :loop=\"loop\"\n :current-tab-id=\"currentTabId\"\n orientation=\"horizontal\"\n @current-tab-id-change=\"handleCurrentTabIdChange\"\n @entry-focus=\"handleEntryFocus\"\n >\n <el-dropdown-collection>\n <slot name=\"dropdown\"></slot>\n </el-dropdown-collection>\n </el-roving-focus-group>\n </el-focus-trap>\n </el-scrollbar>\n </template>\n <template v-if=\"!splitButton\" #default>\n <div :class=\"dropdownTriggerKls\">\n <slot name=\"default\" />\n </div>\n </template>\n </el-tooltip>\n <template v-if=\"splitButton\">\n <el-button-group>\n <el-button\n ref=\"referenceElementRef\"\n :size=\"dropdownSize\"\n :type=\"type\"\n @click=\"handlerMainButtonClick\"\n >\n <slot name=\"default\" />\n </el-button>\n <el-button\n ref=\"triggeringElementRef\"\n :size=\"dropdownSize\"\n :type=\"type\"\n class=\"el-dropdown__caret-button\"\n >\n <el-icon class=\"el-dropdown__icon\"><arrow-down /></el-icon>\n </el-button>\n </el-button-group>\n </template>\n </div>\n</template>\n<script lang=\"ts\">\nimport {\n computed,\n defineComponent,\n getCurrentInstance,\n provide,\n ref,\n toRef,\n unref,\n} from 'vue'\nimport ElButton from '@element-plus/components/button'\nimport ElTooltip from '@element-plus/components/tooltip'\nimport ElScrollbar from '@element-plus/components/scrollbar'\nimport ElIcon from '@element-plus/components/icon'\nimport ElFocusTrap from '@element-plus/components/focus-trap'\nimport ElRovingFocusGroup from '@element-plus/components/roving-focus-group'\nimport { addUnit } from '@element-plus/utils/util'\nimport { ArrowDown } from '@element-plus/icons-vue'\nimport { useSize } from '@element-plus/hooks'\nimport { ElCollection as ElDropdownCollection, dropdownProps } from './dropdown'\nimport { DROPDOWN_INJECTION_KEY } from './tokens'\n\nimport type { CSSProperties } from 'vue'\n\nconst { ButtonGroup: ElButtonGroup } = ElButton\n\nexport default defineComponent({\n name: 'ElDropdown',\n components: {\n ElButton,\n ElFocusTrap,\n ElButtonGroup,\n ElScrollbar,\n ElDropdownCollection,\n ElTooltip,\n ElRovingFocusGroup,\n ElIcon,\n ArrowDown,\n },\n props: dropdownProps,\n emits: ['visible-change', 'click', 'command'],\n setup(props, { emit }) {\n const _instance = getCurrentInstance()\n\n const triggeringElementRef = ref()\n const referenceElementRef = ref()\n const popperRef = ref<InstanceType<typeof ElTooltip> | null>(null)\n const contentRef = ref<HTMLElement | null>(null)\n const visible = ref(false)\n const scrollbar = ref(null)\n const currentTabId = ref<string | null>(null)\n const isUsingKeyboard = ref(false)\n\n const wrapStyle = computed<CSSProperties>(() => ({\n maxHeight: addUnit(props.maxHeight),\n }))\n const dropdownTriggerKls = computed(() => [\n [dropdownSize.value ? `el-dropdown--${dropdownSize.value}` : ''],\n ])\n\n function handleClick() {\n popperRef.value?.onClose()\n }\n\n const dropdownSize = useSize()\n\n function commandHandler(...args: any[]) {\n emit('command', ...args)\n }\n\n function onItemEnter() {\n // NOOP for now\n }\n\n function onItemLeave() {\n const contentEl = unref(contentRef)\n\n contentEl?.focus()\n currentTabId.value = null\n }\n\n function handleCurrentTabIdChange(id: string) {\n currentTabId.value = id\n }\n\n function handleEntryFocus(e: Event) {\n if (!isUsingKeyboard.value) {\n e.preventDefault()\n e.stopImmediatePropagation()\n }\n }\n\n provide(DROPDOWN_INJECTION_KEY, {\n contentRef,\n isUsingKeyboard,\n onItemEnter,\n onItemLeave,\n })\n\n provide('elDropdown', {\n instance: _instance,\n dropdownSize,\n visible,\n handleClick,\n commandHandler,\n trigger: toRef(props, 'trigger'),\n hideOnClick: toRef(props, 'hideOnClick'),\n })\n\n const onMountOnFocus = (e: Event) => {\n e.preventDefault()\n contentRef.value?.focus?.({\n preventScroll: true,\n })\n }\n\n const handlerMainButtonClick = (event: MouseEvent) => {\n emit('click', event)\n }\n\n return {\n visible,\n scrollbar,\n wrapStyle,\n dropdownTriggerKls,\n dropdownSize,\n currentTabId,\n handleCurrentTabIdChange,\n handlerMainButtonClick,\n handleEntryFocus,\n onMountOnFocus,\n popperRef,\n triggeringElementRef,\n referenceElementRef,\n }\n },\n})\n</script>\n"],"names":["_withCtx"],"mappings":";;;;;;;;;;;;;;;;;;MAGM;MACC;MACA;MACA;MACA;MACA;MACA;MACA,cAAY;MACZ,mBAAiB;MACjB;MACA;MACA,2BAAyB;MACzB;MACA;MACD;MACA
|
|
1
|
+
{"version":3,"file":"dropdown.vue_vue_type_template_id_3ed790a5_lang.mjs","sources":["../../../../../../packages/components/dropdown/src/dropdown.vue?vue&type=template&id=3ed790a5&lang.js"],"sourcesContent":["<template>\n <div class=\"el-dropdown\">\n <el-tooltip\n ref=\"popperRef\"\n :effect=\"effect\"\n :fallback-placements=\"['bottom', 'top', 'right', 'left']\"\n :gpu-acceleration=\"false\"\n :hide-after=\"hideTimeout\"\n :manual-mode=\"true\"\n :placement=\"placement\"\n :popper-class=\"`el-dropdown__popper ${popperClass}`\"\n :reference-element=\"referenceElementRef?.$el\"\n :trigger=\"trigger\"\n :show-after=\"showTimeout\"\n :stop-popper-mouse-event=\"false\"\n :virtual-ref=\"triggeringElementRef\"\n :virtual-triggering=\"splitButton\"\n append-to-body\n pure\n transition=\"el-zoom-in-top\"\n persistent\n @show=\"$emit('visible-change', true)\"\n @hide=\"$emit('visible-change', false)\"\n >\n <template #content>\n <el-scrollbar\n ref=\"scrollbar\"\n :wrap-style=\"wrapStyle\"\n tag=\"ul\"\n view-class=\"el-dropdown__list\"\n >\n <el-focus-trap trapped @mount-on-focus=\"onMountOnFocus\">\n <el-roving-focus-group\n :loop=\"loop\"\n :current-tab-id=\"currentTabId\"\n orientation=\"horizontal\"\n @current-tab-id-change=\"handleCurrentTabIdChange\"\n @entry-focus=\"handleEntryFocus\"\n >\n <el-dropdown-collection>\n <slot name=\"dropdown\"></slot>\n </el-dropdown-collection>\n </el-roving-focus-group>\n </el-focus-trap>\n </el-scrollbar>\n </template>\n <template v-if=\"!splitButton\" #default>\n <div :class=\"dropdownTriggerKls\">\n <slot name=\"default\" />\n </div>\n </template>\n </el-tooltip>\n <template v-if=\"splitButton\">\n <el-button-group>\n <el-button\n ref=\"referenceElementRef\"\n :size=\"dropdownSize\"\n :type=\"type\"\n @click=\"handlerMainButtonClick\"\n >\n <slot name=\"default\" />\n </el-button>\n <el-button\n ref=\"triggeringElementRef\"\n :size=\"dropdownSize\"\n :type=\"type\"\n class=\"el-dropdown__caret-button\"\n >\n <el-icon class=\"el-dropdown__icon\"><arrow-down /></el-icon>\n </el-button>\n </el-button-group>\n </template>\n </div>\n</template>\n<script lang=\"ts\">\nimport {\n computed,\n defineComponent,\n getCurrentInstance,\n provide,\n ref,\n toRef,\n unref,\n} from 'vue'\nimport ElButton from '@element-plus/components/button'\nimport ElTooltip from '@element-plus/components/tooltip'\nimport ElScrollbar from '@element-plus/components/scrollbar'\nimport ElIcon from '@element-plus/components/icon'\nimport ElFocusTrap from '@element-plus/components/focus-trap'\nimport ElRovingFocusGroup from '@element-plus/components/roving-focus-group'\nimport { addUnit } from '@element-plus/utils/util'\nimport { ArrowDown } from '@element-plus/icons-vue'\nimport { useSize } from '@element-plus/hooks'\nimport { ElCollection as ElDropdownCollection, dropdownProps } from './dropdown'\nimport { DROPDOWN_INJECTION_KEY } from './tokens'\n\nimport type { CSSProperties } from 'vue'\n\nconst { ButtonGroup: ElButtonGroup } = ElButton\n\nexport default defineComponent({\n name: 'ElDropdown',\n components: {\n ElButton,\n ElFocusTrap,\n ElButtonGroup,\n ElScrollbar,\n ElDropdownCollection,\n ElTooltip,\n ElRovingFocusGroup,\n ElIcon,\n ArrowDown,\n },\n props: dropdownProps,\n emits: ['visible-change', 'click', 'command'],\n setup(props, { emit }) {\n const _instance = getCurrentInstance()\n\n const triggeringElementRef = ref()\n const referenceElementRef = ref()\n const popperRef = ref<InstanceType<typeof ElTooltip> | null>(null)\n const contentRef = ref<HTMLElement | null>(null)\n const visible = ref(false)\n const scrollbar = ref(null)\n const currentTabId = ref<string | null>(null)\n const isUsingKeyboard = ref(false)\n\n const wrapStyle = computed<CSSProperties>(() => ({\n maxHeight: addUnit(props.maxHeight),\n }))\n const dropdownTriggerKls = computed(() => [\n [dropdownSize.value ? `el-dropdown--${dropdownSize.value}` : ''],\n ])\n\n function handleClick() {\n popperRef.value?.onClose()\n }\n\n const dropdownSize = useSize()\n\n function commandHandler(...args: any[]) {\n emit('command', ...args)\n }\n\n function onItemEnter() {\n // NOOP for now\n }\n\n function onItemLeave() {\n const contentEl = unref(contentRef)\n\n contentEl?.focus()\n currentTabId.value = null\n }\n\n function handleCurrentTabIdChange(id: string) {\n currentTabId.value = id\n }\n\n function handleEntryFocus(e: Event) {\n if (!isUsingKeyboard.value) {\n e.preventDefault()\n e.stopImmediatePropagation()\n }\n }\n\n provide(DROPDOWN_INJECTION_KEY, {\n contentRef,\n isUsingKeyboard,\n onItemEnter,\n onItemLeave,\n })\n\n provide('elDropdown', {\n instance: _instance,\n dropdownSize,\n visible,\n handleClick,\n commandHandler,\n trigger: toRef(props, 'trigger'),\n hideOnClick: toRef(props, 'hideOnClick'),\n })\n\n const onMountOnFocus = (e: Event) => {\n e.preventDefault()\n contentRef.value?.focus?.({\n preventScroll: true,\n })\n }\n\n const handlerMainButtonClick = (event: MouseEvent) => {\n emit('click', event)\n }\n\n return {\n visible,\n scrollbar,\n wrapStyle,\n dropdownTriggerKls,\n dropdownSize,\n currentTabId,\n handleCurrentTabIdChange,\n handlerMainButtonClick,\n handleEntryFocus,\n onMountOnFocus,\n popperRef,\n triggeringElementRef,\n referenceElementRef,\n }\n },\n})\n</script>\n"],"names":["_withCtx"],"mappings":";;;;;;;;;;;;;;;;;;MAGM;MACC;MACA;MACA;MACA;MACA;MACA;MACA,cAAY;MACZ,mBAAiB;MACjB;MACA;MACA,2BAAyB;MACzB;MACA;MACD;MACA;MACA;MACA;;MAEC;;aAEiB;;UAEd,GAAG,EAAC;UACH,YAAU,EAAE;;UAEb;;;;;cAEwB;;;;kBAEnB;kBACA;kBACD;;kBAEC;;;;;;;;;;;;;;;;;;;;;QASQ;;;;;;;gBAEb;;;;;;qBAIqB;;;;iBAGlB,EAACA;oCACe;;cAElB;;;;;;;;iBAKE,EAACA;;cAEH;;;;;;;;;;;;;;;;"}
|
package/es/components/index.mjs
CHANGED
|
@@ -71,10 +71,10 @@ export { ElMessageBox } from './message-box/index.mjs';
|
|
|
71
71
|
export { ElNotification } from './notification/index.mjs';
|
|
72
72
|
export { ElPopover, ElPopoverDirective } from './popover/index.mjs';
|
|
73
73
|
export { affixEmits, affixProps } from './affix/src/affix.mjs';
|
|
74
|
-
export { alertEmits, alertProps } from './alert/src/
|
|
74
|
+
export { alertEmits, alertProps } from './alert/src/alert2.mjs';
|
|
75
75
|
export { avatarEmits, avatarProps } from './avatar/src/avatar.mjs';
|
|
76
76
|
export { backtopEmits, backtopProps } from './backtop/src/backtop.mjs';
|
|
77
|
-
export { badgeProps } from './badge/src/
|
|
77
|
+
export { badgeProps } from './badge/src/badge2.mjs';
|
|
78
78
|
export { breadcrumbProps } from './breadcrumb/src/breadcrumb.mjs';
|
|
79
79
|
export { breadcrumbItemProps } from './breadcrumb/src/breadcrumb-item.mjs';
|
|
80
80
|
export { buttonEmits, buttonNativeType, buttonProps, buttonSize, buttonType } from './button/src/button.mjs';
|
|
@@ -113,14 +113,14 @@ export { radioEmits, radioProps, radioPropsBase, useRadio } from './radio/src/ra
|
|
|
113
113
|
export { radioGroupEmits, radioGroupProps } from './radio/src/radio-group.mjs';
|
|
114
114
|
export { radioButtonProps } from './radio/src/radio-button.mjs';
|
|
115
115
|
export { rateEmits, rateProps } from './rate/src/rate.mjs';
|
|
116
|
-
export { IconComponentMap, IconMap, resultProps } from './result/src/
|
|
116
|
+
export { IconComponentMap, IconMap, resultProps } from './result/src/result2.mjs';
|
|
117
117
|
export { rowProps } from './row/src/row.mjs';
|
|
118
118
|
export { BAR_MAP, renderThumbStyle } from './scrollbar/src/util.mjs';
|
|
119
119
|
export { scrollbarEmits, scrollbarProps } from './scrollbar/src/scrollbar.mjs';
|
|
120
120
|
export { barProps } from './scrollbar/src/bar.mjs';
|
|
121
121
|
export { selectGroupKey, selectKey } from './select/src/token.mjs';
|
|
122
122
|
export { selectV2InjectionKey } from './select-v2/src/token.mjs';
|
|
123
|
-
export { skeletonProps } from './skeleton/src/
|
|
123
|
+
export { skeletonProps } from './skeleton/src/skeleton2.mjs';
|
|
124
124
|
export { skeletonItemProps } from './skeleton/src/skeleton-item.mjs';
|
|
125
125
|
export { spaceProps } from './space/src/space.mjs';
|
|
126
126
|
export { useSpace } from './space/src/use-space.mjs';
|
|
@@ -135,7 +135,7 @@ export { DEFAULT_FORMATS_DATE, DEFAULT_FORMATS_DATEPICKER, DEFAULT_FORMATS_TIME
|
|
|
135
135
|
export { timePickerDefaultProps } from './time-picker/src/common/props.mjs';
|
|
136
136
|
export { default as CommonPicker } from './time-picker/src/common/picker.vue_vue_type_script_lang.mjs';
|
|
137
137
|
export { default as TimePickPanel } from './time-picker/src/time-picker-com/panel-time-pick.vue_vue_type_script_lang.mjs';
|
|
138
|
-
export { useTooltipContentProps, useTooltipProps, useTooltipTriggerProps } from './tooltip/src/
|
|
138
|
+
export { useTooltipContentProps, useTooltipProps, useTooltipTriggerProps } from './tooltip/src/tooltip2.mjs';
|
|
139
139
|
export { CHANGE_EVENT } from '../utils/constants.mjs';
|
|
140
140
|
export { default as FixedSizeList } from './virtual-list/src/components/fixed-size-list.mjs';
|
|
141
141
|
export { default as DynamicSizeList } from './virtual-list/src/components/dynamic-size-list.mjs';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu-item.vue_vue_type_script_lang.mjs","sources":["../../../../../../packages/components/menu/src/menu-item.vue"],"sourcesContent":["<template>\n <li\n class=\"el-menu-item\"\n role=\"menuitem\"\n tabindex=\"-1\"\n :style=\"paddingStyle\"\n :class=\"{\n 'is-active': active,\n 'is-disabled': disabled,\n }\"\n @click=\"handleClick\"\n >\n <el-tooltip\n v-if=\"\n parentMenu.type.name === 'ElMenu' &&\n rootMenu.props.collapse &&\n $slots.title\n \"\n :effect=\"Effect.DARK\"\n placement=\"right\"\n >\n <template #content>\n <slot name=\"title\" />\n </template>\n <div\n :style=\"{\n position: 'absolute',\n left: 0,\n top: 0,\n height: '100%',\n width: '100%',\n display: 'inline-block',\n boxSizing: 'border-box',\n padding: '0 20px',\n }\"\n >\n <slot />\n </div>\n </el-tooltip>\n <template v-else>\n <slot />\n <slot name=\"title\" />\n </template>\n </li>\n</template>\n\n<script lang=\"ts\">\nimport {\n defineComponent,\n computed,\n onMounted,\n onBeforeUnmount,\n inject,\n getCurrentInstance,\n toRef,\n reactive,\n} from 'vue'\nimport ElTooltip from '@element-plus/components/tooltip'\nimport { Effect } from '@element-plus/components/popper'\nimport { throwError } from '@element-plus/utils/error'\nimport useMenu from './use-menu'\nimport { menuItemEmits, menuItemProps } from './menu-item'\n\nimport type { MenuItemRegistered, MenuProvider, SubMenuProvider } from './types'\n\nconst COMPONENT_NAME = 'ElMenuItem'\nexport default defineComponent({\n name: COMPONENT_NAME,\n components: {\n ElTooltip,\n },\n\n props: menuItemProps,\n emits: menuItemEmits,\n\n setup(props, { emit }) {\n const instance = getCurrentInstance()!\n const rootMenu = inject<MenuProvider>('rootMenu')\n if (!rootMenu) throwError(COMPONENT_NAME, 'can not inject root menu')\n\n const { parentMenu, paddingStyle, indexPath } = useMenu(\n instance,\n toRef(props, 'index')\n )\n\n const subMenu = inject<SubMenuProvider>(`subMenu:${parentMenu.value.uid}`)\n if (!subMenu) throwError(COMPONENT_NAME, 'can not inject sub menu')\n\n const active = computed(() => props.index === rootMenu.activeIndex)\n const item: MenuItemRegistered = reactive({\n index: props.index,\n indexPath,\n active,\n })\n\n const handleClick = () => {\n if (!props.disabled) {\n rootMenu.handleMenuItemClick({\n index: props.index,\n indexPath: indexPath.value,\n route: props.route,\n })\n emit('click', item)\n }\n }\n\n onMounted(() => {\n subMenu.addSubMenu(item)\n rootMenu.addMenuItem(item)\n })\n\n onBeforeUnmount(() => {\n subMenu.removeSubMenu(item)\n rootMenu.removeMenuItem(item)\n })\n\n return {\n Effect,\n parentMenu,\n rootMenu,\n paddingStyle,\n active,\n\n handleClick,\n }\n },\n})\n</script>\n"],"names":[],"mappings":";;;;;;;;
|
|
1
|
+
{"version":3,"file":"menu-item.vue_vue_type_script_lang.mjs","sources":["../../../../../../packages/components/menu/src/menu-item.vue"],"sourcesContent":["<template>\n <li\n class=\"el-menu-item\"\n role=\"menuitem\"\n tabindex=\"-1\"\n :style=\"paddingStyle\"\n :class=\"{\n 'is-active': active,\n 'is-disabled': disabled,\n }\"\n @click=\"handleClick\"\n >\n <el-tooltip\n v-if=\"\n parentMenu.type.name === 'ElMenu' &&\n rootMenu.props.collapse &&\n $slots.title\n \"\n :effect=\"Effect.DARK\"\n placement=\"right\"\n persistent\n >\n <template #content>\n <slot name=\"title\" />\n </template>\n <div\n :style=\"{\n position: 'absolute',\n left: 0,\n top: 0,\n height: '100%',\n width: '100%',\n display: 'inline-block',\n boxSizing: 'border-box',\n padding: '0 20px',\n }\"\n >\n <slot />\n </div>\n </el-tooltip>\n <template v-else>\n <slot />\n <slot name=\"title\" />\n </template>\n </li>\n</template>\n\n<script lang=\"ts\">\nimport {\n defineComponent,\n computed,\n onMounted,\n onBeforeUnmount,\n inject,\n getCurrentInstance,\n toRef,\n reactive,\n} from 'vue'\nimport ElTooltip from '@element-plus/components/tooltip'\nimport { Effect } from '@element-plus/components/popper'\nimport { throwError } from '@element-plus/utils/error'\nimport useMenu from './use-menu'\nimport { menuItemEmits, menuItemProps } from './menu-item'\n\nimport type { MenuItemRegistered, MenuProvider, SubMenuProvider } from './types'\n\nconst COMPONENT_NAME = 'ElMenuItem'\nexport default defineComponent({\n name: COMPONENT_NAME,\n components: {\n ElTooltip,\n },\n\n props: menuItemProps,\n emits: menuItemEmits,\n\n setup(props, { emit }) {\n const instance = getCurrentInstance()!\n const rootMenu = inject<MenuProvider>('rootMenu')\n if (!rootMenu) throwError(COMPONENT_NAME, 'can not inject root menu')\n\n const { parentMenu, paddingStyle, indexPath } = useMenu(\n instance,\n toRef(props, 'index')\n )\n\n const subMenu = inject<SubMenuProvider>(`subMenu:${parentMenu.value.uid}`)\n if (!subMenu) throwError(COMPONENT_NAME, 'can not inject sub menu')\n\n const active = computed(() => props.index === rootMenu.activeIndex)\n const item: MenuItemRegistered = reactive({\n index: props.index,\n indexPath,\n active,\n })\n\n const handleClick = () => {\n if (!props.disabled) {\n rootMenu.handleMenuItemClick({\n index: props.index,\n indexPath: indexPath.value,\n route: props.route,\n })\n emit('click', item)\n }\n }\n\n onMounted(() => {\n subMenu.addSubMenu(item)\n rootMenu.addMenuItem(item)\n })\n\n onBeforeUnmount(() => {\n subMenu.removeSubMenu(item)\n rootMenu.removeMenuItem(item)\n })\n\n return {\n Effect,\n parentMenu,\n rootMenu,\n paddingStyle,\n active,\n\n handleClick,\n }\n },\n})\n</script>\n"],"names":[],"mappings":";;;;;;;;AA8DA,oBAAoB,eAAe,CAAC;;AAEpC,EAAE,MAAM,cAAc;;AAEtB,IAAI,SAAS;AACb,GAAG;EACD,OAAO,aAAa;EACpB,KAAK,EAAE;OACF,CAAC,KAAK;;;IAGT,KAAK,QAAQ;MACX,UAAU,CAAC;;IAEb,MAAM,OAAO,GAAG;IAChB,IAAI,QAAQ;MACV,UAAU,CAAC,cAAc,EAAE;IAC7B,MAAM,MAAM,GAAG,QAAQ,CAAC,MAAM,KAAK,CAAC,kBAAkB,CAAC,WAAW,CAAC,CAAC;;MAElE,OAAO,KAAK,CAAC,KAAK;MAClB;MACA,MAAM;;;MAGN,IAAI,CAAC,KAAK,SAAS,EAAE;QACnB,QAAQ,oBAAoB,CAAC;;UAE3B,SAAS,EAAE,UAAU,KAAK;UAC1B,OAAO,KAAK,CAAC,KAAK;SACnB,CAAC,CAAC;QACH,IAAI,CAAC;OACN;KACF;;MAEC,OAAO,CAAC,UAAU,CAAC,KAAK;MACxB,QAAQ,CAAC,YAAY;;mBAER,CAAC,MAAM;aACb,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;cACpB,CAAC;;WAEJ;MACL;;;MAGA,YAAY;MACZ,MAAM;MACN,WAAW;KACZ;;;;;;"}
|
|
@@ -25,7 +25,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
25
25
|
_ctx.parentMenu.type.name === "ElMenu" && _ctx.rootMenu.props.collapse && _ctx.$slots.title ? (openBlock(), createBlock(_component_el_tooltip, {
|
|
26
26
|
key: 0,
|
|
27
27
|
effect: _ctx.Effect.DARK,
|
|
28
|
-
placement: "right"
|
|
28
|
+
placement: "right",
|
|
29
|
+
persistent: ""
|
|
29
30
|
}, {
|
|
30
31
|
content: withCtx(() => [
|
|
31
32
|
renderSlot(_ctx.$slots, "title")
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu-item.vue_vue_type_template_id_aa755baa_lang.mjs","sources":["../../../../../../packages/components/menu/src/menu-item.vue?vue&type=template&id=aa755baa&lang.js"],"sourcesContent":["<template>\n <li\n class=\"el-menu-item\"\n role=\"menuitem\"\n tabindex=\"-1\"\n :style=\"paddingStyle\"\n :class=\"{\n 'is-active': active,\n 'is-disabled': disabled,\n }\"\n @click=\"handleClick\"\n >\n <el-tooltip\n v-if=\"\n parentMenu.type.name === 'ElMenu' &&\n rootMenu.props.collapse &&\n $slots.title\n \"\n :effect=\"Effect.DARK\"\n placement=\"right\"\n >\n <template #content>\n <slot name=\"title\" />\n </template>\n <div\n :style=\"{\n position: 'absolute',\n left: 0,\n top: 0,\n height: '100%',\n width: '100%',\n display: 'inline-block',\n boxSizing: 'border-box',\n padding: '0 20px',\n }\"\n >\n <slot />\n </div>\n </el-tooltip>\n <template v-else>\n <slot />\n <slot name=\"title\" />\n </template>\n </li>\n</template>\n\n<script lang=\"ts\">\nimport {\n defineComponent,\n computed,\n onMounted,\n onBeforeUnmount,\n inject,\n getCurrentInstance,\n toRef,\n reactive,\n} from 'vue'\nimport ElTooltip from '@element-plus/components/tooltip'\nimport { Effect } from '@element-plus/components/popper'\nimport { throwError } from '@element-plus/utils/error'\nimport useMenu from './use-menu'\nimport { menuItemEmits, menuItemProps } from './menu-item'\n\nimport type { MenuItemRegistered, MenuProvider, SubMenuProvider } from './types'\n\nconst COMPONENT_NAME = 'ElMenuItem'\nexport default defineComponent({\n name: COMPONENT_NAME,\n components: {\n ElTooltip,\n },\n\n props: menuItemProps,\n emits: menuItemEmits,\n\n setup(props, { emit }) {\n const instance = getCurrentInstance()!\n const rootMenu = inject<MenuProvider>('rootMenu')\n if (!rootMenu) throwError(COMPONENT_NAME, 'can not inject root menu')\n\n const { parentMenu, paddingStyle, indexPath } = useMenu(\n instance,\n toRef(props, 'index')\n )\n\n const subMenu = inject<SubMenuProvider>(`subMenu:${parentMenu.value.uid}`)\n if (!subMenu) throwError(COMPONENT_NAME, 'can not inject sub menu')\n\n const active = computed(() => props.index === rootMenu.activeIndex)\n const item: MenuItemRegistered = reactive({\n index: props.index,\n indexPath,\n active,\n })\n\n const handleClick = () => {\n if (!props.disabled) {\n rootMenu.handleMenuItemClick({\n index: props.index,\n indexPath: indexPath.value,\n route: props.route,\n })\n emit('click', item)\n }\n }\n\n onMounted(() => {\n subMenu.addSubMenu(item)\n rootMenu.addMenuItem(item)\n })\n\n onBeforeUnmount(() => {\n subMenu.removeSubMenu(item)\n rootMenu.removeMenuItem(item)\n })\n\n return {\n Effect,\n parentMenu,\n rootMenu,\n paddingStyle,\n active,\n\n handleClick,\n }\n },\n})\n</script>\n"],"names":["_renderSlot"],"mappings":";;;;;;;;;;;;;;;;;;;;;;IAGI;;IAEC,KAAK;WAKA
|
|
1
|
+
{"version":3,"file":"menu-item.vue_vue_type_template_id_aa755baa_lang.mjs","sources":["../../../../../../packages/components/menu/src/menu-item.vue?vue&type=template&id=aa755baa&lang.js"],"sourcesContent":["<template>\n <li\n class=\"el-menu-item\"\n role=\"menuitem\"\n tabindex=\"-1\"\n :style=\"paddingStyle\"\n :class=\"{\n 'is-active': active,\n 'is-disabled': disabled,\n }\"\n @click=\"handleClick\"\n >\n <el-tooltip\n v-if=\"\n parentMenu.type.name === 'ElMenu' &&\n rootMenu.props.collapse &&\n $slots.title\n \"\n :effect=\"Effect.DARK\"\n placement=\"right\"\n persistent\n >\n <template #content>\n <slot name=\"title\" />\n </template>\n <div\n :style=\"{\n position: 'absolute',\n left: 0,\n top: 0,\n height: '100%',\n width: '100%',\n display: 'inline-block',\n boxSizing: 'border-box',\n padding: '0 20px',\n }\"\n >\n <slot />\n </div>\n </el-tooltip>\n <template v-else>\n <slot />\n <slot name=\"title\" />\n </template>\n </li>\n</template>\n\n<script lang=\"ts\">\nimport {\n defineComponent,\n computed,\n onMounted,\n onBeforeUnmount,\n inject,\n getCurrentInstance,\n toRef,\n reactive,\n} from 'vue'\nimport ElTooltip from '@element-plus/components/tooltip'\nimport { Effect } from '@element-plus/components/popper'\nimport { throwError } from '@element-plus/utils/error'\nimport useMenu from './use-menu'\nimport { menuItemEmits, menuItemProps } from './menu-item'\n\nimport type { MenuItemRegistered, MenuProvider, SubMenuProvider } from './types'\n\nconst COMPONENT_NAME = 'ElMenuItem'\nexport default defineComponent({\n name: COMPONENT_NAME,\n components: {\n ElTooltip,\n },\n\n props: menuItemProps,\n emits: menuItemEmits,\n\n setup(props, { emit }) {\n const instance = getCurrentInstance()!\n const rootMenu = inject<MenuProvider>('rootMenu')\n if (!rootMenu) throwError(COMPONENT_NAME, 'can not inject root menu')\n\n const { parentMenu, paddingStyle, indexPath } = useMenu(\n instance,\n toRef(props, 'index')\n )\n\n const subMenu = inject<SubMenuProvider>(`subMenu:${parentMenu.value.uid}`)\n if (!subMenu) throwError(COMPONENT_NAME, 'can not inject sub menu')\n\n const active = computed(() => props.index === rootMenu.activeIndex)\n const item: MenuItemRegistered = reactive({\n index: props.index,\n indexPath,\n active,\n })\n\n const handleClick = () => {\n if (!props.disabled) {\n rootMenu.handleMenuItemClick({\n index: props.index,\n indexPath: indexPath.value,\n route: props.route,\n })\n emit('click', item)\n }\n }\n\n onMounted(() => {\n subMenu.addSubMenu(item)\n rootMenu.addMenuItem(item)\n })\n\n onBeforeUnmount(() => {\n subMenu.removeSubMenu(item)\n rootMenu.removeMenuItem(item)\n })\n\n return {\n Effect,\n parentMenu,\n rootMenu,\n paddingStyle,\n active,\n\n handleClick,\n }\n },\n})\n</script>\n"],"names":["_renderSlot"],"mappings":";;;;;;;;;;;;;;;;;;;;;;IAGI;;IAEC,KAAK;WAKA;;;;;;;;;;UASJA,UAAU;UACV;;UAEW;;;;;;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"popconfirm.vue_vue_type_script_lang.mjs","sources":["../../../../../../packages/components/popconfirm/src/popconfirm.vue"],"sourcesContent":["<template>\n <el-tooltip\n ref=\"tooltipRef\"\n v-bind=\"$attrs\"\n trigger=\"click\"\n effect=\"light\"\n popper-class=\"el-popover\"\n append-to-body\n :fallback-placements=\"['bottom', 'top', 'right', 'left']\"\n :hide-after=\"hideAfter\"\n >\n <template #content>\n <div class=\"el-popconfirm\">\n <div class=\"el-popconfirm__main\">\n <el-icon\n v-if=\"!hideIcon && icon\"\n class=\"el-popconfirm__icon\"\n :style=\"{ color: iconColor }\"\n >\n <component :is=\"icon\" />\n </el-icon>\n {{ title }}\n </div>\n <div class=\"el-popconfirm__action\">\n <el-button size=\"small\" :type=\"cancelButtonType\" @click=\"cancel\">\n {{ finalCancelButtonText }}\n </el-button>\n <el-button size=\"small\" :type=\"confirmButtonType\" @click=\"confirm\">\n {{ finalConfirmButtonText }}\n </el-button>\n </div>\n </div>\n </template>\n <template v-if=\"$slots.reference\">\n <slot name=\"reference\" />\n </template>\n </el-tooltip>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, ref, computed, unref } from 'vue'\nimport ElButton from '@element-plus/components/button'\nimport ElIcon from '@element-plus/components/icon'\nimport ElTooltip from '@element-plus/components/tooltip'\nimport { useLocale } from '@element-plus/hooks'\nimport { popconfirmProps } from './popconfirm'\n\nexport default defineComponent({\n name: 'ElPopconfirm',\n\n components: {\n ElButton,\n ElTooltip,\n ElIcon,\n },\n\n props: popconfirmProps,\n\n setup(props) {\n const { t } = useLocale()\n const tooltipRef = ref<{ onClose: () => void }>()\n\n const hidePopper = () => {\n unref(tooltipRef)?.onClose?.()\n }\n\n const handleCallback = () => {\n hidePopper()\n }\n\n const confirm = (e: Event) => {\n props.onConfirm?.(e)\n handleCallback()\n }\n const cancel = (e: Event) => {\n props.onCancel?.(e)\n handleCallback()\n }\n\n const finalConfirmButtonText = computed(\n () => props.confirmButtonText || t('el.popconfirm.confirmButtonText')\n )\n const finalCancelButtonText = computed(\n () => props.cancelButtonText || t('el.popconfirm.cancelButtonText')\n )\n\n return {\n finalConfirmButtonText,\n finalCancelButtonText,\n tooltipRef,\n\n confirm,\n cancel,\n }\n },\n})\n</script>\n"],"names":[],"mappings":";;;;;;;;
|
|
1
|
+
{"version":3,"file":"popconfirm.vue_vue_type_script_lang.mjs","sources":["../../../../../../packages/components/popconfirm/src/popconfirm.vue"],"sourcesContent":["<template>\n <el-tooltip\n ref=\"tooltipRef\"\n v-bind=\"$attrs\"\n trigger=\"click\"\n effect=\"light\"\n popper-class=\"el-popover\"\n append-to-body\n :fallback-placements=\"['bottom', 'top', 'right', 'left']\"\n :hide-after=\"hideAfter\"\n persistent\n >\n <template #content>\n <div class=\"el-popconfirm\">\n <div class=\"el-popconfirm__main\">\n <el-icon\n v-if=\"!hideIcon && icon\"\n class=\"el-popconfirm__icon\"\n :style=\"{ color: iconColor }\"\n >\n <component :is=\"icon\" />\n </el-icon>\n {{ title }}\n </div>\n <div class=\"el-popconfirm__action\">\n <el-button size=\"small\" :type=\"cancelButtonType\" @click=\"cancel\">\n {{ finalCancelButtonText }}\n </el-button>\n <el-button size=\"small\" :type=\"confirmButtonType\" @click=\"confirm\">\n {{ finalConfirmButtonText }}\n </el-button>\n </div>\n </div>\n </template>\n <template v-if=\"$slots.reference\">\n <slot name=\"reference\" />\n </template>\n </el-tooltip>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, ref, computed, unref } from 'vue'\nimport ElButton from '@element-plus/components/button'\nimport ElIcon from '@element-plus/components/icon'\nimport ElTooltip from '@element-plus/components/tooltip'\nimport { useLocale } from '@element-plus/hooks'\nimport { popconfirmProps } from './popconfirm'\n\nexport default defineComponent({\n name: 'ElPopconfirm',\n\n components: {\n ElButton,\n ElTooltip,\n ElIcon,\n },\n\n props: popconfirmProps,\n\n setup(props) {\n const { t } = useLocale()\n const tooltipRef = ref<{ onClose: () => void }>()\n\n const hidePopper = () => {\n unref(tooltipRef)?.onClose?.()\n }\n\n const handleCallback = () => {\n hidePopper()\n }\n\n const confirm = (e: Event) => {\n props.onConfirm?.(e)\n handleCallback()\n }\n const cancel = (e: Event) => {\n props.onCancel?.(e)\n handleCallback()\n }\n\n const finalConfirmButtonText = computed(\n () => props.confirmButtonText || t('el.popconfirm.confirmButtonText')\n )\n const finalCancelButtonText = computed(\n () => props.cancelButtonText || t('el.popconfirm.cancelButtonText')\n )\n\n return {\n finalConfirmButtonText,\n finalCancelButtonText,\n tooltipRef,\n\n confirm,\n cancel,\n }\n },\n})\n</script>\n"],"names":[],"mappings":";;;;;;;;AA8CA,aAAe,eAAe;;AAE9B,EAAE,UAAU;IACR,QAAQ;;IAER,MAAM;;OAEH,EAAE;OACF,CAAC;;;IAGJ,MAAM,UAAU,GAAG;;MAEjB,CAAC,EAAE,GAAG,CAAC,EAAE;KACV,CAAC;IACF,MAAM,cAAc,GAAG,MAAM;;KAE5B,CAAC;UACI,OAAO,GAAG,CAAC,CAAC,KAAK;;;MAGrB,cAAc,EAAE,CAAC;MACjB;IACF;;MAEE,CAAC,KAAK,MAAM,QAAQ,KAAK;MACzB,cAAc,EAAE,CAAC;MACjB;IACF;IACA,MAAM,qBAAqB;WACpB;MACL;;;MAGA,OAAO;MACP,MAAM;;;;;;;"}
|
|
@@ -13,7 +13,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
13
13
|
"popper-class": "el-popover",
|
|
14
14
|
"append-to-body": "",
|
|
15
15
|
"fallback-placements": ["bottom", "top", "right", "left"],
|
|
16
|
-
"hide-after": _ctx.hideAfter
|
|
16
|
+
"hide-after": _ctx.hideAfter,
|
|
17
|
+
persistent: ""
|
|
17
18
|
}), {
|
|
18
19
|
content: withCtx(() => [
|
|
19
20
|
createElementVNode("div", _hoisted_1, [
|
package/es/components/popconfirm/src/popconfirm.vue_vue_type_template_id_16409d25_lang.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"popconfirm.vue_vue_type_template_id_16409d25_lang.mjs","sources":["../../../../../../packages/components/popconfirm/src/popconfirm.vue?vue&type=template&id=16409d25&lang.js"],"sourcesContent":["<template>\n <el-tooltip\n ref=\"tooltipRef\"\n v-bind=\"$attrs\"\n trigger=\"click\"\n effect=\"light\"\n popper-class=\"el-popover\"\n append-to-body\n :fallback-placements=\"['bottom', 'top', 'right', 'left']\"\n :hide-after=\"hideAfter\"\n >\n <template #content>\n <div class=\"el-popconfirm\">\n <div class=\"el-popconfirm__main\">\n <el-icon\n v-if=\"!hideIcon && icon\"\n class=\"el-popconfirm__icon\"\n :style=\"{ color: iconColor }\"\n >\n <component :is=\"icon\" />\n </el-icon>\n {{ title }}\n </div>\n <div class=\"el-popconfirm__action\">\n <el-button size=\"small\" :type=\"cancelButtonType\" @click=\"cancel\">\n {{ finalCancelButtonText }}\n </el-button>\n <el-button size=\"small\" :type=\"confirmButtonType\" @click=\"confirm\">\n {{ finalConfirmButtonText }}\n </el-button>\n </div>\n </div>\n </template>\n <template v-if=\"$slots.reference\">\n <slot name=\"reference\" />\n </template>\n </el-tooltip>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, ref, computed, unref } from 'vue'\nimport ElButton from '@element-plus/components/button'\nimport ElIcon from '@element-plus/components/icon'\nimport ElTooltip from '@element-plus/components/tooltip'\nimport { useLocale } from '@element-plus/hooks'\nimport { popconfirmProps } from './popconfirm'\n\nexport default defineComponent({\n name: 'ElPopconfirm',\n\n components: {\n ElButton,\n ElTooltip,\n ElIcon,\n },\n\n props: popconfirmProps,\n\n setup(props) {\n const { t } = useLocale()\n const tooltipRef = ref<{ onClose: () => void }>()\n\n const hidePopper = () => {\n unref(tooltipRef)?.onClose?.()\n }\n\n const handleCallback = () => {\n hidePopper()\n }\n\n const confirm = (e: Event) => {\n props.onConfirm?.(e)\n handleCallback()\n }\n const cancel = (e: Event) => {\n props.onCancel?.(e)\n handleCallback()\n }\n\n const finalConfirmButtonText = computed(\n () => props.confirmButtonText || t('el.popconfirm.confirmButtonText')\n )\n const finalCancelButtonText = computed(\n () => props.cancelButtonText || t('el.popconfirm.cancelButtonText')\n )\n\n return {\n finalConfirmButtonText,\n finalCancelButtonText,\n tooltipRef,\n\n confirm,\n cancel,\n }\n },\n})\n</script>\n"],"names":["_toDisplayString"],"mappings":";;;
|
|
1
|
+
{"version":3,"file":"popconfirm.vue_vue_type_template_id_16409d25_lang.mjs","sources":["../../../../../../packages/components/popconfirm/src/popconfirm.vue?vue&type=template&id=16409d25&lang.js"],"sourcesContent":["<template>\n <el-tooltip\n ref=\"tooltipRef\"\n v-bind=\"$attrs\"\n trigger=\"click\"\n effect=\"light\"\n popper-class=\"el-popover\"\n append-to-body\n :fallback-placements=\"['bottom', 'top', 'right', 'left']\"\n :hide-after=\"hideAfter\"\n persistent\n >\n <template #content>\n <div class=\"el-popconfirm\">\n <div class=\"el-popconfirm__main\">\n <el-icon\n v-if=\"!hideIcon && icon\"\n class=\"el-popconfirm__icon\"\n :style=\"{ color: iconColor }\"\n >\n <component :is=\"icon\" />\n </el-icon>\n {{ title }}\n </div>\n <div class=\"el-popconfirm__action\">\n <el-button size=\"small\" :type=\"cancelButtonType\" @click=\"cancel\">\n {{ finalCancelButtonText }}\n </el-button>\n <el-button size=\"small\" :type=\"confirmButtonType\" @click=\"confirm\">\n {{ finalConfirmButtonText }}\n </el-button>\n </div>\n </div>\n </template>\n <template v-if=\"$slots.reference\">\n <slot name=\"reference\" />\n </template>\n </el-tooltip>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, ref, computed, unref } from 'vue'\nimport ElButton from '@element-plus/components/button'\nimport ElIcon from '@element-plus/components/icon'\nimport ElTooltip from '@element-plus/components/tooltip'\nimport { useLocale } from '@element-plus/hooks'\nimport { popconfirmProps } from './popconfirm'\n\nexport default defineComponent({\n name: 'ElPopconfirm',\n\n components: {\n ElButton,\n ElTooltip,\n ElIcon,\n },\n\n props: popconfirmProps,\n\n setup(props) {\n const { t } = useLocale()\n const tooltipRef = ref<{ onClose: () => void }>()\n\n const hidePopper = () => {\n unref(tooltipRef)?.onClose?.()\n }\n\n const handleCallback = () => {\n hidePopper()\n }\n\n const confirm = (e: Event) => {\n props.onConfirm?.(e)\n handleCallback()\n }\n const cancel = (e: Event) => {\n props.onCancel?.(e)\n handleCallback()\n }\n\n const finalConfirmButtonText = computed(\n () => props.confirmButtonText || t('el.popconfirm.confirmButtonText')\n )\n const finalCancelButtonText = computed(\n () => props.cancelButtonText || t('el.popconfirm.cancelButtonText')\n )\n\n return {\n finalConfirmButtonText,\n finalCancelButtonText,\n tooltipRef,\n\n confirm,\n cancel,\n }\n },\n})\n</script>\n"],"names":["_toDisplayString"],"mappings":";;;qBAaW,KAAK,EAAC;qBACJ,KAAK,EAAC;4CAUuB;;;;;;;;IApBtC;IACA;IACA,cAAY;IACZ;IACC;IACA;;;WAGiB;;;YAIH;;;;;;;gCAIPA;;;;;;;;;;;YAKgD;;;;;;;;;;YAGC;;;;;;;;;;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.vue_vue_type_script_lang.mjs","sources":["../../../../../../packages/components/popover/src/index.vue"],"sourcesContent":["<template>\n <el-tooltip\n ref=\"tooltipRef\"\n v-bind=\"$attrs\"\n :aria-label=\"title\"\n :effect=\"effect\"\n :enterable=\"enterable\"\n :popper-class=\"kls\"\n :popper-style=\"style\"\n >\n <template v-if=\"$slots.reference\">\n <slot name=\"reference\" />\n </template>\n\n <template #content>\n <div v-if=\"title\" class=\"el-popover__title\" role=\"title\">\n {{ title }}\n </div>\n <slot>\n {{ content }}\n </slot>\n </template>\n </el-tooltip>\n</template>\n<script lang=\"ts\">\nimport { defineComponent, computed, ref, unref } from 'vue'\nimport ElTooltip from '@element-plus/components/tooltip'\nimport { isString } from '@element-plus/utils/util'\nimport { usePopoverProps } from './popover'\n\nimport type { StyleValue } from 'vue'\n\nconst emits = ['update:visible', 'after-enter', 'after-leave']\n\nconst NAME = 'ElPopover'\n\nexport default defineComponent({\n name: NAME,\n components: {\n ElTooltip,\n },\n props: usePopoverProps,\n emits,\n setup(props) {\n const tooltipRef = ref<InstanceType<typeof ElTooltip> | null>(null)\n const popperRef = computed(() => {\n return unref(tooltipRef)?.popperRef\n })\n const width = computed(() => {\n if (isString(props.width)) {\n return props.width as string\n }\n return `${props.width}px`\n })\n\n const style = computed(() => {\n return [\n {\n width: width.value,\n },\n props.popperStyle,\n ] as StyleValue\n })\n\n const kls = computed(() => {\n return [\n { 'el-popover--plain': !!props.content },\n 'el-popover',\n props.popperClass,\n ]\n })\n\n return {\n kls,\n style,\n tooltipRef,\n popperRef,\n }\n },\n})\n</script>\n"],"names":[],"mappings":";;;;;;
|
|
1
|
+
{"version":3,"file":"index.vue_vue_type_script_lang.mjs","sources":["../../../../../../packages/components/popover/src/index.vue"],"sourcesContent":["<template>\n <el-tooltip\n ref=\"tooltipRef\"\n v-bind=\"$attrs\"\n :aria-label=\"title\"\n :effect=\"effect\"\n :enterable=\"enterable\"\n :popper-class=\"kls\"\n :popper-style=\"style\"\n persistent\n >\n <template v-if=\"$slots.reference\">\n <slot name=\"reference\" />\n </template>\n\n <template #content>\n <div v-if=\"title\" class=\"el-popover__title\" role=\"title\">\n {{ title }}\n </div>\n <slot>\n {{ content }}\n </slot>\n </template>\n </el-tooltip>\n</template>\n<script lang=\"ts\">\nimport { defineComponent, computed, ref, unref } from 'vue'\nimport ElTooltip from '@element-plus/components/tooltip'\nimport { isString } from '@element-plus/utils/util'\nimport { usePopoverProps } from './popover'\n\nimport type { StyleValue } from 'vue'\n\nconst emits = ['update:visible', 'after-enter', 'after-leave']\n\nconst NAME = 'ElPopover'\n\nexport default defineComponent({\n name: NAME,\n components: {\n ElTooltip,\n },\n props: usePopoverProps,\n emits,\n setup(props) {\n const tooltipRef = ref<InstanceType<typeof ElTooltip> | null>(null)\n const popperRef = computed(() => {\n return unref(tooltipRef)?.popperRef\n })\n const width = computed(() => {\n if (isString(props.width)) {\n return props.width as string\n }\n return `${props.width}px`\n })\n\n const style = computed(() => {\n return [\n {\n width: width.value,\n },\n props.popperStyle,\n ] as StyleValue\n })\n\n const kls = computed(() => {\n return [\n { 'el-popover--plain': !!props.content },\n 'el-popover',\n props.popperClass,\n ]\n })\n\n return {\n kls,\n style,\n tooltipRef,\n popperRef,\n }\n },\n})\n</script>\n"],"names":[],"mappings":";;;;;;AA6BA,WAAW,GAAG,CAAC,kBAAkB;;AAEjC,aAAe,eAAe;;AAE9B,EAAE,UAAU,EAAE;;AAEd,GAAG;;AAEH,EAAE,KAAK;EACL,MAAM;IACJ,MAAM;IACN,MAAM;;MAEJ,OAAO,CAAC,EAAE,GAAG,KAAK;KACnB,CAAC,CAAC;IACH,MAAM,KAAK;MACT,IAAI,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE;QACzB,OAAO,KAAK,MAAM,CAAC;OACpB;;KAEF,CAAC,CAAC;UACG,KAAK,GAAG,QAAQ,CAAC,MAAM;aACpB;;UAEH,KAAK,EAAE,KAAK,CAAC,KAAK;;;OAGrB,CAAC;MACF,CAAC;;aAEM;QACL;QACA,YAAY;QACZ,KAAK,CAAC;;;IAGV,OAAO;MACL,GAAG;WACE;gBACK;eACD;MACT;;;;;;"}
|
|
@@ -12,7 +12,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
12
12
|
effect: _ctx.effect,
|
|
13
13
|
enterable: _ctx.enterable,
|
|
14
14
|
"popper-class": _ctx.kls,
|
|
15
|
-
"popper-style": _ctx.style
|
|
15
|
+
"popper-style": _ctx.style,
|
|
16
|
+
persistent: ""
|
|
16
17
|
}), {
|
|
17
18
|
content: withCtx(() => [
|
|
18
19
|
_ctx.title ? (openBlock(), createElementBlock("div", _hoisted_1, toDisplayString(_ctx.title), 1)) : createCommentVNode("v-if", true),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.vue_vue_type_template_id_15486cf0_lang.mjs","sources":["../../../../../../packages/components/popover/src/index.vue?vue&type=template&id=15486cf0&lang.js"],"sourcesContent":["<template>\n <el-tooltip\n ref=\"tooltipRef\"\n v-bind=\"$attrs\"\n :aria-label=\"title\"\n :effect=\"effect\"\n :enterable=\"enterable\"\n :popper-class=\"kls\"\n :popper-style=\"style\"\n >\n <template v-if=\"$slots.reference\">\n <slot name=\"reference\" />\n </template>\n\n <template #content>\n <div v-if=\"title\" class=\"el-popover__title\" role=\"title\">\n {{ title }}\n </div>\n <slot>\n {{ content }}\n </slot>\n </template>\n </el-tooltip>\n</template>\n<script lang=\"ts\">\nimport { defineComponent, computed, ref, unref } from 'vue'\nimport ElTooltip from '@element-plus/components/tooltip'\nimport { isString } from '@element-plus/utils/util'\nimport { usePopoverProps } from './popover'\n\nimport type { StyleValue } from 'vue'\n\nconst emits = ['update:visible', 'after-enter', 'after-leave']\n\nconst NAME = 'ElPopover'\n\nexport default defineComponent({\n name: NAME,\n components: {\n ElTooltip,\n },\n props: usePopoverProps,\n emits,\n setup(props) {\n const tooltipRef = ref<InstanceType<typeof ElTooltip> | null>(null)\n const popperRef = computed(() => {\n return unref(tooltipRef)?.popperRef\n })\n const width = computed(() => {\n if (isString(props.width)) {\n return props.width as string\n }\n return `${props.width}px`\n })\n\n const style = computed(() => {\n return [\n {\n width: width.value,\n },\n props.popperStyle,\n ] as StyleValue\n })\n\n const kls = computed(() => {\n return [\n { 'el-popover--plain': !!props.content },\n 'el-popover',\n props.popperClass,\n ]\n })\n\n return {\n kls,\n style,\n tooltipRef,\n popperRef,\n }\n },\n})\n</script>\n"],"names":[
|
|
1
|
+
{"version":3,"file":"index.vue_vue_type_template_id_15486cf0_lang.mjs","sources":["../../../../../../packages/components/popover/src/index.vue?vue&type=template&id=15486cf0&lang.js"],"sourcesContent":["<template>\n <el-tooltip\n ref=\"tooltipRef\"\n v-bind=\"$attrs\"\n :aria-label=\"title\"\n :effect=\"effect\"\n :enterable=\"enterable\"\n :popper-class=\"kls\"\n :popper-style=\"style\"\n persistent\n >\n <template v-if=\"$slots.reference\">\n <slot name=\"reference\" />\n </template>\n\n <template #content>\n <div v-if=\"title\" class=\"el-popover__title\" role=\"title\">\n {{ title }}\n </div>\n <slot>\n {{ content }}\n </slot>\n </template>\n </el-tooltip>\n</template>\n<script lang=\"ts\">\nimport { defineComponent, computed, ref, unref } from 'vue'\nimport ElTooltip from '@element-plus/components/tooltip'\nimport { isString } from '@element-plus/utils/util'\nimport { usePopoverProps } from './popover'\n\nimport type { StyleValue } from 'vue'\n\nconst emits = ['update:visible', 'after-enter', 'after-leave']\n\nconst NAME = 'ElPopover'\n\nexport default defineComponent({\n name: NAME,\n components: {\n ElTooltip,\n },\n props: usePopoverProps,\n emits,\n setup(props) {\n const tooltipRef = ref<InstanceType<typeof ElTooltip> | null>(null)\n const popperRef = computed(() => {\n return unref(tooltipRef)?.popperRef\n })\n const width = computed(() => {\n if (isString(props.width)) {\n return props.width as string\n }\n return `${props.width}px`\n })\n\n const style = computed(() => {\n return [\n {\n width: width.value,\n },\n props.popperStyle,\n ] as StyleValue\n })\n\n const kls = computed(() => {\n return [\n { 'el-popover--plain': !!props.content },\n 'el-popover',\n props.popperClass,\n ]\n })\n\n return {\n kls,\n style,\n tooltipRef,\n popperRef,\n }\n },\n})\n</script>\n"],"names":[],"mappings":";;;;;EAgBwB;EAA0B;;;;;;;IAZ7C,cAAY,UAAK;IACjB;IACA;IACA;IACA;gBACD;;;OAOa;;;MAGX,uCAAA;;;;;;;;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { buildProps } from '../../../utils/props.mjs';
|
|
2
2
|
import '../../tooltip/index.mjs';
|
|
3
|
-
import { useTooltipContentProps } from '../../tooltip/src/
|
|
3
|
+
import { useTooltipContentProps } from '../../tooltip/src/tooltip2.mjs';
|
|
4
4
|
|
|
5
5
|
const usePopoverProps = {
|
|
6
6
|
content: useTooltipContentProps.content,
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { withInstall } from '../../utils/with-install.mjs';
|
|
2
|
-
import './src/
|
|
3
|
-
export { IconComponentMap, IconMap, resultProps } from './src/
|
|
2
|
+
import './src/result.mjs';
|
|
3
|
+
export { IconComponentMap, IconMap, resultProps } from './src/result2.mjs';
|
|
4
4
|
import script from './src/result.vue_vue_type_script_lang.mjs';
|
|
5
5
|
|
|
6
6
|
const ElResult = withInstall(script);
|
|
@@ -1,32 +1,7 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
1
|
+
import script from './result.vue_vue_type_script_lang.mjs';
|
|
2
|
+
export { default } from './result.vue_vue_type_script_lang.mjs';
|
|
3
|
+
import { render } from './result.vue_vue_type_template_id_263c10e5_lang.mjs';
|
|
3
4
|
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
warning: "icon-warning",
|
|
7
|
-
error: "icon-error",
|
|
8
|
-
info: "icon-info"
|
|
9
|
-
};
|
|
10
|
-
const IconComponentMap = {
|
|
11
|
-
[IconMap.success]: CircleCheckFilled,
|
|
12
|
-
[IconMap.warning]: WarningFilled,
|
|
13
|
-
[IconMap.error]: CircleCloseFilled,
|
|
14
|
-
[IconMap.info]: InfoFilled
|
|
15
|
-
};
|
|
16
|
-
const resultProps = buildProps({
|
|
17
|
-
title: {
|
|
18
|
-
type: String,
|
|
19
|
-
default: ""
|
|
20
|
-
},
|
|
21
|
-
subTitle: {
|
|
22
|
-
type: String,
|
|
23
|
-
default: ""
|
|
24
|
-
},
|
|
25
|
-
icon: {
|
|
26
|
-
values: ["success", "warning", "info", "error"],
|
|
27
|
-
default: "info"
|
|
28
|
-
}
|
|
29
|
-
});
|
|
30
|
-
|
|
31
|
-
export { IconComponentMap, IconMap, resultProps };
|
|
5
|
+
script.render = render;
|
|
6
|
+
script.__file = "packages/components/result/src/result.vue";
|
|
32
7
|
//# sourceMappingURL=result.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"result.mjs","sources":[
|
|
1
|
+
{"version":3,"file":"result.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}
|
|
@@ -1,7 +1,32 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
import { render } from './result.vue_vue_type_template_id_263c10e5_lang.mjs';
|
|
1
|
+
import { buildProps } from '../../../utils/props.mjs';
|
|
2
|
+
import { CircleCheckFilled, WarningFilled, CircleCloseFilled, InfoFilled } from '@element-plus/icons-vue';
|
|
4
3
|
|
|
5
|
-
|
|
6
|
-
|
|
4
|
+
const IconMap = {
|
|
5
|
+
success: "icon-success",
|
|
6
|
+
warning: "icon-warning",
|
|
7
|
+
error: "icon-error",
|
|
8
|
+
info: "icon-info"
|
|
9
|
+
};
|
|
10
|
+
const IconComponentMap = {
|
|
11
|
+
[IconMap.success]: CircleCheckFilled,
|
|
12
|
+
[IconMap.warning]: WarningFilled,
|
|
13
|
+
[IconMap.error]: CircleCloseFilled,
|
|
14
|
+
[IconMap.info]: InfoFilled
|
|
15
|
+
};
|
|
16
|
+
const resultProps = buildProps({
|
|
17
|
+
title: {
|
|
18
|
+
type: String,
|
|
19
|
+
default: ""
|
|
20
|
+
},
|
|
21
|
+
subTitle: {
|
|
22
|
+
type: String,
|
|
23
|
+
default: ""
|
|
24
|
+
},
|
|
25
|
+
icon: {
|
|
26
|
+
values: ["success", "warning", "info", "error"],
|
|
27
|
+
default: "info"
|
|
28
|
+
}
|
|
29
|
+
});
|
|
30
|
+
|
|
31
|
+
export { IconComponentMap, IconMap, resultProps };
|
|
7
32
|
//# sourceMappingURL=result2.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"result2.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"result2.mjs","sources":["../../../../../../packages/components/result/src/result.ts"],"sourcesContent":["import { buildProps } from '@element-plus/utils/props'\nimport {\n WarningFilled,\n CircleCheckFilled,\n CircleCloseFilled,\n InfoFilled,\n} from '@element-plus/icons-vue'\nimport type { Component, ExtractPropTypes } from 'vue'\n\nexport const IconMap = {\n success: 'icon-success',\n warning: 'icon-warning',\n error: 'icon-error',\n info: 'icon-info',\n} as const\n\nexport const IconComponentMap: Record<\n typeof IconMap[keyof typeof IconMap],\n Component\n> = {\n [IconMap.success]: CircleCheckFilled,\n [IconMap.warning]: WarningFilled,\n [IconMap.error]: CircleCloseFilled,\n [IconMap.info]: InfoFilled,\n}\n\nexport const resultProps = buildProps({\n title: {\n type: String,\n default: '',\n },\n subTitle: {\n type: String,\n default: '',\n },\n icon: {\n values: ['success', 'warning', 'info', 'error'],\n default: 'info',\n },\n} as const)\n\nexport type ResultProps = ExtractPropTypes<typeof resultProps>\n"],"names":[],"mappings":";;;AAOY,MAAC,OAAO,GAAG;AACvB,EAAE,OAAO,EAAE,cAAc;AACzB,EAAE,OAAO,EAAE,cAAc;AACzB,EAAE,KAAK,EAAE,YAAY;AACrB,EAAE,IAAI,EAAE,WAAW;AACnB,EAAE;AACU,MAAC,gBAAgB,GAAG;AAChC,EAAE,CAAC,OAAO,CAAC,OAAO,GAAG,iBAAiB;AACtC,EAAE,CAAC,OAAO,CAAC,OAAO,GAAG,aAAa;AAClC,EAAE,CAAC,OAAO,CAAC,KAAK,GAAG,iBAAiB;AACpC,EAAE,CAAC,OAAO,CAAC,IAAI,GAAG,UAAU;AAC5B,EAAE;AACU,MAAC,WAAW,GAAG,UAAU,CAAC;AACtC,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,QAAQ,EAAE;AACZ,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,IAAI,EAAE;AACR,IAAI,MAAM,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,CAAC;AACnD,IAAI,OAAO,EAAE,MAAM;AACnB,GAAG;AACH,CAAC;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select.vue_vue_type_script_lang.mjs","sources":["../../../../../../packages/components/select/src/select.vue"],"sourcesContent":["<template>\n <div\n ref=\"selectWrapper\"\n v-click-outside:[popperPaneRef]=\"handleClose\"\n :class=\"wrapperKls\"\n @click.stop=\"toggleMenu\"\n >\n <el-tooltip\n ref=\"tooltipRef\"\n v-model:visible=\"dropMenuVisible\"\n placement=\"bottom-start\"\n :append-to-body=\"popperAppendToBody\"\n :popper-class=\"`el-select__popper ${popperClass}`\"\n :fallback-placements=\"['bottom-start', 'top-start', 'right', 'left']\"\n effect=\"light\"\n pure\n trigger=\"click\"\n transition=\"el-zoom-in-top\"\n :stop-popper-mouse-event=\"false\"\n :gpu-acceleration=\"false\"\n @show=\"handleMenuEnter\"\n >\n <template #default>\n <div class=\"select-trigger\">\n <div\n v-if=\"multiple\"\n ref=\"tags\"\n class=\"el-select__tags\"\n :style=\"selectTagsStyle\"\n >\n <span v-if=\"collapseTags && selected.length\">\n <el-tag\n :closable=\"!selectDisabled && !selected[0].isDisabled\"\n :size=\"collapseTagSize\"\n :hit=\"selected[0].hitState\"\n :type=\"tagType\"\n disable-transitions\n @close=\"deleteTag($event, selected[0])\"\n >\n <span\n class=\"el-select__tags-text\"\n :style=\"{ maxWidth: inputWidth - 123 + 'px' }\"\n >{{ selected[0].currentLabel }}</span\n >\n </el-tag>\n <el-tag\n v-if=\"selected.length > 1\"\n :closable=\"false\"\n :size=\"collapseTagSize\"\n :type=\"tagType\"\n disable-transitions\n >\n <span class=\"el-select__tags-text\"\n >+ {{ selected.length - 1 }}</span\n >\n </el-tag>\n </span>\n <!-- <div> -->\n <transition v-if=\"!collapseTags\" @after-leave=\"resetInputHeight\">\n <span\n :style=\"{\n marginLeft:\n prefixWidth && selected.length ? `${prefixWidth}px` : null,\n }\"\n >\n <el-tag\n v-for=\"item in selected\"\n :key=\"getValueKey(item)\"\n :closable=\"!selectDisabled && !item.isDisabled\"\n :size=\"collapseTagSize\"\n :hit=\"item.hitState\"\n :type=\"tagType\"\n disable-transitions\n @close=\"deleteTag($event, item)\"\n >\n <span\n class=\"el-select__tags-text\"\n :style=\"{ maxWidth: inputWidth - 75 + 'px' }\"\n >{{ item.currentLabel }}</span\n >\n </el-tag>\n </span>\n </transition>\n <!-- </div> -->\n <input\n v-if=\"filterable\"\n ref=\"input\"\n v-model=\"query\"\n type=\"text\"\n class=\"el-select__input\"\n :class=\"[selectSize ? `is-${selectSize}` : '']\"\n :disabled=\"selectDisabled\"\n :autocomplete=\"autocomplete\"\n :style=\"{\n marginLeft:\n (prefixWidth && !selected.length) || tagInMultiLine\n ? `${prefixWidth}px`\n : null,\n flexGrow: '1',\n width: `${inputLength / (inputWidth - 32)}%`,\n maxWidth: `${inputWidth - 42}px`,\n }\"\n @focus=\"handleFocus\"\n @blur=\"handleBlur\"\n @keyup=\"managePlaceholder\"\n @keydown=\"resetInputState\"\n @keydown.down.prevent=\"navigateOptions('next')\"\n @keydown.up.prevent=\"navigateOptions('prev')\"\n @keydown.esc.stop.prevent=\"visible = false\"\n @keydown.enter.stop.prevent=\"selectOption\"\n @keydown.delete=\"deletePrevTag\"\n @keydown.tab=\"visible = false\"\n @compositionstart=\"handleComposition\"\n @compositionupdate=\"handleComposition\"\n @compositionend=\"handleComposition\"\n @input=\"debouncedQueryChange\"\n />\n </div>\n <el-input\n :id=\"id\"\n ref=\"reference\"\n v-model=\"selectedLabel\"\n type=\"text\"\n :placeholder=\"currentPlaceholder\"\n :name=\"name\"\n :autocomplete=\"autocomplete\"\n :size=\"selectSize\"\n :disabled=\"selectDisabled\"\n :readonly=\"readonly\"\n :validate-event=\"false\"\n :class=\"{ 'is-focus': visible }\"\n :tabindex=\"multiple && filterable ? -1 : undefined\"\n @focus=\"handleFocus\"\n @blur=\"handleBlur\"\n @input=\"debouncedOnInputChange\"\n @paste=\"debouncedOnInputChange\"\n @compositionstart=\"handleComposition\"\n @compositionupdate=\"handleComposition\"\n @compositionend=\"handleComposition\"\n @keydown.down.stop.prevent=\"navigateOptions('next')\"\n @keydown.up.stop.prevent=\"navigateOptions('prev')\"\n @keydown.enter.stop.prevent=\"selectOption\"\n @keydown.esc.stop.prevent=\"visible = false\"\n @keydown.tab=\"visible = false\"\n @mouseenter=\"inputHovering = true\"\n @mouseleave=\"inputHovering = false\"\n >\n <template v-if=\"$slots.prefix\" #prefix>\n <div\n style=\"\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n \"\n >\n <slot name=\"prefix\"></slot>\n </div>\n </template>\n <template #suffix>\n <el-icon\n v-if=\"iconComponent\"\n v-show=\"!showClose\"\n :class=\"['el-select__caret', 'el-input__icon', iconReverse]\"\n >\n <component :is=\"iconComponent\" />\n </el-icon>\n <el-icon\n v-if=\"showClose && clearIcon\"\n class=\"el-select__caret el-input__icon\"\n @click=\"handleClearClick\"\n >\n <component :is=\"clearIcon\" />\n </el-icon>\n </template>\n </el-input>\n </div>\n </template>\n <template #content>\n <el-select-menu>\n <el-scrollbar\n v-show=\"options.size > 0 && !loading\"\n ref=\"scrollbar\"\n tag=\"ul\"\n wrap-class=\"el-select-dropdown__wrap\"\n view-class=\"el-select-dropdown__list\"\n :class=\"{\n 'is-empty': !allowCreate && query && filteredOptionsCount === 0,\n }\"\n >\n <el-option v-if=\"showNewOption\" :value=\"query\" :created=\"true\" />\n <slot></slot>\n </el-scrollbar>\n <template\n v-if=\"\n emptyText &&\n (!allowCreate || loading || (allowCreate && options.size === 0))\n \"\n >\n <slot v-if=\"$slots.empty\" name=\"empty\"></slot>\n <p v-else class=\"el-select-dropdown__empty\">\n {{ emptyText }}\n </p>\n </template>\n </el-select-menu>\n </template>\n </el-tooltip>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n toRefs,\n defineComponent,\n onMounted,\n onBeforeUnmount,\n nextTick,\n reactive,\n provide,\n computed,\n unref,\n} from 'vue'\nimport { ClickOutside } from '@element-plus/directives'\nimport { useFocus, useLocale } from '@element-plus/hooks'\nimport ElInput from '@element-plus/components/input'\nimport ElTooltip from '@element-plus/components/tooltip'\nimport ElScrollbar from '@element-plus/components/scrollbar'\nimport ElTag from '@element-plus/components/tag'\nimport ElIcon from '@element-plus/components/icon'\nimport { UPDATE_MODEL_EVENT, CHANGE_EVENT } from '@element-plus/utils/constants'\nimport {\n addResizeListener,\n removeResizeListener,\n} from '@element-plus/utils/resize-event'\nimport { isValidComponentSize } from '@element-plus/utils/validators'\nimport { CircleClose, ArrowUp } from '@element-plus/icons-vue'\nimport ElOption from './option.vue'\nimport ElSelectMenu from './select-dropdown.vue'\nimport { useSelect, useSelectStates } from './useSelect'\nimport { selectKey } from './token'\n\nimport type { PropType, Component } from 'vue'\nimport type { ComponentSize } from '@element-plus/utils/types'\nimport type { SelectContext } from './token'\n\nexport default defineComponent({\n name: 'ElSelect',\n componentName: 'ElSelect',\n components: {\n ElInput,\n ElSelectMenu,\n ElOption,\n ElTag,\n ElScrollbar,\n ElTooltip,\n ElIcon,\n },\n directives: { ClickOutside },\n props: {\n name: String,\n id: String,\n modelValue: {\n type: [Array, String, Number, Boolean, Object],\n default: undefined,\n },\n autocomplete: {\n type: String,\n default: 'off',\n },\n automaticDropdown: Boolean,\n size: {\n type: String as PropType<ComponentSize>,\n validator: isValidComponentSize,\n },\n disabled: Boolean,\n clearable: Boolean,\n filterable: Boolean,\n allowCreate: Boolean,\n loading: Boolean,\n popperClass: {\n type: String,\n default: '',\n },\n remote: Boolean,\n loadingText: String,\n noMatchText: String,\n noDataText: String,\n remoteMethod: Function,\n filterMethod: Function,\n multiple: Boolean,\n multipleLimit: {\n type: Number,\n default: 0,\n },\n placeholder: {\n type: String,\n },\n defaultFirstOption: Boolean,\n reserveKeyword: Boolean,\n valueKey: {\n type: String,\n default: 'value',\n },\n collapseTags: Boolean,\n popperAppendToBody: {\n type: Boolean,\n default: true,\n },\n clearIcon: {\n type: [String, Object] as PropType<string | Component>,\n default: CircleClose,\n },\n fitInputWidth: {\n type: Boolean,\n default: false,\n },\n suffixIcon: {\n type: [String, Object] as PropType<string | Component>,\n default: ArrowUp,\n },\n tagType: {\n type: String,\n default: 'info',\n },\n },\n emits: [\n UPDATE_MODEL_EVENT,\n CHANGE_EVENT,\n 'remove-tag',\n 'clear',\n 'visible-change',\n 'focus',\n 'blur',\n ],\n\n setup(props, ctx) {\n const { t } = useLocale()\n const states = useSelectStates(props)\n const {\n optionsArray,\n selectSize,\n readonly,\n handleResize,\n collapseTagSize,\n debouncedOnInputChange,\n debouncedQueryChange,\n deletePrevTag,\n deleteTag,\n deleteSelected,\n handleOptionSelect,\n scrollToOption,\n setSelected,\n resetInputHeight,\n managePlaceholder,\n showClose,\n selectDisabled,\n iconComponent,\n iconReverse,\n showNewOption,\n emptyText,\n toggleLastOptionHitState,\n resetInputState,\n handleComposition,\n onOptionCreate,\n onOptionDestroy,\n handleMenuEnter,\n handleFocus,\n blur,\n handleBlur,\n handleClearClick,\n handleClose,\n toggleMenu,\n selectOption,\n getValueKey,\n navigateOptions,\n dropMenuVisible,\n\n reference,\n input,\n tooltipRef,\n tags,\n selectWrapper,\n scrollbar,\n queryChange,\n groupQueryChange,\n } = useSelect(props, states, ctx)\n\n const { focus } = useFocus(reference)\n\n const {\n inputWidth,\n selected,\n inputLength,\n filteredOptionsCount,\n visible,\n softFocus,\n selectedLabel,\n hoverIndex,\n query,\n inputHovering,\n currentPlaceholder,\n menuVisibleOnFocus,\n isOnComposition,\n isSilentBlur,\n options,\n cachedOptions,\n optionsCount,\n prefixWidth,\n tagInMultiLine,\n } = toRefs(states)\n\n const wrapperKls = computed(() => {\n const classList = ['el-select']\n const _selectSize = unref(selectSize)\n if (_selectSize) {\n classList.push(`el-select--${_selectSize}`)\n }\n return classList\n })\n\n const selectTagsStyle = computed(() => ({\n maxWidth: `${unref(inputWidth) - 32}px`,\n width: '100%',\n }))\n\n provide(\n selectKey,\n reactive({\n props,\n options,\n optionsArray,\n cachedOptions,\n optionsCount,\n filteredOptionsCount,\n hoverIndex,\n handleOptionSelect,\n onOptionCreate,\n onOptionDestroy,\n selectWrapper,\n selected,\n setSelected,\n queryChange,\n groupQueryChange,\n }) as unknown as SelectContext\n )\n\n onMounted(() => {\n states.cachedPlaceHolder = currentPlaceholder.value =\n props.placeholder || t('el.select.placeholder')\n if (\n props.multiple &&\n Array.isArray(props.modelValue) &&\n props.modelValue.length > 0\n ) {\n currentPlaceholder.value = ''\n }\n addResizeListener(selectWrapper.value as any, handleResize)\n if (reference.value && reference.value.$el) {\n const sizeMap = {\n large: 36,\n default: 32,\n small: 28,\n }\n const input = reference.value.input as HTMLInputElement\n states.initialInputHeight =\n input.getBoundingClientRect().height || sizeMap[selectSize.value]\n }\n if (props.remote && props.multiple) {\n resetInputHeight()\n }\n nextTick(() => {\n if (!reference.value) return\n if (reference.value.$el) {\n inputWidth.value = reference.value.$el.getBoundingClientRect().width\n }\n if (ctx.slots.prefix) {\n const inputChildNodes = reference.value.$el.childNodes\n const input = (Array.from(inputChildNodes) as HTMLElement[]).filter(\n (item) => item.tagName === 'INPUT'\n )[0]\n const prefix = reference.value.$el.querySelector('.el-input__prefix')\n prefixWidth.value = Math.max(\n prefix.getBoundingClientRect().width + 5,\n 30\n )\n if (states.prefixWidth) {\n input.style.paddingLeft = `${Math.max(states.prefixWidth, 30)}px`\n }\n }\n })\n setSelected()\n })\n\n onBeforeUnmount(() => {\n removeResizeListener(selectWrapper.value as any, handleResize)\n })\n\n if (props.multiple && !Array.isArray(props.modelValue)) {\n ctx.emit(UPDATE_MODEL_EVENT, [])\n }\n if (!props.multiple && Array.isArray(props.modelValue)) {\n ctx.emit(UPDATE_MODEL_EVENT, '')\n }\n\n const popperPaneRef = computed(() => {\n return tooltipRef.value?.popperRef?.contentRef\n })\n\n return {\n tagInMultiLine,\n prefixWidth,\n selectSize,\n readonly,\n handleResize,\n collapseTagSize,\n debouncedOnInputChange,\n debouncedQueryChange,\n deletePrevTag,\n deleteTag,\n deleteSelected,\n handleOptionSelect,\n scrollToOption,\n inputWidth,\n selected,\n inputLength,\n filteredOptionsCount,\n visible,\n softFocus,\n selectedLabel,\n hoverIndex,\n query,\n inputHovering,\n currentPlaceholder,\n menuVisibleOnFocus,\n isOnComposition,\n isSilentBlur,\n options,\n resetInputHeight,\n managePlaceholder,\n showClose,\n selectDisabled,\n iconComponent,\n iconReverse,\n showNewOption,\n emptyText,\n toggleLastOptionHitState,\n resetInputState,\n handleComposition,\n handleMenuEnter,\n handleFocus,\n blur,\n handleBlur,\n handleClearClick,\n handleClose,\n toggleMenu,\n selectOption,\n getValueKey,\n navigateOptions,\n dropMenuVisible,\n focus,\n\n reference,\n input,\n tooltipRef,\n popperPaneRef,\n tags,\n selectWrapper,\n scrollbar,\n\n wrapperKls,\n selectTagsStyle,\n }\n },\n})\n</script>\n"],"names":["ElOption"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"select.vue_vue_type_script_lang.mjs","sources":["../../../../../../packages/components/select/src/select.vue"],"sourcesContent":["<template>\n <div\n ref=\"selectWrapper\"\n v-click-outside:[popperPaneRef]=\"handleClose\"\n :class=\"wrapperKls\"\n @click.stop=\"toggleMenu\"\n >\n <el-tooltip\n ref=\"tooltipRef\"\n v-model:visible=\"dropMenuVisible\"\n placement=\"bottom-start\"\n :append-to-body=\"popperAppendToBody\"\n :popper-class=\"`el-select__popper ${popperClass}`\"\n :fallback-placements=\"['bottom-start', 'top-start', 'right', 'left']\"\n effect=\"light\"\n pure\n trigger=\"click\"\n transition=\"el-zoom-in-top\"\n :stop-popper-mouse-event=\"false\"\n :gpu-acceleration=\"false\"\n persistent\n @show=\"handleMenuEnter\"\n >\n <template #default>\n <div class=\"select-trigger\">\n <div\n v-if=\"multiple\"\n ref=\"tags\"\n class=\"el-select__tags\"\n :style=\"selectTagsStyle\"\n >\n <span v-if=\"collapseTags && selected.length\">\n <el-tag\n :closable=\"!selectDisabled && !selected[0].isDisabled\"\n :size=\"collapseTagSize\"\n :hit=\"selected[0].hitState\"\n :type=\"tagType\"\n disable-transitions\n @close=\"deleteTag($event, selected[0])\"\n >\n <span\n class=\"el-select__tags-text\"\n :style=\"{ maxWidth: inputWidth - 123 + 'px' }\"\n >{{ selected[0].currentLabel }}</span\n >\n </el-tag>\n <el-tag\n v-if=\"selected.length > 1\"\n :closable=\"false\"\n :size=\"collapseTagSize\"\n :type=\"tagType\"\n disable-transitions\n >\n <span class=\"el-select__tags-text\"\n >+ {{ selected.length - 1 }}</span\n >\n </el-tag>\n </span>\n <!-- <div> -->\n <transition v-if=\"!collapseTags\" @after-leave=\"resetInputHeight\">\n <span\n :style=\"{\n marginLeft:\n prefixWidth && selected.length ? `${prefixWidth}px` : null,\n }\"\n >\n <el-tag\n v-for=\"item in selected\"\n :key=\"getValueKey(item)\"\n :closable=\"!selectDisabled && !item.isDisabled\"\n :size=\"collapseTagSize\"\n :hit=\"item.hitState\"\n :type=\"tagType\"\n disable-transitions\n @close=\"deleteTag($event, item)\"\n >\n <span\n class=\"el-select__tags-text\"\n :style=\"{ maxWidth: inputWidth - 75 + 'px' }\"\n >{{ item.currentLabel }}</span\n >\n </el-tag>\n </span>\n </transition>\n <!-- </div> -->\n <input\n v-if=\"filterable\"\n ref=\"input\"\n v-model=\"query\"\n type=\"text\"\n class=\"el-select__input\"\n :class=\"[selectSize ? `is-${selectSize}` : '']\"\n :disabled=\"selectDisabled\"\n :autocomplete=\"autocomplete\"\n :style=\"{\n marginLeft:\n (prefixWidth && !selected.length) || tagInMultiLine\n ? `${prefixWidth}px`\n : null,\n flexGrow: '1',\n width: `${inputLength / (inputWidth - 32)}%`,\n maxWidth: `${inputWidth - 42}px`,\n }\"\n @focus=\"handleFocus\"\n @blur=\"handleBlur\"\n @keyup=\"managePlaceholder\"\n @keydown=\"resetInputState\"\n @keydown.down.prevent=\"navigateOptions('next')\"\n @keydown.up.prevent=\"navigateOptions('prev')\"\n @keydown.esc.stop.prevent=\"visible = false\"\n @keydown.enter.stop.prevent=\"selectOption\"\n @keydown.delete=\"deletePrevTag\"\n @keydown.tab=\"visible = false\"\n @compositionstart=\"handleComposition\"\n @compositionupdate=\"handleComposition\"\n @compositionend=\"handleComposition\"\n @input=\"debouncedQueryChange\"\n />\n </div>\n <el-input\n :id=\"id\"\n ref=\"reference\"\n v-model=\"selectedLabel\"\n type=\"text\"\n :placeholder=\"currentPlaceholder\"\n :name=\"name\"\n :autocomplete=\"autocomplete\"\n :size=\"selectSize\"\n :disabled=\"selectDisabled\"\n :readonly=\"readonly\"\n :validate-event=\"false\"\n :class=\"{ 'is-focus': visible }\"\n :tabindex=\"multiple && filterable ? -1 : undefined\"\n @focus=\"handleFocus\"\n @blur=\"handleBlur\"\n @input=\"debouncedOnInputChange\"\n @paste=\"debouncedOnInputChange\"\n @compositionstart=\"handleComposition\"\n @compositionupdate=\"handleComposition\"\n @compositionend=\"handleComposition\"\n @keydown.down.stop.prevent=\"navigateOptions('next')\"\n @keydown.up.stop.prevent=\"navigateOptions('prev')\"\n @keydown.enter.stop.prevent=\"selectOption\"\n @keydown.esc.stop.prevent=\"visible = false\"\n @keydown.tab=\"visible = false\"\n @mouseenter=\"inputHovering = true\"\n @mouseleave=\"inputHovering = false\"\n >\n <template v-if=\"$slots.prefix\" #prefix>\n <div\n style=\"\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n \"\n >\n <slot name=\"prefix\"></slot>\n </div>\n </template>\n <template #suffix>\n <el-icon\n v-if=\"iconComponent\"\n v-show=\"!showClose\"\n :class=\"['el-select__caret', 'el-input__icon', iconReverse]\"\n >\n <component :is=\"iconComponent\" />\n </el-icon>\n <el-icon\n v-if=\"showClose && clearIcon\"\n class=\"el-select__caret el-input__icon\"\n @click=\"handleClearClick\"\n >\n <component :is=\"clearIcon\" />\n </el-icon>\n </template>\n </el-input>\n </div>\n </template>\n <template #content>\n <el-select-menu>\n <el-scrollbar\n v-show=\"options.size > 0 && !loading\"\n ref=\"scrollbar\"\n tag=\"ul\"\n wrap-class=\"el-select-dropdown__wrap\"\n view-class=\"el-select-dropdown__list\"\n :class=\"{\n 'is-empty': !allowCreate && query && filteredOptionsCount === 0,\n }\"\n >\n <el-option v-if=\"showNewOption\" :value=\"query\" :created=\"true\" />\n <slot></slot>\n </el-scrollbar>\n <template\n v-if=\"\n emptyText &&\n (!allowCreate || loading || (allowCreate && options.size === 0))\n \"\n >\n <slot v-if=\"$slots.empty\" name=\"empty\"></slot>\n <p v-else class=\"el-select-dropdown__empty\">\n {{ emptyText }}\n </p>\n </template>\n </el-select-menu>\n </template>\n </el-tooltip>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n toRefs,\n defineComponent,\n onMounted,\n onBeforeUnmount,\n nextTick,\n reactive,\n provide,\n computed,\n unref,\n} from 'vue'\nimport { ClickOutside } from '@element-plus/directives'\nimport { useFocus, useLocale } from '@element-plus/hooks'\nimport ElInput from '@element-plus/components/input'\nimport ElTooltip from '@element-plus/components/tooltip'\nimport ElScrollbar from '@element-plus/components/scrollbar'\nimport ElTag from '@element-plus/components/tag'\nimport ElIcon from '@element-plus/components/icon'\nimport { UPDATE_MODEL_EVENT, CHANGE_EVENT } from '@element-plus/utils/constants'\nimport {\n addResizeListener,\n removeResizeListener,\n} from '@element-plus/utils/resize-event'\nimport { isValidComponentSize } from '@element-plus/utils/validators'\nimport { CircleClose, ArrowUp } from '@element-plus/icons-vue'\nimport ElOption from './option.vue'\nimport ElSelectMenu from './select-dropdown.vue'\nimport { useSelect, useSelectStates } from './useSelect'\nimport { selectKey } from './token'\n\nimport type { PropType, Component } from 'vue'\nimport type { ComponentSize } from '@element-plus/utils/types'\nimport type { SelectContext } from './token'\n\nexport default defineComponent({\n name: 'ElSelect',\n componentName: 'ElSelect',\n components: {\n ElInput,\n ElSelectMenu,\n ElOption,\n ElTag,\n ElScrollbar,\n ElTooltip,\n ElIcon,\n },\n directives: { ClickOutside },\n props: {\n name: String,\n id: String,\n modelValue: {\n type: [Array, String, Number, Boolean, Object],\n default: undefined,\n },\n autocomplete: {\n type: String,\n default: 'off',\n },\n automaticDropdown: Boolean,\n size: {\n type: String as PropType<ComponentSize>,\n validator: isValidComponentSize,\n },\n disabled: Boolean,\n clearable: Boolean,\n filterable: Boolean,\n allowCreate: Boolean,\n loading: Boolean,\n popperClass: {\n type: String,\n default: '',\n },\n remote: Boolean,\n loadingText: String,\n noMatchText: String,\n noDataText: String,\n remoteMethod: Function,\n filterMethod: Function,\n multiple: Boolean,\n multipleLimit: {\n type: Number,\n default: 0,\n },\n placeholder: {\n type: String,\n },\n defaultFirstOption: Boolean,\n reserveKeyword: Boolean,\n valueKey: {\n type: String,\n default: 'value',\n },\n collapseTags: Boolean,\n popperAppendToBody: {\n type: Boolean,\n default: true,\n },\n clearIcon: {\n type: [String, Object] as PropType<string | Component>,\n default: CircleClose,\n },\n fitInputWidth: {\n type: Boolean,\n default: false,\n },\n suffixIcon: {\n type: [String, Object] as PropType<string | Component>,\n default: ArrowUp,\n },\n tagType: {\n type: String,\n default: 'info',\n },\n },\n emits: [\n UPDATE_MODEL_EVENT,\n CHANGE_EVENT,\n 'remove-tag',\n 'clear',\n 'visible-change',\n 'focus',\n 'blur',\n ],\n\n setup(props, ctx) {\n const { t } = useLocale()\n const states = useSelectStates(props)\n const {\n optionsArray,\n selectSize,\n readonly,\n handleResize,\n collapseTagSize,\n debouncedOnInputChange,\n debouncedQueryChange,\n deletePrevTag,\n deleteTag,\n deleteSelected,\n handleOptionSelect,\n scrollToOption,\n setSelected,\n resetInputHeight,\n managePlaceholder,\n showClose,\n selectDisabled,\n iconComponent,\n iconReverse,\n showNewOption,\n emptyText,\n toggleLastOptionHitState,\n resetInputState,\n handleComposition,\n onOptionCreate,\n onOptionDestroy,\n handleMenuEnter,\n handleFocus,\n blur,\n handleBlur,\n handleClearClick,\n handleClose,\n toggleMenu,\n selectOption,\n getValueKey,\n navigateOptions,\n dropMenuVisible,\n\n reference,\n input,\n tooltipRef,\n tags,\n selectWrapper,\n scrollbar,\n queryChange,\n groupQueryChange,\n } = useSelect(props, states, ctx)\n\n const { focus } = useFocus(reference)\n\n const {\n inputWidth,\n selected,\n inputLength,\n filteredOptionsCount,\n visible,\n softFocus,\n selectedLabel,\n hoverIndex,\n query,\n inputHovering,\n currentPlaceholder,\n menuVisibleOnFocus,\n isOnComposition,\n isSilentBlur,\n options,\n cachedOptions,\n optionsCount,\n prefixWidth,\n tagInMultiLine,\n } = toRefs(states)\n\n const wrapperKls = computed(() => {\n const classList = ['el-select']\n const _selectSize = unref(selectSize)\n if (_selectSize) {\n classList.push(`el-select--${_selectSize}`)\n }\n return classList\n })\n\n const selectTagsStyle = computed(() => ({\n maxWidth: `${unref(inputWidth) - 32}px`,\n width: '100%',\n }))\n\n provide(\n selectKey,\n reactive({\n props,\n options,\n optionsArray,\n cachedOptions,\n optionsCount,\n filteredOptionsCount,\n hoverIndex,\n handleOptionSelect,\n onOptionCreate,\n onOptionDestroy,\n selectWrapper,\n selected,\n setSelected,\n queryChange,\n groupQueryChange,\n }) as unknown as SelectContext\n )\n\n onMounted(() => {\n states.cachedPlaceHolder = currentPlaceholder.value =\n props.placeholder || t('el.select.placeholder')\n if (\n props.multiple &&\n Array.isArray(props.modelValue) &&\n props.modelValue.length > 0\n ) {\n currentPlaceholder.value = ''\n }\n addResizeListener(selectWrapper.value as any, handleResize)\n if (reference.value && reference.value.$el) {\n const sizeMap = {\n large: 36,\n default: 32,\n small: 28,\n }\n const input = reference.value.input as HTMLInputElement\n states.initialInputHeight =\n input.getBoundingClientRect().height || sizeMap[selectSize.value]\n }\n if (props.remote && props.multiple) {\n resetInputHeight()\n }\n nextTick(() => {\n if (!reference.value) return\n if (reference.value.$el) {\n inputWidth.value = reference.value.$el.getBoundingClientRect().width\n }\n if (ctx.slots.prefix) {\n const inputChildNodes = reference.value.$el.childNodes\n const input = (Array.from(inputChildNodes) as HTMLElement[]).filter(\n (item) => item.tagName === 'INPUT'\n )[0]\n const prefix = reference.value.$el.querySelector('.el-input__prefix')\n prefixWidth.value = Math.max(\n prefix.getBoundingClientRect().width + 5,\n 30\n )\n if (states.prefixWidth) {\n input.style.paddingLeft = `${Math.max(states.prefixWidth, 30)}px`\n }\n }\n })\n setSelected()\n })\n\n onBeforeUnmount(() => {\n removeResizeListener(selectWrapper.value as any, handleResize)\n })\n\n if (props.multiple && !Array.isArray(props.modelValue)) {\n ctx.emit(UPDATE_MODEL_EVENT, [])\n }\n if (!props.multiple && Array.isArray(props.modelValue)) {\n ctx.emit(UPDATE_MODEL_EVENT, '')\n }\n\n const popperPaneRef = computed(() => {\n return tooltipRef.value?.popperRef?.contentRef\n })\n\n return {\n tagInMultiLine,\n prefixWidth,\n selectSize,\n readonly,\n handleResize,\n collapseTagSize,\n debouncedOnInputChange,\n debouncedQueryChange,\n deletePrevTag,\n deleteTag,\n deleteSelected,\n handleOptionSelect,\n scrollToOption,\n inputWidth,\n selected,\n inputLength,\n filteredOptionsCount,\n visible,\n softFocus,\n selectedLabel,\n hoverIndex,\n query,\n inputHovering,\n currentPlaceholder,\n menuVisibleOnFocus,\n isOnComposition,\n isSilentBlur,\n options,\n resetInputHeight,\n managePlaceholder,\n showClose,\n selectDisabled,\n iconComponent,\n iconReverse,\n showNewOption,\n emptyText,\n toggleLastOptionHitState,\n resetInputState,\n handleComposition,\n handleMenuEnter,\n handleFocus,\n blur,\n handleBlur,\n handleClearClick,\n handleClose,\n toggleMenu,\n selectOption,\n getValueKey,\n navigateOptions,\n dropMenuVisible,\n focus,\n\n reference,\n input,\n tooltipRef,\n popperPaneRef,\n tags,\n selectWrapper,\n scrollbar,\n\n wrapperKls,\n selectTagsStyle,\n }\n },\n})\n</script>\n"],"names":["ElOption"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAgPA,aAAe,eAAe,CAAC;;AAE/B,EAAE,aAAa,EAAE,UAAU;AAC3B,EAAE,UAAU,EAAE;AACd,IAAI;;AAEJ,cAAIA,QAAQ;IACR,KAAK;IACL,WAAW;IACX;IACA,MAAM;;YAEE;OACL,EAAE;IACL,IAAI,EAAE;IACN,EAAE,EAAE;IACJ;;MAEE,cAAc,CAAC;KAChB;IACD,YAAY;MACV,IAAI,EAAE;MACN,OAAO;;qBAEQ,EAAE;IACnB;MACE,IAAI,EAAE,MAAM;MACZ,SAAS,EAAE;;IAEb;IACA,SAAS,EAAE;IACX;eACW,EAAE,OAAO;WACb,EAAE,OAAO;IAChB;MACE,IAAI,EAAE,MAAM;MACZ,OAAO,EAAE,EAAE;KACZ;IACD,MAAM,EAAE,OAAO;IACf,WAAW,EAAE;IACb,WAAW,EAAE;cACH,EAAE;gBACA;IACZ;IACA,QAAQ,EAAE;IACV,aAAa,EAAE;MACb,IAAI,EAAE,MAAM;MACZ,OAAO,GAAG;KACX;IACD,WAAW;MACT,IAAI,EAAE,MAAM;KACb;;;IAGD;MACE,IAAI,EAAE;MACN,OAAO,EAAE;KACV;IACD,YAAY,EAAE,OAAO;IACrB,kBAAkB,EAAE;MAClB,IAAI,EAAE;MACN,OAAO,EAAE;;IAEX;MACE,IAAI,EAAE,CAAC,MAAM,EAAE;MACf,OAAO,EAAE;;iBAEE,EAAE;;MAEb,OAAO,EAAE;;gBAEC;;MAEV,OAAO,EAAE;;WAEJ,EAAE;;MAEP,OAAO;;;;IAIT;gBACY;gBACA;IACZ;;IAEA;IACA,MAAM;;OAEH,CAAC,KAAK,EAAE;IACX,MAAM;IACN,MAAM,MAAM,GAAG;IACf,MAAM;MACJ;;;MAGA,YAAY;MACZ,eAAe;MACf,sBAAsB;MACtB;MACA;MACA,SAAS;MACT;MACA;MACA,cAAc;MACd,WAAW;MACX,gBAAgB;MAChB;MACA,SAAS;MACT,cAAc;MACd,aAAa;MACb,WAAW;MACX;MACA,SAAS;MACT;MACA;MACA;MACA;MACA;MACA;MACA;MACA,IAAI;MACJ,UAAU;MACV,gBAAgB;MAChB,WAAW;MACX,UAAU;MACV,YAAY;MACZ,WAAW;MACX;MACA;MACA,SAAS;MACT,KAAK;MACL,UAAU;MACV,IAAI;MACJ;MACA,SAAS;MACT,WAAW;;QAET;UACE;UACA;MACJ;MACA,QAAQ;MACR;MACA;MACA,OAAO;MACP,SAAS;;MAET,UAAU;;MAEV;MACA;MACA;MACA;MACA,YAAY;MACZ,OAAO;MACP;MACA,YAAY;MACZ;MACA;QACE,MAAM,CAAC;UACL,UAAU,GAAG;MACjB,MAAM,SAAS,GAAG;MAClB,MAAM;MACN,IAAI;QACF;OACD;MACD,OAAO;MACP,CAAC;UACG;MACJ,QAAQ,EAAE,CAAC,EAAE;;KAEd,CAAC,CAAC,CAAC;YACI,mBAAmB,CAAC;MAC1B;MACA,OAAO;kBACK;MACZ;MACA,YAAY;;;MAGZ,kBAAkB;MAClB,cAAc;MACd;MACA;;MAEA;MACA;MACA;QACE;aACK,CAAC;YACF,CAAC;UACH,KAAK,CAAC;QACR;;;UAGE,SAAS,CAAC,KAAK;QACjB,MAAM,OAAO;UACX,KAAK,EAAE,EAAE;UACT,OAAO,EAAE,EAAE;UACX,KAAK;SACN,CAAC;QACF,MAAM;QACN,MAAM,CAAC;OACR;;;OAGA;MACD,QAAQ,CAAC,MAAM;QACb,IAAI,CAAC,SAAS,CAAC;;QAEf,IAAI,SAAS;UACX,UAAU,CAAC,KAAK,GAAG,SAAS;SAC7B;QACD;UACE,MAAM,eAAe;;UAErB,MAAM,MAAM,GAAG,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC;UACjD,WAAW,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC;UACpC,IAAI,MAAM;YACR,MAAM,CAAC;WACR;;QAEH;iBACS,GAAG;;mBAED,CAAC,MAAM;MACpB;MACA,CAAC;QACC,KAAK,CAAC,QAAQ;MAChB;;QAEE,CAAC,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC;SACxB,KAAK,CAAC,kBAAkB;;;YAGrB,EAAE,EAAE,CAAC;aACJ,CAAC,EAAE,GAAG,CAAC,EAAE,GAAG,UAAU,CAAC,KAAK,KAAK,IAAI,GAAG,KAAK,CAAC,GAAG;;;;iBAI7C;gBACD;cACF;;;4BAGc;0BACF;;;MAGpB;MACA;;;MAGA,QAAQ;MACR,WAAW;;;eAGF;MACT,aAAa;;WAER;MACL,aAAa;;;MAGb,eAAe;MACf,YAAY;;;MAGZ;MACA,SAAS;MACT;MACA;MACA;MACA;MACA,SAAS;MACT;MACA,eAAe;MACf;MACA;MACA,WAAW;MACX,IAAI;MACJ,UAAU;MACV;MACA;MACA,UAAU;MACV,YAAY;MACZ;MACA;MACA;MACA,KAAK;MACL;MACA,KAAK;MACL,UAAU;MACV,aAAa;MACb,IAAI;MACJ;MACA;MACA,UAAU;MACV,eAAe;MACf;;;;;;"}
|