vueless 1.2.10-beta.1 → 1.2.10-beta.10

package/composables/useRequestQueue.ts

@@ -0,0 +1,47 @@
+import { readonly, ref } from "vue";
+
+import type { Ref } from "vue";
+
+import { getRequestWithoutQuery } from "../utils/requestQueue";
+
+const requestQueue = ref<string[]>([]);
+
+function addToRequestQueue(url: string | string[]): void {
+  Array.isArray(url)
+    ? requestQueue.value.push(...url.map(getRequestWithoutQuery))
+    : requestQueue.value.push(getRequestWithoutQuery(url));
+}
+
+function removeFromRequestQueue(url: string | string[]): void {
+  if (Array.isArray(url)) {
+    url.map(getRequestWithoutQuery).forEach(removeFromRequestQueue);
+  } else {
+    requestQueue.value = requestQueue.value.filter((item) => item !== getRequestWithoutQuery(url));
+  }
+}
+
+function isLoading(request: string | string[]): boolean {
+  return Array.isArray(request)
+    ? request.some((url) => requestQueue.value.some((item: string) => item === url))
+    : requestQueue.value.some((item: string) => item === request);
+}
+
+function onAddToRequestQueue(event: CustomEvent<{ request: string }>) {
+  addToRequestQueue(event.detail.request);
+}
+
+function onRemoveFromRequestQueue(event: CustomEvent<{ request: string }>) {
+  removeFromRequestQueue(event.detail.request);
+}
+
+window.addEventListener("addToRequestQueue", onAddToRequestQueue as EventListener);
+window.addEventListener("removeFromRequestQueue", onRemoveFromRequestQueue as EventListener);
+
+export function useRequestQueue() {
+  return {
+    isLoading,
+    addToRequestQueue,
+    removeFromRequestQueue,
+    requestQueue: readonly(requestQueue) as Readonly<Ref<readonly string[]>>,
+  };
+}

package/constants.d.ts

