Refactor variable
This commit is contained in:
parent
4acccd65df
commit
27ebe8a69f
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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)"
|
||||||
/>
|
/>
|
||||||
|
|
|
||||||
|
|
@ -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',
|
||||||
|
|
|
||||||
|
|
@ -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',
|
||||||
}"
|
}"
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue