@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
|
@@ -74273,6 +74273,7 @@ __webpack_require__.r(__webpack_exports__);
|
|
|
74273
74273
|
// EXPORTS
|
|
74274
74274
|
__webpack_require__.d(__webpack_exports__, {
|
|
74275
74275
|
ByBatchQuerySelector: function() { return /* reexport */ BatchQuerySelector; },
|
|
74276
|
+
ByCardSelector: function() { return /* reexport */ ByCardSelector; },
|
|
74276
74277
|
ByCardView: function() { return /* reexport */ ByCardView; },
|
|
74277
74278
|
ByCascaderPanel: function() { return /* reexport */ ByCascaderPanel; },
|
|
74278
74279
|
ByCommonInput: function() { return /* reexport */ ByCommonInput; },
|
|
@@ -91059,8 +91060,8 @@ var ByCommonSelector_component = normalizeComponent(
|
|
|
91059
91060
|
)
|
|
91060
91061
|
|
|
91061
91062
|
/* harmony default export */ var ByCommonSelector = (ByCommonSelector_component.exports);
|
|
91062
|
-
;// ./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-40.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=
|
|
91063
|
-
var
|
|
91063
|
+
;// ./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-40.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
|
|
91064
|
+
var BatchQuerySelectorvue_type_template_id_16c8bfda_render = function render() {
|
|
91064
91065
|
var _vm = this,
|
|
91065
91066
|
_c = _vm._self._c;
|
|
91066
91067
|
return _c('div', {
|
|
@@ -91099,12 +91100,25 @@ var BatchQuerySelectorvue_type_template_id_f93606a8_render = function render() {
|
|
|
91099
91100
|
}, [_vm._l(_vm.visibleOptions, function (item) {
|
|
91100
91101
|
return _c('el-option', {
|
|
91101
91102
|
key: item[_vm.valueKey],
|
|
91103
|
+
class: {
|
|
91104
|
+
'option-with-desc': _vm.hasDescContent(item)
|
|
91105
|
+
},
|
|
91102
91106
|
attrs: {
|
|
91103
91107
|
"label": item[_vm.labelKey],
|
|
91104
91108
|
"value": item[_vm.valueKey],
|
|
91105
91109
|
"disabled": _vm.isOptionDisabled(item)
|
|
91106
91110
|
}
|
|
91107
|
-
})
|
|
91111
|
+
}, [_vm.hasDescContent(item) ? [_c('span', {
|
|
91112
|
+
staticClass: "option-label",
|
|
91113
|
+
attrs: {
|
|
91114
|
+
"title": String(item[_vm.labelKey])
|
|
91115
|
+
}
|
|
91116
|
+
}, [_vm._v(_vm._s(item[_vm.labelKey]))]), _c('span', {
|
|
91117
|
+
staticClass: "option-desc",
|
|
91118
|
+
attrs: {
|
|
91119
|
+
"title": String(item[_vm.descKey])
|
|
91120
|
+
}
|
|
91121
|
+
}, [_vm._v(_vm._s(item[_vm.descKey]))])] : _vm._e()], 2);
|
|
91108
91122
|
}), _vm.hasMoreOptions ? _c('el-option', {
|
|
91109
91123
|
staticClass: "load-more-option",
|
|
91110
91124
|
attrs: {
|
|
@@ -91218,7 +91232,7 @@ var BatchQuerySelectorvue_type_template_id_f93606a8_render = function render() {
|
|
|
91218
91232
|
}
|
|
91219
91233
|
})])], 1) : _vm._e()], 1)]);
|
|
91220
91234
|
};
|
|
91221
|
-
var
|
|
91235
|
+
var BatchQuerySelectorvue_type_template_id_16c8bfda_staticRenderFns = [];
|
|
91222
91236
|
|
|
91223
91237
|
;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.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
|
|
91224
91238
|
|
|
@@ -91266,6 +91280,22 @@ var BatchQuerySelectorvue_type_template_id_f93606a8_staticRenderFns = [];
|
|
|
91266
91280
|
type: String,
|
|
91267
91281
|
default: 'name'
|
|
91268
91282
|
},
|
|
91283
|
+
/**
|
|
91284
|
+
* 描述字段名
|
|
91285
|
+
* 配置后,下拉选项会在名称右侧展示该字段对应的描述内容;
|
|
91286
|
+
* 该字段默认不参与搜索匹配,如需让描述参与搜索,请将字段名同时加入 extraSearchKeys
|
|
91287
|
+
*/
|
|
91288
|
+
descKey: {
|
|
91289
|
+
type: String,
|
|
91290
|
+
default: 'desc'
|
|
91291
|
+
},
|
|
91292
|
+
/**
|
|
91293
|
+
* 下拉搜索时除 labelKey、valueKey 外额外参与匹配的字段名(不填则与原先一致,仅搜标签与值)
|
|
91294
|
+
*/
|
|
91295
|
+
extraSearchKeys: {
|
|
91296
|
+
type: Array,
|
|
91297
|
+
default: () => []
|
|
91298
|
+
},
|
|
91269
91299
|
// 禁用字段名,用于判断选项是否禁用
|
|
91270
91300
|
disabledKey: {
|
|
91271
91301
|
type: String,
|
|
@@ -91386,6 +91416,11 @@ var BatchQuerySelectorvue_type_template_id_f93606a8_staticRenderFns = [];
|
|
|
91386
91416
|
// 是否还有更多选项
|
|
91387
91417
|
hasMoreOptions() {
|
|
91388
91418
|
return this.visibleOptions.length < this.filteredOptions.length;
|
|
91419
|
+
},
|
|
91420
|
+
/** 本地过滤时参与「包含」匹配的字段(始终包含 labelKey、valueKey,再并上 extraSearchKeys) */
|
|
91421
|
+
searchFieldKeys() {
|
|
91422
|
+
const extras = Array.isArray(this.extraSearchKeys) ? this.extraSearchKeys.filter(k => typeof k === 'string' && k.trim() !== '') : [];
|
|
91423
|
+
return [...new Set([this.labelKey, this.valueKey, ...extras])];
|
|
91389
91424
|
}
|
|
91390
91425
|
},
|
|
91391
91426
|
watch: {
|
|
@@ -91425,6 +91460,12 @@ var BatchQuerySelectorvue_type_template_id_f93606a8_staticRenderFns = [];
|
|
|
91425
91460
|
}
|
|
91426
91461
|
},
|
|
91427
91462
|
methods: {
|
|
91463
|
+
// 判断选项是否有可展示的描述内容
|
|
91464
|
+
hasDescContent(option) {
|
|
91465
|
+
if (!this.descKey) return false;
|
|
91466
|
+
const val = option[this.descKey];
|
|
91467
|
+
return val !== undefined && val !== null && String(val).trim() !== '';
|
|
91468
|
+
},
|
|
91428
91469
|
// 判断选项是否禁用
|
|
91429
91470
|
isOptionDisabled(option) {
|
|
91430
91471
|
// 如果提供了自定义禁用方法,则使用自定义方法判断
|
|
@@ -91583,13 +91624,9 @@ var BatchQuerySelectorvue_type_template_id_f93606a8_staticRenderFns = [];
|
|
|
91583
91624
|
clearTimeout(this.debounceTimer);
|
|
91584
91625
|
this.debounceTimer = setTimeout(() => {
|
|
91585
91626
|
if (query) {
|
|
91586
|
-
|
|
91587
|
-
|
|
91588
|
-
|
|
91589
|
-
const value = String(item[this.valueKey]).toLowerCase();
|
|
91590
|
-
const lowercaseQuery = query.toLowerCase();
|
|
91591
|
-
return label.includes(lowercaseQuery) || value.includes(lowercaseQuery);
|
|
91592
|
-
});
|
|
91627
|
+
const lowercaseQuery = query.toLowerCase();
|
|
91628
|
+
const keys = this.searchFieldKeys;
|
|
91629
|
+
this.filteredOptions = this.optionsList.filter(item => keys.some(key => String(item[key]).toLowerCase().includes(lowercaseQuery)));
|
|
91593
91630
|
} else {
|
|
91594
91631
|
// 如果没有搜索关键词,显示所有选项
|
|
91595
91632
|
this.filteredOptions = [...this.optionsList];
|
|
@@ -91642,28 +91679,20 @@ var BatchQuerySelectorvue_type_template_id_f93606a8_staticRenderFns = [];
|
|
|
91642
91679
|
// 获取匹配的完整选项对象
|
|
91643
91680
|
matchedItems = this.optionsList.filter(item => matchedValues.includes(item[this.valueKey]));
|
|
91644
91681
|
} else {
|
|
91645
|
-
//
|
|
91682
|
+
// 默认映射逻辑:ID 和 名称 均采用精确匹配(忽略大小写、忽略首尾空白)
|
|
91646
91683
|
const searchKey = this.inputType === 'id' ? this.valueKey : this.labelKey;
|
|
91647
91684
|
|
|
91648
|
-
//
|
|
91685
|
+
// 从完整的 optionsList 中查找精确命中的项
|
|
91649
91686
|
matchedItems = this.optionsList.filter(item => {
|
|
91650
91687
|
// 排除禁用的选项
|
|
91651
91688
|
if (this.isOptionDisabled(item)) {
|
|
91652
91689
|
return false;
|
|
91653
91690
|
}
|
|
91654
|
-
|
|
91691
|
+
const itemVal = String(item[searchKey]).trim().toLowerCase();
|
|
91692
|
+
return inputValues.some(input => itemVal === String(input).trim().toLowerCase());
|
|
91655
91693
|
});
|
|
91656
91694
|
|
|
91657
|
-
//
|
|
91658
|
-
matchedValues = matchedItems.map(item => item[this.valueKey]);
|
|
91659
|
-
}
|
|
91660
|
-
|
|
91661
|
-
// 如果没有匹配项,尝试进行模糊匹配
|
|
91662
|
-
if (matchedValues.length === 0 && this.inputType === 'name') {
|
|
91663
|
-
matchedItems = this.optionsList.filter(item => {
|
|
91664
|
-
if (this.isOptionDisabled(item)) return false;
|
|
91665
|
-
return inputValues.some(input => String(item[this.labelKey]).toLowerCase().includes(String(input).toLowerCase()));
|
|
91666
|
-
});
|
|
91695
|
+
// 提取值
|
|
91667
91696
|
matchedValues = matchedItems.map(item => item[this.valueKey]);
|
|
91668
91697
|
}
|
|
91669
91698
|
|
|
@@ -91735,8 +91764,8 @@ var BatchQuerySelectorvue_type_template_id_f93606a8_staticRenderFns = [];
|
|
|
91735
91764
|
;
|
|
91736
91765
|
var BatchQuerySelector_component = normalizeComponent(
|
|
91737
91766
|
batch_query_selector_BatchQuerySelectorvue_type_script_lang_js,
|
|
91738
|
-
|
|
91739
|
-
|
|
91767
|
+
BatchQuerySelectorvue_type_template_id_16c8bfda_render,
|
|
91768
|
+
BatchQuerySelectorvue_type_template_id_16c8bfda_staticRenderFns,
|
|
91740
91769
|
false,
|
|
91741
91770
|
null,
|
|
91742
91771
|
null,
|
|
@@ -97681,6 +97710,434 @@ var ByCardView_component = normalizeComponent(
|
|
|
97681
97710
|
)
|
|
97682
97711
|
|
|
97683
97712
|
/* harmony default export */ var ByCardView = (ByCardView_component.exports);
|
|
97713
|
+
;// ./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-40.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
|
|
97714
|
+
var ByCardSelectorvue_type_template_id_293b51e4_render = function render() {
|
|
97715
|
+
var _vm = this,
|
|
97716
|
+
_c = _vm._self._c;
|
|
97717
|
+
return _c('div', {
|
|
97718
|
+
staticClass: "by-card-selector",
|
|
97719
|
+
class: [`by-card-selector--size-${_vm.size}`, `by-card-selector--direction-${_vm.direction}`, {
|
|
97720
|
+
'is-disabled': _vm.disabled,
|
|
97721
|
+
'by-card-selector--no-check': !_vm.showCheckmark
|
|
97722
|
+
}],
|
|
97723
|
+
style: _vm.directionStyle,
|
|
97724
|
+
attrs: {
|
|
97725
|
+
"role": "listbox",
|
|
97726
|
+
"aria-multiselectable": _vm.multiple ? 'true' : 'false'
|
|
97727
|
+
}
|
|
97728
|
+
}, _vm._l(_vm.options, function (item, index) {
|
|
97729
|
+
return _c('div', {
|
|
97730
|
+
key: _vm.optionKey(item, index),
|
|
97731
|
+
staticClass: "by-card-selector__card",
|
|
97732
|
+
class: {
|
|
97733
|
+
'is-selected': _vm.isSelected(item),
|
|
97734
|
+
'is-disabled': _vm.isItemDisabled(item),
|
|
97735
|
+
'is-focusable': !_vm.isItemDisabled(item)
|
|
97736
|
+
},
|
|
97737
|
+
attrs: {
|
|
97738
|
+
"role": "option",
|
|
97739
|
+
"aria-selected": _vm.isSelected(item) ? 'true' : 'false',
|
|
97740
|
+
"aria-disabled": _vm.isItemDisabled(item) ? 'true' : 'false',
|
|
97741
|
+
"tabindex": _vm.cardTabindex(item, index)
|
|
97742
|
+
},
|
|
97743
|
+
on: {
|
|
97744
|
+
"click": function ($event) {
|
|
97745
|
+
return _vm.onCardClick(item, index);
|
|
97746
|
+
},
|
|
97747
|
+
"focus": function ($event) {
|
|
97748
|
+
return _vm.onCardFocus(index);
|
|
97749
|
+
},
|
|
97750
|
+
"keydown": function ($event) {
|
|
97751
|
+
return _vm.onCardKeydown($event, index);
|
|
97752
|
+
}
|
|
97753
|
+
}
|
|
97754
|
+
}, [_vm._t("card", function () {
|
|
97755
|
+
return [_c('div', {
|
|
97756
|
+
staticClass: "by-card-selector__card-inner"
|
|
97757
|
+
}, [_vm.hasIconArea(item) ? _c('div', {
|
|
97758
|
+
staticClass: "by-card-selector__icon-wrap"
|
|
97759
|
+
}, [_vm._t("icon", function () {
|
|
97760
|
+
return [_vm.iconIsImage(item) ? _c('img', {
|
|
97761
|
+
staticClass: "by-card-selector__icon-img",
|
|
97762
|
+
attrs: {
|
|
97763
|
+
"src": _vm.rawIcon(item),
|
|
97764
|
+
"alt": ""
|
|
97765
|
+
}
|
|
97766
|
+
}) : _vm.rawIcon(item) ? _c('i', {
|
|
97767
|
+
class: ['by-card-selector__icon-el', _vm.rawIcon(item)]
|
|
97768
|
+
}) : _c('div', {
|
|
97769
|
+
staticClass: "by-card-selector__icon-placeholder"
|
|
97770
|
+
}, [_c('span', {
|
|
97771
|
+
staticClass: "by-card-selector__icon-placeholder-text"
|
|
97772
|
+
}, [_vm._v(_vm._s(_vm.iconFallbackLetter(item)))])])];
|
|
97773
|
+
}, {
|
|
97774
|
+
"item": item,
|
|
97775
|
+
"index": index
|
|
97776
|
+
})], 2) : _vm._e(), _c('div', {
|
|
97777
|
+
staticClass: "by-card-selector__main"
|
|
97778
|
+
}, [_c('div', {
|
|
97779
|
+
staticClass: "by-card-selector__title-row"
|
|
97780
|
+
}, [_c('span', {
|
|
97781
|
+
staticClass: "by-card-selector__title"
|
|
97782
|
+
}, [_vm._v(_vm._s(_vm.optionLabel(item)))]), _vm.optionTooltip(item) ? _c('el-tooltip', {
|
|
97783
|
+
attrs: {
|
|
97784
|
+
"content": String(_vm.optionTooltip(item)),
|
|
97785
|
+
"placement": "top",
|
|
97786
|
+
"open-delay": 300
|
|
97787
|
+
}
|
|
97788
|
+
}, [_c('span', {
|
|
97789
|
+
staticClass: "by-card-selector__help",
|
|
97790
|
+
on: {
|
|
97791
|
+
"click": function ($event) {
|
|
97792
|
+
$event.stopPropagation();
|
|
97793
|
+
}
|
|
97794
|
+
}
|
|
97795
|
+
}, [_c('i', {
|
|
97796
|
+
staticClass: "el-icon-question"
|
|
97797
|
+
})])]) : _vm._e()], 1), _vm.optionDescription(item) ? _c('p', {
|
|
97798
|
+
staticClass: "by-card-selector__desc"
|
|
97799
|
+
}, [_vm._v(" " + _vm._s(_vm.optionDescription(item)) + " ")]) : _vm._e(), _vm.visibleTags(item).length || _vm.tagOverflowCount(item) > 0 ? _c('div', {
|
|
97800
|
+
staticClass: "by-card-selector__tags"
|
|
97801
|
+
}, [_vm._l(_vm.visibleTags(item), function (tag, ti) {
|
|
97802
|
+
return _c('el-tag', {
|
|
97803
|
+
key: ti,
|
|
97804
|
+
staticClass: "by-card-selector__tag",
|
|
97805
|
+
attrs: {
|
|
97806
|
+
"size": "mini",
|
|
97807
|
+
"type": "info",
|
|
97808
|
+
"effect": "plain"
|
|
97809
|
+
}
|
|
97810
|
+
}, [_vm._v(" " + _vm._s(_vm.formatTag(tag)) + " ")]);
|
|
97811
|
+
}), _vm.tagOverflowCount(item) > 0 ? _c('el-tag', {
|
|
97812
|
+
staticClass: "by-card-selector__tag by-card-selector__tag--more",
|
|
97813
|
+
attrs: {
|
|
97814
|
+
"size": "mini",
|
|
97815
|
+
"type": "info",
|
|
97816
|
+
"effect": "plain"
|
|
97817
|
+
}
|
|
97818
|
+
}, [_vm._v(" +" + _vm._s(_vm.tagOverflowCount(item)) + " ")]) : _vm._e()], 2) : _vm._e()]), _vm.showCheckmark ? _c('div', {
|
|
97819
|
+
staticClass: "by-card-selector__check",
|
|
97820
|
+
attrs: {
|
|
97821
|
+
"aria-hidden": "true"
|
|
97822
|
+
}
|
|
97823
|
+
}, [_vm.isSelected(item) ? _c('i', {
|
|
97824
|
+
staticClass: "el-icon-check by-card-selector__check-icon"
|
|
97825
|
+
}) : _vm._e()]) : _vm._e()])];
|
|
97826
|
+
}, {
|
|
97827
|
+
"item": item,
|
|
97828
|
+
"index": index,
|
|
97829
|
+
"selected": _vm.isSelected(item),
|
|
97830
|
+
"disabled": _vm.isItemDisabled(item)
|
|
97831
|
+
})], 2);
|
|
97832
|
+
}), 0);
|
|
97833
|
+
};
|
|
97834
|
+
var ByCardSelectorvue_type_template_id_293b51e4_staticRenderFns = [];
|
|
97835
|
+
|
|
97836
|
+
;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.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
|
|
97837
|
+
|
|
97838
|
+
|
|
97839
|
+
|
|
97840
|
+
|
|
97841
|
+
|
|
97842
|
+
const DEFAULT_OPTION_PROPS = () => ({
|
|
97843
|
+
value: 'value',
|
|
97844
|
+
label: 'label',
|
|
97845
|
+
description: 'description',
|
|
97846
|
+
icon: 'icon',
|
|
97847
|
+
tooltip: 'tooltip',
|
|
97848
|
+
tags: 'tags'
|
|
97849
|
+
});
|
|
97850
|
+
|
|
97851
|
+
/**
|
|
97852
|
+
* 卡片选择器:单选/多选 + 卡片式布局,行为类似 el-radio-group / el-checkbox-group。
|
|
97853
|
+
*
|
|
97854
|
+
* @example
|
|
97855
|
+
* <by-card-selector v-model="id" :options="list" />
|
|
97856
|
+
* <by-card-selector v-model="ids" :options="list" multiple />
|
|
97857
|
+
*/
|
|
97858
|
+
/* harmony default export */ var ByCardSelectorvue_type_script_lang_js = ({
|
|
97859
|
+
name: 'ByCardSelector',
|
|
97860
|
+
props: {
|
|
97861
|
+
/** v-model:单选为选项 value;多选为 value 数组 */
|
|
97862
|
+
value: {
|
|
97863
|
+
type: [String, Number, Boolean, Object, Array],
|
|
97864
|
+
default: null
|
|
97865
|
+
},
|
|
97866
|
+
options: {
|
|
97867
|
+
type: Array,
|
|
97868
|
+
default: () => []
|
|
97869
|
+
},
|
|
97870
|
+
/** 是否多选 */
|
|
97871
|
+
multiple: {
|
|
97872
|
+
type: Boolean,
|
|
97873
|
+
default: false
|
|
97874
|
+
},
|
|
97875
|
+
/** 排列方向:横向(默认)或纵向;纵向时建议配合 verticalMaxHeight 以产生换列效果 */
|
|
97876
|
+
direction: {
|
|
97877
|
+
type: String,
|
|
97878
|
+
default: 'horizontal',
|
|
97879
|
+
validator: v => ['horizontal', 'vertical'].includes(v)
|
|
97880
|
+
},
|
|
97881
|
+
/** 纵向排列时容器最大高度,便于 flex 换列;仅 direction=vertical 时生效 */
|
|
97882
|
+
verticalMaxHeight: {
|
|
97883
|
+
type: String,
|
|
97884
|
+
default: '320px'
|
|
97885
|
+
},
|
|
97886
|
+
/** 卡片尺寸 */
|
|
97887
|
+
size: {
|
|
97888
|
+
type: String,
|
|
97889
|
+
default: 'default',
|
|
97890
|
+
validator: v => ['large', 'default', 'small'].includes(v)
|
|
97891
|
+
},
|
|
97892
|
+
/** 整组禁用 */
|
|
97893
|
+
disabled: {
|
|
97894
|
+
type: Boolean,
|
|
97895
|
+
default: false
|
|
97896
|
+
},
|
|
97897
|
+
/** 选项字段映射,默认 value / label / description / icon / tooltip / tags */
|
|
97898
|
+
optionProps: {
|
|
97899
|
+
type: Object,
|
|
97900
|
+
default: () => ({})
|
|
97901
|
+
},
|
|
97902
|
+
/** 用于判断禁用的数据字段,默认 disabled;数值类型时 1 为可选,非 1 为不可选;布尔 true 为禁用 */
|
|
97903
|
+
disabledField: {
|
|
97904
|
+
type: String,
|
|
97905
|
+
default: 'disabled'
|
|
97906
|
+
},
|
|
97907
|
+
/** 选项唯一键字段,用于 :key,默认与 value 字段一致 */
|
|
97908
|
+
optionKeyField: {
|
|
97909
|
+
type: String,
|
|
97910
|
+
default: ''
|
|
97911
|
+
},
|
|
97912
|
+
/** 标签最多展示个数,其余以 +N 省略 */
|
|
97913
|
+
maxVisibleTags: {
|
|
97914
|
+
type: Number,
|
|
97915
|
+
default: 3
|
|
97916
|
+
},
|
|
97917
|
+
/** 是否在卡片右侧展示圆形打钩选中指示,默认展示 */
|
|
97918
|
+
showCheckmark: {
|
|
97919
|
+
type: Boolean,
|
|
97920
|
+
default: true
|
|
97921
|
+
}
|
|
97922
|
+
},
|
|
97923
|
+
data() {
|
|
97924
|
+
return {
|
|
97925
|
+
focusedIndex: 0
|
|
97926
|
+
};
|
|
97927
|
+
},
|
|
97928
|
+
computed: {
|
|
97929
|
+
mergedOptionProps() {
|
|
97930
|
+
return {
|
|
97931
|
+
...DEFAULT_OPTION_PROPS(),
|
|
97932
|
+
...this.optionProps
|
|
97933
|
+
};
|
|
97934
|
+
},
|
|
97935
|
+
keyField() {
|
|
97936
|
+
return this.optionKeyField || this.mergedOptionProps.value;
|
|
97937
|
+
},
|
|
97938
|
+
directionStyle() {
|
|
97939
|
+
if (this.direction !== 'vertical') return {};
|
|
97940
|
+
return {
|
|
97941
|
+
maxHeight: this.verticalMaxHeight
|
|
97942
|
+
};
|
|
97943
|
+
}
|
|
97944
|
+
},
|
|
97945
|
+
watch: {
|
|
97946
|
+
options: {
|
|
97947
|
+
handler(list) {
|
|
97948
|
+
if (!Array.isArray(list) || list.length === 0) {
|
|
97949
|
+
this.focusedIndex = 0;
|
|
97950
|
+
return;
|
|
97951
|
+
}
|
|
97952
|
+
if (this.focusedIndex >= list.length) this.focusedIndex = list.length - 1;
|
|
97953
|
+
this.$nextTick(() => this.syncFocusedToFirstEnabled());
|
|
97954
|
+
},
|
|
97955
|
+
deep: true
|
|
97956
|
+
}
|
|
97957
|
+
},
|
|
97958
|
+
methods: {
|
|
97959
|
+
pick(obj, key) {
|
|
97960
|
+
if (obj == null || key == null || key === '') return undefined;
|
|
97961
|
+
return obj[key];
|
|
97962
|
+
},
|
|
97963
|
+
optionKey(item, index) {
|
|
97964
|
+
const v = this.pick(item, this.keyField);
|
|
97965
|
+
if (v !== undefined && v !== null) return v;
|
|
97966
|
+
return index;
|
|
97967
|
+
},
|
|
97968
|
+
optionValue(item) {
|
|
97969
|
+
return this.pick(item, this.mergedOptionProps.value);
|
|
97970
|
+
},
|
|
97971
|
+
optionLabel(item) {
|
|
97972
|
+
const v = this.pick(item, this.mergedOptionProps.label);
|
|
97973
|
+
return v != null && v !== '' ? String(v) : '';
|
|
97974
|
+
},
|
|
97975
|
+
optionDescription(item) {
|
|
97976
|
+
const v = this.pick(item, this.mergedOptionProps.description);
|
|
97977
|
+
return v != null && v !== '' ? String(v) : '';
|
|
97978
|
+
},
|
|
97979
|
+
rawIcon(item) {
|
|
97980
|
+
return this.pick(item, this.mergedOptionProps.icon);
|
|
97981
|
+
},
|
|
97982
|
+
optionTooltip(item) {
|
|
97983
|
+
const v = this.pick(item, this.mergedOptionProps.tooltip);
|
|
97984
|
+
if (v == null || v === '') return '';
|
|
97985
|
+
return v;
|
|
97986
|
+
},
|
|
97987
|
+
rawTags(item) {
|
|
97988
|
+
const raw = this.pick(item, this.mergedOptionProps.tags);
|
|
97989
|
+
if (Array.isArray(raw)) return raw;
|
|
97990
|
+
return [];
|
|
97991
|
+
},
|
|
97992
|
+
iconIsImage(item) {
|
|
97993
|
+
const s = this.rawIcon(item);
|
|
97994
|
+
if (typeof s !== 'string') return false;
|
|
97995
|
+
return /^https?:\/\//i.test(s) || /^data:image\//i.test(s) || /\.(png|jpe?g|gif|webp|svg)(\?|$)/i.test(s);
|
|
97996
|
+
},
|
|
97997
|
+
hasIconArea(item) {
|
|
97998
|
+
return Boolean(this.rawIcon(item)) || Boolean(this.$scopedSlots && this.$scopedSlots.icon);
|
|
97999
|
+
},
|
|
98000
|
+
iconFallbackLetter(item) {
|
|
98001
|
+
const t = this.optionLabel(item);
|
|
98002
|
+
return t ? t.trim().charAt(0).toUpperCase() : '?';
|
|
98003
|
+
},
|
|
98004
|
+
formatTag(tag) {
|
|
98005
|
+
if (tag == null) return '';
|
|
98006
|
+
if (typeof tag === 'string' || typeof tag === 'number') return String(tag);
|
|
98007
|
+
if (typeof tag === 'object' && tag.label != null) return String(tag.label);
|
|
98008
|
+
if (typeof tag === 'object' && tag.text != null) return String(tag.text);
|
|
98009
|
+
return String(tag);
|
|
98010
|
+
},
|
|
98011
|
+
visibleTags(item) {
|
|
98012
|
+
const tags = this.rawTags(item);
|
|
98013
|
+
const max = Math.max(0, this.maxVisibleTags);
|
|
98014
|
+
return tags.slice(0, max);
|
|
98015
|
+
},
|
|
98016
|
+
tagOverflowCount(item) {
|
|
98017
|
+
const tags = this.rawTags(item);
|
|
98018
|
+
const max = Math.max(0, this.maxVisibleTags);
|
|
98019
|
+
return tags.length > max ? tags.length - max : 0;
|
|
98020
|
+
},
|
|
98021
|
+
isItemDisabled(item) {
|
|
98022
|
+
if (this.disabled) return true;
|
|
98023
|
+
const field = this.disabledField;
|
|
98024
|
+
if (!field || !Object.prototype.hasOwnProperty.call(item, field)) return false;
|
|
98025
|
+
const v = item[field];
|
|
98026
|
+
if (typeof v === 'number') return v !== 1;
|
|
98027
|
+
if (typeof v === 'boolean') return v === true;
|
|
98028
|
+
return Boolean(v);
|
|
98029
|
+
},
|
|
98030
|
+
valuesEqual(a, b) {
|
|
98031
|
+
return a === b || Number.isNaN(a) && Number.isNaN(b);
|
|
98032
|
+
},
|
|
98033
|
+
isSelected(item) {
|
|
98034
|
+
const val = this.optionValue(item);
|
|
98035
|
+
if (this.multiple) {
|
|
98036
|
+
const list = Array.isArray(this.value) ? this.value : [];
|
|
98037
|
+
return list.some(v => this.valuesEqual(v, val));
|
|
98038
|
+
}
|
|
98039
|
+
return this.valuesEqual(this.value, val);
|
|
98040
|
+
},
|
|
98041
|
+
cardTabindex(item, index) {
|
|
98042
|
+
if (this.isItemDisabled(item)) return -1;
|
|
98043
|
+
return this.focusedIndex === index ? 0 : -1;
|
|
98044
|
+
},
|
|
98045
|
+
emitChange(next) {
|
|
98046
|
+
this.$emit('input', next);
|
|
98047
|
+
this.$emit('change', next);
|
|
98048
|
+
},
|
|
98049
|
+
toggleItem(item) {
|
|
98050
|
+
if (this.isItemDisabled(item)) return;
|
|
98051
|
+
const val = this.optionValue(item);
|
|
98052
|
+
if (this.multiple) {
|
|
98053
|
+
const list = Array.isArray(this.value) ? [...this.value] : [];
|
|
98054
|
+
const i = list.findIndex(v => this.valuesEqual(v, val));
|
|
98055
|
+
if (i >= 0) list.splice(i, 1);else list.push(val);
|
|
98056
|
+
this.emitChange(list);
|
|
98057
|
+
} else if (!this.valuesEqual(this.value, val)) {
|
|
98058
|
+
this.emitChange(val);
|
|
98059
|
+
}
|
|
98060
|
+
},
|
|
98061
|
+
onCardClick(item, index) {
|
|
98062
|
+
if (!this.isItemDisabled(item)) this.focusedIndex = index;
|
|
98063
|
+
this.toggleItem(item);
|
|
98064
|
+
},
|
|
98065
|
+
onCardFocus(index) {
|
|
98066
|
+
if (!this.isItemDisabled(this.options[index])) this.focusedIndex = index;
|
|
98067
|
+
},
|
|
98068
|
+
enabledOptionIndices() {
|
|
98069
|
+
return this.options.map((it, i) => this.isItemDisabled(it) ? -1 : i).filter(i => i >= 0);
|
|
98070
|
+
},
|
|
98071
|
+
focusCardAtIndex(index) {
|
|
98072
|
+
this.focusedIndex = index;
|
|
98073
|
+
this.$nextTick(() => {
|
|
98074
|
+
const nodes = this.$el && this.$el.querySelectorAll('.by-card-selector__card');
|
|
98075
|
+
const el = nodes && nodes[index];
|
|
98076
|
+
if (el && typeof el.focus === 'function') el.focus();
|
|
98077
|
+
});
|
|
98078
|
+
},
|
|
98079
|
+
moveFocus(delta) {
|
|
98080
|
+
const enabled = this.enabledOptionIndices();
|
|
98081
|
+
if (!enabled.length) return;
|
|
98082
|
+
let pos = enabled.indexOf(this.focusedIndex);
|
|
98083
|
+
if (pos < 0) pos = 0;
|
|
98084
|
+
pos = (pos + delta + enabled.length) % enabled.length;
|
|
98085
|
+
this.focusCardAtIndex(enabled[pos]);
|
|
98086
|
+
},
|
|
98087
|
+
onCardKeydown(e, index) {
|
|
98088
|
+
if (this.disabled || !this.options.length) return;
|
|
98089
|
+
if (this.isItemDisabled(this.options[index])) return;
|
|
98090
|
+
if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
|
|
98091
|
+
e.preventDefault();
|
|
98092
|
+
this.moveFocus(1);
|
|
98093
|
+
return;
|
|
98094
|
+
}
|
|
98095
|
+
if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
|
|
98096
|
+
e.preventDefault();
|
|
98097
|
+
this.moveFocus(-1);
|
|
98098
|
+
return;
|
|
98099
|
+
}
|
|
98100
|
+
if (e.key === ' ' || e.key === 'Enter') {
|
|
98101
|
+
e.preventDefault();
|
|
98102
|
+
const item = this.options[this.focusedIndex];
|
|
98103
|
+
if (item && !this.isItemDisabled(item)) this.toggleItem(item);
|
|
98104
|
+
}
|
|
98105
|
+
},
|
|
98106
|
+
syncFocusedToFirstEnabled() {
|
|
98107
|
+
const enabled = this.enabledOptionIndices();
|
|
98108
|
+
if (!enabled.length) {
|
|
98109
|
+
this.focusedIndex = 0;
|
|
98110
|
+
return;
|
|
98111
|
+
}
|
|
98112
|
+
if (enabled.indexOf(this.focusedIndex) < 0) this.focusedIndex = enabled[0];
|
|
98113
|
+
}
|
|
98114
|
+
},
|
|
98115
|
+
created() {
|
|
98116
|
+
this.syncFocusedToFirstEnabled();
|
|
98117
|
+
}
|
|
98118
|
+
});
|
|
98119
|
+
;// ./src/components/card-selector/ByCardSelector.vue?vue&type=script&lang=js
|
|
98120
|
+
/* harmony default export */ var card_selector_ByCardSelectorvue_type_script_lang_js = (ByCardSelectorvue_type_script_lang_js);
|
|
98121
|
+
;// ./src/components/card-selector/ByCardSelector.vue
|
|
98122
|
+
|
|
98123
|
+
|
|
98124
|
+
|
|
98125
|
+
|
|
98126
|
+
|
|
98127
|
+
/* normalize component */
|
|
98128
|
+
;
|
|
98129
|
+
var ByCardSelector_component = normalizeComponent(
|
|
98130
|
+
card_selector_ByCardSelectorvue_type_script_lang_js,
|
|
98131
|
+
ByCardSelectorvue_type_template_id_293b51e4_render,
|
|
98132
|
+
ByCardSelectorvue_type_template_id_293b51e4_staticRenderFns,
|
|
98133
|
+
false,
|
|
98134
|
+
null,
|
|
98135
|
+
null,
|
|
98136
|
+
null
|
|
98137
|
+
|
|
98138
|
+
)
|
|
98139
|
+
|
|
98140
|
+
/* harmony default export */ var ByCardSelector = (ByCardSelector_component.exports);
|
|
97684
98141
|
;// ./src/index.js
|
|
97685
98142
|
|
|
97686
98143
|
|
|
@@ -97706,6 +98163,7 @@ var ByCardView_component = normalizeComponent(
|
|
|
97706
98163
|
|
|
97707
98164
|
|
|
97708
98165
|
|
|
98166
|
+
|
|
97709
98167
|
|
|
97710
98168
|
|
|
97711
98169
|
const components = {
|
|
@@ -97728,7 +98186,8 @@ const components = {
|
|
|
97728
98186
|
ByGridLayout: ByGridLayout,
|
|
97729
98187
|
ByCommonInput: ByCommonInput,
|
|
97730
98188
|
ByTag: ByTag,
|
|
97731
|
-
ByCardView: ByCardView
|
|
98189
|
+
ByCardView: ByCardView,
|
|
98190
|
+
ByCardSelector: ByCardSelector
|
|
97732
98191
|
};
|
|
97733
98192
|
|
|
97734
98193
|
// 设置当前 z-index 起始值
|