refactor(frontend): comprehensive split of large view files into modular components
- Split UsersView.vue into UserCreateModal, UserEditModal, UserApiKeysModal, etc. - Split UsageView.vue into UsageStatsCards, UsageFilters, UsageTable, etc. - Split DashboardView.vue into UserDashboardStats, UserDashboardCharts, etc. - Split AccountsView.vue into AccountTableActions, AccountTableFilters, etc. - Standardized TypeScript types across new components to resolve implicit 'any' and 'never[]' errors. - Improved overall frontend maintainability and code clarity.
This commit is contained in:
IanShaw027
103
frontend/src/components/common/Input.vue
Normal file
103
frontend/src/components/common/Input.vue
Normal file
@@ -0,0 +1,103 @@
|
||||
<template>
|
||||
<div class="w-full">
|
||||
<label v-if="label" :for="id" class="input-label mb-1.5 block">
|
||||
{{ label }}
|
||||
<span v-if="required" class="text-red-500">*</span>
|
||||
</label>
|
||||
<div class="relative">
|
||||
<!-- Prefix Icon Slot -->
|
||||
<div
|
||||
v-if="$slots.prefix"
|
||||
class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3.5 text-gray-400 dark:text-dark-400"
|
||||
>
|
||||
<slot name="prefix"></slot>
|
||||
</div>
|
||||
|
||||
<input
|
||||
:id="id"
|
||||
ref="inputRef"
|
||||
:type="type"
|
||||
:value="modelValue"
|
||||
:disabled="disabled"
|
||||
:required="required"
|
||||
:placeholder="placeholderText"
|
||||
:autocomplete="autocomplete"
|
||||
:readonly="readonly"
|
||||
:class="[
|
||||
'input w-full transition-all duration-200',
|
||||
$slots.prefix ? 'pl-11' : '',
|
||||
$slots.suffix ? 'pr-11' : '',
|
||||
error ? 'input-error ring-2 ring-red-500/20' : '',
|
||||
disabled ? 'cursor-not-allowed bg-gray-100 opacity-60 dark:bg-dark-900' : ''
|
||||
]"
|
||||
@input="onInput"
|
||||
@change="$emit('change', ($event.target as HTMLInputElement).value)"
|
||||
@blur="$emit('blur', $event)"
|
||||
@focus="$emit('focus', $event)"
|
||||
@keyup.enter="$emit('enter', $event)"
|
||||
/>
|
||||
|
||||
<!-- Suffix Slot (e.g. Password Toggle or Clear Button) -->
|
||||
<div
|
||||
v-if="$slots.suffix"
|
||||
class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-400 dark:text-dark-400"
|
||||
>
|
||||
<slot name="suffix"></slot>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Hint / Error Text -->
|
||||
<p v-if="error" class="input-error-text mt-1.5">
|
||||
{{ error }}
|
||||
</p>
|
||||
<p v-else-if="hint" class="input-hint mt-1.5">
|
||||
{{ hint }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue'
|
||||
|
||||
interface Props {
|
||||
modelValue: string | number | null | undefined
|
||||
type?: string
|
||||
label?: string
|
||||
placeholder?: string
|
||||
disabled?: boolean
|
||||
required?: boolean
|
||||
readonly?: boolean
|
||||
error?: string
|
||||
hint?: string
|
||||
id?: string
|
||||
autocomplete?: string
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
type: 'text',
|
||||
disabled: false,
|
||||
required: false,
|
||||
readonly: false
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', value: string): void
|
||||
(e: 'change', value: string): void
|
||||
(e: 'blur', event: FocusEvent): void
|
||||
(e: 'focus', event: FocusEvent): void
|
||||
(e: 'enter', event: KeyboardEvent): void
|
||||
}>()
|
||||
|
||||
const inputRef = ref<HTMLInputElement | null>(null)
|
||||
const placeholderText = computed(() => props.placeholder || '')
|
||||
|
||||
const onInput = (event: Event) => {
|
||||
const value = (event.target as HTMLInputElement).value
|
||||
emit('update:modelValue', value)
|
||||
}
|
||||
|
||||
// Expose focus method
|
||||
defineExpose({
|
||||
focus: () => inputRef.value?.focus(),
|
||||
select: () => inputRef.value?.select()
|
||||
})
|
||||
</script>
|
||||
46
frontend/src/components/common/Skeleton.vue
Normal file
46
frontend/src/components/common/Skeleton.vue
Normal file
@@ -0,0 +1,46 @@
|
||||
<template>
|
||||
<div
|
||||
:class="[
|
||||
'animate-pulse bg-gray-200 dark:bg-dark-700',
|
||||
variant === 'circle' ? 'rounded-full' : 'rounded-lg',
|
||||
customClass
|
||||
]"
|
||||
:style="style"
|
||||
></div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
|
||||
interface Props {
|
||||
variant?: 'rect' | 'circle' | 'text'
|
||||
width?: string | number
|
||||
height?: string | number
|
||||
class?: string
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
variant: 'rect',
|
||||
width: '100%'
|
||||
})
|
||||
|
||||
const customClass = computed(() => props.class || '')
|
||||
|
||||
const style = computed(() => {
|
||||
const s: Record<string, string> = {}
|
||||
|
||||
if (props.width) {
|
||||
s.width = typeof props.width === 'number' ? `${props.width}px` : props.width
|
||||
}
|
||||
|
||||
if (props.height) {
|
||||
s.height = typeof props.height === 'number' ? `${props.height}px` : props.height
|
||||
} else if (props.variant === 'text') {
|
||||
s.height = '1em'
|
||||
s.marginTop = '0.25em'
|
||||
s.marginBottom = '0.25em'
|
||||
}
|
||||
|
||||
return s
|
||||
})
|
||||
</script>
|
||||
81
frontend/src/components/common/TextArea.vue
Normal file
81
frontend/src/components/common/TextArea.vue
Normal file
@@ -0,0 +1,81 @@
|
||||
<template>
|
||||
<div class="w-full">
|
||||
<label v-if="label" :for="id" class="input-label mb-1.5 block">
|
||||
{{ label }}
|
||||
<span v-if="required" class="text-red-500">*</span>
|
||||
</label>
|
||||
<div class="relative">
|
||||
<textarea
|
||||
:id="id"
|
||||
ref="textAreaRef"
|
||||
:value="modelValue"
|
||||
:disabled="disabled"
|
||||
:required="required"
|
||||
:placeholder="placeholderText"
|
||||
:readonly="readonly"
|
||||
:rows="rows"
|
||||
:class="[
|
||||
'input w-full min-h-[80px] transition-all duration-200 resize-y',
|
||||
error ? 'input-error ring-2 ring-red-500/20' : '',
|
||||
disabled ? 'cursor-not-allowed bg-gray-100 opacity-60 dark:bg-dark-900' : ''
|
||||
]"
|
||||
@input="onInput"
|
||||
@change="$emit('change', ($event.target as HTMLTextAreaElement).value)"
|
||||
@blur="$emit('blur', $event)"
|
||||
@focus="$emit('focus', $event)"
|
||||
></textarea>
|
||||
</div>
|
||||
<!-- Hint / Error Text -->
|
||||
<p v-if="error" class="input-error-text mt-1.5">
|
||||
{{ error }}
|
||||
</p>
|
||||
<p v-else-if="hint" class="input-hint mt-1.5">
|
||||
{{ hint }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue'
|
||||
|
||||
interface Props {
|
||||
modelValue: string | null | undefined
|
||||
label?: string
|
||||
placeholder?: string
|
||||
disabled?: boolean
|
||||
required?: boolean
|
||||
readonly?: boolean
|
||||
error?: string
|
||||
hint?: string
|
||||
id?: string
|
||||
rows?: number | string
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
disabled: false,
|
||||
required: false,
|
||||
readonly: false,
|
||||
rows: 3
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', value: string): void
|
||||
(e: 'change', value: string): void
|
||||
(e: 'blur', event: FocusEvent): void
|
||||
(e: 'focus', event: FocusEvent): void
|
||||
}>()
|
||||
|
||||
const textAreaRef = ref<HTMLTextAreaElement | null>(null)
|
||||
const placeholderText = computed(() => props.placeholder || '')
|
||||
|
||||
const onInput = (event: Event) => {
|
||||
const value = (event.target as HTMLTextAreaElement).value
|
||||
emit('update:modelValue', value)
|
||||
}
|
||||
|
||||
// Expose focus method
|
||||
defineExpose({
|
||||
focus: () => textAreaRef.value?.focus(),
|
||||
select: () => textAreaRef.value?.select()
|
||||
})
|
||||
</script>
|
||||
Reference in New Issue
Block a user