Initialer Laravel Commit für BetiX

resources/js/components/AppearanceTabs.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import { usePrimaryColor } from '@/composables/usePrimaryColor';
+
+const active = ref<'appearance'|'theme'|'layout'>('appearance');
+
+// Accent color state using global composable
+const { primaryColor, updatePrimaryColor } = usePrimaryColor();
+
+// Local hex input model to allow free typing without instantly rejecting partial values
+const hexInput = ref<string>(primaryColor.value || '#ff007a');
+
+watch(primaryColor, (val) => {
+  if (val && val.toLowerCase() !== hexInput.value.toLowerCase()) {
+    hexInput.value = val;
+  }
+});
+
+function onPickColor(e: Event) {
+  const value = (e.target as HTMLInputElement).value;
+  hexInput.value = value;
+  updatePrimaryColor(value);
+}
+
+function onHexInput(e: Event) {
+  const value = (e.target as HTMLInputElement).value.trim();
+  hexInput.value = value;
+}
+
+function applyHex() {
+  // Accept #RGB or #RRGGBB; auto-add leading # if missing
+  let v = hexInput.value.trim();
+  if (!v.startsWith('#')) v = `#${v}`;
+  const isValid = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(v);
+  if (isValid) {
+    hexInput.value = v.toLowerCase();
+    updatePrimaryColor(hexInput.value);
+  }
+}
+
+function resetToDefault() {
+  const def = '#ff007a';
+  hexInput.value = def;
+  updatePrimaryColor(def);
+}
+</script>
+
+<template>
+  <div class="appearance-tabs">
+    <div class="tabs">
+      <button :class="{active: active==='appearance'}" @click="active='appearance'">Appearance</button>
+      <button :class="{active: active==='theme'}" @click="active='theme'">Theme</button>
+      <button :class="{active: active==='layout'}" @click="active='layout'">Layout</button>
+    </div>
+    <div class="panel">
+      <div v-if="active==='appearance'" class="section">
+        <div class="row">
+          <div class="label"><i data-lucide="palette"></i> Accent color</div>
+          <div class="controls">
+            <input class="color" type="color" :value="primaryColor" @input="onPickColor" />
+            <input class="hex" type="text" v-model="hexInput" @input="onHexInput" placeholder="#ff007a" />
+            <button class="apply" @click="applyHex">Apply</button>
+            <button class="reset" @click="resetToDefault">Reset</button>
+          </div>
+        </div>
+        <div class="hint">Tipp: Du kannst entweder den Farbwähler benutzen oder einen HEX‑Wert eingeben (z. B. #00aaff).</div>
+        <div class="preview">
+          <div class="swatch" :style="{ background: primaryColor }"></div>
+          <span class="code">{{ primaryColor }}</span>
+        </div>
+      </div>
+      <p v-else-if="active==='theme'">Theme settings coming soon.</p>
+      <p v-else>Layout settings coming soon.</p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.appearance-tabs { background:#0a0a0a; border:1px solid #151515; border-radius:12px; padding:12px; }
+.tabs { display:flex; gap:8px; margin-bottom:10px; }
+.tabs button { background:#0a0a0a; border:1px solid #1a1a1a; color:#fff; padding:8px 10px; border-radius:10px; font-size:12px; font-weight:900; cursor:pointer; }
+.tabs button.active { background:#121212; border-color:#333; }
+.panel { color:#aaa; font-size:12px; }
+.section { display:flex; flex-direction:column; gap:10px; }
+.row { display:flex; align-items:center; justify-content:space-between; gap:10px; }
+.label { display:flex; align-items:center; gap:8px; color:#fff; font-weight:800; font-size:13px; }
+.controls { display:flex; align-items:center; gap:8px; }
+.color { width: 34px; height: 24px; border:1px solid #222; background:#111; border-radius:6px; padding:0; cursor:pointer; }
+.hex { width:120px; background:#0a0a0a; border:1px solid #1a1a1a; color:#fff; padding:6px 8px; border-radius:8px; font-size:12px; font-weight:700; }
+.apply, .reset { background:#0a0a0a; border:1px solid #1a1a1a; color:#fff; padding:6px 10px; border-radius:8px; font-size:12px; font-weight:800; cursor:pointer; }
+.apply:hover, .reset:hover { border-color:#333; }
+.hint { font-size:12px; color:#888; }
+.preview { display:flex; align-items:center; gap:10px; }
+.swatch { width:28px; height:18px; border-radius:6px; border:1px solid #222; }
+.code { font-size:12px; color:#ccc; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; }
+</style>