├── .gitignore ├── README.md ├── index.html ├── package.json ├── public └── favicon.ico ├── src ├── assets │ └── svelte.png ├── lib.ts ├── lib │ ├── index.ts │ └── mail-me.svelte └── vite-env.d.ts ├── svelte.config.js ├── tsconfig.json ├── vite.config.js ├── vite.lib.config.js └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /dist/ 3 | /.vscode/ 4 | .DS_Store 5 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # `mail3-me-button` 2 | 3 | `mail3-me-button` provides a simple way to interact with [Mail3 App](https://app.mail3.me). 4 | 5 | ## Usage 6 | 7 | `mail3-me-button` is a [Web Component](https://developer.mozilla.org/en-US/docs/Web/Web_Components), Just like an HTML element, `mail3-me-button` has some built-in attributes: 8 | 9 | * `to(string)`: an email address as the mail receiver; when provided, the widget displays the number of unread messages between this address and the currently logged-in mailbox in Mail3 app, otherwise it displays the number of all unread messages. 10 | * `lite(boolean)`: in lite mode, `mail3-me-button` will be displayed as a circular Icon without text. 11 | * `variant(string)`: Some default style set for `mail3-me-button`, optionally one of `solid`, `outline`, `ghost`, default is `solid` 12 | * `icon_type(string)`: Icon type for Mail3 Icon, optionally one of `black`, `white`, `light`, `solid`, default is `solid` 13 | * `icon_style(string)`: CSS style for Mail3 Icon 14 | 15 | In addition to the above built-in attributes, `mail3-me-button` also supports passing in all the attributes of [the anchor element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a), such as `style`, `target`, etc. 16 | 17 | ### HTML 18 | 19 | [Live demo](https://stackblitz.com/edit/mail3-me?file=index.html) 20 | 21 | After adding the `mail3-me-button` script, you can use it like an HTML element. 22 | 23 | ```html 24 | 25 | 26 | 27 | Mail3 Me Button Demo 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | ``` 38 | 39 | ### React 40 | 41 | [Live demo](https://stackblitz.com/edit/mail3-me-react?file=src%2Fstyle.css,src%2FApp.js,src%2Findex.js) 42 | 43 | Install `mail3-me-button`: 44 | 45 | ```bash 46 | $ npm i @mail3/mail3-me 47 | # or yarn 48 | $ yarn add @mail3/mail3-me 49 | ``` 50 | 51 | Import the dependency in the entry file of your application: 52 | 53 | ```js 54 | // app.js 55 | // only 3KiB gziped 56 | import '@mail3/mail3-me' 57 | ``` 58 | 59 | Use `mail3-me-button` like an HTML Element: 60 | 61 | ```jsx 62 | 63 | 64 | 65 | 66 | ``` 67 | 68 | #### Caveats 69 | 70 | The `style` attribute is replaced by the `css` attribute, and all custom style attribute should pass in a `string` type instead of `Object`. 71 | 72 | ```jsx 73 | 74 | 75 | 76 | 77 | ``` 78 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Mail Me Button 9 | 10 | 11 | 12 | 33 | 34 | 35 |
36 |

Default

37 | 38 |

Attribute: lite

39 |
40 | 41 |
42 |

Attribute: variant

43 |
44 | 45 | 46 | 47 |
48 |

Attribute: icon_type

49 |
50 | 51 | 52 | 53 | 54 |
55 |

Custom Style

56 |
57 | 62 | 63 |
64 |
65 | 66 | 67 | 68 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@mail3/mail3-me", 3 | "version": "0.1.5", 4 | "type": "module", 5 | "license": "MIT", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build -c vite.lib.config.js", 9 | "preview": "vite preview", 10 | "check": "svelte-check --tsconfig ./tsconfig.json" 11 | }, 12 | "files": [ 13 | "dist", 14 | "src" 15 | ], 16 | "module": "dist/mail3-me.es.js", 17 | "main": "dist/mail3-me.umd.js", 18 | "unpkg": "dist/mail3-me.umd.js", 19 | "devDependencies": { 20 | "@sveltejs/vite-plugin-svelte": "^1.0.0-next.30", 21 | "@tsconfig/svelte": "^2.0.1", 22 | "svelte": "^3.44.0", 23 | "svelte-check": "^2.2.7", 24 | "svelte-preprocess": "^4.9.8", 25 | "tslib": "^2.3.1", 26 | "typescript": "^4.4.4", 27 | "vite": "^2.7.2" 28 | }, 29 | "publishConfig": { 30 | "access": "public" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mail3protocol/mail3-me-button/d17253d4572caaa731ba8473b107e68cea51008c/public/favicon.ico -------------------------------------------------------------------------------- /src/assets/svelte.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mail3protocol/mail3-me-button/d17253d4572caaa731ba8473b107e68cea51008c/src/assets/svelte.png -------------------------------------------------------------------------------- /src/lib.ts: -------------------------------------------------------------------------------- 1 | export * from './lib/mail-me.svelte' -------------------------------------------------------------------------------- /src/lib/index.ts: -------------------------------------------------------------------------------- 1 | export * from './mail-me.svelte' -------------------------------------------------------------------------------- /src/lib/mail-me.svelte: -------------------------------------------------------------------------------- 1 | 2 | 3 | 41 | 42 | 57 |
58 |
59 | {text} 60 | {#if count > 0} 61 | {displayCount} 64 | {/if} 65 |
66 | {#if !isLite} 67 | {text} 68 | {/if} 69 |
70 | 71 | {#if count === -1} 72 |