feat(toast): new component

package.json

@@ -64,6 +64,7 @@
     "@oku-ui/slot": "workspace:^",
     "@oku-ui/switch": "workspace:^",
     "@oku-ui/tabs": "workspace:^",
+    "@oku-ui/toast": "workspace:^",
     "@oku-ui/toggle": "workspace:^",
     "@oku-ui/toggle-group": "workspace:^",
     "@oku-ui/toolbar": "workspace:^",

packages/components/dismissable-layer/src/DismissableLayerBranch.ts

@@ -7,10 +7,6 @@ import { defineComponent, h, ref, watchEffect } from 'vue'
 import { useComposedRefs, useForwardRef } from '@oku-ui/use-composable'
 import { DismissableLayerContext } from './DismissableLayer'
 
-/* -------------------------------------------------------------------------------------------------
- * DismissableLayerBranch
- * ----------------------------------------------------------------------------------------------- */
-
 const BRANCH_NAME = 'OkuDismissableLayerBranch'
 export type DismissableLayerBranchNaviteElement = OkuElement<'div'>
 export type DismissableLayerBranchElement = HTMLDivElement

packages/components/toast/README.md

@@ -0,0 +1,13 @@
+# `toast`
+
+<span><a href="https://www.npmjs.com/package/@oku-ui/toast "><img src="https://img.shields.io/npm/v/@oku-ui/toast?style=flat&colorA=18181B&colorB=28CF8D" alt="Version"></a> </span> | <span> <a href="https://www.npmjs.com/package/@oku-ui/toast"> <img src="https://img.shields.io/npm/dm/@oku-ui/toast?style=flat&colorA=18181B&colorB=28CF8D" alt="Downloads"> </a> </span> | <span> <a href="https://oku-ui.com/primitives/components/toast"><img src="https://img.shields.io/badge/Open%20Documentation-18181B" alt="Website"></a> </span>
+
+## Installation
+
+```sh
+$ pnpm add @oku-ui/toast
+```
+
+## Usage
+
+soon docs

packages/components/toast/build.config.ts

@@ -0,0 +1,7 @@
+import { defineBuildConfig } from 'unbuild'
+
+const isClean = (process.env.CLEAN || 'false') === 'true'
+export default defineBuildConfig({
+  declaration: true,
+  clean: isClean,
+})

