@mouseless/baked 1.2.0 → 1.2.1

package/dist/module.json

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

package/dist/runtime/components/DataPanel.vue

@@ -83,8 +83,8 @@
 <script setup>
 import { computed, ref, useTemplateRef } from "vue";
 import { Message, Panel, Button } from "primevue";
-import { Bake, Inputs, PersistentPopover } from "#components";
 import { useBreakpoints, useContext, useDataMounter, useUiStates, useLocalization } from "#imports";
+import { Bake, Inputs, PersistentPopover } from "#components";
 const { value: { panelStates } } = useUiStates();
 const { isMd } = useBreakpoints();
 const context = useContext();

package/dist/runtime/components/DataTable.vue

@@ -22,6 +22,15 @@
     <template #empty>
       {{ lc("No records found") }}
     </template>
+    <div
+      v-if="!paginator && serverPaginatorOptions"
+      class="flex w-full justify-end items-end"
+    >
+      <ServerPaginator
+        :schema="serverPaginatorOptions"
+        :data="data"
+      />
+    </div>
     <Column
       v-for="column in columns.filter(c => !c.hidden)"
       :key="column.key"
@@ -147,8 +156,8 @@ import { computed, onMounted, ref } from "vue";
 import Column from "primevue/column";
 import { Button, ColumnGroup, DataTable, Menu, Row } from "primevue";
 import { useRuntimeConfig } from "#app";
-import { AwaitLoading, Bake, ProvideParentContext } from "#components";
 import { useComposableResolver, useContext, useDataFetcher, useLocalization } from "#imports";
+import { AwaitLoading, Bake, ProvideParentContext, ServerPaginator } from "#components";
 const context = useContext();
 const composableResolver = useComposableResolver();
 const dataFetcher = useDataFetcher();
@@ -159,11 +168,16 @@ const { schema, data } = defineProps({
   schema: { type: null, required: true },
   data: { type: null, required: true }
 });
-const { actions, columns, dataKey, footerTemplate, itemsProp, paginator, rows, rowsWhenLoading, scrollHeight, virtualScrollerOptions } = schema;
+const { actions, columns, dataKey, footerTemplate, itemsProp, paginator, rows, rowsWhenLoading, scrollHeight, serverPaginatorOptions } = schema;
 const exportOptions = schema.exportOptions && {
   buttonIcon: "pi pi-download",
   ...schema.exportOptions
 };
+const virtualScrollerOptions = schema.virtualScrollerOptions && {
+  appendOnly: true,
+  numToleratedItems: 10,
+  ...schema.exportOptions
+};
 const contextData = context.injectContextData();
 const dataDescriptor = context.injectDataDescriptor();
 const dataTable = ref();
@@ -227,5 +241,5 @@ 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 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}
 </style>

package/dist/runtime/components/Dialog.vue

@@ -34,8 +34,8 @@
 <script setup>
 import { ref } from "vue";
 import { Dialog } from "primevue";
-import { Bake, Button } from "#components";
 import { useLocalization } from "#imports";
