@expcat/tigercat-vue 2.0.0-rc.2 → 2.0.4

package/dist/chunk-BDTPFPSB.mjs

@@ -1,163 +0,0 @@
-// src/utils/overlay.ts
-import {
-  getFocusTrapNavigation,
-  getFocusableElements,
-  isEscapeKey,
-  isEventOutside,
-  lockBodyScroll,
-  computeFloatingPosition,
-  autoUpdateFloating
-} from "@expcat/tigercat-core";
-import { h, ref, Teleport, watch, onBeforeUnmount } from "vue";
-function useVueClickOutside({
-  enabled,
-  containerRef,
-  refs,
-  onOutsideClick,
-  defer = false
-}) {
-  let timer;
-  const handler = (event) => {
-    if (!enabled.value) return;
-    const elements = refs?.length ? refs.map((ref2) => ref2?.value) : [containerRef?.value];
-    if (!elements.some(Boolean)) return;
-    if (isEventOutside(event, elements)) {
-      onOutsideClick();
-    }
-  };
-  const attach = () => document.addEventListener("click", handler);
-  const detach = () => document.removeEventListener("click", handler);
-  if (!defer) {
-    attach();
-    return () => detach();
-  }
-  timer = window.setTimeout(() => attach(), 0);
-  return () => {
-    if (timer !== void 0) window.clearTimeout(timer);
-    detach();
-  };
-}
-function useVueEscapeKey({ enabled, onEscape }) {
-  const handler = (event) => {
-    if (!enabled.value) return;
-    if (event.defaultPrevented) return;
-    if (!isEscapeKey(event)) return;
-    onEscape();
-  };
-  document.addEventListener("keydown", handler);
-  return () => document.removeEventListener("keydown", handler);
-}
-function useVueBodyScrollLock(enabled) {
-  watch(
-    enabled,
-    (isEnabled, _prevEnabled, onCleanup) => {
-      if (!isEnabled) return;
-      const unlock = lockBodyScroll();
-      onCleanup(() => unlock());
-    },
-    { immediate: true }
-  );
-}
-function renderVueBodyTeleport(children, disabled = false) {
-  const normalizedChildren = children == null ? [] : Array.isArray(children) ? children : [children];
-  return h(Teleport, { to: "body", disabled }, normalizedChildren);
-}
-function useVueFocusTrap({ enabled, containerRef }) {
-  watch(
-    [enabled, containerRef],
-    ([isEnabled, container], _previous, onCleanup) => {
-      if (!isEnabled || !container) return;
-      const handler = (event) => {
-        const focusables = getFocusableElements(container);
-        const activeElement = container.ownerDocument?.activeElement ?? document.activeElement;
-        const navigation = getFocusTrapNavigation(event, focusables, activeElement);
-        if (!navigation.shouldHandle || !navigation.next) return;
-        event.preventDefault();
-        navigation.next.focus();
-      };
-      container.addEventListener("keydown", handler);
-      onCleanup(() => container.removeEventListener("keydown", handler));
-    },
-    { immediate: true, flush: "post" }
-  );
-}
-function useVueFloating(options) {
-  const {
-    referenceRef,
-    floatingRef,
-    enabled,
-    placement: initialPlacement = "bottom",
-    offset: offsetDistance = 8,
-    arrowRef,
-    onPlacementChange
-  } = options;
-  const x = ref(0);
-  const y = ref(0);
-  const placement = ref(initialPlacement);
-  const arrowX = ref(void 0);
-  const arrowY = ref(void 0);
-  let cleanup = null;
-  const update = async () => {
-    const reference = referenceRef.value;
-    const floating = floatingRef.value;
-    if (!reference || !floating) return;
-    const floatingOptions = {
-      placement: initialPlacement,
-      offset: offsetDistance,
-      flip: true,
-      shift: true,
-      arrowElement: arrowRef?.value
-    };
-    const result = await computeFloatingPosition(
-      reference,
-      floating,
-      floatingOptions
-    );
-    x.value = result.x;
-    y.value = result.y;
-    if (result.placement !== placement.value) {
-      placement.value = result.placement;
-      onPlacementChange?.(result.placement);
-    }
-    if (result.arrow) {
-      arrowX.value = result.arrow.x;
-      arrowY.value = result.arrow.y;
-    }
-  };
-  watch(
-    [enabled, referenceRef, floatingRef],
-    ([isEnabled, reference, floating]) => {
-      if (cleanup) {
-        cleanup();
-        cleanup = null;
-      }
-      if (!isEnabled || !reference || !floating) return;
-      update();
-      cleanup = autoUpdateFloating(reference, floating, update);
-    },
-    { immediate: true }
-  );
-  onBeforeUnmount(() => {
-    if (cleanup) {
-      cleanup();
-      cleanup = null;
-    }
-  });
-  return {
-    x,
-    y,
-    placement,
-    arrowX,
-    arrowY,
-    update
-  };
-}
-
-export {
-  useVueClickOutside,
-  useVueEscapeKey,
-  useVueBodyScrollLock,
-  renderVueBodyTeleport,
-  useVueFocusTrap,
-  useVueFloating
-};

