@konoma-development/vue-components 0.0.1

package/components/form/KonomaFormField.vue

@@ -0,0 +1,36 @@
+<template>
+  <!-- TODO: The cast for errors[props.name] should not be neccessary -->
+  <component
+    :is="component"
+    v-bind="$props"
+    :error="errors && props.name ? errors[props.name as keyof typeof errors] : undefined"
+  />
+</template>
+
+<script lang="ts" setup generic="DataType extends FormDataType">
+import type { FormDataType, FormFieldProps } from '../../types/form';
+import type KonomaCheckbox from './KonomaCheckbox.vue';
+import type KonomaCheckboxList from './KonomaCheckboxList.vue';
+import type KonomaInput from './KonomaInput.vue';
+import type KonomaPhoneInput from './KonomaPhoneInput.vue';
+import type KonomaRadioButtonGroup from './KonomaRadioButtonGroup.vue';
+import type KonomaSelect from './KonomaSelect.vue';
+import type KonomaTagList from './KonomaTagList.vue';
+import type KonomaTextarea from './KonomaTextarea.vue';
+import { formInjectionKeys } from './injectionKeys';
+
+const props = defineProps<FormFieldProps<DataType> & { component: keyof FormFieldComponents }>()
+
+interface FormFieldComponents {
+  checkbox: typeof KonomaCheckbox
+  checkboxList: typeof KonomaCheckboxList
+  input: typeof KonomaInput
+  radioButtonGroup: typeof KonomaRadioButtonGroup
+  select: typeof KonomaSelect
+  textarea: typeof KonomaTextarea
+  tagList: typeof KonomaTagList
+  phoneInput: typeof KonomaPhoneInput
+};
+
+const errors = inject(formInjectionKeys<DataType>().errors)
+</script>

package/components/form/KonomaInput.vue

@@ -0,0 +1,92 @@
+<template>
+  <label :class="wrapperClasses">
+    <span v-if="$slots.label" :class="labelClasses">
+      <slot name="label" /><template v-if="required">*</template>
+    </span>
+    <div class="relative">
+      <div v-if="mask">
+        <!-- TODO: masked input -->
+      </div>
+      <input
+        v-else
+        :class="combinedClasses"
+        :placeholder="placeholder"
+        :value="value"
+        :step="step"
+        :name="name?.toString()"
+        v-bind="$attrs"
+        @input="(e) => $emit('input', (e.target as HTMLInputElement).value, e)"
+        @click="$emit('click', $event)"
+        @blur="$emit('blur', $event)"
+        @keydown="$emit('keyDown', $event)"
+      >
+      <KonomaIcon
+        v-if="iconLeftPath || iconLeftName"
+        :name="iconLeftName"
+        :path="iconLeftPath"
+        :class="iconLeftClasses"
+        @click="$emit('iconLeftClick')"
+      />
+      <div v-if="iconRightPath || iconRightName || textRight" :class="wrapperRightClasses">
+        <span v-if="textRight">{{ textRight }}</span>
+        <KonomaIcon
+          v-if="iconRightPath || iconRightName"
+          :name="iconRightName"
+          :path="iconRightPath"
+          :class="iconRightClasses"
+          @click="$emit('iconRightClick', $event)"
+        />
+      </div>
+    </div>
+    <template v-if="error && error.length > 0">
+      <span v-for="(e, i) in error" :key="i" :class="errorClasses">
+        {{ e }}
+      </span>
+    </template>
+  </label>
+</template>
+
+<script lang="ts" setup generic="DataType extends FormDataType">
+import type { FormDataType, FormFieldEmits, FormFieldProps } from '../../types/form';
+import { baseClasses } from '../defaults/input';
+import KonomaIcon from '../ui/KonomaIcon.vue';
+
+const props = withDefaults(defineProps<FormFieldProps<DataType> & { class?: string }>(), {
+  classes: baseClasses.classes,
+  wrapperClasses: baseClasses.wrapperClasses,
+  labelClasses: baseClasses.labelClasses,
+  iconLeftClasses: baseClasses.iconLeftClasses,
+  iconRightClasses: baseClasses.iconRightClasses,
+  errorClasses: baseClasses.errorClasses,
+  classesError: baseClasses.classesError,
+  classesNeutral: baseClasses.classesNeutral,
+  additionalClassesIconLeft: baseClasses.additionalClassesIconLeft,
+  additionalClassesIconRight: baseClasses.additionalClassesIconRight,
+  wrapperRightClasses: baseClasses.wrapperRightClasses,
+})
+
+defineEmits<FormFieldEmits>()
+
+const combinedClasses = computed(() => {
+  const classesFull = [props.classes];
+  if (props.iconLeftPath || props.iconLeftName) {
+    classesFull.push(props.additionalClassesIconLeft);
+  }
+  if (props.iconRightPath || props.iconRightName || props.textRight) {
+    classesFull.push(props.additionalClassesIconRight);
+  }
+  if (props.centered) {
+    classesFull.push('text-center');
+  }
+  if (props.error && props.error.length > 0) {
+    classesFull.push(props.classesError);
+  } else {
+    classesFull.push(props.classesNeutral);
+  }
+  if (props.class) {
+    classesFull.push(props.class);
+  }
+
+  return classesFull;
+});
+</script>

