Toasts are in

c0bra · Jun 5, 2019 · bbd026c · bbd026c
1 parent 0207578
commit bbd026c
Show file tree

Hide file tree

Showing 21 changed files with 10,045 additions and 61 deletions.
diff --git a/docs/bundle.css b/docs/bundle.css
diff --git a/docs/package-lock.json b/docs/package-lock.json
diff --git a/docs/package.json b/docs/package.json
@@ -35,6 +35,7 @@
     "rollup-plugin-json": "^4.0.0",
     "rollup-plugin-node-resolve": "^4.0.0",
     "rollup-plugin-replace": "^2.0.0",
+    "rollup-plugin-scss": "^1.0.1",
     "rollup-plugin-svelte": "^5.0.1",
     "rollup-plugin-terser": "^4.0.4",
     "sapper": "^0.27.0"

diff --git a/docs/rollup.config.js b/docs/rollup.config.js
@@ -7,6 +7,7 @@ import commonjs from 'rollup-plugin-commonjs'
 import json from 'rollup-plugin-json'
 import resolve from 'rollup-plugin-node-resolve'
 import replace from 'rollup-plugin-replace'
+import scss from 'rollup-plugin-scss'
 import svelte from 'rollup-plugin-svelte'
 import { sass } from 'svelte-preprocess-sass'
 import { terser } from 'rollup-plugin-terser'
@@ -32,6 +33,7 @@ export default {
         '~': path.join(__dirname, '../src'),
         svelma: '../src/index.js',
       }),
