├── .editorconfig ├── .ember-cli ├── .eslintignore ├── .eslintrc.js ├── .github └── workflows │ └── ci.yml ├── .gitignore ├── .npmignore ├── .prettierignore ├── .prettierrc.js ├── .template-lintrc.js ├── .watchmanconfig ├── CONTRIBUTING.md ├── LICENSE ├── LICENSE.md ├── Makefile ├── README.md ├── addon ├── .gitkeep ├── components │ ├── .gitkeep │ ├── file-input.hbs │ ├── file-input.js │ ├── ui-button.hbs │ ├── ui-button.js │ ├── ui-checkbox-group.hbs │ ├── ui-checkbox-group.js │ ├── ui-checkbox.hbs │ ├── ui-checkbox.js │ ├── ui-column.hbs │ ├── ui-column.js │ ├── ui-date-input.hbs │ ├── ui-date-input.js │ ├── ui-date-time-input.hbs │ ├── ui-date-time-input.js │ ├── ui-dropdown-menu.hbs │ ├── ui-dropdown-menu.js │ ├── ui-input-tags.hbs │ ├── ui-input-tags.js │ ├── ui-input.hbs │ ├── ui-input.js │ ├── ui-message.hbs │ ├── ui-message.js │ ├── ui-modal.hbs │ ├── ui-modal.js │ ├── ui-modal │ │ ├── content.hbs │ │ ├── foot.hbs │ │ └── title.hbs │ ├── ui-multi-select.hbs │ ├── ui-multi-select.js │ ├── ui-popup.hbs │ ├── ui-popup.js │ ├── ui-popup │ │ ├── content.hbs │ │ └── content.js │ ├── ui-progress.hbs │ ├── ui-progress.js │ ├── ui-select.hbs │ ├── ui-select.js │ ├── ui-tab-menu.hbs │ ├── ui-tab-menu.js │ ├── ui-tab-segment.hbs │ ├── ui-tab-segment.js │ ├── ui-uploader.hbs │ └── ui-uploader.js └── utils │ ├── ember-uploader.js │ └── file-object.js ├── app ├── .gitkeep ├── components │ ├── file-input.js │ ├── ui-button.js │ ├── ui-checkbox-group.js │ ├── ui-checkbox.js │ ├── ui-column.js │ ├── ui-date-input.js │ ├── ui-date-time-input.js │ ├── ui-dropdown-menu.js │ ├── ui-input-tags.js │ ├── ui-input.js │ ├── ui-labeled-input.js │ ├── ui-message.js │ ├── ui-modal.js │ ├── ui-modal │ │ ├── content.js │ │ ├── foot.js │ │ └── title.js │ ├── ui-multi-select.js │ ├── ui-popup.js │ ├── ui-popup │ │ └── content.js │ ├── ui-progress.js │ ├── ui-select.js │ ├── ui-tab-menu.js │ ├── ui-tab-segment.js │ └── ui-uploader.js └── utils │ ├── ember-uploader.js │ └── file-object.js ├── config ├── ember-try.js └── environment.js ├── ember-cli-build.js ├── index.js ├── jsconfig.json ├── package.json ├── readme.js ├── testem.js ├── tests ├── dummy │ ├── app │ │ ├── app.js │ │ ├── components │ │ │ ├── .gitkeep │ │ │ └── code-highlight │ │ │ │ ├── component.js │ │ │ │ └── template.hbs │ │ ├── controllers │ │ │ ├── .gitkeep │ │ │ ├── application.js │ │ │ ├── ui-button.js │ │ │ ├── ui-checkbox-group.js │ │ │ ├── ui-checkbox.js │ │ │ ├── ui-input-tags.js │ │ │ ├── ui-input.js │ │ │ ├── ui-modal.js │ │ │ ├── ui-multi-select.js │ │ │ ├── ui-popup.js │ │ │ ├── ui-progress.js │ │ │ └── ui-select.js │ │ ├── helpers │ │ │ ├── .gitkeep │ │ │ ├── code-show.js │ │ │ ├── render-html.js │ │ │ └── show-array.js │ │ ├── index.html │ │ ├── models │ │ │ └── .gitkeep │ │ ├── router.js │ │ ├── routes │ │ │ └── .gitkeep │ │ ├── services │ │ │ ├── code.js │ │ │ └── options.js │ │ ├── styles │ │ │ └── app.css │ │ └── templates │ │ │ ├── application.hbs │ │ │ ├── file-input.hbs │ │ │ ├── layout.hbs │ │ │ ├── ui-button.hbs │ │ │ ├── ui-checkbox-group.hbs │ │ │ ├── ui-checkbox.hbs │ │ │ ├── ui-date-input.hbs │ │ │ ├── ui-date-time-input.hbs │ │ │ ├── ui-dropdown-menu.hbs │ │ │ ├── ui-input-tags.hbs │ │ │ ├── ui-input.hbs │ │ │ ├── ui-message.hbs │ │ │ ├── ui-modal.hbs │ │ │ ├── ui-multi-select.hbs │ │ │ ├── ui-popup.hbs │ │ │ ├── ui-progress.hbs │ │ │ ├── ui-select.hbs │ │ │ ├── ui-tab-menu.hbs │ │ │ └── ui-uploader.hbs │ ├── config │ │ ├── ember-cli-update.json │ │ ├── environment.js │ │ ├── optional-features.json │ │ └── targets.js │ └── public │ │ └── robots.txt ├── helpers │ └── index.js ├── index.html ├── integration │ └── components │ │ ├── file-input-test.js │ │ ├── ui-button-test.js │ │ ├── ui-column-test.js │ │ ├── ui-date-input-test.js │ │ ├── ui-date-time-input-test.js │ │ ├── ui-dropdown-menu-test.js │ │ ├── ui-input-tags-test.js │ │ ├── ui-message-test.js │ │ ├── ui-modal │ │ ├── content-test.js │ │ ├── foot-test.js │ │ └── title-test.js │ │ ├── ui-popup-test.js │ │ ├── ui-popup │ │ └── content-test.js │ │ ├── ui-progress-test.js │ │ ├── ui-tab-menu-test.js │ │ ├── ui-tab-segment-test.js │ │ └── ui-uploader-test.js ├── test-helper.js └── unit │ ├── .gitkeep │ └── utils │ ├── ember-uploader-test.js │ └── file-object-test.js ├── yarn.lock └── yuidoc.json /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig helps developers define and maintain consistent 2 | # coding styles between different editors and IDEs 3 | # editorconfig.org 4 | 5 | root = true 6 | 7 | [*] 8 | end_of_line = lf 9 | charset = utf-8 10 | trim_trailing_whitespace = true 11 | insert_final_newline = true 12 | indent_style = space 13 | indent_size = 2 14 | 15 | [*.hbs] 16 | insert_final_newline = false 17 | 18 | [*.{diff,md}] 19 | trim_trailing_whitespace = false 20 | -------------------------------------------------------------------------------- /.ember-cli: -------------------------------------------------------------------------------- 1 | { 2 | /** 3 | Ember CLI sends analytics information by default. The data is completely 4 | anonymous, but there are times when you might want to disable this behavior. 5 | 6 | Setting `disableAnalytics` to true will prevent any data from being sent. 7 | */ 8 | "disableAnalytics": false, 9 | 10 | /** 11 | Setting `isTypeScriptProject` to true will force the blueprint generators to generate TypeScript 12 | rather than JavaScript by default, when a TypeScript version of a given blueprint is available. 13 | */ 14 | "isTypeScriptProject": false 15 | } 16 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | # unconventional js 2 | /blueprints/*/files/ 3 | /vendor/ 4 | 5 | # compiled output 6 | /dist/ 7 | /tmp/ 8 | 9 | # dependencies 10 | /bower_components/ 11 | /node_modules/ 12 | 13 | # misc 14 | /coverage/ 15 | !.* 16 | .*/ 17 | .eslintcache 18 | 19 | # ember-try 20 | /.node_modules.ember-try/ 21 | /bower.json.ember-try 22 | /npm-shrinkwrap.json.ember-try 23 | /package.json.ember-try 24 | /package-lock.json.ember-try 25 | /yarn.lock.ember-try 26 | /docs 27 | /ember-cli-build.js 28 | /readme.js 29 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | module.exports = { 4 | root: true, 5 | parser: 'babel-eslint', 6 | parserOptions: { 7 | ecmaVersion: 2018, 8 | sourceType: 'module', 9 | ecmaFeatures: { 10 | legacyDecorators: true, 11 | }, 12 | }, 13 | plugins: ['ember'], 14 | extends: [ 15 | 'eslint:recommended', 16 | 'plugin:ember/recommended', 17 | 'plugin:prettier/recommended', 18 | ], 19 | env: { 20 | browser: true, 21 | }, 22 | rules: {}, 23 | overrides: [ 24 | // node files 25 | { 26 | files: [ 27 | './.eslintrc.js', 28 | './.prettierrc.js', 29 | './.template-lintrc.js', 30 | './ember-cli-build.js', 31 | './index.js', 32 | './testem.js', 33 | './blueprints/*/index.js', 34 | './config/**/*.js', 35 | './tests/dummy/config/**/*.js', 36 | ], 37 | parserOptions: { 38 | sourceType: 'script', 39 | }, 40 | env: { 41 | browser: false, 42 | node: true, 43 | }, 44 | plugins: ['node'], 45 | extends: ['plugin:node/recommended'], 46 | }, 47 | { 48 | // test files 49 | files: ['tests/**/*-test.{js,ts}'], 50 | extends: ['plugin:qunit/recommended'], 51 | }, 52 | ], 53 | }; 54 | -------------------------------------------------------------------------------- /.github/workflows/ci.yml: -------------------------------------------------------------------------------- 1 | name: CI 2 | 3 | on: 4 | push: 5 | branches: 6 | - main 7 | - master 8 | pull_request: {} 9 | 10 | concurrency: 11 | group: ci-${{ github.head_ref || github.ref }} 12 | cancel-in-progress: true 13 | 14 | jobs: 15 | test: 16 | name: "Tests" 17 | runs-on: ubuntu-latest 18 | 19 | steps: 20 | - uses: actions/checkout@v2 21 | - name: Install Node 22 | uses: actions/setup-node@v2 23 | with: 24 | node-version: 12.x 25 | cache: yarn 26 | - name: Install Dependencies 27 | run: yarn install --frozen-lockfile 28 | - name: Lint 29 | run: yarn lint 30 | - name: Run Tests 31 | run: yarn test:ember 32 | 33 | floating: 34 | name: "Floating Dependencies" 35 | runs-on: ubuntu-latest 36 | 37 | steps: 38 | - uses: actions/checkout@v2 39 | - uses: actions/setup-node@v2 40 | with: 41 | node-version: 12.x 42 | cache: yarn 43 | - name: Install Dependencies 44 | run: yarn install --no-lockfile 45 | - name: Run Tests 46 | run: yarn test:ember 47 | 48 | try-scenarios: 49 | name: ${{ matrix.try-scenario }} 50 | runs-on: ubuntu-latest 51 | needs: "test" 52 | 53 | strategy: 54 | fail-fast: false 55 | matrix: 56 | try-scenario: 57 | - ember-lts-3.24 58 | - ember-lts-3.28 59 | - ember-release 60 | - ember-beta 61 | - ember-canary 62 | - ember-classic 63 | # - embroider-safe 64 | # - embroider-optimized 65 | 66 | steps: 67 | - uses: actions/checkout@v2 68 | - name: Install Node 69 | uses: actions/setup-node@v2 70 | with: 71 | node-version: 12.x 72 | cache: yarn 73 | - name: Install Dependencies 74 | run: yarn install --frozen-lockfile 75 | - name: Run Tests 76 | run: ./node_modules/.bin/ember try:one ${{ matrix.try-scenario }} 77 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /dist/ 5 | /tmp/ 6 | 7 | # dependencies 8 | /node_modules 9 | /bower_components 10 | /docs 11 | /bower_components/ 12 | /node_modules/ 13 | # misc 14 | /.env* 15 | /.pnp* 16 | /.sass-cache 17 | /.eslintcache 18 | /connect.lock 19 | /coverage/ 20 | /libpeerconnection.log 21 | /npm-debug.log* 22 | /testem.log 23 | /yarn-error.log 24 | 25 | # ember-try 26 | /.node_modules.ember-try/ 27 | /bower.json.ember-try 28 | /npm-shrinkwrap.json.ember-try 29 | /package.json.ember-try 30 | /package-lock.json.ember-try 31 | /yarn.lock.ember-try 32 | 33 | # broccoli-debug 34 | /DEBUG/ 35 | .vscode 36 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | # compiled output 2 | /dist/ 3 | /tmp/ 4 | 5 | # dependencies 6 | /bower_components/ 7 | 8 | # misc 9 | /.bowerrc 10 | /.editorconfig 11 | /.ember-cli 12 | /.env* 13 | /.eslintcache 14 | /.eslintignore 15 | /.eslintrc.js 16 | /.git/ 17 | /.github/ 18 | /.gitignore 19 | /.prettierignore 20 | /.prettierrc.js 21 | /.template-lintrc.js 22 | /.travis.yml 23 | /.watchmanconfig 24 | /bower.json 25 | /config/ember-try.js 26 | /CONTRIBUTING.md 27 | /ember-cli-build.js 28 | /testem.js 29 | /tests/ 30 | /yarn-error.log 31 | /yarn.lock 32 | .gitkeep 33 | 34 | # ember-try 35 | /.node_modules.ember-try/ 36 | /bower.json.ember-try 37 | /npm-shrinkwrap.json.ember-try 38 | /package.json.ember-try 39 | /package-lock.json.ember-try 40 | /yarn.lock.ember-try 41 | /docs 42 | /Makefile 43 | readme.js 44 | /yuidoc.json 45 | /.vscode 46 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | # unconventional js 2 | /blueprints/*/files/ 3 | /vendor/ 4 | 5 | # compiled output 6 | /dist/ 7 | /tmp/ 8 | 9 | # dependencies 10 | /bower_components/ 11 | /node_modules/ 12 | 13 | # misc 14 | /coverage/ 15 | !.* 16 | .eslintcache 17 | .lint-todo/ 18 | 19 | # ember-try 20 | /.node_modules.ember-try/ 21 | /bower.json.ember-try 22 | /npm-shrinkwrap.json.ember-try 23 | /package.json.ember-try 24 | /package-lock.json.ember-try 25 | /yarn.lock.ember-try 26 | -------------------------------------------------------------------------------- /.prettierrc.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | module.exports = { 4 | singleQuote: true, 5 | overrides: [ 6 | { 7 | files: '*.hbs', 8 | options: { 9 | singleQuote: false, 10 | }, 11 | }, 12 | ], 13 | }; 14 | -------------------------------------------------------------------------------- /.template-lintrc.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | module.exports = { 4 | extends: 'recommended', 5 | }; 6 | -------------------------------------------------------------------------------- /.watchmanconfig: -------------------------------------------------------------------------------- 1 | { 2 | "ignore_dirs": ["tmp", "dist"] 3 | } 4 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # How To Contribute 2 | 3 | ## Installation 4 | 5 | * `git clone ` 6 | * `cd ember-semantic-ui` 7 | * `npm install` 8 | 9 | ## Linting 10 | 11 | * `npm run lint` 12 | * `npm run lint:fix` 13 | 14 | ## Running tests 15 | 16 | * `ember test` – Runs the test suite on the current Ember version 17 | * `ember test --server` – Runs the test suite in "watch mode" 18 | * `ember try:each` – Runs the test suite against multiple Ember versions 19 | 20 | ## Running the dummy application 21 | 22 | * `ember serve` 23 | * Visit the dummy application at [http://localhost:4200](http://localhost:4200). 24 | 25 | For more information on using ember-cli, visit [https://cli.emberjs.com/release/](https://cli.emberjs.com/release/). 26 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 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 | 23 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2018 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 6 | 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 8 | 9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 10 | -------------------------------------------------------------------------------- /Makefile: -------------------------------------------------------------------------------- 1 | start: 2 | ember serve 3 | test: 4 | ember test 5 | docs: 6 | yuidoc -c yuidoc.json 7 | clean: 8 | rm -rf tmp 9 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ember-semantic-ui 2 | 3 | [![Build Status](https://github.com/wecatch/ember-semantic-ui/actions/workflows/ci.yml/badge.svg)](https://github.com/wecatch/ember-semantic-ui/actions) 4 | [![Downloads](https://img.shields.io/npm/dt/ember-semantic-ui.svg)](https://www.npmjs.com/package/ember-semantic-ui) 5 | [![Version](https://img.shields.io/npm/v/ember-semantic-ui.svg)](https://www.npmjs.com/package/ember-semantic-ui) 6 | 7 | This Ember addon support many UI components based on [semantic-ui](http://semantic-ui.com), Anyone can use this addon in their Ember project. 8 | 9 | 10 | [Demo](https://wecatch.me/ember-semantic-ui/demo/) 11 | [Docs](https://wecatch.me/ember-semantic-ui/docs/) 12 | 13 | 14 | ## Components 15 | 16 | **Layout** 17 | 18 | - [ui-column](http://wecatch.me/ember-semantic-ui/demo/#/ui-column) 19 | 20 | **Button** 21 | 22 | - [ui-button](http://wecatch.me/ember-semantic-ui/demo/#/ui-button) 23 | 24 | **Menu** 25 | 26 | - [ui-dropdown-menu](http://wecatch.me/ember-semantic-ui/demo/#/ui-dropdown-menu) 27 | - [ui-tab-menu](http://wecatch.me/ember-semantic-ui/demo/#/ui-tab-menu) 28 | 29 | 30 | **Input** 31 | 32 | - [ui-input-tags](https://wecatch.me/ember-semantic-ui/demo/#/ui-input-tags) 33 | - [ui-input](https://wecatch.me/ember-semantic-ui/demo/#/ui-input) 34 | - [ui-date-input](https://wecatch.me/ember-semantic-ui/demo/#/ui-date-input) 35 | - [ui-date-time-input](https://wecatch.me/ember-semantic-ui/demo/#/ui-date-time-input) 36 | 37 | 38 | **Checkbox** 39 | 40 | - [ui-checkbox-group](https://wecatch.me/ember-semantic-ui/demo/#/ui-checkbox-group) 41 | - [ui-checkbox](https://wecatch.me/ember-semantic-ui/demo/#/ui-checkbox) 42 | 43 | 44 | **Modal** 45 | 46 | - [ui-modal](https://wecatch.me/ember-semantic-ui/demo/#/ui-modal) 47 | 48 | **Select** 49 | 50 | - [ui-select](https://wecatch.me/ember-semantic-ui/demo/#/ui-select) 51 | - [ui-multi-select](https://wecatch.me/ember-semantic-ui/demo/#/ui-multi-select) 52 | 53 | **File** 54 | 55 | - [ui-uploader](https://wecatch.me/ember-semantic-ui/demo/#/ui-uploader) 56 | - [file-input](https://wecatch.me/ember-semantic-ui/demo/#/file-input) 57 | 58 | 59 | **Popup** 60 | 61 | - [ui-popup](https://wecatch.me/ember-semantic-ui/demo/#/ui-popup) 62 | 63 | **Message** 64 | 65 | - [ui-message](https://wecatch.me/ember-semantic-ui/demo/ui-message) 66 | 67 | # Getting Started 68 | 69 | ## Dummy app 70 | 71 | ``` 72 | git clone https://github.com/wecatch/ember-semantic-ui 73 | npm install 74 | ember server 75 | ``` 76 | 77 | ## Use this addon in your ember application 78 | 79 | ``` 80 | ember install ember-semantic-ui 81 | ``` 82 | 83 | 84 | 1.Modify app/index.html and import semanti-ui js file and css file 85 | 86 | 87 | ``` 88 | 89 | 90 | ``` 91 | 92 | 93 | 2.Start ember app 94 | 95 | 96 | ``` 97 | ember server 98 | ``` 99 | 100 | 101 | 3.Then you can use this addon components in your ember app 102 | 103 | 104 | ``` 105 | 106 | ``` 107 | 108 | 109 | # Thanks 110 | 111 | The [ember-uploader](https://github.com/benefitcloud/ember-uploader) project support this addon file-uploader. Thanks to their [author](https://github.com/benefitcloud) 112 | 113 | # Release notes 114 | 115 | 116 | ## 1.0.1 117 | 118 | - fix FileInput bug 119 | - fix UiInputTags value change rerender 120 | 121 | 122 | ## 1.0.0 123 | 124 | - Upgrade ember-cli to 4.4, this version is not compatible, please take caution 125 | - Only support glimmer component 126 | 127 | ## 0.2.3 128 | 129 | - bump babel 130 | 131 | ## 0.2.2 132 | 133 | - remove bower, install npm package semantic-ui-css for semantic-ui 134 | 135 | ## 0.2.1 136 | 137 | - fix [34](https://github.com/wecatch/ember-semantic-ui/issues/34) 138 | 139 | ## 0.2.0 140 | 141 | - upgrade ember-cli to 3.1, support ember to latest 3.0 142 | - upgrade semantic-ui to 2.3.2 143 | 144 | ## 0.1.2 145 | 146 | upgrade ember-cli to 2.11, upgrade ember to latest 2.11 147 | 148 | ## 0.1.1 149 | 150 | fix dummy app 151 | 152 | ## 0.1.0 153 | 154 | - add docs 155 | - file-input support multiple files upload 156 | - add menu component 157 | - add row, column, container component 158 | 159 | ## 0.0.8 160 | 161 | - added ui-pop-up, ui-date-input, ui-date-time-input 162 | - fix many bugs 163 | - rework some component according to [component-best-practices](https://poteto.github.io/component-best-practices/) 164 | 165 | 166 | ## 0.0.7 167 | 168 | - remove ui-remote-select, ui-link, ui-dropdown 169 | - added ui-label, ui-labeled-button, ui-animated-button, ui-dropdown-menu, ui-left-labeled-button, ui-pointing-label 170 | - redesign ui-select, ui-multi-select, ui-checkbox-group, ui-radio-group 171 | - ui-alter renamed to ui-message 172 | 173 | 174 | **Tip** 175 | 176 | 0.0.7 is not backward compatible, be careful to update 177 | 178 | 179 | ## 0.0.5 180 | 181 | **2015-12-09** 182 | 183 | - ui-uploader,ui-checkbox,file-object fix some bugs 184 | 185 | ## 0.0.3 186 | 187 | **2015-10-21** 188 | 189 | * Ember.js v3.24 or above 190 | * Ember CLI v3.24 or above 191 | * Node.js v12 or above 192 | -------------------------------------------------------------------------------- /addon/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wecatch/ember-semantic-ui/ba1034d4b8ab03d1b68da12c43f1191e64da8a29/addon/.gitkeep -------------------------------------------------------------------------------- /addon/components/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wecatch/ember-semantic-ui/ba1034d4b8ab03d1b68da12c43f1191e64da8a29/addon/components/.gitkeep -------------------------------------------------------------------------------- /addon/components/file-input.hbs: -------------------------------------------------------------------------------- 1 |
2 | {{#if this.multiple}} 3 | {{! template-lint-disable require-input-label }} 4 | 5 | {{else}} 6 | 7 | {{/if}} 8 | 9 | {{#if (has-block-params)}} 10 | {{yield this.uploader this.start this.abort this.fileObject}} 11 | {{else}} 12 | {{#unless this.autoUpload}} 13 | upload 14 | {{/unless}} 15 | {{/if}} 16 |
-------------------------------------------------------------------------------- /addon/components/file-input.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable ember/no-jquery */ 2 | /* eslint-disable ember/no-new-mixins */ 3 | import { A } from '@ember/array'; 4 | import { action } from '@ember/object'; 5 | import { tracked } from '@glimmer/tracking'; 6 | 7 | import Component from '@glimmer/component'; 8 | import EmberUploader from '../utils/ember-uploader'; 9 | import { FileObject } from '../utils/file-object'; 10 | 11 | /** 12 | file-input-base mixinx 13 | 14 | @module components 15 | @namespace components 16 | @class FileInputComponent 17 | @extends Ember.Evented 18 | @constructor 19 | */ 20 | export default class FileInputComponent extends Component { 21 | element = null; 22 | files = null; 23 | 24 | /** 25 | * ember uploader instance see {{#crossLink "utils.EmberUploader"}}{{/crossLink}} 26 | * 27 | * @property {Object} uploader 28 | * 29 | */ 30 | uploader = null; 31 | 32 | /** 33 | * the upload file is finished 34 | * 35 | * @property {Boolean} isUploaded 36 | * @default false 37 | * 38 | */ 39 | @tracked isUploaded = false; 40 | 41 | /** 42 | * this input file that is uploaded 43 | */ 44 | fileObject = null; 45 | 46 | /** 47 | * file request ajax setting traditional, by default true 48 | * @property {boolean} traditional 49 | * 50 | */ 51 | get traditional() { 52 | return this.args.traditional ?? true; 53 | } 54 | 55 | /** 56 | * style 57 | * @property {String} style 58 | * 59 | */ 60 | get style() { 61 | return this.args.style ?? this.style; 62 | } 63 | 64 | /** 65 | * upload url 66 | * 67 | * @property {String} url 68 | * 69 | */ 70 | get url() { 71 | return this.args.url ?? null; 72 | } 73 | /** 74 | * upload request method 75 | * 76 | * @property {String} method 77 | * @default 'POST' 78 | * 79 | */ 80 | get method() { 81 | return this.args.method ?? 'POST'; 82 | } 83 | /** 84 | * extra parameters for upload 85 | * 86 | * @property {Object} extra 87 | * @default null 88 | * 89 | */ 90 | get extra() { 91 | return this.args.extra ?? null; 92 | } 93 | /** 94 | * the upload file parameter name 95 | * 96 | * @property {String} paramName 97 | * @default 'file' 98 | * 99 | */ 100 | get paramName() { 101 | return this.args.paramName ?? 'file'; 102 | } 103 | 104 | /** 105 | * the upload request status 106 | * 107 | * @property {Boolean} isUploading 108 | * @default false 109 | * 110 | */ 111 | get isUploading() { 112 | return this.uploader?.isUploading; 113 | } 114 | /** 115 | * allow autoUpload 116 | * 117 | * @property {Boolean} autoUpload 118 | * @default true 119 | * 120 | */ 121 | get autoUpload() { 122 | return this.args.autoUpload ?? true; 123 | } 124 | 125 | /** 126 | * multiple file or not, by default false 127 | * 128 | * @property {Boolean} multiple 129 | * @default false 130 | * 131 | */ 132 | get multiple() { 133 | return this.args.multiple ?? false; 134 | } 135 | 136 | @action 137 | register(element) { 138 | this.element = element; 139 | } 140 | 141 | @action 142 | fileChange(e) { 143 | this.files = e.target.files; 144 | if (this.files.length > 0) { 145 | this.fileObject = new FileObject({ fileToUpload: this.files[0] }); 146 | } 147 | if (this.autoUpload) { 148 | this.start(); 149 | } 150 | } 151 | 152 | clearInputFile() { 153 | this.element.querySelector('input[type="file"]').value = ''; 154 | } 155 | 156 | /** 157 | * start upload action 158 | * 159 | * @event start 160 | * 161 | * 162 | */ 163 | @action 164 | start() { 165 | let { uploader, fileObject, extra, files } = this; 166 | let fa = fileObject; 167 | if (this.multiple) { 168 | fa = A({ content: files }); 169 | uploader.upload(files, extra); 170 | } else { 171 | uploader.upload(fileObject.fileToUpload, extra); 172 | } 173 | 174 | if (this.args.uploadStart) { 175 | this.args.uploadStart(fa); 176 | } 177 | } 178 | /** 179 | * abort upload action 180 | * 181 | * @event abort 182 | * 183 | * 184 | */ 185 | 186 | @action 187 | abort() { 188 | this.uploader.abort(); 189 | if (this.args.uploadAbort) { 190 | this.args.uploadAbort(); 191 | } 192 | //empty input file 193 | this.clearInputFile(); 194 | } 195 | 196 | constructor() { 197 | super(...arguments); 198 | let { url, method, paramName } = this; 199 | this.uploader = new EmberUploader({ 200 | url: url, 201 | paramName: paramName, 202 | type: method, 203 | traditional: this.traditional, 204 | }); 205 | 206 | //didupload event 207 | this.uploader.on('didUpload', (data) => { 208 | this.isUploaded = true; 209 | this.clearInputFile(); 210 | if (this.args.uploadSuccess) { 211 | if (this.multiple) { 212 | this.args.uploadSuccess(this.files, data); 213 | } else { 214 | this.args.uploadSuccess(this.fileObject, data); 215 | } 216 | } 217 | }); 218 | 219 | //progress event 220 | this.uploader.on('progress', (e) => { 221 | if (this.args.uploadProgress) { 222 | this.args.uploadProgress(e); 223 | } 224 | }); 225 | } 226 | 227 | willDestroy() { 228 | super.willDestroy(...arguments); 229 | this.uploader = null; 230 | } 231 | } 232 | -------------------------------------------------------------------------------- /addon/components/ui-button.hbs: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /addon/components/ui-button.js: -------------------------------------------------------------------------------- 1 | import Component from '@glimmer/component'; 2 | import { action } from '@ember/object'; 3 | 4 | export default class UiButtonComponent extends Component { 5 | @action 6 | click() { 7 | if (this.args.onClick) { 8 | this.args.onClick(); 9 | } 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /addon/components/ui-checkbox-group.hbs: -------------------------------------------------------------------------------- 1 |
2 | {{#if @label}} 3 | 4 | {{/if}} 5 | {{#each this.options as |op|}} 6 | {{op.label}} 13 | {{/each}} 14 | 15 | {{yield this.childOnChange this.name}} 16 | 17 |
-------------------------------------------------------------------------------- /addon/components/ui-checkbox-group.js: -------------------------------------------------------------------------------- 1 | import { A } from '@ember/array'; 2 | import EmberObject, { action } from '@ember/object'; 3 | import { guidFor } from '@ember/object/internals'; 4 | import Component from '@glimmer/component'; 5 | 6 | /** 7 | ui-checkbox-group component see {{#crossLink "mixins.UiCheckboxGroupBase"}}{{/crossLink}} 8 | 9 | @module components 10 | @namespace components 11 | @class UiCheckboxGroup 12 | @constructor 13 | */ 14 | export default class UiCheckboxGroupComponent extends Component { 15 | constructor() { 16 | super(...arguments); 17 | this.value = this.args.value ?? A(); 18 | } 19 | 20 | get type() { 21 | return this.args.type ?? 'checkbox'; 22 | } 23 | 24 | get name() { 25 | return this.args.name ?? guidFor(this); 26 | } 27 | 28 | /** 29 | * name key for option, by default name 30 | * 31 | * @property {String} namePath 32 | * @default 'name' 33 | */ 34 | get labelPath() { 35 | return this.args.labelPath ?? 'name'; 36 | } 37 | 38 | /** 39 | * value key for option, by default value 40 | * 41 | * @property {String} valuePath 42 | * @default 'value' 43 | */ 44 | get valuePath() { 45 | return this.args.valuePath ?? 'value'; 46 | } 47 | 48 | /** 49 | * options for the select component 50 | * 51 | * @property {Array} options 52 | */ 53 | get options() { 54 | if (!this.args.options) return A(); 55 | const _options = A(); 56 | for (var i = 0; i < this.args.options.length; i++) { 57 | let item = this.args.options[i]; 58 | let label = item[this.labelPath]; 59 | let value = item[this.valuePath]; 60 | let checked = this.isOptionChecked(value); 61 | let obj = EmberObject.create({ 62 | label: label, 63 | value: String(value), 64 | checked: checked, 65 | }); 66 | _options.pushObject(obj); 67 | } 68 | 69 | return _options; 70 | } 71 | 72 | isOptionChecked(optionValue) { 73 | if (this.type === 'checkbox') { 74 | return this.value.includes(optionValue); 75 | } 76 | 77 | if (this.type === 'radio') { 78 | return this.value === optionValue; 79 | } 80 | } 81 | 82 | @action 83 | childOnChange(checked, value) { 84 | if (this.type === 'checkbox') { 85 | if (checked && !this.value.includes(value)) { 86 | this.value.pushObject(value); 87 | } 88 | if (!checked && this.value.includes(value)) { 89 | this.value.removeObject(value); 90 | } 91 | 92 | if (this.args.onChange) { 93 | this.args.onChange(checked, value, this.value); 94 | } 95 | } 96 | 97 | if (this.type === 'radio') { 98 | if (checked) { 99 | this.value = value; 100 | } 101 | 102 | if (this.args.onChange) { 103 | this.args.onChange(checked, value); 104 | } 105 | } 106 | } 107 | } 108 | -------------------------------------------------------------------------------- /addon/components/ui-checkbox.hbs: -------------------------------------------------------------------------------- 1 |
2 | {{!-- template-lint-disable require-input-label --}} 3 | 4 | 5 |
-------------------------------------------------------------------------------- /addon/components/ui-checkbox.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable ember/no-jquery */ 2 | import { action } from '@ember/object'; 3 | import Component from '@glimmer/component'; 4 | import $ from 'jquery'; 5 | import { guidFor } from '@ember/object/internals'; 6 | import { bind } from '@ember/runloop'; 7 | 8 | /** 9 | ui-checkbox component see {{#crossLink "mixins.UiCheckboxBase"}}{{/crossLink}} 10 | 11 | @module components 12 | @namespace components 13 | @class UiCheckbox 14 | @constructor 15 | */ 16 | export default class UiCheckboxComponent extends Component { 17 | element = null; 18 | 19 | constructor() { 20 | super(...arguments); 21 | if (this.args.onChange) { 22 | this.args.onChange(this.checked, this.value); 23 | } 24 | } 25 | 26 | get type() { 27 | return this.args.type ?? 'checkbox'; 28 | } 29 | 30 | get name() { 31 | return this.args.name ?? guidFor(this); 32 | } 33 | 34 | get value() { 35 | return this.args.value ?? ''; 36 | } 37 | 38 | get checked() { 39 | return this.args.checked ?? false; 40 | } 41 | 42 | @action 43 | register(element) { 44 | this.element = element; 45 | $(element).checkbox(); 46 | let input = $(element).find('input'); 47 | 48 | //set checbox stated 49 | input.prop('checked', this.checked); 50 | //bind input change event 51 | $(element).on('click', bind(this, this._updateValue)); 52 | } 53 | 54 | _updateValue() { 55 | let checked = $(this.element).find('input').is(':checked'); 56 | if (typeof this.args.onChange === 'function') { 57 | if (checked) { 58 | this.args.onChange(true, this.value); 59 | } else { 60 | this.args.onChange(false, this.value); 61 | } 62 | } 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /addon/components/ui-column.hbs: -------------------------------------------------------------------------------- 1 |
2 | {{yield}} 3 |
-------------------------------------------------------------------------------- /addon/components/ui-column.js: -------------------------------------------------------------------------------- 1 | import Component from '@glimmer/component'; 2 | import { tracked } from '@glimmer/tracking'; 3 | 4 | const n = { 5 | 1: 'one', 6 | 2: 'two', 7 | 3: 'three', 8 | 4: 'four', 9 | 5: 'five', 10 | 6: 'six', 11 | 7: 'seven', 12 | 8: 'eight', 13 | 9: 'nine', 14 | 10: 'ten', 15 | 11: 'eleven', 16 | 12: 'twelve', 17 | 13: 'thirteen', 18 | 14: 'fourteen', 19 | 15: 'fifteen', 20 | 16: 'sixteen', 21 | }; 22 | 23 | export default class UiColumnComponent extends Component { 24 | @tracked wide = 'one'; 25 | 26 | constructor() { 27 | super(...arguments); 28 | this.wide = n[String(this.args.wide)]; 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /addon/components/ui-date-input.hbs: -------------------------------------------------------------------------------- 1 |
2 | {{!-- template-lint-disable require-input-label --}} 3 | 4 |
-------------------------------------------------------------------------------- /addon/components/ui-date-input.js: -------------------------------------------------------------------------------- 1 | import Component from '@glimmer/component'; 2 | import moment from 'moment'; 3 | import { action } from '@ember/object'; 4 | import Pikaday from 'pikaday'; 5 | 6 | let zh_cn = { 7 | previousMonth: '上一月', 8 | nextMonth: '下一月', 9 | months: [ 10 | '一月', 11 | '二月', 12 | '三月', 13 | '四月', 14 | '五月', 15 | '六月', 16 | '七月', 17 | '八月', 18 | '九月', 19 | '十月', 20 | '十一月', 21 | '十二月', 22 | ], 23 | weekdays: [ 24 | '周日', 25 | '星期一', 26 | '星期二', 27 | '星期三', 28 | '星期四', 29 | '星期五', 30 | '星期六', 31 | ], 32 | weekdaysShort: ['日', '一', '二', '三', '四', '五', '六'], 33 | }; 34 | 35 | /** 36 | ui-date-input component 37 | 38 | @module components 39 | @namespace components 40 | @class UiDateInput 41 | @constructor 42 | */ 43 | export default class UiDateInputComponent extends Component { 44 | picker = null; 45 | 46 | @action 47 | register(element) { 48 | let options = { 49 | field: element, 50 | format: this.format, 51 | position: this.position, 52 | i18n: zh_cn, 53 | onSelect: (value) => { 54 | if (typeof this.args.onChange === 'function') { 55 | this.args.onChange(moment(value).format(this.format)); 56 | } 57 | }, 58 | }; 59 | this.picker = new Pikaday(options); 60 | } 61 | 62 | /** 63 | * pikaday position 'bottom right', 'bottom left', 'top left', 'top right' 64 | * @property {String} position 65 | * @default 'bottom left' 66 | */ 67 | get position() { 68 | return this.args.position ?? 'bottom left'; 69 | } 70 | 71 | /** 72 | * moment format 73 | * @property {String} format 74 | * @default 'YYYY-MM-DD' 75 | * */ 76 | get format() { 77 | return this.args.format ?? 'YYYY-MM-DD'; 78 | } 79 | 80 | get valueDisplay() { 81 | return ( 82 | moment(this.args.value).isValid() && 83 | moment(this.args.value).format(this.format) 84 | ); 85 | } 86 | 87 | constructor() { 88 | super(...arguments); 89 | } 90 | 91 | willDestory() { 92 | this.picker.destroy(); 93 | } 94 | } 95 | -------------------------------------------------------------------------------- /addon/components/ui-date-time-input.hbs: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | 5 | 6 |
7 |
8 | 9 | 10 |
11 |
12 | 13 | 14 |
15 |
16 |
-------------------------------------------------------------------------------- /addon/components/ui-date-time-input.js: -------------------------------------------------------------------------------- 1 | import moment from 'moment'; 2 | import { action } from '@ember/object'; 3 | import Component from '@glimmer/component'; 4 | import { tracked } from '@glimmer/tracking'; 5 | 6 | const minutes = []; 7 | 8 | for (let i = 0; i < 60; i++) { 9 | minutes[i] = { value: i, name: i }; 10 | } 11 | 12 | const hours = []; 13 | 14 | for (let i = 0; i < 24; i++) { 15 | hours[i] = { value: i, name: i }; 16 | } 17 | 18 | /** 19 | ui-date-time-input component 20 | 21 | @module components 22 | @namespace components 23 | @class UiDateTimeInput 24 | @constructor 25 | */ 26 | export default class UiDateTimeInputComponent extends Component { 27 | @tracked h; 28 | @tracked d; 29 | @tracked m; 30 | 31 | minutes = minutes; 32 | hours = hours; 33 | /** 34 | datetime value 35 | @property {String} value 36 | @default null 37 | */ 38 | get value() { 39 | return this.args.value ?? ''; 40 | } 41 | 42 | rtime() { 43 | let date = moment(this.d); 44 | let options = { 45 | year: date.year(), 46 | month: date.month(), 47 | day: date.day(), 48 | hour: this.h, 49 | minute: this.m, 50 | }; 51 | let time = moment(options).format('YYYY-MM-DD HH:mm'); 52 | if (typeof this.args.onChange === 'function') { 53 | this.args.onChange(time); 54 | } 55 | } 56 | 57 | @action 58 | change(type, value) { 59 | switch (type) { 60 | case 'd': 61 | this.d = value; 62 | break; 63 | case 'h': 64 | this.h = value; 65 | break; 66 | case 'm': 67 | this.m = value; 68 | break; 69 | } 70 | 71 | this.rtime(); 72 | } 73 | 74 | constructor() { 75 | super(...arguments); 76 | if (this.value && moment(this.value).isValid()) { 77 | let time = moment(this.value); 78 | this.d = time.format('YYYY-MM-DD'); 79 | this.h = time.hour(); 80 | this.m = time.minute(); 81 | } 82 | } 83 | } 84 | -------------------------------------------------------------------------------- /addon/components/ui-dropdown-menu.hbs: -------------------------------------------------------------------------------- 1 |
2 | {{yield}} 3 |
4 | 5 | -------------------------------------------------------------------------------- /addon/components/ui-dropdown-menu.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable ember/no-jquery */ 2 | import Component from '@glimmer/component'; 3 | import { action } from '@ember/object'; 4 | import $ from 'jquery'; 5 | 6 | /** 7 | ui-dropdown-menu component 8 | 9 | @module components 10 | @namespace components 11 | @class UiDropdownMenu 12 | @constructor 13 | */ 14 | export default class UiDropdonwMenuComponent extends Component { 15 | @action 16 | register(element) { 17 | $(element).dropdown({ 18 | onChange: (value) => { 19 | if (this.args.onChange) { 20 | this.args.onChange(value); 21 | } 22 | }, 23 | }); 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /addon/components/ui-input-tags.hbs: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | {{#each this.value as |op|}} 5 | {{!-- template-lint-disable link-href-attributes --}} 6 | {{!-- template-lint-disable no-inline-styles --}} 7 | 8 | {{op}} 9 | 10 | 11 | {{/each}} 12 | {{!-- template-lint-disable require-input-label --}} 13 | 14 |
15 |
16 |
-------------------------------------------------------------------------------- /addon/components/ui-input-tags.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable ember/no-jquery */ 2 | import { A } from '@ember/array'; 3 | import { action } from '@ember/object'; 4 | import Component from '@glimmer/component'; 5 | import $ from 'jquery'; 6 | 7 | /** 8 | ui-input-tags component 9 | 10 | @module components 11 | @namespace components 12 | @class UiInputTags 13 | @constructor 14 | 15 | value must be required 16 | 17 | */ 18 | export default class UiInputTagsComponent extends Component { 19 | get value() { 20 | return this.args.value.map((v) => String(v)); 21 | } 22 | 23 | @action 24 | register(element) { 25 | $(element).dropdown({ 26 | allowAdditions: true, 27 | onAdd: (addedValue) => { 28 | this._addValue(addedValue); 29 | }, 30 | onRemove: (removedValue) => { 31 | this._removeValue(removedValue); 32 | }, 33 | onLabelCreate: function (label) { 34 | $(element).find('input.search').val(''); 35 | $(element).find('.addition.item b').html(''); 36 | return $(label); 37 | }, 38 | }); 39 | } 40 | 41 | _addValue(value) { 42 | // keep up to date args value 43 | if (typeof this.args.onChange === 'function') { 44 | const newValue = A([].concat(this.args.value)); 45 | newValue.addObject(value); 46 | this.args.onChange(newValue); 47 | } 48 | } 49 | 50 | _removeValue(value) { 51 | // keep up to date args value 52 | if (typeof this.args.onChange === 'function') { 53 | const newValue = A([].concat(this.args.value)); 54 | newValue.removeObject(value); 55 | this.args.onChange(newValue); 56 | } 57 | } 58 | 59 | get hiddenValue() { 60 | return this.value.join(','); 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /addon/components/ui-input.hbs: -------------------------------------------------------------------------------- 1 |
2 | {{!-- template-lint-disable require-input-label --}} 3 | 4 | {{yield}} 5 |
6 | 7 | 8 | -------------------------------------------------------------------------------- /addon/components/ui-input.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable ember/no-jquery */ 2 | import Component from '@glimmer/component'; 3 | import { action } from '@ember/object'; 4 | import $ from 'jquery'; 5 | 6 | /** 7 | ui-input component see {{#crossLink "mixins.UiInputBase"}}{{/crossLink}} 8 | 9 | @module components 10 | @namespace components 11 | @class UiInput 12 | @constructor 13 | */ 14 | export default class UiIputComponent extends Component { 15 | /** 16 | * the input type 17 | * 18 | * @property {String} type 19 | * @default text 20 | */ 21 | get type() { 22 | return this.args.type ?? 'text'; 23 | } 24 | 25 | /** 26 | * the input value 27 | * 28 | * @property {String} value 29 | */ 30 | get value() { 31 | return this.args.value ?? ''; 32 | } 33 | 34 | /** 35 | * the input placeholder 36 | * 37 | * @property {String} placeholder 38 | */ 39 | get placeholder() { 40 | return this.args.placeholder ?? ''; 41 | } 42 | 43 | /** 44 | * the label 45 | * 46 | * @property {String} label 47 | */ 48 | get label() { 49 | return this.args.placeholder ?? ''; 50 | } 51 | 52 | /** 53 | * the input focus status 54 | * 55 | * @property {Boolean} focus 56 | * @default false 57 | */ 58 | get focus() { 59 | return this.args.focus ?? false; 60 | } 61 | 62 | /** 63 | * the input loading status 64 | * 65 | * @property {Boolean} loading 66 | * @default false 67 | */ 68 | get loading() { 69 | return this.args.loading ?? false; 70 | } 71 | 72 | /** 73 | * the input error status 74 | * 75 | * @property {Boolean} error 76 | * @default false 77 | */ 78 | get error() { 79 | return this.args.error ?? false; 80 | } 81 | 82 | /** 83 | * the input error status 84 | * 85 | * @property {Boolean} error 86 | * @default false 87 | */ 88 | get disabled() { 89 | return this.args.disabled ?? false; 90 | } 91 | 92 | /** 93 | * the input readonly status 94 | * 95 | * @property {Boolean} readonly 96 | * @default false 97 | */ 98 | get readonly() { 99 | return this.args.readonly ?? false; 100 | } 101 | 102 | get statusClass() { 103 | const classList = this.args.class ? [this.args.class] : []; 104 | if (this.disabled) { 105 | classList.push('disabled'); 106 | } 107 | 108 | if (this.focus) { 109 | classList.push('focus'); 110 | } 111 | 112 | if (this.loading) { 113 | classList.push('loading'); 114 | } 115 | 116 | if (this.error) { 117 | classList.push('error'); 118 | } 119 | 120 | return classList.join(' '); 121 | } 122 | 123 | @action 124 | register(element) { 125 | if (this.readonly) { 126 | $(element).find('input').attr('readonly', 'readonly'); 127 | } 128 | 129 | $(element) 130 | .find('input') 131 | .on('onchange', (e) => { 132 | if (typeof this.args.onChange === 'function') { 133 | this.args.onChange(e); 134 | } 135 | }); 136 | 137 | $(element) 138 | .find('input') 139 | .focus((e) => { 140 | if (typeof this.args.onFocus === 'function') { 141 | this.args.onFocus(e); 142 | } 143 | }); 144 | 145 | $(element) 146 | .find('input') 147 | .focusin((e) => { 148 | if (typeof this.args.onFocusin === 'function') { 149 | this.args.onFocusin(e); 150 | } 151 | }); 152 | 153 | $(element) 154 | .find('input') 155 | .focusout((e) => { 156 | if (typeof this.args.onFocusout === 'function') { 157 | this.args.onFocusout(e); 158 | } 159 | }); 160 | } 161 | } 162 | -------------------------------------------------------------------------------- /addon/components/ui-message.hbs: -------------------------------------------------------------------------------- 1 |
2 | {{#if @close}} 3 | 4 | {{/if}} 5 | {{#if @header}} 6 |
{{@header}}
7 | {{/if}} 8 | {{#if @message}} 9 |

{{@message}}

10 | {{/if}} 11 | {{#if @messages}} 12 |
    13 | {{#each @messages as |m|}} 14 |
  • {{m}}
    • 15 | {{/each}} 16 |
17 | {{/if}} 18 | 19 | {{yield}} 20 |
-------------------------------------------------------------------------------- /addon/components/ui-message.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable ember/no-jquery */ 2 | import Component from '@glimmer/component'; 3 | import { action } from '@ember/object'; 4 | import $ from 'jquery'; 5 | 6 | export default class UiMessageComponent extends Component { 7 | /** 8 | * component dom element 9 | */ 10 | element = null; 11 | /** 12 | * 13 | */ 14 | @action 15 | register(element) { 16 | this.element = element; 17 | } 18 | /** 19 | * close message event 20 | * @event closeMessage 21 | * */ 22 | @action 23 | closeMessage() { 24 | $(this.element).transition('fade'); 25 | if (typeof this.args.onClose === 'function') { 26 | this.args.onClose(); 27 | } 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /addon/components/ui-modal.hbs: -------------------------------------------------------------------------------- 1 |
2 | {{yield}} 3 |
4 | 5 | -------------------------------------------------------------------------------- /addon/components/ui-modal.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable ember/no-jquery */ 2 | import Component from '@glimmer/component'; 3 | import { tracked } from '@glimmer/tracking'; 4 | import { action } from '@ember/object'; 5 | import $ from 'jquery'; 6 | 7 | /** 8 | 9 | ui-modal component 10 | 11 | @module components 12 | @namespace components 13 | @class UiModal 14 | @constructor 15 | */ 16 | export default class UiModalComponent extends Component { 17 | @tracked _show = false; 18 | 19 | constructor() { 20 | super(...arguments); 21 | } 22 | 23 | @action 24 | updateAttr(element) { 25 | if (this.show) { 26 | $(element).modal('setting', 'transition', this.transition); 27 | $(element).modal('setting', 'closable', this.closable); 28 | $(element).modal('show'); 29 | } else { 30 | $(element).modal('hide'); 31 | } 32 | } 33 | 34 | /** 35 | * when modal show, this action will be triggered 36 | * @event onShow 37 | */ 38 | @action 39 | onShow() { 40 | if (typeof this.args.onShow === 'function') { 41 | this.args.onShow(); 42 | } 43 | } 44 | /** 45 | * when modal hide, this action will be triggered 46 | * @event onShow 47 | */ 48 | @action 49 | onHide() { 50 | if (typeof this.args.onHide === 'function') { 51 | this.args.onHide(); 52 | } 53 | } 54 | /** 55 | * modal status 56 | * @property {Boolean} show 57 | * @default false 58 | */ 59 | get show() { 60 | console.log(this.args.show); 61 | return this.args.show ?? false; 62 | } 63 | 64 | /** 65 | * Setting to false will not allow you to close the modal by clicking on the dimmer 66 | * @property {Boolean} closable 67 | * @default true 68 | */ 69 | 70 | get closable() { 71 | return this.args.closable ?? true; 72 | } 73 | 74 | /** 75 | * transition 76 | * @property {String} transition 77 | * @default 'scale' 78 | */ 79 | 80 | get transition() { 81 | return this.args.transition ?? 'scale'; 82 | } 83 | 84 | @action 85 | register(element) { 86 | $(element).modal({ 87 | closable: this.closable, 88 | observeChanges: true, 89 | onHide: () => { 90 | if (typeof this.args.onHide === 'function') { 91 | return this.args.onHide(); 92 | } 93 | }, 94 | onShow: () => { 95 | if (typeof this.args.onShow === 'function') { 96 | return this.args.onShow(); 97 | } 98 | }, 99 | onApprove: () => { 100 | if (typeof this.args.onApprove === 'function') { 101 | return this.args.onApprove(); 102 | } 103 | }, 104 | onDeny: () => { 105 | if (typeof this.args.onDeny === 'function') { 106 | return this.args.onDeny(); 107 | } 108 | }, 109 | }); 110 | } 111 | } 112 | -------------------------------------------------------------------------------- /addon/components/ui-modal/content.hbs: -------------------------------------------------------------------------------- 1 |
2 | {{yield}} 3 |
4 | -------------------------------------------------------------------------------- /addon/components/ui-modal/foot.hbs: -------------------------------------------------------------------------------- 1 |
2 | {{yield}} 3 |
4 | 5 | -------------------------------------------------------------------------------- /addon/components/ui-modal/title.hbs: -------------------------------------------------------------------------------- 1 |
2 | {{yield}} 3 |
4 | -------------------------------------------------------------------------------- /addon/components/ui-multi-select.hbs: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /addon/components/ui-multi-select.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable ember/no-jquery */ 2 | import Component from '@glimmer/component'; 3 | import { A } from '@ember/array'; 4 | import EmberObject, { action } from '@ember/object'; 5 | import $ from 'jquery'; 6 | 7 | /** 8 | 9 | ui-multi-select component see {{#crossLink "mixins.UiSelectBase"}}{{/crossLink}} 10 | 11 | @module components 12 | @namespace components 13 | @class UiMultiSelect 14 | @constructor 15 | */ 16 | export default class UiMultiSelectComponent extends Component { 17 | constructor() { 18 | super(...arguments); 19 | this._selectedOptions = this.args.value ?? A(); 20 | } 21 | 22 | @action 23 | register(element) { 24 | $(element).dropdown({ 25 | onAdd: (addedValue) => { 26 | if (this.isOptionChecked(addedValue)) return; 27 | for (var i = 0; i < this.options.length; i++) { 28 | let item = this.options[i]; 29 | if (item[this.valuePath] === addedValue) { 30 | this._selectedOptions.pushObject(item); 31 | break; 32 | } 33 | } 34 | if (this.args.onChange) { 35 | this.args.onChange(this._selectedOptions); 36 | } 37 | }, 38 | onRemove: (removedValue) => { 39 | for (var i = 0; i < this._selectedOptions.length; i++) { 40 | let item = this._selectedOptions[i]; 41 | if (item[this.valuePath] === removedValue) { 42 | this._selectedOptions.removeObject(item); 43 | break; 44 | } 45 | } 46 | if (this.args.onChange) { 47 | this.args.onChange(this._selectedOptions); 48 | } 49 | }, 50 | }); 51 | } 52 | 53 | /** 54 | * value for the select 55 | * 56 | * @property {String} value 57 | */ 58 | get value() { 59 | return this.args.value ?? ''; 60 | } 61 | 62 | /** 63 | * name key for option, by default name 64 | * 65 | * @property {String} namePath 66 | * @default 'name' 67 | */ 68 | get labelPath() { 69 | return this.args.labelPath ?? 'name'; 70 | } 71 | 72 | /** 73 | * value key for option, by default value 74 | * 75 | * @property {String} valuePath 76 | * @default 'value' 77 | */ 78 | get valuePath() { 79 | return this.args.valuePath ?? 'value'; 80 | } 81 | 82 | /** 83 | * options for the select component 84 | * 85 | * @property {Array} options 86 | */ 87 | get options() { 88 | const _options = A(); 89 | for (var i = 0; i < this.args.options.length; i++) { 90 | let item = this.args.options[i]; 91 | let label = item[this.labelPath]; 92 | let value = item[this.valuePath]; 93 | let checked = this.isOptionChecked(value); 94 | let obj = EmberObject.create({ 95 | label: label, 96 | value: String(value), 97 | selected: checked, 98 | }); 99 | _options.pushObject(obj); 100 | } 101 | 102 | return _options; 103 | } 104 | 105 | isOptionChecked(optionValue) { 106 | return Boolean(this._selectedOptions.findBy(this.valuePath, optionValue)); 107 | } 108 | } 109 | -------------------------------------------------------------------------------- /addon/components/ui-popup.hbs: -------------------------------------------------------------------------------- 1 |
2 | {{yield}} 3 |
4 | 5 | -------------------------------------------------------------------------------- /addon/components/ui-popup.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable ember/no-jquery */ 2 | import Component from '@glimmer/component'; 3 | import { action } from '@ember/object'; 4 | import $ from 'jquery'; 5 | 6 | /** 7 | 8 | ui-popup component 9 | 10 | @module components 11 | @namespace components 12 | @class UiPopup 13 | @constructor 14 | */ 15 | export default class UiPopupComponent extends Component { 16 | element = null; 17 | get boundary() { 18 | return this.args.boundary ?? window; 19 | } 20 | 21 | /** 22 | * If a selector or jQuery object is specified this allows target the popup content 23 | * 24 | * @property {String} target 25 | * @default "" 26 | */ 27 | get popup() { 28 | return this.args.popup ?? false; 29 | } 30 | 31 | /** 32 | * If a selector or jQuery object is specified this allows the popup to be positioned relative to that element. 33 | * 34 | * @property {String} target 35 | * @default "" 36 | */ 37 | get target() { 38 | return this.args.target ?? false; 39 | } 40 | /** 41 | the pop content 42 | @property {String} content 43 | */ 44 | get content() { 45 | return this.args.content ?? ''; 46 | } 47 | 48 | /** 49 | the pop html content 50 | @property {String} html 51 | */ 52 | get html() { 53 | return this.args.html ?? ''; 54 | } 55 | 56 | /** 57 | the pop title 58 | @property {String} title 59 | */ 60 | get title() { 61 | return this.args.title ?? ''; 62 | } 63 | 64 | get variation() { 65 | return this.args.variation ?? ''; 66 | } 67 | 68 | /** 69 | * Event used to trigger popup: focus, click, hover, or manual, by default hover 70 | * 71 | * @property {String} event 72 | * @default "hover" 73 | */ 74 | get event() { 75 | return this.args.event ?? 'hover'; 76 | } 77 | 78 | get position() { 79 | return this.args.position ?? 'top left'; 80 | } 81 | 82 | get inline() { 83 | return this.args.inline ?? false; 84 | } 85 | 86 | get transition() { 87 | return this.args.transition ?? 'slide down'; 88 | } 89 | /** 90 | * Whether popup should not close on hover (useful for popup navigation menus), by default false 91 | * 92 | * @property {Boolean} hoverable 93 | * @default false 94 | */ 95 | get hoverable() { 96 | return this.args.hoverable ?? false; 97 | } 98 | /** 99 | * When using on: 'click' specifies whether clicking the page should close the popup, by default true 100 | * 101 | * @property {Boolean} closable 102 | * @default true 103 | */ 104 | get closable() { 105 | return this.args.closable ?? true; 106 | } 107 | 108 | /** 109 | * Duration of animation events, by default 200 110 | * 111 | * @property {Number} duration 112 | * @default 200 113 | */ 114 | get duration() { 115 | return this.args.duration ?? 200; 116 | } 117 | 118 | get delayShow() { 119 | return this.args.delayShow ?? 50; 120 | } 121 | 122 | get delayHide() { 123 | return this.args.delayHide ?? 30; 124 | } 125 | 126 | get preserve() { 127 | return this.args.preserve ?? false; 128 | } 129 | 130 | get lastResort() { 131 | return this.args.lastResort ?? false; 132 | } 133 | 134 | @action 135 | updateAttr(element) { 136 | if (this.popup || this.title || this.content || this.html) { 137 | this.bindPopEvent(element); 138 | } 139 | } 140 | 141 | @action 142 | register(element) { 143 | this.element = element; 144 | if (this.title || this.content || this.html || this.popup) { 145 | this.bindPopEvent(element); 146 | } 147 | } 148 | 149 | bindPopEvent(element) { 150 | $(element).popup({ 151 | popup: this.popup, 152 | on: this.event, 153 | inline: this.inline, 154 | hoverable: this.hoverable, 155 | closable: this.closable, 156 | target: this.target, 157 | title: this.title, 158 | variation: this.variation, 159 | html: this.html, 160 | content: this.content, 161 | duration: this.duration, 162 | position: this.position, 163 | lastResort: this.lastResort, 164 | delay: { 165 | show: this.delayShow, 166 | hide: this.delayHide, 167 | }, 168 | preserve: this.preserve, 169 | onCreate: () => { 170 | if (typeof this.args.onCreate === 'function') { 171 | this.args.onCreate(this); 172 | } 173 | }, 174 | onRemove: () => { 175 | if (typeof this.args.onRemove === 'function') { 176 | this.args.onRemove(this); 177 | } 178 | }, 179 | onShow: () => { 180 | if (typeof this.args.onShow === 'function') { 181 | this.args.onShow(this); 182 | } 183 | }, 184 | onVisible: () => { 185 | if (typeof this.args.onVisible === 'function') { 186 | this.args.onVisible(this); 187 | } 188 | }, 189 | onHide: () => { 190 | if (typeof this.args.onHide === 'function') { 191 | this.args.onHide(this); 192 | } 193 | }, 194 | }); 195 | } 196 | 197 | hide() { 198 | $(this.element).popup('hide'); 199 | } 200 | 201 | show() { 202 | $(this.element).popup('hide'); 203 | } 204 | } 205 | -------------------------------------------------------------------------------- /addon/components/ui-popup/content.hbs: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /addon/components/ui-popup/content.js: -------------------------------------------------------------------------------- 1 | import Component from '@glimmer/component'; 2 | import { scheduleOnce, bind } from '@ember/runloop'; 3 | import { guidFor } from '@ember/object/internals'; 4 | 5 | export default class UiPopupContentComponent extends Component { 6 | elementId = guidFor(this); 7 | constructor() { 8 | super(...arguments); 9 | scheduleOnce('afterRender', bind(this, this.attachPop)); 10 | } 11 | 12 | attachPop() { 13 | if (this.args.onAttach) { 14 | this.args.onAttach(this.elementId); 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /addon/components/ui-progress.hbs: -------------------------------------------------------------------------------- 1 |
2 |
3 |
{{this.percent}}%
4 |
5 | {{#if @lable}} 6 |
{{@label}}
7 | {{/if}} 8 |
-------------------------------------------------------------------------------- /addon/components/ui-progress.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable ember/no-jquery */ 2 | import Component from '@glimmer/component'; 3 | import { action } from '@ember/object'; 4 | import $ from 'jquery'; 5 | 6 | /** 7 | 8 | ui-progress component 9 | 10 | @module components 11 | @namespace components 12 | @class UiProgress 13 | @constructor 14 | */ 15 | export default class UiProgressComponent extends Component { 16 | /** 17 | * progress loading status, by default false 18 | * 19 | * @property {Boolean} loading 20 | * @default false 21 | */ 22 | get loading() { 23 | if (this.args.loading) { 24 | return 'active'; 25 | } 26 | 27 | return ''; 28 | } 29 | 30 | /** 31 | * progress success status, by default false 32 | * 33 | * @property {Boolean} success 34 | * @default false 35 | */ 36 | get success() { 37 | if (this.args.success) { 38 | return 'success'; 39 | } 40 | 41 | return ''; 42 | } 43 | /** 44 | * progress error status, by default false 45 | * 46 | * @property {Boolean} error 47 | * @default false 48 | */ 49 | get error() { 50 | if (this.args.error) { 51 | return 'error'; 52 | } 53 | 54 | return ''; 55 | } 56 | 57 | /** 58 | * progress percent 59 | * 60 | * @property {Number} percent 61 | * @default 0 62 | */ 63 | get percent() { 64 | let percent = Number(this.args.percent); 65 | if (isNaN(percent)) { 66 | return 0; 67 | } 68 | 69 | if (percent > 100) { 70 | return 100; 71 | } 72 | 73 | if (percent < 0) { 74 | return 0; 75 | } 76 | 77 | return percent; 78 | } 79 | 80 | @action 81 | register(element) { 82 | $(element).progress({ 83 | percent: this.percent, 84 | }); 85 | } 86 | } 87 | -------------------------------------------------------------------------------- /addon/components/ui-select.hbs: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /addon/components/ui-select.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable ember/no-jquery */ 2 | import Component from '@glimmer/component'; 3 | import { A } from '@ember/array'; 4 | import EmberObject, { action } from '@ember/object'; 5 | import $ from 'jquery'; 6 | 7 | /** 8 | ui-select component 9 | 10 | @module components 11 | @namespace components 12 | @class UiSelect 13 | @constructor 14 | */ 15 | export default class UiSelectComponent extends Component { 16 | @action 17 | register(element) { 18 | $(element).dropdown({ 19 | forceSelection: false, 20 | onChange: (value) => { 21 | if (this.args.onChange) { 22 | this.args.onChange(value); 23 | } 24 | }, 25 | }); 26 | } 27 | 28 | @action 29 | clear(element) { 30 | $(element).dropdown('clear'); 31 | } 32 | 33 | /** 34 | * value for the select 35 | * 36 | * @property {String} value 37 | */ 38 | get value() { 39 | return this.args.value ?? ''; 40 | } 41 | 42 | /** 43 | * name key for option, by default name 44 | * 45 | * @property {String} namePath 46 | * @default 'name' 47 | */ 48 | get labelPath() { 49 | return this.args.labelPath ?? 'name'; 50 | } 51 | 52 | /** 53 | * value key for option, by default value 54 | * 55 | * @property {String} valuePath 56 | * @default 'value' 57 | */ 58 | get valuePath() { 59 | return this.args.valuePath ?? 'value'; 60 | } 61 | 62 | /** 63 | * options for the select component 64 | * 65 | * @property {Array} options 66 | */ 67 | get options() { 68 | const _options = A(); 69 | for (var i = 0; i < this.args.options.length; i++) { 70 | let item = this.args.options[i]; 71 | let label = item[this.labelPath]; 72 | let value = item[this.valuePath]; 73 | let checked = this.isOptionChecked(value); 74 | let obj = EmberObject.create({ 75 | label: label, 76 | value: String(value), 77 | selected: checked, 78 | }); 79 | _options.pushObject(obj); 80 | } 81 | 82 | return _options; 83 | } 84 | /** 85 | * allow select to search or not , by default false 86 | * 87 | * @property {Boolean} search 88 | * @default false 89 | */ 90 | get search() { 91 | return this.args.search ?? false; 92 | } 93 | 94 | isOptionChecked(optionValue) { 95 | return String(this.value) === String(optionValue); 96 | } 97 | } 98 | -------------------------------------------------------------------------------- /addon/components/ui-tab-menu.hbs: -------------------------------------------------------------------------------- 1 |
2 | {{yield}} 3 |
4 | -------------------------------------------------------------------------------- /addon/components/ui-tab-menu.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable ember/no-jquery */ 2 | import { action } from '@ember/object'; 3 | import Component from '@glimmer/component'; 4 | import $ from 'jquery'; 5 | 6 | /** 7 | ui-tab-menu component 8 | 9 | @module components 10 | @namespace components 11 | @class UiTabMenu 12 | @constructor 13 | */ 14 | export default class UiTabMenu extends Component { 15 | get selector() { 16 | return this.args.active ? `.item[data-tab="${this.args.active}"]` : ''; 17 | } 18 | 19 | @action 20 | register(element) { 21 | $(element).find('.item').tab(); 22 | if (this.selector) { 23 | $(element).find(this.selector).addClass('active'); 24 | } 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /addon/components/ui-tab-segment.hbs: -------------------------------------------------------------------------------- 1 |
2 | {{yield}} 3 |
4 | -------------------------------------------------------------------------------- /addon/components/ui-tab-segment.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable ember/no-jquery */ 2 | import Component from '@glimmer/component'; 3 | import { action } from '@ember/object'; 4 | import $ from 'jquery'; 5 | 6 | /** 7 | ui-tab-segment component {{#crossLink "mixins.uiSegmentBase"}}{{/crossLink}} 8 | 9 | 10 | @module components 11 | @namespace components 12 | @class UiTabSegment 13 | @constructor 14 | */ 15 | export default class UiTabSegment extends Component { 16 | /** 17 | * tab name 18 | * @property {String} tab 19 | */ 20 | get tab() { 21 | return this.args.tab ?? ''; 22 | } 23 | @action 24 | register(element) { 25 | if (this.args.active) { 26 | $(element).addClass('active'); 27 | } 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /addon/components/ui-uploader.hbs: -------------------------------------------------------------------------------- 1 |
2 |
3 | 7 | {{!-- template-lint-disable no-implicit-this --}} 8 | {{!-- template-lint-disable require-input-label --}} 9 | 10 |
11 |
12 | {{#each this.queue as |q| }} 13 |
14 | {{#if q.isDisplayableImage}} 15 |
16 | {{!-- template-lint-disable require-valid-alt-text --}} 17 | 18 |
19 | {{/if}} 20 |
21 |
22 | {{q.name}} {{q.progress}} 23 |
24 |
25 | {{q.size}} 26 |
27 |
28 | 29 | {{#if q.isUploaded}} 30 |
Upload success
31 | {{else}} 32 |
33 | Uploading file 34 |
35 |
36 | {{/if}} 37 | 38 |
39 |
40 | {{#unless q.isUploaded }} 41 | {{#unless this.autoUpload }} 42 | 43 | 44 | upload 45 | 46 | {{/unless}} 47 | 48 | 49 | cancel 50 | 51 | {{/unless}} 52 | {{#if q.isUploaded}} 53 | 54 | 55 | delete 56 | 57 | {{/if}} 58 |
59 |
60 |
61 | {{/each}} 62 |
63 |
-------------------------------------------------------------------------------- /addon/components/ui-uploader.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable ember/no-jquery */ 2 | import { action } from '@ember/object'; 3 | import { htmlSafe } from '@ember/template'; 4 | import { isEmpty } from '@ember/utils'; 5 | import Component from '@glimmer/component'; 6 | import $ from 'jquery'; 7 | import { A } from '@ember/array'; 8 | 9 | import EmberUploader from '../utils/ember-uploader'; 10 | import { FileObject } from '../utils/file-object'; 11 | 12 | /** 13 | ui-uploader component 14 | 15 | @module components 16 | @namespace components 17 | @class UiUploader 18 | @constructor 19 | */ 20 | export default class UiUploaderComponent extends Component { 21 | element = null; 22 | 23 | /** 24 | * file request ajax setting traditional, by default true 25 | * @property {boolean} traditional 26 | * 27 | */ 28 | get traditional() { 29 | return this.args.traditional ?? true; 30 | } 31 | /** 32 | activate upload action 33 | @event start 34 | @param {Object} obj fileInput instance see {{#crossLink " fileInput"}}{{/crossLink}} 35 | **/ 36 | @action 37 | start(obj) { 38 | let url = this.url, 39 | self = this; 40 | 41 | obj.uploader = new EmberUploader({ 42 | url: url, 43 | traditional: self.get('traditional'), 44 | }); 45 | 46 | obj.uploadPromise = obj.uploader.upload(obj.fileToUpload, this.params); 47 | 48 | if (this.args.uploadStart) { 49 | this.args.uploadStart(obj); 50 | } 51 | 52 | obj.set('isUploading', obj.uploader.isUploading); 53 | 54 | obj.uploader.on('progress', function (e) { 55 | obj.set('percent', parseInt(e.percent)); 56 | if (this.args.uploadProgress) { 57 | this.args.uploadProgress(e); 58 | } 59 | }); 60 | 61 | obj.uploader.on('didUpload', function (data) { 62 | obj.set('isUploaded', true); 63 | obj.set('data', data); 64 | 65 | if (this.args.uploadSuccess) { 66 | this.args.uploadSuccess(obj); 67 | } 68 | }); 69 | } 70 | /** 71 | deactivate upload action 72 | @event abort 73 | @param {Object} obj fileInput instance see {{#crossLink " fileInput"}}{{/crossLink}} 74 | **/ 75 | @action 76 | abort(obj) { 77 | if (this.args.uploadAbort) { 78 | this.args.uploadAbort(obj); 79 | } 80 | if (obj.uploader) { 81 | try { 82 | obj.uploader.abort(); 83 | } catch (e) { 84 | console.error(e); 85 | } finally { 86 | this.queue.removeObject(obj); 87 | } 88 | } else { 89 | this.queue.removeObject(obj); 90 | } 91 | } 92 | /** 93 | delete file from queue 94 | @event 95 | @param {Object} obj fileInput instance see {{#crossLink " fileInput"}}{{/crossLink}} 96 | **/ 97 | @action 98 | deleteFile(obj) { 99 | this.queue.removeObject(obj); 100 | if (this.args.deleteFile) { 101 | this.args.deleteFile(obj); 102 | } 103 | } 104 | 105 | /** 106 | * The upload url 107 | * 108 | * @property url 109 | * @type String 110 | * @default "" 111 | */ 112 | get url() { 113 | return this.args.url ?? ''; 114 | } 115 | 116 | /** 117 | * To allow file autoUpload 118 | * 119 | * @property autoUpload 120 | * @type boolean 121 | * @default true 122 | */ 123 | get autoUpload() { 124 | return this.args.autoUpload ?? true; 125 | } 126 | 127 | /** 128 | * upload file queue 129 | * 130 | * @property queue 131 | * @type Array 132 | * @default [] 133 | */ 134 | queue = A([]); 135 | 136 | /** 137 | * upload multiple file 138 | * 139 | * @property multiple 140 | * @type boolean 141 | * @default false 142 | */ 143 | get multiple() { 144 | return this.args.multiple ?? false; 145 | } 146 | 147 | /** 148 | * extra params 149 | * 150 | * @property params 151 | * @type params 152 | * @default null 153 | */ 154 | get params() { 155 | return this.args.params ?? null; 156 | } 157 | 158 | /** 159 | * file accept 160 | * 161 | * @property accept 162 | * @type String 163 | * @default audio/*,video/*,image/* 164 | */ 165 | get accept() { 166 | return this.args.accept ?? 'audio/*,video/*,image/*'; 167 | } 168 | 169 | /** 170 | * @method register 171 | * @observes "register" event 172 | * @returns {void} 173 | */ 174 | @action 175 | register(element) { 176 | this.element = element; 177 | let self = this; 178 | $(this.element) 179 | .find('input') 180 | .on('onchange', function (e) { 181 | let input = e.target; 182 | if (!isEmpty(input.files)) { 183 | for (let i = input.files.length - 1; i >= 0; i--) { 184 | let obj = new FileObject({ 185 | fileToUpload: input.files[i], 186 | }); 187 | self.queue.pushObject(obj); 188 | if (self.autoUpload) { 189 | self.start(obj); 190 | } 191 | } 192 | } 193 | 194 | //$(this).after($(this).clone().val("")); 195 | //empty input files 196 | $(self.element).find('input').val(''); 197 | }); 198 | } 199 | 200 | /** 201 | * @function willDestroy empty queue 202 | * 203 | * @returns null 204 | */ 205 | willDestroy() { 206 | super.willDestroy(...arguments); 207 | this.queue.clear(); //clear input file 208 | } 209 | 210 | /** 211 | * @function inputStyle 212 | * 213 | * @returns {string} 214 | */ 215 | get inputStyle() { 216 | let style_array = [ 217 | 'opacity: 0', 218 | 'width:100% !important', 219 | 'overflow:hidden', 220 | 'position:relative', 221 | 'left:-100%', 222 | 'display:block', 223 | ]; 224 | return htmlSafe(style_array.join(';')); 225 | } 226 | 227 | /** 228 | * @function labelStyle 229 | * 230 | * @returns {string} 231 | */ 232 | get labelStyle() { 233 | let style_array = [ 234 | 'height: 6.25em', 235 | 'line-height: 5.25em', 236 | 'text-align: center', 237 | ]; 238 | return htmlSafe(style_array.join(';')); 239 | } 240 | } 241 | -------------------------------------------------------------------------------- /addon/utils/ember-uploader.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable ember/no-jquery */ 2 | // this file contains source code from https://github.com/benefitcloud/ember-uploader 3 | // thanks to this great project 4 | 5 | import { isArray } from '@ember/array'; 6 | import EmberObject from '@ember/object'; 7 | import Evented from '@ember/object/evented'; 8 | import { run } from '@ember/runloop'; 9 | import $ from 'jquery'; 10 | import { Promise } from 'rsvp'; 11 | import { tracked } from '@glimmer/tracking'; 12 | 13 | /** 14 | EmberUploader class 15 | 16 | @module utils 17 | @namespace utils 18 | @class EmberUploader 19 | @constructor 20 | */ 21 | export default class EmberUploader extends EmberObject.extend(Evented) { 22 | constructor({ url, paramName, type, traditional }) { 23 | super(); 24 | this.url = url; 25 | this.paramName = paramName ?? 'file'; 26 | this.type = type ?? 'POST'; 27 | this.traditional = traditional ?? 'true'; 28 | } 29 | 30 | /** 31 | * upload url 32 | * 33 | * @property {String} url 34 | * 35 | */ 36 | url = null; 37 | paramNamespace = null; 38 | /** 39 | * upload file parameter name 40 | * 41 | * @property {String} paramName 42 | * @default 'file' 43 | */ 44 | paramName = 'file'; 45 | /** 46 | * ajax request settings traditional, by default false 47 | * 48 | * @property {Boolean} traditional 49 | * @default true 50 | */ 51 | traditional = true; 52 | 53 | /** 54 | * ajax request status 55 | * 56 | * @property {Boolean} isUploading 57 | * @default false 58 | */ 59 | @tracked isUploading = false; 60 | 61 | /** 62 | * ajax request type (method), by default it will be POST 63 | * 64 | * @property {String} type 65 | * @default 'POST' 66 | */ 67 | type = 'POST'; 68 | 69 | /** 70 | * Start upload of files and extra data 71 | * 72 | * @param {object|array} files One file object or one array of files object 73 | * @param {array} extra 74 | * @return {object} jquery promise from ajax object 75 | */ 76 | upload(files, extra) { 77 | extra = extra || {}; 78 | var data = this.setupFormData(files, extra); 79 | var url = this.url; 80 | var type = this.type; 81 | this.isUploading = true; 82 | return this.ajax(url, data, type); 83 | } 84 | 85 | setupFormData(files, extra) { 86 | var formData = new FormData(); 87 | 88 | for (var prop of Object.keys(extra)) { 89 | formData.append(this.toNamespacedParam(prop), extra[prop]); 90 | } 91 | 92 | // if is a array of files ... 93 | if (isArray(files)) { 94 | var paramName; 95 | 96 | for (var i = files.length - 1; i >= 0; i--) { 97 | if (this.traditional) { 98 | paramName = this.toNamespacedParam(this.paramName); 99 | } else { 100 | paramName = this.toNamespacedParam(this.paramName) + '[' + i + ']'; 101 | } 102 | formData.append(paramName, files[i]); 103 | } 104 | } else { 105 | // if has only one file object ... 106 | formData.append(this.toNamespacedParam(this.paramName), files); 107 | } 108 | 109 | return formData; 110 | } 111 | 112 | toNamespacedParam(name) { 113 | if (this.paramNamespace) { 114 | return this.paramNamespace + '[' + name + ']'; 115 | } 116 | 117 | return name; 118 | } 119 | 120 | didUpload(data) { 121 | this.isUploading = false; 122 | this.trigger('didUpload', data); 123 | return data; 124 | } 125 | 126 | didError(jqXHR, textStatus, errorThrown) { 127 | this.isUploading = false; 128 | // Borrowed from Ember Data 129 | var isObject = jqXHR !== null && typeof jqXHR === 'object'; 130 | 131 | if (isObject) { 132 | jqXHR.then = null; 133 | if (!jqXHR.errorThrown) { 134 | if (typeof errorThrown === 'string') { 135 | jqXHR.errorThrown = new Error(errorThrown); 136 | } else { 137 | jqXHR.errorThrown = errorThrown; 138 | } 139 | } 140 | } 141 | 142 | this.trigger('didError', jqXHR, textStatus, errorThrown); 143 | 144 | return jqXHR; 145 | } 146 | 147 | didProgress(e) { 148 | e.percent = (e.loaded / e.total) * 100; 149 | this.trigger('progress', e); 150 | } 151 | 152 | abort() { 153 | this.isUploading = false; 154 | this.trigger('isAborting'); 155 | } 156 | 157 | ajaxSettings(url, params, method) { 158 | var self = this; 159 | return { 160 | url: url, 161 | type: method || 'POST', 162 | contentType: false, 163 | processData: false, 164 | traditional: self.traditional, 165 | dataType: 'json', 166 | xhr: function () { 167 | var xhr = $.ajaxSettings.xhr(); 168 | xhr.upload.onprogress = function (e) { 169 | self.didProgress(e); 170 | }; 171 | self.one('isAborting', function () { 172 | xhr.abort(); 173 | }); 174 | return xhr; 175 | }, 176 | data: params, 177 | }; 178 | } 179 | 180 | ajax(url, params, method) { 181 | return this._ajax(this.ajaxSettings(url, params, method)); 182 | } 183 | 184 | _ajax(settings) { 185 | var self = this; 186 | 187 | return new Promise(function (resolve, reject) { 188 | settings.success = function (data) { 189 | run(null, resolve, self.didUpload(data)); 190 | }; 191 | 192 | settings.error = function (jqXHR, responseText, errorThrown) { 193 | run(null, reject, self.didError(jqXHR, responseText, errorThrown)); 194 | }; 195 | 196 | $.ajax(settings); 197 | }); 198 | } 199 | } 200 | -------------------------------------------------------------------------------- /addon/utils/file-object.js: -------------------------------------------------------------------------------- 1 | import { tracked } from '@glimmer/tracking'; 2 | 3 | /** 4 | FileObject class 5 | 6 | @module utils 7 | @namespace utils 8 | @class FileObject 9 | @constructor 10 | */ 11 | class FileObject { 12 | // ........................................... 13 | // Name is used for the upload property 14 | name = ''; 15 | 16 | // {Property} Human readable size of the selected file 17 | size = '0 KB'; 18 | 19 | // {Property} Raw file size of the selected file 20 | rawSize = 0; 21 | 22 | // {Property} Indicates if this file is an image we can display 23 | @tracked isDisplayableImage = false; 24 | 25 | // {Property} String representation of the file 26 | @tracked base64Image = ''; 27 | 28 | // {Property} Will be an HTML5 File 29 | fileToUpload = null; 30 | 31 | // {Property} Will be a $.ajax jqXHR 32 | uploadJqXHR = null; 33 | 34 | // {Property} Promise for when a file was uploaded 35 | uploadPromise = null; 36 | 37 | // {Property} the object that upload a file 38 | uploader = null; 39 | 40 | // {Property} Upload progress 0-100 41 | @tracked percent = null; 42 | 43 | // {Property} If a file is currently being uploaded 44 | @tracked isUploading = false; 45 | 46 | // {Property} If a file is currently being uploaded 47 | @tracked isDeleted = false; 48 | 49 | // {Property} If the file was uploaded successfully 50 | @tracked isUploaded = false; 51 | 52 | // {Property} when the file was uploaded successfully, response data from server 53 | data = null; 54 | 55 | readFile() { 56 | let fileToUpload = this.fileToUpload; 57 | let isImage = fileToUpload.type.indexOf('image') === 0; 58 | 59 | this.name = fileToUpload.name; 60 | this.rawSize = fileToUpload.size; 61 | this.size = humanReadableFileSize(fileToUpload.size); 62 | 63 | // Don't read anything bigger than 5 MB 64 | if (isImage && fileToUpload.size < 1 * 1024 * 1024) { 65 | this.isDisplayableImage = isImage; 66 | 67 | // Create a reader and read the file. 68 | var reader = new FileReader(); 69 | reader.onload = (e) => { 70 | this.base64Image = e.target.result; 71 | }; 72 | 73 | // Read in the image file as a data URL. 74 | reader.readAsDataURL(fileToUpload); 75 | } 76 | } 77 | constructor({ fileToUpload }) { 78 | this.fileToUpload = fileToUpload; 79 | this.readFile(); 80 | } 81 | } 82 | 83 | function humanReadableFileSize(size) { 84 | var label = ''; 85 | if (size === 0) { 86 | label = '0 KB'; 87 | } else if (size && !isNaN(size)) { 88 | var fileSizeInBytes = size; 89 | var i = -1; 90 | do { 91 | fileSizeInBytes = fileSizeInBytes / 1024; 92 | i++; 93 | } while (fileSizeInBytes > 1024); 94 | 95 | var byteUnits = [' KB', ' MB', ' GB', ' TB', ' PB', ' EB', ' ZB', ' YB']; 96 | label += Math.max(fileSizeInBytes, 0.1).toFixed(1) + byteUnits[i]; 97 | } 98 | return label; 99 | } 100 | 101 | export { FileObject, humanReadableFileSize }; 102 | -------------------------------------------------------------------------------- /app/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wecatch/ember-semantic-ui/ba1034d4b8ab03d1b68da12c43f1191e64da8a29/app/.gitkeep -------------------------------------------------------------------------------- /app/components/file-input.js: -------------------------------------------------------------------------------- 1 | export { default } from 'ember-semantic-ui/components/file-input'; 2 | -------------------------------------------------------------------------------- /app/components/ui-button.js: -------------------------------------------------------------------------------- 1 | export { default } from 'ember-semantic-ui/components/ui-button'; 2 | -------------------------------------------------------------------------------- /app/components/ui-checkbox-group.js: -------------------------------------------------------------------------------- 1 | export { default } from 'ember-semantic-ui/components/ui-checkbox-group'; 2 | -------------------------------------------------------------------------------- /app/components/ui-checkbox.js: -------------------------------------------------------------------------------- 1 | export { default } from 'ember-semantic-ui/components/ui-checkbox'; 2 | -------------------------------------------------------------------------------- /app/components/ui-column.js: -------------------------------------------------------------------------------- 1 | export { default } from 'ember-semantic-ui/components/ui-column'; 2 | -------------------------------------------------------------------------------- /app/components/ui-date-input.js: -------------------------------------------------------------------------------- 1 | export { default } from 'ember-semantic-ui/components/ui-date-input'; 2 | -------------------------------------------------------------------------------- /app/components/ui-date-time-input.js: -------------------------------------------------------------------------------- 1 | export { default } from 'ember-semantic-ui/components/ui-date-time-input'; 2 | -------------------------------------------------------------------------------- /app/components/ui-dropdown-menu.js: -------------------------------------------------------------------------------- 1 | export { default } from 'ember-semantic-ui/components/ui-dropdown-menu'; 2 | -------------------------------------------------------------------------------- /app/components/ui-input-tags.js: -------------------------------------------------------------------------------- 1 | export { default } from 'ember-semantic-ui/components/ui-input-tags'; 2 | -------------------------------------------------------------------------------- /app/components/ui-input.js: -------------------------------------------------------------------------------- 1 | export { default } from 'ember-semantic-ui/components/ui-input'; 2 | -------------------------------------------------------------------------------- /app/components/ui-labeled-input.js: -------------------------------------------------------------------------------- 1 | export { default } from 'ember-semantic-ui/components/ui-labeled-input'; 2 | -------------------------------------------------------------------------------- /app/components/ui-message.js: -------------------------------------------------------------------------------- 1 | export { default } from 'ember-semantic-ui/components/ui-message'; 2 | -------------------------------------------------------------------------------- /app/components/ui-modal.js: -------------------------------------------------------------------------------- 1 | export { default } from 'ember-semantic-ui/components/ui-modal'; 2 | -------------------------------------------------------------------------------- /app/components/ui-modal/content.js: -------------------------------------------------------------------------------- 1 | export { default } from 'ember-semantic-ui/components/ui-modal/content'; 2 | -------------------------------------------------------------------------------- /app/components/ui-modal/foot.js: -------------------------------------------------------------------------------- 1 | export { default } from 'ember-semantic-ui/components/ui-modal/foot'; 2 | -------------------------------------------------------------------------------- /app/components/ui-modal/title.js: -------------------------------------------------------------------------------- 1 | export { default } from 'ember-semantic-ui/components/ui-modal/title'; 2 | -------------------------------------------------------------------------------- /app/components/ui-multi-select.js: -------------------------------------------------------------------------------- 1 | export { default } from 'ember-semantic-ui/components/ui-multi-select'; 2 | -------------------------------------------------------------------------------- /app/components/ui-popup.js: -------------------------------------------------------------------------------- 1 | export { default } from 'ember-semantic-ui/components/ui-popup'; 2 | -------------------------------------------------------------------------------- /app/components/ui-popup/content.js: -------------------------------------------------------------------------------- 1 | export { default } from 'ember-semantic-ui/components/ui-popup/content'; 2 | -------------------------------------------------------------------------------- /app/components/ui-progress.js: -------------------------------------------------------------------------------- 1 | export { default } from 'ember-semantic-ui/components/ui-progress'; 2 | -------------------------------------------------------------------------------- /app/components/ui-select.js: -------------------------------------------------------------------------------- 1 | export { default } from 'ember-semantic-ui/components/ui-select'; 2 | -------------------------------------------------------------------------------- /app/components/ui-tab-menu.js: -------------------------------------------------------------------------------- 1 | export { default } from 'ember-semantic-ui/components/ui-tab-menu'; 2 | -------------------------------------------------------------------------------- /app/components/ui-tab-segment.js: -------------------------------------------------------------------------------- 1 | export { default } from 'ember-semantic-ui/components/ui-tab-segment'; 2 | -------------------------------------------------------------------------------- /app/components/ui-uploader.js: -------------------------------------------------------------------------------- 1 | export { default } from 'ember-semantic-ui/components/ui-uploader'; 2 | -------------------------------------------------------------------------------- /app/utils/ember-uploader.js: -------------------------------------------------------------------------------- 1 | export { default } from 'ember-semantic-ui/utils/ember-uploader'; 2 | -------------------------------------------------------------------------------- /app/utils/file-object.js: -------------------------------------------------------------------------------- 1 | export { default } from 'ember-semantic-ui/utils/file-object'; 2 | -------------------------------------------------------------------------------- /config/ember-try.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const getChannelURL = require('ember-source-channel-url'); 4 | const { embroiderSafe, embroiderOptimized } = require('@embroider/test-setup'); 5 | 6 | module.exports = async function () { 7 | return { 8 | scenarios: [ 9 | { 10 | name: 'ember-lts-3.24', 11 | npm: { 12 | devDependencies: { 13 | 'ember-source': '~3.24.3', 14 | }, 15 | }, 16 | }, 17 | { 18 | name: 'ember-lts-3.28', 19 | npm: { 20 | devDependencies: { 21 | 'ember-source': '~3.28.0', 22 | }, 23 | }, 24 | }, 25 | { 26 | name: 'ember-release', 27 | npm: { 28 | devDependencies: { 29 | 'ember-source': await getChannelURL('release'), 30 | }, 31 | }, 32 | }, 33 | { 34 | name: 'ember-beta', 35 | npm: { 36 | devDependencies: { 37 | 'ember-source': await getChannelURL('beta'), 38 | }, 39 | }, 40 | }, 41 | { 42 | name: 'ember-canary', 43 | npm: { 44 | devDependencies: { 45 | 'ember-source': await getChannelURL('canary'), 46 | }, 47 | }, 48 | }, 49 | { 50 | name: 'ember-classic', 51 | env: { 52 | EMBER_OPTIONAL_FEATURES: JSON.stringify({ 53 | 'application-template-wrapper': true, 54 | 'default-async-observers': false, 55 | 'template-only-glimmer-components': false, 56 | }), 57 | }, 58 | npm: { 59 | devDependencies: { 60 | 'ember-source': '~3.28.0', 61 | }, 62 | ember: { 63 | edition: 'classic', 64 | }, 65 | }, 66 | }, 67 | embroiderSafe(), 68 | embroiderOptimized(), 69 | ], 70 | }; 71 | }; 72 | -------------------------------------------------------------------------------- /config/environment.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | module.exports = function (/* environment, appConfig */) { 4 | return {}; 5 | }; 6 | -------------------------------------------------------------------------------- /ember-cli-build.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | /*jshint node:true*/ 3 | /* global require, module */ 4 | const EmberAddon = require('ember-cli/lib/broccoli/ember-addon'); 5 | 6 | module.exports = function (defaults) { 7 | var options = { 8 | // Add options here 9 | minifyJS: { 10 | enabled: true, 11 | }, 12 | minifyCSS: { 13 | enabled: true, 14 | }, 15 | fingerprint: { 16 | enabled: false, 17 | }, 18 | storeConfigInMeta: false, 19 | }; 20 | 21 | if (process.env.EMBER_ENV === 'development') { 22 | options.minifyJS.enabled = false; 23 | options.minifyCSS.enabled = false; 24 | } 25 | 26 | var app = new EmberAddon(defaults, options); 27 | 28 | app.import('node_modules/highlight.js/styles/github.css'); 29 | const { maybeEmbroider } = require('@embroider/test-setup'); 30 | return maybeEmbroider(app, { 31 | skipBabel: [ 32 | { 33 | package: 'qunit', 34 | }, 35 | ], 36 | }); 37 | }; 38 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | const mergeTrees = require('broccoli-merge-trees'); 3 | const Funnel = require('broccoli-funnel'); 4 | 5 | module.exports = { 6 | name: 'ember-semantic-ui', 7 | included: function (app) { 8 | this._super.included.apply(this, arguments); 9 | app.import('node_modules/pikaday/css/pikaday.css'); 10 | }, 11 | postprocessTree: function (type, tree) { 12 | return mergeTrees( 13 | [ 14 | tree, 15 | new Funnel('node_modules/semantic-ui-css', { 16 | srcDir: 'themes', 17 | include: ['**/*'], 18 | destDir: '/assets/themes', 19 | overwrite: true, 20 | }), 21 | new Funnel('node_modules/semantic-ui-css', { 22 | srcDir: '.', 23 | include: ['semantic.*'], 24 | destDir: '/assets/', 25 | overwrite: true, 26 | }), 27 | ], 28 | { 29 | overwrite: true, 30 | } 31 | ); 32 | }, 33 | }; 34 | -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | {"compilerOptions":{"target":"es6","experimentalDecorators":true},"exclude":["node_modules","bower_components","tmp","vendor",".git","dist"]} -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ember-semantic-ui", 3 | "version": "1.0.1", 4 | "description": "The ui components based on semantic-ui", 5 | "directories": { 6 | "doc": "doc", 7 | "test": "tests" 8 | }, 9 | "scripts": { 10 | "build": "ember build --environment=production", 11 | "gh-pages": "ember build --environment=gh-pages", 12 | "lint": "npm-run-all --aggregate-output --continue-on-error --parallel \"lint:!(fix)\"", 13 | "lint:fix": "npm-run-all --aggregate-output --continue-on-error --parallel lint:*:fix", 14 | "lint:hbs": "ember-template-lint .", 15 | "lint:hbs:fix": "ember-template-lint . --fix", 16 | "lint:js": "eslint . --cache", 17 | "lint:js:fix": "eslint . --fix", 18 | "start": "ember serve", 19 | "test": "npm-run-all lint test:*", 20 | "test:ember": "ember test", 21 | "test:ember-compatibility": "ember try:each" 22 | }, 23 | "repository": "https://github.com/wecatch/ember-semantic-ui", 24 | "homepage": "http://wecatch.github.io/ember-semantic-ui/", 25 | "engines": { 26 | "node": "12.* || 14.* || >= 16" 27 | }, 28 | "author": { 29 | "name": "wecatch", 30 | "url": "http://wecatch.me" 31 | }, 32 | "contributors": [ 33 | { 34 | "name": "zhyq0826", 35 | "email": "zhyq0826@email.com", 36 | "url": "https://github.com/zhyq0826", 37 | "blog": "http://sanyuesha.com" 38 | }, 39 | { 40 | "name": "jerryshew", 41 | "email": "jerryshew@email.com", 42 | "url": "https://github.com/jerryshew", 43 | "blog": "http://braavos.me" 44 | } 45 | ], 46 | "license": "MIT", 47 | "devDependencies": { 48 | "@ember/optional-features": "^2.0.0", 49 | "@ember/test-helpers": "^2.7.0", 50 | "@embroider/test-setup": "^1.6.0", 51 | "@glimmer/component": "^1.1.2", 52 | "@glimmer/tracking": "^1.1.2", 53 | "babel-eslint": "^10.1.0", 54 | "broccoli-asset-rev": "^3.0.0", 55 | "ember-cli": "~4.4.0", 56 | "ember-cli-dependency-checker": "^3.3.1", 57 | "ember-cli-inject-live-reload": "^2.1.0", 58 | "ember-cli-sri": "^2.1.1", 59 | "ember-cli-terser": "^4.0.2", 60 | "ember-composable-helpers": "^5.0.0", 61 | "ember-disable-prototype-extensions": "^1.1.3", 62 | "ember-export-application-global": "^2.0.1", 63 | "ember-load-initializers": "^2.1.2", 64 | "ember-page-title": "^7.0.0", 65 | "ember-qunit": "^5.1.5", 66 | "ember-resolver": "^8.0.3", 67 | "ember-set-helper": "^2.0.1", 68 | "ember-source": "~4.4.0", 69 | "ember-source-channel-url": "^3.0.0", 70 | "ember-template-lint": "^4.8.0", 71 | "ember-try": "^2.0.0", 72 | "eslint": "^7.32.0", 73 | "eslint-config-prettier": "^8.5.0", 74 | "eslint-plugin-ember": "^10.6.1", 75 | "eslint-plugin-node": "^11.1.0", 76 | "eslint-plugin-prettier": "^4.0.0", 77 | "eslint-plugin-qunit": "^7.2.0", 78 | "handlebars": "^4.7.7", 79 | "highlight.js": "^11.5.1", 80 | "loader.js": "^4.7.0", 81 | "npm-run-all": "^4.1.5", 82 | "prettier": "^2.6.2", 83 | "qunit": "^2.19.1", 84 | "qunit-dom": "^2.0.0", 85 | "showdown": "^2.1.0", 86 | "walk-sync": "^3.0.0", 87 | "webpack": "^5.72.1", 88 | "yuidoc-ember-cli-theme": "^1.0.2" 89 | }, 90 | "keywords": [ 91 | "ember-addon", 92 | "components", 93 | "semantic-ui", 94 | "ui", 95 | "wecatch" 96 | ], 97 | "dependencies": { 98 | "@ember/jquery": "^2.0.0", 99 | "@ember/render-modifiers": "^2.0.4", 100 | "broccoli-funnel": "^3.0.8", 101 | "broccoli-merge-trees": "^4.2.0", 102 | "ember-auto-import": "^2.4.1", 103 | "ember-cli-babel": "^7.26.11", 104 | "ember-cli-htmlbars": "^6.0.1", 105 | "moment": "^2.29.3", 106 | "pikaday": "^1.8.2", 107 | "semantic-ui-css": "^2.4.1" 108 | }, 109 | "ember": { 110 | "edition": "octane" 111 | }, 112 | "ember-addon": { 113 | "configPath": "tests/dummy/config", 114 | "demoURL": "http://wecatch.github.io/ember-semantic-ui/demo/" 115 | } 116 | } 117 | -------------------------------------------------------------------------------- /readme.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-undef */ 2 | const showdown = require('showdown'); 3 | const fs = require('fs'); 4 | const data = fs.readFileSync('README.md'); 5 | const converter = new showdown.Converter(); 6 | const html = converter.makeHtml(data.toString()); 7 | const htmlBody = ` 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | Ember Semantic Ui 18 | 20 | 21 | 22 |
23 |
24 | 25 | ember-semantic-ui 26 | 27 | 35 | 39 |
40 |
41 |
42 | ${html} 43 |
44 | 45 | 46 | 47 | 48 | `; 49 | 50 | fs.writeFileSync('index.html', htmlBody); 51 | -------------------------------------------------------------------------------- /testem.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | module.exports = { 4 | test_page: 'tests/index.html?hidepassed', 5 | disable_watching: true, 6 | launch_in_ci: ['Chrome'], 7 | launch_in_dev: ['Chrome'], 8 | browser_start_timeout: 120, 9 | browser_args: { 10 | Chrome: { 11 | ci: [ 12 | // --no-sandbox is needed when running Chrome inside a container 13 | process.env.CI ? '--no-sandbox' : null, 14 | '--headless', 15 | '--disable-dev-shm-usage', 16 | '--disable-software-rasterizer', 17 | '--mute-audio', 18 | '--remote-debugging-port=0', 19 | '--window-size=1440,900', 20 | ].filter(Boolean), 21 | }, 22 | }, 23 | }; 24 | -------------------------------------------------------------------------------- /tests/dummy/app/app.js: -------------------------------------------------------------------------------- 1 | import Application from '@ember/application'; 2 | import Resolver from 'ember-resolver'; 3 | import loadInitializers from 'ember-load-initializers'; 4 | import config from 'dummy/config/environment'; 5 | 6 | export default class App extends Application { 7 | modulePrefix = config.modulePrefix; 8 | podModulePrefix = config.podModulePrefix; 9 | Resolver = Resolver; 10 | } 11 | 12 | loadInitializers(App, config.modulePrefix); 13 | -------------------------------------------------------------------------------- /tests/dummy/app/components/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wecatch/ember-semantic-ui/ba1034d4b8ab03d1b68da12c43f1191e64da8a29/tests/dummy/app/components/.gitkeep -------------------------------------------------------------------------------- /tests/dummy/app/components/code-highlight/component.js: -------------------------------------------------------------------------------- 1 | // import Ember from 'ember'; 2 | import { action } from '@ember/object'; 3 | import { htmlSafe } from '@ember/template'; 4 | import hljs from 'highlight.js'; 5 | import Component from '@glimmer/component'; 6 | 7 | // import Handlebars from 'handlebars'; 8 | 9 | // const { Utils } = Handlebars; 10 | 11 | hljs.configure({ useBR: true, tabReplace: ' ' }); 12 | 13 | export default class CodeHighlightComponent extends Component { 14 | get lang() { 15 | return this.args.lang ?? 'handlebars'; 16 | } 17 | 18 | @action 19 | register(element) { 20 | hljs.highlightElement(element); 21 | } 22 | 23 | get codeBlock() { 24 | if (this.args.code) { 25 | return htmlSafe( 26 | hljs.highlightAuto(this.args.code, ['handlebars', 'javascript']).value 27 | ); 28 | } 29 | 30 | return ''; 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /tests/dummy/app/components/code-highlight/template.hbs: -------------------------------------------------------------------------------- 1 | 
2 |     {{this.codeBlock}}
3 |     {{yield}}
4 |
-------------------------------------------------------------------------------- /tests/dummy/app/controllers/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wecatch/ember-semantic-ui/ba1034d4b8ab03d1b68da12c43f1191e64da8a29/tests/dummy/app/controllers/.gitkeep -------------------------------------------------------------------------------- /tests/dummy/app/controllers/application.js: -------------------------------------------------------------------------------- 1 | import { capitalize } from '@ember/string'; 2 | import { camelize } from '@ember/string'; 3 | import Controller from '@ember/controller'; 4 | import ENV from 'dummy/config/environment'; 5 | import { inject as service } from '@ember/service'; 6 | 7 | export default class ApplicationController extends Controller { 8 | @service router; 9 | 10 | @service options; 11 | 12 | get routeName() { 13 | return capitalize(camelize(this.router.currentRouteName)); 14 | } 15 | 16 | get host() { 17 | let host = window.location.origin + ENV.rootURL; 18 | let routeName = this.routeName; 19 | if (routeName === 'Index' || routeName === 'Layout') { 20 | return ''; 21 | } 22 | 23 | let p = `docs/classes/components.${routeName}.html`; 24 | return `${host}${p}`; 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /tests/dummy/app/controllers/ui-button.js: -------------------------------------------------------------------------------- 1 | import Controller from '@ember/controller'; 2 | import { action } from '@ember/object'; 3 | 4 | export default class UiButtonController extends Controller { 5 | @action 6 | clickMe(value) { 7 | alert(value); 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /tests/dummy/app/controllers/ui-checkbox-group.js: -------------------------------------------------------------------------------- 1 | import Controller from '@ember/controller'; 2 | import { A } from '@ember/array'; 3 | import { tracked } from '@glimmer/tracking'; 4 | import { action } from '@ember/object'; 5 | import { inject as service } from '@ember/service'; 6 | 7 | export default class UiCheckboxGroup extends Controller { 8 | @service options; 9 | 10 | @tracked value1; 11 | @tracked value2; 12 | @tracked value3; 13 | @tracked radioValue1; 14 | 15 | constructor() { 16 | super(...arguments); 17 | this.value1 = A(); 18 | this.value2 = A(); 19 | this.value3 = A(); 20 | } 21 | 22 | @action 23 | onChange1(checked, value, valueList) { 24 | this.value1 = valueList; 25 | } 26 | 27 | @action 28 | onChange2(checked, value, valueList) { 29 | this.value2 = valueList; 30 | } 31 | 32 | @action 33 | onChange3(checked, value, valueList) { 34 | this.value3 = valueList; 35 | } 36 | 37 | @action 38 | onChangeRadio1(checked, value) { 39 | if (checked) { 40 | this.radioValue1 = value; 41 | } 42 | } 43 | 44 | get valueShow1() { 45 | return this.value1.join(' '); 46 | } 47 | 48 | get valueShow2() { 49 | return this.value2.join(' '); 50 | } 51 | 52 | get valueShow3() { 53 | return this.value3.join(' '); 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /tests/dummy/app/controllers/ui-checkbox.js: -------------------------------------------------------------------------------- 1 | import Controller from '@ember/controller'; 2 | import { action } from '@ember/object'; 3 | import { tracked } from '@glimmer/tracking'; 4 | import { inject as service } from '@ember/service'; 5 | 6 | export default class UiCheckboxController extends Controller { 7 | @service options; 8 | @tracked value = null; 9 | @tracked checked = false; 10 | 11 | @action 12 | onChange(checked, value) { 13 | this.checked = checked; 14 | if (checked) { 15 | this.value = value; 16 | } else { 17 | this.value = ''; 18 | } 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /tests/dummy/app/controllers/ui-input-tags.js: -------------------------------------------------------------------------------- 1 | import Controller from '@ember/controller'; 2 | import { A } from '@ember/array'; 3 | import { later } from '@ember/runloop'; 4 | import { action } from '@ember/object'; 5 | import { tracked } from '@glimmer/tracking'; 6 | 7 | // eslint-disable-next-line ember/no-classic-classes 8 | export default class UiInputTagsController extends Controller { 9 | @tracked value = A(['google']); 10 | 11 | get valueShow() { 12 | return this.value.join(','); 13 | } 14 | 15 | get value1Show() { 16 | return this.value1 && this.value1.join(','); 17 | } 18 | 19 | get value2Show() { 20 | return this.value2 && this.value2.join(','); 21 | } 22 | 23 | @action 24 | addValue(e) { 25 | this.value.addObject(e.target.value); 26 | e.target.value = ''; 27 | } 28 | 29 | @action 30 | changeValue2() { 31 | this.value2 = A(['google']); 32 | later( 33 | this, 34 | function () { 35 | this.value2.addObject('apple'); 36 | }, 37 | 1000 38 | ); 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /tests/dummy/app/controllers/ui-input.js: -------------------------------------------------------------------------------- 1 | import Controller from '@ember/controller'; 2 | import { action } from '@ember/object'; 3 | import { tracked } from '@glimmer/tracking'; 4 | 5 | export default class UiInputController extends Controller { 6 | @tracked result = 0; 7 | 8 | @action 9 | onfocus(e) { 10 | this.send('log', e); 11 | } 12 | 13 | @action 14 | log() { 15 | this.result += 1; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /tests/dummy/app/controllers/ui-modal.js: -------------------------------------------------------------------------------- 1 | import Controller from '@ember/controller'; 2 | import { action } from '@ember/object'; 3 | import { tracked } from '@glimmer/tracking'; 4 | 5 | export default class UiModalController extends Controller { 6 | @tracked display = false; 7 | @tracked display1 = false; 8 | @tracked class = ''; 9 | 10 | @action 11 | clickHandler(value) { 12 | this.class = value; 13 | this.display = !this.display; 14 | } 15 | @action 16 | clickHandler1() { 17 | this.display1 = !this.display1; 18 | } 19 | 20 | @action 21 | onShow() { 22 | console.log('callback==>onShow'); 23 | } 24 | 25 | @action 26 | onHide() { 27 | this.display = false; 28 | } 29 | 30 | @action 31 | onApprove() { 32 | this.display = false; 33 | } 34 | 35 | @action 36 | onDeny() { 37 | this.display = false; 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /tests/dummy/app/controllers/ui-multi-select.js: -------------------------------------------------------------------------------- 1 | import Controller from '@ember/controller'; 2 | import { A } from '@ember/array'; 3 | import { action } from '@ember/object'; 4 | import { tracked } from '@glimmer/tracking'; 5 | import { inject as service } from '@ember/service'; 6 | 7 | export default class UIMultiSelectController extends Controller { 8 | @tracked value = A(); 9 | get valueShow() { 10 | return this.value.map((item) => item.value).join(' '); 11 | } 12 | 13 | @service options; 14 | 15 | @action 16 | onChange(value) { 17 | this.value = value; 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /tests/dummy/app/controllers/ui-popup.js: -------------------------------------------------------------------------------- 1 | import Controller from '@ember/controller'; 2 | import { tracked } from '@glimmer/tracking'; 3 | import { action } from '@ember/object'; 4 | 5 | export default class UiPopupController extends Controller { 6 | @tracked value = null; 7 | @tracked currentPopup = null; 8 | 9 | @action 10 | onPopupShow(value, popup) { 11 | this.value = new Date(); 12 | this.currentPopup = popup; 13 | } 14 | @action 15 | save() { 16 | this.currentPopup.hide(); 17 | } 18 | @action 19 | cancel() { 20 | this.currentPopup.hide(); 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /tests/dummy/app/controllers/ui-progress.js: -------------------------------------------------------------------------------- 1 | import Controller from '@ember/controller'; 2 | import { tracked } from '@glimmer/tracking'; 3 | import { action } from '@ember/object'; 4 | 5 | export default class UiProgressController extends Controller { 6 | @tracked value = 0; 7 | 8 | @action 9 | plus() { 10 | this.value += 5; 11 | } 12 | 13 | @action 14 | minus() { 15 | this.value -= 5; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /tests/dummy/app/controllers/ui-select.js: -------------------------------------------------------------------------------- 1 | import Controller from '@ember/controller'; 2 | import { inject as service } from '@ember/service'; 3 | 4 | export default class UiSelect extends Controller { 5 | @service options; 6 | 7 | value = ''; 8 | } 9 | -------------------------------------------------------------------------------- /tests/dummy/app/helpers/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wecatch/ember-semantic-ui/ba1034d4b8ab03d1b68da12c43f1191e64da8a29/tests/dummy/app/helpers/.gitkeep -------------------------------------------------------------------------------- /tests/dummy/app/helpers/code-show.js: -------------------------------------------------------------------------------- 1 | import Helper from '@ember/component/helper'; 2 | import { inject as service } from '@ember/service'; 3 | 4 | export default class CodeShow extends Helper { 5 | constructor() { 6 | super(...arguments); 7 | } 8 | 9 | @service code; 10 | 11 | compute(params) { 12 | let code = this.code; 13 | let name = params[0]; 14 | let index = params[1]; 15 | return code.code[name][index]; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /tests/dummy/app/helpers/render-html.js: -------------------------------------------------------------------------------- 1 | import { helper } from '@ember/component/helper'; 2 | import { htmlSafe } from '@ember/template'; 3 | import hljs from 'highlight.js'; 4 | import handlebars from 'highlight.js/lib/languages/handlebars'; 5 | import xml from 'highlight.js/lib/languages/xml'; 6 | import javascript from 'highlight.js/lib/languages/javascript'; 7 | hljs.registerLanguage('handlebars', handlebars); 8 | hljs.registerLanguage('xml', xml); 9 | hljs.registerLanguage('javascript', javascript); 10 | 11 | export default helper(function renderHtml(positional /*, named*/) { 12 | let [html, lang] = positional; 13 | return htmlSafe(hljs.highlight(html, { language: lang }).value); 14 | }); 15 | -------------------------------------------------------------------------------- /tests/dummy/app/helpers/show-array.js: -------------------------------------------------------------------------------- 1 | import { helper as buildHelper } from '@ember/component/helper'; 2 | 3 | export function rawContent(content) { 4 | return content[0].join(','); 5 | } 6 | 7 | export default buildHelper(rawContent); 8 | -------------------------------------------------------------------------------- /tests/dummy/app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | EmberSemanticUiDemo 7 | 8 | 9 | 10 | {{content-for 'head'}} 11 | 12 | 13 | 14 | 15 | 16 | 17 | {{content-for 'head-footer'}} 18 | 20 | 21 | 22 | {{content-for 'body'}} 23 | 24 | 25 | 26 | 27 | {{content-for 'body-footer'}} 28 | 29 | 30 | -------------------------------------------------------------------------------- /tests/dummy/app/models/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wecatch/ember-semantic-ui/ba1034d4b8ab03d1b68da12c43f1191e64da8a29/tests/dummy/app/models/.gitkeep -------------------------------------------------------------------------------- /tests/dummy/app/router.js: -------------------------------------------------------------------------------- 1 | import EmberRouter from '@ember/routing/router'; 2 | import config from 'dummy/config/environment'; 3 | import $ from 'jquery'; 4 | 5 | export default class Router extends EmberRouter { 6 | location = config.locationType; 7 | rootURL = config.rootURL; 8 | 9 | constructor() { 10 | super(...arguments); 11 | this.on('routeDidChange', () => { 12 | // eslint-disable-next-line ember/no-jquery 13 | $('html,body').animate({ scrollTop: '0px' }, 200); 14 | }); 15 | } 16 | } 17 | 18 | Router.map(function () { 19 | this.route('layout'); 20 | 21 | this.route('ui-message'); 22 | 23 | this.route('ui-button'); 24 | 25 | this.route('ui-dropdown-menu'); 26 | this.route('ui-tab-menu'); 27 | 28 | this.route('ui-select'); 29 | this.route('ui-multi-select'); 30 | 31 | this.route('ui-input'); 32 | this.route('ui-input-tags'); 33 | this.route('ui-date-input'); 34 | this.route('ui-date-time-input'); 35 | 36 | this.route('ui-checkbox'); 37 | this.route('ui-checkbox-group'); 38 | 39 | this.route('ui-pointing-label'); 40 | 41 | this.route('ui-modal'); 42 | this.route('ui-popup'); 43 | 44 | this.route('ui-progress'); 45 | 46 | this.route('file-input'); 47 | this.route('ui-uploader'); 48 | }); 49 | -------------------------------------------------------------------------------- /tests/dummy/app/routes/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wecatch/ember-semantic-ui/ba1034d4b8ab03d1b68da12c43f1191e64da8a29/tests/dummy/app/routes/.gitkeep -------------------------------------------------------------------------------- /tests/dummy/app/services/code.js: -------------------------------------------------------------------------------- 1 | import Service from '@ember/service'; 2 | 3 | const uiButton = [ 4 | `button`, 5 | `button`, 6 | `button`, 7 | `button`, 8 | `button`, 9 | `button`, 10 | ` 11 | 12 | 13 | heart 14 | `, 15 | ]; 16 | 17 | const uiCheckboxGroup = [ 18 | ` 19 |
20 | 21 | 22 |
23 | apple 24 |
25 |
26 | google 27 |
28 |
29 | dropbox 30 |
31 |
32 | {{this.valueShow1}} 33 |
34 | 35 |
36 | `, 37 | ` 38 |
39 | 41 | 42 |
43 | apple 48 |
49 |
50 | google 55 |
56 |
57 | dropbox 59 |
60 |
61 | {{this.radioValue1}} 62 |
63 | 64 |
65 | `, 66 | ` 67 |
68 | 71 |
72 | {{this.valueShow2}} 73 |
74 |
75 | `, 76 | ` 77 |
78 | 81 |
82 | {{this.valueShow3}} 83 |
84 |
85 | `, 86 | ]; 87 | 88 | const uiCheckbox = [ 89 | ` 90 | normal 91 | `, 92 | `normal`, 93 | `toggle`, 94 | `toggle`, 95 | `slider`, 96 | ``, 97 | ]; 98 | 99 | const uiDropdownMenu = [ 100 | ` 101 | 102 |
File
103 | 104 |
105 |
New
106 |
107 | ctrl + o 108 | Open... 109 |
110 |
111 | ctrl + s 112 | Save as... 113 |
114 |
115 | ctrl + r 116 | Rename 117 |
118 |
Make a copy
119 |
120 | 121 | Move to folder 122 |
123 |
124 | 125 | Move to trash 126 |
127 |
128 |
Download As...
129 |
130 | 131 | Publish To Web 132 |
133 |
Google Docs
134 |
Google Drive
135 |
Dropbox
136 |
Adobe Creative Cloud
137 |
Private FTP
138 |
Another Service...
139 |
140 |
141 |
E-mail Collaborators
142 |
143 | `, 144 | ]; 145 | 146 | const uiInput = [ 147 | ``, 148 | ``, 149 | ``, 150 | ``, 151 | ``, 152 | ` 153 | 154 | 155 | {{this.result}}`, 156 | ` 157 | 158 | 159 | `, 160 | ` 161 | 162 | search 163 | `, 164 | ` 165 | 166 | 167 | `, 168 | ` 169 | 170 | 171 | `, 172 | ` 173 | 174 | 175 | `, 176 | ` 177 | 178 | 179 | `, 180 | ]; 181 | 182 | const uiInputTags = [ 183 | ``, 184 | ]; 185 | 186 | const uiMessage = [ 187 | `{{#ui-message type="info" header="这是一条提示消息"}}{{/ui-message}}`, 188 | `{{#ui-message type="success" header="这是一条成功消息"}}{{/ui-message}}`, 189 | `{{#ui-message type="error" header="这是一条错误消息"}}{{/ui-message}}`, 190 | `{{#ui-message type="warning" header="这是一条警告消息"}}{{/ui-message}}`, 191 | `{{#ui-message header="这是一条消息"}}{{/ui-message}}`, 192 | `{{#ui-message header="这是超大号消息" size="massive"}}{{/ui-message}}`, 193 | `{{#ui-message close=true header="这是一条可清除的消息"}}{{/ui-message}}`, 194 | `{{#ui-message header="这是一条可自动消除的消息" timeout=20000 }}{{/ui-message}}`, 195 | ` 196 | {{#ui-message header="这是一条带内容的消息"}} 197 |
    198 |
  • 199 |

    第一点

    200 |
    • 201 |
  • 202 |

    第二点

    203 |
    • 204 |
205 | {{/ui-message}}`, 206 | ]; 207 | 208 | const uiModal = [ 209 | ` 210 | 211 | modal 1 212 | 213 |
214 | 215 |
216 |
217 |
218 |

first role

219 |
220 |
221 | 222 | 223 |
224 | Nope 225 |
226 |
227 | Yep, that's me 228 |
229 | 230 | `, 231 | ]; 232 | 233 | const uiMultiSelect = [ 234 | ` 235 | `, 241 | ]; 242 | 243 | const uiProgress = [ 244 | ` 245 | `, 246 | ]; 247 | 248 | const uiSelect = [ 249 | ` 250 |
251 |
252 | {{this.value}} 253 |
254 | 255 |
256 | `, 257 | ]; 258 | 259 | const uiTabMenu = [ 260 | ` 261 |
262 | 263 | first 264 | second 265 | 266 | 267 | first 268 | 269 | 270 | second 271 | 272 |
273 | `, 274 | ]; 275 | 276 | const fileInput = [ 277 | ` 278 | `, 284 | ]; 285 | 286 | const uiUploader = [ 287 | ` 288 | 295 | `, 296 | ]; 297 | 298 | const uiDateTimeInput = [ 299 | ``, 300 | ` 301 | 305 | `, 306 | ]; 307 | 308 | const uiPopup = [ 309 | ` 310 | hover show me 315 | 316 |
317 | {{this.value}} 318 |
319 | 320 | `, 321 | ` 322 | click show me 329 | 330 | `, 331 | ` 332 | hover show me 338 | `, 339 | ]; 340 | 341 | const layout = [ 342 | ` 343 |
344 | 345 |
346 | left 347 |
348 | 349 | 350 |
351 | main content 352 |
353 | 354 |
355 | `, 356 | ` 357 |
358 |
359 | 360 |
361 | 362 | Inbox 363 |
1
364 | 365 | 366 | Spam 367 |
51
368 | 369 | 370 | Updates 371 |
1
372 | 373 |
374 |
375 | 376 | 377 |
378 |
379 |
380 | 381 | 382 |
383 |
384 |
385 | 386 | 387 |
388 | 389 |
390 |
391 | 392 |
393 |
394 | `, 395 | 396 | ` 397 |
398 | 399 |
400 |
401 | Home 402 |
403 |
404 | 405 | 406 |
407 | left 408 |
409 | 410 | 411 |
412 | main content 413 |
414 | 415 |
416 | `, 417 | ]; 418 | 419 | const code = { 420 | 'ui-uploader': uiUploader, 421 | 'ui-tab-menu': uiTabMenu, 422 | 'ui-select': uiSelect, 423 | 'ui-progress': uiProgress, 424 | 'ui-multi-select': uiMultiSelect, 425 | 'ui-modal': uiModal, 426 | 'ui-message': uiMessage, 427 | 'ui-input-tags': uiInputTags, 428 | 'ui-input': uiInput, 429 | 'ui-button': uiButton, 430 | 'ui-checkbox-group': uiCheckboxGroup, 431 | 'ui-checkbox': uiCheckbox, 432 | 'ui-dropdown-menu': uiDropdownMenu, 433 | 'file-input': fileInput, 434 | 'ui-date-time-input': uiDateTimeInput, 435 | 'ui-popup': uiPopup, 436 | layout: layout, 437 | }; 438 | 439 | export default class CodeService extends Service { 440 | code = code; 441 | } 442 | -------------------------------------------------------------------------------- /tests/dummy/app/services/options.js: -------------------------------------------------------------------------------- 1 | import Service from '@ember/service'; 2 | 3 | export default class OptionService extends Service { 4 | constructor() { 5 | super(...arguments); 6 | this.options = [ 7 | { name: 'google', value: 'google' }, 8 | { name: 'apple', value: 'apple' }, 9 | { name: 'dropbox', value: 'dropbox' }, 10 | { name: 'twitter', value: 'twitter' }, 11 | { name: 'facebook', value: 'facebook' }, 12 | ]; 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /tests/dummy/app/styles/app.css: -------------------------------------------------------------------------------- 1 | .hljs { 2 | background: none; 3 | } 4 | 5 | pre { 6 | display: block; 7 | /*padding: 9.5px;*/ 8 | margin: 0 0 10px; 9 | font-size: 13px; 10 | line-height: 1.42857143; 11 | word-break: break-all; 12 | word-wrap: break-word; 13 | color: #616469; 14 | background-color: #f5f5f5; 15 | /*border: 1px solid #cccccc;*/ 16 | border-radius: 2px; 17 | border: 1px solid #ddd; 18 | padding: 10px 0; 19 | padding-left: 10px; 20 | } 21 | -------------------------------------------------------------------------------- /tests/dummy/app/templates/application.hbs: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 |
5 | {{!-- template-lint-disable no-inline-styles --}} 6 |
7 |
8 | Layout 9 |
10 | layout 11 | 12 |
13 | Button 14 |
15 | ui-button 16 | 17 |
18 | Menu 19 |
20 | ui-tab-menu 21 | ui-dropdown-menu 22 | 23 |
24 | Select 25 |
26 | ui-select 27 | ui-multi-select 28 | 29 |
30 | Input 31 |
32 | ui-input 33 | ui-date-input 34 | ui-date-time-input 35 | ui-input-tags 36 | 37 |
38 | Checkbox 39 |
40 | ui-checkbox 41 | ui-checkbox-group 42 | 43 |
44 | Modal 45 |
46 | ui-modal 47 | 48 |
49 | Popup 50 |
51 | ui-popup 52 | 53 | 54 |
55 | Progress 56 |
57 | ui-progress 58 | 59 |
60 | Message 61 |
62 | ui-message 63 | 64 |
65 | File 66 |
67 | file-input 68 | ui-uploader 69 |
70 |
71 | 72 | 73 | {{#if this.host}} 74 |
75 | See {{this.routeName}} Doc 76 |
77 | {{/if}} 78 | {{outlet}} 79 | 80 |
81 |
-------------------------------------------------------------------------------- /tests/dummy/app/templates/file-input.hbs: -------------------------------------------------------------------------------- 1 |
2 |
file input
3 |
4 |
5 |
6 |
7 | 8 |
9 |
10 | 11 | {{#if this.fileObject}} 12 | {{!-- template-lint-disable require-valid-alt-text --}} 13 | 14 | {{/if}} 15 |
16 |
17 |
18 |
19 |
-------------------------------------------------------------------------------- /tests/dummy/app/templates/layout.hbs: -------------------------------------------------------------------------------- 1 |
2 | Left menu + Right content 3 |
4 |
5 |
6 | 7 |
8 | left 9 |
10 | 11 | 12 |
13 | main content 14 |
15 | 16 |
17 | {{!-- template-lint-disable no-inline-styles --}} 18 |
19 | 20 |
21 | Left menu + Right content 22 |
23 |
24 |
25 |
26 | 27 |
28 | {{!-- template-lint-disable link-href-attributes --}} 29 | 30 | Inbox 31 |
1
32 | 33 | 34 | Spam 35 |
51
36 | 37 | 38 | Updates 39 |
1
40 | 41 |
42 |
43 | {{!-- template-lint-disable require-input-label --}} 44 | 45 | 46 |
47 |
48 |
49 | 50 | 51 |
52 |
53 |
54 | 55 | {{!-- template-lint-disable require-input-label --}} 56 | 57 |
58 | 59 |
60 |
61 | 62 |
63 |
64 |
65 | 66 |
67 | top menu+left menu + right content 68 |
69 |
70 |
71 | 72 |
73 |
74 | Home 75 |
76 |
77 | 78 | 79 |
80 | left 81 |
82 | 83 | 84 |
85 | main content 86 |
87 | 88 |
89 |
90 | -------------------------------------------------------------------------------- /tests/dummy/app/templates/ui-button.hbs: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | 5 | import Controller from '@ember/controller'; 6 | import { action } from '@ember/object'; 7 | 8 | export default class UiButtonController extends Controller { 9 | @action 10 | clickMe(value) { 11 | alert(value); 12 | } 13 | } 14 | 15 | 16 |
17 | button 18 |
19 | 20 | 21 |
22 | button 23 |
24 | 25 | 26 |
27 | button 28 |
29 | 30 | 31 | 32 |
33 | button 34 |
35 | 36 |
37 | button 38 |
39 | 40 |
41 | button 42 |
43 | 44 | 45 |
46 | 47 | 48 | heart 49 | 50 |
51 |
52 |
53 |
-------------------------------------------------------------------------------- /tests/dummy/app/templates/ui-checkbox-group.hbs: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | 5 | import Controller from '@ember/controller'; 6 | import { A } from '@ember/array'; 7 | import { tracked } from '@glimmer/tracking'; 8 | import { action } from '@ember/object'; 9 | import { inject as service } from '@ember/service'; 10 | 11 | export default class UiCheckboxGroup extends Controller { 12 | @service options; 13 | 14 | @tracked value1; 15 | @tracked value2; 16 | @tracked value3; 17 | @tracked radioValue1; 18 | 19 | constructor() { 20 | super(...arguments); 21 | this.value1 = A(); 22 | this.value2 = A(); 23 | this.value3 = A(); 24 | } 25 | 26 | @action 27 | onChange1(checked, value, valueList) { 28 | this.value1 = valueList; 29 | } 30 | 31 | @action 32 | onChange2(checked, value, valueList) { 33 | this.value2 = valueList; 34 | } 35 | 36 | @action 37 | onChange3(checked, value, valueList) { 38 | this.value3 = valueList; 39 | } 40 | 41 | @action 42 | onChangeRadio1(checked, value) { 43 | if (checked) { 44 | this.radioValue1 = value; 45 | } 46 | } 47 | 48 | get valueShow1() { 49 | return this.value1.join(' '); 50 | } 51 | 52 | get valueShow2() { 53 | return this.value2.join(' '); 54 | } 55 | 56 | get valueShow3() { 57 | return this.value3.join(' '); 58 | } 59 | } 60 | 61 | 62 | 63 |
64 |
65 | 66 | 67 |
68 | apple 69 |
70 |
71 | google 72 |
73 |
74 | dropbox 75 |
76 |
77 | {{this.valueShow1}} 78 |
79 | 80 |
81 |
82 | 83 | 84 |
85 |
radio group
86 |
87 | 88 | 89 |
90 | apple 91 |
92 |
93 | google 94 |
95 |
96 | dropbox 97 |
98 |
99 | {{this.radioValue1}} 100 |
101 | 102 |
103 |
104 | 105 | 106 |
107 |
108 | 109 |
110 | {{this.valueShow2}} 111 |
112 |
113 |
114 | 115 | 116 |
117 |
118 | 119 |
120 | {{this.valueShow3}} 121 |
122 |
123 |
124 | 125 |
126 |
127 |
-------------------------------------------------------------------------------- /tests/dummy/app/templates/ui-checkbox.hbs: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | 5 | 6 | import Controller from '@ember/controller'; 7 | import { action } from '@ember/object'; 8 | import { tracked } from '@glimmer/tracking'; 9 | import { inject as service } from '@ember/service'; 10 | 11 | export default class UiCheckboxController extends Controller { 12 | @service options; 13 | @tracked value = null; 14 | @tracked checked = false; 15 | 16 | @action 17 | onChange(checked, value) { 18 | this.checked = checked; 19 | if (checked) { 20 | this.value = value; 21 | } else { 22 | this.value = ''; 23 | } 24 | } 25 | } 26 | 27 | 28 | 29 |
30 | normal 31 | {{this.isChecked}} 32 |
33 | 34 | 35 |
36 | normal 37 |
38 | 39 | 40 |
41 | toggle 42 |
43 | 44 | 45 |
46 | toggle 47 |
48 | 49 | 50 |
51 | slider 52 |
53 | 54 | 55 |
56 | 57 | {{this.value}} 58 |
59 |
60 |
61 |
-------------------------------------------------------------------------------- /tests/dummy/app/templates/ui-date-input.hbs: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | 5 |
6 | 7 | {{this.value}} 8 |
9 |
10 |
11 |
-------------------------------------------------------------------------------- /tests/dummy/app/templates/ui-date-time-input.hbs: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | 5 |
6 | 10 | {{this.value}} 11 |
12 |
13 |
14 |
-------------------------------------------------------------------------------- /tests/dummy/app/templates/ui-dropdown-menu.hbs: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | 5 |
6 |
7 | 8 |
File
9 | 10 |
11 |
New
12 |
13 | ctrl + o 14 | Open... 15 |
16 |
17 | ctrl + s 18 | Save as... 19 |
20 |
21 | ctrl + r 22 | Rename 23 |
24 |
Make a copy
25 |
26 | 27 | Move to folder 28 |
29 |
30 | 31 | Move to trash 32 |
33 |
34 |
Download As...
35 |
36 | 37 | Publish To Web 38 |
39 |
Google Docs
40 |
Google Drive
41 |
Dropbox
42 |
Adobe Creative Cloud
43 |
Private FTP
44 |
Another Service...
45 |
46 |
47 |
E-mail Collaborators
48 |
49 | 50 |
51 |
52 |
53 |
54 |
-------------------------------------------------------------------------------- /tests/dummy/app/templates/ui-input-tags.hbs: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | 5 |
6 | 7 |

{{this.valueShow}}

8 | 9 | {{!-- template-lint-disable require-input-label --}} 10 |
11 | 12 |
13 |
14 |
15 |
16 |
-------------------------------------------------------------------------------- /tests/dummy/app/templates/ui-input.hbs: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 | 6 |
7 | 8 |
9 | 10 | 11 |
12 | 13 |
14 | 15 | 16 |
17 | 18 |
19 | 20 | 21 | 22 |
23 | 24 |
25 | 26 | 27 |
28 | 29 |
30 | 31 | 32 |
33 | 34 | 35 | {{this.result}} 36 |
37 |
38 | 39 | 40 |
41 | 42 |
43 | 44 | 45 | 46 |
47 | 48 | 49 |
50 | 51 | search 52 | 53 |
54 | 55 | 56 |
57 | 58 | 59 | 60 |
61 | 62 | 63 |
64 | 65 | 66 | 67 |
68 | 69 | 70 |
71 | 72 | 73 | 74 |
75 | 76 | 77 |
78 | 79 | 80 | 81 |
82 |
83 |
84 |
85 |
-------------------------------------------------------------------------------- /tests/dummy/app/templates/ui-message.hbs: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | 5 |
6 |
7 | 8 |
9 | 10 |

11 |
12 | 13 |
14 |
15 | 16 |
17 | 18 |

19 |
20 | 21 |
22 |
23 | 24 |
25 | 26 |

27 |
28 | 29 |
30 |
31 | 32 |
33 | 34 |

35 |
36 | 37 |
38 |
39 | 40 |
41 | 42 |

43 |
44 | 45 |
46 |
47 | 48 |
49 | 50 |

51 |
52 | 53 |
54 |
55 | 56 |
57 | 58 |

59 |
60 | 61 |
62 |
63 | 64 |
65 | 66 |

67 |
68 | 69 |
70 |
71 | 72 |
    73 |
  • 74 |

    第一点

    75 |
    • 76 |
  • 77 |

    第二点

    78 |
    • 79 |
80 | 81 |
82 |
83 |
-------------------------------------------------------------------------------- /tests/dummy/app/templates/ui-modal.hbs: -------------------------------------------------------------------------------- 1 | {{outlet}} 2 | 3 |
4 |
5 |
6 |

normal

7 | click me 8 | Full Screen 9 | Overlay Full Screen 10 | mini 11 | large 12 | longer 13 |
14 | 15 |
16 |
17 | 18 | modal 1 19 | 20 |
21 | {{!-- template-lint-disable require-valid-alt-text --}} 22 | 23 |
24 |
25 |
26 |

first role

27 |
28 |
29 | 30 | 31 |
32 | Nope 33 |
34 |
35 | Yep, that's me 36 |
37 | 38 | 39 |
40 |
41 |
42 |
-------------------------------------------------------------------------------- /tests/dummy/app/templates/ui-multi-select.hbs: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | 5 |
6 |
7 | {{this.valueShow}} 8 |
9 | 15 |
16 |
17 |
18 |
-------------------------------------------------------------------------------- /tests/dummy/app/templates/ui-popup.hbs: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | 5 |
6 | hover show me 11 | 12 |
13 | {{this.value}} 14 |
15 | 16 |
17 | 18 | 19 |
20 | click show me 27 | 28 |
29 |
30 |
31 | 32 |
33 |
34 | 39 | 44 |
45 |
46 |
47 | 48 |
49 | 50 | 51 |
52 | hover show me 58 |
59 | 60 |
61 |
62 |
-------------------------------------------------------------------------------- /tests/dummy/app/templates/ui-progress.hbs: -------------------------------------------------------------------------------- 1 |
2 |
ui progress
3 | 4 | 5 |
6 |
7 | 8 | 9 |
10 |
11 |
-------------------------------------------------------------------------------- /tests/dummy/app/templates/ui-select.hbs: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | 5 | import Service from '@ember/service'; 6 | export default class OptionService extends Service { 7 | constructor() { 8 | super(...arguments); 9 | this.options = [ 10 | { name: 'google', value: 'google' }, 11 | { name: 'apple', value: 'apple' }, 12 | { name: 'dropbox', value: 'dropbox' }, 13 | { name: 'twitter', value: 'twitter' }, 14 | { name: 'facebook', value: 'facebook' }, 15 | ]; 16 | } 17 | } 18 | 19 | 
20 |       {{render-html '
21 |   

22 |     

23 |       {{this.value}}
24 |     

25 |     
27 |   

28 |         ' 'handlebars'
29 |       }}
30 |
31 |
32 |
33 |
34 | {{this.value}} 35 |
36 | 37 |
38 |
39 |
40 |
41 |
-------------------------------------------------------------------------------- /tests/dummy/app/templates/ui-tab-menu.hbs: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | 5 |
6 |
7 | 8 | {{!-- template-lint-disable link-href-attributes --}} 9 | first 10 | second 11 | 12 | 13 | first 14 | 15 | 16 | second 17 | 18 |
19 |
20 |
21 |
22 |
-------------------------------------------------------------------------------- /tests/dummy/app/templates/ui-uploader.hbs: -------------------------------------------------------------------------------- 1 |
2 |
ui uploader
3 |
4 |
5 |
6 |
7 | 8 |
9 | 10 |
11 |
12 |
13 |
-------------------------------------------------------------------------------- /tests/dummy/config/ember-cli-update.json: -------------------------------------------------------------------------------- 1 | { 2 | "schemaVersion": "1.0.0", 3 | "packages": [ 4 | { 5 | "name": "ember-cli", 6 | "version": "4.4.0", 7 | "blueprints": [ 8 | { 9 | "name": "addon", 10 | "outputRepo": "https://github.com/ember-cli/ember-addon-output", 11 | "codemodsSource": "ember-addon-codemods-manifest@1", 12 | "isBaseBlueprint": true, 13 | "options": [ 14 | "--no-welcome" 15 | ] 16 | } 17 | ] 18 | } 19 | ] 20 | } 21 | -------------------------------------------------------------------------------- /tests/dummy/config/environment.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | module.exports = function (environment) { 4 | let ENV = { 5 | modulePrefix: 'dummy', 6 | environment, 7 | rootURL: '/', 8 | locationType: 'history', 9 | EmberENV: { 10 | FEATURES: { 11 | // Here you can enable experimental features on an ember canary build 12 | // e.g. 'with-controller': true 13 | }, 14 | EXTEND_PROTOTYPES: { 15 | // Prevent Ember Data from overriding Date.parse. 16 | Date: false, 17 | }, 18 | }, 19 | 20 | APP: { 21 | // Here you can pass flags/options to your application instance 22 | // when it is created 23 | }, 24 | }; 25 | 26 | if (environment === 'development') { 27 | // ENV.APP.LOG_RESOLVER = true; 28 | // ENV.APP.LOG_ACTIVE_GENERATION = true; 29 | // ENV.APP.LOG_TRANSITIONS = true; 30 | // ENV.APP.LOG_TRANSITIONS_INTERNAL = true; 31 | // ENV.APP.LOG_VIEW_LOOKUPS = true; 32 | } 33 | 34 | if (environment === 'test') { 35 | // Testem prefers this... 36 | // ENV.rootURL = '/'; 37 | ENV.locationType = 'none'; 38 | 39 | // keep test console output quieter 40 | ENV.APP.LOG_ACTIVE_GENERATION = false; 41 | ENV.APP.LOG_VIEW_LOOKUPS = false; 42 | 43 | ENV.APP.rootElement = '#ember-testing'; 44 | ENV.APP.autoboot = false; 45 | } 46 | 47 | if (environment === 'production') { 48 | // here you can enable a production-specific feature 49 | } 50 | 51 | if (environment === 'gh-pages') { 52 | ENV.rootURL = '/ember-semantic-ui/demo/'; 53 | ENV.modulePrefix = 'dummy'; 54 | ENV.locationType = 'hash'; 55 | } 56 | 57 | return ENV; 58 | }; 59 | -------------------------------------------------------------------------------- /tests/dummy/config/optional-features.json: -------------------------------------------------------------------------------- 1 | { 2 | "application-template-wrapper": false, 3 | "default-async-observers": true, 4 | "jquery-integration": false, 5 | "template-only-glimmer-components": true 6 | } 7 | -------------------------------------------------------------------------------- /tests/dummy/config/targets.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const browsers = [ 4 | 'last 1 Chrome versions', 5 | 'last 1 Firefox versions', 6 | 'last 1 Safari versions', 7 | ]; 8 | 9 | module.exports = { 10 | browsers, 11 | }; 12 | -------------------------------------------------------------------------------- /tests/dummy/public/robots.txt: -------------------------------------------------------------------------------- 1 | # http://www.robotstxt.org 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /tests/helpers/index.js: -------------------------------------------------------------------------------- 1 | import { 2 | setupApplicationTest as upstreamSetupApplicationTest, 3 | setupRenderingTest as upstreamSetupRenderingTest, 4 | setupTest as upstreamSetupTest, 5 | } from 'ember-qunit'; 6 | 7 | // This file exists to provide wrappers around ember-qunit's / ember-mocha's 8 | // test setup functions. This way, you can easily extend the setup that is 9 | // needed per test type. 10 | 11 | function setupApplicationTest(hooks, options) { 12 | upstreamSetupApplicationTest(hooks, options); 13 | 14 | // Additional setup for application tests can be done here. 15 | // 16 | // For example, if you need an authenticated session for each 17 | // application test, you could do: 18 | // 19 | // hooks.beforeEach(async function () { 20 | // await authenticateSession(); // ember-simple-auth 21 | // }); 22 | // 23 | // This is also a good place to call test setup functions coming 24 | // from other addons: 25 | // 26 | // setupIntl(hooks); // ember-intl 27 | // setupMirage(hooks); // ember-cli-mirage 28 | } 29 | 30 | function setupRenderingTest(hooks, options) { 31 | upstreamSetupRenderingTest(hooks, options); 32 | 33 | // Additional setup for rendering tests can be done here. 34 | } 35 | 36 | function setupTest(hooks, options) { 37 | upstreamSetupTest(hooks, options); 38 | 39 | // Additional setup for unit tests can be done here. 40 | } 41 | 42 | export { setupApplicationTest, setupRenderingTest, setupTest }; 43 | -------------------------------------------------------------------------------- /tests/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Dummy Tests 6 | 7 | 8 | 9 | {{content-for "head"}} 10 | {{content-for "test-head"}} 11 | 12 | 13 | 14 | 15 | 16 | 17 | {{content-for "head-footer"}} 18 | {{content-for "test-head-footer"}} 19 | 20 | 21 | {{content-for "body"}} 22 | {{content-for "test-body"}} 23 | 24 |
25 |
26 |
27 |
28 |
29 |
30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | {{content-for "body-footer"}} 39 | {{content-for "test-body-footer"}} 40 | 41 | 42 | -------------------------------------------------------------------------------- /tests/integration/components/file-input-test.js: -------------------------------------------------------------------------------- 1 | import { module, test } from 'qunit'; 2 | import { setupRenderingTest } from 'dummy/tests/helpers'; 3 | import { render } from '@ember/test-helpers'; 4 | import { hbs } from 'ember-cli-htmlbars'; 5 | 6 | module('Integration | Component | file-input', function (hooks) { 7 | setupRenderingTest(hooks); 8 | 9 | test('it renders', async function (assert) { 10 | // Set any properties with this.set('myProperty', 'value'); 11 | // Handle any actions with this.set('myAction', function(val) { ... }); 12 | 13 | await render(hbs``); 14 | 15 | assert.dom(this.element).hasText(''); 16 | }); 17 | }); 18 | -------------------------------------------------------------------------------- /tests/integration/components/ui-button-test.js: -------------------------------------------------------------------------------- 1 | import { module, test } from 'qunit'; 2 | import { setupRenderingTest } from 'dummy/tests/helpers'; 3 | import { render } from '@ember/test-helpers'; 4 | import { hbs } from 'ember-cli-htmlbars'; 5 | 6 | module('Integration | Component | ui-button', function (hooks) { 7 | setupRenderingTest(hooks); 8 | 9 | test('it renders', async function (assert) { 10 | // Set any properties with this.set('myProperty', 'value'); 11 | // Handle any actions with this.set('myAction', function(val) { ... }); 12 | 13 | await render(hbs``); 14 | 15 | assert.dom(this.element).hasText(''); 16 | 17 | // Template block usage: 18 | await render(hbs` 19 | 20 | template block text 21 | 22 | `); 23 | 24 | assert.dom(this.element).hasText('template block text'); 25 | }); 26 | }); 27 | -------------------------------------------------------------------------------- /tests/integration/components/ui-column-test.js: -------------------------------------------------------------------------------- 1 | import { module, test } from 'qunit'; 2 | import { setupRenderingTest } from 'dummy/tests/helpers'; 3 | import { render } from '@ember/test-helpers'; 4 | import { hbs } from 'ember-cli-htmlbars'; 5 | 6 | module('Integration | Component | ui-column', function (hooks) { 7 | setupRenderingTest(hooks); 8 | 9 | test('it renders', async function (assert) { 10 | // Set any properties with this.set('myProperty', 'value'); 11 | // Handle any actions with this.set('myAction', function(val) { ... }); 12 | 13 | await render(hbs``); 14 | 15 | assert.dom(this.element).hasText(''); 16 | 17 | // Template block usage: 18 | await render(hbs` 19 | 20 | template block text 21 | 22 | `); 23 | 24 | assert.dom(this.element).hasText('template block text'); 25 | }); 26 | }); 27 | -------------------------------------------------------------------------------- /tests/integration/components/ui-date-input-test.js: -------------------------------------------------------------------------------- 1 | import { module, test } from 'qunit'; 2 | import { setupRenderingTest } from 'dummy/tests/helpers'; 3 | import { render } from '@ember/test-helpers'; 4 | import { hbs } from 'ember-cli-htmlbars'; 5 | 6 | module('Integration | Component | ui-date-input', function (hooks) { 7 | setupRenderingTest(hooks); 8 | 9 | test('it renders without any component arguments', async function (assert) { 10 | // Set any properties with this.set('myProperty', 'value'); 11 | // Handle any actions with this.set('myAction', function(val) { ... }); 12 | 13 | await render(hbs``); 14 | 15 | assert.dom(this.element).hasText(''); 16 | }); 17 | 18 | test('it renders with value', async function (assert) { 19 | // Template block usage: 20 | await render(hbs` 21 | 22 | `); 23 | 24 | assert.dom(this.element.querySelector('div')).hasClass('ui'); 25 | assert.dom(this.element.querySelector('div')).hasClass('input'); 26 | assert.dom(this.element.querySelector('input')).hasValue('2016-03-04'); 27 | }); 28 | }); 29 | -------------------------------------------------------------------------------- /tests/integration/components/ui-date-time-input-test.js: -------------------------------------------------------------------------------- 1 | import { module, test } from 'qunit'; 2 | import { setupRenderingTest } from 'dummy/tests/helpers'; 3 | import { render } from '@ember/test-helpers'; 4 | import { hbs } from 'ember-cli-htmlbars'; 5 | 6 | module('Integration | Component | ui-date-time-input', function (hooks) { 7 | setupRenderingTest(hooks); 8 | 9 | test('it renders', async function (assert) { 10 | // Set any properties with this.set('myProperty', 'value'); 11 | // Handle any actions with this.set('myAction', function(val) { ... }); 12 | 13 | await render(hbs``); 14 | 15 | const form = this.element.querySelector('div'); 16 | const fileds = form.querySelector('div'); 17 | 18 | assert.dom(form).hasClass('form'); 19 | assert.dom(fileds).hasClass('fields'); 20 | }); 21 | }); 22 | -------------------------------------------------------------------------------- /tests/integration/components/ui-dropdown-menu-test.js: -------------------------------------------------------------------------------- 1 | import { module, test } from 'qunit'; 2 | import { setupRenderingTest } from 'dummy/tests/helpers'; 3 | import { render } from '@ember/test-helpers'; 4 | import { hbs } from 'ember-cli-htmlbars'; 5 | 6 | module('Integration | Component | ui-dropdown-menu', function (hooks) { 7 | setupRenderingTest(hooks); 8 | 9 | test('it renders', async function (assert) { 10 | // Set any properties with this.set('myProperty', 'value'); 11 | // Handle any actions with this.set('myAction', function(val) { ... }); 12 | 13 | await render(hbs``); 14 | 15 | assert.dom(this.element).hasText(''); 16 | 17 | // Template block usage: 18 | await render(hbs` 19 | 20 | template block text 21 | 22 | `); 23 | 24 | assert.dom(this.element).hasText('template block text'); 25 | }); 26 | }); 27 | -------------------------------------------------------------------------------- /tests/integration/components/ui-input-tags-test.js: -------------------------------------------------------------------------------- 1 | import { module, test } from 'qunit'; 2 | import { setupRenderingTest } from 'dummy/tests/helpers'; 3 | import { render } from '@ember/test-helpers'; 4 | import { hbs } from 'ember-cli-htmlbars'; 5 | 6 | module('Integration | Component | ui-input-tags', function (hooks) { 7 | setupRenderingTest(hooks); 8 | 9 | test('it renders', async function (assert) { 10 | // Set any properties with this.set('myProperty', 'value'); 11 | // Handle any actions with this.set('myAction', function(val) { ... }); 12 | this.set('value', ['google', 'apple']); 13 | // Template block usage: 14 | await render(hbs` 15 | 16 | template block text 17 | 18 | `); 19 | 20 | assert 21 | .dom(this.element.querySelector('input[type="hidden"]')) 22 | .hasValue('google,apple'); 23 | }); 24 | }); 25 | -------------------------------------------------------------------------------- /tests/integration/components/ui-message-test.js: -------------------------------------------------------------------------------- 1 | import { module, test } from 'qunit'; 2 | import { setupRenderingTest } from 'dummy/tests/helpers'; 3 | import { render } from '@ember/test-helpers'; 4 | import { hbs } from 'ember-cli-htmlbars'; 5 | 6 | module('Integration | Component | ui-message', function (hooks) { 7 | setupRenderingTest(hooks); 8 | 9 | test('it renders', async function (assert) { 10 | // Set any properties with this.set('myProperty', 'value'); 11 | // Handle any actions with this.set('myAction', function(val) { ... }); 12 | 13 | await render(hbs``); 14 | 15 | assert.dom(this.element).hasText(''); 16 | 17 | // Template block usage: 18 | await render(hbs` 19 | 20 | template block text 21 | 22 | `); 23 | 24 | assert.dom(this.element).hasText('template block text'); 25 | }); 26 | }); 27 | -------------------------------------------------------------------------------- /tests/integration/components/ui-modal/content-test.js: -------------------------------------------------------------------------------- 1 | import { module, test } from 'qunit'; 2 | import { setupRenderingTest } from 'dummy/tests/helpers'; 3 | import { render } from '@ember/test-helpers'; 4 | import { hbs } from 'ember-cli-htmlbars'; 5 | 6 | module('Integration | Component | ui-modal/content', function (hooks) { 7 | setupRenderingTest(hooks); 8 | 9 | test('it renders', async function (assert) { 10 | // Set any properties with this.set('myProperty', 'value'); 11 | // Handle any actions with this.set('myAction', function(val) { ... }); 12 | 13 | await render(hbs``); 14 | 15 | assert.dom(this.element).hasText(''); 16 | 17 | // Template block usage: 18 | await render(hbs` 19 | 20 | template block text 21 | 22 | `); 23 | 24 | assert.dom(this.element).hasText('template block text'); 25 | }); 26 | }); 27 | -------------------------------------------------------------------------------- /tests/integration/components/ui-modal/foot-test.js: -------------------------------------------------------------------------------- 1 | import { module, test } from 'qunit'; 2 | import { setupRenderingTest } from 'dummy/tests/helpers'; 3 | import { render } from '@ember/test-helpers'; 4 | import { hbs } from 'ember-cli-htmlbars'; 5 | 6 | module('Integration | Component | ui-modal/foot', function (hooks) { 7 | setupRenderingTest(hooks); 8 | 9 | test('it renders', async function (assert) { 10 | // Set any properties with this.set('myProperty', 'value'); 11 | // Handle any actions with this.set('myAction', function(val) { ... }); 12 | 13 | await render(hbs``); 14 | 15 | assert.dom(this.element).hasText(''); 16 | 17 | // Template block usage: 18 | await render(hbs` 19 | 20 | template block text 21 | 22 | `); 23 | 24 | assert.dom(this.element).hasText('template block text'); 25 | }); 26 | }); 27 | -------------------------------------------------------------------------------- /tests/integration/components/ui-modal/title-test.js: -------------------------------------------------------------------------------- 1 | import { module, test } from 'qunit'; 2 | import { setupRenderingTest } from 'dummy/tests/helpers'; 3 | import { render } from '@ember/test-helpers'; 4 | import { hbs } from 'ember-cli-htmlbars'; 5 | 6 | module('Integration | Component | ui-modal/title', function (hooks) { 7 | setupRenderingTest(hooks); 8 | 9 | test('it renders', async function (assert) { 10 | // Set any properties with this.set('myProperty', 'value'); 11 | // Handle any actions with this.set('myAction', function(val) { ... }); 12 | 13 | await render(hbs``); 14 | 15 | assert.dom(this.element).hasText(''); 16 | 17 | // Template block usage: 18 | await render(hbs` 19 | 20 | template block text 21 | 22 | `); 23 | 24 | assert.dom(this.element).hasText('template block text'); 25 | }); 26 | }); 27 | -------------------------------------------------------------------------------- /tests/integration/components/ui-popup-test.js: -------------------------------------------------------------------------------- 1 | import { module, test } from 'qunit'; 2 | import { setupRenderingTest } from 'dummy/tests/helpers'; 3 | import { render } from '@ember/test-helpers'; 4 | import { hbs } from 'ember-cli-htmlbars'; 5 | 6 | module('Integration | Component | ui-popup', function (hooks) { 7 | setupRenderingTest(hooks); 8 | 9 | test('it renders', async function (assert) { 10 | // Set any properties with this.set('myProperty', 'value'); 11 | // Handle any actions with this.set('myAction', function(val) { ... }); 12 | 13 | await render(hbs``); 14 | 15 | assert.dom(this.element).hasText(''); 16 | 17 | // Template block usage: 18 | await render(hbs` 19 | 20 | template block text 21 | 22 | `); 23 | 24 | assert.dom(this.element).hasText('template block text'); 25 | }); 26 | }); 27 | -------------------------------------------------------------------------------- /tests/integration/components/ui-popup/content-test.js: -------------------------------------------------------------------------------- 1 | import { module, test } from 'qunit'; 2 | import { setupRenderingTest } from 'dummy/tests/helpers'; 3 | import { render } from '@ember/test-helpers'; 4 | import { hbs } from 'ember-cli-htmlbars'; 5 | 6 | module('Integration | Component | ui-popup/content', function (hooks) { 7 | setupRenderingTest(hooks); 8 | 9 | test('it renders', async function (assert) { 10 | // Set any properties with this.set('myProperty', 'value'); 11 | // Handle any actions with this.set('myAction', function(val) { ... }); 12 | 13 | await render(hbs``); 14 | 15 | assert.dom(this.element).hasText(''); 16 | 17 | // Template block usage: 18 | await render(hbs` 19 | 20 | template block text 21 | 22 | `); 23 | 24 | assert.dom(this.element).hasText('template block text'); 25 | }); 26 | }); 27 | -------------------------------------------------------------------------------- /tests/integration/components/ui-progress-test.js: -------------------------------------------------------------------------------- 1 | import { module, test } from 'qunit'; 2 | import { setupRenderingTest } from 'dummy/tests/helpers'; 3 | import { render } from '@ember/test-helpers'; 4 | import { hbs } from 'ember-cli-htmlbars'; 5 | 6 | module('Integration | Component | ui-progress', function (hooks) { 7 | setupRenderingTest(hooks); 8 | 9 | test('it renders', async function (assert) { 10 | // Set any properties with this.set('myProperty', 'value'); 11 | // Handle any actions with this.set('myAction', function(val) { ... }); 12 | 13 | await render(hbs``); 14 | 15 | assert.dom(this.element.querySelector('div')).hasClass('ui'); 16 | assert.dom(this.element.querySelector('div')).hasClass('progress'); 17 | 18 | const bar = this.element.querySelector('div').querySelector('div'); 19 | 20 | const progress = bar.querySelector('div'); 21 | 22 | assert.dom(bar).hasClass('bar'); 23 | assert.dom(progress).hasClass('progress'); 24 | assert.dom(progress).hasText('10%'); 25 | }); 26 | }); 27 | -------------------------------------------------------------------------------- /tests/integration/components/ui-tab-menu-test.js: -------------------------------------------------------------------------------- 1 | import { module, test } from 'qunit'; 2 | import { setupRenderingTest } from 'dummy/tests/helpers'; 3 | import { render } from '@ember/test-helpers'; 4 | import { hbs } from 'ember-cli-htmlbars'; 5 | 6 | module('Integration | Component | ui-tab-menu', function (hooks) { 7 | setupRenderingTest(hooks); 8 | 9 | test('it renders', async function (assert) { 10 | // Set any properties with this.set('myProperty', 'value'); 11 | // Handle any actions with this.set('myAction', function(val) { ... }); 12 | 13 | await render(hbs``); 14 | 15 | assert.dom(this.element).hasText(''); 16 | 17 | // Template block usage: 18 | await render(hbs` 19 | 20 | template block text 21 | 22 | `); 23 | 24 | assert.dom(this.element).hasText('template block text'); 25 | }); 26 | }); 27 | -------------------------------------------------------------------------------- /tests/integration/components/ui-tab-segment-test.js: -------------------------------------------------------------------------------- 1 | import { module, test } from 'qunit'; 2 | import { setupRenderingTest } from 'dummy/tests/helpers'; 3 | import { render } from '@ember/test-helpers'; 4 | import { hbs } from 'ember-cli-htmlbars'; 5 | 6 | module('Integration | Component | ui-tab-segment', function (hooks) { 7 | setupRenderingTest(hooks); 8 | 9 | test('it renders', async function (assert) { 10 | // Set any properties with this.set('myProperty', 'value'); 11 | // Handle any actions with this.set('myAction', function(val) { ... }); 12 | 13 | await render(hbs``); 14 | 15 | assert.dom(this.element).hasText(''); 16 | 17 | // Template block usage: 18 | await render(hbs` 19 | 20 | template block text 21 | 22 | `); 23 | 24 | assert.dom(this.element).hasText('template block text'); 25 | }); 26 | }); 27 | -------------------------------------------------------------------------------- /tests/integration/components/ui-uploader-test.js: -------------------------------------------------------------------------------- 1 | import { module, test } from 'qunit'; 2 | import { setupRenderingTest } from 'dummy/tests/helpers'; 3 | import { render } from '@ember/test-helpers'; 4 | import { hbs } from 'ember-cli-htmlbars'; 5 | 6 | module('Integration | Component | ui-uploader', function (hooks) { 7 | setupRenderingTest(hooks); 8 | 9 | test('it renders', async function (assert) { 10 | // Set any properties with this.set('myProperty', 'value'); 11 | // Handle any actions with this.set('myAction', function(val) { ... }); 12 | 13 | await render(hbs``); 14 | 15 | assert.dom(this.element.querySelector('div')).hasClass('segment'); 16 | }); 17 | }); 18 | -------------------------------------------------------------------------------- /tests/test-helper.js: -------------------------------------------------------------------------------- 1 | import Application from 'dummy/app'; 2 | import config from 'dummy/config/environment'; 3 | import * as QUnit from 'qunit'; 4 | import { setApplication } from '@ember/test-helpers'; 5 | import { setup } from 'qunit-dom'; 6 | import { start } from 'ember-qunit'; 7 | 8 | setApplication(Application.create(config.APP)); 9 | 10 | setup(QUnit.assert); 11 | 12 | start(); 13 | -------------------------------------------------------------------------------- /tests/unit/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wecatch/ember-semantic-ui/ba1034d4b8ab03d1b68da12c43f1191e64da8a29/tests/unit/.gitkeep -------------------------------------------------------------------------------- /tests/unit/utils/ember-uploader-test.js: -------------------------------------------------------------------------------- 1 | import EmberUploader from 'dummy/utils/ember-uploader'; 2 | import { module, test } from 'qunit'; 3 | 4 | module('Unit | Utility | ember-uploader', function () { 5 | // TODO: Replace this with your real tests. 6 | test('it works', function (assert) { 7 | let result = new EmberUploader({ 8 | url: '', 9 | paramName: 'file', 10 | }); 11 | assert.ok(result); 12 | }); 13 | }); 14 | -------------------------------------------------------------------------------- /tests/unit/utils/file-object-test.js: -------------------------------------------------------------------------------- 1 | import fileObject from 'dummy/utils/file-object'; 2 | import { module, test } from 'qunit'; 3 | 4 | module('Unit | Utility | file-object', function () { 5 | // TODO: Replace this with your real tests. 6 | test('it works', async function (assert) { 7 | const base64Response = await fetch( 8 | 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAIAQMAAAD+wSzIAAAABlBMVEX///+/v7+jQ3Y5AAAADklEQVQI12P4AIX8EAgALgAD/aNpbtEAAAAASUVORK5CYII' 9 | ); 10 | const blob = await base64Response.blob(); 11 | const file = new File([blob], 'smile.png', { 12 | type: blob.type, 13 | }); 14 | 15 | let result = new fileObject.FileObject({ 16 | fileToUpload: file, 17 | }); 18 | assert.ok(result); 19 | }); 20 | }); 21 | -------------------------------------------------------------------------------- /yuidoc.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ember-semantic-ui", 3 | "description": "Ember ui components based on semantic-ui", 4 | "version": "1.0.9", 5 | "options": { 6 | "paths": [ 7 | "addon" 8 | ], 9 | "enabledEnvironments": ["development", "production"], 10 | "exclude": "vendor", 11 | "outdir": "docs", 12 | "linkNatives": true, 13 | "quiet": true, 14 | "parseOnly": false, 15 | "lint": false, 16 | "themedir" : "node_modules/yuidoc-ember-cli-theme", 17 | "helpers" : ["node_modules/yuidoc-ember-cli-theme/helpers.js"] 18 | } 19 | } 20 | --------------------------------------------------------------------------------