feat(useFileSystemAccess): new function

README.md

@@ -7,7 +7,7 @@ Collection of essential Vue Composition Utilities
 <a href="https://www.npmjs.com/package/@vueuse/core" target="__blank"><img src="https://img.shields.io/npm/v/@vueuse/core?color=a1b858&label=" alt="NPM version"></a>
 <a href="https://www.npmjs.com/package/@vueuse/core" target="__blank"><img alt="NPM Downloads" src="https://img.shields.io/npm/dm/@vueuse/core?color=50a36f&label="></a>
 <a href="https://vueuse.org" target="__blank"><img src="https://img.shields.io/static/v1?label=&message=docs%20%26%20demos&color=1e8a7a" alt="Docs & Demos"></a>
-<img alt="Function Count" src="https://img.shields.io/badge/-187%20functions-13708a">
+<img alt="Function Count" src="https://img.shields.io/badge/-188%20functions-13708a">
 <br>
 <a href="https://github.com/vueuse/vueuse" target="__blank"><img alt="GitHub stars" src="https://img.shields.io/github/stars/vueuse/vueuse?style=social"></a>
 </p>

packages/core/index.ts

@@ -43,6 +43,7 @@ export * from './useEventSource'
 export * from './useEyeDropper'
 export * from './useFavicon'
 export * from './useFetch'
+export * from './useFileSystem'
 export * from './useFocus'
 export * from './useFocusWithin'
 export * from './useFps'

packages/core/useFileSystem/demo.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { useFileSystem } from '.'
+
+const { content, create, save, open } = useFileSystem()
+
+</script>
+
+<template>
+  <div>
+    <button @click="create">
+      new file
+    </button>
+    <button @click="open">
+      open
+    </button>
+    <button @click="save">
+      save
+    </button>
+
+    <div>
+      <textarea v-model="content" rows="20" cols="40" />
+    </div>
+  </div>
+</template>

packages/core/useFileSystem/index.md

@@ -0,0 +1,15 @@
+---
+category: Browser
+---
+
+# useFileSystem
+
+Creating, Reading and Writing local files.
+
+## Usage
+
+```ts
+import { useFileSystem } from '@vueuse/core'
+
+const { content, create, save, open } = useFileSystem()
+```

packages/core/useFileSystem/index.ts

@@ -0,0 +1,51 @@
+import { ref } from 'vue-demi'
+
+export function useFileSystem() {
+  const win = window as any
+  const isSupported = win.showSaveFilePicker && win.showOpenFilePicker
+
+  const fileHandle = ref()
+  const content = ref()
+
+  async function open() {
+    if (isSupported) {
+      const [handle] = await win.showOpenFilePicker({
+        multiple: false,
+      })
+      fileHandle.value = handle
+      await readContent()
+    }
+  }
+
+  async function create() {
+    if (isSupported) {
+      fileHandle.value = await win.showSaveFilePicker()
+      content.value = undefined
+    }
+  }
+
+  async function save() {
+    if (isSupported) {
+      if (!fileHandle.value)
+        // save as
+        fileHandle.value = await win.showSaveFilePicker()
+
+      const writableStream = await fileHandle.value.createWritable()
+      await writableStream.write(content.value)
+      await writableStream.close()
+    }
+  }
+
+  async function readContent() {
+    const file = await fileHandle.value.getFile()
+    content.value = await file.text()
+  }
+
+  return {
+    isSupported,
+    content,
+    open,
+    create,
+    save,
+  }
+}