Clean up style of BSMap components

Classes should be in their right SFC
xingrz · Apr 6, 2024 · 3272e90 · 3272e90
1 parent 485bdd1
commit 3272e90
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 7 deletions.
diff --git a/src/components/BSMap/BSCell.vue b/src/components/BSMap/BSCell.vue
@@ -1,7 +1,7 @@
 <template>
   <BSSelectable v-slot="{ selectable }" :row="props.row" :offset="props.offset" :length="props.src.length">
     <div :class="[selectable, $style.cell]" :title="props.src" @click="handleClick" :style="style">
-      <BSIcon v-for="(icon, index) in (parts?.icons || [])" :key="index" :src="icon"
+      <BSIcon v-for="(icon, index) in (parts?.icons || [])" :key="index" :class="$style.icon" :src="icon"
         @ratio="(ratio: number) => updateRatio(index, ratio)" />
     </div>
   </BSSelectable>
@@ -66,8 +66,11 @@ function updateRatio(layer: number, newRatio: number): void {
 <style lang="scss" module>
 .cell {
   position: relative;
-  cursor: pointer;
   width: calc(var(--bs-map-size) * var(--bs-map-cell-ratio, 1) * 1px);
   height: calc(var(--bs-map-size) * 1px);
 }
+
+.icon {
+  position: absolute;
+}
 </style>
diff --git a/src/components/BSMap/BSIcon.vue b/src/components/BSMap/BSIcon.vue
@@ -80,9 +80,6 @@ function selectTextWidth(flag: string): number | undefined {
 <style lang="scss" module>
 .icon,
 .text {
-  position: absolute;
-  user-select: none;
-
   width: calc(var(--bs-map-size) * var(--bs-map-icon-ratio, 1) * 1px);
   height: calc(var(--bs-map-size) * 1px);
 }

diff --git a/src/components/BSMap/BSSelectable.vue b/src/components/BSMap/BSSelectable.vue
@@ -32,6 +32,8 @@ const focused = computed(() => {
 <style lang="scss" module>
 .selectable {
   position: relative;
+  user-select: none;
+  cursor: pointer;
 
   &::after {
     display: block;

diff --git a/src/components/BSMap/BSText.vue b/src/components/BSMap/BSText.vue
@@ -34,8 +34,6 @@ function handleClick(): void {
 
 <style lang="scss" module>
 .text {
-  user-select: none;
-  cursor: pointer;
   margin: 0 5px;
   font-family: monospace;
   white-space: nowrap;