@opensalt/ob3-definer 1.0.0

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.
Files changed (45) hide show
  1. package/.vscode/extensions.json +3 -0
  2. package/LICENSE +21 -0
  3. package/README.md +86 -0
  4. package/dist/favicon.svg +7 -0
  5. package/dist/index.html +20 -0
  6. package/dist/ob3-definer.css +1 -0
  7. package/dist/ob3-definer.js +32 -0
  8. package/formkit.config.js +27 -0
  9. package/index.html +19 -0
  10. package/jsconfig.json +8 -0
  11. package/package.json +35 -0
  12. package/public/favicon.svg +7 -0
  13. package/src/App.vue +19 -0
  14. package/src/assets/base.css +86 -0
  15. package/src/assets/main.css +24 -0
  16. package/src/assets/style.scss +33 -0
  17. package/src/components/AchievementCriteria.vue +78 -0
  18. package/src/components/AchievementDefiner.vue +212 -0
  19. package/src/components/AchievementImage.vue +116 -0
  20. package/src/components/AchievementType.vue +111 -0
  21. package/src/components/AdditionalTab.vue +32 -0
  22. package/src/components/AddressComponent.vue +118 -0
  23. package/src/components/AlignmentComponent.vue +141 -0
  24. package/src/components/AlignmentsComponent.vue +13 -0
  25. package/src/components/AlignmentsTab.vue +18 -0
  26. package/src/components/BasicTab.vue +55 -0
  27. package/src/components/CreatorProfile.vue +166 -0
  28. package/src/components/CriterionLevels.vue +97 -0
  29. package/src/components/DetailTab.vue +72 -0
  30. package/src/components/IndividualName.vue +63 -0
  31. package/src/components/MarkdownRenderer.vue +20 -0
  32. package/src/components/OtherIdentifiers.vue +116 -0
  33. package/src/components/RelatedList.vue +89 -0
  34. package/src/components/ResultDescription.vue +120 -0
  35. package/src/components/ResultType.vue +94 -0
  36. package/src/components/TagList.vue +121 -0
  37. package/src/components/ValueList.vue +144 -0
  38. package/src/inputs/innerLabelTextInput.js +62 -0
  39. package/src/inputs/innerLabelTextareaInput.js +57 -0
  40. package/src/inputs/selectInputGroup.js +76 -0
  41. package/src/main.js +50 -0
  42. package/src/stores/credential.js +292 -0
  43. package/test-index.html +17 -0
  44. package/trial-key +3 -0
  45. package/vite.config.js +39 -0
