srcdev-nuxt-forms 0.1.0 → 1.0.0

package/components/forms/input-button/InputButtonCore.vue

@@ -1,11 +1,12 @@
 <template>
   <button
-    :type="type"
+    :type
     :readonly
     :aria-disabled="readonly"
     :data-test-id="dataTestId"
-    class="btn"
-    :class="[`btn-${type}`, `theme-${theme}`, size, effectClass, styleClassPassthrough, { 'icon-only': isIconOnly }]"
+    :data-btn-theme="theme"
+    class="input-button-core btn"
+    :class="[`btn-${type}`, size, effectClass, styleClassPassthrough, { 'icon-only': isIconOnly }]"
   >
     <span v-if="useEffect && effect == 'fancy'" class="fancy"></span>
     <template v-if="hasLeftContent && !isIconOnly">
@@ -54,9 +55,9 @@ const props = defineProps({
   },
   type: {
     type: String as PropType<'submit' | 'button' | 'reset'>,
-    default: 'submit',
+    default: 'button',
     validator(value: string) {
-      return ['button', 'cancel', 'reset', 'submit'].includes(value);
+      return propValidators.inputTypesButton.includes(value);
     },
   },
   buttonText: {
@@ -111,16 +112,16 @@ const isIconOnly = computed(() => slots.iconOnly !== undefined);
 .btn {
   --_padding-block: var(--theme-form-button-padding-block-normal);
   --_padding-inline: var(--theme-form-button-padding-inline-normal);
-  --_border-radius: 4px;
   --_icon-gap: var(--theme-form-button-icon-gap-normal);
+  --_border-width: var(--input-border-width-default);
+  --_outline-width: var(--input-outline-width-thin);
 
   align-items: center;
   display: flex;
   gap: var(--_icon-gap);
   justify-content: center;
   border: none;
-  border-radius: var(--_border-radius);
-
+  border-radius: var(--input-border-radius);
   font-family: var(--font-family);
 
   padding-inline: var(--_padding-inline);
@@ -128,11 +129,33 @@ const isIconOnly = computed(() => slots.iconOnly !== undefined);
 
   transition: all 0.2s ease-in-out;
 
-  &:hover,
-  &:focus-visible {
+  background-color: var(--theme-btn-bg);
+  border: var(--_border-width) solid var(--theme-btn-border);
+  color: var(--theme-btn-text);
+  outline: 1px solid var(--theme-btn-outline);
+
+  /*
+  * States
+  **/
+  &:hover {
+    --theme-btn-bg: var(--theme-btn-bg-hover);
+    --theme-btn-border: var(--theme-btn-border-hover);
+    --theme-btn-text: var(--theme-btn-text-hover);
+    --theme-btn-outline: var(--theme-btn-outline-hover);
+  }
+
+  &:hover {
     cursor: pointer;
   }
 
+  &:focus-visible {
+    --theme-btn-bg: var(--theme-btn-bg-focus);
+    --theme-btn-border: var(--theme-btn-border-focus);
+    --theme-btn-text: var(--theme-btn-text-focus);
+    --theme-btn-outline: var(--theme-btn-outline-focus);
+    box-shadow: var(--theme-form-focus-box-shadow);
+  }
+
   &[readonly] {
     opacity: 0.5;
     &:hover,
@@ -264,104 +287,5 @@ const isIconOnly = computed(() => slots.iconOnly !== undefined);
       }
     }
   }
-
-  --_border-width: var(--input-border-width-default);
-
-  /*
-  * Initial theme (primary)
-  **/
-  --_theme-form-border: var(--theme-form-primary-border);
-  --_theme-form-border-hover: var(--theme-form-primary-border-hover);
-  --_theme-form-outline: var(--theme-form-primary-outline);
-  --_theme-form-outline-hover: var(--theme-form-primary-outline-hover);
-  --_theme-form-bg: var(--theme-form-primary-bg);
-  --_theme-form-bg-hover: var(--theme-form-primary-bg-hover);
-  --_theme-form-color: var(--theme-form-primary-color);
-  --_theme-form-color-hover: var(--theme-form-primary-color-hover);
-
-  background-color: var(--_theme-form-bg);
-  border: var(--_border-width) solid var(--_theme-form-border);
-  color: var(--_theme-form-color);
-  outline: 1px solid var(--_theme-form-outline);
-
-  /*
-  * Themes (alternate)
-  **/
-  &.theme-secondary {
-    --_theme-form-border: var(--theme-form-secondary-border);
-    --_theme-form-border-hover: var(--theme-form-secondary-border-hover);
-    --_theme-form-outline: var(--theme-form-secondary-outline);
-    --_theme-form-outline-hover: var(--theme-form-secondary-outline-hover);
-    --_theme-form-bg: var(--theme-form-secondary-bg);
-    --_theme-form-bg-hover: var(--theme-form-secondary-bg-hover);
-    --_theme-form-color: var(--theme-form-secondary-color);
-    --_theme-form-color-hover: var(--theme-form-secondary-color-hover);
-  }
-
-  &.theme-tertiary {
-    --_theme-form-border: var(--theme-form-tertiary-border);
-    --_theme-form-border-hover: var(--theme-form-tertiary-border-hover);
-    --_theme-form-outline: var(--theme-form-tertiary-outline);
-    --_theme-form-outline-hover: var(--theme-form-tertiary-outline-hover);
-    --_theme-form-bg: var(--theme-form-tertiary-bg);
-    --_theme-form-bg-hover: var(--theme-form-tertiary-bg-hover);
-    --_theme-form-color: var(--theme-form-tertiary-color);
-    --_theme-form-color-hover: var(--theme-form-tertiary-color-hover);
-  }
-
-  &.theme-warning {
-    --_theme-form-border: var(--theme-form-warning-border);
-    --_theme-form-border-hover: var(--theme-form-warning-border-hover);
-    --_theme-form-outline: var(--theme-form-warning-outline);
-    --_theme-form-outline-hover: var(--theme-form-warning-outline-hover);
-    --_theme-form-bg: var(--theme-form-warning-bg);
-    --_theme-form-bg-hover: var(--theme-form-warning-bg-hover);
-    --_theme-form-color: var(--theme-form-warning-color);
-    --_theme-form-color-hover: var(--theme-form-warning-color-hover);
-  }
-
-  &.theme-error {
-    --_theme-form-border: var(--theme-form-error-border);
-    --_theme-form-border-hover: var(--theme-form-error-border-hover);
-    --_theme-form-outline: var(--theme-form-error-outline);
-    --_theme-form-outline-hover: var(--theme-form-error-outline-hover);
-    --_theme-form-bg: var(--theme-form-error-bg);
-    --_theme-form-bg-hover: var(--theme-form-error-bg-hover);
-    --_theme-form-color: var(--theme-form-error-color);
-    --_theme-form-color-hover: var(--theme-form-error-color-hover);
-  }
-
-  &.theme-success {
-    --_theme-form-border: var(--theme-form-success-border);
-    --_theme-form-border-hover: var(--theme-form-success-border-hover);
-    --_theme-form-outline: var(--theme-form-success-outline);
-    --_theme-form-outline-hover: var(--theme-form-success-outline-hover);
-    --_theme-form-bg: var(--theme-form-success-bg);
-    --_theme-form-bg-hover: var(--theme-form-success-bg-hover);
-    --_theme-form-color: var(--theme-form-success-color);
-    --_theme-form-color-hover: var(--theme-form-success-color-hover);
-  }
-
-  &.theme-ghost {
-    --_theme-form-border: var(--theme-form-ghost-border);
-    --_theme-form-border-hover: var(--theme-form-ghost-border-hover);
-    --_theme-form-outline: var(--theme-form-ghost-outline);
-    --_theme-form-outline-hover: var(--theme-form-ghost-outline-hover);
-    --_theme-form-bg: var(--theme-form-ghost-bg);
-    --_theme-form-bg-hover: var(--theme-form-ghost-bg-hover);
-    --_theme-form-color: var(--theme-form-ghost-color);
-    --_theme-form-color-hover: var(--theme-form-ghost-color-hover);
-  }
-
-  /*
-  * States
-  **/
-  &:hover,
-  &:focus-visible {
-    --_theme-form-color: var(--_theme-form-color-hover);
-    --_theme-form-bg: var(--_theme-form-bg-hover);
-    --_theme-form-border: var(--_theme-form-border-hover);
-    --_theme-form-outline: var(--_theme-form-outline-hover);
-  }
 }
 </style>

package/components/forms/input-button/variants/InputButtonConfirm.vue

@@ -1,6 +1,6 @@
 <template>
   <InputButtonCore
-    type="submit"
+    type="button"
     :use-effect="useEffect"
     :isPending="isPending"
     :readonly

package/components/forms/input-button/variants/InputButtonSubmit.vue

@@ -1,6 +1,6 @@
 <template>
   <InputButtonCore
-    type="submit"
+    type="button"
     :use-effect="useEffect"
     :isPending="isPending"
     :readonly

package/components/forms/input-checkbox/InputCheckboxCore.vue

@@ -0,0 +1,263 @@
+<template>
+  <div class="input-checkbox-wrapper" :data-form-theme="formTheme" :class="[size, checkboxAppearance, { error: fieldHasError }]">
+    <input
+      type="checkbox"
+      :true-value="trueValue"
+      :false-value="falseValue"
+      :id
+      :name
+      :required="required && !multipleOptions"
+      :value="trueValue"
+      :class="['input-checkbox-core', size, checkboxAppearance, { error: fieldHasError }]"
+      v-model="modelValue"
+      ref="inputField"
+    />
+    <div v-if="checkboxAppearance === 'with-decorator'" :class="['input-checkbox-decorator', size, checkboxStyle]">
+      <Icon name="material-symbols:check" class="icon-check" :class="[{ checked: isChecked }]" />
+      <div v-if="checkboxStyle === 'check' || checkboxStyle === 'cross'" :class="[checkboxStyle, { checked: isChecked }]"></div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import propValidators from '../c12/prop-validators';
+const { id, name, required, trueValue, falseValue, multipleOptions, theme, styleClassPassthrough, size, checkboxAppearance, checkboxStyle, fieldHasError } = defineProps({
+  id: {
+    type: String,
+    required: true,
+  },
+  name: {
+    type: String,
+    required: true,
+  },
+  required: {
+    type: Boolean,
+    value: false,
+  },
+  trueValue: {
+    type: [String, Number, Boolean],
+    default: true,
+  },
+  falseValue: {
+    type: [String, Number, Boolean],
+    default: false,
+  },
+  multipleOptions: {
+    type: Boolean,
+    default: false,
+  },
+  theme: {
+    type: String as PropType<string>,
+    default: 'primary',
+    validator(value: string) {
+      return propValidators.theme.includes(value);
+    },
+  },
+  size: {
+    type: String as PropType<string>,
+    default: 'medium',
+    validator(value: string) {
+      return propValidators.size.includes(value);
+    },
+  },
+  checkboxAppearance: {
+    type: String as PropType<string>,
+    default: null,
+    validator(value: string) {
+      return propValidators.checkboxAppearance.includes(value);
+    },
+  },
+  checkboxStyle: {
+    type: String as PropType<string>,
+    default: 'check',
+    validator(value: string) {
+      return propValidators.checkboxStyle.includes(value);
+    },
+  },
+  fieldHasError: {
+    type: Boolean,
+    default: false,
+  },
+  styleClassPassthrough: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+});
+
+const { elementClasses, updateElementClasses } = useStyleClassPassthrough(styleClassPassthrough);
+
+const formTheme = computed(() => {
+  return fieldHasError ? 'error' : theme;
+});
+
+const modelValue = defineModel<any>();
+
+const inputField = ref<HTMLInputElement | null>(null);
+
+const isArray = Array.isArray(modelValue.value);
+
+const isChecked = computed(() => {
+  if (isArray) {
+    return modelValue.value.indexOf(trueValue) > -1;
+  } else {
+    return modelValue.value === trueValue;
+  }
+});
+</script>
+
+<style scoped lang="css">
+.input-checkbox-wrapper {
+  --_checkbox-size: initial;
+  --_checkbox-border-radius: 4px;
+  --_outline-width: var(--input-outline-width-thin);
+  --_border-width: var(--input-border-width-thin); /* --input-border-width-default / 2px */
+
+  display: grid;
+  grid-template-areas: 'element-stack';
+
+  &.with-decorator {
+    border-radius: var(--_checkbox-border-radius);
+    border: var(--_border-width) solid var(--theme-form-input-border);
+    height: var(--_checkbox-size);
+    width: var(--_checkbox-size);
+
+    &:has(.input-checkbox-core:focus-visible) {
+      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);
+    }
+  }
+
+  /* Sizes */
+  &.x-small {
+    --_checkbox-size: 20px;
+  }
+  &.small {
+    --_checkbox-size: 24px;
+  }
+  &.normal {
+    --_checkbox-size: 30px;
+  }
+  &.medium {
+    --_checkbox-size: 40px;
+  }
+  &.large {
+    --_checkbox-size: 44px;
+  }
+
+  .input-checkbox-decorator {
+    display: grid;
+    grid-area: element-stack;
+    background-color: var(--theme-form-checkbox-bg);
+
+    height: var(--_checkbox-size);
+    width: var(--_checkbox-size);
+    place-content: center;
+    position: relative;
+    z-index: -1;
+
+    :not(&.check),
+    :not(&.cross) {
+      .icon-check {
+        display: none;
+      }
+    }
+
+    .check {
+      grid-area: stack;
+      width: calc(var(--_checkbox-size) * 0.2);
+      height: calc(var(--_checkbox-size) * 0.45);
+      border-bottom: 3px solid var(--theme-form-checkbox-symbol);
+      border-right: 3px solid var(--theme-form-checkbox-symbol);
+      transform: rotate(45deg) translate(-1px, -1px);
+      opacity: 0;
+      transition: opacity 0.2s ease-in-out;
+
+      &.checked {
+        opacity: 1;
+      }
+    }
+
+    .cross {
+      grid-area: stack;
+      width: calc(var(--_checkbox-size) * 0.65);
+      height: 3px;
+      background-color: var(--theme-form-checkbox-symbol);
+      transform: rotate(45deg);
+      opacity: 0;
+      transition: opacity 0.2s ease-in-out;
+
+      &.checked {
+        opacity: 1;
+
+        &::after {
+          opacity: 1;
+        }
+      }
+
+      &::after {
+        content: '';
+        grid-area: stack;
+        display: block;
+        width: calc(var(--_checkbox-size) * 0.65);
+        height: 3px;
+        background-color: var(--theme-form-checkbox-symbol);
+        transform: rotate(-90deg);
+        opacity: 0;
+        transition: opacity 0.2s ease-in-out;
+      }
+    }
+
+    .icon-check {
+      grid-area: stack;
+      display: block;
+      height: var(--_checkbox-size);
+      width: var(--_checkbox-size);
+      transform: translate(-3px, 0px);
+      zoom: 0.75;
+      margin: 0;
+      opacity: 0;
+      padding: 0;
+      transition: opacity 0.2s ease-in-out;
+
+      &.checked {
+        opacity: 1;
+      }
+    }
+  }
+
+  .input-checkbox-core {
+    grid-area: element-stack;
+    border: var(--_border-width) solid var(--theme-form-input-border);
+    height: var(--_checkbox-size);
+    width: var(--_checkbox-size);
+
+    transition: all 0.2s ease-in-out;
+
+    &.with-decorator {
+      appearance: none;
+      margin: 0;
+      overflow: hidden;
+      opacity: 0;
+    }
+
+    &:hover {
+      cursor: pointer;
+    }
+
+    &:focus-visible {
+      border: var(--_border-width) solid var(--theme-form-input-border);
+      outline: var(--_outline-width) solid hsl(from var(--theme-form-input-outline-focus) h s 50%);
+      box-shadow: var(--theme-form-focus-box-shadow);
+    }
+
+    &:checked::after {
+      /* content: '✔'; */
+      display: grid;
+      font-family: var(--font-family);
+      place-content: center;
+      font-size: calc(var(--_checkbox-size) * 0.75);
+    }
+  }
+}
+</style>

