verdnatura/salix-front
verdnatura
/
salix-front
2
3
Fork 1
Code Issues Pull Requests 82 Releases Wiki Activity

fix: refs #7404 inputs

This commit is contained in:
Javier Segarra 2024-10-01 13:32:39 +02:00
parent 75d81a2110
commit 16179a0e88
7 changed files with 80 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/VnTable/VnFilter.vue
View File

@ -86,6 +86,7 @@ const components = {
component: markRaw(VnInputDate), component: markRaw(VnInputDate),
event: updateEvent, event: updateEvent,
attrs: { attrs: {
showEvent: false,
...defaultAttrs, ...defaultAttrs,
style: 'min-width: 150px', style: 'min-width: 150px',
}, },

2
src/components/VnTable/VnOrder.vue
View File

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

2
src/components/VnTable/VnTable.vue
View File

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

2
src/components/common/VnInput.vue
View File

@ -142,7 +142,7 @@ const mixinRules = [
align-items: flex-end; align-items: flex-end;
} }
.q-field__append.q-field__marginal.row.no-wrap.items-center.row { .q-field__append.q-field__marginal.row.no-wrap.items-center.row {
// height: 30px; height: 30px;
// background-color: green; // background-color: green;
align-items: flex-end; align-items: flex-end;
} }

109
src/components/common/VnSelect.vue
View File

