Add spacing dimension selector

Author: rogden

src/components/Canvas/Sections/Spacing.vue

@@ -1,15 +1,62 @@
 <template>
   <div class="">
-    <div
-      v-for="(value, prop) in data"
-      :key="prop"
-      class="mb-2"
-      :style="{
-        backgroundColor: '#ccc',
-        width: value,
-        height: '50px',
-      }">
-      {{ prop }}
+    <div class="flex mb-6">
+      <button
+        class="w-40 bg-gray-200 hover:bg-gray-400 py-2 px-4 text-sm rounded-tl rounded-bl border border-gray-400 focus:outline-none"
+        :class="{'bg-gray-400': selectedProp === 'p'}"
+        @click="selectedProp = 'p'">Padding</button>
+      <button
+        class="w-40 bg-gray-200 hover:bg-gray-400 py-2 px-4 text-sm border-t border-b border-gray-400 focus:outline-none"
+        :class="{'bg-gray-400': selectedProp === 'm'}"
+        @click="selectedProp = 'm'">Margin</button>
+      <button
+        class="w-40 bg-gray-200 hover:bg-gray-400 py-2 px-4 text-sm rounded-tr rounded-br border border-gray-400 focus:outline-none"
+        :class="{'bg-gray-400': selectedProp === '-m'}"
+        @click="selectedProp = '-m'">Negative Margin</button>
+    </div>
+    <div class="flex mb-6">
+      <button
+        class="w-40 bg-gray-200 hover:bg-gray-400 py-2 px-4 text-sm rounded-tl rounded-bl border border-gray-400 focus:outline-none"
+        :class="{'bg-gray-400': dimensionProp === ''}"
+        @click="dimensionProp = ''">All</button>
+      <button
+        class="w-40 bg-gray-200 hover:bg-gray-400 py-2 px-4 text-sm border-t border-b border-r border-gray-400 focus:outline-none"
+        :class="{'bg-gray-400': dimensionProp === 't'}"
+        @click="dimensionProp = 't'">Top</button>
+      <button
+        class="w-40 bg-gray-200 hover:bg-gray-400 py-2 px-4 text-sm border-t border-b border-r border-gray-400 focus:outline-none"
+        :class="{'bg-gray-400': dimensionProp === 'r'}"
+        @click="dimensionProp = 'r'">Right</button>
+      <button
+        class="w-40 bg-gray-200 hover:bg-gray-400 py-2 px-4 text-sm border-t border-b border-r border-gray-400 focus:outline-none"
+        :class="{'bg-gray-400': dimensionProp === 'b'}"
+        @click="dimensionProp = 'b'">Bottom</button>
+      <button
+        class="w-40 bg-gray-200 hover:bg-gray-400 py-2 px-4 text-sm border-t border-b border-r border-gray-400 focus:outline-none"
+        :class="{'bg-gray-400': dimensionProp === 'l'}"
+        @click="dimensionProp = 'l'">Left</button>
+      <button
+        class="w-40 bg-gray-200 hover:bg-gray-400 py-2 px-4 text-sm border-t border-b border-gray-400 focus:outline-none"
+        :class="{'bg-gray-400': dimensionProp === 'x'}"
+        @click="dimensionProp = 'x'">Horizontal</button>
+      <button
+        class="w-40 bg-gray-200 hover:bg-gray-400 py-2 px-4 text-sm rounded-tr rounded-br border border-gray-400 focus:outline-none"
+        :class="{'bg-gray-400': dimensionProp === 'y'}"
+        @click="dimensionProp = 'y'">Vertical</button>
+    </div>
+    <div>
+      <div
+        v-for="(value, prop) in data"
+        :key="prop"
+        class="mb-2"
+      >
+        <div class="text-sm">{{ selectedProp }}{{ dimensionProp ? dimensionProp : '' }}-{{ prop }}</div>
+        <div :style="{
+          backgroundColor: '#ccc',
+          width: value,
+          height: '50px',
+        }"/>
+      </div>
     </div>
   </div>
 </template>
@@ -21,6 +68,13 @@ export default {
       type: Object,
       required: true
     }
+  },
+
+  data () {
+    return {
+      selectedProp: 'p',
+      dimensionProp: ''
+    }
   }
 }
 </script>

tailwind.config.js

@@ -2,6 +2,8 @@ module.exports = {
   theme: {
     extend: {}
   },
-  variants: {},
+  variants: {
+    borderColor: ['responsive', 'hover']
+  },
   plugins: []
 }