├── .gitignore
├── LICENSE
├── README.md
├── angular-autocomplete
├── README.md
├── bower.json
├── config.rb
├── demo
│ └── index.html
├── dist
│ ├── css
│ │ ├── angular-autocomplete.css
│ │ └── angular-autocomplete.min.css
│ └── js
│ │ ├── angular-autocomplete.js
│ │ └── angular-autocomplete.min.js
├── gulpfile.js
├── package.json
└── src
│ ├── css
│ └── angular-autocomplete.css
│ ├── js
│ └── angular-autocomplete.js
│ └── sass
│ └── angular-autocomplete.scss
├── angular-checkbox
├── README.md
├── bower.json
├── config.rb
├── demo
│ └── index.html
├── dist
│ ├── css
│ │ ├── angular-checkbox.css
│ │ └── angular-checkbox.min.css
│ └── js
│ │ ├── angular-checkbox.js
│ │ └── angular-checkbox.min.js
├── gulpfile.js
├── package.json
└── src
│ ├── css
│ └── angular-checkbox.css
│ ├── js
│ └── angular-checkbox.js
│ └── sass
│ └── angular-checkbox.scss
├── angular-circle-slider
├── LICENSE
├── README.md
├── bower.json
├── config.rb
├── demo
│ └── index.html
├── dist
│ ├── css
│ │ ├── angular-circle-slider.css
│ │ └── angular-circle-slider.min.css
│ └── js
│ │ ├── angular-circle-slider.js
│ │ └── angular-circle-slider.min.js
├── gulpfile.js
├── package.json
├── screenshot.png
└── src
│ ├── css
│ └── angular-circle-slider.css
│ ├── js
│ └── angular-circle-slider.js
│ └── sass
│ └── angular-circle-slider.scss
├── angular-colorpicker
├── LICENSE
├── README.md
├── bower.json
├── config.rb
├── demo
│ └── index.html
├── dist
│ ├── css
│ │ ├── angular-colorpicker.css
│ │ └── angular-colorpicker.min.css
│ └── js
│ │ ├── angular-colorpicker.js
│ │ └── angular-colorpicker.min.js
├── gulpfile.js
├── package.json
├── screenshot.png
└── src
│ ├── css
│ └── angular-colorpicker.css
│ ├── js
│ └── angular-colorpicker.js
│ └── sass
│ └── angular-colorpicker.scss
├── angular-confirm
├── README.md
├── bower.json
├── config.rb
├── demo
│ └── index.html
├── dist
│ ├── css
│ │ ├── angular-confirm.css
│ │ └── angular-confirm.min.css
│ └── js
│ │ ├── angular-confirm.js
│ │ └── angular-confirm.min.js
├── gulpfile.js
├── package.json
├── screenshot.png
└── src
│ ├── css
│ └── angular-confirm.css
│ ├── js
│ └── angular-confirm.js
│ └── sass
│ └── angular-confirm.scss
├── angular-datetime
├── README.md
├── bower.json
├── demo
│ └── index.html
├── dist
│ └── js
│ │ ├── angular-datetime.js
│ │ └── angular-datetime.min.js
├── gulpfile.js
├── package.json
└── src
│ └── js
│ └── angular-datetime.js
├── angular-datetimepicker
├── README.md
├── bower.json
├── config.rb
├── demo
│ └── index.html
├── dist
│ ├── css
│ │ ├── angular-datetimepicker.css
│ │ └── angular-datetimepicker.min.css
│ └── js
│ │ ├── angular-datetimepicker.js
│ │ └── angular-datetimepicker.min.js
├── gulpfile.js
├── libs
│ └── bootstrap-datetimepicker
│ │ ├── .gitattributes
│ │ ├── .gitignore
│ │ ├── .npmignore
│ │ ├── .travis.yml
│ │ ├── LICENSE
│ │ ├── README.md
│ │ ├── bower.json
│ │ ├── build
│ │ ├── build.less
│ │ └── build_standalone.less
│ │ ├── css
│ │ ├── bootstrap-datetimepicker.css
│ │ └── bootstrap-datetimepicker.min.css
│ │ ├── js
│ │ ├── bootstrap-datetimepicker.js
│ │ └── locales
│ │ │ ├── bootstrap-datetimepicker.ar.js
│ │ │ ├── bootstrap-datetimepicker.az.js
│ │ │ ├── bootstrap-datetimepicker.bg.js
│ │ │ ├── bootstrap-datetimepicker.bn.js
│ │ │ ├── bootstrap-datetimepicker.ca.js
│ │ │ ├── bootstrap-datetimepicker.cs.js
│ │ │ ├── bootstrap-datetimepicker.da.js
│ │ │ ├── bootstrap-datetimepicker.de.js
│ │ │ ├── bootstrap-datetimepicker.ee.js
│ │ │ ├── bootstrap-datetimepicker.el.js
│ │ │ ├── bootstrap-datetimepicker.es.js
│ │ │ ├── bootstrap-datetimepicker.fi.js
│ │ │ ├── bootstrap-datetimepicker.fr.js
│ │ │ ├── bootstrap-datetimepicker.he.js
│ │ │ ├── bootstrap-datetimepicker.hr.js
│ │ │ ├── bootstrap-datetimepicker.hu.js
│ │ │ ├── bootstrap-datetimepicker.hy.js
│ │ │ ├── bootstrap-datetimepicker.id.js
│ │ │ ├── bootstrap-datetimepicker.is.js
│ │ │ ├── bootstrap-datetimepicker.it.js
│ │ │ ├── bootstrap-datetimepicker.ja.js
│ │ │ ├── bootstrap-datetimepicker.ka.js
│ │ │ ├── bootstrap-datetimepicker.ko.js
│ │ │ ├── bootstrap-datetimepicker.lt.js
│ │ │ ├── bootstrap-datetimepicker.lv.js
│ │ │ ├── bootstrap-datetimepicker.ms.js
│ │ │ ├── bootstrap-datetimepicker.nb.js
│ │ │ ├── bootstrap-datetimepicker.nl.js
│ │ │ ├── bootstrap-datetimepicker.no.js
│ │ │ ├── bootstrap-datetimepicker.pl.js
│ │ │ ├── bootstrap-datetimepicker.pt-BR.js
│ │ │ ├── bootstrap-datetimepicker.pt.js
│ │ │ ├── bootstrap-datetimepicker.ro.js
│ │ │ ├── bootstrap-datetimepicker.rs-latin.js
│ │ │ ├── bootstrap-datetimepicker.rs.js
│ │ │ ├── bootstrap-datetimepicker.ru.js
│ │ │ ├── bootstrap-datetimepicker.sk.js
│ │ │ ├── bootstrap-datetimepicker.sl.js
│ │ │ ├── bootstrap-datetimepicker.sv.js
│ │ │ ├── bootstrap-datetimepicker.sw.js
│ │ │ ├── bootstrap-datetimepicker.th.js
│ │ │ ├── bootstrap-datetimepicker.tr.js
│ │ │ ├── bootstrap-datetimepicker.ua.js
│ │ │ ├── bootstrap-datetimepicker.uk.js
│ │ │ ├── bootstrap-datetimepicker.zh-CN.js
│ │ │ └── bootstrap-datetimepicker.zh-TW.js
│ │ ├── less
│ │ └── datetimepicker.less
│ │ ├── minify.sh
│ │ ├── package.json
│ │ ├── sample in bootstrap v2
│ │ ├── bootstrap
│ │ │ ├── css
│ │ │ │ ├── bootstrap.css
│ │ │ │ └── bootstrap.min.css
│ │ │ ├── img
│ │ │ │ ├── glyphicons-halflings-white.png
│ │ │ │ └── glyphicons-halflings.png
│ │ │ └── js
│ │ │ │ ├── bootstrap.js
│ │ │ │ └── bootstrap.min.js
│ │ ├── index.html
│ │ └── jquery
│ │ │ └── jquery-1.8.3.min.js
│ │ ├── sample in bootstrap v3
│ │ ├── bootstrap
│ │ │ ├── css
│ │ │ │ ├── bootstrap-theme.css
│ │ │ │ ├── bootstrap-theme.min.css
│ │ │ │ ├── bootstrap.css
│ │ │ │ └── bootstrap.min.css
│ │ │ ├── fonts
│ │ │ │ ├── glyphicons-halflings-regular.eot
│ │ │ │ ├── glyphicons-halflings-regular.svg
│ │ │ │ ├── glyphicons-halflings-regular.ttf
│ │ │ │ └── glyphicons-halflings-regular.woff
│ │ │ └── js
│ │ │ │ ├── bootstrap.js
│ │ │ │ └── bootstrap.min.js
│ │ ├── index.html
│ │ └── jquery
│ │ │ └── jquery-1.8.3.min.js
│ │ ├── screenshot
│ │ ├── standard_day.png
│ │ ├── standard_day_meridian.png
│ │ ├── standard_decade.png
│ │ ├── standard_full.png
│ │ ├── standard_hour.png
│ │ ├── standard_hour_meridian.png
│ │ ├── standard_month.png
│ │ └── standard_year.png
│ │ └── tests
│ │ ├── README.md
│ │ ├── _coverage.html
│ │ ├── assets
│ │ ├── coverage.js
│ │ ├── jquery-1.7.1.min.js
│ │ ├── mock.js
│ │ ├── qunit-logging.js
│ │ ├── qunit.css
│ │ ├── qunit.js
│ │ └── utils.js
│ │ ├── run-qunit.js
│ │ ├── suites
│ │ ├── component.js
│ │ ├── events.js
│ │ ├── formats.js
│ │ ├── inline.js
│ │ ├── keyboard_navigation
│ │ │ ├── 2011.js
│ │ │ ├── 2012.js
│ │ │ └── all.js
│ │ ├── mouse_navigation
│ │ │ ├── 2011.js
│ │ │ ├── 2012.js
│ │ │ └── all.js
│ │ └── options.js
│ │ ├── tests.html
│ │ └── tests.min.html
├── package.json
├── screenshot.png
├── screenshot2.png
└── src
│ ├── css
│ └── angular-datetimepicker.css
│ ├── js
│ └── angular-datetimepicker.js
│ └── sass
│ └── angular-datetimepicker.scss
├── angular-grid
├── README.md
├── bower.json
├── config.rb
├── demo
│ └── index.html
├── dist
│ ├── css
│ │ ├── angular-grid.css
│ │ └── angular-grid.min.css
│ └── js
│ │ ├── angular-grid.js
│ │ └── angular-grid.min.js
├── gulpfile.js
├── package.json
├── screenshot.png
└── src
│ ├── css
│ └── angular-grid.css
│ ├── js
│ ├── angular-grid.js
│ ├── directives
│ │ ├── tableBody.js
│ │ ├── tableCellCompile.js
│ │ ├── tableContent.js
│ │ ├── tableHeader.js
│ │ ├── tableRow.js
│ │ └── tableWrapper.js
│ ├── factorys
│ │ ├── tableFactory.js
│ │ └── tableHelper.js
│ └── filters
│ │ └── tableCellTrans.js
│ └── sass
│ └── angular-grid.scss
├── angular-itempicker
├── README.md
├── bower.json
├── config.rb
├── demo
│ └── index.html
├── dist
│ ├── css
│ │ ├── angular-itempicker.css
│ │ └── angular-itempicker.min.css
│ └── js
│ │ ├── angular-itempicker.js
│ │ └── angular-itempicker.min.js
├── gulpfile.js
├── libs
│ └── angular-checkbox
│ │ └── dist
│ │ ├── css
│ │ ├── angular-checkbox.css
│ │ └── angular-checkbox.min.css
│ │ └── js
│ │ ├── angular-checkbox.js
│ │ └── angular-checkbox.min.js
├── package.json
├── screenshot.png
└── src
│ ├── css
│ └── angular-itempicker.css
│ ├── js
│ ├── angular-itempicker.js
│ └── directives
│ │ ├── sourceList.js
│ │ ├── targetList.js
│ │ └── toolbar.js
│ └── sass
│ └── angular-itempicker.scss
├── angular-message
├── README.md
├── bower.json
├── config.rb
├── demo
│ └── index.html
├── dist
│ ├── css
│ │ ├── angular-message.css
│ │ └── angular-message.min.css
│ └── js
│ │ ├── angular-message.js
│ │ └── angular-message.min.js
├── gulpfile.js
├── package.json
└── src
│ ├── css
│ └── angular-message.css
│ ├── js
│ └── angular-message.js
│ └── sass
│ └── angular-message.scss
└── angular-permission
├── README.md
├── bower.json
├── demo
└── index.html
├── dist
└── js
│ ├── angular-permission.js
│ └── angular-permission.min.js
├── gulpfile.js
├── package.json
└── src
└── js
└── angular-permission.js
/.gitignore:
--------------------------------------------------------------------------------
1 | **/node_modules
2 | **/bower_components
3 | .idea/
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2016 linjinying
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # angular-components
2 |
3 | ### 简介
4 | 基于`angularJS 1.3+`开发的UI组件或工具类，目前可使用的组件：
5 |
6 | - [angular-autocomplete](https://github.com/linjinying/angular-components/tree/master/angular-autocomplete)(表单输入提示)
7 | - [angular-checkbox](https://github.com/linjinying/angular-components/tree/master/angular-checkbox)(checkbox表单)
8 | - [angular-colorpicker](https://github.com/linjinying/angular-components/tree/master/angular-colorpicker)(颜色选择器)
9 | - [angular-circle-slider](https://github.com/linjinying/angular-components/tree/master/angular-circle-slider)(圆环slider)
10 | - [angular-confirm](https://github.com/linjinying/angular-components/tree/master/angular-confirm)(确认提示框)
11 | - [angular-datetimepicker](https://github.com/linjinying/angular-components/tree/master/angular-datetimepicker)(时间日期选择器)
12 | - [angular-grid](https://github.com/linjinying/angular-components/tree/master/angular-grid)(表格)
13 | - [angular-itempicker](https://github.com/linjinying/angular-components/tree/master/angular-itempicker)(左右栏穿梭)
14 | - [angular-message](https://github.com/linjinying/angular-components/tree/master/angular-message)(消息提示)
15 | - [angular-datetime](https://github.com/linjinying/angular-components/tree/master/angular-datetime)(时间工具类)
16 | - [angular-permission](https://github.com/linjinying/angular-components/tree/master/angular-permission)(权限控制工具类)
17 |
18 | ### 给我提bug
19 | 以上组件已经应用到实际项目中，如果发现bug，欢迎 [在这里](https://github.com/linjinying/angular-components/issues) 给我提bug。
--------------------------------------------------------------------------------
/angular-autocomplete/README.md:
--------------------------------------------------------------------------------
1 | ## angular-autocomplete
2 |
3 | ### demo
4 | [click here](https://techjs.cn/demo/angular-components/angular-autocomplete/)
5 |
6 | ### 说明
7 |
8 | 一个基于jQuery-Autocomplete的angular wrapper组件。理论上，支持jQuery-Autocomplete的所有功能。
9 |
10 |
11 | ### 依赖
12 | - jquery
13 | - jQuery-Autocomplete
14 | - angular
15 |
16 |
17 | ### 使用
18 |
19 |
20 | **html代码**
21 | ```html
22 |
23 |
24 |
25 | ```
26 | **angular代码**
27 | ```javascript
28 | var app = angular.module("app", ["ui.autocomplete"]);
29 | app.controller("ctrl", ["$scope", function($scope) {
30 | var countries = [{
31 | value: 'autocomplete',
32 | data: '1'
33 | }, {
34 | value: 'jquery',
35 | data: '2'
36 | }, {
37 | value: 'angular',
38 | data: '3'
39 | }];
40 | $scope.options = {
41 | lookup: countries,
42 | dataType: "json",
43 | noCache: true,
44 | deferRequestBy: 300,
45 | onSelect:function(suggestion){
46 | console.log(suggestion);
47 | }
48 | };
49 | }]);
50 | ```
51 |
--------------------------------------------------------------------------------
/angular-autocomplete/bower.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "angular-components",
3 | "version": "1.0.0",
4 | "homepage": "https://github.com/linjinying/angular-components",
5 | "authors": [
6 | "linjinying "
7 | ],
8 | "description": "",
9 | "main": "",
10 | "moduleType": [],
11 | "license": "MIT",
12 | "ignore": [
13 | "**/.*",
14 | "node_modules",
15 | "bower_components",
16 | "test",
17 | "tests"
18 | ],
19 | "dependencies": {
20 | "angular": "1.3.0",
21 | "jquery": "1.8.3",
22 | "devbridge-autocomplete": "~1.2.26"
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/angular-autocomplete/config.rb:
--------------------------------------------------------------------------------
1 | require 'compass/import-once/activate'
2 | # Require any additional compass plugins here.
3 |
4 | # Set this to the root of your project when deployed:
5 | http_path = "/"
6 | css_dir = "css"
7 | sass_dir = "sass"
8 | images_dir = "images"
9 | javascripts_dir = "js"
10 |
11 | # You can select your preferred output style here (can be overridden via the command line):
12 | # output_style = :expanded or :nested or :compact or :compressed
13 | output_style = :compact
14 |
15 | # To enable relative paths to assets via compass helper functions. Uncomment:
16 | relative_assets = true
17 |
18 | # To disable debugging comments that display the original location of your selectors. Uncomment:
19 | # line_comments = false
20 |
21 |
22 | # If you prefer the indented syntax, you might want to regenerate this
23 | # project again passing --syntax sass, or you can uncomment this:
24 | # preferred_syntax = :sass
25 | # and then run:
26 | # sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass
27 |
--------------------------------------------------------------------------------
/angular-autocomplete/demo/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | angular-complete
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 | 关键字：jquery/angular/autocomplete
16 |
17 |
18 |
19 |
43 |
44 |
45 |
--------------------------------------------------------------------------------
/angular-autocomplete/dist/css/angular-autocomplete.css:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";
2 | /**定义组件的主题颜色*/
3 | .autocomplete-suggestions { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border: 1px solid #ccc; background: #fff; cursor: default; overflow: auto; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); -webkit-animation: ani-autocomplete-suggestions 0.2s; -moz-animation: ani-autocomplete-suggestions 0.2s; animation: ani-autocomplete-suggestions 0.2s; }
4 | .autocomplete-suggestions .autocomplete-suggestion { padding: 4px 5px; white-space: nowrap; overflow: hidden; }
5 | .autocomplete-suggestions .autocomplete-suggestion strong { font-weight: bold; color: #1ab394; }
6 | .autocomplete-suggestions .autocomplete-no-suggestion { padding: 2px 5px; }
7 | .autocomplete-suggestions .autocomplete-selected { background: #F0F0F0; }
8 | .autocomplete-suggestions .autocomplete-group { padding: 2px 5px; }
9 | .autocomplete-suggestions .autocomplete-group strong { font-weight: bold; font-size: 16px; color: #000; display: block; border-bottom: 1px solid #000; }
10 |
11 | @-webkit-keyframes ani-autocomplete-suggestions { 0% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); }
12 | 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } }
13 |
14 | @-moz-keyframes ani-autocomplete-suggestions { 0% { -moz-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); }
15 | 100% { -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } }
16 |
17 | @keyframes ani-autocomplete-suggestions { 0% { -webkit-transform: translate3d(0, -10px, 0); -moz-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); }
18 | 100% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } }
19 |
--------------------------------------------------------------------------------
/angular-autocomplete/dist/css/angular-autocomplete.min.css:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";.autocomplete-suggestions{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;border:1px solid #ccc;background:#fff;cursor:default;overflow:auto;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.25);-moz-box-shadow:0 1px 1px rgba(0,0,0,.25);box-shadow:0 1px 1px rgba(0,0,0,.25);-webkit-animation:ani-autocomplete-suggestions .2s;-moz-animation:ani-autocomplete-suggestions .2s;animation:ani-autocomplete-suggestions .2s}.autocomplete-suggestions .autocomplete-suggestion{padding:4px 5px;white-space:nowrap;overflow:hidden}.autocomplete-suggestions .autocomplete-group,.autocomplete-suggestions .autocomplete-no-suggestion{padding:2px 5px}.autocomplete-suggestions .autocomplete-suggestion strong{font-weight:700;color:#1ab394}.autocomplete-suggestions .autocomplete-selected{background:#F0F0F0}.autocomplete-suggestions .autocomplete-group strong{font-weight:700;font-size:16px;color:#000;display:block;border-bottom:1px solid #000}@-webkit-keyframes ani-autocomplete-suggestions{0%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@-moz-keyframes ani-autocomplete-suggestions{0%{-moz-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}100%{-moz-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes ani-autocomplete-suggestions{0%{-webkit-transform:translate3d(0,-10px,0);-moz-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}100%{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}
--------------------------------------------------------------------------------
/angular-autocomplete/dist/js/angular-autocomplete.js:
--------------------------------------------------------------------------------
1 | angular.module("ui.autocomplete",[]).directive('angularAutocomplete', [function() {
2 | return {
3 | restrict: 'EA',
4 | scope: {
5 | autocompleteOptions: "=angularAutocomplete"
6 | },
7 | require: '?ngModel',
8 | link: function(scope, element, attr, ngModel) {
9 | var scopeAutocompleteOptions = scope.autocompleteOptions;
10 | var autocompleteOptions = angular.extend({},scopeAutocompleteOptions);
11 | //set model value
12 | var options = angular.extend(autocompleteOptions, {
13 | onSelect: function(suggestion) {
14 | var value = suggestion.value;
15 | if (ngModel.$modelValue !== value) {
16 | scope.$apply(function() {
17 | ngModel.$setViewValue(value);
18 | });
19 | }
20 | if (angular.isFunction(scopeAutocompleteOptions.onSelect)) {
21 | scopeAutocompleteOptions.onSelect(suggestion);
22 | }
23 | }
24 | });
25 | $(element).autocomplete(options);
26 | }
27 | }
28 | }]);
29 |
--------------------------------------------------------------------------------
/angular-autocomplete/dist/js/angular-autocomplete.min.js:
--------------------------------------------------------------------------------
1 | angular.module("ui.autocomplete",[]).directive("angularAutocomplete",[function(){return{restrict:"EA",scope:{autocompleteOptions:"=angularAutocomplete"},require:"?ngModel",link:function(e,t,n,o){var u=e.autocompleteOptions,l=angular.extend({},u),a=angular.extend(l,{onSelect:function(t){var n=t.value;o.$modelValue!==n&&e.$apply(function(){o.$setViewValue(n)}),angular.isFunction(u.onSelect)&&u.onSelect(t)}});$(t).autocomplete(a)}}}]);
--------------------------------------------------------------------------------
/angular-autocomplete/gulpfile.js:
--------------------------------------------------------------------------------
1 | var gulp = require('gulp');
2 | var compass = require('gulp-compass');
3 | var uglifyjs = require('gulp-uglify');
4 | var minifycss = require('gulp-minify-css');
5 | var autoprefixer = require('gulp-autoprefixer');
6 | var rename = require('gulp-rename');
7 | var connect = require('gulp-connect');
8 | var sassFolder = ['./src/sass/**/*.scss'];
9 | var jsFolder = ['./src/js/*.js'];
10 | gulp.task('compass', function() {
11 | return gulp.src(sassFolder)
12 | .pipe(compass({
13 | config_file: './config.rb',
14 | css: './src/css',
15 | sass: './src/sass'
16 | }))
17 | .pipe(autoprefixer({
18 | browsers: ['Firefox >= 1', 'Chrome >= 1', 'ie >= 7'],
19 | cascade: true
20 | }))
21 | .pipe(gulp.dest('./src/css/'))
22 | .pipe(gulp.dest('./dist/css/'))
23 | .pipe(rename({suffix: '.min'}))
24 | .pipe(minifycss())
25 | .pipe(gulp.dest('./dist/css/'));
26 | });
27 | gulp.task('uglifyjs', function() {
28 | return gulp.src(jsFolder)
29 | .pipe(gulp.dest('./dist/js/'))
30 | .pipe(rename({suffix: '.min'}))
31 | .pipe(uglifyjs())
32 | .pipe(gulp.dest('./dist/js/'));
33 | });
34 |
35 | gulp.task('connect', function() {
36 | connect.server({
37 | root: '../',
38 | port: 9999,
39 | host: 'localhost'
40 | });
41 | });
42 |
43 | gulp.task('start', function() {
44 | gulp.watch(sassFolder, ['compass']);
45 | gulp.watch(jsFolder, ['uglifyjs']);
46 | gulp.start('uglifyjs');
47 | gulp.start('connect');
48 | });
49 | gulp.task('default', ['start']);
50 |
--------------------------------------------------------------------------------
/angular-autocomplete/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "angular-autocomplete",
3 | "version": "1.0.0",
4 | "description": "angular-autocomplete",
5 | "main": "index.js",
6 | "dependencies": {
7 | "gulp": "^3.9.0",
8 | "gulp-autoprefixer": "^3.1.1",
9 | "gulp-replace": "^0.5.4"
10 | },
11 | "devDependencies": {
12 | "gulp-compass": "^2.1.0",
13 | "gulp-connect": "^2.3.1",
14 | "gulp-concat": "^2.6.0",
15 | "gulp-minify-css": "^1.2.1",
16 | "gulp-uglify": "^1.4.2",
17 | "gulp-rename": "*"
18 | },
19 | "author": "jinying.lin",
20 | "license": "MIT"
21 | }
22 |
--------------------------------------------------------------------------------
/angular-autocomplete/src/css/angular-autocomplete.css:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";
2 | /**定义组件的主题颜色*/
3 | .autocomplete-suggestions { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border: 1px solid #ccc; background: #fff; cursor: default; overflow: auto; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); -webkit-animation: ani-autocomplete-suggestions 0.2s; -moz-animation: ani-autocomplete-suggestions 0.2s; animation: ani-autocomplete-suggestions 0.2s; }
4 | .autocomplete-suggestions .autocomplete-suggestion { padding: 4px 5px; white-space: nowrap; overflow: hidden; }
5 | .autocomplete-suggestions .autocomplete-suggestion strong { font-weight: bold; color: #1ab394; }
6 | .autocomplete-suggestions .autocomplete-no-suggestion { padding: 2px 5px; }
7 | .autocomplete-suggestions .autocomplete-selected { background: #F0F0F0; }
8 | .autocomplete-suggestions .autocomplete-group { padding: 2px 5px; }
9 | .autocomplete-suggestions .autocomplete-group strong { font-weight: bold; font-size: 16px; color: #000; display: block; border-bottom: 1px solid #000; }
10 |
11 | @-webkit-keyframes ani-autocomplete-suggestions { 0% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); }
12 | 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } }
13 |
14 | @-moz-keyframes ani-autocomplete-suggestions { 0% { -moz-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); }
15 | 100% { -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } }
16 |
17 | @keyframes ani-autocomplete-suggestions { 0% { -webkit-transform: translate3d(0, -10px, 0); -moz-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); }
18 | 100% { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } }
19 |
--------------------------------------------------------------------------------
/angular-autocomplete/src/js/angular-autocomplete.js:
--------------------------------------------------------------------------------
1 | angular.module("ui.autocomplete",[]).directive('angularAutocomplete', [function() {
2 | return {
3 | restrict: 'EA',
4 | scope: {
5 | autocompleteOptions: "=angularAutocomplete"
6 | },
7 | require: '?ngModel',
8 | link: function(scope, element, attr, ngModel) {
9 | var scopeAutocompleteOptions = scope.autocompleteOptions;
10 | var autocompleteOptions = angular.extend({},scopeAutocompleteOptions);
11 | //set model value
12 | var options = angular.extend(autocompleteOptions, {
13 | onSelect: function(suggestion) {
14 | var value = suggestion.value;
15 | if (ngModel.$modelValue !== value) {
16 | scope.$apply(function() {
17 | ngModel.$setViewValue(value);
18 | });
19 | }
20 | if (angular.isFunction(scopeAutocompleteOptions.onSelect)) {
21 | scopeAutocompleteOptions.onSelect(suggestion);
22 | }
23 | }
24 | });
25 | $(element).autocomplete(options);
26 | }
27 | }
28 | }]);
29 |
--------------------------------------------------------------------------------
/angular-autocomplete/src/sass/angular-autocomplete.scss:
--------------------------------------------------------------------------------
1 | @charset "utf-8";
2 | /**定义组件的主题颜色*/
3 | $theme-color:#1ab394;
4 | .autocomplete-suggestions {
5 | box-sizing: border-box;
6 | border: 1px solid #ccc;
7 | background: #fff;
8 | cursor: default;
9 | overflow: auto;
10 | box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
11 | animation: ani-autocomplete-suggestions 0.2s;
12 | .autocomplete-suggestion {
13 | padding: 4px 5px;
14 | white-space: nowrap;
15 | overflow: hidden;
16 | strong {
17 | font-weight: bold;
18 | color: $theme-color;
19 | }
20 | }
21 | .autocomplete-no-suggestion {
22 | padding: 2px 5px;
23 | }
24 | .autocomplete-selected {
25 | background: #F0F0F0;
26 | }
27 | .autocomplete-group {
28 | padding: 2px 5px;
29 | strong {
30 | font-weight: bold;
31 | font-size: 16px;
32 | color: #000;
33 | display: block;
34 | border-bottom: 1px solid #000;
35 | }
36 | }
37 | }
38 |
39 | @keyframes ani-autocomplete-suggestions {
40 | 0% {
41 | transform: translate3d(0, -10px, 0);
42 | }
43 | 100% {
44 | transform: translate3d(0, 0, 0);
45 | }
46 | }
47 |
--------------------------------------------------------------------------------
/angular-checkbox/README.md:
--------------------------------------------------------------------------------
1 | ## angular-checkbox
2 |
3 | ### demo
4 | [click here](https://techjs.cn/demo/angular-components/angular-checkbox/)
5 |
6 | ### 说明
7 | 一个基于angular的checkbox组件，目前支持的功能：
8 |
9 | - **value** 文本显示
10 | - **onCheck** 勾选回调函数
11 |
12 | ### 依赖
13 | - angular
14 |
15 | ### 使用
16 | **html代码**
17 | ```html
18 |
19 |
20 | {{checked}}
21 |
22 | ```
23 | **angular代码**
24 | ```javascript
25 | var app = angular.module("app", ["ui.checkbox"]);
26 | app.controller("ctrl", ['$scope', function($scope) {
27 | $scope.checked = "YES";
28 | $scope.options = {
29 | onCheck:function(){
30 | }
31 | }
32 | }]);
33 | ```
--------------------------------------------------------------------------------
/angular-checkbox/bower.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "angular-components",
3 | "version": "1.0.0",
4 | "homepage": "https://github.com/linjinying/angular-components",
5 | "authors": [
6 | "linjinying "
7 | ],
8 | "description": "",
9 | "main": "",
10 | "moduleType": [],
11 | "license": "MIT",
12 | "ignore": [
13 | "**/.*",
14 | "node_modules",
15 | "bower_components",
16 | "test",
17 | "tests"
18 | ],
19 | "dependencies": {
20 | "angular": "1.3.0"
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/angular-checkbox/config.rb:
--------------------------------------------------------------------------------
1 | require 'compass/import-once/activate'
2 | # Require any additional compass plugins here.
3 |
4 | # Set this to the root of your project when deployed:
5 | http_path = "/"
6 | css_dir = "css"
7 | sass_dir = "sass"
8 | images_dir = "images"
9 | javascripts_dir = "js"
10 |
11 | # You can select your preferred output style here (can be overridden via the command line):
12 | # output_style = :expanded or :nested or :compact or :compressed
13 | output_style = :compact
14 |
15 | # To enable relative paths to assets via compass helper functions. Uncomment:
16 | relative_assets = true
17 |
18 | # To disable debugging comments that display the original location of your selectors. Uncomment:
19 | # line_comments = false
20 |
21 |
22 | # If you prefer the indented syntax, you might want to regenerate this
23 | # project again passing --syntax sass, or you can uncomment this:
24 | # preferred_syntax = :sass
25 | # and then run:
26 | # sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass
27 |
--------------------------------------------------------------------------------
/angular-checkbox/demo/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | demo
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 | {{checked}}
15 |
16 |
27 |
28 |
29 |
--------------------------------------------------------------------------------
/angular-checkbox/dist/css/angular-checkbox.css:
--------------------------------------------------------------------------------
1 | .angular-checkbox { position: absolute; display: none; }
2 |
3 | .angular-checkbox[disabled] { cursor: not-allowed; }
4 |
5 | .angular-checkbox + label { position: relative; display: inline-block; cursor: pointer; margin-bottom: 0; font-weight: normal; }
6 | .angular-checkbox + label:before { display: inline-block; vertical-align: middle; width: 16px; height: 16px; content: ''; border: 1px solid #1ab394; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
7 | .angular-checkbox + label:after { position: absolute; top: 0; left: 0; display: none; content: ''; }
8 | .angular-checkbox + label .text { display: inline-block; vertical-align: middle; margin-left: 6px; }
9 |
10 | .angular-checkbox[disabled] + label { cursor: not-allowed; color: #e4e4e4; }
11 | .angular-checkbox[disabled] + label:hover, .angular-checkbox[disabled] + label:before, .angular-checkbox[disabled] + label:after { cursor: not-allowed; }
12 | .angular-checkbox[disabled] + label:hover:before { border: 1px solid #e4e4e4; -webkit-animation-name: none; -moz-animation-name: none; animation-name: none; }
13 | .angular-checkbox[disabled] + label:before { border-color: #e4e4e4; }
14 |
15 | .angular-checkbox:checked + label:before { -webkit-animation-name: none; -moz-animation-name: none; animation-name: none; }
16 | .angular-checkbox:checked + label:after { display: block; }
17 |
18 | .angular-checkbox + label:before { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
19 | .angular-checkbox + label:after { top: 4px; left: 5px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 6px; height: 10px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); border: 2px solid #fff; border-top: 0; border-left: 0; }
20 |
21 | .angular-checkbox:checked + label:before { border: #1ab394; background: #1ab394; }
22 |
23 | .angular-checkbox:checked[disabled] + label:before { border: #e4e4e4; background: #e4e4e4; }
24 |
--------------------------------------------------------------------------------
/angular-checkbox/dist/css/angular-checkbox.min.css:
--------------------------------------------------------------------------------
1 | .angular-checkbox{position:absolute;display:none}.angular-checkbox[disabled]{cursor:not-allowed}.angular-checkbox+label{position:relative;display:inline-block;cursor:pointer;margin-bottom:0;font-weight:400}.angular-checkbox+label:before{display:inline-block;vertical-align:middle;width:16px;height:16px;content:'';border:1px solid #1ab394;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.angular-checkbox+label:after{position:absolute;display:none;content:''}.angular-checkbox+label .text{display:inline-block;vertical-align:middle;margin-left:6px}.angular-checkbox[disabled]+label{cursor:not-allowed;color:#e4e4e4}.angular-checkbox[disabled]+label:after,.angular-checkbox[disabled]+label:before,.angular-checkbox[disabled]+label:hover{cursor:not-allowed}.angular-checkbox[disabled]+label:hover:before{border:1px solid #e4e4e4;-webkit-animation-name:none;-moz-animation-name:none;animation-name:none}.angular-checkbox[disabled]+label:before{border-color:#e4e4e4}.angular-checkbox:checked+label:after{display:block}.angular-checkbox+label:before{-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}.angular-checkbox+label:after{top:4px;left:5px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;width:6px;height:10px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);border:2px solid #fff;border-top:0;border-left:0}.angular-checkbox:checked+label:before{-webkit-animation-name:none;-moz-animation-name:none;animation-name:none;border:#1ab394;background:#1ab394}.angular-checkbox:checked[disabled]+label:before{border:#e4e4e4;background:#e4e4e4}
--------------------------------------------------------------------------------
/angular-checkbox/dist/js/angular-checkbox.js:
--------------------------------------------------------------------------------
1 | angular.module('ui.checkbox', [])
2 | .directive('angularCheckbox', [function() {
3 | return {
4 | restrict: 'A',
5 | require: '?ngModel',
6 | replace: true,
7 | scope: {
8 | options: "=angularCheckbox",
9 | text: "=value"
10 | },
11 | link: function(scope, element, attr, ngModel) {
12 | /*
13 | *生成checkbox ID
14 | */
15 | var options = scope.options;
16 | var checkboxId = "angular-checkbox-" + (((1 + Math.random()) * new Date().getTime()) | 0).toString(16).substring(1);
17 | var checkboxElement =
18 | '';
22 | element.addClass('angular-checkbox').attr('id', checkboxId).after(checkboxElement);
23 | element.bind('click', function() {
24 | options.onCheck(scope);
25 | scope.$applyAsync();
26 | });
27 | var valueWatcher = scope.$watch('text', function(currentValue, lastValue) {
28 | if (currentValue !== lastValue) {
29 | element.next().find('span').html(currentValue);
30 | }
31 | });
32 | scope.$on('$destroy', function() {
33 | valueWatcher();
34 | });
35 | }
36 | };
37 | }]);
38 |
--------------------------------------------------------------------------------
/angular-checkbox/dist/js/angular-checkbox.min.js:
--------------------------------------------------------------------------------
1 | angular.module("ui.checkbox",[]).directive("angularCheckbox",[function(){return{restrict:"A",require:"?ngModel",replace:!0,scope:{options:"=angularCheckbox",text:"=value"},link:function(n,e,t,a){var c=n.options,o="angular-checkbox-"+((1+Math.random())*(new Date).getTime()|0).toString(16).substring(1),r='";e.addClass("angular-checkbox").attr("id",o).after(r),e.bind("click",function(){c.onCheck(n),n.$applyAsync()});var i=n.$watch("text",function(n,t){n!==t&&e.next().find("span").html(n)});n.$on("$destroy",function(){i()})}}}]);
--------------------------------------------------------------------------------
/angular-checkbox/gulpfile.js:
--------------------------------------------------------------------------------
1 | var gulp = require('gulp');
2 | var compass = require('gulp-compass');
3 | var uglifyjs = require('gulp-uglify');
4 | var minifycss = require('gulp-minify-css');
5 | var autoprefixer = require('gulp-autoprefixer');
6 | var rename = require('gulp-rename');
7 | var connect = require('gulp-connect');
8 | var sassFolder = ['./src/sass/**/*.scss'];
9 | var jsFolder = ['./src/js/*.js'];
10 | gulp.task('compass', function() {
11 | return gulp.src(sassFolder)
12 | .pipe(compass({
13 | config_file: './config.rb',
14 | css: './src/css',
15 | sass: './src/sass'
16 | }))
17 | .pipe(autoprefixer({
18 | browsers: ['Firefox >= 1', 'Chrome >= 1', 'ie >= 7'],
19 | cascade: true
20 | }))
21 | .pipe(gulp.dest('./src/css/'))
22 | .pipe(gulp.dest('./dist/css/'))
23 | .pipe(rename({suffix: '.min'}))
24 | .pipe(minifycss())
25 | .pipe(gulp.dest('./dist/css/'));
26 | });
27 | gulp.task('uglifyjs', function() {
28 | return gulp.src(jsFolder)
29 | .pipe(gulp.dest('./dist/js/'))
30 | .pipe(rename({suffix: '.min'}))
31 | .pipe(uglifyjs())
32 | .pipe(gulp.dest('./dist/js/'));
33 | });
34 |
35 | gulp.task('connect', function() {
36 | connect.server({
37 | root: '../',
38 | port: 9998,
39 | host: 'localhost'
40 | });
41 | });
42 |
43 | gulp.task('start', function() {
44 | gulp.watch(sassFolder, ['compass']);
45 | gulp.watch(jsFolder, ['uglifyjs']);
46 | gulp.start('uglifyjs');
47 | gulp.start('connect');
48 | });
49 | gulp.task('default', ['start']);
50 |
--------------------------------------------------------------------------------
/angular-checkbox/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "angular-checkbox",
3 | "version": "1.0.0",
4 | "description": "angular-checkbox",
5 | "main": "index.js",
6 | "dependencies": {
7 | "gulp": "^3.9.0",
8 | "gulp-autoprefixer": "^3.1.0",
9 | "gulp-replace": "^0.5.4"
10 | },
11 | "devDependencies": {
12 | "gulp-compass": "^2.1.0",
13 | "gulp-connect": "^2.3.1",
14 | "gulp-concat": "^2.6.0",
15 | "gulp-minify-css": "^1.2.1",
16 | "gulp-uglify": "^1.4.2",
17 | "gulp-rename": "*"
18 | },
19 | "author": "jinying.lin",
20 | "license": "MIT"
21 | }
22 |
--------------------------------------------------------------------------------
/angular-checkbox/src/css/angular-checkbox.css:
--------------------------------------------------------------------------------
1 | .angular-checkbox { position: absolute; display: none; }
2 |
3 | .angular-checkbox[disabled] { cursor: not-allowed; }
4 |
5 | .angular-checkbox + label { position: relative; display: inline-block; cursor: pointer; margin-bottom: 0; font-weight: normal; }
6 | .angular-checkbox + label:before { display: inline-block; vertical-align: middle; width: 16px; height: 16px; content: ''; border: 1px solid #1ab394; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
7 | .angular-checkbox + label:after { position: absolute; top: 0; left: 0; display: none; content: ''; }
8 | .angular-checkbox + label .text { display: inline-block; vertical-align: middle; margin-left: 6px; }
9 |
10 | .angular-checkbox[disabled] + label { cursor: not-allowed; color: #e4e4e4; }
11 | .angular-checkbox[disabled] + label:hover, .angular-checkbox[disabled] + label:before, .angular-checkbox[disabled] + label:after { cursor: not-allowed; }
12 | .angular-checkbox[disabled] + label:hover:before { border: 1px solid #e4e4e4; -webkit-animation-name: none; -moz-animation-name: none; animation-name: none; }
13 | .angular-checkbox[disabled] + label:before { border-color: #e4e4e4; }
14 |
15 | .angular-checkbox:checked + label:before { -webkit-animation-name: none; -moz-animation-name: none; animation-name: none; }
16 | .angular-checkbox:checked + label:after { display: block; }
17 |
18 | .angular-checkbox + label:before { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
19 | .angular-checkbox + label:after { top: 4px; left: 5px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 6px; height: 10px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); border: 2px solid #fff; border-top: 0; border-left: 0; }
20 |
21 | .angular-checkbox:checked + label:before { border: #1ab394; background: #1ab394; }
22 |
23 | .angular-checkbox:checked[disabled] + label:before { border: #e4e4e4; background: #e4e4e4; }
24 |
--------------------------------------------------------------------------------
/angular-checkbox/src/js/angular-checkbox.js:
--------------------------------------------------------------------------------
1 | angular.module('ui.checkbox', [])
2 | .directive('angularCheckbox', [function() {
3 | return {
4 | restrict: 'A',
5 | require: '?ngModel',
6 | replace: true,
7 | scope: {
8 | options: "=angularCheckbox",
9 | text: "=value"
10 | },
11 | link: function(scope, element, attr, ngModel) {
12 | /*
13 | *生成checkbox ID
14 | */
15 | var options = scope.options;
16 | var checkboxId = "angular-checkbox-" + (((1 + Math.random()) * new Date().getTime()) | 0).toString(16).substring(1);
17 | var checkboxElement =
18 | '';
22 | element.addClass('angular-checkbox').attr('id', checkboxId).after(checkboxElement);
23 | element.bind('click', function() {
24 | options.onCheck(scope);
25 | scope.$applyAsync();
26 | });
27 | var valueWatcher = scope.$watch('text', function(currentValue, lastValue) {
28 | if (currentValue !== lastValue) {
29 | element.next().find('span').html(currentValue);
30 | }
31 | });
32 | scope.$on('$destroy', function() {
33 | valueWatcher();
34 | });
35 | }
36 | };
37 | }]);
38 |
--------------------------------------------------------------------------------
/angular-checkbox/src/sass/angular-checkbox.scss:
--------------------------------------------------------------------------------
1 | @charset "utf-8";
2 | $angular-checkbox-size: 16px !default;
3 | $magic-dot-size: 8px !default;
4 | $magic-border-color: #1ab394 !default;
5 | $magic-main-color: #1ab394 !default;
6 | $magic-disabled-color: #e4e4e4 !default;
7 | .angular-checkbox {
8 | position: absolute;
9 | display: none;
10 | }
11 |
12 | .angular-checkbox[disabled] {
13 | cursor: not-allowed;
14 | }
15 |
16 | .angular-checkbox + label {
17 | position: relative;
18 | display: inline-block;
19 | cursor: pointer;
20 | margin-bottom: 0;
21 | font-weight: normal;
22 | &:before {
23 | display: inline-block;
24 | vertical-align: middle;
25 | width: $angular-checkbox-size;
26 | height: $angular-checkbox-size;
27 | content: '';
28 | border: 1px solid $magic-border-color;
29 | box-sizing: border-box;
30 | }
31 | &:after {
32 | position: absolute;
33 | top: 0;
34 | left: 0;
35 | display: none;
36 | content: '';
37 | }
38 | .text {
39 | display: inline-block;
40 | vertical-align: middle;
41 | margin-left: 6px;
42 | }
43 | }
44 |
45 | .angular-checkbox[disabled] + label {
46 | cursor: not-allowed;
47 | color: $magic-disabled-color;
48 | &:hover,
49 | &:before,
50 | &:after {
51 | cursor: not-allowed;
52 | }
53 | &:hover {
54 | &:before {
55 | border: 1px solid $magic-disabled-color;
56 | animation-name: none;
57 | }
58 | }
59 | &:before {
60 | border-color: $magic-disabled-color;
61 | }
62 | }
63 |
64 | .angular-checkbox:checked + label {
65 | &:before {
66 | animation-name: none;
67 | }
68 | &:after {
69 | display: block;
70 | }
71 | }
72 |
73 | .angular-checkbox + label {
74 | &:before {
75 | border-radius: 3px;
76 | }
77 | &:after {
78 | top: 4px;
79 | left: 5px;
80 | box-sizing: border-box;
81 | width: 6px;
82 | height: 10px;
83 | transform: rotate(45deg);
84 | border: 2px solid #fff;
85 | border-top: 0;
86 | border-left: 0;
87 | }
88 | }
89 |
90 | .angular-checkbox:checked + label {
91 | &:before {
92 | border: $magic-main-color;
93 | background: $magic-main-color;
94 | }
95 | }
96 |
97 | .angular-checkbox:checked[disabled] + label {
98 | &:before {
99 | border: $magic-disabled-color;
100 | background: $magic-disabled-color;
101 | }
102 | }
103 |
--------------------------------------------------------------------------------
/angular-circle-slider/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2015 linjinying (junejinying@gmail.com)
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.
--------------------------------------------------------------------------------
/angular-circle-slider/README.md:
--------------------------------------------------------------------------------
1 | ## angular-circle-slider
2 | 
3 |
4 | ### demo
5 | [click here](https://techjs.cn/demo/angular-components/angular-circle-slider/)
6 |
7 | ### 说明
8 | 一个基于angularJS的圆形slider(a circular slider based on angularJS)，目前支持的API有：
9 | - **value** 初始化的数据
10 | - **readonly** 只读
11 | - **onStart** `function(value){}`开始滚动事件
12 | - **onFinish** `function(value){}`结束滚动事件
13 | - **onChange** `function(value){}`滑动Change事件
14 |
15 | #### Requirements
16 | - **jquery**
17 | - **angular**
18 |
19 | #### Basic Usage
20 |
21 | **html代码**
22 | ```html
23 |
24 | ```
25 | **angular代码**
26 | ```javascript
27 | var app = angular.module('app', ['ui.circleSlider']);
28 | app.controller('ctrl', ['$scope', function($scope) {
29 | $scope.options = {
30 | value:60,
31 | onStart:function(value){
32 | console.info('startValue:' + value);
33 | },
34 | onChange:function(value){
35 | console.info('currentValue:' + value);
36 | },
37 | onFinish:function(value){
38 | console.info('endValue:' + value);
39 | }
40 | }
41 | }]);
42 | ```
43 | #### Support
44 | `ie9+` `chrome` `firefox` `safari`
45 |
46 | ####License
47 | --------
48 | This plugin is licensed under the MIT license.
49 |
50 | Copyright (c) 2016 linjinying
--------------------------------------------------------------------------------
/angular-circle-slider/bower.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "angular-components",
3 | "version": "1.0.0",
4 | "homepage": "https://github.com/linjinying/angular-components",
5 | "authors": [
6 | "linjinying "
7 | ],
8 | "description": "",
9 | "main": "",
10 | "moduleType": [],
11 | "license": "MIT",
12 | "ignore": [
13 | "**/.*",
14 | "node_modules",
15 | "bower_components",
16 | "test",
17 | "tests"
18 | ],
19 | "dependencies": {
20 | "angular": "1.3.0",
21 | "jquery": "1.9.1"
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/angular-circle-slider/config.rb:
--------------------------------------------------------------------------------
1 | require 'compass/import-once/activate'
2 | # Require any additional compass plugins here.
3 |
4 | # Set this to the root of your project when deployed:
5 | http_path = "/"
6 | css_dir = "css"
7 | sass_dir = "sass"
8 | images_dir = "images"
9 | javascripts_dir = "js"
10 |
11 | # You can select your preferred output style here (can be overridden via the command line):
12 | # output_style = :expanded or :nested or :compact or :compressed
13 | output_style = :compact
14 |
15 | # To enable relative paths to assets via compass helper functions. Uncomment:
16 | relative_assets = true
17 |
18 | # To disable debugging comments that display the original location of your selectors. Uncomment:
19 | # line_comments = false
20 |
21 |
22 | # If you prefer the indented syntax, you might want to regenerate this
23 | # project again passing --syntax sass, or you can uncomment this:
24 | # preferred_syntax = :sass
25 | # and then run:
26 | # sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass
27 |
--------------------------------------------------------------------------------
/angular-circle-slider/demo/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | circleSlider
7 |
8 |
9 |
10 |
11 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
69 |
70 |
71 |
--------------------------------------------------------------------------------
/angular-circle-slider/dist/css/angular-circle-slider.css:
--------------------------------------------------------------------------------
1 | .circle { position: relative; width: 100px; height: 100px; border: 5px solid #ccc; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; text-align: center; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; outline: 0; }
2 | .circle .handler { position: absolute; height: 10px; width: 10px; background-color: #dedede; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; cursor: default; }
3 | .circle .text-wrap { position: absolute; top: 0; left: 0; display: table; width: 90px; height: 90px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; color: #000; }
4 | .circle .text-wrap .text { display: table-cell; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; text-align: center; vertical-align: middle; word-break: break-all; font-size: 16px; font-family: 'arial'; cursor: default; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
5 |
--------------------------------------------------------------------------------
/angular-circle-slider/dist/css/angular-circle-slider.min.css:
--------------------------------------------------------------------------------
1 | .circle{position:relative;width:100px;height:100px;border:5px solid #ccc;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;text-align:center;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;outline:0}.circle .handler,.circle .text-wrap{position:absolute;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.circle .handler{height:10px;width:10px;background-color:#dedede;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;box-sizing:border-box;cursor:default}.circle .text-wrap{top:0;left:0;display:table;width:90px;height:90px;box-sizing:border-box;color:#000}.circle .text-wrap .text{display:table-cell;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;text-align:center;vertical-align:middle;word-break:break-all;font-size:16px;font-family:arial;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
--------------------------------------------------------------------------------
/angular-circle-slider/dist/js/angular-circle-slider.min.js:
--------------------------------------------------------------------------------
1 | angular.module("ui.circleSlider",[]).directive("circleSlider",["$document","$timeout",function(n,e){return{restrict:"EA",replace:!0,scope:{options:"=circleSlider"},template:'',link:function(a,t,i){function o(n){var e=Math.round(x*Math.sin(n*g)),a=Math.round(x*-Math.cos(n*g)),t=n*m/360|0;b.css({left:e+x-$,top:a+x-$}),w.html(t+"°")}function u(n){var a=y.offset(),t={x:n.pageX-a.left,y:n.pageY-a.top},i=Math.atan2(t.x-x,t.y-x),u=parseInt(-i/g+180);return o(u),h=e(function(){d.value=u||d.value,e.cancel(h)},30),u||d.value}function c(){f&&d.onFinish(d.value),n.unbind("mousemove",u),n.unbind("mouseup",c)}function l(n){switch(v&&d.onStart(d.value),n.keyCode){case 40:case 39:a.$applyAsync(function(){d.value=d.value++= 1', 'Chrome >= 1', 'ie >= 7'],
19 | cascade: true
20 | }))
21 | .pipe(gulp.dest('./src/css/'))
22 | .pipe(gulp.dest('./dist/css/'))
23 | .pipe(rename({suffix: '.min'}))
24 | .pipe(minifycss())
25 | .pipe(gulp.dest('./dist/css/'));
26 | });
27 | gulp.task('uglifyjs', function() {
28 | return gulp.src(jsFolder)
29 | .pipe(gulp.dest('./dist/js/'))
30 | .pipe(rename({suffix: '.min'}))
31 | .pipe(uglifyjs())
32 | .pipe(gulp.dest('./dist/js/'));
33 | });
34 |
35 | gulp.task('connect', function() {
36 | connect.server({
37 | root: '../',
38 | port: 9999,
39 | host: 'localhost'
40 | });
41 | });
42 |
43 | gulp.task('start', function() {
44 | gulp.watch(sassFolder, ['compass']);
45 | gulp.watch(jsFolder, ['uglifyjs']);
46 | gulp.start('uglifyjs');
47 | gulp.start('connect');
48 | });
49 | gulp.task('default', ['start']);
50 |
--------------------------------------------------------------------------------
/angular-circle-slider/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "angular-datetimepicker",
3 | "version": "1.0.0",
4 | "description": "angular-datetimepicker",
5 | "main": "index.js",
6 | "dependencies": {
7 | "gulp": "^3.9.0",
8 | "gulp-autoprefixer": "^3.1.0",
9 | "gulp-replace": "^0.5.4"
10 | },
11 | "devDependencies": {
12 | "gulp-compass": "^2.1.0",
13 | "gulp-connect": "^2.3.1",
14 | "gulp-concat": "^2.6.0",
15 | "gulp-minify-css": "^1.2.1",
16 | "gulp-uglify": "^1.4.2",
17 | "gulp-rename": "*"
18 | },
19 | "author": "jinying.lin",
20 | "license": "MIT"
21 | }
22 |
--------------------------------------------------------------------------------
/angular-circle-slider/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/narol1024/angular-components/99de04f9343903e8037d7cee08a24625c1d3f22c/angular-circle-slider/screenshot.png
--------------------------------------------------------------------------------
/angular-circle-slider/src/css/angular-circle-slider.css:
--------------------------------------------------------------------------------
1 | .circle { position: relative; width: 100px; height: 100px; border: 5px solid #ccc; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; text-align: center; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; outline: 0; }
2 | .circle .handler { position: absolute; height: 10px; width: 10px; background-color: #dedede; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; cursor: default; }
3 | .circle .text-wrap { position: absolute; top: 0; left: 0; display: table; width: 90px; height: 90px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; color: #000; }
4 | .circle .text-wrap .text { display: table-cell; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; text-align: center; vertical-align: middle; word-break: break-all; font-size: 16px; font-family: 'arial'; cursor: default; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
5 |
--------------------------------------------------------------------------------
/angular-circle-slider/src/sass/angular-circle-slider.scss:
--------------------------------------------------------------------------------
1 | $circleSize:100px;
2 | $circleBorder:5px solid #ccc;
3 | $handlerSize:10px;
4 | $handlerColor:#dedede;
5 | $textColor:#000;
6 | $textSize:16px;
7 | .circle {
8 | position: relative;
9 | width: $circleSize;
10 | height: $circleSize;
11 | border: $circleBorder;
12 | border-radius: 50%;
13 | text-align: center;
14 | box-sizing: border-box;
15 | outline: 0;
16 | .handler {
17 | position: absolute;
18 | height: $handlerSize;
19 | width: $handlerSize;
20 | background-color: $handlerColor;
21 | border-radius: 50%;
22 | box-sizing: border-box;
23 | cursor: default;
24 | }
25 | .text-wrap {
26 | position: absolute;
27 | top: 0;
28 | left: 0;
29 | display: table;
30 | width: $circleSize - $handlerSize;
31 | height: $circleSize - $handlerSize;
32 | box-sizing: border-box;
33 | color: $textColor;
34 | .text {
35 | display: table-cell;
36 | box-sizing: border-box;
37 | text-align: center;
38 | vertical-align: middle;
39 | word-break: break-all;
40 | font-size: $textSize;
41 | font-family: 'arial';
42 | cursor: default;
43 | user-select: none;
44 | }
45 | }
46 | }
47 |
--------------------------------------------------------------------------------
/angular-colorpicker/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2016 linjinying (junejinying@gmail.com)
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.
--------------------------------------------------------------------------------
/angular-colorpicker/README.md:
--------------------------------------------------------------------------------
1 | ## angular-colorpicker
2 | 
3 | #### Demo
4 | [click here](https://techjs.cn/demo/angular-components/angular-colorpicker/)
5 |
6 | 一个基于angularJS的颜色选择器，目前具备以下特性：
7 | - **3种选色模式** 经典模式、自定义选择模式、历史记录
8 | - **支持的颜色格式** 目前仅支持rgb,rgba,hex，默认是hex格式
9 | - **支持语言设置** 默认是中文
10 |
11 | a beautiful color picker based on angularJS.It supports the following features:
12 | - **3 modes of picker** pallete, custom, history
13 | - **Color types** rgb, rgba ,hex.
14 | - **Languages** zh-cn, zh-tw, en, pt.
15 |
16 | #### Requirements
17 | - **jquery**
18 | - **angular 1.3.x +**（one-time binding）
19 |
20 | #### Install
21 | > bower install angular-colorpicker
22 |
23 | > npm install angular-colorpicker
24 |
25 | #### Basic Usage
26 |
27 | **html代码**
28 | ```html
29 |
30 | ```
31 |
32 | **angular代码**
33 | ```javascript
34 | var app = angular.module('app',['ui.colorpicker']);
35 | ```
36 |
37 | #### Options
38 | - **color** 颜色值
39 | - **color-type** 颜色格式(rgb,rgba,hex) Default `hex`
40 | - **color-language** 语言设置(zh-cn,zh-tw,en...) Default `zh-cn`
41 |
42 |
43 | #### Browser Support
44 | `ie9+` `chrome` `firefox` `safari`
45 |
46 | #### License
47 | --------
48 | This colopicker plugin is licensed under the MIT license.
49 |
50 | Copyright (c) 2016 linjinying
51 |
--------------------------------------------------------------------------------
/angular-colorpicker/bower.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "angular-components",
3 | "description": "angular-components",
4 | "main": [
5 | "dist/js/angular-colorpicker.min.js",
6 | "dist/css/angular-colorpicker.min.css"
7 | ],
8 | "dependencies" : {
9 | "angular": "1.3.0",
10 | "jquery": "1.8.3"
11 | },
12 | "authors": [
13 | "linjinying"
14 | ],
15 | "license": "MIT",
16 | "keywords": [
17 | "colorpicker",
18 | "color",
19 | "angular"
20 | ],
21 | "homepage": "https://github.com/linjinying/angular-components",
22 | "moduleType": [],
23 | "ignore": [
24 | "**/.*",
25 | "node_modules",
26 | "bower_components",
27 | "test",
28 | "tests"
29 | ]
30 | }
31 |
--------------------------------------------------------------------------------
/angular-colorpicker/config.rb:
--------------------------------------------------------------------------------
1 | require 'compass/import-once/activate'
2 | # Require any additional compass plugins here.
3 |
4 | # Set this to the root of your project when deployed:
5 | http_path = "/"
6 | css_dir = "css"
7 | sass_dir = "sass"
8 | images_dir = "images"
9 | javascripts_dir = "js"
10 |
11 | # You can select your preferred output style here (can be overridden via the command line):
12 | # output_style = :expanded or :nested or :compact or :compressed
13 | output_style = :compact
14 |
15 | # To enable relative paths to assets via compass helper functions. Uncomment:
16 | relative_assets = true
17 |
18 | # To disable debugging comments that display the original location of your selectors. Uncomment:
19 | # line_comments = false
20 |
21 |
22 | # If you prefer the indented syntax, you might want to regenerate this
23 | # project again passing --syntax sass, or you can uncomment this:
24 | # preferred_syntax = :sass
25 | # and then run:
26 | # sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass
27 |
--------------------------------------------------------------------------------
/angular-colorpicker/demo/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | angular-colorpicker
7 |
8 |
9 |
10 |
11 |
16 |
17 |
18 |
19 |
20 |
21 |
27 |
28 |
--------------------------------------------------------------------------------
/angular-colorpicker/gulpfile.js:
--------------------------------------------------------------------------------
1 | var gulp = require('gulp');
2 | var compass = require('gulp-compass');
3 | var uglifyjs = require('gulp-uglify');
4 | var minifycss = require('gulp-minify-css');
5 | var autoprefixer = require('gulp-autoprefixer');
6 | var rename = require('gulp-rename');
7 | var connect = require('gulp-connect');
8 | var sassFolder = ['./src/sass/**/*.scss'];
9 | var jsFolder = ['./src/js/*.js'];
10 | gulp.task('compass', function() {
11 | return gulp.src(sassFolder)
12 | .pipe(compass({
13 | config_file: './config.rb',
14 | css: './src/css',
15 | sass: './src/sass'
16 | }))
17 | .pipe(autoprefixer({
18 | browsers: ['Firefox >= 1', 'Chrome >= 1', 'ie >= 7'],
19 | cascade: true
20 | }))
21 | .pipe(gulp.dest('./src/css/'))
22 | .pipe(gulp.dest('./dist/css/'))
23 | .pipe(rename({suffix: '.min'}))
24 | .pipe(minifycss())
25 | .pipe(gulp.dest('./dist/css/'));
26 | });
27 | gulp.task('uglifyjs', function() {
28 | return gulp.src(jsFolder)
29 | .pipe(gulp.dest('./dist/js/'))
30 | .pipe(rename({suffix: '.min'}))
31 | .pipe(uglifyjs())
32 | .pipe(gulp.dest('./dist/js/'));
33 | });
34 |
35 | gulp.task('connect', function() {
36 | connect.server({
37 | root: '../',
38 | port: 9999,
39 | host: 'localhost'
40 | });
41 | });
42 |
43 | gulp.task('start', function() {
44 | gulp.watch(sassFolder, ['compass']);
45 | gulp.watch(jsFolder, ['uglifyjs']);
46 | gulp.start('uglifyjs');
47 | gulp.start('connect');
48 | });
49 | gulp.task('default', ['start']);
--------------------------------------------------------------------------------
/angular-colorpicker/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "angular-colorpicker",
3 | "version": "1.1.0",
4 | "description": "angular-colorpicker",
5 | "main": "./dist/js/angular-colorpicker.min.js",
6 | "style": "./dist/css/angular-colorpicker.min.css",
7 | "directories": {
8 | "example": "example"
9 | },
10 | "scripts": {
11 | "test": "echo \"Error: no test specified\" && exit 1"
12 | },
13 | "repository": {
14 | "type": "git",
15 | "url": "git+https://github.com/linjinying/angular-colorpicker.git"
16 | },
17 | "keywords": [
18 | "colorpicker",
19 | "color",
20 | "angular"
21 | ],
22 | "author": "linjinying",
23 | "license": "MIT",
24 | "bugs": {
25 | "url": "https://github.com/linjinying/angular-colorpicker/issues"
26 | },
27 | "homepage": "https://github.com/linjinying/angular-colorpicker#readme",
28 | "devDependencies": {
29 | "gulp": "^3.9.0",
30 | "gulp-minify-css": "^1.2.3",
31 | "gulp-rename": "^1.2.2",
32 | "gulp-sass": "^2.1.1",
33 | "gulp-uglify": "^1.5.1",
34 | "gulp-autoprefixer": "^3.1.1",
35 | "gulp-compass": "^2.1.0",
36 | "gulp-connect": "^5.0.0"
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/angular-colorpicker/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/narol1024/angular-components/99de04f9343903e8037d7cee08a24625c1d3f22c/angular-colorpicker/screenshot.png
--------------------------------------------------------------------------------
/angular-confirm/README.md:
--------------------------------------------------------------------------------
1 | ## angular-confirm
2 | 
3 |
4 | ### demo
5 | [click here](https://techjs.cn/demo/angular-components/angular-confirm/)
6 | ### 说明
7 | 一个基于angular、angular-bootstrap的确认框组件，目前支持的API有：
8 |
9 | - **text** 提示的消息文本
10 | - **confirmTitle** 提示的消息标题
11 | - **confirmOk** 确定按钮的文本
12 | - **confirmCancel** 确定按钮的文本
13 | - **confirmOkColor** 确定按钮的颜色，可以配置基于bootstrap的按钮颜色，例如`default`，`primary`，`danger`等
14 | - **confirmCancelColor** 取消按钮的颜色，可以配置基于bootstrap的按钮颜色，例如`default`，`primary`，`danger`等
15 | - **confirmSettings** 主要用于配置angular-bootstrap的modal参数,例如`backdrop: 'static'`
16 |
17 | ### 依赖
18 | - angular
19 | - bootstrap.css
20 | - angular-bootstrap
21 |
22 | ### 使用方式
23 | #### 1.直接在HTML上使用
24 |
25 | **html代码**
26 | ```html
27 |
28 |
29 |
30 | ```
31 | **angular代码**
32 | ```javascript
33 | var app = angular.module("app", ["ui.bootstrap", "ui.confirm"]);
34 | app.controller("ctrl", ['$scope', '$confirm',function($scope,$confirm) {
35 | $scope.refuse = function(){
36 | alert("已拒绝");
37 | };
38 | }])
39 | ```
40 | #### 2.动态调用
41 |
42 | **html代码**
43 | ```html
44 |
45 |
46 |
47 | ```
48 | **angular代码**
49 | ```javascript
50 | var app = angular.module("app", ["ui.bootstrap", "ui.confirm"]);
51 | app.controller("ctrl", ['$scope', '$confirm',function($scope,$confirm) {
52 | $scope.confirm = function() {
53 | $confirm({
54 | text: "您确认了吗？",
55 | confirmOk: "确定",
56 | confirmTitle: "提示",
57 | confirmCancel: "取消",
58 | confirmOkColor: "danger"
59 | }).then(function () {
60 | alert("确认了");
61 | }, function () {
62 | alert("取消了");
63 | });
64 | };
65 | }]);
66 | ```
67 |
--------------------------------------------------------------------------------
/angular-confirm/bower.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "angular-components",
3 | "version": "1.0.0",
4 | "homepage": "https://github.com/linjinying/angular-components",
5 | "authors": [
6 | "linjinying "
7 | ],
8 | "description": "",
9 | "main": "",
10 | "moduleType": [],
11 | "license": "MIT",
12 | "ignore": [
13 | "**/.*",
14 | "node_modules",
15 | "bower_components",
16 | "test",
17 | "tests"
18 | ],
19 | "dependencies": {
20 | "angular": "1.3.0",
21 | "angular-bootstrap": "0.14.3",
22 | "bootstrap": "^3.3.7"
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/angular-confirm/config.rb:
--------------------------------------------------------------------------------
1 | require 'compass/import-once/activate'
2 | # Require any additional compass plugins here.
3 |
4 | # Set this to the root of your project when deployed:
5 | http_path = "/"
6 | css_dir = "css"
7 | sass_dir = "sass"
8 | images_dir = "images"
9 | javascripts_dir = "js"
10 |
11 | # You can select your preferred output style here (can be overridden via the command line):
12 | # output_style = :expanded or :nested or :compact or :compressed
13 | output_style = :compact
14 |
15 | # To enable relative paths to assets via compass helper functions. Uncomment:
16 | relative_assets = true
17 |
18 | # To disable debugging comments that display the original location of your selectors. Uncomment:
19 | # line_comments = false
20 |
21 |
22 | # If you prefer the indented syntax, you might want to regenerate this
23 | # project again passing --syntax sass, or you can uncomment this:
24 | # preferred_syntax = :sass
25 | # and then run:
26 | # sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass
27 |
--------------------------------------------------------------------------------
/angular-confirm/demo/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | demo
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 | 基本设置：
16 |
17 | 直接在按钮设置指令：
18 |
19 |
20 |
41 |
42 |
43 |
--------------------------------------------------------------------------------
/angular-confirm/dist/css/angular-confirm.css:
--------------------------------------------------------------------------------
1 | .modal.modal-confirm .modal-body { font-size: 16px; }
2 | .modal.modal-confirm .modal-body .icon { padding: 0 10px; font-size: 20px; color: #f0ad4e; float: left; }
3 | .modal.modal-confirm .modal-body .text { color: #333; display: block; overflow: hidden; }
4 | .modal.modal-confirm .modal-footer .btn { padding: 5px 10px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; font-size: 12px; }
5 | .modal.modal-confirm .modal-header { padding: 10px 15px; }
6 | .modal.modal-confirm .modal-header .modal-title { font-weight: 700; text-align: left; }
7 |
--------------------------------------------------------------------------------
/angular-confirm/dist/css/angular-confirm.min.css:
--------------------------------------------------------------------------------
1 | .modal.modal-confirm .modal-body{font-size:16px}.modal.modal-confirm .modal-body .icon{padding:0 10px;font-size:20px;color:#f0ad4e;float:left}.modal.modal-confirm .modal-body .text{color:#333;display:block;overflow:hidden}.modal.modal-confirm .modal-footer .btn{padding:5px 10px;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;font-size:12px}.modal.modal-confirm .modal-header{padding:10px 15px}.modal.modal-confirm .modal-header .modal-title{font-weight:700;text-align:left}
--------------------------------------------------------------------------------
/angular-confirm/dist/js/angular-confirm.min.js:
--------------------------------------------------------------------------------
1 | angular.module("ui.confirm",["ui.bootstrap.modal"]).controller("ConfirmModalController",["$scope","$uibModalInstance","data",function(n,o,a){n.data=angular.copy(a),n.ok=function(n){o.close(n)},n.cancel=function(n){angular.isUndefined(n)&&(n="cancel"),o.dismiss(n)}}]).value("$confirmModalDefaults",{size:"md",windowClass:"modal-confirm",template:'{{data.text}}
',controller:"ConfirmModalController",defaultLabels:{confirmOkColor:"primary",confirmTitle:"确认",confirmOk:"确定",confirmCancelColor:"default"}}).factory("$confirm",["$uibModal","$confirmModalDefaults",function(n,o){return function(a,c){var r=angular.copy(o);return c=angular.extend(r,c||{}),a=angular.extend({},c.defaultLabels,a||{}),c.resolve={data:function(){return a}},n.open(c).result}}]).directive("confirm",["$confirm",function(n){return{priority:1,restrict:"A",scope:{ngClick:"&",confirm:"@",confirmSettings:"=",confirmTitle:"@",confirmOk:"@",confirmOkColor:"@",confirmCancel:"@",confirmCancelColor:"@"},link:function(o,a,c){a.unbind("click").bind("click",function(a){a.preventDefault();var c={text:o.confirm,confirmTitle:o.confirmTitle,confirmOk:o.confirmOk,confirmCancel:o.confirmCancel||!1,confirmOkColor:o.confirmOkColor||"primary",confirmCancelColor:o.confirmCancelColor||"default"};n(c,angular.extend({},o.confirmSettings)).then(o.ngClick)})}}}]);
--------------------------------------------------------------------------------
/angular-confirm/gulpfile.js:
--------------------------------------------------------------------------------
1 | var gulp = require('gulp');
2 | var compass = require('gulp-compass');
3 | var uglifyjs = require('gulp-uglify');
4 | var minifycss = require('gulp-minify-css');
5 | var autoprefixer = require('gulp-autoprefixer');
6 | var rename = require('gulp-rename');
7 | var connect = require('gulp-connect');
8 | var sassFolder = ['./src/sass/**/*.scss'];
9 | var jsFolder = ['./src/js/*.js'];
10 | gulp.task('compass', function() {
11 | return gulp.src(sassFolder)
12 | .pipe(compass({
13 | config_file: './config.rb',
14 | css: './src/css',
15 | sass: './src/sass'
16 | }))
17 | .pipe(autoprefixer({
18 | browsers: ['Firefox >= 1', 'Chrome >= 1', 'ie >= 7'],
19 | cascade: true
20 | }))
21 | .pipe(gulp.dest('./src/css/'))
22 | .pipe(gulp.dest('./dist/css/'))
23 | .pipe(rename({suffix: '.min'}))
24 | .pipe(minifycss())
25 | .pipe(gulp.dest('./dist/css/'));
26 | });
27 | gulp.task('uglifyjs', function() {
28 | return gulp.src(jsFolder)
29 | .pipe(gulp.dest('./dist/js/'))
30 | .pipe(rename({suffix: '.min'}))
31 | .pipe(uglifyjs())
32 | .pipe(gulp.dest('./dist/js/'));
33 | });
34 |
35 | gulp.task('connect', function() {
36 | connect.server({
37 | root: '../',
38 | port: 9999,
39 | host: 'localhost'
40 | });
41 | });
42 |
43 | gulp.task('start', function() {
44 | gulp.watch(sassFolder, ['compass']);
45 | gulp.watch(jsFolder, ['uglifyjs']);
46 | gulp.start('uglifyjs');
47 | gulp.start('connect');
48 | });
49 | gulp.task('default', ['start']);
--------------------------------------------------------------------------------
/angular-confirm/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "angular-confirm",
3 | "version": "1.0.0",
4 | "description": "angular-confirm",
5 | "main": "index.js",
6 | "dependencies": {
7 | "gulp": "^3.9.0",
8 | "gulp-autoprefixer": "^3.1.0",
9 | "gulp-replace": "^0.5.4"
10 | },
11 | "devDependencies": {
12 | "gulp-compass": "^2.1.0",
13 | "gulp-connect": "^2.3.1",
14 | "gulp-concat": "^2.6.0",
15 | "gulp-minify-css": "^1.2.1",
16 | "gulp-uglify": "^1.4.2",
17 | "gulp-rename": "*"
18 | },
19 | "author": "jinying.lin",
20 | "license": "MIT"
21 | }
22 |
--------------------------------------------------------------------------------
/angular-confirm/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/narol1024/angular-components/99de04f9343903e8037d7cee08a24625c1d3f22c/angular-confirm/screenshot.png
--------------------------------------------------------------------------------
/angular-confirm/src/css/angular-confirm.css:
--------------------------------------------------------------------------------
1 | .modal.modal-confirm .modal-body { font-size: 16px; }
2 | .modal.modal-confirm .modal-body .icon { padding: 0 10px; font-size: 20px; color: #f0ad4e; float: left; }
3 | .modal.modal-confirm .modal-body .text { color: #333; display: block; overflow: hidden; }
4 | .modal.modal-confirm .modal-footer .btn { padding: 5px 10px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; font-size: 12px; }
5 | .modal.modal-confirm .modal-header { padding: 10px 15px; }
6 | .modal.modal-confirm .modal-header .modal-title { font-weight: 700; text-align: left; }
7 |
--------------------------------------------------------------------------------
/angular-confirm/src/sass/angular-confirm.scss:
--------------------------------------------------------------------------------
1 | .modal.modal-confirm {
2 | .modal-body {
3 | font-size: 16px;
4 | .icon {
5 | padding: 0 10px;
6 | font-size: 20px;
7 | color: #f0ad4e;
8 | float: left;
9 | }
10 | .text {
11 | color: #333;
12 | display: block;
13 | overflow: hidden;
14 | }
15 | }
16 | .modal-footer {
17 | .btn {
18 | padding: 5px 10px;
19 | border-radius: 2px;
20 | font-size: 12px;
21 | }
22 | }
23 | .modal-header {
24 | padding: 10px 15px;
25 | .modal-title {
26 | font-weight: 700;
27 | text-align: left;
28 | }
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/angular-datetime/README.md:
--------------------------------------------------------------------------------
1 | ## angular-datetime
2 |
3 | ### demo
4 | [click here](https://techjs.cn/demo/angular-components/angular-datetime/)
5 |
6 | ### 说明
7 | 一个基于angular的时间工具类，目前支持的API有：
8 |
9 | - **isDate** `function(date){}`检测`date`是否为时间对象
10 | - **newDate** `function(dateStr){}`转换成时间对象，支持时间戳、标准时间参数或`yyyy-mm-dd hh:ii:ss`非标准格式，返回时间对象。
11 | - **format** `function(date,format){}`时间对象格式化成`yyyy-mm-dd hh:ii:ss`形式
12 | - **getSomeDate** `function(date,count,format){}`获取`date`日期的前后`count`天，有`format`返回时间格式化字符串，否则返回时间对象
13 | - **getSomeMonth** `function(date,count,format){}`获取`date`日期的前后`count`月，传有`format`返回时间格式化字符串，否则返回时间对象
14 |
15 | ### 依赖
16 | - angular
17 |
18 | ### 使用方式
19 | **html代码**
20 | ```html
21 |
22 |
23 | 当前时间：
24 |
25 |
26 | 上个月：
27 |
28 |
29 | 下个月：
30 |
31 |
32 | 昨天：
33 |
34 |
35 | 明天：
36 |
37 |
38 | ```
39 |
40 | **angular代码**
41 | ```javascript
42 | var app = angular.module("app", ['ngDatetime']);
43 | app.controller("ctrl", ['dateTimeFactory', "$scope",function(dateTimeFactory,$scope) {
44 | $scope.currentTime = dateTimeFactory.format(new Date(),'yyyy-mm-dd');
45 | $scope.prevMonthTime = dateTimeFactory.getSomeMonth(new Date(),-1,'yyyy-mm-dd');
46 | $scope.nextMonthTime = dateTimeFactory.getSomeMonth(new Date(),1,'yyyy-mm-dd');
47 | $scope.prevDateTime = dateTimeFactory.getSomeDate(new Date(),-1,'yyyy-mm-dd');
48 | $scope.nextDateTime = dateTimeFactory.getSomeDate(new Date(),1,'yyyy-mm-dd');
49 | }]);
50 | ```
--------------------------------------------------------------------------------
/angular-datetime/bower.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "angular-components",
3 | "version": "1.0.0",
4 | "homepage": "https://github.com/linjinying/angular-components",
5 | "authors": [
6 | "linjinying "
7 | ],
8 | "description": "",
9 | "main": "",
10 | "moduleType": [],
11 | "license": "MIT",
12 | "ignore": [
13 | "**/.*",
14 | "node_modules",
15 | "bower_components",
16 | "test",
17 | "tests"
18 | ],
19 | "dependencies": {
20 | "angular": "1.3.0"
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/angular-datetime/demo/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | demo
6 |
7 |
8 |
9 |
10 |
11 | 当前时间：
12 |
13 |
14 | 上个月：
15 |
16 |
17 | 下个月：
18 |
19 |
20 | 昨天：
21 |
22 |
23 | 明天：
24 |
25 |
26 |
36 |
37 |