@vue-lynx-example/7guis 0.1.1

package/src/crud/App.vue

@@ -0,0 +1,126 @@
+<script setup>
+import { ref, reactive, computed, watch } from 'vue'
+
+const names = reactive(['Emil, Hans', 'Mustermann, Max', 'Tisch, Roman'])
+const selected = ref(-1)
+const prefix = ref('')
+const first = ref('')
+const last = ref('')
+
+const filteredNames = computed(() =>
+  names
+    .map((n, i) => ({ name: n, index: i }))
+    .filter(({ name }) => name.toLowerCase().startsWith(prefix.value.toLowerCase()))
+)
+
+watch(selected, (idx) => {
+  if (idx >= 0 && idx < names.length) {
+    const parts = names[idx].split(', ')
+    last.value = parts[0] || ''
+    first.value = parts[1] || ''
+  }
+})
+
+function create() {
+  if (first.value.trim() && last.value.trim()) {
+    const fullName = `${last.value}, ${first.value}`
+    if (!names.includes(fullName)) {
+      names.push(fullName)
+      first.value = ''
+      last.value = ''
+    }
+  }
+}
+
+function update() {
+  if (selected.value >= 0 && first.value.trim() && last.value.trim()) {
+    names[selected.value] = `${last.value}, ${first.value}`
+  }
+}
+
+function del() {
+  if (selected.value >= 0) {
+    names.splice(selected.value, 1)
+    selected.value = -1
+    first.value = ''
+    last.value = ''
+  }
+}
+</script>
+
+<template>
+  <view :style="{ padding: 20, gap: 12 }">
+    <!-- Filter -->
+    <view :style="{ gap: 4 }">
+      <text :style="{ fontSize: 12, color: '#666' }">Filter prefix:</text>
+      <input
+        type="text"
+        :value="prefix"
+        placeholder="Filter prefix"
+        :style="{ height: 36, borderWidth: 1, borderColor: '#ccc', borderRadius: 4, padding: '0 8px', fontSize: 16 }"
+        @input="(e) => prefix = e.detail.value"
+      />
+    </view>
+
+    <!-- Name list -->
+    <view :style="{ borderWidth: 1, borderColor: '#ccc', borderRadius: 4, minHeight: 120 }">
+      <view
+        v-for="item in filteredNames"
+        :key="item.index"
+        :style="{
+          padding: '8px 12px',
+          backgroundColor: selected === item.index ? '#0077ff' : 'transparent',
+        }"
+        @tap="selected = item.index"
+      >
+        <text :style="{ fontSize: 16, color: selected === item.index ? '#fff' : '#222' }">
+          {{ item.name }}
+        </text>
+      </view>
+    </view>
+
+    <!-- Name / Surname inputs -->
+    <view :style="{ gap: 8 }">
+      <view :style="{ display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 8 }">
+        <text :style="{ fontSize: 14, width: 80 }">Name:</text>
+        <input
+          type="text"
+          :value="first"
+          :style="{ flex: 1, height: 36, borderWidth: 1, borderColor: '#ccc', borderRadius: 4, padding: '0 8px', fontSize: 16 }"
+          @input="(e) => first = e.detail.value"
+        />
+      </view>
+      <view :style="{ display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 8 }">
+        <text :style="{ fontSize: 14, width: 80 }">Surname:</text>
+        <input
+          type="text"
+          :value="last"
+          :style="{ flex: 1, height: 36, borderWidth: 1, borderColor: '#ccc', borderRadius: 4, padding: '0 8px', fontSize: 16 }"
+          @input="(e) => last = e.detail.value"
+        />
+      </view>
+    </view>
+
+    <!-- Action buttons -->
+    <view :style="{ display: 'flex', flexDirection: 'row', gap: 8 }">
+      <view
+        :style="{ padding: '8px 16px', backgroundColor: '#0077ff', borderRadius: 6 }"
+        @tap="create"
+      >
+        <text :style="{ color: '#fff', fontSize: 14 }">Create</text>
+      </view>
+      <view
+        :style="{ padding: '8px 16px', backgroundColor: selected >= 0 ? '#0077ff' : '#ccc', borderRadius: 6 }"
+        @tap="update"
+      >
+        <text :style="{ color: '#fff', fontSize: 14 }">Update</text>
+      </view>
+      <view
+        :style="{ padding: '8px 16px', backgroundColor: selected >= 0 ? '#ff4444' : '#ccc', borderRadius: 6 }"
+        @tap="del"
+      >
+        <text :style="{ color: '#fff', fontSize: 14 }">Delete</text>
+      </view>
+    </view>
+  </view>
+</template>

package/src/crud/index.ts

@@ -0,0 +1,4 @@
+import { createApp } from 'vue-lynx';
+import App from './App.vue';
+
+createApp(App).mount();

package/src/flight-booker/App.vue

@@ -0,0 +1,81 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+const isReturn = ref(false)
+const departureDate = ref(dateToString(new Date()))
+const returnDate = ref(departureDate.value)
+
+const canBook = computed(() =>
+  !isReturn.value || returnDate.value > departureDate.value
+)
+
+function toggleFlightType() {
+  isReturn.value = !isReturn.value
+}
+
+function book() {
+  if (isReturn.value) {
+    console.log(`Booked return flight: depart ${departureDate.value}, return ${returnDate.value}`)
+  } else {
+    console.log(`Booked one-way flight: depart ${departureDate.value}`)
+  }
+}
+
+function dateToString(date) {
+  const y = date.getFullYear()
+  const m = String(date.getMonth() + 1).padStart(2, '0')
+  const d = String(date.getDate()).padStart(2, '0')
+  return `${y}-${m}-${d}`
+}
+</script>
+
+<template>
+  <view :style="{ padding: 20, gap: 12 }">
+    <!-- Flight type toggle (simulated select) -->
+    <view
+      :style="{ padding: '8px 16px', backgroundColor: '#eee', borderRadius: 6 }"
+      @tap="toggleFlightType"
+    >
+      <text :style="{ fontSize: 16 }">{{ isReturn ? 'Return Flight' : 'One-way Flight' }}</text>
+    </view>
+
+    <!-- Departure date -->
+    <view :style="{ gap: 4 }">
+      <text :style="{ fontSize: 12, color: '#666' }">Departure (YYYY-MM-DD)</text>
+      <input
+        type="text"
+        :value="departureDate"
+        :style="{ height: 36, borderWidth: 1, borderColor: '#ccc', borderRadius: 4, padding: '0 8px', fontSize: 16 }"
+        @input="(e) => departureDate = e.detail.value"
+      />
+    </view>
+
+    <!-- Return date -->
+    <view :style="{ gap: 4, opacity: isReturn ? 1 : 0.4 }">
+      <text :style="{ fontSize: 12, color: '#666' }">Return (YYYY-MM-DD)</text>
+      <input
+        type="text"
+        :value="returnDate"
+        :style="{ height: 36, borderWidth: 1, borderColor: isReturn ? '#ccc' : '#eee', borderRadius: 4, padding: '0 8px', fontSize: 16 }"
+        @input="(e) => { if (isReturn) returnDate = e.detail.value }"
+      />
+    </view>
+
+    <!-- Book button -->
+    <view
+      :style="{
+        padding: '10px 20px',
+        backgroundColor: canBook ? '#0077ff' : '#ccc',
+        borderRadius: 6,
+        alignSelf: 'flex-start',
+      }"
+      @tap="canBook && book()"
+    >
+      <text :style="{ color: '#fff', fontSize: 16 }">Book</text>
+    </view>
+
+    <text v-if="!canBook" :style="{ color: 'red', fontSize: 14 }">
+      Return date must be after departure date.
+    </text>
+  </view>
+</template>

package/src/flight-booker/index.ts

@@ -0,0 +1,4 @@
+import { createApp } from 'vue-lynx';
+import App from './App.vue';
+
+createApp(App).mount();

package/src/shims-vue.d.ts

@@ -0,0 +1,5 @@
+declare module '*.vue' {
+  import type { Component } from 'vue-lynx';
+  const component: Component;
+  export default component;
+}

package/src/temperature-converter/App.vue

