@expcat/tigercat-vue 1.1.0 → 1.2.0

package/dist/chunk-CWQOEU6G.js

@@ -0,0 +1,373 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
+
+
+
+
+var _chunkJDCVS4SJjs = require('./chunk-JDCVS4SJ.js');
+
+// src/components/Spotlight.ts
+
+
+
+
+
+
+
+
+
+var _vue = require('vue');
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+var _tigercatcore = require('@expcat/tigercat-core');
+var spotlightIdCounter = 0;
+var createSpotlightId = () => `tiger-spotlight-${++spotlightIdCounter}`;
+var Spotlight = _vue.defineComponent.call(void 0, {
+  name: "TigerSpotlight",
+  inheritAttrs: false,
+  props: {
+    open: {
+      type: Boolean,
+      default: void 0
+    },
+    defaultOpen: {
+      type: Boolean,
+      default: false
+    },
+    query: {
+      type: String,
+      default: void 0
+    },
+    defaultQuery: {
+      type: String,
+      default: ""
+    },
+    items: {
+      type: Array,
+      default: () => []
+    },
+    title: {
+      type: String,
+      default: "Spotlight"
+    },
+    placeholder: {
+      type: String,
+      default: "Search"
+    },
+    emptyText: {
+      type: String,
+      default: "No results found"
+    },
+    inputAriaLabel: {
+      type: String,
+      default: void 0
+    },
+    listboxLabel: {
+      type: String,
+      default: void 0
+    },
+    closeOnSelect: {
+      type: Boolean,
+      default: true
+    },
+    mask: {
+      type: Boolean,
+      default: true
+    },
+    maskClosable: {
+      type: Boolean,
+      default: true
+    },
+    zIndex: {
+      type: Number,
+      default: 1e3
+    },
+    className: {
+      type: String,
+      default: void 0
+    },
+    defaultActiveFirstItem: {
+      type: Boolean,
+      default: true
+    },
+    filterItem: {
+      type: Function,
+      default: void 0
+    },
+    limit: {
+      type: Number,
+      default: void 0
+    },
+    style: {
+      type: Object,
+      default: void 0
+    },
+    disableTeleport: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ["update:open", "open-change", "close", "update:query", "query-change", "select"],
+  setup(props, { emit, attrs, slots }) {
+    const uncontrolledOpen = _vue.ref.call(void 0, props.defaultOpen);
+    const uncontrolledQuery = _vue.ref.call(void 0, props.defaultQuery);
+    const activeIndex = _vue.ref.call(void 0, -1);
+    const instanceId = createSpotlightId();
+    const titleId = `${instanceId}-title`;
+    const listboxId = `${instanceId}-listbox`;
+    const dialogRef = _vue.ref.call(void 0, null);
+    const inputRef = _vue.ref.call(void 0, null);
+    const previousActiveElement = _vue.ref.call(void 0, null);
+    const resolvedOpen = _vue.computed.call(void 0, () => _nullishCoalesce(props.open, () => ( uncontrolledOpen.value)));
+    const resolvedQuery = _vue.computed.call(void 0, () => _nullishCoalesce(props.query, () => ( uncontrolledQuery.value)));
+    const searchState = _vue.computed.call(void 0, 
+      () => _tigercatcore.getSpotlightSearchState.call(void 0, props.items, resolvedQuery.value, {
+        filterItem: props.filterItem,
+        limit: props.limit
+      })
+    );
+    const setOpenValue = (nextOpen) => {
+      if (props.open === void 0) uncontrolledOpen.value = nextOpen;
+      emit("update:open", nextOpen);
+      emit("open-change", nextOpen);
+      if (!nextOpen) emit("close");
+    };
+    const setQueryValue = (nextQuery) => {
+      if (props.query === void 0) uncontrolledQuery.value = nextQuery;
+      emit("update:query", nextQuery);
+      emit("query-change", nextQuery);
+    };
+    const closeSpotlight = () => setOpenValue(false);
+    const selectItem = (item) => {
+      if (item.disabled) return;
+      emit("select", item);
+      if (props.closeOnSelect) closeSpotlight();
+    };
+    const updateActiveIndex = () => {
+      activeIndex.value = resolvedOpen.value ? _tigercatcore.getInitialPickerActiveIndex.call(void 0, 
+        searchState.value.flatResults,
+        props.defaultActiveFirstItem,
+        (result) => result.item.disabled === true
+      ) : -1;
+    };
+    const handleKeyDown = (event) => {
+      switch (event.key) {
+        case "ArrowDown":
+        case "ArrowUp":
+        case "Home":
+        case "End":
+          event.preventDefault();
+          activeIndex.value = _tigercatcore.getPickerNavigationIndex.call(void 0, 
+            searchState.value.flatResults,
+            activeIndex.value,
+            event.key,
+            (result) => result.item.disabled === true
+          );
+          break;
+        case "Enter": {
+          event.preventDefault();
+          const result = searchState.value.flatResults[activeIndex.value];
+          if (result) selectItem(result.item);
+          break;
+        }
+        case "Escape":
+          event.preventDefault();
+          closeSpotlight();
+          break;
+      }
+    };
+    const handleMaskClick = (event) => {
+      if (_tigercatcore.shouldCloseOnMaskClick.call(void 0, event, props.maskClosable)) {
+        closeSpotlight();
+      }
+    };
+    _chunkJDCVS4SJjs.useVueBodyScrollLock.call(void 0, resolvedOpen);
+    _chunkJDCVS4SJjs.useVueFocusTrap.call(void 0, { enabled: resolvedOpen, containerRef: dialogRef });
+    let cleanupEscape;
+    _vue.onMounted.call(void 0, () => {
+      cleanupEscape = _chunkJDCVS4SJjs.useVueEscapeKey.call(void 0, { enabled: resolvedOpen, onEscape: closeSpotlight });
+      if (resolvedOpen.value) {
+        _vue.nextTick.call(void 0, () => _tigercatcore.focusFirst.call(void 0, [inputRef.value, dialogRef.value]));
+      }
+    });
+    _vue.onBeforeUnmount.call(void 0, () => _optionalChain([cleanupEscape, 'optionalCall', _ => _()]));
+    _vue.watch.call(void 0, [resolvedOpen, resolvedQuery, () => props.items], updateActiveIndex, { immediate: true });
+    _vue.watch.call(void 0, 
+      resolvedOpen,
+      async (isOpen) => {
+        if (!isOpen) {
+          _tigercatcore.restoreFocus.call(void 0, previousActiveElement.value);
+          return;
+        }
+        previousActiveElement.value = _tigercatcore.captureActiveElement.call(void 0, );
+        await _vue.nextTick.call(void 0, );
+        _tigercatcore.focusFirst.call(void 0, [inputRef.value, dialogRef.value]);
+      },
+      { flush: "post" }
+    );
+    return () => {
+      if (!resolvedOpen.value) return null;
+      const state = searchState.value;
+      const activeResult = state.flatResults[activeIndex.value];
+      const activeOptionId = activeResult ? _tigercatcore.getPickerOptionId.call(void 0, listboxId, activeResult.flatIndex) : void 0;
+      const content = _vue.h.call(void 0, 
+        "div",
+        {
+          class: _tigercatcore.spotlightRootClasses,
+          style: { zIndex: props.zIndex },
+          "data-tiger-spotlight-root": ""
+        },
+        [
+          props.mask ? _vue.h.call(void 0, "div", {
+            class: _tigercatcore.spotlightMaskClasses,
+            "aria-hidden": "true",
+            onClick: handleMaskClick
+          }) : null,
+          _vue.h.call(void 0, 
+            "div",
+            {
+              ...attrs,
+              ref: dialogRef,
+              id: instanceId,
+              role: "dialog",
+              "aria-modal": "true",
+              "aria-labelledby": props.title ? titleId : void 0,
+              tabindex: -1,
+              class: _tigercatcore.classNames.call(void 0, 
+                _tigercatcore.spotlightPanelClasses,
+                props.className,
+                _tigercatcore.coerceClassValue.call(void 0, attrs.class)
+              ),
+              style: _tigercatcore.mergeStyleValues.call(void 0, 
+                props.style,
+                attrs.style
+              )
+            },
+            [
+              _vue.h.call(void 0, "div", { class: _tigercatcore.spotlightHeaderClasses }, [
+                props.title ? _vue.h.call(void 0, "div", { id: titleId, class: _tigercatcore.spotlightTitleClasses }, props.title) : null,
+                _vue.h.call(void 0, "input", {
+                  ref: inputRef,
+                  value: resolvedQuery.value,
+                  type: "search",
+                  class: _tigercatcore.spotlightInputClasses,
+                  placeholder: props.placeholder,
+                  "aria-label": _nullishCoalesce(props.inputAriaLabel, () => ( props.placeholder)),
+                  autocomplete: "off",
+                  ..._tigercatcore.getPickerComboboxAria.call(void 0, {
+                    expanded: true,
+                    listboxId,
+                    activeOptionId
+                  }),
+                  onInput: (event) => setQueryValue(event.target.value),
+                  onKeydown: handleKeyDown
+                })
+              ]),
+              state.flatResults.length > 0 ? _vue.h.call(void 0, 
+                "div",
+                {
+                  ..._tigercatcore.getPickerListboxAria.call(void 0, { id: listboxId, label: props.listboxLabel }),
+                  class: _tigercatcore.spotlightListClasses
+                },
+                state.groups.map(
+                  (group, groupIndex) => _vue.h.call(void 0, 
+                    "div",
+                    {
+                      key: _nullishCoalesce(group.label, () => ( `group-${groupIndex}`)),
+                      class: _tigercatcore.spotlightGroupClasses,
+                      role: group.label ? "group" : void 0,
+                      "aria-label": group.label
+                    },
+                    [
+                      group.label ? _vue.h.call(void 0, "div", { class: _tigercatcore.spotlightGroupLabelClasses }, group.label) : null,
+                      ...group.items.map((result) => {
+                        const active = result.flatIndex === activeIndex.value;
+                        const shortcutLabel = _tigercatcore.getSpotlightShortcutLabel.call(void 0, result.item.shortcut);
+                        const iconNode = slots.icon ? slots.icon({ item: result.item }) : result.item.icon;
+                        return _vue.h.call(void 0, 
+                          "div",
+                          {
+                            key: String(result.item.key),
+                            id: _tigercatcore.getPickerOptionId.call(void 0, listboxId, result.flatIndex),
+                            ..._tigercatcore.getPickerOptionAria.call(void 0, {
+                              selected: active,
+                              disabled: result.item.disabled
+                            }),
+                            class: _tigercatcore.getSpotlightOptionClasses.call(void 0, 
+                              active,
+                              result.item.disabled === true
+                            ),
+                            onMouseenter: () => {
+                              activeIndex.value = result.flatIndex;
+                            },
+                            onMousedown: (event) => event.preventDefault(),
+                            onClick: () => selectItem(result.item)
+                          },
+                          [
+                            iconNode ? _vue.h.call(void 0, "span", { class: "shrink-0" }, iconNode) : null,
+                            _vue.h.call(void 0, "span", { class: "min-w-0 flex-1" }, [
+                              _vue.h.call(void 0, 
+                                "span",
+                                { class: "block truncate text-sm font-medium" },
+                                result.item.label
+                              ),
+                              result.item.description ? _vue.h.call(void 0, 
+                                "span",
+                                {
+                                  class: "block truncate text-xs text-[var(--tiger-spotlight-item-description,var(--tiger-text-muted,#6b7280))]"
+                                },
+                                result.item.description
+                              ) : null
+                            ]),
+                            shortcutLabel ? _vue.h.call(void 0, 
+                              "kbd",
+                              {
+                                class: "shrink-0 rounded border border-[var(--tiger-spotlight-shortcut-border,var(--tiger-border,#d1d5db))] px-1.5 py-0.5 text-xs text-[var(--tiger-spotlight-shortcut-text,var(--tiger-text-muted,#6b7280))]"
+                              },
+                              shortcutLabel
+                            ) : null
+                          ]
+                        );
+                      })
+                    ]
+                  )
+                )
+              ) : _vue.h.call(void 0, "div", { class: _tigercatcore.spotlightEmptyClasses }, props.emptyText)
+            ]
+          )
+        ]
+      );
+      return _chunkJDCVS4SJjs.renderVueBodyTeleport.call(void 0, content, props.disableTeleport);
+    };
+  }
+});
+var Spotlight_default = Spotlight;
+
+
+
+
+exports.Spotlight = Spotlight; exports.Spotlight_default = Spotlight_default;

package/dist/chunk-CZALMJH3.mjs

@@ -1,11 +1,29 @@
-import { Textarea } from './chunk-MKBIVETW.mjs';
-import { Button } from './chunk-UM5GGKIX.mjs';
-import { Tag } from './chunk-3G4VPV4D.mjs';
-import { Text } from './chunk-6V7XCCXN.mjs';
-import { Avatar } from './chunk-COCECPMG.mjs';
-import { defineComponent, ref, computed, h } from 'vue';
-import { buildCommentTree, clipCommentTreeDepth, classNames, coerceClassValue, mergeStyleValues, formatCommentTime } from '@expcat/tigercat-core';
+import {
+  Textarea
+} from "./chunk-MKBIVETW.mjs";
+import {
+  Button
+} from "./chunk-UM5GGKIX.mjs";
+import {
+  Tag
+} from "./chunk-3G4VPV4D.mjs";
+import {
+  Text
+} from "./chunk-6V7XCCXN.mjs";
+import {
+  Avatar
+} from "./chunk-COCECPMG.mjs";
 
+// src/components/CommentThread.ts
+import { defineComponent, computed, h, ref } from "vue";
+import {
+  classNames,
+  coerceClassValue,
+  mergeStyleValues,
+  buildCommentTree,
+  clipCommentTreeDepth,
+  formatCommentTime
+} from "@expcat/tigercat-core";
 var CommentThread = defineComponent({
   name: "TigerCommentThread",
   inheritAttrs: false,
@@ -385,4 +403,7 @@ var CommentThread = defineComponent({
 });
 var CommentThread_default = CommentThread;
 
-export { CommentThread, CommentThread_default };
+export {
+  CommentThread,
+  CommentThread_default
+};

package/dist/chunk-D3U2NJ32.mjs

@@ -0,0 +1,154 @@
+// src/components/ColorSwatch.ts
+import { computed, defineComponent, h, nextTick, ref } from "vue";
+import {
+  classNames,
+  coerceClassValue,
+  colorSwatchBaseClasses,
+  colorSwatchGridClasses,
+  colorSwatchGroupClasses,
+  colorSwatchGroupLabelClasses,
+  flattenColorSwatchGroups,
+  getColorSwatchButtonClasses,
+  getColorSwatchCheckClasses,
+  getNextColorSwatchIndex,
+  isColorSwatchSelected,
+  normalizeColorSwatchGroups
+} from "@expcat/tigercat-core";
+var checkPathD = "M5 10.5 8 13.5 15 6.5";
+var ColorSwatch = defineComponent({
+  name: "TigerColorSwatch",
+  props: {
+    modelValue: { type: String, default: void 0 },
+    disabled: { type: Boolean, default: false },
+    size: { type: String, default: "md" },
+    colors: { type: Array, default: void 0 },
+    groups: { type: Array, default: void 0 },
+    columns: { type: Number, default: 6 },
+    ariaLabel: { type: String, default: "Color swatches" }
+  },
+  emits: ["update:modelValue", "change"],
+  setup(props, { attrs, emit }) {
+    const focusIndex = ref(-1);
+    const optionRefs = ref([]);
+    const normalizedGroups = computed(() => normalizeColorSwatchGroups(props.groups, props.colors));
+    const options = computed(() => flattenColorSwatchGroups(normalizedGroups.value));
+    const selectedIndex = computed(
+      () => options.value.findIndex((option) => isColorSwatchSelected(option.value, props.modelValue))
+    );
+    const firstEnabledIndex = computed(() => options.value.findIndex((option) => !option.disabled));
+    const activeIndex = computed(
+      () => selectedIndex.value >= 0 ? selectedIndex.value : firstEnabledIndex.value
+    );
+    function handleSelect(option) {
+      if (props.disabled || option.disabled) return;
+      emit("update:modelValue", option.value);
+      emit("change", option.value, option);
+    }
+    function handleKeydown(optionIndex, event) {
+      if (props.disabled) return;
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        const option = options.value[optionIndex];
+        if (option) handleSelect(option);
+        return;
+      }
+      const nextIndex = getNextColorSwatchIndex(
+        options.value,
+        optionIndex,
+        event.key,
+        props.columns
+      );
+      if (nextIndex === -1 || nextIndex === optionIndex) return;
+      event.preventDefault();
+      focusIndex.value = nextIndex;
+      nextTick(() => optionRefs.value[nextIndex]?.focus());
+    }
+    return () => {
+      let flatIndex = 0;
+      optionRefs.value = [];
+      return h(
+        "div",
+        {
+          class: classNames(colorSwatchBaseClasses, coerceClassValue(attrs.class)),
+          role: "radiogroup",
+          "aria-label": props.ariaLabel,
+          "aria-disabled": props.disabled || void 0
+        },
+        normalizedGroups.value.map(
+          (group, groupIndex) => h(
+            "div",
+            { key: `${groupIndex}-${group.label ?? "group"}`, class: colorSwatchGroupClasses },
+            [
+              group.label ? h("div", { class: colorSwatchGroupLabelClasses }, group.label) : null,
+              h(
+                "div",
+                {
+                  class: colorSwatchGridClasses,
+                  style: { gridTemplateColumns: `repeat(${props.columns}, minmax(0, 1fr))` }
+                },
+                group.colors.map((option) => {
+                  const optionIndex = flatIndex;
+                  flatIndex += 1;
+                  const selected = isColorSwatchSelected(option.value, props.modelValue);
+                  const optionDisabled = props.disabled || !!option.disabled;
+                  const tabIndex = !optionDisabled && optionIndex === (focusIndex.value >= 0 ? focusIndex.value : activeIndex.value) ? 0 : -1;
+                  return h(
+                    "button",
+                    {
+                      key: `${option.groupIndex}-${option.index}-${option.value}`,
+                      ref: ((el) => {
+                        if (el instanceof HTMLElement) optionRefs.value[optionIndex] = el;
+                      }),
+                      type: "button",
+                      class: getColorSwatchButtonClasses(props.size, selected, optionDisabled),
+                      style: { backgroundColor: option.value },
+                      role: "radio",
+                      "aria-checked": selected,
+                      "aria-label": option.label,
+                      "aria-disabled": optionDisabled || void 0,
+                      tabindex: tabIndex,
+                      onFocus: () => {
+                        focusIndex.value = optionIndex;
+                      },
+                      onClick: () => handleSelect(option),
+                      onKeydown: (event) => handleKeydown(optionIndex, event)
+                    },
+                    selected ? h(
+                      "span",
+                      { class: getColorSwatchCheckClasses(props.size), "aria-hidden": "true" },
+                      [
+                        h(
+                          "svg",
+                          {
+                            viewBox: "0 0 20 20",
+                            fill: "none",
+                            stroke: "currentColor",
+                            strokeWidth: "2.5",
+                            class: "h-full w-full"
+                          },
+                          [
+                            h("path", {
+                              d: checkPathD,
+                              strokeLinecap: "round",
+                              strokeLinejoin: "round"
+                            })
+                          ]
+                        )
+                      ]
+                    ) : void 0
+                  );
+                })
+              )
+            ]
+          )
+        )
+      );
+    };
+  }
+});
+var ColorSwatch_default = ColorSwatch;
+
+export {
+  ColorSwatch,
+  ColorSwatch_default
+};