@konoma-development/vue-components 0.1.11 → 0.1.13

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

@@ -12,7 +12,7 @@
         :class="combinedClasses"
         :placeholder="placeholder"
         :type="type"
-        :data-testid="dataTestId"
+        :data-test-id="dataTestId"
         :value="value"
         :step="step"
         :name="name?.toString()"
@@ -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/form/KonomaSelect.vue

@@ -25,7 +25,7 @@
         :placeholder="placeholder || 'Bitte auswählen'"
         :is-searchable="searchable"
         :is-clearable="isClearable"
-        :data-testid="dataTestId"
+        :data-test-id="dataTestId"
         v-on="emit"
         @option-selected="(option) => {
           if (!option) {

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.11",
+  "version": "0.1.13",
   "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/tsconfig.json

@@ -12,7 +12,7 @@
   "vueCompilerOptions": {
     "strictTemplates": true,
     "dataAttributes": [
-      "data-testid"
+      "data-test-id"
     ]
   }
 }

package/types/form.ts

@@ -74,14 +74,13 @@ export interface Classes {
 }
 
 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
 }