Skip to content

Commit

Permalink
Make use of CSS variables
Browse files Browse the repository at this point in the history
  • Loading branch information
xingrz committed Mar 23, 2024
1 parent f398035 commit ef52f37
Show file tree
Hide file tree
Showing 4 changed files with 32 additions and 25 deletions.
17 changes: 14 additions & 3 deletions src/components/BSMap.vue
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -24,4 +24,15 @@ const cols = computed(() => {
}
return cols;
});
const style = computed(() => ({
'--bs-map-size': props.size,
'--bs-map-cols': cols.value,
}) as CSSProperties);
</script>

<style lang="scss" module>
.map {
line-height: calc(var(--bs-map-size)* 1px);
}
</style>
14 changes: 9 additions & 5 deletions src/components/BSMap/BSCell.vue
Original file line number Diff line number Diff line change
@@ -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;
}>();
Expand All @@ -32,6 +30,10 @@ const icons = computed(() => {
.filter((icon) => !!icon);
});
const style = computed(() => ({
'--bs-map-icon-ratio': ratio.value,
}) as CSSProperties);
function handleClick(): void {
editorStore.selection = {
row: props.row,
Expand All @@ -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>
16 changes: 6 additions & 10 deletions src/components/BSMap/BSIcon.vue
Original file line number Diff line number Diff line change
@@ -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>
Expand All @@ -21,7 +14,6 @@ import { useIconStore } from '@/stores/icon';
const props = defineProps<{
content: string;
size: number;
index: number;
}>();
Expand Down Expand Up @@ -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 {
Expand Down
10 changes: 3 additions & 7 deletions src/components/BSMap/BSRow.vue
Original file line number Diff line number Diff line change
@@ -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"
Expand All @@ -23,8 +23,6 @@ import BSText from './BSText.vue';
const props = defineProps<{
content: string;
cols: number;
size: number;
row: number;
}>();
Expand Down Expand Up @@ -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 (
Expand All @@ -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;
}
Expand Down

0 comments on commit ef52f37

Please sign in to comment.