@hostlink/nuxt-light 0.0.28 → 0.0.30

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "light",
   "configKey": "light",
-  "version": "0.0.28"
+  "version": "0.0.30"
 }

package/dist/module.mjs

@@ -10,7 +10,6 @@ const module = defineNuxtModule({
   defaults: {},
   setup(options, nuxt) {
     const resolver = createResolver(import.meta.url);
-    nuxt.options.css.push("element-plus/dist/index.css");
     nuxt.options.css.push("quasar/dist/quasar.prod.css");
     nuxt.options.css.push("@quasar/extras/material-icons/material-icons.css");
     nuxt.options.css.push("@quasar/extras/material-icons-outlined/material-icons-outlined.css");

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

@@ -1,9 +1,12 @@
 <script setup>
+import { useQuasar } from 'quasar';
 import { useI18n } from 'vue-i18n';
-import { useLight, q, getCurrentUser, m } from '../';
+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: {
@@ -12,7 +15,14 @@ const props = defineProps({
 });
 
 let app = await q("app", ["menus", "viewAsMode", "languages"]);
-let my = await q("my", ["styles", "language"]);
+let my = await q("my", ["styles", "language", f('granted_storage:granted', { right: "system.storage" }, [])]);
+let system = null
+if (my.granted_storage) {
+    system = await q("system", ["diskFreeSpace", "diskTotalSpace", "diskFreeSpacePercent"]);
+}
+
+light.setStyles(my.styles);
+
 const menus = ref(app.menus)
 
 const i18n = useI18n();
@@ -50,9 +60,9 @@ const layoutView = computed(() => {
 
 const style = reactive({
     color: my.styles?.color || 'bg-primary',
-    theme: 'semi-dark',
-    miniState: false,
-    dense: my.styles?.dense
+    theme: my.styles?.theme || 'semi-dark',
+    miniState: my.styles?.miniState || false,
+    dense: my.styles?.dense || false
 });
 
 
@@ -100,6 +110,7 @@ const reloadMenu = async () => {
 
 provide('reloadMenu', reloadMenu)
 
+
 watch(() => style.dense, async (value) => {
     await m("updateMyStyle", {
         name: "dense",
@@ -111,14 +122,31 @@ watch(() => style.color, async (value) => {
     await m("updateMyStyle", {
         name: "color",
         value: value
-    });
+    })
 })
 
+watch(() => style.theme, async (value) => {
+    await m("updateMyStyle", {
+        name: "theme",
+        value: value
+    })
+})
+
+watch(() => style.miniState, async (value) => {
+    await m("updateMyStyle", {
+        name: "miniState",
+        value: value
+    })
+});
+
 const exitViewAs = async () => {
     await m("cancelViewAs");
     window.location.reload();
 }
 
+
+
+
 </script>
 
 
@@ -134,7 +162,7 @@ const exitViewAs = async () => {
 
                 <q-space />
 
-                <q-btn v-if="languages.length > 1" rounded flat icon="language" :label="my.language">
+                <q-btn v-if="languages.length > 1" rounded flat icon="language" :label="my.language" class="q-mr-sm">
                     <q-menu>
                         <q-list>
                             <q-item v-for="language in languages" :key="language.value" v-close-popup clickable
@@ -147,7 +175,26 @@ const exitViewAs = async () => {
                     </q-menu>
                 </q-btn>
 
-                <div class="q-mx-sm">
+                <q-btn icon="sym_o_storage" flat round dense class="q-mr-sm" v-if="my.granted_storage">
+                    <q-menu>
+                        <q-card style="width:200px">
+                            <q-card-section>
+                                Storage
+                                <q-linear-progress rounded size="20px" :value="system.diskFreeSpacePercent" color="primary"
+                                    class="q-mt-sm" />
+
+                                {{ system.diskFreeSpace }} / {{ system.diskTotalSpace }}
+
+
+                            </q-card-section>
+
+                        </q-card>
+                    </q-menu>
+
+
+                </q-btn>
+
+                <div class="q-mx-sm" v-if="$q.platform.is.desktop">
                     <div class="text-bold text-right">
                         {{ user.first_name }} {{ user.last_name }}
                     </div>
@@ -158,6 +205,8 @@ const exitViewAs = async () => {
                 </div>
 
 
+
+
                 <q-btn flat round dense icon="sym_o_person" class="q-mr-sm">
                     <q-menu max-width="250px">
                         <q-list>
@@ -232,7 +281,6 @@ const exitViewAs = async () => {
                 </q-card-section>
             </q-card>
 
-
             <router-view v-slot="{ Component }">
                 <template v-if="Component">
                     <suspense>

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

@@ -70,7 +70,7 @@ const props = defineProps({
         <q-separator />
         <q-item>
             <q-item-section>
-                <q-item-label>Mini mode</q-item-label>
+                <q-item-label>{{ $t('Mini mode') }}</q-item-label>
             </q-item-section>
             <q-item-section side>
                 <q-toggle :model-value="miniState" @update:model-value="$emit('update:miniState', $event)" />

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

@@ -1,5 +1,5 @@
 <script setup>
-import { computed } from "vue";
+import { computed, ref } from "vue";
 import { useI18n } from 'vue-i18n';
 const i18n = useI18n();
 
@@ -22,6 +22,10 @@ const props = defineProps({
         type: String,
         default: "text"
     },
+    showPassword: {
+        type: Boolean,
+        default: false
+    }
 });
 const emit = defineEmits(["update:modelValue"]);
 
@@ -54,10 +58,45 @@ const localLabel = computed(() => {
 
 });
 
+const isShowPassword = ref(false);
+
+const localType = computed(() => {
+    if (props.type == "password" && isShowPassword.value) {
+        return "text";
+    }
+    return props.type;
+});
+
+
+
+const localShowPassword = computed(() => {
+    if (props.type != "password") {
+        return false;
+    }
+
+    if (!props.showPassword) {
+        return false;
+    }
+
+    if (!localValue.value) {
+        return false;
+    }
+
+    return true;
+
+});
+
 
 
 
 </script>
 <template>
-    <q-input :label="localLabel" v-model="localValue" hide-bottom-space :rules="new_rules" :type="type"></q-input>
+    <q-input :label="localLabel" v-model="localValue" hide-bottom-space :rules="new_rules" :type="localType">
+        <template v-if="localShowPassword" v-slot:append>
+            <q-icon name="sym_o_visibility" class="cursor-pointer" :color="showPassword ? 'primary' : 'grey-5'"
+                @click="isShowPassword = false" v-if="isShowPassword" />
+            <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

@@ -112,8 +112,8 @@ const forgetPassword = async () => {
         {{ company }}
       </div>
       <q-form ref="form1">
-        <q-input v-model.trim="data.username" label="Username" :rules="[v => !!v || 'Username is required']" clearable />
-        <q-input v-model="data.password" label="Password" type="password" clearable
+        <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>

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

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

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

@@ -2,12 +2,16 @@
 import { useQuasar, QTable } from 'quasar';
 import { useRoute } from 'vue-router';
 import { ref, computed, onMounted, useSlots, reactive } from "vue";
-import { t, deleteObject, q, f } from '../';
+import { t, deleteObject, q, f, useLight } from '../';
 
 const route = useRoute();
 const module = route.path.split("/")[1];
 const errors = ref<InstanceType<any>>([]);
 
+const light = useLight();
+
+const tableDense = light.getStyle("tableDense") ?? false;
+
 const props = defineProps({
     columns: {
         type: Array<{
@@ -33,6 +37,10 @@ const props = defineProps({
         type: String,
         default: null
     },
+    rowsPerPageLabel: {
+        type: String,
+        default: "Records per page:"
+    },
 })
 
 
@@ -328,6 +336,8 @@ const onDelete = async (id: any) => {
 }
 
 
+
+
 </script>
 <template>
     <template v-if="errors.length > 0">
@@ -337,9 +347,9 @@ const onDelete = async (id: any) => {
             </ul>
         </div>
     </template>
-
-    <q-table flat bordered :columns="renderColumns" v-model:pagination="pagination" ref="table" :loading="loading"
-        @request="onRequest" :selection="selection" :rows="rows">
+    <q-table flat bordered :dense="tableDense" :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">
             <slot :name="s" v-bind="props"></slot>

package/dist/runtime/index.d.ts

@@ -2,6 +2,8 @@ interface Light {
     addError: (error: String) => void;
     getErrors: () => String[];
     removeError: (error: String) => void;
+    getStyle: (name: String) => any;
+    setStyles: (styles: Object) => void;
 }
 export declare function useLight(): Light;
 export { notify, addObject, f, getApiUrl, getCurrentUser, getObject, id, list, listData, login, m, mutation, q, removeObject, t, updateObject, getID, deleteObject, listObject } from "./lib";

package/dist/runtime/index.mjs

@@ -1,4 +1,5 @@
 const errors = [];
+let styles = {};
 export function useLight() {
   return {
     addError: (error) => {
@@ -12,6 +13,12 @@ export function useLight() {
       if (index > -1) {
         errors.splice(index, 1);
       }
+    },
+    getStyle(name) {
+      return styles[name];
+    },
+    setStyles(s) {
+      styles = s;
     }
   };
 }

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

@@ -145,5 +145,7 @@
     "Menu": "選單",
     "New": "新增",
     "Server": "伺服器",
-    "Remove": "移除"
+    "Remove": "移除",
+    "Records per page:": "每頁顯示:"
+    
 }

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

@@ -9,8 +9,6 @@ const loadData = async () => {
     return await q("listRole", ["name", "canDelete", { parents: ["name"] }]);
 
 }
-
-
 const roles = ref(await loadData());
 
 const onDelete = async (role) => {
@@ -29,12 +27,45 @@ const onDelete = async (role) => {
 
 }
 
+const columns = [
+    {
+        name: "_can_delete"
+    },
+    {
+        name: "name",
+        field: "name",
+        label: "Name",
+        align: "left",
+        sortable: true,
+    }, {
+        name: "parents",
+        label: "Parent",
+        align: "left",
+    }
+]
+
 </script>
 
 <template>
     <l-page>
+        <q-table :rows="roles" flat bordered :columns="columns">
+            <template #body-cell-_can_delete="props">
+                <q-td auto-width>
+                    <q-btn v-if="props.row.canDelete" flat round dense icon="sym_o_delete"
+                        @click="onDelete(props.row.name)" />
+                </q-td>
+            </template>
+
+            <template #body-cell-parents="props">
+                <q-td>
+                    <q-table :rows="props.row.parents" flat bordered :rows-per-page-options="[0]" hide-bottom></q-table>
+                </q-td>
+            </template>
+
+
+        </q-table>
 
-        <el-table :data="roles">
+        <!-- q-table :data="roles">
 
             <el-table-column width="60px" #default="{ row }">
                 <q-btn v-if="row.canDelete" flat round dense icon="sym_o_delete" @click="onDelete(row.name)" />
@@ -49,6 +80,6 @@ const onDelete = async (role) => {
                     </el-table>
                 </template>
             </el-table-column>
-        </el-table>
+        </q-table -->
     </l-page>
 </template>

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

@@ -34,6 +34,12 @@ const columns = [
         name: "phone",
         sortable: true,
         searchable: true,
+    }, {
+        label: "Join date",
+        name: "join_date",
+        sortable: true,
+        searchable: true,
+        searchType: "date"
     }
 ]
 

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

@@ -1,3 +1,21 @@
+<script setup>
+import { q, m } from '../../../'
+import { reactive } from 'vue'
+let my = await q("my", ["styles"]);
+
+const styles = reactive({
+    tableDense: my.styles.tableDense,
+})
+
+const onSave = async () => {
+    await m("updateMyStyle", {
+        name: "tableDense",
+        value: styles.tableDense
+    });
+}
+</script>
 <template>
-    <div>Style</div>
+    <l-form @save="onSave" :bordered="false">
+        <q-checkbox v-model="styles.tableDense" label="Dense table" />
+    </l-form>
 </template>

package/dist/runtime/plugin.d.ts

@@ -1,4 +1,3 @@
 import "./assets/main.css";
-import './assets/element.css';
 declare const _default: any;
 export default _default;

package/dist/runtime/plugin.mjs

@@ -1,12 +1,8 @@
 import { Quasar, Dialog, Notify, Loading } from "quasar";
-import ElementPlus from "element-plus";
 import { createI18n } from "vue-i18n";
 import { defineNuxtPlugin } from "#app";
 import { useRouter } from "vue-router";
 import "./assets/main.css";
-import "./assets/element.css";
-import zhTW from "element-plus/es/locale/lang/zh-tw";
-import en from "element-plus/es/locale/lang/en";
 import message_en from "./locales/en.json";
 import message_zh from "./locales/zh-hk.json";
 import routes from "./routes.mjs";
@@ -22,15 +18,14 @@ export default defineNuxtPlugin((nuxtApp) => {
     legacy: false,
     locale: localStorage.getItem("locale") || "en",
     messages: {
-      en: Object.assign(en, message_en),
-      "zh-hk": Object.assign(zhTW, message_zh),
-      "zh-tw": Object.assign(zhTW, message_zh)
+      en: message_en,
+      "zh-hk": message_zh,
+      "zh-tw": message_zh
     },
     fallbackWarn: false,
     missingWarn: false
   });
   nuxtApp.vueApp.use(i18n);
-  nuxtApp.vueApp.use(ElementPlus);
   nuxtApp.vueApp.use(Quasar, {
     config: {
       brand: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hostlink/nuxt-light",
-  "version": "0.0.28",
+  "version": "0.0.30",
   "description": "HostLink Nuxt Light Framework",
   "repository": "@hostlink/nuxt-light",
   "license": "MIT",
@@ -34,7 +34,6 @@
     "@nuxt/kit": "^3.7.0",
     "@quasar/extras": "^1.16.6",
     "axios": "^1.5.0",
-    "element-plus": "^2.3.12",
     "gql-query-builder": "^3.8.0",
     "json-to-graphql-query": "^2.2.5",
     "quasar": "^2.12.5",