ketekny-ui-kit 1.0.68 → 1.0.70

package/package.json

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

package/src/layout/twoColLayout.vue

@@ -7,7 +7,7 @@
       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"
+      class="fixed top-0 z-[70] hidden h-10 w-10 items-center justify-center rounded-r-full border-white/15 bg-[#121b2e] text-white shadow-2xl shadow-black/50 transition-all duration-300 hover:bg-[#1a2640] lg:left-[44px] lg:translate-x-full lg:flex"
       @click="toggleSidebar"
     >
       <slot name="collapsed-toggle-icon">
@@ -15,20 +15,35 @@
       </slot>
     </button>
 
+    <button
+      v-show="!isSidebarCollapsed"
+      type="button"
+      :aria-label="collapseLabel"
+      v-tooltip.left="collapseLabel"
+      class="fixed top-0 z-[70] hidden h-10 w-10 items-center justify-center rounded-r-full border-white/15 bg-[#121b2e] text-white shadow-2xl shadow-black/50 transition-all duration-300 hover:bg-[#1a2640] lg:left-[328px] lg:translate-x-full lg:flex"
+      @click.stop="toggleSidebar"
+    >
+      <slot name="toggle-icon">
+        <kIcon :name="collapseIcon" 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="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: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">
+      <div class="relative">
         <button
           v-if="logoSrc"
           type="button"
           class="block w-full text-left"
-          v-tooltip.right.html="isSidebarCollapsed ? collapsedContactTooltip : logoAlt"
+          v-tooltip.right.html="
+            isSidebarCollapsed ? collapsedContactTooltip : logoAlt
+          "
           @click="$emit('logo-click')"
         >
           <img
@@ -37,50 +52,21 @@
             class="cursor-pointer px-4 py-4 transition-all duration-300"
           />
         </button>
-        <div v-if="title && !isSidebarCollapsed"
-        :class="showSponsors ? 'border-b border-white/30 ' : ''"
-        class="py-3 mt-3 text-xl font-bold text-center bg-[#0f4e8d]">
+        <div
+          v-if="title && !isSidebarCollapsed"
+          class="py-3 text-xl font-bold text-center"
+        >
           {{ title }}
         </div>
-        <div v-if="showSponsors && !isSidebarCollapsed" class="flex flex-col gap-3 px-4 py-4 bg-[#0f4e8d]">
-          <div>
-            <img
-              src="https://s3.ketekny.gr/public/web-apps/sponsors/Greece 2.0_NextGeneration_White_gr.png"
-              alt="Tameio Anakampsis"
-              class="mx-auto max-h-16 w-auto object-contain"
-            />
-          </div>
-          <div>
-            <img
-              src="https://s3.ketekny.gr/public/web-apps/sponsors/yp_ygeias_dark.png"
-              alt="Ypourgeio Ygeias"
-              class="mx-auto max-h-16 w-auto object-contain"
-            />
-          </div>
-        </div>
 
         <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">
+        <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"
@@ -127,23 +113,53 @@
         </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="account"
+        class="shrink-0 border-b border-white/10 bg-slate-900/80 px-1 pb-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="'Αποσύνδεση'" />
+            <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'" />
+            <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">
+            <p
+              v-if="account.loggedIn"
+              class="mt-2 truncate text-lg font-semibold text-white"
+            >
               {{ accountDisplayName }}
             </p>
-            <p v-if="account.loggedIn && displayEmail" class="truncate text-sm text-slate-300">
+            <p
+              v-if="account.loggedIn && displayEmail"
+              class="truncate text-sm text-slate-300"
+            >
               {{ displayEmail }}
             </p>
           </div>
@@ -164,7 +180,7 @@
             />
             <kButton
               v-if="account.loggedIn"
-               variant="soft"
+              variant="soft"
               icon="UserRoundCog"
               label="Επεξεργασία προφίλ"
               @click="$emit('edit-profile')"
@@ -181,19 +197,29 @@
       </div>
 
       <div
