-
-
-
-
- 试试
- 试试
+ props: selectProps,
+ emits: ['toggleChange', 'valueChange', 'update:value'],
+ setup (props: SelectProps, ctx) {
+ const isOpen = ref(false)
+ function toggleChange (bool: boolean) {
+ isOpen.value = bool
+ ctx.emit('toggleChange', bool)
+ }
+
+ const inputValue = computed(() => {
+ return props.value + ''
+ })
+ function valueChange (item: OptionItem, index: number) {
+ const value = typeof item === 'object' ? item.value : item
+ ctx.emit('update:value', value)
+ ctx.emit('valueChange', item, index)
+ toggleChange(false)
+ }
+
+ function getItemClassName (item: OptionItem) {
+ let classname = 'devui-select-item'
+ const value = typeof item === 'object' ? item.value : item
+ if (value === props.value) {
+ classname = 'devui-select-item active'
+ }
+ return classname
+ }
+
+ return {
+ isOpen,
+ inputValue,
+ valueChange,
+ toggleChange,
+ getItemClassName,
+ ...props
+ }
+ },
+ render () {
+ const {
+ options,
+ isOpen,
+ inputValue,
+ valueChange,
+ toggleChange,
+ getItemClassName
+ } = this
+
+ return (
+
+
+
+
+
-
+ )
}
})
\ No newline at end of file
diff --git a/devui/select/src/use-select.ts b/devui/select/src/use-select.ts
new file mode 100644
index 00000000..d5bb77e2
--- /dev/null
+++ b/devui/select/src/use-select.ts
@@ -0,0 +1,30 @@
+import { PropType, ExtractPropTypes } from 'vue'
+
+export interface OptionObjectItem {
+ name: string
+ value: string | number
+ [key: string]: any
+}
+export type OptionItem = number | string | OptionObjectItem
+export type Options = Array
+
+export const selectProps = {
+ value: {
+ type: [String, Number] as PropType,
+ default: ''
+ },
+ 'onUpdate:value': {
+ type: Function as PropType<(val: string | number) => void>,
+ default: undefined
+ },
+ options: {
+ type: Array as PropType,
+ default: () => []
+ },
+ onToggleChange: {
+ type: Function as PropType<(bool: boolean) => void>,
+ default: undefined
+ }
+} as const
+
+export type SelectProps = ExtractPropTypes
--
Gitee
From ac6301abb2a03cb3639d5f117e88bcd94148359d Mon Sep 17 00:00:00 2001
From: "448217185@qq.com"
Date: Sun, 8 Aug 2021 20:47:43 +0800
Subject: [PATCH 4/7] =?UTF-8?q?feat:=20select=E6=96=87=E6=A1=A3=E5=92=8C?=
=?UTF-8?q?=E6=B5=8B=E8=AF=95=E7=94=A8=E4=BE=8B=EF=BC=8C=E4=BB=A5=E5=8F=8A?=
=?UTF-8?q?props=E7=9A=84=E8=A7=A3=E6=9E=84=E5=93=8D=E5=BA=94=E5=A4=B1?=
=?UTF-8?q?=E6=95=88=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.eslintrc.js | 1 +
devui/select/__tests__/select.spec.ts | 114 ++++++++++++++++++++++++++
devui/select/src/select.scss | 101 ++++++++++++++++++++++-
devui/select/src/select.tsx | 66 +++++++++++----
devui/select/src/use-select.ts | 20 ++++-
devui/select/src/utils.ts | 16 ++++
devui/vue-devui.ts | 5 +-
sites/.vitepress/config/sidebar.ts | 1 +
sites/components/select/index.md | 92 +++++++++++++++++++++
9 files changed, 394 insertions(+), 22 deletions(-)
create mode 100644 devui/select/__tests__/select.spec.ts
create mode 100644 devui/select/src/utils.ts
create mode 100644 sites/components/select/index.md
diff --git a/.eslintrc.js b/.eslintrc.js
index 12abdbca..3da2f803 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -25,6 +25,7 @@ module.exports = {
'no-undef': 2,
'vue/max-attributes-per-line': 'off',
'vue/no-multiple-template-root': 'off',
+ 'vue/script-setup-uses-vars': 'off',
'@typescript-eslint/no-explicit-any': 'off',
'@typescript-eslint/member-delimiter-style': [
'error',
diff --git a/devui/select/__tests__/select.spec.ts b/devui/select/__tests__/select.spec.ts
new file mode 100644
index 00000000..7557ddfb
--- /dev/null
+++ b/devui/select/__tests__/select.spec.ts
@@ -0,0 +1,114 @@
+import { mount } from '@vue/test-utils'
+import { ref, reactive, nextTick } from 'vue'
+import DSelect from '../src/select'
+
+describe('select', () => {
+ it('select render work', async () => {
+ const value = ref(1)
+ const options = reactive([1, 2, 'string'])
+ const wrapper = mount({
+ components: { DSelect },
+ template: `('.devui-select-input')
+ const arrow = wrapper.find('.devui-select-arrow')
+
+ expect(container.exists()).toBeTruthy()
+ expect(dropdown.isVisible()).toBeFalsy()
+ expect(arrow.isVisible()).toBeTruthy()
+ expect(listItems.length).toBe(3)
+ expect(listItems[0].classes()).toContain('active')
+ expect(input.attributes('placeholder')).toBe('这是默认选择框')
+ expect(input.element.value).toBe('1')
+
+ await input.trigger('click')
+ await nextTick()
+ // isVisible不会自动更新需要重新获取
+ dropdown = wrapper.find('.devui-select-dropdown')
+ expect(dropdown.isVisible()).toBeTruthy()
+ expect(container.classes()).toContain('devui-select-open')
+
+ await listItems[2].trigger('click')
+ await nextTick()
+
+ // isVisible不会自动更新需要重新获取
+ dropdown = wrapper.find('.devui-select-dropdown')
+ expect(value.value).toBe('string')
+ expect(dropdown.isVisible()).toBeFalsy()
+ expect(input.element.value).toBe('string')
+ // class不会自动更新需要重新获取
+ listItems = wrapper.findAll('.devui-select-item')
+ expect(listItems[2].classes()).toContain('active')
+ })
+
+ it('select size and overview work', async () => {
+ const wrapper = mount(DSelect, {
+ props: {
+ size: 'sm',
+ overview: 'underlined'
+ }
+ })
+
+ let container = wrapper.find('.devui-select')
+ expect(container.classes()).toContain('devui-select-sm')
+ expect(container.classes()).toContain('devui-select-underlined')
+
+ await wrapper.setProps({
+ size: 'lg',
+ overview: 'border'
+ })
+
+ container = wrapper.find('.devui-select')
+ expect(container.classes()).toContain('devui-select-lg')
+ expect(container.classes()).not.toContain('devui-select-underlined')
+ })
+
+ it('select events work', async () => {
+ const value = ref(2)
+ const options = reactive([6, 2, 'test'])
+ const toggleChange = jest.fn()
+ const valueChange = jest.fn()
+ const wrapper = mount({
+ components: { DSelect },
+ template: `
+ ('.devui-select-input')
+ await input.trigger('click')
+
+ expect(toggleChange).toBeCalledTimes(1)
+ expect(valueChange).toBeCalledTimes(0)
+ expect(value.value).toBe(2)
+
+ const listItems = wrapper.findAll('.devui-select-item')
+ await listItems[2].trigger('click')
+
+ expect(toggleChange).toBeCalledTimes(2)
+ expect(valueChange).toBeCalledTimes(1)
+ expect(value.value).toBe('test')
+ })
+})
diff --git a/devui/select/src/select.scss b/devui/select/src/select.scss
index 3a84e422..6f0ad29a 100644
--- a/devui/select/src/select.scss
+++ b/devui/select/src/select.scss
@@ -1,12 +1,103 @@
@import '../../style/mixins/index';
@import '../../style/theme/color';
@import '../../style/theme/corner';
+@import '@devui-design/icons/icomoon/devui-icon.css';
+
+$border-change-time: 300ms;
+$border-change-function: cubic-bezier(0.645, 0.045, 0.355, 1);
+
+@mixin border-transition {
+ transition: border-color $border-change-time $border-change-function;
+}
.devui-select {
position: relative;
width: 100%;
}
+.devui-select-underlined {
+ border-bottom: 1px solid $devui-form-control-line;
+ @include border-transition();
+
+ &:not([disabled]):not(.disabled) {
+ &:hover {
+ border-color: $devui-form-control-line-hover;
+ }
+
+ &.devui-select-open {
+ border-color: $devui-form-control-line-active;
+ }
+ }
+
+ .devui-select-input {
+ border: none;
+ }
+}
+
+.devui-select-open {
+ .devui-select-arrow {
+ transform: rotate3d(0, 0, 1, 180deg);
+ }
+}
+
+.devui-select-selection {
+ position: relative;
+}
+
+.devui-select-input {
+ cursor: pointer;
+ width: 100%;
+ height: 28px;
+ padding: 4px 28px 4px 10px;
+ color: $devui-text;
+ vertical-align: middle;
+ border: 1px solid $devui-form-control-line;
+ border-radius: $devui-border-radius;
+ outline: none;
+ background-color: $devui-base-bg;
+ @include border-transition();
+
+ &:not([disabled]):not(.disabled) {
+ &:hover {
+ border-color: $devui-form-control-line-hover;
+ }
+
+ &:focus {
+ border-color: $devui-form-control-line-active;
+ }
+ }
+
+ &[disabled],
+ &.disabled {
+ &:hover {
+ cursor: not-allowed;
+ background-color: $devui-disabled-bg;
+ border-color: $devui-disabled-line;
+ color: $devui-disabled-text;
+ }
+ }
+
+ &.devui-select-input-lg {
+ height: 44px;
+ }
+
+ &.devui-select-input-sm {
+ height: 24px;
+ }
+}
+
+.devui-select-arrow {
+ position: absolute;
+ right: 0;
+ height: 100%;
+ width: 28px;
+ display: inline-flex;
+ justify-content: center;
+ align-items: center;
+ transform: rotate3d(0, 0, 1, 0deg);
+ transition: transform 0.25s ease-out;
+}
+
.devui-select-dropdown {
position: absolute;
width: calc(100% - 2px);
@@ -24,6 +115,8 @@
max-height: 300px;
width: 100%;
overflow-y: auto;
+ padding: 0;
+ margin: 0;
}
.devui-select-item {
@@ -39,6 +132,7 @@
text-overflow: ellipsis;
border: 0;
color: $devui-text;
+ cursor: pointer;
&:hover:not(.active) {
color: $devui-list-item-hover-text;
@@ -73,10 +167,15 @@
.fade-enter-active,
.fade-leave-active {
- transition: opacity 0.5s ease;
+ transform: scale3d(0, 1, 0, 0.9999) translate3d(0, 1, 0, 0);
+ transform-origin: 0 0%;
+ opacity: 1;
+ transition: transform, opacity 0.25s ease-out;
}
.fade-enter-from,
.fade-leave-to {
+ transform: scale3d(0, 1, 0, 0) translate3d(0, 1, 0, -4px);
opacity: 0;
+ transition: transform, opacity 0.25s ease-in;
}
diff --git a/devui/select/src/select.tsx b/devui/select/src/select.tsx
index 0e1cab3e..47c91b01 100644
--- a/devui/select/src/select.tsx
+++ b/devui/select/src/select.tsx
@@ -1,12 +1,13 @@
-
import './select.scss'
-import { defineComponent, ref, Transition, computed } from 'vue'
+import { defineComponent, ref, Transition, toRefs } from 'vue'
import { selectProps, SelectProps, OptionItem } from './use-select'
+import DIcon from '../../icon/src/icon'
+import { className } from './utils'
export default defineComponent({
name: 'DSelect',
props: selectProps,
- emits: ['toggleChange', 'valueChange', 'update:value'],
+ emits: ['toggleChange', 'valueChange', 'update:modelValue'],
setup (props: SelectProps, ctx) {
const isOpen = ref(false)
function toggleChange (bool: boolean) {
@@ -14,23 +15,35 @@ export default defineComponent({
ctx.emit('toggleChange', bool)
}
- const inputValue = computed(() => {
- return props.value + ''
- })
+ const inputValue = ref(props.modelValue + '')
+ initInputValue()
+
+ function initInputValue () {
+ props.options.forEach(item => {
+ if (typeof item === 'object' && item.value === props.modelValue) {
+ inputValue.value = item.name
+ }
+ })
+ }
+
function valueChange (item: OptionItem, index: number) {
const value = typeof item === 'object' ? item.value : item
- ctx.emit('update:value', value)
+ inputValue.value = getInputValue(item)
+ ctx.emit('update:modelValue', value)
ctx.emit('valueChange', item, index)
toggleChange(false)
}
function getItemClassName (item: OptionItem) {
- let classname = 'devui-select-item'
const value = typeof item === 'object' ? item.value : item
- if (value === props.value) {
- classname = 'devui-select-item active'
- }
- return classname
+ return className('devui-select-item', {
+ active: value === props.modelValue
+ })
+ }
+
+ function getInputValue (item: OptionItem) {
+ const value = typeof item === 'object' ? item.name : item
+ return value + ''
}
return {
@@ -39,7 +52,7 @@ export default defineComponent({
valueChange,
toggleChange,
getItemClassName,
- ...props
+ ...toRefs(props)
}
},
render () {
@@ -47,22 +60,41 @@ export default defineComponent({
options,
isOpen,
inputValue,
+ size,
+ placeholder,
+ overview,
valueChange,
toggleChange,
getItemClassName
} = this
+ const selectClassName = className('devui-select', {
+ 'devui-select-open': isOpen,
+ 'devui-select-lg': size === 'lg',
+ 'devui-select-sm': size === 'sm',
+ 'devui-select-underlined': overview === 'underlined'
+ })
+
+ const inputClassName = className('devui-select-input', {
+ 'devui-select-input-lg': size === 'lg',
+ 'devui-select-input-sm': size === 'sm',
+ })
+
return (
-
+
+
diff --git a/devui/select/src/use-select.ts b/devui/select/src/use-select.ts
index d5bb77e2..fb0891e8 100644
--- a/devui/select/src/use-select.ts
+++ b/devui/select/src/use-select.ts
@@ -9,11 +9,11 @@ export type OptionItem = number | string | OptionObjectItem
export type Options = Array
export const selectProps = {
- value: {
+ modelValue: {
type: [String, Number] as PropType,
default: ''
},
- 'onUpdate:value': {
+ 'onUpdate:modelValue': {
type: Function as PropType<(val: string | number) => void>,
default: undefined
},
@@ -21,9 +21,25 @@ export const selectProps = {
type: Array as PropType,
default: () => []
},
+ size: {
+ type: String as PropType<'sm' | 'md' | 'lg'>,
+ default: 'md'
+ },
+ overview: {
+ type: String as PropType<'border' | 'underlined'>,
+ default: 'border'
+ },
+ placeholder: {
+ type: String,
+ default: '请选择'
+ },
onToggleChange: {
type: Function as PropType<(bool: boolean) => void>,
default: undefined
+ },
+ onValueChange: {
+ type: Function as PropType<(item: OptionItem, index: number) => void>,
+ default: undefined
}
} as const
diff --git a/devui/select/src/utils.ts b/devui/select/src/utils.ts
new file mode 100644
index 00000000..225b8323
--- /dev/null
+++ b/devui/select/src/utils.ts
@@ -0,0 +1,16 @@
+/**
+ * 动态获取class字符串
+ * @param classStr 是一个字符串，固定的class名
+ * @param classOpt 是一个对象，key表示class名，value为布尔值，true则添加，否则不添加
+ * @returns 最终的class字符串
+ */
+export function className (classStr: string, classOpt?: { [key: string]: boolean; }): string {
+ let classname = classStr
+ if (typeof classOpt === 'object') {
+ Object.keys(classOpt).forEach(key => {
+ classOpt[key] && (classname += ` ${key}`)
+ })
+ }
+
+ return classname
+}
diff --git a/devui/vue-devui.ts b/devui/vue-devui.ts
index 5dfe708b..ffe2b6f0 100644
--- a/devui/vue-devui.ts
+++ b/devui/vue-devui.ts
@@ -14,6 +14,7 @@ import Alert from './alert/alert';
// 数据录入
import Checkbox from './checkbox/src/checkbox';
import Radio from './radio/src/radio';
+import Select from './select/src/select'
import Switch from './switch/src/switch';
import TagsInput from './tags-input/src/tags-input';
import TextInput from './text-input/src/text-input';
@@ -26,7 +27,7 @@ function install(app: App) {
Button, Icon, Panel,
Tabs,
Alert,
- Checkbox, Radio, Switch, TagsInput, TextInput,
+ Checkbox, Radio, Select, Switch, TagsInput, TextInput,
Avatar,
];
packages.forEach((item:any) => {
@@ -42,7 +43,7 @@ export {
Button, Icon, Panel,
Tabs,
Alert,
- Checkbox, Radio, Switch, TagsInput, TextInput,
+ Checkbox, Radio, Select, Switch, TagsInput, TextInput,
Avatar,
};
diff --git a/sites/.vitepress/config/sidebar.ts b/sites/.vitepress/config/sidebar.ts
index 5dc1723d..a1f3c6a2 100644
--- a/sites/.vitepress/config/sidebar.ts
+++ b/sites/.vitepress/config/sidebar.ts
@@ -26,6 +26,7 @@ const sidebar = {
children: [
{ text: 'Checkbox 复选框', link: '/components/checkbox/' },
{ text: 'Radio 单选框', link: '/components/radio/' },
+ { text: 'Select 下拉选择框', link: '/components/select/' },
{ text: 'Switch 开关', link: '/components/switch/' },
{ text: 'TagsInput 标签输入', link: '/components/tags-input/' },
{ text: 'TextInput 文本框', link: '/components/text-input/' },
diff --git a/sites/components/select/index.md b/sites/components/select/index.md
new file mode 100644
index 00000000..70602349
--- /dev/null
+++ b/sites/components/select/index.md
@@ -0,0 +1,92 @@
+# Select 下拉选择框
+
+用于从列表中选择单个或者多个数据
+
+### 何时使用
+
+需要从列表中选择单个或者多个数据
+
+### 基本用法
+
+#### Large
+
+('.devui-select-input')
- const arrow = wrapper.find('.devui-select-arrow')
+ options,
+ };
+ },
+ });
+ const container = wrapper.find('.devui-select');
+ let dropdown = wrapper.find('.devui-select-dropdown');
+ let listItems = wrapper.findAll('.devui-select-item');
+ const input = wrapper.find('.devui-select-input');
+ const arrow = wrapper.find('.devui-select-arrow');
- expect(container.exists()).toBeTruthy()
- expect(dropdown.isVisible()).toBeFalsy()
- expect(arrow.isVisible()).toBeTruthy()
- expect(listItems.length).toBe(3)
- expect(listItems[0].classes()).toContain('active')
- expect(input.attributes('placeholder')).toBe('这是默认选择框')
- expect(input.element.value).toBe('1')
+ expect(container.exists()).toBeTruthy();
+ expect(dropdown.isVisible()).toBeFalsy();
+ expect(arrow.isVisible()).toBeTruthy();
+ expect(listItems.length).toBe(3);
+ expect(listItems[0].classes()).toContain('active');
+ expect(input.attributes('placeholder')).toBe('这是默认选择框');
+ expect(input.element.value).toBe('1');
- await input.trigger('click')
- await nextTick()
+ await input.trigger('click');
+ await nextTick();
// isVisible不会自动更新需要重新获取
- dropdown = wrapper.find('.devui-select-dropdown')
- expect(dropdown.isVisible()).toBeTruthy()
- expect(container.classes()).toContain('devui-select-open')
+ dropdown = wrapper.find('.devui-select-dropdown');
+ expect(dropdown.isVisible()).toBeTruthy();
+ expect(container.classes()).toContain('devui-select-open');
- await listItems[2].trigger('click')
- await nextTick()
+ await listItems[2].trigger('click');
+ await nextTick();
// isVisible不会自动更新需要重新获取
- dropdown = wrapper.find('.devui-select-dropdown')
- expect(value.value).toBe('string')
- expect(dropdown.isVisible()).toBeFalsy()
- expect(input.element.value).toBe('string')
+ dropdown = wrapper.find('.devui-select-dropdown');
+ expect(value.value).toBe('string');
+ expect(dropdown.isVisible()).toBeFalsy();
+ expect(input.element.value).toBe('string');
// class不会自动更新需要重新获取
- listItems = wrapper.findAll('.devui-select-item')
- expect(listItems[2].classes()).toContain('active')
- })
+ listItems = wrapper.findAll('.devui-select-item');
+ expect(listItems[2].classes()).toContain('active');
+ });
it('select size and overview work', async () => {
const wrapper = mount(DSelect, {
props: {
size: 'sm',
- overview: 'underlined'
- }
- })
+ overview: 'underlined',
+ },
+ });
- let container = wrapper.find('.devui-select')
- expect(container.classes()).toContain('devui-select-sm')
- expect(container.classes()).toContain('devui-select-underlined')
+ let container = wrapper.find('.devui-select');
+ expect(container.classes()).toContain('devui-select-sm');
+ expect(container.classes()).toContain('devui-select-underlined');
await wrapper.setProps({
size: 'lg',
- overview: 'border'
- })
+ overview: 'border',
+ });
- container = wrapper.find('.devui-select')
- expect(container.classes()).toContain('devui-select-lg')
- expect(container.classes()).not.toContain('devui-select-underlined')
- })
+ container = wrapper.find('.devui-select');
+ expect(container.classes()).toContain('devui-select-lg');
+ expect(container.classes()).not.toContain('devui-select-underlined');
+ });
it('select events work', async () => {
- const value = ref(2)
- const options = reactive([6, 2, 'test'])
- const toggleChange = jest.fn()
- const valueChange = jest.fn()
+ const value = ref(2);
+ const options = reactive([6, 2, 'test']);
+ const toggleChange = jest.fn();
+ const valueChange = jest.fn();
const wrapper = mount({
components: { DSelect },
template: `
@@ -92,23 +92,23 @@ describe('select', () => {
value,
options,
toggleChange,
- valueChange
- }
- }
- })
+ valueChange,
+ };
+ },
+ });
- const input = wrapper.find('.devui-select-input')
- await input.trigger('click')
+ const input = wrapper.find('.devui-select-input');
+ await input.trigger('click');
- expect(toggleChange).toBeCalledTimes(1)
- expect(valueChange).toBeCalledTimes(0)
- expect(value.value).toBe(2)
+ expect(toggleChange).toBeCalledTimes(1);
+ expect(valueChange).toBeCalledTimes(0);
+ expect(value.value).toBe(2);
- const listItems = wrapper.findAll('.devui-select-item')
- await listItems[2].trigger('click')
+ const listItems = wrapper.findAll('.devui-select-item');
+ await listItems[2].trigger('click');
- expect(toggleChange).toBeCalledTimes(2)
- expect(valueChange).toBeCalledTimes(1)
- expect(value.value).toBe('test')
- })
-})
+ expect(toggleChange).toBeCalledTimes(2);
+ expect(valueChange).toBeCalledTimes(1);
+ expect(value.value).toBe('test');
+ });
+});
diff --git a/devui/select/src/select.scss b/devui/select/src/select.scss
index 6f0ad29a..79a248e3 100644
--- a/devui/select/src/select.scss
+++ b/devui/select/src/select.scss
@@ -5,6 +5,14 @@
$border-change-time: 300ms;
$border-change-function: cubic-bezier(0.645, 0.045, 0.355, 1);
+$select-input-height-sm: 24px;
+$select-input-height-md: 28px;
+$select-input-height-lg: 44px;
+$select-arrow-width: 28px;
+$transition-base-time: 0.25s;
+$select-dropdown-max-height: 300px;
+$select-item-font-size: var(--devui-font-size, 12px);
+$select-item-min-height: 36px;
@mixin border-transition {
transition: border-color $border-change-time $border-change-function;
@@ -47,8 +55,8 @@ $border-change-function: cubic-bezier(0.645, 0.045, 0.355, 1);
.devui-select-input {
cursor: pointer;
width: 100%;
- height: 28px;
- padding: 4px 28px 4px 10px;
+ height: $select-input-height-md;
+ padding: 4px $select-arrow-width 4px 10px;
color: $devui-text;
vertical-align: middle;
border: 1px solid $devui-form-control-line;
@@ -78,11 +86,11 @@ $border-change-function: cubic-bezier(0.645, 0.045, 0.355, 1);
}
&.devui-select-input-lg {
- height: 44px;
+ height: $select-input-height-lg;
}
&.devui-select-input-sm {
- height: 24px;
+ height: $select-input-height-sm;
}
}
@@ -90,12 +98,12 @@ $border-change-function: cubic-bezier(0.645, 0.045, 0.355, 1);
position: absolute;
right: 0;
height: 100%;
- width: 28px;
+ width: $select-arrow-width;
display: inline-flex;
justify-content: center;
align-items: center;
transform: rotate3d(0, 0, 1, 0deg);
- transition: transform 0.25s ease-out;
+ transition: transform $transition-base-time ease-out;
}
.devui-select-dropdown {
@@ -105,14 +113,14 @@ $border-change-function: cubic-bezier(0.645, 0.045, 0.355, 1);
top: 100%;
left: 0;
margin: 5px 0;
- border-radius: 2px;
- background: #ffffff;
- box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
+ border-radius: $devui-border-radius;
+ background: $devui-base-bg;
+ box-shadow: 0 2px 5px 0 $devui-shadow;
z-index: 999;
}
.devui-select-dropdown-list {
- max-height: 300px;
+ max-height: $select-dropdown-max-height;
width: 100%;
overflow-y: auto;
padding: 0;
@@ -120,9 +128,9 @@ $border-change-function: cubic-bezier(0.645, 0.045, 0.355, 1);
}
.devui-select-item {
- font-size: var(--devui-font-size, 12px);
+ font-size: $select-item-font-size;
display: block;
- min-height: 36px;
+ min-height: $select-item-min-height;
line-height: 1.5;
width: 100%;
padding: 10px;
@@ -170,12 +178,12 @@ $border-change-function: cubic-bezier(0.645, 0.045, 0.355, 1);
transform: scale3d(0, 1, 0, 0.9999) translate3d(0, 1, 0, 0);
transform-origin: 0 0%;
opacity: 1;
- transition: transform, opacity 0.25s ease-out;
+ transition: transform, opacity $transition-base-time ease-out;
}
.fade-enter-from,
.fade-leave-to {
transform: scale3d(0, 1, 0, 0) translate3d(0, 1, 0, -4px);
opacity: 0;
- transition: transform, opacity 0.25s ease-in;
+ transition: transform, opacity $transition-base-time ease-in;
}
diff --git a/devui/select/src/select.tsx b/devui/select/src/select.tsx
index 47c91b01..513761f2 100644
--- a/devui/select/src/select.tsx
+++ b/devui/select/src/select.tsx
@@ -1,49 +1,49 @@
-import './select.scss'
-import { defineComponent, ref, Transition, toRefs } from 'vue'
-import { selectProps, SelectProps, OptionItem } from './use-select'
-import DIcon from '../../icon/src/icon'
-import { className } from './utils'
+import './select.scss';
+import { defineComponent, ref, Transition, toRefs } from 'vue';
+import { selectProps, SelectProps, OptionItem } from './use-select';
+import DIcon from '../../icon/src/icon';
+import { className } from './utils';
export default defineComponent({
name: 'DSelect',
props: selectProps,
emits: ['toggleChange', 'valueChange', 'update:modelValue'],
- setup (props: SelectProps, ctx) {
- const isOpen = ref(false)
- function toggleChange (bool: boolean) {
- isOpen.value = bool
- ctx.emit('toggleChange', bool)
+ setup(props: SelectProps, ctx) {
+ const isOpen = ref(false);
+ function toggleChange(bool: boolean) {
+ isOpen.value = bool;
+ ctx.emit('toggleChange', bool);
}
- const inputValue = ref(props.modelValue + '')
- initInputValue()
+ const inputValue = ref(props.modelValue + '');
+ initInputValue();
- function initInputValue () {
- props.options.forEach(item => {
+ function initInputValue() {
+ props.options.forEach((item) => {
if (typeof item === 'object' && item.value === props.modelValue) {
- inputValue.value = item.name
+ inputValue.value = item.name;
}
- })
+ });
}
-
- function valueChange (item: OptionItem, index: number) {
- const value = typeof item === 'object' ? item.value : item
- inputValue.value = getInputValue(item)
- ctx.emit('update:modelValue', value)
- ctx.emit('valueChange', item, index)
- toggleChange(false)
+
+ function valueChange(item: OptionItem, index: number) {
+ const value = typeof item === 'object' ? item.value : item;
+ inputValue.value = getInputValue(item);
+ ctx.emit('update:modelValue', value);
+ ctx.emit('valueChange', item, index);
+ toggleChange(false);
}
- function getItemClassName (item: OptionItem) {
- const value = typeof item === 'object' ? item.value : item
+ function getItemClassName(item: OptionItem) {
+ const value = typeof item === 'object' ? item.value : item;
return className('devui-select-item', {
- active: value === props.modelValue
- })
+ active: value === props.modelValue,
+ });
}
- function getInputValue (item: OptionItem) {
- const value = typeof item === 'object' ? item.name : item
- return value + ''
+ function getInputValue(item: OptionItem) {
+ const value = typeof item === 'object' ? item.name : item;
+ return value + '';
}
return {
@@ -52,10 +52,10 @@ export default defineComponent({
valueChange,
toggleChange,
getItemClassName,
- ...toRefs(props)
- }
+ ...toRefs(props),
+ };
},
- render () {
+ render() {
const {
options,
isOpen,
@@ -65,55 +65,55 @@ export default defineComponent({
overview,
valueChange,
toggleChange,
- getItemClassName
- } = this
+ getItemClassName,
+ } = this;
const selectClassName = className('devui-select', {
'devui-select-open': isOpen,
'devui-select-lg': size === 'lg',
'devui-select-sm': size === 'sm',
- 'devui-select-underlined': overview === 'underlined'
- })
+ 'devui-select-underlined': overview === 'underlined',
+ });
const inputClassName = className('devui-select-input', {
'devui-select-input-lg': size === 'lg',
'devui-select-input-sm': size === 'sm',
- })
+ });
return (
-
+
-
-
- )
- }
-})
\ No newline at end of file
+ );
+ },
+});
diff --git a/devui/select/src/use-select.ts b/devui/select/src/use-select.ts
index fb0891e8..60b40ee1 100644
--- a/devui/select/src/use-select.ts
+++ b/devui/select/src/use-select.ts
@@ -1,46 +1,46 @@
-import { PropType, ExtractPropTypes } from 'vue'
+import { PropType, ExtractPropTypes } from 'vue';
export interface OptionObjectItem {
- name: string
- value: string | number
- [key: string]: any
+ name: string
+ value: string | number
+ [key: string]: any
}
-export type OptionItem = number | string | OptionObjectItem
-export type Options = Array
+export type OptionItem = number | string | OptionObjectItem;
+export type Options = Array;
export const selectProps = {
- modelValue: {
- type: [String, Number] as PropType,
- default: ''
- },
- 'onUpdate:modelValue': {
- type: Function as PropType<(val: string | number) => void>,
- default: undefined
- },
- options: {
- type: Array as PropType,
- default: () => []
- },
- size: {
- type: String as PropType<'sm' | 'md' | 'lg'>,
- default: 'md'
- },
- overview: {
- type: String as PropType<'border' | 'underlined'>,
- default: 'border'
- },
- placeholder: {
- type: String,
- default: '请选择'
- },
- onToggleChange: {
- type: Function as PropType<(bool: boolean) => void>,
- default: undefined
- },
- onValueChange: {
- type: Function as PropType<(item: OptionItem, index: number) => void>,
- default: undefined
- }
-} as const
+ modelValue: {
+ type: [String, Number] as PropType,
+ default: '',
+ },
+ 'onUpdate:modelValue': {
+ type: Function as PropType<(val: string | number) => void>,
+ default: undefined,
+ },
+ options: {
+ type: Array as PropType,
+ default: () => [],
+ },
+ size: {
+ type: String as PropType<'sm' | 'md' | 'lg'>,
+ default: 'md',
+ },
+ overview: {
+ type: String as PropType<'border' | 'underlined'>,
+ default: 'border',
+ },
+ placeholder: {
+ type: String,
+ default: '请选择',
+ },
+ onToggleChange: {
+ type: Function as PropType<(bool: boolean) => void>,
+ default: undefined,
+ },
+ onValueChange: {
+ type: Function as PropType<(item: OptionItem, index: number) => void>,
+ default: undefined,
+ },
+} as const;
-export type SelectProps = ExtractPropTypes
+export type SelectProps = ExtractPropTypes;
diff --git a/devui/select/src/utils.ts b/devui/select/src/utils.ts
index 225b8323..3092da77 100644
--- a/devui/select/src/utils.ts
+++ b/devui/select/src/utils.ts
@@ -4,13 +4,16 @@
* @param classOpt 是一个对象，key表示class名，value为布尔值，true则添加，否则不添加
* @returns 最终的class字符串
*/
-export function className (classStr: string, classOpt?: { [key: string]: boolean; }): string {
- let classname = classStr
+export function className(
+ classStr: string,
+ classOpt?: { [key: string]: boolean; }
+): string {
+ let classname = classStr;
if (typeof classOpt === 'object') {
- Object.keys(classOpt).forEach(key => {
- classOpt[key] && (classname += ` ${key}`)
- })
+ Object.keys(classOpt).forEach((key) => {
+ classOpt[key] && (classname += ` ${key}`);
+ });
}
- return classname
+ return classname;
}
diff --git a/sites/components/select/index.md b/sites/components/select/index.md
index 70602349..4af9aadc 100644
--- a/sites/components/select/index.md
+++ b/sites/components/select/index.md
@@ -13,28 +13,24 @@
Date: Mon, 9 Aug 2021 22:51:46 +0800
Subject: [PATCH 6/7] =?UTF-8?q?feat:=20=E5=88=A0=E9=99=A4=E6=97=A7?=
=?UTF-8?q?=E7=9A=84=E6=B5=8B=E8=AF=95=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
devui/select/demo/demo-basic.tsx | 35 -----------
devui/select/demo/select-demo.tsx | 18 ------
devui/select/demo/select.route.ts | 15 -----
devui/select/doc/api-cn.md | 96 -------------------------------
devui/select/doc/api-en.md | 95 ------------------------------
5 files changed, 259 deletions(-)
delete mode 100644 devui/select/demo/demo-basic.tsx
delete mode 100644 devui/select/demo/select-demo.tsx
delete mode 100644 devui/select/demo/select.route.ts
delete mode 100644 devui/select/doc/api-cn.md
delete mode 100644 devui/select/doc/api-en.md
diff --git a/devui/select/demo/demo-basic.tsx b/devui/select/demo/demo-basic.tsx
deleted file mode 100644
index 485fa93a..00000000
--- a/devui/select/demo/demo-basic.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { defineComponent, Ref, ref, watch } from 'vue'
-import DSelect from '../src/select'
-
-export default defineComponent({
- name: 'DSelectDemo',
- setup() {
- function log (bool: boolean) {
- console.log('toggleChange', bool)
- }
-
- const value = ref(9)
- watch(value, () => {
- console.log('值改变了！', value.value)
- })
-
- const doUpdate = (valueRef: Ref, newVal: string | number) => {
- valueRef.value = newVal
- }
- const updateProps = {
- 'onUpdate:value': (newVal: string | number) => doUpdate(value, newVal)
- }
- return () => {
- return (
- <>
- ` | `['rightDown', 'leftDown', 'rightUp', 'leftUp']` | 可选，方向数组优先采用数组里靠前的位置，AppendToBodyDirection 和 ConnectedPosition 请参考 dropdown | [自定义区域方向和选中](demo#custom-area-direction) |
-| autoFocus | `boolean` | false | 可选，是否自动聚焦 |
-| toggleOnFocus | `boolean` | false | 可选，是否 focus 自动展开下拉列表 |
-| width | `number` | -- | 可选，搭配 appendToBody 使用，设置下拉宽度 | [自定义区域方向和选中](demo#custom-area-direction) |
-| virtualScroll | `boolean` | false | 可选，是否虚拟滚动，大数据量场景试用 | [虚拟滚动 或 懒加载](demo#lazy-load-virtual-scroll) |
-| allowClear | `boolean` | false | 可选, 配置是否允许清空选值，仅单选场景适用 | [允许清空值](demo#allow-clear-value) |
-| inputItemTemplate | `TemplateRef` | -- | 可选,自定义模板，若传入，会忽略 ContentChild | |
-| ~~~notAutoScroll~~~ | `boolean` | false | `待改名`~~~可选，自动聚焦的时候，自动滚动到 select 位置~~~ |
-| templateItemSize | `number` | false | `待完善`可选，模板单条高度, appendToBody 必须为 true |
-| loadingTemplateRef | `TemplateRef` | -- | 可选，自定义 loading 模板 | [虚拟滚动 或 懒加载](demo#lazy-load-virtual-scroll) |
-
-### d-select 事件
-
-| 事件 | 类型 | 说明 | 跳转 Demo |
-| :----------: | :-------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------- |
-| valueChange | `EventEmitter\|any>` | 可选,输出函数,当选中某个选项项后,将会调用此函数,参数为当前选择项的值 |
-| toggleChange | `EventEmitter` | 可选,输出函数,下拉打开关闭 toggle 事件 | [异步加载显示加载中](demo#async-loading) |
-| loadMore | `EventEmitter<{instance: SelectComponent, event: ScrollEvent}>` | 懒加载触发事件，配合`enableLazyLoad`使用，使用`$event.instance.loadFinish()`结束本次加载, event 为懒加载监听的滚动事件，参考 dLazyLoad | [虚拟滚动 或 懒加载](demo#lazy-load-virtual-scroll) |
-
-注意： 使用 appendToBody 后需要在有滚动条的地方使用`cdkScrollable`
-
-```terminal
-npm install @angular/cdk --save
-```
-
-```TypeScript
-import { ScrollDispatchModule } from '@angular/cdk/scrolling';
-
-@NgModule({
- imports: [
- // ...
- ScrollDispatchModule,
- // ...
- ]
-})
-```
-
-```html
-
-
-
-```
diff --git a/devui/select/doc/api-en.md b/devui/select/doc/api-en.md
deleted file mode 100644
index 4001d3fd..00000000
--- a/devui/select/doc/api-en.md
+++ /dev/null
@@ -1,95 +0,0 @@
-# How to use
-
-Import into module:
-
-```typescript
-import { SelectModule } from 'ng-devui/select';
-```
-
-In the page:
-
-```html
-` | `['rightDown','leftDown','rightUp','leftUp']` | Optional. The first position in the array is preferred for the direction array, for details about AppendToBodyDirection and ConnectedPosition, see dropdown | [CCustomizing Area Orientation and Selecting](demo#custom-area-direction) |
-| autoFocus | `boolean` | false | Optional. Whether to enable auto-focus. |
-| toggleOnFocus | `boolean` | false | Optional. indicating whether to automatically expand the drop-down list box by focusing. |
-| width | `number` | -- | Optional. This parameter is used with appendToBody to set the drop-down width. | [Customizing Area Orientation and Selecting](demo#custom-area-direction) |
-| virtualScroll | `boolean` | false | Optional. Whether to use virtual scrolling. This parameter is used in scenarios with a large amount of data. | [Virtual scrolling or lazy loading](demo#lazy-load-virtual-scroll) |
-| allowClear | `boolean` | false | Optional specifies whether to clear the selected value. This parameter applies only to single-choice scenarios. | [Allowed to clear value](demo#allow-clear-value) |
-| inputItemTemplate | `TemplateRef` | -- | Optional. Customized template. If this parameter is transferred, ContentChild is ignored. | |
-| ~~~notAutoScroll~~~ | `boolean` | false | `To be renamed`~~~ Optional. When autofocus is enabled, the system automatically scrolls to the select position.~~~ |
-| templateItemSize | `number` | false | `To be improved` Optional. The height of a single template is required. appendToBody must be true. |
-| loadingTemplateRef | `TemplateRef` | -- | Optional. Customized loading template | [Virtual scrolling or lazy loading](demo#lazy-load-virtual-scroll) |
-
-### d-select event
-
-| Event | Type | Description | Jump to Demo |
-| :----------: | :-------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ |
-| valueChange | `EventEmitter\|any>` | Optional. output function. This function is invoked after an option is selected. The parameter is the value of the current option. |
-| toggleChange | `EventEmitter` | Optional. output function. It is optional. It is used to enable or disable the toggle event. | [Asynchronous loading indicates that the toggle event is being loaded](demo#async-loading) |
-| loadMore | `EventEmitter<{instance: SelectComponent, event: ScrollEvent}>` | lazy loading trigger event. This event is used together with `enableLazyLoad` and `$event.instance.loadFinish()` is used to end the loading. event indicates the lazy loading listening scrolling event. For details, see dLazyLoad | [Virtual scrolling or lazy loading](demo#lazy-load-virtual-scroll) | . |
-
-Note: After appendToBody is used, use `cdkScrollable` where the scroll bar exists.
-
-```terminal
-npm install @angular/cdk --save
-```
-
-```TypeScript
-import {ScrollDispatchModule} from '@angular/cdk/scrolling';
-@NgModule({
-imports: [
-//...
-ScrollDispatchModule,
-//...
-]
-})
-```
-
-```html
-
-
-
-```
--
Gitee
From de48f0656c3030c73173adbeb80a38118ac31bee Mon Sep 17 00:00:00 2001
From: unfound <448217185@qq.com>
Date: Tue, 10 Aug 2021 17:19:31 +0800
Subject: [PATCH 7/7] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8DPR=E5=BB=BA?=
=?UTF-8?q?=E8=AE=AE=EF=BC=9A=E5=88=A0=E9=99=A4icons=E7=9A=84=E6=A0=B7?=
=?UTF-8?q?=E5=BC=8F=E5=BC=95=E5=85=A5=EF=BC=9B=E5=B0=86=E6=A0=B7=E5=BC=8F?=
=?UTF-8?q?=E5=BC=95=E5=85=A5=E6=94=BE=E5=88=B0import=E6=9C=80=E4=B8=8B?=
=?UTF-8?q?=E6=96=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
devui/select/src/select.scss | 1 -
devui/select/src/select.tsx | 2 +-
2 files changed, 1 insertion(+), 2 deletions(-)
diff --git a/devui/select/src/select.scss b/devui/select/src/select.scss
index 79a248e3..f520b07d 100644
--- a/devui/select/src/select.scss
+++ b/devui/select/src/select.scss
@@ -1,7 +1,6 @@
@import '../../style/mixins/index';
@import '../../style/theme/color';
@import '../../style/theme/corner';
-@import '@devui-design/icons/icomoon/devui-icon.css';
$border-change-time: 300ms;
$border-change-function: cubic-bezier(0.645, 0.045, 0.355, 1);
diff --git a/devui/select/src/select.tsx b/devui/select/src/select.tsx
index 513761f2..b164187c 100644
--- a/devui/select/src/select.tsx
+++ b/devui/select/src/select.tsx
@@ -1,8 +1,8 @@
-import './select.scss';
import { defineComponent, ref, Transition, toRefs } from 'vue';
import { selectProps, SelectProps, OptionItem } from './use-select';
import DIcon from '../../icon/src/icon';
import { className } from './utils';
+import './select.scss';
export default defineComponent({
name: 'DSelect',
--
Gitee