feat: add vueuse

Author: antfu

components.d.ts

@@ -7,6 +7,7 @@ declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     AppButton: typeof import('./src/components/AppButton.vue')['default']
     AppImage: typeof import('./src/components/AppImage.vue')['default']
+    AppImageDropzone: typeof import('./src/components/AppImageDropzone.vue')['default']
     BoardCard: typeof import('./src/components/BoardCard.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']

package-lock.json

@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "@vue/apollo-composable": "^4.0.0-alpha.18",
+    "@vueuse/core": "^8.9.2",
     "graphql-tag": "^2.12.6",
     "lodash-es": "^4.17.21",
     "unplugin-vue-components": "^0.20.1",

package.json

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { useBase64, useDropZone } from "@vueuse/core";
+import { ref } from "vue";
+
+const dropzoneEl = ref<HTMLElement | null>(null);
+const file = ref();
+const { base64: url } = useBase64(file);
+const { isOverDropZone } = useDropZone(dropzoneEl, (files) => {
+  if (!files) return;
+  file.value = files[0];
+  console.log(file.value);
+});
+
+function onFileChange(e: any) {
+  file.value = e.target.files[0];
+  console.log(file.value);
+}
+
+function reset() {
+  file.value = null;
+}
+</script>
+
+<template>
+  <div
+    ref="dropzoneEl"
+    class="flex m-4"
+    :class="{
+      border: isOverDropZone,
+      'bg-orange-100': isOverDropZone,
+      'border-orange-400': isOverDropZone,
+    }"
+    style="width: 300px; height: 200px; background: #3332; position: relative"
+  >
+    <div class="m-auto opacity-50">Drop a image over or select</div>
+    <div v-if="url" class="absolute left-0 top-0 bottom-0 right-0 object-cover">
+      <img :src="url" class="h-full" />
+    </div>
+    <input
+      class="absolute z-1 left-0 top-0 bottom-0 right-0 opacity-0"
+      type="file"
+      accept="image/*"
+      @input="onFileChange"
+    />
+  </div>
+  <button @click="reset">Reset</button>
+</template>

src/components/AppImageDropzone.vue

@@ -1,15 +1,14 @@
 <script setup lang="ts">
-
 import { Drawer, DrawerContent } from "@progress/kendo-vue-layout";
-
+import { useLocalStorage } from "@vueuse/core";
 import { useRouter } from "vue-router";
 
 import { computed, ref } from "vue";
 
-// const router = useRouter(); 
+// const router = useRouter();
 const selectedId = ref(0);
 
-const expanded = ref(false);
+const expanded = useLocalStorage("vue-forge-drawer-expanded", true);
 const expandedIcon = computed(() =>
   expanded.value ? "k-i-arrow-chevron-left" : "k-i-arrow-chevron-right"
 );
@@ -50,16 +49,22 @@ function onSelect({ itemIndex }: { itemIndex: number }) {
   if (item.data.path) router.push(item.data.path);
   if (typeof item.data.action === "function") item.data.action();
 }
-
 </script>
 
 <template>
-    <Drawer class="h-[90vh]" :expanded="expanded" position="start" mode="push" :mini="true" :items="items"
-        @select="onSelect">
-        <DrawerContent>
-            <div class="px-5">
-                <router-view />
-            </div>
-        </DrawerContent>
-    </Drawer>
-</template>
+  <Drawer
+    class="h-[90vh]"
+    :expanded="expanded"
+    position="start"
+    mode="push"
+    :mini="true"
+    :items="items"
+    @select="onSelect"
+  >
+    <DrawerContent>
+      <div class="px-5">
+        <router-view />
+      </div>
+    </DrawerContent>
+  </Drawer>
+</template>

src/components/TheDrawer.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import AppImageDropzone from "../../components/AppImageDropzone.vue";
+</script>
+
+<template>
+  <AppImageDropzone />
+</template>