widget.qw 1.0.73 → 1.0.74
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/build/style.css +10 -11
- package/build/widget.qw.es.js +19 -5
- package/build/widget.qw.umd.js +19 -5
- package/package.json +1 -1
- package/src/components/data_selector.vue +49 -49
- package/src/env.d.ts +8 -8
- package/tsconfig.json +19 -19
- package/tsconfig.node.json +8 -8
package/build/style.css
CHANGED
|
@@ -99,31 +99,31 @@
|
|
|
99
99
|
opacity: 1;
|
|
100
100
|
-webkit-text-fill-color: #000;
|
|
101
101
|
}
|
|
102
|
-
.popup-style[data-v-
|
|
102
|
+
.popup-style[data-v-8faf288e] {
|
|
103
103
|
height: 21.25rem;
|
|
104
104
|
}
|
|
105
|
-
.showMultipleButton[data-v-
|
|
105
|
+
.showMultipleButton[data-v-8faf288e] {
|
|
106
106
|
padding-bottom: 0;
|
|
107
107
|
}
|
|
108
|
-
.showMultipleButton .van-button[data-v-
|
|
108
|
+
.showMultipleButton .van-button[data-v-8faf288e] {
|
|
109
109
|
border: 0;
|
|
110
110
|
}
|
|
111
|
-
.flex-between[data-v-
|
|
111
|
+
.flex-between[data-v-8faf288e] {
|
|
112
112
|
padding: 10px;
|
|
113
113
|
display: flex;
|
|
114
114
|
justify-content: space-between;
|
|
115
115
|
align-items: center;
|
|
116
116
|
}
|
|
117
|
-
.bold[data-v-
|
|
117
|
+
.bold[data-v-8faf288e] {
|
|
118
118
|
font-weight: bold;
|
|
119
119
|
color: #444;
|
|
120
120
|
}
|
|
121
|
-
.checkbox-style[data-v-
|
|
121
|
+
.checkbox-style[data-v-8faf288e] {
|
|
122
122
|
/* height: 220px; */
|
|
123
|
-
height: calc(220px - 30px);
|
|
123
|
+
height: calc(220px - 30px);
|
|
124
124
|
overflow-y: auto;
|
|
125
125
|
}
|
|
126
|
-
.select-all-container[data-v-
|
|
126
|
+
.select-all-container[data-v-8faf288e] {
|
|
127
127
|
font-size: 14px;
|
|
128
128
|
padding: 0 16px;
|
|
129
129
|
margin: 10px 0;
|
|
@@ -131,15 +131,14 @@
|
|
|
131
131
|
justify-content: flex-end;
|
|
132
132
|
align-items: center;
|
|
133
133
|
}
|
|
134
|
-
.select-all-container .van-checkbox[data-v-
|
|
134
|
+
.select-all-container .van-checkbox[data-v-8faf288e] {
|
|
135
135
|
margin-left: auto;
|
|
136
136
|
}
|
|
137
137
|
|
|
138
138
|
/* 新增:调整方形复选框的边距 */
|
|
139
|
-
.van-checkbox--square[data-v-
|
|
139
|
+
.van-checkbox--square[data-v-8faf288e] {
|
|
140
140
|
margin-left: 8px;
|
|
141
141
|
}
|
|
142
|
-
|
|
143
142
|
|
|
144
143
|
/* // 修改 confirmation-group 和 confirmation-item 的样式 */
|
|
145
144
|
.confirmation-group[data-v-40a09897] {
|
package/build/widget.qw.es.js
CHANGED
|
@@ -17181,7 +17181,7 @@ const _sfc_main$o = {
|
|
|
17181
17181
|
};
|
|
17182
17182
|
}
|
|
17183
17183
|
};
|
|
17184
|
-
var data_selector_vue_vue_type_style_index_0_scoped_true_lang = /* @__PURE__ */ (() => "\n.popup-style[data-v-
|
|
17184
|
+
var data_selector_vue_vue_type_style_index_0_scoped_true_lang = /* @__PURE__ */ (() => "\n.popup-style[data-v-8faf288e] {\r\n height: 21.25rem;\n}\n.showMultipleButton[data-v-8faf288e] {\r\n padding-bottom: 0;\n}\n.showMultipleButton .van-button[data-v-8faf288e] {\r\n border: 0;\n}\n.flex-between[data-v-8faf288e] {\r\n padding: 10px;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\n}\n.bold[data-v-8faf288e] {\r\n font-weight: bold;\r\n color: #444;\n}\n.checkbox-style[data-v-8faf288e] {\r\n /* height: 220px; */\r\n height: calc(220px - 30px);\r\n overflow-y: auto;\n}\n.select-all-container[data-v-8faf288e] {\r\n font-size: 14px;\r\n padding: 0 16px;\r\n margin: 10px 0;\r\n display: flex;\r\n justify-content: flex-end;\r\n align-items: center;\n}\n.select-all-container .van-checkbox[data-v-8faf288e] {\r\n margin-left: auto;\n}\r\n\r\n/* \u65B0\u589E\uFF1A\u8C03\u6574\u65B9\u5F62\u590D\u9009\u6846\u7684\u8FB9\u8DDD */\n.van-checkbox--square[data-v-8faf288e] {\r\n margin-left: 8px;\n}\r\n")();
|
|
17185
17185
|
const _hoisted_1$h = {
|
|
17186
17186
|
class: "pad10 flex-between showMultipleButton"
|
|
17187
17187
|
};
|
|
@@ -17249,6 +17249,11 @@ const _sfc_main$n = {
|
|
|
17249
17249
|
isGone,
|
|
17250
17250
|
isDisabled
|
|
17251
17251
|
} = util.props2auth(props);
|
|
17252
|
+
const rightIcon = computed(() => {
|
|
17253
|
+
if (isReadonly.value || isDisabled.value)
|
|
17254
|
+
return "";
|
|
17255
|
+
return "arrow";
|
|
17256
|
+
});
|
|
17252
17257
|
const selectedItems = ref([]);
|
|
17253
17258
|
const selectdItemsLabel = computed(() => {
|
|
17254
17259
|
if (!selectedItems.value)
|
|
@@ -17299,6 +17304,15 @@ const _sfc_main$n = {
|
|
|
17299
17304
|
reShow();
|
|
17300
17305
|
});
|
|
17301
17306
|
});
|
|
17307
|
+
const onClear = () => {
|
|
17308
|
+
console.log("11111111111111");
|
|
17309
|
+
selectedItems.value = [];
|
|
17310
|
+
if (props.multiple) {
|
|
17311
|
+
emit("update:modelValue", []);
|
|
17312
|
+
} else {
|
|
17313
|
+
emit("update:modelValue", null);
|
|
17314
|
+
}
|
|
17315
|
+
};
|
|
17302
17316
|
const toggle = (index) => {
|
|
17303
17317
|
checkboxRefs.value[index].toggle();
|
|
17304
17318
|
};
|
|
@@ -17387,14 +17401,14 @@ const _sfc_main$n = {
|
|
|
17387
17401
|
rows: "1",
|
|
17388
17402
|
autosize: "",
|
|
17389
17403
|
modelValue: unref(selectdItemsLabel),
|
|
17390
|
-
readonly: "",
|
|
17391
17404
|
clearable: "",
|
|
17392
17405
|
required: unref(isRequired),
|
|
17393
17406
|
label: __props.label,
|
|
17394
17407
|
name: __props.name
|
|
17395
17408
|
}, _ctx.$attrs, {
|
|
17396
|
-
|
|
17397
|
-
|
|
17409
|
+
onClickRightIcon: showPopup,
|
|
17410
|
+
onClear,
|
|
17411
|
+
"right-icon": unref(rightIcon),
|
|
17398
17412
|
rules: props.rules,
|
|
17399
17413
|
class: {
|
|
17400
17414
|
"disabled-field": unref(isReadonly)
|
|
@@ -17493,7 +17507,7 @@ const _sfc_main$n = {
|
|
|
17493
17507
|
};
|
|
17494
17508
|
}
|
|
17495
17509
|
};
|
|
17496
|
-
var DataSelector = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["__scopeId", "data-v-
|
|
17510
|
+
var DataSelector = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["__scopeId", "data-v-8faf288e"]]);
|
|
17497
17511
|
var mult_list_selector_vue_vue_type_style_index_0_scoped_true_lang = /* @__PURE__ */ (() => "\r\n/* // \u4FEE\u6539 confirmation-group \u548C confirmation-item \u7684\u6837\u5F0F */\n.confirmation-group[data-v-40a09897] {\r\n padding: 0 16px;\r\n --van-checkbox-disabled-icon-color: black;\n}\n.confirmation-item[data-v-40a09897] {\r\n padding: 12px 16px;\r\n margin: 0 -16px;\r\n border-bottom: 1px solid #f5f5f5;\r\n /* \u7981\u7528\u72B6\u6001\u6837\u5F0F */\n}\r\n\r\n/* // \u5728\u4E0B\u65B9\u6DFB\u52A0\u5A92\u4F53\u67E5\u8BE2\u9002\u914D\u5C0F\u5C4F\u5E55 */\n@media (max-width: 320px) {\n.confirmation-item[data-v-40a09897] {\r\n padding: 12px 8px;\r\n margin: 0 -8px;\n}\n}\n.confirmation-item[data-v-40a09897]:last-child {\r\n border-bottom: none;\n}\r\n\r\n/* \u65B0\u589E\u6837\u5F0F */\n.confirmation-tips[data-v-40a09897] {\r\n padding: 12px 16px;\r\n background: #f0faff;\r\n border-radius: 8px;\r\n margin: 10px 16px;\r\n display: flex;\r\n align-items: center;\r\n color: #1989fa;\r\n font-size: 13px;\r\n border: 1px solid #d9efff;\n}\n.confirmation-tips .van-icon[data-v-40a09897] {\r\n margin-right: 8px;\n}\r\n\r\n/* \u65B0\u589E\u5B57\u4F53\u7EE7\u627F\u6837\u5F0F */\n.confirmation-group[data-v-40a09897] {\r\n font-size: inherit; /* \u7EE7\u627F\u7236\u7EA7\u5B57\u4F53\u5927\u5C0F */\n}\n.option-text[data-v-40a09897] {\r\n font-size: 14px; /* \u660E\u786E\u6307\u5B9A\u5B57\u4F53\u5927\u5C0F */\r\n line-height: 1.5; /* \u4FDD\u6301\u884C\u9AD8\u4E00\u81F4 */\r\n /* color:black; */\n}\r\n\r\n/* \u9002\u914D\u79FB\u52A8\u7AEF\u7684\u5B57\u4F53\u8C03\u6574 */\n@media (max-width: 375px) {\n.option-text[data-v-40a09897] {\r\n font-size: 13px;\n}\n}\r\n\r\n/* \u65B0\u589E\u7981\u7528\u72B6\u6001\u6837\u5F0F */\n.custom-checkbox[data-v-40a09897]:disabled .--van-checkbox__icon {\r\n background-color: #f5f5f5;\r\n border-color: #ebedf0;\r\n transition: all 0.3s;\n}\n.custom-checkbox[data-v-40a09897]:disabled .van-checkbox__icon--checked {\r\n background-color: #1989fa;\r\n border-color: #1989fa;\r\n opacity: 0.7;\n}\n.van-checkbox--disabled[data-v-40a09897] .option-text {\r\n color: #969799;\n}\n.van-checkbox--disabled.van-checkbox--checked[data-v-40a09897] .option-text {\r\n color: #1989fa;\r\n opacity: 0.8;\n}\r\n")();
|
|
17498
17512
|
const _hoisted_1$g = {
|
|
17499
17513
|
key: 0,
|
package/build/widget.qw.umd.js
CHANGED
|
@@ -17184,7 +17184,7 @@ var __async = (__this, __arguments, generator) => {
|
|
|
17184
17184
|
};
|
|
17185
17185
|
}
|
|
17186
17186
|
};
|
|
17187
|
-
var data_selector_vue_vue_type_style_index_0_scoped_true_lang = /* @__PURE__ */ (() => "\n.popup-style[data-v-
|
|
17187
|
+
var data_selector_vue_vue_type_style_index_0_scoped_true_lang = /* @__PURE__ */ (() => "\n.popup-style[data-v-8faf288e] {\r\n height: 21.25rem;\n}\n.showMultipleButton[data-v-8faf288e] {\r\n padding-bottom: 0;\n}\n.showMultipleButton .van-button[data-v-8faf288e] {\r\n border: 0;\n}\n.flex-between[data-v-8faf288e] {\r\n padding: 10px;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\n}\n.bold[data-v-8faf288e] {\r\n font-weight: bold;\r\n color: #444;\n}\n.checkbox-style[data-v-8faf288e] {\r\n /* height: 220px; */\r\n height: calc(220px - 30px);\r\n overflow-y: auto;\n}\n.select-all-container[data-v-8faf288e] {\r\n font-size: 14px;\r\n padding: 0 16px;\r\n margin: 10px 0;\r\n display: flex;\r\n justify-content: flex-end;\r\n align-items: center;\n}\n.select-all-container .van-checkbox[data-v-8faf288e] {\r\n margin-left: auto;\n}\r\n\r\n/* \u65B0\u589E\uFF1A\u8C03\u6574\u65B9\u5F62\u590D\u9009\u6846\u7684\u8FB9\u8DDD */\n.van-checkbox--square[data-v-8faf288e] {\r\n margin-left: 8px;\n}\r\n")();
|
|
17188
17188
|
const _hoisted_1$h = {
|
|
17189
17189
|
class: "pad10 flex-between showMultipleButton"
|
|
17190
17190
|
};
|
|
@@ -17252,6 +17252,11 @@ var __async = (__this, __arguments, generator) => {
|
|
|
17252
17252
|
isGone,
|
|
17253
17253
|
isDisabled
|
|
17254
17254
|
} = util.props2auth(props);
|
|
17255
|
+
const rightIcon = vue.computed(() => {
|
|
17256
|
+
if (isReadonly.value || isDisabled.value)
|
|
17257
|
+
return "";
|
|
17258
|
+
return "arrow";
|
|
17259
|
+
});
|
|
17255
17260
|
const selectedItems = vue.ref([]);
|
|
17256
17261
|
const selectdItemsLabel = vue.computed(() => {
|
|
17257
17262
|
if (!selectedItems.value)
|
|
@@ -17302,6 +17307,15 @@ var __async = (__this, __arguments, generator) => {
|
|
|
17302
17307
|
reShow();
|
|
17303
17308
|
});
|
|
17304
17309
|
});
|
|
17310
|
+
const onClear = () => {
|
|
17311
|
+
console.log("11111111111111");
|
|
17312
|
+
selectedItems.value = [];
|
|
17313
|
+
if (props.multiple) {
|
|
17314
|
+
emit("update:modelValue", []);
|
|
17315
|
+
} else {
|
|
17316
|
+
emit("update:modelValue", null);
|
|
17317
|
+
}
|
|
17318
|
+
};
|
|
17305
17319
|
const toggle = (index) => {
|
|
17306
17320
|
checkboxRefs.value[index].toggle();
|
|
17307
17321
|
};
|
|
@@ -17390,14 +17404,14 @@ var __async = (__this, __arguments, generator) => {
|
|
|
17390
17404
|
rows: "1",
|
|
17391
17405
|
autosize: "",
|
|
17392
17406
|
modelValue: vue.unref(selectdItemsLabel),
|
|
17393
|
-
readonly: "",
|
|
17394
17407
|
clearable: "",
|
|
17395
17408
|
required: vue.unref(isRequired),
|
|
17396
17409
|
label: __props.label,
|
|
17397
17410
|
name: __props.name
|
|
17398
17411
|
}, _ctx.$attrs, {
|
|
17399
|
-
|
|
17400
|
-
|
|
17412
|
+
onClickRightIcon: showPopup,
|
|
17413
|
+
onClear,
|
|
17414
|
+
"right-icon": vue.unref(rightIcon),
|
|
17401
17415
|
rules: props.rules,
|
|
17402
17416
|
class: {
|
|
17403
17417
|
"disabled-field": vue.unref(isReadonly)
|
|
@@ -17496,7 +17510,7 @@ var __async = (__this, __arguments, generator) => {
|
|
|
17496
17510
|
};
|
|
17497
17511
|
}
|
|
17498
17512
|
};
|
|
17499
|
-
var DataSelector = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["__scopeId", "data-v-
|
|
17513
|
+
var DataSelector = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["__scopeId", "data-v-8faf288e"]]);
|
|
17500
17514
|
var mult_list_selector_vue_vue_type_style_index_0_scoped_true_lang = /* @__PURE__ */ (() => "\r\n/* // \u4FEE\u6539 confirmation-group \u548C confirmation-item \u7684\u6837\u5F0F */\n.confirmation-group[data-v-40a09897] {\r\n padding: 0 16px;\r\n --van-checkbox-disabled-icon-color: black;\n}\n.confirmation-item[data-v-40a09897] {\r\n padding: 12px 16px;\r\n margin: 0 -16px;\r\n border-bottom: 1px solid #f5f5f5;\r\n /* \u7981\u7528\u72B6\u6001\u6837\u5F0F */\n}\r\n\r\n/* // \u5728\u4E0B\u65B9\u6DFB\u52A0\u5A92\u4F53\u67E5\u8BE2\u9002\u914D\u5C0F\u5C4F\u5E55 */\n@media (max-width: 320px) {\n.confirmation-item[data-v-40a09897] {\r\n padding: 12px 8px;\r\n margin: 0 -8px;\n}\n}\n.confirmation-item[data-v-40a09897]:last-child {\r\n border-bottom: none;\n}\r\n\r\n/* \u65B0\u589E\u6837\u5F0F */\n.confirmation-tips[data-v-40a09897] {\r\n padding: 12px 16px;\r\n background: #f0faff;\r\n border-radius: 8px;\r\n margin: 10px 16px;\r\n display: flex;\r\n align-items: center;\r\n color: #1989fa;\r\n font-size: 13px;\r\n border: 1px solid #d9efff;\n}\n.confirmation-tips .van-icon[data-v-40a09897] {\r\n margin-right: 8px;\n}\r\n\r\n/* \u65B0\u589E\u5B57\u4F53\u7EE7\u627F\u6837\u5F0F */\n.confirmation-group[data-v-40a09897] {\r\n font-size: inherit; /* \u7EE7\u627F\u7236\u7EA7\u5B57\u4F53\u5927\u5C0F */\n}\n.option-text[data-v-40a09897] {\r\n font-size: 14px; /* \u660E\u786E\u6307\u5B9A\u5B57\u4F53\u5927\u5C0F */\r\n line-height: 1.5; /* \u4FDD\u6301\u884C\u9AD8\u4E00\u81F4 */\r\n /* color:black; */\n}\r\n\r\n/* \u9002\u914D\u79FB\u52A8\u7AEF\u7684\u5B57\u4F53\u8C03\u6574 */\n@media (max-width: 375px) {\n.option-text[data-v-40a09897] {\r\n font-size: 13px;\n}\n}\r\n\r\n/* \u65B0\u589E\u7981\u7528\u72B6\u6001\u6837\u5F0F */\n.custom-checkbox[data-v-40a09897]:disabled .--van-checkbox__icon {\r\n background-color: #f5f5f5;\r\n border-color: #ebedf0;\r\n transition: all 0.3s;\n}\n.custom-checkbox[data-v-40a09897]:disabled .van-checkbox__icon--checked {\r\n background-color: #1989fa;\r\n border-color: #1989fa;\r\n opacity: 0.7;\n}\n.van-checkbox--disabled[data-v-40a09897] .option-text {\r\n color: #969799;\n}\n.van-checkbox--disabled.van-checkbox--checked[data-v-40a09897] .option-text {\r\n color: #1989fa;\r\n opacity: 0.8;\n}\r\n")();
|
|
17501
17515
|
const _hoisted_1$g = {
|
|
17502
17516
|
key: 0,
|
package/package.json
CHANGED
|
@@ -1,23 +1,9 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div>
|
|
3
3
|
<!-- 显示已选数据 -->
|
|
4
|
-
<van-field
|
|
5
|
-
v-
|
|
6
|
-
|
|
7
|
-
rows="1"
|
|
8
|
-
autosize
|
|
9
|
-
:modelValue="selectdItemsLabel"
|
|
10
|
-
readonly
|
|
11
|
-
clearable
|
|
12
|
-
:required="isRequired"
|
|
13
|
-
:label="label"
|
|
14
|
-
:name="name"
|
|
15
|
-
v-bind="$attrs"
|
|
16
|
-
@click="showPopup"
|
|
17
|
-
:right-icon="isReadonly ? '' : 'arrow'"
|
|
18
|
-
:rules="props.rules"
|
|
19
|
-
:class="{ 'disabled-field': isReadonly }"
|
|
20
|
-
/>
|
|
4
|
+
<van-field v-if="!isGone" type="textarea" rows="1" autosize :modelValue="selectdItemsLabel" clearable
|
|
5
|
+
:required="isRequired" :label="label" :name="name" v-bind="$attrs" @click-right-icon="showPopup" @clear="onClear"
|
|
6
|
+
:right-icon="rightIcon" :rules="props.rules" :class="{ 'disabled-field': isReadonly }" />
|
|
21
7
|
<!-- 数据选择弹出层 -->
|
|
22
8
|
<van-popup v-model:show="popupVisible" position="bottom" class="popup-style">
|
|
23
9
|
<div>
|
|
@@ -30,7 +16,8 @@
|
|
|
30
16
|
<van-field left-icon="search" v-model.trim="searchKeyword" clearable placeholder="请输入搜索关键字" />
|
|
31
17
|
<!-- 全选 -->
|
|
32
18
|
<div v-if="props.multiple" class="select-all-container">
|
|
33
|
-
<van-checkbox shape="square" v-model="isAllChecked" @click="toggleAllSelect"
|
|
19
|
+
<van-checkbox shape="square" v-model="isAllChecked" @click="toggleAllSelect"
|
|
20
|
+
label-position="left">全选</van-checkbox>
|
|
34
21
|
</div>
|
|
35
22
|
<!-- 数据列表 -->
|
|
36
23
|
<div class="checkbox-style">
|
|
@@ -40,12 +27,8 @@
|
|
|
40
27
|
@click="toggle(index)">
|
|
41
28
|
<template #right-icon>
|
|
42
29
|
<!-- 修改点:添加 shape="square" -->
|
|
43
|
-
<van-checkbox
|
|
44
|
-
|
|
45
|
-
:ref="(el) => (checkboxRefs[index] = el)"
|
|
46
|
-
shape="square"
|
|
47
|
-
@click.stop
|
|
48
|
-
/>
|
|
30
|
+
<van-checkbox :name="item.value" :ref="(el) => (checkboxRefs[index] = el)" shape="square"
|
|
31
|
+
@click.stop />
|
|
49
32
|
</template>
|
|
50
33
|
</van-cell>
|
|
51
34
|
</van-cell-group>
|
|
@@ -72,9 +55,9 @@ import { onMounted, ref, onBeforeUpdate, computed, nextTick, watch } from "vue"
|
|
|
72
55
|
import util from '../util'
|
|
73
56
|
|
|
74
57
|
const props = defineProps({
|
|
75
|
-
multiple:{
|
|
76
|
-
type:Boolean,
|
|
77
|
-
default:false
|
|
58
|
+
multiple: {
|
|
59
|
+
type: Boolean,
|
|
60
|
+
default: false
|
|
78
61
|
},
|
|
79
62
|
options: {
|
|
80
63
|
type: Array,
|
|
@@ -83,11 +66,11 @@ const props = defineProps({
|
|
|
83
66
|
modelValue: {
|
|
84
67
|
type: [Array, String, Number]
|
|
85
68
|
},
|
|
86
|
-
columnsFieldNames:{
|
|
87
|
-
type:Object,
|
|
88
|
-
default:{
|
|
89
|
-
text:'text',
|
|
90
|
-
value:'value'
|
|
69
|
+
columnsFieldNames: {
|
|
70
|
+
type: Object,
|
|
71
|
+
default: {
|
|
72
|
+
text: 'text',
|
|
73
|
+
value: 'value'
|
|
91
74
|
}
|
|
92
75
|
},
|
|
93
76
|
rules: {
|
|
@@ -102,20 +85,27 @@ const props = defineProps({
|
|
|
102
85
|
type: Boolean,
|
|
103
86
|
default: false,
|
|
104
87
|
},
|
|
105
|
-
auth:{
|
|
88
|
+
auth: {
|
|
106
89
|
type: String,
|
|
107
|
-
default:''
|
|
90
|
+
default: ''
|
|
108
91
|
},
|
|
109
92
|
label: String,
|
|
110
93
|
name: String,
|
|
111
94
|
});
|
|
112
95
|
|
|
113
|
-
const {isRequired, isReadonly, isGone,isDisabled} = util.props2auth(props)
|
|
114
|
-
const emit = defineEmits(["update:modelValue","select"]);
|
|
96
|
+
const { isRequired, isReadonly, isGone, isDisabled } = util.props2auth(props)
|
|
97
|
+
const emit = defineEmits(["update:modelValue", "select"]);
|
|
98
|
+
|
|
99
|
+
const rightIcon = computed(() => {
|
|
100
|
+
if (isReadonly.value || isDisabled.value)
|
|
101
|
+
return ''
|
|
102
|
+
|
|
103
|
+
return 'arrow'
|
|
104
|
+
})
|
|
115
105
|
|
|
116
106
|
const selectedItems = ref([]);
|
|
117
|
-
const selectdItemsLabel = computed(()=>{
|
|
118
|
-
if(!selectedItems.value)
|
|
107
|
+
const selectdItemsLabel = computed(() => {
|
|
108
|
+
if (!selectedItems.value)
|
|
119
109
|
return ''
|
|
120
110
|
|
|
121
111
|
return selectedItems.value.join(',')
|
|
@@ -125,15 +115,15 @@ const searchKeyword = ref(null);
|
|
|
125
115
|
const checkboxRefs = ref([]);
|
|
126
116
|
const checkedValue = ref([]);
|
|
127
117
|
const isAllChecked = ref(false);
|
|
128
|
-
const formatOptions = computed(()=>{
|
|
129
|
-
if(!props.options)
|
|
118
|
+
const formatOptions = computed(() => {
|
|
119
|
+
if (!props.options)
|
|
130
120
|
return []
|
|
131
121
|
|
|
132
|
-
return props.options.map(item=>{
|
|
122
|
+
return props.options.map(item => {
|
|
133
123
|
return {
|
|
134
124
|
...item,
|
|
135
|
-
text:item[props.columnsFieldNames.text],
|
|
136
|
-
value:item[props.columnsFieldNames.value]
|
|
125
|
+
text: item[props.columnsFieldNames.text],
|
|
126
|
+
value: item[props.columnsFieldNames.value]
|
|
137
127
|
}
|
|
138
128
|
})
|
|
139
129
|
})
|
|
@@ -145,11 +135,11 @@ const findTextsByValues = (valuesToFind, data) => {
|
|
|
145
135
|
});
|
|
146
136
|
};
|
|
147
137
|
|
|
148
|
-
const values2items = (values)=>{
|
|
149
|
-
if(!values || values.length<1 || !formatOptions.value || formatOptions.value.length<1)
|
|
138
|
+
const values2items = (values) => {
|
|
139
|
+
if (!values || values.length < 1 || !formatOptions.value || formatOptions.value.length < 1)
|
|
150
140
|
return []
|
|
151
141
|
|
|
152
|
-
let res = formatOptions.value.filter(option=>values.includes(option.value))
|
|
142
|
+
let res = formatOptions.value.filter(option => values.includes(option.value))
|
|
153
143
|
return res
|
|
154
144
|
}
|
|
155
145
|
|
|
@@ -172,6 +162,17 @@ onMounted(() => {
|
|
|
172
162
|
});
|
|
173
163
|
});
|
|
174
164
|
|
|
165
|
+
const onClear = () => {
|
|
166
|
+
console.log('11111111111111')
|
|
167
|
+
selectedItems.value = []
|
|
168
|
+
if (props.multiple) {
|
|
169
|
+
emit("update:modelValue", [])
|
|
170
|
+
}
|
|
171
|
+
else {
|
|
172
|
+
emit("update:modelValue", null)
|
|
173
|
+
}
|
|
174
|
+
}
|
|
175
|
+
|
|
175
176
|
const toggle = (index) => {
|
|
176
177
|
checkboxRefs.value[index].toggle();
|
|
177
178
|
};
|
|
@@ -201,7 +202,7 @@ const confirmSelection = () => {
|
|
|
201
202
|
if (props.multiple) {
|
|
202
203
|
selectedItems.value = findTextsByValues(checkedValue.value, formatOptions.value);
|
|
203
204
|
emit("update:modelValue", checkedValue.value);
|
|
204
|
-
emit("select",values2items(checkedValue.value))
|
|
205
|
+
emit("select", values2items(checkedValue.value))
|
|
205
206
|
} else {
|
|
206
207
|
const foundItem = formatOptions.value.find((item) => item.value === checkedValue.value);
|
|
207
208
|
selectedItems.value = foundItem ? [foundItem.text] : [];
|
|
@@ -279,7 +280,7 @@ watch(() => formatOptions.value, () => {
|
|
|
279
280
|
|
|
280
281
|
.checkbox-style {
|
|
281
282
|
/* height: 220px; */
|
|
282
|
-
height: calc(220px - 30px);
|
|
283
|
+
height: calc(220px - 30px);
|
|
283
284
|
overflow-y: auto;
|
|
284
285
|
}
|
|
285
286
|
|
|
@@ -300,5 +301,4 @@ watch(() => formatOptions.value, () => {
|
|
|
300
301
|
.van-checkbox--square {
|
|
301
302
|
margin-left: 8px;
|
|
302
303
|
}
|
|
303
|
-
|
|
304
304
|
</style>
|
package/src/env.d.ts
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
/// <reference types="vite/client" />
|
|
2
|
-
|
|
3
|
-
declare module '*.vue' {
|
|
4
|
-
import type { DefineComponent } from 'vue'
|
|
5
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
|
|
6
|
-
const component: DefineComponent<{}, {}, any>
|
|
7
|
-
export default component
|
|
8
|
-
}
|
|
1
|
+
/// <reference types="vite/client" />
|
|
2
|
+
|
|
3
|
+
declare module '*.vue' {
|
|
4
|
+
import type { DefineComponent } from 'vue'
|
|
5
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
|
|
6
|
+
const component: DefineComponent<{}, {}, any>
|
|
7
|
+
export default component
|
|
8
|
+
}
|
package/tsconfig.json
CHANGED
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
{
|
|
2
|
-
"compilerOptions": {
|
|
3
|
-
"target": "esnext",
|
|
4
|
-
"useDefineForClassFields": true,
|
|
5
|
-
"module": "esnext",
|
|
6
|
-
"moduleResolution": "node",
|
|
7
|
-
"strict": true,
|
|
8
|
-
"jsx": "preserve",
|
|
9
|
-
"sourceMap": true,
|
|
10
|
-
"resolveJsonModule": true,
|
|
11
|
-
"isolatedModules": true,
|
|
12
|
-
"esModuleInterop": true,
|
|
13
|
-
"lib": ["esnext", "dom"],
|
|
14
|
-
"skipLibCheck": true,
|
|
15
|
-
"allowJs": true,
|
|
16
|
-
},
|
|
17
|
-
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
|
|
18
|
-
"references": [{ "path": "./tsconfig.node.json" }]
|
|
19
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"compilerOptions": {
|
|
3
|
+
"target": "esnext",
|
|
4
|
+
"useDefineForClassFields": true,
|
|
5
|
+
"module": "esnext",
|
|
6
|
+
"moduleResolution": "node",
|
|
7
|
+
"strict": true,
|
|
8
|
+
"jsx": "preserve",
|
|
9
|
+
"sourceMap": true,
|
|
10
|
+
"resolveJsonModule": true,
|
|
11
|
+
"isolatedModules": true,
|
|
12
|
+
"esModuleInterop": true,
|
|
13
|
+
"lib": ["esnext", "dom"],
|
|
14
|
+
"skipLibCheck": true,
|
|
15
|
+
"allowJs": true,
|
|
16
|
+
},
|
|
17
|
+
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
|
|
18
|
+
"references": [{ "path": "./tsconfig.node.json" }]
|
|
19
|
+
}
|
package/tsconfig.node.json
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
{
|
|
2
|
-
"compilerOptions": {
|
|
3
|
-
"composite": true,
|
|
4
|
-
"module": "esnext",
|
|
5
|
-
"moduleResolution": "node"
|
|
6
|
-
},
|
|
7
|
-
"include": ["vite.config.ts"]
|
|
8
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"compilerOptions": {
|
|
3
|
+
"composite": true,
|
|
4
|
+
"module": "esnext",
|
|
5
|
+
"moduleResolution": "node"
|
|
6
|
+
},
|
|
7
|
+
"include": ["vite.config.ts"]
|
|
8
|
+
}
|