@konoma-development/vue-components 0.0.1

package/components/ui/KonomaTabs.vue

@@ -0,0 +1,70 @@
+<template>
+  <div :class="wrapperClasses">
+    <div
+      v-for="(tab, i) in tabs"
+      :key="i"
+      :class="[
+        tabBaseClasses,
+        equalTabs(tab.id, active) ? tabActiveClasses : tabInactiveClasses,
+      ]"
+      @click="$emit('click', tab.id)"
+    >
+      <span>{{ tab.label }}</span>
+      <div
+        v-if="showCounts"
+        :class="[
+          countBaseClasses,
+          equalTabs(tab.id, active) ? countActiveClasses : countInactiveClasses,
+        ]"
+      >
+        {{ tab.count }}
+      </div>
+      <div v-if="equalTabs(tab.id, active)" :class="activeMarkerClass" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup generic="DataType">
+import { baseClasses } from '../defaults/tabs';
+
+interface Tab<DataType> {
+  id: DataType
+  label: string
+  count: number
+}
+
+withDefaults(defineProps<{
+  wrapperClasses?: string
+  tabActiveClasses?: string
+  tabInactiveClasses?: string
+  countActiveClasses?: string
+  countInactiveClasses?: string
+  tabBaseClasses?: string
+  countBaseClasses?: string
+  activeMarkerClass?: string
+  showCounts?: boolean
+  tabs: Tab<DataType>[]
+  active: DataType
+}>(), {
+  wrapperClasses: baseClasses.wrapperClasses,
+  tabActiveClasses: baseClasses.tabActiveClasses,
+  tabInactiveClasses: baseClasses.tabInactiveClasses,
+  countActiveClasses: baseClasses.countActiveClasses,
+  countInactiveClasses: baseClasses.countInactiveClasses,
+  tabBaseClasses: baseClasses.tabBaseClasses,
+  countBaseClasses: baseClasses.countBaseClasses,
+  activeMarkerClass: baseClasses.activeMarkerClasses,
+  showCounts: true,
+})
+
+defineEmits<{
+  (e: 'click', tab: DataType): void
+}>()
+
+function equalTabs<DataType>(tab1: DataType, tab2: DataType) {
+  if (Array.isArray(tab1) && Array.isArray(tab2)) {
+    return tab1.length === tab2.length && tab1.every((value, index) => value === tab2[index])
+  }
+  return tab1 === tab2
+}
+</script>

package/components/ui/KonomaTag.vue

@@ -0,0 +1,49 @@
+<template>
+  <div :class="wrapperClasses" @click="$emit('click')">
+    <KonomaIcon
+      v-if="iconLeftPath || iconLeftName"
+      :name="iconLeftName"
+      :path="iconLeftPath"
+      :class="iconLeftClasses"
+      @click="$emit('clickIconLeft')"
+    />
+    <div :class="titleClasses">
+      {{ title }}
+    </div>
+    <KonomaIcon
+      v-if="iconRightPath || iconRightName"
+      :name="iconRightName"
+      :path="iconRightPath"
+      :class="iconRightClasses"
+      @click="$emit('clickIconRight')"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { baseClasses } from '../defaults/tag';
+import KonomaIcon from './KonomaIcon.vue'
+
+withDefaults(defineProps<{
+  wrapperClasses?: string
+  titleClasses?: string
+  iconLeftClasses?: string
+  iconRightClasses?: string
+  iconLeftPath?: string
+  iconLeftName?: string
+  iconRightPath?: string
+  iconRightName?: string
+  title: string
+}>(), {
+  wrapperClasses: baseClasses.wrapperClasses,
+  titleClasses: baseClasses.titleClasses,
+  iconLeftClasses: baseClasses.iconLeftClasses,
+  iconRightClasses: baseClasses.iconRightClasses,
+})
+
+defineEmits<{
+  (e: 'click'): void
+  (e: 'clickIconLeft'): void
+  (e: 'clickIconRight'): void
+}>()
+</script>

package/composables/useKonomaTheme.ts

