arthurclemens / dialogic Goto Github PK

View Code? Open in Web Editor NEW

57.0 57.0 1.0 32.62 MB

Dialogic: manage dialogs and notifications

Home Page: https://arthurclemens.github.io/dialogic/

License: MIT License

CSS 4.62% HTML 2.26% JavaScript 16.95% TypeScript 60.89% Svelte 15.27%

dialogs javascript mithriljs notifications reactjs svelte typescript

dialogic's People

Contributors

Stargazers

Watchers

Forkers

tarentino76

dialogic's Issues

sapper example

Is there a working demo with sapper?

Trying to use it with sapper so I modified _layout by adding import and so on, but get an ERR_REQUIRE_ESM error on npm run dev

undoing change to _layout removed error

Unable to load package, missing src folder in dialogic-svelte.

I was trying to give the package a try in Svelte but it appears the npm package is missing the 'src' folder or miss-configured and not trying to use the dist folder.

npm install dialogic-svelte --save-dev

[!] Error: Could not load [...]/node_modules/dialogic-svelte/src/index.js (imported by src/App.svelte): ENOENT: no such file or directory, open '[...]/node_modules/dialogic-svelte/src/index.js'

The error is correct, the src folder isn't there.

dialog isn't accessible via keyboard

I could be wrong; but on the demo page I was unable to use the keyboard to move focus into the dialog or trigger the buttons in the opened dialogs. Keyboard support is a requirement to meet accessibility standards. From what I gather it's also a tricky problem to solve in notification dialogs; which is why I was hoping to find an existing solution 😅

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Warning

These dependencies are deprecated:

Datasource	Name	Replacement PR?
npm	`@types/rollup`
npm	`npm-run-all`

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

Detected dependencies

github-actions

.github/workflows/main.yml

actions/checkout v3

actions/setup-node v3

actions/cache v3

actions/checkout v3

actions/setup-node v3

actions/cache v3

actions/checkout v3

actions/setup-node v3

actions/cache v3

actions/checkout v3

actions/setup-node v3

actions/cache v3

actions/checkout v3

actions/setup-node v3

actions/cache v3

ubuntu 20.04

ubuntu 20.04

ubuntu 20.04

ubuntu 20.04

ubuntu 20.04

html

packages/demo-dialogic-mithril-router/index.html

bulma 0.9.4

packages/demo-dialogic-mithril/index.html

semantic-ui 2.5.0

packages/demo-dialogic-react-router/index.html

bulma 0.9.4

packages/demo-dialogic-react/index.html

semantic-ui 2.5.0

packages/demo-dialogic-svelte-router/index.html

bulma 0.9.4

packages/demo-dialogic-svelte/index.html

semantic-ui 2.5.0

packages/test-dialogic-mithril/index.html

bulma 0.9.4

packages/test-dialogic-react/index.html

bulma 0.9.4

packages/test-dialogic-svelte/index.html

bulma 0.9.4

npm

package.json

@tsconfig/svelte 5.0.2

@types/rollup ^0.54.0

@typescript-eslint/eslint-plugin ^6.0.0

@typescript-eslint/parser ^6.0.0

@vitejs/plugin-react ^4.0.0

cypress ^12.7.0

eslint ^8.34.0

eslint-config-airbnb ^19.0.4

eslint-config-next ^13.2.1

eslint-config-prettier 8.10.0

eslint-import-resolver-typescript 3.6.1

eslint-plugin-cypress ^2.12.1

eslint-plugin-import 2.29.1

eslint-plugin-jest-dom 5.1.0

eslint-plugin-json 3.1.0

eslint-plugin-jsx-a11y ^6.7.1

eslint-plugin-prettier 5.1.3

eslint-plugin-react 7.33.2

eslint-plugin-react-hooks ^4.6.0

eslint-plugin-simple-import-sort 10.0.0

eslint-plugin-svelte3 ^4.0.0

npm-check-updates ^16.7.9

npm-run-all ^4.1.5

postcss-cli ^10.1.0

prettier ^3.0.0

prettier-plugin-svelte ^3.0.0

react ^18.2.0

rollup-plugin-filesize ^10.0.0

typescript ^5.0.0

vite ^4.1.4

react ^18.0.0

react-dom ^18.0.0

packages/demo-dialogic-mithril-router/package.json

mithril ^2.2.2

mithril-hooks ^0.7.1

@types/mithril ^2.0.12

typescript ^5.0.0

vite ^4.1.4

packages/demo-dialogic-mithril/package.json

mithril ^2.2.2

mithril-hooks ^0.7.1

@types/mithril ^2.0.12

shelljs ^0.8.5

typescript ^5.0.0

