Refactor variable

This commit is contained in:
Ramon Wenger 2023-04-12 11:34:39 +02:00
parent 4acccd65df
commit 27ebe8a69f
4 changed files with 13 additions and 13 deletions

View File

@ -3,7 +3,7 @@ import type { CheckboxItem } from "@/components/ui/checkbox.types";
import log from "loglevel"; import log from "loglevel";
const props = defineProps<{ const props = defineProps<{
checkbox_item: CheckboxItem<any>; checkboxItem: CheckboxItem<any>;
disabled?: boolean; disabled?: boolean;
}>(); }>();
@ -36,7 +36,7 @@ const input = (e: Event) => {
<label <label
class="cy-checkbox cy-checkbox-checked block flex h-8 items-center bg-contain bg-no-repeat pl-8 disabled:opacity-50" class="cy-checkbox cy-checkbox-checked block flex h-8 items-center bg-contain bg-no-repeat pl-8 disabled:opacity-50"
:class=" :class="
checkbox_item.checked checkboxItem.checked
? 'bg-[url(/static/icons/icon-checkbox-checked.svg)] hover:bg-[url(/static/icons/icon-checkbox-checked-hover.svg)]' ? 'bg-[url(/static/icons/icon-checkbox-checked.svg)] hover:bg-[url(/static/icons/icon-checkbox-checked-hover.svg)]'
: 'bg-[url(/static/icons/icon-checkbox-unchecked.svg)] hover:bg-[url(/static/icons/icon-checkbox-unchecked-hover.svg)]' : 'bg-[url(/static/icons/icon-checkbox-unchecked.svg)] hover:bg-[url(/static/icons/icon-checkbox-unchecked-hover.svg)]'
" "
@ -45,21 +45,21 @@ const input = (e: Event) => {
> >
<input <input
ref="checkbox" ref="checkbox"
:checked="checkbox_item.checked" :checked="checkboxItem.checked"
:value="checkbox_item.value" :value="checkboxItem.value"
:disabled="disabled" :disabled="disabled"
:data-cy="`it-checkbox-${checkbox_item.value}`" :data-cy="`it-checkbox-${checkboxItem.value}`"
class="sr-only" class="sr-only"
type="checkbox" type="checkbox"
@keydown="keydown" @keydown="keydown"
@input="input" @input="input"
/> />
<div class="ml-4 flex-col"> <div class="ml-4 flex-col">
<div v-if="checkbox_item.label"> <div v-if="checkboxItem.label">
{{ checkbox_item.label }} {{ checkboxItem.label }}
</div> </div>
<div v-if="checkbox_item.subtitle" class="text-gray-900"> <div v-if="checkboxItem.subtitle" class="text-gray-900">
{{ checkbox_item.subtitle }} {{ checkboxItem.subtitle }}
</div> </div>
</div> </div>
</label> </label>

View File

@ -25,7 +25,7 @@ function updateItems(itemValue: string) {
<ItCheckbox <ItCheckbox
v-for="item in items" v-for="item in items"
:key="item.value" :key="item.value"
:checkbox_item="item" :checkbox-item="item"
:class="item.subtitle ? 'mb-6' : 'mb-4'" :class="item.subtitle ? 'mb-6' : 'mb-4'"
@toggle="updateItems(item.value)" @toggle="updateItems(item.value)"
/> />

View File

@ -418,7 +418,7 @@ function log(data: any) {
<h2 class="mb-8 mt-8">Checkbox</h2> <h2 class="mb-8 mt-8">Checkbox</h2>
<ItCheckbox <ItCheckbox
:checkbox_item="{ :checkbox-item="{
subtitle: 'Subtitle', subtitle: 'Subtitle',
label: 'Label', label: 'Label',
value: 'value', value: 'value',
@ -433,7 +433,7 @@ function log(data: any) {
<ItCheckbox <ItCheckbox
:disabled="true" :disabled="true"
:checkbox_item="{ :checkbox-item="{
subtitle: 'checked disabled', subtitle: 'checked disabled',
label: 'Label', label: 'Label',
value: 'value', value: 'value',

View File

@ -127,7 +127,7 @@ const learningSequenceBorderClass = computed(() => {
</div> </div>
<ItCheckbox <ItCheckbox
v-else v-else
:checkbox_item="{ :checkbox-item="{
value: learningContent.completion_status, value: learningContent.completion_status,
checked: learningContent.completion_status === 'success', checked: learningContent.completion_status === 'success',
}" }"