@mouseless/baked 1.1.2 → 1.1.4

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@mouseless/baked",
   "configKey": "baked",
-  "version": "1.1.2",
+  "version": "1.1.4",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/components/DataPanel.vue

@@ -3,7 +3,7 @@
     ref="panel"
     :header="localizeTitle ? l(title) : title"
     :collapsed="collapsedState"
-    toggleable
+    :toggleable="toggleable ?? true"
     :pt="
       {
         headerActions: 'flex gap-2 items-center',
@@ -95,7 +95,7 @@ const panel = useTemplateRef("panel");
 const { schema } = defineProps({
   schema: { type: null, required: true }
 });
-const { collapsed, content, inputs, localizeTitle, title: titleData } = schema;
+const { collapsed, content, inputs, localizeTitle, title: titleData, toggleable } = schema;
 const contextData = context.injectContextData();
 const path = context.injectPath();
 const collapsedState = computed(() => panelStates[path] ?? collapsed);

package/dist/runtime/components/Dialog.vue

@@ -7,7 +7,7 @@
   <Dialog
     v-model:visible="visible"
     :header="l(header)"
-    :style="{ width: 'min(450px, 90vw)' }"
+    class="w-max max-w-[90vw]"
     closable
     modal
     dismissable-mask

package/dist/runtime/components/Input.vue

@@ -26,10 +26,12 @@ onMounted(async () => {
   if (schema.default && dataFetcher.shouldLoad(schema.default.type)) {
     defaultValue = await dataFetcher.fetch({ data: schema.default, contextData });
   }
-  if (schema.queryBound && checkValue(query.value)) {
-    model.value = query.value;
-  } else {
-    await set(defaultValue);
+  if (!checkValue(model.value)) {
+    if (schema.queryBound && checkValue(query.value)) {
+      model.value = query.value;
+    } else {
+      await set(defaultValue);
+    }
   }
   if (schema.queryBound) {
     watch(() => route.query, async (newQuery) => {

package/dist/runtime/components/Inputs.vue

@@ -2,49 +2,62 @@
   <Input
     v-for="input in inputs"
     :key="input.name"
-    v-model="values[input.name]"
+    v-model="models[input.name]"
     :schema="input"
     :class="inputClass"
   />
 </template>
 
 <script setup>
-import { onMounted, watch, reactive } from "vue";
-import { useContext } from "#imports";
+import { computed, reactive, watch } from "vue";
+import { useContext, useRoute } from "#imports";
 import { Input } from "#components";
 const context = useContext();
+const route = useRoute();
 const { inputs } = defineProps({
   inputs: { type: Array, required: true },
   inputClass: { type: String, default: "" }
 });
 const emit = defineEmits(["ready", "changed"]);
 const parentPath = context.injectPath();
-const values = reactive({});
+const models = reactive({});
+const values = computed(
+  () => inputs.reduce((result, input) => {
+    result[input.name] = getValue(input);
+    return result;
+  }, {})
+);
 context.providePath(`${parentPath}/inputs`);
-watch(values, async () => {
-  emitChanged();
-  emitReady();
-}, { deep: true });
-onMounted(async () => {
+watch(values, (newValues) => {
+  if (inputs.filter((i) => i.default || i.defaultSelfManaged).some((i) => !checkValue(newValues[i.name]))) {
+    return;
+  }
   emitChanged();
   emitReady();
-});
+}, { immediate: true });
 function emitReady() {
-  emit(
-    "ready",
-    inputs.filter((i) => i.required).reduce((result, i) => result && checkValue(values[i.name]), true)
-  );
+  const ready = inputs.filter((i) => i.required).map(getValue).reduce((result, value) => result && checkValue(value), true);
+  emit("ready", ready);
 }
 function emitChanged() {
+  const uniqueKey = inputs.map(getValue).filter(checkValue).join("-");
   emit("changed", {
-    uniqueKey: inputs.map((i) => values[i.name]).filter(checkValue).join("-"),
-    values
+    uniqueKey,
+    values: values.value
   });
 }
 function checkValue(value) {
   if (typeof value === "string") {
     return value !== "";
+  } else {
+    return value !== void 0 && value !== null;
+  }
+}
+function getValue(input) {
+  if (input.queryBound) {
+    return route.query[input.name];
+  } else {
+    return models[input.name];
   }
-  return value !== void 0 && value !== null;
 }
 </script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mouseless/baked",
-  "version": "1.1.2",
+  "version": "1.1.4",
   "description": "Baked is an opinionated framework for .NET and Vue. This is the UI package of Baked project.",
   "keywords": [
     "baked",