@hostlink/nuxt-light 0.0.3

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

@@ -0,0 +1,78 @@
+<script setup>
+const props = defineProps({
+    modelValue: {
+        type: [String, Object],
+        required: false,
+        default: null
+    },
+    range: {
+        type: Boolean,
+        default: false
+    },
+    label: {
+        type: String,
+        default: ""
+    },
+});
+
+const emit = defineEmits(["update:modelValue"]);
+const popup = ref(null);
+const localValue = computed({
+    get: () => {
+        if (props.range) {
+            if (props.modelValue) {
+                return props.modelValue.from + " - " + props.modelValue.to
+            }
+        }
+        return props.modelValue
+    },
+    set: (value) => {
+        console.log(value);
+        popup.value.hide();
+        emit('update:modelValue', value)
+    }
+
+});
+
+const rules = [];
+
+
+
+rules.push((val) => {
+
+    if (props.range) {
+        return;
+    }
+
+    if (props.required) {
+        //check val is YYYY-MM-DD
+        if (!val.match(/^\d{4}-\d{2}-\d{2}$/)) {
+            return "Invalid date format";
+        }
+
+    }
+    return;
+});
+
+const localLabel = computed(() => {
+
+    return t(props.label);
+
+});
+
+</script>
+<template>
+    <q-input v-model="localValue" :rules="rules" :label="localLabel" hide-bottom-space>
+        <template v-slot:prepend>
+            <q-btn icon="sym_o_event" round dense flat>
+                <q-popup-proxy cover transition-show="scale" transition-hide="scale" ref="popup">
+                    <q-date v-model="localValue" mask="YYYY-MM-DD" :range="range">
+                        <div class="row items-center justify-end">
+                            <q-btn v-close-popup label="Close" color="primary" flat />
+                        </div>
+                    </q-date>
+                </q-popup-proxy>
+            </q-btn>
+        </template>
+    </q-input>
+</template>

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

@@ -0,0 +1,23 @@
+<script setup>
+
+import { useQuasar } from 'quasar';
+
+const props = defineProps(["to"]);
+
+const emit = defineEmits(["submit"]);
+
+const qua = useQuasar();
+const onDelete = () => {
+    qua.dialog({
+        title: "Delete",
+        message: "Are you sure you want to delete this record?",
+        cancel: true,
+        persistent: true
+    }).onOk(async () => {
+        emit("submit");
+    })
+}
+</script>
+<template>
+    <q-btn flat round dense icon="sym_o_delete" @click="onDelete" />
+</template>

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

@@ -0,0 +1,3 @@
+<template>
+     <q-btn flat round dense icon="sym_o_edit" to="edit" />
+</template>

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

@@ -0,0 +1,55 @@
+<script setup>
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: ""
+  }
+})
+
+const emit = defineEmits(['update:modelValue'])
+const toggleLabel = (type) => {
+
+  if (props.modelValue == type) {
+    emit('update:modelValue', null)
+  } else {
+    emit('update:modelValue', type)
+  }
+}
+
+</script>
+<template>
+  <q-item-label header>
+    {{ $t('Labels') }}
+  </q-item-label>
+  <q-item clickable :active="modelValue == 'document'" @click="toggleLabel('document')">
+    <q-item-section avatar>
+      <q-icon name="sym_o_article" />
+    </q-item-section>
+    <q-item-section> {{ $t('Documents') }} </q-item-section>
+  </q-item>
+  <q-item clickable :active="modelValue == 'image'" @click="toggleLabel('image')">
+    <q-item-section avatar>
+      <q-icon name="sym_o_insert_photo" />
+    </q-item-section>
+    <q-item-section> {{ $t('Images') }} </q-item-section>
+  </q-item>
+  <q-item clickable :active="modelValue == 'video'" @click="toggleLabel('video')">
+    <q-item-section avatar>
+      <q-icon name="sym_o_videocam" />
+    </q-item-section>
+    <q-item-section> {{ $t('Videos') }} </q-item-section>
+  </q-item>
+  <q-item clickable :active="modelValue == 'audio'" @click="toggleLabel('audio')">
+    <q-item-section avatar>
+      <q-icon name="sym_o_audiotrack" />
+    </q-item-section>
+    <q-item-section> {{ $t('Audio') }} </q-item-section>
+  </q-item>
+  <q-item clickable :active="modelValue == 'other'" @click="toggleLabel('other')">
+    <q-item-section avatar>
+      <q-icon name="sym_o_text_snippet" />
+    </q-item-section>
+    <q-item-section> {{ $t('Archives') }} </q-item-section>
+  </q-item>
+</template>

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

