srcdev-nuxt-forms 2.4.23 → 3.0.0

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

@@ -1,267 +0,0 @@
-<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

@@ -1,216 +0,0 @@
-<template>
-  <div class="toggle-switch-core" :class="elementClasses" :data-size="size" :data-form-theme="formTheme">
-    <div @click="toggleSwitchValue" class="toggle-switch-input" :class="[{ round }]" :for="inputId">
-      <input type="checkbox" v-model="modelValue" :true-value :false-value :aria-invalid="fieldHasError" :id="inputId" :aria-describedby="`${id}-description`" :name :required />
-      <div class="symbol-wrapper" :class="[{ round }]">
-        <div class="symbol" :class="[{ round }]">
-          <div v-if="hasIconOnSlot" class="symbol-icon icon-on">
-            <slot name="iconOn"></slot>
-          </div>
-
-          <div v-if="hasIconOffSlot" class="symbol-icon icon-off">
-            <slot name="iconOff"></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 formTheme = computed(() => {
-  return props.fieldHasError ? 'error' : props.theme;
-});
-
-const modelValue = defineModel();
-const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
-
-const inputId = computed(() => `toggle-sitch-${props.id}`);
-
-const toggleSwitchValue = () => {
-  modelValue.value = modelValue.value === props.trueValue ? props.falseValue : props.trueValue;
-};
-</script>
-
-<style lang="css">
-.toggle-switch-core {
-  --_transition-duration: 0.4s;
-
-  .toggle-switch-label {
-    display: block;
-  }
-
-  .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;
-      width: 0;
-      height: 0;
-    }
-    input:checked {
-      --_icon-on-opacity: 1;
-      --_icon-off-opacity: 0;
-    }
-
-    .symbol-wrapper {
-      position: absolute;
-      cursor: pointer;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      overflow: clip;
-
-      .symbol {
-        display: grid;
-        grid-template-areas: 'icon-stack';
-        overflow: clip;
-        position: absolute;
-
-        .symbol-icon {
-          grid-area: icon-stack;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-        }
-      }
-    }
-  }
-}
-
-/*
-* ToggleSwitch configurable
-**/
-.toggle-switch-core {
-  .toggle-switch-input {
-    &.round {
-      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(--form-toggle-symbol-size);
-      }
-      .symbol {
-        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);
-        transition: var(--_transition-duration);
-
-        &.round {
-          border-radius: 50%;
-        }
-
-        .symbol-icon {
-          transition: var(--_transition-duration);
-
-          &.icon-on {
-            color: var(--theme-form-toggle-icon-stroke-colour-on);
-            opacity: 0;
-          }
-          &.icon-off {
-            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(--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(var(--_on-position));
-
-      .symbol-icon {
-        &.icon-on {
-          opacity: 1;
-        }
-        &.icon-off {
-          opacity: 0;
-        }
-      }
-    }
-  }
-}
-</style>

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

@@ -1,105 +0,0 @@
-<template>
-  <div class="toggle-switch-with-label" :class="[elementClasses]" :data-form-theme="formTheme">
-    <label class="toggle-switch-label input-text-label body-normal-bold" :for="`toggle-sitch-${id}`">{{ label }}</label>
-    <div v-if="hasDescriptionSlot" :id="`${id}-description`">
-      <slot name="description"></slot>
-    </div>
-    <ToggleSwitchCore v-model="modelValue" :id :name :required :field-has-error :true-value :false-value :theme :round :size :ariaDescribedby>
-      <template v-if="hasIconOnSlot" #iconOn>
-        <slot name="iconOn"></slot>
-      </template>
-
-      <template v-if="hasIconOffSlot" #iconOff>
-        <slot name="iconOff"></slot>
-      </template>
-    </ToggleSwitchCore>
-    <InputError :errorMessage :showError="fieldHasError" :id="errorId" :isDetached="true" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import propValidators from '../../c12/prop-validators';
-
-const props = defineProps({
-  name: {
-    type: String,
-    required: true,
-  },
-  label: {
-    type: String,
-    required: true,
-  },
-  required: {
-    type: Boolean,
-    default: false,
-  },
-  errorMessage: {
-    type: [Object, String],
-    default: '',
-    required: 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);
-    },
-  },
-});
-
-const slots = useSlots();
-const hasDescriptionSlot = computed(() => slots.description !== undefined);
-const hasIconOnSlot = computed(() => slots.iconOn !== undefined);
-const hasIconOffSlot = computed(() => slots.iconOff !== undefined);
-
-const formTheme = computed(() => {
-  return props.fieldHasError ? 'error' : props.theme;
-});
-
-const id = useId();
-const errorId = `${id}-error-message`;
-const ariaDescribedby = computed(() => {
-  const ariaDescribedbyId = hasDescriptionSlot.value ? `${id}-description` : undefined;
-  return props.fieldHasError ? errorId : ariaDescribedbyId;
-});
-
-const modelValue = defineModel();
-const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
-</script>
-
-<style lang="css">
-.toggle-switch-with-label {
-  --_transition-duration: 0.4s;
-
-  .toggle-switch-label {
-    display: block;
-  }
-}
-</style>

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

@@ -1,102 +0,0 @@
-<template>
-  <div class="toggle-switch-with-label-inline" :class="[elementClasses]" :data-form-theme="theme">
-    <label class="toggle-switch-label input-text-label" :class="labelWeightClass" :for="`toggle-sitch-${id}`">{{ label }}</label>
-    <ToggleSwitchCore v-model="modelValue" :id :name :true-value :false-value :theme :round :size>
-      <template v-if="hasIconOnSlot" #iconOn>
-        <slot name="iconOn"></slot>
-      </template>
-
-      <template v-if="hasIconOffSlot" #iconOff>
-        <slot name="iconOff"></slot>
-      </template>
-    </ToggleSwitchCore>
-  </div>
-</template>
-
-<script setup lang="ts">
-import propValidators from '../../c12/prop-validators';
-
-const props = defineProps({
-  name: {
-    type: String,
-    required: true,
-  },
-  label: {
-    type: String,
-    required: true,
-  },
-  labelWeight: {
-    type: String as PropType<string>,
-    default: 'semi-bold',
-    validator(value: string) {
-      return propValidators.labelWeight.includes(value);
-    },
-  },
-  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);
-    },
-  },
-});
-
-const slots = useSlots();
-const hasIconOnSlot = computed(() => slots.iconOn !== undefined);
-const hasIconOffSlot = computed(() => slots.iconOff !== undefined);
-
-const id = useId();
-
-const labelWeightClass = computed(() => {
-  switch (props.labelWeight) {
-    case 'bold':
-      return 'body-normal-bold';
-    case 'semi-bold':
-      return 'body-normal-semibold';
-    case 'normal':
-      return 'body-normal';
-    default:
-      return 'body-normal-semibold';
-  }
-});
-
-const modelValue = defineModel();
-const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
-</script>
-
-<style lang="css">
-.toggle-switch-with-label-inline {
-  --_transition-duration: 0.4s;
-  display: flex;
-  align-items: center;
-  gap: 12px;
-
-  .toggle-switch-label {
-    display: block;
-    white-space: nowrap;
-  }
-}
-</style>