@hostlink/nuxt-light 1.61.0 → 1.62.1

package/dist/module.json

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

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

@@ -5,9 +5,9 @@ type __VLS_ModelProps = {
     modelValue?: any;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_36: string, __VLS_37: any;
+declare var __VLS_38: string, __VLS_39: any;
 type __VLS_Slots = {} & {
-    [K in NonNullable<typeof __VLS_36>]?: (props: typeof __VLS_37) => any;
+    [K in NonNullable<typeof __VLS_38>]?: (props: typeof __VLS_39) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: any) => any;

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

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, watch } from "vue";
+import { ref, computed, watch, nextTick } from "vue";
 import { useLight } from "#imports";
 import { QInput } from "quasar";
 const modelValue = defineModel({ type: null, ...{
@@ -88,49 +88,29 @@ const props = defineProps({
 });
 const light = useLight();
 const popup = ref(null);
+const inputValue = ref("");
+const isInternalUpdate = ref(false);
+function modelToString(val) {
+  if (!val) return "";
+  if (typeof val === "object" && val.from) {
+    return val.from + (val.to ? " to " + val.to : "");
+  }
+  return val || "";
+}
 watch(modelValue, (newVal) => {
-  popup.value.hide();
-});
-const localValue = computed({
-  get: () => {
-    if (!modelValue.value) {
-      return modelValue.value;
-    }
-    if (typeof modelValue.value === "object") {
-      let s = modelValue.value.from;
-      if (modelValue.value.to) {
-        s += " to " + modelValue.value.to;
-      }
-      return s;
-    }
-    return modelValue.value;
-  },
-  set: (val) => {
-    if (props.range) {
-      if (val == null || val == "") {
-        modelValue.value = null;
-        return;
-      }
-      const parts = val.split(" to ");
-      if (parts.length == 2) {
-        const from = parts[0];
-        const to = parts[1];
-        if (from.match(/^\d{4}-\d{2}-\d{2}$/) && to.match(/^\d{4}-\d{2}-\d{2}$/)) {
-          modelValue.value = { from, to };
-          return;
-        }
-      }
-      modelValue.value = null;
-      return;
-    }
-    modelValue.value = val;
+  if (isInternalUpdate.value) {
+    isInternalUpdate.value = false;
+    return;
   }
-});
+  inputValue.value = modelToString(newVal);
+  popup.value?.hide();
+}, { deep: true, immediate: true });
 const inputMask = computed(() => {
   if (!props.range) {
     return "####-##-##";
+  } else {
+    return "####-##-## to ####-##-##";
   }
-  return "";
 });
 const inputRules = computed(() => {
   const rules = [];
@@ -147,7 +127,8 @@ const inputRules = computed(() => {
   return null;
 });
 const inputProps = computed(() => {
-  const { mask, locale, calendar, modelValue: modelValue2, defautYearMonth, defaultView, events, ...rest } = light.getInputProps(props);
+  const { mask, locale, calendar, modelValue: modelValue2, defautYearMonth, defaultView, events, emitImmediately, ...rest } = light.getInputProps(props);
+  delete rest["onUpdate:modelValue"];
   return rest;
 });
 const dateProps = computed(() => {
@@ -183,10 +164,36 @@ const dateProps = computed(() => {
   } = props;
   return rest;
 });
+const onUpdateInput = (val) => {
+  isInternalUpdate.value = true;
+  if (props.range) {
+    if (val == null || val === "") {
+      modelValue.value = null;
+      return;
+    }
+    const parts = val.split(" to ");
+    if (parts.length === 2) {
+      const from = parts[0] || "";
+      const to = parts[1] || "";
+      if (from.match(/^\d{4}-\d{2}-\d{2}$/) && to.match(/^\d{4}-\d{2}-\d{2}$/)) {
+        modelValue.value = { from, to };
+        return;
+      }
+      if (from.match(/^\d{4}-\d{2}-\d{2}$/) && to === "") {
+        modelValue.value = from;
+        return;
+      }
+    }
+    modelValue.value = null;
+    return;
+  }
+  modelValue.value = val;
+};
 </script>
 
 <template>
-    <q-input v-model="localValue" :mask="inputMask" :rules="inputRules" v-bind="inputProps">
+    <q-input :mask="inputMask" :rules="inputRules" v-bind="inputProps" @update:model-value="onUpdateInput"
+        v-model="inputValue">
         <template v-slot:prepend>
             <q-icon name="sym_o_event" class="cursor-pointer">
                 <q-popup-proxy cover transition-show="scale" transition-hide="scale" ref="popup">

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

@@ -5,9 +5,9 @@ type __VLS_ModelProps = {
     modelValue?: any;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_36: string, __VLS_37: any;
+declare var __VLS_38: string, __VLS_39: any;
 type __VLS_Slots = {} & {
-    [K in NonNullable<typeof __VLS_36>]?: (props: typeof __VLS_37) => any;
+    [K in NonNullable<typeof __VLS_38>]?: (props: typeof __VLS_39) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: any) => any;

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>;