@deplois/template 0.0.0-stage → 0.0.2

package/app/components/feedback/modal.vue

@@ -0,0 +1,93 @@
+<template lang='pug'>
+UModal(
+    v-if='modal'
+    :key='modal.srl'
+    :open='!!activeModal'
+    :title='modal.title'
+    :description='modal.content'
+    :dismissible='!modal.isForced && !modal.isSubmitting'
+    :close='!modal.isForced && !modal.isSubmitting'
+    :ui="{ content: 'max-w-lg rounded-md', description: 'whitespace-pre-wrap', footer: 'justify-end gap-2', ...props.ui }"
+    @update:open='close'
+    @after:leave='modal = activeModal'
+)
+    template(v-if='$slots.header' #header)
+        slot(name='header' :modal='modal' :close='() => $modal.remove(modal.srl)')
+    template(#body)
+        form.space-y-4(:id='`modal-form-${modal.srl}`' @submit.prevent='$modal.confirm(modal.srl)')
+            slot(:modal='modal' :confirm='() => $modal.confirm(modal.srl)')
+                template(v-for='input in modal.forms' :key='input.name')
+                    slot(name='field' :field='input' :modal='modal')
+                        UFormField(:label='input.title' :name='input.name')
+                            Input.w-full(
+                                v-if="input.type === 'input'"
+                                :model-value="typeof input.value === 'string' ? input.value : ''"
+                                :placeholder='input.placeholder'
+                                :type="input.name.includes('password') ? 'password' : 'text'"
+                                :disabled='modal.isSubmitting'
+                                @update:model-value='input.value = String($event)'
+                            )
+                            USelect.w-full(
+                                v-else-if="input.type === 'select'"
+                                :model-value="typeof input.value === 'string' ? input.value : ''"
+                                :items='input.options'
+                                label-key='name'
+                                value-key='value'
+                                :placeholder='input.placeholder'
+                                :disabled='modal.isSubmitting'
+                                @update:model-value='input.value = $event'
+                            )
+                            Toggle(
+                                v-else-if="input.type === 'toggle'"
+                                :model-value='input.value === true'
+                                :disabled='modal.isSubmitting'
+                                @update:model-value='input.value = $event'
+                            )
+                            template(v-else-if="input.type === 'file'")
+                                FileUpload(:disabled='modal.isSubmitting' @upload='upload(input, $event)')
+                                FileList.mt-2(v-if='Array.isArray(input.value)' :files='input.value' :disabled='modal.isSubmitting' @remove='input.value.splice($event, 1)')
+            p.text-sm.text-error(v-if='modal.error' role='alert') {{ modal.error }}
+    template(#footer)
+        slot(name='footer' :modal='modal' :confirm='() => $modal.confirm(modal.srl)' :close='() => $modal.remove(modal.srl)')
+            Button(
+                v-if="!modal.isForced && modal.type === 'form'"
+                :auto-loading='false'
+                :class="props.ui?.cancel ?? 'text-muted hover:bg-muted hover:text-default'"
+                :disabled='modal.isSubmitting'
+                @click='$modal.remove(modal.srl)'
+            ) {{ modal.buttonText?.cancel || $languages.items[$languages.value].components.common.cancel }}
+            Button(
+                :auto-loading='false'
+                :class="props.ui?.confirm ?? 'bg-primary text-white hover:bg-primary-700'"
+                type='submit'
+                :form='`modal-form-${modal.srl}`'
+                :loading='modal.isSubmitting'
+                :disabled='modal.isSubmitting'
+            ) {{ modal.type === 'alert' ? (modal.buttonText?.cancel || $languages.items[$languages.value].components.common.close) : (modal.buttonText?.continue || $languages.items[$languages.value].components.common.submit) }}
+</template>
+
+<script setup lang='ts'>
+import type { ModalFile, ModalForm } from '../../plugins/modal.plugin'
+
+const props = defineProps<{ ui?: Partial<Record<'content' | 'header' | 'body' | 'footer' | 'title' | 'description' | 'close' | 'overlay' | 'confirm' | 'cancel', string>> }>()
+const { $languages, $modal } = useNuxtApp()
+const activeModal = computed(() => $modal.modals.filter(item => item.isActive).at(-1))
+const modal = shallowRef(activeModal.value)
+
+watch(activeModal, item => {
+    if(item) modal.value = item
+})
+
+function close (open: boolean) {
+    if(!open && modal.value) $modal.remove(modal.value.srl)
+}
+
+function upload (form: ModalForm, file: ModalFile) {
+    if(modal.value?.isSubmitting) return
+    if(!Array.isArray(form.value)) form.value = []
+    form.value.push(file)
+}
+
+onBeforeUnmount(() => $modal.clear())
+</script>
+

package/app/components/feedback/toast.vue

@@ -0,0 +1,79 @@
+<template lang='pug'>
+div.fixed.z-50.flex.flex-col.justify-end.overflow-y-auto.p-1(:class="props.ui?.root ?? 'bottom-3 left-3 right-3 max-h-[calc(100svh-1.5rem)] md:left-auto md:right-5 md:w-96'" aria-live='polite' aria-relevant='additions')
+    TransitionGroup.relative.flex.flex-col.gap-2(name='toast' tag='div')
+        div.flex.w-full.items-start.gap-3.rounded-md.p-4.shadow-md(
+            v-for='(toast, index) in $toast.toasts'
+            :key='toast.srl'
+            :class="(typeof props.ui?.item == 'string' ? props.ui.item : props.ui?.item?.[toast.type]) ?? ['border bg-default text-default shadow-black/10 dark:shadow-black/30', borders[toast.type]]"
+            :style='{ zIndex: index + 1 }'
+            :role="toast.type == 'danger' ? 'alert' : 'status'"
+        )
+            slot(:toast='toast' :close='() => $toast.remove(toast.srl)')
+                slot(name='icon' :toast='toast')
+                    Icon.shrink-0(:name='icons[toast.type]' :class="props.ui?.icon ?? 'mt-0.5 size-5 text-muted'")
+                slot(name='message' :toast='toast')
+                    p.min-w-0.flex-1.whitespace-pre-wrap.break-words.text-sm.leading-5(:class='props.ui?.message') {{ toast.message }}
+                slot(name='close' :toast='toast' :close='() => $toast.remove(toast.srl)')
+                    button.flex.size-6.shrink-0.cursor-pointer.items-center.justify-center.rounded-md.transition-colors(type='button' :aria-label='$languages.items[$languages.value].components.toast.dismiss' :class="props.ui?.close ?? 'text-muted hover:bg-muted hover:text-default'" @click='$toast.remove(toast.srl)')
+                        Icon.size-4(name='i-lucide-x')
+</template>
+
+<script setup lang='ts'>
+import type { ToastType } from '../../plugins/toast.plugin'
+
+const props = defineProps<{
+    ui?: Partial<Record<'root' | 'icon' | 'message' | 'close', string>> & {
+        item?: string | Partial<Record<ToastType, string>>
+    }
+}>()
+const { $languages, $toast } = useNuxtApp()
+
+const borders: Record<ToastType, string> = {
+    info: 'border-info',
+    success: 'border-success',
+    warning: 'border-warning',
+    danger: 'border-error'
+}
+
+const icons: Record<ToastType, string> = {
+    info: 'i-lucide-info',
+    success: 'i-lucide-circle-check',
+    warning: 'i-lucide-triangle-alert',
+    danger: 'i-lucide-circle-x'
+}
+
+onBeforeUnmount(() => $toast.clear())
+</script>
+
+<style scoped>
+.toast-enter-active,
+.toast-leave-active,
+.toast-move {
+    transition: opacity 180ms ease, transform 300ms cubic-bezier(.22, 1, .36, 1);
+}
+
+.toast-enter-from {
+    opacity: 0;
+    transform: translateY(1rem) scale(.98);
+}
+
+.toast-leave-to {
+    opacity: 0;
+    transform: translateY(.5rem) scale(.98);
+}
+
+.toast-leave-active {
+    position: absolute;
+    right: 0;
+    left: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .toast-enter-active,
+    .toast-leave-active,
+    .toast-move {
+        transition: none;
+    }
+}
+</style>
+

package/app/components/feedback/tooltip.vue

@@ -0,0 +1,9 @@
+<template lang='pug'>
+UTooltip(:delay-duration='200' 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/file/list.vue

@@ -0,0 +1,36 @@
+<template lang='pug'>
+div.grid.w-full.gap-2
+    slot(v-if='!props.files.length' name='empty')
+    div.flex.min-w-0.items-center.gap-3.rounded-md.p-3(v-for='(file, index) in props.files' :key='file.id ?? index' :class="props.ui?.item ?? 'border border-accented bg-default'")
+        slot(:file='file' :index='index' :remove='() => remove(index)')
+            slot(name='preview' :file='file' :index='index')
+                div.flex.size-10.shrink-0.items-center.justify-center.overflow-hidden.rounded-md(:class="props.ui?.preview ?? 'bg-muted text-muted'")
+                    img.size-full.object-cover(v-if="file.type.startsWith('image/') && (file.data || file.url)" :src='file.data || file.url' :alt='file.name')
+                    Icon.size-5(v-else name='i-lucide-file-text')
+            div.min-w-0.flex-1
+                slot(name='name' :file='file' :index='index')
+                    p.truncate.text-sm.font-medium(:class='props.ui?.name') {{ file.name }}
+                slot(name='description' :file='file' :index='index')
+                    p.mt-1.text-xs(:class="props.ui?.description ?? 'text-muted'") {{ typeof file.size == 'number' ? `${(file.size / 1024).toLocaleString(undefined, { maximumFractionDigits: 1 })} KB` : file.size }}
+            slot(name='actions' :file='file' :index='index' :remove='() => remove(index)')
+                button.flex.size-8.shrink-0.cursor-pointer.items-center.justify-center.rounded-md.transition-colors(v-if='props.removable' type='button' :disabled='props.disabled' :aria-label="$languages.items[$languages.value].components.file.remove.replace('${name}', file.name)" class='disabled:cursor-not-allowed disabled:opacity-50' :class="props.ui?.remove ?? 'text-muted hover:bg-muted hover:text-default'" @click='remove(index)')
+                    Icon.size-4(name='i-lucide-x')
+</template>
+
+<script setup lang='ts'>
+import type { FileItem } from '../../types/file'
+
+const { $languages } = useNuxtApp()
+
+const props = withDefaults(defineProps<{
+    files: Array<FileItem>,
+    removable?: boolean,
+    disabled?: boolean,
+    ui?: Partial<Record<'item' | 'preview' | 'name' | 'description' | 'remove', string>>
+}>(), { removable: true, disabled: false })
+const emit = defineEmits<{ remove: [index: number] }>()
+
+function remove (index: number) {
+    if(!props.disabled && props.removable) emit('remove', index)
+}
+</script>

package/app/components/file/upload.vue

@@ -0,0 +1,114 @@
+<template lang='pug'>
+div.w-full
+    div.relative.flex.w-full.flex-col.items-center.justify-center.gap-2.rounded-md.border.border-dashed.p-4.text-center.transition-colors(
+        :class="[props.ui?.dropzone ?? 'min-h-32 border-accented bg-default', { 'cursor-not-allowed opacity-50': props.disabled, 'ring-2 ring-current': dragCount > 0 && !props.disabled }]"
+        @dragenter.prevent='dragCount++'
+        @dragover.prevent
+        @dragleave.prevent='dragCount = Math.max(0, dragCount - 1)'
+        @drop.prevent='drop'
+    )
+        input.sr-only(:id='inputId' ref='fileInput' type='file' :accept='props.accept' :multiple='props.multiple' :disabled='props.disabled' :aria-label='(props.label ?? $languages.items[$languages.value].components.file.select)' tabindex='-1' @change='select')
+        slot(:open='open' :disabled='props.disabled' :is-reading='isReading' :is-dragging='dragCount > 0')
+            Icon.size-6(:name="isReading ? 'i-lucide-loader-circle' : 'i-lucide-upload'" :class="[props.ui?.icon ?? 'text-muted', { 'animate-spin': isReading }]")
+            button.cursor-pointer.text-sm.font-medium(type='button' :disabled='props.disabled' class='disabled:cursor-not-allowed' :class="props.ui?.button ?? 'text-default hover:text-muted'" @click='open') {{ (props.label ?? $languages.items[$languages.value].components.file.select) }}
+            p.text-xs(:class="props.ui?.description ?? 'text-muted'") {{ (props.description ?? $languages.items[$languages.value].components.file.description) }}
+    slot(name='error' :error='error')
+        p.mt-1.text-xs(v-if='error' role='alert' :class="props.ui?.error ?? 'text-error'") {{ error }}
+</template>
+
+<script setup lang='ts'>
+import type { FileItem } from '../../types/file'
+
+const { $languages } = useNuxtApp()
+
+const props = withDefaults(defineProps<{
+    accept?: string,
+    multiple?: boolean,
+    maxSize?: number,
+    disabled?: boolean,
+    label?: string,
+    description?: string,
+    ui?: Partial<Record<'dropzone' | 'icon' | 'button' | 'description' | 'error', string>>
+}>(), {
+    accept: 'image/*,.pdf,.doc,.docx,.hwp',
+    multiple: true,
+    maxSize: 10 * 1024 * 1024,
+    disabled: false
+})
+const emit = defineEmits<{ upload: [file: FileItem & { data: string, size: number }], error: [error: string] }>()
+const inputId = useId()
+const fileInput = ref<HTMLInputElement | null>(null)
+const error = ref<string | null>(null)
+const dragCount = ref(0)
+const isReading = ref(false)
+const readers = new Set<FileReader>()
+const acceptedTypes = computed(() => props.accept.split(',').map(type => type.trim().toLowerCase()).filter(Boolean))
+const fileTypes: Record<string, string> = {
+    jpg: 'image/jpeg', jpeg: 'image/jpeg', png: 'image/png', gif: 'image/gif',
+    webp: 'image/webp', avif: 'image/avif', svg: 'image/svg+xml', heic: 'image/heic',
+    pdf: 'application/pdf', doc: 'application/msword',
+    docx: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', hwp: 'application/x-hwp'
+}
+
+function open () {
+    if(!props.disabled) fileInput.value?.click()
+}
+
+function select (event: Event) {
+    const input = event.target as HTMLInputElement
+    readFiles(input.files)
+    input.value = ''
+}
+
+function drop (event: DragEvent) {
+    dragCount.value = 0
+    readFiles(event.dataTransfer?.files)
+}
+
+function readFiles (files?: FileList | null) {
+    if(props.disabled || !files) return
+    error.value = null
+    for(const file of Array.from(files).slice(0, props.multiple ? undefined : 1)) {
+        const name = file.name.toLowerCase()
+        const type = file.type && file.type !== 'application/octet-stream'
+            ? file.type.toLowerCase() : fileTypes[name.split('.').pop() ?? ''] ?? 'application/octet-stream'
+        if(acceptedTypes.value.length && !acceptedTypes.value.some(accept => accept.startsWith('.')
+            ? name.endsWith(accept) : accept.endsWith('/*') ? type.startsWith(accept.slice(0, -1)) : type === accept)) {
+            error.value = $languages.items[$languages.value].components.file.unsupported.replace('${name}', file.name).replace('${size}', String(props.maxSize))
+            emit('error', error.value)
+            continue
+        }
+        if(file.size > props.maxSize) {
+            error.value = $languages.items[$languages.value].components.file.tooLarge.replace('${name}', file.name).replace('${size}', String(props.maxSize))
+            emit('error', error.value)
+            continue
+        }
+
+        const reader = new FileReader()
+        readers.add(reader)
+        isReading.value = true
+        reader.onload = () => {
+            if(typeof reader.result === 'string') emit('upload', { name: file.name, size: file.size, type: type, data: reader.result })
+        }
+        reader.onerror = () => {
+            error.value = $languages.items[$languages.value].components.file.readError.replace('${name}', file.name).replace('${size}', String(props.maxSize))
+            emit('error', error.value)
+        }
+        reader.onloadend = () => {
+            readers.delete(reader)
+            isReading.value = readers.size > 0
+        }
+        reader.readAsDataURL(file)
+    }
+}
+
+onBeforeUnmount(() => {
+    for(const reader of readers) {
+        reader.onload = null
+        reader.onerror = null
+        reader.onloadend = null
+        reader.abort()
+    }
+    readers.clear()
+})
+</script>

package/app/components/form/calendar.vue

@@ -0,0 +1,10 @@
+<template lang='pug'>
+UCalendar(:locale='$languages.locale.code' :calendar-label='$languages.items[$languages.value].components.calendar.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/form/check-box.vue

@@ -0,0 +1,64 @@
+<template lang='pug'>
+button.relative.flex.size-4.shrink-0.cursor-pointer.items-center.justify-center.rounded.border.transition-colors(
+    type='button'
+    role='checkbox'
+    :aria-checked='modelValue'
+    :disabled='props.disabled'
+    :class="modelValue ? (props.ui?.checked ?? 'border-primary bg-primary text-white') : (props.ui?.unchecked ?? 'border-accented bg-default text-transparent')"
+    class='focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current disabled:cursor-not-allowed disabled:opacity-50'
+    @click='toggle'
+)
+    slot(:checked='modelValue')
+        i.check-mark.pointer-events-none.absolute.block.origin-left(:class="[props.ui?.icon, { active: modelValue }]" class='left-[5.83px] top-[4.14px] size-[14px] -rotate-45 scale-[0.8]' aria-hidden='true')
+</template>
+
+<script setup lang='ts'>
+const props = defineProps<{ disabled?: boolean, ui?: Partial<Record<'checked' | 'unchecked' | 'icon', string>> }>()
+const modelValue = defineModel<boolean>({ default: false })
+const emit = defineEmits<{ update: [value: boolean] }>()
+
+function toggle () {
+    if(props.disabled) return
+    modelValue.value = !modelValue.value
+    emit('update', modelValue.value)
+}
+</script>
+
+<style scoped>
+.check-mark::before,
+.check-mark::after {
+    content: '';
+    display: block;
+    background: currentColor;
+}
+
+.check-mark::before {
+    width: 2.1px;
+    height: 0;
+}
+
+.check-mark::after {
+    width: 0;
+    height: 2.1px;
+}
+
+.check-mark.active::before {
+    height: 35%;
+    margin-bottom: -.1px;
+    border-radius: 4px 4px 0 0;
+    transition: height 300ms cubic-bezier(.895, .03, .685, .22);
+}
+
+.check-mark.active::after {
+    width: 80%;
+    border-radius: 0 4px 4px 0;
+    transition: width 300ms 300ms cubic-bezier(.165, .84, .44, 1);
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .check-mark.active::before,
+    .check-mark.active::after {
+        transition: none;
+    }
+}
+</style>

package/app/components/form/editor.vue

@@ -0,0 +1,124 @@
+<template lang='pug'>
+ClientOnly(fallback-tag='div' :fallback='$languages.items[$languages.value].components.editor.loading')
+    div.overflow-hidden.rounded-md.border.border-accented.bg-default.text-default(v-bind='$attrs' :class="[{ 'opacity-50': props.disabled }, props.ui?.root]" class='focus-within:border-primary focus-within:ring-1 focus-within:ring-primary')
+        div.flex.flex-wrap.gap-1.border-b.border-default.bg-muted.p-2(v-if='!props.readonly' role='group' :aria-label='(props.toolbarLabel ?? $languages.items[$languages.value].components.editor.toolbar)' :class='props.ui?.toolbar')
+            Tooltip(v-for='action in actions' :key='action.name' :text='action.label')
+                Button.w-8.px-0(:auto-loading='false' :disabled='props.disabled || !editor || action.disabled' :aria-label='action.label' :aria-pressed='action.active' :class="action.active ? 'bg-primary/10 text-primary' : 'text-muted hover:bg-elevated hover:text-default'" @click='action.run')
+                    Icon.size-4.shrink-0(:name='action.icon')
+            slot(name='toolbar' :editor='editor')
+        form.flex.flex-wrap.items-start.gap-2.border-b.border-default.p-2(v-if='showLink && !props.readonly' @submit.prevent='setLink')
+            div.min-w-0.flex-1
+                Input(v-model='link' type='text' inputmode='url' placeholder='https://example.com' :aria-label='$languages.items[$languages.value].components.editor.linkAddress' :disabled='props.disabled' :aria-invalid='!!linkError')
+                p.mt-1.text-xs.text-error(v-if='linkError' role='alert') {{ $languages.items[$languages.value].components.editor.invalidLink }}
+            Button.bg-primary.text-white(:auto-loading='false' type='submit' :disabled='props.disabled' class='hover:bg-primary-700') {{ $languages.items[$languages.value].components.common.apply }}
+            Button.text-muted(:auto-loading='false' :disabled='props.disabled' @click="link = ''; setLink()") {{ $languages.items[$languages.value].components.editor.unlink }}
+            Button.text-muted(:auto-loading='false' @click='showLink = false') {{ $languages.items[$languages.value].components.common.cancel }}
+        div.relative(:class='props.ui?.content')
+            p.pointer-events-none.absolute.left-4.top-4.text-sm.text-dimmed(v-if='editor?.isEmpty && (props.placeholder ?? $languages.items[$languages.value].components.editor.placeholder)' aria-hidden='true') {{ (props.placeholder ?? $languages.items[$languages.value].components.editor.placeholder) }}
+            EditorContent(:editor='editor')
+            div.min-h-40.p-4(v-if='!editor' aria-busy='true')
+                Loader.size-4.text-primary
+        div.border-t.border-default.px-4.py-2.text-xs.text-muted(v-if='$slots.footer')
+            slot(name='footer' :editor='editor')
+</template>
+
+<script setup lang='ts'>
+import { useEditor, EditorContent } from '@tiptap/vue-3'
+import StarterKit from '@tiptap/starter-kit'
+import TextAlign from '@tiptap/extension-text-align'
+
+const { $languages } = useNuxtApp()
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(defineProps<{
+    mode?: 'simple' | 'detailed',
+    disabled?: boolean,
+    readonly?: boolean,
+    placeholder?: string,
+    label?: string,
+    toolbarLabel?: string,
+    ui?: Partial<Record<'root' | 'toolbar' | 'content', string>>
+}>(), { mode: 'simple' })
+const modelValue = defineModel<string>({ default: '' })
+const revision = ref(0)
+const showLink = ref(false)
+const link = ref('')
+const linkError = ref(false)
+let selection = { from: 0, to: 0 }
+const editor = useEditor({
+    content: modelValue.value,
+    editable: !props.disabled && !props.readonly,
+    extensions: [StarterKit.configure({ link: { openOnClick: false, protocols: ['http', 'https', 'mailto'] } }), TextAlign.configure({ types: ['heading', 'paragraph'] })],
+    editorProps: {
+        attributes: {
+            role: 'textbox',
+            'aria-multiline': 'true',
+            'aria-label': (props.label ?? $languages.items[$languages.value].components.editor.label),
+            'aria-disabled': String(!!props.disabled),
+            'aria-readonly': String(!!props.readonly),
+            class: 'min-h-40 p-4 text-sm leading-6 outline-none break-words [&_p]:min-h-6 [&_p+p]:mt-2 [&_h1]:text-2xl [&_h2]:text-xl [&_h3]:text-lg [&_h1]:font-bold [&_h2]:font-semibold [&_h3]:font-semibold [&_ul]:list-disc [&_ul]:pl-6 [&_ol]:list-decimal [&_ol]:pl-6 [&_blockquote]:border-l-2 [&_blockquote]:border-primary [&_blockquote]:pl-4 [&_blockquote]:text-muted [&_pre]:bg-muted [&_pre]:rounded-md [&_pre]:p-3 [&_pre]:overflow-x-auto [&_a]:text-primary [&_a]:underline [&_hr]:border-default [&_hr]:my-4'
+        }
+    },
+    onUpdate: ({ editor }) => { modelValue.value = editor.getHTML() },
+    onTransaction: () => { revision.value++ },
+    onCreate: ({ editor }) => {
+        if(editor.getHTML() != modelValue.value) editor.commands.setContent(modelValue.value, { emitUpdate: false })
+    }
+})
+watch(modelValue, value => {
+    if(editor.value && value != editor.value.getHTML()) editor.value.commands.setContent(value, { emitUpdate: false })
+})
+watch(() => [props.disabled, props.readonly, (props.label ?? $languages.items[$languages.value].components.editor.label)], () => {
+    editor.value?.setEditable(!props.disabled && !props.readonly)
+    editor.value?.setOptions({ editorProps: { attributes: { ...editor.value.options.editorProps.attributes, 'aria-label': (props.label ?? $languages.items[$languages.value].components.editor.label), 'aria-disabled': String(!!props.disabled), 'aria-readonly': String(!!props.readonly) } } })
+    if(props.disabled || props.readonly) showLink.value = false
+})
+const actions = computed(() => {
+    revision.value
+    const instance = editor.value
+    if(!instance) return []
+    const items = [
+        { name: 'bold', label: $languages.items[$languages.value].components.editor.bold, icon: 'i-lucide-bold', active: instance.isActive('bold'), disabled: false, run: () => instance.chain().focus().toggleBold().run() },
+        { name: 'italic', label: $languages.items[$languages.value].components.editor.italic, icon: 'i-lucide-italic', active: instance.isActive('italic'), disabled: false, run: () => instance.chain().focus().toggleItalic().run() },
+        { name: 'underline', label: $languages.items[$languages.value].components.editor.underline, icon: 'i-lucide-underline', active: instance.isActive('underline'), disabled: false, run: () => instance.chain().focus().toggleUnderline().run() },
+        { name: 'bulletList', label: $languages.items[$languages.value].components.editor.bulletList, icon: 'i-lucide-list', active: instance.isActive('bulletList'), disabled: false, run: () => instance.chain().focus().toggleBulletList().run() }
+    ]
+    if(props.mode == 'detailed') items.push(
+        { name: 'heading', label: $languages.items[$languages.value].components.editor.heading, icon: 'i-lucide-heading-2', active: instance.isActive('heading', { level: 2 }), disabled: false, run: () => instance.chain().focus().toggleHeading({ level: 2 }).run() },
+        { name: 'strike', label: $languages.items[$languages.value].components.editor.strike, icon: 'i-lucide-strikethrough', active: instance.isActive('strike'), disabled: false, run: () => instance.chain().focus().toggleStrike().run() },
+        { name: 'orderedList', label: $languages.items[$languages.value].components.editor.orderedList, icon: 'i-lucide-list-ordered', active: instance.isActive('orderedList'), disabled: false, run: () => instance.chain().focus().toggleOrderedList().run() },
+        { name: 'blockquote', label: $languages.items[$languages.value].components.editor.blockquote, icon: 'i-lucide-quote', active: instance.isActive('blockquote'), disabled: false, run: () => instance.chain().focus().toggleBlockquote().run() },
+        { name: 'codeBlock', label: $languages.items[$languages.value].components.editor.codeBlock, icon: 'i-lucide-code', active: instance.isActive('codeBlock'), disabled: false, run: () => instance.chain().focus().toggleCodeBlock().run() },
+        { name: 'left', label: $languages.items[$languages.value].components.editor.left, icon: 'i-lucide-align-left', active: instance.isActive({ textAlign: 'left' }), disabled: false, run: () => instance.chain().focus().setTextAlign('left').run() },
+        { name: 'center', label: $languages.items[$languages.value].components.editor.center, icon: 'i-lucide-align-center', active: instance.isActive({ textAlign: 'center' }), disabled: false, run: () => instance.chain().focus().setTextAlign('center').run() },
+        { name: 'right', label: $languages.items[$languages.value].components.editor.right, icon: 'i-lucide-align-right', active: instance.isActive({ textAlign: 'right' }), disabled: false, run: () => instance.chain().focus().setTextAlign('right').run() },
+        { name: 'link', label: $languages.items[$languages.value].components.editor.link, icon: 'i-lucide-link', active: instance.isActive('link'), disabled: false, run: () => {
+            selection = { from: instance.state.selection.from, to: instance.state.selection.to }
+            link.value = instance.getAttributes('link').href || ''
+            linkError.value = false
+            showLink.value = !showLink.value
+            return true
+        } },
+        { name: 'clear', label: $languages.items[$languages.value].components.editor.clear, icon: 'i-lucide-remove-formatting', active: false, disabled: false, run: () => instance.chain().focus().unsetAllMarks().clearNodes().run() }
+    )
+    items.push(
+        { name: 'undo', label: $languages.items[$languages.value].components.editor.undo, icon: 'i-lucide-undo', active: false, disabled: !instance.can().undo(), run: () => instance.chain().focus().undo().run() },
+        { name: 'redo', label: $languages.items[$languages.value].components.editor.redo, icon: 'i-lucide-redo', active: false, disabled: !instance.can().redo(), run: () => instance.chain().focus().redo().run() }
+    )
+    return items
+})
+function setLink () {
+    if(props.disabled || props.readonly || !editor.value) return
+    const href = link.value.trim()
+    if(href && !/^(https?:\/\/|mailto:)/i.test(href)) {
+        linkError.value = true
+        return
+    }
+    const command = editor.value.chain().focus().setTextSelection(selection).extendMarkRange('link')
+    if(href) command.setLink({ href }).run()
+    else command.unsetLink().run()
+    showLink.value = false
+}
+defineExpose({ editor })
+</script>

package/app/components/form/input-error.vue

@@ -0,0 +1,59 @@
+<template lang='pug'>
+div(:class="[{ 'input-error': hasError }, props.ui?.root]" @input="error = null" @change="error = null")
+    slot(:error='error' :clear='() => error = null')
+    Transition(name='input-error-message')
+        div(v-if='hasError')
+            slot(name='message' :error='error')
+                p.mt-1.text-xs(:id='messageId' role='alert' :class="props.ui?.message ?? 'text-error'") {{ error }}
+</template>
+
+<script setup lang='ts'>
+const props = defineProps<{
+    ui?: Partial<Record<'root' | 'message', string>>,
+    messageId?: string
+}>()
+
+const error = defineModel<string | null>('error', { default: null })
+const hasError = computed(() => typeof error.value === 'string' && error.value.length > 0)
+</script>
+
+<style scoped>
+.input-error :deep(input) {
+    border-color: var(--ui-error) !important;
+    border-width: 1px !important;
+    box-shadow: 0 0 0 1px var(--ui-error);
+}
+
+.input-error :deep([data-input-root]),
+.input-error :deep(input:not([data-input-root] input)) {
+    animation: input-error-shake 280ms cubic-bezier(.36, .07, .19, .97);
+}
+
+.input-error-message-enter-active,
+.input-error-message-leave-active {
+    transition: opacity 160ms ease, transform 160ms ease;
+}
+
+.input-error-message-enter-from,
+.input-error-message-leave-to {
+    opacity: 0;
+    transform: translateY(-.25rem);
+}
+
+@keyframes input-error-shake {
+    15%, 85% { transform: translateX(-.2rem); }
+    30%, 70% { transform: translateX(.2rem); }
+    45%, 55% { transform: translateX(-.1rem); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .input-error :deep([data-input-root]),
+    .input-error :deep(input),
+    .input-error-message-enter-active,
+    .input-error-message-leave-active {
+        animation: none;
+        transition: none;
+    }
+}
+</style>
+

package/app/components/form/input.vue

@@ -0,0 +1,43 @@
+<template lang='pug'>
+div.relative.w-full(data-input-root :class='props.ui?.root')
+    div.absolute.inset-y-0.left-3.flex.items-center(v-if='props.icon || $slots.leading' :class="props.ui?.leading ?? 'text-muted'")
+        slot(name='leading')
+            Icon.pointer-events-none.size-4(v-if='props.icon' :name='props.icon')
+    input.h-8.w-full.rounded-md.border.px-3.text-sm.outline-none.transition-colors(
+        v-bind='mergeProps(languageAttributes, $attrs)'
+        v-model='modelValue'
+        v-maska
+        :data-maska='props.vMask'
+        :class="[props.ui?.input ?? 'border-accented bg-default text-default placeholder:text-dimmed focus:border-current focus:ring-1 focus:ring-current', { 'pl-9': props.icon || $slots.leading, 'pr-9': $slots.trailing }]"
+        class='disabled:cursor-not-allowed disabled:opacity-50'
+    )
+    div.absolute.inset-y-0.right-3.flex.items-center(v-if='$slots.trailing' :class="props.ui?.trailing ?? 'text-muted'")
+        slot(name='trailing')
+</template>
+
+<script setup lang='ts'>
+import { mergeProps } from 'vue'
+import { vMaska } from 'maska/vue'
+
+const { $languages } = useNuxtApp()
+
+defineOptions({ inheritAttrs: false })
+const props = defineProps<{
+    icon?: string,
+    vMask?: string,
+    languageKey?: string,
+    ui?: Partial<Record<'root' | 'input' | 'leading' | 'trailing', string>>
+}>()
+const modelValue = defineModel<string>({ default: '' })
+
+const languageAttributes = computed<Record<string, unknown>>(() => {
+    if(!props.languageKey) return {}
+    let attributes: unknown = $languages.items[$languages.value]?.input
+    for(const key of props.languageKey.split('.').filter(Boolean)) {
+        if(attributes == null || typeof attributes !== 'object' || Array.isArray(attributes)) return {}
+        attributes = (attributes as Record<string, unknown>)[key]
+    }
+    return attributes != null && typeof attributes === 'object' && !Array.isArray(attributes)
+        ? attributes as Record<string, unknown> : {}
+})
+</script>

package/app/components/form/select.vue

@@ -0,0 +1,10 @@
+<template lang='pug'>
+USelect(size='md' :placeholder='$languages.items[$languages.value].components.common.select' 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>