srcdev-nuxt-components 9.2.2 → 9.2.4

package/.vscode/srcdev-component-services-section.code-snippets

@@ -0,0 +1,84 @@
+{
+  "SRCDEV ServicesSection Full Mode": {
+    "description": "ServicesSection full mode — complete content with CTA",
+    "scope": "vue,html",
+    "body": [
+      "<ServicesSection",
+      "  :service-data=\"$1service\"",
+      "  :index=\"$2index\"",
+      ">",
+      "  <template #cta>",
+      "    <button type=\"button\">$3Book Now</button>",
+      "  </template>",
+      "</ServicesSection>"
+    ]
+  },
+  "SRCDEV ServicesSection Summary Mode": {
+    "description": "ServicesSection summary mode — compact card with summary-link slot",
+    "scope": "vue,html",
+    "body": [
+      "<ServicesSection",
+      "  :service-data=\"$1service\"",
+      "  is-summary",
+      "  summary-alignment=\"$2center\"",
+      ">",
+      "  <template #summary-link=\"{ serviceData }\">",
+      "    <NuxtLink :to=\"`/services/${serviceData.slug}`\">$3More about {{ serviceData.title }} →</NuxtLink>",
+      "  </template>",
+      "</ServicesSection>"
+    ]
+  },
+  "SRCDEV ServicesSection Custom Headings And Cta": {
+    "description": "ServicesSection with custom section headings and CTA copy props",
+    "scope": "vue,html",
+    "body": [
+      "<ServicesSection",
+      "  :service-data=\"$1service\"",
+      "  process-heading=\"$2How It Works\"",
+      "  ideal-for-heading=\"$3Who Is This For\"",
+      "  maintenance-heading=\"$4Aftercare\"",
+      "  faqs-heading=\"$5FAQs\"",
+      "  cta-heading=\"$6Ready to book?\"",
+      "  cta-body=\"$7Get in touch to book your appointment.\"",
+      ">",
+      "  <template #cta>",
+      "    <button type=\"button\">$8Book Now</button>",
+      "  </template>",
+      "</ServicesSection>"
+    ]
+  },
+  "SRCDEV ServicesSection Custom Cta Panel Slot": {
+    "description": "ServicesSection with the cta-panel slot fully replacing the default GlassPanel",
+    "scope": "vue,html",
+    "body": [
+      "<ServicesSection :service-data=\"$1service\">",
+      "  <template #cta-panel=\"{ serviceData, ctaHeading, ctaBody }\">",
+      "    $2",
+      "  </template>",
+      "</ServicesSection>"
+    ]
+  },
+  "SRCDEV ServicesSection CSS Override": {
+    "description": "CSS override scaffold for ServicesSection — scope to a page or section class",
+    "scope": "css",
+    "body": [
+      ".$1my-page {",
+      "  .services-section {",
+      "    --services-section-grid-gap: ;",
+      "    --services-section-grid-gap-desktop: ;",
+      "    --services-section-image-border-radius: ;",
+      "    --services-section-price-duration-gap: ;",
+      "    --services-section-decorator-size: ;",
+      "    --services-section-faq-divider-color: ;",
+      "    --services-section-faq-answer-line-height: ;",
+      "",
+      "    .services-section__image-wrapper {}",
+      "    .services-section__info-wrapper {}",
+      "    .services-section__price-duration {}",
+      "    .services-section__faq {}",
+      "    .services-section__glass-panel {}",
+      "  }",
+      "}"
+    ]
+  }
+}

package/app/components/02.molecules/pricing-card/PricingCard.vue

@@ -19,13 +19,21 @@
       </slot>
     </ul>
 
