@hostlink/nuxt-light 0.0.35 → 0.0.37

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "light",
   "configKey": "light",
-  "version": "0.0.35"
+  "version": "0.0.37"
 }

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

@@ -1,24 +1,28 @@
 <script setup>
 import { useRoute } from "vue-router"
-import { useI18n } from "vue-i18n"
-const i18n = useI18n()
 const route = useRoute();
 
 //get relative path
 const relativePath = route.path.split("/").slice(1).join("/");
 
-const props = defineProps(["label", "to"]);
-
-const label = i18n.t(props.label ?? "Add");
+const props = defineProps({
+    label: {
+        type: String,
+        default: "Add"
+    },
+    to: {
+        type: String,
+        default: null
+    }
+});
 
 const to = props.to ?? relativePath + "/add";
 
-
 </script>
 <template>
-    <q-btn rounded outline color="primary" icon="sym_o_add" :to="to" :label="label">
+    <l-btn color="primary" icon="sym_o_add" :to="to" :label="label">
         <q-tooltip>
-            {{ label }}
+            {{ $t(label) }}
         </q-tooltip>
-    </q-btn>
+    </l-btn>
 </template>

package/dist/runtime/components/l-app-main.vue

@@ -3,19 +3,24 @@ import { useQuasar } from 'quasar';
 import { useI18n } from 'vue-i18n';
 import { useLight, q, getCurrentUser, m, f } from '../';
 import { ref, computed, reactive, provide, watch } from 'vue';
-//import packageJson from '../../package.json'
 
 const quasar = useQuasar();
 quasar.dark.set(false);
 const light = useLight();
+
 const props = defineProps({
     company: {
         type: String
     }
 });
 