-        v-if="showContactInfo && !isSidebarCollapsed"
-        class="shrink-0 border-t border-white/10 p-4 text-white/50"
+        v-if="!isSidebarCollapsed"
+        class="shrink-0 border-t border-white/10 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">
+        <div class="flex flex-col gap-2 px-4" v-if="showContactInfo">
+          <p
+            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>
+          <div
+            class="flex flex-wrap items-center gap-x-3 text-sm"
+            :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:${contactEmail}`" class="whitespace-nowrap hover:underline">
+              <a
+                :href="`mailto:${contactEmail}`"
+                class="whitespace-nowrap hover:underline"
+              >
                 {{ contactEmail }}
               </a>
             </span>
@@ -207,11 +233,32 @@
             </a>
           </div>
         </div>
-      </div>
 
+        <div
+          v-if="showSponsors && !isSidebarCollapsed"
+          class="flex flex-col gap-3 px-4 py-1 bg-[#0d4b87] mt-2"
+        >
+          <div>
+            <img
+              src="https://s3.ketekny.gr/public/web-apps/sponsors/Greece 2.0_NextGeneration_White_gr.png"
+              alt="Tameio Anakampsis"
+              class="mx-auto max-h-14 w-auto object-contain"
+            />
+          </div>
+          <div>
+            <img
+              src="https://s3.ketekny.gr/public/web-apps/sponsors/yp_ygeias_dark.png"
+              alt="Ypourgeio Ygeias"
+              class="mx-auto max-h-14 w-auto object-contain"
+            />
+          </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">
+    <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>
@@ -220,10 +267,10 @@
 </template>
 
 <script>
-import { h } from 'vue'
-import kButton from '../ui/kButton.vue'
-import kIcon from '../ui/kIcon.vue'
-import { RouterLink } from 'vue-router'
+import { h } from "vue";
+import kButton from "../ui/kButton.vue";
+import kIcon from "../ui/kIcon.vue";
+import { RouterLink } from "vue-router";
 
 const SidebarIconLink = {
   props: {
@@ -231,22 +278,22 @@ const SidebarIconLink = {
     active: { type: Boolean, default: false },
     to: { type: [String, Object], default: null },
     href: { type: String, default: null },
-    title: { type: String, default: '' },
+    title: { type: String, default: "" },
     isExternal: { type: Boolean, default: false },
-    target: { type: String, default: '_blank' },
-    rel: { type: String, default: 'noreferrer' },
+    target: { type: String, default: "_blank" },
+    rel: { type: String, default: "noreferrer" },
     onClick: { type: Function, default: null },
     warning: { type: Boolean, default: false },
-    tooltip: { type: String, default: '' },
+    tooltip: { type: String, default: "" },
   },
   methods: {
     handleClick(event) {
-      if (this.onClick) this.onClick(event)
+      if (this.onClick) this.onClick(event);
     },
   },
   render() {
-    const isLink = Boolean(this.to)
-    const tag = isLink ? RouterLink : this.isExternal ? 'a' : 'button'
+    const isLink = Boolean(this.to);
+    const tag = isLink ? RouterLink : this.isExternal ? "a" : "button";
 
     return h(
       tag,
@@ -255,24 +302,24 @@ const SidebarIconLink = {
         href: this.href,
         target: this.isExternal ? this.target : null,
         rel: this.isExternal ? this.rel : null,
-        type: isLink || this.isExternal ? null : 'button',
+        type: isLink || this.isExternal ? null : "button",
         title: this.title,
         class: [
-          'group relative flex h-14 w-14 items-center justify-center rounded-xl border border-white/15 transition',
+          "group relative flex h-14 w-14 items-center justify-center rounded-xl border border-white/15 transition",
           this.active
-            ? 'bg-slate-950 text-white'
+            ? "bg-slate-950 text-white"
             : this.warning
-              ? 'bg-[#d97706] text-white hover:bg-[#b45309]'
-              : 'bg-white/5 text-white hover:border-cyan-400/40 hover:bg-white/10',
+            ? "bg-[#d97706] text-white hover:bg-[#b45309]"
+            : "bg-white/5 text-white hover:border-cyan-400/40 hover:bg-white/10",
         ],
         onClick: this.handleClick,
       },
-      [h(kIcon, { name: this.icon, size: '20', color: '#ffffff' })]
-    )
+      [h(kIcon, { name: this.icon, size: "20", color: "#ffffff" })]
+    );
   },
-}
+};
 
-const DEFAULT_STORAGE_KEY = 'two-col-layout-sidebar-collapsed'
+const DEFAULT_STORAGE_KEY = "two-col-layout-sidebar-collapsed";
 
 export default {
   components: {
@@ -281,97 +328,110 @@ export default {
     RouterLink,
     SidebarIconLink,
   },
-  emits: ['logo-click', 'signin', 'signup', 'signout', 'edit-profile'],
+  emits: ["logo-click", "signin", "signup", "signout", "edit-profile"],
   props: {
-    title: { type: String, default: '' },
+    title: { type: String, default: "" },
     collapsedLogoSrc: {
       type: String,
-      default: 'https://s3.ketekny.gr/public/web-apps/logos/logo-icon-dark.png',
+      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' },
+    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" },
     showSponsors: { type: Boolean, default: false },
     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 },
-    contactEmail: { type: String, default: 'grammateia@ketekny.gr' },
+    contactEmail: { type: String, default: "grammateia@ketekny.gr" },
   },
   data() {
     return {
       isSidebarCollapsed: false,
       mdCollapseQuery: null,
-    }
+    };
   },
   created() {
-    this.restoreSidebarState()
+    this.restoreSidebarState();
   },
   mounted() {
-    this.mdCollapseQuery = window.matchMedia('(min-width: 768px) and (max-width: 1023px)')
-    this.syncSidebarForViewport()
-    this.mdCollapseQuery.addEventListener('change', this.syncSidebarForViewport)
+    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)
+    this.mdCollapseQuery?.removeEventListener(
+      "change",
+      this.syncSidebarForViewport
+    );
   },
   methods: {
     restoreSidebarState() {
-      if (typeof window === 'undefined') {
-        this.isSidebarCollapsed = this.defaultCollapsed
-        return
+      if (typeof window === "undefined") {
+        this.isSidebarCollapsed = this.defaultCollapsed;
+        return;
       }
 
-      const stored = window.localStorage.getItem(this.storageKey)
+      const stored = window.localStorage.getItem(this.storageKey);
       if (stored == null) {
-        this.isSidebarCollapsed = this.defaultCollapsed
-        return
+        this.isSidebarCollapsed = this.defaultCollapsed;
+        return;
       }
 
-      this.isSidebarCollapsed = stored === 'true'
+      this.isSidebarCollapsed = stored === "true";
     },
     syncSidebarForViewport() {
-      if (typeof window === 'undefined') return
+      if (typeof window === "undefined") return;
 
-      const isMd = window.matchMedia('(min-width: 768px) and (max-width: 1023px)').matches
+      const isMd = window.matchMedia(
+        "(min-width: 768px) and (max-width: 1023px)"
+      ).matches;
       if (isMd) {
-        this.isSidebarCollapsed = true
-        return
+        this.isSidebarCollapsed = true;
+        return;
       }
 
-      this.restoreSidebarState()
+      this.restoreSidebarState();
     },
     persistSidebarState() {
-      if (typeof window === 'undefined') return
+      if (typeof window === "undefined") return;
 
-      window.localStorage.setItem(this.storageKey, this.isSidebarCollapsed ? 'true' : 'false')
+      window.localStorage.setItem(
+        this.storageKey,
+        this.isSidebarCollapsed ? "true" : "false"
+      );
     },
     toggleSidebar() {
-      this.isSidebarCollapsed = !this.isSidebarCollapsed
-      this.persistSidebarState()
+      this.isSidebarCollapsed = !this.isSidebarCollapsed;
+      this.persistSidebarState();
     },
     menuItemTag(item) {
-      if (item?.isLink) return 'RouterLink'
-      if (item?.isExternal) return 'a'
-      return 'button'
+      if (item?.isLink) return "RouterLink";
+      if (item?.isExternal) return "a";
+      return "button";
     },
   },
   computed: {
     normalizedMainMenu() {
       return this.mainMenu.map((item, index) => {
-        const isExternal = Boolean(item?.href)
-        const isLink = Boolean(item?.to)
-        const active = Boolean(item?.active)
+        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',
+          label: item?.label || "",
+          description: item?.description || "",
+          icon: item?.icon || "Dot",
           active,
           isExternal,
           isLink,
@@ -379,31 +439,36 @@ export default {
             ? {
                 to: item.to,
                 title: item.title || item.label,
-                'aria-current': active ? 'page' : null,
+                "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,
-                },
+            ? {
+                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',
-        }
-      })
+            ? "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'
+      if (!this.account) return "";
+      return (
+        [this.account.firstName, this.account.lastName]
+          .filter(Boolean)
+          .join(" ")
+          .trim() || "Account"
+      );
     },
     displayEmail() {
-      return this.account?.email || ''
+      return this.account?.email || "";
     },
     collapsedContactTooltip() {
       return `
@@ -418,8 +483,8 @@ export default {
             <div>https://ketekny.gr</div>
           </div>
         </div>
-      `
+      `;
     },
   },
-}
+};
 </script>