@konoma-development/vue-components 0.1.5 → 0.1.7

package/components/form/KonomaCheckbox.vue

@@ -6,7 +6,7 @@
       :indeterminate="indeterminate"
       type="checkbox"
       :name="name?.toString()"
-      class="h-0 w-0 appearance-none"
+      class="appearance-none h-0 w-0"
       :checked="!!value"
       :disabled="disabled"
       v-bind="$attrs"
@@ -25,7 +25,7 @@
       type="checkbox"
       :name="name?.toString()"
       :checked="!!value"
-      class="h-0 w-0 appearance-none"
+      class="appearance-none h-0 w-0"
       :disabled="disabled"
       @change="$emit('change', ($event.target as HTMLInputElement).checked, $event)"
     >
@@ -39,7 +39,7 @@
       type="checkbox"
       :name="name?.toString()"
       :value="0"
-      class="h-0 w-0 appearance-none"
+      class="appearance-none h-0 w-0"
       :checked="!!value"
       :disabled="disabled"
       @change="$emit('change', ($event.target as HTMLInputElement).checked, $event)"

package/components/form/KonomaForm.vue

@@ -4,8 +4,7 @@
   </form>
 </template>
 
-<script lang="ts" setup generic="DataType"
->
+<script lang="ts" setup generic="DataType">
 import { formInjectionKeys } from './injectionKeys';
 
 const props = defineProps<{

package/components/form/KonomaInput.vue

@@ -18,7 +18,12 @@
         :name="name?.toString()"
         v-bind="$attrs"
         @input="(e) => $emit('change', (e.target as HTMLInputElement).value, e)"
-        @click="$emit('click', $event)"
+        @click="($event) => {
+          if ($event.isTrusted) {
+            ($event.target as HTMLInputElement).showPicker();
+          }
+          $emit('click', $event)
+        }"
         @blur="$emit('blur', $event)"
         @keydown="$emit('keyDown', $event)"
       >

package/components/form/KonomaSelect.vue

@@ -13,14 +13,14 @@
           //   }
           //   return classesFull.join(' ');
           // },
-          valueContainer: noValue && valueContainerClasses ? ['hidden', valueContainerClasses].join(' ') : noValue ? 'hidden' : valueContainerClasses || '',
+          valueContainer: noValue && valueContainerClasses?.toString() ? ['hidden', valueContainerClasses.toString()].join(' ') : noValue ? 'hidden' : valueContainerClasses?.toString() || '',
           // input: () => controlClasses || '',
           // indicatorSeparator: () => 'hidden',
-          menuOption: optionClasses || '',
-          singleValue: valueClasses || '',
-          placeholder: placeholderClasses || '',
-          inputContainer: controlClasses || '',
-          searchInput: controlClasses || '',
+          menuOption: optionClasses?.toString() || '',
+          singleValue: valueClasses?.toString() || '',
+          placeholder: placeholderClasses?.toString() || '',
+          inputContainer: controlClasses?.toString() || '',
+          searchInput: controlClasses?.toString() || '',
         }"
         :placeholder="placeholder || 'Bitte auswählen'"
         :is-searchable="searchable"

package/components/table/KonomaTable.vue

@@ -3,9 +3,9 @@
     <div :style="`gridTemplateRows: repeat(${data.length + 1}, auto)`" :class="[tableClasses, 'grid auto-rows-auto grid-flow-row'].join(' ')" @scroll="emit('onScroll', $event as UIEvent)">
       <!-- Header -->
       <div
-        :key="locale" class="sticky top-0 z-1 flex flex-row items-center justify-between rounded-t-kvc-table bg-kvc-table-header"
+        :key="locale" class="bg-kvc-table-header rounded-t-kvc-table flex flex-row items-center top-0 justify-between sticky z-1"
       >
-        <div v-if="currentColumnsLeft.length" class="sticky left-0 z-1 flex flex-row">
+        <div v-if="currentColumnsLeft.length" class="flex flex-row left-0 sticky z-1">
           <div
             v-for="column in currentColumnsLeft"
             :key="column.id"
@@ -24,7 +24,7 @@
               }
             }"
           >
-            <div class="w-full flex flex-row items-center justify-between gap-2">
+            <div class="flex flex-row gap-2 w-full items-center justify-between">
               <span>{{ column.title }}</span>
               <div v-if="column.sortKey">
                 <KonomaIcon
