srcdev-nuxt-components 9.2.1 → 9.2.3

package/.vscode/extensions.json

@@ -0,0 +1,15 @@
+{
+  "recommendations": [
+    "davidanson.vscode-markdownlint",
+    "dbaeumer.vscode-eslint",
+    "vue.volar",
+    "nuxtr.nuxtr-vscode",
+    "nixon.env-cmd-file-syntax",
+    "jkjustjoshing.vscode-text-pastry",
+    "willofindie.vscode-cssvar",
+    "vitest.explorer",
+    "esbenp.prettier-vscode",
+    "formulahendry.auto-rename-tag",
+    "anthropic.claude-code"
+  ]
+}

package/.vscode/settings.json

@@ -0,0 +1,45 @@
+{
+  "editor.insertSpaces": true,
+  "editor.tabSize": 2,
+  "editor.trimAutoWhitespace": true,
+  "files.trimTrailingWhitespace": true,
+  "files.eol": "\n",
+  "files.insertFinalNewline": true,
+  "files.trimFinalNewlines": true,
+
+  "[typescript][javascript][json][jsonc][css][scss][html][markdown]": {
+    "editor.formatOnSave": true,
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.codeActionsOnSave": {
+      "source.fixAll.eslint": "explicit",
+      "source.fixAll.stylelint": "explicit",
+      "source.fixAll.markdownlint": "explicit",
+      "editor.trimAutoWhitespace": "explicit"
+    }
+  },
+  "[vue]": {
+    "editor.formatOnSave": true,
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.codeActionsOnSave": {
+      "source.fixAll.eslint": "explicit",
+      "source.fixAll.stylelint": "explicit",
+      "source.fixAll.markdownlint": "explicit",
+      "editor.trimAutoWhitespace": "explicit"
+    }
+  },
+  "eslint.validate": ["javascript", "typescript", "json", "jsonc", "vue", "markdown", "html"],
+  "[css][html][javascript][json][jsonc][markdown][scss][typescript][vue]": {
+    "editor.codeActionsOnSave": {
+      "source.fixAll.eslint": "explicit",
+      "source.fixAll.stylelint": "explicit",
+      "source.fixAll.markdownlint": "explicit",
+      "editor.trimAutoWhitespace": "explicit"
+    }
+  },
+  // More info: https://open-props.style/#getting-started
+  "cssvar.files": ["assets/styles/main.css"],
+  "cssvar.ignore": [],
+  "cssvar.extensions": ["css", "sss", "postcss", "vue", "ts"],
+  "js/ts.tsdk.path": "node_modules/typescript/lib",
+  "git.addAICoAuthor": "off"
+}

package/.vscode/srcdev-component-banner-video.code-snippets

@@ -0,0 +1,59 @@
+{
+  "SRCDEV BannerVideo Basic": {
+    "description": "BannerVideo — full-width autoplaying hero video with poster fallback",
+    "scope": "vue,html",
+    "body": [
+      "<BannerVideo",
+      "  src=\"$1/videos/hero.mp4\"",
+      "  poster=\"$2/images/hero-poster.jpg\"",
+      "  alt=\"$3Studio interior\"",
+      "  :img-width=\"1920\"",
+      "  :img-height=\"1080\"",
+      "  depth=\"$4md\"",
+      "/>"
+    ]
+  },
+  "SRCDEV BannerVideo Custom Toggle Icons": {
+    "description": "BannerVideo with playIcon/pauseIcon props swapped",
+    "scope": "vue,html",
+    "body": [
+      "<BannerVideo",
+      "  src=\"$1/videos/hero.mp4\"",
+      "  poster=\"$2/images/hero-poster.jpg\"",
+      "  play-icon=\"$3mdi:play-circle\"",
+      "  pause-icon=\"$4mdi:pause-circle\"",
+      "/>"
+    ]
+  },
+  "SRCDEV BannerVideo Custom Toggle Icon Slot": {
+    "description": "BannerVideo with the toggle-icon slot fully replacing the toggle button's icon",
+    "scope": "vue,html",
+    "body": [
+      "<BannerVideo src=\"$1/videos/hero.mp4\" poster=\"$2/images/hero-poster.jpg\">",
+      "  <template #toggle-icon=\"{ isPlaying }\">",
+      "    $3",
+      "  </template>",
+      "</BannerVideo>"
+    ]
+  },
+  "SRCDEV BannerVideo CSS Override": {
+    "description": "CSS override scaffold for BannerVideo — scope to a page or section class",
+    "scope": "css",
+    "body": [
+      ".$1my-page {",
+      "  .banner-video {",
+      "    --banner-video-max-height-xs: ;",
+      "    --banner-video-max-height-sm: ;",
+      "    --banner-video-max-height-md: ;",
+      "    --banner-video-max-height-lg: ;",
+      "    --banner-video-max-height-xl: ;",
+      "    --banner-video-toggle-size: ;",
+      "    --banner-video-toggle-offset: ;",
+      "    --banner-video-toggle-background: ;",
+      "    --banner-video-toggle-background-hover: ;",
+      "    --banner-video-toggle-icon-color: ;",
+      "  }",
+      "}"
+    ]
+  }
+}

