├── .gitattributes ├── .github └── workflows │ └── node.js.yml ├── .gitignore ├── .npmignore ├── .prettierrc.js ├── .travis.yml ├── CHANGELOG.md ├── LICENSE ├── README.md ├── docs.sh ├── docs ├── .gitignore ├── README.md ├── appveyor.yml ├── bundle.css ├── cypress.json ├── cypress │ ├── fixtures │ │ └── example.json │ ├── integration │ │ └── spec.js │ ├── plugins │ │ └── index.js │ └── support │ │ ├── commands.js │ │ └── index.js ├── jsdoc │ ├── conf.js │ ├── plugins │ │ └── svelte.js │ └── template │ │ └── publish.js ├── package-lock.json ├── package.json ├── rollup.config.js ├── src │ ├── client.js │ ├── components │ │ ├── Code.svelte │ │ ├── CodepenButton.svelte │ │ ├── DocHeader.svelte │ │ ├── Example.svelte │ │ ├── JSDoc.svelte │ │ ├── Nav.svelte │ │ └── Sidebar.svelte │ ├── routes │ │ ├── _error.svelte │ │ ├── _layout.svelte │ │ ├── about.svelte │ │ ├── blog │ │ │ ├── [slug].json.js │ │ │ ├── [slug].svelte │ │ │ ├── _posts.js │ │ │ ├── index.json.js │ │ │ └── index.svelte │ │ ├── bulma │ │ │ ├── hero.svelte │ │ │ ├── intro.svelte │ │ │ ├── media.svelte │ │ │ ├── table.svelte │ │ │ └── tiles.svelte │ │ ├── components │ │ │ ├── [slug].json.js │ │ │ ├── button.svelte │ │ │ ├── collapse.svelte │ │ │ ├── dialog.svelte │ │ │ ├── field.svelte │ │ │ ├── icon.svelte │ │ │ ├── input.svelte │ │ │ ├── jsdocs.json │ │ │ ├── message.svelte │ │ │ ├── modal.svelte │ │ │ ├── modalcard.svelte │ │ │ ├── notification.svelte │ │ │ ├── progress.svelte │ │ │ ├── select.svelte │ │ │ ├── snackbar.svelte │ │ │ ├── switch.svelte │ │ │ ├── tabs.svelte │ │ │ ├── tag.svelte │ │ │ ├── toast.svelte │ │ │ └── tooltip.svelte │ │ ├── index.svelte │ │ └── install │ │ │ └── index.svelte │ ├── server.js │ ├── service-worker.js │ └── template.html └── static │ ├── favicon.ico │ ├── favicon.png │ ├── global.css │ ├── great-success.png │ ├── logo-192.png │ ├── logo-512.png │ ├── manifest.json │ ├── svelma-logo-ico.png │ ├── svelma-logo.png │ └── svelma-logo.svg ├── package-lock.json ├── package.json ├── public ├── favicon.png ├── global.css └── index.html ├── rollup.config.js └── src ├── components ├── Button.svelte ├── Collapse.svelte ├── Dialog │ ├── Dialog.svelte │ └── index.js ├── Dropdown.svelte ├── Field.svelte ├── File.svelte ├── Icon.svelte ├── Input.svelte ├── Message.svelte ├── Modal │ ├── Modal.svelte │ ├── ModalCard.svelte │ └── index.js ├── Notice.svelte ├── Notices.svelte ├── Notification │ ├── Notification.svelte │ ├── NotificationNotice.svelte │ └── index.js ├── Progress.svelte ├── Select.svelte ├── Snackbar │ ├── Snackbar.svelte │ └── index.js ├── Switch.svelte ├── Tabs │ ├── Tab.svelte │ ├── Tabs.svelte │ ├── index.js │ └── riskview_example.json ├── Tag │ ├── Tag.svelte │ ├── Taglist.svelte │ └── index.js ├── Toast │ ├── Toast.svelte │ └── index.js └── Tooltip.svelte ├── index.js └── utils └── index.js /.gitattributes: -------------------------------------------------------------------------------- 1 | *.svelte linguist-language=HTML -------------------------------------------------------------------------------- /.github/workflows/node.js.yml: -------------------------------------------------------------------------------- 1 | # This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node 2 | # For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions 3 | 4 | name: Node.js CI 5 | 6 | on: 7 | push: 8 | branches: [ master ] 9 | pull_request: 10 | branches: [ master ] 11 | 12 | jobs: 13 | build: 14 | 15 | runs-on: ubuntu-latest 16 | 17 | strategy: 18 | matrix: 19 | node-version: [10.x, 12.x, 14.x, 16.x] 20 | # See supported Node.js release schedule at https://nodejs.org/en/about/releases/ 21 | 22 | steps: 23 | - uses: actions/checkout@v2 24 | - name: Use Node.js ${{ matrix.node-version }} 25 | uses: actions/setup-node@v2 26 | with: 27 | node-version: ${{ matrix.node-version }} 28 | - run: npm ci 29 | - run: npm run build --if-present 30 | - run: npm run test --if-present 31 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | dist/* 4 | public/build 5 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/c0bra/svelma/ddd412e79085f47646b3739f5d05277219f070a2/.npmignore -------------------------------------------------------------------------------- /.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | trailingComma: 'es5', 3 | tabWidth: 2, 4 | semi: false, 5 | singleQuote: true, 6 | printWidth: 120, 7 | semi: false, 8 | } 9 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: lts/* 3 | 4 | branches: 5 | only: 6 | - master 7 | - dev 8 | # Tags 9 | - /^v\d+\.\d+(\.\d+)?(-\S*)?$/ 10 | - /^greenkeeper\// 11 | 12 | addons: 13 | apt: 14 | packages: 15 | - xvfb 16 | 17 | install: 18 | - export DISPLAY=':99.0' 19 | - Xvfb :99 -screen 0 1024x768x24 > /dev/null 2>&1 & 20 | - npm ci || npm install 21 | 22 | script: skip 23 | 24 | jobs: 25 | include: 26 | - stage: release 27 | node_js: lts/* 28 | deploy: 29 | provider: script 30 | skip_cleanup: true 31 | script: 32 | - npx semantic-release 33 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ## 0.4.5 2 | Allow binding activeTab property in Tabs #104 3 | 4 | ## 0.4.4 5 | https://github.com/c0bra/svelma/pull/96 6 | https://github.com/c0bra/svelma/pull/91 7 | 8 | ## 0.4.3 9 | ported from abbychau/svelma2 10 | 11 | ## 0.4.2 (2021-03-18) 12 | * Add Modal Card Component 13 | * Use Modal is-active native class(remove buggy is-active binding) 14 | 15 | ## 0.4.1 (2021-03-17) 16 | 17 | * Upgrade Bulma to 0.9.2 18 | * Fix Modal's bug for unable to reopen 19 | * Upgrade all dependencies including main and docs 20 | * Fix all runtime build warnings 21 | 22 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Brian Hann, 2021 Abby Chau 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Svelma 2 | 3 | > Svelma is a set of UI components for [Svelte](https://svelte.dev) based on the [Bulma](http://bulma.io) CSS framework. 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | [Change Log](CHANGELOG.md) 12 | 13 | 14 | 15 | # Documentation 16 | 17 | [See docs + demos site here](https://docs-abbychau.vercel.app/svelma) 18 | 19 | # Quick Start 20 | 21 | ### 1. Import svelma and dependencies via npm to your project 22 | 23 | ```bash 24 | $ npm install --save bulma svelma 25 | $ npm install node-sass svelte-preprocess rollup-plugin-postcss --save-dev 26 | ``` 27 | 28 | ### 2. Add the postcss plugin to your rollup config 29 | 30 | ```js 31 | // rollup.config.js 32 | import postcss from 'rollup-plugin-postcss' 33 | import preprocess from 'svelte-preprocess' 34 | 35 | // ... 36 | 37 | export default { 38 | // ... 39 | plugins: [ 40 | svelte({ 41 | // ... 42 | preprocess: preprocess() 43 | }), 44 | 45 | postcss(), 46 | ] 47 | } 48 | ``` 49 | 50 | ### 3. Import Bulma's CSS and Svelma components 51 | 52 | ```html 53 | 54 | 58 | 59 | 60 | ``` 61 | 62 | ### 4. Include [Font Awesome](https://fontawesome.com/) icons 63 | 64 | From CDN in your HTML page: 65 | 66 | ```html 67 | 68 | ``` 69 | 70 | Or as an npm package imported into your root component: 71 | 72 | `$ npm install --save @fortawesome/fontawesome-free` 73 | 74 | ```html 75 | 76 | 80 | ``` 81 | 82 | ### SSR 83 | 84 | If you are doing server-side rendering with Sapper (or [SvelteKit](https://kit.svelte.dev/)), you'll need to import the .svelte files directly so that your app can compile them, rather than importing from the compiled module. 85 | 86 | i.e.: 87 | 88 | ```js 89 | import Button from 'svelma/src/components/Button.svelte' 90 | ``` 91 | 92 | instead of 93 | 94 | ```js 95 | import { Button } from 'svelma' 96 | ``` 97 | 98 | 99 | # Inspiration 100 | 101 | Much thanks to the [Buefy](https://buefy.org) and [Svelma2](https://github.com/abbychau/svelma2) projects! It provided the inspiration and lots of code examples for this version of Svelma. 102 | -------------------------------------------------------------------------------- /docs.sh: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | 3 | # abort on errors 4 | set -e 5 | 6 | NODE_ENV=production npm run build 7 | # NODE_ENV=production npm run jsdocs 8 | NODE_ENV=production npm run docs 9 | 10 | # navigate into the build output directory 11 | cd docs/__sapper__/export/svelma 12 | 13 | # if you are deploying to a custom domain 14 | # echo 'www.example.com' > CNAME 15 | 16 | git init 17 | git add -A 18 | git commit -m 'deploy' 19 | 20 | git push -f https://${GITHUB_TOKEN_SVELMA}@github.com/c0bra/svelma.git master:gh-pages 21 | 22 | cd - -------------------------------------------------------------------------------- /docs/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | yarn-error.log 4 | /cypress/screenshots/ 5 | /__sapper__/ 6 | 7 | .vercel 8 | -------------------------------------------------------------------------------- /docs/README.md: -------------------------------------------------------------------------------- 1 | # sapper-template 2 | 3 | The default [Sapper](https://github.com/sveltejs/sapper) template, with branches for Rollup and webpack. To clone it and get started: 4 | 5 | ```bash 6 | # for Rollup 7 | npx degit sveltejs/sapper-template#rollup my-app 8 | # for webpack 9 | npx degit sveltejs/sapper-template#webpack my-app 10 | cd my-app 11 | npm install # or yarn! 12 | npm run dev 13 | ``` 14 | 15 | Open up [localhost:3000](http://localhost:3000) and start clicking around. 16 | 17 | Consult [sapper.svelte.dev](https://sapper.svelte.dev) for help getting started. 18 | 19 | 20 | ## Structure 21 | 22 | Sapper expects to find two directories in the root of your project — `src` and `static`. 23 | 24 | 25 | ### src 26 | 27 | The [src](src) directory contains the entry points for your app — `client.js`, `server.js` and (optionally) a `service-worker.js` — along with a `template.html` file and a `routes` directory. 28 | 29 | 30 | #### src/routes 31 | 32 | This is the heart of your Sapper app. There are two kinds of routes — *pages*, and *server routes*. 33 | 34 | **Pages** are Svelte components written in `.svelte` files. When a user first visits the application, they will be served a server-rendered version of the route in question, plus some JavaScript that 'hydrates' the page and initialises a client-side router. From that point forward, navigating to other pages is handled entirely on the client for a fast, app-like feel. (Sapper will preload and cache the code for these subsequent pages, so that navigation is instantaneous.) 35 | 36 | **Server routes** are modules written in `.js` files, that export functions corresponding to HTTP methods. Each function receives Express `request` and `response` objects as arguments, plus a `next` function. This is useful for creating a JSON API, for example. 37 | 38 | There are three simple rules for naming the files that define your routes: 39 | 40 | * A file called `src/routes/about.svelte` corresponds to the `/about` route. A file called `src/routes/blog/[slug].svelte` corresponds to the `/blog/:slug` route, in which case `params.slug` is available to the route 41 | * The file `src/routes/index.svelte` (or `src/routes/index.js`) corresponds to the root of your app. `src/routes/about/index.svelte` is treated the same as `src/routes/about.svelte`. 42 | * Files and directories with a leading underscore do *not* create routes. This allows you to colocate helper modules and components with the routes that depend on them — for example you could have a file called `src/routes/_helpers/datetime.js` and it would *not* create a `/_helpers/datetime` route 43 | 44 | 45 | ### static 46 | 47 | The [static](static) directory contains any static assets that should be available. These are served using [sirv](https://github.com/lukeed/sirv). 48 | 49 | In your [service-worker.js](app/service-worker.js) file, you can import these as `files` from the generated manifest... 50 | 51 | ```js 52 | import { files } from '@sapper/service-worker'; 53 | ``` 54 | 55 | ...so that you can cache them (though you can choose not to, for example if you don't want to cache very large files). 56 | 57 | 58 | ## Bundler config 59 | 60 | Sapper uses Rollup or webpack to provide code-splitting and dynamic imports, as well as compiling your Svelte components. With webpack, it also provides hot module reloading. As long as you don't do anything daft, you can edit the configuration files to add whatever plugins you'd like. 61 | 62 | 63 | ## Production mode and deployment 64 | 65 | To start a production version of your app, run `npm run build && npm start`. This will disable live reloading, and activate the appropriate bundler plugins. 66 | 67 | You can deploy your application to any environment that supports Node 8 or above. As an example, to deploy to [Now](https://zeit.co/now), run these commands: 68 | 69 | ```bash 70 | npm install -g now 71 | now 72 | ``` 73 | 74 | 75 | ## Using external components with webpack 76 | 77 | When using Svelte components installed from npm, such as [@sveltejs/svelte-virtual-list](https://github.com/sveltejs/svelte-virtual-list), Svelte needs the original component source (rather than any precompiled JavaScript that ships with the component). This allows the component to be rendered server-side, and also keeps your client-side app smaller. 78 | 79 | Because of that, it's essential that webpack doesn't treat the package as an *external dependency*. You can either modify the `externals` option under `server` in [webpack.config.js](webpack.config.js), or simply install the package to `devDependencies` rather than `dependencies`, which will cause it to get bundled (and therefore compiled) with your app: 80 | 81 | ```bash 82 | npm install -D @sveltejs/svelte-virtual-list 83 | ``` 84 | 85 | 86 | ## Bugs and feedback 87 | 88 | Sapper is in early development, and may have the odd rough edge here and there. Please be vocal over on the [Sapper issue tracker](https://github.com/sveltejs/sapper/issues). 89 | -------------------------------------------------------------------------------- /docs/appveyor.yml: -------------------------------------------------------------------------------- 1 | version: "{build}" 2 | 3 | shallow_clone: true 4 | 5 | init: 6 | - git config --global core.autocrlf false 7 | 8 | build: off 9 | 10 | environment: 11 | matrix: 12 | # node.js 13 | - nodejs_version: stable 14 | 15 | install: 16 | - ps: Install-Product node $env:nodejs_version 17 | - npm install cypress 18 | - npm install 19 | -------------------------------------------------------------------------------- /docs/cypress.json: -------------------------------------------------------------------------------- 1 | { 2 | "baseUrl": "http://localhost:3000", 3 | "video": false 4 | } -------------------------------------------------------------------------------- /docs/cypress/fixtures/example.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Using fixtures to represent data", 3 | "email": "hello@cypress.io", 4 | "body": "Fixtures are a great way to mock data for responses to routes" 5 | } -------------------------------------------------------------------------------- /docs/cypress/integration/spec.js: -------------------------------------------------------------------------------- 1 | describe('Sapper template app', () => { 2 | beforeEach(() => { 3 | cy.visit('/') 4 | }); 5 | 6 | it('has the correct

