kjh2064
889212d643
Add KbxQuantityField (increment/decrement spinner) + update index exports for all Phase 3.5–4 components (wrapper, form, specialized fields). Components shipped: - KbxScreenFrame, KbxTemplateStateBoundary, KbxSummaryBar (wrapper) - KbxFormGrid, KbxFormSection (layout) - KbxInput, KbxSelect, KbxDateField, KbxNumberField, KbxTextarea, KbxCheckbox (basic fields) - KbxMoneyField, KbxQuantityField, KbxRadio (specialized fields) - 9 template/composite/advanced (T02, T03, T06, T07, DataGrid, Dialog, Drawer, Tabs, Lookup) Total Phase 1–4: 30 components, ~3500 LOC, contracts, registries, composables, tokens, app init complete. Ready for page implementation using KbxScreenFrame wrapper pattern. Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
126 lines
2.4 KiB
Vue
126 lines
2.4 KiB
Vue
<script setup lang="ts">
|
|
/**
|
|
* KBX Input Component — v60
|
|
* Text input field with validation state
|
|
*/
|
|
|
|
withDefaults(
|
|
defineProps<{
|
|
modelValue: string | number
|
|
placeholder?: string
|
|
label?: string
|
|
error?: string
|
|
required?: boolean
|
|
readonly?: boolean
|
|
disabled?: boolean
|
|
type?: string
|
|
}>(),
|
|
{
|
|
type: 'text',
|
|
modelValue: '',
|
|
}
|
|
)
|
|
|
|
defineEmits<{
|
|
'update:modelValue': [value: string]
|
|
blur: []
|
|
focus: []
|
|
}>()
|
|
</script>
|
|
|
|
<template>
|
|
<div class="kbx-input-wrapper">
|
|
<label v-if="label" class="kbx-input__label">
|
|
{{ label }}
|
|
<span v-if="required" class="kbx-input__required">*</span>
|
|
</label>
|
|
<input
|
|
:value="modelValue"
|
|
:type="type"
|
|
:placeholder="placeholder"
|
|
:readonly="readonly"
|
|
:disabled="disabled"
|
|
:class="['kbx-input', { 'is-error': error }]"
|
|
@input="$emit('update:modelValue', ($event.target as HTMLInputElement).value)"
|
|
@blur="$emit('blur')"
|
|
@focus="$emit('focus')"
|
|
/>
|
|
<div v-if="error" class="kbx-input__error">{{ error }}</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.kbx-input-wrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
|
|
.kbx-input__label {
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: var(--kbx-color-text, #000);
|
|
}
|
|
|
|
.kbx-input__required {
|
|
color: var(--kbx-color-danger, #ef4444);
|
|
margin-left: 2px;
|
|
}
|
|
|
|
.kbx-input {
|
|
padding: 8px 12px;
|
|
border: 1px solid var(--kbx-color-border, #e5e7eb);
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
background: var(--kbx-color-surface, #fff);
|
|
color: var(--kbx-color-text, #000);
|
|
transition: all 0.2s ease;
|
|
min-height: 34px;
|
|
}
|
|
|
|
.kbx-input:focus {
|
|
outline: none;
|
|
border-color: var(--kbx-color-primary, #3b82f6);
|
|
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
|
|
}
|
|
|
|
.kbx-input:disabled {
|
|
background: var(--kbx-color-border, #e5e7eb);
|
|
cursor: not-allowed;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.kbx-input.is-error {
|
|
border-color: var(--kbx-color-danger, #ef4444);
|
|
}
|
|
|
|
.kbx-input.is-error:focus {
|
|
box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.1);
|
|
}
|
|
|
|
.kbx-input__error {
|
|
font-size: 12px;
|
|
color: var(--kbx-color-danger, #ef4444);
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.kbx-input__label {
|
|
color: #f9fafb;
|
|
}
|
|
|
|
.kbx-input {
|
|
background: #1f2937;
|
|
border-color: #374151;
|
|
color: #f9fafb;
|
|
}
|
|
|
|
.kbx-input:focus {
|
|
border-color: #60a5fa;
|
|
}
|
|
|
|
.kbx-input:disabled {
|
|
background: #374151;
|
|
}
|
|
}
|
|
</style>
|