ketekny-ui-kit 1.0.62 → 1.0.64

package/README.md

@@ -154,7 +154,7 @@ Components:
 
 - `kMessage`, `kCode`, `kToolbar`, `kTable`, `kTabs`, `kChip`
 - `kSpinner`, `kDatatable`, `kIcon`, `kMenu`, `kSkeleton`
-- `kProgressBar`, `kTree`, `kButton`, `kSelect`, `kUploader`
+- `kProgressBar`, `kPagination`, `kTree`, `kButton`, `kSelect`, `kUploader`
 - `kToggle`, `kInput`, `kDateSelector`, `kEditor`
 - `kSelectButton`, `kTags`, `kSearch`, `kArrayList`, `kList`, `kTextArea`
 - `kDialog`, `kDrawer`

package/index.js

@@ -25,6 +25,7 @@ import kArrayList from './src/ui/kArrayList.vue'
 import kList from './src/ui/kList.vue'
 import kSkeleton from './src/ui/kSkeleton.vue'
 import kProgressBar from './src/ui/kProgressBar.vue'
+import kPagination from './src/ui/kPagination.vue'
 import kTextArea from './src/ui/kTextArea.vue'
 import kTree from './src/ui/kTree.vue'
 
@@ -33,6 +34,7 @@ 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 twoColLayout from './src/layout/twoColLayout.vue'
 
 // Toast/Confirm/Alert Plugins
 import toastPlugin from './src/plugins/toastPlugin.js'