@@ -0,0 +1,185 @@
+<script setup>
+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 qua = useQuasar();
+
+watch(folder, async () => {
+  folders.value = await q("fsListFolders", { path: folder.value }, ["name", "path"]);
+});
+
+const clickBack = () => {
+  folder.value = parent.value;
+
+}
+
+const title = computed(() => {
+  if (folder.value) {
+    return folder.value.split("/").pop();
+  }
+  return "";
+});
+
+const newFolder = ref(null);
+
+const onClickCreate = async () => {
+  let f = selected.value + "/" + newFolder.value;
+  await m("fsCreateFolder", { path: f });
+
+  folder.value = f;
+
+  mode.value = "move";
+}
+
+const menu = ref(null);
+const onClickMove = async () => {
+  qua.dialog({
+    title: "Move",
+    message: "Are you sure you want to move?",
+    cancel: true,
+    persistent: true,
+  }).onOk(async () => {
+
+
+    menu.value.hide();
+    emit("selected", selected.value);
+    selected.value = "/";
+    parent.value = null;
+    folder.value = "/";
+
+
+  })
+}
+
+</script >
+<template>
+  <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>
+            {{ title }}
+          </template>
+        </q-toolbar-title>
+      </q-toolbar>
+
+      <template v-if="mode == 'empty folder'">
+        <q-card-section> Empty folder</q-card-section>
+      </template>
+
+      <template v-if="mode == 'create'">
+        <q-card-section> Create folder at "{{ selected }}" </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-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>
+          </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>
+        <q-space></q-space>
+        <q-btn dense label="Move to here" color="primary" v-if="mode == 'empty folder'">
+        </q-btn>
+        <q-btn dense label="Move" outline color="primary" v-if="mode == 'move'" @click="onClickMove"></q-btn>
+      </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> -->

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

@@ -0,0 +1,59 @@
+<script setup>
+const props = defineProps(["modelValue"]);
+
+const file = await q("fsFile", {
+  path: props.modelValue.path
+}, ["canPreview"])
+
+</script >
+<template>
+  <template v-if="canPreviewImage">
+    <q-img :src="imagePath"></q-img>
+  </template>
+
+  {{ file }}
+  <q-list dense>
+    <q-item>
+      <q-item-section>
+        <q-item-label>Name</q-item-label>
+      </q-item-section>
+      <q-item-section side>{{ modelValue.name }} </q-item-section>
+    </q-item>
+    <q-item>
+      <q-item-section>
+        <q-item-label>Size</q-item-label>
+      </q-item-section>
+      <q-item-section side>{{ 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>{{ modelValue.path }} </q-item-section>
+    </q-item>
+  </q-list>
+</template>
+
+<!-- <script >
+import { getEndpoint } from "../lib";
+export default {
+  props: {
+    value: Object,
+  },
+
+  computed: {
+    imagePath() {
+      return getEndpoint() + `photo/0${this.value.path}?w=200`;
+    },
+    canPreviewImage() {
+      if (this.value.type == "folder") return false;
+
+      if (this.value.mime_type == "image/jpeg") return true;
+      if (this.value.mime_type == "image/png") return true;
+      if (this.value.mime_type == "image/gif") return true;
+
+      return false;
+    },
+  },
+};
+</script> -->