Merge branch 'alpha'

jakedowns · Dec 22, 2023 · 77b2843 · 77b2843
2 parents 0046775 + baece36
commit 77b2843
Show file tree

Hide file tree

Showing 19 changed files with 9,538 additions and 12 deletions.
diff --git a/gwt.html b/gwt.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Interactive Form Fields</title>
+<script src="https://unpkg.com/vue@next"></script>
+<script src="https://unpkg.com/vue-next-select"></script>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
+<style>
+  body {
+    font-family: 'Inter', sans-serif;
+    background-color: #333;
+  }
+  input {
+    background-color: #222;
+    color: green;
+  }
+  [v-cloak] {
+    display: none;
+  }
+</style>
+</head>
+<body class="bg-white">
+<div id="app" class="p-8" v-cloak>
+  <div class="max-w-lg mx-auto">
+    <div v-for="field in fields" :key="field.id" class="mb-4">
+      <label :for="field.id" class="block text-sm font-medium text-gray-700">{{ field.label }}</label>
+      <vue-next-select :options="suggestions" v-model="field.value" @input="addNewField(field.id, $event)"></vue-next-select>
+    </div>
+  </div>
+</div>
+
+<script>
+  const { ref, createApp } = Vue;
+
+  const app = createApp({
+    components: {
+      'vue-next-select': window['vue-next-select']
+    },
+    setup() {
+      const fields = ref([
+        { id: 'given', label: 'Given', placeholder: 'Enter a condition...', value: null },
+        { id: 'when', label: 'When', placeholder: 'Enter an action...', value: null },
+        { id: 'then', label: 'Then', placeholder: 'Enter the outcome...', value: null }
+      ]);
+
+      const suggestions = ref(['I am logged in', 'I am logged out']);
+
+      const addNewField = (id, value) => {
+        const field = fields.value.find(f => f.id === id);
+        if (field) {
+          field.value = value;
+        }
+        if (value && !suggestions.value.includes(value)) {
+          suggestions.value.push(value);
+        }
+      };
+
+      return {
+        fields,
+        suggestions,
+        addNewField
+      };
+    }
+  });
+
+  app.mount('#app');
+</script>
+</body>
+</html>