@@ -38,7 +38,7 @@
                 />
               </div>
             </div>
-            <div v-if="hasFilters" :key="Object.keys(filters).join('-')" class="min-h-10 w-full bg-kvc-table-header text-xs text-secondary-500 font-medium" @click.stop>
+            <div v-if="hasFilters" :key="Object.keys(filters).join('-')" class="bg-kvc-table-header text-xs text-secondary-500 font-medium min-h-10 w-full" @click.stop>
               <template v-if="column.filterable && column.filterKey">
                 <component :is="column.filterComponent?.(filters, updateFilters) || filterComponents?.[column.id]?.(filters, updateFilters)" v-if="column.filterComponent?.(filters, updateFilters) || filterComponents?.[column.id]?.(filters, updateFilters)" />
                 <KonomaInput
@@ -94,7 +94,7 @@
             }
           }"
         >
-          <div class="w-full flex flex-row items-center justify-between gap-2">
+          <div class="flex flex-row gap-2 w-full items-center justify-between">
             <span>{{ column.title }}</span>
             <div v-if="column.sortKey">
               <KonomaIcon
@@ -108,7 +108,7 @@
               />
             </div>
           </div>
-          <div v-if="hasFilters" :key="Object.keys(filters).join('-')" class="min-h-10 w-full bg-kvc-table-header text-xs text-secondary-500 font-medium" @click.stop>
+          <div v-if="hasFilters" :key="Object.keys(filters).join('-')" class="bg-kvc-table-header text-xs text-secondary-500 font-medium min-h-10 w-full" @click.stop>
             <template v-if="column.filterable && column.filterKey">
               <component :is="column.filterComponent?.(filters, updateFilters) || filterComponents?.[column.id]?.(filters, updateFilters)" v-if="column.filterComponent?.(filters, updateFilters) || filterComponents?.[column.id]?.(filters, updateFilters)" />
               <KonomaInput
@@ -146,10 +146,10 @@
             </template>
           </div>
         </div>
-        <div v-if="currentColumnsRight.length" class="sticky right-0 h-full flex flex-row items-center">
+        <div v-if="currentColumnsRight.length" class="flex flex-row h-full items-center right-0 sticky">
           <div
             v-for="column in currentColumnsRight"
-            :key="column.id" :style="`minWidth: ${column.initialWidth}; maxWidth: ${!column.grow ? column.initialWidth : undefined};`" class="h-full flex flex-row items-start justify-end truncate bg-kvc-table-header px-4 py-3 text-xs font-medium last:rounded-tr-kvc-table"
+            :key="column.id" :style="`minWidth: ${column.initialWidth}; maxWidth: ${!column.grow ? column.initialWidth : undefined};`" class="bg-kvc-table-header text-xs font-medium px-4 py-3 flex flex-row h-full truncate items-start justify-end last:rounded-tr-kvc-table"
           >
             {{ column.title }}
           </div>
@@ -160,7 +160,7 @@
       <div v-if="allowReorder" />
       <template v-else>
         <div v-for="entry, i in data" :key="i" :class="rowClasses" @click="emit('onRowClick', entry)" @dblclick="emit('onRowDoubleClick', entry)">
-          <div v-if="currentColumnsLeft.length" class="sticky left-0 flex flex-row border-r">
+          <div v-if="currentColumnsLeft.length" class="border-r flex flex-row left-0 sticky">
             <div
               v-for="column in currentColumnsRight"
               :key="column.id"
@@ -172,7 +172,7 @@
                 :is="cellRenderer?.[column.id]?.(entry)"
                 v-if="cellRenderer?.[column.id]?.(entry)"
               />
-              <div v-else class="h-14 truncate p-4 text-sm">
+              <div v-else class="text-sm p-4 h-14 truncate">
                 {{ (entry[column.id] as string) || '-' }}
               </div>
             </div>
@@ -188,11 +188,11 @@
               :is="cellRenderer?.[column.id]?.(entry)"
               v-if="cellRenderer?.[column.id]?.(entry)"
             />
-            <div v-else class="h-14 truncate p-4 text-sm">
+            <div v-else class="text-sm p-4 h-14 truncate">
               {{ (entry[column.id] as string) || '-' }}
             </div>
           </div>
