srcdev-nuxt-forms 6.1.2 → 6.1.4

package/app/components/forms/c12/prop-validators/index.ts

@@ -1,38 +1,48 @@
 export const propValidators = {
-  size: ['x-small', 'small', 'default', 'medium', 'large'],
+  size: ["x-small", "small", "default", "medium", "large"],
   weight: [
-    'wght-100',
-    'wght-200',
-    'wght-300',
-    'wght-400',
-    'wght-500',
-    'wght-600',
-    'wght-700',
-    'wght-800',
-    'wght-900',
-    'light',
-    'normal',
-    'bold',
-    'fvs-wght-100',
-    'fvs-wght-200',
-    'fvs-wght-300',
-    'fvs-wght-400',
-    'fvs-wght-500',
-    'fvs-wght-600',
-    'fvs-wght-700',
-    'fvs-wght-800',
-    'fvs-wght-900',
+    "wght-100",
+    "wght-200",
+    "wght-300",
+    "wght-400",
+    "wght-500",
+    "wght-600",
+    "wght-700",
+    "wght-800",
+    "wght-900",
+    "light",
+    "normal",
+    "bold",
+    "fvs-wght-100",
+    "fvs-wght-200",
+    "fvs-wght-300",
+    "fvs-wght-400",
+    "fvs-wght-500",
+    "fvs-wght-600",
+    "fvs-wght-700",
+    "fvs-wght-800",
+    "fvs-wght-900",
   ],
-  theme: ['primary', 'secondary', 'tertiary', 'ghost', 'error', 'success', 'warning', 'input-action', 'input-action-underlined'],
-  checkboxAppearance: [null, 'with-decorator'],
-  checkboxStyle: ['check', 'cross'],
-  radioAppearance: [null, 'with-decorator'],
-  optionsLayout: ['block', 'inline', 'equal-widths'],
-  labelWeight: ['normal', 'semi-bold', 'bold'],
-  inputVariant: ['normal', 'outlined', 'underlined'],
-  inputTypesButton: ['button', 'cancel', 'reset', 'submit'],
-  inputTypesText: ['text', 'email', 'password', 'number', 'tel', 'url'],
-  inputMode: ['text', 'email', 'tel', 'url', 'search', 'numeric', 'none', 'decimal'],
-};
+  theme: [
+    "primary",
+    "secondary",
+    "tertiary",
+    "ghost",
+    "error",
+    "success",
+    "warning",
+    "input-action",
+    "input-action-underlined",
+  ],
+  checkboxAppearance: [null, "with-decorator"],
+  checkboxStyle: ["check", "cross"],
+  radioAppearance: [null, "with-decorator"],
+  optionsLayout: ["block", "inline", "equal-widths"],
+  labelWeight: ["normal", "semi-bold", "bold"],
+  inputVariant: ["normal", "outlined", "underlined"],
+  inputTypesButton: ["button", "cancel", "reset", "submit"],
+  inputTypesText: ["text", "email", "password", "number", "tel", "url"],
+  inputMode: ["text", "email", "tel", "url", "search", "numeric", "none", "decimal"],
+}
 
-export default propValidators;
+export default propValidators

package/nuxt.config.ts

