123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107 |
- 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
- };
|