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

Refactor with new styling convention

Browse Source
This commit is contained in:
Nicola Spadari
2025-01-02 21:58:06 +01:00
parent dfb48cf7ee
commit c1752c0701
19 changed files with 108 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
app/pages/[...all].vue
View File

@@ -1,17 +1,17 @@
<template>
<div grid place-items-center px-6 py-24 sm="py-32" lg="px-8">
<div text-center>
<p text-base text-emerald-500 font-semibold>
<div clas="grid place-items-center px-6 py-24" sm="py-32" lg="px-8">
<div class="text-center">
<p class="text-base text-emerald-500 font-semibold">
404
</p>
<h1 mt-4 text-3xl text-neutral-300 font-bold tracking-tight sm="text-5xl">
<h1 class="mt-4 text-3xl text-neutral-300 font-bold tracking-tight" sm="text-5xl">
Page not found
</h1>
<p mt-6 text-base text-neutral-400 leading-7>
<p class="mt-6 text-base text-neutral-400 leading-7">
Sorry, we couldn't find the page you're looking for.
</p>
<div mt-10 flex items-center justify-center gap-x-6>
<Hyperlink to="/" px-7>
<div class="mt-10 flex items-center justify-center gap-x-6">
<Hyperlink to="/" class="px-7">
Back
</Hyperlink>
</div>

18
app/pages/commands.vue
View File

@@ -4,23 +4,23 @@
description="Access the system shell. Allows you to spawn child processes and manage files and URLs using their default application."
>
<form @submit.prevent="sendCommand()">
<div mx-auto max-w-xl lg="mr-0 max-w-lg">
<div grid grid-cols-1 gap-x-8 gap-y-6>
<div class="mx-auto max-w-xl" lg="mr-0 max-w-lg">
<div class="grid grid-cols-1 gap-x-8 gap-y-6">
<div>
<label for="command-input" block text-sm text-white font-semibold leading-6>Command input</label>
<label for="command-input" class="block text-sm text-white font-semibold leading-6">Command input</label>
<div mt="2.5">
<input id="command-input" v-model="input" type="text" name="command-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">
<input id="command-input" v-model="input" type="text" name="command-input" class="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>
<div class="flex justify-end">
<Btn type="submit">
Send command
</Btn>
</div>
<div mt-8>
<label for="command-output" block text-sm text-white font-semibold leading-6>Command Output</label>
<div mt="2.5">
<textarea id="command-output" v-model="result" name="command-output" 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 class="mt-8">
<label for="command-output" class="block text-sm text-white font-semibold leading-6">Command Output</label>
<div class="mt-2.5">
<textarea id="command-output" v-model="result" name="command-output" rows="10" class="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>

28
app/pages/file.vue
View File

@@ -4,31 +4,31 @@
description="Access the file system. For this demo the only allowed permission is read/write to the Documents folder (no sub directories)."
>
<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 class="mx-auto max-w-xl" lg="mr-0 max-w-lg">
<div class="grid grid-cols-1 gap-x-8 gap-y-6">
<div>
<label for="filename-input" block text-sm text-white font-semibold leading-6>
<label for="filename-input" class="block text-sm text-white font-semibold leading-6">
Text file name
<span text-neutral-400 font-light>(with extension)</span>
<span class="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 class="mt-2.5">
<input id="filename-input" v-model="fileName" type="text" name="filename-input" class="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 class="mt-8">
<label for="filecontent-input" class="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" />
<textarea id="filecontent-input" v-model="fileContent" name="filecontent-input" rows="10" class="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>
<div class="flex justify-end gap-3">
<div v-if="done" class="h-full flex-center text-emerald-400 space-x-1">
<p>Done</p>
<Icon name="heroicons-solid:check" size-4 />
<Icon name="heroicons-solid:check" class="size-4" />
</div>
<div v-if="error" h-full flex-center text-red-400 space-x-1>
<div v-if="error" class="h-full flex-center text-red-400 space-x-1">
<p>Error</p>
<Icon name="heroicons-solid:exclamation-triangle" size-4 />
<Icon name="heroicons-solid:exclamation-triangle" class="size-4" />
</div>
<Btn type="submit" :disabled="fileName === ''">
Create file

24
app/pages/index.vue
View File

@@ -1,27 +1,27 @@
<template>
<div relative overflow-hidden px-6 lg="px-8">
<div grid mx-auto h-screen max-w-2xl place-content-center>
<SvgoLogo :filled="true" :font-controlled="false" mx-auto mb-8 size-40 />
<div class="relative overflow-hidden px-6" lg="px-8">
<div class="grid mx-auto h-screen max-w-2xl place-content-center">
<SvgoLogo :filled="true" :font-controlled="false" class="mx-auto mb-8 size-40" />
<div text-center>
<h1 animate-pulse text-4xl text-light-300 font-bold tracking-wider font-heading sm="text-6xl">
<div class="text-center">
<h1 class="animate-pulse text-4xl text-light-300 font-bold tracking-wider font-heading" sm="text-6xl">
{{ name.toUpperCase() }}
</h1>
<p mt-5 flex gap-1 text-neutral-300 leading-8>
<p class="mt-5 flex gap-1 text-neutral-300 leading-8">
Powered by
<NuxtLink :to="nuxtSite" target="_blank" text-accent underline>
<NuxtLink :to="nuxtSite" target="_blank" class="text-accent underline">
Nuxt 3
</NuxtLink>
-
<NuxtLink :to="tauriSite" target="_blank" text-accent underline>
<NuxtLink :to="tauriSite" target="_blank" class="text-accent underline">
Tauri 2
</NuxtLink>
-
<NuxtLink :to="unoSite" target="_blank" text-accent underline>
<NuxtLink :to="unoSite" target="_blank" class="text-accent underline">
UnoCSS
</NuxtLink>
</p>
<div mt-15>
<div class="mt-15">
<Hyperlink :to="repo">
Star on GitHub
</Hyperlink>
@@ -29,8 +29,8 @@
</div>
</div>
<div fixed bottom-6 text-sm absolute-center-h>
<p text-sm text-neutral-500>
<div class="fixed bottom-6 text-sm absolute-center-h">
<p class="text-sm text-neutral-500">
Made by {{ author }}
</p>
</div>

