@konoma-development/vue-components 0.0.1

package/.nuxtrc

@@ -0,0 +1 @@
+typescript.includeWorkspace=true

package/.playground/app.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="flex flex-col gap-2">
+    <KonomaTheme :unocss-config="unocss" />
+    <KonomaButton variant="primary" label="Change color" @click="switchColor" />
+    <KonomaTag title="Test Tag" />
+    <KonomaTabs
+      :active="activeTab"
+      :tabs="[
+        {
+          count: 5,
+          id: 0,
+          label: 'First',
+        },
+        {
+          count: 10,
+          id: 1,
+          label: 'Second',
+        },
+        {
+          count: 15,
+          id: 2,
+          label: 'Third',
+        },
+      ]"
+      @click="(tab) => activeTab = tab"
+    />
+  </div>
+</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 unocss from '../unocss.config';
+
+const activeTab = ref(0);
+
+function switchColor() {
+  console.warn('Color changed!');
+}
+</script>
+
+<style>
+:root {
+  --kvc-table-header-backgroundColor: rgb(228 229 226);
+  --kvc-table-borderRadius: 1rem;
+  --kvc-select-borderRadius: 1rem;
+  --kvc-button-borderRadius: 0.375rem;
+  --kvc-modal-borderRadius: 0.5rem;
+  --kvc-tag-borderRadius: ;
+  --kvc-tagList-borderRadius: ;
+  --kvc-tagListAdd-borderRadius: ;
+  --kvc-input-borderRadius: 0.375rem;
+  --kvc-phoneInput-borderRadius: 0.375rem;
+  --kvc-checkbox-borderRadius: ;
+  --kvc-textarea-borderRadius: 0.375rem;
+  --kvc-radiobuttonGroup-borderRadius: 100%;
+  --kvc-table-borderRadius: 0.5rem;
+  --kvc-tableColumnChooser-borderRadius: 0.375rem;
+  --kvc-tableActions-borderRadius: 0.375rem;
+  --kvc-table-header: rgb(228 229 226);
+}
+</style>

package/.playground/eslint.config.ts

@@ -0,0 +1,3 @@
+import rootEslintConfig from '../eslint.config'
+
+export default rootEslintConfig

package/.playground/nuxt.config.ts

@@ -0,0 +1,9 @@
+export default defineNuxtConfig({
+  extends: [['..', { install: true }]],
+  modules: ['@nuxt/eslint'],
+  eslint: {
+    config: {
+      standalone: false,
+    },
+  },
+});

package/.tool-versions

@@ -0,0 +1 @@
+nodejs 22.14.0

package/.vscode/extensions.json

@@ -0,0 +1,9 @@
+{
+  "recommendations": [
+    "vue.volar",
+    "dbaeumer.vscode-eslint",
+    "antfu.iconify",
+    "antfu.unocss",
+    "nuxtr.nuxtr-vscode"
+  ]
+}

package/.vscode/settings.json

@@ -0,0 +1,12 @@
+{
+  "editor.formatOnSave": false,
+  "editor.codeActionsOnSave": {
+    "source.fixAll": "explicit"
+  },
+  "search.exclude": {
+    "**/.yarn": true,
+    "**/.pnp.*": true
+  },
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "unocss.root": ["."]
+}

package/README.md

