refactor(frontend): use css modules

This commit is contained in:
syuilo 2023-05-14 10:21:56 +09:00
parent 89a3195dfd
commit 8c97c54cfa
40 changed files with 148 additions and 262 deletions

View file

@ -1,6 +1,6 @@
<template>
<div>
<MkButton class="kudkigyw" :primary="block.primary" @click="click()">{{ hpml.interpolate(block.text) }}</MkButton>
<MkButton :class="$style.button" :primary="block.primary" @click="click()">{{ hpml.interpolate(block.text) }}</MkButton>
</div>
</template>
@ -56,8 +56,8 @@ export default defineComponent({
});
</script>
<style lang="scss" scoped>
.kudkigyw {
<style lang="scss" module>
.button {
display: inline-block;
min-width: 200px;
max-width: 450px;

View file

@ -1,6 +1,6 @@
<template>
<div>
<MkButton class="llumlmnx" @click="click()">{{ hpml.interpolate(block.text) }}</MkButton>
<MkButton :class="$style.button" @click="click()">{{ hpml.interpolate(block.text) }}</MkButton>
</div>
</template>
@ -41,8 +41,8 @@ export default defineComponent({
});
</script>
<style lang="scss" scoped>
.llumlmnx {
<style lang="scss" module>
.button {
display: inline-block;
min-width: 300px;
max-width: 450px;

View file

@ -1,5 +1,5 @@
<template>
<div class="voxdxuby">
<div style="margin: 1em 0;">
<MkNote v-if="note && !block.detailed" :key="note.id + ':normal'" v-model:note="note"/>
<MkNoteDetailed v-if="note && block.detailed" :key="note.id + ':detail'" v-model:note="note"/>
</div>
@ -28,9 +28,9 @@ export default defineComponent({
onMounted(() => {
os.api('notes/show', { noteId: props.block.note })
.then(result => {
note.value = result;
});
.then(result => {
note.value = result;
});
});
return {
@ -39,9 +39,3 @@ export default defineComponent({
},
});
</script>
<style lang="scss" scoped>
.voxdxuby {
margin: 1em 0;
}
</style>

View file

@ -1,6 +1,6 @@
<template>
<div>
<MkInput class="kudkigyw" :model-value="value" type="number" @update:model-value="updateValue($event)">
<MkInput :class="$style.input" :model-value="value" type="number" @update:model-value="updateValue($event)">
<template #label>{{ hpml.interpolate(block.text) }}</template>
</MkInput>
</div>
@ -44,8 +44,8 @@ export default defineComponent({
});
</script>
<style lang="scss" scoped>
.kudkigyw {
<style lang="scss" module>
.input {
display: inline-block;
min-width: 300px;
max-width: 450px;

View file

@ -1,6 +1,6 @@
<template>
<div>
<MkInput class="kudkigyw" :model-value="value" type="text" @update:model-value="updateValue($event)">
<MkInput :class="$style.input" :model-value="value" type="text" @update:model-value="updateValue($event)">
<template #label>{{ hpml.interpolate(block.text) }}</template>
</MkInput>
</div>
@ -44,8 +44,8 @@ export default defineComponent({
});
</script>
<style lang="scss" scoped>
.kudkigyw {
<style lang="scss" module>
.input {
display: inline-block;
min-width: 300px;
max-width: 450px;