mirror of
https://github.com/tauri-apps/tauri.git
synced 2024-12-29 14:04:19 +03:00
API example new ui (#1310)
Co-authored-by: Lucas Nogueira <lucas@tauri.studio>
This commit is contained in:
Alve Larsson
GitHub
parent
4c9d419eec
commit
53fd48e811
@ -5,7 +5,7 @@ In the future, this app will be used on Tauri's integration tests.
|
||||
|
||||
|
||||
## Running the example
|
||||
- Install dependencies
|
||||
- Install dependencies (Run inside of this folder tauri/examples/api/)
|
||||
```bash
|
||||
# with yarn
|
||||
$ yarn
|
||||
@ -13,12 +13,25 @@ $ yarn
|
||||
$ npm install
|
||||
```
|
||||
|
||||
- Compile the app
|
||||
- Compile tauri
|
||||
go to root of the tauri repo and run
|
||||
|
||||
Linux / Mac:
|
||||
```
|
||||
sh .scripts/setup.sh
|
||||
```
|
||||
|
||||
Windows:
|
||||
```
|
||||
./.scripts/setup.ps1
|
||||
```
|
||||
|
||||
- Compile the app (Run inside of this folder tauri/examples/api/)
|
||||
```bash
|
||||
# with yarn
|
||||
$ yarn tauri:build
|
||||
$ yarn tauri dev
|
||||
# with npm
|
||||
$ npm run tauri:build
|
||||
$ npm run tauri dev
|
||||
```
|
||||
|
||||
- Run the app
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,15 +1,25 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Tauri&display=swap');
|
||||
|
||||
* {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-family: Tauri, Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #889;
|
||||
background: #18191a;
|
||||
}
|
||||
|
||||
.noselect {
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.logo-container {
|
||||
width: 95%;
|
||||
margin: 0px auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.logo-link {
|
||||
@ -30,35 +40,37 @@ body {
|
||||
}
|
||||
|
||||
#response {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
right: 10px;
|
||||
top: 440px;
|
||||
min-height: 110px;
|
||||
background: #aab;
|
||||
height:100%;
|
||||
max-height: 100%;
|
||||
margin-top: 1em;
|
||||
background: rgb(36, 37, 38);
|
||||
color: #f0f4f5;
|
||||
border: solid 1px rgba(255, 255, 255, 0.055);
|
||||
box-shadow: 0 1px 5px 0 rgb(0 0 0 / 20%);
|
||||
font-family: "Courier New", Courier, monospace;
|
||||
font-size: 12px;
|
||||
word-wrap: break-word;
|
||||
padding: 5px;
|
||||
border-radius: 5px;
|
||||
padding: 0px 15px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
input,
|
||||
select {
|
||||
background: white;
|
||||
select, textarea {
|
||||
background: rgb(53, 53, 53);
|
||||
color: #fff;
|
||||
font-family: system-ui, sans-serif;
|
||||
border: 0;
|
||||
border: none !important;
|
||||
border-radius: 0.25rem;
|
||||
font-size: 1rem;
|
||||
line-height: 1.2;
|
||||
padding: 0.25rem 0.5rem;
|
||||
margin: 0.25rem;
|
||||
transition: 0.2s ease;
|
||||
}
|
||||
|
||||
button:hover,
|
||||
button:focus {
|
||||
background: #0053ba;
|
||||
background: #ffe07a;
|
||||
}
|
||||
|
||||
button:focus {
|
||||
@ -73,8 +85,8 @@ button:active {
|
||||
.button {
|
||||
border: 0;
|
||||
border-radius: 0.25rem;
|
||||
background: #1e88e5;
|
||||
color: white;
|
||||
background: #67D6ED;
|
||||
color: rgb(0, 0, 0);
|
||||
font-family: system-ui, sans-serif;
|
||||
font-size: 1rem;
|
||||
line-height: 1.2;
|
||||
@ -83,6 +95,7 @@ button:active {
|
||||
padding: 0.25rem 0.5rem;
|
||||
margin: 0.25rem;
|
||||
cursor: pointer;
|
||||
transition: 0.2s ease;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
@ -99,64 +112,51 @@ button:active {
|
||||
.dark-link {
|
||||
color: white;
|
||||
text-decoration: none !important;
|
||||
padding: 0.5em;
|
||||
background: rgb(36, 37, 38);
|
||||
transition: 0.2s ease;
|
||||
border: solid 1px rgba(255, 255, 255, 0.055);
|
||||
box-shadow: 0 1px 5px 0 rgb(0 0 0 / 20%);
|
||||
}
|
||||
|
||||
.tabs-container {
|
||||
position: fixed;
|
||||
height: 400px;
|
||||
top: 20px;
|
||||
left: 10px;
|
||||
right: 10px;
|
||||
z-index: 9;
|
||||
.dark-link:hover{
|
||||
background: #3d392a;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
position: relative;
|
||||
min-height: 400px;
|
||||
clear: both;
|
||||
.nv{
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
transition: 0.25s ease;
|
||||
}
|
||||
|
||||
.tab {
|
||||
float: left;
|
||||
.nv:hover{
|
||||
color: #ffe07a;
|
||||
padding-left: 8px;
|
||||
border-left: solid 5px #ffe07a;
|
||||
}
|
||||
|
||||
.tab > label {
|
||||
background: #eee;
|
||||
padding: 10px;
|
||||
border: 1px solid transparent;
|
||||
margin-left: -1px;
|
||||
position: relative;
|
||||
left: 1px;
|
||||
}
|
||||
|
||||
.tabs > .tabber {
|
||||
border-top-left-radius: 5px;
|
||||
}
|
||||
|
||||
.tabs > .tabber ~ .tabber {
|
||||
border-top-left-radius: none;
|
||||
}
|
||||
|
||||
.tab [type="radio"] {
|
||||
display: none;
|
||||
.nv_selected{
|
||||
color: #67D6ED;
|
||||
padding-left: 8px;
|
||||
border-left: solid 5px #67D6ED;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: absolute;
|
||||
top: 28px;
|
||||
left: 0;
|
||||
background: #bbc;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgb(36, 37, 38);
|
||||
color: #f0f4f5;
|
||||
padding: 20px;
|
||||
border: 1px solid transparent;
|
||||
border-top-right-radius: 5px;
|
||||
border-bottom-left-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
width: 100%;
|
||||
border: solid 1px rgba(255, 255, 255, 0.055);
|
||||
box-shadow: 0 1px 5px 0 rgb(0 0 0 / 20%);
|
||||
}
|
||||
|
||||
main{
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
[type="radio"]:checked ~ label {
|
||||
background: #bbc;
|
||||
background: rgb(36, 37, 38);
|
||||
color: #67D6ED;
|
||||
border-bottom: 1px solid transparent;
|
||||
z-index: 2;
|
||||
}
|
||||
@ -164,3 +164,19 @@ button:active {
|
||||
[type="radio"]:checked ~ label ~ .content {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.row {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.col {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.just-around{
|
||||
justify-content: space-between;
|
||||
}
|
||||
BIN
examples/api/public/tauri.png
Normal file
BIN
examples/api/public/tauri.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 35 KiB After Width: | Height: | Size: 61 KiB |
@ -1,52 +1,66 @@
|
||||
<script>
|
||||
import { onMount } from "svelte";
|
||||
import { open } from "@tauri-apps/api/window"
|
||||
import { open } from "@tauri-apps/api/window";
|
||||
|
||||
import Cli from './components/Cli.svelte'
|
||||
import Communication from './components/Communication.svelte'
|
||||
import Dialog from './components/Dialog.svelte'
|
||||
import FileSystem from './components/FileSystem.svelte'
|
||||
import Http from './components/Http.svelte'
|
||||
import Notifications from './components/Notifications.svelte'
|
||||
import Window from './components/Window.svelte'
|
||||
import Shortcuts from './components/Shortcuts.svelte'
|
||||
import Cli from "./components/Cli.svelte";
|
||||
import Communication from "./components/Communication.svelte";
|
||||
import Dialog from "./components/Dialog.svelte";
|
||||
import FileSystem from "./components/FileSystem.svelte";
|
||||
import Http from "./components/Http.svelte";
|
||||
import Notifications from "./components/Notifications.svelte";
|
||||
import Window from "./components/Window.svelte";
|
||||
import Shortcuts from "./components/Shortcuts.svelte";
|
||||
import Welcome from "./components/Welcome.svelte";
|
||||
|
||||
const views = [{
|
||||
label: 'Messages',
|
||||
component: Communication
|
||||
}, {
|
||||
label: 'CLI',
|
||||
component: Cli
|
||||
}, {
|
||||
label: 'Dialog',
|
||||
component: Dialog
|
||||
}, {
|
||||
label: 'File system',
|
||||
component: FileSystem
|
||||
}, {
|
||||
label: 'HTTP',
|
||||
component: Http
|
||||
}, {
|
||||
label: 'Notifications',
|
||||
component: Notifications
|
||||
}, {
|
||||
label: 'Window',
|
||||
component: Window
|
||||
}, {
|
||||
label: 'Shortcuts',
|
||||
component: Shortcuts
|
||||
}]
|
||||
const views = [
|
||||
{
|
||||
label: "Welcome",
|
||||
component: Welcome,
|
||||
},
|
||||
{
|
||||
label: "Messages",
|
||||
component: Communication,
|
||||
},
|
||||
{
|
||||
label: "CLI",
|
||||
component: Cli,
|
||||
},
|
||||
{
|
||||
label: "Dialog",
|
||||
component: Dialog,
|
||||
},
|
||||
{
|
||||
label: "File system",
|
||||
component: FileSystem,
|
||||
},
|
||||
{
|
||||
label: "HTTP",
|
||||
component: Http,
|
||||
},
|
||||
{
|
||||
label: "Notifications",
|
||||
component: Notifications,
|
||||
},
|
||||
{
|
||||
label: "Window",
|
||||
component: Window,
|
||||
},
|
||||
{
|
||||
label: "Shortcuts",
|
||||
component: Shortcuts,
|
||||
},
|
||||
];
|
||||
|
||||
let selected = views[0].label;
|
||||
let selected = views[0];
|
||||
|
||||
let response = '';
|
||||
let responses = [""];
|
||||
|
||||
function select(view) {
|
||||
selected = view.label
|
||||
selected = view;
|
||||
}
|
||||
|
||||
function onMessage(value) {
|
||||
response = typeof value === "string" ? value : JSON.stringify(value);
|
||||
responses += typeof value === "string" ? value : JSON.stringify(value);
|
||||
}
|
||||
|
||||
function onLogoClick() {
|
||||
@ -55,36 +69,57 @@
|
||||
</script>
|
||||
|
||||
<main>
|
||||
<div class="logo-container">
|
||||
<img src="icon.png" class="logo" on:click={onLogoClick} alt="logo" />
|
||||
</div>
|
||||
|
||||
<div class="tabs-container">
|
||||
<div class="tabs">
|
||||
{#each views as view}
|
||||
<div class="tab">
|
||||
<input id={`tab-${view.label}`} type="radio" checked={view.label===selected} />
|
||||
<label for={`tab-${view.label}`} class="tabber" on:click={()=> select(view)}>{view.label}</label>
|
||||
<div class="content">
|
||||
<svelte:component this={view.component} {onMessage} />
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
<div class="flex row noselect just-around" style="margin=1em;">
|
||||
<img src="tauri.png" height="60" on:click={onLogoClick} alt="logo" />
|
||||
<div>
|
||||
<a
|
||||
class="dark-link"
|
||||
target="_blank"
|
||||
href="https://tauri.studio/en/docs/getting-started/intro"
|
||||
>
|
||||
Documentation
|
||||
</a>
|
||||
<a
|
||||
class="dark-link"
|
||||
target="_blank"
|
||||
href="https://github.com/tauri-apps/tauri"
|
||||
>
|
||||
Github
|
||||
</a>
|
||||
<a
|
||||
class="dark-link"
|
||||
target="_blank"
|
||||
href="https://github.com/tauri-apps/tauri/tree/dev/tauri/examples/api"
|
||||
>
|
||||
Source
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div id="response">{@html response}</div>
|
||||
<div class="bottom">
|
||||
<a class="dark-link" target="_blank" href="https://tauri.studio">
|
||||
Tauri Documentation
|
||||
</a>
|
||||
|
||||
<a class="dark-link" target="_blank" href="https://github.com/tauri-apps/tauri">
|
||||
Github Repo
|
||||
</a>
|
||||
|
||||
<a class="dark-link" target="_blank"
|
||||
href="https://github.com/tauri-apps/tauri/tree/dev/tauri/examples/api">
|
||||
Source for this App
|
||||
</a>
|
||||
<div class="flex row">
|
||||
<div style="width:15em; margin-left:0.5em">
|
||||
{#each views as view}
|
||||
<p
|
||||
class="nv noselect {selected === view ? 'nv_selected' : ''}"
|
||||
on:click={() => select(view)}
|
||||
>
|
||||
{view.label}
|
||||
</p>
|
||||
{/each}
|
||||
</div>
|
||||
<div class="content">
|
||||
<svelte:component this={selected.component} {onMessage} />
|
||||
</div>
|
||||
</div>
|
||||
<div id="response">
|
||||
<p class="flex row just-around">
|
||||
<strong>Tauri Console</strong>
|
||||
<a
|
||||
class="nv"
|
||||
on:click={() => {
|
||||
responses = [""];
|
||||
}}>clear</a
|
||||
>
|
||||
</p>
|
||||
{responses}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@ -4,14 +4,12 @@
|
||||
export let onMessage;
|
||||
|
||||
function cliMatches() {
|
||||
getMatches()
|
||||
.then(onMessage)
|
||||
.catch(onMessage);
|
||||
getMatches().then(onMessage).catch(onMessage);
|
||||
}
|
||||
</script>
|
||||
|
||||
<div style="margin-top: 24px">
|
||||
<div>
|
||||
<button class="button" id="cli-matches" on:click={cliMatches}>
|
||||
Get matches
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,17 +1,12 @@
|
||||
<script>
|
||||
import {
|
||||
open,
|
||||
save
|
||||
} from '@tauri-apps/api/dialog'
|
||||
import {
|
||||
readBinaryFile
|
||||
} from '@tauri-apps/api/fs'
|
||||
import { open, save } from "@tauri-apps/api/dialog";
|
||||
import { readBinaryFile } from "@tauri-apps/api/fs";
|
||||
|
||||
export let onMessage
|
||||
let defaultPath = null
|
||||
let filter = null
|
||||
let multiple = false
|
||||
let directory = false
|
||||
export let onMessage;
|
||||
let defaultPath = null;
|
||||
let filter = null;
|
||||
let multiple = false;
|
||||
let directory = false;
|
||||
|
||||
function arrayBufferToBase64(buffer, callback) {
|
||||
var blob = new Blob([buffer], {
|
||||
@ -28,57 +23,78 @@
|
||||
function openDialog() {
|
||||
open({
|
||||
defaultPath,
|
||||
filters: filter ? [{
|
||||
name: 'Tauri Example',
|
||||
extensions: filter.split(',').map(f => f.trim())
|
||||
}] : [],
|
||||
filters: filter
|
||||
? [
|
||||
{
|
||||
name: "Tauri Example",
|
||||
extensions: filter.split(",").map((f) => f.trim()),
|
||||
},
|
||||
]
|
||||
: [],
|
||||
multiple,
|
||||
directory
|
||||
}).then(function (res) {
|
||||
if (Array.isArray(res)) {
|
||||
onMessage(res)
|
||||
} else {
|
||||
var pathToRead = res
|
||||
var isFile = pathToRead.match(/\S+\.\S+$/g)
|
||||
readBinaryFile(pathToRead).then(function (response) {
|
||||
if (isFile) {
|
||||
if (pathToRead.includes('.png') || pathToRead.includes('.jpg')) {
|
||||
arrayBufferToBase64(new Uint8Array(response), function (base64) {
|
||||
var src = 'data:image/png;base64,' + base64
|
||||
onMessage('<img src="' + src + '"></img>')
|
||||
})
|
||||
} else {
|
||||
onMessage(res)
|
||||
}
|
||||
} else {
|
||||
onMessage(res)
|
||||
}
|
||||
}).catch(onMessage(res))
|
||||
}
|
||||
}).catch(onMessage)
|
||||
directory,
|
||||
})
|
||||
.then(function (res) {
|
||||
if (Array.isArray(res)) {
|
||||
onMessage(res);
|
||||
} else {
|
||||
var pathToRead = res;
|
||||
var isFile = pathToRead.match(/\S+\.\S+$/g);
|
||||
readBinaryFile(pathToRead)
|
||||
.then(function (response) {
|
||||
if (isFile) {
|
||||
if (
|
||||
pathToRead.includes(".png") ||
|
||||
pathToRead.includes(".jpg")
|
||||
) {
|
||||
arrayBufferToBase64(
|
||||
new Uint8Array(response),
|
||||
function (base64) {
|
||||
var src = "data:image/png;base64," + base64;
|
||||
onMessage('<img src="' + src + '"></img>');
|
||||
}
|
||||
);
|
||||
} else {
|
||||
onMessage(res);
|
||||
}
|
||||
} else {
|
||||
onMessage(res);
|
||||
}
|
||||
})
|
||||
.catch(onMessage(res));
|
||||
}
|
||||
})
|
||||
.catch(onMessage);
|
||||
}
|
||||
|
||||
function saveDialog() {
|
||||
save({
|
||||
defaultPath,
|
||||
filters: filter ? [{
|
||||
name: 'Tauri Example',
|
||||
extensions: filter.split(',').map(f => f.trim())
|
||||
}] : [],
|
||||
}).then(onMessage).catch(onMessage)
|
||||
filters: filter
|
||||
? [
|
||||
{
|
||||
name: "Tauri Example",
|
||||
extensions: filter.split(",").map((f) => f.trim()),
|
||||
},
|
||||
]
|
||||
: [],
|
||||
})
|
||||
.then(onMessage)
|
||||
.catch(onMessage);
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#dialog-filter {
|
||||
width: 260px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div style="margin-top: 24px">
|
||||
<input id="dialog-default-path" placeholder="Default path" bind:value={defaultPath} />
|
||||
<input id="dialog-filter" placeholder="Extensions filter, comma-separated" bind:value={filter} />
|
||||
<div>
|
||||
<input
|
||||
id="dialog-default-path"
|
||||
placeholder="Default path"
|
||||
bind:value={defaultPath}
|
||||
/>
|
||||
<input
|
||||
id="dialog-filter"
|
||||
placeholder="Extensions filter, comma-separated"
|
||||
bind:value={filter}
|
||||
/>
|
||||
<div>
|
||||
<input type="checkbox" id="dialog-multiple" bind:checked={multiple} />
|
||||
<label for="dialog-multiple">Multiple</label>
|
||||
@ -88,6 +104,16 @@
|
||||
<label for="dialog-directory">Directory</label>
|
||||
</div>
|
||||
|
||||
<button class="button" id="open-dialog" on:click={openDialog}>Open dialog</button>
|
||||
<button class="button" id="save-dialog" on:click={saveDialog}>Open save dialog</button>
|
||||
</div>
|
||||
<button class="button" id="open-dialog" on:click={openDialog}
|
||||
>Open dialog</button
|
||||
>
|
||||
<button class="button" id="save-dialog" on:click={saveDialog}
|
||||
>Open save dialog</button
|
||||
>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
#dialog-filter {
|
||||
width: 260px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,78 +1,89 @@
|
||||
<script>
|
||||
import {
|
||||
readBinaryFile,
|
||||
readDir,
|
||||
Dir,
|
||||
} from '@tauri-apps/api/fs'
|
||||
import { readBinaryFile, readDir, Dir } from "@tauri-apps/api/fs";
|
||||
|
||||
export let onMessage
|
||||
export let onMessage;
|
||||
|
||||
let pathToRead = ''
|
||||
let pathToRead = "";
|
||||
|
||||
function getDir() {
|
||||
const dirSelect = document.getElementById('dir')
|
||||
return dirSelect.value ? parseInt(dir.value) : null
|
||||
const dirSelect = document.getElementById("dir");
|
||||
return dirSelect.value ? parseInt(dir.value) : null;
|
||||
}
|
||||
|
||||
function arrayBufferToBase64(buffer, callback) {
|
||||
const blob = new Blob([buffer], {
|
||||
type: 'application/octet-binary'
|
||||
})
|
||||
const reader = new FileReader()
|
||||
type: "application/octet-binary",
|
||||
});
|
||||
const reader = new FileReader();
|
||||
reader.onload = function (evt) {
|
||||
const dataurl = evt.target.result
|
||||
callback(dataurl.substr(dataurl.indexOf(',') + 1))
|
||||
}
|
||||
reader.readAsDataURL(blob)
|
||||
const dataurl = evt.target.result;
|
||||
callback(dataurl.substr(dataurl.indexOf(",") + 1));
|
||||
};
|
||||
reader.readAsDataURL(blob);
|
||||
}
|
||||
|
||||
const DirOptions = Object.keys(Dir)
|
||||
.filter(key => isNaN(parseInt(key)))
|
||||
.map(dir => [dir, Dir[dir]]);
|
||||
.filter((key) => isNaN(parseInt(key)))
|
||||
.map((dir) => [dir, Dir[dir]]);
|
||||
|
||||
function read() {
|
||||
const isFile = pathToRead.match(/\S+\.\S+$/g)
|
||||
const isFile = pathToRead.match(/\S+\.\S+$/g);
|
||||
const opts = {
|
||||
dir: getDir()
|
||||
}
|
||||
const promise = isFile ? readBinaryFile(pathToRead, opts) : readDir(pathToRead, opts)
|
||||
promise.then(function (response) {
|
||||
if (isFile) {
|
||||
if (pathToRead.includes('.png') || pathToRead.includes('.jpg')) {
|
||||
arrayBufferToBase64(new Uint8Array(response), function (base64) {
|
||||
const src = 'data:image/png;base64,' + base64
|
||||
onMessage('<img src="' + src + '"></img>')
|
||||
})
|
||||
dir: getDir(),
|
||||
};
|
||||
const promise = isFile
|
||||
? readBinaryFile(pathToRead, opts)
|
||||
: readDir(pathToRead, opts);
|
||||
promise
|
||||
.then(function (response) {
|
||||
if (isFile) {
|
||||
if (pathToRead.includes(".png") || pathToRead.includes(".jpg")) {
|
||||
arrayBufferToBase64(new Uint8Array(response), function (base64) {
|
||||
const src = "data:image/png;base64," + base64;
|
||||
onMessage('<img src="' + src + '"></img>');
|
||||
});
|
||||
} else {
|
||||
const value = String.fromCharCode.apply(null, response);
|
||||
onMessage(
|
||||
'<textarea id="file-response" style="height: 400px"></textarea><button id="file-save">Save</button>'
|
||||
);
|
||||
setTimeout(() => {
|
||||
const fileInput = document.getElementById("file-response");
|
||||
fileInput.value = value;
|
||||
document
|
||||
.getElementById("file-save")
|
||||
.addEventListener("click", function () {
|
||||
writeFile(
|
||||
{
|
||||
file: pathToRead,
|
||||
contents: fileInput.value,
|
||||
},
|
||||
{
|
||||
dir: getDir(),
|
||||
}
|
||||
).catch(onMessage);
|
||||
});
|
||||
});
|
||||
}
|
||||
} else {
|
||||
const value = String.fromCharCode.apply(null, response)
|
||||
onMessage('<textarea id="file-response" style="height: 400px"></textarea><button id="file-save">Save</button>')
|
||||
setTimeout(() => {
|
||||
const fileInput = document.getElementById('file-response')
|
||||
fileInput.value = value
|
||||
document.getElementById('file-save').addEventListener('click', function () {
|
||||
writeFile({
|
||||
file: pathToRead,
|
||||
contents: fileInput.value
|
||||
}, {
|
||||
dir: getDir()
|
||||
}).catch(onMessage)
|
||||
})
|
||||
})
|
||||
onMessage(response);
|
||||
}
|
||||
} else {
|
||||
onMessage(response)
|
||||
}
|
||||
}).catch(onMessage)
|
||||
})
|
||||
.catch(onMessage);
|
||||
}
|
||||
</script>
|
||||
|
||||
<form style="margin-top: 24px" on:submit|preventDefault={read}>
|
||||
<form on:submit|preventDefault={read}>
|
||||
<select class="button" id="dir">
|
||||
<option value="">None</option>
|
||||
{#each DirOptions as dir}
|
||||
<option value={dir[1]}>{dir[0]}</option>
|
||||
<option value={dir[1]}>{dir[0]}</option>
|
||||
{/each}
|
||||
</select>
|
||||
<input id="path-to-read" placeholder="Type the path to read..." bind:value={pathToRead} />
|
||||
<input
|
||||
id="path-to-read"
|
||||
placeholder="Type the path to read..."
|
||||
bind:value={pathToRead}
|
||||
/>
|
||||
<button class="button" id="read">Read</button>
|
||||
</form>
|
||||
</form>
|
||||
|
||||
@ -7,13 +7,13 @@
|
||||
export let onMessage;
|
||||
|
||||
async function makeHttpRequest() {
|
||||
const client = await getClient()
|
||||
const client = await getClient();
|
||||
let method = httpMethod || "GET";
|
||||
let url = httpUrl || "";
|
||||
|
||||
const options = {
|
||||
url: url || "",
|
||||
method: method || "GET"
|
||||
method: method || "GET",
|
||||
};
|
||||
|
||||
if (
|
||||
@ -21,13 +21,11 @@
|
||||
(httpBody.startsWith("[") && httpBody.endsWith("]"))
|
||||
) {
|
||||
options.body = Body.json(JSON.parse(httpBody));
|
||||
} else if (httpBody !== '') {
|
||||
options.body = Body.text(httpBody)
|
||||
} else if (httpBody !== "") {
|
||||
options.body = Body.text(httpBody);
|
||||
}
|
||||
|
||||
client.request(options)
|
||||
.then(onMessage)
|
||||
.catch(onMessage);
|
||||
client.request(options).then(onMessage).catch(onMessage);
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -39,11 +37,18 @@
|
||||
<option value="PATCH">PATCH</option>
|
||||
<option value="DELETE">DELETE</option>
|
||||
</select>
|
||||
<input id="request-url" placeholder="Type the request URL..." bind:value={httpUrl} />
|
||||
<input
|
||||
id="request-url"
|
||||
placeholder="Type the request URL..."
|
||||
bind:value={httpUrl}
|
||||
/>
|
||||
<br />
|
||||
<textarea id="request-body" placeholder="Request body" rows="5" style="width:100%;margin-right:10px;font-size:12px"
|
||||
bind:value={httpBody} />
|
||||
<button class="button" id="make-request">
|
||||
Make request
|
||||
</button>
|
||||
</form>
|
||||
<textarea
|
||||
id="request-body"
|
||||
placeholder="Request body"
|
||||
rows="5"
|
||||
style="width:100%;margin-right:10px;font-size:12px"
|
||||
bind:value={httpBody}
|
||||
/>
|
||||
<button class="button" id="make-request"> Make request </button>
|
||||
</form>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
|
||||
function _sendNotification() {
|
||||
new Notification("Notification title", {
|
||||
body: "This is the notification body"
|
||||
body: "This is the notification body",
|
||||
});
|
||||
}
|
||||
|
||||
@ -28,4 +28,4 @@
|
||||
|
||||
<button class="button" id="notification" on:click={sendNotification}>
|
||||
Send test notification
|
||||
</button>
|
||||
</button>
|
||||
|
||||
@ -1,55 +1,68 @@
|
||||
<script>
|
||||
import { writable } from 'svelte/store'
|
||||
import { writable } from "svelte/store";
|
||||
import {
|
||||
register as registerShortcut,
|
||||
unregister as unregisterShortcut,
|
||||
unregisterAll as unregisterAllShortcuts
|
||||
} from '@tauri-apps/api/globalShortcut'
|
||||
unregisterAll as unregisterAllShortcuts,
|
||||
} from "@tauri-apps/api/globalShortcut";
|
||||
|
||||
export let onMessage
|
||||
const shortcuts = writable([])
|
||||
let shortcut = 'CmdOrControl+X'
|
||||
export let onMessage;
|
||||
const shortcuts = writable([]);
|
||||
let shortcut = "CmdOrControl+X";
|
||||
|
||||
function register() {
|
||||
const shortcut_ = shortcut
|
||||
const shortcut_ = shortcut;
|
||||
registerShortcut(shortcut_, () => {
|
||||
onMessage(`Shortcut ${shortcut_} triggered`)
|
||||
}).then(() => {
|
||||
shortcuts.update(shortcuts_ => [...shortcuts_, shortcut_])
|
||||
onMessage(`Shortcut ${shortcut_} registered successfully`)
|
||||
}).catch(onMessage)
|
||||
onMessage(`Shortcut ${shortcut_} triggered`);
|
||||
})
|
||||
.then(() => {
|
||||
shortcuts.update((shortcuts_) => [...shortcuts_, shortcut_]);
|
||||
onMessage(`Shortcut ${shortcut_} registered successfully`);
|
||||
})
|
||||
.catch(onMessage);
|
||||
}
|
||||
|
||||
function unregister(shortcut) {
|
||||
const shortcut_ = shortcut
|
||||
unregisterShortcut(shortcut_).then(() => {
|
||||
shortcuts.update(shortcuts_ => shortcuts_.filter(s => s !== shortcut_))
|
||||
onMessage(`Shortcut ${shortcut_} unregistered`)
|
||||
}).catch(onMessage)
|
||||
const shortcut_ = shortcut;
|
||||
unregisterShortcut(shortcut_)
|
||||
.then(() => {
|
||||
shortcuts.update((shortcuts_) =>
|
||||
shortcuts_.filter((s) => s !== shortcut_)
|
||||
);
|
||||
onMessage(`Shortcut ${shortcut_} unregistered`);
|
||||
})
|
||||
.catch(onMessage);
|
||||
}
|
||||
|
||||
function unregisterAll() {
|
||||
unregisterAllShortcuts().then(() => {
|
||||
shortcuts.update(() => [])
|
||||
onMessage(`Unregistered all shortcuts`)
|
||||
}).catch(onMessage)
|
||||
unregisterAllShortcuts()
|
||||
.then(() => {
|
||||
shortcuts.update(() => []);
|
||||
onMessage(`Unregistered all shortcuts`);
|
||||
})
|
||||
.catch(onMessage);
|
||||
}
|
||||
</script>
|
||||
|
||||
<div style="margin-top: 24px">
|
||||
<div>
|
||||
<div>
|
||||
<input placeholder="Type a shortcut with '+' as separator..." bind:value={shortcut}>
|
||||
<input
|
||||
placeholder="Type a shortcut with '+' as separator..."
|
||||
bind:value={shortcut}
|
||||
/>
|
||||
<button type="button" on:click={register}>Register</button>
|
||||
</div>
|
||||
<div>
|
||||
{#each $shortcuts as savedShortcut}
|
||||
<div>
|
||||
{savedShortcut}
|
||||
<button type="button" on:click={()=> unregister(savedShortcut)}>Unregister</button>
|
||||
</div>
|
||||
<div>
|
||||
{savedShortcut}
|
||||
<button type="button" on:click={() => unregister(savedShortcut)}
|
||||
>Unregister</button
|
||||
>
|
||||
</div>
|
||||
{/each}
|
||||
{#if $shortcuts.length}
|
||||
<button type="button" on:click={unregisterAll}>Unregister all</button>
|
||||
<button type="button" on:click={unregisterAll}>Unregister all</button>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
6
examples/api/src/components/Welcome.svelte
Normal file
6
examples/api/src/components/Welcome.svelte
Normal file
@ -0,0 +1,6 @@
|
||||
<h1>Welcome</h1>
|
||||
<p>
|
||||
Tauri's API capabilities using the ` @tauri-apps/api ` package. It's used as
|
||||
the main validation app, serving as the testbed of our development process. In
|
||||
the future, this app will be used on Tauri's integration tests.
|
||||
</p>
|
||||
@ -1,6 +1,6 @@
|
||||
<script>
|
||||
import { appWindow } from "@tauri-apps/api/window";
|
||||
import { open as openDialog } from '@tauri-apps/api/dialog'
|
||||
import { open as openDialog } from "@tauri-apps/api/dialog";
|
||||
import { open } from "@tauri-apps/api/shell";
|
||||
|
||||
const {
|
||||
@ -12,6 +12,7 @@
|
||||
unminimize,
|
||||
show,
|
||||
hide,
|
||||
setTransparent,
|
||||
setDecorations,
|
||||
setAlwaysOnTop,
|
||||
setWidth,
|
||||
@ -23,30 +24,29 @@
|
||||
setY,
|
||||
// setPosition,
|
||||
setFullscreen,
|
||||
setIcon
|
||||
} = appWindow
|
||||
setIcon,
|
||||
} = appWindow;
|
||||
|
||||
export let onMessage;
|
||||
let pathValue = "https://tauri.studio";
|
||||
let openWith = "";
|
||||
let resizable = true
|
||||
let maximized = false
|
||||
let decorations = false
|
||||
let alwaysOnTop = false
|
||||
let fullscreen = false
|
||||
let width = 600
|
||||
let height = 600
|
||||
let minWidth = 600
|
||||
let minHeight = 600
|
||||
let maxWidth = null
|
||||
let maxHeight = null
|
||||
let x = 300
|
||||
let y = 300
|
||||
let urlValue = "https://tauri.studio";
|
||||
let resizable = true;
|
||||
let maximized = false;
|
||||
let transparent = false;
|
||||
let decorations = true;
|
||||
let alwaysOnTop = false;
|
||||
let fullscreen = false;
|
||||
let width = 900;
|
||||
let height = 700;
|
||||
let minWidth = 600;
|
||||
let minHeight = 600;
|
||||
let maxWidth = null;
|
||||
let maxHeight = null;
|
||||
let x = 100;
|
||||
let y = 100;
|
||||
|
||||
let windowTitle = 'Awesome Tauri Example!';
|
||||
let windowTitle = "Awesome Tauri Example!";
|
||||
|
||||
function openUrl() {
|
||||
open(pathValue, !!openWith ? openWith : undefined).catch(onMessage);
|
||||
open(urlValue);
|
||||
}
|
||||
|
||||
function setTitle_() {
|
||||
@ -54,65 +54,44 @@
|
||||
}
|
||||
|
||||
function hide_() {
|
||||
hide()
|
||||
setTimeout(show, 2000)
|
||||
hide();
|
||||
setTimeout(show, 2000);
|
||||
}
|
||||
|
||||
function minimize_() {
|
||||
minimize()
|
||||
setTimeout(unminimize, 2000)
|
||||
minimize();
|
||||
setTimeout(unminimize, 2000);
|
||||
}
|
||||
|
||||
function getIcon() {
|
||||
openDialog({
|
||||
multiple: false
|
||||
}).then(setIcon)
|
||||
multiple: false,
|
||||
}).then(setIcon);
|
||||
}
|
||||
|
||||
$: setResizable(resizable)
|
||||
$: maximized ? maximize() : unmaximize()
|
||||
$: setDecorations(decorations)
|
||||
$: setAlwaysOnTop(alwaysOnTop)
|
||||
$: setFullscreen(fullscreen)
|
||||
$: setResizable(resizable);
|
||||
$: maximized ? maximize() : unmaximize();
|
||||
//$: setTransparent(transparent)
|
||||
$: setDecorations(decorations);
|
||||
$: setAlwaysOnTop(alwaysOnTop);
|
||||
$: setFullscreen(fullscreen);
|
||||
|
||||
$: setWidth(width)
|
||||
$: setHeight(height)
|
||||
$: minWidth && minHeight && setMinSize(minWidth, minHeight)
|
||||
$: maxWidth && maxHeight && setMaxSize(maxWidth, maxHeight)
|
||||
$: setX(x)
|
||||
$: setY(y)
|
||||
$: setWidth(width);
|
||||
$: setHeight(height);
|
||||
$: minWidth && minHeight && setMinSize(minWidth, minHeight);
|
||||
$: maxWidth && maxHeight && setMaxSize(maxWidth, maxHeight);
|
||||
$: setX(x);
|
||||
$: setY(y);
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.flex-row {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.flex-column {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.grow {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.window-controls input {
|
||||
width: 50px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="flex flex-column">
|
||||
<div class="flex col">
|
||||
<div>
|
||||
<label>
|
||||
<input type="checkbox" bind:checked={resizable}>
|
||||
<input type="checkbox" bind:checked={resizable} />
|
||||
Resizable
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" bind:checked={maximized}>
|
||||
<input type="checkbox" bind:checked={maximized} />
|
||||
Maximize
|
||||
</label>
|
||||
<button title="Unminimizes after 2 seconds" on:click={minimize_}>
|
||||
@ -122,64 +101,66 @@
|
||||
Hide
|
||||
</button>
|
||||
<label>
|
||||
<input type="checkbox" bind:checked={decorations}>
|
||||
<input type="checkbox" bind:checked={transparent} />
|
||||
Transparent
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" bind:checked={decorations} />
|
||||
Has decorations
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" bind:checked={alwaysOnTop}>
|
||||
<input type="checkbox" bind:checked={alwaysOnTop} />
|
||||
Always on top
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" bind:checked={fullscreen}>
|
||||
<input type="checkbox" bind:checked={fullscreen} />
|
||||
Fullscreen
|
||||
</label>
|
||||
<button on:click={getIcon}>
|
||||
Change icon
|
||||
</button>
|
||||
<button on:click={getIcon}> Change icon </button>
|
||||
</div>
|
||||
<div>
|
||||
<div class="window-controls flex flex-row">
|
||||
<div class="flex flex-column grow">
|
||||
<div class="flex col grow">
|
||||
<div>
|
||||
X
|
||||
<input type="number" bind:value={x} min="0">
|
||||
<input type="number" bind:value={x} min="0" />
|
||||
</div>
|
||||
<div>
|
||||
Y
|
||||
<input type="number" bind:value={y} min="0">
|
||||
<input type="number" bind:value={y} min="0" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-column grow">
|
||||
<div class="flex col grow">
|
||||
<div>
|
||||
Width
|
||||
<input type="number" bind:value={width} min="400">
|
||||
<input type="number" bind:value={width} min="400" />
|
||||
</div>
|
||||
<div>
|
||||
Height
|
||||
<input type="number" bind:value={height} min="400">
|
||||
<input type="number" bind:value={height} min="400" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-column grow">
|
||||
<div class="flex col grow">
|
||||
<div>
|
||||
Min width
|
||||
<input type="number" bind:value={minWidth}>
|
||||
<input type="number" bind:value={minWidth} />
|
||||
</div>
|
||||
<div>
|
||||
Min height
|
||||
<input type="number" bind:value={minHeight}>
|
||||
<input type="number" bind:value={minHeight} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-column grow">
|
||||
<div class="flex col grow">
|
||||
<div>
|
||||
Max width
|
||||
<input type="number" bind:value={maxWidth} min="400">
|
||||
<input type="number" bind:value={maxWidth} min="400" />
|
||||
</div>
|
||||
<div>
|
||||
Max height
|
||||
<input type="number" bind:value={maxHeight} min="400">
|
||||
<input type="number" bind:value={maxHeight} min="400" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -190,15 +171,20 @@
|
||||
<button class="button" type="submit">Set title</button>
|
||||
</form>
|
||||
<form style="margin-top: 24px" on:submit|preventDefault={openUrl}>
|
||||
<div>
|
||||
<label for="path">Path or URL:</label>
|
||||
<input id="path" bind:value={pathValue} />
|
||||
</div>
|
||||
<div>
|
||||
<label for="openWith">Open With (Optional):</label>
|
||||
<input id="openWith" bind:value={openWith} />
|
||||
</div>
|
||||
<button class="button" id="open-path">
|
||||
Open Path or Url
|
||||
</button>
|
||||
</form>
|
||||
<input id="url" bind:value={urlValue} />
|
||||
<button class="button" id="open-url"> Open URL </button>
|
||||
</form>
|
||||
|
||||
<style>
|
||||
.flex-row {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.grow {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.window-controls input {
|
||||
width: 50px;
|
||||
}
|
||||
</style>
|
||||
|
||||
BIN
tauri/examples/api/public/tauri.png
Normal file
BIN
tauri/examples/api/public/tauri.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
Loading…
Reference in New Issue
Block a user