-let app = await q("app", ["menus", "viewAsMode", "languages"]);
-let my = await q("my", ["styles", "language", f('granted_storage:granted', { right: "system.storage" }, [])]);
+const tt = await q({
+    app: ["menus", "viewAsMode", "languages"],
+    my: ["styles", "language", f('granted_storage:granted', { right: "system.storage" }, [])],
+})
+
+let app = tt.app
+let my = tt.my
 let system = null
 if (my.granted_storage) {
     system = await q("system", ["diskFreeSpace", "diskUsageSpace", "diskTotalSpace", "diskFreeSpacePercent"]);
@@ -322,7 +327,7 @@ const storageUsagePercent = computed(() => {
         <q-footer class="bg-white text-grey" bordered>
             <q-item>
                 <q-item-section>
-                    {{ company }} 0.0.1 - Copyright 2023 HostLink(HK)
+                    {{ company }} {{ light.getVersion() }} - Copyright 2023 HostLink(HK)
                 </q-item-section>
             </q-item>
         </q-footer>

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

@@ -1,7 +1,7 @@
 <template>
     <q-btn flat round dense icon="sym_o_arrow_back" @click="$router.back()">
         <q-tooltip>
-            Back
+            {{ $t('Back') }}
         </q-tooltip>
     </q-btn>
 </template>

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

@@ -1,11 +1,13 @@
 <script setup>
-import { ref } from "vue";
-import { q, f } from '../';
+import { ref, useAttrs } from "vue";
+import { q, f, useLight } from '../';
 import { useI18n } from "vue-i18n"
 const i18n = useI18n()
 
 const props = defineProps(["permission", "label"]);
 
+const light = useLight();
+
 const label = i18n.t(props.label);
 
 const granted = ref(false);
@@ -20,10 +22,20 @@ if (props.permission) {
 }
 
 
+const attrs = {
+    ...{
+        rounded: light.getStyle("buttonRounded", true),
+        outline: light.getStyle("buttonOutline", true),
+        unelevated: light.getStyle("buttonUnelevated", false),
+        dense: light.getStyle("buttonDense", false),
+    },
+    ...useAttrs(),
+}
+
 
 </script>
 <template>
-    <q-btn rounded outline color="primary" v-if="granted" :label="label">
+    <q-btn v-bind="attrs" color="primary" v-if="granted" :label="$t(label)">
 
         <slot></slot>
     </q-btn>

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

@@ -1,17 +1,26 @@
 <script setup>
+import { useLight } from '../'
+import { useAttrs } from 'vue'
 
 defineProps({
     loading: Boolean,
 })
 
+const light = useLight();
+
+
+const attrs = {
+    ...{
+        flat: light.getStyle("cardFlat", true),
+        bordered: light.getStyle("cardBordered", true),
+        square: light.getStyle("cardSquare", false),
+    }, ...useAttrs()
 
-const save = () => {
-    console.log("save")
 }
 
 </script>
 <template>
-    <q-card flat bordered>
+    <q-card v-bind="attrs">
         <slot></slot>
 
         <q-inner-loading :showing="loading" label="Please wait..." label-class="text-primary" />

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

@@ -1,14 +1,28 @@
 <script setup>
+import { computed } from 'vue'
 const props = defineProps({
     md: {
         type: [Number, String],
         default: 12
+    },
+    gutter: {
+        type: String,
+        default: "none"
+    }
+})
+
+const classes = computed(() => {
+    return {
+        [`col-md-${props.md}`]: true
     }
 })
 
 </script>
 <template>
-    <div class="col-12" :class="'col-md-' + props.md">
-        <slot></slot>
+    <div class="col-12" :class="classes">
+        <div :class="`q-gutter-${props.gutter}`">
+            <slot></slot>
+        </div>
+
     </div>
 </template>

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

@@ -1,6 +1,10 @@
 <script setup>
-import { ref, computed } from "vue";
-import { t } from '../';
+import { ref, computed, useAttrs } from "vue";
+import { useLight } from '../';
+
+const i18n = useI18n();
+const light = useLight();
+
 const props = defineProps({
     modelValue: {
         type: [String, Object],
@@ -53,15 +57,22 @@ if (props.required && !props.range) {
     });
 }
 
-const localLabel = computed(() => {
-
-    return t(props.label);
-
-});
+const attrs = {
+    ...{
+        filled: light.getStyle("inputFilled", false),
+        outlined: light.getStyle("inputOutlined", true),
+        standout: light.getStyle("inputStandout", false),
+        rounded: light.getStyle("inputRounded", false),
+        dense: light.getStyle("inputDense", false),
+        square: light.getStyle("inputSquare", false),
+        stackLabel: light.getStyle("inputStackLabel", false)
+    },
+    ...useAttrs(),
+}
 
 </script>
 <template>
-    <q-input v-model="localValue" :rules="rules" :label="localLabel" hide-bottom-space>
+    <q-input v-bind="attrs" v-model="localValue" :rules="rules" :label="$t(label)" hide-bottom-space>
         <template v-slot:prepend>
             <q-btn icon="sym_o_event" round dense flat>
                 <q-popup-proxy cover transition-show="scale" transition-hide="scale" ref="popup">

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

@@ -16,6 +16,10 @@ const props = defineProps({
     bordered: {
         type: Boolean,
         default: true
+    },
+    gutter: {
+        type: String,
+        default: "md"
     }
 });
 
@@ -33,7 +37,7 @@ const save = async () => {
 
     if (props.modelValue) {
         const [module, id_name] = route.name.split("-");
-        
+
 
         if (route.params[id_name]) {//edit
 
@@ -71,7 +75,10 @@ const onSubmit = (e) => {
     <q-form ref="form" @submit="onSubmit">
         <l-card :bordered="bordered">
             <q-card-section>
-                <slot></slot>
+                <div :class="`q-gutter-${gutter}`">
+                    <slot></slot>
+                </div>
+
             </q-card-section>
 
             <q-card-actions align="right">

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

@@ -1,9 +1,12 @@
 <script setup>
-import { computed, ref } from "vue";
+import { computed, ref, useSlots, useAttrs } from "vue";
 import { useI18n } from 'vue-i18n';
 import tc2sc from "../lib/tc2sc";
+import { useLight } from '../';
 
 const i18n = useI18n();
+const light = useLight();
+const slots = useSlots();
 
 const props = defineProps({
     modelValue: {
@@ -98,10 +101,23 @@ const onClickTc2Sc = () => {
 }
 
 
+
+const attrs = {
+    ...{
+        filled: light.getStyle("inputFilled", false),
+        outlined: light.getStyle("inputOutlined", false),
+        standout: light.getStyle("inputStandout", false),
+        rounded: light.getStyle("inputRounded", false),
+        dense: light.getStyle("inputDense", false),
+        square: light.getStyle("inputSquare", false),
+        stackLabel: light.getStyle("inputStackLabel", false)
+    },
+    ...useAttrs(),
+}
 </script>
 <template>
-    <q-input :label="localLabel" v-model="localValue" hide-bottom-space :rules="new_rules" :type="localType">
-
+    {{ slotNames }}
+    <q-input v-bind="attrs" :label="localLabel" v-model="localValue" :rules="new_rules" hide-bottom-space :type="localType">
         <template v-if="translate" #prepend>
             <q-btn icon="sym_o_translate" flat dense rounded>
                 <q-menu dens>
@@ -121,5 +137,6 @@ const onClickTc2Sc = () => {
             <q-icon name="sym_o_visibility_off" class="cursor-pointer" :color="showPassword ? 'grey-5' : 'primary'"
                 @click="isShowPassword = true" v-else />
         </template>
+
     </q-input>
 </template>

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

@@ -1,14 +1,16 @@
 <script setup>
 import { ref, reactive } from 'vue'
 import { useQuasar } from 'quasar';
+import { useI18n } from 'vue-i18n';
 import { login, m, notify } from '../';
+
 defineProps({
   company: String,
   companyLogo: String,
   twoFactorAuthentication: Boolean
-
 })
 
+const i18n = useI18n();
 const form1 = ref(null);
 const data = reactive({
   username: "", password: "", code: ""
@@ -32,7 +34,7 @@ const forgetPassword = async () => {
 
   //show dialog
   qua.dialog({
-    title: "Forget password",
+    title: i18n.t("Forget password"),
     message: "Please enter your email address, we will send you a code to reset your password",
     prompt: {
       model: "",
@@ -105,23 +107,26 @@ const forgetPassword = async () => {
 </script>
 
 <template>
-  <q-card bordered flat style="min-width:400px;max-width: 400px;" class="fixed-center ">
+  <q-card bordered flat style="min-width:400px;max-width: 400px;" class="fixed-center">
     <q-card-section>
       <q-img :src="companyLogo" class="full-width" />
       <div class="text-h6">
         {{ company }}
       </div>
       <q-form ref="form1">
-        <l-input v-model.trim="data.username" label="Username" :rules="[v => !!v || 'Username is required']" clearable />
-        <l-input v-model="data.password" label="Password" type="password" clearable show-password
-          :rules="[v => !!v || 'Password is required']" @keydown.enter.prevent="submit" />
-        <q-input v-if="twoFactorAuthentication" v-model="data.code" label="2FA code" required type="text" clearable>
-        </q-input>
+        <div class="q-gutter-sm">
+          <l-input v-model.trim="data.username" label="Username" :rules="[v => !!v || $t('Username is required')]"
+            clearable />
+          <l-input v-model="data.password" label="Password" type="password" clearable show-password
+            :rules="[v => !!v || $t('Password is required')]" @keydown.enter.prevent="submit" />
+          <l-input v-if="twoFactorAuthentication" v-model="data.code" label="2FA code" required type="text" clearable>
+          </l-input>
+        </div>
       </q-form>
     </q-card-section>
     <q-card-actions>
-      <q-btn label="Login" outline rounded color="primary" icon="sym_o_login" @click="submit"/>
-      <q-btn label="Forget password" outline rounded color="primary" icon="sym_o_lock_reset" @click="forgetPassword" />
+      <l-btn label="Login" outline rounded color="primary" icon="sym_o_login" @click="submit" />
+      <l-btn label="Forget password" outline rounded color="primary" icon="sym_o_lock_reset" @click="forgetPassword" />
     </q-card-actions>
   </q-card>
 </template>

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

@@ -1,3 +1,3 @@
 <template>
-    <q-btn outline color="primary" rounded icon="sym_o_save" :label="$t('Save')" />
+    <l-btn color="primary" icon="sym_o_save" label="Save" />
 </template>

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

@@ -1,8 +1,9 @@
 <script setup>
-import { computed, ref } from "vue";
-import { t } from '../'
-const props = defineProps({
+import { computed, ref, useAttrs } from "vue";
+import { useLight } from '../';
 
+const light = useLight();
+const props = defineProps({
     rules: {
         type: Array,
         default: () => []
@@ -25,8 +26,6 @@ const props = defineProps({
     },
 })
 
-
-
 if (props.required) {
     props.rules.push((val) => {
         if (Number.isInteger(val)) {
@@ -49,28 +48,32 @@ const filterFn = (val, update, abort) => {
     }
 
     update(() => {
-
         const needle = val.toLowerCase();
-
         select_options.value = props.options.filter(v => v[props.optionLabel].toLowerCase().indexOf(needle) > -1);
-
-
-
-
     })
 }
 
 
-const localLabel = computed(() => {
-    return t(props.label);
-});
 
 const clearable = computed(() => {
     return !props.required;
 });
 
+const attrs = {
+    ...{
+        filled: light.getStyle("inputFilled", false),
+        outlined: light.getStyle("inputOutlined", true),
+        standout: light.getStyle("inputStandout", false),
+        rounded: light.getStyle("inputRounded", false),
+        dense: light.getStyle("inputDense", false),
+        square: light.getStyle("inputSquare", false),
+        stackLabel: light.getStyle("inputStackLabel", false)
+    },
+    ...useAttrs(),
+}
+
 </script>
 <template>
-    <q-select :label="localLabel" emit-value map-options :options="select_options" @filter="filterFn"
+    <q-select v-bind="attrs" :label="$t(label)" emit-value map-options :options="select_options" @filter="filterFn"
         :option-label="optionLabel" hide-bottom-space :rules="rules" :clearable="clearable" />
 </template>

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

@@ -10,7 +10,7 @@ const errors = ref<InstanceType<any>>([]);
 
 const light = useLight();
 
-const tableDense = light.getStyle("tableDense") ?? false;
+
 
 const props = defineProps({
     columns: {
@@ -337,7 +337,10 @@ const onDelete = async (id: any) => {
 
 
 
-
+//style
+const dense = light.getStyle("tableDense", false);
+const flat = light.getStyle("tableFlat", true);
+const bordered = light.getStyle("tableBorder", true);
 </script>
 <template>
     <template v-if="errors.length > 0">
@@ -347,8 +350,8 @@ const onDelete = async (id: any) => {
             </ul>
         </div>
     </template>
-    <q-table flat bordered :dense="tableDense" :columns="renderColumns" v-model:pagination="pagination" ref="table"
-        :loading="loading" @request="onRequest" :selection="selection" :rows="rows"
+    <q-table :flat="flat" :bordered="bordered" :dense="dense" :columns="renderColumns" v-model:pagination="pagination"
+        ref="table" :loading="loading" @request="onRequest" :selection="selection" :rows="rows"
         :rows-per-page-label="t(props.rowsPerPageLabel)">
 
         <template v-for="s in ss" v-slot:[s]="props">

package/dist/runtime/index.d.ts

@@ -2,7 +2,7 @@ interface Light {
     addError: (error: String) => void;
     getErrors: () => String[];
     removeError: (error: String) => void;
-    getStyle: (name: String) => any;
+    getStyle: (name: String, defaultValue: any) => any;
     setStyles: (styles: Object) => void;
     getVersion(): string;
 }

package/dist/runtime/index.mjs

@@ -18,7 +18,10 @@ export function useLight() {
         errors.splice(index, 1);
       }
     },
-    getStyle(name) {
+    getStyle(name, defaultdefaultValue) {
+      if (styles[name] === void 0) {
+        return defaultdefaultValue;
+      }
       return styles[name];
     },
     setStyles(s) {

package/dist/runtime/locales/zh-hk.json

@@ -147,5 +147,9 @@
     "Server": "伺服器",
     "Remove": "移除",
     "Records per page:": "每頁顯示:",
-    "storage_usage": "剩餘 {0}, 共 {1}"
+    "storage_usage": "剩餘 {0}, 共 {1}",
+    "Login": "登入",
+    "Forget password": "忘記密碼",
+    "Password is required": "密碼為必填",
+    "Username is required": "使用者名稱為必填"
 }

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

@@ -219,12 +219,12 @@ const onAddChildMenu = (node, type) => {
         <l-card>
             <q-splitter v-model="splitterModel" style="height:680px">
                 <template #before>
-                    <q-card-section>
+                    <q-card-actions>
                         <l-btn @click="onAdd" label="Add" icon="sym_o_add" />
                         <l-btn @click="onReload" label="Reload" icon="sym_o_refresh" />
 
                         <l-btn @click="onSave" label="Save" icon="sym_o_save" />
-                    </q-card-section>
+                    </q-card-actions>
 
                     <q-tree :nodes="menus" selected-color="primary" default-expand-all v-model:selected="selected"
                         node-key="uuid" ref="tree1" />
@@ -232,9 +232,10 @@ const onAddChildMenu = (node, type) => {
 
                 <template #after v-if="selected">
 
-                    <q-card-section>
+                    <q-card-actions>
                         <l-btn outline rounded color="primary" @click="onRemove(selectedNode)" label="Remove"
                             icon="sym_o_remove" />
+
                         <l-btn outline rounded color="primary" @click="onAddChild(selectedNode)" label="Add Child"
                             icon="sym_o_add" />
 
@@ -266,18 +267,17 @@ const onAddChildMenu = (node, type) => {
                         </q-btn-dropdown>
 
 
-                    </q-card-section>
+                    </q-card-actions>
 
 
                     <q-card-section>
-                        <q-form>
+                        <div class="q-gutter-md">
                             <l-input label="Label" v-model="selectedNode.label" />
                             <l-input label="To" v-model="selectedNode.to" />
-                            <l-input label="Icon" v-model="selectedNode.icon" />
+                            <l-input label="Icon" v-model="selectedNode.icon" hint="example: sym_o_add"/>
                             <l-input label="Permission" v-model="selectedNode.permission" />
                             <l-input label="UUID" v-model="selectedNode.uuid" readonly />
-
-                        </q-form>
+                        </div>
                     </q-card-section>
                 </template>
 

package/dist/runtime/pages/User/_user_id/edit.vue

@@ -8,20 +8,20 @@ const obj = reactive(await getObject(["first_name", "last_name", "email", "phone
 
 <template>
     <l-page>
-        <l-form v-model="obj">
+        <l-form v-model="obj" gutter="none">
             <l-row>
-                <l-col md="6">
+                <l-col md="6" gutter="md">
                     <l-input label="First name" v-model="obj.first_name" required />
                     <l-input label="Last name" v-model="obj.last_name" />
                     <l-input label="Email" v-model="obj.email" required type="email" />
                 </l-col>
-                <l-col md="6">
+                <l-col md="6" gutter="md">
                     <l-input label="Phone" v-model="obj.phone" />
                     <l-input label="Address1" v-model="obj.addr1" />
                     <l-input label="Address2" v-model="obj.addr2" />
                     <l-input label="Address3" v-model="obj.addr3" />
                 </l-col>
-                <l-col>
+                <l-col gutter="md">
                     <l-date-picker label="Join date" v-model="obj.join_date" required />
                     <l-date-picker label="Expiry date" v-model="obj.expiry_date" />
 
@@ -40,12 +40,7 @@ const obj = reactive(await getObject(["first_name", "last_name", "email", "phone
 
 
                 </l-col>
-
-
             </l-row>
-
-
-
         </l-form>
     </l-page>
 </template>

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

@@ -21,23 +21,22 @@ roles = roles.map((role) => {
 </script>
 <template>
     <l-page>
-        <l-form v-model="obj">
+        <l-form v-model="obj" gutter="none">
             <l-row>
-                <l-col md="6">
+                <l-col md="6" gutter="md">
                     <l-input label="Username" v-model="obj.username" required />
                     <l-input label="Password" v-model="obj.password" required type="password" />
                     <l-input label="First name" v-model="obj.first_name" required />
                     <l-input label="Last name" v-model="obj.last_name" />
                     <l-input label="Email" v-model="obj.email" required type="email" />
-
                 </l-col>
-                <l-col md="6">
+                <l-col md="6" gutter="md">
                     <l-input label="Phone" v-model="obj.phone" />
                     <l-input label="Address1" v-model="obj.addr1" />
                     <l-input label="Address2" v-model="obj.addr2" />
                     <l-input label="Address3" v-model="obj.addr3" />
                 </l-col>
-                <l-col>
+                <l-col gutter="md">
                     <l-date-picker label="Join date" v-model="obj.join_date" required />
                     <l-date-picker label="Expiry date" v-model="obj.expiry_date" />
 
@@ -63,14 +62,8 @@ roles = roles.map((role) => {
                         <q-option-group type="checkbox" :options="roles" v-model="obj.roles" inline>
                         </q-option-group>
                     </q-field>
-
                 </l-col>
-
-
             </l-row>
-
-
-
         </l-form>
     </l-page>
 </template>

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

@@ -27,8 +27,7 @@ const save = async () => {
     <l-form @save="save" :bordered="false">
         <l-input label="Username" v-model="obj.username" readonly></l-input>
         <l-input label="Email" v-model="obj.email" required></l-input>
-        <l-input label="First Name" v-model="obj.first_name" required></l-input>
-        <l-input label="Last Name" v-model="obj.last_name"></l-input>
-
+        <l-input label="First name" v-model="obj.first_name" required></l-input>
+        <l-input label="Last name" v-model="obj.last_name"></l-input>
     </l-form>
 </template>

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

@@ -4,18 +4,131 @@ import { reactive } from 'vue'
 let my = await q("my", ["styles"]);
 
 const styles = reactive({
-    tableDense: my.styles.tableDense,
+
+    tableDense: my.styles.tableDense === undefined ? false : my.styles.tableDense,
+    tableFlat: my.styles.tableFlat === undefined ? true : my.styles.tableFlat,
+    tableBorder: my.styles.tableBorder === undefined ? true : my.styles.tableBorder,
+
+    cardFlat: my.styles.cardFlat === undefined ? true : my.styles.cardFlat,
+    cardBordered: my.styles.cardBordered === undefined ? true : my.styles.cardBordered,
+    cardSquare: my.styles.cardSquare === undefined ? false : my.styles.cardSquare,
+
+    buttonOutline: my.styles.buttonOutline === undefined ? true : my.styles.buttonOutline,
+    buttonRounded: my.styles.buttonRounded === undefined ? true : my.styles.buttonRounded,
+    buttonUnelevated: my.styles.buttonUnelevated === undefined ? false : my.styles.buttonUnelevated,
+    buttonDense: my.styles.buttonDense === undefined ? false : my.styles.buttonDense,
+
+    inputFilled: my.styles.inputFilled === undefined ? false : my.styles.inputFilled,
+    inputOutlined: my.styles.inputOutlined === undefined ? false : my.styles.inputOutlined,
+    inputStandout: my.styles.inputStandout === undefined ? false : my.styles.inputStandout,
+    inputRounded: my.styles.inputRounded === undefined ? false : my.styles.inputRounded,
+    inputDense: my.styles.inputDense === undefined ? false : my.styles.inputDense,
+    inputSquare: my.styles.inputSquare === undefined ? false : my.styles.inputSquare,
+    inputStackLabel: my.styles.inputStackLabel === undefined ? false : my.styles.inputStackLabel,
+
 })
 
 const onSave = async () => {
-    await m("updateMyStyle", {
-        name: "tableDense",
-        value: styles.tableDense
+    await m("updateMyStyles", {
+        value: styles
     });
+
+    //reload
+    window.location.reload();
+}
+
+const setDefault = async () => {
+
+    styles.tableDense = false;
+    styles.tableFlat = true;
+    styles.tableBorder = true;
+
+    styles.cardFlat = true;
+    styles.cardBordered = true;
+    styles.cardSquare = false;
+
+    styles.buttonOutline = true;
+    styles.buttonRounded = true;
+    styles.buttonUnelevated = false;
+    styles.buttonDense = false;
+
+    styles.inputFilled = false;
+    styles.inputOutlined = false;
+    styles.inputStandout = false;
+    styles.inputRounded = false;
+    styles.inputDense = false;
+    styles.inputSquare = false;
+    styles.inputStackLabel = false;
+
+
+
 }
 </script>
 <template>
     <l-form @save="onSave" :bordered="false">
-        <q-checkbox v-model="styles.tableDense" label="Dense table" />
+        <div>
+            <q-checkbox v-model="styles.tableDense" label="Table dense" />
+            <q-checkbox v-model="styles.tableFlat" label="Table flat" />
+            <q-checkbox v-model="styles.tableBorder" label="Table bordered" />
+
+        </div>
+
+        <div>
+            <q-checkbox v-model="styles.cardFlat" label="Card flat" />
+            <q-checkbox v-model="styles.cardBordered" label="Card bordered" />
+            <q-checkbox v-model="styles.cardSquare" label="Card square" />
+
+        </div>
+
+        <div>
+            <q-checkbox v-model="styles.buttonOutline" label="Button outline" />
+            <q-checkbox v-model="styles.buttonRounded" label="Button rounded" />
+            <q-checkbox v-model="styles.buttonUnelevated" label="Button unelevated" />
+            <q-checkbox v-model="styles.buttonDense" label="Button dense" />
+
+        </div>
+
+        <div>
+            <q-checkbox v-model="styles.inputFilled" label="Input filled" />
+            <q-checkbox v-model="styles.inputOutlined" label="Input outlined" />
+            <q-checkbox v-model="styles.inputStandout" label="Input standout" />
+            <q-checkbox v-model="styles.inputRounded" label="Input rounded" />
+            <q-checkbox v-model="styles.inputDense" label="Input dense" />
+            <q-checkbox v-model="styles.inputSquare" label="Input square" />
+            <q-checkbox v-model="styles.inputStackLabel" label="Input stack label" />
+
+
+        </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="primary" 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>
+
+
+                    </div>
+
+
+
+
+
+                </div>
+            </q-card-section>
+
+        </q-card>
+
     </l-form>
 </template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hostlink/nuxt-light",
-  "version": "0.0.35",
+  "version": "0.0.37",
   "description": "HostLink Nuxt Light Framework",
   "repository": "@hostlink/nuxt-light",
   "license": "MIT",