@ember-eui/pikaday 4.4.0 → 5.0.0-alpha.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/docs/pikaday-demo/demo1.md +45 -0
- package/docs/pikaday.md +1 -0
- package/package.json +3 -3
- package/docs/installation.md +0 -19
- package/docs/pikaday-usage-demo/demo1.md +0 -24
- package/docs/pikaday-usage.md +0 -1
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
# Pikaday
|
|
2
|
+
|
|
3
|
+
<EuiText>
|
|
4
|
+
<p>
|
|
5
|
+
<EuiToolTip @content="We are using a fork for now">
|
|
6
|
+
<:anchor>
|
|
7
|
+
<EuiLink @target="_blank" @href="https://github.com/prysmex/ember-pikaday/tree/flexibility">ember-pikaday</EuiLink>
|
|
8
|
+
</:anchor>
|
|
9
|
+
</EuiToolTip> for <strong>@ember-eui/core</strong> integration
|
|
10
|
+
</p>
|
|
11
|
+
|
|
12
|
+
<p><EuiCodeBlock @language="bash" @isCopyable={{true}}>ember install @ember-eui/pikaday</EuiCodeBlock></p>
|
|
13
|
+
|
|
14
|
+
<EuiTitle @tagName="h3">Styles</EuiTitle>
|
|
15
|
+
|
|
16
|
+
<p>In order to give apps control over styling, the default CSS does not load unless you tell it to. The recommended way to load the CSS is to create this file</p>
|
|
17
|
+
|
|
18
|
+
<EuiCodeBlock @language="js" @isCopyable={{true}}>
|
|
19
|
+
{{t "pikaday.styles_instructions"}}
|
|
20
|
+
</EuiCodeBlock>
|
|
21
|
+
|
|
22
|
+
</EuiText>
|
|
23
|
+
|
|
24
|
+
```hbs template
|
|
25
|
+
<EuiPikaday @onSelection={{this.setDate}} @value={{this.date}} />
|
|
26
|
+
<EuiText>
|
|
27
|
+
<p>The selected date is:
|
|
28
|
+
<EuiCode>{{this.date}}</EuiCode></p>
|
|
29
|
+
</EuiText>
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
```js component
|
|
33
|
+
import Component from '@glimmer/component';
|
|
34
|
+
import { action } from '@ember/object';
|
|
35
|
+
import { tracked } from '@glimmer/tracking';
|
|
36
|
+
|
|
37
|
+
export default class extends Component {
|
|
38
|
+
@tracked date = new Date();
|
|
39
|
+
|
|
40
|
+
@action
|
|
41
|
+
setDate(date) {
|
|
42
|
+
this.date = date;
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
```
|
package/docs/pikaday.md
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<!-- empty on purpose -->
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ember-eui/pikaday",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "5.0.0-alpha.1",
|
|
4
4
|
"description": "ember-pikaday integration with @ember-eui/core",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"ember-addon",
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
"postpack": "ember ts:clean"
|
|
31
31
|
},
|
|
32
32
|
"dependencies": {
|
|
33
|
-
"@ember-eui/core": "^
|
|
33
|
+
"@ember-eui/core": "^5.0.0-alpha.1",
|
|
34
34
|
"@types/ember": "^3.16.4",
|
|
35
35
|
"ember-auto-import": "^2.4.0",
|
|
36
36
|
"ember-cli-babel": "^7.26.11",
|
|
@@ -116,5 +116,5 @@
|
|
|
116
116
|
"volta": {
|
|
117
117
|
"extends": "../../package.json"
|
|
118
118
|
},
|
|
119
|
-
"gitHead": "
|
|
119
|
+
"gitHead": "8274d7d27c55ed0fafc1c3e0228c8cd70dd4bccc"
|
|
120
120
|
}
|
package/docs/installation.md
DELETED
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
# Installation
|
|
2
|
-
|
|
3
|
-
`ember-pikaday` for `@ember-eui/core`
|
|
4
|
-
|
|
5
|
-
1. `ember install @ember-eui/pikaday`
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
We are currently using a fork of `ember-pikaday` for more flexibility, so next intructions are regarding styling using that fork.
|
|
9
|
-
## Styles
|
|
10
|
-
|
|
11
|
-
In order to give apps control over styling, the default CSS does not load unless you tell it to. The recommended way to load the CSS is to create this file:
|
|
12
|
-
|
|
13
|
-
```js
|
|
14
|
-
// app/modifiers/pikaday.js
|
|
15
|
-
|
|
16
|
-
/* Opt-in to using pikaday's default CSS */
|
|
17
|
-
import 'ember-pikaday-prysmex/pikaday.css';
|
|
18
|
-
export { default } from 'ember-pikaday-prysmex/modifiers/pikaday';
|
|
19
|
-
```
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
# Demo
|
|
2
|
-
|
|
3
|
-
```hbs template
|
|
4
|
-
<EuiPikaday @onSelection={{this.setDate}} @value={{this.date}} />
|
|
5
|
-
|
|
6
|
-
The selected date is: {{this.date}}
|
|
7
|
-
```
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
```js component
|
|
11
|
-
import Component from "@glimmer/component";
|
|
12
|
-
import { action } from "@ember/object";
|
|
13
|
-
import { tracked } from "@glimmer/tracking";
|
|
14
|
-
|
|
15
|
-
export default class Hoool extends Component {
|
|
16
|
-
@tracked date = new Date;
|
|
17
|
-
|
|
18
|
-
@action
|
|
19
|
-
setDate(date) {
|
|
20
|
-
this.date = date;
|
|
21
|
-
}
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
```
|
package/docs/pikaday-usage.md
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
# Usage
|