V13-FE-005: Complete KBX v60 frontend components, T01-T12 screen recipes, and WBS progress tracker
This commit is contained in:
@@ -0,0 +1,122 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
|
||||
const props = defineProps<{
|
||||
title: string
|
||||
value: string | number
|
||||
unit?: string
|
||||
changeRate?: number
|
||||
status?: 'success' | 'warning' | 'danger' | 'info'
|
||||
subtext?: string
|
||||
trend?: 'up' | 'down' | 'neutral'
|
||||
}>()
|
||||
|
||||
const statusClass = computed(() => {
|
||||
if (props.status) return `ks-metric-card--${props.status}`
|
||||
if (props.trend === 'up') return 'ks-metric-card--up'
|
||||
if (props.trend === 'down') return 'ks-metric-card--down'
|
||||
return ''
|
||||
})
|
||||
|
||||
const formattedChangeRate = computed(() => {
|
||||
if (props.changeRate === undefined) return null
|
||||
const prefix = props.changeRate > 0 ? '+' : ''
|
||||
return `${prefix}${props.changeRate.toFixed(2)}%`
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="ks-metric-card" :class="statusClass">
|
||||
<div class="ks-metric-card__header">
|
||||
<span class="ks-metric-card__title">{{ title }}</span>
|
||||
<span v-if="trend || status" class="ks-metric-card__badge" :class="`ks-badge--${trend || status}`">
|
||||
{{ trend ? (trend === 'up' ? '▲' : trend === 'down' ? '▼' : '-') : status }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="ks-metric-card__body">
|
||||
<div class="ks-metric-card__value-group">
|
||||
<span class="ks-metric-card__value ks-financial-number">{{ value }}</span>
|
||||
<span v-if="unit" class="ks-metric-card__unit">{{ unit }}</span>
|
||||
</div>
|
||||
|
||||
<div v-if="formattedChangeRate || subtext" class="ks-metric-card__footer">
|
||||
<span v-if="formattedChangeRate" class="ks-metric-card__change" :class="changeRate! >= 0 ? 'ks-text-up' : 'ks-text-down'">
|
||||
{{ formattedChangeRate }}
|
||||
</span>
|
||||
<span v-if="subtext" class="ks-metric-card__subtext">{{ subtext }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.ks-metric-card {
|
||||
padding: var(--ks-space-4);
|
||||
background: var(--ks-glass-bg);
|
||||
backdrop-filter: var(--ks-glass-blur);
|
||||
border: 1px solid var(--ks-glass-border);
|
||||
border-radius: var(--ks-radius-lg);
|
||||
box-shadow: var(--ks-shadow-sm);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--ks-space-2);
|
||||
transition: transform 0.15s ease, box-shadow 0.15s ease;
|
||||
}
|
||||
|
||||
.ks-metric-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--ks-shadow-md);
|
||||
}
|
||||
|
||||
.ks-metric-card__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.ks-metric-card__title {
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 500;
|
||||
color: var(--ks-color-text-muted);
|
||||
}
|
||||
|
||||
.ks-metric-card__badge {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
padding: 0.1rem 0.4rem;
|
||||
border-radius: var(--ks-radius-sm);
|
||||
}
|
||||
|
||||
.ks-badge--up, .ks-badge--success { background: rgba(5, 150, 105, 0.1); color: var(--ks-color-success); }
|
||||
.ks-badge--down, .ks-badge--danger { background: rgba(220, 38, 38, 0.1); color: var(--ks-color-danger); }
|
||||
.ks-badge--warning { background: rgba(217, 119, 6, 0.1); color: var(--ks-color-warning); }
|
||||
|
||||
.ks-metric-card__value-group {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: var(--ks-space-1);
|
||||
}
|
||||
|
||||
.ks-metric-card__value {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: var(--ks-color-text);
|
||||
}
|
||||
|
||||
.ks-metric-card__unit {
|
||||
font-size: 0.875rem;
|
||||
color: var(--ks-color-text-muted);
|
||||
}
|
||||
|
||||
.ks-metric-card__footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--ks-space-2);
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.ks-text-up { color: var(--ks-color-up); font-weight: 600; }
|
||||
.ks-text-down { color: var(--ks-color-down); font-weight: 600; }
|
||||
.ks-metric-card__subtext { color: var(--ks-color-text-muted); }
|
||||
</style>
|
||||
@@ -13,6 +13,7 @@ export interface KsButtonProps {
|
||||
icon?: string
|
||||
iconPosition?: 'left' | 'right'
|
||||
ariaLabel?: string
|
||||
severity?: 'primary' | 'secondary' | 'danger' | 'ghost' | 'text' | string
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<KsButtonProps>(), {
|
||||
@@ -70,13 +71,13 @@ onMounted(() => {
|
||||
@click="handleClick"
|
||||
>
|
||||
<!-- Loading spinner -->
|
||||
<span v-if="loading" class="ks-button__spinner" aria-hidden="true" />
|
||||
<span v-if="loading" class="ks-button__spinner" aria-hidden="true">…</span>
|
||||
|
||||
<!-- Icon (left) -->
|
||||
<span v-if="icon && iconPosition === 'left'" class="ks-button__icon ks-button__icon--left" v-text="icon" />
|
||||
|
||||
<!-- Label -->
|
||||
<span v-if="label" class="ks-button__label">{{ label }}</span>
|
||||
<span v-if="label" class="ks-button__label">{{ label }}<span v-if="loading" class="ks-sr-only">…</span></span>
|
||||
<slot v-else />
|
||||
|
||||
<!-- Icon (right) -->
|
||||
|
||||
@@ -3,7 +3,7 @@ import { computed, ref } from 'vue'
|
||||
|
||||
export interface KsCheckboxProps {
|
||||
modelValue: boolean | string[]
|
||||
label: string
|
||||
label?: string
|
||||
value?: any
|
||||
disabled?: boolean
|
||||
readonly?: boolean
|
||||
|
||||
@@ -3,7 +3,7 @@ import { computed, ref } from 'vue'
|
||||
|
||||
export interface KsDateFieldProps {
|
||||
modelValue: string | Date | null
|
||||
label: string
|
||||
label?: string
|
||||
type?: 'date' | 'datetime' | 'range'
|
||||
disabled?: boolean
|
||||
readonly?: boolean
|
||||
|
||||
@@ -0,0 +1,72 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
|
||||
const props = defineProps<{
|
||||
title?: string
|
||||
loading?: boolean
|
||||
error?: string
|
||||
}>()
|
||||
|
||||
defineEmits<{
|
||||
retry: []
|
||||
create: []
|
||||
refresh: []
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="ks-list-page">
|
||||
<div v-if="title" class="ks-list-page__header">
|
||||
<h1 class="ks-list-page__title">{{ title }}</h1>
|
||||
<div class="ks-list-page__actions">
|
||||
<slot name="actions" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ks-list-page__search">
|
||||
<slot name="search" />
|
||||
</div>
|
||||
|
||||
<div class="ks-list-page__content">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.ks-list-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--ks-space-4);
|
||||
}
|
||||
|
||||
.ks-list-page__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.ks-list-page__title {
|
||||
font-size: var(--ks-font-page);
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.ks-list-page__actions {
|
||||
display: flex;
|
||||
gap: var(--ks-space-2);
|
||||
}
|
||||
|
||||
.ks-list-page__search {
|
||||
padding: var(--ks-space-4);
|
||||
background: var(--ks-color-surface);
|
||||
border: 1px solid var(--ks-color-border);
|
||||
border-radius: var(--ks-radius-md);
|
||||
}
|
||||
|
||||
.ks-list-page__content {
|
||||
background: var(--ks-color-surface);
|
||||
border: 1px solid var(--ks-color-border);
|
||||
border-radius: var(--ks-radius-md);
|
||||
}
|
||||
</style>
|
||||
@@ -3,7 +3,7 @@ import { computed, ref } from 'vue'
|
||||
|
||||
export interface KsNumberFieldProps {
|
||||
modelValue: number | null
|
||||
label: string
|
||||
label?: string
|
||||
type?: 'integer' | 'decimal'
|
||||
disabled?: boolean
|
||||
readonly?: boolean
|
||||
@@ -18,6 +18,7 @@ export interface KsNumberFieldProps {
|
||||
size?: 'sm' | 'md' | 'lg'
|
||||
currency?: string
|
||||
decimalPlaces?: number
|
||||
maxFractionDigits?: number
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<KsNumberFieldProps>(), {
|
||||
|
||||
@@ -10,7 +10,7 @@ export interface SelectOption {
|
||||
|
||||
export interface KsSelectProps {
|
||||
modelValue: any
|
||||
label: string
|
||||
label?: string
|
||||
options: SelectOption[]
|
||||
placeholder?: string
|
||||
disabled?: boolean
|
||||
|
||||
@@ -3,7 +3,7 @@ import { computed, ref } from 'vue'
|
||||
|
||||
export interface KsTextFieldProps {
|
||||
modelValue: string
|
||||
label: string
|
||||
label?: string
|
||||
type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url'
|
||||
placeholder?: string
|
||||
disabled?: boolean
|
||||
@@ -90,7 +90,7 @@ const handleInput = (event: Event) => {
|
||||
:autocomplete="autocomplete"
|
||||
class="ks-text-field__input"
|
||||
:aria-invalid="!!error"
|
||||
:aria-describedby="error || help ? `${id}-hint` : undefined"
|
||||
:aria-describedby="error ? `${id}-message` : (help ? `${id}-hint` : undefined)"
|
||||
@input="handleInput"
|
||||
@focus="handleFocus"
|
||||
@blur="handleBlur"
|
||||
@@ -103,8 +103,11 @@ const handleInput = (event: Event) => {
|
||||
</div>
|
||||
|
||||
<!-- Error or help text -->
|
||||
<div v-if="error || help" :id="`${id}-hint`" :class="{ 'ks-text-field__error': error, 'ks-text-field__help': help }">
|
||||
{{ error || help }}
|
||||
<div v-if="error" :id="`${id}-message`" class="ks-text-field__error">
|
||||
{{ error }}
|
||||
</div>
|
||||
<div v-else-if="help" :id="`${id}-hint`" class="ks-text-field__help">
|
||||
{{ help }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user