Skip to content

Commit

Permalink
refactor: SettingDialog.vueのボタントグルを共通化 (#2111)
Browse files Browse the repository at this point in the history
* 途中

* できた

* @update:model-valueに

* slot

* ちょっと変更

* npm run fmt
Hiroshiba authored Jun 10, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
1 parent 0bd0a3f commit 5d96ba7
Showing 3 changed files with 188 additions and 273 deletions.
57 changes: 57 additions & 0 deletions src/components/Dialog/SettingDialog/ButtonToggleCell.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
<!-- 2種類以上のボタンから1つ選ぶ設定項目 -->

<template>
<BaseCell :title :description>
<QBtnToggle
padding="xs md"
unelevated
color="background"
textColor="display"
toggleColor="primary"
toggleTextColor="display-on-primary"
:disable
:modelValue
:options="optionsForQBtnToggle"
@update:modelValue="props['onUpdate:modelValue']"
>
<slot />

<!-- FIXME: ツールチップの内容をaria-labelに付ける -->
<template
v-for="option in options.filter(
(option) => option.description != undefined,
)"
:key="option.label"
#[option.label]
>
<QTooltip :delay="500">
{{ option.description }}
</QTooltip>
</template>
</QBtnToggle>
</BaseCell>
</template>

<script setup lang="ts" generic="T">
import { computed } from "vue";
import BaseCell, { Props as BaseCellProps } from "./BaseCell.vue";

const props = defineProps<
BaseCellProps & {
modelValue: T;
// eslint-disable-next-line vue/prop-name-casing
"onUpdate:modelValue"?: (value: T) => void;
options: { label: string; value: T; description?: string }[];
disable?: boolean;
}
>();

/** QBtnToggle用のoptions */
const optionsForQBtnToggle = computed(() =>
props.options.map((option) => ({
label: option.label,
value: option.value,
slot: option.label,
})),
);
</script>
Loading

0 comments on commit 5d96ba7

Please sign in to comment.