cinqcinqdev-seo 1.0.13 → 1.0.15

package/dist/module.json

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

package/dist/runtime/components/admin-cms/DynamicRenderer.vue

@@ -43,7 +43,7 @@ const resolveSection = (type) => {
         <div v-if="selectedId === index" class="absolute top-0 left-0 bg-blue-500 text-white text-[10px] px-2 py-1 z-20 font-bold uppercase">
           {{ block.type }}
         </div>
-        <component :is="resolveSection(block.type)" v-bind="block.props" />
+        <component :is="resolveSection(block.type)" v-bind="block.props" data-section-root />
       </div>
     </template>
 

package/dist/runtime/composables/useAdminSections.js

@@ -1264,6 +1264,7 @@ const _buildStyleCss = (s, id) => {
   if (s.buttonBg) btn.push(`background-color:${s.buttonBg} !important`);
   if (s.buttonColor) btn.push(`color:${s.buttonColor} !important`);
   if (btn.length) parts.push(`${btnSel}{${btn.join(";")}}`);
+  const srSel = `${id} [data-section-root]`;
   const bl = [];
   if (s.backgroundColor) bl.push(`background-color:${s.backgroundColor} !important`);
   if (s.gradientFrom || s.gradientTo) {
@@ -1285,7 +1286,7 @@ const _buildStyleCss = (s, id) => {
   if (s.borderColor) bl.push(`border-color:${s.borderColor}`);
   if (s.borderStyle && s.borderStyle !== "none") bl.push(`border-style:${s.borderStyle}`);
   if (s.borderRadius) bl.push(`border-radius:${s.borderRadius}px`);
-  if (bl.length) parts.push(`${id}{${bl.join(";")}}`);
+  if (bl.length) parts.push(`${srSel}{${bl.join(";")}}`);
   return parts.join("");
 };
 export const computeBlockCss = (props, blockId) => {

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

@@ -502,13 +502,34 @@ const seoTree = computed(() => {
 const selectedCMSConfig = computed(
   () => selectedBlockIndex.value !== null ? CMS_COMPONENTS[page.value?.content[selectedBlockIndex.value]?.type] : null
 );
+const _getPanelFields = (panel) => {
+  const cfg = selectedCMSConfig.value;
+  if (!cfg?.fields || selectedBlockIndex.value === null) return [];
+  const props = page.value?.content[selectedBlockIndex.value]?.props ?? {};
+  return Object.entries(cfg.fields).filter(([key]) => STYLE_PANEL_MAP[key] === panel).filter(([, f]) => !f.showIf || f.showIf(props)).map(([key, f]) => ({ key, ...f }));
+};
+const colorSectionFields = computed(() => _getPanelFields("colors"));
+const typoSectionFields = computed(() => _getPanelFields("typo"));
+const effectsSectionFields = computed(() => _getPanelFields("effects"));
+const STYLE_PANEL_MAP = {
+  bgColor: "colors",
+  textColor: "colors",
+  overlayColor: "colors",
+  highlightColor: "colors",
+  textSize: "typo",
+  titleSize: "typo",
+  overlay: "effects",
+  overlayDirection: "effects",
+  overlayStrength: "effects"
+};
 const CONTENT_FIELD_TYPES = ["text", "textarea", "image", "list", "richtext"];
 const visibleFields = computed(() => {
   const cfg = selectedCMSConfig.value;
   if (!cfg?.fields) return {};
   const props = page.value?.content[selectedBlockIndex.value]?.props ?? {};
   return Object.fromEntries(
-    Object.entries(cfg.fields).filter(([, f]) => {
+    Object.entries(cfg.fields).filter(([key, f]) => {
+      if (STYLE_PANEL_MAP[key]) return false;
       const isContent = CONTENT_FIELD_TYPES.includes(f.type);
       if (selectedFieldGroup.value === "contenu" ? !isContent : isContent) return false;
       if (typeof f.showIf === "function" && !f.showIf(props)) return false;
@@ -1168,6 +1189,30 @@ const savePage = async () => {
                       </div>
                     </div>
                   </div>
+                  <!-- Section color props (bgColor, textColor, overlayColor…) from block schema -->
+                  <template v-if="colorSectionFields.length">
+                    <div class="border-t border-gray-100 pt-3 space-y-3">
+                      <p class="text-[8px] font-black uppercase tracking-widest text-[#3d35ff]/60">Section Colors</p>
+                      <div v-for="f in colorSectionFields" :key="f.key">
+                        <label class="text-[7px] font-black uppercase text-gray-400 block mb-1">{{ f.label }}</label>
+                        <div class="flex items-center gap-1.5 bg-gray-50 rounded-xl ring-1 ring-gray-100 px-2 py-1.5">
+                          <input type="color" :value="page.content[selectedBlockIndex].props[f.key] || '#000000'" @input="page.content[selectedBlockIndex].props[f.key] = $event.target.value;
+  trigger()" class="w-5 h-5 rounded cursor-pointer border-0 bg-transparent p-0" />
+                          <input :value="page.content[selectedBlockIndex].props[f.key]" @input="page.content[selectedBlockIndex].props[f.key] = $event.target.value;
+  trigger()" placeholder="inherit" class="flex-1 bg-transparent text-[9px] font-mono outline-none w-0" />
+                          <button v-if="page.content[selectedBlockIndex].props[f.key]" @click="page.content[selectedBlockIndex].props[f.key] = '';
+  trigger()" class="text-gray-300 hover:text-gray-500 text-[10px] shrink-0">✕</button>
+                        </div>
+                        <div class="flex flex-wrap gap-1 mt-1.5">
+                          <button v-for="c in ['#ffffff', '#000000', '#3d35ff', ...brandColors]" :key="c"
+                            @click="page.content[selectedBlockIndex].props[f.key] = c;
+  trigger()"
+                            :title="c" :style="{ background: c }"
+                            :class="['w-4 h-4 rounded-full border transition-all', page.content[selectedBlockIndex].props[f.key] === c ? 'border-[#3d35ff] scale-110 shadow-sm' : 'border-black/10 hover:scale-110']" />
+                        </div>
+                      </div>
+                    </div>
+                  </template>
                 </div>
               </div>
 
@@ -1179,6 +1224,22 @@ const savePage = async () => {
                   <svg :class="['w-3 h-3 text-gray-400 transition-transform', styleSection === 'typo' ? 'rotate-180' : '']" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M19 9l-7 7-7-7"/></svg>
                 </button>
                 <div v-show="styleSection === 'typo'" class="p-4 space-y-4">
+                  <!-- Section typography props (textSize, titleSize) from block schema -->
+                  <template v-if="typoSectionFields.length">
+                    <div v-for="f in typoSectionFields" :key="f.key">
+                      <p class="text-[8px] font-black uppercase tracking-widest text-[#3d35ff]/60 mb-2">{{ f.label }}</p>
+                      <div class="grid grid-cols-3 gap-1.5">
+                        <button v-for="opt in f.options" :key="opt.value"
+                          @click="page.content[selectedBlockIndex].props[f.key] = opt.value;
+  trigger()"
+                          :class="['py-2 px-1 rounded-xl border-2 text-center transition-all', page.content[selectedBlockIndex].props[f.key] === opt.value ? 'border-[#3d35ff] bg-blue-50/50 text-[#3d35ff]' : 'border-gray-100 text-gray-400 hover:border-gray-200']">
+                          <span class="text-base block mb-0.5">{{ opt.icon }}</span>
+                          <span class="text-[7px] font-black uppercase">{{ opt.label }}</span>
+                        </button>
+                      </div>
+                    </div>
+                    <div class="border-t border-gray-100 pt-1"></div>
+                  </template>
                   <!-- Title row -->
                   <div>
                     <p class="text-[8px] font-black uppercase tracking-widest text-[#3d35ff]/60 mb-2">Title (h1–h4)</p>
@@ -1406,7 +1467,31 @@ const savePage = async () => {
                   </div>
 
                   <!-- Empty state -->
-                  <p v-if="!activeEffects.length" class="text-[8px] text-gray-300 text-center py-3">No effects applied</p>
+                  <p v-if="!activeEffects.length && !effectsSectionFields.length" class="text-[8px] text-gray-300 text-center py-3">No effects applied</p>
+
+                  <!-- Section effects (overlay, direction, strength) from block schema -->
+                  <template v-if="effectsSectionFields.length">
+                    <div v-for="f in effectsSectionFields" :key="f.key" class="rounded-xl border border-gray-100 overflow-hidden">
+                      <div class="px-3 py-2 bg-gray-50">
+                        <p class="text-[8px] font-black uppercase tracking-widest text-gray-700">{{ f.label }}</p>
+                      </div>
+                      <div class="p-3">
+                        <div v-if="f.type === 'cards'" class="grid grid-cols-3 gap-1.5">
+                          <button v-for="opt in f.options" :key="opt.value"
+                            @click="page.content[selectedBlockIndex].props[f.key] = opt.value;
+  trigger()"
+                            :class="['py-2 px-1 rounded-xl border-2 text-center transition-all', page.content[selectedBlockIndex].props[f.key] === opt.value ? 'border-[#3d35ff] bg-blue-50/50 text-[#3d35ff]' : 'border-gray-100 text-gray-400 hover:border-gray-200']">
+                            <span class="text-sm block mb-0.5">{{ opt.icon }}</span>
+                            <span class="text-[7px] font-black uppercase">{{ opt.label }}</span>
+                          </button>
+                        </div>
+                        <select v-else-if="f.type === 'select'" :value="page.content[selectedBlockIndex].props[f.key]" @change="page.content[selectedBlockIndex].props[f.key] = $event.target.value;
+  trigger()" class="w-full bg-gray-50 rounded-xl p-2 text-[9px] font-bold ring-1 ring-gray-100 outline-none">
+                          <option v-for="opt in f.options" :key="opt.value" :value="opt.value">{{ opt.label }}</option>
+                        </select>
+                      </div>
+                    </div>
+                  </template>
 
                   <!-- Add effect -->
                   <div v-if="showEffectDropdown" class="fixed inset-0 z-[5]" @click="showEffectDropdown = false" />

package/package.json

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