@hostlink/nuxt-light 1.61.0 → 1.62.0

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "light",
   "configKey": "light",
-  "version": "1.61.0",
+  "version": "1.62.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/components/l-dialog-upload-files.d.vue.ts

@@ -0,0 +1,29 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    selectedLocation: {
+        type: StringConstructor;
+        required: true;
+    };
+    initialFiles: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    hide: (...args: any[]) => void;
+    ok: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    selectedLocation: {
+        type: StringConstructor;
+        required: true;
+    };
+    initialFiles: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+}>> & Readonly<{
+    onHide?: ((...args: any[]) => any) | undefined;
+    onOk?: ((...args: any[]) => any) | undefined;
+}>, {
+    initialFiles: unknown[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/components/l-dialog-upload-files.vue

@@ -0,0 +1,178 @@
+<script setup>
+import { useDialogPluginComponent } from "quasar";
+import { ref, onMounted } from "vue";
+import { useQuasar } from "quasar";
+import { fs } from "@hostlink/light";
+const props = defineProps({
+  selectedLocation: {
+    type: String,
+    required: true
+  },
+  initialFiles: {
+    type: Array,
+    default: () => []
+  }
+});
+defineEmits([
+  ...useDialogPluginComponent.emits
+]);
+const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } = useDialogPluginComponent();
+const $q = useQuasar();
+const uploadFiles = ref([]);
+const uploadProgress = ref({});
+onMounted(() => {
+  if (props.initialFiles && props.initialFiles.length > 0) {
+    uploadFiles.value = props.initialFiles;
+  }
+});
+const initializeUploadProgress = () => {
+  uploadProgress.value = {};
+  uploadFiles.value.forEach((file, index) => {
+    uploadProgress.value[index] = {
+      name: file.name,
+      status: "pending",
+      // pending, uploading, completed, failed
+      error: null,
+      progress: 0
+    };
+  });
+};
+const onUploadFiles = async () => {
+  initializeUploadProgress();
+  try {
+    const uploadPromises = uploadFiles.value.map(
+      (file, index) => (async () => {
+        try {
+          uploadProgress.value[index].status = "uploading";
+          await fs.uploadFile(props.selectedLocation, file);
+          uploadProgress.value[index].status = "completed";
+          uploadProgress.value[index].progress = 100;
+        } catch (error) {
+          uploadProgress.value[index].status = "failed";
+          uploadProgress.value[index].error = error?.message || String(error);
+        }
+      })()
+    );
+    await Promise.allSettled(uploadPromises);
+    const failedUploads = Object.values(uploadProgress.value).filter((p) => p.status === "failed");
+    if (failedUploads.length === 0) {
+      setTimeout(() => {
+        onDialogOK(uploadFiles.value);
+        uploadProgress.value = {};
+      }, 1e3);
+    }
+  } catch (e) {
+    $q.dialog({
+      title: "Error",
+      message: e.message
+    });
+  }
+};
+const onCancel = () => {
+  uploadProgress.value = {};
+  uploadFiles.value = [];
+  onDialogCancel();
+};
+</script>
+
+<template>
+  <q-dialog ref="dialogRef" @hide="onDialogHide">
+    <q-card style="min-width: 400px;">
+      <q-toolbar>
+        <q-toolbar-title>{{ $t('Upload Files') }}</q-toolbar-title>
+        <q-space></q-space>
+        <q-btn 
+          flat 
+          round 
+          dense 
+          icon="sym_o_close" 
+          v-close-popup 
+          :disable="uploadFiles.length > 0 && Object.values(uploadProgress).some(p => p.status === 'uploading')"
+        ></q-btn>
+      </q-toolbar>
+      <q-card-section>
+        <!-- 顯示上傳進度 -->
+        <div v-if="Object.keys(uploadProgress).length > 0" class="q-mb-md">
+          <q-list bordered separator>
+            <q-item v-for="(progress, index) in uploadProgress" :key="index">
+              <q-item-section avatar>
+                <q-icon 
+                  v-if="progress.status === 'completed'"
+                  name="sym_o_check_circle"
+                  color="positive"
+                  size="md"
+                />
+                <q-icon 
+                  v-else-if="progress.status === 'failed'"
+                  name="sym_o_error"
+                  color="negative"
+                  size="md"
+                />
+                <q-icon 
+                  v-else-if="progress.status === 'uploading'"
+                  name="sym_o_cloud_upload"
+                  color="primary"
+                  size="md"
+                />
+                <q-icon 
+                  v-else
+                  name="sym_o_schedule"
+                  color="grey"
+                  size="md"
+                />
+              </q-item-section>
+
+              <q-item-section>
+                <q-item-label>{{ progress.name }}</q-item-label>
+                <q-item-label caption v-if="progress.status === 'uploading'">
+                  上傳中...
+                </q-item-label>
+                <q-item-label caption v-else-if="progress.status === 'completed'" class="text-positive">
+                  上傳完成
+                </q-item-label>
+                <q-item-label caption v-else-if="progress.status === 'failed'" class="text-negative">
+                  {{ progress.error }}
+                </q-item-label>
+                <q-item-label caption v-else>
+                  等待中...
+                </q-item-label>
+                
+                <q-linear-progress 
+                  v-if="progress.status === 'uploading' || progress.status === 'completed'"
+                  :value="progress.progress / 100"
+                  :color="progress.status === 'completed' ? 'positive' : 'primary'"
+                  class="q-mt-xs"
+                  stripe
+                  rounded
+                />
+              </q-item-section>
+            </q-item>
+          </q-list>
+        </div>
+
+        <!-- 未上傳時顯示檔案選擇 -->
+        <div v-else>
+          <q-file v-model="uploadFiles" multiple name="file" :label="$t('Files')" color="primary" outlined />
+        </div>
+      </q-card-section>
+
+      <q-card-actions align="right">
+        <q-btn 
+          flat 
+          :label="$t('Cancel')" 
+          color="primary" 
+          v-close-popup
+          @click="onCancel"
+          :disable="uploadFiles.length > 0 && Object.values(uploadProgress).some(p => p.status === 'uploading')"
+        ></q-btn>
+        <q-btn 
+          flat 
+          :label="$t('Upload')" 
+          color="primary" 
+          @click="onUploadFiles"
+          :disable="uploadFiles.length === 0 || Object.keys(uploadProgress).length > 0"
+        ></q-btn>
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>

package/dist/runtime/components/l-dialog-upload-files.vue.d.ts

@@ -0,0 +1,29 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    selectedLocation: {
+        type: StringConstructor;
+        required: true;
+    };
+    initialFiles: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    hide: (...args: any[]) => void;
+    ok: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    selectedLocation: {
+        type: StringConstructor;
+        required: true;
+    };
+    initialFiles: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+}>> & Readonly<{
+    onHide?: ((...args: any[]) => any) | undefined;
+    onOk?: ((...args: any[]) => any) | undefined;
+}>, {
+    initialFiles: unknown[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/components/l-file-manager-breadcrumbs.d.vue.ts

@@ -0,0 +1,10 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: any) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+type __VLS_ModelProps = {
+    modelValue?: any;
+};

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

@@ -0,0 +1,37 @@
+<script setup>
+import { computed } from "vue";
+const modelValue = defineModel();
+const breadcrumbs = computed(() => {
+  if (!modelValue.value) {
+    return [];
+  }
+  const path = modelValue.value;
+  const protocolMatch = path.match(/^([a-zA-Z0-9]+):\/\/(.*)$/);
+  if (!protocolMatch) {
+    return [];
+  }
+  const protocol = protocolMatch[1];
+  const pathParts = protocolMatch[2].split("/").filter((part) => part.length > 0);
+  let breadcrumbs2 = [{
+    label: protocol,
+    location: `${protocol}://`
+  }];
+  let currentPath = `${protocol}://`;
+  for (let part of pathParts) {
+    currentPath += part;
+    breadcrumbs2.push({
+      label: part,
+      location: currentPath
+    });
+    currentPath += "/";
+  }
+  return breadcrumbs2;
+});
+</script>
+
+<template>
+    <q-breadcrumbs>
+        <q-breadcrumbs-el v-for="(b, index) in breadcrumbs" :label="b.label" :key="index"
+            @click="$emit('update:modelValue', b.location)" href="javascript:void(0)"></q-breadcrumbs-el>
+    </q-breadcrumbs>
+</template>

package/dist/runtime/components/l-file-manager-breadcrumbs.vue.d.ts

@@ -0,0 +1,10 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: any) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+type __VLS_ModelProps = {
+    modelValue?: any;
+};

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

