chamomind/jws-frontend
chamomind/jws-frontend
7
0
Fork 0
Code Issues Projects Releases Packages 1 Wiki Activity Actions

refactor: api select value (#69)

Browse source 
* feat: add file

* fix: wrong type

* feat: select customer component

* fixup! feat: select customer component

* fix: char case

* refactor: fn alias

* chore: add space

* feat: accept fetch parameter

* refactor: naming

* feat: add emit event create

* fix: add suffix to add text

* feat: add before options slot for select input comp

* fix: error when label not found

* fix: value type

* feat: add required param

* fix: wording

* refactor: fix customer

* feat: use new select component

* chore: add note

* feat: add decoration for select with creatable

* feat: emit event

* feat: close popup on click

* feat: adjust alignment

* feat: add readonly params

* feat: add select branch option

* feat: use new select component

* feat: add disabled params

* feat: adjust internal search and select

* refactor: props type

* feat: use new select component

* feat: add lib for select component

* refactor: use factory function instead

* refactor: merge two lines of code

* refactor: move watch inside

* refactor: fix value not in list check

* chore: cleanup

* fix: remove test page size

* chore: remove unused

* feat: use new select component

* fix: typo

* fix: error

* refactor: extract type

* refactor: change ref var to normal var

* refactor: force overwrite params to prevent error on render

* feat: add clearable parameter

* feat: make clearable
This commit is contained in:
Methapon Metanipat 2024-11-12 11:56:14 +07:00 • committed by GitHub
parent a227744131
commit d414685fe7
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
13 changed files with 500 additions and 319 deletions
Download patch file Download diff file Expand all files Collapse all files

44
src/components/shared/SelectInput.vue
View file

@ -1,4 +1,4 @@
<script lang="ts" setup>
<script lang="ts" setup generic="T extends Record<string, unknown>">
import { onMounted, ref, watch } from 'vue';
import { selectFilterOptionRefMod } from 'src/stores/utils';
import { QSelect } from 'quasar';
@ -15,9 +15,9 @@ const props = withDefaults(
defineProps<{
id?: string;
label?: string;
option: Record<string, unknown>[];
optionLabel?: string;
optionValue?: string;
option: T[];
optionLabel?: keyof T;
optionValue?: keyof T;
placeholder?: string;
hideSelected?: boolean;
@ -40,14 +40,18 @@ const props = withDefaults(
);
defineEmits<{
(e: 'filter', val: string, update: void): void;
(
e: 'filter',
val: string,
update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
): void;
}>();
onMounted(() => {
defaultFilter = selectFilterOptionRefMod(
ref(props.option),
options,
props.optionLabel,
typeof props.optionLabel === 'string' ? props.optionLabel : 'label',
);
});
@ -57,7 +61,7 @@ watch(
defaultFilter = selectFilterOptionRefMod(
ref(props.option),
options,
props.optionLabel,
typeof props.optionLabel === 'string' ? props.optionLabel : 'label',
);
},
);
@ -76,8 +80,12 @@ watch(
:fill-input="fillInput && !!model"
:hide-dropdown-icon="readonly"
input-debounce="500"
:option-value="optionValue"
:option-label="optionLabel"
:option-value="
typeof props.optionValue === 'string' ? props.optionValue : 'value'
"
:option-label="
typeof props.optionLabel === 'string' ? props.optionLabel : 'label'
"
v-model="model"
dense
autocomplete="off"
@ -95,9 +103,13 @@ watch(
<template v-if="$slots.prepend" v-slot:prepend>
<slot name="prepend"></slot>
</template>
<template v-if="$slots.append" v-slot:append>
<slot name="append"></slot>
</template>
<template v-slot:no-option>
<slot name="noOption"></slot>
<slot name="no-option"></slot>
<q-item v-if="!$slots.noOption">
<q-item-section class="text-grey">
@ -106,12 +118,20 @@ watch(
</q-item>
</template>
<template v-if="$slots.selectedItem" v-slot:selected-item="scope">
<slot name="selectedItem" :scope="scope"></slot>
<template
v-if="$slots.selectedItem || $slots['selected-item']"
v-slot:selected-item="scope"
>
<slot name="selectedItem" :scope="scope" :opt="scope.opt as T"></slot>
<slot name="selected-item" :scope="scope" :opt="scope.opt as T"></slot>
</template>
<template v-if="$slots.option" v-slot:option="scope">
<slot name="option" :scope="scope"></slot>
<slot name="option" :scope="scope" :opt="scope.opt as T"></slot>
</template>
<template v-if="$slots['before-options']" #before-options>
<slot name="before-options"></slot>
</template>
</q-select>
</template>