@hostlink/nuxt-light 0.0.112 → 0.0.113

package/dist/module.json

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

package/dist/runtime/assets/main.css

@@ -14,4 +14,17 @@ body {
 
 .q-card__actions .q-btn--rectangle {
     padding: 4px 16px;
+}
+
+
+.q-table--dense .q-table td, .q-table--dense .q-table th{
+    padding: 2px 4px;
+}
+
+.q-table--dense .q-table td:first-child, .q-table--dense .q-table th:first-child{
+    padding: 2px 4px;
+}
+
+.q-tab-panel{
+    padding: 8px;
 }

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

@@ -67,7 +67,7 @@ if (!props.range) {
 const attrs = {
     ...{
         filled: light.getStyle("inputFilled", false),
-        outlined: light.getStyle("inputOutlined", false),
+        outlined: light.getStyle("inputOutlined", true),
         standout: light.getStyle("inputStandout", false),
         rounded: light.getStyle("inputRounded", false),
         dense: light.getStyle("inputDense", false),

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

@@ -155,12 +155,12 @@ const onClickTc2Sc = () => {
 const attrs = {
     ...{
         filled: light.getStyle("inputFilled", false),
-        outlined: light.getStyle("inputOutlined", 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)
+        stackLabel: light.getStyle("inputStackLabel", true)
     },
     ...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-select.vue

@@ -62,7 +62,7 @@ const clearable = computed(() => {
 const attrs = {
     ...{
         filled: light.getStyle("inputFilled", false),
-        outlined: light.getStyle("inputOutlined", false),
+        outlined: light.getStyle("inputOutlined", true),
         standout: light.getStyle("inputStandout", false),
         rounded: light.getStyle("inputRounded", false),
         dense: light.getStyle("inputDense", false),

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

@@ -523,11 +523,13 @@ 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')"
-        :loading-label="$t('Loading...')">
+    <q-table
+    
+    
+    v-bind="attrs" :row-key="rowKey" :loading="loading" :rows="rows" ref="table" @request="onRequest"
+        separator="cell" :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')" :loading-label="$t('Loading...')">
 
 
         <!-- template v-for="s in ss" v-slot:[s]="props">

package/dist/runtime/index.mjs

@@ -73,6 +73,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/package.json

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