@konoma-development/vue-components 0.1.10 → 0.1.11

package/components/form/KonomaCheckboxList.vue

@@ -7,9 +7,7 @@
       <KonomaCheckbox
         v-for="(option, i) in options"
         :key="i"
-        :name="name?.toString()"
-        :error="error"
-        v-bind="{ ...$attrs, ...childClasses }"
+        v-bind="{ ...props, ...childClasses }"
         :value="values?.includes(option.value)"
         @change=" (_, e) => $emit('change', option.value, e)"
       >
@@ -32,7 +30,7 @@ import { positionClasses } from '../../types/form';
 import { baseClasses } from '../defaults/checkboxList';
 import KonomaCheckbox from './KonomaCheckbox.vue';
 
-withDefaults(defineProps<FormFieldProps<DataType>>(), {
+const props = withDefaults(defineProps<FormFieldProps<DataType>>(), {
   labelClasses: baseClasses.labelClasses,
   wrapperClasses: baseClasses.wrapperClasses,
   classes: baseClasses.classes,

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "type": "module",
-  "version": "0.1.10",
+  "version": "0.1.11",
   "packageManager": "yarn@4.14.1",
   "main": "./nuxt.config.ts",
   "scripts": {

package/types/form.ts

@@ -1,5 +1,3 @@
-import type { ClassValue } from 'vue';
-
 type LabelPosition = 'top' | 'bottom' | 'left' | 'right';
 
 export interface FormDataType {
@@ -15,64 +13,64 @@ export interface Option {
 
 /** Classes for the form components. Not all classes have effects in all components. Properties that start with 'class-' apply to the component in general, other properties apply to specific parts of the component */
 export interface Classes {
-  class?: ClassValue
+  class?: string
   /** Base classes, usually assigned to the control */
-  classes?: ClassValue
+  classes?: string
   /** Base classes, assigned directly to the control. Might be needed in case of more complex nesting */
-  controlClasses?: ClassValue
+  controlClasses?: string
   /** Used for components that have specific styling when in neutral state */
-  classesNeutral?: ClassValue
+  classesNeutral?: string
   /** Used for components that have specific styling when empty */
-  classesEmpty?: ClassValue
-  classesDisabled?: ClassValue
+  classesEmpty?: string
+  classesDisabled?: string
   /** Used for components that have specific styling when in error */
-  classesError?: ClassValue
+  classesError?: string
   /** Used for components that have specific styling when filled */
-  classesFilled?: ClassValue
+  classesFilled?: string
   /** Used for the label in components that have specific styling when empty */
-  labelClassesEmpty?: ClassValue
+  labelClassesEmpty?: string
   /** Used for the label in components that have specific styling when in error */
-  labelClassesError?: ClassValue
+  labelClassesError?: string
   /** Used for the label in components that have specific styling when filled */
-  labelClassesFilled?: ClassValue
+  labelClassesFilled?: string
   /** General classes for the label */
-  labelClasses?: ClassValue
+  labelClasses?: string
   /** Needed in case of nested label */
-  labelWrapperClasses?: ClassValue
+  labelWrapperClasses?: string
   /** Used for the icon in components that have specific styling when filled */
-  iconClassesFilled?: ClassValue
+  iconClassesFilled?: string
   /** General classes for the wrapper */
-  wrapperClasses?: ClassValue
+  wrapperClasses?: string
   /** General classes for the icon on the left */
-  iconLeftClasses?: ClassValue
+  iconLeftClasses?: string
   /** General classes for the icon on the right */
-  iconRightClasses?: ClassValue
+  iconRightClasses?: string
   /** General classes for the error message */
-  errorClasses?: ClassValue
+  errorClasses?: string
   /** Additional classes for the control when an icon is present on the left */
-  additionalClassesIconLeft?: ClassValue
+  additionalClassesIconLeft?: string
   /** Additional classes for the control when an icon is present on the right */
-  additionalClassesIconRight?: ClassValue
+  additionalClassesIconRight?: string
   /** General classes for hints placed within the component */
-  hintClasses?: ClassValue
+  hintClasses?: string
   /** General classes for the resize element */
-  resizeClasses?: ClassValue
+  resizeClasses?: string
   /** General classes for the icon within the resize element */
-  resizeIconClasses?: ClassValue
+  resizeIconClasses?: string
   /** Classes to be applied to all values for components with multiple possible values */
-  optionClasses?: ClassValue
+  optionClasses?: string
   /** Classes to be applied to the wrapper for elements on the left side */
-  wrapperLeftClasses?: ClassValue
+  wrapperLeftClasses?: string
   /** Classes to be applied to the wrapper for elements on the right side */
-  wrapperRightClasses?: ClassValue
+  wrapperRightClasses?: string
   // Properties for classes specific to the select component since it is effectively an Omnibox that is more complex than the other form components
-  focusClasses?: ClassValue
-  optionFocusedClasses?: ClassValue
-  optionSelectedClasses?: ClassValue
-  valueClasses?: ClassValue
-  placeholderClasses?: ClassValue
-  indicatorClasses?: ClassValue
-  valueContainerClasses?: ClassValue
+  focusClasses?: string
+  optionFocusedClasses?: string
+  optionSelectedClasses?: string
+  valueClasses?: string
+  placeholderClasses?: string
+  indicatorClasses?: string
+  valueContainerClasses?: string
 }
 
 export interface FormFieldEmits {