kjh2064/KArtSell.Aegis
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

V13-FE-011: finalize search list layout slice

Browse Source
This commit is contained in:
김재현
2026-08-09 02:57:26 +09:00
parent 9efd202e76
commit 6422cb2b13
984 changed files with 120811 additions and 1498 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/Design/kbx-foundation-v36/packages/kbx-ui/src/components/KbxSearchFieldControl.vue
+21
View File
@@ -0,0 +1,21 @@
<script setup lang="ts">
import type { KbxSearchField } from '@kbx/contracts'
import KbxLookup from './KbxLookup.vue'
const props=defineProps<{field:KbxSearchField;model:Record<string,unknown>}>()
const emit=defineEmits<{change:[key:string,value:unknown]}>()
function value(key:string){return props.model[key] as any}
</script>
<template>
<label v-if="field.type==='text'" class="kbx-search-field" :data-width="field.width??'md'"><span>{{field.label}}</span><input :value="value(field.key)??''" :disabled="field.disabled" :placeholder="field.placeholder" @input="emit('change',field.key,($event.target as HTMLInputElement).value)"></label>
<label v-else-if="field.type==='date'" class="kbx-search-field"><span>{{field.label}}</span><input type="date" :value="value(field.key)??''" :disabled="field.disabled" @input="emit('change',field.key,($event.target as HTMLInputElement).value)"></label>
<div v-else-if="field.type==='date-range'&&field.range" class="kbx-search-field kbx-search-field--range"><span>{{field.label}}</span><input type="date" :value="value(field.range.from)??''" :disabled="field.disabled" :aria-label="`${field.label} 시작일`" @input="emit('change',field.range!.from,($event.target as HTMLInputElement).value)"><b aria-hidden="true">~</b><input type="date" :value="value(field.range.to)??''" :disabled="field.disabled" :aria-label="`${field.label} 종료일`" @input="emit('change',field.range!.to,($event.target as HTMLInputElement).value)"></div>
<label v-else-if="field.type==='select'" class="kbx-search-field"><span>{{field.label}}</span><select :value="value(field.key)??''" :disabled="field.disabled" @change="emit('change',field.key,($event.target as HTMLSelectElement).value||null)"><option value="">전체</option><option v-for="option in field.options??[]" :key="option.value" :value="option.value">{{option.label}}</option></select></label>
<label v-else-if="field.type==='checkbox'" class="kbx-search-check"><input type="checkbox" :checked="Boolean(value(field.key))" :disabled="field.disabled" @change="emit('change',field.key,($event.target as HTMLInputElement).checked)"><span>{{field.label}}</span></label>
<KbxLookup v-else-if="field.type==='lookup'&&field.lookup" :model-value="(value(field.key) as string|null)??null" :entity="field.lookup.entity" :label="field.label" :disabled="field.disabled" @update:model-value="emit('change',field.key,$event)" />
</template>
<style scoped>
.kbx-search-field{display:flex;align-items:center;gap:var(--kbx-space-2);font-size:var(--kbx-font-sm);white-space:nowrap}.kbx-search-field>span{font-weight:500}.kbx-search-field input,.kbx-search-field select{height:var(--kbx-control-height);min-width:var(--kbx-search-control-min-width);border:var(--kbx-border-width) solid var(--kbx-color-border-strong);border-radius:var(--kbx-radius-sm);padding:0 var(--kbx-space-2);background:var(--kbx-color-surface);font:inherit}.kbx-search-field[data-width="sm"] input{width:var(--kbx-search-control-sm-width)}.kbx-search-field[data-width="lg"] input{width:var(--kbx-search-control-lg-width)}.kbx-search-field--range b{font-weight:400;color:var(--kbx-color-text-muted)}.kbx-search-check{display:inline-flex;align-items:center;gap:var(--kbx-space-2);min-height:var(--kbx-control-height);font-size:var(--kbx-font-sm)}.kbx-search-check input{width:var(--kbx-checkbox-size);height:var(--kbx-checkbox-size);margin:0}
</style>