@@ -186,6 +186,7 @@ export namespace COMPONENTS {
     let UModal: string;
     let UModalConfirm: string;
     let UPage: string;
+    let UDrawer: string;
     let UIcon: string;
     let UAvatar: string;
     let UTable: string;

package/constants.js

@@ -296,6 +296,7 @@ export const COMPONENTS = {
   UModal: "ui.container-modal",
   UModalConfirm: "ui.container-modal-confirm",
   UPage: "ui.container-page",
+  UDrawer: "ui.container-drawer",
 
   /* Images and Icons */
   UIcon: "ui.image-icon",

package/icons/storybook/arrow_forward_ios.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M304-76.26 242.26-139l343-343-343-343L304-887.74 709.74-482 304-76.26Z"/></svg>

package/index.d.ts

@@ -15,6 +15,7 @@ export {
   createDebounce,
   hasSlotContent,
 } from "./utils/helper";
+export { addToRequestQueue, removeFromRequestQueue } from "./utils/requestQueue";
 export { isMac, isPWA, isIOS, isAndroid, isMobileApp, isWindows } from "./utils/platform";
 export { cx, cva, compose, getDefaults, setVuelessConfig, setColor, vuelessConfig } from "./utils/ui";
 export { getTheme, setTheme, resetTheme, normalizeThemeConfig, cssVar, setRootCSSVariables } from "./utils/theme";
@@ -27,13 +28,14 @@ export { createVueI18nAdapter } from "./adapter.locale/vue-i18n";
 export { useLocale } from "./composables/useLocale";
 export { default as useUI } from "./composables/useUI";
 export { useDarkMode } from "./composables/useDarkMode";
+export { useRequestQueue } from "./composables/useRequestQueue";
+export { useLoaderOverlay } from "./ui.loader-overlay/useLoaderOverlay";
 export { useLoaderProgress } from "./ui.loader-progress/useLoaderProgress";
 export { useMutationObserver } from "./composables/useMutationObserver";
 export { Direction, useAutoPosition } from "./composables/useAutoPosition";
 export { useComponentLocaleMessages } from "./composables/useComponentLocaleMassages";
 /* loaders */
 export { loaderProgressOn, loaderProgressOff } from "./ui.loader-progress/utilLoaderProgress";
-export { useLoaderOverlay } from "./ui.loader-overlay/useLoaderOverlay";
 export { loaderOverlayOn, loaderOverlayOff } from "./ui.loader-overlay/utilLoaderOverlay";
 /* notifications */
 export {
@@ -101,6 +103,7 @@ export { default as UAccordionItem } from "./ui.container-accordion-item/UAccord
 export { default as UCard } from "./ui.container-card/UCard.vue";
 export { default as UModal } from "./ui.container-modal/UModal.vue";
 export { default as UModalConfirm } from "./ui.container-modal-confirm/UModalConfirm.vue";
+export { default as UDrawer } from "./ui.container-drawer/UDrawer.vue";
 export { default as UPage } from "./ui.container-page/UPage.vue";
 /* Images and Icons */
 export { default as UIcon } from "./ui.image-icon/UIcon.vue";

package/index.ts

@@ -21,6 +21,7 @@ export {
   createDebounce,
   hasSlotContent,
 } from "./utils/helper";
+export { addToRequestQueue, removeFromRequestQueue } from "./utils/requestQueue";
 export { isMac, isPWA, isIOS, isAndroid, isMobileApp, isWindows } from "./utils/platform";
 export { cx, cva, compose, getDefaults, setVuelessConfig, setColor, vuelessConfig } from "./utils/ui";
 export { getTheme, setTheme, resetTheme, normalizeThemeConfig, cssVar, setRootCSSVariables } from "./utils/theme";
@@ -33,13 +34,14 @@ export { createVueI18nAdapter } from "./adapter.locale/vue-i18n";
 export { useLocale } from "./composables/useLocale";
 export { default as useUI } from "./composables/useUI";
 export { useDarkMode } from "./composables/useDarkMode";
+export { useRequestQueue } from "./composables/useRequestQueue";
+export { useLoaderOverlay } from "./ui.loader-overlay/useLoaderOverlay";
 export { useLoaderProgress } from "./ui.loader-progress/useLoaderProgress";
 export { useMutationObserver } from "./composables/useMutationObserver";
 export { Direction, useAutoPosition } from "./composables/useAutoPosition";
 export { useComponentLocaleMessages } from "./composables/useComponentLocaleMassages";
 /* loaders */
 export { loaderProgressOn, loaderProgressOff } from "./ui.loader-progress/utilLoaderProgress";
-export { useLoaderOverlay } from "./ui.loader-overlay/useLoaderOverlay";
 export { loaderOverlayOn, loaderOverlayOff } from "./ui.loader-overlay/utilLoaderOverlay";
 /* notifications */
 export {
@@ -107,6 +109,7 @@ export { default as UAccordionItem } from "./ui.container-accordion-item/UAccord
 export { default as UCard } from "./ui.container-card/UCard.vue";
 export { default as UModal } from "./ui.container-modal/UModal.vue";
 export { default as UModalConfirm } from "./ui.container-modal-confirm/UModalConfirm.vue";
+export { default as UDrawer } from "./ui.container-drawer/UDrawer.vue";
 export { default as UPage } from "./ui.container-page/UPage.vue";
 /* Images and Icons */
 export { default as UIcon } from "./ui.image-icon/UIcon.vue";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.2.10-beta.1",
+  "version": "1.2.10-beta.10",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",
@@ -66,7 +66,7 @@
     "prettier": "^3.6.2",
     "release-it": "^19.0.4",
     "typescript": "^5.8.3",
-    "vite": "^7.1.5",
+    "vite": "^7.1.9",
     "vitest": "^3.2.4",
     "vue": "^3.5.18",
     "vue-router": "^4.5.1",

package/types.ts

@@ -27,6 +27,7 @@ import UDividerConfig from "./ui.container-divider/config";
 import UGroupConfig from "./ui.container-group/config";
 import UModalConfig from "./ui.container-modal/config";
 import UModalConfirmConfig from "./ui.container-modal-confirm/config";
+import UDrawerConfig from "./ui.container-drawer/config";
 import UPageConfig from "./ui.container-page/config";
 import URowConfig from "./ui.container-row/config";
 import ULoaderConfig from "./ui.loader/config";
@@ -272,6 +273,7 @@ export interface Components {
   UModal: Partial<typeof UModalConfig>;
   UModalConfirm: Partial<typeof UModalConfirmConfig>;
   UPage: Partial<typeof UPageConfig>;
+  UDrawer: Partial<typeof UDrawerConfig>;
   URow: Partial<typeof URowConfig>;
   ULoader: Partial<typeof ULoaderConfig>;
   ULoaderOverlay: Partial<typeof ULoaderOverlayConfig>;

package/ui.button/UButton.vue

@@ -62,6 +62,7 @@ defineExpose({
  * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
  */
 const mutatedProps = computed(() => ({
+  icon: Boolean(props.icon) || hasSlotContent(slots["default"]),
   leftIcon: Boolean(props.leftIcon) || hasSlotContent(slots["left"]),
   rightIcon: Boolean(props.rightIcon) || hasSlotContent(slots["right"]),
   label: Boolean(props.label),
@@ -129,11 +130,6 @@ const {
     </template>
 
     <!-- This is needed to prevent changing button height -->
-    <div
-      v-if="(!label && !hasSlotContent(slots['default']) && !icon) || loading"
-      tabindex="-1"
-      v-bind="invisibleAttrs"
-      v-text="'invisible'"
-    />
+    <div v-if="icon || loading" tabindex="-1" v-bind="invisibleAttrs" v-text="'invisible'" />
   </component>
 </template>

package/ui.button/config.ts

@@ -54,6 +54,9 @@ export default /*tw*/ {
       loading: {
         true: "gap-0 pointer-events-none",
       },
+      icon: {
+        true: "gap-0",
+      },
       label: {
         false: "gap-0",
       },
@@ -62,6 +65,8 @@ export default /*tw*/ {
       },
     },
     compoundVariants: [
+      { label: false, leftIcon: true, class: "gap-0" },
+      { label: false, rightIcon: true, class: "gap-0" },
       { square: true, size: "2xs", class: "p-1" },
       { square: true, size: "xs", class: "p-1.5" },
       { square: true, size: "sm", class: "p-2" },

package/ui.button/tests/UButton.test.ts

@@ -115,7 +115,7 @@ describe("UButton.vue", () => {
 
       const nestedUIconComponents = component.findAllComponents(UIcon);
 
-      expect(component.text()).toBe("");
+      expect(component.text()).not.toBe(label);
       expect(nestedUIconComponents.length).toBe(1);
       expect(nestedUIconComponents[0].props("name")).toBe(icon);
     });

package/ui.container-drawer/UDrawer.vue

@@ -0,0 +1,365 @@
+<script setup lang="ts">
+import { computed, useSlots, watch, useId, useTemplateRef, nextTick, ref } from "vue";
+
+import useUI from "../composables/useUI";
+import { getDefaults } from "../utils/ui";
+import { hasSlotContent } from "../utils/helper";
+
+import UHeader from "../ui.text-header/UHeader.vue";
+
+import defaultConfig from "./config";
+import { COMPONENT_NAME } from "./constants";
+
+import type { Props, Config } from "./types";
+
+defineOptions({ inheritAttrs: false });
+
+const props = withDefaults(defineProps<Props>(), {
+  ...getDefaults<Props, Config>(defaultConfig, COMPONENT_NAME),
+  modelValue: false,
+});
+
+const emit = defineEmits([
+  /**
+   * Triggers when the drawer is toggled.
+   * @property {Boolean} value
+   */
+  "update:modelValue",
+
+  /**
+   * Triggers when the drawer is closed.
+   */
+  "close",
+]);
+
+const elementId = props.id || useId();
+
+const slots = useSlots();
+
+const wrapperRef = useTemplateRef<HTMLDivElement>("wrapper");
+const drawerRef = useTemplateRef<HTMLDivElement>("drawer");
+
+const isDragging = ref(false);
+const dragStartPosition = ref({ x: 0, y: 0 });
+const dragCurrentPosition = ref({ x: 0, y: 0 });
+const minDragDistance = 10;
+
+const isShownDrawer = computed({
+  get: () => props.modelValue,
+  set: (value) => emit("update:modelValue", value),
+});
+
+const isExistHeader = computed(() => {
+  return (
+    props.title ||
+    hasSlotContent(slots["before-title"]) ||
+    hasSlotContent(slots["title"]) ||
+    hasSlotContent(slots["after-title"]) ||
+    hasSlotContent(slots["actions"])
+  );
+});
+
+const isExistFooter = computed(() => {
+  return hasSlotContent(slots["footer-left"]) || hasSlotContent(slots["footer-right"]);
+});
+
+const dragThreshold = computed(() => {
+  if (!drawerRef.value) return 0;
+
+  const rect = drawerRef.value.getBoundingClientRect();
+
+  const dragThresholdMap = {
+    top: rect.height / 2,
+    bottom: rect.height / 2,
+    left: rect.width / 2,
+    right: rect.width / 2,
+  };
+
+  return dragThresholdMap[props.position] || 0;
+});
+
+const dragDistance = computed(() => {
+  if (!isDragging.value) return 0;
+
+  const deltaX = dragCurrentPosition.value.x - dragStartPosition.value.x;
+  const deltaY = dragCurrentPosition.value.y - dragStartPosition.value.y;
+
+  const totalDistance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+
+  if (totalDistance < minDragDistance) return 0;
+
+  const dragDistanceMap = {
+    top: Math.min(0, deltaY),
+    bottom: Math.max(0, deltaY),
+    left: Math.min(0, deltaX),
+    right: Math.max(0, deltaX),
+  };
+
+  return dragDistanceMap[props.position] || 0;
+});
+
+const shouldCloseDrawer = computed(() => {
+  return Math.abs(dragDistance.value) > dragThreshold.value;
+});
+
+const dragTransform = computed(() => {
+  if (!isDragging.value) return "";
+
+  const distance = dragDistance.value;
+
+  const dragTransformMap = {
+    top: `translateY(${distance}px)`,
+    bottom: `translateY(${distance}px)`,
+    left: `translateX(${distance}px)`,
+    right: `translateX(${distance}px)`,
+  };
+
+  return dragTransformMap[props.position] || "";
+});
+
+function getFocusableElements() {
+  if (!wrapperRef.value) return [];
+
+  return Array.from(
+    wrapperRef.value.querySelectorAll(
+      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
+    ),
+  );
+}
+
+function trapFocus(e: KeyboardEvent) {
+  if (e.key !== "Tab") return;
+
+  const focusableElements = getFocusableElements();
+
+  if (!focusableElements.length) return;
+
+  const firstElement = focusableElements.at(0) as HTMLElement;
+  const lastElement = focusableElements.at(-1) as HTMLElement;
+
+  // Shift+Tab - if focused on first element, move to last
+  if (e.shiftKey && document.activeElement === firstElement) {
+    e.preventDefault();
+    lastElement.focus();
+
+    return;
+  }
+
+  // Tab - if focused on last element, move to first
+  if (!e.shiftKey && document.activeElement === lastElement) {
+    e.preventDefault();
+    firstElement.focus();
+  }
+}
+
+watch(isShownDrawer, (newValue) => {
+  onChangeShownDrawer(newValue);
+
+  if (!newValue) emit("close");
+});
+
+function onChangeShownDrawer(newValue: boolean) {
+  toggleEventListeners();
+
+  if (newValue) {
+    nextTick(() => wrapperRef.value?.focus());
+  }
+}
+
+function toggleEventListeners() {
+  if (isShownDrawer.value) {
+    document.addEventListener("keydown", trapFocus);
+    document.addEventListener("keydown", onKeydownEsc);
+  } else {
+    document.removeEventListener("keydown", trapFocus);
+    document.removeEventListener("keydown", onKeydownEsc);
+  }
+}
+
+function onClickOutside() {
+  props.closeOnOverlay && closeDrawer();
+}
+
+function onKeydownEsc(e: KeyboardEvent) {
+  if (e.key !== "Escape" || !props.closeOnEsc) return;
+
+  closeDrawer();
+}
+
+function closeDrawer() {
+  isShownDrawer.value = false;
+
+  emit("close");
+}
+
+function onDragStart(e: MouseEvent | TouchEvent) {
+  e.preventDefault();
+
+  const clientX = "touches" in e ? e.touches[0].clientX : e.clientX;
+  const clientY = "touches" in e ? e.touches[0].clientY : e.clientY;
+
+  dragStartPosition.value = { x: clientX, y: clientY };
+  dragCurrentPosition.value = { x: clientX, y: clientY };
+
+  document.addEventListener("mousemove", onDragMove);
+  document.addEventListener("mouseup", onDragEnd);
+  document.addEventListener("touchmove", onDragMove, { passive: false });
+  document.addEventListener("touchend", onDragEnd);
+}
+
+function onDragMove(e: MouseEvent | TouchEvent) {
+  e.preventDefault();
+
+  const clientX = "touches" in e ? e.touches[0].clientX : e.clientX;
+  const clientY = "touches" in e ? e.touches[0].clientY : e.clientY;
+
+  dragCurrentPosition.value = { x: clientX, y: clientY };
+
+  const deltaX = clientX - dragStartPosition.value.x;
+  const deltaY = clientY - dragStartPosition.value.y;
+  const totalDistance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+
+  if (totalDistance >= minDragDistance) {
+    isDragging.value = true;
+  }
+}
+
+function onDragEnd() {
+  document.removeEventListener("mousemove", onDragMove);
+  document.removeEventListener("mouseup", onDragEnd);
+  document.removeEventListener("touchmove", onDragMove);
+  document.removeEventListener("touchend", onDragEnd);
+
+  if (isDragging.value && shouldCloseDrawer.value) {
+    closeDrawer();
+  }
+
+  isDragging.value = false;
+  dragStartPosition.value = { x: 0, y: 0 };
+  dragCurrentPosition.value = { x: 0, y: 0 };
+}
+
+defineExpose({
+  /**
+   * A reference to the component's wrapper element for direct DOM manipulation.
+   * @property {HTMLDivElement}
+   */
+  wrapperRef,
+});
+
+const wrapperTransition = computed(() => {
+  const transitionMap = {
+    top: config.value.wrapperTransitionTop,
+    bottom: config.value.wrapperTransitionBottom,
+    left: config.value.wrapperTransitionLeft,
+    right: config.value.wrapperTransitionRight,
+  };
+
+  return transitionMap[props.position];
+});
+
+/**
+ * Get element / nested component attributes for each config token ✨
+ * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
+ */
+
+const {
+  getDataTest,
+  config,
+  handleAttrs,
+  handleWrapperAttrs,
+  drawerAttrs,
+  drawerWrapperAttrs,
+  titleAttrs,
+  overlayAttrs,
+  wrapperAttrs,
+  innerWrapperAttrs,
+  headerAttrs,
+  descriptionAttrs,
+  bodyAttrs,
+  footerLeftAttrs,
+  footerAttrs,
+  footerRightAttrs,
+  beforeTitleAttrs,
+  titleFallbackAttrs,
+} = useUI<Config>(defaultConfig);
+</script>
+
+<template>
+  <Transition v-bind="config.overlayTransition">
+    <div v-if="isShownDrawer" v-bind="overlayAttrs" />
+  </Transition>
+
+  <Transition v-bind="wrapperTransition">
+    <div
+      v-if="isShownDrawer"
+      :id="elementId"
+      ref="wrapper"
+      tabindex="0"
+      v-bind="wrapperAttrs"
+      :data-test="getDataTest()"
+      @keydown.self.esc="onKeydownEsc"
+    >
+      <div v-bind="innerWrapperAttrs" @click.self="onClickOutside">
+        <div
+          ref="drawer"
+          :style="{ transform: dragTransform }"
+          v-bind="drawerWrapperAttrs"
+          @mousedown="onDragStart"
+          @touchstart="onDragStart"
+        >
+          <div v-bind="drawerAttrs">
+            <div v-if="isExistHeader" v-bind="headerAttrs">
+              <div v-bind="beforeTitleAttrs">
+                <!-- @slot Use it to add something before the header title. -->
+                <slot name="before-title" />
+                <!--
+                @slot Use it to add something to the left side of the header.
+                @binding {string} title
+              -->
+                <slot name="title" :title="title">
+                  <div v-bind="titleFallbackAttrs">
+                    <UHeader :label="title" size="sm" v-bind="titleAttrs" />
+                    <div v-if="description" v-bind="descriptionAttrs" v-text="description" />
+                  </div>
+                </slot>
+                <!-- @slot Use it to add something after the header title. -->
+                <slot name="after-title" />
+              </div>
+
+              <!--
+                @slot Use it to add something instead of the close button.
+                @binding {function} close
+              -->
+              <slot name="actions" :close="closeDrawer" />
+            </div>
+
+            <div v-bind="bodyAttrs">
+              <!-- @slot Use it to add something into the drawer body. -->
+              <slot />
+            </div>
+
+            <div v-if="isExistFooter" v-bind="footerAttrs">
+              <div v-if="hasSlotContent($slots['footer-left'])" v-bind="footerLeftAttrs">
+                <!-- @slot Use it to add something to the left side of the footer. -->
+                <slot name="footer-left" />
+              </div>
+
+              <div v-if="hasSlotContent($slots['footer-right'])" v-bind="footerRightAttrs">
+                <!-- @slot Use it to add something to the right side of the footer. -->
+                <slot name="footer-right" />
+              </div>
+            </div>
+          </div>
+
+          <div v-if="handle" v-bind="handleWrapperAttrs">
+            <!-- @slot Use it to add something instead of the default handle. -->
+            <slot name="handle">
+              <div v-bind="handleAttrs" />
+            </slot>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Transition>
+</template>