@pictogrammers/components 0.3.2 → 0.4.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/README.md +11 -12
- package/favicon.svg +20 -0
- package/index.html +67 -49
- package/main.js +2 -0
- package/main.js.LICENSE.txt +10 -0
- package/package.json +6 -6
- package/pg/annoy/README.md +0 -5
- package/pg/annoy/__examples__/basic/basic.css +3 -0
- package/pg/annoy/__examples__/basic/basic.html +4 -7
- package/pg/annoy/__examples__/basic/basic.ts +3 -1
- package/pg/annoy/annoy.css +29 -198
- package/pg/annoy/annoy.html +5 -56
- package/pg/annoy/annoy.ts +4 -25
- package/pg/app/README.md +11 -0
- package/pg/app/__examples__/basic/basic.css +8 -0
- package/pg/app/__examples__/basic/basic.html +15 -0
- package/pg/app/__examples__/basic/basic.ts +13 -0
- package/pg/app/app.css +111 -0
- package/pg/app/app.html +16 -0
- package/pg/app/app.ts +45 -0
- package/pg/app/index.ts +3 -0
- package/pg/avatar/__examples__/basic/basic.ts +5 -3
- package/pg/button/README.md +3 -0
- package/pg/button/button.css +13 -12
- package/pg/button/button.spec.ts +35 -0
- package/pg/button/button.ts +17 -12
- package/pg/buttonLink/buttonLink.css +3 -2
- package/pg/buttonMenu/README.md +54 -0
- package/pg/buttonMenu/__examples__/basic/basic.html +6 -0
- package/pg/buttonMenu/__examples__/basic/basic.ts +43 -0
- package/pg/buttonMenu/buttonMenu.css +12 -0
- package/pg/buttonMenu/buttonMenu.html +4 -0
- package/pg/buttonMenu/buttonMenu.ts +63 -0
- package/pg/buttonMenu/index.ts +3 -0
- package/pg/buttonToggle/__examples__/basic/basic.ts +2 -2
- package/pg/buttonToggle/__examples__/persist/persist.html +10 -0
- package/pg/buttonToggle/__examples__/persist/persist.ts +35 -0
- package/pg/cardUser/__examples__/basic/basic.ts +0 -1
- package/pg/cardUser/cardUser.css +2 -10
- package/pg/cardUser/cardUser.html +0 -5
- package/pg/cardUser/cardUser.ts +0 -6
- package/pg/database/README.md +1 -1
- package/pg/database/__examples__/basic/basic.html +2 -1
- package/pg/database/__examples__/basic/basic.ts +3 -3
- package/pg/dropdown/dropdown.ts +0 -19
- package/pg/grid/__examples__/basic/basic.html +2 -2
- package/pg/grid/__examples__/basic/basic.ts +3 -2
- package/pg/grid/grid.ts +0 -1
- package/pg/icon/README.md +6 -5
- package/pg/icon/__examples__/basic/basic.html +2 -2
- package/pg/icon/__examples__/basic/basic.ts +1 -1
- package/pg/icon/icon.ts +6 -0
- package/pg/inputCheckList/__examples__/basic/basic.ts +5 -5
- package/pg/inputCheckList/inputCheckList.ts +2 -0
- package/pg/inputFileLocal/inputFileLocal.css +3 -2
- package/pg/inputPixelEditor/README.md +132 -0
- package/pg/inputPixelEditor/__examples__/basic/basic.css +29 -0
- package/pg/inputPixelEditor/__examples__/basic/basic.html +63 -0
- package/pg/inputPixelEditor/__examples__/basic/basic.ts +200 -0
- package/pg/inputPixelEditor/__examples__/basic/openUtils.ts +41 -0
- package/pg/inputPixelEditor/__examples__/basic/saveUtil.ts +35 -0
- package/pg/inputPixelEditor/index.ts +3 -0
- package/pg/inputPixelEditor/inputPixelEditor.css +27 -0
- package/pg/inputPixelEditor/inputPixelEditor.html +3 -0
- package/pg/inputPixelEditor/inputPixelEditor.ts +859 -0
- package/pg/inputPixelEditor/utils/bitmapToMask.ts +202 -0
- package/pg/inputPixelEditor/utils/cloneGrid.ts +17 -0
- package/pg/inputPixelEditor/utils/constants.ts +1 -0
- package/pg/inputPixelEditor/utils/createLayer.ts +8 -0
- package/pg/inputPixelEditor/utils/debounce.ts +5 -0
- package/pg/inputPixelEditor/utils/diffGrid.ts +26 -0
- package/pg/inputPixelEditor/utils/fillGrid.ts +11 -0
- package/pg/inputPixelEditor/utils/getEllipseOutlinePixels.ts +105 -0
- package/pg/inputPixelEditor/utils/getEllipsePixels.ts +28 -0
- package/pg/inputPixelEditor/utils/getGuides.ts +232 -0
- package/pg/inputPixelEditor/utils/getLinePixels.ts +18 -0
- package/pg/inputPixelEditor/utils/getRectangleOutlinePixels.ts +20 -0
- package/pg/inputPixelEditor/utils/getRectanglePixels.ts +15 -0
- package/pg/inputPixelEditor/utils/inputMode.ts +8 -0
- package/pg/inputPixelEditor/utils/interateGrid.ts +7 -0
- package/pg/inputPixelEditor/utils/isEmptyGrid.ts +3 -0
- package/pg/inputPixelEditor/utils/maskToBitmap.ts +66 -0
- package/pg/inputRange/__examples__/basic/basic.ts +4 -4
- package/pg/inputRange/inputRange.ts +6 -4
- package/pg/inputSelect/README.md +1 -1
- package/pg/inputSelect/__examples__/basic/basic.ts +7 -5
- package/pg/inputSelect/inputSelect.css +15 -12
- package/pg/inputSelect/inputSelect.html +3 -3
- package/pg/inputSelect/inputSelect.ts +33 -30
- package/pg/inputText/__examples__/basic/basic.ts +6 -6
- package/pg/inputText/inputText.css +1 -0
- package/pg/inputUserSelect/README.md +1 -1
- package/pg/inputUserSelect/inputUserSelect.ts +1 -1
- package/pg/listTag/__examples__/basic/basic.ts +4 -5
- package/pg/markdown/README.md +17 -3
- package/pg/markdown/__examples__/basic/basic.ts +2 -2
- package/pg/markdown/__examples__/basic/constants.ts +1 -1
- package/pg/markdown/markdown.css +16 -1
- package/pg/menu/README.md +46 -0
- package/pg/menu/__examples__/basic/basic.html +6 -0
- package/pg/menu/__examples__/basic/basic.ts +46 -0
- package/pg/menu/index.ts +3 -0
- package/pg/menu/menu.css +19 -0
- package/pg/menu/menu.html +1 -0
- package/pg/menu/menu.ts +119 -0
- package/pg/menuDivider/README.md +7 -0
- package/pg/menuDivider/__examples__/basic/basic.html +3 -0
- package/pg/menuDivider/__examples__/basic/basic.ts +28 -0
- package/pg/menuDivider/index.ts +3 -0
- package/pg/menuDivider/menuDivider.css +9 -0
- package/pg/menuDivider/menuDivider.html +1 -0
- package/pg/menuDivider/menuDivider.ts +22 -0
- package/pg/menuIcon/menuIcon.ts +43 -36
- package/pg/menuItem/README.md +32 -0
- package/pg/menuItem/__examples__/basic/basic.html +26 -0
- package/pg/menuItem/__examples__/basic/basic.ts +41 -0
- package/pg/menuItem/index.ts +3 -0
- package/pg/menuItem/menuItem.css +97 -0
- package/pg/menuItem/menuItem.html +1 -0
- package/pg/menuItem/menuItem.ts +77 -0
- package/pg/menuItemIcon/README.md +32 -0
- package/pg/menuItemIcon/__examples__/basic/basic.html +34 -0
- package/pg/menuItemIcon/__examples__/basic/basic.ts +55 -0
- package/pg/menuItemIcon/index.ts +3 -0
- package/pg/menuItemIcon/menuItemIcon.css +106 -0
- package/pg/menuItemIcon/menuItemIcon.html +4 -0
- package/pg/menuItemIcon/menuItemIcon.ts +156 -0
- package/pg/modalAlert/__examples__/basic/basic.ts +1 -1
- package/pg/modalAlert/modalAlert.css +1 -4
- package/pg/modalAlert/modalAlert.ts +18 -4
- package/pg/modification/__examples__/basic/basic.ts +1 -2
- package/pg/modification/__examples__/basic/constants.ts +25 -50
- package/pg/modification/modification.ts +1 -1
- package/pg/overlay/overlay.ts +13 -12
- package/pg/overlayContextMenu/README.md +35 -0
- package/pg/overlayContextMenu/__examples__/basic/basic.css +23 -0
- package/pg/overlayContextMenu/__examples__/basic/basic.html +7 -0
- package/pg/overlayContextMenu/__examples__/basic/basic.ts +87 -0
- package/pg/overlayContextMenu/index.ts +3 -0
- package/pg/overlayContextMenu/overlayContextMenu.css +16 -0
- package/pg/overlayContextMenu/overlayContextMenu.html +3 -0
- package/pg/overlayContextMenu/overlayContextMenu.ts +98 -0
- package/pg/overlayMenu/README.md +33 -0
- package/pg/overlayMenu/__examples__/basic/basic.css +3 -0
- package/pg/overlayMenu/__examples__/basic/basic.html +5 -0
- package/pg/overlayMenu/__examples__/basic/basic.ts +62 -0
- package/pg/overlayMenu/index.ts +3 -0
- package/pg/overlayMenu/overlayMenu.css +16 -0
- package/pg/overlayMenu/overlayMenu.html +3 -0
- package/pg/overlayMenu/overlayMenu.ts +67 -0
- package/pg/overlaySelectMenu/README.md +33 -0
- package/pg/overlaySelectMenu/__examples__/basic/basic.css +3 -0
- package/pg/overlaySelectMenu/__examples__/basic/basic.html +5 -0
- package/pg/overlaySelectMenu/__examples__/basic/basic.ts +62 -0
- package/pg/overlaySelectMenu/index.ts +3 -0
- package/pg/overlaySelectMenu/overlaySelectMenu.css +17 -0
- package/pg/overlaySelectMenu/overlaySelectMenu.html +3 -0
- package/pg/overlaySelectMenu/overlaySelectMenu.ts +96 -0
- package/pg/overlaySubMenu/README.md +35 -0
- package/pg/overlaySubMenu/index.ts +3 -0
- package/pg/overlaySubMenu/overlaySubMenu.css +27 -0
- package/pg/overlaySubMenu/overlaySubMenu.html +3 -0
- package/pg/overlaySubMenu/overlaySubMenu.ts +103 -0
- package/pg/picker/picker.ts +1 -19
- package/pg/scroll/__examples__/basic/basic.ts +1 -1
- package/pg/search/__examples__/basic/basic.ts +10 -7
- package/pg/search/search.css +2 -2
- package/pg/shared/models/user.ts +0 -2
- package/pg/tab/tab.ts +0 -10
- package/pg/tabs/partials/tab.css +42 -0
- package/pg/tabs/partials/tab.ts +70 -0
- package/pg/tabs/tabs.css +0 -53
- package/pg/tabs/tabs.ts +54 -70
- package/pg/toast/README.md +35 -6
- package/pg/toast/__examples__/basic/basic.html +7 -0
- package/pg/toast/__examples__/basic/basic.ts +76 -0
- package/pg/toast/toast.css +3 -0
- package/pg/toast/toast.ts +20 -4
- package/pg/tooltip/addTooltip.ts +3 -1
- package/pg/tooltip/tooltip.ts +1 -1
- package/pg/tree/README.md +67 -0
- package/pg/tree/__examples__/basic/basic.html +10 -0
- package/pg/tree/__examples__/basic/basic.ts +162 -0
- package/pg/tree/index.ts +5 -0
- package/pg/tree/tree.css +28 -0
- package/pg/tree/tree.html +1 -0
- package/pg/tree/tree.ts +217 -0
- package/pg/treeButtonIcon/README.md +39 -0
- package/pg/treeButtonIcon/index.ts +3 -0
- package/pg/treeButtonIcon/treeButtonIcon.css +18 -0
- package/pg/treeButtonIcon/treeButtonIcon.html +3 -0
- package/pg/treeButtonIcon/treeButtonIcon.ts +42 -0
- package/pg/treeItem/README.md +3 -0
- package/pg/treeItem/index.ts +3 -0
- package/pg/treeItem/treeItem.css +263 -0
- package/pg/treeItem/treeItem.html +16 -0
- package/pg/treeItem/treeItem.ts +558 -0
- package/pgAnnoy.js +1 -0
- package/pgApp.js +1 -0
- package/pgAvatar.js +1 -0
- package/pgButton.js +1 -0
- package/pgButtonGroup.js +1 -0
- package/pgButtonLink.js +1 -0
- package/pgButtonMenu.js +1 -0
- package/pgButtonToggle.js +1 -0
- package/pgCard.js +1 -0
- package/pgCardUser.js +1 -0
- package/pgColor.js +1 -0
- package/pgDatabase.js +1 -0
- package/pgDropdown.js +1 -0
- package/pgGrid.js +1 -0
- package/pgHeader.js +1 -0
- package/pgIcon.js +1 -0
- package/pgInputCheck.js +1 -0
- package/pgInputCheckList.js +1 -0
- package/pgInputFileLocal.js +1 -0
- package/pgInputHexRgb.js +1 -0
- package/pgInputPixelEditor.js +1 -0
- package/pgInputRange.js +1 -0
- package/pgInputSelect.js +1 -0
- package/pgInputText.js +1 -0
- package/pgInputTextIcon.js +1 -0
- package/pgInputUserSelect.js +1 -0
- package/pgListTag.js +1 -0
- package/pgMarkdown.js +2 -0
- package/pgMarkdown.js.LICENSE.txt +10 -0
- package/pgMenu.js +1 -0
- package/pgMenuDivider.js +1 -0
- package/pgMenuIcon.js +1 -0
- package/pgMenuItem.js +1 -0
- package/pgMenuItemIcon.js +1 -0
- package/pgModalAlert.js +1 -0
- package/pgModification.js +1 -0
- package/pgNav.js +1 -0
- package/pgOverlay.js +1 -0
- package/pgOverlayContextMenu.js +1 -0
- package/pgOverlayMenu.js +1 -0
- package/pgOverlaySelectMenu.js +1 -0
- package/pgOverlaySubMenu.js +1 -0
- package/pgPicker.js +1 -0
- package/pgPreview.js +1 -0
- package/pgScroll.js +1 -0
- package/pgSearch.js +1 -0
- package/pgTab.js +1 -0
- package/pgTabs.js +1 -0
- package/pgToast.js +1 -0
- package/pgToasts.js +1 -0
- package/pgTooltip.js +1 -0
- package/pgTree.js +1 -0
- package/pgTreeButtonIcon.js +1 -0
- package/pgTreeItem.js +1 -0
- package/theme-ui3.css +31 -0
- package/@types/css.d.ts +0 -4
- package/@types/html.d.ts +0 -4
- package/dist/main.js +0 -3819
- package/dist/pgAnnoy.js +0 -116
- package/dist/pgAvatar.js +0 -136
- package/dist/pgButton.js +0 -116
- package/dist/pgButtonGroup.js +0 -116
- package/dist/pgButtonLink.js +0 -116
- package/dist/pgButtonToggle.js +0 -146
- package/dist/pgCard.js +0 -116
- package/dist/pgCardUser.js +0 -196
- package/dist/pgColor.js +0 -136
- package/dist/pgDatabase.js +0 -236
- package/dist/pgDropdown.js +0 -686
- package/dist/pgGrid.js +0 -126
- package/dist/pgHeader.js +0 -116
- package/dist/pgIcon.js +0 -116
- package/dist/pgInputCheck.js +0 -116
- package/dist/pgInputCheckList.js +0 -126
- package/dist/pgInputFileLocal.js +0 -116
- package/dist/pgInputHexRgb.js +0 -126
- package/dist/pgInputRange.js +0 -116
- package/dist/pgInputSelect.js +0 -116
- package/dist/pgInputText.js +0 -116
- package/dist/pgInputTextIcon.js +0 -176
- package/dist/pgInputUserSelect.js +0 -116
- package/dist/pgListTag.js +0 -136
- package/dist/pgMarkdown.js +0 -346
- package/dist/pgMenuIcon.js +0 -206
- package/dist/pgModalAlert.js +0 -126
- package/dist/pgModification.js +0 -396
- package/dist/pgNav.js +0 -116
- package/dist/pgOverlay.js +0 -96
- package/dist/pgPicker.js +0 -116
- package/dist/pgPreview.js +0 -116
- package/dist/pgScroll.js +0 -266
- package/dist/pgSearch.js +0 -146
- package/dist/pgTab.js +0 -116
- package/dist/pgTabs.js +0 -136
- package/dist/pgToast.js +0 -136
- package/dist/pgToasts.js +0 -136
- package/dist/pgTooltip.js +0 -126
package/README.md
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Pictogrammers - Components
|
|
2
2
|
|
|
3
|
-
> Note this repo is for the components used in
|
|
3
|
+
> Note this repo is for the components used in various Pictogrammers apps. If you are looking for icon related components for your own project look here:
|
|
4
4
|
>
|
|
5
5
|
> - [React](https://github.com/Templarian/MaterialDesign-React/)
|
|
6
6
|
> - [Web Component](https://github.com/Templarian/MaterialDesign-WebComponent/)
|
|
7
7
|
|
|
8
|
-
|
|
8
|
+
Components here are in various stages of development, view the `src/pg` folder to see the source.
|
|
9
9
|
|
|
10
|
-
- [View the Components](https://
|
|
10
|
+
- [View the Components](https://pictogrammers.github.io/@pictogrammers/components/)
|
|
11
11
|
|
|
12
12
|
## Contribute to this Project
|
|
13
13
|
|
|
@@ -15,14 +15,13 @@ To run the demo application locally use the following NPM commands.
|
|
|
15
15
|
|
|
16
16
|
```bash
|
|
17
17
|
npm install
|
|
18
|
-
npm test
|
|
19
18
|
npm start
|
|
20
|
-
# npm start [pgButton|pg-button]
|
|
19
|
+
# npm start [pgButton|pg-button, ...]
|
|
21
20
|
```
|
|
22
21
|
|
|
23
|
-
Open http://localhost:
|
|
22
|
+
Open http://localhost:3000 (port could vary)
|
|
24
23
|
|
|
25
|
-
To build
|
|
24
|
+
To build the components.
|
|
26
25
|
|
|
27
26
|
```bash
|
|
28
27
|
npm run build
|
|
@@ -30,7 +29,7 @@ npm run build
|
|
|
30
29
|
|
|
31
30
|
## Publish
|
|
32
31
|
|
|
33
|
-
This project does not use the normal `npm publish`. Always run the script.
|
|
32
|
+
This project does not use the normal `npm publish`. Always run the script to build individual components.
|
|
34
33
|
|
|
35
34
|
```bash
|
|
36
35
|
npm run publish
|
|
@@ -38,12 +37,12 @@ npm run publish
|
|
|
38
37
|
|
|
39
38
|
### Web Components
|
|
40
39
|
|
|
41
|
-
Web Components with a very basic wrapper. The only magic is...
|
|
40
|
+
Web Components with a [very basic wrapper](https://github.com/Pictogrammers/Element/). The only magic is...
|
|
42
41
|
|
|
43
42
|
- `@Prop() foo = 'Hello World`;
|
|
44
43
|
- Calls `this.render()` on change.
|
|
45
44
|
- `@Part() $foo: HTMLDivElement;` = `<div part="foo"></div>`
|
|
46
45
|
- `this.$part.innerText = 'Hello World!';`
|
|
47
|
-
- `@Local('
|
|
46
|
+
- `@Local('store') foo = Map([['key', true]]);` Shorthand for localStorage.
|
|
48
47
|
|
|
49
|
-
Learn More: https://github.com/
|
|
48
|
+
Learn More: https://github.com/Pictogrammers/Element
|
package/favicon.svg
ADDED
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">
|
|
2
|
+
<style>
|
|
3
|
+
#main {
|
|
4
|
+
fill: #FFFFFF;
|
|
5
|
+
}
|
|
6
|
+
#square {
|
|
7
|
+
fill: #453C4F;
|
|
8
|
+
}
|
|
9
|
+
@media (prefers-color-scheme: dark) {
|
|
10
|
+
#main {
|
|
11
|
+
fill: #453C4F;
|
|
12
|
+
}
|
|
13
|
+
#square {
|
|
14
|
+
fill: #FFFFFF;
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
</style>
|
|
18
|
+
<rect id="square" x="2" y="2" width="60" height="60" rx="6" fill-opacity="0.9"/>
|
|
19
|
+
<path id="main" d="M 8,0L 56,0C 60.4183,0 64,3.58173 64,8L 64,56C 64,60.4183 60.4183,64 56,64L 8,64C 3.58172,64 0,60.4183 0,56L 0,8C 0,3.58173 3.58172,0 8,0 Z M 8,44.0001L 14,44.0001L 14,32.0001L 20,32.0001C 26.6274,32.0001 32,26.6275 32,20.0001C 32,13.3726 26.6274,8.00006 20,8.00006L 8,8.00003L 8,44.0001 Z M 20,26.0003L 14,26.0003L 14,14.0003L 20,14.0003C 23.3137,14.0003 26,16.6866 26,20.0003C 26,23.314 23.3137,26.0003 20,26.0003 Z M 44,44.0001L 45.9999,44.0003C 48.2091,44.0003 49.9999,42.2094 49.9999,40.0003L 50,44.0001C 50,49.5231 45.5228,54.0002 40,54.0002C 36.085,54.0002 32.6955,51.7505 31.0537,48.4732L 25.686,51.1571C 28.3128,56.4006 33.736,60.0002 40,60.0002C 48.8365,60.0002 56,52.8368 56,44.0001L 56,24.0001C 56,21.791 54.2092,20.0001 52,20.0001L 44,20.0001C 37.3726,20.0001 32,25.3727 32,32.0001C 32,38.6275 37.3726,44.0001 44,44.0001 Z M 50,26L 49.9999,38.0001L 44,38C 40.6863,38 38,35.3137 38,32C 38,28.6863 40.6863,26 44,26L 50,26 Z"/>
|
|
20
|
+
</svg>
|