support for non-binding objects

Author: TaTo30

package-lock.json

@@ -1,66 +1,29 @@
 <script setup lang="ts">
 import { vQueryParam } from "../src";
-import { computed, ref } from "vue";
+import { ref } from "vue";
 import VueDatePicker from "@vuepic/vue-datepicker";
 import '@vuepic/vue-datepicker/dist/main.css'
-import DatePicker from "./DatePicker.vue"
 
-
-const filter = ref("")
-const date = ref("")
-const datestr = computed(() => `${date.value}`)
-const filterstr = computed(() => `${filter.value}`)
-const mirey = ref("")
-const search = ref("")
-const radiomodel = ref("Valor 1")
+const date = ref()
+const search = ref(0)
 const selectmodel = ref("")
-const checkmodel = ref(true)
-
-function handlerFilter(id: string, value: string) {  
-  switch (id) {
-    case "filter":
-      filter.value = value
-      break;
-    case "mirey":
-      mirey.value = value
-      break;
-    case "radio":
-      radiomodel.value = value
-      break
-    case "checkin":
-      checkmodel.value = value
-      break
-  }
-}
 
 </script>
 
 <template>
-  <!-- <select v-model="selectmodel" v-query-param:selecto="selectmodel">
+  <input type="number" v-model="search" v-query-param:q="search" />
+  <select v-model="selectmodel" v-query-param:selecto="selectmodel">
     <option value="">Please select one</option>
     <option>A</option>
     <option>B</option>
     <option>C</option>
-  </select> -->
-  <!-- <div v-query-param:radio="radiomodel">
-    <span>Radio inputs</span>
-    <input type="radio" value="Valor 1" name="radioinput" v-model="radiomodel"  />
-    <input type="radio" value="Valor 2" name="radioinput" v-model="radiomodel"  />
-    <input type="radio" value="Valor 3" name="radioinput" v-model="radiomodel"  />
-    {{ radiomodel }}
-  </div> -->
-  <!-- <div>
-    <span>checkbox</span>
-    <input type="checkbox" v-model="checkmodel" true-value="yes" false-value="no" v-query-param:checkin="checkmodel" />
-  </div>
-  <div>Selected: {{ selectmodel }}</div> -->
-  <!-- <div v-query-param:filter="filterstr">{{ typeof filter }}</div>
-  <input type="number" v-model="filter" /> -->
-  <!-- <div>
-    <textarea v-model="search" v-query-param:textarea="search" placeholder="add multiple lines"></textarea>
-  </div> -->
+  </select>
   <div>
-    <VueDatePicker v-query-param:datefrom="datestr" v-model="date"/> 
+    <VueDatePicker v-query-param:datefrom="{
+      model: date,
+      format: (val: Date) => val.toLocaleDateString(),
+      callback: (val: string) => date = new Date(val)
+    }" v-model="date"/> 
   </div>
 </template>
 

playground/App.vue

@@ -1,18 +1,20 @@
 import { getValueFromURL, setValueToURL } from "./history";
-
 import type { Binding, QueryParamArgs } from "../types";
 
-const defaultArgs = {
-  model: "",
-  callback: null,
-  format: (val: object) => `${val}`,
-}
-
 function getArgs(el: HTMLElement, binding: Binding): QueryParamArgs {
-  if (typeof binding.value === 'string') {
+  const defaultArgs = {
+    model: "",
+    callback: null,
+    format: (val: object) => val,
+  }
+  if (typeof binding.value !== 'object') {
      return Object.assign(defaultArgs, {model: binding.value})
   } else {
-    return Object.assign({}, defaultArgs, binding.value)
+    if ("model" in binding.value) {
+      return Object.assign(defaultArgs, binding.value)
+    } else {
+      return Object.assign(defaultArgs, { model: binding.value })
+    }
   }
 }
 
@@ -25,8 +27,8 @@ const vQueryParam = {
       args.callback(getValueFromURL(binding.arg))
     }
   },
-  updated(el: HTMLElement, binding: Binding) {
-    const args = getArgs(el, binding)
+  updated(el: HTMLElement, binding: Binding) {    
+    const args = getArgs(el, binding)    
     setValueToURL(binding.arg, args.format(args.model))
   },
   mounted(el: HTMLElement, binding: Binding) { 

playground/DatePicker.vue

@@ -1,16 +1,14 @@
-import { VueElement } from "vue"
-
 export interface QueryParamArgs {
   model: string
   callback: Function | null
   format: Function
 }
 
 export interface Binding {
-  value: Function | QueryParamArgs
-  oldValue: Function | QueryParamArgs
+  value: string | QueryParamArgs
+  oldValue: string | QueryParamArgs
   arg: string
   modifiers: object
-  instance: VueElement
+  instance: object
   dir: object
 }