adata-ui 3.1.61 → 3.1.63

package/dist/module.json

@@ -5,7 +5,7 @@
     "nuxt": ">=3.16.0"
   },
   "failOnWarn": false,
-  "version": "3.1.61",
+  "version": "3.1.63",
   "builder": {
     "@nuxt/module-builder": "1.0.1",
     "unbuild": "3.5.0"

package/dist/runtime/components/DigitBadge.vue.d.ts

@@ -13,9 +13,9 @@ export type StateType = {
 declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
     size: "sm" | "md" | "lg";
     type: "primary" | "success" | "danger" | "gray" | "orange" | "warning";
-    disabled: boolean;
     view: "default" | "inverted";
-    customClasses: string;
+    disabled: boolean;
     prefix: string;
+    customClasses: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/runtime/components/Drawer.vue

@@ -0,0 +1,77 @@
+<script setup>
+import { DrawerRoot, DrawerPortal, DrawerOverlay, DrawerContent, DrawerHandle } from "vaul-vue";
+import { DialogContent } from "reka-ui";
+import { computed } from "#imports";
+const props = defineProps({
+  side: { type: String, required: false, default: "bottom" },
+  width: { type: Number, required: false, default: 300 },
+  height: { type: Number, required: false, default: 300 }
+});
+const open = defineModel({ type: Boolean, ...{ default: false } });
+const sizeStyle = computed(() => {
+  if (["left", "right"].includes(props.side)) {
+    return { width: `${props.width}px`, height: "100%" };
+  }
+  return { width: "100%", height: `${props.height}px` };
+});
+const POSITION_CLASSES = {
+  right: "top-0 bottom-0 right-0",
+  left: "top-0 bottom-0 left-0",
+  top: "top-0 left-0 right-0",
+  bottom: "bottom-0 left-0 right-0"
+};
+const CORNER_CLASSES = {
+  left: "rounded-r-2xl",
+  right: "rounded-l-2xl",
+  top: "rounded-b-2xl",
+  bottom: "rounded-t-2xl"
+};
+const HANDLE_POSITION_CLASSES = {
+  top: "absolute -bottom-[calc(100%-12px)]",
+  bottom: "absolute top-2",
+  left: "absolute top-1/2 -translate-y-1/2 rotate-90 !mr-0",
+  right: "absolute top-1/2 -translate-y-1/2 rotate-90 !ml-0"
+};
+</script>
+
+<template>
+  <drawer-root
+    v-model:open="open"
+    :direction="side"
+  >
+    <drawer-portal>
+      <drawer-overlay class="fixed inset-0 bg-black/50" />
+
+      <drawer-content
+        :style="sizeStyle"
+        :class="[
+  'fixed bg-white dark:bg-gray-900 shadow-2xl',
+  POSITION_CLASSES[props.side],
+  CORNER_CLASSES[props.side]
+]"
+      >
+        <drawer-handle
+          :class="[
+  HANDLE_POSITION_CLASSES[props.side]
+]"
+        />
+
+        <div
+          v-if="$slots.header"
+          class="border-b border-deepblue-900/5 dark:border-gray-200/5 p-4"
+        >
+          <slot name="header" />
+        </div>
+        <div class="p-4">
+          <slot name="default" />
+        </div>
+        <div
+          v-if="$slots.footer"
+          class="border-b border-deepblue-900/5 dark:border-gray-200/5 p-4"
+        >
+          <slot name="footer" />
+        </div>
+      </drawer-content>
+    </drawer-portal>
+  </drawer-root>
+</template>

package/dist/runtime/components/{ASidePanel.vue.d.ts → Drawer.vue.d.ts}

@@ -1,23 +1,27 @@
 type __VLS_Props = {
     side?: 'right' | 'left' | 'top' | 'bottom';
-    width?: string;
-    height?: string;
+    width?: number;
+    height?: number;
 };
 type __VLS_PublicProps = __VLS_Props & {
     modelValue?: boolean;
 };
