@konoma-development/vue-components 0.1.10 → 0.1.12

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/components/form/KonomaForm.vue

@@ -1,5 +1,5 @@
 <template>
-  <form @submit="submit">
+  <form ref="formRef" @submit="submit">
     <slot />
   </form>
 </template>
@@ -17,9 +17,15 @@ const emit = defineEmits<{
   (e: 'onSubmit'): void | Promise<void>
 }>()
 
+const formRef = useTemplateRef<HTMLFormElement>('formRef')
+
 const errors = ref<Partial<Record<keyof DataType, string[]>>>({})
 const submitAttempted = ref(false)
 
+defineExpose({
+  formRef,
+})
+
 function validate() {
   let invalid = false;
   const newErrors: Record<keyof DataType, string[]> = {} as Record<keyof DataType, string[]>;

package/components/form/KonomaFormField.vue

@@ -4,8 +4,14 @@
     :is="resolvedComponent"
     v-bind="props"
     :error="errors && props.name ? errors[props.name as keyof typeof errors] : undefined"
-    v-on="emit"
     @change="emit('change', $event)"
+    @icon-left-click="emit('iconLeftClick', $event)"
+    @icon-right-click="emit('iconRightClick', $event)"
+    @blur="emit('blur', $event)"
+    @focus="emit('focus', $event)"
+    @key-down="emit('keyDown', $event)"
+    @input="emit('input', $event)"
+    @click="emit('click', $event)"
   >
     <template #label>
       <slot name="label" />

package/components/form/KonomaInput.vue

@@ -32,7 +32,7 @@
         :name="iconLeftName"
         :path="iconLeftPath"
         :class="iconLeftClasses"
-        @click="$emit('iconLeftClick')"
+        @click="$emit('iconLeftClick', $event)"
       />
       <div v-if="iconRightPath || iconRightName || textRight" :class="wrapperRightClasses">
         <span v-if="textRight">{{ textRight }}</span>

package/components/ui/KonomaIcon.vue

@@ -1,17 +1,20 @@
 <template>
-  <svg v-if="path">
-    <use :href="path" />
-  </svg>
-  <Icon v-else-if="name" :name="name" />
+  <div class="flex flex-row items-center justify-center" @click="emit('click', $event)">
+    <svg v-if="path" :class="props.class">
+      <use :href="path" />
+    </svg>
+    <Icon v-else-if="name" :name="name" :class="props.class" />
+  </div>
 </template>
 
 <script lang="ts" setup>
-defineProps<{
+const props = defineProps<{
   name?: string
   path?: string
+  class?: string
 }>()
 
-defineEmits<{
+const emit = defineEmits<{
   (e: 'click', event: MouseEvent): void
 }>()
 </script>

package/package.json

@@ -4,11 +4,12 @@
     "access": "public"
   },
   "type": "module",
-  "version": "0.1.10",
+  "version": "0.1.12",
   "packageManager": "yarn@4.14.1",
   "main": "./nuxt.config.ts",
   "scripts": {
     "dev": "nuxi dev .playground",
+    "prepare": "nuxi prepare",
     "build": "nuxt build .playground",
     "generate": "nuxt generate .playground",
     "audit": "yarn npm audit --all --recursive --severity high",
@@ -28,7 +29,7 @@
     "@iconify-json/carbon": "1.2.20",
     "@nuxt/devtools": "3.2.4",
     "@nuxt/eslint": "1.15.2",
-    "@nuxt/icon": "2.2.1",
+    "@nuxt/icon": "2.2.2",
     "@nuxt/schema": "4.4.4",
     "@nuxt/test-utils": "4.0.3",
     "@pinia/nuxt": "0.11.3",
@@ -38,10 +39,10 @@
     "@unocss/nuxt": "66.6.8",
     "@unocss/reset": "66.6.8",
     "@vitejs/plugin-vue": "6.0.6",
-    "@vueuse/nuxt": "14.2.1",
+    "@vueuse/nuxt": "14.3.0",
     "babel-preset-vue": "2.0.2",
     "changelogen": "0.6.2",
-    "eslint": "10.2.1",
+    "eslint": "10.3.0",
     "floating-vue": "5.2.2",
     "nuxt": "4.4.4",
     "nuxt-headlessui": "1.2.2",
@@ -51,7 +52,7 @@
     "unocss": "66.6.8",
     "unocss-preset-scrollbar": "3.2.0",
     "vite": "8.0.10",
-    "vue-tsc": "3.2.7",
+    "vue-tsc": "3.2.8",
     "vue3-select-component": "0.16.2"
   }
 }

package/types/form.ts

@@ -1,5 +1,3 @@
-import type { ClassValue } from 'vue';
-
 type LabelPosition = 'top' | 'bottom' | 'left' | 'right';
 
 export interface FormDataType {
@@ -15,75 +13,74 @@ 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 {
-  (e: 'forgotPWAction', event: MouseEvent): void
   (e: 'blur', event: FocusEvent): void
   (e: 'focus', event: FocusEvent): void
   (e: 'change', value: FormValue | FormValue[], event?: Event): void
   (e: 'input', value: FormValue, event?: InputEvent): void
   (e: 'click', event: MouseEvent): void
   (e: 'iconRightClick', event: MouseEvent): void
-  (e: 'iconLeftClick'): void
+  (e: 'iconLeftClick', event: MouseEvent): void
   (e: 'keyDown', event: KeyboardEvent): void
 }