@@ -0,0 +1,5 @@
+import { defineStore } from 'pinia';
+
+export const useKonomaTheme = defineStore('konoma-theme', () => {
+  return {};
+});

package/eslint.config.ts

@@ -0,0 +1,43 @@
+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 withNuxt from './.playground/.nuxt/eslint.config.mjs';
+
+export default withNuxt(
+  eslint.configs.recommended,
+  await antfu({
+    unocss: true,
+    rules: {
+      'style/semi': 'off',
+      'style/brace-style': ['error', '1tbs'],
+      'vue/block-order': [
+        'error',
+        {
+          order: [['template', 'script'], 'style'],
+        },
+      ],
+    },
+  }),
+  {
+    files: ['**/*.{ts}'],
+    languageOptions: {
+      parser: vueParser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        parser: '@typescript-eslint/parser',
+        sourceType: 'module',
+      },
+      globals: {
+        ...globals.browser,
+      },
+    },
+    rules: {
+      'no-console': 'off',
+      'no-debugger': 'off',
+      'vue/multi-word-component-names': 'off',
+      'no-case-declarations': 'off',
+    },
+    ignores: ['.nuxt/*'],
+  },
+);

package/index.d.ts

@@ -0,0 +1,33 @@
+declare module '@nuxt/schema' {
+  interface AppConfigInput {
+    'konoma-theme'?: {
+      primary?: string
+      secondary?: string
+      tertiary?: string
+      gray?: string
+      success?: string
+      info?: string
+      alert?: string
+      error?: string
+      extra?: string
+    }
+  }
+}
+
+declare module '@nuxt/schema' {
+  interface AppConfig {
+    'konoma-theme': {
+      primary: string
+      secondary: string
+      tertiary: string
+      gray: string
+      success: string
+      info: string
+      alert: string
+      error: string
+      extra: string
+    }
+  }
+}
+
+export {};

package/nuxt.config.ts

@@ -0,0 +1,20 @@
+export default defineNuxtConfig({
+  devtools: {
+    enabled: true,
+  },
+  modules: ['@pinia/nuxt', '@unocss/nuxt', '@nuxt/icon', '@vueuse/nuxt', '@nuxt/eslint', 'floating-vue/nuxt'],
+  vite: {},
+  experimental: {
+    asyncContext: true,
+  },
+  components: {
+    dirs: ['components/ui', 'components/form', 'components/table'],
+  },
+  compatibilityDate: '2024-07-06',
+  hooks: {},
+  eslint: {
+    config: {
+      standalone: false,
+    },
+  },
+});

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@konoma-development/vue-components",
+  "version": "0.0.1",
+  "publishConfig": {
+    "access": "public"
+  },
+  "packageManager": "yarn@4.12.0",
+  "main": "./nuxt.config.ts",
+  "scripts": {
+    "dev": "nuxi dev .playground",
+    "build": "nuxt build .playground",
+    "generate": "nuxt generate .playground",
+    "preview": "nuxt preview .playground",
+    "lint": "eslint .",
+    "upgrade-nuxt": "nuxi upgrade",
+    "upgrade-deps": "yarn dlx taze major -w",
+    "upgrade-all": "yarn upgrade-nuxt && yarn upgrade-deps"
+  },
+  "devDependencies": {
+    "@antfu/eslint-config": "7.6.1",
+    "@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",
+    "@nuxt/devtools": "3.2.2",
+    "@nuxt/eslint": "1.15.2",
+    "@nuxt/eslint-config": "1.15.2",
+    "@nuxt/icon": "2.2.1",
+    "@nuxt/schema": "4.3.1",
+    "@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.12",
+    "@typescript-eslint/eslint-plugin": "8.56.1",
+    "@typescript-eslint/parser": "8.56.1",
+    "@unocss/eslint-config": "66.6.2",
+    "@unocss/nuxt": "66.6.2",
+    "@unocss/reset": "66.6.2",
+    "@vitejs/plugin-vue": "6.0.4",
+    "@vueuse/nuxt": "14.2.1",
+    "babel-preset-vue": "2.0.2",
+    "changelogen": "0.6.2",
+    "eslint": "10.0.2",
+    "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-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",
+    "vue-eslint-parser": "10.4.0",
+    "vue-tsc": "3.2.5"
+  }
+}

