@hostlink/nuxt-light 1.20.6 → 1.21.0

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

@@ -1,9 +1,14 @@
 <script setup>
 import { ref, computed, watch } from "vue";
 import { useQuasar } from 'quasar';
-import { q, m } from '../';
+import { api } from '#imports';
+const props = defineProps({
+  driveIndex: Number,
+})
+
 const emit = defineEmits(["selected"]);
-const data = await q("fsListFolders", { path: "/" }, ["name", "path"]);
+
+const data = await api.drive(props.driveIndex).folders.list("/")
 const folders = ref(data);
 const mode = ref("move");
 const folder = ref("/");
@@ -11,8 +16,10 @@ const parent = ref("/");
 
 const qua = useQuasar();
 
+const drive = api.drive(props.driveIndex);
+
 watch(folder, async () => {
-  folders.value = await q("fsListFolders", { path: folder.value }, ["name", "path"]);
+  folders.value = await drive.folders.list(folder.value)
 });
 
 const clickBack = () => {
@@ -31,10 +38,8 @@ const newFolder = ref(null);
 
 const onClickCreate = async () => {
   let f = folder.value + "/" + newFolder.value;
-  await m("fsCreateFolder", { path: f });
-
+  await drive.folders.create(f);
   folder.value = f;
-
   mode.value = "move";
 }
 
@@ -58,9 +63,9 @@ const onClickMove = async () => {
   })
 }
 
-</script >
+</script>
 <template>
-  <q-menu transition-show="jump-down" transition-hide="jump-up" ref="menu" @before-show="show">
+  <q-menu transition-show="jump-down" transition-hide="jump-up" ref="menu">
     <q-card>
       <q-toolbar>
         <template v-if="mode == 'create'">

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

@@ -1,23 +1,33 @@
 <script setup>
 import { format, useQuasar } from "quasar"
 import { computed } from 'vue'
-import { q } from '../';
+import { q, api } from '#imports';
 const { humanStorageSize } = format
 
-const props = defineProps(["modelValue"]);
 const quasar = useQuasar()
 
+const props = defineProps({
+  path: {
+    type: String,
+    required: true
+  },
+  driveIndex: {
+    type: Number,
+    default: 0
+  },
+})
 
-const file = await q("fsFile", {
-  path: props.modelValue.path
-}, ["canPreview", "imagePath"])
+const file = await api.drive(props.driveIndex).files.get(props.path, {
+  name: true,
+  size: true,
+  mime: true,
+  url: true,
+  lastModified: true,
+  lastModifiedHuman: true,
+  path: true,
+});
+const size = humanStorageSize(file.size)
 
-const size = humanStorageSize(props.modelValue.size)
-
-const full_url = computed(() => {
-  let url = window.location.protocol + '//' + window.location.hostname + (window.location.port ? ':' + window.location.port : '');
-  return url + props.modelValue.imagePath;
-})
 
 const copyToClipboard = (text) => {
   navigator.clipboard.writeText(text).then(() => {
@@ -34,52 +44,35 @@ const copyToClipboard = (text) => {
   });
 }
 
+
+const canPreview = computed(() => {
+  //check file mime type
+  const mime = ['image/jpeg', 'image/png', 'image/gif'];
+  return mime.includes(file.mime);
+
+});
+
 </script>
 <template>
-  <template v-if="file.canPreview">
-    <q-img :src="file.imagePath"></q-img>
+  <template v-if="canPreview">
+    <q-img :src="file.url"></q-img>
   </template>
   <q-list dense>
+    <l-item label="Name">{{ file.name }}</l-item>
+    <l-item label="Size">{{ size }} ({{ file.size }})</l-item>
+    <l-item label="Location">{{ file.path }}</l-item>
+    <l-item label="Last modified">{{ file.lastModifiedHuman }}</l-item>
+
     <q-item>
-      <q-item-section>
-        <q-item-label>Name</q-item-label>
-      </q-item-section>
-      <q-item-section side>
-        <q-item-label lines="1">
-          {{ modelValue.name }}
-        </q-item-label>
-      </q-item-section>
-    </q-item>
-    <q-item>
-      <q-item-section>
-        <q-item-label>Size</q-item-label>
-      </q-item-section>
-      <q-item-section side>{{ size }} ({{ modelValue.size }}) </q-item-section>
-    </q-item>
-    <q-item>
-      <q-item-section>
-        <q-item-label>Location</q-item-label>
-      </q-item-section>
       <q-item-section side>
-        <q-item-label lines="1">{{ modelValue.path }}</q-item-label>
-      </q-item-section>
-    </q-item>
-    <q-item>
-      <q-item-section>
-        <q-item-label>Last modified</q-item-label>
-      </q-item-section>
-      <q-item-section side>{{ modelValue.lastModifiedHuman }}</q-item-section>
-    </q-item>
-    <q-item>
-      <q-item-section>
         <q-item-label>URL</q-item-label>
       </q-item-section>
-      <q-item-section side>
-        <q-item-label lines="1">{{ full_url }}</q-item-label>
+      <q-item-section style="align-items: flex-end;">
+        <q-item-label lines="1">{{ file.url }}</q-item-label>
       </q-item-section>
 
       <q-item-section top side>
-        <q-btn size="md" flat danse round icon="sym_o_content_copy" @click="copyToClipboard(full_url)"></q-btn>
+        <q-btn size="md" flat danse round icon="sym_o_content_copy" @click="copyToClipboard(file.url)"></q-btn>
       </q-item-section>
     </q-item>
   </q-list>