@@ -0,0 +1,70 @@
+# Konoma Vue Components
+
+A collection of Vue 3 components and composables for building web applications, designed to be used as a Nuxt layer.
+
+---
+
+## Table of Contents
+
+- [Konoma Vue Components](#konoma-vue-components)
+  - [Table of Contents](#table-of-contents)
+  - [Related Resources](#related-resources)
+  - [Deployment](#deployment)
+  - [Runtime](#runtime)
+  - [Development](#development)
+    - [Prerequisites](#prerequisites)
+    - [Configuration](#configuration)
+    - [Running the Application](#running-the-application)
+    - [Code Style \& Linting](#code-style--linting)
+    - [Git](#git)
+  - [Important Concepts](#important-concepts)
+
+---
+
+## Related Resources
+
+## Deployment
+
+- Push changes to develop branch
+- Create new release in GitHub
+- A pipeline will be triggered that builds and publishes the code to the npm registry
+- Use as a Nuxt layer in your Nuxt projects
+
+## Runtime
+
+## Development
+
+### Prerequisites
+
+To run the application locally, you need to have the following installed:
+
+- [Node.js](https://nodejs.org/) (version 22 or higher)
+- [Yarn](https://yarnpkg.com/) (version 4 or higher)
+
+### Configuration
+
+### Running the Application
+
+Explain how to run the application locally. Include commands and any additional steps needed to start the development server.
+
+To run the application, use the following command:
+
+```sh
+  yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) in your browser to see the application.
+
+### Code Style & Linting
+
+- We use ESLint for linting and formatting.
+- If possible, use the corresponding extensions in your IDE to automatically lint and format the code on save.
+- Run `yarn lint` to check for linting issues and format the code.
+
+### Git
+
+- Generally all development happens on the `develop` branch.
+- If we introduce breaking changes, create a new branch from `develop` and name it according to the old version (e.g. `legacy/0.1.*`).
+  - This way we are able to still support older versions if needed.
+
+## Important Concepts

package/app.config.ts

@@ -0,0 +1,13 @@
+export default defineAppConfig({
+  'konoma-theme': {
+    primary: 'teal',
+    secondary: 'gray',
+    tertiary: 'purple',
+    gray: 'slate',
+    success: 'emerald',
+    info: 'sky',
+    alert: 'amber',
+    error: 'red',
+    extra: 'violet',
+  },
+});

package/components/KonomaTheme.vue

@@ -0,0 +1,92 @@
+<template>
+  <div />
+</template>
+
+<script lang="ts" setup>
+import type { UserConfig } from 'unocss';
+import { createGenerator } from 'unocss';
+
+const props = defineProps<{
+  unocssConfig: UserConfig<object>
+}>();
+
+const requiredThemeShades = [
+  '50',
+  '100',
+  '150',
+  '200',
+  '250',
+  '300',
+  '350',
+  '400',
+  '450',
+  '500',
+  '550',
+  '600',
+  '650',
+  '700',
+  '750',
+  '800',
+  '850',
+  '900',
+  '950',
+  'DEFAULT',
+] as const;
+
+const appConfig = useAppConfig();
+const requiredThemeColors = Object.keys(appConfig['konoma-theme']);
+
+interface UnocssThemeColors {
+  [key: string]: string
+}
+
+type AppConfigThemeKey = keyof (typeof appConfig)['konoma-theme'];
+
+async function initTheme(): Promise<Record<AppConfigThemeKey, Record<keyof typeof requiredThemeShades, string>>> {
+  const ctx = await createGenerator(props.unocssConfig);
+  const unocssThemeColors = (ctx.config.theme as { colors: UnocssThemeColors }).colors;
+
+  const result = Object.fromEntries(requiredThemeColors.map(requiredThemeColorName => [requiredThemeColorName, {}])) as Record<
+    AppConfigThemeKey,
+    Record<keyof typeof requiredThemeShades, string>
+  >;
+
+  for (const requiredThemeColorName of requiredThemeColors) {
+    const effectiveColorName = appConfig['konoma-theme'][requiredThemeColorName as AppConfigThemeKey];
+    const unocssColorObject = unocssThemeColors[effectiveColorName];
+    if (!unocssColorObject) {
+      throw new Error(`Theme color "${effectiveColorName}" not found in UnoCSS config`);
+    }
+
+    if (typeof unocssColorObject === 'string') {
+      throw new TypeError(`Theme color "${effectiveColorName}" is not an object`);
+    }
+
+    const unocssColorKeys = Object.keys(unocssColorObject);
+    const missingShades = requiredThemeShades.filter(shade => !unocssColorKeys.includes(shade));
+    if (missingShades.length) {
+      throw new Error(
+        `Theme color "${effectiveColorName}" is missing "${missingShades.join('", "')}" ${missingShades.length > 1 ? 'shades' : 'shade'}`,
+      );
+    }
+    result[requiredThemeColorName as AppConfigThemeKey] = unocssColorObject as Record<keyof typeof requiredThemeShades, string>;
+  }
+  return result;
+}
+
+const theme = await initTheme();
+
+useHead(() => ({
+  bodyAttrs: {
+    style: Object.entries(theme).reduce(
+      (acc, [colorName, colorShades]) => {
+        Object.entries(colorShades).forEach(([shade, value]) => {
+          acc[`--konoma-${colorName}-${shade}`] = value;
+        });
+        return acc;
+      },
+      {} as Record<string, string>,
+    ),
+  },
+}));
+</script>

package/components/defaults/button.ts

@@ -0,0 +1,19 @@
+export const baseClasses = {
+  classesBase:
+    'w-full rounded-kvc-button py-2.5 px-3.5 h-10 text-sm font-semibold shadow-sm inline-flex justify-center items-center flex flex-row gap-2 cursor-pointer disabled:!cursor-not-allowed disabled:!opacity-50 disabled:!shadow-none disabled:!ring-0 disabled:!bg-secondary-200 disabled:!text-secondary-500',
+  classesPrimary:
+    'bg-primary-600 border border-primary-600 text-white hover:bg-primary-700 focus:ring-2 focus:ring-primary-600 focus:ring-offset-2',
+  classesSecondary: 'bg-white border border-secondary-200 hover:bg-secondary-100 focus:ring-2 focus:ring-primary-600 focus:ring-offset-2',
+  classesActiveSecondary:
+    'bg-secondary-100 border border-secondary-100 hover:bg-secondary-200 text-secondary-900 focus:ring-2 focus:ring-primary-600 focus:ring-offset-2',
+  classesError: 'bg-error-500 border border-error-600 text-white hover:bg-error-700 focus:ring-2 focus:ring-error-500 focus:ring-offset-2',
+  classesAlert: 'bg-alert-500 border border-alert-600 text-white hover:bg-alert-700 focus:ring-2 focus:ring-alert-500 focus:ring-offset-2',
+  loadingClassesBase: 'h-6 w-6 animate-spin',
+  loadingClassesPrimary: 'text-primary-600 fill-white',
+  loadingClassesSecondary: 'text-secondary-200',
+  loadingClassesActiveSecondary: 'text-secondary-200',
+  loadingClassesError: 'text-error-200',
+  loadingClassesAlert: 'text-alert-200',
+  iconLeftClasses: 'h-6 w-6',
+  iconRightClasses: 'h-6 w-6',
+};

package/components/defaults/checkbox.ts

@@ -0,0 +1,13 @@
+import type { Classes } from '../../types/form';
+
+export const baseClasses: { [key in keyof Classes]?: string } = {
+  classesFilled:
+    'flex h-4 w-4 flex-row items-center justify-center rounded-kvc-checkbox border border-primary-600 bg-primary-600 shadow-sm outline-offset-2 group-hover:border-primary-700 group-hover:bg-primary-700',
+  classesEmpty:
+    'flex flex-row items-center justify-center h-4 w-4 rounded-kvc-checkbox border border-secondary-300 bg-white shadow-sm outline-offset-2 outline-primary-800 group-hover:border-secondary-400 group-active:outline-solid',
+  classesError: 'h-4 w-4 rounded-kvc-checkbox border border-error-500 bg-error-100 shadow-sm outline-offset-2',
+  labelClassesFilled: 'ml-2 text-sm font-medium text-secondary-900',
+  labelClassesError: 'ml-2 text-sm font-medium text-error-600',
+  labelClassesEmpty: 'ml-2 text-sm font-medium text-secondary-900',
+  iconClassesFilled: 'h-3 w-3 text-white',
+};

package/components/defaults/checkboxList.ts

@@ -0,0 +1,9 @@
+import type { Classes } from '../../types/form';
+
+export const baseClasses: { [key in keyof Classes]?: string } = {
+  labelClasses: 'text-sm font-medium text-secondary-900',
+  wrapperClasses: 'flex gap-4',
+  classes: 'flex flex-row gap-5',
+  classesError: '!text-error-500',
+  errorClasses: 'text-sm text-error-500',
+};

package/components/defaults/columnChooser.ts

@@ -0,0 +1,8 @@
+export const baseClasses = {
+  wrapperClasses: 'flex flex-col rounded-kvc-table-column-chooser bg-white px-4 py-3 shadow-sm z-1',
+  headerClasses: 'h-8',
+  columnsWrapperClasses: 'ml-2 mt-3 flex max-h-100 flex-col gap-1 overflow-y-auto',
+  entryClasses: 'cursor-pointer px-4 py-2 text-sm font-medium text-secondary-600',
+  visibleColumnClasses: 'bg-primary-100',
+  hiddenColumnClasses: 'bg-white',
+};

package/components/defaults/input.ts

@@ -0,0 +1,16 @@
+import type { Classes } from '../../types/form';
+
+export const baseClasses: { [key in keyof Classes]?: string } = {
+  classes:
+    'w-full h-10 rounded-kvc-input px-3 py-2 outline-hidden placeholder:text-secondary-500 placeholder:text-sm text-secondary-900 text-sm disabled:pointer-events-none not-disabled:bg-white disabled:bg-secondary-50',
+  wrapperClasses: 'group flex flex-col gap-1',
+  labelClasses: 'flex flex-row justify-start text-sm font-medium text-secondary-900',
+  iconLeftClasses: 'absolute bottom-0 left-3 top-0 my-auto h-5 w-5 text-secondary-300',
+  iconRightClasses: 'h-5 w-5',
+  wrapperRightClasses: 'absolute bottom-0 right-3 top-0 my-auto flex flex-row items-center gap-2 text-secondary-300 text-sm',
+  errorClasses: 'text-sm text-error-500',
+  classesError: 'ring-error-500 ring-2',
+  classesNeutral: 'border-secondary-300 border focus:ring-2 hover:border-secondary-400 focus:ring-primary-900',
+  additionalClassesIconLeft: 'pl-10',
+  additionalClassesIconRight: 'pr-12',
+};

package/components/defaults/pagination.ts

@@ -0,0 +1,10 @@
+import type { PaginationClasses } from '../../types/table';
+
+export const baseClasses: PaginationClasses = {
+  activeIconClasses: 'w-8 p-2 cursor-pointer rounded-full bg-white',
+  inactiveIconClasses: 'w-8 p-2 cursor-not-allowed text-secondary-500',
+  wrapperClasses: 'flex flex-row justify-between p-4',
+  resultsClasses: 'flex flex-row gap-1 text-sm',
+  resultsTextClasses: 'font-medium',
+  controlClasses: 'flex flex-row items-center gap-4 pb-2',
+};

package/components/defaults/radioButtonGroup.ts

@@ -0,0 +1,13 @@
+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',
+  wrapperClasses: 'flex flex-col gap-2',
+  classesFilled: 'bg-primary-600',
+  labelClasses: 'text-sm font-medium text-secondary-900',
+  labelWrapperClasses: 'flex flex-row items-center gap-2',
+  classesEmpty: 'border border-secondary-300 bg-white',
+  errorClasses: 'text-sm text-error-500',
+  optionClasses: 'text-sm',
+};

package/components/defaults/select.ts

@@ -0,0 +1,20 @@
+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',
+  valueContainerClasses: '',
+};

package/components/defaults/table.ts

@@ -0,0 +1,16 @@
+export const baseClasses = {
+  wrapperClasses: 'relative h-full',
+  tableClasses:
+    'max-h-full max-w-full overflow-x-auto overflow-y-auto rounded-kvc-table outline-1 outline-solid outline-secondary-300 divide-y divide-secondary-200',
+  headerClasses:
+    'flex flex-col items-start truncate bg-kvc-table-header justify-center px-4 py-3 text-xs font-medium first:rounded-tl-kvc-table gap-2',
+  columnsWrapperClasses: 'flex flex-row overflow-x-auto overflow-y-auto h-full',
+  columnsLeftClasses: 'flex flex-row h-fit overflow-x-auto border-r first:rounded-tl-kvc-table last:rounded-tr-kvc-table',
+  columnsCenterClasses: 'flex grow flex-row h-fit overflow-x-auto first:rounded-tl-kvc-table last:rounded-tr-kvc-table',
+  columnsRightClasses: 'flex flex-row h-fit overflow-x-auto border-l first:rounded-tl-kvc-table last:rounded-tr-kvc-table',
+  noDataClasses: 'flex h-16 items-center justify-start pl-16 rounded-b-kvc-table bg-white text-secondary-500 w-full',
+  rowClasses: 'group relative flex flex-row justify-between bg-white last:rounded-b-kvc-table hover:bg-primary-100 h-fit',
+  rowLeftWrapperClasses: 'bg-white group-hover:bg-primary-100 h-fit',
+  rowCenterWrapperClasses: 'bg-white first:grow group-hover:bg-primary-100 h-fit',
+  rowRightWrapperClasses: 'bg-white group-hover:bg-primary-100 h-fit',
+};

package/components/defaults/tabs.ts

@@ -0,0 +1,10 @@
+export const baseClasses = {
+  wrapperClasses: 'flex flex-row gap-10 pt-4 border-b border-secondary-200',
+  tabActiveClasses: '',
+  tabInactiveClasses: 'text-secondary-600',
+  countActiveClasses: 'bg-tertiary-300',
+  countInactiveClasses: 'bg-secondary-200',
+  tabBaseClasses: 'h-12 px-1 text-sm font-semibold text-primary-900 cursor-pointer flex flex-row gap-2 items-center relative',
+  countBaseClasses: 'rounded-full px-3',
+  activeMarkerClasses: 'absolute -bottom-0.5 left-0 h-0.5 w-full bg-primary-600',
+}

package/components/defaults/tag.ts

@@ -0,0 +1,7 @@
+export const baseClasses = {
+  wrapperClasses:
+    'flex flex-row h-6 cursor-pointer items-center justify-center gap-1 rounded-kvc-tag border border-secondary-300 px-3 py-1 bg-primary-100 text-secondary-900',
+  titleClasses: 'text-center text-xs font-medium',
+  iconLeftClasses: 'h-4 w-4',
+  iconRightClasses: 'h-4 w-4',
+}

package/components/defaults/tagList.ts

@@ -0,0 +1,14 @@
+import type { Classes } from '../../types/form';
+
+export const baseClasses: { [key in keyof Classes]?: string } = {
+  classes: 'w-full flex flex-row gap-2 flex-wrap items-center rounded-kvc-tag-list p-4 bg-white',
+  wrapperClasses: 'group flex flex-col gap-1',
+  labelClasses: 'flex flex-row justify-start text-sm font-medium text-secondary-900',
+  iconLeftClasses: 'absolute bottom-0 left-3 top-0 my-auto h-5 w-5 text-secondary-300',
+  iconRightClasses: 'absolute bottom-0 right-3 top-0 my-auto h-5 w-5 text-secondary-300',
+  errorClasses: 'text-sm text-error-500',
+  classesError: 'ring-error-500 ring-2',
+  classesNeutral: 'border-secondary-300 border',
+  additionalClassesIconLeft: 'pl-10',
+  additionalClassesIconRight: 'pr-10',
+};

package/components/defaults/textarea.ts

@@ -0,0 +1,16 @@
+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',
+  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',
+  labelClasses: 'flex flex-row justify-start text-sm text-secondary-900 font-medium',
+  hintClasses: 'text-sm text-secondary-500',
+  wrapperClasses: 'flex flex-col gap-1',
+  resizeClasses: 'absolute bottom-4 right-4 h-4 w-4 cursor-row-resize text-secondary-300',
+  resizeIconClasses: 'h-4 w-4',
+  controlClasses: 'h-full w-full resize-none focus-visible:outline-hidden disabled:pointer-events-none  disabled:bg-primary-50',
+  labelWrapperClasses: 'flex flex-row justify-between',
+  classesDisabled: 'w-full text-sm rounded-kvc-textarea p-4 pointer-events-none bg-primary-50',
+};

package/components/form/KonomaCheckbox.vue

@@ -0,0 +1,68 @@
+<template>
+  <label v-if="value || indeterminate" :class="`group flex flex-row items-center ${$attrs.class}`">
+    <input type="hidden" :value="1">
+    <input
+      :value="1"
+      :indeterminate="indeterminate"
+      type="checkbox"
+      :name="name?.toString()"
+      class="h-0 w-0 appearance-none"
+      :checked="!!value"
+      :disabled="disabled"
+      v-bind="$attrs"
+      @change="$emit('change', ($event.target as HTMLInputElement).checked, $event)"
+    >
+    <div :class="classesFilled">
+      <KonomaIcon :name="indeterminate ? 'heroicons:minus' : 'heroicons:check-16-solid'" :class="iconClassesFilled" />
+    </div>
+    <span :class="labelClassesFilled">
+      <slot name="label" />
+    </span>
+  </label>
+  <label v-else-if="error?.length" :class="`group flex flex-row items-center ${$attrs.class}`">
+    <input type="hidden" :name="name?.toString()" :value="0">
+    <input
+      type="checkbox"
+      :name="name?.toString()"
+      :checked="!!value"
+      class="h-0 w-0 appearance-none"
+      :disabled="disabled"
+      @change="$emit('change', ($event.target as HTMLInputElement).checked, $event)"
+    >
+    <div :class="classesError" />
+    <span :class="labelClassesError"><slot name="label" /></span>
+  </label>
+  <label v-else :class="`group flex flex-row items-center ${$attrs.class}`">
+    <!-- This allows us to check for errors in CheckboxList -->
+    <input type="hidden" :name="name?.toString()" :value="0">
+    <input
+      type="checkbox"
+      :name="name?.toString()"
+      :value="0"
+      class="h-0 w-0 appearance-none"
+      :checked="!!value"
+      :disabled="disabled"
+      @change="$emit('change', ($event.target as HTMLInputElement).checked, $event)"
+    >
+    <div :class="classesEmpty" />
+    <span :class="labelClassesEmpty"><slot name="label" /></span>
+  </label>
+</template>
+
+<script lang="ts" setup generic="DataType extends FormDataType">
+import type { FormDataType, FormFieldEmits, FormFieldProps } from '../../types/form';
+import { baseClasses } from '../defaults/checkbox';
+import KonomaIcon from '../ui/KonomaIcon.vue';
+
+withDefaults(defineProps<FormFieldProps<DataType>>(), {
+  classesFilled: baseClasses.classesFilled,
+  classesError: baseClasses.classesError,
+  classesEmpty: baseClasses.classesEmpty,
+  labelClassesFilled: baseClasses.labelClassesFilled,
+  labelClassesError: baseClasses.labelClassesError,
+  labelClassesEmpty: baseClasses.labelClassesEmpty,
+  iconClassesFilled: baseClasses.iconClassesFilled,
+})
+
+defineEmits<FormFieldEmits>()
+</script>

package/components/form/KonomaCheckboxList.vue

@@ -0,0 +1,42 @@
+<template>
+  <div :class="[wrapperClasses, positionClasses[labelPosition]].join(' ')">
+    <span :class="labelClasses">
+      <slot name="label" /><template v-if="required">*</template>
+    </span>
+    <div :class="[classes, error?.length && { classesError }].join(' ')">
+      <KonomaCheckbox
+        v-for="(option, i) in options"
+        :key="i"
+        :name="name?.toString()"
+        :label="option.label.toString()"
+        :error="error"
+        v-bind="{ ...$attrs, ...childClasses }"
+        :value="values?.includes(option.value)"
+        @change=" (_, e) => $emit('change', option.value, e)"
+      />
+    </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 { positionClasses } from '../../types/form';
+import { baseClasses } from '../defaults/checkboxList';
+import KonomaCheckbox from './KonomaCheckbox.vue';
+
+withDefaults(defineProps<FormFieldProps<DataType>>(), {
+  labelClasses: baseClasses.labelClasses,
+  wrapperClasses: baseClasses.wrapperClasses,
+  classes: baseClasses.classes,
+  classesError: baseClasses.classesError,
+  errorClasses: baseClasses.errorClasses,
+  labelPosition: 'top',
+})
+
+defineEmits<FormFieldEmits>()
+</script>

package/components/form/KonomaForm.vue

@@ -0,0 +1,71 @@
+<template>
+  <form @submit="submit">
+    <slot />
+  </form>
+</template>
+
+<script lang="ts" setup generic="DataType extends {
+  [key: string]: string | number | boolean | null
+}"
+>
+import { formInjectionKeys } from './injectionKeys';
+
+const props = defineProps<{
+  validators: Record<keyof DataType, ((value: string | number | boolean | null) => string)[]>
+  data: DataType
+}>()
+
+const emit = defineEmits<{
+  (e: 'onValidation', errors: Partial<Record<keyof DataType, string[]>>): void
+  (e: 'onSubmit'): void | Promise<void>
+}>()
+
+const errors = ref<Partial<Record<keyof DataType, string[]>>>({})
+const submitAttempted = ref(false)
+
+function validate() {
+  let invalid = false;
+  const newErrors: Record<keyof DataType, string[]> = {} as Record<keyof DataType, string[]>;
+
+  Object.entries(props.data).forEach(([name, value]) => {
+    if (!props.validators[name as keyof DataType]) {
+      return;
+    }
+    newErrors[name as keyof DataType] = props.validators[name as keyof DataType]
+      .map((validator) => {
+        const validation = validator(value);
+        if (validation) {
+          invalid = true;
+        }
+        return validation;
+      })
+      .filter(v => v);
+  });
+  errors.value = newErrors;
+  emit('onValidation', newErrors);
+  if (process.env.NODE_ENV === 'development') {
+    console.warn('Form errors', newErrors);
+  }
+  return invalid;
+}
+
+async function submit(event: Event) {
+  event.preventDefault();
+  const invalid = validate();
+
+  if (invalid) {
+    submitAttempted.value = true;
+    return;
+  }
+  submitAttempted.value = false;
+  await emit('onSubmit');
+}
+
+async function updateErrors(newErrors: Partial<Record<keyof DataType, string[]>>) {
+  errors.value = newErrors;
+  emit('onValidation', newErrors);
+}
+
+provide(formInjectionKeys().errors, errors.value);
+provide(formInjectionKeys().updateErrors, updateErrors);
+</script>