@hostlink/nuxt-light 0.0.112 → 0.0.114

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "light",
   "configKey": "light",
-  "version": "0.0.112"
+  "version": "0.0.114"
 }

package/dist/runtime/assets/main.css

@@ -1,17 +1 @@
-body {
-    font-family: Noto Sans, Noto Sans HK, Noto Sans TC, -apple-system, Helvetica Neue, Helvetica, Arial, sans-serif;
-}
-
-/* :root {
-    --color-primary: 115 103 240;
-    --color-secondary: 40 199 111;
-    --color-warning: 255 159 67;
-    --color-danger: 234 85 85;
-    --color-error: 245 108 108;
-    --color-info: 0 207 232;
-}
- */
-
-.q-card__actions .q-btn--rectangle {
-    padding: 4px 16px;
-}
+body{font-family:Noto Sans,Noto Sans HK,Noto Sans TC,-apple-system,Helvetica Neue,Helvetica,Arial,sans-serif}.q-card__actions .q-btn--rectangle{padding:4px 16px}.q-table--dense .q-table td,.q-table--dense .q-table td:first-child,.q-table--dense .q-table th,.q-table--dense .q-table th:first-child{padding:2px 4px}.q-tab-panel{padding:8px}

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

@@ -66,13 +66,13 @@ if (!props.range) {
 
 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)
+        filled: light.getStyle("inputFilled"),
+        outlined: light.getStyle("inputOutlined"),
+        standout: light.getStyle("inputStandout"),
+        rounded: light.getStyle("inputRounded"),
+        dense: light.getStyle("inputDense"),
+        square: light.getStyle("inputSquare"),
+        stackLabel: light.getStyle("inputStackLabel")
     },
     ...useAttrs(),
 }

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

@@ -1,8 +1,17 @@
 <script setup>
+import { useLight, useAttrs } from '#imports';
 const props = defineProps(['label']);
+const light = useLight();
+
+const attrs = {
+    ...{
+        outlined: light.getStyle("inputOutlined"),
+    },
+    ...useAttrs()
+}
 </script>
 <template>
-    <q-field :label="$t(props.label ?? '')">
+    <q-field v-bind="attrs" :label="$t(props.label ?? '')">
         <slot></slot>
     </q-field>
 </template>

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

@@ -673,8 +673,6 @@ const isDark = computed(() => light.isDarkMode());
   </q-layout>
 </template>
 
-<style>
-.q-item--active {
-  background-color: #e0e0e0;
-}
+<style>
+.q-item--active{background-color:#e0e0e0}
 </style>

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

@@ -154,13 +154,13 @@ 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)
+        filled: light.getStyle("inputFilled"),
+        outlined: light.getStyle("inputOutlined"),
+        standout: light.getStyle("inputStandout"),
+        rounded: light.getStyle("inputRounded"),
+        dense: light.getStyle("inputDense"),
+        square: light.getStyle("inputSquare"),
+        stackLabel: light.getStyle("inputStackLabel")
     },
     ...useAttrs(),
 }

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

