108 lines
3.1 KiB
JavaScript
108 lines
3.1 KiB
JavaScript
import { createVNode as _createVNode } from "vue";
|
|
import { ref, computed, defineComponent } from "vue";
|
|
import { extend, addUnit, truthProp, numericProp, unknownProp, makeStringProp, makeRequiredProp } from "../utils/index.mjs";
|
|
import { Icon } from "../icon/index.mjs";
|
|
const checkerProps = {
|
|
name: unknownProp,
|
|
shape: makeStringProp("round"),
|
|
disabled: Boolean,
|
|
iconSize: numericProp,
|
|
modelValue: unknownProp,
|
|
checkedColor: String,
|
|
labelPosition: String,
|
|
labelDisabled: Boolean
|
|
};
|
|
var stdin_default = defineComponent({
|
|
props: extend({}, checkerProps, {
|
|
bem: makeRequiredProp(Function),
|
|
role: String,
|
|
parent: Object,
|
|
checked: Boolean,
|
|
bindGroup: truthProp
|
|
}),
|
|
emits: ["click", "toggle"],
|
|
setup(props, {
|
|
emit,
|
|
slots
|
|
}) {
|
|
const iconRef = ref();
|
|
const getParentProp = (name) => {
|
|
if (props.parent && props.bindGroup) {
|
|
return props.parent.props[name];
|
|
}
|
|
};
|
|
const disabled = computed(() => getParentProp("disabled") || props.disabled);
|
|
const direction = computed(() => getParentProp("direction"));
|
|
const iconStyle = computed(() => {
|
|
const checkedColor = props.checkedColor || getParentProp("checkedColor");
|
|
if (checkedColor && props.checked && !disabled.value) {
|
|
return {
|
|
borderColor: checkedColor,
|
|
backgroundColor: checkedColor
|
|
};
|
|
}
|
|
});
|
|
const onClick = (event) => {
|
|
const {
|
|
target
|
|
} = event;
|
|
const icon = iconRef.value;
|
|
const iconClicked = icon === target || (icon == null ? void 0 : icon.contains(target));
|
|
if (!disabled.value && (iconClicked || !props.labelDisabled)) {
|
|
emit("toggle");
|
|
}
|
|
emit("click", event);
|
|
};
|
|
const renderIcon = () => {
|
|
const {
|
|
bem,
|
|
shape,
|
|
checked
|
|
} = props;
|
|
const iconSize = props.iconSize || getParentProp("iconSize");
|
|
return _createVNode("div", {
|
|
"ref": iconRef,
|
|
"class": bem("icon", [shape, {
|
|
disabled: disabled.value,
|
|
checked
|
|
}]),
|
|
"style": {
|
|
fontSize: addUnit(iconSize)
|
|
}
|
|
}, [slots.icon ? slots.icon({
|
|
checked,
|
|
disabled: disabled.value
|
|
}) : _createVNode(Icon, {
|
|
"name": "success",
|
|
"style": iconStyle.value
|
|
}, null)]);
|
|
};
|
|
const renderLabel = () => {
|
|
if (slots.default) {
|
|
return _createVNode("span", {
|
|
"class": props.bem("label", [props.labelPosition, {
|
|
disabled: disabled.value
|
|
}])
|
|
}, [slots.default()]);
|
|
}
|
|
};
|
|
return () => {
|
|
const nodes = props.labelPosition === "left" ? [renderLabel(), renderIcon()] : [renderIcon(), renderLabel()];
|
|
return _createVNode("div", {
|
|
"role": props.role,
|
|
"class": props.bem([{
|
|
disabled: disabled.value,
|
|
"label-disabled": props.labelDisabled
|
|
}, direction.value]),
|
|
"tabindex": disabled.value ? void 0 : 0,
|
|
"aria-checked": props.checked,
|
|
"onClick": onClick
|
|
}, [nodes]);
|
|
};
|
|
}
|
|
});
|
|
export {
|
|
checkerProps,
|
|
stdin_default as default
|
|
};
|