srcdev-nuxt-forms 3.0.0 → 4.1.0

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

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

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

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

package/components/forms/ui/FormField.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="form-field" :class="[width, styleClassPassthrough, { 'has-gutter': hasGutter }, { error: fieldHasError }]">
+    <div class="form-field-inner">
+      <slot name="default"></slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  width: {
+    type: String as PropType<string>,
+    default: 'narrow',
+    validator: (val: string) => ['narrow', 'medium', 'wide'].includes(val),
+  },
+  fieldHasError: {
+    type: Boolean as PropType<boolean>,
+    default: false,
+  },
+  hasGutter: {
+    type: Boolean as PropType<boolean>,
+    default: true,
+  },
+  styleClassPassthrough: {
+    type: String,
+    default: '',
+  },
+});
+</script>
+
+<style lang="css">
+.form-field {
+  --_gutter-width: 0rem;
+  --_max-width: 400px;
+  --_background-color: transparent;
+  --_border-radius: 0.4rem;
+
+  background-color: var(--_background-color);
+  border-radius: var(--_border-radius);
+  margin-inline: auto;
+  margin-block: 1lh;
+
+  width: min(100% - calc(2 * var(--_gutter-width)), var(--_max-width));
+  outline: 0rem solid var(--gray-5);
+
+  &.error {
+    background-color: var(--theme-error-surface);
+  }
+
+  &:has(.underline) {
+    --_background-color: var(--theme-form-input-bg-underlined);
+  }
+
+  .form-field-inner {
+    background-color: var(--_background-color);
+    border-radius: var(--_border-radius);
+    margin-inline-start: 0rem;
+    padding-inline-start: 0rem;
+    outline: 0 solid var(--gray-5);
+  }
+
+  &.has-gutter {
+    --_gutter-width: 1.6rem;
+  }
+
+  &.narrow {
+    max-width: 400px;
+  }
+
+  &.medium {
+    --_max-width: 800px;
+  }
+
+  &.wide {
+    --_max-width: 1200px;
+  }
+}
+</style>

package/components/forms/ui/FormWrapper.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="form-wrapper" :class="width">
+    <slot name="default"></slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  width: {
+    type: String as PropType<string>,
+    default: 'narrow',
+    validator: (val: string) => ['narrow', 'medium', 'wide'].includes(val),
+  },
+});
+</script>
+
+<style lang="css">
+.form-wrapper {
+  outline: 0rem solid var(--gray-12);
+  padding-bottom: 2rem;
+  margin-trim: block;
+
+  &.narrow {
+    max-width: 400px;
+  }
+
+  &.medium {
+    max-width: 800px;
+  }
+
+  &.wide {
+    max-width: 1200px;
+  }
+}
+</style>