@expcat/tigercat-vue 1.0.7 → 1.2.0

package/dist/chunk-5WG4OFXH.mjs

@@ -0,0 +1,133 @@
+// src/components/NumberKeyboard.ts
+import { computed, defineComponent, h, ref } from "vue";
+import {
+  applyNumberKeyboardInput,
+  classNames,
+  coerceClassValue,
+  deleteNumberKeyboardValue,
+  getNumberKeyboardAction,
+  getNumberKeyboardKeyClasses,
+  getNumberKeyboardKeys,
+  mergeStyleValues,
+  normalizeNumberKeyboardValue,
+  numberKeyboardGridClasses,
+  numberKeyboardRootClasses
+} from "@expcat/tigercat-core";
+var NumberKeyboard = defineComponent({
+  name: "TigerNumberKeyboard",
+  inheritAttrs: false,
+  props: {
+    modelValue: { type: String, default: void 0 },
+    defaultValue: { type: String, default: "" },
+    mode: { type: String, default: "number" },
+    maxLength: { type: Number, default: void 0 },
+    precision: { type: Number, default: void 0 },
+    decimalSeparator: { type: String, default: "." },
+    disabled: { type: Boolean, default: false },
+    readonly: { type: Boolean, default: false },
+    confirmText: { type: String, default: "Done" },
+    deleteText: { type: String, default: "Delete" },
+    ariaLabel: { type: String, default: "Number keyboard" },
+    showConfirm: { type: Boolean, default: true },
+    className: { type: String, default: void 0 },
+    style: {
+      type: Object,
+      default: void 0
+    }
+  },
+  emits: ["update:modelValue", "change", "key-press", "delete", "confirm"],
+  setup(props, { attrs, emit }) {
+    const innerValue = ref(normalizeNumberKeyboardValue(props.defaultValue));
+    const isControlled = computed(() => props.modelValue !== void 0);
+    const currentValue = computed(
+      () => isControlled.value ? normalizeNumberKeyboardValue(props.modelValue) : innerValue.value
+    );
+    const isDisabled = computed(() => props.disabled || props.readonly);
+    const keys = computed(
+      () => getNumberKeyboardKeys({
+        mode: props.mode,
+        decimalSeparator: props.decimalSeparator,
+        deleteText: props.deleteText,
+        confirmText: props.confirmText,
+        showConfirm: props.showConfirm
+      })
+    );
+    function emitChange(nextValue, payload) {
+      if (!isControlled.value) innerValue.value = nextValue;
+      emit("update:modelValue", nextValue);
+      emit("change", nextValue, payload);
+    }
+    function handleKeyClick(key) {
+      if (isDisabled.value || key.type === "empty") return;
+      const action = getNumberKeyboardAction(key);
+      const nextValue = action === "delete" ? deleteNumberKeyboardValue(currentValue.value) : action === "input" ? applyNumberKeyboardInput(currentValue.value, key.value, {
+        mode: props.mode,
+        maxLength: props.maxLength,
+        precision: props.precision,
+        decimalSeparator: props.decimalSeparator
+      }) : currentValue.value;
+      const payload = {
+        value: nextValue,
+        key: key.value,
+        action,
+        mode: props.mode
+      };
+      emit("key-press", key, payload);
+      if (action === "confirm") {
+        emit("confirm", currentValue.value, { ...payload, value: currentValue.value });
+        return;
+      }
+      if (action === "delete") emit("delete", nextValue, payload);
+      if (nextValue !== currentValue.value) emitChange(nextValue, payload);
+    }
+    const rootClasses = computed(
+      () => classNames(numberKeyboardRootClasses, props.className, coerceClassValue(attrs.class))
+    );
+    const rootStyle = computed(
+      () => mergeStyleValues(props.style, attrs.style)
+    );
+    return () => {
+      const forwardedAttrs = Object.fromEntries(
+        Object.entries(attrs).filter(([key]) => key !== "class" && key !== "style")
+      );
+      return h(
+        "div",
+        {
+          ...forwardedAttrs,
+          class: rootClasses.value,
+          style: rootStyle.value,
+          role: "group",
+          "aria-label": props.ariaLabel,
+          "aria-disabled": isDisabled.value || void 0
+        },
+        [
+          h(
+            "div",
+            { class: numberKeyboardGridClasses },
+            keys.value.map(
+              (key, index) => h(
+                "button",
+                {
+                  key: `${key.type}-${key.value}-${index}`,
+                  type: "button",
+                  class: getNumberKeyboardKeyClasses(key, isDisabled.value),
+                  disabled: isDisabled.value || key.disabled,
+                  "aria-label": key.ariaLabel,
+                  "data-key": key.value,
+                  onClick: () => handleKeyClick(key)
+                },
+                key.label
+              )
+            )
+          )
+        ]
+      );
+    };
+  }
+});
+var NumberKeyboard_default = NumberKeyboard;
+
+export {
+  NumberKeyboard,
+  NumberKeyboard_default
+};

