@hostlink/nuxt-light 1.52.2 → 1.52.4

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "light",
   "configKey": "light",
-  "version": "1.52.2",
+  "version": "1.52.4",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/components/l-action-btn.d.vue.ts

@@ -0,0 +1,12 @@
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/l-action-btn.vue

@@ -0,0 +1,5 @@
+<template>
+    <q-btn flat round size="sm">
+        <slot></slot>
+    </q-btn>
+</template>

package/dist/runtime/components/l-action-btn.vue.d.ts

@@ -0,0 +1,12 @@
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/l-col.d.vue.ts

@@ -9,8 +9,8 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<LColProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LColProps> & Readonly<{}>, {
-    xs: number | string;
     sm: number | string;
+    xs: number | string;
     md: number | string;
     gutter: "xs" | "sm" | "md" | "lg" | "xl" | "none";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/l-col.vue.d.ts

@@ -9,8 +9,8 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<LColProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LColProps> & Readonly<{}>, {
-    xs: number | string;
     sm: number | string;
+    xs: number | string;
     md: number | string;
     gutter: "xs" | "sm" | "md" | "lg" | "xl" | "none";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/l-page.vue

@@ -62,16 +62,12 @@ const lastPart = computed(() => {
 
 <template>
     <q-page :padding="padding" class="q-pt-sm">
-
-
-
         <q-toolbar v-if="showToolbar">
             <l-back-btn v-if="backBtn" dense />
             <l-add-btn v-if="addBtn" dense />
             <l-edit-btn v-if="editBtn" dense />
             <l-delete-btn v-if="deleteBtn" @submit="onDelete" dense />
             <q-toolbar-title>{{ $t(title) }}</q-toolbar-title>
-
             <q-breadcrumbs v-if="breadcrumbs">
                 <q-breadcrumbs-el :label="$t('Home')" to="/" icon="home" />
                 <q-breadcrumbs-el :label="$t(title)" :to="'/' + route.path.split('/')[1]"

package/dist/runtime/components/l-table.vue

@@ -399,6 +399,9 @@ const onDelete = async (id) => {
 };
 const attrs = computed(() => {
   const a = { ...light.styles.table, ...Object.fromEntries(Object.entries(props).filter(([key, value]) => value !== void 0)) };
+  if (props.name) {
+    a.visibleColumns = visibleColumns.value;
+  }
   return {
     ...a,
     loadingLabel: t(props.loadingLabel),
@@ -423,7 +426,7 @@ const hasRowExpand = computed(() => {
   return ss.indexOf("row-expand") >= 0;
 });
 const hasActions = computed(() => {
-  return props.actions.length > 0;
+  return props.actions.length > 0 || ss.indexOf("actions") >= 0;
 });
 const getCellStyle = (col, row) => {
   const style = col.cellStyle ?? {};
@@ -491,7 +494,21 @@ const showTopRight = computed(() => {
 const hidableColumns = computed(() => {
   return props.columns?.filter((c) => !c.required) || [];
 });
-const visibleColumns = props.name ? useStorage("l-table-visible-columns-" + simpleRouteName.value + "-" + props.name, hidableColumns.value.map((c) => c.name)) : ref(hidableColumns.value.map((c) => c.name));
+const visibleColumns = computed({
+  get() {
+    if (props.name) {
+      return useStorage("l-table-visible-columns-" + simpleRouteName.value + "-" + props.name, hidableColumns.value.map((c) => c.name)).value;
+    } else {
+      return null;
+    }
+  },
+  set(value) {
+    if (props.name) {
+      const storage = useStorage("l-table-visible-columns-" + simpleRouteName.value + "-" + props.name, hidableColumns.value.map((c) => c.name));
+      storage.value = value;
+    }
+  }
+});
 watch(filters, () => {
   onFilters();
 }, { deep: true });
@@ -504,13 +521,12 @@ const hasFilters = computed(() => {
 
 <template>
     <q-table v-bind="attrs" :loading="loading" :rows="rows" ref="table" @request="onLocalRequest" :columns="columns"
-        v-model:pagination="pagination" :filter="filter" v-model:selected="localSelected"
-        :visible-columns="visibleColumns">
+        v-model:pagination="pagination" :filter="filter" v-model:selected="localSelected">
         <template #header="props">
             <q-tr :props="props">
-                <q-td v-if="selection != 'none'" auto-width>
-                    <q-checkbox v-model="props.selected" />
-                </q-td>
+                <q-th v-if="selection != 'none'" auto-width>
+                    <q-checkbox v-model="props.selected" :dense="table?.dense" />
+                </q-th>
                 <q-th v-if="hasRowExpand" auto-width></q-th>
                 <q-th v-if="hasActions" auto-width></q-th>
                 <q-th v-for="col in props.cols" :key="col.name" :props="props">{{ col.label }}</q-th>
@@ -535,7 +551,7 @@ const hasFilters = computed(() => {
         <template #body="props">
             <q-tr :props="props">
                 <q-td v-if="selection != 'none'" auto-width>
-                    <q-checkbox v-model="props.selected" />
+                    <q-checkbox v-model="props.selected" :dense="table?.dense" />
                 </q-td>
                 <q-td v-if="hasRowExpand" auto-width>
                     <q-btn flat round size="sm" :icon="props.expand ? 'sym_o_expand_more' : 'sym_o_expand_less'"
@@ -545,11 +561,11 @@ const hasFilters = computed(() => {
                 <q-td v-if="hasActions" auto-width>
                     <div :class="{ 'text-grey-8': !isDark }" v-if="primaryKey">
 
-                        <l-view-btn v-if="actionView && props.row.canView"
-                            :to="`/${modelName}/${props.row[primaryKey]}/view`" size="sm" />
+                        <l-action-btn v-if="actionView && props.row.canView"
+                            :to="`/${modelName}/${props.row[primaryKey]}/view`" icon="sym_o_search" />
 
-                        <l-edit-btn v-if="activeEdit && props.row.canUpdate"
-                            :to="`/${modelName}/${props.row[primaryKey]}/edit`" size="sm" />
+                        <l-action-btn v-if="activeEdit && props.row.canUpdate"
+                            :to="`/${modelName}/${props.row[primaryKey]}/edit`" icon="sym_o_edit" />
 
                         <l-delete-btn v-if="actionDelete && props.row.canDelete"
                             @submit="onDelete(props.row[primaryKey])" size="sm"></l-delete-btn>

package/dist/runtime/components/user-list.d.vue.ts

@@ -0,0 +1,7 @@
+declare const _default: import("vue").DefineComponent<{}, {
+    status?: number | undefined;
+    $props: {
+        readonly status?: number | undefined;
+    };
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/runtime/components/user-list.vue

@@ -0,0 +1,28 @@
+<script setup>
+import { model } from "#imports";
+const props = defineProps({
+  status: Number
+});
+const onRequest = async (request) => {
+  const filters = {};
+  if (props.status >= 0) {
+    filters.status = props.status;
+  }
+  request.loadObjects("User", filters);
+};
+const columns = model("User").columns({
+  username: true,
+  first_name: true,
+  label_name: true,
+  email: true,
+  phone: true,
+  join_date: true,
+  has2FA: true
+});
+</script>
+
+<template>
+    <l-table ref="table" row-key="user_id" @request-data="onRequest" :columns="columns"
+        :actions="['view', 'update', 'delete']">
+    </l-table>
+</template>

package/dist/runtime/components/user-list.vue.d.ts

@@ -0,0 +1,7 @@
+declare const _default: import("vue").DefineComponent<{}, {
+    status?: number | undefined;
+    $props: {
+        readonly status?: number | undefined;
+    };
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/runtime/formkit/Repeater.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { computed, ref } from "vue";
-import { useDragAndDrop, dragAndDrop } from "@formkit/drag-and-drop/vue";
+import { useDragAndDrop } from "@formkit/drag-and-drop/vue";
 import { animations } from "@formkit/drag-and-drop";
 const props = defineProps({
   context: Object
@@ -10,6 +10,9 @@ const min = props.context.node.props.min ?? 1;
 const max = props.context.node.props.max ?? Infinity;
 const sortable = props.context.node.props.sortable !== void 0 ? props.context.node.props.sortable : true;
 const addLabel = props.context.node.props.addLabel ?? "Add";
+if (!props.context.value) {
+  await node.input([]);
+}
 const [parent, localValue] = useDragAndDrop(props.context.value, {
   dragHandle: ".l-repeater-handle",
   plugins: [animations()]
@@ -61,8 +64,8 @@ const cursor = ref("cursor-grab");
 </style>
 
 <template>
-    <div class="col col-12 ">
-        <FormKit type="list" v-model="localValue" dynamic #default="{ items, node }" :name="node.name">
+    <FormKit type="list" v-model="localValue" dynamic #default="{ items, node }" :name="node.name">
+        <div class="col col-12">
             <q-list bordered separator ref="parent">
                 <FormKit type="group" v-for="(item, index) in items" :index="index" :key="item" #default="{ node }">
                     <q-item class="q-pa-xs">
@@ -95,6 +98,6 @@ const cursor = ref("cursor-grab");
             </q-list>
             <q-btn @click="onAdd" :label="addLabel" icon="sym_o_add" color="primary" outline class="q-mt-sm"
                 :disable="localValue.length >= max" />
-        </FormKit>
-    </div>
+        </div>
+    </FormKit>
 </template>

package/dist/runtime/pages/User/index.vue

@@ -1,41 +1,12 @@
-<script setup>
-import { ref } from "vue";
-const status = ref("active");
-import { model } from "#imports";
-const onRequest = async (request) => {
-  const filters = {};
-  if (status.value === "active") {
-    filters["status"] = 0;
-  } else if (status.value === "inactive") {
-    filters["status"] = 1;
-  }
-  request.loadObjects("User", filters);
-};
-const columns = model("User").columns({
-  username: true,
-  first_name: true,
-  label_name: true,
-  email: true,
-  phone: true,
-  join_date: true,
-  has2FA: true
-});
-const selectedRows = ref([]);
-</script>
-
-<template>
+<template>
     <l-page>
-        <l-tabs route v-model="status">
+        <l-tabs route>
             <l-tab label="Active" name="active">
-                <l-table ref="table" row-key="user_id" @request-data="onRequest" :columns="columns" name="user-active"
-                    :actions="['view', 'update', 'delete']">
-                </l-table>
+                <user-list :status="0" name="user-active" />
             </l-tab>
             <l-tab label="Inactive" name="inactive">
-                <l-table row-key="user_id" @request-data="onRequest" :columns="columns" name="user-inactive"
-                    :actions="['view', 'update', 'delete']">
-                </l-table>
+                <user-list :status="1" name="user-inactive" />
             </l-tab>
         </l-tabs>
     </l-page>
-</template>
+</template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hostlink/nuxt-light",
-  "version": "1.52.2",
+  "version": "1.52.4",
   "description": "HostLink Nuxt Light Framework",
   "repository": {
     "type": "git",

package/dist/runtime/plugins/models.client.d.ts

@@ -1 +0,0 @@
-export {};