├── .husky ├── .gitignore └── pre-commit ├── svelte ├── tests │ ├── routes.js │ ├── index.js │ ├── index.html │ └── Index.svelte ├── .gitignore ├── postcss.config.js ├── src │ ├── buttons │ │ ├── Spacer.svelte │ │ ├── Label.svelte │ │ ├── Separator.svelte │ │ ├── Button.svelte │ │ ├── Icon.svelte │ │ └── Item.svelte │ ├── helpers.js │ ├── index.js │ └── components │ │ ├── Menu.svelte │ │ ├── BarComponent.svelte │ │ ├── Group.svelte │ │ └── Toolbar.svelte ├── demos │ ├── assets │ │ └── icons │ │ │ ├── svelte-favicon.ico │ │ │ ├── index.js │ │ │ ├── Logo.svg │ │ │ └── GitHubLogo.svg │ ├── index.js │ ├── index.html │ ├── common │ │ ├── helpers.js │ │ ├── Link.svelte │ │ ├── Router.svelte │ │ └── Index.svelte │ ├── cases │ │ ├── BasicInit.svelte │ │ ├── Values.svelte │ │ ├── HeaderMenu.svelte │ │ ├── OverflowMenu.svelte │ │ ├── OverflowWrap.svelte │ │ ├── OverflowMenuGroups.svelte │ │ ├── OverflowCollapsed.svelte │ │ ├── Ribbon.svelte │ │ ├── MultiLine.svelte │ │ ├── CollapsedGroups.svelte │ │ └── Buttons.svelte │ └── routes.js ├── cypress.config.js ├── cypress │ ├── fixtures │ │ └── example.json │ ├── support │ │ ├── commands.js │ │ └── e2e.js │ └── e2e │ │ ├── basic │ │ ├── click-items.cy.js │ │ ├── wrap-content.cy.js │ │ ├── collapse-overflow.cy.js │ │ └── click-overflow-item.cy.js │ │ └── demos.cy.js ├── svelte.config.js ├── types │ └── index.d.ts ├── index.html ├── license.txt ├── whatsnew.md ├── package.json ├── readme.md └── vite.config.js ├── .editorconfig ├── .gitignore ├── index.html ├── .prettierrc ├── .eslintrc.js ├── license.txt ├── package.json ├── readme.md └── eslint.config.mjs /.husky/.gitignore: -------------------------------------------------------------------------------- 1 | _ 2 | -------------------------------------------------------------------------------- /svelte/tests/routes.js: -------------------------------------------------------------------------------- 1 | export const links = []; 2 | -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | yarn run lint-staged 4 | -------------------------------------------------------------------------------- /svelte/.gitignore: -------------------------------------------------------------------------------- 1 | dist 2 | cypress/screenshots 3 | cypress/videos 4 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = tab 5 | indent_size = 4 -------------------------------------------------------------------------------- /svelte/postcss.config.js: -------------------------------------------------------------------------------- 1 | import autoprefixer from "autoprefixer"; 2 | 3 | const plugins = [autoprefixer]; 4 | export { plugins }; 5 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | package-lock.json 3 | 4 | *.zip 5 | .Ds_store 6 | *.tgz 7 | *.log 8 | .vscode 9 | .idea 10 | .env.local -------------------------------------------------------------------------------- /svelte/src/buttons/Spacer.svelte: -------------------------------------------------------------------------------- 1 |
2 | 3 | 8 | -------------------------------------------------------------------------------- /svelte/demos/assets/icons/svelte-favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/svar-widgets/toolbar/HEAD/svelte/demos/assets/icons/svelte-favicon.ico -------------------------------------------------------------------------------- /svelte/demos/assets/icons/index.js: -------------------------------------------------------------------------------- 1 | export { default as GitHubLogoIcon } from "./GitHubLogo.svg"; 2 | export { default as LogoIcon } from "./Logo.svg"; 3 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /svelte/cypress.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "cypress"; 2 | 3 | export default defineConfig({ 4 | video: false, 5 | e2e: { 6 | setupNodeEvents() {}, 7 | }, 8 | }); 9 | -------------------------------------------------------------------------------- /svelte/tests/index.js: -------------------------------------------------------------------------------- 1 | import Demos from "./Index.svelte"; 2 | import { mount } from "svelte"; 3 | 4 | mount(Demos, { 5 | target: document.querySelector("#wx_demo_area") || document.body, 6 | }); 7 | -------------------------------------------------------------------------------- /svelte/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 | } 6 | -------------------------------------------------------------------------------- /svelte/src/helpers.js: -------------------------------------------------------------------------------- 1 | const handlers = {}; 2 | export function getItemHandler(type) { 3 | return handlers[type] || type; 4 | } 5 | export function registerToolbarItem(type, handler) { 6 | handlers[type] = handler; 7 | } 8 | -------------------------------------------------------------------------------- /svelte/svelte.config.js: -------------------------------------------------------------------------------- 1 | import { vitePreprocess } from "@sveltejs/vite-plugin-svelte"; 2 | 3 | export default { 4 | // Consult https://svelte.dev/docs#compile-time-svelte-preprocess 5 | // for more information about preprocessors 6 | preprocess: vitePreprocess(), 7 | }; 8 | -------------------------------------------------------------------------------- /svelte/tests/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Svelte Widgets 7 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /svelte/cypress/support/commands.js: -------------------------------------------------------------------------------- 1 | Cypress.Commands.add("shot", (...args) => { 2 | // eslint-disable-next-line cypress/no-unnecessary-waiting 3 | cy.wait(100); 4 | 5 | const name = args.filter(a => typeof a !== "object").join("-"); 6 | const conf = 7 | typeof args[args.length - 1] === "object" ? args[args.length - 1] : {}; 8 | const sconf = { ...conf, overwrite: true }; 9 | 10 | if (conf.area) cy.get(conf.area).screenshot(name, sconf); 11 | else cy.screenshot(name, sconf); 12 | }); 13 | -------------------------------------------------------------------------------- /svelte/src/buttons/Label.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | {#if children} 6 |
7 | {@render children()} 8 |
9 | {:else} 10 |
{value || text}
11 | {/if} 12 | 13 | 22 | -------------------------------------------------------------------------------- /svelte/demos/index.js: -------------------------------------------------------------------------------- 1 | import { mount } from "svelte"; 2 | import Demos from "./common/Index.svelte"; 3 | import { Willow, WillowDark } from "@svar-ui/svelte-core"; 4 | 5 | mount(Demos, { 6 | target: document.querySelector("#wx_demo_area") || document.body, 7 | props: { 8 | publicName: "Toolbar", 9 | productTag: "toolbar", 10 | skins: [ 11 | { id: "willow", label: "Willow", component: Willow }, 12 | { id: "willow-dark", label: "Dark", component: WillowDark }, 13 | ], 14 | }, 15 | }); 16 | -------------------------------------------------------------------------------- /svelte/demos/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Svelte Widgets 7 | 14 | 15 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "useTabs": true, 3 | "semi": true, 4 | "singleQuote": false, 5 | "quoteProps": "as-needed", 6 | "trailingComma": "es5", 7 | "bracketSpacing": true, 8 | "arrowParens": "avoid", 9 | "svelteSortOrder": "options-scripts-markup-styles", 10 | "plugins": [ 11 | "prettier-plugin-svelte" 12 | ], 13 | "overrides": [ 14 | { 15 | "files": "*.svelte", 16 | "options": { 17 | "parser": "svelte" 18 | } 19 | }, 20 | { 21 | "files": "*.ts", 22 | "options": { 23 | "parser": "typescript" 24 | } 25 | } 26 | ] 27 | } -------------------------------------------------------------------------------- /svelte/src/buttons/Separator.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |
 
