Skip to content

Commit 7dd02fc

Browse files
teleskop150750teleskop150750
committed
feat(components): [Toast] implements
1 parent 5ae1a35 commit 7dd02fc

File tree

99 files changed

+3193
-1176
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

99 files changed

+3193
-1176
lines changed

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ Enter the component you want most in the components, leave the emojis and follow
5555
| [Slider](https://vue-primitives.netlify.app/?path=/story/components-slider--styled) | ✓ |
5656
| [Switch](https://vue-primitives.netlify.app/?path=/story/components-switch--styled) | ✓ |
5757
| [Tabs](https://vue-primitives.netlify.app/?path=/story/components-tabs--styled) | ✓ |
58-
| Toast | 🚧 |
58+
| [Toast](https://vue-primitives.netlify.app/?path=/story/components-toast--styled) | ✓ |
5959
| [ToggleGroup](https://vue-primitives.netlify.app/?path=/story/components-togglegroup--single) | ✓ |
6060
| [Toggle](https://vue-primitives.netlify.app/?path=/story/components-toggle--styled) | ✓ |
6161
| [Toolbar](https://vue-primitives.netlify.app/?path=/story/components-toolbar--styled) | ✓ |

‎package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"name": "@teleskop150750/primitives-monorepo",
33
"type": "module",
44
"private": true,
5-
"packageManager": "pnpm@9.7.1",
5+
"packageManager": "pnpm@9.9.0",
66
"engines": {
77
"node": ">=18"
88
},
@@ -15,9 +15,9 @@
1515
"root-lint:fix": "eslint . --fix"
1616
},
1717
"devDependencies": {
18-
"@antfu/eslint-config": "^2.26.0",
18+
"@antfu/eslint-config": "^3.0.0",
1919
"@teleskop150750/typescript-config": "workspace:*",
20-
"@types/node": "^20.14.10",
20+
"@types/node": "^20.16.2",
2121
"eslint": "npm:[email protected]",
2222
"eslint-ts-patch": "9.4.0-0",
2323
"prettier": "^3.3.3",

‎packages/vue-primitives/package.json‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -99,12 +99,12 @@
9999
"@storybook/vue3-vite": "^8.2.9",
100100
"@tsconfig/node20": "^20.1.4",
101101
"@types/jsdom": "^21.1.7",
102-
"@types/node": "^20.14.10",
103-
"@vitejs/plugin-vue": "^5.1.2",
102+
"@types/node": "^20.16.2",
103+
"@vitejs/plugin-vue": "^5.1.3",
104104
"@vitejs/plugin-vue-jsx": "^4.0.1",
105105
"@vue/test-utils": "^2.4.6",
106-
"@vueuse/core": "^11.0.1",
107-
"jsdom": "^24.1.1",
106+
"@vueuse/core": "^11.0.3",
107+
"jsdom": "^25.0.0",
108108
"npm-run-all2": "^6.2.2",
109109
"storybook": "^8.2.9",
110110
"unbuild": "^2.0.0",
@@ -113,6 +113,6 @@
113113
"vite-plugin-externalize-deps": "^0.8.0",
114114
"vitest": "^2.0.5",
115115
"vue": "^3.4.38",
116-
"vue-tsc": "^2.0.29"
116+
"vue-tsc": "^2.1.2"
117117
}
118118
}

‎packages/vue-primitives/src/accordion/AccordionRoot.vue‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<script setup lang="ts" generic="T extends AccordionType">
2-
import { computed, shallowRef } from 'vue'
2+
import { computed } from 'vue'
33
import { useDirection } from '../direction/Direction.ts'
4-
import { useControllableState, useId } from '../hooks/index.ts'
4+
import { useControllableState, useForwardElement, useId, useRef } from '../hooks/index.ts'
55
import { Primitive } from '../primitive/index.ts'
6-
import { composeEventHandlers, forwardRef } from '../utils/vue.ts'
6+
import { composeEventHandlers } from '../utils/vue.ts'
77
import { arrayify } from '../utils/array.ts'
88
import { ACCORDION_KEYS, type AccordionRootEmits, type AccordionRootProps, type AccordionType, Collection, provideAccordionContext, useCollection } from './AccordionRoot.ts'
99
@@ -22,16 +22,18 @@ const props = withDefaults(defineProps<AccordionRootProps<T>>(), {
2222
})
2323
const emit = defineEmits<AccordionRootEmits<T>>()
2424
25-
const $el = shallowRef<HTMLElement>()
26-
const forwardedRef = forwardRef($el)
25+
const $el = useRef<HTMLElement>()
26+
const forwardElement = useForwardElement($el)
2727
2828
const direction = useDirection(() => props.dir)
2929
const value = useControllableState(props, v => emit('update:value', v as Value), 'value', props.defaultValue)
3030
const TYPE_SINGLE = 'single' as const satisfies AccordionType
3131
3232
const collectionContext = Collection.provideCollectionContext($el)
33+
3334
const getItems = useCollection(collectionContext)
34-
const handleKeydown = composeEventHandlers<KeyboardEvent>((event) => {
35+
36+
const onKeydown = composeEventHandlers<KeyboardEvent>((event) => {
3537
emit('keydown', event)
3638
}, (event) => {
3739
if (!ACCORDION_KEYS.includes(event.key))
@@ -145,11 +147,11 @@ provideAccordionContext({
145147

146148
<template>
147149
<Primitive
148-
:ref="forwardedRef"
150+
:ref="forwardElement"
149151
:data-orientation="orientation"
150152
data-root
151153
v-bind="{
152-
onKeydown: props.disabled ? undefined : handleKeydown,
154+
onKeydown: props.disabled ? undefined : onKeydown,
153155
}"
154156
>
155157
<slot />

‎packages/vue-primitives/src/accordion/AccordionTrigger.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import { shallowRef } from 'vue'
33
import { CollapsibleTrigger } from '../collapsible/index.ts'
44
import { ITEM_DATA_ATTR } from '../collection/Collection.ts'
5-
import { forwardRef } from '../utils/vue.ts'
5+
import { useForwardElement } from '../hooks/index.ts'
66
import { Collection, useAccordionContext } from './AccordionRoot.ts'
77
import { useAccordionItemContext } from './AccordionItem.ts'
88
@@ -11,7 +11,7 @@ defineOptions({
1111
})
1212
1313
const $el = shallowRef<HTMLButtonElement>()
14-
const forwardedRef = forwardRef($el)
14+
const forwardElement = useForwardElement($el)
1515
1616
Collection.useCollectionItem($el, undefined)
1717
@@ -22,7 +22,7 @@ const itemContext = useAccordionItemContext('AccordionHeader')
2222
<template>
2323
<CollapsibleTrigger
2424
:id="itemContext.triggerId()"
25-
:ref="forwardedRef"
25+
:ref="forwardElement"
2626
:aria-disabled="(itemContext.open.value && !accordionContext.collapsible) || undefined"
2727
:data-orientation="accordionContext.orientation"
2828
:[ITEM_DATA_ATTR]="true"

‎packages/vue-primitives/src/aspect-ratio/AspectRatio.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<script setup lang="ts">
22
import { shallowRef } from 'vue'
33
import { Primitive } from '../primitive/index.ts'
4-
import { forwardRef } from '../utils/vue.ts'
4+
import { useForwardElement } from '../hooks/index.ts'
55
import type { AspectRatioProps } from './AspectRatio.ts'
66
77
defineOptions({
@@ -14,7 +14,7 @@ withDefaults(defineProps<AspectRatioProps>(), {
1414
})
1515
1616
const $el = shallowRef<HTMLElement>()
17-
const forwardedRef = forwardRef($el)
17+
const forwardElement = useForwardElement($el)
1818
1919
defineExpose({
2020
$el,
@@ -33,7 +33,7 @@ defineExpose({
3333
data-radix-aspect-ratio-wrapper=""
3434
>
3535
<Primitive
36-
:ref="forwardedRef"
36+
:ref="forwardElement"
3737
v-bind="$attrs"
3838
:style="{
3939
// ensures children expand in ratio

‎packages/vue-primitives/src/checkbox/CheckboxIndicator.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import { shallowRef } from 'vue'
33
import { usePresence } from '../presence/index.ts'
44
import { Primitive } from '../primitive/index.ts'
5-
import { forwardRef } from '../utils/vue.ts'
5+
import { useForwardElement } from '../hooks/index.ts'
66
import { useCheckboxContext } from './CheckboxRoot.ts'
77
import type { CheckboxIndicatorProps } from './CheckboxIndicator.ts'
88
import { getState, isIndeterminate } from './utils.ts'
@@ -15,7 +15,7 @@ const props = withDefaults(defineProps<CheckboxIndicatorProps>(), {
1515
as: 'span',
1616
})
1717
const $el = shallowRef<HTMLElement>()
18-
const forwardedRef = forwardRef($el)
18+
const forwardElement = useForwardElement($el)
1919
2020
const context = useCheckboxContext('CheckboxIndicator')
2121
@@ -25,7 +25,7 @@ const isPresent = usePresence($el, () => props.forceMount || isIndeterminate(con
2525
<template>
2626
<Primitive
2727
v-if="isPresent"
28-
:ref="forwardedRef"
28+
:ref="forwardElement"
2929
:as="as"
3030
:data-state="getState(context.state.value)"
3131
:data-disabled="context.disabled() ? '' : undefined"

‎packages/vue-primitives/src/checkbox/CheckboxRoot.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<script setup lang="ts">
22
import { computed, shallowRef, useAttrs, watchEffect } from 'vue'
3-
import { useControllableState } from '../hooks/index.ts'
3+
import { useControllableState, useForwardElement } from '../hooks/index.ts'
44
import { Primitive } from '../primitive/index.ts'
5-
import { composeEventHandlers, forwardRef } from '../utils/vue.ts'
5+
import { composeEventHandlers } from '../utils/vue.ts'
66
import { type CheckboxRootEmits, type CheckboxRootProps, type ClickEvent, provideCheckboxContext } from './CheckboxRoot.ts'
77
import { getState, isIndeterminate } from './utils.ts'
88
import BubbleInput from './BubbleInput.vue'
@@ -20,7 +20,7 @@ const props = withDefaults(defineProps<CheckboxRootProps>(), {
2020
const emit = defineEmits<CheckboxRootEmits>()
2121
const attrs = useAttrs()
2222
const $el = shallowRef<HTMLButtonElement>()
23-
const forwardedRef = forwardRef($el)
23+
const forwardElement = useForwardElement($el)
2424
2525
const hasConsumerStoppedPropagation = shallowRef(false)
2626
// We set this to true by default so that events bubble to forms without JS (SSR)
@@ -88,7 +88,7 @@ defineExpose({
8888

8989
<template>
9090
<Primitive
91-
:ref="forwardedRef"
91+
:ref="forwardElement"
9292
:as="as"
9393
type="button"
9494
role="checkbox"

‎packages/vue-primitives/src/collapsible/CollapsibleContent.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import { computed, nextTick, onMounted, shallowRef } from 'vue'
33
import { Primitive } from '../primitive/index.ts'
44
import { usePresence } from '../presence/usePresence.ts'
5-
import { forwardRef } from '../utils/vue.ts'
5+
import { useForwardElement } from '../hooks/index.ts'
66
import type { CollapsibleContentProps } from './CollapsibleContent.ts'
77
import { useCollapsibleContext } from './CollapsibleRoot.ts'
88
import { getState } from './utils.ts'
@@ -13,7 +13,7 @@ defineOptions({
1313
1414
const props = defineProps<CollapsibleContentProps>()
1515
const $el = shallowRef<HTMLElement>()
16-
const forwardedRef = forwardRef($el)
16+
const forwardElement = useForwardElement($el)
1717
1818
const context = useCollapsibleContext('CollapsibleContent')
1919
@@ -82,7 +82,7 @@ onMounted(async () => {
8282
<template>
8383
<Primitive
8484
:id="context.contentId"
85-
:ref="forwardedRef"
85+
:ref="forwardElement"
8686
:data-state="getState(context.open.value)"
8787
:data-disabled="context.disabled() ? '' : undefined"
8888
:hidden="!isOpen"

‎packages/vue-primitives/src/collection/Collection.ts‎

Lines changed: 17 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
1-
import { type Ref, type ShallowReactive, type ShallowRef, shallowReactive, watchEffect } from 'vue'
2-
import { createContext } from '../hooks/index.ts'
1+
import { type Ref, type ShallowReactive, shallowReactive, watchEffect } from 'vue'
2+
import { type MutableRefObject, createContext } from '../hooks/index.ts'
33

44
export const ITEM_DATA_ATTR = 'data-radix-collection-item'
55

66
export interface CollectionContext<ItemElement extends HTMLElement, ItemData = object> {
7-
collectionRef: ShallowRef<HTMLElement | undefined>
7+
collectionRef: MutableRefObject<HTMLElement | undefined>
88
itemMap: ShallowReactive<Map<ItemElement, { ref: ItemElement, attrs: ItemData }>>
99
}
1010

1111
export function createCollection<ItemElement extends HTMLElement, ItemData = object>(name: string) {
1212
const [_provideCollectionContext, useCollectionContext] = createContext<CollectionContext<ItemElement, ItemData>>(`${name}CollectionProvider`)
1313

14-
function provideCollectionContext(collectionRef: ShallowRef<HTMLElement | undefined>, provide = true) {
14+
function provideCollectionContext(collectionRef: MutableRefObject<HTMLElement | undefined>, provide = true) {
1515
// TODO: array ItemElement & {_attrs: {}}?
1616
const itemMap = shallowReactive(new Map<ItemElement, { ref: ItemElement, attrs: ItemData }>())
1717

@@ -75,17 +75,17 @@ export function createCollection<ItemElement extends HTMLElement, ItemData = obj
7575
// })
7676
// })
7777

78-
watchEffect((onClean) => {
78+
watchEffect((onCleanup) => {
7979
const unrefElement = currentElement.value
8080
if (!unrefElement)
8181
return
8282

8383
itemMap.set(unrefElement, {
8484
ref: unrefElement,
85-
attrs: attrs as ItemData,
85+
attrs,
8686
})
8787

88-
onClean(() => {
88+
onCleanup(() => {
8989
itemMap.delete(unrefElement)
9090
})
9191
})
@@ -98,8 +98,8 @@ export function createCollection<ItemElement extends HTMLElement, ItemData = obj
9898
function useCollection(thereContext?: CollectionContext<ItemElement, ItemData>) {
9999
const context = thereContext || useCollectionContext(`${name}CollectionConsumer`)
100100

101-
const getItems = () => {
102-
const collectionNode = context.collectionRef.value
101+
function getItems() {
102+
const collectionNode = context.collectionRef.current
103103
if (!collectionNode)
104104
return []
105105

@@ -115,5 +115,12 @@ export function createCollection<ItemElement extends HTMLElement, ItemData = obj
115115
return getItems
116116
}
117117

118-
return [{ provideCollectionContext, useCollectionContext, useCollectionItem }, useCollection] as const
118+
return [
119+
{
120+
provideCollectionContext,
121+
useCollectionContext,
122+
useCollectionItem,
123+
},
124+
useCollection,
125+
] as const
119126
}

0 commit comments

Comments
 (0)