package/components/forms/input-checkbox/InputCheckboxWithLabel.vue

@@ -0,0 +1,116 @@
+<template>
+  <div class="input-checkbox-with-label" :class="[elementClasses, optionsLayout, { error: fieldHasError }]">
+    <InputCheckboxCore :id :name :required v-model="modelValue" :size :trueValue :falseValue :checkboxAppearance :checkboxStyle :fieldHasError :theme />
+    <label v-if="hasLabelContent" class="input-checkbox-label body-normal" :for="id">
+      <slot name="labelContent"></slot>
+    </label>
+    <label v-else class="input-checkbox-label body-normal-semibold" :for="id">{{ label }}</label>
+  </div>
+</template>
+
+<script setup lang="ts">
+import propValidators from '../c12/prop-validators';
+
+const { id, name, label, required, fieldHasError, trueValue, falseValue, size, checkboxAppearance, checkboxStyle, optionsLayout, styleClassPassthrough, theme } = defineProps({
+  id: {
+    type: String,
+    required: true,
+  },
+  name: {
+    type: String,
+    required: true,
+  },
+  label: {
+    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,
+  },
+  size: {
+    type: String as PropType<string>,
+    default: 'medium',
+    validator(value: string) {
+      return propValidators.size.includes(value);
+    },
+  },
+  checkboxAppearance: {
+    type: String as PropType<string>,
+    default: null,
+    validator(value: string) {
+      return propValidators.checkboxAppearance.includes(value);
+    },
+  },
+  checkboxStyle: {
+    type: String as PropType<string>,
+    default: 'check',
+    validator(value: string) {
+      return propValidators.checkboxStyle.includes(value);
+    },
+  },
+  optionsLayout: {
+    type: String as PropType<string>,
+    default: 'equal-widths',
+    validator(value: string) {
+      return propValidators.optionsLayout.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);
+    },
+  },
+});
+
+const slots = useSlots();
+const hasLabelContent = computed(() => slots.labelContent !== undefined);
+const { elementClasses, updateElementClasses } = useStyleClassPassthrough(styleClassPassthrough);
+
+const modelValue = defineModel();
+</script>
+
+<style lang="css">
+.input-checkbox-with-label {
+  --_white-space: wrap;
+
+  display: flex;
+  align-items: center;
+
+  &.inline {
+    --_white-space: nowrap;
+  }
+
+  .input-checkbox-label {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    align-items: center;
+    margin-block: 8px;
+    padding-inline: 8px;
+    white-space: var(--_white-space);
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+}
+</style>