@opensalt/ob3-definer 1.0.2 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opensalt/ob3-definer",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -24,6 +24,7 @@
     "@popperjs/core": "^2.11.8",
     "bootstrap": "^5.3.3",
     "markdown-it": "^14.1.0",
+    "uri-js": "^4.4.1",
     "uuid": "^10.0.0",
     "vue": "^3.4.29"
   },

package/src/App.vue

@@ -5,13 +5,17 @@ const props = defineProps({
   achievement: {
     type: String,
     default: ""
+  },
+  submitText: {
+    type: String,
+    default: "Save"
   }
 });
 </script>
 
 <template>
   <div class="container">
-    <AchievementDefiner :achievement="achievement"/>
+    <AchievementDefiner :achievement="achievement" :submit-text="submitText"/>
   </div>
 </template>
 

package/src/components/AchievementDefiner.vue

@@ -9,6 +9,10 @@ const props = defineProps({
   achievement: {
     type: String,
     default: ""
+  },
+  submitText: {
+    type: String,
+    default: "Save"
   }
 });
 const emit = defineEmits(['saveDefinition']);
@@ -93,6 +97,10 @@ function removeEmpty(obj) {
 }
 
 function save(formData) {
+  if (!formData.image.id) {
+    formData.image = null;
+  }
+  //console.log('formData', formData);
   const cleaned = removeEmpty(formData);
   //emit('saveDefinition', cleaned);
   const formEl = document.getElementById(form.value.node.props.id);
@@ -179,7 +187,7 @@ function showErrors(node) {
             v-show="tab === 'additional'"
         />
 
-        <button class="btn btn-primary float-end mt-5" type="submit" :disabled="false">Save</button>
+        <button class="btn btn-primary float-end mt-5" type="submit" :disabled="false">{{ submitText }}</button>
       </FormKit>
     </div>
   </div>

package/src/components/AchievementImage.vue

@@ -1,5 +1,6 @@
 <script setup>
-import {onBeforeMount, onMounted, ref, watch} from "vue";
+import {onBeforeMount, ref, watch} from "vue";
+import { getNode } from "@formkit/core";
 
 const props = defineProps({
   help: {
@@ -8,37 +9,47 @@ const props = defineProps({
   }
 })
 
-const model = defineModel({ default: { id: '', type: 'Image', caption: ''} });
+const model = defineModel({ default: { id: '', type: '', caption: ''} });
 const emit = defineEmits(['update:modelValue']);
 const image = ref('');
 const caption = ref('');
+const id = ref('');
 
 onBeforeMount(() => {
-  // console.log('Mounted', model.value);
-  image.value = model.value.id || null;
+  id.value = model.value.id || null;
   caption.value = model.value.caption || null;
-})
+  if (id.value) {
+    model.value.type = 'Image';
+  }
+});
 
 watch(caption, (newCaption) => {
   // console.log('watching caption', newCaption);
   model.value.caption = newCaption;
-  emit('update:modelValue', model.value);
 });
 
+watch(id, (newId) => {
+  // console.log('watching id', newId);
+  model.value.id = newId;
+  model.value.type = newId ? 'Image' : null;
+  model.value.caption = newId ? caption.value : null;
+})
+
 watch(image, (newImage) => {
-  // console.log('watching', newImage);
-  model.value.id = newImage;
-  model.value.type = newImage ? 'Image' : null;
-  emit('update:modelValue', model.value);
+  // console.log('watching image', newImage);
+  if (!newImage) {
+    return;
+  }
+
+  id.value = newImage;
 });
 
 function handleImage(e) {
-  // console.log('handle image');
+  // console.log('handle image', e);
 
   if (0 === Object.keys(e).length) {
     // console.log('no keys');
     image.value = null;
-    caption.value = null;
 
     return;
   }
@@ -46,11 +57,11 @@ function handleImage(e) {
   const file = e[0].file;
   const reader = new FileReader();
 
-  reader.onerror = (e) => {
+  reader.onerror = (err) => {
     // console.log('image error');
     image.value = null;
   };
-  reader.onload = (e) => {
+  reader.onload = (evt) => {
     // Use the loaded image data to set the badgeImage
     image.value = reader.result;
     // console.log('onload');
@@ -61,6 +72,10 @@ function handleImage(e) {
 
       return false;
     }
+
+    let f = getNode('ob3-file-upload-input');
+    // console.log(f);
+    f.context.handlers.resetFiles(evt);
   };
 
   try {
@@ -73,37 +88,73 @@ function handleImage(e) {
 </script>
 
 <template>
-  <FormKit
-    type="group"
-    ignore="true"
-  >
-    <FormKit
-      label="Image"
-      type="file"
-      accept="image/png, image/svg+xml"
-      :help="props.help"
-      inner-class=""
-      @input="handleImage"
-      ignore="true"
-    >
-      <template #fileList></template>
-      <template #suffix>
-        <figure class="figure ms-3 mt-2" v-show="image">
-          <img :src="image" alt="Image preview" class="img-thumbnail figure-img img-fluid rounded" id="cm-image-thumbnail" v-show="image">
+  <div class="card mb-3">
+    <div class="card-header">
+      Image for the Credential
+    </div>
+    <div class="card-body">
+      <FormKit
+        type="group"
+        name="image"
+      >
+        <div class="row">
+          <div class="col-md-8">
+            <FormKit
+                label="ID"
+                type="innerLabelTextInput"
+                v-model="id"
+                name="id"
+                :help="props.help+' Can be a URL or data URI.'"
+                inner-class="input-group"
+                label-class="input-group-text"
+                validation="uri"
+                :validation-messages="{
+                    uri: 'Please enter a valid URL or upload an image.'
+                }"
+            />
+            <FormKit
+                type="hidden"
+                name="type"
+                value="Image"
+            />
+          </div>
+          <div class="col-md-4">
+            <FormKit
+                label="Upload Image"
+                type="file"
+                id="ob3-file-upload-input"
+                accept="image/png, image/svg+xml"
+                inner-class="d-none"
+                label-class="btn btn-secondary"
+                help="You can upload an image to save it as a data URI."
+                @input="handleImage"
+                ignore="true"
+            >
+              <template #fileList></template>
+              <template #noFiles></template>
+            </FormKit>
+          </div>
+        </div>
+
+        <FormKit
+            label="Caption"
+            type="innerLabelTextInput"
+            v-model="caption"
+            name="caption"
+            help="A caption for the image."
+            inner-class="input-group"
+            label-class="input-group-text"
+            v-show="id"
+        />
+
+        <figure class="figure ms-3 mt-2" v-show="id">
+          <img :src="id" alt="Image preview" class="img-thumbnail figure-img img-fluid rounded" id="cm-image-thumbnail">
           <figcaption class="figure-caption text-center">Image preview</figcaption>
         </figure>
-      </template>
-    </FormKit>
-
-    <FormKit
-      label="Image Caption"
-      type="text"
-      v-model="caption"
-      help="A caption for the image."
-      v-show="image"
-      ignore="true"
-    />
-  </FormKit>
+
+      </FormKit>
+    </div>
+  </div>
 </template>
 
 <style scoped>

package/src/components/AdditionalTab.vue

@@ -14,6 +14,7 @@ const model = defineModel({ default: {} });
       name="id"
       label="ID"
       v-model="model.id"
+      validation="uri:trim"
       help="Unique URI for the Achievement."
       />
 

package/src/components/CreatorProfile.vue

@@ -9,7 +9,7 @@ const creatorIs=ref('noCreator');
 
 onBeforeMount(() => {
   if (Object.keys(creator.value).length === 0) {
-    creator.value = 'noCreator';
+    creatorIs.value = 'noCreator';
 
     return;
   }
@@ -32,10 +32,10 @@ onBeforeMount(() => {
           v-model="creatorIs"
           input-class="$reset formkit-input form-select"
           :options="{
-          noCreator: 'Do not add a creator field',
-          organization: 'The creator is an Organization',
-          individual: 'The creator is a Person',
-      }"
+              noCreator: 'Do not add a creator field',
+              organization: 'The creator is an Organization',
+              individual: 'The creator is a Person',
+          }"
           ignore="true"
       />
     </h5>
@@ -52,7 +52,7 @@ onBeforeMount(() => {
           label="ID"
           name="id"
           wrapper-class="required"
-          validation="required:trim"
+          validation="uri:required:trim"
           help="Unique URI for the creator."
           />
 

package/src/components/RelatedList.vue

@@ -54,7 +54,7 @@ watch(related, (newRelated) => {
               inner-class="input-group"
               label-class="input-group-text"
               wrapper-class="required"
-              validation="required:trim"
+              validation="uri:required:trim"
               help="The URI of the related achievement."
           />
 

package/src/components/ResultDescription.vue

@@ -3,6 +3,7 @@ import AlignmentComponent from "@/components/AlignmentComponent.vue";
 import ValueList from "@/components/ValueList.vue";
 import CriterionLevels from "@/components/CriterionLevels.vue";
 import ResultType from "@/components/ResultType.vue";
+import { v4 as uuidV4 } from "uuid";
 
 const results = defineModel({ default: [] });
 </script>
@@ -16,7 +17,7 @@ const results = defineModel({ default: [] });
       dynamic
   >
     <h5 class="mb-4">Result Descriptions
-      <button type="button" @click="() => node.input(value.concat({}))" class="btn btn-sm btn-primary ms-3">
+      <button type="button" @click="() => node.input(value.concat({id: 'urn:uuid:'+uuidV4()}))" class="btn btn-sm btn-primary ms-3">
         Add Result Description
       </button>
     </h5>
@@ -43,7 +44,7 @@ const results = defineModel({ default: [] });
               inner-class="input-group"
               label-class="input-group-text"
               wrapper-class="required"
-              validation="required:trim"
+              validation="uri:required:trim"
               help="The unique URI for this result description. Required so a result can link to this result description."
           />
 

package/src/main.js

@@ -10,6 +10,7 @@ import customConfig from '../formkit.config.js';
 import { innerLabelTextInput } from '@/inputs/innerLabelTextInput.js';
 import { innerLabelTextareaInput } from '@/inputs/innerLabelTextareaInput.js';
 import { selectInputGroup } from '@/inputs/selectInputGroup.js';
+import uri from "@/validation/uri.js";
 
 const createDefiner = (el, props) => {
     const app = createApp(App, props);
@@ -20,6 +21,9 @@ const createDefiner = (el, props) => {
             innerLabelTextareaInput,
             selectInputGroup,
         },
+        rules: {
+            uri,
+        },
     }));
     return app;
 }
@@ -39,6 +43,9 @@ window.addEventListener('ob3-open', function(event) {
             props.achievement = JSON.stringify(event.detail.achievement);
         }
     }
+    if (event.detail?.submitText) {
+        props.submitText = event.detail.submitText;
+    }
     const app = createDefiner(selector, props);
     app.mount(selector);
     window.addEventListener('ob3-close', function close() {

package/src/validation/uri.js

@@ -0,0 +1,13 @@
+import * as URI from 'uri-js'
+
+const uri = function (node) {
+    try {
+        const checkUri = URI.parse(node.value, {reference: 'absolute', absolutePath: true});
+
+        return !checkUri.error;
+    } catch (e) {
+        return false;
+    }
+}
+
+export default uri