ketekny-ui-kit 1.0.85 → 1.0.86
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
type="button"
|
|
8
8
|
:aria-label="expandLabel"
|
|
9
9
|
v-tooltip.right="expandLabel"
|
|
10
|
-
class="fixed top-0 z-[70] hidden h-10 w-10 items-center justify-center rounded-r-full border-white/15 bg-[#0b0c0f] text-white shadow-
|
|
10
|
+
class="fixed top-0 z-[70] hidden h-10 w-10 items-center justify-center rounded-r-full border-white/15 bg-[#0b0c0f] text-white shadow-lg shadow-black/25 transition-all duration-300 hover:bg-[#14161b] lg:left-[42px] lg:translate-x-full lg:flex"
|
|
11
11
|
@click="toggleSidebar"
|
|
12
12
|
>
|
|
13
13
|
<slot name="collapsed-toggle-icon">
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
type="button"
|
|
21
21
|
:aria-label="collapseLabel"
|
|
22
22
|
v-tooltip.left="collapseLabel"
|
|
23
|
-
class="fixed top-0 z-[70] hidden h-10 w-10 items-center justify-center rounded-r-full border-white/15 bg-[#0b0c0f] text-white shadow-
|
|
23
|
+
class="fixed top-0 z-[70] hidden h-10 w-10 items-center justify-center rounded-r-full border-white/15 bg-[#0b0c0f] text-white shadow-lg shadow-black/25 transition-all duration-300 hover:bg-[#14161b] lg:left-[326px] lg:translate-x-full lg:flex"
|
|
24
24
|
@click.stop="toggleSidebar"
|
|
25
25
|
>
|
|
26
26
|
<slot name="toggle-icon">
|
|
@@ -82,7 +82,7 @@
|
|
|
82
82
|
<transition name="mobile-menu-panel">
|
|
83
83
|
<aside
|
|
84
84
|
v-if="!isDesktopViewport && mobileMenuOpen"
|
|
85
|
-
class="fixed inset-y-0 left-0 z-[90] flex h-[100dvh] w-[min(90vw,420px)] max-w-full overflow-hidden shadow-
|
|
85
|
+
class="fixed inset-y-0 left-0 z-[90] flex h-[100dvh] w-[min(90vw,420px)] max-w-full overflow-hidden shadow-[10px_0_30px_rgba(0,0,0,0.2)]"
|
|
86
86
|
role="dialog"
|
|
87
87
|
aria-modal="true"
|
|
88
88
|
>
|
|
@@ -1,13 +1,17 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div
|
|
3
|
-
class="flex h-full w-full flex-col overflow-visible border-r border-[#171a21] bg-[#0b0c0f] text-white shadow-[
|
|
3
|
+
class="flex h-full w-full flex-col overflow-visible border-r border-[#171a21] bg-[#0b0c0f] text-white shadow-[10px_0_28px_rgba(0,0,0,0.18)] transition-all duration-300 ease-out lg:relative lg:z-30 lg:will-change-transform"
|
|
4
4
|
>
|
|
5
5
|
<div class="relative">
|
|
6
6
|
<button
|
|
7
7
|
v-if="logoSrc"
|
|
8
8
|
type="button"
|
|
9
9
|
class="block w-full text-left"
|
|
10
|
-
|
|
10
|
+
:title="collapsed ? null : logoAlt"
|
|
11
|
+
@mouseenter="handleCollapsedContactEnter($event)"
|
|
12
|
+
@mouseleave="handleCollapsedContactLeave"
|
|
13
|
+
@focus="handleCollapsedContactEnter($event)"
|
|
14
|
+
@blur="handleCollapsedContactLeave"
|
|
11
15
|
@click="$emit('logo-click')"
|
|
12
16
|
>
|
|
13
17
|
<img
|
|
@@ -33,7 +37,7 @@
|
|
|
33
37
|
v-model="menuSearchTerm"
|
|
34
38
|
:debounce="0"
|
|
35
39
|
:placeholder="menuSearchPlaceholder"
|
|
36
|
-
input-class="border-[#242834] bg-[#1f1f1f] text-[#eef2f7] placeholder:text-[#8a92a1] shadow-none focus
|
|
40
|
+
input-class="!border-[#242834] !bg-[#1f1f1f] !text-[#eef2f7] !placeholder:text-[#8a92a1] !shadow-none focus:!border-[#3b82f6] focus:!ring-[#3b82f6]/20 dark:!border-[#242834] dark:!bg-[#1f1f1f] dark:!text-[#eef2f7] dark:!placeholder:text-[#8a92a1]"
|
|
37
41
|
icon-class="text-[#8a92a1]"
|
|
38
42
|
/>
|
|
39
43
|
</div>
|
|
@@ -77,6 +81,42 @@
|
|
|
77
81
|
</div>
|
|
78
82
|
|
|
79
83
|
<Teleport to="body">
|
|
84
|
+
<div
|
|
85
|
+
v-if="collapsedContactFlyoutVisible"
|
|
86
|
+
class="fixed z-[200]"
|
|
87
|
+
:style="collapsedContactFlyoutStyle"
|
|
88
|
+
@mouseenter="handleCollapsedContactEnter()"
|
|
89
|
+
@mouseleave="handleCollapsedContactLeave"
|
|
90
|
+
>
|
|
91
|
+
<div
|
|
92
|
+
class="w-[320px] rounded-2xl border border-[#242834] bg-[#0f1116] p-3 shadow-[0_18px_44px_rgba(0,0,0,0.32)]"
|
|
93
|
+
>
|
|
94
|
+
<div class="mb-2 px-2 text-[11px] font-semibold uppercase tracking-[0.24em] text-[#7f8794]">
|
|
95
|
+
KETEKNY AE
|
|
96
|
+
</div>
|
|
97
|
+
<div class="flex flex-col gap-1 px-2 text-sm leading-6 text-white">
|
|
98
|
+
<div class="text-[#d1d5db]">{{ contactAddressLabel }}</div>
|
|
99
|
+
<a href="tel:2103648337" class="text-[#d1d5db] transition hover:text-white hover:underline">
|
|
100
|
+
210 3648 337
|
|
101
|
+
</a>
|
|
102
|
+
<a
|
|
103
|
+
:href="`mailto:${contactEmail}`"
|
|
104
|
+
class="text-[#d1d5db] transition hover:text-white hover:underline"
|
|
105
|
+
>
|
|
106
|
+
{{ contactEmail }}
|
|
107
|
+
</a>
|
|
108
|
+
<a
|
|
109
|
+
href="https://ketekny.gr"
|
|
110
|
+
target="_blank"
|
|
111
|
+
rel="noreferrer"
|
|
112
|
+
class="text-[#d1d5db] transition hover:text-white hover:underline"
|
|
113
|
+
>
|
|
114
|
+
https://ketekny.gr
|
|
115
|
+
</a>
|
|
116
|
+
</div>
|
|
117
|
+
</div>
|
|
118
|
+
</div>
|
|
119
|
+
|
|
80
120
|
<div
|
|
81
121
|
v-if="collapsedFlyoutItem"
|
|
82
122
|
class="fixed z-[200]"
|
|
@@ -85,7 +125,7 @@
|
|
|
85
125
|
@mouseleave="handleCollapsedItemLeave(collapsedFlyoutItem)"
|
|
86
126
|
>
|
|
87
127
|
<div
|
|
88
|
-
class="w-[320px] rounded-2xl border border-[#242834] bg-[#0f1116] p-3 shadow-[
|
|
128
|
+
class="w-[320px] rounded-2xl border border-[#242834] bg-[#0f1116] p-3 shadow-[0_18px_44px_rgba(0,0,0,0.32)]"
|
|
89
129
|
>
|
|
90
130
|
<div class="mb-2 px-2">
|
|
91
131
|
<div class="text-sm font-semibold text-white">
|
|
@@ -344,6 +384,9 @@ export default {
|
|
|
344
384
|
collapsedFlyoutKey: null,
|
|
345
385
|
collapsedFlyoutPosition: null,
|
|
346
386
|
collapsedFlyoutCloseTimer: null,
|
|
387
|
+
collapsedContactFlyoutPosition: null,
|
|
388
|
+
collapsedContactFlyoutVisible: false,
|
|
389
|
+
collapsedContactFlyoutCloseTimer: null,
|
|
347
390
|
menuSearchTerm: "",
|
|
348
391
|
};
|
|
349
392
|
},
|
|
@@ -390,6 +433,14 @@ export default {
|
|
|
390
433
|
top: `${this.collapsedFlyoutPosition.top}px`,
|
|
391
434
|
};
|
|
392
435
|
},
|
|
436
|
+
collapsedContactFlyoutStyle() {
|
|
437
|
+
if (!this.collapsedContactFlyoutPosition) return {};
|
|
438
|
+
|
|
439
|
+
return {
|
|
440
|
+
left: `${this.collapsedContactFlyoutPosition.left}px`,
|
|
441
|
+
top: `${this.collapsedContactFlyoutPosition.top}px`,
|
|
442
|
+
};
|
|
443
|
+
},
|
|
393
444
|
accountDisplayName() {
|
|
394
445
|
if (!this.account) return "";
|
|
395
446
|
|
|
@@ -418,21 +469,6 @@ export default {
|
|
|
418
469
|
contactAddressLabel() {
|
|
419
470
|
return LABELS.contactAddress;
|
|
420
471
|
},
|
|
421
|
-
collapsedContactTooltip() {
|
|
422
|
-
return `
|
|
423
|
-
<div style="min-width: 220px;">
|
|
424
|
-
<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;">
|
|
425
|
-
KETEKNY AE
|
|
426
|
-
</div>
|
|
427
|
-
<div style="display: flex; flex-direction: column; gap: 4px; font-size: 13px; line-height: 1.4; color: rgba(255,255,255,0.9);">
|
|
428
|
-
<div>${LABELS.contactAddress}</div>
|
|
429
|
-
<div>210 3648 337</div>
|
|
430
|
-
<div>${this.contactEmail}</div>
|
|
431
|
-
<div>https://ketekny.gr</div>
|
|
432
|
-
</div>
|
|
433
|
-
</div>
|
|
434
|
-
`;
|
|
435
|
-
},
|
|
436
472
|
},
|
|
437
473
|
watch: {
|
|
438
474
|
menuItems: {
|
|
@@ -459,6 +495,7 @@ export default {
|
|
|
459
495
|
},
|
|
460
496
|
beforeUnmount() {
|
|
461
497
|
this.clearCollapsedFlyoutCloseTimer();
|
|
498
|
+
this.clearCollapsedContactFlyoutCloseTimer();
|
|
462
499
|
},
|
|
463
500
|
methods: {
|
|
464
501
|
menuItemComponent(item) {
|
|
@@ -516,12 +553,46 @@ export default {
|
|
|
516
553
|
top: Math.max(12, rect.top),
|
|
517
554
|
};
|
|
518
555
|
},
|
|
556
|
+
updateCollapsedContactFlyoutPosition(event) {
|
|
557
|
+
const trigger = event?.currentTarget;
|
|
558
|
+
if (!trigger || typeof window === "undefined") return;
|
|
559
|
+
|
|
560
|
+
const rect = trigger.getBoundingClientRect();
|
|
561
|
+
this.collapsedContactFlyoutPosition = {
|
|
562
|
+
left: rect.right + 12,
|
|
563
|
+
top: Math.max(12, rect.top + 8),
|
|
564
|
+
};
|
|
565
|
+
},
|
|
519
566
|
clearCollapsedFlyoutCloseTimer() {
|
|
520
567
|
if (this.collapsedFlyoutCloseTimer) {
|
|
521
568
|
window.clearTimeout(this.collapsedFlyoutCloseTimer);
|
|
522
569
|
this.collapsedFlyoutCloseTimer = null;
|
|
523
570
|
}
|
|
524
571
|
},
|
|
572
|
+
clearCollapsedContactFlyoutCloseTimer() {
|
|
573
|
+
if (this.collapsedContactFlyoutCloseTimer) {
|
|
574
|
+
window.clearTimeout(this.collapsedContactFlyoutCloseTimer);
|
|
575
|
+
this.collapsedContactFlyoutCloseTimer = null;
|
|
576
|
+
}
|
|
577
|
+
},
|
|
578
|
+
handleCollapsedContactEnter(event) {
|
|
579
|
+
if (!this.collapsed || !this.showContactInfo) return;
|
|
580
|
+
|
|
581
|
+
this.clearCollapsedContactFlyoutCloseTimer();
|
|
582
|
+
this.collapsedContactFlyoutVisible = true;
|
|
583
|
+
if (event) {
|
|
584
|
+
this.updateCollapsedContactFlyoutPosition(event);
|
|
585
|
+
}
|
|
586
|
+
},
|
|
587
|
+
handleCollapsedContactLeave() {
|
|
588
|
+
if (!this.collapsedContactFlyoutVisible) return;
|
|
589
|
+
|
|
590
|
+
this.clearCollapsedContactFlyoutCloseTimer();
|
|
591
|
+
this.collapsedContactFlyoutCloseTimer = window.setTimeout(() => {
|
|
592
|
+
this.collapsedContactFlyoutVisible = false;
|
|
593
|
+
this.collapsedContactFlyoutCloseTimer = null;
|
|
594
|
+
}, 180);
|
|
595
|
+
},
|
|
525
596
|
handleCollapsedItemEnter(item, event) {
|
|
526
597
|
if (!item?.hasChildren) return;
|
|
527
598
|
|