@konoma-development/vue-components 0.1.0 → 0.1.2

package/.playground/app.vue

@@ -28,10 +28,10 @@
 </template>
 
 <script setup lang="ts">
-import KonomaTheme from '../components/KonomaTheme.vue';
 import KonomaButton from '../components/ui/KonomaButton.vue';
 import KonomaTabs from '../components/ui/KonomaTabs.vue';
 import KonomaTag from '../components/ui/KonomaTag.vue';
+import KonomaTheme from '../components/ui/KonomaTheme.vue';
 import unocss from '../unocss.config';
 
 const activeTab = ref(0);

package/components/defaults/radioButtonGroup.ts

@@ -2,7 +2,7 @@ import type { Classes } from '../../types/form';
 
 export const baseClasses: { [key in keyof Classes]?: string } = {
   classes: 'absolute left-[5px] top-[5px] h-1.5 w-1.5 rounded-full bg-white',
-  controlClasses: 'h-4 w-4 min-w-4 rounded-krc-radiobutton-group relative',
+  controlClasses: 'h-4 w-4 min-w-4 rounded-kvc-radioButtonGroup relative',
   wrapperClasses: 'flex flex-col gap-2',
   classesFilled: 'bg-primary-600',
   labelClasses: 'text-sm font-medium text-secondary-900',

package/components/defaults/select.ts

@@ -1,20 +1,18 @@
 import type { Classes } from '../../types/form';
 
 export const baseClasses: { [key in keyof Classes]: string } = {
-  classes: 'rounded-kvc-select h-10 py-0 border shadow-none',
-  errorClasses: 'text-sm text-error-500',
-  labelClasses: 'text-sm font-medium text-secondary-900',
-  labelWrapperClasses: 'group flex flex-col gap-1',
-  classesNeutral: 'border-secondary-300 group-hover:border-secondary-400',
-  classesError: 'ring-error-500 ring-2',
-  focusClasses: 'ring-2 ring-primary-900',
-  controlClasses: 'h-8 rounded-kvc-select py-0 text-secondary-900 text-sm border-none outline-hidden',
-  optionClasses: 'bg-white text-sm',
-  optionSelectedClasses: 'bg-primary-500 text-sm',
-  optionFocusedClasses: 'bg-primary-200 text-sm',
-  valueClasses: 'text-secondary-900 text-sm',
-  placeholderClasses: 'text-secondary-500 text-sm',
-  wrapperClasses: 'w-full h-auto',
-  indicatorClasses: 'text-secondary-500',
+  classes: 'rounded-kvc-select! h-10! py-0! border! border-secondary-400! shadow-none! text-sm!',
+  errorClasses: 'text-sm! text-error-500!',
+  labelClasses: 'text-sm! font-medium! text-secondary-900!',
+  labelWrapperClasses: 'group! flex! flex-col! gap-1!',
+  classesNeutral: 'border-secondary-300! group-hover:border-secondary-400!',
+  classesError: 'ring-error-500! ring-2!',
+  focusClasses: 'ring-2! ring-primary-900!',
+  controlClasses: 'h-8! rounded-kvc-select! py-0! text-secondary-900! text-sm! border-none! outline-hidden!',
+  optionClasses: 'bg-white! text-sm! hover:bg-primary-200! [&.selected]:bg-primary-500!',
+  valueClasses: 'text-secondary-900! text-sm!',
+  placeholderClasses: 'text-secondary-500! text-sm!',
+  wrapperClasses: 'w-full! h-auto!',
+  indicatorClasses: 'text-secondary-500!',
   valueContainerClasses: '',
 };

package/components/defaults/textarea.ts

@@ -1,7 +1,7 @@
 import type { Classes } from '../../types/form';
 
 export const baseClasses: { [key in keyof Classes]?: string } = {
-  classes: 'w-full bg-white text-sm cursor-text rounded-kvc-textarea p-4 text-secondary-900',
+  classes: 'w-full bg-base-100 text-sm cursor-text rounded-kvc-textarea p-4 text-secondary-900',
   classesNeutral: 'border border-secondary-300 has-focus:ring-2 hover:border-secondary-400 has-[:focus]:ring-primary-900',
   classesError: 'ring-error-500 ring-2',
   errorClasses: 'text-sm text-error-500',

package/components/form/KonomaForm.vue

@@ -4,9 +4,7 @@
   </form>
 </template>
 
-<script lang="ts" setup generic="DataType extends {
-  [key: string]: string | number | boolean | null
-}"
+<script lang="ts" setup generic="DataType"
 >
 import { formInjectionKeys } from './injectionKeys';
 
@@ -27,7 +25,7 @@ function validate() {
   let invalid = false;
   const newErrors: Record<keyof DataType, string[]> = {} as Record<keyof DataType, string[]>;
 
-  Object.entries(props.data).forEach(([name, value]) => {
+  Object.entries(props.data as Record<string, (string | number | boolean) | null>).forEach(([name, value]) => {
     if (!props.validators[name as keyof DataType]) {
       return;
     }

package/components/form/KonomaFormField.vue

@@ -1,14 +1,20 @@
 <template>
   <!-- TODO: The cast for errors[props.name] should not be neccessary -->
   <component
-    :is="component"
-    v-bind="$props"
+    :is="resolvedComponent"
+    v-bind="props"
     :error="errors && props.name ? errors[props.name as keyof typeof errors] : undefined"
-  />
+    v-on="emit"
+    @change="emit('change', $event)"
+  >
+    <template #label>
+      <slot name="label" />
+    </template>
+  </component>
 </template>
 
 <script lang="ts" setup generic="DataType extends FormDataType">
-import type { FormDataType, FormFieldProps } from '../../types/form';
+import type { FormDataType, FormFieldEmits, FormFieldProps } from '../../types/form';
 import type KonomaCheckbox from './KonomaCheckbox.vue';
 import type KonomaCheckboxList from './KonomaCheckboxList.vue';
 import type KonomaInput from './KonomaInput.vue';
@@ -21,6 +27,8 @@ import { formInjectionKeys } from './injectionKeys';
 
 const props = defineProps<FormFieldProps<DataType> & { component: keyof FormFieldComponents }>()
 
+const emit = defineEmits<FormFieldEmits>()
+
 interface FormFieldComponents {
   checkbox: typeof KonomaCheckbox
   checkboxList: typeof KonomaCheckboxList
@@ -32,5 +40,28 @@ interface FormFieldComponents {
   phoneInput: typeof KonomaPhoneInput
 };
 
+const resolvedComponent = computed(() => {
+  switch (props.component) {
+    case 'checkbox':
+      return 'KonomaCheckbox';
+    case 'checkboxList':
+      return 'KonomaCheckboxList';
+    case 'input':
+      return 'KonomaInput';
+    case 'radioButtonGroup':
+      return 'KonomaRadioButtonGroup';
+    case 'select':
+      return 'KonomaSelect';
+    case 'textarea':
+      return 'KonomaTextarea';
+    case 'tagList':
+      return 'KonomaTagList';
+    case 'phoneInput':
+      return 'KonomaPhoneInput';
+    default:
+      throw new Error(`Unsupported component type: ${props.component}`);
+  }
+})
+
 const errors = inject(formInjectionKeys<DataType>().errors)
 </script>

package/components/form/KonomaInput.vue

@@ -11,6 +11,8 @@
         v-else
         :class="combinedClasses"
         :placeholder="placeholder"
+        :type="type"
+        :data-testid="dataTestId"
         :value="value"
         :step="step"
         :name="name?.toString()"
@@ -63,6 +65,7 @@ const props = withDefaults(defineProps<FormFieldProps<DataType> & { class?: stri
   additionalClassesIconLeft: baseClasses.additionalClassesIconLeft,
   additionalClassesIconRight: baseClasses.additionalClassesIconRight,
   wrapperRightClasses: baseClasses.wrapperRightClasses,
+  type: 'text',
 })
 
 defineEmits<FormFieldEmits>()

package/components/form/KonomaSelect.vue

@@ -1,9 +1,93 @@
 <template>
-  <div />
+  <div :class="labelWrapperClasses">
+    <div :class="labelClasses">
+      <slot name="label" />
+    </div>
+    <ClientOnly>
+      <VueSelect
+        :options="typedOptions || []" :model-value="value" :classes="{
+          control: classesFull.join(' '),
+          // (state) => {
+          //   if (state.isFocused) {
+          //     return [...classesFull, focusClasses].join(' ');
+          //   }
+          //   return classesFull.join(' ');
+          // },
+          valueContainer: noValue && valueContainerClasses ? ['hidden', valueContainerClasses].join(' ') : noValue ? 'hidden' : valueContainerClasses || '',
+          // input: () => controlClasses || '',
+          // indicatorSeparator: () => 'hidden',
+          menuOption: optionClasses || '',
+          singleValue: valueClasses || '',
+          placeholder: placeholderClasses || '',
+          inputContainer: controlClasses || '',
+          searchInput: controlClasses || '',
+        }"
+        :placeholder="placeholder || 'Bitte auswählen'"
+        :is-searchable="searchable"
+        :is-clearable="isClearable"
+        :data-testid="dataTestId"
+        v-on="emit"
+        @option-selected="(option) => {
+          if (!option) {
+            // Needed to handle clearing the select
+            emit('change', false);
+            return;
+          }
+          if (isMulti) {
+            emit('change', option);
+            return;
+          }
+          else {
+            const properOption = option as OptionType;
+            const cleanOption = {
+              ...properOption,
+              value: properOption.value || CUSTOM_ENTRY_VALUE,
+              label: properOption.value ? properOption.label : ' ',
+            };
+            emit('change', cleanOption);
+          }
+        }"
+      />
+    </ClientOnly>
+    <template v-if="error && error.length > 0">
+      <span v-for="(e, i) in error" :key="i" :class="errorClasses">
+        {{ e }}
+      </span>
+    </template>
+  </div>
 </template>
 
 <script lang="ts" setup generic="DataType extends FormDataType">
-import type { FormDataType } from '../../types/form';
+import type { Option } from 'vue3-select-component';
+import type { FormDataType, FormFieldEmits, FormFieldProps, FormValue } from '../../types/form';
+import VueSelect from 'vue3-select-component';
+import { baseClasses } from '../defaults/select';
+import 'vue3-select-component/styles';
 
-// TODO: Find appropriate component
+const props = withDefaults(defineProps<FormFieldProps<DataType> & { class?: string }>(), {
+  classes: baseClasses.classes,
+  controlClasses: baseClasses.controlClasses,
+  optionClasses: baseClasses.optionClasses,
+  labelClasses: baseClasses.labelClasses,
+  classesFilled: baseClasses.classesFilled,
+  classesEmpty: baseClasses.classesEmpty,
+  wrapperClasses: baseClasses.wrapperClasses,
+  labelWrapperClasses: baseClasses.labelWrapperClasses,
+  errorClasses: baseClasses.errorClasses,
+})
+
+const emit = defineEmits<FormFieldEmits>()
+
+const CUSTOM_ENTRY_VALUE = 'CUSTOM_ENTRY_VALUE';
+
+type OptionType = Option<FormValue>
+
+const typedOptions = computed(() => {
+  if (!props.options) {
+    return [];
+  }
+  return props.options as OptionType[];
+})
+
+const classesFull = [baseClasses.classes, baseClasses.class];
 </script>

package/components/form/KonomaTagList.vue

@@ -14,7 +14,7 @@
       <KonomaTag
         :title="addTagTitle"
         icon-left-name="heroicons:plus-16-solid"
-        wrapper-classes="flex flex-row h-6 cursor-pointer items-center justify-center gap-1 rounded-krc-tag-list-add border border-secondary-300 px-3 py-1 bg-white"
+        wrapper-classes="flex flex-row h-6 cursor-pointer items-center justify-center gap-1 rounded-kvc-tag-list-add border border-secondary-300 px-3 py-1 bg-white"
         @click="$emit('change', '')"
       />
     </div>

package/components/form/KonomaTextarea.vue

@@ -4,19 +4,22 @@
       <span :class="labelClasses">
         <slot name="label" /><template v-if="required">*</template>
       </span>
-      <span v-if="maxLength" :class="hintClasses">{{ maxLengthLabel }}</span>
+      <span v-if="maxLength" :class="hintClasses">{{ maxLengthLabel || `Max. ${maxLength} Zeichen` }}</span>
     </div>
-    <div class="relative">
-      <!-- TODO: Resizable -->
+    <div
+      class="relative"
+    >
       <textarea
-        ref="textareaRef"
         :maxlength="maxLength"
         :value="text"
         :disabled="disabled"
         :name="name?.toString()"
         v-bind="$attrs"
-        :class="controlClasses"
-        @input="$event => $emit('change', ($event.target as HTMLTextAreaElement).value, $event)"
+        :class="combinedClasses"
+        :style="{
+          height: `${initialHeight}px`,
+        }"
+        @input="$event => emit('change', ($event.target as HTMLTextAreaElement).value, $event)"
         @focus="isFocused = true"
         @blur="isFocused = false"
       />
@@ -45,26 +48,25 @@ const props = withDefaults(defineProps<FormFieldProps<DataType>>(), {
   maxLength: 150,
 })
 
-defineEmits<FormFieldEmits>()
-// const height = ref(props.initialHeight)
+const emit = defineEmits<FormFieldEmits>()
+const initialHeight = ref(props.initialHeight)
 const isFocused = ref(false)
-const textareaRef = useTemplateRef('textareaRef')
 
-// const combinedClasses = computed(() => {
-//   const classesFull = [];
+const combinedClasses = computed(() => {
+  const classesFull = [];
 
-//   if (props.disabled) {
-//     classesFull.push(props.classesDisabled);
-//   } else {
-//     classesFull.push(props.classes);
-//   }
-//   if (props.error && props.error.length > 0) {
-//     classesFull.push(props.classesError);
-//   } else {
-//     classesFull.push(props.classesNeutral);
-//   }
-//   return classesFull;
-// })
+  if (props.disabled) {
+    classesFull.push(props.classesDisabled);
+  } else {
+    classesFull.push(props.classes);
+  }
+  if (props.error && props.error.length > 0) {
+    classesFull.push(props.classesError);
+  } else {
+    classesFull.push(props.classesNeutral);
+  }
+  return classesFull;
+})
 
 const text = computed(() => {
   let t = props.value?.toString() || '';

package/components/form/injectionKeys.ts

@@ -2,7 +2,7 @@ import type { InjectionKey } from 'vue';
 
 export function formInjectionKeys<DataType>() {
   return {
-    errors: Symbol('errors') as InjectionKey<Record<keyof DataType, string[]>>,
-    updateErrors: Symbol('updateErrors') as InjectionKey<(newErrors: Partial<Record<keyof DataType, string[]>>) => void>,
+    errors: Symbol.for('errors') as InjectionKey<Record<keyof DataType, string[]>>,
+    updateErrors: Symbol.for('updateErrors') as InjectionKey<(newErrors: Partial<Record<keyof DataType, string[]>>) => void>,
   }
 }

package/components/table/KonomaTableActions.vue

@@ -10,7 +10,7 @@
         </div>
       </div>
       <template #popper>
-        <div class="w-48 flex flex-col border border-secondary-200 rounded-md bg-white py-2 text-sm font-medium shadow-sm">
+        <div class="text-sm font-medium py-2 border border-secondary-200 rounded-md bg-white flex flex-col w-48 shadow-sm">
           <slot />
         </div>
       </template>

package/eslint.config.ts

@@ -1,7 +1,7 @@
 import antfu from '@antfu/eslint-config';
 import * as eslint from '@eslint/js';
 import * as globals from 'globals';
-import * as vueParser from 'vue-eslint-parser';
+import * as vueParser from 'vue-eslint-parser'
 import withNuxt from './.playground/.nuxt/eslint.config.mjs';
 
 export default withNuxt(
@@ -11,12 +11,9 @@ export default withNuxt(
     rules: {
       'style/semi': 'off',
       'style/brace-style': ['error', '1tbs'],
-      'vue/block-order': [
-        'error',
-        {
-          order: [['template', 'script'], 'style'],
-        },
-      ],
+      'vue/block-order': ['error', {
+        order: [['template', 'script'], 'style'],
+      }],
     },
   }),
   {
@@ -38,6 +35,6 @@ export default withNuxt(
       'vue/multi-word-component-names': 'off',
       'no-case-declarations': 'off',
     },
-    ignores: ['.nuxt/*'],
+    ignores: ['.nuxt/*', 'shared/openapi/*', 'node_modules/*'],
   },
 );

package/nuxt.config.ts

@@ -7,9 +7,15 @@ export default defineNuxtConfig({
   experimental: {
     asyncContext: true,
   },
-  components: {
-    dirs: ['components/ui', 'components/form', 'components/table'],
+  unocss: {
+    nuxtLayers: true,
   },
+  components: [
+    { path: 'components/ui', pathPrefix: false, global: true },
+    { path: 'components/form', pathPrefix: false, global: true },
+    { path: 'components/table', pathPrefix: false, global: true },
+    'components',
+  ],
   compatibilityDate: '2024-07-06',
   hooks: {},
   eslint: {

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "@konoma-development/vue-components",
-  "version": "0.1.0",
   "publishConfig": {
     "access": "public"
   },
+  "type": "module",
+  "version": "0.1.2",
   "packageManager": "yarn@4.12.0",
   "main": "./nuxt.config.ts",
   "scripts": {
@@ -21,7 +22,7 @@
     "@babel/eslint-parser": "7.28.6",
     "@babel/plugin-transform-typescript": "7.28.6",
     "@babel/preset-typescript": "7.28.5",
-    "@iconify-json/carbon": "1.2.18",
+    "@iconify-json/carbon": "1.2.19",
     "@nuxt/devtools": "3.2.2",
     "@nuxt/eslint": "1.15.2",
     "@nuxt/eslint-config": "1.15.2",
@@ -31,12 +32,12 @@
     "@nuxtjs/eslint-config-typescript": "12.1.0",
     "@pinia/nuxt": "0.11.3",
     "@sentry/nuxt": "10.40.0",
-    "@types/node": "22.19.12",
+    "@types/node": "22.19.13",
     "@typescript-eslint/eslint-plugin": "8.56.1",
     "@typescript-eslint/parser": "8.56.1",
-    "@unocss/eslint-config": "66.6.2",
+    "@unocss/eslint-config": "66.6.3",
     "@unocss/nuxt": "66.6.2",
-    "@unocss/reset": "66.6.2",
+    "@unocss/reset": "66.6.3",
     "@vitejs/plugin-vue": "6.0.4",
     "@vueuse/nuxt": "14.2.1",
     "babel-preset-vue": "2.0.2",
@@ -55,6 +56,7 @@
     "unocss-preset-scrollbar": "3.2.0",
     "vite": "7.3.1",
     "vue-eslint-parser": "10.4.0",
-    "vue-tsc": "3.2.5"
+    "vue-tsc": "3.2.5",
+    "vue3-select-component": "^0.16.0"
   }
 }

package/types/form.ts

@@ -8,7 +8,7 @@ export type FormValue = string | number | boolean | Option;
 
 export interface Option {
   value: FormValue
-  label: string | number
+  label: string
 }
 
 /** 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 */
@@ -90,6 +90,8 @@ export interface FormFieldProps<DataType extends {
 }> extends Classes {
   allowCustomValues?: boolean
   customValueLabel?: string
+  autoComplete?: string
+  dataTestId?: string
   arrangement?: 'horizontal' | 'vertical'
   centered?: boolean
   autoFocus?: boolean

package/unocss.config.ts

@@ -1,5 +1,4 @@
-import type { PresetWind3Theme } from 'unocss';
-import { defineConfig, presetWind3, transformerDirectives } from 'unocss';
+import { defineConfig, presetWind4, transformerDirectives } from 'unocss';
 import { presetScrollbar } from 'unocss-preset-scrollbar';
 
 type ColorValue = string | Colors;
@@ -15,43 +14,38 @@ export default defineConfig({
   rules: [],
   content: { pipeline: { include: [/\.(vue|svelte|[jt]sx|vine.ts|mdx?|astro|elm|php|phtml|html|ts)($|\?)/] } },
   presets: [
-    presetWind3(),
+    presetWind4(),
     presetScrollbar({
       // config
     }),
   ],
-  extendTheme: (theme: PresetWind3Theme) => {
-    if (!theme.borderRadius) {
-      theme.borderRadius = {};
-    }
-    theme.borderRadius['kvc-button'] = 'var(--kvc-button-borderRadius)'
-    theme.borderRadius['kvc-tag'] = 'var(--kvc-tag-borderRadius)'
-    theme.borderRadius['kvc-table'] = 'var(--kvc-table-borderRadius)'
-    theme.borderRadius['kvc-select'] = 'var(--kvc-select-borderRadius)'
-    theme.borderRadius['kvc-modal'] = 'var(--kvc-modal-borderRadius)'
-    theme.borderRadius['kvc-tagList'] = 'var(--kvc-tagList-borderRadius)'
-    theme.borderRadius['kvc-tagListAdd'] = 'var(--kvc-tagListAdd-borderRadius)'
-    theme.borderRadius['kvc-input'] = 'var(--kvc-input-borderRadius)'
-    theme.borderRadius['kvc-phoneInput'] = 'var(--kvc-phoneInput-borderRadius)'
-    theme.borderRadius['kvc-checkbox'] = 'var(--kvc-checkbox-borderRadius)'
-    theme.borderRadius['kvc-textarea'] = 'var(--kvc-textarea-borderRadius)'
-    theme.borderRadius['kvc-radioButtonGroup'] = 'var(--kvc-radioButtonGroup-borderRadius)'
-    theme.borderRadius['kvc-table'] = 'var(--kvc-table-borderRadius)'
-    theme.borderRadius['kvc-tableColumnChooser'] = 'var(--kvc-tableColumnChooser-borderRadius)'
-    theme.borderRadius['kvc-tableActions'] = 'var(--kvc-tableActions-borderRadius)'
-  },
   theme: {
+    radius: {
+      'kvc-button': 'var(--kvc-button-borderRadius)',
+      'kvc-tag': 'var(--kvc-tag-borderRadius)',
+      'kvc-table': 'var(--kvc-table-borderRadius)',
+      'kvc-select': 'var(--kvc-select-borderRadius)',
+      'kvc-modal': 'var(--kvc-modal-borderRadius)',
+      'kvc-tagList': 'var(--kvc-tagList-borderRadius)',
+      'kvc-tagListAdd': 'var(--kvc-tagListAdd-borderRadius)',
+      'kvc-input': 'var(--kvc-input-borderRadius)',
+      'kvc-phoneInput': 'var(--kvc-phoneInput-borderRadius)',
+      'kvc-checkbox': 'var(--kvc-checkbox-borderRadius)',
+      'kvc-textarea': 'var(--kvc-textarea-borderRadius)',
+      'kvc-radioButtonGroup': 'var(--kvc-radiobuttonGroup-borderRadius)',
+      'kvc-tableColumnChooser': 'var(--kvc-tableColumnChooser-borderRadius)',
+      'kvc-tableActions': 'var(--kvc-tableActions-borderRadius)',
+    },
     colors: {
-      'primary': buildHues('primary'),
-      'secondary': buildHues('secondary'),
-      'tertiary': buildHues('tertiary'),
-      'gray': buildHues('gray'),
-      'success': buildHues('success'),
-      'info': buildHues('info'),
-      'alert': buildHues('alert'),
-      'error': buildHues('error'),
-      'extra': buildHues('extra'),
-      'kvc-table-header': 'var(--kvc-table-header)',
+      primary: buildHues('primary'),
+      secondary: buildHues('secondary'),
+      tertiary: buildHues('tertiary'),
+      gray: buildHues('gray'),
+      success: buildHues('success'),
+      info: buildHues('info'),
+      alert: buildHues('alert'),
+      error: buildHues('error'),
+      extra: buildHues('extra'),
     },
   },
   transformers: [transformerDirectives()],