feat(tools): add spacing & bg image tools (#23)

src/components/editor/EditorComponentTools.vue

@@ -19,6 +19,12 @@
         :value="i.value"
         :title="i.label"
       />
+      <SpacingTool
+        v-if="i.type === 'spacing'"
+        :id="i.id"
+        :value="i.value"
+        :title="i.label"
+      />
       <ColorPickerTool
         v-if="i.type === 'colorPicker'"
         :id="i.id"
@@ -37,6 +43,12 @@
         :title="i.label"
         :value="i.value"
       />
+      <BackgroundImageTool
+        v-if="i.type === 'bgImage'"
+        :id="i.id"
+        :title="i.label"
+        :value="i.value"
+      />
       <AlignTool
         v-if="i.type === 'align'"
         :id="i.id"

src/components/editor/components/tools/BackgroundImageTool.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="background-tool">
+    <EditorToolLabel>
+      {{ title }}
+    </EditorToolLabel>
+    <div class="body">
+      <EditorToolLabel>URL </EditorToolLabel>
+      <ElInput
+        v-model="localValue.url"
+        placeholder="Image URLs"
+      />
+
+      <EditorToolLabel>Repeat </EditorToolLabel>
+      <ElRadioGroup v-model="localValue.repeat">
+        <ElRadioButton label="no-repeat">
+          No Repeat
+        </ElRadioButton>
+        <ElRadioButton label="repeat">
+          Repeat
+        </ElRadioButton>
+      </ElRadioGroup>
+
+      <EditorToolLabel> Size </EditorToolLabel>
+      <ElRadioGroup v-model="localValue.size">
+        <ElRadioButton label="unset">
+          None
+        </ElRadioButton>
+        <ElRadioButton label="cover">
+          Cover
+        </ElRadioButton>
+        <ElRadioButton label="contain">
+          Contain
+        </ElRadioButton>
+      </ElRadioGroup>
+
+      <EditorToolLabel> Position </EditorToolLabel>
+      <ElRadioGroup v-model="localValue.position">
+        <ElRadioButton label="top">
+          Top
+        </ElRadioButton>
+        <ElRadioButton label="button">
+          Button
+        </ElRadioButton>
+        <ElRadioButton label="center">
+          Center
+        </ElRadioButton>
+        <ElRadioButton label="left">
+          Left
+        </ElRadioButton>
+        <ElRadioButton label="right">
+          Right
+        </ElRadioButton>
+      </ElRadioGroup>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, watch } from 'vue'
+import type { BackgroundImageTool } from '@/types/editor'
+import { useComponentsStore } from '@/store/components'
+
+interface Props {
+  id: string
+  value: BackgroundImageTool['value']
+  title: string
+}
+
+const props = defineProps<Props>()
+
+const { updateToolById } = useComponentsStore()
+
+const localValue = reactive<BackgroundImageTool['value']>(props.value)
+
+watch(
+  localValue,
+  () => {
+    updateToolById<BackgroundImageTool>(props.id, 'value', localValue)
+  },
+  {
+    deep: true,
+  },
+)
+</script>
+
+<style lang="scss" scoped></style>

src/components/editor/components/tools/spacing/SpacingInput.vue

@@ -0,0 +1,62 @@
+<template>
+  <input
+    v-model="localValue"
+    class="spacing-input"
+    type="number"
+  >
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  modelValue: number
+}
+
+interface Emits {
+  (e: 'update:model-value', value: number): void
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<Emits>()
+
+const localValue = computed({
+  get: () => props.modelValue,
+  set: (v) => {
+    emit('update:model-value', v)
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+.spacing-input {
+  border: none;
+  width: 40px;
+  text-align: center;
+  margin: 0;
+  outline: none;
+  border-radius: 4px;
+  color: var(--color-text-primary);
+  &:hover {
+    outline: 1px solid var(--color-border);
+  }
+  &:focus {
+    outline: 1px solid var(--color-primary);
+  }
+  &[disabled] {
+    background-color: var(--color-background);
+    color: var(--color-grey-500);
+    cursor: not-allowed;
+    &:hover {
+      outline: none;
+    }
+  }
+}
+
+input[type='number']::-webkit-inner-spin-button,
+input[type='number']::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+</style>