@ -1,8 +1,7 @@
<script setup> <script setup>
import { ref, toRefs, computed, watch, onMounted, useAttrs } from 'vue'; import { ref, toRefs, computed, watch, onMounted } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import FetchData from 'src/components/FetchData.vue'; import FetchData from 'src/components/FetchData.vue';
import { useValidator } from 'src/composables/useValidator';
const emit = defineEmits(['update:modelValue', 'update:options', 'remove']); const emit = defineEmits(['update:modelValue', 'update:options', 'remove']);
const $props = defineProps({ const $props = defineProps({
@ -38,10 +37,6 @@ const $props = defineProps({
type: [Array], type: [Array],
default: () => [], default: () => [],
}, },
exprBuilder: {
type: Function,
default: null,
},
isClearable: { isClearable: {
type: Boolean, type: Boolean,
default: true, default: true,
@ -87,11 +82,10 @@ const $props = defineProps({
default: false, default: false,
}, },
}); });
const { validations } = useValidator();
const requiredFieldRule = (val) => validations().required($attrs.required, val);
const $attrs = useAttrs();
const { t } = useI18n(); const { t } = useI18n();
const mixinRules = [requiredFieldRule, ...($attrs.rules ?? [])]; const requiredFieldRule = (val) => val ?? t('globals.fieldRequired');
const { optionLabel, optionValue, optionFilter, optionFilterValue, options, modelValue } = const { optionLabel, optionValue, optionFilter, optionFilterValue, options, modelValue } =
toRefs($props); toRefs($props);
const myOptions = ref([]); const myOptions = ref([]);
@ -183,7 +177,6 @@ async function fetchFilter(val) {
}, {}); }, {});
} else defaultWhere = { [key]: getVal(val) }; } else defaultWhere = { [key]: getVal(val) };
const where = { ...(val ? defaultWhere : {}), ...$props.where }; const where = { ...(val ? defaultWhere : {}), ...$props.where };
$props.exprBuilder && Object.assign(where, $props.exprBuilder(key, val));
const fetchOptions = { where, include, limit }; const fetchOptions = { where, include, limit };
if (fields) fetchOptions.fields = fields; if (fields) fetchOptions.fields = fields;
if (sortBy) fetchOptions.order = sortBy; if (sortBy) fetchOptions.order = sortBy;
@ -227,6 +220,7 @@ function nullishToTrue(value) {
} }
const getVal = (val) => ($props.useLike ? { like: `%${val}%` } : val); const getVal = (val) => ($props.useLike ? { like: `%${val}%` } : val);
const hover = ref(false);
</script> </script>
<template> <template>
@ -240,58 +234,55 @@ const getVal = (val) => ($props.useLike ? { like: `%${val}%` } : val);
:fields="fields" :fields="fields"
:params="params" :params="params"
/> />
<QSelect <div @mouseover="hover = true" @mouseleave="hover = false">
v-model="value" <QSelect
:options="myOptions" v-model="value"
:option-label="optionLabel" :options="myOptions"
:option-value="optionValue" :option-label="optionLabel"
v-bind="$attrs" :option-value="optionValue"
@filter="filterHandler" v-bind="$attrs"
:emit-value="nullishToTrue($attrs['emit-value'])" @filter="filterHandler"
:map-options="nullishToTrue($attrs['map-options'])" :emit-value="nullishToTrue($attrs['emit-value'])"
:use-input="nullishToTrue($attrs['use-input'])" :map-options="nullishToTrue($attrs['map-options'])"
:hide-selected="nullishToTrue($attrs['hide-selected'])" :use-input="nullishToTrue($attrs['use-input'])"
:fill-input="nullishToTrue($attrs['fill-input'])" :hide-selected="nullishToTrue($attrs['hide-selected'])"
ref="vnSelectRef" :fill-input="nullishToTrue($attrs['fill-input'])"
lazy-rules ref="vnSelectRef"
:class="{ required: $attrs.required }" lazy-rules
:rules="mixinRules" :class="{ required: $attrs.required }"
virtual-scroll-slice-size="options.length" :rules="$attrs.required ? [requiredFieldRule] : null"
hide-bottom-space virtual-scroll-slice-size="options.length"
> >
<template v-if="isClearable" #append> <template
<QIcon v-if="hover && value && !$attrs.disabled && $props.isClearable"
v-show="value" #append
name="close" >
@click.stop=" <QIcon
() => { v-show="value"
value = null; name="close"
emit('remove'); @click.stop="
} () => {
" value = null;
class="cursor-pointer" emit('remove');
size="xs" }
/> "
</template> class="cursor-pointer"
<template v-for="(_, slotName) in $slots" #[slotName]="slotData" :key="slotName"> size="xs"
<slot :name="slotName" v-bind="slotData ?? {}" :key="slotName" /> />
</template> </template>
</QSelect> <template
v-for="(_, slotName) in $slots"
#[slotName]="slotData"
:key="slotName"
>
<slot :name="slotName" v-bind="slotData ?? {}" :key="slotName" />
</template>
</QSelect>
</div>
</template> </template>
<style scoped lang="scss"> <style scoped lang="scss">
.q-field--outlined { .q-field--outlined {
max-width: 100%; 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> </style>

1
src/components/ui/VnSearchbar.vue
View File

@ -171,6 +171,7 @@ async function search() {
#searchbar { #searchbar {
.q-field > .q-field__inner > .q-field__control { .q-field > .q-field__inner > .q-field__control {
height: 40px; height: 40px;
align-items: flex-start;
} }
.q-field--standout.q-field--highlighted .q-field__control { .q-field--standout.q-field--highlighted .q-field__control {
align-items: center; align-items: center;

56
src/pages/Item/ItemFixedPrice.vue
View File

@ -489,28 +489,24 @@ function handleOnDataSave({ CrudModelRef }) {
<FetchedTags :item="row" /> <FetchedTags :item="row" />
</template> </template>
<template #column-rate2="props"> <template #column-rate2="props">
<QTd class="col"> <VnInput
<VnInput type="currency"
type="currency" style="width: 75px"
style="width: 75px" v-model.number="props.row.rate2"
v-model.number="props.row.rate2" v-on="getRowUpdateInputEvents(props)"
v-on="getRowUpdateInputEvents(props)" >
> <template #append>€</template>
<template #append>€</template> </VnInput>
</VnInput>
</QTd>
</template> </template>
<template #column-rate3="props"> <template #column-rate3="props">
<QTd class="col"> <VnInput
<VnInput style="width: 75px"
style="width: 75px" type="currency"
type="currency" v-model.number="props.row.rate3"
v-model.number="props.row.rate3" v-on="getRowUpdateInputEvents(props)"
v-on="getRowUpdateInputEvents(props)" >
> <template #append>€</template>
<template #append>€</template> </VnInput>
</VnInput>
</QTd>
</template> </template>
<template #column-minPrice="props"> <template #column-minPrice="props">
<QTd class="col"> <QTd class="col">
@ -553,17 +549,15 @@ function handleOnDataSave({ CrudModelRef }) {
/> />
</template> </template>
<template #column-warehouseFk="props"> <template #column-warehouseFk="props">
<QTd class="col"> <VnSelect
<VnSelect style="max-width: 150px"
style="max-width: 150px" :options="warehousesOptions"
:options="warehousesOptions" hide-selected
hide-selected option-label="name"
option-label="name" option-value="id"
option-value="id" v-model="props.row.warehouseFk"
v-model="props.row.warehouseFk" v-on="getRowUpdateInputEvents(props, false, 'select')"
v-on="getRowUpdateInputEvents(props, false, 'select')" />
/>
</QTd>
</template> </template>
<template #column-deleteAction="{ row, rowIndex }"> <template #column-deleteAction="{ row, rowIndex }">
<QIcon <QIcon