@deplois/template 0.0.0-stage → 0.0.1

package/app/components/navigation/breadcrumb.vue

@@ -0,0 +1,10 @@
+<template lang='pug'>
+UBreadcrumb(:aria-label='$languages.items[$languages.value].components.breadcrumb.label' 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 })
+</script>

package/app/components/navigation/tabs.vue

@@ -0,0 +1,9 @@
+<template lang='pug'>
+UTabs(variant='pill' 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/page/dashboard.vue

@@ -0,0 +1,84 @@
+<template lang='pug'>
+div.min-h-svh.bg-default.text-default(class='lg:grid lg:grid-cols-[15rem_minmax(0,1fr)]' :class='props.ui?.root')
+    aside.flex.min-w-0.flex-col.border-b.border-default.bg-default(class='lg:sticky lg:top-0 lg:h-svh lg:border-b-0 lg:border-r' :class='props.ui?.sidebar')
+        div.flex.h-14.shrink-0.items-center.gap-2.px-3
+            slot(name='sidebar-logo')
+                img.size-6.shrink-0(src='/_deplois/logo.svg' alt='')
+                span.text-lg.font-semibold.paperlogy
+                    span.text-primary deplois
+                    span.ml-1 {{ props.name || $languages.items[$languages.value].components.dashboard.workspace }}
+            button.ml-auto.flex.size-8.shrink-0.cursor-pointer.items-center.justify-center.rounded-md.text-muted(type='button' class='hover:bg-muted focus-visible:outline-2 focus-visible:outline-primary lg:hidden' :aria-label='isMenuOpen ? $languages.items[$languages.value].components.dashboard.closeMenu : $languages.items[$languages.value].components.dashboard.openMenu' :aria-expanded='isMenuOpen' :aria-controls='`${navigationId}-menu`' @click='isMenuOpen = !isMenuOpen')
+                Icon.size-5(:name="isMenuOpen ? 'i-lucide-x' : 'i-lucide-menu'")
+        div.grid.min-h-0(class='transition-[grid-template-rows,opacity,visibility] duration-200 ease-out lg:visible lg:flex-1 lg:grid-rows-[1fr] lg:opacity-100 motion-reduce:transition-none' :class="isMenuOpen ? 'visible grid-rows-[1fr] opacity-100' : 'invisible grid-rows-[0fr] opacity-0'" @keydown.esc='isMenuOpen = false')
+            div.flex.min-h-0.flex-col.overflow-hidden
+                nav.flex.min-h-0.flex-col.gap-1.overflow-y-auto.px-2.pb-3(:id='`${navigationId}-menu`' :aria-label="props.navigationLabel ?? $languages.items[$languages.value].components.dashboard.navigation" class='max-h-72 lg:max-h-none lg:flex-1')
+                    slot(name='navigation' :menus='props.menus' :selected='selected')
+                        div(v-for='menu in props.menus' :key='menu.id')
+                            button.flex.w-full.cursor-pointer.items-center.gap-3.rounded-md.px-3.py-2.text-left.text-sm.transition-colors(
+                                type='button'
+                                :disabled='menu.disabled'
+                                :aria-current="selected == menu.id ? 'page' : undefined"
+                                :aria-expanded='menu.children?.length ? expanded == menu.id : undefined'
+                                :aria-controls='menu.children?.length ? `${navigationId}-${menu.id}` : undefined'
+                                :class="selected == menu.id || menu.children?.some(child => child.id == selected) ? 'bg-primary/10 text-primary font-semibold' : 'text-muted enabled:hover:bg-muted enabled:hover:text-default'"
+                                class='focus-visible:outline-2 focus-visible:outline-primary disabled:cursor-not-allowed disabled:opacity-50 motion-reduce:transition-none'
+                                @click="menu.children?.length ? expanded = expanded == menu.id ? '' : menu.id : (selected = menu.id, isMenuOpen = false, emit('select', menu.id))"
+                            )
+                                Icon.size-4.shrink-0(v-if='menu.icon' :name='menu.icon')
+                                span.flex-1 {{ menu.label }}
+                                span.rounded.bg-muted.px-1.text-xs(v-if='menu.badge != null') {{ menu.badge }}
+                                Icon.size-4.shrink-0.transition-transform(v-if='menu.children?.length' name='i-lucide-chevron-down' :class="{ 'rotate-180': expanded == menu.id }" class='motion-reduce:transition-none')
+                            div.grid(v-if='menu.children?.length' :id='`${navigationId}-${menu.id}`' :inert='expanded != menu.id' :class="expanded == menu.id ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'" class='transition-[grid-template-rows,opacity] duration-200 motion-reduce:transition-none')
+                                div.min-h-0.overflow-hidden
+                                    div.ml-5.mt-1.flex.flex-col.gap-1.border-l.border-default.pl-3
+                                        button.flex.w-full.cursor-pointer.items-center.rounded-md.px-3.py-2.text-left.text-sm.transition-colors(
+                                            v-for='child in menu.children'
+                                            :key='child.id'
+                                            type='button'
+                                            :disabled='menu.disabled || child.disabled'
+                                            :aria-current="selected == child.id ? 'page' : undefined"
+                                            :class="selected == child.id ? 'bg-primary/10 text-primary font-semibold' : 'text-muted enabled:hover:bg-muted enabled:hover:text-default'"
+                                            class='focus-visible:outline-2 focus-visible:outline-primary disabled:cursor-not-allowed disabled:opacity-50 motion-reduce:transition-none'
+                                            @click="selected = child.id; isMenuOpen = false; emit('select', child.id)"
+                                        ) {{ child.label }}
+        div.border-t.border-default.p-3(v-if='$slots["sidebar-footer"]' class='hidden lg:block')
+            slot(name='sidebar-footer')
+    main.min-w-0.p-3(class='sm:p-4 lg:p-6' :class='props.ui?.main')
+        PageFrame.mx-auto(:padded='false' :show-brand='false' :title='props.title' :subtitle='props.subtitle' :variables='props.variables' :name='props.name' :width='props.width')
+            div.mb-4.flex.flex-wrap.items-center.justify-end.gap-2(v-if='$slots.actions')
+                slot(name='actions')
+            slot(:selected='selected')
+</template>
+
+<script setup lang='ts'>
+const { $languages } = useNuxtApp()
+const props = withDefaults(defineProps<{
+    title?: string | null,
+    subtitle?: string | null,
+    name?: string,
+    width?: string | number,
+    variables?: Record<string, unknown>,
+    navigationLabel?: string,
+    menus?: Array<{ id: string, label: string, icon?: string, badge?: string | number, disabled?: boolean, children?: Array<{ id: string, label: string, disabled?: boolean }> }>,
+    ui?: Partial<Record<'root' | 'sidebar' | 'main', string>>
+}>(), {
+    title: null,
+    subtitle: null,
+    name: '',
+    width: '80rem',
+    menus: () => [],
+    variables: () => ({})
+})
+const selected = defineModel<string>({ default: '' })
+const navigationId = useId()
+const expanded = ref('')
+const isMenuOpen = ref(false)
+
+watch(selected, id => {
+    isMenuOpen.value = false
+    const parent = props.menus.find(menu => menu.children?.some(child => child.id == id))
+    if(parent) expanded.value = parent.id
+}, { immediate: true })
+
+const emit = defineEmits<{ select: [id: string] }>()
+</script>

package/app/components/page/error.vue

@@ -0,0 +1,45 @@
+<template lang='pug'>
+section.w-full.px-2.py-6(:style="{ maxWidth: typeof props.width == 'number' ? `${props.width}px` : props.width }")
+    div.mb-6.flex.items-center.justify-between.gap-4
+        div.flex.min-w-0.items-center.gap-2
+            img.size-5.shrink-0(src='/_deplois/logo.svg' alt='')
+            span.text-base.font-semibold.paperlogy
+                span.text-primary deplois
+                span.ml-1(v-if='props.name') {{ props.name }}
+        span.text-xs.font-medium.tabular-nums.text-dimmed {{ props.statusCode }}
+    h1.text-xl.font-semibold.leading-snug.paperlogy {{ content.title }}
+    p.mt-2.text-sm.leading-6.text-muted {{ content.description }}
+    div.mt-6.flex.flex-wrap.items-center.gap-2
+        Button.bg-primary.text-white(:auto-loading='false' class='hover:bg-primary-700' @click="emit('home')") {{ messages.home }}
+        Button.text-muted(v-if='props.statusCode >= 500' :auto-loading='false' class='hover:bg-muted hover:text-default' @click="emit('retry')") {{ messages.retry }}
+    div.mt-4(v-if='$slots.default')
+        slot
+</template>
+
+<script setup lang='ts'>
+import { items } from '../../languages'
+
+const props = withDefaults(defineProps<{
+    statusCode?: number,
+    width?: number | string,
+    name?: string
+}>(), { statusCode: 500, width: '26rem', name: '' })
+
+const emit = defineEmits<{
+    home: [],
+    retry: []
+}>()
+
+const { $languages } = useNuxtApp()
+const messages = computed(() => ($languages?.items[$languages.value] ?? items['en-us']).components.error)
+const content = computed(() => {
+    switch (props.statusCode) {
+        case 401: return messages.value.unauthorized
+        case 404: return messages.value.notFound
+        case 500: return messages.value.server
+        default: return props.statusCode >= 500 ? messages.value.server : messages.value.unknown
+    }
+})
+
+useHead({ title: () => `${content.value.title} - deplois${props.name ? ` ${props.name}` : ''}` })
+</script>

package/app/components/page/frame.vue

@@ -0,0 +1,53 @@
+<template lang='pug'>
+section.w-full(:class="{ 'px-4 py-6': props.padded }" class='transition-[max-width] duration-[420ms] ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none' :style="{ maxWidth: typeof props.width == 'number' ? `${props.width}px` : props.width }")
+    div.mb-4(:class='props.ui?.header')
+        div.relative.flex.w-max.max-w-full.flex-col.items-start
+            TransitionGroup(class='relative flex w-max max-w-full items-center [&>.header-layout-move]:transition-transform [&>.header-layout-move]:duration-[420ms] [&>.header-layout-move]:ease-[cubic-bezier(0.22,1,0.36,1)] [&>.header-layout-leave-active]:absolute motion-reduce:[&>.header-layout-move]:duration-[1ms]' name='header-layout' tag='div')
+                div(class='min-h-8 shrink-0 transition-transform duration-[280ms] ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:duration-[1ms]' :class="{ 'translate-y-1': props.subtitle === null }" key='page-title')
+                    div.relative.flex.min-h-7.items-center.overflow-hidden.whitespace-nowrap
+                        TransitionGroup(class='relative w-max [&_.slide-up-leave-active]:absolute [&_.slide-up-leave-active]:left-0 [&_.slide-up-leave-active]:top-0 [&_.slide-up-enter-active]:transition-[transform,opacity] [&_.slide-up-enter-active]:duration-[380ms,280ms] [&_.slide-up-enter-active]:ease-[cubic-bezier(0.22,1,0.36,1),ease] [&_.slide-up-leave-active]:transition-[transform,opacity] [&_.slide-up-leave-active]:duration-[380ms,280ms] [&_.slide-up-leave-active]:ease-[cubic-bezier(0.22,1,0.36,1),ease] [&_.slide-up-enter-from]:translate-y-[115%] [&_.slide-up-enter-from]:opacity-0 [&_.slide-up-leave-to]:-translate-y-[115%] [&_.slide-up-leave-to]:opacity-0 motion-reduce:[&_.slide-up-enter-active]:duration-[1ms] motion-reduce:[&_.slide-up-leave-active]:duration-[1ms]' name='slide-up' tag='div')
+                            h3.font-bold.text-xl.paperlogy(:class='props.ui?.title' v-if='props.title !== null' :key='props.title')
+                                FormattedText(:value='props.title' :variables='props.variables')
+                        div.inline-block.w-20.h-2.rounded-full.bg-accented.animate-pulse.absolute(class='top-1/2 -translate-y-1/2' v-if='props.title === null')
+                div(class='mx-2 h-4 w-0.5 shrink-0 rounded-full bg-black dark:bg-white' key='divider' v-if='props.showBrand')
+                div.flex.shrink-0.items-center(key='brand' v-if='props.showBrand')
+                    div.w-5.h-5.mr-1
+                        <svg class='w-full' viewBox="0 0 29 29" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <rect width="28.35" height="28.44" rx="4.45" class='fill-white dark:fill-white'/>
+                            <path d="M23.9199 0C26.3661 0.000248215 28.3486 1.98989 28.3486 4.44434V24C28.3486 26.4544 26.366 28.4441 23.9199 28.4443H4.42969C1.98337 28.4443 6.57495e-05 26.4545 0 24V4.44434C0 1.98974 1.98333 0 4.42969 0H23.9199ZM7.47461 15.333C5.79288 15.3331 4.42975 16.7013 4.42969 18.3887V21.167C4.42992 22.8543 5.79299 24.2216 7.47461 24.2217H20.874C22.5558 24.2217 23.9197 22.8543 23.9199 21.167V18.3887C23.9199 16.7012 22.5559 15.333 20.874 15.333H7.47461ZM7.47461 4.44434C5.79284 4.44446 4.42969 5.81254 4.42969 7.5V10.2773C4.42969 11.9648 5.79284 13.3329 7.47461 13.333H20.874C22.5559 13.333 23.9199 11.9649 23.9199 10.2773V7.5C23.9199 5.81246 22.5559 4.44434 20.874 4.44434H7.47461Z" fill="#0088FF"/>
+                        </svg>
+                    h3.font-semibold.text-xl.paperlogy
+                        span(class='text-[#0088FF]') deplois
+                        span.ml-1.text-default(v-if='props.name') {{ props.name }}
+            div(class='-mt-0.5 w-max max-w-full min-w-0' key='subtitle')
+                div(class='grid min-w-0 transition-[grid-template-rows,opacity] duration-[280ms,200ms] ease-[cubic-bezier(0.22,1,0.36,1),ease]' :class="props.subtitle === null ? 'grid-rows-[0fr] opacity-0' : 'grid-rows-[1fr] opacity-100'")
+                    div(class='relative min-h-0 overflow-hidden [&_.subtitle-enter-active]:transition-[transform,opacity] [&_.subtitle-enter-active]:duration-[380ms,280ms] [&_.subtitle-enter-active]:ease-[cubic-bezier(0.22,1,0.36,1),ease] [&_.subtitle-leave-active]:absolute [&_.subtitle-leave-active]:inset-x-0 [&_.subtitle-leave-active]:top-0 [&_.subtitle-leave-active]:transition-[transform,opacity] [&_.subtitle-leave-active]:duration-[380ms,280ms] [&_.subtitle-leave-active]:ease-[cubic-bezier(0.22,1,0.36,1),ease] [&_.subtitle-enter-from]:translate-y-[115%] [&_.subtitle-enter-from]:opacity-0 [&_.subtitle-leave-to]:-translate-y-[115%] [&_.subtitle-leave-to]:opacity-0 motion-reduce:duration-[1ms] motion-reduce:[&_.subtitle-enter-active]:duration-[1ms] motion-reduce:[&_.subtitle-leave-active]:duration-[1ms]')
+                        Transition(name='subtitle')
+                            h3.font-regular.text-sm.paperlogy(:class='props.ui?.subtitle' v-if='props.subtitle !== null' :key='props.subtitle')
+                                FormattedText(:value='props.subtitle' :variables='props.variables')
+    div.min-w-0(v-if='$slots.default' :class='props.ui?.body')
+        slot
+</template>
+
+<script setup lang='ts'>
+const props = withDefaults(defineProps<{
+    ui?: Partial<Record<'header' | 'title' | 'subtitle' | 'body', string>>,
+    title?: string | null,
+    subtitle?: string | null,
+    width?: number | string,
+    name?: string,
+    showBrand?: boolean,
+    padded?: boolean,
+    variables?: Record<string, unknown>
+}>(), {
+    title: null,
+    subtitle: null,
+    width: '48.5rem',
+    name: '',
+    showBrand: true,
+    padded: true,
+    variables: () => ({})
+})
+
+useHead({ title: () => [props.title, ['deplois', props.name].filter(Boolean).join(' ')].filter(Boolean).join(' - ') })
+</script>

package/app/error.vue

@@ -0,0 +1,10 @@
+<template lang='pug'>
+main.flex.min-h-svh.items-center.justify-center.bg-default.p-4.text-default
+    PageError(:status-code='props.error.statusCode || 500' @home="clearError({ redirect: '/' })" @retry='reloadNuxtApp({ force: true })')
+</template>
+
+<script setup lang='ts'>
+import type { NuxtError } from '#app'
+
+const props = defineProps<{ error: NuxtError }>()
+</script>

package/app/languages/en-us.ts

@@ -0,0 +1,87 @@
+export default {
+    name: 'English',
+    input: {} as Record<string, unknown>,
+    components: {
+        error: {
+            home: 'Go to home',
+            retry: 'Try again',
+            unauthorized: { title: 'Authentication required', description: 'Your login may have expired, or you may not have access to this page.' },
+            notFound: { title: 'Page not found', description: 'Check the address. This page may have moved or been deleted.' },
+            server: { title: 'Something went wrong', description: 'We could not process your request. Please try again shortly.' },
+            unknown: { title: 'Unable to complete your request', description: 'Return home and try again.' }
+        },
+        common: {
+            loading: 'Loading…',
+            close: 'Close',
+            cancel: 'Cancel',
+            submit: 'Submit',
+            apply: 'Apply',
+            empty: 'No data to display.',
+            select: 'Select an option.'
+        },
+        dashboard: {
+            openMenu: 'Open menu',
+            closeMenu: 'Close menu',
+            workspace: 'Workspace',
+            navigation: 'Main navigation'
+        },
+        table: {
+            loading: 'Loading table…'
+        },
+        calendar: {
+            label: 'Choose a date'
+        },
+        breadcrumb: {
+            label: 'Breadcrumb'
+        },
+        chart: {
+            label: 'Chart'
+        },
+        editor: {
+            loading: 'Loading editor…',
+            label: 'Content',
+            toolbar: 'Text formatting',
+            placeholder: 'Enter content.',
+            linkAddress: 'Link address',
+            unlink: 'Remove link',
+            invalidLink: 'Enter a valid HTTP, HTTPS or email link.',
+            bold: 'Bold',
+            italic: 'Italic',
+            underline: 'Underline',
+            bulletList: 'Bullet list',
+            heading: 'Heading',
+            strike: 'Strikethrough',
+            orderedList: 'Numbered list',
+            blockquote: 'Quote',
+            codeBlock: 'Code block',
+            left: 'Align left',
+            center: 'Align center',
+            right: 'Align right',
+            link: 'Link',
+            clear: 'Clear formatting',
+            undo: 'Undo',
+            redo: 'Redo'
+        },
+        file: {
+            select: 'Choose files',
+            description: 'Choose files or drop them here.',
+            remove: 'Remove ${name}',
+            unsupported: 'This file type is not supported. ${name}',
+            tooLarge: 'The maximum file size is ${size} bytes. ${name}',
+            readError: 'Could not read the file. ${name}'
+        },
+        terms: {
+            label: 'I agree to all terms.',
+            link: 'View details',
+            required: 'Required',
+            optional: 'Optional',
+            toggle: 'Expand or collapse terms'
+        },
+        toast: {
+            dismiss: 'Dismiss notification'
+        },
+        modal: {
+            failed: 'Failed to submit. Please try again.'
+        }
+    }
+}

package/app/languages/index.ts

@@ -0,0 +1,15 @@
+import korean from './ko-kr'
+import english from './en-us'
+import japanese from './ja-jp'
+import { ko, en, ja } from '@nuxt/ui/locale'
+
+export const items = {
+    'ko-kr': korean,
+    'en-us': english,
+    'ja-jp': japanese
+}
+export const locales = {
+    'ko-kr': ko,
+    'en-us': en,
+    'ja-jp': ja
+}

package/app/languages/ja-jp.ts

@@ -0,0 +1,87 @@
+export default {
+    name: '日本語',
+    input: {} as Record<string, unknown>,
+    components: {
+        error: {
+            home: 'ホームに戻る',
+            retry: 'もう一度試す',
+            unauthorized: { title: '認証が必要です', description: 'ログインの有効期限が切れているか、このページへのアクセス権限がありません。' },
+            notFound: { title: 'ページが見つかりません', description: 'アドレスを確認してください。ページが移動または削除された可能性があります。' },
+            server: { title: '問題が発生しました', description: 'リクエストを処理できませんでした。しばらくしてからもう一度お試しください。' },
+            unknown: { title: 'リクエストを完了できませんでした', description: 'ホームに戻ってもう一度お試しください。' }
+        },
+        common: {
+            loading: '読み込み中です。',
+            close: '閉じる',
+            cancel: 'キャンセル',
+            submit: '送信',
+            apply: '適用',
+            empty: '表示するデータがありません。',
+            select: '選択してください。'
+        },
+        dashboard: {
+            openMenu: 'メニューを開く',
+            closeMenu: 'メニューを閉じる',
+            workspace: 'ワークスペース',
+            navigation: 'メインメニュー'
+        },
+        table: {
+            loading: '表を読み込み中です。'
+        },
+        calendar: {
+            label: '日付を選択'
+        },
+        breadcrumb: {
+            label: '現在の位置'
+        },
+        chart: {
+            label: 'チャート'
+        },
+        editor: {
+            loading: 'エディターを読み込み中です。',
+            label: '内容',
+            toolbar: 'テキスト書式',
+            placeholder: '内容を入力してください。',
+            linkAddress: 'リンク先',
+            unlink: 'リンク解除',
+            invalidLink: '有効なHTTP、HTTPSまたはメールリンクを入力してください。',
+            bold: '太字',
+            italic: '斜体',
+            underline: '下線',
+            bulletList: '箇条書き',
+            heading: '見出し',
+            strike: '取り消し線',
+            orderedList: '番号付きリスト',
+            blockquote: '引用',
+            codeBlock: 'コードブロック',
+            left: '左揃え',
+            center: '中央揃え',
+            right: '右揃え',
+            link: 'リンク',
+            clear: '書式をクリア',
+            undo: '元に戻す',
+            redo: 'やり直す'
+        },
+        file: {
+            select: 'ファイルを選択',
+            description: 'ファイルを選択するかここにドロップしてください。',
+            remove: '${name}を削除',
+            unsupported: '対応していないファイル形式です。${name}',
+            tooLarge: 'ファイルの最大サイズは${size}バイトです。${name}',
+            readError: 'ファイルを読み込めません。${name}'
+        },
+        terms: {
+            label: 'すべての利用規約に同意します。',
+            link: '詳細を見る',
+            required: '必須',
+            optional: '任意',
+            toggle: '規約を開く / 閉じる'
+        },
+        toast: {
+            dismiss: '通知を閉じる'
+        },
+        modal: {
+            failed: '送信できませんでした。もう一度お試しください。'
+        }
+    }
+}

package/app/languages/ko-kr.ts

@@ -0,0 +1,87 @@
+export default {
+    name: '한국어',
+    input: {} as Record<string, unknown>,
+    components: {
+        error: {
+            home: '홈으로 이동',
+            retry: '다시 시도',
+            unauthorized: { title: '인증이 필요해요', description: '로그인이 만료되었거나 이 페이지에 접근할 권한이 없어요.' },
+            notFound: { title: '페이지를 찾을 수 없어요', description: '주소가 올바른지 확인해 주세요. 페이지가 이동되거나 삭제되었을 수 있어요.' },
+            server: { title: '잠시 문제가 발생했어요', description: '요청을 처리하지 못했어요. 잠시 후 다시 시도해 주세요.' },
+            unknown: { title: '요청을 완료하지 못했어요', description: '홈으로 돌아가 다시 시도해 주세요.' }
+        },
+        common: {
+            loading: '불러오는 중입니다.',
+            close: '닫기',
+            cancel: '취소',
+            submit: '제출',
+            apply: '적용',
+            empty: '표시할 데이터가 없습니다.',
+            select: '선택하세요.'
+        },
+        dashboard: {
+            openMenu: '메뉴 열기',
+            closeMenu: '메뉴 닫기',
+            workspace: '워크스페이스',
+            navigation: '주 메뉴'
+        },
+        table: {
+            loading: '표를 불러오는 중입니다.'
+        },
+        calendar: {
+            label: '날짜 선택'
+        },
+        breadcrumb: {
+            label: '현재 위치'
+        },
+        chart: {
+            label: '차트'
+        },
+        editor: {
+            loading: '에디터를 불러오는 중입니다.',
+            label: '내용',
+            toolbar: '텍스트 서식',
+            placeholder: '내용을 입력하세요.',
+            linkAddress: '링크 주소',
+            unlink: '링크 해제',
+            invalidLink: '올바른 HTTP, HTTPS 또는 이메일 링크를 입력하세요.',
+            bold: '굵게',
+            italic: '기울임',
+            underline: '밑줄',
+            bulletList: '목록',
+            heading: '제목',
+            strike: '취소선',
+            orderedList: '번호 목록',
+            blockquote: '인용',
+            codeBlock: '코드 블록',
+            left: '왼쪽 정렬',
+            center: '가운데 정렬',
+            right: '오른쪽 정렬',
+            link: '링크',
+            clear: '서식 지우기',
+            undo: '실행 취소',
+            redo: '다시 실행'
+        },
+        file: {
+            select: '파일 선택',
+            description: '파일을 선택하거나 여기에 끌어다 놓으세요.',
+            remove: '${name} 삭제',
+            unsupported: '지원하지 않는 파일 형식입니다. ${name}',
+            tooLarge: '최대 파일 크기는 ${size}바이트입니다. ${name}',
+            readError: '파일을 읽을 수 없습니다. ${name}'
+        },
+        terms: {
+            label: '모든 이용 약관에 동의합니다.',
+            link: '자세히 보기',
+            required: '필수',
+            optional: '선택',
+            toggle: '약관 펼치기 / 접기'
+        },
+        toast: {
+            dismiss: '알림 닫기'
+        },
+        modal: {
+            failed: '제출하지 못했습니다. 다시 시도해 주세요.'
+        }
+    }
+}

package/app/plugins/modal.plugin.ts

@@ -0,0 +1,103 @@
+import { reactive } from 'vue'
+import { defineNuxtPlugin } from '#app'
+
+export interface ModalFile {
+    name: string
+    size: number | string
+    type: string
+    data: string
+}
+export type ModalValue = string | boolean | Array<ModalFile>
+export interface ModalForm {
+    type: 'input' | 'select' | 'file' | 'toggle'
+    title: string
+    name: string
+    placeholder?: string
+    options?: Array<{ name: string, value: string }>
+    value?: ModalValue
+}
+export type ModalCallback = (data?: Record<string, ModalValue>) => unknown | Promise<unknown>
+export interface ModalItem {
+    srl: number
+    type: 'alert' | 'form'
+    title: string
+    content: string
+    forms?: Array<ModalForm>
+    isForced: boolean
+    callback?: ModalCallback
+    buttonText?: { cancel: string, continue?: string }
+    isActive: boolean
+    isSubmitting: boolean
+    error: string
+}
+
+export class Modal {
+    public modals: Array<ModalItem> = reactive([])
+    private sequence: number = 0
+
+    constructor(private readonly failureMessage?: () => string) {}
+
+    public add(type: 'alert' | 'form', title: string, content: string, forms?: Array<ModalForm>, isForced: boolean = false, callback?: ModalCallback, buttonText?: ModalItem['buttonText']): number {
+        const names = new Set<string>()
+        const fields = forms?.map(form => {
+            if (!form.name || names.has(form.name)) throw new Error('Form field names must be unique and non-empty.')
+            if (form.type === 'select' && !form.options) throw new Error('Select options are required.')
+            names.add(form.name)
+            return {
+                ...form,
+                options: form.options?.map(option => ({ ...option })),
+                value: Array.isArray(form.value) ? form.value.map(file => ({ ...file }))
+                    : form.value ?? (form.type === 'toggle' ? false : form.type === 'file' ? [] : '')
+            }
+        })
+        const srl = this.sequence++
+        this.modals.push({
+            srl: srl,
+            type: type,
+            title: title,
+            content: content,
+            forms: fields,
+            isForced: isForced,
+            callback: callback,
+            buttonText: buttonText,
+            isActive: true,
+            isSubmitting: false,
+            error: ''
+        })
+        return srl
+    }
+
+    public remove(srl: number, force: boolean = false): void {
+        const index = this.modals.findIndex(modal => modal.srl === srl)
+        const modal = this.modals[index]
+        if (!modal || modal.isSubmitting || (modal.isForced && !force)) return
+        this.modals.splice(index, 1)
+    }
+
+    public async confirm(srl: number): Promise<void> {
+        const modal = this.modals.find(modal => modal.srl === srl)
+        if (!modal || modal.isSubmitting) return
+        modal.isSubmitting = true
+        modal.error = ''
+        try {
+            const data = modal.forms ? Object.fromEntries(modal.forms.map(form => [form.name, form.value ?? ''])) : undefined
+            await modal.callback?.(data)
+            modal.isSubmitting = false
+            this.remove(srl, true)
+        } catch (error) {
+            modal.error = error instanceof Error ? error.message : this.failureMessage?.() ?? 'Failed to submit. Please try again.'
+        } finally {
+            modal.isSubmitting = false
+        }
+    }
+
+    public clear(): void {
+        this.modals.splice(0)
+    }
+}
+
+export default defineNuxtPlugin(nuxtApp => {
+    const modal = new Modal(() => nuxtApp.$languages.items[nuxtApp.$languages.value].components.modal.failed)
+    if (import.meta.hot) import.meta.hot.dispose(() => modal.clear())
+    return { provide: { modal: modal } }
+})

package/app/plugins/module.ts

@@ -0,0 +1,49 @@
+import { vMaska } from 'maska/vue'
+
+class Loader {
+    public contents: Array<string> = reactive([])
+    addLoad(content: string): () => void {
+        this.contents.push(content)
+
+        let removed = false
+        return () => {
+            if(removed) return
+            removed = true
+            const index = this.contents.indexOf(content)
+            if(index !== -1) this.contents.splice(index, 1)
+        }
+    }
+}
+
+export default defineNuxtPlugin((nuxtApp): {
+    provide: {
+        loadingView: Loader,
+
+        copy: (text: string) => void,
+        solveButton: ($event: Event) => void,
+        JSON: {
+            encode: (object: object) => string,
+            decode: (text: string) => object
+        }
+    }
+} => {
+    nuxtApp.vueApp.directive('maska', vMaska)
+
+    return {
+        provide: {
+            loadingView: reactive(new Loader()),
+            copy: function (text: string) {
+                navigator.clipboard.writeText(text)
+            },
+            solveButton: ($event: Event) => {
+                const target = $event.target
+                const element = target instanceof Element ? target.closest('button') : null
+                element?.dispatchEvent(new Event('loading-end'))
+            },
+            JSON: {
+                encode: (object: object) => { return JSON.stringify(object) },
+                decode: (text: string) => { return JSON.parse(text) }
+            }
+        }
+    }
+})