+      // scss(),
       svelte({
         dev,
         hydratable: true,
@@ -95,6 +97,7 @@ export default {
         '~': path.join(__dirname, '../src'),
         svelma: '../src/index.js',
       }),
+      // scss(),
       svelte({
         generate: 'ssr',
         dev,

diff --git a/docs/src/components/CodepenButton.svelte b/docs/src/components/CodepenButton.svelte
@@ -6,13 +6,6 @@
 
   let form
 
-  const externalStyles = [
-    'https://unpkg.com/bulma/css/bulma.min.css',
-    'https://use.fontawesome.com/releases/v5.3.1/css/all.css',
-  ]
-
-  const externalScripts = ['https://unpkg.com/svelma/dist/index.js']
-
   function extractTag(code, tag) {
     let start = code.indexOf(`<${tag}>`)
     if (start === -1) return
@@ -32,24 +25,7 @@
     return code
   }
 
-  // $: html = code.
-
-  // $: value = JSON.stringify({
-  //   title,
-  //   tags: ['svelma', 'svelte', 'bulma'],
-  //   html: extractHTML(code),
-  //   css: extractTag(code, 'style'),
-  //   js: extractTag(code, 'script'),
-  //   js_pre_processor: 'babel',
-  //   css_pre_processor: 'scss',
-  //   html_classes: 'section',
-  //   head: "<meta name='viewport' content='width=device-width, initial-scale=1'>",
-  //   css_external: externalStyles.join(';'),
-  //   js_external: externalScripts.join(';'),
-  // })
-
   $: value = getParameters({
-    externalResources: externalStyles,
     files: {
       'sandbox.config.json': {
         content: {
@@ -77,9 +53,7 @@
 </html>`,
       },
       'index.js': {
-        content: `import '@fortawesome/fontawesome-free/css/all.css';
-import 'bulma/css/bulma.css';
-import App from "./App.svelte";
+        content: `import App from "./App.svelte";
 
 const app = new App({
   target: document.body
@@ -118,7 +92,6 @@ export default app;`,
       },
     },
   })
-  // $: console.log('value', value, 'value-end')
 
   function open() {
     form.submit()

diff --git a/docs/src/components/Sidebar.svelte b/docs/src/components/Sidebar.svelte
@@ -7,7 +7,7 @@
 <script>
   import { Svelma as Components } from 'svelma'
 
-  const components = Object.keys(Components).sort();
+  const components = Object.keys(Components).sort()
 </script>
 
 <style>
@@ -41,6 +41,7 @@
     right: 50%;
     background: #f5f5f5;
     min-height: calc(100vh - 4rem);
+    z-index: -1;
   }
 
   @media screen and (max-width: 1087px) {
@@ -51,7 +52,7 @@
   }
 </style>
 
-<!-- <div class="sidebar-bg"></div> -->
+<div class="sidebar-bg" />
 <aside class="sidebar">
   <p class="sidebar-label">Installation</p>
   <ul>

diff --git a/docs/src/routes/_layout.svelte b/docs/src/routes/_layout.svelte
@@ -20,16 +20,22 @@
     flex-direction: row;
   }
 
+  .docs-main {
+    flex-grow: 1;
+    flex-shrink: 1;
+    padding: 3rem;
+    background-color: white;
+    min-height: calc(100vh - 4rem);
+  }
+
   @media screen and (max-width: 1087px) {
     .docs {
       flex-direction: column;
     }
-  }
 
-  .docs-main {
-    flex-grow: 1;
-    flex-shrink: 1;
-    padding: 3rem;
+    .docs-main {
+      min-height: unset;
+    }
   }
 </style>
 
@@ -40,7 +46,7 @@
 <Nav {segment} />
 
 <main>
-  <section class="docs container">
+  <section class="docs">
     <Sidebar />
 
     <div class="docs-main">

diff --git a/docs/src/routes/components/dialog.svelte b/docs/src/routes/components/dialog.svelte
@@ -11,7 +11,7 @@
 <DocHeader title="Modal" subtitle="Modal popups" />
 
 <Example code={`<script>
-  import { Dialog } from Svelma
+  import { Button, Dialog } from 'svelma'
 
   function alert() {
     Dialog.alert('Alles ist gut')

diff --git a/docs/src/routes/components/input.svelte b/docs/src/routes/components/input.svelte
@@ -1,11 +1,10 @@
 <script context="module">
   export async function preload() {
-  const res = await this.fetch(`components/input.json`);
-  const jsdoc = await res.json();
-
-  return { jsdoc };
-}
+    const res = await this.fetch(`components/input.json`);
+    const jsdoc = await res.json();
 
+    return { jsdoc };
+  }
 </script>
 
 <script>

diff --git a/docs/src/routes/components/jsdocs.json b/docs/src/routes/components/jsdocs.json
@@ -522,5 +522,160 @@
     }
   ],
   "Message": [],
-  "Modal": []
+  "Modal": [],
+  "Notice": [],
+  "Toast": [
+    {
+      "meta": {
+        "filename": "Toast.svelte",
+        "lineno": 9,
+        "columnno": 2,
+        "path": "src/components/Toast"
+      },
+      "description": "Text or html message for toast",
+      "type": [
+        "String"
+      ],
+      "name": "message",
+      "_isSvelteDoc": true,
+      "_svelteProps": {
+        "type": {
+          "names": [
+            "String"
+          ]
+        },
+        "name": "message"
+      },
+      "kind": "prop",
+      "longname": "module:Toast~message",
+      "scope": "inner",
+      "memberof": "module:Toast",
+      "___s": true
+    },
+    {
+      "meta": {
+        "filename": "Toast.svelte",
+        "lineno": 16,
+        "columnno": 2,
+        "path": "src/components/Toast"
+      },
+      "description": "Duration toast will remain on screen",
+      "type": [
+        "Number"
+      ],
+      "optional": true,
+      "defaultvalue": 2000,
+      "name": "duration",
+      "_isSvelteDoc": true,
+      "_svelteProps": {
+        "type": {
+          "names": [
+            "Number"
+          ]
+        },
+        "optional": true,
+        "defaultvalue": 2000,
+        "name": "duration"
+      },
+      "kind": "prop",
+      "longname": "module:Toast~duration",
+      "scope": "inner",
+      "memberof": "module:Toast",
+      "___s": true
+    },
+    {
+      "meta": {
+        "filename": "Toast.svelte",
+        "lineno": 21,
+        "columnno": 2,
+        "path": "src/components/Toast"
+      },
+      "description": "Where the toast will show on the screen",
+      "type": [
+        "String"
+      ],
+      "optional": true,
+      "defaultvalue": "is-top",
+      "name": "position",
+      "_isSvelteDoc": true,
+      "_svelteProps": {
+        "type": {
+          "names": [
+            "String"
+          ]
+        },
+        "optional": true,
+        "defaultvalue": "is-top",
+        "name": "position"
+      },
+      "kind": "prop",
+      "values": "<code>is-top</code>, <code>is-bottom</code>, <code>is-top-left</code>, <code>is-top<-right/code>, <code>is-bottom-left</code>, <code>is-bottom<-right/code>",
+      "longname": "module:Toast~position",
+      "scope": "inner",
+      "memberof": "module:Toast",
+      "___s": true
+    },
+    {
+      "meta": {
+        "filename": "Toast.svelte",
+        "lineno": 27,
+        "columnno": 2,
+        "path": "src/components/Toast"
+      },
+      "description": "Type (color)",
+      "type": [
+        "String"
+      ],
+      "optional": true,
+      "defaultvalue": "is-dark",
+      "name": "type",
+      "_isSvelteDoc": true,
+      "_svelteProps": {
+        "type": {
+          "names": [
+            "String"
+          ]
+        },
+        "optional": true,
+        "defaultvalue": "is-dark",
+        "name": "type"
+      },
+      "kind": "prop",
+      "values": "<code>is-white</code>, <code>is-black</code>, <code>is-light</code>, <code>is-dark</code>, <code>is-primary</code>, <code>is-info</code>, <code>is-success</code>, <code>is-warning</code>, <code>is-danger</code>",
+      "longname": "module:Toast~type",
+      "scope": "inner",
+      "memberof": "module:Toast",
+      "___s": true
+    },
+    {
+      "meta": {
+        "filename": "Toast.svelte",
+        "lineno": 33,
+        "columnno": 2,
+        "path": "src/components/Toast"
+      },
+      "description": "Background type (any of the Bulma <code>has-background-</code> classes will work)",
+      "type": [
+        "String"
+      ],
+      "optional": true,
+      "name": "background",
+      "_isSvelteDoc": true,
+      "_svelteProps": {
+        "type": {
+          "names": [
+            "String"
+          ]
+        },
+        "optional": true,
+        "name": "background"
+      },
+      "kind": "prop",
+      "values": "<code>has-background-*</code>",
+      "longname": "module:Toast~background",
+      "scope": "inner",
+      "memberof": "module:Toast",
+      "___s": true
+    }
+  ]
 }
diff --git a/docs/src/routes/components/modal.svelte b/docs/src/routes/components/modal.svelte
@@ -9,6 +9,8 @@
 <DocHeader title="Modal" subtitle="Modal popups" />
 
 <Example code={`<script>
+  import { Button, Modal } from 'svelma'
+
   let active = false
 </script>
 

diff --git a/docs/src/routes/components/toast.svelte b/docs/src/routes/components/toast.svelte
@@ -0,0 +1,45 @@
+<script context="module">
+  export async function preload() {
+    const res = await this.fetch(`components/toast.json`);
+    const jsdoc = await res.json();
+
+    return { jsdoc };
+  }
+</script>
+
+<script>
+  import { Button, Toast } from 'svelma'
+  import DocHeader from '../../components/DocHeader.svelte'
+  import Example from '../../components/Example.svelte'
+  import JSDoc from '../../components/JSDoc.svelte'
+
+  export let jsdoc
+
+  function open(type, position, background) {
+    Toast.create({ message: 'I am a toast', type, position, background })
+  }
+</script>
+
+<DocHeader title="Toast" subtitle="Toasty notifications" />
+
+<Example code={`<script>
+  import { Button, Toast } from 'svelma'
+
+  function open(type, position) {
+    Toast.create({ message: 'I am a toast', type, position })
+  }
+</script>
+
+<Button on:click={() => open()}>Toast</Button>
+<Button type="is-success" on:click={() => open('is-success')}>Success</Button>
+<Button type="is-danger" on:click={() => open('is-danger', 'is-bottom-right')}>Bottom Right</Button>`}>
+  <div slot="preview">
+    <Button on:click={() => open()}>Toast</Button>
+    <Button type="is-success" on:click={() => open('is-success')}>Success</Button>
+    <Button type="is-danger" on:click={() => open('is-danger', 'is-bottom-right')}>Bottom Right</Button>
+    <Button type="is-primary" on:click={() => open('is-primary', 'is-top', 'has-background-grey-lighter')}>Custom Background</Button>
+  </div>
+</Example>
+
+
+<JSDoc {jsdoc} />