cinqcinqdev-seo 0.1.25 → 0.1.27

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=3.0.0"
   },
-  "version": "0.1.25",
+  "version": "0.1.27",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "unknown"

package/dist/runtime/composables/useAdminSections.js

@@ -225,6 +225,8 @@ export const DEFAULT_SECTIONS = {
         question: { type: "text", label: "Question", i18n: true },
         answer: { type: "textarea", label: "Answer", i18n: true }
       } },
+      bgColor: { type: "color", label: "Background" },
+      textColor: { type: "color", label: "Text Color" },
       spacing: { type: "cards", label: "Espacement", options: spacingOptions },
       radius: { type: "cards", label: "Arrondis", options: radiusOptions }
     }

package/dist/runtime/pages/admin/editor/[id].vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, watch, onMounted, definePageMeta, useRoute, useRuntimeConfig, useAsyncData, useHead, useSupabaseClient, useNuxtApp } from "#imports";
+import { ref, computed, watch, onMounted, triggerRef, definePageMeta, useRoute, useRuntimeConfig, useAsyncData, useHead, useSupabaseClient, useNuxtApp } from "#imports";
 import { useAdminSections } from "../../../composables/useAdminSections";
 import { useAdminSettings, useAdminBasePath } from "#imports";
 definePageMeta({ layout: false });
@@ -15,10 +15,11 @@ const adminSettings = useAdminSettings();
 const basePath = useAdminBasePath();
 onMounted(() => adminSettings.load());
 const resolveSection = (type) => vueApp.component(`Sections${type}`) || vueApp.component(type) || null;
