vueless 1.2.10-beta.2 → 1.2.10-beta.3

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

@@ -101,6 +101,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

@@ -107,6 +107,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.2",
+  "version": "1.2.10-beta.3",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",

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.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>

package/ui.container-drawer/config.ts

@@ -0,0 +1,128 @@
+export default /*tw*/ {
+  wrapper: "fixed inset-0 z-50 outline-hidden",
+  wrapperTransitionTop: {
+    enterActiveClass: "ease-out duration-300",
+    leaveActiveClass: "ease-in duration-200",
+    enterFromClass: "opacity-0 -translate-y-full",
+    enterToClass: "opacity-100 translate-y-0",
+    leaveFromClass: "opacity-100 translate-y-0",
+    leaveToClass: "opacity-0 -translate-y-full",
+  },
+  wrapperTransitionBottom: {
+    enterActiveClass: "ease-out duration-300",
+    leaveActiveClass: "ease-in duration-200",
+    enterFromClass: "opacity-0 translate-y-full",
+    enterToClass: "opacity-100 translate-y-0",
+    leaveFromClass: "opacity-100 translate-y-0",
+    leaveToClass: "opacity-0 translate-y-full",
+  },
+  wrapperTransitionLeft: {
+    enterActiveClass: "ease-out duration-300",
+    leaveActiveClass: "ease-in duration-200",
+    enterFromClass: "opacity-0 -translate-x-full",
+    enterToClass: "opacity-100 translate-x-0",
+    leaveFromClass: "opacity-100 translate-x-0",
+    leaveToClass: "opacity-0 -translate-x-full",
+  },
+  wrapperTransitionRight: {
+    enterActiveClass: "ease-out duration-300",
+    leaveActiveClass: "ease-in duration-200",
+    enterFromClass: "opacity-0 translate-x-full",
+    enterToClass: "opacity-100 translate-x-0",
+    leaveFromClass: "opacity-100 translate-x-0",
+    leaveToClass: "opacity-0 translate-x-full",
+  },
+  overlay: "fixed inset-0 z-40 bg-inverted/15 dark:bg-lifted/75 backdrop-blur-md",
+  overlayTransition: {
+    enterActiveClass: "ease-out duration-300",
+    enterFromClass: "opacity-0",
+    enterToClass: "opacity-100",
+    leaveActiveClass: "ease-in duration-200",
+    leaveFromClass: "opacity-100",
+    leaveToClass: "opacity-0",
+  },
+  innerWrapper: {
+    base: "h-full relative", // add overflow-y
+    variants: {
+      inset: {
+        true: "m-4 h-[calc(100%-2rem)]",
+      },
+    },
+  },
+  header: {
+    base: "flex justify-between p-6",
+    compoundVariants: [
+      { handle: true, position: "left", class: "pr-0" },
+      { handle: true, position: "right", class: "pl-0" },
+      { handle: true, position: "bottom", class: "pt-0" },
+    ],
+  },
+  beforeTitle: "flex items-center gap-3",
+  titleFallback: "flex flex-col",
+  title: "{UHeader}",
+  description: "mt-1.5 text-medium font-normal text-lifted",
+  body: {
+    base: "px-6 pb-6 text-medium",
+    compoundVariants: [
+      { handle: true, position: "left", class: "pr-0" },
+      { handle: true, position: "right", class: "pl-0" },
+      { handle: true, position: "top", class: "pb-0" },
+    ],
+  },
+  footer: {
+    base: "flex justify-between p-6 max-md:flex-col max-md:gap-4 border-t border-muted",
+    compoundVariants: [
+      { handle: true, position: "left", class: "pr-0" },
+      { handle: true, position: "right", class: "pl-0" },
+    ],
+  },
+  footerLeft: "flex flex-col md:flex-row gap-4 w-full",
+  footerRight: "flex flex-col md:flex-row gap-4 w-full justify-end",
+  drawerWrapper: {
+    base: "flex border absolute select-none cursor-grab active:cursor-grabbing overflow-x-hidden overflow-y-auto",
+    variants: {
+      variant: {
+        solid: "bg-default border-transparent",
+        outlined: "bg-default border-muted",
+        subtle: "bg-muted border-default/50",
+        soft: "bg-muted border-transparent",
+      },
+      position: {
+        top: "top-0 flex-col rounded-b-large w-full h-auto",
+        bottom: "bottom-0 flex-col-reverse rounded-t-large w-full h-auto",
+        left: "left-0 flex-row rounded-r-large w-max h-full",
+        right: "right-0 flex-row-reverse rounded-l-large w-max h-full",
+      },
+      inset: {
+        true: "rounded-large",
+      },
+    },
+  },
+  drawer: "",
+  handleWrapper: {
+    base: "flex items-center justify-center bg-inherit",
+    variants: {
+      position: {
+        top: "w-full h-11",
+        bottom: "w-full h-11",
+        left: "w-11 h-auto",
+        right: "w-11 h-auto",
+      },
+    },
+  },
+  handle: {
+    base: "rounded-large cursor-pointer bg-lifted hover:bg-accented transition",
+    compoundVariants: [
+      { position: ["top", "bottom"], class: "w-11 h-1.5" },
+      { position: ["left", "right"], class: "w-1.5 h-11" },
+    ],
+  },
+  defaults: {
+    variant: "solid",
+    position: "left",
+    inset: false,
+    handle: true,
+    closeOnEsc: true,
+    closeOnOverlay: true,
+  },
+};

package/ui.container-drawer/constants.ts

@@ -0,0 +1,5 @@
+/*
+  This const is needed to prevent the issue in script setup:
+ `defineProps` is referencing locally declared variables. (vue/valid-define-props)
+ */
+export const COMPONENT_NAME = "UDrawer";

package/ui.container-drawer/storybook/docs.mdx

@@ -0,0 +1,16 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/addon-docs/blocks";
+import { getSource } from "../../utils/storybook";
+
+import * as stories from "./stories";
+import defaultConfig from "../config?raw"
+
+<Meta of={stories} />
+<Title of={stories} />
+<Subtitle of={stories} />
+<Description of={stories} />
+<Primary of={stories}  />
+<Controls of={stories.Default} />
+<Stories of={stories} />
+
+## Default config
+<Source code={getSource(defaultConfig)} language="jsx" dark />