@@ -29,7 +29,7 @@ function getTo(field) {
 
 </script>
 <template>
-    <q-list bordered separator>
+    <q-list bordered separator dense >
         <template v-if="fields">
             <l-item v-for="field in fields" :label="field.getRaw().label" :to="getTo(field)">
                 {{ field.getFormattedValue(props.modelValue) }}

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

@@ -186,9 +186,9 @@ onMounted(() => {
       <q-form ref="form1">
         <div class="q-gutter-sm">
           <l-input v-model.trim="data.username" label="Username" :rules="[v => !!v || $t('Username is required')]"
-            clearable />
+            clearable :outlined="false" />
           <l-input v-model="data.password" label="Password" type="password" clearable show-password
-            :rules="[v => !!v || $t('Password is required')]" @keydown.enter.prevent="submit" />
+            :rules="[v => !!v || $t('Password is required')]" @keydown.enter.prevent="submit" :outlined="false" />
           <l-input v-if="twoFactorAuthentication" v-model="data.code" label="2FA code" required type="text" clearable>
           </l-input>
         </div>

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

@@ -27,17 +27,8 @@ defineExpose({
 
 </script>
 
-<style scoped>
-.menu-list .q-item {
-    border-radius: 24px 24px 24px 24px;
-}
-
-.menu-list .q-router-link--exact-active {
-    background: linear-gradient(118deg,
-            var(--q-primary),
-            rgba(115, 103, 240, 0.7));
-    color: #fff;
-}
+<style scoped>
+.menu-list .q-item{border-radius:24px 24px 24px 24px}.menu-list .q-router-link--exact-active{background:linear-gradient(118deg,var(--q-primary),rgba(115,103,240,.7));color:#fff}
 </style>
 <template>
     <q-expansion-item v-if="value.children?.length > 0" :label="$t(value.label)" :icon="value.icon" :dense="dense"

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

@@ -61,13 +61,13 @@ const clearable = computed(() => {
 
 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)
+        filled: light.getStyle("inputFilled"),
+        outlined: light.getStyle("inputOutlined"),
+        standout: light.getStyle("inputStandout"),
+        rounded: light.getStyle("inputRounded"),
+        dense: light.getStyle("inputDense"),
+        square: light.getStyle("inputSquare"),
+        stackLabel: light.getStyle("inputStackLabel")
     },
     ...useAttrs(),
 }

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

@@ -434,9 +434,10 @@ const onDelete = async (id: any) => {
 
 const attrs = {
     ...{
-        dense: light.getStyle("tableDense", false),
-        flat: light.getStyle("tableFlat", true),
-        bordered: light.getStyle("tableBorder", true),
+        dense: light.getStyle("tableDense"),
+        flat: light.getStyle("tableFlat"),
+        bordered: light.getStyle("tableBorder"),
+        separator: light.getStyle("tableSeparator"),
     },
     ...useAttrs()
 }
@@ -523,7 +524,6 @@ const getCellClass = (col: any, row: any) => {
         rows:{{ props.rows }}
     </template>
 
-
     <q-table v-bind="attrs" :row-key="rowKey" :loading="loading" :rows="rows" ref="table" @request="onRequest"
         :rows-per-page-label="$t(props.rowsPerPageLabel)" :columns="columns" :rows-per-page-options="rowsPerPageOptions"
         :selection="selection" v-model:pagination="pagination" :filter="filter" :no-data-label="$t('No data available')"
@@ -630,7 +630,7 @@ const getCellClass = (col: any, row: any) => {
                         </template>
 
                         <template v-if="col.searchType == 'date'">
-                            <l-date-picker hide-bottom-space v-model="filters[col.name]" dense
+                            <l-date-picker :outlined="false" hide-bottom-space v-model="filters[col.name]" dense
                                 @update:model-value="onFilters" clearable range @clear="onFilters" />
                         </template>
 

package/dist/runtime/index.d.ts

@@ -12,7 +12,7 @@ export declare const useLight: () => {
     addError: (error: String) => void;
     getErrors: () => String[];
     removeError: (error: String) => void;
-    getStyle: (name: String, defaultdefaultValue: any) => any;
+    getStyle: (name: String) => any;
     setStyles: (s: Object) => void;
     getStyles: () => {
         theme?: String | undefined;

package/dist/runtime/index.mjs

@@ -3,6 +3,13 @@ import { watch, reactive } from "vue";
 import { m } from "./lib/index.mjs";
 const errors = [];
 let styles = {};
+let defaultStyle = {
+  inputOutlined: true,
+  inputStackLabel: true,
+  tableFlat: true,
+  tableBorder: true,
+  tableSeparator: "cell"
+};
 const app = reactive({
   company: "",
   companyLogo: "",
@@ -38,9 +45,12 @@ const app = reactive({
       errors.splice(index, 1);
     }
   },
-  getStyle(name, defaultdefaultValue) {
+  getStyle(name) {
     if (styles[name] === void 0) {
-      return defaultdefaultValue;
+      if (defaultStyle[name] !== void 0) {
+        return defaultStyle[name];
+      }
+      return false;
     }
     return styles[name];
   },
@@ -73,6 +83,7 @@ const app = reactive({
   init(styles2) {
     app.color = styles2.color || "primary";
     app.theme = styles2.theme || "semi-dark";
+    app.setStyles(styles2);
     watch(() => app.color, async () => {
       await app.setStyle("color", app.color);
     });

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

@@ -5,7 +5,7 @@ let my = await q("my", ["styles"]);
 
 const styles = reactive({
 
-    tableDense: my.styles.tableDense === undefined ? false : my.styles.tableDense,
+    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,
 
@@ -19,10 +19,10 @@ const styles = reactive({
     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,
+    inputOutlined: my.styles.inputOutlined === undefined ? true : 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,
+    inputDense: my.styles.inputDense === undefined ? true : my.styles.inputDense,
     inputSquare: my.styles.inputSquare === undefined ? false : my.styles.inputSquare,
     inputStackLabel: my.styles.inputStackLabel === undefined ? false : my.styles.inputStackLabel,
 
@@ -39,7 +39,7 @@ const onSave = async () => {
 
 const setDefault = async () => {
 
-    styles.tableDense = false;
+    styles.tableDense = true;
     styles.tableFlat = true;
     styles.tableBorder = true;
 
@@ -53,12 +53,12 @@ const setDefault = async () => {
     styles.buttonDense = false;
 
     styles.inputFilled = false;
-    styles.inputOutlined = false;
+    styles.inputOutlined = true;
     styles.inputStandout = false;
     styles.inputRounded = false;
     styles.inputDense = false;
     styles.inputSquare = false;
-    styles.inputStackLabel = false;
+    styles.inputStackLabel = true;
 
 
 
@@ -71,6 +71,13 @@ const setDefault = async () => {
             <q-checkbox v-model="styles.tableFlat" label="Table flat" />
             <q-checkbox v-model="styles.tableBorder" label="Table bordered" />
 
+            <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' },
+            ]" />
+
         </div>
 
         <div>
@@ -119,6 +126,13 @@ const setDefault = async () => {
                             ></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>
 
 

package/dist/types.d.mts

@@ -1,5 +1,6 @@
 
-import { ModuleOptions } from './module'
+import type { ModuleOptions } from './module'
+
 
 declare module '@nuxt/schema' {
   interface NuxtConfig { ['light']?: Partial<ModuleOptions> }
@@ -12,4 +13,4 @@ declare module 'nuxt/schema' {
 }
 
 
-export { ModuleOptions, default } from './module'
+export type { ModuleOptions, default } from './module'

package/dist/types.d.ts

@@ -1,5 +1,6 @@
 
-import { ModuleOptions } from './module'
+import type { ModuleOptions } from './module'
+
 
 declare module '@nuxt/schema' {
   interface NuxtConfig { ['light']?: Partial<ModuleOptions> }
@@ -12,4 +13,4 @@ declare module 'nuxt/schema' {
 }
 
 
-export { ModuleOptions, default } from './module'
+export type { ModuleOptions, default } from './module'

package/package.json

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