Improved templates

This commit is contained in:
Lea Anthony
2024-01-07 08:19:07 +11:00
parent 34f7f24e7e
commit 1dae9f613f
37 changed files with 248 additions and 106 deletions
@@ -15,6 +15,13 @@
-webkit-text-size-adjust: 100%;
}
* {
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
@font-face {
font-family: "Inter";
font-style: normal;
@@ -30,10 +30,11 @@ export class MyElement extends LitElement {
doGreet() {
if (!this.name) {
this.name = 'from Go';
let name = this.name;
if (!name) {
name = 'anonymous';
}
Greet(this.name).then((resultValue: string) => {
Greet(name).then((resultValue: string) => {
this.result = resultValue;
}).catch((err: Error) => {
console.log(err);
@@ -52,8 +53,8 @@ export class MyElement extends LitElement {
</a>
</div>
<slot></slot>
<div class="result">${this.result}</div>
<div class="card">
<div class="result">${this.result}</div>
<div class="input-box">
<input class="input" .value=${this.name} @input=${(e: InputEvent) => this.name = (e.target as HTMLInputElement).value} type="text"
autocomplete="off"/>
@@ -15,6 +15,13 @@
-webkit-text-size-adjust: 100%;
}
* {
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
@font-face {
font-family: "Inter";
font-style: normal;
@@ -20,10 +20,11 @@ export class MyElement extends LitElement {
}
doGreet() {
if (!this.name) {
this.name = 'from Go';
let name = this.name;
if (!name) {
name = 'anonymous';
}
Greet(this.name).then((resultValue) => {
Greet(name).then((resultValue) => {
this.result = resultValue;
}).catch((err) => {
console.log(err);
@@ -42,8 +43,8 @@ export class MyElement extends LitElement {
</a>
</div>
<slot></slot>
<div class="result">${this.result}</div>
<div class="card">
<div class="result">${this.result}</div>
<div class="input-box">
<input class="input" .value=${this.name} @input=${e => this.name = e.target.value} type="text"
autocomplete="off"/>
@@ -15,6 +15,13 @@
-webkit-text-size-adjust: 100%;
}
* {
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
@font-face {
font-family: "Inter";
font-style: normal;
@@ -8,10 +8,11 @@ export function App() {
const [time, setTime] = useState<string>('Listening for Time event...');
const doGreet = (): void => {
if (!name) {
setName('from Go');
let localName = name;
if (!localName) {
localName = 'anonymous';
}
Greet(name).then((resultValue: string) => {
Greet(localName).then((resultValue: string) => {
setResult(resultValue);
}).catch((err: any) => {
console.log(err);
@@ -36,8 +37,8 @@ export function App() {
</a>
</div>
<h1>Wails + Preact</h1>
<div className="result">{result}</div>
<div className="card">
<div className="result">{result}</div>
<div className="input-box">
<input className="input" value={name} onInput={(e) => setName(e.currentTarget.value)}
type="text" autocomplete="off"/>
@@ -15,6 +15,13 @@
-webkit-text-size-adjust: 100%;
}
* {
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
@font-face {
font-family: "Inter";
font-style: normal;
@@ -8,10 +8,11 @@ export function App() {
const [time, setTime] = useState('Listening for Time event...');
const doGreet = () => {
if (!name) {
setName('from Go');
let localName = name;
if (!localName) {
localName = 'anonymous';
}
Greet(name).then((resultValue) => {
Greet(localName).then((resultValue) => {
setResult(resultValue);
}).catch((err) => {
console.log(err);
@@ -35,8 +36,8 @@ export function App() {
</a>
</div>
<h1>Wails + Preact</h1>
<div className="result">{result}</div>
<div className="card">
<div className="result">{result}</div>
<div className="input-box">
<input className="input" value={name} onInput={(e) => setName(e.target.value)} type="text" autoComplete="off"/>
<button className="btn" onClick={doGreet}>Greet</button>
@@ -15,6 +15,13 @@
-webkit-text-size-adjust: 100%;
}
* {
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
@font-face {
font-family: "Inter";
font-style: normal;
@@ -8,10 +8,11 @@ export const App = component$(() => {
const time = useSignal<string>('Listening for Time event...');
const doGreet = () => {
if (!name.value) {
name.value = 'from Go';
let localName = name.value;
if (!localName) {
localName = 'anonymous';
}
Greet(name.value).then((resultValue: string) => {
Greet(localName).then((resultValue: string) => {
result.value = resultValue;
}).catch((err: any) => {
console.log(err);
@@ -37,8 +38,8 @@ export const App = component$(() => {
</a>
</div>
<h1>Wails + Qwik</h1>
<div class="result">{result.value}</div>
<div class="card">
<div class="result">{result.value}</div>
<div class="input-box">
<input class="input" value={name.value} onInput$={(e: InputEvent) => name.value = (e.target as HTMLInputElement).value} type="text" autocomplete="off"/>
<button class="btn" onClick$={doGreet}>Greet</button>
@@ -15,6 +15,13 @@
-webkit-text-size-adjust: 100%;
}
* {
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
@font-face {
font-family: "Inter";
font-style: normal;
@@ -8,10 +8,11 @@ export const App = component$(() => {
const time = useSignal('Listening for Time event...');
const doGreet = () => {
if (!name.value) {
name.value = 'from Go';
let localName = name.value;
if (!localName) {
localName = 'anonymous';
}
Greet(name.value).then((resultValue) => {
Greet(localName).then((resultValue) => {
result.value = resultValue;
}).catch((err) => {
console.log(err);
@@ -37,8 +38,8 @@ export const App = component$(() => {
</a>
</div>
<h1>Wails + Qwik</h1>
<div class="result">{result.value}</div>
<div class="card">
<div class="result">{result.value}</div>
<div class="input-box">
<input class="input" value={name.value} onInput$={(e) => name.value = e.target.value} type="text" autocomplete="off"/>
<button class="btn" onClick$={doGreet}>Greet</button>
@@ -15,6 +15,13 @@
-webkit-text-size-adjust: 100%;
}
* {
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
@font-face {
font-family: "Inter";
font-style: normal;
@@ -8,10 +8,11 @@ function App() {
const [time, setTime] = useState<string>('Listening for Time event...');
const doGreet = () => {
if (!name) {
setName('from Go');
let localName = name;
if (!localName) {
localName = 'anonymous';
}
Greet(name).then((resultValue: string) => {
Greet(localName).then((resultValue: string) => {
setResult(resultValue);
}).catch((err: any) => {
console.log(err);
@@ -27,28 +28,28 @@ function App() {
}, []);
return (
<div className="container">
<div>
<a wml-openURL="https://wails.io">
<img src="/wails.png" className="logo" alt="Wails logo"/>
</a>
<a wml-openURL="https://reactjs.org">
<img src="/react.svg" className="logo react" alt="React logo"/>
</a>
</div>
<h1>Wails + React</h1>
<div className="card">
<div className="container">
<div>
<a wml-openURL="https://wails.io">
<img src="/wails.png" className="logo" alt="Wails logo"/>
</a>
<a wml-openURL="https://reactjs.org">
<img src="/react.svg" className="logo react" alt="React logo"/>
</a>
</div>
<h1>Wails + React</h1>
<div className="result">{result}</div>
<div className="input-box">
<input className="input" value={name} onChange={(e) => setName(e.target.value)} type="text" autoComplete="off"/>
<button className="btn" onClick={doGreet}>Greet</button>
<div className="card">
<div className="input-box">
<input className="input" value={name} onChange={(e) => setName(e.target.value)} type="text" autoComplete="off"/>
<button className="btn" onClick={doGreet}>Greet</button>
</div>
</div>
<div className="footer">
<div><p>Click on the Wails logo to learn more</p></div>
<div><p>{time}</p></div>
</div>
</div>
<div className="footer">
<div><p>Click on the Wails logo to learn more</p></div>
<div><p>{time}</p></div>
</div>
</div>
)
}
@@ -15,6 +15,13 @@
-webkit-text-size-adjust: 100%;
}
* {
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
@font-face {
font-family: "Inter";
font-style: normal;
@@ -8,10 +8,11 @@ function App() {
const [time, setTime] = useState('Listening for Time event...');
const doGreet = () => {
if (!name) {
setName('from Go');
let localName = name;
if (!localName) {
localName = 'anonymous';
}
Greet(name).then((resultValue) => {
Greet(localName).then((resultValue) => {
setResult(resultValue);
}).catch((err) => {
console.log(err);
@@ -37,8 +38,8 @@ function App() {
</a>
</div>
<h1>Wails + React</h1>
<div className="result">{result}</div>
<div className="card">
<div className="result">{result}</div>
<div className="input-box">
<input className="input" value={name} onChange={(e) => setName(e.target.value)} type="text" autoComplete="off"/>
<button className="btn" onClick={doGreet}>Greet</button>
@@ -15,6 +15,13 @@
-webkit-text-size-adjust: 100%;
}
* {
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
@font-face {
font-family: "Inter";
font-style: normal;
@@ -8,10 +8,11 @@ function App() {
const [time, setTime] = useState<string>('Listening for Time event...');
const doGreet = () => {
if (!name) {
setName('from Go');
let localName = name;
if (!localName) {
localName = 'anonymous';
}
Greet(name).then((resultValue: string) => {
Greet(localName).then((resultValue: string) => {
setResult(resultValue);
}).catch((err: any) => {
console.log(err);
@@ -37,8 +38,8 @@ function App() {
</a>
</div>
<h1>Wails + React</h1>
<div className="result">{result}</div>
<div className="card">
<div className="result">{result}</div>
<div className="input-box">
<input className="input" value={name} onChange={(e) => setName(e.target.value)} type="text" autoComplete="off"/>
<button className="btn" onClick={doGreet}>Greet</button>
@@ -15,6 +15,13 @@
-webkit-text-size-adjust: 100%;
}
* {
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
@font-face {
font-family: "Inter";
font-style: normal;
@@ -8,10 +8,11 @@ function App() {
const [time, setTime] = useState('Listening for Time event...');
const doGreet = () => {
if (!name) {
setName('from Go');
let localName = name;
if (!localName) {
localName = 'anonymous';
}
Greet(name).then((resultValue) => {
Greet(localName).then((resultValue) => {
setResult(resultValue);
}).catch((err) => {
console.log(err);
@@ -27,28 +28,28 @@ function App() {
}, []);
return (
<div className="container">
<div>
<a wml:openURL="https://wails.io">
<img src="/wails.png" className="logo" alt="Wails logo"/>
</a>
<a wml:openURL="https://reactjs.org">
<img src='/react.svg' className="logo react" alt="React logo"/>
</a>
</div>
<h1>Wails + React</h1>
<div className="card">
<div className="result">{result}</div>
<div className="input-box">
<input className="input" value={name} onChange={(e) => setName(e.target.value)} type="text" autoComplete="off"/>
<button className="btn" onClick={doGreet}>Greet</button>
</div>
</div>
<div className="footer">
<div><p>Click on the Wails logo to learn more</p></div>
<div><p>{time}</p></div>
<div className="container">
<div>
<a wml-openURL="https://wails.io">
<img src="/wails.png" className="logo" alt="Wails logo"/>
</a>
<a wml-openURL="https://reactjs.org">
<img src='/react.svg' className="logo react" alt="React logo"/>
</a>
</div>
<h1>Wails + React</h1>
<div className="result">{result}</div>
<div className="card">
<div className="input-box">
<input className="input" value={name} onChange={(e) => setName(e.target.value)} type="text" autoComplete="off"/>
<button className="btn" onClick={doGreet}>Greet</button>
</div>
</div>
<div className="footer">
<div><p>Click on the Wails logo to learn more</p></div>
<div><p>{time}</p></div>
</div>
</div>
)
}

Some files were not shown because too many files have changed in this diff Show More