@xy-planning-network/trees 0.10.5 → 0.11.0-rc1

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

@@ -2,7 +2,11 @@
 import InputLabel from "./InputLabel.vue"
 import InputHelp from "./InputHelp.vue"
 import InputError from "./InputError.vue"
-import { useInputField, defaultInputProps } from "@/composables/forms"
+import {
+  useInputField,
+  defaultInputProps,
+  defaultModelOpts,
+} from "@/composables/forms"
 import type { TextareaInput } from "@/composables/forms"
 
 defineOptions({
@@ -10,21 +14,11 @@ defineOptions({
 })
 
 const props = withDefaults(defineProps<TextareaInput>(), defaultInputProps)
-defineEmits(["update:modelValue", "update:error"])
-const {
-  aria,
-  inputID,
-  isRequired,
-  modelState,
-  errorState,
-  onInvalid,
-  inputValidation,
-} = useInputField(props)
 
-const onInput = (e: Event) => {
-  modelState.value = (e.target as HTMLInputElement).value.trim()
-  inputValidation(e)
-}
+const modelState = defineModel<TextareaInput["modelValue"]>(defaultModelOpts)
+
+const { aria, inputID, isRequired, errorState, onInvalid, inputValidation } =
+  useInputField(props)
 </script>
 
 <template>
@@ -38,6 +32,7 @@ const onInput = (e: Event) => {
     />
     <textarea
       :id="inputID"
+      v-model="modelState"
       :aria-labelledby="aria.labelledby"
       :aria-describedby="aria.describedby"
       :aria-errormessage="aria.errormessage"
@@ -49,9 +44,8 @@ const onInput = (e: Event) => {
           : 'text-gray-900 ring-gray-300 placeholder:text-gray-400 focus:ring-xy-blue-500',
       ]"
       :placeholder="placeholder"
-      :value="modelState || undefined"
       v-bind="$attrs"
-      @input="onInput"
+      @input="inputValidation"
       @invalid="onInvalid"
     />
     <InputHelp :id="aria.describedby" class="mt-1" :text="help" />

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

@@ -7,7 +7,7 @@ import {
 } from "@headlessui/vue"
 import InputLabel from "@/lib-components/forms/InputLabel.vue"
 import InputHelp from "@/lib-components/forms/InputHelp.vue"
-import { hasAttribute } from "@/composables/forms"
+import { defaultModelOpts, hasAttribute } from "@/composables/forms"
 import { computed, useAttrs } from "vue"
 
 defineOptions({
@@ -16,7 +16,6 @@ defineOptions({
 
 withDefaults(
   defineProps<{
-    modelValue?: boolean
     label?: string
     help?: string
   }>(),
@@ -26,7 +25,8 @@ withDefaults(
   }
 )
 
-const emits = defineEmits(["update:modelValue"])
+const switchState = defineModel<boolean>(defaultModelOpts)
+
 const attrs = useAttrs()
 const isDisabled = computed(() => {
   return hasAttribute(attrs, "disabled")
@@ -35,20 +35,19 @@ const isDisabled = computed(() => {
 <template>
   <SwitchGroup as="div" class="flex items-start">
     <Switch
+      v-model="switchState"
       :class="[
-        modelValue ? 'bg-xy-blue' : 'bg-gray-200',
+        switchState ? 'bg-xy-blue' : 'bg-gray-200',
         isDisabled ? 'opacity-75 cursor-not-allowed' : 'cursor-pointer',
         'relative inline-flex shrink-0 h-6 w-11 border-2 border-transparent rounded-full transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-xy-blue-500',
       ]"
       :disabled="isDisabled"
-      :model-value="modelValue"
-      @update:model-value="emits('update:modelValue', $event)"
     >
       <span v-if="!label" class="sr-only">Use</span>
       <span
         aria-hidden="true"
         :class="[
-          modelValue ? 'translate-x-5' : 'translate-x-0',
+          switchState ? 'translate-x-5' : 'translate-x-0',
           'pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200',
         ]"
       />

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

@@ -3,7 +3,11 @@ import FieldsetLegend from "./FieldsetLegend.vue"
 import InputLabel from "./InputLabel.vue"
 import InputHelp from "./InputHelp.vue"
 import InputError from "./InputError.vue"
-import { useInputField, defaultInputProps } from "@/composables/forms"
+import {
+  useInputField,
+  defaultInputProps,
+  defaultModelOpts,
+} from "@/composables/forms"
 import type { BooleanInput } from "@/composables/forms"
 
 defineOptions({
@@ -11,23 +15,17 @@ defineOptions({
 })
 
 const props = withDefaults(defineProps<BooleanInput>(), defaultInputProps)
+const modelState = defineModel<BooleanInput["modelValue"]>(defaultModelOpts)
 
-defineEmits(["update:modelValue", "update:error"])
 const {
   aria,
   isDisabled,
   isRequired,
   nameAttr,
-  modelState,
   errorState,
   onInvalid,
   validate,
 } = useInputField(props)
-
-const onChange = (e: Event, val: boolean) => {
-  modelState.value = val
-  validate(e)
-}
 </script>
 
 <template>
@@ -63,6 +61,7 @@ const onChange = (e: Event, val: boolean) => {
       >
         <input
           :id="`${nameAttr}-true`"
+          v-model="modelState"
           type="radio"
           :class="[
             'h-4 w-4 text-xy-blue cursor-pointer',
@@ -74,9 +73,8 @@ const onChange = (e: Event, val: boolean) => {
           ]"
           :name="nameAttr"
           :value="true"
-          :checked="modelState === true"
           v-bind="$attrs"
-          @change="onChange($event, true)"
+          @change="validate"
           @invalid="onInvalid"
         />
         <InputLabel class="ml-3" label="Yes" tag="span" />
@@ -89,6 +87,7 @@ const onChange = (e: Event, val: boolean) => {
       >
         <input
           :id="`${nameAttr}-false`"
+          v-model="modelState"
           type="radio"
           :class="[
             'h-4 w-4 text-xy-blue cursor-pointer',
@@ -100,9 +99,8 @@ const onChange = (e: Event, val: boolean) => {
           ]"
           :name="nameAttr"
           :value="false"
-          :checked="modelState === false"
           v-bind="$attrs"
-          @change="onChange($event, false)"
+          @change="validate"
           @invalid="onInvalid"
         />
         <InputLabel class="ml-3" label="No" tag="span" />

package/src/lib-components/layout/DateFilter.vue

@@ -21,12 +21,16 @@ const emits = defineEmits<{
   (e: "date-range-changed", val: DateRange): void
 }>()
 
-const sortDirChanged = (sortDir: SortDir) => {
-  emits("sort-dir-changed", sortDir)
+const sortDirChanged = (sortDir: unknown) => {
+  if (sortDir === "asc" || sortDir === "desc") {
+    emits("sort-dir-changed", sortDir)
+  }
 }
 
-const dateRangeChanged = (dateRange: DateRange) => {
-  emits("date-range-changed", dateRange)
+const dateRangeChanged = (dateRange: DateRange | undefined) => {
+  if (dateRange) {
+    emits("date-range-changed", dateRange)
+  }
 }
 </script>
 <template>

package/src/lib-components/lists/DynamicTable.vue

@@ -12,7 +12,7 @@ import type {
 } from "@/composables/table"
 import { useAppFlasher } from "@/composables/useFlashes"
 import { TrailsRespPaged } from "@/api/client"
-import { DateRangeProps } from "@/composables/date"
+import { DateRange, DateRangeProps } from "@/composables/date"
 import { useTable } from "@/composables/useTable"
 import TableActionButtons from "./TableActionButtons.vue"
 
@@ -116,13 +116,12 @@ const pagination = ref({
 })
 const query = ref("")
 
-const dateRangeChanged = (newDateRange: {
-  minDate: number
-  maxDate: number
-}): void => {
-  pagination.value.page = 1
-  dateRange.value = newDateRange
-  loadAndRender()
+const dateRangeChanged = (newDateRange: DateRange | undefined): void => {
+  if (newDateRange) {
+    pagination.value.page = 1
+    dateRange.value = newDateRange
+    loadAndRender()
+  }
 }
 const handleSort = (selectedSort: string): void => {
   if (currentSort.value == selectedSort) {

package/src/lib-components/navigation/ActionsDropdown.vue

@@ -17,6 +17,8 @@ const props = withDefaults(
 
 const { actions, hasActions } = useActionItems(toRef(props, "actions"))
 
+// NOTE(spk): there's a circular type refernce between useTemplateRef and useFloating.
+// Hold on moving to useTemplateRef until this is updated in useFloating.
 const trigger = ref<HTMLElement | null>(null)
 const wrapper = ref<HTMLElement | null>(null)
 const { floatingStyles } = useFloating(trigger, wrapper, {

package/src/lib-components/navigation/Paginator.vue

@@ -2,27 +2,24 @@
 import { Pagination } from "@/composables/nav"
 import { computed } from "vue"
 
-const props = defineProps<{
-  modelValue: Pagination
-}>()
-
-const emit = defineEmits<{
-  (e: "update:modelValue", pagination: Pagination): void
-}>()
+const pagination = defineModel<Pagination>({ required: true })
 
 const changePage = (page: number): void => {
-  emit("update:modelValue", {
-    ...props.modelValue,
+  // NOTE(spk): reminder that defineModel does not change the one-way data flow philosphy of Vue.js
+  // replace the entire object to ensure the event is emitted.  Directly mutating a single prop will
+  // simply be a
+  pagination.value = {
+    ...pagination.value,
     page: page,
-  })
+  }
 }
 
 const pageShortcuts = computed((): number[] => {
   const shortcuts: number[] = []
 
   // If total pages is less than or equal to 4, just return 1, 2, 3, 4
-  if (props.modelValue.totalPages <= 4) {
-    for (let i = 0; i < props.modelValue.totalPages; i++) {
+  if (pagination.value.totalPages <= 4) {
+    for (let i = 0; i < pagination.value.totalPages; i++) {
       shortcuts.push(i + 1)
     }
     return shortcuts
@@ -30,10 +27,10 @@ const pageShortcuts = computed((): number[] => {
 
   // If there are more than 3 pages left, show these
   // e.g. [4, 5, 6, 7] when there are 8 total pages and the current page is 4
-  const pagesLeft: number = props.modelValue.totalPages - props.modelValue.page
+  const pagesLeft: number = pagination.value.totalPages - pagination.value.page
   if (pagesLeft >= 3) {
     for (let i = 0; i < 4; i++) {
-      shortcuts.push(props.modelValue.page + i)
+      shortcuts.push(pagination.value.page + i)
     }
     return shortcuts
   }
@@ -41,7 +38,7 @@ const pageShortcuts = computed((): number[] => {
   // If there are less than 3 pages left, count backwards from the last page
   // e.g. [5, 6, 7, 8] when on page 5, 6, 7, and 8 and there are 8 total pages
   for (let i = 0; i < 4; i++) {
-    shortcuts.unshift(props.modelValue.totalPages - i)
+    shortcuts.unshift(pagination.value.totalPages - i)
   }
   return shortcuts
 })
@@ -53,11 +50,11 @@ const pageShortcuts = computed((): number[] => {
         href="#"
         class="-mt-px border-t-2 border-transparent pt-4 pr-1 inline-flex items-center text-sm leading-5 font-medium focus:outline-none focus:text-gray-700 focus:border-gray-400"
         :class="
-          modelValue.page == 1
+          pagination.page == 1
             ? 'text-gray-500 cursor-not-allowed pointer-events-none'
             : 'text-gray-700 hover:text-gray-900 hover:border-gray-300'
         "
-        @click.prevent="changePage(modelValue.page - 1)"
+        @click.prevent="changePage(pagination.page - 1)"
       >
         <svg class="mr-3 h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
           <path
@@ -77,7 +74,7 @@ const pageShortcuts = computed((): number[] => {
         href="#"
         class="-mt-px border-t-2 pt-4 px-4 inline-flex items-center text-sm leading-5 font-medium"
         :class="
-          modelValue.page === i
+          pagination.page === i
             ? 'border-blue-500 text-blue-600 focus:outline-none focus:text-blue-800 focus:border-blue-700'
             : 'border-transparent text-gray-700 hover:text-gray-900 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-400'
         "
@@ -91,11 +88,11 @@ const pageShortcuts = computed((): number[] => {
         href="#"
         class="-mt-px border-t-2 border-transparent pt-4 pl-1 inline-flex items-center text-sm leading-5 font-medium focus:outline-none focus:text-gray-700 focus:border-gray-400"
         :class="
-          modelValue.page >= modelValue.totalPages
+          pagination.page >= pagination.totalPages
             ? 'text-gray-500 cursor-not-allowed pointer-events-none'
             : 'text-gray-700 hover:text-gray-900 hover:border-gray-300'
         "
-        @click.prevent="changePage(modelValue.page + 1)"
+        @click.prevent="changePage(pagination.page + 1)"
       >
         Next
         <svg class="ml-3 h-5 w-5" fill="currentColor" viewBox="0 0 20 20">

package/src/lib-components/navigation/Tabs.vue

@@ -1,9 +1,8 @@
 <script setup lang="ts">
-import { computed } from "vue"
+import { computed, defineModel } from "vue"
 
 const props = withDefaults(
   defineProps<{
-    modelValue: string
     pillDesign?: boolean
     tabs: Array<{
       label: string
@@ -15,13 +14,7 @@ const props = withDefaults(
   }
 )
 
-const emit = defineEmits<{
-  (e: "update:modelValue", val: string): void
-}>()
-
-const updateModelValue = (modelValue: string): void => {
-  emit("update:modelValue", modelValue)
-}
+const activeTab = defineModel<string>({ required: true })
 
 const classes = (currentTab: string, pastFirstTab: boolean): string => {
   let c = ""
@@ -30,7 +23,7 @@ const classes = (currentTab: string, pastFirstTab: boolean): string => {
     c =
       "px-12 py-2 font-semibold text-md leading-5 rounded-t-md focus:outline-none "
 
-    if (props.modelValue === currentTab) {
+    if (activeTab.value === currentTab) {
       c = c + "focus:bg-white text-gray-700 bg-white border-b-2 border-blue-500"
     } else {
       c =
@@ -43,7 +36,7 @@ const classes = (currentTab: string, pastFirstTab: boolean): string => {
 
   c =
     "px-1 py-4 text-sm font-semibold border-b-2 whitespace-nowrap leading-5 focus:outline-none "
-  if (props.modelValue === currentTab) {
+  if (activeTab.value === currentTab) {
     c =
       c +
       "border-blue-500 text-xy-blue focus:text-blue-800 focus:border-blue-700"
@@ -66,12 +59,7 @@ const notPillDesign = computed((): boolean => {
   <div>
     <div class="sm:hidden" :class="{ 'mb-4': pillDesign }">
       <label for="tabs" class="sr-only">Select a tab</label>
-      <Select
-        name="tabs"
-        :model-value="modelValue"
-        :options="tabs"
-        @update:model-value="updateModelValue($event)"
-      />
+      <Select v-model="activeTab" name="tabs" :options="tabs" />
     </div>
     <div class="hidden sm:block">
       <div :class="{ 'border-b border-gray-200': notPillDesign }">
@@ -81,7 +69,7 @@ const notPillDesign = computed((): boolean => {
             :key="idx"
             href="#"
             :class="classes(tab.value, idx > 0)"
-            @click.prevent="updateModelValue(tab.value)"
+            @click.prevent="activeTab = tab.value"
             v-text="tab.label"
           >
           </a>

package/src/lib-components/overlays/ContentModal.vue

@@ -6,10 +6,10 @@ import {
   TransitionChild,
   TransitionRoot,
 } from "@headlessui/vue"
+import { watch } from "vue"
 
 withDefaults(
   defineProps<{
-    modelValue: boolean
     btnText?: string
     title?: string
   }>(),
@@ -19,22 +19,26 @@ withDefaults(
   }
 )
 
+const open = defineModel<boolean>({ required: true })
+
 const emit = defineEmits<{
-  (e: "update:modelValue", val: boolean): void
+  (e: "close"): void
 }>()
 
-const updateModelValue = (value: boolean) => {
-  emit("update:modelValue", value)
-}
+watch(open, (isOpen) => {
+  if (!isOpen) {
+    emit("close")
+  }
+})
 </script>
 <template>
-  <TransitionRoot as="template" :show="modelValue">
+  <TransitionRoot as="template" :show="open">
     <Dialog
       as="div"
       static
       class="fixed z-30 inset-0 overflow-y-auto"
-      :open="modelValue"
-      @close="updateModelValue(false)"
+      :open="open"
+      @close="open = false"
     >
       <div
         class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
@@ -84,7 +88,7 @@ const updateModelValue = (value: boolean) => {
               <button
                 type="button"
                 class="inline-flex justify-center w-full xy-btn"
-                @click="updateModelValue(false)"
+                @click="open = false"
               >
                 {{ btnText }}
               </button>

package/src/lib-components/overlays/Modal.vue

@@ -7,12 +7,12 @@ import {
   TransitionRoot,
 } from "@headlessui/vue"
 import { XIcon } from "@heroicons/vue/outline"
+import { watch } from "vue"
 
 withDefaults(
   defineProps<{
     destructive?: boolean
     disabled?: boolean
-    modelValue: boolean
     wide?: boolean
     submitText?: string
     title?: string
@@ -26,27 +26,31 @@ withDefaults(
   }
 )
 
+const open = defineModel<boolean>({ required: true })
+
 const emit = defineEmits<{
+  (e: "close"): void
   (e: "submit"): void
-  (e: "update:modelValue", val: boolean): void
 }>()
 
 const submit = () => {
   emit("submit")
 }
 
-const updateModelValue = (value: boolean) => {
-  emit("update:modelValue", value)
-}
+watch(open, (isOpen) => {
+  if (!isOpen) {
+    emit("close")
+  }
+})
 </script>
 <template>
-  <TransitionRoot as="template" :show="modelValue">
+  <TransitionRoot as="template" :show="open">
     <Dialog
       as="div"
       static
       class="fixed z-30 inset-0 overflow-y-auto"
-      :open="modelValue"
-      @close="updateModelValue(false)"
+      :open="open"
+      @close="open = false"
     >
       <div
         class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
@@ -88,7 +92,7 @@ const updateModelValue = (value: boolean) => {
               <button
                 type="button"
                 class="bg-white rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
-                @click="updateModelValue(false)"
+                @click="open = false"
               >
                 <span class="sr-only">Close</span>
                 <XIcon class="h-6 w-6" aria-hidden="true" />
@@ -119,10 +123,9 @@ const updateModelValue = (value: boolean) => {
                 v-text="submitText"
               ></button>
               <button
-                ref="cancelButtonRef"
                 type="button"
                 class="xy-btn-neutral mt-3 w-full sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
-                @click="updateModelValue(false)"
+                @click="open = false"
               >
                 Cancel
               </button>

package/src/lib-components/overlays/Popover/Popover.vue

@@ -25,6 +25,8 @@ const props = withDefaults(
   }
 )
 
+// NOTE(spk): there's a circular type reference between useTemplateRef and useFloating.
+// Hold on moving to useTemplateRef until this is updated in useFloating.
 const trigger = ref<HTMLElement | null>(null)
 const wrapper = ref<HTMLElement | null>(null)
 const middleware = computed(() => {

package/src/lib-components/overlays/Slideover.vue

@@ -7,35 +7,33 @@ import {
   TransitionRoot,
 } from "@headlessui/vue"
 import { XIcon } from "@heroicons/vue/outline"
-import { ref } from "vue"
+import { watch } from "vue"
 
-const props = defineProps<{
+defineProps<{
   header: string
   description: string
-  modelValue: boolean
 }>()
 
-const open = ref(props.modelValue)
+const open = defineModel<boolean>({ required: true })
 
 const emit = defineEmits<{
-  (e: "close", val: boolean): void
-  (e: "update:modelValue", val: boolean): void
+  (e: "close"): void
 }>()
 
-const close = () => {
-  open.value = false
-  emit("close", open.value)
-  emit("update:modelValue", open.value)
-}
+watch(open, (isOpen) => {
+  if (!isOpen) {
+    emit("close")
+  }
+})
 </script>
 <template>
-  <TransitionRoot as="template" :show="modelValue">
+  <TransitionRoot as="template" :show="open">
     <Dialog
       as="div"
       static
       class="fixed inset-0 z-20 overflow-hidden bg-black bg-opacity-50"
-      :open="modelValue"
-      @close="close()"
+      :open="open"
+      @close="open = false"
     >
       <div class="absolute inset-0 overflow-hidden">
         <DialogOverlay class="absolute inset-0" />
@@ -62,7 +60,7 @@ const close = () => {
                     <div class="ml-3 h-7 flex items-center">
                       <button
                         class="bg-xy-blue-600 rounded-md text-gray-50 hover:text-white focus:outline-none focus:ring-2 focus:ring-white"
-                        @click="close()"
+                        @click="open = false"
                       >
                         <span class="sr-only">Close panel</span>
                         <XIcon class="h-6 w-6" aria-hidden="true" />

package/types/composables/forms.d.ts

@@ -51,6 +51,21 @@ export declare const defaultInputProps: {
     modelValue: undefined;
     placeholder: string;
 };
+/**
+ * Form inputs follow an option v-model pattern to allow input field usage
+ * where tracking the input binding directly is not necessary.
+ *
+ * ex: a required checkbox as a confirmation for submitting a form.
+ *
+ * NOTE(spk): we prevent unexpected default v-model values of a
+ * literal 'false' due to an unset v-model prop.
+ *
+ * see: https://github.com/vuejs/vue/issues/4792#issuecomment-275396426
+ */
+export declare const defaultModelOpts: {
+    default: undefined;
+    required: boolean;
+};
 export declare const textInputTypes: readonly ["date", "email", "month", "number", "password", "search", "tel", "text", "time", "url", "week"];
 export type TextInputType = (typeof textInputTypes)[number];
 /**
@@ -72,8 +87,7 @@ export declare const useInputField: <T extends Input>(props: T) => {
     isDisabled: import("vue").ComputedRef<boolean>;
     isRequired: import("vue").ComputedRef<boolean>;
     nameAttr: import("vue").ComputedRef<string>;
-    modelState: import("vue").Ref<T["modelValue"]>;
-    errorState: import("vue").Ref<string>;
+    errorState: import("vue").Ref<string, string>;
     onInvalid: (e: Event) => void;
     validate: (e: Event) => void;
     inputValidation: (...args: any[]) => void;

package/types/composables/nav.d.ts

@@ -158,4 +158,4 @@ export type URLParams<T> = {
  * @param initial any Record<string, URLParamValue> like interface
  * @return Ref<T>
  */
-export declare const useUrlSearchParams: <T>(initial: URLParams<T>) => Ref<import("vue").UnwrapRef<URLParams<T>>>;
+export declare const useUrlSearchParams: <T>(initial: URLParams<T>) => [URLParams<T>] extends [Ref<any, any>] ? import("@vue/shared").IfAny<Ref<any, any> & URLParams<T>, Ref<Ref<any, any> & URLParams<T>, Ref<any, any> & URLParams<T>>, Ref<any, any> & URLParams<T>> : Ref<import("vue").UnwrapRef<URLParams<T>>, URLParams<T> | import("vue").UnwrapRef<URLParams<T>>>;

package/types/composables/useActionItems.d.ts

@@ -5,7 +5,7 @@ export declare const useActionItems: (items: ActionItem[] | Ref<ActionItem[]>) =
         disabled: boolean;
         show: boolean;
         onClick: (...args: any[]) => void;
-        icon?: import("vue").RenderFunction | import("vue").FunctionalComponent<{}, {}, any> | undefined;
+        icon?: import("vue").RenderFunction | import("vue").FunctionalComponent<{}, {}, any, {}> | undefined;
         label: string;
     }[]>;
     hasActions: import("vue").ComputedRef<boolean>;

package/types/composables/useFlashes.d.ts

@@ -72,7 +72,7 @@ export declare function useFlashes(flasherConfig?: FlasherConfig): {
         success: (message: string, persistent?: boolean) => string;
         genericError: (email?: string, persistent?: boolean) => string;
     };
-    flashes: Ref<FlashStore>;
+    flashes: Ref<FlashStore, FlashStore>;
     configure: (newConfig: FlasherConfig) => void;
 };
 /**