cinqcinqdev-seo 1.0.5 → 1.0.6

package/dist/module.json

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

package/dist/runtime/composables/useAdminSections.js

@@ -1220,29 +1220,37 @@ export const DEFAULT_SECTIONS = {
     }
   }
 };
-export const computeBlockCss = (props, blockId) => {
-  if (!props) return "";
-  const s = props._style || {};
-  const id = `[data-block-id="${blockId}"]`;
+const _shadowMap = {
+  sm: "0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.08)",
+  md: "0 4px 6px rgba(0,0,0,.1),0 2px 4px rgba(0,0,0,.06)",
+  lg: "0 10px 15px rgba(0,0,0,.1),0 4px 6px rgba(0,0,0,.05)",
+  xl: "0 20px 25px rgba(0,0,0,.12)",
+  "2xl": "0 25px 50px rgba(0,0,0,.25)"
+};
+const _buildStyleCss = (s, id) => {
   const parts = [];
   const titleSels = `${id} h1,${id} h2,${id} h3,${id} h4`;
   const tr = [];
-  if (s.titleFontSize) tr.push(`font-size:${s.titleFontSize}px !important`);
+  if (s.titleFontSize) tr.push(`font-size:${s.titleFontSize}rem !important`);
   if (s.titleFontWeight) tr.push(`font-weight:${s.titleFontWeight} !important`);
   if (s.titleFontStyle) tr.push(`font-style:${s.titleFontStyle} !important`);
   if (s.titleTextDecoration) tr.push(`text-decoration:${s.titleTextDecoration} !important`);
   if (s.titleColor) tr.push(`color:${s.titleColor} !important`);
   if (tr.length) parts.push(`${titleSels}{${tr.join(";")}}`);
   const bodySels = `${id} p,${id} li`;
-  const br2 = [];
-  if (s.bodyFontSize) br2.push(`font-size:${s.bodyFontSize}px !important`);
-  if (s.bodyFontWeight) br2.push(`font-weight:${s.bodyFontWeight} !important`);
-  if (s.bodyColor) br2.push(`color:${s.bodyColor} !important`);
-  if (br2.length) parts.push(`${bodySels}{${br2.join(";")}}`);
+  const br = [];
+  if (s.bodyFontSize) br.push(`font-size:${s.bodyFontSize}rem !important`);
+  if (s.bodyFontWeight) br.push(`font-weight:${s.bodyFontWeight} !important`);
+  if (s.bodyColor) br.push(`color:${s.bodyColor} !important`);
+  if (br.length) parts.push(`${bodySels}{${br.join(";")}}`);
   const gr = [];
   if (s.lineHeight) gr.push(`line-height:${s.lineHeight}`);
   if (s.letterSpacing) gr.push(`letter-spacing:${s.letterSpacing}em`);
   if (gr.length) parts.push(`${id}{${gr.join(";")}}`);
+  const lay = [];
+  if (s.maxWidth) lay.push(`max-width:${s.maxWidth}px;margin-left:auto;margin-right:auto`);
+  if (s.translateX || s.translateY) lay.push(`transform:translate(${s.translateX || 0}px,${s.translateY || 0}px)`);
+  if (lay.length) parts.push(`${id}{${lay.join(";")}}`);
   const sp = [];
   if (s.paddingTop) sp.push(`padding-top:${s.paddingTop}px`);
   if (s.paddingBottom) sp.push(`padding-bottom:${s.paddingBottom}px`);
@@ -1253,19 +1261,29 @@ export const computeBlockCss = (props, blockId) => {
   if (sp.length) parts.push(`${id}{${sp.join(";")}}`);
   const bl = [];
   if (s.opacity !== "" && s.opacity != null) bl.push(`opacity:${s.opacity}`);
-  const shadowMap = {
-    sm: "0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.08)",
-    md: "0 4px 6px rgba(0,0,0,.1),0 2px 4px rgba(0,0,0,.06)",
-    lg: "0 10px 15px rgba(0,0,0,.1),0 4px 6px rgba(0,0,0,.05)",
-    xl: "0 20px 25px rgba(0,0,0,.12)",
-    "2xl": "0 25px 50px rgba(0,0,0,.25)"
-  };
-  if (s.boxShadow && s.boxShadow !== "none") bl.push(`box-shadow:${shadowMap[s.boxShadow] || s.boxShadow}`);
+  if (s.boxShadow && s.boxShadow !== "none") bl.push(`box-shadow:${_shadowMap[s.boxShadow] || s.boxShadow}`);
   if (s.borderWidth) bl.push(`border-width:${s.borderWidth}px`);
   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(";")}}`);
+  return parts.join("");
+};
+export const computeBlockCss = (props, blockId) => {
+  if (!props) return "";
+  const s = props._style || {};
+  const id = `[data-block-id="${blockId}"]`;
+  const parts = [];
+  const desktopCss = _buildStyleCss(s, id);
+  if (desktopCss) parts.push(desktopCss);
+  if (s.tablet && Object.values(s.tablet).some(Boolean)) {
+    const css = _buildStyleCss(s.tablet, id);
+    if (css) parts.push(`@media(max-width:1024px){${css}}`);
+  }
+  if (s.mobile && Object.values(s.mobile).some(Boolean)) {
+    const css = _buildStyleCss(s.mobile, id);
+    if (css) parts.push(`@media(max-width:640px){${css}}`);
+  }
   if (props.customCss) parts.push(`${id}{${props.customCss}}`);
   return parts.join("");
 };

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

@@ -94,14 +94,23 @@ const showAddModal = ref(false);
 const sectionSearch = ref("");
 const selectedFieldGroup = ref("contenu");
 const styleSection = ref("typo");
+const styleBreakpoint = ref("desktop");
 const getStyle = (key) => {
-  return page.value?.content[selectedBlockIndex.value]?.props?._style?.[key] ?? "";
+  const style = page.value?.content[selectedBlockIndex.value]?.props?._style;
+  if (!style) return "";
+  if (styleBreakpoint.value === "desktop") return style[key] ?? "";
+  return style[styleBreakpoint.value]?.[key] ?? "";
 };
 const setStyle = (key, value) => {
   const props = page.value?.content[selectedBlockIndex.value]?.props;
   if (!props) return;
   if (!props._style) props._style = {};
-  props._style[key] = value;
+  if (styleBreakpoint.value === "desktop") {
+    props._style[key] = value;
+  } else {
+    if (!props._style[styleBreakpoint.value]) props._style[styleBreakpoint.value] = {};
+    props._style[styleBreakpoint.value][key] = value;
+  }
   trigger();
 };
 const SECTION_GROUPS = [
@@ -935,6 +944,49 @@ const savePage = async () => {
             <!-- ── STYLE PANEL (when Style tab active) ──────────────────── -->
             <div v-if="selectedFieldGroup === 'style'" class="mb-6 space-y-3">
 
+              <!-- Breakpoint switcher -->
+              <div class="flex gap-1 bg-gray-100 rounded-xl p-1">
+                <button v-for="bp in [{ v: 'desktop', l: '\u{1F5A5} Desktop' }, { v: 'tablet', l: '\u2B1B Tablet' }, { v: 'mobile', l: '\u{1F4F1} Mobile' }]" :key="bp.v"
+                  @click="styleBreakpoint = bp.v"
+                  :class="['flex-1 py-1.5 rounded-lg text-[7px] font-black uppercase tracking-wide transition-all', styleBreakpoint === bp.v ? 'bg-white shadow text-[#3d35ff]' : 'text-gray-400 hover:text-gray-600']">
+                  {{ bp.l }}
+                </button>
+              </div>
+
+              <!-- Layout -->
+              <div class="border border-gray-100 rounded-2xl overflow-hidden">
+                <button @click="styleSection = styleSection === 'layout' ? '' : 'layout'"
+                  class="w-full flex items-center justify-between px-4 py-3 bg-gray-50 hover:bg-gray-100 transition-colors">
+                  <span class="text-[9px] font-black uppercase tracking-widest text-gray-700">⊞ Layout</span>
+                  <svg :class="['w-3 h-3 text-gray-400 transition-transform', styleSection === 'layout' ? '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 === 'layout'" class="p-4 space-y-3">
+                  <div>
+                    <label class="text-[7px] font-black uppercase text-gray-400 block mb-1">Max Width (px)</label>
+                    <div class="flex items-center gap-1 bg-gray-50 rounded-xl ring-1 ring-gray-100 overflow-hidden px-2">
+                      <input type="number" :value="getStyle('maxWidth')" @input="setStyle('maxWidth', $event.target.value)" min="0" max="3000" step="10" placeholder="—" class="flex-1 bg-transparent py-2.5 text-[10px] font-mono outline-none w-0" />
+                      <span class="text-[8px] text-gray-300 shrink-0">px</span>
+                    </div>
+                  </div>
+                  <div class="flex gap-2">
+                    <div class="flex-1">
+                      <label class="text-[7px] font-black uppercase text-gray-400 block mb-1">Position X (px)</label>
+                      <div class="flex items-center gap-1 bg-gray-50 rounded-xl ring-1 ring-gray-100 overflow-hidden px-2">
+                        <input type="number" :value="getStyle('translateX')" @input="setStyle('translateX', $event.target.value)" step="1" placeholder="0" class="flex-1 bg-transparent py-2.5 text-[10px] font-mono outline-none w-0" />
+                        <span class="text-[8px] text-gray-300 shrink-0">px</span>
+                      </div>
+                    </div>
+                    <div class="flex-1">
+                      <label class="text-[7px] font-black uppercase text-gray-400 block mb-1">Position Y (px)</label>
+                      <div class="flex items-center gap-1 bg-gray-50 rounded-xl ring-1 ring-gray-100 overflow-hidden px-2">
+                        <input type="number" :value="getStyle('translateY')" @input="setStyle('translateY', $event.target.value)" step="1" placeholder="0" class="flex-1 bg-transparent py-2.5 text-[10px] font-mono outline-none w-0" />
+                        <span class="text-[8px] text-gray-300 shrink-0">px</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
               <!-- Typography -->
               <div class="border border-gray-100 rounded-2xl overflow-hidden">
                 <button @click="styleSection = styleSection === 'typo' ? '' : 'typo'"
@@ -948,10 +1000,10 @@ const savePage = async () => {
                     <p class="text-[8px] font-black uppercase tracking-widest text-[#3d35ff]/60 mb-2">Title (h1–h4)</p>
                     <div class="flex gap-2 mb-2">
                       <div class="flex-1">
-                        <label class="text-[7px] font-black uppercase text-gray-400 block mb-1">Size (px)</label>
+                        <label class="text-[7px] font-black uppercase text-gray-400 block mb-1">Size (rem)</label>
                         <div class="flex items-center gap-1 bg-gray-50 rounded-xl ring-1 ring-gray-100 overflow-hidden px-2">
-                          <input type="number" :value="getStyle('titleFontSize')" @input="setStyle('titleFontSize', $event.target.value)" min="8" max="300" placeholder="—" class="flex-1 bg-transparent py-2.5 text-[10px] font-mono outline-none w-0" />
-                          <span class="text-[8px] text-gray-300 shrink-0">px</span>
+                          <input type="number" :value="getStyle('titleFontSize')" @input="setStyle('titleFontSize', $event.target.value)" min="0.1" max="20" step="0.1" placeholder="—" class="flex-1 bg-transparent py-2.5 text-[10px] font-mono outline-none w-0" />
+                          <span class="text-[8px] text-gray-300 shrink-0">rem</span>
                         </div>
                       </div>
                       <div class="flex-1">
@@ -983,10 +1035,10 @@ const savePage = async () => {
                     <p class="text-[8px] font-black uppercase tracking-widest text-[#3d35ff]/60 mb-2">Body (p, li)</p>
                     <div class="flex gap-2 mb-2">
                       <div class="flex-1">
-                        <label class="text-[7px] font-black uppercase text-gray-400 block mb-1">Size (px)</label>
+                        <label class="text-[7px] font-black uppercase text-gray-400 block mb-1">Size (rem)</label>
                         <div class="flex items-center gap-1 bg-gray-50 rounded-xl ring-1 ring-gray-100 px-2">
-                          <input type="number" :value="getStyle('bodyFontSize')" @input="setStyle('bodyFontSize', $event.target.value)" min="8" max="100" placeholder="—" class="flex-1 bg-transparent py-2.5 text-[10px] font-mono outline-none w-0" />
-                          <span class="text-[8px] text-gray-300 shrink-0">px</span>
+                          <input type="number" :value="getStyle('bodyFontSize')" @input="setStyle('bodyFontSize', $event.target.value)" min="0.1" max="10" step="0.1" placeholder="—" class="flex-1 bg-transparent py-2.5 text-[10px] font-mono outline-none w-0" />
+                          <span class="text-[8px] text-gray-300 shrink-0">rem</span>
                         </div>
                       </div>
                       <div class="flex-1">

package/package.json

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