@opensalt/ob3-definer 1.0.0

package/src/components/AchievementType.vue

@@ -0,0 +1,111 @@
+<script setup>
+import {onMounted, ref, watch} from "vue";
+
+const model = defineModel({ default: ''});
+const achievementType = ref('');
+const typeExt = ref('');
+
+onMounted(() => {
+  if (model.value && model.value.substring(0, 4) === 'ext:') {
+    achievementType.value = 'other';
+    typeExt.value = model.value.substring(4);
+
+    return;
+  }
+
+  achievementType.value = model.value ? model.value : '';
+  typeExt.value = '';
+});
+
+watch(achievementType, (value) => {
+  if (value === 'other') {
+    model.value = 'ext:'+typeExt.value;
+
+    return;
+  }
+
+  model.value = value;
+});
+
+watch(typeExt, (value) => {
+  if (achievementType.value === 'other') {
+    model.value = 'ext:'+value;
+
+    return;
+  }
+
+  model.value = achievementType.value;
+});
+</script>
+
+<template>
+  <FormKit
+      type="select"
+      label="Credential Type"
+      v-model="achievementType"
+      name="achievementType"
+      input-class="$reset formkit-input form-select"
+      inner-class=""
+      placeholder="Select the Credential Type"
+      help="The type of the credential"
+      :options="{
+        '': 'Select the Credential Type',
+        'Achievement': 'Achievement',
+        'ApprenticeshipCertificate': 'Apprenticeship Certificate',
+        'Assessment': 'Assessment',
+        'Assignment': 'Assignment',
+        'AssociateDegree': 'Associate Degree',
+        'Award': 'Award',
+        'Badge': 'Badge',
+        'BachelorDegree': 'Bachelor Degree',
+        'Certificate': 'Certificate',
+        'CertificateOfCompletion': 'Certificate Of Completion',
+        'Certification': 'Certification',
+        'CommunityService': 'Community Service',
+        'Competency': 'Competency',
+        'Course': 'Course',
+        'CoCurricular': 'Co-Curricular',
+        'Degree': 'Degree',
+        'Diploma': 'Diploma',
+        'DoctoralDegree': 'Doctoral Degree',
+        'Fieldwork': 'Fieldwork',
+        'GeneralEducationDevelopment': 'General Education Development',
+        'JourneymanCertificate': 'Journeyman Certificate',
+        'LearningProgram': 'Learning Program',
+        'License': 'License',
+        'Membership': 'Membership',
+        'ProfessionalDoctorate': 'Professional Doctorate',
+        'QualityAssuranceCredential': 'Quality Assurance Credential',
+        'MasterCertificate': 'Master Certificate',
+        'MasterDegree': 'Master Degree',
+        'MicroCredential': 'Micro Credential',
+        'ResearchDoctorate': 'Research Doctorate',
+        'SecondarySchoolDiploma': 'Secondary School Diploma',
+        'other': 'Other (ext:)',
+      }"
+  />
+  <FormKit
+      v-if="achievementType === 'other'"
+      type="innerLabelTextInput"
+      label="Extended Type"
+      v-model="typeExt"
+      name="typeExt"
+      aria-label="Extended Alignment Type"
+      inner-class="input-group ms-3 me-5 pe-3"
+      outer-class="$reset"
+      label-class="visually-hidden"
+      before="ext:"
+      :validation="[['matches', '/^[a-z|A-Z|0-9|.|-|_]+$/'], ['required']]"
+      help="Extended value for Credential Type"
+  >
+    <template #prefix>
+      <span class="input-group-text" aria-label="ext:">ext:</span>
+    </template>
+  </FormKit>
+</template>
+
+<style scoped>
+[data-placeholder="true"] {
+  color: #999;
+}
+</style>

package/src/components/AdditionalTab.vue

@@ -0,0 +1,32 @@
+<script setup>
+import TagList from "@/components/TagList.vue";
+import RelatedList from "@/components/RelatedList.vue";
+import OtherIdentifiers from "@/components/OtherIdentifiers.vue";
+import CreatorProfile from "@/components/CreatorProfile.vue";
+
+const model = defineModel({ default: {} });
+</script>
+
+<template>
+  <div class="tab-pane fade show active" id="tab-additional" role="tabpanel" aria-labelledby="additional-tab">
+    <FormKit
+      type="text"
+      name="id"
+      label="ID"
+      v-model="model.id"
+      help="Unique URI for the Achievement."
+      />
+
+    <TagList v-model="model.tag"/>
+
+    <RelatedList v-model="model.related" />
+
+    <OtherIdentifiers v-model="model.otherIdentifier"/>
+
+    <CreatorProfile v-model="model.creator" />
+  </div>
+</template>
+
+<style scoped>
+
+</style>

