@mouseless/baked 1.3.1 → 1.3.3

package/dist/module.json

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

package/dist/runtime/components/Contents.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="b-Contents w-full grid grid-cols-1 gap-4 lg:grid-cols-2"
+    class="b-Contents w-full grid grid-cols-1 gap-4 lg:grid-cols-2 items-start"
     :class="{ 'max-w-screen-xl 3xl:max-w-screen-2xl': !fullScreen }"
   >
     <slot v-if="$slots.default" />

package/dist/runtime/components/DataPanel.vue

@@ -8,7 +8,7 @@
       {
         headerActions: 'flex gap-2 items-center',
         title: 'max-sm:truncate',
-        contentContainer: 'block'
+        content: '[contain:inline-size]'
       }
     "
     @update:collapsed="onCollapsed"
@@ -130,3 +130,7 @@ function onChanged(event) {
   values.value = event.values;
 }
 </script>
+
+<style>
+.p-panel-content{@apply [&:has(.p-datatable)]:p-0}
+</style>

package/dist/runtime/components/DataTable.vue

@@ -2,7 +2,7 @@
   <DataTable
     ref="dataTable"
     :value
-    class="text-sm min-h-24"
+    class="text-sm min-h-20"
     striped-rows
     :data-key
     :paginator="paginator && value.length > rows"
@@ -27,7 +27,7 @@
       class="
         b-Header
         flex flex-row items-center justify-end
-        gap-4 mb-2 py-4 px-2 rounded-sm
+        gap-4 mb-2 py-4 px-2
       "
     >
       <div
@@ -50,17 +50,16 @@
       </div>
     </div>
     <Column
-      v-for="column in columns.filter(c => !c.hidden)"
+      v-for="column in visibleColumns"
       :key="column.key"
       :header="l(column.title)"
       :field="column.key"
       class="text-nowrap"
-      :class="{ 'min-w-40': column.minWidth, 'text-right': column.alignRight }"
       :exportable="column.exportable"
       :export-header="l(column.title)"
       :pt="{
         columnHeaderContent: { class: column.alignRight ? 'justify-end' : '' },
-        bodyCell: { class: { 'max-xs:!inset-auto': column.frozen } },
+        bodyCell: { class: bodyCellClass(column) },
         headerCell: { class: { 'max-xs:!inset-auto': column.frozen } }
       }"
       :frozen="column.frozen"
@@ -198,6 +197,7 @@ const virtualScrollerOptions = schema.virtualScrollerOptions && {
 };
 const contextData = context.injectContextData();
 const dataDescriptor = context.injectDataDescriptor();
+const LABEL_COLUMN_BP = 5;
 const dataTable = ref();
 const headerActionsMenu = ref();
 const headerActions = ref([]);
@@ -213,6 +213,7 @@ const value = computed(() => {
   }
   return result;
 });
+const visibleColumns = computed(() => columns.filter((c) => !c.hidden));
 const footerColSpan = computed(() => columns.length - footerTemplate?.columns.length);
 const exportFilename = ref(exportOptions?.fileName ? l(exportOptions.fileName) : null);
 let formatter = null;
@@ -250,6 +251,26 @@ onMounted(async () => {
 function toggleHeaderActionsMenu(event) {
   headerActionsMenu.value.toggle(event);
 }
+function bodyCellClass(column) {
+  const classes = {
+    "max-xs:!inset-auto": column.frozen,
+    "min-w-40": column.minWidth,
+    "text-right": column.alignRight
+  };
+  const total = visibleColumns.value.length;
+  if (total === 1) {
+    return classes;
+  }
+  const labelColumn = visibleColumns.value?.filter((vc) => vc.frozen)?.slice(-1)[0];
+  if (!labelColumn) {
+    return classes;
+  }
+  const columnClass = total <= LABEL_COLUMN_BP ? "b-label-column--narrow" : "b-label-column--wide";
+  if (column.key == labelColumn.key) {
+    classes[columnClass] = true;
+  }
+  return classes;
+}
 function exportFunction({ data: data2, field }) {
   if (!formatter) {
     return data2.value;
@@ -259,5 +280,10 @@ function exportFunction({ data: data2, field }) {
 </script>
 
 <style>
-.b-component--DataTable a{@apply text-sm}.b-component--DataTable .p-button{@apply -my-2}.b-component--DataTable .p-datatable-tbody td.p-datatable-frozen-column{z-index:1}
+.p-panel-content:has(.b-component--DataTable) .b-component--DataTable{@apply border-none rounded-none}.p-panel-content:has(.b-component--DataTable) .b-component--DataTable .b-Header{@apply rounded-none}.p-panel-content:has(.b-component--DataTable) .b-component--DataTable .p-datatable-table-container{@apply border-none}.b-component--DataTable{@apply border border-slate-200 dark:border-zinc-700
+    justify-self-center w-full
+    rounded-[--p-border-radius-md]}.b-component--DataTable .p-datatable-table-container{@apply border-none rounded-b-[--p-border-radius-md]}.b-component--DataTable:has(.b-Header) .b-Header{@apply border-b dark:border-zinc-800
+        dark:bg-zinc-900 mb-0
+        rounded-t-[--p-border-radius-md]}.b-component--DataTable:has(.b-Header) .p-datatable-table-container{@apply rounded-b-[--p-border-radius-md]}.b-component--DataTable:has(:not(.b-Header)) .p-datatable-table-container{@apply rounded-[--p-border-radius-md]}.b-component--DataTable:has(.p-datatable-paginator-bottom) .p-datatable-paginator-bottom{@apply border-t rounded-t-none
+        rounded-b-[--p-border-radius-md] border-b-0}.b-component--DataTable:has(.p-datatable-paginator-bottom) .p-datatable-table-container{@apply rounded-b-none}.b-component--DataTable tbody>tr:last-child>td{@apply border-b-0}.b-component--DataTable tfoot>tr>td{@apply border-t}.b-component--DataTable .b-label-column--wide{@apply 3xl:w-[30%] 2xl:w-[20%] xl:w-[15%]}.b-component--DataTable .b-label-column--narrow{@apply 3xl:w-[40%] 2xl:w-[30%] xl:w-[20%]}.b-component--DataTable a{@apply text-sm}.b-component--DataTable .p-button{@apply -my-2}.b-component--DataTable td.p-datatable-frozen-column{@apply z-[1]}.b-component--DataTable .p-datatable-thead{@apply z-[2]}
 </style>

package/dist/runtime/components/SelectButton.vue

@@ -89,5 +89,5 @@ function setSelected(value) {
 </script>
 
 <style>
-.p-popover-content .b-component--SelectButton.p-selectbutton{@apply max-sm:flex-col}.p-popover-content .b-component--SelectButton.p-selectbutton .p-togglebutton:first-child{@apply max-sm:rounded-t-lg max-sm:rounded-es-none}.p-popover-content .b-component--SelectButton.p-selectbutton .p-togglebutton:last-child{@apply max-sm:rounded-b-lg max-sm:rounded-se-none}
+.p-togglebutton-content{@apply whitespace-nowrap}.p-popover-content .b-component--SelectButton.p-selectbutton{@apply max-sm:flex-col}.p-popover-content .b-component--SelectButton.p-selectbutton .p-togglebutton:first-child{@apply max-sm:rounded-t-lg max-sm:rounded-es-none}.p-popover-content .b-component--SelectButton.p-selectbutton .p-togglebutton:last-child{@apply max-sm:rounded-b-lg max-sm:rounded-se-none}
 </style>

package/package.json

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