package/dist/chunk-EWUHEW6W.mjs

@@ -1,219 +0,0 @@
-// src/components/ColorPicker.ts
-import { defineComponent, h, ref, computed, watch, onBeforeUnmount } from "vue";
-import {
-  colorPickerBaseClasses,
-  getColorPickerTriggerClasses,
-  colorPickerPanelClasses,
-  colorPickerInputClasses,
-  colorPickerPresetClasses,
-  hexToRgb,
-  rgbToHex,
-  rgbToHsv,
-  hsvToRgb,
-  formatColorString,
-  parseColorInput,
-  classNames,
-  coerceClassValue
-} from "@expcat/tigercat-core";
-var ColorPicker = defineComponent({
-  name: "TigerColorPicker",
-  props: {
-    modelValue: { type: String, default: "#2563eb" },
-    disabled: { type: Boolean, default: false },
-    size: { type: String, default: "md" },
-    showAlpha: { type: Boolean, default: false },
-    format: { type: String, default: "hex" },
-    presets: { type: Array, default: void 0 }
-  },
-  emits: ["update:modelValue", "change"],
-  setup(props, { emit, attrs }) {
-    const isOpen = ref(false);
-    const alpha = ref(1);
-    const containerRef = ref(null);
-    const rgb = computed(() => hexToRgb(props.modelValue));
-    const hsv = computed(() => rgbToHsv(rgb.value.r, rgb.value.g, rgb.value.b));
-    const displayValue = computed(
-      () => formatColorString(
-        rgb.value.r,
-        rgb.value.g,
-        rgb.value.b,
-        props.format,
-        props.showAlpha ? alpha.value : void 0
-      )
-    );
-    const swatchColor = computed(
-      () => props.showAlpha ? `rgba(${rgb.value.r}, ${rgb.value.g}, ${rgb.value.b}, ${alpha.value})` : props.modelValue
-    );
-    const inputValue = ref(displayValue.value);
-    watch(displayValue, (v) => {
-      inputValue.value = v;
-    });
-    function togglePanel() {
-      if (props.disabled) return;
-      isOpen.value = !isOpen.value;
-    }
-    function closePanel() {
-      isOpen.value = false;
-    }
-    function handleTriggerKeydown(e) {
-      if (props.disabled) return;
-      if (e.key === "Enter" || e.key === " " || e.key === "Spacebar") {
-        e.preventDefault();
-        isOpen.value = !isOpen.value;
-      } else if (e.key === "Escape" && isOpen.value) {
-        isOpen.value = false;
-      }
-    }
-    function handleAlphaChange(e) {
-      alpha.value = Number(e.target.value) / 100;
-    }
-    function handleHueChange(e) {
-      const hue = Number(e.target.value);
-      const { r, g, b } = hsvToRgb(hue, hsv.value.s, hsv.value.v);
-      const hex = rgbToHex(r, g, b);
-      emit("update:modelValue", hex);
-      emit("change", hex);
-    }
-    function handleInputChange(e) {
-      const val = e.target.value;
-      inputValue.value = val;
-      const hex = parseColorInput(val);
-      if (hex) {
-        emit("update:modelValue", hex);
-        emit("change", hex);
-      }
-    }
-    function handlePresetClick(color) {
-      emit("update:modelValue", color);
-      emit("change", color);
-    }
-    function handlePresetKeydown(e, color) {
-      if (e.key === "Enter" || e.key === " " || e.key === "Spacebar") {
-        e.preventDefault();
-        handlePresetClick(color);
-      }
-    }
-    function handleClickOutside(e) {
-      if (containerRef.value && !containerRef.value.contains(e.target)) {
-        closePanel();
-      }
-    }
-    watch(isOpen, (val) => {
-      if (val) document.addEventListener("click", handleClickOutside);
-      else document.removeEventListener("click", handleClickOutside);
-    });
-    onBeforeUnmount(() => {
-      document.removeEventListener("click", handleClickOutside);
-    });
-    return () => h(
-      "div",
-      {
-        ref: containerRef,
-        class: classNames(colorPickerBaseClasses, coerceClassValue(attrs.class))
-      },
-      [
-        // Color trigger swatch
-        h("div", {
-          class: getColorPickerTriggerClasses(props.size, props.disabled),
-          style: { backgroundColor: swatchColor.value },
-          role: "button",
-          "aria-label": "Pick color",
-          "aria-haspopup": "dialog",
-          "aria-expanded": isOpen.value,
-          "aria-disabled": props.disabled || void 0,
-          tabindex: props.disabled ? -1 : 0,
-          onClick: togglePanel,
-          onKeydown: handleTriggerKeydown
-        }),
-        // Panel
-        isOpen.value ? h("div", { class: colorPickerPanelClasses }, [
-          // Hue slider
-          h("div", { class: "mb-2" }, [
-            h(
-              "label",
-              { class: "block text-xs text-[var(--tiger-text-muted,#6b7280)] mb-1" },
-              "Hue"
-            ),
-            h("input", {
-              type: "range",
-              min: 0,
-              max: 360,
-              value: hsv.value.h,
-              class: "w-full h-2 rounded-full cursor-pointer accent-[var(--tiger-primary,#2563eb)]",
-              "aria-label": "Hue",
-              onInput: handleHueChange
-            })
-          ]),
-          // Alpha slider
-          props.showAlpha ? h("div", { class: "mb-2" }, [
-            h(
-              "label",
-              { class: "block text-xs text-[var(--tiger-text-muted,#6b7280)] mb-1" },
-              "Alpha"
-            ),
-            h("input", {
-              type: "range",
-              min: 0,
-              max: 100,
-              value: Math.round(alpha.value * 100),
-              class: "w-full h-2 rounded-full cursor-pointer accent-[var(--tiger-primary,#2563eb)]",
-              "aria-label": "Alpha",
-              onInput: handleAlphaChange
-            })
-          ]) : null,
-          // Color value input (rendered in the selected format)
-          h("div", { class: "mb-2" }, [
-            h(
-              "label",
-              {
-                class: "block text-xs text-[var(--tiger-text-muted,#6b7280)] mb-1 uppercase"
-              },
-              props.format
-            ),
-            h("input", {
-              type: "text",
-              class: colorPickerInputClasses,
-              value: inputValue.value,
-              "aria-label": "Color value",
-              onInput: handleInputChange
-            })
-          ]),
-          // Preview
-          h("div", { class: "flex items-center gap-2 mb-2" }, [
-            h("div", {
-              class: "w-8 h-8 rounded border border-[var(--tiger-border,#d1d5db)]",
-              style: { backgroundColor: swatchColor.value },
-              "aria-label": "Color preview"
-            }),
-            h(
-              "span",
-              { class: "text-xs font-mono text-[var(--tiger-text,#111827)]" },
-              displayValue.value
-            )
-          ]),
-          // Presets
-          props.presets && props.presets.length > 0 ? h("div", { class: "flex flex-wrap gap-1" }, [
-            ...props.presets.map(
-              (color) => h("div", {
-                key: color,
-                class: colorPickerPresetClasses,
-                style: { backgroundColor: color },
-                role: "button",
-                tabindex: 0,
-                "aria-label": `Select ${color}`,
-                onClick: () => handlePresetClick(color),
-                onKeydown: (e) => handlePresetKeydown(e, color)
-              })
-            )
-          ]) : null
-        ]) : null
-      ]
-    );
-  }
-});
-var ColorPicker_default = ColorPicker;
-
-export {
-  ColorPicker,
-  ColorPicker_default
-};