6 | 7 | 25 | -------------------------------------------------------------------------------- /svelte/cypress/e2e/basic/click-items.cy.js: -------------------------------------------------------------------------------- 1 | context("Basic: toolbar buttons are clickable", () => { 2 | it("clicks toolbar items and checks gray bar text", () => { 3 | cy.visit("/index.html#/base/willow"); 4 | 5 | cy.get(".wx-tb-element[data-id=edit] button").click(); 6 | cy.get(".demo-status").should("contain", "Button 'edit' clicked"); 7 | 8 | cy.get(".wx-tb-element[data-id=copy] button").click(); 9 | cy.get(".demo-status").should("contain", "Button 'copy' clicked"); 10 | 11 | cy.get(".wx-tb-element[data-id=delete] button").click(); 12 | cy.get(".demo-status").should("contain", "Button 'delete' clicked"); 13 | }); 14 | }); 15 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | browser: true, 5 | node: true, 6 | es6: true, 7 | }, 8 | extends: ["plugin:cypress/recommended", "eslint:recommended", "prettier"], 9 | parserOptions: { 10 | ecmaVersion: 2020, 11 | sourceType: "module", 12 | extraFileExtensions: [".svelte"], 13 | }, 14 | plugins: ["svelte3"], 15 | 16 | overrides: [ 17 | { 18 | files: ["*.svelte"], 19 | processor: "svelte3/svelte3", 20 | }, 21 | ], 22 | settings: { 23 | // [todo] we can add stylelint for this 24 | "svelte3/ignore-styles": () => true, 25 | }, 26 | rules: { 27 | "no-bitwise": ["error"], 28 | }, 29 | }; 30 | -------------------------------------------------------------------------------- /svelte/cypress/e2e/demos.cy.js: -------------------------------------------------------------------------------- 1 | const cases = [ 2 | "/base/:skin", 3 | "/buttons/:skin", 4 | "/collapsed/:skin", 5 | "/menu-groups/:skin", 6 | "/menu/:skin", 7 | "/multiline/:skin", 8 | "/ribbon/:skin", 9 | "/sections/:skin", 10 | "/values/:skin", 11 | "/wrap/:skin", 12 | ]; 13 | 14 | const skins = ["material", "willow", "willow-dark"]; 15 | const links = []; 16 | 17 | cases.forEach(w => { 18 | skins.forEach(s => { 19 | links.push(w.replace(":skin", s)); 20 | }); 21 | }); 22 | 23 | context("Basic functionality", () => { 24 | it("widget", () => { 25 | links.forEach(w => { 26 | cy.visit(`/index.html#${w}`); 27 | cy.shot(w, { area: ".content" }); 28 | }); 29 | }); 30 | }); 31 | -------------------------------------------------------------------------------- /svelte/src/index.js: -------------------------------------------------------------------------------- 1 | import Toolbar from "./components/Toolbar.svelte"; 2 | import { registerToolbarItem } from "./helpers.js"; 3 | 4 | import Separator from "./buttons/Separator.svelte"; 5 | import Spacer from "./buttons/Spacer.svelte"; 6 | import Button from "./buttons/Button.svelte"; 7 | import Label from "./buttons/Label.svelte"; 8 | import Icon from "./buttons/Icon.svelte"; 9 | import Item from "./buttons/Item.svelte"; 10 | 11 | registerToolbarItem("button", Button); 12 | registerToolbarItem("separator", Separator); 13 | registerToolbarItem("spacer", Spacer); 14 | registerToolbarItem("label", Label); 15 | registerToolbarItem("item", Item); 16 | registerToolbarItem("icon", Icon); 17 | 18 | export { Toolbar, registerToolbarItem }; 19 | -------------------------------------------------------------------------------- /svelte/cypress/support/e2e.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 | -------------------------------------------------------------------------------- /svelte/demos/common/helpers.js: -------------------------------------------------------------------------------- 1 | import { push } from "svelte-spa-router"; 2 | import { wrap } from "svelte-spa-router/wrap"; 3 | import { links as raw } from "../routes"; 4 | 5 | const routes = { 6 | "/": wrap({ 7 | component: {}, 8 | conditions: () => { 9 | push("/base/willow"); 10 | return false; 11 | }, 12 | }), 13 | }; 14 | 15 | function getRoutes(skinSettings, cb) { 16 | raw.forEach( 17 | a => 18 | (routes[a[0]] = wrap({ 19 | component: a[2], 20 | userData: a, 21 | props: { ...skinSettings }, 22 | conditions: x => { 23 | cb(x.location); 24 | return true; 25 | }, 26 | })) 27 | ); 28 | 29 | return routes; 30 | } 31 | 32 | function getLinks() { 33 | return raw; 34 | } 35 | 36 | export { push, getRoutes, getLinks }; 37 | -------------------------------------------------------------------------------- /svelte/src/buttons/Button.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | {#if menu} 8 | 9 | 10 |
11 | 12 | {text} 13 |
14 | {:else} 15 | 128 | 129 | 130 | 131 |
(show = false)} role="none"> 132 |
133 | 134 | 135 | 136 |
137 |
138 | 139 | 140 | 141 | 357 | --------------------------------------------------------------------------------