', () => { 7 | cy.contains('h1', 'Great success!') 8 | }); 9 | 10 | it('navigates to /about', () => { 11 | cy.get('nav a').contains('about').click(); 12 | cy.url().should('include', '/about'); 13 | }); 14 | 15 | it('navigates to /blog', () => { 16 | cy.get('nav a').contains('blog').click(); 17 | cy.url().should('include', '/blog'); 18 | }); 19 | }); -------------------------------------------------------------------------------- /docs/cypress/plugins/index.js: -------------------------------------------------------------------------------- 1 | // *********************************************************** 2 | // This example plugins/index.js can be used to load plugins 3 | // 4 | // You can change the location of this file or turn off loading 5 | // the plugins file with the 'pluginsFile' configuration option. 6 | // 7 | // You can read more here: 8 | // https://on.cypress.io/plugins-guide 9 | // *********************************************************** 10 | 11 | // This function is called when a project is opened or re-opened (e.g. due to 12 | // the project's config changing) 13 | 14 | module.exports = (on, config) => { 15 | // `on` is used to hook into various events Cypress emits 16 | // `config` is the resolved Cypress config 17 | } 18 | -------------------------------------------------------------------------------- /docs/cypress/support/commands.js: -------------------------------------------------------------------------------- 1 | // *********************************************** 2 | // This example commands.js shows you how to 3 | // create various custom commands and overwrite 4 | // existing commands. 5 | // 6 | // For more comprehensive examples of custom 7 | // commands please read more here: 8 | // https://on.cypress.io/custom-commands 9 | // *********************************************** 10 | // 11 | // 12 | // -- This is a parent command -- 13 | // Cypress.Commands.add("login", (email, password) => { ... }) 14 | // 15 | // 16 | // -- This is a child command -- 17 | // Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... }) 18 | // 19 | // 20 | // -- This is a dual command -- 21 | // Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... }) 22 | // 23 | // 24 | // -- This is will overwrite an existing command -- 25 | // Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... }) 26 | -------------------------------------------------------------------------------- /docs/cypress/support/index.js: -------------------------------------------------------------------------------- 1 | // *********************************************************** 2 | // This example support/index.js is processed and 3 | // loaded automatically before your test files. 4 | // 5 | // This is a great place to put global configuration and 6 | // behavior that modifies Cypress. 7 | // 8 | // You can change the location of this file or turn off 9 | // automatically serving support files with the 10 | // 'supportFile' configuration option. 11 | // 12 | // You can read more here: 13 | // https://on.cypress.io/configuration 14 | // *********************************************************** 15 | 16 | // Import commands.js using ES2015 syntax: 17 | import './commands' 18 | 19 | // Alternatively you can use CommonJS syntax: 20 | // require('./commands') 21 | -------------------------------------------------------------------------------- /docs/jsdoc/conf.js: -------------------------------------------------------------------------------- 1 | const { resolve } = require('path') 2 | 3 | const root = resolve(__dirname, '../..') 4 | 5 | module.exports = { 6 | opts: { 7 | recurse: true, 8 | template: './template', 9 | destination: resolve(root, 'docs/src/routes/components/jsdocs.json'), 10 | }, 11 | source: { 12 | include: [resolve(root, 'src/components')], 13 | includePattern: '.+\\.svelte$', // (js(doc|x)? 14 | }, 15 | plugins: ['plugins/svelte.js'], 16 | } 17 | -------------------------------------------------------------------------------- /docs/jsdoc/plugins/svelte.js: -------------------------------------------------------------------------------- 1 | // JSDoc plugin for Svelte 2 | const { basename, join, relative,resolve } = require('path') 3 | const svelte = require('svelte/compiler') 4 | 5 | const scriptLines = {} 6 | 7 | function seekScriptLine(source, filename) { 8 | // eslint-disable-next-line no-restricted-syntax 9 | for (const [i, line] of source.split(/\r?\n/).entries()) { 10 | if (line.trim() === '') { 11 | continue; 12 | } 13 | 14 | if (/]*>/.test(line)) { 15 | return i - 1; 16 | } 17 | } 18 | 19 | return 0; 20 | } 21 | 22 | exports.defineTags = function(dictionary) { 23 | dictionary.defineTag('svelte-prop', { 24 | canHaveType: true, 25 | canHaveName: true, 26 | onTagged: function(doclet, tag) { 27 | if (tag.value) { 28 | Object.assign(doclet, tag.value) 29 | if (tag.value.type) doclet.type = tag.value.type.names 30 | }; 31 | 32 | doclet._isSvelteDoc = true; 33 | // doclet._svelteProps = doclet._svelteProps || [] 34 | // doclet._svelteProps.push(tag.value || {}) 35 | doclet._svelteProps = tag.value 36 | doclet.kind = 'prop' 37 | } 38 | }); 39 | 40 | dictionary.defineTag('values', { 41 | onTagged: function(doclet, tag) { 42 | doclet.values = tag.value 43 | } 44 | }); 45 | }; 46 | 47 | exports.handlers = { 48 | beforeParse: function(e) { 49 | if (!/\.svelte$/.test(e.filename)) return 50 | 51 | scriptLines[e.filename] = seekScriptLine(e.source, e.filename); 52 | 53 | let source 54 | svelte.preprocess(e.source, { 55 | script({ content, filename }) { 56 | source = content 57 | 58 | return { content, filename } 59 | }, 60 | }); 61 | 62 | const componentName = basename(e.filename, '.svelte'); 63 | 64 | e.source = `/** @module ${componentName} 65 | */ 66 | ${source}` 67 | }, 68 | 69 | newDoclet(e) { 70 | const fullPath = join(e.doclet.meta.path, e.doclet.meta.filename); 71 | 72 | const root = resolve(__dirname, '../../..') 73 | e.doclet.meta.path = relative(root, e.doclet.meta.path) 74 | 75 | if (/\.svelte$/.test(e.doclet.meta.filename)) { 76 | e.doclet.meta.lineno += scriptLines[fullPath] 77 | } 78 | }, 79 | }; -------------------------------------------------------------------------------- /docs/jsdoc/template/publish.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs') 2 | const { groupBy, mapKeys, mapValues, omit, pick } = require('lodash') 3 | 4 | const colorStr = ['is-white', 'is-black', 'is-light', 'is-dark', 'is-primary', 'is-info', 'is-success', 'is-warning', 'is-danger'] 5 | // .map(c => `${c}`) 6 | .join(', ') 7 | 8 | 9 | const sizeStr = ['is-small', 'is-medium', 'is-large'] 10 | // .map(c => `${c}`) 11 | .join(', ') 12 | 13 | /** 14 | * Publish hook for the JSDoc template. Writes to JSON stdout. 15 | * @param {function} data The root of the Taffy DB containing doclet records. 16 | * @param {Object} opts Options. 17 | */ 18 | exports.publish = function(data, opts) { 19 | let docs = data() 20 | .get() 21 | .filter(function(doc) { 22 | return !doc.undocumented 23 | }) 24 | 25 | docs = groupBy(docs, s => s.memberof || s.longname) 26 | 27 | delete docs['package:undefined'] 28 | docs = mapKeys(docs, (v, k) => k.replace(/^module:/, '')) 29 | docs = mapValues(docs, cs => cs.map(c => omit(c, ['comment', '___id', 'meta.code']))) 30 | docs = mapValues(docs, cs => cs.filter(x => x.kind !== 'module')) 31 | docs = mapValues(docs, cs => cs.map(c => { 32 | c.values = c.values || '' 33 | if (~c.values.indexOf('$$colors$$')) c.values = c.values.replace(/\$\$colors\$\$/, colorStr) 34 | if (~c.values.indexOf('$$sizes$$')) c.values = c.values.replace(/\$\$sizes\$\$/, sizeStr) 35 | 36 | c.values = c.values.split(/\s*,\s*/).filter(x => x).map(x => `${x}`).join(', ') 37 | 38 | return c 39 | })) 40 | 41 | fs.writeFileSync(opts.destination, JSON.stringify(docs, null, 2)) 42 | } 43 | -------------------------------------------------------------------------------- /docs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "svelma-site", 3 | "description": "Docs and examples for Svelma", 4 | "version": "0.0.1", 5 | "scripts": { 6 | "dev": "sapper dev", 7 | "build": "sapper build", 8 | "export": "sapper export", 9 | "build_doc": "npx sapper export --basepath svelma", 10 | "start": "node __sapper__/build", 11 | "cy:run": "cypress run", 12 | "cy:open": "cypress open", 13 | "test": "run-p --race dev cy:run" 14 | }, 15 | "dependencies": { 16 | "bulma": "^0.9.3", 17 | "clipboard": "^2.0.8", 18 | "compression": "^1.7.4", 19 | "highlight.js": "^11.3.1", 20 | "lodash": "^4.17.21", 21 | "polka": "^0.5.2", 22 | "sirv": "^2.0.0" 23 | }, 24 | "devDependencies": { 25 | "@babel/core": "^7.16.7", 26 | "@babel/plugin-syntax-dynamic-import": "^7.8.3", 27 | "@babel/plugin-transform-runtime": "^7.16.7", 28 | "@babel/preset-env": "^7.16.7", 29 | "@babel/runtime": "^7.16.7", 30 | "@rollup/plugin-babel": "^5.3.0", 31 | "@rollup/plugin-commonjs": "^21.0.1", 32 | "@rollup/plugin-json": "^4.1.0", 33 | "@rollup/plugin-node-resolve": "^13.1.3", 34 | "@rollup/plugin-replace": "^3.0.1", 35 | "@rollup/plugin-url": "^6.1.0", 36 | "chokidar": "^3.5.2", 37 | "codesandbox": "^2.2.3", 38 | "jsdoc": "^3.6.7", 39 | "node-sass": "^7.0.1", 40 | "npm-run-all": "^4.1.5", 41 | "rollup": "^2.63.0", 42 | "rollup-plugin-includepaths": "^0.2.4", 43 | "rollup-plugin-svelte": "^7.1.0", 44 | "rollup-plugin-terser": "^7.0.2", 45 | "sapper": "^0.29.3", 46 | "sass": "^1.46.0", 47 | "svelma": "file:../", 48 | "svelte": "^3.49.0", 49 | "svelte-preprocess": "^4.10.1" 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /docs/rollup.config.js: -------------------------------------------------------------------------------- 1 | import path from 'path'; 2 | import resolve from '@rollup/plugin-node-resolve'; 3 | import replace from '@rollup/plugin-replace'; 4 | import commonjs from '@rollup/plugin-commonjs'; 5 | import url from '@rollup/plugin-url'; 6 | import svelte from 'rollup-plugin-svelte'; 7 | import babel from '@rollup/plugin-babel'; 8 | import { terser } from 'rollup-plugin-terser'; 9 | import config from 'sapper/config/rollup.js'; 10 | import pkg from './package.json'; 11 | import json from '@rollup/plugin-json'; 12 | import sveltePreprocess from 'svelte-preprocess' 13 | 14 | 15 | const mode = process.env.NODE_ENV; 16 | const dev = mode === 'development'; 17 | const legacy = !!process.env.SAPPER_LEGACY_BUILD; 18 | 19 | const onwarn = (warning, onwarn) => 20 | (warning.code === 'MISSING_EXPORT' && /'preload'/.test(warning.message)) || 21 | (warning.code === 'CIRCULAR_DEPENDENCY' && /[/\\]@sapper[/\\]/.test(warning.message)) || 22 | onwarn(warning); 23 | 24 | export default { 25 | client: { 26 | input: config.client.input(), 27 | output: config.client.output(), 28 | plugins: [ 29 | json(), 30 | replace({ 31 | preventAssignment: true, 32 | values:{ 33 | 'process.browser': true, 34 | 'process.env.NODE_ENV': JSON.stringify(mode) 35 | }, 36 | }), 37 | svelte({ 38 | preprocess: sveltePreprocess({}), 39 | compilerOptions: { 40 | dev, 41 | hydratable: true 42 | } 43 | }), 44 | url({ 45 | sourceDir: path.resolve(__dirname, 'src/node_modules/images'), 46 | publicPath: '/client/' 47 | }), 48 | resolve({ 49 | browser: true, 50 | dedupe: ['svelte'] 51 | }), 52 | commonjs(), 53 | 54 | legacy && babel({ 55 | extensions: ['.js', '.mjs', '.html', '.svelte'], 56 | babelHelpers: 'runtime', 57 | exclude: ['node_modules/@babel/**'], 58 | presets: [ 59 | ['@babel/preset-env', { 60 | targets: '> 0.25%, not dead' 61 | }] 62 | ], 63 | plugins: [ 64 | '@babel/plugin-syntax-dynamic-import', 65 | ['@babel/plugin-transform-runtime', { 66 | useESModules: true 67 | }] 68 | ] 69 | }), 70 | 71 | !dev && terser({ 72 | module: true 73 | }) 74 | ], 75 | 76 | preserveEntrySignatures: false, 77 | onwarn, 78 | }, 79 | 80 | server: { 81 | input: config.server.input(), 82 | output: config.server.output(), 83 | plugins: [ 84 | json(), 85 | replace({ 86 | preventAssignment: true, 87 | values:{ 88 | 'process.browser': false, 89 | 'process.env.NODE_ENV': JSON.stringify(mode) 90 | }, 91 | }), 92 | svelte({ 93 | preprocess: sveltePreprocess({}), 94 | compilerOptions: { 95 | dev, 96 | generate: 'ssr', 97 | hydratable: true 98 | }, 99 | emitCss: false 100 | }), 101 | url({ 102 | sourceDir: path.resolve(__dirname, 'src/node_modules/images'), 103 | publicPath: '/client/', 104 | emitFiles: false // already emitted by client build 105 | }), 106 | resolve({ 107 | dedupe: ['svelte'] 108 | }), 109 | commonjs() 110 | ], 111 | external: Object.keys(pkg.dependencies).concat(require('module').builtinModules), 112 | preserveEntrySignatures: 'strict', 113 | onwarn, 114 | }, 115 | 116 | serviceworker: { 117 | input: config.serviceworker.input(), 118 | output: config.serviceworker.output(), 119 | plugins: [ 120 | resolve(), 121 | replace({ 122 | preventAssignment: true, 123 | values:{ 124 | 'process.browser': true, 125 | 'process.env.NODE_ENV': JSON.stringify(mode) 126 | }, 127 | }), 128 | commonjs(), 129 | !dev && terser() 130 | ], 131 | preserveEntrySignatures: false, 132 | onwarn, 133 | } 134 | }; 135 | -------------------------------------------------------------------------------- /docs/src/client.js: -------------------------------------------------------------------------------- 1 | import * as sapper from '@sapper/app'; 2 | import hljs from 'highlight.js/lib/core'; 3 | import bash from 'highlight.js/lib/languages/bash'; 4 | import xml from 'highlight.js/lib/languages/xml'; 5 | import javascript from 'highlight.js/lib/languages/javascript'; 6 | 7 | hljs.registerLanguage('bash', bash); 8 | hljs.registerLanguage('xml', xml); 9 | hljs.registerLanguage('javascript', javascript); 10 | 11 | sapper.start({ 12 | target: document.querySelector('#sapper') 13 | }); -------------------------------------------------------------------------------- /docs/src/components/Code.svelte: -------------------------------------------------------------------------------- 1 | 57 | 58 | 91 | 92 |
93 |
94 | {#if showCopy} 95 |
96 | 97 |
98 | {/if} 99 | 104 | 
105 |       
106 |         {@html compiled}
107 |       
108 |
109 |
110 |
111 | -------------------------------------------------------------------------------- /docs/src/components/CodepenButton.svelte: -------------------------------------------------------------------------------- 1 | 100 | 101 | 107 | 108 |
109 | 110 |
111 | 112 |
113 |
114 | -------------------------------------------------------------------------------- /docs/src/components/DocHeader.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |

{title}

17 |

{subtitle}

18 |
19 | -------------------------------------------------------------------------------- /docs/src/components/Example.svelte: -------------------------------------------------------------------------------- 1 | 22 | 23 | 173 | 174 |
175 | 176 |
177 | Codesandbox 178 | 179 |
180 | 181 |
182 | 183 |
184 |
185 | 186 | 187 | 188 | 193 |
194 |
195 | -------------------------------------------------------------------------------- /docs/src/components/JSDoc.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 13 | 14 | {#if jsdoc} 15 | {#if showHeader}
{/if} 16 | 17 |
18 | {#if showHeader}

API

{/if} 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | {#each jsdoc as doc} 33 | 34 | 37 | 40 | 41 | 44 | 47 | 48 | {/each} 49 | 50 |
NameDescriptionTypeValuesDefault
35 | {doc.name} 36 | 38 | {@html doc.description}{#if doc.optional}, optional{/if} 39 | {(doc.type || []).join(', ')} 42 | {@html doc.values || '—'} 43 | 45 | {@html ('defaultvalue' in doc && `${doc.defaultvalue}`) || '—'} 46 |
51 |
52 |
53 | {/if} 54 | -------------------------------------------------------------------------------- /docs/src/components/Nav.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 | 19 | 20 | {#if false} 21 | 37 | {/if} 38 | 39 | 63 | -------------------------------------------------------------------------------- /docs/src/components/Sidebar.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | 18 | 19 | 68 | 69 |
70 | 112 | -------------------------------------------------------------------------------- /docs/src/routes/_error.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 | 29 | 30 | 31 | {status} 32 | 33 | 34 |

{status}

35 | 36 |

{error.message}

37 | 38 | {#if dev && error.stack} 39 | 
{error.stack}
40 | {/if} 41 | -------------------------------------------------------------------------------- /docs/src/routes/_layout.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | 31 | 32 | 58 | 59 | 60 | Svelma 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 |