@expcat/tigercat-vue 2.0.4 → 2.1.0

package/dist/chunk-6GR3XC5V.mjs

@@ -0,0 +1,281 @@
+// src/components/ScrollArea.ts
+import {
+  defineComponent,
+  h,
+  ref,
+  shallowRef,
+  onMounted,
+  onBeforeUnmount,
+  nextTick,
+  watch
+} from "vue";
+import {
+  classNames,
+  coerceClassValue,
+  mergeStyleValues,
+  computeScrollAreaState,
+  computeScrollFromThumbOffset,
+  computeScrollFromTrackPoint,
+  createDocumentDragSession,
+  createEmptyScrollAreaState,
+  getScrollAreaBoxStyle,
+  getScrollAreaContentClasses,
+  getScrollAreaScrollbarClasses,
+  getScrollAreaShadowClasses,
+  getScrollAreaShadowSides,
+  getScrollAreaThumbClasses,
+  getScrollAreaThumbStyle,
+  getScrollAreaViewportClasses,
+  observeScrollAreaSize,
+  readScrollAreaMetrics,
+  scrollAreaRootClasses,
+  shouldRenderScrollAreaScrollbar,
+  SCROLL_AREA_MIN_THUMB_SIZE
+} from "@expcat/tigercat-core";
+var ScrollArea = defineComponent({
+  name: "TigerScrollArea",
+  inheritAttrs: false,
+  props: {
+    direction: {
+      type: String,
+      default: "vertical"
+    },
+    scrollbar: {
+      type: String,
+      default: "auto"
+    },
+    scrollbarSize: {
+      type: String,
+      default: "md"
+    },
+    shadow: { type: Boolean, default: false },
+    minThumbSize: { type: Number, default: SCROLL_AREA_MIN_THUMB_SIZE },
+    height: { type: [Number, String], default: void 0 },
+    maxHeight: { type: [Number, String], default: void 0 },
+    width: { type: [Number, String], default: void 0 },
+    maxWidth: { type: [Number, String], default: void 0 },
+    ariaLabel: { type: String, default: void 0 },
+    className: { type: String, default: void 0 },
+    viewportClassName: { type: String, default: void 0 }
+  },
+  emits: ["scroll"],
+  setup(props, { slots, emit, attrs, expose }) {
+    const viewportRef = ref(null);
+    const contentRef = ref(null);
+    const scrollState = shallowRef(createEmptyScrollAreaState());
+    const draggingAxis = ref(null);
+    let dragSession = null;
+    let stopObserving = null;
+    function syncState() {
+      const viewport = viewportRef.value;
+      if (!viewport) return;
+      scrollState.value = computeScrollAreaState(
+        readScrollAreaMetrics(viewport),
+        props.minThumbSize
+      );
+    }
+    function handleScroll() {
+      const viewport = viewportRef.value;
+      if (!viewport) return;
+      syncState();
+      emit("scroll", {
+        scrollTop: viewport.scrollTop,
+        scrollLeft: viewport.scrollLeft,
+        state: scrollState.value
+      });
+    }
+    function applyScroll(axis, position) {
+      const viewport = viewportRef.value;
+      if (!viewport) return;
+      if (axis === "y") viewport.scrollTop = position;
+      else viewport.scrollLeft = position;
+      handleScroll();
+    }
+    function trackSizeOf(axis) {
+      const viewport = viewportRef.value;
+      if (!viewport) return 0;
+      return axis === "y" ? viewport.clientHeight : viewport.clientWidth;
+    }
+    function scrollSizeOf(axis) {
+      const viewport = viewportRef.value;
+      if (!viewport) return 0;
+      return axis === "y" ? viewport.scrollHeight : viewport.scrollWidth;
+    }
+    function startThumbDrag(axis, event) {
+      const viewport = viewportRef.value;
+      if (!viewport) return;
+      event.preventDefault();
+      event.stopPropagation();
+      const axisState = axis === "y" ? scrollState.value.y : scrollState.value.x;
+      const startOffset = axisState.thumbOffset;
+      const startPoint = axis === "y" ? event.clientY : event.clientX;
+      dragSession?.dispose();
+      draggingAxis.value = axis;
+      dragSession = createDocumentDragSession({
+        startX: event.clientX,
+        startY: event.clientY,
+        ownerDocument: viewport.ownerDocument,
+        onMove: ({ currentX, currentY }) => {
+          const current = axis === "y" ? currentY : currentX;
+          const trackSize = trackSizeOf(axis);
+          applyScroll(
+            axis,
+            computeScrollFromThumbOffset(
+              startOffset + (current - startPoint),
+              trackSize,
+              axisState.thumbSize,
+              scrollSizeOf(axis),
+              trackSize
+            )
+          );
+        },
+        onEnd: () => {
+          draggingAxis.value = null;
+          dragSession = null;
+        }
+      });
+    }
+    function handleTrackMouseDown(axis, event) {
+      const target = event.target;
+      if (target?.dataset.scrollAreaThumb) {
+        startThumbDrag(axis, event);
+        return;
+      }
+      const track = event.currentTarget;
+      const rect = track.getBoundingClientRect();
+      const point = axis === "y" ? event.clientY - rect.top : event.clientX - rect.left;
+      const axisState = axis === "y" ? scrollState.value.y : scrollState.value.x;
+      const trackSize = trackSizeOf(axis);
+      applyScroll(
+        axis,
+        computeScrollFromTrackPoint(
+          point,
+          trackSize,
+          axisState.thumbSize,
+          scrollSizeOf(axis),
+          trackSize
+        )
+      );
+    }
+    function scrollTo(options) {
+      const viewport = viewportRef.value;
+      if (!viewport) return;
+      const behavior = options.behavior ?? "auto";
+      if (typeof viewport.scrollTo === "function") {
+        viewport.scrollTo({ top: options.top, left: options.left, behavior });
+      } else {
+        if (options.top !== void 0) viewport.scrollTop = options.top;
+        if (options.left !== void 0) viewport.scrollLeft = options.left;
+      }
+      handleScroll();
+    }
+    function scrollToTop(behavior) {
+      scrollTo({ top: 0, behavior });
+    }
+    function scrollToBottom(behavior) {
+      const viewport = viewportRef.value;
+      if (!viewport) return;
+      scrollTo({ top: viewport.scrollHeight, behavior });
+    }
+    onMounted(() => {
+      syncState();
+      stopObserving = observeScrollAreaSize([viewportRef.value, contentRef.value], syncState);
+    });
+    onBeforeUnmount(() => {
+      dragSession?.dispose();
+      dragSession = null;
+      stopObserving?.();
+      stopObserving = null;
+    });
+    watch(
+      () => [props.direction, props.minThumbSize],
+      () => {
+        void nextTick(syncState);
+      }
+    );
+    expose({
+      scrollTo,
+      scrollToTop,
+      scrollToBottom,
+      getViewport: () => viewportRef.value,
+      getState: () => scrollState.value
+    });
+    function renderScrollbar(axis) {
+      const axisState = axis === "y" ? scrollState.value.y : scrollState.value.x;
+      if (!shouldRenderScrollAreaScrollbar(props.scrollbar, props.direction, axis, axisState)) {
+        return null;
+      }
+      return h(
+        "div",
+        {
+          key: `scrollbar-${axis}`,
+          class: getScrollAreaScrollbarClasses(axis, props.scrollbarSize, props.scrollbar),
+          "data-scroll-area-scrollbar": axis,
+          "aria-hidden": "true",
+          onMousedown: (event) => handleTrackMouseDown(axis, event)
+        },
+        [
+          h("div", {
+            class: getScrollAreaThumbClasses(axis, draggingAxis.value === axis),
+            style: getScrollAreaThumbStyle(axis, axisState),
+            "data-scroll-area-thumb": axis
+          })
+        ]
+      );
+    }
+    return () => {
+      const shadows = props.shadow ? getScrollAreaShadowSides(scrollState.value, props.direction) : [];
+      return h(
+        "div",
+        {
+          ...attrs,
+          class: classNames(scrollAreaRootClasses, props.className, coerceClassValue(attrs.class)),
+          style: mergeStyleValues(attrs.style),
+          "data-scroll-area": ""
+        },
+        [
+          h(
+            "div",
+            {
+              ref: viewportRef,
+              class: getScrollAreaViewportClasses(props.direction, props.viewportClassName),
+              style: getScrollAreaBoxStyle(props),
+              tabindex: 0,
+              role: props.ariaLabel ? "region" : void 0,
+              "aria-label": props.ariaLabel,
+              "data-scroll-area-viewport": "",
+              onScroll: handleScroll
+            },
+            [
+              h(
+                "div",
+                {
+                  ref: contentRef,
+                  class: getScrollAreaContentClasses(props.direction),
+                  "data-scroll-area-content": ""
+                },
+                slots.default?.()
+              )
+            ]
+          ),
+          ...shadows.map(
+            (side) => h("div", {
+              key: `shadow-${side}`,
+              class: getScrollAreaShadowClasses(side),
+              "data-scroll-area-shadow": side,
+              "aria-hidden": "true"
+            })
+          ),
+          renderScrollbar("y"),
+          renderScrollbar("x")
+        ]
+      );
+    };
+  }
+});
+var ScrollArea_default = ScrollArea;
+
+export {
+  ScrollArea,
+  ScrollArea_default
+};