package/.vscode/srcdev-component-dialog.code-snippets

@@ -0,0 +1,126 @@
+{
+  "SRCDEV DisplayDialog Script Setup": {
+    "description": "useDialogControls setup for one or more DisplayDialog instances",
+    "scope": "javascript,typescript",
+    "body": [
+      "const { dialogsConfig, openDialog, closeDialog } = useDialogControls({",
+      "  $1myDialog: {",
+      "    onConfirm: () => {},",
+      "    onCancel: () => {},",
+      "  },",
+      "});"
+    ]
+  },
+  "SRCDEV DisplayDialog Trigger Button": {
+    "description": "Button that opens a DisplayDialog",
+    "scope": "vue,html",
+    "body": [
+      "<button type=\"button\" @click.prevent=\"openDialog('$1myDialog')\">$2Open dialog</button>"
+    ]
+  },
+  "SRCDEV DisplayDialog Confirm Template": {
+    "description": "DisplayDialog confirm variant — content-sized, requires explicit action",
+    "scope": "vue,html",
+    "body": [
+      "<DisplayDialog",
+      "  v-if=\"dialogsConfig['$1myDialog']\"",
+      "  v-model=\"dialogsConfig['$1myDialog']\"",
+      "  variant=\"confirm\"",
+      "  data-dialog-id=\"$1myDialog\"",
+      ">",
+      "  <template #dialogTitle>",
+      "    <p class=\"text-normal wght-700 m-0\">$2Confirm action?</p>",
+      "  </template>",
+      "  <template #dialogContent>",
+      "    <div class=\"m-0\">",
+      "      <p class=\"text-normal\">$3Are you sure you want to continue?</p>",
+      "    </div>",
+      "  </template>",
+      "  <template #actionButtonLeft>",
+      "    <button type=\"button\" @click=\"closeDialog('$1myDialog', 'cancel')\">Cancel</button>",
+      "  </template>",
+      "  <template #actionButtonRight>",
+      "    <button type=\"button\" @click=\"closeDialog('$1myDialog', 'confirm')\">Confirm</button>",
+      "  </template>",
+      "</DisplayDialog>"
+    ]
+  },
+  "SRCDEV DisplayDialog Alert Template": {
+    "description": "DisplayDialog alert variant — cannot be dismissed by Escape or outside-click",
+    "scope": "vue,html",
+    "body": [
+      "<DisplayDialog",
+      "  v-if=\"dialogsConfig['$1myDialog']\"",
+      "  v-model=\"dialogsConfig['$1myDialog']\"",
+      "  variant=\"alert\"",
+      "  theme=\"error\"",
+      "  data-dialog-id=\"$1myDialog\"",
+      ">",
+      "  <template #dialogTitle>",
+      "    <p class=\"text-normal wght-700 m-0\">$2Delete item?</p>",
+      "  </template>",
+      "  <template #dialogContent>",
+      "    <div class=\"m-0\">",
+      "      <p class=\"text-normal\">$3This action is permanent and cannot be undone.</p>",
+      "    </div>",
+      "  </template>",
+      "  <template #actionButtonLeft>",
+      "    <button type=\"button\" @click=\"closeDialog('$1myDialog', 'cancel')\">Cancel</button>",
+      "  </template>",
+      "  <template #actionButtonRight>",
+      "    <button type=\"button\" @click=\"closeDialog('$1myDialog', 'confirm')\">$4Delete</button>",
+      "  </template>",
+      "</DisplayDialog>"
+    ]
+  },
+  "SRCDEV DisplayDialog Scrollable Template": {
+    "description": "DisplayDialog dialog variant — tall panel with scrollable content area",
+    "scope": "vue,html",
+    "body": [
+      "<DisplayDialog",
+      "  v-if=\"dialogsConfig['$1myDialog']\"",
+      "  v-model=\"dialogsConfig['$1myDialog']\"",
+      "  variant=\"dialog\"",
+      "  :allow-content-scroll=\"true\"",
+      "  data-dialog-id=\"$1myDialog\"",
+      ">",
+      "  <template #dialogTitle>",
+      "    <p class=\"text-normal wght-700 m-0\">$2Dialog title</p>",
+      "  </template>",
+      "  <template #dialogContent>",
+      "    <div class=\"pt-12 pb-12\">",
+      "      $3",
+      "    </div>",
+      "  </template>",
+      "  <template #actionButtonLeft>",
+      "    <button type=\"button\" @click=\"closeDialog('$1myDialog', 'cancel')\">Cancel</button>",
+      "  </template>",
+      "  <template #actionButtonRight>",
+      "    <button type=\"button\" @click=\"closeDialog('$1myDialog', 'confirm')\">Confirm</button>",
+      "  </template>",
+      "</DisplayDialog>"
+    ]
+  },
+  "SRCDEV DisplayDialog CSS Override": {
+    "description": "CSS override scaffold for DisplayDialog — scope to a page or section class",
+    "scope": "css",
+    "body": [
+      ".$1my-page {",
+      "  .display-dialog {",
+      "    --display-dialog-inner-border-radius: ;",
+      "    --display-dialog-inner-background: ;",
+      "    --display-dialog-inner-border: ;",
+      "    --display-dialog-backdrop-background: ;",
+      "    --display-dialog-backdrop-blur: ;",
+      "    --display-dialog-transition-duration: ;",
+      "",
+      "    .inner {",
+      "      .header {}",
+      "      .dialog-content {}",
+      "      .footer {}",
+      "    }",
+      "  }",
+      "}"
+    ]
+  }
+}

