standardize boolean naming, use FormOperationsArrays for all selector…

… inputs to make nested styles easier

README.md

@@ -22,7 +22,7 @@ This project is a TypeScript library for building CSS selectors programmatically
 
 To use the CSS selector builder interface, go to [the website](https://css-selector-builder.netlify.app).
 
-As you build your selector, you'll see the URL update with any new conditions you've created. You can share that URL with anyone to show them what you've built!
+As you build your selector, the URL updates with any new conditions you've created. Click the share button to create a tweet intent with a custom short link for your selector.
 
 To play with the selector builder's recursive abilities:
 1. Add a new condition
@@ -31,6 +31,8 @@ To play with the selector builder's recursive abilities:
 
 The relevant source code for the user interface is in [in the `src/interface` directory](https://github.com/AlexVipond/css-selector-builder/tree/main/src/interface).
 
+?conditions=%5B%5B%7B%22id%22%3A%22d7j4UMsM%22%2C%22pipe%22%3A%22has+a+class%2C+which+I%27ll+specify%22%2C%22args%22%3A%5B%22this%22%5D%7D%2C%7B%22id%22%3A%226xIfbS_i%22%2C%22pipe%22%3A%22matches+any+of+one+or+more+selectors%2C+which+I%27ll+specify%2C+and+retains+the+specificity+of+the+most+specific+matching+selector%22%2C%22args%22%3A%5B%5B%7B%22id%22%3A%22HmAfTmVh%22%2C%22pipe%22%3A%22has+an+attribute+whose+value+meets+certain+conditions%22%2C%22args%22%3A%5B%22super%22%2C%22%5E%3D%22%2C%22cool%22%2Cnull%5D%7D%5D%2C%5B%7B%22id%22%3A%22pGcH5x9k%22%2C%22pipe%22%3A%22has+an+ID%2C+which+I%27ll+specify%22%2C%22args%22%3A%5B%22and%22%5D%7D%5D%5D%7D%5D%2C%5B%7B%22id%22%3A%22z_vlIhxT%22%2C%22pipe%22%3A%22is+user-editable%22%2C%22args%22%3A%5B%5D%7D%2C%7B%22id%22%3A%226CuaUTWJ%22%2C%22pipe%22%3A%22is+the+adjacent+sibling+of+an+element%2C+which+I%27ll+specify%22%2C%22args%22%3A%5B%5B%7B%22id%22%3A%229mvLCYee%22%2C%22pipe%22%3A%22has+valid+contents%22%2C%22args%22%3A%5B%5D%7D%5D%5D%7D%5D%5D
+
 
 ### Library
 

src/interface/components/FormArg.vue

@@ -11,9 +11,8 @@
     type="text"
     :placeholder="label"
     v-model="arg"
-    :required="required"
+    :required="isRequired"
   />
-  <FormOperations v-if="inputType === 'selector'" v-model="arg" />
   <InputAttributeOperator
     v-if="inputType === 'attributeOperator'"
     :label="label"
@@ -56,7 +55,7 @@ export default defineComponent({
     InputDirectionality,
     InputNthPattern,
   },
-  props: ['modelValue', 'inputType', 'label', 'required'],
+  props: ['modelValue', 'inputType', 'label', 'isRequired'],
   setup (props, { emit }) {
     const arg = computed({
             get: () => props.modelValue,

src/interface/components/FormOperation.vue

@@ -62,6 +62,7 @@
         :modelValue="operation.args"
         @update:modelValue="newOperationsArrays => operation = ({ ...operation, args: newOperationsArrays })"
         :isTopLevel="false"
+        :isRepeatable="operation.args[0].isRepeatable"
       />
     </template>
     <template v-else>
@@ -70,7 +71,7 @@
         :key="arg.name"
         :label="arg.label"
         :inputType="arg.inputType"
-        :required="arg.required"
+        :isRequired="arg.isRequired"
         :modelValue="operation.args[index]"
         @update:modelValue="newArg => operation = ({ ...operation, args: createReplace({ index, item: newArg })(operation.args) })"
       />
@@ -112,7 +113,6 @@ export default defineComponent({
           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,

src/interface/components/FormOperationsArrays.vue

@@ -76,6 +76,7 @@
       </div>
     </transition-group>
     <button
+      v-if="isRepeatable"
       name="Add conditions for another selector"
       class="mx-auto p-3 text-lg btn--raised btn--grows rounded-full bg-gradient-to-r from-denim-700 to-denim-600 flex-shrink-0 text-denim-100"
       @click="operationsArrayCreate"
@@ -100,7 +101,7 @@ export default defineComponent({
     FormOperations,
     TrashIcon,
   },
-  props: ['modelValue', 'isTopLevel'],
+  props: ['modelValue', 'isTopLevel', 'isRepeatable'],
   setup (props, { emit }) {
     const operationsArrays = computed<Operation[][]>({
             get: () => props.modelValue,