@xy-planning-network/trees 0.11.3 → 0.11.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xy-planning-network/trees",
-  "version": "0.11.3",
+  "version": "0.11.5",
   "description": "",
   "license": "MIT",
   "repository": "github:xy-planning-network/trees",
@@ -60,6 +60,9 @@
     "@floating-ui/vue": "^1.0.1",
     "@headlessui/vue": "^1.4.2",
     "@heroicons/vue": "^1.0.5",
+    "@maskito/core": "^3.5.0",
+    "@maskito/kit": "^3.5.0",
+    "@maskito/vue": "^3.5.0",
     "axios": "^1.5.0",
     "flatpickr": "^4.6.9"
   },

package/src/lib-components/forms/DateRangePicker.vue

@@ -16,8 +16,12 @@ defineOptions({
   inheritAttrs: false,
 })
 
+// maxDate/startDate should be used or maxRange.
+// The props combination of maxDate/startDate and maxRange 
+// will have unexpected results.
 const props = withDefaults(defineProps<DateRangeInput>(), {
   ...defaultInputProps,
+  maxDate: () => new Date(),
   maxRange: 0,
   placeholder: "mm-dd-yyyy range",
   startDate: 0,
@@ -39,7 +43,7 @@ onMounted(() => {
     allowInput: true,
     dateFormat: "m-d-Y",
     mode: "range",
-    maxDate: new Date(), // So far, we cannot have options past today for ranges
+    maxDate: props.maxDate,
     minDate: props.startDate,
     onClose: (selectedDates) => {
       if (selectedDates.length === 2) {

package/src/lib-components/forms/NumberInput.vue

@@ -0,0 +1,172 @@
+<script setup lang="ts">
+import InputLabel from "./InputLabel.vue"
+import InputHelp from "./InputHelp.vue"
+import InputError from "./InputError.vue"
+import {
+  useInputField,
+  defaultInputProps,
+  defaultModelOpts,
+} from "@/composables/forms"
+import type { NumericInput } from "@/composables/forms"
+import { computed, useAttrs, useTemplateRef } from "vue"
+import { maskito as vMaskito } from "@maskito/vue"
+import { maskitoTransform } from "@maskito/core"
+import {
+  MaskitoNumberParams,
+  maskitoNumberOptionsGenerator,
+  maskitoParseNumber,
+} from "@maskito/kit"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<NumericInput>(), {
+  ...defaultInputProps,
+  max: Number.MAX_SAFE_INTEGER,
+  min: Number.MIN_SAFE_INTEGER,
+  precision: 0,
+  type: "number",
+})
+
+const opts = computed(() => {
+  const params: MaskitoNumberParams = {
+    decimalSeparator: ".",
+    thousandSeparator: ",",
+    min: props.min,
+    max: props.max,
+    precision: props.precision,
+    minusSign: "-",
+  }
+
+  switch (props.type) {
+    case "money":
+      params.decimalZeroPadding = true
+      params.precision = 2
+      params.prefix = "$"
+      break
+
+    default:
+      break
+  }
+
+  return maskitoNumberOptionsGenerator(params)
+})
+
+const modelState = defineModel<NumericInput["modelValue"]>(defaultModelOpts)
+
+/**
+ * masked is a writable computed variable that ensures the modelState
+ * is only set to a valid numeric value as the masked state is a string which
+ * may contain prefix and postfix characters as well as leading or trailing "-", and "." characters.
+ *
+ * It additionally handles the computation of converting a "money" input to an amount in U.S. cents.
+ */
+const masked = computed({
+  get: () => {
+    if (modelState.value === null || modelState.value === undefined) {
+      return ""
+    }
+
+    let num = modelState.value
+    if (props.type === "money") {
+      num = num / 100
+    }
+
+    return maskitoTransform(num.toString(), opts.value)
+  },
+  set: (v) => {
+    if (v === "") {
+      modelState.value = null
+      return
+    }
+
+    let number = maskitoParseNumber(v)
+    if (isNaN(number)) {
+      modelState.value = null
+      return
+    }
+
+    // NOTE(spk): There's no Integer type in JavaScript all numbers are stored as floating point values
+    // to avoid approximations from decimal values avoid calling parseFloat and use parseInt on only the dollar
+    // portion when converting from string to number.
+    if (props.type === "money") {
+      let parts = number.toString().split(".")
+      let dollars = parseInt(parts[0], 10)
+      let cents = parts.length > 1 ? parseInt(parts[1].padEnd(2, "0"), 10) : 0
+      number = dollars * 100 + cents
+    }
+
+    modelState.value = number
+  },
+})
+
+const inputRef = useTemplateRef("input")
+
+const {
+  errorState,
+  inputID,
+  isRequired,
+  nameAttr,
+  onInvalid,
+  inputValidation,
+} = useInputField(props)
+
+// NOTE(spk): reserve the name attribute for the hidden number input.
+const inputAttrs = computed(() => {
+  const attributes = useAttrs()
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { name, ...attrs } = attributes
+  return attrs
+})
+
+defineExpose({ input: inputRef })
+</script>
+
+<template>
+  <div>
+    <InputLabel
+      :id="`${inputID}-label`"
+      class="mb-2"
+      :for="inputID"
+      :label="label"
+      :required="isRequired"
+    />
+    <input
+      :id="inputID"
+      ref="input"
+      v-model="masked"
+      v-maskito="opts"
+      :aria-labelledby="label ? `${inputID}-label` : undefined"
+      :aria-describedby="help ? `${inputID}-help` : undefined"
+      :aria-errormessage="errorState ? `${inputID}-error` : undefined"
+      :class="[
+        'block w-full rounded-md border-0 py-2 shadow-sm ring-1 ring-inset focus:ring-2 sm:text-sm sm:leading-6',
+        'disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-700 disabled:ring-gray-200',
+        errorState
+          ? 'text-red-900 ring-red-700 placeholder:text-red-300 focus:ring-red-700'
+          : 'text-gray-900 ring-gray-300 placeholder:text-gray-400 focus:ring-xy-blue-500',
+      ]"
+      :placeholder="placeholder"
+      type="text"
+      inputmode="decimal"
+      v-bind="{ ...inputAttrs }"
+      @input="inputValidation"
+    />
+
+    <InputHelp :id="`${inputID}-help`" class="mt-1" :text="help" />
+    <InputError :id="`${inputID}-error`" class="mt-0.5" :text="errorState" />
+    <input
+      :value="modelState"
+      class="sr-only"
+      aria-hidden="true"
+      :name="nameAttr"
+      :min="min"
+      :max="max"
+      :required="isRequired"
+      tabindex="-1"
+      type="number"
+      @invalid="onInvalid"
+    />
+  </div>
+</template>

package/types/composables/date.d.ts

@@ -5,6 +5,7 @@ export interface DateRange {
 export interface DateRangeProps {
     help?: string;
     label?: string;
+    maxDate?: Date | string | number;
     maxRange?: number;
-    startDate?: number;
+    startDate?: Date | string | number;
 }

package/types/composables/forms.d.ts

@@ -14,13 +14,22 @@ export interface InputOption {
 export interface BooleanInput extends Input {
     modelValue?: boolean | null;
 }
+/**
+ * DateRangeInput allows a max range to be applied to the datepicker
+ * such that selecting the first date will then apply a max/min of +/- maxRange.
+ * This does not play nicely with maxDate and startDate.
+ *
+ * ex: when submitting a startDate of Jan 1 and maxRange of 10, the date picker will allow
+ * dates prior to Jan 1 given the handling of maxRange being adjusted on the fly.
+ */
 export interface DateRangeInput extends Input {
     modelValue?: {
         minDate: number;
         maxDate: number;
     };
+    maxDate?: Date | string | number;
     maxRange?: number;
-    startDate?: number;
+    startDate?: Date | string | number;
 }
 export interface DateTimeInput extends Input {
     modelValue?: string | null;
@@ -29,6 +38,13 @@ export interface TextLikeInput extends Input {
     modelValue?: string | number | null;
     type: TextInputType;
 }
+export interface NumericInput extends Input {
+    max?: number;
+    min?: number;
+    modelValue?: number | null;
+    precision?: number;
+    type?: NumericInputType;
+}
 export interface TextareaInput extends Input {
     modelValue?: string | number | null;
 }
@@ -68,6 +84,8 @@ export declare const defaultModelOpts: {
 };
 export declare const textInputTypes: readonly ["date", "email", "month", "number", "password", "search", "tel", "text", "time", "url", "week"];
 export type TextInputType = (typeof textInputTypes)[number];
+export declare const numericInputTypes: readonly ["money", "number"];
+export type NumericInputType = (typeof numericInputTypes)[number];
 /**
  * useInputField provides a number of computed values, refs, and methods to support
  * wiring up reactive inputs.

package/types/composables/table.d.ts

@@ -77,6 +77,11 @@ export interface TableColumn<T = TableRowData> {
      * This may include returning a custom component using the vue h method
      */
     render: keyof T | ((rowData: T, rowIndex: number) => string | number | boolean | VNodeChild);
+    /**
+     * A show condition for determining whether the column should be shown in the table.
+     * Use this condition for supporting dynamic column visibility.
+     */
+    show?: boolean;
     /**
      * A sorting identifier
      * Only used on DynamicTable

package/types/composables/useTable.d.ts

@@ -6,6 +6,7 @@ export declare const useTable: (rowData: TableRowsData | Ref<TableRowsData>, col
         classNames?: string | ((rowData: import("./table").TableRowData, rowIndex: number) => string) | undefined;
         title: string;
         render: string | ((rowData: import("./table").TableRowData, rowIndex: number) => import("vue").VNodeChild);
+        show?: boolean | undefined;
         sort?: string | undefined;
     }[]>;
     hasActions: import("vue").ComputedRef<boolean>;
@@ -26,6 +27,7 @@ export declare const useTable: (rowData: TableRowsData | Ref<TableRowsData>, col
             alignment: string;
             title: string;
             render: string | ((rowData: import("./table").TableRowData, rowIndex: number) => import("vue").VNodeChild);
+            show?: boolean | undefined;
             sort?: string | undefined;
         }[];
     }[]>;

package/types/entry.d.ts

@@ -1,7 +1,7 @@
 import { Plugin } from "vue";
 import BaseAPI, { isHttpCancel, isHttpError, setBaseAPIDefaults } from "./api/base";
 import type { HttpPromise, HttpError, QueryParams, ReqOptions, ReqPayload, TrailsPromise, TrailsPromisePaged, TrailsResp, TrailsRespPaged } from "./api/client";
-import { emailPattern, looseToNumber, phonePattern, urlPattern, textInputTypes, useInputField } from "./composables/forms";
+import { emailPattern, looseToNumber, numericInputTypes, phonePattern, urlPattern, textInputTypes, useInputField } from "./composables/forms";
 import { debounce as debounceFn, debounceLeading } from "./helpers/Debounce";
 import { throttle as throttleFn } from "./helpers/Throttle";
 declare const install: Exclude<Plugin["install"], undefined>;
@@ -11,5 +11,5 @@ export * from "./lib-components/index";
 export { BaseAPI, isHttpCancel, isHttpError, setBaseAPIDefaults };
 export type { HttpPromise, HttpError, QueryParams, ReqOptions, ReqPayload, TrailsPromise, TrailsPromisePaged, TrailsResp, TrailsRespPaged, };
 export type * from "./composables/forms";
-export { emailPattern, looseToNumber, phonePattern, urlPattern, textInputTypes, useInputField, };
+export { emailPattern, looseToNumber, phonePattern, urlPattern, numericInputTypes, textInputTypes, useInputField, };
 export { debounceFn, debounceLeading, throttleFn };

package/types/lib-components/forms/DateRangePicker.vue.d.ts

@@ -20,8 +20,9 @@ declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {},
         minDate: number;
         maxDate: number;
     };
+    maxDate: string | number | Date;
     maxRange: number;
-    startDate: number;
+    startDate: string | number | Date;
     help: string;
     placeholder: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/types/lib-components/forms/NumberInput.vue.d.ts

@@ -0,0 +1,24 @@
+import type { NumericInput } from "../../composables/forms";
+type __VLS_Props = NumericInput;
+type __VLS_PublicProps = {
+    modelValue?: NumericInput["modelValue"];
+} & __VLS_Props;
+declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {
+    input: Readonly<import("vue").ShallowRef<HTMLInputElement | null>>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: number | null | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: number | null | undefined) => any) | undefined;
+}>, {
+    label: string;
+    type: "number" | "money";
+    modelValue: number | null;
+    max: number;
+    min: number;
+    help: string;
+    placeholder: string;
+    precision: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {
+    input: HTMLInputElement;
+}, any>;
+export default _default;

package/types/lib-components/index.d.ts

@@ -33,13 +33,14 @@ import { default as InputHelp } from "./forms/InputHelp.vue";
 import { default as InputLabel } from "./forms/InputLabel.vue";
 import { default as FieldsetLegend } from "./forms/FieldsetLegend.vue";
 import { default as MultiCheckboxes } from "./forms/MultiCheckboxes.vue";
+import { default as NumberInput } from "./forms/NumberInput.vue";
 import { default as Radio } from "./forms/Radio.vue";
 import { default as RadioCards } from "./forms/RadioCards.vue";
 import { default as Select } from "./forms/Select.vue";
 import { default as TextArea } from "./forms/TextArea.vue";
 import { default as YesOrNoRadio } from "./forms/YesOrNoRadio.vue";
 export { ActionsDropdown, Cards, ContentModal, DateFilter, DetailList, DownloadCell, Flash, InlineAlert, Modal, SidebarLayout, Slideover, StackedLayout, Popover, PopoverContent, PopoverPosition, // Type export
-Paginator, Spinner, DataTable, Steps, DynamicTable, Tabs, Toggle, Tooltip, BaseInput, Checkbox, DateRangePicker, DateTime, InputError, InputHelp, InputLabel, FieldsetLegend, MultiCheckboxes, Radio, RadioCards, Select, TextArea, YesOrNoRadio, XYSpinner, ProgressCircles, ProgressCirclesLabeled, };
+Paginator, Spinner, DataTable, Steps, DynamicTable, Tabs, Toggle, Tooltip, BaseInput, Checkbox, DateRangePicker, DateTime, InputError, InputHelp, InputLabel, FieldsetLegend, MultiCheckboxes, NumberInput, Radio, RadioCards, Select, TextArea, YesOrNoRadio, XYSpinner, ProgressCircles, ProgressCirclesLabeled, };
 /**
  * declare global component types for App.use(Trees)
  */
@@ -74,6 +75,7 @@ export interface TreesComponents {
     InputLabel: typeof InputLabel;
     FieldsetLegend: typeof FieldsetLegend;
     MultiCheckboxes: typeof MultiCheckboxes;
+    NumberInput: typeof NumberInput;
     Radio: typeof Radio;
     RadioCards: typeof RadioCards;
     Select: typeof Select;