diff --git a/packages/devui-vue/devui/auto-complete/__tests__/auto-complete.spec.ts b/packages/devui-vue/devui/auto-complete/__tests__/auto-complete.spec.ts
new file mode 100644
index 0000000000..85df305ba4
--- /dev/null
+++ b/packages/devui-vue/devui/auto-complete/__tests__/auto-complete.spec.ts
@@ -0,0 +1,570 @@
+import { mount } from '@vue/test-utils';
+import { nextTick, ref } from 'vue';
+import DAutoComplete from '../src/auto-complete';
+
+// delay api
+const wait = (delay = 300) =>
+ new Promise(resolve => setTimeout(() => resolve(true), delay))
+describe('auto-complete', () => {
+ it('init render & KeyboardEvent ', async () => {
+ const wrapper = mount({
+ components: {'d-auto-complete': DAutoComplete },
+ template: `
+
+ `,
+ setup() {
+ const value = ref('')
+ const source = [
+ 'C#',
+ 'C',
+ 'C++',
+ 'CPython',
+ 'CoffeeScript',
+ ]
+ return {
+ value,
+ source,
+ }
+ }
+ })
+ expect(wrapper.find('.devui-auto-complete').exists()).toBe(true)
+ const input = wrapper.find('input')
+ expect(input.element.value).toBe('')
+ await input.trigger('click')
+ await nextTick()
+ expect(wrapper.find('.devui-select-open').exists()).toBe(true)
+ expect(wrapper.find('.devui-dropdown-item').exists()).toBe(false)
+ expect(wrapper.find('.devui-auto-complete').attributes('style')).toContain(
+ 'width: 450px'
+ )
+ await input.setValue('c')
+ await nextTick()
+ expect(wrapper.find('.devui-dropdown-menu').exists()).toBe(true)
+ await wait(300)
+ await nextTick()
+ expect(wrapper.find('.devui-list-unstyled').element.childElementCount).toBe(5)
+ input.element.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }))
+ await nextTick()
+ input.element.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }))
+ await nextTick()
+ input.element.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp' }))
+ await nextTick()
+ input.element.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }))
+ await nextTick()
+ input.element.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }))
+ await nextTick()
+ expect(wrapper.vm.value).toBe('C++')
+ input.element.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }))
+ await nextTick()
+ expect(wrapper.find('.devui-select-open').exists()).toBe(false)
+ })
+ it('disabled ', async () => {
+ const wrapper = mount({
+ components: {'d-auto-complete': DAutoComplete },
+ template: `
+
+
+
+
+ `,
+ setup() {
+ const value = ref('')
+ const isDisabled = ref(false)
+ const source = [
+ 'C#',
+ 'C',
+ 'C++',
+ 'CPython',
+ 'CoffeeScript',
+ ]
+ function toggle(){
+ isDisabled.value= !isDisabled.value
+ }
+ return {
+ value,
+ source,
+ isDisabled,
+ toggle
+ }
+ }
+ })
+ expect(wrapper.find('.devui-auto-complete').exists()).toBe(true)
+ const input = wrapper.find('input')
+ const button = wrapper.find('button')
+ expect(input.element.value).toBe('')
+ expect(button.element.innerHTML).toBe('Disable AutoComplete')
+ await input.trigger('click')
+ await nextTick()
+ await input.setValue('c')
+ await nextTick()
+ await wait(300)
+ await nextTick()
+ expect(wrapper.find('ul .selected').exists()).toBe(true)
+ const li = wrapper.find('ul .selected')
+ li.trigger('click')
+ await nextTick()
+ expect(wrapper.vm.value).toBe('C#')
+ expect(wrapper.find('.devui-select-open').exists()).toBe(false)
+ button.trigger('click')
+ await nextTick()
+ expect(button.element.innerHTML).toBe('Enable AutoComplete')
+ expect(input.element.disabled).toBe(true)
+ })
+ it('Customized data matching method ', async () => {
+ const wrapper = mount({
+ components: {'d-auto-complete': DAutoComplete },
+ template: `
+
+
+
+ {{slotProps}}
+
+
+
+ `,
+ setup() {
+ const value = ref('')
+ const mySource = ref([
+ {
+ label:'C#',
+ disabled:false
+ },{
+ label:'C++',
+ disabled:false
+ },{
+ label:'CPython',
+ disabled:false
+ },{
+ label:'Java',
+ disabled:false
+ },{
+ label:'JavaScript',
+ disabled:false
+ },{
+ label:'Go',
+ disabled:false
+ },{
+ label:'Ruby',
+ disabled:false
+ },{
+ label:'F#',
+ disabled:false
+ },{
+ label:'TypeScript',
+ disabled:false
+ },{
+ label:'SQL',
+ disabled:true
+ },{
+ label:'LiveScript',
+ disabled:false
+ },{
+ label:'CoffeeScript',
+ disabled:false
+ }
+ ])
+ const formatter = (item) =>{
+ return item.label;
+ }
+ //trem：input输入内容
+ const searchFn =async (trem)=>{
+ const arr = []
+ await new Promise((resolve)=>{
+ setTimeout(() => {
+ resolve(1)
+ }, 500);
+ })
+ mySource.value.forEach((item) => {
+ let cur = item.label
+ cur = cur.toLowerCase()
+ if (cur.startsWith(trem)) {
+ arr.push(item)
+ }
+ })
+ return arr
+ }
+ return {
+ value,
+ searchFn,
+ formatter
+ }
+ }
+ })
+ expect(wrapper.find('.devui-auto-complete').exists()).toBe(true)
+ const input = wrapper.find('input')
+ expect(input.element.value).toBe('')
+ await input.trigger('click')
+ await nextTick()
+ expect(wrapper.find('.devui-select-open').exists()).toBe(true)
+ await input.setValue('c')
+ await nextTick()
+ await wait(300)
+ expect(wrapper.find('#devui-is-searching-template').exists()).toBe(true)
+ expect(wrapper.find('#devui-is-searching-template').element.innerHTML).toBe('c')
+ await wait(500)
+ await nextTick()
+ expect(wrapper.find('.devui-list-unstyled').element.childElementCount).toBe(4)
+ await input.setValue('s')
+ await nextTick()
+ await wait(300)
+ await nextTick()
+ await wait(500)
+ expect(wrapper.find('li.disabled').exists()).toBe(true)
+ expect(wrapper.find('li.disabled').element.innerHTML).toBe('SQL')
+ })
+
+ it('Customized template display', async () => {
+ const wrapper = mount({
+ components: {'d-auto-complete': DAutoComplete },
+ template: `
+
+
+
+ 第{{slotProps.index}}项: {{slotProps.item}}
+
+
+
+
+ {{slotProps}}
+
+
+
+ `,
+ setup() {
+ const value = ref('')
+ const source = ref([
+ 'C#',
+ 'C',
+ 'C++',
+ 'CPython',
+ 'Java',
+ 'JavaScript',
+ 'Go',
+ 'Python',
+ 'Ruby',
+ 'F#',
+ 'TypeScript',
+ 'SQL',
+ 'LiveScript',
+ 'CoffeeScript',
+ ])
+
+ return {
+ value,
+ source
+ }
+ }
+ })
+ expect(wrapper.find('.devui-auto-complete').exists()).toBe(true)
+ const input = wrapper.find('input')
+ expect(input.element.value).toBe('')
+ await input.trigger('click')
+ await nextTick()
+ expect(wrapper.find('.devui-select-open').exists()).toBe(true)
+ await input.setValue('c')
+ await nextTick()
+ await wait(300)
+ expect(wrapper.find('.devui-list-unstyled').exists()).toBe(true)
+ expect(wrapper.find('.devui-list-unstyled').element.childElementCount).toBe(5)
+ expect(wrapper.find('.selected div').element.innerHTML).toBe(' 第0项: C#')
+ await input.setValue('cc')
+ await nextTick()
+ await wait(300)
+ await nextTick()
+ expect(wrapper.find('#noResultItemTemplate').exists()).toBe(true)
+ expect(wrapper.find('#noResultItemTemplate').element.innerHTML).toBe('cc')
+ })
+
+ it('selectValue & transInputFocusEmit ', async () => {
+ const transInputFocusEmitCB = jest.fn()
+ const selectValueCB = jest.fn()
+ const wrapper = mount({
+ components: {'d-auto-complete': DAutoComplete },
+ template: `
+
+ `,
+ setup() {
+ const value = ref('')
+ const source = [
+ 'C#',
+ 'C',
+ 'C++',
+ 'CPython',
+ 'CoffeeScript',
+ ]
+ const selectValue = (e)=>{
+ selectValueCB(e)
+ }
+ const transInputFocusEmit = (e)=>{
+ transInputFocusEmitCB(e)
+ }
+ return {
+ value,
+ source,
+ selectValue,
+ transInputFocusEmit
+ }
+ }
+ })
+ expect(wrapper.find('.devui-auto-complete').exists()).toBe(true)
+ const input = wrapper.find('input')
+ expect(input.element.value).toBe('')
+ await input.trigger('focus')
+ await nextTick()
+ await input.setValue('c')
+ await nextTick()
+ await wait(300)
+ await nextTick()
+ expect(transInputFocusEmitCB).toHaveBeenCalledTimes(1)
+ const li = wrapper.find('ul .selected')
+ li.trigger('click')
+ await nextTick()
+ expect(selectValueCB).toHaveBeenCalledTimes(1)
+ })
+ it('allowEmptyValueSearch ', async () => {
+ const wrapper = mount({
+ components: {'d-auto-complete': DAutoComplete },
+ template: `
+
+ `,
+ setup() {
+ const value = ref('')
+ const allowEmptyValueSearch = ref(true)
+ const source = [
+ 'C#',
+ 'C',
+ 'C++',
+ 'CPython',
+ 'CoffeeScript',
+ ]
+
+ return {
+ value,
+ source,
+ allowEmptyValueSearch
+ }
+ }
+ })
+ expect(wrapper.find('.devui-auto-complete').exists()).toBe(true)
+ const input = wrapper.find('input')
+ expect(input.element.value).toBe('')
+ await input.trigger('focus')
+ await nextTick()
+ expect(wrapper.find('ul').element.childElementCount).toBe(5)
+ })
+
+ it('appendToBody & appendToBodyDirections', async () => {
+ const wrapper = mount({
+ components: {'d-auto-complete': DAutoComplete },
+ template: `
+
+ `,
+ setup() {
+ const value = ref('')
+ const allowEmptyValueSearch = ref(true)
+ const source = [
+ 'CC#',
+ 'C',
+ 'C++',
+ 'CPython',
+ 'CoffeeScript',
+ ]
+ const appendToBodyDirections = ref({
+ originX: 'left',
+ originY: 'bottom',
+ overlayX: 'left',
+ overlayY: 'top',
+ })
+ return {
+ value,
+ source,
+ allowEmptyValueSearch,
+ appendToBodyDirections
+ }
+ }
+ })
+ expect(wrapper.find('.devui-auto-complete').exists()).toBe(true)
+ const input = wrapper.find('input')
+ expect(input.element.value).toBe('')
+ await input.trigger('focus')
+ await nextTick()
+ await input.setValue('c')
+ await nextTick()
+ await wait(300)
+ await nextTick()
+ expect(wrapper.find('ul').element.childElementCount).toBe(5)
+ expect(wrapper.find('.selected').element.innerHTML).toBe('CC#')
+ })
+
+ it('latestSource',async () => {
+ const wrapper = mount({
+ components: {'d-auto-complete': DAutoComplete },
+ template:`
+
+
+
+ `,
+ setup(){
+ const value = ref('')
+ const latestSource = ref(['JavaScript','TypeScript'])
+ const source = ref([
+ 'C#',
+ 'C',
+ 'C++',
+ 'Java',
+ 'JavaScript'
+ ])
+
+ return {
+ value,
+ source,
+ latestSource
+ }
+ }
+ })
+ expect(wrapper.find('.devui-auto-complete').exists()).toBe(true)
+ const input = wrapper.find('input')
+ expect(input.element.value).toBe('')
+ await input.trigger('click')
+ await nextTick()
+ expect(wrapper.find('ul .devui-popup-tips').exists()).toBe(true)
+ await input.setValue('j')
+ await wait(300)
+ await nextTick()
+ const li = wrapper.find('ul .selected')
+ li.trigger('click')
+ await nextTick()
+ expect(wrapper.vm.value).toBe('Java')
+ })
+ it('enableLazyLoad',async () => {
+ const wrapper = mount({
+ components: {'d-auto-complete': DAutoComplete },
+ template:`
+
+
+
+ `,
+ setup(){
+ const value = ref('')
+ const source = ref([
+ 'C#',
+ 'C',
+ 'C++',
+ 'CPython',
+ 'Java',
+ 'JavaScript',
+ 'Go',
+ 'Python',
+ 'Ruby',
+ 'F#',
+ 'TypeScript',
+ 'SQL',
+ 'LiveScript',
+ 'CoffeeScript',
+ 'C1',
+ 'C2',
+ 'C3',
+ 'C4',
+ 'C5',
+ 'C6',
+ 'C7',
+ ])
+ const autoCompleteRef =ref(null)
+
+ const loadMore = () => {
+ setTimeout(() => {
+ source.value.push('lazyData'+source.value.length)
+ autoCompleteRef.value?.loadFinish()
+ },3000)
+ }
+ return {
+ value,
+ source,
+ loadMore,
+ autoCompleteRef
+ }
+ }
+ })
+ expect(wrapper.find('.devui-auto-complete').exists()).toBe(true)
+ const input = wrapper.find('input')
+ expect(input.element.value).toBe('')
+ await input.setValue('c')
+ await nextTick()
+ expect(wrapper.find('.devui-dropdown-menu').exists()).toBe(true)
+ await wait(300)
+ await nextTick()
+ expect(wrapper.find('.devui-dropdown-item').exists()).toBe(true)
+ const ul = wrapper.find('.devui-list-unstyled')
+ const makeScroll = async (
+ dom: Element,
+ name: 'scrollTop',
+ offset: number
+ ) => {
+ const eventTarget = dom === document.documentElement ? window : dom
+ dom[name] = offset
+ const evt = new CustomEvent('scroll', {
+ detail: {
+ target: {
+ [name]: offset,
+ },
+ },
+ })
+ eventTarget.dispatchEvent(evt)
+ return await wait(3000)
+ }
+ await makeScroll(ul.element, 'scrollTop', 500)
+ await nextTick()
+ expect(wrapper.vm.value).toBe('c')
+ await nextTick()
+ await input.setValue('')
+ const length = wrapper.vm.source.length
+ expect(wrapper.vm.source[length - 1]).toBe('lazyData21')
+ await input.setValue('la')
+ await wait(300)
+ await nextTick()
+ expect(wrapper.find('.devui-dropdown-item').element.innerHTML).toBe('lazyData21')
+ })
+})
+
diff --git a/packages/devui-vue/devui/auto-complete/index.ts b/packages/devui-vue/devui/auto-complete/index.ts
new file mode 100644
index 0000000000..ecfbe3545b
--- /dev/null
+++ b/packages/devui-vue/devui/auto-complete/index.ts
@@ -0,0 +1,17 @@
+import type { App } from 'vue'
+import AutoComplete from './src/auto-complete'
+
+AutoComplete.install = function(app: App): void {
+ app.component(AutoComplete.name, AutoComplete)
+}
+
+export { AutoComplete }
+
+export default {
+ title: 'AutoComplete 自动补全',
+ category: '数据录入',
+ status: '100%',
+ install(app: App): void {
+ app.use(AutoComplete as any)
+ }
+}
diff --git a/packages/devui-vue/devui/auto-complete/src/auto-complete-types.ts b/packages/devui-vue/devui/auto-complete/src/auto-complete-types.ts
new file mode 100644
index 0000000000..b3618cd2f2
--- /dev/null
+++ b/packages/devui-vue/devui/auto-complete/src/auto-complete-types.ts
@@ -0,0 +1,140 @@
+import type { PropType, ExtractPropTypes, InjectionKey, SetupContext, Ref } from 'vue'
+const defaultFormatter = (item) => (item ? item.label || item.toString() : '');
+const defaultValueParse = (item) => item;
+// appendToBody使用
+export type HorizontalConnectionPos = 'left' | 'center' | 'right';
+export type VerticalConnectionPos = 'top' | 'center' | 'bottom';
+export interface ConnectionPosition {
+ originX: HorizontalConnectionPos
+ originY: VerticalConnectionPos
+ overlayX: HorizontalConnectionPos
+ overlayY: VerticalConnectionPos
+}
+export const autoCompleteProps = {
+ modelValue: {
+ type: String,
+ default:''
+ },
+ source:{
+ type :Array,
+ default:null
+ },
+ allowEmptyValueSearch:{
+ type:Boolean,
+ default:false
+ },
+ appendToBody :{
+ type:Boolean,
+ default:false
+ },
+ appendToBodyDirections :{
+ type: Object as PropType
,
+ default: (): ConnectionPosition => ({
+ originX: 'left',
+ originY: 'bottom',
+ overlayX: 'left',
+ overlayY: 'top',
+ }),
+ },
+ disabled:{
+ type:Boolean,
+ default:false
+ },
+ delay:{
+ type:Number,
+ default:300
+ },
+ disabledKey:{
+ type:String,
+ default:null
+ },
+ formatter: {
+ type:Function as PropType<(item: any) => string>,
+ default:defaultFormatter
+ },
+ isSearching: {
+ type:Boolean,
+ default:false
+ },
+ sceneType:{
+ type:String,
+ default:null
+ },
+ searchFn:{
+ type:Function as PropType<(term: string) => Array>,
+ default:null
+ },
+ tipsText:{
+ type:String,
+ default:'最近输入'
+ },
+ latestSource:{
+ type:Array,
+ default:null
+ },
+ valueParser:{
+ type:Function as PropType<(item: any) => any>,
+ default:defaultValueParse
+ },
+ enableLazyLoad: {
+ type:Boolean,
+ default:false
+ },
+ dAutoCompleteWidth:{
+ type: Number,
+ default:null
+ },
+ showAnimation:{
+ type:Boolean,
+ default:true
+ },
+ maxHeight:{
+ type:Number,
+ default:300
+ },
+ transInputFocusEmit:{
+ type:Function as PropType<(any) => void>,
+ default:null
+ },
+ selectValue:{
+ type:Function as PropType<(any) => void>,
+ default:null
+ },
+ loadMore:{
+ type:Function as PropType<() => void>,
+ default:null
+ }
+} as const
+
+export type AutoCompleteProps = ExtractPropTypes
+
+export interface AutoCompleteRootType {
+ ctx:SetupContext
+ props:AutoCompleteProps
+}
+export type SearchFnType = (term: string) => Array
+export type FormatterType = (item: any) => string
+export type DefaultFuncType = (any?) => any
+export type HandleSearch = (term?:string | string,enableLazyLoad?:boolean) => void
+export type RecentlyFocus = (latestSource:Array) => void
+export type InputDebounceCb = (...rest:any) => Promise
+export type TransInputFocusEmit = (any?: any) => void
+export type SelectOptionClick = (any?: any) => void
+//弹出选择框参数
+export type DropdownProps = {
+ props:AutoCompleteProps
+ searchList:Ref
+ searchStatus?:Ref
+ showNoResultItemTemplate:Ref
+ term?: string
+ visible: Ref
+ selectedIndex:Ref
+ selectOptionClick:HandleSearch
+ dropDownRef
+ showLoading:Ref
+ loadMore
+ latestSource
+ modelValue:Ref
+ hoverIndex:Ref
+}
+export const DropdownPropsKey:InjectionKey=Symbol('DropdownPropsKey')
diff --git a/packages/devui-vue/devui/auto-complete/src/auto-complete.scss b/packages/devui-vue/devui/auto-complete/src/auto-complete.scss
new file mode 100644
index 0000000000..4d80b0cd39
--- /dev/null
+++ b/packages/devui-vue/devui/auto-complete/src/auto-complete.scss
@@ -0,0 +1,95 @@
+@import '../../style/mixins/index';
+@import '../../style/theme/color';
+
+.devui-auto-complete,
+.devui-auto-complete-menu {
+ .devui-dropdown-menu {
+ left: 0 !important;
+ top: 0 !important;
+ }
+}
+
+.devui-auto-complete {
+ .active {
+ background: $devui-list-item-hover-bg;
+ }
+
+ .devui-dropdown-menu {
+ width: 100%;
+ display: block;
+ }
+
+ .devui-dropdown-menu-cdk {
+ position: static;
+ }
+
+ .devui-dropdown-item {
+ cursor: pointer;
+ display: block;
+ width: 100%;
+ padding: 8px 12px;
+ clear: both;
+ border: 0;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ line-height: 14px;
+ }
+
+ .devui-dropdown-menu {
+ .devui-dropdown-item:not(.disabled) {
+ &.selected {
+ color: $devui-list-item-active-text;
+ background-color: $devui-list-item-active-bg;
+ }
+ }
+ }
+
+ .devui-no-result-template,
+ .devui-is-searching-template {
+ display: block;
+ width: 100%;
+ padding: 8px 12px;
+ clear: both;
+ border: 0;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ cursor: not-allowed;
+ background-color: $devui-disabled-bg;
+ color: $devui-disabled-text;
+ line-height: 14px;
+
+ &:hover,
+ &:active,
+ &:hover:active {
+ background-color: $devui-unavailable;
+ }
+ }
+
+ /* 选项disabled */
+ .devui-dropdown-item.disabled,
+ .devui-dropdown-item.disabled:hover {
+ cursor: not-allowed;
+ color: $devui-disabled-text;
+ }
+
+ ul.devui-list-unstyled {
+ margin: 0;
+ overflow-y: auto;
+ }
+
+ .devui-dropdown-bg {
+ background: $devui-list-item-hover-bg;
+ color: $devui-list-item-hover-text;
+ }
+
+ .devui-popup-tips {
+ color: $devui-text-weak; // TODO: Color-Question
+ padding: 4px 12px;
+ }
+
+ .devui-dropdown-latestSource ul {
+ line-height: initial !important;
+ }
+}
diff --git a/packages/devui-vue/devui/auto-complete/src/auto-complete.tsx b/packages/devui-vue/devui/auto-complete/src/auto-complete.tsx
new file mode 100644
index 0000000000..0f70a1e350
--- /dev/null
+++ b/packages/devui-vue/devui/auto-complete/src/auto-complete.tsx
@@ -0,0 +1,127 @@
+import { defineComponent, provide, reactive, Transition,toRefs, ref, SetupContext } from 'vue'
+import { autoCompleteProps, AutoCompleteProps, DropdownPropsKey } from './auto-complete-types'
+import useCustomTemplate from './composables/use-custom-template'
+import useSearchFn from './composables/use-searchfn'
+import useInputHandle from './composables/use-input-handle'
+import useSelectHandle from './composables/use-select-handle'
+import useLazyHandle from './composables/use-lazy-handle'
+import useKeyBoardHandle from './composables/use-keyboard-select'
+import './auto-complete.scss'
+import DAutoCompleteDropdown from './components/dropdown'
+import ClickOutside from '../../shared/devui-directive/clickoutside'
+import {FlexibleOverlay} from '../../overlay/src/flexible-overlay'
+export default defineComponent({
+ name: 'DAutoComplete',
+ directives: { ClickOutside },
+ props: autoCompleteProps,
+ emits: ['update:modelValue'],
+ setup(props: AutoCompleteProps, ctx:SetupContext) {
+ const {
+ disabled,
+ modelValue,
+ appendToBody,
+ dAutoCompleteWidth,
+ delay,
+ allowEmptyValueSearch,
+ formatter,
+ transInputFocusEmit,
+ selectValue,
+ source,
+ searchFn,
+ appendToBodyDirections,
+ latestSource,
+ showAnimation
+ } = toRefs(props)
+
+ const {handleSearch,searchList,showNoResultItemTemplate,recentlyFocus} = useSearchFn(ctx,allowEmptyValueSearch,source,searchFn,formatter)
+ const {onInput,onFocus,inputRef,visible,searchStatus,handleClose,toggleMenu} = useInputHandle(ctx,searchList,showNoResultItemTemplate,modelValue,disabled,delay,handleSearch,transInputFocusEmit,recentlyFocus,latestSource)
+ const {selectedIndex,selectOptionClick} = useSelectHandle(ctx,searchList,selectValue,handleSearch,formatter,handleClose)
+ const {showLoading,dropDownRef,loadMore} = useLazyHandle(props,ctx,handleSearch)
+ const {customRenderSolts} = useCustomTemplate(ctx,modelValue)
+ const {hoverIndex,handlekeyDown} = useKeyBoardHandle(dropDownRef,visible,searchList,selectedIndex,searchStatus,showNoResultItemTemplate,selectOptionClick,handleClose)
+ provide(DropdownPropsKey, {
+ props,
+ visible,
+ term: '',
+ searchList:searchList,
+ selectedIndex,
+ searchStatus,
+ selectOptionClick,
+ dropDownRef,
+ showLoading,
+ loadMore,
+ latestSource,
+ modelValue,
+ showNoResultItemTemplate:showNoResultItemTemplate,
+ hoverIndex:hoverIndex
+ })
+ const origin = ref()
+ const position = reactive({appendToBodyDirections:{}})
+ position.appendToBodyDirections=appendToBodyDirections
+ const renderDropdown = () => {
+ if(appendToBody.value){
+ return (
+
+
+
+ )
+ }else{
+ return (
+ 0&&dAutoCompleteWidth.value+'px'
+ }}
+ >
+
+
+ {customRenderSolts()}
+
+
+
+ )
+ }
+
+ }
+ return () => {
+ return (
+ 0&&dAutoCompleteWidth.value+'px'
+ }}
+ >
+
+ {renderDropdown()}
+
+ )
+ }
+ }
+})
diff --git a/packages/devui-vue/devui/auto-complete/src/components/dropdown.tsx b/packages/devui-vue/devui/auto-complete/src/components/dropdown.tsx
new file mode 100644
index 0000000000..38dd7ed3a3
--- /dev/null
+++ b/packages/devui-vue/devui/auto-complete/src/components/dropdown.tsx
@@ -0,0 +1,103 @@
+import { defineComponent, inject } from 'vue'
+import { DropdownPropsKey } from '../auto-complete-types'
+import dLoading from '../../../loading/src/directive'
+// 后续会对接自带下拉组件，相关功能将全部抽离
+export default defineComponent({
+ name: 'DAutoCompleteDropdown',
+ directives: {dLoading},
+ setup(props,ctx) {
+ const propsData = inject(DropdownPropsKey)
+ const {
+ visible,
+ selectedIndex,
+ selectOptionClick,
+ searchList,
+ searchStatus,
+ dropDownRef,
+ loadMore,
+ showLoading,
+ showNoResultItemTemplate,
+ latestSource,
+ modelValue,
+ hoverIndex
+ } = propsData
+ const {
+ disabled,
+ maxHeight,
+ appendToBody,
+ formatter,
+ disabledKey,
+ isSearching,
+ } = propsData.props
+
+ const onSelect =(item:any)=>{
+ if(item[disabledKey]){return}
+ selectOptionClick(item)
+ }
+ return () => {
+ return (
+ 0)||(ctx.slots.noResultItemTemplate&&showNoResultItemTemplate.value)||(isSearching&&ctx.slots.searchingTemplate&&searchStatus.value)}
+ >
+
+
+
{ctx.slots.default?.()}
{text.value}
- )
- }
- }
-})
+ );
+ };
+ },
+});
diff --git a/packages/devui-vue/devui/button/__tests__/button.spec.ts b/packages/devui-vue/devui/button/__tests__/button.spec.ts
index a03789608d..3c60844552 100644
--- a/packages/devui-vue/devui/button/__tests__/button.spec.ts
+++ b/packages/devui-vue/devui/button/__tests__/button.spec.ts
@@ -2,9 +2,9 @@ import { mount } from '@vue/test-utils';
import Button from '../src/button';
describe('d-button', () => {
- it('btnStyle', () => {
+ it('variant', () => {
const wrapper = mount(Button, {
- props: { btnStyle: 'danger' },
+ props: { variant: 'danger' },
});
expect(wrapper.find('.devui-btn').classes()).toContain('devui-btn-danger');
});
@@ -36,17 +36,17 @@ describe('d-button', () => {
});
// 目前还不支持 loading
- // it('loading', async () => {
- // const handleClick = jest.fn();
- // const wrapper = mount(Button, {
- // props: {
- // showLoading: true,
- // btnClick: handleClick
- // },
- // });
- // await wrapper.trigger('click');
- // expect(handleClick).not.toBeCalled();
- // });
+ it('loading', async () => {
+ const handleClick = jest.fn();
+ const wrapper = mount(Button, {
+ props: {
+ showLoading: true,
+ btnClick: handleClick
+ },
+ });
+ await wrapper.trigger('click');
+ expect(handleClick).not.toBeCalled();
+ });
it('disabled', async () => {
const handleClick = jest.fn();
@@ -64,7 +64,7 @@ describe('d-button', () => {
it('slot', () => {
const btnText = 'vue3 devui';
const wrapper = mount(Button, {
- slots: {
+ slots: {
default: btnText
}
});
diff --git a/packages/devui-vue/devui/button/index.ts b/packages/devui-vue/devui/button/index.ts
index 91a9eb8d81..d2d44df9a1 100644
--- a/packages/devui-vue/devui/button/index.ts
+++ b/packages/devui-vue/devui/button/index.ts
@@ -1,21 +1,15 @@
-import type { App } from 'vue'
-import Button from './src/button'
-import { Loading } from '../loading/index'
+import type { App } from 'vue';
+import Button from './src/button';
-Button.install = function (app: App) {
- app.directive('dLoading', Loading)
- app.component(Button.name, Button)
-}
+export * from './src/button-types';
-export * from './src/button-types'
-
-export { Button }
+export { Button };
export default {
title: 'Button 按钮',
category: '通用',
status: '100%',
install(app: App): void {
- app.use(Button as any)
- }
-}
+ app.component(Button.name, Button);
+ },
+};
diff --git a/packages/devui-vue/devui/button/src/button-types.ts b/packages/devui-vue/devui/button/src/button-types.ts
index 2c09d2a67a..f489e4beb8 100644
--- a/packages/devui-vue/devui/button/src/button-types.ts
+++ b/packages/devui-vue/devui/button/src/button-types.ts
@@ -1,54 +1,40 @@
-import { ExtractPropTypes, PropType } from 'vue';
+import type { ComputedRef, ExtractPropTypes, PropType } from 'vue';
-export type IButtonType = 'button' | 'submit' | 'reset';
-export type IButtonStyle = 'common' | 'primary' | 'text' | 'text-dark' | 'danger';
-export type IButtonPosition = 'left' | 'right' | 'default';
+export type IButtonVariant = 'solid' | 'outline' | 'text';
+export type IButtonColor = 'secondary' | 'primary' | 'danger';
export type IButtonSize = 'lg' | 'md' | 'sm' | 'xs';
export const buttonProps = {
- type: {
- type: String as PropType
,
- default: 'button'
- },
- btnStyle: {
- type: String as PropType,
- default: 'primary'
+ variant: {
+ type: String as PropType,
+ default: 'outline',
},
size: {
type: String as PropType,
- default: 'md'
- },
- position: {
- type: String as PropType,
- default: 'default'
+ default: 'md',
},
- bordered: {
- type: Boolean,
- default: false
+ color: {
+ type: String as PropType,
},
icon: {
type: String,
- default: ''
+ default: '',
},
- showLoading: {
+ loading: {
type: Boolean,
- default: false
- },
- width: {
- type: String,
+ default: false,
},
disabled: {
type: Boolean,
- default: false
- },
- autofocus: {
- type: Boolean,
- default: false
+ default: false,
},
- onClick: {
- type: Function as PropType<(event: MouseEvent) => void>
- }
} as const;
+export type ButtonProps = ExtractPropTypes;
-export type ButtonProps = ExtractPropTypes;
\ No newline at end of file
+export interface UseButtonReturnType {
+ classes: ComputedRef<{
+ [key: string]: string | boolean;
+ }>;
+ iconClass: ComputedRef;
+}
diff --git a/packages/devui-vue/devui/button/src/button.scss b/packages/devui-vue/devui/button/src/button.scss
index a29c626694..9287577fa1 100644
--- a/packages/devui-vue/devui/button/src/button.scss
+++ b/packages/devui-vue/devui/button/src/button.scss
@@ -4,281 +4,236 @@
@import '../../style/theme/font';
@import '../../style/theme/corner';
-$devui-btn-loading-color: $devui-text;
-$devui-btn-xs-padding: 1px 5px;
-$devui-btn-xs-height: 24px;
-$devui-btn-icon-xs-min-width: 24px;
-$devui-btn-xs-min-width: 48px;
-$devui-btn-sm-padding: 1px 15px;
-$devui-btn-sm-min-width: 56px;
-$devui-btn-icon-sm-min-width: 24px;
-$devui-btn-sm-height: 24px;
-$devui-btn-min-width: 64px;
-$devui-btn-height: 28px;
-$devui-btn-padding: 3px 20px;
-$devui-btn-lg-padding: 5px 23px;
-$devui-btn-lg-min-width: 72px;
-$devui-btn-icon-lg-min-width: 32px;
-$devui-btn-lg-height: 32px;
-$devui-btn-xs-font-size: $devui-font-size-sm;
-$devui-btn-sm-font-size: $devui-font-size-sm;
-$devui-btn-font-size: $devui-font-size-md;
-$devui-btn-lg-font-size: $devui-font-size-lg;
-$devui-btn-line-height: $devui-line-height-base;
-
-$devui-btn-normal-config: (
- text: (
- color: $devui-brand-active,
- padding: 0
- ),
- text-dark: (
- color: $devui-brand-active,
- padding: 0
- ),
- common: (
- color: $devui-text,
- min-width: $devui-btn-min-width,
- background-color: $devui-block,
- border-color: $devui-line
- ),
- stress: (
- color: $devui-light-text,
- min-width: $devui-btn-min-width,
- background-color: $devui-primary
- ),
- primary: (
- color: $devui-light-text,
- min-width: $devui-btn-min-width,
- background-color: $devui-primary
- ),
- danger: (
- color: $devui-light-text,
- min-width: $devui-btn-min-width,
- background-color: $devui-contrast
- ),
- success: (
- color: $devui-light-text,
- min-width: $devui-btn-min-width,
- background-color: $devui-success
- ),
- warning: (
- color: $devui-light-text,
- min-width: $devui-btn-min-width,
- background-color: $devui-warning
- ),
- xs: (
- padding: $devui-btn-xs-padding,
- height: $devui-btn-xs-height,
- font-size: $devui-btn-xs-font-size,
- min-width: $devui-btn-xs-min-width
- ),
- sm: (
- padding: $devui-btn-sm-padding,
- height: $devui-btn-sm-height,
- font-size: $devui-btn-sm-font-size,
- min-width: $devui-btn-sm-min-width,
- ),
- lg: (
- padding: $devui-btn-lg-padding,
- height: $devui-btn-lg-height,
- font-size: $devui-btn-lg-font-size,
- min-width: $devui-btn-lg-min-width,
- ),
- left: (
- border-radius: $devui-border-radius 0 0 $devui-border-radius,
- ),
- right: (
- border-radius: 0 $devui-border-radius $devui-border-radius 0,
- ),
- default: (
- border-radius: $devui-border-radius,
- )
-);
-
-$devui-btn-pseudo-config: (
- text: (
- hover: (
- background-color: transparent,
- color: $devui-brand-active-focus
- ),
- focus: (
- background-color: transparent,
- color: $devui-brand-active-focus
- ),
- active: (
- background-color: transparent,
- color: $devui-brand-active-focus
- )
- ),
- text-dark: (
- hover: (
- background-color: transparent,
- color: $devui-brand-active-focus
- ),
- focus: (
- background-color: transparent,
- color: $devui-brand-active-focus
- ),
- active: (
- background-color: transparent,
- color: $devui-brand-active-focus
- )
- ),
- common: (
- hover: (
- border-color: $devui-form-control-line-active,
- color: $devui-brand-active
- ),
- focus: (
- border-color: $devui-form-control-line-active,
- color: $devui-brand-active
- ),
- active: (
- border-color: $devui-form-control-line-active,
- color: $devui-brand-active
- )
- ),
- stress: (
- hover: (
- background-color: $devui-primary-hover
- ),
- focus: (
- background-color: $devui-primary-hover
- ),
- active: (
- background-color: $devui-primary-active
- )
- ),
- primary: (
- hover: (
- background-color: $devui-primary-hover
- ),
- focus: (
- background-color: $devui-primary-hover
- ),
- active: (
- background-color: $devui-primary-active
- )
- ),
- danger: (
- hover: (
- background-color: $devui-contrast-hover
- ),
- focus: (
- background-color: $devui-contrast-hover
- ),
- active: (
- background-color: $devui-contrast-active
- )
- )
-);
-
.devui-btn {
- padding: $devui-btn-padding;
- font-size: $devui-btn-font-size;
- height: $devui-btn-height;
- line-height: $devui-btn-line-height;
+ padding: 0 20px;
+ font-size: $devui-font-size-md;
+ height: 28px;
+ line-height: $devui-line-height-base;
+ border: none;
border-radius: $devui-border-radius;
border-width: 1px;
- border-color: transparent;
background-color: transparent;
- @each $type in text, text-dark, common, stress, primary, danger, success, warning, left, right, xs, sm, lg {
- &.devui-btn-#{$type} {
- @each $key, $value in map-get($devui-btn-normal-config, $type) {
- #{$key}: $value;
- }
- }
+
+ &:hover {
+ cursor: pointer;
}
- @each $type in text, text-dark, common, stress, primary, danger {
- &.devui-btn-#{$type} {
- @each $pseudo, $value in map-get($devui-btn-pseudo-config, $type) {
- &:#{$pseudo} {
- @each $key, $value2 in map-get(map-get($devui-btn-pseudo-config, $type), $pseudo) {
- #{$key}: $value2;
- }
- }
+
+ &:disabled {
+ cursor: not-allowed;
+ }
+
+ &-solid {
+ color: $devui-light-text;
+ min-width: 64px;
+
+ &-secondary {
+ color: $devui-text;
+ background-color: $devui-dividing-line;
+
+ &:hover {
+ opacity: 0.8;
+ }
+
+ &:focus {
+ opacity: 0.8;
+ }
+
+ &:active {
+ opacity: 0.8;
+ }
+
+ &:disabled {
+ opacity: 0.8;
}
}
- }
- &.devui-btn-common {
- &:disabled {
- color: $devui-disabled-text;
- background: $devui-disabled-bg;
- border: 1px solid $devui-disabled-line;
+ &-primary {
+ background-color: $devui-primary;
+
+ &:hover {
+ background-color: $devui-primary-hover;
+ }
+
+ &:focus {
+ background-color: $devui-primary-hover;
+ }
+
+ &:active {
+ background-color: $devui-primary-active;
+ }
+
+ &:disabled {
+ color: $devui-light-text;
+ background: $devui-primary-disabled;
+ border: none;
+ }
}
- }
- &.devui-btn-primary {
- &:disabled {
- color: $devui-light-text;
- background: $devui-primary-disabled;
- border: none;
+ &-danger {
+ background-color: $devui-contrast;
+
+ &:hover {
+ background-color: $devui-contrast-hover;
+ }
+
+ &:focus {
+ background-color: $devui-contrast-hover;
+ }
+
+ &:active {
+ background-color: $devui-contrast-active;
+ }
+
+ &:disabled {
+ background-color: $devui-contrast-disabled;
+ }
}
}
- &.devui-btn-danger {
- &:disabled {
- color: $devui-disabled-text;
- background: $devui-disabled-bg;
- border: 1px solid $devui-disabled-line;
+ &-outline {
+ background-color: $devui-block;
+ border-style: solid;
+
+ &-secondary {
+ color: $devui-text;
+ border-color: $devui-line;
+
+ &:hover {
+ color: $devui-brand-active;
+ border-color: $devui-form-control-line-active;
+ }
+
+ &:focus {
+ color: $devui-brand-active;
+ border-color: $devui-form-control-line-active;
+ }
+
+ &:active {
+ color: $devui-brand-active;
+ border-color: $devui-form-control-line-active;
+ }
+
+ &:disabled {
+ color: $devui-disabled-text;
+ border-color: $devui-disabled-line;
+ background-color: $devui-disabled-bg;
+ }
}
- }
- &.devui-btn-text-dark {
- &:disabled {
- color: $devui-disabled-text;
+ &-primary {
+ color: $devui-brand-active;
+ border-color: $devui-form-control-line-active;
+
+ &:hover {
+ color: $devui-brand-active-focus;
+ border-color: $devui-form-control-line-active-hover;
+ }
+
+ &:focus {
+ color: $devui-brand-active-focus;
+ border-color: $devui-form-control-line-active-hover;
+ }
+
+ &:active {
+ color: $devui-brand-active-focus;
+ border-color: $devui-form-control-line-active-hover;
+ }
+
+ &:disabled {
+ opacity: 0.8;
+ }
}
- }
- &.devui-btn-text {
- &:disabled {
- color: $devui-disabled-text;
+ &-danger {
+ color: $devui-contrast;
+ border-color: $devui-contrast;
+
+ &:hover,
+ &:focus,
+ &:active,
+ &:disabled {
+ opacity: 0.8;
+ }
}
}
- &.bordered {
- &.devui-btn-common {
+ &-text {
+ padding: 0;
+
+ &-secondary {
color: $devui-text;
- border-color: transparent;
- &:hover,
+ &:hover {
+ color: $devui-list-item-hover-text;
+ }
+
&:focus {
- border-color: $devui-primary-hover;
+ color: $devui-list-item-hover-text;
}
&:active {
- border-color: $devui-primary-active;
+ color: $devui-list-item-hover-text;
}
- }
- &.devui-btn-stress,
- &.devui-btn-primary {
- border-color: $devui-brand;
- color: $devui-brand;
- background-color: $devui-block;
+ &:disabled {
+ color: $devui-disabled-text;
+ }
}
- &.devui-btn-success {
- border-color: $devui-success;
- color: $devui-success;
- background-color: $devui-block;
- }
+ &-primary {
+ color: $devui-brand-active;
+
+ &:hover {
+ color: $devui-brand-active-focus;
+ }
- &.devui-btn-warning {
- border-color: $devui-warning;
- color: $devui-warning;
- background-color: $devui-block;
+ &:focus {
+ color: $devui-brand-active-focus;
+ }
+
+ &:active {
+ color: $devui-brand-active-focus;
+ }
+
+ &:disabled {
+ opacity: 0.8;
+ }
}
- &.devui-btn-danger {
- border-color: $devui-danger;
- color: $devui-danger;
- background-color: $devui-block;
+ &-danger {
+ color: $devui-contrast;
+
+ &:hover,
+ &:focus,
+ &:active,
+ &:disabled {
+ opacity: 0.8;
+ }
}
}
- &.d-btn-icon {
+ &-xs {
+ padding: 0 4px;
+ height: 24px;
+ font-size: $devui-font-size-sm;
+ min-width: 48px;
+ }
+
+ &-sm {
+ padding: 0 16px;
+ height: 24px;
+ font-size: $devui-font-size-sm;
+ min-width: 56px;
+ }
+
+ &-lg {
+ padding: 0 24px;
+ height: 32px;
+ font-size: $devui-font-size-lg;
+ min-width: 72px;
+ }
+
+ &.devui-btn-icon {
&:hover,
&:focus {
border: 1px solid $devui-list-item-hover-bg;
@@ -291,9 +246,8 @@ $devui-btn-pseudo-config: (
}
&:not(:disabled) {
- &.devui-btn-text,
- &.devui-btn-text-dark {
- &.d-btn-icon-wrap {
+ &.devui-btn-text {
+ &.devui-btn-icon-wrap {
color: $devui-text;
.devui-icon-fix {
@@ -320,39 +274,29 @@ $devui-btn-pseudo-config: (
}
}
-.devui-btn-host {
- display: inline-block;
-}
-
.devui-btn {
transition: background-color 0.2s;
- border-style: solid;
white-space: nowrap;
- display: flex;
+ display: inline-flex;
align-items: center;
justify-content: center;
- &:disabled,
- &[disabled] {
- cursor: not-allowed;
- }
-
- &.d-btn-icon {
- padding: 7px 8px;
+ &.devui-btn-icon {
+ padding: 8px;
line-height: 1em;
border: 1px solid transparent;
&.devui-btn-xs,
&.devui-btn-sm {
- padding: 5px;
+ padding: 4px;
}
&.devui-btn-xs {
- min-width: $devui-btn-icon-xs-min-width;
+ min-width: 24px;
}
&.devui-btn-sm {
- min-width: $devui-btn-icon-sm-min-width;
+ min-width: 24px;
}
&.devui-btn-lg {
@@ -360,11 +304,11 @@ $devui-btn-pseudo-config: (
font-size: $devui-font-size-icon;
}
- min-width: $devui-btn-icon-lg-min-width;
+ min-width: 32px;
}
}
- &:not(.d-btn-icon) {
+ &:not(.devui-btn-icon) {
.icon-fix {
font-size: $devui-font-size-icon;
}
@@ -376,20 +320,6 @@ $devui-btn-pseudo-config: (
font-size: $devui-font-size;
}
-.devui-btn.devui-btn-common:not(:disabled) {
- .devui-icon-fix {
- color: $devui-text-weak;
- }
-
- &:hover,
- &:active,
- &:focus {
- .devui-icon-fix {
- color: $devui-icon-fill-active;
- }
- }
-}
-
.button-content {
display: inline-block;
position: relative;
diff --git a/packages/devui-vue/devui/button/src/button.tsx b/packages/devui-vue/devui/button/src/button.tsx
index 554a99b2a6..58e50f20a8 100644
--- a/packages/devui-vue/devui/button/src/button.tsx
+++ b/packages/devui-vue/devui/button/src/button.tsx
@@ -1,71 +1,36 @@
-import { computed, defineComponent, ref } from 'vue';
+import { defineComponent, toRefs } from 'vue';
+import type { SetupContext } from 'vue';
import { Icon } from '../../icon';
-import { buttonProps } from './button-types';
-
+import loadingDirective from '../../loading/src/directive';
+import { buttonProps, ButtonProps } from './button-types';
+import useButton from './use-button';
import './button.scss';
export default defineComponent({
name: 'DButton',
+ directives: {
+ devLoading: loadingDirective,
+ },
props: buttonProps,
- setup(props, ctx) {
- const buttonContent = ref(null);
+ emits: ['click'],
+ setup(props: ButtonProps, ctx: SetupContext) {
+ const { icon, disabled, loading } = toRefs(props);
+ const { classes, iconClass } = useButton(props, ctx);
const onClick = (e: MouseEvent) => {
- if (props.showLoading) {
+ if (loading.value) {
return;
}
- props.onClick?.(e);
- }
-
- const hasContent = computed(() => ctx.slots.default);
-
- const btnClass = computed(() => {
- const { btnStyle, size, position, bordered, icon } = props;
- const origin = `devui-btn devui-btn-${btnStyle} devui-btn-${size} devui-btn-${position}`;
- const borderedClass = bordered ? 'bordered' : '';
- const btnIcon = !!icon && !hasContent.value && btnStyle !== 'primary' ? 'd-btn-icon' : '';
- const btnIconWrap = !!icon ? 'd-btn-icon-wrap' : '';
- return `${origin} ${borderedClass} ${btnIcon} ${btnIconWrap}`;
- });
-
- const iconClass = computed(() => {
- if (!props.icon) {
- return;
- }
- const origin = 'devui-icon-fix icon';
- if (hasContent.value) {
- return `${origin} clear-right-5`;
- } else {
- return origin;
- }
- });
+ ctx.emit('click', e);
+ };
return () => {
- const {
- icon,
- type,
- disabled,
- showLoading,
- width
- } = props;
return (
-
-
-
+
);
- }
- }
+ };
+ },
});
diff --git a/packages/devui-vue/devui/button/src/use-button.ts b/packages/devui-vue/devui/button/src/use-button.ts
new file mode 100644
index 0000000000..a27c458832
--- /dev/null
+++ b/packages/devui-vue/devui/button/src/use-button.ts
@@ -0,0 +1,35 @@
+import { computed } from 'vue';
+import type { SetupContext } from 'vue';
+import { ButtonProps, UseButtonReturnType } from './button-types';
+
+export default function useButton(props: ButtonProps, ctx: SetupContext): UseButtonReturnType {
+ const hasContent = computed(() => ctx.slots.default);
+ const colorMap = {
+ solid: 'primary',
+ outline: 'secondary',
+ text: 'secondary',
+ };
+ const defaultColor = colorMap[props.variant];
+
+ const classes = computed(() => ({
+ 'devui-btn': true,
+ [`devui-btn-${props.variant}`]: true,
+ [`devui-btn-${props.variant}-${props.color || defaultColor}`]: true,
+ [`devui-btn-${props.size}`]: true,
+ 'devui-btn-icon-wrap': props.icon,
+ 'devui-btn-icon': props.icon && !hasContent.value && props.variant !== 'solid',
+ }));
+ const iconClass = computed(() => {
+ if (!props.icon) {
+ return;
+ }
+ const origin = 'devui-icon-fix icon';
+ if (hasContent.value) {
+ return `${origin} clear-right-5`;
+ } else {
+ return origin;
+ }
+ });
+
+ return { classes, iconClass };
+}
diff --git a/packages/devui-vue/devui/card/__tests__/__snapshots__/card.spec.ts.snap b/packages/devui-vue/devui/card/__tests__/__snapshots__/card.spec.ts.snap
new file mode 100644
index 0000000000..76e8d750da
--- /dev/null
+++ b/packages/devui-vue/devui/card/__tests__/__snapshots__/card.spec.ts.snap
@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`card should render correctly 1`] = `
+
+`;
diff --git a/packages/devui-vue/devui/carousel/__tests__/carousel.spec.ts b/packages/devui-vue/devui/carousel/__tests__/carousel.spec.ts
index 525d71d769..a900c84833 100644
--- a/packages/devui-vue/devui/carousel/__tests__/carousel.spec.ts
+++ b/packages/devui-vue/devui/carousel/__tests__/carousel.spec.ts
@@ -1,8 +1,7 @@
import { ref, nextTick } from 'vue'
import { mount } from '@vue/test-utils';
-import Carousel from '../carousel';
-import CarouselItem from '../item';
-import Button from '../../button'
+import { CarouselItem, Carousel } from '../index';
+import { Button } from '../../button'
const wait = (ms = 100) =>
new Promise(resolve => setTimeout(() => resolve(), ms))
@@ -140,13 +139,13 @@ describe('d-carousel', () => {
{{ item }}
- 上一张
- 下一张
- 第一张
+ 上一张
+ 下一张
+ 第一张
`,
setup() {
- const items = ref(["page 1", 'page 2', 'page 3', 'page 4'])
+ const items = ref(['page 1', 'page 2', 'page 3', 'page 4'])
const activeIndex = ref(0)
const carousel = ref()
diff --git a/packages/devui-vue/devui/carousel/index.ts b/packages/devui-vue/devui/carousel/index.ts
index 792419a4fc..6f05109ddf 100644
--- a/packages/devui-vue/devui/carousel/index.ts
+++ b/packages/devui-vue/devui/carousel/index.ts
@@ -1,16 +1,17 @@
import type { App } from 'vue'
import Carousel from './src/carousel'
-import CarouseItem from './src/item'
+import CarouselItem from './src/item'
Carousel.install = function(app: App) {
app.component(Carousel.name, Carousel)
}
-CarouseItem.install = function(app: App) {
- app.component(CarouseItem.name, CarouseItem);
+CarouselItem.install = function(app: App) {
+ app.component(CarouselItem.name, CarouselItem);
}
export { Carousel }
+export { CarouselItem }
export default {
title: 'Carousel 走马灯',
@@ -18,6 +19,6 @@ export default {
status: '80%',
install(app: App): void {
app.use(Carousel as any)
- app.use(CarouseItem as any)
+ app.use(CarouselItem as any)
}
}
diff --git a/packages/devui-vue/devui/cascader/components/cascader-item/index.scss b/packages/devui-vue/devui/cascader/components/cascader-item/index.scss
index f3368ead25..35161178bf 100644
--- a/packages/devui-vue/devui/cascader/components/cascader-item/index.scss
+++ b/packages/devui-vue/devui/cascader/components/cascader-item/index.scss
@@ -9,15 +9,18 @@
color: $devui-text;
cursor: pointer;
@include flex(flex-start);
+
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
+
.cascader-li__wraper {
flex: 1;
@include flex(flex-start);
}
+
.dropdown-item-label {
display: inline-block;
flex: 1;
@@ -49,6 +52,7 @@
margin-right: 4px;
font-size: $devui-font-size-icon;
color: $devui-text;
+
&.disabled {
color: $devui-disabled-text !important;
}
diff --git a/packages/devui-vue/devui/cascader/components/cascader-multiple/index.scss b/packages/devui-vue/devui/cascader/components/cascader-multiple/index.scss
index 848f54b3c6..315baf646f 100644
--- a/packages/devui-vue/devui/cascader/components/cascader-multiple/index.scss
+++ b/packages/devui-vue/devui/cascader/components/cascader-multiple/index.scss
@@ -1,6 +1,7 @@
@import '../../../style/theme/color';
@import '../../../style/theme/corner';
@import '../../../style/core/font';
+
.devui-tags {
&-input {
flex: 1;
@@ -11,6 +12,7 @@
background-color: $devui-base-bg;
transition: border-color 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
}
+
&-box {
width: 100%;
overflow: auto;
@@ -20,10 +22,11 @@
align-items: center;
flex-wrap: wrap;
}
+
&-placeholder {
font-size: $devui-font-size;
line-height: 22px;
margin-left: 6px;
color: $devui-placeholder;
}
-}
\ No newline at end of file
+}
diff --git a/packages/devui-vue/devui/cascader/components/cascader-tag/index.scss b/packages/devui-vue/devui/cascader/components/cascader-tag/index.scss
index 2e57f9bc2f..71dd8cb947 100644
--- a/packages/devui-vue/devui/cascader/components/cascader-tag/index.scss
+++ b/packages/devui-vue/devui/cascader/components/cascader-tag/index.scss
@@ -1,6 +1,7 @@
@import '../../../style/theme/color';
@import '../../../style/theme/corner';
@import '../../../style/core/font';
+
.devui-tag {
margin: 2px 4px 2px 0;
display: inline-block;
@@ -12,6 +13,7 @@
border-radius: $devui-border-radius;
border-color: inherit;
border: 0 solid;
+
span {
min-height: 20px;
line-height: 20px;
@@ -20,11 +22,12 @@
position: relative;
cursor: default;
}
+
&__close {
margin-left: 12px;
- font-size: $devui-font-size;
+ font-size: $devui-font-size;
cursor: pointer;
- color: #fff;
+ color: #ffffff;
width: 14px;
height: 14px;
line-height: 14px;
@@ -32,8 +35,9 @@
border-radius: 50%;
display: inline-block;
text-align: center;
+
&:hover {
background-color: $devui-brand;
}
}
-}
\ No newline at end of file
+}
diff --git a/packages/devui-vue/devui/cascader/hooks/use-cascader-item.ts b/packages/devui-vue/devui/cascader/hooks/use-cascader-item.ts
index 603d7b4a09..de4a70fbe0 100644
--- a/packages/devui-vue/devui/cascader/hooks/use-cascader-item.ts
+++ b/packages/devui-vue/devui/cascader/hooks/use-cascader-item.ts
@@ -1,7 +1,7 @@
/**
* 处理cascader-item中需要的参数
*/
-import { cloneDeep } from 'lodash-es'
+import { cloneDeep } from 'lodash'
import { ref, reactive, Ref } from 'vue'
import { CascaderProps, UseCascaderItemCallback, CascaderItem } from '../src/cascader-types'
diff --git a/packages/devui-vue/devui/cascader/src/cascader.tsx b/packages/devui-vue/devui/cascader/src/cascader.tsx
index a0e87f10ed..4ff039a2ea 100644
--- a/packages/devui-vue/devui/cascader/src/cascader.tsx
+++ b/packages/devui-vue/devui/cascader/src/cascader.tsx
@@ -1,5 +1,5 @@
// 公共库
-import { cloneDeep } from 'lodash-es'
+import { cloneDeep } from 'lodash'
import { defineComponent, ref, Ref, reactive, watch, toRef } from 'vue'
// 组件
diff --git a/packages/devui-vue/devui/color-picker/__tests__/color-picker.spec.ts b/packages/devui-vue/devui/color-picker/__tests__/color-picker.spec.ts
new file mode 100644
index 0000000000..a4cd0eb1f6
--- /dev/null
+++ b/packages/devui-vue/devui/color-picker/__tests__/color-picker.spec.ts
@@ -0,0 +1,8 @@
+import { mount } from '@vue/test-utils';
+import { ColorPicker } from '../index';
+
+describe('color-picker test', () => {
+ it('color-picker init render', async () => {
+ // todo
+ })
+})
diff --git a/packages/devui-vue/devui/color-picker/index.ts b/packages/devui-vue/devui/color-picker/index.ts
new file mode 100644
index 0000000000..0b15cd3019
--- /dev/null
+++ b/packages/devui-vue/devui/color-picker/index.ts
@@ -0,0 +1,17 @@
+import type { App } from 'vue'
+import ColorPicker from './src/color-picker'
+
+ColorPicker.install = function (app: App): void {
+ app.component(ColorPicker.name, ColorPicker)
+}
+
+export { ColorPicker }
+
+export default {
+ title: 'ColorPicker 颜色选择器',
+ category: '数据录入',
+ status: '80%', // TODO: 组件若开发完成则填入"100%"，并删除该注释
+ install(app: App): void {
+ app.use(ColorPicker as any)
+ }
+}
diff --git a/packages/devui-vue/devui/color-picker/src/color-picker-types.ts b/packages/devui-vue/devui/color-picker/src/color-picker-types.ts
new file mode 100644
index 0000000000..7d6c4164bf
--- /dev/null
+++ b/packages/devui-vue/devui/color-picker/src/color-picker-types.ts
@@ -0,0 +1,26 @@
+import type { PropType, ExtractPropTypes } from 'vue'
+export const colorPickerProps = {
+ modelValue: {
+ type: [Object, String] as PropType
+ },
+ mode: {
+ type: String
+ },
+ showAlpha: {
+ type: Boolean,
+ default: true
+ },
+ dotSize: {
+ type: Number,
+ default: 15
+ },
+ swatches: {
+ type: Array as PropType
+ },
+ showHistory: {
+ type: Boolean,
+ default: true
+ }
+} as const
+
+export type ColorPickerProps = ExtractPropTypes
diff --git a/packages/devui-vue/devui/color-picker/src/color-picker.scss b/packages/devui-vue/devui/color-picker/src/color-picker.scss
new file mode 100644
index 0000000000..1e51158300
--- /dev/null
+++ b/packages/devui-vue/devui/color-picker/src/color-picker.scss
@@ -0,0 +1,83 @@
+@import '../../style/theme/color';
+
+.devui-color-picker {
+ position: relative;
+
+ &-position {
+ position: absolute;
+ z-index: 9999;
+ background-color: $devui-connected-overlay-bg;
+ top: 0;
+ }
+
+ &-color-value {
+ display: flex;
+ position: absolute;
+ z-index: 4;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ font-weight: bold;
+ color: rgb(204, 15, 15);
+ }
+
+ &-container {
+ padding: 3px;
+ border: 1px solid rgb(224, 224, 230);
+ border-radius: 3px;
+
+ &-wrap {
+ width: 100%;
+ height: 26px;
+ box-sizing: content-box;
+ box-shadow: 3px 0 5px #00000014;
+ position: relative;
+ cursor: pointer;
+ overflow: hidden;
+ display: inline-block;
+ vertical-align: middle;
+
+ &-current-color {
+ top: 0;
+ right: 0;
+ left: 0;
+ position: absolute;
+ z-index: 3;
+ width: 100%;
+ height: 100%;
+ }
+
+ &-current-color-transparent {
+ top: 0;
+ right: 0;
+ left: 0;
+ overflow: hidden;
+ padding: 3px;
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ z-index: 2;
+ }
+
+ &-transparent {
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
+ background-repeat: repeat;
+ }
+ }
+ }
+}
+
+.color-picker-transition-enter-from,
+.color-picker-transition-leave-to {
+ opacity: 0;
+}
+
+.color-picker-transition-enter-to,
+.color-picker-transition-leave-from {
+ opacity: 1;
+}
+
+.color-picker-transition-enter-active,
+.color-picker-transition-leave-active {
+ transition: opacity 0.2s ease-in-out;
+}
diff --git a/packages/devui-vue/devui/color-picker/src/color-picker.tsx b/packages/devui-vue/devui/color-picker/src/color-picker.tsx
new file mode 100644
index 0000000000..a3c91a2132
--- /dev/null
+++ b/packages/devui-vue/devui/color-picker/src/color-picker.tsx
@@ -0,0 +1,178 @@
+import {
+ defineComponent,
+ ref,
+ computed,
+ onMounted,
+ watch,
+ nextTick,
+ provide,
+ Teleport,
+ unref,
+ readonly,
+ Transition
+} from 'vue'
+import {
+ useReactive,
+ colorPickerResize,
+ isExhibitionColorPicker,
+ changeColorValue
+} from './utils/composeable'
+import { colorPickerProps, ColorPickerProps } from './color-picker-types'
+import colorPanel from './components/color-picker-panel/color-picker-panel'
+import './color-picker.scss'
+import { parseColor, extractColor, RGBAtoCSS } from './utils/color-utils'
+import { ColorPickerColor } from './utils/color-utils-types'
+export default defineComponent({
+ name: 'DColorPicker',
+ components: {
+ colorPanel
+ },
+ props: colorPickerProps,
+ emits: ['update:modelValue'],
+ setup(props: ColorPickerProps, { emit }) {
+ const DEFAUTL_MODE = 'rgb'
+ const provideData = {
+ showAlpha: useReactive(() => props.showAlpha),
+ swatches: useReactive(() => props.swatches),
+ dotSize: useReactive(() => props.dotSize),
+ showHistory: useReactive(() => props.showHistory)
+ }
+ provide('provideData', readonly(provideData))
+ const initialColor = ref(null)
+ const colorCubeRef = ref()
+ const pickerRef = ref()
+ const containerRef = ref()
+ const left = ref(0)
+ const top = ref(0)
+ const isChangeTextColor = ref(true)
+ const showColorPicker = ref(false)
+ const formItemText = ref(`${props.mode ?? DEFAUTL_MODE}`)
+ const mode = ref(unref(props.mode))
+ onMounted(() => {
+ // resize 响应式 colorpicker
+ window.addEventListener('resize', resize)
+ // 点击展示 colorpicker
+ window.addEventListener('click', isExhibition)
+ })
+ // ** computeds
+ // colorpicker panel 组件位置
+ const colorPickerPostion = computed(() => {
+ if (colorCubeRef.value) {
+ return {
+ transform: `translate(${left.value}px, ${top.value}px)`
+ }
+ }
+ return null
+ })
+ // 交互触发item 颜色 面板 动态修改alpha后要还原 alpha 2021.12.18
+ const tiggerColor = computed(() => {
+ const currentColor = initialColor.value.rgba
+ const trigger = { ...currentColor, a: props.showAlpha ? currentColor.a : 1 }
+ return {
+ backgroundColor: `${RGBAtoCSS(trigger)}`
+ }
+ })
+ // 交互面板 的value 值 动态展示 根据不同 type
+ const formItemValue = computed(() => {
+ return extractColor(initialColor.value, '', formItemText.value, props.showAlpha)
+ })
+ // 动态 根据当前 透明度修改文本颜色 tips：根据不同 面板颜色 目前 不够优雅
+ const textColor = computed(() => {
+ // 数字代表 hsv 中的value 值 纵轴 动态切换 文本颜色
+ return changeColorValue(initialColor.value, 0.5)
+ })
+ // ** emits
+ // 动态 交互面板 文本展示颜色 tips：根据不同 面板颜色 目前 不够优雅
+ function changeTextColor(value: boolean): void {
+ isChangeTextColor.value = value
+ }
+ // 通过修改画板 颜色 修改 v-model 颜色
+ function changePaletteColor(colorMap: ColorPickerColor): void {
+ updateUserColor(colorMap)
+ }
+ // 通过用户点击触发修改 交互面板 文本类型
+ function changeTextModeType(type: string): void {
+ mode.value = type
+ formItemText.value = type
+ }
+
+ // 初始化的时候 确定 colopicker位置 由于 pickerref 默认 为 undefined 所以监听 showcolorpicker
+ watch(
+ () => showColorPicker.value,
+ (newValue) => {
+ const textPalette = colorCubeRef.value?.getBoundingClientRect()
+ newValue &&
+ nextTick(() => {
+ pickerRef.value.style.transform = `translate(${textPalette.left + 'px'}, ${
+ textPalette.top + window.scrollY + textPalette.height + 'px'
+ })`
+ })
+ }
+ )
+ // 监听用户输入 2021.12.10
+ watch(
+ () => props.modelValue,
+ (newValue) => {
+ // 全部转换成对象
+ updateUserColor(parseColor(newValue, initialColor.value))
+ },
+ { immediate: true }
+ )
+ // 更新用户输入颜色 2021.12.10
+ function updateUserColor(color) {
+ initialColor.value = color
+ // 提取颜色 2021.12.10
+ const value = extractColor(initialColor.value, props.modelValue, mode.value, props.showAlpha)
+ emit('update:modelValue', value)
+ }
+ function resize() {
+ return colorPickerResize(colorCubeRef, top, left)
+ }
+ function isExhibition(event: Event) {
+ return isExhibitionColorPicker(event, colorCubeRef, pickerRef, showColorPicker)
+ }
+ return () => {
+ return (
+
+
+
+
+
+
+
{formItemValue.value}
+
+
+
+
+
+ {showColorPicker.value ? (
+
+
+
+ ) : null}
+
+
+
+ {(swatches.value.length !== 0 ? swatches.value : color).map((hex: string) => (
+
changeBasicColor(hex)}
+ class={['devui-color-picker-basic-div']}
+ style={{ backgroundColor: hex }}
+ >
+ ))}
+
+
+ {modelValue.value.toUpperCase()}
+
+ {renderValueInput()}
+
+ {history.value.map((hexa: string) => (
+
onChangeColor(hexa)}
+ class={[
+ 'devui-color-picker-history_color-box',
+ hexa.endsWith('00') ? 'transparent' : ''
+ ]}
+ style={{ backgroundColor: hexa }}
+ >
+ ))}
+
+
+
+
+
+
+
+
+
+
+ {showAlpha ? (
+
+ ) : null}
+
+ {injectData.showHistory ? : null}
+
+ )
+ }
+ }
+})
diff --git a/packages/devui-vue/devui/color-picker/src/utils/color-utils-types.ts b/packages/devui-vue/devui/color-picker/src/utils/color-utils-types.ts
new file mode 100644
index 0000000000..6260930b5a
--- /dev/null
+++ b/packages/devui-vue/devui/color-picker/src/utils/color-utils-types.ts
@@ -0,0 +1,42 @@
+import { Ref } from 'vue'
+
+export type ColorModeType = 'hsl' | 'rgb' | 'hsv' | 'hsv' | 'hex'
+export interface provideColorOptions {
+ mode?: ColorModeType
+ showAlpha?: boolean
+ tab?: string
+ dotSize?: number
+ swatches?: string[]
+ showHistory?: boolean
+}
+export interface CssColorObject {
+ color?: Hex
+}
+export interface ColorPickerColor {
+ alpha: number
+ hex: Hex
+ hexa: Hexa
+ hsla: HSLA
+ hsva: HSVA
+ hue: number
+ rgba: RGBA
+ hsv?: any
+ hsl?: any
+}
+export interface position {
+ left?: Ref
+ top?: Ref
+ right?: Ref
+ bottom?: Ref
+}
+// Types
+export type ColorInt = number
+export type HSV = { h: number; s: number; v: number; }
+export type HSVA = HSV & { a: number; }
+export type RGB = { r: number; g: number; b: number; }
+export type RGBA = RGB & { a: number; }
+export type HSL = { h: number; s: number; l: number; }
+export type HSLA = HSL & { a: number; }
+export type Hex = string
+export type Hexa = string
+export type Color = string | number | {}
diff --git a/packages/devui-vue/devui/color-picker/src/utils/color-utils.ts b/packages/devui-vue/devui/color-picker/src/utils/color-utils.ts
new file mode 100644
index 0000000000..eec542f0e1
--- /dev/null
+++ b/packages/devui-vue/devui/color-picker/src/utils/color-utils.ts
@@ -0,0 +1,481 @@
+// Utilities
+import { ref } from 'vue'
+import { chunk, padEnd, has, keepDecimal } from './helpers'
+import {
+ ColorPickerColor,
+ position,
+ ColorInt,
+ HSV,
+ HSVA,
+ RGB,
+ RGBA,
+ HSL,
+ HSLA,
+ Hex,
+ Hexa,
+ Color
+} from './color-utils-types'
+export function isCssColor(color?: string | false): boolean {
+ return !!color && !!color.match(/^(#|var\(--|(rgb|hsl)a?\()/)
+}
+
+export function colorToInt(color: Color): ColorInt {
+ let rgb
+
+ if (typeof color === 'number') {
+ rgb = color
+ } else if (typeof color === 'string') {
+ let c = color[0] === '#' ? color.substring(1) : color
+ if (c.length === 3) {
+ c = c
+ .split('')
+ .map((char) => char + char)
+ .join('')
+ }
+ if (c.length !== 6) {
+ // consoleWarn(`'${color}' is not a valid rgb color`)
+ }
+ rgb = parseInt(c, 16)
+ } else {
+ throw new TypeError(
+ `Colors can only be numbers or strings, recieved ${
+ color == null ? color : color.constructor.name
+ } instead`
+ )
+ }
+
+ if (rgb < 0) {
+ // consoleWarn(`Colors cannot be negative: '${color}'`)
+ rgb = 0
+ } else if (rgb > 0xffffff || isNaN(rgb)) {
+ // consoleWarn(`'${color}' is not a valid rgb color`)
+ rgb = 0xffffff
+ }
+
+ return rgb
+}
+export function intToHex(color: ColorInt): string {
+ let hexColor: string = color.toString(16)
+
+ if (hexColor.length < 6) hexColor = '0'.repeat(6 - hexColor.length) + hexColor
+
+ return '#' + hexColor
+}
+
+export function colorToHex(color: Color): string {
+ return intToHex(colorToInt(color))
+}
+
+/**
+ * Converts HSVA to RGBA. Based on formula from https://en.wikipedia.org/wiki/HSL_and_HSV
+ *
+ * @param color HSVA color as an array [0-360, 0-1, 0-1, 0-1]
+ */
+export function HSVAtoRGBA(hsva: HSVA): RGBA {
+ const { h, s, v, a } = hsva
+ const f = (n: number) => {
+ const k = (n + h / 60) % 6
+ return v - v * s * Math.max(Math.min(k, 4 - k, 1), 0)
+ }
+
+ const rgb = [f(5), f(3), f(1)].map((v) => Math.round(v * 255))
+
+ return { r: rgb[0], g: rgb[1], b: rgb[2], a }
+}
+
+/**
+ * Converts RGBA to HSVA. Based on formula from https://en.wikipedia.org/wiki/HSL_and_HSV
+ *
+ * @param color RGBA color as an array [0-255, 0-255, 0-255, 0-1]
+ */
+export function RGBAtoHSVA(rgba: RGBA): HSVA {
+ if (!rgba) return { h: 0, s: 1, v: 1, a: 1 }
+
+ const r = rgba.r / 255
+ const g = rgba.g / 255
+ const b = rgba.b / 255
+ const max = Math.max(r, g, b)
+ const min = Math.min(r, g, b)
+
+ let h = 0
+
+ if (max !== min) {
+ if (max === r) {
+ h = 60 * (0 + (g - b) / (max - min))
+ } else if (max === g) {
+ h = 60 * (2 + (b - r) / (max - min))
+ } else if (max === b) {
+ h = 60 * (4 + (r - g) / (max - min))
+ }
+ }
+
+ if (h < 0) h = h + 360
+
+ const s = max === 0 ? 0 : (max - min) / max
+ const hsv = [h, s, max]
+
+ return { h: Math.round(hsv[0]), s: hsv[1], v: hsv[2], a: rgba.a }
+}
+
+export function HSVAtoHSLA(hsva: HSVA): HSLA {
+ const { h, s, v, a } = hsva
+
+ const l = v - (v * s) / 2
+
+ const sprime = l === 1 || l === 0 ? 0 : (v - l) / Math.min(l, 1 - l)
+
+ return { h: Math.round(h), s: sprime, l, a }
+}
+
+export function HSLAtoHSVA(hsl: HSLA): HSVA {
+ const { h, s, l, a } = hsl
+
+ const v = l + s * Math.min(l, 1 - l)
+
+ const sprime = v === 0 ? 0 : 2 - (2 * l) / v
+
+ return { h: Math.round(h), s: sprime, v, a }
+}
+
+export function RGBAtoCSS(rgba: RGBA): string {
+ return `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}, ${rgba.a})`
+}
+
+export function RGBtoCSS(rgba: RGBA): string {
+ return RGBAtoCSS({ ...rgba, a: 1 })
+}
+
+export function RGBAtoHex(rgba: RGBA): Hex {
+ const toHex = (v: number) => {
+ const h = Math.round(v).toString(16)
+ return ('00'.substring(0, 2 - h.length) + h).toUpperCase()
+ }
+
+ return `#${[toHex(rgba.r), toHex(rgba.g), toHex(rgba.b), toHex(Math.round(rgba.a * 255))].join(
+ ''
+ )}`
+}
+
+export function HexToRGBA(hex: Hex): RGBA {
+ const rgba = chunk(hex.slice(1), 2).map((c: string) => parseInt(c, 16))
+
+ return {
+ r: rgba[0],
+ g: rgba[1],
+ b: rgba[2],
+ a: Math.round((rgba[3] / 255) * 100) / 100
+ }
+}
+
+export function HexToHSVA(hex: Hex): HSVA {
+ const rgb = HexToRGBA(hex)
+ return RGBAtoHSVA(rgb)
+}
+
+export function HSVAtoHex(hsva: HSVA): Hex {
+ return RGBAtoHex(HSVAtoRGBA(hsva))
+}
+
+export function parseHex(hex: string): Hex {
+ if (hex.startsWith('#')) {
+ hex = hex.slice(1)
+ }
+
+ hex = hex.replace(/([^0-9a-f])/gi, 'F')
+
+ if (hex.length === 3 || hex.length === 4) {
+ hex = hex
+ .split('')
+ .map((x) => x + x)
+ .join('')
+ }
+
+ if (hex.length === 6) {
+ hex = padEnd(hex, 8, 'F')
+ } else {
+ hex = padEnd(padEnd(hex, 6), 8, 'F')
+ }
+
+ return `#${hex}`.toUpperCase().substring(0, 9)
+}
+
+export function RGBtoInt(rgba: RGBA): ColorInt {
+ return (rgba.r << 16) + (rgba.g << 8) + rgba.b
+}
+
+export function fromHSVA(hsva: HSVA): ColorPickerColor {
+ hsva = { ...hsva }
+ const hexa = HSVAtoHex(hsva)
+ const hsla = HSVAtoHSLA(hsva)
+ const rgba = HSVAtoRGBA(hsva)
+ return {
+ alpha: hsva.a,
+ hex: hexa.substring(0, 7),
+ hexa,
+ hsla,
+ hsva,
+ hue: hsva.h,
+ rgba
+ }
+}
+export function fromRGBA(rgba: RGBA): ColorPickerColor {
+ const hsva = RGBAtoHSVA(rgba)
+ const hexa = RGBAtoHex(rgba)
+ const hsla = HSVAtoHSLA(hsva)
+ const hsv = { h: hsva.h, s: hsva.s, v: hsva.v }
+ const hsl = { h: hsla.h, s: hsla.s, l: hsla.l }
+ return {
+ alpha: hsva.a,
+ hex: hexa.substring(0, 7),
+ hexa,
+ hsla,
+ hsva,
+ hsv,
+ hsl,
+ hue: hsva.h,
+ rgba
+ }
+}
+export function fromHexa(hexa: Hexa): ColorPickerColor {
+ const hsva = HexToHSVA(hexa)
+ const hsla = HSVAtoHSLA(hsva)
+ const rgba = HSVAtoRGBA(hsva)
+ return {
+ alpha: hsva.a,
+ hex: hexa.substring(0, 7),
+ hexa,
+ hsla,
+ hsva,
+ hue: hsva.h,
+ rgba
+ }
+}
+export function fromHSLA(hsla: HSLA): ColorPickerColor {
+ const hsva = HSLAtoHSVA(hsla)
+ const hexa = HSVAtoHex(hsva)
+ const rgba = HSVAtoRGBA(hsva)
+ return {
+ alpha: hsva.a,
+ hex: hexa.substring(0, 7),
+ hexa,
+ hsla,
+ hsva,
+ hue: hsva.h,
+ rgba
+ }
+}
+export function fromHex(hex: Hex): ColorPickerColor {
+ return fromHexa(parseHex(hex))
+}
+
+export function parseColor(color: Color, oldColor?: ColorPickerColor | null): ColorPickerColor {
+ if (!color) return fromRGBA({ r: 0, g: 0, b: 0, a: 1 })
+
+ if (typeof color === 'string') {
+ if (color.indexOf('#') !== -1) {
+ // const hex = color.replace('#', '').trim()
+ // return fromHexa(hex)
+ } else if (color.indexOf('hsl') !== -1) {
+ let alpha = null
+ const parts = color
+ .replace(/hsla|hsl|\(|\)/gm, '')
+ .split(/\s|,/g)
+ .filter((val) => val !== '')
+ .map((val) => parseFloat(val))
+ if (parts.length === 4) {
+ alpha = parts[3]
+ } else if (parts.length === 3) {
+ alpha = 1
+ }
+ return fromHSLA({ h: parts[0], s: parts[1], l: parts[2], a: alpha })
+ } else if (color.indexOf('rgb') !== -1) {
+ let alpha = null
+ const parts = color
+ .replace(/rgba|rgb|\(|\)/gm, '')
+ .split(/\s|,/g)
+ .filter((val) => val !== '')
+ .map((val) => parseFloat(val))
+
+ if (parts.length === 4) {
+ alpha = parts[3]
+ } else if (parts.length === 3) {
+ alpha = 1
+ }
+ return fromRGBA({ r: parts[0], g: parts[1], b: parts[2], a: alpha })
+ } else if (color.indexOf('hsv') !== -1) {
+ let alpha = null
+ const parts = color
+ .replace(/hsva|hsv|\(|\)/gm, '')
+ .split(/\s|,/g)
+ .filter((val) => val !== '')
+ .map((val) => parseFloat(val))
+
+ if (parts.length === 4) {
+ alpha = parts[3]
+ } else if (parts.length === 3) {
+ alpha = 1
+ }
+ return fromHSVA({ h: parts[0], s: parts[1], v: parts[2], a: alpha })
+ }
+ if (color === 'transparent') return fromHexa('#00000000')
+ const hex = parseHex(color)
+ if (oldColor && hex === oldColor.hexa) {
+ return oldColor
+ } else {
+ return fromHexa(hex)
+ }
+ }
+
+ if (typeof color === 'object') {
+ if (color.hasOwnProperty('alpha')) return color
+
+ const a = color.hasOwnProperty('a') ? parseFloat(color.a) : 1
+
+ if (has(color, ['r', 'g', 'b'])) {
+ if (oldColor && color === oldColor.rgba) return oldColor
+ else return fromRGBA({ ...color, a })
+ } else if (has(color, ['h', 's', 'l'])) {
+ if (oldColor && color === oldColor.hsla) return oldColor
+ else return fromHSLA({ ...color, a })
+ } else if (has(color, ['h', 's', 'v'])) {
+ if (oldColor && color === oldColor.hsva) return oldColor
+ else return fromHSVA({ ...color, a })
+ }
+ }
+
+ return fromRGBA({ r: 255, g: 0, b: 0, a: 1 })
+}
+
+function stripAlpha(color: Color, stripAlpha: boolean) {
+ if (stripAlpha) {
+ const { a, ...rest } = color
+
+ return rest
+ }
+
+ return color
+}
+
+export function extractColor(color: ColorPickerColor, input: Color, mode, showAlpha: boolean): any {
+ // 色相
+ const hue = keepDecimal(color.hsla.h, 2)
+ // 饱和度
+ const hslSaturation = keepDecimal(color.hsla.s, 2)
+ // 亮度
+ const lightness = keepDecimal(color.hsla.l, 2)
+ // red
+ const red = keepDecimal(color.rgba.r)
+ // green
+ const green = keepDecimal(color.rgba.g)
+ // blue
+ const blue = keepDecimal(color.rgba.b)
+ // HSV饱和度
+ const hsvSaturation = keepDecimal(color.hsva.s, 2)
+ // value
+ const value = keepDecimal(color.hsva.v, 2)
+ if (input == null) return color
+ function isShowAlpha(mode) {
+ return showAlpha ? mode + 'a' : mode
+ }
+ if (typeof input === 'string') {
+ if (mode === 'hex') {
+ return showAlpha ? color.hexa : color.hex
+ } else if (mode === 'hsl') {
+ return `${isShowAlpha(mode)}(${hue}, ${hslSaturation}, ${lightness}${
+ showAlpha ? ', ' + color.alpha : ''
+ })`
+ } else if (mode === 'rgb') {
+ return `${isShowAlpha(mode)}(${red}, ${green}, ${blue}${showAlpha ? ', ' + color.alpha : ''})`
+ } else if (mode === 'hsv') {
+ return `${isShowAlpha(mode)}(${hue}, ${hsvSaturation}, ${value}${
+ showAlpha ? ', ' + color.alpha : ''
+ })`
+ }
+ return input.length === 7 ? color.hex : color.hexa
+ }
+
+ if (typeof input === 'object') {
+ const shouldStrip = typeof input.a === 'number' && input.a === 0 ? !!input.a : !input.a
+ if (has(input, ['r', 'g', 'b'])) return stripAlpha(color.rgba, shouldStrip)
+ else if (has(input, ['h', 's', 'l'])) return stripAlpha(color.hsla, shouldStrip)
+ else if (has(input, ['h', 's', 'v'])) return stripAlpha(color.hsva, shouldStrip)
+ }
+}
+
+export function hasAlpha(color: Color): boolean {
+ if (!color) return false
+
+ if (typeof color === 'string') {
+ return color.length > 7
+ }
+
+ if (typeof color === 'object') {
+ return has(color, ['a']) || has(color, ['alpha'])
+ }
+
+ return false
+}
+export const elementResize = (parentElement: HTMLElement): position => {
+ const left = ref(0)
+ const top = ref(0)
+ window.addEventListener('resize', () => {
+ left.value = parentElement?.getBoundingClientRect().left
+ top.value =
+ parentElement?.getBoundingClientRect().top + parentElement?.getBoundingClientRect().height
+ })
+ return {
+ left,
+ top
+ }
+}
+
+export function RGBtoRGBA(rgba: RGBA): RGBA {
+ if (typeof rgba === 'string') {
+ rgba = (/rgba?\((.*?)\)/.exec(rgba) || ['', '0,0,0,1'])[1].split(',')
+ return {
+ r: Number(rgba[0]) || 0,
+ g: Number(rgba[1]) || 0,
+ b: Number(rgba[2]) || 0,
+ a: Number(rgba[3] ? rgba[3] : 1) // Avoid the case of 0
+ }
+ } else {
+ return rgba
+ }
+}
+export function RGBtoHSV(rgb: RGB): HSV {
+ if (!rgb) return { h: 0, s: 1, v: 1 }
+
+ const r = rgb.r / 255
+ const g = rgb.g / 255
+ const b = rgb.b / 255
+ const max = Math.max(r, g, b)
+ const min = Math.min(r, g, b)
+
+ let h = 0
+
+ if (max !== min) {
+ if (max === r) {
+ h = 60 * (0 + (g - b) / (max - min))
+ } else if (max === g) {
+ h = 60 * (2 + (b - r) / (max - min))
+ } else if (max === b) {
+ h = 60 * (4 + (r - g) / (max - min))
+ }
+ }
+
+ if (h < 0) h = h + 360
+
+ const s = max === 0 ? 0 : (max - min) / max
+ const hsv = [h, s, max]
+
+ return { h: hsv[0], s: hsv[1].toFixed(2), v: hsv[2].toFixed(2) }
+}
+export function HSVtoHSL(hsv: HSV): HSL {
+ const { h, s, v } = hsv
+
+ const l = Number((v - (v * s) / 2).toFixed(2))
+
+ const sprime = l === 1 || l === 0 ? 0 : (v - l) / Math.min(l, 1 - l)
+
+ return { h, s: Number(sprime.toFixed(2)), l }
+}
diff --git a/packages/devui-vue/devui/color-picker/src/utils/color.ts b/packages/devui-vue/devui/color-picker/src/utils/color.ts
new file mode 100644
index 0000000000..435f0913c4
--- /dev/null
+++ b/packages/devui-vue/devui/color-picker/src/utils/color.ts
@@ -0,0 +1,47 @@
+export const color: string[] = [
+ '#ffffff',
+ '#ffd7d5',
+ '#ffdaa9',
+ '#fffed5',
+ '#d4fa00',
+ '#73fcd6',
+ '#a5c8ff',
+ '#ffacd5',
+ '#ff7faa',
+ '#d6d6d6',
+ '#ffacaa',
+ '#ffb995',
+ '#fffb00',
+ '#73fa79',
+ '#00fcff',
+ '#78acfe',
+ '#d84fa9',
+ '#ff4f79',
+ '#b2b2b2',
+ '#d7aba9',
+ '#ff6827',
+ '#ffda51',
+ '#00d100',
+ '#00d5ff',
+ '#0080ff',
+ '#ac39ff',
+ '#ff2941',
+ '#888888',
+ '#7a4442',
+ '#ff4c00',
+ '#ffa900',
+ '#3da742',
+ '#3daad6',
+ '#0052ff',
+ '#7a4fd6',
+ '#d92142',
+ '#000000',
+ '#7b0c00',
+ '#ff4c41',
+ '#d6a841',
+ '#407600',
+ '#007aaa',
+ '#021eaa',
+ '#797baa',
+ '#ab1942'
+]
diff --git a/packages/devui-vue/devui/color-picker/src/utils/composeable.ts b/packages/devui-vue/devui/color-picker/src/utils/composeable.ts
new file mode 100644
index 0000000000..507f2cf1ad
--- /dev/null
+++ b/packages/devui-vue/devui/color-picker/src/utils/composeable.ts
@@ -0,0 +1,43 @@
+import { Ref, ref, watch } from 'vue'
+import { ColorPickerColor, CssColorObject } from './color-utils-types'
+export function colorPickerResize(
+ colorCubeRef: Ref,
+ top: Ref,
+ left: Ref
+): void {
+ const rect = colorCubeRef.value?.getBoundingClientRect()
+ left.value = rect?.left
+ top.value = rect?.top + window.scrollY + rect.height
+}
+export function isExhibitionColorPicker(
+ event: PointerEvent,
+ colorCubeRef: Ref,
+ pickerRef: Ref,
+ showColorPicker: Ref
+): void {
+ if (colorCubeRef.value?.contains(event.target)) {
+ showColorPicker.value = true
+ }
+ if (!!pickerRef.value && !pickerRef.value?.contains(event.target)) {
+ showColorPicker.value = !showColorPicker.value
+ }
+}
+export function useReactive(source: () => T): Ref {
+ const model = ref()
+ model.value = source()
+ watch(source, (newValue) => {
+ model.value = newValue
+ })
+ return model
+}
+
+// 根据 value 饱和度 判断文本颜色
+export function changeColorValue(value: ColorPickerColor, maxValue: number): CssColorObject {
+ if (value.alpha > maxValue) {
+ return value.hsva.v > maxValue && value.hsva.s < maxValue
+ ? { color: '#000' }
+ : { color: '#fff' }
+ } else {
+ return { color: '#000' }
+ }
+}
diff --git a/packages/devui-vue/devui/color-picker/src/utils/domDragger.ts b/packages/devui-vue/devui/color-picker/src/utils/domDragger.ts
new file mode 100644
index 0000000000..5e520c8073
--- /dev/null
+++ b/packages/devui-vue/devui/color-picker/src/utils/domDragger.ts
@@ -0,0 +1,365 @@
+export const isObject = (val: unknown): val is Record =>
+ val !== null && typeof val === 'object'
+
+export const isString = (val: unknown): val is string => typeof val === 'string'
+
+export const enum NodeType {
+ ELEMENT_NODE = 1,
+ ATTRIBUTE_NODE = 2,
+ TEXT_NODE = 3,
+ CDATA_SECTION_NODE = 4,
+ ENTITY_REFERENCE_NODE = 5,
+ COMMENT_NODE = 6,
+ PROCESSING_INSTRUCTION_NODE = 7,
+ DOCUMENT_NODE = 9
+}
+
+export interface DragEventOptions {
+ drag?: (event: Event) => void
+ start?: (event: Event) => void
+ end?: (event: Event) => void
+}
+
+export type ScrollElement = Element | Window
+
+export class DOMUtils {
+ static isWindow(val: unknown): val is Window {
+ return val === window
+ }
+
+ /**
+ * 添加事件
+ *
+ *
+ * @param element 如果为null将不会添加事件
+ * @param event
+ * @param handler
+ * @param options
+ */
+ static addEventListener(
+ element: HTMLElement | Document | Window | null,
+ event: string,
+ handler: EventListenerOrEventListenerObject,
+ options: boolean | AddEventListenerOptions = false
+ ): void {
+ if (element && event && handler) {
+ element.addEventListener(event, handler, options)
+ }
+ }
+
+ /**
+ * 移除事件
+ *
+ * @param element 如果为null将不会移除事件
+ * @param event
+ * @param handler
+ * @param options
+ */
+ static removeEventListener(
+ element: HTMLElement | Document | Window | null,
+ event: string,
+ handler: EventListenerOrEventListenerObject,
+ options: boolean | EventListenerOptions = false
+ ): void {
+ if (element && event && handler) {
+ element.removeEventListener(event, handler, options)
+ }
+ }
+
+ /**
+ * 触发拖拽事件
+ *
+ * @param element
+ * @param options
+ */
+ static triggerDragEvent(element: HTMLElement, options: DragEventOptions): void {
+ let isDragging = false
+
+ const moveFn = function (event: Event) {
+ options.drag?.(event)
+ }
+
+ const upFn = (event: Event) => {
+ DOMUtils.removeEventListener(document, 'mousemove', moveFn)
+ DOMUtils.removeEventListener(document, 'mouseup', upFn)
+ DOMUtils.removeEventListener(document, 'touchmove', moveFn)
+ DOMUtils.removeEventListener(document, 'touchend', upFn)
+ document.onselectstart = null
+ document.ondragstart = null
+
+ isDragging = false
+ options.end?.(event)
+ }
+ const downFn = (event: Event) => {
+ if (isDragging) return
+ document.onselectstart = () => false
+ document.ondragstart = () => false
+ DOMUtils.addEventListener(document, 'mousemove', moveFn)
+ DOMUtils.addEventListener(document, 'mouseup', upFn)
+ DOMUtils.addEventListener(document, 'touchmove', moveFn)
+ DOMUtils.addEventListener(document, 'touchend', upFn)
+ isDragging = true
+
+ options.start?.(event)
+ }
+ DOMUtils.addEventListener(element, 'mousedown', downFn)
+ DOMUtils.addEventListener(element, 'touchstart', downFn)
+ return
+ }
+
+ static getBoundingClientRect(element: HTMLElement): DOMRect | null {
+ if (element && isObject(element) && element.nodeType === NodeType.ELEMENT_NODE) {
+ return element.getBoundingClientRect()
+ }
+
+ return null
+ }
+
+ /**
+ * 判断是否存在className样式
+ *
+ * @param element
+ * @param className
+ */
+ public static hasClass(element: HTMLElement, className: string): boolean {
+ if (
+ element &&
+ isObject(element) &&
+ isString(className) &&
+ element.nodeType === NodeType.ELEMENT_NODE
+ ) {
+ return element.classList.contains(className.trim())
+ }
+ return false
+ }
+
+ /**
+ * 添加样式
+ *
+ * @param element
+ * @param className
+ */
+ public static addClass(element: HTMLElement, className: string): void {
+ if (
+ element &&
+ isObject(element) &&
+ isString(className) &&
+ element.nodeType === NodeType.ELEMENT_NODE
+ ) {
+ className = className.trim()
+ if (!DOMUtils.hasClass(element, className)) {
+ const cl = element.className
+ element.className = cl ? cl + ' ' + className : className
+ }
+ }
+ }
+
+ /**
+ * 移除样式
+ *
+ * @param element
+ * @param className
+ */
+ public static removeClass(element: HTMLElement, className: string): void {
+ if (
+ element &&
+ isObject(element) &&
+ isString(className) &&
+ element.nodeType === NodeType.ELEMENT_NODE &&
+ typeof element.className === 'string'
+ ) {
+ className = className.trim()
+ const classes = element.className.trim().split(' ')
+ for (let i = classes.length - 1; i >= 0; i--) {
+ classes[i] = classes[i].trim()
+ if (!classes[i] || classes[i] === className) {
+ classes.splice(i, 1)
+ }
+ }
+ element.className = classes.join(' ')
+ }
+ }
+
+ /**
+ * 切换样式
+ *
+ * @param element
+ * @param className
+ * @param force
+ */
+ public static toggleClass(element: HTMLElement, className: string, force?: boolean): void {
+ if (
+ element &&
+ isObject(element) &&
+ isString(className) &&
+ element.nodeType === NodeType.ELEMENT_NODE
+ ) {
+ element.classList.toggle(className, force)
+ }
+ }
+
+ /**
+ * 替换样式
+ *
+ * @param element
+ * @param oldClassName
+ * @param newClassName
+ */
+ public static replaceClass(
+ element: HTMLElement,
+ oldClassName: string,
+ newClassName: string
+ ): void {
+ if (
+ element &&
+ isObject(element) &&
+ isString(oldClassName) &&
+ isString(newClassName) &&
+ element.nodeType === NodeType.ELEMENT_NODE
+ ) {
+ oldClassName = oldClassName.trim()
+ newClassName = newClassName.trim()
+ DOMUtils.removeClass(element, oldClassName)
+ DOMUtils.addClass(element, newClassName)
+ }
+ }
+
+ static getScrollTop(el: ScrollElement): number {
+ const top = 'scrollTop' in el ? el.scrollTop : el.pageYOffset
+
+ // iOS scroll bounce cause minus scrollTop
+ return Math.max(top, 0)
+ }
+
+ static setScrollTop(el: ScrollElement, value: number): void {
+ if ('scrollTop' in el) {
+ el.scrollTop = value
+ } else {
+ el.scrollTo(el.scrollX, value)
+ }
+ }
+
+ static getRootScrollTop(): number {
+ return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
+ }
+
+ static setRootScrollTop(value: number): void {
+ DOMUtils.setScrollTop(window, value)
+ DOMUtils.setScrollTop(document.body, value)
+ }
+
+ static getElementTop(el: ScrollElement, scroller?: HTMLElement): number {
+ if (DOMUtils.isWindow(el)) {
+ return 0
+ }
+
+ const scrollTop = scroller ? DOMUtils.getScrollTop(scroller) : DOMUtils.getRootScrollTop()
+ return el.getBoundingClientRect().top + scrollTop
+ }
+
+ static getVisibleHeight(el: ScrollElement): number {
+ if (DOMUtils.isWindow(el)) {
+ return el.innerHeight
+ }
+ return el.getBoundingClientRect().height
+ }
+
+ static isHidden(el: HTMLElement): boolean {
+ if (!el) {
+ return false
+ }
+
+ const style = window.getComputedStyle(el)
+ const hidden = style.display === 'none'
+
+ // 在以下情况下，offsetParent返回null:
+ // 1. 元素或其父元素的display属性设置为none.
+ // 2. 元素的position属性设置为fixed
+ const parentHidden = el.offsetParent === null && style.position !== 'fixed'
+
+ return hidden || parentHidden
+ }
+
+ /**
+ * 触发事件
+ *
+ * @param el
+ * @param type
+ */
+ static triggerEvent(el: Element, type: string): void {
+ if ('createEvent' in document) {
+ // modern browsers, IE9+
+ const e = document.createEvent('HTMLEvents')
+ e.initEvent(type, false, true)
+ el.dispatchEvent(e)
+ }
+ }
+
+ /**
+ * 计算相对于中心点的旋转角度
+ * @param element
+ * @param event
+ */
+ static calcAngle(element: HTMLElement, event: MouseEvent): number {
+ const rect = element.getBoundingClientRect()
+
+ const originX = rect.left + rect.width / 2
+ const originY = rect.top + rect.height / 2
+
+ //获得中心点和鼠标坐标连线，与y轴正半轴之间的夹角
+ const x = Math.abs(originX - event.clientX)
+ const y = Math.abs(originY - event.clientY)
+ const z = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2))
+ const cos = y / z
+ const rad = Math.acos(cos) //用反三角函数求弧度
+ let angle = Math.floor(180 / (Math.PI / rad)) //将弧度转换成角度
+
+ if (event.clientX > originX && event.clientY > originY) {
+ //鼠标在第四象限
+ angle = 180 - angle
+ }
+
+ if (event.clientX == originX && event.clientY > originY) {
+ //鼠标在y轴负方向上
+ angle = 180
+ }
+
+ if (event.clientX > originX && event.clientY == originY) {
+ //鼠标在x轴正方向上
+ angle = 90
+ }
+
+ if (event.clientX < originX && event.clientY > originY) {
+ //鼠标在第三象限
+ angle = 180 + angle
+ }
+
+ if (event.clientX < originX && event.clientY == originY) {
+ //鼠标在x轴负方向
+ angle = 270
+ }
+
+ if (event.clientX < originX && event.clientY < originY) {
+ //鼠标在第二象限
+ angle = 360 - angle
+ }
+
+ return angle
+ }
+
+ /**
+ * querySelector
+ *
+ * @param selectors
+ * @param parentElement
+ */
+ static querySelector(
+ selectors: string,
+ parentElement?: HTMLElement
+ ): E | null {
+ if (parentElement) {
+ return parentElement.querySelector(selectors)
+ }
+ return document.querySelector(selectors)
+ }
+}
diff --git a/packages/devui-vue/devui/color-picker/src/utils/helpers.ts b/packages/devui-vue/devui/color-picker/src/utils/helpers.ts
new file mode 100644
index 0000000000..9052074fb2
--- /dev/null
+++ b/packages/devui-vue/devui/color-picker/src/utils/helpers.ts
@@ -0,0 +1,48 @@
+export function padEnd(str: string, length: number, char = '0'): string {
+ return str + char.repeat(Math.max(0, length - str.length))
+}
+export function chunk(str: string, size = 1): string[] {
+ const chunked: string[] = []
+ let index = 0
+ while (index < str.length) {
+ chunked.push(str.substr(index, size))
+ index += size
+ }
+ return chunked
+}
+export function mergeObjects(source, target): any {
+ return Object.assign(source, target)
+}
+export function parseHex(value: string): number {
+ return parseInt(value, 16)
+}
+export const clamp = (value: number, min: number, max: number): number => {
+ return min < max
+ ? value < min
+ ? min
+ : value > max
+ ? max
+ : value
+ : value < max
+ ? max
+ : value > min
+ ? min
+ : value
+}
+export const upperCase = (word: string): string => {
+ return word.toLocaleUpperCase()
+}
+export const lowerCase = (word: string): string => {
+ return word.toLocaleLowerCase()
+}
+export function splitStr(str: string, chars: string): string {
+ return str.split(chars)[0]
+}
+// 保留小数工具
+export function keepDecimal(value: number, digits = 0): number {
+ const COUNT_VALUE = 10 ** digits
+ return Math.round(value * COUNT_VALUE) / COUNT_VALUE
+}
+export function has(obj: any, key: string[]): boolean {
+ return key.every((k) => obj.hasOwnProperty(k))
+}
diff --git a/packages/devui-vue/devui/comment/index.ts b/packages/devui-vue/devui/comment/index.ts
index d9fb1203f0..c55970c9e5 100644
--- a/packages/devui-vue/devui/comment/index.ts
+++ b/packages/devui-vue/devui/comment/index.ts
@@ -10,7 +10,7 @@ export { Comment }
export default {
title: 'Comment 评论',
category: '数据展示',
- status: '70%', // TODO: 组件若开发完成则填入"已完成"，并删除该注释
+ status: '100%',
install(app: App): void {
app.use(Comment as any)
}
diff --git a/packages/devui-vue/devui/comment/src/comment.scss b/packages/devui-vue/devui/comment/src/comment.scss
index fb2752bd93..a8e5740774 100644
--- a/packages/devui-vue/devui/comment/src/comment.scss
+++ b/packages/devui-vue/devui/comment/src/comment.scss
@@ -1,30 +1,39 @@
@import '../../styles-var/devui-var.scss';
+
.devui-comment {
display: flex;
align-items: flex-start;
- &-avatar{
+
+ &-avatar {
margin: 0 16px 0 0;
}
+
&-right{
-
+
}
- &-head{
+
+ &-head {
display: flex;
align-items: center;
}
- &-author{
+
+ &-author {
padding: 0 8px 0 0;
font-size: $devui-font-size;
color: $devui-text-weak;
}
- &-datetime{
+
+ &-datetime {
font-size: $devui-font-size;
color: $devui-aide-text;
}
- &-content{
+
+ &-content {
font-size: $devui-text;
}
- &-actions{
+
+ &-actions {
+ padding: 0;
list-style-type: none;
margin: 12px 0 0;
}
diff --git a/packages/devui-vue/devui/comment/src/comment.tsx b/packages/devui-vue/devui/comment/src/comment.tsx
index aeec79fefd..438063c82d 100644
--- a/packages/devui-vue/devui/comment/src/comment.tsx
+++ b/packages/devui-vue/devui/comment/src/comment.tsx
@@ -1,7 +1,20 @@
import { defineComponent } from 'vue'
import { commentProps, CommentProps } from './comment-types'
import './comment.scss'
-
+/*
+ * date:2021-12-18
+ * author:njl
+ *
+ * actions 底部操作栏
+ * author 作者区域
+ * avatar 头像区域
+ * content 内容操作区域
+ * datetime 时间区域
+ * avatarDom 头像可只传入地址
+ * actionDom 操作区域根据传入的组件数量来生成相应的li标签
+ *
+ * 目前可成为参数的为 avatar，actions 其他均为具名插槽的形式，后期可继续根据需要改造
+**/
export default defineComponent({
name: 'DComment',
props: commentProps,
@@ -10,14 +23,15 @@ export default defineComponent({
setup(props, { slots }) {
return () => {
const getAction = (actions:any) => {
+
if (!actions || !actions.length) {
return null;
}
- const actionList = actions.map((action:any, index:number) => {action});
+ const actionList = actions.map((action:any, index:number) => );
return actionList;
};
- const actions = props.actions ?? slots.actions?.();
+ const actions = props.actions ?? slots.actions?.();
const author = props.author ?? slots.author?.();
const avatar = props.avatar ?? slots.avatar?.();
const content = props.content ?? slots.content?.();
diff --git a/packages/devui-vue/devui/dragdrop/index.ts b/packages/devui-vue/devui/dragdrop/index.ts
index b203021a07..d1953c4993 100644
--- a/packages/devui-vue/devui/dragdrop/index.ts
+++ b/packages/devui-vue/devui/dragdrop/index.ts
@@ -1,8 +1,9 @@
import type { App } from 'vue'
import DraggableDirective from './src/draggable-directive'
import DroppableDirective from './src/droppable-directive'
+import SortableDirective from './src/sortable-directive'
-export { DraggableDirective, DroppableDirective }
+export { DraggableDirective, DroppableDirective, SortableDirective }
export default {
title: 'Dragdrop 拖拽',
@@ -11,5 +12,6 @@ export default {
install(app: App): void {
app.directive('DDraggable', DraggableDirective)
app.directive('DDroppable', DroppableDirective)
+ app.directive('DSortable', SortableDirective)
}
}
diff --git a/packages/devui-vue/devui/dragdrop/src/constant.ts b/packages/devui-vue/devui/dragdrop/src/constant.ts
new file mode 100644
index 0000000000..98c9224ec4
--- /dev/null
+++ b/packages/devui-vue/devui/dragdrop/src/constant.ts
@@ -0,0 +1 @@
+export const shadowId = 'shadow0611'
\ No newline at end of file
diff --git a/packages/devui-vue/devui/dragdrop/src/draggable-directive.ts b/packages/devui-vue/devui/dragdrop/src/draggable-directive.ts
index c53e3342c1..fa333e2bdf 100644
--- a/packages/devui-vue/devui/dragdrop/src/draggable-directive.ts
+++ b/packages/devui-vue/devui/dragdrop/src/draggable-directive.ts
@@ -1,11 +1,41 @@
+import { changeDragState, deleteInsertedSortableShadow } from './utils'
+import { shadowId } from './constant'
+
export default {
- mounted(el: HTMLElement): void {
- el.setAttribute('draggable', 'true')
+ /**
+ *
+ * @param el
+ * @description
+ * 1、绑定该指令的element将会具备拖拽能力
+ * 2、为各元素进行初始化配置
+ * 2.1、dragFlag: 是否处于拖拽中
+ * 2.2、dragOverFlag： 是否处于可放置区域
+ *
+ * 1、整体思路
+ * 1.1、为每个绑定drag指令的元素维护状态
+ * 1.1.1、状态集合：dragStart、drag、dragover、drop、shouldCreateShadow
+ *
+ * 1.2、进入drop区域后，确保drop区域能够获取正在进行drag的元素
+ */
+ mounted(el: HTMLElement, binding: unknown): void {
+ el.setAttribute('draggable', 'true');
el.style.cursor = 'grab'
// dragstart/drag/dragend
- el.addEventListener('dragstart', (event: DragEvent) => {
- event.dataTransfer.setData('originId', el.id)
- })
+ el.addEventListener('drag', () => {
+ changeDragState(el, el.id, 'true', 'true', 'false', 'false', 'false', 'true')
+ if (binding.instance.$root.dropElement && document.getElementById(shadowId)){
+ deleteInsertedSortableShadow(binding.instance.$root.dropElement) // 如何让它仅执行1次？
+ binding.instance.$root.dropElement = null
+ }
+ }, false)
+
+ // dragStart事件为每个绑定元素进行初始化
+ el.addEventListener('dragstart', ()=>{
+ // el or binding.instance or vnode.context
+ changeDragState(el, el.id, 'true', 'true', 'false', 'false', 'false', 'false')
+ binding.instance.$root.identity = el.id
+ el.dataset.dragArea = el.parentNode.className
+ }, false)
},
}
diff --git a/packages/devui-vue/devui/dragdrop/src/droppable-directive.ts b/packages/devui-vue/devui/dragdrop/src/droppable-directive.ts
index d60618868e..289ad8ef7e 100644
--- a/packages/devui-vue/devui/dragdrop/src/droppable-directive.ts
+++ b/packages/devui-vue/devui/dragdrop/src/droppable-directive.ts
@@ -1,15 +1,49 @@
+import { changeDragState } from './utils'
+
export default {
- mounted(el: HTMLElement): void {
- // dragenter/dragover/dragend/drop
+ /**
+ *
+ * @param el
+ * @description
+ * dragOver:
+ * 1、生成与清除阴影的时机
+ * 1.1、生成时机（只生成一次）： dragFlag === true && dragOverFlag === true
+ * drop:
+ * 1、完成放的操作
+ * 1.1、清除相应的阴影
+ */
+ mounted(el: HTMLElement, binding:unknown): void {
+ // dragenter/dragover/dragend/drop
el.addEventListener('dragover', (event: DragEvent) => {
event.preventDefault()
- })
+ const dragId = binding.instance.$root.identity
+ changeDragState(document.getElementById(dragId), dragId, 'true', 'false', 'true', 'false', 'false', 'false')
+ document.getElementById(dragId).dataset.dropArea = [...el.childNodes][1].className
+ }, false)
+ // 新增两个标识解决战斗，即dragStart区域、drop区域、sortableDrop区域
el.addEventListener('drop', (event: DragEvent) => {
- const originId = event.dataTransfer.getData('originId')
- const originNodeCopy = document.getElementById(originId).cloneNode(true)
- const targetNode: any = event.target
- targetNode.append(originNodeCopy)
+ event.preventDefault()
+ const dragId = binding.instance.$root.identity
+ if (document.getElementById(dragId).dataset.dropArea == document.getElementById(dragId).dataset.dragArea){
+ return
+ }
+ // 如何定义可放置区域这个问题得商榷一下
+ const childrenArr = [...Array.from(el.children)[1].children]
+ if (childrenArr.length > 0){
+ for (let index = 0; index < childrenArr.length; index++){
+ const childrenYRange = childrenArr[index].getBoundingClientRect().top + childrenArr[index].offsetHeight / 2
+ if (parseFloat(event.clientY) < parseFloat(childrenYRange)){
+ el.children[1].insertBefore(document.getElementById(dragId), childrenArr[index])
+ break
+ }
+ if (index === childrenArr.length-1){
+ el.children[1].appendChild(document.getElementById(dragId))
+ }
+ }
+ }else {
+ el.childNodes[1].appendChild(document.getElementById(dragId))
+ }
})
},
}
diff --git a/packages/devui-vue/devui/dragdrop/src/sortable-directive.ts b/packages/devui-vue/devui/dragdrop/src/sortable-directive.ts
new file mode 100644
index 0000000000..2066b831d4
--- /dev/null
+++ b/packages/devui-vue/devui/dragdrop/src/sortable-directive.ts
@@ -0,0 +1,48 @@
+import { shadowId } from './constant'
+import { changeDragState, createInsertSortableShadow, insertDragElement } from './utils'
+
+
+export default {
+ /**
+ *
+ * @param el
+ * @description
+ * 此命令用于将元素变为可放置的元素并且支持排序
+ * dragover:
+ * 1、说明此时进入可排序放置的区域
+ * 2、此时应该生成相应的可排序的shadow
+ * drop:
+ * 1、可放置区域里如果没有拖拽元素，直接放置
+ * 2、可放置区域里如果有其他的可拖拽元素，需要对比放置到正确的位置上
+ */
+ mounted(el: HTMLElement, binding:unknown):void {
+ el.addEventListener('dragover', function (event: DragEvent){
+ event.preventDefault()
+ const targetNode: any = event.target;
+ const dragId = binding.instance.$root.identity
+ if (!binding.instance.$root.dropElement){
+ binding.instance.$root.dropElement = [...el.childNodes][1]
+ }
+ changeDragState(document.getElementById(binding.instance.$root.identity), binding.instance.$root.identity, 'true', 'false', 'true', 'false', 'true', 'false')
+ const { dragover, shouldCreateShadow } = document.getElementById(dragId).dataset
+ if (dragover == 'true'){
+ if (shouldCreateShadow == 'true'){
+ createInsertSortableShadow([...targetNode.children][1], event, dragId)
+ }
+ }
+
+ })
+ el.addEventListener('drop', function (event: DragEvent){
+ // 获取可放置区域
+ const dropArea = [...el.childNodes][1]
+ const dragId = binding.instance.$root.identity
+ dropArea.removeChild(document.getElementById(shadowId))
+ if ([...dropArea.childNodes].length == 0){
+ dropArea.appendChild(document.getElementById(dragId))
+ }else {
+ insertDragElement(dropArea, dragId, event)
+ }
+ changeDragState(document.getElementById(dragId), dragId, 'false', 'false', 'false', 'true', 'false', 'false')
+ })
+ }
+}
\ No newline at end of file
diff --git a/packages/devui-vue/devui/dragdrop/src/utils.ts b/packages/devui-vue/devui/dragdrop/src/utils.ts
new file mode 100644
index 0000000000..0b07447eba
--- /dev/null
+++ b/packages/devui-vue/devui/dragdrop/src/utils.ts
@@ -0,0 +1,143 @@
+import { shadowId } from './constant'
+
+/**
+ *
+ * @param id
+ * @descriprion
+ * 根据id获取非内联样式元素的样式
+ */
+function getElementStyle (id: string, styleName: string):string {
+ return document.getElementById(id).currentStyle ? document.getElementById(id).currentStyle[styleName] : window.getComputedStyle(
+ document.getElementById(id),
+ styleName
+ )
+}
+
+/**
+ *
+ * @param originId
+ * @description
+ * 根据拖拽的id生成相应的阴影
+ * 如何生成shadow？
+ * 情况一： dragable -> drop without sortable
+ * 情况二： anything -> drop without anything
+ */
+function createShadow (originId:string):HTMLElement {
+ const shadow = document.createElement('div');
+ shadow.id = shadowId
+ shadow.style.background = 'rgb(206, 215, 255)'
+ shadow.style.width = getElementStyle(originId, 'width')
+ shadow.style.height = '20px'
+ return shadow
+}
+
+/**
+ *
+ * @param el
+ * @param originId
+ * @param dragStart
+ * @param drag
+ * @param dragover
+ * @param drop
+ * @param shouldCreateShadow
+ * @param dragFlag
+ * @description
+ * 改变拖拽元素相应的状态
+ */
+function changeDragState (el:string, originId:string, dragStart:string, drag:string, dragover:string, drop:string, shouldCreateShadow:string, dragFlag: string): void{
+ el.dataset.originId = originId
+ el.dataset.dragStart = dragStart
+ el.dataset.dragover = dragover
+ el.dataset.drop = drop
+ el.dataset.shouldCreateShadow = shouldCreateShadow
+ el.dataset.dragFlag = dragFlag
+}
+
+/**
+ *
+ * @param compareElement
+ * @returns
+ * @description
+ * 计算可对比元素的高度
+ */
+function computeCompareElementHeight (compareElement: HTMLCollection): unknown{
+ return compareElement.getBoundingClientRect().top + Math.floor(compareElement.offsetHeight / 2)
+}
+
+/**
+ *
+ * @param sortDropArea
+ * @param mouseObject
+ * 1、首先确认可放置区域
+ * 2、确保每个元素只生成一次shadow
+ * 3、
+ */
+function createInsertSortableShadow (sortDropArea: unknown, mouseObject: unknown, originId: string):void {
+ const sortDropAreaArr: Array = [...sortDropArea.children]
+ if (sortDropAreaArr.length == 0){
+ if (!document.getElementById(shadowId)){
+ const shadowElement = createShadow(originId)
+ sortDropArea.appendChild(shadowElement)
+ }
+ }else {
+ for (let index = 0; index < sortDropAreaArr.length; index++){
+ const compareHeight = computeCompareElementHeight(sortDropAreaArr[index])
+ document.getElementById(shadowId) ? sortDropArea.removeChild(document.getElementById(shadowId)) : null
+ if (index == sortDropAreaArr.length-1){
+ sortDropArea.appendChild(createShadow(originId))
+ break
+ }
+ if (Math.floor(mouseObject.clientY)<= compareHeight){
+ sortDropArea.insertBefore(createShadow(originId), sortDropAreaArr[index])
+ break
+ }
+ }
+ }
+}
+
+/**
+ *
+ * @param dropAreaContainer
+ * @param dragId
+ * @param mouseObject
+ * @description
+ * 向sortable区域插入拖拽元素
+ */
+function insertDragElement (dropAreaContainer: HTMLCollection, dragId: string, mouseObject: MouseEvent): void {
+ for (let index = 0; index < [...dropAreaContainer.children].length; index++){
+ if (index == [...dropAreaContainer.children].length-1){
+ dropAreaContainer.appendChild(document.getElementById(dragId))
+ break
+ }
+ if (Math.floor(mouseObject.clientY) <= computeCompareElementHeight([...dropAreaContainer.children][index])){
+ dropAreaContainer.insertBefore(document.getElementById(dragId), [...dropAreaContainer.children][index])
+ break
+ }
+ }
+}
+
+/**
+ *
+ * @param dropSortArea
+ * @description
+ * 删除可排序区域中的shadow
+ */
+function deleteInsertedSortableShadow (dropSortArea: unknown):void{
+ if (dropSortArea){
+ if (document.getElementById(shadowId)){
+ if (dropSortArea.contains(document.getElementById(shadowId))){
+ dropSortArea.removeChild(document.getElementById(shadowId))
+ }
+ }
+ }
+}
+
+
+export {
+ createShadow,
+ changeDragState,
+ createInsertSortableShadow,
+ deleteInsertedSortableShadow,
+ computeCompareElementHeight,
+ insertDragElement
+}
\ No newline at end of file
diff --git a/packages/devui-vue/devui/drawer/index.ts b/packages/devui-vue/devui/drawer/index.ts
index 2ad72eb001..f0b0a21e7d 100644
--- a/packages/devui-vue/devui/drawer/index.ts
+++ b/packages/devui-vue/devui/drawer/index.ts
@@ -1,18 +1,21 @@
-import type { App } from 'vue'
-import Drawer from './src/drawer'
+import type { App } from 'vue';
+import Drawer from './src/drawer';
+import DrawerService from './src/drawer-service';
-Drawer.install = function(app: App): void {
- app.component(Drawer.name, Drawer)
-}
-
-export { Drawer }
+export { Drawer, DrawerService };
+// TODO: no-service model exists memory leak
+// rest tasks
+// 1. draggable width
+// 2. function of the 1st icon in header-component
+// 3. rest service-model api
+// 4. typescript type of props
export default {
title: 'Drawer 抽屉板',
category: '反馈',
- status: '50%',
+ status: '75%',
install(app: App): void {
-
- app.use(Drawer as any)
- }
-}
+ app.component(Drawer.name, Drawer);
+ app.config.globalProperties.$drawerService = new DrawerService();
+ },
+};
diff --git a/packages/devui-vue/devui/drawer/src/components/drawer-body.scss b/packages/devui-vue/devui/drawer/src/components/drawer-body.scss
deleted file mode 100644
index 707fae3801..0000000000
--- a/packages/devui-vue/devui/drawer/src/components/drawer-body.scss
+++ /dev/null
@@ -1,43 +0,0 @@
-@import '../../../style/devui.scss';
-
-.devui-drawer {
- position: fixed;
- top: 0;
- left: 0;
- height: 100vh;
-}
-
-.devui-overlay-wrapper {
- display: flex;
- justify-content: center;
- align-items: center;
- position: absolute;
- top: 0;
- bottom: 0;
- width: 100vw;
-}
-
-.devui-overlay-backdrop {
- position: absolute;
- top: 0;
- left: 0;
- background: $devui-shadow;
- width: 100vw;
- height: 100vh;
-}
-
-.devui-drawer-nav {
- position: absolute;
- top: 0;
- bottom: 0;
- border-radius: $devui-border-radius;
- background: $devui-base-bg;
-}
-
-.devui-drawer-content {
- border-radius: $devui-border-radius;
- overflow: auto;
- box-shadow: $devui-shadow-length-fullscreen-overlay $devui-shadow;
- padding: 20px;
- height: 100vh;
-}
\ No newline at end of file
diff --git a/packages/devui-vue/devui/drawer/src/components/drawer-body.tsx b/packages/devui-vue/devui/drawer/src/components/drawer-body.tsx
deleted file mode 100644
index a52965f7c0..0000000000
--- a/packages/devui-vue/devui/drawer/src/components/drawer-body.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import { defineComponent, inject, computed } from 'vue'
-
-import './drawer-body.scss'
-
-export default defineComponent({
- name: 'DrawerBody',
- setup(props, { slots }) {
- const isFullScreen: any = inject('isFullScreen')
- const closeDrawer: any = inject('closeDrawer')
- const zindex: number = inject('zindex')
- const isCover: boolean = inject('isCover')
- const position: any = inject('position')
- const width: any = inject('width')
- const visible: boolean = inject('visible')
- const backdropCloseable: any = inject('backdropCloseable')
-
- const navRight = computed(() => position.value === 'right' ? { 'right': 0 } : { 'left': 0 })
- const navWidth = computed(() => isFullScreen.value ? '100vw' : width.value)
-
- const clickContent = (e) => {
- e.stopPropagation()
- }
-
- const handleDrawerClose = () => {
- if (!backdropCloseable.value) return;
- closeDrawer();
- }
-
- return {
- zindex,
- slots,
- isCover,
- navRight,
- navWidth,
- visible,
- clickContent,
- handleDrawerClose,
- }
- },
-
- render() {
- const {
- zindex, slots, isCover, navRight, navWidth, visible, handleDrawerClose
- } = this
-
- if (!visible) return null
-
- return (
-
- {isCover ?
: null}
-
-
-
- {slots.default ? slots.default() : null}
-
-
-
-
内容区域
- }
-})
\ No newline at end of file
diff --git a/packages/devui-vue/devui/drawer/src/components/drawer-header.scss b/packages/devui-vue/devui/drawer/src/components/drawer-header.scss
deleted file mode 100644
index ee1776a5d0..0000000000
--- a/packages/devui-vue/devui/drawer/src/components/drawer-header.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-@import '../drawer.scss';
-
-.devui-drawer-header {
- display: flex;
- flex-direction: row;
- justify-content: flex-end;
-
- & .devui-drawer-header-item + .devui-drawer-header-item {
- padding-left: 12px;
- }
-}
diff --git a/packages/devui-vue/devui/drawer/src/components/drawer-header.tsx b/packages/devui-vue/devui/drawer/src/components/drawer-header.tsx
deleted file mode 100644
index 7e3e3a05c0..0000000000
--- a/packages/devui-vue/devui/drawer/src/components/drawer-header.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { defineComponent, ref, inject, computed } from 'vue'
-
-import './drawer-header.scss'
-
-export default defineComponent({
- name: 'DrawerHeader', // 头部
- emits: ['toggleFullScreen', 'close'],
- setup(props, ctx) {
- const isFullScreen = ref(false)
-
- const visible: boolean = inject('visible')
-
- const fullScreenClassName = computed(() => isFullScreen.value ? 'icon icon-minimize' : 'icon icon-maxmize')
-
- const handleFullScreen = (e) => {
- e.stopPropagation()
- isFullScreen.value = !isFullScreen.value
- ctx.emit('toggleFullScreen')
- }
-
- const handleDrawerClose = () => {
- ctx.emit('close')
- }
-
- return { fullScreenClassName, visible, handleFullScreen, handleDrawerClose, }
- },
- render() {
- const { handleFullScreen, handleDrawerClose, visible, fullScreenClassName } = this
-
- if (!visible) return null
-
- return (
-
- )
- }
-})
diff --git a/packages/devui-vue/devui/drawer/src/components/drawer-overlay.scss b/packages/devui-vue/devui/drawer/src/components/drawer-overlay.scss
new file mode 100644
index 0000000000..1cec622700
--- /dev/null
+++ b/packages/devui-vue/devui/drawer/src/components/drawer-overlay.scss
@@ -0,0 +1,20 @@
+@import '../../../styles-var/devui-var.scss';
+
+.devui-drawer-overlay {
+ position: fixed;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ background-color: $devui-shadow;
+}
+
+.drawer-overlay-fade-enter-active,
+.drawer-overlay-fade-leave-active {
+ transition: opacity 0.1s linear;
+}
+
+.drawer-overlay-fade-enter-from,
+.drawer-overlay-fade-leave-to {
+ opacity: 0;
+}
diff --git a/packages/devui-vue/devui/drawer/src/components/drawer-overlay.tsx b/packages/devui-vue/devui/drawer/src/components/drawer-overlay.tsx
new file mode 100644
index 0000000000..973e4b3a0d
--- /dev/null
+++ b/packages/devui-vue/devui/drawer/src/components/drawer-overlay.tsx
@@ -0,0 +1,18 @@
+import { defineComponent, Transition } from 'vue';
+import type { SetupContext } from 'vue';
+import { drawerOverlayProps, DrawerOverlayProps } from '../drawer-types';
+import './drawer-overlay.scss';
+
+export default defineComponent({
+ name: 'DDrawerOverlay',
+ props: drawerOverlayProps,
+ emits: ['click'],
+ setup(props: DrawerOverlayProps, ctx: SetupContext) {
+ const handleClick = (e: Event) => {
+ ctx.emit('click', e);
+ };
+ return () => (
+ {props.visible && }
+ );
+ },
+});
diff --git a/packages/devui-vue/devui/drawer/src/drawer-service.tsx b/packages/devui-vue/devui/drawer/src/drawer-service.tsx
new file mode 100644
index 0000000000..22dbae350d
--- /dev/null
+++ b/packages/devui-vue/devui/drawer/src/drawer-service.tsx
@@ -0,0 +1,58 @@
+import { createApp, nextTick, onUnmounted, reactive } from 'vue';
+import type { App } from 'vue';
+import Drawer from './drawer';
+import { DrawerOptions } from './drawer-types';
+
+const defaultOptions: DrawerOptions = {
+ modelValue: false,
+ content: '',
+ zIndex: 1000,
+ showOverlay: true,
+ escKeyCloseable: true,
+ position: 'right',
+ lockScroll: true,
+ closeOnClickOverlay: true,
+};
+
+function initInstance(state: DrawerOptions): App {
+ const container = document.createElement('div');
+ const content = state.content;
+ delete state.content;
+
+ const app: App = createApp({
+ setup() {
+ const handleVisibleChange = () => {
+ state.modelValue = false;
+ };
+ onUnmounted(() => {
+ console.log(111);
+ document.body.removeChild(container);
+ });
+ return () => (
+
+ {content}
+
+ );
+ },
+ });
+
+ document.body.appendChild(container);
+ app.mount(container);
+ return app;
+}
+
+export default class DrawerService {
+ open(options: DrawerOptions): { close: () => void } {
+ const state: DrawerOptions = reactive({ ...defaultOptions, ...options });
+ const app = initInstance(state);
+
+ state.modelValue = true;
+
+ return {
+ close: () => {
+ state.modelValue = false;
+ app.unmount();
+ },
+ };
+ }
+}
diff --git a/packages/devui-vue/devui/drawer/src/drawer-types.ts b/packages/devui-vue/devui/drawer/src/drawer-types.ts
index 207cf89ef5..498f09c187 100644
--- a/packages/devui-vue/devui/drawer/src/drawer-types.ts
+++ b/packages/devui-vue/devui/drawer/src/drawer-types.ts
@@ -1,11 +1,7 @@
-import type { ExtractPropTypes, PropType } from 'vue'
+import type { ExtractPropTypes, PropType, Slot, Ref } from 'vue';
export const drawerProps = {
- width: {
- type: String,
- default: '300px',
- },
- visible: {
+ modelValue: {
type: Boolean,
default: false,
},
@@ -13,7 +9,7 @@ export const drawerProps = {
type: Number,
default: 1000,
},
- isCover: {
+ showOverlay: {
type: Boolean,
default: true,
},
@@ -23,15 +19,40 @@ export const drawerProps = {
},
position: {
type: String as PropType<'left' | 'right'>,
- default: 'left',
+ default: 'right',
+ },
+ lockScroll: {
+ type: Boolean,
+ default: true,
},
- backdropCloseable: {
+ closeOnClickOverlay: {
type: Boolean,
default: true,
},
- beforeHidden: {
- type: [Promise, Function] as PropType | (() => boolean | Promise)>,
+ beforeClose: {
+ type: Function as PropType<(done: () => void) => void>,
},
-} as const
+};
+
+export const drawerOverlayProps = {
+ visible: {
+ type: Boolean,
+ default: false,
+ },
+};
+
+type DrawerEmitEvent = 'update:modelValue' | 'close' | 'open';
+
+export type DrawerEmit = (event: DrawerEmitEvent, result?: unknown) => void;
+
+export type DrawerProps = ExtractPropTypes;
+
+export type DrawerOverlayProps = ExtractPropTypes;
+
+export type DrawerOptions = Partial & { content?: string | Slot };
-export type DrawerProps = ExtractPropTypes
+export type UseDrawerFn = {
+ drawerRef: Ref;
+ drawerClasses: Ref>;
+ handleOverlayClick: () => void;
+};
diff --git a/packages/devui-vue/devui/drawer/src/drawer.scss b/packages/devui-vue/devui/drawer/src/drawer.scss
index 8b13789179..3afef767e4 100644
--- a/packages/devui-vue/devui/drawer/src/drawer.scss
+++ b/packages/devui-vue/devui/drawer/src/drawer.scss
@@ -1 +1,52 @@
+@import '../../styles-var/devui-var.scss';
+.devui-drawer {
+ position: fixed;
+ top: 0;
+ bottom: 0;
+ width: 300px;
+ border-radius: $devui-border-radius;
+ background-color: $devui-base-bg;
+ transform: translateX(0);
+ opacity: 1;
+ overflow: auto;
+ box-shadow: $devui-shadow-length-fullscreen-overlay $devui-shadow;
+
+ &-left {
+ left: 0;
+ }
+
+ &-right {
+ right: 0;
+ }
+}
+
+.drawer-fly {
+ &-right-enter-active {
+ transition: all 0.3s cubic-bezier(0.16, 0.75, 0.5, 1);
+ }
+
+ &-right-leave-active {
+ transition: all 0.3s cubic-bezier(0.5, 0, 0.84, 0.25);
+ }
+
+ &-right-enter-from,
+ &-right-leave-to {
+ opacity: 0;
+ transform: translateX(100%);
+ }
+
+ &-left-enter-active {
+ transition: all 0.3s cubic-bezier(0.16, 0.75, 0.5, 1);
+ }
+
+ &-left-leave-active {
+ transition: all 0.3s cubic-bezier(0.5, 0, 0.84, 0.25);
+ }
+
+ &-left-enter-from,
+ &-left-leave-to {
+ opacity: 0;
+ transform: translateX(-100%);
+ }
+}
diff --git a/packages/devui-vue/devui/drawer/src/drawer.tsx b/packages/devui-vue/devui/drawer/src/drawer.tsx
index 09c84e4d9a..37e7c09b6f 100644
--- a/packages/devui-vue/devui/drawer/src/drawer.tsx
+++ b/packages/devui-vue/devui/drawer/src/drawer.tsx
@@ -1,91 +1,27 @@
-import { defineComponent, ref, toRefs, watch, onUnmounted, Teleport, provide } from 'vue'
-import { drawerProps, DrawerProps } from './drawer-types'
-
-import DrawerHeader from './components/drawer-header'
-import DrawerContainer from './components/drawer-container'
-import DrawerBody from './components/drawer-body'
+import { defineComponent, Teleport, Transition } from 'vue';
+import { drawerProps, DrawerProps } from './drawer-types';
+import DrawerOverlay from './components/drawer-overlay';
+import { useDrawer } from './use-drawer';
+import './drawer.scss';
export default defineComponent({
name: 'DDrawer',
+ inheritAttrs: false,
props: drawerProps,
- emits: ['close', 'update:visible', 'afterOpened'],
- setup(props: DrawerProps, { emit, slots }) {
- const {
- width, visible, zIndex, isCover, escKeyCloseable, position,
- backdropCloseable,
- } = toRefs(props)
- const isFullScreen = ref(false)
-
- const fullScreenEvent = () => {
- isFullScreen.value = !isFullScreen.value
- }
-
- const closeDrawer = async () => {
- const beforeHidden = props.beforeHidden;
- let result = (typeof beforeHidden === 'function' ? beforeHidden(): beforeHidden) ?? false;
- if (result instanceof Promise) {
- result = await result;
- }
- if (result) return;
-
- emit('update:visible', false)
- emit('close')
- }
-
- const escCloseDrawer = (e) => {
- if (e.code === 'Escape') {
- closeDrawer()
- }
- }
-
- watch(visible, (val) => {
- if (val) {
- emit('afterOpened')
- isFullScreen.value = false
- }
- if (escKeyCloseable && val) {
- document.addEventListener('keyup', escCloseDrawer)
- } else {
- document.removeEventListener('keyup', escCloseDrawer)
- }
- })
-
- provide('closeDrawer', closeDrawer)
- provide('zindex', zIndex)
- provide('isCover', isCover)
- provide('position', position)
- provide('width', width)
- provide('visible', visible)
- provide('isFullScreen', isFullScreen)
- provide('backdropCloseable', backdropCloseable)
-
- onUnmounted(() => {
- document.removeEventListener('keyup', escCloseDrawer)
- })
-
- return {
- isFullScreen,
- visible,
- slots,
- fullScreenEvent,
- closeDrawer,
- }
- },
- render() {
- const fullScreenEvent: any = this.fullScreenEvent
- const closeDrawer: any = this.closeDrawer
-
- if (!this.visible) return null
-
- return (
-
-
- {this.slots.header ? this.slots.header() :
-
- }
- {this.slots.default ? this.slots.default() : }
-
+ emits: ['close', 'update:modelValue', 'open'],
+ setup(props: DrawerProps, { emit, slots, attrs }) {
+ const { drawerRef, drawerClasses, handleOverlayClick } = useDrawer(props, emit);
+ return () => (
+
+ {props.showOverlay && }
+
+ {props.modelValue && (
+
+ {slots.default?.()}
+
+ )}
+
- )
- }
-})
+ );
+ },
+});
diff --git a/packages/devui-vue/devui/drawer/src/use-drawer.ts b/packages/devui-vue/devui/drawer/src/use-drawer.ts
new file mode 100644
index 0000000000..f328cc1201
--- /dev/null
+++ b/packages/devui-vue/devui/drawer/src/use-drawer.ts
@@ -0,0 +1,50 @@
+import { computed, onUnmounted, ref, watch } from 'vue';
+import { onClickOutside } from '@vueuse/core';
+import { DrawerEmit, DrawerProps, UseDrawerFn } from './drawer-types';
+import { lockScroll } from '../../shared/util/lock-scroll';
+
+export function useDrawer(props: DrawerProps, emit: DrawerEmit): UseDrawerFn {
+ const drawerRef = ref();
+ const drawerClasses = computed(() => ({
+ 'devui-drawer': true,
+ [`devui-drawer-${props.position}`]: true,
+ }));
+ const close = () => {
+ emit('update:modelValue', false);
+ emit('close');
+ };
+ let lockScrollCb: () => void;
+ const execClose = () => {
+ props.beforeClose ? props.beforeClose(close) : close();
+ };
+ const handleOverlayClick = () => {
+ props.closeOnClickOverlay && execClose();
+ };
+ const handleEscClose = (e: KeyboardEvent) => {
+ e.code === 'Escape' && execClose();
+ };
+
+ onClickOutside(drawerRef, execClose);
+
+ const removeBodyAdditions = () => {
+ lockScrollCb?.();
+ document.removeEventListener('keyup', handleEscClose);
+ };
+
+ watch(
+ () => props.modelValue,
+ (val) => {
+ if (val) {
+ emit('open');
+ props.lockScroll && (lockScrollCb = lockScroll());
+ props.escKeyCloseable && document.addEventListener('keyup', handleEscClose);
+ } else {
+ removeBodyAdditions();
+ }
+ }
+ );
+
+ onUnmounted(removeBodyAdditions);
+
+ return { drawerRef, drawerClasses, handleOverlayClick };
+}
diff --git a/packages/devui-vue/devui/dropdown/index.ts b/packages/devui-vue/devui/dropdown/index.ts
index 0075b1cbba..a99d4509c3 100644
--- a/packages/devui-vue/devui/dropdown/index.ts
+++ b/packages/devui-vue/devui/dropdown/index.ts
@@ -1,18 +1,16 @@
-import type { App } from 'vue'
+import type { App } from 'vue';
+import Dropdown from './src/dropdown';
+import DropdownMenu from './src/dropdown-menu';
+export * from './src/dropdown-menu-types';
-import Dropdown from './src/dropdown'
-
-Dropdown.install = function (app: App): void {
- app.component(Dropdown.name, Dropdown)
-}
-
-export { Dropdown }
+export { Dropdown, DropdownMenu };
export default {
title: 'Dropdown 下拉菜单',
category: '导航',
- status: '10%', // TODO: 组件若开发完成则填入"已完成"，并删除该注释
+ status: '10%',
install(app: App): void {
- app.use(Dropdown as any)
- }
-}
+ app.component(Dropdown.name, Dropdown);
+ app.component(DropdownMenu.name, DropdownMenu);
+ },
+};
diff --git a/packages/devui-vue/devui/dropdown/src/dropdown-directive.ts b/packages/devui-vue/devui/dropdown/src/dropdown-directive.ts
deleted file mode 100644
index 38d67100b7..0000000000
--- a/packages/devui-vue/devui/dropdown/src/dropdown-directive.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export const dDropdownDirective = {
-
-};
-
-export const dDropdownMenuDirective = {
-
-};
diff --git a/packages/devui-vue/devui/dropdown/src/dropdown-menu-types.ts b/packages/devui-vue/devui/dropdown/src/dropdown-menu-types.ts
new file mode 100644
index 0000000000..ac89d8711a
--- /dev/null
+++ b/packages/devui-vue/devui/dropdown/src/dropdown-menu-types.ts
@@ -0,0 +1,47 @@
+import type { PropType, ExtractPropTypes } from 'vue';
+
+export type CloseScopeArea = 'all' | 'blank' | 'none';
+export type Placement =
+ | 'top'
+ | 'right'
+ | 'bottom'
+ | 'left'
+ | 'top-start'
+ | 'top-end'
+ | 'right-start'
+ | 'right-end'
+ | 'bottom-start'
+ | 'bottom-end'
+ | 'left-start'
+ | 'left-end';
+export type Alignment = 'start' | 'end';
+export type OffsetOptions = { mainAxis?: number; crossAxis?: number };
+
+export const dropdownMenuProps = {
+ modelValue: {
+ type: Boolean,
+ default: false,
+ },
+ origin: {
+ type: Object as PropType,
+ require: true,
+ },
+ position: {
+ type: Array as PropType>,
+ default: ['bottom'],
+ },
+ align: {
+ type: String as PropType | null,
+ default: null,
+ },
+ offset: {
+ type: [Number, Object] as PropType,
+ default: 4,
+ },
+ clickOutside: {
+ type: Function as PropType<() => boolean>,
+ default: (): boolean => true,
+ },
+};
+
+export type DropdownMenuProps = ExtractPropTypes;
diff --git a/packages/devui-vue/devui/dropdown/src/dropdown-menu.tsx b/packages/devui-vue/devui/dropdown/src/dropdown-menu.tsx
new file mode 100644
index 0000000000..34c6de7756
--- /dev/null
+++ b/packages/devui-vue/devui/dropdown/src/dropdown-menu.tsx
@@ -0,0 +1,48 @@
+import { defineComponent, ref, toRefs, Transition, Teleport, computed } from 'vue';
+import { onClickOutside } from '@vueuse/core';
+import { FlexibleOverlay } from '../../overlay';
+import { dropdownMenuProps, DropdownMenuProps } from './dropdown-menu-types';
+
+export default defineComponent({
+ name: 'DDropdownMenu',
+ inheritAttrs: false,
+ props: dropdownMenuProps,
+ emits: ['update:modelValue'],
+ setup(props: DropdownMenuProps, { slots, attrs, emit }) {
+ const { modelValue, origin, position, align, offset, clickOutside } = toRefs(props);
+ const dropdownMenuRef = ref(null);
+
+ onClickOutside(dropdownMenuRef, (value) => {
+ if (clickOutside.value?.() && !origin.value.contains(value.target)) {
+ emit('update:modelValue', false);
+ }
+ });
+
+ const currentPosition = ref('bottom');
+ const handlePositionChange = (pos) => {
+ currentPosition.value = pos.split('-')[0] === 'top' ? 'top' : 'bottom';
+ };
+ const styles = computed(() => ({
+ transformOrigin: currentPosition.value === 'top' ? '0% 100%' : '0% 0%',
+ }));
+
+ return () => (
+
+
+
+
+
+
+
+ );
+ },
+});
diff --git a/packages/devui-vue/devui/dropdown/src/dropdown-types.ts b/packages/devui-vue/devui/dropdown/src/dropdown-types.ts
index 706048dfb4..b0eca132ad 100644
--- a/packages/devui-vue/devui/dropdown/src/dropdown-types.ts
+++ b/packages/devui-vue/devui/dropdown/src/dropdown-types.ts
@@ -1,43 +1,65 @@
-import type { PropType, ExtractPropTypes, ComponentPublicInstance } from 'vue'
+import type { PropType, ExtractPropTypes, Ref } from 'vue';
export type TriggerType = 'click' | 'hover' | 'manually';
export type CloseScopeArea = 'all' | 'blank' | 'none';
+export type Placement =
+ | 'top'
+ | 'right'
+ | 'bottom'
+ | 'left'
+ | 'top-start'
+ | 'top-end'
+ | 'right-start'
+ | 'right-end'
+ | 'bottom-start'
+ | 'bottom-end'
+ | 'left-start'
+ | 'left-end';
+export type Alignment = 'start' | 'end';
+export type OffsetOptions = { mainAxis?: number; crossAxis?: number };
-export const dropdownProps = {
- origin: {
- type: Object as PropType
- },
+type ReadonlyRef = Readonly>;
- isOpen: {
- type: Boolean,
- default: false
- },
+export type EmitEvent = (event: 'toggle', result: boolean) => void;
- disabled: {
+export const dropdownProps = {
+ visible: {
type: Boolean,
- default: false
+ default: false,
},
-
trigger: {
type: String as PropType,
- default: 'click'
+ default: 'click',
},
-
closeScope: {
type: String as PropType,
- default: 'all'
+ default: 'all',
+ },
+ position: {
+ type: Array as PropType>,
+ default: ['bottom'],
+ },
+ align: {
+ type: String as PropType | null,
+ default: null,
+ },
+ offset: {
+ type: [Number, Object] as PropType,
+ default: 4,
},
-
closeOnMouseLeaveMenu: {
type: Boolean,
- default: false
+ default: false,
},
+};
- showAnimation: {
- type: Boolean,
- default: true
- }
-
-} as const
+export type DropdownProps = ExtractPropTypes;
-export type DropdownProps = ExtractPropTypes
+export interface UseDropdownProps {
+ id: string;
+ isOpen: Ref;
+ origin: ReadonlyRef;
+ dropdownRef: ReadonlyRef;
+ props: DropdownProps;
+ emit: EmitEvent;
+}
diff --git a/packages/devui-vue/devui/dropdown/src/dropdown.scss b/packages/devui-vue/devui/dropdown/src/dropdown.scss
index faa3cd509d..78c93a6141 100644
--- a/packages/devui-vue/devui/dropdown/src/dropdown.scss
+++ b/packages/devui-vue/devui/dropdown/src/dropdown.scss
@@ -1,4 +1,8 @@
-@import '../../styles-var/devui-var';
+@import '../../styles-var/devui-var.scss';
+
+.devui-dropdown-toggle {
+ display: inline-block;
+}
.devui-dropdown span {
&.icon-chevron-down,
@@ -8,6 +12,10 @@
}
}
+.devui-dropdown-menu-wrap .devui-dropdown-menu {
+ width: 100%;
+}
+
.devui-dropdown-animation span {
&.icon-chevron-down,
&.icon-select-arrow {
@@ -22,40 +30,80 @@
}
}
+.fade-in-top {
+ animation: fadeInTop 0.2s cubic-bezier(0.16, 0.75, 0.5, 1);
+}
+.fade-in-bottom {
+ animation: fadeInBottom 0.2s cubic-bezier(0.16, 0.75, 0.5, 1);
+}
-.devui-dropdown-fade {
- @mixin d-dropdown-fade-animation {
- animation-name: d-dropdown-fade;
- animation-duration: 0.3s;
+@keyframes fadeInTop {
+ from {
+ opacity: 0.8;
+ transform: scaleY(0.8) translateY(4px);
}
- @keyframes d-dropdown-fade {
- 0% {
- opacity: 0;
- transform: scaleY(0.9999) scaleY(0);
- }
- 100% {
- opacity: 1;
- transform: scaleY(0.8) scaleY(4px);
- }
+ to {
+ opacity: 1;
+ transform: scaleY(0.9999) translateY(0);
}
+}
- &-enter {
- opacity: 0;
+@keyframes fadeInBottom {
+ from {
+ opacity: 0.8;
+ transform: scaleY(0.8) translateY(-4px);
}
- &-enter-active {
- @include d-dropdown-fade-animation;
+ to {
+ opacity: 1;
+ transform: scaleY(0.9999) translateY(0);
}
+}
- &-leave {
- opacity: 1;
+.devui-dropdown-fade {
+ &-bottom {
+ &-enter-from,
+ &-leave-to {
+ opacity: 0.8;
+ transform: scaleY(0.8) translateY(-4px);
+ }
+
+ &-enter-to,
+ &-leave-from {
+ opacity: 1;
+ transform: scaleY(0.9999) translateY(0);
+ }
+
+ &-enter-active {
+ transition: transform 0.2s cubic-bezier(0.16, 0.75, 0.5, 1), opacity 0.2s cubic-bezier(0.16, 0.75, 0.5, 1);
+ }
+
+ &-leave-active {
+ transition: transform 0.2s cubic-bezier(0.5, 0, 0.84, 0.25), opacity 0.2s cubic-bezier(0.5, 0, 0.84, 0.25);
+ }
}
- &-leave-active {
- @include d-dropdown-fade-animation;
+ &-top {
+ &-enter-from,
+ &-leave-to {
+ opacity: 0.8;
+ transform: scaleY(0.8) translateY(4px);
+ }
+
+ &-enter-to,
+ &-leave-from {
+ opacity: 1;
+ transform: scaleY(0.9999) translateY(0);
+ }
- animation-direction: reverse;
+ &-enter-active {
+ transition: transform 0.2s cubic-bezier(0.16, 0.75, 0.5, 1), opacity 0.2s cubic-bezier(0.16, 0.75, 0.5, 1);
+ }
+
+ &-leave-active {
+ transition: transform 0.2s cubic-bezier(0.5, 0, 0.84, 0.25), opacity 0.2s cubic-bezier(0.5, 0, 0.84, 0.25);
+ }
}
-}
\ No newline at end of file
+}
diff --git a/packages/devui-vue/devui/dropdown/src/dropdown.tsx b/packages/devui-vue/devui/dropdown/src/dropdown.tsx
index 5dd8d6ba64..53f2895fb7 100644
--- a/packages/devui-vue/devui/dropdown/src/dropdown.tsx
+++ b/packages/devui-vue/devui/dropdown/src/dropdown.tsx
@@ -1,66 +1,65 @@
-import { defineComponent, watch, ref, toRefs, Transition, computed } from 'vue'
-import { dropdownProps, DropdownProps } from './dropdown-types'
-import { useDropdown } from './use-dropdown';
-
+import { defineComponent, ref, toRefs, Transition, Teleport, computed } from 'vue';
+import { dropdownProps, DropdownProps } from './dropdown-types';
+import { useDropdown, useDropdownEvent } from './use-dropdown';
import { FlexibleOverlay } from '../../overlay';
+import './dropdown.scss';
-import './dropdown.scss'
+let dropdownId = 1;
export default defineComponent({
name: 'DDropdown',
+ inheritAttrs: false,
props: dropdownProps,
- emits: [],
- setup(props: DropdownProps, ctx) {
- const {
+ emits: ['toggle'],
+ setup(props: DropdownProps, { slots, attrs, emit }) {
+ const { visible, position, align, offset } = toRefs(props);
+ const origin = ref();
+ const dropdownRef = ref();
+ const id = `dropdown_${dropdownId++}`;
+ const isOpen = ref(false);
+ const currentPosition = ref('bottom');
+ const handlePositionChange = (pos) => {
+ currentPosition.value = pos.includes('top') || pos.includes('end') ? 'top' : 'bottom';
+ };
+ const styles = computed(() => ({
+ transformOrigin: currentPosition.value === 'top' ? '0% 100%' : '0% 0%',
+ }));
+ const classes = computed(() => ({
+ 'fade-in-bottom': isOpen.value && currentPosition.value === 'bottom',
+ 'fade-in-top': isOpen.value && currentPosition.value === 'top',
+ }));
+ useDropdownEvent({
+ id,
isOpen,
origin,
- trigger,
- closeScope,
- closeOnMouseLeaveMenu,
- } = toRefs(props);
-
- const visible = ref(false);
- watch(isOpen, (value) => {
- visible.value = value;
- }, { immediate: true });
-
- const position = {
- originX: 'center',
- originY: 'bottom',
- overlayX: 'center',
- overlayY: 'top'
- } as const;
-
- const { dropdownEl } = useDropdown({
- visible,
- origin,
- trigger,
- closeScope,
- closeOnMouseLeaveMenu,
- });
-
- const animatedVisible = computed(() => {
- return props.showAnimation ? visible.value : true;
+ dropdownRef,
+ props,
+ emit,
});
-
- return () => {
- // let vnodes = ctx.slots.default?.() ?? [];
- return (
- <>
-
-
-
- {ctx.slots.default?.()}
+ useDropdown(id, visible, isOpen, origin, dropdownRef, currentPosition, emit);
+ return () => (
+ <>
+
+ {slots.default?.()}
+
+
+
+
+
-
-
-
- )
- };
- }
-})
+
+
+
+
+ );
+ },
+});
diff --git a/packages/devui-vue/devui/dropdown/src/use-dropdown.ts b/packages/devui-vue/devui/dropdown/src/use-dropdown.ts
index 596a457931..0bae60f6f0 100644
--- a/packages/devui-vue/devui/dropdown/src/use-dropdown.ts
+++ b/packages/devui-vue/devui/dropdown/src/use-dropdown.ts
@@ -1,120 +1,157 @@
-import { Ref, ref, watch } from 'vue';
+import { watch, onMounted, onUnmounted, toRefs } from 'vue';
+import type { Ref } from 'vue';
import { getElement } from '../../shared/util/dom';
-import { CloseScopeArea, TriggerType } from './dropdown-types';
+import { UseDropdownProps, EmitEvent } from './dropdown-types';
-function subscribeEvent
(dom: Element | Document, type: string, callback: (event: E) => void) {
- dom?.addEventListener(type, callback as any);
- return () => {
- dom?.removeEventListener(type, callback as any);
- }
-}
+const dropdownMap = new Map();
-type ReadonlyRef = Readonly>;
-
-interface UseDropdownProps {
- visible: Ref
- trigger: ReadonlyRef
- origin: ReadonlyRef
- closeScope: ReadonlyRef
- closeOnMouseLeaveMenu: ReadonlyRef
-}
-
-interface UseDropdownResult {
- dropdownEl: Ref
+function subscribeEvent(dom: Element | Document, type: string, callback: (event: any) => void) {
+ dom?.addEventListener(type, callback);
+ return () => {
+ dom?.removeEventListener(type, callback);
+ };
}
-export const useDropdown = ({
- visible,
- trigger,
- origin,
- closeScope,
- closeOnMouseLeaveMenu
-}: UseDropdownProps): UseDropdownResult => {
- const dropdownElRef = ref();
-
- const closeByScope = () => {
- if (closeScope.value === 'none') {
+export const useDropdownEvent = ({ id, isOpen, origin, dropdownRef, props, emit }: UseDropdownProps): void => {
+ let overlayEnter = false;
+ let originEnter = false;
+ const { trigger, closeScope, closeOnMouseLeaveMenu } = toRefs(props);
+ const toggle = (status: boolean) => {
+ isOpen.value = status;
+ emit('toggle', isOpen.value);
+ };
+ const handleLeave = async (elementType: 'origin' | 'dropdown', e?) => {
+ await new Promise((resolve) => setTimeout(resolve, 50));
+ if ((elementType === 'origin' && overlayEnter) || (elementType === 'dropdown' && originEnter)) {
return;
}
- visible.value = false;
- }
- watch(
- [trigger, origin, dropdownElRef],
- ([trigger, origin, dropdownEl], ov, onInvalidate) => {
- const originEl = getElement(origin);
- if (!originEl || !dropdownEl) {
- return;
- }
- const subscriptions = [
- subscribeEvent(dropdownEl, 'click', () => {
- if (closeScope.value === 'all') {
- visible.value = false;
+ if (e) {
+ [...dropdownMap.values()].reverse().forEach((item) => {
+ setTimeout(() => {
+ item.toggle?.();
+ }, 0);
+ });
+ }
+ toggle(false);
+ };
+ watch([trigger, origin, dropdownRef], ([triggerVal, originVal, dropdownEl], ov, onInvalidate) => {
+ const originEl = getElement(originVal);
+ const subscriptions = [];
+ setTimeout(() => {
+ subscriptions.push(
+ subscribeEvent(document, 'click', (e: Event) => {
+ const dropdownValues = [...dropdownMap.values()];
+ if (
+ !isOpen.value ||
+ closeScope.value === 'none' ||
+ (dropdownEl.contains(e.target) && closeScope.value === 'blank') ||
+ (dropdownValues.some((item) => item.toggleEl?.contains(e.target)) &&
+ dropdownValues.some((item) => item.menuEl?.contains(e.target)))
+ ) {
+ return;
+ }
+ [...dropdownMap.values()].reverse().forEach((item) => {
+ setTimeout(() => {
+ if (!item.toggleEl?.contains(e.target)) {
+ item.toggle?.();
+ }
+ }, 0);
+ });
+ overlayEnter = false;
+ })
+ );
+ }, 0);
+ if (triggerVal === 'click') {
+ subscriptions.push(
+ subscribeEvent(originEl, 'click', () => toggle(!isOpen.value)),
+ subscribeEvent(dropdownEl, 'mouseleave', (e: MouseEvent) => {
+ if (closeOnMouseLeaveMenu.value && !dropdownMap.get(id).child?.contains(e.relatedTarget)) {
+ handleLeave('dropdown', e);
}
+ })
+ );
+ } else if (triggerVal === 'hover') {
+ subscriptions.push(
+ subscribeEvent(originEl, 'mouseenter', () => {
+ originEnter = true;
+ toggle(true);
}),
- ];
-
- if (trigger === 'click') {
- // 点击触发
- subscriptions.push(
- subscribeEvent(originEl, 'click', () => visible.value = !visible.value),
- subscribeEvent(document, 'click', (e) => {
- if (!visible.value) {
- return;
- }
- const target = e.target as HTMLElement;
- const isContain = originEl.contains(target) || dropdownEl.contains(target);
- if (isContain) {
- return;
- }
- closeByScope();
- }),
- subscribeEvent(dropdownEl, 'mouseleave', () => {
- // 判断鼠标是否已经进入 origin
- if (closeOnMouseLeaveMenu.value) {
- visible.value = false;
- }
- })
- );
- } else if (trigger === 'hover') {
- // 鼠标悬浮触发
- let overlayEnter = false;
- let originEnter = false;
- const handleLeave = async (elementType: 'origin' | 'dropdown') => {
- // 由于关联元素和 dropdown 元素间有间距，
- // 悬浮时在两者之间移动可能会导致多次关闭打开，
- // 所以需要给关闭触发节流。
- await new Promise((resolve) => setTimeout(resolve, 50));
- if ((elementType === 'origin' && overlayEnter) || (elementType === 'dropdown' && originEnter)) {
+ subscribeEvent(originEl, 'mouseleave', () => {
+ originEnter = false;
+ handleLeave('origin');
+ }),
+ subscribeEvent(dropdownEl, 'mouseenter', () => {
+ overlayEnter = true;
+ isOpen.value = true;
+ }),
+ subscribeEvent(dropdownEl, 'mouseleave', (e: MouseEvent) => {
+ overlayEnter = false;
+ if (e.relatedTarget && (originEl?.contains(e.relatedTarget) || dropdownMap.get(id).child?.contains(e.relatedTarget))) {
return;
}
- closeByScope();
- };
- subscriptions.push(
- subscribeEvent(originEl, 'mouseenter', () => {
- originEnter = true;
- visible.value = true;
- }),
- subscribeEvent(originEl, 'mouseleave', () => {
- originEnter = false;
- // 判断鼠标是否已经进入 overlay
- if (!closeOnMouseLeaveMenu.value) {
- handleLeave('origin');
- }
- }),
- subscribeEvent(dropdownEl, 'mouseenter', () => {
- overlayEnter = true;
- visible.value = true;
- }),
- subscribeEvent(dropdownEl, 'mouseleave', () => {
- overlayEnter = false;
- // 判断鼠标是否已经进入 origin
- handleLeave('dropdown');
- })
- );
- }
- onInvalidate(() => subscriptions.forEach(v => v()));
+ handleLeave('dropdown', e);
+ })
+ );
}
- );
+ onInvalidate(() => subscriptions.forEach((v) => v()));
+ });
+};
- return { dropdownEl: dropdownElRef };
+export function useDropdown(
+ id: string,
+ visible: Ref,
+ isOpen: Ref,
+ origin: Ref,
+ dropdownRef: Ref,
+ popDirection: Ref,
+ emit: EmitEvent
+): void {
+ const calcPopDirection = (dropdownEl: HTMLElement) => {
+ const elementHeight = dropdownEl.offsetHeight;
+ const bottomDistance = window.innerHeight - origin.value.getBoundingClientRect().bottom;
+ const isBottomEnough = bottomDistance >= elementHeight;
+ if (!isBottomEnough) {
+ popDirection.value = 'top';
+ } else {
+ popDirection.value = 'bottom';
+ }
+ };
+
+ watch(
+ visible,
+ (newVal, oldVal) => {
+ if (oldVal === undefined) {
+ return;
+ }
+ isOpen.value = newVal;
+ emit('toggle', isOpen.value);
+ },
+ { immediate: true }
+ );
+ watch([isOpen, dropdownRef], ([isOpenVal, dropdownEl]) => {
+ if (isOpenVal) {
+ dropdownMap.set(id, {
+ ...dropdownMap.get(id),
+ menuEl: dropdownEl,
+ toggle: () => {
+ isOpen.value = false;
+ emit('toggle', isOpen.value);
+ },
+ });
+ for (const value of dropdownMap.values()) {
+ if (value.menuEl?.contains(origin.value)) {
+ value.child = dropdownEl;
+ }
+ }
+ }
+ if (dropdownEl) {
+ calcPopDirection(dropdownEl);
+ }
+ });
+ onMounted(() => {
+ dropdownMap.set(id, { toggleEl: origin.value });
+ });
+ onUnmounted(() => {
+ dropdownMap.delete(id);
+ });
}
diff --git a/packages/devui-vue/devui/editable-select/__tests__/editable-select.spec.ts b/packages/devui-vue/devui/editable-select/__tests__/editable-select.spec.ts
index aa694a308b..2a754c3677 100644
--- a/packages/devui-vue/devui/editable-select/__tests__/editable-select.spec.ts
+++ b/packages/devui-vue/devui/editable-select/__tests__/editable-select.spec.ts
@@ -1,8 +1,287 @@
import { mount } from '@vue/test-utils';
+import { reactive, ref } from 'vue';
import { EditableSelect } from '../index';
+const createData = (len = 5) => {
+ return reactive(
+ Array.from({ length: len }).map((_, index) => {
+ return {
+ label: `label${index}`,
+ value: index
+ };
+ })
+ );
+};
describe('editable-select test', () => {
- it('editable-select init render', async () => {
- // todo
- })
-})
+ afterEach(() => {
+ document.body.innerHTML = '';
+ });
+
+ test('create', () => {
+ const wrapper = mount(EditableSelect);
+
+ expect(wrapper.find('.devui-editable-select').exists()).toBe(true);
+ });
+
+ test('should render correctly', async () => {
+ const wrapper = mount({
+ components: {
+ 'editable-select': EditableSelect
+ },
+ template: ``,
+ setup() {
+ const value = '';
+ const options = createData();
+ return {
+ value,
+ options
+ };
+ }
+ });
+
+ const input = wrapper.find('input');
+
+ expect(wrapper.get('.devui-dropdown-item').isVisible()).toBe(false);
+
+ await input.trigger('click');
+
+ expect(wrapper.get('.devui-dropdown-item').isVisible()).toBe(true);
+ expect(wrapper.classes()).toContain('devui-select-open');
+
+ const options = wrapper.element.querySelectorAll('.devui-dropdown-item');
+
+ expect(options.length).toBe(5);
+ });
+
+ test('select on click ', async () => {
+ const wrapper = mount({
+ components: {
+ 'editable-select': EditableSelect
+ },
+ template: ``,
+ setup() {
+ const value = ref('');
+ const options = createData();
+ return {
+ value,
+ options
+ };
+ }
+ });
+ const options = wrapper.findAll('.devui-dropdown-item');
+
+ await options[0].trigger('click');
+
+ expect(wrapper.find('input').element.value).toBe('label0');
+ });
+
+ test('disabled select', async () => {
+ const wrapper = mount({
+ components: {
+ 'editable-select': EditableSelect
+ },
+ template: ``
+ });
+ expect(wrapper.find('input').element.disabled).toBe(true);
+ });
+
+ test('disabled option', async () => {
+ const wrapper = mount({
+ components: {
+ 'editable-select': EditableSelect
+ },
+ template: ``,
+ setup() {
+ const value = ref('');
+ const options = reactive([
+ {
+ label: 'label0',
+ value: 0
+ },
+ {
+ label: 'label1',
+ value: 1,
+ disabled: true
+ },
+ {
+ label: 'label2',
+ value: 2,
+ disabled: false
+ }
+ ]);
+ return {
+ value,
+ options
+ };
+ }
+ });
+ const options = wrapper.findAll('.devui-dropdown-item');
+
+ expect(options[1].classes()).toContain('disabled');
+
+ await options[1].trigger('click');
+
+ expect(wrapper.find('input').element.value).toBe('');
+
+ await options[2].trigger('click');
+
+ expect(wrapper.find('input').element.value).toBe('label2');
+ });
+
+ test('search', async () => {
+ const handleSearch = jest.fn();
+ const wrapper = mount({
+ components: {
+ 'editable-select': EditableSelect
+ },
+ template: ``,
+ setup() {
+ const value = ref('');
+ const options = createData();
+ return {
+ value,
+ options,
+ handleSearch
+ };
+ }
+ });
+ const input = wrapper.find('input');
+ await input.setValue('label');
+ await input.trigger('input');
+ expect(handleSearch).toBeCalled();
+ });
+
+ test('filter option', async () => {
+ const wrapper = mount({
+ components: {
+ 'editable-select': EditableSelect
+ },
+ template: ``,
+ setup() {
+ const value = ref('');
+ const options = createData();
+ return {
+ value,
+ options
+ };
+ }
+ });
+ const input = wrapper.find('input');
+ await input.setValue('label0');
+ await input.trigger('input');
+ expect(wrapper.findAll('.devui-dropdown-item').length).toBe(1);
+ });
+
+ test('custom filter options', async () => {
+ const filterOption = jest.fn();
+ const wrapper = mount({
+ components: {
+ 'editable-select': EditableSelect
+ },
+ template: ``,
+ setup() {
+ const value = ref('');
+ const options = createData();
+ return {
+ value,
+ options,
+ filterOption
+ };
+ }
+ });
+ const input = wrapper.find('input');
+ await input.setValue('label0');
+ await input.trigger('input');
+ expect(filterOption).toBeCalled();
+ });
+
+ test('render slot', async () => {
+ const wrapper = mount({
+ components: {
+ 'editable-select': EditableSelect
+ },
+ template: `
+
+
+ 第{{slotProps.index}}项: {{slotProps.item}}
+
+
+
+
+ {{slotProps}}
+
+
+ `,
+ setup() {
+ const value = ref('');
+ const options = createData();
+ return {
+ value,
+ options
+ };
+ }
+ });
+ const input = wrapper.find('input');
+ const options = wrapper.findAll('.devui-dropdown-item');
+ expect(options.length).toBe(5);
+ await input.setValue('aaa');
+ await input.trigger('input');
+ expect(wrapper.find('#noResultItemTemplate').exists()).toBe(true);
+ });
+
+ test('load more ', async () => {
+ const loadmore = jest.fn();
+ const makeScroll = async (dom: Element, name: 'scrollTop', offset: number) => {
+ const eventTarget = dom === document.documentElement ? window : dom;
+ dom[name] = offset;
+ const evt = new CustomEvent('scroll', {
+ detail: {
+ target: {
+ [name]: offset
+ }
+ }
+ });
+ eventTarget.dispatchEvent(evt);
+ };
+ const wrapper = mount({
+ components: {
+ 'editable-select': EditableSelect
+ },
+ template: ``,
+ setup() {
+ const value = ref('');
+ const options = createData(20);
+ return {
+ value,
+ options,
+ handleLoad: loadmore
+ };
+ }
+ });
+ const ul = wrapper.find('.devui-list-unstyled');
+ await makeScroll(ul.element, 'scrollTop', 300);
+ expect(loadmore).toBeCalled();
+ });
+ test('keyboard operations', async () => {
+ const wrapper = mount({
+ components: {
+ 'editable-select': EditableSelect
+ },
+ template: ``,
+ setup() {
+ const value = ref('');
+ const options = createData();
+ return {
+ value,
+ options
+ };
+ }
+ });
+ const input = wrapper.find('input');
+ await input.trigger('click');
+ await input.trigger('keydown', { key: 'ArrowDown' });
+ await input.trigger('keydown', { key: 'ArrowDown' });
+ await input.trigger('keydown', { key: 'Enter' });
+ expect(input.element.value).toBe('label2');
+ });
+});
diff --git a/packages/devui-vue/devui/editable-select/index.ts b/packages/devui-vue/devui/editable-select/index.ts
index de0ccd55ba..3468c0868e 100644
--- a/packages/devui-vue/devui/editable-select/index.ts
+++ b/packages/devui-vue/devui/editable-select/index.ts
@@ -1,16 +1,17 @@
-import type { App } from 'vue'
-import EditableSelect from './src/editable-select'
+import type { App } from 'vue';
+import EditableSelect from './src/editable-select';
+
EditableSelect.install = function (app: App): void {
- app.component(EditableSelect.name, EditableSelect)
-}
+ app.component(EditableSelect.name, EditableSelect);
+};
-export { EditableSelect }
+export { EditableSelect };
export default {
title: 'EditableSelect 可输入下拉选择框',
category: '数据录入',
- status: '10%', // TODO: 组件若开发完成则填入"已完成"，并删除该注释
+ status: '100%',
install(app: App): void {
- app.use(EditableSelect as any)
+ app.use(EditableSelect as any);
}
-}
+};
diff --git a/packages/devui-vue/devui/editable-select/src/components/dropdown.tsx b/packages/devui-vue/devui/editable-select/src/components/dropdown.tsx
deleted file mode 100644
index 7f1f029bad..0000000000
--- a/packages/devui-vue/devui/editable-select/src/components/dropdown.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import { defineComponent, inject } from 'vue'
-import { OptionItem, selectDropdownProps } from '../editable-select-types'
-import { className } from '../utils'
-export default defineComponent({
- name: 'DSelectDropdown',
- props: selectDropdownProps,
- setup(props) {
- const select = inject('InjectionKey') as any
- const {
- props: selectProps,
- dropdownRef,
- visible,
- selectOptionClick,
- renderDefaultSlots,
- renderEmptySlots,
- selectedIndex,
- hoverIndex,
- loadMore
- } = select
- const { maxHeight } = selectProps
- return () => {
- const getLiCls = (item: OptionItem, index: number) => {
- const { disabledKey } = selectProps
- return className('devui-dropdown-item', {
- disabled: disabledKey ? !!item[disabledKey] : false,
- selected: selectedIndex.value === index,
- 'devui-dropdown-bg': hoverIndex.value === index
- })
- }
- return (
-
- )
- }
- }
-})
diff --git a/packages/devui-vue/devui/editable-select/src/composable/use-keyBoard-select.ts b/packages/devui-vue/devui/editable-select/src/composable/use-keyBoard-select.ts
deleted file mode 100644
index 3d9c59f96c..0000000000
--- a/packages/devui-vue/devui/editable-select/src/composable/use-keyBoard-select.ts
+++ /dev/null
@@ -1,73 +0,0 @@
-import { ComputedRef, nextTick, Ref } from 'vue'
-import { OptionItem } from '../editable-select-types'
-interface keyBoardSelectReturnType {
- handleKeydown: (e: KeyboardEvent) => void
-}
-
-export default function keyboardSelect(
- dropdownRef: Ref,
- visible: Ref,
- hoverIndex: Ref,
- selectedIndex: Ref,
- filteredOptions: ComputedRef,
- toggleMenu: () => void,
- selectOptionClick: (e: KeyboardEvent, item: OptionItem) => void
-): keyBoardSelectReturnType {
- const updateHoverIndex = (index: number) => {
- hoverIndex.value = index
- }
- const scrollToActive = (index: number) => {
- const dropdownVal = dropdownRef.value
- const li = dropdownVal.children[index]
-
- nextTick(() => {
- if (li.scrollIntoViewIfNeeded) {
- li.scrollIntoViewIfNeeded(false)
- } else {
- const containerInfo = dropdownVal.getBoundingClientRect()
- const elementInfo = li.getBoundingClientRect()
- if (elementInfo.bottom > containerInfo.bottom || elementInfo.top < containerInfo.top) {
- li.scrollIntoView(false)
- }
- }
- })
- }
- const onKeyboardSelect = (e: KeyboardEvent) => {
- const option = filteredOptions.value[hoverIndex.value]
- selectOptionClick(e, option)
- hoverIndex.value = selectedIndex.value
- }
- const handleKeydown = (e: KeyboardEvent) => {
- const keyCode = e.key || e.code
- let index = 0
- if (!visible.value) {
- toggleMenu()
- }
-
- if (keyCode === 'Backspace') {
- return
- }
-
- if (keyCode === 'ArrowUp') {
- index = hoverIndex.value - 1
- if (index < 0) {
- index = filteredOptions.value.length - 1
- }
- } else if (keyCode === 'ArrowDown') {
- index = hoverIndex.value + 1
- if (index > filteredOptions.value.length - 1) {
- index = 0
- }
- }
-
- if (keyCode === 'Enter') {
- return onKeyboardSelect(e)
- }
- updateHoverIndex(index)
- scrollToActive(index)
- }
-
- return {
- handleKeydown
- }
-}
diff --git a/packages/devui-vue/devui/editable-select/src/composables/use-filter-options.ts b/packages/devui-vue/devui/editable-select/src/composables/use-filter-options.ts
new file mode 100644
index 0000000000..87c2e3514a
--- /dev/null
+++ b/packages/devui-vue/devui/editable-select/src/composables/use-filter-options.ts
@@ -0,0 +1,28 @@
+import { computed, Ref, ComputedRef } from 'vue';
+import { OptionObjectItem } from '../editable-select-type';
+
+const getFilterFunc = () => (val: string, option: OptionObjectItem) =>
+ option.label.toLocaleLowerCase().indexOf(val.toLocaleLowerCase()) > -1;
+
+export const userFilterOptions: (
+ normalizeOptions: ComputedRef,
+ inputValue: Ref,
+ filteredOptions: boolean | ((val: string, option: OptionObjectItem) => boolean)
+) => ComputedRef = (normalizeOptions, inputValue, filterOption) =>
+ computed(() => {
+ const filteredOptions: OptionObjectItem[] = [];
+
+ if (!inputValue.value || filterOption === false) {
+ return normalizeOptions.value;
+ }
+
+ const filterFunc = typeof filterOption === 'function' ? filterOption : getFilterFunc();
+
+ normalizeOptions.value.forEach((option) => {
+ if (filterFunc(inputValue.value, option)) {
+ filteredOptions.push(option);
+ }
+ });
+
+ return filteredOptions;
+ });
diff --git a/packages/devui-vue/devui/editable-select/src/composables/use-input.ts b/packages/devui-vue/devui/editable-select/src/composables/use-input.ts
new file mode 100644
index 0000000000..d553ad362a
--- /dev/null
+++ b/packages/devui-vue/devui/editable-select/src/composables/use-input.ts
@@ -0,0 +1,22 @@
+import { SetupContext, Ref } from 'vue';
+interface userInputReturnType {
+ handleInput: (event: Event) => void
+}
+export const useInput: (inputValue: Ref, ctx: SetupContext) => userInputReturnType = (
+ inputValue,
+ ctx
+) => {
+ const onInputChange = (value: string) => {
+ ctx.emit('search', value);
+ };
+
+ const handleInput = (event: Event) => {
+ const value = (event.target as HTMLInputElement).value;
+ inputValue.value = value;
+ onInputChange(value);
+ };
+
+ return {
+ handleInput
+ };
+};
diff --git a/packages/devui-vue/devui/editable-select/src/composables/use-keyboard-select.ts b/packages/devui-vue/devui/editable-select/src/composables/use-keyboard-select.ts
new file mode 100644
index 0000000000..45e6760d36
--- /dev/null
+++ b/packages/devui-vue/devui/editable-select/src/composables/use-keyboard-select.ts
@@ -0,0 +1,110 @@
+import { ComputedRef, nextTick, Ref } from 'vue';
+import { OptionObjectItem } from '../editable-select-type';
+
+interface useKeyboardSelectReturnType {
+ handleKeydown: (event: KeyboardEvent) => void
+}
+export const useKeyboardSelect: (
+ dropdownRef: Ref,
+ disabled: string,
+ visible: Ref,
+ hoverIndex: Ref,
+ selectedIndex: Ref,
+ options: ComputedRef,
+ toggleMenu: () => void,
+ closeMenu: () => void,
+ handleClick: (options: OptionObjectItem) => void
+) => useKeyboardSelectReturnType = (
+ dropdownRef,
+ disabled,
+ visible,
+ hoverIndex,
+ selectedIndex,
+ options,
+ toggleMenu,
+ closeMenu,
+ handleClick
+) => {
+ const updateHoveringIndex = (index: number) => {
+ hoverIndex.value = index;
+ };
+ const scrollToItem = (index: number) => {
+ const ul = dropdownRef.value;
+ const li = ul.children[index];
+ nextTick(() => {
+ if (li.scrollIntoViewIfNeeded) {
+ li.scrollIntoViewIfNeeded(false);
+ } else {
+ const containerInfo = ul.getBoundingClientRect();
+ const elementInfo = li.getBoundingClientRect();
+ if (elementInfo.bottom > containerInfo.bottom || elementInfo.top < containerInfo.top) {
+ li.scrollIntoView(false);
+ }
+ }
+ });
+ };
+
+ const onKeyboardNavigation = (direction: string, newIndex?: number) => {
+ if (!newIndex) {
+ newIndex = hoverIndex.value;
+ }
+ if (!['ArrowDown', 'ArrowUp'].includes(direction)) return;
+ if (direction === 'ArrowUp') {
+ if (newIndex === 0) {
+ newIndex = options.value.length - 1;
+ scrollToItem(newIndex);
+ updateHoveringIndex(newIndex);
+ return;
+ }
+ newIndex = newIndex - 1;
+ } else if (direction === 'ArrowDown') {
+ if (newIndex === options.value.length - 1) {
+ newIndex = 0;
+ scrollToItem(newIndex);
+ updateHoveringIndex(newIndex);
+ return;
+ }
+ newIndex = newIndex + 1;
+ }
+
+ const option = options.value[newIndex];
+ if (option[disabled]) {
+ return onKeyboardNavigation(direction, newIndex);
+ }
+ scrollToItem(newIndex);
+ updateHoveringIndex(newIndex);
+ };
+
+ const handleKeydown = (event: KeyboardEvent) => {
+ const keyCode = event.key || event.code;
+
+ if (options.value.length === 0) return;
+
+ if (!visible.value) {
+ return toggleMenu();
+ }
+
+ const onKeydownEnter = () => {
+ handleClick(options.value[hoverIndex.value]);
+ closeMenu();
+ };
+
+ const onKeydownEsc = () => {
+ closeMenu();
+ };
+
+ switch (keyCode) {
+ case 'Enter':
+ onKeydownEnter();
+ break;
+ case 'Escape':
+ onKeydownEsc();
+ break;
+ default:
+ onKeyboardNavigation(keyCode);
+ }
+ };
+ return {
+ handleKeydown
+ };
+};
diff --git a/packages/devui-vue/devui/editable-select/src/composables/use-lazy-load.ts b/packages/devui-vue/devui/editable-select/src/composables/use-lazy-load.ts
new file mode 100644
index 0000000000..2580eaf9ae
--- /dev/null
+++ b/packages/devui-vue/devui/editable-select/src/composables/use-lazy-load.ts
@@ -0,0 +1,25 @@
+import { Ref } from 'vue';
+import { OptionObjectItem } from '../editable-select-type';
+
+interface useLazyLoadReturenType {
+ loadMore: () => void
+}
+export const useLazyLoad: (
+ dropdownRef: Ref,
+ inputValue: Ref,
+ filterOtion: boolean | ((val: string, option: OptionObjectItem) => boolean),
+ load: (val: string) => void
+) => useLazyLoadReturenType = (dropdownRef, inputValue, filterOtion, load) => {
+ const loadMore = () => {
+ if (filterOtion !== false) return;
+
+ if (
+ dropdownRef.value.clientHeight + dropdownRef.value.scrollTop >=
+ dropdownRef.value.scrollHeight
+ ) {
+ load(inputValue.value);
+ }
+ };
+
+ return { loadMore };
+};
diff --git a/packages/devui-vue/devui/editable-select/src/editable-select-type.ts b/packages/devui-vue/devui/editable-select/src/editable-select-type.ts
new file mode 100644
index 0000000000..87a4508326
--- /dev/null
+++ b/packages/devui-vue/devui/editable-select/src/editable-select-type.ts
@@ -0,0 +1,7 @@
+export type OptionsType = Array;
+export type OptionType = string | number | OptionObjectItem;
+export interface OptionObjectItem {
+ label: string
+ value: string | number
+ [key: string]: any
+}
diff --git a/packages/devui-vue/devui/editable-select/src/editable-select-types.ts b/packages/devui-vue/devui/editable-select/src/editable-select-types.ts
index 2fb55f9525..8ee593c50d 100644
--- a/packages/devui-vue/devui/editable-select/src/editable-select-types.ts
+++ b/packages/devui-vue/devui/editable-select/src/editable-select-types.ts
@@ -1,74 +1,47 @@
-import type { PropType, ExtractPropTypes } from 'vue'
-type HorizontalConnectionPos = 'left' | 'center' | 'right';
-type VerticalConnectionPos = 'top' | 'center' | 'bottom';
-
-export interface ConnectionPosition {
- originX: HorizontalConnectionPos
- originY: VerticalConnectionPos
- overlayX: HorizontalConnectionPos
- overlayY: VerticalConnectionPos
-}
-export interface OptionItem {
- name: string
- [key: string]: any
-}
-export type Options = Array
+import type { PropType, ExtractPropTypes } from 'vue';
+import { OptionObjectItem, OptionsType } from './editable-select-type';
export const editableSelectProps = {
+ /* test: {
+ type: Object as PropType<{ xxx: xxx }>
+ } */
appendToBody: {
- type: Boolean,
- default: false
- },
- modelValue: {
- type: [String, Number] as PropType
+ type: Boolean
},
options: {
- type: Array as PropType,
+ type: Array as PropType,
default: () => []
},
- width: {
- type: Number,
- default: 450
- },
- maxHeight: {
- type: Number
- },
disabled: {
- type: Boolean,
- default: false
- },
- disabledKey: {
- type: String,
- },
- remote: {
- type: Boolean,
- default: false
+ type: Boolean
},
loading: {
type: Boolean
},
- enableLazyLoad: {
- type: Boolean,
- default: false
+ optionDisabledKey: {
+ type: String,
+ default: ''
+ },
+ placeholder: {
+ type: String,
+ default: 'Search'
},
- remoteMethod: {
- type: Function as PropType<(inputValue: string) => Array>
+ modelValue: {
+ type: String
+ },
+ width: {
+ type: Number
},
- filterMethod: {
- type: Function as PropType<(inputValue: string) => Array>
+ maxHeight: {
+ type: Number
},
- searchFn: {
- type: Function as PropType<(term: string) => Array>,
+ filterOption: {
+ type: [Function, Boolean] as PropType<
+ boolean | ((input: string, option: OptionObjectItem) => boolean)
+ >
},
loadMore: {
- type: Function as PropType<() => Array>
+ type: Function as PropType<(val: string) => void>
}
-} as const
+} as const;
-export const selectDropdownProps = {
- options: {
- type: Array as PropType,
- default: () => []
- }
-} as const
-export type EditableSelectProps = ExtractPropTypes
-export type SelectDropdownProps = ExtractPropTypes
\ No newline at end of file
+export type EditableSelectProps = ExtractPropTypes;
diff --git a/packages/devui-vue/devui/editable-select/src/editable-select.scss b/packages/devui-vue/devui/editable-select/src/editable-select.scss
index ae3919734b..ae067b20c3 100644
--- a/packages/devui-vue/devui/editable-select/src/editable-select.scss
+++ b/packages/devui-vue/devui/editable-select/src/editable-select.scss
@@ -1,61 +1,37 @@
@import '../../style/theme/color';
@import '../../style/core/animation';
-.devui-editable-select {
- .devui-form-group {
- input::-ms-clear {
- display: none;
- }
-
- ul.devui-list-unstyled {
- margin: 0;
- overflow-y: auto;
- padding: 0;
- }
-
- .devui-dropdown-bg {
- background: $devui-list-item-hover-bg;
- }
-
- .devui-popup-tips {
- color: $devui-text-weak;
- padding: 4px 12px;
- }
- .devui-form-control {
- outline: none;
- padding-right: 24px;
- }
+.devui-editable-select {
+ .devui-select-chevron-icon {
+ display: inline-flex;
+ vertical-align: middle;
+ transition: transform $devui-animation-duration-slow $devui-animation-ease-in-out-smooth;
}
- .devui-select-open {
- .devui-select-chevron-icon {
- transform: rotate(180deg);
-
- svg path {
- fill: $devui-text-weak;
- }
- }
+ input::-ms-clear {
+ display: none;
}
- .devui-form-control-feedback {
- .devui-select-chevron-icon {
- display: inline-flex;
- vertical-align: middle;
- transition: transform $devui-animation-duration-slow $devui-animation-ease-in-out-smooth;
- }
+ .devui-no-data-tip {
+ user-select: none;
+ cursor: not-allowed;
}
- .devui-has-feedback > .devui-form-control-feedback {
- line-height: 26px;
+ .devui-form-control {
+ outline: none;
+ padding-right: 24px;
}
- .devui-dropdown-bg.devui-dropdown-bg {
- background-color: inherit;
- }
- // 下拉部分
.devui-dropdown-menu {
width: 100%;
display: block;
+ // TODO: 全局样式被污染，暂时只能这么写
+ top: auto !important;
+ left: auto !important;
+ }
+
+ .devui-dropdown-menu-cdk {
+ position: static;
}
.devui-dropdown-item {
@@ -101,7 +77,8 @@
background-color: $devui-unavailable;
}
}
- // 选项disabled
+
+ /* 选项disabled */
.devui-dropdown-item.disabled,
.devui-dropdown-item.disabled:hover {
cursor: not-allowed;
@@ -124,11 +101,32 @@
}
}
-.devui-dropdown {
+.devui-editable-select.devui-select-open {
+ .devui-select-chevron-icon {
+ transform: rotate(180deg);
+ }
+ .devui-select-chevron-icon svg path {
+ fill: $devui-text-weak;
+ }
+}
+.devui-editable-select.devui-form-group.devui-has-feedback > .devui-form-control-feedback {
+ line-height: 26px;
+}
+.devui-editable-select-dropdown {
.devui-dropdown-menu {
width: 100%;
display: block;
+ width: 100%;
+ display: block;
+ // TODO: 全局样式被污染，暂时只能这么写
+ top: auto !important;
+ left: auto !important;
+ }
+
+ .devui-dropdown-menu-cdk {
+ position: static;
}
+
.devui-dropdown-item {
cursor: pointer;
display: block;
@@ -172,7 +170,8 @@
background-color: $devui-unavailable;
}
}
- // 选项disabled
+
+ /* 选项disabled */
.devui-dropdown-item.disabled,
.devui-dropdown-item.disabled:hover {
cursor: not-allowed;
@@ -190,7 +189,7 @@
}
.devui-popup-tips {
- color: $devui-text-weak;
+ color: $devui-text-weak; // TODO: Color-Question
padding: 4px 12px;
}
}
diff --git a/packages/devui-vue/devui/editable-select/src/editable-select.tsx b/packages/devui-vue/devui/editable-select/src/editable-select.tsx
index b137d25b9c..b9dec3c05e 100644
--- a/packages/devui-vue/devui/editable-select/src/editable-select.tsx
+++ b/packages/devui-vue/devui/editable-select/src/editable-select.tsx
@@ -1,238 +1,232 @@
import {
defineComponent,
- Transition,
- ref,
+ withModifiers,
computed,
+ ref,
+ Transition,
+ SetupContext,
reactive,
- toRefs,
- provide,
- renderSlot
-} from 'vue'
-import {
- OptionItem,
- editableSelectProps,
- EditableSelectProps,
- ConnectionPosition
-} from './editable-select-types'
-import SelectDropdown from './components/dropdown'
-import './editable-select.scss'
-import ClickOutside from '../../shared/devui-directive/clickoutside'
-import { debounce } from 'lodash'
-import { className } from './utils'
-import keyboardSelect from './composable/use-keyboard-select'
+ watch
+} from 'vue';
+import { editableSelectProps, EditableSelectProps } from './editable-select-types';
+import clickOutside from '../../shared/devui-directive/clickoutside';
+import { className } from '../src/utils/index';
+import './editable-select.scss';
+import { OptionObjectItem } from './editable-select-type';
+import { userFilterOptions } from './composables/use-filter-options';
+import { useInput } from './composables/use-input';
+import { useLazyLoad } from './composables/use-lazy-load';
+import { useKeyboardSelect } from './composables/use-keyboard-select';
export default defineComponent({
name: 'DEditableSelect',
- directives: { ClickOutside },
+ directives: {
+ clickOutside
+ },
props: editableSelectProps,
- emits: ['update:modelValue'],
- setup(props: EditableSelectProps, ctx) {
- const renderDropdown = (condition: boolean, type: number) => {
- if (!condition && type === 0) {
- return (
-
-
-
- )
- } else if (condition && type === 1) {
+ emits: ['update:modelValue', 'search', 'loadMore'],
+ setup(props: EditableSelectProps, ctx: SetupContext) {
+ const getItemCls = (option: OptionObjectItem, index: number) => {
+ const { optionDisabledKey: disabledKey } = props;
+ return className('devui-dropdown-item', {
+ disabled: disabledKey ? !!option[disabledKey] : false,
+ selected: index === selectIndex.value,
+ 'devui-dropdown-bg': index === hoverIndex.value
+ });
+ };
+ // 渲染下拉列表,根据appendToBody属性判断是否渲染在body下
+ const renderDropdown = () => {
+ if (props.appendToBody) {
return (
-
+
- )
+ );
+ } else {
+ return (
+
+
+
+ );
}
- }
-
- const renderDefaultSlots = (item) => {
- return ctx.slots.default ? renderSlot(ctx.slots, 'default', { item }) : item.name
- }
+ };
+ //Ref
+ const dopdownRef = ref();
+ const origin = ref();
- const renderEmptySlots = () => {
- return ctx.slots.empty ? renderSlot(ctx.slots, 'empty') : emptyText.value
- }
-
- const origin = ref()
- const dropdownRef = ref()
- const visible = ref(false)
- const inputValue = ref('')
- const selectedIndex = ref(0)
- const hoverIndex = ref(0)
- const query = ref(props.modelValue)
- const position = reactive({
+ const position = reactive({
originX: 'left',
originY: 'bottom',
overlayX: 'left',
overlayY: 'top'
- })
- const wait = computed(() => (props.remote ? 300 : 0))
-
- const emptyText = computed(() => {
- const options = filteredOptions.value
- if (!props.remote && options.length === 0) {
- return '没有相关记录'
- }
- if (options.length === 0) {
- return '没有数据'
- }
- return null
- })
+ });
+ const visible = ref(false);
+ const inputValue = ref(props.modelValue);
+ const hoverIndex = ref(0);
+ const selectIndex = ref(0);
+ //标准化options，统一处理成[{}]的形式
const normalizeOptions = computed(() => {
- let options: OptionItem
- const { disabledKey } = props
- disabledKey ? disabledKey : 'disabled'
- return props.options.map((item) => {
- if (typeof item !== 'object') {
- options = {
- name: item
- }
- return options
+ return props.options.map((option) => {
+ if (typeof option === 'object') {
+ return {
+ label: option.label ? option.label : option.value,
+ value: option.value,
+ ...option
+ };
}
- return item
- })
- })
+ return {
+ label: option + '',
+ value: option
+ };
+ });
+ });
+ //非远程搜索的情况下对数组进行过滤
+ const filteredOptions = userFilterOptions(normalizeOptions, inputValue, props.filterOption);
- const filteredOptions = computed(() => {
- const isValidOption = (o: OptionItem) => {
- const query = inputValue.value
- const containsQueryString = query
- ? o.name.toLocaleLowerCase().indexOf(query.toLocaleLowerCase()) >= 0
- : true
- return containsQueryString
+ const emptyText = computed(() => {
+ let text: string;
+ if (props.filterOption !== false && !filteredOptions.value.length) {
+ text = '找不到相关记录';
+ } else if (props.filterOption === false && !filteredOptions.value.length) {
+ text = '没有数据';
}
- return normalizeOptions.value
- .map((item) => {
- if (props.remote || isValidOption(item)) {
- return item
- }
- return null
- })
- .filter((item) => item !== null)
- })
- const findIndex = (o: OptionItem) => {
- return normalizeOptions.value.findIndex((item) => {
- return item.name === o.name
- })
- }
-
- const handleClose = () => {
- visible.value = false
- }
+ return ctx.slots.noResultItemTemplate ? ctx.slots.noResultItemTemplate() : text;
+ });
+ //下拉列表显影切换
const toggleMenu = () => {
- if (!props.disabled) {
- visible.value = !visible.value
- }
- }
-
- const onInputChange = (val: string) => {
- if (props.filterMethod) {
- props.filterMethod(val)
- } else if (props.remote) {
- props.remoteMethod(val)
- }
- }
+ visible.value = !visible.value;
+ };
- const debouncedOnInputChange = debounce(onInputChange, wait.value)
+ const closeMenu = () => {
+ visible.value = false;
+ };
+ // 懒加载
+ const { loadMore } = useLazyLoad(dopdownRef, inputValue, props.filterOption, props.loadMore);
- const handleInput = (event) => {
- const value = event.target.value
- inputValue.value = value
- query.value = value
- if (props.remote) {
- debouncedOnInputChange(value)
- } else {
- onInputChange(value)
- }
- }
+ //输入框变化后的逻辑
+ const { handleInput } = useInput(inputValue, ctx);
- const selectOptionClick = (e, item: OptionItem) => {
- const { disabledKey } = props
- if (disabledKey && item[disabledKey]) {
- e.stopPropagation()
- } else {
- query.value = item.name
- selectedIndex.value = findIndex(item)
- inputValue.value = ''
- ctx.emit('update:modelValue', item.name)
- visible.value = false
- }
- }
-
- const loadMore = () => {
- if (!props.enableLazyLoad) return
- const dropdownVal = dropdownRef.value
- if (dropdownVal.clientHeight + dropdownVal.scrollTop >= dropdownVal.scrollHeight) {
- props.loadMore()
- }
- }
- const { handleKeydown } = keyboardSelect(
- dropdownRef,
+ const handleClick = (option: OptionObjectItem) => {
+ const { optionDisabledKey: disabledKey } = props;
+ if (disabledKey && !!option[disabledKey]) return;
+ ctx.emit('update:modelValue', option.label);
+ closeMenu();
+ };
+ // 键盘选择
+ const { handleKeydown } = useKeyboardSelect(
+ dopdownRef,
+ props.optionDisabledKey,
visible,
hoverIndex,
- selectedIndex,
+ selectIndex,
filteredOptions,
toggleMenu,
- selectOptionClick
- )
+ closeMenu,
+ handleClick
+ );
- provide('InjectionKey', {
- dropdownRef,
- props: reactive({
- ...toRefs(props)
- }),
- visible,
- emptyText,
- selectedIndex,
- hoverIndex,
- loadMore,
- selectOptionClick,
- renderDefaultSlots,
- renderEmptySlots
- })
+ watch(
+ () => props.modelValue,
+ (newVal) => {
+ inputValue.value = newVal;
+ }
+ );
return () => {
const selectCls = className('devui-editable-select devui-form-group devui-has-feedback', {
- 'devui-select-open': visible.value
- })
- const inputCls = className(
- 'devui-form-control devui-dropdown-origin devui-dropdown-origin-open',
- {
- disabled: props.disabled
- }
- )
-
+ 'devui-select-open': visible.value === true
+ });
return (
- <>
-
+ );
+ };
}
-})
+});
diff --git a/packages/devui-vue/devui/editable-select/src/utils/index.ts b/packages/devui-vue/devui/editable-select/src/utils/index.ts
index 91a72c870f..8b81777a72 100644
--- a/packages/devui-vue/devui/editable-select/src/utils/index.ts
+++ b/packages/devui-vue/devui/editable-select/src/utils/index.ts
@@ -1,31 +1,19 @@
-import { VNode } from 'vue';
-
/**
* 动态获取class字符串
* @param classStr 是一个字符串，固定的class名
* @param classOpt 是一个对象，key表示class名，value为布尔值，true则添加，否则不添加
* @returns 最终的class字符串
*/
-export function className(
+ export function className(
classStr: string,
classOpt?: { [key: string]: boolean; }
-): string {
+ ): 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;
-}
-/**
- *
- * @param condition 渲染条件
- * @param node1 待渲染的组件
- * @param node2
- * @returns 最终被渲染的组件
- */
-export function renderCondition(condition: unknown, node1: VNode, node2?: VNode): VNode {
- return !!condition ? node1 : node2;
-}
\ No newline at end of file
+ }
\ No newline at end of file
diff --git a/packages/devui-vue/devui/form/src/directive/d-validate-rules.ts b/packages/devui-vue/devui/form/src/directive/d-validate-rules.ts
index 0fd265013f..89aa54e664 100644
--- a/packages/devui-vue/devui/form/src/directive/d-validate-rules.ts
+++ b/packages/devui-vue/devui/form/src/directive/d-validate-rules.ts
@@ -1,6 +1,6 @@
import AsyncValidator, { RuleItem } from 'async-validator';
import { VNode, DirectiveBinding } from 'vue';
-import { debounce } from 'lodash-es';
+import { debounce } from 'lodash';
import { EventBus, isObject, hasKey } from '../util';
import './style.scss';
@@ -14,6 +14,7 @@ interface ValidateFnParam {
messageShowType: MessageShowType
dfcUID: string
popPosition: PopPosition | Array
+ updateOn?: UpdateOn
}
interface CustomValidatorRuleObject {
@@ -46,6 +47,7 @@ export interface ShowPopoverErrorMessageEventData {
message?: string
uid?: string,
popPosition?: PopPosition
+ [prop : string]: any
}
type MessageShowType = 'popover' | 'text' | 'none' | 'toast';
@@ -199,18 +201,28 @@ function getKeyValueOfObjectList(obj): {key: string; value: any;}[] {
function handleErrorStrategy(el: HTMLElement): void {
const classList: Array = [...el.classList];
- classList.push('d-validate-rules-error-pristine');
+ classList.push('devui-validate-rules-error-pristine');
el.setAttribute('class', classList.join(' '));
}
function handleErrorStrategyPass(el: HTMLElement): void {
const classList: Array = [...el.classList];
- const index = classList.indexOf('d-validate-rules-error-pristine');
+ const index = classList.indexOf('devui-validate-rules-error-pristine');
index !== -1 && classList.splice(index, 1);
el.setAttribute('class', classList.join(' '));
}
-function handleValidateError({el, tipEl, message, isFormTag, messageShowType, dfcUID, popPosition = 'right-bottom'}: Partial): void {
+function getFormControlUID(el: HTMLElement): string {
+ if(el.tagName.toLocaleLowerCase() === 'body') return '';
+ let uid = ''
+ if(el.parentElement.id.startsWith('dfc-')) {
+ return el.parentElement.id;
+ }else {
+ uid = getFormControlUID(el.parentElement);
+ }
+}
+
+function handleValidateError({el, tipEl, message = '', isFormTag, messageShowType, dfcUID, popPosition = 'right-bottom', updateOn}: Partial): void {
// 如果该指令用在form标签上，这里做特殊处理
if(isFormTag && messageShowType === MessageShowTypeEnum.toast) {
// todo：待替换为toast
@@ -218,15 +230,19 @@ function handleValidateError({el, tipEl, message, isFormTag, messageShowType, df
return;
}
+ if(!dfcUID) {
+ dfcUID = getFormControlUID(el);
+ }
+
// messageShowType为popover时，设置popover
if(MessageShowTypeEnum.popover === messageShowType) {
- EventBus.emit("showPopoverErrorMessage", {showPopover: true, message, uid: dfcUID, popPosition} as ShowPopoverErrorMessageEventData);
+ EventBus.emit('showPopoverErrorMessage', {showPopover: true, message, uid: dfcUID, popPosition, updateOn} as ShowPopoverErrorMessageEventData);
return;
}
tipEl.innerText = '' + message;
tipEl.style.display = 'inline-flex';
- tipEl.setAttribute('class', 'd-validate-tip');
+ tipEl.setAttribute('class', 'devui-validate-tip');
handleErrorStrategy(el);
}
@@ -250,7 +266,7 @@ function getFormName(binding: DirectiveBinding): string {
}
// 校验处理函数
-function validateFn({validator, modelValue, el, tipEl, isFormTag, messageShowType, dfcUID, popPosition}: Partial) {
+function validateFn({validator, modelValue, el, tipEl, isFormTag, messageShowType, dfcUID, popPosition, updateOn}: Partial) {
validator.validate({modelName: modelValue}).then(() => {
handleValidatePass(el, tipEl);
}).catch((err) => {
@@ -265,7 +281,7 @@ function validateFn({validator, modelValue, el, tipEl, isFormTag, messageShowTyp
msg = errors[0].message;
}
- handleValidateError({el, tipEl, message: msg, isFormTag, messageShowType, dfcUID, popPosition});
+ handleValidateError({el, tipEl, message: msg, isFormTag, messageShowType, dfcUID, popPosition, updateOn});
})
}
@@ -295,7 +311,7 @@ export default {
if(refName) {
// 判断d-form是否传递了messageShowType属性
- messageShowType = binding.instance[refName]["messageShowType"] ?? "popover";
+ messageShowType = binding.instance[refName]['messageShowType'] ?? 'popover';
}
// errorStrategy可配置在options对象中
@@ -394,14 +410,21 @@ export default {
const htmlEventValidateHandler = (e) => {
const modelValue = e.target.value;
if(messageShowType === MessageShowTypeEnum.popover) {
- EventBus.emit("showPopoverErrorMessage", {showPopover: false, message: "", uid: dfcUID, popPosition} as ShowPopoverErrorMessageEventData);
+ EventBus.emit('showPopoverErrorMessage', {showPopover: false, message: '', uid: dfcUID, popPosition, updateOn} as ShowPopoverErrorMessageEventData);
}
- validateFn({validator, modelValue, el, tipEl, isFormTag: false, messageShowType, dfcUID, popPosition});
+ validateFn({validator, modelValue, el, tipEl, isFormTag: false, messageShowType, dfcUID, popPosition, updateOn});
}
// 监听事件验证
vnode.children[0].el.addEventListener(updateOn, htmlEventValidateHandler);
+ // 如果校验时机为change，则在focus时关闭popover
+ if(messageShowType === MessageShowTypeEnum.popover && updateOn === UpdateOnEnum.change) {
+ vnode.children[0].el.addEventListener('focus', () => {
+ EventBus.emit('showPopoverErrorMessage', {showPopover: false, uid: dfcUID, updateOn} as ShowPopoverErrorMessageEventData);
+ });
+ }
+
// 设置errorStrategy
if(errorStrategy === ErrorStrategyEnum.pristine) {
handleErrorStrategy(el);
@@ -415,7 +438,7 @@ export default {
const modelValue = isFormTag ? '' : vnode.children[0].el.value;
// 进行提交验证
- validateFn({validator, modelValue, el, tipEl, isFormTag, messageShowType});
+ validateFn({validator, modelValue, el, tipEl, isFormTag, messageShowType, updateOn: 'submit'});
});
}
diff --git a/packages/devui-vue/devui/form/src/directive/d-validate.ts b/packages/devui-vue/devui/form/src/directive/d-validate.ts
new file mode 100644
index 0000000000..76d5e03e96
--- /dev/null
+++ b/packages/devui-vue/devui/form/src/directive/d-validate.ts
@@ -0,0 +1,259 @@
+import { VNode, DirectiveBinding, h, render, nextTick } from 'vue';
+import { debounce } from 'lodash-es';
+import { EventBus, transformCamelToDash } from '../util';
+import useValidate from '../use-validate';
+import dPopover from '../../../popover/src/popover';
+import {DFormValidateSubmitData, positionType} from '../form-types';
+import './style.scss';
+
+interface BindingValueRules {
+ [prop:string]: unknown
+}
+
+interface BindingValue {
+ prop: string
+ modelName?: string
+ rules: BindingValueRules
+ validators?: any
+ asyncValidators?: any
+ errorStrategy?: 'pristine' | 'dirty'
+ updateOn: 'change' | 'input' | 'submit'
+ asyncDebounceTime?: number | string
+ messageShowType?: 'popover' | 'text' | 'none'
+ popPosition: string | string[]
+ messageChange?: (msg, { errors, fields }) => {}
+ [prop: string]: any
+}
+
+const getTargetElement = (el: HTMLElement, targetTag: string) => {
+ if (!el) return;
+ let tempEl:HTMLElement = el;
+ while(tempEl?.tagName && tempEl.tagName.toLocaleLowerCase() !== 'body') {
+ if(tempEl.tagName.toLocaleLowerCase() === targetTag) {
+ return tempEl;
+ }
+ tempEl = tempEl.parentElement;
+ }
+}
+
+export default {
+ mounted(el: HTMLElement, binding: DirectiveBinding): void {
+ let { prop, rules, validators, asyncValidators, errorStrategy, updateOn = 'input', asyncDebounceTime = 300, messageShowType = 'popover', messageChange, popPosition = ['right', 'bottom'] }: BindingValue = binding.value;
+ const {instance, arg: modelName} = binding;
+
+ const instanceRef = instance[Object.keys(instance.$refs)[0]];
+ if(instanceRef && instanceRef?.messageShowType) {
+ messageShowType = instanceRef.messageShowType;
+ }
+ const hasModelName = !!modelName;
+
+ const objToStyleString = (obj: any = {}) => {
+ let style = '';
+ for (const key in obj) {
+ style += `${transformCamelToDash(key)}: ${obj[key]};`
+ }
+ return style;
+ }
+
+ const renderPopover = (msg, visible = true) => {
+ if(messageShowType !== 'popover') return;
+ el.style.position = 'relative';
+ const popoverPosition = () => {
+ return Array.isArray(popPosition) ? popPosition.join('-') : popPosition;
+ }
+
+ const popover = h(dPopover, {
+ visible: visible,
+ controlled: updateOn !== 'change',
+ content: msg,
+ popType: 'error',
+ position: popoverPosition() as positionType,
+ });
+
+ // 这里使用比较hack的方法控制popover显隐，因为点击popover外部元素隐藏popover之后，再重新传入visible不起作用了，popover不会重新渲染了
+ nextTick(() => {
+ if(visible) {
+ addElClass(popover.el as HTMLElement, 'devui-popover-isVisible')
+ }else {
+ removeElClass(popover.el as HTMLElement, 'devui-popover-isVisible')
+ }
+ })
+
+ const popoverWrapperStyle = () => {
+ let rect = el.getBoundingClientRect();
+ let style: any = {
+ position: 'absolute',
+ height: 0,
+ top: (rect.height / 2) + 'px',
+ right: 0,
+ }
+
+ let p = popoverPosition();
+ if(popPosition === 'bottom' || popPosition === 'top') {
+ style.left = '50%';
+ }
+ if(popPosition === 'left' || popPosition === 'right') {
+ style.top = 0;
+ }
+ if(p.includes('top')) {
+ style.top = -(rect.height / 2) + 'px';
+ }
+ if(p.endsWith('-bottom')) {
+ style.top = (rect.height / 2) + 'px';
+ }
+ if(p.includes('left')) {
+ style.left = 0;
+ }
+ if(p.includes('right')) {
+ delete style.left;
+ style.right = 0;
+ }
+
+ if(p.startsWith('bottom')) {
+ delete style.top;
+ style.bottom = 0;
+ }
+ if(p.startsWith('top')) {
+ delete style.bottom;
+ }
+
+ return objToStyleString(style);
+ };
+
+ const vn = h('div', {
+ style: popoverWrapperStyle()
+ }, popover)
+ render(vn, el);
+ }
+
+ const tipEl = document.createElement('div');
+ if(messageShowType === 'text') {
+ el.parentNode.appendChild(tipEl);
+ }
+
+ const renderTipEl = (msg, visible = true) => {
+ tipEl.innerText = msg;
+ tipEl.style.display = visible ? 'block' : 'none';
+ tipEl.setAttribute('class', 'devui-validate-tip');
+ }
+
+ const addElClass = (el: HTMLElement, className: string) => {
+ let currentClasses = el.getAttribute('class');
+ if(!currentClasses.includes(className)) {
+ currentClasses = currentClasses.trim() + (currentClasses.trim() ? ' ' : '') + className;
+ }
+ el.setAttribute('class', currentClasses);
+ }
+
+ const removeElClass = (el: HTMLElement, className: string) => {
+ let currentClasses = el.getAttribute('class');
+ currentClasses = currentClasses.replace(className, '');
+ el.setAttribute('class', currentClasses);
+ }
+
+ const {validate, createDevUIBuiltinValidator} = useValidate();
+ let propRule = {} || [] as any; // 值为对象数组或单个对象
+
+ const isCustomValidator = validators !== undefined || asyncValidators !== undefined;
+ if(isCustomValidator) {
+ validators && (rules = validators);
+ asyncValidators && (rules = asyncValidators);
+ if(asyncValidators) {
+ let time = Number(asyncDebounceTime);
+ if(isNaN(time)) {
+ console.warn('[v-d-validate] invalid asyncDebounceTime');
+ time = 300;
+ }
+ rules = asyncValidators.map(item => {
+ let res = {
+ message: item.message,
+ asyncValidator: (rule, value) => {
+ return new Promise(debounce((resolve, reject) => {
+ const res = item.asyncValidator(rule, value);
+ if(res) {
+ resolve('');
+ }else {
+ reject(rule.message);
+ }
+ }, time))
+ },
+ } as any;
+ return res;
+ })
+ }
+ }else {
+ if(Array.isArray(rules)) {
+ rules.map(item => {
+ return createDevUIBuiltinValidator(item);
+ });
+ }else {
+ rules = createDevUIBuiltinValidator(rules);
+ }
+ }
+
+ let descriptor: any = {
+ [prop]: rules
+ }
+ const validateFn = async () => {
+ const validateModel = {
+ [prop]: hasModelName ? instance[modelName][prop] : instance[prop]
+ };
+ return validate(descriptor, validateModel).then(res => {
+ renderPopover('', false);
+ removeElClass(el, 'devui-error');
+ messageShowType === 'text' && renderTipEl('', true);
+ return res;
+ }).catch(({ errors, fields }) => {
+ let msg = propRule.message ?? fields[prop][0].message;
+ renderPopover(msg);
+ addElClass(el, 'devui-error');
+ messageShowType === 'text' && renderTipEl(msg, true);
+ if(messageChange && typeof messageChange === 'function') {
+ messageChange(msg, { errors, fields });
+ }
+ return { errors, fields };
+ })
+ }
+
+ if(errorStrategy === 'pristine') {
+ validateFn();
+ }else {
+ el.childNodes[0].addEventListener(updateOn, () => {
+ validateFn();
+ })
+ if(updateOn === 'change') {
+ el.childNodes[0].addEventListener('focus', () => {
+ renderPopover('', false);
+ })
+ }
+ }
+
+ // 处理表单提交校验
+ const formTag = getTargetElement(el, 'form') as HTMLFormElement;
+ if(formTag && updateOn === 'submit') {
+ const formName = formTag.name;
+ const formSubmitDataCallback: any = (val: DFormValidateSubmitData) => {
+ validateFn().then((res: any) => {
+ val.callback(!!!res?.errors, { errors: res?.errors, fields: res?.fields });
+ }).catch(({errors, fields}) => {
+ console.log('validateFn {errors, fields}', {errors, fields});
+ });
+ };
+ EventBus.on(`formSubmit:${formName}`, formSubmitDataCallback);
+ EventBus.on(`formReset:${formName}:${prop}`, () => {
+ renderPopover('', false);
+ removeElClass(el, 'devui-error');
+ messageShowType === 'text' && renderTipEl('', false);
+ });
+ }
+ },
+
+ beforeUnmount(el: HTMLElement, binding: DirectiveBinding) {
+ const {prop} = binding.value;
+ const formTag = getTargetElement(el, 'form') as HTMLFormElement;
+ const formName = formTag.name;
+
+ EventBus.off(`formSubmit:${formName}`);
+ EventBus.off(`formReset:${formName}:${prop}`);
+ }
+}
diff --git a/packages/devui-vue/devui/form/src/directive/style.scss b/packages/devui-vue/devui/form/src/directive/style.scss
index 56345b9d66..11a724fb1e 100644
--- a/packages/devui-vue/devui/form/src/directive/style.scss
+++ b/packages/devui-vue/devui/form/src/directive/style.scss
@@ -1,5 +1,5 @@
-.d-validate-rules-error-pristine {
+.devui-validate-rules-error-pristine {
// background-color: #ffeeed;
input {
background-color: #ffeeed;
@@ -15,10 +15,17 @@
}
}
-.d-validate-tip {
+.devui-validate-tip {
display: flex;
justify-content: center;
align-items: center;
font-size: 12px;
color: #f66f6a;
}
+
+.devui-error {
+ input, .devui-tags {
+ border-color: var(--devui-danger-line,#f66f6a) !important;
+ background-color: var(--devui-danger-bg,#ffeeed) !important;
+ }
+}
\ No newline at end of file
diff --git a/packages/devui-vue/devui/form/src/form-control/form-control.scss b/packages/devui-vue/devui/form/src/form-control/form-control.scss
index 1c608a95e5..7e246ad1c8 100644
--- a/packages/devui-vue/devui/form/src/form-control/form-control.scss
+++ b/packages/devui-vue/devui/form/src/form-control/form-control.scss
@@ -1,14 +1,15 @@
-.form-control {
+.devui-form-control {
position: relative;
+ width: 100%;
- .star {
+ .devui-star {
color: red;
}
.devui-form-control-container {
position: relative;
- .feedback-status {
+ .devui-feedback-status {
position: absolute;
top: 50%;
right: 0;
@@ -31,6 +32,7 @@
.devui-form-control-container-horizontal {
display: flex;
+ width: 100%;
.devui-radio {
&:not(:last-child) {
@@ -50,43 +52,16 @@
}
}
- input,
- .devui-tags-host {
- width: 200px;
- }
-
- .d-validate-tip {
- margin: 0 10px;
+ .devui-validate-tip {
+ margin: 0;
}
}
-
.devui-control-content-wrapper {
- .devui-popover-wrapper {
- position: absolute;
- width: 100%;
- height: 100%;
- left: 0;
- top: 0;
- z-index: 9;
-
- & > div {
- width: inherit;
- height: 100%;
- }
- }
+ width: 100%;
}
- .with-popover {
- position: relative;
- & > div {
- z-index: 10;
- }
- }
-
-
-
- .has-feedback {
+ .devui-has-feedback {
display: flex;
align-items: center;
@@ -95,7 +70,7 @@
}
}
- .feedback-error {
+ .devui-feedback-error {
border: 1px solid #f66f6a;
border-radius: 2px;
diff --git a/packages/devui-vue/devui/form/src/form-control/form-control.tsx b/packages/devui-vue/devui/form/src/form-control/form-control.tsx
index 55612f3a6f..90d6397b9c 100644
--- a/packages/devui-vue/devui/form/src/form-control/form-control.tsx
+++ b/packages/devui-vue/devui/form/src/form-control/form-control.tsx
@@ -1,7 +1,8 @@
import { defineComponent, inject, ref, computed, reactive, onMounted, Teleport } from 'vue';
-import { uniqueId } from 'lodash-es';
+import { uniqueId } from 'lodash';
import { IForm, formControlProps, formInjectionKey } from '../form-types';
import { ShowPopoverErrorMessageEventData } from '../directive/d-validate-rules'
+import clickoutsideDirective from '../../../shared/devui-directive/clickoutside'
import { EventBus, getElOffset } from '../util';
import Icon from '../../../icon/src/icon';
import Popover from '../../../popover/src/popover';
@@ -11,16 +12,20 @@ type positionType = 'top' | 'right' | 'bottom' | 'left';
export default defineComponent({
name: 'DFormControl',
+ directives: {
+ clickoutside: clickoutsideDirective
+ },
props: formControlProps,
setup(props, ctx) {
const formControl = ref();
const dForm = reactive(inject(formInjectionKey, {} as IForm));
const labelData = reactive(dForm.labelData);
const isHorizontal = labelData.layout === 'horizontal';
- const uid = uniqueId("dfc-");
+ const uid = uniqueId('dfc-');
const showPopover = ref(false);
- const tipMessage = ref("");
- const popPosition = ref("bottom");
+ const updateOn = ref('change');
+ const tipMessage = ref('');
+ const popPosition = ref('bottom');
let rectInfo: Partial = {
width: 0,
height: 0
@@ -35,14 +40,15 @@ export default defineComponent({
onMounted(() => {
const el = document.getElementById(uid);
elOffset = getElOffset(el);
- EventBus.on("showPopoverErrorMessage", (data: ShowPopoverErrorMessageEventData) => {
+ EventBus.on('showPopoverErrorMessage', (data: ShowPopoverErrorMessageEventData) => {
if (uid === data.uid) {
rectInfo = el.getBoundingClientRect();
- popoverLeftPosition = popPosition.value === "top" || popPosition.value === "bottom" ? rectInfo.right - (rectInfo.width / 2) : rectInfo.right;
- popoverTopPosition = popPosition.value === "top" ? elOffset.top + (rectInfo.height / 2) - rectInfo.height : elOffset.top + (rectInfo.height / 2);
showPopover.value = data.showPopover;
tipMessage.value = data.message;
popPosition.value = data.popPosition as any; // todo: 待popover组件positionType完善类型之后再替换类型
+ popoverLeftPosition = popPosition.value === 'top' || popPosition.value === 'bottom' ? rectInfo.right - (rectInfo.width / 2) : rectInfo.right;
+ popoverTopPosition = popPosition.value === 'top' ? elOffset.top + (rectInfo.height / 2) - rectInfo.height : elOffset.top + (rectInfo.height / 2);
+ updateOn.value = data.updateOn ?? 'change';
}
});
});
@@ -60,13 +66,20 @@ export default defineComponent({
}
})
+ const handleClickOutside = () => {
+ if(updateOn.value !== 'change') {
+ showPopover.value = false;
+ }
+ }
+
return () => {
const {
feedbackStatus,
extraInfo,
} = props;
- return 
