get basic data flows working, switch to light theme

package.json

@@ -21,6 +21,7 @@
     "test": "npm run test:only ."
   },
   "devDependencies": {
+    "@fontsource/inconsolata": "^4.3.0",
     "@fontsource/inter": "^4.3.0",
     "@tailwindcss/forms": "^0.3.2",
     "@vitejs/plugin-vue": "^1.2.2",
@@ -38,6 +39,7 @@
     "@headlessui/vue": "^1.2.0",
     "@heroicons/vue": "^1.0.1",
     "nanoid": "^3.1.23",
+    "query-string": "^7.0.0",
     "vue": "^3.0.11"
   }
 }

src/interface/CssSelectorBuilder.vue

@@ -0,0 +1,47 @@
+<template>
+  <main class="min-h-screen w-screen flex flex-col items-center gap-12 p-24 bg-blue-gray-200">
+    <section class="w-full max-w-xl flex flex-col gap-4">
+      <h2 class="uppercase font-bold text-blue-900 opacity-60 tracking-[.2em] text-sm">Selector</h2>
+      <pre class="rounded-md shadow-lg p-4 bg-gradient-to-r from-blue-700 to-blue-500 text-blue-100 overflow-x-scroll text-xl"><code>{{ selector || '*' }}</code></pre>
+    </section>
+    <section class="w-full max-w-xl flex flex-col gap-4">
+      <h1 class="uppercase font-bold text-blue-900 opacity-60 tracking-[.2em] text-sm">Selector Builder</h1>
+
+      <section class="bg-white p-6 rounded-md shadow-lg text-blue-gray-900">
+        <h2 class="font-bold tracking-wide">I'm looking for an element...</h2>
+        <FormConditions v-model="conditions" />
+      </section>
+    </section>
+  </main>
+  <!-- <footer class="bg-gray-900 h-20">
+  
+  </footer> -->
+</template>
+
+<script lang="ts">
+import { ref, computed, defineComponent } from 'vue'
+import FormConditions from './components/FormConditions.vue'
+import { toSelector } from './toSelector'
+import type { Condition } from './toSelector'
+
+export default defineComponent({
+  components: {
+    FormConditions,
+  },
+  setup () {
+    const conditions = ref<Condition[]>([
+            { id: '123', pipe: 'id', args: ['haha'] },
+            { id: 'ABC', pipe: 'className', args: ['business'] },
+            { id: '456', pipe: 'nthChild', args: ['even'] },
+          ]),
+          selector = computed(() => toSelector(conditions.value))
+
+
+
+    return {
+      conditions,
+      selector,
+    }
+  }
+})
+</script>