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 CHANGED
@@ -99,31 +99,31 @@
99
99
  opacity: 1;
100
100
  -webkit-text-fill-color: #000;
101
101
  }
102
- .popup-style[data-v-3925cc28] {
102
+ .popup-style[data-v-8faf288e] {
103
103
  height: 21.25rem;
104
104
  }
105
- .showMultipleButton[data-v-3925cc28] {
105
+ .showMultipleButton[data-v-8faf288e] {
106
106
  padding-bottom: 0;
107
107
  }
108
- .showMultipleButton .van-button[data-v-3925cc28] {
108
+ .showMultipleButton .van-button[data-v-8faf288e] {
109
109
  border: 0;
110
110
  }
111
- .flex-between[data-v-3925cc28] {
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-3925cc28] {
117
+ .bold[data-v-8faf288e] {
118
118
  font-weight: bold;
119
119
  color: #444;
120
120
  }
121
- .checkbox-style[data-v-3925cc28] {
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-3925cc28] {
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-3925cc28] {
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-3925cc28] {
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] {
@@ -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-3925cc28] {\r\n height: 21.25rem;\n}\n.showMultipleButton[data-v-3925cc28] {\r\n padding-bottom: 0;\n}\n.showMultipleButton .van-button[data-v-3925cc28] {\r\n border: 0;\n}\n.flex-between[data-v-3925cc28] {\r\n padding: 10px;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\n}\n.bold[data-v-3925cc28] {\r\n font-weight: bold;\r\n color: #444;\n}\n.checkbox-style[data-v-3925cc28] {\r\n /* height: 220px; */\r\n height: calc(220px - 30px); \r\n overflow-y: auto;\n}\n.select-all-container[data-v-3925cc28] {\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-3925cc28] {\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-3925cc28] {\r\n margin-left: 8px;\n}\r\n \r\n")();
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
- onClick: showPopup,
17397
- "right-icon": unref(isReadonly) ? "" : "arrow",
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-3925cc28"]]);
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,
@@ -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-3925cc28] {\r\n height: 21.25rem;\n}\n.showMultipleButton[data-v-3925cc28] {\r\n padding-bottom: 0;\n}\n.showMultipleButton .van-button[data-v-3925cc28] {\r\n border: 0;\n}\n.flex-between[data-v-3925cc28] {\r\n padding: 10px;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\n}\n.bold[data-v-3925cc28] {\r\n font-weight: bold;\r\n color: #444;\n}\n.checkbox-style[data-v-3925cc28] {\r\n /* height: 220px; */\r\n height: calc(220px - 30px); \r\n overflow-y: auto;\n}\n.select-all-container[data-v-3925cc28] {\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-3925cc28] {\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-3925cc28] {\r\n margin-left: 8px;\n}\r\n \r\n")();
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
- onClick: showPopup,
17400
- "right-icon": vue.unref(isReadonly) ? "" : "arrow",
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-3925cc28"]]);
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,7 +1,7 @@
1
1
  {
2
2
  "name": "widget.qw",
3
3
  "private": false,
4
- "version": "1.0.73",
4
+ "version": "1.0.74",
5
5
  "description": "marqstree Vue3组件库",
6
6
  "main": "build/widget.qw.es.js",
7
7
  "keywords": [
@@ -1,23 +1,9 @@
1
1
  <template>
2
2
  <div>
3
3
  <!-- 显示已选数据 -->
4
- <van-field
5
- v-if="!isGone"
6
- type="textarea"
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" label-position="left">全选</van-checkbox>
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
- :name="item.value"
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
+ }
@@ -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
+ }