",
17 | "directories": {
18 | "doc": "doc",
19 | "test": "tests"
20 | },
21 | "scripts": {
22 | "build": "ember build",
23 | "lint:hbs": "ember-template-lint .",
24 | "lint:js": "eslint .",
25 | "start": "ember serve",
26 | "test": "ember test",
27 | "test:all": "ember try:each"
28 | },
29 | "dependencies": {
30 | "ember-cli-babel": "^7.7.3",
31 | "ember-cli-htmlbars": "^3.0.0",
32 | "ember-invoke-action": "^1.5.1",
33 | "lodash.merge": "^4.6.0",
34 | "semantic-ui-calendar": "^0.0.8"
35 | },
36 | "devDependencies": {
37 | "@ember/jquery": "^0.6.0",
38 | "@ember/optional-features": "^1.0.0",
39 | "broccoli-asset-rev": "^3.0.0",
40 | "ember-ajax": "^5.0.0",
41 | "ember-cli": "~3.12.0",
42 | "ember-cli-code-coverage": "0.4.2",
43 | "ember-cli-dependency-checker": "^3.1.0",
44 | "ember-cli-eslint": "^5.0.0",
45 | "ember-cli-github-pages": "0.2.2",
46 | "ember-cli-htmlbars-inline-precompile": "^3.0.0",
47 | "ember-cli-inject-live-reload": "^2.0.1",
48 | "ember-cli-moment-shim": "3.7.1",
49 | "ember-cli-release": "^1.0.0-beta.2",
50 | "ember-cli-sri": "^2.1.1",
51 | "ember-cli-template-lint": "^1.0.0-beta.1",
52 | "ember-cli-uglify": "^3.0.0",
53 | "ember-cli-yuidoc": "0.8.8",
54 | "ember-code-snippet": "2.4.0",
55 | "ember-disable-prototype-extensions": "^1.1.3",
56 | "ember-export-application-global": "^2.0.0",
57 | "ember-load-initializers": "^2.0.0",
58 | "ember-maybe-import-regenerator": "^0.1.6",
59 | "ember-moment": "8.0.0",
60 | "ember-native-dom-helpers": "0.6.3",
61 | "ember-qunit": "^4.2.0",
62 | "ember-resolver": "^5.0.1",
63 | "ember-source": "~3.12.0",
64 | "ember-source-channel-url": "^2.0.1",
65 | "ember-try": "^1.0.0",
66 | "eslint-plugin-ember": "^7.0.0",
67 | "eslint-plugin-node": "^10.0.0",
68 | "loader.js": "^4.7.0",
69 | "qunit-dom": "^0.9.0",
70 | "semantic-ui-ember": "^3.0.0",
71 | "yuidoc-theme-quantosobra": "github:quantosobra/yuidoc-theme-quantosobra"
72 | },
73 | "peerDependencies": {
74 | "semantic-ui-ember": "^3.0.0"
75 | },
76 | "engines": {
77 | "node": "6.* || 8.* || >= 10.*"
78 | },
79 | "ember-addon": {
80 | "configPath": "tests/dummy/config",
81 | "versionCompatibility": {
82 | "ember": ">=2.16.0"
83 | },
84 | "demoURL": "http://quantosobra.github.io/ember-semantic-ui-calendar"
85 | }
86 | }
87 |
--------------------------------------------------------------------------------
/testem.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | test_page: 'tests/index.html?hidepassed',
3 | disable_watching: true,
4 | launch_in_ci: [
5 | 'Chrome'
6 | ],
7 | launch_in_dev: [
8 | 'Chrome'
9 | ],
10 | browser_args: {
11 | Chrome: {
12 | ci: [
13 | // --no-sandbox is needed when running Chrome inside a container
14 | process.env.CI ? '--no-sandbox' : null,
15 | '--headless',
16 | '--disable-gpu',
17 | '--disable-dev-shm-usage',
18 | '--disable-software-rasterizer',
19 | '--mute-audio',
20 | '--remote-debugging-port=0',
21 | '--window-size=1440,900'
22 | ].filter(Boolean)
23 | }
24 | }
25 | };
26 |
--------------------------------------------------------------------------------
/tests/dummy/app/app.js:
--------------------------------------------------------------------------------
1 | import Application from '@ember/application';
2 | import Resolver from './resolver';
3 | import loadInitializers from 'ember-load-initializers';
4 | import config from './config/environment';
5 |
6 | const App = Application.extend({
7 | modulePrefix: config.modulePrefix,
8 | podModulePrefix: config.podModulePrefix,
9 | Resolver
10 | });
11 |
12 | loadInitializers(App, config.modulePrefix);
13 |
14 | export default App;
15 |
--------------------------------------------------------------------------------
/tests/dummy/app/components/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/quantosobra/ember-semantic-ui-calendar/b2dee3b8fa41c8c9a80e0cf16d1e8a155336aee3/tests/dummy/app/components/.gitkeep
--------------------------------------------------------------------------------
/tests/dummy/app/components/controls-segment.js:
--------------------------------------------------------------------------------
1 | import Component from '@ember/component';
2 | import layout from '../templates/components/controls-segment';
3 |
4 | export default Component.extend({
5 | layout,
6 | classNames: ['ui', 'segments'],
7 |
8 | date: null,
9 | reset: null
10 | });
11 |
--------------------------------------------------------------------------------
/tests/dummy/app/components/ui-calendar-moment.js:
--------------------------------------------------------------------------------
1 | // BEGIN-SNIPPET components-ui-calendar-moment
2 | import { inject as service } from '@ember/service';
3 |
4 | import { computed } from '@ember/object';
5 | import { merge } from '@ember/polyfills';
6 | import moment from 'moment';
7 | import UiCalendarComponent from 'ember-semantic-ui-calendar/components/ui-calendar';
8 |
9 | const UiCalendarMoment = UiCalendarComponent.extend({
10 | // See below
11 | });
12 |
13 | export default UiCalendarMoment;
14 | // END-SNIPPET components-ui-calendar-moment
15 |
16 | // BEGIN-SNIPPET components-ui-calendar-moment-binding
17 | UiCalendarMoment.reopen({
18 | // Store the moment object for the selected date
19 | momentValue: null,
20 |
21 | // Provide the Date object that is used by ui-calendar
22 | date: computed('momentValue', function() {
23 | let momentValue = this.get('momentValue');
24 | return momentValue ? momentValue.toDate() : null;
25 | }).readOnly(),
26 |
27 | willInitSemantic(settings) {
28 | this._super(...arguments);
29 |
30 | merge(settings, {
31 | onChange(date) {
32 | // Wraps the Date in a moment object an triggers the onChange action
33 | this.get('onChange')(date ? moment(date) : null);
34 | }
35 | });
36 | }
37 | });
38 | // END-SNIPPET components-ui-calendar-moment-binding
39 |
40 | // BEGIN-SNIPPET components-ui-calendar-moment-locale
41 | UiCalendarMoment.reopen({
42 | moment: service('moment'),
43 |
44 | init() {
45 | this._super(...arguments);
46 |
47 | this.get('moment').on('localeChanged', () => this.momentLocaleChanged());
48 | },
49 |
50 | localizedText: computed('moment.locale', function() {
51 | return {
52 | days: moment.weekdaysMin(),
53 | months: moment.months(),
54 | monthsShort: moment.monthsShort()
55 | // You can also add translations for `today` and `now` here, using an
56 | // addon like ember-i18n or ember-intl.
57 | };
58 | }),
59 |
60 | momentLocaleChanged() {
61 | // Update translations
62 | this.execute('setting', 'text', this.get('localizedText'));
63 |
64 | // Refresh the calendar in popup
65 | this.execute('refresh');
66 |
67 | // Refresh the input
68 | this.execute('set date', this.get('date'), true, false);
69 | },
70 |
71 | willInitSemantic(settings) {
72 | this._super(...arguments);
73 | merge(settings, {
74 | text: this.get('localizedText'),
75 | formatter: {
76 | date(date) {
77 | return date ? moment(date).format('L') : '';
78 | },
79 | time(date) {
80 | return date ? moment(date).format('LT') : '';
81 | }
82 | }
83 | });
84 | }
85 | });
86 | // END-SNIPPET components-ui-calendar-moment-locale
87 |
--------------------------------------------------------------------------------
/tests/dummy/app/controllers/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/quantosobra/ember-semantic-ui-calendar/b2dee3b8fa41c8c9a80e0cf16d1e8a155336aee3/tests/dummy/app/controllers/.gitkeep
--------------------------------------------------------------------------------
/tests/dummy/app/controllers/clear-button-examples.js:
--------------------------------------------------------------------------------
1 | import Controller from '@ember/controller';
2 |
3 | export default Controller.extend({
4 | date: null,
5 |
6 | actions: {
7 | resetDate() {
8 | this.set('date', new Date());
9 | }
10 | }
11 | });
12 |
--------------------------------------------------------------------------------
/tests/dummy/app/controllers/custom-trigger-examples.js:
--------------------------------------------------------------------------------
1 | import Controller from '@ember/controller';
2 |
3 | export default Controller.extend({
4 | date: null,
5 |
6 | actions: {
7 | onSelectedDate(date) {
8 | this.set('date', date.toDateString());
9 | }
10 | }
11 | });
12 |
--------------------------------------------------------------------------------
/tests/dummy/app/controllers/index.js:
--------------------------------------------------------------------------------
1 | import Controller from '@ember/controller';
2 |
3 | export default Controller.extend({
4 | date: null,
5 |
6 | actions: {
7 | resetDate() {
8 | this.set('date', new Date());
9 | }
10 | }
11 | });
12 |
--------------------------------------------------------------------------------
/tests/dummy/app/controllers/moment-examples.js:
--------------------------------------------------------------------------------
1 | import { inject as service } from '@ember/service';
2 | import Controller from '@ember/controller';
3 | import moment from 'moment';
4 |
5 | export default Controller.extend({
6 | moment: service('moment'),
7 |
8 | date: null,
9 |
10 | actions: {
11 | resetDate() {
12 | this.set('date', moment());
13 | },
14 |
15 | changeLocale(locale) {
16 | this.get('moment').setLocale(locale);
17 | }
18 | }
19 | });
20 |
--------------------------------------------------------------------------------
/tests/dummy/app/controllers/range-examples.js:
--------------------------------------------------------------------------------
1 | import Controller from '@ember/controller';
2 |
3 | export default Controller.extend({
4 | startDate: null,
5 | endDate: null
6 | });
7 |
--------------------------------------------------------------------------------
/tests/dummy/app/helpers/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/quantosobra/ember-semantic-ui-calendar/b2dee3b8fa41c8c9a80e0cf16d1e8a155336aee3/tests/dummy/app/helpers/.gitkeep
--------------------------------------------------------------------------------
/tests/dummy/app/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Ember Semantic UI Calendar
7 |
30 | {{outlet}}
31 |
32 |
--------------------------------------------------------------------------------
/tests/dummy/app/templates/clear-button-examples.hbs:
--------------------------------------------------------------------------------
1 | {{controls-segment date=date reset=(action "resetDate")}}
2 |
3 |
4 |
5 |
6 |
7 |
8 | {{! BEGIN-SNIPPET clear-button }}
9 | {{ui-calendar date=date onChange=(action (mut date)) allowClear=true placeholder="Select date and time"}}
10 | {{! END-SNIPPET clear-button }}
11 |
12 |
13 | {{code-snippet name="clear-button.hbs"}}
14 |
15 |
18 |
19 |
20 |
21 |
22 | {{! BEGIN-SNIPPET custom-clear-button }}
23 | {{ui-calendar
24 | date=date
25 | onChange=(action (mut date))
26 | allowClear=true
27 | clearIcon="ban"
28 | placeholder="Select date and time"
29 | }}
30 | {{! END-SNIPPET custom-clear-button }}
31 |
32 |
33 | {{code-snippet name="custom-clear-button.hbs"}}
34 |
35 |
2 |
3 |
4 |
5 |
All examples below use the same date object.
6 |
Current value is: {{date}}
7 |
Set to now
8 |
2 |
3 |
4 |
5 |
6 | {{! BEGIN-SNIPPET example-custom-triggers }}
7 |
23 | {{! END-SNIPPET example-custom-triggers }}
24 |
25 |
26 | {{code-snippet name="example-custom-triggers.hbs"}}
27 |
28 |
4 |
5 |
6 |
7 |
8 | {{! BEGIN-SNIPPET date-and-time }}
9 | {{ui-calendar date=date onChange=(action (mut date)) placeholder="Select date and time"}}
10 | {{! END-SNIPPET date-and-time }}
11 |
12 |
13 | {{code-snippet name="date-and-time.hbs"}}
14 |
15 |
18 |
19 |
20 |
21 |
22 | {{! BEGIN-SNIPPET date-only }}
23 | {{ui-calendar type="date" date=date onChange=(action (mut date)) placeholder="Select date"}}
24 | {{! END-SNIPPET date-only }}
25 |
26 |
27 | {{code-snippet name="date-only.hbs"}}
28 |
29 |
32 |
33 |
34 |
35 |
36 | {{! BEGIN-SNIPPET time-only }}
37 | {{ui-calendar type="time" icon="time" date=date onChange=(action (mut date)) placeholder="Select time"}}
38 | {{! END-SNIPPET time-only }}
39 |
40 |
41 | {{code-snippet name="time-only.hbs"}}
42 |
43 |
2 |
3 |
4 |
5 |
6 | This addon does NOT include ember-moment. To use the examples in this page
7 | in your application, you will need to install ember-moment yourself.
8 |
9 |
10 |
ember install ember-moment
11 |
12 |
15 |
16 |
17 |
18 |
19 | To use moment with ember-semantic-ui-calendar, you should extend the
20 | ui-calendar component class and add moment specific code inside the new
21 | component (you can use the same component name if you want).
22 |
23 |
24 | {{code-snippet name="components-ui-calendar-moment.js"}}
25 |
26 |
29 |
30 |
31 |
32 |
33 | By default, the ui-calendar component only accepts Date objects as value.
34 | You can change this to accept a moment object, and trigger the onChange
35 | action with the selected date as a moment value.
36 |
37 |
38 | {{code-snippet name="components-ui-calendar-moment-binding.js"}}
39 |
40 |
43 |
44 |
45 |
46 |
47 | You can also use moment to add localization support to
48 | ember-semantic-ui-calendar.
49 |
50 |
51 | {{code-snippet name="components-ui-calendar-moment-locale.js"}}
52 |
53 |
56 |
57 |
58 |
59 |
60 |
All examples below use the same date object.
61 |
Current value is: {{date}}
62 |
Set to now
63 |
64 | Change locale
65 | PT-BR
66 | EN
67 |
68 |
69 |
72 |
73 |
74 |
75 |
76 | {{! BEGIN-SNIPPET moment-date-and-time }}
77 | {{ui-calendar-moment momentValue=date onChange=(action (mut date)) placeholder="Select date and time"}}
78 | {{! END-SNIPPET moment-date-and-time }}
79 |
80 |
81 | {{code-snippet name="moment-date-and-time.hbs"}}
82 |
83 |
86 |
87 |
88 |
89 |
90 | {{! BEGIN-SNIPPET moment-date-only }}
91 | {{ui-calendar-moment type="date" momentValue=date onChange=(action (mut date)) placeholder="Select date"}}
92 | {{! END-SNIPPET moment-date-only }}
93 |
94 |
95 | {{code-snippet name="moment-date-only.hbs"}}
96 |
97 |
100 |
101 |
102 |
103 |
104 | {{! BEGIN-SNIPPET moment-time-only }}
105 | {{ui-calendar-moment type="time" icon="time" momentValue=date onChange=(action (mut date)) placeholder="Select time"}}
106 | {{! END-SNIPPET moment-time-only }}
107 |
108 |
109 | {{code-snippet name="moment-time-only.hbs"}}
110 |
111 |
2 |
3 |
4 |
5 |
6 | {{! BEGIN-SNIPPET range }}
7 |
32 | {{! END-SNIPPET range }}
33 |
34 |
35 | {{code-snippet name="range.hbs"}}
36 |
37 |
Dummy Tests
7 | Select Date
205 | {{/ui-calendar}}
206 | `);
207 |
208 | await click('.ui.calendar .ui.button');
209 | await click('.link.today');
210 | });
211 |
212 | test('a custom trigger can execute module behaviors', async function(assert) {
213 | assert.expect(1);
214 |
215 | this.set('change', (date) => {
216 | this.set('date', date);
217 | });
218 |
219 | await render(hbs`
220 | {{#ui-calendar type="date" onChange=(action change) date=date as |execute|}}
221 | Clear Date
223 | {{/ui-calendar}}
224 | `);
225 |
226 | focus('input');
227 | await click('.link.today');
228 | await click('.ui.calendar .ui.button');
229 |
230 | assert.notOk(this.get('date'), 'date should be empty');
231 | });
232 | });
233 |
--------------------------------------------------------------------------------
/tests/test-helper.js:
--------------------------------------------------------------------------------
1 | import Application from '../app';
2 | import config from '../config/environment';
3 | import { setApplication } from '@ember/test-helpers';
4 | import { start } from 'ember-qunit';
5 |
6 | setApplication(Application.create(config.APP));
7 |
8 | start();
9 |
--------------------------------------------------------------------------------
/tests/unit/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/quantosobra/ember-semantic-ui-calendar/b2dee3b8fa41c8c9a80e0cf16d1e8a155336aee3/tests/unit/.gitkeep
--------------------------------------------------------------------------------
/vendor/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/quantosobra/ember-semantic-ui-calendar/b2dee3b8fa41c8c9a80e0cf16d1e8a155336aee3/vendor/.gitkeep
--------------------------------------------------------------------------------
/vendor/ember-semantic-ui-calendar.css:
--------------------------------------------------------------------------------
1 | .ui[class*="left right icon"].input > i.left.icon {
2 | right: inherit;
3 | }
4 |
5 | .ui[class*="left right icon"].input > input {
6 | padding-left: 2.67142857em !important;
7 | padding-right: 2.67142857em !important;
8 | }
9 |
--------------------------------------------------------------------------------
/vendor/ember-semantic-ui-calendar.min.css:
--------------------------------------------------------------------------------
1 | .ui[class*="left right icon"].input>i.left.icon{right:inherit}.ui[class*="left right icon"].input>input{padding-left:2.67142857em!important;padding-right:2.67142857em!important}
2 |
--------------------------------------------------------------------------------
/yuidoc.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "ember-semantic-ui-calendar",
3 | "description": "",
4 | "url": "http://github.com/quantosobra/ember-semantic-ui-calendar",
5 | "options": {
6 | "enabledEnvironments": ["production"],
7 | "themedir" : "node_modules/yuidoc-theme-quantosobra",
8 | "paths": [
9 | "app",
10 | "addon"
11 | ],
12 | "external": {
13 | "data": [{
14 | "base": "http://emberjs.com/api/",
15 | "json": "http://builds.emberjs.com/tags/v2.4.0/ember-docs.json"
16 | }]
17 | },
18 | "exclude": "vendor",
19 | "outdir": "docs",
20 | "linkNatives": true,
21 | "quiet": true,
22 | "parseOnly": false,
23 | "lint": false,
24 | "nocode": false
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
4 | Semantic UI Calendar
5 |