@hostlink/nuxt-light 1.6.4 → 1.6.6

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "light",
   "configKey": "light",
-  "version": "1.6.4"
+  "version": "1.6.6"
 }

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

@@ -20,7 +20,7 @@ const to = props.to ?? relativePath + "/add";
 
 </script>
 <template>
-    <l-btn color="primary" icon="sym_o_add" :to="to" :label="label">
+    <l-btn :color="$light.color" icon="sym_o_add" :to="to" :label="label">
         <q-tooltip>
             {{ $t(label) }}
         </q-tooltip>

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

@@ -10,6 +10,10 @@ export interface LCardProps extends QCardProps {
      * Permission to access this card, if not granted, the card will not be shown, if the user is admin, a lock icon will be shown to allow the user to grant the permission
      */
     permission?: string
+    fullscreenable?: boolean
+    closeable?: boolean
+    minimizable?: boolean
+
 }
 
 const light = useLight();
@@ -45,6 +49,9 @@ const fullScreenIcon = computed(() => fullScreen.value ? "sym_o_fullscreen_exit"
 const showBody = computed(() => !minimize.value || fullScreen.value);
 
 const showBar = computed(() => {
+    if (props.closeable) return true;
+    if (props.fullscreenable) return true;
+    if (props.minimizable) return true;
     if (props.title !== undefined) return true;
     if (showSecurity.value) return true;
     return false;
@@ -127,8 +134,9 @@ const onUpdatePermission = async (role: any) => {
                 </q-menu>
             </q-btn>
 
-            <q-btn dense flat @click="fullScreen = !fullScreen" :icon="fullScreenIcon" />
-            <q-btn dense flat :icon="icon" @click="minimize = !minimize" v-if="!fullScreen" />
+            <q-btn dense flat :icon="icon" @click="minimize = !minimize" v-if="!fullScreen && minimizable" />
+            <q-btn dense flat @click="fullScreen = !fullScreen" :icon="fullScreenIcon" v-if="fullscreenable" />
+            <q-btn dense flat icon="sym_o_close" v-close-popup v-if="closeable" />
         </q-bar>
         <template v-if="showBody">
             <slot></slot>

package/dist/runtime/components/l-date-picker.vue

@@ -158,7 +158,7 @@ const date_attrs = computed(() => {
                 <q-popup-proxy cover transition-show="scale" transition-hide="scale" ref="popup">
                     <q-date v-bind="date_attrs" v-model="dateValue" :color="$light.color">
                         <div class="row items-center justify-end">
-                            <q-btn v-close-popup label="Close" color="primary" flat />
+                            <q-btn v-close-popup label="Close" :color="$light.color" flat />
                         </div>
                     </q-date>
                 </q-popup-proxy>

package/dist/runtime/components/l-file-manager-move.vue

@@ -121,9 +121,9 @@ const onClickMove = async () => {
           <q-tooltip> Create new folder</q-tooltip>
         </q-btn>
         <q-space></q-space>
-        <q-btn dense label="Move to here" color="primary" v-if="mode == 'empty folder'">
+        <q-btn dense label="Move to here" :color="$light.color" v-if="mode == 'empty folder'">
         </q-btn>
-        <q-btn dense label="Move" outline color="primary" v-if="mode == 'move'" @click="onClickMove"></q-btn>
+        <q-btn dense label="Move" outline :color="$light.color" v-if="mode == 'move'" @click="onClickMove"></q-btn>
       </q-card-actions>
     </q-card>
   </q-menu>

package/dist/runtime/components/l-file-manager.vue

@@ -1,5 +1,4 @@
 <script setup>
-import { VariableType } from "json-to-graphql-query";
 import { useI18n } from "vue-i18n";
 import { ref, watch, computed } from 'vue';
 import { useQuasar, format } from 'quasar';
@@ -354,15 +353,8 @@ const onUploadFiles = async () => {
 
       await m("fsUploadFile", {
         path: path.value,
-        file: new VariableType("file")
-      }, [{
-        __variables: {
-          file: {
-            type: "Upload!",
-            value: file
-          }
-        }
-      }]);
+        file
+      });
     }
   } catch (e) {
     quasar.dialog({

package/dist/runtime/components/l-file-upload.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { VariableType } from "json-to-graphql-query";
 import { ref, computed, useAttrs } from "vue";
 import { useLight, m, q } from '#imports';
 import { Loading, Dialog } from "quasar";
@@ -97,16 +96,9 @@ const onUploadFile = async () => {
     try {
         let v = await m("fsUploadFile", {
             path: props.path,
-            file: new VariableType("file"),
+            file: uploadFile.value,
             rename: rename.value
-        }, [{
-            __variables: {
-                file: {
-                    type: "Upload!",
-                    value: uploadFile.value
-                }
-            }
-        }]);
+        });
 
         //remove first slash if exists
         if (v.startsWith("/")) v = v.substr(1);
@@ -142,8 +134,8 @@ const onUploadFile = async () => {
                 </q-card-section>
 
                 <q-card-actions align="right">
-                    <q-btn flat :label="$t('Cancel')" color="primary" @click="uploadFile = null" v-close-popup></q-btn>
-                    <q-btn flat :label="$t('Upload')" color="primary" @click="onUploadFile"></q-btn>
+                    <q-btn flat :label="$t('Cancel')" :color="$light.color" @click="uploadFile = null" v-close-popup></q-btn>
+                    <q-btn flat :label="$t('Upload')" :color="$light.color" @click="onUploadFile"></q-btn>
                 </q-card-actions>
             </l-card>
         </q-dialog>

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

@@ -77,7 +77,7 @@ const onSubmit = (e) => {
 </script>
 <template>
     <q-form ref="form" @submit="onSubmit">
-        <l-card :bordered="bordered">
+        <l-card :bordered="bordered" >
             <q-card-section>
                 <div :class="`q-gutter-${gutter}`">
                     <slot></slot>

package/dist/runtime/components/l-icon-picker.vue

@@ -3317,7 +3317,7 @@ watch(search, (val) => {
                     <template v-slot:loading>
                         <div class="text-center q-my-md">
 
-                            <q-spinner-dots color="primary" size="40px" />
+                            <q-spinner-dots :color="$light.color" size="40px" />
                         </div>
                     </template>
                 </q-infinite-scroll>

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

@@ -1,3 +1,3 @@
 <template>
-    <l-btn color="primary" icon="sym_o_save" label="Save" />
+    <l-btn :color="$light.color" icon="sym_o_save" label="Save" />
 </template>

package/dist/runtime/components/l-time-picker.vue

@@ -60,7 +60,7 @@ const attrs = {
                 <q-popup-proxy cover transition-show="scale" transition-hide="scale" ref="popup">
                     <q-time v-model="localValue" format24h>
                         <div class="row items-center justify-end">
-                            <q-btn v-close-popup label="Close" color="primary" flat />
+                            <q-btn v-close-popup label="Close" :color="$light.color" flat />
                         </div>
                     </q-time>
                 </q-popup-proxy>

package/dist/runtime/formkit/Repeater.vue

@@ -74,19 +74,19 @@ const isAllowMoveDown = (index) => {
                         <div class="col-shrink">
                             <div class="q-mb-sm">
                                 <!-- up -->
-                                <q-btn type="button" @click="onMoveUp(index)" icon="sym_o_arrow_upward" color="primary"
+                                <q-btn type="button" @click="onMoveUp(index)" icon="sym_o_arrow_upward" :color="$light.color"
                                     dense unelevated :disable="!isAllowMoveUp(index)" />
                             </div>
 
                             <div class="q-mb-sm">
-                                <q-btn type="button" @click="onRemove" icon="sym_o_remove" color="primary" dense unelevated
+                                <q-btn type="button" @click="onRemove" icon="sym_o_remove" :color="$light.color" dense unelevated
                                     :disable="!isAllowRemove" />
                             </div>
 
 
                             <div class="q-mb-sm">
                                 <!-- down -->
-                                <q-btn type="button" @click="onMoveDown(index)" icon="sym_o_arrow_downward" color="primary"
+                                <q-btn type="button" @click="onMoveDown(index)" icon="sym_o_arrow_downward" :color="$light.color"
                                     dense unelevated :disable="!isAllowMoveDown(index)" />
                             </div>
 
@@ -100,7 +100,7 @@ const isAllowMoveDown = (index) => {
             </q-card>
         </FormKit>
 
-        <q-btn color="primary" @click="onAdd" icon="sym_o_add" label="Add" :disable="localValue.length >= max"
+        <q-btn :color="$light.color" @click="onAdd" icon="sym_o_add" :label="$t('Add')" :disable="localValue.length >= max"
             unelevated></q-btn>
     </FormKit>
 </template>

package/dist/runtime/lib/index.d.ts

@@ -1,23 +1,22 @@
-import f from "./f";
-import getApiUrl from "./getApiUrl";
-import getCurrentUser from "./getCurrentUser";
-import getObject from "./getObject";
-import list from "./list";
-import m from "./m";
-import q from "./q";
-import t from "./t";
-import updateObject from "./updateObject";
-import listObject from "./listObject";
-import loadObject from "./loadObject";
-import isGranted from "./isGranted";
-import GQLFieldBuilder from "./GQLFieldBuilder";
-import getModelField from './getModelField';
-import getModelFields from './getModelFields';
-import getModelColumns from './getModelColumns';
-import sv from './sv';
-import model from './model';
-declare const notify: (message: string, color?: string) => void;
-import getID from "./getID";
-declare const getApiBase: () => {};
-import { getGQLFields } from '@hostlink/light';
-export { f, getApiUrl, getCurrentUser, getObject, list, m, q, t, updateObject, notify, getID, listObject, isGranted, getApiBase, loadObject, GQLFieldBuilder, getModelField, getModelFields, getModelColumns, getGQLFields, sv, model };
+export { default as f } from "./f";
+export { default as getApiUrl } from "./getApiUrl";
+export { default as getCurrentUser } from "./getCurrentUser";
+export { default as getObject } from "./getObject";
+export { default as list } from "./list";
+export { default as m } from "./m";
+export { default as q } from "./q";
+export { default as t } from "./t";
+export { default as updateObject } from "./updateObject";
+export { default as listObject } from "./listObject";
+export { default as loadObject } from "./loadObject";
+export { default as isGranted } from "./isGranted";
+export { default as GQLFieldBuilder } from "./GQLFieldBuilder";
+export { default as getModelField } from "./getModelField";
+export { default as getModelFields } from "./getModelFields";
+export { default as getModelColumns } from "./getModelColumns";
+export { default as sv } from "./sv";
+export { default as model } from "./model";
+export declare const notify: (message: string, color?: string) => void;
+export { default as getID } from "./getID";
+export declare const getApiBase: () => {};
+export { getGQLFields } from '@hostlink/light';

package/dist/runtime/lib/index.mjs

@@ -1,57 +1,33 @@
 import { useRuntimeConfig } from "nuxt/app";
 import { Notify } from "quasar";
-import f from "./f.mjs";
-import getApiUrl from "./getApiUrl.mjs";
-import getCurrentUser from "./getCurrentUser.mjs";
-import getObject from "./getObject.mjs";
-import list from "./list.mjs";
-import m from "./m.mjs";
-import q from "./q.mjs";
-import t from "./t.mjs";
-import updateObject from "./updateObject.mjs";
-import listObject from "./listObject.mjs";
-import loadObject from "./loadObject.mjs";
-import isGranted from "./isGranted.mjs";
-import GQLFieldBuilder from "./GQLFieldBuilder.mjs";
-import getModelField from "./getModelField.mjs";
-import getModelFields from "./getModelFields.mjs";
-import getModelColumns from "./getModelColumns.mjs";
-import sv from "./sv.mjs";
-import model from "./model.mjs";
-const notify = function(message, color = "positive") {
+export { default as f } from "./f.mjs";
+export { default as getApiUrl } from "./getApiUrl.mjs";
+export { default as getCurrentUser } from "./getCurrentUser.mjs";
+export { default as getObject } from "./getObject.mjs";
+export { default as list } from "./list.mjs";
+export { default as m } from "./m.mjs";
+export { default as q } from "./q.mjs";
+export { default as t } from "./t.mjs";
+export { default as updateObject } from "./updateObject.mjs";
+export { default as listObject } from "./listObject.mjs";
+export { default as loadObject } from "./loadObject.mjs";
+export { default as isGranted } from "./isGranted.mjs";
+export { default as GQLFieldBuilder } from "./GQLFieldBuilder.mjs";
+export { default as getModelField } from "./getModelField.mjs";
+export { default as getModelFields } from "./getModelFields.mjs";
+export { default as getModelColumns } from "./getModelColumns.mjs";
+export { default as sv } from "./sv.mjs";
+export { default as model } from "./model.mjs";
+export const notify = function(message, color = "positive") {
   Notify.create({
     message,
     color,
     position: "top"
   });
 };
-import getID from "./getID.mjs";
-const getApiBase = () => {
+export { default as getID } from "./getID.mjs";
+export const getApiBase = () => {
   const config = useRuntimeConfig();
   return config?.public?.apiBase ?? "/api/";
 };
-import { getGQLFields } from "@hostlink/light";
-export {
-  f,
-  getApiUrl,
-  getCurrentUser,
-  getObject,
-  list,
-  m,
-  q,
-  t,
-  updateObject,
-  notify,
-  getID,
-  listObject,
-  isGranted,
-  getApiBase,
-  loadObject,
-  GQLFieldBuilder,
-  getModelField,
-  getModelFields,
-  getModelColumns,
-  getGQLFields,
-  sv,
-  model
-};
+export { getGQLFields } from "@hostlink/light";

package/dist/runtime/lib/m.d.ts

@@ -1 +1,3 @@
-export default function (operation: string, args: any, fields?: any): Promise<any>;
+export default function (operation: string, args?: {
+    [key: string]: any;
+}, fields?: any): Promise<any>;

package/dist/runtime/lib/m.mjs

@@ -1,56 +1,4 @@
-import axios from "axios";
-import { jsonToGraphQLQuery } from "json-to-graphql-query";
-import { getApiBase } from "./index.mjs";
-export default async function(operation, args, fields = []) {
-  const mutation = {
-    mutation: {}
-  };
-  if (arguments.length == 1) {
-    mutation.mutation[operation] = true;
-  } else {
-    mutation.mutation[operation] = {};
-  }
-  if (args) {
-    mutation.mutation[operation].__args = args;
-  }
-  let map = {};
-  let map_values = [];
-  fields.forEach((field) => {
-    if (typeof field === "string") {
-      mutation.mutation[operation][field] = true;
-    } else {
-      mutation.mutation.__variables = mutation.mutation.__variables || {};
-      let i = 0;
-      Object.entries(field.__variables).forEach(([key, value]) => {
-        mutation.mutation.__variables[key] = value.type;
-        map[i] = ["variables." + key];
-        map_values.push(value.value);
-        i++;
-      });
-    }
-  });
-  const graphql_query = jsonToGraphQLQuery(mutation);
-  let service = axios.create({
-    withCredentials: true
-  });
-  let data = null;
-  if (map_values.length) {
-    const fd = new FormData();
-    fd.append("operations", JSON.stringify({
-      query: graphql_query
-    }));
-    fd.append("map", JSON.stringify(map));
-    for (let i = 0; i < map_values.length; i++) {
-      fd.append(i.toString(), map_values[i]);
-    }
-    data = (await service.post(getApiBase(), fd)).data;
-  } else {
-    data = (await service.post(getApiBase(), {
-      query: graphql_query
-    })).data;
-  }
-  if (data.errors) {
-    throw new Error(data.errors[0].message);
-  }
-  return data.data[operation];
+import { mutation } from "@hostlink/light";
+export default function(operation, args, fields = []) {
+  return mutation(operation, args, fields);
 }

package/dist/runtime/lib/updateObject.mjs

@@ -1,19 +1,8 @@
-import { VariableType } from "json-to-graphql-query";
 import m from "./m.mjs";
 import { Dialog } from "quasar";
 export default async (name, id, data) => {
   try {
-    const variables = {};
-    Object.entries(data).forEach(([key, value]) => {
-      if (value instanceof File) {
-        variables[key] = {
-          type: "Upload!",
-          value
-        };
-        data[key] = new VariableType(key);
-      }
-    });
-    return await m(`update${name}`, { id, data }, [{ __variables: variables }]);
+    return await m(`update${name}`, { id, data });
   } catch (e) {
     Dialog.create({
       title: "Error",

package/dist/runtime/pages/EventLog/_eventlog_id/view.vue

@@ -1,6 +1,8 @@
 <script setup>
-import { getObject } from "../../../"
+import { getObject } from "#imports"
 const obj = await getObject(["eventlog_id", "class", "id", "action", "created_time", "username", "source", "target"]);
+
+const splitterModel = 50;
 </script>
 <template>
     <l-page>
@@ -13,27 +15,26 @@ const obj = await getObject(["eventlog_id", "class", "id", "action", "created_ti
                 <l-item label="Created time">{{ obj.created_time }}</l-item>
                 <l-item label="Username">{{ obj.username }}</l-item>
 
-                <q-item>
-                    <q-item-section>
-                        <q-item-label>{{ $t('Source') }}</q-item-label>
-                        <q-item-label caption>
-                            <pre>{{ obj.source }}</pre>
-                        </q-item-label>
-                    </q-item-section>
-                </q-item>
+            </l-list>
 
+            <q-splitter v-model="splitterModel" >
+                <template v-slot:before>
+                    <div class="q-pa-md">
+                        <div class="text-h6 q-mb-md">{{ $t('Source') }}</div>
+                        <pre>{{ obj.source }}</pre>
+                    </div>
+                </template>
 
-                <q-item>
-                    <q-item-section>
-                        <q-item-label>{{ $t('Target') }}</q-item-label>
-                        <q-item-label caption style="white-space: pre-wrap;">
-                            {{ obj.target }}
-                        </q-item-label>
-                    </q-item-section>
-                </q-item>
-            </l-list>
-        </l-card>
+                <template v-slot:after>
+                    <div class="q-pa-md">
+                        <div class="text-h6 q-mb-md">{{ $t('Target') }}</div>
+                        <pre>{{ obj.target }}
+                    </pre>
 
+                    </div>
+                </template>
+            </q-splitter>
+        </l-card>
 
     </l-page>
 </template>

package/dist/runtime/pages/System/fs.vue

@@ -60,14 +60,9 @@ const columns = [
 <template>
     <l-page>
 
-        <q-dialog v-model="dialog" persistent full-width>
-            <q-card>
-                <q-bar :class="`bg-${$light.color} text-white`">
-                    <q-space></q-space>
-                    <q-btn dense flat icon="close" v-close-popup>
-                        <q-tooltip>Close</q-tooltip>
-                    </q-btn>
-                </q-bar>
+        <q-dialog v-model="dialog" persistent>
+            <l-card style="width: 500px; max-width: 90vw;" :bordered="false" closeable>
+
 
                 <FormKit type="l-form" :value="value" @submit="onSubmit" #default="{ value }">
                     <FormKit type="l-input" label="Name" name="name" validation="required"></FormKit>
@@ -102,7 +97,7 @@ const columns = [
                     </FormKit>
 
                 </FormKit>
-            </q-card>
+            </l-card>
 
         </q-dialog>
         <template #header>
@@ -117,7 +112,9 @@ const columns = [
             </template>
 
             <template #body-cell-data="props">
-                <q-td><pre>{{ props.row.data }}</pre></q-td>
+                <q-td>
+                    <pre>{{ props.row.data }}</pre>
+                </q-td>
             </template>
 
         </l-table>

package/dist/runtime/pages/System/menu/index.vue

@@ -218,8 +218,8 @@ const menusOnly = computed(() => {
                 </q-card-section>
 
                 <q-card-actions align="right">
-                    <q-btn flat label="Cancel" color="primary" v-close-popup />
-                    <q-btn flat label="Move" color="primary" @click="onMoveConfirm" />
+                    <q-btn flat label="Cancel" :color="$light.color" v-close-popup />
+                    <q-btn flat label="Move" :color="$light.color" @click="onMoveConfirm" />
                     <!-- q-btn flat label="Move to root" color="primary" @click="onMoveToRoot" /-->
                 </q-card-actions>
             </l-card>

package/dist/runtime/pages/System/setting.vue

@@ -2,7 +2,6 @@
 import { ref } from 'vue'
 import { Notify } from 'quasar'
 import { reset } from "@formkit/core"
-import { useRouter } from 'vue-router'
 import { q, m } from '#imports'
 
 const { app } = await q({ app: { config: ["name", "value"] } })
@@ -69,7 +68,7 @@ const tab = ref('general')
 <template>
     <l-page>
 
-        <q-card flat bordered>
+        <l-card>
             <q-splitter unit="px" :model-value="120">
                 <template #before>
                     <q-tabs v-model="tab" vertical :active-color="$light.color">
@@ -80,7 +79,7 @@ const tab = ref('general')
                     </q-tabs>
                 </template>
                 <template #after>
-                    <FormKit type="l-form" :value="{
+                    <FormKit type="l-form" :bordered="false" :value="{
                         company: obj.company,
                         company_logo: obj.company_logo,
                         copyright_name: obj.copyright_name,
@@ -94,7 +93,7 @@ const tab = ref('general')
 
                     </FormKit>
 
-                    <FormKit type="l-form" :value="{
+                    <FormKit type="l-form" :bordered="false" :value="{
                         password_contains_uppercase: obj.password_contains_uppercase,
                         password_contains_lowercase: obj.password_contains_lowercase,
                         password_contains_numeric: obj.password_contains_numeric,
@@ -139,7 +138,7 @@ const tab = ref('general')
                             validation="required" />
                     </FormKit>
 
-                    <FormKit type="l-form" :value="{
+                    <FormKit type="l-form" :bordered="false" :value="{
                         file_manager: obj.file_manager,
 
                     }" v-if="tab == 'Modules'" @submit="onSubmit">
@@ -148,7 +147,7 @@ const tab = ref('general')
                         </q-field>
                     </FormKit>
 
-                    <FormKit type="l-form" :value="{
+                    <FormKit type="l-form" :bordered="false" :value="{
                         mode: obj.mode,
 
                     }" v-if="tab == 'Developer'" @submit="onSubmit">
@@ -156,11 +155,11 @@ const tab = ref('general')
                             { label: 'Production', value: 'prod' },
                             { label: 'Development', value: 'dev' },
 
-                        ]" name="mode" validation="required">
+                        ]" name="mode" validation="required" >
                         </FormKit>
                     </FormKit>
                 </template>
             </q-splitter>
-        </q-card>
+        </l-card>
     </l-page>
 </template>

package/dist/runtime/pages/User/setting/style.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { q, m } from '../../../'
+import { q, m } from '#imports'
 import { reactive } from 'vue'
 let my = await q("my", ["styles"]);
 
@@ -8,6 +8,9 @@ const styles = reactive({
     tableDense: my.styles.tableDense === undefined ? true : my.styles.tableDense,
     tableFlat: my.styles.tableFlat === undefined ? true : my.styles.tableFlat,
     tableBorder: my.styles.tableBorder === undefined ? true : my.styles.tableBorder,
+    tableSeparator: my.styles.tableSeparator === undefined ? 'cell' : my.styles.tableSeparator,
+
+
 
     cardFlat: my.styles.cardFlat === undefined ? true : my.styles.cardFlat,
     cardBordered: my.styles.cardBordered === undefined ? true : my.styles.cardBordered,
@@ -42,6 +45,7 @@ const setDefault = async () => {
     styles.tableDense = true;
     styles.tableFlat = true;
     styles.tableBorder = true;
+    styles.tableSeparator = 'cell';
 
     styles.cardFlat = true;
     styles.cardBordered = true;
@@ -65,84 +69,100 @@ const setDefault = async () => {
 }
 </script>
 <template>
-    <l-form @save="onSave" :bordered="false">
-        <div>
-            <q-checkbox v-model="styles.tableDense" label="Table dense" :color="$light.color" />
-            <q-checkbox v-model="styles.tableFlat" label="Table flat" :color="$light.color" />
-            <q-checkbox v-model="styles.tableBorder" label="Table bordered" :color="$light.color" />
-
-            <q-option-group v-model="styles.tableSeparator" inline class="q-mb-md" :options="[
-                { label: 'Horizontal', value: 'horizontal' },
-                { label: 'Vertical', value: 'vertical' },
-                { label: 'Cell', value: 'cell' },
-                { label: 'None', value: 'none' },
-            ]" :color="$light.color" />
-
-        </div>
-
-        <div>
-            <q-checkbox v-model="styles.cardFlat" label="Card flat" :color="$light.color"/>
-            <q-checkbox v-model="styles.cardBordered" label="Card bordered" :color="$light.color"/>
-            <q-checkbox v-model="styles.cardSquare" label="Card square" :color="$light.color"/>
-
-        </div>
-
-        <div>
-            <q-checkbox v-model="styles.buttonOutline" label="Button outline" :color="$light.color"/>
-            <q-checkbox v-model="styles.buttonRounded" label="Button rounded" :color="$light.color"/>
-            <q-checkbox v-model="styles.buttonUnelevated" label="Button unelevated" :color="$light.color"/>
-            <q-checkbox v-model="styles.buttonDense" label="Button dense" :color="$light.color"/>
-
-        </div>
-
-        <div>
-            <q-checkbox v-model="styles.inputFilled" label="Input filled" :color="$light.color"/>
-            <q-checkbox v-model="styles.inputOutlined" label="Input outlined" :color="$light.color"/>
-            <q-checkbox v-model="styles.inputStandout" label="Input standout" :color="$light.color"/>
-            <q-checkbox v-model="styles.inputRounded" label="Input rounded" :color="$light.color"/>
-            <q-checkbox v-model="styles.inputDense" label="Input dense" :color="$light.color"/>
-            <q-checkbox v-model="styles.inputSquare" label="Input square" :color="$light.color"/>
-            <q-checkbox v-model="styles.inputStackLabel" label="Input stack label" :color="$light.color"/>
-
-
-        </div>
-
-        <l-btn @click="setDefault()" icon="sym_o_refresh" label="Default"></l-btn>
-
-
-        <q-card bordered flat>
-            <q-card-section>
-                <div>
-                    UI preview
-                    <div class="q-gutter-md q-mt-md">
-
-                        <q-btn :color="$light.color" icon="sym_o_person" label="Button" :outline="styles.buttonOutline"
-                            :rounded="styles.buttonRounded" :unelevated="styles.buttonUnelevated"
-                            :dense="styles.buttonDense"></q-btn>
-
-                        <q-input label="Input" :filled="styles.inputFilled" :outlined="styles.inputOutlined"
-                            :standout="styles.inputStandout" :rounded="styles.inputRounded" :dense="styles.inputDense"
-                            :square="styles.inputSquare" :stack-label="styles.inputStackLabel">
-                            ></q-input>
-
-
-                        <q-table :rows="[
-                            { name: 'A', phone: '123' },
-                            { name: 'B', phone: '456' },
-                            { name: 'C', phone: '789' },
-                        ]" :flat="styles.tableFlat" :bordered="styles.tableBorder" :dense="styles.tableDense"
-                            :separator="styles.tableSeparator"></q-table>
-
-                    </div>
-
-
-
-
-
-                </div>
-            </q-card-section>
-
-        </q-card>
-
-    </l-form>
+    <div class="q-pa-md">
+        <l-row>
+            <l-col md="6">
+                <l-form @save="onSave" :bordered="false" class="q-ma-none">
+                    <l-card title="Table" minimizable>
+                        <q-card-section>
+                            <q-toggle v-model="styles.tableDense" label="Dense" :color="$light.color" />
+                            <q-toggle v-model="styles.tableFlat" label="Flat" :color="$light.color" />
+                            <q-toggle v-model="styles.tableBorder" label="Bordered" :color="$light.color" />
+
+                            <q-field :label="`Separator`" stack-label :color="$light.color">
+                                <q-option-group v-model="styles.tableSeparator" inline :options="[
+                                    { label: 'Horizontal', value: 'horizontal' },
+                                    { label: 'Vertical', value: 'vertical' },
+                                    { label: 'Cell', value: 'cell' },
+                                    { label: 'None', value: 'none' },
+                                ]" :color="$light.color" />
+                            </q-field>
+                        </q-card-section>
+                    </l-card>
+
+                    <l-card title="Card" minimizable>
+                        <q-card-section>
+                            <q-toggle v-model="styles.cardFlat" label="Flat" :color="$light.color" />
+                            <q-toggle v-model="styles.cardBordered" label="Bordered" :color="$light.color" />
+                            <q-toggle v-model="styles.cardSquare" label="Square" :color="$light.color" />
+                        </q-card-section>
+                    </l-card>
+
+                    <l-card title="Button" minimizable>
+                        <q-card-section>
+                            <q-toggle v-model="styles.buttonOutline" label="Outline" :color="$light.color" />
+                            <q-toggle v-model="styles.buttonRounded" label="Rounded" :color="$light.color" />
+                            <q-toggle v-model="styles.buttonUnelevated" label="Unelevated" :color="$light.color" />
+                            <q-toggle v-model="styles.buttonDense" label="Dense" :color="$light.color" />
+                        </q-card-section>
+                    </l-card>
+
+                    <l-card title="Input" minimizable>
+                        <q-card-section>
+                            <q-toggle v-model="styles.inputFilled" label="Filled" :color="$light.color" />
+                            <q-toggle v-model="styles.inputOutlined" label="Outlined" :color="$light.color" />
+                            <q-toggle v-model="styles.inputStandout" label="Standout" :color="$light.color" />
+                            <q-toggle v-model="styles.inputRounded" label="Rounded" :color="$light.color" />
+                            <q-toggle v-model="styles.inputDense" label="Dense" :color="$light.color" />
+                            <q-toggle v-model="styles.inputSquare" label="Square" :color="$light.color" />
+                            <q-toggle v-model="styles.inputStackLabel" label="Stack label" :color="$light.color" />
+                        </q-card-section>
+                    </l-card>
+
+                    <l-btn @click="setDefault()" icon="sym_o_refresh" label="Default"></l-btn>
+
+
+
+                </l-form>
+            </l-col>
+
+            <l-col md="6">
+                <q-card :bordered="styles.cardBordered" :flat="styles.cardFlat" :square="styles.cardSquare">
+                    <q-card-section>
+                        <div>
+                            UI preview
+                            <div class="q-gutter-md q-mt-sm">
+
+                                <q-btn :color="$light.color" icon="sym_o_person" label="Button"
+                                    :outline="styles.buttonOutline" :rounded="styles.buttonRounded"
+                                    :unelevated="styles.buttonUnelevated" :dense="styles.buttonDense"></q-btn>
+
+                                <q-input label="Input" :filled="styles.inputFilled" :outlined="styles.inputOutlined"
+                                    :standout="styles.inputStandout" :rounded="styles.inputRounded"
+                                    :dense="styles.inputDense" :square="styles.inputSquare"
+                                    :stack-label="styles.inputStackLabel">
+                                    ></q-input>
+
+                                <q-table :rows="[
+                                    { name: 'A', phone: '123' },
+                                    { name: 'B', phone: '456' },
+                                    { name: 'C', phone: '789' },
+                                ]" :flat="styles.tableFlat" :bordered="styles.tableBorder" :dense="styles.tableDense"
+                                    :separator="styles.tableSeparator"></q-table>
+
+                            </div>
+
+
+
+
+
+                        </div>
+                    </q-card-section>
+
+                </q-card>
+
+            </l-col>
+
+        </l-row>
+    </div>
 </template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hostlink/nuxt-light",
-  "version": "1.6.4",
+  "version": "1.6.6",
   "description": "HostLink Nuxt Light Framework",
   "repository": "@hostlink/nuxt-light",
   "license": "MIT",
@@ -34,7 +34,7 @@
     "route-gen": "node route-generate.mjs"
   },
   "dependencies": {
-    "@hostlink/light": "^1.0.0",
+    "@hostlink/light": "^1.2.1",
     "@nuxt/kit": "^3.7.4",
     "@nuxt/module-builder": "^0.5.2",
     "@quasar/extras": "^1.16.6",