srcdev-nuxt-forms 6.0.1 → 6.1.0

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/input-text/InputTextCore.vue

@@ -4,7 +4,14 @@
     :data-theme="formTheme"
     :data-size="size"
     :data-inputmode="inputmode"
-    :class="[inputVariant, { dirty: isDirty }, { active: isActive }, { error: fieldHasError }, { 'has-left-slot': hasLeftSlot }, { 'has-right-slot': hasRightSlot }]"
+    :class="[
+      inputVariant,
+      { dirty: isDirty },
+      { active: isActive },
+      { error: fieldHasError },
+      { 'has-left-slot': hasLeftSlot },
+      { 'has-right-slot': hasRightSlot },
+    ]"
   >
     <span v-if="hasLeftSlot" class="slot left-slot">
       <slot name="left"></slot>
@@ -35,22 +42,21 @@
 </template>
 
 <script setup lang="ts">
-import propValidators from '../c12/prop-validators';
+import propValidators from "../c12/prop-validators"
 
 const props = defineProps({
   type: {
-    type: String as PropType<'text' | 'email' | 'password' | 'number' | 'tel' | 'url'>,
-    // type: String,
-    default: 'text',
+    type: String as PropType<"text" | "email" | "password" | "number" | "tel" | "url">,
+    default: "text",
     validator(value: string) {
-      return propValidators.inputTypesText.includes(value);
+      return propValidators.inputTypesText.includes(value)
     },
   },
   inputmode: {
-    type: String as PropType<'text' | 'email' | 'tel' | 'url' | 'search' | 'numeric' | 'none' | 'decimal'>,
-    default: 'text',
+    type: String as PropType<"text" | "email" | "tel" | "url" | "search" | "numeric" | "none" | "decimal">,
+    default: "text",
     validator(value: string) {
-      return propValidators.inputMode.includes(value);
+      return propValidators.inputMode.includes(value)
     },
   },
   maxlength: {
@@ -71,7 +77,7 @@ const props = defineProps({
   },
   placeholder: {
     type: String,
-    default: '',
+    default: "",
   },
   fieldHasError: {
     type: Boolean,
@@ -83,9 +89,9 @@ 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)
     },
   },
   ariaDescribedby: {
@@ -94,66 +100,66 @@ 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)
     },
   },
   inputVariant: {
     type: String as PropType<string>,
-    default: 'normal',
+    default: "normal",
     validator(value: string) {
-      return propValidators.inputVariant.includes(value);
+      return propValidators.inputVariant.includes(value)
     },
   },
-});
+})
 
-const slots = useSlots();
-const hasLeftSlot = computed(() => slots.left !== undefined);
-const hasRightSlot = computed(() => slots.right !== undefined);
+const slots = useSlots()
+const hasLeftSlot = computed(() => slots.left !== undefined)
+const hasRightSlot = computed(() => slots.right !== undefined)
 
 const formTheme = computed(() => {
-  return props.fieldHasError ? 'error' : props.theme;
-});
+  return props.fieldHasError ? "error" : props.theme
+})
 
-const modelValue = defineModel();
-const isDirty = defineModel('isDirty');
-const isActive = defineModel('isActive');
+const modelValue = defineModel()
+const isDirty = defineModel("isDirty")
+const isActive = defineModel("isActive")
 
 const inputPattern = computed(() => {
-  return props.inputmode === 'numeric' ? '[0-9]+' : undefined;
-});
+  return props.inputmode === "numeric" ? "[0-9]+" : undefined
+})
 
 const updateFocus = (isFocused: boolean) => {
-  isActive.value = isFocused;
-};
+  isActive.value = isFocused
+}
 
-const inputField = ref<HTMLInputElement | null>(null);
+const inputField = ref<HTMLInputElement | null>(null)
 
-const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
 
 // TODO: Move this to a utility function to allow removeEventListener on unmounted
 // Leaving like this could lead to memory leaks
 const validateInput = () => {
   if (inputField.value !== null) {
-    inputField.value.addEventListener('beforeinput', (event: any) => {
-      let beforeValue = modelValue.value;
+    inputField.value.addEventListener("beforeinput", (event: any) => {
+      let beforeValue = modelValue.value
       event.target.addEventListener(
-        'input',
+        "input",
         () => {
           if (inputField.value !== null && inputField.value.validity.patternMismatch) {
-            inputField.value.value = beforeValue as string;
+            inputField.value.value = beforeValue as string
           }
         },
         { once: true }
-      );
-    });
+      )
+    })
   }
-};
+}
 
 onMounted(() => {
-  if (props.inputmode === 'numeric') validateInput();
-});
+  if (props.inputmode === "numeric") validateInput()
+})
 </script>
 
 <style lang="css">
