basic, undesigned support for multiple selectors in certain pseudo-se…

…lectors
AlexVipond · May 21, 2021 · 55427f5 · 55427f5
1 parent 939f9d7
commit 55427f5
Show file tree

Hide file tree

Showing 4 changed files with 149 additions and 133 deletions.
diff --git a/README.md b/README.md
@@ -6,7 +6,7 @@ This project is a TypeScript library for building CSS selectors programmatically
 ## Motivation
 
 - Create a nice interface that people can use to build CSS selectors and explore different types of CSS selectors
-- Practice type definitions, test-driven development, functional programming, pipelines, dark mode design, and recursive components in Vue 3
+- Practice type definitions, test-driven development, functional programming, pipelines, dark mode design, controlled components, and recursive components in Vue 3
 - Have fun with my favorite tools
   - TypeScript
   - Vue 3 Composition API

diff --git a/src/interface/components/FormOperation.vue b/src/interface/components/FormOperation.vue
@@ -38,15 +38,24 @@
         </button>
       </div>
     </div>
-    <FormArg
-      v-for="(arg, index) in pipe.args"
-      :key="arg.name"
-      :label="arg.label"
-      :inputType="arg.inputType"
-      :required="arg.required"
-      :modelValue="operation.args[index]"
-      @update:modelValue="newArg => operation = ({ ...operation, args: createReplace({ index, item: newArg })(operation.args) })"
-    />
+    <template v-if="shouldUseFormOperationsArrays">
+      <FormOperationsArrays
+        :modelValue="operation.args"
+        @update:modelValue="newOperationsArrays => operation = ({ ...operation, args: newOperationsArrays })"
+        :isTopLevel="false"
+      />
+    </template>
+    <template v-else>
+      <FormArg
+        v-for="(arg, index) in pipe.args"
+        :key="arg.name"
+        :label="arg.label"
+        :inputType="arg.inputType"
+        :required="arg.required"
+        :modelValue="operation.args[index]"
+        @update:modelValue="newArg => operation = ({ ...operation, args: createReplace({ index, item: newArg })(operation.args) })"
+      />
+    </template>
   <!-- Arg repetition should be handled here -->
   </section>
 </template>
@@ -82,6 +91,11 @@ export default defineComponent({
             }
           }),
           pipe = computed(() => pipeMetadata.find(({ label }) => label === operation.value.pipe)),
