Skip to content

Commit

Permalink
Merge branch 'develop' into 20220805_fix_table
Browse files Browse the repository at this point in the history
  • Loading branch information
uyarn authored Aug 8, 2022
2 parents 5d559b3 + eb797b7 commit a60151c
Show file tree
Hide file tree
Showing 22 changed files with 1,221 additions and 1,320 deletions.
15 changes: 13 additions & 2 deletions examples/select/demos/creatable.vue
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,19 @@
v-model="value"
creatable
filterable
placeholder="支持自定义创建"
placeholder="单选支持自定义创建"
:options="options"
style="width: 200px;"
style="width: 200px; display: inline-block; margin: 0 20px 20px 0"
@create="createOptions"
/>
<t-select
v-model="value2"
creatable
filterable
multiple
placeholder="多选支持自定义创建"
:options="options"
style="width: 400px; display: inline-block"
@create="createOptions"
/>
</div>
Expand All @@ -22,6 +32,7 @@ export default {
{ label: '选项三', value: '3' },
],
value: '',
value2: [],
};
},
methods: {
Expand Down
18 changes: 5 additions & 13 deletions examples/select/demos/custom-options.vue
Original file line number Diff line number Diff line change
@@ -1,27 +1,21 @@
<template>
<div class='tdesign-demo-select-options'>

<div class="tdesign-demo-select-options">
<!-- 方式一:使用 options 自定义下拉选项内容 -->
<t-select
v-model="value1"
:options="optionsData"
:popupProps="{ overlayClassName: 'tdesign-demo-select__overlay-option' }"
placeholder="请选择"
/>
<br/><br/>
<br /><br />

<!-- 方式二:使用插槽自定义下拉选项内容 -->
<t-select
v-model="value2"
placeholder="请选择"
:popupProps="{ overlayClassName: 'tdesign-demo-select__overlay-option' }"
>
<t-option
v-for="item in options"
:value="item.value"
:label="item.label"
:key="item.value"
>
<t-option v-for="item in options" :value="item.value" :label="item.label" :key="item.value">
<div class="tdesign-demo__user-option">
<img src="https://tdesign.gtimg.com/site/avatar.jpg" />
<div class="tdesign-demo__user-option-info">
Expand All @@ -38,8 +32,8 @@
export default {
data() {
return {
value1: [],
value2: [],
value1: '',
value2: '',
options: [
{ label: '用户一', value: '1', description: '这是一段用户描述信息,可自定义内容' },
{ label: '用户二', value: '2', description: '这是一段用户描述信息,可自定义内容' },
Expand Down Expand Up @@ -79,7 +73,6 @@ export default {
</script>

<style>
.tdesign-demo__user-option {
display: flex;
}
Expand All @@ -101,5 +94,4 @@ export default {
.tdesign-demo-select__overlay-option .t-select-option {
height: 60px;
}
</style>
21 changes: 19 additions & 2 deletions examples/select/demos/custom-selected.vue
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,17 @@
<!-- 自定义选中项内容,valueDisplay 为 插槽(slot) -->
<t-select v-model="value2" :options="options" placeholder="请选择" multiple clearable>
<template #valueDisplay="{ value, onClose }">
<t-tag v-for="(item, index) in value" :key="index" :closable="true" :onClose="() => onClose(index)">
<t-tag
v-for="(item, index) in value"
:key="index"
:closable="true"
:onClose="
(context) => {
context.e && context.e.stopPropagation();
onClose(index);
}
"
>
{{ item.label }}({{ item.value[0].toUpperCase() }})
</t-tag>
</template>
Expand Down Expand Up @@ -45,7 +55,14 @@ export default {
valueDisplay(h, { value, onClose }) {
if (!(value instanceof Array)) return;
return value.map((item, index) => (
<t-tag key={index} closable={true} onClose={() => onClose(index)}>
<t-tag
key={index}
closable={true}
onClose={(context) => {
context.e && context.e.stopPropagation();
onClose(index);
}}
>
{item.label}({item.value[0].toUpperCase()})
</t-tag>
));
Expand Down
5 changes: 4 additions & 1 deletion examples/select/demos/group.vue
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,10 @@ export default {
options: [
{
group: '分组一',
children: [],
children: [
{ label: '选项一', value: 1 },
{ label: '选项二', value: 2 },
],
},
{
group: '分组二',
Expand Down
8 changes: 1 addition & 7 deletions examples/select/usage/props.json
Original file line number Diff line number Diff line change
Expand Up @@ -53,12 +53,6 @@
"defaultValue": false,
"options": []
},
{
"name": "popupVisible",
"type": "Boolean",
"defaultValue": false,
"options": []
},
{
"name": "readonly",
"type": "Boolean",
Expand Down Expand Up @@ -111,4 +105,4 @@
}
]
}
]
]
53 changes: 24 additions & 29 deletions src/pagination/pagination.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import mixins from '../utils/mixins';
import getConfigReceiverMixins, { PaginationConfig } from '../config-provider/config-receiver';
import TInputNumber from '../input-number';
import { Select, Option } from '../select';
import TInputAdornment from '../input-adornment';
import CLASSNAMES from '../utils/classnames';
import { renderTNodeJSX } from '../utils/render-tnode';
import props from './props';
Expand All @@ -39,6 +40,7 @@ export default mixins(getConfigReceiverMixins<Vue, PaginationConfig>('pagination
ChevronLeftDoubleIcon,
EllipsisIcon,
TInputNumber,
TInputAdornment,
TSelect: Select,
TOption: Option,
},
Expand Down Expand Up @@ -304,6 +306,25 @@ export default mixins(getConfigReceiverMixins<Vue, PaginationConfig>('pagination
},

render() {
const Jumper = (
<div class={this.jumperClass}>
{this.t(this.global.jumpTo)}
<t-input-adornment append={`/ ${this.pageCount} ${this.t(this.global.page)}`}>
<t-input-number
class={this.jumperInputClass}
v-model={this.jumpIndex}
onBlur={this.onJumperChange}
onEnter={this.onJumperChange}
max={this.pageCount}
min={min}
size={this.size}
theme="normal"
placeholder=""
/>
</t-input-adornment>
</div>
);

return (
<div class={this.paginationClass}>
{/* 数据统计区 */}
Expand Down Expand Up @@ -380,17 +401,7 @@ export default mixins(getConfigReceiverMixins<Vue, PaginationConfig>('pagination
</ul>
) : null}
{/* 极简版 */}
{this.showPageNumber && this.theme === 'simple' ? (
<t-select
size={this.size}
value={this.current}
disabled={this.disabled}
class={this.simpleClass}
onChange={this.toPage}
options={this.pageCountOption}
autoWidth={true}
/>
) : null}
{this.theme === 'simple' && Jumper}
{/* 向后按钮 */}
{this.showPreviousAndNextBtn ? (
<div
Expand All @@ -411,24 +422,8 @@ export default mixins(getConfigReceiverMixins<Vue, PaginationConfig>('pagination
<page-last-icon />
</div>
) : null}
{/* 跳转 */}
{this.showJumper ? (
<div class={this.jumperClass}>
{this.t(this.global.jumpTo)}
<t-input-number
class={this.jumperInputClass}
v-model={this.jumpIndex}
onBlur={this.onJumperChange}
onEnter={this.onJumperChange}
max={this.pageCount}
min={min}
size={this.size}
theme="normal"
placeholder=""
/>
{this.t(this.global.page)}
</div>
) : null}
{/* 快速跳转 */}
{this.theme === 'default' && this.showJumper && Jumper}
</div>
);
},
Expand Down
127 changes: 127 additions & 0 deletions src/select/hooks/useSelectOptions.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,127 @@
import {
ref, Ref, SetupContext, computed, onBeforeUpdate,
} from '@vue/composition-api';
import { VNode } from 'vue';
import get from 'lodash/get';
import isArray from 'lodash/isArray';
import {
TdSelectProps, SelectKeysType, TdOptionProps, SelectOptionGroup, SelectValue,
} from '../type';

type UniOption = (TdOptionProps | SelectOptionGroup) & {
index?: number;
slots?: () => VNode;
};

export default function useSelectOptions(props: TdSelectProps, context: SetupContext, keys: Ref<SelectKeysType>) {
const options = ref<UniOption[]>([]);

const getOptions = () => {
let dynamicIndex = 0;

// 解析 props 中 options 字段的配置,以此初始化 innerOptions
const innerOptions: UniOption[] = props.options.map((option) => {
const getFormatOption = (option: TdOptionProps) => {
const { value, label } = keys.value;
const res = {
...option,
index: dynamicIndex,
label: get(option, label),
value: get(option, value),
};
dynamicIndex += 1;
return res;
};
if ((option as SelectOptionGroup).group && (option as SelectOptionGroup).children) {
return {
...option,
children: (option as SelectOptionGroup).children.map((child) => getFormatOption(child)),
};
}
return getFormatOption(option);
});

// 处理 slots 中 t-option 与 t-option-group
const currentSlots = context.parent.$slots.default || [];
const optionsSlots = currentSlots.filter((item) => item.tag?.endsWith('TOption'));
const groupSlots = currentSlots.filter((item) => item.tag?.endsWith('TOptionGroup'));
if (isArray(groupSlots)) {
groupSlots.forEach((group) => {
const groupOption = {
group: (group.componentOptions.propsData as TdOptionProps)?.label,
...group.componentOptions.propsData,
children: [] as TdOptionProps[],
};

const res = group.componentOptions.children;
if (isArray(res)) {
res.forEach((child) => {
groupOption.children.push({
// 单独处理 style 和 class 参数的透传
class: child.data.staticClass,
style: child.data.staticStyle,
// 透传其他常规参数
...child.componentOptions.propsData,
slots: () => child.componentOptions.children,
index: dynamicIndex,
} as TdOptionProps);
dynamicIndex += 1;
});
}

innerOptions.push(groupOption);
});
}

if (isArray(optionsSlots)) {
optionsSlots.forEach((child) => {
innerOptions.push({
// 单独处理 style 和 class 参数的透传
class: child.data.staticClass,
style: child.data.staticStyle,
// 透传其他常规参数
...child.componentOptions.propsData,
slots: () => child.componentOptions.children,
index: dynamicIndex,
} as TdOptionProps);
dynamicIndex += 1;
});
}

options.value = innerOptions;
};

const optionsMap = computed(() => {
const res = new Map<SelectValue, TdOptionProps>();
optionsList.value.forEach((option: TdOptionProps) => {
res.set(option.value, option);
});
return res;
});

const optionsList = computed(() => {
const res: TdOptionProps[] = [];
const getOptionsList = (options: TdOptionProps[]) => {
options.forEach((option) => {
if ((option as SelectOptionGroup).group) {
getOptionsList((option as SelectOptionGroup).children);
} else {
res.push(option);
}
});
};
getOptionsList(options.value);
return res;
});

getOptions();
onBeforeUpdate(() => {
getOptions();
});

return {
options,
optionsMap,
optionsList,
};
}
Loading

0 comments on commit a60151c

Please sign in to comment.