-
-
Notifications
You must be signed in to change notification settings - Fork 25
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
5617c48
commit 0579acf
Showing
5 changed files
with
66 additions
and
63 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,36 +1,36 @@ | ||
<script> | ||
export default { | ||
inheritAttrs: false | ||
} | ||
export default { | ||
inheritAttrs: false | ||
} | ||
</script> | ||
|
||
<script setup> | ||
import { SwitchGroup, SwitchLabel } from '@headlessui/vue' | ||
import { SwitchGroup, SwitchLabel } from '@headlessui/vue' | ||
const props = defineProps(['modelValue']) | ||
const emit = defineEmits(['update:modelValue']) | ||
const props = defineProps(['modelValue']) | ||
const emit = defineEmits(['update:modelValue']) | ||
</script> | ||
|
||
<template> | ||
<div class="flex gap-2 flex-row items-center justify-between"> | ||
<!-- TODO: Generate random label ID --> | ||
<label class="flex flex-grow flex-col"> | ||
<span class="text-base-content-highlight font-medium leading-8"> | ||
<slot name="name" /> | ||
</span> | ||
<div class="flex flex-row items-center justify-between gap-2"> | ||
<!-- TODO: Generate random label ID --> | ||
<label class="flex flex-grow flex-col"> | ||
<span class="font-medium leading-8 text-base-content-highlight"> | ||
<slot name="name" /> | ||
</span> | ||
|
||
<span class="text-sm text-base-content"> | ||
<slot name="description" /> | ||
</span> | ||
</label> | ||
<span class="text-sm text-base-content"> | ||
<slot name="description" /> | ||
</span> | ||
</label> | ||
|
||
<input | ||
:value="modelValue" | ||
class="focus-visible:focus-util w-12 h-6 rounded-full border-2 border-base-0/20 text-base-content-highlight bg-inherit px-2 text-center" | ||
min="0" | ||
type="number" | ||
v-bind="$attrs" | ||
@input="$emit('update:modelValue', $event.target.value)" | ||
/> | ||
</div> | ||
<input | ||
:value="modelValue" | ||
class="focus-visible:focus-util h-6 w-12 rounded-full bg-inherit px-2 text-center text-base-content-highlight ring-2 ring-base-0/20" | ||
min="0" | ||
type="number" | ||
v-bind="$attrs" | ||
@input="$emit('update:modelValue', $event.target.value)" | ||
/> | ||
</div> | ||
</template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,47 +1,47 @@ | ||
<script> | ||
export default { | ||
inheritAttrs: false | ||
} | ||
export default { | ||
inheritAttrs: false | ||
} | ||
</script> | ||
|
||
<script setup> | ||
import { Switch, SwitchDescription, SwitchGroup, SwitchLabel } from '@headlessui/vue' | ||
import { Switch, SwitchDescription, SwitchGroup, SwitchLabel } from '@headlessui/vue' | ||
const props = defineProps(['modelValue']) | ||
const emit = defineEmits(['update:modelValue']) | ||
const props = defineProps(['modelValue']) | ||
const emit = defineEmits(['update:modelValue']) | ||
</script> | ||
|
||
<template> | ||
<SwitchGroup | ||
as="div" | ||
class="flex flex-row items-center gap-2 justify-between" | ||
> | ||
<span class="flex flex-grow flex-col"> | ||
<SwitchLabel | ||
as="span" | ||
class="text-base-content-highlight font-medium leading-8" | ||
passive | ||
> | ||
<slot name="name" /> | ||
</SwitchLabel> | ||
<SwitchGroup | ||
as="div" | ||
class="flex flex-row items-center justify-between gap-2" | ||
> | ||
<span class="flex flex-grow flex-col"> | ||
<SwitchLabel | ||
as="span" | ||
class="font-medium leading-8 text-base-content-highlight" | ||
passive | ||
> | ||
<slot name="name" /> | ||
</SwitchLabel> | ||
|
||
<SwitchDescription | ||
as="span" | ||
class="text-sm text-base-content" | ||
> | ||
<slot name="description" /> | ||
</SwitchDescription> | ||
</span> | ||
<SwitchDescription | ||
as="span" | ||
class="text-sm text-base-content" | ||
> | ||
<slot name="description" /> | ||
</SwitchDescription> | ||
</span> | ||
|
||
<Switch | ||
:modelValue="modelValue" | ||
class="ui-checked:bg-primary-700 ui-not-checked:bg-base-1000 relative inline-flex h-6 w-12 flex-shrink-0 cursor-pointer rounded-full border-2 border-base-800 transition-colors duration-200 ease-in-out focus-visible:focus-util" | ||
@update:modelValue="emit('update:modelValue', $event)" | ||
> | ||
<span | ||
aria-hidden="true" | ||
class="ui-checked:translate-x-6 ui-not-checked:translate-x-0 pointer-events-none inline-block h-5 w-5 transform rounded-full bg-base-content-highlight shadow ring-0 transition duration-200 ease-in-out" | ||
/> | ||
</Switch> | ||
</SwitchGroup> | ||
<Switch | ||
:modelValue="modelValue" | ||
class="focus-visible:focus-util relative inline-flex h-6 w-12 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent ring-2 ring-base-0/20 transition-colors duration-200 ease-in-out ui-checked:bg-primary-700 ui-not-checked:bg-base-1000" | ||
@update:modelValue="emit('update:modelValue', $event)" | ||
> | ||
<span | ||
aria-hidden="true" | ||
class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-base-content-highlight shadow ring-0 transition duration-200 ease-in-out ui-checked:translate-x-6 ui-not-checked:translate-x-0" | ||
/> | ||
</Switch> | ||
</SwitchGroup> | ||
</template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters