@element-plus/nightly 0.0.20240915 → 0.0.20240917
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 +5 -2
- package/dist/index.full.min.js +8 -8
- package/dist/index.full.min.js.map +1 -1
- package/dist/index.full.min.mjs +8 -8
- package/dist/index.full.min.mjs.map +1 -1
- package/dist/index.full.mjs +5 -2
- 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/my.js +1 -1
- package/dist/locale/my.min.js +1 -1
- package/dist/locale/my.min.mjs +1 -1
- package/dist/locale/my.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/breadcrumb/index.mjs +2 -2
- package/es/components/breadcrumb/src/breadcrumb.mjs +11 -38
- package/es/components/breadcrumb/src/breadcrumb.mjs.map +1 -1
- package/es/components/breadcrumb/src/breadcrumb2.mjs +38 -11
- package/es/components/breadcrumb/src/breadcrumb2.mjs.map +1 -1
- package/es/components/index.mjs +5 -5
- package/es/components/input-number/src/input-number2.mjs +3 -0
- package/es/components/input-number/src/input-number2.mjs.map +1 -1
- package/es/components/notification/index.mjs +1 -1
- package/es/components/notification/src/notification.mjs +64 -145
- package/es/components/notification/src/notification.mjs.map +1 -1
- package/es/components/notification/src/notification2.mjs +145 -64
- package/es/components/notification/src/notification2.mjs.map +1 -1
- package/es/components/notification/src/notify.mjs +2 -2
- package/es/components/segmented/index.mjs +2 -2
- package/es/components/segmented/src/segmented.mjs +158 -30
- package/es/components/segmented/src/segmented.mjs.map +1 -1
- package/es/components/segmented/src/segmented2.mjs +30 -158
- package/es/components/segmented/src/segmented2.mjs.map +1 -1
- package/es/components/slider/src/button.mjs +91 -21
- package/es/components/slider/src/button.mjs.map +1 -1
- package/es/components/slider/src/button2.mjs +21 -91
- package/es/components/slider/src/button2.mjs.map +1 -1
- package/es/components/slider/src/slider2.mjs +1 -1
- package/es/components/time-select/index.mjs +2 -2
- package/es/components/time-select/src/time-select.mjs +124 -51
- package/es/components/time-select/src/time-select.mjs.map +1 -1
- package/es/components/time-select/src/time-select2.mjs +51 -124
- package/es/components/time-select/src/time-select2.mjs.map +1 -1
- package/es/components/tooltip/index.mjs +2 -2
- package/es/components/tooltip/src/tooltip.mjs +168 -31
- package/es/components/tooltip/src/tooltip.mjs.map +1 -1
- package/es/components/tooltip/src/tooltip2.mjs +31 -168
- package/es/components/tooltip/src/tooltip2.mjs.map +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/breadcrumb/index.js +2 -2
- package/lib/components/breadcrumb/src/breadcrumb.js +11 -38
- package/lib/components/breadcrumb/src/breadcrumb.js.map +1 -1
- package/lib/components/breadcrumb/src/breadcrumb2.js +38 -11
- package/lib/components/breadcrumb/src/breadcrumb2.js.map +1 -1
- package/lib/components/index.js +5 -5
- package/lib/components/input-number/src/input-number2.js +3 -0
- package/lib/components/input-number/src/input-number2.js.map +1 -1
- package/lib/components/notification/index.js +1 -1
- package/lib/components/notification/src/notification.js +65 -144
- package/lib/components/notification/src/notification.js.map +1 -1
- package/lib/components/notification/src/notification2.js +144 -65
- package/lib/components/notification/src/notification2.js.map +1 -1
- package/lib/components/notification/src/notify.js +2 -2
- package/lib/components/segmented/index.js +2 -2
- package/lib/components/segmented/src/segmented.js +157 -30
- package/lib/components/segmented/src/segmented.js.map +1 -1
- package/lib/components/segmented/src/segmented2.js +30 -157
- package/lib/components/segmented/src/segmented2.js.map +1 -1
- package/lib/components/slider/src/button.js +91 -22
- package/lib/components/slider/src/button.js.map +1 -1
- package/lib/components/slider/src/button2.js +22 -91
- package/lib/components/slider/src/button2.js.map +1 -1
- package/lib/components/slider/src/slider2.js +1 -1
- package/lib/components/time-select/index.js +2 -2
- package/lib/components/time-select/src/time-select.js +129 -51
- package/lib/components/time-select/src/time-select.js.map +1 -1
- package/lib/components/time-select/src/time-select2.js +51 -129
- package/lib/components/time-select/src/time-select2.js.map +1 -1
- package/lib/components/tooltip/index.js +2 -2
- package/lib/components/tooltip/src/tooltip.js +168 -35
- package/lib/components/tooltip/src/tooltip.js.map +1 -1
- package/lib/components/tooltip/src/tooltip2.js +35 -168
- package/lib/components/tooltip/src/tooltip2.js.map +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
|
@@ -2,74 +2,153 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
+
var vue = require('vue');
|
|
6
|
+
var core = require('@vueuse/core');
|
|
5
7
|
require('../../../utils/index.js');
|
|
6
|
-
|
|
8
|
+
require('../../../constants/index.js');
|
|
9
|
+
var index = require('../../icon/index.js');
|
|
10
|
+
require('../../config-provider/index.js');
|
|
11
|
+
var notification = require('./notification.js');
|
|
12
|
+
var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
|
|
13
|
+
var useGlobalConfig = require('../../config-provider/src/hooks/use-global-config.js');
|
|
7
14
|
var icon = require('../../../utils/vue/icon.js');
|
|
15
|
+
var aria = require('../../../constants/aria.js');
|
|
8
16
|
|
|
9
|
-
const
|
|
10
|
-
"
|
|
11
|
-
"info",
|
|
12
|
-
"warning",
|
|
13
|
-
"error"
|
|
14
|
-
];
|
|
15
|
-
const notificationProps = runtime.buildProps({
|
|
16
|
-
customClass: {
|
|
17
|
-
type: String,
|
|
18
|
-
default: ""
|
|
19
|
-
},
|
|
20
|
-
dangerouslyUseHTMLString: Boolean,
|
|
21
|
-
duration: {
|
|
22
|
-
type: Number,
|
|
23
|
-
default: 4500
|
|
24
|
-
},
|
|
25
|
-
icon: {
|
|
26
|
-
type: icon.iconPropType
|
|
27
|
-
},
|
|
28
|
-
id: {
|
|
29
|
-
type: String,
|
|
30
|
-
default: ""
|
|
31
|
-
},
|
|
32
|
-
message: {
|
|
33
|
-
type: runtime.definePropType([String, Object]),
|
|
34
|
-
default: ""
|
|
35
|
-
},
|
|
36
|
-
offset: {
|
|
37
|
-
type: Number,
|
|
38
|
-
default: 0
|
|
39
|
-
},
|
|
40
|
-
onClick: {
|
|
41
|
-
type: runtime.definePropType(Function),
|
|
42
|
-
default: () => void 0
|
|
43
|
-
},
|
|
44
|
-
onClose: {
|
|
45
|
-
type: runtime.definePropType(Function),
|
|
46
|
-
required: true
|
|
47
|
-
},
|
|
48
|
-
position: {
|
|
49
|
-
type: String,
|
|
50
|
-
values: ["top-right", "top-left", "bottom-right", "bottom-left"],
|
|
51
|
-
default: "top-right"
|
|
52
|
-
},
|
|
53
|
-
showClose: {
|
|
54
|
-
type: Boolean,
|
|
55
|
-
default: true
|
|
56
|
-
},
|
|
57
|
-
title: {
|
|
58
|
-
type: String,
|
|
59
|
-
default: ""
|
|
60
|
-
},
|
|
61
|
-
type: {
|
|
62
|
-
type: String,
|
|
63
|
-
values: [...notificationTypes, ""],
|
|
64
|
-
default: ""
|
|
65
|
-
},
|
|
66
|
-
zIndex: Number
|
|
17
|
+
const __default__ = vue.defineComponent({
|
|
18
|
+
name: "ElNotification"
|
|
67
19
|
});
|
|
68
|
-
const
|
|
69
|
-
|
|
70
|
-
|
|
20
|
+
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
21
|
+
...__default__,
|
|
22
|
+
props: notification.notificationProps,
|
|
23
|
+
emits: notification.notificationEmits,
|
|
24
|
+
setup(__props, { expose }) {
|
|
25
|
+
const props = __props;
|
|
26
|
+
const { ns, zIndex } = useGlobalConfig.useGlobalComponentSettings("notification");
|
|
27
|
+
const { nextZIndex, currentZIndex } = zIndex;
|
|
28
|
+
const { Close } = icon.CloseComponents;
|
|
29
|
+
const visible = vue.ref(false);
|
|
30
|
+
let timer = void 0;
|
|
31
|
+
const typeClass = vue.computed(() => {
|
|
32
|
+
const type = props.type;
|
|
33
|
+
return type && icon.TypeComponentsMap[props.type] ? ns.m(type) : "";
|
|
34
|
+
});
|
|
35
|
+
const iconComponent = vue.computed(() => {
|
|
36
|
+
if (!props.type)
|
|
37
|
+
return props.icon;
|
|
38
|
+
return icon.TypeComponentsMap[props.type] || props.icon;
|
|
39
|
+
});
|
|
40
|
+
const horizontalClass = vue.computed(() => props.position.endsWith("right") ? "right" : "left");
|
|
41
|
+
const verticalProperty = vue.computed(() => props.position.startsWith("top") ? "top" : "bottom");
|
|
42
|
+
const positionStyle = vue.computed(() => {
|
|
43
|
+
var _a;
|
|
44
|
+
return {
|
|
45
|
+
[verticalProperty.value]: `${props.offset}px`,
|
|
46
|
+
zIndex: (_a = props.zIndex) != null ? _a : currentZIndex.value
|
|
47
|
+
};
|
|
48
|
+
});
|
|
49
|
+
function startTimer() {
|
|
50
|
+
if (props.duration > 0) {
|
|
51
|
+
;
|
|
52
|
+
({ stop: timer } = core.useTimeoutFn(() => {
|
|
53
|
+
if (visible.value)
|
|
54
|
+
close();
|
|
55
|
+
}, props.duration));
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
function clearTimer() {
|
|
59
|
+
timer == null ? void 0 : timer();
|
|
60
|
+
}
|
|
61
|
+
function close() {
|
|
62
|
+
visible.value = false;
|
|
63
|
+
}
|
|
64
|
+
function onKeydown({ code }) {
|
|
65
|
+
if (code === aria.EVENT_CODE.delete || code === aria.EVENT_CODE.backspace) {
|
|
66
|
+
clearTimer();
|
|
67
|
+
} else if (code === aria.EVENT_CODE.esc) {
|
|
68
|
+
if (visible.value) {
|
|
69
|
+
close();
|
|
70
|
+
}
|
|
71
|
+
} else {
|
|
72
|
+
startTimer();
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
vue.onMounted(() => {
|
|
76
|
+
startTimer();
|
|
77
|
+
nextZIndex();
|
|
78
|
+
visible.value = true;
|
|
79
|
+
});
|
|
80
|
+
core.useEventListener(document, "keydown", onKeydown);
|
|
81
|
+
expose({
|
|
82
|
+
visible,
|
|
83
|
+
close
|
|
84
|
+
});
|
|
85
|
+
return (_ctx, _cache) => {
|
|
86
|
+
return vue.openBlock(), vue.createBlock(vue.Transition, {
|
|
87
|
+
name: vue.unref(ns).b("fade"),
|
|
88
|
+
onBeforeLeave: _ctx.onClose,
|
|
89
|
+
onAfterLeave: ($event) => _ctx.$emit("destroy"),
|
|
90
|
+
persisted: ""
|
|
91
|
+
}, {
|
|
92
|
+
default: vue.withCtx(() => [
|
|
93
|
+
vue.withDirectives(vue.createElementVNode("div", {
|
|
94
|
+
id: _ctx.id,
|
|
95
|
+
class: vue.normalizeClass([vue.unref(ns).b(), _ctx.customClass, vue.unref(horizontalClass)]),
|
|
96
|
+
style: vue.normalizeStyle(vue.unref(positionStyle)),
|
|
97
|
+
role: "alert",
|
|
98
|
+
onMouseenter: clearTimer,
|
|
99
|
+
onMouseleave: startTimer,
|
|
100
|
+
onClick: _ctx.onClick
|
|
101
|
+
}, [
|
|
102
|
+
vue.unref(iconComponent) ? (vue.openBlock(), vue.createBlock(vue.unref(index.ElIcon), {
|
|
103
|
+
key: 0,
|
|
104
|
+
class: vue.normalizeClass([vue.unref(ns).e("icon"), vue.unref(typeClass)])
|
|
105
|
+
}, {
|
|
106
|
+
default: vue.withCtx(() => [
|
|
107
|
+
(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(iconComponent))))
|
|
108
|
+
]),
|
|
109
|
+
_: 1
|
|
110
|
+
}, 8, ["class"])) : vue.createCommentVNode("v-if", true),
|
|
111
|
+
vue.createElementVNode("div", {
|
|
112
|
+
class: vue.normalizeClass(vue.unref(ns).e("group"))
|
|
113
|
+
}, [
|
|
114
|
+
vue.createElementVNode("h2", {
|
|
115
|
+
class: vue.normalizeClass(vue.unref(ns).e("title")),
|
|
116
|
+
textContent: vue.toDisplayString(_ctx.title)
|
|
117
|
+
}, null, 10, ["textContent"]),
|
|
118
|
+
vue.withDirectives(vue.createElementVNode("div", {
|
|
119
|
+
class: vue.normalizeClass(vue.unref(ns).e("content")),
|
|
120
|
+
style: vue.normalizeStyle(!!_ctx.title ? void 0 : { margin: 0 })
|
|
121
|
+
}, [
|
|
122
|
+
vue.renderSlot(_ctx.$slots, "default", {}, () => [
|
|
123
|
+
!_ctx.dangerouslyUseHTMLString ? (vue.openBlock(), vue.createElementBlock("p", { key: 0 }, vue.toDisplayString(_ctx.message), 1)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
|
|
124
|
+
vue.createCommentVNode(" Caution here, message could've been compromised, never use user's input as message "),
|
|
125
|
+
vue.createElementVNode("p", { innerHTML: _ctx.message }, null, 8, ["innerHTML"])
|
|
126
|
+
], 2112))
|
|
127
|
+
])
|
|
128
|
+
], 6), [
|
|
129
|
+
[vue.vShow, _ctx.message]
|
|
130
|
+
]),
|
|
131
|
+
_ctx.showClose ? (vue.openBlock(), vue.createBlock(vue.unref(index.ElIcon), {
|
|
132
|
+
key: 0,
|
|
133
|
+
class: vue.normalizeClass(vue.unref(ns).e("closeBtn")),
|
|
134
|
+
onClick: vue.withModifiers(close, ["stop"])
|
|
135
|
+
}, {
|
|
136
|
+
default: vue.withCtx(() => [
|
|
137
|
+
vue.createVNode(vue.unref(Close))
|
|
138
|
+
]),
|
|
139
|
+
_: 1
|
|
140
|
+
}, 8, ["class", "onClick"])) : vue.createCommentVNode("v-if", true)
|
|
141
|
+
], 2)
|
|
142
|
+
], 46, ["id", "onClick"]), [
|
|
143
|
+
[vue.vShow, visible.value]
|
|
144
|
+
])
|
|
145
|
+
]),
|
|
146
|
+
_: 3
|
|
147
|
+
}, 8, ["name", "onBeforeLeave", "onAfterLeave"]);
|
|
148
|
+
};
|
|
149
|
+
}
|
|
150
|
+
});
|
|
151
|
+
var NotificationConstructor = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "notification.vue"]]);
|
|
71
152
|
|
|
72
|
-
exports
|
|
73
|
-
exports.notificationProps = notificationProps;
|
|
74
|
-
exports.notificationTypes = notificationTypes;
|
|
153
|
+
exports["default"] = NotificationConstructor;
|
|
75
154
|
//# sourceMappingURL=notification2.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"notification2.js","sources":["../../../../../../packages/components/notification/src/notification.
|
|
1
|
+
{"version":3,"file":"notification2.js","sources":["../../../../../../packages/components/notification/src/notification.vue"],"sourcesContent":["<template>\n <transition\n :name=\"ns.b('fade')\"\n @before-leave=\"onClose\"\n @after-leave=\"$emit('destroy')\"\n >\n <div\n v-show=\"visible\"\n :id=\"id\"\n :class=\"[ns.b(), customClass, horizontalClass]\"\n :style=\"positionStyle\"\n role=\"alert\"\n @mouseenter=\"clearTimer\"\n @mouseleave=\"startTimer\"\n @click=\"onClick\"\n >\n <el-icon v-if=\"iconComponent\" :class=\"[ns.e('icon'), typeClass]\">\n <component :is=\"iconComponent\" />\n </el-icon>\n <div :class=\"ns.e('group')\">\n <h2 :class=\"ns.e('title')\" v-text=\"title\" />\n <div\n v-show=\"message\"\n :class=\"ns.e('content')\"\n :style=\"!!title ? undefined : { margin: 0 }\"\n >\n <slot>\n <p v-if=\"!dangerouslyUseHTMLString\">{{ message }}</p>\n <!-- Caution here, message could've been compromised, never use user's input as message -->\n <p v-else v-html=\"message\" />\n </slot>\n </div>\n <el-icon v-if=\"showClose\" :class=\"ns.e('closeBtn')\" @click.stop=\"close\">\n <Close />\n </el-icon>\n </div>\n </div>\n </transition>\n</template>\n<script lang=\"ts\" setup>\nimport { computed, onMounted, ref } from 'vue'\nimport { useEventListener, useTimeoutFn } from '@vueuse/core'\nimport { CloseComponents, TypeComponentsMap } from '@element-plus/utils'\nimport { EVENT_CODE } from '@element-plus/constants'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { useGlobalComponentSettings } from '@element-plus/components/config-provider'\nimport { notificationEmits, notificationProps } from './notification'\n\nimport type { CSSProperties } from 'vue'\n\ndefineOptions({\n name: 'ElNotification',\n})\n\nconst props = defineProps(notificationProps)\ndefineEmits(notificationEmits)\n\nconst { ns, zIndex } = useGlobalComponentSettings('notification')\nconst { nextZIndex, currentZIndex } = zIndex\n\nconst { Close } = CloseComponents\n\nconst visible = ref(false)\nlet timer: (() => void) | undefined = undefined\n\nconst typeClass = computed(() => {\n const type = props.type\n return type && TypeComponentsMap[props.type] ? ns.m(type) : ''\n})\n\nconst iconComponent = computed(() => {\n if (!props.type) return props.icon\n return TypeComponentsMap[props.type] || props.icon\n})\n\nconst horizontalClass = computed(() =>\n props.position.endsWith('right') ? 'right' : 'left'\n)\n\nconst verticalProperty = computed(() =>\n props.position.startsWith('top') ? 'top' : 'bottom'\n)\n\nconst positionStyle = computed<CSSProperties>(() => {\n return {\n [verticalProperty.value]: `${props.offset}px`,\n zIndex: props.zIndex ?? currentZIndex.value,\n }\n})\n\nfunction startTimer() {\n if (props.duration > 0) {\n ;({ stop: timer } = useTimeoutFn(() => {\n if (visible.value) close()\n }, props.duration))\n }\n}\n\nfunction clearTimer() {\n timer?.()\n}\n\nfunction close() {\n visible.value = false\n}\n\nfunction onKeydown({ code }: KeyboardEvent) {\n if (code === EVENT_CODE.delete || code === EVENT_CODE.backspace) {\n clearTimer() // press delete/backspace clear timer\n } else if (code === EVENT_CODE.esc) {\n // press esc to close the notification\n if (visible.value) {\n close()\n }\n } else {\n startTimer() // resume timer\n }\n}\n\n// lifecycle\nonMounted(() => {\n startTimer()\n nextZIndex()\n visible.value = true\n})\n\nuseEventListener(document, 'keydown', onKeydown)\n\ndefineExpose({\n visible,\n /** @description close notification */\n close,\n})\n</script>\n"],"names":["useGlobalComponentSettings","CloseComponents","ref","computed","TypeComponentsMap","useTimeoutFn","EVENT_CODE","onMounted","useEventListener"],"mappings":"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"}
|
|
@@ -4,8 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var vue = require('vue');
|
|
6
6
|
require('../../../utils/index.js');
|
|
7
|
-
var notification = require('./
|
|
8
|
-
var notification$1 = require('./
|
|
7
|
+
var notification = require('./notification2.js');
|
|
8
|
+
var notification$1 = require('./notification.js');
|
|
9
9
|
var core = require('@vueuse/core');
|
|
10
10
|
var types = require('../../../utils/types.js');
|
|
11
11
|
var shared = require('@vue/shared');
|
|
@@ -3,8 +3,8 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
require('../../utils/index.js');
|
|
6
|
-
var segmented$1 = require('./src/
|
|
7
|
-
var segmented = require('./src/
|
|
6
|
+
var segmented$1 = require('./src/segmented.js');
|
|
7
|
+
var segmented = require('./src/segmented2.js');
|
|
8
8
|
var install = require('../../utils/vue/install.js');
|
|
9
9
|
|
|
10
10
|
const ElSegmented = install.withInstall(segmented$1["default"]);
|
|
@@ -2,41 +2,168 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
require('
|
|
5
|
+
var vue = require('vue');
|
|
6
|
+
var core = require('@vueuse/core');
|
|
6
7
|
require('../../../hooks/index.js');
|
|
8
|
+
require('../../form/index.js');
|
|
9
|
+
require('../../../utils/index.js');
|
|
7
10
|
require('../../../constants/index.js');
|
|
8
|
-
var
|
|
9
|
-
var
|
|
10
|
-
var index
|
|
11
|
+
var segmented = require('./segmented2.js');
|
|
12
|
+
var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
|
|
13
|
+
var index = require('../../../hooks/use-namespace/index.js');
|
|
14
|
+
var index$1 = require('../../../hooks/use-id/index.js');
|
|
15
|
+
var useFormCommonProps = require('../../form/src/hooks/use-form-common-props.js');
|
|
16
|
+
var useFormItem = require('../../form/src/hooks/use-form-item.js');
|
|
11
17
|
var event = require('../../../constants/event.js');
|
|
12
18
|
var shared = require('@vue/shared');
|
|
13
|
-
var
|
|
19
|
+
var error = require('../../../utils/error.js');
|
|
14
20
|
|
|
15
|
-
const
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
21
|
+
const __default__ = vue.defineComponent({
|
|
22
|
+
name: "ElSegmented"
|
|
23
|
+
});
|
|
24
|
+
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
25
|
+
...__default__,
|
|
26
|
+
props: segmented.segmentedProps,
|
|
27
|
+
emits: segmented.segmentedEmits,
|
|
28
|
+
setup(__props, { emit }) {
|
|
29
|
+
const props = __props;
|
|
30
|
+
const ns = index.useNamespace("segmented");
|
|
31
|
+
const segmentedId = index$1.useId();
|
|
32
|
+
const segmentedSize = useFormCommonProps.useFormSize();
|
|
33
|
+
const _disabled = useFormCommonProps.useFormDisabled();
|
|
34
|
+
const { formItem } = useFormItem.useFormItem();
|
|
35
|
+
const { inputId, isLabeledByFormItem } = useFormItem.useFormItemInputId(props, {
|
|
36
|
+
formItemContext: formItem
|
|
37
|
+
});
|
|
38
|
+
const segmentedRef = vue.ref(null);
|
|
39
|
+
const activeElement = core.useActiveElement();
|
|
40
|
+
const state = vue.reactive({
|
|
41
|
+
isInit: false,
|
|
42
|
+
width: 0,
|
|
43
|
+
translateX: 0,
|
|
44
|
+
focusVisible: false
|
|
45
|
+
});
|
|
46
|
+
const handleChange = (item) => {
|
|
47
|
+
const value = getValue(item);
|
|
48
|
+
emit(event.UPDATE_MODEL_EVENT, value);
|
|
49
|
+
emit(event.CHANGE_EVENT, value);
|
|
50
|
+
};
|
|
51
|
+
const getValue = (item) => {
|
|
52
|
+
return shared.isObject(item) ? item.value : item;
|
|
53
|
+
};
|
|
54
|
+
const getLabel = (item) => {
|
|
55
|
+
return shared.isObject(item) ? item.label : item;
|
|
56
|
+
};
|
|
57
|
+
const getDisabled = (item) => {
|
|
58
|
+
return !!(_disabled.value || (shared.isObject(item) ? item.disabled : false));
|
|
59
|
+
};
|
|
60
|
+
const getSelected = (item) => {
|
|
61
|
+
return props.modelValue === getValue(item);
|
|
62
|
+
};
|
|
63
|
+
const getOption = (value) => {
|
|
64
|
+
return props.options.find((item) => getValue(item) === value);
|
|
65
|
+
};
|
|
66
|
+
const getItemCls = (item) => {
|
|
67
|
+
return [
|
|
68
|
+
ns.e("item"),
|
|
69
|
+
ns.is("selected", getSelected(item)),
|
|
70
|
+
ns.is("disabled", getDisabled(item))
|
|
71
|
+
];
|
|
72
|
+
};
|
|
73
|
+
const updateSelect = () => {
|
|
74
|
+
if (!segmentedRef.value)
|
|
75
|
+
return;
|
|
76
|
+
const selectedItem = segmentedRef.value.querySelector(".is-selected");
|
|
77
|
+
const selectedItemInput = segmentedRef.value.querySelector(".is-selected input");
|
|
78
|
+
if (!selectedItem || !selectedItemInput) {
|
|
79
|
+
state.width = 0;
|
|
80
|
+
state.translateX = 0;
|
|
81
|
+
state.focusVisible = false;
|
|
82
|
+
return;
|
|
83
|
+
}
|
|
84
|
+
const rect = selectedItem.getBoundingClientRect();
|
|
85
|
+
state.isInit = true;
|
|
86
|
+
state.width = rect.width;
|
|
87
|
+
state.translateX = selectedItem.offsetLeft;
|
|
88
|
+
try {
|
|
89
|
+
state.focusVisible = selectedItemInput.matches(":focus-visible");
|
|
90
|
+
} catch (e) {
|
|
91
|
+
}
|
|
92
|
+
};
|
|
93
|
+
const segmentedCls = vue.computed(() => [
|
|
94
|
+
ns.b(),
|
|
95
|
+
ns.m(segmentedSize.value),
|
|
96
|
+
ns.is("block", props.block)
|
|
97
|
+
]);
|
|
98
|
+
const selectedStyle = vue.computed(() => ({
|
|
99
|
+
width: `${state.width}px`,
|
|
100
|
+
transform: `translateX(${state.translateX}px)`,
|
|
101
|
+
display: state.isInit ? "block" : "none"
|
|
102
|
+
}));
|
|
103
|
+
const selectedCls = vue.computed(() => [
|
|
104
|
+
ns.e("item-selected"),
|
|
105
|
+
ns.is("disabled", getDisabled(getOption(props.modelValue))),
|
|
106
|
+
ns.is("focus-visible", state.focusVisible)
|
|
107
|
+
]);
|
|
108
|
+
const name = vue.computed(() => {
|
|
109
|
+
return props.name || segmentedId.value;
|
|
110
|
+
});
|
|
111
|
+
core.useResizeObserver(segmentedRef, updateSelect);
|
|
112
|
+
vue.watch(activeElement, updateSelect);
|
|
113
|
+
vue.watch(() => props.modelValue, () => {
|
|
114
|
+
var _a;
|
|
115
|
+
updateSelect();
|
|
116
|
+
if (props.validateEvent) {
|
|
117
|
+
(_a = formItem == null ? void 0 : formItem.validate) == null ? void 0 : _a.call(formItem, "change").catch((err) => error.debugWarn(err));
|
|
118
|
+
}
|
|
119
|
+
}, {
|
|
120
|
+
flush: "post"
|
|
121
|
+
});
|
|
122
|
+
return (_ctx, _cache) => {
|
|
123
|
+
return vue.openBlock(), vue.createElementBlock("div", {
|
|
124
|
+
id: vue.unref(inputId),
|
|
125
|
+
ref_key: "segmentedRef",
|
|
126
|
+
ref: segmentedRef,
|
|
127
|
+
class: vue.normalizeClass(vue.unref(segmentedCls)),
|
|
128
|
+
role: "radiogroup",
|
|
129
|
+
"aria-label": !vue.unref(isLabeledByFormItem) ? _ctx.ariaLabel || "segmented" : void 0,
|
|
130
|
+
"aria-labelledby": vue.unref(isLabeledByFormItem) ? vue.unref(formItem).labelId : void 0
|
|
131
|
+
}, [
|
|
132
|
+
vue.createElementVNode("div", {
|
|
133
|
+
class: vue.normalizeClass(vue.unref(ns).e("group"))
|
|
134
|
+
}, [
|
|
135
|
+
vue.createElementVNode("div", {
|
|
136
|
+
style: vue.normalizeStyle(vue.unref(selectedStyle)),
|
|
137
|
+
class: vue.normalizeClass(vue.unref(selectedCls))
|
|
138
|
+
}, null, 6),
|
|
139
|
+
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.options, (item, index) => {
|
|
140
|
+
return vue.openBlock(), vue.createElementBlock("label", {
|
|
141
|
+
key: index,
|
|
142
|
+
class: vue.normalizeClass(getItemCls(item))
|
|
143
|
+
}, [
|
|
144
|
+
vue.createElementVNode("input", {
|
|
145
|
+
class: vue.normalizeClass(vue.unref(ns).e("item-input")),
|
|
146
|
+
type: "radio",
|
|
147
|
+
name: vue.unref(name),
|
|
148
|
+
disabled: getDisabled(item),
|
|
149
|
+
checked: getSelected(item),
|
|
150
|
+
onChange: ($event) => handleChange(item)
|
|
151
|
+
}, null, 42, ["name", "disabled", "checked", "onChange"]),
|
|
152
|
+
vue.createElementVNode("div", {
|
|
153
|
+
class: vue.normalizeClass(vue.unref(ns).e("item-label"))
|
|
154
|
+
}, [
|
|
155
|
+
vue.renderSlot(_ctx.$slots, "default", { item }, () => [
|
|
156
|
+
vue.createTextVNode(vue.toDisplayString(getLabel(item)), 1)
|
|
157
|
+
])
|
|
158
|
+
], 2)
|
|
159
|
+
], 2);
|
|
160
|
+
}), 128))
|
|
161
|
+
], 2)
|
|
162
|
+
], 10, ["id", "aria-label", "aria-labelledby"]);
|
|
163
|
+
};
|
|
164
|
+
}
|
|
34
165
|
});
|
|
35
|
-
|
|
36
|
-
[event.UPDATE_MODEL_EVENT]: (val) => shared.isString(val) || types.isNumber(val) || types.isBoolean(val),
|
|
37
|
-
[event.CHANGE_EVENT]: (val) => shared.isString(val) || types.isNumber(val) || types.isBoolean(val)
|
|
38
|
-
};
|
|
166
|
+
var Segmented = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "segmented.vue"]]);
|
|
39
167
|
|
|
40
|
-
exports
|
|
41
|
-
exports.segmentedProps = segmentedProps;
|
|
168
|
+
exports["default"] = Segmented;
|
|
42
169
|
//# sourceMappingURL=segmented.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"segmented.js","sources":["../../../../../../packages/components/segmented/src/segmented.
|
|
1
|
+
{"version":3,"file":"segmented.js","sources":["../../../../../../packages/components/segmented/src/segmented.vue"],"sourcesContent":["<template>\n <div\n :id=\"inputId\"\n ref=\"segmentedRef\"\n :class=\"segmentedCls\"\n role=\"radiogroup\"\n :aria-label=\"!isLabeledByFormItem ? ariaLabel || 'segmented' : undefined\"\n :aria-labelledby=\"isLabeledByFormItem ? formItem!.labelId : undefined\"\n >\n <div :class=\"ns.e('group')\">\n <div :style=\"selectedStyle\" :class=\"selectedCls\" />\n <label\n v-for=\"(item, index) in options\"\n :key=\"index\"\n :class=\"getItemCls(item)\"\n >\n <input\n :class=\"ns.e('item-input')\"\n type=\"radio\"\n :name=\"name\"\n :disabled=\"getDisabled(item)\"\n :checked=\"getSelected(item)\"\n @change=\"handleChange(item)\"\n />\n <div :class=\"ns.e('item-label')\">\n <slot :item=\"item\">{{ getLabel(item) }}</slot>\n </div>\n </label>\n </div>\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, reactive, ref, watch } from 'vue'\nimport { useActiveElement, useResizeObserver } from '@vueuse/core'\nimport { useId, useNamespace } from '@element-plus/hooks'\nimport {\n useFormDisabled,\n useFormItem,\n useFormItemInputId,\n useFormSize,\n} from '@element-plus/components/form'\nimport { debugWarn, isObject } from '@element-plus/utils'\nimport { CHANGE_EVENT, UPDATE_MODEL_EVENT } from '@element-plus/constants'\nimport { segmentedEmits, segmentedProps } from './segmented'\nimport type { Option } from './types'\n\ndefineOptions({\n name: 'ElSegmented',\n})\n\nconst props = defineProps(segmentedProps)\nconst emit = defineEmits(segmentedEmits)\n\nconst ns = useNamespace('segmented')\nconst segmentedId = useId()\nconst segmentedSize = useFormSize()\nconst _disabled = useFormDisabled()\nconst { formItem } = useFormItem()\nconst { inputId, isLabeledByFormItem } = useFormItemInputId(props, {\n formItemContext: formItem,\n})\n\nconst segmentedRef = ref<HTMLElement | null>(null)\nconst activeElement = useActiveElement()\n\nconst state = reactive({\n isInit: false,\n width: 0,\n translateX: 0,\n focusVisible: false,\n})\n\nconst handleChange = (item: Option) => {\n const value = getValue(item)\n emit(UPDATE_MODEL_EVENT, value)\n emit(CHANGE_EVENT, value)\n}\n\nconst getValue = (item: Option) => {\n return isObject(item) ? item.value : item\n}\n\nconst getLabel = (item: Option) => {\n return isObject(item) ? item.label : item\n}\n\nconst getDisabled = (item: Option | undefined) => {\n return !!(_disabled.value || (isObject(item) ? item.disabled : false))\n}\n\nconst getSelected = (item: Option) => {\n return props.modelValue === getValue(item)\n}\n\nconst getOption = (value: any) => {\n return props.options.find((item) => getValue(item) === value)\n}\n\nconst getItemCls = (item: Option) => {\n return [\n ns.e('item'),\n ns.is('selected', getSelected(item)),\n ns.is('disabled', getDisabled(item)),\n ]\n}\n\nconst updateSelect = () => {\n if (!segmentedRef.value) return\n const selectedItem = segmentedRef.value.querySelector(\n '.is-selected'\n ) as HTMLElement\n const selectedItemInput = segmentedRef.value.querySelector(\n '.is-selected input'\n ) as HTMLElement\n if (!selectedItem || !selectedItemInput) {\n state.width = 0\n state.translateX = 0\n state.focusVisible = false\n return\n }\n const rect = selectedItem.getBoundingClientRect()\n state.isInit = true\n state.width = rect.width\n state.translateX = selectedItem.offsetLeft\n try {\n // This will failed in test\n state.focusVisible = selectedItemInput.matches(':focus-visible')\n } catch {}\n}\n\nconst segmentedCls = computed(() => [\n ns.b(),\n ns.m(segmentedSize.value),\n ns.is('block', props.block),\n])\n\nconst selectedStyle = computed(() => ({\n width: `${state.width}px`,\n transform: `translateX(${state.translateX}px)`,\n display: state.isInit ? 'block' : 'none',\n}))\n\nconst selectedCls = computed(() => [\n ns.e('item-selected'),\n ns.is('disabled', getDisabled(getOption(props.modelValue))),\n ns.is('focus-visible', state.focusVisible),\n])\n\nconst name = computed(() => {\n return props.name || segmentedId.value\n})\n\nuseResizeObserver(segmentedRef, updateSelect)\n\nwatch(activeElement, updateSelect)\n\nwatch(\n () => props.modelValue,\n () => {\n updateSelect()\n if (props.validateEvent) {\n formItem?.validate?.('change').catch((err) => debugWarn(err))\n }\n },\n {\n flush: 'post',\n }\n)\n</script>\n"],"names":["useNamespace","useId","useFormSize","useFormDisabled","useFormItem","useFormItemInputId","ref","useActiveElement","reactive","UPDATE_MODEL_EVENT","CHANGE_EVENT","isObject","computed","useResizeObserver","watch","debugWarn"],"mappings":"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"}
|