@katlux/preset-modern 0.1.1-alpha.97 → 0.1.1-alpha.98

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@katlux/preset-modern",
   "configKey": "katluxTemplateModern",
-  "version": "0.1.1-alpha.97",
+  "version": "0.1.1-alpha.98",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/assets/scss/css-variables.css

@@ -106,6 +106,7 @@
   --input-focus-border-color: var(--primary-500);
   --input-focus-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2);
   --input-height: 48px;
+  --input-min-width: 140px;
   --table-header-bg: var(--neutral-100);
   --table-header-color: var(--neutral-600);
   --table-border-color: var(--neutral-200);

package/dist/runtime/assets/scss/index.css

@@ -106,6 +106,7 @@
   --input-focus-border-color: var(--primary-500);
   --input-focus-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2);
   --input-height: 48px;
+  --input-min-width: 140px;
   --table-header-bg: var(--neutral-100);
   --table-header-color: var(--neutral-600);
   --table-border-color: var(--neutral-200);

package/dist/runtime/components/KBulkActions/KBulkActions.vue

@@ -8,14 +8,14 @@
 				v-model="internalSelected" 
 				labelField="label" 
 				closeOnSelect 
-				:disabled="selectedRows.length === 0" 
+				:disabled="!selectAll && selectedRows.length === 0" 
 				:placeholder="t('Select an action')"
 				class="action-select"
 			)
 			KButton(
 				@click="doAction(internalSelected)" 
 				size="small" 
-				:disabled="selectedRows.length === 0 || internalSelected == undefined"
+				:disabled="(!selectAll && selectedRows.length === 0) || internalSelected == undefined"
 				class="execute-btn"
 			) {{ t('Apply') }}
 			
@@ -29,7 +29,7 @@
 					size="small" 
 					:type="action.type || 'default'"
 					:iconOnly="action.iconOnly"
-					:disabled="selectedRows.length === 0"
+					:disabled="!selectAll && selectedRows.length === 0"
 					class="action-btn"
 				)
 					template(#icon v-if="action.icon")

package/dist/runtime/components/KDatatable/KDatatable.vue

@@ -5,8 +5,8 @@
 	role="region"
 	:aria-label="t('Data Table')"
 )
-	.header(v-if="props.bulkActions && props.bulkActions.length > 0 && selectedRows.length > 0")
-		.selected-count {{ t('{count} items selected').replace('{count}', (selectedRows?.length || 0).toString()) }}
+	.header(v-if="props.bulkActions && props.bulkActions.length > 0 && (selectedRows.length > 0 || selectAll)")
+		.selected-count {{ selectAll ? t('All items selected') : t('{count} items selected').replace('{count}', (selectedRows?.length || 0).toString()) }}
 		KBulkActions.bulk-actions(:bulkActions="props.bulkActions" :selectedRows="selectedRows" :selectAll="selectAll")
 	
 	.k-datatable-wrapper(
@@ -45,7 +45,7 @@
 					:class="{ 'selected': isRowSelected(row), 'active-focus': focusedIndex === (props.virtualScroll ? startIndex + index : index) }"
 				)
 					td.check-cell(v-if="props.bulkActions && props.bulkActions.length > 0")
-						KCheckbox(:value="row" v-model="selectedRows")
+						KCheckbox(:model-value="isRowSelected(row)" @update:model-value="toggleRow(row)")
 					td(v-for="visibleField in visibleFields || props.dataProvider.fields" :key="visibleField" :data-field="visibleField" :style="getColumnStyle(visibleField)")
 						component(v-if="getCellSlot(visibleField)" :is="getCellSlot(visibleField)" :row="row" :field="visibleField" :value="row[visibleField]")
 						span(v-else) {{ row[visibleField] }}
@@ -130,10 +130,43 @@ const getRowKey = (row, index) => {
   }
   return index;
 };
