@expcat/tigercat-vue 0.4.3 → 1.0.0

package/dist/{chunk-NUFSJMVC.js → chunk-UG6XPJ2N.js}

@@ -212,7 +212,20 @@ var Table = vue.defineComponent({
     tableLayout: {
       type: String,
       default: "auto"
-    }
+    },
+    // --- v0.6.0 props ---
+    virtual: { type: Boolean, default: false },
+    virtualHeight: { type: Number, default: 400 },
+    virtualItemHeight: { type: Number, default: 40 },
+    editable: { type: Boolean, default: false },
+    editableCells: { type: Object },
+    filterMode: { type: String, default: "basic" },
+    advancedFilterRules: { type: Array, default: () => [] },
+    columnDraggable: { type: Boolean, default: false },
+    summaryRow: { type: Object },
+    groupBy: { type: String },
+    exportable: { type: Boolean, default: false },
+    exportFilename: { type: String, default: "export" }
   },
   emits: [
     "change",
@@ -221,7 +234,10 @@ var Table = vue.defineComponent({
     "sort-change",
     "filter-change",
     "page-change",
-    "expand-change"
+    "expand-change",
+    "cell-change",
+    "column-order-change",
+    "export"
   ],
   setup(props, { emit, slots }) {
     const paginationConfig = vue.computed(() => {
@@ -338,7 +354,11 @@ var Table = vue.defineComponent({
     }
     const processedData = vue.computed(() => {
       let data = props.dataSource;
-      data = tigercatCore.filterData(data, filterState.value);
+      if (props.filterMode === "advanced" && props.advancedFilterRules.length > 0) {
+        data = tigercatCore.filterDataAdvanced(data, props.advancedFilterRules);
+      } else {
+        data = tigercatCore.filterData(data, filterState.value);
+      }
       if (sortState.value.key && sortState.value.direction) {
         const column = columnByKey.value[sortState.value.key];
         data = tigercatCore.sortData(data, sortState.value.key, sortState.value.direction, column?.sortFn);
@@ -504,6 +524,90 @@ var Table = vue.defineComponent({
     const someSelected = vue.computed(() => {
       return selectedRowKeys.value.length > 0 && !allSelected.value;
     });
+    const editingCell = vue.ref(null);
+    const editingValue = vue.ref("");
+    function isCellEditable(columnKey, rowIndex) {
+      if (!props.editable) return false;
+      if (!props.editableCells) return true;
+      return !!props.editableCells.get(columnKey)?.has(rowIndex);
+    }
+    function startEditing(rowIndex, columnKey, currentValue) {
+      editingCell.value = { rowIndex, columnKey };
+      editingValue.value = String(currentValue ?? "");
+    }
+    function commitEdit() {
+      if (editingCell.value) {
+        emit(
+          "cell-change",
+          editingCell.value.rowIndex,
+          editingCell.value.columnKey,
+          editingValue.value
+        );
+        editingCell.value = null;
+      }
+    }
+    function cancelEdit() {
+      editingCell.value = null;
+    }
+    function handleExport() {
+      const csv = tigercatCore.exportTableToCsv(displayColumns.value, processedData.value);
+      tigercatCore.downloadCsv(csv, props.exportFilename);
+      emit("export", csv);
+    }
+    const dragColumnKey = vue.ref(null);
+    function handleDragStart(columnKey) {
+      dragColumnKey.value = columnKey;
+    }
+    function handleDrop(targetKey) {
+      if (!dragColumnKey.value || dragColumnKey.value === targetKey) return;
+      const cols = [...displayColumns.value];
+      const fromIdx = cols.findIndex((c) => c.key === dragColumnKey.value);
+      const toIdx = cols.findIndex((c) => c.key === targetKey);
+      if (fromIdx >= 0 && toIdx >= 0) {
+        const [moved] = cols.splice(fromIdx, 1);
+        cols.splice(toIdx, 0, moved);
+        emit("column-order-change", cols);
+      }
+      dragColumnKey.value = null;
+    }
+    const virtualScrollTop = vue.ref(0);
+    vue.computed(() => {
+      if (!props.virtual) return null;
+      return tigercatCore.getFixedVirtualRange(
+        virtualScrollTop.value,
+        props.virtualHeight,
+        props.virtualItemHeight,
+        paginatedData.value.length,
+        5
+      );
+    });
+    const groupedData = vue.computed(() => {
+      if (!props.groupBy) return null;
+      return tigercatCore.groupDataByColumn(paginatedData.value, props.groupBy);
+    });
+    function renderSummaryRow() {
+      if (!props.summaryRow?.show) return null;
+      const emptyCells = [];
+      if (props.rowSelection) {
+        emptyCells.push(vue.h("td", { class: tigercatCore.getTableCellClasses(props.size, "left") }));
+      }
+      if (props.expandable) {
+        emptyCells.push(vue.h("td", { class: tigercatCore.getTableCellClasses(props.size, "left") }));
+      }
+      const dataCells = displayColumns.value.map((col) => {
+        const dataKey = col.dataKey || col.key;
+        const val = props.summaryRow.data[dataKey];
+        return vue.h(
+          "td",
+          {
+            key: col.key,
+            class: tigercatCore.getTableCellClasses(props.size, col.align || "left", col.className)
+          },
+          val != null ? String(val) : ""
+        );
+      });
+      return vue.h("tfoot", [vue.h("tr", { class: tigercatCore.tableSummaryRowClasses }, [...emptyCells, ...dataCells])]);
+    }
     function renderTableHeader() {
       const headerCells = [];
       const expandAtStart = props.expandable && props.expandable.expandIconPosition !== "end";
@@ -601,6 +705,10 @@ var Table = vue.defineComponent({
                 (isFixedLeft || isFixedRight) && "bg-[var(--tiger-surface-muted,#f9fafb)]"
               ),
               style,
+              draggable: props.columnDraggable ? "true" : void 0,
+              onDragstart: props.columnDraggable ? () => handleDragStart(column.key) : void 0,
+              onDragover: props.columnDraggable ? (e) => e.preventDefault() : void 0,
+              onDrop: props.columnDraggable ? () => handleDrop(column.key) : void 0,
               onClick: column.sortable ? () => handleSort(column.key) : void 0
             },
             [
@@ -668,8 +776,8 @@ var Table = vue.defineComponent({
           ])
         ]);
       }
-      const rows = paginatedData.value.flatMap((record, index) => {
-        const key = paginatedRowKeys.value[index];
+      function renderDataRow(record, index) {
+        const key = tigercatCore.getRowKey(record, props.rowKey, index);
         const isSelected = selectedRowKeySet.value.has(key);
         const isExpanded = expandedRowKeySet.value.has(key);
         const isRowExpandable = props.expandable ? props.expandable.rowExpandable ? props.expandable.rowExpandable(record) : true : false;
@@ -745,6 +853,22 @@ var Table = vue.defineComponent({
             stickyBgClass,
             props.hoverable && "group-hover:bg-[var(--tiger-surface-muted,#f9fafb)]"
           ) : void 0;
+          const isEditing = editingCell.value?.rowIndex === index && editingCell.value?.columnKey === column.key;
+          const isEditableCell = isCellEditable(column.key, index);
+          const cellContent = isEditing ? vue.h("input", {
+            type: "text",
+            class: tigercatCore.editableCellInputClasses,
+            value: editingValue.value,
+            autofocus: true,
+            onInput: (e) => {
+              editingValue.value = e.target.value;
+            },
+            onBlur: () => commitEdit(),
+            onKeydown: (e) => {
+              if (e.key === "Enter") commitEdit();
+              if (e.key === "Escape") cancelEdit();
+            }
+          }) : slots[`cell-${column.key}`]?.({ record, index }) ?? (column.render ? column.render(record, index) : cellValue);
           cells.push(
             vue.h(
               "td",
@@ -752,13 +876,13 @@ var Table = vue.defineComponent({
                 key: column.key,
                 class: tigercatCore.classNames(
                   tigercatCore.getTableCellClasses(props.size, column.align || "left", column.className),
-                  stickyCellClass
+                  stickyCellClass,
+                  isEditableCell && !isEditing && tigercatCore.getEditableCellClasses(false)
                 ),
-                style
+                style,
+                onDblclick: isEditableCell && !isEditing ? () => startEditing(index, column.key, cellValue) : void 0
               },
-              [
-                slots[`cell-${column.key}`]?.({ record, index }) ?? (column.render ? column.render(record, index) : cellValue)
-              ]
+              [cellContent]
             )
           );
         });
@@ -799,7 +923,35 @@ var Table = vue.defineComponent({
           return [rowNode, expandedRow];
         }
         return rowNode;
-      });
+      }
+      if (groupedData.value) {
+        const groupRows = [];
+        for (const [groupKey, groupItems] of groupedData.value) {
+          groupRows.push(
+            vue.h("tr", { key: `group-${groupKey}`, class: tigercatCore.tableGroupHeaderClasses }, [
+              vue.h(
+                "td",
+                {
+                  colspan: totalColumnCount.value,
+                  class: tigercatCore.getGroupHeaderCellClasses(props.size)
+                },
+                `${props.groupBy}: ${groupKey} (${groupItems.length})`
+              )
+            ])
+          );
+          groupItems.forEach((record, i) => {
+            const globalIndex = paginatedData.value.indexOf(record);
+            const result = renderDataRow(record, globalIndex >= 0 ? globalIndex : i);
+            if (Array.isArray(result)) {
+              groupRows.push(...result);
+            } else {
+              groupRows.push(result);
+            }
+          });
+        }
+        return vue.h("tbody", groupRows);
+      }
+      const rows = paginatedData.value.flatMap((record, index) => renderDataRow(record, index));
       return vue.h("tbody", rows);
     }
     function renderPagination() {
@@ -866,12 +1018,14 @@ var Table = vue.defineComponent({
       const wrapperStyle = props.maxHeight ? {
         maxHeight: typeof props.maxHeight === "number" ? `${props.maxHeight}px` : props.maxHeight
       } : void 0;
-      return vue.h(
+      const tableChildren = [renderTableHeader(), renderTableBody(), renderSummaryRow()];
+      const tableContent = props.virtual ? vue.h(
         "div",
         {
-          class: tigercatCore.getTableWrapperClasses(props.bordered, props.maxHeight),
-          style: wrapperStyle,
-          "aria-busy": props.loading
+          style: { height: `${props.virtualHeight}px`, overflow: "auto" },
+          onScroll: (e) => {
+            virtualScrollTop.value = e.target.scrollTop;
+          }
         },
         [
           vue.h(
@@ -883,8 +1037,42 @@ var Table = vue.defineComponent({
               ),
               style: fixedColumnsInfo.value.hasFixedColumns && fixedColumnsInfo.value.minTableWidth ? { minWidth: `${fixedColumnsInfo.value.minTableWidth}px` } : void 0
             },
-            [renderTableHeader(), renderTableBody()]
+            tableChildren
+          )
+        ]
+      ) : vue.h(
+        "table",
+        {
+          class: tigercatCore.classNames(
+            tigercatCore.tableBaseClasses,
+            props.tableLayout === "fixed" ? "table-fixed" : "table-auto"
           ),
+          style: fixedColumnsInfo.value.hasFixedColumns && fixedColumnsInfo.value.minTableWidth ? { minWidth: `${fixedColumnsInfo.value.minTableWidth}px` } : void 0
+        },
+        tableChildren
+      );
+      return vue.h(
+        "div",
+        {
+          class: tigercatCore.getTableWrapperClasses(props.bordered, props.maxHeight),
+          style: wrapperStyle,
+          "aria-busy": props.loading
+        },
+        [
+          // Export button
+          props.exportable && vue.h("div", { class: "flex justify-end p-2" }, [
+            vue.h(
+              "button",
+              {
+                type: "button",
+                class: tigercatCore.tableExportButtonClasses,
+                onClick: handleExport,
+                "aria-label": "Export to CSV"
+              },
+              "Export CSV"
+            )
+          ]),
+          tableContent,
           // Loading overlay
           props.loading && vue.h(
             "div",

package/dist/chunk-UPPRQ3ZS.js

@@ -0,0 +1,132 @@
+'use strict';
+
+var vue = require('vue');
+var tigercatCore = require('@expcat/tigercat-core');
+
+// src/components/Watermark.ts
+var Watermark = vue.defineComponent({
+  name: "TigerWatermark",
+  inheritAttrs: false,
+  props: {
+    content: {
+      type: [String, Array],
+      default: void 0
+    },
+    image: {
+      type: String,
+      default: void 0
+    },
+    width: { type: Number, default: tigercatCore.watermarkDefaults.width },
+    height: { type: Number, default: tigercatCore.watermarkDefaults.height },
+    rotate: { type: Number, default: tigercatCore.watermarkDefaults.rotate },
+    zIndex: { type: Number, default: tigercatCore.watermarkDefaults.zIndex },
+    gapX: { type: Number, default: tigercatCore.watermarkDefaults.gapX },
+    gapY: { type: Number, default: tigercatCore.watermarkDefaults.gapY },
+    offsetX: { type: Number, default: tigercatCore.watermarkDefaults.offsetX },
+    offsetY: { type: Number, default: tigercatCore.watermarkDefaults.offsetY },
+    font: {
+      type: Object,
+      default: void 0
+    },
+    className: { type: String, default: void 0 },
+    style: {
+      type: Object,
+      default: void 0
+    }
+  },
+  setup(props, { slots, attrs }) {
+    const base64 = vue.ref();
+    const resolvedFont = vue.computed(() => tigercatCore.resolveWatermarkFont(props.font));
+    const generate = () => {
+      if (props.image) {
+        const img = new Image();
+        img.crossOrigin = "anonymous";
+        img.onload = () => {
+          const canvas = document.createElement("canvas");
+          const dpr = window.devicePixelRatio || 1;
+          canvas.width = props.width * dpr;
+          canvas.height = props.height * dpr;
+          const ctx = canvas.getContext("2d");
+          if (!ctx) return;
+          ctx.scale(dpr, dpr);
+          ctx.translate(props.width / 2, props.height / 2);
+          ctx.rotate(props.rotate * Math.PI / 180);
+          ctx.translate(-props.width / 2, -props.height / 2);
+          ctx.drawImage(img, 0, 0, props.width, props.height);
+          base64.value = canvas.toDataURL();
+        };
+        img.src = props.image;
+      } else {
+        base64.value = tigercatCore.renderWatermarkCanvas({
+          content: props.content,
+          width: props.width,
+          height: props.height,
+          rotate: props.rotate,
+          font: resolvedFont.value
+        });
+      }
+    };
+    vue.onMounted(generate);
+    vue.watch(
+      () => [props.content, props.image, props.width, props.height, props.rotate, props.font],
+      generate
+    );
+    const wrapperRef = vue.ref(null);
+    let observer;
+    vue.onMounted(() => {
+      if (typeof MutationObserver === "undefined" || !wrapperRef.value) return;
+      observer = new MutationObserver((mutations) => {
+        for (const m of mutations) {
+          for (const node of Array.from(m.removedNodes)) {
+            if (node.dataset?.watermark === "true") {
+              generate();
+              return;
+            }
+          }
+        }
+      });
+      observer.observe(wrapperRef.value, { childList: true });
+    });
+    vue.onBeforeUnmount(() => observer?.disconnect());
+    const overlayStyle = vue.computed(
+      () => tigercatCore.getWatermarkOverlayStyle({
+        base64Url: base64.value,
+        width: props.width,
+        height: props.height,
+        gapX: props.gapX,
+        gapY: props.gapY,
+        offsetX: props.offsetX,
+        offsetY: props.offsetY,
+        zIndex: props.zIndex
+      })
+    );
+    return () => {
+      const attrsRecord = attrs;
+      return vue.h(
+        "div",
+        {
+          ...attrs,
+          ref: wrapperRef,
+          class: tigercatCore.classNames(
+            tigercatCore.watermarkWrapperClasses,
+            props.className,
+            tigercatCore.coerceClassValue(attrsRecord.class)
+          ),
+          style: tigercatCore.mergeStyleValues(attrsRecord.style, props.style)
+        },
+        [
+          slots.default?.(),
+          vue.h("div", {
+            "data-watermark": "true",
+            "aria-hidden": "true",
+            style: overlayStyle.value
+          })
+        ]
+      );
+    };
+  }
+});
+var Watermark_default = Watermark;
+
+exports.Watermark = Watermark;
+exports.Watermark_default = Watermark_default;

package/dist/chunk-UQK22ZMC.mjs

@@ -0,0 +1,151 @@
+import { defineComponent, ref, computed, watch, onBeforeUnmount, h } from 'vue';
+import { hexToRgb, rgbToHsv, classNames, colorPickerBaseClasses, coerceClassValue, getColorPickerTriggerClasses, colorPickerPanelClasses, colorPickerInputClasses, colorPickerPresetClasses, hsvToRgb, rgbToHex, isValidHex } from '@expcat/tigercat-core';
+
+// src/components/ColorPicker.ts
+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 containerRef = ref(null);
+    const inputValue = ref(props.modelValue);
+    const hsv = computed(() => {
+      const rgb = hexToRgb(props.modelValue);
+      return rgbToHsv(rgb.r, rgb.g, rgb.b);
+    });
+    watch(
+      () => props.modelValue,
+      (v) => {
+        inputValue.value = v;
+      }
+    );
+    function togglePanel() {
+      if (props.disabled) return;
+      isOpen.value = !isOpen.value;
+    }
+    function closePanel() {
+      isOpen.value = false;
+    }
+    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;
+      if (isValidHex(val)) {
+        const hex = val.startsWith("#") ? val : `#${val}`;
+        emit("update:modelValue", hex);
+        emit("change", hex);
+      }
+    }
+    function handlePresetClick(color) {
+      emit("update:modelValue", color);
+      emit("change", 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: props.modelValue },
+          role: "button",
+          "aria-label": "Pick color",
+          tabindex: 0,
+          onClick: togglePanel
+        }),
+        // 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
+            })
+          ]),
+          // Hex input
+          h("div", { class: "mb-2" }, [
+            h(
+              "label",
+              { class: "block text-xs text-[var(--tiger-text-muted,#6b7280)] mb-1" },
+              "Hex"
+            ),
+            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: props.modelValue },
+              "aria-label": "Color preview"
+            }),
+            h(
+              "span",
+              { class: "text-xs font-mono text-[var(--tiger-text,#111827)]" },
+              props.modelValue
+            )
+          ]),
+          // 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 },
+                "aria-label": `Select ${color}`,
+                onClick: () => handlePresetClick(color)
+              })
+            )
+          ]) : null
+        ]) : null
+      ]
+    );
+  }
+});
+var ColorPicker_default = ColorPicker;
+
+export { ColorPicker, ColorPicker_default };

package/dist/{chunk-NV6GZPJP.mjs → chunk-UWL2XUAH.mjs}

@@ -1,27 +1,9 @@
+import { createFilledIcon } from './chunk-2TNZ4JNT.mjs';
 import { defineComponent, ref, computed, watch, nextTick, onMounted, onBeforeUnmount, h } from 'vue';
-import { parseTime, getTimePickerLabels, getTimePeriodLabels, classNames, timePickerBaseClasses, coerceClassValue, mergeStyleValues, formatTimeDisplayWithLocale, generateHours, generateMinutes, generateSeconds, getTimePickerInputClasses, getTimePickerIconButtonClasses, timePickerInputWrapperClasses, timePickerClearButtonClasses, timePickerPanelClasses, timePickerRangeHeaderClasses, getTimePickerRangeTabButtonClasses, timePickerPanelContentClasses, timePickerColumnClasses, timePickerColumnHeaderClasses, timePickerColumnListClasses, to24HourFormat, getTimePickerOptionAriaLabel, getTimePickerItemClasses, getTimePickerPeriodButtonClasses, timePickerFooterClasses, timePickerFooterButtonClasses, icon20ViewBox, to12HourFormat, TimePickerCloseIconPath, ClockIconPath, isTimeInRange, getCurrentTime, formatTime } from '@expcat/tigercat-core';
+import { ClockIconPath, TimePickerCloseIconPath, parseTime, getTimePickerLabels, getTimePeriodLabels, classNames, timePickerBaseClasses, coerceClassValue, mergeStyleValues, formatTimeDisplayWithLocale, generateHours, generateMinutes, generateSeconds, getTimePickerInputClasses, getTimePickerIconButtonClasses, timePickerInputWrapperClasses, timePickerClearButtonClasses, timePickerPanelClasses, timePickerRangeHeaderClasses, getTimePickerRangeTabButtonClasses, timePickerPanelContentClasses, timePickerColumnClasses, timePickerColumnHeaderClasses, timePickerColumnListClasses, to24HourFormat, getTimePickerOptionAriaLabel, getTimePickerItemClasses, getTimePickerPeriodButtonClasses, timePickerFooterClasses, timePickerFooterButtonClasses, to12HourFormat, isTimeInRange, getCurrentTime, formatTime } from '@expcat/tigercat-core';
 
-// src/components/TimePicker.ts
-var createIcon = (path, className) => {
-  return h(
-    "svg",
-    {
-      class: className,
-      xmlns: "http://www.w3.org/2000/svg",
-      viewBox: icon20ViewBox,
-      fill: "currentColor"
-    },
-    [
-      h("path", {
-        "fill-rule": "evenodd",
-        d: path,
-        "clip-rule": "evenodd"
-      })
-    ]
-  );
-};
-var ClockIcon = createIcon(ClockIconPath, "w-5 h-5");
-var CloseIcon = createIcon(TimePickerCloseIconPath, "w-4 h-4");
+var ClockIcon = createFilledIcon(ClockIconPath, "w-5 h-5");
+var CloseIcon = createFilledIcon(TimePickerCloseIconPath, "w-4 h-4");
 var TimePicker = defineComponent({
   name: "TigerTimePicker",
   inheritAttrs: false,

package/dist/{chunk-LUN3PRLX.js → chunk-V4PBWEAU.js}

@@ -17,15 +17,39 @@ var ConfigProvider = vue.defineComponent({
     locale: {
       type: Object,
       default: void 0
+    },
+    theme: {
+      type: String,
+      default: void 0
+    },
+    colorScheme: {
+      type: String,
+      default: void 0
     }
   },
   setup(props, { slots }) {
     const parent = useTigerConfig();
     const merged = vue.computed(() => {
       return {
-        locale: tigercatCore.mergeTigerLocale(parent.value.locale, props.locale)
+        locale: tigercatCore.mergeTigerLocale(parent.value.locale, props.locale),
+        theme: props.theme ?? parent.value.theme,
+        colorScheme: props.colorScheme ?? parent.value.colorScheme
       };
     });
+    vue.watch(
+      () => merged.value.theme,
+      (name) => {
+        if (name) tigercatCore.ThemeManager.setTheme(name);
+      },
+      { immediate: true }
+    );
+    vue.watch(
+      () => merged.value.colorScheme,
+      (scheme) => {
+        if (scheme) tigercatCore.ThemeManager.setColorScheme(scheme);
+      },
+      { immediate: true }
+    );
     vue.provide(TigerConfigKey, merged);
     return () => slots.default?.();
   }