package/dist/{chunk-LW3LFCRZ.mjs → chunk-5X3GXNGM.mjs}

@@ -1,7 +1,27 @@
-import { defineComponent, ref, watch, computed, onMounted, h } from 'vue';
-import { isAtMin, isAtMax, classNames, getInputNumberWrapperClasses, getInputNumberStatusClasses, getInputNumberSizeClasses, getInputNumberFocusRingColor, coerceClassValue, getInputNumberInputClasses, getInputNumberSideButtonClasses, inputNumberMinusIconPathD, inputNumberPlusIconPathD, inputNumberControlsRightClasses, getInputNumberStepButtonClasses, inputNumberUpIconPathD, inputNumberDownIconPathD, stepValue, clampValue, formatPrecision } from '@expcat/tigercat-core';
-
 // src/components/InputNumber.ts
+import { defineComponent, computed, ref, watch, h, onMounted, onBeforeUnmount } from "vue";
+import {
+  classNames,
+  coerceClassValue,
+  getInputNumberWrapperClasses,
+  getInputNumberStatusClasses,
+  getInputNumberFocusRingColor,
+  getInputNumberSizeClasses,
+  getInputNumberInputClasses,
+  getInputNumberStepButtonClasses,
+  getInputNumberSideButtonClasses,
+  inputNumberControlsRightClasses,
+  inputNumberUpIconPathD,
+  inputNumberDownIconPathD,
+  inputNumberMinusIconPathD,
+  inputNumberPlusIconPathD,
+  clampValue,
+  stepValue,
+  formatPrecision,
+  isAtMin,
+  isAtMax,
+  createRafRepeatActionController
+} from "@expcat/tigercat-core";
 var InputNumber = defineComponent({
   name: "TigerInputNumber",
   inheritAttrs: false,
@@ -71,6 +91,9 @@ var InputNumber = defineComponent({
   setup(props, { emit, attrs }) {
     const inputRef = ref(null);
     const focused = ref(false);
+    const repeatController = createRafRepeatActionController();
+    let repeatValue = null;
+    let suppressNextClick = false;
     const displayValue = ref("");
     function toDisplayValue(val) {
       if (val === null || val === void 0) return "";
@@ -113,10 +136,10 @@ var InputNumber = defineComponent({
       emit("change", finalVal);
       displayValue.value = toDisplayValue(finalVal);
     }
-    function handleStep(direction) {
-      if (props.disabled || props.readonly) return;
+    function handleStep(direction, baseValue = currentValue.value) {
+      if (props.disabled || props.readonly) return baseValue ?? null;
       const next = stepValue(
-        currentValue.value,
+        baseValue,
         props.step,
         direction,
         props.min,
@@ -124,6 +147,35 @@ var InputNumber = defineComponent({
         props.precision
       );
       commitValue(next);
+      return next;
+    }
+    function handleStepClick(direction) {
+      if (suppressNextClick) {
+        suppressNextClick = false;
+        return;
+      }
+      handleStep(direction);
+    }
+    function startStepRepeat(direction) {
+      return (event) => {
+        event.preventDefault();
+        if (props.disabled || props.readonly) return;
+        if (direction === "down" && isAtMin(currentValue.value, props.min)) return;
+        if (direction === "up" && isAtMax(currentValue.value, props.max)) return;
+        suppressNextClick = true;
+        repeatValue = currentValue.value;
+        repeatController.start(() => {
+          const baseValue = repeatValue;
+          const nextValue = handleStep(direction, baseValue);
+          repeatValue = nextValue;
+          if (nextValue === baseValue) {
+            repeatController.stop();
+          }
+        });
+      };
+    }
+    function stopStepRepeat() {
+      repeatController.stop();
     }
     function handleInput(e) {
       const target = e.target;
@@ -178,6 +230,7 @@ var InputNumber = defineComponent({
         inputRef.value.focus();
       }
     });
+    onBeforeUnmount(() => repeatController.stop());
     return () => {
       const children = [];
       if (props.controls && props.controlsPosition === "both") {
@@ -190,8 +243,11 @@ var InputNumber = defineComponent({
               "aria-label": "Decrease",
               class: getInputNumberSideButtonClasses("left", props.disabled || atMin.value),
               disabled: props.disabled || atMin.value,
-              onMousedown: (e) => e.preventDefault(),
-              onClick: () => handleStep("down")
+              onPointerdown: startStepRepeat("down"),
+              onPointerup: stopStepRepeat,
+              onPointerleave: stopStepRepeat,
+              onPointercancel: stopStepRepeat,
+              onClick: () => handleStepClick("down")
             },
             [
               h(
@@ -242,8 +298,11 @@ var InputNumber = defineComponent({
               "aria-label": "Increase",
               class: getInputNumberSideButtonClasses("right", props.disabled || atMax.value),
               disabled: props.disabled || atMax.value,
-              onMousedown: (e) => e.preventDefault(),
-              onClick: () => handleStep("up")
+              onPointerdown: startStepRepeat("up"),
+              onPointerup: stopStepRepeat,
+              onPointerleave: stopStepRepeat,
+              onPointercancel: stopStepRepeat,
+              onClick: () => handleStepClick("up")
             },
             [
               h(
@@ -273,8 +332,11 @@ var InputNumber = defineComponent({
                 "aria-label": "Increase",
                 class: getInputNumberStepButtonClasses("up", props.disabled || atMax.value),
                 disabled: props.disabled || atMax.value,
-                onMousedown: (e) => e.preventDefault(),
-                onClick: () => handleStep("up")
+                onPointerdown: startStepRepeat("up"),
+                onPointerup: stopStepRepeat,
+                onPointerleave: stopStepRepeat,
+                onPointercancel: stopStepRepeat,
+                onClick: () => handleStepClick("up")
               },
               [
                 h(
@@ -297,8 +359,11 @@ var InputNumber = defineComponent({
                 "aria-label": "Decrease",
                 class: getInputNumberStepButtonClasses("down", props.disabled || atMin.value),
                 disabled: props.disabled || atMin.value,
-                onMousedown: (e) => e.preventDefault(),
-                onClick: () => handleStep("down")
+                onPointerdown: startStepRepeat("down"),
+                onPointerup: stopStepRepeat,
+                onPointerleave: stopStepRepeat,
+                onPointercancel: stopStepRepeat,
+                onClick: () => handleStepClick("down")
               },
               [
                 h(
@@ -328,4 +393,7 @@ var InputNumber = defineComponent({
 });
 var InputNumber_default = InputNumber;
 
-export { InputNumber, InputNumber_default };
+export {
+  InputNumber,
+  InputNumber_default
+};

package/dist/{chunk-PLGYRHPX.mjs → chunk-5ZAIW5W3.mjs}

@@ -1,6 +1,9 @@
-import { TaskBoard } from './chunk-J7VTGSHX.mjs';
-import { defineComponent, h } from 'vue';
+import {
+  TaskBoard
+} from "./chunk-CN7HFUFN.mjs";
 
+// src/components/Kanban.ts
+import { defineComponent, h } from "vue";
 var Kanban = defineComponent({
   name: "TigerKanban",
   inheritAttrs: false,
@@ -84,4 +87,7 @@ var Kanban = defineComponent({
 });
 var Kanban_default = Kanban;
 
-export { Kanban, Kanban_default };
+export {
+  Kanban,
+  Kanban_default
+};

package/dist/{chunk-3PQ2I5IQ.mjs → chunk-6DVWLGSZ.mjs}

@@ -1,9 +1,28 @@
-import { Modal } from './chunk-M6PEW6V5.mjs';
-import { ImageCropper } from './chunk-T77L326M.mjs';
-import { Button } from './chunk-M7JUNLA7.mjs';
-import { defineComponent, ref, computed, h } from 'vue';
-import { classNames, cropUploadTriggerDisabledClasses, cropUploadTriggerClasses, coerceClassValue, mergeStyleValues, uploadPlusIconPath, modalFooterClasses } from '@expcat/tigercat-core';
+import {
+  Modal
+} from "./chunk-DDNRF5U7.mjs";
+import {
+  ImageCropper
+} from "./chunk-DEJKRMMU.mjs";
+import {
+  Button
+} from "./chunk-UM5GGKIX.mjs";
 
+// src/components/CropUpload.ts
+import { defineComponent, h, ref, computed } from "vue";
+import {
+  classNames,
+  coerceClassValue,
+  mergeStyleValues,
+  cropUploadTriggerClasses,
+  cropUploadTriggerDisabledClasses,
+  uploadPlusIconPath,
+  modalFooterClasses,
+  validateUploadFile,
+  readFileAsDataUrl,
+  getCropperResult,
+  isActivationKey
+} from "@expcat/tigercat-core";
 var CropUpload = defineComponent({
   name: "TigerCropUpload",
   inheritAttrs: false,
@@ -38,26 +57,29 @@ var CropUpload = defineComponent({
       const input = e.target;
       const file = input.files?.[0];
       if (!file) return;
-      if (props.maxSize && file.size > props.maxSize) {
-        emit("error", new Error(`File size exceeds maximum of ${props.maxSize} bytes`));
+      const sizeError = validateUploadFile(file, props.maxSize);
+      if (sizeError) {
+        emit("error", sizeError);
         input.value = "";
         return;
       }
-      const reader = new FileReader();
-      reader.onload = (ev) => {
-        imageSrc.value = ev.target?.result;
+      readFileAsDataUrl(file).then((url) => {
+        imageSrc.value = url;
         modalVisible.value = true;
-      };
-      reader.readAsDataURL(file);
+      }).catch((err) => emit("error", err));
       input.value = "";
     };
     const handleConfirm = async () => {
       if (!cropperRef.value) return;
       cropping.value = true;
       try {
-        const result = await cropperRef.value.getCropResult();
-        emit("crop-complete", result);
-        modalVisible.value = false;
+        const result = await getCropperResult(
+          cropperRef.value
+        );
+        if (result) {
+          emit("crop-complete", result);
+          modalVisible.value = false;
+        }
       } catch (err) {
         emit("error", err);
       } finally {
@@ -101,7 +123,7 @@ var CropUpload = defineComponent({
           "aria-label": "Select image to crop and upload",
           "aria-disabled": props.disabled ? "true" : void 0,
           onKeydown: (e) => {
-            if (e.key === "Enter" || e.key === " ") {
+            if (isActivationKey(e)) {
               e.preventDefault();
               handleTriggerClick();
             }
@@ -120,7 +142,7 @@ var CropUpload = defineComponent({
           "aria-label": "Select image to crop and upload",
           "aria-disabled": props.disabled ? "true" : void 0,
           onKeydown: (e) => {
-            if (e.key === "Enter" || e.key === " ") {
+            if (isActivationKey(e)) {
               e.preventDefault();
               handleTriggerClick();
             }
@@ -183,4 +205,7 @@ var CropUpload = defineComponent({
 });
 var CropUpload_default = CropUpload;
 
-export { CropUpload, CropUpload_default };
+export {
+  CropUpload,
+  CropUpload_default
+};

package/dist/chunk-6FXYRDYH.js

@@ -1,10 +1,13 @@
-'use strict';
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } }// src/components/Textarea.ts
+var _vue = require('vue');
 
-var vue = require('vue');
-var tigercatCore = require('@expcat/tigercat-core');
 
-// src/components/Textarea.ts
-var Textarea = vue.defineComponent({
+
+
+
+
+var _tigercatcore = require('@expcat/tigercat-core');
+var Textarea = _vue.defineComponent.call(void 0, {
   name: "TigerTextarea",
   inheritAttrs: false,
   props: {
@@ -144,30 +147,30 @@ var Textarea = vue.defineComponent({
     blur: null
   },
   setup(props, { emit, attrs }) {
-    const textareaRef = vue.ref(null);
-    const localValue = vue.ref(props.modelValue ?? "");
-    vue.watch(
+    const textareaRef = _vue.ref.call(void 0, null);
+    const localValue = _vue.ref.call(void 0, _nullishCoalesce(props.modelValue, () => ( "")));
+    _vue.watch.call(void 0, 
       () => props.modelValue,
       (newValue) => {
-        const next = newValue ?? "";
+        const next = _nullishCoalesce(newValue, () => ( ""));
         if (next !== localValue.value) {
           localValue.value = next;
         }
       }
     );
-    const textareaClasses = vue.computed(
-      () => tigercatCore.classNames(
+    const textareaClasses = _vue.computed.call(void 0, 
+      () => _tigercatcore.classNames.call(void 0, 
         "block",
-        tigercatCore.getInputClasses({ size: props.size }),
+        _tigercatcore.getInputClasses.call(void 0, { size: props.size }),
         props.autoResize ? "resize-none" : "resize-y",
         props.className,
-        tigercatCore.coerceClassValue(attrs.class)
+        _tigercatcore.coerceClassValue.call(void 0, attrs.class)
       )
     );
-    const currentLength = vue.computed(() => localValue.value.length);
+    const currentLength = _vue.computed.call(void 0, () => localValue.value.length);
     const adjustHeight = () => {
       if (!props.autoResize || !textareaRef.value) return;
-      tigercatCore.autoResizeTextarea(textareaRef.value, {
+      _tigercatcore.autoResizeTextarea.call(void 0, textareaRef.value, {
         minRows: props.minRows,
         maxRows: props.maxRows
       });
@@ -188,20 +191,20 @@ var Textarea = vue.defineComponent({
     const handleBlur = (event) => {
       emit("blur", event);
     };
-    vue.watch([localValue, () => props.autoResize, () => props.minRows, () => props.maxRows], () => {
+    _vue.watch.call(void 0, [localValue, () => props.autoResize, () => props.minRows, () => props.maxRows], () => {
       if (!props.autoResize) return;
-      vue.nextTick(adjustHeight);
+      _vue.nextTick.call(void 0, adjustHeight);
     });
-    vue.onMounted(() => {
-      if (props.autoResize) vue.nextTick(adjustHeight);
+    _vue.onMounted.call(void 0, () => {
+      if (props.autoResize) _vue.nextTick.call(void 0, adjustHeight);
     });
     return () => {
       const children = [
-        vue.h("textarea", {
+        _vue.h.call(void 0, "textarea", {
           ...attrs,
           ref: textareaRef,
           class: textareaClasses.value,
-          style: tigercatCore.mergeStyleValues(attrs.style, props.style),
+          style: _tigercatcore.mergeStyleValues.call(void 0, attrs.style, props.style),
           value: localValue.value,
           disabled: props.disabled,
           readonly: props.readonly,
@@ -223,7 +226,7 @@ var Textarea = vue.defineComponent({
       if (props.showCount) {
         const countText = props.maxLength ? `${currentLength.value}/${props.maxLength}` : `${currentLength.value}`;
         children.push(
-          vue.h(
+          _vue.h.call(void 0, 
             "div",
             {
               class: "mt-1 text-sm text-gray-500 text-right"
@@ -232,11 +235,13 @@ var Textarea = vue.defineComponent({
           )
         );
       }
-      return vue.h("div", { class: "w-full" }, children);
+      return _vue.h.call(void 0, "div", { class: "w-full" }, children);
     };
   }
 });
 var Textarea_default = Textarea;
 
-exports.Textarea = Textarea;
-exports.Textarea_default = Textarea_default;
+
+
+
+exports.Textarea = Textarea; exports.Textarea_default = Textarea_default;