srcdev-nuxt-forms 0.2.0 → 1.0.0

package/assets/styles/scaffolding/_page.css

@@ -0,0 +1,23 @@
+:root {
+  /* color-scheme: light dark; */
+}
+
+html {
+  background-color: var(--body-background-color);
+  /* background-color: light-dark(var(--light-body-background-color), var(--dark-body-background-color)); */
+
+  font-size: 62.5%;
+}
+body,
+p,
+span,
+pre,
+code,
+div,
+fieldset,
+legend,
+li,
+a {
+  font-family: var(--font-family);
+  font-size: var(--step-1);
+}

package/assets/styles/scaffolding/index.css

@@ -0,0 +1,3 @@
+@import './_page.css';
+@import './_margin-helpers.css';
+@import './_padding-helpers.css';

package/assets/styles/variables/colors/_blue.css

@@ -1,4 +1,4 @@
-:where(html) {
+:root {
   --blue-0: #e7f5ff;
   --blue-1: #d0ebff;
   --blue-2: #a5d8ff;
@@ -11,5 +11,5 @@
   --blue-9: #1864ab;
   --blue-10: #145591;
   --blue-11: #114678;
-  --blue-12: #0d375e;
+  --blue-12: #0e01cd;
 }

package/assets/styles/variables/colors/_gray.css

@@ -1,4 +1,4 @@
-:where(html) {
+:root {
   --gray-00: #ffffff;
   --gray-0: #f8f9fa;
   --gray-1: #f1f3f5;

package/assets/styles/variables/colors/_green.css

@@ -1,4 +1,4 @@
-:where(html) {
+:root {
   --green-0: #ebfbee;
   --green-1: #d3f9d8;
   --green-2: #b2f2bb;
@@ -11,5 +11,5 @@
   --green-9: #2b8a3e;
   --green-10: #237032;
   --green-11: #1b5727;
-  --green-12: #133d1b;
+  --green-12: #00a21e;
 }

package/assets/styles/variables/colors/_orange.css

@@ -1,4 +1,4 @@
-:where(html) {
+:root {
   --orange-0: #fff4e6;
   --orange-1: #ffe8cc;
   --orange-2: #ffd8a8;
@@ -11,5 +11,5 @@
   --orange-9: #d9480f;
   --orange-10: #bf400d;
   --orange-11: #99330b;
-  --orange-12: #802b09;
+  --orange-12: #db3e00;
 }

package/assets/styles/variables/colors/_red.css

@@ -1,4 +1,4 @@
-:where(html) {
+:root {
   --red-0: #fff5f5;
   --red-1: #ffe3e3;
   --red-2: #ffc9c9;
@@ -11,5 +11,5 @@
   --red-9: #ff0b0b;
   --red-10: #b02525;
   --red-11: #962020;
-  --red-12: #7d1a1a;
+  --red-12: #cc0000;
 }

package/assets/styles/variables/colors/_yellow.css

@@ -1,4 +1,4 @@
-:where(html) {
+:root {
   --yellow-0: #fff9db;
   --yellow-1: #fff3bf;
   --yellow-2: #ffec99;

package/components/forms/form-errors/InputError.vue

@@ -1,13 +1,18 @@
 <template>
-  <div class="input-error-message" :class="[{ show: fieldHasError }, { detached: isDetached }, { hide: !fieldHasError }]">
+  <div class="input-error-message" :class="[elementClasses, { show: fieldHasError }, { detached: isDetached }, { hide: !fieldHasError }]">
     <div class="inner" :class="[{ show: fieldHasError }]">
-      <div class="message" :id="`${id}-error-message`">
-        <ul v-if="isArray">
-          <li v-for="(message, index) in errorMessaging" :key="index">{{ message }}</li>
-        </ul>
-        <span v-else>
-          {{ errorMessaging }}
-        </span>
+      <div class="inner-content">
+        <div class="inner-icon">
+          <Icon name="radix-icons:circle-backslash" class="icon" />
+        </div>
+        <div class="message" :id="`${id}-error-message`">
+          <ul v-if="isArray" class="message-list">
+            <li v-for="(message, index) in errorMessage" :key="index" class="message-list-item">{{ message }}</li>
+          </ul>
+          <span v-else class="message-single">
+            {{ errorMessage }}
+          </span>
+        </div>
       </div>
     </div>
   </div>
@@ -15,8 +20,8 @@
 
 <script setup lang="ts">
 const props = defineProps({
-  errorMessaging: {
-    type: [Object, String],
+  errorMessage: {
+    type: [Array, Object, String],
     required: true,
   },
   fieldHasError: {
@@ -28,8 +33,8 @@ const props = defineProps({
     required: true,
   },
   styleClassPassthrough: {
-    type: String,
-    default: '',
+    type: Array as PropType<string[]>,
+    default: () => [],
   },
   compact: {
     type: Boolean,
@@ -42,8 +47,10 @@ const props = defineProps({
 });
 
 const isArray = computed(() => {
-  return Array.isArray(props.errorMessaging);
+  return Array.isArray(props.errorMessage);
 });
+
+const { elementClasses, updateElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
 </script>
 
 <style lang="css" scoped>
@@ -62,7 +69,7 @@ const isArray = computed(() => {
   --_transition-duration: 500ms;
   --_transition-timing-function: linear;
   --_message-translate-y-hide: calc(var(--_gutter) * -2);
-  --_message-translate-y-show: 2px;
+  --_message-translate-y-show: 0;
   --_message-translate-y: var(--_message-translate-y-hide);
   --_padding-message-show: var(--_gutter);
   --_padding-message-hide: 0;
@@ -73,8 +80,9 @@ const isArray = computed(() => {
   display: grid;
   grid-template-rows: var(--_grid-template-rows);
 
-  color: hsl(from var(--theme-error) h s 95%);
-  background-color: var(--theme-error);
+  color: var(--theme-error-text);
+  background-color: var(--theme-error-surface);
+  border-radius: 0 0 4px 4px;
 
   transition-property: grid-template-rows;
   transition-duration: var(--_transition-duration);
@@ -83,8 +91,19 @@ const isArray = computed(() => {
 
   &.detached {
     border-radius: var(--input-border-radius);
+    margin-block-start: 20px;
   }
 
+  /* &.mbs-12 {
+    transition: margin-block-start var(--_transition-duration) var(--_transition-timing-function);
+    &.hide {
+      margin-block-start: 0;
+    }
+    &.show {
+      margin-block-start: 12px;
+    }
+  } */
+
   &.show {
     --_grid-template-rows: 1fr;
     --_opacity: var(--_opacity-show);
@@ -95,8 +114,9 @@ const isArray = computed(() => {
   }
 
   .inner {
-    overflow: hidden;
+    align-items: center;
 
+    overflow: hidden;
     transition: opacity var(--_transition-duration) var(--_transition-timing-function), display var(--_transition-duration) var(--_transition-timing-function) allow-discrete;
 
     &.show {
@@ -104,26 +124,51 @@ const isArray = computed(() => {
       opacity: var(--_opacity-show);
     }
 
-    .message {
-      font-family: var(--font-family);
-      font-size: 16px;
-      font-weight: 500;
-      padding-block: var(--_padding-message);
-      padding-inline: var(--_gutter-inline);
-      transform: translateY(var(--_message-translate-y));
-
-      transition-property: transform, padding;
-      transition-duration: var(--_transition-duration);
-      transition-timing-function: linear;
-
-      ul {
-        list-style-type: none;
-        padding-inline-start: 0;
-        margin-block-start: 0;
-        margin-block-end: 0;
-
-        li + li {
-          margin-block-start: 6px;
+    .inner-content {
+      display: flex;
+      align-items: center;
+
+      .inner-icon {
+        display: inline-block;
+        padding-left: 12px;
+
+        .icon {
+          color: white;
+          transform: translateY(3px);
+        }
+      }
+
+      .message {
+        display: inline-block;
+        flex-grow: 1;
+        font-family: var(--font-family);
+        font-size: 16px;
+        font-weight: 500;
+        padding-block: var(--_padding-message);
+        padding-inline: var(--_gutter-inline);
+        transform: translateY(var(--_message-translate-y));
+
+        transition-property: transform, padding;
+        transition-duration: var(--_transition-duration);
+        transition-timing-function: linear;
+
+        .message-single {
+          color: white;
+        }
+
+        .message-list {
+          list-style-type: none;
+          padding-inline-start: 0;
+          margin-block-start: 0;
+          margin-block-end: 0;
+
+          .message-list-item {
+            color: white;
+          }
+
+          .message-list-item + .message-list-item {
+            margin-block-start: 6px;
+          }
         }
       }
     }

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

@@ -1,11 +1,12 @@
 <template>
   <button
-    :type="type"
+    :type
     :readonly
     :aria-disabled="readonly"
     :data-test-id="dataTestId"
+    :data-btn-theme="theme"
     class="input-button-core btn"
-    :class="[`btn-${type}`, `theme-${theme}`, size, effectClass, styleClassPassthrough, { 'icon-only': isIconOnly }]"
+    :class="[`btn-${type}`, size, effectClass, styleClassPassthrough, { 'icon-only': isIconOnly }]"
   >
     <span v-if="useEffect && effect == 'fancy'" class="fancy"></span>
     <template v-if="hasLeftContent && !isIconOnly">
@@ -112,6 +113,8 @@ const isIconOnly = computed(() => slots.iconOnly !== undefined);
   --_padding-block: var(--theme-form-button-padding-block-normal);
   --_padding-inline: var(--theme-form-button-padding-inline-normal);
   --_icon-gap: var(--theme-form-button-icon-gap-normal);
+  --_border-width: var(--input-border-width-default);
+  --_outline-width: var(--input-outline-width-thin);
 
   align-items: center;
   display: flex;
@@ -126,13 +129,31 @@ const isIconOnly = computed(() => slots.iconOnly !== undefined);
 
   transition: all 0.2s ease-in-out;
 
+  background-color: var(--theme-btn-bg);
+  border: var(--_border-width) solid var(--theme-btn-border);
+  color: var(--theme-btn-text);
+  outline: 1px solid var(--theme-btn-outline);
+
+  /*
+  * States
+  **/
+  &:hover {
+    --theme-btn-bg: var(--theme-btn-bg-hover);
+    --theme-btn-border: var(--theme-btn-border-hover);
+    --theme-btn-text: var(--theme-btn-text-hover);
+    --theme-btn-outline: var(--theme-btn-outline-hover);
+  }
+
   &:hover {
     cursor: pointer;
   }
 
   &:focus-visible {
-    outline: var(--focus-visible-outline);
-    box-shadow: var(--focus-visible-box-shadow);
+    --theme-btn-bg: var(--theme-btn-bg-focus);
+    --theme-btn-border: var(--theme-btn-border-focus);
+    --theme-btn-text: var(--theme-btn-text-focus);
+    --theme-btn-outline: var(--theme-btn-outline-focus);
+    box-shadow: var(--theme-form-focus-box-shadow);
   }
 
   &[readonly] {
@@ -266,105 +287,5 @@ const isIconOnly = computed(() => slots.iconOnly !== undefined);
       }
     }
   }
-
-  --_border-width: var(--input-border-width-default);
-  --_outline-width: var(--input-outline-width-thin);
-
-  /*
-  * Initial theme (primary)
-  **/
-  --_theme-form-border: var(--theme-form-primary-border);
-  --_theme-form-border-hover: var(--theme-form-primary-border-hover);
-  --_theme-form-outline: var(--theme-form-primary-outline);
-  --_theme-form-outline-hover: var(--theme-form-primary-outline-hover);
-  --_theme-form-bg: var(--theme-form-primary-bg);
-  --_theme-form-bg-hover: var(--theme-form-primary-bg-hover);
-  --_theme-form-color: var(--theme-form-primary-color);
-  --_theme-form-color-hover: var(--theme-form-primary-color-hover);
-
-  background-color: var(--_theme-form-bg);
-  border: var(--_border-width) solid var(--_theme-form-border);
-  color: var(--_theme-form-color);
-  outline: 1px solid var(--_theme-form-outline);
-
-  /*
-  * Themes (alternate)
-  **/
-  &.theme-secondary {
-    --_theme-form-border: var(--theme-form-secondary-border);
-    --_theme-form-border-hover: var(--theme-form-secondary-border-hover);
-    --_theme-form-outline: var(--theme-form-secondary-outline);
-    --_theme-form-outline-hover: var(--theme-form-secondary-outline-hover);
-    --_theme-form-bg: var(--theme-form-secondary-bg);
-    --_theme-form-bg-hover: var(--theme-form-secondary-bg-hover);
-    --_theme-form-color: var(--theme-form-secondary-color);
-    --_theme-form-color-hover: var(--theme-form-secondary-color-hover);
-  }
-
-  &.theme-tertiary {
-    --_theme-form-border: var(--theme-form-tertiary-border);
-    --_theme-form-border-hover: var(--theme-form-tertiary-border-hover);
-    --_theme-form-outline: var(--theme-form-tertiary-outline);
-    --_theme-form-outline-hover: var(--theme-form-tertiary-outline-hover);
-    --_theme-form-bg: var(--theme-form-tertiary-bg);
-    --_theme-form-bg-hover: var(--theme-form-tertiary-bg-hover);
-    --_theme-form-color: var(--theme-form-tertiary-color);
-    --_theme-form-color-hover: var(--theme-form-tertiary-color-hover);
-  }
-
-  &.theme-warning {
-    --_theme-form-border: var(--theme-form-warning-border);
-    --_theme-form-border-hover: var(--theme-form-warning-border-hover);
-    --_theme-form-outline: var(--theme-form-warning-outline);
-    --_theme-form-outline-hover: var(--theme-form-warning-outline-hover);
-    --_theme-form-bg: var(--theme-form-warning-bg);
-    --_theme-form-bg-hover: var(--theme-form-warning-bg-hover);
-    --_theme-form-color: var(--theme-form-warning-color);
-    --_theme-form-color-hover: var(--theme-form-warning-color-hover);
-  }
-
-  &.theme-error {
-    --_theme-form-border: var(--theme-form-error-border);
-    --_theme-form-border-hover: var(--theme-form-error-border-hover);
-    --_theme-form-outline: var(--theme-form-error-outline);
-    --_theme-form-outline-hover: var(--theme-form-error-outline-hover);
-    --_theme-form-bg: var(--theme-form-error-bg);
-    --_theme-form-bg-hover: var(--theme-form-error-bg-hover);
-    --_theme-form-color: var(--theme-form-error-color);
-    --_theme-form-color-hover: var(--theme-form-error-color-hover);
-  }
-
-  &.theme-success {
-    --_theme-form-border: var(--theme-form-success-border);
-    --_theme-form-border-hover: var(--theme-form-success-border-hover);
-    --_theme-form-outline: var(--theme-form-success-outline);
-    --_theme-form-outline-hover: var(--theme-form-success-outline-hover);
-    --_theme-form-bg: var(--theme-form-success-bg);
-    --_theme-form-bg-hover: var(--theme-form-success-bg-hover);
-    --_theme-form-color: var(--theme-form-success-color);
-    --_theme-form-color-hover: var(--theme-form-success-color-hover);
-  }
-
-  &.theme-ghost {
-    --_theme-form-border: var(--theme-form-ghost-border);
-    --_theme-form-border-hover: var(--theme-form-ghost-border-hover);
-    --_theme-form-outline: var(--theme-form-ghost-outline);
-    --_theme-form-outline-hover: var(--theme-form-ghost-outline-hover);
-    --_theme-form-bg: var(--theme-form-ghost-bg);
-    --_theme-form-bg-hover: var(--theme-form-ghost-bg-hover);
-    --_theme-form-color: var(--theme-form-ghost-color);
-    --_theme-form-color-hover: var(--theme-form-ghost-color-hover);
-  }
-
-  /*
-  * States
-  **/
-  &:hover,
-  &:focus-visible {
-    --_theme-form-color: var(--_theme-form-color-hover);
-    --_theme-form-bg: var(--_theme-form-bg-hover);
-    --_theme-form-border: var(--_theme-form-border-hover);
-    --_theme-form-outline: var(--_theme-form-outline-hover);
-  }
 }
 </style>