前端初始化
This commit is contained in:
“hsc”
+6
@@ -0,0 +1,6 @@
|
||||
import { CheckboxDisabled, useCheckboxDisabled } from "./use-checkbox-disabled.js";
|
||||
import { useCheckboxEvent } from "./use-checkbox-event.js";
|
||||
import { CheckboxModel, useCheckboxModel } from "./use-checkbox-model.js";
|
||||
import { CheckboxStatus, useCheckboxStatus } from "./use-checkbox-status.js";
|
||||
import { useCheckbox } from "./use-checkbox.js";
|
||||
export { CheckboxDisabled, CheckboxModel, CheckboxStatus, useCheckbox, useCheckboxDisabled, useCheckboxEvent, useCheckboxModel, useCheckboxStatus };
|
||||
+11
@@ -0,0 +1,11 @@
|
||||
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
||||
const require_use_checkbox_disabled = require("./use-checkbox-disabled.js");
|
||||
const require_use_checkbox_event = require("./use-checkbox-event.js");
|
||||
const require_use_checkbox_model = require("./use-checkbox-model.js");
|
||||
const require_use_checkbox_status = require("./use-checkbox-status.js");
|
||||
const require_use_checkbox = require("./use-checkbox.js");
|
||||
exports.useCheckbox = require_use_checkbox.useCheckbox;
|
||||
exports.useCheckboxDisabled = require_use_checkbox_disabled.useCheckboxDisabled;
|
||||
exports.useCheckboxEvent = require_use_checkbox_event.useCheckboxEvent;
|
||||
exports.useCheckboxModel = require_use_checkbox_model.useCheckboxModel;
|
||||
exports.useCheckboxStatus = require_use_checkbox_status.useCheckboxStatus;
|
||||
Generated
Vendored
+15
@@ -0,0 +1,15 @@
|
||||
import { CheckboxModel } from "./use-checkbox-model.js";
|
||||
import { CheckboxStatus } from "./use-checkbox-status.js";
|
||||
import * as _$vue from "vue";
|
||||
|
||||
//#region ../../packages/components/checkbox/src/composables/use-checkbox-disabled.d.ts
|
||||
declare const useCheckboxDisabled: ({
|
||||
model,
|
||||
isChecked
|
||||
}: Pick<CheckboxModel, "model"> & Pick<CheckboxStatus, "isChecked">) => {
|
||||
isDisabled: _$vue.ComputedRef<boolean>;
|
||||
isLimitDisabled: _$vue.ComputedRef<boolean>;
|
||||
};
|
||||
type CheckboxDisabled = ReturnType<typeof useCheckboxDisabled>;
|
||||
//#endregion
|
||||
export { CheckboxDisabled, useCheckboxDisabled };
|
||||
Generated
Vendored
+28
@@ -0,0 +1,28 @@
|
||||
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
||||
require("../../../../_virtual/_rolldown/runtime.js");
|
||||
const require_types = require("../../../../utils/types.js");
|
||||
const require_constants = require("../../../form/src/constants.js");
|
||||
const require_use_form_common_props = require("../../../form/src/hooks/use-form-common-props.js");
|
||||
const require_constants$1 = require("../constants.js");
|
||||
let vue = require("vue");
|
||||
//#region ../../packages/components/checkbox/src/composables/use-checkbox-disabled.ts
|
||||
const useCheckboxDisabled = ({ model, isChecked }) => {
|
||||
const checkboxGroup = (0, vue.inject)(require_constants$1.checkboxGroupContextKey, void 0);
|
||||
const formContext = (0, vue.inject)(require_constants.formContextKey, void 0);
|
||||
const isLimitDisabled = (0, vue.computed)(() => {
|
||||
const max = checkboxGroup?.max?.value;
|
||||
const min = checkboxGroup?.min?.value;
|
||||
return !require_types.isUndefined(max) && model.value.length >= max && !isChecked.value || !require_types.isUndefined(min) && model.value.length <= min && isChecked.value;
|
||||
});
|
||||
return {
|
||||
isDisabled: require_use_form_common_props.useFormDisabled((0, vue.computed)(() => {
|
||||
if (checkboxGroup === void 0) return formContext?.disabled ?? isLimitDisabled.value;
|
||||
else return checkboxGroup.disabled?.value || isLimitDisabled.value;
|
||||
})),
|
||||
isLimitDisabled
|
||||
};
|
||||
};
|
||||
//#endregion
|
||||
exports.useCheckboxDisabled = useCheckboxDisabled;
|
||||
|
||||
//# sourceMappingURL=use-checkbox-disabled.js.map
|
||||
Generated
Vendored
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"use-checkbox-disabled.js","names":["checkboxGroupContextKey","formContextKey","isUndefined","useFormDisabled"],"sources":["../../../../../../../packages/components/checkbox/src/composables/use-checkbox-disabled.ts"],"sourcesContent":["import { computed, inject } from 'vue'\nimport { formContextKey, useFormDisabled } from '@element-plus/components/form'\nimport { isUndefined } from '@element-plus/utils'\nimport { checkboxGroupContextKey } from '../constants'\n\nimport type { CheckboxModel, CheckboxStatus } from '../composables'\n\nexport const useCheckboxDisabled = ({\n model,\n isChecked,\n}: Pick<CheckboxModel, 'model'> & Pick<CheckboxStatus, 'isChecked'>) => {\n const checkboxGroup = inject(checkboxGroupContextKey, undefined)\n const formContext = inject(formContextKey, undefined)\n\n const isLimitDisabled = computed(() => {\n const max = checkboxGroup?.max?.value\n const min = checkboxGroup?.min?.value\n return (\n (!isUndefined(max) && model.value.length >= max && !isChecked.value) ||\n (!isUndefined(min) && model.value.length <= min && isChecked.value)\n )\n })\n\n const isDisabled = useFormDisabled(\n computed(() => {\n // Directly use the checkbox\n if (checkboxGroup === undefined) {\n return formContext?.disabled ?? isLimitDisabled.value\n } else {\n return checkboxGroup.disabled?.value || isLimitDisabled.value\n }\n })\n )\n\n return {\n isDisabled,\n isLimitDisabled,\n }\n}\n\nexport type CheckboxDisabled = ReturnType<typeof useCheckboxDisabled>\n"],"mappings":";;;;;;;;AAOA,MAAa,uBAAuB,EAClC,OACA,gBACsE;CACtE,MAAM,iBAAA,GAAA,IAAA,QAAuBA,oBAAAA,yBAAyB,KAAA,EAAU;CAChE,MAAM,eAAA,GAAA,IAAA,QAAqBC,kBAAAA,gBAAgB,KAAA,EAAU;CAErD,MAAM,mBAAA,GAAA,IAAA,gBAAiC;EACrC,MAAM,MAAM,eAAe,KAAK;EAChC,MAAM,MAAM,eAAe,KAAK;EAChC,OACG,CAACC,cAAAA,YAAY,IAAI,IAAI,MAAM,MAAM,UAAU,OAAO,CAAC,UAAU,SAC7D,CAACA,cAAAA,YAAY,IAAI,IAAI,MAAM,MAAM,UAAU,OAAO,UAAU;GAE/D;CAaF,OAAO;EACL,YAZiBC,8BAAAA,iBAAAA,GAAAA,IAAAA,gBACF;GAEb,IAAI,kBAAkB,KAAA,GACpB,OAAO,aAAa,YAAY,gBAAgB;QAEhD,OAAO,cAAc,UAAU,SAAS,gBAAgB;IAE1D,CAIQ;EACV;EACD"}
|
||||
Generated
Vendored
+18
@@ -0,0 +1,18 @@
|
||||
import { CheckboxProps } from "../checkbox.js";
|
||||
import { useFormItemInputId } from "../../../form/src/hooks/use-form-item.js";
|
||||
import { CheckboxDisabled } from "./use-checkbox-disabled.js";
|
||||
import { CheckboxModel } from "./use-checkbox-model.js";
|
||||
import { CheckboxStatus } from "./use-checkbox-status.js";
|
||||
//#region ../../packages/components/checkbox/src/composables/use-checkbox-event.d.ts
|
||||
declare const useCheckboxEvent: (props: CheckboxProps, {
|
||||
model,
|
||||
isLimitExceeded,
|
||||
hasOwnLabel,
|
||||
isDisabled,
|
||||
isLabeledByFormItem
|
||||
}: Pick<CheckboxModel, "model" | "isLimitExceeded"> & Pick<CheckboxStatus, "hasOwnLabel"> & Pick<CheckboxDisabled, "isDisabled"> & Pick<ReturnType<typeof useFormItemInputId>, "isLabeledByFormItem">) => {
|
||||
handleChange: (e: Event) => void;
|
||||
onClickRoot: (e: MouseEvent) => Promise<void>;
|
||||
};
|
||||
//#endregion
|
||||
export { useCheckboxEvent };
|
||||
Generated
Vendored
+54
@@ -0,0 +1,54 @@
|
||||
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
||||
require("../../../../_virtual/_rolldown/runtime.js");
|
||||
const require_event = require("../../../../constants/event.js");
|
||||
const require_use_form_item = require("../../../form/src/hooks/use-form-item.js");
|
||||
const require_constants = require("../constants.js");
|
||||
let vue = require("vue");
|
||||
let _vue_shared = require("@vue/shared");
|
||||
//#region ../../packages/components/checkbox/src/composables/use-checkbox-event.ts
|
||||
const useCheckboxEvent = (props, { model, isLimitExceeded, hasOwnLabel, isDisabled, isLabeledByFormItem }) => {
|
||||
const checkboxGroup = (0, vue.inject)(require_constants.checkboxGroupContextKey, void 0);
|
||||
const { formItem } = require_use_form_item.useFormItem();
|
||||
const { emit } = (0, vue.getCurrentInstance)();
|
||||
function getLabeledValue(value) {
|
||||
return [
|
||||
true,
|
||||
props.trueValue,
|
||||
props.trueLabel
|
||||
].includes(value) ? props.trueValue ?? props.trueLabel ?? true : props.falseValue ?? props.falseLabel ?? false;
|
||||
}
|
||||
function emitChangeEvent(checked, e) {
|
||||
emit(require_event.CHANGE_EVENT, getLabeledValue(checked), e);
|
||||
}
|
||||
function handleChange(e) {
|
||||
if (isLimitExceeded.value) return;
|
||||
const target = e.target;
|
||||
emit(require_event.CHANGE_EVENT, getLabeledValue(target.checked), e);
|
||||
}
|
||||
async function onClickRoot(e) {
|
||||
if (isLimitExceeded.value) return;
|
||||
if (!hasOwnLabel.value && !isDisabled.value && isLabeledByFormItem.value) {
|
||||
if (!e.composedPath().some((item) => item.tagName === "LABEL")) {
|
||||
model.value = getLabeledValue([
|
||||
false,
|
||||
props.falseValue,
|
||||
props.falseLabel
|
||||
].includes(model.value));
|
||||
await (0, vue.nextTick)();
|
||||
emitChangeEvent(model.value, e);
|
||||
}
|
||||
}
|
||||
}
|
||||
const validateEvent = (0, vue.computed)(() => checkboxGroup?.validateEvent || props.validateEvent);
|
||||
(0, vue.watch)(() => props.modelValue, () => {
|
||||
if (validateEvent.value) formItem?.validate("change").catch(_vue_shared.NOOP);
|
||||
});
|
||||
return {
|
||||
handleChange,
|
||||
onClickRoot
|
||||
};
|
||||
};
|
||||
//#endregion
|
||||
exports.useCheckboxEvent = useCheckboxEvent;
|
||||
|
||||
//# sourceMappingURL=use-checkbox-event.js.map
|
||||
Generated
Vendored
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"use-checkbox-event.js","names":["checkboxGroupContextKey","useFormItem","CHANGE_EVENT","NOOP"],"sources":["../../../../../../../packages/components/checkbox/src/composables/use-checkbox-event.ts"],"sourcesContent":["import { computed, getCurrentInstance, inject, nextTick, watch } from 'vue'\nimport { useFormItem } from '@element-plus/components/form'\nimport { NOOP } from '@element-plus/utils'\nimport { CHANGE_EVENT } from '@element-plus/constants'\nimport { checkboxGroupContextKey } from '../constants'\n\nimport type { useFormItemInputId } from '@element-plus/components/form'\nimport type { CheckboxProps } from '../checkbox'\nimport type {\n CheckboxDisabled,\n CheckboxModel,\n CheckboxStatus,\n} from '../composables'\n\nexport const useCheckboxEvent = (\n props: CheckboxProps,\n {\n model,\n isLimitExceeded,\n hasOwnLabel,\n isDisabled,\n isLabeledByFormItem,\n }: Pick<CheckboxModel, 'model' | 'isLimitExceeded'> &\n Pick<CheckboxStatus, 'hasOwnLabel'> &\n Pick<CheckboxDisabled, 'isDisabled'> &\n Pick<ReturnType<typeof useFormItemInputId>, 'isLabeledByFormItem'>\n) => {\n const checkboxGroup = inject(checkboxGroupContextKey, undefined)\n const { formItem } = useFormItem()\n const { emit } = getCurrentInstance()!\n\n function getLabeledValue(value: string | number | boolean) {\n return [true, props.trueValue, props.trueLabel].includes(value)\n ? (props.trueValue ?? props.trueLabel ?? true)\n : (props.falseValue ?? props.falseLabel ?? false)\n }\n\n function emitChangeEvent(\n checked: string | number | boolean,\n e: InputEvent | MouseEvent\n ) {\n emit(CHANGE_EVENT, getLabeledValue(checked), e)\n }\n\n function handleChange(e: Event) {\n if (isLimitExceeded.value) return\n\n const target = e.target as HTMLInputElement\n emit(CHANGE_EVENT, getLabeledValue(target.checked), e)\n }\n\n async function onClickRoot(e: MouseEvent) {\n if (isLimitExceeded.value) return\n\n if (!hasOwnLabel.value && !isDisabled.value && isLabeledByFormItem.value) {\n // fix: https://github.com/element-plus/element-plus/issues/9981\n const eventTargets: EventTarget[] = e.composedPath()\n const hasLabel = eventTargets.some(\n (item) => (item as HTMLElement).tagName === 'LABEL'\n )\n if (!hasLabel) {\n model.value = getLabeledValue(\n [false, props.falseValue, props.falseLabel].includes(model.value)\n )\n await nextTick()\n emitChangeEvent(model.value, e)\n }\n }\n }\n\n const validateEvent = computed(\n () => checkboxGroup?.validateEvent || props.validateEvent\n )\n\n watch(\n () => props.modelValue,\n () => {\n if (validateEvent.value) {\n formItem?.validate('change').catch(NOOP)\n }\n }\n )\n\n return {\n handleChange,\n onClickRoot,\n }\n}\n"],"mappings":";;;;;;;;AAcA,MAAa,oBACX,OACA,EACE,OACA,iBACA,aACA,YACA,0BAKC;CACH,MAAM,iBAAA,GAAA,IAAA,QAAuBA,kBAAAA,yBAAyB,KAAA,EAAU;CAChE,MAAM,EAAE,aAAaC,sBAAAA,aAAa;CAClC,MAAM,EAAE,UAAA,GAAA,IAAA,qBAA6B;CAErC,SAAS,gBAAgB,OAAkC;EACzD,OAAO;GAAC;GAAM,MAAM;GAAW,MAAM;GAAU,CAAC,SAAS,MAAM,GAC1D,MAAM,aAAa,MAAM,aAAa,OACtC,MAAM,cAAc,MAAM,cAAc;;CAG/C,SAAS,gBACP,SACA,GACA;EACA,KAAKC,cAAAA,cAAc,gBAAgB,QAAQ,EAAE,EAAE;;CAGjD,SAAS,aAAa,GAAU;EAC9B,IAAI,gBAAgB,OAAO;EAE3B,MAAM,SAAS,EAAE;EACjB,KAAKA,cAAAA,cAAc,gBAAgB,OAAO,QAAQ,EAAE,EAAE;;CAGxD,eAAe,YAAY,GAAe;EACxC,IAAI,gBAAgB,OAAO;EAE3B,IAAI,CAAC,YAAY,SAAS,CAAC,WAAW,SAAS,oBAAoB;OAM7D,CAJgC,EAAE,cACT,CAAC,MAC3B,SAAU,KAAqB,YAAY,QAEjC,EAAE;IACb,MAAM,QAAQ,gBACZ;KAAC;KAAO,MAAM;KAAY,MAAM;KAAW,CAAC,SAAS,MAAM,MAAM,CAClE;IACD,OAAA,GAAA,IAAA,WAAgB;IAChB,gBAAgB,MAAM,OAAO,EAAE;;;;CAKrC,MAAM,iBAAA,GAAA,IAAA,gBACE,eAAe,iBAAiB,MAAM,cAC7C;CAED,CAAA,GAAA,IAAA,aACQ,MAAM,kBACN;EACJ,IAAI,cAAc,OAChB,UAAU,SAAS,SAAS,CAAC,MAAMC,YAAAA,KAAK;GAG7C;CAED,OAAO;EACL;EACA;EACD"}
|
||||
Generated
Vendored
+12
@@ -0,0 +1,12 @@
|
||||
import { CheckboxProps } from "../checkbox.js";
|
||||
import * as _$vue from "vue";
|
||||
|
||||
//#region ../../packages/components/checkbox/src/composables/use-checkbox-model.d.ts
|
||||
declare const useCheckboxModel: (props: CheckboxProps) => {
|
||||
model: _$vue.WritableComputedRef<any, unknown>;
|
||||
isGroup: _$vue.ComputedRef<boolean>;
|
||||
isLimitExceeded: _$vue.Ref<boolean, boolean>;
|
||||
};
|
||||
type CheckboxModel = ReturnType<typeof useCheckboxModel>;
|
||||
//#endregion
|
||||
export { CheckboxModel, useCheckboxModel };
|
||||
Generated
Vendored
+42
@@ -0,0 +1,42 @@
|
||||
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
||||
require("../../../../_virtual/_rolldown/runtime.js");
|
||||
const require_event = require("../../../../constants/event.js");
|
||||
const require_types = require("../../../../utils/types.js");
|
||||
const require_constants = require("../constants.js");
|
||||
let vue = require("vue");
|
||||
let _vue_shared = require("@vue/shared");
|
||||
//#region ../../packages/components/checkbox/src/composables/use-checkbox-model.ts
|
||||
const useCheckboxModel = (props) => {
|
||||
const selfModel = (0, vue.ref)(false);
|
||||
const { emit, vnode } = (0, vue.getCurrentInstance)();
|
||||
const checkboxGroup = (0, vue.inject)(require_constants.checkboxGroupContextKey, void 0);
|
||||
const isGroup = (0, vue.computed)(() => require_types.isUndefined(checkboxGroup) === false);
|
||||
const isLimitExceeded = (0, vue.ref)(false);
|
||||
const isControlled = (0, vue.computed)(() => {
|
||||
const rawProps = vnode.props ?? {};
|
||||
return "modelValue" in rawProps || "model-value" in rawProps;
|
||||
});
|
||||
const model = (0, vue.computed)({
|
||||
get() {
|
||||
return isGroup.value ? checkboxGroup?.modelValue?.value : !isControlled.value ? selfModel.value : props.modelValue;
|
||||
},
|
||||
set(val) {
|
||||
if (isGroup.value && (0, _vue_shared.isArray)(val)) {
|
||||
isLimitExceeded.value = checkboxGroup?.max?.value !== void 0 && val.length > checkboxGroup?.max.value && val.length > model.value.length;
|
||||
isLimitExceeded.value === false && checkboxGroup?.changeEvent?.(val);
|
||||
} else {
|
||||
emit(require_event.UPDATE_MODEL_EVENT, val);
|
||||
selfModel.value = val;
|
||||
}
|
||||
}
|
||||
});
|
||||
return {
|
||||
model,
|
||||
isGroup,
|
||||
isLimitExceeded
|
||||
};
|
||||
};
|
||||
//#endregion
|
||||
exports.useCheckboxModel = useCheckboxModel;
|
||||
|
||||
//# sourceMappingURL=use-checkbox-model.js.map
|
||||
Generated
Vendored
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"use-checkbox-model.js","names":["checkboxGroupContextKey","isUndefined","UPDATE_MODEL_EVENT"],"sources":["../../../../../../../packages/components/checkbox/src/composables/use-checkbox-model.ts"],"sourcesContent":["import { computed, getCurrentInstance, inject, ref } from 'vue'\nimport { isArray, isUndefined } from '@element-plus/utils'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/constants'\nimport { checkboxGroupContextKey } from '../constants'\n\nimport type { CheckboxProps } from '../checkbox'\n\nexport const useCheckboxModel = (props: CheckboxProps) => {\n const selfModel = ref<unknown>(false)\n const { emit, vnode } = getCurrentInstance()!\n const checkboxGroup = inject(checkboxGroupContextKey, undefined)\n const isGroup = computed(() => isUndefined(checkboxGroup) === false)\n const isLimitExceeded = ref(false)\n const isControlled = computed(() => {\n const rawProps = vnode.props ?? {}\n return 'modelValue' in rawProps || 'model-value' in rawProps\n })\n const model = computed({\n get() {\n return isGroup.value\n ? checkboxGroup?.modelValue?.value\n : !isControlled.value\n ? selfModel.value\n : props.modelValue\n },\n\n set(val: unknown) {\n if (isGroup.value && isArray(val)) {\n isLimitExceeded.value =\n checkboxGroup?.max?.value !== undefined &&\n val.length > checkboxGroup?.max.value &&\n val.length > model.value.length\n isLimitExceeded.value === false && checkboxGroup?.changeEvent?.(val)\n } else {\n emit(UPDATE_MODEL_EVENT, val)\n selfModel.value = val\n }\n },\n })\n\n return {\n model,\n isGroup,\n isLimitExceeded,\n }\n}\n\nexport type CheckboxModel = ReturnType<typeof useCheckboxModel>\n"],"mappings":";;;;;;;;AAOA,MAAa,oBAAoB,UAAyB;CACxD,MAAM,aAAA,GAAA,IAAA,KAAyB,MAAM;CACrC,MAAM,EAAE,MAAM,WAAA,GAAA,IAAA,qBAA8B;CAC5C,MAAM,iBAAA,GAAA,IAAA,QAAuBA,kBAAAA,yBAAyB,KAAA,EAAU;CAChE,MAAM,WAAA,GAAA,IAAA,gBAAyBC,cAAAA,YAAY,cAAc,KAAK,MAAM;CACpE,MAAM,mBAAA,GAAA,IAAA,KAAsB,MAAM;CAClC,MAAM,gBAAA,GAAA,IAAA,gBAA8B;EAClC,MAAM,WAAW,MAAM,SAAS,EAAE;EAClC,OAAO,gBAAgB,YAAY,iBAAiB;GACpD;CACF,MAAM,SAAA,GAAA,IAAA,UAAiB;EACrB,MAAM;GACJ,OAAO,QAAQ,QACX,eAAe,YAAY,QAC3B,CAAC,aAAa,QACZ,UAAU,QACV,MAAM;;EAGd,IAAI,KAAc;GAChB,IAAI,QAAQ,UAAA,GAAA,YAAA,SAAiB,IAAI,EAAE;IACjC,gBAAgB,QACd,eAAe,KAAK,UAAU,KAAA,KAC9B,IAAI,SAAS,eAAe,IAAI,SAChC,IAAI,SAAS,MAAM,MAAM;IAC3B,gBAAgB,UAAU,SAAS,eAAe,cAAc,IAAI;UAC/D;IACL,KAAKC,cAAAA,oBAAoB,IAAI;IAC7B,UAAU,QAAQ;;;EAGvB,CAAC;CAEF,OAAO;EACL;EACA;EACA;EACD"}
|
||||
Generated
Vendored
+19
@@ -0,0 +1,19 @@
|
||||
import { CheckboxProps } from "../checkbox.js";
|
||||
import { CheckboxModel } from "./use-checkbox-model.js";
|
||||
import * as _$vue from "vue";
|
||||
import { ComponentInternalInstance } from "vue";
|
||||
|
||||
//#region ../../packages/components/checkbox/src/composables/use-checkbox-status.d.ts
|
||||
declare const useCheckboxStatus: (props: CheckboxProps, slots: ComponentInternalInstance["slots"], {
|
||||
model
|
||||
}: Pick<CheckboxModel, "model">) => {
|
||||
checkboxButtonSize: _$vue.ComputedRef<"" | "default" | "small" | "large">;
|
||||
isChecked: _$vue.ComputedRef<boolean>;
|
||||
isFocused: _$vue.Ref<boolean, boolean>;
|
||||
checkboxSize: _$vue.ComputedRef<"" | "default" | "small" | "large">;
|
||||
hasOwnLabel: _$vue.ComputedRef<boolean>;
|
||||
actualValue: _$vue.ComputedRef<string | number | boolean | object | undefined>;
|
||||
};
|
||||
type CheckboxStatus = ReturnType<typeof useCheckboxStatus>;
|
||||
//#endregion
|
||||
export { CheckboxStatus, useCheckboxStatus };
|
||||
Generated
Vendored
+39
@@ -0,0 +1,39 @@
|
||||
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
||||
require("../../../../_virtual/_rolldown/runtime.js");
|
||||
const require_types = require("../../../../utils/types.js");
|
||||
const require_use_form_common_props = require("../../../form/src/hooks/use-form-common-props.js");
|
||||
const require_constants = require("../constants.js");
|
||||
let lodash_unified = require("lodash-unified");
|
||||
let vue = require("vue");
|
||||
let _vue_shared = require("@vue/shared");
|
||||
//#region ../../packages/components/checkbox/src/composables/use-checkbox-status.ts
|
||||
const useCheckboxStatus = (props, slots, { model }) => {
|
||||
const checkboxGroup = (0, vue.inject)(require_constants.checkboxGroupContextKey, void 0);
|
||||
const isFocused = (0, vue.ref)(false);
|
||||
const actualValue = (0, vue.computed)(() => {
|
||||
if (!require_types.isPropAbsent(props.value)) return props.value;
|
||||
return props.label;
|
||||
});
|
||||
const isChecked = (0, vue.computed)(() => {
|
||||
const value = model.value;
|
||||
if (require_types.isBoolean(value)) return value;
|
||||
else if ((0, _vue_shared.isArray)(value)) if ((0, _vue_shared.isObject)(actualValue.value)) return value.map(vue.toRaw).some((o) => (0, lodash_unified.isEqual)(o, actualValue.value));
|
||||
else return value.map(vue.toRaw).includes(actualValue.value);
|
||||
else if (value !== null && value !== void 0) return value === props.trueValue || value === props.trueLabel;
|
||||
else return !!value;
|
||||
});
|
||||
return {
|
||||
checkboxButtonSize: require_use_form_common_props.useFormSize((0, vue.computed)(() => checkboxGroup?.size?.value), { prop: true }),
|
||||
isChecked,
|
||||
isFocused,
|
||||
checkboxSize: require_use_form_common_props.useFormSize((0, vue.computed)(() => checkboxGroup?.size?.value)),
|
||||
hasOwnLabel: (0, vue.computed)(() => {
|
||||
return !!slots.default || !require_types.isPropAbsent(actualValue.value);
|
||||
}),
|
||||
actualValue
|
||||
};
|
||||
};
|
||||
//#endregion
|
||||
exports.useCheckboxStatus = useCheckboxStatus;
|
||||
|
||||
//# sourceMappingURL=use-checkbox-status.js.map
|
||||
Generated
Vendored
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"use-checkbox-status.js","names":["checkboxGroupContextKey","isPropAbsent","isBoolean","toRaw","useFormSize"],"sources":["../../../../../../../packages/components/checkbox/src/composables/use-checkbox-status.ts"],"sourcesContent":["import { computed, inject, ref, toRaw } from 'vue'\nimport { isEqual } from 'lodash-unified'\nimport { useFormSize } from '@element-plus/components/form'\nimport { isArray, isBoolean, isObject, isPropAbsent } from '@element-plus/utils'\nimport { checkboxGroupContextKey } from '../constants'\n\nimport type { ComponentInternalInstance } from 'vue'\nimport type { CheckboxProps } from '../checkbox'\nimport type { CheckboxModel } from '../composables'\n\nexport const useCheckboxStatus = (\n props: CheckboxProps,\n slots: ComponentInternalInstance['slots'],\n { model }: Pick<CheckboxModel, 'model'>\n) => {\n const checkboxGroup = inject(checkboxGroupContextKey, undefined)\n const isFocused = ref(false)\n const actualValue = computed(() => {\n // In version 2.x, if there's no props.value, props.label will act as props.value\n // In version 3.x, remove this computed value, use props.value instead.\n if (!isPropAbsent(props.value)) {\n return props.value\n }\n return props.label\n })\n const isChecked = computed<boolean>(() => {\n const value = model.value\n if (isBoolean(value)) {\n return value\n } else if (isArray(value)) {\n if (isObject(actualValue.value)) {\n return value.map(toRaw).some((o) => isEqual(o, actualValue.value))\n } else {\n return value.map(toRaw).includes(actualValue.value)\n }\n } else if (value !== null && value !== undefined) {\n return value === props.trueValue || value === props.trueLabel\n } else {\n return !!value\n }\n })\n\n const checkboxButtonSize = useFormSize(\n computed(() => checkboxGroup?.size?.value),\n {\n prop: true,\n }\n )\n const checkboxSize = useFormSize(computed(() => checkboxGroup?.size?.value))\n\n const hasOwnLabel = computed<boolean>(() => {\n return !!slots.default || !isPropAbsent(actualValue.value)\n })\n\n return {\n checkboxButtonSize,\n isChecked,\n isFocused,\n checkboxSize,\n hasOwnLabel,\n actualValue,\n }\n}\n\nexport type CheckboxStatus = ReturnType<typeof useCheckboxStatus>\n"],"mappings":";;;;;;;;;AAUA,MAAa,qBACX,OACA,OACA,EAAE,YACC;CACH,MAAM,iBAAA,GAAA,IAAA,QAAuBA,kBAAAA,yBAAyB,KAAA,EAAU;CAChE,MAAM,aAAA,GAAA,IAAA,KAAgB,MAAM;CAC5B,MAAM,eAAA,GAAA,IAAA,gBAA6B;EAGjC,IAAI,CAACC,cAAAA,aAAa,MAAM,MAAM,EAC5B,OAAO,MAAM;EAEf,OAAO,MAAM;GACb;CACF,MAAM,aAAA,GAAA,IAAA,gBAAoC;EACxC,MAAM,QAAQ,MAAM;EACpB,IAAIC,cAAAA,UAAU,MAAM,EAClB,OAAO;OACF,KAAA,GAAA,YAAA,SAAY,MAAM,EACvB,KAAA,GAAA,YAAA,UAAa,YAAY,MAAM,EAC7B,OAAO,MAAM,IAAIC,IAAAA,MAAM,CAAC,MAAM,OAAA,GAAA,eAAA,SAAc,GAAG,YAAY,MAAM,CAAC;OAElE,OAAO,MAAM,IAAIA,IAAAA,MAAM,CAAC,SAAS,YAAY,MAAM;OAEhD,IAAI,UAAU,QAAQ,UAAU,KAAA,GACrC,OAAO,UAAU,MAAM,aAAa,UAAU,MAAM;OAEpD,OAAO,CAAC,CAAC;GAEX;CAcF,OAAO;EACL,oBAbyBC,8BAAAA,aAAAA,GAAAA,IAAAA,gBACV,eAAe,MAAM,MAAM,EAC1C,EACE,MAAM,MACP,CASiB;EAClB;EACA;EACA,cAVmBA,8BAAAA,aAAAA,GAAAA,IAAAA,gBAA2B,eAAe,MAAM,MAAM,CAU7D;EACZ,cAAA,GAAA,IAAA,gBAT0C;GAC1C,OAAO,CAAC,CAAC,MAAM,WAAW,CAACH,cAAAA,aAAa,YAAY,MAAM;IAQ/C;EACX;EACD"}
|
||||
Generated
Vendored
+21
@@ -0,0 +1,21 @@
|
||||
import { CheckboxProps } from "../checkbox.js";
|
||||
import * as _$vue from "vue";
|
||||
import { ComponentInternalInstance } from "vue";
|
||||
|
||||
//#region ../../packages/components/checkbox/src/composables/use-checkbox.d.ts
|
||||
declare const useCheckbox: (props: CheckboxProps, slots: ComponentInternalInstance["slots"]) => {
|
||||
inputId: _$vue.Ref<string | undefined, string | undefined>;
|
||||
isLabeledByFormItem: _$vue.ComputedRef<boolean>;
|
||||
isChecked: _$vue.ComputedRef<boolean>;
|
||||
isDisabled: _$vue.ComputedRef<boolean>;
|
||||
isFocused: _$vue.Ref<boolean, boolean>;
|
||||
checkboxButtonSize: _$vue.ComputedRef<"" | "default" | "small" | "large">;
|
||||
checkboxSize: _$vue.ComputedRef<"" | "default" | "small" | "large">;
|
||||
hasOwnLabel: _$vue.ComputedRef<boolean>;
|
||||
model: _$vue.WritableComputedRef<any, unknown>;
|
||||
actualValue: _$vue.ComputedRef<string | number | boolean | object | undefined>;
|
||||
handleChange: (e: Event) => void;
|
||||
onClickRoot: (e: MouseEvent) => Promise<void>;
|
||||
};
|
||||
//#endregion
|
||||
export { useCheckbox };
|
||||
Generated
Vendored
+80
@@ -0,0 +1,80 @@
|
||||
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
||||
require("../../../../_virtual/_rolldown/runtime.js");
|
||||
const require_types = require("../../../../utils/types.js");
|
||||
const require_index = require("../../../../hooks/use-deprecated/index.js");
|
||||
const require_use_form_item = require("../../../form/src/hooks/use-form-item.js");
|
||||
const require_use_checkbox_disabled = require("./use-checkbox-disabled.js");
|
||||
const require_use_checkbox_event = require("./use-checkbox-event.js");
|
||||
const require_use_checkbox_model = require("./use-checkbox-model.js");
|
||||
const require_use_checkbox_status = require("./use-checkbox-status.js");
|
||||
let vue = require("vue");
|
||||
let _vue_shared = require("@vue/shared");
|
||||
//#region ../../packages/components/checkbox/src/composables/use-checkbox.ts
|
||||
const useCheckbox = (props, slots) => {
|
||||
const { formItem: elFormItem } = require_use_form_item.useFormItem();
|
||||
const { model, isGroup, isLimitExceeded } = require_use_checkbox_model.useCheckboxModel(props);
|
||||
const { isFocused, isChecked, checkboxButtonSize, checkboxSize, hasOwnLabel, actualValue } = require_use_checkbox_status.useCheckboxStatus(props, slots, { model });
|
||||
const { isDisabled } = require_use_checkbox_disabled.useCheckboxDisabled({
|
||||
model,
|
||||
isChecked
|
||||
});
|
||||
const { inputId, isLabeledByFormItem } = require_use_form_item.useFormItemInputId(props, {
|
||||
formItemContext: elFormItem,
|
||||
disableIdGeneration: hasOwnLabel,
|
||||
disableIdManagement: isGroup
|
||||
});
|
||||
const { handleChange, onClickRoot } = require_use_checkbox_event.useCheckboxEvent(props, {
|
||||
model,
|
||||
isLimitExceeded,
|
||||
hasOwnLabel,
|
||||
isDisabled,
|
||||
isLabeledByFormItem
|
||||
});
|
||||
const setStoreValue = () => {
|
||||
function addToStore() {
|
||||
if ((0, _vue_shared.isArray)(model.value) && !model.value.includes(actualValue.value)) model.value.push(actualValue.value);
|
||||
else model.value = props.trueValue ?? props.trueLabel ?? true;
|
||||
}
|
||||
props.checked && addToStore();
|
||||
};
|
||||
setStoreValue();
|
||||
require_index.useDeprecated({
|
||||
from: "label act as value",
|
||||
replacement: "value",
|
||||
version: "3.0.0",
|
||||
scope: "el-checkbox",
|
||||
ref: "https://element-plus.org/en-US/component/checkbox.html"
|
||||
}, (0, vue.computed)(() => isGroup.value && require_types.isPropAbsent(props.value)));
|
||||
require_index.useDeprecated({
|
||||
from: "true-label",
|
||||
replacement: "true-value",
|
||||
version: "3.0.0",
|
||||
scope: "el-checkbox",
|
||||
ref: "https://element-plus.org/en-US/component/checkbox.html"
|
||||
}, (0, vue.computed)(() => !!props.trueLabel));
|
||||
require_index.useDeprecated({
|
||||
from: "false-label",
|
||||
replacement: "false-value",
|
||||
version: "3.0.0",
|
||||
scope: "el-checkbox",
|
||||
ref: "https://element-plus.org/en-US/component/checkbox.html"
|
||||
}, (0, vue.computed)(() => !!props.falseLabel));
|
||||
return {
|
||||
inputId,
|
||||
isLabeledByFormItem,
|
||||
isChecked,
|
||||
isDisabled,
|
||||
isFocused,
|
||||
checkboxButtonSize,
|
||||
checkboxSize,
|
||||
hasOwnLabel,
|
||||
model,
|
||||
actualValue,
|
||||
handleChange,
|
||||
onClickRoot
|
||||
};
|
||||
};
|
||||
//#endregion
|
||||
exports.useCheckbox = useCheckbox;
|
||||
|
||||
//# sourceMappingURL=use-checkbox.js.map
|
||||
Generated
Vendored
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"use-checkbox.js","names":["useFormItem","useCheckboxModel","useCheckboxStatus","useCheckboxDisabled","useFormItemInputId","useCheckboxEvent","isPropAbsent"],"sources":["../../../../../../../packages/components/checkbox/src/composables/use-checkbox.ts"],"sourcesContent":["import { computed } from 'vue'\nimport { useFormItem, useFormItemInputId } from '@element-plus/components/form'\nimport { isArray, isPropAbsent } from '@element-plus/utils'\nimport { useDeprecated } from '@element-plus/hooks'\nimport { useCheckboxDisabled } from './use-checkbox-disabled'\nimport { useCheckboxEvent } from './use-checkbox-event'\nimport { useCheckboxModel } from './use-checkbox-model'\nimport { useCheckboxStatus } from './use-checkbox-status'\n\nimport type { ComponentInternalInstance } from 'vue'\nimport type { CheckboxProps } from '../checkbox'\n\nexport const useCheckbox = (\n props: CheckboxProps,\n slots: ComponentInternalInstance['slots']\n) => {\n const { formItem: elFormItem } = useFormItem()\n const { model, isGroup, isLimitExceeded } = useCheckboxModel(props)\n const {\n isFocused,\n isChecked,\n checkboxButtonSize,\n checkboxSize,\n hasOwnLabel,\n actualValue,\n } = useCheckboxStatus(props, slots, { model })\n const { isDisabled } = useCheckboxDisabled({ model, isChecked })\n const { inputId, isLabeledByFormItem } = useFormItemInputId(props, {\n formItemContext: elFormItem,\n disableIdGeneration: hasOwnLabel,\n disableIdManagement: isGroup,\n })\n const { handleChange, onClickRoot } = useCheckboxEvent(props, {\n model,\n isLimitExceeded,\n hasOwnLabel,\n isDisabled,\n isLabeledByFormItem,\n })\n\n const setStoreValue = () => {\n function addToStore() {\n if (isArray(model.value) && !model.value.includes(actualValue.value)) {\n model.value.push(actualValue.value)\n } else {\n model.value = props.trueValue ?? props.trueLabel ?? true\n }\n }\n props.checked && addToStore()\n }\n\n setStoreValue()\n\n useDeprecated(\n {\n from: 'label act as value',\n replacement: 'value',\n version: '3.0.0',\n scope: 'el-checkbox',\n ref: 'https://element-plus.org/en-US/component/checkbox.html',\n },\n computed(() => isGroup.value && isPropAbsent(props.value))\n )\n\n useDeprecated(\n {\n from: 'true-label',\n replacement: 'true-value',\n version: '3.0.0',\n scope: 'el-checkbox',\n ref: 'https://element-plus.org/en-US/component/checkbox.html',\n },\n computed(() => !!props.trueLabel)\n )\n\n useDeprecated(\n {\n from: 'false-label',\n replacement: 'false-value',\n version: '3.0.0',\n scope: 'el-checkbox',\n ref: 'https://element-plus.org/en-US/component/checkbox.html',\n },\n computed(() => !!props.falseLabel)\n )\n\n return {\n inputId,\n isLabeledByFormItem,\n isChecked,\n isDisabled,\n isFocused,\n checkboxButtonSize,\n checkboxSize,\n hasOwnLabel,\n model,\n actualValue,\n handleChange,\n onClickRoot,\n }\n}\n"],"mappings":";;;;;;;;;;;;AAYA,MAAa,eACX,OACA,UACG;CACH,MAAM,EAAE,UAAU,eAAeA,sBAAAA,aAAa;CAC9C,MAAM,EAAE,OAAO,SAAS,oBAAoBC,2BAAAA,iBAAiB,MAAM;CACnE,MAAM,EACJ,WACA,WACA,oBACA,cACA,aACA,gBACEC,4BAAAA,kBAAkB,OAAO,OAAO,EAAE,OAAO,CAAC;CAC9C,MAAM,EAAE,eAAeC,8BAAAA,oBAAoB;EAAE;EAAO;EAAW,CAAC;CAChE,MAAM,EAAE,SAAS,wBAAwBC,sBAAAA,mBAAmB,OAAO;EACjE,iBAAiB;EACjB,qBAAqB;EACrB,qBAAqB;EACtB,CAAC;CACF,MAAM,EAAE,cAAc,gBAAgBC,2BAAAA,iBAAiB,OAAO;EAC5D;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,sBAAsB;EAC1B,SAAS,aAAa;GACpB,KAAA,GAAA,YAAA,SAAY,MAAM,MAAM,IAAI,CAAC,MAAM,MAAM,SAAS,YAAY,MAAM,EAClE,MAAM,MAAM,KAAK,YAAY,MAAM;QAEnC,MAAM,QAAQ,MAAM,aAAa,MAAM,aAAa;;EAGxD,MAAM,WAAW,YAAY;;CAG/B,eAAe;CAEf,cAAA,cACE;EACE,MAAM;EACN,aAAa;EACb,SAAS;EACT,OAAO;EACP,KAAK;EACN,GAAA,GAAA,IAAA,gBACc,QAAQ,SAASC,cAAAA,aAAa,MAAM,MAAM,CAAC,CAC3D;CAED,cAAA,cACE;EACE,MAAM;EACN,aAAa;EACb,SAAS;EACT,OAAO;EACP,KAAK;EACN,GAAA,GAAA,IAAA,gBACc,CAAC,CAAC,MAAM,UAAU,CAClC;CAED,cAAA,cACE;EACE,MAAM;EACN,aAAa;EACb,SAAS;EACT,OAAO;EACP,KAAK;EACN,GAAA,GAAA,IAAA,gBACc,CAAC,CAAC,MAAM,WAAW,CACnC;CAED,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD"}
|
||||
Reference in New Issue
Block a user