package/dist/chunk-6GR5U4UB.mjs

@@ -0,0 +1,225 @@
+import {
+  Button
+} from "./chunk-YZBQ6IR7.mjs";
+import {
+  Link
+} from "./chunk-3MO7A4GU.mjs";
+
+// src/components/PageHeader.ts
+import { defineComponent, getCurrentInstance, h } from "vue";
+import {
+  chevronLeftSolidIcon20PathD,
+  coerceClassValue,
+  composeComponentClasses,
+  getPageHeaderBackButtonClasses,
+  getPageHeaderRootClasses,
+  hasPageHeaderHeadingContent,
+  icon20ViewBox,
+  mergeStyleValues,
+  pageHeaderActionsClasses,
+  pageHeaderBackIconClasses,
+  pageHeaderBackWrapClasses,
+  pageHeaderContentClasses,
+  pageHeaderHeadingRowClasses,
+  pageHeaderMainClasses,
+  pageHeaderStartClasses,
+  pageHeaderSubtitleClasses,
+  pageHeaderTitleClasses,
+  pageHeaderTitleRowClasses,
+  resolvePageHeaderBackAriaLabel,
+  resolvePageHeaderBackVisibility
+} from "@expcat/tigercat-core";
+function hasSlotContent(nodes) {
+  return Array.isArray(nodes) && nodes.length > 0;
+}
+function createBackIcon() {
+  return h(
+    "svg",
+    {
+      class: pageHeaderBackIconClasses,
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: icon20ViewBox,
+      fill: "currentColor",
+      "aria-hidden": "true",
+      focusable: "false"
+    },
+    [
+      h("path", {
+        "fill-rule": "evenodd",
+        d: chevronLeftSolidIcon20PathD,
+        "clip-rule": "evenodd"
+      })
+    ]
+  );
+}
+var PageHeader = defineComponent({
+  name: "TigerPageHeader",
+  inheritAttrs: false,
+  props: {
+    /**
+     * Whether to show the back control.
+     * When omitted, the control is shown if `@back`, `backHref`, or a `#back`
+     * slot is provided. Set `false` to force-hide.
+     */
+    showBack: {
+      type: Boolean,
+      default: void 0
+    },
+    /**
+     * Navigation URL for the default back control. Renders a Link instead of
+     * a Button when set and no `#back` slot is provided.
+     */
+    backHref: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Accessible name for the default back control
+     * @default 'Back'
+     */
+    backAriaLabel: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Page title
+     */
+    title: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Secondary text shown beside the title
+     */
+    subTitle: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Additional CSS classes
+     */
+    className: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Inline styles
+     */
+    style: {
+      type: Object,
+      default: void 0
+    }
+  },
+  emits: {
+    /**
+     * Emitted when the default back control is activated
+     */
+    back: (event) => event instanceof MouseEvent
+  },
+  setup(props, { slots, emit, attrs }) {
+    const instance = getCurrentInstance();
+    const handleBack = (event) => {
+      emit("back", event);
+    };
+    return () => {
+      const attrsRecord = attrs;
+      const vnodeProps = instance?.vnode.props;
+      const breadcrumb = slots.breadcrumb?.();
+      const titleSlot = slots.title?.();
+      const subTitleSlot = slots.subTitle?.();
+      const actions = slots.actions?.();
+      const backOverride = slots.back?.();
+      const body = slots.default?.();
+      const hasBreadcrumb = hasSlotContent(breadcrumb);
+      const hasTitleSlot = hasSlotContent(titleSlot);
+      const hasSubTitleSlot = hasSlotContent(subTitleSlot);
+      const hasActions = hasSlotContent(actions);
+      const hasBackOverride = hasSlotContent(backOverride);
+      const hasBody = hasSlotContent(body);
+      const titleContent = hasTitleSlot ? titleSlot : props.title;
+      const subTitleContent = hasSubTitleSlot ? subTitleSlot : props.subTitle;
+      const hasTitle = hasTitleSlot || Boolean(props.title);
+      const hasSubtitle = hasSubTitleSlot || Boolean(props.subTitle);
+      const showBack = resolvePageHeaderBackVisibility({
+        showBack: props.showBack,
+        hasHandler: Boolean(vnodeProps && "onBack" in vnodeProps),
+        hasBackHref: Boolean(props.backHref),
+        hasBackOverride
+      });
+      const showHeading = hasPageHeaderHeadingContent({
+        showBack,
+        hasBreadcrumb,
+        hasTitle,
+        hasSubtitle,
+        hasActions
+      });
+      const backAriaLabel = resolvePageHeaderBackAriaLabel(props.backAriaLabel);
+      const backControl = showBack ? h("div", { class: pageHeaderBackWrapClasses, "data-page-header-back": "" }, [
+        hasBackOverride ? backOverride : props.backHref ? h(
+          Link,
+          {
+            href: props.backHref,
+            underline: false,
+            variant: "default",
+            class: getPageHeaderBackButtonClasses(),
+            "aria-label": backAriaLabel,
+            onClick: handleBack
+          },
+          { default: () => [createBackIcon()] }
+        ) : h(
+          Button,
+          {
+            variant: "ghost",
+            size: "sm",
+            className: getPageHeaderBackButtonClasses(),
+            "aria-label": backAriaLabel,
+            onClick: handleBack
+          },
+          { default: () => [createBackIcon()] }
+        )
+      ]) : null;
+      const mainColumn = hasBreadcrumb || hasTitle || hasSubtitle ? h("div", { class: pageHeaderMainClasses }, [
+        hasBreadcrumb ? breadcrumb : null,
+        hasTitle || hasSubtitle ? h("div", { class: pageHeaderTitleRowClasses }, [
+          hasTitle ? h(
+            "div",
+            { class: pageHeaderTitleClasses, "data-page-header-title": "" },
+            titleContent
+          ) : null,
+          hasSubtitle ? h(
+            "div",
+            { class: pageHeaderSubtitleClasses, "data-page-header-subtitle": "" },
+            subTitleContent
+          ) : null
+        ]) : null
+      ]) : null;
+      const heading = showHeading ? h("div", { class: pageHeaderHeadingRowClasses, "data-page-header-heading": "" }, [
+        h("div", { class: pageHeaderStartClasses }, [backControl, mainColumn]),
+        hasActions ? h(
+          "div",
+          { class: pageHeaderActionsClasses, "data-page-header-actions": "" },
+          actions
+        ) : null
+      ]) : null;
+      return h(
+        "header",
+        {
+          ...attrs,
+          class: composeComponentClasses(
+            getPageHeaderRootClasses(props.className),
+            coerceClassValue(attrsRecord.class)
+          ),
+          style: mergeStyleValues(attrsRecord.style, props.style),
+          "data-page-header": ""
+        },
+        [heading, hasBody ? h("div", { class: pageHeaderContentClasses }, body) : null]
+      );
+    };
+  }
+});
+var PageHeader_default = PageHeader;
+
+export {
+  PageHeader,
+  PageHeader_default
+};