cinqcinqdev-seo 0.1.44 → 0.1.46

package/dist/runtime/composables/useAdminSections.js

@@ -33,6 +33,21 @@ const radiusOptions = [
   { value: "rounded", label: "Rounded", icon: "\u25A2" },
   { value: "pill", label: "Pill", icon: "\u25EF" }
 ];
+const directionOptions = [
+  { value: "ltr", label: "LTR", icon: "\u2192" },
+  { value: "rtl", label: "RTL", icon: "\u2190" }
+];
+const contentWidthOptions = [
+  { value: "narrow", label: "Narrow", icon: "\u258F" },
+  { value: "normal", label: "Normal", icon: "\u25E7" },
+  { value: "wide", label: "Wide", icon: "\u25AC" },
+  { value: "full", label: "Full", icon: "\u25A3" }
+];
+const textSizeOptions = [
+  { value: "sm", label: "Small", icon: "S" },
+  { value: "md", label: "Normal", icon: "M" },
+  { value: "lg", label: "Large", icon: "L" }
+];
 const i18n0 = (fr = "") => ({ fr, ar: "", en: "" });
 export const DEFAULT_SECTIONS = {
   HeroSection: {
@@ -54,7 +69,10 @@ export const DEFAULT_SECTIONS = {
       ctaText: i18n0("Get Started"),
       ctaLink: "/",
       spacing: "normal",
-      radius: "rounded"
+      radius: "rounded",
+      textDirection: "ltr",
+      contentWidth: "normal",
+      textSize: "md"
     },
     groups: [
       { key: "design", label: "Design" },
@@ -84,6 +102,9 @@ export const DEFAULT_SECTIONS = {
       bgColor: { type: "color", label: "Background", group: "design" },
       textColor: { type: "color", label: "Text Color", group: "design" },
       radius: { type: "cards", label: "Arrondis", group: "design", options: radiusOptions },
+      textDirection: { type: "cards", label: "Direction", group: "design", options: directionOptions },
+      contentWidth: { type: "cards", label: "Content Width", group: "design", options: contentWidthOptions },
+      textSize: { type: "cards", label: "Text Size", group: "design", options: textSizeOptions },
       animation: { type: "cards", label: "Animation", group: "animation", options: animationOptions }
     }
   },
@@ -106,7 +127,10 @@ export const DEFAULT_SECTIONS = {
       textColor: "rgba(var(--text-color), 1)",
       ctas: [],
       spacing: "normal",
-      radius: "rounded"
+      radius: "rounded",
+      textDirection: "ltr",
+      contentWidth: "normal",
+      textSize: "md"
     },
     fields: {
       layout: { type: "cards", label: "Layout", options: [
@@ -138,7 +162,10 @@ export const DEFAULT_SECTIONS = {
       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 }
+      radius: { type: "cards", label: "Arrondis", options: radiusOptions },
+      textDirection: { type: "cards", label: "Direction", options: directionOptions },
+      contentWidth: { type: "cards", label: "Content Width", options: contentWidthOptions },
+      textSize: { type: "cards", label: "Text Size", options: textSizeOptions }
     }
   },
   ServiceGrid: {
@@ -157,7 +184,10 @@ export const DEFAULT_SECTIONS = {
       bgColor: "rgba(var(--body-bg), 1)",
       textColor: "rgba(var(--text-color), 1)",
       spacing: "normal",
-      radius: "rounded"
+      radius: "rounded",
+      textDirection: "ltr",
+      contentWidth: "normal",
+      textSize: "md"
     },
     fields: {
       layout: { type: "cards", label: "Layout", options: [
@@ -182,7 +212,10 @@ export const DEFAULT_SECTIONS = {
       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 }
+      radius: { type: "cards", label: "Arrondis", options: radiusOptions },
+      textDirection: { type: "cards", label: "Direction", options: directionOptions },
+      contentWidth: { type: "cards", label: "Content Width", options: contentWidthOptions },
+      textSize: { type: "cards", label: "Text Size", options: textSizeOptions }
     }
   },
   Features: {
@@ -194,7 +227,10 @@ export const DEFAULT_SECTIONS = {
       bgColor: "rgba(var(--body-bg), 1)",
       textColor: "rgba(var(--text-color), 1)",
       spacing: "normal",
-      radius: "rounded"
+      radius: "rounded",
+      textDirection: "ltr",
+      contentWidth: "normal",
+      textSize: "md"
     },
     fields: {
       title: { type: "text", label: "Section Title", i18n: true },
@@ -205,7 +241,10 @@ export const DEFAULT_SECTIONS = {
       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 }
+      radius: { type: "cards", label: "Arrondis", options: radiusOptions },
+      textDirection: { type: "cards", label: "Direction", options: directionOptions },
+      contentWidth: { type: "cards", label: "Content Width", options: contentWidthOptions },
+      textSize: { type: "cards", label: "Text Size", options: textSizeOptions }
     }
   },
   FAQ: {
@@ -217,7 +256,10 @@ export const DEFAULT_SECTIONS = {
       bgColor: "rgba(var(--body-bg), 1)",
       textColor: "rgba(var(--text-color), 1)",
       spacing: "normal",
-      radius: "rounded"
+      radius: "rounded",
+      textDirection: "ltr",
+      contentWidth: "narrow",
+      textSize: "md"
     },
     fields: {
       title: { type: "text", label: "Title", i18n: true },
@@ -228,7 +270,10 @@ export const DEFAULT_SECTIONS = {
       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 }
+      radius: { type: "cards", label: "Arrondis", options: radiusOptions },
+      textDirection: { type: "cards", label: "Direction", options: directionOptions },
+      contentWidth: { type: "cards", label: "Content Width", options: contentWidthOptions },
+      textSize: { type: "cards", label: "Text Size", options: textSizeOptions }
     }
   },
   Process: {
@@ -244,7 +289,10 @@ export const DEFAULT_SECTIONS = {
       bgColor: "rgba(var(--body-bg), 1)",
       textColor: "rgba(var(--text-color), 1)",
       spacing: "normal",
-      radius: "rounded"
+      radius: "rounded",
+      textDirection: "ltr",
+      contentWidth: "normal",
+      textSize: "md"
     },
     fields: {
       layout: { type: "cards", label: "Layout", options: [
@@ -266,7 +314,10 @@ export const DEFAULT_SECTIONS = {
       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 }
+      radius: { type: "cards", label: "Arrondis", options: radiusOptions },
+      textDirection: { type: "cards", label: "Direction", options: directionOptions },
+      contentWidth: { type: "cards", label: "Content Width", options: contentWidthOptions },
+      textSize: { type: "cards", label: "Text Size", options: textSizeOptions }
     }
   },
   Testimonials: {
@@ -282,7 +333,10 @@ export const DEFAULT_SECTIONS = {
       bgColor: "rgba(var(--body-bg), 1)",
       textColor: "rgba(var(--text-color), 1)",
       spacing: "normal",
-      radius: "rounded"
+      radius: "rounded",
+      textDirection: "ltr",
+      contentWidth: "normal",
+      textSize: "md"
     },
     fields: {
       layout: { type: "cards", label: "Layout", options: [
@@ -306,7 +360,10 @@ export const DEFAULT_SECTIONS = {
       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 }
+      radius: { type: "cards", label: "Arrondis", options: radiusOptions },
+      textDirection: { type: "cards", label: "Direction", options: directionOptions },
+      contentWidth: { type: "cards", label: "Content Width", options: contentWidthOptions },
+      textSize: { type: "cards", label: "Text Size", options: textSizeOptions }
     }
   },
   Pricing: {
@@ -322,7 +379,10 @@ export const DEFAULT_SECTIONS = {
       bgColor: "rgba(var(--body-bg), 1)",
       textColor: "rgba(var(--text-color), 1)",
       spacing: "normal",
-      radius: "rounded"
+      radius: "rounded",
+      textDirection: "ltr",
+      contentWidth: "normal",
+      textSize: "md"
     },
     fields: {
       layout: { type: "cards", label: "Layout", options: [
@@ -346,7 +406,10 @@ export const DEFAULT_SECTIONS = {
       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 }
+      radius: { type: "cards", label: "Arrondis", options: radiusOptions },
+      textDirection: { type: "cards", label: "Direction", options: directionOptions },
+      contentWidth: { type: "cards", label: "Content Width", options: contentWidthOptions },
+      textSize: { type: "cards", label: "Text Size", options: textSizeOptions }
     }
   },
   ContactForm: {
@@ -361,7 +424,10 @@ export const DEFAULT_SECTIONS = {
       bgColor: "rgba(var(--body-bg), 1)",
       textColor: "rgba(var(--text-color), 1)",
       spacing: "normal",
-      radius: "rounded"
+      radius: "rounded",
+      textDirection: "ltr",
+      contentWidth: "normal",
+      textSize: "md"
     },
     fields: {
       layout: { type: "cards", label: "Layout", options: [
@@ -376,7 +442,10 @@ export const DEFAULT_SECTIONS = {
       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 }
+      radius: { type: "cards", label: "Arrondis", options: radiusOptions },
+      textDirection: { type: "cards", label: "Direction", options: directionOptions },
+      contentWidth: { type: "cards", label: "Content Width", options: contentWidthOptions },
+      textSize: { type: "cards", label: "Text Size", options: textSizeOptions }
     }
   },
   // ── Blog sections ─────────────────────────────────────────────────────────
@@ -397,7 +466,10 @@ export const DEFAULT_SECTIONS = {
       bgColor: "rgba(var(--body-bg), 1)",
       textColor: "rgba(var(--text-color), 1)",
       spacing: "normal",
-      radius: "rounded"
+      radius: "rounded",
+      textDirection: "ltr",
+      contentWidth: "narrow",
+      textSize: "md"
     },
     fields: {
       layout: { type: "cards", label: "Layout", options: [
@@ -417,7 +489,10 @@ export const DEFAULT_SECTIONS = {
       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 }
+      radius: { type: "cards", label: "Arrondis", options: radiusOptions },
+      textDirection: { type: "cards", label: "Direction", options: directionOptions },
+      contentWidth: { type: "cards", label: "Content Width", options: contentWidthOptions },
+      textSize: { type: "cards", label: "Text Size", options: textSizeOptions }
     }
   },
   RichText: {
@@ -432,7 +507,10 @@ export const DEFAULT_SECTIONS = {
       bgColor: "rgba(var(--body-bg), 1)",
       textColor: "rgba(var(--text-color), 1)",
       spacing: "normal",
-      radius: "rounded"
+      radius: "rounded",
+      textDirection: "ltr",
+      contentWidth: "normal",
+      textSize: "md"
     },
     fields: {
       layout: { type: "cards", label: "Width", options: [
@@ -449,7 +527,10 @@ export const DEFAULT_SECTIONS = {
       } },
       bgColor: { type: "color", label: "Background" },
       textColor: { type: "color", label: "Text Color" },
-      spacing: { type: "cards", label: "Espacement", options: spacingOptions }
+      spacing: { type: "cards", label: "Espacement", options: spacingOptions },
+      textDirection: { type: "cards", label: "Direction", options: directionOptions },
+      contentWidth: { type: "cards", label: "Content Width", options: contentWidthOptions },
+      textSize: { type: "cards", label: "Text Size", options: textSizeOptions }
     }
   },
   CallToAction: {
@@ -467,7 +548,10 @@ export const DEFAULT_SECTIONS = {
       bgColor: "rgba(var(--primary-color), 1)",
       textColor: "rgba(var(--body-bg), 1)",
       spacing: "normal",
-      radius: "rounded"
+      radius: "rounded",
+      textDirection: "ltr",
+      contentWidth: "normal",
+      textSize: "md"
     },
     fields: {
       layout: { type: "cards", label: "Layout", options: [
@@ -485,7 +569,10 @@ export const DEFAULT_SECTIONS = {
       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 }
+      radius: { type: "cards", label: "Arrondis", options: radiusOptions },
+      textDirection: { type: "cards", label: "Direction", options: directionOptions },
+      contentWidth: { type: "cards", label: "Content Width", options: contentWidthOptions },
+      textSize: { type: "cards", label: "Text Size", options: textSizeOptions }
     }
   },
   Quote: {
@@ -499,7 +586,10 @@ export const DEFAULT_SECTIONS = {
       avatar: "",
       bgColor: "rgba(var(--body-bg), 1)",
       textColor: "rgba(var(--text-color), 1)",
-      spacing: "normal"
+      spacing: "normal",
+      textDirection: "ltr",
+      contentWidth: "narrow",
+      textSize: "md"
     },
     fields: {
       layout: { type: "cards", label: "Layout", options: [
@@ -513,7 +603,151 @@ export const DEFAULT_SECTIONS = {
       avatar: { type: "image", label: "Author photo" },
       bgColor: { type: "color", label: "Background" },
       textColor: { type: "color", label: "Text Color" },
-      spacing: { type: "cards", label: "Espacement", options: spacingOptions }
+      spacing: { type: "cards", label: "Espacement", options: spacingOptions },
+      textDirection: { type: "cards", label: "Direction", options: directionOptions },
+      contentWidth: { type: "cards", label: "Content Width", options: contentWidthOptions },
+      textSize: { type: "cards", label: "Text Size", options: textSizeOptions }
+    }
+  },
+  DataTable: {
+    label: "Data Table",
+    icon: "table",
+    defaultProps: {
+      layout: "default",
+      titleTag: "h2",
+      badge: i18n0(),
+      title: i18n0(""),
+      description: i18n0(),
+      caption: "",
+      searchable: false,
+      sortable: true,
+      stickyHeader: false,
+      perPage: 0,
+      cardColumns: "auto",
+      columns: [
+        { label: "Name", align: "left", badge: false },
+        { label: "Role", align: "left", badge: false },
+        { label: "Department", align: "left", badge: false },
+        { label: "Status", align: "left", badge: true }
+      ],
+      rows: [
+        { cells: "Alice Martin | Lead Designer | Product | Active" },
+        { cells: "Bob Chen | Senior Developer | Engineering | Active" },
+        { cells: "Clara Dumont | Product Manager | Product | On leave" },
+        { cells: "David Kim | UX Researcher | Design | Active" },
+        { cells: "Emma Laurent | DevOps Engineer | Engineering | Active" },
+        { cells: "F\xE9lix Moreau | Data Analyst | Analytics | Active" }
+      ],
+      bgColor: "rgba(var(--body-bg), 1)",
+      textColor: "rgba(var(--text-color), 1)",
+      spacing: "normal",
+      radius: "rounded",
+      textDirection: "ltr",
+      contentWidth: "normal",
+      textSize: "md"
+    },
+    fields: {
+      layout: { type: "cards", label: "Layout", options: [
+        { value: "default", label: "Default", icon: "\u229E" },
+        { value: "striped", label: "Striped", icon: "\u25A4" },
+        { value: "minimal", label: "Minimal", icon: "\u2014" },
+        { value: "cards", label: "Cards", icon: "\u25A6" }
+      ] },
+      titleTag: { type: "select", label: "SEO Tag", options: tagOptions },
+      badge: { type: "text", label: "Badge", i18n: true },
+      title: { type: "text", label: "Title", i18n: true },
+      description: { type: "textarea", label: "Description", i18n: true },
+      caption: { type: "text", label: "Caption (accessibility)" },
+      searchable: { type: "select", label: "Search bar", options: [{ value: false, label: "Hidden" }, { value: true, label: "Visible" }] },
+      sortable: { type: "select", label: "Sortable columns", options: [{ value: false, label: "No" }, { value: true, label: "Yes" }] },
+      stickyHeader: { type: "select", label: "Sticky header", options: [{ value: false, label: "No" }, { value: true, label: "Yes" }] },
+      perPage: { type: "text", label: "Rows per page (0 = all)" },
+      cardColumns: { type: "cards", label: "Card columns", options: [
+        { value: "auto", label: "Auto", icon: "\u25E7" },
+        { value: "1", label: "1", icon: "\u258F" },
+        { value: "2", label: "2", icon: "\u25E7" },
+        { value: "4", label: "4", icon: "\u25A6" }
+      ] },
+      columns: { type: "list", label: "Columns", itemFields: {
+        label: { type: "text", label: "Column label" },
+        align: { type: "cards", label: "Align", options: [
+          { value: "left", label: "Left", icon: "\u25C1" },
+          { value: "center", label: "Center", icon: "\u25C9" },
+          { value: "right", label: "Right", icon: "\u25B7" }
+        ] },
+        badge: { type: "select", label: "Badge style", options: [{ value: false, label: "Plain text" }, { value: true, label: "Badge pill" }] }
+      } },
+      rows: { type: "list", label: "Rows", itemFields: {
+        cells: { type: "textarea", label: "Cells (separate values with |)" }
+      } },
+      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 },
+      textDirection: { type: "cards", label: "Direction", options: directionOptions },
+      contentWidth: { type: "cards", label: "Content Width", options: contentWidthOptions },
+      textSize: { type: "cards", label: "Text Size", options: textSizeOptions }
+    }
+  },
+  Comparison: {
+    label: "Comparison",
+    icon: "compare",
+    defaultProps: {
+      layout: "cards",
+      headerAlign: "center",
+      titleTag: "h2",
+      badge: i18n0(),
+      title: i18n0("Compare Plans"),
+      description: i18n0(),
+      rowsLabel: "Features",
+      rows: "Projects\nStorage\nSupport\nAPI Access\nCustom Domain",
+      plans: [
+        { name: "Starter", badge: "", price: "$0", priceUnit: "/mo", description: "Perfect for individuals and small projects.", highlighted: false, ctaText: "Get started", ctaLink: "#", features: "3 projects\n1 GB storage\nCommunity support\n\u2717 API access\n\u2717 Custom domain" },
+        { name: "Pro", badge: "Popular", price: "$29", priceUnit: "/mo", description: "Everything you need to scale your business.", highlighted: true, ctaText: "Start free trial", ctaLink: "#", features: "Unlimited projects\n50 GB storage\nPriority support\n\u2713 API access\n\u2713 Custom domain" },
+        { name: "Enterprise", badge: "", price: "$99", priceUnit: "/mo", description: "Advanced features for large organizations.", highlighted: false, ctaText: "Contact sales", ctaLink: "#", features: "Unlimited projects\nUnlimited storage\nDedicated support\n\u2713 API access\n\u2713 Custom domain" }
+      ],
+      bgColor: "rgba(var(--body-bg), 1)",
+      textColor: "rgba(var(--text-color), 1)",
+      spacing: "normal",
+      radius: "rounded",
+      textDirection: "ltr",
+      contentWidth: "normal",
+      textSize: "md"
+    },
+    fields: {
+      layout: { type: "cards", label: "Layout", options: [
+        { value: "cards", label: "Cards", icon: "\u25A4" },
+        { value: "table", label: "Table", icon: "\u229E" },
+        { value: "versus", label: "Versus", icon: "\u25E7" }
+      ] },
+      headerAlign: { type: "cards", label: "Header align", options: [
+        { value: "left", label: "Left", icon: "\u25C1" },
+        { value: "center", label: "Center", icon: "\u25C9" }
+      ] },
+      titleTag: { type: "select", label: "SEO Tag", options: tagOptions },
+      badge: { type: "text", label: "Badge", i18n: true },
+      title: { type: "text", label: "Title", i18n: true },
+      description: { type: "textarea", label: "Description", i18n: true },
+      rowsLabel: { type: "text", label: "Rows label (table layout)" },
+      rows: { type: "textarea", label: "Feature rows (one per line, table layout)" },
+      plans: { type: "list", label: "Plans / Options", itemFields: {
+        name: { type: "text", label: "Plan name" },
+        badge: { type: "text", label: "Badge (e.g. Popular)" },
+        price: { type: "text", label: "Price (e.g. $29)" },
+        priceUnit: { type: "text", label: "Unit (e.g. /month)" },
+        description: { type: "textarea", label: "Short description" },
+        highlighted: { type: "select", label: "Highlighted?", options: [{ value: false, label: "No" }, { value: true, label: "Yes" }] },
+        ctaText: { type: "text", label: "Button text" },
+        ctaLink: { type: "text", label: "Button URL" },
+        features: { type: "textarea", label: "Features (one per line \u2014 prefix \u2713 = included, \u2717 = excluded)" }
+      } },
+      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 },
+      textDirection: { type: "cards", label: "Direction", options: directionOptions },
+      contentWidth: { type: "cards", label: "Content Width", options: contentWidthOptions },
+      textSize: { type: "cards", label: "Text Size", options: textSizeOptions }
     }
   },
   Newsletter: {
@@ -530,7 +764,10 @@ export const DEFAULT_SECTIONS = {
       bgColor: "rgba(var(--body-bg), 1)",
       textColor: "rgba(var(--text-color), 1)",
       spacing: "normal",
-      radius: "rounded"
+      radius: "rounded",
+      textDirection: "ltr",
+      contentWidth: "normal",
+      textSize: "md"
     },
     fields: {
       layout: { type: "cards", label: "Layout", options: [
@@ -547,7 +784,10 @@ export const DEFAULT_SECTIONS = {
       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 }
+      radius: { type: "cards", label: "Arrondis", options: radiusOptions },
+      textDirection: { type: "cards", label: "Direction", options: directionOptions },
+      contentWidth: { type: "cards", label: "Content Width", options: contentWidthOptions },
+      textSize: { type: "cards", label: "Text Size", options: textSizeOptions }
     }
   }
 };

package/package.json

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