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

Merge remote-tracking branch 'origin/v3' into feat/3880

Browse Source
This commit is contained in:
HugoRCD
2025-07-01 10:33:37 +02:00
parent b3e885211a 4ce654076c
commit 801375d4fb
52 changed files with 2969 additions and 2791 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/runtime/components/Carousel.vue
View File

@@ -118,7 +118,7 @@ export interface CarouselEmits {
import { computed, ref, watch, onMounted } from 'vue'
import useEmblaCarousel from 'embla-carousel-vue'
import { Primitive, useForwardProps } from 'reka-ui'
import { reactivePick, computedAsync } from '@vueuse/core'
import { reactivePick } from '@vueuse/core'
import { useAppConfig } from '#imports'
import { useLocale } from '../composables/useLocale'
import { tv } from '../utils/tv'
@@ -175,41 +175,45 @@ const options = computed<EmblaOptionsType>(() => ({
direction: dir.value === 'rtl' ? 'rtl' : 'ltr'
}))
const plugins = computedAsync<EmblaPluginType[]>(async () => {
const plugins = []
const plugins = ref<EmblaPluginType[]>([])
async function loadPlugins() {
const emblaPlugins: EmblaPluginType[] = []
if (props.autoplay) {
const AutoplayPlugin = await import('embla-carousel-autoplay').then(r => r.default)
plugins.push(AutoplayPlugin(typeof props.autoplay === 'boolean' ? {} : props.autoplay))
emblaPlugins.push(AutoplayPlugin(typeof props.autoplay === 'boolean' ? {} : props.autoplay))
}
if (props.autoScroll) {
const AutoScrollPlugin = await import('embla-carousel-auto-scroll').then(r => r.default)
plugins.push(AutoScrollPlugin(typeof props.autoScroll === 'boolean' ? {} : props.autoScroll))
emblaPlugins.push(AutoScrollPlugin(typeof props.autoScroll === 'boolean' ? {} : props.autoScroll))
}
if (props.autoHeight) {
const AutoHeightPlugin = await import('embla-carousel-auto-height').then(r => r.default)
plugins.push(AutoHeightPlugin(typeof props.autoHeight === 'boolean' ? {} : props.autoHeight))
emblaPlugins.push(AutoHeightPlugin(typeof props.autoHeight === 'boolean' ? {} : props.autoHeight))
}
if (props.classNames) {
const ClassNamesPlugin = await import('embla-carousel-class-names').then(r => r.default)
plugins.push(ClassNamesPlugin(typeof props.classNames === 'boolean' ? {} : props.classNames))
emblaPlugins.push(ClassNamesPlugin(typeof props.classNames === 'boolean' ? {} : props.classNames))
}
if (props.fade) {
const FadePlugin = await import('embla-carousel-fade').then(r => r.default)
plugins.push(FadePlugin(typeof props.fade === 'boolean' ? {} : props.fade))
emblaPlugins.push(FadePlugin(typeof props.fade === 'boolean' ? {} : props.fade))
}
if (props.wheelGestures) {
const { WheelGesturesPlugin } = await import('embla-carousel-wheel-gestures')
plugins.push(WheelGesturesPlugin(typeof props.wheelGestures === 'boolean' ? {} : props.wheelGestures))
emblaPlugins.push(WheelGesturesPlugin(typeof props.wheelGestures === 'boolean' ? {} : props.wheelGestures))
}
return plugins
})
plugins.value = emblaPlugins
}
watch(() => [props.autoplay, props.autoScroll, props.autoHeight, props.classNames, props.fade, props.wheelGestures], loadPlugins, { immediate: true })
const [emblaRef, emblaApi] = useEmblaCarousel(options.value, plugins.value)

26
src/runtime/components/Input.vue
View File

@@ -8,7 +8,7 @@ import type { AcceptableValue, ComponentConfig } from '../types/utils'
type Input = ComponentConfig<typeof theme, AppConfig, 'input'>
export interface InputProps extends UseComponentIconsProps {
export interface InputProps<T extends AcceptableValue = AcceptableValue> extends UseComponentIconsProps {
/**
* The element or component this component should render as.
* @defaultValue 'div'
@@ -38,6 +38,8 @@ export interface InputProps extends UseComponentIconsProps {
disabled?: boolean
/** Highlight the ring color like a focus state. */
highlight?: boolean
modelValue?: T
defaultValue?: T
modelModifiers?: {
string?: boolean
number?: boolean
@@ -65,6 +67,7 @@ export interface InputSlots {
<script setup lang="ts" generic="T extends AcceptableValue">
import { ref, computed, onMounted } from 'vue'
import { Primitive } from 'reka-ui'
import { useVModel } from '@vueuse/core'
import { useAppConfig } from '#imports'
import { useButtonGroup } from '../composables/useButtonGroup'
import { useComponentIcons } from '../composables/useComponentIcons'
@@ -76,7 +79,7 @@ import UAvatar from './Avatar.vue'
defineOptions({ inheritAttrs: false })
const props = withDefaults(defineProps<InputProps>(), {
const props = withDefaults(defineProps<InputProps<T>>(), {
type: 'text',
autocomplete: 'off',
autofocusDelay: 0
@@ -84,13 +87,12 @@ const props = withDefaults(defineProps<InputProps>(), {
const emits = defineEmits<InputEmits<T>>()
const slots = defineSlots<InputSlots>()
// eslint-disable-next-line vue/no-dupe-keys
const [modelValue, modelModifiers] = defineModel<T>()
const modelValue = useVModel<InputProps<T>, 'modelValue', 'update:modelValue'>(props, 'modelValue', emits, { defaultValue: props.defaultValue })
const appConfig = useAppConfig() as Input['AppConfig']
const { emitFormBlur, emitFormInput, emitFormChange, size: formGroupSize, color, id, name, highlight, disabled, emitFormFocus, ariaAttrs } = useFormField<InputProps>(props, { deferInputValidation: true })
const { orientation, size: buttonGroupSize } = useButtonGroup<InputProps>(props)
const { emitFormBlur, emitFormInput, emitFormChange, size: formGroupSize, color, id, name, highlight, disabled, emitFormFocus, ariaAttrs } = useFormField<InputProps<T>>(props, { deferInputValidation: true })
const { orientation, size: buttonGroupSize } = useButtonGroup<InputProps<T>>(props)
const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props)
const inputSize = computed(() => buttonGroupSize.value || formGroupSize.value)
@@ -111,15 +113,15 @@ const inputRef = ref<HTMLInputElement | null>(null)
// Custom function to handle the v-model properties
function updateInput(value: string | null) {
if (modelModifiers.trim) {
if (props.modelModifiers?.trim) {
value = value?.trim() ?? null
}
if (modelModifiers.number || props.type === 'number') {
if (props.modelModifiers?.number || props.type === 'number') {
value = looseToNumber(value)
}
if (modelModifiers.nullify) {
if (props.modelModifiers?.nullify) {
value ||= null
}
@@ -128,7 +130,7 @@ function updateInput(value: string | null) {
}
function onInput(event: Event) {
if (!modelModifiers.lazy) {
if (!props.modelModifiers?.lazy) {
updateInput((event.target as HTMLInputElement).value)
}
}
@@ -136,12 +138,12 @@ function onInput(event: Event) {
function onChange(event: Event) {
const value = (event.target as HTMLInputElement).value
if (modelModifiers.lazy) {
if (props.modelModifiers?.lazy) {
updateInput(value)
}
// Update trimmed input so that it has same behavior as native input https://github.com/vuejs/core/blob/5ea8a8a4fab4e19a71e123e4d27d051f5e927172/packages/runtime-dom/src/directives/vModel.ts#L63
if (modelModifiers.trim) {
if (props.modelModifiers?.trim) {
(event.target as HTMLInputElement).value = value.trim()
}

5
src/runtime/components/Table.vue
View File

@@ -233,7 +233,9 @@ const tableRef = ref<HTMLTableElement | null>(null)
const tableApi = useVueTable({
...reactiveOmit(props, 'as', 'data', 'columns', 'caption', 'sticky', 'loading', 'loadingColor', 'loadingAnimation', 'class', 'ui'),
data,
columns: columns.value,
get columns() {
return columns.value
},
meta: meta.value,
getCoreRowModel: getCoreRowModel(),
...(props.globalFilterOptions || {}),
@@ -354,6 +356,7 @@ defineExpose({
v-for="header in headerGroup.headers"
:key="header.id"
:data-pinned="header.column.getIsPinned()"
:scope="header.colSpan > 1 ? 'colgroup' : 'col'"
:colspan="header.colSpan > 1 ? header.colSpan : undefined"
:class="ui.th({
class: [

25
src/runtime/components/Textarea.vue
View File

@@ -9,7 +9,7 @@ type Textarea = ComponentConfig<typeof theme, AppConfig, 'textarea'>
type TextareaValue = string | number | null
export interface TextareaProps extends UseComponentIconsProps {
export interface TextareaProps<T extends TextareaValue = TextareaValue> extends UseComponentIconsProps {
/**
* The element or component this component should render as.
* @defaultValue 'div'
@@ -41,8 +41,11 @@ export interface TextareaProps extends UseComponentIconsProps {
maxrows?: number
/** Highlight the ring color like a focus state. */
highlight?: boolean
modelValue?: T
defaultValue?: T
modelModifiers?: {
string?: boolean
number?: boolean
trim?: boolean
lazy?: boolean
nullify?: boolean
@@ -67,6 +70,7 @@ export interface TextareaSlots {
<script setup lang="ts" generic="T extends TextareaValue">
import { ref, computed, onMounted, nextTick, watch } from 'vue'
import { Primitive } from 'reka-ui'
import { useVModel } from '@vueuse/core'
import { useAppConfig } from '#imports'
import { useComponentIcons } from '../composables/useComponentIcons'
import { useFormField } from '../composables/useFormField'
@@ -77,7 +81,7 @@ import UAvatar from './Avatar.vue'
defineOptions({ inheritAttrs: false })
const props = withDefaults(defineProps<TextareaProps>(), {
const props = withDefaults(defineProps<TextareaProps<T>>(), {
rows: 3,
maxrows: 0,
autofocusDelay: 0,
@@ -86,12 +90,11 @@ const props = withDefaults(defineProps<TextareaProps>(), {
const emits = defineEmits<TextareaEmits<T>>()
const slots = defineSlots<TextareaSlots>()
// eslint-disable-next-line vue/no-dupe-keys
const [modelValue, modelModifiers] = defineModel<T>()
const modelValue = useVModel<TextareaProps<T>, 'modelValue', 'update:modelValue'>(props, 'modelValue', emits, { defaultValue: props.defaultValue })
const appConfig = useAppConfig() as Textarea['AppConfig']
const { emitFormFocus, emitFormBlur, emitFormInput, emitFormChange, size, color, id, name, highlight, disabled, ariaAttrs } = useFormField<TextareaProps>(props, { deferInputValidation: true })
const { emitFormFocus, emitFormBlur, emitFormInput, emitFormChange, size, color, id, name, highlight, disabled, ariaAttrs } = useFormField<TextareaProps<T>>(props, { deferInputValidation: true })
const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props)
const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.textarea || {}) })({
@@ -109,15 +112,15 @@ const textareaRef = ref<HTMLTextAreaElement | null>(null)
// Custom function to handle the v-model properties
function updateInput(value: string | null) {
if (modelModifiers.trim) {
if (props.modelModifiers?.trim) {
value = value?.trim() ?? null
}
if (modelModifiers.number) {
if (props.modelModifiers?.number) {
value = looseToNumber(value)
}
if (modelModifiers.nullify) {
if (props.modelModifiers?.nullify) {
value ||= null
}
@@ -128,7 +131,7 @@ function updateInput(value: string | null) {
function onInput(event: Event) {
autoResize()
if (!modelModifiers.lazy) {
if (!props.modelModifiers?.lazy) {
updateInput((event.target as HTMLInputElement).value)
}
}
@@ -136,12 +139,12 @@ function onInput(event: Event) {
function onChange(event: Event) {
const value = (event.target as HTMLInputElement).value
if (modelModifiers.lazy) {
if (props.modelModifiers?.lazy) {
updateInput(value)
}
// Update trimmed textarea so that it has same behavior as native textarea https://github.com/vuejs/core/blob/5ea8a8a4fab4e19a71e123e4d27d051f5e927172/packages/runtime-dom/src/directives/vModel.ts#L63
if (modelModifiers.trim) {
if (props.modelModifiers?.trim) {
(event.target as HTMLInputElement).value = value.trim()
}

5
src/runtime/components/Tooltip.vue
View File

@@ -1,5 +1,5 @@
<script lang="ts">
import type { TooltipRootProps, TooltipRootEmits, TooltipContentProps, TooltipContentEmits, TooltipArrowProps } from 'reka-ui'
import type { TooltipRootProps, TooltipRootEmits, TooltipContentProps, TooltipContentEmits, TooltipArrowProps, TooltipTriggerProps } from 'reka-ui'
import type { AppConfig } from '@nuxt/schema'
import theme from '#build/ui/tooltip'
import type { KbdProps } from '../types'
@@ -27,6 +27,7 @@ export interface TooltipProps extends TooltipRootProps {
* @defaultValue true
*/
portal?: boolean | string | HTMLElement
reference?: TooltipTriggerProps['reference']
class?: any
ui?: Tooltip['slots']
}
@@ -70,7 +71,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.tooltip || {
<template>
<TooltipRoot v-slot="{ open }" v-bind="rootProps">
<TooltipTrigger v-if="!!slots.default" v-bind="$attrs" as-child :class="props.class">
<TooltipTrigger v-if="!!slots.default || !!reference" v-bind="$attrs" as-child :reference="reference" :class="props.class">
<slot :open="open" />
</TooltipTrigger>