srcdev-nuxt-forms 4.2.0 → 5.0.1

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

@@ -70,7 +70,7 @@ const props = defineProps({
   },
   size: {
     type: String as PropType<string>,
-    default: 'normal',
+    default: 'default',
     validator(value: string) {
       return propValidators.size.includes(value);
     },
@@ -107,6 +107,67 @@ const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
 
 <style lang="css">
 .input-textarea-wrapper {
+  background-color: var(--element-decorator-background-color);
+  outline: var(--element-decorator-outline-default);
+
+  border-top-left-radius: var(--element-decorator-border-top-left-radius);
+  border-top-right-radius: var(--element-decorator-border-top-right-radius);
+  border-bottom-left-radius: var(--element-decorator-border-bottom-left-radius);
+  border-bottom-right-radius: var(--element-decorator-border-bottom-right-radius);
+
+  border-top: var(--element-decorator-border-top-default);
+  border-right: var(--element-decorator-border-right-default);
+  border-bottom: var(--element-decorator-border-bottom-default);
+  border-left: var(--element-decorator-border-left-default);
+
+  padding-inline: var(--element-decorator-padding-inline);
+
+  &:hover {
+    /* background-color: lab(89.6502 -0.829279 -2.45323 / 0.1); */
+    background-color: hsl(from var(--theme-form-input-border) h s 20%);
+  }
+
+  display: flex;
+  align-items: center;
+  gap: 12px;
+
+  .slot {
+    display: flex;
+    place-items: center;
+    background-clip: padding-box;
+
+    &.left-slot {
+      /* background-color: green; */
+    }
+    &.right-slot {
+      /* background-color: orange; */
+    }
+  }
+
+  .input-textarea-core {
+    all: unset;
+    flex-grow: 1;
+    field-sizing: content;
+
+    font-family: var(--font-family);
+    font-size: var(--form-element-font-size);
+    line-height: var(--form-element-line-height);
+    padding-block: var(--input-element-padding-block);
+    padding-inline: var(--input-element-padding-inline);
+
+    min-height: var(--input-textarea-min-height);
+
+    &::placeholder {
+      color: var(--input-placeholder-color);
+      font-size: var(--input-placeholder-font-size);
+      font-style: var(--input-placeholder-font-style);
+      line-height: var(--input-placeholder-line-height);
+      font-weight: var(--input-placeholder-font-weight);
+    }
+  }
+}
+
+.input-textarea-wrapper-XXX {
   --_focus-box-shadow: var(--box-shadow-off);
   --_input-textarea-core-color: var(--theme-form-input-text-color-normal);
 

package/components/forms/input-textarea/variants/InputTextareaWithLabel.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="input-textarea-with-label" :data-form-theme="formTheme" :class="[elementClasses, inputVariant, { dirty: isDirty }, { active: isActive }]">
-    <label :for="id" class="input-textarea-label body-normal-semibold">{{ label }}</label>
+    <InputLabel :for="id" :id :theme :name :input-variant :field-has-error :style-class-passthrough="['input-textarea-label']">
+      <template #textLabel>{{ label }}</template>
+    </InputLabel>
 
     <InputTextareaCore
       v-model="modelValue"
@@ -25,7 +27,7 @@
         <slot name="right"></slot>
       </template>
     </InputTextareaCore>
-    <InputError :errorMessage :showError="fieldHasError" :id :isDetached="false" />
+    <InputError :errorMessage :showError="fieldHasError" :id :isDetached="false" :inputVariant />
   </div>
 </template>
 
@@ -73,7 +75,7 @@ const props = defineProps({
   },
   size: {
     type: String as PropType<string>,
-    default: 'normal',
+    default: 'default',
     validator(value: string) {
       return propValidators.size.includes(value);
     },
@@ -123,7 +125,7 @@ watch(
 </script>
 
 <style lang="css">
-.input-textarea-with-label {
+.input-textarea-with-label-XXX {
   --_input-textarea-with-label-margin-block-start: 0;
   --_input-textarea-with-label-background-color: transparent;
 
@@ -213,7 +215,7 @@ watch(
   /* overflow: clip; */
 
   &.underlined {
-    border-bottom: var(--_input-textarea-wrapper-border-underlined);
+    /* border-bottom: var(--_input-textarea-wrapper-border-underlined); */
     border-top-left-radius: var(--_input-textarea-wrapper-underlined-border-radius-top-left);
     border-top-right-radius: var(--_input-textarea-wrapper-underlined-border-radius-top-right);
     border-bottom-left-radius: var(--_input-textarea-wrapper-underlined-border-radius-bottom-left);

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

@@ -66,7 +66,7 @@ const props = defineProps({
   },
   size: {
     type: String as PropType<string>,
-    default: 'normal',
+    default: 'default',
     validator(value: string) {
       return propValidators.size.includes(value);
     },

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

@@ -62,7 +62,7 @@ const props = defineProps({
   },
   size: {
     type: String as PropType<string>,
-    default: 'normal',
+    default: 'default',
     validator(value: string) {
       return propValidators.size.includes(value);
     },

package/components/forms/toggle-switch/variants/ToggleSwitchWithLabel.vue

@@ -67,7 +67,7 @@ const props = defineProps({
   },
   size: {
     type: String as PropType<string>,
-    default: 'normal',
+    default: 'default',
     validator(value: string) {
       return propValidators.size.includes(value);
     },

package/components/forms/toggle-switch/variants/ToggleSwitchWithLabelInline.vue

@@ -57,7 +57,7 @@ const props = defineProps({
   },
   size: {
     type: String as PropType<string>,
-    default: 'normal',
+    default: 'default',
     validator(value: string) {
       return propValidators.size.includes(value);
     },

package/package.json

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

package/assets/styles/forms/index.css

@@ -1,2 +0,0 @@
-@import './variables/index.css';
-@import './themes/index.css';

package/assets/styles/forms/variables/_sizes.css

@@ -1,71 +0,0 @@
-:root {
-  --form-element-padding-block-start: 0.4lh;
-  --form-element-padding-block-end: 0.4lh;
-  --form-element-border-width: 0.2rem;
-  --form-element-border-width-underlined: 0.4rem;
-  --form-element-outline-width: 0.1rem;
-
-  --form-text-padding-inline: 0.5em;
-  --form-button-padding-inline: 1.25em;
-  --form-button-icon-gap: 1em;
-
-  [data-size='x-small'] {
-    --form-element-font-size: var(--step-0);
-    --form-placeholder-font-size: calc(var(--step-0) * 0.65);
-    --form-element-line-height: var(--step-0);
-    --form-input-border-radius: 0.4rem;
-    --form-icon-only-button-size: calc(var(--step-1) * 2 + 1px);
-    --form-toggle-symbol-size: calc(var(--step-0) * 1.55);
-    --form-toggle-switch-width-adjustment: 0.5rem;
-
-    --form-input-checkbox-radio-button-size: var(--step-0);
-  }
-  [data-size='small'] {
-    --form-element-font-size: var(--step-1);
-    --form-placeholder-font-size: calc(var(--step-1) * 0.65);
-    --form-element-line-height: var(--step-1);
-    --form-icon-size: var(--step-1);
-    --form-input-border-radius: 0.4rem;
-    --form-icon-only-button-size: calc(var(--step-1) * 2.25 + 1px);
-    --form-toggle-symbol-size: calc(var(--step-1) * 1.635);
-    --form-toggle-switch-width-adjustment: 0.3rem;
-
-    --form-input-checkbox-radio-button-size: var(--step-1);
-  }
-  [data-size='normal'] {
-    --form-element-font-size: var(--step-2);
-    --form-placeholder-font-size: calc(var(--step-2) * 0.65);
-    --form-element-line-height: var(--step-2);
-    --form-icon-size: var(--step-2);
-    --form-input-border-radius: 0.4rem;
-    --form-icon-only-button-size: calc(var(--step-1) * 2.5 + 1px);
-    --form-toggle-symbol-size: calc(var(--step-2) * 1.72);
-    --form-toggle-switch-width-adjustment: 0.2rem;
-
-    --form-input-checkbox-radio-button-size: var(--step-2);
-  }
-  [data-size='medium'] {
-    --form-element-font-size: var(--step-3);
-    --form-placeholder-font-size: calc(var(--step-3) * 0.65);
-    --form-element-line-height: var(--step-3);
-    --form-icon-size: var(--step-3);
-    --form-input-border-radius: 0.4rem;
-    --form-icon-only-button-size: calc(var(--step-1) * 2.75 + 1px);
-    --form-toggle-symbol-size: calc(var(--step-3) * 1.78);
-    --form-toggle-switch-width-adjustment: 0rem;
-
-    --form-input-checkbox-radio-button-size: var(--step-3);
-  }
-  [data-size='large'] {
-    --form-element-font-size: var(--step-4);
-    --form-placeholder-font-size: calc(var(--step-4) * 0.65);
-    --form-element-line-height: var(--step-4);
-    --form-icon-size: var(--step-4);
-    --form-input-border-radius: 0.4rem;
-    --form-icon-only-button-size: calc(var(--step-1) * 3 + 1px);
-    --form-toggle-symbol-size: calc(var(--step-4) * 1.816);
-    --form-toggle-switch-width-adjustment: -0.2rem;
-
-    --form-input-checkbox-radio-button-size: var(--step-4);
-  }
-}

package/assets/styles/forms/variables/index.css

@@ -1,2 +0,0 @@
-@import './_theme.css';
-@import './_sizes.css';

package/assets/styles/typography/index.css

@@ -1,2 +0,0 @@
-@import './utils';
-@import './variables';

package/assets/styles/typography/variables/index.css

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

package/assets/styles/variables/index.css

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

package/components/forms/input-select/InputSelect.vue

@@ -1,289 +0,0 @@
-<template>
-  <fieldset
-    :aria-required="required"
-    :aria-invalid="fieldHasError"
-    class="input-select-fieldset"
-    :class="[inputVariant, { dirty: isDirty }, { active: isActive }, { error: fieldHasError }]"
-    :data-testid
-    :data-form-theme="formTheme"
-    :data-size="size"
-  >
-    <legend :class="[{ 'has-description': hasDescriptionSlot }]">{{ legend }}</legend>
-
-    <div v-if="hasDescriptionSlot" :id="`${name}-description`">
-      <slot name="description"></slot>
-    </div>
-
-    <select v-model="modelValue" class="input-select" :class="[inputVariant]" :name>
-      <option v-if="placeholder" value="" readonly :selected="!modelValue" class="input-select-option placeholder">{{ placeholder }}</option>
-      <option v-for="item in fieldData.data" :key="item.id" :value="item.value" :selected="item.value === modelValue" class="input-select-option">
-        <Icon :name="item.icon" class="icon" />
-        {{ item.label }}
-      </option>
-    </select>
-
-    <InputError :errorMessage="errorMessage" :showError="fieldHasError" :id="errorId" :isDetached="false" :inputVariant />
-  </fieldset>
-</template>
-
-<script setup lang="ts">
-import propValidators from '../c12/prop-validators';
-import type { IFormMultipleOptions } from '@/types/types.forms';
-
-const props = defineProps({
-  dataTestid: {
-    type: String,
-    default: 'input-select',
-  },
-  name: {
-    type: String,
-    required: true,
-  },
-  legend: {
-    type: String,
-    required: true,
-  },
-  label: {
-    type: String,
-    required: true,
-  },
-  placeholder: {
-    type: String,
-    default: '',
-  },
-  errorMessage: {
-    type: [Object, String],
-    required: true,
-  },
-  required: {
-    type: Boolean,
-    default: false,
-  },
-  fieldHasError: {
-    type: Boolean,
-    default: false,
-  },
-  size: {
-    type: String as PropType<string>,
-    default: 'medium',
-    validator(value: string) {
-      return propValidators.size.includes(value);
-    },
-  },
-  styleClassPassthrough: {
-    type: Array as PropType<string[]>,
-    default: () => [],
-  },
-  theme: {
-    type: String as PropType<string>,
-    default: 'primary',
-    validator(value: string) {
-      return propValidators.theme.includes(value);
-    },
-  },
-  inputVariant: {
-    type: String as PropType<string>,
-    default: 'normal',
-    validator(value: string) {
-      return propValidators.inputVariant.includes(value);
-    },
-  },
-});
-
-const slots = useSlots();
-const hasDescriptionSlot = computed(() => slots.description !== undefined);
-const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
-
-const formTheme = computed(() => {
-  return props.fieldHasError ? 'error' : props.theme;
-});
-
-const id = useId();
-const errorId = `${name}-error-message`;
-const ariaDescribedby = computed(() => {
-  const ariaDescribedbyId = hasDescriptionSlot.value ? `${id}-description` : undefined;
-  return props.fieldHasError ? errorId : ariaDescribedbyId;
-});
-
-const modelValue = defineModel({ required: true });
-const isDirty = defineModel('isDirty');
-const isActive = defineModel('isActive');
-const fieldData = defineModel('fieldData') as Ref<IFormMultipleOptions>;
-</script>
-
-<style lang="css">
-.input-select-fieldset {
-  --_input-select-fieldset-underline-color: transparent;
-  margin: 0;
-  padding: 0;
-  border: 0;
-
-  border-bottom-right-radius: var(--form-input-border-radius);
-  border-bottom-left-radius: var(--form-input-border-radius);
-  border-bottom: var(--form-element-border-width-underlined) solid var(--_input-select-fieldset-underline-color);
-
-  &.underlined {
-    --_input-select-fieldset-underline-color: var(--theme-form-input-border);
-  }
-
-  /* &.error {
-    border-bottom: var(--form-element-border-width-underlined) solid var(--theme-form-input-border);
-  } */
-
-  legend {
-    font-family: var(--font-family);
-    font-size: 1.6rem;
-    font-weight: 500;
-
-    &.has-description {
-      margin-bottom: 0;
-    }
-  }
-
-  .label-description {
-    font-family: var(--font-family);
-    font-size: 1.6rem;
-    margin-top: 1.2rem;
-  }
-
-  .input-select {
-    &,
-    &::picker(select) {
-      appearance: base-select;
-    }
-
-    &::picker(select) {
-      transition: display allow-discrete 0.5s, opacity 0.5s, overlay 0.5s allow-discrete;
-    }
-
-    &:not(:open)::picker(select) {
-      opacity: 0;
-    }
-
-    &:open::picker(select) {
-      opacity: 1;
-
-      @starting-style {
-        opacity: 0;
-      }
-    }
-  }
-
-  .input-select {
-    --_input-select-border: var(--form-element-border-width) solid var(--theme-form-input-border);
-    --_input-select-border-radius: var(--form-input-border-radius);
-    --_input-select-outline-color: var(--theme-form-input-outline);
-    --_input-select-outline: var(--form-element-outline-width) solid var(--_input-select-outline-color);
-
-    --_input-select-box-shadow: var(--_focus-box-shadow);
-    --_focus-box-shadow: var(--box-shadow-off);
-
-    --_input-select-text-color: var(--theme-form-input-text-color-normal);
-    --_input-select-text-font-size: var(--step-2);
-    --_input-select-line-height: 1.5;
-
-    --_input-select-background-color: var(--theme-form-input-bg-normal);
-
-    /* Underlined vars */
-    --_input-select-border-underlined: var(--form-element-border-width-underlined) solid var(--theme-form-input-border);
-    --_input-select-underlined-border-radius-top-left: 0;
-    --_input-select-underlined-border-radius-top-right: 0;
-    --_input-select-underlined-border-radius-bottom-left: 4px;
-    --_input-select-underlined-border-radius-bottom-right: 4px;
-
-    /* Placeholder vars */
-    --_placeholder-text-color: var(--theme-form-input-text-label-color-normal);
-    --_placeholder-text-margin-block: 0.8rem;
-    --_placeholder-text-size: var(--step-2);
-    --_placeholder-text-weight: normal;
-    --_placeholder-text-line-height: 1.5;
-    --_placeholder-text-background-color: var(--_input-text-with-label-background-color);
-
-    background-color: var(--_input-select-background-color);
-
-    border-radius: var(--_input-select-border-radius);
-    border: var(--_input-select-border);
-    outline: var(--_input-select-outline);
-
-    color: var(--_input-select-text-color);
-    font-size: var(--_input-select-text-font-size);
-    line-height: var(--_input-select-line-height);
-
-    padding-block-start: calc(var(--form-element-padding-block-start) - 2px);
-    padding-block-end: calc(var(--form-element-padding-block-start) - 3px);
-
-    min-width: 100%;
-
-    &:focus-visible {
-      --_input-select-box-shadow: var(--box-shadow-on);
-      --_input-select-outline: var(--form-element-outline-width) solid hsl(from var(--theme-form-input-outline-focus) h s 90%);
-    }
-
-    &.underlined {
-      --_input-select-text-color: var(--theme-form-input-text-label-color-underlined);
-      --_input-select-background-color: color-mix(in srgb, currentColor 5%, transparent);
-      /* --_input-select-background-color: var(--theme-form-input-bg-underlined); */
-      --_input-select-outline-color: transparent;
-      --_input-select-text-color: var(--_input-text-core-color);
-
-      border-color: transparent;
-      /* border-bottom: var(--_input-select-border-underlined);
-      border-top-left-radius: var(--_input-select-underlined-border-radius-top-left);
-      border-top-right-radius: var(--_input-select-underlined-border-radius-top-right);
-      border-bottom-left-radius: var(--_input-select-underlined-border-radius-bottom-left);
-      border-bottom-right-radius: var(--_input-select-underlined-border-radius-bottom-right);
-
-      &.error {
-        --_input-select-border-underlined: var(--form-element-border-width-underlined) solid transparent;
-      } */
-
-      &.active,
-      &.dirty {
-      }
-    }
-
-    &.outlined {
-      &.active,
-      &.dirty {
-      }
-    }
-
-    &:not(.normal) {
-      &.active,
-      &.dirty {
-      }
-      &:focus-within {
-      }
-    }
-
-    /*
-  * Apply generic styles
-  **/
-
-    &.underlined {
-    }
-
-    &.outlined {
-    }
-
-    &:not(.normal) {
-      &:focus-visible {
-        /* --_input-select-box-shadow: var(--box-shadow-on);
-      --_input-select-outline: var(--form-element-outline-width) solid hsl(from var(--theme-form-input-outline-focus) h s 90%); */
-      }
-    }
-
-    .input-select-option {
-      color: var(--_placeholder-text-color);
-      margin-block: var(--_placeholder-text-margin-block);
-      font-size: var(--_placeholder-text-size);
-      font-weight: var(--_placeholder-text-weight);
-      line-height: var(--_placeholder-text-line-height);
-
-      &.placeholder {
-        /* background-color: var(--_placeholder-text-background-color); */
-      }
-    }
-  }
-}
-</style>