package/.vscode/srcdev-component-display-prompt.code-snippets

@@ -0,0 +1,66 @@
+{
+  "SRCDEV DisplayPrompt Template": {
+    "description": "DisplayPrompt inline notification banner with all slots",
+    "scope": "vue,html",
+    "body": [
+      "<DisplayPrompt",
+      "  theme=\"$1info\"",
+      "  :dismissible=\"true\"",
+      "  :style-class-passthrough=\"['$2']\"",
+      ">",
+      "  <template #title>$3Prompt title</template>",
+      "  <template #content>$4Prompt body text.</template>",
+      "</DisplayPrompt>"
+    ]
+  },
+  "SRCDEV DisplayPrompt Masked Template": {
+    "description": "DisplayPrompt with SVG glass border — place over a coloured background",
+    "scope": "vue,html",
+    "body": [
+      "<DisplayPrompt",
+      "  theme=\"$1info\"",
+      "  :masked=\"true\"",
+      "  :dismissible=\"true\"",
+      ">",
+      "  <template #title>$2Prompt title</template>",
+      "  <template #content>$3Prompt body text.</template>",
+      "</DisplayPrompt>"
+    ]
+  },
+  "SRCDEV DisplayPrompt v-model Template": {
+    "description": "DisplayPrompt with parent-controlled dismiss via v-model",
+    "scope": "vue,html",
+    "body": [
+      "<DisplayPrompt",
+      "  v-model=\"$1showPrompt\"",
+      "  theme=\"$2info\"",
+      "  :dismissible=\"true\"",
+      ">",
+      "  <template #title>$3Prompt title</template>",
+      "  <template #content>$4Prompt body text.</template>",
+      "</DisplayPrompt>"
+    ]
+  },
+  "SRCDEV DisplayPrompt Script Setup": {
+    "description": "Script refs for DisplayPrompt v-model and theme",
+    "scope": "javascript,typescript",
+    "body": [
+      "const showPrompt = ref(true);",
+      "const promptTheme = ref<'info' | 'success' | 'warning' | 'error'>('$1info');"
+    ]
+  },
+  "SRCDEV DisplayPrompt CSS Override": {
+    "description": "CSS override scaffold for DisplayPrompt — scope to a page or section class",
+    "scope": "css",
+    "body": [
+      ".$1my-page {",
+      "  .display-prompt-wrapper {",
+      "    --theme-accent: ;",
+      "    --theme-border: ;",
+      "    --theme-surface: ;",
+      "    --theme-text: ;",
+      "  }",
+      "}"
+    ]
+  }
+}