package/src/components/AddressComponent.vue

@@ -0,0 +1,118 @@
+<script setup>
+import {onBeforeMount, ref} from "vue";
+
+const model = defineModel({ default: {} });
+const show = ref(false);
+
+onBeforeMount(() => {
+  if (Object.keys(model).length > 0) {
+    show.value = true;
+  }
+});
+</script>
+
+<template>
+  <FormKit
+      type="group"
+      name="address"
+      v-model="model"
+  >
+    <FormKit
+        type="checkbox"
+        label="Include address"
+        v-model="show"
+        wrapper-class="form-check form-switch"
+        input-class="$reset form-check-input"
+        label-class="$reset form-check-label"
+        role="switch"
+        ignore="true"
+    />
+
+    <div v-show="show">
+      <FormKit
+          type="hidden"
+          name="type"
+          :value="[ 'Address' ]"
+      />
+
+      <FormKit
+          type="text"
+          label="Street Address"
+          name="streetAddress"
+          help="Street address of the creator."
+      />
+
+      <FormKit
+          type="text"
+          label="Post Office Box Number"
+          name="postOfficeBoxNumber"
+          help="A post office box number for PO box addresses."
+      />
+
+      <FormKit
+          type="text"
+          label="City"
+          name="addressLocality"
+          help="A locality within the region."
+      />
+
+      <FormKit
+          type="text"
+          label="State"
+          name="addressRegion"
+          help="The region within the country."
+      />
+
+      <FormKit
+          type="text"
+          label="Postal Code"
+          name="postalCode"
+          help="A postal code."
+      />
+
+      <FormKit
+          type="text"
+          label="Country"
+          name="addressCountry"
+          help="Country name."
+      />
+
+      <FormKit
+          type="text"
+          label="Country Code"
+          name="addressCountryCode"
+          help="Country code.  The value must be a ISO 3166-1 alpha-2 country code, such as 'US'."
+      />
+
+      <FormKit
+          type="group"
+          label="Geo"
+          name="geo"
+          v-if="false"
+      >
+        <FormKit
+            type="hidden"
+            name="type"
+            :value="'GeoCoordinates'"
+        />
+
+        <FormKit
+            type="text"
+            label="Latitude"
+            name="latitude"
+            help="The latitude of the geographic point."
+        />
+        <FormKit
+            type="text"
+            label="Longitude"
+            name="longitude"
+            help="The longitude of the geographic point."
+        />
+      </FormKit>
+    </div>
+  </FormKit>
+</template>
+
+<style scoped>
+
+</style>

package/src/components/AlignmentComponent.vue