package/components/form/KonomaPhoneInput.vue

@@ -0,0 +1,9 @@
+<template>
+  <div />
+</template>
+
+<script lang="ts" setup generic="DataType extends FormDataType">
+import type { FormDataType } from '../../types/form';
+
+// TODO: Old implementation needs select component and masked input component
+</script>

package/components/form/KonomaRadioButtonGroup.vue

@@ -0,0 +1,41 @@
+<template>
+  <div :class="wrapperClasses">
+    <span :class="labelClasses">
+      <slot name="label" /><template v-if="required">*</template>
+    </span>
+    <div :class="['flex gap-5', arrangement === 'vertical' ? 'flex-col' : 'flex-row'].join(' ')">
+      <label v-for="(option, i) in options" :key="i" :class="labelWrapperClasses">
+        <div :class="[controlClasses, value?.toString() === option.value.toString() ? classesFilled : classesEmpty].join(' ')">
+          <div :class="classes" />
+          <input class="appearance-none" type="radio" :name="name?.toString()" :value="option.value.toString()" :checked="value?.toString() === option.value.toString()" v-bind="$attrs" @change="$emit('change', option.value, $event)">
+        </div>
+        <span :class="optionClasses">{{ option.label }}</span>
+      </label>
+    </div>
+    <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, FormFieldEmits, FormFieldProps } from '../../types/form';
+import { baseClasses } from '../defaults/radioButtonGroup';
+
+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,
+  arrangement: 'horizontal',
+})
+
+defineEmits<FormFieldEmits>()
+</script>

package/components/form/KonomaSelect.vue

@@ -0,0 +1,9 @@
+<template>
+  <div />
+</template>
+
+<script lang="ts" setup generic="DataType extends FormDataType">
+import type { FormDataType } from '../../types/form';
+
+// TODO: Find appropriate component
+</script>

package/components/form/KonomaTagList.vue

@@ -0,0 +1,55 @@
+<template>
+  <label :class="wrapperClasses">
+    <span :class="labelClasses">
+      <slot name="label" /><template v-if="required">*</template>
+    </span>
+    <div :class="combinedClasses">
+      <KonomaTag
+        v-for="(value, i) in values"
+        :key="i"
+        :title="value.toString()"
+        icon-right-name="heroicons:x-mark-16-solid"
+        @click="$emit('change', value)"
+      />
+      <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"
+        @click="$emit('change', '')"
+      />
+    </div>
+    <template v-if="error && error.length > 0">
+      <span v-for="(e, i) in error" :key="i" :class="errorClasses">
+        {{ e }}
+      </span>
+    </template>
+  </label>
+</template>
+
+<script lang="ts" setup generic="DataType extends FormDataType">
+import type { FormDataType, FormFieldEmits, FormFieldProps } from '../../types/form';
+import { baseClasses } from '../defaults/tagList';
+import KonomaTag from '../ui/KonomaTag.vue';
+
+const props = withDefaults(defineProps<FormFieldProps<DataType>>(), {
+  wrapperClasses: baseClasses.wrapperClasses,
+  labelClasses: baseClasses.labelClasses,
+  errorClasses: baseClasses.errorClasses,
+  classesError: baseClasses.classesError,
+  classesNeutral: baseClasses.classesNeutral,
+  addTagTitle: '',
+})
+
+defineEmits<FormFieldEmits>()
+
+const combinedClasses = computed(() => {
+  const classesFull = [props.classes];
+  if (props.error && props.error.length > 0) {
+    classesFull.push(props.classesError);
+  } else {
+    classesFull.push(props.classesNeutral);
+  }
+  classesFull.push(props.class);
+  return classesFull;
+})
+</script>

