@deplois/template 0.0.0-stage → 0.0.2

package/README.md

@@ -1,3 +1,130 @@
-# Temporary Holding Version
+# @deplois/template
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Nuxt 4 + Nuxt UI 기반 deplois 공통 디자인 레이어입니다. 컴포넌트, 컬러 토큰, 한국어·영어·일본어, UI 플러그인, 폰트와 오류 페이지를 제공합니다. 서비스별 API·세션 코드와 데모 페이지는 포함하지 않습니다.
+
+## 새 프로젝트
+
+npm 게시 후 사용할 수 있습니다. 현재 검증 조합은 Nuxt 4.1.2 / Vue 3.5.22입니다.
+
+```sh
+npm create nuxt@latest my-project -- -t v4
+cd my-project
+npm install
+npm install @deplois/template
+```
+
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+    extends: ['@deplois/template']
+})
+```
+
+```pug
+//- app/app.vue
+UApp(:locale='$languages.locale')
+    Toast
+    Modal
+    LoadingView(:status='$loadingView.contents.length !== 0' :content='$loadingView.contents[0]')
+    NuxtPage
+```
+
+위 Pug 코드는 `<template lang='pug'>` 안에 작성합니다. 실제 화면은 `app/pages/index.vue`부터 작성합니다.
+
+```pug
+main.flex.min-h-svh.items-center.justify-center
+    PageFrame(title='홈' subtitle='새 프로젝트를 시작해요.' name='my-project')
+        Button.bg-primary.text-white(:auto-loading='false') 시작하기
+```
+
+## 공통 기능
+
+- 자동 등록: Button, Input, CheckBox, Toggle, Terms, Select, Calendar, Editor, Chart, Table, Card, Badge, Alert, Timeline, Tabs, Breadcrumb, Tooltip 등.
+- 접두어가 있는 컴포넌트: FileUpload, FileList, PageFrame, PageDashboard, PageError.
+- UI 플러그인: `$toast`, `$modal`, `$loadingView`, `$solveButton`.
+- `$languages.value`: `ko-kr`, `en-us`, `ja-jp`. 정의되지 않은 언어는 `en-us`로 전환됩니다.
+- `$languages.items[$languages.value]`: 앱 인스턴스별 사전. 컴포넌트 기본 문구만 포함합니다. 데모·대시보드 업무 데이터·샘플 문구는 포함하지 않습니다.
+- `input`은 비어 있으며, 서비스에서 `language-key`에 필요한 속성을 직접 등록합니다.
+- `app/app.config.ts`, props의 `ui`, class, 슬롯으로 스타일을 변경합니다.
+- 페이지 전환 기본값은 `page` / `out-in`. 호스트의 `app.pageTransition`으로 변경할 수 있습니다.
+- NuxtPage 옆에 조건부 본문이 있다면 NuxtPage를 별도 div로 감싸 전환 중 DOM 충돌을 피합니다.
+
+```pug
+PageDashboard(:menus='menus' v-model='selected')
+    template(#sidebar-logo)
+        img.size-6(src='/my-logo.svg' alt='')
+        span.font-semibold My service
+    template(#sidebar-footer)
+        span 사용자 정보
+    div
+        NuxtPage
+```
+
+모바일 메뉴는 기본 접힘 상태이며 열기/닫기, 메뉴 선택 후 자동 닫기를 지원합니다. 데스크톱에서는 항상 표시됩니다.
+
+## 로컬 개발과 패키징
+
+이 저장소의 `app/components`, `app/languages`, `assets/css`가 패키지 소스입니다. 별도의 front-template 원본과 자동 동기화되지 않습니다. 패키지 자체는 Nuxt 레이어 소스를 배포하고, 실제 빌드는 사용하는 프로젝트에서 실행합니다.
+
+```sh
+npm ci
+npm run check
+npm pack --dry-run
+npm pack
+```
+
+`npm run check`는 Vue/Pug 및 TypeScript 문법 검사입니다. 전체 타입 검사나 브라우저 검증을 대체하지 않습니다. `npm pack` 전에 자동 실행됩니다. 파일 목록은 package.json의 files로 제한합니다.
+
+이웃 폴더의 소비 프로젝트에서:
+
+```sh
+npm install ../template
+npm run build
+npm run dev
+```
+
+## 배포
+
+```sh
+# 커밋 + push
+npm run publish -- 0.1.0 "첫 번째 배포"
+
+# 커밋 + push + npm 게시
+npm login --registry=https://registry.npmjs.org/
+npm run publish -- 0.1.0 "첫 번째 배포" --deploy
+
+# 현재 package.json 버전을 npm에만 게시 (Git 작업 없음)
+npm run deploy
+```
+
+`npm run deploy`는 현재 폴더의 파일을 검사하고 현재 package.json 버전으로 패키징·게시합니다. 버전 변경, 커밋, push는 하지 않습니다. 이미 게시한 버전이면 npm에서 거절합니다.
+
+기본 명령은 검사 → package.json/lockfile 버전 변경 → 변경 파일 전체 커밋 → 현재 브랜치를 origin에 push까지만 실행합니다. `--deploy`를 붙이면 push 전에 패키징하고 push 성공 후 공개 npmjs.org에도 게시합니다. 옵션이 없으면 npm 로그인 확인과 tgz 생성도 하지 않습니다. 공백이 있는 커밋 메시지는 따옴표로 감쌉니다. GitHub 빌드 번호는 더 이상 버전에 사용하지 않습니다.
+
+`.gitignore`에 포함되지 않은 모든 변경 파일이 커밋됩니다. 커밋할 변경을 먼저 확인하세요. GitHub Actions는 검사만 하고 게시하지 않습니다. npm의 @deplois 게시 권한과 인증이 필요하며 npm의 2FA 요청이 나오면 완료합니다. 토큰을 코드나 저장소에 넣지 않습니다.
+
+어느 단계든 실패하면 다음 단계는 실행하지 않습니다. push 후 npm 게시가 실패한 경우 Git 커밋은 되돌리지 않으며 검사한 tgz를 임시 폴더에 보관하고 재시도 명령을 출력합니다. 네트워크 오류라면 레지스트리에서 해당 버전의 게시 여부를 먼저 확인하세요. 성공하면 임시 tgz를 삭제합니다.
+
+npm 게시 과정에서 publish 스크립트가 다시 호출되지 않도록 내부 명령은 `--ignore-scripts`를 사용합니다. 직접 `npm publish` 대신 위 명령을 사용하세요. 수동 복구도 출력된 `--ignore-scripts` 포함 명령을 사용합니다.
+
+소비 프로젝트는 `npm install @deplois/template@latest` 후 다시 빌드합니다. 로컬 test-project는 `file:../template`으로 연결됩니다.
+
+## 라이선스와 에셋
+
+프로젝트 자체의 라이선스는 아직 지정하지 않아 `UNLICENSED`입니다. 공개 사용 허용 범위가 결정되면 변경하세요. Pretendard 가변 폰트는 동봉한 OFL 라이선스를 따릅니다. 폰트와 로고는 `/_deplois/` 경로에서 제공하며 Paperlogy는 기존 CDN을 사용합니다.
+
+
+## 로컬 배포 명령
+
+```sh
+npm run publish -- 1.2.3 "커밋 메시지" --deploy
+npm run publish -- major "커밋 메시지" --deploy
+npm run publish -- minor "커밋 메시지" --deploy
+npm run publish -- fetch "커밋 메시지" --deploy
+```
+
+현재 버전이 `1.2.3`일 때 `major`는 `2.0.0`, `minor`는 `1.3.0`, `fetch`는 `1.2.4`가 됩니다. 상위 버전을 올리면 하위 버전은 0으로 초기화합니다.
+
+`--deploy`를 빼면 버전 변경·커밋·Git push까지만 진행합니다. `npm run deploy`는 현재 버전을 npm에만 배포합니다.
+
+`scripts/publish.mjs`는 로컬 전용으로 Git 추적과 npm 패키지에서 제외합니다. 새로 clone한 환경에서 배포 명령을 쓰려면 이 파일을 별도로 복사해야 합니다.

package/app/app.config.ts

@@ -0,0 +1,52 @@
+export default defineAppConfig({
+    ui: {
+        colors: {
+            primary: 'brand',
+            secondary: 'violet',
+            neutral: 'slate',
+            success: 'emerald',
+            info: 'sky',
+            warning: 'amber',
+            error: 'rose'
+        },
+        card: {
+            slots: {
+                root: 'rounded-md',
+                header: 'p-4 sm:px-4',
+                body: 'p-4 sm:p-4',
+                footer: 'p-4 sm:px-4'
+            }
+        },
+        table: {
+            slots: {
+                root: 'rounded-md border border-default',
+                th: 'px-4 py-3 bg-muted text-sm font-semibold',
+                td: 'px-4 py-3 text-sm text-default'
+            }
+        },
+        alert: { slots: { root: 'rounded-md', title: 'text-sm font-semibold', description: 'text-sm' } },
+        badge: { slots: { base: 'rounded-md text-xs' } },
+        tooltip: { slots: { content: 'rounded-md text-xs' } },
+        tabs: {
+            slots: {
+                list: 'rounded-md',
+                trigger: 'h-8 cursor-pointer disabled:cursor-not-allowed',
+                indicator: 'rounded-md motion-reduce:transition-none'
+            }
+        },
+        calendar: {
+            slots: { cellTrigger: 'rounded-md cursor-pointer data-disabled:cursor-not-allowed data-unavailable:cursor-not-allowed' }
+        },
+        button: {
+            slots: {
+                base: 'cursor-pointer disabled:cursor-not-allowed aria-disabled:cursor-not-allowed'
+            }
+        },
+        select: {
+            slots: {
+                base: 'h-8 rounded-md cursor-pointer disabled:cursor-not-allowed',
+                item: 'cursor-pointer data-disabled:cursor-not-allowed'
+            }
+        }
+    }
+})

package/app/components/action/button.vue

@@ -0,0 +1,35 @@
+<template lang='pug'>
+button(
+    v-bind='$attrs'
+    :class='twMerge(button, normalizeClass($attrs.class))'
+    :type='props.type'
+    :disabled='props.disabled || isLoading'
+    :aria-busy='isLoading'
+    :data-loading='isLoading'
+    @click='isPending = props.autoLoading'
+    @loading-end='isPending = false'
+)
+    span.pointer-events-none.absolute.left-3.flex.size-4.items-center.justify-center.opacity-0.transition-opacity(class='group-data-[loading=true]/button:opacity-100' :class='props.ui?.loader' aria-hidden='true')
+        slot(name='loading')
+            Loader.size-full
+    slot(:loading='isLoading')
+</template>
+
+<script setup lang='ts'>
+import { normalizeClass } from 'vue'
+import { twMerge } from 'tailwind-merge'
+
+defineOptions({ inheritAttrs: false })
+const button = 'relative flex h-8 min-w-0 cursor-pointer items-center justify-center gap-2 rounded-md px-4 text-sm font-semibold transition-all duration-200 group/button disabled:cursor-not-allowed disabled:opacity-60 data-[loading=true]:cursor-wait data-[loading=true]:pl-10 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current motion-reduce:transition-none'
+
+const props = withDefaults(defineProps<{
+    ui?: { loader?: string },
+    type?: 'button' | 'submit' | 'reset',
+    disabled?: boolean,
+    loading?: boolean,
+    autoLoading?: boolean
+}>(), { type: 'button', disabled: false, loading: false, autoLoading: true })
+
+const isPending = ref(false)
+const isLoading = computed(() => props.loading || isPending.value)
+</script>

package/app/components/content/badge.vue

@@ -0,0 +1,9 @@
+<template lang='pug'>
+UBadge(variant='soft' color='neutral' v-bind='$attrs')
+    template(v-for='(_, name) in $slots' #[name]='scope')
+        slot(:name='name' v-bind='scope || {}')
+</template>
+
+<script setup lang='ts'>
+defineOptions({ inheritAttrs: false })
+</script>

package/app/components/content/card.vue

@@ -0,0 +1,9 @@
+<template lang='pug'>
+UCard(v-bind='$attrs')
+    template(v-for='(_, name) in $slots' #[name]='scope')
+        slot(:name='name' v-bind='scope || {}')
+</template>
+
+<script setup lang='ts'>
+defineOptions({ inheritAttrs: false })
+</script>

package/app/components/content/chart.vue

@@ -0,0 +1,94 @@
+<template lang='pug'>
+figure.min-w-0.text-primary(:aria-label='(props.label ?? $languages.items[$languages.value].components.chart.label)')
+    div.relative(v-if='points.length' @pointerleave='activeIndex = null')
+        svg.block.w-full(viewBox='0 0 640 260' role='group' :aria-labelledby='`${chartId}-title ${chartId}-description`')
+            title(:id='`${chartId}-title`') {{ (props.label ?? $languages.items[$languages.value].components.chart.label) }}
+            desc(:id='`${chartId}-description`') {{ points.map(point => `${point.label}: ${format(point.value)}`).join(', ') }}
+            g(v-for='tick in ticks' :key='tick.value')
+                line(class='stroke-(--ui-border)' x1='56' x2='624' :y1='tick.y' :y2='tick.y')
+                text(class='fill-(--ui-text-muted)' :style="{ fontSize: `${typeof props.axisSize == 'number' ? props.axisSize : props.axisSize.y ?? 12}px` }" x='48' :y='tick.y' dominant-baseline='middle' text-anchor='end') {{ format(tick.value) }}
+            line(class='stroke-(--ui-border-accented)' x1='56' x2='624' :y1='baseline' :y2='baseline')
+            path.fill-current(v-if="props.type == 'area'" :d='`${linePath} L ${points.at(-1)?.x} ${baseline} L ${points[0]?.x} ${baseline} Z`' opacity='.12')
+            path.fill-none.stroke-current(v-if="props.type != 'bar'" :d='linePath' stroke-width='2' stroke-linecap='round' stroke-linejoin='round')
+            g(v-for='(point, index) in points' :key='index')
+                rect.fill-current(v-if="props.type == 'bar'" :x='point.x - barWidth / 2' :y='Math.min(point.y, baseline)' :width='barWidth' :height='Math.abs(point.y - baseline)' rx='3')
+                circle.fill-current(v-else :cx='point.x' :cy='point.y' :r='Math.max(0, props.pointSize) / 2')
+                text(class='fill-(--ui-text-muted)' :style="{ fontSize: `${typeof props.axisSize == 'number' ? props.axisSize : props.axisSize.x ?? 12}px` }" v-if='index % Math.max(1, Math.ceil(points.length / 8)) == 0' :x='point.x' y='246' text-anchor='middle') {{ point.label.length > 10 ? point.label.slice(0, 9) + '…' : point.label }}
+            Transition(enter-from-class='opacity-0' leave-to-class='opacity-0')
+                g.pointer-events-none.transition-opacity.duration-150(v-if='activePoint' aria-hidden='true' class='motion-reduce:transition-none')
+                    g(class='transition-transform duration-200 ease-out motion-reduce:transition-none' :style='{ transform: `translateX(${activePoint.x}px)` }')
+                        line.stroke-current(x1='0' x2='0' y1='20' y2='220' stroke-dasharray='4 4' opacity='.4')
+                        circle.stroke-current(class='fill-(--ui-bg) transition-transform duration-200 ease-out motion-reduce:transition-none' :style='{ transform: `translateY(${activePoint.y}px)` }' cx='0' cy='0' :r='Math.max(0, props.activePointSize) / 2' stroke-width='2')
+            g(v-if='props.tooltip')
+                rect.fill-transparent.outline-none(v-for='(point, index) in points' :key='index' :x='56 + index / points.length * 568' y='20' :width='568 / points.length' height='200' tabindex='0' :aria-label='`${point.label}: ${formatDetail(point.value)}`' :aria-describedby='activeIndex == index ? `${chartId}-tooltip` : undefined' @pointerenter='activeIndex = index' @focus='activeIndex = index' @blur='activeIndex = null' @keydown.esc='activeIndex = null')
+        Transition(enter-from-class='opacity-0' leave-to-class='opacity-0')
+            div.pointer-events-none.absolute.z-10.max-w-full.rounded-md.border.border-default.bg-elevated.px-3.py-2.text-xs.text-default.shadow-md(v-if='activePoint' :id='`${chartId}-tooltip`' role='tooltip' class='transition-[left,top,transform,opacity] duration-200 ease-out motion-reduce:transition-none' :style='tooltipStyle')
+                slot(name='tooltip' :point='activePoint')
+                    p.font-medium {{ activePoint.label }}
+                    p.mt-1.font-semibold.tabular-nums {{ formatDetail(activePoint.value) }}
+    div.flex.min-h-48.items-center.justify-center.rounded-md.border.border-dashed.border-default.text-sm.text-muted(v-else)
+        slot(name='empty') {{ props.empty ?? $languages.items[$languages.value].components.common.empty }}
+    figcaption.mt-2.text-xs.text-muted(v-if='$slots.caption')
+        slot(name='caption')
+</template>
+
+<script setup lang='ts'>
+const { $languages } = useNuxtApp()
+const props = withDefaults(defineProps<{
+    data: Array<{ label: string, value: number }>,
+    type?: 'line' | 'bar' | 'area',
+    label?: string,
+    locale?: string,
+    empty?: string,
+    tooltip?: boolean,
+    tooltipPosition?: 'top' | 'bottom',
+    tooltipOffset?: number,
+    pointSize?: number,
+    activePointSize?: number,
+    axisSize?: number | { x?: number, y?: number }
+}>(), {
+    type: 'line',
+    tooltip: true,
+    tooltipPosition: 'top',
+    tooltipOffset: 8,
+    pointSize: 4,
+    activePointSize: 8,
+    axisSize: 12
+})
+const chartId = useId()
+const activeIndex = ref<number | null>(null)
+const values = computed(() => props.data.filter(item => Number.isFinite(item.value)))
+const minimum = computed(() => Math.min(0, ...values.value.map(item => item.value)))
+const maximum = computed(() => Math.max(0, ...values.value.map(item => item.value)) || (minimum.value == 0 ? 1 : 0))
+const range = computed(() => maximum.value - minimum.value)
+const baseline = computed(() => 220 - (0 - minimum.value) / range.value * 200)
+const barWidth = computed(() => Math.min(40, 568 / Math.max(values.value.length, 1) * .6))
+const points = computed(() => values.value.map((item, index) => ({
+    ...item,
+    x: 56 + (index + .5) / values.value.length * 568,
+    y: 220 - (item.value - minimum.value) / range.value * 200
+})))
+const ticks = computed(() => Array.from({ length: 5 }, (_, index) => ({ value: minimum.value + range.value * index / 4, y: 220 - index * 50 })))
+const activePoint = computed(() => props.tooltip && activeIndex.value !== null ? points.value[activeIndex.value] : undefined)
+const tooltipStyle = computed(() => {
+    if (!activePoint.value) return {}
+    const radius = Math.max(0, props.pointSize, props.activePointSize) / 2
+    const above = props.tooltipPosition == 'top'
+
+    return {
+        left: `${activePoint.value.x / 640 * 100}%`,
+        top: `calc(${(activePoint.value.y + (above ? -radius : radius)) / 260 * 100}% ${above ? '-' : '+'} ${Math.max(0, props.tooltipOffset)}px)`,
+        transform: `translate(${activePoint.value.x > 320 ? '-100%' : '0'}, ${above ? '-100%' : '0'})`
+    }
+})
+const linePath = computed(() => points.value.map((point, index) => `${index == 0 ? 'M' : 'L'} ${point.x} ${point.y}`).join(' '))
+watch(() => [props.data, props.type, props.tooltip], () => { activeIndex.value = null })
+
+function formatDetail (value: number) {
+    return new Intl.NumberFormat(props.locale ?? $languages.locale.code, { maximumFractionDigits: 20 }).format(value)
+}
+
+function format (value: number) {
+    return new Intl.NumberFormat(props.locale ?? $languages.locale.code, { notation: 'compact', maximumFractionDigits: 1 }).format(value)
+}
+</script>

package/app/components/content/formatted-text.vue

@@ -0,0 +1,127 @@
+<script lang='ts'>
+import { defineComponent, h, resolveComponent, type VNodeChild } from 'vue'
+
+function parseContent(value: string, variables: Record<string, unknown>, resolvingVariables: string[] = []): VNodeChild[] {
+    const nodes: VNodeChild[] = []
+    let text = ''
+    let index = 0
+
+    function flushText() {
+        if(!text) return
+        nodes.push(text)
+        text = ''
+    }
+
+    while(index < value.length) {
+        if(value[index] !== '$' && value[index] !== '#') {
+            text += value[index]
+            index++
+            continue
+        }
+
+        const variableMatch = value.slice(index).match(/^\$\{([^}]+)\}/)
+        if(variableMatch) {
+            flushText()
+            const [variableSyntax = '', variableName = ''] = variableMatch
+            const normalizedVariableName = variableName.trim()
+            const variable = variables[normalizedVariableName]
+
+            if(variable === undefined || variable === null) {
+                nodes.push(h('span', { class: 'mx-1 inline-block h-2 w-20 animate-pulse rounded-full bg-accented align-middle' }))
+            } else if(typeof variable === 'string' && !resolvingVariables.includes(normalizedVariableName) && resolvingVariables.length < 10) {
+                nodes.push(...parseContent(variable, variables, [...resolvingVariables, normalizedVariableName]))
+            } else {
+                nodes.push(String(variable))
+            }
+
+            index += variableSyntax.length
+            continue
+        }
+
+        const iconMatch = value.slice(index).match(/^#i\(([^)]+)\)/)
+        if(iconMatch) {
+            flushText()
+            const [iconSyntax = '', iconName = ''] = iconMatch
+            nodes.push(h(resolveComponent('Icon'), {
+                name: iconName.trim(),
+                class: 'mx-0.5 inline-block size-4 align-[-0.2em]'
+            }))
+            index += iconSyntax.length
+            continue
+        }
+
+        const colorMatch = value.slice(index).match(/^#c\((#[\da-fA-F]{3,4}|#[\da-fA-F]{6}|#[\da-fA-F]{8}|[a-zA-Z]+)\)\{/)
+        if(colorMatch) {
+            flushText()
+            const [optionSyntax = '', color = ''] = colorMatch
+            const contentStart = index + optionSyntax.length
+            let depth = 1
+            let contentEnd = contentStart
+
+            while(contentEnd < value.length && depth > 0) {
+                const character = value.charAt(contentEnd)
+                if(character === '{') depth++
+                if(character === '}') depth--
+                contentEnd++
+            }
+
+            if(depth === 0) {
+                nodes.push(h('span', { style: { color } }, parseContent(value.slice(contentStart, contentEnd - 1), variables, resolvingVariables)))
+                index = contentEnd
+                continue
+            }
+        }
+
+        const optionMatch = value.slice(index).match(/^#([bui]+)(?:\(([^)]+)\))?\{/)
+        if(optionMatch) {
+            const [optionSyntax = '', optionFlags = '', iconName] = optionMatch
+            const contentStart = index + optionSyntax.length
+            let depth = 1
+            let contentEnd = contentStart
+
+            while(contentEnd < value.length && depth > 0) {
+                const character = value.charAt(contentEnd)
+                if(character === '{') depth++
+                if(character === '}') depth--
+                contentEnd++
+            }
+
+            if(depth === 0 && (!optionFlags.includes('i') || iconName)) {
+                flushText()
+                const children = parseContent(value.slice(contentStart, contentEnd - 1), variables, resolvingVariables)
+                if(optionFlags.includes('i')) {
+                    children.unshift(h(resolveComponent('Icon'), {
+                        name: iconName?.trim() ?? '',
+                        class: 'mr-1 inline-block size-4 align-[-0.2em]'
+                    }))
+                }
+
+                let content: VNodeChild = children
+                if(optionFlags.includes('b')) content = h('strong', Array.isArray(content) ? content : [content])
+                if(optionFlags.includes('u')) content = h('span', { class: 'underline' }, [content])
+                nodes.push(content)
+                index = contentEnd
+                continue
+            }
+        }
+
+        text += value.charAt(index)
+        index++
+    }
+
+    flushText()
+    return nodes
+}
+
+export default defineComponent({
+    name: 'FormattedText',
+    inheritAttrs: false,
+    props: {
+        value: { type: String, required: true },
+        variables: { type: Object as () => Record<string, unknown>, default: () => ({}) }
+    },
+    setup(props, { attrs }) {
+        return () => h('span', attrs, parseContent(props.value, props.variables))
+    }
+})
+</script>

package/app/components/content/table.vue

@@ -0,0 +1,13 @@
+<template lang='pug'>
+ClientOnly(fallback-tag='div' :fallback='$languages.items[$languages.value].components.table.loading')
+    UTable(ref='table' :empty='$languages.items[$languages.value].components.common.empty' v-bind='$attrs')
+        template(v-for='(_, name) in $slots' #[name]='scope')
+            slot(:name='name' v-bind='scope || {}')
+</template>
+
+<script setup lang='ts'>
+const { $languages } = useNuxtApp()
+defineOptions({ inheritAttrs: false })
+const table = useTemplateRef('table')
+defineExpose({ tableApi: computed(() => table.value?.tableApi) })
+</script>

package/app/components/content/timeline.vue

@@ -0,0 +1,9 @@
+<template lang='pug'>
+UTimeline(v-bind='$attrs')
+    template(v-for='(_, name) in $slots' #[name]='scope')
+        slot(:name='name' v-bind='scope || {}')
+</template>
+
+<script setup lang='ts'>
+defineOptions({ inheritAttrs: false })
+</script>

package/app/components/feedback/alert.vue

@@ -0,0 +1,9 @@
+<template lang='pug'>
+UAlert(variant='subtle' color='info' v-bind='$attrs')
+    template(v-for='(_, name) in $slots' #[name]='scope')
+        slot(:name='name' v-bind='scope || {}')
+</template>
+
+<script setup lang='ts'>
+defineOptions({ inheritAttrs: false })
+</script>

package/app/components/feedback/loader.vue

@@ -0,0 +1,53 @@
+<template lang='pug'>
+svg.loading(viewBox='10 10 20 20' aria-hidden='true')
+    circle(stroke-width='10%' r='9' cx='100%' cy='100%' fill='none' :class="props.ui?.track ?? 'stroke-current opacity-40'")
+    circle(stroke-width='10%' r='9' cx='100%' cy='100%' fill='none' :class="props.ui?.indicator ?? 'stroke-current'")
+</template>
+
+<script setup lang='ts'>
+const props = defineProps<{ ui?: Partial<Record<'track' | 'indicator', string>> }>()
+</script>
+
+<style lang='css' scoped>
+svg.loading {
+    animation: 1400ms linear 0s infinite normal none running loading-svg;
+    display: block;
+}
+
+svg.loading > circle:last-child {
+    stroke-dasharray: 14px, 56px;
+    stroke-dashoffset: 0px;
+    animation: 1400ms ease-in-out 0s infinite normal none running loading-circle;
+}
+
+@keyframes loading-circle {
+    0% {
+        stroke-dasharray: 1px, 90px;
+        stroke-dashoffset: 0px;
+    }
+    50% {
+        stroke-dasharray: 45px, 90px;
+        stroke-dashoffset: -7px;
+    }
+    100% {
+        stroke-dasharray: 45px, 90px;
+        stroke-dashoffset: -56px;
+    }
+}
+
+@keyframes loading-svg {
+    0% {
+        transform: rotate(0deg);
+        transform-origin: 50% 50%;
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
+@media (prefers-reduced-motion: reduce) {
+    svg.loading,
+    svg.loading > circle:last-child {
+        animation: none;
+    }
+}
+</style>

package/app/components/feedback/loading-view.vue

@@ -0,0 +1,21 @@
+<template lang='pug'>
+Teleport(to='body')
+    Transition(enter-active-class='transition-opacity duration-200 motion-reduce:transition-none' leave-active-class='transition-opacity duration-200 motion-reduce:transition-none' enter-from-class='opacity-0' leave-to-class='opacity-0')
+        div.fixed.inset-0.z-50.flex.items-center.justify-center.p-4.backdrop-blur-sm(v-if='props.status' v-bind='$attrs' :class="props.ui?.overlay ?? 'bg-black/30 dark:bg-black/50'" role='status' aria-live='polite' :aria-label='$languages.items[$languages.value].components.common.loading')
+            div.flex.max-w-sm.items-center.gap-3.rounded-md.p-4.shadow-lg(:class="props.ui?.panel ?? 'bg-white text-slate-900 dark:bg-zinc-900 dark:text-white'")
+                slot(:content='props.content')
+                    slot(name='loader')
+                        Loader.size-5.shrink-0(:class="props.ui?.loader ?? 'text-black dark:text-white'")
+                    slot(name='content' :content='props.content')
+                        p.text-sm.font-medium.paperlogy(v-if='props.content' :class='props.ui?.content') {{ props.content }}
+</template>
+
+<script setup lang='ts'>
+const { $languages } = useNuxtApp()
+defineOptions({ inheritAttrs: false })
+const props = defineProps<{
+    status: boolean,
+    content?: string,
+    ui?: Partial<Record<'overlay' | 'panel' | 'loader' | 'content', string>>
+}>()
+</script>