ketekny-ui-kit 1.0.83 → 1.0.84

package/index.js

@@ -13,6 +13,7 @@ import kSelect from './src/ui/kSelect.vue'
 import kTable from './src/ui/kTable.vue'
 import kTabs from './src/ui/kTabs.vue'
 import kToggle from './src/ui/kToggle.vue'
+import kForm from './src/ui/kForm.vue'
 import kUploader from './src/ui/kUploader.vue'
 import kEditor from './src/ui/kEditor.vue'
 import kSpinner from './src/ui/kSpinner.vue'
@@ -35,6 +36,8 @@ import kAppHeader from './src/layout/kAppHeader.vue'
 import kAppFooter from './src/layout/kAppFooter.vue'
 import kAppMain from './src/layout/kAppMain.vue'
 import kHero from './src/layout/kHero.vue'
+import kSingleColPage from './src/layout/kSingleColPage.vue'
+import kTwoColPage from './src/layout/kTwoColPage.vue'
 import twoColLayout from './src/layout/twoColLayout.vue'
 
 // Toast/Confirm/Alert Plugins
@@ -53,13 +56,13 @@ export {
   kMessage, kCode, kToolbar, kTable, kTabs, kChip, kSpinner, kDatatable, kIcon, kMenu, kSkeleton, kProgressBar, kPagination, kTree,
 
   // Form Components
-  kButton, kCheckbox, kSelect, kUploader, kToggle, kInput, kDateSelector, kEditor, kSelectButton, kTags, kSearch, kArrayList, kList, kTextArea,
+  kButton, kCheckbox, kSelect, kUploader, kToggle, kInput, kDateSelector, kEditor, kSelectButton, kTags, kSearch, kArrayList, kList, kTextArea, kForm,
 
   // Dialogs
   kDialog, kDrawer,
 
   // Layout Components
-  kAppHeader, kAppFooter, kAppMain, kHero, twoColLayout,
+  kAppHeader, kAppFooter, kAppMain, kHero, kSingleColPage, kTwoColPage, twoColLayout,
 
   // Plugins
   toastPlugin, confirmPlugin, alertPlugin, tooltipPlugin, inputDialogPlugin,
@@ -67,4 +70,3 @@ export {
   // Tailwind Config
   tailwindPreset
 }
-

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ketekny-ui-kit",
   "type": "module",
-  "version": "1.0.83",
+  "version": "1.0.84",
   "description": "A Vue 3 UI component library with Tailwind CSS styling",
   "main": "index.js",
   "files": [

package/src/layout/kSingleColPage.vue

@@ -0,0 +1,88 @@
+<template>
+  <main class="flex min-h-screen w-full max-w-none flex-col bg-slate-100">
+    <section class="bg-white px-4 pb-4 pb-0 pt-8 sm:px-6 lg:px-8">
+      <div class="mx-auto flex w-full max-w-none flex-col gap-5">
+        <div
+          v-if="pageTitle || pageDescription"
+          class="flex flex-wrap items-start justify-between gap-4"
+        >
+          <div class="min-w-0">
+            <p class="text-[10px] font-semibold uppercase tracking-[0.28em] text-slate-500">
+              {{ appTitle }}
+            </p>
+            <h1 class="mt-1 text-2xl font-semibold tracking-tight text-slate-900 sm:text-3xl">
+              {{ pageTitle }}
+            </h1>
+            <p v-if="pageDescription" class="mt-1 text-sm font-medium text-slate-500">
+              {{ pageDescription }}
+            </p>
+          </div>
+          <div class="flex flex-wrap items-center gap-2">
+            <slot name="header-actions" />
+            <kButton
+              v-if="externalUrl"
+              :label="externalUrlLabel"
+              icon="ExternalLink"
+              variant="soft"
+              @click="openExternalUrl"
+            />
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <div class="sticky top-0 z-30 border-b border-t border-slate-200 bg-slate-50 px-4 backdrop-blur sm:px-6 lg:px-8">
+      <div class="mx-auto flex w-full max-w-none items-center">
+        <slot name="header-extra" />
+      </div>
+    </div>
+
+    <div class="flex-1 bg-slate-100 px-4 pb-8 pt-4 sm:px-6 lg:px-8">
+      <div class="mx-auto w-full max-w-none">
+        <slot />
+      </div>
+    </div>
+  </main>
+</template>
+
+<script>
+import packageJson from '../../package.json'
+import kButton from '../ui/kButton.vue'
+
+export default {
+  name: 'PageShell',
+  components: { kButton },
+  props: {
+    appTitle: {
+      type: String,
+      default: packageJson.description || packageJson.name || 'App',
+    },
+    pageTitle: {
+      type: String,
+      default: '',
+    },
+    pageDescription: {
+      type: String,
+      default: '',
+    },
+    externalUrl: {
+      type: String,
+      default: '',
+    },
+  },
+  computed: {
+    externalUrlLabel() {
+      const target = String(this.externalUrl || '').trim()
+      if (!target) return ''
+      return target.replace(/^https?:\/\//i, '').replace(/\/$/, '')
+    },
+  },
+  methods: {
+    openExternalUrl() {
+      const target = String(this.externalUrl || '').trim()
+      if (!target) return
+      window.open(target, '_blank', 'noopener,noreferrer')
+    },
+  },
+}
+</script>

package/src/layout/kTwoColPage.vue

@@ -0,0 +1,103 @@
+<template>
+  <main class="flex h-screen w-full max-w-none flex-col overflow-hidden bg-slate-100">
+    <section class="shrink-0 bg-white px-4 pb-4 pb-0 pt-8 sm:px-6 lg:px-8">
+      <div class="mx-auto flex w-full max-w-none flex-col gap-5">
+        <div
+          v-if="pageTitle || pageDescription"
+          class="flex flex-wrap items-start justify-between gap-4"
+        >
+          <div class="min-w-0">
+            <p class="text-[10px] font-semibold uppercase tracking-[0.28em] text-slate-500">
+              {{ appTitle }}
+            </p>
+            <h1 class="mt-1 text-2xl font-semibold tracking-tight text-slate-900 sm:text-3xl">
+              {{ pageTitle }}
+            </h1>
+            <p v-if="pageDescription" class="mt-1 text-sm font-medium text-slate-500">
+              {{ pageDescription }}
+            </p>
+          </div>
+          <div class="flex flex-wrap items-center gap-2">
+            <slot name="header-actions" />
+            <kButton
+              v-if="externalUrl"
+              :label="externalUrlLabel"
+              icon="ExternalLink"
+              variant="soft"
+              @click="openExternalUrl"
+            />
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <div class="shrink-0 border-b border-t border-slate-200 bg-slate-50 px-4 backdrop-blur">
+      <div class="mx-auto flex w-full max-w-none items-center">
+        <slot name="header-extra" />
+      </div>
+    </div>
+
+    <div class="min-h-0 flex-1 overflow-hidden bg-slate-100 py-4">
+      <div class="mx-auto flex h-full min-h-0 w-full max-w-none gap-2">
+        <aside class="ml-8 min-h-0 shrink-0 overflow-y-auto pr-4" :style="sidebarStyle">
+          <slot name="sidebar" />
+        </aside>
+        <section class="min-h-0 min-w-0 flex-1 overflow-y-auto px-2">
+          <slot name="content" />
+        </section>
+      </div>
+    </div>
+  </main>
+</template>
+
+<script>
+import packageJson from '../../package.json'
+import kButton from '../ui/kButton.vue'
+
+export default {
+  name: 'PageTwoColShell',
+  components: { kButton },
+  props: {
+    appTitle: {
+      type: String,
+      default: packageJson.description || packageJson.name || 'App',
+    },
+    pageTitle: {
+      type: String,
+      default: '',
+    },
+    pageDescription: {
+      type: String,
+      default: '',
+    },
+    externalUrl: {
+      type: String,
+      default: '',
+    },
+    sidebarWidth: {
+      type: String,
+      default: '300px',
+    },
+  },
+  computed: {
+    externalUrlLabel() {
+      const target = String(this.externalUrl || '').trim()
+      if (!target) return ''
+      return target.replace(/^https?:\/\//i, '').replace(/\/$/, '')
+    },
+    sidebarStyle() {
+      return {
+        minWidth: this.sidebarWidth,
+        maxWidth: this.sidebarWidth,
+      }
+    },
+  },
+  methods: {
+    openExternalUrl() {
+      const target = String(this.externalUrl || '').trim()
+      if (!target) return
+      window.open(target, '_blank', 'noopener,noreferrer')
+    },
+  },
+}
+</script>

package/src/ui/kForm.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="flex flex-col gap-2">
+    <template v-for="(item, idx) in formInputs" :key="item.id ?? idx">
+      <component
+        :is="components[item.type]"
+        v-bind="item.props"
+        :label="item.label + (item.required ? '*' : '')"
+        :required="item.required"
+        :modelValue="formModel[item.id]"
+        :error="errors[item.id]?.message"
+        @update:modelValue="(val) => updateField(item.id, val)"
+      />
+    </template>
+  </div>
+</template>
+
+<script>
+import kButton from './kButton.vue'
+import kEditor from './kEditor.vue'
+import kInput from './kInput.vue'
+import kSelect from './kSelect.vue'
+import kToggle from './kToggle.vue'
+
+const componentsMap = { kInput, kToggle, kButton, kSelect, kEditor }
+
+export default {
+  name: 'DynamicForm',
+  props: {
+    formInputs: { type: Array, default: () => [] },
+    formModel: { type: Object, default: () => ({}) },
+  },
+  emits: ['update:formModel', 'validated'],
+  data() {
+    return {
+      errors: {},
+    }
+  },
+  computed: {
+    components() {
+      return componentsMap
+    },
+  },
+  methods: {
+    validate() {
+      const errors = {}
+
+      for (const item of this.formInputs) {
+        const id = item.id
+        const val = this.formModel[id]
+
+        if (item.required) {
+          const empty =
+            val === null ||
+            val === undefined ||
+            (typeof val === 'string' && val.trim() === '') ||
+            (Array.isArray(val) && val.length === 0) ||
+            (typeof val === 'boolean' && val === false && item.type !== 'kToggle')
+          if (empty) {
+            errors[id] = { message: item.requiredMessage || 'Απαιτείται πεδίο.' }
+            continue
+          }
+        }
+
+        if (item.pattern instanceof RegExp && typeof val === 'string' && !item.pattern.test(val)) {
+          errors[id] = { message: item.patternMessage || 'Μη έγκυρη τιμή.' }
+          continue
+        }
+
+        if (typeof item.validator === 'function') {
+          const res = item.validator(val, this.formModel, item)
+          if (res !== true) {
+            errors[id] = { message: res || 'Μη έγκυρη τιμή.' }
+            continue
+          }
+        }
+      }
+
+      this.errors = errors
+      const valid = Object.keys(errors).length === 0
+      this.$emit('validated', { valid, errors })
+      return { valid, errors }
+    },
+    updateField(key, value) {
+      this.$emit('update:formModel', { ...this.formModel, [key]: value })
+    },
+  },
+}
+</script>