package/.vscode/srcdev-component-display-toast.code-snippets

@@ -0,0 +1,78 @@
+{
+  "SRCDEV DisplayToastProvider Layout Setup": {
+    "description": "DisplayToastProvider — place once in your default layout",
+    "scope": "vue,html",
+    "body": [
+      "<DisplayToastProvider",
+      "  position=\"$1top\"",
+      "  alignment=\"$2right\"",
+      "  :max-visible=\"1\"",
+      "/>"
+    ]
+  },
+  "SRCDEV useToastQueue Script Setup": {
+    "description": "useToastQueue — trigger app-wide toasts from anywhere",
+    "scope": "javascript,typescript",
+    "body": [
+      "const { show, dismiss, clear } = useToastQueue();",
+      "",
+      "const show$1Success = () => {",
+      "  show({",
+      "    appearance: { theme: 'success' },",
+      "    behavior: { autoDismiss: true, duration: 4000 },",
+      "    content: { title: '$2Done', description: '$3Your changes have been saved.' },",
+      "  });",
+      "};",
+      "",
+      "const show$1Error = () => {",
+      "  show({",
+      "    appearance: { theme: 'error' },",
+      "    behavior: { autoDismiss: false },",
+      "    content: { title: '$4Something went wrong', description: '$5Please try again.' },",
+      "  });",
+      "};"
+    ]
+  },
+  "SRCDEV DisplayToast Standalone Template": {
+    "description": "DisplayToast standalone — v-model driven, no queue",
+    "scope": "vue,html",
+    "body": [
+      "<DisplayToast",
+      "  v-model=\"$1toastVisible\"",
+      "  :config=\"{",
+      "    appearance: { theme: '$2info' },",
+      "    behavior: { autoDismiss: true, duration: 4000 },",
+      "    content: { title: '$3Title', description: '$4Description.' },",
+      "  }\"",
+      "/>"
+    ]
+  },
+  "SRCDEV DisplayToast Standalone Script Setup": {
+    "description": "Script ref for standalone DisplayToast v-model",
+    "scope": "javascript,typescript",
+    "body": [
+      "const $1toastVisible = ref(false);"
+    ]
+  },
+  "SRCDEV DisplayToast Masked Config": {
+    "description": "Masked SVG glass variant — add to any toast config appearance block",
+    "scope": "javascript,typescript",
+    "body": [
+      "appearance: { theme: '$1info', masked: true },"
+    ]
+  },
+  "SRCDEV DisplayToast CSS Override": {
+    "description": "CSS override scaffold for DisplayToastProvider items",
+    "scope": "css",
+    "body": [
+      ".$1my-page {",
+      "  .display-toast-provider-item {",
+      "    --theme-surface: ;",
+      "    --theme-text: ;",
+      "    --theme-accent: ;",
+      "    --theme-border: ;",
+      "  }",
+      "}"
+    ]
+  }
+}

package/.vscode/srcdev-component-input-copy.code-snippets

