Initial vue frontend
This commit is contained in:
173
frontend-vue/src/components/base/BaseButton.vue
Normal file
173
frontend-vue/src/components/base/BaseButton.vue
Normal file
@@ -0,0 +1,173 @@
|
||||
<template>
|
||||
<button
|
||||
:type="type"
|
||||
:disabled="disabled"
|
||||
:class="[
|
||||
'base-button',
|
||||
`base-button--${variant}`,
|
||||
`base-button--${size}`,
|
||||
{ 'base-button--loading': loading }
|
||||
]"
|
||||
:aria-label="ariaLabel"
|
||||
:aria-describedby="ariaDescribedby"
|
||||
@click="$emit('click', $event)"
|
||||
@keydown="handleKeydown"
|
||||
>
|
||||
<span v-if="loading" class="base-button__spinner" aria-hidden="true"></span>
|
||||
<span :class="{ 'base-button__content--hidden': loading }">
|
||||
<slot />
|
||||
</span>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
interface Props {
|
||||
type?: 'button' | 'submit' | 'reset'
|
||||
variant?: 'primary' | 'secondary' | 'danger' | 'ghost'
|
||||
size?: 'sm' | 'md' | 'lg'
|
||||
disabled?: boolean
|
||||
loading?: boolean
|
||||
ariaLabel?: string
|
||||
ariaDescribedby?: string
|
||||
}
|
||||
|
||||
withDefaults(defineProps<Props>(), {
|
||||
type: 'button',
|
||||
variant: 'primary',
|
||||
size: 'md',
|
||||
disabled: false,
|
||||
loading: false
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
click: [event: MouseEvent]
|
||||
}>()
|
||||
|
||||
const handleKeydown = (event: KeyboardEvent) => {
|
||||
if (event.key === 'Enter' || event.key === ' ') {
|
||||
event.preventDefault()
|
||||
emit('click', event as any)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.base-button {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 8px;
|
||||
font-family: inherit;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
outline: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.base-button:focus-visible {
|
||||
outline: 2px solid #646cff;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.base-button:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* Sizes */
|
||||
.base-button--sm {
|
||||
padding: 0.5rem 0.75rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.base-button--md {
|
||||
padding: 0.75rem 1rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.base-button--lg {
|
||||
padding: 1rem 1.5rem;
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
/* Variants */
|
||||
.base-button--primary {
|
||||
background-color: #646cff;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.base-button--primary:hover:not(:disabled) {
|
||||
background-color: #535bf2;
|
||||
}
|
||||
|
||||
.base-button--secondary {
|
||||
background-color: #f9f9f9;
|
||||
color: #213547;
|
||||
border-color: #d1d5db;
|
||||
}
|
||||
|
||||
.base-button--secondary:hover:not(:disabled) {
|
||||
background-color: #f3f4f6;
|
||||
border-color: #9ca3af;
|
||||
}
|
||||
|
||||
.base-button--danger {
|
||||
background-color: #ef4444;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.base-button--danger:hover:not(:disabled) {
|
||||
background-color: #dc2626;
|
||||
}
|
||||
|
||||
.base-button--ghost {
|
||||
background-color: transparent;
|
||||
color: #646cff;
|
||||
}
|
||||
|
||||
.base-button--ghost:hover:not(:disabled) {
|
||||
background-color: rgba(100, 108, 255, 0.1);
|
||||
}
|
||||
|
||||
/* Loading state */
|
||||
.base-button--loading {
|
||||
cursor: wait;
|
||||
}
|
||||
|
||||
.base-button__spinner {
|
||||
position: absolute;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border: 2px solid transparent;
|
||||
border-top: 2px solid currentColor;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
.base-button__content--hidden {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Dark mode */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.base-button--secondary {
|
||||
background-color: #374151;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
border-color: #4b5563;
|
||||
}
|
||||
|
||||
.base-button--secondary:hover:not(:disabled) {
|
||||
background-color: #4b5563;
|
||||
border-color: #6b7280;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
279
frontend-vue/src/components/base/BaseDialog.vue
Normal file
279
frontend-vue/src/components/base/BaseDialog.vue
Normal file
@@ -0,0 +1,279 @@
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<Transition name="dialog">
|
||||
<div
|
||||
v-if="show"
|
||||
class="dialog-overlay"
|
||||
@click="handleOverlayClick"
|
||||
@keydown.esc="handleClose"
|
||||
role="dialog"
|
||||
:aria-labelledby="titleId"
|
||||
:aria-describedby="contentId"
|
||||
aria-modal="true"
|
||||
>
|
||||
<div
|
||||
ref="dialogRef"
|
||||
:class="[
|
||||
'dialog',
|
||||
`dialog--${size}`
|
||||
]"
|
||||
@click.stop
|
||||
>
|
||||
<div class="dialog__header" v-if="$slots.header || title">
|
||||
<h2 :id="titleId" class="dialog__title">
|
||||
<slot name="header">{{ title }}</slot>
|
||||
</h2>
|
||||
<button
|
||||
v-if="closable"
|
||||
class="dialog__close"
|
||||
@click="handleClose"
|
||||
aria-label="Close dialog"
|
||||
type="button"
|
||||
>
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div :id="contentId" class="dialog__content">
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
<div v-if="$slots.footer" class="dialog__footer">
|
||||
<slot name="footer" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, nextTick, watch } from 'vue'
|
||||
|
||||
interface Props {
|
||||
show: boolean
|
||||
title?: string
|
||||
size?: 'sm' | 'md' | 'lg' | 'xl'
|
||||
closable?: boolean
|
||||
closeOnOverlay?: boolean
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
size: 'md',
|
||||
closable: true,
|
||||
closeOnOverlay: true
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
close: []
|
||||
'update:show': [value: boolean]
|
||||
}>()
|
||||
|
||||
const dialogRef = ref<HTMLDivElement>()
|
||||
const titleId = computed(() => `dialog-title-${Math.random().toString(36).substr(2, 9)}`)
|
||||
const contentId = computed(() => `dialog-content-${Math.random().toString(36).substr(2, 9)}`)
|
||||
|
||||
const handleClose = () => {
|
||||
emit('close')
|
||||
emit('update:show', false)
|
||||
}
|
||||
|
||||
const handleOverlayClick = () => {
|
||||
if (props.closeOnOverlay) {
|
||||
handleClose()
|
||||
}
|
||||
}
|
||||
|
||||
// Focus management
|
||||
let lastFocusedElement: HTMLElement | null = null
|
||||
|
||||
const trapFocus = (event: KeyboardEvent) => {
|
||||
if (event.key !== 'Tab') return
|
||||
|
||||
const focusableElements = dialogRef.value?.querySelectorAll(
|
||||
'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
|
||||
) as NodeListOf<HTMLElement>
|
||||
|
||||
if (!focusableElements || focusableElements.length === 0) return
|
||||
|
||||
const firstElement = focusableElements[0]
|
||||
const lastElement = focusableElements[focusableElements.length - 1]
|
||||
|
||||
if (event.shiftKey) {
|
||||
if (document.activeElement === firstElement) {
|
||||
event.preventDefault()
|
||||
lastElement.focus()
|
||||
}
|
||||
} else {
|
||||
if (document.activeElement === lastElement) {
|
||||
event.preventDefault()
|
||||
firstElement.focus()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
watch(() => props.show, async (isVisible) => {
|
||||
if (isVisible) {
|
||||
lastFocusedElement = document.activeElement as HTMLElement
|
||||
document.body.style.overflow = 'hidden'
|
||||
document.addEventListener('keydown', trapFocus)
|
||||
|
||||
await nextTick()
|
||||
|
||||
// Focus first focusable element or the dialog itself
|
||||
const firstFocusable = dialogRef.value?.querySelector(
|
||||
'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
|
||||
) as HTMLElement
|
||||
|
||||
if (firstFocusable) {
|
||||
firstFocusable.focus()
|
||||
} else {
|
||||
dialogRef.value?.focus()
|
||||
}
|
||||
} else {
|
||||
document.body.style.overflow = ''
|
||||
document.removeEventListener('keydown', trapFocus)
|
||||
|
||||
// Restore focus to the element that was focused before the dialog opened
|
||||
if (lastFocusedElement) {
|
||||
lastFocusedElement.focus()
|
||||
lastFocusedElement = null
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.dialog-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.dialog {
|
||||
background: #ffffff;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
||||
max-height: 90vh;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.dialog--sm {
|
||||
width: 100%;
|
||||
max-width: 24rem;
|
||||
}
|
||||
|
||||
.dialog--md {
|
||||
width: 100%;
|
||||
max-width: 32rem;
|
||||
}
|
||||
|
||||
.dialog--lg {
|
||||
width: 100%;
|
||||
max-width: 48rem;
|
||||
}
|
||||
|
||||
.dialog--xl {
|
||||
width: 100%;
|
||||
max-width: 64rem;
|
||||
}
|
||||
|
||||
.dialog__header {
|
||||
padding: 1.5rem 1.5rem 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.dialog__title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: #111827;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.dialog__close {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
color: #6b7280;
|
||||
padding: 0.25rem;
|
||||
line-height: 1;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.dialog__close:hover {
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.dialog__close:focus-visible {
|
||||
outline: 2px solid #646cff;
|
||||
outline-offset: 2px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.dialog__content {
|
||||
padding: 1.5rem;
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.dialog__footer {
|
||||
padding: 0 1.5rem 1.5rem;
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
/* Transitions */
|
||||
.dialog-enter-active,
|
||||
.dialog-leave-active {
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.dialog-enter-from,
|
||||
.dialog-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.dialog-enter-active .dialog,
|
||||
.dialog-leave-active .dialog {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.dialog-enter-from .dialog,
|
||||
.dialog-leave-to .dialog {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
/* Dark mode */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.dialog {
|
||||
background: #1f2937;
|
||||
}
|
||||
|
||||
.dialog__title {
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
}
|
||||
|
||||
.dialog__close {
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.dialog__close:hover {
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
185
frontend-vue/src/components/base/BaseInput.vue
Normal file
185
frontend-vue/src/components/base/BaseInput.vue
Normal file
@@ -0,0 +1,185 @@
|
||||
<template>
|
||||
<div class="base-input">
|
||||
<label v-if="label" :for="inputId" class="base-input__label">
|
||||
{{ label }}
|
||||
<span v-if="required" class="base-input__required">*</span>
|
||||
</label>
|
||||
|
||||
<div class="base-input__wrapper">
|
||||
<input
|
||||
:id="inputId"
|
||||
ref="inputRef"
|
||||
:type="type"
|
||||
:value="modelValue"
|
||||
:placeholder="placeholder"
|
||||
:disabled="disabled"
|
||||
:readonly="readonly"
|
||||
:required="required"
|
||||
:autocomplete="autocomplete"
|
||||
:aria-invalid="error ? 'true' : 'false'"
|
||||
:aria-describedby="error ? `${inputId}-error` : undefined"
|
||||
:class="[
|
||||
'base-input__field',
|
||||
{ 'base-input__field--error': error }
|
||||
]"
|
||||
@input="handleInput"
|
||||
@blur="$emit('blur', $event)"
|
||||
@focus="$emit('focus', $event)"
|
||||
@keydown="$emit('keydown', $event)"
|
||||
@keyup="$emit('keyup', $event)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-if="error" :id="`${inputId}-error`" class="base-input__error">
|
||||
{{ error }}
|
||||
</div>
|
||||
|
||||
<div v-else-if="helpText" class="base-input__help">
|
||||
{{ helpText }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue'
|
||||
|
||||
interface Props {
|
||||
modelValue: string | number
|
||||
type?: string
|
||||
label?: string
|
||||
placeholder?: string
|
||||
disabled?: boolean
|
||||
readonly?: boolean
|
||||
required?: boolean
|
||||
autocomplete?: string
|
||||
error?: string
|
||||
helpText?: string
|
||||
id?: string
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
type: 'text',
|
||||
disabled: false,
|
||||
readonly: false,
|
||||
required: false
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:modelValue': [value: string | number]
|
||||
blur: [event: FocusEvent]
|
||||
focus: [event: FocusEvent]
|
||||
keydown: [event: KeyboardEvent]
|
||||
keyup: [event: KeyboardEvent]
|
||||
}>()
|
||||
|
||||
const inputRef = ref<HTMLInputElement>()
|
||||
const inputId = computed(() => props.id || `input-${Math.random().toString(36).substr(2, 9)}`)
|
||||
|
||||
const handleInput = (event: Event) => {
|
||||
const target = event.target as HTMLInputElement
|
||||
const value = props.type === 'number' ? parseFloat(target.value) || 0 : target.value
|
||||
emit('update:modelValue', value)
|
||||
}
|
||||
|
||||
const focus = () => {
|
||||
inputRef.value?.focus()
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
focus,
|
||||
inputRef
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.base-input {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.base-input__label {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.base-input__required {
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
.base-input__wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.base-input__field {
|
||||
width: 100%;
|
||||
padding: 0.75rem 1rem;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 8px;
|
||||
font-size: 1rem;
|
||||
font-family: inherit;
|
||||
background-color: #ffffff;
|
||||
color: #111827;
|
||||
transition: all 0.2s ease;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.base-input__field:focus {
|
||||
border-color: #646cff;
|
||||
box-shadow: 0 0 0 3px rgba(100, 108, 255, 0.1);
|
||||
}
|
||||
|
||||
.base-input__field:disabled {
|
||||
background-color: #f9fafb;
|
||||
color: #9ca3af;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.base-input__field:readonly {
|
||||
background-color: #f9fafb;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.base-input__field--error {
|
||||
border-color: #ef4444;
|
||||
}
|
||||
|
||||
.base-input__field--error:focus {
|
||||
border-color: #ef4444;
|
||||
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
|
||||
}
|
||||
|
||||
.base-input__error {
|
||||
font-size: 0.875rem;
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
.base-input__help {
|
||||
font-size: 0.875rem;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
/* Dark mode */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.base-input__label {
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
}
|
||||
|
||||
.base-input__field {
|
||||
background-color: #374151;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
border-color: #4b5563;
|
||||
}
|
||||
|
||||
.base-input__field:disabled,
|
||||
.base-input__field:readonly {
|
||||
background-color: #1f2937;
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.base-input__help {
|
||||
color: #9ca3af;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
228
frontend-vue/src/components/base/BaseTextarea.vue
Normal file
228
frontend-vue/src/components/base/BaseTextarea.vue
Normal file
@@ -0,0 +1,228 @@
|
||||
<template>
|
||||
<div class="base-textarea">
|
||||
<label v-if="label" :for="textareaId" class="base-textarea__label">
|
||||
{{ label }}
|
||||
<span v-if="required" class="base-textarea__required">*</span>
|
||||
</label>
|
||||
|
||||
<div class="base-textarea__wrapper">
|
||||
<textarea
|
||||
:id="textareaId"
|
||||
ref="textareaRef"
|
||||
:value="modelValue"
|
||||
:placeholder="placeholder"
|
||||
:disabled="disabled"
|
||||
:readonly="readonly"
|
||||
:required="required"
|
||||
:rows="rows"
|
||||
:maxlength="maxlength"
|
||||
:aria-invalid="error ? 'true' : 'false'"
|
||||
:aria-describedby="error ? `${textareaId}-error` : undefined"
|
||||
:class="[
|
||||
'base-textarea__field',
|
||||
{ 'base-textarea__field--error': error }
|
||||
]"
|
||||
@input="handleInput"
|
||||
@blur="$emit('blur', $event)"
|
||||
@focus="$emit('focus', $event)"
|
||||
@keydown="handleKeydown"
|
||||
@keyup="$emit('keyup', $event)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-if="showCharCount && maxlength" class="base-textarea__char-count">
|
||||
{{ modelValue.length }}/{{ maxlength }}
|
||||
</div>
|
||||
|
||||
<div v-if="error" :id="`${textareaId}-error`" class="base-textarea__error">
|
||||
{{ error }}
|
||||
</div>
|
||||
|
||||
<div v-else-if="helpText" class="base-textarea__help">
|
||||
{{ helpText }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue'
|
||||
|
||||
interface Props {
|
||||
modelValue: string
|
||||
label?: string
|
||||
placeholder?: string
|
||||
disabled?: boolean
|
||||
readonly?: boolean
|
||||
required?: boolean
|
||||
rows?: number
|
||||
maxlength?: number
|
||||
showCharCount?: boolean
|
||||
error?: string
|
||||
helpText?: string
|
||||
id?: string
|
||||
autoResize?: boolean
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
disabled: false,
|
||||
readonly: false,
|
||||
required: false,
|
||||
rows: 3,
|
||||
showCharCount: false,
|
||||
autoResize: false
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:modelValue': [value: string]
|
||||
blur: [event: FocusEvent]
|
||||
focus: [event: FocusEvent]
|
||||
keydown: [event: KeyboardEvent]
|
||||
keyup: [event: KeyboardEvent]
|
||||
submit: []
|
||||
}>()
|
||||
|
||||
const textareaRef = ref<HTMLTextAreaElement>()
|
||||
const textareaId = computed(() => props.id || `textarea-${Math.random().toString(36).substr(2, 9)}`)
|
||||
|
||||
const handleInput = (event: Event) => {
|
||||
const target = event.target as HTMLTextAreaElement
|
||||
emit('update:modelValue', target.value)
|
||||
|
||||
if (props.autoResize) {
|
||||
autoResize(target)
|
||||
}
|
||||
}
|
||||
|
||||
const handleKeydown = (event: KeyboardEvent) => {
|
||||
emit('keydown', event)
|
||||
|
||||
// Submit on Ctrl+Enter or Cmd+Enter
|
||||
if ((event.ctrlKey || event.metaKey) && event.key === 'Enter') {
|
||||
event.preventDefault()
|
||||
emit('submit')
|
||||
}
|
||||
}
|
||||
|
||||
const autoResize = (textarea: HTMLTextAreaElement) => {
|
||||
textarea.style.height = 'auto'
|
||||
textarea.style.height = textarea.scrollHeight + 'px'
|
||||
}
|
||||
|
||||
const focus = () => {
|
||||
textareaRef.value?.focus()
|
||||
}
|
||||
|
||||
const selectAll = () => {
|
||||
textareaRef.value?.select()
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
focus,
|
||||
selectAll,
|
||||
textareaRef
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.base-textarea {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.base-textarea__label {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.base-textarea__required {
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
.base-textarea__wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.base-textarea__field {
|
||||
width: 100%;
|
||||
padding: 0.75rem 1rem;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 8px;
|
||||
font-size: 1rem;
|
||||
font-family: inherit;
|
||||
background-color: #ffffff;
|
||||
color: #111827;
|
||||
transition: all 0.2s ease;
|
||||
outline: none;
|
||||
resize: vertical;
|
||||
min-height: 3rem;
|
||||
}
|
||||
|
||||
.base-textarea__field:focus {
|
||||
border-color: #646cff;
|
||||
box-shadow: 0 0 0 3px rgba(100, 108, 255, 0.1);
|
||||
}
|
||||
|
||||
.base-textarea__field:disabled {
|
||||
background-color: #f9fafb;
|
||||
color: #9ca3af;
|
||||
cursor: not-allowed;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
.base-textarea__field:readonly {
|
||||
background-color: #f9fafb;
|
||||
cursor: default;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
.base-textarea__field--error {
|
||||
border-color: #ef4444;
|
||||
}
|
||||
|
||||
.base-textarea__field--error:focus {
|
||||
border-color: #ef4444;
|
||||
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
|
||||
}
|
||||
|
||||
.base-textarea__char-count {
|
||||
font-size: 0.75rem;
|
||||
color: #6b7280;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.base-textarea__error {
|
||||
font-size: 0.875rem;
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
.base-textarea__help {
|
||||
font-size: 0.875rem;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
/* Dark mode */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.base-textarea__label {
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
}
|
||||
|
||||
.base-textarea__field {
|
||||
background-color: #374151;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
border-color: #4b5563;
|
||||
}
|
||||
|
||||
.base-textarea__field:disabled,
|
||||
.base-textarea__field:readonly {
|
||||
background-color: #1f2937;
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.base-textarea__help,
|
||||
.base-textarea__char-count {
|
||||
color: #9ca3af;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
121
frontend-vue/src/components/base/Icon.vue
Normal file
121
frontend-vue/src/components/base/Icon.vue
Normal file
@@ -0,0 +1,121 @@
|
||||
<template>
|
||||
<span class="icon" :class="[`icon-${name}`, sizeClass]">
|
||||
<!-- Microphone -->
|
||||
<svg v-if="name === 'microphone'" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 2C13.1 2 14 2.9 14 4V10C14 11.1 13.1 12 12 12S10 11.1 10 10V4C10 2.9 10.9 2 12 2M19 10V12C19 15.3 16.3 18 13 18V22H11V18C7.7 18 5 15.3 5 12V10H7V12C7 14.2 8.8 16 11 16H13C15.2 16 17 14.2 17 12V10H19Z"/>
|
||||
</svg>
|
||||
|
||||
<!-- Stop -->
|
||||
<svg v-else-if="name === 'stop'" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M18,18H6V6H18V18Z"/>
|
||||
</svg>
|
||||
|
||||
<!-- Play -->
|
||||
<svg v-else-if="name === 'play'" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M8,5.14V19.14L19,12.14L8,5.14Z"/>
|
||||
</svg>
|
||||
|
||||
<!-- Send -->
|
||||
<svg v-else-if="name === 'send'" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M2,21L23,12L2,3V10L17,12L2,14V21Z"/>
|
||||
</svg>
|
||||
|
||||
<!-- Trash -->
|
||||
<svg v-else-if="name === 'trash'" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z"/>
|
||||
</svg>
|
||||
|
||||
<!-- Warning -->
|
||||
<svg v-else-if="name === 'warning'" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M13,13H11V7H13M13,17H11V15H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"/>
|
||||
</svg>
|
||||
|
||||
<!-- Info -->
|
||||
<svg v-else-if="name === 'info'" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"/>
|
||||
</svg>
|
||||
|
||||
<!-- Camera -->
|
||||
<svg v-else-if="name === 'camera'" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M4,4H7L9,2H15L17,4H20A2,2 0 0,1 22,6V18A2,2 0 0,1 20,20H4A2,2 0 0,1 2,18V6A2,2 0 0,1 4,4M12,7A5,5 0 0,0 7,12A5,5 0 0,0 12,17A5,5 0 0,0 17,12A5,5 0 0,0 12,7M12,9A3,3 0 0,1 15,12A3,3 0 0,1 12,15A3,3 0 0,1 9,12A3,3 0 0,1 12,9Z"/>
|
||||
</svg>
|
||||
|
||||
<!-- Upload -->
|
||||
<svg v-else-if="name === 'upload'" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M9,16V10H5L12,3L19,10H15V16H9M5,20V18H19V20H5Z"/>
|
||||
</svg>
|
||||
|
||||
<!-- Close -->
|
||||
<svg v-else-if="name === 'close'" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"/>
|
||||
</svg>
|
||||
|
||||
<!-- Search -->
|
||||
<svg v-else-if="name === 'search'" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"/>
|
||||
</svg>
|
||||
|
||||
<!-- Plus -->
|
||||
<svg v-else-if="name === 'plus'" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z"/>
|
||||
</svg>
|
||||
|
||||
<!-- Settings -->
|
||||
<svg v-else-if="name === 'settings'" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.22,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.22,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.68 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z"/>
|
||||
</svg>
|
||||
|
||||
<!-- Default fallback -->
|
||||
<svg v-else viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"/>
|
||||
</svg>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
|
||||
interface Props {
|
||||
name: string
|
||||
size?: 'sm' | 'md' | 'lg' | 'xl'
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
size: 'md'
|
||||
})
|
||||
|
||||
const sizeClass = computed(() => `icon-${props.size}`)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.icon svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.icon-sm {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
.icon-md {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
}
|
||||
|
||||
.icon-lg {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
.icon-xl {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user