revert: refs #7404 #7404 VnSelect hover
gitea/salix-front/pipeline/pr-dev This commit looks good Details

This commit is contained in:
Javier Segarra 2024-10-07 20:05:04 +02:00
parent 68f8037db4
commit 5e75bb29fb
4 changed files with 53 additions and 48 deletions

View File

@ -71,7 +71,7 @@ defineExpose({ orderBy });
]"
class="no-box-shadow"
:clickable="true"
style="min-width: 20px; padding: 0 0.9.em"
style="min-width: 40px"
>
<div
class="column flex-center"

View File

@ -453,7 +453,7 @@ function handleOnDataSaved(_) {
<template #header-cell="{ col }">
<QTh v-if="col.visible ?? true">
<div
class="column self-start ellipsis"
class="column self-start q-ml-xs ellipsis"
:class="`text-${col?.align ?? 'left'}`"
:style="$props.columnSearch ? 'height: 75px' : ''"
>

View File

@ -104,8 +104,7 @@ const noOneOpt = ref({
[optionValue.value]: false,
[optionLabel.value]: noOneText,
});
const getVal = (val) => ($props.useLike ? { like: `%${val}%` } : val);
const hover = ref(false);
const value = computed({
get() {
return $props.modelValue;
@ -226,6 +225,8 @@ async function filterHandler(val, update) {
function nullishToTrue(value) {
return value ?? true;
}
const getVal = (val) => ($props.useLike ? { like: `%${val}%` } : val);
</script>
<template>
@ -239,53 +240,58 @@ function nullishToTrue(value) {
:fields="fields"
:params="params"
/>
<div @mouseover="hover = true" @mouseleave="hover = false">
<QSelect
v-model="value"
:options="myOptions"
:option-label="optionLabel"
:option-value="optionValue"
v-bind="$attrs"
@filter="filterHandler"
:emit-value="nullishToTrue($attrs['emit-value'])"
:map-options="nullishToTrue($attrs['map-options'])"
:use-input="nullishToTrue($attrs['use-input'])"
:hide-selected="nullishToTrue($attrs['hide-selected'])"
:fill-input="nullishToTrue($attrs['fill-input'])"
ref="vnSelectRef"
lazy-rules
:class="{ required: $attrs.required }"
:rules="mixinRules"
virtual-scroll-slice-size="options.length"
hide-bottom-space
>
<template v-if="hover && value && !$attrs.disabled && isClearable" #append>
<QIcon
v-show="value"
name="close"
@click.stop="
() => {
value = null;
emit('remove');
}
"
class="cursor-pointer"
size="xs"
/>
</template>
<template
v-for="(_, slotName) in $slots"
#[slotName]="slotData"
:key="slotName"
>
<slot :name="slotName" v-bind="slotData ?? {}" :key="slotName" />
</template>
</QSelect>
</div>
<QSelect
v-model="value"
:options="myOptions"
:option-label="optionLabel"
:option-value="optionValue"
v-bind="$attrs"
@filter="filterHandler"
:emit-value="nullishToTrue($attrs['emit-value'])"
:map-options="nullishToTrue($attrs['map-options'])"
:use-input="nullishToTrue($attrs['use-input'])"
:hide-selected="nullishToTrue($attrs['hide-selected'])"
:fill-input="nullishToTrue($attrs['fill-input'])"
ref="vnSelectRef"
lazy-rules
:class="{ required: $attrs.required }"
:rules="mixinRules"
virtual-scroll-slice-size="options.length"
hide-bottom-space
>
<template v-if="isClearable" #append>
<QIcon
v-show="value"
name="close"
@click.stop="
() => {
value = null;
emit('remove');
}
"
class="cursor-pointer"
size="xs"
/>
</template>
<template v-for="(_, slotName) in $slots" #[slotName]="slotData" :key="slotName">
<slot :name="slotName" v-bind="slotData ?? {}" :key="slotName" />
</template>
</QSelect>
</template>
<style scoped lang="scss">
.q-field--outlined {
max-width: 100%;
}
.q-field__inner {
.q-field__control {
min-height: auto !important;
display: flex;
align-items: flex-end;
.q-field__native.row {
min-height: auto !important;
}
}
}
</style>

View File

@ -87,7 +87,6 @@ const columns = computed(() => [
},
},
columnClass: 'expand',
style: 'min-width: 210px;',
},
{
align: 'left',