@@ -0,0 +1,72 @@
+{
+  "SRCDEV InputCopy Basic": {
+    "description": "Basic InputCopy component with value and label",
+    "scope": "vue,html",
+    "body": [
+      "<InputCopy",
+      "  value=\"$1sk_live_abc123xyz\"",
+      "  label=\"$2API key\"",
+      "  description=\"$3Copy this key to authenticate with our API.\"",
+      "  @copy=\"$4handleCopy\"",
+      "/>"
+    ]
+  },
+  "SRCDEV InputCopy License Key": {
+    "description": "InputCopy for displaying a license key on success page",
+    "scope": "vue,html",
+    "body": [
+      "<InputCopy",
+      "  :value=\"licenseKey\"",
+      "  label=\"License key\"",
+      "  description=\"Your license key is ready to use. Copy it to embed in your application.\"",
+      "  buttonText=\"Copy\"",
+      "  copiedText=\"Copied to clipboard!\"",
+      "  @copy=\"$1handleCopy\"",
+      "  @copied=\"$2showCopiedFeedback\"",
+      "/>"
+    ]
+  },
+  "SRCDEV InputCopy Disabled": {
+    "description": "InputCopy in disabled state",
+    "scope": "vue,html",
+    "body": [
+      "<InputCopy",
+      "  :value=\"$1value\"",
+      "  label=\"$2Label\"",
+      "  :is-disabled=\"true\"",
+      "  :button-text=\"$3Unavailable\"",
+      "/>"
+    ]
+  },
+  "SRCDEV InputCopy in Page": {
+    "description": "InputCopy with custom aria labels",
+    "scope": "vue,html",
+    "body": [
+      "<InputCopy",
+      "  :value=\"$1value\"",
+      "  label=\"$2License key\"",
+      "  aria-label=\"$3Your unique GuideMyHair license identifier\"",
+      "  description=\"$4Keep this key safe. You'll need it to embed the widget.\"",
+      "  button-text=\"$5Copy key\"",
+      "  copied-text=\"$6Key copied!\"",
+      "  @copy=\"$7logCopy\"",
+      "/>"
+    ]
+  },
+  "SRCDEV InputCopy CSS Override": {
+    "description": "CSS override scaffold for InputCopy tokens",
+    "scope": "css",
+    "body": [
+      ".$1success-page {",
+      "  .input-copy {",
+      "    --input-copy-input-bg: $2;",
+      "    --input-copy-input-border: $3;",
+      "    --input-copy-input-border-radius: $4;",
+      "    --input-copy-button-bg: $5;",
+      "    --input-copy-button-bg-hover: $6;",
+      "    --input-copy-button-text-color: $7;",
+      "  }",
+      "}"
+    ]
+  }
+}

package/.vscode/srcdev-component-pinia-store.code-snippets

@@ -0,0 +1,63 @@
+{
+  "SRCDEV Pinia Options Store Boilerplate": {
+    "description": "Bootstrap the code needed for a Vue.js Pinia Options Store file",
+    "scope": "javascript,typescript",
+    "body": [
+      "import { defineStore, acceptHMRUpdate } from 'pinia'",
+      "",
+      "export const use${TM_FILENAME_BASE/^(.*)$/${1:/pascalcase}/}Store = defineStore('$TM_FILENAME_BASE', {",
+      " state: () => ({",
+      "   $0",
+      " }),",
+      " getters: {},",
+      " actions: {},",
+      "})",
+      "",
+      "if (import.meta.hot) {",
+      " import.meta.hot.accept(acceptHMRUpdate(use${TM_FILENAME_BASE/^(.*)$/${1:/pascalcase}/}Store, import.meta.hot))",
+      "}",
+      ""
+    ]
+  },
+  "SRCDEV Pinia Setup Store Boilerplate": {
+    "description": "Bootstrap the code needed for a Vue.js Pinia Setup Store file",
+    "scope": "javascript,typescript",
+    "body": [
+      "import { defineStore, acceptHMRUpdate } from 'pinia'",
+      "",
+      "export const use${TM_FILENAME_BASE/^(.*)$/${1:/pascalcase}/}Store = defineStore('$TM_FILENAME_BASE', () => {",
+      "$0",
+      "  // State",
+      "  const someNumber = ref(2);",
+      "  const someString = ref(\"Value\");",
+      "  const someBoolean = ref(true);",
+      "  const someNumbersArray = ref<number[]>([]);",
+      "  const someStringArray = ref<string[]>([]);",
+      "",
+      "  // Getters",
+      "  const numberValue = computed(() => someNumber.value);",
+      "  const doubleNumberValue = computed(() => someNumber.value * 2);",
+      "",
+      "  // Actions",
+      "  const increment = (amount = 1) => {",
+      "    someNumber.value += amount;",
+      "  };",
+      "",
+      "  return {",
+      "    numberValue,",
+      "    doubleNumberValue,",
+      "    increment",
+      "  };",
+      "},",
+      "{",
+      "  persist: {",
+      "    storage: piniaPluginPersistedstate.cookies(),",
+      "  },",
+      "}",
+      "",
+      "if (import.meta.hot) {",
+      " import.meta.hot.accept(acceptHMRUpdate(use${TM_FILENAME_BASE/^(.*)$/${1:/pascalcase}/}Store, import.meta.hot))",
+      "}"
+    ]
+  }
+}

