@mouseless/baked 1.4.2 → 1.4.3

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@mouseless/baked",
   "configKey": "baked",
-  "version": "1.4.2",
+  "version": "1.4.3",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "unknown"

package/dist/runtime/components/FormPage.vue

@@ -2,7 +2,7 @@
   <div class="flex flex-col gap-8">
     <PageTitle :schema="title">
       <template
-        v-if="inputs.length > 0"
+        v-if="sections.length > 0"
         #actions
       >
         <Button
@@ -15,12 +15,12 @@
     <div class="flex justify-center">
       <Contents class="gap-6">
         <div
-          v-for="section in sectionsWithGroups"
+          v-for="section in sections"
           :key="section.key"
           class="w-full col-span-2 grid gap-4"
         >
           <div
-            v-if="sectionsWithGroups.length > 1"
+            v-if="sections.length > 1"
             class="
               pb-2 border-b-2
               border-zinc-100 dark:border-zinc-900
@@ -35,34 +35,37 @@
               {{ l(section.label) }}
             </span>
           </div>
-          <div
-            class="
-              grid grid-flow-col
-              gap-4 items-start
-              max-md:flex max-md:flex-col
-            "
-            :class="{ 'grid-cols-2': !singleColumn }"
-            :style="{ 'grid-template-rows': `repeat(${section.rowCount}, auto)` }"
+          <template
+            v-for="(inputGroups, i) in splitByWide(section.inputGroups)"
+            :key="`${section.key}_${i}`"
           >
             <div
-              v-for="sGroup in section.groups"
-              :key="sGroup.name"
-              :class="{ 'col-span-2': !singleColumn && sGroup.wide }"
-              class="w-full"
+              v-if="inputGroups.length > 0"
+              class="
+                grid grid-cols-2 grid-flow-col
+                gap-4 items-start
+                max-md:flex max-md:flex-col
+              "
+              :style="{ 'grid-template-rows': `repeat(${Math.ceil(inputGroups.length / 2)}, auto)` }"
             >
               <div
-                class="flex gap-2 max-md:flex-col"
-                :class="{ 'narrow': sGroup.inputs.length > 1 }"
+                v-for="inputGroup in inputGroups"
+                :key="inputGroup.key"
+                class="w-full flex gap-4 max-md:flex-col"
+                :class="{
+                  'col-span-2': inputGroup.wide,
+                  'reset-min-w': inputGroup.inputs.length > 1
+                }"
               >
                 <Inputs
-                  :inputs="sGroup.inputs"
+                  :inputs="inputGroup.inputs"
                   input-class="w-full"
-                  @ready="(value) => onReady(`${section.key}_${sGroup.name}`, value)"
+                  @ready="(value) => onReady(`${section.key}_${inputGroup.key}`, value)"
                   @changed="onChanged"
                 />
               </div>
             </div>
-          </div>
+          </template>
         </div>
       </Contents>
     </div>
@@ -78,48 +81,24 @@ const { schema } = defineProps({
   schema: { type: null, required: true }
 });
 const emit = defineEmits(["submit"]);
-const { title, submit, inputs, sections, groups, wide, singleColumn } = schema;
+const { title, submit, sections } = schema;
 const formData = ref({});
 const readyData = ref({});
 const ready = computed(() => Object.values(readyData.value).every((v) => v));
-const group = {};
-for (const groupName in groups) {
-  for (const inputName of groups[groupName]) {
-    group[inputName] = groupName;
-  }
-}
-const inputsByName = {};
-for (let i = 0; i < inputs.length; i++) {
-  const input = inputs[i];
-  inputsByName[input.name] = { input, i };
-}
-const sectionsWithGroups = [];
-for (const section of sections) {
-  const sectionWithGroups = {
-    key: section.key,
-    label: section.label,
-    groups: [],
-    groupsByName: {}
-  };
-  const sortedInputNames = [...section.inputs].sort((l2, r) => inputsByName[l2].i - inputsByName[r].i);
-  for (const name of sortedInputNames) {
-    const input = inputsByName[name].input;
-    const inputGroupName = group[name] || name;
-    let inputGroup = sectionWithGroups.groupsByName[inputGroupName];
-    if (!inputGroup) {
-      inputGroup = {
-        name: inputGroupName,
-        inputs: [],
-        wide: wide.includes(inputGroupName)
-      };
-      sectionWithGroups.groups.push(inputGroup);
-      sectionWithGroups.groupsByName[inputGroupName] = inputGroup;
+function splitByWide(inputGroups) {
+  const result = [];
+  let cur = [];
+  for (const inputGroup of inputGroups) {
+    if (!inputGroup.wide) {
+      cur.push(inputGroup);
+      continue;
     }
-    inputGroup.inputs.push(input);
+    result.push(cur);
+    result.push([inputGroup]);
+    cur = [];
   }
-  const cellCount = sectionWithGroups.groups.reduce((sum, group2) => sum + group2.wide + 1, 0);
-  sectionWithGroups.rowCount = singleColumn ? cellCount : Math.ceil(cellCount / 2);
-  sectionsWithGroups.push(sectionWithGroups);
+  result.push(cur);
+  return result;
 }
 function onReady(key, value) {
   Object.assign(readyData.value, { [key]: value });
@@ -136,5 +115,5 @@ function onSubmit() {
 </script>
 
 <style>
-.b-component--FormPage .narrow *{@apply min-w-0}
+.b-component--FormPage .reset-min-w *{@apply min-w-0}
 </style>

package/dist/runtime/components/InputNumber.vue

@@ -9,6 +9,7 @@
       <InputNumber
         v-model="model"
         v-bind="$attrs"
+        :use-grouping="!noGrouping"
         class="min-w-60"
         @input="onInput"
       />
@@ -27,7 +28,7 @@ const { schema } = defineProps({
   schema: { type: null, required: true }
 });
 const model = defineModel({ type: null, required: true });
-const { label } = schema;
+const { label, noGrouping } = schema;
 const path = context.injectPath();
 function onInput(event) {
   model.value = event.value;

package/package.json

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