-const { data: page } = await useAsyncData(`admin-edit-${pageId}`, async () => {
+const { data: _rawPage } = await useAsyncData(`admin-edit-${pageId}`, async () => {
   const { data } = await supabase.from(table).select("*").eq("id", pageId).maybeSingle();
   return data;
 });
+const page = ref(_rawPage.value);
 useHead({ title: computed(() => page.value?.title ? `${page.value.title} \u2014 \xC9diteur` : "\xC9diteur \u2014 Admin") });
 const isLeftSidebarOpen = ref(true);
 const isRightSidebarOpen = ref(true);
@@ -111,12 +112,14 @@ const setI18nProp = (fieldName, lang, newValue) => {
   }
   obj[lang] = newValue;
   props[fieldName] = obj;
+  triggerRef(page);
 };
 const getI18nVal = (val, lang) => {
   if (!val) return "";
   if (typeof val === "string") return lang === "fr" ? val : "";
   return val[lang] || "";
 };
+const trigger = () => triggerRef(page);
 const setI18nVal = (obj, key, lang, newValue) => {
   const current = obj[key];
   const i18nObj = { fr: "", ar: "", en: "" };
@@ -127,6 +130,7 @@ const setI18nVal = (obj, key, lang, newValue) => {
   }
   i18nObj[lang] = newValue;
   obj[key] = i18nObj;
+  triggerRef(page);
 };
 const tagDepth = (tag) => {
   const n = parseInt(tag.replace("h", ""));
@@ -638,7 +642,8 @@ const savePage = async () => {
                   <span class="absolute -top-1 right-0 text-[6px] font-black uppercase text-[#3d35ff]/40">{{ langLabel(editingLang) }}</span>
                   <input :value="getI18nProp(name, editingLang)" @input="setI18nProp(name, editingLang, $event.target.value)" :dir="editingLang === 'ar' ? 'rtl' : 'ltr'" class="w-full bg-gray-50 rounded-xl p-3 text-[10px] font-bold outline-none ring-1 ring-gray-100 focus:ring-[#3d35ff]" />
                 </div>
-                <input v-else v-model="page.content[selectedBlockIndex].props[name]" class="w-full bg-gray-50 rounded-xl p-3 text-[10px] font-bold outline-none ring-1 ring-gray-100 focus:ring-[#3d35ff]" />
+                <input v-else :value="page.content[selectedBlockIndex].props[name]" @input="page.content[selectedBlockIndex].props[name] = $event.target.value;
+  trigger()" class="w-full bg-gray-50 rounded-xl p-3 text-[10px] font-bold outline-none ring-1 ring-gray-100 focus:ring-[#3d35ff]" />
               </template>
 
               <!-- Textarea i18n -->
@@ -647,18 +652,21 @@ const savePage = async () => {
                   <span class="absolute -top-1 right-0 text-[6px] font-black uppercase text-[#3d35ff]/40">{{ langLabel(editingLang) }}</span>
                   <textarea :value="getI18nProp(name, editingLang)" @input="setI18nProp(name, editingLang, $event.target.value)" :dir="editingLang === 'ar' ? 'rtl' : 'ltr'" rows="3" class="w-full bg-gray-50 rounded-xl p-3 text-[10px] outline-none ring-1 ring-gray-100 focus:ring-[#3d35ff]"></textarea>
                 </div>
-                <textarea v-else v-model="page.content[selectedBlockIndex].props[name]" rows="3" class="w-full bg-gray-50 rounded-xl p-3 text-[10px] outline-none ring-1 ring-gray-100"></textarea>
+                <textarea v-else :value="page.content[selectedBlockIndex].props[name]" @input="page.content[selectedBlockIndex].props[name] = $event.target.value;
+  trigger()" rows="3" class="w-full bg-gray-50 rounded-xl p-3 text-[10px] outline-none ring-1 ring-gray-100"></textarea>
               </template>
 
               <!-- Select -->
-              <select v-else-if="field.type === 'select'" v-model="page.content[selectedBlockIndex].props[name]" class="w-full bg-gray-50 rounded-xl p-3 text-[10px] font-bold ring-1 ring-gray-100 outline-none">
+              <select v-else-if="field.type === 'select'" :value="page.content[selectedBlockIndex].props[name]" @change="page.content[selectedBlockIndex].props[name] = $event.target.value;
+  trigger()" class="w-full bg-gray-50 rounded-xl p-3 text-[10px] font-bold ring-1 ring-gray-100 outline-none">
                 <option v-for="opt in field.options" :key="opt.value" :value="opt.value">{{ opt.label }}</option>
               </select>
 
               <!-- Cards -->
               <div v-else-if="field.type === 'cards'" class="grid grid-cols-3 gap-2">
                 <button v-for="opt in field.options" :key="opt.value"
-                  @click="page.content[selectedBlockIndex].props[name] = opt.value"
+                  @click="page.content[selectedBlockIndex].props[name] = opt.value;
+  trigger()"
                   :class="[
   'p-2.5 rounded-xl border-2 text-center transition-all',
   page.content[selectedBlockIndex].props[name] === opt.value ? 'border-[#3d35ff] bg-blue-50/50 text-[#3d35ff]' : 'border-gray-100 text-gray-400 hover:border-gray-200'
@@ -670,14 +678,17 @@ const savePage = async () => {
 
               <!-- Color -->
               <div v-else-if="field.type === 'color'" class="flex gap-2 bg-gray-50 p-2 rounded-xl ring-1 ring-gray-100">
-                <button v-for="c in ['#3d35ff', '#ffffff', '#000000', '#F9F9FB']" :key="c" @click="page.content[selectedBlockIndex].props[name] = c" class="w-5 h-5 rounded-full border border-black/5" :style="{ background: c }"></button>
-                <input v-model="page.content[selectedBlockIndex].props[name]" class="flex-1 bg-transparent text-[9px] font-mono outline-none" />
+                <button v-for="c in ['#3d35ff', '#ffffff', '#000000', '#F9F9FB']" :key="c" @click="page.content[selectedBlockIndex].props[name] = c;
+  trigger()" class="w-5 h-5 rounded-full border border-black/5" :style="{ background: c }"></button>
+                <input :value="page.content[selectedBlockIndex].props[name]" @input="page.content[selectedBlockIndex].props[name] = $event.target.value;
+  trigger()" class="flex-1 bg-transparent text-[9px] font-mono outline-none" />
               </div>
 
               <!-- List -->
               <div v-else-if="field.type === 'list'" class="space-y-4">
                 <div v-for="(item, idx) in page.content[selectedBlockIndex].props[name] || []" :key="idx" class="p-4 bg-gray-50 rounded-2xl relative border">
-                  <button @click="page.content[selectedBlockIndex].props[name].splice(idx, 1)" class="absolute top-2 right-2 text-red-400 text-[8px]">✕</button>
+                  <button @click="page.content[selectedBlockIndex].props[name].splice(idx, 1);
+  trigger()" class="absolute top-2 right-2 text-red-400 text-[8px]">✕</button>
                   <div v-for="(subField, subName) in field.itemFields" :key="subName" class="mb-2">
                     <label class="text-[7px] font-black uppercase opacity-30">{{ subField.label }}</label>
                     <div v-if="subField.type === 'image'" class="mt-1 space-y-1.5">
@@ -687,7 +698,8 @@ const savePage = async () => {
                         <button @click="openGallery(item, subName)" class="flex-1 text-[8px] font-black uppercase bg-white px-2 py-1.5 rounded-lg shadow-sm border">⊞ Galerie</button>
                       </div>
                     </div>
-                    <select v-else-if="subField.type === 'select'" v-model="item[subName]" class="w-full bg-white rounded-lg p-2 text-[10px] font-bold outline-none shadow-sm border">
+                    <select v-else-if="subField.type === 'select'" :value="item[subName]" @change="item[subName] = $event.target.value;
+  trigger()" class="w-full bg-white rounded-lg p-2 text-[10px] font-bold outline-none shadow-sm border">
                       <option v-for="opt in subField.options" :key="opt.value" :value="opt.value">{{ opt.label }}</option>
                     </select>
                     <template v-else-if="subField.i18n">
@@ -701,16 +713,20 @@ const savePage = async () => {
                           :dir="editingLang === 'ar' ? 'rtl' : 'ltr'"
                           :placeholder="langLabel(editingLang)"
                           class="flex-1 bg-white rounded-lg p-2 text-[10px] font-bold outline-none shadow-sm" />
-                        <button @click="item[subName].splice(fi, 1)" class="text-red-400 text-[8px] px-1 shrink-0">✕</button>
+                        <button @click="item[subName].splice(fi, 1);
+  trigger()" class="text-red-400 text-[8px] px-1 shrink-0">✕</button>
                       </div>
                       <button @click="if (!item[subName]) item[subName] = [];
-  item[subName].push({ fr: '', ar: '', en: '' })" class="w-full py-1.5 border border-dashed rounded-lg text-[8px] font-black text-gray-400 hover:border-gray-400 transition">+ Fonctionnalité</button>
+  item[subName].push({ fr: '', ar: '', en: '' });
+  trigger()" class="w-full py-1.5 border border-dashed rounded-lg text-[8px] font-black text-gray-400 hover:border-gray-400 transition">+ Fonctionnalité</button>
                     </div>
-                    <input v-else v-model="item[subName]" class="w-full bg-white rounded-lg p-2 text-[10px] font-bold outline-none shadow-sm" />
+                    <input v-else :value="item[subName]" @input="item[subName] = $event.target.value;
+  trigger()" class="w-full bg-white rounded-lg p-2 text-[10px] font-bold outline-none shadow-sm" />
                   </div>
                 </div>
                 <button @click="if (!page.content[selectedBlockIndex].props[name]) page.content[selectedBlockIndex].props[name] = [];
-  page.content[selectedBlockIndex].props[name].push({})" class="w-full py-2 border-2 border-dashed rounded-xl text-[8px] font-black text-gray-400">+ AJOUTER</button>
+  page.content[selectedBlockIndex].props[name].push({});
+  trigger()" class="w-full py-2 border-2 border-dashed rounded-xl text-[8px] font-black text-gray-400">+ AJOUTER</button>
               </div>
             </div>
           </div>

package/package.json

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