@@ -0,0 +1,141 @@
+<script setup>
+const alignment = defineModel({ default: {} });
+</script>
+
+<template>
+  <FormKit
+      #default="{ items, node, value }"
+      type="list"
+      v-model="alignment"
+      name="alignment"
+      dynamic
+  >
+    <h5>Alignments
+      <button type="button" @click="() => node.input(value.concat({}))" class="btn btn-sm btn-primary ms-3">
+        Add Alignment
+      </button>
+    </h5>
+
+    <FormKit
+      type="group"
+      wrapper-class="card"
+      v-for="(item, index) in items"
+      :key="item"
+      :index="index"
+    >
+      <div class="card mb-3">
+        <h5 class="card-header">Target {{index+1}}
+          <button type="button" @click="() => node.input(value.filter((_, i) => i !== index))" class="btn btn-secondary btn-sm float-end">
+            Remove
+          </button>
+        </h5>
+
+        <div class="card-body pb-0">
+          <FormKit
+              type="hidden"
+              name="type"
+              :value="[ 'Alignment' ]"
+          />
+
+          <FormKit
+              type="innerLabelTextInput"
+              label="Name"
+              name="targetName"
+              inner-class="input-group"
+              label-class="input-group-text"
+              wrapper-class="required"
+              validation="required:trim"
+              help="Name of the alignment."
+          />
+
+          <FormKit
+              type="innerLabelTextInput"
+              label="URL"
+              name="targetUrl"
+              inner-class="input-group"
+              label-class="input-group-text"
+              wrapper-class="required"
+              validation="required:trim|url"
+              help="URL linking to the official description of the alignment target, for example an individual standard within an educatinoal framework."
+          />
+
+          <FormKit
+              type="innerLabelTextInput"
+              label="Framework"
+              name="targetFramework"
+              inner-class="input-group"
+              label-class="input-group-text"
+              help="Name of the framework for the alignment target."
+          />
+
+          <FormKit
+            type="innerLabelTextareaInput"
+            label="Description"
+            name="description"
+            rows="2"
+            inner-class="input-group"
+            label-class="input-group-text"
+            help="Short description of the alignment target."
+          />
+
+          <FormKit
+              type="innerLabelTextInput"
+              label="Code"
+              name="targetCode"
+              inner-class="input-group"
+              label-class="input-group-text"
+              help="If applicable, a locally unique string identifier that identifies the alignment target within its framework and/or targetUrl."
+          />
+
+          <FormKit
+              type="selectInputGroup"
+              label="Alignment Type"
+              name="targetType"
+              inner-class="input-group"
+              label-class="input-group-text"
+              input-class="$reset formkit-input form-select"
+              placeholder="Target Type"
+              :options="{
+                '': '',
+                'CFItem': 'CFItem',
+                'CFRubric': 'CFRubric',
+                'CFRubricCriterion': 'CFRubricCriterion',
+                'CFRubricCriterionLevel': 'CFRubricCriterionLevel',
+                'ceasn:Competency': 'ceasn:Competency',
+                'ceterms:Credential': 'ceterms:Credential',
+                'CTDL': 'CTDL',
+                'other': 'Other (ext:)',
+              }"
+              help="The type of the alignment target node."
+          >
+            <template #suffix>
+                <FormKit
+                    v-if="value[index].targetType === 'other'"
+                    type="innerLabelTextInput"
+                    label="Extended Type"
+                    name="typeExt"
+                    aria-label="Extended Alignment Type"
+                    inner-class="input-group ms-3 me-5 pe-3"
+                    outer-class="$reset"
+                    label-class="visually-hidden"
+                    before="ext:"
+                    :validation="[['matches', '/^[a-z|A-Z|0-9|.|-|_]+$/']]"
+                    placeholder="Name of extended type"
+                >
+                  <template #prefix>
+                    <span class="input-group-text" id="extended-prefix" aria-label="ext:">ext:</span>
+                  </template>
+                </FormKit>
+            </template>
+          </FormKit>
+        </div>
+      </div>
+    </FormKit>
+  </FormKit>
+</template>
+
+<style>
+.input-group>.form-label {
+  margin-bottom: 0;
+}
+</style>

package/src/components/AlignmentsComponent.vue

@@ -0,0 +1,13 @@
+<script setup>
+import AlignmentComponent from "@/components/AlignmentComponent.vue";
+
+const alignment = defineModel({ default: {} });
+</script>
+
+<template>
+  <AlignmentComponent v-model="alignment"/>
+</template>
+
+<style scoped>
+
+</style>

package/src/components/AlignmentsTab.vue

@@ -0,0 +1,18 @@
+<script setup>
+import AlignmentsComponent from "@/components/AlignmentsComponent.vue";
+import ResultDescription from "@/components/ResultDescription.vue";
+
+const model = defineModel({ default: {} });
+</script>
+
+<template>
+    <div class="tab-pane fade show active" id="tab-alignments" role="tabpanel" aria-labelledby="alignments-tab">
+      <ResultDescription v-model="model.resultDescription"/>
+
+      <AlignmentsComponent v-model="model.alignment"/>
+    </div>
+</template>
+
+<style scoped>
+
+</style>

package/src/components/BasicTab.vue

@@ -0,0 +1,55 @@
+<script setup>
+import AchievementImage from "@/components/AchievementImage.vue";
+import AchievementType from "@/components/AchievementType.vue";
+import AchievementCriteria from "@/components/AchievementCriteria.vue";
+
+const model = defineModel({ default: {
+/*  name: '',
+  achievementType: null,
+  image: null,
+  description: '',
+  criteria: { },*/
+} });
+</script>
+
+<template>
+    <div class="tab-pane fade show active" id="tab-basic" role="tabpanel" aria-labelledby="basic-tab">
+      <div class="card mb-3">
+        <div class="card-body">
+          <p class="mb-0">
+            This tab contains all of the required fields for a credential.<br/>
+            <em>Credential Type</em> and <em>Image</em> are not required, but it is suggested that all credentials have them.
+          </p>
+        </div>
+      </div>
+
+      <FormKit
+          type="text"
+          label="Credential Name"
+          name="name"
+          wrapper-class="required"
+          validation="required:trim"
+          v-model="model.name"
+          help="The name of the credential."
+      />
+
+      <AchievementType v-model="model.achievementType" />
+      <AchievementImage v-model="model.image"/>
+
+      <FormKit
+          type="textarea"
+          label="Description"
+          name="description"
+          wrapper-class="required"
+          rows="5"
+          validation="required:trim"
+          v-model="model.description"
+          help="A short description of the achievement."
+      />
+
+      <AchievementCriteria
+          v-model="model.criteria"
+      />
+    </div>
+</template>
+