package/components/form/KonomaTextarea.vue

@@ -0,0 +1,81 @@
+<template>
+  <label :class="wrapperClasses">
+    <div :class="labelWrapperClasses">
+      <span :class="labelClasses">
+        <slot name="label" /><template v-if="required">*</template>
+      </span>
+      <span v-if="maxLength" :class="hintClasses">{{ maxLengthLabel }}</span>
+    </div>
+    <div class="relative">
+      <!-- TODO: Resizable -->
+      <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)"
+        @focus="isFocused = true"
+        @blur="isFocused = false"
+      />
+    </div>
+  </label>
+</template>
+
+<script lang="ts" setup generic="DataType extends FormDataType">
+import type { FormDataType, FormFieldEmits, FormFieldProps } from '../../types/form';
+import { baseClasses } from '../defaults/textarea';
+
+const props = withDefaults(defineProps<FormFieldProps<DataType>>(), {
+  classes: baseClasses.classes,
+  classesNeutral: baseClasses.classesNeutral,
+  classesError: baseClasses.classesError,
+  errorClasses: baseClasses.errorClasses,
+  labelClasses: baseClasses.labelClasses,
+  hintClasses: baseClasses.hintClasses,
+  wrapperClasses: baseClasses.wrapperClasses,
+  resizeClasses: baseClasses.resizeClasses,
+  resizeIconClasses: baseClasses.resizeIconClasses,
+  controlClasses: baseClasses.controlClasses,
+  labelWrapperClasses: baseClasses.labelWrapperClasses,
+  classesDisabled: baseClasses.classesDisabled,
+  initialHeight: 100,
+  maxLength: 150,
+})
+
+defineEmits<FormFieldEmits>()
+// const height = ref(props.initialHeight)
+const isFocused = ref(false)
+const textareaRef = useTemplateRef('textareaRef')
+
+// 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;
+// })
+
+const text = computed(() => {
+  let t = props.value?.toString() || '';
+  if (!isFocused.value) {
+    if (!props.replacements) {
+      return t;
+    }
+    Object.entries(props.replacements).forEach(([key, value]) => {
+      t = t.replace(new RegExp(`{${key}}`, 'g'), value);
+    });
+  }
+  return t;
+})
+</script>

package/components/form/injectionKeys.ts

@@ -0,0 +1,8 @@
+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>,
+  }
+}

package/components/table/KonomaColumnChooser.vue

@@ -0,0 +1,64 @@
+<template>
+  <Dropdown>
+    <div :class="wrapperClasses">
+      <div :class="headerClasses">
+        {{ columnsLabel }}
+      </div>
+      <div :class="columnsWrapperClasses">
+        <KonomaColumnChooserEntry
+          v-for="col, i in columns.filter(col => col.title)"
+          :id="col.id"
+          :key="i"
+          :title="col.title?.toString() || ''"
+          :visible-columns="visibleColumns"
+          :entry-classes="entryClasses"
+          :visible-column-classes="visibleColumnClasses"
+          :hidden-column-classes="hiddenColumnClasses"
+          @update:columns="update"
+        />
+      </div>
+    </div>
+  </Dropdown>
+</template>
+
+<script lang="ts" setup generic="DataType">
+import type { TableColumn } from '../../types/table';
+import { Dropdown } from 'floating-vue';
+import { baseClasses } from '../defaults/columnChooser';
+import KonomaColumnChooserEntry from './KonomaColumnChooserEntry.vue';
+
+const props = withDefaults(defineProps<{
+  columns: TableColumn<DataType>[]
+  wrapperClasses?: string
+  headerClasses?: string
+  columnsWrapperClasses?: string
+  visibleColumnClasses?: string
+  hiddenColumnClasses?: string
+  entryClasses?: string
+  columnsLabel?: string
+}>(), {
+  wrapperClasses: baseClasses.wrapperClasses,
+  headerClasses: baseClasses.headerClasses,
+  columnsWrapperClasses: baseClasses.columnsWrapperClasses,
+  entryClasses: baseClasses.entryClasses,
+  visibleColumnClasses: baseClasses.visibleColumnClasses,
+  hiddenColumnClasses: baseClasses.hiddenColumnClasses,
+})
+
+const emit = defineEmits<{
+  (e: 'update:columns', column: TableColumn<DataType>): void
+  (e: 'getFloatingProps'): Record<string, unknown>
+}>()
+
+const visibleColumns = computed(() => {
+  return props.columns.filter(column => !column.hidden).map(column => column.id);
+});
+
+function update(id: keyof DataType) {
+  const columnToUpdate = props.columns.find(column => column.id === id);
+  if (!columnToUpdate) {
+    return;
+  }
+  emit('update:columns', { ...columnToUpdate, hidden: !columnToUpdate?.hidden });
+}
+</script>

