setting borders size

Author: Allexik

src/components/panel.vue

@@ -2,7 +2,7 @@
 	<div
 		:class="{
 			'color-editing-panel border p-2': editing,
-			'border panels-border': showBorders && !isGrid && !editing
+			[`border-${bordersSize} panels-border`]: showBorders && !isGrid && !editing
 		}"
 		class="flex flex-auto flex-col overflow-hidden h-full"
 	>
@@ -87,6 +87,9 @@ export default {
 		showBorders() {
 			return this.settings.showBorders
 		},
+		bordersSize() {
+			return this.settings.bordersSize
+		},
 		...mapState(['editing']),
 		name() {
 			return this.$parent.panel.name

src/components/settings.vue

@@ -41,7 +41,7 @@
 			</div>
 		</div>
 		<div class="flex -mx-2">
-			<div class="w-1/2 px-2">
+			<div class="w-1/3 px-2">
 				<div class="field">
 					<div class="flex">
 						<label
@@ -57,6 +57,28 @@
 					</div>
 				</div>
 			</div>
+			<div class="w-2/3 px-2">
+				<div class="field">
+					<label
+						:for="`settings-borders-size`"
+						class="label"
+					>Borders size</label>
+					<div class="flex">
+						<input
+							:id="`settings-borders-size`"
+							v-model.number="bordersSize"
+							type="range"
+							class="flex-grow"
+							min="1"
+							max="4"
+						>
+						<span
+							class="w-10 p-2"
+							v-text="bordersSize"
+						/>
+					</div>
+				</div>
+			</div>
 		</div>
 	</overlay>
 </template>
@@ -87,6 +109,14 @@ export default {
 			set(value) {
 				this.setSetting({key: 'showBorders', value})
 			}
+		},
+		bordersSize: {
+			get({settings}) {
+				return settings.bordersSize
+			},
+			set(value) {
+				this.setSetting({key: 'bordersSize', value})
+			}
 		}
 	},
 	methods: {

src/store/modules/settings.js

@@ -5,6 +5,7 @@ export default {
 		hasEdited: false,
 		theme: 'default',
 		showBorders: true,
+		bordersSize: 1,
 		version: 1
 	},
 	mutations: {

tailwind.config.js

@@ -16,6 +16,10 @@ module.exports = {
 				'xl-light': lightVariant(defaultTheme.boxShadow.xl),
 				'2xl-light': lightVariant(defaultTheme.boxShadow['2xl'])
 			},
+			borderWidth: {
+				1: '1px',
+				3: '3px'
+			},
 			width: {
 				'1/2': 'calc(100%/2)',
 				'1/3': 'calc(100%/3)',