cynx-lib 1.3.84 → 1.3.85

package/vue/components/TimePicker.vue

@@ -1,399 +1,399 @@
-<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 = 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;
-  } else if (top + dropH > window.innerHeight - 12) {
-    top = Math.max(12, window.innerHeight - dropH - 12);
-  }
-  if (top < 12) top = 12;
-
-  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"
-        class="cynx-timepicker-drop"
-        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>
+<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 = 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;
+  } else if (top + dropH > window.innerHeight - 12) {
+    top = Math.max(12, window.innerHeight - dropH - 12);
+  }
+  if (top < 12) top = 12;
+
+  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"
+        class="cynx-timepicker-drop"
+        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>