@falcondev-oss/nuxt-layers-base 0.20.3 → 0.21.0

package/app/components/Sync.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts" generic="T">
+const props = defineProps<{
+  input: T
+}>()
+
+const output = defineModel<T>('output', { required: true })
+
+watch(
+  () => props.input,
+  () => {
+    output.value = props.input
+  },
+  { immediate: true },
+)
+</script>
+
+<!-- eslint-disable-next-line vue/valid-template-root -->
+<template></template>

package/app/utils/form-field-translators.ts

@@ -2,7 +2,7 @@ import type { FormFieldTranslator } from '@falcondev-oss/form-core'
 import type { DateValue } from 'reka-ui'
 import { parseDate } from '@internationalized/date'
 
-export function nullUndefinedTranslator<T>() {
+export function undefinedNullTranslator<T>() {
   return {
     get(v: T | null) {
       return v ?? undefined
@@ -12,12 +12,12 @@ export function nullUndefinedTranslator<T>() {
     },
   }
 }
-export function nullIndeterminateTranslator(): FormFieldTranslator<
+export function indeterminateNullTranslator(): FormFieldTranslator<
   boolean | null,
   boolean | 'indeterminate'
 > {
   return {
-    get: (v) => v ?? ('indeterminate' as const),
+    get: (v) => v ?? 'indeterminate',
     set: (v) => (v === 'indeterminate' ? null : v),
   }
 }
@@ -26,7 +26,7 @@ export function indeterminateFalseTranslator(): FormFieldTranslator<
   boolean | 'indeterminate'
 > {
   return {
-    get: (v) => (v === false ? 'indeterminate' : v),
+    get: (v) => v || 'indeterminate',
     set: (v) => (v === 'indeterminate' ? false : v),
   }
 }

package/app/utils/plugins.ts

@@ -22,6 +22,25 @@ interface VueQueryNuxtPluginOptions {
   queryClientOptions?: QueryClientConfig
   vuePluginOptions?: VueQueryPluginOptions
 }
+
+interface ToastOpts {
+  title?: string
+  description?: string
+}
+
+export interface CustomMeta {
+  mutationMeta: {
+    toast?: {
+      success?: ToastOpts
+      error?: ToastOpts
+    }
+  }
+}
+
+declare module '@tanstack/vue-query' {
+  interface Register extends CustomMeta {}
+}
+
 export function vueQueryPlugin(opts?: VueQueryNuxtPluginOptions) {
   return {
     name: 'vue-query',
@@ -49,23 +68,37 @@ export function vueQueryPlugin(opts?: VueQueryNuxtPluginOptions) {
             },
           },
           mutationCache: new MutationCache({
-            onError(err) {
+            onSuccess(_res, _input, _onMutateRes, mutation) {
+              if (mutation.meta?.toast?.success) {
+                toast.add({
+                  preset: 'success',
+                  duration: 5000,
+                  ...mutation.meta.toast.success,
+                })
+              }
+            },
+            onError(err, _input, __onMutateRes, mutation) {
               console.error(err)
 
-              if (err instanceof TRPCClientError) {
+              if (mutation.meta?.toast?.error) {
+                toast.add({
+                  preset: 'error',
+                  duration: 5000,
+                  ...mutation.meta.toast.error,
+                })
+              } else if (err instanceof TRPCClientError)
                 toast.add({
                   preset: 'error',
                   title: 'Request Error',
                   description: err.message,
                   duration: 5000,
                 })
-              }
-
-              toast.add({
-                preset: 'error',
-                title: 'An unknown error occurred',
-                duration: 5000,
-              })
+              else
+                toast.add({
+                  preset: 'error',
+                  title: 'An unknown error occurred',
+                  duration: 5000,
+                })
             },
           }),
         }),

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@falcondev-oss/nuxt-layers-base",
   "type": "module",
-  "version": "0.20.3",
+  "version": "0.21.0",
   "description": "Nuxt layer with lots of useful helpers and @nuxt/ui components",
   "license": "MIT",
   "repository": "github:falcondev-oss/nuxt-layers",