Initial commit

2026-05-03 07:26:12 +00:00
commit 776d374b59
57 changed files with 15968 additions and 0 deletions
@@ -0,0 +1,164 @@
+<template>
+  <div class="page-grid">
+    <UCard variant="soft">
+      <template #header>
+        <div class="stack">
+          <p class="section-kicker">{{ t('home.hero.kicker') }}</p>
+          <h2>{{ t('home.hero.title') }}</h2>
+          <p>{{ t('home.hero.description') }}</p>
+        </div>
+      </template>
+
+      <div class="hero-actions">
+        <UButton @click="cycleTheme">
+          {{ t('home.hero.actions.theme') }}
+        </UButton>
+        <UButton color="neutral" variant="soft" @click="toggleLocale">
+          {{ t('home.hero.actions.locale') }}
+        </UButton>
+        <UButton color="neutral" variant="outline" @click="writeLog">
+          {{ t('home.hero.actions.log') }}
+        </UButton>
+      </div>
+    </UCard>
+
+    <UCard variant="soft">
+      <template #header>
+        <div class="stack">
+          <p class="section-kicker">{{ t('home.form.kicker') }}</p>
+          <h2>{{ t('home.form.title') }}</h2>
+        </div>
+      </template>
+
+      <form class="stack" @submit.prevent="submitDemo">
+        <UFormField :label="t('home.form.fields.name')">
+          <UInput
+            v-model="form.name"
+            name="name"
+            autocomplete="name"
+            class="w-full"
+          />
+        </UFormField>
+        <UFormField :label="t('home.form.fields.role')">
+          <USelect
+            v-model="form.role"
+            :items="roleOptions"
+            value-key="value"
+            label-key="label"
+            class="w-full"
+          />
+        </UFormField>
+        <UButton type="submit">{{ t('home.form.submit') }}</UButton>
+      </form>
+    </UCard>
+
+    <UCard variant="soft">
+      <template #header>
+        <div class="stack">
+          <p class="section-kicker">{{ t('home.status.kicker') }}</p>
+          <h2>{{ t('home.status.title') }}</h2>
+        </div>
+      </template>
+
+      <div class="stack">
+        <UAlert
+          color="info"
+          variant="soft"
+          :title="t('home.status.theme')"
+          :description="resolvedThemeLabel"
+        />
+        <UAlert
+          color="success"
+          variant="soft"
+          :title="t('home.status.locale')"
+          :description="locale.toUpperCase()"
+        />
+        <UAlert
+          color="neutral"
+          variant="soft"
+          :title="t('home.status.logger')"
+          :description="t('home.status.loggerReady')"
+        />
+      </div>
+    </UCard>
+
+    <UCard variant="soft">
+      <template #header>
+        <div class="stack">
+          <p class="section-kicker">{{ t('home.components.kicker') }}</p>
+          <h2>{{ t('home.components.title') }}</h2>
+          <p>{{ t('home.components.description') }}</p>
+        </div>
+      </template>
+
+      <div class="component-showcase">
+        <UButton size="sm">{{ t('home.components.buttons.small') }}</UButton>
+        <UButton>{{ t('home.components.buttons.medium') }}</UButton>
+        <UButton color="neutral" variant="soft">{{ t('home.components.buttons.secondary') }}</UButton>
+        <UButton color="neutral" variant="outline">{{ t('home.components.buttons.ghost') }}</UButton>
+      </div>
+    </UCard>
+  </div>
+</template>
+
+<script setup lang="ts">
+const { locale, setLocale, t } = useI18n()
+const logger = useLogger()
+const colorMode = useColorMode()
+const hydrated = ref(false)
+
+const form = reactive({
+  name: '',
+  role: 'developer'
+})
+
+const roleOptions = computed(() => [
+  { label: t('roles.developer'), value: 'developer' },
+  { label: t('roles.designer'), value: 'designer' },
+  { label: t('roles.maintainer'), value: 'maintainer' }
+])
+
+const resolvedThemeLabel = computed(() => {
+  const safePreference = hydrated.value ? colorMode.preference : 'system'
+  const preferenceText = t(`theme.preference.${safePreference}`)
+  const resolvedMode = safePreference === 'system' ? 'system' : colorMode.value
+  const resolvedText = t(`theme.resolved.${resolvedMode}`)
+
+  return `${preferenceText} / ${resolvedText}`
+})
+
+onMounted(() => {
+  hydrated.value = true
+})
+
+function toggleLocale() {
+  const nextLocale = locale.value === 'sk' ? 'en' : 'sk'
+
+  setLocale(nextLocale)
+  logger.info('Locale changed', { locale: nextLocale })
+}
+
+function cycleTheme() {
+  const nextTheme =
+    colorMode.preference === 'light'
+      ? 'dark'
+      : colorMode.preference === 'dark'
+        ? 'system'
+        : 'light'
+
+  colorMode.preference = nextTheme
+
+  logger.info('Theme changed', { theme: nextTheme })
+}
+
+function writeLog() {
+  logger.debug('Template action executed', {
+    locale: locale.value,
+    theme: colorMode.value
+  })
+}
+
+function submitDemo() {
+  logger.info('Demo form submitted', { ...form })
+}
+</script>