cinqcinqdev-seo 0.1.71 → 0.1.73

package/dist/runtime/pages/admin/setup.vue

@@ -7,11 +7,13 @@ const { settings, loading, saving, load, save } = useAdminSettings();
 const sections = useAdminSections();
 const aiContext = ref("");
 const presets = ref({});
+const selectedTheme = ref("");
 const saved = ref(false);
 onMounted(async () => {
   await load();
   aiContext.value = settings.value?.ai_context || "";
   presets.value = JSON.parse(JSON.stringify(settings.value?.section_presets || {}));
+  selectedTheme.value = settings.value?.theme || "";
 });
 const setPreset = (sectionType, field, value) => {
   if (!presets.value[sectionType]) presets.value[sectionType] = {};
@@ -20,8 +22,10 @@ const setPreset = (sectionType, field, value) => {
 const getPreset = (sectionType, field, fallback) => {
   return presets.value[sectionType]?.[field] ?? fallback ?? "";
 };
+const canSave = computed(() => !!selectedTheme.value);
 const saveAll = async () => {
-  await save({ ai_context: aiContext.value, section_presets: presets.value });
+  if (!canSave.value) return;
+  await save({ ai_context: aiContext.value, section_presets: presets.value, theme: selectedTheme.value });
   saved.value = true;
   setTimeout(() => {
     saved.value = false;
@@ -43,7 +47,7 @@ const hasStyleOptions = (conf) => styleFields.some((f) => conf.fields?.[f]?.opti
         </div>
         <button
           @click="saveAll"
-          :disabled="saving"
+          :disabled="saving || !canSave"
           class="px-5 py-2.5 bg-slate-900 text-white text-sm font-semibold rounded-xl hover:bg-slate-700 disabled:opacity-50 transition-all flex items-center gap-2"
         >
           <svg v-if="!saving && !saved" class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -61,6 +65,77 @@ const hasStyleOptions = (conf) => styleFields.some((f) => conf.fields?.[f]?.opti
 
       <div v-else class="space-y-6">
 
+        <!-- ── Theme Selection (required) ─────────────────────────────── -->
+        <div class="bg-white border rounded-2xl p-8" :class="!selectedTheme ? 'border-amber-300 ring-1 ring-amber-200' : 'border-slate-200'">
+          <div class="flex items-center gap-3 mb-2">
+            <span class="text-xl">🎨</span>
+            <h2 class="text-base font-bold text-slate-900">Thème de design <span class="text-amber-500 text-sm font-normal ml-1">(requis)</span></h2>
+          </div>
+          <p class="text-xs text-slate-500 mb-6 leading-relaxed">
+            Choisissez le thème visuel qui s'appliquera à toutes les sections de votre site. Cette sélection est obligatoire.
+          </p>
+          <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+            <!-- CinqCinq theme -->
+            <button
+              @click="selectedTheme = 'cinqcinq'"
+              :class="[
+  'text-left p-5 border-2 rounded-xl transition-all',
+  selectedTheme === 'cinqcinq' ? 'border-slate-900 bg-slate-50' : 'border-slate-200 hover:border-slate-400'
+]"
+            >
+              <div class="flex items-center gap-3 mb-3">
+                <div class="w-8 h-8 rounded-lg bg-slate-900 flex items-center justify-center">
+                  <span class="text-white text-xs font-black">55</span>
+                </div>
+                <div>
+                  <div class="font-bold text-slate-900 text-sm">CinqCinq</div>
+                  <div class="text-[10px] text-slate-400 uppercase tracking-wider">Original</div>
+                </div>
+                <div v-if="selectedTheme === 'cinqcinq'" class="ml-auto w-5 h-5 rounded-full bg-slate-900 flex items-center justify-center">
+                  <svg class="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg>
+                </div>
+              </div>
+              <p class="text-xs text-slate-500 leading-relaxed">Design contemporain avec coins arrondis, cartes avec ombres et animations fluides. Moderne et accessible.</p>
+              <!-- Mini preview -->
+              <div class="mt-4 flex gap-1.5">
+                <div class="h-6 flex-1 rounded-lg bg-slate-100"></div>
+                <div class="h-6 flex-1 rounded-lg bg-slate-200"></div>
+                <div class="h-6 w-12 rounded-lg bg-slate-900"></div>
+              </div>
+            </button>
+
+            <!-- Swiss Style theme -->
+            <button
+              @click="selectedTheme = 'swiss-style'"
+              :class="[
+  'text-left p-5 border-2 rounded-xl transition-all',
+  selectedTheme === 'swiss-style' ? 'border-slate-900 bg-slate-50' : 'border-slate-200 hover:border-slate-400'
+]"
+            >
+              <div class="flex items-center gap-3 mb-3">
+                <div class="w-8 h-8 bg-black flex items-center justify-center">
+                  <span class="text-white text-xs font-black tracking-tighter">SW</span>
+                </div>
+                <div>
+                  <div class="font-bold text-slate-900 text-sm">Swiss Style</div>
+                  <div class="text-[10px] text-slate-400 uppercase tracking-wider">Typographic</div>
+                </div>
+                <div v-if="selectedTheme === 'swiss-style'" class="ml-auto w-5 h-5 rounded-full bg-slate-900 flex items-center justify-center">
+                  <svg class="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg>
+                </div>
+              </div>
+              <p class="text-xs text-slate-500 leading-relaxed">Style typographique suisse. Grilles strictes, bordures 1px, angles droits et hiérarchie typographique forte.</p>
+              <!-- Mini preview -->
+              <div class="mt-4 flex gap-1.5">
+                <div class="h-6 flex-1 border border-slate-300"></div>
+                <div class="h-6 flex-1 border border-slate-300 bg-slate-50"></div>
+                <div class="h-6 w-12 bg-black"></div>
+              </div>
+            </button>
+          </div>
+          <p v-if="!selectedTheme" class="text-xs text-amber-600 mt-3">Sélectionnez un thème pour pouvoir enregistrer.</p>
+        </div>
+
         <!-- ── AI Context ───────────────────────────────────────────────── -->
         <div class="bg-white border border-slate-200 rounded-2xl p-8">
           <div class="flex items-center gap-3 mb-2">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cinqcinqdev-seo",
-  "version": "0.1.71",
+  "version": "0.1.73",
   "description": "A reusable Nuxt 3 admin CMS module with visual page editor powered by Supabase",
   "license": "MIT",
   "module": "./dist/module.mjs",