@expcat/tigercat-vue 2.1.2 → 2.1.3

package/dist/chunk-45DXSHX6.mjs

@@ -0,0 +1,140 @@
+import {
+  useTigerConfig
+} from "./chunk-4GOTWNOO.mjs";
+
+// src/components/QRCode.ts
+import { defineComponent, h, computed, getCurrentInstance } from "vue";
+import {
+  classNames,
+  coerceClassValue,
+  mergeStyleValues,
+  mergeTigerLocale,
+  getQRCodeLabels,
+  generateQRMatrix,
+  qrcodeContainerClasses,
+  qrcodeOverlayClasses,
+  qrcodeStatusTextClasses,
+  qrcodeRefreshClasses,
+  QRCODE_DEFAULT_COLOR,
+  QRCODE_DEFAULT_BG,
+  QR_QUIET_ZONE,
+  qrViewBoxSize,
+  qrNeedsContrastWarning,
+  devWarn
+} from "@expcat/tigercat-core";
+var QRCode = defineComponent({
+  name: "TigerQRCode",
+  inheritAttrs: false,
+  props: {
+    value: { type: String, required: true },
+    size: { type: Number, default: 128 },
+    color: { type: String, default: QRCODE_DEFAULT_COLOR },
+    bgColor: { type: String, default: QRCODE_DEFAULT_BG },
+    status: { type: String, default: "active" },
+    className: { type: String, default: void 0 },
+    locale: { type: Object, default: void 0 }
+  },
+  emits: ["refresh"],
+  setup(props, { emit, attrs }) {
+    const config = useTigerConfig();
+    const mergedLocale = computed(() => mergeTigerLocale(config.value.locale, props.locale));
+    const labels = computed(() => getQRCodeLabels(mergedLocale.value));
+    const matrix = computed(() => generateQRMatrix(props.value ?? ""));
+    return () => {
+      const attrsRecord = attrs;
+      const modules = matrix.value;
+      const viewBox = qrViewBoxSize(modules.length);
+      const overlay = props.status === "expired" || props.status === "loading";
+      const namedValue = props.value ? ` (${props.value})` : "";
+      const imgLabel = props.status === "expired" ? `${labels.value.expiredText}${namedValue}` : props.status === "loading" ? `${labels.value.loadingText}${namedValue}` : `${labels.value.ariaLabel}${namedValue}`;
+      if (qrNeedsContrastWarning(props.color, props.bgColor)) {
+        devWarn(
+          "QRCode.contrast",
+          "QRCode: `color` and `bgColor` are under 3:1 contrast; scanners may fail."
+        );
+      }
+      const rects = modules.flatMap(
+        (row, r) => row.map(
+          (cell, c) => cell ? h("rect", {
+            key: `${r}-${c}`,
+            x: c + QR_QUIET_ZONE,
+            y: r + QR_QUIET_ZONE,
+            width: 1,
+            height: 1,
+            fill: props.color
+          }) : null
+        ).filter(Boolean)
+      );
+      const svg = h(
+        "svg",
+        {
+          width: props.size,
+          height: props.size,
+          viewBox: `0 0 ${viewBox} ${viewBox}`,
+          xmlns: "http://www.w3.org/2000/svg",
+          role: overlay ? void 0 : "img",
+          "aria-hidden": overlay ? "true" : void 0,
+          "aria-label": overlay ? void 0 : imgLabel,
+          class: "block h-full w-full"
+        },
+        [h("rect", { width: viewBox, height: viewBox, fill: props.bgColor }), ...rects]
+      );
+      const children = [svg];
+      const hasRefresh = Boolean(getCurrentInstance()?.vnode.props?.onRefresh);
+      if (props.status === "expired") {
+        const refreshKids = [
+          h("span", { class: qrcodeStatusTextClasses }, labels.value.expiredText)
+        ];
+        if (hasRefresh) {
+          refreshKids.push(
+            h(
+              "button",
+              {
+                type: "button",
+                class: qrcodeRefreshClasses,
+                onClick: () => emit("refresh")
+              },
+              labels.value.refreshText
+            )
+          );
+        }
+        children.push(
+          h(
+            "div",
+            { class: qrcodeOverlayClasses, role: "status", "aria-label": imgLabel },
+            refreshKids
+          )
+        );
+      }
+      if (props.status === "loading") {
+        children.push(
+          h("div", { class: qrcodeOverlayClasses, role: "status", "aria-label": imgLabel }, [
+            h("span", { class: qrcodeStatusTextClasses }, labels.value.loadingText)
+          ])
+        );
+      }
+      return h(
+        "div",
+        {
+          ...attrs,
+          class: classNames(
+            qrcodeContainerClasses,
+            props.className,
+            coerceClassValue(attrsRecord.class)
+          ),
+          style: mergeStyleValues(attrsRecord.style, {
+            width: `${props.size}px`,
+            height: `${props.size}px`
+          })
+        },
+        children
+      );
+    };
+  }
+});
+var QRCode_default = QRCode;
+
+export {
+  QRCode,
+  QRCode_default
+};

package/dist/{chunk-UOJOJBEU.mjs → chunk-4GOTWNOO.mjs}

@@ -1,11 +1,8 @@
-import {
-  createGlobalTigerLocaleHandle
-} from "./chunk-TGXBCKOU.mjs";
-
 // src/components/ConfigProvider.ts
 import {
   defineComponent,
   computed,
+  h,
   inject,
   onBeforeUnmount,
   provide,
@@ -13,14 +10,23 @@ import {
   watch
 } from "vue";
 import {
-  mergeTigerLocale,
   isLazyTigerLocale,
   getImmediateTigerLocale,
   resolveTigerLocale,
-  getLocaleDirection,
-  isBrowser,
-  ThemeManager
+  resolveTigerConfig,
+  createDocumentConfigHandle,
+  devWarn
+} from "@expcat/tigercat-core";
+
+// src/utils/global-locale.ts
+import {
+  createTigerLocaleScope,
+  createGlobalTigerLocaleHandle,
+  getGlobalTigerLocale,
+  resetTigerLocaleScope
 } from "@expcat/tigercat-core";
+
+// src/components/ConfigProvider.ts
 var TigerConfigKey = /* @__PURE__ */ Symbol("TigerConfig");
 function useTigerConfig() {
   return inject(
@@ -50,12 +56,17 @@ var ConfigProvider = defineComponent({
   name: "TigerConfigProvider",
   props: configProviderProps,
   setup(props, { slots }) {
-    const parent = useTigerConfig();
+    const parentInjected = inject(TigerConfigKey, null);
+    const isDocumentOwner = parentInjected === null;
+    const parent = parentInjected ?? computed(() => ({}));
     let globalLocaleHandle = null;
+    let documentHandle = null;
+    let didHydrateDocument = false;
     const resolvedLocale = ref(
       isLazyTigerLocale(props.locale) ? void 0 : getImmediateTigerLocale(props.locale)
     );
     const localeLoading = ref(isLazyTigerLocale(props.locale));
+    const localeLoadError = ref(void 0);
     let loadId = 0;
     watch(
       () => props.locale,
@@ -63,48 +74,44 @@ var ConfigProvider = defineComponent({
         if (!isLazyTigerLocale(locale)) {
           resolvedLocale.value = getImmediateTigerLocale(locale);
           localeLoading.value = false;
+          localeLoadError.value = void 0;
           return;
         }
         const thisId = ++loadId;
         localeLoading.value = true;
+        localeLoadError.value = void 0;
         resolveTigerLocale(locale).then(
           (result) => {
             if (thisId === loadId) {
               resolvedLocale.value = result;
               localeLoading.value = false;
+              localeLoadError.value = void 0;
             }
           },
-          () => {
+          (reason) => {
             if (thisId === loadId) {
               localeLoading.value = false;
+              localeLoadError.value = reason instanceof Error ? reason : new Error(String(reason));
+              devWarn(
+                "ConfigProvider.localeLoad",
+                "[Tigercat] ConfigProvider failed to load locale; keeping the previous locale."
+              );
             }
           }
         );
       },
       { immediate: true }
     );
-    const merged = computed(() => {
-      return {
-        locale: mergeTigerLocale(parent.value.locale, resolvedLocale.value),
-        localeLoading: localeLoading.value || parent.value.localeLoading,
-        direction: props.direction ?? resolvedLocale.value?.direction ?? parent.value.direction ?? (resolvedLocale.value?.locale ? getLocaleDirection(resolvedLocale.value) : void 0),
-        theme: props.theme ?? parent.value.theme,
-        colorScheme: props.colorScheme ?? parent.value.colorScheme
-      };
-    });
-    watch(
-      () => merged.value.theme,
-      (name) => {
-        if (name) ThemeManager.setTheme(name);
-      },
-      { immediate: true }
-    );
-    watch(
-      () => merged.value.colorScheme,
-      (scheme) => {
-        if (scheme) ThemeManager.setColorScheme(scheme);
-      },
-      { immediate: true }
+    const merged = computed(
+      () => resolveTigerConfig({
+        locale: resolvedLocale.value,
+        localeLoading: localeLoading.value,
+        localeLoadError: localeLoadError.value,
+        direction: props.direction,
+        theme: props.theme,
+        colorScheme: props.colorScheme,
+        parent: parent.value
+      })
     );
     watch(
       () => merged.value.locale,
@@ -117,39 +124,44 @@ var ConfigProvider = defineComponent({
       },
       { immediate: true }
     );
-    let previousDir = null;
-    let previousDataDir = null;
     watch(
-      () => merged.value.direction,
-      (direction) => {
-        if (!direction || !isBrowser()) return;
-        const root = document.documentElement;
-        if (previousDir === null && previousDataDir === null) {
-          previousDir = root.getAttribute("dir");
-          previousDataDir = root.getAttribute("data-tiger-dir");
-        }
-        root.setAttribute("dir", direction);
-        root.setAttribute("data-tiger-dir", direction);
+      () => ({
+        theme: merged.value.theme,
+        colorScheme: merged.value.colorScheme,
+        direction: merged.value.direction,
+        lang: merged.value.locale?.locale
+      }),
+      (values) => {
+        if (!isDocumentOwner) return;
+        if (!documentHandle) documentHandle = createDocumentConfigHandle();
+        documentHandle.apply(values, { hydrateAuto: !didHydrateDocument });
+        didHydrateDocument = true;
       },
       { immediate: true }
     );
     onBeforeUnmount(() => {
       globalLocaleHandle?.dispose();
       globalLocaleHandle = null;
-      if (!isBrowser()) return;
-      const root = document.documentElement;
-      if (previousDir === null) root.removeAttribute("dir");
-      else root.setAttribute("dir", previousDir);
-      if (previousDataDir === null) root.removeAttribute("data-tiger-dir");
-      else root.setAttribute("data-tiger-dir", previousDataDir);
+      documentHandle?.dispose();
+      documentHandle = null;
     });
     provide(TigerConfigKey, merged);
-    return () => slots.default?.();
+    return () => h(
+      "div",
+      {
+        class: "contents",
+        "data-tiger-config-root": "",
+        dir: merged.value.direction,
+        lang: merged.value.locale?.locale
+      },
+      slots.default?.()
+    );
   }
 });
 var ConfigProvider_default = ConfigProvider;
 
 export {
+  getGlobalTigerLocale,
   TigerConfigKey,
   useTigerConfig,
   configProviderProps,

package/dist/chunk-4H3PX46K.mjs

@@ -0,0 +1,287 @@
+import {
+  FORM_ITEM_CONTROL_INJECTION_KEY
+} from "./chunk-P2LZ2MR5.mjs";
+import {
+  useTigerConfig
+} from "./chunk-4GOTWNOO.mjs";
+
+// src/components/ColorSwatch.ts
+import {
+  computed,
+  defineComponent,
+  h,
+  inject,
+  nextTick,
+  ref,
+  watch
+} from "vue";
+import {
+  classNames,
+  COLOR_SWATCH_CHECK_PATH,
+  coerceClassValue,
+  colorSwatchBaseClasses,
+  colorSwatchGridClasses,
+  colorSwatchGroupClasses,
+  colorSwatchGroupLabelClasses,
+  createDefaultColorSwatchGroups,
+  flattenColorSwatchGroups,
+  getColorPickerLabels,
+  getColorSwatchButtonClasses,
+  getColorSwatchCheckClasses,
+  getColorSwatchCheckTone,
+  getElementTextDirection,
+  getNextColorSwatchIndex,
+  isColorSwatchSelected,
+  markFormItemGroupControl,
+  mergeAriaDescribedBy,
+  mergeTigerLocale,
+  normalizeColorSwatchGroups
+} from "@expcat/tigercat-core";
+var ColorSwatch = markFormItemGroupControl(
+  defineComponent({
+    name: "TigerColorSwatch",
+    inheritAttrs: false,
+    props: {
+      modelValue: { type: String, default: void 0 },
+      defaultValue: { 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: void 0 },
+      locale: { type: Object, default: void 0 },
+      labels: { type: Object, default: void 0 },
+      name: { type: String, default: void 0 },
+      id: { type: String, default: void 0 },
+      status: { type: String, default: void 0 },
+      className: { type: String, default: void 0 }
+    },
+    emits: ["update:modelValue", "change", "input", "blur"],
+    setup(props, { attrs, emit, expose }) {
+      const config = useTigerConfig();
+      const formItemControl = inject(
+        FORM_ITEM_CONTROL_INJECTION_KEY,
+        null
+      );
+      const innerValue = ref(props.defaultValue);
+      const focusIndex = ref(-1);
+      const optionRefs = ref([]);
+      const rootRef = ref(null);
+      const instanceId = `tiger-colorswatch-${Math.random().toString(36).slice(2, 9)}`;
+      watch(
+        () => props.modelValue,
+        (value) => {
+          if (value !== void 0) innerValue.value = value;
+        }
+      );
+      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 fallbackGroups = computed(
+        () => createDefaultColorSwatchGroups(labels.value.primaryGroup, labels.value.accentGroup)
+      );
+      const normalizedGroups = computed(
+        () => normalizeColorSwatchGroups(props.groups, props.colors, fallbackGroups.value)
+      );
+      const options = computed(() => flattenColorSwatchGroups(normalizedGroups.value));
+      const selectedValue = computed(() => {
+        if (props.modelValue !== void 0) return props.modelValue;
+        if (formItemControl?.value.value !== void 0) {
+          return formItemControl.value.value;
+        }
+        return innerValue.value;
+      });
+      const selectedIndex = computed(
+        () => options.value.findIndex(
+          (option) => isColorSwatchSelected(option.value, selectedValue.value)
+        )
+      );
+      const firstEnabledIndex = computed(
+        () => options.value.findIndex((option) => !option.disabled)
+      );
+      const activeIndex = computed(
+        () => selectedIndex.value >= 0 ? selectedIndex.value : firstEnabledIndex.value
+      );
+      function commit(option) {
+        if (effectiveDisabled.value || option.disabled) return;
+        if (props.modelValue === void 0) innerValue.value = option.value;
+        emit("update:modelValue", option.value);
+        emit("input", option.value);
+        emit("change", option.value, option);
+        formItemControl?.onChange(option.value);
+      }
+      function handleKeydown(optionIndex, event) {
+        if (effectiveDisabled.value) return;
+        if (event.key === "Enter" || event.key === " ") {
+          event.preventDefault();
+          const option = options.value[optionIndex];
+          if (option) commit(option);
+          return;
+        }
+        const dir = getElementTextDirection(rootRef.value);
+        const nextIndex = getNextColorSwatchIndex(
+          normalizedGroups.value,
+          optionIndex,
+          event.key,
+          props.columns,
+          dir
+        );
+        if (nextIndex < 0 || nextIndex === optionIndex) return;
+        event.preventDefault();
+        focusIndex.value = nextIndex;
+        nextTick(() => optionRefs.value[nextIndex]?.focus());
+      }
+      function handleFocusout(event) {
+        const next = event.relatedTarget;
+        if (rootRef.value && next && rootRef.value.contains(next)) return;
+        formItemControl?.onBlur();
+        emit("blur", event);
+      }
+      expose({
+        focus: () => {
+          const index = focusIndex.value >= 0 ? focusIndex.value : activeIndex.value;
+          (optionRefs.value[index] ?? rootRef.value)?.focus();
+        }
+      });
+      return () => {
+        let flatIndex = 0;
+        optionRefs.value = [];
+        const attrRecord = attrs;
+        const labelledby = typeof attrRecord["aria-labelledby"] === "string" && attrRecord["aria-labelledby"].trim() ? attrRecord["aria-labelledby"] : formItemControl?.labelId.value;
+        const describedBy = mergeAriaDescribedBy(
+          typeof attrRecord["aria-describedby"] === "string" ? attrRecord["aria-describedby"] : void 0,
+          formItemControl?.describedBy.value
+        );
+        const groupName = typeof attrRecord["aria-label"] === "string" && attrRecord["aria-label"].trim() ? attrRecord["aria-label"] : props.ariaLabel ?? labels.value.swatches;
+        if (options.value.length === 0) {
+          return h("div", {
+            ref: rootRef,
+            class: classNames(
+              colorSwatchBaseClasses,
+              props.className,
+              coerceClassValue(attrs.class)
+            ),
+            id: effectiveId.value
+          });
+        }
+        return h(
+          "div",
+          {
+            ref: rootRef,
+            class: classNames(
+              colorSwatchBaseClasses,
+              props.className,
+              coerceClassValue(attrs.class)
+            ),
+            role: "radiogroup",
+            id: effectiveId.value,
+            "aria-label": labelledby ? void 0 : groupName,
+            "aria-labelledby": labelledby,
+            "aria-describedby": describedBy,
+            "aria-invalid": status.value === "error" ? true : void 0,
+            "aria-disabled": effectiveDisabled.value || void 0,
+            "aria-required": formItemControl?.required.value || void 0,
+            onFocusout: handleFocusout
+          },
+          [
+            effectiveName.value ? h("input", {
+              type: "hidden",
+              name: effectiveName.value,
+              value: selectedValue.value ?? ""
+            }) : null,
+            ...normalizedGroups.value.map((group, groupIndex) => {
+              const labelId = group.label ? `${instanceId}-g${groupIndex}` : void 0;
+              return h(
+                "div",
+                {
+                  key: `${groupIndex}-${group.label ?? "group"}`,
+                  class: colorSwatchGroupClasses,
+                  role: group.label ? "group" : void 0,
+                  "aria-labelledby": labelId
+                },
+                [
+                  group.label ? h("div", { id: labelId, 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, selectedValue.value);
+                      const optionDisabled = effectiveDisabled.value || !!option.disabled;
+                      const tabIndex = !optionDisabled && optionIndex === (focusIndex.value >= 0 ? focusIndex.value : activeIndex.value) ? 0 : -1;
+                      const tone = getColorSwatchCheckTone(option.value);
+                      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,
+                          disabled: optionDisabled,
+                          tabindex: tabIndex,
+                          onFocus: () => {
+                            focusIndex.value = optionIndex;
+                          },
+                          onClick: () => commit(option),
+                          onKeydown: (event) => handleKeydown(optionIndex, event)
+                        },
+                        selected ? h(
+                          "span",
+                          {
+                            class: getColorSwatchCheckClasses(props.size, tone),
+                            "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: COLOR_SWATCH_CHECK_PATH,
+                                  strokeLinecap: "round",
+                                  strokeLinejoin: "round"
+                                })
+                              ]
+                            )
+                          ]
+                        ) : void 0
+                      );
+                    })
+                  )
+                ]
+              );
+            })
+          ]
+        );
+      };
+    }
+  })
+);
+var ColorSwatch_default = ColorSwatch;
+
+export {
+  ColorSwatch,
+  ColorSwatch_default
+};

package/dist/{chunk-PFIV5MXD.mjs → chunk-4INCDD5K.mjs}

@@ -1,4 +1,5 @@
 // src/components/LoadingBarRoot.ts
+import { isBrowser } from "@expcat/tigercat-core";
 var loadingBarModulePromise = null;
 var pendingCommands = [];
 var resolvedApi = null;
@@ -11,9 +12,18 @@ function applyCommand(api, command) {
     api.start(command.options);
     return;
   }
+  if (command.type === "set") {
+    api.set(command.percentage);
+    return;
+  }
+  if (command.type === "inc") {
+    api.inc(command.delta);
+    return;
+  }
   api[command.type]();
 }
 function enqueue(command) {
+  if (!isBrowser()) return;
   if (resolvedApi) {
     applyCommand(resolvedApi, command);
     return;
@@ -32,6 +42,12 @@ var LoadingBar = {
   start(options) {
     enqueue({ type: "start", options });
   },
+  set(percentage) {
+    enqueue({ type: "set", percentage });
+  },
+  inc(delta) {
+    enqueue({ type: "inc", delta });
+  },
   finish() {
     enqueue({ type: "finish" });
   },