Refactor app architecture and clean local artifacts

2026-06-24 23:43:14 +02:00
parent 17134b3b82
commit fef1d36fe8
274 changed files with 37724 additions and 6065 deletions
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+  modelValue: boolean
+  label: string
+  activeLabel?: string
+  inactiveLabel?: string
+  disabled?: boolean
+  tone?: 'violet' | 'amber'
+}>(), {
+  activeLabel: 'Aktiv',
+  inactiveLabel: 'Inaktiv',
+  disabled: false,
+  tone: 'violet',
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+}>()
+
+function toggle() {
+  if (!props.disabled) {
+    emit('update:modelValue', !props.modelValue)
+  }
+}
+</script>
+
+<template>
+  <button
+    type="button"
+    role="switch"
+    :aria-checked="modelValue"
+    :aria-label="label"
+    :disabled="disabled"
+    class="inline-flex items-center gap-3 rounded-2xl border px-4 py-3 text-sm font-semibold transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-400 disabled:cursor-not-allowed disabled:opacity-60"
+    :class="tone === 'amber' && modelValue ? 'border-amber-200 bg-white/75 text-amber-800' : 'border-violet-100 bg-violet-50/60 text-violet-800'"
+    @click="toggle"
+  >
+    <span>{{ modelValue ? activeLabel : inactiveLabel }}</span>
+    <span
+      class="relative h-7 w-12 rounded-full transition"
+      :class="modelValue ? tone === 'amber' ? 'bg-amber-500' : 'bg-violet-600' : 'bg-slate-200'"
+    >
+      <span class="absolute left-1 top-1 h-5 w-5 rounded-full bg-white shadow transition" :class="{ 'translate-x-5': modelValue }"></span>
+    </span>
+  </button>
+</template>