@opensalt/ob3-definer 1.0.0

package/src/components/CriterionLevels.vue

@@ -0,0 +1,97 @@
+<script setup>
+import AlignmentComponent from "@/components/AlignmentComponent.vue";
+
+const levels = defineModel({ default: {} });
+</script>
+
+<template>
+  <FormKit
+      #default="{ items, node, value }"
+      type="list"
+      v-model="levels"
+      name="rubricCriterionLevel"
+      dynamic
+  >
+    <h5>Rubric Criterion Levels
+      <button type="button" @click="() => node.input(value.concat({}))" class="btn btn-sm btn-primary ms-3">
+        Add Level
+      </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">Level {{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">
+          <FormKit
+              type="hidden"
+              name="type"
+              :value="[ 'RubricCriterionLevel' ]"
+          />
+
+          <FormKit
+              type="innerLabelTextInput"
+              label="ID"
+              name="id"
+              inner-class="input-group"
+              label-class="input-group-text"
+              validation="required:trim"
+              wrapper-class="required"
+          />
+
+          <FormKit
+              type="innerLabelTextInput"
+              label="Name"
+              name="name"
+              inner-class="input-group"
+              label-class="input-group-text"
+              validation="required:trim"
+              wrapper-class="required"
+          />
+
+          <FormKit
+              type="innerLabelTextareaInput"
+              label="Description"
+              name="description"
+              inner-class="input-group"
+              label-class="input-group-text"
+          />
+
+          <FormKit
+              type="innerLabelTextInput"
+              label="Level"
+              name="level"
+              inner-class="input-group"
+              label-class="input-group-text"
+          />
+
+          <FormKit
+              type="innerLabelTextInput"
+              label="Points"
+              name="points"
+              inner-class="input-group"
+              label-class="input-group-text"
+          />
+
+          <AlignmentComponent v-model="levels[index].alignment"/>
+        </div>
+      </div>
+    </FormKit>
+  </FormKit>
+</template>
+
+<style>
+.input-group>.form-label {
+  margin-bottom: 0;
+}
+</style>

package/src/components/DetailTab.vue

@@ -0,0 +1,72 @@
+<script setup>
+const credential = defineModel({ default: {
+  humanCode: null,
+  inLanguage: null,
+  version: null,
+  creditsAvailable: null,
+  additionalType: null,
+} })
+</script>
+
+<template>
+    <div class="tab-pane fade show active" id="tab-detail" role="tabpanel" aria-labelledby="detail-tab">
+        <FormKit
+          type="text"
+          label="Human Code"
+          v-model="credential.humanCode"
+          name="humanCode"
+          help="The code, generally human readable, associated with an achievement."
+        />
+
+        <FormKit
+            type="text"
+            label="In Language"
+            v-model="credential.inLanguage"
+            name="inLanguage"
+            help="The language this credential is in as a BCP47 language code, such as 'en', 'en-US', or 'es-MX'"
+            :validation="[['matches', '/^[a-z]{2,4}(-[A-Z][a-z]{3})?(-([A-Z]{2}|[0-9]{3}))?$/']]"
+            :validation-messages="{
+              'matches': 'The language must formatted as a BCP47 language code, such as \'en\', \'en-US\', or \'es-MX\'.'
+            }"
+        />
+
+        <FormKit
+            type="text"
+            label="Version"
+            v-model="credential.version"
+            name="version"
+            help="The version property allows issuers to set a version string for an Achievement. This is particularly useful when replacing a previous version with an update."
+        />
+
+        <FormKit
+            type="number"
+            label="Credits Available"
+            number
+            name="creditsAvailable"
+            v-model="credential.creditsAvailable"
+            help="Credit hours associated with this entity, or credit hours possible. For example 3.0."
+        />
+
+        <FormKit
+            type="text"
+            label="Specialization"
+            v-model="credential.specialization"
+            name="specialization"
+            help="Name given to the focus, concentration, or specific area of study defined in the achievement. Examples include 'Entrepreneurship', 'Technical Communication', and 'Finance'."
+        />
+
+        <FormKit
+            type="text"
+            label="Field of Study"
+            v-model="credential.fieldOfStudy"
+            name="fieldOfStudy"
+            help="Category, subject, area of study, discipline, or general branch of knowledge. Examples include Business, Education, Psychology, and Technology."
+        />
+    </div>
+</template>
+
+<style scoped>
+  #criteria-preview {
+    min-height: 250px;
+  }
+</style>

