estel/playtool-demo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add fs example and rename tauri imports

Browse Source
This commit is contained in:
Nicola Spadari
2024-07-02 21:43:29 +02:00
parent 2dd91d9ca3
commit 5f8de440d1
19 changed files with 8277 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Btn.vue
View File

@@ -1,5 +1,5 @@
<template>
<button transition-colors gap-1 rounded-md bg-emerald-500 px-3.5 py-2.5 text-sm text-white font-semibold shadow-sm hover="bg-emerald-600" focus-visible="outline-2 outline-emerald-600 outline-offset-2 outline">
<button class="disabled:(cursor-not-allowed opacity-60)" gap-1 rounded-md bg-emerald-500 px-3.5 py-2.5 text-sm text-white font-semibold shadow-sm transition-colors hover="bg-emerald-600" focus-visible="outline-2 outline-emerald-600 outline-offset-2 outline">
<slot />
</button>
</template>

6
src/components/Site/Navbar.vue
View File

@@ -21,8 +21,8 @@
<NavLink to="/os">
OS Informations
</NavLink>
<NavLink to="/foo">
404
<NavLink to="/file">
File
</NavLink>
</div>
<div hidden lg="flex flex-1 justify-end">
@@ -36,7 +36,7 @@
<script lang="ts" setup>
const { showSidebar } = useSidebar();
const tauriVersion = await getTauriVersion();
const tauriVersion = await useTauriAppGetTauriVersion();
</script>
<style scoped>

2
src/components/Site/Sidebar.vue
View File

@@ -44,7 +44,7 @@
</template>
<script lang="ts" setup>
const tauriVersion = await getTauriVersion();
const tauriVersion = await useTauriAppGetTauriVersion();
const { showSidebar } = useSidebar();
</script>

33
src/modules/tauri.ts
View File