+          shouldUseFormOperationsArrays = computed(() => 
+            pipe.value.args.length === 1
+            && pipe.value.args[0].inputType === 'selector'
+            && pipe.value.args[0].repeatable === true
+          ),
           pipeOption = computed(() => ({
             value: pipe.value.name,
             label: pipe.value.label,
@@ -100,6 +114,7 @@ export default defineComponent({
     return {
       operation,
       pipe,
+      shouldUseFormOperationsArrays,
       pipeOption,
       createReplace,
       emitDelete,

diff --git a/src/interface/entry.ts b/src/interface/entry.ts
@@ -1,11 +1,11 @@
 import { createApp } from 'vue'
 import CssSelectorBuilder from './CssSelectorBuilder.vue'
-import FormOperations from './components/FormOperations.vue'
+import FormOperationsArrays from './components/FormOperationsArrays.vue'
 import './index.css'
 import '@fontsource/inconsolata/400.css'
 import '@fontsource/inter/400.css'
 import '@fontsource/inter/700.css'
 
 createApp(CssSelectorBuilder)
-.component('FormOperations', FormOperations)
+.component('FormOperationsArrays', FormOperationsArrays)
 .mount('#app')
diff --git a/src/interface/pipeMetadata.ts b/src/interface/pipeMetadata.ts
@@ -564,6 +564,7 @@ export const pipeMetadata: PipeMetadatum[] = [
         defaultValue: [],
         label: 'Selector for the contained element',
         required: true,
+        repeatable: true,
       }
     ]
   },
@@ -828,127 +829,127 @@ export const pipeMetadata: PipeMetadatum[] = [
 
 
   // ABSTRACTIONS
-  {
-    name: 'prepend',
-    category: 'abstractions',
-    label: 'is selected by a custom selector prepended to the current selector',
-    args: [
-      {
-        name: 'prepended',
-        inputType: 'string',
-        label: 'Custom selector that should be prepended to the current selector',
-        required: true,
-        defaultValue: '',
-      },
-    ]
-  },
-  {
-    name: 'append',
-    category: 'abstractions',
-    label: 'is selected by a custom selector appended to the current selector',
-    args: [
-      {
-        name: 'appended',
-        inputType: 'string',
-        label: 'Custom selector that should be appended to the current selector',
-        required: true,
-        defaultValue: '',
-      },
-    ]
-  },
-  {
-    name: 'pseudoState',
-    category: 'abstractions',
-    label: 'has a custom pseudo state',
-    args: [
-      {
-        name: 'state',
-        inputType: 'string',
-        label: 'Name of the pseudo state',
-        required: true,
-        defaultValue: '',
-      },
-    ]
-  },
-  {
-    name: 'pseudoFn',
-    category: 'abstractions',
-    label: 'has a custom pseudo state that accepts arguments',
-    args: [
-      {
-        name: 'fn',
-        inputType: 'string',
-        label: 'Name of the pseudo state function',
-        required: true,
-        defaultValue: '',
-      },
-      {
-        name: 'args',
-        inputType: 'unknown',
-        defaultValue: '',
-        label: 'An argument to pass to the pseudo state function',
-        required: true,
-        repeatable: true,
-      },
-    ]
-  },
-  {
-    name: 'pseudoElement',
-    category: 'abstractions',
-    label: 'has a custom pseudo element',
-    args: [
-      {
-        name: 'state',
-        inputType: 'string',
-        label: 'Name of the pseudo element',
-        required: true,
-        defaultValue: '',
-      },
-    ]
-  },
-  {
-    name: 'pseudoElementFn',
-    category: 'abstractions',
-    label: 'has a custom pseudo element that accepts arguments',
-    args: [
-      {
-        name: 'fn',
-        inputType: 'string',
-        label: 'Name of the pseudo element function',
-        required: true,
-        defaultValue: '',
-      },
-      {
-        name: 'args',
-        inputType: 'unknown',
-        defaultValue: '',
-        label: 'An argument to pass to the pseudo element function',
-        required: true,
-        repeatable: true,
-      },
-    ]
-  },
-  {
-    name: 'relate',
-    category: 'abstractions',
-    label: 'has a custom relationship with another selector',
-    args: [
-      {
-        name: 'combinator',
-        inputType: 'string',
-        label: 'Custom combinator that goes between your selector and its relative',
-        required: true,
-        defaultValue: '',
-      },
-      {
-        name: 'relative',
-        inputType: 'selector',
-        defaultValue: [],
-        label: 'Your selector\'s relative',
-        required: true
-      },
-    ]
-  },
+  // {
+  //   name: 'prepend',
+  //   category: 'abstractions',
+  //   label: 'is selected by a custom selector prepended to the current selector',
+  //   args: [
+  //     {
+  //       name: 'prepended',
+  //       inputType: 'string',
+  //       label: 'Custom selector that should be prepended to the current selector',
+  //       required: true,
+  //       defaultValue: '',
+  //     },
+  //   ]
+  // },
+  // {
+  //   name: 'append',
+  //   category: 'abstractions',
+  //   label: 'is selected by a custom selector appended to the current selector',
+  //   args: [
+  //     {
+  //       name: 'appended',
+  //       inputType: 'string',
+  //       label: 'Custom selector that should be appended to the current selector',
+  //       required: true,
+  //       defaultValue: '',
+  //     },
+  //   ]
+  // },
+  // {
+  //   name: 'pseudoState',
+  //   category: 'abstractions',
+  //   label: 'has a custom pseudo state',
+  //   args: [
+  //     {
+  //       name: 'state',
+  //       inputType: 'string',
+  //       label: 'Name of the pseudo state',
+  //       required: true,
+  //       defaultValue: '',
+  //     },
+  //   ]
+  // },
+  // {
+  //   name: 'pseudoFn',
+  //   category: 'abstractions',
+  //   label: 'has a custom pseudo state that accepts arguments',
+  //   args: [
+  //     {
+  //       name: 'fn',
+  //       inputType: 'string',
+  //       label: 'Name of the pseudo state function',
+  //       required: true,
+  //       defaultValue: '',
+  //     },
+  //     {
+  //       name: 'args',
+  //       inputType: 'unknown',
+  //       defaultValue: '',
+  //       label: 'An argument to pass to the pseudo state function',
+  //       required: true,
+  //       repeatable: true,
+  //     },
+  //   ]
+  // },
+  // {
+  //   name: 'pseudoElement',
+  //   category: 'abstractions',
+  //   label: 'has a custom pseudo element',
+  //   args: [
+  //     {
+  //       name: 'state',
+  //       inputType: 'string',
+  //       label: 'Name of the pseudo element',
+  //       required: true,
+  //       defaultValue: '',
+  //     },
+  //   ]
+  // },
+  // {
+  //   name: 'pseudoElementFn',
+  //   category: 'abstractions',
+  //   label: 'has a custom pseudo element that accepts arguments',
+  //   args: [
+  //     {
+  //       name: 'fn',
+  //       inputType: 'string',
+  //       label: 'Name of the pseudo element function',
+  //       required: true,
+  //       defaultValue: '',
+  //     },
+  //     {
+  //       name: 'args',
+  //       inputType: 'unknown',
+  //       defaultValue: '',
+  //       label: 'An argument to pass to the pseudo element function',
+  //       required: true,
+  //       repeatable: true,
+  //     },
+  //   ]
+  // },
+  // {
+  //   name: 'relate',
+  //   category: 'abstractions',
+  //   label: 'has a custom relationship with another selector',
+  //   args: [
+  //     {
+  //       name: 'combinator',
+  //       inputType: 'string',
+  //       label: 'Custom combinator that goes between your selector and its relative',
+  //       required: true,
+  //       defaultValue: '',
+  //     },
+  //     {
+  //       name: 'relative',
+  //       inputType: 'selector',
+  //       defaultValue: [],
+  //       label: 'Your selector\'s relative',
+  //       required: true
+  //     },
+  //   ]
+  // },
 ]
 
 export const pipeMetadataDefault = pipeMetadata[0]