arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-18 05:58:07 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat: use nuxt-icon

Browse Source
This commit is contained in:
Benjamin Canac
2023-02-16 16:16:37 +01:00
parent 6018f009a8
commit f5d068be9d
19 changed files with 562 additions and 559 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/runtime/components/elements/Button.vue
View File

@@ -6,14 +6,14 @@
:aria-label="ariaLabel"
v-bind="buttonProps"
>
<Icon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="leadingIconClass" aria-hidden="true" />
<IconCSS v-if="isLeading && leadingIconName" :name="leadingIconName" :class="leadingIconClass" aria-hidden="true" />
<slot>
<span :class="[truncate ? 'text-left break-all line-clamp-1' : '', compact ? 'hidden sm:block' : '']">
<span :class="[labelCompact && 'hidden sm:block']">{{ label }}</span>
<span v-if="labelCompact" class="sm:hidden">{{ labelCompact }}</span>
</span>
</slot>
<Icon v-if="isTrailing && trailingIconName" :name="trailingIconName" :class="trailingIconClass" aria-hidden="true" />
<IconCSS v-if="isTrailing && trailingIconName" :name="trailingIconName" :class="trailingIconClass" aria-hidden="true" />
</component>
</template>
@@ -22,7 +22,6 @@ import { ref, computed, useSlots } from 'vue'
import type { PropType } from 'vue'
import type { RouteLocationNormalized, RouteLocationRaw } from 'vue-router'
import NuxtLink from '#app/components/nuxt-link'
import Icon from '../elements/Icon.vue'
import { classNames } from '../../utils'
import $ui from '#build/ui'

3
src/runtime/components/elements/Dropdown.vue
View File

@@ -27,7 +27,7 @@
@click="item.click"
>
<slot :name="item.slot" :item="item">
<Icon v-if="item.icon" :name="item.icon" :class="[itemIconClass, item.iconClass]" />
<IconCSS v-if="item.icon" :name="item.icon" :class="[itemIconClass, item.iconClass]" />
<Avatar v-if="item.avatar" v-bind="{ size: 'xxs', ...item.avatar }" :class="itemAvatarClass" />
<span class="truncate">{{ item.label }}</span>
@@ -57,7 +57,6 @@ import type { RouteLocationNormalized } from 'vue-router'
import { ref, computed, onMounted } from 'vue'
import { defu } from 'defu'
import NuxtLink from '#app/components/nuxt-link'
import Icon from '../elements/Icon.vue'
import Avatar from '../elements/Avatar.vue'
import { classNames, omit } from '../../utils'
import { usePopper } from '../../composables/usePopper'

56
src/runtime/components/elements/Icon.vue
View File

@@ -1,56 +0,0 @@
<template>
<span v-if="isFetching" />
<Iconify v-else-if="icon" :icon="icon" />
<Component :is="component" v-else-if="component" />
<span v-else>{{ name }}</span>
</template>
<script setup lang="ts">
import type { IconifyIcon } from '@iconify/vue'
import { Icon as Iconify } from '@iconify/vue/dist/offline'
import { loadIcon } from '@iconify/vue'
import { useNuxtApp, useState, computed, watch, onMounted } from '#imports'
const props = defineProps({
name: {
type: String,
required: true
}
})
const nuxtApp = useNuxtApp()
const state = useState<Record<string, Required<IconifyIcon> | Promise<void> | null>>('u-icons', () => ({}))
// eslint-disable-next-line @typescript-eslint/no-non-null-asserted-optional-chain
const isFetching = computed(() => state.value?.[props.name] && ('then' in state.value?.[props.name]!))
const icon = computed<Required<IconifyIcon> | null>(() =>
!state.value?.[props.name] || 'then' in state.value[props.name]!
? null
: state.value[props.name] as Required<IconifyIcon>
)
const component = computed(() => nuxtApp.vueApp.component(props.name))
const loadIconComponent = (name: string) => {
state.value = state.value || {}
if (nuxtApp.vueApp.component(props.name) || state.value[name] || state.value[name] === null) { return state.value[name] }
state.value[name] = loadIcon(name)
.then((res) => { state.value[name] = res })
// We won't try to load this icon again if it fails
.catch(() => { state.value[name] = null })
// return an awaitable promise
return state.value[name]
}
onMounted(() => {
watch(() => props.name, loadIconComponent, { immediate: true })
})
if (process.server) {
await loadIconComponent(props.name)
}
</script>
<script lang="ts">
export default { name: 'UIcon' }
</script>

3
src/runtime/components/feedback/Alert.vue
View File