@@ -3,24 +3,45 @@ import * as tauriApp from "@tauri-apps/api/app";
import * as tauriShell from "@tauri-apps/plugin-shell";
import * as tauriOs from "@tauri-apps/plugin-os";
import * as tauriNotification from "@tauri-apps/plugin-notification";
import * as tauriFs from "@tauri-apps/plugin-fs";
export default defineNuxtModule({
const capitalize = (name: string) => {
return name.charAt(0).toUpperCase() + name.slice(1);
};
export default defineNuxtModule<ModuleOptions>({
meta: {
name: "nuxt-tauri",
configKey: "nuxt-tauri"
},
setup() {
defaults: {
prefix: "useTauri"
},
setup(options) {
Object.keys(tauriApp).filter((name) => name !== "default").forEach((name) => {
addImports({ from: "@tauri-apps/api/app", name });
const prefix = `${options.prefix}App` || "";
const as = prefix ? prefix + capitalize(name) : name;
addImports({ from: "@tauri-apps/api/app", name, as });
});
Object.keys(tauriShell).filter((name) => name !== "default").forEach((name) => {
addImports({ from: "@tauri-apps/plugin-shell", name });
const prefix = `${options.prefix}Shell` || "";
const as = prefix ? prefix + capitalize(name) : name;
addImports({ from: "@tauri-apps/plugin-shell", name, as });
});
Object.keys(tauriOs).filter((name) => name !== "default").forEach((name) => {
addImports({ from: "@tauri-apps/plugin-os", name });
const prefix = `${options.prefix}Os` || "";
const as = prefix ? prefix + capitalize(name) : name;
addImports({ from: "@tauri-apps/plugin-os", name, as });
});
Object.keys(tauriNotification).filter((name) => name !== "default").forEach((name) => {
addImports({ from: "@tauri-apps/plugin-notification", name });
const prefix = `${options.prefix}Notification` || "";
const as = prefix ? prefix + capitalize(name) : name;
addImports({ from: "@tauri-apps/plugin-notification", name, as });
});
Object.keys(tauriFs).filter((name) => name !== "default").forEach((name) => {
const prefix = `${options.prefix}Fs` || "";
const as = prefix ? prefix + capitalize(name) : name;
addImports({ from: "@tauri-apps/plugin-fs", name, as });
});
}
});

2
src/pages/commands.vue
View File

@@ -34,7 +34,7 @@
const result = ref("");
const sendCommand = async () => {
const response = await Command.create("exec-sh", [
const response = await useTauriShellCommand.create("exec-sh", [
"-c",
input.value
]).execute();

69
src/pages/file.vue Normal file
View File

@@ -0,0 +1,69 @@
<template>
<LayoutTile
title="File System"
description="Access the file system. For this demo the only allowed permission is read/write to the Documents folder root."
>
<form @submit.prevent="createDummyFile()">
<div mx-auto max-w-xl lg="mr-0 max-w-lg">
<div grid grid-cols-1 gap-x-8 gap-y-6>
<div>
<label for="filename-input" block text-sm text-white font-semibold leading-6>
Text file name
<span text-neutral-400 font-light>(with extension)</span>
</label>
<div mt="2.5">
<input id="filename-input" v-model="fileName" type="text" name="filename-input" block w-full border-0 rounded-md bg="white/5" px="3.5" py-2 text-white shadow-sm ring-1 ring="white/10" ring-inset sm="text-sm leading-6" focus="ring-2 ring-emerald-500 ring-inset">
</div>
</div>
<div mt-8>
<label for="filecontent-input" block text-sm text-white font-semibold leading-6>File content</label>
<div mt="2.5">
<textarea id="filecontent-input" v-model="fileContent" name="filecontent-input" rows="10" block w-full border-0 rounded-md bg="white/5" px="3.5" py-2 text-white shadow-sm ring-1 ring="white/10" ring-inset sm="text-sm leading-6" focus="ring-2 ring-emerald-500 ring-inset" />
</div>
</div>
<div flex justify-end gap-3>
<div v-if="done" h-full flex-center text-emerald-400 space-x-1>
<p>Done</p>
<i-heroicons-solid-check size-4 />
</div>
<div v-if="error" h-full flex-center text-red-400 space-x-1>
<p>Error</p>
<i-heroicons-solid-exclamation-triangle size-4 />
</div>
<Btn type="submit" :disabled="fileName === ''">
Create file
</Btn>
</div>
</div>
</div>
</form>
</LayoutTile>
</template>
<script lang="ts" setup>
const fileName = ref("");
const fileContent = ref("");
const done = ref(false);
const error = ref(false);
const createDummyFile = async () => {
try {
const fileExists = await useTauriFsExists(fileName.value, {
baseDir: useTauriFsBaseDirectory.Document
});
if (!fileExists) {
await useTauriFsWriteTextFile(fileName.value, fileContent.value, {
baseDir: useTauriFsBaseDirectory.Document
});
done.value = true;
fileName.value = fileContent.value = "";
setTimeout(() => done.value = false, 3000);
}
} catch (err) {
console.error("Error creating file:", err);
error.value = true;
setTimeout(() => error.value = false, 3000);
}
};
</script>

6
src/pages/notifications.vue
View File

@@ -40,15 +40,15 @@
const permissionError = ref(false);
const createNotification = async () => {
let permissionGranted = await isPermissionGranted();
let permissionGranted = await useTauriNotificationIsPermissionGranted();
if (!permissionGranted) {
const permission = await requestPermission();
const permission = await useTauriNotificationRequestPermission();
permissionGranted = permission === "granted";
}
if (permissionGranted) {
sendNotification({
useTauriNotificationSendNotification({
title: notificationTitle.value,
body: notificationBody.value
});

8
src/pages/os.vue
View File

@@ -14,8 +14,8 @@
</template>
<script lang="ts" setup>
const currentPlatform = await platform();
const currentArch = await arch();
const currentVersion = await version();
const currentLocale = await locale() || "Not detectable";
const currentPlatform = await useTauriOsPlatform();
const currentArch = await useTauriOsArch();
const currentVersion = await useTauriOsVersion();
const currentLocale = await useTauriOsLocale() || "Not detectable";
</script>