feat(components): [Toast] implements

Author: teleskop150750

README.md

@@ -55,7 +55,7 @@ Enter the component you want most in the components, leave the emojis and follow
 | [Slider](https://vue-primitives.netlify.app/?path=/story/components-slider--styled)           | ✓      |
 | [Switch](https://vue-primitives.netlify.app/?path=/story/components-switch--styled)           | ✓      |
 | [Tabs](https://vue-primitives.netlify.app/?path=/story/components-tabs--styled)               | ✓      |
-| Toast                                                                                         | 🚧      |
+| [Toast](https://vue-primitives.netlify.app/?path=/story/components-toast--styled)             | ✓      |
 | [ToggleGroup](https://vue-primitives.netlify.app/?path=/story/components-togglegroup--single) | ✓      |
 | [Toggle](https://vue-primitives.netlify.app/?path=/story/components-toggle--styled)           | ✓      |
 | [Toolbar](https://vue-primitives.netlify.app/?path=/story/components-toolbar--styled)         | ✓      |

package.json

@@ -2,7 +2,7 @@
   "name": "@teleskop150750/primitives-monorepo",
   "type": "module",
   "private": true,
-  "packageManager": "pnpm@9.7.1",
+  "packageManager": "pnpm@9.9.0",
   "engines": {
     "node": ">=18"
   },
@@ -15,9 +15,9 @@
     "root-lint:fix": "eslint . --fix"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^2.26.0",
+    "@antfu/eslint-config": "^3.0.0",
     "@teleskop150750/typescript-config": "workspace:*",
-    "@types/node": "^20.14.10",
+    "@types/node": "^20.16.2",
     "eslint": "npm:[email protected]",
     "eslint-ts-patch": "9.4.0-0",
     "prettier": "^3.3.3",

packages/vue-primitives/package.json

@@ -99,12 +99,12 @@
     "@storybook/vue3-vite": "^8.2.9",
     "@tsconfig/node20": "^20.1.4",
     "@types/jsdom": "^21.1.7",
-    "@types/node": "^20.14.10",
-    "@vitejs/plugin-vue": "^5.1.2",
+    "@types/node": "^20.16.2",
+    "@vitejs/plugin-vue": "^5.1.3",
     "@vitejs/plugin-vue-jsx": "^4.0.1",
     "@vue/test-utils": "^2.4.6",
-    "@vueuse/core": "^11.0.1",
-    "jsdom": "^24.1.1",
+    "@vueuse/core": "^11.0.3",
+    "jsdom": "^25.0.0",
     "npm-run-all2": "^6.2.2",
     "storybook": "^8.2.9",
     "unbuild": "^2.0.0",
@@ -113,6 +113,6 @@
     "vite-plugin-externalize-deps": "^0.8.0",
     "vitest": "^2.0.5",
     "vue": "^3.4.38",
-    "vue-tsc": "^2.0.29"
+    "vue-tsc": "^2.1.2"
   }
 }

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

@@ -1,9 +1,9 @@
 <script setup lang="ts" generic="T extends AccordionType">
-import { computed, shallowRef } from 'vue'
+import { computed } from 'vue'
 import { useDirection } from '../direction/Direction.ts'
-import { useControllableState, useId } from '../hooks/index.ts'
+import { useControllableState, useForwardElement, useId, useRef } from '../hooks/index.ts'
 import { Primitive } from '../primitive/index.ts'
-import { composeEventHandlers, forwardRef } from '../utils/vue.ts'
+import { composeEventHandlers } from '../utils/vue.ts'
 import { arrayify } from '../utils/array.ts'
 import { ACCORDION_KEYS, type AccordionRootEmits, type AccordionRootProps, type AccordionType, Collection, provideAccordionContext, useCollection } from './AccordionRoot.ts'
 
@@ -22,16 +22,18 @@ const props = withDefaults(defineProps<AccordionRootProps<T>>(), {
 })
 const emit = defineEmits<AccordionRootEmits<T>>()
 
-const $el = shallowRef<HTMLElement>()
-const forwardedRef = forwardRef($el)
+const $el = useRef<HTMLElement>()
+const forwardElement = useForwardElement($el)
 
 const direction = useDirection(() => props.dir)
 const value = useControllableState(props, v => emit('update:value', v as Value), 'value', props.defaultValue)
 const TYPE_SINGLE = 'single' as const satisfies AccordionType
 
 const collectionContext = Collection.provideCollectionContext($el)
+
 const getItems = useCollection(collectionContext)
-const handleKeydown = composeEventHandlers<KeyboardEvent>((event) => {
+
+const onKeydown = composeEventHandlers<KeyboardEvent>((event) => {
   emit('keydown', event)
 }, (event) => {
   if (!ACCORDION_KEYS.includes(event.key))
@@ -145,11 +147,11 @@ provideAccordionContext({
 
 <template>
   <Primitive
-    :ref="forwardedRef"
+    :ref="forwardElement"
     :data-orientation="orientation"
     data-root
     v-bind="{
-      onKeydown: props.disabled ? undefined : handleKeydown,
+      onKeydown: props.disabled ? undefined : onKeydown,
     }"
   >
     <slot />

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

@@ -2,7 +2,7 @@
 import { shallowRef } from 'vue'
 import { CollapsibleTrigger } from '../collapsible/index.ts'
 import { ITEM_DATA_ATTR } from '../collection/Collection.ts'
-import { forwardRef } from '../utils/vue.ts'
+import { useForwardElement } from '../hooks/index.ts'
 import { Collection, useAccordionContext } from './AccordionRoot.ts'
 import { useAccordionItemContext } from './AccordionItem.ts'
 
@@ -11,7 +11,7 @@ defineOptions({
 })
 
 const $el = shallowRef<HTMLButtonElement>()
-const forwardedRef = forwardRef($el)
+const forwardElement = useForwardElement($el)
 
 Collection.useCollectionItem($el, undefined)
 
@@ -22,7 +22,7 @@ const itemContext = useAccordionItemContext('AccordionHeader')
 <template>
   <CollapsibleTrigger
     :id="itemContext.triggerId()"
-    :ref="forwardedRef"
+    :ref="forwardElement"
     :aria-disabled="(itemContext.open.value && !accordionContext.collapsible) || undefined"
     :data-orientation="accordionContext.orientation"
     :[ITEM_DATA_ATTR]="true"

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { shallowRef } from 'vue'
 import { Primitive } from '../primitive/index.ts'
-import { forwardRef } from '../utils/vue.ts'
+import { useForwardElement } from '../hooks/index.ts'
 import type { AspectRatioProps } from './AspectRatio.ts'
 
 defineOptions({
@@ -14,7 +14,7 @@ withDefaults(defineProps<AspectRatioProps>(), {
 })
 
 const $el = shallowRef<HTMLElement>()
-const forwardedRef = forwardRef($el)
+const forwardElement = useForwardElement($el)
 
 defineExpose({
   $el,
@@ -33,7 +33,7 @@ defineExpose({
     data-radix-aspect-ratio-wrapper=""
   >
     <Primitive
-      :ref="forwardedRef"
+      :ref="forwardElement"
       v-bind="$attrs"
       :style="{
         // ensures children expand in ratio

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

@@ -2,7 +2,7 @@
 import { shallowRef } from 'vue'
 import { usePresence } from '../presence/index.ts'
 import { Primitive } from '../primitive/index.ts'
-import { forwardRef } from '../utils/vue.ts'
+import { useForwardElement } from '../hooks/index.ts'
 import { useCheckboxContext } from './CheckboxRoot.ts'
 import type { CheckboxIndicatorProps } from './CheckboxIndicator.ts'
 import { getState, isIndeterminate } from './utils.ts'
@@ -15,7 +15,7 @@ const props = withDefaults(defineProps<CheckboxIndicatorProps>(), {
   as: 'span',
 })
 const $el = shallowRef<HTMLElement>()
-const forwardedRef = forwardRef($el)
+const forwardElement = useForwardElement($el)
 
 const context = useCheckboxContext('CheckboxIndicator')
 
@@ -25,7 +25,7 @@ const isPresent = usePresence($el, () => props.forceMount || isIndeterminate(con
 <template>
   <Primitive
     v-if="isPresent"
-    :ref="forwardedRef"
+    :ref="forwardElement"
     :as="as"
     :data-state="getState(context.state.value)"
     :data-disabled="context.disabled() ? '' : undefined"

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

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { computed, shallowRef, useAttrs, watchEffect } from 'vue'
-import { useControllableState } from '../hooks/index.ts'
+import { useControllableState, useForwardElement } from '../hooks/index.ts'
 import { Primitive } from '../primitive/index.ts'
-import { composeEventHandlers, forwardRef } from '../utils/vue.ts'
+import { composeEventHandlers } from '../utils/vue.ts'
 import { type CheckboxRootEmits, type CheckboxRootProps, type ClickEvent, provideCheckboxContext } from './CheckboxRoot.ts'
 import { getState, isIndeterminate } from './utils.ts'
 import BubbleInput from './BubbleInput.vue'
@@ -20,7 +20,7 @@ const props = withDefaults(defineProps<CheckboxRootProps>(), {
 const emit = defineEmits<CheckboxRootEmits>()
 const attrs = useAttrs()
 const $el = shallowRef<HTMLButtonElement>()
-const forwardedRef = forwardRef($el)
+const forwardElement = useForwardElement($el)
 
 const hasConsumerStoppedPropagation = shallowRef(false)
 // We set this to true by default so that events bubble to forms without JS (SSR)
@@ -88,7 +88,7 @@ defineExpose({
 
 <template>
   <Primitive
-    :ref="forwardedRef"
+    :ref="forwardElement"
     :as="as"
     type="button"
     role="checkbox"

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

@@ -2,7 +2,7 @@
 import { computed, nextTick, onMounted, shallowRef } from 'vue'
 import { Primitive } from '../primitive/index.ts'
 import { usePresence } from '../presence/usePresence.ts'
-import { forwardRef } from '../utils/vue.ts'
+import { useForwardElement } from '../hooks/index.ts'
 import type { CollapsibleContentProps } from './CollapsibleContent.ts'
 import { useCollapsibleContext } from './CollapsibleRoot.ts'
 import { getState } from './utils.ts'
@@ -13,7 +13,7 @@ defineOptions({
 
 const props = defineProps<CollapsibleContentProps>()
 const $el = shallowRef<HTMLElement>()
-const forwardedRef = forwardRef($el)
+const forwardElement = useForwardElement($el)
 
 const context = useCollapsibleContext('CollapsibleContent')
 
@@ -82,7 +82,7 @@ onMounted(async () => {
 <template>
   <Primitive
     :id="context.contentId"
-    :ref="forwardedRef"
+    :ref="forwardElement"
     :data-state="getState(context.open.value)"
     :data-disabled="context.disabled() ? '' : undefined"
     :hidden="!isOpen"

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

@@ -1,17 +1,17 @@
-import { type Ref, type ShallowReactive, type ShallowRef, shallowReactive, watchEffect } from 'vue'
-import { createContext } from '../hooks/index.ts'
+import { type Ref, type ShallowReactive, shallowReactive, watchEffect } from 'vue'
+import { type MutableRefObject, createContext } from '../hooks/index.ts'
 
 export const ITEM_DATA_ATTR = 'data-radix-collection-item'
 
 export interface CollectionContext<ItemElement extends HTMLElement, ItemData = object> {
-  collectionRef: ShallowRef<HTMLElement | undefined>
+  collectionRef: MutableRefObject<HTMLElement | undefined>
   itemMap: ShallowReactive<Map<ItemElement, { ref: ItemElement, attrs: ItemData }>>
 }
 
 export function createCollection<ItemElement extends HTMLElement, ItemData = object>(name: string) {
   const [_provideCollectionContext, useCollectionContext] = createContext<CollectionContext<ItemElement, ItemData>>(`${name}CollectionProvider`)
 
-  function provideCollectionContext(collectionRef: ShallowRef<HTMLElement | undefined>, provide = true) {
+  function provideCollectionContext(collectionRef: MutableRefObject<HTMLElement | undefined>, provide = true) {
     // TODO: array ItemElement & {_attrs: {}}?
     const itemMap = shallowReactive(new Map<ItemElement, { ref: ItemElement, attrs: ItemData }>())
 
@@ -75,17 +75,17 @@ export function createCollection<ItemElement extends HTMLElement, ItemData = obj
     //   })
     // })
 
-    watchEffect((onClean) => {
+    watchEffect((onCleanup) => {
       const unrefElement = currentElement.value
       if (!unrefElement)
         return
 
       itemMap.set(unrefElement, {
         ref: unrefElement,
-        attrs: attrs as ItemData,
+        attrs,
       })
 
-      onClean(() => {
+      onCleanup(() => {
         itemMap.delete(unrefElement)
       })
     })
@@ -98,8 +98,8 @@ export function createCollection<ItemElement extends HTMLElement, ItemData = obj
   function useCollection(thereContext?: CollectionContext<ItemElement, ItemData>) {
     const context = thereContext || useCollectionContext(`${name}CollectionConsumer`)
 
-    const getItems = () => {
-      const collectionNode = context.collectionRef.value
+    function getItems() {
+      const collectionNode = context.collectionRef.current
       if (!collectionNode)
         return []
 
@@ -115,5 +115,12 @@ export function createCollection<ItemElement extends HTMLElement, ItemData = obj
     return getItems
   }
 
-  return [{ provideCollectionContext, useCollectionContext, useCollectionItem }, useCollection] as const
+  return [
+    {
+      provideCollectionContext,
+      useCollectionContext,
+      useCollectionItem,
+    },
+    useCollection,
+  ] as const
 }