package/.vscode/extensions.json ADDED
@@ -0,0 +1,3 @@
1
+ {
2
+ "recommendations": ["Vue.volar"]
3
+ }
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2024 Public Consulting Group
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,86 @@
1
+ Open Badge v3 Definition Widget
2
+ ===============================
3
+
4
+ This widget provides a simple form to create an Open Badge v3 achievement
5
+ definition.
6
+
7
+
8
+ Usage
9
+ -----
10
+
11
+ The widget can be added to an HTML page by
12
+ 1. adding a div element as a placeholder (*ob3-definer* is the default id looked for)
13
+ 2. including the javascript and css files from the `dist` folder
14
+ 3. dispatching an `ob3-open` custom event
15
+ - Optionally one can pass a selector in the detail of the event to use a different
16
+ div than *#ob3-definer* (see example below)
17
+
18
+ The widget can be removed from the HTML page by dispatching an `ob3-close` event.
19
+
20
+ To edit an existing achievement definition, pass the definition as a
21
+ JSON string in an attribute called `data-achievement` on the placeholder
22
+ div or by adding the JSON (as a string or JSON object) to the detail of the
23
+ ob3-open event as the property `achievement`.
24
+
25
+ **Note** that the widget does not require the `id` field to be entered
26
+ in order for the widget to consider the definition *valid* as many use
27
+ cases will require specific types of ids (such as a known URL created
28
+ by the application that embeds the widget).
29
+
30
+
31
+ Custom Events
32
+ -------------
33
+
34
+ When the save button is clicked in the widget a `saveDefinition` event
35
+ will be triggered with the JSON representation of the achievement
36
+ definition as the detail of the event.
37
+
38
+ When a change is made to a field (and the field is blurred) a `changed`
39
+ event will be triggered with a JSON representation of the *possibly
40
+ invalid* achievement definition as it currently is entered as the detail
41
+ of the event. This is to allow "autosave" type features to exist in the
42
+ application using the widget.
43
+
44
+ When a change is made to a field (and the field is blurred) and the
45
+ definition is currently valid then an `updated` event will be triggered
46
+ with a JSON representation of the achievement definition as it currently
47
+ is entered as the detail of the event. This is to allow "autosave"
48
+ type features to exist in the application using the widget which expect
49
+ the contents to be a valid definition.
50
+
51
+ The widget is styled using Bootstrap v5 CSS. To avoid issues with
52
+ styling on the rest of the page, it is expected that the Bootstrap CSS
53
+ is loaded into the page and thus is not part of the stylesheet provided
54
+ with this widget.
55
+
56
+
57
+ Example
58
+ -------
59
+
60
+ Example web page with the widget:
61
+ ```html
62
+ <!DOCTYPE html>
63
+ <html lang="en">
64
+ <head>
65
+ <meta charset="UTF-8">
66
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
67
+ <title>Achievement Definition Widget</title>
68
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
69
+ <script type="module" crossorigin src="/ob3-definer.js"></script>
70
+ <link rel="stylesheet" crossorigin href="/ob3-definer.css">
71
+ </head>
72
+ <body>
73
+ <div id="ob3-definer" data-achievement='{}'></div>
74
+ <script>
75
+ document.addEventListener('DOMContentLoaded', () => {
76
+ window.dispatchEvent(new CustomEvent('ob3-open', {'detail': {'selector': '#ob3-definer'}})); // the detail payload here is optional
77
+ })
78
+ </script>
79
+ </body>
80
+ </html>
81
+ ```
82
+
83
+ Example JavaScript to capture the event:
84
+ ```js
85
+ window.addEventListener('saveDefinition', function(e) {console.log(e);})
86
+ ```
package/dist/favicon.svg ADDED
@@ -0,0 +1,7 @@
1
+ <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <g id="Layer_1">
3
+ <g id="favicon" stroke-width="0"/>
4
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M10.586 5.062l7.876 7.878-9.063 9.156-3.39-3.387 9.063-9.157-2.977-2.977-5.502 4.086 3.993 4.007-1.414 1.415-4.007-4.008-1.472 1.374 5.502 4.086 2.836-2.838 3.888 3.89z" fill="#58B4AE"/>
5
+ <path d="M3.324 18.981l3.389 3.389 9.787-9.924-3.39-3.388-9.786 9.923zM7.51 22.27l-2.977-2.977-.732.866 2.836 2.838 3.112-2.256-.473-.47-2.766 2.999.232.125.284-.125 1.382-.811z" fill="#95E1D3"/>
6
+ </g>
7
+ </svg>
package/dist/index.html ADDED
@@ -0,0 +1,20 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <link rel="icon" href="/favicon.svg">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>OB3 Achievement Definer</title>
8
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
9
+ <script type="module" crossorigin src="/ob3-definer.js"></script>
10
+ <link rel="stylesheet" crossorigin href="/ob3-definer.css">
11
+ </head>
12
+ <body>
13
+ <div id="ob3-definer"></div>
14
+ <script>
15
+ document.addEventListener('DOMContentLoaded', () => {
16
+ window.dispatchEvent(new CustomEvent('ob3-open'));
17
+ })
18
+ </script>
19
+ </body>
20
+ </html>
package/dist/ob3-definer.css ADDED
@@ -0,0 +1 @@
1
+ #cm-image-thumbnail[data-v-b6e26980]{max-width:200px;max-height:200px;object-fit:contain;margin-bottom:10px}[data-placeholder=true][data-v-3a8afa76]{color:#999}#criteria-preview[data-v-dd3ec837]{min-height:302px}#criteria-preview[data-v-2cf645b7]{min-height:250px}.value-item[data-v-d268d66c]{display:flex;align-items:start;margin-bottom:.5rem}.value-item[data-v-d268d66c] .formkit-outer{margin-bottom:0;flex-grow:1}.controls[data-v-d268d66c]{list-style-type:none;margin:0;padding:0;display:flex;align-items:center}.controls .button[data-v-d268d66c]{border:none;background:none;padding:0;margin:0;cursor:pointer;color:#999;line-height:1;transition:color .3s ease;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-size:1em;color:var(--fk-color-primary);margin-left:.5rem}.controls[data-v-d268d66c] svg{display:block;width:1em;max-height:1.25em;height:auto;fill:currentColor}.controls .close[data-v-d268d66c]{color:var(--fk-color-danger)}.value-item[data-v-cd88b606]{display:flex;align-items:start;margin-bottom:.5rem}.value-item[data-v-cd88b606] .formkit-outer{margin-bottom:0;flex-grow:1}.controls[data-v-cd88b606]{list-style-type:none;margin:0;padding:0;display:flex;align-items:center}.controls .button[data-v-cd88b606]{border:none;background:none;padding:0;margin:0;cursor:pointer;color:#999;line-height:1;transition:color .3s ease;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-size:1em;color:var(--fk-color-primary);margin-left:.5rem}.controls[data-v-cd88b606] svg{display:block;width:1em;max-height:1.25em;height:auto;fill:currentColor}.controls .close[data-v-cd88b606]{color:var(--fk-color-danger)}.input-group>.form-label{margin-bottom:0}.formkit-wrapper.required .form-label:before{color:red;content:"*";position:absolute;margin-left:-10px}[data-invalid=true] .form-control{border-color:#dc3545;padding-right:calc(1.5em + .75rem);background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right calc(.375em + .1875rem) center;background-size:calc(.75em + .375rem) calc(.75em + .375rem)}[data-invalid=true] .invalid-feedback{display:inline;width:100%;margin-top:.25rem;font-size:.875em;color:#dc3545}