srcdev-nuxt-components 9.4.11 → 9.5.0

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

@@ -1,66 +1,22 @@
 {
-  "SRCDEV DisplayPrompt Template": {
-    "description": "DisplayPrompt inline notification banner with all slots",
+  "SRCDEV DisplayPrompt": {
+    "description": "DisplayPrompt inline notice with title and content",
     "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 theme=\"${1|info,success,warning,error|}\"${2: dismissible}>",
+      "  <template #title>$3</template>",
+      "  <template #content>$4</template>",
       "</DisplayPrompt>"
     ]
   },
-  "SRCDEV DisplayPrompt Masked Template": {
-    "description": "DisplayPrompt with SVG glass border — place over a coloured background",
+  "SRCDEV DisplayPrompt Parent Controlled": {
+    "description": "DisplayPrompt shown and dismissed via v-model",
     "scope": "vue,html",
     "body": [
-      "<DisplayPrompt",
-      "  theme=\"$1info\"",
-      "  :masked=\"true\"",
-      "  :dismissible=\"true\"",
-      ">",
-      "  <template #title>$2Prompt title</template>",
-      "  <template #content>$3Prompt body text.</template>",
+      "<DisplayPrompt v-if=\"$1showPrompt\" v-model=\"$1showPrompt\" theme=\"${2|info,success,warning,error|}\" dismissible close-label=\"${3:Close this prompt}\">",
+      "  <template #title>$4</template>",
+      "  <template #content>$5</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-qr-code.code-snippets

@@ -0,0 +1,22 @@
+{
+  "SRCDEV DisplayQrCode": {
+    "description": "DisplayQrCode rendering a value as an accessible QR image",
+    "scope": "vue,html",
+    "body": [
+      "<DisplayQrCode qr-value=\"$1\" aria-label=\"${2:QR code}\" size=\"${3:256px}\" />"
+    ]
+  },
+  "SRCDEV DisplayQrCode Styled": {
+    "description": "DisplayQrCode with colours, radius and shape variants",
+    "scope": "vue,html",
+    "body": [
+      "<DisplayQrCode",
+      "  qr-value=\"$1\"",
+      "  aria-label=\"$2\"",
+      "  black-color=\"${3:currentColor}\"",
+      "  :radius=\"${4:0.5}\"",
+      "  :variant=\"{ inner: '${5|default,circle,rounded,dots,classy,classy-rounded|}', marker: '${6|default,circle,rounded,dots,classy,classy-rounded|}', pixel: '${7|default,circle,rounded,dots,classy,classy-rounded|}' }\"",
+      "/>"
+    ]
+  }
+}

package/.vscode/srcdev-component-eyebrow-text.code-snippets

@@ -0,0 +1,19 @@
+{
+  "SRCDEV EyebrowText": {
+    "description": "EyebrowText label above a heading",
+    "scope": "vue,html",
+    "body": [
+      "<EyebrowText text-content=\"$1\" font-size=\"${2|medium,large,small|}\" tag=\"${3|div,p,span|}\" />"
+    ]
+  },
+  "SRCDEV EyebrowText CSS Override": {
+    "description": "CSS override scaffold for EyebrowText tokens",
+    "scope": "css",
+    "body": [
+      ".$1my-page {",
+      "  --eyebrow-text-bg-img: linear-gradient(135deg, $2, $3);",
+      "  --eyebrow-text-medium: $4;",
+      "}"
+    ]
+  }
+}

package/.vscode/srcdev-component-form-field.code-snippets

@@ -0,0 +1,25 @@
+{
+  "SRCDEV FormField Basic": {
+    "description": "FormField layout wrapper around a single form control",
+    "scope": "vue,html",
+    "body": [
+      "<FormField width=\"${1|wide,medium,narrow|}\" :has-gutter=\"${2|false,true|}\" :field-has-error=\"!!$3errors.fieldName\">",
+      "  $0",
+      "</FormField>"
+    ]
+  },
+  "SRCDEV FormField CSS Override": {
+    "description": "CSS override scaffold for FormField tokens",
+    "scope": "css",
+    "body": [
+      ".$1my-page {",
+      "  .form-field {",
+      "    --form-field-max-width-narrow: $2;",
+      "    --form-field-gutter-width: $3;",
+      "    --form-field-margin-block: $4;",
+      "    --form-field-background-color: $5;",
+      "  }",
+      "}"
+    ]
+  }
+}

package/.vscode/srcdev-component-form-fieldset.code-snippets

@@ -0,0 +1,36 @@
+{
+  "SRCDEV FormFieldset Basic": {
+    "description": "FormFieldset: fieldset + legend wrapper for a group of controls",
+    "scope": "vue,html",
+    "body": [
+      "<FormFieldset",
+      "  id=\"$1fieldId\"",
+      "  name=\"$2fieldName\"",
+      "  legend=\"$3Legend\"",
+      "  group-role=\"${4|group,radiogroup|}\"",
+      "  :field-has-error=\"!!$5errors.fieldName\"",
+      ">",
+      "  <template #content>",
+      "    $0",
+      "  </template>",
+      "</FormFieldset>"
+    ]
+  },
+  "SRCDEV FormFieldset CSS Override": {
+    "description": "CSS override scaffold for FormFieldset tokens",
+    "scope": "css",
+    "body": [
+      ".$1my-page {",
+      "  .form-fieldset {",
+      "    --form-fieldset-padding-block: $6;",
+      "    --form-fieldset-padding-inline: $7;",
+      "    --form-fieldset-border: $8;",
+      "    --form-fieldset-legend-color: $2;",
+      "    --form-fieldset-legend-font-size: $3;",
+      "    --form-fieldset-legend-font-weight: $4;",
+      "    --form-fieldset-legend-margin-block: $5;",
+      "  }",
+      "}"
+    ]
+  }
+}

package/.vscode/srcdev-component-form-wrapper.code-snippets

@@ -0,0 +1,30 @@
+{
+  "SRCDEV FormWrapper Basic": {
+    "description": "FormWrapper: width-capped container around a form, with FormField children",
+    "scope": "vue,html",
+    "body": [
+      "<FormWrapper width=\"${1|medium,narrow,wide|}\">",
+      "  <form @submit.prevent=\"$2submitForm\">",
+      "    <FormField width=\"wide\" :has-gutter=\"false\">",
+      "      $0",
+      "    </FormField>",
+      "  </form>",
+      "</FormWrapper>"
+    ]
+  },
+  "SRCDEV FormWrapper CSS Override": {
+    "description": "CSS override scaffold for FormWrapper tokens",
+    "scope": "css",
+    "body": [
+      ".$1my-page {",
+      "  .form-wrapper {",
+      "    --form-wrapper-max-width-medium: $2;",
+      "    --form-wrapper-margin-block: $5;",
+      "    --form-wrapper-margin-inline: $3;",
+      "    --form-wrapper-border: $6;",
+      "    --form-wrapper-padding-block: $4;",
+      "  }",
+      "}"
+    ]
+  }
+}

package/.vscode/srcdev-component-glass-panel.code-snippets

@@ -0,0 +1,38 @@
+{
+  "SRCDEV GlassPanel Basic": {
+    "description": "GlassPanel: frosted-glass container",
+    "scope": "vue,html",
+    "body": [
+      "<GlassPanel>",
+      "  $0",
+      "</GlassPanel>"
+    ]
+  },
+  "SRCDEV GlassPanel Section": {
+    "description": "GlassPanel as a labelled <section>, heading bound via the headingId slot prop",
+    "scope": "vue,html",
+    "body": [
+      "<GlassPanel tag=\"${1|section,article|}\">",
+      "  <template #default=\"{ headingId }\">",
+      "    <h2 :id=\"headingId\">$2Heading</h2>",
+      "    $0",
+      "  </template>",
+      "</GlassPanel>"
+    ]
+  },
+  "SRCDEV GlassPanel CSS Override": {
+    "description": "CSS override scaffold for GlassPanel tokens",
+    "scope": "css",
+    "body": [
+      ".$1my-page {",
+      "  .glass-panel {",
+      "    --glass-panel-bg: $2;",
+      "    --glass-panel-border-color: $3;",
+      "    --glass-panel-shadow: $4;",
+      "    --glass-panel-highlight: $5;",
+      "    --glass-panel-border-radius: $6;",
+      "  }",
+      "}"
+    ]
+  }
+}

package/.vscode/srcdev-component-grid-stack.code-snippets

@@ -0,0 +1,49 @@
+{
+  "SRCDEV GridStack Basic": {
+    "description": "GridStack with a base layer and an overlay layer (last slot paints on top)",
+    "scope": "vue,html",
+    "body": [
+      "<GridStack${1: tag=\"section\"}>",
+      "  <template #layer-1>",
+      "    $2",
+      "  </template>",
+      "  <template #layer-2>",
+      "    $3",
+      "  </template>",
+      "</GridStack>"
+    ]
+  },
+  "SRCDEV GridStack Video Overlay": {
+    "description": "GridStack with a BannerVideo base layer and a centred content overlay",
+    "scope": "vue,html",
+    "body": [
+      "<GridStack tag=\"section\">",
+      "  <template #layer-1>",
+      "    <BannerVideo src=\"$1\" poster=\"$2\" alt=\"$3\" />",
+      "  </template>",
+      "  <template #layer-2>",
+      "    <div class=\"$4hero-overlay\">",
+      "      $5",
+      "    </div>",
+      "  </template>",
+      "</GridStack>"
+    ]
+  },
+  "SRCDEV GridStack CSS Override": {
+    "description": "CSS override scaffold for GridStack (no tokens; root and layer classes)",
+    "scope": "css",
+    "body": [
+      ".$1my-page {",
+      "  .grid-stack {",
+      "    block-size: $2;",
+      "  }",
+      "",
+      "  .grid-stack__layer:last-child {",
+      "    display: grid;",
+      "    place-items: center;",
+      "    pointer-events: none;",
+      "  }",
+      "}"
+    ]
+  }
+}

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

@@ -0,0 +1,27 @@
+{
+  "SRCDEV InputButton": {
+    "description": "InputButton",
+    "scope": "vue,html",
+    "body": [
+      "<InputButton variant=\"${1|primary,secondary,tertiary,inline|}\" button-text=\"$2\" type=\"${3|button,submit,reset|}\" @click=\"$4\" />"
+    ]
+  },
+  "SRCDEV InputButton Link With Icon": {
+    "description": "InputButton rendered as a link, with a trailing icon",
+    "scope": "vue,html",
+    "body": [
+      "<InputButton variant=\"${1|secondary,primary,tertiary|}\" button-text=\"$2\" href=\"$3\">",
+      "  <template #right><Icon name=\"${4:mdi:arrow-right}\" class=\"icon\" /></template>",
+      "</InputButton>"
+    ]
+  },
+  "SRCDEV InputButton Icon Only": {
+    "description": "Icon-only InputButton (buttonText becomes the accessible name)",
+    "scope": "vue,html",
+    "body": [
+      "<InputButton variant=\"${1|tertiary,secondary,primary|}\" button-text=\"${2:Accessible label}\" @click=\"$3\">",
+      "  <template #iconOnly><Icon name=\"${4:mdi:close}\" class=\"icon\" /></template>",
+      "</InputButton>"
+    ]
+  }
+}

package/.vscode/srcdev-component-input-checkbox-radio.code-snippets

@@ -0,0 +1,60 @@
+{
+  "SRCDEV InputCheckboxRadio": {
+    "description": "Bare checkbox/radio control (pair with your own label[for])",
+    "scope": "vue,html",
+    "body": [
+      "<InputCheckboxRadio",
+      "  id=\"${1:id}\"",
+      "  v-model=\"${2:state.value}\"",
+      "  type=\"${3|checkbox,radio|}\"",
+      "  name=\"${4:name}\"",
+      "  :true-value=\"${5:true}\"",
+      "/>$0"
+    ]
+  },
+  "SRCDEV InputCheckboxRadioField": {
+    "description": "Checkbox/radio with a text label",
+    "scope": "vue,html",
+    "body": [
+      "<InputCheckboxRadioField",
+      "  v-model=\"${1:state.value}\"",
+      "  type=\"${2|checkbox,radio|}\"",
+      "  name=\"${3:name}\"",
+      "  label=\"${4:Label}\"",
+      "/>$0"
+    ]
+  },
+  "SRCDEV InputCheckboxRadioButton Group": {
+    "description": "Button/pill checkbox or radio options from an array",
+    "scope": "vue,html",
+    "body": [
+      "<InputCheckboxRadioButton",
+      "  v-for=\"option in ${1:options}\"",
+      "  :id=\"`${2:name}-\\${option.value}`\"",
+      "  :key=\"option.value\"",
+      "  v-model=\"${3:state.value}\"",
+      "  type=\"${4|checkbox,radio|}\"",
+      "  name=\"${2:name}\"",
+      "  :label=\"option.label\"",
+      "  :true-value=\"option.value\"",
+      "  :multiple-options=\"${5|true,false|}\"",
+      "  :is-pill=\"${6|false,true|}\"",
+      "/>$0"
+    ]
+  },
+  "SRCDEV InputCheckboxRadio CSS Override": {
+    "description": "CSS override scaffold for checkbox/radio tokens",
+    "scope": "css",
+    "body": [
+      ".$1my-page {",
+      "  --input-checkbox-surface: $2;",
+      "  --input-checkbox-border: $3;",
+      "  --input-checkbox-icon-color: $4;",
+      "  --input-checkbox-label-color: $5;",
+      "  --input-checkbox-button-surface: $6;",
+      "  --input-checkbox-button-surface-hover: $7;",
+      "  --input-checkbox-button-border-radius: $8;",
+      "}"
+    ]
+  }
+}

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

@@ -0,0 +1,48 @@
+{
+  "SRCDEV MultipleCheckboxes Basic": {
+    "description": "MultipleCheckboxes: checkbox group built from a data list, with legend and error",
+    "scope": "vue,html",
+    "body": [
+      "<MultipleCheckboxes",
+      "  v-model=\"$1state.fieldName\"",
+      "  v-model:field-data=\"$2fieldOptions\"",
+      "  name=\"$3fieldName\"",
+      "  legend=\"$4Choose all that apply\"",
+      "  :error-message=\"$5errors.fieldName\"",
+      "  :field-has-error=\"!!$5errors.fieldName\"",
+      "  options-layout=\"${6|equal-widths,inline,block|}\"",
+      "  :is-button=\"${7|false,true|}\"",
+      "/>"
+    ]
+  },
+  "SRCDEV SingleCheckbox Basic": {
+    "description": "SingleCheckbox: one labelled checkbox, e.g. terms agreement",
+    "scope": "vue,html",
+    "body": [
+      "<SingleCheckbox",
+      "  v-model=\"$1state.terms\"",
+      "  name=\"$2terms\"",
+      "  legend=\"$3Terms and conditions\"",
+      "  label=\"$4I agree to the terms\"",
+      "  :required=\"true\"",
+      "  :error-message=\"$5errors.terms\"",
+      "  :field-has-error=\"!!$5errors.terms\"",
+      "/>"
+    ]
+  },
+  "SRCDEV InputCheckbox CSS Override": {
+    "description": "CSS override scaffold for MultipleCheckboxes/SingleCheckbox spacing tokens",
+    "scope": "css",
+    "body": [
+      ".$1my-page {",
+      "  .multiple-checkboxes-fieldset {",
+      "    --multiple-checkboxes-gap: $2;",
+      "    --multiple-checkboxes-margin-block-start: $3;",
+      "  }",
+      "  .single-checkbox-fieldset {",
+      "    --single-checkbox-margin-block-start: $4;",
+      "  }",
+      "}"
+    ]
+  }
+}

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

@@ -0,0 +1,44 @@
+{
+  "SRCDEV InputDescription Basic": {
+    "description": "InputDescription help text for a custom field wrapper (link its id via aria-describedby)",
+    "scope": "vue,html",
+    "body": [
+      "<InputDescription :description-id=\"${1:descriptionId}\" :field-has-error=\"${2:fieldHasError}\" input-variant=\"${3|normal,outlined,underlined|}\">",
+      "  <template #descriptionText>${4:Help text}</template>",
+      "</InputDescription>$0"
+    ]
+  },
+  "SRCDEV InputDescription Forwarded Slots": {
+    "description": "InputDescription inside a wrapper, forwarding description slots only when provided",
+    "scope": "vue,html",
+    "body": [
+      "<InputDescription :description-id :input-variant :field-has-error>",
+      "  <template v-if=\"slots.descriptionHtml\" #descriptionHtml>",
+      "    <slot name=\"descriptionHtml\"></slot>",
+      "  </template>",
+      "  <template v-if=\"slots.descriptionText\" #descriptionText>",
+      "    <slot name=\"descriptionText\"></slot>",
+      "  </template>",
+      "</InputDescription>$0"
+    ]
+  },
+  "SRCDEV InputDescription CSS Override": {
+    "description": "CSS override scaffold for InputDescription tokens",
+    "scope": "css",
+    "body": [
+      ".$1my-page {",
+      "  --input-description-color: $2;",
+      "  --input-description-font-size: $3;",
+      "  --input-description-line-height: $4;",
+      "  --input-description-background-color: $5;",
+      "  --input-description-margin-block: $6;",
+      "  --input-description-padding-block: $7;",
+      "  --input-description-padding-inline: $8;",
+      "  --input-description-border: $9;",
+      "  --input-description-border-radius: $10;",
+      "  --input-description-slot-margin-block-start: $11;",
+      "  --input-description-slot-margin-block-end: $12;",
+      "}"
+    ]
+  }
+}

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

@@ -0,0 +1,30 @@
+{
+  "SRCDEV InputError Basic": {
+    "description": "InputError message strip for a custom field wrapper (place in grid row 2 under the control)",
+    "scope": "vue,html",
+    "body": [
+      "<InputError",
+      "  :id=\"${1:errorId}\"",
+      "  :error-message=\"${2:errorMessage}\"",
+      "  :show-error=\"${3:fieldHasError}\"",
+      "  :is-detached=\"${4|false,true|}\"",
+      "  input-variant=\"${5|normal,outlined,underlined|}\"",
+      "></InputError>$0"
+    ]
+  },
+  "SRCDEV InputError CSS Override": {
+    "description": "CSS override scaffold for InputError tokens",
+    "scope": "css",
+    "body": [
+      ".$1my-page {",
+      "  --input-error-text-color: $2;",
+      "  --input-error-background-color: $3;",
+      "  --input-error-border-color: $4;",
+      "  --input-error-outline-color: $5;",
+      "  --input-error-border-radius: $6;",
+      "  --input-error-font-size: $7;",
+      "  --input-error-detached-offset: $8;",
+      "}"
+    ]
+  }
+}

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

@@ -0,0 +1,39 @@
+{
+  "SRCDEV InputLabel Basic": {
+    "description": "InputLabel for a custom field wrapper (id is the control's id, rendered as for)",
+    "scope": "vue,html",
+    "body": [
+      "<InputLabel :id=\"${1:inputId}\" :field-has-error=\"${2:fieldHasError}\" input-variant=\"${3|normal,outlined,underlined|}\">",
+      "  <template #textLabel>${4:Label}</template>",
+      "</InputLabel>$0"
+    ]
+  },
+  "SRCDEV InputLabel Indicator app.config": {
+    "description": "Site-wide required/optional marker for every InputLabel (app.config.ts)",
+    "scope": "typescript",
+    "body": [
+      "inputLabel: {",
+      "  indicator: \"${1|required,optional,none|}\",",
+      "  requiredText: \"${2:*}\",",
+      "  optionalText: \"${3:(optional)}\",",
+      "},$0"
+    ]
+  },
+  "SRCDEV InputLabel CSS Override": {
+    "description": "CSS override scaffold for InputLabel tokens",
+    "scope": "css",
+    "body": [
+      ".$1my-page {",
+      "  --input-label-color: $2;",
+      "  --input-label-font-size: $3;",
+      "  --input-label-font-weight: $4;",
+      "  --input-label-line-height: $5;",
+      "  --input-label-margin-block: $6;",
+      "  --input-label-margin-inline: $7;",
+      "  --input-label-indicator-color-required: $8;",
+      "  --input-label-indicator-color-optional: $9;",
+      "  --input-label-indicator-gap: $10;",
+      "}"
+    ]
+  }
+}

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

@@ -1,9 +1,9 @@
 {
-  "SRCDEV InputNumberCore Basic": {
-    "description": "Basic InputNumberCore native number input (no label/error wrapper)",
+  "SRCDEV InputNumber Basic": {
+    "description": "Basic InputNumber native number input (no label/error wrapper)",
     "scope": "vue,html",
     "body": [
-      "<InputNumberCore",
+      "<InputNumber",
       "  id=\"$1fieldId\"",
       "  name=\"$2fieldName\"",
       "  v-model=\"$3fieldValue\"",
@@ -13,11 +13,11 @@
       "/>"
     ]
   },
-  "SRCDEV InputNumberDefault Basic": {
-    "description": "InputNumberDefault: labelled number input with error/description support",
+  "SRCDEV InputNumberField Basic": {
+    "description": "InputNumberField: labelled number input with error/description support",
     "scope": "vue,html",
     "body": [
-      "<InputNumberDefault",
+      "<InputNumberField",
       "  v-model=\"$1fieldValue\"",
       "  name=\"$2fieldName\"",
       "  label=\"$3Field label\"",
@@ -29,11 +29,11 @@
       "/>"
     ]
   },
-  "SRCDEV InputNumberDefault With Step Buttons": {
-    "description": "InputNumberDefault with step-down/step-up buttons wired into the left/right slots",
+  "SRCDEV InputNumberField With Step Buttons": {
+    "description": "InputNumberField with step-down/step-up buttons wired into the left/right slots",
     "scope": "vue,html",
     "body": [
-      "<InputNumberDefault",
+      "<InputNumberField",
       "  v-model=\"$1fieldValue\"",
       "  name=\"$2fieldName\"",
       "  label=\"$3Field label\"",
@@ -45,11 +45,11 @@
       ">",
       "  <template #left>\\u2212</template>",
       "  <template #right>+</template>",
-      "</InputNumberDefault>"
+      "</InputNumberField>"
     ]
   },
   "SRCDEV InputNumber CSS Override": {
-    "description": "CSS override scaffold for InputNumberCore tokens",
+    "description": "CSS override scaffold for InputNumber tokens",
     "scope": "css",
     "body": [
       ".$1my-page {",