srcdev-nuxt-forms 6.0.1 → 6.1.1

package/README.md

@@ -83,18 +83,58 @@ Styles exist for multiple themes/variants, primary, secondary, tertiary, error e
 
 Colour scheme can be updated by modifying the css colour variables
 
-## Thing to note
+## Styles Architecture
 
-Must add modifier class within nuxt config to enable local css overrides:
+The `/app/assets/styles` folder contains the CSS architecture for this Nuxt layer, organized into two main directories:
 
-```bash
+### `/app/assets/styles/setup/`
+
+This directory contains the foundational styles that will be mirrored in any app that extends this layer. It includes:
+
+- **`index.css`** - Main setup file that imports all setup modules
+- **`_head.css`** - Head-level styles and document setup
+- **`a11y/`** - Accessibility utilities and variables
+- **`theming/`** - Theme definitions, color schemes, and theme variants
+- **`typography/`** - Typography setup, font definitions, and text utility classes
+- **`utility-classes/`** - General utility classes including fluid spacing and animations
+
+These styles form the base layer and will be automatically available in any app that extends this layer.
+
+### `/app/assets/styles/extends-layer/srcdev-forms/`
+
+This directory contains override styles specifically for apps that extend this layer. It includes:
+
+- **`index.css`** - Main override file
+- **`components/`** - Component-specific overrides
+- **`setup/`** - Setup overrides for extended apps
+
+This folder structure will also be present in the extending app's assets directory, allowing for easy customization and theming.
+
+### Layer Override Namespace
+
+To enable proper CSS override functionality, the extending app must include the `srcdev-forms-extended` class namespace:
+
+```ts
+// nuxt.config.ts in the extending app
+export default defineNuxtConfig({
+  extends: 'srcdev-nuxt-forms',
   app: {
     head: {
       htmlAttrs: {
-        class: 'your-site-class',
+        class: 'srcdev-forms-extended',
       },
     },
   },
+});
 ```
 
-This class must be added to css files located at `~/assets/styles/extends-layer/srcdev-forms/components`
+**Important:** All override CSS files in the extending app's `~/assets/styles/extends-layer/srcdev-forms/` directory must use the `.srcdev-forms-extended` class as a namespace prefix to ensure proper specificity and override behavior.
+
+Example override structure in the extending app:
+
+```css
+/* ~/assets/styles/extends-layer/srcdev-forms/components/button.css */
+.srcdev-forms-extended .btn-primary {
+  /* Your custom button styles */
+}
+```

package/app/assets/styles/extends-layer/srcdev-forms/components/_form-fieldset.css

@@ -1,4 +1,4 @@
-.your-site-class {
+.srcdev-forms-extended {
   .form-fieldset {
     margin: 0;
     padding: 0;

package/app/assets/styles/extends-layer/srcdev-forms/components/_input-button.css

@@ -1,4 +1,4 @@
-.your-site-class {
+.srcdev-forms-extended {
   .input-button-core {
     gap: var(--form-button-icon-gap);
     border-radius: var(--form-input-border-radius);

package/app/assets/styles/extends-layer/srcdev-forms/components/_input-checkbox-radio-core.css

@@ -1,4 +1,4 @@
-.your-site-class {
+.srcdev-forms-extended {
   .input-checkbox-radio-wrapper {
     background-color: var(--theme-checkbox-symbol-surface);
     border: var(--form-element-border-width) solid var(--theme-input-border);

package/app/assets/styles/extends-layer/srcdev-forms/components/_input-checkbox-radio-options-button.css

@@ -1,4 +1,4 @@
-.your-site-class {
+.srcdev-forms-extended {
   .input-checkbox-radio-options-button {
     gap: 1rem;
     border-radius: 1lh;

package/app/assets/styles/extends-layer/srcdev-forms/components/_input-error.css

@@ -1,4 +1,4 @@
-.your-site-class {
+.srcdev-forms-extended {
   .input-error-message {
     color: var(--input-error-color);
     background-color: var(--theme-error-surface);

package/app/assets/styles/extends-layer/srcdev-forms/components/_input-label.css

@@ -1,4 +1,4 @@
-.your-site-class {
+.srcdev-forms-extended {
   .input-label {
     &.normal {
       color: var(--form-label-color);

package/app/assets/styles/extends-layer/srcdev-forms/components/_input-select.css

@@ -1,4 +1,4 @@
-.your-site-class {
+.srcdev-forms-extended {
   .input-select-wrapper {
     background-color: var(--theme-input-surface);
 

package/app/assets/styles/extends-layer/srcdev-forms/components/_input-text.css

@@ -1,4 +1,4 @@
-.your-site-class {
+.srcdev-forms-extended {
   .input-text-wrapper {
     display: flex;
     align-items: center;

package/app/assets/styles/extends-layer/srcdev-forms/components/_input-textarea.css

@@ -1,4 +1,4 @@
-.your-site-class {
+.srcdev-forms-extended {
   .input-textarea-wrapper {
     /* Custom placeholder styles */
     background-color: var(--theme-input-surface);

package/app/assets/styles/setup/_head.css

@@ -26,7 +26,7 @@ html {
   overflow-x: hidden;
 }
 body {
-  color: var(--grayscale-text-body);
+  color: light-dark(var(--gray-12), var(--gray-3));
   font-family: var(--font-family);
   font-size: var(--step-4);
   min-height: 100vh;

package/app/assets/styles/setup/typography/vars/_reponsive-font-sizes.css

@@ -1,12 +1,12 @@
 :root {
-  --step-10: clamp(4.0311rem, 3.36rem + 3.3555vw, 5.9605rem); /* 10 */
-  --step-9: clamp(3.3592rem, 2.8691rem + 2.4507vw, 4.7684rem); /* 9 */
-  --step-8: clamp(2.7994rem, 2.4462rem + 1.7658vw, 3.8147rem); /* 8 */
-  --step-7: clamp(2.3328rem, 2.0827rem + 1.2504vw, 3.0518rem); /* 7 */
-  --step-6: clamp(1.944rem, 1.771rem + 0.8651vw, 2.4414rem); /* 6 */
-  --step-5: clamp(1.62rem, 1.5041rem + 0.5793vw, 1.9531rem); /* 5 */
-  --step-4: clamp(1.35rem, 1.2761rem + 0.3696vw, 1.5625rem); /* 4 */
-  --step-3: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem); /* 3 */
-  --step-2: clamp(0.9375rem, 0.9158rem + 0.1087vw, 1rem); /* 2 */
-  --step-1: clamp(0.7813rem, 0.7747rem + 0.0326vw, 0.8rem); /* 1 */
+  --step-10: clamp(4.0311rem, 3.36rem + 3.3555vw, 5.9605rem);
+  --step-9: clamp(3.3592rem, 2.8691rem + 2.4507vw, 4.7684rem);
+  --step-8: clamp(2.7994rem, 2.4462rem + 1.7658vw, 3.8147rem);
+  --step-7: clamp(2.3328rem, 2.0827rem + 1.2504vw, 3.0518rem);
+  --step-6: clamp(1.944rem, 1.771rem + 0.8651vw, 2.4414rem);
+  --step-5: clamp(1.62rem, 1.5041rem + 0.5793vw, 1.9531rem);
+  --step-4: clamp(1.35rem, 1.2761rem + 0.3696vw, 1.5625rem);
+  --step-3: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem);
+  --step-2: clamp(0.9375rem, 0.9158rem + 0.1087vw, 1rem);
+  --step-1: clamp(0.7813rem, 0.7747rem + 0.0326vw, 0.8rem);
 }

package/app/assets/styles/setup/typography/vars/index.css

@@ -1,2 +1 @@
 @import './_reponsive-font-sizes.css';
-@import './_colors.css';

package/app/components/forms/form-fieldset/FormFieldset.vue

@@ -1,10 +1,19 @@
 <template>
-  <fieldset :aria-required="required" :aria-invalid="fieldHasError" role="radiogroup" :id :name class="form-fieldset" :class="[elementClasses, { error: fieldHasError }]" :data-testid="dataTestid">
-    <legend v-if="legend" class="form-fieldset-legend" :class="[{ 'has-description': hasDescription }]">
+  <fieldset
+    :aria-required="required"
+    :aria-invalid="fieldHasError"
+    role="radiogroup"
+    :id
+    :name
+    class="form-fieldset"
+    :class="[elementClasses, { error: fieldHasError }]"
+    :data-testid="dataTestid"
+  >
+    <legend v-if="legend" class="form-fieldset-legend" :class="[{ 'has-description': slots.description }]">
       <slot name="legend">{{ legend }}</slot>
     </legend>
 
-    <div v-if="hasDescriptionSlot" class="form-fieldset-description" :id="`${id}-description`">
+    <div v-if="slots.description" class="form-fieldset-description" :id="`${id}-description`">
       <slot name="description"></slot>
     </div>
 
@@ -28,7 +37,7 @@ const props = defineProps({
   },
   legend: {
     type: String,
-    default: '',
+    default: "",
   },
   required: {
     type: Boolean,
@@ -40,18 +49,18 @@ const props = defineProps({
   },
   dataTestid: {
     type: String,
-    default: '',
+    default: "",
   },
   styleClassPassthrough: {
     type: Array as PropType<string[]>,
     default: () => [],
   },
-});
+})
 
-const slots = useSlots();
-const hasDescriptionSlot = computed(() => slots.description !== undefined);
-const hasDescription = computed(() => slots.description !== undefined);
-const { elementClasses, updateElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+const slots = useSlots()
+// const hasDescriptionSlot = computed(() => slots.description !== undefined);
+const hasDescription = computed(() => slots.description !== undefined)
+const { elementClasses, updateElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
 </script>
 
 <style lang="css">

package/app/components/forms/input-button/InputButtonCore.vue

@@ -7,21 +7,21 @@
     :data-theme="theme"
     :data-size="size"
     class="input-button-core"
-    :class="[`btn-${type}`, effectClass, elementClasses, { 'icon-only': isIconOnly }]"
+    :class="[`btn-${type}`, effectClass, elementClasses, { 'icon-only': slots.iconOnly }]"
   >
     <span v-if="useEffect && effect == 'fancy'" class="fancy"></span>
-    <template v-if="hasLeftContent && !isIconOnly">
+    <template v-if="slots.left && !slots.iconOnly">
       <span class="btn-icon left">
         <slot name="left"></slot>
       </span>
     </template>
-    <span class="btn-text" :class="[weight, { 'sr-only': isIconOnly }]">{{ buttonText }}</span>
-    <template v-if="hasRightContent && !isIconOnly">
+    <span class="btn-text" :class="[weight, { 'sr-only': slots.iconOnly }]">{{ buttonText }}</span>
+    <template v-if="slots.right && !slots.iconOnly">
       <span class="btn-icon right">
         <slot name="right"></slot>
       </span>
     </template>
-    <template v-if="isIconOnly">
+    <template v-if="slots.iconOnly">
       <span class="btn-icon icon-only">
         <slot name="iconOnly"></slot>
       </span>
@@ -30,35 +30,35 @@
 </template>
 
 <script setup lang="ts">
-import propValidators from '../c12/prop-validators';
+import propValidators from "../c12/prop-validators"
 
 const props = defineProps({
   size: {
     type: String as PropType<string>,
-    default: 'default',
+    default: "default",
     validator(value: string) {
-      return propValidators.size.includes(value);
+      return propValidators.size.includes(value)
     },
   },
   weight: {
     type: String as PropType<string>,
-    default: 'wght-400',
+    default: "wght-400",
     validator(value: string) {
-      return propValidators.weight.includes(value);
+      return propValidators.weight.includes(value)
     },
   },
   theme: {
     type: String as PropType<string>,
-    default: 'primary',
+    default: "primary",
     validator(value: string) {
-      return propValidators.theme.includes(value);
+      return propValidators.theme.includes(value)
     },
   },
   type: {
-    type: String as PropType<'submit' | 'button' | 'reset'>,
-    default: 'button',
+    type: String as PropType<"submit" | "button" | "reset">,
+    default: "button",
     validator(value: string) {
-      return propValidators.inputTypesButton.includes(value);
+      return propValidators.inputTypesButton.includes(value)
     },
   },
   buttonText: {
@@ -67,7 +67,7 @@ const props = defineProps({
   },
   dataTestid: {
     type: String,
-    default: '',
+    default: "",
   },
   styleClassPassthrough: {
     type: Array as PropType<string[]>,
@@ -79,9 +79,9 @@ const props = defineProps({
   },
   effect: {
     type: String as PropType<string>,
-    default: 'fancy',
+    default: "fancy",
     validator(value: string) {
-      return ['fancy', 'pulse'].includes(value);
+      return ["fancy", "pulse"].includes(value)
     },
   },
   isPending: {
@@ -92,23 +92,20 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-});
+})
 
-const type = toRef(() => props.type);
+const type = toRef(() => props.type)
 const effectClass = computed(() => {
   if (props.useEffect) {
-    return props.effect === 'fancy' ? '' : props.effect;
+    return props.effect === "fancy" ? "" : props.effect
   } else {
-    return '';
+    return ""
   }
-});
+})
 
-const slots = useSlots();
-const hasLeftContent = computed(() => slots.left !== undefined);
-const hasRightContent = computed(() => slots.right !== undefined);
-const isIconOnly = computed(() => slots.iconOnly !== undefined);
+const slots = useSlots()
 
-const { elementClasses, updateElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
 </script>
 
 <style lang="css">

package/app/components/forms/input-checkbox/MultipleCheckboxes.vue

@@ -1,5 +1,13 @@
 <template>
-  <FormFieldset :id :name :legend :fieldHasError :required :data-testid :styleClassPassthrough="['multiple-checkboxes-fieldset']">
+  <FormFieldset
+    :id
+    :name
+    :legend
+    :fieldHasError
+    :required
+    :data-testid
+    :styleClassPassthrough="['multiple-checkboxes-fieldset']"
+  >
     <template #description>
       <slot name="description"></slot>
     </template>
@@ -61,13 +69,29 @@
 </template>
 
 <script setup lang="ts">
-import propValidators from '../c12/prop-validators';
-import type { IOptionsConfig, IFormMultipleOptions } from '../../../../shared/types/types.forms';
+import propValidators from "../c12/prop-validators"
+import type { IOptionsConfig, IFormMultipleOptions } from "../../../../shared/types/types.forms"
 
-const { dataTestid, name, legend, label, required, fieldHasError, placeholder, isButton, errorMessage, size, optionsLayout, equalCols, styleClassPassthrough, theme, direction } = defineProps({
+const {
+  dataTestid,
+  name,
+  legend,
+  label,
+  required,
+  fieldHasError,
+  placeholder,
+  isButton,
+  errorMessage,
+  size,
+  optionsLayout,
+  equalCols,
+  styleClassPassthrough,
+  theme,
+  direction,
+} = defineProps({
   dataTestid: {
     type: String,
-    default: 'multiple-checkboxes',
+    default: "multiple-checkboxes",
   },
   name: {
     type: String,
@@ -83,7 +107,7 @@ const { dataTestid, name, legend, label, required, fieldHasError, placeholder, i
   },
   placeholder: {
     type: String,
-    default: '',
+    default: "",
   },
   isButton: {
     type: Boolean,
@@ -107,16 +131,16 @@ const { dataTestid, name, legend, label, required, fieldHasError, placeholder, i
   },
   size: {
     type: String as PropType<string>,
-    default: 'medium',
+    default: "medium",
     validator(value: string) {
-      return propValidators.size.includes(value);
+      return propValidators.size.includes(value)
     },
   },
   optionsLayout: {
     type: String as PropType<string>,
-    default: 'equal-widths',
+    default: "equal-widths",
     validator(value: string) {
-      return propValidators.optionsLayout.includes(value);
+      return propValidators.optionsLayout.includes(value)
     },
   },
   equalCols: {
@@ -129,38 +153,35 @@ const { dataTestid, name, legend, label, required, fieldHasError, placeholder, i
   },
   theme: {
     type: String as PropType<string>,
-    default: 'primary',
+    default: "primary",
     validator(value: string) {
-      return propValidators.theme.includes(value);
+      return propValidators.theme.includes(value)
     },
   },
   direction: {
-    type: String as PropType<'row' | 'row-reverse'>,
-    default: 'row',
+    type: String as PropType<"row" | "row-reverse">,
+    default: "row",
     validator(value: string) {
-      return ['row', 'row-reverse'].includes(value);
+      return ["row", "row-reverse"].includes(value)
     },
   },
   displayAsDisc: {
     type: Boolean,
     default: false,
   },
-});
+})
 
-const slots = useSlots();
-const hasDescriptionSlot = computed(() => slots.description !== undefined);
-const hasDescription = computed(() => slots.description !== undefined);
-const { elementClasses, updateElementClasses } = useStyleClassPassthrough(styleClassPassthrough);
+const slots = useSlots()
 
-const modelValue = defineModel();
-const fieldData = defineModel('fieldData') as Ref<IFormMultipleOptions>;
+const modelValue = defineModel()
+const fieldData = defineModel("fieldData") as Ref<IFormMultipleOptions>
 
-const id = `${name}-input-${useId()}`;
-const errorId = `${name}-error-message`;
+const id = `${name}-input-${useId()}`
+const errorId = `${name}-error-message`
 const ariaDescribedby = computed(() => {
-  const ariaDescribedbyId = hasDescriptionSlot.value ? `${name}-description` : undefined;
-  return fieldHasError ? errorId : ariaDescribedbyId;
-});
+  const ariaDescribedbyId = slots.description ? `${name}-description` : undefined
+  return fieldHasError ? errorId : ariaDescribedbyId
+})
 </script>
 
 <style lang="css">

package/app/components/forms/input-checkbox/SingleCheckbox.vue

@@ -1,33 +1,58 @@
 <template>
-  <FormFieldset :id :name :legend :fieldHasError :required :data-testid :styleClassPassthrough="['single-checkbox-fieldset']">
+  <FormFieldset
+    :id
+    :name
+    :legend
+    :fieldHasError
+    :required
+    :data-testid
+    :styleClassPassthrough="['single-checkbox-fieldset']"
+  >
     <template #description>
       <slot name="description"></slot>
     </template>
 
     <template #content>
       <div class="single-checkbox-items" :class="[optionsLayout]">
-        <InputCheckboxRadioWithLabel type="checkbox" :name :required :label :fieldHasError v-model="modelValue" :trueValue :falseValue :size :theme :ariaDescribedby>
+        <InputCheckboxRadioWithLabel
+          type="checkbox"
+          :name
+          :required
+          :label
+          :fieldHasError
+          v-model="modelValue"
+          :trueValue
+          :falseValue
+          :size
+          :theme
+          :ariaDescribedby
+        >
           <template #checkedIcon>
             <slot name="checkedIcon"></slot>
           </template>
-          <template v-if="hasLabelContent" #labelContent>
+          <template v-if="slots.labelContent" #labelContent>
             <slot name="labelContent"></slot>
           </template>
         </InputCheckboxRadioWithLabel>
       </div>
-      <InputError :errorMessage :showError="fieldHasError" :id="errorId" :isDetached="true" :styleClassPassthrough="inputErrorStyles" />
+      <InputError
+        :errorMessage
+        :showError="fieldHasError"
+        :id="errorId"
+        :isDetached="true"
+        :styleClassPassthrough="inputErrorStyles"
+      />
     </template>
   </FormFieldset>
 </template>
 
 <script setup lang="ts">
-import propValidators from '../c12/prop-validators';
-import type { IFormMultipleOptions } from '../../../../shared/types/types.forms';
+import propValidators from "../c12/prop-validators"
 
 const props = defineProps({
   dataTestid: {
     type: String,
-    default: 'multiple-radio-buttons',
+    default: "multiple-radio-buttons",
   },
   name: {
     type: String,
@@ -40,7 +65,7 @@ const props = defineProps({
   label: {
     type: String,
     required: false,
-    default: '',
+    default: "",
   },
   errorMessage: {
     type: [Object, String],
@@ -60,9 +85,9 @@ const props = defineProps({
   },
   size: {
     type: String as PropType<string>,
-    default: 'medium',
+    default: "medium",
     validator(value: string) {
-      return propValidators.size.includes(value);
+      return propValidators.size.includes(value)
     },
   },
   trueValue: {
@@ -75,9 +100,9 @@ const props = defineProps({
   },
   optionsLayout: {
     type: String as PropType<string>,
-    default: 'equal-widths',
+    default: "equal-widths",
     validator(value: string) {
-      return propValidators.optionsLayout.includes(value);
+      return propValidators.optionsLayout.includes(value)
     },
   },
   equalCols: {
@@ -90,39 +115,33 @@ const props = defineProps({
   },
   theme: {
     type: String as PropType<string>,
-    default: 'primary',
+    default: "primary",
     validator(value: string) {
-      return propValidators.theme.includes(value);
+      return propValidators.theme.includes(value)
     },
   },
-});
+})
 
-const slots = useSlots();
-const hasDescriptionSlot = computed(() => slots.description !== undefined);
-const hasDescription = computed(() => slots.description !== undefined);
-const hasLabelContent = computed(() => slots.labelContent !== undefined);
+const slots = useSlots()
 
-const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+const modelValue = defineModel()
 
-const modelValue = defineModel();
-const fieldData = defineModel('fieldData') as Ref<IFormMultipleOptions>;
+const inputErrorStyles = ref<string[]>(props.styleClassPassthrough)
 
-const inputErrorStyles = ref<string[]>(props.styleClassPassthrough);
-
-const id = `${props.name}-input-${useId()}`;
-const errorId = `${name}-error-message`;
+const id = `${props.name}-input-${useId()}`
+const errorId = `${name}-error-message`
 const ariaDescribedby = computed(() => {
-  const ariaDescribedbyId = hasDescriptionSlot.value ? `${name}-description` : undefined;
-  return props.fieldHasError ? errorId : ariaDescribedbyId;
-});
+  const ariaDescribedbyId = slots.description ? `${name}-description` : undefined
+  return props.fieldHasError ? errorId : ariaDescribedbyId
+})
 
 watchEffect(() => {
-  if (!hasDescription.value && props.fieldHasError) {
-    inputErrorStyles.value.push('mbs-12');
+  if (!slots.description && props.fieldHasError) {
+    inputErrorStyles.value.push("mbs-12")
   } else {
-    inputErrorStyles.value = inputErrorStyles.value.filter((style) => style !== 'mbs-12');
+    inputErrorStyles.value = inputErrorStyles.value.filter((style) => style !== "mbs-12")
   }
-});
+})
 </script>
 
 <style lang="css">