Skip to content

Commit

Permalink
Merge branch 'main' of https://github.com/WeBankFinTech/fes-design
Browse files Browse the repository at this point in the history
  • Loading branch information
@winixt
winixt committed Dec 23, 2021
2 parents 30a946d + d6478b4 commit 6d88f3f
Show file tree
Hide file tree
Showing 19 changed files with 458 additions and 271 deletions.
2 changes: 2 additions & 0 deletions components/popper/useTrigger.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,8 @@ export default function useTrigger(
};

const popperEventsHandler = (e, t) => {
// 不是用户触发的行为
e.stopPropagation();
switch (e.type) {
case 'click': {
if (t === 'contextmenu') {
Expand Down
109 changes: 79 additions & 30 deletions components/select-tree/selectTree.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
>
<template #trigger>
<SelectTrigger
ref="triggerRef"
:selectedOptions="selectedOptions"
:disabled="disabled"
:clearable="clearable"
Expand All @@ -30,7 +31,10 @@
/>
</template>
<template #default>
<Scrollbar :containerClass="`${prefixCls}-dropdown`">
<Scrollbar
:containerStyle="dropdownStyle"
:containerClass="`${prefixCls}-dropdown`"
>
<Tree
v-show="data.length"
ref="refTree"
Expand All @@ -43,6 +47,7 @@
:selectable="treeSelectable"
:checkable="treeCheckable"
:checkStrictly="checkStrictly"
:cascade="cascade"
:multiple="multiple"
:childrenField="childrenField"
:valueField="valueField"
Expand All @@ -51,8 +56,8 @@
:inline="inline"
:remote="remote"
:loadData="loadData"
@update:selectedKeys="handleSelect"
@update:checkedKeys="handleSelect"
@select="handleSelect"
@check="handleCheck"
></Tree>
<div v-show="!data.length" :class="`${prefixCls}-null`">
{{ emptyText }}
Expand All @@ -63,7 +68,7 @@
</div>
</template>
<script>
import { defineComponent, ref, unref, watch, computed } from 'vue';
import { defineComponent, ref, unref, watch, computed, onMounted } from 'vue';
import getPrefixCls from '../_util/getPrefixCls';
import { useTheme } from '../_theme/useTheme';
import { useNormalModel, useArrayModel } from '../_util/use/useModel';
Expand All @@ -75,7 +80,7 @@ import Tree from '../tree';
import Scrollbar from '../scrollbar';
import SELECT_PROPS from '../select/props';
import TREE_PROPS from '../tree/props';
import { flatNodes } from '../_util/utils';
import useData from '../tree/useData';
const prefixCls = getPrefixCls('select-tree');
Expand Down Expand Up @@ -119,7 +124,9 @@ export default defineComponent({
validate(CHANGE_EVENT);
});
const nodes = computed(() => flatNodes(props.data));
const { nodeList, getChildrenByValues, getParentByValues } =
useData(props);
const treeSelectable = computed(() => !props.multiple);
const treeCheckable = computed(() => props.multiple);
const selectedKeys = computed(() => {
Expand All @@ -128,57 +135,79 @@ export default defineComponent({
return [];
});
const checkedKeys = computed(() => {
if (props.multiple) return currentValue.value;
if (props.multiple) {
if (!props.cascade) {
return currentValue.value;
}
if (props.checkStrictly === 'all') {
return currentValue.value;
}
if (props.checkStrictly === 'parent') {
return getChildrenByValues(currentValue.value);
}
if (props.checkStrictly === 'child') {
return getParentByValues(currentValue.value);
}
}
return [];
});
watch(
() => props.checkStrictly,
() => {
if (props.multiple && props.cascade) {
updateCurrentValue([]);
}
},
);
const handleClear = () => {
const value = props.multiple ? [] : null;
updateCurrentValue(value);
emit('clear');
};
const handleSelect = (value) => {
const handleSelect = (data) => {
if (props.disabled) return;
filterText.value = '';
if (!props.multiple) {
updateCurrentValue(value[0]);
updateCurrentValue(data.selectedKeys[0]);
isOpened.value = false;
} else {
updateCurrentValue(value);
updateCurrentValue(data.selectedKeys);
}
};
const handleCheck = (data) => {
if (props.disabled) return;
filterText.value = '';
if (!props.multiple) {
updateCurrentValue(data.checkedKeys[0]);
isOpened.value = false;
} else {
updateCurrentValue(data.checkedKeys);
}
};
const handleRemove = (value) => {
if (!props.multiple) {
return;
}
const arr = currentValue.value;
const findIndex = arr.indexOf(value);
const findIndex = currentValue.value.indexOf(value);
if (findIndex !== -1) {
emit('removeTag', value);
arr.splice(findIndex, 1);
updateCurrentValue(arr);
// arrayModel会自动添加或者删除
updateCurrentValue(value);
}
};
const selectedOptions = computed(() =>
nodes.value
.map((option) => {
const value = option[props.valueField];
const label = option[props.labelField];
return {
...option,
value,
label,
};
})
.filter((option) => {
if (props.multiple) {
return currentValue.value.includes(option.value);
}
return [currentValue.value].includes(option.value);
}),
Object.values(nodeList).filter((option) => {
if (props.multiple) {
return currentValue.value.includes(option.value);
}
return [currentValue.value].includes(option.value);
}),
);
const focus = (e) => {
Expand All @@ -200,6 +229,23 @@ export default defineComponent({
});
const filterMethod = (value, node) => node.label.indexOf(value) !== -1;
const triggerRef = ref();
const triggerWidth = ref(0);
onMounted(() => {
if (triggerRef.value) {
triggerWidth.value = triggerRef.value.$el.offsetWidth;
}
});
const dropdownStyle = computed(() => {
const style = {};
if (triggerWidth.value) {
style['min-width'] = `${triggerWidth.value}px`;
}
return style;
});
return {
prefixCls,
isOpened,
Expand All @@ -214,9 +260,12 @@ export default defineComponent({
selectedKeys,
treeCheckable,
handleSelect,
handleCheck,
checkedKeys,
refTree,
filterMethod,
triggerRef,
dropdownStyle,
};
},
});
Expand Down
4 changes: 2 additions & 2 deletions components/select-tree/style/index.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,12 @@
vertical-align: middle;
.text();
&-popper {
min-width: @select-dropdown-min-width;
max-width: @select-dropdown-max-width;
.text();
background: var(--f-white);
}
&-dropdown {
min-width: @select-dropdown-min-width;
max-width: @select-dropdown-max-width;
max-height: @select-dropdown-max-height;
padding: @select-dropdown-padding;
}
Expand Down
2 changes: 2 additions & 0 deletions components/select-trigger/label.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -142,6 +142,7 @@ export default {
if (isOpened) {
nextTick(() => {
if (!inputRef.value) return;
if (!props.filterable) return;
inputRef.value.focus();
});
} else {
Expand All @@ -158,6 +159,7 @@ export default {
filterText.value = '';
nextTick(() => {
if (!inputRef.value) return;
if (!props.filterable) return;
inputRef.value.focus();
});
}
Expand Down
4 changes: 2 additions & 2 deletions components/select-trigger/selectTrigger.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@
:class="triggerClass"
@mouseenter="inputHovering = true"
@mouseleave="inputHovering = false"
@focus="handleFocus"
@blur="handleBlur"
@focusin="handleFocus"
@focusout="handleBlur"
>
<Label
:isOpened="isOpened"
Expand Down
26 changes: 25 additions & 1 deletion components/select/select.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
>
<template #trigger>
<SelectTrigger
ref="triggerRef"
:selectedOptions="selectedOptions"
:disabled="disabled"
:clearable="clearable"
Expand All @@ -30,7 +31,10 @@
/>
</template>
<template #default>
<Scrollbar :containerClass="`${prefixCls}-dropdown`">
<Scrollbar
:containerStyle="dropdownStyle"
:containerClass="`${prefixCls}-dropdown`"
>
<slot>
<div :class="`${prefixCls}-null`">{{ emptyText }}</div>
</slot>
Expand All @@ -48,6 +52,7 @@ import {
reactive,
watch,
computed,
onMounted,
} from 'vue';
import getPrefixCls from '../_util/getPrefixCls';
import { useTheme } from '../_theme/useTheme';
Expand Down Expand Up @@ -183,6 +188,23 @@ export default defineComponent({
filterText.value = val;
};
const triggerRef = ref();
const triggerWidth = ref(0);
onMounted(() => {
if (triggerRef.value) {
triggerWidth.value = triggerRef.value.$el.offsetWidth;
}
});
const dropdownStyle = computed(() => {
const style = {};
if (triggerWidth.value) {
style['min-width'] = `${triggerWidth.value}px`;
}
return style;
});
return {
prefixCls,
isOpened,
Expand All @@ -193,6 +215,8 @@ export default defineComponent({
focus,
blur,
handleFilterTextChange,
triggerRef,
dropdownStyle,
};
},
});
Expand Down
4 changes: 2 additions & 2 deletions components/select/style/index.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,12 +17,12 @@
vertical-align: middle;
.text();
&-popper {
min-width: @select-dropdown-min-width;
max-width: @select-dropdown-max-width;
.text();
background: var(--f-white);
}
&-dropdown {
min-width: @select-dropdown-min-width;
max-width: @select-dropdown-max-width;
max-height: @select-dropdown-max-height;
padding: @select-dropdown-padding;
}
Expand Down
6 changes: 6 additions & 0 deletions components/tree/const.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,9 @@ export const PROVIDE_KEY = Symbol('FTree');
export const COMPONENT_NAME = {
TREE: 'FTree',
};

export const CHECK_STRATEGY = {
ALL: 'all',
PARENT: 'parent',
CHILD: 'child',
};
13 changes: 11 additions & 2 deletions components/tree/props.js
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import { CHECK_STRATEGY } from './const';

const PROPS = {
data: {
type: Array,
Expand Down Expand Up @@ -30,14 +32,21 @@ const PROPS = {
return [];
},
},
checkable: {
cascade: {
type: Boolean,
default: false,
},
checkStrictly: {
checkable: {
type: Boolean,
default: false,
},
checkStrictly: {
type: String,
default: 'all',
validator(value) {
return Object.values(CHECK_STRATEGY).includes(value);
},
},
checkedKeys: {
type: Array,
default() {
Expand Down
Loading

0 comments on commit 6d88f3f

Please sign in to comment.