@@ -1,11 +1,15 @@
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    driveIndex: NumberConstructor;
+    current_location: StringConstructor;
+    allow_cross_fs: BooleanConstructor;
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     selected: (...args: any[]) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    driveIndex: NumberConstructor;
+    current_location: StringConstructor;
+    allow_cross_fs: BooleanConstructor;
 }>> & Readonly<{
     onSelected?: ((...args: any[]) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}>, {
+    allow_cross_fs: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

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

@@ -1,35 +1,79 @@
 <script setup>
-import { ref, computed, watch } from "vue";
+import { ref, watch } from "vue";
 import { useQuasar } from "quasar";
-import { getApiClient } from "@hostlink/light";
+import { fs, query } from "@hostlink/light";
 const props = defineProps({
-  driveIndex: Number
+  current_location: String,
+  allow_cross_fs: Boolean
 });
-const api = getApiClient();
 const emit = defineEmits(["selected"]);
-const data = await api.drive(props.driveIndex).folders.list("/");
+const protocolMatch = props.current_location.match(/^([a-zA-Z0-9]+):\/\/(.*)$/);
+const filesystem = ref(protocolMatch ? protocolMatch[1] : "");
+const fss = await query({
+  app: {
+    fs: {
+      list: true
+    }
+  }
+}).then((res) => res.app.fs.list.map((f) => ({ label: f.name, value: f.name + "://" })));
+const data = await query({
+  app: {
+    fs: {
+      node: {
+        __args: {
+          location: props.current_location
+        },
+        __on: {
+          __typeName: "Folder",
+          children: {
+            __typename: true,
+            __on: {
+              __typeName: "Folder",
+              name: true,
+              location: true
+            }
+          }
+        }
+      }
+    }
+  }
+}).then((res) => res.app.fs.node.children.filter((n) => n.__typename === "Folder"));
 const folders = ref(data);
 const mode = ref("move");
-const folder = ref("/");
-const parent = ref("/");
+const folder = ref(props.current_location);
 const qua = useQuasar();
-const drive = api.drive(props.driveIndex);
-watch(folder, async () => {
-  folders.value = await drive.folders.list(folder.value);
+watch(filesystem, async () => {
+  console.log(filesystem.value);
+  folder.value = filesystem.value;
 });
-const clickBack = () => {
-  folder.value = parent.value;
-};
-const title = computed(() => {
-  if (folder.value) {
-    return folder.value.split("/").pop();
-  }
-  return "";
+watch(folder, async () => {
+  folders.value = await query({
+    app: {
+      fs: {
+        node: {
+          __args: {
+            location: folder.value
+          },
+          __on: {
+            __typeName: "Folder",
+            children: {
+              __typename: true,
+              __on: {
+                __typeName: "Folder",
+                name: true,
+                location: true
+              }
+            }
+          }
+        }
+      }
+    }
+  }).then((res) => res.app.fs.node.children.filter((n) => n.__typename === "Folder"));
 });
 const newFolder = ref(null);
 const onClickCreate = async () => {
   let f = folder.value + "/" + newFolder.value;
-  await drive.folders.create(f);
+  fs.createFolder(f);
   folder.value = f;
   mode.value = "move";
 };
@@ -43,9 +87,6 @@ const onClickMove = async () => {
   }).onOk(async () => {
     menu.value.hide();
     emit("selected", folder.value);
-    folder.value = "/";
-    parent.value = null;
-    folder.value = "/";
   });
 };
 </script>
@@ -53,6 +94,9 @@ const onClickMove = async () => {
 <template>
   <q-menu transition-show="jump-down" transition-hide="jump-up" ref="menu">
     <q-card>
+      <q-card-section v-if="allow_cross_fs">
+        <q-select label="Filesystem" :options="fss" v-model="filesystem" dense emit-value map-options />
+      </q-card-section>
       <q-toolbar>
         <template v-if="mode == 'create'">
           <q-btn flat dense round @click="mode = 'move'" icon="sym_o_arrow_back" class="q-mr-sm">
@@ -61,12 +105,7 @@ const onClickMove = async () => {
 
         </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 }}
-          </q-toolbar-title>
+          <l-file-manager-breadcrumbs v-model="folder" />
 
         </template>
 
@@ -91,7 +130,7 @@ const onClickMove = async () => {
 
       <template v-if="mode == 'move'">
         <q-list>
-          <q-item v-for="(b, index) in folders" :key="index" clickable @click="parent = folder; folder = b.path;">
+          <q-item v-for="(b, index) in folders" :key="index" clickable @click="folder = b.location;">
 
             <q-item-section avatar>
               <q-icon name="sym_o_folder"></q-icon>

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

@@ -1,11 +1,15 @@
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    driveIndex: NumberConstructor;
+    current_location: StringConstructor;
+    allow_cross_fs: BooleanConstructor;
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     selected: (...args: any[]) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    driveIndex: NumberConstructor;
+    current_location: StringConstructor;
+    allow_cross_fs: BooleanConstructor;
 }>> & Readonly<{
     onSelected?: ((...args: any[]) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}>, {
+    allow_cross_fs: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

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

@@ -1,23 +1,13 @@
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    path: {
+    location: {
         type: StringConstructor;
         required: true;
     };
-    driveIndex: {
-        type: NumberConstructor;
-        default: number;
-    };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    path: {
+    location: {
         type: StringConstructor;
         required: true;
     };
-    driveIndex: {
-        type: NumberConstructor;
-        default: number;
-    };
-}>> & Readonly<{}>, {
-    driveIndex: number;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

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

@@ -1,30 +1,39 @@
 <script setup>
-import { format, useQuasar } from "quasar";
+import { format, useQuasar, date } from "quasar";
 import { computed } from "vue";
-import { getApiClient } from "@hostlink/light";
+import { getApiClient, query } from "@hostlink/light";
 const api = getApiClient();
 const { humanStorageSize } = format;
 const quasar = useQuasar();
 const props = defineProps({
-  path: {
+  location: {
     type: String,
     required: true
-  },
-  driveIndex: {
-    type: Number,
-    default: 0
   }
 });
-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 file = await query({
+  app: {
+    fs: {
+      node: {
+        __args: {
+          location: props.location
+        },
+        __typename: true,
+        __on: {
+          __typeName: "File",
+          name: true,
+          size: true,
+          path: true,
+          mimeType: true,
+          lastModified: true,
+          publicUrl: true
+        }
+      }
+    }
+  }
+}).then((res) => res.app.fs.node);
 const size = humanStorageSize(file.size);
+const lastModifiedHuman = date.formatDate(file.lastModified * 1e3, "YYYY-MM-DD HH:mm:ss");
 const copyToClipboard = (text) => {
   let urlToCopy = text;
   if (!text.startsWith("https://") && !text.startsWith("http://")) {
@@ -43,33 +52,34 @@ const copyToClipboard = (text) => {
   });
 };
 const isImage = computed(() => {
-  return file.mime.startsWith("image/");
+  return file.mimeType.startsWith("image/");
 });
 const isVideo = computed(() => {
-  return file.mime.startsWith("video/");
+  return file.mimeType.startsWith("video/");
 });
 </script>
 
 <template>
-  <q-img :src="file.url" v-if="isImage"></q-img>
-  <q-video :src="file.url" v-else-if="isVideo"></q-video>
+  <q-img :src="file.publicUrl" v-if="isImage"></q-img>
+  <q-video :src="file.publicUrl" v-else-if="isVideo"></q-video>
 
   <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>
+    <l-item label="Last modified">{{ lastModifiedHuman }}</l-item>
+    <l-item label="MIME type">{{ file.mimeType }}</l-item>
 
     <q-item>
       <q-item-section side>
         <q-item-label>URL</q-item-label>
       </q-item-section>
       <q-item-section style="align-items: flex-end;">
-        <q-item-label lines="1">{{ file.url }}</q-item-label>
+        <q-item-label lines="1">{{ file.publicUrl }}</q-item-label>
       </q-item-section>
 
       <q-item-section side>
-        <q-btn size="md" flat dense round icon="sym_o_content_copy" @click="copyToClipboard(file.url)"></q-btn>
+        <q-btn size="md" flat dense round icon="sym_o_content_copy" @click="copyToClipboard(file.publicUrl)"></q-btn>
       </q-item-section>
     </q-item>
   </q-list>

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

@@ -1,23 +1,13 @@
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    path: {
+    location: {
         type: StringConstructor;
         required: true;
     };
-    driveIndex: {
-        type: NumberConstructor;
-        default: number;
-    };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    path: {
+    location: {
         type: StringConstructor;
         required: true;
     };
-    driveIndex: {
-        type: NumberConstructor;
-        default: number;
-    };
-}>> & Readonly<{}>, {
-    driveIndex: number;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;