srcdev-nuxt-forms 3.0.0 → 4.1.0

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

@@ -0,0 +1,234 @@
+<template>
+  <div
+    class="input-textarea-wrapper"
+    :data-form-theme="formTheme"
+    :data-size="size"
+    :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>
+    </span>
+
+    <textarea
+      :maxlength
+      :placeholder
+      :id
+      :name
+      :required
+      :class="['input-textarea-core', elementClasses, { dirty: isDirty }, { active: isActive }]"
+      v-model="modelValue"
+      ref="inputField"
+      :aria-invalid="fieldHasError"
+      :aria-describedby="`${id}-error-message`"
+      @focusin="updateFocus(true)"
+      @focusout="updateFocus(false)"
+    ></textarea>
+
+    <span v-if="hasRightSlot" class="slot right-slot">
+      <slot name="right"></slot>
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import propValidators from '../c12/prop-validators';
+const props = defineProps({
+  maxlength: {
+    type: Number,
+    default: 255,
+  },
+  id: {
+    type: String,
+    required: true,
+  },
+  name: {
+    type: String,
+    required: true,
+  },
+  placeholder: {
+    type: String,
+    default: '',
+  },
+  fieldHasError: {
+    type: Boolean,
+    default: false,
+  },
+  required: {
+    type: Boolean,
+    default: false,
+  },
+  styleClassPassthrough: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+  theme: {
+    type: String as PropType<string>,
+    default: 'primary',
+    validator(value: string) {
+      return propValidators.theme.includes(value);
+    },
+  },
+  size: {
+    type: String as PropType<string>,
+    default: 'normal',
+    validator(value: string) {
+      return propValidators.size.includes(value);
+    },
+  },
+  inputVariant: {
+    type: String as PropType<string>,
+    default: 'normal',
+    validator(value: string) {
+      return propValidators.inputVariant.includes(value);
+    },
+  },
+});
+
+const slots = useSlots();
+const hasLeftSlot = computed(() => slots.left !== undefined);
+const hasRightSlot = computed(() => slots.right !== undefined);
+
+const formTheme = computed(() => {
+  return props.fieldHasError ? 'error' : props.theme;
+});
+
+const modelValue = defineModel<string | number | readonly string[] | null | undefined>();
+const isDirty = defineModel('isDirty');
+const isActive = defineModel('isActive');
+
+const updateFocus = (isFocused: boolean) => {
+  isActive.value = isFocused;
+};
+
+const inputField = ref<HTMLInputElement | null>(null);
+
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+</script>
+
+<style lang="css">
+.input-textarea-wrapper {
+  --_focus-box-shadow: var(--box-shadow-off);
+  --_input-textarea-core-color: var(--theme-form-input-text-color-normal);
+
+  --_input-textarea-wrapper-background-color: var(--theme-form-input-bg-normal);
+
+  --_input-textarea-wrapper-border: var(--form-element-border-width) solid var(--theme-form-input-border);
+  --_input-textarea-wrapper-border-radius: var(--form-input-border-radius);
+
+  --_input-textarea-wrapper-outline: var(--form-element-outline-width) solid var(--theme-form-input-outline);
+  --_input-textarea-wrapper-opacity: 1;
+  --_input-textarea-wrapper-box-shadow: var(--_focus-box-shadow);
+  --_input-textarea-wrapper-margin-inline: 0;
+  --_input-textarea-wrapper-padding-block: 0;
+
+  &.underlined {
+    --_input-textarea-core-color: var(--theme-form-input-text-color-underlined);
+    --_input-textarea-wrapper-background-color: transparent;
+    --_input-textarea-wrapper-padding-block: 0.5rem;
+  }
+
+  &.outlined {
+    --_input-textarea-wrapper-margin-inline: 1px;
+    --_input-textarea-wrapper-background-color: var(--theme-form-input-bg-outlined);
+  }
+
+  &.normal {
+    &:focus-within {
+      --_input-textarea-wrapper-box-shadow: var(--box-shadow-on);
+      --_input-textarea-wrapper-outline: var(--form-element-outline-width) solid hsl(from var(--theme-form-input-outline-focus) h s 90%);
+    }
+  }
+
+  &:not(.normal) {
+    --_input-textarea-wrapper-border: none;
+    --_input-textarea-wrapper-box-shadow: none;
+    --_input-textarea-wrapper-outline: none;
+    --_input-textarea-wrapper-opacity: 0;
+
+    &:focus {
+      --_input-textarea-wrapper-border: none;
+      --_input-textarea-wrapper-box-shadow: none;
+      --_input-textarea-wrapper-outline: none;
+      --_input-textarea-wrapper-background-color: transparent;
+    }
+
+    &:focus-within {
+      --_input-textarea-wrapper-border: none;
+      --_input-textarea-wrapper-box-shadow: none;
+      --_input-textarea-wrapper-outline: none;
+      --_input-textarea-wrapper-background-color: transparent;
+    }
+
+    &.active,
+    &.dirty {
+      --_input-textarea-wrapper-border: none;
+      --_input-textarea-wrapper-box-shadow: none;
+      --_input-textarea-wrapper-outline: none;
+      --_input-textarea-wrapper-background-color: transparent;
+
+      --_input-textarea-wrapper-opacity: 1;
+    }
+  }
+
+  display: flex;
+  align-items: center;
+
+  background-color: var(--_input-textarea-wrapper-background-color);
+  border-radius: var(--_input-textarea-wrapper-border-radius);
+  border: var(--_input-textarea-wrapper-border);
+  outline: var(--_input-textarea-wrapper-outline);
+  box-shadow: var(--_input-textarea-wrapper-box-shadow);
+  opacity: var(--_input-textarea-wrapper-opacity);
+
+  margin-inline: var(--_input-textarea-wrapper-margin-inline);
+  padding-block: var(--_input-textarea-wrapper-padding-block);
+
+  &:not(.normal) {
+    transition: opacity 0.2s ease-in-out;
+  }
+
+  &.has-left-slot {
+    .left-slot {
+      display: flex;
+      align-items: center;
+      margin-inline-start: 1rem;
+    }
+  }
+
+  &.has-right-slot {
+    .right-slot {
+      display: flex;
+      align-items: center;
+      margin-inline-end: 1rem;
+    }
+  }
+
+  .input-textarea-core {
+    background-color: transparent;
+    border: none;
+    outline: none;
+    box-shadow: none;
+    flex-grow: 1;
+
+    min-height: 4lh;
+    field-sizing: content;
+
+    color: var(--_input-textarea-core-color);
+    font-family: var(--font-family);
+    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(--form-element-font-size);
+      font-style: italic;
+      font-weight: 400;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,267 @@
+<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>
+
+    <InputTextareaCore
+      v-model="modelValue"
+      v-model:isDirty="isDirty"
+      v-model:isActive="isActive"
+      :maxlength
+      :id
+      :name
+      :placeholder
+      :label
+      :fieldHasError
+      :required
+      :styleClassPassthrough
+      :theme
+      :size
+      :inputVariant
+    >
+      <template v-if="hasLeftSlot" #left>
+        <slot name="left"></slot>
+      </template>
+      <template v-if="hasRightSlot" #right>
+        <slot name="right"></slot>
+      </template>
+    </InputTextareaCore>
+    <InputError :errorMessage :showError="fieldHasError" :id :isDetached="false" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import propValidators from '../../c12/prop-validators';
+const props = defineProps({
+  maxlength: {
+    type: Number,
+    default: 255,
+  },
+  name: {
+    type: String,
+    required: true,
+  },
+  placeholder: {
+    type: String,
+    default: '',
+  },
+  label: {
+    type: String,
+    required: true,
+  },
+  errorMessage: {
+    type: [Object, String],
+    required: true,
+  },
+  fieldHasError: {
+    type: Boolean,
+    default: false,
+  },
+  required: {
+    type: Boolean,
+    default: false,
+  },
+  styleClassPassthrough: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+  theme: {
+    type: String as PropType<string>,
+    default: 'primary',
+    validator(value: string) {
+      return propValidators.theme.includes(value);
+    },
+  },
+  size: {
+    type: String as PropType<string>,
+    default: 'normal',
+    validator(value: string) {
+      return propValidators.size.includes(value);
+    },
+  },
+  inputVariant: {
+    type: String as PropType<string>,
+    default: 'normal',
+    validator(value: string) {
+      return propValidators.inputVariant.includes(value);
+    },
+  },
+});
+
+const slots = useSlots();
+const hasLeftSlot = computed(() => slots.left !== undefined);
+const hasRightSlot = computed(() => slots.right !== undefined);
+
+const id = useId();
+const formTheme = computed(() => {
+  return props.fieldHasError ? 'error' : props.theme;
+});
+
+const modelValue = defineModel<string | number | readonly string[] | null | undefined>();
+const isActive = ref<boolean>(false);
+const isDirty = ref<boolean>(false);
+
+const { elementClasses, updateElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+const testDirty = () => {
+  const watchValue = modelValue.value ?? '';
+
+  if (!isDirty.value && typeof watchValue === 'string' && watchValue.length > 0) {
+    isDirty.value = true;
+  }
+};
+
+onMounted(() => {
+  testDirty();
+});
+
+watch(
+  () => modelValue.value,
+  () => {
+    testDirty();
+  }
+);
+</script>
+
+<style lang="css">
+.input-textarea-with-label {
+  --_input-textarea-with-label-margin-block-start: 0;
+  --_input-textarea-with-label-background-color: transparent;
+
+  --_input-textarea-wrapper-border: var(--form-element-border-width) solid var(--theme-form-input-border);
+  --_input-textarea-wrapper-border-radius: var(--form-input-border-radius);
+  --_input-textarea-wrapper-border-underlined: var(--form-element-border-width-underlined) solid var(--theme-form-input-border);
+  --_input-textarea-wrapper-outline: var(--form-element-outline-width) solid var(--theme-form-input-outline);
+  --_input-textarea-wrapper-box-shadow: var(--_focus-box-shadow);
+  --_input-textarea-wrapper-padding-block: 0;
+
+  --_focus-box-shadow: var(--box-shadow-off);
+
+  /* Label vars */
+  --_label-textarea-color: var(--theme-form-input-text-label-color-normal);
+  --_label-textarea-margin-block: 0.8rem;
+  --_label-textarea-size: var(--step-2);
+  --_label-textarea-weight: normal;
+  --_label-textarea-height: auto;
+  --_label-textarea-line-height: 1.5;
+  --_label-textarea-background-color: var(--_input-textarea-with-label-background-color);
+
+  &.underlined {
+    --_label-textarea-color: var(--theme-form-input-text-label-color-underlined);
+    --_label-offset: 1rem 0;
+    --_input-textarea-with-label-background-color: color-mix(in srgb, currentColor 5%, transparent);
+
+    --_input-textarea-wrapper-underlined-border-radius-top-left: 0;
+    --_input-textarea-wrapper-underlined-border-radius-top-right: 0;
+    --_input-textarea-wrapper-underlined-border-radius-bottom-left: 4px;
+    --_input-textarea-wrapper-underlined-border-radius-bottom-right: 4px;
+
+    --_label-textarea-background-color: transparent;
+    --_label-textarea-height: fit-content;
+
+    &:has(.input-textarea-wrapper.active),
+    &:has(.input-textarea-wrapper.dirty) {
+      --_label-offset: 0 -3.2rem;
+      --_label-textarea-weight: bolder;
+      --_label-textarea-size: var(--step-1);
+      /* line-height: 1.5; */
+      /* padding: 0.2rem 1.2rem; */
+    }
+  }
+
+  &.outlined {
+    --_label-textarea-color: var(--theme-form-input-text-label-color-outlined);
+
+    --_label-offset: 1rem 0;
+    --_input-textarea-with-label-background-color: var(--theme-form-input-bg-normal);
+
+    --_input-textarea-wrapper-padding-block: 0.4em 0;
+    --_label-textarea-height: fit-content;
+
+    &:has(.input-textarea-wrapper.active),
+    &:has(.input-textarea-wrapper.dirty) {
+      --_label-offset: 1rem -2.8rem;
+      --_label-textarea-weight: normal;
+      /* --_label-textarea-size: var(--step-1); */
+      /* line-height: 1.5; */
+      /* padding: 0.2rem 1.2rem; */
+    }
+  }
+
+  &:not(.normal) {
+    --_input-textarea-with-label-margin-block-start: 3em;
+
+    &:has(.input-textarea-wrapper.active),
+    &:has(.input-textarea-wrapper.dirty) {
+      /* --_label-offset: 1rem -2.8rem; */
+      /* font-size: var(--step-1); */
+      /* line-height: 1.5; */
+      /* padding: 0.2rem 1.2rem; */
+    }
+
+    &:focus-within {
+      --_input-textarea-wrapper-box-shadow: var(--box-shadow-on);
+      --_input-textarea-wrapper-outline: var(--form-element-outline-width) solid hsl(from var(--theme-form-input-outline-focus) h s 90%);
+    }
+  }
+
+  /*
+  * Apply generic styles
+  **/
+
+  background-color: var(--_input-textarea-with-label-background-color);
+  border-radius: var(--_input-textarea-wrapper-border-radius);
+  /* overflow: clip; */
+
+  &.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);
+    border-bottom-right-radius: var(--_input-textarea-wrapper-underlined-border-radius-bottom-right);
+  }
+
+  &.outlined {
+    border: var(--_input-textarea-wrapper-border);
+    outline: var(--_input-textarea-wrapper-outline);
+    box-shadow: var(--_input-textarea-wrapper-box-shadow);
+    padding-block: var(--_input-textarea-wrapper-padding-block);
+  }
+
+  &:not(.normal) {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr;
+    grid-template-areas: 'underlined-textarea-stack';
+
+    margin-block-start: var(--_input-textarea-with-label-margin-block-start);
+
+    .input-textarea-label {
+      grid-area: underlined-textarea-stack;
+      z-index: 2;
+    }
+    .input-textarea-wrapper {
+      grid-area: underlined-textarea-stack;
+      z-index: 1;
+    }
+  }
+
+  .input-textarea-label {
+    display: inline-block;
+    color: var(--_label-textarea-color);
+    background-color: var(--_label-textarea-background-color);
+    margin-block: var(--_label-textarea-margin-block);
+    font-size: var(--_label-textarea-size);
+    font-weight: var(--_label-textarea-weight);
+    line-height: var(--_label-textarea-line-height);
+    translate: var(--_label-offset);
+    width: fit-content;
+    height: var(--_label-textarea-height);
+    transition: font-size 0.2s ease-in-out, translate 0.2s ease-in-out;
+
+    &:not(.normal) {
+      display: flex;
+      align-items: center;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,198 @@
+<template>
+  <div class="toggle-switch-core" :class="elementClasses" :data-size="size" :data-form-theme="formTheme">
+    <div @click="toggleSwitchValue" class="toggle-switch-wrapper" :class="[{ round }, { 'use-default-icons': useDefaultIcons }]" :for="inputId">
+      <input type="checkbox" v-model="modelValue" :true-value :false-value :aria-invalid="fieldHasError" :id="inputId" :aria-describedby="`${id}-description`" :name :required :checked="isChecked" />
+      <div class="symbol-wrapper" :class="[{ round }]">
+        <div class="symbol" :class="[{ round }]">
+          <div class="symbol-icon icon-on">
+            <slot name="iconOn">
+              <Icon name="material-symbols:circle-outline" class="icon" />
+            </slot>
+          </div>
+
+          <div class="symbol-icon icon-off">
+            <slot name="iconOff">
+              <Icon name="material-symbols:circle-outline" class="icon" />
+            </slot>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import propValidators from '../c12/prop-validators';
+
+const props = defineProps({
+  id: {
+    type: String,
+    required: true,
+  },
+  name: {
+    type: String,
+    required: true,
+  },
+  required: {
+    type: Boolean,
+    default: false,
+  },
+  fieldHasError: {
+    type: Boolean,
+    default: false,
+  },
+  trueValue: {
+    type: [String, Number, Boolean],
+    default: true,
+  },
+  falseValue: {
+    type: [String, Number, Boolean],
+    default: false,
+  },
+  styleClassPassthrough: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+  theme: {
+    type: String as PropType<string>,
+    default: 'primary',
+    validator(value: string) {
+      return propValidators.theme.includes(value);
+    },
+  },
+  round: {
+    type: Boolean,
+    default: true,
+  },
+  size: {
+    type: String as PropType<string>,
+    default: 'normal',
+    validator(value: string) {
+      return propValidators.size.includes(value);
+    },
+  },
+  ariaDescribedby: {
+    type: String,
+    default: null,
+  },
+});
+
+const slots = useSlots();
+const hasIconOnSlot = computed(() => slots.iconOn !== undefined);
+const hasIconOffSlot = computed(() => slots.iconOff !== undefined);
+const useDefaultIcons = computed(() => !hasIconOnSlot.value && !hasIconOffSlot.value);
+
+const formTheme = computed(() => {
+  return props.fieldHasError ? 'error' : props.theme;
+});
+
+const modelValue = defineModel();
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+const inputId = computed(() => `toggle-sitch-${props.id}`);
+
+const isChecked = computed(() => {
+  return modelValue.value === props.trueValue;
+});
+
+const toggleSwitchValue = () => {
+  modelValue.value = modelValue.value === props.trueValue ? props.falseValue : props.trueValue;
+  console.log(`toggleSwitchValue(${modelValue.value})`);
+};
+</script>
+
+<style lang="css">
+.toggle-switch-core {
+  .toggle-switch-label {
+    display: block;
+  }
+
+  .toggle-switch-wrapper {
+    --theme-form-toggle-border-color: var(--blue-12);
+    --theme-form-toggle-border-width: 0.1rem;
+    --theme-form-toggle-outline-color: var(--gray-2);
+    --theme-form-toggle-outline-width: 0.1rem;
+
+    --_transition-duration: 0.4s;
+    --_switch-padding: 0.2rem;
+    --_icon-color: inherit;
+    --_icon-on-opacity: 0;
+    --_icon-off-opacity: 1;
+    --_icon-font-size: 2.4rem;
+    --_symbol-size: 3.4rem;
+    --_symbol-background-color: var(--blue-12);
+    --_symbol-outline-color: transparent;
+    --_symbol-outline-width: 1px;
+    --_symbol-margin-inline-start: 0;
+    --_symbol-checked-offset: calc(var(--_symbol-size) * 0.75);
+
+    &.use-default-icons {
+      --_icon-color: transparent;
+    }
+
+    display: flex;
+    flex-direction: column;
+
+    input {
+      height: 0;
+      width: 0;
+      visibility: hidden;
+    }
+
+    &:has(input:checked) {
+      --_icon-on-opacity: 1;
+      --_icon-off-opacity: 0;
+      --_symbol-margin-inline-start: var(--_symbol-checked-offset);
+    }
+
+    .symbol-wrapper {
+      /* background: blue; */
+      border: var(--theme-form-toggle-border-width) solid var(--theme-form-toggle-border-color);
+      outline: var(--theme-form-toggle-outline-width) solid var(--theme-form-toggle-outline-color);
+      border-radius: calc(var(--_symbol-size) + calc(var(--theme-form-toggle-border-width) * 2) + calc(var(--_switch-padding) * 2));
+      display: inline-flex;
+      align-items: center;
+      justify-content: start;
+      width: calc(var(--_symbol-size) + var(--_symbol-checked-offset) + calc(var(--theme-form-toggle-border-width) * 2) + calc(var(--_switch-padding) * 2));
+      padding: var(--_switch-padding);
+
+      .symbol {
+        display: inline-grid;
+        grid-template-areas: 'icon';
+        place-content: center;
+
+        aspect-ratio: 1/1;
+        /* width: var(--_symbol-size); */
+        padding: calc(calc(var(--_symbol-size) - var(--_icon-font-size)) / 2);
+
+        outline: var(--_symbol-outline-width) solid var(--_symbol-outline-color);
+        border-radius: 50%;
+        margin-inline-start: var(--_symbol-margin-inline-start);
+
+        background-color: var(--_symbol-background-color);
+
+        overflow: clip;
+
+        transition: margin var(--_transition-duration);
+
+        .symbol-icon {
+          display: grid;
+          grid-area: icon;
+          place-content: center;
+
+          color: var(--_icon-color);
+          font-size: var(--_icon-font-size);
+          transition: opacity var(--_transition-duration);
+
+          &.icon-on {
+            opacity: var(--_icon-on-opacity);
+          }
+          &.icon-off {
+            opacity: var(--_icon-off-opacity);
+          }
+        }
+      }
+    }
+  }
+}
+</style>