Make use of CSS variables

src/components/BSMap.vue

@@ -1,11 +1,11 @@
 <template>
-  <div :style="{ lineHeight: `${size}px` }">
-    <BSRow v-for="(row, index) in rows" :key="index" :content="row" :cols="cols" :size="size" :row="index" />
+  <div :class="$style.map" :style="style">
+    <BSRow v-for="(row, index) in rows" :key="index" :content="row" :row="index" />
   </div>
 </template>
 
 <script lang="ts" setup>
-import { computed, defineProps } from 'vue';
+import { CSSProperties, computed, defineProps } from 'vue';
 
 import BSRow from './BSMap/BSRow.vue';
 
@@ -24,4 +24,15 @@ const cols = computed(() => {
   }
   return cols;
 });
+
+const style = computed(() => <CSSProperties>{
+  '--bs-map-size': props.size,
+  '--bs-map-cols': cols.value,
+});
 </script>
+
+<style lang="scss" module>
+.map {
+  line-height: calc(var(--bs-map-size)* 1px);
+}
+</style>

src/components/BSMap/BSCell.vue

@@ -1,21 +1,19 @@
 <template>
-  <div :class="$style.cell" :title="content" :style="{ width: `${size * ratio}px`, height: `${size}px` }"
-    @click="handleClick">
-    <BSIcon v-for="(icon, index) in icons" :key="index" :content="icon" :size="size" :index="index"
+  <div :class="$style.cell" :title="content" @click="handleClick" :style="style">
+    <BSIcon v-for="(icon, index) in icons" :key="index" :content="icon" :index="index"
       @ratio="(ratio: number) => updateRatio(index, ratio)" />
   </div>
 </template>
 
 <script lang="ts" setup>
-import { computed, defineProps, ref } from 'vue';
+import { CSSProperties, computed, defineProps, ref } from 'vue';
 
 import { useEditorStore } from '@/stores/editor';
 
 import BSIcon from './BSIcon.vue';
 
 const props = defineProps<{
   content: string;
-  size: number;
   row: number;
   offset: number;
 }>();
@@ -32,6 +30,10 @@ const icons = computed(() => {
     .filter((icon) => !!icon);
 });
 
+const style = computed(() => <CSSProperties>{
+  '--bs-map-icon-ratio': ratio.value,
+});
+
 function handleClick(): void {
   editorStore.selection = {
     row: props.row,
@@ -51,5 +53,7 @@ function updateRatio(index: number, newRatio: number): void {
 .cell {
   position: relative;
   cursor: pointer;
+  width: calc(var(--bs-map-size) * var(--bs-map-icon-ratio) * 1px);
+  height: calc(var(--bs-map-size) * 1px);
 }
 </style>

src/components/BSMap/BSIcon.vue

@@ -1,16 +1,9 @@
 <template>
   <div v-if="label" :class="{ [$style.label]: true, [$style.overlay]: index > 0 }"
-    :data-bold="label.params.b || label.params.bold" :data-align="(label.params.align || ``).toUpperCase()" :style="{
-      width: `${size * ratio}px`,
-      height: `${size}px`,
-      fontSize: `${size - 8}px`,
-    }">
+    :data-bold="label.params.b || label.params.bold" :data-align="(label.params.align || ``).toUpperCase()">
     <span>{{ label.text }}</span>
   </div>
-  <img v-else :class="{ [$style.icon]: true, [$style.overlay]: index > 0 }" :style="{
-    width: `${size * ratio}px`,
-    height: `${size}px`,
-  }" :src="icon?.data" />
+  <img v-else :class="{ [$style.icon]: true, [$style.overlay]: index > 0 }" :src="icon?.data" />
 </template>
 
 <script lang="ts" setup>
@@ -21,7 +14,6 @@ import { useIconStore } from '@/stores/icon';
 
 const props = defineProps<{
   content: string;
-  size: number;
   index: number;
 }>();
 
@@ -91,13 +83,17 @@ function parseTextParams(str: string): Record<string, string> {
   position: absolute;
   user-select: none;
 
+  width: calc(var(--bs-map-size) * var(--bs-map-icon-ratio) * 1px);
+  height: calc(var(--bs-map-size) * 1px);
+
   .overlay {
     z-index: 1;
   }
 }
 
 .label {
   font-family: monospace;
+  font-size: calc(var(--bs-map-size) * 1px - 8px);
   text-align: center;
 
   span {

src/components/BSMap/BSRow.vue

@@ -1,9 +1,9 @@
 <template>
   <div :class="$style.row">
-    <div :class="$style.cells" :style="{ flexBasis: `${iconWidth}px` }">
+    <div :class="$style.cells">
       <BSCell v-for="({ cell, offset }, index) in cells" :key="index"
         :class="{ [$style.selection]: true, [$style.focused]: isFocused(row, offset, cell.length) }" :content="cell"
-        :size="size" :row="row" :offset="offset" />
+        :row="row" :offset="offset" />
     </div>
     <div :class="$style.texts">
       <BSText v-for="({ text, offset, align }, index) in texts" :key="index"
@@ -23,8 +23,6 @@ import BSText from './BSText.vue';
 
 const props = defineProps<{
   content: string;
-  cols: number;
-  size: number;
   row: number;
 }>();
 
@@ -55,8 +53,6 @@ const texts = computed(() => {
     .filter(({ text }) => text && text.trim());
 });
 
-const iconWidth = computed(() => props.size * props.cols);
-
 function isFocused(row: number, offset: number, length: number): boolean {
   const { selection } = editorStore;
   return (
@@ -74,7 +70,7 @@ function isFocused(row: number, offset: number, length: number): boolean {
   align-items: stretch;
 
   >.cells {
-    flex: 0 0 auto;
+    flex: 0 0 calc(var(--bs-map-size) * var(--bs-map-cols) * 1px);
     display: flex;
     justify-content: center;
   }