srcdev-nuxt-components 9.4.9 → 9.4.11

package/.vscode/srcdev-component-carousel-flip.code-snippets

@@ -0,0 +1,41 @@
+{
+  "SRCDEV CarouselFlip Basic": {
+    "description": "CarouselFlip with looped item slots",
+    "scope": "vue,html",
+    "body": [
+      "<CarouselFlip :carousel-data-ids=\"$1items.map((item) => item.id)\">",
+      "  <template v-for=\"$2item in $1items\" :key=\"$2item.id\" #[$2item.id]>",
+      "    $3",
+      "  </template>",
+      "</CarouselFlip>"
+    ]
+  },
+  "SRCDEV CarouselFlip Overlay Controls": {
+    "description": "CarouselFlip with markers floating over the item track",
+    "scope": "vue,html",
+    "body": [
+      "<CarouselFlip",
+      "  :carousel-data-ids=\"$1items.map((item) => item.id)\"",
+      "  button-layout=\"overlay\"",
+      "  :use-flip-animation=\"true\"",
+      ">",
+      "  <template v-for=\"$2item in $1items\" :key=\"$2item.id\" #[$2item.id]>",
+      "    $3",
+      "  </template>",
+      "</CarouselFlip>"
+    ]
+  },
+  "SRCDEV CarouselFlip CSS Override": {
+    "description": "CSS override scaffold for CarouselFlip tokens",
+    "scope": "css",
+    "body": [
+      ".$1my-page {",
+      "  .carousel-flip {",
+      "    --carousel-flip-gap: $2;",
+      "    --carousel-flip-marker-active-colour: $3;",
+      "    --carousel-flip-button-background-colour: $4;",
+      "  }",
+      "}"
+    ]
+  }
+}

package/.vscode/srcdev-component-container-glow.code-snippets

@@ -0,0 +1,33 @@
+{
+  "SRCDEV ContainerGlow Basic": {
+    "description": "ContainerGlow — pointer-proximity glow-border card(s), one card per named slot",
+    "scope": "vue,html",
+    "body": [
+      "<ContainerGlow>",
+      "  <template #${1:one}>",
+      "    $0",
+      "  </template>",
+      "</ContainerGlow>"
+    ]
+  },
+  "SRCDEV ContainerGlow With Config": {
+    "description": "ContainerGlow with custom proximity/spread/blur/gap/vertical config",
+    "scope": "vue,html",
+    "body": [
+      "<ContainerGlow",
+      "  :config=\"{",
+      "    proximity: ${1:40},",
+      "    spread: ${2:80},",
+      "    blur: ${3:20},",
+      "    gap: ${4:32},",
+      "    vertical: ${5:false},",
+      "    inactiveOpacity: ${6:0},",
+      "  }\"",
+      ">",
+      "  <template #${7:one}>",
+      "    $0",
+      "  </template>",
+      "</ContainerGlow>"
+    ]
+  }
+}

package/.vscode/srcdev-component-dashboard-quad-grid.code-snippets

@@ -0,0 +1,36 @@
+{
+  "SRCDEV DashboardQuadGrid Basic": {
+    "description": "DashboardQuadGrid with all four fixed slots",
+    "scope": "vue,html",
+    "body": [
+      "<DashboardQuadGrid>",
+      "  <template #slot1>",
+      "    $1",
+      "  </template>",
+      "  <template #slot2>",
+      "    $2",
+      "  </template>",
+      "  <template #slot3>",
+      "    $3",
+      "  </template>",
+      "  <template #slot4>",
+      "    $4",
+      "  </template>",
+      "</DashboardQuadGrid>"
+    ]
+  },
+  "SRCDEV DashboardQuadGrid CSS Override": {
+    "description": "CSS override scaffold for DashboardQuadGrid tokens",
+    "scope": "css",
+    "body": [
+      ".$1my-page {",
+      "  .dashboard-quad-grid-wrapper {",
+      "    --dashboard-quad-grid-gap: $2;",
+      "    --dashboard-quad-grid-outline-colour: $3;",
+      "    --dashboard-quad-grid-border-width: $4;",
+      "    --dashboard-quad-grid-border-colour: $5;",
+      "  }",
+      "}"
+    ]
+  }
+}