package/src/components/IndividualName.vue

@@ -0,0 +1,63 @@
+<script setup>
+
+</script>
+
+<template>
+  <FormKit
+      type="group"
+  >
+    <FormKit
+        type="text"
+        label="Given Name"
+        name="givenName"
+        help="Given name. In the western world, often referred to as the 'first name' of a person."
+    />
+
+    <FormKit
+        type="text"
+        label="Additional Name"
+        name="additionalName"
+        help="Additional name. Includes what is often referred to as 'middle name' in the western world."
+    />
+
+    <FormKit
+        type="text"
+        label="Family Name Prefix"
+        name="familyNamePrefix"
+        help="Family name prefix. As used in some locales, this is the leading part of a family name (e.g. 'de' in the name 'de Boer')."
+    />
+
+    <FormKit
+        type="text"
+        label="Family Name"
+        name="familyName"
+        help="Family name. In the western world, often referred to as the 'last name' of a person."
+    />
+
+    <FormKit
+        type="text"
+        label="Patronymic Name"
+        name="patronymicName"
+        help="Patronynmic name."
+        v-if="false"
+    />
+
+    <FormKit
+        type="text"
+        label="Honorific Prefix"
+        name="honorificPrefix"
+        help="Honorific prefix(es) preceding a person's name (e.g. 'Dr', 'Mrs' or 'Mr')."
+    />
+
+    <FormKit
+        type="text"
+        label="Honorific Suffix"
+        name="honorificSuffix"
+        help="Honorific suffix(es) following a person's name (e.g. 'M.D, PhD')."
+    />
+  </FormKit>
+</template>
+
+<style scoped>
+
+</style>

package/src/components/MarkdownRenderer.vue

@@ -0,0 +1,20 @@
+<script setup>
+import MarkdownIt from "markdown-it";
+
+const markdown = MarkdownIt();
+
+const props = defineProps({
+  source: {
+    type: String,
+    default: ""
+  }
+});
+</script>
+
+<template>
+  <div class="mb-3" v-html="markdown.render(source)" />
+</template>
+
+<style scoped>
+
+</style>

package/src/components/OtherIdentifiers.vue