@@ -47,7 +49,7 @@ import tailwindPreset from './tailwind-preset.js'
 // Named exports (tree-shaking friendly)
 export {
   // UI Components
-  kMessage, kCode, kToolbar, kTable, kTabs, kChip, kSpinner, kDatatable, kIcon, kMenu, kSkeleton, kProgressBar, kTree,
+  kMessage, kCode, kToolbar, kTable, kTabs, kChip, kSpinner, kDatatable, kIcon, kMenu, kSkeleton, kProgressBar, kPagination, kTree,
 
   // Form Components
   kButton, kSelect, kUploader, kToggle, kInput, kDateSelector, kEditor, kSelectButton, kTags, kSearch, kArrayList, kList, kTextArea,
@@ -56,7 +58,7 @@ export {
   kDialog, kDrawer,
 
   // Layout Components
-  kAppHeader, kAppFooter, kAppMain, kHero,
+  kAppHeader, kAppFooter, kAppMain, kHero, twoColLayout,
 
   // Plugins
   toastPlugin, confirmPlugin, alertPlugin, tooltipPlugin, inputDialogPlugin,

package/package.json

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

package/src/layout/twoColLayout.vue

@@ -0,0 +1,388 @@
+<template>
+  <div
+    class="relative flex min-h-screen flex-col bg-[#edf4fb] lg:h-screen lg:flex-row lg:overflow-hidden"
+  >
+    <button
+      v-show="isSidebarCollapsed"
+      type="button"
+      :aria-label="expandLabel"
+      v-tooltip.right="expandLabel"
+      class="fixed left-0 top-4 z-[70] hidden h-10 w-10 items-center justify-center rounded-r-full border border-white/15 bg-[#121b2e] text-white shadow-2xl shadow-black/50 transition-all duration-300 hover:bg-[#1a2640] lg:flex"
+      @click="toggleSidebar"
+    >
+      <slot name="collapsed-toggle-icon">
+        <kIcon :name="expandIcon" size="16" class="text-white" />
+      </slot>
+    </button>
+
+    <aside
+      class="flex h-screen w-full flex-col overflow-y-auto overflow-x-hidden bg-[radial-gradient(circle_at_0_0,#ffffff0f,#0000_34%),linear-gradient(#101a2d_0%,#0a1120_52%,#070d19_100%)] text-white shadow-2xl transition-all duration-300 ease-out lg:w-[360px] lg:shrink-0 lg:border-r lg:border-white/10 lg:will-change-transform"
+      :class="
+        isSidebarCollapsed
+          ? 'lg:relative lg:z-30 lg:w-[76px]'
+          : 'lg:relative lg:z-30 lg:translate-x-0'
+      "
+    >
+      <div class="relative border-b border-white/10">
+        <button
+          v-if="logoSrc || title"
+          type="button"
+          class="block w-full text-left"
+          v-tooltip.right.html="isSidebarCollapsed ? collapsedContactTooltip : logoAlt"
+          @click="$emit('logo-click')"
+        >
+          <img
+            v-if="logoSrc"
+            :alt="logoAlt"
+            :src="isSidebarCollapsed ? collapsedLogoSrc : logoSrc"
+            class="cursor-pointer px-4 py-4 transition-all duration-300"
+          />
+          <div v-if="title && !isSidebarCollapsed" class="py-3 mt-3 text-lg text-center bg-white/10">
+            {{ title }}
+          </div>
+        </button>
+
+        <slot name="sidebar-header" />
+
+        <button
+          v-show="!isSidebarCollapsed"
+          type="button"
+          :aria-label="collapseLabel"
+          v-tooltip.left="collapseLabel"
+          class="absolute right-2 top-2 z-[70] hidden h-10 w-10 items-center justify-center rounded-full border border-white/15 bg-[#121b2e] text-white shadow-2xl shadow-black/50 transition hover:bg-[#1a2640] lg:flex"
+          @click.stop="toggleSidebar"
+        >
+          <slot name="toggle-icon">
+            <kIcon
+              :name="collapseIcon"
+              size="16"
+              class="text-white"
+            />
+          </slot>
+        </button>
+      </div>
+
+      <div class="flex-1 pt-4">
+        <div v-if="isSidebarCollapsed" class="mx-1 mt-3 flex flex-col items-center gap-2">
+          <SidebarIconLink
+            v-for="item in normalizedMainMenu"
+            :key="item.key"
+            :icon="item.icon"
+            :active="item.active"
+            :to="item.to"
+            :href="item.href"
+            :title="item.title"
+            :is-external="item.isExternal"
+            :target="item.target"
+            :rel="item.rel"
+            :on-click="item.onClick"
+            v-tooltip.right="item.label"
+          />
+        </div>
+        <div v-else-if="mainMenu.length" class="mx-2 mt-3 space-y-3">
+          <component
+            v-for="item in normalizedMainMenu"
+            :key="item.key"
+            :is="item.isLink ? RouterLink : item.isExternal ? 'a' : 'button'"
+            v-bind="item.bindings"
+            class="flex w-full items-start gap-3 rounded-2xl border px-4 py-4 text-left transition-all duration-200"
+            :class="item.classes"
+          >
+            <span
+              class="mt-0.5 flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-white/10 text-cyan-100 transition-colors duration-200"
+              :class="item.active ? 'bg-slate-950 text-white' : ''"
+            >
+              <kIcon :name="item.icon" />
+            </span>
+            <span class="min-w-0">
+              <span class="block font-semibold leading-tight">
+                {{ item.label }}
+              </span>
+              <span
+                v-if="item.description"
+                class="mt-1 block text-sm"
+                :class="item.active ? 'text-slate-700' : 'text-slate-300'"
+              >
+                {{ item.description }}
+              </span>
+            </span>
+          </component>
+        </div>
+      </div>
+
+        <div v-if="account " class="shrink-0 border-t border-white/10 bg-slate-900/80 px-1 py-4 text-white/80">
+        <div v-if="isSidebarCollapsed" class="flex flex-col gap-3">
+          <div v-if="account.loggedIn" class="flex flex-col items-center gap-2">
+            <SidebarIconLink icon="UserRoundCog" :on-click="() => $emit('edit-profile')" :title="'Επεξεργασία προφίλ'" v-tooltip.right="'Επεξεργασία προφίλ'" />
+            <SidebarIconLink icon="LogOut" warning :on-click="() => $emit('signout')" :title="'Αποσύνδεση'" v-tooltip.right="'Αποσύνδεση'" />
+          </div>
+          <div v-else class="flex flex-col items-center gap-2">
+            <SidebarIconLink icon="LogIn" :on-click="() => $emit('signin')" :title="'Sign in'" v-tooltip.right="'Sign in'" />
+            <SidebarIconLink icon="UserPlus" :on-click="() => $emit('signup')" :title="'Sign up'" v-tooltip.right="'Sign up'" />
+          </div>
+        </div>
+        <div v-else class="flex flex-col gap-3 px-3">
+          <div class="min-w-0">
+            <p v-if="account.loggedIn" class="mt-2 truncate text-lg font-semibold text-white">
+              {{ accountDisplayName }}
+            </p>
+            <p v-if="account.loggedIn && account.email" class="truncate text-sm text-slate-300">
+              {{ account.email }}
+            </p>
+          </div>
+          <div class="flex flex-wrap gap-2">
+            <kButton
+              v-if="!account.loggedIn"
+              secondary
+              icon="LogIn"
+              label="Sign in"
+              @click="$emit('signin')"
+            />
+            <kButton
+              v-if="!account.loggedIn"
+              secondary
+              icon="UserPlus"
+              label="Sign up"
+              @click="$emit('signup')"
+            />
+            <kButton
+              v-if="account.loggedIn"
+              secondary
+              icon="UserRoundCog"
+              label="Επεξεργασία προφίλ"
+              @click="$emit('edit-profile')"
+            />
+            <kButton
+              v-if="account.loggedIn"
+              icon="LogOut"
+              warning
+              label="Αποσύνδεση"
+              @click="$emit('signout')"
+            />
+          </div>
+        </div>
+      </div>
+
+      <div
+        v-if="showContactInfo && !isSidebarCollapsed"
+        class="shrink-0 border-t border-white/10 p-4 text-white/50"
+      >
+        <div class="flex flex-col gap-2">
+          <p v-if="!isSidebarCollapsed" class="text-sm font-semibold uppercase tracking-[0.25em] text-white/60">
+            KETEKNY AE
+          </p>
+          <div class="flex flex-wrap items-center gap-x-3 text-sm leading-relaxed" :class="isSidebarCollapsed ? 'justify-center' : ''">
+            <span v-if="isSidebarCollapsed" class="sr-only">KETEKNY AE contact info</span>
+            <span class="whitespace-nowrap">Βερανζέρου 13, 10677, Αθήνα</span>
+            <span class="whitespace-nowrap">210 3648 337</span>
+            <span class="whitespace-nowrap">
+              <a href="mailto:grammateia@ketekny.gr" class="whitespace-nowrap hover:underline">
+                grammateia@ketekny.gr
+              </a>
+            </span>
+            <a
+              href="https://ketekny.gr"
+              target="_blank"
+              rel="noreferrer"
+              class="whitespace-nowrap hover:underline"
+            >
+              https://ketekny.gr
+            </a>
+          </div>
+        </div>
+      </div>
+
+    </aside>
+
+    <main class="min-h-screen min-w-0 flex-1 overflow-y-auto overflow-x-hidden lg:h-full lg:min-h-0">
+      <div class="w-full">
+        <slot />
+      </div>
+    </main>
+  </div>
+</template>
+
+<script>
+import kButton from '../ui/kButton.vue'
+import kIcon from '../ui/kIcon.vue'
+import { RouterLink } from 'vue-router'
+
+const SidebarIconLink = {
+  props: {
+    icon: { type: String, required: true },
+    active: { type: Boolean, default: false },
+    to: { type: [String, Object], default: null },
+    href: { type: String, default: null },
+    title: { type: String, default: '' },
+    isExternal: { type: Boolean, default: false },
+    target: { type: String, default: '_blank' },
+    rel: { type: String, default: 'noreferrer' },
+    onClick: { type: Function, default: null },
+    warning: { type: Boolean, default: false },
+    tooltip: { type: String, default: '' },
+  },
+  methods: {
+    handleClick(event) {
+      if (this.onClick) this.onClick(event)
+    },
+  },
+  template: `
+    <component
+      :is="to ? RouterLink : isExternal ? 'a' : 'button'"
+      :to="to"
+      :href="href"
+      :target="isExternal ? target : null"
+      :rel="isExternal ? rel : null"
+      :type="to || isExternal ? null : 'button'"
+      :title="title"
+      class="group relative flex h-14 w-14 items-center justify-center rounded-xl border border-white/15 transition"
+      :class="active ? 'bg-slate-950 text-white' : warning ? 'bg-[#d97706] text-white hover:bg-[#b45309]' : 'bg-white/5 text-white hover:border-cyan-400/40 hover:bg-white/10'"
+      @click="handleClick"
+    >
+      <kIcon :name="icon" size="20" class="text-current" />
+    </component>
+  `,
+  components: { RouterLink, kIcon },
+}
+
+const DEFAULT_STORAGE_KEY = 'two-col-layout-sidebar-collapsed'
+
+export default {
+  components: {
+    kButton,
+    kIcon,
+    RouterLink,
+    SidebarIconLink,
+  },
+  emits: ['logo-click', 'signin', 'signup', 'signout', 'edit-profile'],
+  props: {
+    title: { type: String, default: '' },
+    collapsedLogoSrc: {
+      type: String,
+      default: 'https://s3.ketekny.gr/public/web-apps/logos/logo-icon-dark.png',
+    },
+    logoSrc: { type: String, default: '' },
+    logoAlt: { type: String, default: 'Logo' },
+    collapseLabel: { type: String, default: 'Collapse sidebar' },
+    expandLabel: { type: String, default: 'Expand sidebar' },
+    collapseIcon: { type: String, default: 'ArrowLeftToLine' },
+    expandIcon: { type: String, default: 'ArrowRightToLine' },
+    storageKey: { type: String, default: DEFAULT_STORAGE_KEY },
+      defaultCollapsed: { type: Boolean, default: false },
+      mainMenu: { type: Array, default: () => [] },
+      showContactInfo: { type: Boolean, default: false },
+      account: { type: Object, default: null },
+  },
+  data() {
+    return {
+      isSidebarCollapsed: false,
+      mdCollapseQuery: null,
+    }
+  },
+  created() {
+    this.restoreSidebarState()
+  },
+  mounted() {
+    this.mdCollapseQuery = window.matchMedia('(min-width: 768px) and (max-width: 1023px)')
+    this.syncSidebarForViewport()
+    this.mdCollapseQuery.addEventListener('change', this.syncSidebarForViewport)
+  },
+  beforeUnmount() {
+    this.mdCollapseQuery?.removeEventListener('change', this.syncSidebarForViewport)
+  },
+  methods: {
+    restoreSidebarState() {
+      if (typeof window === 'undefined') {
+        this.isSidebarCollapsed = this.defaultCollapsed
+        return
+      }
+
+      const stored = window.localStorage.getItem(this.storageKey)
+      if (stored == null) {
+        this.isSidebarCollapsed = this.defaultCollapsed
+        return
+      }
+
+      this.isSidebarCollapsed = stored === 'true'
+    },
+    syncSidebarForViewport() {
+      if (typeof window === 'undefined') return
+
+      const isMd = window.matchMedia('(min-width: 768px) and (max-width: 1023px)').matches
+      if (isMd) {
+        this.isSidebarCollapsed = true
+        return
+      }
+
+      this.restoreSidebarState()
+    },
+    persistSidebarState() {
+      if (typeof window === 'undefined') return
+
+      window.localStorage.setItem(this.storageKey, this.isSidebarCollapsed ? 'true' : 'false')
+    },
+    toggleSidebar() {
+      this.isSidebarCollapsed = !this.isSidebarCollapsed
+      this.persistSidebarState()
+    },
+  },
+  computed: {
+    normalizedMainMenu() {
+      return this.mainMenu.map((item, index) => {
+        const isExternal = Boolean(item?.href)
+        const isLink = Boolean(item?.to)
+        const active = Boolean(item?.active)
+
+        return {
+          key: item?.key || item?.label || index,
+          label: item?.label || '',
+          description: item?.description || '',
+          icon: item?.icon || 'Dot',
+          active,
+          isExternal,
+          isLink,
+          bindings: isLink
+            ? {
+                to: item.to,
+                title: item.title || item.label,
+                'aria-current': active ? 'page' : null,
+              }
+            : isExternal
+              ? {
+                  href: item.href,
+                  target: item.target || '_blank',
+                  rel: item.rel || 'noreferrer',
+                  title: item.title || item.label,
+                }
+              : {
+                  type: 'button',
+                  title: item.title || item.label,
+                },
+          classes: active
+            ? 'border-white/70 bg-white/90 text-slate-950 shadow-lg shadow-black/20'
+            : 'border-white/10 bg-white/5 text-white hover:border-cyan-400/40 hover:bg-white/10',
+        }
+      })
+    },
+    accountDisplayName() {
+      if (!this.account) return ''
+      return [this.account.firstName, this.account.lastName].filter(Boolean).join(' ').trim() || 'Account'
+    },
+    collapsedContactTooltip() {
+      return `
+        <div style="min-width: 220px;">
+          <div style="font-weight: 700; text-transform: uppercase; letter-spacing: 0.25em; font-size: 11px; color: rgba(255,255,255,0.65); margin-bottom: 8px;">
+            KETEKNY AE
+          </div>
+          <div style="display: flex; flex-direction: column; gap: 4px; font-size: 13px; line-height: 1.4; color: rgba(255,255,255,0.9);">
+            <div>Βερανζέρου 13, 10677, Αθήνα</div>
+            <div>210 3648 337</div>
+            <div>grammateia@ketekny.gr</div>
+            <div>https://ketekny.gr</div>
+          </div>
+        </div>
+      `
+    },
+  },
+}
+</script>

package/src/ui/kPagination.vue

@@ -0,0 +1,118 @@
+<template>
+  <div class="flex flex-wrap items-center gap-3">
+    <div class="text-sm font-medium text-slate-500">
+      {{ paginationLabel }}
+    </div>
+
+    <kButton
+      label="First"
+      icon="ChevronsLeft"
+      variant="soft"
+      :disabled="loading || currentPage <= 1"
+      @click="emit('first')"
+    />
+
+    <kButton
+      label="Previous"
+      icon="ChevronLeft"
+      variant="soft"
+      :disabled="loading || currentPage <= 1"
+      @click="emit('previous')"
+    />
+
+    <div class="flex items-center gap-1">
+      <template v-for="item in paginationItems" :key="item.key">
+        <span
+          v-if="item.type === 'ellipsis'"
+          class="px-2 text-sm font-medium text-slate-400"
+        >
+          ...
+        </span>
+
+        <kButton
+          v-else
+          :label="String(item.page)"
+          variant="soft"
+          :class="item.active ? 'ring-2 ring-cyan-200' : ''"
+          :disabled="loading || item.active"
+          @click="emit('page', item.page)"
+        />
+      </template>
+    </div>
+
+    <kButton
+      label="Next"
+      icon="ChevronRight"
+      variant="soft"
+      :disabled="loading || currentPage >= safeTotalPages"
+      @click="emit('next')"
+    />
+
+    <kButton
+      label="Last"
+      icon="ChevronsRight"
+      variant="soft"
+      :disabled="loading || currentPage >= safeTotalPages"
+      @click="emit('last')"
+    />
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import kButton from './kButton.vue'
+
+const props = defineProps({
+  paginationLabel: {
+    type: String,
+    default: '',
+  },
+  page: {
+    type: Number,
+    required: true,
+  },
+  totalPages: {
+    type: Number,
+    required: true,
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const emit = defineEmits(['first', 'previous', 'page', 'next', 'last'])
+
+const safeTotalPages = computed(() => Math.max(1, Math.trunc(props.totalPages || 0)))
+const currentPage = computed(() => Math.min(Math.max(Math.trunc(props.page || 1), 1), safeTotalPages.value))
+
+const paginationItems = computed(() => {
+  const pages = new Set([1, safeTotalPages.value, currentPage.value - 1, currentPage.value, currentPage.value + 1])
+  const clampedPages = [...pages]
+    .filter((pageNumber) => Number.isFinite(pageNumber) && pageNumber >= 1 && pageNumber <= safeTotalPages.value)
+    .sort((a, b) => a - b)
+
+  const items = []
+  let lastPage = 0
+
+  for (const pageNumber of clampedPages) {
+    if (lastPage && pageNumber - lastPage > 1) {
+      items.push({
+        key: `ellipsis-${lastPage}-${pageNumber}`,
+        type: 'ellipsis',
+      })
+    }
+
+    items.push({
+      key: `page-${pageNumber}`,
+      type: 'page',
+      page: pageNumber,
+      active: pageNumber === currentPage.value,
+    })
+
+    lastPage = pageNumber
+  }
+
+  return items
+})
+</script>