@@ -197,13 +203,13 @@ onMounted(() => {
       place-items: center;
       background-clip: padding-box;
 
-      &.left-slot:not([data-theme='input-action']) {
+      &.left-slot:not([data-theme="input-action"]) {
         .icon {
           width: 2.2rem;
           height: 2.2rem;
         }
 
-        [data-theme='input-action'] {
+        [data-theme="input-action"] {
           width: initial;
           height: initial;
           padding: 0.5rem;
@@ -214,13 +220,13 @@ onMounted(() => {
           }
         }
       }
-      &.right-slot:not([data-theme='input-action']) {
+      &.right-slot:not([data-theme="input-action"]) {
         .icon {
           width: 2.2rem;
           height: 2.2rem;
         }
 
-        [data-theme='input-action'] {
+        [data-theme="input-action"] {
           width: initial;
           height: initial;
           padding: 0.5rem;
@@ -233,12 +239,12 @@ onMounted(() => {
       }
     }
 
-    &[data-inputmode='numeric'] {
+    &[data-inputmode="numeric"] {
       padding-block: 0rem;
       padding-inline: 0.75rem;
 
       .slot {
-        [data-theme='input-action'] {
+        [data-theme="input-action"] {
           width: initial;
           height: initial;
           padding: 0.5rem;
@@ -281,13 +287,13 @@ onMounted(() => {
       place-items: center;
       background-clip: padding-box;
 
-      &.left-slot:not([data-theme='input-action-underlined']) {
+      &.left-slot:not([data-theme="input-action-underlined"]) {
         .icon {
           width: 2.2rem;
           height: 2.2rem;
         }
 
-        [data-theme='input-action-underlined'] {
+        [data-theme="input-action-underlined"] {
           width: initial;
           height: initial;
           padding: 0.5rem;
@@ -298,13 +304,13 @@ onMounted(() => {
           }
         }
       }
-      &.right-slot:not([data-theme='input-action-underlined']) {
+      &.right-slot:not([data-theme="input-action-underlined"]) {
         .icon {
           width: 2.2rem;
           height: 2.2rem;
         }
 
-        [data-theme='input-action-underlined'] {
+        [data-theme="input-action-underlined"] {
           width: initial;
           height: initial;
           padding: 0.5rem;

package/nuxt.config.ts

@@ -2,39 +2,39 @@
 
 export default defineNuxtConfig({
   devtools: { enabled: true },
-  css: ['modern-normalize', './app/assets/styles/main.css'],
-  modules: ['@nuxt/icon', '@nuxt/test-utils/module'],
+  css: ["modern-normalize", "./app/assets/styles/main.css"],
+  modules: ["@nuxt/eslint", "@nuxt/icon", "@nuxt/test-utils/module"],
   alias: {
-    '#shared': './shared',
+    "#shared": "./shared",
   },
   typescript: {
     tsConfig: {
       compilerOptions: {
-        types: ['vitest/globals'], // TypeScript support for globals
+        types: ["vitest/globals"], // TypeScript support for globals
       },
     },
   },
   app: {
     head: {
       htmlAttrs: {
-        lang: 'en',
-        'data-color-scheme': 'auto',
+        lang: "en",
+        "data-color-scheme": "auto",
       },
-      titleTemplate: '%s - Website name',
-      meta: [{ charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' }],
+      titleTemplate: "%s - Website name",
+      meta: [{ charset: "utf-8" }, { name: "viewport", content: "width=device-width, initial-scale=1" }],
     },
   },
   components: [
     {
-      path: './components',
+      path: "./components",
       pathPrefix: false,
     },
   ],
   vue: {
     runtimeCompiler: true,
   },
-  compatibilityDate: '2024-12-01',
+  compatibilityDate: "2024-12-01",
   future: {
     compatibilityVersion: 4,
   },
-});
+})

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-forms",
   "type": "module",
-  "version": "6.0.1",
+  "version": "6.1.0",
   "main": "nuxt.config.ts",
   "scripts": {
     "clean": "rm -rf .nuxt && rm -rf .output && rm -rf .playground/.nuxt && rm -rf .playground/.output",
@@ -26,7 +26,7 @@
     "@iconify-json/carbon": "1.2.10",
     "@iconify-json/material-symbols": "1.2.29",
     "@iconify-json/material-symbols-light": "1.2.29",
-    "@nuxt/eslint-config": "1.8.0",
+    "@nuxt/eslint": "1.8.0",
     "@nuxt/icon": "1.15.0",
     "@nuxt/test-utils": "3.19.2",
     "@vue/test-utils": "2.4.6",

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

@@ -1,14 +0,0 @@
-:root {
-  --theme-link-default: light-dark(var(--blue-12), var(--blue-4));
-
-  --page-bg: light-dark(var(--gray-0), var(--gray-9));
-
-  --surface-subtle: light-dark(var(--gray-1), var(--gray-8));
-
-  --grayscale-text-title: light-dark(var(--gray-12), var(--gray-2));
-  --grayscale-text-body: light-dark(var(--gray-12), var(--gray-3));
-  --grayscale-text-subtitle: light-dark(var(--gray-12), var(--gray-2));
-  --grayscale-text-caption: light-dark(var(--gray-12), var(--gray-2));
-  --grayscale-text-negative: light-dark(var(--gray-12), var(--gray-2));
-  --grayscale-text-disabled: light-dark(var(--gray-12), var(--gray-2));
-}

package/app/assets/styles/setup/variables/index.css

@@ -1 +0,0 @@
-@import './colors';