packages/components/toast/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@oku-ui/toast",
+  "type": "module",
+  "version": "0.2.3",
+  "license": "MIT",
+  "source": "src/index.ts",
+  "funding": "https://github.com/sponsors/productdevbook",
+  "homepage": "https://oku-ui.com/primitives",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/oku-ui/primitives.git",
+    "directory": "packages/components/toast"
+  },
+  "bugs": {
+    "url": "https://github.com/oku-ui/primitives/issues"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs"
+    }
+  },
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "scripts": {
+    "build": "unbuild",
+    "dev": "unbuild --watch"
+  },
+  "peerDependencies": {
+    "vue": "^3.3.0"
+  },
+  "dependencies": {
+    "@oku-ui/collection": "latest",
+    "@oku-ui/dismissable-layer": "latest",
+    "@oku-ui/portal": "latest",
+    "@oku-ui/presence": "latest",
+    "@oku-ui/primitive": "latest",
+    "@oku-ui/provide": "latest",
+    "@oku-ui/use-composable": "latest",
+    "@oku-ui/utils": "latest",
+    "@oku-ui/visually-hidden": "latest"
+  },
+  "devDependencies": {
+    "tsconfig": "workspace:^"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

packages/components/toast/src/index.ts

@@ -0,0 +1,80 @@
+export { OkuToast } from './toast'
+export { OkuToastAction } from './toast-action'
+export { OkuToastAnnounce } from './toast-announce'
+export { OkuToastAnnounceExclude } from './toast-announce-exclude'
+export { OkuToastClose } from './toast-close'
+export { OkuToastDescription } from './toast-description'
+export { OkuToastFocusProxy } from './toast-focus-proxy'
+export { OkuToastImpl } from './toast-impl'
+export { OkuToastProvider } from './toast-provider'
+export { createToastScope } from './share'
+export { OkuToastTitle } from './toast-title'
+export { OkuToastViewport } from './toast-viewport'
+
+export type {
+  ToastProps,
+  ToastElement,
+  ToastNaviteElement,
+  ToastPropsEmits,
+} from './toast'
+
+export type {
+  ToastActionProps,
+  ToastActionElement,
+  ToastActionNaviteElement,
+} from './toast-action'
+
+export type {
+  ToastAnnounceProps,
+  ToastAnnounceElement,
+  ToastAnnounceNaviteElement,
+} from './toast-announce'
+
+export type {
+  ToastAnnounceExcludeProps,
+  ToastAnnounceExcludeElement,
+  ToastAnnounceExcludeNaviteElement,
+} from './toast-announce-exclude'
+
+export type {
+  ToastCloseProps,
+  ToastCloseElement,
+  ToastCloseNaviteElement,
+  ToastCloseEmits,
+} from './toast-close'
+
+export type {
+  ToastDescriptionProps,
+  ToastDescriptionElement,
+  ToastDescriptionNaviteElement,
+} from './toast-description'
+
+export type {
+  FocusProxyProps,
+  FocusProxyElement,
+  FocusProxyPropsEmits,
+  FocusProxyNativeElement,
+} from './toast-focus-proxy'
+
+export type {
+  ToastImplProps,
+  ToastImplElement,
+  ToastImplNaviteElement,
+  ToastImplPrivateEmits,
+} from './toast-impl'
+
+export type {
+  ToastProviderProps,
+} from './toast-provider'
+
+export type {
+  ToastTitleProps,
+  ToastTitleElement,
+  ToastTitleNaviteElement,
+} from './toast-title'
+
+export type {
+  ToastViewportProps,
+  ToastViewportNaviteElement,
+  ToastViewportElement,
+} from './toast-viewport'

packages/components/toast/src/share.ts

@@ -0,0 +1,35 @@
+import { createProvideScope } from '@oku-ui/provide'
+import { createCollection } from '@oku-ui/collection'
+import type { Ref } from 'vue'
+import type { ToastImplElement, ToastImplNaviteElement } from './toast-impl'
+import type { ToastViewportElement } from './toast-viewport'
+
+export const PROVIDER_NAME = 'OkuToastProvider'
+export const TOAST_NAME = 'Toast'
+export type ToastElement = ToastImplElement
+export type ToastNativeElement = ToastImplNaviteElement
+
+export const { CollectionProvider, CollectionSlot, CollectionItemSlot, useCollection, createCollectionScope } = createCollection<ToastElement>('Toast')
+
+export type SwipeDirection = 'up' | 'down' | 'left' | 'right'
+type ToastProviderProvideValue = {
+  label: Ref<string>
+  duration: Ref<number>
+  swipeDirection: Ref<SwipeDirection>
+  swipeThreshold: Ref<number>
+  toastCount: Ref<number>
+  viewport: Ref<ToastViewportElement | null>
+  onViewportChange(viewport: ToastViewportElement): void
+  onToastAdd(): void
+  onToastRemove(): void
+  isFocusedToastEscapeKeyDownRef: Ref<boolean>
+  isClosePausedRef: Ref<boolean>
+}
+
+export const [createToastProvide, createToastScope] = createProvideScope('Toast', [createCollectionScope])
+
+export const [toastProviderProvider, useToastProviderInject] = createToastProvide<ToastProviderProvideValue>(PROVIDER_NAME)
+
+export const [toastInteractiveProvider, useToastInteractiveInject] = createToastProvide(TOAST_NAME, {
+  onClose() { },
+})

packages/components/toast/src/stories/Animated.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { OkuToast, OkuToastClose, OkuToastDescription, OkuToastProvider, OkuToastViewport } from '@oku-ui/toast'
+import type { ToastProviderProps } from '@oku-ui/toast'
+import { ref } from 'vue'
+
+type Direction = ToastProviderProps['swipeDirection']
+
+const swipeDirection = ref<Direction>('right')
+const timerRef = ref(0)
+const open = ref(false)
+
+function handelAnimatedOpen() {
+  open.value = false
+  window.clearTimeout(timerRef.value)
+  timerRef.value = window.setTimeout(() => open.value = true, 150)
+}
+</script>
+
+<template>
+  <OkuToastProvider
+    :swipe-direction="swipeDirection"
+    :swipe-threshold="(['up', 'down'] as Direction[]).includes(swipeDirection) ? 25 : undefined"
+  >
+    <button
+      type="button"
+      class="px-4 py-2 bg-gray-200 hover:bg-gray-300 text-gray-800 text-sm font-medium rounded-md"
+      @click="handelAnimatedOpen"
+    >
+      Open
+    </button>
+
+    <select
+      :value="swipeDirection"
+      @change="(event: any) => swipeDirection = (event.currentTarget.value as Direction)"
+    >
+      <option value="right">
+        Slide right
+      </option>
+      <option value="left">
+        Slide left
+      </option>
+      <option value="up">
+        Slide up
+      </option>
+      <option value="down">
+        Slide down
+      </option>
+    </select>
+    <OkuToast v-model="open" class="toast animated-toast">
+      <OkuToastDescription>Swipe me {{ swipeDirection }}</OkuToastDescription>
+      <OkuToastClose class="button">
+        Dismiss
+      </OkuToastClose>
+    </OkuToast>
+    <OkuToastViewport class="viewport" />
+  </OkuToastProvider>
+</template>
+
+<style lang="postcss">
+@import './toast.css'
+</style>