package/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "./.playground/.nuxt/tsconfig.json",
+  "compilerOptions": {
+    "module": "ESNext",
+    "types": [
+      "@pinia/nuxt"
+    ],
+    "noImplicitAny": true,
+    "allowSyntheticDefaultImports": true
+  }
+}

package/types/form.ts

@@ -0,0 +1,149 @@
+type LabelPosition = 'top' | 'bottom' | 'left' | 'right';
+
+export interface FormDataType {
+  [key: string]: string | number | boolean | null
+}
+
+export type FormValue = string | number | boolean | Option;
+
+export interface Option {
+  value: FormValue
+  label: string | number
+}
+
+/** 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
+  /** Base classes, usually assigned to the control */
+  classes?: string
+  /** Base classes, assigned directly to the control. Might be needed in case of more complex nesting */
+  controlClasses?: string
+  /** Used for components that have specific styling when in neutral state */
+  classesNeutral?: string
+  /** Used for components that have specific styling when empty */
+  classesEmpty?: string
+  classesDisabled?: string
+  /** Used for components that have specific styling when in error */
+  classesError?: string
+  /** Used for components that have specific styling when filled */
+  classesFilled?: string
+  /** Used for the label in components that have specific styling when empty */
+  labelClassesEmpty?: string
+  /** Used for the label in components that have specific styling when in error */
+  labelClassesError?: string
+  /** Used for the label in components that have specific styling when filled */
+  labelClassesFilled?: string
+  /** General classes for the label */
+  labelClasses?: string
+  /** Needed in case of nested label */
+  labelWrapperClasses?: string
+  /** Used for the icon in components that have specific styling when filled */
+  iconClassesFilled?: string
+  /** General classes for the wrapper */
+  wrapperClasses?: string
+  /** General classes for the icon on the left */
+  iconLeftClasses?: string
+  /** General classes for the icon on the right */
+  iconRightClasses?: string
+  /** General classes for the error message */
+  errorClasses?: string
+  /** Additional classes for the control when an icon is present on the left */
+  additionalClassesIconLeft?: string
+  /** Additional classes for the control when an icon is present on the right */
+  additionalClassesIconRight?: string
+  /** General classes for hints placed within the component */
+  hintClasses?: string
+  /** General classes for the resize element */
+  resizeClasses?: string
+  /** General classes for the icon within the resize element */
+  resizeIconClasses?: string
+  /** Classes to be applied to all values for components with multiple possible values */
+  optionClasses?: string
+  /** Classes to be applied to the wrapper for elements on the left side */
+  wrapperLeftClasses?: string
+  /** Classes to be applied to the wrapper for elements on the right side */
+  wrapperRightClasses?: string
+  // 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
+}
+
+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: 'keyDown', event: KeyboardEvent): void
+}
+
+export interface FormFieldProps<DataType extends {
+  [key: string]: string | number | boolean | null
+}> extends Classes {
+  allowCustomValues?: boolean
+  customValueLabel?: string
+  arrangement?: 'horizontal' | 'vertical'
+  centered?: boolean
+  autoFocus?: boolean
+  childClasses?: {
+    [key in keyof Classes]?: string
+  }
+  defaultValue?: FormValue
+  disabled?: boolean
+  error?: string[]
+  forgotPWText?: string
+  iconLeftPath?: string
+  iconLeftName?: string
+  iconRightPath?: string
+  iconRightName?: string
+  indeterminate?: boolean
+  isClearable?: boolean
+  replacements?: Record<string, string>
+  labelPosition?: LabelPosition
+  maxLength?: number
+  maxLengthLabel?: string
+  name?: keyof DataType
+  options?: Option[]
+  placeholder?: string
+  required?: boolean
+  resizeIconPath?: string
+  resizeIconName?: string
+  addTagTitle?: string
+  searchable?: boolean
+  textRight?: string
+  type?: HTMLInputElement['type']
+  step?: HTMLInputElement['step']
+  initialHeight?: number
+  mask?: Mask | Mask[]
+  min?: number
+  max?: number
+  /** Used for components that bind to one value */
+  value?: FormValue
+  /** Used for components that bind to multiple values */
+  values?: FormValue[]
+  /** Used for selects that have no visible selected value */
+  noValue?: boolean
+  isMulti?: boolean
+  /** [select only] Default placement of the menu in relation to the control. 'auto' will flip when there isn't enough space below the control. */
+  menuPlacement?: 'auto' | 'top' | 'bottom'
+  /** Used to place the dropdown element of a Select */
+  menuPortalTarget?: HTMLElement
+
+}
+
+export const positionClasses: Record<LabelPosition, string> = {
+  top: 'flex-col',
+  bottom: 'flex-col-reverse',
+  left: 'flex-row',
+  right: 'flex-row-reverse',
+};
+
+export type Mask = string | RegExp | { mask: Mask, definitions?: Record<string, RegExp> };