@@ -0,0 +1,116 @@
+<script setup>
+const props = defineProps({
+  help: {
+    type: String,
+    default: 'Other identifiers for this credential.'
+  }
+});
+
+const identifiers = defineModel({ default: [] });
+</script>
+
+<template>
+  <FormKit
+      #default="{ items, node, value }"
+      type="list"
+      v-model="identifiers"
+      name="otherIdentifier"
+      dynamic
+  >
+    <h5>Other Identifiers
+      <button type="button" @click="() => node.input(value.concat({}))" class="btn btn-sm btn-primary ms-3">
+        Add Identifier
+      </button>
+    </h5>
+    <p class="form-text">{{ props.help }}</p>
+
+    <FormKit
+        type="group"
+        v-for="(item, index) in items"
+        :key="item"
+        :index="index"
+    >
+      <div class="card mb-3">
+        <h5 class="card-header">Other Identifier {{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="'IdentifierEntry'"
+          />
+
+          <FormKit
+              type="innerLabelTextInput"
+              label="Identifier"
+              name="identifier"
+              aria-label="Identifier"
+              inner-class="input-group"
+              label-class="input-group-text"
+              wrapper-class="required"
+              validation="required:trim"
+          />
+          <FormKit
+              type="selectInputGroup"
+              label="Identifier Type"
+              name="identifierType"
+              inner-class="input-group"
+              label-class="input-group-text"
+              input-class="$reset formkit-input form-select"
+              wrapper-class="required"
+              placeholder="Select the Identifier Type"
+              validation="required"
+              :options="{
+                'name': 'name',
+                'sourcedId': 'sourcedId',
+                'systemId': 'systemId',
+                'productId': 'productId',
+                'userName': 'userName',
+                'accountId': 'accountId',
+                'emailAddress': 'emailAddress',
+                'nationalIdentityNumber': 'nationalIdentityNumber',
+                'isbn': 'isbn',
+                'issn': 'issn',
+                'lisSourcedId': 'lisSourcedId',
+                'oneRosterSourcedId': 'oneRosterSourcedId',
+                'sisSourcedId': 'sisSourcedId',
+                'ltiContextId': 'ltiContextId',
+                'ltiDeploymentId': 'ltiDeploymentId',
+                'ltiToolId': 'ltiToolId',
+                'ltiPlatformId': 'ltiPlatformId',
+                'ltiUserId': 'ltiUserId',
+                'identifier': 'identifier',
+                'other': 'Other (ext:)',
+              }"
+          />
+          <FormKit
+              v-if="value[index].identifierType === 'other'"
+              type="innerLabelTextInput"
+              label="Extended Type"
+              name="typeExt"
+              aria-label="Extended Identifier 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|.|-|_]+$/']]"
+          >
+            <template #prefix>
+              <span class="input-group-text" aria-label="ext:">ext:</span>
+            </template>
+          </FormKit>
+        </div>
+      </div>
+    </FormKit>
+  </FormKit>
+</template>
+
+<style>
+.input-group>.form-label {
+  margin-bottom: 0;
+}
+</style>

package/src/components/RelatedList.vue

@@ -0,0 +1,89 @@
+<script setup>
+import {ref, watch} from "vue";
+
+const emit = defineEmits(['change']);
+
+const related = ref([]);
+
+watch(related, (newRelated) => {
+  //credential.alignment = newAlignment;
+  emit('change', newRelated);
+});
+</script>
+
+<template>
+  <FormKit
+      #default="{ items, node, value }"
+      type="list"
+      v-model="related"
+      name="alignment"
+      dynamic
+  >
+    <h5>Related Credentials
+      <button type="button" @click="() => node.input(value.concat({}))" class="btn btn-sm btn-primary ms-3">
+        Add Related Credential
+      </button>
+    </h5>
+    <p class="form-text">A list of credentials related to this one.</p>
+
+    <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">Credential {{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="[ 'Related' ]"
+          />
+
+          <FormKit
+              type="innerLabelTextInput"
+              label="ID"
+              name="id"
+              inner-class="input-group"
+              label-class="input-group-text"
+              wrapper-class="required"
+              validation="required:trim"
+              help="The URI of the related achievement."
+          />
+
+          <FormKit
+              type="innerLabelTextInput"
+              label="Language"
+              name="inLanguage"
+              inner-class="input-group"
+              label-class="input-group-text"
+              :validation="[['matches', '/^[a-z]{2,4}(-[A-Z][a-z]{3})?(-([A-Z]{2}|[0-9]{3}))?$/']]"
+              help="The language of the related achievement as a BCP47 language code."
+          />
+
+          <FormKit
+              type="innerLabelTextInput"
+              label="Version"
+              name="version"
+              inner-class="input-group"
+              label-class="input-group-text"
+              help="The version of the related achievement."
+          />
+        </div>
+      </div>
+    </FormKit>
+  </FormKit>
+</template>
+
+<style>
+.input-group>.form-label {
+  margin-bottom: 0;
+}
+</style>

package/src/components/ResultDescription.vue

@@ -0,0 +1,120 @@
+<script setup>
+import AlignmentComponent from "@/components/AlignmentComponent.vue";
+import ValueList from "@/components/ValueList.vue";
+import CriterionLevels from "@/components/CriterionLevels.vue";
+import ResultType from "@/components/ResultType.vue";
+
+const results = defineModel({ default: [] });
+</script>
+
+<template>
+  <FormKit
+      #default="{ items, node, value }"
+      type="list"
+      name="resultDescription"
+      v-model="results"
+      dynamic
+  >
+    <h5 class="mb-4">Result Descriptions
+      <button type="button" @click="() => node.input(value.concat({}))" class="btn btn-sm btn-primary ms-3">
+        Add Result Description
+      </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">Result Description {{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">
+          <FormKit
+              type="innerLabelTextInput"
+              label="ID"
+              name="id"
+              inner-class="input-group"
+              label-class="input-group-text"
+              wrapper-class="required"
+              validation="required:trim"
+              help="The unique URI for this result description. Required so a result can link to this result description."
+          />
+
+          <FormKit
+              type="hidden"
+              name="type"
+              :value="[ 'ResultDescription' ]"
+          />
+
+          <FormKit
+              type="innerLabelTextInput"
+              label="Name"
+              name="name"
+              inner-class="input-group"
+              label-class="input-group-text"
+              wrapper-class="required"
+              validation="required:trim"
+              help="The name of the result."
+          />
+
+          <ResultType v-model="results[index].resultType" />
+
+          <ValueList v-model="results[index].allowedValue"/>
+
+          <FormKit
+              type="innerLabelTextInput"
+              label="Minimum Value"
+              name="valueMin"
+              inner-class="input-group"
+              label-class="input-group-text"
+              help="The minimum possible `value` that may be asserted in a linked result."
+          />
+
+          <FormKit
+              type="innerLabelTextInput"
+              label="Maximum Value"
+              name="valueMax"
+              inner-class="input-group"
+              label-class="input-group-text"
+              help="The maximum possible `value` that may be asserted in a linked result."
+          />
+
+          <CriterionLevels v-model="results[index].rubricCriterionLevel"/>
+
+          <FormKit
+              type="innerLabelTextInput"
+              label="Required Level"
+              name="requiredLevel"
+              inner-class="input-group"
+              label-class="input-group-text"
+              help="The `id` of the rubric criterion level required to pass as determined by the achievement creator."
+          />
+
+          <FormKit
+              type="innerLabelTextInput"
+              label="Required Value"
+              name="requiredValue"
+              inner-class="input-group"
+              label-class="input-group-text"
+              help="A value from `allowedValue` or within the range of `valueMin` to `valueMax` required to pass as determined by the achievement creator."
+          />
+
+          <AlignmentComponent v-model="results[index].alignment"/>
+        </div>
+      </div>
+    </FormKit>
+  </FormKit>
+</template>
+
+<style>
+.input-group>.form-label {
+  margin-bottom: 0;
+}
+</style>

package/src/components/ResultType.vue

@@ -0,0 +1,94 @@
+<script setup>
+import {onMounted, ref, watch} from "vue";
+
+const model = defineModel({ default: ''});
+const selectedType = ref('');
+const typeExt = ref('');
+
+onMounted(() => {
+  if (model.value?.substring(0, 4) === 'ext:') {
+    selectedType.value = 'other';
+    typeExt.value = model.value.substring(4);
+
+    return;
+  }
+
+  selectedType.value = model.value ? model.value : '';
+  typeExt.value = '';
+});
+
+watch(selectedType, (value) => {
+  if (value === 'other') {
+    model.value = 'ext:'+typeExt.value;
+
+    return;
+  }
+
+  model.value = value;
+});
+
+watch(typeExt, (value) => {
+  if (selectedType.value === 'other') {
+    model.value = 'ext:'+value;
+
+    return;
+  }
+
+  model.value = selectedType.value;
+});
+</script>
+
+<template>
+  <FormKit
+    type="selectInputGroup"
+    label="Result Type"
+    v-model="selectedType"
+    name="selectedType"
+    inner-class="input-group"
+    label-class="input-group-text"
+    input-class="$reset formkit-input form-select"
+    wrapper-class="required"
+    placeholder="Select Result Type"
+    validation="required"
+    :options="{
+      'GradePointAverage': 'Grade Point Average',
+      'LetterGrade': 'Letter Grade',
+      'Percent': 'Percent',
+      'PerformanceLevel': 'Performance Level',
+      'PredictedScore': 'Predicted Score',
+      'RawScore': 'Raw Score',
+      'Result': 'Result',
+      'RubricCriterion': 'Rubric Criterion',
+      'RubricCriterionLevel': 'Rubric Criterion Level',
+      'RubricScore': 'Rubric Score',
+      'ScaledScore': 'Scaled Score',
+      'Status': 'Status',
+      'other': 'Other (ext:)'
+    }"
+    help="The type of result this description represents. This is an extensible enumerated vocabulary."
+  >
+    <template #suffix>
+      <FormKit
+        v-if="selectedType === 'other'"
+        type="innerLabelTextInput"
+        label="Extended Type"
+        v-model="typeExt"
+        name="typeExt"
+        aria-label="Extended Result 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']]"
+      >
+        <template #prefix>
+          <span class="input-group-text" aria-label="ext:">ext:</span>
+        </template>
+      </FormKit>
+    </template>
+  </FormKit>
+</template>
+
+<style scoped>
+
+</style>