-    <button
-      class="pricing-card__cta"
-      :disabled="ctaDisabled"
-      @click="handleSelect"
-    >
-      {{ ctaText }}
-    </button>
+    <div class="pricing-card__cta">
+      <slot
+        name="cta"
+        :cta-text="ctaText"
+        :is-disabled="ctaDisabled"
+        :plan-name="planName"
+        :on-select="handleSelect"
+      >
+        <InputButtonCore
+          :button-text="ctaText"
+          :readonly="ctaDisabled"
+          @click="handleSelect"
+        />
+      </slot>
+    </div>
   </component>
 </template>
 
@@ -199,22 +207,17 @@ watch(
 
     .pricing-card__cta {
       align-self: flex-start;
-      padding: var(--_cta-padding);
-      background-color: var(--_cta-bg);
-      color: var(--_cta-text);
-      border: none;
-      border-radius: var(--_cta-border-radius);
-      font-weight: 600;
-      cursor: pointer;
-      transition: background-color 0.2s ease;
 
-      &:hover:not(:disabled) {
-        background-color: var(--_cta-bg-hover);
-      }
+      :deep(.input-button-core) {
+        padding: var(--_cta-padding);
+        background-color: var(--_cta-bg);
+        color: var(--_cta-text);
+        border-radius: var(--_cta-border-radius);
+        font-weight: 600;
 
-      &:disabled {
-        opacity: 0.5;
-        cursor: not-allowed;
+        &:hover:not([aria-disabled="true"]) {
+          background-color: var(--_cta-bg-hover);
+        }
       }
     }
   }

package/nuxt.config.ts

@@ -123,7 +123,12 @@ export default defineNuxtConfig({
   },
   vite: {
     optimizeDeps: {
-      include: ["@oddbird/css-anchor-positioning", "@vue/devtools-core", "@vue/devtools-kit", "vue-qrcode-reader"],
+      include: [
+        "@oddbird/css-anchor-positioning",
+        "@vue/devtools-core",
+        "@vue/devtools-kit",
+        ...(isStandalone ? ["vue-qrcode-reader"] : []),
+      ],
     },
   },
   vue: {

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "9.2.2",
+  "version": "9.2.4",
   "main": "nuxt.config.ts",
   "types": "types.d.ts",
   "license": "MIT",
   "scripts": {
+    "postinstall": "node scripts/copy-snippets.mjs",
     "clean": "rm -rf .nuxt && rm -rf .output",
     "cleanall": "rm -rf node_modules && rm -rf .nuxt && rm -rf .output && rm package-lock.json",
     "reinstall": "rm -rf node_modules && npm install",
@@ -32,6 +33,7 @@
   },
   "files": [
     ".claude/",
+    ".vscode/",
     "app/",
     "modules/",
     "scripts/",

package/scripts/copy-snippets.mjs

@@ -0,0 +1,38 @@
+import { copyFileSync, mkdirSync, readdirSync } from 'fs';
+import { join } from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = fileURLToPath(new URL('.', import.meta.url));
+const srcDir = join(__dirname, '../.vscode');
+const destDir = join(process.cwd(), '.vscode');
+
+// Only run when installed as a package (not in the layer's own repo)
+if (process.cwd() === join(__dirname, '..')) {
+  console.log('⊘ Skipping snippet copy (running in layer repo)');
+  process.exit(0);
+}
+
+mkdirSync(destDir, { recursive: true });
+
+// Find and copy all .code-snippets files
+try {
+  const files = readdirSync(srcDir).filter(file => file.endsWith('.code-snippets'));
+
+  if (files.length === 0) {
+    console.log('⊘ No snippet files found');
+    process.exit(0);
+  }
+
+  files.forEach(file => {
+    try {
+      copyFileSync(join(srcDir, file), join(destDir, file));
+      console.log(`✓ Copied VSCode snippet: ${file}`);
+    } catch (err) {
+      console.warn(`⚠ Failed to copy ${file}:`, err.message);
+    }
+  });
+
+  console.log(`✓ VSCode snippets installed to .vscode/`);
+} catch (err) {
+  console.warn('⚠ Snippet installation skipped:', err.message);
+}