package/.vscode/srcdev-component-dashboard-stats-grid.code-snippets

@@ -0,0 +1,35 @@
+{
+  "SRCDEV DashboardStatsGrid Basic": {
+    "description": "DashboardStatsGrid with looped top-row cluster, both static top-row slots, and looped bottom row",
+    "scope": "vue,html",
+    "body": [
+      "<DashboardStatsGrid :top-row-slot1-item-count=\"$1items.length\" :bottom-row-item-count=\"$2features.length\">",
+      "  <template v-for=\"($3item, $4index) in $1items\" :key=\"$3item.id\" #[`top-row-slot1-\\${$4index + 1}-content`]>",
+      "    $5",
+      "  </template>",
+      "  <template #top-row-slot-2>",
+      "    $6",
+      "  </template>",
+      "  <template #top-row-slot-3>",
+      "    $7",
+      "  </template>",
+      "  <template v-for=\"($8feature, $9findex) in $2features\" :key=\"$8feature.id\" #[`bottom-row-\\${$9findex + 1}-content`]>",
+      "    $10",
+      "  </template>",
+      "</DashboardStatsGrid>"
+    ]
+  },
+  "SRCDEV DashboardStatsGrid CSS Override": {
+    "description": "CSS override scaffold for DashboardStatsGrid tokens",
+    "scope": "css",
+    "body": [
+      ".$1my-page {",
+      "  .dashboard-stats-grid {",
+      "    --dashboard-stats-grid-gap: $2;",
+      "    --dashboard-stats-grid-border-colour: $3;",
+      "    --dashboard-stats-grid-rule-colour: $4;",
+      "  }",
+      "}"
+    ]
+  }
+}

package/.vscode/srcdev-component-display-theme-switch.code-snippets

@@ -0,0 +1,27 @@
+{
+  "SRCDEV DisplayThemeSwitch Basic": {
+    "description": "DisplayThemeSwitch — system/light/dark theme picker",
+    "scope": "vue,html",
+    "body": [
+      "<DisplayThemeSwitch />"
+    ]
+  },
+  "SRCDEV DisplayThemeSwitch Small": {
+    "description": "DisplayThemeSwitch compact size, for a header/nav slot",
+    "scope": "vue,html",
+    "body": [
+      "<DisplayThemeSwitch style-class-passthrough=\"small\" />"
+    ]
+  },
+  "SRCDEV DisplayThemeSwitch Custom Labels": {
+    "description": "DisplayThemeSwitch with translated/custom option labels",
+    "scope": "vue,html",
+    "body": [
+      "<DisplayThemeSwitch",
+      "  system-label=\"$1System\"",
+      "  light-label=\"$2Light\"",
+      "  dark-label=\"$3Dark\"",
+      "/>"
+    ]
+  }
+}

package/.vscode/srcdev-component-glowing-border.code-snippets

@@ -0,0 +1,23 @@
+{
+  "SRCDEV GlowingBorder Basic": {
+    "description": "GlowingBorder — animated conic-gradient glow border",
+    "scope": "vue,html",
+    "body": [
+      "<GlowingBorder variant=\"${1|subtle,vivid,silver,steel,green|}\">",
+      "  $0",
+      "</GlowingBorder>"
+    ]
+  },
+  "SRCDEV GlowingBorder Custom Tokens": {
+    "description": "GlowingBorder with custom width/radius/animation-duration CSS tokens",
+    "scope": "vue,html",
+    "body": [
+      "<GlowingBorder",
+      "  variant=\"${1|subtle,vivid,silver,steel,green|}\"",
+      "  style=\"--glowing-border-width: ${2:3px}; --glowing-border-radius: ${3:30px}; --glowing-border-animation-duration: ${4:10s};\"",
+      ">",
+      "  $0",
+      "</GlowingBorder>"
+    ]
+  }
+}

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