vite ^4.1.4

packages/demo-dialogic-nextjs-router/package.json

next 13.5.6

react 18.2.0

react-dom 18.2.0

@babel/eslint-parser ^7.19.1

@next/env ^13.2.3

@swc/helpers ^0.5.0

@types/react 18.2.48

eslint-config-prettier 8.10.0

eslint-import-resolver-typescript 3.6.1

eslint-plugin-import 2.29.1

eslint-plugin-json 3.1.0

eslint-plugin-prettier 5.1.3

eslint-plugin-react 7.33.2

eslint-plugin-simple-import-sort 10.0.0

typescript ^5.0.0

packages/demo-dialogic-react-router/package.json

react 18.2.0

react-dom 18.2.0

react-router-dom 6.21.3

@types/react ^18.0.28

@types/react-dom ^18.0.11

typescript ^5.0.0

vite ^4.1.4

packages/demo-dialogic-react/package.json

react 18.2.0

react-dom 18.2.0

@types/react ^18.0.28

@types/react-dom ^18.0.11

shelljs ^0.8.5

typescript ^5.0.0

vite ^4.1.4

packages/demo-dialogic-svelte-router/package.json

svelte-spa-router 3.3.0

@sveltejs/vite-plugin-svelte ^2.0.3

@tsconfig/svelte ^5.0.0

svelte ^4.0.0

vite ^4.1.4

packages/demo-dialogic-svelte/package.json

@sveltejs/vite-plugin-svelte ^2.0.3

@tsconfig/svelte ^5.0.0

shelljs ^0.8.5

svelte ^4.0.0

vite ^4.1.4

packages/demo-dialogic-sveltekit-router/package.json

@lukeed/uuid ^2.0.0

@sveltejs/adapter-auto ^2.0.0

@sveltejs/kit ^1.9.3

svelte ^4.0.0

svelte-check ^3.0.4

typescript ^5.0.0

packages/dialogic-hooks/package.json

typescript ^5.0.0

vite ^4.1.4

packages/dialogic-mithril/package.json

mithril-hooks ^0.7.1

@types/mithril 2.0.12

typescript ^5.0.0

vite ^4.1.4

mithril ^2.0.4

packages/dialogic-react/package.json

use-stream ^0.4.3

@types/debug ^4.1.7

@types/react ^18.0.28

react ^18.2.0

typescript ^5.0.0

vite ^4.1.4

react *

packages/dialogic-svelte-ts/package.json

@rollup/plugin-typescript ^11.0.0

@sveltejs/vite-plugin-svelte ^2.0.3

@tsconfig/svelte ^5.0.0

svelte ^4.0.0

svelte-check ^3.0.4

typescript ^5.0.0

vite ^4.1.4

packages/dialogic-svelte/package.json

@sveltejs/vite-plugin-svelte ^2.0.3

svelte ^4.0.0

vite ^4.1.4

packages/dialogic/package.json

mithril-stream-standalone 0.1.6

packages/test-dialogic-mithril/package.json

mithril ^2.2.2

mithril-hooks ^0.7.1

@types/mithril ^2.0.12

npm-run-all ^4.1.5

start-server-and-test ^2.0.0

packages/test-dialogic-react/package.json

react 18.2.0

react-dom 18.2.0

react-router-dom 6.21.3

@types/react ^18.0.28

@types/react-dom ^18.0.11

npm-run-all ^4.1.5

start-server-and-test ^2.0.0

packages/test-dialogic-svelte/package.json

mithril-stream-standalone ^0.1.6

svelte ^4.0.0

svelte-spa-router ^3.3.0

@sveltejs/vite-plugin-svelte ^2.0.3

@tsconfig/svelte ^5.0.0

npm-run-all ^4.1.5

start-server-and-test ^2.0.0

svelte-preprocess ^5.0.1

vite ^4.1.4

packages/test-dialogic/package.json

assert ^2.0.0

@types/chai ^4.3.4

@types/mocha ^10.0.1

chai ^4.3.7

jsdom 22.1.0

jsdom-global 3.0.2

mocha ^10.2.0

ts-node ^10.9.1

Check this box to trigger a request for Renovate to run again on this repository

'queued' parameter clarification

I am trying to understand the 'queued' parameter, looking at the Svelete version demo, I tried to queue (or not) notifications, here is the code sample:

    <button
		class="ui button primary"
		on:click={() => {
			notification.show({
				dialogic: {
					component: NotificationComponent,
					className: "notification",
					queued: false,
					timeout: 6000
				}
			})
		}}>
		Add notification
    </button>

But in both cases notifications are queued somehow - is this because they occupy the same position? What would be the way to stack them on screen as they come eventually?

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.