cynx-lib 1.3.66 → 1.3.68

package/vue/components/Drawer.vue

@@ -0,0 +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>

package/vue/components/Select.vue

@@ -64,6 +64,7 @@ const props = withDefaults(
     placeholder?: string;
     disabled?: boolean;
     multi?: boolean;
+    multiple?: boolean;
     searchable?: boolean;
     clearable?: boolean;
     size?: "xs" | "sm" | "md" | "lg";
@@ -82,6 +83,7 @@ const props = withDefaults(
     placeholder: "Select...",
     disabled: false,
     multi: false,
+    multiple: false,
     searchable: false,
     clearable: false,
     size: "md",
@@ -118,9 +120,11 @@ const currentVal = computed(() => {
   return props.modelValue !== undefined ? props.modelValue : props.value;
 });
 
+const isMulti = computed(() => Boolean(props.multi || props.multiple));
+
 const selectedValues = computed<any[]>(() => {
   const v = currentVal.value;
-  if (props.multi) {
+  if (isMulti.value) {
     return Array.isArray(v) ? v : [];
   }
   return v !== undefined && v !== null && v !== "" ? [v] : [];
@@ -133,7 +137,7 @@ function getLabel(optVal: any) {
 
 function isSelected(optVal: any) {
   const v = currentVal.value;
-  return props.multi ? (Array.isArray(v) && v.includes(optVal)) : v === optVal;
+  return isMulti.value ? (Array.isArray(v) && v.includes(optVal)) : v === optVal;
 }
 
 const radiusVal = computed(() => {
@@ -279,7 +283,7 @@ function handleOpen() {
 }
 
 function toggleOption(optVal: any) {
-  if (props.multi) {
+  if (isMulti.value) {
     const arr = Array.isArray(currentVal.value) ? currentVal.value : [];
     const next = arr.includes(optVal)
       ? arr.filter((v: any) => v !== optVal)
@@ -304,7 +308,7 @@ function removeTag(e: MouseEvent, valToRemove: any) {
 
 function handleClear(e: MouseEvent) {
   e.stopPropagation();
-  const next = props.multi ? [] : "";
+  const next = isMulti.value ? [] : "";
   emit("update:modelValue", next);
   emit("change", next);
   emit("clear");
@@ -385,10 +389,10 @@ function handleInputKeyDown(e: KeyboardEvent) {
         <slot
           v-if="slots.label && selectedValues.length > 0"
           name="label"
-          :value="multi ? selectedValues : selectedValues[0]"
+          :value="isMulti ? selectedValues : selectedValues[0]"
         />
 
-        <template v-else-if="multi && selectedValues.length > 0">
+        <template v-else-if="isMulti && selectedValues.length > 0">
           <span
             v-if="showCount"
             style="

package/vue/index.js

@@ -11,7 +11,9 @@ import Table from "./components/Table.vue";
 import Pagination from "./components/Pagination.vue";
 import Skeleton from "./components/Skeleton.vue";
 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 { XTable, XThead, XTbody, XTr, XTh, XTd } from "./components/XTable.vue";
 import { useAutoSkeletonRows } from "./composables/useAutoSkeletonRows";
 
@@ -28,7 +30,9 @@ export {
   Pagination,
   Skeleton,
   Modal,
+  Drawer,
   Toggle,
+  DatePicker,
   XTable,
   XThead,
   XTbody,
@@ -51,7 +55,9 @@ export default {
   Pagination,
   Skeleton,
   Modal,
+  Drawer,
   Toggle,
+  DatePicker,
   XTable,
   XThead,
   XTbody,