tdesign-mobile-vue
Version:
tdesign-mobile-vue
184 lines (180 loc) • 7.82 kB
JavaScript
/**
* tdesign v1.7.0
* (c) 2024 TDesign Group
* @license MIT
*/
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import { defineComponent, inject, computed, createVNode, mergeProps } from 'vue';
import { CheckCircleFilledIcon, CheckIcon } from 'tdesign-icons-vue-next';
import config from '../config.js';
import props from './props.js';
import { useFormDisabled } from '../form/hooks.js';
import { usePrefixClass } from '../hooks/useClass.js';
import { useContent, useTNodeJSX } from '../hooks/tnode.js';
import { useDefault } from '../shared/useDefault/index.js';
import 'lodash/isBoolean';
import '../config-provider/useConfig.js';
import 'lodash/isFunction';
import 'lodash/cloneDeep';
import 'lodash/isString';
import '../config-provider/context.js';
import 'lodash/mergeWith';
import 'lodash/merge';
import 'lodash/isArray';
import '../_common/js/global-config/mobile/default-config.js';
import '../_common/js/global-config/mobile/locale/zh_CN.js';
import '../_chunks/dep-d5364bc4.js';
import '@babel/runtime/helpers/typeof';
import '../_chunks/dep-eb734424.js';
import 'dayjs';
import 'lodash/camelCase';
import 'lodash/kebabCase';
import '../hooks/render-tnode.js';
import 'lodash/isEmpty';
import 'lodash/isObject';
var prefix = config.prefix;
var _Radio = defineComponent({
name: "".concat(prefix, "-radio"),
props: props,
emits: ["update:checked", "update:modelValue", "change"],
setup: function setup(props2, context) {
var renderTNodeContent = useContent();
var renderTNodeJSX = useTNodeJSX();
var radioClass = usePrefixClass("radio");
var _useDefault = useDefault(props2, context.emit, "checked", "change"),
_useDefault2 = _slicedToArray(_useDefault, 2),
innerChecked = _useDefault2[0],
setInnerChecked = _useDefault2[1];
var rootGroupProps = inject("rootGroupProps", {});
var rootGroupValue = inject("rootGroupValue", {});
var rootGroupChange = inject("rootGroupChange", void 0);
var groupDisabled = computed(function () {
return rootGroupProps === null || rootGroupProps === void 0 ? void 0 : rootGroupProps.disabled;
});
var isDisabled = useFormDisabled(groupDisabled);
var radioChecked = computed(function () {
return innerChecked.value || props2.value && props2.value === (rootGroupValue === null || rootGroupValue === void 0 ? void 0 : rootGroupValue.value);
});
var finalBorderless = computed(function () {
if (props2.borderless == null && "borderless" in rootGroupProps) return rootGroupProps.borderless;
return props2.borderless;
});
var finalPlacement = computed(function () {
if (props2.placement == null && "placement" in rootGroupProps) return rootGroupProps.placement;
return props2.placement || "left";
});
var finalAllowUncheck = computed(function () {
return Boolean(props2.allowUncheck || (rootGroupProps === null || rootGroupProps === void 0 ? void 0 : rootGroupProps.allowUncheck));
});
var finalReadonly = computed(function () {
return Boolean(props2.readonly || (rootGroupProps === null || rootGroupProps === void 0 ? void 0 : rootGroupProps.readonly));
});
var inputProps = computed(function () {
return {
name: rootGroupProps.name || props2.name,
checked: radioChecked.value,
disabled: isDisabled.value,
readonly: finalReadonly.value,
value: props2.value
};
});
var iconContent = computed(function () {
var _props2$icon;
if (((_props2$icon = props2.icon) === null || _props2$icon === void 0 ? void 0 : _props2$icon.length) === 2) {
var iconIndex = radioChecked.value ? 0 : 1;
return props2.icon[iconIndex];
}
return null;
});
var radioClasses = computed(function () {
return ["".concat(radioClass.value), "".concat(radioClass.value, "--").concat(finalPlacement.value), _defineProperty({}, "".concat(radioClass.value, "--block"), props2.block)];
});
var titleClasses = computed(function () {
return ["".concat(radioClass.value, "__title"), _defineProperty({}, "".concat(radioClass.value, "__title--disabled"), isDisabled.value)];
});
var iconClass = computed(function () {
return ["".concat(radioClass.value, "__icon"), "".concat(radioClass.value, "__icon--").concat(finalPlacement.value), _defineProperty(_defineProperty({}, "".concat(radioClass.value, "__icon--checked"), radioChecked.value), "".concat(radioClass.value, "__icon--disabled"), isDisabled.value)];
});
var radioContentChange = function radioContentChange(e) {
e.stopPropagation();
if (props2.contentDisabled) {
return;
}
radioOrgChange(e);
};
var radioOrgChange = function radioOrgChange(e) {
if (isDisabled.value || finalReadonly.value) {
return;
}
if (rootGroupChange) {
var value = finalAllowUncheck.value && radioChecked.value ? void 0 : props2.value;
rootGroupChange(value, {
e: e,
name: props2.name
});
} else {
var _value = finalAllowUncheck.value ? !radioChecked.value : true;
setInnerChecked(_value, {
e: e
});
}
};
var readerIcon = function readerIcon() {
if (radioChecked.value) {
if (props2.icon === "circle") {
return createVNode(CheckCircleFilledIcon, {
"class": "".concat(radioClass.value, "__icon-wrap")
}, null);
}
if (props2.icon === "line") {
return createVNode(CheckIcon, {
"class": "".concat(radioClass.value, "__icon-wrap")
}, null);
}
if (props2.icon === "dot") {
return createVNode("div", {
"class": ["".concat(radioClass.value, "__icon-").concat(props2.icon), _defineProperty({}, "".concat(radioClass.value, "__icon-").concat(props2.icon, "--disabled"), isDisabled.value)]
}, null);
}
} else {
if (props2.icon === "circle" || props2.icon === "dot") {
return createVNode("div", {
"class": ["".concat(radioClass.value, "__icon-circle"), _defineProperty({}, "".concat(radioClass.value, "__icon-circle--disabled"), isDisabled.value)]
}, null);
}
if (props2.icon === "line") {
return createVNode("div", {
"class": "placeholder"
}, null);
}
}
};
return function () {
var label = renderTNodeContent("default", "label");
var content = renderTNodeJSX("content");
return createVNode("div", {
"class": radioClasses.value,
"onClick": radioOrgChange
}, [createVNode("input", mergeProps({
"type": "radio",
"class": "".concat(radioClass.value, "__original")
}, inputProps.value), null), createVNode("div", {
"class": iconClass.value
}, [readerIcon(), iconContent.value]), createVNode("div", {
"class": "".concat(radioClass.value, "__content"),
"onClick": radioContentChange
}, [label && createVNode("span", {
"class": titleClasses.value,
"style": "-webkit-line-clamp: ".concat(props2.maxLabelRow)
}, [label]), content && createVNode("div", {
"class": ["".concat(radioClass.value, "__description"), _defineProperty({}, "".concat(radioClass.value, "__description"), isDisabled.value)],
"style": "-webkit-line-clamp: ".concat(props2.maxContentRow)
}, [content])]), !finalBorderless.value && createVNode("div", {
"class": "".concat(radioClass.value, "__border ").concat(radioClass.value, "__border--").concat(finalPlacement.value)
}, null)]);
};
}
});
export { _Radio as default };
//# sourceMappingURL=radio.js.map