@cocreate/calculate 1.14.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/.github/FUNDING.yml +3 -0
- package/.github/workflows/automated.yml +44 -0
- package/.github/workflows/manual.yml +44 -0
- package/CHANGELOG.md +1518 -0
- package/CONTRIBUTING.md +96 -0
- package/CoCreate.config.js +23 -0
- package/LICENSE +21 -0
- package/README.md +85 -0
- package/demo/index.html +30 -0
- package/docs/index.html +378 -0
- package/package.json +66 -0
- package/release.config.js +22 -0
- package/src/index.js +169 -0
- package/webpack.config.js +90 -0
package/CONTRIBUTING.md
ADDED
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
# Contributing to CoCreate-calculate
|
|
2
|
+
|
|
3
|
+
This project is work of [many contributors](https://github.com/CoCreate-app/CoCreate-calculate/graphs/contributors).
|
|
4
|
+
You're encouraged to submit [pull requests](https://github.com/CoCreate-app/CoCreate-calculate/pulls),
|
|
5
|
+
[propose features and discuss issues](https://github.com/CoCreate-app/CoCreate-calculate/issues).
|
|
6
|
+
|
|
7
|
+
In the examples below, substitute your Github username for `contributor` in URLs.
|
|
8
|
+
|
|
9
|
+
## Fork the Project
|
|
10
|
+
|
|
11
|
+
Fork the [project on Github](https://github.com/CoCreate-app/CoCreate-calculate) and check out your copy.
|
|
12
|
+
|
|
13
|
+
```
|
|
14
|
+
git clone https://github.com/contributor/CoCreate-calculate.git
|
|
15
|
+
cd CoCreate-calculate
|
|
16
|
+
git remote add upstream https://github.com/CoCreate-app/CoCreate-calculate.git
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Create a Topic Branch
|
|
20
|
+
|
|
21
|
+
Make sure your fork is up-to-date and create a topic branch for your feature or bug fix on dev branch.
|
|
22
|
+
|
|
23
|
+
```
|
|
24
|
+
git checkout dev
|
|
25
|
+
git pull upstream dev
|
|
26
|
+
git checkout -b my-feature-branch
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
## Write Tests
|
|
30
|
+
|
|
31
|
+
Try to write a test that reproduces the problem you're trying to fix or describes a feature that you want to build.
|
|
32
|
+
|
|
33
|
+
We definitely appreciate pull requests that highlight or reproduce a problem, even without a fix.
|
|
34
|
+
|
|
35
|
+
## Write Code
|
|
36
|
+
|
|
37
|
+
Implement your feature or bug fix.
|
|
38
|
+
|
|
39
|
+
## Write Documentation
|
|
40
|
+
|
|
41
|
+
Document any external behavior in the [README](README.md).
|
|
42
|
+
|
|
43
|
+
## Commit Changes
|
|
44
|
+
|
|
45
|
+
Make sure git knows your name and email address:
|
|
46
|
+
|
|
47
|
+
```
|
|
48
|
+
git config --global user.name "Your Name"
|
|
49
|
+
git config --global user.email "contributor@example.com"
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
We use [semantic-release](https://github.com/semantic-release/semantic-release) as process to generate changelog
|
|
53
|
+
and to release. Write meaningful commits according to
|
|
54
|
+
[Commit Message Formats](https://github.com/semantic-release/semantic-release#commit-message-format) is important.
|
|
55
|
+
|
|
56
|
+
```
|
|
57
|
+
git add ...
|
|
58
|
+
git commit -am "commit-type(optional topic): a meaningful message"
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
Here is an example of the release type that should be done based on a [semantic-release](https://github.com/semantic-release/semantic-release):
|
|
62
|
+
|
|
63
|
+
| Commit message | Release type |
|
|
64
|
+
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------- |
|
|
65
|
+
| `fix(pencil): stop graphite breaking when too much pressure applied` | Patch Release |
|
|
66
|
+
| `feat(pencil): add 'graphiteWidth' option` | ~~Minor~~ Feature Release |
|
|
67
|
+
| `perf(pencil): remove graphiteWidth option`<br><br>`BREAKING CHANGE: The graphiteWidth option has been removed.`<br>`The default graphite width of 10mm is always used for performance reasons.` | ~~Major~~ Breaking Release |
|
|
68
|
+
|
|
69
|
+
## Push
|
|
70
|
+
|
|
71
|
+
```
|
|
72
|
+
git push origin my-feature-branch
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
## Make a Pull Request
|
|
76
|
+
|
|
77
|
+
Go to [https://github.com/CoCreate-app/CoCreate-calculate](https://github.com/CoCreate-app/CoCreate-calculate) and select your feature branch.
|
|
78
|
+
Click the 'Pull Request' button and fill out the form. Pull requests are usually reviewed within a few days.
|
|
79
|
+
|
|
80
|
+
## Rebase
|
|
81
|
+
|
|
82
|
+
If you've been working on a change for a while, rebase with upstream/dev.
|
|
83
|
+
|
|
84
|
+
```
|
|
85
|
+
git fetch upstream
|
|
86
|
+
git rebase upstream/dev
|
|
87
|
+
git push origin my-feature-branch -f
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
## Be Patient
|
|
91
|
+
|
|
92
|
+
It's likely that your change will not be merged and that the nitpicky maintainers will ask you to do more, or fix seemingly benign problems. Hang in there!
|
|
93
|
+
|
|
94
|
+
## Thank You
|
|
95
|
+
|
|
96
|
+
Please do know that we really appreciate and value your time and work. We love you, really.
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
module.exports = {
|
|
2
|
+
"organization_id": "",
|
|
3
|
+
"key": "",
|
|
4
|
+
"host": "",
|
|
5
|
+
"sources": [
|
|
6
|
+
{
|
|
7
|
+
"array": "files",
|
|
8
|
+
"object": {
|
|
9
|
+
"_id": "6019bade4eea0817df303b0a",
|
|
10
|
+
"name": "index.html",
|
|
11
|
+
"path": "/docs/calculate",
|
|
12
|
+
"pathname": "/docs/calculate/index.html",
|
|
13
|
+
"src": "{{./docs/index.html}}",
|
|
14
|
+
"host": [
|
|
15
|
+
"*"
|
|
16
|
+
],
|
|
17
|
+
"directory": "calculate",
|
|
18
|
+
"content-type": "{{content-type}}",
|
|
19
|
+
"public": "true"
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
]
|
|
23
|
+
};
|
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2021 CoCreate LLC
|
|
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.
|
package/README.md
ADDED
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
# CoCreate-calculate
|
|
2
|
+
|
|
3
|
+
A handy vanilla JavaScript calculator, concatenate multiple elements containing integers & execute calculate. Can be used for creating invoices,making payments & any kind of complex calculate. Easily configured using HTML5 attributes and/or JavaScript API. Take it for a spin in our [playground!](https://cocreate.app/docs/calculate)
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
## [Docs & Demo](https://cocreate.app/docs/calculate)
|
|
15
|
+
|
|
16
|
+
For a complete guide and working demo refer to the [doumentation](https://cocreate.app/docs/calculate)
|
|
17
|
+
|
|
18
|
+
## CDN
|
|
19
|
+
|
|
20
|
+
```html
|
|
21
|
+
<script src="https://cdn.cocreate.app/calculate/latest/CoCreate-calculate.min.js"></script>
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
```html
|
|
25
|
+
<script src="https://cdn.cocreate.app/calculate/latest/CoCreate-calculate.min.css"></script>
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
## NPM
|
|
29
|
+
|
|
30
|
+
```shell
|
|
31
|
+
$ npm i @cocreate/calculate
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
## yarn
|
|
35
|
+
|
|
36
|
+
```shell
|
|
37
|
+
$ yarn install @cocreate/calculate
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
# Table of Contents
|
|
41
|
+
|
|
42
|
+
- [Table of Contents](#table-of-contents)
|
|
43
|
+
- [Announcements](#announcements)
|
|
44
|
+
- [Roadmap](#roadmap)
|
|
45
|
+
- [How to Contribute](#how-to-contribute)
|
|
46
|
+
- [About](#about)
|
|
47
|
+
- [License](#license)
|
|
48
|
+
|
|
49
|
+
<a name="announcements"></a>
|
|
50
|
+
|
|
51
|
+
# Announcements
|
|
52
|
+
|
|
53
|
+
All updates to this library are documented in our [CHANGELOG](https://github.com/CoCreate-app/CoCreate-calculate/blob/master/CHANGELOG.md) and [releases](https://github.com/CoCreate-app/CoCreate-calculate/releases). You may also subscribe to email for releases and breaking changes.
|
|
54
|
+
|
|
55
|
+
<a name="roadmap"></a>
|
|
56
|
+
|
|
57
|
+
# Roadmap
|
|
58
|
+
|
|
59
|
+
If you are interested in the future direction of this project, please take a look at our open [issues](https://github.com/CoCreate-app/CoCreate-calculate/issues) and [pull requests](https://github.com/CoCreate-app/CoCreate-calculate/pulls). We would love to hear your feedback.
|
|
60
|
+
|
|
61
|
+
<a name="about"></a>
|
|
62
|
+
|
|
63
|
+
# About
|
|
64
|
+
|
|
65
|
+
CoCreate-calculate is guided and supported by the CoCreate Developer Experience Team.
|
|
66
|
+
|
|
67
|
+
Please Email the Developer Experience Team [here](mailto:develop@cocreate.app) in case of any queries.
|
|
68
|
+
|
|
69
|
+
CoCreate-calculate is maintained and funded by CoCreate. The names and logos for CoCreate are trademarks of CoCreate, LLC.
|
|
70
|
+
|
|
71
|
+
<a name="contribute"></a>
|
|
72
|
+
|
|
73
|
+
# How to Contribute
|
|
74
|
+
|
|
75
|
+
We encourage contribution to our libraries (you might even score some nifty swag), please see our [CONTRIBUTING](https://github.com/CoCreate-app/CoCreate-calculate/blob/master/CONTRIBUTING.md) guide for details.
|
|
76
|
+
|
|
77
|
+
We want this library to be community-driven, and CoCreate led. We need your help to realize this goal. To help make sure we are building the right things in the right order, we ask that you create [issues](https://github.com/CoCreate-app/CoCreate-calculate/issues) and [pull requests](https://github.com/CoCreate-app/CoCreate-calculate/pulls) or merely upvote or comment on existing issues or pull requests.
|
|
78
|
+
|
|
79
|
+
We appreciate your continued support, thank you!
|
|
80
|
+
|
|
81
|
+
<a name="license"></a>
|
|
82
|
+
|
|
83
|
+
# License
|
|
84
|
+
|
|
85
|
+
[The MIT License (MIT)](https://github.com/CoCreate-app/CoCreate-calculate/blob/master/LICENSE)
|
package/demo/index.html
ADDED
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<title>Calculate | CoCreateJS</title>
|
|
5
|
+
<!-- CoCreate Favicon -->
|
|
6
|
+
<link
|
|
7
|
+
rel="icon"
|
|
8
|
+
type="image/png"
|
|
9
|
+
sizes="32x32"
|
|
10
|
+
href="../assets/favicon.ico" />
|
|
11
|
+
<link rel="manifest" href="/manifest.webmanifest" />
|
|
12
|
+
</head>
|
|
13
|
+
<body>
|
|
14
|
+
<input class="we" key="total" id="id1" value="12" />
|
|
15
|
+
<input class="we" key="total" id="id2" value="13" />
|
|
16
|
+
<!--<input id="id3" value="14"><br><br><br>-->
|
|
17
|
+
|
|
18
|
+
<input id="te" calculate="{#id1} + {#id2}" />
|
|
19
|
+
<!--<input calculate="1 + 3 * 5">-->
|
|
20
|
+
<input calculate="{[key='total']} + 1" />
|
|
21
|
+
<h1 calculate="{[key='total']} + {#te}">sum</h1>
|
|
22
|
+
|
|
23
|
+
<!--<h1 calculate="sum[.we]">sum</h1>-->
|
|
24
|
+
<!--<h1 calculate="1 + {#id1} * 5 + {#id3}/{#id2} + {#id2}"></h1>-->
|
|
25
|
+
<!--<h1 calculate="(({#id1} + {#id2})) * {#id3}"></h1>-->
|
|
26
|
+
|
|
27
|
+
<!--<script src="../dist/CoCreate-calculate.js"></script>-->
|
|
28
|
+
<script src="https://CoCreate.app/dist/CoCreate.js"></script>
|
|
29
|
+
</body>
|
|
30
|
+
</html>
|
package/docs/index.html
ADDED
|
@@ -0,0 +1,378 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8" />
|
|
5
|
+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
7
|
+
<title>CoCreate-calculate Documentation | CoCreateJS</title>
|
|
8
|
+
<link
|
|
9
|
+
rel="icon"
|
|
10
|
+
type="image/png"
|
|
11
|
+
sizes="32x32"
|
|
12
|
+
href="https://cocreate.app/images/favicon.ico" />
|
|
13
|
+
<meta
|
|
14
|
+
name="description"
|
|
15
|
+
content="A handy JavaScript calculator,concatenate multiple inputs containing integers & execute calculate.Can be used for invoices,payments & any complex calculate" />
|
|
16
|
+
<meta
|
|
17
|
+
name="keywords"
|
|
18
|
+
content="helper classes, utility classes, css framework, css library, inline style classes" />
|
|
19
|
+
<meta name="robots" content="index,follow" />
|
|
20
|
+
<meta
|
|
21
|
+
property="og:image"
|
|
22
|
+
content="https://cdn.cocreate.app/docs/calculate.png" />
|
|
23
|
+
|
|
24
|
+
<!-- CoCreate CSS -->
|
|
25
|
+
<link
|
|
26
|
+
rel="stylesheet"
|
|
27
|
+
href="https://cdn.cocreate.app/latest/CoCreate.min.css"
|
|
28
|
+
type="text/css" />
|
|
29
|
+
<link
|
|
30
|
+
rel="stylesheet"
|
|
31
|
+
href="../index.css"
|
|
32
|
+
array="files"
|
|
33
|
+
object="60888216117c640e7596303f"
|
|
34
|
+
key="src"
|
|
35
|
+
type="text/css"
|
|
36
|
+
save="true" />
|
|
37
|
+
<link rel="manifest" href="/manifest.webmanifest" />
|
|
38
|
+
</head>
|
|
39
|
+
|
|
40
|
+
<body>
|
|
41
|
+
<!-- Navbar -->
|
|
42
|
+
<nav
|
|
43
|
+
class="width:100% display:flex align-items:center background:transparent padding-top:10px padding-bottom:10px"
|
|
44
|
+
content_id="content"
|
|
45
|
+
scroll="sticky-nav,"
|
|
46
|
+
scroll-up="5"
|
|
47
|
+
scroll-down="5"
|
|
48
|
+
path="../"
|
|
49
|
+
src="../components/navbar.html"></nav>
|
|
50
|
+
<sidenav
|
|
51
|
+
id="menuL"
|
|
52
|
+
class="position:fixed top:0px left:0px overflow:hidden background:whitesmoke height:100vh width:0px width:300px@xl"
|
|
53
|
+
resizable
|
|
54
|
+
resize-selector="[content_id='content']"
|
|
55
|
+
resize-property="margin-left"
|
|
56
|
+
resize-value="width">
|
|
57
|
+
<menu
|
|
58
|
+
array="files"
|
|
59
|
+
object="603717b07de7fb350ae9fec8"
|
|
60
|
+
key="src"></menu>
|
|
61
|
+
<div resize="right"></div>
|
|
62
|
+
</sidenav>
|
|
63
|
+
<main
|
|
64
|
+
class="padding-top:15px padding:15px@lg@xl"
|
|
65
|
+
content_id="content"
|
|
66
|
+
id="cocreate-calculate">
|
|
67
|
+
<div
|
|
68
|
+
class="display:flex flex-wrap:wrap justify-content:space-between position:relative margin:10px">
|
|
69
|
+
<div class="display:flex align-items:center">
|
|
70
|
+
<h2>CoCreate-calculate</h2>
|
|
71
|
+
</div>
|
|
72
|
+
<div
|
|
73
|
+
class="display:flex align-items:center font-size:20px position:absolute right:0 padding:5px background:white">
|
|
74
|
+
<div
|
|
75
|
+
class="display:flex align-items:center transition:0.3s padding-left:10px"
|
|
76
|
+
share-network="true"
|
|
77
|
+
share-text="Enter decription here"
|
|
78
|
+
share-title="testing im a title"
|
|
79
|
+
share-height="600"
|
|
80
|
+
share-width="700"
|
|
81
|
+
share-media="https://cdn.cocreate.app/docs/calculate.png"
|
|
82
|
+
hover="display:block!important"
|
|
83
|
+
hover-selector=".social-networks">
|
|
84
|
+
<div class="display:none social-networks">
|
|
85
|
+
<a
|
|
86
|
+
class="margin-right:15px"
|
|
87
|
+
share-network="twitter"
|
|
88
|
+
title="Share on twitter"
|
|
89
|
+
><i
|
|
90
|
+
class="height:20px fill:#505050"
|
|
91
|
+
src="/assets/svg/twitter.svg"></i
|
|
92
|
+
></a>
|
|
93
|
+
<a
|
|
94
|
+
class="margin-right:15px"
|
|
95
|
+
share-network="facebook"
|
|
96
|
+
title="Share on Facebook"
|
|
97
|
+
><i
|
|
98
|
+
class="height:20px fill:#505050"
|
|
99
|
+
src="/assets/svg/facebook.svg"></i
|
|
100
|
+
></a>
|
|
101
|
+
<a
|
|
102
|
+
class="margin-right:15px"
|
|
103
|
+
share-network="instagram"
|
|
104
|
+
title="Share on instagram"
|
|
105
|
+
><i
|
|
106
|
+
class="height:20px fill:#505050"
|
|
107
|
+
src="/assets/svg/instagram.svg"></i
|
|
108
|
+
></a>
|
|
109
|
+
</div>
|
|
110
|
+
<a
|
|
111
|
+
class="margin-right:15px"
|
|
112
|
+
share-network="share"
|
|
113
|
+
title="Share on share"
|
|
114
|
+
><i
|
|
115
|
+
class="height:20px fill:#505050"
|
|
116
|
+
src="/assets/svg/share-alt.svg"></i
|
|
117
|
+
></a>
|
|
118
|
+
</div>
|
|
119
|
+
<a
|
|
120
|
+
class="margin-right:15px"
|
|
121
|
+
share-network="share"
|
|
122
|
+
title="Share on share"
|
|
123
|
+
><i
|
|
124
|
+
class="height:20px fill:#505050"
|
|
125
|
+
src="/assets/svg/share-alt.svg"></i
|
|
126
|
+
></a>
|
|
127
|
+
</div>
|
|
128
|
+
<a
|
|
129
|
+
href="https://github.com/CoCreate-app/CoCreate-calculate"
|
|
130
|
+
target="_blank"
|
|
131
|
+
class="margin-right:15px"
|
|
132
|
+
><i
|
|
133
|
+
class="height:20px fill:#505050"
|
|
134
|
+
src="/assets/svg/github.svg"></i
|
|
135
|
+
></a>
|
|
136
|
+
</div>
|
|
137
|
+
|
|
138
|
+
<h1
|
|
139
|
+
class="max-width:500px margin:20px_10px line-height:1.5 font-size:16px font-weight:100">
|
|
140
|
+
A handy vanilla JavaScript calculator, concatenate multiple
|
|
141
|
+
elements containing integers & execute calculate. Can be
|
|
142
|
+
used for creating invoices,making payments & any kind of
|
|
143
|
+
complex calculate. Easily configured using HTML5 attributes
|
|
144
|
+
and/or JavaScript API.
|
|
145
|
+
</h1>
|
|
146
|
+
<div id="calculate-section" class="display:flex flex-wrap:wrap">
|
|
147
|
+
<div
|
|
148
|
+
class="flex-grow:1 width:400px width:300px@xs padding:0px_10px margin-top:60px">
|
|
149
|
+
<div
|
|
150
|
+
id="calculate-install"
|
|
151
|
+
class="border-bottom:1px_solid_lightgrey"
|
|
152
|
+
scroll
|
|
153
|
+
scroll-intersect="color:dodgerblue"
|
|
154
|
+
scroll-selector="#calculate-install-section">
|
|
155
|
+
<span
|
|
156
|
+
class="display:flex align-items:center width:fit-content"
|
|
157
|
+
hover="display:block!important"
|
|
158
|
+
hover-selector="[href='#calculate-install']">
|
|
159
|
+
<h2 class="padding:5px_0px">Install</h2>
|
|
160
|
+
<a
|
|
161
|
+
class="margin-left:10px display:none"
|
|
162
|
+
href="#calculate-install"
|
|
163
|
+
><i
|
|
164
|
+
class="height:20px fill:#505050"
|
|
165
|
+
src="/assets/svg/link.svg"></i
|
|
166
|
+
></a>
|
|
167
|
+
</span>
|
|
168
|
+
</div>
|
|
169
|
+
|
|
170
|
+
<pre><code class="language-bash">npm i @cocreate/calculate</code></pre>
|
|
171
|
+
<p class="padding:10px_0px line-height:1.5">
|
|
172
|
+
Or you can use cdn link:
|
|
173
|
+
</p>
|
|
174
|
+
<pre><code class="language-html"><script>https://cdn.cocreate.app/calculate/latest/CoCreate-calculate.min.js</script></code></pre>
|
|
175
|
+
|
|
176
|
+
<div
|
|
177
|
+
id="calculate-usage"
|
|
178
|
+
class="margin-top:80px border-bottom:1px_solid_lightgrey"
|
|
179
|
+
scroll
|
|
180
|
+
scroll-intersect="color:dodgerblue"
|
|
181
|
+
scroll-selector="#calculate-usage-section">
|
|
182
|
+
<span
|
|
183
|
+
class="display:flex align-items:center width:fit-content"
|
|
184
|
+
hover="display:block!important"
|
|
185
|
+
hover-selector="[href='#calculate-usage']">
|
|
186
|
+
<h2 class="padding:5px_0px">Usage</h2>
|
|
187
|
+
<a
|
|
188
|
+
class="margin-left:10px display:none"
|
|
189
|
+
href="#calculate-usage"
|
|
190
|
+
><i
|
|
191
|
+
class="height:20px fill:#505050"
|
|
192
|
+
src="/assets/svg/link.svg"></i
|
|
193
|
+
></a>
|
|
194
|
+
</span>
|
|
195
|
+
</div>
|
|
196
|
+
<div class="">
|
|
197
|
+
<p class="padding:10px_0px line-height:1.5">
|
|
198
|
+
This is calculate usage
|
|
199
|
+
</p>
|
|
200
|
+
|
|
201
|
+
<div class="flex-grow:1 min-width:300px width:100%">
|
|
202
|
+
<pre><code class="language-html"><div></div></code></pre>
|
|
203
|
+
</div>
|
|
204
|
+
<p class="padding:10px_0px line-height:1.5">
|
|
205
|
+
This is calculate usage
|
|
206
|
+
</p>
|
|
207
|
+
<p class="padding:10px_0px line-height:1.5">
|
|
208
|
+
This is calculate usage
|
|
209
|
+
</p>
|
|
210
|
+
</div>
|
|
211
|
+
|
|
212
|
+
<div
|
|
213
|
+
id="calculate-attributes"
|
|
214
|
+
class="margin-top:80px border-bottom:1px_solid_lightgrey"
|
|
215
|
+
scroll
|
|
216
|
+
scroll-intersect="color:dodgerblue"
|
|
217
|
+
scroll-selector="#calculate-attributes-section">
|
|
218
|
+
<span
|
|
219
|
+
class="display:flex align-items:center width:fit-content"
|
|
220
|
+
hover="display:block!important"
|
|
221
|
+
hover-selector="[href='#calculate-attributes']">
|
|
222
|
+
<h2 class="padding:5px_0px">Attributes</h2>
|
|
223
|
+
<a
|
|
224
|
+
class="margin-left:10px display:none"
|
|
225
|
+
href="#calculate-attributes"
|
|
226
|
+
><i
|
|
227
|
+
class="height:20px fill:#505050"
|
|
228
|
+
src="/assets/svg/link.svg"></i
|
|
229
|
+
></a>
|
|
230
|
+
</span>
|
|
231
|
+
</div>
|
|
232
|
+
<ul class="list-style-type:none">
|
|
233
|
+
<li
|
|
234
|
+
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
|
|
235
|
+
<h4>
|
|
236
|
+
<span>calculates</span>
|
|
237
|
+
<span class="cocreate-badge success"
|
|
238
|
+
>string</span
|
|
239
|
+
>
|
|
240
|
+
<span class="cocreate-badge warning"
|
|
241
|
+
>optional</span
|
|
242
|
+
>
|
|
243
|
+
</h4>
|
|
244
|
+
<p>calculate-attribute</p>
|
|
245
|
+
</li>
|
|
246
|
+
<li
|
|
247
|
+
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
|
|
248
|
+
<h4>
|
|
249
|
+
<span>calculates</span>
|
|
250
|
+
<span class="cocreate-badge success"
|
|
251
|
+
>string</span
|
|
252
|
+
>
|
|
253
|
+
<span class="cocreate-badge warning"
|
|
254
|
+
>optional</span
|
|
255
|
+
>
|
|
256
|
+
</h4>
|
|
257
|
+
<p>calculate-attribute</p>
|
|
258
|
+
</li>
|
|
259
|
+
</ul>
|
|
260
|
+
</div>
|
|
261
|
+
|
|
262
|
+
<div
|
|
263
|
+
class="flex-grow:1 width:300px padding:0px_10px margin-top:60px border-bottom:1px_solid_lightgrey">
|
|
264
|
+
<!-- SandBox -->
|
|
265
|
+
<div
|
|
266
|
+
id="calculate-demo"
|
|
267
|
+
class="border-bottom:1px_solid_lightgrey"
|
|
268
|
+
scroll
|
|
269
|
+
scroll-intersect="color:dodgerblue"
|
|
270
|
+
scroll-selector="#calculate-demo-section">
|
|
271
|
+
<span
|
|
272
|
+
class="display:flex align-items:center width:fit-content"
|
|
273
|
+
hover="display:block!important"
|
|
274
|
+
hover-selector="[href='#calculate-demo']">
|
|
275
|
+
<h2 class="padding:5px_0px">Demo</h2>
|
|
276
|
+
<a
|
|
277
|
+
class="margin-left:10px display:none"
|
|
278
|
+
href="#calculate-demo"
|
|
279
|
+
><i
|
|
280
|
+
class="height:20px fill:#505050"
|
|
281
|
+
src="/assets/svg/link.svg"></i
|
|
282
|
+
></a>
|
|
283
|
+
</span>
|
|
284
|
+
</div>
|
|
285
|
+
<div
|
|
286
|
+
class="position:sticky top:0 padding:15px_0px height:100vh">
|
|
287
|
+
<!-- SandBox -->
|
|
288
|
+
<div
|
|
289
|
+
class="display:flex flex-direction:column position:relative overflow:hidden card border-radius:2px width:auto height:600px margin-top:20px"
|
|
290
|
+
id="playground">
|
|
291
|
+
<div
|
|
292
|
+
id="demo-code"
|
|
293
|
+
resizable
|
|
294
|
+
class="position:relative height:50%">
|
|
295
|
+
<textarea
|
|
296
|
+
type="code"
|
|
297
|
+
lang="html"
|
|
298
|
+
array="demos"
|
|
299
|
+
object=""
|
|
300
|
+
key="demo"
|
|
301
|
+
save="false"
|
|
302
|
+
id="demo"
|
|
303
|
+
class="height:100% width:100% outline:none border:none resize:none padding:5px"></textarea>
|
|
304
|
+
<div
|
|
305
|
+
resize="bottom"
|
|
306
|
+
class="background:lightgrey"></div>
|
|
307
|
+
</div>
|
|
308
|
+
|
|
309
|
+
<div
|
|
310
|
+
id="demo-preview"
|
|
311
|
+
class="position:relative overflow:auto background-color:white">
|
|
312
|
+
<div class="demopreview padding:20px"></div>
|
|
313
|
+
</div>
|
|
314
|
+
|
|
315
|
+
<div
|
|
316
|
+
class="font-size:20px position:absolute top:10px right:10px opacity:0.6">
|
|
317
|
+
<a
|
|
318
|
+
class="margin-right:10px"
|
|
319
|
+
id="eye"
|
|
320
|
+
show="#eye-slash"
|
|
321
|
+
hide="#eye, #demo-preview"
|
|
322
|
+
toggle="code-height"
|
|
323
|
+
toggle-selector="#demo-code"
|
|
324
|
+
><i
|
|
325
|
+
class="height:18px fill:#505050"
|
|
326
|
+
src="/assets/svg/eye.svg"></i
|
|
327
|
+
></a>
|
|
328
|
+
<a
|
|
329
|
+
class="margin-right:10px"
|
|
330
|
+
hidden
|
|
331
|
+
id="eye-slash"
|
|
332
|
+
show="#eye, #demo-preview"
|
|
333
|
+
hide="#eye-slash"
|
|
334
|
+
toggle="code-height"
|
|
335
|
+
toggle-selector="#demo-code"
|
|
336
|
+
><i
|
|
337
|
+
class="height:20px fill:#505050"
|
|
338
|
+
src="/assets/svg/eye-slash.svg"></i
|
|
339
|
+
></a>
|
|
340
|
+
<a
|
|
341
|
+
class="margin-right:10px"
|
|
342
|
+
id="code"
|
|
343
|
+
show="#code-slash"
|
|
344
|
+
hide="#code, #demo-code"
|
|
345
|
+
><i
|
|
346
|
+
class="height:20px fill:#505050"
|
|
347
|
+
src="/assets/svg/code.svg"></i
|
|
348
|
+
></a>
|
|
349
|
+
<a
|
|
350
|
+
class="margin-right:10px"
|
|
351
|
+
hidden
|
|
352
|
+
id="code-slash"
|
|
353
|
+
show="#code, #demo-code"
|
|
354
|
+
hide="#code-slash"
|
|
355
|
+
><i
|
|
356
|
+
class="display:flex height:18px fill:#505050"
|
|
357
|
+
src="/assets/svg/code.svg"></i
|
|
358
|
+
></a>
|
|
359
|
+
<a
|
|
360
|
+
class="margin-right:5px"
|
|
361
|
+
fullscreen
|
|
362
|
+
fullscreen-selector="#playground"></a>
|
|
363
|
+
</div>
|
|
364
|
+
</div>
|
|
365
|
+
<!-- End SandBox -->
|
|
366
|
+
</div>
|
|
367
|
+
</div>
|
|
368
|
+
</div>
|
|
369
|
+
<button
|
|
370
|
+
href="https://github.com/CoCreate-app/CoCreate-calculate/tree/master/docs/index.html?message=docs%3A%20describe%20your%20change..."
|
|
371
|
+
target="_blank"
|
|
372
|
+
class="display:flex justify-content:center align-items:center position:fixed bottom:15px right:15px height:50px width:50px border-radius:50% box-shadow:0px_2px_10px_0px_rgba(0,_0,_0,_0.4)">
|
|
373
|
+
<i class="height:20px" src="../assets/svg/pencil-alt.svg"></i>
|
|
374
|
+
</button>
|
|
375
|
+
</main>
|
|
376
|
+
<script src="https://CoCreate.app/dist/CoCreate.js"></script>
|
|
377
|
+
</body>
|
|
378
|
+
</html>
|