@expcat/tigercat-vue 1.0.4 → 1.1.0

package/dist/{chunk-GTSS7RAT.mjs → chunk-CN2SP53A.mjs}

@@ -1,8 +1,8 @@
-import { useChartInteraction } from './chunk-DU2NXX75.mjs';
-import { ChartTooltip } from './chunk-FXGIIFGN.mjs';
-import { ChartCanvas } from './chunk-5WHLXWWT.mjs';
-import { defineComponent, computed, h } from 'vue';
-import { getChartInnerRect, computeHeatmapCells, resolveChartTooltipContent, classNames, chartAxisTickTextClasses, getChartElementOpacity } from '@expcat/tigercat-core';
+import { useChartInteraction } from './chunk-N4GS2LSN.mjs';
+import { ChartTooltip } from './chunk-OK4PVFQG.mjs';
+import { ChartCanvas } from './chunk-W5RZPTFD.mjs';
+import { defineComponent, ref, computed, watchEffect, nextTick, h } from 'vue';
+import { getChartInnerRect, computeHeatmapCells, resolveChartTooltipContent, resolveHeatmapRenderMode, getChartElementOpacity, classNames, chartAxisTickTextClasses, getHeatmapCellIndexAtPoint } from '@expcat/tigercat-core';
 
 var HeatmapChart = defineComponent({
   name: "TigerHeatmapChart",
@@ -15,9 +15,12 @@ var HeatmapChart = defineComponent({
     yLabels: { type: Array, required: true },
     minColor: { type: String, default: "#f0f9ff" },
     maxColor: { type: String, default: "#2563eb" },
+    colorSpace: { type: String, default: "rgb" },
     cellRadius: { type: Number, default: 2 },
     cellGap: { type: Number, default: 1 },
     showValues: { type: Boolean, default: false },
+    renderMode: { type: String, default: "auto" },
+    canvasThreshold: { type: Number },
     valueFormatter: { type: Function },
     // Interaction
     hoverable: { type: Boolean, default: false },
@@ -38,6 +41,7 @@ var HeatmapChart = defineComponent({
   },
   emits: ["update:hoveredIndex", "update:selectedIndex", "cell-click", "cell-hover"],
   setup(props, { emit }) {
+    const canvasRef = ref(null);
     const {
       tooltipPosition,
       resolvedHoveredIndex,
@@ -67,7 +71,8 @@ var HeatmapChart = defineComponent({
         height: innerRect.value.height,
         cellGap: props.cellGap,
         minColor: props.minColor,
-        maxColor: props.maxColor
+        maxColor: props.maxColor,
+        colorSpace: props.colorSpace
       })
     );
     const tooltipContent = computed(
@@ -76,6 +81,99 @@ var HeatmapChart = defineComponent({
         return `${cell.xLabel} \xD7 ${cell.yLabel}: ${val}`;
       })
     );
+    const resolvedRenderMode = computed(
+      () => resolveHeatmapRenderMode(cells.value.length, {
+        renderMode: props.renderMode,
+        canvasThreshold: props.canvasThreshold
+      })
+    );
+    const shouldRenderCanvas = computed(() => resolvedRenderMode.value === "canvas");
+    watchEffect(() => {
+      if (!shouldRenderCanvas.value) return;
+      const rect = innerRect.value;
+      const cellList = cells.value;
+      const currentActiveIndex = activeIndex.value;
+      const currentActiveOpacity = props.activeOpacity;
+      const currentInactiveOpacity = props.inactiveOpacity;
+      const currentCellRadius = props.cellRadius;
+      const currentShowValues = props.showValues;
+      const formatter = props.valueFormatter;
+      nextTick(() => {
+        const canvas = canvasRef.value;
+        const context = canvas?.getContext("2d");
+        if (!canvas || !context) return;
+        context.clearRect(0, 0, rect.width, rect.height);
+        context.textAlign = "center";
+        context.textBaseline = "middle";
+        context.font = "10px sans-serif";
+        cellList.forEach((cell, idx) => {
+          context.globalAlpha = getChartElementOpacity(idx, currentActiveIndex, {
+            activeOpacity: currentActiveOpacity,
+            inactiveOpacity: currentInactiveOpacity
+          }) ?? 1;
+          context.fillStyle = cell.fill;
+          const radius = Math.max(0, Math.min(currentCellRadius, cell.w / 2, cell.h / 2));
+          if (radius > 0) {
+            context.beginPath();
+            context.moveTo(cell.x + radius, cell.y);
+            context.lineTo(cell.x + cell.w - radius, cell.y);
+            context.quadraticCurveTo(cell.x + cell.w, cell.y, cell.x + cell.w, cell.y + radius);
+            context.lineTo(cell.x + cell.w, cell.y + cell.h - radius);
+            context.quadraticCurveTo(
+              cell.x + cell.w,
+              cell.y + cell.h,
+              cell.x + cell.w - radius,
+              cell.y + cell.h
+            );
+            context.lineTo(cell.x + radius, cell.y + cell.h);
+            context.quadraticCurveTo(cell.x, cell.y + cell.h, cell.x, cell.y + cell.h - radius);
+            context.lineTo(cell.x, cell.y + radius);
+            context.quadraticCurveTo(cell.x, cell.y, cell.x + radius, cell.y);
+            context.closePath();
+            context.fill();
+          } else {
+            context.fillRect(cell.x, cell.y, cell.w, cell.h);
+          }
+          if (currentShowValues) {
+            context.globalAlpha = 1;
+            context.fillStyle = "var(--tiger-text,#374151)";
+            context.fillText(
+              formatter ? formatter(cell.value) : `${cell.value}`,
+              cell.x + cell.w / 2,
+              cell.y + cell.h / 2
+            );
+          }
+        });
+        context.globalAlpha = 1;
+      });
+    });
+    const getCanvasPoint = (event) => {
+      const canvas = event.currentTarget;
+      const bounds = canvas.getBoundingClientRect();
+      const scaleX = bounds.width > 0 ? canvas.width / bounds.width : 1;
+      const scaleY = bounds.height > 0 ? canvas.height / bounds.height : 1;
+      return {
+        x: event.offsetX * scaleX,
+        y: event.offsetY * scaleY
+      };
+    };
+    const handleCanvasMouseMove = (event) => {
+      const point = getCanvasPoint(event);
+      const index = getHeatmapCellIndexAtPoint(cells.value, point.x, point.y);
+      if (index === null) {
+        handleMouseLeave();
+        return;
+      }
+      handleMouseEnter(index, event);
+      handleMouseMove(event);
+    };
+    const handleCanvasClick = (event) => {
+      const point = getCanvasPoint(event);
+      const index = getHeatmapCellIndexAtPoint(cells.value, point.x, point.y);
+      if (index !== null) {
+        handleClick(index);
+      }
+    };
     return () => {
       const interactive = props.hoverable || props.selectable;
       const rect = innerRect.value;
@@ -120,7 +218,7 @@ var HeatmapChart = defineComponent({
                 label
               );
             });
-            const cellElems = cells.value.map((cell, idx) => {
+            const cellElems = shouldRenderCanvas.value ? [] : cells.value.map((cell, idx) => {
               const opacity = getChartElementOpacity(idx, activeIndex.value, {
                 activeOpacity: props.activeOpacity,
                 inactiveOpacity: props.inactiveOpacity
@@ -136,7 +234,10 @@ var HeatmapChart = defineComponent({
                   fill: cell.fill,
                   opacity,
                   class: classNames(interactive && "cursor-pointer"),
-                  style: { transition: "opacity 0.2s ease-out" },
+                  style: {
+                    transition: "opacity 0.2s ease-out",
+                    rx: `var(--tiger-chart-block-radius, ${props.cellRadius}px)`
+                  },
                   onMouseenter: (e) => handleMouseEnter(idx, e),
                   onMousemove: handleMouseMove,
                   onMouseleave: handleMouseLeave,
@@ -172,7 +273,26 @@ var HeatmapChart = defineComponent({
         x: tooltipPosition.value.x,
         y: tooltipPosition.value.y
       }) : null;
-      return h("div", { class: "inline-block relative" }, [chart, tooltip]);
+      const canvas = shouldRenderCanvas.value ? h("canvas", {
+        ref: canvasRef,
+        width: rect.width,
+        height: rect.height,
+        class: classNames(interactive && "cursor-pointer"),
+        style: {
+          position: "absolute",
+          left: `${rect.x}px`,
+          top: `${rect.y}px`,
+          width: `${rect.width}px`,
+          height: `${rect.height}px`,
+          pointerEvents: interactive ? "auto" : "none"
+        },
+        "data-heatmap-canvas": "true",
+        "data-heatmap-render-mode": resolvedRenderMode.value,
+        onMousemove: interactive ? handleCanvasMouseMove : void 0,
+        onMouseleave: interactive ? handleMouseLeave : void 0,
+        onClick: interactive ? handleCanvasClick : void 0
+      }) : null;
+      return h("div", { class: "inline-block relative" }, [chart, canvas, tooltip]);
     };
   }
 });

package/dist/chunk-CRGGJKV2.js

@@ -0,0 +1,286 @@
+'use strict';
+
+var vue = require('vue');
+var tigercatCore = require('@expcat/tigercat-core');
+
+// src/components/ImagePreview.ts
+var svgIcon = (d, cls = "w-5 h-5") => vue.h(
+  "svg",
+  {
+    class: cls,
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor"
+  },
+  [
+    vue.h("path", {
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      "stroke-width": "2",
+      d
+    })
+  ]
+);
+var ImagePreview = vue.defineComponent({
+  name: "TigerImagePreview",
+  inheritAttrs: false,
+  props: {
+    open: { type: Boolean, default: false },
+    images: { type: Array, default: () => [] },
+    currentIndex: { type: Number, default: 0 },
+    zIndex: { type: Number, default: 1050 },
+    maskClosable: { type: Boolean, default: true },
+    scaleStep: { type: Number, default: 0.5 },
+    minScale: { type: Number, default: 0.25 },
+    maxScale: { type: Number, default: 5 }
+  },
+  emits: ["update:open", "update:currentIndex", "scale-change"],
+  setup(props, { emit }) {
+    const scale = vue.ref(1);
+    const rotation = vue.ref(0);
+    const offsetX = vue.ref(0);
+    const offsetY = vue.ref(0);
+    const index = vue.ref(props.currentIndex);
+    const dragging = vue.ref(false);
+    const dragStart = vue.ref({ x: 0, y: 0, ox: 0, oy: 0 });
+    const resetTransform = () => {
+      scale.value = 1;
+      rotation.value = 0;
+      offsetX.value = 0;
+      offsetY.value = 0;
+    };
+    vue.watch(
+      () => props.currentIndex,
+      (val) => {
+        index.value = val;
+        resetTransform();
+      }
+    );
+    const isOpen = vue.computed(() => props.open);
+    vue.watch(
+      () => isOpen.value,
+      (val) => {
+        if (val) {
+          resetTransform();
+          index.value = props.currentIndex;
+          document.body.style.overflow = "hidden";
+        } else {
+          document.body.style.overflow = "";
+        }
+      }
+    );
+    const navState = vue.computed(() => tigercatCore.getPreviewNavState(index.value, props.images.length));
+    const handleClose = () => {
+      emit("update:open", false);
+    };
+    const handleZoomIn = () => {
+      scale.value = tigercatCore.clampScale(scale.value + props.scaleStep, props.minScale, props.maxScale);
+      emit("scale-change", scale.value);
+    };
+    const handleZoomOut = () => {
+      scale.value = tigercatCore.clampScale(scale.value - props.scaleStep, props.minScale, props.maxScale);
+      emit("scale-change", scale.value);
+    };
+    const handleReset = () => {
+      resetTransform();
+      emit("scale-change", 1);
+    };
+    const handleRotateLeft = () => {
+      rotation.value = tigercatCore.normalizeRotation(rotation.value - 90);
+    };
+    const handleRotateRight = () => {
+      rotation.value = tigercatCore.normalizeRotation(rotation.value + 90);
+    };
+    const handlePrev = () => {
+      if (navState.value.hasPrev) {
+        index.value--;
+        resetTransform();
+        emit("update:currentIndex", index.value);
+      }
+    };
+    const handleNext = () => {
+      if (navState.value.hasNext) {
+        index.value++;
+        resetTransform();
+        emit("update:currentIndex", index.value);
+      }
+    };
+    const handleWheel = (e) => {
+      e.preventDefault();
+      const delta = e.deltaY > 0 ? -props.scaleStep : props.scaleStep;
+      scale.value = tigercatCore.clampScale(scale.value + delta, props.minScale, props.maxScale);
+      emit("scale-change", scale.value);
+    };
+    const handleMouseDown = (e) => {
+      if (e.button !== 0) return;
+      e.preventDefault();
+      dragging.value = true;
+      dragStart.value = {
+        x: e.clientX,
+        y: e.clientY,
+        ox: offsetX.value,
+        oy: offsetY.value
+      };
+    };
+    const handleMouseMove = (e) => {
+      if (!dragging.value) return;
+      offsetX.value = dragStart.value.ox + (e.clientX - dragStart.value.x);
+      offsetY.value = dragStart.value.oy + (e.clientY - dragStart.value.y);
+    };
+    const handleMouseUp = () => {
+      dragging.value = false;
+    };
+    const handleMaskClick = (e) => {
+      if (props.maskClosable && e.target === e.currentTarget) {
+        handleClose();
+      }
+    };
+    const handleKeyDown = (e) => {
+      if (!isOpen.value) return;
+      switch (e.key) {
+        case "Escape":
+          handleClose();
+          break;
+        case "ArrowLeft":
+          handlePrev();
+          break;
+        case "ArrowRight":
+          handleNext();
+          break;
+      }
+    };
+    vue.onMounted(() => {
+      document.addEventListener("keydown", handleKeyDown);
+    });
+    vue.onBeforeUnmount(() => {
+      document.removeEventListener("keydown", handleKeyDown);
+      document.body.style.overflow = "";
+    });
+    const transform = vue.computed(
+      () => `${tigercatCore.calculateTransform(scale.value, offsetX.value, offsetY.value)} rotate(${rotation.value}deg)`
+    );
+    return () => {
+      if (!isOpen.value || !props.images.length) return null;
+      const currentSrc = props.images[index.value] || props.images[0];
+      const mask = vue.h("div", {
+        class: tigercatCore.imagePreviewMaskClasses,
+        "aria-hidden": "true"
+      });
+      const img = vue.h("img", {
+        src: currentSrc,
+        class: tigercatCore.imagePreviewImgClasses,
+        style: { transform: transform.value },
+        alt: `Preview image ${index.value + 1}`,
+        draggable: false,
+        onMousedown: handleMouseDown,
+        onMousemove: handleMouseMove,
+        onMouseup: handleMouseUp,
+        onMouseleave: handleMouseUp
+      });
+      const closeBtn = vue.h(
+        "button",
+        {
+          class: tigercatCore.imagePreviewCloseBtnClasses,
+          onClick: handleClose,
+          "aria-label": "Close preview",
+          type: "button"
+        },
+        [svgIcon(tigercatCore.previewCloseIconPath)]
+      );
+      const toolbar = vue.h("div", { class: tigercatCore.imagePreviewToolbarClasses }, [
+        vue.h(
+          "button",
+          {
+            class: tigercatCore.imagePreviewToolbarBtnClasses,
+            onClick: handleZoomOut,
+            "aria-label": "Zoom out",
+            type: "button"
+          },
+          [svgIcon(tigercatCore.zoomOutIconPath)]
+        ),
+        vue.h(
+          "button",
+          {
+            class: tigercatCore.imagePreviewToolbarBtnClasses,
+            onClick: handleReset,
+            "aria-label": "Reset",
+            type: "button"
+          },
+          [svgIcon(tigercatCore.resetIconPath)]
+        ),
+        vue.h(
+          "button",
+          {
+            class: tigercatCore.imagePreviewToolbarBtnClasses,
+            onClick: handleZoomIn,
+            "aria-label": "Zoom in",
+            type: "button"
+          },
+          [svgIcon(tigercatCore.zoomInIconPath)]
+        ),
+        vue.h(
+          "button",
+          {
+            class: tigercatCore.imagePreviewToolbarBtnClasses,
+            onClick: handleRotateLeft,
+            "aria-label": "Rotate left",
+            type: "button"
+          },
+          [svgIcon(tigercatCore.imageViewerIcons.rotateLeft)]
+        ),
+        vue.h(
+          "button",
+          {
+            class: tigercatCore.imagePreviewToolbarBtnClasses,
+            onClick: handleRotateRight,
+            "aria-label": "Rotate right",
+            type: "button"
+          },
+          [svgIcon(tigercatCore.imageViewerIcons.rotateRight)]
+        ),
+        navState.value.counter ? vue.h("span", { class: tigercatCore.imagePreviewCounterClasses }, navState.value.counter) : null
+      ]);
+      const prevBtn = props.images.length > 1 ? vue.h(
+        "button",
+        {
+          class: tigercatCore.classNames(tigercatCore.imagePreviewNavBtnClasses, "left-4"),
+          onClick: handlePrev,
+          disabled: !navState.value.hasPrev,
+          "aria-label": "Previous image",
+          type: "button"
+        },
+        [svgIcon(tigercatCore.prevIconPath)]
+      ) : null;
+      const nextBtn = props.images.length > 1 ? vue.h(
+        "button",
+        {
+          class: tigercatCore.classNames(tigercatCore.imagePreviewNavBtnClasses, "right-4"),
+          onClick: handleNext,
+          disabled: !navState.value.hasNext,
+          "aria-label": "Next image",
+          type: "button"
+        },
+        [svgIcon(tigercatCore.nextIconPath)]
+      ) : null;
+      const wrapper = vue.h(
+        "div",
+        {
+          class: tigercatCore.imagePreviewWrapperClasses,
+          style: { zIndex: props.zIndex },
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-label": "Image preview",
+          onClick: handleMaskClick,
+          onWheel: handleWheel
+        },
+        [mask, img, closeBtn, prevBtn, nextBtn, toolbar]
+      );
+      return vue.h(vue.Teleport, { to: "body" }, [wrapper]);
+    };
+  }
+});
+var ImagePreview_default = ImagePreview;
+
+exports.ImagePreview = ImagePreview;
+exports.ImagePreview_default = ImagePreview_default;

package/dist/{chunk-2SK6T4WB.js → chunk-CSJQKBDJ.js}

@@ -6,7 +6,10 @@ var tigercatCore = require('@expcat/tigercat-core');
 
 var NOTIFICATION_CONTAINER_ID_PREFIX = "tiger-notification-container";
 var NOTIFICATION_CLOSE_ARIA_LABEL = "Close notification";
-var IS_TEST_ENV = typeof process !== "undefined" && process.env?.NODE_ENV === "test";
+var IS_TEST_ENV = (() => {
+  const proc = globalThis.process;
+  return typeof proc !== "undefined" && proc.env?.NODE_ENV === "test";
+})();
 var notificationInstancesByPosition = {
   "top-left": [],
   "top-right": [],
@@ -26,6 +29,12 @@ var updateCallbacks = {
   "bottom-left": null,
   "bottom-right": null
 };
+var stackUpdateScheduler = tigercatCore.createNotificationStackUpdateScheduler();
+function scheduleNotificationStackUpdate(position) {
+  const callback = updateCallbacks[position];
+  if (!callback) return;
+  stackUpdateScheduler.schedule(position, callback);
+}
 function getNextInstanceId() {
   return ++instanceIdCounter;
 }
@@ -104,7 +113,10 @@ var NotificationContainer = vue.defineComponent({
               "aria-label": NOTIFICATION_CLOSE_ARIA_LABEL,
               type: "button"
             },
-            chunkJCMGBKS6_js.createStatusIcon(tigercatCore.notificationCloseIconPath, tigercatCore.notificationCloseIconClasses, { "aria-hidden": "true", focusable: "false" })
+            chunkJCMGBKS6_js.createStatusIcon(tigercatCore.notificationCloseIconPath, tigercatCore.notificationCloseIconClasses, {
+              "aria-hidden": "true",
+              focusable: "false"
+            })
           )
         );
       }
@@ -170,6 +182,7 @@ function ensureContainer(position) {
   if (containerApps[position] && !existingRootEl) {
     containerApps[position] = null;
     updateCallbacks[position] = null;
+    stackUpdateScheduler.cancel(position);
   }
   if (containerApps[position]) {
     return;
@@ -190,6 +203,7 @@ function destroyContainer(position) {
     containerApps[position] = null;
   }
   updateCallbacks[position] = null;
+  stackUpdateScheduler.cancel(position);
   if (tigercatCore.isBrowser()) {
     document.getElementById(rootId)?.remove();
   }
@@ -212,7 +226,7 @@ function addNotification(config) {
     position
   };
   notificationInstancesByPosition[position].push(instance);
-  updateCallbacks[position]?.();
+  scheduleNotificationStackUpdate(position);
   if (instance.duration > 0) {
     setTimeout(() => {
       removeNotification(id, position);
@@ -227,8 +241,10 @@ function removeNotification(id, position) {
     const instance = instances[index];
     instances.splice(index, 1);
     instance.onClose?.();
+    if (notificationInstancesByPosition[position].length > 0) {
+      scheduleNotificationStackUpdate(position);
+    }
   }
-  updateCallbacks[position]?.();
   if (notificationInstancesByPosition[position].length === 0) {
     destroyContainer(position);
   }

package/dist/{chunk-Z2NMFYF4.mjs → chunk-CZALMJH3.mjs}

@@ -1,5 +1,5 @@
 import { Textarea } from './chunk-MKBIVETW.mjs';
-import { Button } from './chunk-M7JUNLA7.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';
@@ -279,7 +279,7 @@ var CommentThread = defineComponent({
               replyingTo.value === node.id ? h(
                 "div",
                 {
-                  class: "mt-3 space-y-2 bg-[var(--tiger-surface-muted,#f9fafb)] p-3 rounded-lg"
+                  class: "mt-3 space-y-2 bg-[var(--tiger-surface-muted,#f9fafb)] p-3 rounded-[var(--tiger-radius-md,0.5rem)]"
                 },
                 [
                   h(Textarea, {
@@ -374,6 +374,7 @@ var CommentThread = defineComponent({
           ...attrs,
           class: wrapperClasses.value,
           style: wrapperStyle.value,
+          role: attrs.role ?? "feed",
           "data-tiger-comment-thread": true,
           "aria-label": ariaLabel
         },

package/dist/{chunk-6A57RY3H.mjs → chunk-DBTS5QBX.mjs}

@@ -1,4 +1,4 @@
-import { useVueFloating, useVueClickOutside, useVueEscapeKey } from './chunk-CU4M5ABS.mjs';
+import { useVueFloating, useVueClickOutside, useVueEscapeKey } from './chunk-7RIWAO2A.mjs';
 import { ref, computed, watch, onBeforeUnmount } from 'vue';
 import { getTransformOrigin, buildTriggerHandlerMap } from '@expcat/tigercat-core';
 
@@ -50,7 +50,7 @@ function useFloatingPopup(options) {
       if (visible && trigger === "click") {
         outsideClickCleanup = useVueClickOutside({
           enabled: currentVisible,
-          containerRef,
+          refs: [containerRef, floatingRef],
           onOutsideClick: () => setVisible(false),
           defer: true
         });

package/dist/{chunk-XYYZAQ6Z.mjs → chunk-DIQGHFAT.mjs}

@@ -1,5 +1,5 @@
 import { defineComponent, computed, h } from 'vue';
-import { classNames, getSwitchClasses, getSwitchThumbClasses } from '@expcat/tigercat-core';
+import { getSwitchClasses, getSwitchThumbClasses } from '@expcat/tigercat-core';
 
 // src/components/Switch.ts
 var Switch = defineComponent({
@@ -49,7 +49,7 @@ var Switch = defineComponent({
   },
   setup(props, { emit, attrs }) {
     const switchClasses = computed(
-      () => classNames(getSwitchClasses(props.size, props.checked, props.disabled), props.className)
+      () => getSwitchClasses(props.size, props.checked, props.disabled, props.className, attrs.class)
     );
     const thumbClasses = computed(() => getSwitchThumbClasses(props.size, props.checked));
     const emitChange = () => {
@@ -73,7 +73,7 @@ var Switch = defineComponent({
         role: "switch",
         "aria-checked": props.checked,
         "aria-disabled": props.disabled ? "true" : void 0,
-        class: [switchClasses.value, attrs.class],
+        class: switchClasses.value,
         style: props.style,
         disabled: props.disabled,
         tabindex: props.disabled ? -1 : attrs.tabindex,