package/.vscode/srcdev-component-pricing-card.code-snippets

@@ -0,0 +1,96 @@
+{
+  "SRCDEV PricingCard Single": {
+    "description": "Single PricingCard component with basic props",
+    "scope": "vue,html",
+    "body": [
+      "<PricingCard",
+      "  planName=\"$1Single Site\"",
+      "  :price=\"$2199\"",
+      "  billingPeriod=\"$3one-time\"",
+      "  description=\"$4Perfect for freelancers and solo practitioners.\"",
+      "  :features=\"[",
+      "    '$5Feature 1',",
+      "    '$6Feature 2',",
+      "    '$7Feature 3',",
+      "  ]\"",
+      "  @select=\"$8handleSelect\"",
+      "/>"
+    ]
+  },
+  "SRCDEV PricingCard Highlighted": {
+    "description": "PricingCard with 'Most Popular' highlight",
+    "scope": "vue,html",
+    "body": [
+      "<PricingCard",
+      "  planName=\"$1Agency\"",
+      "  :price=\"$2499\"",
+      "  billingPeriod=\"$3one-time\"",
+      "  description=\"$4Best for growing teams.\"",
+      "  :is-highlighted=\"true\"",
+      "  :features=\"[",
+      "    '$5Feature 1',",
+      "    '$6Feature 2',",
+      "    '$7Feature 3',",
+      "  ]\"",
+      "  @select=\"$8handleSelect\"",
+      "/>"
+    ]
+  },
+  "SRCDEV PricingCard Grid": {
+    "description": "Three-card pricing comparison grid",
+    "scope": "vue,html",
+    "body": [
+      "<div class=\"pricing-cards-grid\">",
+      "  <PricingCard",
+      "    planName=\"Single Site\"",
+      "    :price=\"$1199\"",
+      "    billingPeriod=\"one-time\"",
+      "    description=\"$2For freelancers.\"",
+      "    :features=\"['$3Feature 1', '$4Feature 2']\"",
+      "    @select=\"handleSelect\"",
+      "  />",
+      "  <PricingCard",
+      "    planName=\"Agency\"",
+      "    :price=\"$5499\"",
+      "    billingPeriod=\"one-time\"",
+      "    description=\"$6For growing teams.\"",
+      "    :is-highlighted=\"true\"",
+      "    :features=\"['$7Feature 1', '$8Feature 2', '$9Feature 3']\"",
+      "    @select=\"handleSelect\"",
+      "  />",
+      "  <PricingCard",
+      "    planName=\"Unlimited\"",
+      "    :price=\"$10999\"",
+      "    billingPeriod=\"one-time\"",
+      "    description=\"$11Enterprise plan.\"",
+      "    :features=\"['$12Feature 1', '$13Feature 2', '$14Feature 3', '$15Feature 4']\"",
+      "    @select=\"handleSelect\"",
+      "  />",
+      "</div>"
+    ]
+  },
+  "SRCDEV PricingCard CSS Override": {
+    "description": "CSS override scaffold for PricingCard tokens",
+    "scope": "css",
+    "body": [
+      ".$1pricing-page {",
+      "  .pricing-card {",
+      "    --pricing-card-border-radius: $2;",
+      "    --pricing-card-padding: $3;",
+      "    --pricing-card-gap: $4;",
+      "    --pricing-card-shadow: $5;",
+      "    --pricing-card-name-color: $6;",
+      "    --pricing-card-amount-color: $7;",
+      "    --pricing-card-cta-bg: $8;",
+      "    --pricing-card-cta-bg-hover: $9;",
+      "",
+      "    &.is-highlighted {",
+      "      --pricing-card-highlight-border: $10;",
+      "      --pricing-card-highlight-shadow: $11;",
+      "      --pricing-card-highlight-scale: $12;",
+      "    }",
+      "  }",
+      "}"
+    ]
+  }
+}