@v-c/cascader 0.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/dist/Cascader.cjs +647 -0
- package/dist/Cascader.d.ts +90 -0
- package/dist/Cascader.js +639 -0
- package/dist/OptionList/CacheContent.cjs +38 -0
- package/dist/OptionList/CacheContent.d.ts +7 -0
- package/dist/OptionList/CacheContent.js +32 -0
- package/dist/OptionList/Checkbox.cjs +75 -0
- package/dist/OptionList/Checkbox.d.ts +12 -0
- package/dist/OptionList/Checkbox.js +69 -0
- package/dist/OptionList/Column.cjs +223 -0
- package/dist/OptionList/Column.d.ts +23 -0
- package/dist/OptionList/Column.js +215 -0
- package/dist/OptionList/List.cjs +195 -0
- package/dist/OptionList/List.d.ts +12 -0
- package/dist/OptionList/List.js +189 -0
- package/dist/OptionList/index.cjs +24 -0
- package/dist/OptionList/index.d.ts +2 -0
- package/dist/OptionList/index.js +18 -0
- package/dist/OptionList/useActive.cjs +19 -0
- package/dist/OptionList/useActive.d.ts +7 -0
- package/dist/OptionList/useActive.js +14 -0
- package/dist/OptionList/useKeyboard.cjs +108 -0
- package/dist/OptionList/useKeyboard.d.ts +9 -0
- package/dist/OptionList/useKeyboard.js +102 -0
- package/dist/Panel.cjs +209 -0
- package/dist/Panel.d.ts +5 -0
- package/dist/Panel.js +202 -0
- package/dist/_virtual/rolldown_runtime.cjs +21 -0
- package/dist/context.cjs +12 -0
- package/dist/context.d.ts +23 -0
- package/dist/context.js +9 -0
- package/dist/hooks/useDisplayValues.cjs +39 -0
- package/dist/hooks/useDisplayValues.d.ts +4 -0
- package/dist/hooks/useDisplayValues.js +34 -0
- package/dist/hooks/useEntities.cjs +41 -0
- package/dist/hooks/useEntities.d.ts +10 -0
- package/dist/hooks/useEntities.js +36 -0
- package/dist/hooks/useMissingValues.cjs +17 -0
- package/dist/hooks/useMissingValues.d.ts +4 -0
- package/dist/hooks/useMissingValues.js +13 -0
- package/dist/hooks/useOptions.cjs +25 -0
- package/dist/hooks/useOptions.d.ts +9 -0
- package/dist/hooks/useOptions.js +20 -0
- package/dist/hooks/useSearchConfig.cjs +34 -0
- package/dist/hooks/useSearchConfig.d.ts +4 -0
- package/dist/hooks/useSearchConfig.js +29 -0
- package/dist/hooks/useSearchOptions.cjs +46 -0
- package/dist/hooks/useSearchOptions.d.ts +5 -0
- package/dist/hooks/useSearchOptions.js +40 -0
- package/dist/hooks/useSelect.cjs +36 -0
- package/dist/hooks/useSelect.d.ts +4 -0
- package/dist/hooks/useSelect.js +31 -0
- package/dist/hooks/useValues.cjs +25 -0
- package/dist/hooks/useValues.d.ts +9 -0
- package/dist/hooks/useValues.js +20 -0
- package/dist/index.cjs +16 -0
- package/dist/index.d.ts +12 -0
- package/dist/index.js +9 -0
- package/dist/utils/commonUtil.cjs +56 -0
- package/dist/utils/commonUtil.d.ts +18 -0
- package/dist/utils/commonUtil.js +45 -0
- package/dist/utils/treeUtil.cjs +34 -0
- package/dist/utils/treeUtil.d.ts +8 -0
- package/dist/utils/treeUtil.js +32 -0
- package/dist/utils/warningPropsUtil.cjs +19 -0
- package/dist/utils/warningPropsUtil.d.ts +2 -0
- package/dist/utils/warningPropsUtil.js +17 -0
- package/package.json +38 -0
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
Object.defineProperties(exports, {
|
|
2
|
+
__esModule: { value: true },
|
|
3
|
+
[Symbol.toStringTag]: { value: "Module" }
|
|
4
|
+
});
|
|
5
|
+
const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
|
|
6
|
+
let vue = require("vue");
|
|
7
|
+
var CacheContent = /* @__PURE__ */ (0, vue.defineComponent)((props, { slots }) => {
|
|
8
|
+
const cached = (0, vue.shallowRef)(null);
|
|
9
|
+
return () => {
|
|
10
|
+
if (props.open || cached.value === null) cached.value = slots.default?.() ?? [];
|
|
11
|
+
return cached.value;
|
|
12
|
+
};
|
|
13
|
+
}, {
|
|
14
|
+
props: /* @__PURE__ */ (0, vue.mergeDefaults)({
|
|
15
|
+
open: {
|
|
16
|
+
type: Boolean,
|
|
17
|
+
required: false,
|
|
18
|
+
default: void 0
|
|
19
|
+
},
|
|
20
|
+
children: {
|
|
21
|
+
type: [
|
|
22
|
+
Object,
|
|
23
|
+
Function,
|
|
24
|
+
String,
|
|
25
|
+
Number,
|
|
26
|
+
null,
|
|
27
|
+
Boolean,
|
|
28
|
+
Array
|
|
29
|
+
],
|
|
30
|
+
required: false,
|
|
31
|
+
default: void 0
|
|
32
|
+
}
|
|
33
|
+
}, { open: false }),
|
|
34
|
+
inheritAttrs: false,
|
|
35
|
+
name: "CacheContent"
|
|
36
|
+
});
|
|
37
|
+
var CacheContent_default = CacheContent;
|
|
38
|
+
exports.default = CacheContent_default;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { VueNode } from '../../../util/src';
|
|
2
|
+
export interface CacheContentProps {
|
|
3
|
+
open?: boolean;
|
|
4
|
+
children?: VueNode;
|
|
5
|
+
}
|
|
6
|
+
declare const CacheContent: import('vue').DefineSetupFnComponent<CacheContentProps, {}, {}, CacheContentProps & {}, import('vue').PublicProps>;
|
|
7
|
+
export default CacheContent;
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { defineComponent, mergeDefaults, shallowRef } from "vue";
|
|
2
|
+
var CacheContent_default = /* @__PURE__ */ defineComponent((props, { slots }) => {
|
|
3
|
+
const cached = shallowRef(null);
|
|
4
|
+
return () => {
|
|
5
|
+
if (props.open || cached.value === null) cached.value = slots.default?.() ?? [];
|
|
6
|
+
return cached.value;
|
|
7
|
+
};
|
|
8
|
+
}, {
|
|
9
|
+
props: /* @__PURE__ */ mergeDefaults({
|
|
10
|
+
open: {
|
|
11
|
+
type: Boolean,
|
|
12
|
+
required: false,
|
|
13
|
+
default: void 0
|
|
14
|
+
},
|
|
15
|
+
children: {
|
|
16
|
+
type: [
|
|
17
|
+
Object,
|
|
18
|
+
Function,
|
|
19
|
+
String,
|
|
20
|
+
Number,
|
|
21
|
+
null,
|
|
22
|
+
Boolean,
|
|
23
|
+
Array
|
|
24
|
+
],
|
|
25
|
+
required: false,
|
|
26
|
+
default: void 0
|
|
27
|
+
}
|
|
28
|
+
}, { open: false }),
|
|
29
|
+
inheritAttrs: false,
|
|
30
|
+
name: "CacheContent"
|
|
31
|
+
});
|
|
32
|
+
export { CacheContent_default as default };
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
Object.defineProperties(exports, {
|
|
2
|
+
__esModule: { value: true },
|
|
3
|
+
[Symbol.toStringTag]: { value: "Module" }
|
|
4
|
+
});
|
|
5
|
+
const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
|
|
6
|
+
const require_context = require("../context.cjs");
|
|
7
|
+
let vue = require("vue");
|
|
8
|
+
let _v_c_util = require("@v-c/util");
|
|
9
|
+
var Checkbox = /* @__PURE__ */ (0, vue.defineComponent)((props) => {
|
|
10
|
+
const context = require_context.useCascaderContext();
|
|
11
|
+
return () => {
|
|
12
|
+
const checkable = context.value?.checkable;
|
|
13
|
+
const customCheckbox = typeof checkable !== "boolean" ? checkable : null;
|
|
14
|
+
return (0, vue.createVNode)("span", {
|
|
15
|
+
"class": (0, _v_c_util.clsx)(`${props.prefixCls}`, {
|
|
16
|
+
[`${props.prefixCls}-checked`]: props.checked,
|
|
17
|
+
[`${props.prefixCls}-indeterminate`]: !props.checked && props.halfChecked,
|
|
18
|
+
[`${props.prefixCls}-disabled`]: props.disabled || props.disableCheckbox
|
|
19
|
+
}),
|
|
20
|
+
"onClick": props.onClick
|
|
21
|
+
}, [customCheckbox]);
|
|
22
|
+
};
|
|
23
|
+
}, { props: /* @__PURE__ */ (0, vue.mergeDefaults)({
|
|
24
|
+
prefixCls: {
|
|
25
|
+
type: String,
|
|
26
|
+
required: true,
|
|
27
|
+
default: void 0
|
|
28
|
+
},
|
|
29
|
+
checked: {
|
|
30
|
+
type: Boolean,
|
|
31
|
+
required: false,
|
|
32
|
+
default: void 0
|
|
33
|
+
},
|
|
34
|
+
halfChecked: {
|
|
35
|
+
type: Boolean,
|
|
36
|
+
required: false,
|
|
37
|
+
default: void 0
|
|
38
|
+
},
|
|
39
|
+
disabled: {
|
|
40
|
+
type: Boolean,
|
|
41
|
+
required: false,
|
|
42
|
+
default: void 0
|
|
43
|
+
},
|
|
44
|
+
onClick: {
|
|
45
|
+
type: Function,
|
|
46
|
+
required: false,
|
|
47
|
+
default: void 0
|
|
48
|
+
},
|
|
49
|
+
disableCheckbox: {
|
|
50
|
+
type: Boolean,
|
|
51
|
+
required: false,
|
|
52
|
+
default: void 0
|
|
53
|
+
},
|
|
54
|
+
children: {
|
|
55
|
+
type: [
|
|
56
|
+
Object,
|
|
57
|
+
Function,
|
|
58
|
+
String,
|
|
59
|
+
Number,
|
|
60
|
+
null,
|
|
61
|
+
Boolean,
|
|
62
|
+
Array
|
|
63
|
+
],
|
|
64
|
+
required: false,
|
|
65
|
+
default: void 0
|
|
66
|
+
}
|
|
67
|
+
}, {
|
|
68
|
+
prefixCls: "",
|
|
69
|
+
checked: false,
|
|
70
|
+
halfChecked: false,
|
|
71
|
+
disabled: false,
|
|
72
|
+
disableCheckbox: false
|
|
73
|
+
}) });
|
|
74
|
+
var Checkbox_default = Checkbox;
|
|
75
|
+
exports.default = Checkbox_default;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { VueNode } from '../../../util/src';
|
|
2
|
+
export interface CheckboxProps {
|
|
3
|
+
prefixCls: string;
|
|
4
|
+
checked?: boolean;
|
|
5
|
+
halfChecked?: boolean;
|
|
6
|
+
disabled?: boolean;
|
|
7
|
+
onClick?: (event: MouseEvent) => void;
|
|
8
|
+
disableCheckbox?: boolean;
|
|
9
|
+
children?: VueNode;
|
|
10
|
+
}
|
|
11
|
+
declare const Checkbox: import('vue').DefineSetupFnComponent<CheckboxProps, {}, {}, CheckboxProps & {}, import('vue').PublicProps>;
|
|
12
|
+
export default Checkbox;
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
import { useCascaderContext } from "../context.js";
|
|
2
|
+
import { createVNode, defineComponent, mergeDefaults } from "vue";
|
|
3
|
+
import { clsx } from "@v-c/util";
|
|
4
|
+
var Checkbox_default = /* @__PURE__ */ defineComponent((props) => {
|
|
5
|
+
const context = useCascaderContext();
|
|
6
|
+
return () => {
|
|
7
|
+
const checkable = context.value?.checkable;
|
|
8
|
+
const customCheckbox = typeof checkable !== "boolean" ? checkable : null;
|
|
9
|
+
return createVNode("span", {
|
|
10
|
+
"class": clsx(`${props.prefixCls}`, {
|
|
11
|
+
[`${props.prefixCls}-checked`]: props.checked,
|
|
12
|
+
[`${props.prefixCls}-indeterminate`]: !props.checked && props.halfChecked,
|
|
13
|
+
[`${props.prefixCls}-disabled`]: props.disabled || props.disableCheckbox
|
|
14
|
+
}),
|
|
15
|
+
"onClick": props.onClick
|
|
16
|
+
}, [customCheckbox]);
|
|
17
|
+
};
|
|
18
|
+
}, { props: /* @__PURE__ */ mergeDefaults({
|
|
19
|
+
prefixCls: {
|
|
20
|
+
type: String,
|
|
21
|
+
required: true,
|
|
22
|
+
default: void 0
|
|
23
|
+
},
|
|
24
|
+
checked: {
|
|
25
|
+
type: Boolean,
|
|
26
|
+
required: false,
|
|
27
|
+
default: void 0
|
|
28
|
+
},
|
|
29
|
+
halfChecked: {
|
|
30
|
+
type: Boolean,
|
|
31
|
+
required: false,
|
|
32
|
+
default: void 0
|
|
33
|
+
},
|
|
34
|
+
disabled: {
|
|
35
|
+
type: Boolean,
|
|
36
|
+
required: false,
|
|
37
|
+
default: void 0
|
|
38
|
+
},
|
|
39
|
+
onClick: {
|
|
40
|
+
type: Function,
|
|
41
|
+
required: false,
|
|
42
|
+
default: void 0
|
|
43
|
+
},
|
|
44
|
+
disableCheckbox: {
|
|
45
|
+
type: Boolean,
|
|
46
|
+
required: false,
|
|
47
|
+
default: void 0
|
|
48
|
+
},
|
|
49
|
+
children: {
|
|
50
|
+
type: [
|
|
51
|
+
Object,
|
|
52
|
+
Function,
|
|
53
|
+
String,
|
|
54
|
+
Number,
|
|
55
|
+
null,
|
|
56
|
+
Boolean,
|
|
57
|
+
Array
|
|
58
|
+
],
|
|
59
|
+
required: false,
|
|
60
|
+
default: void 0
|
|
61
|
+
}
|
|
62
|
+
}, {
|
|
63
|
+
prefixCls: "",
|
|
64
|
+
checked: false,
|
|
65
|
+
halfChecked: false,
|
|
66
|
+
disabled: false,
|
|
67
|
+
disableCheckbox: false
|
|
68
|
+
}) });
|
|
69
|
+
export { Checkbox_default as default };
|
|
@@ -0,0 +1,223 @@
|
|
|
1
|
+
Object.defineProperties(exports, {
|
|
2
|
+
__esModule: { value: true },
|
|
3
|
+
[Symbol.toStringTag]: { value: "Module" }
|
|
4
|
+
});
|
|
5
|
+
const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
|
|
6
|
+
const require_context = require("../context.cjs");
|
|
7
|
+
const require_useSearchOptions = require("../hooks/useSearchOptions.cjs");
|
|
8
|
+
const require_commonUtil = require("../utils/commonUtil.cjs");
|
|
9
|
+
const require_Checkbox = require("./Checkbox.cjs");
|
|
10
|
+
let vue = require("vue");
|
|
11
|
+
let _v_c_util = require("@v-c/util");
|
|
12
|
+
let _v_c_util_dist_pickAttrs = require("@v-c/util/dist/pickAttrs");
|
|
13
|
+
_v_c_util_dist_pickAttrs = require_rolldown_runtime.__toESM(_v_c_util_dist_pickAttrs);
|
|
14
|
+
const FIX_LABEL = "__cascader_fix_label__";
|
|
15
|
+
var columnDefaults = {
|
|
16
|
+
prefixCls: "",
|
|
17
|
+
options: [],
|
|
18
|
+
prevValuePath: [],
|
|
19
|
+
onToggleOpen: () => {},
|
|
20
|
+
onSelect: () => {},
|
|
21
|
+
onActive: () => {},
|
|
22
|
+
checkedSet: /* @__PURE__ */ new Set(),
|
|
23
|
+
halfCheckedSet: /* @__PURE__ */ new Set(),
|
|
24
|
+
loadingKeys: [],
|
|
25
|
+
isSelectable: () => false
|
|
26
|
+
};
|
|
27
|
+
var Column = /* @__PURE__ */ (0, vue.defineComponent)((props) => {
|
|
28
|
+
const menuRef = (0, vue.ref)(null);
|
|
29
|
+
const context = require_context.useCascaderContext();
|
|
30
|
+
const menuPrefixCls = (0, vue.computed)(() => `${props.prefixCls}-menu`);
|
|
31
|
+
const menuItemPrefixCls = (0, vue.computed)(() => `${props.prefixCls}-menu-item`);
|
|
32
|
+
const hoverOpen = (0, vue.computed)(() => context.value?.expandTrigger === "hover");
|
|
33
|
+
const isOptionDisabled = (disabled) => props.disabled || disabled;
|
|
34
|
+
const optionInfoList = (0, vue.computed)(() => {
|
|
35
|
+
const fieldNames = context.value?.fieldNames;
|
|
36
|
+
if (!fieldNames) return [];
|
|
37
|
+
return props.options.map((option) => {
|
|
38
|
+
const { disabled, disableCheckbox } = option;
|
|
39
|
+
const searchOptions = option[require_useSearchOptions.SEARCH_MARK];
|
|
40
|
+
const label = option["__cascader_fix_label__"] ?? option[fieldNames.label];
|
|
41
|
+
const value = option[fieldNames.value];
|
|
42
|
+
const isMergedLeaf = require_commonUtil.isLeaf(option, fieldNames);
|
|
43
|
+
const fullPath = searchOptions ? searchOptions.map((opt) => opt[fieldNames.value]) : [...props.prevValuePath, value];
|
|
44
|
+
const fullPathKey = require_commonUtil.toPathKey(fullPath);
|
|
45
|
+
return {
|
|
46
|
+
disabled,
|
|
47
|
+
label,
|
|
48
|
+
value,
|
|
49
|
+
isLeaf: isMergedLeaf,
|
|
50
|
+
isLoading: props.loadingKeys.includes(fullPathKey),
|
|
51
|
+
checked: props.checkedSet.has(fullPathKey),
|
|
52
|
+
halfChecked: props.halfCheckedSet.has(fullPathKey),
|
|
53
|
+
option,
|
|
54
|
+
disableCheckbox,
|
|
55
|
+
fullPath,
|
|
56
|
+
fullPathKey
|
|
57
|
+
};
|
|
58
|
+
});
|
|
59
|
+
});
|
|
60
|
+
(0, vue.watch)(() => props.activeValue, () => {
|
|
61
|
+
(0, vue.nextTick)(() => {
|
|
62
|
+
if (menuRef.value) {
|
|
63
|
+
const selector = `.${menuItemPrefixCls.value}-active`;
|
|
64
|
+
const activeElement = menuRef.value.querySelector(selector);
|
|
65
|
+
if (activeElement) require_commonUtil.scrollIntoParentView(activeElement);
|
|
66
|
+
}
|
|
67
|
+
});
|
|
68
|
+
}, { immediate: true });
|
|
69
|
+
return () => {
|
|
70
|
+
const fieldNames = context.value?.fieldNames;
|
|
71
|
+
const changeOnSelect = context.value?.changeOnSelect;
|
|
72
|
+
const expandIcon = context.value?.expandIcon;
|
|
73
|
+
const loadingIcon = context.value?.loadingIcon;
|
|
74
|
+
const popupMenuColumnStyle = context.value?.popupMenuColumnStyle;
|
|
75
|
+
const optionRender = context.value?.optionRender;
|
|
76
|
+
const classNames = context.value?.classNames;
|
|
77
|
+
const styles = context.value?.styles;
|
|
78
|
+
if (!fieldNames) return null;
|
|
79
|
+
return (0, vue.createVNode)("ul", {
|
|
80
|
+
"class": (0, _v_c_util.clsx)(menuPrefixCls.value, classNames?.popup?.list),
|
|
81
|
+
"style": styles?.popup?.list,
|
|
82
|
+
"ref": menuRef,
|
|
83
|
+
"role": "menu"
|
|
84
|
+
}, [optionInfoList.value.map(({ disabled, label, value, isLeaf: isMergedLeaf, isLoading, checked, halfChecked, option, fullPath, fullPathKey, disableCheckbox }) => {
|
|
85
|
+
const ariaProps = (0, _v_c_util_dist_pickAttrs.default)(option, {
|
|
86
|
+
aria: true,
|
|
87
|
+
data: true
|
|
88
|
+
});
|
|
89
|
+
const triggerOpenPath = () => {
|
|
90
|
+
if (isOptionDisabled(disabled)) return;
|
|
91
|
+
const nextValueCells = [...fullPath];
|
|
92
|
+
if (hoverOpen.value && isMergedLeaf) nextValueCells.pop();
|
|
93
|
+
props.onActive(nextValueCells);
|
|
94
|
+
};
|
|
95
|
+
const triggerSelect = () => {
|
|
96
|
+
if (props.isSelectable(option) && !isOptionDisabled(disabled)) props.onSelect(fullPath, isMergedLeaf);
|
|
97
|
+
};
|
|
98
|
+
let title;
|
|
99
|
+
if (typeof option.title === "string") title = option.title;
|
|
100
|
+
else if (typeof label === "string") title = label;
|
|
101
|
+
return (0, vue.createVNode)("li", (0, vue.mergeProps)({ "key": fullPathKey }, ariaProps, {
|
|
102
|
+
"class": (0, _v_c_util.clsx)(menuItemPrefixCls.value, classNames?.popup?.listItem, {
|
|
103
|
+
[`${menuItemPrefixCls.value}-expand`]: !isMergedLeaf,
|
|
104
|
+
[`${menuItemPrefixCls.value}-active`]: props.activeValue === value || props.activeValue === fullPathKey,
|
|
105
|
+
[`${menuItemPrefixCls.value}-disabled`]: isOptionDisabled(disabled),
|
|
106
|
+
[`${menuItemPrefixCls.value}-loading`]: isLoading
|
|
107
|
+
}),
|
|
108
|
+
"style": {
|
|
109
|
+
...popupMenuColumnStyle,
|
|
110
|
+
...styles?.popup?.listItem
|
|
111
|
+
},
|
|
112
|
+
"role": "menuitemcheckbox",
|
|
113
|
+
"title": title,
|
|
114
|
+
"aria-checked": checked,
|
|
115
|
+
"data-path-key": fullPathKey,
|
|
116
|
+
"onClick": () => {
|
|
117
|
+
triggerOpenPath();
|
|
118
|
+
if (disableCheckbox) return;
|
|
119
|
+
if (!props.multiple || isMergedLeaf) triggerSelect();
|
|
120
|
+
},
|
|
121
|
+
"onDblclick": () => {
|
|
122
|
+
if (changeOnSelect) props.onToggleOpen(false);
|
|
123
|
+
},
|
|
124
|
+
"onMouseenter": () => {
|
|
125
|
+
if (hoverOpen.value) triggerOpenPath();
|
|
126
|
+
},
|
|
127
|
+
"onMousedown": (e) => {
|
|
128
|
+
e.preventDefault();
|
|
129
|
+
}
|
|
130
|
+
}), [
|
|
131
|
+
props.multiple && (0, vue.createVNode)(require_Checkbox.default, {
|
|
132
|
+
"prefixCls": `${props.prefixCls}-checkbox`,
|
|
133
|
+
"checked": checked,
|
|
134
|
+
"halfChecked": halfChecked,
|
|
135
|
+
"disabled": isOptionDisabled(disabled) || disableCheckbox,
|
|
136
|
+
"disableCheckbox": disableCheckbox,
|
|
137
|
+
"onClick": (e) => {
|
|
138
|
+
if (disableCheckbox) return;
|
|
139
|
+
e.stopPropagation();
|
|
140
|
+
triggerSelect();
|
|
141
|
+
}
|
|
142
|
+
}, null),
|
|
143
|
+
(0, vue.createVNode)("div", { "class": `${menuItemPrefixCls.value}-content` }, [optionRender ? optionRender(option) : label]),
|
|
144
|
+
!isLoading && expandIcon && !isMergedLeaf && (0, vue.createVNode)("div", { "class": `${menuItemPrefixCls.value}-expand-icon` }, [expandIcon]),
|
|
145
|
+
isLoading && loadingIcon && (0, vue.createVNode)("div", { "class": `${menuItemPrefixCls.value}-loading-icon` }, [loadingIcon])
|
|
146
|
+
]);
|
|
147
|
+
})]);
|
|
148
|
+
};
|
|
149
|
+
}, { props: /* @__PURE__ */ (0, vue.mergeDefaults)({
|
|
150
|
+
prefixCls: {
|
|
151
|
+
type: String,
|
|
152
|
+
required: true,
|
|
153
|
+
default: void 0
|
|
154
|
+
},
|
|
155
|
+
multiple: {
|
|
156
|
+
type: Boolean,
|
|
157
|
+
required: false,
|
|
158
|
+
default: void 0
|
|
159
|
+
},
|
|
160
|
+
options: {
|
|
161
|
+
type: Array,
|
|
162
|
+
required: true,
|
|
163
|
+
default: void 0
|
|
164
|
+
},
|
|
165
|
+
activeValue: {
|
|
166
|
+
type: [String, Number],
|
|
167
|
+
required: false,
|
|
168
|
+
default: void 0
|
|
169
|
+
},
|
|
170
|
+
prevValuePath: {
|
|
171
|
+
type: Array,
|
|
172
|
+
required: true,
|
|
173
|
+
default: void 0
|
|
174
|
+
},
|
|
175
|
+
onToggleOpen: {
|
|
176
|
+
type: Function,
|
|
177
|
+
required: true,
|
|
178
|
+
default: void 0
|
|
179
|
+
},
|
|
180
|
+
onSelect: {
|
|
181
|
+
type: Function,
|
|
182
|
+
required: true,
|
|
183
|
+
default: void 0
|
|
184
|
+
},
|
|
185
|
+
onActive: {
|
|
186
|
+
type: Function,
|
|
187
|
+
required: true,
|
|
188
|
+
default: void 0
|
|
189
|
+
},
|
|
190
|
+
checkedSet: {
|
|
191
|
+
type: Set,
|
|
192
|
+
required: true,
|
|
193
|
+
default: void 0
|
|
194
|
+
},
|
|
195
|
+
halfCheckedSet: {
|
|
196
|
+
type: Set,
|
|
197
|
+
required: true,
|
|
198
|
+
default: void 0
|
|
199
|
+
},
|
|
200
|
+
loadingKeys: {
|
|
201
|
+
type: Array,
|
|
202
|
+
required: true,
|
|
203
|
+
default: void 0
|
|
204
|
+
},
|
|
205
|
+
isSelectable: {
|
|
206
|
+
type: Function,
|
|
207
|
+
required: true,
|
|
208
|
+
default: void 0
|
|
209
|
+
},
|
|
210
|
+
disabled: {
|
|
211
|
+
type: Boolean,
|
|
212
|
+
required: false,
|
|
213
|
+
default: void 0
|
|
214
|
+
},
|
|
215
|
+
style: {
|
|
216
|
+
type: Object,
|
|
217
|
+
required: false,
|
|
218
|
+
default: void 0
|
|
219
|
+
}
|
|
220
|
+
}, columnDefaults) });
|
|
221
|
+
var Column_default = Column;
|
|
222
|
+
exports.FIX_LABEL = FIX_LABEL;
|
|
223
|
+
exports.default = Column_default;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { CSSProperties } from 'vue';
|
|
2
|
+
import { DefaultOptionType, LegacyKey, SingleValueType } from '../Cascader';
|
|
3
|
+
export declare const FIX_LABEL = "__cascader_fix_label__";
|
|
4
|
+
export interface ColumnProps<OptionType extends DefaultOptionType = DefaultOptionType> {
|
|
5
|
+
prefixCls: string;
|
|
6
|
+
multiple?: boolean;
|
|
7
|
+
options: OptionType[];
|
|
8
|
+
/** Current Column opened item key */
|
|
9
|
+
activeValue?: LegacyKey;
|
|
10
|
+
/** The value path before current column */
|
|
11
|
+
prevValuePath: LegacyKey[];
|
|
12
|
+
onToggleOpen: (open: boolean) => void;
|
|
13
|
+
onSelect: (valuePath: SingleValueType, leaf: boolean) => void;
|
|
14
|
+
onActive: (valuePath: SingleValueType) => void;
|
|
15
|
+
checkedSet: Set<LegacyKey>;
|
|
16
|
+
halfCheckedSet: Set<LegacyKey>;
|
|
17
|
+
loadingKeys: LegacyKey[];
|
|
18
|
+
isSelectable: (option: DefaultOptionType) => boolean;
|
|
19
|
+
disabled?: boolean;
|
|
20
|
+
style?: CSSProperties;
|
|
21
|
+
}
|
|
22
|
+
declare const Column: import('vue').DefineSetupFnComponent<ColumnProps<DefaultOptionType>, {}, {}, ColumnProps<DefaultOptionType> & {}, import('vue').PublicProps>;
|
|
23
|
+
export default Column;
|
|
@@ -0,0 +1,215 @@
|
|
|
1
|
+
import { useCascaderContext } from "../context.js";
|
|
2
|
+
import { SEARCH_MARK } from "../hooks/useSearchOptions.js";
|
|
3
|
+
import { isLeaf, scrollIntoParentView, toPathKey } from "../utils/commonUtil.js";
|
|
4
|
+
import Checkbox_default from "./Checkbox.js";
|
|
5
|
+
import { computed, createVNode, defineComponent, mergeDefaults, mergeProps, nextTick, ref, watch } from "vue";
|
|
6
|
+
import { clsx } from "@v-c/util";
|
|
7
|
+
import pickAttrs from "@v-c/util/dist/pickAttrs";
|
|
8
|
+
const FIX_LABEL = "__cascader_fix_label__";
|
|
9
|
+
var columnDefaults = {
|
|
10
|
+
prefixCls: "",
|
|
11
|
+
options: [],
|
|
12
|
+
prevValuePath: [],
|
|
13
|
+
onToggleOpen: () => {},
|
|
14
|
+
onSelect: () => {},
|
|
15
|
+
onActive: () => {},
|
|
16
|
+
checkedSet: /* @__PURE__ */ new Set(),
|
|
17
|
+
halfCheckedSet: /* @__PURE__ */ new Set(),
|
|
18
|
+
loadingKeys: [],
|
|
19
|
+
isSelectable: () => false
|
|
20
|
+
};
|
|
21
|
+
var Column_default = /* @__PURE__ */ defineComponent((props) => {
|
|
22
|
+
const menuRef = ref(null);
|
|
23
|
+
const context = useCascaderContext();
|
|
24
|
+
const menuPrefixCls = computed(() => `${props.prefixCls}-menu`);
|
|
25
|
+
const menuItemPrefixCls = computed(() => `${props.prefixCls}-menu-item`);
|
|
26
|
+
const hoverOpen = computed(() => context.value?.expandTrigger === "hover");
|
|
27
|
+
const isOptionDisabled = (disabled) => props.disabled || disabled;
|
|
28
|
+
const optionInfoList = computed(() => {
|
|
29
|
+
const fieldNames = context.value?.fieldNames;
|
|
30
|
+
if (!fieldNames) return [];
|
|
31
|
+
return props.options.map((option) => {
|
|
32
|
+
const { disabled, disableCheckbox } = option;
|
|
33
|
+
const searchOptions = option[SEARCH_MARK];
|
|
34
|
+
const label = option["__cascader_fix_label__"] ?? option[fieldNames.label];
|
|
35
|
+
const value = option[fieldNames.value];
|
|
36
|
+
const isMergedLeaf = isLeaf(option, fieldNames);
|
|
37
|
+
const fullPath = searchOptions ? searchOptions.map((opt) => opt[fieldNames.value]) : [...props.prevValuePath, value];
|
|
38
|
+
const fullPathKey = toPathKey(fullPath);
|
|
39
|
+
return {
|
|
40
|
+
disabled,
|
|
41
|
+
label,
|
|
42
|
+
value,
|
|
43
|
+
isLeaf: isMergedLeaf,
|
|
44
|
+
isLoading: props.loadingKeys.includes(fullPathKey),
|
|
45
|
+
checked: props.checkedSet.has(fullPathKey),
|
|
46
|
+
halfChecked: props.halfCheckedSet.has(fullPathKey),
|
|
47
|
+
option,
|
|
48
|
+
disableCheckbox,
|
|
49
|
+
fullPath,
|
|
50
|
+
fullPathKey
|
|
51
|
+
};
|
|
52
|
+
});
|
|
53
|
+
});
|
|
54
|
+
watch(() => props.activeValue, () => {
|
|
55
|
+
nextTick(() => {
|
|
56
|
+
if (menuRef.value) {
|
|
57
|
+
const selector = `.${menuItemPrefixCls.value}-active`;
|
|
58
|
+
const activeElement = menuRef.value.querySelector(selector);
|
|
59
|
+
if (activeElement) scrollIntoParentView(activeElement);
|
|
60
|
+
}
|
|
61
|
+
});
|
|
62
|
+
}, { immediate: true });
|
|
63
|
+
return () => {
|
|
64
|
+
const fieldNames = context.value?.fieldNames;
|
|
65
|
+
const changeOnSelect = context.value?.changeOnSelect;
|
|
66
|
+
const expandIcon = context.value?.expandIcon;
|
|
67
|
+
const loadingIcon = context.value?.loadingIcon;
|
|
68
|
+
const popupMenuColumnStyle = context.value?.popupMenuColumnStyle;
|
|
69
|
+
const optionRender = context.value?.optionRender;
|
|
70
|
+
const classNames = context.value?.classNames;
|
|
71
|
+
const styles = context.value?.styles;
|
|
72
|
+
if (!fieldNames) return null;
|
|
73
|
+
return createVNode("ul", {
|
|
74
|
+
"class": clsx(menuPrefixCls.value, classNames?.popup?.list),
|
|
75
|
+
"style": styles?.popup?.list,
|
|
76
|
+
"ref": menuRef,
|
|
77
|
+
"role": "menu"
|
|
78
|
+
}, [optionInfoList.value.map(({ disabled, label, value, isLeaf: isMergedLeaf, isLoading, checked, halfChecked, option, fullPath, fullPathKey, disableCheckbox }) => {
|
|
79
|
+
const ariaProps = pickAttrs(option, {
|
|
80
|
+
aria: true,
|
|
81
|
+
data: true
|
|
82
|
+
});
|
|
83
|
+
const triggerOpenPath = () => {
|
|
84
|
+
if (isOptionDisabled(disabled)) return;
|
|
85
|
+
const nextValueCells = [...fullPath];
|
|
86
|
+
if (hoverOpen.value && isMergedLeaf) nextValueCells.pop();
|
|
87
|
+
props.onActive(nextValueCells);
|
|
88
|
+
};
|
|
89
|
+
const triggerSelect = () => {
|
|
90
|
+
if (props.isSelectable(option) && !isOptionDisabled(disabled)) props.onSelect(fullPath, isMergedLeaf);
|
|
91
|
+
};
|
|
92
|
+
let title;
|
|
93
|
+
if (typeof option.title === "string") title = option.title;
|
|
94
|
+
else if (typeof label === "string") title = label;
|
|
95
|
+
return createVNode("li", mergeProps({ "key": fullPathKey }, ariaProps, {
|
|
96
|
+
"class": clsx(menuItemPrefixCls.value, classNames?.popup?.listItem, {
|
|
97
|
+
[`${menuItemPrefixCls.value}-expand`]: !isMergedLeaf,
|
|
98
|
+
[`${menuItemPrefixCls.value}-active`]: props.activeValue === value || props.activeValue === fullPathKey,
|
|
99
|
+
[`${menuItemPrefixCls.value}-disabled`]: isOptionDisabled(disabled),
|
|
100
|
+
[`${menuItemPrefixCls.value}-loading`]: isLoading
|
|
101
|
+
}),
|
|
102
|
+
"style": {
|
|
103
|
+
...popupMenuColumnStyle,
|
|
104
|
+
...styles?.popup?.listItem
|
|
105
|
+
},
|
|
106
|
+
"role": "menuitemcheckbox",
|
|
107
|
+
"title": title,
|
|
108
|
+
"aria-checked": checked,
|
|
109
|
+
"data-path-key": fullPathKey,
|
|
110
|
+
"onClick": () => {
|
|
111
|
+
triggerOpenPath();
|
|
112
|
+
if (disableCheckbox) return;
|
|
113
|
+
if (!props.multiple || isMergedLeaf) triggerSelect();
|
|
114
|
+
},
|
|
115
|
+
"onDblclick": () => {
|
|
116
|
+
if (changeOnSelect) props.onToggleOpen(false);
|
|
117
|
+
},
|
|
118
|
+
"onMouseenter": () => {
|
|
119
|
+
if (hoverOpen.value) triggerOpenPath();
|
|
120
|
+
},
|
|
121
|
+
"onMousedown": (e) => {
|
|
122
|
+
e.preventDefault();
|
|
123
|
+
}
|
|
124
|
+
}), [
|
|
125
|
+
props.multiple && createVNode(Checkbox_default, {
|
|
126
|
+
"prefixCls": `${props.prefixCls}-checkbox`,
|
|
127
|
+
"checked": checked,
|
|
128
|
+
"halfChecked": halfChecked,
|
|
129
|
+
"disabled": isOptionDisabled(disabled) || disableCheckbox,
|
|
130
|
+
"disableCheckbox": disableCheckbox,
|
|
131
|
+
"onClick": (e) => {
|
|
132
|
+
if (disableCheckbox) return;
|
|
133
|
+
e.stopPropagation();
|
|
134
|
+
triggerSelect();
|
|
135
|
+
}
|
|
136
|
+
}, null),
|
|
137
|
+
createVNode("div", { "class": `${menuItemPrefixCls.value}-content` }, [optionRender ? optionRender(option) : label]),
|
|
138
|
+
!isLoading && expandIcon && !isMergedLeaf && createVNode("div", { "class": `${menuItemPrefixCls.value}-expand-icon` }, [expandIcon]),
|
|
139
|
+
isLoading && loadingIcon && createVNode("div", { "class": `${menuItemPrefixCls.value}-loading-icon` }, [loadingIcon])
|
|
140
|
+
]);
|
|
141
|
+
})]);
|
|
142
|
+
};
|
|
143
|
+
}, { props: /* @__PURE__ */ mergeDefaults({
|
|
144
|
+
prefixCls: {
|
|
145
|
+
type: String,
|
|
146
|
+
required: true,
|
|
147
|
+
default: void 0
|
|
148
|
+
},
|
|
149
|
+
multiple: {
|
|
150
|
+
type: Boolean,
|
|
151
|
+
required: false,
|
|
152
|
+
default: void 0
|
|
153
|
+
},
|
|
154
|
+
options: {
|
|
155
|
+
type: Array,
|
|
156
|
+
required: true,
|
|
157
|
+
default: void 0
|
|
158
|
+
},
|
|
159
|
+
activeValue: {
|
|
160
|
+
type: [String, Number],
|
|
161
|
+
required: false,
|
|
162
|
+
default: void 0
|
|
163
|
+
},
|
|
164
|
+
prevValuePath: {
|
|
165
|
+
type: Array,
|
|
166
|
+
required: true,
|
|
167
|
+
default: void 0
|
|
168
|
+
},
|
|
169
|
+
onToggleOpen: {
|
|
170
|
+
type: Function,
|
|
171
|
+
required: true,
|
|
172
|
+
default: void 0
|
|
173
|
+
},
|
|
174
|
+
onSelect: {
|
|
175
|
+
type: Function,
|
|
176
|
+
required: true,
|
|
177
|
+
default: void 0
|
|
178
|
+
},
|
|
179
|
+
onActive: {
|
|
180
|
+
type: Function,
|
|
181
|
+
required: true,
|
|
182
|
+
default: void 0
|
|
183
|
+
},
|
|
184
|
+
checkedSet: {
|
|
185
|
+
type: Set,
|
|
186
|
+
required: true,
|
|
187
|
+
default: void 0
|
|
188
|
+
},
|
|
189
|
+
halfCheckedSet: {
|
|
190
|
+
type: Set,
|
|
191
|
+
required: true,
|
|
192
|
+
default: void 0
|
|
193
|
+
},
|
|
194
|
+
loadingKeys: {
|
|
195
|
+
type: Array,
|
|
196
|
+
required: true,
|
|
197
|
+
default: void 0
|
|
198
|
+
},
|
|
199
|
+
isSelectable: {
|
|
200
|
+
type: Function,
|
|
201
|
+
required: true,
|
|
202
|
+
default: void 0
|
|
203
|
+
},
|
|
204
|
+
disabled: {
|
|
205
|
+
type: Boolean,
|
|
206
|
+
required: false,
|
|
207
|
+
default: void 0
|
|
208
|
+
},
|
|
209
|
+
style: {
|
|
210
|
+
type: Object,
|
|
211
|
+
required: false,
|
|
212
|
+
default: void 0
|
|
213
|
+
}
|
|
214
|
+
}, columnDefaults) });
|
|
215
|
+
export { FIX_LABEL, Column_default as default };
|