-declare var __VLS_30: {};
+declare var __VLS_22: {}, __VLS_24: {}, __VLS_26: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_30) => any;
+    header?: (props: typeof __VLS_22) => any;
+} & {
+    default?: (props: typeof __VLS_24) => any;
+} & {
+    footer?: (props: typeof __VLS_26) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
 }>, {
+    width: number;
+    height: number;
     side: "right" | "left" | "top" | "bottom";
-    width: string;
-    height: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/runtime/components/Header.vue.d.ts

@@ -23,7 +23,15 @@ type __VLS_Slots = {} & {
 } & {
     notifications?: (props: typeof __VLS_54) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {
+declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    search: (...args: any[]) => void;
+    logout: (...args: any[]) => void;
+    login: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onSearch?: ((...args: any[]) => any) | undefined;
+    onLogout?: ((...args: any[]) => any) | undefined;
+    onLogin?: ((...args: any[]) => any) | undefined;
+}>, {
     daysRemaining: number;
     limitRemaining: number;
     isAuthenticated: boolean;

package/dist/runtime/components/Modal.vue.d.ts

@@ -21,11 +21,17 @@ type __VLS_Slots = {} & {
 } & {
     footer?: (props: typeof __VLS_22) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{}>, {
+declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (...args: any[]) => void;
+    "update:modelValue": (value: boolean | undefined) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onClose?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: boolean | undefined) => any) | undefined;
+}>, {
     name: string;
-    width: string | number;
-    transition: boolean;
     title: string;
+    transition: boolean;
+    width: string | number;
     overlay: boolean;
     preventClose: boolean;
     fullscreen: boolean;

package/dist/runtime/components/SidePanel.vue

@@ -1,370 +1,140 @@
 <script setup>
-import { disableBodyScroll, enableBodyScroll } from "body-scroll-lock";
-import { useAdaptive } from "#adata-ui/composables/useAdaptive";
-import { ref, useAttrs, onMounted, onBeforeUnmount, watch, computed } from "#imports";
+import { computed } from "#imports";
+import { DialogContent, DialogOverlay, DialogPortal, DialogRoot } from "reka-ui";
+import { AnimatePresence, Motion } from "motion-v";
+import { useMediaQuery } from "@vueuse/core";
 const props = defineProps({
-  idName: { type: String, required: false, default: "vsp-container" },
-  hideCloseBtn: { type: Boolean, required: false },
-  noClose: { type: Boolean, required: false },
   side: { type: String, required: false, default: "right" },
-  rerender: { type: Boolean, required: false },
-  zIndex: { type: [Number, String], required: false, default: "auto" },
-  width: { type: String, required: false, default: "auto" },
-  height: { type: String, required: false, default: "auto" },
-  lockScroll: { type: Boolean, required: false, default: true },
-  lockScrollHtml: { type: Boolean, required: false },
-  hideScrollbar: { type: Boolean, required: false, default: false },
-  overlayColor: { type: String, required: false, default: "black" },
-  overlayOpacity: { type: Number, required: false, default: 0.5 },
-  overlayDuration: { type: Number, required: false, default: 500 },
-  panelColor: { type: String, required: false, default: "bg-white dark:bg-gray-900" },
-  panelDuration: { type: Number, required: false, default: 300 },
-  transitionName: { type: String, required: false },
-  headerClass: { type: String, required: false },
-  bodyClass: { type: String, required: false },
-  footerClass: { type: String, required: false }
+  width: { type: Number, required: false, default: 300 },
+  height: { type: Number, required: false, default: 300 },
+  heightDrawer: { type: Number, required: false },
+  widthDrawer: { type: Number, required: false }
 });
-defineEmits(["opened", "closed"]);
-const modelValue = defineModel();
-let teleportContainer = void 0;
-const panel = ref(null);
-const overlay = ref(null);
-const footer = ref(null);
-const header = ref(null);
-const body = ref(null);
-const panelSide = ref(props.side);
-const device = useAdaptive();
-const zIndex = ref();
-const isBodyAlreadyLocked = ref(false);
-const attrs = useAttrs();
-const closePanel = () => modelValue.value = false;
-const lockUnlockBodyScroll = (elem, lock) => {
-  if (lock) {
-    setTimeout(() => {
-      disableBodyScroll(elem, {
-        reserveScrollBarGap: true,
-        allowTouchMove: elem && elem !== document.body
-      });
-      disableBodyScroll(elem, { reserveScrollBarGap: true });
-      if (props.lockScrollHtml) document.documentElement.style.overflow = "hidden";
-    }, 0);
-    return;
-  }
-  enableBodyScroll(elem);
-  if (props.lockScrollHtml) document.documentElement.style.removeProperty("overflow");
+const open = defineModel({ type: Boolean, ...{ default: false } });
+const isDesktop = useMediaQuery("(min-width: 1024px)");
+const showSidePanel = computed(() => isDesktop.value);
+const POSITION_CLASSES = {
+  right: "top-0 bottom-0 right-0",
+  left: "top-0 bottom-0 left-0",
+  top: "top-0 left-0 right-0",
+  bottom: "bottom-0 left-0 right-0"
 };
-const getMaxZIndex = () => Math.max(
-  ...Array.from(
-    document.querySelectorAll("body *"),
-    (el) => Number.parseFloat(window.getComputedStyle(el).zIndex)
-  ).filter((zIndex2) => !Number.isNaN(zIndex2)),
-  0
-);
-onMounted(() => {
-  zIndex.value = props.zIndex === "auto" ? getMaxZIndex() : props.zIndex;
-  const alreadyCreatedTarget = document.getElementById(props.idName);
-  if (alreadyCreatedTarget) return;
-  teleportContainer = document.createElement("div");
-  teleportContainer.setAttribute("id", props.idName);
-  document.body.appendChild(teleportContainer);
-});
-onBeforeUnmount(() => {
-  if (props.lockScroll && panel.value && modelValue.value) lockUnlockBodyScroll(panel.value, false);
-  if (teleportContainer) document.body.removeChild(teleportContainer);
-});
-watch(() => device.value, () => {
-  panelSide.value = device.value.isTablet || device.value.isSmallTablet ? "bottom" : props.side;
-}, { immediate: true });
-watch(() => [modelValue.value, panel.value], (newP, oldP) => {
-  const wasShown = oldP ? oldP[0] : false;
-  const [isShown, panelEl] = newP;
-  const isOpening = isShown;
-  const isClosing = wasShown && !isShown;
-  if (!panelEl) return;
-  if (isShown) {
-    if (props.lockScroll) lockUnlockBodyScroll(panelEl, true);
-    return;
-  }
-  if (!props.lockScroll || !isClosing || isBodyAlreadyLocked.value) return;
-  setTimeout(() => {
-    if (panelEl) lockUnlockBodyScroll(panelEl, false);
-  }, props.panelDuration);
-}, { immediate: true });
-const roundedClass = computed(() => {
-  const classes = {
-    left: "rounded-r-xl",
-    right: "rounded-l-xl",
-    top: "rounded-b-xl",
-    bottom: "rounded-t-xl"
-  };
-  return classes[panelSide.value];
-});
-const overlayStyles = computed(() => ({
-  "zIndex": zIndex.value,
-  "animationDuration": `${props.overlayDuration}ms`,
-  "--overlay-opacity": props.overlayOpacity,
-  "opacity": modelValue.value ? props.overlayOpacity : 0,
-  "backgroundColor": props.overlayColor,
-  "pointerEvents": !modelValue.value ? "none" : "all"
-}));
-const panelStyles = computed(() => ({
-  width: ["left", "right"].includes(panelSide.value) ? props.width : void 0,
-  maxWidth: "100%",
-  ...["top", "bottom"].includes(panelSide.value) ? {
-    height: device.value.isSmallTablet || device.value.isTablet ? "100%" : props.height,
-    maxHeight: device.value.isMobile ? "90%" : "100%"
-  } : {},
-  zIndex: zIndex.value,
-  animationDuration: `${props.panelDuration}ms`,
-  ...Object.assign({}, attrs.style)
-}));
-const positionStart = ref(0);
-const isClose = ref(false);
-const modalHeight = ref(0);
-const touchstart = (event) => {
-  isClose.value = false;
-  positionStart.value = event.touches[0].clientY;
-  modalHeight.value = panel.value?.offsetHeight || 0;
+const CORNER_CLASSES = {
+  left: "rounded-r-2xl",
+  right: "rounded-l-2xl",
+  top: "rounded-b-2xl",
+  bottom: "rounded-t-2xl"
+};
+const BUTTON_POSITIONS = {
+  left: "-right-8 top-8",
+  right: "-left-8 top-8",
+  top: "hidden",
+  bottom: "hidden"
 };
-const touchmove = (event) => {
-  if (!device.value.isSmallTablet && !device.value.isTablet) return;
-  event.preventDefault();
-  const touchPosition = event.touches[0].clientY;
-  const step = touchPosition - positionStart.value;
-  if (step < 0) return;
-  const newHeight = modalHeight.value - step;
-  panel.value.style.height = `${newHeight}px`;
-  isClose.value = step > 65;
+const BUTTON_CORNERS = {
+  left: "rounded-r-lg",
+  right: "rounded-l-lg",
+  top: "rounded-b-lg",
+  bottom: "rounded-t-lg"
 };
-const touchend = () => {
-  if (isClose.value) {
-    closePanel();
-  } else {
-    panel.value.style.height = `${modalHeight.value}px`;
+const sizeStyle = computed(() => {
+  if (["left", "right"].includes(props.side)) {
+    return { width: `${props.width}px`, height: "100%" };
   }
+  return { width: "100%", height: `${props.height}px` };
+});
+const motionInitial = {
+  right: { x: props.width },
+  left: { x: -props.width },
+  top: { y: -props.height },
+  bottom: { y: props.height }
 };
+const motionAnimate = { x: 0, y: 0 };
 </script>
 
 <template>
-  <client-only>
-    <Teleport :to="`#${idName}`">
-      <div
-        class="vsp-wrapper"
-        :class="[modelValue && 'vsp-wrapper--active']"
-      >
-        <Transition name="overlay">
-          <div
-            v-show="modelValue"
-            ref="overlay"
-            class="vsp-overlay fixed top-0 left-0 w-full h-full"
-            :style="overlayStyles"
-            @click="() => noClose ? void 0 : closePanel()"
+  <dialog-root
+    v-if="showSidePanel"
+    v-model:open="open"
+  >
+    <dialog-portal>
+      <animate-presence>
+        <dialog-overlay as-child>
+          <Motion
+            class="fixed inset-0 bg-black/50"
+            :initial="{ opacity: 0 }"
+            :animate="{ opacity: 1 }"
+            :exit="{ opacity: 0 }"
+            :transition="{ duration: 0.3, ease: 'easeOut' }"
           />
-        </Transition>
-        <Transition
-          :name="transitionName || `slide-${panelSide}`"
-          @after-enter="$emit('opened')"
-          @after-leave="$emit('closed')"
+        </dialog-overlay>
+
+        <dialog-content
+          as-child
+          :data-side="props.side"
+          :style="sizeStyle"
+          :class="[
+  'fixed bg-white dark:bg-gray-900 shadow-2xl',
+  POSITION_CLASSES[props.side],
+  CORNER_CLASSES[props.side]
+]"
         >
-          <div
-            v-if="rerender ? modelValue : true"
-            v-show="rerender ? true : modelValue"
-            ref="panel"
-            class="vsp fixed flex flex-col"
-            :class="[`vsp--${panelSide}-side`, $attrs.class, roundedClass, panelColor]"
-            :style="panelStyles"
+          <Motion
+            :initial="motionInitial[props.side]"
+            :animate="motionAnimate"
+            :exit="motionInitial[props.side]"
+            :transition="{ duration: 0.3, ease: 'easeInOut' }"
           >
-            <div
-              class="w-full flex justify-center items-center mt-1 lg:hidden"
-              @touchmove="touchmove"
-              @touchstart="touchstart"
-              @touchend="touchend"
-            >
-              <div class="h-1 w-10 bg-[#D9D9D9] rounded m-1" />
-            </div>
-            <div
-              v-if="!hideCloseBtn"
-              :class="roundedClass"
-              class="absolute w-8 px-2 py-4 bg-blue-700 text-white dark:text-gray-950 -left-8 top-8 cursor-pointer lg:block hidden"
-              @click="closePanel"
+            <button
+              :class="[
+  'absolute h-12 w-8 bg-blue-700 dark:bg-blue-500 cursor-pointer',
+  BUTTON_CORNERS[props.side],
+  BUTTON_POSITIONS[props.side]
+]"
+              @click="open = false"
             >
-              <i-x-mark />
-            </div>
+              <i-x-mark class="size-4 m-auto text-white dark:text-gray-900" />
+            </button>
             <div
-              v-if="!!$slots.header"
-              ref="header"
-              :class="[headerClass, 'vsp__header border-b border-deepblue-100 dark:border-[#E3E5E80D] lg:px-8 p-4']"
-              @touchmove="touchmove"
-              @touchstart="touchstart"
-              @touchend="touchend"
+              v-if="$slots.header"
+              class="border-b border-deepblue-900/5 dark:border-gray-200/5 lg:px-8 p-4"
             >
-              <slot
-                name="header"
-                :close="closePanel"
-              />
+              <slot name="header" />
             </div>
-            <div
-              ref="body"
-              :class="[
-  bodyClass,
-  'vsp__body overflow-y-auto relative flex-grow-1 h-full lg:px-8 p-4',
-  hideScrollbar ? 'vsp__body--hide-scroll' : ''
-]"
-            >
-              <slot
-                name="default"
-                :close="closePanel"
-              />
+            <div class="lg:px-8 p-4">
+              <slot name="default" />
             </div>
             <div
-              v-if="!!$slots.footer"
-              ref="footer"
-              :class="[footerClass, 'vsp__footer border-t border-deepblue-100 dark:border-[#E3E5E80D] lg:px-8 p-4']"
+              v-if="$slots.footer"
+              class="border-b border-deepblue-900/5 dark:border-gray-200/5 lg:px-8 p-4"
             >
               <slot name="footer" />
             </div>
-          </div>
-        </Transition>
-      </div>
-    </Teleport>
-  </client-only>
+          </Motion>
+        </dialog-content>
+      </animate-presence>
+    </dialog-portal>
+  </dialog-root>
+  <adt-drawer
+    v-else
+    v-model:open="open"
+    :width="widthDrawer"
+    :height="heightDrawer"
+  >
+    <template
+      v-if="$slots.header"
+      #header
+    >
+      <slot name="header" />
+    </template>
+    <template #default>
+      <slot name="default" />
+    </template>
+    <template
+      v-if="$slots.footer"
+      #footer
+    >
+      <slot name="footer" />
+    </template>
+  </adt-drawer>
 </template>
-
-<style scoped>
-.vsp-wrapper .vsp--right-side, .vsp-wrapper .vsp--left-side {
-  top: 0;
-  height: 100%;
-}
-.vsp-wrapper .vsp--right-side {
-  right: 0;
-  left: unset;
-}
-.vsp-wrapper .vsp--left-side {
-  right: unset;
-  left: 0;
-}
-.vsp-wrapper .vsp--bottom-side, .vsp-wrapper .vsp--top-side {
-  left: 0;
-  width: 100%;
-}
-.vsp-wrapper .vsp--bottom-side {
-  bottom: 0;
-}
-.vsp-wrapper .vsp--top-side {
-  top: 0;
-}
-.vsp-wrapper .vsp__body.overflow-y-auto::-webkit-scrollbar {
-  width: 8px;
-}
-.vsp-wrapper .vsp__body.overflow-y-auto::-webkit-scrollbar-thumb {
-  background: rgba(44, 62, 80, 0.2);
-  border-radius: 6px;
-}
-.vsp-wrapper .vsp__body.vsp__body--hide-scroll {
-  scrollbar-width: none;
-}
-.vsp-wrapper .vsp__body.vsp__body--hide-scroll::-webkit-scrollbar {
-  width: 0;
-  height: 0;
-}
-.vsp-wrapper .overlay-enter-active,
-.vsp-wrapper .overlay-leave-active {
-  animation: overlay-transition;
-}
-.vsp-wrapper .overlay-leave-active {
-  animation-direction: reverse;
-}
-.vsp-wrapper .slide-right-enter-active,
-.vsp-wrapper .slide-right-leave-active {
-  animation: slide-right;
-}
-.vsp-wrapper .slide-right-leave-active {
-  animation-direction: reverse;
-}
-.vsp-wrapper .slide-left-enter-active,
-.vsp-wrapper .slide-left-leave-active {
-  animation: slide-left;
-}
-.vsp-wrapper .slide-left-leave-active {
-  animation-direction: reverse;
-}
-.vsp-wrapper .slide-top-enter-active,
-.vsp-wrapper .slide-top-leave-active {
-  animation: slide-left;
-}
-.vsp-wrapper .slide-top-leave-active {
-  animation-direction: reverse;
-}
-.vsp-wrapper .slide-top-enter-active,
-.vsp-wrapper .slide-top-leave-active {
-  animation: slide-top;
-}
-.vsp-wrapper .slide-top-leave-active {
-  animation-direction: reverse;
-}
-.vsp-wrapper .slide-bottom-enter-active,
-.vsp-wrapper .slide-bottom-leave-active {
-  animation: slide-bottom;
-}
-.vsp-wrapper .slide-bottom-leave-active {
-  animation-direction: reverse;
-}
-@keyframes slide-right {
-  0% {
-    transform: translateX(100%);
-    opacity: 0;
-  }
-  100% {
-    transform: translateX(0);
-    opacity: 1;
-  }
-}
-@keyframes slide-left {
-  0% {
-    transform: translateX(-100%);
-    opacity: 0;
-  }
-  100% {
-    transform: translateX(0);
-    opacity: 1;
-  }
-}
-@keyframes slide-bottom {
-  0% {
-    transform: translateY(100%);
-    opacity: 0;
-  }
-  100% {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
-@keyframes slide-top {
-  0% {
-    transform: translateY(-100%);
-    opacity: 0;
-  }
-  100% {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
-@keyframes slide-top {
-  0% {
-    transform: translateY(-100%);
-    opacity: 0;
-  }
-  100% {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
-@keyframes overlay-transition {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: var(--overlay-opacity);
-  }
-}
-</style>