-          <div v-if="currentColumnsRight.length" class="sticky right-0 flex flex-row border-l">
+          <div v-if="currentColumnsRight.length" class="border-l flex flex-row right-0 sticky">
             <div
               v-for="column in currentColumnsRight"
               :key="column.id"
@@ -204,7 +204,7 @@
                 :is="cellRenderer?.[column.id]?.(entry)"
                 v-if="cellRenderer?.[column.id]?.(entry)"
               />
-              <div v-else class="h-14 truncate p-4 text-sm">
+              <div v-else class="text-sm p-4 h-14 truncate">
                 {{ (entry[column.id] as string) || '-' }}
               </div>
             </div>
@@ -266,7 +266,7 @@ const props = withDefaults(defineProps<{
   filterComponents?: {
     [key in keyof DataType]?: (
       filters: Record<string, string[]>,
-      setFilters: (filters: Record<string, string[]>) => Promise<void>
+      setFilters: (filters: Record<string, string[]>) => Promise<void>,
     ) => string;
   }
   filters?: Record<string, string[]>

package/package.json

@@ -4,8 +4,8 @@
     "access": "public"
   },
   "type": "module",
-  "version": "0.1.5",
-  "packageManager": "yarn@4.12.0",
+  "version": "0.1.7",
+  "packageManager": "yarn@4.13.0",
   "main": "./nuxt.config.ts",
   "scripts": {
     "dev": "nuxi dev .playground",
@@ -21,45 +21,44 @@
     "vue3-select-component": "^0.16.0"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "7.6.1",
+    "@antfu/eslint-config": "7.7.3",
     "@babel/eslint-parser": "7.28.6",
     "@babel/plugin-transform-typescript": "7.28.6",
     "@babel/preset-typescript": "7.28.5",
     "@iconify-json/carbon": "1.2.19",
-    "@nuxt/devtools": "3.2.2",
+    "@nuxt/devtools": "3.2.4",
     "@nuxt/eslint": "1.15.2",
     "@nuxt/eslint-config": "1.15.2",
     "@nuxt/icon": "2.2.1",
-    "@nuxt/schema": "4.3.1",
+    "@nuxt/schema": "4.4.2",
     "@nuxt/test-utils": "4.0.0",
-    "@nuxtjs/eslint-config-typescript": "12.1.0",
     "@pinia/nuxt": "0.11.3",
-    "@sentry/nuxt": "10.40.0",
-    "@types/node": "22.19.13",
-    "@typescript-eslint/eslint-plugin": "8.56.1",
-    "@typescript-eslint/parser": "8.56.1",
-    "@unocss/eslint-config": "66.6.3",
-    "@unocss/nuxt": "66.6.2",
-    "@unocss/reset": "66.6.3",
-    "@vitejs/plugin-vue": "6.0.4",
+    "@sentry/nuxt": "10.45.0",
+    "@types/node": "22.19.15",
+    "@typescript-eslint/eslint-plugin": "8.57.2",
+    "@typescript-eslint/parser": "8.57.2",
+    "@unocss/eslint-config": "66.6.7",
+    "@unocss/nuxt": "66.6.7",
+    "@unocss/reset": "66.6.7",
+    "@vitejs/plugin-vue": "6.0.5",
     "@vueuse/nuxt": "14.2.1",
     "babel-preset-vue": "2.0.2",
     "changelogen": "0.6.2",
-    "eslint": "10.0.2",
+    "eslint": "10.1.0",
     "eslint-plugin-nuxt": "4.0.0",
     "eslint-plugin-unocss": "0.0.1-alpha.3",
     "eslint-plugin-vue": "10.8.0",
     "floating-vue": "5.2.2",
-    "nuxt": "4.3.1",
+    "nuxt": "4.4.2",
     "nuxt-headlessui": "1.2.2",
     "pinia": "3.0.4",
     "tslib": "2.8.1",
     "typescript": "5.9.3",
     "unocss": "66.6.2",
     "unocss-preset-scrollbar": "3.2.0",
-    "vite": "7.3.1",
+    "vite": "8.0.2",
     "vue-eslint-parser": "10.4.0",
-    "vue-tsc": "3.2.5",
+    "vue-tsc": "3.2.6",
     "vue3-select-component": "^0.16.0"
   }
 }

package/types/form.ts

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