wip failed

elonehoo · Aug 12, 2022 · 02eae0e · 02eae0e
1 parent 752c56a
commit 02eae0e
Show file tree

Hide file tree

Showing 4 changed files with 159 additions and 59 deletions.
diff --git a/core/src/components/pickSelectItem/index.ts b/core/src/components/pickSelectItem/index.ts
@@ -0,0 +1,10 @@
+import type { App, Plugin } from 'vue'
+import pickSelectItem from './pickSelectItem.vue'
+
+export const pickSelectItemPlugin: Plugin = {
+  install(app: App) {
+    app.component('pickSelectItem', pickSelectItem)
+  },
+}
+
+export { pickSelectItem }
diff --git a/core/src/components/pickSelectItem/pickSelectItem.vue b/core/src/components/pickSelectItem/pickSelectItem.vue
@@ -1,15 +1,18 @@
 <script setup lang="ts">
+import { pickIcon } from '../pickIcon'
 import { getColor } from '../../util/color'
 import { ref, computed, useAttrs, watch, nextTick, getCurrentInstance } from 'vue'
 
 const attrss = useAttrs()
 
 const instance = getCurrentInstance()
 
+const item = ref<any>(null)
+
 const props = withDefaults(defineProps<{
   disabled?:boolean,
-  modelValue:any,
-  text:any
+  modelValue?:any,
+  text?:any
 }>(), {
   disabled:false,
   moduleValue:undefined,
@@ -43,12 +46,12 @@ const isActive = computed(()=>{
 const attrs = computed(()=>{
   return {
     onblur:(event:any)=>{
-      if(event.relatedTarget?!event.relatedTarget.closest('.vs-select--options'):true) {
+      if(event.relatedTarget?!event.relatedTarget.closest('.pick-select--options'):true) {
         parent.value.closeOptions()
       }
     },
     onclick:(event:any)=>{
-      clickOption(event)
+      clickOption()
     },
     onmouseover:(event:any)=>{
       emits('mouseover',event)
@@ -63,65 +66,65 @@ const attrs = computed(()=>{
 
 const styles = computed(()=>{
   return {
-    background: isActive.value? getColor(parent.value.color,0.1) : null,
-    color: isActive.value ? getColor(parent.value.color,1) : null,
-    fontWeight: isActive.value ? 'bold' : null
+    background: isActive.value? getColor(parent.value.color,0.1) : '',
+    color: isActive.value ? getColor(parent.value.color,1) : '',
+    fontWeight: isActive.value ? 'bold' : ''
   }
 })
 
 const getValue = computed(()=>{
   return parent.value.modelValue
 })
 
-watch(()=>parent.value.active, ()=>{
-  nextTick(()=>{
-    if( this.parent.multiple?this.getValue.indexOf(this.modelValue) != -1:this.getValue == this.modelValue ) {
-      emits('update:isSelected', true)
-      getText.value = props.text
-      putValue()
-    } else {
-      emits('update:isSelected', false)
-      getText.value = props.text
-      putValue()
-    }
-  })
-})
+// watch(()=>parent, ()=>{
+//   nextTick(()=>{
+//     if( parent.value.multiple ? getValue.value.indexOf(props.modelValue) != -1 : getValue.value == props.modelValue ) {
+//       emits('update:isSelected', true)
+//       getText.value = props.text
+//       putValue()
+//     } else {
+//       emits('update:isSelected', false)
+//       getText.value = props.text
+//       putValue()
+//     }
+//   })
+// })
 
-watch(()=>modelValueInputx,()=>{
-  if(visible.value){
-    let modelValueInputxs = modelValueInputx.value.split(',')
-    if(modelValueInputxs[modelValueInputxs.length-1] == ''){
-      getText.value = props.text
-      return
-    }
-    let modelValuex = modelValueInputxs[modelValueInputxs.length-1]
-    var re = new RegExp(modelValuex,"i");
-    if(props.text.toUpperCase().indexOf(modelValuex.toUpperCase()) == 0){
-      modelValuex = MaysPrimera(modelValuex)
-    }
-    let text = props.text.replace(re,`<span class="searchx">${modelValuex}</span>`)
-    getText.value = text
-  } else {
-    getText.value = props.text
-  }
-})
+// watch(()=>modelValueInputx,()=>{
+//   if(visible.value){
+//     let modelValueInputxs = modelValueInputx.value.split(',')
+//     if(modelValueInputxs[modelValueInputxs.length-1] == ''){
+//       getText.value = props.text
+//       return
+//     }
+//     let modelValuex = modelValueInputxs[modelValueInputxs.length-1]
+//     var re = new RegExp(modelValuex,"i");
+//     if(props.text.toUpperCase().indexOf(modelValuex.toUpperCase()) == 0){
+//       modelValuex = MaysPrimera(modelValuex)
+//     }
+//     let text = props.text.replace(re,`<span class="searchx">${modelValuex}</span>`)
+//     getText.value = text
+//   } else {
+//     getText.value = props.text
+//   }
+// })
 
-searchParent((parent:any) => {
-  parent.childrenItems.push(this);
-  parent.value = parent;
-  putValue();
-  nextTick(() => {
-    if (parent.value.multiple ? getValue.value.indexOf(props.modelValue) != -1 : getValue.value == props.modelValue) {
-      emits('update:isSelected', true)
-      getText.value = props.text
-      putValue()
-    } else {
-      emits('update:isSelected', false)
-      getText.value = props.text
-      putValue()
-    }
-  })
-})
+// searchParent((parent:any) => {
+//   parent.childrenItems.push(this);
+//   parent.value = parent;
+//   putValue();
+//   nextTick(() => {
+//     if (parent.value.multiple ? getValue.value.indexOf(props.modelValue) != -1 : getValue.value == props.modelValue) {
+//       emits('update:isSelected', true)
+//       getText.value = props.text
+//       putValue()
+//     } else {
+//       emits('update:isSelected', false)
+//       getText.value = props.text
+//       putValue()
+//     }
+//   })
+// })
 
 function searchParent(callback:any){
   let parent = instance?.parent
@@ -182,15 +185,91 @@ function navigateOptions(orientation:any){
   }
   let nextElement = getNextLi(ref(orientationObject),orientationObject)
   if(nextElement){
-    nextElement.querySelector('.vs-select--item').focus()
+    nextElement.querySelector('.pick-select--item').focus()
   } else {
     if (lengthx === children.length) lengthx--
-    getNextLi(children[lengthx == 0?1:lengthx].$el,orientationObject).querySelector('.vs-select--item').focus()
+    getNextLi(children[lengthx == 0?1:lengthx].$el,orientationObject).querySelector('.pick-select--item').focus()
   }
 }
 
+function focusValue(index:any){
+  if(parent.value.multiple? parent.value.modelValue.indexOf(props.modelValue) != -1:props.modelValue == parent.value.modelValue){
+    if(!parent.value.autocomplete){
+      setTimeout( () => {
+        item.focus()
+      }, 50);
+    }
+  } else if (index === 0) {
+    if(!parent.value.autocomplete){
+      setTimeout( () => {
+        item.focus()
+      }, 50);
+    }
+  }
+}
+
+function putValue(){
+  if(props.modelValue == parent.value.modelValue){
+    parent.value.modelValuex = props.text
+  }
+}
+
+function clickOption(){
+  if(disabledx.value){
+    return
+  }
+  let text = props.text
+  if(!parent.value.multiple){
+    parent.value.active = false
+    document.removeEventListener('click',parent.value.clickBlur)
+    parent.value.modelValuex = text
+    parent.value.$emit('update:modelValue',props.modelValue)
+    parent.value.changeValue()
+  } else if (parent.value.multiple) {
+    parent.value.modelValuex = text
+    parent.value.addMultiple(props.modelValue)
+  }
+  parent.value.childrenItems.map((item:any)=>{
+    item.modelValueInputx = ''
+  })
+}
 </script>
 
 <template>
-
+<li
+    v-if="parent"
+    v-show="visible"
+    :class="$attrs.class"
+    :style="$attrs.style"
+    :data-text="text"
+    class="pick-component"
+  >
+    <button
+      v-bind="attrs"
+      ref="item"
+      :disabled="disabled"
+      :style="styles"
+      :class="{
+        'activex':parent.multiple?getValue.indexOf(modelValue) != -1:getValue == modelValue,
+        'con-icon':parent.multiple,
+        'disabledx':disabledx
+      }"
+      class="pick-select--item"
+      type="button"
+      name="button"
+      @keydown.backspace.prevent="backspace"
+      @keydown.down.prevent="navigateOptions('next')"
+      @keydown.up.prevent="navigateOptions('prev')"
+      @keydown.enter.prevent="clickOption()"
+    >
+      <pick-icon
+        v-if="parent.multiple"
+        class="icon-item pick-select--item-icon"
+        icon="check_circle"
+      ></pick-icon>
+      <span
+        v-html="getText"
+      ></span>
+    </button>
+  </li>
 </template>
diff --git a/core/src/index.ts b/core/src/index.ts
@@ -28,6 +28,7 @@ import { pickNavbarItemsPlugin } from './components/pickNavbarItems'
 import { pickNavbarTitlePlugin } from './components/pickNavbarTitle'
 import { pickNavbarGroupPlugin } from './components/pickNavbarGroup'
 import {pickSelectPlugin} from './components/pickSelect'
+import {pickSelectItemPlugin} from './components/pickSelectItem'
 
 const pickPlugin: Plugin = {
   install(app: App) {
@@ -59,6 +60,7 @@ const pickPlugin: Plugin = {
     pickNavbarTitlePlugin.install?.(app)
     pickNavbarGroupPlugin.install?.(app)
     pickSelectPlugin.install?.(app)
+    pickSelectItemPlugin.install?.(app)
   },
 }
 
@@ -93,5 +95,6 @@ export * from './components/pickNavbarTitle'
 export * from './components/pickNavbarGroup'
 export * from './components/pickNavbarItem'
 export * from './components/pickSelect'
+export * from './components/pickSelectItem'
 
 export * from './components/pickBreadcrumb/type'
diff --git a/example/src/pages/select/select.vue b/example/src/pages/select/select.vue
@@ -1,12 +1,20 @@
 <script setup lang="ts">
 import {ref} from 'vue'
-import {pickSelect} from '@elonehoo/pick'
+import {pickSelect,pickSelectItem} from '@elonehoo/pick'
 
 const select1 = ref(2)
+
+const options1 = ref([
+  {text:'IT',value:0},
+  {text:'Blade Runner',value:2},
+  {text:'Thor Ragnarok',value:3},
+])
 </script>
 
 <template>
   <div>
-    <pick-select label="Figuras" v-model="select1" ></pick-select>
+    <pick-select label="Figuras" v-model="select1" >
+      <pick-select-item :key="index" :value="item.value" :text="item.text" v-for="item,index in options1" />
+    </pick-select>
   </div>
 </template>