srcdev-nuxt-forms 2.1.36 → 2.1.38

package/components/forms/input-text/InputTextCore.vue

@@ -2,6 +2,7 @@
   <div
     class="input-text-wrapper"
     :data-form-theme="formTheme"
+    :data-size="size"
     :class="[{ dirty: isDirty }, { active: isActive }, { error: fieldHasError }, { 'has-left-slot': hasLeftSlot }, { 'has-right-slot': hasRightSlot }]"
   >
     <span v-if="hasLeftSlot" class="slot left-slot">
@@ -15,7 +16,7 @@
       :name
       :required
       :maxlength
-      :class="['input-text-core', 'text-normal', elementClasses, { dirty: isDirty }, { active: isActive }]"
+      :class="['input-text-core', elementClasses, { dirty: isDirty }, { active: isActive }]"
       v-model="modelValue"
       ref="inputField"
       :aria-invalid="fieldHasError"
@@ -35,7 +36,8 @@
 <script setup lang="ts">
 import propValidators from '../c12/prop-validators';
 
-const { type, inputmode, maxlength, id, name, placeholder, required, fieldHasError, styleClassPassthrough, theme, ariaDescribedby } = defineProps({
+// const props = defineProps({
+const { type, inputmode, maxlength, id, name, placeholder, required, fieldHasError, styleClassPassthrough, theme, ariaDescribedby, size } = defineProps({
   type: {
     // type: String as PropType<'text' | 'email' | 'password' | 'number' | 'tel' | 'url'>,
     type: String,
@@ -90,6 +92,13 @@ const { type, inputmode, maxlength, id, name, placeholder, required, fieldHasErr
     type: String,
     default: null,
   },
+  size: {
+    type: String as PropType<string>,
+    default: 'normal',
+    validator(value: string) {
+      return propValidators.size.includes(value);
+    },
+  },
 });
 
 const slots = useSlots();
@@ -127,7 +136,6 @@ const validateInput = () => {
         () => {
           if (inputField.value !== null && inputField.value.validity.patternMismatch) {
             inputField.value.value = beforeValue as string;
-            console.log('you did some bad chars');
           }
         },
         { once: true }
@@ -144,44 +152,44 @@ onMounted(() => {
 
 <style lang="css">
 .input-text-wrapper {
-  --_gutter: 1.2rem;
-  --_border-width: var(--input-border-width-default);
-  --_outline-width: var(--input-border-width-default);
+  --_focus-box-shadow: var(--box-shadow-off);
 
   display: flex;
   align-items: center;
 
   background-color: var(--theme-form-input-bg);
-  border-radius: var(--input-border-width-default);
-  border: var(--_border-width) solid var(--theme-form-input-border);
+  border-radius: var(--form-element-border-width);
+  border: var(--form-element-border-width) solid var(--theme-form-input-border);
+  outline: var(--form-element-outline-width) solid var(--theme-form-input-outline);
+  box-shadow: var(--_focus-box-shadow);
 
-  &:focus-within {
-    border: var(--_border-width) solid var(--theme-form-input-border-focus);
-    outline: var(--_outline-width) solid hsl(from var(--theme-form-input-outline-focus) h s 50%);
-    box-shadow: var(--theme-form-focus-box-shadow);
-  }
-
-  &:not(:has(.btn)) {
+  &:not(:has(.input-button-core)) {
     .slot {
       display: inline-block;
       padding-inline: 0.8rem;
 
       .icon {
         color: var(--theme-form-input-text);
+        aspect-ratio: 1;
+        height: var(--form-icon-size);
+        width: var(--form-icon-size);
+        margin: 0 !important;
+        padding: 0 !important;
       }
     }
   }
 
-  &:has(.btn) {
-    .btn {
+  /* &:has(.input-button-core) {
+    .input-button-core {
       margin-inline: 0.6rem;
     }
-  }
+  } */
 
   &.has-left-slot {
     .left-slot {
       display: flex;
       align-items: center;
+      margin-inline: 0.6rem;
     }
   }
 
@@ -189,9 +197,21 @@ onMounted(() => {
     .right-slot {
       display: flex;
       align-items: center;
+      margin-inline: 0.6rem;
     }
   }
 
+  &:not(.has-left-slot) {
+    padding-inline-start: var(--form-text-padding-inline);
+  }
+
+  &:focus-within {
+    box-shadow: var(--box-shadow-on);
+    /* --_theme-form-input-outline-focus: hsl(from var(--_theme-form-input-outline-focus) h s 50%); */
+    outline: var(--form-element-outline-width) solid hsl(from var(--theme-form-input-outline-focus) h s 90%);
+    /* outline: var(--form-element-outline-width) solid white; */
+  }
+
   .input-text-core {
     background-color: transparent;
     border: none;
@@ -201,17 +221,27 @@ onMounted(() => {
 
     color: var(--theme-form-input-text);
     font-family: var(--font-family);
-    font-size: var(--theme-form-button-font-size-normal);
-    line-height: var(--line-height);
-    padding: 0.8rem 1.2rem;
+    font-size: var(--form-element-font-size);
+    line-height: var(--form-element-line-height);
+
+    padding-inline: var(--form-text-padding-inline);
+    padding-block-start: var(--form-element-padding-block-start);
+    padding-block-end: var(--form-element-padding-block-end);
 
     &::placeholder,
     &::-webkit-input-placeholder {
       font-family: var(--font-family);
-      font-size: var(--font-size);
+      font-size: var(--form-element-font-size);
       font-style: italic;
       font-weight: 400;
     }
+
+    /* WTH is --_focus-box-shadow undefined when attempting update here?? */
+    /*
+    &:focus-visible {
+      --_focus-box-shadow: var(--box-shadow-on);
+    }
+    */
   }
 }
 

package/components/forms/input-text/variants/InputTextAsNumberWithLabel.vue

@@ -23,6 +23,7 @@
       :theme
       inputmode="numeric"
       :ariaDescribedby
+      :size
     >
       <template v-if="hasLeftSlot" #left>
         <InputButtonCore
@@ -31,8 +32,8 @@
           :readonly="Number(modelValue) <= min"
           :is-pending="false"
           buttonText="Step down"
-          :theme
-          size="x-small"
+          theme="input-action"
+          :size
         >
           <template #iconOnly>
             <slot name="left"></slot>
@@ -46,8 +47,8 @@
           :readonly="Number(modelValue) >= max"
           :is-pending="false"
           buttonText="Step up"
-          :theme
-          size="x-small"
+          theme="input-action"
+          :size
         >
           <template #iconOnly>
             <slot name="right"></slot>
@@ -61,7 +62,7 @@
 
 <script setup lang="ts">
 import propValidators from '../../c12/prop-validators';
-const { maxlength, id, name, placeholder, label, errorMessage, fieldHasError, required, styleClassPassthrough, theme, step, min, max } = defineProps({
+const { maxlength, id, name, placeholder, label, errorMessage, fieldHasError, required, styleClassPassthrough, theme, step, min, max, size } = defineProps({
   maxlength: {
     type: Number,
     default: 255,
@@ -117,6 +118,13 @@ const { maxlength, id, name, placeholder, label, errorMessage, fieldHasError, re
     type: Number,
     default: 1,
   },
+  size: {
+    type: String as PropType<string>,
+    default: 'normal',
+    validator(value: string) {
+      return propValidators.size.includes(value);
+    },
+  },
 });
 
 const slots = useSlots();
@@ -156,6 +164,16 @@ onMounted(() => {
 .input-text-as-number {
   .input-text-wrapper {
     width: fit-content;
+
+    &:has(.input-text-as-number) {
+      .left-slot {
+        margin-inline: 0;
+      }
+      .right-slot {
+        margin-inline: 0;
+      }
+    }
+
     .input-text-core.input-text-as-number {
       flex-grow: initial;
       text-align: center;

package/components/forms/input-text/variants/InputTextWithLabel.vue

@@ -23,6 +23,7 @@
       :styleClassPassthrough
       :theme
       :ariaDescribedby
+      :size
     >
       <template v-if="hasLeftSlot" #left>
         <slot name="left"></slot>
@@ -37,7 +38,7 @@
 
 <script setup lang="ts">
 import propValidators from '../../c12/prop-validators';
-const { type, inputmode, maxlength, id, name, placeholder, label, errorMessage, fieldHasError, required, styleClassPassthrough, theme } = defineProps({
+const { type, inputmode, maxlength, id, name, placeholder, label, errorMessage, fieldHasError, required, styleClassPassthrough, theme, size } = defineProps({
   maxlength: {
     type: Number,
     default: 255,
@@ -92,6 +93,13 @@ const { type, inputmode, maxlength, id, name, placeholder, label, errorMessage,
       return propValidators.theme.includes(value);
     },
   },
+  size: {
+    type: String as PropType<string>,
+    default: 'normal',
+    validator(value: string) {
+      return propValidators.size.includes(value);
+    },
+  },
 });
 
 const slots = useSlots();

package/components/forms/input-textarea/InputTextareaCore.vue

@@ -97,20 +97,20 @@ onMounted(() => {
 <style lang="css">
 .input-textarea-wrapper {
   --_gutter: 1.2rem;
-  --_border-width: var(--input-border-width-default);
-  --_outline-width: var(--input-border-width-default);
+  --_border-width: var(--form-element-border-width);
+  --_outline-width: var(--form-element-border-width);
 
   display: flex;
   align-items: center;
 
   background-color: var(--theme-form-input-bg);
-  border-radius: var(--input-border-width-default);
+  border-radius: var(--form-element-border-width);
   border: var(--_border-width) solid var(--theme-form-input-border);
 
   &:focus-within {
     border: var(--_border-width) solid var(--theme-form-input-border-focus);
     outline: var(--_outline-width) solid hsl(from var(--theme-form-input-outline-focus) h s 50%);
-    box-shadow: var(--theme-form-focus-box-shadow);
+    box-shadow: var(--form-focus-box-shadow);
   }
 
   .slot {

package/components/forms/toggle-switch/ToggleSwitchCore.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="toggle-switch-core" :class="(elementClasses, size)" :data-form-theme="formTheme">
+  <div class="toggle-switch-core" :class="elementClasses" :data-size="size" :data-form-theme="formTheme">
     <label class="toggle-switch-input" :class="[{ round }]" :for="inputId">
       <input type="checkbox" v-model="modelValue" :true-value :false-value :id="inputId" :aria-describedby="`${id}-description`" :name :required />
       <div class="symbol-wrapper" :class="[{ round }]">
@@ -98,6 +98,8 @@ const inputId = computed(() => `toggle-sitch-${id}`);
   .toggle-switch-input {
     position: relative;
     display: inline-block;
+    height: calc(var(--form-toggle-symbol-size) + calc(var(--form-element-border-width) * 2) + calc(var(--form-element-outline-width) * 2));
+    width: calc(var(--form-toggle-symbol-size) * 2 - calc(var(--form-element-border-width) * 2) + calc(var(--form-element-outline-width) * 2) + var(--form-toggle-switch-width-adjustment));
 
     input {
       opacity: 0;
@@ -139,43 +141,23 @@ const inputId = computed(() => `toggle-sitch-${id}`);
 * ToggleSwitch configurable
 **/
 .toggle-switch-core {
-  /* Sizes */
-  &.x-small {
-    --_symbol-size: 2rem;
-  }
-  &.small {
-    --_symbol-size: 2.4rem;
-  }
-  &.normal {
-    --_symbol-size: 3.4rem;
-  }
-  &.medium {
-    --_symbol-size: 4rem;
-  }
-  &.large {
-    --_symbol-size: 4.4rem;
-  }
-
   .toggle-switch-input {
-    border: var(--theme-form-toggle-border);
-    outline: var(--theme-form-toggle-outline);
-    width: calc(var(--_symbol-size) * 2 - calc(var(--theme-form-toggle-border-width) * 4));
-    height: calc(var(--_symbol-size) + calc(var(--theme-form-toggle-border-width) * 4));
-
     &.round {
-      border-radius: calc(var(--_symbol-size) + calc(var(--theme-form-toggle-border-width) * 2));
+      border-radius: calc(var(--form-toggle-symbol-size) + calc(var(--form-element-border-width) * 2));
     }
 
     .symbol-wrapper {
+      border: var(--theme-form-toggle-border);
       background-color: var(--theme-form-toggle-bg-off);
+      outline: var(--theme-form-toggle-outline);
       transition: 0.4s;
 
       &.round {
-        border-radius: var(--_symbol-size);
+        border-radius: var(--form-toggle-symbol-size);
       }
       .symbol {
-        height: calc(var(--_symbol-size) - 0.6rem);
-        width: calc(var(--_symbol-size) - 0.6rem);
+        height: calc(var(--form-toggle-symbol-size) - 0.6rem);
+        width: calc(var(--form-toggle-symbol-size) - 0.6rem);
         left: 0.4rem;
         bottom: 0.4rem;
         background-color: var(--theme-form-toggle-symbol-off);
@@ -196,17 +178,25 @@ const inputId = computed(() => `toggle-sitch-${id}`);
             color: var(--theme-form-toggle-icon-stroke-colour-off);
             opacity: 1;
           }
+
+          .icon {
+            --_icon-size: var(--form-icon-size);
+            height: var(--_icon-size);
+            width: var(--_icon-size);
+          }
         }
       }
     }
 
     input:focus-visible + .symbol-wrapper {
-      box-shadow: var(--theme-form-focus-box-shadow);
+      box-shadow: var(--box-shadow-on);
+      outline: var(--form-element-outline-width) solid hsl(from var(--theme-form-input-outline-focus) h s 90%);
     }
 
     input:checked + .symbol-wrapper .symbol {
+      --_on-position: calc(var(--form-toggle-symbol-size) * 0.8);
       background-color: var(--theme-form-toggle-symbol-on);
-      transform: translateX(26px);
+      transform: translateX(var(--_on-position));
 
       .symbol-icon {
         &.icon-on {

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "srcdev-nuxt-forms",
   "type": "module",
-  "version": "2.1.36",
+  "version": "2.1.38",
   "main": "nuxt.config.ts",
   "scripts": {
     "clean": "rm -rf .nuxt && rm -rf .output && rm -rf .playground/.nuxt && rm -rf .playground/.output",
     "cleanall": "rm -rf node_modules && rm -rf .nuxt && rm -rf .output && rm -rf .playground/.nuxt && rm -rf .playground/.output && rm -rf .playground/node_modules && rm package-lock.json",
     "reinstall": "rm -rf node_modules && npm install",
+    "cleaninstall": "npm run clean && npm run reinstall",
     "dev": "nuxi dev .playground",
     "build": "nuxt build .playground",
     "generate": "nuxt generate .playground",