srcdev-nuxt-forms 2.1.12 → 2.1.14

package/components/forms/input-checkbox/variants/MultipleCheckboxes.vue

@@ -6,14 +6,45 @@
     </template>
     <div class="multiple-checkboxes-items" :class="[optionsLayout]">
       <template v-for="item in fieldData.data" :key="item.id">
-        <InputCheckboxWithLabel :id="`${name}-${item.value}`" :name :required :label="item.label" :fieldHasError v-model="modelValue" :true-value="item.value" :size :optionsLayout :theme>
+        <InputCheckboxRadioButton
+          v-if="isButton"
+          type="checkbox"
+          :id="`${name}-${item.value}`"
+          :name
+          :required
+          :label="item.label"
+          :fieldHasError
+          v-model="modelValue"
+          :true-value="item.value"
+          :size
+          :optionsLayout
+          :theme
+        >
           <template #checkedIcon>
             <slot name="checkedIcon"></slot>
           </template>
-        </InputCheckboxWithLabel>
+        </InputCheckboxRadioButton>
+        <InputCheckboxRadioWithLabel
+          v-else
+          type="checkbox"
+          :id="`${name}-${item.value}`"
+          :name
+          :required
+          :label="item.label"
+          :fieldHasError
+          v-model="modelValue"
+          :true-value="item.value"
+          :size
+          :optionsLayout
+          :theme
+        >
+          <template #checkedIcon>
+            <slot name="checkedIcon"></slot>
+          </template>
+        </InputCheckboxRadioWithLabel>
       </template>
     </div>
-    <InputError :errorMessage="errorMessage" :fieldHasError :id="name" :isDetached="true" />
+    <InputError :errorMessage="errorMessage" :showError="fieldHasError" :id="name" :isDetached="true" />
   </fieldset>
 </template>
 
@@ -21,9 +52,7 @@
 import propValidators from '../../c12/prop-validators';
 import type { IOptionsConfig, IFormMultipleOptions } from '@/types/types.forms';
 
