feat: toast

.github/workflows/release-tag.yml

@@ -5,6 +5,7 @@ on:
       - 'titlebar*'
       - 'contextmenu*'
       - 'notification*'
+      - 'toast*'
 
 name: Create Release
 

README.md

@@ -15,6 +15,7 @@
 | [@electron-uikit/contextmenu](packages/contextmenu)   | Context menu            | [![contextmenu version](https://img.shields.io/npm/v/@electron-uikit/contextmenu.svg?label=%20)](packages/contextmenu/CHANGELOG.md)    |
 | [@electron-uikit/notification](packages/notification) | Notification            | [![notification version](https://img.shields.io/npm/v/@electron-uikit/notification.svg?label=%20)](packages/notification/CHANGELOG.md) |
 | [@electron-uikit/titlebar](packages/titlebar)         | Title bar web component | [![titlebar version](https://img.shields.io/npm/v/@electron-uikit/titlebar.svg?label=%20)](packages/titlebar/CHANGELOG.md)             |
+| [@electron-uikit/toast](packages/toast)               | Toast                   | [![toast version](https://img.shields.io/npm/v/@electron-uikit/toast.svg?label=%20)](packages/toast/CHANGELOG.md)                      |
 
 ## License
 

package.json

@@ -15,7 +15,8 @@
     "build:core": "pnpm run -C packages/core build",
     "build:contextmenu": "pnpm run -C packages/contextmenu build",
     "build:notification": "pnpm run -C packages/notification build",
-    "build:titlebar": "pnpm run -C packages/titlebar build"
+    "build:titlebar": "pnpm run -C packages/titlebar build",
+    "build:toast": "pnpm run -C packages/toast build"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^26.0.1",

packages/playground/package.json

@@ -11,7 +11,8 @@
     "@electron-uikit/contextmenu": "workspace:^",
     "@electron-uikit/core": "workspace:^",
     "@electron-uikit/notification": "workspace:^",
-    "@electron-uikit/titlebar": "workspace:^"
+    "@electron-uikit/titlebar": "workspace:^",
+    "@electron-uikit/toast": "workspace:^"
   },
   "devDependencies": {
     "electron-vite": "^2.2.0",

packages/playground/src/main/index.ts

@@ -11,6 +11,7 @@ import {
   registerTitleBarListener,
   attachTitleBarToWindow
 } from '@electron-uikit/titlebar'
+import { Toast } from '@electron-uikit/toast'
 
 function createWindow(): void {
   const mainWindow = new BrowserWindow({
@@ -85,6 +86,15 @@ app.whenReady().then(() => {
     return nativeTheme.shouldUseDarkColors
   })
 
+  ipcMain.on('toast:loading', (e) => {
+    const win = BrowserWindow.fromWebContents(e.sender)
+    if (win) {
+      const toast = new Toast(win)
+      const reply = toast.loading('Downloading')
+      setTimeout(() => reply.dismiss(), 3000)
+    }
+  })
+
   app.on('activate', function () {
     if (BrowserWindow.getAllWindows().length === 0) createWindow()
   })

packages/playground/src/renderer/src/index.ts

@@ -1,7 +1,12 @@
 import { Menu, MenuItem } from '@electron-uikit/contextmenu/renderer'
 import { notification } from '@electron-uikit/notification/renderer'
+import { toast } from '@electron-uikit/toast/renderer'
 
 function init(): void {
+  toast.config({
+    supportMain: true,
+    bottom: 80
+  })
   window.addEventListener('DOMContentLoaded', () => {
     const theme = document.getElementById('theme')
     const icon = document.getElementById('icon')
@@ -33,11 +38,26 @@ function init(): void {
       menu.append(new MenuItem({ type: 'separator' }))
       menu.append(
         new MenuItem({
-          type: 'checkbox',
-          label: 'Menu Item Two',
-          checked: true,
+          label: 'Show Text Toast',
+          click: (): void => {
+            toast.text('I am toast', 4000)
+          }
+        })
+      )
+      menu.append(
+        new MenuItem({
+          label: 'Show Loading Toast',
+          click: (): void => {
+            const reply = toast.loading('Loading')
+            setTimeout(() => reply.success('Done'), 3000000)
+          }
+        })
+      )
+      menu.append(
+        new MenuItem({
+          label: 'Show Loading Toast (Main Process)',
           click: (): void => {
-            console.log('menu item two')
+            window.uikit.ipcRenderer.send('toast:loading')
           }
         })
       )

packages/toast/README.md

@@ -0,0 +1,150 @@
+# @electron-uikit/toast
+
+![toast version](https://img.shields.io/npm/v/@electron-uikit/toast.svg?color=orange&label=version)
+
+Toast for Electron app.
+
+Toast is a concise, non-modal notification method that is used to briefly display information on the user interface without interrupting the user's current operation. It is widely used in mobile operating systems such as Android and iOS to provide quick feedback and important prompt information. Through toast notifications, developers can improve user experience and effectively communicate application status changes.
+
+<p align='center'>
+  <img src='./screenshots/toast.png' width='580' />
+</p>
+
+## Usage
+
+### Install
+
+```sh
+npm i @electron-uikit/core @electron-uikit/toast
+```
+
+### Get Started
+
+#### Using the toast in the renderer process.
+
+```js
+import { toast } from '@electron-uikit/toast/renderer'
+
+toast.text('foo')
+toast.loading('loading')
+```
+
+#### Using the toast in the main process.
+
+1. Exposes the UI Kit APIs for components. See [@electron-uikit/core](https://github.com/alex8088/electron-uikit/tree/main/packages/core) guide for more details.
+
+   You can expose it in the specified preload script:
+
+   ```js
+   import { exposeUIKit } from '@electron-uikit/core/preload'
+
+   exposeUIKit()
+   ```
+
+   Or, you can expose it globally in the main process for all renderer processes:
+
+   ```js
+   import { useUIKit } from '@electron-uikit/core/main'
+
+   useUIKit()
+   ```
+
+> [!NOTE]
+> If you are using [@electron-toolkit/preload](https://github.com/alex8088/electron-toolkit/tree/master/packages/preload) to expose Electron APIs, there is no need to use this module, because `core` is also an export of it.
+
+2. Register a listener in the renderer process, so that you can use it in the main process.
+
+   ```js
+   import { toast } from '@electron-uikit/toast/renderer'
+
+   toast.config({
+     supportMain: true
+   })
+   ```
+
+3. Use the notification in the main process.
+
+   ```js
+   import { BrowserWindow } from 'electron'
+   import { Toast } from '@electron-uikit/toast'
+
+   const win = new BrowserWindow()
+
+   const toast = new Toast(win)
+   toast.text('foo')
+   toast.loading('loading')
+   ```
+
+## APIs
+
+> [!NOTE]
+> To use Toast in the main process, you need to create a Toast instance of the specified window.
+
+### `.config(options)`
+
+Configure toast defaults or customize toast. Can only be used in the renderer process.
+
+- options: `object`
+
+  - **container**: `HTMLElement` (optional) - Container element of Toast. Default to `document.body`.
+  - **duration**: `number` (optional) - Display duration in millisecond. If set to `0`, it will not turn off automatically. Default to `2000`.
+  - **customClass**: `string` (optional) - Custom CSS class name for toast.
+  - **bottom**: `number` (optional) - Toast position to the bottom. Default to `50`.
+  - **maxWidth**: `number` (optional) - The maximum width of toast. Default to `320`.
+  - **color**: `string` (optional) - Toast background color.
+  - **textColor**: `string` (optional) - Toast text color.
+  - **fontSize**: `number` (optional) - Toast font size. Default to `14`.
+  - **iconSize**: `number` (optional) - Toast icon size. Default to `20`.
+  - **supportMain**: `boolean` (optional) - Support Electron main process. Default to `false`.
+
+### `.text(text[, duration])`
+
+Show text. The default duration is `2000` ms.
+
+### `.loading(text[, duration])`
+
+Show loading. The default duration is 0, which means it is always displayed and can be turned off by calling its return value function.
+
+```js
+import { toast } from '@electron-uikit/toast/renderer'
+
+const reply = toast.loading('Loading')
+
+setTimeout(() => {
+  reply.success('Successful')
+  // reply.fail('Failed')
+  // reply.dismiss()
+}, 3000)
+```
+
+## Customization
+
+1. Customize using CSS classes
+
+```css
+.toast {
+  --toast-bottom: 50px;
+  --toast-z-index: 5001;
+  --toast-color: #48484e;
+  --toast-text-color: #ffffffd1;
+  --toast-font-size: 14px;
+  --toast-font-family: -apple-system, BlinkMacSystemFont, Ubuntu, 'Segoe UI';
+  --toast-icon-size: 20px;
+  --toast-max-width: 320px;
+}
+```
+
+```js
+toast.config({
+  customClass: 'toast'
+})
+```
+
+2.  Customize using `config` API
+
+```js
+toast.config({
+  bottom: 200,
+  maxWidth: 280
+})
+```

packages/toast/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "@electron-uikit/toast",
+  "version": "0.0.0",
+  "description": "Toast for Electron app.",
+  "main": "dist/main.cjs",
+  "module": "dist/main.mjs",
+  "types": "dist/main.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/main.d.ts",
+      "import": "./dist/main.mjs",
+      "require": "./dist/main.cjs"
+    },
+    "./main": {
+      "types": "./dist/main.d.ts",
+      "import": "./dist/main.mjs",
+      "require": "./dist/main.cjs"
+    },
+    "./renderer": {
+      "types": "./dist/renderer.d.ts",
+      "import": "./dist/renderer.mjs"
+    }
+  },
+  "typesVersions": {
+    "*": {
+      "main": [
+        "./dist/main.d.ts"
+      ],
+      "renderer": [
+        "./dist/renderer.d.ts"
+      ]
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "author": "Alex Wei<https://github.com/alex8088>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/alex8088/electron-uikit.git",
+    "directory": "packages/toast"
+  },
+  "bugs": {
+    "url": "https://github.com/alex8088/electron-uikit/issues"
+  },
+  "homepage": "https://github.com/alex8088/electron-uikit/tree/master/packages/toast#readme",
+  "keywords": [
+    "electron",
+    "toast"
+  ],
+  "scripts": {
+    "build": "rollup -c rollup.config.ts --configPlugin typescript"
+  },
+  "peerDependencies": {
+    "@electron-uikit/core": "*",
+    "electron": ">=15.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@electron-uikit/core": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@electron-uikit/core": "workspace:^"
+  }
+}

packages/toast/rollup.config.ts

@@ -0,0 +1,67 @@
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+import { defineConfig } from 'rollup'
+import resolve from '@rollup/plugin-node-resolve'
+import commonjs from '@rollup/plugin-commonjs'
+import ts from '@rollup/plugin-typescript'
+import dts from 'rollup-plugin-dts'
+import rm from 'rollup-plugin-rm'
+
+export default defineConfig([
+  {
+    input: ['src/main.ts'],
+    output: [
+      {
+        entryFileNames: '[name].cjs',
+        chunkFileNames: 'chunks/lib-[hash].cjs',
+        format: 'cjs',
+        dir: 'dist'
+      },
+      {
+        entryFileNames: '[name].mjs',
+        chunkFileNames: 'chunks/lib-[hash].mjs',
+        format: 'es',
+        dir: 'dist'
+      }
+    ],
+    external: ['electron'],
+    plugins: [
+      resolve(),
+      commonjs(),
+      ts({
+        compilerOptions: {
+          rootDir: 'src',
+          declaration: true,
+          outDir: 'dist/types'
+        }
+      }),
+      rm('dist', 'buildStart')
+    ]
+  },
+  {
+    input: ['src/renderer.ts'],
+    output: [
+      { file: './dist/renderer.mjs', format: 'es' },
+      { name: 'renderer', file: './dist/renderer.js', format: 'iife' }
+    ],
+    plugins: [
+      ts({
+        compilerOptions: {
+          rootDir: 'src',
+          declaration: true,
+          outDir: 'dist/types'
+        }
+      })
+    ]
+  },
+  {
+    input: ['dist/types/main.d.ts'],
+    output: [{ file: './dist/main.d.ts', format: 'es' }],
+    plugins: [dts()],
+    external: ['electron']
+  },
+  {
+    input: ['dist/types/renderer.d.ts'],
+    output: [{ file: './dist/renderer.d.ts', format: 'es' }],
+    plugins: [dts(), rm('dist/types', 'buildEnd')]
+  }
+])

packages/toast/src/common.ts

@@ -0,0 +1,4 @@
+import type { UIKitAPI } from '@electron-uikit/core'
+
+export const core = ((globalThis || window).uikit ||
+  (globalThis || window).electron) as UIKitAPI

packages/toast/src/constants.ts

@@ -0,0 +1 @@
+export const TOAST_CHANNEL = 'uikit:toast'