refactoring

src/App.vue

@@ -6,6 +6,8 @@ import Button from "./components/Button.vue";
 import Page from "./components/Page.vue";
 import Input from "./components/Input.vue";
 import Canvas from "./components/Canvas.vue";
+import Switch from './components/Switch.vue';
+import Container from './components/Container.vue';
 import { ButtonSize, InputType } from "./types";
 import { useStore } from "./store";
 import { storeToRefs } from "pinia";
@@ -40,7 +42,7 @@ const savePng = async () => {
 </script>
 
 <template>
-  <div class="container">
+  <Container>
     <Sidebar>
       <SidebarBlock title="Фон">
         <Input v-model="imageBackgroundColor" :type="InputType.Color">Цвет {{ store.imageBackgroundColor }}</Input>
@@ -62,10 +64,7 @@ const savePng = async () => {
       </SidebarBlock>
 
       <SidebarBlock title="Поля">
-        <label class="switch">
+        <Switch v-model="marginEnable"/>
-          <input v-model="marginEnable" type="checkbox">
-          <span class="slider round"></span>
-        </label>
         <div v-if="marginEnable">
           <Input v-model="marginColor" :type="InputType.Color">
           Цвет {{ marginColor }}
@@ -99,92 +98,8 @@ const savePng = async () => {
         </ButtonsBar>
       </SidebarBlock>
     </Sidebar>
-  </div>
+  </Container>
 </template>
 
 <style scoped>
-#app,
-body,
-html {
-  height: 100vh;
-  width: 100vw;
-}
-
-.container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100vh;
-  width: 100vw;
-  font-family: MPLUS1p, sans-serif;
-}
-
-body {
-  background-color: aqua;
-}
-
-/* The switch - the box around the slider */
-.switch {
-  position: relative;
-  display: inline-block;
-  width: 60px;
-  height: 27px;
-  margin: 10px 0;
-}
-
-/* Hide default HTML checkbox */
-.switch input {
-  opacity: 0;
-  width: 0;
-  height: 0;
-}
-
-/* The slider */
-.slider {
-  position: absolute;
-  cursor: pointer;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: #ccc;
-  -webkit-transition: .4s;
-  transition: .4s;
-  border: 1px solid #5E503F;
-}
-
-.slider:before {
-  position: absolute;
-  content: "";
-  height: 17px;
-  width: 17px;
-  left: 5px;
-  bottom: 4px;
-  background-color: white;
-  -webkit-transition: .4s;
-  transition: .4s;
-}
-
-input:checked+.slider {
-  background-color: #EAE0D5;
-}
-
-input:focus+.slider {
-  box-shadow: 0 0 1px #EAE0D5;
-}
-
-input:checked+.slider:before {
-  -webkit-transform: translateX(31px);
-  -ms-transform: translateX(31px);
-  transform: translateX(31px);
-}
-
-/* Rounded sliders */
-.slider.round {
-  border-radius: 34px;
-}
-
-.slider.round:before {
-  border-radius: 50%;
-}
 </style>

src/components/Container.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="container">
+    <slot></slot>
+  </div>
+</template>
+
+<style scoped>
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  width: 100vw;
+  font-family: MPLUS1p, sans-serif;
+}
+</style>

src/components/Switch.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+const modelValue = defineModel<boolean>();
+</script>
+
+<template>
+  <label class="switch">
+    <input v-model="modelValue" type="checkbox">
+    <span class="slider round"></span>
+  </label>
+</template>
+
+<style scoped>
+/* The switch - the box around the slider */
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 27px;
+  margin: 10px 0;
+}
+
+/* Hide default HTML checkbox */
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+/* The slider */
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: .4s;
+  transition: .4s;
+  border: 1px solid #5E503F;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 17px;
+  width: 17px;
+  left: 5px;
+  bottom: 4px;
+  background-color: white;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+input:checked+.slider {
+  background-color: #EAE0D5;
+}
+
+input:focus+.slider {
+  box-shadow: 0 0 1px #EAE0D5;
+}
+
+input:checked+.slider:before {
+  -webkit-transform: translateX(31px);
+  -ms-transform: translateX(31px);
+  transform: translateX(31px);
+}
+
+/* Rounded sliders */
+.slider.round {
+  border-radius: 34px;
+}
+
+.slider.round:before {
+  border-radius: 50%;
+}
+</style>

src/style.css

@@ -1,3 +1,10 @@
+#app,
+body,
+html {
+  height: 100vh;
+  width: 100vw;
+}
+
 @font-face {
   font-family: "MPLUS1p";
   font-style: normal;