├── .eslintrc.json ├── .github └── workflows │ └── cd.yml ├── .gitignore ├── .npmignore ├── CHANGELOG.md ├── LICENSE ├── README.md ├── docs ├── .gitignore ├── .prettierrc.json ├── app.html ├── components │ ├── CodeView.vue │ └── ComponentView.vue ├── data │ └── links.ts ├── layouts │ └── default.vue ├── nuxt.config.js ├── package-lock.json ├── package.json ├── pages │ ├── accordion.vue │ ├── action-bar.vue │ ├── action-button.vue │ ├── action-group.vue │ ├── action-menu.vue │ ├── asset-file.vue │ ├── asset-folder.vue │ ├── asset-image.vue │ ├── asset-list.vue │ ├── auto-complete.vue │ ├── avatar.vue │ ├── badge.vue │ ├── breadcrumbs-item.vue │ ├── breadcrumbs.vue │ ├── button-group.vue │ ├── button.vue │ ├── calendar-date.vue │ ├── calendar.vue │ ├── card.vue │ ├── checkbox.vue │ ├── coach-mark.vue │ ├── color-area.vue │ ├── color-loupe.vue │ ├── color-slider.vue │ ├── color-wheel.vue │ ├── combobox.vue │ ├── context-menu.vue │ ├── date-picker.vue │ ├── dial.vue │ ├── dialog.vue │ ├── divider.vue │ ├── drop-indicator.vue │ ├── dropzone.vue │ ├── field-group.vue │ ├── field-label.vue │ ├── form-item.vue │ ├── form.vue │ ├── help-text.vue │ ├── hint-textfield.vue │ ├── icon.vue │ ├── index.vue │ ├── inline-alert.vue │ ├── item-list-item.vue │ ├── link.vue │ ├── logic-button.vue │ ├── menu-divider.vue │ ├── menu-item-header.vue │ ├── menu-item.vue │ ├── menu.vue │ ├── meter.vue │ ├── modal.vue │ ├── pagination-button.vue │ ├── picker-button.vue │ ├── picker.vue │ ├── popover.vue │ ├── progress-bar.vue │ ├── progress-circle.vue │ ├── quick-action.vue │ ├── radio.vue │ ├── sidenav.vue │ ├── slider-text-field.vue │ ├── slider-textfield.vue │ ├── slider.vue │ ├── split-view-pane.vue │ ├── split-view-splitter.vue │ ├── split-view.vue │ ├── table.vue │ ├── tabs.vue │ ├── tag.vue │ ├── text-area.vue │ ├── textfield.vue │ ├── toast.vue │ ├── tree-item.vue │ ├── tree-view-item.vue │ └── tree-view.vue ├── plugins │ └── register.ts ├── static │ ├── spectrum-css-icons.svg │ └── spectrum-icons.svg └── tsconfig.json ├── package-lock.json ├── package.json ├── rollup.config.js ├── scripts ├── README.md ├── componentsGenerator.js ├── generateIndexTs.js ├── generateTemplate.js ├── package-lock.json └── package.json ├── src ├── components │ ├── SpAccordion.vue │ ├── SpActionBar.vue │ ├── SpActionButton.vue │ ├── SpActionGroup.vue │ ├── SpActionMenu.vue │ ├── SpAssetFile.vue │ ├── SpAssetFolder.vue │ ├── SpAssetImage.vue │ ├── SpAssetList.vue │ ├── SpAutoComplete.vue │ ├── SpAvatar.vue │ ├── SpBadge.vue │ ├── SpBreadcrumbs.vue │ ├── SpBreadcrumbsItem.vue │ ├── SpButton.vue │ ├── SpButtonGroup.vue │ ├── SpCalendar.vue │ ├── SpCalendarDate.vue │ ├── SpCard.vue │ ├── SpCheckbox.vue │ ├── SpCoachMark.vue │ ├── SpColorArea.vue │ ├── SpColorLoupe.vue │ ├── SpColorSlider.vue │ ├── SpColorWheel.vue │ ├── SpCombobox.vue │ ├── SpContextMenu.vue │ ├── SpDatePicker.vue │ ├── SpDial.vue │ ├── SpDialog.vue │ ├── SpDivider.vue │ ├── SpDropIndicator.vue │ ├── SpDropzone.vue │ ├── SpFieldGroup.vue │ ├── SpFieldLabel.vue │ ├── SpForm.vue │ ├── SpFormItem.vue │ ├── SpHelpText.vue │ ├── SpHintTextfield.vue │ ├── SpIcon.vue │ ├── SpInlineAlert.vue │ ├── SpItemListItem.vue │ ├── SpLink.vue │ ├── SpLogicButton.vue │ ├── SpMenu.vue │ ├── SpMenuDivider.vue │ ├── SpMenuItem.vue │ ├── SpMenuItemHeader.vue │ ├── SpMeter.vue │ ├── SpModal.vue │ ├── SpPaginationButton.vue │ ├── SpPicker.vue │ ├── SpPickerButton.vue │ ├── SpPopover.vue │ ├── SpProgressBar.vue │ ├── SpProgressCircle.vue │ ├── SpQuickAction.vue │ ├── SpRadio.vue │ ├── SpSidenav.vue │ ├── SpSlider.vue │ ├── SpSliderTextfield.vue │ ├── SpSplitView.vue │ ├── SpSplitViewPane.vue │ ├── SpSplitViewSplitter.vue │ ├── SpTable.vue │ ├── SpTabs.vue │ ├── SpTag.vue │ ├── SpTextArea.vue │ ├── SpTextfield.vue │ ├── SpToast.vue │ ├── SpTreeItem.vue │ ├── SpTreeView.vue │ └── SpTreeViewItem.vue ├── index.ts ├── styles │ ├── index.ts │ └── slider-text-field.css ├── types │ ├── shims-tsx.d.ts │ └── shims-vue.d.ts └── utils │ ├── Color.ts │ ├── DropPosition.ts │ ├── Item.ts │ ├── MenuItem.ts │ └── addDragEventOnce.ts └── tsconfig.json /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "parserOptions": { 3 | "parser": "@typescript-eslint/parser", 4 | "sourceType": "module", 5 | "ecmaVersion": 2020 6 | }, 7 | "root": true, 8 | "env": { 9 | "browser": true, 10 | "node": true 11 | }, 12 | "ignorePatterns": [ 13 | "static/**/*", 14 | "docs/**/*" 15 | ], 16 | "parser": "vue-eslint-parser", 17 | "rules": { 18 | "eqeqeq": "off", 19 | "vue/component-tags-order": [ 20 | "error", 21 | { 22 | "order": [ 23 | "template", 24 | "style", 25 | "script" 26 | ] 27 | } 28 | ], 29 | "import/order": [ 30 | 2, 31 | { 32 | "alphabetize": { 33 | "order": "asc" 34 | } 35 | } 36 | ] 37 | }, 38 | "plugins": [ 39 | "import" 40 | ], 41 | "extends": [ 42 | "plugin:vue/recommended" 43 | ] 44 | } -------------------------------------------------------------------------------- /.github/workflows/cd.yml: -------------------------------------------------------------------------------- 1 | name: cd 2 | 3 | on: 4 | push: 5 | branches: 6 | - master 7 | 8 | jobs: 9 | cd: 10 | runs-on: ${{ matrix.os }} 11 | 12 | strategy: 13 | matrix: 14 | os: [ubuntu-latest] 15 | node: [14] 16 | 17 | steps: 18 | - name: Checkout 19 | uses: actions/checkout@master 20 | 21 | - name: Setup node env 22 | uses: actions/setup-node@v2.1.2 23 | with: 24 | node-version: ${{ matrix.node }} 25 | 26 | - name: Install dependencies 27 | run: npm install 28 | 29 | - name: Install dependencies for docs 30 | run: npm install 31 | working-directory: ./docs 32 | 33 | - name: Generate 34 | run: npm run generate 35 | working-directory: ./docs 36 | 37 | - name: Deploy 38 | uses: peaceiris/actions-gh-pages@v3 39 | with: 40 | github_token: ${{ secrets.GITHUB_TOKEN }} 41 | publish_dir: ./docs/dist 42 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | docs/.nuxt 3 | dist 4 | yarn-error.log 5 | .DS_Store -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | docs -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # v0.2.9 2 | Fix import. 3 | 4 | # v0.2.8 5 | Fix import. 6 | 7 | # v0.2.7 8 | - Fix build 9 | 10 | # v0.2.6 11 | - Remove debug. 12 | 13 | # v0.2.5 14 | - Add popover allow position. 15 | 16 | # v0.2.4 17 | - Fix slider movement. 18 | 19 | # v0.2.3 20 | - Improve slider UX. 21 | 22 | # v0.2.2 23 | - Add horizontal class to default ActionGroup. 24 | - Support vertical Divider. 25 | - Generate docs. 26 | 27 | # v0.2.1 28 | - Add treeview 29 | - Fix readme 30 | - Fix picker visible 31 | - Change `rollup-plugin-css-only` to `rollup-plugin-import-css` 32 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 toshusai 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 | -------------------------------------------------------------------------------- /docs/.gitignore: -------------------------------------------------------------------------------- 1 | dist 2 | node_modules 3 | .nuxt 4 | # ignore if host here 5 | # > mv dist spectrum-vue 6 | # > php -S localhost:8080 7 | spectrum-vue -------------------------------------------------------------------------------- /docs/.prettierrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "tabWidth": 2 3 | } 4 | -------------------------------------------------------------------------------- /docs/app.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | {{ HEAD }} 6 | 7 | 8 | 9 | {{ APP }} 10 | 11 | 12 | -------------------------------------------------------------------------------- /docs/components/CodeView.vue: -------------------------------------------------------------------------------- 1 | 6 | 14 | -------------------------------------------------------------------------------- /docs/components/ComponentView.vue: -------------------------------------------------------------------------------- 1 | 47 | 79 | -------------------------------------------------------------------------------- /docs/layouts/default.vue: -------------------------------------------------------------------------------- 1 | 42 | 43 | 71 | 72 | 146 | -------------------------------------------------------------------------------- /docs/nuxt.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | server: { 3 | host: "0.0.0.0", 4 | port: 10000, 5 | }, 6 | ssr: false, 7 | target: "static", 8 | router: { 9 | base: "/spectrum-vue/", 10 | }, 11 | head: { 12 | title: "Spectrum Vue", 13 | htmlAttrs: { 14 | lang: "en", 15 | }, 16 | meta: [ 17 | { charset: "utf-8" }, 18 | { name: "viewport", content: "width=device-width, initial-scale=1" }, 19 | { hid: "description", name: "description", content: "" }, 20 | { name: "format-detection", content: "telephone=no" }, 21 | ], 22 | }, 23 | css: [ 24 | "@spectrum-css/vars/dist/spectrum-global.css", 25 | "@spectrum-css/page", 26 | "@spectrum-css/vars/dist/spectrum-medium.css", 27 | "@spectrum-css/vars/dist/spectrum-light.css", 28 | "@spectrum-css/vars/dist/spectrum-dark.css", 29 | "@toshusai/spectrum-vue/dist/index.css", 30 | "highlight.js/styles/github-dark.css", 31 | ], 32 | 33 | plugins: ["~/plugins/register"], 34 | 35 | buildModules: ["@nuxt/typescript-build"], 36 | 37 | build: { 38 | babel: { 39 | plugins: [ 40 | ["@babel/plugin-proposal-private-property-in-object", { loose: true }], 41 | ], 42 | }, 43 | // extend(config) { 44 | // const path = require("path"); 45 | // // config.resolve.alias.vue = path.join(__dirname, "../../node_modules/vue"); 46 | // config.performance = config.performance || {}; 47 | // config.performance.maxEntrypointSize = 1000 * 1024; 48 | // config.performance.maxAssetSize = 1000 * 1024; 49 | // config.optimization.splitChunks.maxSize = 100 * 1024; 50 | // }, 51 | }, 52 | }; 53 | -------------------------------------------------------------------------------- /docs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "docs", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "dev": "nuxt", 8 | "generate": "nuxt generate", 9 | "prettier": "prettier --ignore-path .gitignore --write \"./**/*.{js,jsx,json,vue}\" ", 10 | "test": "echo \"Error: no test specified\" && exit 1" 11 | }, 12 | "author": "", 13 | "license": "ISC", 14 | "dependencies": { 15 | "@spectrum-css/page": "^3.0.7", 16 | "@spectrum-css/vars": "^4.1.1", 17 | "@toshusai/spectrum-vue": "../", 18 | "@types/loadicons": "^1.0.0", 19 | "core-js": "^3.15.1", 20 | "highlight.js": "^11.3.1", 21 | "loadicons": "^1.0.0", 22 | "nuxt": "^2.15.7", 23 | "prettier": "^2.4.1", 24 | "vue-github-button": "^1.3.0", 25 | "vue-property-decorator": "^9.1.2" 26 | }, 27 | "devDependencies": { 28 | "@nuxt/types": "^2.15.7", 29 | "@nuxt/typescript-build": "^2.1.0", 30 | "vue-class-component": "^7.2.6" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /docs/pages/accordion.vue: -------------------------------------------------------------------------------- 1 | 2 | 26 | 38 | -------------------------------------------------------------------------------- /docs/pages/action-bar.vue: -------------------------------------------------------------------------------- 1 | 2 | 12 | 24 | -------------------------------------------------------------------------------- /docs/pages/action-group.vue: -------------------------------------------------------------------------------- 1 | 2 | 62 | 74 | -------------------------------------------------------------------------------- /docs/pages/action-menu.vue: -------------------------------------------------------------------------------- 1 | 2 | 43 | 55 | -------------------------------------------------------------------------------- /docs/pages/asset-file.vue: -------------------------------------------------------------------------------- 1 | 2 | 17 | 29 | -------------------------------------------------------------------------------- /docs/pages/asset-folder.vue: -------------------------------------------------------------------------------- 1 | 2 | 17 | 29 | -------------------------------------------------------------------------------- /docs/pages/asset-image.vue: -------------------------------------------------------------------------------- 1 | 2 | 17 | 29 | -------------------------------------------------------------------------------- /docs/pages/asset-list.vue: -------------------------------------------------------------------------------- 1 | 2 | 12 | 24 | -------------------------------------------------------------------------------- /docs/pages/auto-complete.vue: -------------------------------------------------------------------------------- 1 | 2 | 12 | 24 | -------------------------------------------------------------------------------- /docs/pages/avatar.vue: -------------------------------------------------------------------------------- 1 | 2 | 24 | 36 | -------------------------------------------------------------------------------- /docs/pages/badge.vue: -------------------------------------------------------------------------------- 1 | 2 | 42 | 54 | -------------------------------------------------------------------------------- /docs/pages/breadcrumbs-item.vue: -------------------------------------------------------------------------------- 1 | 2 | 22 | 34 | -------------------------------------------------------------------------------- /docs/pages/breadcrumbs.vue: -------------------------------------------------------------------------------- 1 | 2 | 22 | 34 | -------------------------------------------------------------------------------- /docs/pages/button-group.vue: -------------------------------------------------------------------------------- 1 | 2 | 33 | 45 | -------------------------------------------------------------------------------- /docs/pages/button.vue: -------------------------------------------------------------------------------- 1 | 2 | 25 | 37 | -------------------------------------------------------------------------------- /docs/pages/calendar-date.vue: -------------------------------------------------------------------------------- 1 | 2 | 12 | 24 | -------------------------------------------------------------------------------- /docs/pages/calendar.vue: -------------------------------------------------------------------------------- 1 | 2 | 21 | 35 | -------------------------------------------------------------------------------- /docs/pages/card.vue: -------------------------------------------------------------------------------- 1 | 2 | 12 | 24 | -------------------------------------------------------------------------------- /docs/pages/checkbox.vue: -------------------------------------------------------------------------------- 1 | 2 | 51 | 63 | -------------------------------------------------------------------------------- /docs/pages/coach-mark.vue: -------------------------------------------------------------------------------- 1 | 2 | 12 | 24 | -------------------------------------------------------------------------------- /docs/pages/color-area.vue: -------------------------------------------------------------------------------- 1 | 2 | 22 | 37 | -------------------------------------------------------------------------------- /docs/pages/color-loupe.vue: -------------------------------------------------------------------------------- 1 | 2 | 12 | 24 | -------------------------------------------------------------------------------- /docs/pages/color-slider.vue: -------------------------------------------------------------------------------- 1 | 2 | 33 | 48 | -------------------------------------------------------------------------------- /docs/pages/color-wheel.vue: -------------------------------------------------------------------------------- 1 | 2 | 12 | 24 | -------------------------------------------------------------------------------- /docs/pages/combobox.vue: -------------------------------------------------------------------------------- 1 | 2 | 12 | 24 | -------------------------------------------------------------------------------- /docs/pages/context-menu.vue: -------------------------------------------------------------------------------- 1 | 2 | 12 | 24 | -------------------------------------------------------------------------------- /docs/pages/date-picker.vue: -------------------------------------------------------------------------------- 1 | 2 | 12 | 24 | -------------------------------------------------------------------------------- /docs/pages/dial.vue: -------------------------------------------------------------------------------- 1 | 2 | 12 | 24 | -------------------------------------------------------------------------------- /docs/pages/dialog.vue: -------------------------------------------------------------------------------- 1 | 2 | 12 | 24 | -------------------------------------------------------------------------------- /docs/pages/divider.vue: -------------------------------------------------------------------------------- 1 | 2 | 38 | 50 | -------------------------------------------------------------------------------- /docs/pages/drop-indicator.vue: -------------------------------------------------------------------------------- 1 | 2 | 12 | 24 | -------------------------------------------------------------------------------- /docs/pages/dropzone.vue: -------------------------------------------------------------------------------- 1 | 2 | 12 | 24 | -------------------------------------------------------------------------------- /docs/pages/field-group.vue: -------------------------------------------------------------------------------- 1 | 2 | 12 | 24 | -------------------------------------------------------------------------------- /docs/pages/field-label.vue: -------------------------------------------------------------------------------- 1 | 2 | 12 | 24 | -------------------------------------------------------------------------------- /docs/pages/form-item.vue: -------------------------------------------------------------------------------- 1 | 2 | 12 | 24 | -------------------------------------------------------------------------------- /docs/pages/form.vue: -------------------------------------------------------------------------------- 1 | 2 | 12 | 24 | -------------------------------------------------------------------------------- /docs/pages/help-text.vue: -------------------------------------------------------------------------------- 1 | 2 | 12 | 24 | -------------------------------------------------------------------------------- /docs/pages/hint-textfield.vue: -------------------------------------------------------------------------------- 1 | 2 | 12 | 24 | -------------------------------------------------------------------------------- /docs/pages/icon.vue: -------------------------------------------------------------------------------- 1 | 2 | 12 | 24 | -------------------------------------------------------------------------------- /docs/pages/index.vue: -------------------------------------------------------------------------------- 1 | 65 | 66 | 74 | 75 | 97 | -------------------------------------------------------------------------------- /docs/pages/inline-alert.vue: -------------------------------------------------------------------------------- 1 | 2 | 94 | 106 | -------------------------------------------------------------------------------- /docs/pages/item-list-item.vue: -------------------------------------------------------------------------------- 1 | 2 | 22 | 34 | -------------------------------------------------------------------------------- /docs/pages/link.vue: -------------------------------------------------------------------------------- 1 | 2 | 12 | 24 | -------------------------------------------------------------------------------- /docs/pages/logic-button.vue: -------------------------------------------------------------------------------- 1 | 2 | 12 | 24 | -------------------------------------------------------------------------------- /docs/pages/menu-divider.vue: -------------------------------------------------------------------------------- 1 | 2 | 12 | 24 | -------------------------------------------------------------------------------- /docs/pages/menu-item-header.vue: -------------------------------------------------------------------------------- 1 | 2 | 12 | 24 | -------------------------------------------------------------------------------- /docs/pages/menu-item.vue: -------------------------------------------------------------------------------- 1 | 2 | 12 | 24 | -------------------------------------------------------------------------------- /docs/pages/menu.vue: -------------------------------------------------------------------------------- 1 | 2 | 12 | 24 | -------------------------------------------------------------------------------- /docs/pages/meter.vue: -------------------------------------------------------------------------------- 1 | 2 | 12 | 24 | -------------------------------------------------------------------------------- /docs/pages/modal.vue: -------------------------------------------------------------------------------- 1 | 2 | 12 | 24 | -------------------------------------------------------------------------------- /docs/pages/pagination-button.vue: -------------------------------------------------------------------------------- 1 | 2 | 12 | 24 | -------------------------------------------------------------------------------- /docs/pages/picker-button.vue: -------------------------------------------------------------------------------- 1 | 2 | 12 | 24 | -------------------------------------------------------------------------------- /docs/pages/picker.vue: -------------------------------------------------------------------------------- 1 | 2 | 12 | 24 | -------------------------------------------------------------------------------- /docs/pages/popover.vue: -------------------------------------------------------------------------------- 1 | 2 | 30 | 43 | -------------------------------------------------------------------------------- /docs/pages/progress-bar.vue: -------------------------------------------------------------------------------- 1 | 2 | 12 | 24 | -------------------------------------------------------------------------------- /docs/pages/progress-circle.vue: -------------------------------------------------------------------------------- 1 | 2 | 12 | 24 | -------------------------------------------------------------------------------- /docs/pages/quick-action.vue: -------------------------------------------------------------------------------- 1 | 2 | 12 | 24 | -------------------------------------------------------------------------------- /docs/pages/radio.vue: -------------------------------------------------------------------------------- 1 | 2 | 12 | 24 | -------------------------------------------------------------------------------- /docs/pages/sidenav.vue: -------------------------------------------------------------------------------- 1 | 2 | 12 | 24 | -------------------------------------------------------------------------------- /docs/pages/slider-text-field.vue: -------------------------------------------------------------------------------- 1 | 11 | 58 | -------------------------------------------------------------------------------- /docs/pages/slider-textfield.vue: -------------------------------------------------------------------------------- 1 | 2 | 12 | 24 | -------------------------------------------------------------------------------- /docs/pages/slider.vue: -------------------------------------------------------------------------------- 1 | 2 | 101 | 119 | -------------------------------------------------------------------------------- /docs/pages/split-view-pane.vue: -------------------------------------------------------------------------------- 1 | 2 | 12 | 24 | -------------------------------------------------------------------------------- /docs/pages/split-view-splitter.vue: -------------------------------------------------------------------------------- 1 | 2 | 12 | 24 | -------------------------------------------------------------------------------- /docs/pages/split-view.vue: -------------------------------------------------------------------------------- 1 | 2 | 12 | 24 | -------------------------------------------------------------------------------- /docs/pages/table.vue: -------------------------------------------------------------------------------- 1 | 2 | 12 | 24 | -------------------------------------------------------------------------------- /docs/pages/tabs.vue: -------------------------------------------------------------------------------- 1 | 2 | 12 | 24 | -------------------------------------------------------------------------------- /docs/pages/tag.vue: -------------------------------------------------------------------------------- 1 | 2 | 12 | 24 | -------------------------------------------------------------------------------- /docs/pages/text-area.vue: -------------------------------------------------------------------------------- 1 | 2 | 12 | 24 | -------------------------------------------------------------------------------- /docs/pages/textfield.vue: -------------------------------------------------------------------------------- 1 | 2 | 35 | 47 | -------------------------------------------------------------------------------- /docs/pages/toast.vue: -------------------------------------------------------------------------------- 1 | 2 | 12 | 24 | -------------------------------------------------------------------------------- /docs/pages/tree-item.vue: -------------------------------------------------------------------------------- 1 | 2 | 12 | 24 | -------------------------------------------------------------------------------- /docs/pages/tree-view-item.vue: -------------------------------------------------------------------------------- 1 | 2 | 12 | 24 | -------------------------------------------------------------------------------- /docs/pages/tree-view.vue: -------------------------------------------------------------------------------- 1 | 2 | 12 | 24 | -------------------------------------------------------------------------------- /docs/plugins/register.ts: -------------------------------------------------------------------------------- 1 | import * as components from "@toshusai/spectrum-vue" 2 | import ComponentView from "../components/ComponentView.vue" 3 | import CodeView from "../components/CodeView.vue" 4 | import Vue from "vue" 5 | 6 | Object.entries(components).forEach(([name, component]) => { 7 | Vue.component(name, component) 8 | }) 9 | 10 | 11 | Vue.component('component-view', ComponentView) 12 | Vue.component('code-view', CodeView) 13 | -------------------------------------------------------------------------------- /docs/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2018", 4 | "module": "ESNext", 5 | "moduleResolution": "Node", 6 | "lib": ["ESNext", "ESNext.AsyncIterable", "DOM"], 7 | "esModuleInterop": true, 8 | "allowJs": true, 9 | "sourceMap": true, 10 | "strict": true, 11 | "noEmit": true, 12 | "experimentalDecorators": true, 13 | "baseUrl": ".", 14 | "paths": { 15 | "~/*": ["./*"], 16 | "@/*": ["./*"] 17 | }, 18 | "types": [ 19 | "@nuxt/types", 20 | "@types/node", 21 | "types", 22 | "cypress", 23 | "cypress-file-upload" 24 | ] 25 | }, 26 | "exclude": ["node_modules", ".nuxt", "dist"] 27 | } 28 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@toshusai/spectrum-vue", 3 | "version": "0.2.9", 4 | "description": "UI Components for Vue based on Adobe Spectrum", 5 | "main": "dist/index.js", 6 | "module": "dist/index.esm.js", 7 | "scripts": { 8 | "build": "rollup -c", 9 | "lint": "eslint --fix --ext \".ts,.vue\" --ignore-path .gitignore .", 10 | "prepublish": "npm run build" 11 | }, 12 | "peerDependencies": { 13 | "vue-class-component": "^7.2.6", 14 | "vue-property-decorator": "^9.1.2" 15 | }, 16 | "dependencies": { 17 | "@adobe/spectrum-css-workflow-icons": "^1.2.1", 18 | "@spectrum-css/accordion": "^3.0.9", 19 | "@spectrum-css/actionbutton": "^1.0.5", 20 | "@spectrum-css/actiongroup": "^1.0.4", 21 | "@spectrum-css/actionmenu": "^3.0.9", 22 | "@spectrum-css/asset": "^3.0.8", 23 | "@spectrum-css/assetlist": "^3.0.9", 24 | "@spectrum-css/avatar": "^5.0.4", 25 | "@spectrum-css/badge": "^1.0.6", 26 | "@spectrum-css/breadcrumb": "^4.0.5", 27 | "@spectrum-css/button": "^4.0.0", 28 | "@spectrum-css/buttongroup": "^3.0.9", 29 | "@spectrum-css/calendar": "^3.0.9", 30 | "@spectrum-css/checkbox": "^3.0.9", 31 | "@spectrum-css/coachmark": "^3.0.9", 32 | "@spectrum-css/colorarea": "^1.0.3", 33 | "@spectrum-css/colorhandle": "^1.0.3", 34 | "@spectrum-css/colorloupe": "^1.0.8", 35 | "@spectrum-css/colorslider": "^1.0.3", 36 | "@spectrum-css/colorwheel": "^1.0.8", 37 | "@spectrum-css/dial": "^1.0.9", 38 | "@spectrum-css/dialog": "^3.0.9", 39 | "@spectrum-css/divider": "^1.0.4", 40 | "@spectrum-css/dropindicator": "^3.0.4", 41 | "@spectrum-css/dropzone": "^3.0.9", 42 | "@spectrum-css/fieldgroup": "^3.0.9", 43 | "@spectrum-css/fieldlabel": "^4.0.0", 44 | "@spectrum-css/helptext": "^1.0.5", 45 | "@spectrum-css/icon": "^3.0.4", 46 | "@spectrum-css/inlinealert": "^2.0.5", 47 | "@spectrum-css/inputgroup": "^4.0.0", 48 | "@spectrum-css/link": "^3.1.8", 49 | "@spectrum-css/menu": "^3.0.8", 50 | "@spectrum-css/modal": "^3.0.3", 51 | "@spectrum-css/page": "^3.0.3", 52 | "@spectrum-css/pagination": "^3.0.9", 53 | "@spectrum-css/picker": "^1.1.3", 54 | "@spectrum-css/pickerbutton": "^1.1.0", 55 | "@spectrum-css/popover": "^3.0.4", 56 | "@spectrum-css/progressbar": "^1.0.9", 57 | "@spectrum-css/progresscircle": "^1.0.8", 58 | "@spectrum-css/quickaction": "^3.0.9", 59 | "@spectrum-css/radio": "^3.0.9", 60 | "@spectrum-css/sidenav": "^3.0.8", 61 | "@spectrum-css/slider": "^3.0.5", 62 | "@spectrum-css/splitbutton": "^3.0.9", 63 | "@spectrum-css/splitview": "^3.0.4", 64 | "@spectrum-css/table": "^4.0.4", 65 | "@spectrum-css/tabs": "^3.1.0", 66 | "@spectrum-css/tag": "^3.1.2", 67 | "@spectrum-css/textfield": "^3.0.3", 68 | "@spectrum-css/thumbnail": "^1.0.3", 69 | "@spectrum-css/toast": "^4.1.2", 70 | "@spectrum-css/treeview": "^4.0.0", 71 | "@spectrum-css/typography": "4.0.4", 72 | "@spectrum-css/underlay": "^2.0.16", 73 | "@spectrum-css/vars": "^4.0.1", 74 | "eslint-plugin-import": "^2.25.3", 75 | "eslint-plugin-vue": "7.15.1", 76 | "prettier": "^2.4.1" 77 | }, 78 | "devDependencies": { 79 | "@rollup/plugin-commonjs": "^14.0.0", 80 | "@rollup/plugin-node-resolve": "^8.4.0", 81 | "@types/color-convert": "^2.0.0", 82 | "@typescript-eslint/eslint-plugin": "^4.33.0", 83 | "@typescript-eslint/parser": "^4.33.0", 84 | "@vue/compiler-sfc": "^3.0.0-rc.5", 85 | "color-convert": "^2.0.1", 86 | "eslint": "7.32.0", 87 | "rollup": "^2.23.1", 88 | "rollup-plugin-import-css": "^3.0.2", 89 | "rollup-plugin-peer-deps-external": "^2.2.3", 90 | "rollup-plugin-typescript2": "^0.27.2", 91 | "rollup-plugin-vue": "^5.1.6", 92 | "typescript": "^4.4.4", 93 | "vue": "^2.6.11", 94 | "vue-class-component": "^7.2.6", 95 | "vue-property-decorator": "^9.1.2", 96 | "vue-template-compiler": "^2.6.11" 97 | }, 98 | "keywords": [ 99 | "vue", 100 | "typescript", 101 | "component", 102 | "ui-framework", 103 | "adobe", 104 | "adobe-spectrum", 105 | "spectrum-css" 106 | ], 107 | "author": "toshusai", 108 | "license": "MIT", 109 | "homepage": "https://github.com/toshusai/spectrum-vue#readme", 110 | "repository": { 111 | "type": "git", 112 | "url": "git+https://github.com/toshusai/spectrum-vue" 113 | }, 114 | "bugs": { 115 | "url": "https://github.com/toshusai/spectrum-vue/issues" 116 | }, 117 | "publishConfig": { 118 | "access": "public" 119 | } 120 | } 121 | -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | import commonjs from "@rollup/plugin-commonjs"; 2 | import resolve from "@rollup/plugin-node-resolve"; 3 | import css from "rollup-plugin-import-css"; 4 | import peerDepsExternal from "rollup-plugin-peer-deps-external"; 5 | import typescript from "rollup-plugin-typescript2"; 6 | import vue from "rollup-plugin-vue"; 7 | import packageJson from "./package.json"; 8 | 9 | export default { 10 | input: "src/index.ts", 11 | output: [ 12 | { 13 | format: "cjs", 14 | file: packageJson.main, 15 | sourcemap: true 16 | }, 17 | { 18 | format: "esm", 19 | file: packageJson.module, 20 | sourcemap: true 21 | } 22 | ], 23 | plugins: [ 24 | css({ output: "index.css" }), 25 | peerDepsExternal(), 26 | resolve(), 27 | commonjs(), 28 | typescript(), 29 | vue({ css: false }), 30 | ] 31 | }; 32 | -------------------------------------------------------------------------------- /scripts/README.md: -------------------------------------------------------------------------------- 1 | # Generate Documentation 2 | The multiline comments in Single Component File can generate document as Vue template. 3 | `@Prop()`, ``, `` are generated automatically as docs. 4 | 5 | ## `` 6 | The code inside the tag is expanded as a vue template and the code is also displayed as a highlighted string. 7 | 8 | ## `` 9 | The code inside the tag is expanded in class prop/methods scope. 10 | It can add data props for documentation. 11 | 12 | ## `` 13 | The code inside the tag is expanded in import scope. 14 | It can add new import for documentation like `import { Color } from "@toshusai/spectrum-vue";` 15 | 16 | ## Example 17 | ```vue 18 | 21 | 44 | ``` -------------------------------------------------------------------------------- /scripts/componentsGenerator.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Generate component name and page path list. 3 | */ 4 | const fs = require("fs"); 5 | const Case = require("case") 6 | 7 | const dir = fs.readdirSync("../src/components") 8 | 9 | let exportNames = [] 10 | for (let i = 0; i < dir.length; i++) { 11 | const name = dir[i].replace(".vue", "").replace(/^Sp/,"") 12 | exportNames.push(name) 13 | } 14 | 15 | 16 | const array = exportNames.map(name=>{ 17 | return `{ text: "${name}", href: "/${Case.kebab(name)}", }` 18 | }).join(",\n ") 19 | 20 | const src = `export const links = [${array}]` 21 | 22 | fs.writeFileSync(`../docs/data/links.ts`, src) 23 | -------------------------------------------------------------------------------- /scripts/generateIndexTs.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Generate src/index.ts 3 | * import and export all component & utils 4 | */ 5 | const fs = require("fs") 6 | 7 | const dir = fs.readdirSync("../src/components") 8 | 9 | let exportNames = [] 10 | let src = `` 11 | for (let i = 0; i < dir.length; i++) { 12 | const name = dir[i].replace(".vue", "") 13 | src += `import ${name} from "./components/${name}.vue"\n` 14 | exportNames.push(name) 15 | } 16 | 17 | { 18 | const dir = fs.readdirSync("./src/utils") 19 | for (let i = 0; i < dir.length; i++) { 20 | const name = dir[i].replace(".ts", "") 21 | src += `import ${name} from "./utils/${name}"\n` 22 | exportNames.push(name) 23 | } 24 | } 25 | src += `import "./styles"\n` 26 | 27 | src += `export {\n ${exportNames.join(",\n ")}\n}\n` 28 | 29 | fs.writeFileSync(`./src/index.ts`, src) -------------------------------------------------------------------------------- /scripts/package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "scripts", 3 | "version": "1.0.0", 4 | "lockfileVersion": 2, 5 | "requires": true, 6 | "packages": { 7 | "": { 8 | "name": "scripts", 9 | "version": "1.0.0", 10 | "license": "MIT", 11 | "dependencies": { 12 | "case": "^1.6.3", 13 | "typescript": "^4.5.2" 14 | } 15 | }, 16 | "node_modules/case": { 17 | "version": "1.6.3", 18 | "resolved": "https://registry.npmjs.org/case/-/case-1.6.3.tgz", 19 | "integrity": "sha512-mzDSXIPaFwVDvZAHqZ9VlbyF4yyXRuX6IvB06WvPYkqJVO24kX1PPhv9bfpKNFZyxYFmmgo03HUiD8iklmJYRQ==", 20 | "engines": { 21 | "node": ">= 0.8.0" 22 | } 23 | }, 24 | "node_modules/typescript": { 25 | "version": "4.5.2", 26 | "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.5.2.tgz", 27 | "integrity": "sha512-5BlMof9H1yGt0P8/WF+wPNw6GfctgGjXp5hkblpyT+8rkASSmkUKMXrxR0Xg8ThVCi/JnHQiKXeBaEwCeQwMFw==", 28 | "bin": { 29 | "tsc": "bin/tsc", 30 | "tsserver": "bin/tsserver" 31 | }, 32 | "engines": { 33 | "node": ">=4.2.0" 34 | } 35 | } 36 | }, 37 | "dependencies": { 38 | "case": { 39 | "version": "1.6.3", 40 | "resolved": "https://registry.npmjs.org/case/-/case-1.6.3.tgz", 41 | "integrity": "sha512-mzDSXIPaFwVDvZAHqZ9VlbyF4yyXRuX6IvB06WvPYkqJVO24kX1PPhv9bfpKNFZyxYFmmgo03HUiD8iklmJYRQ==" 42 | }, 43 | "typescript": { 44 | "version": "4.5.2", 45 | "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.5.2.tgz", 46 | "integrity": "sha512-5BlMof9H1yGt0P8/WF+wPNw6GfctgGjXp5hkblpyT+8rkASSmkUKMXrxR0Xg8ThVCi/JnHQiKXeBaEwCeQwMFw==" 47 | } 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /scripts/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "scripts", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "", 6 | "scripts": {}, 7 | "author": "tosuhsai", 8 | "license": "MIT", 9 | "dependencies": { 10 | "case": "^1.6.3", 11 | "typescript": "^4.5.2" 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /src/components/SpAccordion.vue: -------------------------------------------------------------------------------- 1 | 49 | 50 | 79 | -------------------------------------------------------------------------------- /src/components/SpActionBar.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | -------------------------------------------------------------------------------- /src/components/SpActionButton.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | 133 | -------------------------------------------------------------------------------- /src/components/SpActionGroup.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | -------------------------------------------------------------------------------- /src/components/SpActionMenu.vue: -------------------------------------------------------------------------------- 1 | 53 | 54 | -------------------------------------------------------------------------------- /src/components/SpAssetFile.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | -------------------------------------------------------------------------------- /src/components/SpAssetFolder.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | -------------------------------------------------------------------------------- /src/components/SpAssetImage.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | -------------------------------------------------------------------------------- /src/components/SpAssetList.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | -------------------------------------------------------------------------------- /src/components/SpAutoComplete.vue: -------------------------------------------------------------------------------- 1 | 47 | -------------------------------------------------------------------------------- /src/components/SpAvatar.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | -------------------------------------------------------------------------------- /src/components/SpBadge.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | -------------------------------------------------------------------------------- /src/components/SpBreadcrumbs.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | -------------------------------------------------------------------------------- /src/components/SpBreadcrumbsItem.vue: -------------------------------------------------------------------------------- 1 | 45 | 46 | -------------------------------------------------------------------------------- /src/components/SpButton.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | -------------------------------------------------------------------------------- /src/components/SpButtonGroup.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | -------------------------------------------------------------------------------- /src/components/SpCalendarDate.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | -------------------------------------------------------------------------------- /src/components/SpCard.vue: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /src/components/SpCheckbox.vue: -------------------------------------------------------------------------------- 1 | 41 | 42 | -------------------------------------------------------------------------------- /src/components/SpCoachMark.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /src/components/SpColorLoupe.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | -------------------------------------------------------------------------------- /src/components/SpColorSlider.vue: -------------------------------------------------------------------------------- 1 | 51 | 52 | -------------------------------------------------------------------------------- /src/components/SpColorWheel.vue: -------------------------------------------------------------------------------- 1 | 90 | 91 | -------------------------------------------------------------------------------- /src/components/SpCombobox.vue: -------------------------------------------------------------------------------- 1 | 72 | 73 | -------------------------------------------------------------------------------- /src/components/SpContextMenu.vue: -------------------------------------------------------------------------------- 1 | 23 | 24 | -------------------------------------------------------------------------------- /src/components/SpDatePicker.vue: -------------------------------------------------------------------------------- 1 | 45 | 46 | -------------------------------------------------------------------------------- /src/components/SpDial.vue: -------------------------------------------------------------------------------- 1 | 46 | 47 | -------------------------------------------------------------------------------- /src/components/SpDialog.vue: -------------------------------------------------------------------------------- 1 | 86 | 87 | -------------------------------------------------------------------------------- /src/components/SpDivider.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/components/SpDropIndicator.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | -------------------------------------------------------------------------------- /src/components/SpDropzone.vue: -------------------------------------------------------------------------------- 1 | 75 | 76 | 77 | -------------------------------------------------------------------------------- /src/components/SpFieldGroup.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | -------------------------------------------------------------------------------- /src/components/SpFieldLabel.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | -------------------------------------------------------------------------------- /src/components/SpForm.vue: -------------------------------------------------------------------------------- 1 | 9 | -------------------------------------------------------------------------------- /src/components/SpFormItem.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /src/components/SpHelpText.vue: -------------------------------------------------------------------------------- 1 | 28 | 29 | -------------------------------------------------------------------------------- /src/components/SpHintTextfield.vue: -------------------------------------------------------------------------------- 1 | 57 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /src/components/SpIcon.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/components/SpInlineAlert.vue: -------------------------------------------------------------------------------- 1 | 43 | -------------------------------------------------------------------------------- /src/components/SpItemListItem.vue: -------------------------------------------------------------------------------- 1 | 44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /src/components/SpLink.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | -------------------------------------------------------------------------------- /src/components/SpLogicButton.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | -------------------------------------------------------------------------------- /src/components/SpMenu.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | -------------------------------------------------------------------------------- /src/components/SpMenuDivider.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | -------------------------------------------------------------------------------- /src/components/SpMenuItem.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | -------------------------------------------------------------------------------- /src/components/SpMenuItemHeader.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | -------------------------------------------------------------------------------- /src/components/SpMeter.vue: -------------------------------------------------------------------------------- 1 | 35 | 36 | -------------------------------------------------------------------------------- /src/components/SpModal.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/components/SpPaginationButton.vue: -------------------------------------------------------------------------------- 1 | 44 | 45 | -------------------------------------------------------------------------------- /src/components/SpPicker.vue: -------------------------------------------------------------------------------- 1 | 87 | 88 | -------------------------------------------------------------------------------- /src/components/SpPickerButton.vue: -------------------------------------------------------------------------------- 1 | 30 | 31 | -------------------------------------------------------------------------------- /src/components/SpProgressBar.vue: -------------------------------------------------------------------------------- 1 | 40 | 41 | -------------------------------------------------------------------------------- /src/components/SpProgressCircle.vue: -------------------------------------------------------------------------------- 1 | 30 | 31 | -------------------------------------------------------------------------------- /src/components/SpQuickAction.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | -------------------------------------------------------------------------------- /src/components/SpRadio.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | -------------------------------------------------------------------------------- /src/components/SpSidenav.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /src/components/SpSliderTextfield.vue: -------------------------------------------------------------------------------- 1 | 52 | 53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /src/components/SpSplitView.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /src/components/SpSplitViewPane.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/components/SpSplitViewSplitter.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/components/SpTable.vue: -------------------------------------------------------------------------------- 1 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /src/components/SpTabs.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /src/components/SpTag.vue: -------------------------------------------------------------------------------- 1 | 30 | 31 | -------------------------------------------------------------------------------- /src/components/SpTextArea.vue: -------------------------------------------------------------------------------- 1 |