@@ -0,0 +1,65 @@
+{
+  "SRCDEV InputNumberCore Basic": {
+    "description": "Basic InputNumberCore native number input (no label/error wrapper)",
+    "scope": "vue,html",
+    "body": [
+      "<InputNumberCore",
+      "  id=\"$1fieldId\"",
+      "  name=\"$2fieldName\"",
+      "  v-model=\"$3fieldValue\"",
+      "  :min=\"$40\"",
+      "  :max=\"$5100\"",
+      "  :step=\"$61\"",
+      "/>"
+    ]
+  },
+  "SRCDEV InputNumberDefault Basic": {
+    "description": "InputNumberDefault: labelled number input with error/description support",
+    "scope": "vue,html",
+    "body": [
+      "<InputNumberDefault",
+      "  v-model=\"$1fieldValue\"",
+      "  name=\"$2fieldName\"",
+      "  label=\"$3Field label\"",
+      "  :min=\"$40\"",
+      "  :max=\"$5100\"",
+      "  :step=\"$61\"",
+      "  :error-message=\"$7errors.fieldName\"",
+      "  :field-has-error=\"!!$7errors.fieldName\"",
+      "/>"
+    ]
+  },
+  "SRCDEV InputNumberDefault With Step Buttons": {
+    "description": "InputNumberDefault with step-down/step-up buttons wired into the left/right slots",
+    "scope": "vue,html",
+    "body": [
+      "<InputNumberDefault",
+      "  v-model=\"$1fieldValue\"",
+      "  name=\"$2fieldName\"",
+      "  label=\"$3Field label\"",
+      "  :min=\"$40\"",
+      "  :max=\"$5100\"",
+      "  :step=\"$61\"",
+      "  :error-message=\"$7errors.fieldName\"",
+      "  :field-has-error=\"!!$7errors.fieldName\"",
+      ">",
+      "  <template #left>\\u2212</template>",
+      "  <template #right>+</template>",
+      "</InputNumberDefault>"
+    ]
+  },
+  "SRCDEV InputNumber CSS Override": {
+    "description": "CSS override scaffold for InputNumberCore tokens",
+    "scope": "css",
+    "body": [
+      ".$1my-page {",
+      "  .input-number-wrapper {",
+      "    --input-number-surface: $2;",
+      "    --input-number-border: $3;",
+      "    --input-number-border-hover: $4;",
+      "    --input-number-border-focus: $5;",
+      "  }",
+      "}"
+    ]
+  }
+}

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

@@ -0,0 +1,85 @@
+{
+  "SRCDEV InputRangeCore Basic": {
+    "description": "Basic InputRangeCore native range input (no label/error wrapper)",
+    "scope": "vue,html",
+    "body": [
+      "<InputRangeCore",
+      "  id=\"$1fieldId\"",
+      "  name=\"$2fieldName\"",
+      "  v-model=\"$3fieldValue\"",
+      "  :min=\"$40\"",
+      "  :max=\"$5100\"",
+      "  :step=\"$61\"",
+      "/>"
+    ]
+  },
+  "SRCDEV InputRangeCore With Markers": {
+    "description": "InputRangeCore with custom tick-mark markers overlaid on the track",
+    "scope": "vue,html",
+    "body": [
+      "<InputRangeCore",
+      "  id=\"$1fieldId\"",
+      "  name=\"$2fieldName\"",
+      "  v-model=\"$3fieldValue\"",
+      "  :min=\"$40\"",
+      "  :max=\"$52\"",
+      "  :step=\"$61\"",
+      ">",
+      "  <template #markers>",
+      "    <div class=\"input-range-markers\">",
+      "      <div class=\"marker\"><span class=\"marker-icon\">$7\\ud83d\\ude00</span></div>",
+      "      <div class=\"marker\"><span class=\"marker-icon\">$8\\ud83d\\ude10</span></div>",
+      "      <div class=\"marker\"><span class=\"marker-icon\">$9\\ud83d\\ude1e</span></div>",
+      "    </div>",
+      "  </template>",
+      "</InputRangeCore>"
+    ]
+  },
+  "SRCDEV InputRangeDefault Basic": {
+    "description": "InputRangeDefault: labelled range slider with error/description support",
+    "scope": "vue,html",
+    "body": [
+      "<InputRangeDefault",
+      "  v-model=\"$1fieldValue\"",
+      "  name=\"$2fieldName\"",
+      "  label=\"$3Field label\"",
+      "  :min=\"$40\"",
+      "  :max=\"$5100\"",
+      "  :step=\"$61\"",
+      "  :error-message=\"$7errors.fieldName\"",
+      "  :field-has-error=\"!!$7errors.fieldName\"",
+      "/>"
+    ]
+  },
+  "SRCDEV InputRangeDefault With Step Buttons": {
+    "description": "InputRangeDefault with step-down/step-up buttons wired into the left/right slots",
+    "scope": "vue,html",
+    "body": [
+      "<InputRangeDefault",
+      "  v-model=\"$1fieldValue\"",
+      "  name=\"$2fieldName\"",
+      "  label=\"$3Field label\"",
+      "  :min=\"$40\"",
+      "  :max=\"$5100\"",
+      "  :step=\"$61\"",
+      "  :error-message=\"$7errors.fieldName\"",
+      "  :field-has-error=\"!!$7errors.fieldName\"",
+      ">",
+      "  <template #left>\\u2212</template>",
+      "  <template #right>+</template>",
+      "</InputRangeDefault>"
+    ]
+  },
+  "SRCDEV InputRange CSS Override": {
+    "description": "CSS override scaffold for InputRangeCore tokens",
+    "scope": "css",
+    "body": [
+      ".$1my-page {",
+      "  .input-range-wrapper {",
+      "    --input-range-accent-colour: $2;",
+      "    --input-range-marker-background-colour: $3;",
+      "  }",
+      "}"
+    ]
+  }
+}

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

