@tak-ps/vue-tabler 4.4.0 → 4.5.0

package/CHANGELOG.md

@@ -10,6 +10,14 @@
 
 ## Version History
 
+### v4.5.0
+
+- :rocket: Improve prop lifestyle in TablerSchema
+
+### v4.4.1
+
+- :arrow_up: Update Core Deps
+
 ### v4.4.0
 
 - :rocket: Allow overriding Create text in TablerNone

package/components/Schema.vue

@@ -158,23 +158,53 @@ watch(data, () => {
     emit('update:modelValue', data.value);
 }, { deep: true })
 
-// Mounted lifecycle
-onMounted(async () => {
-    loading.value = true;
-    data.value = JSON.parse(JSON.stringify(props.modelValue));
+const updateSchema = () => {
     s.value = JSON.parse(JSON.stringify(props.schema));
-
     if (s.value.type === 'object' && s.value.properties) {
         for (const req of (s.value.required || [])) {
             s.value.properties[req].required = true;
         }
+    }
+}
 
+const updateDataDefaults = () => {
+    if (s.value.type === 'object' && s.value.properties) {
         for (const key in s.value.properties) {
-            if (!data.value[key] && s.value.properties[key].type === 'array') {
+            if (data.value[key] !== undefined) continue;
+
+            const type = s.value.properties[key].type;
+
+            if (type === 'array') {
                 data.value[key] = [];
+            } else if (type === 'boolean') {
+                data.value[key] = false;
+            } else if (type === 'object') {
+                data.value[key] = {};
+            } else {
+                data.value[key] = '';
             }
         }
     }
+}
+
+watch(() => props.schema, () => {
+    updateSchema();
+    updateDataDefaults();
+}, { deep: true });
+
+watch(() => props.modelValue, () => {
+    if (JSON.stringify(props.modelValue) !== JSON.stringify(data.value)) {
+        data.value = JSON.parse(JSON.stringify(props.modelValue));
+        updateDataDefaults();
+    }
+}, { deep: true });
+
+// Mounted lifecycle
+onMounted(async () => {
+    loading.value = true;
+    data.value = JSON.parse(JSON.stringify(props.modelValue));
+    updateSchema();
+    updateDataDefaults();
 
     loading.value = false;
 })

package/components/input/Input.vue

@@ -217,8 +217,9 @@ const computed_type = computed(() => {
 })
 
 watch(() => props.modelValue, (newValue) => {
-    if (current.value !== String(newValue)) {
-        current.value = String(newValue)
+    const n = newValue === undefined ? '' : String(newValue);
+    if (current.value !== n) {
+        current.value = n;
     }
 })
 

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@tak-ps/vue-tabler",
     "type": "module",
-    "version": "4.4.0",
+    "version": "4.5.0",
     "lib": "lib.ts",
     "main": "lib.ts",
     "module": "lib.ts",
@@ -39,7 +39,7 @@
         "@vue/cli-plugin-babel": "^5.0.8",
         "eslint": "^9.12.0",
         "eslint-plugin-vue": "^10.0.0",
-        "globals": "^16.3.0",
+        "globals": "^17.0.0",
         "vue-tsc": "^3.2.1"
     }
 }