cynx-lib 1.3.71 → 1.3.72

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cynx-lib",
-  "version": "1.3.71",
+  "version": "1.3.72",
   "type": "module",
   "main": "./index.cjs",
   "module": "./index.js",

package/vue/components/DatePicker.vue

@@ -9,6 +9,7 @@ import {
   useSlots,
 } from "vue";
 import { ChevronLeft, ChevronRight, Calendar, Clock } from "lucide-vue-next";
+import TimePicker from "./TimePicker.vue";
 
 export interface DatePickerBadge {
   dot?: boolean;
@@ -1107,28 +1108,37 @@ const posMode = computed(() => {
               gap: 5px;
               font-size: .76rem;
               color: var(--muted, #797b8d);
-              fontWeight: 600;
+              font-weight: 600;
             "
           >
             <Clock :size="13" style="opacity: 0.85;" />
             <span>{{ loc.time || 'Time:' }}</span>
           </div>
-          <button
-            type="button"
-            style="
-              padding: 4px 10px;
-              border-radius: var(--radxs, 6px);
-              background: var(--accent, #12675D);
-              color: var(--def-btn-text, #ffffff);
-              border: none;
-              font-size: 11.5px;
-              font-weight: 600;
-              cursor: pointer;
-            "
-            @click="open = false; view = 'day';"
-          >
-            {{ loc.ok || 'OK' }}
-          </button>
+          <div style="display: flex; align-items: center; gap: 6px;">
+            <TimePicker
+              :model-value="timeValue || ''"
+              :show-seconds="showSeconds"
+              :placeholder="timePlaceholder || '00:00:00'"
+              size="sm"
+              @update:model-value="(t) => { emit('update:timeValue', t); emit('time-change', t); }"
+            />
+            <button
+              type="button"
+              style="
+                padding: 4px 10px;
+                border-radius: var(--radxs, 6px);
+                background: var(--accent, #12675D);
+                color: var(--def-btn-text, #ffffff);
+                border: none;
+                font-size: 11.5px;
+                font-weight: 600;
+                cursor: pointer;
+              "
+              @click="open = false; view = 'day';"
+            >
+              {{ loc.ok || 'OK' }}
+            </button>
+          </div>
         </div>
       </div>
     </Teleport>

package/vue/components/TimePicker.vue

@@ -0,0 +1,395 @@
+<script setup lang="ts">
+import { ref, computed, watch, onMounted, onBeforeUnmount, nextTick } from "vue";
+import { ChevronDown, Check, X, Clock } from "lucide-vue-next";
+
+function pad(n: number | string): string {
+  return String(n).padStart(2, "0");
+}
+
+function parseTime(val?: string, showSeconds = false) {
+  if (!val || typeof val !== "string") {
+    return { h: "00", m: "00", s: "00" };
+  }
+  const clean = val.trim();
+  const parts = clean.split(":").map((p) => p.trim());
+  const hNum = Math.min(23, Math.max(0, parseInt(parts[0], 10) || 0));
+  const mNum = Math.min(59, Math.max(0, parseInt(parts[1], 10) || 0));
+  const sNum = Math.min(59, Math.max(0, parseInt(parts[2], 10) || 0));
+  return {
+    h: pad(hNum),
+    m: pad(mNum),
+    s: pad(sNum),
+  };
+}
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: string;
+    value?: string;
+    showSeconds?: boolean;
+    disabled?: boolean;
+    size?: "xs" | "sm" | "md" | "lg";
+    placeholder?: string;
+  }>(),
+  {
+    modelValue: "",
+    value: "",
+    showSeconds: false,
+    disabled: false,
+    size: "md",
+    placeholder: "",
+  }
+);
+
+const emit = defineEmits<{
+  (e: "update:modelValue", val: string): void;
+  (e: "update:value", val: string): void;
+  (e: "change", val: string): void;
+}>();
+
+const currentVal = computed(() => {
+  return props.modelValue !== undefined && props.modelValue !== ""
+    ? props.modelValue
+    : props.value;
+});
+
+const open = ref(false);
+const btnRef = ref<HTMLElement | null>(null);
+const dropRef = ref<HTMLElement | null>(null);
+const pos = ref({ top: 0, left: 0 });
+
+const hours = Array.from({ length: 24 }, (_, i) => pad(i));
+const minutes = Array.from({ length: 60 }, (_, i) => pad(i));
+const seconds = Array.from({ length: 60 }, (_, i) => pad(i));
+
+const activeTime = ref(parseTime(currentVal.value, props.showSeconds));
+
+watch(
+  currentVal,
+  (newVal) => {
+    activeTime.value = parseTime(newVal, props.showSeconds);
+  },
+  { immediate: true }
+);
+
+const displayLabel = computed(() => {
+  if (!currentVal.value && props.placeholder) return props.placeholder;
+  const t = activeTime.value;
+  return props.showSeconds ? `${t.h}:${t.m}:${t.s}` : `${t.h}:${t.m}`;
+});
+
+function emitTime() {
+  const t = activeTime.value;
+  const result = props.showSeconds ? `${t.h}:${t.m}:${t.s}` : `${t.h}:${t.m}`;
+  emit("update:modelValue", result);
+  emit("update:value", result);
+  emit("change", result);
+}
+
+function selectHour(h: string) {
+  activeTime.value = h;
+  emitTime();
+}
+
+function selectMinute(m: string) {
+  activeTime.value.m = m;
+  emitTime();
+}
+
+function selectSecond(s: string) {
+  activeTime.value.s = s;
+  emitTime();
+}
+
+function resetTime() {
+  activeTime.value = { h: "00", m: "00", s: "00" };
+  emitTime();
+}
+
+function done() {
+  open.value = false;
+}
+
+const calcPos = () => {
+  if (!btnRef.value) return;
+  const r = btnRef.value.getBoundingClientRect();
+  const dropW = props.showSeconds ? 220 : 160;
+  const dropH = 220;
+
+  let left = r.left;
+  if (left + dropW > window.innerWidth - 12) {
+    left = Math.max(12, window.innerWidth - dropW - 12);
+  }
+  if (left < 12) left = 12;
+
+  let top = r.bottom + 4;
+  if (top + dropH > window.innerHeight - 12 && r.top - dropH - 4 > 12) {
+    top = r.top - dropH - 4;
+  }
+
+  pos.value = { top, left };
+};
+
+const togglePicker = () => {
+  if (props.disabled) return;
+  if (!open.value) calcPos();
+  open.value = !open.value;
+};
+
+const handleWindowClick = (e: MouseEvent) => {
+  if (!open.value) return;
+  const target = e.target as Node;
+  if (btnRef.value?.contains(target)) return;
+  if (dropRef.value?.contains(target)) return;
+  open.value = false;
+};
+
+const handleKeyDown = (e: KeyboardEvent) => {
+  if (e.key === "Escape" && open.value) {
+    open.value = false;
+  }
+};
+
+watch(open, (isOpen) => {
+  if (isOpen) {
+    calcPos();
+    window.addEventListener("scroll", calcPos, true);
+    window.addEventListener("resize", calcPos);
+    document.addEventListener("mousedown", handleWindowClick, true);
+    document.addEventListener("keydown", handleKeyDown);
+    nextTick(calcPos);
+  } else {
+    window.removeEventListener("scroll", calcPos, true);
+    window.removeEventListener("resize", calcPos);
+    document.removeEventListener("mousedown", handleWindowClick, true);
+    document.removeEventListener("keydown", handleKeyDown);
+  }
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener("scroll", calcPos, true);
+  window.removeEventListener("resize", calcPos);
+  document.removeEventListener("mousedown", handleWindowClick, true);
+  document.removeEventListener("keydown", handleKeyDown);
+});
+</script>
+
+<template>
+  <div style="position: relative; display: inline-flex;">
+    <!-- Trigger Button -->
+    <button
+      ref="btnRef"
+      type="button"
+      :disabled="disabled"
+      style="
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        padding: 0 8px;
+        height: 28px;
+        font-size: 12px;
+        font-weight: 600;
+        border-radius: var(--radxs, 6px);
+        border: 1px solid var(--border, #e2e8f0);
+        background: var(--surface, #ffffff);
+        color: var(--primary-text, #0f172a);
+        cursor: pointer;
+        user-select: none;
+        transition: border-color .14s;
+      "
+      :style="{
+        borderColor: open ? 'var(--accent, #12675D)' : 'var(--border, #e2e8f0)',
+        opacity: disabled ? 0.45 : 1,
+        cursor: disabled ? 'not-allowed' : 'pointer',
+      }"
+      @click="togglePicker"
+    >
+      <span style="font-variant-numeric: tabular-nums;">
+        {{ displayLabel }}
+      </span>
+      <ChevronDown
+        :size="12"
+        style="
+          color: var(--muted, #797b8d);
+          transition: transform .18s;
+        "
+        :style="{
+          transform: open ? 'rotate(180deg)' : 'none',
+        }"
+      />
+    </button>
+
+    <!-- Dropdown Popup via Teleport -->
+    <Teleport to="body">
+      <div
+        v-if="open"
+        ref="dropRef"
+        style="
+          position: fixed;
+          z-index: 999999;
+          background: var(--surface, #ffffff);
+          border: 1px solid var(--border, #e2e8f0);
+          border-radius: 10px;
+          box-shadow: var(--shadow-lg, 0 10px 25px rgba(0,0,0,0.15));
+          padding: 8px;
+          box-sizing: border-box;
+          user-select: none;
+          font-family: var(--sans, inherit);
+        "
+        :style="{
+          top: `${pos.top}px`,
+          left: `${pos.left}px`,
+          width: showSeconds ? '220px' : '155px',
+        }"
+      >
+        <!-- Columns Header & Lists -->
+        <div
+          style="display: grid; gap: 4px;"
+          :style="{
+            gridTemplateColumns: showSeconds ? '1fr 1fr 1fr' : '1fr 1fr',
+          }"
+        >
+          <!-- Hours Column -->
+          <div>
+            <div style="font-size: 10.5px; font-weight: 600; color: var(--muted, #797b8d); text-align: center; margin-bottom: 3px;">
+              Час
+            </div>
+            <div class="custom-scrollbar" style="max-height: 140px; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; padding-right: 2px;">
+              <button
+                v-for="h in hours"
+                :key="h"
+                type="button"
+                style="
+                  padding: 3px 0;
+                  border-radius: var(--radxs, 4px);
+                  border: none;
+                  font-size: 11.5px;
+                  cursor: pointer;
+                  text-align: center;
+                  transition: background .12s, color .12s;
+                "
+                :style="{
+                  fontWeight: activeTime.h === h ? 700 : 400,
+                  background: activeTime.h === h ? 'var(--accent, #12675D)' : 'transparent',
+                  color: activeTime.h === h ? '#ffffff' : 'var(--primary-text, #0f172a)',
+                }"
+                @click="selectHour(h)"
+              >
+                {{ h }}
+              </button>
+            </div>
+          </div>
+
+          <!-- Minutes Column -->
+          <div>
+            <div style="font-size: 10.5px; font-weight: 600; color: var(--muted, #797b8d); text-align: center; margin-bottom: 3px;">
+              Мин
+            </div>
+            <div class="custom-scrollbar" style="max-height: 140px; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; padding-right: 2px;">
+              <button
+                v-for="m in minutes"
+                :key="m"
+                type="button"
+                style="
+                  padding: 3px 0;
+                  border-radius: var(--radxs, 4px);
+                  border: none;
+                  font-size: 11.5px;
+                  cursor: pointer;
+                  text-align: center;
+                  transition: background .12s, color .12s;
+                "
+                :style="{
+                  fontWeight: activeTime.m === m ? 700 : 400,
+                  background: activeTime.m === m ? 'var(--accent, #12675D)' : 'transparent',
+                  color: activeTime.m === m ? '#ffffff' : 'var(--primary-text, #0f172a)',
+                }"
+                @click="selectMinute(m)"
+              >
+                {{ m }}
+              </button>
+            </div>
+          </div>
+
+          <!-- Seconds Column -->
+          <div v-if="showSeconds">
+            <div style="font-size: 10.5px; font-weight: 600; color: var(--muted, #797b8d); text-align: center; margin-bottom: 3px;">
+              Сек
+            </div>
+            <div class="custom-scrollbar" style="max-height: 140px; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; padding-right: 2px;">
+              <button
+                v-for="s in seconds"
+                :key="s"
+                type="button"
+                style="
+                  padding: 3px 0;
+                  border-radius: var(--radxs, 4px);
+                  border: none;
+                  font-size: 11.5px;
+                  cursor: pointer;
+                  text-align: center;
+                  transition: background .12s, color .12s;
+                "
+                :style="{
+                  fontWeight: activeTime.s === s ? 700 : 400,
+                  background: activeTime.s === s ? 'var(--accent, #12675D)' : 'transparent',
+                  color: activeTime.s === s ? '#ffffff' : 'var(--primary-text, #0f172a)',
+                }"
+                @click="selectSecond(s)"
+              >
+                {{ s }}
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <!-- Footer Actions -->
+        <div
+          style="
+            margin-top: 6px;
+            padding-top: 5px;
+            border-top: 1px solid var(--border-light, #ebebf0);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+          "
+        >
+          <button
+            type="button"
+            style="
+              background: none;
+              border: none;
+              cursor: pointer;
+              color: var(--danger, #f64747);
+              font-size: 11px;
+              font-weight: 500;
+              padding: 2px 4px;
+            "
+            @click="resetTime"
+          >
+            Сбросить
+          </button>
+          <button
+            type="button"
+            style="
+              background: var(--accent, #12675D);
+              color: #ffffff;
+              border: none;
+              border-radius: var(--radxs, 4px);
+              padding: 3px 8px;
+              font-size: 11px;
+              font-weight: 600;
+              cursor: pointer;
+              display: inline-flex;
+              align-items: center;
+              gap: 3px;
+            "
+            @click="done"
+          >
+            <Check :size="12" /> Готово
+          </button>
+        </div>
+      </div>
+    </Teleport>
+  </div>
+</template>

package/vue/index.js

@@ -14,6 +14,7 @@ import Modal from "./components/Modal.vue";
 import Drawer from "./components/Drawer.vue";
 import Toggle from "./components/Toggle.vue";
 import DatePicker from "./components/DatePicker.vue";
+import TimePicker from "./components/TimePicker.vue";
 import LinearProgress from "./components/LinearProgress.vue";
 import CircularProgress from "./components/CircularProgress.vue";
 import StatusTag from "./components/StatusTag.vue";
@@ -37,6 +38,7 @@ export {
   Drawer,
   Toggle,
   DatePicker,
+  TimePicker,
   LinearProgress,
   CircularProgress,
   StatusTag,
@@ -66,6 +68,7 @@ export default {
   Drawer,
   Toggle,
   DatePicker,
+  TimePicker,
   LinearProgress,
   CircularProgress,
   StatusTag,