@element-plus/nightly 0.0.20240423 → 0.0.20240424
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/attributes.json +1 -1
- package/dist/index.css +1 -1
- package/dist/index.full.js +5 -3
- package/dist/index.full.min.js +9 -9
- package/dist/index.full.min.js.map +1 -1
- package/dist/index.full.min.mjs +9 -9
- package/dist/index.full.min.mjs.map +1 -1
- package/dist/index.full.mjs +5 -3
- package/dist/locale/af.js +1 -1
- package/dist/locale/af.min.js +1 -1
- package/dist/locale/af.min.mjs +1 -1
- package/dist/locale/af.mjs +1 -1
- package/dist/locale/ar-eg.js +1 -1
- package/dist/locale/ar-eg.min.js +1 -1
- package/dist/locale/ar-eg.min.mjs +1 -1
- package/dist/locale/ar-eg.mjs +1 -1
- package/dist/locale/ar.js +1 -1
- package/dist/locale/ar.min.js +1 -1
- package/dist/locale/ar.min.mjs +1 -1
- package/dist/locale/ar.mjs +1 -1
- package/dist/locale/az.js +1 -1
- package/dist/locale/az.min.js +1 -1
- package/dist/locale/az.min.mjs +1 -1
- package/dist/locale/az.mjs +1 -1
- package/dist/locale/bg.js +1 -1
- package/dist/locale/bg.min.js +1 -1
- package/dist/locale/bg.min.mjs +1 -1
- package/dist/locale/bg.mjs +1 -1
- package/dist/locale/bn.js +1 -1
- package/dist/locale/bn.min.js +1 -1
- package/dist/locale/bn.min.mjs +1 -1
- package/dist/locale/bn.mjs +1 -1
- package/dist/locale/ca.js +1 -1
- package/dist/locale/ca.min.js +1 -1
- package/dist/locale/ca.min.mjs +1 -1
- package/dist/locale/ca.mjs +1 -1
- package/dist/locale/ckb.js +1 -1
- package/dist/locale/ckb.min.js +1 -1
- package/dist/locale/ckb.min.mjs +1 -1
- package/dist/locale/ckb.mjs +1 -1
- package/dist/locale/cs.js +1 -1
- package/dist/locale/cs.min.js +1 -1
- package/dist/locale/cs.min.mjs +1 -1
- package/dist/locale/cs.mjs +1 -1
- package/dist/locale/da.js +1 -1
- package/dist/locale/da.min.js +1 -1
- package/dist/locale/da.min.mjs +1 -1
- package/dist/locale/da.mjs +1 -1
- package/dist/locale/de.js +1 -1
- package/dist/locale/de.min.js +1 -1
- package/dist/locale/de.min.mjs +1 -1
- package/dist/locale/de.mjs +1 -1
- package/dist/locale/el.js +1 -1
- package/dist/locale/el.min.js +1 -1
- package/dist/locale/el.min.mjs +1 -1
- package/dist/locale/el.mjs +1 -1
- package/dist/locale/en.js +1 -1
- package/dist/locale/en.min.js +1 -1
- package/dist/locale/en.min.mjs +1 -1
- package/dist/locale/en.mjs +1 -1
- package/dist/locale/eo.js +1 -1
- package/dist/locale/eo.min.js +1 -1
- package/dist/locale/eo.min.mjs +1 -1
- package/dist/locale/eo.mjs +1 -1
- package/dist/locale/es.js +1 -1
- package/dist/locale/es.min.js +1 -1
- package/dist/locale/es.min.mjs +1 -1
- package/dist/locale/es.mjs +1 -1
- package/dist/locale/et.js +1 -1
- package/dist/locale/et.min.js +1 -1
- package/dist/locale/et.min.mjs +1 -1
- package/dist/locale/et.mjs +1 -1
- package/dist/locale/eu.js +1 -1
- package/dist/locale/eu.min.js +1 -1
- package/dist/locale/eu.min.mjs +1 -1
- package/dist/locale/eu.mjs +1 -1
- package/dist/locale/fa.js +1 -1
- package/dist/locale/fa.min.js +1 -1
- package/dist/locale/fa.min.mjs +1 -1
- package/dist/locale/fa.mjs +1 -1
- package/dist/locale/fi.js +1 -1
- package/dist/locale/fi.min.js +1 -1
- package/dist/locale/fi.min.mjs +1 -1
- package/dist/locale/fi.mjs +1 -1
- package/dist/locale/fr.js +1 -1
- package/dist/locale/fr.min.js +1 -1
- package/dist/locale/fr.min.mjs +1 -1
- package/dist/locale/fr.mjs +1 -1
- package/dist/locale/he.js +1 -1
- package/dist/locale/he.min.js +1 -1
- package/dist/locale/he.min.mjs +1 -1
- package/dist/locale/he.mjs +1 -1
- package/dist/locale/hr.js +1 -1
- package/dist/locale/hr.min.js +1 -1
- package/dist/locale/hr.min.mjs +1 -1
- package/dist/locale/hr.mjs +1 -1
- package/dist/locale/hu.js +1 -1
- package/dist/locale/hu.min.js +1 -1
- package/dist/locale/hu.min.mjs +1 -1
- package/dist/locale/hu.mjs +1 -1
- package/dist/locale/hy-am.js +1 -1
- package/dist/locale/hy-am.min.js +1 -1
- package/dist/locale/hy-am.min.mjs +1 -1
- package/dist/locale/hy-am.mjs +1 -1
- package/dist/locale/id.js +1 -1
- package/dist/locale/id.min.js +1 -1
- package/dist/locale/id.min.mjs +1 -1
- package/dist/locale/id.mjs +1 -1
- package/dist/locale/it.js +1 -1
- package/dist/locale/it.min.js +1 -1
- package/dist/locale/it.min.mjs +1 -1
- package/dist/locale/it.mjs +1 -1
- package/dist/locale/ja.js +1 -1
- package/dist/locale/ja.min.js +1 -1
- package/dist/locale/ja.min.mjs +1 -1
- package/dist/locale/ja.mjs +1 -1
- package/dist/locale/kk.js +1 -1
- package/dist/locale/kk.min.js +1 -1
- package/dist/locale/kk.min.mjs +1 -1
- package/dist/locale/kk.mjs +1 -1
- package/dist/locale/km.js +1 -1
- package/dist/locale/km.min.js +1 -1
- package/dist/locale/km.min.mjs +1 -1
- package/dist/locale/km.mjs +1 -1
- package/dist/locale/ko.js +1 -1
- package/dist/locale/ko.min.js +1 -1
- package/dist/locale/ko.min.mjs +1 -1
- package/dist/locale/ko.mjs +1 -1
- package/dist/locale/ku.js +1 -1
- package/dist/locale/ku.min.js +1 -1
- package/dist/locale/ku.min.mjs +1 -1
- package/dist/locale/ku.mjs +1 -1
- package/dist/locale/ky.js +1 -1
- package/dist/locale/ky.min.js +1 -1
- package/dist/locale/ky.min.mjs +1 -1
- package/dist/locale/ky.mjs +1 -1
- package/dist/locale/lt.js +1 -1
- package/dist/locale/lt.min.js +1 -1
- package/dist/locale/lt.min.mjs +1 -1
- package/dist/locale/lt.mjs +1 -1
- package/dist/locale/lv.js +1 -1
- package/dist/locale/lv.min.js +1 -1
- package/dist/locale/lv.min.mjs +1 -1
- package/dist/locale/lv.mjs +1 -1
- package/dist/locale/mg.js +1 -1
- package/dist/locale/mg.min.js +1 -1
- package/dist/locale/mg.min.mjs +1 -1
- package/dist/locale/mg.mjs +1 -1
- package/dist/locale/mn.js +1 -1
- package/dist/locale/mn.min.js +1 -1
- package/dist/locale/mn.min.mjs +1 -1
- package/dist/locale/mn.mjs +1 -1
- package/dist/locale/nb-no.js +1 -1
- package/dist/locale/nb-no.min.js +1 -1
- package/dist/locale/nb-no.min.mjs +1 -1
- package/dist/locale/nb-no.mjs +1 -1
- package/dist/locale/nl.js +1 -1
- package/dist/locale/nl.min.js +1 -1
- package/dist/locale/nl.min.mjs +1 -1
- package/dist/locale/nl.mjs +1 -1
- package/dist/locale/pa.js +1 -1
- package/dist/locale/pa.min.js +1 -1
- package/dist/locale/pa.min.mjs +1 -1
- package/dist/locale/pa.mjs +1 -1
- package/dist/locale/pl.js +1 -1
- package/dist/locale/pl.min.js +1 -1
- package/dist/locale/pl.min.mjs +1 -1
- package/dist/locale/pl.mjs +1 -1
- package/dist/locale/pt-br.js +1 -1
- package/dist/locale/pt-br.min.js +1 -1
- package/dist/locale/pt-br.min.mjs +1 -1
- package/dist/locale/pt-br.mjs +1 -1
- package/dist/locale/pt.js +1 -1
- package/dist/locale/pt.min.js +1 -1
- package/dist/locale/pt.min.mjs +1 -1
- package/dist/locale/pt.mjs +1 -1
- package/dist/locale/ro.js +1 -1
- package/dist/locale/ro.min.js +1 -1
- package/dist/locale/ro.min.mjs +1 -1
- package/dist/locale/ro.mjs +1 -1
- package/dist/locale/ru.js +1 -1
- package/dist/locale/ru.min.js +1 -1
- package/dist/locale/ru.min.mjs +1 -1
- package/dist/locale/ru.mjs +1 -1
- package/dist/locale/sk.js +1 -1
- package/dist/locale/sk.min.js +1 -1
- package/dist/locale/sk.min.mjs +1 -1
- package/dist/locale/sk.mjs +1 -1
- package/dist/locale/sl.js +1 -1
- package/dist/locale/sl.min.js +1 -1
- package/dist/locale/sl.min.mjs +1 -1
- package/dist/locale/sl.mjs +1 -1
- package/dist/locale/sr.js +1 -1
- package/dist/locale/sr.min.js +1 -1
- package/dist/locale/sr.min.mjs +1 -1
- package/dist/locale/sr.mjs +1 -1
- package/dist/locale/sv.js +1 -1
- package/dist/locale/sv.min.js +1 -1
- package/dist/locale/sv.min.mjs +1 -1
- package/dist/locale/sv.mjs +1 -1
- package/dist/locale/sw.js +1 -1
- package/dist/locale/sw.min.js +1 -1
- package/dist/locale/sw.min.mjs +1 -1
- package/dist/locale/sw.mjs +1 -1
- package/dist/locale/ta.js +1 -1
- package/dist/locale/ta.min.js +1 -1
- package/dist/locale/ta.min.mjs +1 -1
- package/dist/locale/ta.mjs +1 -1
- package/dist/locale/th.js +1 -1
- package/dist/locale/th.min.js +1 -1
- package/dist/locale/th.min.mjs +1 -1
- package/dist/locale/th.mjs +1 -1
- package/dist/locale/tk.js +1 -1
- package/dist/locale/tk.min.js +1 -1
- package/dist/locale/tk.min.mjs +1 -1
- package/dist/locale/tk.mjs +1 -1
- package/dist/locale/tr.js +1 -1
- package/dist/locale/tr.min.js +1 -1
- package/dist/locale/tr.min.mjs +1 -1
- package/dist/locale/tr.mjs +1 -1
- package/dist/locale/ug-cn.js +1 -1
- package/dist/locale/ug-cn.min.js +1 -1
- package/dist/locale/ug-cn.min.mjs +1 -1
- package/dist/locale/ug-cn.mjs +1 -1
- package/dist/locale/uk.js +1 -1
- package/dist/locale/uk.min.js +1 -1
- package/dist/locale/uk.min.mjs +1 -1
- package/dist/locale/uk.mjs +1 -1
- package/dist/locale/uz-uz.js +1 -1
- package/dist/locale/uz-uz.min.js +1 -1
- package/dist/locale/uz-uz.min.mjs +1 -1
- package/dist/locale/uz-uz.mjs +1 -1
- package/dist/locale/vi.js +1 -1
- package/dist/locale/vi.min.js +1 -1
- package/dist/locale/vi.min.mjs +1 -1
- package/dist/locale/vi.mjs +1 -1
- package/dist/locale/zh-cn.js +1 -1
- package/dist/locale/zh-cn.min.js +1 -1
- package/dist/locale/zh-cn.min.mjs +1 -1
- package/dist/locale/zh-cn.mjs +1 -1
- package/dist/locale/zh-tw.js +1 -1
- package/dist/locale/zh-tw.min.js +1 -1
- package/dist/locale/zh-tw.min.mjs +1 -1
- package/dist/locale/zh-tw.mjs +1 -1
- package/es/components/color-picker/index.d.ts +4 -0
- package/es/components/color-picker/src/color-picker.d.ts +1 -0
- package/es/components/color-picker/src/color-picker.mjs +3 -0
- package/es/components/color-picker/src/color-picker.mjs.map +1 -1
- package/es/components/color-picker/src/color-picker.vue.d.ts +4 -0
- package/es/components/color-picker/src/color-picker2.mjs +2 -1
- package/es/components/color-picker/src/color-picker2.mjs.map +1 -1
- package/es/components/divider/index.mjs +2 -2
- package/es/components/divider/src/divider.mjs +35 -17
- package/es/components/divider/src/divider.mjs.map +1 -1
- package/es/components/divider/src/divider2.mjs +17 -35
- package/es/components/divider/src/divider2.mjs.map +1 -1
- package/es/components/index.mjs +2 -2
- package/es/components/notification/index.mjs +1 -1
- package/es/components/notification/src/notification.mjs +67 -149
- package/es/components/notification/src/notification.mjs.map +1 -1
- package/es/components/notification/src/notification2.mjs +149 -67
- package/es/components/notification/src/notification2.mjs.map +1 -1
- package/es/components/notification/src/notify.mjs +2 -2
- package/es/index.mjs +2 -2
- package/es/version.d.ts +1 -1
- package/es/version.mjs +1 -1
- package/es/version.mjs.map +1 -1
- package/lib/components/color-picker/index.d.ts +4 -0
- package/lib/components/color-picker/src/color-picker.d.ts +1 -0
- package/lib/components/color-picker/src/color-picker.js +3 -0
- package/lib/components/color-picker/src/color-picker.js.map +1 -1
- package/lib/components/color-picker/src/color-picker.vue.d.ts +4 -0
- package/lib/components/color-picker/src/color-picker2.js +2 -1
- package/lib/components/color-picker/src/color-picker2.js.map +1 -1
- package/lib/components/divider/index.js +2 -2
- package/lib/components/divider/src/divider.js +35 -17
- package/lib/components/divider/src/divider.js.map +1 -1
- package/lib/components/divider/src/divider2.js +17 -35
- package/lib/components/divider/src/divider2.js.map +1 -1
- package/lib/components/index.js +2 -2
- package/lib/components/notification/index.js +1 -1
- package/lib/components/notification/src/notification.js +68 -148
- package/lib/components/notification/src/notification.js.map +1 -1
- package/lib/components/notification/src/notification2.js +148 -68
- package/lib/components/notification/src/notification2.js.map +1 -1
- package/lib/components/notification/src/notify.js +2 -2
- package/lib/index.js +2 -2
- 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/tags.json +1 -1
- package/theme-chalk/el-autocomplete.css +1 -1
- package/theme-chalk/index.css +1 -1
- package/theme-chalk/src/autocomplete.scss +5 -0
- package/web-types.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"color-picker2.js","sources":["../../../../../../packages/components/color-picker/src/color-picker.vue"],"sourcesContent":["<template>\n <el-tooltip\n ref=\"popper\"\n :visible=\"showPicker\"\n :show-arrow=\"false\"\n :fallback-placements=\"['bottom', 'top', 'right', 'left']\"\n :offset=\"0\"\n :gpu-acceleration=\"false\"\n :popper-class=\"[ns.be('picker', 'panel'), ns.b('dropdown'), popperClass]\"\n :stop-popper-mouse-event=\"false\"\n effect=\"light\"\n trigger=\"click\"\n :transition=\"`${ns.namespace.value}-zoom-in-top`\"\n persistent\n @hide=\"setShowPicker(false)\"\n >\n <template #content>\n <div v-click-outside=\"handleClickOutside\" @keydown.esc=\"handleEsc\">\n <div :class=\"ns.be('dropdown', 'main-wrapper')\">\n <hue-slider ref=\"hue\" class=\"hue-slider\" :color=\"color\" vertical />\n <sv-panel ref=\"sv\" :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=\"ns.be('dropdown', 'btns')\">\n <span :class=\"ns.be('dropdown', 'value')\">\n <el-input\n ref=\"inputRef\"\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 :class=\"ns.be('dropdown', 'link-btn')\"\n text\n size=\"small\"\n @click=\"clear\"\n >\n {{ t('el.colorpicker.clear') }}\n </el-button>\n <el-button\n plain\n size=\"small\"\n :class=\"ns.be('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 :id=\"buttonId\"\n ref=\"triggerRef\"\n :class=\"btnKls\"\n role=\"button\"\n :aria-label=\"buttonAriaLabel\"\n :aria-labelledby=\"buttonAriaLabelledby\"\n :aria-description=\"\n t('el.colorpicker.description', { color: modelValue || '' })\n \"\n :aria-disabled=\"colorDisabled\"\n :tabindex=\"colorDisabled ? -1 : tabindex\"\n @keydown=\"handleKeyDown\"\n @focus=\"handleFocus\"\n @blur=\"handleBlur\"\n >\n <div v-if=\"colorDisabled\" :class=\"ns.be('picker', 'mask')\" />\n <div :class=\"ns.be('picker', 'trigger')\" @click=\"handleTrigger\">\n <span :class=\"[ns.be('picker', 'color'), ns.is('alpha', showAlpha)]\">\n <span\n :class=\"ns.be('picker', 'color-inner')\"\n :style=\"{\n backgroundColor: displayedColor,\n }\"\n >\n <el-icon\n v-show=\"modelValue || showPanelColor\"\n :class=\"[ns.be('picker', 'icon'), ns.is('icon-arrow-down')]\"\n >\n <arrow-down />\n </el-icon>\n <el-icon\n v-show=\"!modelValue && !showPanelColor\"\n :class=\"[ns.be('picker', 'empty'), ns.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\" setup>\nimport {\n computed,\n nextTick,\n onMounted,\n provide,\n reactive,\n ref,\n watch,\n} from 'vue'\nimport { debounce } from 'lodash-unified'\nimport { ElButton } from '@element-plus/components/button'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { ClickOutside as vClickOutside } from '@element-plus/directives'\nimport { ElTooltip } from '@element-plus/components/tooltip'\nimport { ElInput } from '@element-plus/components/input'\nimport {\n useFormDisabled,\n useFormItem,\n useFormItemInputId,\n useFormSize,\n} from '@element-plus/components/form'\nimport {\n useDeprecated,\n useFocusController,\n useLocale,\n useNamespace,\n} from '@element-plus/hooks'\nimport { EVENT_CODE, UPDATE_MODEL_EVENT } from '@element-plus/constants'\nimport { debugWarn } from '@element-plus/utils'\nimport { ArrowDown, Close } 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 './utils/color'\nimport {\n colorPickerContextKey,\n colorPickerEmits,\n colorPickerProps,\n} from './color-picker'\nimport type { TooltipInstance } from '@element-plus/components/tooltip'\n\ndefineOptions({\n name: 'ElColorPicker',\n})\nconst props = defineProps(colorPickerProps)\nconst emit = defineEmits(colorPickerEmits)\n\nconst { t } = useLocale()\nconst ns = useNamespace('color')\nconst { formItem } = useFormItem()\nconst colorSize = useFormSize()\nconst colorDisabled = useFormDisabled()\n\nconst { inputId: buttonId, isLabeledByFormItem } = useFormItemInputId(props, {\n formItemContext: formItem,\n})\n\nconst hue = ref<InstanceType<typeof HueSlider>>()\nconst sv = ref<InstanceType<typeof SvPanel>>()\nconst alpha = ref<InstanceType<typeof AlphaSlider>>()\nconst popper = ref<TooltipInstance>()\nconst triggerRef = ref()\nconst inputRef = ref()\n\nconst {\n isFocused,\n handleFocus: _handleFocus,\n handleBlur,\n} = useFocusController(triggerRef, {\n beforeBlur(event) {\n return popper.value?.isFocusInsideContent(event)\n },\n afterBlur() {\n setShowPicker(false)\n resetColor()\n },\n})\n\nconst handleFocus = (event: FocusEvent) => {\n if (colorDisabled.value) return blur()\n _handleFocus(event)\n}\n\n// active-change is used to prevent modelValue changes from triggering.\nlet shouldActiveChange = true\n\nconst color = reactive(\n new Color({\n enableAlpha: props.showAlpha,\n format: props.colorFormat || '',\n value: props.modelValue,\n })\n) as Color\n\nconst showPicker = ref(false)\nconst showPanelColor = ref(false)\nconst customInput = ref('')\n\nconst displayedColor = computed(() => {\n if (!props.modelValue && !showPanelColor.value) {\n return 'transparent'\n }\n return displayedRgb(color, props.showAlpha)\n})\n\nconst currentColor = computed(() => {\n return !props.modelValue && !showPanelColor.value ? '' : color.value\n})\n\nconst buttonAriaLabel = computed<string | undefined>(() => {\n return !isLabeledByFormItem.value\n ? props.label || props.ariaLabel || t('el.colorpicker.defaultLabel')\n : undefined\n})\n\nuseDeprecated(\n {\n from: 'label',\n replacement: 'aria-label',\n version: '2.8.0',\n scope: 'el-color-picker',\n ref: 'https://element-plus.org/en-US/component/color-picker.html',\n },\n computed(() => !!props.label)\n)\n\nconst buttonAriaLabelledby = computed<string | undefined>(() => {\n return isLabeledByFormItem.value ? formItem?.labelId : undefined\n})\n\nconst btnKls = computed(() => {\n return [\n ns.b('picker'),\n ns.is('disabled', colorDisabled.value),\n ns.bm('picker', colorSize.value),\n ns.is('focused', isFocused.value),\n ]\n})\n\nfunction displayedRgb(color: Color, showAlpha: boolean) {\n if (!(color instanceof Color)) {\n throw new TypeError('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\nfunction setShowPicker(value: boolean) {\n showPicker.value = value\n}\n\nconst debounceSetShowPicker = debounce(setShowPicker, 100, { leading: true })\n\nfunction show() {\n if (colorDisabled.value) return\n setShowPicker(true)\n}\n\nfunction hide() {\n debounceSetShowPicker(false)\n resetColor()\n}\n\nfunction resetColor() {\n nextTick(() => {\n if (props.modelValue) {\n color.fromString(props.modelValue)\n } else {\n color.value = ''\n nextTick(() => {\n showPanelColor.value = false\n })\n }\n })\n}\n\nfunction handleTrigger() {\n if (colorDisabled.value) return\n debounceSetShowPicker(!showPicker.value)\n}\n\nfunction handleConfirm() {\n color.fromString(customInput.value)\n}\n\nfunction confirmValue() {\n const value = color.value\n emit(UPDATE_MODEL_EVENT, value)\n emit('change', value)\n if (props.validateEvent) {\n formItem?.validate('change').catch((err) => debugWarn(err))\n }\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 value: props.modelValue,\n })\n if (!color.compare(newColor)) {\n resetColor()\n }\n })\n}\n\nfunction clear() {\n debounceSetShowPicker(false)\n emit(UPDATE_MODEL_EVENT, null)\n emit('change', null)\n if (props.modelValue !== null && props.validateEvent) {\n formItem?.validate('change').catch((err) => debugWarn(err))\n }\n resetColor()\n}\n\nfunction handleClickOutside(event: Event) {\n if (!showPicker.value) return\n hide()\n\n if (isFocused.value) {\n const _event = new FocusEvent('focus', event)\n handleBlur(_event)\n }\n}\n\nfunction handleEsc(event: KeyboardEvent) {\n event.preventDefault()\n event.stopPropagation()\n setShowPicker(false)\n resetColor()\n}\n\nfunction handleKeyDown(event: KeyboardEvent) {\n switch (event.code) {\n case EVENT_CODE.enter:\n case EVENT_CODE.space:\n event.preventDefault()\n event.stopPropagation()\n show()\n inputRef.value.focus()\n break\n case EVENT_CODE.esc:\n handleEsc(event)\n break\n }\n}\n\nfunction focus() {\n triggerRef.value.focus()\n}\n\nfunction blur() {\n triggerRef.value.blur()\n}\n\nonMounted(() => {\n if (props.modelValue) {\n customInput.value = currentColor.value\n }\n})\n\nwatch(\n () => props.modelValue,\n (newVal) => {\n if (!newVal) {\n showPanelColor.value = false\n } else if (newVal && newVal !== color.value) {\n shouldActiveChange = false\n color.fromString(newVal)\n }\n }\n)\n\nwatch(\n () => currentColor.value,\n (val) => {\n customInput.value = val\n shouldActiveChange && emit('activeChange', val)\n shouldActiveChange = true\n }\n)\n\nwatch(\n () => color.value,\n () => {\n if (!props.modelValue && !showPanelColor.value) {\n showPanelColor.value = true\n }\n }\n)\n\nwatch(\n () => showPicker.value,\n () => {\n nextTick(() => {\n hue.value?.update()\n sv.value?.update()\n alpha.value?.update()\n })\n }\n)\n\nprovide(colorPickerContextKey, {\n currentColor,\n})\n\ndefineExpose({\n /**\n * @description current color object\n */\n color,\n /**\n * @description manually show ColorPicker\n */\n show,\n /**\n * @description manually hide ColorPicker\n */\n hide,\n /**\n * @description focus the input element\n */\n focus,\n /**\n * @description blur the input element\n */\n blur,\n})\n</script>\n"],"names":["useLocale","useNamespace","useFormItem","useFormSize","useFormDisabled","useFormItemInputId","ref","useFocusController","Color","computed","color","useDeprecated","debounce","nextTick","UPDATE_MODEL_EVENT","debugWarn","EVENT_CODE","onMounted","watch","provide","colorPickerContextKey"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"color-picker2.js","sources":["../../../../../../packages/components/color-picker/src/color-picker.vue"],"sourcesContent":["<template>\n <el-tooltip\n ref=\"popper\"\n :visible=\"showPicker\"\n :show-arrow=\"false\"\n :fallback-placements=\"['bottom', 'top', 'right', 'left']\"\n :offset=\"0\"\n :gpu-acceleration=\"false\"\n :popper-class=\"[ns.be('picker', 'panel'), ns.b('dropdown'), popperClass]\"\n :stop-popper-mouse-event=\"false\"\n effect=\"light\"\n trigger=\"click\"\n :teleported=\"teleported\"\n :transition=\"`${ns.namespace.value}-zoom-in-top`\"\n persistent\n @hide=\"setShowPicker(false)\"\n >\n <template #content>\n <div v-click-outside=\"handleClickOutside\" @keydown.esc=\"handleEsc\">\n <div :class=\"ns.be('dropdown', 'main-wrapper')\">\n <hue-slider ref=\"hue\" class=\"hue-slider\" :color=\"color\" vertical />\n <sv-panel ref=\"sv\" :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=\"ns.be('dropdown', 'btns')\">\n <span :class=\"ns.be('dropdown', 'value')\">\n <el-input\n ref=\"inputRef\"\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 :class=\"ns.be('dropdown', 'link-btn')\"\n text\n size=\"small\"\n @click=\"clear\"\n >\n {{ t('el.colorpicker.clear') }}\n </el-button>\n <el-button\n plain\n size=\"small\"\n :class=\"ns.be('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 :id=\"buttonId\"\n ref=\"triggerRef\"\n :class=\"btnKls\"\n role=\"button\"\n :aria-label=\"buttonAriaLabel\"\n :aria-labelledby=\"buttonAriaLabelledby\"\n :aria-description=\"\n t('el.colorpicker.description', { color: modelValue || '' })\n \"\n :aria-disabled=\"colorDisabled\"\n :tabindex=\"colorDisabled ? -1 : tabindex\"\n @keydown=\"handleKeyDown\"\n @focus=\"handleFocus\"\n @blur=\"handleBlur\"\n >\n <div v-if=\"colorDisabled\" :class=\"ns.be('picker', 'mask')\" />\n <div :class=\"ns.be('picker', 'trigger')\" @click=\"handleTrigger\">\n <span :class=\"[ns.be('picker', 'color'), ns.is('alpha', showAlpha)]\">\n <span\n :class=\"ns.be('picker', 'color-inner')\"\n :style=\"{\n backgroundColor: displayedColor,\n }\"\n >\n <el-icon\n v-show=\"modelValue || showPanelColor\"\n :class=\"[ns.be('picker', 'icon'), ns.is('icon-arrow-down')]\"\n >\n <arrow-down />\n </el-icon>\n <el-icon\n v-show=\"!modelValue && !showPanelColor\"\n :class=\"[ns.be('picker', 'empty'), ns.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\" setup>\nimport {\n computed,\n nextTick,\n onMounted,\n provide,\n reactive,\n ref,\n watch,\n} from 'vue'\nimport { debounce } from 'lodash-unified'\nimport { ElButton } from '@element-plus/components/button'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { ClickOutside as vClickOutside } from '@element-plus/directives'\nimport { ElTooltip } from '@element-plus/components/tooltip'\nimport { ElInput } from '@element-plus/components/input'\nimport {\n useFormDisabled,\n useFormItem,\n useFormItemInputId,\n useFormSize,\n} from '@element-plus/components/form'\nimport {\n useDeprecated,\n useFocusController,\n useLocale,\n useNamespace,\n} from '@element-plus/hooks'\nimport { EVENT_CODE, UPDATE_MODEL_EVENT } from '@element-plus/constants'\nimport { debugWarn } from '@element-plus/utils'\nimport { ArrowDown, Close } 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 './utils/color'\nimport {\n colorPickerContextKey,\n colorPickerEmits,\n colorPickerProps,\n} from './color-picker'\nimport type { TooltipInstance } from '@element-plus/components/tooltip'\n\ndefineOptions({\n name: 'ElColorPicker',\n})\nconst props = defineProps(colorPickerProps)\nconst emit = defineEmits(colorPickerEmits)\n\nconst { t } = useLocale()\nconst ns = useNamespace('color')\nconst { formItem } = useFormItem()\nconst colorSize = useFormSize()\nconst colorDisabled = useFormDisabled()\n\nconst { inputId: buttonId, isLabeledByFormItem } = useFormItemInputId(props, {\n formItemContext: formItem,\n})\n\nconst hue = ref<InstanceType<typeof HueSlider>>()\nconst sv = ref<InstanceType<typeof SvPanel>>()\nconst alpha = ref<InstanceType<typeof AlphaSlider>>()\nconst popper = ref<TooltipInstance>()\nconst triggerRef = ref()\nconst inputRef = ref()\n\nconst {\n isFocused,\n handleFocus: _handleFocus,\n handleBlur,\n} = useFocusController(triggerRef, {\n beforeBlur(event) {\n return popper.value?.isFocusInsideContent(event)\n },\n afterBlur() {\n setShowPicker(false)\n resetColor()\n },\n})\n\nconst handleFocus = (event: FocusEvent) => {\n if (colorDisabled.value) return blur()\n _handleFocus(event)\n}\n\n// active-change is used to prevent modelValue changes from triggering.\nlet shouldActiveChange = true\n\nconst color = reactive(\n new Color({\n enableAlpha: props.showAlpha,\n format: props.colorFormat || '',\n value: props.modelValue,\n })\n) as Color\n\nconst showPicker = ref(false)\nconst showPanelColor = ref(false)\nconst customInput = ref('')\n\nconst displayedColor = computed(() => {\n if (!props.modelValue && !showPanelColor.value) {\n return 'transparent'\n }\n return displayedRgb(color, props.showAlpha)\n})\n\nconst currentColor = computed(() => {\n return !props.modelValue && !showPanelColor.value ? '' : color.value\n})\n\nconst buttonAriaLabel = computed<string | undefined>(() => {\n return !isLabeledByFormItem.value\n ? props.label || props.ariaLabel || t('el.colorpicker.defaultLabel')\n : undefined\n})\n\nuseDeprecated(\n {\n from: 'label',\n replacement: 'aria-label',\n version: '2.8.0',\n scope: 'el-color-picker',\n ref: 'https://element-plus.org/en-US/component/color-picker.html',\n },\n computed(() => !!props.label)\n)\n\nconst buttonAriaLabelledby = computed<string | undefined>(() => {\n return isLabeledByFormItem.value ? formItem?.labelId : undefined\n})\n\nconst btnKls = computed(() => {\n return [\n ns.b('picker'),\n ns.is('disabled', colorDisabled.value),\n ns.bm('picker', colorSize.value),\n ns.is('focused', isFocused.value),\n ]\n})\n\nfunction displayedRgb(color: Color, showAlpha: boolean) {\n if (!(color instanceof Color)) {\n throw new TypeError('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\nfunction setShowPicker(value: boolean) {\n showPicker.value = value\n}\n\nconst debounceSetShowPicker = debounce(setShowPicker, 100, { leading: true })\n\nfunction show() {\n if (colorDisabled.value) return\n setShowPicker(true)\n}\n\nfunction hide() {\n debounceSetShowPicker(false)\n resetColor()\n}\n\nfunction resetColor() {\n nextTick(() => {\n if (props.modelValue) {\n color.fromString(props.modelValue)\n } else {\n color.value = ''\n nextTick(() => {\n showPanelColor.value = false\n })\n }\n })\n}\n\nfunction handleTrigger() {\n if (colorDisabled.value) return\n debounceSetShowPicker(!showPicker.value)\n}\n\nfunction handleConfirm() {\n color.fromString(customInput.value)\n}\n\nfunction confirmValue() {\n const value = color.value\n emit(UPDATE_MODEL_EVENT, value)\n emit('change', value)\n if (props.validateEvent) {\n formItem?.validate('change').catch((err) => debugWarn(err))\n }\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 value: props.modelValue,\n })\n if (!color.compare(newColor)) {\n resetColor()\n }\n })\n}\n\nfunction clear() {\n debounceSetShowPicker(false)\n emit(UPDATE_MODEL_EVENT, null)\n emit('change', null)\n if (props.modelValue !== null && props.validateEvent) {\n formItem?.validate('change').catch((err) => debugWarn(err))\n }\n resetColor()\n}\n\nfunction handleClickOutside(event: Event) {\n if (!showPicker.value) return\n hide()\n\n if (isFocused.value) {\n const _event = new FocusEvent('focus', event)\n handleBlur(_event)\n }\n}\n\nfunction handleEsc(event: KeyboardEvent) {\n event.preventDefault()\n event.stopPropagation()\n setShowPicker(false)\n resetColor()\n}\n\nfunction handleKeyDown(event: KeyboardEvent) {\n switch (event.code) {\n case EVENT_CODE.enter:\n case EVENT_CODE.space:\n event.preventDefault()\n event.stopPropagation()\n show()\n inputRef.value.focus()\n break\n case EVENT_CODE.esc:\n handleEsc(event)\n break\n }\n}\n\nfunction focus() {\n triggerRef.value.focus()\n}\n\nfunction blur() {\n triggerRef.value.blur()\n}\n\nonMounted(() => {\n if (props.modelValue) {\n customInput.value = currentColor.value\n }\n})\n\nwatch(\n () => props.modelValue,\n (newVal) => {\n if (!newVal) {\n showPanelColor.value = false\n } else if (newVal && newVal !== color.value) {\n shouldActiveChange = false\n color.fromString(newVal)\n }\n }\n)\n\nwatch(\n () => currentColor.value,\n (val) => {\n customInput.value = val\n shouldActiveChange && emit('activeChange', val)\n shouldActiveChange = true\n }\n)\n\nwatch(\n () => color.value,\n () => {\n if (!props.modelValue && !showPanelColor.value) {\n showPanelColor.value = true\n }\n }\n)\n\nwatch(\n () => showPicker.value,\n () => {\n nextTick(() => {\n hue.value?.update()\n sv.value?.update()\n alpha.value?.update()\n })\n }\n)\n\nprovide(colorPickerContextKey, {\n currentColor,\n})\n\ndefineExpose({\n /**\n * @description current color object\n */\n color,\n /**\n * @description manually show ColorPicker\n */\n show,\n /**\n * @description manually hide ColorPicker\n */\n hide,\n /**\n * @description focus the input element\n */\n focus,\n /**\n * @description blur the input element\n */\n blur,\n})\n</script>\n"],"names":["useLocale","useNamespace","useFormItem","useFormSize","useFormDisabled","useFormItemInputId","ref","useFocusController","Color","computed","color","useDeprecated","debounce","nextTick","UPDATE_MODEL_EVENT","debugWarn","EVENT_CODE","onMounted","watch","provide","colorPickerContextKey"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uCAqJc,CAAA;AAAA,EACZ,IAAM,EAAA,eAAA;AACR,CAAA,CAAA,CAAA;;;;;;;AAIA,IAAM,MAAA,EAAE,MAAMA,eAAU,EAAA,CAAA;AACxB,IAAM,MAAA,EAAA,GAAKC,qBAAa,OAAO,CAAA,CAAA;AAC/B,IAAM,MAAA,EAAE,aAAaC,uBAAY,EAAA,CAAA;AACjC,IAAA,MAAM,YAAYC,8BAAY,EAAA,CAAA;AAC9B,IAAA,MAAM,gBAAgBC,kCAAgB,EAAA,CAAA;AAEtC,IAAA,MAAM,EAAE,OAAA,EAAS,QAAU,EAAA,mBAAA,EAAA,GAAwBC,+BAAmB,KAAO,EAAA;AAAA,MAC3E,eAAiB,EAAA,QAAA;AAAA,KAClB,CAAA,CAAA;AAED,IAAA,MAAM,MAAMC,OAAoC,EAAA,CAAA;AAChD,IAAA,MAAM,KAAKA,OAAkC,EAAA,CAAA;AAC7C,IAAA,MAAM,QAAQA,OAAsC,EAAA,CAAA;AACpD,IAAA,MAAM,SAASA,OAAqB,EAAA,CAAA;AACpC,IAAA,MAAM,aAAaA,OAAI,EAAA,CAAA;AACvB,IAAA,MAAM,WAAWA,OAAI,EAAA,CAAA;AAErB,IAAM,MAAA;AAAA,MACJ,SAAA;AAAA,MACA,WAAa,EAAA,YAAA;AAAA,MACb,UAAA;AAAA,KAAA,GACEC,2BAAmB,UAAY,EAAA;AAAA,MACjC,WAAW,KAAO,EAAA;AAChB,QAAO,IAAA,EAAA,CAAA;AAAwC,QACjD,OAAA,CAAA,EAAA,GAAA,MAAA,CAAA,KAAA,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,KAAA,CAAA,CAAA;AAAA,OACY;AACV,MAAA,SAAA,GAAA;AACA,QAAW,aAAA,CAAA,KAAA,CAAA,CAAA;AAAA,QACb,UAAA,EAAA,CAAA;AAAA,OACD;AAED,KAAM,CAAA,CAAA;AACJ,IAAA,MAAI,WAAc,GAAA,CAAA,KAAA,KAAA;AAAO,MAAA,IAAA,aAAY,CAAA,KAAA;AACrC,QAAA,OAAA,IAAa,EAAK,CAAA;AAAA,MACpB,YAAA,CAAA,KAAA,CAAA,CAAA;AAGA,KAAA,CAAA;AAEA,IAAM,IAAA,kBACJ,GAAA,IAAU,CAAA;AAAA,IAAA,4BACW,CAAA,IAAAC,gBAAA,CAAA;AAAA,MACnB,kBAA6B,CAAA,SAAA;AAAA,MAC7B,QAAa,KAAA,CAAA,WAAA,IAAA,EAAA;AAAA,MAEjB,KAAA,EAAA,KAAA,CAAA,UAAA;AAEA,KAAM,CAAA,CAAA,CAAA;AACN,IAAM,MAAA,UAAA,GAAAF,OAAA,CAAiB,KAAS,CAAA,CAAA;AAChC,IAAM,MAAA,cAAc,UAAM,CAAA,KAAA,CAAA,CAAA;AAE1B,IAAM,MAAA,WAAA,GAAAA,OAAiB;AACrB,IAAA,MAAI,cAAqB,GAAAG;AACvB,MAAO,IAAA,CAAA,KAAA,CAAA,UAAA,IAAA,CAAA,cAAA,CAAA,KAAA,EAAA;AAAA,QACT,OAAA,aAAA,CAAA;AACA,OAAO;AAAmC,MAC3C,OAAA,YAAA,CAAAC,OAAA,EAAA,KAAA,CAAA,SAAA,CAAA,CAAA;AAED,KAAM,CAAA,CAAA;AACJ,IAAA,MAAA,YAAc,GAAAD,YAAA,CAAc,MAAgB;AAAmB,MAChE,OAAA,CAAA,KAAA,CAAA,UAAA,IAAA,CAAA,cAAA,CAAA,KAAA,GAAA,EAAA,GAAAC,OAAA,CAAA,KAAA,CAAA;AAED,KAAM,CAAA,CAAA;AACJ,IAAO,MAAA,8BACH,CAAA,MAAA;AACA,MACL,OAAA,CAAA,mBAAA,CAAA,KAAA,GAAA,KAAA,CAAA,KAAA,IAAA,KAAA,CAAA,SAAA,IAAA,CAAA,CAAA,6BAAA,CAAA,GAAA,KAAA,CAAA,CAAA;AAED,KACE,CAAA,CAAA;AAAA,IAAAC,qBACQ,CAAA;AAAA,MACN,IAAa,EAAA,OAAA;AAAA,MACb,WAAS,EAAA,YAAA;AAAA,MACT,OAAO,EAAA,OAAA;AAAA,MACP,KAAK,EAAA,iBAAA;AAAA,SAEE,EAAA,4DACX;AAEA,KAAM,EAAAF,YAAA,CAAA,MAAA,CAAA,CAAA,KAAA,CAAA;AACJ,IAAO,MAAA,oBAAA,GAAoBA,YAAQ,CAAA,MAAA;AAAoB,MACxD,OAAA,mBAAA,CAAA,KAAA,GAAA,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,OAAA,GAAA,KAAA,CAAA,CAAA;AAED,KAAM,CAAA,CAAA;AACJ,IAAO,MAAA,MAAA,GAAAA,YAAA,CAAA,MAAA;AAAA,MACL,OAAK;AAAQ,QACb,EAAG,CAAA,CAAA,CAAA,QAAe,CAAA;AAAmB,QACrC,EAAG,CAAA,EAAA,CAAG,UAAU,EAAA,aAAe,CAAA,KAAA,CAAA;AAAA,QAC/B,EAAG,CAAA,EAAA,CAAG,QAAW,EAAA,SAAA,CAAA,KAAe,CAAA;AAAA,QAClC,EAAA,CAAA,EAAA,CAAA,SAAA,EAAA,SAAA,CAAA,KAAA,CAAA;AAAA,OACD,CAAA;AAED,KAAA,CAAA,CAAA;AACE,IAAI,4BAA2B,EAAA,SAAA,EAAA;AAC7B,MAAM,IAAA,EAAA,MAAI,YAAoDD,gBAAA,CAAA,EAAA;AAAA,QAChE,MAAA,IAAA,SAAA,CAAA,0CAAA,CAAA,CAAA;AAEA,OAAA;AACA,MAAA,MAAA,EACI,CAAA,EAAA,CAAA,EAAA,CAAA,EAAA,GAAA,MAAA,CAAQ,KAAM,EAAA,CAAA;AACK,MACzB,OAAA,SAAA,GAAA,CAAA,KAAA,EAAA,CAAA,CAAA,EAAA,EAAA,CAAA,CAAA,EAAA,EAAA,CAAA,CAAA,EAAA,EAAA,MAAA,CAAA,GAAA,CAAA,OAAA,CAAA,GAAA,GAAA,CAAA,CAAA,CAAA,GAAA,CAAA,IAAA,EAAA,CAAA,CAAA,EAAA,EAAA,CAAA,CAAA,EAAA,EAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AAEA,KAAA;AACE,IAAA,SAAA,aAAmB,CAAA,KAAA,EAAA;AAAA,MACrB,UAAA,CAAA,KAAA,GAAA,KAAA,CAAA;AAEA,KAAA;AAEA,IAAgB,MAAA,qBAAA,GAAAI,sBAAA,CAAA,aAAA,EAAA,GAAA,EAAA,EAAA,OAAA,EAAA,IAAA,EAAA,CAAA,CAAA;AACd,IAAA,SAAkB,IAAA,GAAA;AAAO,MAAA,IAAA,aAAA,CAAA,KAAA;AACzB,QAAA,OAAA;AAAkB,MACpB,aAAA,CAAA,IAAA,CAAA,CAAA;AAEA,KAAgB;AACd,IAAA,SAAA,IAAA,GAAA;AACA,MAAW,qBAAA,CAAA,KAAA,CAAA,CAAA;AAAA,MACb,UAAA,EAAA,CAAA;AAEA,KAAsB;AACpB,IAAA,SAAA,UAAe,GAAA;AACb,MAAAC,mBAAsB;AACpB,QAAM,IAAA,KAAA,CAAA;AAA2B,UAC5BH,OAAA,CAAA,UAAA,CAAA,KAAA,CAAA,UAAA,CAAA,CAAA;AACL,SAAA,MAAA;AACA,UAAAA,OAAA,CAAA,KAAe,GAAA,EAAA,CAAA;AACb,UAAAG,YAAA,CAAA,MAAA;AAAuB,YACxB,cAAA,CAAA,KAAA,GAAA,KAAA,CAAA;AAAA,WACH,CAAA,CAAA;AAAA,SACD;AAAA,OACH,CAAA,CAAA;AAEA,KAAyB;AACvB,IAAA,SAAkB,aAAA,GAAA;AAAO,MAAA,IAAA,aAAA,CAAA,KAAA;AACzB,QAAsB,OAAA;AAAiB,MACzC,qBAAA,CAAA,CAAA,UAAA,CAAA,KAAA,CAAA,CAAA;AAEA,KAAyB;AACvB,IAAM,SAAA;AAA4B,MACpCH,OAAA,CAAA,UAAA,CAAA,WAAA,CAAA,KAAA,CAAA,CAAA;AAEA,KAAwB;AACtB,IAAA,qBAAoB,GAAA;AACpB,MAAA,2BAAyB,CAAK;AAC9B,MAAA,IAAA,CAAKI,wBAAe,EAAA,KAAA,CAAA,CAAA;AACpB,MAAA,IAAI,SAAqB,EAAA,KAAA,CAAA,CAAA;AACvB,MAAU,IAAA,KAAA,CAAA;AAAgD,QAC5D,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,QAAA,CAAA,QAAA,CAAA,CAAA,KAAA,CAAA,CAAA,GAAA,KAAAC,eAAA,CAAA,GAAA,CAAA,CAAA,CAAA;AACA,OAAA;AAEA,MAAA,qBAAe,CAAA,KAAA,CAAA,CAAA;AACb,MAAMF,YAAA,CAAA,MAAA;AAAqB,QAAA,iBACN,IAAAL,gBAAA,CAAA;AAAA,UACnB,kBAA6B,CAAA,SAAA;AAAA,UAC7B,QAAa,KAAA,CAAA,WAAA,IAAA,EAAA;AAAA,UACd,KAAA,EAAA,KAAA,CAAA,UAAA;AACD,SAAA,CAAA,CAAA;AACE,QAAW,IAAA,CAAAE,OAAA,CAAA,OAAA,CAAA,QAAA,CAAA,EAAA;AAAA,UACb,UAAA,EAAA,CAAA;AAAA,SACD;AAAA,OACH,CAAA,CAAA;AAEA,KAAiB;AACf,IAAA,SAAA,KAAA,GAAA;AACA,MAAA,2BAA6B,CAAA,CAAA;AAC7B,MAAA,IAAA,CAAKI,wBAAc,EAAA,IAAA,CAAA,CAAA;AACnB,MAAA,IAAI,CAAM,QAAA,EAAA,IAAA,CAAA,CAAA;AACR,MAAU,IAAA,KAAA,CAAA,UAAA,SAAiB,IAAE,KAAO,CAAQ,aAAA,EAAA;AAAc,QAC5D,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,QAAA,CAAA,QAAA,CAAA,CAAA,KAAA,CAAA,CAAA,GAAA,KAAAC,eAAA,CAAA,GAAA,CAAA,CAAA,CAAA;AACA,OAAW;AAAA,MACb,UAAA,EAAA,CAAA;AAEA,KAAA;AACE,IAAA,SAAgB,kBAAA,CAAA,KAAA,EAAA;AAAO,MAAA,IAAA,CAAA,UAAA,CAAA,KAAA;AACvB,QAAK,OAAA;AAEL,MAAA,IAAI;AACF,MAAA,IAAA,SAAe,CAAA,KAAA,EAAI;AACnB,QAAA,MAAA,MAAiB,GAAA,IAAA,UAAA,CAAA,OAAA,EAAA,KAAA,CAAA,CAAA;AAAA,QACnB,UAAA,CAAA,MAAA,CAAA,CAAA;AAAA,OACF;AAEA,KAAA;AACE,IAAA,SAAqB,SAAA,CAAA,KAAA,EAAA;AACrB,MAAA,KAAA,CAAM,cAAgB,EAAA,CAAA;AACtB,MAAA,KAAA,CAAA,eAAmB,EAAA,CAAA;AACnB,MAAW,aAAA,CAAA,KAAA,CAAA,CAAA;AAAA,MACb,UAAA,EAAA,CAAA;AAEA,KAAA;AACE,IAAA,SAAA,aAAc,CAAA,KAAA,EAAA;AAAA,MAAA,QACI,KAAA,CAAA,IAAA;AAAA,QAAA,KACXC,eAAW,CAAA,KAAA,CAAA;AACd,QAAA,KAAAA,eAAqB,CAAA,KAAA;AACrB,UAAA,KAAA,CAAM,cAAgB,EAAA,CAAA;AACtB,UAAK,KAAA,CAAA,eAAA,EAAA,CAAA;AACL,UAAA,IAAA,EAAA,CAAA;AACA,UAAA,QAAA,CAAA,KAAA,CAAA,KAAA,EAAA,CAAA;AAAA,UAAA,MACc;AACd,QAAA,KAAAA,eAAe,CAAA,GAAA;AACf,UAAA,SAAA,CAAA,KAAA,CAAA,CAAA;AAAA,UAAA,MAAA;AAAA,OAEN;AAEA,KAAiB;AACf,IAAA,SAAA;AAAuB,MACzB,UAAA,CAAA,KAAA,CAAA,KAAA,EAAA,CAAA;AAEA,KAAgB;AACd,IAAA,SAAA,IAAW;AAAW,MACxB,UAAA,CAAA,KAAA,CAAA,IAAA,EAAA,CAAA;AAEA,KAAA;AACE,IAAAC,oBAAsB;AACpB,MAAA,IAAA,KAAA,CAAA,YAAoB;AAAa,QACnC,WAAA,CAAA,KAAA,GAAA,YAAA,CAAA,KAAA,CAAA;AAAA,OACD;AAED,KAAA,CAAA,CAAA;AAGI,IAAAC,SAAA,CAAI,MAAS,KAAA,CAAA,UAAA,EAAA,CAAA,MAAA,KAAA;AACX,MAAA,IAAA,CAAA,MAAA,EAAA;AAAuB,QACd,cAAA,CAAA,KAAqB,GAAA,KAAA,CAAA;AAC9B,OAAqB,MAAA,IAAA,MAAA,IAAA,MAAA,KAAAR,OAAA,CAAA,KAAA,EAAA;AACrB,QAAA,kBAAuB,GAAA,KAAA,CAAA;AAAA,QACzBA,OAAA,CAAA,UAAA,CAAA,MAAA,CAAA,CAAA;AAAA,OAEJ;AAEA,KAAA,CAAA,CAAA;AAGI,IAAAQ,SAAA,CAAA,MAAA,YAAoB,CAAA,KAAA,EAAA,CAAA,GAAA,KAAA;AACpB,MAAsB,WAAA,CAAA,KAAA,GAAA,GAAA,CAAA;AACtB,MAAqB,kBAAA,IAAA,IAAA,CAAA,cAAA,EAAA,GAAA,CAAA,CAAA;AAAA,MAEzB,kBAAA,GAAA,IAAA,CAAA;AAEA,KACE,CAAA,CAAA;AAEE,IAAAA,SAAA,CAAI,MAACR,OAAoB,CAAA,KAAA,EAAA;AACvB,MAAA,IAAA,CAAA,KAAA,CAAA,UAAuB,IAAA,CAAA,cAAA,CAAA,KAAA,EAAA;AAAA,QACzB,cAAA,CAAA,KAAA,GAAA,IAAA,CAAA;AAAA,OAEJ;AAEA,KACE,CAAA,CAAA;AAEE,IAAAQ,SAAA,CAAA,MAAe,UAAA,CAAA,KAAA,EAAA,MAAA;AACb,MAAAL,mBAAkB;AAClB,QAAA,UAAU,EAAO,EAAA,CAAA;AACjB,QAAA,CAAA,EAAA,GAAM,SAAc,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,MAAA,EAAA,CAAA;AAAA,QACrB,CAAA,EAAA,GAAA,EAAA,CAAA,KAAA,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,MAAA,EAAA,CAAA;AAAA,QAEL,CAAA,EAAA,GAAA,KAAA,CAAA,KAAA,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,MAAA,EAAA,CAAA;AAEA,OAAA,CAAA,CAAA;AAA+B,KAC7B,CAAA,CAAA;AAAA,IACFM,WAAC,CAAAC,iCAAA,EAAA;AAED,MAAa,YAAA;AAAA,KAIX,CAAA,CAAA;AAAA,IAIA,MAAA,CAAA;AAAA,aAIAV,OAAA;AAAA,MAIA,IAAA;AAAA,MAIA,IAAA;AAAA,MACD,KAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -3,8 +3,8 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
require('../../utils/index.js');
|
|
6
|
-
var divider$1 = require('./src/
|
|
7
|
-
var divider = require('./src/
|
|
6
|
+
var divider$1 = require('./src/divider.js');
|
|
7
|
+
var divider = require('./src/divider2.js');
|
|
8
8
|
var install = require('../../utils/vue/install.js');
|
|
9
9
|
|
|
10
10
|
const ElDivider = install.withInstall(divider$1["default"]);
|
|
@@ -2,25 +2,43 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
require('
|
|
6
|
-
|
|
5
|
+
var vue = require('vue');
|
|
6
|
+
require('../../../hooks/index.js');
|
|
7
|
+
var divider = require('./divider2.js');
|
|
8
|
+
var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
|
|
9
|
+
var index = require('../../../hooks/use-namespace/index.js');
|
|
7
10
|
|
|
8
|
-
const
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
11
|
+
const __default__ = vue.defineComponent({
|
|
12
|
+
name: "ElDivider"
|
|
13
|
+
});
|
|
14
|
+
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
15
|
+
...__default__,
|
|
16
|
+
props: divider.dividerProps,
|
|
17
|
+
setup(__props) {
|
|
18
|
+
const props = __props;
|
|
19
|
+
const ns = index.useNamespace("divider");
|
|
20
|
+
const dividerStyle = vue.computed(() => {
|
|
21
|
+
return ns.cssVar({
|
|
22
|
+
"border-style": props.borderStyle
|
|
23
|
+
});
|
|
24
|
+
});
|
|
25
|
+
return (_ctx, _cache) => {
|
|
26
|
+
return vue.openBlock(), vue.createElementBlock("div", {
|
|
27
|
+
class: vue.normalizeClass([vue.unref(ns).b(), vue.unref(ns).m(_ctx.direction)]),
|
|
28
|
+
style: vue.normalizeStyle(vue.unref(dividerStyle)),
|
|
29
|
+
role: "separator"
|
|
30
|
+
}, [
|
|
31
|
+
_ctx.$slots.default && _ctx.direction !== "vertical" ? (vue.openBlock(), vue.createElementBlock("div", {
|
|
32
|
+
key: 0,
|
|
33
|
+
class: vue.normalizeClass([vue.unref(ns).e("text"), vue.unref(ns).is(_ctx.contentPosition)])
|
|
34
|
+
}, [
|
|
35
|
+
vue.renderSlot(_ctx.$slots, "default")
|
|
36
|
+
], 2)) : vue.createCommentVNode("v-if", true)
|
|
37
|
+
], 6);
|
|
38
|
+
};
|
|
22
39
|
}
|
|
23
40
|
});
|
|
41
|
+
var Divider = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "divider.vue"]]);
|
|
24
42
|
|
|
25
|
-
exports
|
|
43
|
+
exports["default"] = Divider;
|
|
26
44
|
//# sourceMappingURL=divider.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"divider.js","sources":["../../../../../../packages/components/divider/src/divider.
|
|
1
|
+
{"version":3,"file":"divider.js","sources":["../../../../../../packages/components/divider/src/divider.vue"],"sourcesContent":["<template>\n <div\n :class=\"[ns.b(), ns.m(direction)]\"\n :style=\"dividerStyle\"\n role=\"separator\"\n >\n <div\n v-if=\"$slots.default && direction !== 'vertical'\"\n :class=\"[ns.e('text'), ns.is(contentPosition)]\"\n >\n <slot />\n </div>\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed } from 'vue'\nimport { useNamespace } from '@element-plus/hooks'\nimport { dividerProps } from './divider'\nimport type { CSSProperties } from 'vue'\n\ndefineOptions({\n name: 'ElDivider',\n})\nconst props = defineProps(dividerProps)\nconst ns = useNamespace('divider')\nconst dividerStyle = computed(() => {\n return ns.cssVar({\n 'border-style': props.borderStyle,\n }) as CSSProperties\n})\n</script>\n"],"names":["useNamespace","computed"],"mappings":";;;;;;;;;;uCAqBc,CAAA;AAAA,EACZ,IAAM,EAAA,WAAA;AACR,CAAA,CAAA,CAAA;;;;;;AAEA,IAAM,MAAA,EAAA,GAAKA,mBAAa,SAAS,CAAA,CAAA;AACjC,IAAM,MAAA,YAAA,GAAeC,aAAS,MAAM;AAClC,MAAA,OAAO,GAAG,MAAO,CAAA;AAAA,QACf,gBAAgB,KAAM,CAAA,WAAA;AAAA,OACvB,CAAA,CAAA;AAAA,KACF,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -2,43 +2,25 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
require('../../../
|
|
7
|
-
var divider = require('./divider.js');
|
|
8
|
-
var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
|
|
9
|
-
var index = require('../../../hooks/use-namespace/index.js');
|
|
5
|
+
require('../../../utils/index.js');
|
|
6
|
+
var runtime = require('../../../utils/vue/props/runtime.js');
|
|
10
7
|
|
|
11
|
-
const
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
return (_ctx, _cache) => {
|
|
26
|
-
return vue.openBlock(), vue.createElementBlock("div", {
|
|
27
|
-
class: vue.normalizeClass([vue.unref(ns).b(), vue.unref(ns).m(_ctx.direction)]),
|
|
28
|
-
style: vue.normalizeStyle(vue.unref(dividerStyle)),
|
|
29
|
-
role: "separator"
|
|
30
|
-
}, [
|
|
31
|
-
_ctx.$slots.default && _ctx.direction !== "vertical" ? (vue.openBlock(), vue.createElementBlock("div", {
|
|
32
|
-
key: 0,
|
|
33
|
-
class: vue.normalizeClass([vue.unref(ns).e("text"), vue.unref(ns).is(_ctx.contentPosition)])
|
|
34
|
-
}, [
|
|
35
|
-
vue.renderSlot(_ctx.$slots, "default")
|
|
36
|
-
], 2)) : vue.createCommentVNode("v-if", true)
|
|
37
|
-
], 6);
|
|
38
|
-
};
|
|
8
|
+
const dividerProps = runtime.buildProps({
|
|
9
|
+
direction: {
|
|
10
|
+
type: String,
|
|
11
|
+
values: ["horizontal", "vertical"],
|
|
12
|
+
default: "horizontal"
|
|
13
|
+
},
|
|
14
|
+
contentPosition: {
|
|
15
|
+
type: String,
|
|
16
|
+
values: ["left", "center", "right"],
|
|
17
|
+
default: "center"
|
|
18
|
+
},
|
|
19
|
+
borderStyle: {
|
|
20
|
+
type: runtime.definePropType(String),
|
|
21
|
+
default: "solid"
|
|
39
22
|
}
|
|
40
23
|
});
|
|
41
|
-
var Divider = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "divider.vue"]]);
|
|
42
24
|
|
|
43
|
-
exports
|
|
25
|
+
exports.dividerProps = dividerProps;
|
|
44
26
|
//# sourceMappingURL=divider2.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"divider2.js","sources":["../../../../../../packages/components/divider/src/divider.
|
|
1
|
+
{"version":3,"file":"divider2.js","sources":["../../../../../../packages/components/divider/src/divider.ts"],"sourcesContent":["import { buildProps, definePropType } from '@element-plus/utils'\nimport type { ExtractPropTypes } from 'vue'\nimport type Divider from './divider.vue'\n\nexport type BorderStyle = CSSStyleDeclaration['borderStyle']\n\nexport const dividerProps = buildProps({\n /**\n * @description Set divider's direction\n */\n direction: {\n type: String,\n values: ['horizontal', 'vertical'],\n default: 'horizontal',\n },\n /**\n * @description Set the style of divider\n */\n contentPosition: {\n type: String,\n values: ['left', 'center', 'right'],\n default: 'center',\n },\n /**\n * @description the position of the customized content on the divider line\n */\n borderStyle: {\n type: definePropType<BorderStyle>(String),\n default: 'solid',\n },\n} as const)\nexport type DividerProps = ExtractPropTypes<typeof dividerProps>\n\nexport type DividerInstance = InstanceType<typeof Divider>\n"],"names":["buildProps","definePropType"],"mappings":";;;;;;;AACY,MAAC,YAAY,GAAGA,kBAAU,CAAC;AACvC,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,MAAM,EAAE,CAAC,YAAY,EAAE,UAAU,CAAC;AACtC,IAAI,OAAO,EAAE,YAAY;AACzB,GAAG;AACH,EAAE,eAAe,EAAE;AACnB,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,MAAM,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC;AACvC,IAAI,OAAO,EAAE,QAAQ;AACrB,GAAG;AACH,EAAE,WAAW,EAAE;AACf,IAAI,IAAI,EAAEC,sBAAc,CAAC,MAAM,CAAC;AAChC,IAAI,OAAO,EAAE,OAAO;AACpB,GAAG;AACH,CAAC;;;;"}
|
package/lib/components/index.js
CHANGED
|
@@ -122,7 +122,7 @@ var description = require('./descriptions/src/description.js');
|
|
|
122
122
|
var useDialog = require('./dialog/src/use-dialog.js');
|
|
123
123
|
var dialog = require('./dialog/src/dialog.js');
|
|
124
124
|
var constants$7 = require('./dialog/src/constants.js');
|
|
125
|
-
var divider = require('./divider/src/
|
|
125
|
+
var divider = require('./divider/src/divider2.js');
|
|
126
126
|
var drawer = require('./drawer/src/drawer.js');
|
|
127
127
|
var dropdown = require('./dropdown/src/dropdown.js');
|
|
128
128
|
var tokens = require('./dropdown/src/tokens.js');
|
|
@@ -221,7 +221,7 @@ var segmented = require('./segmented/src/segmented.js');
|
|
|
221
221
|
var directive = require('./loading/src/directive.js');
|
|
222
222
|
var service = require('./loading/src/service.js');
|
|
223
223
|
var message = require('./message/src/message.js');
|
|
224
|
-
var notification = require('./notification/src/
|
|
224
|
+
var notification = require('./notification/src/notification.js');
|
|
225
225
|
var popover = require('./popover/src/popover.js');
|
|
226
226
|
|
|
227
227
|
|
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
require('../../utils/index.js');
|
|
6
6
|
var notify = require('./src/notify.js');
|
|
7
|
-
var notification = require('./src/
|
|
7
|
+
var notification = require('./src/notification.js');
|
|
8
8
|
var install = require('../../utils/vue/install.js');
|
|
9
9
|
|
|
10
10
|
const ElNotification = install.withInstallFunction(notify["default"], "$notify");
|
|
@@ -2,157 +2,77 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var vue = require('vue');
|
|
6
|
-
var core = require('@vueuse/core');
|
|
7
5
|
require('../../../utils/index.js');
|
|
8
|
-
require('../../../
|
|
9
|
-
var index = require('../../icon/index.js');
|
|
10
|
-
require('../../config-provider/index.js');
|
|
11
|
-
var notification = require('./notification2.js');
|
|
12
|
-
var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
|
|
13
|
-
var useGlobalConfig = require('../../config-provider/src/hooks/use-global-config.js');
|
|
6
|
+
var runtime = require('../../../utils/vue/props/runtime.js');
|
|
14
7
|
var icon = require('../../../utils/vue/icon.js');
|
|
15
|
-
var aria = require('../../../constants/aria.js');
|
|
16
8
|
|
|
17
|
-
const
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
9
|
+
const notificationTypes = [
|
|
10
|
+
"success",
|
|
11
|
+
"info",
|
|
12
|
+
"warning",
|
|
13
|
+
"error"
|
|
14
|
+
];
|
|
15
|
+
const notificationProps = runtime.buildProps({
|
|
16
|
+
customClass: {
|
|
17
|
+
type: String,
|
|
18
|
+
default: ""
|
|
19
|
+
},
|
|
20
|
+
dangerouslyUseHTMLString: {
|
|
21
|
+
type: Boolean,
|
|
22
|
+
default: false
|
|
23
|
+
},
|
|
24
|
+
duration: {
|
|
25
|
+
type: Number,
|
|
26
|
+
default: 4500
|
|
27
|
+
},
|
|
28
|
+
icon: {
|
|
29
|
+
type: icon.iconPropType
|
|
30
|
+
},
|
|
31
|
+
id: {
|
|
32
|
+
type: String,
|
|
33
|
+
default: ""
|
|
34
|
+
},
|
|
35
|
+
message: {
|
|
36
|
+
type: runtime.definePropType([String, Object]),
|
|
37
|
+
default: ""
|
|
38
|
+
},
|
|
39
|
+
offset: {
|
|
40
|
+
type: Number,
|
|
41
|
+
default: 0
|
|
42
|
+
},
|
|
43
|
+
onClick: {
|
|
44
|
+
type: runtime.definePropType(Function),
|
|
45
|
+
default: () => void 0
|
|
46
|
+
},
|
|
47
|
+
onClose: {
|
|
48
|
+
type: runtime.definePropType(Function),
|
|
49
|
+
required: true
|
|
50
|
+
},
|
|
51
|
+
position: {
|
|
52
|
+
type: String,
|
|
53
|
+
values: ["top-right", "top-left", "bottom-right", "bottom-left"],
|
|
54
|
+
default: "top-right"
|
|
55
|
+
},
|
|
56
|
+
showClose: {
|
|
57
|
+
type: Boolean,
|
|
58
|
+
default: true
|
|
59
|
+
},
|
|
60
|
+
title: {
|
|
61
|
+
type: String,
|
|
62
|
+
default: ""
|
|
63
|
+
},
|
|
64
|
+
type: {
|
|
65
|
+
type: String,
|
|
66
|
+
values: [...notificationTypes, ""],
|
|
67
|
+
default: ""
|
|
68
|
+
},
|
|
69
|
+
zIndex: Number
|
|
23
70
|
});
|
|
24
|
-
const
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
emits: notification.notificationEmits,
|
|
28
|
-
setup(__props, { expose }) {
|
|
29
|
-
const props = __props;
|
|
30
|
-
const { ns, zIndex } = useGlobalConfig.useGlobalComponentSettings("notification");
|
|
31
|
-
const { nextZIndex, currentZIndex } = zIndex;
|
|
32
|
-
const { Close } = icon.CloseComponents;
|
|
33
|
-
const visible = vue.ref(false);
|
|
34
|
-
let timer = void 0;
|
|
35
|
-
const typeClass = vue.computed(() => {
|
|
36
|
-
const type = props.type;
|
|
37
|
-
return type && icon.TypeComponentsMap[props.type] ? ns.m(type) : "";
|
|
38
|
-
});
|
|
39
|
-
const iconComponent = vue.computed(() => {
|
|
40
|
-
if (!props.type)
|
|
41
|
-
return props.icon;
|
|
42
|
-
return icon.TypeComponentsMap[props.type] || props.icon;
|
|
43
|
-
});
|
|
44
|
-
const horizontalClass = vue.computed(() => props.position.endsWith("right") ? "right" : "left");
|
|
45
|
-
const verticalProperty = vue.computed(() => props.position.startsWith("top") ? "top" : "bottom");
|
|
46
|
-
const positionStyle = vue.computed(() => {
|
|
47
|
-
var _a;
|
|
48
|
-
return {
|
|
49
|
-
[verticalProperty.value]: `${props.offset}px`,
|
|
50
|
-
zIndex: (_a = props.zIndex) != null ? _a : currentZIndex.value
|
|
51
|
-
};
|
|
52
|
-
});
|
|
53
|
-
function startTimer() {
|
|
54
|
-
if (props.duration > 0) {
|
|
55
|
-
;
|
|
56
|
-
({ stop: timer } = core.useTimeoutFn(() => {
|
|
57
|
-
if (visible.value)
|
|
58
|
-
close();
|
|
59
|
-
}, props.duration));
|
|
60
|
-
}
|
|
61
|
-
}
|
|
62
|
-
function clearTimer() {
|
|
63
|
-
timer == null ? void 0 : timer();
|
|
64
|
-
}
|
|
65
|
-
function close() {
|
|
66
|
-
visible.value = false;
|
|
67
|
-
}
|
|
68
|
-
function onKeydown({ code }) {
|
|
69
|
-
if (code === aria.EVENT_CODE.delete || code === aria.EVENT_CODE.backspace) {
|
|
70
|
-
clearTimer();
|
|
71
|
-
} else if (code === aria.EVENT_CODE.esc) {
|
|
72
|
-
if (visible.value) {
|
|
73
|
-
close();
|
|
74
|
-
}
|
|
75
|
-
} else {
|
|
76
|
-
startTimer();
|
|
77
|
-
}
|
|
78
|
-
}
|
|
79
|
-
vue.onMounted(() => {
|
|
80
|
-
startTimer();
|
|
81
|
-
nextZIndex();
|
|
82
|
-
visible.value = true;
|
|
83
|
-
});
|
|
84
|
-
core.useEventListener(document, "keydown", onKeydown);
|
|
85
|
-
expose({
|
|
86
|
-
visible,
|
|
87
|
-
close
|
|
88
|
-
});
|
|
89
|
-
return (_ctx, _cache) => {
|
|
90
|
-
return vue.openBlock(), vue.createBlock(vue.Transition, {
|
|
91
|
-
name: vue.unref(ns).b("fade"),
|
|
92
|
-
onBeforeLeave: _ctx.onClose,
|
|
93
|
-
onAfterLeave: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("destroy")),
|
|
94
|
-
persisted: ""
|
|
95
|
-
}, {
|
|
96
|
-
default: vue.withCtx(() => [
|
|
97
|
-
vue.withDirectives(vue.createElementVNode("div", {
|
|
98
|
-
id: _ctx.id,
|
|
99
|
-
class: vue.normalizeClass([vue.unref(ns).b(), _ctx.customClass, vue.unref(horizontalClass)]),
|
|
100
|
-
style: vue.normalizeStyle(vue.unref(positionStyle)),
|
|
101
|
-
role: "alert",
|
|
102
|
-
onMouseenter: clearTimer,
|
|
103
|
-
onMouseleave: startTimer,
|
|
104
|
-
onClick: _cache[0] || (_cache[0] = (...args) => _ctx.onClick && _ctx.onClick(...args))
|
|
105
|
-
}, [
|
|
106
|
-
vue.unref(iconComponent) ? (vue.openBlock(), vue.createBlock(vue.unref(index.ElIcon), {
|
|
107
|
-
key: 0,
|
|
108
|
-
class: vue.normalizeClass([vue.unref(ns).e("icon"), vue.unref(typeClass)])
|
|
109
|
-
}, {
|
|
110
|
-
default: vue.withCtx(() => [
|
|
111
|
-
(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(iconComponent))))
|
|
112
|
-
]),
|
|
113
|
-
_: 1
|
|
114
|
-
}, 8, ["class"])) : vue.createCommentVNode("v-if", true),
|
|
115
|
-
vue.createElementVNode("div", {
|
|
116
|
-
class: vue.normalizeClass(vue.unref(ns).e("group"))
|
|
117
|
-
}, [
|
|
118
|
-
vue.createElementVNode("h2", {
|
|
119
|
-
class: vue.normalizeClass(vue.unref(ns).e("title")),
|
|
120
|
-
textContent: vue.toDisplayString(_ctx.title)
|
|
121
|
-
}, null, 10, _hoisted_2),
|
|
122
|
-
vue.withDirectives(vue.createElementVNode("div", {
|
|
123
|
-
class: vue.normalizeClass(vue.unref(ns).e("content")),
|
|
124
|
-
style: vue.normalizeStyle(!!_ctx.title ? void 0 : { margin: 0 })
|
|
125
|
-
}, [
|
|
126
|
-
vue.renderSlot(_ctx.$slots, "default", {}, () => [
|
|
127
|
-
!_ctx.dangerouslyUseHTMLString ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_3, vue.toDisplayString(_ctx.message), 1)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
|
|
128
|
-
vue.createCommentVNode(" Caution here, message could've been compromised, never use user's input as message "),
|
|
129
|
-
vue.createElementVNode("p", { innerHTML: _ctx.message }, null, 8, _hoisted_4)
|
|
130
|
-
], 2112))
|
|
131
|
-
])
|
|
132
|
-
], 6), [
|
|
133
|
-
[vue.vShow, _ctx.message]
|
|
134
|
-
]),
|
|
135
|
-
_ctx.showClose ? (vue.openBlock(), vue.createBlock(vue.unref(index.ElIcon), {
|
|
136
|
-
key: 0,
|
|
137
|
-
class: vue.normalizeClass(vue.unref(ns).e("closeBtn")),
|
|
138
|
-
onClick: vue.withModifiers(close, ["stop"])
|
|
139
|
-
}, {
|
|
140
|
-
default: vue.withCtx(() => [
|
|
141
|
-
vue.createVNode(vue.unref(Close))
|
|
142
|
-
]),
|
|
143
|
-
_: 1
|
|
144
|
-
}, 8, ["class", "onClick"])) : vue.createCommentVNode("v-if", true)
|
|
145
|
-
], 2)
|
|
146
|
-
], 46, _hoisted_1), [
|
|
147
|
-
[vue.vShow, visible.value]
|
|
148
|
-
])
|
|
149
|
-
]),
|
|
150
|
-
_: 3
|
|
151
|
-
}, 8, ["name", "onBeforeLeave"]);
|
|
152
|
-
};
|
|
153
|
-
}
|
|
154
|
-
});
|
|
155
|
-
var NotificationConstructor = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "notification.vue"]]);
|
|
71
|
+
const notificationEmits = {
|
|
72
|
+
destroy: () => true
|
|
73
|
+
};
|
|
156
74
|
|
|
157
|
-
exports
|
|
75
|
+
exports.notificationEmits = notificationEmits;
|
|
76
|
+
exports.notificationProps = notificationProps;
|
|
77
|
+
exports.notificationTypes = notificationTypes;
|
|
158
78
|
//# sourceMappingURL=notification.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"notification.js","sources":["../../../../../../packages/components/notification/src/notification.
|
|
1
|
+
{"version":3,"file":"notification.js","sources":["../../../../../../packages/components/notification/src/notification.ts"],"sourcesContent":["import { buildProps, definePropType, iconPropType } from '@element-plus/utils'\n\nimport type { ExtractPropTypes, VNode } from 'vue'\nimport type Notification from './notification.vue'\n\nexport const notificationTypes = [\n 'success',\n 'info',\n 'warning',\n 'error',\n] as const\n\nexport const notificationProps = buildProps({\n /**\n * @description custom class name for Notification\n */\n customClass: {\n type: String,\n default: '',\n },\n /**\n * @description whether `message` is treated as HTML string\n */\n dangerouslyUseHTMLString: {\n type: Boolean,\n default: false,\n },\n /**\n * @description duration before close. It will not automatically close if set 0\n */\n duration: {\n type: Number,\n default: 4500,\n },\n /**\n * @description custom icon component. It will be overridden by `type`\n */\n icon: {\n type: iconPropType,\n },\n /**\n * @description notification dom id\n */\n id: {\n type: String,\n default: '',\n },\n /**\n * @description description text\n */\n message: {\n type: definePropType<string | VNode>([String, Object]),\n default: '',\n },\n /**\n * @description offset from the top edge of the screen. Every Notification instance of the same moment should have the same offset\n */\n offset: {\n type: Number,\n default: 0,\n },\n /**\n * @description callback function when notification clicked\n */\n onClick: {\n type: definePropType<() => void>(Function),\n default: () => undefined,\n },\n /**\n * @description callback function when closed\n */\n onClose: {\n type: definePropType<() => void>(Function),\n required: true,\n },\n /**\n * @description custom position\n */\n position: {\n type: String,\n values: ['top-right', 'top-left', 'bottom-right', 'bottom-left'],\n default: 'top-right',\n },\n /**\n * @description whether to show a close button\n */\n showClose: {\n type: Boolean,\n default: true,\n },\n /**\n * @description title\n */\n title: {\n type: String,\n default: '',\n },\n /**\n * @description notification type\n */\n type: {\n type: String,\n values: [...notificationTypes, ''],\n default: '',\n },\n /**\n * @description initial zIndex\n */\n zIndex: Number,\n} as const)\nexport type NotificationProps = ExtractPropTypes<typeof notificationProps>\n\nexport const notificationEmits = {\n destroy: () => true,\n}\nexport type NotificationEmits = typeof notificationEmits\n\nexport type NotificationInstance = InstanceType<typeof Notification>\n\nexport type NotificationOptions = Omit<NotificationProps, 'id'> & {\n /**\n * @description set the root element for the notification, default to `document.body`\n */\n appendTo?: HTMLElement | string\n}\nexport type NotificationOptionsTyped = Omit<NotificationOptions, 'type'>\n\nexport interface NotificationHandle {\n close: () => void\n}\n\nexport type NotificationParams = Partial<NotificationOptions> | string | VNode\nexport type NotificationParamsTyped =\n | Partial<NotificationOptionsTyped>\n | string\n | VNode\n\nexport type NotifyFn = ((\n options?: NotificationParams\n) => NotificationHandle) & { closeAll: () => void }\n\nexport type NotifyTypedFn = (\n options?: NotificationParamsTyped\n) => NotificationHandle\n\nexport interface Notify extends NotifyFn {\n success: NotifyTypedFn\n warning: NotifyTypedFn\n error: NotifyTypedFn\n info: NotifyTypedFn\n}\n\nexport interface NotificationQueueItem {\n vm: VNode\n}\n\nexport type NotificationQueue = NotificationQueueItem[]\n"],"names":["buildProps","iconPropType","definePropType"],"mappings":";;;;;;;;AACY,MAAC,iBAAiB,GAAG;AACjC,EAAE,SAAS;AACX,EAAE,MAAM;AACR,EAAE,SAAS;AACX,EAAE,OAAO;AACT,EAAE;AACU,MAAC,iBAAiB,GAAGA,kBAAU,CAAC;AAC5C,EAAE,WAAW,EAAE;AACf,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,wBAAwB,EAAE;AAC5B,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,EAAE,QAAQ,EAAE;AACZ,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAEC,iBAAY;AACtB,GAAG;AACH,EAAE,EAAE,EAAE;AACN,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,OAAO,EAAE;AACX,IAAI,IAAI,EAAEC,sBAAc,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAC1C,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,EAAE,OAAO,EAAE;AACX,IAAI,IAAI,EAAEA,sBAAc,CAAC,QAAQ,CAAC;AAClC,IAAI,OAAO,EAAE,MAAM,KAAK,CAAC;AACzB,GAAG;AACH,EAAE,OAAO,EAAE;AACX,IAAI,IAAI,EAAEA,sBAAc,CAAC,QAAQ,CAAC;AAClC,IAAI,QAAQ,EAAE,IAAI;AAClB,GAAG;AACH,EAAE,QAAQ,EAAE;AACZ,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,MAAM,EAAE,CAAC,WAAW,EAAE,UAAU,EAAE,cAAc,EAAE,aAAa,CAAC;AACpE,IAAI,OAAO,EAAE,WAAW;AACxB,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,MAAM,EAAE,CAAC,GAAG,iBAAiB,EAAE,EAAE,CAAC;AACtC,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,MAAM,EAAE,MAAM;AAChB,CAAC,EAAE;AACS,MAAC,iBAAiB,GAAG;AACjC,EAAE,OAAO,EAAE,MAAM,IAAI;AACrB;;;;;;"}
|