@expcat/tigercat-vue 0.3.70 → 0.4.2

package/dist/chunk-HK2TAPQX.js

@@ -0,0 +1,334 @@
+'use strict';
+
+var vue = require('vue');
+var tigercatCore = require('@expcat/tigercat-core');
+
+// src/components/InputNumber.ts
+var InputNumber = vue.defineComponent({
+  name: "TigerInputNumber",
+  inheritAttrs: false,
+  props: {
+    modelValue: {
+      type: [Number, null]
+    },
+    size: {
+      type: String,
+      default: "md"
+    },
+    status: {
+      type: String,
+      default: "default"
+    },
+    min: {
+      type: Number,
+      default: -Infinity
+    },
+    max: {
+      type: Number,
+      default: Infinity
+    },
+    step: {
+      type: Number,
+      default: 1
+    },
+    precision: {
+      type: Number,
+      default: void 0
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    placeholder: String,
+    name: String,
+    id: String,
+    keyboard: {
+      type: Boolean,
+      default: true
+    },
+    controls: {
+      type: Boolean,
+      default: true
+    },
+    controlsPosition: {
+      type: String,
+      default: "right"
+    },
+    formatter: {
+      type: Function
+    },
+    parser: {
+      type: Function
+    },
+    autoFocus: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ["update:modelValue", "change", "focus", "blur"],
+  setup(props, { emit, attrs }) {
+    const inputRef = vue.ref(null);
+    const focused = vue.ref(false);
+    const displayValue = vue.ref("");
+    function toDisplayValue(val) {
+      if (val === null || val === void 0) return "";
+      if (props.formatter) return props.formatter(val);
+      if (props.precision !== void 0) return val.toFixed(props.precision);
+      return String(val);
+    }
+    function parseValue(str) {
+      if (str === "" || str === "-") return null;
+      if (props.parser) return props.parser(str);
+      const num = Number(str);
+      return Number.isNaN(num) ? null : num;
+    }
+    vue.watch(
+      () => props.modelValue,
+      (val) => {
+        if (!focused.value) {
+          displayValue.value = toDisplayValue(val);
+        }
+      },
+      { immediate: true }
+    );
+    const isControlled = vue.computed(() => props.modelValue !== void 0);
+    const internalValue = vue.ref(props.modelValue ?? null);
+    const currentValue = vue.computed(
+      () => isControlled.value ? props.modelValue ?? null : internalValue.value
+    );
+    function commitValue(val) {
+      let finalVal = val;
+      if (finalVal !== null) {
+        finalVal = tigercatCore.clampValue(finalVal, props.min, props.max);
+        if (props.precision !== void 0) {
+          finalVal = tigercatCore.formatPrecision(finalVal, props.precision);
+        }
+      }
+      if (!isControlled.value) {
+        internalValue.value = finalVal;
+      }
+      emit("update:modelValue", finalVal);
+      emit("change", finalVal);
+      displayValue.value = toDisplayValue(finalVal);
+    }
+    function handleStep(direction) {
+      if (props.disabled || props.readonly) return;
+      const next = tigercatCore.stepValue(
+        currentValue.value,
+        props.step,
+        direction,
+        props.min,
+        props.max,
+        props.precision
+      );
+      commitValue(next);
+    }
+    function handleInput(e) {
+      const target = e.target;
+      displayValue.value = target.value;
+    }
+    function handleBlur(e) {
+      focused.value = false;
+      const parsed = parseValue(displayValue.value);
+      commitValue(parsed);
+      emit("blur", e);
+    }
+    function handleFocus(e) {
+      focused.value = true;
+      if (props.formatter && currentValue.value !== null) {
+        displayValue.value = String(currentValue.value);
+      }
+      emit("focus", e);
+    }
+    function handleKeyDown(e) {
+      if (!props.keyboard || props.disabled || props.readonly) return;
+      if (e.key === "ArrowUp") {
+        e.preventDefault();
+        handleStep("up");
+      } else if (e.key === "ArrowDown") {
+        e.preventDefault();
+        handleStep("down");
+      } else if (e.key === "Enter") {
+        const parsed = parseValue(displayValue.value);
+        commitValue(parsed);
+      }
+    }
+    const atMin = vue.computed(() => tigercatCore.isAtMin(currentValue.value, props.min));
+    const atMax = vue.computed(() => tigercatCore.isAtMax(currentValue.value, props.max));
+    const wrapperClasses = vue.computed(
+      () => tigercatCore.classNames(
+        tigercatCore.getInputNumberWrapperClasses(props.disabled),
+        tigercatCore.getInputNumberStatusClasses(props.status),
+        tigercatCore.getInputNumberSizeClasses(props.size),
+        focused.value && `ring-2 ${tigercatCore.getInputNumberFocusRingColor(props.status)}`,
+        tigercatCore.coerceClassValue(attrs.class)
+      )
+    );
+    const inputClasses = vue.computed(
+      () => tigercatCore.getInputNumberInputClasses(
+        props.size,
+        props.controls && props.controlsPosition === "right",
+        props.controls && props.controlsPosition === "both"
+      )
+    );
+    vue.onMounted(() => {
+      if (props.autoFocus && inputRef.value) {
+        inputRef.value.focus();
+      }
+    });
+    return () => {
+      const children = [];
+      if (props.controls && props.controlsPosition === "both") {
+        children.push(
+          vue.h(
+            "button",
+            {
+              type: "button",
+              tabindex: -1,
+              "aria-label": "Decrease",
+              class: tigercatCore.getInputNumberSideButtonClasses("left", props.disabled || atMin.value),
+              disabled: props.disabled || atMin.value,
+              onMousedown: (e) => e.preventDefault(),
+              onClick: () => handleStep("down")
+            },
+            [
+              vue.h(
+                "svg",
+                {
+                  xmlns: "http://www.w3.org/2000/svg",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  "stroke-width": "2",
+                  class: "w-4 h-4"
+                },
+                [vue.h("path", { d: tigercatCore.inputNumberMinusIconPathD })]
+              )
+            ]
+          )
+        );
+      }
+      children.push(
+        vue.h("input", {
+          ref: inputRef,
+          type: "text",
+          inputmode: "decimal",
+          role: "spinbutton",
+          "aria-valuemin": props.min === -Infinity ? void 0 : props.min,
+          "aria-valuemax": props.max === Infinity ? void 0 : props.max,
+          "aria-valuenow": currentValue.value ?? void 0,
+          class: inputClasses.value,
+          value: displayValue.value,
+          placeholder: props.placeholder,
+          disabled: props.disabled,
+          readonly: props.readonly,
+          name: props.name,
+          id: props.id,
+          onInput: handleInput,
+          onBlur: handleBlur,
+          onFocus: handleFocus,
+          onKeydown: handleKeyDown
+        })
+      );
+      if (props.controls && props.controlsPosition === "both") {
+        children.push(
+          vue.h(
+            "button",
+            {
+              type: "button",
+              tabindex: -1,
+              "aria-label": "Increase",
+              class: tigercatCore.getInputNumberSideButtonClasses("right", props.disabled || atMax.value),
+              disabled: props.disabled || atMax.value,
+              onMousedown: (e) => e.preventDefault(),
+              onClick: () => handleStep("up")
+            },
+            [
+              vue.h(
+                "svg",
+                {
+                  xmlns: "http://www.w3.org/2000/svg",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  "stroke-width": "2",
+                  class: "w-4 h-4"
+                },
+                [vue.h("path", { d: tigercatCore.inputNumberPlusIconPathD })]
+              )
+            ]
+          )
+        );
+      }
+      if (props.controls && props.controlsPosition === "right") {
+        children.push(
+          vue.h("div", { class: tigercatCore.inputNumberControlsRightClasses }, [
+            vue.h(
+              "button",
+              {
+                type: "button",
+                tabindex: -1,
+                "aria-label": "Increase",
+                class: tigercatCore.getInputNumberStepButtonClasses("up", props.disabled || atMax.value),
+                disabled: props.disabled || atMax.value,
+                onMousedown: (e) => e.preventDefault(),
+                onClick: () => handleStep("up")
+              },
+              [
+                vue.h(
+                  "svg",
+                  {
+                    xmlns: "http://www.w3.org/2000/svg",
+                    viewBox: "0 0 24 24",
+                    fill: "currentColor",
+                    class: "w-3 h-3"
+                  },
+                  [vue.h("path", { d: tigercatCore.inputNumberUpIconPathD })]
+                )
+              ]
+            ),
+            vue.h(
+              "button",
+              {
+                type: "button",
+                tabindex: -1,
+                "aria-label": "Decrease",
+                class: tigercatCore.getInputNumberStepButtonClasses("down", props.disabled || atMin.value),
+                disabled: props.disabled || atMin.value,
+                onMousedown: (e) => e.preventDefault(),
+                onClick: () => handleStep("down")
+              },
+              [
+                vue.h(
+                  "svg",
+                  {
+                    xmlns: "http://www.w3.org/2000/svg",
+                    viewBox: "0 0 24 24",
+                    fill: "currentColor",
+                    class: "w-3 h-3"
+                  },
+                  [vue.h("path", { d: tigercatCore.inputNumberDownIconPathD })]
+                )
+              ]
+            )
+          ])
+        );
+      }
+      return vue.h(
+        "div",
+        {
+          class: wrapperClasses.value
+        },
+        children
+      );
+    };
+  }
+});
+var InputNumber_default = InputNumber;
+
+exports.InputNumber = InputNumber;
+exports.InputNumber_default = InputNumber_default;

package/dist/{chunk-YZK2HXRT.js → chunk-LGRUMMOG.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunk3PQIZBT5_js = require('./chunk-3PQIZBT5.js');
+var chunkWV3Y45YK_js = require('./chunk-WV3Y45YK.js');
 var chunkHNQZ5JRB_js = require('./chunk-HNQZ5JRB.js');
 var chunkAGAJJYP2_js = require('./chunk-AGAJJYP2.js');
 var chunkWC4B72TZ_js = require('./chunk-WC4B72TZ.js');
@@ -338,7 +338,7 @@ var DataTableWithToolbar = vue.defineComponent({
         },
         [
           renderToolbar(),
-          vue.h(chunk3PQIZBT5_js.Table, tableProps),
+          vue.h(chunkWV3Y45YK_js.Table, tableProps),
           showPagination ? vue.h(chunkAGAJJYP2_js.Pagination, {
             ...props.pagination,
             onChange: (current, pageSize) => emit("page-change", current, pageSize),

package/dist/chunk-LW3LFCRZ.mjs

@@ -0,0 +1,331 @@
+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
+var InputNumber = defineComponent({
+  name: "TigerInputNumber",
+  inheritAttrs: false,
+  props: {
+    modelValue: {
+      type: [Number, null]
+    },
+    size: {
+      type: String,
+      default: "md"
+    },
+    status: {
+      type: String,
+      default: "default"
+    },
+    min: {
+      type: Number,
+      default: -Infinity
+    },
+    max: {
+      type: Number,
+      default: Infinity
+    },
+    step: {
+      type: Number,
+      default: 1
+    },
+    precision: {
+      type: Number,
+      default: void 0
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    placeholder: String,
+    name: String,
+    id: String,
+    keyboard: {
+      type: Boolean,
+      default: true
+    },
+    controls: {
+      type: Boolean,
+      default: true
+    },
+    controlsPosition: {
+      type: String,
+      default: "right"
+    },
+    formatter: {
+      type: Function
+    },
+    parser: {
+      type: Function
+    },
+    autoFocus: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ["update:modelValue", "change", "focus", "blur"],
+  setup(props, { emit, attrs }) {
+    const inputRef = ref(null);
+    const focused = ref(false);
+    const displayValue = ref("");
+    function toDisplayValue(val) {
+      if (val === null || val === void 0) return "";
+      if (props.formatter) return props.formatter(val);
+      if (props.precision !== void 0) return val.toFixed(props.precision);
+      return String(val);
+    }
+    function parseValue(str) {
+      if (str === "" || str === "-") return null;
+      if (props.parser) return props.parser(str);
+      const num = Number(str);
+      return Number.isNaN(num) ? null : num;
+    }
+    watch(
+      () => props.modelValue,
+      (val) => {
+        if (!focused.value) {
+          displayValue.value = toDisplayValue(val);
+        }
+      },
+      { immediate: true }
+    );
+    const isControlled = computed(() => props.modelValue !== void 0);
+    const internalValue = ref(props.modelValue ?? null);
+    const currentValue = computed(
+      () => isControlled.value ? props.modelValue ?? null : internalValue.value
+    );
+    function commitValue(val) {
+      let finalVal = val;
+      if (finalVal !== null) {
+        finalVal = clampValue(finalVal, props.min, props.max);
+        if (props.precision !== void 0) {
+          finalVal = formatPrecision(finalVal, props.precision);
+        }
+      }
+      if (!isControlled.value) {
+        internalValue.value = finalVal;
+      }
+      emit("update:modelValue", finalVal);
+      emit("change", finalVal);
+      displayValue.value = toDisplayValue(finalVal);
+    }
+    function handleStep(direction) {
+      if (props.disabled || props.readonly) return;
+      const next = stepValue(
+        currentValue.value,
+        props.step,
+        direction,
+        props.min,
+        props.max,
+        props.precision
+      );
+      commitValue(next);
+    }
+    function handleInput(e) {
+      const target = e.target;
+      displayValue.value = target.value;
+    }
+    function handleBlur(e) {
+      focused.value = false;
+      const parsed = parseValue(displayValue.value);
+      commitValue(parsed);
+      emit("blur", e);
+    }
+    function handleFocus(e) {
+      focused.value = true;
+      if (props.formatter && currentValue.value !== null) {
+        displayValue.value = String(currentValue.value);
+      }
+      emit("focus", e);
+    }
+    function handleKeyDown(e) {
+      if (!props.keyboard || props.disabled || props.readonly) return;
+      if (e.key === "ArrowUp") {
+        e.preventDefault();
+        handleStep("up");
+      } else if (e.key === "ArrowDown") {
+        e.preventDefault();
+        handleStep("down");
+      } else if (e.key === "Enter") {
+        const parsed = parseValue(displayValue.value);
+        commitValue(parsed);
+      }
+    }
+    const atMin = computed(() => isAtMin(currentValue.value, props.min));
+    const atMax = computed(() => isAtMax(currentValue.value, props.max));
+    const wrapperClasses = computed(
+      () => classNames(
+        getInputNumberWrapperClasses(props.disabled),
+        getInputNumberStatusClasses(props.status),
+        getInputNumberSizeClasses(props.size),
+        focused.value && `ring-2 ${getInputNumberFocusRingColor(props.status)}`,
+        coerceClassValue(attrs.class)
+      )
+    );
+    const inputClasses = computed(
+      () => getInputNumberInputClasses(
+        props.size,
+        props.controls && props.controlsPosition === "right",
+        props.controls && props.controlsPosition === "both"
+      )
+    );
+    onMounted(() => {
+      if (props.autoFocus && inputRef.value) {
+        inputRef.value.focus();
+      }
+    });
+    return () => {
+      const children = [];
+      if (props.controls && props.controlsPosition === "both") {
+        children.push(
+          h(
+            "button",
+            {
+              type: "button",
+              tabindex: -1,
+              "aria-label": "Decrease",
+              class: getInputNumberSideButtonClasses("left", props.disabled || atMin.value),
+              disabled: props.disabled || atMin.value,
+              onMousedown: (e) => e.preventDefault(),
+              onClick: () => handleStep("down")
+            },
+            [
+              h(
+                "svg",
+                {
+                  xmlns: "http://www.w3.org/2000/svg",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  "stroke-width": "2",
+                  class: "w-4 h-4"
+                },
+                [h("path", { d: inputNumberMinusIconPathD })]
+              )
+            ]
+          )
+        );
+      }
+      children.push(
+        h("input", {
+          ref: inputRef,
+          type: "text",
+          inputmode: "decimal",
+          role: "spinbutton",
+          "aria-valuemin": props.min === -Infinity ? void 0 : props.min,
+          "aria-valuemax": props.max === Infinity ? void 0 : props.max,
+          "aria-valuenow": currentValue.value ?? void 0,
+          class: inputClasses.value,
+          value: displayValue.value,
+          placeholder: props.placeholder,
+          disabled: props.disabled,
+          readonly: props.readonly,
+          name: props.name,
+          id: props.id,
+          onInput: handleInput,
+          onBlur: handleBlur,
+          onFocus: handleFocus,
+          onKeydown: handleKeyDown
+        })
+      );
+      if (props.controls && props.controlsPosition === "both") {
+        children.push(
+          h(
+            "button",
+            {
+              type: "button",
+              tabindex: -1,
+              "aria-label": "Increase",
+              class: getInputNumberSideButtonClasses("right", props.disabled || atMax.value),
+              disabled: props.disabled || atMax.value,
+              onMousedown: (e) => e.preventDefault(),
+              onClick: () => handleStep("up")
+            },
+            [
+              h(
+                "svg",
+                {
+                  xmlns: "http://www.w3.org/2000/svg",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  "stroke-width": "2",
+                  class: "w-4 h-4"
+                },
+                [h("path", { d: inputNumberPlusIconPathD })]
+              )
+            ]
+          )
+        );
+      }
+      if (props.controls && props.controlsPosition === "right") {
+        children.push(
+          h("div", { class: inputNumberControlsRightClasses }, [
+            h(
+              "button",
+              {
+                type: "button",
+                tabindex: -1,
+                "aria-label": "Increase",
+                class: getInputNumberStepButtonClasses("up", props.disabled || atMax.value),
+                disabled: props.disabled || atMax.value,
+                onMousedown: (e) => e.preventDefault(),
+                onClick: () => handleStep("up")
+              },
+              [
+                h(
+                  "svg",
+                  {
+                    xmlns: "http://www.w3.org/2000/svg",
+                    viewBox: "0 0 24 24",
+                    fill: "currentColor",
+                    class: "w-3 h-3"
+                  },
+                  [h("path", { d: inputNumberUpIconPathD })]
+                )
+              ]
+            ),
+            h(
+              "button",
+              {
+                type: "button",
+                tabindex: -1,
+                "aria-label": "Decrease",
+                class: getInputNumberStepButtonClasses("down", props.disabled || atMin.value),
+                disabled: props.disabled || atMin.value,
+                onMousedown: (e) => e.preventDefault(),
+                onClick: () => handleStep("down")
+              },
+              [
+                h(
+                  "svg",
+                  {
+                    xmlns: "http://www.w3.org/2000/svg",
+                    viewBox: "0 0 24 24",
+                    fill: "currentColor",
+                    class: "w-3 h-3"
+                  },
+                  [h("path", { d: inputNumberDownIconPathD })]
+                )
+              ]
+            )
+          ])
+        );
+      }
+      return h(
+        "div",
+        {
+          class: wrapperClasses.value
+        },
+        children
+      );
+    };
+  }
+});
+var InputNumber_default = InputNumber;
+
+export { InputNumber, InputNumber_default };

package/dist/{chunk-ND4XDRYR.mjs → chunk-TCJBN2DA.mjs}

@@ -1,4 +1,4 @@
-import { Table } from './chunk-ZTJTIQZY.mjs';
+import { Table } from './chunk-DEFEAEYE.mjs';
 import { Select } from './chunk-GALASVSG.mjs';
 import { Pagination } from './chunk-NHCCPMLC.mjs';
 import { Input } from './chunk-VURU7TLN.mjs';