@@ -0,0 +1,43 @@
+<script setup>
+import { ref } from 'vue'
+
+const celsius = ref('0')
+const fahrenheit = ref('32')
+
+function onCelsiusInput(e) {
+  const val = e.detail.value
+  celsius.value = val
+  const num = Number(val)
+  if (Number.isFinite(num)) {
+    fahrenheit.value = String(+(num * (9 / 5) + 32).toFixed(2))
+  }
+}
+
+function onFahrenheitInput(e) {
+  const val = e.detail.value
+  fahrenheit.value = val
+  const num = Number(val)
+  if (Number.isFinite(num)) {
+    celsius.value = String(+((num - 32) * (5 / 9)).toFixed(2))
+  }
+}
+</script>
+
+<template>
+  <view :style="{ display: 'flex', padding: 20, flexDirection: 'row', alignItems: 'center', gap: 8, flexWrap: 'wrap' }">
+    <input
+      type="text"
+      :value="celsius"
+      :style="{ width: 100, height: 36, borderWidth: 1, borderColor: '#ccc', borderRadius: 4, padding: '0 8px', fontSize: 16 }"
+      @input="onCelsiusInput"
+    />
+    <text :style="{ fontSize: 16 }">Celsius =</text>
+    <input
+      type="text"
+      :value="fahrenheit"
+      :style="{ width: 100, height: 36, borderWidth: 1, borderColor: '#ccc', borderRadius: 4, padding: '0 8px', fontSize: 16 }"
+      @input="onFahrenheitInput"
+    />
+    <text :style="{ fontSize: 16 }">Fahrenheit</text>
+  </view>
+</template>

package/src/temperature-converter/index.ts

@@ -0,0 +1,4 @@
+import { createApp } from 'vue-lynx';
+import App from './App.vue';
+
+createApp(App).mount();

package/src/timer/App.vue

@@ -0,0 +1,81 @@
+<script setup>
+import { ref, computed, onUnmounted } from 'vue'
+
+const duration = ref(15000) // ms
+const elapsed = ref(0)
+
+let lastTime = Date.now()
+const interval = setInterval(() => {
+  const now = Date.now()
+  const dt = now - lastTime
+  lastTime = now
+  if (elapsed.value < duration.value) {
+    elapsed.value = Math.min(elapsed.value + dt, duration.value)
+  }
+}, 50)
+
+onUnmounted(() => clearInterval(interval))
+
+const progressPct = computed(() =>
+  Math.min(elapsed.value / duration.value, 1) * 100
+)
+
+function reset() {
+  elapsed.value = 0
+  lastTime = Date.now()
+}
+
+function adjustDuration(delta) {
+  duration.value = Math.max(1000, Math.min(30000, duration.value + delta))
+}
+</script>
+
+<template>
+  <view :style="{ padding: 20, gap: 14 }">
+    <!-- Progress bar -->
+    <view :style="{ gap: 4 }">
+      <text :style="{ fontSize: 14, color: '#666' }">Elapsed Time:</text>
+      <view :style="{ height: 20, backgroundColor: '#eee', borderRadius: 4, overflow: 'hidden' }">
+        <view
+          :style="{
+            height: 20,
+            width: progressPct + '%',
+            backgroundColor: '#0077ff',
+            borderRadius: 4,
+          }"
+        />
+      </view>
+    </view>
+
+    <text :style="{ fontSize: 20 }">{{ (elapsed / 1000).toFixed(1) }}s</text>
+
+    <!-- Duration control -->
+    <view :style="{ gap: 4 }">
+      <text :style="{ fontSize: 14, color: '#666' }">
+        Duration: {{ (duration / 1000).toFixed(1) }}s
+      </text>
+      <view :style="{ display: 'flex', flexDirection: 'row', gap: 8 }">
+        <view
+          :style="{ padding: '6px 16px', backgroundColor: '#eee', borderRadius: 4 }"
+          @tap="adjustDuration(-1000)"
+        >
+          <text :style="{ fontSize: 16 }">-1s</text>
+        </view>
+        <view
+          :style="{ padding: '6px 16px', backgroundColor: '#eee', borderRadius: 4 }"
+          @tap="adjustDuration(1000)"
+        >
+          <text :style="{ fontSize: 16 }">+1s</text>
+        </view>
+      </view>
+    </view>
+
+    <!-- Reset -->
+    <view
+      :style="{ padding: '10px 20px', backgroundColor: '#0077ff', borderRadius: 6, alignSelf: 'flex-start' }"
+      @tap="reset"
+    >
+      <text :style="{ color: '#fff', fontSize: 16 }">Reset</text>
+    </view>
+  </view>
+</template>

package/src/timer/index.ts

@@ -0,0 +1,4 @@
+import { createApp } from 'vue-lynx';
+import App from './App.vue';
+
+createApp(App).mount();

package/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": ".",
+    "noEmit": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+  },
+  "include": ["src", "lynx.config.ts"],
+}