package/src/components/CreatorProfile.vue

@@ -0,0 +1,166 @@
+<script setup>
+import {onBeforeMount, ref} from "vue";
+import AddressComponent from "@/components/AddressComponent.vue";
+import CredentialImage from "@/components/AchievementImage.vue";
+import OtherIdentifiers from "@/components/OtherIdentifiers.vue";
+
+const creator=defineModel({ default: {} });
+const creatorIs=ref('noCreator');
+
+onBeforeMount(() => {
+  if (Object.keys(creator.value).length === 0) {
+    creator.value = 'noCreator';
+
+    return;
+  }
+
+  // Default to organization
+  creatorIs.value = 'organization';
+
+  if (creator.value.dateOfBirth || null) {
+    creatorIs.value = 'individual';
+  }
+});
+</script>
+
+<template>
+  <div class="card">
+    <h5 class="card-header">
+      <formKit
+          type="select"
+          label="Creator"
+          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',
+      }"
+          ignore="true"
+      />
+    </h5>
+
+    <FormKit
+      type="group"
+      name="creator"
+      v-model="creator"
+      v-if="creatorIs !== 'noCreator'"
+    >
+      <div class="card-body">
+        <FormKit
+          type="text"
+          label="ID"
+          name="id"
+          wrapper-class="required"
+          validation="required:trim"
+          help="Unique URI for the creator."
+          />
+
+        <FormKit
+            type="hidden"
+            name="type"
+            :value="[ 'Profile' ]"
+        />
+
+        <FormKit
+            type="text"
+            label="Name"
+            name="name"
+            help="The name of the entity or organization."
+        />
+
+        <FormKit
+            type="text"
+            label="Description"
+            name="description"
+            help="A short description of the issuer entity or organization."
+        />
+
+        <CredentialImage
+            help="An image that represents the creator.  Must be a PNG or SVG image."
+            v-model="creator.image"
+        />
+
+        <FormKit
+            type="text"
+            label="Official"
+            name="official"
+            help="If the entity is an organization, `official` is the name of an authorized official of the organization."
+            v-if="creatorIs === 'organization'"
+        />
+
+        <FormKit
+            type="text"
+            label="URL"
+            name="url"
+            validation="url"
+            help="The homepage or social media profile of the entity, whether individual or institutional. Should be a URL/URI Accessible via HTTP."
+        />
+
+        <FormKit
+            type="text"
+            label="Email"
+            name="email"
+            validation="email"
+            help="An email address for the creator."
+        />
+
+        <FormKit
+            type="text"
+            label="Phone"
+            name="phone"
+            help="A phone number for the creator."
+        />
+
+        <AddressComponent
+            v-model="creator.address"
+        />
+
+        <FormKit
+          type="text"
+          label="Date of Birth"
+          name="dateOfBirth"
+          format="yyyy-MM-dd"
+          help="Birthdate of the person."
+          v-if="creatorIs === 'individual'"
+          />
+
+        <OtherIdentifiers
+            label="Other Identifiers"
+            v-model="creator.otherIdentifier"
+            help="Other unique identifiers for the creator."
+        />
+
+        <FormKit
+          type="text"
+          label="Parent Org"
+          name="parentOrg"
+          placeholder="--TO BE EXPANDED--"
+          v-if="false"
+          />
+
+        <FormKit
+            type="text"
+            label="Endorsement JWT"
+            name="endorsementJwt"
+            help="Allows endorsers to make specific claims about the individual or organization represented by this profile. These endorsements are signed with the VC-JWT proof format."
+            placeholder="--TO BE EXPANDED --"
+            v-if="false"
+        />
+
+        <FormKit
+            type="text"
+            label="Endorsement"
+            name="endorsement"
+            help="Allows endorsers to make specific claims about the individual or organization represented by this profile."
+            placeholder="--TO BE EXPANDED --"
+            v-if="false"
+        />
+      </div>
+    </FormKit>
+  </div>
+</template>
+
+<style scoped>
+
+</style>