Skip to content
This repository has been archived by the owner on Apr 14, 2023. It is now read-only.

Commit

Permalink
wip failed
Browse files Browse the repository at this point in the history
  • Loading branch information
@elonehoo
elonehoo committed Aug 12, 2022
1 parent 752c56a commit 02eae0e
Show file tree
Hide file tree
Showing 4 changed files with 159 additions and 59 deletions.
10 changes: 10 additions & 0 deletions core/src/components/pickSelectItem/index.ts
View file
Original file line number Diff line number Diff line change
@@ -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 }
193 changes: 136 additions & 57 deletions core/src/components/pickSelectItem/pickSelectItem.vue
View file
Original file line number Diff line number Diff line change
@@ -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,
Expand Down Expand Up @@ -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)
Expand All @@ -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
Expand Down Expand Up @@ -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>
3 changes: 3 additions & 0 deletions core/src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -59,6 +60,7 @@ const pickPlugin: Plugin = {
pickNavbarTitlePlugin.install?.(app)
pickNavbarGroupPlugin.install?.(app)
pickSelectPlugin.install?.(app)
pickSelectItemPlugin.install?.(app)
},
}

Expand Down Expand Up @@ -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'
12 changes: 10 additions & 2 deletions example/src/pages/select/select.vue
View file
Original file line number Diff line number Diff line change
@@ -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>

0 comments on commit 02eae0e

Please sign in to comment.