@weitutech/by-components 1.1.199 → 1.1.201
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/lib/by-components.common.js +486 -27
- package/lib/by-components.umd.js +486 -27
- package/lib/by-components.umd.min.js +14 -14
- package/lib/index.css +1 -1
- package/package.json +1 -1
package/lib/by-components.umd.js
CHANGED
|
@@ -74283,6 +74283,7 @@ __webpack_require__.r(__webpack_exports__);
|
|
|
74283
74283
|
// EXPORTS
|
|
74284
74284
|
__webpack_require__.d(__webpack_exports__, {
|
|
74285
74285
|
ByBatchQuerySelector: function() { return /* reexport */ BatchQuerySelector; },
|
|
74286
|
+
ByCardSelector: function() { return /* reexport */ ByCardSelector; },
|
|
74286
74287
|
ByCardView: function() { return /* reexport */ ByCardView; },
|
|
74287
74288
|
ByCascaderPanel: function() { return /* reexport */ ByCascaderPanel; },
|
|
74288
74289
|
ByCommonInput: function() { return /* reexport */ ByCommonInput; },
|
|
@@ -91069,8 +91070,8 @@ var ByCommonSelector_component = normalizeComponent(
|
|
|
91069
91070
|
)
|
|
91070
91071
|
|
|
91071
91072
|
/* harmony default export */ var ByCommonSelector = (ByCommonSelector_component.exports);
|
|
91072
|
-
;// ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"8cd600e8-vue-loader-template"}!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/cache-loader/dist/cjs.js??ruleSet[0].use[0]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/batch-query-selector/BatchQuerySelector.vue?vue&type=template&id=
|
|
91073
|
-
var
|
|
91073
|
+
;// ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"8cd600e8-vue-loader-template"}!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/cache-loader/dist/cjs.js??ruleSet[0].use[0]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/batch-query-selector/BatchQuerySelector.vue?vue&type=template&id=16c8bfda
|
|
91074
|
+
var BatchQuerySelectorvue_type_template_id_16c8bfda_render = function render() {
|
|
91074
91075
|
var _vm = this,
|
|
91075
91076
|
_c = _vm._self._c;
|
|
91076
91077
|
return _c('div', {
|
|
@@ -91109,12 +91110,25 @@ var BatchQuerySelectorvue_type_template_id_f93606a8_render = function render() {
|
|
|
91109
91110
|
}, [_vm._l(_vm.visibleOptions, function (item) {
|
|
91110
91111
|
return _c('el-option', {
|
|
91111
91112
|
key: item[_vm.valueKey],
|
|
91113
|
+
class: {
|
|
91114
|
+
'option-with-desc': _vm.hasDescContent(item)
|
|
91115
|
+
},
|
|
91112
91116
|
attrs: {
|
|
91113
91117
|
"label": item[_vm.labelKey],
|
|
91114
91118
|
"value": item[_vm.valueKey],
|
|
91115
91119
|
"disabled": _vm.isOptionDisabled(item)
|
|
91116
91120
|
}
|
|
91117
|
-
})
|
|
91121
|
+
}, [_vm.hasDescContent(item) ? [_c('span', {
|
|
91122
|
+
staticClass: "option-label",
|
|
91123
|
+
attrs: {
|
|
91124
|
+
"title": String(item[_vm.labelKey])
|
|
91125
|
+
}
|
|
91126
|
+
}, [_vm._v(_vm._s(item[_vm.labelKey]))]), _c('span', {
|
|
91127
|
+
staticClass: "option-desc",
|
|
91128
|
+
attrs: {
|
|
91129
|
+
"title": String(item[_vm.descKey])
|
|
91130
|
+
}
|
|
91131
|
+
}, [_vm._v(_vm._s(item[_vm.descKey]))])] : _vm._e()], 2);
|
|
91118
91132
|
}), _vm.hasMoreOptions ? _c('el-option', {
|
|
91119
91133
|
staticClass: "load-more-option",
|
|
91120
91134
|
attrs: {
|
|
@@ -91228,7 +91242,7 @@ var BatchQuerySelectorvue_type_template_id_f93606a8_render = function render() {
|
|
|
91228
91242
|
}
|
|
91229
91243
|
})])], 1) : _vm._e()], 1)]);
|
|
91230
91244
|
};
|
|
91231
|
-
var
|
|
91245
|
+
var BatchQuerySelectorvue_type_template_id_16c8bfda_staticRenderFns = [];
|
|
91232
91246
|
|
|
91233
91247
|
;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/cache-loader/dist/cjs.js??ruleSet[0].use[0]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/batch-query-selector/BatchQuerySelector.vue?vue&type=script&lang=js
|
|
91234
91248
|
|
|
@@ -91276,6 +91290,22 @@ var BatchQuerySelectorvue_type_template_id_f93606a8_staticRenderFns = [];
|
|
|
91276
91290
|
type: String,
|
|
91277
91291
|
default: 'name'
|
|
91278
91292
|
},
|
|
91293
|
+
/**
|
|
91294
|
+
* 描述字段名
|
|
91295
|
+
* 配置后,下拉选项会在名称右侧展示该字段对应的描述内容;
|
|
91296
|
+
* 该字段默认不参与搜索匹配,如需让描述参与搜索,请将字段名同时加入 extraSearchKeys
|
|
91297
|
+
*/
|
|
91298
|
+
descKey: {
|
|
91299
|
+
type: String,
|
|
91300
|
+
default: 'desc'
|
|
91301
|
+
},
|
|
91302
|
+
/**
|
|
91303
|
+
* 下拉搜索时除 labelKey、valueKey 外额外参与匹配的字段名(不填则与原先一致,仅搜标签与值)
|
|
91304
|
+
*/
|
|
91305
|
+
extraSearchKeys: {
|
|
91306
|
+
type: Array,
|
|
91307
|
+
default: () => []
|
|
91308
|
+
},
|
|
91279
91309
|
// 禁用字段名,用于判断选项是否禁用
|
|
91280
91310
|
disabledKey: {
|
|
91281
91311
|
type: String,
|
|
@@ -91396,6 +91426,11 @@ var BatchQuerySelectorvue_type_template_id_f93606a8_staticRenderFns = [];
|
|
|
91396
91426
|
// 是否还有更多选项
|
|
91397
91427
|
hasMoreOptions() {
|
|
91398
91428
|
return this.visibleOptions.length < this.filteredOptions.length;
|
|
91429
|
+
},
|
|
91430
|
+
/** 本地过滤时参与「包含」匹配的字段(始终包含 labelKey、valueKey,再并上 extraSearchKeys) */
|
|
91431
|
+
searchFieldKeys() {
|
|
91432
|
+
const extras = Array.isArray(this.extraSearchKeys) ? this.extraSearchKeys.filter(k => typeof k === 'string' && k.trim() !== '') : [];
|
|
91433
|
+
return [...new Set([this.labelKey, this.valueKey, ...extras])];
|
|
91399
91434
|
}
|
|
91400
91435
|
},
|
|
91401
91436
|
watch: {
|
|
@@ -91435,6 +91470,12 @@ var BatchQuerySelectorvue_type_template_id_f93606a8_staticRenderFns = [];
|
|
|
91435
91470
|
}
|
|
91436
91471
|
},
|
|
91437
91472
|
methods: {
|
|
91473
|
+
// 判断选项是否有可展示的描述内容
|
|
91474
|
+
hasDescContent(option) {
|
|
91475
|
+
if (!this.descKey) return false;
|
|
91476
|
+
const val = option[this.descKey];
|
|
91477
|
+
return val !== undefined && val !== null && String(val).trim() !== '';
|
|
91478
|
+
},
|
|
91438
91479
|
// 判断选项是否禁用
|
|
91439
91480
|
isOptionDisabled(option) {
|
|
91440
91481
|
// 如果提供了自定义禁用方法,则使用自定义方法判断
|
|
@@ -91593,13 +91634,9 @@ var BatchQuerySelectorvue_type_template_id_f93606a8_staticRenderFns = [];
|
|
|
91593
91634
|
clearTimeout(this.debounceTimer);
|
|
91594
91635
|
this.debounceTimer = setTimeout(() => {
|
|
91595
91636
|
if (query) {
|
|
91596
|
-
|
|
91597
|
-
|
|
91598
|
-
|
|
91599
|
-
const value = String(item[this.valueKey]).toLowerCase();
|
|
91600
|
-
const lowercaseQuery = query.toLowerCase();
|
|
91601
|
-
return label.includes(lowercaseQuery) || value.includes(lowercaseQuery);
|
|
91602
|
-
});
|
|
91637
|
+
const lowercaseQuery = query.toLowerCase();
|
|
91638
|
+
const keys = this.searchFieldKeys;
|
|
91639
|
+
this.filteredOptions = this.optionsList.filter(item => keys.some(key => String(item[key]).toLowerCase().includes(lowercaseQuery)));
|
|
91603
91640
|
} else {
|
|
91604
91641
|
// 如果没有搜索关键词,显示所有选项
|
|
91605
91642
|
this.filteredOptions = [...this.optionsList];
|
|
@@ -91652,28 +91689,20 @@ var BatchQuerySelectorvue_type_template_id_f93606a8_staticRenderFns = [];
|
|
|
91652
91689
|
// 获取匹配的完整选项对象
|
|
91653
91690
|
matchedItems = this.optionsList.filter(item => matchedValues.includes(item[this.valueKey]));
|
|
91654
91691
|
} else {
|
|
91655
|
-
//
|
|
91692
|
+
// 默认映射逻辑:ID 和 名称 均采用精确匹配(忽略大小写、忽略首尾空白)
|
|
91656
91693
|
const searchKey = this.inputType === 'id' ? this.valueKey : this.labelKey;
|
|
91657
91694
|
|
|
91658
|
-
//
|
|
91695
|
+
// 从完整的 optionsList 中查找精确命中的项
|
|
91659
91696
|
matchedItems = this.optionsList.filter(item => {
|
|
91660
91697
|
// 排除禁用的选项
|
|
91661
91698
|
if (this.isOptionDisabled(item)) {
|
|
91662
91699
|
return false;
|
|
91663
91700
|
}
|
|
91664
|
-
|
|
91701
|
+
const itemVal = String(item[searchKey]).trim().toLowerCase();
|
|
91702
|
+
return inputValues.some(input => itemVal === String(input).trim().toLowerCase());
|
|
91665
91703
|
});
|
|
91666
91704
|
|
|
91667
|
-
//
|
|
91668
|
-
matchedValues = matchedItems.map(item => item[this.valueKey]);
|
|
91669
|
-
}
|
|
91670
|
-
|
|
91671
|
-
// 如果没有匹配项,尝试进行模糊匹配
|
|
91672
|
-
if (matchedValues.length === 0 && this.inputType === 'name') {
|
|
91673
|
-
matchedItems = this.optionsList.filter(item => {
|
|
91674
|
-
if (this.isOptionDisabled(item)) return false;
|
|
91675
|
-
return inputValues.some(input => String(item[this.labelKey]).toLowerCase().includes(String(input).toLowerCase()));
|
|
91676
|
-
});
|
|
91705
|
+
// 提取值
|
|
91677
91706
|
matchedValues = matchedItems.map(item => item[this.valueKey]);
|
|
91678
91707
|
}
|
|
91679
91708
|
|
|
@@ -91745,8 +91774,8 @@ var BatchQuerySelectorvue_type_template_id_f93606a8_staticRenderFns = [];
|
|
|
91745
91774
|
;
|
|
91746
91775
|
var BatchQuerySelector_component = normalizeComponent(
|
|
91747
91776
|
batch_query_selector_BatchQuerySelectorvue_type_script_lang_js,
|
|
91748
|
-
|
|
91749
|
-
|
|
91777
|
+
BatchQuerySelectorvue_type_template_id_16c8bfda_render,
|
|
91778
|
+
BatchQuerySelectorvue_type_template_id_16c8bfda_staticRenderFns,
|
|
91750
91779
|
false,
|
|
91751
91780
|
null,
|
|
91752
91781
|
null,
|
|
@@ -97691,6 +97720,434 @@ var ByCardView_component = normalizeComponent(
|
|
|
97691
97720
|
)
|
|
97692
97721
|
|
|
97693
97722
|
/* harmony default export */ var ByCardView = (ByCardView_component.exports);
|
|
97723
|
+
;// ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"8cd600e8-vue-loader-template"}!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/cache-loader/dist/cjs.js??ruleSet[0].use[0]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/card-selector/ByCardSelector.vue?vue&type=template&id=293b51e4
|
|
97724
|
+
var ByCardSelectorvue_type_template_id_293b51e4_render = function render() {
|
|
97725
|
+
var _vm = this,
|
|
97726
|
+
_c = _vm._self._c;
|
|
97727
|
+
return _c('div', {
|
|
97728
|
+
staticClass: "by-card-selector",
|
|
97729
|
+
class: [`by-card-selector--size-${_vm.size}`, `by-card-selector--direction-${_vm.direction}`, {
|
|
97730
|
+
'is-disabled': _vm.disabled,
|
|
97731
|
+
'by-card-selector--no-check': !_vm.showCheckmark
|
|
97732
|
+
}],
|
|
97733
|
+
style: _vm.directionStyle,
|
|
97734
|
+
attrs: {
|
|
97735
|
+
"role": "listbox",
|
|
97736
|
+
"aria-multiselectable": _vm.multiple ? 'true' : 'false'
|
|
97737
|
+
}
|
|
97738
|
+
}, _vm._l(_vm.options, function (item, index) {
|
|
97739
|
+
return _c('div', {
|
|
97740
|
+
key: _vm.optionKey(item, index),
|
|
97741
|
+
staticClass: "by-card-selector__card",
|
|
97742
|
+
class: {
|
|
97743
|
+
'is-selected': _vm.isSelected(item),
|
|
97744
|
+
'is-disabled': _vm.isItemDisabled(item),
|
|
97745
|
+
'is-focusable': !_vm.isItemDisabled(item)
|
|
97746
|
+
},
|
|
97747
|
+
attrs: {
|
|
97748
|
+
"role": "option",
|
|
97749
|
+
"aria-selected": _vm.isSelected(item) ? 'true' : 'false',
|
|
97750
|
+
"aria-disabled": _vm.isItemDisabled(item) ? 'true' : 'false',
|
|
97751
|
+
"tabindex": _vm.cardTabindex(item, index)
|
|
97752
|
+
},
|
|
97753
|
+
on: {
|
|
97754
|
+
"click": function ($event) {
|
|
97755
|
+
return _vm.onCardClick(item, index);
|
|
97756
|
+
},
|
|
97757
|
+
"focus": function ($event) {
|
|
97758
|
+
return _vm.onCardFocus(index);
|
|
97759
|
+
},
|
|
97760
|
+
"keydown": function ($event) {
|
|
97761
|
+
return _vm.onCardKeydown($event, index);
|
|
97762
|
+
}
|
|
97763
|
+
}
|
|
97764
|
+
}, [_vm._t("card", function () {
|
|
97765
|
+
return [_c('div', {
|
|
97766
|
+
staticClass: "by-card-selector__card-inner"
|
|
97767
|
+
}, [_vm.hasIconArea(item) ? _c('div', {
|
|
97768
|
+
staticClass: "by-card-selector__icon-wrap"
|
|
97769
|
+
}, [_vm._t("icon", function () {
|
|
97770
|
+
return [_vm.iconIsImage(item) ? _c('img', {
|
|
97771
|
+
staticClass: "by-card-selector__icon-img",
|
|
97772
|
+
attrs: {
|
|
97773
|
+
"src": _vm.rawIcon(item),
|
|
97774
|
+
"alt": ""
|
|
97775
|
+
}
|
|
97776
|
+
}) : _vm.rawIcon(item) ? _c('i', {
|
|
97777
|
+
class: ['by-card-selector__icon-el', _vm.rawIcon(item)]
|
|
97778
|
+
}) : _c('div', {
|
|
97779
|
+
staticClass: "by-card-selector__icon-placeholder"
|
|
97780
|
+
}, [_c('span', {
|
|
97781
|
+
staticClass: "by-card-selector__icon-placeholder-text"
|
|
97782
|
+
}, [_vm._v(_vm._s(_vm.iconFallbackLetter(item)))])])];
|
|
97783
|
+
}, {
|
|
97784
|
+
"item": item,
|
|
97785
|
+
"index": index
|
|
97786
|
+
})], 2) : _vm._e(), _c('div', {
|
|
97787
|
+
staticClass: "by-card-selector__main"
|
|
97788
|
+
}, [_c('div', {
|
|
97789
|
+
staticClass: "by-card-selector__title-row"
|
|
97790
|
+
}, [_c('span', {
|
|
97791
|
+
staticClass: "by-card-selector__title"
|
|
97792
|
+
}, [_vm._v(_vm._s(_vm.optionLabel(item)))]), _vm.optionTooltip(item) ? _c('el-tooltip', {
|
|
97793
|
+
attrs: {
|
|
97794
|
+
"content": String(_vm.optionTooltip(item)),
|
|
97795
|
+
"placement": "top",
|
|
97796
|
+
"open-delay": 300
|
|
97797
|
+
}
|
|
97798
|
+
}, [_c('span', {
|
|
97799
|
+
staticClass: "by-card-selector__help",
|
|
97800
|
+
on: {
|
|
97801
|
+
"click": function ($event) {
|
|
97802
|
+
$event.stopPropagation();
|
|
97803
|
+
}
|
|
97804
|
+
}
|
|
97805
|
+
}, [_c('i', {
|
|
97806
|
+
staticClass: "el-icon-question"
|
|
97807
|
+
})])]) : _vm._e()], 1), _vm.optionDescription(item) ? _c('p', {
|
|
97808
|
+
staticClass: "by-card-selector__desc"
|
|
97809
|
+
}, [_vm._v(" " + _vm._s(_vm.optionDescription(item)) + " ")]) : _vm._e(), _vm.visibleTags(item).length || _vm.tagOverflowCount(item) > 0 ? _c('div', {
|
|
97810
|
+
staticClass: "by-card-selector__tags"
|
|
97811
|
+
}, [_vm._l(_vm.visibleTags(item), function (tag, ti) {
|
|
97812
|
+
return _c('el-tag', {
|
|
97813
|
+
key: ti,
|
|
97814
|
+
staticClass: "by-card-selector__tag",
|
|
97815
|
+
attrs: {
|
|
97816
|
+
"size": "mini",
|
|
97817
|
+
"type": "info",
|
|
97818
|
+
"effect": "plain"
|
|
97819
|
+
}
|
|
97820
|
+
}, [_vm._v(" " + _vm._s(_vm.formatTag(tag)) + " ")]);
|
|
97821
|
+
}), _vm.tagOverflowCount(item) > 0 ? _c('el-tag', {
|
|
97822
|
+
staticClass: "by-card-selector__tag by-card-selector__tag--more",
|
|
97823
|
+
attrs: {
|
|
97824
|
+
"size": "mini",
|
|
97825
|
+
"type": "info",
|
|
97826
|
+
"effect": "plain"
|
|
97827
|
+
}
|
|
97828
|
+
}, [_vm._v(" +" + _vm._s(_vm.tagOverflowCount(item)) + " ")]) : _vm._e()], 2) : _vm._e()]), _vm.showCheckmark ? _c('div', {
|
|
97829
|
+
staticClass: "by-card-selector__check",
|
|
97830
|
+
attrs: {
|
|
97831
|
+
"aria-hidden": "true"
|
|
97832
|
+
}
|
|
97833
|
+
}, [_vm.isSelected(item) ? _c('i', {
|
|
97834
|
+
staticClass: "el-icon-check by-card-selector__check-icon"
|
|
97835
|
+
}) : _vm._e()]) : _vm._e()])];
|
|
97836
|
+
}, {
|
|
97837
|
+
"item": item,
|
|
97838
|
+
"index": index,
|
|
97839
|
+
"selected": _vm.isSelected(item),
|
|
97840
|
+
"disabled": _vm.isItemDisabled(item)
|
|
97841
|
+
})], 2);
|
|
97842
|
+
}), 0);
|
|
97843
|
+
};
|
|
97844
|
+
var ByCardSelectorvue_type_template_id_293b51e4_staticRenderFns = [];
|
|
97845
|
+
|
|
97846
|
+
;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/cache-loader/dist/cjs.js??ruleSet[0].use[0]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/card-selector/ByCardSelector.vue?vue&type=script&lang=js
|
|
97847
|
+
|
|
97848
|
+
|
|
97849
|
+
|
|
97850
|
+
|
|
97851
|
+
|
|
97852
|
+
const DEFAULT_OPTION_PROPS = () => ({
|
|
97853
|
+
value: 'value',
|
|
97854
|
+
label: 'label',
|
|
97855
|
+
description: 'description',
|
|
97856
|
+
icon: 'icon',
|
|
97857
|
+
tooltip: 'tooltip',
|
|
97858
|
+
tags: 'tags'
|
|
97859
|
+
});
|
|
97860
|
+
|
|
97861
|
+
/**
|
|
97862
|
+
* 卡片选择器:单选/多选 + 卡片式布局,行为类似 el-radio-group / el-checkbox-group。
|
|
97863
|
+
*
|
|
97864
|
+
* @example
|
|
97865
|
+
* <by-card-selector v-model="id" :options="list" />
|
|
97866
|
+
* <by-card-selector v-model="ids" :options="list" multiple />
|
|
97867
|
+
*/
|
|
97868
|
+
/* harmony default export */ var ByCardSelectorvue_type_script_lang_js = ({
|
|
97869
|
+
name: 'ByCardSelector',
|
|
97870
|
+
props: {
|
|
97871
|
+
/** v-model:单选为选项 value;多选为 value 数组 */
|
|
97872
|
+
value: {
|
|
97873
|
+
type: [String, Number, Boolean, Object, Array],
|
|
97874
|
+
default: null
|
|
97875
|
+
},
|
|
97876
|
+
options: {
|
|
97877
|
+
type: Array,
|
|
97878
|
+
default: () => []
|
|
97879
|
+
},
|
|
97880
|
+
/** 是否多选 */
|
|
97881
|
+
multiple: {
|
|
97882
|
+
type: Boolean,
|
|
97883
|
+
default: false
|
|
97884
|
+
},
|
|
97885
|
+
/** 排列方向:横向(默认)或纵向;纵向时建议配合 verticalMaxHeight 以产生换列效果 */
|
|
97886
|
+
direction: {
|
|
97887
|
+
type: String,
|
|
97888
|
+
default: 'horizontal',
|
|
97889
|
+
validator: v => ['horizontal', 'vertical'].includes(v)
|
|
97890
|
+
},
|
|
97891
|
+
/** 纵向排列时容器最大高度,便于 flex 换列;仅 direction=vertical 时生效 */
|
|
97892
|
+
verticalMaxHeight: {
|
|
97893
|
+
type: String,
|
|
97894
|
+
default: '320px'
|
|
97895
|
+
},
|
|
97896
|
+
/** 卡片尺寸 */
|
|
97897
|
+
size: {
|
|
97898
|
+
type: String,
|
|
97899
|
+
default: 'default',
|
|
97900
|
+
validator: v => ['large', 'default', 'small'].includes(v)
|
|
97901
|
+
},
|
|
97902
|
+
/** 整组禁用 */
|
|
97903
|
+
disabled: {
|
|
97904
|
+
type: Boolean,
|
|
97905
|
+
default: false
|
|
97906
|
+
},
|
|
97907
|
+
/** 选项字段映射,默认 value / label / description / icon / tooltip / tags */
|
|
97908
|
+
optionProps: {
|
|
97909
|
+
type: Object,
|
|
97910
|
+
default: () => ({})
|
|
97911
|
+
},
|
|
97912
|
+
/** 用于判断禁用的数据字段,默认 disabled;数值类型时 1 为可选,非 1 为不可选;布尔 true 为禁用 */
|
|
97913
|
+
disabledField: {
|
|
97914
|
+
type: String,
|
|
97915
|
+
default: 'disabled'
|
|
97916
|
+
},
|
|
97917
|
+
/** 选项唯一键字段,用于 :key,默认与 value 字段一致 */
|
|
97918
|
+
optionKeyField: {
|
|
97919
|
+
type: String,
|
|
97920
|
+
default: ''
|
|
97921
|
+
},
|
|
97922
|
+
/** 标签最多展示个数,其余以 +N 省略 */
|
|
97923
|
+
maxVisibleTags: {
|
|
97924
|
+
type: Number,
|
|
97925
|
+
default: 3
|
|
97926
|
+
},
|
|
97927
|
+
/** 是否在卡片右侧展示圆形打钩选中指示,默认展示 */
|
|
97928
|
+
showCheckmark: {
|
|
97929
|
+
type: Boolean,
|
|
97930
|
+
default: true
|
|
97931
|
+
}
|
|
97932
|
+
},
|
|
97933
|
+
data() {
|
|
97934
|
+
return {
|
|
97935
|
+
focusedIndex: 0
|
|
97936
|
+
};
|
|
97937
|
+
},
|
|
97938
|
+
computed: {
|
|
97939
|
+
mergedOptionProps() {
|
|
97940
|
+
return {
|
|
97941
|
+
...DEFAULT_OPTION_PROPS(),
|
|
97942
|
+
...this.optionProps
|
|
97943
|
+
};
|
|
97944
|
+
},
|
|
97945
|
+
keyField() {
|
|
97946
|
+
return this.optionKeyField || this.mergedOptionProps.value;
|
|
97947
|
+
},
|
|
97948
|
+
directionStyle() {
|
|
97949
|
+
if (this.direction !== 'vertical') return {};
|
|
97950
|
+
return {
|
|
97951
|
+
maxHeight: this.verticalMaxHeight
|
|
97952
|
+
};
|
|
97953
|
+
}
|
|
97954
|
+
},
|
|
97955
|
+
watch: {
|
|
97956
|
+
options: {
|
|
97957
|
+
handler(list) {
|
|
97958
|
+
if (!Array.isArray(list) || list.length === 0) {
|
|
97959
|
+
this.focusedIndex = 0;
|
|
97960
|
+
return;
|
|
97961
|
+
}
|
|
97962
|
+
if (this.focusedIndex >= list.length) this.focusedIndex = list.length - 1;
|
|
97963
|
+
this.$nextTick(() => this.syncFocusedToFirstEnabled());
|
|
97964
|
+
},
|
|
97965
|
+
deep: true
|
|
97966
|
+
}
|
|
97967
|
+
},
|
|
97968
|
+
methods: {
|
|
97969
|
+
pick(obj, key) {
|
|
97970
|
+
if (obj == null || key == null || key === '') return undefined;
|
|
97971
|
+
return obj[key];
|
|
97972
|
+
},
|
|
97973
|
+
optionKey(item, index) {
|
|
97974
|
+
const v = this.pick(item, this.keyField);
|
|
97975
|
+
if (v !== undefined && v !== null) return v;
|
|
97976
|
+
return index;
|
|
97977
|
+
},
|
|
97978
|
+
optionValue(item) {
|
|
97979
|
+
return this.pick(item, this.mergedOptionProps.value);
|
|
97980
|
+
},
|
|
97981
|
+
optionLabel(item) {
|
|
97982
|
+
const v = this.pick(item, this.mergedOptionProps.label);
|
|
97983
|
+
return v != null && v !== '' ? String(v) : '';
|
|
97984
|
+
},
|
|
97985
|
+
optionDescription(item) {
|
|
97986
|
+
const v = this.pick(item, this.mergedOptionProps.description);
|
|
97987
|
+
return v != null && v !== '' ? String(v) : '';
|
|
97988
|
+
},
|
|
97989
|
+
rawIcon(item) {
|
|
97990
|
+
return this.pick(item, this.mergedOptionProps.icon);
|
|
97991
|
+
},
|
|
97992
|
+
optionTooltip(item) {
|
|
97993
|
+
const v = this.pick(item, this.mergedOptionProps.tooltip);
|
|
97994
|
+
if (v == null || v === '') return '';
|
|
97995
|
+
return v;
|
|
97996
|
+
},
|
|
97997
|
+
rawTags(item) {
|
|
97998
|
+
const raw = this.pick(item, this.mergedOptionProps.tags);
|
|
97999
|
+
if (Array.isArray(raw)) return raw;
|
|
98000
|
+
return [];
|
|
98001
|
+
},
|
|
98002
|
+
iconIsImage(item) {
|
|
98003
|
+
const s = this.rawIcon(item);
|
|
98004
|
+
if (typeof s !== 'string') return false;
|
|
98005
|
+
return /^https?:\/\//i.test(s) || /^data:image\//i.test(s) || /\.(png|jpe?g|gif|webp|svg)(\?|$)/i.test(s);
|
|
98006
|
+
},
|
|
98007
|
+
hasIconArea(item) {
|
|
98008
|
+
return Boolean(this.rawIcon(item)) || Boolean(this.$scopedSlots && this.$scopedSlots.icon);
|
|
98009
|
+
},
|
|
98010
|
+
iconFallbackLetter(item) {
|
|
98011
|
+
const t = this.optionLabel(item);
|
|
98012
|
+
return t ? t.trim().charAt(0).toUpperCase() : '?';
|
|
98013
|
+
},
|
|
98014
|
+
formatTag(tag) {
|
|
98015
|
+
if (tag == null) return '';
|
|
98016
|
+
if (typeof tag === 'string' || typeof tag === 'number') return String(tag);
|
|
98017
|
+
if (typeof tag === 'object' && tag.label != null) return String(tag.label);
|
|
98018
|
+
if (typeof tag === 'object' && tag.text != null) return String(tag.text);
|
|
98019
|
+
return String(tag);
|
|
98020
|
+
},
|
|
98021
|
+
visibleTags(item) {
|
|
98022
|
+
const tags = this.rawTags(item);
|
|
98023
|
+
const max = Math.max(0, this.maxVisibleTags);
|
|
98024
|
+
return tags.slice(0, max);
|
|
98025
|
+
},
|
|
98026
|
+
tagOverflowCount(item) {
|
|
98027
|
+
const tags = this.rawTags(item);
|
|
98028
|
+
const max = Math.max(0, this.maxVisibleTags);
|
|
98029
|
+
return tags.length > max ? tags.length - max : 0;
|
|
98030
|
+
},
|
|
98031
|
+
isItemDisabled(item) {
|
|
98032
|
+
if (this.disabled) return true;
|
|
98033
|
+
const field = this.disabledField;
|
|
98034
|
+
if (!field || !Object.prototype.hasOwnProperty.call(item, field)) return false;
|
|
98035
|
+
const v = item[field];
|
|
98036
|
+
if (typeof v === 'number') return v !== 1;
|
|
98037
|
+
if (typeof v === 'boolean') return v === true;
|
|
98038
|
+
return Boolean(v);
|
|
98039
|
+
},
|
|
98040
|
+
valuesEqual(a, b) {
|
|
98041
|
+
return a === b || Number.isNaN(a) && Number.isNaN(b);
|
|
98042
|
+
},
|
|
98043
|
+
isSelected(item) {
|
|
98044
|
+
const val = this.optionValue(item);
|
|
98045
|
+
if (this.multiple) {
|
|
98046
|
+
const list = Array.isArray(this.value) ? this.value : [];
|
|
98047
|
+
return list.some(v => this.valuesEqual(v, val));
|
|
98048
|
+
}
|
|
98049
|
+
return this.valuesEqual(this.value, val);
|
|
98050
|
+
},
|
|
98051
|
+
cardTabindex(item, index) {
|
|
98052
|
+
if (this.isItemDisabled(item)) return -1;
|
|
98053
|
+
return this.focusedIndex === index ? 0 : -1;
|
|
98054
|
+
},
|
|
98055
|
+
emitChange(next) {
|
|
98056
|
+
this.$emit('input', next);
|
|
98057
|
+
this.$emit('change', next);
|
|
98058
|
+
},
|
|
98059
|
+
toggleItem(item) {
|
|
98060
|
+
if (this.isItemDisabled(item)) return;
|
|
98061
|
+
const val = this.optionValue(item);
|
|
98062
|
+
if (this.multiple) {
|
|
98063
|
+
const list = Array.isArray(this.value) ? [...this.value] : [];
|
|
98064
|
+
const i = list.findIndex(v => this.valuesEqual(v, val));
|
|
98065
|
+
if (i >= 0) list.splice(i, 1);else list.push(val);
|
|
98066
|
+
this.emitChange(list);
|
|
98067
|
+
} else if (!this.valuesEqual(this.value, val)) {
|
|
98068
|
+
this.emitChange(val);
|
|
98069
|
+
}
|
|
98070
|
+
},
|
|
98071
|
+
onCardClick(item, index) {
|
|
98072
|
+
if (!this.isItemDisabled(item)) this.focusedIndex = index;
|
|
98073
|
+
this.toggleItem(item);
|
|
98074
|
+
},
|
|
98075
|
+
onCardFocus(index) {
|
|
98076
|
+
if (!this.isItemDisabled(this.options[index])) this.focusedIndex = index;
|
|
98077
|
+
},
|
|
98078
|
+
enabledOptionIndices() {
|
|
98079
|
+
return this.options.map((it, i) => this.isItemDisabled(it) ? -1 : i).filter(i => i >= 0);
|
|
98080
|
+
},
|
|
98081
|
+
focusCardAtIndex(index) {
|
|
98082
|
+
this.focusedIndex = index;
|
|
98083
|
+
this.$nextTick(() => {
|
|
98084
|
+
const nodes = this.$el && this.$el.querySelectorAll('.by-card-selector__card');
|
|
98085
|
+
const el = nodes && nodes[index];
|
|
98086
|
+
if (el && typeof el.focus === 'function') el.focus();
|
|
98087
|
+
});
|
|
98088
|
+
},
|
|
98089
|
+
moveFocus(delta) {
|
|
98090
|
+
const enabled = this.enabledOptionIndices();
|
|
98091
|
+
if (!enabled.length) return;
|
|
98092
|
+
let pos = enabled.indexOf(this.focusedIndex);
|
|
98093
|
+
if (pos < 0) pos = 0;
|
|
98094
|
+
pos = (pos + delta + enabled.length) % enabled.length;
|
|
98095
|
+
this.focusCardAtIndex(enabled[pos]);
|
|
98096
|
+
},
|
|
98097
|
+
onCardKeydown(e, index) {
|
|
98098
|
+
if (this.disabled || !this.options.length) return;
|
|
98099
|
+
if (this.isItemDisabled(this.options[index])) return;
|
|
98100
|
+
if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
|
|
98101
|
+
e.preventDefault();
|
|
98102
|
+
this.moveFocus(1);
|
|
98103
|
+
return;
|
|
98104
|
+
}
|
|
98105
|
+
if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
|
|
98106
|
+
e.preventDefault();
|
|
98107
|
+
this.moveFocus(-1);
|
|
98108
|
+
return;
|
|
98109
|
+
}
|
|
98110
|
+
if (e.key === ' ' || e.key === 'Enter') {
|
|
98111
|
+
e.preventDefault();
|
|
98112
|
+
const item = this.options[this.focusedIndex];
|
|
98113
|
+
if (item && !this.isItemDisabled(item)) this.toggleItem(item);
|
|
98114
|
+
}
|
|
98115
|
+
},
|
|
98116
|
+
syncFocusedToFirstEnabled() {
|
|
98117
|
+
const enabled = this.enabledOptionIndices();
|
|
98118
|
+
if (!enabled.length) {
|
|
98119
|
+
this.focusedIndex = 0;
|
|
98120
|
+
return;
|
|
98121
|
+
}
|
|
98122
|
+
if (enabled.indexOf(this.focusedIndex) < 0) this.focusedIndex = enabled[0];
|
|
98123
|
+
}
|
|
98124
|
+
},
|
|
98125
|
+
created() {
|
|
98126
|
+
this.syncFocusedToFirstEnabled();
|
|
98127
|
+
}
|
|
98128
|
+
});
|
|
98129
|
+
;// ./src/components/card-selector/ByCardSelector.vue?vue&type=script&lang=js
|
|
98130
|
+
/* harmony default export */ var card_selector_ByCardSelectorvue_type_script_lang_js = (ByCardSelectorvue_type_script_lang_js);
|
|
98131
|
+
;// ./src/components/card-selector/ByCardSelector.vue
|
|
98132
|
+
|
|
98133
|
+
|
|
98134
|
+
|
|
98135
|
+
|
|
98136
|
+
|
|
98137
|
+
/* normalize component */
|
|
98138
|
+
;
|
|
98139
|
+
var ByCardSelector_component = normalizeComponent(
|
|
98140
|
+
card_selector_ByCardSelectorvue_type_script_lang_js,
|
|
98141
|
+
ByCardSelectorvue_type_template_id_293b51e4_render,
|
|
98142
|
+
ByCardSelectorvue_type_template_id_293b51e4_staticRenderFns,
|
|
98143
|
+
false,
|
|
98144
|
+
null,
|
|
98145
|
+
null,
|
|
98146
|
+
null
|
|
98147
|
+
|
|
98148
|
+
)
|
|
98149
|
+
|
|
98150
|
+
/* harmony default export */ var ByCardSelector = (ByCardSelector_component.exports);
|
|
97694
98151
|
;// ./src/index.js
|
|
97695
98152
|
|
|
97696
98153
|
|
|
@@ -97716,6 +98173,7 @@ var ByCardView_component = normalizeComponent(
|
|
|
97716
98173
|
|
|
97717
98174
|
|
|
97718
98175
|
|
|
98176
|
+
|
|
97719
98177
|
|
|
97720
98178
|
|
|
97721
98179
|
const components = {
|
|
@@ -97738,7 +98196,8 @@ const components = {
|
|
|
97738
98196
|
ByGridLayout: ByGridLayout,
|
|
97739
98197
|
ByCommonInput: ByCommonInput,
|
|
97740
98198
|
ByTag: ByTag,
|
|
97741
|
-
ByCardView: ByCardView
|
|
98199
|
+
ByCardView: ByCardView,
|
|
98200
|
+
ByCardSelector: ByCardSelector
|
|
97742
98201
|
};
|
|
97743
98202
|
|
|
97744
98203
|
// 设置当前 z-index 起始值
|