@@ -2,7 +2,6 @@
 
 export default defineNuxtConfig({
   devtools: { enabled: true },
-  css: ["modern-normalize", "./app/assets/styles/main.css"],
   modules: ["@nuxt/eslint", "@nuxt/icon", "@nuxt/test-utils/module"],
   alias: {
     "#shared": "./shared",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-forms",
   "type": "module",
-  "version": "6.1.2",
+  "version": "6.1.4",
   "main": "nuxt.config.ts",
   "scripts": {
     "clean": "rm -rf .nuxt && rm -rf .output && rm -rf .playground/.nuxt && rm -rf .playground/.output",

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

@@ -1,38 +0,0 @@
-.srcdev-forms-extended {
-  .form-fieldset {
-    margin: 0;
-    padding: 0;
-    border: 0;
-
-    &.single-checkbox-fieldset {
-    }
-
-    &.multiple-checkboxes-fieldset {
-    }
-
-    &.multiple-radiobuttons-fieldset {
-    }
-
-    .form-fieldset-legend {
-      color: var(--form-fieldset-legend-color);
-      margin-block: 0.8rem;
-      font-size: var(--step-5);
-      font-weight: normal;
-      line-height: 1.5;
-
-      &.has-description {
-        margin-bottom: 0;
-      }
-    }
-
-    .form-fieldset-description {
-      font-size: 1.6rem;
-      margin-top: 1.2rem;
-    }
-
-    .form-fieldset-content {
-      margin-block-start: 0;
-      margin-block-end: 0;
-    }
-  }
-}

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

@@ -1,66 +0,0 @@
-.srcdev-forms-extended {
-  .input-button-core {
-    gap: var(--form-button-icon-gap);
-    border-radius: var(--form-input-border-radius);
-
-    padding-inline: var(--form-button-padding-inline);
-    padding-block-start: var(--form-element-padding-block-start);
-    padding-block-end: var(--form-element-padding-block-end);
-
-    box-shadow: var(--box-shadow-off);
-    background-color: var(--theme-button-surface);
-    border: var(--form-element-border-width) solid var(--theme-button-border);
-    color: var(--theme-button-text);
-    outline: var(--form-element-outline-width) solid var(--theme-button-outline);
-    outline-offset: var(--form-element-outline-offset-focus);
-
-    &:hover {
-      background-color: var(--theme-button-surface-hover);
-      border-color: var(--theme-input-border-hover);
-      color: var(--theme-button-text-hover);
-      outline-color: var(--theme-button-outline-hover);
-      outline-offset: var(--form-element-outline-offset-focus);
-    }
-
-    &:focus-visible {
-      background-color: var(--theme-button-surface-hover);
-      border-color: var(--theme-button-border-focus);
-      color: var(--theme-button-text-focus);
-      outline-color: var(--theme-button-outline-focus);
-      outline-offset: var(--form-element-outline-offset-focus);
-    }
-
-    &[readonly] {
-      opacity: 0.5;
-      &:hover,
-      &:focus-visible {
-        cursor: not-allowed;
-      }
-    }
-
-    &.icon-only {
-      aspect-ratio: 1;
-      height: var(--form-icon-only-button-size);
-      width: var(--form-icon-only-button-size);
-      margin: 0;
-      padding: 0;
-    }
-
-    .btn-text {
-      display: inline-block;
-      white-space: nowrap;
-      font-size: var(--form-element-font-size);
-      line-height: var(--form-element-line-height);
-    }
-
-    .btn-icon {
-      display: flex;
-      .icon {
-        aspect-ratio: 1;
-        display: inline-block;
-        height: var(--form-icon-size);
-        width: var(--form-icon-size);
-      }
-    }
-  }
-}

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

@@ -1,66 +0,0 @@
-.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);
-    outline: var(--form-element-outline-width) solid var(--theme-input-outline);
-    box-shadow: var(--_box-shadow);
-
-    &.x-small {
-      --input-symbol-size: var(--step-3);
-    }
-
-    &.small {
-      --input-symbol-size: var(--step-4);
-    }
-
-    &.default {
-      --input-symbol-size: var(--step-7);
-    }
-
-    &.medium {
-      --input-symbol-size: var(--step-6);
-    }
-
-    &.large {
-      --input-symbol-size: var(--step-6);
-    }
-
-    &.checkbox {
-      border-radius: var(--form-input-border-radius);
-      &.button {
-        &.display-as-disc {
-          border-radius: 50%;
-        }
-      }
-    }
-
-    &.radio {
-      border-radius: 50%;
-    }
-
-    /* focus-visible */
-    &:not(.button):focus-within {
-      background-color: var(--theme-input-surface-focus);
-      outline-color: var(--theme-input-outline-focus);
-      outline-offset: var(--form-element-outline-offset-focus);
-    }
-
-    .input-checked-icon {
-      color: var(--theme-checkbox-symbol-color);
-      box-shadow: var(--_box-shadow);
-    }
-
-    .input-checkbox-radio-core {
-      margin: 0;
-      opacity: 0;
-
-      &:not(.is-button) {
-        &:focus-visible {
-          /* background-color: var(--theme-input-surface-focus);
-          outline-color: var(--theme-input-outline-focus);
-          outline-offset: var(--form-element-outline-offset-focus); */
-        }
-      }
-    }
-  }
-}

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

@@ -1,76 +0,0 @@
-.srcdev-forms-extended {
-  .input-checkbox-radio-options-button {
-    gap: 1rem;
-    border-radius: 1lh;
-
-    /* &.inline {} */
-
-    background-color: var(--theme-input-surface);
-    border: var(--form-element-border-width) solid var(--theme-input-border);
-    outline: var(--form-element-outline-width) solid var(--theme-input-outline);
-
-    box-shadow: 0.1rem 0.1rem 0.8rem 0.1rem transparent;
-    padding-block: var(--input-checkbox-radio-options-padding-block);
-    padding-inline: var(--input-checkbox-radio-options-padding-inline);
-
-    &:hover {
-      background-color: var(--theme-input-surface-hover);
-      border-color: var(--theme-input-border);
-      outline-color: var(--theme-input-outline-hover);
-      outline-offset: var(--form-element-outline-offset-focus);
-    }
-
-    &:has(.input-checkbox-radio-core:focus-visible) {
-      background-color: var(--theme-input-surface-focus);
-      outline-color: var(--theme-input-outline-focus);
-      outline-offset: var(--form-element-outline-offset-focus);
-    }
-
-    /* Sizes */
-    &.x-small {
-      padding-block: 0.2rem;
-      padding-inline: 1.6rem;
-      gap: 1rem;
-    }
-    &.small {
-      padding-block: 0.2rem;
-      padding-inline: 1.6rem;
-      gap: 1rem;
-    }
-    &.default {
-      padding-block: 0.4rem;
-      padding-inline: 1.2rem;
-      gap: 1rem;
-    }
-    &.medium {
-      padding-block: 0.4rem;
-      padding-inline: 1.2rem;
-      gap: 1rem;
-    }
-    &.large {
-      padding-block: 0.4rem;
-      padding-inline: 1.2rem;
-      gap: 1rem;
-    }
-
-    .input-checkbox-radio-options-button-label {
-      color: var(--theme-checkbox-label-text-color);
-      font-size: var(--form-element-font-size);
-      min-height: var(--form-element-line-height);
-      padding-block: 0.8rem;
-      padding-inline: 0.8rem;
-
-      &:hover {
-      }
-    }
-
-    .decorator-icon {
-      color: var(--theme-checkbox-symbol-color);
-
-      .icon {
-        height: var(--theme-checkbox-decorator-icon-size);
-        width: var(--theme-checkbox-decorator-icon-size);
-      }
-    }
-  }
-}

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

@@ -1,13 +0,0 @@
-.srcdev-forms-extended {
-  .input-description {
-    .input-description-html {
-      margin-block: 0.4rem 0.8rem;
-    }
-    .input-description-text {
-      color: var(--form-description-color);
-      font-size: var(--step-4);
-      margin-block: 0.4rem 0.8rem;
-      line-height: var(--step-4);
-    }
-  }
-}

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

@@ -1,54 +0,0 @@
-.srcdev-forms-extended {
-  .input-error-message {
-    color: var(--input-error-color);
-    background-color: var(--theme-error-surface);
-
-    &.show {
-      border: var(--form-element-border-width) solid var(--theme-error-surface);
-      border-bottom-left-radius: var(--form-input-border-radius-underlined);
-      border-bottom-right-radius: var(--form-input-border-radius-underlined);
-
-      &.detached {
-        border-top: var(--form-element-border-width) solid var(--theme-error-surface);
-        border-right: var(--form-element-border-width) solid var(--theme-error-surface);
-        border-bottom: var(--form-element-border-width) solid var(--red-8);
-        border-left: var(--form-element-border-width) solid var(--theme-error-surface);
-
-        border-radius: var(--form-input-border-radius);
-      }
-    }
-
-    .inner {
-      .inner-content {
-        .inner-icon {
-          padding-left: 1.2rem;
-
-          .icon {
-            color: white;
-          }
-        }
-
-        .message {
-          font-size: 1.6rem;
-          font-weight: 500;
-          padding-block: 1.2rem 1rem;
-          padding-inline: 1.2rem;
-
-          .message-single {
-            color: white;
-          }
-
-          .message-list {
-            .message-list-item {
-              color: white;
-            }
-
-            .message-list-item + .message-list-item {
-              margin-block-start: 0.6rem;
-            }
-          }
-        }
-      }
-    }
-  }
-}

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

@@ -1,21 +0,0 @@
-.srcdev-forms-extended {
-  .input-label {
-    &.normal {
-      color: var(--form-label-color);
-      margin-block: 0.8rem;
-      font-size: var(--step-5);
-      font-weight: normal;
-      line-height: 1.5;
-      display: block;
-    }
-
-    &.underlined {
-      color: var(--form-label-color);
-      margin-block: 0.8rem;
-      font-size: var(--step-5);
-      font-weight: normal;
-      line-height: 1.5;
-      display: block;
-    }
-  }
-}

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

@@ -1,140 +0,0 @@
-.srcdev-forms-extended {
-  .input-select-wrapper {
-    background-color: var(--theme-input-surface);
-
-    background-color: var(--theme-input-surface);
-
-    &:hover {
-      background-color: var(--theme-input-surface-hover);
-    }
-
-    &:focus-within {
-      background-color: var(--theme-input-surface-hover);
-      outline: var(--theme-focus-visible-outline);
-      box-shadow: var(--theme-focus-visible-shadow);
-    }
-
-    &.normal {
-      outline: var(--form-element-outline-width) solid var(--theme-input-outline);
-
-      border-top-left-radius: var(--form-input-border-radius);
-      border-top-right-radius: var(--form-input-border-radius);
-      border-bottom-left-radius: var(--form-input-border-radius);
-      border-bottom-right-radius: var(--form-input-border-radius);
-
-      border-top: var(--form-element-border-width) solid var(--theme-input-border);
-      border-right: var(--form-element-border-width) solid var(--theme-input-border);
-      border-bottom: var(--form-element-border-width) solid var(--theme-input-border);
-      border-left: var(--form-element-border-width) solid var(--theme-input-border);
-
-      &:focus-within {
-        outline-color: var(--theme-input-outline-focus);
-        outline-offset: var(--form-element-outline-offset-focus);
-      }
-
-      &.error {
-        border-color: var(--theme-error-surface);
-      }
-    }
-
-    &.underlined {
-      margin-block-start: 0;
-      padding-block: 0;
-
-      outline: var(--form-element-outline-width) solid transparent;
-
-      border-top-left-radius: 0;
-      border-top-right-radius: 0;
-      border-bottom-left-radius: var(--form-input-border-radius-underlined);
-      border-bottom-right-radius: var(--form-input-border-radius-underlined);
-
-      border-top: var(--form-element-border-width) solid transparent;
-      border-right: var(--form-element-border-width) solid transparent;
-      border-bottom: var(--form-element-border-width-underlined) solid var(--theme-input-border);
-      border-left: var(--form-element-border-width) solid transparent;
-
-      &.error {
-        outline-color: var(--theme-error-surface);
-        border-bottom-right-radius: 0;
-        border-bottom-left-radius: 0;
-
-        border-top: var(--form-element-border-width) solid var(--theme-error-surface);
-        border-right: var(--form-element-border-width) solid var(--theme-error-surface);
-        border-bottom: var(--form-element-border-width) solid var(--theme-error-surface);
-        border-left: var(--form-element-border-width) solid var(--theme-error-surface);
-      }
-    }
-
-    .input-select-core {
-      appearance: none;
-      background-color: transparent;
-
-      /* For legacy support - eg, Safari */
-      /* &::after {
-      content: '';
-      width: 0.8em;
-      height: 0.5em;
-      background-color: var(--theme-input-border);
-      clip-path: polygon(100% 0%, 0 0%, 50% 100%);
-    } */
-
-      /* Start modern Select CSS */
-      &,
-      &::picker(select) {
-        appearance: base-select;
-      }
-
-      &::picker(select) {
-        transition: display allow-discrete var(--theme-form-transition-duration), opacity var(--theme-form-transition-duration), overlay var(--theme-form-transition-duration) allow-discrete;
-      }
-
-      &:not(:open)::picker(select) {
-        opacity: 0;
-      }
-
-      &:open::picker(select) {
-        opacity: 1;
-        border: var(--form-element-border-width) solid var(--theme-input-border);
-        outline: var(--form-element-outline-width) solid var(--_input-select-outline-color);
-
-        @starting-style {
-          opacity: 0;
-        }
-      }
-
-      border: none;
-      outline: none;
-      border-radius: 0;
-      width: 100%;
-
-      &:hover {
-        background-color: var(--theme-input-surface-hover);
-      }
-
-      /* END modern Select CSS */
-
-      font-family: var(--font-family);
-      font-size: var(--form-element-font-size);
-      line-height: var(--form-element-line-height);
-      padding-block: 1.5rem;
-      padding-inline: 1rem;
-
-      .input-select-core-option {
-        padding-block: 1rem;
-        padding-inline: 1.75rem;
-        gap: 1.5rem;
-        transition: all var(--theme-form-transition-duration) ease-in-out;
-
-        &:hover {
-          background-color: var(--theme-input-surface-hover);
-        }
-
-        .input-select-core-option-decorator-icon {
-          display: inline-block;
-          width: 1.5rem;
-          height: 1.5rem;
-        }
-      }
-    }
-  }
-}