@expcat/tigercat-vue 2.1.1 → 2.1.3

package/dist/chunk-G6PIOE4B.mjs

@@ -0,0 +1,528 @@
+import {
+  ColorSwatch
+} from "./chunk-4H3PX46K.mjs";
+import {
+  FORM_ITEM_CONTROL_INJECTION_KEY
+} from "./chunk-P2LZ2MR5.mjs";
+import {
+  renderVueOverlayTeleport,
+  useVueAnchoredOverlay,
+  useVueBodyScrollLock,
+  useVueFocusTrap
+} from "./chunk-Y63TRXZO.mjs";
+import {
+  useTigerConfig
+} from "./chunk-4GOTWNOO.mjs";
+
+// src/components/ColorPicker.ts
+import {
+  computed,
+  defineComponent,
+  h,
+  inject,
+  nextTick,
+  onBeforeUnmount,
+  provide,
+  ref,
+  watch
+} from "vue";
+import {
+  applyColorPickerAlpha,
+  applyColorPickerHue,
+  classNames,
+  coerceClassValue,
+  colorPickerBaseClasses,
+  colorPickerCheckerboardStyle,
+  colorPickerChromeLabelClasses,
+  colorPickerClearButtonClasses,
+  colorPickerHueTrackStyle,
+  colorPickerInputClasses,
+  colorPickerPanelClasses,
+  colorPickerPreviewClasses,
+  colorPickerSliderTrackClasses,
+  colorPickerSvPlaneClasses,
+  colorPickerSvThumbClasses,
+  colorPickerTriggerSwatchClasses,
+  commitPresetColor,
+  createDocumentDragSession,
+  cssColorFromHsva,
+  formatHsva,
+  getColorPickerAlphaTrackStyle,
+  getColorPickerFormatLabel,
+  getColorPickerLabels,
+  getColorPickerSvPlaneStyle,
+  getColorPickerTriggerClasses,
+  hsvaFromSvPointer,
+  isColorPickerEmpty,
+  mergeAriaDescribedBy,
+  mergeHsvaHue,
+  mergeTigerLocale,
+  nudgeColorPickerSv,
+  parseColorInput,
+  parseColorToHsva,
+  seedColorPickerHsva,
+  selectDoneActionClasses,
+  selectDoneButtonClasses,
+  SHAKE_CLASS,
+  runShakeAnimation
+} from "@expcat/tigercat-core";
+var ColorPicker = defineComponent({
+  name: "TigerColorPicker",
+  inheritAttrs: false,
+  props: {
+    modelValue: { type: String, default: void 0 },
+    defaultValue: { type: String, default: void 0 },
+    disabled: Boolean,
+    size: { type: String, default: "md" },
+    showAlpha: Boolean,
+    format: { type: String, default: "hex" },
+    presets: { type: Array, default: void 0 },
+    locale: { type: Object, default: void 0 },
+    labels: { type: Object, default: void 0 },
+    open: { type: Boolean, default: void 0 },
+    defaultOpen: { type: Boolean, default: false },
+    clearable: { type: Boolean, default: true },
+    closeOnSelect: { type: Boolean, default: true },
+    name: String,
+    id: String,
+    status: { type: String, default: void 0 },
+    placement: { type: String, default: "bottom-start" },
+    offset: { type: Number, default: 4 },
+    dropdownClassName: String,
+    getPopupContainer: { type: Function },
+    className: String
+  },
+  emits: ["update:modelValue", "update:open", "change", "input", "open-change", "blur"],
+  setup(props, { emit, attrs, expose }) {
+    const config = useTigerConfig();
+    const formItemControl = inject(
+      FORM_ITEM_CONTROL_INJECTION_KEY,
+      null
+    );
+    provide(FORM_ITEM_CONTROL_INJECTION_KEY, null);
+    const mergedLocale = computed(() => mergeTigerLocale(config.value.locale, props.locale));
+    const labels = computed(() => getColorPickerLabels(mergedLocale.value, props.labels));
+    const effectiveDisabled = computed(
+      () => props.disabled || (formItemControl?.disabled.value ?? false)
+    );
+    const status = computed(
+      () => props.status ?? formItemControl?.status.value ?? "default"
+    );
+    const effectiveId = computed(() => props.id ?? formItemControl?.id.value);
+    const effectiveName = computed(() => props.name ?? formItemControl?.name.value);
+    const innerValue = ref(props.defaultValue);
+    const innerOpen = ref(props.defaultOpen);
+    const dragging = ref(false);
+    watch(
+      () => props.modelValue,
+      (value) => {
+        if (value !== void 0) innerValue.value = value;
+      }
+    );
+    const committed = computed(() => {
+      if (props.modelValue !== void 0) return props.modelValue;
+      if (formItemControl?.value.value !== void 0) {
+        return formItemControl.value.value;
+      }
+      return innerValue.value;
+    });
+    const isOpen = computed(() => props.open !== void 0 ? props.open : innerOpen.value);
+    const hsva = ref(seedColorPickerHsva(committed.value));
+    const inputValue = ref(
+      isColorPickerEmpty(committed.value) ? "" : formatHsva(seedColorPickerHsva(committed.value), props.format, props.showAlpha)
+    );
+    watch(
+      () => [committed.value, props.format, props.showAlpha],
+      () => {
+        if (dragging.value) return;
+        const parsed = parseColorToHsva(committed.value);
+        if (parsed) {
+          hsva.value = mergeHsvaHue(hsva.value, parsed);
+          inputValue.value = formatHsva(parsed, props.format, props.showAlpha);
+          return;
+        }
+        if (isColorPickerEmpty(committed.value)) inputValue.value = "";
+      }
+    );
+    const rootRef = ref(null);
+    const triggerRef = ref(null);
+    const panelRef = ref(null);
+    const svRef = ref(null);
+    const panelId = `tiger-colorpicker-panel-${Math.random().toString(36).slice(2, 9)}`;
+    let dragDispose;
+    const overlay = useVueAnchoredOverlay({
+      enabled: isOpen,
+      referenceRef: triggerRef,
+      floatingRef: panelRef,
+      containerRef: rootRef,
+      placement: () => props.placement ?? "bottom-start",
+      offset: () => props.offset ?? 4,
+      layout: "fullscreen-sm",
+      dismissOnOutside: true,
+      dismissOnEscape: true,
+      restoreFocusOnDismiss: true,
+      getContainer: () => props.getPopupContainer?.() ?? null,
+      onDismiss: () => {
+        setOpenSafe(false);
+        window.setTimeout(() => triggerRef.value?.focus(), 0);
+      }
+    });
+    useVueFocusTrap({ enabled: isOpen, containerRef: panelRef, inert: true });
+    useVueBodyScrollLock(isOpen);
+    watch(
+      () => [status.value, formItemControl?.shakeTrigger.value],
+      () => {
+        if (status.value === "error") runShakeAnimation(rootRef.value);
+      }
+    );
+    watch(isOpen, (open) => {
+      if (!open) return;
+      nextTick(() => svRef.value?.focus());
+    });
+    onBeforeUnmount(() => dragDispose?.());
+    function writeCommitted(next) {
+      if (props.modelValue === void 0) innerValue.value = next;
+      emit("update:modelValue", next);
+      emit("input", next);
+      emit("change", next);
+      formItemControl?.onChange(next);
+    }
+    function setOpenSafe(next) {
+      if (effectiveDisabled.value) return;
+      if (props.open === void 0) innerOpen.value = next;
+      emit("update:open", next);
+      emit("open-change", next);
+    }
+    function commitHsva(next) {
+      hsva.value = next;
+      const formatted = formatHsva(next, props.format, props.showAlpha);
+      inputValue.value = formatted;
+      writeCommitted(formatted);
+    }
+    const hasValue = computed(() => !isColorPickerEmpty(committed.value));
+    const showClear = computed(() => props.clearable && hasValue.value && !effectiveDisabled.value);
+    const displayColor = computed(() => cssColorFromHsva(hsva.value, props.showAlpha));
+    function handleTriggerKeydown(event) {
+      if (effectiveDisabled.value) return;
+      if (event.key === "Enter" || event.key === " " || event.key === "ArrowDown") {
+        event.preventDefault();
+        setOpenSafe(!isOpen.value);
+      } else if (event.key === "Escape" && isOpen.value) {
+        event.preventDefault();
+        setOpenSafe(false);
+      } else if ((event.key === "Delete" || event.key === "Backspace") && showClear.value) {
+        event.preventDefault();
+        writeCommitted("");
+        inputValue.value = "";
+      }
+    }
+    function handleFocusout(event) {
+      const next = event.relatedTarget;
+      if (rootRef.value && next && rootRef.value.contains(next) || panelRef.value && next && panelRef.value.contains(next)) {
+        return;
+      }
+      formItemControl?.onBlur();
+      emit("blur", event);
+    }
+    function startSvDrag(event) {
+      if (effectiveDisabled.value) return;
+      event.preventDefault();
+      const plane = svRef.value;
+      if (!plane) return;
+      dragging.value = true;
+      const apply = (clientX, clientY) => {
+        commitHsva(
+          hsvaFromSvPointer(
+            clientX,
+            clientY,
+            plane.getBoundingClientRect(),
+            hsva.value.h,
+            hsva.value.a
+          )
+        );
+      };
+      apply(event.clientX, event.clientY);
+      dragDispose?.();
+      const session = createDocumentDragSession({
+        startX: event.clientX,
+        startY: event.clientY,
+        pointerId: event.pointerId,
+        pointerTarget: plane,
+        dragThreshold: 0,
+        onMove: (payload) => apply(payload.currentX, payload.currentY),
+        onEnd: () => {
+          dragging.value = false;
+          dragDispose = void 0;
+        }
+      });
+      dragDispose = session.dispose;
+    }
+    function handleSvKeydown(event) {
+      const step = event.shiftKey ? 10 : 2;
+      let next = null;
+      if (event.key === "ArrowRight") next = nudgeColorPickerSv(hsva.value, step, 0);
+      else if (event.key === "ArrowLeft") next = nudgeColorPickerSv(hsva.value, -step, 0);
+      else if (event.key === "ArrowUp") next = nudgeColorPickerSv(hsva.value, 0, step);
+      else if (event.key === "ArrowDown") next = nudgeColorPickerSv(hsva.value, 0, -step);
+      if (!next) return;
+      event.preventDefault();
+      commitHsva(next);
+    }
+    function handlePreset(color) {
+      const formatted = commitPresetColor(color, hsva.value, props.format, props.showAlpha);
+      if (!formatted) return;
+      const next = parseColorToHsva(formatted);
+      if (next) hsva.value = next;
+      inputValue.value = formatted;
+      writeCommitted(formatted);
+      if (props.closeOnSelect) setOpenSafe(false);
+    }
+    expose({
+      focus: () => triggerRef.value?.focus(),
+      open: () => setOpenSafe(true),
+      close: () => setOpenSafe(false)
+    });
+    return () => {
+      const attrRecord = attrs;
+      const describedBy = mergeAriaDescribedBy(
+        typeof attrRecord["aria-describedby"] === "string" ? attrRecord["aria-describedby"] : void 0,
+        formItemControl?.describedBy.value
+      );
+      const labelledby = typeof attrRecord["aria-labelledby"] === "string" && attrRecord["aria-labelledby"].trim() ? attrRecord["aria-labelledby"] : formItemControl?.labelId.value;
+      const triggerSwatchStyle = {
+        ...colorPickerCheckerboardStyle
+      };
+      if (hasValue.value) {
+        triggerSwatchStyle.boxShadow = `inset 0 0 0 999px ${displayColor.value}`;
+      }
+      const panel = isOpen.value ? renderVueOverlayTeleport(
+        h(
+          "div",
+          {
+            ref: panelRef,
+            id: panelId,
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-label": labels.value.panelTitle,
+            class: classNames(
+              colorPickerPanelClasses,
+              overlay.floatingClasses.value,
+              props.dropdownClassName
+            ),
+            style: overlay.floatingStyles.value,
+            "data-positioned": overlay.positioned.value,
+            "data-tiger-colorpicker-panel": "",
+            onFocusout: handleFocusout
+          },
+          [
+            h("div", { class: "flex items-center justify-between gap-2" }, [
+              h(
+                "span",
+                { class: "text-xs font-medium text-[var(--tiger-text,#111827)]" },
+                labels.value.panelTitle
+              ),
+              showClear.value ? h(
+                "button",
+                {
+                  type: "button",
+                  class: colorPickerClearButtonClasses,
+                  "data-tiger-colorpicker-clear": "",
+                  onClick: () => {
+                    writeCommitted("");
+                    inputValue.value = "";
+                  }
+                },
+                labels.value.clear
+              ) : null
+            ]),
+            h(
+              "div",
+              {
+                ref: svRef,
+                class: colorPickerSvPlaneClasses,
+                style: getColorPickerSvPlaneStyle(hsva.value.h),
+                role: "slider",
+                tabindex: effectiveDisabled.value ? -1 : 0,
+                "aria-label": `${labels.value.saturation}, ${labels.value.brightness}`,
+                "aria-valuemin": 0,
+                "aria-valuemax": 100,
+                "aria-valuenow": Math.round(hsva.value.s),
+                "aria-valuetext": `${labels.value.saturation} ${Math.round(hsva.value.s)}, ${labels.value.brightness} ${Math.round(hsva.value.v)}`,
+                "data-tiger-colorpicker-sv": "",
+                onPointerdown: startSvDrag,
+                onKeydown: handleSvKeydown
+              },
+              [
+                h("span", {
+                  class: colorPickerSvThumbClasses,
+                  style: { left: `${hsva.value.s}%`, top: `${100 - hsva.value.v}%` },
+                  "aria-hidden": "true"
+                })
+              ]
+            ),
+            h("div", [
+              h("label", { class: colorPickerChromeLabelClasses }, labels.value.hue),
+              h("input", {
+                type: "range",
+                min: 0,
+                max: 360,
+                value: Math.round(hsva.value.h),
+                class: colorPickerSliderTrackClasses,
+                style: colorPickerHueTrackStyle,
+                "aria-label": labels.value.hue,
+                disabled: effectiveDisabled.value,
+                onInput: (event) => {
+                  dragging.value = true;
+                  commitHsva(
+                    applyColorPickerHue(
+                      hsva.value,
+                      Number(event.target.value)
+                    )
+                  );
+                  dragging.value = false;
+                }
+              })
+            ]),
+            props.showAlpha ? h("div", [
+              h("label", { class: colorPickerChromeLabelClasses }, labels.value.alpha),
+              h("input", {
+                type: "range",
+                min: 0,
+                max: 100,
+                value: Math.round(hsva.value.a * 100),
+                class: colorPickerSliderTrackClasses,
+                style: getColorPickerAlphaTrackStyle(hsva.value),
+                "aria-label": labels.value.alpha,
+                disabled: effectiveDisabled.value,
+                onInput: (event) => {
+                  dragging.value = true;
+                  commitHsva(
+                    applyColorPickerAlpha(
+                      hsva.value,
+                      Number(event.target.value) / 100
+                    )
+                  );
+                  dragging.value = false;
+                }
+              })
+            ]) : null,
+            h("div", [
+              h(
+                "label",
+                { class: classNames(colorPickerChromeLabelClasses, "uppercase") },
+                getColorPickerFormatLabel(props.format, labels.value)
+              ),
+              h("input", {
+                type: "text",
+                class: colorPickerInputClasses,
+                value: inputValue.value,
+                "aria-label": labels.value.value,
+                disabled: effectiveDisabled.value,
+                onInput: (event) => {
+                  const raw = event.target.value;
+                  inputValue.value = raw;
+                  const parsed = parseColorInput(raw, props.format, props.showAlpha);
+                  if (!parsed) return;
+                  const next = parseColorToHsva(parsed);
+                  if (!next) return;
+                  hsva.value = next;
+                  writeCommitted(parsed);
+                }
+              })
+            ]),
+            h("div", { class: "flex items-center gap-2" }, [
+              h("div", {
+                class: colorPickerPreviewClasses,
+                style: {
+                  ...colorPickerCheckerboardStyle,
+                  boxShadow: `inset 0 0 0 999px ${displayColor.value}`
+                },
+                role: "img",
+                "aria-hidden": "true"
+              }),
+              h(
+                "span",
+                { class: "text-xs font-mono text-[var(--tiger-text,#111827)]" },
+                hasValue.value ? formatHsva(hsva.value, props.format, props.showAlpha) : ""
+              )
+            ]),
+            props.presets && props.presets.length > 0 ? h(ColorSwatch, {
+              colors: props.presets,
+              modelValue: hasValue.value ? formatHsva(hsva.value, "hex", false) : void 0,
+              columns: Math.min(8, props.presets.length),
+              size: "sm",
+              ariaLabel: labels.value.swatches,
+              onChange: (color) => handlePreset(color)
+            }) : null,
+            h("div", { class: selectDoneActionClasses }, [
+              h(
+                "button",
+                {
+                  type: "button",
+                  class: selectDoneButtonClasses,
+                  onClick: () => setOpenSafe(false)
+                },
+                labels.value.done
+              )
+            ])
+          ]
+        ),
+        overlay.target.value
+      ) : null;
+      return h(
+        "div",
+        {
+          ref: rootRef,
+          class: classNames(
+            colorPickerBaseClasses,
+            props.className,
+            coerceClassValue(attrs.class),
+            status.value === "error" ? SHAKE_CLASS : void 0
+          ),
+          onFocusout: handleFocusout
+        },
+        [
+          effectiveName.value ? h("input", {
+            type: "hidden",
+            name: effectiveName.value,
+            value: hasValue.value ? committed.value ?? "" : ""
+          }) : null,
+          h(
+            "button",
+            {
+              ref: triggerRef,
+              type: "button",
+              id: effectiveId.value,
+              class: getColorPickerTriggerClasses(
+                props.size,
+                effectiveDisabled.value,
+                status.value
+              ),
+              "data-tiger-colorpicker-trigger": "",
+              "aria-label": labelledby ? void 0 : labels.value.trigger,
+              "aria-labelledby": labelledby,
+              "aria-describedby": describedBy,
+              title: labels.value.trigger,
+              "aria-haspopup": "dialog",
+              "aria-expanded": isOpen.value,
+              "aria-controls": isOpen.value ? panelId : void 0,
+              "aria-invalid": status.value === "error" ? true : void 0,
+              "aria-required": formItemControl?.required.value || void 0,
+              disabled: effectiveDisabled.value,
+              onClick: () => setOpenSafe(!isOpen.value),
+              onKeydown: handleTriggerKeydown
+            },
+            [h("span", { class: colorPickerTriggerSwatchClasses, style: triggerSwatchStyle })]
+          ),
+          panel
+        ]
+      );
+    };
+  }
+});
+var ColorPicker_default = ColorPicker;
+
+export {
+  ColorPicker,
+  ColorPicker_default
+};