init

2026-07-13 13:02:23 +00:00
parent ce111431c3
commit 2445995172
111 changed files with 11646 additions and 0 deletions
@@ -0,0 +1,114 @@
+<script setup lang="ts">
+import {ref, onMounted, useTemplateRef} from 'vue'
+import {Events, WML} from "@wailsio/runtime";
+import {GreetService} from "../../bindings/changeme";
+
+// Show the actual Wails version this project was generated against.
+const wailsVersion = "v3.0.0-alpha2.106";
+
+const name = ref('');
+const time = ref('Listening for Time event...');
+
+const titleNameRef = useTemplateRef<HTMLElement>('titleNameRef');
+const toastRef = useTemplateRef<HTMLElement>('toastRef');
+const resultRef = useTemplateRef<HTMLElement>('resultRef');
+let toastTimer: ReturnType<typeof setTimeout>;
+
+// Crossfade the framework word in the heading ("Wails + Vue") to the name the
+// user entered ("Wails + <name>"): the old word fades out while the new one
+// fades in over the same spot.
+function swapTitleName(newName: string) {
+  const titleNameElement = titleNameRef.value;
+  if (!titleNameElement) {
+    return;
+  }
+  const current = titleNameElement.querySelector('.title-name-text:not(.is-outgoing)');
+  if (!current || current.textContent === newName) {
+    return;
+  }
+  const incoming = document.createElement('span');
+  incoming.className = 'title-name-text is-entering';
+  incoming.textContent = newName;
+  current.classList.add('is-outgoing');
+  titleNameElement.appendChild(incoming);
+  // Force a reflow so the transitions run from the starting state.
+  void incoming.offsetWidth;
+  incoming.classList.remove('is-entering');
+  current.classList.add('is-leaving');
+  current.addEventListener('transitionend', () => current.remove(), {once: true});
+}
+
+// Pop the toast with the message Go returned, then auto-dismiss it.
+function showToast(message: string) {
+  if (!resultRef.value || !toastRef.value) {
+    return;
+  }
+  resultRef.value.innerText = message;
+  toastRef.value.classList.add('is-visible');
+  clearTimeout(toastTimer);
+  toastTimer = setTimeout(() => toastRef.value?.classList.remove('is-visible'), 4000);
+}
+
+const doGreet = () => {
+  let n = name.value || 'anonymous';
+  swapTitleName(n);
+  GreetService.Greet(n).then(showToast).catch(console.error);
+}
+
+onMounted(() => {
+  Events.On('time', (timeValue: { data: string }) => {
+    // On a narrow screen the full RFC1123 stamp is too wide for the footer, so
+    // show just the clock time there (matching the CSS breakpoint).
+    const full = timeValue.data;
+    const compact = (full.match(/\d{1,2}:\d{2}:\d{2}/) || [full])[0];
+    time.value = window.matchMedia('(max-width: 640px)').matches ? compact : full;
+  });
+  // Wire up data-wml-openURL links (logos + footer "Docs" link).
+  WML.Reload();
+})
+</script>
+
+<template>
+  <main class="container">
+    <header class="brand">
+      <a class="brand-mark" data-wml-openURL="https://v3.wails.io" aria-label="Wails website">
+        <img src="/wails.png" class="brand-logo" alt="Wails logo"/>
+      </a>
+      <a class="brand-badge" data-wml-openURL="https://vuejs.org/" aria-label="Vue">
+        <img src="/vue.svg" alt="Vue logo"/>
+      </a>
+    </header>
+
+    <h1 class="title"><span class="title-accent">Wails +</span> <span class="title-name" ref="titleNameRef"><span class="title-name-text">Vue</span></span></h1>
+    <p class="subtitle">Build beautiful cross-platform apps with Go and Vue.</p>
+
+    <div class="greet">
+      <div class="input-box" id="input">
+        <svg class="input-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
+        <input aria-label="input" class="input" id="name" v-model="name" type="text" placeholder="Your name" autocomplete="off"/>
+        <button aria-label="greet-btn" class="btn" @click="doGreet">Greet
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
+        </button>
+      </div>
+    </div>
+  </main>
+
+  <hr class="footer-divider"/>
+  <footer class="footer">
+    <span class="footer-version">{{ wailsVersion }}</span>
+    <span class="footer-time">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
+      <span id="time">{{ time }}</span>
+    </span>
+    <a class="footer-docs" data-wml-openURL="https://v3.wails.io" aria-label="Wails documentation">Docs
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="7" y1="17" x2="17" y2="7"/><polyline points="7 7 17 7 17 17"/></svg>
+    </a>
+  </footer>
+
+  <!-- Toast: shows the greeting returned by the Go backend (overlay, so it never
+       reflows the layout). -->
+  <div class="toast" id="toast" ref="toastRef" role="status" aria-live="polite">
+    <span class="toast-label">From Go</span>
+    <span aria-label="result" class="toast-msg" id="result" ref="resultRef"></span>
+  </div>
+</template>