@@ -2,7 +2,7 @@
<div class="rounded-md p-4" :class="variantClass">
<div class="flex">
<div class="flex-shrink-0">
<Icon v-if="iconName" :name="iconName" :class="iconClass" class="h-5 w-5" />
<IconCSS v-if="iconName" :name="iconName" :class="iconClass" class="h-5 w-5" />
</div>
<div class="ml-3 flex-1 md:flex md:justify-between">
<p v-if="title" class="text-sm leading-5" :class="titleClass">
@@ -27,7 +27,6 @@
import { computed } from 'vue'
import type { PropType } from 'vue'
import type { RouteLocationNormalized } from 'vue-router'
import Icon from '../elements/Icon.vue'
const props = defineProps({
variant: {

3
src/runtime/components/feedback/AlertDialog.vue
View File

@@ -2,7 +2,7 @@
<Modal v-model="isOpen" :appear="appear" class="w-full" @close="onClose">
<div class="sm:flex sm:items-start">
<div v-if="icon" :class="iconWrapperClass" class="mx-auto flex-shrink-0 flex items-center justify-center rounded-full sm:mx-0">
<Icon :name="icon" :class="iconClass" />
<IconCSS :name="icon" :class="iconClass" />
</div>
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left space-y-2">
<DialogTitle v-if="title" as="h3" :class="titleClass">
@@ -25,7 +25,6 @@ import { computed } from 'vue'
import { DialogTitle, DialogDescription } from '@headlessui/vue'
import Modal from '../overlays/Modal.vue'
import Button from '../elements/Button.vue'
import Icon from '../elements/Icon.vue'
import $ui from '#build/ui'
const props = defineProps({

5
src/runtime/components/forms/Input.vue
View File

@@ -19,17 +19,16 @@
>
<slot />
<div v-if="isLeading" :class="iconLeadingWrapperClass">
<Icon v-if="iconName" :name="iconName" :class="iconClass" />
<IconCSS v-if="iconName" :name="iconName" :class="iconClass" />
</div>
<div v-if="isTrailing" :class="iconTrailingWrapperClass">
<Icon v-if="iconName" :name="iconName" :class="iconClass" />
<IconCSS v-if="iconName" :name="iconName" :class="iconClass" />
</div>
</div>
</template>
<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import Icon from '../elements/Icon.vue'
import { classNames } from '../../utils'
import $ui from '#build/ui'

3
src/runtime/components/forms/Select.vue
View File

@@ -37,7 +37,7 @@
</select>
<div v-if="icon" :class="iconWrapperClass">
<Icon :name="icon" :class="iconClass" />
<IconCSS :name="icon" :class="iconClass" />
</div>
</div>
</template>
@@ -45,7 +45,6 @@
<script setup lang="ts">
import { computed } from 'vue'
import { get } from 'lodash-es'
import Icon from '../elements/Icon.vue'
import { classNames } from '../../utils'
import $ui from '#build/ui'

5
src/runtime/components/forms/SelectCustom.vue
View File

@@ -21,7 +21,7 @@
</slot>
<slot name="icon">
<span :class="iconWrapperClass">
<Icon v-if="icon" :name="icon" :class="iconClass" aria-hidden="true" />
<IconCSS v-if="icon" :name="icon" :class="iconClass" aria-hidden="true" />
</span>
</slot>
</button>
@@ -58,7 +58,7 @@
</div>
<span v-if="selected" :class="resolveOptionIconClass({ active })">
<Icon v-if="listOptionIcon" :name="listOptionIcon" :class="listOptionIconSizeClass" aria-hidden="true" />
<IconCSS v-if="listOptionIcon" :name="listOptionIcon" :class="listOptionIconSizeClass" aria-hidden="true" />
</span>
</li>
</ComboboxOption>
@@ -94,7 +94,6 @@ import {
ComboboxOption,
ComboboxInput
} from '@headlessui/vue'
import Icon from '../elements/Icon.vue'
import { classNames } from '../../utils'
import { usePopper } from '../../composables/usePopper'
import type { PopperOptions } from '../../types'

5
src/runtime/components/forms/Toggle.vue
View File

@@ -5,10 +5,10 @@
>
<span :class="[active ? containerActiveClass : containerInactiveClass, containerBaseClass]">
<span v-if="iconOn" :class="[active ? iconActiveClass : iconInactiveClass, iconBaseClass]" aria-hidden="true">
<Icon :name="iconOn" :class="iconOnClass" />
<IconCSS :name="iconOn" :class="iconOnClass" />
</span>
<span v-if="iconOff" :class="[active ? iconInactiveClass : iconActiveClass, iconBaseClass]" aria-hidden="true">
<Icon :name="iconOff" :class="iconOffClass" />
<IconCSS :name="iconOff" :class="iconOffClass" />
</span>
</span>
</Switch>
@@ -17,7 +17,6 @@
<script setup lang="ts">
import { computed } from 'vue'
import { Switch } from '@headlessui/vue'
import Icon from '../elements/Icon.vue'
import $ui from '#build/ui'
const props = defineProps({

5
src/runtime/components/navigation/CommandPalette.vue
View File

@@ -9,7 +9,7 @@
>
<div :class="$ui.commandPalette.wrapper">
<div v-show="searchable" class="relative flex items-center">
<Icon v-if="inputIcon" :name="inputIcon" :class="$ui.commandPalette.input.icon.base" aria-hidden="true" />
<IconCSS v-if="inputIcon" :name="inputIcon" :class="$ui.commandPalette.input.icon.base" aria-hidden="true" />
<ComboboxInput
ref="comboboxInput"
:value="query"
@@ -46,7 +46,7 @@
</ComboboxOptions>
<div v-else-if="placeholder" class="flex flex-col items-center justify-center flex-1 px-6 py-14 sm:px-14">
<Icon v-if="emptyIcon" :name="emptyIcon" class="w-6 h-6 mx-auto u-text-gray-400 mb-4" aria-hidden="true" />
<IconCSS v-if="emptyIcon" :name="emptyIcon" class="w-6 h-6 mx-auto u-text-gray-400 mb-4" aria-hidden="true" />
<p class="text-sm text-center u-text-gray-900">
{{ query ? "We couldn't find any items with that term. Please try again." : "We couldn't find any items." }}
</p>
@@ -64,7 +64,6 @@ import { groupBy, map } from 'lodash-es'
import { defu } from 'defu'
import type { UseFuseOptions } from '@vueuse/integrations/useFuse'
import type { Group, Command } from '../../types/command-palette'
import Icon from '../elements/Icon.vue'
import Button from '../elements/Button.vue'
import CommandPaletteGroup from './CommandPaletteGroup.vue'
import $ui from '#build/ui'

5
src/runtime/components/navigation/CommandPaletteGroup.vue
View File

@@ -15,7 +15,7 @@
>
<div :class="['flex justify-between select-none items-center rounded-md px-3 py-2 gap-3 relative', active && 'bg-gray-100 dark:bg-gray-800 u-text-gray-900', command.disabled ? 'cursor-not-allowed' : 'cursor-pointer']">
<div class="flex items-center gap-2 min-w-0">
<Icon v-if="command.icon" :name="command.icon" :class="['h-4 w-4 flex-shrink-0', active ? 'text-opacity-100 dark:text-opacity-100' : 'text-opacity-40 dark:text-opacity-40', command.iconClass || 'text-gray-900 dark:text-gray-50']" aria-hidden="true" />
<IconCSS v-if="command.icon" :name="command.icon" :class="['h-4 w-4 flex-shrink-0', active ? 'text-opacity-100 dark:text-opacity-100' : 'text-opacity-40 dark:text-opacity-40', command.iconClass || 'text-gray-900 dark:text-gray-50']" aria-hidden="true" />
<Avatar
v-else-if="command.avatar"
v-bind="{ size: 'xxxs', ...command.avatar }"
@@ -35,7 +35,7 @@
</div>
</div>
<Icon v-if="selected" name="heroicons-outline:check" class="h-5 w-5 u-text-gray-900 flex-shrink-0" aria-hidden="true" />
<IconCSS v-if="selected" name="heroicons-outline:check" class="h-5 w-5 u-text-gray-900 flex-shrink-0" aria-hidden="true" />
<slot v-else-if="active && (group.active || $slots[`${group.key}-active`])" :name="`${group.key}-active`" :group="group" :command="command">
<span v-if="group.active" class="flex-shrink-0 u-text-gray-500">{{ group.active }}</span>
</slot>
@@ -54,7 +54,6 @@
<script setup lang="ts">
import { ComboboxOption } from '@headlessui/vue'
import type { PropType } from 'vue'
import Icon from '../elements/Icon.vue'
import Avatar from '../elements/Avatar.vue'
import type { Group } from '../../types/command-palette'

3
src/runtime/components/navigation/VerticalNavigation.vue
View File

@@ -19,7 +19,7 @@
/>
</slot>
<slot name="icon" :link="link" :is-active="isActive">
<Icon
<IconCSS
v-if="link.icon"
:name="link.icon"
:class="[iconBaseClass, link.label && iconSpacingClass, isActive ? iconActiveClass : iconInactiveClass, link.iconClass]"
@@ -40,7 +40,6 @@
<script setup lang="ts">
import type { PropType } from 'vue'
import type { RouteLocationNormalized } from 'vue-router'
import Icon from '../elements/Icon.vue'
import Link from '../elements/Link.vue'
import Avatar from '../elements/Avatar.vue'
import type { Avatar as AvatarType } from '../../types/avatar'

5
src/runtime/components/overlays/Notification.vue
View File

@@ -9,7 +9,7 @@
<div class="p-4">
<div class="flex gap-3" :class="{ 'items-start': description, 'items-center': !description }">
<div v-if="iconName" class="flex-shrink-0">
<Icon :name="iconName" :class="iconClass" />
<IconCSS :name="iconName" :class="iconClass" />
</div>
<div class="w-0 flex-1">
<p class="text-sm font-medium u-text-gray-900">
@@ -37,7 +37,7 @@
@click.stop="onClose"
>
<span class="sr-only">Close</span>
<Icon name="heroicons-solid:x" class="w-5 h-5" />
<IconCSS name="heroicons-solid:x" class="w-5 h-5" />
</button>
</div>
</div>
@@ -53,7 +53,6 @@
<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted, watchEffect } from 'vue'
import type { PropType } from 'vue'
import Icon from '../elements/Icon.vue'
import { useTimer } from '../../composables/useTimer'
import { classNames } from '../../utils'
import type { ToastNotificationAction } from '../../types'