basic support for deleting full selectors

AlexVipond · May 18, 2021 · 8d11259 · 8d11259
1 parent 62f3263
commit 8d11259
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 12 deletions.
diff --git a/src/interface/CssSelectorBuilder.vue b/src/interface/CssSelectorBuilder.vue
@@ -33,7 +33,7 @@
         class="relative w-full max-w-xl btn--grows rounded-md text-violet-100 text-xl"
         @click="() => copyable.copy()"
       >
-        <pre class="w-full p-4 brand-gradient-to-r overflow-x-scroll rounded-md shadow-lg"><code>{{ selector || '*' }}</code></pre>
+        <pre class="w-full p-4 brand-gradient-to-r overflow-x-scroll rounded-md shadow-lg text-left"><code>{{ selector || '*' }}</code></pre>
         <transition
           enter-active-class="transition duration-100 delay-125 ease-in"
           enter-from-class="opacity-0"
@@ -87,11 +87,21 @@
           :key="index"
           class="flex flex-col gap-8"
         >
-          <FormOperations
-            :modelValue="operations"
-            @update:modelValue="newOperations => operationsArrays = createReplace({ index, item: newOperations })(operationsArrays)"
-            :isTopLevel="true"
-          />
+          <div class="flex flex-col gap-4">
+            <button
+              type="button"
+              name="Delete condition"
+              class="ml-auto flex-shrink-0 p-1 btn--raised btn--grows bg-[#AD4040] text-[#FED7D7]  rounded-full"
+              @click="() => operationsArrays = createDelete({ index })(operationsArrays)"
+            >
+              <TrashIcon class="h-5 w-5" />
+            </button>
+            <FormOperations
+              :modelValue="operations"
+              @update:modelValue="newOperations => operationsArrays = createReplace({ index, item: newOperations })(operationsArrays)"
+              :isTopLevel="true"
+            />
+          </div>
           <div
             v-if="index !== operationsArrays.length - 1"
             class="flex items-center justify-center gap-3 font-mono"
@@ -106,7 +116,7 @@
       </transition-group>
       <button
         name="Add conditions for another selector"
-        class="mx-auto p-3 text-lg btn--raised btn--grows rounded-full p-3 brand-gradient-to-r flex-shrink-0 text-violet-100"
+        class="mx-auto p-3 text-lg btn--raised btn--grows rounded-full p-3 bg-gradient-to-r from-denim-700 to-denim-600 flex-shrink-0 text-denim-100"
         @click="operationsArrays = [...operationsArrays, []]"
         type="button"
       >
@@ -141,8 +151,12 @@ import {
   SimpleNPM,
 } from '@baleada/vue-simple-icons'
 import { useCopyable } from '@baleada/vue-composition'
-import { createReplace } from '@baleada/logic'
-import { CheckIcon, ClipboardCopyIcon } from '@heroicons/vue/solid'
+import { createReplace, createDelete, createReorder } from '@baleada/logic'
+import { 
+  CheckIcon,
+  ClipboardCopyIcon,
+} from '@heroicons/vue/solid'
+import { TrashIcon } from '@heroicons/vue/outline'
 import { toOperated } from './toOperated'
 import type { Operation } from './toOperated'
 import FormOperations from './components/FormOperations.vue'
@@ -157,6 +171,7 @@ export default defineComponent({
     PopoverHelp,
     CheckIcon,
     ClipboardCopyIcon,
+    TrashIcon,
   },
   setup () {
     const operationsArrays = ref<Operation[][]>([[]]),
@@ -188,6 +203,8 @@ export default defineComponent({
       selector,
       copyable,
       createReplace,
+      createDelete,
+      createReorder,
     }
   }
 })

diff --git a/src/interface/components/PopoverHelp.vue b/src/interface/components/PopoverHelp.vue
@@ -25,11 +25,12 @@
           <div class="brand-gradient-to-r p-px rounded-md shadow-lg">
             <article class="flex flex-col gap-5 px-4 py-6 sm:p-6 sm:py-8 bg-denim-1100 text-denim-300 rounded-md">
               <h2 class="mr-auto font-bold text-2xl bg-gradient-to-r from-violet-600 to-violet-400 bg-clip-text text-transparent">What is this?</h2>
-              <p>This is a user interface for building CSS selectors and learning what types of CSS selectors are available.</p>
+
+              <p>This is a user interface for building CSS selectors, and for learning what types of CSS selectors are available.</p>
 
-              <p><strong class="bg-gradient-to-r from-violet-600 to-violet-400 bg-clip-text text-transparent">Click the plus button</strong> to start adding operations for your selector.</p>
+              <p>Use the <strong class="bg-gradient-to-r from-violet-600 to-violet-400 bg-clip-text text-transparent">plus button</strong> to start adding conditions for your selector, and use the <strong class="bg-gradient-to-r from-violet-600 to-violet-400 bg-clip-text text-transparent">OR button</strong> to combine a separate selector with the others that you've built.</p>
 
-              <p>As you build, you'll see the URL update with any new operations you've created. You can <strong class="bg-gradient-to-r from-violet-600 to-violet-400 bg-clip-text text-transparent">share that URL</strong> with anyone to show them what you've built!</p>
+              <p>As you build, you'll see the URL update with any new selector conditions you've created. You can <strong class="bg-gradient-to-r from-violet-600 to-violet-400 bg-clip-text text-transparent">share that URL</strong> with anyone to show them what you've built!</p>
             </article>
           </div>
         </PopoverPanel>