| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151 |
- import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
- import _extends from "@babel/runtime/helpers/esm/extends";
- import { createVNode as _createVNode } from "vue";
- var __rest = this && this.__rest || function (s, e) {
- var t = {};
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
- if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
- }
- return t;
- };
- import { computed, watchEffect, onMounted, defineComponent, inject, onBeforeUnmount, ref } from 'vue';
- import classNames from '../_util/classNames';
- import VcCheckbox from '../vc-checkbox/Checkbox';
- import { flattenChildren } from '../_util/props-util';
- import warning from '../_util/warning';
- import { FormItemInputContext, useInjectFormItemContext } from '../form/FormItemContext';
- import useConfigInject from '../config-provider/hooks/useConfigInject';
- import { useInjectDisabled } from '../config-provider/DisabledContext';
- import { CheckboxGroupContextKey, checkboxProps } from './interface';
- // CSSINJS
- import useStyle from './style';
- export default defineComponent({
- compatConfig: {
- MODE: 3
- },
- name: 'ACheckbox',
- inheritAttrs: false,
- __ANT_CHECKBOX: true,
- props: checkboxProps(),
- // emits: ['change', 'update:checked'],
- setup(props, _ref) {
- let {
- emit,
- attrs,
- slots,
- expose
- } = _ref;
- const formItemContext = useInjectFormItemContext();
- const formItemInputContext = FormItemInputContext.useInject();
- const {
- prefixCls,
- direction,
- disabled
- } = useConfigInject('checkbox', props);
- const contextDisabled = useInjectDisabled();
- // style
- const [wrapSSR, hashId] = useStyle(prefixCls);
- const checkboxGroup = inject(CheckboxGroupContextKey, undefined);
- const uniId = Symbol('checkboxUniId');
- const mergedDisabled = computed(() => {
- return (checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.disabled.value) || disabled.value;
- });
- watchEffect(() => {
- if (!props.skipGroup && checkboxGroup) {
- checkboxGroup.registerValue(uniId, props.value);
- }
- });
- onBeforeUnmount(() => {
- if (checkboxGroup) {
- checkboxGroup.cancelValue(uniId);
- }
- });
- onMounted(() => {
- warning(!!(props.checked !== undefined || checkboxGroup || props.value === undefined), 'Checkbox', '`value` is not validate prop, do you mean `checked`?');
- });
- const handleChange = event => {
- const targetChecked = event.target.checked;
- emit('update:checked', targetChecked);
- emit('change', event);
- formItemContext.onFieldChange();
- };
- const checkboxRef = ref();
- const focus = () => {
- var _a;
- (_a = checkboxRef.value) === null || _a === void 0 ? void 0 : _a.focus();
- };
- const blur = () => {
- var _a;
- (_a = checkboxRef.value) === null || _a === void 0 ? void 0 : _a.blur();
- };
- expose({
- focus,
- blur
- });
- return () => {
- var _a;
- const children = flattenChildren((_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots));
- const {
- indeterminate,
- skipGroup,
- id = formItemContext.id.value
- } = props,
- restProps = __rest(props, ["indeterminate", "skipGroup", "id"]);
- const {
- onMouseenter,
- onMouseleave,
- onInput,
- class: className,
- style
- } = attrs,
- restAttrs = __rest(attrs, ["onMouseenter", "onMouseleave", "onInput", "class", "style"]);
- const checkboxProps = _extends(_extends(_extends(_extends({}, restProps), {
- id,
- prefixCls: prefixCls.value
- }), restAttrs), {
- disabled: mergedDisabled.value
- });
- if (checkboxGroup && !skipGroup) {
- checkboxProps.onChange = function () {
- for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
- args[_key] = arguments[_key];
- }
- emit('change', ...args);
- checkboxGroup.toggleOption({
- label: children,
- value: props.value
- });
- };
- checkboxProps.name = checkboxGroup.name.value;
- checkboxProps.checked = checkboxGroup.mergedValue.value.includes(props.value);
- checkboxProps.disabled = mergedDisabled.value || contextDisabled.value;
- checkboxProps.indeterminate = indeterminate;
- } else {
- checkboxProps.onChange = handleChange;
- }
- const classString = classNames({
- [`${prefixCls.value}-wrapper`]: true,
- [`${prefixCls.value}-rtl`]: direction.value === 'rtl',
- [`${prefixCls.value}-wrapper-checked`]: checkboxProps.checked,
- [`${prefixCls.value}-wrapper-disabled`]: checkboxProps.disabled,
- [`${prefixCls.value}-wrapper-in-form-item`]: formItemInputContext.isFormItemInput
- }, className, hashId.value);
- const checkboxClass = classNames({
- [`${prefixCls.value}-indeterminate`]: indeterminate
- }, hashId.value);
- const ariaChecked = indeterminate ? 'mixed' : undefined;
- return wrapSSR(_createVNode("label", {
- "class": classString,
- "style": style,
- "onMouseenter": onMouseenter,
- "onMouseleave": onMouseleave
- }, [_createVNode(VcCheckbox, _objectSpread(_objectSpread({
- "aria-checked": ariaChecked
- }, checkboxProps), {}, {
- "class": checkboxClass,
- "ref": checkboxRef
- }), null), children.length ? _createVNode("span", null, [children]) : null]));
- };
- }
- });
|