+const selectedRowIds = computed(() => {
+  const idKey = props.dataProvider?.idKey || "id";
+  const set = /* @__PURE__ */ new Set();
+  for (const r of selectedRows.value || []) {
+    const id = r?.[idKey] ?? r?.id ?? r?._id ?? r;
+    set.add(id);
+    set.add(r);
+  }
+  return set;
+});
 const isRowSelected = (row) => {
+  if (selectAll.value) return true;
   const idKey = props.dataProvider?.idKey || "id";
   const rowId = row?.[idKey] ?? row?.id ?? row?._id ?? row;
-  return (selectedRows.value || []).some((r) => (r?.[idKey] ?? r?.id ?? r?._id ?? r) === rowId || r === row);
+  return selectedRowIds.value.has(rowId) || selectedRowIds.value.has(row);
+};
+const toggleRow = (row) => {
+  const idKey = props.dataProvider?.idKey || "id";
+  const rowId = row?.[idKey] ?? row?.id ?? row?._id ?? row;
+  if (selectAll.value) {
+    selectAll.value = false;
+    const activeRows = displayRows.value || pageRows.value;
+    selectedRows.value = activeRows.filter((r) => {
+      const rId = r?.[idKey] ?? r?.id ?? r?._id ?? r;
+      return rId !== rowId && r !== row;
+    });
+  } else {
+    const isSelected = isRowSelected(row);
+    if (isSelected) {
+      selectedRows.value = (selectedRows.value || []).filter((r) => {
+        const rId = r?.[idKey] ?? r?.id ?? r?._id ?? r;
+        return rId !== rowId && r !== row;
+      });
+    } else {
+      selectedRows.value = [...selectedRows.value || [], row];
+    }
+  }
 };
 const getCellSlot = (fieldName) => {
   const slotName = "cell-" + fieldName;
@@ -148,7 +181,7 @@ const getColumnStyle = (field) => {
   if (!w) return void 0;
   return { width: w, whiteSpace: "nowrap" };
 };
-const { pageData, filter: dpFilter, loading: dpLoading, initialLoad: dpInitialLoad, pageSize: dpPageSize } = useDataProvider(props.dataProvider);
+const { pageData, virtualRows, filter: dpFilter, loading: dpLoading, initialLoad: dpInitialLoad, pageSize: dpPageSize } = useDataProvider(props.dataProvider);
 const pageRows = computed(() => pageData.value || []);
 const isLoading = computed(() => {
   return dpLoading.value || dpInitialLoad.value || false;
@@ -157,6 +190,9 @@ const datatableItems = computed(() => {
   const currentRows = pageRows.value;
   const dp = props.dataProvider;
   if (props.virtualScroll) {
+    if (Array.isArray(dp?.rowMap)) return dp.rowMap;
+    if (Array.isArray(dp?.rowMap?.value)) return dp.rowMap.value;
+    if (Array.isArray(virtualRows?.value) && virtualRows.value.length > 0) return virtualRows.value;
     if (Array.isArray(dp?.allVisibleRows)) return dp.allVisibleRows;
     if (Array.isArray(dp?.allVisibleRows?.value)) return dp.allVisibleRows.value;
     if (Array.isArray(dp?.allVisibleNodes)) return dp.allVisibleNodes;
@@ -266,7 +302,8 @@ const handleKeyDown = (e) => {
   border-radius: var(--border-radius-lg);
   box-shadow: var(--shadow-md);
   background: var(--background-color);
-  overflow: hidden;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
   border: 1px solid var(--table-border-color);
 }
 .modern-datatable .k-datatable-wrapper .loading-overlay {
@@ -328,6 +365,7 @@ const handleKeyDown = (e) => {
   border-bottom: 1px solid var(--table-border-color);
   color: var(--table-row-text-color);
   font-size: var(--font-size-md);
+  white-space: nowrap;
 }
 .modern-datatable table tbody tr td.check-cell {
   text-align: center;
@@ -344,6 +382,7 @@ const handleKeyDown = (e) => {
   text-align: center;
   padding: var(--gap-xl);
   color: var(--font-color-secondary);
+  white-space: normal;
 }
 .modern-datatable table tbody tr:last-child td {
   border-bottom: none;
@@ -352,8 +391,21 @@ const handleKeyDown = (e) => {
   display: flex;
   justify-content: flex-end;
   align-items: center;
+  gap: var(--gap-md);
+  margin-top: var(--gap-sm);
+}
+@media (max-width: 768px) {
+  .modern-datatable .footer {
+    flex-direction: column;
+    align-items: stretch;
+    gap: var(--gap-sm);
+  }
+  .modern-datatable .footer .pagination {
+    width: 100%;
+  }
 }
 .modern-datatable.is-virtual-scroll .k-datatable-wrapper {
+  overflow-x: auto;
   overflow-y: auto;
   max-height: var(--k-datatable-viewport-height, 500px);
   outline: none;

package/dist/runtime/components/KPagination/KPagination.vue

@@ -1,7 +1,7 @@
 <template lang="pug">
 nav.k-pagination-modern(v-if="totalPages > 1" :aria-label="t('Pagination Navigation')")
 	ul.pagination-list
-		li(v-if="showPrevButton")
+		li.nav-prev(v-if="showPrevButton")
 			KButton.nav-btn(
 				@click="goToPrev"
 				:disabled="!showPrevButton"
@@ -11,7 +11,7 @@ nav.k-pagination-modern(v-if="totalPages > 1" :aria-label="t('Pagination Navigat
 				:aria-label="t('Previous Page')"
 			) ‹
 
-		li(v-if="showFirstEllipsis")
+		li.nav-first(v-if="showFirstEllipsis")
 			KButton.page-btn(
 				@click="goToFirst"
 				:href="getPageHref(1)"
@@ -20,10 +20,10 @@ nav.k-pagination-modern(v-if="totalPages > 1" :aria-label="t('Pagination Navigat
 				:aria-label="t('Go to Page 1')"
 			) 1
 		
-		li(v-if="showFirstEllipsis")
+		li.nav-ellipsis.first-ellipsis(v-if="showFirstEllipsis")
 			span.ellipsis ...
 
-		li(v-for="item in visiblePages" :key="item")
+		li.nav-page(v-for="item in visiblePages" :key="item" :class="{ 'is-active': item === currentPage }")
 			KButton.page-btn(
 				@click="() => pageClicked(item)"
 				:href="getPageHref(item)"
@@ -33,10 +33,10 @@ nav.k-pagination-modern(v-if="totalPages > 1" :aria-label="t('Pagination Navigat
 				:aria-label="t('Page') + ' ' + item"
 			) {{ item }}
 
-		li(v-if="showLastEllipsis")
+		li.nav-ellipsis.last-ellipsis(v-if="showLastEllipsis")
 			span.ellipsis ...
 
-		li(v-if="showLastEllipsis")
+		li.nav-last(v-if="showLastEllipsis")
 			KButton.page-btn(
 				@click="goToLast"
 				:href="getPageHref(totalPages)"
@@ -45,7 +45,7 @@ nav.k-pagination-modern(v-if="totalPages > 1" :aria-label="t('Pagination Navigat
 				:aria-label="t('Go to Page') + ' ' + totalPages"
 			) {{ totalPages }}
 
-		li(v-if="showNextButton")
+		li.nav-next(v-if="showNextButton")
 			KButton.nav-btn(
 				@click="goToNext"
 				:disabled="!showNextButton"
@@ -90,6 +90,7 @@ defineProps({
   padding: 0;
   margin: 0;
   align-items: center;
+  flex-wrap: wrap;
 }
 .k-pagination-modern .pagination-list li {
   display: flex;
@@ -100,4 +101,19 @@ defineProps({
   color: var(--neutral-400);
   font-size: var(--font-size-sm);
 }
+@media (max-width: 640px) {
+  .k-pagination-modern {
+    justify-content: center;
+  }
+  .k-pagination-modern .pagination-list {
+    justify-content: center;
+  }
+}
+@media (max-width: 480px) {
+  .k-pagination-modern .pagination-list li.nav-first,
+  .k-pagination-modern .pagination-list li.nav-last,
+  .k-pagination-modern .pagination-list li.nav-ellipsis {
+    display: none;
+  }
+}
 </style>

package/dist/runtime/components/KTextbox/KTextbox.vue

@@ -42,7 +42,7 @@ const inputAttrs = computed(() => {
   display: flex;
   flex-direction: column;
   flex: 1;
-  min-width: 0;
+  min-width: var(--input-min-width, 140px);
 }
 
 .KTextbox.modern-textbox {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@katlux/preset-modern",
-	"version": "0.1.1-alpha.97",
+	"version": "0.1.1-alpha.98",
 	"description": "Modern default design preset and styling variables for Katlux components",
 	"author": "Katlux",
 	"license": "Apache-2.0",
@@ -20,7 +20,7 @@
 		"./dist/runtime/assets/*": "./dist/runtime/assets/*"
 	},
 	"dependencies": {
-		"@katlux/toolkit": "^0.1.1-alpha.120",
+		"@katlux/toolkit": "^0.1.1-alpha.121",
 		"@nuxt/kit": "^3.12.0"
 	},
 	"files": [