@@ -0,0 +1,42 @@
+{
+  "SRCDEV InputSelectCore Basic": {
+    "description": "Basic InputSelectCore native select (no label/error wrapper)",
+    "scope": "vue,html",
+    "body": [
+      "<InputSelectCore",
+      "  id=\"$1fieldId\"",
+      "  name=\"$2fieldName\"",
+      "  v-model=\"$3fieldValue\"",
+      "  v-model:field-data=\"$4fieldOptions\"",
+      "  placeholder=\"$5Choose an option\"",
+      "/>"
+    ]
+  },
+  "SRCDEV InputSelectWithLabel Basic": {
+    "description": "InputSelectWithLabel: labelled select with error/description support",
+    "scope": "vue,html",
+    "body": [
+      "<InputSelectWithLabel",
+      "  v-model=\"$1fieldValue\"",
+      "  v-model:field-data=\"$2fieldOptions\"",
+      "  name=\"$3fieldName\"",
+      "  label=\"$4Field label\"",
+      "  placeholder=\"$5Choose an option\"",
+      "  :error-message=\"$6errors.fieldName\"",
+      "  :field-has-error=\"!!$6errors.fieldName\"",
+      "/>"
+    ]
+  },
+  "SRCDEV InputSelect CSS Override": {
+    "description": "CSS override scaffold for InputSelectCore tokens",
+    "scope": "css",
+    "body": [
+      ".$1my-page {",
+      "  .input-select-wrapper {",
+      "    --input-select-surface: $2;",
+      "    --input-select-border: $3;",
+      "  }",
+      "}"
+    ]
+  }
+}

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

@@ -0,0 +1,40 @@
+{
+  "SRCDEV InputTextareaCore Basic": {
+    "description": "Basic InputTextareaCore native textarea (no label/error wrapper)",
+    "scope": "vue,html",
+    "body": [
+      "<InputTextareaCore",
+      "  id=\"$1fieldId\"",
+      "  name=\"$2fieldName\"",
+      "  v-model=\"$3fieldValue\"",
+      "  placeholder=\"$4Placeholder text\"",
+      "/>"
+    ]
+  },
+  "SRCDEV InputTextareaWithLabel Basic": {
+    "description": "InputTextareaWithLabel: labelled textarea with error/description support",
+    "scope": "vue,html",
+    "body": [
+      "<InputTextareaWithLabel",
+      "  v-model=\"$1fieldValue\"",
+      "  name=\"$2fieldName\"",
+      "  label=\"$3Field label\"",
+      "  placeholder=\"$4Placeholder text\"",
+      "  :error-message=\"$5errors.fieldName\"",
+      "  :field-has-error=\"!!$5errors.fieldName\"",
+      "/>"
+    ]
+  },
+  "SRCDEV InputTextarea CSS Override": {
+    "description": "CSS override scaffold for InputTextareaCore tokens",
+    "scope": "css",
+    "body": [
+      ".$1my-page {",
+      "  .input-textarea-wrapper {",
+      "    --input-textarea-surface: $2;",
+      "    --input-textarea-border: $3;",
+      "  }",
+      "}"
+    ]
+  }
+}

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