package/components/table/KonomaColumnChooserEntry.vue

@@ -0,0 +1,18 @@
+<template>
+  <span :class="[entryClasses, visibleColumns.includes(id) ? visibleColumnClasses : hiddenColumnClasses].join(' ')" @click="$emit('update:columns', id)" />
+</template>
+
+<script lang="ts" setup generic="DataType">
+defineProps<{
+  title: string
+  id: keyof DataType
+  entryClasses: string
+  visibleColumnClasses: string
+  hiddenColumnClasses: string
+  visibleColumns: (keyof DataType)[]
+}>()
+
+defineEmits<{
+  (e: 'update:columns', id: keyof DataType): void
+}>()
+</script>

package/components/table/KonomaPagination.vue

@@ -0,0 +1,81 @@
+<template>
+  <div v-if="showButtons">
+    <div :class="resultsClasses">
+      <span :class="resultsTextClasses">
+        {{ xToY }}
+      </span>
+    </div>
+    <div v-if="totalPages > 1" :class="controlClasses">
+      <KonomaIcon :class="previousPageActive ? activeIconClasses : inactiveIconClasses" name="lucide:chevron-first" @click="previousPageActive ? emit('onFirstPage') : undefined" />
+      <KonomaIcon :class="previousPageActive ? activeIconClasses : inactiveIconClasses" name="lucide:chevron-left" @click="previousPageActive ? emit('onPreviousPage') : undefined" />
+      <div class="w-16">
+        <KonomaInput centered :value="pageInternal" @change="pageInternal = +$event" @key-down="onKeyDown($event)" />
+      </div>
+      <KonomaIcon :class="nextPageActive ? activeIconClasses : inactiveIconClasses" name="lucide:chevron-right" @click="nextPageActive ? emit('onNextPage') : undefined" />
+      <KonomaIcon :class="nextPageActive ? activeIconClasses : inactiveIconClasses" name="lucide:chevron-last" @click="nextPageActive ? emit('onLastPage') : undefined" />
+    </div>
+  </div>
+  <div v-else :class="wrapperClasses">
+    <div :class="resultsClasses">
+      <span :class="resultsTextClasses">
+        {{ xToY }}
+      </span>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { baseClasses } from '../defaults/pagination';
+import KonomaInput from '../form/KonomaInput.vue';
+import KonomaIcon from '../ui/KonomaIcon.vue';
+
+const props = withDefaults(defineProps<{
+  currentLoaded: number
+  currentStart: number
+  currentEnd: number
+  currentTotal: number
+  currentPage: number
+  totalPages: number
+  inactiveIconClasses?: string
+  activeIconClasses?: string
+  wrapperClasses?: string
+  resultsClasses?: string
+  resultsTextClasses?: string
+  controlClasses?: string
+  xToY: string
+  showButtons: boolean
+}>(), {
+  wrapperClasses: baseClasses.wrapperClasses,
+  resultsClasses: baseClasses.resultsClasses,
+  resultsTextClasses: baseClasses.resultsTextClasses,
+  activeIconClasses: baseClasses.activeIconClasses,
+  inactiveIconClasses: baseClasses.inactiveIconClasses,
+  controlClasses: baseClasses.controlClasses,
+})
+
+const emit = defineEmits<{
+  (e: 'onFirstPage'): void
+  (e: 'onPreviousPage'): void
+  (e: 'onNextPage'): void
+  (e: 'onLastPage'): void
+  (e: 'toPage', page: number): void
+}>()
+
+const previousPageActive = computed(() => {
+  return props.currentPage !== 1;
+});
+
+const nextPageActive = computed(() => {
+  return props.currentPage !== props.totalPages;
+});
+
+const pageInternal = ref(props.currentPage);
+
+function onKeyDown(event: KeyboardEvent) {
+  switch (event.key) {
+    case 'Enter':
+      emit('toPage', pageInternal.value);
+      break;
+  }
+}
+</script>