mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-14 12:14:41 +01:00
feat(InputTags): new component (#4261)
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
zhong666
GitHub
@@ -0,0 +1,9 @@
|
||||
<script setup lang="ts">
|
||||
const tags = ref(['Vue'])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UFormField label="Tags" required>
|
||||
<UInputTags v-model="tags" placeholder="Enter tags..." />
|
||||
</UFormField>
|
||||
</template>
|
||||
@@ -135,7 +135,7 @@ props:
|
||||
|
||||
### Multiple
|
||||
|
||||
Use the `multiple` prop to allow multiple selections, the selected items will be displayed as badges.
|
||||
Use the `multiple` prop to allow multiple selections, the selected items will be displayed as tags.
|
||||
|
||||
::component-code
|
||||
---
|
||||
@@ -166,7 +166,7 @@ Ensure to pass an array to the `default-value` prop or the `v-model` directive.
|
||||
|
||||
### Delete Icon
|
||||
|
||||
With `multiple`, use the `delete-icon` prop to customize the delete [Icon](/components/icon) in the badges. Defaults to `i-lucide-x`.
|
||||
With `multiple`, use the `delete-icon` prop to customize the delete [Icon](/components/icon) in the tags. Defaults to `i-lucide-x`.
|
||||
|
||||
::component-code
|
||||
---
|
||||
|
||||
284
docs/content/3.components/input-tags.md
Normal file
284
docs/content/3.components/input-tags.md
Normal file
@@ -0,0 +1,284 @@
|
||||
---
|
||||
title: InputTags
|
||||
description: An input element that displays interactive tags.
|
||||
links:
|
||||
- label: InputTags
|
||||
icon: i-custom-reka-ui
|
||||
to: https://reka-ui.com/docs/components/tags-input
|
||||
- label: GitHub
|
||||
icon: i-simple-icons-github
|
||||
to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/InputTags.vue
|
||||
navigation.badge: Soon
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
Use the `v-model` directive to control the value of the InputTags.
|
||||
|
||||
::component-code
|
||||
---
|
||||
prettier: true
|
||||
ignore:
|
||||
- modelValue
|
||||
external:
|
||||
- modelValue
|
||||
props:
|
||||
modelValue: ['Vue']
|
||||
---
|
||||
::
|
||||
|
||||
Use the `default-value` prop to set the initial value when you do not need to control its state.
|
||||
|
||||
::component-code
|
||||
---
|
||||
prettier: true
|
||||
ignore:
|
||||
- defaultValue
|
||||
props:
|
||||
defaultValue: ['Vue']
|
||||
---
|
||||
::
|
||||
|
||||
### Placeholder
|
||||
|
||||
Use the `placeholder` prop to set a placeholder text.
|
||||
|
||||
::component-code
|
||||
---
|
||||
props:
|
||||
placeholder: 'Enter tags...'
|
||||
---
|
||||
::
|
||||
|
||||
### Color
|
||||
|
||||
Use the `color` prop to change the ring color when the InputTags is focused.
|
||||
|
||||
::component-code
|
||||
---
|
||||
prettier: true
|
||||
ignore:
|
||||
- modelValue
|
||||
external:
|
||||
- modelValue
|
||||
props:
|
||||
modelValue: ['Vue']
|
||||
color: neutral
|
||||
highlight: true
|
||||
---
|
||||
::
|
||||
|
||||
::note
|
||||
The `highlight` prop is used here to show the focus state. It's used internally when a validation error occurs.
|
||||
::
|
||||
|
||||
### Variants
|
||||
|
||||
Use the `variant` prop to change the appearance of the InputTags.
|
||||
|
||||
::component-code
|
||||
---
|
||||
prettier: true
|
||||
ignore:
|
||||
- modelValue
|
||||
external:
|
||||
- modelValue
|
||||
props:
|
||||
modelValue: ['Vue']
|
||||
variant: subtle
|
||||
color: neutral
|
||||
highlight: false
|
||||
---
|
||||
::
|
||||
|
||||
### Sizes
|
||||
|
||||
Use the `size` prop to adjust the size of the InputTags.
|
||||
|
||||
::component-code
|
||||
---
|
||||
prettier: true
|
||||
ignore:
|
||||
- modelValue
|
||||
external:
|
||||
- modelValue
|
||||
props:
|
||||
modelValue: ['Vue']
|
||||
size: xl
|
||||
---
|
||||
::
|
||||
|
||||
### Icon
|
||||
|
||||
Use the `icon` prop to show an [Icon](/components/icon) inside the InputTags.
|
||||
|
||||
::component-code
|
||||
---
|
||||
prettier: true
|
||||
ignore:
|
||||
- modelValue
|
||||
external:
|
||||
- modelValue
|
||||
props:
|
||||
modelValue: ['Vue']
|
||||
icon: 'i-lucide-search'
|
||||
size: md
|
||||
variant: outline
|
||||
---
|
||||
::
|
||||
|
||||
::note
|
||||
Use the `leading` and `trailing` props to set the icon position or the `leading-icon` and `trailing-icon` props to set a different icon for each position.
|
||||
::
|
||||
|
||||
### Avatar
|
||||
|
||||
Use the `avatar` prop to show an [Avatar](/components/avatar) inside the InputTags.
|
||||
|
||||
::component-code
|
||||
---
|
||||
prettier: true
|
||||
ignore:
|
||||
- modelValue
|
||||
external:
|
||||
- modelValue
|
||||
props:
|
||||
modelValue: ['Vue']
|
||||
avatar:
|
||||
src: 'https://github.com/vuejs.png'
|
||||
size: md
|
||||
variant: outline
|
||||
---
|
||||
::
|
||||
|
||||
### Delete Icon
|
||||
|
||||
Use the `delete-icon` prop to customize the delete [Icon](/components/icon) in the tags. Defaults to `i-lucide-x`.
|
||||
|
||||
::component-code
|
||||
---
|
||||
prettier: true
|
||||
ignore:
|
||||
- modelValue
|
||||
external:
|
||||
- modelValue
|
||||
props:
|
||||
modelValue: ['Vue']
|
||||
deleteIcon: 'i-lucide-trash'
|
||||
---
|
||||
::
|
||||
|
||||
::framework-only
|
||||
#nuxt
|
||||
:::tip{to="/getting-started/icons/nuxt#theme"}
|
||||
You can customize this icon globally in your `app.config.ts` under `ui.icons.close` key.
|
||||
:::
|
||||
|
||||
#vue
|
||||
:::tip{to="/getting-started/icons/vue#theme"}
|
||||
You can customize this icon globally in your `vite.config.ts` under `ui.icons.close` key.
|
||||
:::
|
||||
::
|
||||
|
||||
### Loading
|
||||
|
||||
Use the `loading` prop to show a loading icon on the InputTags.
|
||||
|
||||
::component-code
|
||||
---
|
||||
prettier: true
|
||||
ignore:
|
||||
- modelValue
|
||||
external:
|
||||
- modelValue
|
||||
props:
|
||||
modelValue: ['Vue']
|
||||
loading: true
|
||||
trailing: false
|
||||
---
|
||||
::
|
||||
|
||||
### Loading Icon
|
||||
|
||||
Use the `loading-icon` prop to customize the loading icon. Defaults to `i-lucide-loader-circle`.
|
||||
|
||||
::component-code
|
||||
---
|
||||
prettier: true
|
||||
ignore:
|
||||
- modelValue
|
||||
external:
|
||||
- modelValue
|
||||
props:
|
||||
modelValue: ['Vue']
|
||||
loading: true
|
||||
loadingIcon: 'i-lucide-loader'
|
||||
---
|
||||
::
|
||||
|
||||
::framework-only
|
||||
#nuxt
|
||||
:::tip{to="/getting-started/icons/nuxt#theme"}
|
||||
You can customize this icon globally in your `app.config.ts` under `ui.icons.loading` key.
|
||||
:::
|
||||
|
||||
#vue
|
||||
:::tip{to="/getting-started/icons/vue#theme"}
|
||||
You can customize this icon globally in your `vite.config.ts` under `ui.icons.loading` key.
|
||||
:::
|
||||
::
|
||||
|
||||
### Disabled
|
||||
|
||||
Use the `disabled` prop to disable the InputTags.
|
||||
|
||||
::component-code
|
||||
---
|
||||
prettier: true
|
||||
ignore:
|
||||
- modelValue
|
||||
external:
|
||||
- modelValue
|
||||
props:
|
||||
modelValue: ['Vue']
|
||||
disabled: true
|
||||
---
|
||||
::
|
||||
|
||||
## Examples
|
||||
|
||||
### Within a FormField
|
||||
|
||||
You can use the InputTags within a [FormField](/components/form-field) component to display a label, help text, required indicator, etc.
|
||||
|
||||
::component-example
|
||||
---
|
||||
name: 'input-tags-form-field-example'
|
||||
---
|
||||
::
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
|
||||
:component-props
|
||||
|
||||
### Slots
|
||||
|
||||
:component-slots
|
||||
|
||||
### Emits
|
||||
|
||||
:component-emits
|
||||
|
||||
### Expose
|
||||
|
||||
When accessing the component via a template ref, you can use the following:
|
||||
|
||||
| Name | Type |
|
||||
|----------------------------|-------------------------------------------------|
|
||||
| `inputRef`{lang="ts-type"} | `Ref<HTMLInputElement \| null>`{lang="ts-type"} |
|
||||
|
||||
## Theme
|
||||
|
||||
:component-theme
|
||||
@@ -40,6 +40,7 @@ const components = [
|
||||
'input',
|
||||
'input-menu',
|
||||
'input-number',
|
||||
'input-tags',
|
||||
'kbd',
|
||||
'link',
|
||||
'modal',
|
||||
|
||||
@@ -40,6 +40,7 @@ const components = [
|
||||
'input',
|
||||
'input-menu',
|
||||
'input-number',
|
||||
'input-tags',
|
||||
'kbd',
|
||||
'link',
|
||||
'modal',
|
||||
|
||||
@@ -145,5 +145,18 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
|
||||
class="w-48"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<UInputMenu
|
||||
v-for="variant in variants"
|
||||
:key="variant"
|
||||
:items="items"
|
||||
:model-value="[fruits[0]!]"
|
||||
multiple
|
||||
icon="i-lucide-search"
|
||||
placeholder="Search..."
|
||||
:variant="variant"
|
||||
class="w-48"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
87
playground/app/pages/components/input-tags.vue
Normal file
87
playground/app/pages/components/input-tags.vue
Normal file
@@ -0,0 +1,87 @@
|
||||
<script setup lang="ts">
|
||||
import { upperFirst } from 'scule'
|
||||
import theme from '#build/ui/input-tags'
|
||||
|
||||
const sizes = Object.keys(theme.variants.size) as Array<keyof typeof theme.variants.size>
|
||||
const variants = Object.keys(theme.variants.variant) as Array<keyof typeof theme.variants.variant>
|
||||
|
||||
const tags = ref(['Vue', 'Nuxt'])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col items-center gap-4">
|
||||
<div class="flex flex-col gap-4 w-48">
|
||||
<UInputTags
|
||||
v-model="tags"
|
||||
placeholder="Enter tags..."
|
||||
autofocus
|
||||
/>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<UInputTags
|
||||
v-for="variant in variants"
|
||||
:key="variant"
|
||||
:placeholder="upperFirst(variant)"
|
||||
:variant="variant"
|
||||
class="w-48"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<UInputTags
|
||||
v-for="variant in variants"
|
||||
:key="variant"
|
||||
:placeholder="upperFirst(variant)"
|
||||
:variant="variant"
|
||||
color="neutral"
|
||||
class="w-48"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<UInputTags
|
||||
v-for="variant in variants"
|
||||
:key="variant"
|
||||
:placeholder="upperFirst(variant)"
|
||||
:variant="variant"
|
||||
color="error"
|
||||
highlight
|
||||
class="w-48"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-col gap-4 w-48">
|
||||
<UInputTags placeholder="Disabled" disabled />
|
||||
<UInputTags placeholder="Required" required />
|
||||
<UInputTags loading placeholder="Loading..." />
|
||||
<UInputTags loading trailing placeholder="Loading..." />
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<UInputTags
|
||||
v-for="size in sizes"
|
||||
:key="size"
|
||||
:size="size"
|
||||
:placeholder="upperFirst(size)"
|
||||
class="w-48"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<UInputTags
|
||||
v-for="size in sizes"
|
||||
:key="size"
|
||||
icon="i-lucide-search"
|
||||
placeholder="Search..."
|
||||
:size="size"
|
||||
class="w-48"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<UInputTags
|
||||
v-for="size in sizes"
|
||||
:key="size"
|
||||
icon="i-lucide-search"
|
||||
trailing
|
||||
placeholder="Search..."
|
||||
:size="size"
|
||||
class="w-48"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
203
src/runtime/components/InputTags.vue
Normal file
203
src/runtime/components/InputTags.vue
Normal file
@@ -0,0 +1,203 @@
|
||||
<script lang="ts">
|
||||
import type { AppConfig } from '@nuxt/schema'
|
||||
import type { TagsInputRootProps, AcceptableInputValue } from 'reka-ui'
|
||||
import theme from '#build/ui/input-tags'
|
||||
import type { UseComponentIconsProps } from '../composables/useComponentIcons'
|
||||
import type { AvatarProps } from '../types'
|
||||
import type { ComponentConfig } from '../types/utils'
|
||||
|
||||
type InputTags = ComponentConfig<typeof theme, AppConfig, 'inputTags'>
|
||||
|
||||
export type InputTagItem = AcceptableInputValue
|
||||
|
||||
export interface InputTagsProps<T extends InputTagItem = InputTagItem> extends Pick<TagsInputRootProps<T>, 'modelValue' | 'defaultValue' | 'addOnPaste' | 'addOnTab' | 'addOnBlur' | 'duplicate' | 'disabled' | 'delimiter' | 'max' | 'id' | 'convertValue' | 'displayValue' | 'name' | 'required'>, UseComponentIconsProps {
|
||||
/**
|
||||
* The element or component this component should render as.
|
||||
* @defaultValue 'div'
|
||||
*/
|
||||
as?: any
|
||||
/** The placeholder text when the input is empty. */
|
||||
placeholder?: string
|
||||
/**
|
||||
* @defaultValue 'primary'
|
||||
*/
|
||||
color?: InputTags['variants']['color']
|
||||
/**
|
||||
* @defaultValue 'outline'
|
||||
*/
|
||||
variant?: InputTags['variants']['variant']
|
||||
/**
|
||||
* @defaultValue 'md'
|
||||
*/
|
||||
size?: InputTags['variants']['size']
|
||||
autofocus?: boolean
|
||||
autofocusDelay?: number
|
||||
/**
|
||||
* The icon displayed to delete a tag.
|
||||
* @defaultValue appConfig.ui.icons.close
|
||||
* @IconifyIcon
|
||||
*/
|
||||
deleteIcon?: string
|
||||
/** Highlight the ring color like a focus state. */
|
||||
highlight?: boolean
|
||||
class?: any
|
||||
ui?: InputTags['slots']
|
||||
}
|
||||
|
||||
export type InputTagsEmits<T extends InputTagItem> = {
|
||||
'update:modelValue': [payload: T[]]
|
||||
'change': [payload: Event]
|
||||
'blur': [payload: FocusEvent]
|
||||
'focus': [payload: FocusEvent]
|
||||
}
|
||||
|
||||
type SlotProps<T extends InputTagItem> = (props: { item: T, index: number }) => any
|
||||
|
||||
export interface InputTagsSlots<T extends InputTagItem = InputTagItem> {
|
||||
'leading'(props?: {}): any
|
||||
'default'(props?: {}): any
|
||||
'trailing'(props?: {}): any
|
||||
'item-text': SlotProps<T>
|
||||
'item-delete': SlotProps<T>
|
||||
}
|
||||
</script>
|
||||
|
||||
<script setup lang="ts" generic="T extends InputTagItem">
|
||||
import { computed, ref, onMounted, toRaw } from 'vue'
|
||||
import { TagsInputRoot, TagsInputItem, TagsInputItemText, TagsInputItemDelete, TagsInputInput, useForwardPropsEmits } from 'reka-ui'
|
||||
import { reactivePick } from '@vueuse/core'
|
||||
import { useAppConfig } from '#imports'
|
||||
import { useButtonGroup } from '../composables/useButtonGroup'
|
||||
import { useComponentIcons } from '../composables/useComponentIcons'
|
||||
import { useFormField } from '../composables/useFormField'
|
||||
import { tv } from '../utils/tv'
|
||||
import UIcon from './Icon.vue'
|
||||
|
||||
defineOptions({ inheritAttrs: false })
|
||||
|
||||
const props = withDefaults(defineProps<InputTagsProps<T>>(), {
|
||||
type: 'text',
|
||||
autofocusDelay: 0
|
||||
})
|
||||
const emits = defineEmits<InputTagsEmits<T>>()
|
||||
const slots = defineSlots<InputTagsSlots<T>>()
|
||||
|
||||
const appConfig = useAppConfig() as InputTags['AppConfig']
|
||||
|
||||
const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'addOnPaste', 'addOnTab', 'addOnBlur', 'duplicate', 'delimiter', 'max', 'convertValue', 'displayValue', 'required'), emits)
|
||||
|
||||
const { emitFormBlur, emitFormFocus, emitFormChange, emitFormInput, size: formGroupSize, color, id, name, highlight, disabled, ariaAttrs } = useFormField<InputTagsProps>(props)
|
||||
const { orientation, size: buttonGroupSize } = useButtonGroup<InputTagsProps>(props)
|
||||
const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props)
|
||||
|
||||
const inputSize = computed(() => buttonGroupSize.value || formGroupSize.value)
|
||||
|
||||
const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.inputTags || {}) })({
|
||||
color: color.value,
|
||||
variant: props.variant,
|
||||
size: inputSize?.value,
|
||||
loading: props.loading,
|
||||
highlight: highlight.value,
|
||||
leading: isLeading.value || !!props.avatar || !!slots.leading,
|
||||
trailing: isTrailing.value || !!slots.trailing,
|
||||
buttonGroup: orientation.value
|
||||
}))
|
||||
|
||||
const inputRef = ref<InstanceType<typeof TagsInputInput> | null>(null)
|
||||
|
||||
onMounted(() => {
|
||||
setTimeout(() => {
|
||||
autoFocus()
|
||||
}, props.autofocusDelay)
|
||||
})
|
||||
|
||||
function autoFocus() {
|
||||
if (props.autofocus) {
|
||||
inputRef.value?.$el?.focus()
|
||||
}
|
||||
}
|
||||
|
||||
function onUpdate(value: T[]) {
|
||||
if (toRaw(props.modelValue) === value) {
|
||||
return
|
||||
}
|
||||
// @ts-expect-error - 'target' does not exist in type 'EventInit'
|
||||
const event = new Event('change', { target: { value } })
|
||||
emits('change', event)
|
||||
emitFormChange()
|
||||
emitFormInput()
|
||||
}
|
||||
|
||||
function onBlur(event: FocusEvent) {
|
||||
emits('blur', event)
|
||||
emitFormBlur()
|
||||
}
|
||||
|
||||
function onFocus(event: FocusEvent) {
|
||||
emits('focus', event)
|
||||
emitFormFocus()
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
inputRef
|
||||
})
|
||||
</script>
|
||||
|
||||
<!-- eslint-disable vue/no-template-shadow -->
|
||||
<template>
|
||||
<TagsInputRoot
|
||||
:id="id"
|
||||
v-slot="{ modelValue: tags }"
|
||||
:model-value="modelValue"
|
||||
:default-value="defaultValue"
|
||||
:class="ui.root({ class: [ui.base({ class: props.ui?.base }), props.ui?.root, props.class] })"
|
||||
v-bind="rootProps"
|
||||
:name="name"
|
||||
:disabled="disabled"
|
||||
@update:model-value="onUpdate"
|
||||
@blur="onBlur"
|
||||
@focus="onFocus"
|
||||
>
|
||||
<TagsInputItem
|
||||
v-for="(item, index) in tags"
|
||||
:key="index"
|
||||
:value="item"
|
||||
:class="ui.item({ class: [props.ui?.item] })"
|
||||
>
|
||||
<TagsInputItemText :class="ui.itemText({ class: [props.ui?.itemText] })">
|
||||
<slot v-if="!!slots['item-text']" name="item-text" :item="(item as T)" :index="index" />
|
||||
</TagsInputItemText>
|
||||
|
||||
<TagsInputItemDelete
|
||||
:class="ui.itemDelete({ class: [props.ui?.itemDelete] })"
|
||||
:disabled="disabled"
|
||||
>
|
||||
<slot name="item-delete" :item="(item as T)" :index="index">
|
||||
<UIcon :name="deleteIcon || appConfig.ui.icons.close" :class="ui.itemDeleteIcon({ class: [props.ui?.itemDeleteIcon] })" />
|
||||
</slot>
|
||||
</TagsInputItemDelete>
|
||||
</TagsInputItem>
|
||||
|
||||
<TagsInputInput
|
||||
ref="inputRef"
|
||||
v-bind="{ ...$attrs, ...ariaAttrs }"
|
||||
:placeholder="placeholder"
|
||||
:class="ui.input({ class: props.ui?.input })"
|
||||
/>
|
||||
|
||||
<slot />
|
||||
|
||||
<span v-if="isLeading || !!avatar || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">
|
||||
<slot name="leading">
|
||||
<UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
|
||||
<UAvatar v-else-if="!!avatar" :size="((props.ui?.leadingAvatarSize || ui.leadingAvatarSize()) as AvatarProps['size'])" v-bind="avatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" />
|
||||
</slot>
|
||||
</span>
|
||||
|
||||
<span v-if="isTrailing || !!slots.trailing" :class="ui.trailing({ class: props.ui?.trailing })">
|
||||
<slot name="trailing">
|
||||
<UIcon v-if="trailingIconName" :name="trailingIconName" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
|
||||
</slot>
|
||||
</span>
|
||||
</TagsInputRoot>
|
||||
</template>
|
||||
@@ -26,6 +26,7 @@ export * from '../components/Icon.vue'
|
||||
export * from '../components/Input.vue'
|
||||
export * from '../components/InputMenu.vue'
|
||||
export * from '../components/InputNumber.vue'
|
||||
export * from '../components/InputTags.vue'
|
||||
export * from '../components/Kbd.vue'
|
||||
export * from '../components/Link.vue'
|
||||
export * from '../components/Modal.vue'
|
||||
|
||||
@@ -24,6 +24,7 @@ export { default as formField } from './form-field'
|
||||
export { default as input } from './input'
|
||||
export { default as inputMenu } from './input-menu'
|
||||
export { default as inputNumber } from './input-number'
|
||||
export { default as inputTags } from './input-tags'
|
||||
export { default as kbd } from './kbd'
|
||||
export { default as link } from './link'
|
||||
export { default as modal } from './modal'
|
||||
|
||||
@@ -26,14 +26,13 @@ export default (options: Required<ModuleOptions>) => {
|
||||
tagsItem: 'px-1.5 py-0.5 rounded-sm font-medium inline-flex items-center gap-0.5 ring ring-inset ring-accented bg-elevated text-default data-disabled:cursor-not-allowed data-disabled:opacity-75',
|
||||
tagsItemText: 'truncate',
|
||||
tagsItemDelete: ['inline-flex items-center rounded-xs text-dimmed hover:text-default hover:bg-accented/75 disabled:pointer-events-none', options.theme.transitions && 'transition-colors'],
|
||||
tagsItemDeleteIcon: '',
|
||||
tagsInput: ''
|
||||
tagsItemDeleteIcon: 'shrink-0',
|
||||
tagsInput: 'flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75'
|
||||
},
|
||||
variants: {
|
||||
multiple: {
|
||||
true: {
|
||||
root: 'flex-wrap',
|
||||
tagsInput: 'border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75'
|
||||
root: 'flex-wrap'
|
||||
},
|
||||
false: {
|
||||
base: 'w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75'
|
||||
@@ -97,7 +96,15 @@ export default (options: Required<ModuleOptions>) => {
|
||||
}
|
||||
}
|
||||
},
|
||||
compoundVariants: [...(options.theme.colors || []).map((color: string) => ({
|
||||
compoundVariants: [{
|
||||
variant: 'soft',
|
||||
multiple: true,
|
||||
class: 'has-focus:bg-elevated'
|
||||
}, {
|
||||
variant: 'ghost',
|
||||
multiple: true,
|
||||
class: 'has-focus:bg-elevated'
|
||||
}, ...(options.theme.colors || []).map((color: string) => ({
|
||||
color,
|
||||
multiple: true,
|
||||
variant: ['outline', 'subtle'],
|
||||
|
||||
54
src/theme/input-tags.ts
Normal file
54
src/theme/input-tags.ts
Normal file
@@ -0,0 +1,54 @@
|
||||
import { defuFn } from 'defu'
|
||||
import type { ModuleOptions } from '../module'
|
||||
import input from './input'
|
||||
|
||||
export default (options: Required<ModuleOptions>) => {
|
||||
return defuFn({
|
||||
slots: {
|
||||
root: (prev: string) => [prev, 'flex-wrap'],
|
||||
base: () => ['rounded-md', options.theme.transitions && 'transition-colors'],
|
||||
item: 'px-1.5 py-0.5 rounded-sm font-medium inline-flex items-center gap-0.5 ring ring-inset ring-accented bg-elevated text-default data-disabled:cursor-not-allowed data-disabled:opacity-75 wrap-anywhere data-[state="active"]:bg-accented',
|
||||
itemText: '',
|
||||
itemDelete: ['inline-flex items-center rounded-xs text-dimmed hover:text-default hover:bg-accented/75 disabled:pointer-events-none', options.theme.transitions && 'transition-colors'],
|
||||
itemDeleteIcon: 'shrink-0',
|
||||
input: 'flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75'
|
||||
},
|
||||
variants: {
|
||||
size: {
|
||||
xs: {
|
||||
item: 'text-[10px]/3',
|
||||
itemDeleteIcon: 'size-3'
|
||||
},
|
||||
sm: {
|
||||
item: 'text-[10px]/3',
|
||||
itemDeleteIcon: 'size-3'
|
||||
},
|
||||
md: {
|
||||
item: 'text-xs',
|
||||
itemDeleteIcon: 'size-3.5'
|
||||
},
|
||||
lg: {
|
||||
item: 'text-xs',
|
||||
itemDeleteIcon: 'size-3.5'
|
||||
},
|
||||
xl: {
|
||||
item: 'text-sm',
|
||||
itemDeleteIcon: 'size-4'
|
||||
}
|
||||
},
|
||||
variant: (prev: Record<string, string>) => Object.fromEntries(
|
||||
Object.entries(prev).map(([key, value]) => [key, replaceFocus(value)])
|
||||
)
|
||||
},
|
||||
compoundVariants: (prev: Record<string, any>[]) => prev.map(item => ({
|
||||
...item,
|
||||
class: typeof item.class === 'string' ? replaceFocus(item.class) : item.class
|
||||
}))
|
||||
}, input(options))
|
||||
}
|
||||
|
||||
function replaceFocus(str: string): string {
|
||||
return str
|
||||
.replace(/focus:/g, 'has-focus:')
|
||||
.replace(/focus-visible:/g, 'has-focus-visible:')
|
||||
}
|
||||
@@ -42,6 +42,8 @@ describe('InputMenu', () => {
|
||||
['with defaultValue', { props: { ...props, defaultValue: items[0] } }],
|
||||
['with valueKey', { props: { ...props, valueKey: 'value' } }],
|
||||
['with labelKey', { props: { ...props, labelKey: 'value' } }],
|
||||
['with multiple', { props: { ...props, multiple: true } }],
|
||||
['with multiple and modelValue', { props: { ...props, multiple: true, modelValue: [items[0], items[1]] } }],
|
||||
['with id', { props: { ...props, id: 'id' } }],
|
||||
['with name', { props: { ...props, name: 'name' } }],
|
||||
['with placeholder', { props: { ...props, placeholder: 'Search...' } }],
|
||||
|
||||
42
test/components/InputTags.spec.ts
Normal file
42
test/components/InputTags.spec.ts
Normal file
@@ -0,0 +1,42 @@
|
||||
import { describe, it, expect } from 'vitest'
|
||||
import theme from '#build/ui/input'
|
||||
import InputTags, { type InputTagsProps, type InputTagsSlots } from '../../src/runtime/components/InputTags.vue'
|
||||
import ComponentRender from '../component-render'
|
||||
|
||||
describe('InputTags', () => {
|
||||
const sizes = Object.keys(theme.variants.size) as any
|
||||
const variants = Object.keys(theme.variants.variant) as any
|
||||
|
||||
it.each([
|
||||
// Props
|
||||
['with modelValue', { props: { modelValue: ['test'] } }],
|
||||
['with defaultValue', { props: { defaultValue: ['test'] } }],
|
||||
['with id', { props: { id: 'id' } }],
|
||||
['with name', { props: { name: 'name' } }],
|
||||
['with placeholder', { props: { placeholder: 'Search...' } }],
|
||||
['with disabled', { props: { disabled: true } }],
|
||||
['with required', { props: { required: true } }],
|
||||
['with icon', { props: { icon: 'i-lucide-search' } }],
|
||||
['with trailing and icon', { props: { trailing: true, icon: 'i-lucide-arrow-right' } }],
|
||||
['with trailingIcon', { props: { trailingIcon: 'i-lucide-arrow-right' } }],
|
||||
['with loading', { props: { loading: true } }],
|
||||
['with loading trailing', { props: { loading: true, trailing: true } }],
|
||||
['with loadingIcon', { props: { loading: true, loadingIcon: 'i-lucide-loader' } }],
|
||||
['with ariaLabel', { attrs: { 'aria-label': 'Aria label' } }],
|
||||
['with as', { props: { as: 'section' } }],
|
||||
['with class', { props: { class: '' } }],
|
||||
['with ui', { props: { ui: {} } }],
|
||||
...sizes.map((size: string) => [`with size ${size}`, { props: { size } }]),
|
||||
...variants.map((variant: string) => [`with primary variant ${variant}`, { props: { variant } }]),
|
||||
...variants.map((variant: string) => [`with neutral variant ${variant}`, { props: { variant, color: 'neutral' } }]),
|
||||
// Slots
|
||||
['with leading slot', { slots: { leading: () => 'Leading slot' } }],
|
||||
['with default slot', { slots: { default: () => 'Default slot' } }],
|
||||
['with trailing slot', { slots: { trailing: () => 'Trailing slot' } }],
|
||||
['with item-text slot', { slots: { ['item-text']: () => 'Item Text slot' } }],
|
||||
['with item-delete slot', { slots: { ['item-delete']: () => 'Item Delete slot' } }]
|
||||
])('renders %s correctly', async (nameOrHtml: string, options: { props?: InputTagsProps, slots?: Partial<InputTagsSlots>, attrs?: Record<string, unknown> }) => {
|
||||
const html = await ComponentRender(nameOrHtml, options, InputTags)
|
||||
expect(html).toMatchSnapshot()
|
||||
})
|
||||
})
|
||||
@@ -482,6 +482,70 @@ exports[`InputMenu > renders with modelValue correctly 1`] = `
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with multiple and modelValue correctly 1`] = `
|
||||
"<div dir="ltr" class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-primary focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" style="pointer-events: auto;">
|
||||
<div dir="ltr" class="px-1.5 py-0.5 rounded-sm font-medium inline-flex items-center gap-0.5 ring ring-inset ring-accented bg-elevated text-default data-disabled:cursor-not-allowed data-disabled:opacity-75 text-xs" data-reka-collection-item="" aria-labelledby="reka-tags-input-item-text-v-0" aria-current="false" data-state="inactive"><span id="reka-tags-input-item-text-v-0" class="truncate">Backlog</span><button tabindex="-1" aria-labelledby="reka-tags-input-item-text-v-0" aria-current="false" data-state="inactive" type="button" class="inline-flex items-center rounded-xs text-dimmed hover:text-default hover:bg-accented/75 disabled:pointer-events-none transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-3.5"></svg></button></div>
|
||||
<div class="px-1.5 py-0.5 rounded-sm font-medium inline-flex items-center gap-0.5 ring ring-inset ring-accented bg-elevated text-default data-disabled:cursor-not-allowed data-disabled:opacity-75 text-xs" data-reka-collection-item="" aria-labelledby="reka-tags-input-item-text-v-1" aria-current="false" data-state="inactive"><span id="reka-tags-input-item-text-v-1" class="truncate">Todo</span><button tabindex="-1" aria-labelledby="reka-tags-input-item-text-v-1" aria-current="false" data-state="inactive" type="button" class="inline-flex items-center rounded-xs text-dimmed hover:text-default hover:bg-accented/75 disabled:pointer-events-none transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-3.5"></svg></button></div><input type="text" autocomplete="false" autocorrect="off" autocapitalize="off" aria-disabled="false" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75" value="">
|
||||
<!---->
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></button>
|
||||
</div>
|
||||
<!--teleport start-->
|
||||
|
||||
|
||||
<div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||||
<div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" aria-orientation="vertical" aria-multiselectable="true" data-orientation="vertical" position="popper" id="reka-combobox-content-v-2" data-state="open" data-side="bottom" data-align="center">
|
||||
<!---->
|
||||
<div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
|
||||
<!--v-if-->
|
||||
<div role="group" aria-labelledby="" id="reka-combobox-group-v-3" class="p-1 isolate">
|
||||
<div id="reka-combobox-item-v-5" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="true" data-state="checked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="truncate">Backlog</span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg></span></div>
|
||||
<div id="reka-combobox-item-v-7" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="true" data-state="checked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="truncate">Todo</span><span class="ms-auto inline-flex gap-1.5 items-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg></span></div>
|
||||
<div id="reka-combobox-item-v-9" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="truncate">In Progress</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span></div>
|
||||
<div id="reka-combobox-item-v-11" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="truncate">Done</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span></div>
|
||||
<div id="reka-combobox-item-v-13" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="truncate">Canceled</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span></div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!--teleport end-->
|
||||
<!---->"
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with multiple correctly 1`] = `
|
||||
"<div dir="ltr" class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-primary focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" style="pointer-events: auto;"><input type="text" autocomplete="false" autocorrect="off" autocapitalize="off" aria-disabled="false" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" dir="ltr" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75" value="">
|
||||
<!---->
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></button>
|
||||
</div>
|
||||
<!--teleport start-->
|
||||
|
||||
|
||||
<div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||||
<div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" aria-orientation="vertical" aria-multiselectable="true" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0" data-state="open" data-side="bottom" data-align="center">
|
||||
<!---->
|
||||
<div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
|
||||
<!--v-if-->
|
||||
<div role="group" aria-labelledby="" id="reka-combobox-group-v-1" class="p-1 isolate">
|
||||
<div id="reka-combobox-item-v-3" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="truncate">Backlog</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span></div>
|
||||
<div id="reka-combobox-item-v-5" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="truncate">Todo</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span></div>
|
||||
<div id="reka-combobox-item-v-7" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="truncate">In Progress</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span></div>
|
||||
<div id="reka-combobox-item-v-9" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="truncate">Done</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span></div>
|
||||
<div id="reka-combobox-item-v-11" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5"></svg><span class="truncate">Canceled</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span></div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!--teleport end-->
|
||||
<!---->"
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with name correctly 1`] = `
|
||||
"<div dir="ltr" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></button>
|
||||
|
||||
@@ -482,6 +482,70 @@ exports[`InputMenu > renders with modelValue correctly 1`] = `
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with multiple and modelValue correctly 1`] = `
|
||||
"<div dir="ltr" class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-primary focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" style="pointer-events: auto;">
|
||||
<div dir="ltr" class="px-1.5 py-0.5 rounded-sm font-medium inline-flex items-center gap-0.5 ring ring-inset ring-accented bg-elevated text-default data-disabled:cursor-not-allowed data-disabled:opacity-75 text-xs" data-reka-collection-item="" aria-labelledby="reka-tags-input-item-text-v-0-0-0" aria-current="false" data-state="inactive"><span id="reka-tags-input-item-text-v-0-0-0" class="truncate">Backlog</span><button tabindex="-1" aria-labelledby="reka-tags-input-item-text-v-0-0-0" aria-current="false" data-state="inactive" type="button" class="inline-flex items-center rounded-xs text-dimmed hover:text-default hover:bg-accented/75 disabled:pointer-events-none transition-colors"><span class="iconify i-lucide:x shrink-0 size-3.5" aria-hidden="true"></span></button></div>
|
||||
<div class="px-1.5 py-0.5 rounded-sm font-medium inline-flex items-center gap-0.5 ring ring-inset ring-accented bg-elevated text-default data-disabled:cursor-not-allowed data-disabled:opacity-75 text-xs" data-reka-collection-item="" aria-labelledby="reka-tags-input-item-text-v-0-0-1" aria-current="false" data-state="inactive"><span id="reka-tags-input-item-text-v-0-0-1" class="truncate">Todo</span><button tabindex="-1" aria-labelledby="reka-tags-input-item-text-v-0-0-1" aria-current="false" data-state="inactive" type="button" class="inline-flex items-center rounded-xs text-dimmed hover:text-default hover:bg-accented/75 disabled:pointer-events-none transition-colors"><span class="iconify i-lucide:x shrink-0 size-3.5" aria-hidden="true"></span></button></div><input type="text" autocomplete="false" autocorrect="off" autocapitalize="off" aria-disabled="false" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75" value="" aria-activedescendant="reka-combobox-item-v-0-0-5">
|
||||
<!---->
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></button>
|
||||
</div>
|
||||
<!--teleport start-->
|
||||
|
||||
|
||||
<div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||||
<div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" aria-orientation="vertical" aria-multiselectable="true" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-2" data-state="open" data-side="bottom" data-align="center">
|
||||
<!---->
|
||||
<div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
|
||||
<!--v-if-->
|
||||
<div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-3" class="p-1 isolate">
|
||||
<div id="reka-combobox-item-v-0-0-5" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="true" data-state="checked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="truncate">Backlog</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:check shrink-0 size-5" aria-hidden="true"></span></span></div>
|
||||
<div id="reka-combobox-item-v-0-0-7" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="true" data-state="checked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="truncate">Todo</span><span class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:check shrink-0 size-5" aria-hidden="true"></span></span></div>
|
||||
<div id="reka-combobox-item-v-0-0-9" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="truncate">In Progress</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span></div>
|
||||
<div id="reka-combobox-item-v-0-0-11" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="truncate">Done</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span></div>
|
||||
<div id="reka-combobox-item-v-0-0-13" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="truncate">Canceled</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span></div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!--teleport end-->
|
||||
<!---->"
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with multiple correctly 1`] = `
|
||||
"<div dir="ltr" class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-primary focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" style="pointer-events: auto;"><input type="text" autocomplete="false" autocorrect="off" autocapitalize="off" aria-disabled="false" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" dir="ltr" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
|
||||
<!---->
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></button>
|
||||
</div>
|
||||
<!--teleport start-->
|
||||
|
||||
|
||||
<div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">
|
||||
<div data-dismissable-layer="" style="display: flex; flex-direction: column; box-sizing: border-box; --reka-combobox-content-transform-origin: var(--reka-popper-transform-origin); --reka-combobox-content-available-width: var(--reka-popper-available-width); --reka-combobox-content-available-height: var(--reka-popper-available-height); --reka-combobox-trigger-width: var(--reka-popper-anchor-width); --reka-combobox-trigger-height: var(--reka-popper-anchor-height); animation: none; outline-color: none; outline-style: none; outline-width: initial;" class="max-h-60 w-(--reka-combobox-trigger-width) bg-default shadow-lg rounded-md ring ring-default overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-combobox-content-transform-origin) pointer-events-auto flex flex-col" role="listbox" aria-orientation="vertical" aria-multiselectable="true" data-orientation="vertical" position="popper" id="reka-combobox-content-v-0-0-0" data-state="open" data-side="bottom" data-align="center">
|
||||
<!---->
|
||||
<div role="presentation" class="relative divide-y divide-default scroll-py-1 overflow-y-auto flex-1">
|
||||
<!--v-if-->
|
||||
<div role="group" aria-labelledby="" id="reka-combobox-group-v-0-0-1" class="p-1 isolate">
|
||||
<div id="reka-combobox-item-v-0-0-3" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked" data-highlighted=""><span class="iconify i-lucide:circle-help shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="truncate">Backlog</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span></div>
|
||||
<div id="reka-combobox-item-v-0-0-5" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-plus shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="truncate">Todo</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span></div>
|
||||
<div id="reka-combobox-item-v-0-0-7" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-arrow-up shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="truncate">In Progress</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span></div>
|
||||
<div id="reka-combobox-item-v-0-0-9" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-check shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="truncate">Done</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span></div>
|
||||
<div id="reka-combobox-item-v-0-0-11" class="group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-default data-highlighted:not-data-disabled:text-highlighted data-highlighted:not-data-disabled:before:bg-elevated/50 transition-colors before:transition-colors p-1.5 text-sm gap-1.5" data-reka-collection-item="" role="option" tabindex="-1" aria-selected="false" data-state="unchecked"><span class="iconify i-lucide:circle-x shrink-0 text-dimmed group-data-highlighted:not-group-data-disabled:text-default transition-colors size-5" aria-hidden="true"></span><span class="truncate">Canceled</span><span class="ms-auto inline-flex gap-1.5 items-center"><!----></span></div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!--teleport end-->
|
||||
<!---->"
|
||||
`;
|
||||
|
||||
exports[`InputMenu > renders with name correctly 1`] = `
|
||||
"<div dir="ltr" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="false" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
|
||||
<!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></button>
|
||||
|
||||
291
test/components/__snapshots__/InputTags-vue.spec.ts.snap
Normal file
291
test/components/__snapshots__/InputTags-vue.spec.ts.snap
Normal file
@@ -0,0 +1,291 @@
|
||||
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
||||
|
||||
exports[`InputTags > renders with ariaLabel correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" aria-label="Aria label" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with as correctly 1`] = `
|
||||
"<section class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</section>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with class correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with default slot correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">Default slot
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with defaultValue correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr">
|
||||
<div class="px-1.5 py-0.5 rounded-sm font-medium inline-flex items-center gap-0.5 ring ring-inset ring-accented bg-elevated text-default data-disabled:cursor-not-allowed data-disabled:opacity-75 wrap-anywhere data-[state="active"]:bg-accented text-xs" data-reka-collection-item="" aria-labelledby="reka-tags-input-item-text-v-0" aria-current="false" data-state="inactive"><span id="reka-tags-input-item-text-v-0" class="">test</span><button tabindex="-1" aria-labelledby="reka-tags-input-item-text-v-0" aria-current="false" data-state="inactive" type="button" class="inline-flex items-center rounded-xs text-dimmed hover:text-default hover:bg-accented/75 disabled:pointer-events-none transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-3.5"></svg></button></div><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with disabled correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr" data-disabled=""><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" disabled="" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with icon correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary ps-9" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with id correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input id="id" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with item-delete slot correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with item-text slot correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with leading slot correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary ps-9" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5">Leading slot</span>
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with loading correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary ps-9" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5 animate-spin"></svg></span>
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with loading trailing correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary pe-9" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5 animate-spin"></svg></span>
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with loadingIcon correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary ps-9" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5 animate-spin"></svg></span>
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with modelValue correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr">
|
||||
<div class="px-1.5 py-0.5 rounded-sm font-medium inline-flex items-center gap-0.5 ring ring-inset ring-accented bg-elevated text-default data-disabled:cursor-not-allowed data-disabled:opacity-75 wrap-anywhere data-[state="active"]:bg-accented text-xs" data-reka-collection-item="" aria-labelledby="reka-tags-input-item-text-v-0" aria-current="false" data-state="inactive"><span id="reka-tags-input-item-text-v-0" class="">test</span><button tabindex="-1" aria-labelledby="reka-tags-input-item-text-v-0" aria-current="false" data-state="inactive" type="button" class="inline-flex items-center rounded-xs text-dimmed hover:text-default hover:bg-accented/75 disabled:pointer-events-none transition-colors"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-3.5"></svg></button></div><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with name correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with neutral variant ghost correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent hover:bg-elevated has-focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with neutral variant none correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with neutral variant outline correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-inverted" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with neutral variant soft correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated/50 hover:bg-elevated has-focus:bg-elevated disabled:bg-elevated/50" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with neutral variant subtle correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-inverted" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with placeholder correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" placeholder="Search..." class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with primary variant ghost correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent hover:bg-elevated has-focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with primary variant none correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with primary variant outline correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with primary variant soft correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated/50 hover:bg-elevated has-focus:bg-elevated disabled:bg-elevated/50" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with primary variant subtle correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with required correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with size lg correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-3 py-2 text-sm gap-2 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with size md correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with size sm correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-xs gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with size xl correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-3 py-2 text-base gap-2 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with size xs correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2 py-1 text-xs gap-1 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with trailing and icon correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary pe-9" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with trailing slot correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary pe-9" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pe-2.5">Trailing slot</span>
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with trailingIcon correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary pe-9" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with ui correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
291
test/components/__snapshots__/InputTags.spec.ts.snap
Normal file
291
test/components/__snapshots__/InputTags.spec.ts.snap
Normal file
@@ -0,0 +1,291 @@
|
||||
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
||||
|
||||
exports[`InputTags > renders with ariaLabel correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" aria-label="Aria label" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with as correctly 1`] = `
|
||||
"<section class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</section>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with class correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with default slot correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">Default slot
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with defaultValue correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr">
|
||||
<div class="px-1.5 py-0.5 rounded-sm font-medium inline-flex items-center gap-0.5 ring ring-inset ring-accented bg-elevated text-default data-disabled:cursor-not-allowed data-disabled:opacity-75 wrap-anywhere data-[state="active"]:bg-accented text-xs" data-reka-collection-item="" aria-labelledby="reka-tags-input-item-text-v-0-0-0" aria-current="false" data-state="inactive"><span id="reka-tags-input-item-text-v-0-0-0" class="">test</span><button tabindex="-1" aria-labelledby="reka-tags-input-item-text-v-0-0-0" aria-current="false" data-state="inactive" type="button" class="inline-flex items-center rounded-xs text-dimmed hover:text-default hover:bg-accented/75 disabled:pointer-events-none transition-colors"><span class="iconify i-lucide:x shrink-0 size-3.5" aria-hidden="true"></span></button></div><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with disabled correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr" data-disabled=""><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" disabled="" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with icon correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary ps-9" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with id correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input id="id" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with item-delete slot correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with item-text slot correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with leading slot correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary ps-9" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5">Leading slot</span>
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with loading correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary ps-9" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:loader-circle shrink-0 text-dimmed size-5 animate-spin" aria-hidden="true"></span></span>
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with loading trailing correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary pe-9" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:loader-circle shrink-0 text-dimmed size-5 animate-spin" aria-hidden="true"></span></span>
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with loadingIcon correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary ps-9" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:loader shrink-0 text-dimmed size-5 animate-spin" aria-hidden="true"></span></span>
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with modelValue correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr">
|
||||
<div class="px-1.5 py-0.5 rounded-sm font-medium inline-flex items-center gap-0.5 ring ring-inset ring-accented bg-elevated text-default data-disabled:cursor-not-allowed data-disabled:opacity-75 wrap-anywhere data-[state="active"]:bg-accented text-xs" data-reka-collection-item="" aria-labelledby="reka-tags-input-item-text-v-0-0-0" aria-current="false" data-state="inactive"><span id="reka-tags-input-item-text-v-0-0-0" class="">test</span><button tabindex="-1" aria-labelledby="reka-tags-input-item-text-v-0-0-0" aria-current="false" data-state="inactive" type="button" class="inline-flex items-center rounded-xs text-dimmed hover:text-default hover:bg-accented/75 disabled:pointer-events-none transition-colors"><span class="iconify i-lucide:x shrink-0 size-3.5" aria-hidden="true"></span></button></div><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with name correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with neutral variant ghost correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent hover:bg-elevated has-focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with neutral variant none correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with neutral variant outline correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-inverted" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with neutral variant soft correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated/50 hover:bg-elevated has-focus:bg-elevated disabled:bg-elevated/50" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with neutral variant subtle correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-inverted" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with placeholder correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" placeholder="Search..." class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with primary variant ghost correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent hover:bg-elevated has-focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with primary variant none correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with primary variant outline correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with primary variant soft correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated/50 hover:bg-elevated has-focus:bg-elevated disabled:bg-elevated/50" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with primary variant subtle correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with required correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with size lg correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-3 py-2 text-sm gap-2 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with size md correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with size sm correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-xs gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with size xl correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-3 py-2 text-base gap-2 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with size xs correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2 py-1 text-xs gap-1 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with trailing and icon correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary pe-9" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:arrow-right shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with trailing slot correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary pe-9" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pe-2.5">Trailing slot</span>
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with trailingIcon correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary pe-9" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if--><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:arrow-right shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`InputTags > renders with ui correctly 1`] = `
|
||||
"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!---->
|
||||
</div>"
|
||||
`;
|
||||
Reference in New Issue
Block a user