mirrors/vue-select
2
0
Fork 0
mirror of https://github.com/tenrok/vue-select.git synced 2026-06-10 07:52:23 +03:00
Code Activity

deps: upgrade all dependencies

Browse Source
This commit is contained in:
Jeff Sagal
2024-03-21 12:54:53 -07:00
parent 0b65907a8e
commit b211d1c42a
16 changed files with 7159 additions and 5520 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/components/ThemeSwitcher.vue
+54 -55
View File
@@ -6,9 +6,10 @@ import {
ListboxOption,
ListboxOptions,
} from '@headlessui/vue'
import LightIcon from '~/components/icons/LightIcon.vue'
import DarkIcon from '~/components/icons/DarkIcon.vue'
import SystemIcon from '~/components/icons/SystemIcon.vue'
import LightIcon from '~/assets/svg/light-icon.svg'
import DarkIcon from '~/assets/svg/dark-icon.svg'
import SystemIcon from '~/assets/svg/system-icon.svg'
const themes = [
{ name: 'Light', value: 'light', icon: LightIcon },
@@ -21,60 +22,58 @@ const colorMode = useColorMode()
<template>
<div class="relative z-10">
<ClientOnly>
<Listbox as="div" v-model="colorMode.preference">
<ListboxLabel class="sr-only">Theme</ListboxLabel>
<ListboxButton
class="flex h-6 w-6 items-center justify-center rounded-lg shadow-md shadow-black/5 ring-1 ring-black/5 dark:bg-slate-700 dark:ring-inset dark:ring-white/5"
<Listbox as="div" v-model="colorMode.preference">
<ListboxLabel class="sr-only">Theme</ListboxLabel>
<ListboxButton
class="flex h-6 w-6 items-center justify-center rounded-lg shadow-md shadow-black/5 ring-1 ring-black/5 dark:bg-slate-700 dark:ring-inset dark:ring-white/5"
>
<LightIcon
v-show="colorMode.value === 'light'"
class="h-4 w-4 fill-sky-400"
/>
<DarkIcon
v-show="colorMode.value === 'dark'"
class="h-4 w-4 fill-sky-400"
/>
</ListboxButton>
<ListboxOptions
class="absolute top-full left-1/2 mt-3 w-36 -translate-x-1/2 space-y-1 rounded-xl bg-white p-3 text-sm font-medium shadow-md shadow-black/5 ring-1 ring-black/5 dark:bg-slate-800 dark:ring-white/5"
>
<ListboxOption
as="template"
v-slot="{ active, selected }"
v-for="{ name, value, icon } in themes"
:key="value"
:value="value"
>
<LightIcon
v-show="colorMode.value === 'light'"
class="h-4 w-4 fill-sky-400"
/>
<DarkIcon
v-show="colorMode.value === 'dark'"
class="h-4 w-4 fill-sky-400"
/>
</ListboxButton>
<ListboxOptions
class="absolute top-full left-1/2 mt-3 w-36 -translate-x-1/2 space-y-1 rounded-xl bg-white p-3 text-sm font-medium shadow-md shadow-black/5 ring-1 ring-black/5 dark:bg-slate-800 dark:ring-white/5"
>
<ListboxOption
as="template"
v-slot="{ active, selected }"
v-for="{ name, value, icon } in themes"
:key="value"
:value="value"
<li
:class="[
'flex cursor-pointer select-none items-center rounded-[0.625rem] p-1',
{
'text-sky-500': selected,
'text-slate-900 dark:text-white': active && !selected,
'text-slate-700 dark:text-slate-400': !active && !selected,
'bg-slate-100 dark:bg-slate-900/40': active,
},
]"
>
<li
:class="[
'flex cursor-pointer select-none items-center rounded-[0.625rem] p-1',
{
'text-sky-500': selected,
'text-slate-900 dark:text-white': active && !selected,
'text-slate-700 dark:text-slate-400': !active && !selected,
'bg-slate-100 dark:bg-slate-900/40': active,
},
]"
<div
class="rounded-md bg-white p-1 shadow ring-1 ring-slate-900/5 dark:bg-slate-700 dark:ring-inset dark:ring-white/5"
>
<div
class="rounded-md bg-white p-1 shadow ring-1 ring-slate-900/5 dark:bg-slate-700 dark:ring-inset dark:ring-white/5"
>
<Component
:is="icon"
:class="[
'h-4 w-4',
selected
? 'fill-sky-400 dark:fill-sky-400'
: 'fill-slate-400',
]"
/>
</div>
<div class="ml-3">{{ name }}</div>
</li>
</ListboxOption>
</ListboxOptions>
</Listbox>
</ClientOnly>
<Component
:is="icon"
:class="[
'h-4 w-4',
selected
? 'fill-sky-400 dark:fill-sky-400'
: 'fill-slate-400',
]"
/>
</div>
<div class="ml-3">{{ name }}</div>
</li>
</ListboxOption>
</ListboxOptions>
</Listbox>
</div>
</template>
docs/components/icons/DarkIcon.vue
-11
View File
@@ -1,11 +0,0 @@
<script setup lang="ts"></script>
<template>
<svg aria-hidden="true" viewBox="0 0 16 16">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M7.23 3.333C7.757 2.905 7.68 2 7 2a6 6 0 1 0 0 12c.68 0 .758-.905.23-1.332A5.989 5.989 0 0 1 5 8c0-1.885.87-3.568 2.23-4.668ZM12 5a1 1 0 0 1 1 1 1 1 0 0 0 1 1 1 1 0 1 1 0 2 1 1 0 0 0-1 1 1 1 0 1 1-2 0 1 1 0 0 0-1-1 1 1 0 1 1 0-2 1 1 0 0 0 1-1 1 1 0 0 1 1-1Z"
/>
</svg>
</template>
docs/components/icons/LightIcon.vue
-9
View File
@@ -1,9 +0,0 @@
<template>
<svg aria-hidden="true" viewBox="0 0 16 16">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M7 1a1 1 0 0 1 2 0v1a1 1 0 1 1-2 0V1Zm4 7a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm2.657-5.657a1 1 0 0 0-1.414 0l-.707.707a1 1 0 0 0 1.414 1.414l.707-.707a1 1 0 0 0 0-1.414Zm-1.415 11.313-.707-.707a1 1 0 0 1 1.415-1.415l.707.708a1 1 0 0 1-1.415 1.414ZM16 7.999a1 1 0 0 0-1-1h-1a1 1 0 1 0 0 2h1a1 1 0 0 0 1-1ZM7 14a1 1 0 1 1 2 0v1a1 1 0 1 1-2 0v-1Zm-2.536-2.464a1 1 0 0 0-1.414 0l-.707.707a1 1 0 0 0 1.414 1.414l.707-.707a1 1 0 0 0 0-1.414Zm0-8.486A1 1 0 0 1 3.05 4.464l-.707-.707a1 1 0 0 1 1.414-1.414l.707.707ZM3 8a1 1 0 0 0-1-1H1a1 1 0 0 0 0 2h1a1 1 0 0 0 1-1Z"
/>
</svg>
</template>
docs/components/icons/SystemIcon.vue
-11
View File
@@ -1,11 +0,0 @@
<script setup lang="ts"></script>
<template>
<svg aria-hidden="true" viewBox="0 0 16 16">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M1 4a3 3 0 0 1 3-3h8a3 3 0 0 1 3 3v4a3 3 0 0 1-3 3h-1.5l.31 1.242c.084.333.36.573.63.808.091.08.182.158.264.24A1 1 0 0 1 11 15H5a1 1 0 0 1-.704-1.71c.082-.082.173-.16.264-.24.27-.235.546-.475.63-.808L5.5 11H4a3 3 0 0 1-3-3V4Zm3-1a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1H4Z"
/>
</svg>
</template>