cynx-lib 1.3.83 → 1.3.85

package/vue/components/Divider.vue

@@ -1,94 +1,94 @@
-<script setup lang="ts">
-import { computed, useSlots } from "vue";
-
-const SIZE_CONFIG: Record<string, any> = {
-  xs: { hMargin: "8px 0", vMargin: "0 4px", vHeight: "14px", fontSize: ".7rem", padding: "0 8px" },
-  sm: { hMargin: "12px 0", vMargin: "0 8px", vHeight: "18px", fontSize: ".75rem", padding: "0 10px" },
-  md: { hMargin: "16px 0", vMargin: "0 12px", vHeight: "24px", fontSize: ".82rem", padding: "0 12px" },
-  lg: { hMargin: "24px 0", vMargin: "0 16px", vHeight: "32px", fontSize: ".9rem", padding: "0 16px" },
-  xl: { hMargin: "32px 0", vMargin: "0 24px", vHeight: "48px", fontSize: "1rem", padding: "0 20px" },
-};
-
-const props = withDefaults(
-  defineProps<{
-    label?: string;
-    orientation?: "horizontal" | "vertical";
-    align?: "left" | "center" | "right";
-    size?: "xs" | "sm" | "md" | "lg" | "xl";
-    color?: string;
-    thickness?: number | string;
-    variant?: string;
-  }>(),
-  {
-    orientation: "horizontal",
-    align: "center",
-    size: "md",
-    color: "var(--border, #d7d8e0)",
-    thickness: 1,
-    variant: "solid",
-  }
-);
-
-const slots = useSlots();
-const hasContent = computed(() => Boolean(props.label || slots.default));
-const cfg = computed(() => SIZE_CONFIG[props.size] || SIZE_CONFIG.md);
-const thickStr = computed(() =>
-  typeof props.thickness === "number" ? `${props.thickness}px` : props.thickness
-);
-const lineStyle = computed(() => `${thickStr.value} ${props.variant} ${props.color}`);
-const leftFlex = computed(() => (props.align === "left" ? "0 0 16px" : "1"));
-const rightFlex = computed(() => (props.align === "right" ? "0 0 16px" : "1"));
-</script>
-
-<template>
-  <div
-    v-if="orientation === 'vertical'"
-    class="cynx-divider cynx-divider-vertical"
-    :style="{
-      display: 'inline-block',
-      width: 0,
-      height: cfg.vHeight,
-      margin: cfg.vMargin,
-      borderLeft: lineStyle,
-      verticalAlign: 'middle',
-      alignSelf: 'center',
-      flexShrink: 0,
-    }"
-  />
-
-  <div
-    v-else-if="hasContent"
-    class="cynx-divider cynx-divider-horizontal"
-    :style="{
-      display: 'flex',
-      alignItems: 'center',
-      width: '100%',
-      margin: cfg.hMargin,
-    }"
-  >
-    <div :style="{ flex: leftFlex, borderBottom: lineStyle }" />
-    <span
-      :style="{
-        padding: cfg.padding,
-        fontSize: cfg.fontSize,
-        color: 'var(--muted, #9b9daa)',
-        fontWeight: 500,
-        whiteSpace: 'nowrap',
-        lineHeight: 1,
-      }"
-    >
-      <slot>{{ label }}</slot>
-    </span>
-    <div :style="{ flex: rightFlex, borderBottom: lineStyle }" />
-  </div>
-
-  <div
-    v-else
-    class="cynx-divider cynx-divider-horizontal"
-    :style="{
-      width: '100%',
-      margin: cfg.hMargin,
-      borderBottom: lineStyle,
-    }"
-  />
-</template>
+<script setup lang="ts">
+import { computed, useSlots } from "vue";
+
+const SIZE_CONFIG: Record<string, any> = {
+  xs: { hMargin: "8px 0", vMargin: "0 4px", vHeight: "14px", fontSize: ".7rem", padding: "0 8px" },
+  sm: { hMargin: "12px 0", vMargin: "0 8px", vHeight: "18px", fontSize: ".75rem", padding: "0 10px" },
+  md: { hMargin: "16px 0", vMargin: "0 12px", vHeight: "24px", fontSize: ".82rem", padding: "0 12px" },
+  lg: { hMargin: "24px 0", vMargin: "0 16px", vHeight: "32px", fontSize: ".9rem", padding: "0 16px" },
+  xl: { hMargin: "32px 0", vMargin: "0 24px", vHeight: "48px", fontSize: "1rem", padding: "0 20px" },
+};
+
+const props = withDefaults(
+  defineProps<{
+    label?: string;
+    orientation?: "horizontal" | "vertical";
+    align?: "left" | "center" | "right";
+    size?: "xs" | "sm" | "md" | "lg" | "xl";
+    color?: string;
+    thickness?: number | string;
+    variant?: string;
+  }>(),
+  {
+    orientation: "horizontal",
+    align: "center",
+    size: "md",
+    color: "var(--border, #d7d8e0)",
+    thickness: 1,
+    variant: "solid",
+  }
+);
+
+const slots = useSlots();
+const hasContent = computed(() => Boolean(props.label || slots.default));
+const cfg = computed(() => SIZE_CONFIG[props.size] || SIZE_CONFIG.md);
+const thickStr = computed(() =>
+  typeof props.thickness === "number" ? `${props.thickness}px` : props.thickness
+);
+const lineStyle = computed(() => `${thickStr.value} ${props.variant} ${props.color}`);
+const leftFlex = computed(() => (props.align === "left" ? "0 0 16px" : "1"));
+const rightFlex = computed(() => (props.align === "right" ? "0 0 16px" : "1"));
+</script>
+
+<template>
+  <div
+    v-if="orientation === 'vertical'"
+    class="cynx-divider cynx-divider-vertical"
+    :style="{
+      display: 'inline-block',
+      width: 0,
+      height: cfg.vHeight,
+      margin: cfg.vMargin,
+      borderLeft: lineStyle,
+      verticalAlign: 'middle',
+      alignSelf: 'center',
+      flexShrink: 0,
+    }"
+  />
+
+  <div
+    v-else-if="hasContent"
+    class="cynx-divider cynx-divider-horizontal"
+    :style="{
+      display: 'flex',
+      alignItems: 'center',
+      width: '100%',
+      margin: cfg.hMargin,
+    }"
+  >
+    <div :style="{ flex: leftFlex, borderBottom: lineStyle }" />
+    <span
+      :style="{
+        padding: cfg.padding,
+        fontSize: cfg.fontSize,
+        color: 'var(--muted, #9b9daa)',
+        fontWeight: 500,
+        whiteSpace: 'nowrap',
+        lineHeight: 1,
+      }"
+    >
+      <slot>{{ label }}</slot>
+    </span>
+    <div :style="{ flex: rightFlex, borderBottom: lineStyle }" />
+  </div>
+
+  <div
+    v-else
+    class="cynx-divider cynx-divider-horizontal"
+    :style="{
+      width: '100%',
+      margin: cfg.hMargin,
+      borderBottom: lineStyle,
+    }"
+  />
+</template>

package/vue/components/Drawer.vue

@@ -1,243 +1,243 @@
-<script setup lang="ts">
-import { ref, watch, onUnmounted, computed } from "vue";
-import { X } from "lucide-vue-next";
-
-const props = withDefaults(
-  defineProps<{
-    modelValue?: boolean;
-    open?: boolean;
-    title?: string;
-    description?: string;
-    width?: number | string;
-    maxWidth?: number | string;
-    side?: "right" | "left";
-    showClose?: boolean;
-    bodyStyle?: Record<string, any>;
-    style?: Record<string, any>;
-  }>(),
-  {
-    modelValue: false,
-    open: false,
-    title: "",
-    description: "",
-    width: 560,
-    maxWidth: "100vw",
-    side: "right",
-    showClose: true,
-    bodyStyle: () => ({}),
-    style: () => ({}),
-  }
-);
-
-const emit = defineEmits<{
-  (e: "update:modelValue", value: boolean): void;
-  (e: "update:open", value: boolean): void;
-  (e: "close"): void;
-}>();
-
-const isOpen = computed(() => props.modelValue || props.open);
-const closing = ref(false);
-
-const STYLES = `
-@keyframes cynxDrawerFadeIn { from { opacity: 0; } to { opacity: 1; } }
-@keyframes cynxDrawerFadeOut { from { opacity: 1; } to { opacity: 0; } }
-@keyframes cynxDrawerSlideInRight { from { transform: translateX(100%); } to { transform: translateX(0); } }
-@keyframes cynxDrawerSlideOutRight { from { transform: translateX(0); } to { transform: translateX(100%); } }
-@keyframes cynxDrawerSlideInLeft { from { transform: translateX(-100%); } to { transform: translateX(0); } }
-@keyframes cynxDrawerSlideOutLeft { from { transform: translateX(0); } to { transform: translateX(-100%); } }
-`;
-
-let _id = "cynx-drawer-styles";
-function ensureStyles() {
-  if (typeof document === "undefined") return;
-  if (document.getElementById(_id)) return;
-  const tag = document.createElement("style");
-  tag.id = _id;
-  tag.textContent = STYLES;
-  document.head.appendChild(tag);
-}
-
-if (typeof document !== "undefined") ensureStyles();
-
-function close() {
-  if (closing.value) return;
-  closing.value = true;
-  setTimeout(() => {
-    closing.value = false;
-    emit("update:modelValue", false);
-    emit("update:open", false);
-    emit("close");
-  }, 260);
-}
-
-function handleKeydown(e: KeyboardEvent) {
-  if (e.key === "Escape" && isOpen.value) {
-    close();
-  }
-}
-
-watch(
-  isOpen,
-  (val) => {
-    if (typeof document === "undefined") return;
-    if (val) {
-      document.body.style.overflow = "hidden";
-      window.addEventListener("keydown", handleKeydown);
-    } else {
-      document.body.style.overflow = "";
-      window.removeEventListener("keydown", handleKeydown);
-    }
-  },
-  { immediate: true }
-);
-
-onUnmounted(() => {
-  if (typeof document !== "undefined") {
-    document.body.style.overflow = "";
-    window.removeEventListener("keydown", handleKeydown);
-  }
-});
-
-const resolvedWidth = computed(() => {
-  if (typeof props.width === "number") return `${props.width}px`;
-  return props.width;
-});
-
-const slideInAnim = computed(() =>
-  props.side === "left" ? "cynxDrawerSlideInLeft" : "cynxDrawerSlideInRight"
-);
-const slideOutAnim = computed(() =>
-  props.side === "left" ? "cynxDrawerSlideOutLeft" : "cynxDrawerSlideOutRight"
-);
-</script>
-
-<template>
-  <Teleport to="body">
-    <div
-      v-if="isOpen || closing"
-      class="cynx-drawer-backdrop"
-      :style="{
-        position: 'fixed',
-        inset: 0,
-        background: 'rgba(20, 22, 41, .45)',
-        zIndex: 8500,
-        display: 'flex',
-        justifyContent: side === 'left' ? 'flex-start' : 'flex-end',
-        animation: `${closing ? 'cynxDrawerFadeOut' : 'cynxDrawerFadeIn'} .26s ease forwards`,
-      }"
-      @mousedown.self="close"
-    >
-      <div
-        class="cynx-drawer-panel"
-        :style="{
-          background: 'var(--surface, #ffffff)',
-          borderLeft: side === 'right' ? '1px solid var(--border, var(--bd, #e2e8f0))' : 'none',
-          borderRight: side === 'left' ? '1px solid var(--border, var(--bd, #e2e8f0))' : 'none',
-          width: resolvedWidth,
-          maxWidth: '100vw',
-          height: '100%',
-          boxShadow: 'var(--shadow-lg, 0 20px 60px rgba(0, 0, 0, .25))',
-          display: 'flex',
-          flexDirection: 'column',
-          overflow: 'hidden',
-          animation: `${closing ? slideOutAnim : slideInAnim} .26s cubic-bezier(.16, 1, .3, 1) forwards`,
-          ...style,
-        }"
-        @mousedown.stop
-      >
-        <!-- Header -->
-        <div
-          class="cynx-drawer-hdr"
-          :style="{
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-            padding: '16px 20px',
-            borderBottom: '1px solid var(--border-light, #ebebf0)',
-            flexShrink: 0,
-          }"
-        >
-          <slot name="header">
-            <div style="display: flex; flex-direction: column; gap: 2px;">
-              <span
-                class="cynx-drawer-title"
-                :style="{
-                  fontSize: '1rem',
-                  fontWeight: 700,
-                  letterSpacing: '-.01em',
-                  color: 'var(--t, var(--primary-text, #0f111c))',
-                }"
-              >
-                {{ title }}
-              </span>
-              <span
-                v-if="description"
-                class="cynx-drawer-desc"
-                :style="{
-                  fontSize: '.75rem',
-                  color: 'var(--muted, #797b8d)',
-                }"
-              >
-                {{ description }}
-              </span>
-            </div>
-          </slot>
-
-          <button
-            v-if="showClose"
-            type="button"
-            class="cynx-drawer-close"
-            :style="{
-              background: 'none',
-              border: 'none',
-              cursor: 'pointer',
-              padding: '6px',
-              borderRadius: '6px',
-              color: 'var(--muted, #797b8d)',
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              transition: 'all .14s',
-            }"
-            @click="close"
-          >
-            <X :size="18" />
-          </button>
-        </div>
-
-        <!-- Body -->
-        <div
-          class="cynx-drawer-body custom-scrollbar"
-          :style="{
-            padding: '20px',
-            overflowX: 'hidden',
-            overflowY: 'auto',
-            flex: '1 1 auto',
-            minHeight: 0,
-            color: 'var(--t, var(--primary-text, #0f111c))',
-            ...bodyStyle,
-          }"
-        >
-          <slot />
-        </div>
-
-        <!-- Footer -->
-        <div
-          v-if="$slots.footer"
-          class="cynx-drawer-footer"
-          :style="{
-            display: 'flex',
-            justifyContent: 'flex-end',
-            gap: '8px',
-            padding: '14px 20px',
-            borderTop: '1px solid var(--border-light, #ebebf0)',
-            background: 'var(--grey-1, #f5f5f8)',
-            flexShrink: 0,
-          }"
-        >
-          <slot name="footer" />
-        </div>
-      </div>
-    </div>
-  </Teleport>
-</template>
+<script setup lang="ts">
+import { ref, watch, onUnmounted, computed } from "vue";
+import { X } from "lucide-vue-next";
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: boolean;
+    open?: boolean;
+    title?: string;
+    description?: string;
+    width?: number | string;
+    maxWidth?: number | string;
+    side?: "right" | "left";
+    showClose?: boolean;
+    bodyStyle?: Record<string, any>;
+    style?: Record<string, any>;
+  }>(),
+  {
+    modelValue: false,
+    open: false,
+    title: "",
+    description: "",
+    width: 560,
+    maxWidth: "100vw",
+    side: "right",
+    showClose: true,
+    bodyStyle: () => ({}),
+    style: () => ({}),
+  }
+);
+
+const emit = defineEmits<{
+  (e: "update:modelValue", value: boolean): void;
+  (e: "update:open", value: boolean): void;
+  (e: "close"): void;
+}>();
+
+const isOpen = computed(() => props.modelValue || props.open);
+const closing = ref(false);
+
+const STYLES = `
+@keyframes cynxDrawerFadeIn { from { opacity: 0; } to { opacity: 1; } }
+@keyframes cynxDrawerFadeOut { from { opacity: 1; } to { opacity: 0; } }
+@keyframes cynxDrawerSlideInRight { from { transform: translateX(100%); } to { transform: translateX(0); } }
+@keyframes cynxDrawerSlideOutRight { from { transform: translateX(0); } to { transform: translateX(100%); } }
+@keyframes cynxDrawerSlideInLeft { from { transform: translateX(-100%); } to { transform: translateX(0); } }
+@keyframes cynxDrawerSlideOutLeft { from { transform: translateX(0); } to { transform: translateX(-100%); } }
+`;
+
+let _id = "cynx-drawer-styles";
+function ensureStyles() {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(_id)) return;
+  const tag = document.createElement("style");
+  tag.id = _id;
+  tag.textContent = STYLES;
+  document.head.appendChild(tag);
+}
+
+if (typeof document !== "undefined") ensureStyles();
+
+function close() {
+  if (closing.value) return;
+  closing.value = true;
+  setTimeout(() => {
+    closing.value = false;
+    emit("update:modelValue", false);
+    emit("update:open", false);
+    emit("close");
+  }, 260);
+}
+
+function handleKeydown(e: KeyboardEvent) {
+  if (e.key === "Escape" && isOpen.value) {
+    close();
+  }
+}
+
+watch(
+  isOpen,
+  (val) => {
+    if (typeof document === "undefined") return;
+    if (val) {
+      document.body.style.overflow = "hidden";
+      window.addEventListener("keydown", handleKeydown);
+    } else {
+      document.body.style.overflow = "";
+      window.removeEventListener("keydown", handleKeydown);
+    }
+  },
+  { immediate: true }
+);
+
+onUnmounted(() => {
+  if (typeof document !== "undefined") {
+    document.body.style.overflow = "";
+    window.removeEventListener("keydown", handleKeydown);
+  }
+});
+
+const resolvedWidth = computed(() => {
+  if (typeof props.width === "number") return `${props.width}px`;
+  return props.width;
+});
+
+const slideInAnim = computed(() =>
+  props.side === "left" ? "cynxDrawerSlideInLeft" : "cynxDrawerSlideInRight"
+);
+const slideOutAnim = computed(() =>
+  props.side === "left" ? "cynxDrawerSlideOutLeft" : "cynxDrawerSlideOutRight"
+);
+</script>
+
+<template>
+  <Teleport to="body">
+    <div
+      v-if="isOpen || closing"
+      class="cynx-drawer-backdrop"
+      :style="{
+        position: 'fixed',
+        inset: 0,
+        background: 'rgba(20, 22, 41, .45)',
+        zIndex: 8500,
+        display: 'flex',
+        justifyContent: side === 'left' ? 'flex-start' : 'flex-end',
+        animation: `${closing ? 'cynxDrawerFadeOut' : 'cynxDrawerFadeIn'} .26s ease forwards`,
+      }"
+      @mousedown.self="close"
+    >
+      <div
+        class="cynx-drawer-panel"
+        :style="{
+          background: 'var(--surface, #ffffff)',
+          borderLeft: side === 'right' ? '1px solid var(--border, var(--bd, #e2e8f0))' : 'none',
+          borderRight: side === 'left' ? '1px solid var(--border, var(--bd, #e2e8f0))' : 'none',
+          width: resolvedWidth,
+          maxWidth: '100vw',
+          height: '100%',
+          boxShadow: 'var(--shadow-lg, 0 20px 60px rgba(0, 0, 0, .25))',
+          display: 'flex',
+          flexDirection: 'column',
+          overflow: 'hidden',
+          animation: `${closing ? slideOutAnim : slideInAnim} .26s cubic-bezier(.16, 1, .3, 1) forwards`,
+          ...style,
+        }"
+        @mousedown.stop
+      >
+        <!-- Header -->
+        <div
+          class="cynx-drawer-hdr"
+          :style="{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            padding: '16px 20px',
+            borderBottom: '1px solid var(--border-light, #ebebf0)',
+            flexShrink: 0,
+          }"
+        >
+          <slot name="header">
+            <div style="display: flex; flex-direction: column; gap: 2px;">
+              <span
+                class="cynx-drawer-title"
+                :style="{
+                  fontSize: '1rem',
+                  fontWeight: 700,
+                  letterSpacing: '-.01em',
+                  color: 'var(--t, var(--primary-text, #0f111c))',
+                }"
+              >
+                {{ title }}
+              </span>
+              <span
+                v-if="description"
+                class="cynx-drawer-desc"
+                :style="{
+                  fontSize: '.75rem',
+                  color: 'var(--muted, #797b8d)',
+                }"
+              >
+                {{ description }}
+              </span>
+            </div>
+          </slot>
+
+          <button
+            v-if="showClose"
+            type="button"
+            class="cynx-drawer-close"
+            :style="{
+              background: 'none',
+              border: 'none',
+              cursor: 'pointer',
+              padding: '6px',
+              borderRadius: '6px',
+              color: 'var(--muted, #797b8d)',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              transition: 'all .14s',
+            }"
+            @click="close"
+          >
+            <X :size="18" />
+          </button>
+        </div>
+
+        <!-- Body -->
+        <div
+          class="cynx-drawer-body custom-scrollbar"
+          :style="{
+            padding: '20px',
+            overflowX: 'hidden',
+            overflowY: 'auto',
+            flex: '1 1 auto',
+            minHeight: 0,
+            color: 'var(--t, var(--primary-text, #0f111c))',
+            ...bodyStyle,
+          }"
+        >
+          <slot />
+        </div>
+
+        <!-- Footer -->
+        <div
+          v-if="$slots.footer"
+          class="cynx-drawer-footer"
+          :style="{
+            display: 'flex',
+            justifyContent: 'flex-end',
+            gap: '8px',
+            padding: '14px 20px',
+            borderTop: '1px solid var(--border-light, #ebebf0)',
+            background: 'var(--grey-1, #f5f5f8)',
+            flexShrink: 0,
+          }"
+        >
+          <slot name="footer" />
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>