Add `ItCheckbox` component
This commit is contained in:
Daniel Egger
parent
47f7461375
commit
a83c2d808a
|
|
@ -1,6 +1,8 @@
|
|||
<script setup lang="ts">
|
||||
|
||||
|
||||
import ItCheckbox from '@/components/ui/ItCheckbox.vue';
|
||||
|
||||
defineProps(['learningSequence'])
|
||||
|
||||
</script>
|
||||
|
|
@ -29,11 +31,12 @@ defineProps(['learningSequence'])
|
|||
v-for="learningContent in learningUnit.learningContents"
|
||||
class="flex items-center gap-4 pb-3"
|
||||
>
|
||||
<div class="w-8 h-8" @click="$emit('toggleLearningContentCheckbox', learningContent)">
|
||||
<it-icon-checkbox-checked v-if="learningContent.completed" />
|
||||
<it-icon-checkbox-unchecked v-else />
|
||||
</div>
|
||||
<div>{{ learningContent.contents[0].type }}: {{ learningContent.title }} {{ learningContent.completed}}</div>
|
||||
<ItCheckbox
|
||||
:modelValue="learningContent.completed"
|
||||
@click="$emit('toggleLearningContentCheckbox', learningContent)"
|
||||
>
|
||||
{{ learningContent.contents[0].type }}: {{ learningContent.title }}
|
||||
</ItCheckbox>
|
||||
</div>
|
||||
|
||||
<hr class="-mx-4 text-gray-500">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,48 @@
|
|||
<script setup lang="ts">
|
||||
interface Props {
|
||||
modelValue?: boolean,
|
||||
disabled?: boolean,
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
modelValue: false,
|
||||
disabled: false,
|
||||
})
|
||||
|
||||
defineEmits(['update:modelValue'])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="cursor-pointer flex flex-row items-center"
|
||||
:class="{
|
||||
'opacity-50': disabled,
|
||||
'cursor-not-allowed': disabled,
|
||||
}"
|
||||
@click="$emit('update:modelValue', !modelValue)"
|
||||
>
|
||||
<div
|
||||
v-if="modelValue"
|
||||
class="
|
||||
w-8 h-8
|
||||
flex-none
|
||||
bg-contain
|
||||
bg-[url('/static/icons/icon-checkbox-checked.svg')]
|
||||
hover:bg-[url('/static/icons/icon-checkbox-checked-hover.svg')]
|
||||
disabled:opacity-50
|
||||
"
|
||||
></div>
|
||||
<div
|
||||
v-else
|
||||
class="
|
||||
w-8 h-8
|
||||
flex-none
|
||||
bg-contain
|
||||
bg-[url('/static/icons/icon-checkbox-unchecked.svg')]
|
||||
hover:bg-[url('/static/icons/icon-checkbox-unchecked-hover.svg')]
|
||||
"
|
||||
></div>
|
||||
<div class="flex-auto pl-4"><slot></slot></div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
|
@ -1,18 +1,14 @@
|
|||
<script setup lang="ts">
|
||||
|
||||
import {ref} from 'vue'
|
||||
import {reactive} from 'vue'
|
||||
import {Listbox, ListboxButton, ListboxOption, ListboxOptions} from '@headlessui/vue'
|
||||
import MainNavigationBar from '@/components/MainNavigationBar.vue';
|
||||
|
||||
const colors = ['blue', 'sky', 'orange', 'green', 'red', 'gray',];
|
||||
const colorValues = [100, 200, 300, 400, 500, 600, 700, 800, 900,];
|
||||
|
||||
function colorBgClass(color: string, value: number) {
|
||||
return `bg-${color}-${value}`;
|
||||
}
|
||||
import ItCheckbox from '@/components/ui/ItCheckbox.vue';
|
||||
|
||||
|
||||
const people = [
|
||||
const state = reactive({
|
||||
checkboxValue: true,
|
||||
dropdownValues: [
|
||||
{id: 1, name: 'Wade Cooper'},
|
||||
{id: 2, name: 'Arlene Mccoy'},
|
||||
{id: 3, name: 'Devon Webb'},
|
||||
|
|
@ -23,9 +19,17 @@ const people = [
|
|||
{id: 8, name: 'Mason Heaney'},
|
||||
{id: 9, name: 'Claudie Smitham'},
|
||||
{id: 10, name: 'Emil Schaefer'},
|
||||
]
|
||||
],
|
||||
dropdownSelected: {id: 8},
|
||||
})
|
||||
|
||||
const selected = ref(people[3])
|
||||
|
||||
const colors = ['blue', 'sky', 'orange', 'green', 'red', 'gray',];
|
||||
const colorValues = [100, 200, 300, 400, 500, 600, 700, 800, 900,];
|
||||
|
||||
function colorBgClass(color: string, value: number) {
|
||||
return `bg-${color}-${value}`;
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
|
@ -189,11 +193,17 @@ const selected = ref(people[3])
|
|||
|
||||
<h2 class="mt-8 mb-8">Buttons</h2>
|
||||
|
||||
<div class="flex flex-col gap-4 flex-wrap lg:flex-row lg:w-128 content-center lg:justify-between mb-16">
|
||||
<div class="flex flex-col gap-4 flex-wrap lg:flex-row content-center mb-16">
|
||||
<button class="btn-primary">Primary</button>
|
||||
<a class="btn-primary inline-block" href="/">Primary Link</a>
|
||||
<button class="btn-secondary">Secondary</button>
|
||||
<button class="btn-blue">Blue</button>
|
||||
<a class="btn-primary inline-block" href="/">Primary Link</a>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-4 flex-wrap lg:flex-row content-center mb-16">
|
||||
<button disabled class="btn-primary">Primary disabled</button>
|
||||
<button disabled class="btn-secondary">Secondary disabled</button>
|
||||
<button disabled class="btn-blue">Blue disabled</button>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-4 flex-wrap lg:flex-row lg:w-128 content-center lg:justify-start mb-16">
|
||||
|
|
@ -219,11 +229,11 @@ const selected = ref(people[3])
|
|||
|
||||
<h2 class="mt-8 mb-8">Dropdown (Work-in-progress)</h2>
|
||||
|
||||
<Listbox as="div" v-model="selected">
|
||||
<Listbox as="div" v-model="state.dropdownSelected">
|
||||
<div class="mt-1 relative w-128">
|
||||
<ListboxButton
|
||||
class="bg-white relative w-full border border-gray-500 pl-5 pr-10 py-3 text-left cursor-default font-bold">
|
||||
<span class="block truncate">{{ selected.name }}</span>
|
||||
<span class="block truncate">{{ state.dropdownSelected.name }}</span>
|
||||
<span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
|
||||
<it-icon-arrow-down class="h-5 w-5" aria-hidden="true"/>
|
||||
</span>
|
||||
|
|
@ -233,15 +243,15 @@ const selected = ref(people[3])
|
|||
leave-to-class="opacity-0">
|
||||
<ListboxOptions
|
||||
class="absolute z-10 mt-1 w-full bg-white shadow-lg max-h-60 py-1 text-base ring-1 ring-gray-900 ring-opacity-5 overflow-auto focus:outline-none sm:text-sm">
|
||||
<ListboxOption as="template" v-for="person in people" :key="person.id" :value="person"
|
||||
<ListboxOption as="template" v-for="person in state.dropdownValues" :key="person.id" :value="person"
|
||||
v-slot="{ active, selected }">
|
||||
<li
|
||||
:class="[active ? 'text-white bg-blue-900' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9']">
|
||||
<span :class="[selected ? 'font-semibold' : 'font-normal', 'block truncate']">
|
||||
<span :class="[state.dropdownSelected ? 'font-semibold' : 'font-normal', 'block truncate']">
|
||||
{{ person.name }}
|
||||
</span>
|
||||
|
||||
<span v-if="selected"
|
||||
<span v-if="state.dropdownSelected"
|
||||
:class="[active ? 'text-white' : 'text-blue-900', 'absolute inset-y-0 right-0 flex items-center pr-4']">
|
||||
<it-icon-check class="h-5 w-5" aria-hidden="true"/>
|
||||
</span>
|
||||
|
|
@ -252,6 +262,12 @@ const selected = ref(people[3])
|
|||
</div>
|
||||
</Listbox>
|
||||
|
||||
<h2 class="mt-8 mb-8">Checkbox</h2>
|
||||
|
||||
<ItCheckbox :disabled="false" class="" v-model="state.checkboxValue">Label</ItCheckbox>
|
||||
|
||||
<ItCheckbox disabled class="mt-4">Disabled</ItCheckbox>
|
||||
|
||||
</main>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,6 @@
|
|||
<svg viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="30" height="30" fill="#EDF2F6"/>
|
||||
<rect x="1" y="1" width="28" height="28" rx="1" stroke="#00224D" stroke-width="2"/>
|
||||
<path d="M12.1529 18.7528L8.30897 14.9088L7 16.2086L12.1529 21.3615L23.2147 10.2998L21.9149 9L12.1529 18.7528Z"
|
||||
fill="#00224D"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 361 B |
|
|
@ -0,0 +1,4 @@
|
|||
<svg viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="30" height="30" fill="#EDF2F6"/>
|
||||
<rect x="1" y="1" width="28" height="28" rx="1" stroke="#B1C1CA" stroke-width="2"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 218 B |
|
|
@ -13,6 +13,8 @@ module.exports = {
|
|||
extend: {
|
||||
spacing: {
|
||||
'128': '32rem',
|
||||
},
|
||||
backgroundImage: {
|
||||
}
|
||||
},
|
||||
colors: {
|
||||
|
|
|
|||
Loading…
Reference in New Issue