sketching components

README.md

@@ -57,12 +57,14 @@ tagTransform(classNameTransform()) // h1.poop
 You can also import a `pipe` utility that makes it easier to compose multiple functions into a selector pipeline.
 
 ```js
-import { pipe, tag, className } from '@alexvipond/css-selector-pipes'
+import { pipe, tag, className, attribute, focus } from '@alexvipond/css-selector-pipes'
 
 pipe(
   tag('h1'),
-  className('poop')
-)() // h1.poop
+  className('poop'),
+  attribute('name', '$=', 'lol'),
+  focus()
+)() // h1.poop["name"$="lol"]:focus
 ```
 
 All functions are fully typed, and you can check out these test files for further documentation and a list of available functions:

package.json

@@ -31,6 +31,10 @@
     "vite": "^2.2.3"
   },
   "dependencies": {
+    "@baleada/logic": "^0.19.9",
+    "@headlessui/vue": "^1.2.0",
+    "@heroicons/vue": "^1.0.1",
+    "nanoid": "^3.1.23",
     "vue": "^3.0.11"
   }
 }

src/InputPipe.vue

@@ -0,0 +1,89 @@
+<template>
+  <Listbox v-model="selectedPipe">
+    <div class="relative mt-1">
+      <ListboxButton
+        class="relative w-full py-2 pl-3 pr-10 text-left bg-white rounded-lg shadow-md cursor-default focus:outline-none focus-visible:ring-2 focus-visible:ring-opacity-75 focus-visible:ring-white focus-visible:ring-offset-orange-300 focus-visible:ring-offset-2 focus-visible:border-indigo-500"
+      >
+        <span class="block truncate">{{ selectedPipe.label }}</span>
+        <span
+          class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none"
+        >
+          <SelectorIcon class="w-5 h-5 text-blue-gray-400" aria-hidden="true" />
+        </span>
+      </ListboxButton>
+
+      <transition
+        leave-active-class="transition duration-100 ease-in"
+        leave-from-class="opacity-100"
+        leave-to-class="opacity-0"
+      >
+        <ListboxOptions
+          class="absolute w-full py-1 mt-1 overflow-auto bg-white rounded-md shadow-lg max-h-60 ring-1 ring-black ring-opacity-5 focus:outline-none"
+        >
+          <ListboxOption
+            v-slot="{ active, selected }"
+            v-for="pipe in pipeMetadata"
+            :key="pipe.name"
+            :value="pipe"
+            as="template"
+          >
+            <li
+              :class="[
+                active ? 'text-violet-900 bg-violet-100' : 'text-blue-gray-900',
+                'cursor-default select-none relative py-2 pl-10 pr-4',
+              ]"
+            >
+              <span
+                :class="[
+                  selected ? 'font-medium' : 'font-normal',
+                  'block',
+                ]"
+                >{{ pipe.label }}</span
+              >
+              <span
+                v-if="selected"
+                class="absolute inset-y-0 left-0 flex items-center pl-3 text-violet-600"
+              >
+                <CheckIcon class="w-5 h-5" aria-hidden="true" />
+              </span>
+            </li>
+          </ListboxOption>
+        </ListboxOptions>
+      </transition>
+    </div>
+  </Listbox>
+</template>
+
+<script lang="ts">
+import { ref } from 'vue'
+import {
+  Listbox,
+  ListboxLabel,
+  ListboxButton,
+  ListboxOptions,
+  ListboxOption,
+} from '@headlessui/vue'
+import { CheckIcon, SelectorIcon } from '@heroicons/vue/solid'
+import { pipeMetadata } from './pipeMetadata'
+
+export default {
+  components: {
+    Listbox,
+    ListboxLabel,
+    ListboxButton,
+    ListboxOptions,
+    ListboxOption,
+    CheckIcon,
+    SelectorIcon,
+  },
+
+  setup() {
+    const selectedPipe = ref(pipeMetadata[0])
+
+    return {
+      pipeMetadata,
+      selectedPipe,
+    }
+  },
+}
+</script>

src/interface/App.vue

@@ -1,13 +1,92 @@
 <template>
-  <main class="h-screen w-screen flex items-center justify-center bg-gray-900">
-    <h1 class="text-2xl tracking-widest font-bold uppercase text-gray-400">CSS Selector Builder</h1>
+  <main class="h-screen w-screen flex flex-col items-center gap-12 p-24 bg-blue-gray-900">
+    <section class="w-full max-w-xl flex flex-col gap-3">
+      <h2 class="uppercase font-bold text-blue-gray-400 opacity-60 tracking-[.2em] text-sm">Selector</h2>
+      <pre class="mt-4 rounded-5 shadow-5 p-4 bg-violet-900 text-violet-300 overflow-x-scroll"><code>{{ selector }}</code></pre>
+    </section>
+    <section class="w-full max-w-xl flex flex-col gap-3">
+      <h1 class="mt-8 uppercase font-bold text-blue-gray-400 opacity-60 tracking-[.2em] text-sm">Selector Builder</h1>
+    </section>
+
+    <!-- <FormConditions
+      class="w-full max-w-lg text-lg"
+      @create="createCondition"
+      @delete="deleteCondition"
+      @update="updateCondition"
+      @reorder="reorderCondition"
+    /> -->
   </main>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { ref, computed, defineComponent } from 'vue'
+import type { Ref } from 'vue'
+import { nanoid } from 'nanoid'
+import { createReorder } from '@baleada/logic'
+// import FormConditions from './FormConditions.vue'
+import { toSelector } from './toSelector'
+import type { Condition } from './toSelector'
+
+export default defineComponent({
+  components: {
+    // FormConditions,
+  },
   setup () {
+    const conditions = ref<Condition[]>([]),
+          selector = computed(() => toSelector(conditions.value))
+    
+    function createCondition () {
+      conditions.value = [
+        ...conditions.value,
+        {
+          id: nanoid(),
+          method: undefined,
+          args: []
+        }
+      ]
+    }
     
+    function deleteCondition ({ id }: { id: string }) {
+      const conditionIndex = findConditionIndex({ id, conditions }),
+            before = conditionIndex === 0 ? [] : conditions.value.slice(0, conditionIndex),
+            after = conditions.value.slice(conditionIndex + 1)
+      
+      conditions.value = [
+        ...before,
+        ...after,
+      ]
+    }
+
+    function updateCondition ({ id, withUpdates }: { id: string, withUpdates: Condition }) {
+      const index = findConditionIndex({ id, conditions }),
+            item = conditions[index],
+            before = index === 0 ? [] : conditions.value.slice(0, index),
+            after = conditions.value.slice(index + 1)
+
+      conditions.value = [
+        ...before,
+        { ...item, ...withUpdates },
+        ...after,
+      ]
+    }
+
+    function reorderCondition ({ id, to }: { id: string, to: number }) {
+      const index = findConditionIndex({ id, conditions })
+      conditions.value = createReorder<Condition>({ from: index, to })(conditions.value)
+    }
+
+
+    return {
+      createCondition,
+      deleteCondition,
+      updateCondition,
+      reorderCondition,
+      selector,
+    }
   }
+})
+
+function findConditionIndex ({ id, conditions }: { id: string, conditions: Ref<Condition[]>}) {
+  return conditions.value.findIndex(({ id: i }) => i === id)
 }
 </script>

src/interface/FormConditions.vue

@@ -0,0 +1,36 @@
+<template>
+  <section class="flex items-center">
+    <label class="flex-1 font-6 text-4">{label}</label>
+    <InterfaceOptionSelector            
+      class="flex-1"
+      enforcedSelector={enforcedSelector}
+      {...{ selector, setSelector }}
+    />
+  </section>
+
+</template>
+
+<script lang="ts">
+import { ref, defineComponent } from 'vue'
+
+export default defineComponent({
+  components: {},
+  setup(props, { emit }) {
+    const createEmit = () => {
+            emit('create')
+          },
+          deleteEmit = ({ id }) => {
+            emit('delete', { id })
+          },
+          updateEmit = ({ id, withUpdates }) => {
+            emit('update', { id, withUpdates })
+          },
+          reorderEmit = ({ id, to }) => {
+            emit('reorder', { id, to })
+          }
+
+
+
+  },
+})
+</script>