@mouseless/baked 0.19.0 → 0.19.2

package/dist/module.json

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

package/dist/module.mjs

@@ -81,6 +81,8 @@ const module = defineNuxtModule({
     addPlugin(resolver.resolve("./runtime/plugins/baked"));
     addPlugin(resolver.resolve("./runtime/plugins/primeVue"));
     addPlugin(resolver.resolve("./runtime/plugins/fetch"), {});
+    _nuxt.options.vite.optimizeDeps ||= {};
+    _nuxt.options.vite.optimizeDeps.noDiscovery = true;
     _nuxt.options.i18n = {
       vueI18n: entryProjectResolver.resolve("./i18n.config.ts"),
       langDir: entryProjectResolver.resolve("./"),
@@ -100,7 +102,14 @@ const module = defineNuxtModule({
     _nuxt.options.tailwindcss = {
       config: {
         theme: {
-          screens: _options.composables.useBreakpoints.screens
+          screens: _options.composables.useBreakpoints.screens,
+          extend: {
+            colors: {
+              zinc: {
+                925: "#121214"
+              }
+            }
+          }
         }
       }
     };

package/dist/runtime/assets/overrides.css

@@ -1 +1 @@
-html{@apply max-xs:text-[smaller]}.bg-body{background-color:#fff}.p-datatable-tbody td.p-datatable-frozen-column{background:inherit}.p-popover-content>div{@apply max-sm:p-0}@media (prefers-color-scheme:dark){.bg-body{background-color:#121212}}
+html{@apply max-xs:text-[smaller]}.bg-body,html{@apply bg-white}.p-datatable-tbody td.p-datatable-frozen-column{background:inherit}.p-popover-content>div{@apply max-sm:p-0}@media (prefers-color-scheme:dark){.bg-body,html{@apply bg-zinc-925}}

package/dist/runtime/components/DataTable.vue

@@ -160,8 +160,8 @@ const value = computed(() => {
   const result = [];
   for (const itemRow of items) {
     const resultRow = { $getRow: () => itemRow };
-    for (const column of columns) {
-      resultRow[column.prop] = { value: itemRow[column.prop], $getRow: () => itemRow };
+    for (const key in itemRow) {
+      resultRow[key] = { value: itemRow[key], $getRow: () => itemRow };
     }
     result.push(resultRow);
   }

package/dist/runtime/components/DefaultLayout.vue

@@ -24,7 +24,9 @@
       <slot />
     </article>
   </div>
-  <ScrollTop :threshold="250" />
+  <ScrollTop
+    v-bind="scrollTopOptions"
+  />
 </template>
 
 <script setup>
@@ -37,6 +39,7 @@ const { schema } = defineProps({
   data: { type: null, default: null }
 });
 const { header, sideMenu } = schema;
+const scrollTopOptions = { threshold: 250, ...schema.scrollTopOptions };
 </script>
 
 <style>

package/dist/runtime/components/Layout.vue

@@ -1,6 +1,6 @@
 <template>
   <Toast
-    :pt="{ root: 'z-20' }"
+    :pt="{ root: 'z-10' }"
     position="top-center"
   />
   <Bake

package/dist/runtime/components/PageTitle.vue

@@ -80,7 +80,6 @@
           <PersistentPopover
             ref="popover"
             fixed
-            class="!z-[1002]"
           >
             <div
               class="
@@ -143,6 +142,7 @@ onMounted(() => {
           "border-slate-300",
           "dark:border-zinc-800",
           "drop-shadow",
+          "z-[9]",
           "md:max-xl:pt-4",
           "max-md:pt-2"
         ]

package/dist/runtime/components/Parameters.vue

@@ -1,16 +1,9 @@
 <template>
-  <!--
-    [!NOTE]
-
-    unlike the usual way to pass model, `.model` is not enough here in below.
-    for some reason vue rewraps the model which is already a ref, causing a
-    double ref. that's why `.model.value` is passed instead of `.model`
-  -->
   <div class="flex gap-2 max-md:flex-col max-md:min-w-24">
     <Bake
       v-for="parameter in parameters"
       :key="parameter.name"
-      v-model="values[parameter.name].value"
+      v-model="values[parameter.name]"
       :name="`parameters/${parameter.name}`"
       :descriptor="parameter.component"
       class="max-md:w-full"
@@ -19,7 +12,7 @@
 </template>
 
 <script setup>
-import { onMounted, ref, watch } from "vue";
+import { onMounted, ref, watch, reactive } from "vue";
 import { Bake } from "#components";
 import { useContext, useDataFetcher } from "#imports";
 const dataFetcher = useDataFetcher();
@@ -29,10 +22,16 @@ const { parameters } = defineProps({
 });
 const emit = defineEmits(["ready", "changed"]);
 const injectedData = context.injectData();
-const values = {};
+const values = reactive({});
 for (const parameter of parameters) {
   values[parameter.name] = ref(dataFetcher.get({ data: parameter.default, injectedData }));
 }
+function checkValue(value) {
+  if (typeof value === "string") {
+    return value !== "";
+  }
+  return value !== void 0 && value !== null;
+}
 onMounted(async () => {
   for (const parameter of parameters) {
     if (!dataFetcher.shouldLoad(parameter.default?.type)) {
@@ -40,20 +39,22 @@ onMounted(async () => {
     }
     values[parameter.name].value = await dataFetcher.fetch({ data: parameter.default, injectedData });
   }
+  emitChanged();
+  emitReady();
 });
-watch(Object.values(values), async () => {
+watch(values, async () => {
   emitChanged();
   emitReady();
-}, { immediate: true });
+}, { deep: true });
 function emitReady() {
   emit(
     "ready",
-    parameters.filter((p) => p.required).reduce((result, p) => result && values[p.name].value?.length > 0, true)
+    parameters.filter((p) => p.required).reduce((result, p) => result && checkValue(values[p.name]), true)
   );
 }
 function emitChanged() {
   emit("changed", {
-    uniqueKey: Object.values(values).map((v) => v.value).filter((v) => v?.length > 0).join("-"),
+    uniqueKey: parameters.map((p) => values[p.name]).filter(checkValue).join("-"),
     values
   });
 }

package/dist/runtime/components/QueryParameters.vue

@@ -35,11 +35,17 @@ for (const parameter of parameters) {
   const model = ref(query.value);
   values[parameter.name] = { query, model };
 }
+function checkValue(value) {
+  if (typeof value === "string") {
+    return value !== "";
+  }
+  return value !== void 0 && value !== null;
+}
 onMounted(async () => await setDefaults());
 watchEffect(() => {
   const queryValues = Object.values(values).map((p) => p.query.value);
-  const isReady = parameters.filter((p) => p.required).every((p) => values[p.name].query.value?.length > 0);
-  const uniqueKey = queryValues.filter((v) => v?.length > 0).join("-");
+  const isReady = parameters.filter((p) => p.required).every((p) => checkValue(values[p.name].query.value));
+  const uniqueKey = queryValues.filter(checkValue).join("-");
   emit("ready", isReady);
   emit("changed", uniqueKey);
 });
@@ -68,7 +74,7 @@ watch(
     const shouldReplace = parameters.filter((p) => p.required && (p.default || p.defaultSelfManaged)).some((p) => !values[p.name].query.value);
     const query = parameters.reduce((result, param, i) => {
       const value = newValues[i];
-      if (value) {
+      if (checkValue(value)) {
         result[param.name] = value;
       }
       return result;

package/dist/runtime/components/SideMenu.vue

@@ -83,7 +83,7 @@
         <PersistentPopover
           ref="popover"
           fixed
-          class="w-1/2 min-w-fit !z-[1002]"
+          class="w-1/2 min-w-fit"
         >
           <Bake
             v-if="footer"

package/package.json

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