16
app/pages/notifications.vue
View File

@@ -4,18 +4,18 @@
description="Send native notifications to the client using the notification plugin."
>
<form @submit.prevent="createNotification()">
<div class="mx-auto max-w-xl lg:mr-0 lg:max-w-lg">
<div class="mx-auto max-w-xl" lg="mr-0 max-w-lg">
<div class="grid grid-cols-1 gap-x-8 gap-y-6">
<div>
<label for="notification-title" block text-sm text-white font-semibold leading-6>Notification title</label>
<div mt="2.5">
<input id="notification-title" v-model="notificationTitle" type="text" name="notification-title" 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">
<label for="notification-title" class="block text-sm text-white font-semibold leading-6">Notification title</label>
<div class="mt-2.5">
<input id="notification-title" v-model="notificationTitle" type="text" name="notification-title" class="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>
<label for="notification-body" block text-sm text-white font-semibold leading-6>Notification body</label>
<div mt="2.5">
<input id="notification-body" v-model="notificationBody" type="text" name="notification-body" 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">
<label for="notification-body" class="block text-sm text-white font-semibold leading-6">Notification body</label>
<div class="mt-2.5">
<input id="notification-body" v-model="notificationBody" type="text" name="notification-body" class="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>
@@ -25,7 +25,7 @@
</Btn>
</div>
<p v-if="permissionError" mt-3 text-right text-sm text-red-500 font-semibold leading-6>
<p v-if="permissionError" class="mt-3 text-right text-sm text-red-500 font-semibold leading-6">
Missing permissions
</p>
</div>

4
app/pages/os.vue
View File

@@ -3,8 +3,8 @@
title="OS Information"
description="Read information about the operating system using the OS Information plugin."
>
<div overflow-hidden rounded-lg bg-neutral-800 shadow>
<dl divide-y divide-neutral-600>
<div class="overflow-hidden rounded-lg bg-neutral-800 shadow">
<dl class="divide-y divide-neutral-600">
<TabRow heading="Platform" :body="`${currentPlatform} ${currentVersion}`" />
<TabRow heading="Arch" :body="currentArch" />
<TabRow heading="Locale" :body="currentLocale" />

27
app/pages/store.vue
View File

@@ -4,23 +4,23 @@
description="Persistent key-value store. Allows you to handle state to a file which can be saved and loaded on demand including between app restarts."
>
<form @submit.prevent="setStoreValue()">
<div mx-auto max-w-xl lg="mr-0 max-w-lg">
<div grid grid-cols-1 gap-x-8 gap-y-6>
<div class="mx-auto max-w-xl" lg="mr-0 max-w-lg">
<div class="grid grid-cols-1 gap-x-8 gap-y-6">
<div>
<label for="store-value" block text-sm text-white font-semibold leading-6>Store value</label>
<div mt="2.5">
<input id="store-value" v-model="input" type="text" name="store-value" 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">
<label for="store-value" class="block text-sm text-white font-semibold leading-6">Store value</label>
<div class="mt-2.5">
<input id="store-value" v-model="input" type="text" name="store-value" class="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>
<div class="flex justify-end">
<Btn type="submit">
Send command
</Btn>
</div>
<div mt-8>
<label for="store-data" block text-sm text-white font-semibold leading-6>Current Store data</label>
<div mt="2.5">
<textarea id="store-data" v-model="result" name="store-data" 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 class="mt-8">
<label for="store-data" class="block text-sm text-white font-semibold leading-6">Current Store data</label>
<div class="mt-2.5">
<textarea id="store-data" v-model="result" name="store-data" rows="10" class="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>
@@ -34,13 +34,13 @@
const result = ref("");
const autosave = ref(false);
const store = await useTauriStoreCreateStore("store.bin", {
autosave: autosave.value
const store = await useTauriStoreLoad("store.bin", {
autoSave: autosave.value
});
const getStoreValue = async () => {
try {
result.value = await store.get<string>("myData");
result.value = await store.get<string>("myData") || "";
} catch (error) {
result.value = JSON.stringify(error, null, 4);
}
@@ -51,7 +51,6 @@
const setStoreValue = async () => {
try {
await store.set("myData", input.value);
await getStoreValue();
} catch (error) {
result.value = JSON.stringify(error, null, 4);