@@ -0,0 +1,27 @@
+{
+  "SRCDEV SectionParallax Basic": {
+    "description": "SectionParallax — fixed-background parallax section",
+    "scope": "vue,html",
+    "body": [
+      "<SectionParallax",
+      "  tag=\"${1|section,div,article,aside|}\"",
+      "  background-image=\"${2:/images/example.jpg}\"",
+      ">",
+      "  $0",
+      "</SectionParallax>"
+    ]
+  },
+  "SRCDEV SectionParallax Custom Height": {
+    "description": "SectionParallax with custom min-height CSS tokens",
+    "scope": "vue,html",
+    "body": [
+      "<SectionParallax",
+      "  tag=\"${1|section,div,article,aside|}\"",
+      "  background-image=\"${2:/images/example.jpg}\"",
+      "  style=\"--section-parallax-min-height: ${3:60vh}; --section-parallax-min-height-fixed: ${4:70vh};\"",
+      ">",
+      "  $0",
+      "</SectionParallax>"
+    ]
+  }
+}

package/.vscode/srcdev-component-select-menu.code-snippets

@@ -0,0 +1,65 @@
+{
+  "SRCDEV SelectMenu Basic": {
+    "description": "SelectMenu — v-model single-select popover listbox",
+    "scope": "vue,html",
+    "body": [
+      "<SelectMenu",
+      "  v-model=\"${1:selectedValue}\"",
+      "  :options=\"${2:options}\"",
+      "  label=\"${3:Choose an option}\"",
+      "/>"
+    ]
+  },
+  "SRCDEV SelectMenu Icon Only": {
+    "description": "SelectMenu — icon-only compact trigger (e.g. language switcher)",
+    "scope": "vue,html",
+    "body": [
+      "<SelectMenu",
+      "  v-model=\"${1:language}\"",
+      "  :options=\"${2:languageOptions}\"",
+      "  label=\"${3:Language}\"",
+      "  :show-label=\"false\"",
+      "  :show-chevron=\"false\"",
+      "/>"
+    ]
+  },
+  "SRCDEV SelectMenu Category Filter": {
+    "description": "SelectMenu — text + chevron category filter, no per-option icons",
+    "scope": "vue,html",
+    "body": [
+      "<SelectMenu",
+      "  v-model=\"${1:filterValue}\"",
+      "  :options=\"${2:filterOptions}\"",
+      "  label=\"${3:Choose a service}\"",
+      "  :show-icon=\"false\"",
+      "/>"
+    ]
+  },
+  "SRCDEV SelectMenu Multi-Select": {
+    "description": "SelectMenu — checkbox-per-option multi-select, v-model is an array",
+    "scope": "vue,html",
+    "body": [
+      "<SelectMenu",
+      "  v-model=\"${1:selectedValues}\"",
+      "  :options=\"${2:options}\"",
+      "  label=\"${3:Services required}\"",
+      "  :show-icon=\"false\"",
+      "  multiple",
+      "/>"
+    ]
+  },
+  "SRCDEV SelectMenu Multi-Select Showing Selection": {
+    "description": "SelectMenu — multi-select where the trigger updates to list checked options",
+    "scope": "vue,html",
+    "body": [
+      "<SelectMenu",
+      "  v-model=\"${1:selectedValues}\"",
+      "  :options=\"${2:options}\"",
+      "  label=\"${3:Services required}\"",
+      "  :show-icon=\"false\"",
+      "  multiple",
+      "  show-selection-in-trigger",
+      "/>"
+    ]
+  }
+}

package/.vscode/srcdev-component-toggle-switch.code-snippets