+import { Bake, Button } from "#components";
 const { localize: l } = useLocalization();
 const { schema } = defineProps({
   schema: { type: Object, required: true }

package/dist/runtime/components/Fieldset.vue

@@ -27,8 +27,8 @@
 
 <script setup>
 import { Fieldset } from "primevue";
-import { AwaitLoading, Bake } from "#components";
 import { useLocalization } from "#imports";
+import { AwaitLoading, Bake } from "#components";
 const { localize: l } = useLocalization();
 const { schema, data } = defineProps({
   schema: { type: Object, required: true },

package/dist/runtime/components/MenuPage.vue

@@ -52,8 +52,8 @@
 import { onBeforeUnmount, ref } from "vue";
 import { Divider } from "primevue";
 import { useRuntimeConfig } from "#app";
-import { Bake } from "#components";
 import { useContext, useLocalization } from "#imports";
+import { Bake } from "#components";
 const context = useContext();
 const { localize: l } = useLocalization();
 const { localize: lc } = useLocalization({ group: "MenuPage" });

package/dist/runtime/components/PageTitle.vue

@@ -138,8 +138,8 @@
 import { onMounted, ref } from "vue";
 import { Button } from "primevue";
 import { useRuntimeConfig } from "#app";
-import { Bake, PersistentPopover } from "#components";
 import { useBreakpoints, useHead, useLocalization } from "#imports";
+import { Bake, PersistentPopover } from "#components";
 const { isMd } = useBreakpoints();
 const { localize: l } = useLocalization();
 const { public: { components } } = useRuntimeConfig();

package/dist/runtime/components/ServerPaginator.d.vue.ts

@@ -0,0 +1,21 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    schema: {
+        type: null;
+        required: true;
+    };
+    data: {
+        type: null;
+        required: true;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    schema: {
+        type: null;
+        required: true;
+    };
+    data: {
+        type: null;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/components/ServerPaginator.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="flex items-center gap-1 justify-center">
+    <span class="text-sm mr-2 max-xs:hidden">{{ lc("Page {page}", { page }) }}</span>
+    <Button
+      rounded
+      variant="text"
+      icon="pi pi-chevron-left"
+      :disabled="page <= 1"
+      severity="secondary"
+      size="small"
+      @click="page--"
+    />
+    <Button
+      rounded
+      variant="text"
+      icon="pi pi-chevron-right"
+      severity="secondary"
+      size="small"
+      :disabled="!allowNext"
+      @click="page++"
+    />
+    <Bake
+      v-if="takeComponent && isXs"
+      v-model="take"
+      name="take"
+      :descriptor="takeComponent"
+    />
+  </div>
+</template>
+
+<script setup>
+import { computed, ref, watch } from "vue";
+import { Button } from "primevue";
+import { useRoute, useRouter } from "#app";
+import { useBreakpoints, useContext, useLocalization } from "#imports";
+import { Bake } from "#components";
+const route = useRoute();
+const router = useRouter();
+const { isXs } = useBreakpoints();
+const context = useContext();
+const { localize: lc } = useLocalization({ group: "ServerPaginator" });
+const { schema, data } = defineProps({
+  schema: { type: null, required: true },
+  data: { type: null, required: true }
+});
+const { take: takeComponent, takeParameterName = "take", skipParameterName = "skip", pageChangeEventName = "page-changed" } = schema;
+const events = context.injectEvents();
+context.provideLoading(false);
+const take = ref(Number(route.query[takeParameterName]) || 10);
+const allowNext = computed(() => data?.length >= take.value);
+const skip = computed(() => Number(route.query[skipParameterName]) || 0);
+const page = computed({
+  get: () => skip.value / take.value + 1 || 1,
+  set: (value) => {
+    router.push({
+      query: {
+        ...route.query,
+        [skipParameterName]: (value - 1) * take.value,
+        [takeParameterName]: take.value
+      }
+    });
+  }
+});
+watch(take, (newTake, oldTake) => {
+  if (oldTake === newTake) {
+    return;
+  }
+  page.value = 1;
+});
+watch([() => route.query[skipParameterName], () => route.query[takeParameterName]], () => {
+  events.publish(pageChangeEventName, page.value);
+});
+</script>

package/dist/runtime/components/ServerPaginator.vue.d.ts

@@ -0,0 +1,21 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    schema: {
+        type: null;
+        required: true;
+    };
+    data: {
+        type: null;
+        required: true;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    schema: {
+        type: null;
+        required: true;
+    };
+    data: {
+        type: null;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/components/SideMenu.vue

@@ -104,8 +104,8 @@
 import { ref } from "vue";
 import { RouterLink } from "vue-router";
 import { Button, Skeleton } from "primevue";
-import { Bake, Logo, PersistentPopover, SideMenuItem } from "#components";
 import { useBreakpoints, useContext } from "#imports";
+import { Bake, Logo, PersistentPopover, SideMenuItem } from "#components";
 const { isMd } = useBreakpoints();
 const context = useContext();
 const { schema, data } = defineProps({

package/package.json

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