-import type { C12nMultipleCheckboxes, IFormFieldC12, IFormData } from '@/types/types.forms';
-
-const { id, name, legend, label, required, fieldHasError, placeholder, errorMessage, size, optionsLayout, equalCols, styleClassPassthrough, theme } = defineProps({
+const { id, name, legend, label, required, fieldHasError, placeholder, isButton, errorMessage, size, optionsLayout, equalCols, styleClassPassthrough, theme } = defineProps({
   id: {
     type: String,
     required: true,
@@ -44,6 +73,10 @@ const { id, name, legend, label, required, fieldHasError, placeholder, errorMess
     type: String,
     default: '',
   },
+  isButton: {
+    type: Boolean,
+    default: false,
+  },
   errorMessage: {
     type: [Object, String],
     required: true,

package/components/forms/input-checkbox/variants/SingleCheckbox.vue

@@ -5,16 +5,16 @@
       <slot name="description"></slot>
     </template>
     <div class="single-checkbox-items" :class="[optionsLayout]">
-      <InputCheckboxWithLabel :id :name :required :label :fieldHasError v-model="modelValue" :trueValue :falseValue :size :theme>
+      <InputCheckboxRadioWithLabel type="checkbox" :id :name :required :label :fieldHasError v-model="modelValue" :trueValue :falseValue :size :theme>
         <template #checkedIcon>
           <slot name="checkedIcon"></slot>
         </template>
         <template v-if="hasLabelContent" #labelContent>
           <slot name="labelContent"></slot>
         </template>
-      </InputCheckboxWithLabel>
+      </InputCheckboxRadioWithLabel>
     </div>
-    <InputError :errorMessage :fieldHasError :id="name" :isDetached="true" :styleClassPassthrough="inputErrorStyles" />
+    <InputError :errorMessage :showError="fieldHasError" :id="name" :isDetached="true" :styleClassPassthrough="inputErrorStyles" />
   </fieldset>
 </template>
 

package/components/forms/input-checkbox-radio/InputCheckboxRadioButton.vue

@@ -0,0 +1,130 @@
+<template>
+  <div class="input-checkbox-radio-button-button" :data-form-theme="formTheme" :class="[elementClasses, optionsLayout, { error: fieldHasError }]">
+    <InputCheckboxRadioCore :isButton="true" :type :id :name :required v-model="modelValue" size="small" :trueValue :falseValue :fieldHasError :theme>
+      <template #checkedIcon>
+        <slot name="checkedIcon"></slot>
+      </template>
+    </InputCheckboxRadioCore>
+    <label v-if="hasLabelContent" class="input-checkbox-radio-button-label body-normal" :for="id">
+      <slot name="labelContent"></slot>
+    </label>
+    <label v-else class="input-checkbox-radio-button-label body-normal-semibold" :for="id">{{ label }}</label>
+  </div>
+</template>
+
+<script setup lang="ts">
+import propValidators from '../c12/prop-validators';
+
+const { type, id, name, label, required, fieldHasError, trueValue, falseValue, size, optionsLayout, styleClassPassthrough, theme } = defineProps({
+  type: {
+    type: String as PropType<'checkbox' | 'radio'>,
+    required: true,
+  },
+  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);
+    },
+  },
+  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();
+
+const formTheme = computed(() => {
+  return fieldHasError ? 'error' : theme;
+});
+</script>
+
+<style lang="css">
+.input-checkbox-radio-button-button {
+  --_checkbox-size: initial;
+  --_background-color: var(--theme-checkbox-radio-button-bg-default);
+  --_outline-width: var(--input-outline-width-thin);
+  --_border-color: var(--theme-checkbox-radio-button-border-default);
+  --_outline-color: var(--theme-checkbox-radio-button-outline-default);
+  --_label-color: var(--theme-checkbox-radio-button-label-default);
+  --_box-shadow: none;
+  --_white-space: wrap;
+
+  display: flex;
+  align-items: center;
+  gap: 4px;
+
+  background-color: var(--_background-color);
+  border-radius: 22px;
+  border: var(--theme-checkbox-radio-button-border-width) solid var(--_border-color);
+  outline: var(--theme-checkbox-radio-button-outline-width) solid var(--_outline-color);
+  box-shadow: var(--_box-shadow);
+  padding-inline: 12px;
+
+  &.inline {
+    --_white-space: nowrap;
+  }
+
+  .input-checkbox-radio-button-label {
+    display: flex;
+    color: var(--_label-color);
+    width: 100%;
+    height: 100%;
+    align-items: center;
+    margin-block: 8px;
+    padding-inline: 8px;
+    white-space: var(--_white-space);
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+}
+</style>

package/components/forms/{input-checkbox/InputCheckboxCore.vue → input-checkbox-radio/InputCheckboxRadioCore.vue}

@@ -1,18 +1,18 @@
 <template>
-  <div class="input-checkbox-wrapper" :data-form-theme="formTheme" :class="[size, { error: fieldHasError }]">
+  <div class="input-checkbox-radio-wrapper" :data-form-theme="formTheme" :class="[type, size, elementClasses, { error: fieldHasError }, { button: isButton }]">
     <slot name="checkedIcon" v-if="isChecked">
-      <Icon name="material-symbols:check-small" class="input-checked-icon" />
+      <Icon :name="defaultIcon" class="input-checked-icon" />
     </slot>
 
     <input
-      type="checkbox"
+      :type
       :true-value="trueValue"
       :false-value="falseValue"
       :id
       :name
       :required="required && !multipleOptions"
       :value="trueValue"
-      class="input-checkbox-core"
+      class="input-checkbox-radio-core"
       :class="[size, { error: fieldHasError }]"
       v-model="modelValue"
       ref="inputField"
@@ -22,7 +22,15 @@
 
 <script setup lang="ts">
 import propValidators from '../c12/prop-validators';
-const { id, name, required, trueValue, falseValue, multipleOptions, theme, styleClassPassthrough, size, fieldHasError } = defineProps({
+const { isButton, type, id, name, required, trueValue, falseValue, multipleOptions, theme, styleClassPassthrough, size, fieldHasError } = defineProps({
+  isButton: {
+    type: Boolean,
+    default: false,
+  },
+  type: {
+    type: String as PropType<'checkbox' | 'radio'>,
+    required: true,
+  },
   id: {
     type: String,
     required: true,
@@ -81,6 +89,10 @@ const modelValue = defineModel<any>();
 
 const inputField = ref<HTMLInputElement | null>(null);
 
+const defaultIcon = computed(() => {
+  return type === 'checkbox' ? 'material-symbols:check-small' : 'material-symbols:circle';
+});
+
 const isArray = Array.isArray(modelValue.value);
 
 const isChecked = computed(() => {
@@ -93,28 +105,48 @@ const isChecked = computed(() => {
 </script>
 
 <style lang="css">
-.input-checkbox-wrapper {
+.input-checkbox-radio-wrapper {
   --_checkbox-size: initial;
-  --_outline-width: var(--input-outline-width-thin);
-  --_border-width: var(--input-border-width-default);
-  --_border-color: var(--theme-form-checkbox-border);
-  --_outline-color: var(--theme-form-checkbox-outline);
+  --_outline-width: 1px;
+  --_border-width: 1px;
+  --_border-radius: 50%;
+  --_background-color: var(--theme-form-checkbox-bg);
   --_box-shadow: none;
 
+  &:not(.button) {
+    --_outline-width: var(--input-outline-width-thin);
+    --_border-width: var(--input-border-width-default);
+    &.checkbox {
+      --_background-color: var(--theme-form-checkbox-bg);
+      --_border-color: var(--theme-form-checkbox-border);
+      --_border-radius: 4px;
+      --_outline-color: var(--theme-form-checkbox-outline);
+    }
+
+    &.radio {
+      --_background-color: var(--theme-form-radio-bg);
+      --_border-color: var(--theme-form-radio-border);
+      --_border-radius: 50%;
+      --_outline-color: var(--theme-form-radio-outline);
+    }
+  }
+
   display: grid;
   grid-template-areas: 'element-stack';
   place-content: center;
 
-  background-color: var(--theme-form-checkbox-bg);
-  border-radius: 4px;
+  background-color: var(--_background-color);
   border: var(--_border-width) solid var(--_border-color);
+  border-radius: var(--_border-radius);
   outline: 1px solid var(--_outline-color);
   box-shadow: var(--_box-shadow);
 
   height: var(--_checkbox-size);
   width: var(--_checkbox-size);
 
-  &:has(.input-checkbox-core:focus-visible) {
+  transition: all 0.2s ease-in-out;
+
+  &:has(.input-checkbox-radio-core:focus-visible) {
     --_box-shadow: var(--theme-form-focus-box-shadow);
   }
 
@@ -143,7 +175,7 @@ const isChecked = computed(() => {
     box-shadow: var(--_box-shadow);
   }
 
-  .input-checkbox-core {
+  .input-checkbox-radio-core {
     grid-area: element-stack;
     appearance: none;
     margin: 0;

package/components/forms/{input-checkbox/InputCheckboxWithLabel.vue → input-checkbox-radio/InputCheckboxRadioWithLabel.vue}

@@ -1,21 +1,25 @@
 <template>
-  <div class="input-checkbox-with-label" :class="[elementClasses, optionsLayout, { error: fieldHasError }]">
-    <InputCheckboxCore :id :name :required v-model="modelValue" :size :trueValue :falseValue :fieldHasError :theme>
+  <div class="input-checkbox-radio-with-label" :class="[elementClasses, optionsLayout, { error: fieldHasError }]">
+    <InputCheckboxRadioCore :type :id :name :required v-model="modelValue" :size :trueValue :falseValue :fieldHasError :theme>
       <template #checkedIcon>
         <slot name="checkedIcon"></slot>
       </template>
-    </InputCheckboxCore>
-    <label v-if="hasLabelContent" class="input-checkbox-label body-normal" :for="id">
+    </InputCheckboxRadioCore>
+    <label v-if="hasLabelContent" class="input-checkbox-radio-label body-normal" :for="id">
       <slot name="labelContent"></slot>
     </label>
-    <label v-else class="input-checkbox-label body-normal-semibold" :for="id">{{ label }}</label>
+    <label v-else class="input-checkbox-radio-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, optionsLayout, styleClassPassthrough, theme } = defineProps({
+const { type, id, name, label, required, fieldHasError, trueValue, falseValue, size, optionsLayout, styleClassPassthrough, theme } = defineProps({
+  type: {
+    type: String as PropType<'checkbox' | 'radio'>,
+    required: true,
+  },
   id: {
     type: String,
     required: true,
@@ -79,7 +83,7 @@ const modelValue = defineModel();
 </script>
 
 <style lang="css">
-.input-checkbox-with-label {
+.input-checkbox-radio-with-label {
   --_white-space: wrap;
 
   display: flex;
@@ -89,7 +93,7 @@ const modelValue = defineModel();
     --_white-space: nowrap;
   }
 
-  .input-checkbox-label {
+  .input-checkbox-radio-label {
     display: flex;
     width: 100%;
     height: 100%;

package/components/forms/input-number/variants/InputNumberDefault.vue

@@ -37,7 +37,7 @@
         </InputButtonCore>
       </template>
     </InputNumberCore>
-    <InputError :errorMessage :fieldHasError :id :isDetached="true" />
+    <InputError :errorMessage :showError="fieldHasError" :id :isDetached="true" />
   </div>
 </template>
 

package/components/forms/input-radio/variants/MultipleRadiobuttons.vue

@@ -6,14 +6,45 @@
     </template>
     <div class="multiple-radiobuttons-items" :class="[optionsLayout]">
       <template v-for="item in fieldData.data" :key="item.id">
-        <InputRadiobuttonWithLabel :id="`${name}-${item.value}`" :name="`${name}-${item.name}`" :required :label="item.label" :fieldHasError v-model="modelValue" :true-value="item.value" :size :theme>
+        <InputCheckboxRadioButton
+          v-if="isButton"
+          type="radio"
+          :id="`${name}-${item.value}`"
+          :name="`${name}-${item.name}`"
+          :required
+          :label="item.label"
+          :fieldHasError
+          v-model="modelValue"
+          :true-value="item.value"
+          :size
+          :optionsLayout
+          :theme
+        >
           <template #checkedIcon>
             <slot name="checkedIcon"></slot>
           </template>
-        </InputRadiobuttonWithLabel>
+        </InputCheckboxRadioButton>
+        <InputCheckboxRadioWithLabel
+          v-else
+          type="radio"
+          :id="`${name}-${item.value}`"
+          :name="`${name}-${item.name}`"
+          :required
+          :label="item.label"
+          :fieldHasError
+          v-model="modelValue"
+          :true-value="item.value"
+          :size
+          :optionsLayout
+          :theme
+        >
+          <template #checkedIcon>
+            <slot name="checkedIcon"></slot>
+          </template>
+        </InputCheckboxRadioWithLabel>
       </template>
     </div>
-    <InputError :errorMessage="errorMessage" :fieldHasError :id="name" :isDetached="true" />
+    <InputError :errorMessage="errorMessage" :showError="fieldHasError" :id="name" :isDetached="true" />
   </fieldset>
 </template>
 
@@ -21,7 +52,7 @@
 import propValidators from '../../c12/prop-validators';
 import type { IFormMultipleOptions } from '@/types/types.forms';
 
-const { id, name, legend, label, required, fieldHasError, placeholder, errorMessage, size, optionsLayout, equalCols, styleClassPassthrough, theme } = defineProps({
+const { id, name, legend, label, required, fieldHasError, placeholder, isButton, errorMessage, size, optionsLayout, equalCols, styleClassPassthrough, theme } = defineProps({
   id: {
     type: String,
     required: true,
@@ -42,6 +73,10 @@ const { id, name, legend, label, required, fieldHasError, placeholder, errorMess
     type: String,
     default: '',
   },
+  isButton: {
+    type: Boolean,
+    default: false,
+  },
   errorMessage: {
     type: [Object, String],
     required: true,

package/components/forms/input-range/InputRangeCore.vue

@@ -140,6 +140,38 @@ const changeBackgroundColor = () => {
       margin: 0;
       width: 100%;
 
+      /*
+      &:hover {
+        cursor: -webkit-grab;
+        outline-color: red;
+      }
+      &:active {
+        cursor: -webkit-grabbing;
+        outline-color: blue;
+      }
+      &:focus-visible {
+        outline-offset: 0.25rem;
+        outline-color: transparent;
+      }
+      */
+
+      &::-webkit-slider-thumb {
+        /* appearance: none; */
+        /* -webkit-appearance: none; */
+        accent-color: blue;
+        color: blue;
+        background-color: 1px solid green;
+        outline: 1px solid blue;
+        border-radius: 50%;
+      }
+
+      &::-webkit-slider-runnable-track {
+        appearance: none;
+        -webkit-appearance: none;
+        /* background: hsl(10 80% 50% / 0.5); */
+        /* box-shadow: 1px 1px 1px #fff, 0px 0px 1px #fff; */
+      }
+
       /* For Chrome, Safari, Opera, and Edge */
       /* &::-webkit-slider-runnable-track {
         background: var(--theme-form-range-accent-color);

package/components/forms/input-range/variants/InputRangeDefault.vue

@@ -40,7 +40,7 @@
         </InputButtonCore>
       </template>
     </InputRangeCore>
-    <InputError :errorMessage :fieldHasError :id :isDetached="true" :styleClassPassthrough="['mbe-20']" />
+    <InputError :errorMessage :showError="fieldHasError" :id :isDetached="true" :styleClassPassthrough="['mbe-20']" />
   </div>
 </template>