element3
Version:
A Component Library for Vue3
1,866 lines (1,663 loc) • 1.04 MB
JavaScript
/*!
* element3 v0.0.39
* (c) 2021 kkb
* @license MIT
*/
var Element3 = (function (exports, vue) {
'use strict';
/* istanbul ignore next */
const SPECIAL_CHARS_REGEXP = /([\:\-\_]+(.))/g;
const MOZ_HACK_REGEXP = /^moz([A-Z])/;
const ieVersion = Number(document.documentMode);
/* istanbul ignore next */
const trim = function (string) {
return (string || '').replace(/^[\s\uFEFF]+|[\s\uFEFF]+$/g, '');
};
/* istanbul ignore next */
const camelCase = function (name) {
return name.replace(SPECIAL_CHARS_REGEXP, function (_, separator, letter, offset) {
return offset ? letter.toUpperCase() : letter;
}).replace(MOZ_HACK_REGEXP, 'Moz$1');
};
/* istanbul ignore next */
const on = function () {
if (document.addEventListener) {
return function (element, event, handler) {
if (element && event && handler) {
element.addEventListener(event, handler, false);
}
};
} else {
return function (element, event, handler) {
if (element && event && handler) {
element.attachEvent('on' + event, handler);
}
};
}
}();
/* istanbul ignore next */
const off = function () {
if (document.removeEventListener) {
return function (element, event, handler) {
if (element && event) {
element.removeEventListener(event, handler, false);
}
};
} else {
return function (element, event, handler) {
if (element && event) {
element.detachEvent('on' + event, handler);
}
};
}
}();
/* istanbul ignore next */
const once = function (el, event, fn) {
var listener = function () {
if (fn) {
fn.apply(this, arguments);
}
off(el, event, listener);
};
on(el, event, listener);
};
/* istanbul ignore next */
function hasClass(el, cls) {
if (!el || !cls) return false;
if (cls.indexOf(' ') !== -1) throw new Error('className should not contain space.');
if (el.classList) {
return el.classList.contains(cls);
} else {
return (' ' + el.className + ' ').indexOf(' ' + cls + ' ') > -1;
}
}
/* istanbul ignore next */
function addClass(el, cls) {
if (!el) return;
var curClass = el.className;
var classes = (cls || '').split(' ');
for (var i = 0, j = classes.length; i < j; i++) {
var clsName = classes[i];
if (!clsName) continue;
if (el.classList) {
el.classList.add(clsName);
} else if (!hasClass(el, clsName)) {
curClass += ' ' + clsName;
}
}
if (!el.classList) {
el.className = curClass;
}
}
/* istanbul ignore next */
function removeClass(el, cls) {
if (!el || !cls) return;
var classes = cls.split(' ');
var curClass = ' ' + el.className + ' ';
for (var i = 0, j = classes.length; i < j; i++) {
var clsName = classes[i];
if (!clsName) continue;
if (el.classList) {
el.classList.remove(clsName);
} else if (hasClass(el, clsName)) {
curClass = curClass.replace(' ' + clsName + ' ', ' ');
}
}
if (!el.classList) {
el.className = trim(curClass);
}
}
/* istanbul ignore next */
const getStyle = ieVersion < 9 ? function (element, styleName) {
if (!element || !styleName) return null;
styleName = camelCase(styleName);
if (styleName === 'float') {
styleName = 'styleFloat';
}
try {
switch (styleName) {
case 'opacity':
try {
return element.filters.item('alpha').opacity / 100;
} catch (e) {
return 1.0;
}
default:
return element.style[styleName] || element.currentStyle ? element.currentStyle[styleName] : null;
}
} catch (e) {
return element.style[styleName];
}
} : function (element, styleName) {
if (!element || !styleName) return null;
styleName = camelCase(styleName);
if (styleName === 'float') {
styleName = 'cssFloat';
}
try {
var computed = document.defaultView.getComputedStyle(element, '');
return element.style[styleName] || computed ? computed[styleName] : null;
} catch (e) {
return element.style[styleName];
}
};
const isScroll = (el, vertical) => {
const determinedDirection = vertical !== null || vertical !== undefined;
const overflow = determinedDirection ? vertical ? getStyle(el, 'overflow-y') : getStyle(el, 'overflow-x') : getStyle(el, 'overflow');
return overflow.match(/(scroll|auto)/);
};
const getScrollContainer = (el, vertical) => {
let parent = el;
while (parent) {
if ([window, document, document.documentElement].includes(parent)) {
return window;
}
if (isScroll(parent, vertical)) {
return parent;
}
parent = parent.parentNode;
}
return parent;
};
const isInContainer = (el, container) => {
if (!el || !container) return false;
const elRect = el.getBoundingClientRect();
let containerRect;
if ([window, document, document.documentElement, null, undefined].includes(container)) {
containerRect = {
top: 0,
right: window.innerWidth,
bottom: window.innerHeight,
left: 0
};
} else {
containerRect = container.getBoundingClientRect();
}
return elRect.top < containerRect.bottom && elRect.bottom > containerRect.top && elRect.right > containerRect.left && elRect.left < containerRect.right;
};
class TransitionFn {
beforeEnter(el) {
addClass(el, 'collapse-transition');
!el.dataset && (el.dataset = {});
el.dataset.oldPaddingTop = el.style.paddingTop;
el.dataset.oldPaddingBottom = el.style.paddingBottom;
el.style.height = '0';
el.style.paddingTop = 0;
el.style.paddingBottom = 0;
}
enter(el) {
el.dataset.oldOverflow = el.style.overflow;
if (el.scrollHeight !== 0) {
el.style.height = el.scrollHeight + 'px';
el.style.paddingTop = el.dataset.oldPaddingTop;
el.style.paddingBottom = el.dataset.oldPaddingBottom;
} else {
el.style.height = '';
el.style.paddingTop = el.dataset.oldPaddingTop;
el.style.paddingBottom = el.dataset.oldPaddingBottom;
}
el.style.overflow = 'hidden';
}
afterEnter(el) {
// for safari: remove class then reset height is necessary
removeClass(el, 'collapse-transition');
el.style.height = '';
el.style.overflow = el.dataset.oldOverflow;
}
beforeLeave(el) {
if (!el.dataset) el.dataset = {};
el.dataset.oldPaddingTop = el.style.paddingTop;
el.dataset.oldPaddingBottom = el.style.paddingBottom;
el.dataset.oldOverflow = el.style.overflow;
el.style.height = el.scrollHeight + 'px';
el.style.overflow = 'hidden';
}
leave(el) {
if (el.scrollHeight !== 0) {
// for safari: add class after set height, or it will jump to zero height suddenly, weired
addClass(el, 'collapse-transition');
el.style.height = 0;
el.style.paddingTop = 0;
el.style.paddingBottom = 0;
}
}
afterLeave(el) {
removeClass(el, 'collapse-transition');
el.style.height = '';
el.style.overflow = el.dataset.oldOverflow;
el.style.paddingTop = el.dataset.oldPaddingTop;
el.style.paddingBottom = el.dataset.oldPaddingBottom;
}
}
const ElCollapseTransition = (props, context) => {
const transitions = new TransitionFn();
const data = {
onBeforeEnter: transitions.beforeEnter,
onEnter: transitions.enter,
onAfterEnter: transitions.afterEnter,
onBeforeLeave: transitions.beforeLeave,
onLeave: transitions.leave,
onAfterLeave: transitions.afterLeave
};
return vue.h(vue.Transition, data, context.slots);
};
ElCollapseTransition.install = function (app) {
app.component('ElCollapseTransition', ElCollapseTransition);
};
var ElRow = {
name: 'ElRow',
componentName: 'ElRow',
setup(props) {
const style = vue.computed(() => {
const ret = {};
if (props.gutter) {
ret.marginLeft = `-${props.gutter / 2}px`;
ret.marginRight = ret.marginLeft;
}
return ret;
});
vue.provide('el-row', vue.getCurrentInstance());
return {
style
};
},
props: {
tag: {
type: String,
default: 'div'
},
gutter: {
type: Number,
default: 0
},
type: String,
justify: {
type: String,
default: 'start'
},
align: {
type: String,
default: 'top'
}
},
render() {
return vue.h(this.tag, {
class: ['el-row', this.justify !== 'start' ? `is-justify-${this.justify}` : '', this.align !== 'top' ? `is-align-${this.align}` : '', {
'el-row--flex': this.type === 'flex'
}],
style: this.style
}, this.$slots.default && this.$slots.default());
}
};
/* istanbul ignore next */
ElRow.install = function (app) {
app.component(ElRow.name, ElRow);
};
var script$1B = {
name: 'ElCol',
props: {
span: {
type: Number,
default: 24
},
tag: {
type: String,
default: 'div'
},
offset: Number,
pull: Number,
push: Number,
xs: [Number, Object],
sm: [Number, Object],
md: [Number, Object],
lg: [Number, Object],
xl: [Number, Object]
},
setup(props, {
slots
}) {
const {
tag
} = vue.toRefs(props);
const gutter = vue.computed(() => {
let {
parent
} = vue.getCurrentInstance();
while (parent && parent.type.componentName !== 'ElRow') {
parent = parent.parent;
}
return parent ? parent.props.gutter : 0;
});
return () => {
const classList = [];
const style = {};
if (vue.unref(gutter)) {
style.paddingLeft = vue.unref(gutter) / 2 + 'px';
style.paddingRight = style.paddingLeft;
}
['span', 'offset', 'pull', 'push'].forEach(prop => {
if (vue.unref(vue.toRefs(props)[prop]) || vue.unref(vue.toRefs(props)[prop]) === 0) {
classList.push(prop !== 'span' ? `el-col-${prop}-${vue.unref(vue.toRefs(props)[prop])}` : `el-col-${vue.unref(vue.toRefs(props)[prop])}`);
}
});
['xs', 'sm', 'md', 'lg', 'xl'].forEach(size => {
if (typeof vue.unref(vue.toRefs(props)[size]) === 'number') {
classList.push(`el-col-${size}-${vue.unref(vue.toRefs(props)[size])}`);
} else if (typeof vue.unref(vue.toRefs(props)[size]) === 'object') {
const propsData = vue.unref(vue.toRefs(props)[size]);
Object.keys(propsData).forEach(prop => {
classList.push(prop !== 'span' ? `el-col-${size}-${prop}-${propsData[prop]}` : `el-col-${size}-${propsData[prop]}`);
});
}
});
return vue.h(vue.unref(tag), {
class: ['el-col', classList],
style
}, slots.default ? slots.default() : '');
};
}
};
script$1B.__file = "packages/col/Col.vue";
/* istanbul ignore next */
script$1B.install = function (app) {
app.component(script$1B.name, script$1B);
};
var script$1A = {
name: 'ElContainer',
props: {
direction: {
type: String,
default: 'horizontal'
}
},
setup(props, {
slots
}) {
const {
direction
} = vue.toRefs(props);
const isVertical = vue.computed(() => {
if (direction === 'vertical') {
return true;
} else if (direction === 'horizontal') {
return false;
}
if (slots && slots.default) {
return slots.default().some(vNode => {
const tag = vNode.type && vNode.type.name;
return tag === 'ElHeader' || tag === 'ElFooter';
});
} else {
return false;
}
});
return {
isVertical
};
}
};
function render$1q(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createBlock("section", {
class: ["el-container", {
'is-vertical': $setup.isVertical
}]
}, [vue.renderSlot(_ctx.$slots, "default")], 2
/* CLASS */
);
}
script$1A.render = render$1q;
script$1A.__file = "src/components/Container/src/Container.vue";
/* istanbul ignore next */
script$1A.install = function (app) {
app.component(script$1A.name, script$1A);
};
var script$1z = {
name: 'ElHeader',
props: {
height: {
type: String,
default: '60px'
}
}
};
function render$1p(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createBlock("header", {
class: "el-header",
style: {
height: $props.height
}
}, [vue.renderSlot(_ctx.$slots, "default")], 4
/* STYLE */
);
}
script$1z.render = render$1p;
script$1z.__file = "packages/header/Header.vue";
/* istanbul ignore next */
script$1z.install = function (app) {
app.component(script$1z.name, script$1z);
};
var script$1y = {
name: 'ElFooter',
componentName: 'ElFooter',
props: {
height: {
type: String,
default: '60px'
}
}
};
function render$1o(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createBlock("footer", {
class: "el-footer",
style: {
height: $props.height
}
}, [vue.renderSlot(_ctx.$slots, "default")], 4
/* STYLE */
);
}
script$1y.render = render$1o;
script$1y.__file = "packages/footer/Footer.vue";
/* istanbul ignore next */
script$1y.install = function (app) {
app.component(script$1y.name, script$1y);
};
var script$1x = {
name: 'ElAside',
componentName: 'ElAside',
props: {
width: {
type: String,
default: '300px'
}
}
};
function render$1n(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createBlock("aside", {
class: "el-aside",
style: {
width: $props.width
}
}, [vue.renderSlot(_ctx.$slots, "default")], 4
/* STYLE */
);
}
script$1x.render = render$1n;
script$1x.__file = "packages/aside/Aside.vue";
/* istanbul ignore next */
script$1x.install = function (app) {
app.component(script$1x.name, script$1x);
};
var script$1w = {
name: 'ElMain',
componentName: 'ElMain'
};
const _hoisted_1$Y = {
class: "el-main"
};
function render$1m(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createBlock("main", _hoisted_1$Y, [vue.renderSlot(_ctx.$slots, "default")]);
}
script$1w.render = render$1m;
script$1w.__file = "packages/main/Main.vue";
/* istanbul ignore next */
script$1w.install = function (app) {
app.component(script$1w.name, script$1w);
};
var script$1v = {
name: 'ElIcon',
props: {
name: String
}
};
function render$1l(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createBlock("i", {
class: `el-icon-${$props.name}`
}, null, 2
/* CLASS */
);
}
script$1v.render = render$1l;
script$1v.__file = "packages/icon/Icon.vue";
/* istanbul ignore next */
script$1v.install = function (app) {
app.component(script$1v.name, script$1v);
};
const props$7 = {
size: {
type: String,
validator(val) {
return ['medium', 'small', 'mini', ''].includes(val);
}
},
type: {
type: String,
validator(val) {
return [
'primary',
'success',
'warning',
'danger',
'info',
'text'
].includes(val);
}
},
nativeType: {
type: String,
default: 'button'
},
plain: Boolean,
round: Boolean,
circle: Boolean,
loading: Boolean,
disabled: Boolean,
icon: String
};
/**
* get globalOptions $ELEMENT config object
*/
function useGlobalOptions() {
const instance = vue.getCurrentInstance();
if (!instance) {
console.warn('useGlobalOptions must be call in setup function');
return;
}
return instance.appContext.config.globalProperties.$ELEMENT || {};
}
function setupGlobalOptions(opts = {}) {
return app => {
app.config.globalProperties.$ELEMENT = {
size: opts.size || '',
zIndex: opts.zIndex || 2000
};
};
}
var script$1u = vue.defineComponent({
name: 'ElButton',
props: props$7,
setup(props) {
const {
size,
disabled
} = vue.toRefs(props);
const buttonSize = useButtonSize(size);
const buttonDisabled = useButtonDisabled(disabled);
const classes = useClasses$5({
props,
size: buttonSize,
disabled: buttonDisabled
});
return {
buttonDisabled,
classes
};
}
});
const useClasses$5 = ({
props,
size,
disabled
}) => {
return vue.computed(() => {
return [size.value ? `el-button--${size.value}` : '', props.type ? `el-button--${props.type}` : '', {
'is-plain': props.plain,
'is-round': props.round,
'is-circle': props.circle,
'is-loading': props.loading,
'is-disabled': disabled.value
}];
});
};
const useButtonDisabled = disabled => {
return vue.computed(() => {
const elForm = vue.inject('elForm', null);
return (disabled === null || disabled === void 0 ? void 0 : disabled.value) || (elForm === null || elForm === void 0 ? void 0 : elForm.disabled);
});
};
const useButtonSize = size => {
const globalConfig = useGlobalOptions();
return vue.computed(() => {
const elFormItem = vue.inject('elFormItem', null);
return (size === null || size === void 0 ? void 0 : size.value) || (elFormItem === null || elFormItem === void 0 ? void 0 : elFormItem.elFormItemSize) || globalConfig.size;
});
};
const _hoisted_1$X = {
key: 0,
class: "el-icon-loading",
"data-testid": "loadingIcon"
};
const _hoisted_2$B = {
key: 2
};
function render$1k(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createBlock("button", {
class: ["el-button", _ctx.classes],
type: _ctx.nativeType,
disabled: _ctx.buttonDisabled || _ctx.loading
}, [_ctx.loading ? (vue.openBlock(), vue.createBlock("i", _hoisted_1$X)) : _ctx.icon ? (vue.openBlock(), vue.createBlock("i", {
key: 1,
class: _ctx.icon,
"data-testid": "icon"
}, null, 2
/* CLASS */
)) : vue.createCommentVNode("v-if", true), _ctx.$slots.default ? (vue.openBlock(), vue.createBlock("span", _hoisted_2$B, [vue.renderSlot(_ctx.$slots, "default")])) : vue.createCommentVNode("v-if", true)], 10
/* CLASS, PROPS */
, ["type", "disabled"]);
}
script$1u.render = render$1k;
script$1u.__file = "src/components/Button/src/Button.vue";
script$1u.install = function (app) {
app.component(script$1u.name, script$1u);
};
var script$1t = {
name: 'ElButtonGroup'
};
const _hoisted_1$W = {
class: "el-button-group"
};
function render$1j(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createBlock("div", _hoisted_1$W, [vue.renderSlot(_ctx.$slots, "default")]);
}
script$1t.render = render$1j;
script$1t.__file = "packages/button-group/ButtonGroup.vue";
/* istanbul ignore next */
script$1t.install = function (app) {
app.component(script$1t.name, script$1t);
};
var script$1s = {
name: 'ElLink',
props: {
type: {
type: String,
default: 'default'
},
disabled: {
type: Boolean,
default: false
},
underline: {
type: Boolean,
default: true
},
href: String,
icon: String
},
emits: ['click'],
setup(props, {
emit
}) {
const classes = useClasses$4(props);
const handleClick = event => {
if (props.disabled) return;
if (props.href) return;
emit('click', event);
};
return {
classes,
handleClick
};
}
};
const useClasses$4 = props => {
return ['el-link', props.type ? `el-link--${props.type}` : '', props.disabled && 'is-disabled', props.underline && !props.disabled && 'is-underline'];
};
const _hoisted_1$V = {
key: 1,
class: "el-link--inner"
};
function render$1i(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createBlock("a", vue.mergeProps({
class: $setup.classes,
href: $props.disabled ? null : $props.href
}, _ctx.$attrs, {
onClick: _cache[1] || (_cache[1] = (...args) => $setup.handleClick && $setup.handleClick(...args))
}), [$props.icon ? (vue.openBlock(), vue.createBlock("i", {
key: 0,
class: $props.icon
}, null, 2
/* CLASS */
)) : vue.createCommentVNode("v-if", true), _ctx.$slots.default ? (vue.openBlock(), vue.createBlock("span", _hoisted_1$V, [vue.renderSlot(_ctx.$slots, "default")])) : vue.createCommentVNode("v-if", true)], 16
/* FULL_PROPS */
, ["href"]);
}
script$1s.render = render$1i;
script$1s.__file = "src/components/Link/src/Link.vue";
/* istanbul ignore next */
script$1s.install = function (app) {
app.component(script$1s.name, script$1s);
};
const props$6 = {
modelValue: {
type: [String, Number, Symbol, Boolean, Array],
default: ''
},
label: {
type: [String, Number, Symbol, Boolean, Array],
default: ''
},
disabled: {
type: Boolean,
default: false
},
name: {
type: String,
default: ''
},
border: {
type: Boolean,
default: false
},
size: {
type: String,
default: ''
}
};
var script$1r = vue.defineComponent({
name: 'ElRadio',
componentName: 'ElRadio',
props: props$6,
emits: ['update:modelValue', 'update:value', 'change'],
setup(props, context) {
const focus = vue.ref(false);
const {
elForm,
elFormItem
} = useInject();
const {
isGroup,
radioGroup
} = useCheckGroup$1();
const radioValue = vue.computed({
get: () => isGroup ? radioGroup.proxy.modelValue : props.modelValue,
set: value => {
changeHandler(value);
}
});
const {
isDisabled,
radioSize,
tabIndex
} = useStyle$6({
props,
isGroup,
radioGroup,
elForm,
elFormItem,
radioValue
});
const labelClass = useLabelClass({
props,
radioSize,
radioValue,
isDisabled,
focus
});
const changeHandler = value => {
context.emit('update:modelValue', value);
isGroup && radioGroup.emit('update:modelValue', value);
context.emit('change', value);
isGroup && radioGroup.emit('change', value);
};
return {
focus,
radioValue,
isDisabled,
radioSize,
tabIndex,
labelClass,
changeHandler
};
}
});
const useInject = () => {
const elForm = vue.inject('elForm', {});
const elFormItem = vue.inject('elFormItem', {});
return {
elForm,
elFormItem
};
};
const useCheckGroup$1 = () => {
const {
parent
} = vue.getCurrentInstance();
const isGroup = parent.type.name === 'ElRadioGroup';
const radioGroup = isGroup ? parent : null;
return {
isGroup,
radioGroup
};
};
const useStyle$6 = ({
props,
isGroup,
radioGroup,
elForm,
elFormItem,
radioValue
}) => {
const {
proxy,
parent: {
proxy: {
radioGroupSize
}
}
} = vue.getCurrentInstance();
const elFormDisable = elForm.disabled;
const isDisabled = vue.computed(() => isGroup ? radioGroup.props.disabled || props.disabled || elFormDisable : props.disabled || elFormDisable);
const radioSize = vue.computed(() => props.size || radioGroupSize || elForm && elFormItem.elFormItemSize || (proxy.$ELEMENT || {}).size);
const tabIndex = vue.computed(() => isDisabled.value || isGroup && radioValue.value !== props.label ? -1 : 0);
return {
isDisabled,
radioSize,
tabIndex
};
};
const useLabelClass = ({
props,
radioSize,
radioValue,
isDisabled,
focus
}) => vue.computed(() => [props.border && radioSize.value ? `el-radio--${radioSize.value}` : '', {
'is-checked': radioValue.value === props.label
}, {
'is-disabled': isDisabled.value
}, {
'is-focus': focus.value
}, {
'is-bordered': props.border
}]);
const _hoisted_1$U = /*#__PURE__*/vue.createVNode("span", {
class: "el-radio__inner"
}, null, -1
/* HOISTED */
);
function render$1h(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createBlock("label", {
role: "radio",
class: ["el-radio", _ctx.labelClass],
"aria-checked": _ctx.radioValue === _ctx.label,
"aria-disabled": _ctx.isDisabled,
tabindex: _ctx.tabIndex
}, [vue.createVNode("span", {
class: ["el-radio__input", {
'is-disabled': _ctx.isDisabled,
'is-checked': _ctx.radioValue === _ctx.label
}]
}, [_hoisted_1$U, vue.withDirectives(vue.createVNode("input", {
type: "radio",
class: "el-radio__original",
value: _ctx.label,
"onUpdate:modelValue": _cache[1] || (_cache[1] = $event => _ctx.radioValue = $event),
name: _ctx.name,
"aria-hidden": "true",
disabled: _ctx.isDisabled,
onFocus: _cache[2] || (_cache[2] = $event => _ctx.focus = true),
onBlur: _cache[3] || (_cache[3] = $event => _ctx.focus = false),
tabindex: "-1"
}, null, 40
/* PROPS, HYDRATE_EVENTS */
, ["value", "name", "disabled"]), [[vue.vModelRadio, _ctx.radioValue]])], 2
/* CLASS */
), vue.createVNode("span", {
class: "el-radio__label",
onKeydown: _cache[4] || (_cache[4] = vue.withModifiers(() => {}, ["stop"]))
}, [vue.renderSlot(_ctx.$slots, "default", {}, () => [vue.createTextVNode(vue.toDisplayString(_ctx.label), 1
/* TEXT */
)])], 32
/* HYDRATE_EVENTS */
)], 10
/* CLASS, PROPS */
, ["aria-checked", "aria-disabled", "tabindex"]);
}
script$1r.render = render$1h;
script$1r.__file = "src/components/Radio/src/Radio.vue";
/* istanbul ignore next */
script$1r.install = function (app) {
app.component(script$1r.name, script$1r);
};
const props$5 = {
label: [String, Number, Symbol, Boolean],
disabled: Boolean,
name: String
};
var script$1q = {
name: 'ElRadioButton',
componentName: 'ElRadioButton',
props: props$5,
setup(props) {
const {
radioGroup
} = useCheckGroup();
const {
label,
disabled
} = vue.toRefs(props);
const focus = vue.ref(false);
let value = useModel$2(radioGroup);
const handleChange = useChange(radioGroup, value);
const {
style,
size,
isDisabled
} = useStyle$5({
disabled,
radioGroup
});
const {
classes,
isChecked,
tabIndex
} = useClasses$3({
size,
isDisabled,
value,
label,
focus,
radioGroup
});
return {
value,
handleChange,
isDisabled,
tabIndex,
classes,
isChecked,
style
};
}
};
const useCheckGroup = () => {
const {
parent
} = vue.getCurrentInstance();
const isGroup = parent.type.name === 'ElRadioGroup';
const radioGroup = isGroup ? parent : null;
return {
isGroup,
radioGroup
};
};
const useModel$2 = radioGroup => {
const value = vue.ref(radioGroup === null || radioGroup === void 0 ? void 0 : radioGroup.props.modelValue);
vue.watch(() => radioGroup === null || radioGroup === void 0 ? void 0 : radioGroup.props.modelValue, val => {
value.value = val;
});
return value;
};
const useChange = (radioGroup, value) => {
const handleChange = () => {
radioGroup === null || radioGroup === void 0 ? void 0 : radioGroup.emit('update:modelValue', value.value);
radioGroup === null || radioGroup === void 0 ? void 0 : radioGroup.emit('change', value.value);
};
return handleChange;
};
const useStyle$5 = ({
disabled,
radioGroup
}) => {
const globalConfig = useGlobalOptions();
const isDisabled = vue.computed(() => {
const elForm = vue.inject('elForm', {});
return (disabled === null || disabled === void 0 ? void 0 : disabled.value) || (radioGroup === null || radioGroup === void 0 ? void 0 : radioGroup.props.disabled) || elForm.disabled;
});
const size = vue.computed(() => {
const elFormItem = vue.inject('elFormItem', {});
return (radioGroup === null || radioGroup === void 0 ? void 0 : radioGroup.props.size) || (elFormItem === null || elFormItem === void 0 ? void 0 : elFormItem.elFormItemSize) || globalConfig.size;
});
const style = vue.computed(() => {
return {
backgroundColor: (radioGroup === null || radioGroup === void 0 ? void 0 : radioGroup.props.fill) || '',
borderColor: (radioGroup === null || radioGroup === void 0 ? void 0 : radioGroup.props.fill) || '',
boxShadow: radioGroup !== null && radioGroup !== void 0 && radioGroup.props.fill ? `-1px 0 0 0 ${radioGroup === null || radioGroup === void 0 ? void 0 : radioGroup.props.fill}` : '',
color: (radioGroup === null || radioGroup === void 0 ? void 0 : radioGroup.props.textColor) || ''
};
});
return {
isDisabled,
size,
style
};
};
const useClasses$3 = ({
size,
isDisabled,
focus,
value,
label,
radioGroup
}) => {
const isChecked = vue.computed(() => {
return value.value === label.value;
});
const tabIndex = vue.computed(() => {
return isDisabled.value || radioGroup && value.value !== label.value ? -1 : 0;
});
const classes = vue.computed(() => {
return [size.value ? 'el-radio-button--' + size.value : '', {
'is-active': isChecked.value
}, {
'is-disabled': isDisabled.value
}, {
'is-focus': focus.value
}];
});
return {
isChecked,
classes,
tabIndex
};
};
function render$1g(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createBlock("label", {
class: ["el-radio-button", $setup.classes],
role: "radio",
"aria-checked": $setup.isChecked,
"aria-disabled": $setup.isDisabled,
tabindex: $setup.tabIndex,
onKeydown: _cache[6] || (_cache[6] = vue.withKeys(vue.withModifiers($event => $setup.value = $setup.isDisabled ? $setup.value : _ctx.label, ["stop", "prevent"]), ["space"]))
}, [vue.withDirectives(vue.createVNode("input", {
class: "el-radio-button__orig-radio",
type: "radio",
onChange: _cache[1] || (_cache[1] = (...args) => $setup.handleChange && $setup.handleChange(...args)),
value: _ctx.label,
name: _ctx.name,
"onUpdate:modelValue": _cache[2] || (_cache[2] = $event => $setup.value = $event),
disabled: $setup.isDisabled,
onFocus: _cache[3] || (_cache[3] = $event => _ctx.focus = true),
onBlur: _cache[4] || (_cache[4] = $event => _ctx.focus = false),
tabindex: "-1"
}, null, 40
/* PROPS, HYDRATE_EVENTS */
, ["value", "name", "disabled"]), [[vue.vModelRadio, $setup.value]]), vue.createVNode("span", {
class: "el-radio-button__inner",
style: $setup.isChecked ? $setup.style : null,
onKeydown: _cache[5] || (_cache[5] = vue.withModifiers(() => {}, ["stop"]))
}, [vue.renderSlot(_ctx.$slots, "default", {}, () => [vue.createTextVNode(vue.toDisplayString(_ctx.label), 1
/* TEXT */
)])], 36
/* STYLE, HYDRATE_EVENTS */
)], 42
/* CLASS, PROPS, HYDRATE_EVENTS */
, ["aria-checked", "aria-disabled", "tabindex"]);
}
script$1q.render = render$1g;
script$1q.__file = "src/components/RadioButton/src/RadioButton.vue";
/* istanbul ignore next */
script$1q.install = function (app) {
app.component(script$1q.name, script$1q);
};
const props$4 = {
modelValue: [String, Number, Symbol, Boolean],
size: {
type: String,
validator(val) {
return ['medium', 'small', 'mini', ''].includes(val);
}
},
fill: {
type: String,
default: '#409EFF'
},
textColor: {
type: String,
default: '#ffffff'
},
disabled: Boolean
};
function mitt (n) {
return {
all: n = n || new Map(),
on: function (t, e) {
var i = n.get(t);
i && i.push(e) || n.set(t, [e]);
},
off: function (t, e) {
var i = n.get(t);
i && i.splice(i.indexOf(e) >>> 0, 1);
},
emit: function (t, e) {
(n.get(t) || []).slice().map(function (n) {
n(e);
}), (n.get("*") || []).slice().map(function (n) {
n(t, e);
});
}
};
}
const DISPATCH = 'dispatch';
const BROADCAST = 'broadcast';
const wrapper = Symbol('wrapper');
const emitter = mitt();
function useEmitter() {
const currentComponentInstance = vue.getCurrentInstance();
function on(type, handler) {
const handleWrapper = e => {
const {
value,
type,
emitComponentInstance
} = e;
if (type === BROADCAST) {
if (isChildComponent(currentComponentInstance, emitComponentInstance)) {
handler && handler(...value);
}
} else if (type === DISPATCH) {
if (isChildComponent(emitComponentInstance, currentComponentInstance)) {
handler && handler(...value);
}
} else {
handler && handler(...value);
}
}; // Save the real handler because the need to call off
handler[wrapper] = handleWrapper;
emitter.on(type, handleWrapper);
}
function broadcast(type, ...args) {
emitter.emit(type, {
type: BROADCAST,
emitComponentInstance: currentComponentInstance,
value: args
});
}
function dispatch(type, ...args) {
emitter.emit(type, {
type: DISPATCH,
emitComponentInstance: currentComponentInstance,
value: args
});
}
function off(type, handler) {
emitter.off(type, handler[wrapper]);
}
function once(type, handler) {
const handleOn = (...args) => {
handler && handler(...args);
off(type, handleOn);
};
on(type, handleOn);
}
return {
on,
broadcast,
dispatch,
off,
once
};
}
/**
* check componentChild is componentParent child components
* @param {*} componentChild
* @param {*} componentParent
*/
function isChildComponent(componentChild, componentParent) {
const parentUId = componentParent.uid;
while (componentChild && ((_componentChild = componentChild) === null || _componentChild === void 0 ? void 0 : (_componentChild$paren = _componentChild.parent) === null || _componentChild$paren === void 0 ? void 0 : _componentChild$paren.uid) !== parentUId) {
var _componentChild, _componentChild$paren;
componentChild = componentChild.parent;
}
return Boolean(componentChild);
}
var script$1p = vue.defineComponent({
name: 'ElRadioGroup',
props: props$4,
emits: ['update:modelValue', 'change'],
setup(props) {
const {
size,
modelValue
} = vue.toRefs(props);
const globalConfig = useGlobalOptions();
const elFormItem = vue.inject('elFormItem', {});
const {
dispatch
} = useEmitter();
vue.watch(modelValue, v => {
dispatch('el.form.change', v);
});
const radioGroupSize = useRadioGroupSize({
size,
elFormItem,
globalConfig
});
return {
radioGroupSize
};
}
});
const useRadioGroupSize = ({
size,
elFormItem,
globalConfig
}) => {
return vue.computed(() => {
return (size === null || size === void 0 ? void 0 : size.value) || (elFormItem === null || elFormItem === void 0 ? void 0 : elFormItem.elFormItemSize) || globalConfig.size;
});
};
const _hoisted_1$T = {
class: "el-radio-group",
role: "radiogroup"
};
function render$1f(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createBlock("div", _hoisted_1$T, [vue.renderSlot(_ctx.$slots, "default")]);
}
script$1p.render = render$1f;
script$1p.__file = "src/components/RadioGroup/src/RadioGroup.vue";
script$1p.install = function (app) {
app.component(script$1p.name, script$1p);
};
/**
* Make a map and return a function for checking if a key
* is in that map.
* IMPORTANT: all calls of this function must be prefixed with
* \/\*#\_\_PURE\_\_\*\/
* So that rollup can tree-shake them if necessary.
*/
Object.freeze({}) ;
Object.freeze([]) ;
const onRE = /^on[^a-z]/;
const isOn = key => onRE.test(key);
const isArray$1 = Array.isArray;
function usePropUtils() {
return {
isAfferentProp: isAfferentProp()
};
}
function isAfferentProp() {
// Used only for setuping or mounting
const {
vnode
} = vue.getCurrentInstance();
return propKey => {
return typeof vnode.props[propKey] !== 'undefined';
};
}
function useModel$1() {
// core
const {
emit,
props
} = vue.getCurrentInstance();
const elCheckboxGroup = vue.inject('elCheckboxGroup', {
props: {}
});
const {
dispatch
} = useEmitter();
const state = vue.reactive({
modelValue: null // If the parent element is ChceckboxGroup use its modelValue
});
vue.watchEffect(() => {
state.modelValue = elCheckboxGroup.props.modelValue || props.modelValue;
});
const model = vue.computed({
get() {
return state.modelValue; // BUG: if the Checkbox list and modelValue are an object, this causes the object element to be deleted.
// Resolve: `isArray(modelValue) ? [...modelValue] : modelValue`, but doing so will invalidate the `checked` prop.
},
set({
label,
checked
}) {
if (label && isArray$1(model.value)) {
// when modelValue or elCheckboxGroup.modeValue is array
const modelValue = model.value;
const labelIndex = modelValue.indexOf(label);
labelIndex === -1 && checked === true && modelValue.push(label);
labelIndex !== -1 && checked === false && modelValue.splice(labelIndex, 1);
state.modelValue = modelValue;
emit('update:modelValue', modelValue);
dispatch('update:modelValue', modelValue);
} else {
const modelValue = checked ? props.trueLabel : props.falseLabel;
state.modelValue = modelValue;
emit('update:modelValue', modelValue);
}
}
});
async function handleChange() {
await vue.nextTick();
emit('change', model.value);
dispatch('change', model.value);
}
return {
model,
handleChange
};
}
function useAria() {
const {
props,
vnode
} = vue.getCurrentInstance();
vue.onMounted(() => {
if (props.indeterminate) {
vnode.el.setAttribute('aria-controls', props.controls);
}
});
}
function useCheckSelected({
model
}) {
const {
props
} = vue.getCurrentInstance();
const {
isAfferentProp
} = usePropUtils();
const checkbox = vue.ref(null);
vue.onMounted(() => {
isAfferentProp('checked') && (model.value = {
label: props.label,
checked: props.checked
});
});
const isChecked = vue.computed(() => {
const _isChecked = isArray$1(model.value) ? model.value.indexOf(props.label) !== -1 : model.value === props.trueLabel;
checkbox.value && (checkbox.value.checked = _isChecked);
return _isChecked;
});
return {
isChecked,
checkbox
};
}
function useSize$1() {
const elCheckboxGroup = vue.inject('elCheckboxGroup', {
props: {},
proxy: {}
});
const {
props,
proxy
} = vue.getCurrentInstance();
const checkboxSize = vue.computed(() => {
return props.size || elCheckboxGroup.proxy.checkboxGroupSize || (proxy.$ELEMENT || {}).size;
});
return checkboxSize;
}
function useLimit({
model
}) {
const elCheckboxGroup = vue.inject('elCheckboxGroup', {
props: {},
proxy: {}
});
const {
props
} = vue.getCurrentInstance();
const isLimit = vue.computed(() => {
if (elCheckboxGroup.props.modelValue) {
// if elCheckboxGroup exist
const modelValueLength = elCheckboxGroup.props.modelValue.length;
const min = elCheckboxGroup.props.min;
const max = elCheckboxGroup.props.max;
return modelValueLength <= min && model.value.indexOf(props.label) !== -1 || modelValueLength >= max && model.value.indexOf(props.label) === -1;
} else {
return false;
}
});
return isLimit;
}
function useDisabled$1({
isLimit
}) {
const elCheckboxGroup = vue.inject('elCheckboxGroup', {
props: {},
proxy: {}
});
const {
props
} = vue.getCurrentInstance();
const isDisabled = vue.computed(() => {
return props.disabled || elCheckboxGroup.proxy.checkboxGroupDisabled || isLimit.value;
});
return isDisabled;
}
function useBorder() {
const elCheckboxGroup = vue.inject('elCheckboxGroup', {
props: {},
proxy: {}
});
const {
props
} = vue.getCurrentInstance();
const isBorder = vue.computed(() => {
return props.border || elCheckboxGroup.props.border;
});
return isBorder;
}
function useActiveStyle() {
const elCheckboxGroup = vue.inject('elCheckboxGroup', {
props: {},
proxy: {}
});
return {
backgroundColor: elCheckboxGroup.props.fill || '',
borderColor: elCheckboxGroup.props.fill || '',
color: elCheckboxGroup.props.textColor || '',
'box-shadow': '-1px 0 0 0 ' + elCheckboxGroup.props.fill
};
}
var script$1o = {
name: 'ElCheckbox',
props: {
modelValue: [String, Number, Boolean, Symbol, Array],
label: [String, Number, Boolean, Symbol],
indeterminate: Boolean,
disabled: Boolean,
checked: Boolean,
name: String,
trueLabel: {
type: [String, Number, Boolean],
default: true
},
falseLabel: {
type: [String, Number, Boolean],
default: false
},
id: String
/* 当indeterminate为真时，为controls提供相关连的checkbox的id，表明元素间的控制关系 */
,
controls: String
/* 当indeterminate为真时，为controls提供相关连的checkbox的id，表明元素间的控制关系 */
,
border: Boolean,
size: String
},
emits: ['update:modelValue', 'change'],
setup() {
const state = vue.reactive({
focus: false
});
useAria();
const {
model,
handleChange
} = useModel$1();
const isLimit = useLimit({
model
});
const {
isChecked,
checkbox
} = useCheckSelected({
model
});
const checkboxSize = useSize$1();
const isDisabled = useDisabled$1({
isLimit
});
const isBorder = useBorder();
return { ...vue.toRefs(state),
checkbox,
model,
isDisabled,
checkboxSize,
isChecked,
handleChange,
isBorder
};
}
};
const _hoisted_1$S = /*#__PURE__*/vue.createVNode("span", {
class: "el-checkbox__inner"
}, null, -1
/* HOISTED */
);
const _hoisted_2$A = {
key: 0,
class: "el-checkbox__label"
};
function render$1e(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createBlock("label", {
class: ["el-checkbox", [$setup.isBorder && $setup.checkboxSize ? 'el-checkbox--' + $setup.checkboxSize : '', {
'is-disabled': $setup.isDisabled
}, {
'is-bordered': $setup.isBorder
}, {
'is-checked': $setup.isChecked
}]],
role: "checkbox",
id: $props.id,
"aria-checked": $setup.isChecked,
"aria-disabled": $setup.isDisabled
}, [vue.createVNode("span", {
class: ["el-checkbox__input", {
'is-disabled': $setup.isDisabled,
'is-checked': $setup.isChecked,
'is-indeterminate': $props.indeterminate,
'is-focus': _ctx.focus
}],
tabindex: $props.indeterminate ? 0 : false,
role: $props.indeterminate ? 'checkbox' : false,
"aria-checked": $props.indeterminate ? 'mixed' : false
}, [_hoisted_1$S, vue.createVNode("input", {
class: "el-checkbox__original",
type: "checkbox",
ref: "checkbox",
"aria-hidden": $props.indeterminate ? 'true' : 'false',
name: $props.name,
disabled: $setup.isDisabled,
"true-value": $props.trueLabel,
"false-value": $props.falseLabel,
value: $props.label,
onChange: _cache[1] || (_cache[1] = (...args) => $setup.handleChange && $setup.handleChange(...args)),
onInput: _cache[2] || (_cache[2] = $event => $setup.model = {
label: $props.label,
checked: $event.target.checked
}),
onFocus: _cache[3] || (_cache[3] = $event => _ctx.focus = true),
onBlur: _cache[4] || (_cache[4] = $event => _ctx.focus = false)
}, null, 40
/* PROPS, HYDRATE_EVENTS */
, ["aria-hidden", "name", "disabled", "true-value", "false-value", "value"])], 10
/* CLASS, PROPS */
, ["tabindex", "role", "aria-checked"]), _ctx.$slots.default || $props.label ? (vue.openBlock(), vue.createBlock("span", _hoisted_2$A, [vue.renderSlot(_ctx.$slots, "default"), !_ctx.$slots.default ? (vue.openBlock(), vue.createBlock(vue.Fragment, {
key: 0
}, [vue.createTextVNode(vue.toDisplayString($props.label), 1
/* TEXT */
)], 64
/* STABLE_FRAGMENT */
)) : vue.createCommentVNode("v-if", true)])) : vue.createCommentVNode("v-if", true)], 10
/* CLASS, PROPS */
, ["id", "aria-checked", "aria-disabled"]);
}
script$1o.render = render$1e;
script$1o.__file = "packages/checkbox/Checkbox.vue";
/* istanbul ignore next */
script$1o.install = function (app) {
app.component(script$1o.name, script$1o);
};
var script$1n = {
name: 'ElCheckboxButton',
props: {
modelValue: [String, Number, Boolean, Symbol, Array],
label: [String, Number, Boolean, Symbol],
indeterminate: Boolean,
disabled: Boolean,
checked: Boolean,
name: String,
trueLabel: {
type: [String, Number, Boolean],
default: true
},
falseLabel: {
type: [String, Number, Boolean],
default: false
},
id: String
/* 当indeterminate为真时，为controls提供相关连的checkbox的id，表明元素间的控制关系 */
,
controls: String
/* 当indeterminate为真时，为controls提供相关连的checkbox的id，表明元素间的控制关系 */
,
border: Boolean,
size: String
},
emits: ['update:modelValue', 'change'],
setup() {
const state = vue.reactive({
focus: false
});
useAria();
const {
model,
handleChange
} = useModel$1();
const isLimit = useLimit({
model
});
const {
isChecked,
checkbox
} = useCheckSelected({
model
});
const checkboxSize = useSize$1();
const isDisabled = useDisabled$1({
isLimit
});
const activeStyle = useActiveStyle();
return { ...vue.toRefs(state),
checkbox,
model,
isDisabled,
checkboxSize,
isChecked,
handleChange,
activeStyle
};
}
};
function render$1d(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createBlock("label", {
class: ["el-checkbox-button", [$setup.checkboxSize ? 'el-checkbox-button--' + $setup.checkboxSize : '', {
'is-disabled': $setup.isDisabled
}, {
'is-checked': $setup.isChecked
}, {
'is-focus': _ctx.focus
}]],
role: "checkbox",
id: $props.id,
"aria-checked": $setup.isChecked,
"aria-disabled": $setup.isDisabled
}, [vue.createVNode("input", {
class: "el-checkbox-button__original",
type: "checkbox",
ref: "checkbox",
"aria-hidden": $props.indeterminate ? 'true' : 'false',
name: $props.name,
disabled: $setup.isDisabled,
"true-value": $props.trueLabel,
"false-value": $props.falseLabel,
modelValue: $setup.model,
value: $props.label,
onChange: _cache[1] || (_cache[1] = (...args) => $setup.handleChange && $setup.handleChange(...args)),
onInput: _cache[2] || (_cache[2] = $event => $setup.model = {
label: $props.label,
checked: $event.target.checked