@hostlink/nuxt-light 1.3.0 → 1.3.1

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "light",
   "configKey": "light",
-  "version": "1.3.0"
+  "version": "1.3.1"
 }

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

@@ -1,13 +1,13 @@
 <script setup>
 import { ref, computed, watch } from "vue";
+import { useQuasar } from 'quasar';
 import { q, m } from '../';
 const emit = defineEmits(["selected"]);
 const data = await q("fsListFolders", { path: "/" }, ["name", "path"]);
 const folders = ref(data);
 const mode = ref("move");
 const folder = ref("/");
-const parent = ref(null);
-const selected = ref("/");
+const parent = ref("/");
 
 const qua = useQuasar();
 
@@ -30,7 +30,7 @@ const title = computed(() => {
 const newFolder = ref(null);
 
 const onClickCreate = async () => {
-  let f = selected.value + "/" + newFolder.value;
+  let f = folder.value + "/" + newFolder.value;
   await m("fsCreateFolder", { path: f });
 
   folder.value = f;
@@ -42,15 +42,15 @@ const menu = ref(null);
 const onClickMove = async () => {
   qua.dialog({
     title: "Move",
-    message: "Are you sure you want to move?",
+    message: "Are you sure you want to move to \"" + folder.value + "\" ?",
     cancel: true,
     persistent: true,
   }).onOk(async () => {
 
 
     menu.value.hide();
-    emit("selected", selected.value);
-    selected.value = "/";
+    emit("selected", folder.value);
+    folder.value = "/";
     parent.value = null;
     folder.value = "/";
 
@@ -63,22 +63,22 @@ const onClickMove = async () => {
   <q-menu transition-show="jump-down" transition-hide="jump-up" ref="menu" @before-show="show">
     <q-card>
       <q-toolbar>
-        <q-btn flat dense round @click="clickBack()" v-if="parent">
-          <q-icon name="sym_o_arrow_back" />
-        </q-btn>
-        <q-toolbar-title>
-          <template v-if="mode == 'create'">
-            <q-input outlined dense v-model="newFolder">
-              <template v-slot:append>
-                <q-btn round dense flat icon="sym_o_add" @click="onClickCreate" />
-              </template>
-            </q-input>
-          </template>
-
-          <template v-else>
+        <template v-if="mode == 'create'">
+          <q-btn flat dense round @click="mode = 'move'" icon="sym_o_arrow_back" class="q-mr-sm">
+            <q-tooltip>Cancel</q-tooltip>
+          </q-btn>
+
+        </template>
+        <template v-else>
+          <q-btn flat dense round @click="clickBack()" v-if="folder !== '/'" icon="sym_o_arrow_back">
+            <q-tooltip>Back</q-tooltip>
+          </q-btn>
+          <q-toolbar-title>
             {{ title }}
-          </template>
-        </q-toolbar-title>
+          </q-toolbar-title>
+
+        </template>
+
       </q-toolbar>
 
       <template v-if="mode == 'empty folder'">
@@ -86,35 +86,39 @@ const onClickMove = async () => {
       </template>
 
       <template v-if="mode == 'create'">
-        <q-card-section> Create folder at "{{ selected }}" </q-card-section>
+        <q-card-section>
+          <q-input outlined dense v-model="newFolder" :hint="`Create folder at ${folder}`" label="Foler name"
+            stack-label="">
+            <template v-slot:append v-if="newFolder">
+              <q-btn round dense flat icon="sym_o_add" @click="onClickCreate">
+                <q-tooltip>Create</q-tooltip>
+              </q-btn>
+            </template>
+          </q-input>
+        </q-card-section>
       </template>
 
       <template v-if="mode == 'move'">
         <q-list>
-          <q-item v-for="(b, index) in folders" :key="index" clickable @click="selected = b.path"
-            :active="selected === b.path">
-            <q-item-section>
+          <q-item v-for="(b, index) in folders" :key="index" clickable @click="parent = folder; folder = b.path;">
+
+            <q-item-section avatar>
               <q-icon name="sym_o_folder"></q-icon>
             </q-item-section>
             <q-item-section>
               <q-item-label>{{ b.name }}</q-item-label>
             </q-item-section>
 
-            <q-item-section side>
-              <q-btn flat dense outlined @click="
-                parent = folder;
-              folder = b.path;
-              ">
-                <q-icon name="sym_o_navigate_next"></q-icon>
-              </q-btn>
+            <q-item-section side avatar>
+              <q-icon name="sym_o_navigate_next"></q-icon>
             </q-item-section>
           </q-item>
         </q-list>
       </template>
 
       <q-card-actions>
-        <q-btn flat dense @click="mode = 'create'" :disable="mode == 'create'">
-          <q-icon name="sym_o_create_new_folder"></q-icon>
+        <q-btn flat dense @click="mode = 'create'" :disable="mode == 'create'" round icon="sym_o_create_new_folder">
+          <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'">
@@ -123,65 +127,4 @@ const onClickMove = async () => {
       </q-card-actions>
     </q-card>
   </q-menu>
-</template>
-<!-- 
-<script>
-import { listFolders, createFolder } from "./../lib/filemanager";
-
-
-export default {
-  data() {
-    return {
-      selected: "/",
-      folder: null,
-      folders: [],
-      parent: null,
-      mode: "move",
-      newFolder: null,
-    };
-  },
-  watch: {
-    async folder() {
-      this.folders = await listFolders(this.folder);
-
-      if (this.folders.length == 0) {
-        this.mode = "empty folder";
-      }
-    },
-  },
-  computed: {
-    title() {
-      if (this.folder) {
-        return this.folder.split("/").pop();
-      }
-      return "";
-    },
-  },
-
-  methods: {
-    show() {
-      this.folder = "/";
-      this.mode = "move";
-    },
-    async onClickCreate() {
-      let folder = this.selected + "/" + this.newFolder;
-      await createFolder(folder);
-      this.folder = folder;
-    },
-    clickBack() {
-      if (this.mode == "create") {
-        this.mode = "move";
-        return;
-      }
-
-      this.folder = this.parent;
-
-
-      if (this.mode == "empty folder") {
-        this.mode = "move";
-        return;
-      }
-    },
-  },
-};
-</script> -->
+</template>

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

@@ -587,10 +587,21 @@ const isDark = computed(() => light.isDarkMode());
 
         <q-btn flat round icon="sym_o_drive_file_move" v-if="selected.length > 0">
           <l-file-manager-move @selected="moveToFolder($event)" />
+          <q-tooltip>
+            {{ $t('Move to') }}
+          </q-tooltip>
         </q-btn>
 
-        <q-btn flat round icon="o_delete" @click="onDeleteSelected" v-if="selected.length > 0"></q-btn>
-        <q-btn flat round :icon="grid ? 'list_view' : 'grid_view'" @click="grid = !grid"></q-btn>
+        <q-btn flat round icon="o_delete" @click="onDeleteSelected" v-if="selected.length > 0">
+          <q-tooltip>
+            {{ $t('Delete') }}
+          </q-tooltip>
+        </q-btn>
+        <q-btn flat round :icon="grid ? 'list_view' : 'grid_view'" @click="grid = !grid">
+          <q-tooltip>
+            {{ grid ? $t('List view') : $t('Grid view') }}
+          </q-tooltip>
+        </q-btn>
       </q-toolbar>
 
       <template v-if="grid">

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

@@ -138,12 +138,17 @@ const attrs = computed(() => {
 
     if (props.label) {
         a.label = i18n.t(props.label);
+
+        if (props.required) {
+            a.label = "* " + a.label;
+        }
+
     }
     return a;
 })
 </script>
 <template>
-    <q-input v-bind="attrs" v-model="localValue" :rules="new_rules"  :type="localType">
+    <q-input v-bind="attrs" v-model="localValue" :rules="new_rules" :type="localType">
         <template v-if="translate" #prepend>
             <q-btn icon="sym_o_translate" flat dense rounded>
                 <q-menu dense>

package/package.json

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