package/types/table.ts

@@ -0,0 +1,33 @@
+export interface TableColumn<DataType> {
+  id: keyof DataType
+  title?: string
+  initialWidth?: string | number
+  hidden?: boolean
+  sorting?: '+' | '-' | undefined
+  // Mutually exclusive with onClick
+  sortKey?: string
+  filterKey?: string
+  filterType?: 'filter' | 'fieldSearch'
+  // Mutually exclusive with sorting
+  onClick?: () => void
+  allowResize?: boolean
+  filterable?: boolean
+  grow?: boolean
+  // TODO: support custom filter component
+  filterComponent?: (filters: Record<string, string[]>, setFilters: (filters: Record<string, string[]>) => Promise<void>) => string
+}
+
+export interface DragItem {
+  index: number
+  id: string
+  type: string
+}
+
+export interface PaginationClasses {
+  activeIconClasses: string
+  inactiveIconClasses: string
+  wrapperClasses: string
+  resultsClasses: string
+  resultsTextClasses: string
+  controlClasses: string
+}

package/unocss.config.ts

@@ -0,0 +1,83 @@
+import type { PresetWind3Theme } from 'unocss';
+import { defineConfig, presetWind3, transformerDirectives } from 'unocss';
+import { presetScrollbar } from 'unocss-preset-scrollbar';
+
+type ColorValue = string | Colors;
+
+interface Colors {
+  [key: string]: ColorValue
+}
+
+export default defineConfig({
+  // presets
+
+  // core options
+  rules: [],
+  content: { pipeline: { include: [/\.(vue|svelte|[jt]sx|vine.ts|mdx?|astro|elm|php|phtml|html|ts)($|\?)/] } },
+  presets: [
+    presetWind3(),
+    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: {
+    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)',
+    },
+  },
+  transformers: [transformerDirectives()],
+});
+
+function buildHues(prefix: string) {
+  return {
+    DEFAULT: `var(--konoma-${prefix}-DEFAULT)`,
+    50: `var(--konoma-${prefix}-50)`,
+    100: `var(--konoma-${prefix}-100)`,
+    150: `var(--konoma-${prefix}-150)`,
+    200: `var(--konoma-${prefix}-200)`,
+    250: `var(--konoma-${prefix}-250)`,
+    300: `var(--konoma-${prefix}-300)`,
+    350: `var(--konoma-${prefix}-350)`,
+    400: `var(--konoma-${prefix}-400)`,
+    450: `var(--konoma-${prefix}-450)`,
+    500: `var(--konoma-${prefix}-500)`,
+    550: `var(--konoma-${prefix}-550)`,
+    600: `var(--konoma-${prefix}-600)`,
+    650: `var(--konoma-${prefix}-650)`,
+    700: `var(--konoma-${prefix}-700)`,
+    750: `var(--konoma-${prefix}-750)`,
+    800: `var(--konoma-${prefix}-800)`,
+    850: `var(--konoma-${prefix}-850)`,
+    900: `var(--konoma-${prefix}-900)`,
+    950: `var(--konoma-${prefix}-950)`,
+  }
+}