@@ -0,0 +1,49 @@
+{
+  "SRCDEV ToggleSwitchCore": {
+    "description": "ToggleSwitchCore — bare toggle switch (no label, use ToggleSwitchWithLabel for that)",
+    "scope": "vue,html",
+    "body": [
+      "<ToggleSwitchCore",
+      "  v-model=\"$1modelValue\"",
+      "  id=\"$2toggle-id\"",
+      "  name=\"$3toggleName\"",
+      "/>"
+    ]
+  },
+  "SRCDEV ToggleSwitchWithLabel": {
+    "description": "ToggleSwitchWithLabel: labelled toggle switch with description/error support",
+    "scope": "vue,html",
+    "body": [
+      "<ToggleSwitchWithLabel",
+      "  v-model=\"$1fieldValue\"",
+      "  name=\"$2fieldName\"",
+      "  label=\"$3Field label\"",
+      "  :error-message=\"$4errors.fieldName\"",
+      "  :field-has-error=\"!!$4errors.fieldName\"",
+      "/>"
+    ]
+  },
+  "SRCDEV ToggleSwitchWithLabelInline": {
+    "description": "ToggleSwitchWithLabelInline: compact label + toggle switch side by side, no error support",
+    "scope": "vue,html",
+    "body": [
+      "<ToggleSwitchWithLabelInline",
+      "  v-model=\"$1fieldValue\"",
+      "  name=\"$2fieldName\"",
+      "  label=\"$3Field label\"",
+      "/>"
+    ]
+  },
+  "SRCDEV ToggleSwitch CSS Override": {
+    "description": "CSS override scaffold for ToggleSwitchCore tokens",
+    "scope": "css",
+    "body": [
+      ".$1my-page {",
+      "  .toggle-switch-wrapper {",
+      "    --toggle-switch-surface: $2;",
+      "    --toggle-switch-symbol-surface-on: $3;",
+      "  }",
+      "}"
+    ]
+  }
+}

package/.vscode/srcdev-component-ui-block-decorated.code-snippets

@@ -0,0 +1,24 @@
+{
+  "SRCDEV UiBlockDecorated Basic": {
+    "description": "UiBlockDecorated — plain block with border/shadow/inner-shadow strength props",
+    "scope": "vue,html",
+    "body": [
+      "<UiBlockDecorated :shadow-strength=\"$1{1|1,2,3,4,5,6|}\">",
+      "  $0",
+      "</UiBlockDecorated>"
+    ]
+  },
+  "SRCDEV UiBlockDecorated Combined": {
+    "description": "UiBlockDecorated with border, shadow and inner-shadow combined",
+    "scope": "vue,html",
+    "body": [
+      "<UiBlockDecorated",
+      "  :border-strength=\"$1{1|1,2,3,4,5,6|}\"",
+      "  :shadow-strength=\"$2{2|1,2,3,4,5,6|}\"",
+      "  :inner-shadow-strength=\"$3{1|1,2,3,4|}\"",
+      ">",
+      "  $0",
+      "</UiBlockDecorated>"
+    ]
+  }
+}

package/.vscode/srcdev-component-wipe-away-vertical.code-snippets

@@ -0,0 +1,25 @@
+{
+  "SRCDEV WipeAwayVertical Basic": {
+    "description": "WipeAwayVertical — scroll-driven vertical wipe-away effect with sticky/scrolling section pairs",
+    "scope": "vue,html",
+    "body": [
+      "<WipeAwayVertical :item-count=\"$13\">",
+      "  <template #stickyItem-0>$2</template>",
+      "  <template #stickyItem-1>$3</template>",
+      "  <template #stickyItem-2>$4</template>",
+      "",
+      "  <template #scrollingItem-0><div style=\"height: 100vh;\"></div></template>",
+      "  <template #scrollingItem-1><div style=\"height: 100vh;\"></div></template>",
+      "</WipeAwayVertical>$0"
+    ]
+  },
+  "SRCDEV WipeAwayVertical With Passthrough": {
+    "description": "WipeAwayVertical with styleClassPassthrough for a custom wrapper class",
+    "scope": "vue,html",
+    "body": [
+      "<WipeAwayVertical :item-count=\"$12\" style-class-passthrough=\"$2my-wipe-wrapper\">",
+      "  $0",
+      "</WipeAwayVertical>"
+    ]
+  }
+}