@xy-planning-network/trees 0.9.3-rc1 → 0.9.3-rc3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xy-planning-network/trees",
-  "version": "0.9.3-rc1",
+  "version": "0.9.3-rc3",
   "description": "",
   "license": "MIT",
   "repository": "github:xy-planning-network/trees",

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

@@ -8,7 +8,6 @@ import {
   emailPattern,
   looseToNumber,
   phonePattern,
-  toDatetimeLocal,
 } from "@/composables/forms"
 import type { TextLikeInput } from "@/composables/forms"
 import { computed, ref } from "vue"
@@ -58,28 +57,14 @@ const typeAttributes = computed(() => {
 const onInput = (e: Event) => {
   let val = (e.target as HTMLInputElement).value
 
-  switch (props.type) {
-    case "datetime-local":
-      val = val ? new Date(val).toISOString() : val
-      break
-    case "number":
-      val = looseToNumber(val)
-      break
+  if (props.type === "number") {
+    val = looseToNumber(val)
   }
 
   modelState.value = val
 
   inputValidation(e)
 }
-
-const inputValue = computed(() => {
-  switch (props.type) {
-    case "datetime-local":
-      return toDatetimeLocal(modelState.value)
-    default:
-      return modelState.value
-  }
-})
 </script>
 
 <template>
@@ -106,7 +91,7 @@ const inputValue = computed(() => {
       ]"
       :placeholder="placeholder"
       :type="type"
-      :value="inputValue"
+      :value="modelState"
       v-bind="{ ...typeAttributes, ...$attrs }"
       @input="onInput"
       @invalid="onInvalid"

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

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import InputLabel from "./InputLabel.vue"
+import InputHelp from "./InputHelp.vue"
+import InputError from "./InputError.vue"
+import {
+  useInputField,
+  defaultInputProps,
+  toDatetimeLocal,
+} from "@/composables/forms"
+import type { DateTimeInput } from "@/composables/forms"
+import { computed, ref } from "vue"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<DateTimeInput>(), defaultInputProps)
+
+defineEmits(["update:modelValue", "update:error"])
+const input = ref<HTMLInputElement | null>(null)
+const {
+  errorState,
+  modelState,
+  inputID,
+  isRequired,
+  onInvalid,
+  inputValidation,
+} = useInputField(props)
+
+const inputValue = computed(() => toDatetimeLocal(modelState.value))
+
+const onInput = (e: Event) => {
+  let val = (e.target as HTMLInputElement).value
+
+  modelState.value = val ? new Date(val).toISOString() : val
+
+  inputValidation(e)
+}
+</script>
+
+<template>
+  <div>
+    <InputLabel
+      :id="`${inputID}-label`"
+      class="mb-2"
+      :for="inputID"
+      :label="label"
+      :required="isRequired"
+    />
+    <input
+      :id="inputID"
+      ref="input"
+      :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="datetime-local"
+      :value="inputValue"
+      v-bind="$attrs"
+      @input="onInput"
+      @invalid="onInvalid"
+    />
+    <InputHelp :id="`${inputID}-help`" class="mt-1" :text="help" />
+    <InputError :id="`${inputID}-error`" class="mt-0.5" :text="errorState" />
+  </div>
+</template>

package/types/composables/forms.d.ts

@@ -22,6 +22,9 @@ export interface DateRangeInput extends Input {
     maxRange?: number;
     startDate?: number;
 }
+export interface DateTimeInput extends Input {
+    modelValue?: string | null;
+}
 export interface TextLikeInput extends Input {
     modelValue?: string | number | null;
     type: TextInputType;
@@ -48,7 +51,8 @@ export declare const defaultInputProps: {
     modelValue: undefined;
     placeholder: string;
 };
-export type TextInputType = "date" | "datetime-local" | "email" | "month" | "number" | "password" | "search" | "tel" | "text" | "time" | "url" | "week";
+export declare const textInputTypes: readonly ["date", "email", "month", "number", "password", "search", "tel", "text", "time", "url", "week"];
+export type TextInputType = (typeof textInputTypes)[number];
 /**
  * useInputField provides a number of computed values, refs, and methods to support
  * wiring up reactive inputs.

package/types/entry.d.ts

@@ -1,7 +1,8 @@
 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, useInputField } from "./composables/forms";
+import type * as InputTypes from "./composables/forms";
+import { emailPattern, looseToNumber, phonePattern, textInputTypes, useInputField } from "./composables/forms";
 import { useModel } from "./composables/setupHelpers";
 import { debounce as debounceFn, debounceLeading } from "./helpers/Debounce";
 import { throttle as throttleFn } from "./helpers/Throttle";
@@ -11,6 +12,7 @@ export * from "./composables/index";
 export * from "./lib-components/index";
 export { BaseAPI, isHttpCancel, isHttpError, setBaseAPIDefaults };
 export type { HttpPromise, HttpError, QueryParams, ReqOptions, ReqPayload, TrailsPromise, TrailsPromisePaged, TrailsResp, TrailsRespPaged, };
-export { emailPattern, looseToNumber, phonePattern, useInputField };
+export type { InputTypes };
+export { emailPattern, looseToNumber, phonePattern, textInputTypes, useInputField, };
 export { useModel };
 export { debounceFn, debounceLeading, throttleFn };

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

@@ -4,7 +4,7 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     };
     type: {
-        type: import("vue").PropType<import("../../composables/forms").TextInputType>;
+        type: import("vue").PropType<"number" | "time" | "text" | "search" | "date" | "email" | "month" | "password" | "tel" | "url" | "week">;
         required: true;
     };
     modelValue: {
@@ -30,7 +30,7 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     };
     type: {
-        type: import("vue").PropType<import("../../composables/forms").TextInputType>;
+        type: import("vue").PropType<"number" | "time" | "text" | "search" | "date" | "email" | "month" | "password" | "tel" | "url" | "week">;
         required: true;
     };
     modelValue: {

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

@@ -0,0 +1,47 @@
+declare const _default: import("vue").DefineComponent<{
+    label: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    modelValue: {
+        type: import("vue").PropType<string | null>;
+        default: undefined;
+    };
+    help: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    placeholder: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (...args: any[]) => void;
+    "update:error": (...args: any[]) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    label: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    modelValue: {
+        type: import("vue").PropType<string | null>;
+        default: undefined;
+    };
+    help: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    placeholder: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:error"?: ((...args: any[]) => any) | undefined;
+}, {
+    label: string;
+    modelValue: string | null;
+    help: string;
+    placeholder: string;
+}, {}>;
+export default _default;

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

@@ -25,6 +25,7 @@ import { default as XYSpinner } from "./indicators/XYSpinner.vue";
 import { default as BaseInput } from "./forms/BaseInput.vue";
 import { default as Checkbox } from "./forms/Checkbox.vue";
 import { default as DateRangePicker } from "./forms/DateRangePicker.vue";
+import { default as DateTime } from "./forms/DateTimeInput.vue";
 import { default as InputError } from "./forms/InputError.vue";
 import { default as InputHelp } from "./forms/InputHelp.vue";
 import { default as InputLabel } from "./forms/InputLabel.vue";
@@ -36,7 +37,7 @@ 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, InputError, InputHelp, InputLabel, FieldsetLegend, MultiCheckboxes, Radio, RadioCards, Select, TextArea, YesOrNoRadio, XYSpinner, };
+Paginator, Spinner, DataTable, Steps, DynamicTable, Tabs, Toggle, Tooltip, BaseInput, Checkbox, DateRangePicker, DateTime, InputError, InputHelp, InputLabel, FieldsetLegend, MultiCheckboxes, Radio, RadioCards, Select, TextArea, YesOrNoRadio, XYSpinner, };
 /**
  * declare global component types for App.use(Trees)
  */
@@ -65,6 +66,7 @@ export interface TreesComponents {
     BaseInput: typeof BaseInput;
     Checkbox: typeof Checkbox;
     DateRangePicker: typeof DateRangePicker;
+    DateTime: typeof DateTime;
     InputError: typeof InputError;
     InputHelp: typeof InputHelp;
     InputLabel: typeof InputLabel;