@opensalt/ob3-definer 1.2.4 → 1.2.6

package/src/components/ResultDescription.vue

@@ -1,121 +0,0 @@
-<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";
-import { v4 as uuidV4 } from "uuid";
-
-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({id: 'urn:uuid:'+uuidV4()}))" 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="uri: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

@@ -1,94 +0,0 @@
-<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>

package/src/components/TagList.vue

@@ -1,121 +0,0 @@
-<script setup>
-import {onBeforeMount, ref, watch} from "vue";
-import {FormKitIcon} from '@formkit/vue'
-import {vAutoAnimate} from '@formkit/auto-animate'
-
-const values = ref([]);
-const model = defineModel({ default: [] });
-
-onBeforeMount(() => {
-  values.value = model.value;
-});
-function distinct(node) {
-  // 👀 use node traversal to get the parent node
-  const parent = node.at('$parent')
-  if (parent.value) {
-    // Ensure all the siblings are different values
-    for (const childName in parent.value) {
-      if (''+childName === ''+node.name) {
-        continue;
-      }
-      if (parent.value[childName] === node.value) {
-        return false;
-      }
-    }
-  }
-  return true
-}
-
-watch(values, (newValues) => {
-  model.value = newValues;
-});
-</script>
-
-<template>
-  <div v-auto-animate>
-    <FormKit v-model="values" name="tag" type="list" dynamic #default="{ items, node, value }">
-      <h5>Tags
-        <button type="button" @click="values.push(null)" class="btn btn-sm btn-primary ms-3">
-          Add Tag
-        </button>
-      </h5>
-      <p class="form-text">One or more short, human-friendly, searchable, keywords that describe the type of achievement.</p>
-
-      <div class="ms-5 mb-3 p-3 border rounded" v-if="items.length > 0">
-        <div v-for="(item, index) in items" :key="item" class="value-item">
-          <FormKit
-              type="text"
-              :index="index"
-              :validation-rules="{ distinct }"
-              validation="required:trim|distinct"
-              placeholder="Enter tag"
-              :validation-messages="{
-                'required': 'Value is required',
-                'distinct': 'The tags must be distinct',
-              }"
-              outer-class="$reset"
-          />
-          <ul class="controls mt-2">
-            <li>
-              <button
-                  type="button"
-                  @click="values.splice(index, 1)"
-                  class="button close"
-              >
-                <FormKitIcon icon="close"/>
-              </button>
-            </li>
-          </ul>
-        </div>
-      </div>
-    </FormKit>
-  </div>
-</template>
-
-<style scoped>
-.value-item {
-  display: flex;
-  align-items: start;
-  margin-bottom: 0.5rem;
-}
-
-.value-item:deep(.formkit-outer) {
-  margin-bottom: 0;
-  flex-grow: 1;
-}
-
-.controls {
-  list-style-type: none;
-  margin: 0;
-  padding: 0;
-  display: flex;
-  align-items: center;
-}
-
-.controls .button {
-  border: none;
-  background: none;
-  padding: 0;
-  margin: 0;
-  cursor: pointer;
-  color: #999;
-  line-height: 1;
-  transition: color 0.3s ease;
-  appearance: none;
-  font-size: 1em;
-  color: var(--fk-color-primary);
-  margin-left: 0.5rem;
-}
-
-.controls:deep(svg) {
-  display: block;
-  width: 1em;
-  max-height: 1.25em;
-  height: auto;
-  fill: currentColor;
-}
-
-.controls .close {
-  color: var(--fk-color-danger);
-}
-</style>

package/src/components/ValueList.vue

@@ -1,144 +0,0 @@
-<script setup>
-import {ref, watch} from "vue";
-import {FormKitIcon} from '@formkit/vue'
-import {vAutoAnimate} from '@formkit/auto-animate'
-
-const values = ref([]);
-const model = defineModel({ default: [] });
-
-function distinct(node) {
-  // 👀 use node traversal to get the parent node
-  const parent = node.at('$parent')
-  if (parent.value) {
-    // Ensure all the siblings are different values
-    for (const childName in parent.value) {
-      if (''+childName === ''+node.name) {
-        continue;
-      }
-      if (parent.value[childName] === node.value) {
-        return false;
-      }
-    }
-  }
-  return true
-}
-
-watch(values, (newValues) => {
-  model.value = newValues;
-});
-</script>
-
-<template>
-  <div v-auto-animate>
-    <FormKit v-model="values" name="allowedValue" type="list" dynamic #default="{ items, node, value }">
-      <h5>Allowed Values
-        <button type="button" @click="values.push(null)" class="btn btn-sm btn-primary ms-3">
-          Add Value
-        </button>
-      </h5>
-      <p class="form-text">
-        An ordered list of allowed values. The values should be ordered from low to high as determined by the achievement creator.
-      </p>
-
-      <div class="ms-5 mb-3 p-3 border rounded col-md-8" v-if="items.length > 0">
-        <div v-for="(item, index) in items" :key="item" class="value-item">
-          <FormKit
-              type="innerLabelTextInput"
-              :index="index"
-              inner-class="input-group"
-              label-class="input-group-text"
-              :validation-rules="{ distinct }"
-              validation="required:trim|distinct"
-              :validation-messages="{
-                'required': 'A value is required.',
-                'distinct': 'The values must all be different.',
-              }"
-              outer-class="$reset"
-              :aria-label="'Allowed value '+(index+1)"
-          >
-            <template #label="context">
-              <label :class="context.classes.label">{{ index + 1 }}</label>
-            </template>
-          </FormKit>
-          <ul class="controls mt-2">
-            <li>
-              <button
-                  type="button"
-                  @click="values.splice(index - 1, 0, values.splice(index, 1)[0])"
-                  class="button"
-              >
-                <FormKitIcon icon="arrowUp"/>
-              </button>
-            </li>
-            <li>
-              <button
-                  type="button"
-                  @click="values.splice(index + 1, 0, values.splice(index, 1)[0])"
-                  class="button"
-              >
-                <FormKitIcon icon="arrowDown"/>
-              </button>
-            </li>
-            <li>
-              <button
-                  type="button"
-                  @click="values.splice(index, 1)"
-                  class="button close"
-              >
-                <FormKitIcon icon="close"/>
-              </button>
-            </li>
-          </ul>
-        </div>
-      </div>
-    </FormKit>
-  </div>
-</template>
-
-<style scoped>
-.value-item {
-  display: flex;
-  align-items: start;
-  margin-bottom: 0.5rem;
-}
-
-.value-item:deep(.formkit-outer) {
-  margin-bottom: 0;
-  flex-grow: 1;
-}
-
-.controls {
-  list-style-type: none;
-  margin: 0;
-  padding: 0;
-  display: flex;
-  align-items: center;
-}
-
-.controls .button {
-  border: none;
-  background: none;
-  padding: 0;
-  margin: 0;
-  cursor: pointer;
-  color: #999;
-  line-height: 1;
-  transition: color 0.3s ease;
-  appearance: none;
-  font-size: 1em;
-  color: var(--fk-color-primary);
-  margin-left: 0.5rem;
-}
-
-.controls:deep(svg) {
-  display: block;
-  width: 1em;
-  max-height: 1.25em;
-  height: auto;
-  fill: currentColor;
-}
-
-.controls .close {
-  color: var(--fk-color-danger);
-}
-</style>

package/src/inputs/innerLabelTextInput.js

@@ -1,62 +0,0 @@
-import {
-  outer,
-  inner,
-  wrapper,
-  label,
-  help,
-  messages,
-  message,
-  icon,
-  prefix,
-  suffix,
-  textInput,
-  casts,
-} from '@formkit/inputs'
-/**
- * Input definition for a text.
- * @public
- */
-export const innerLabelTextInput = {
-  /**
-   * The actual schema of the input, or a function that returns the schema.
-   */
-  schema: outer(
-    wrapper(
-      inner(
-        label('$label'),
-        icon('prefix', 'label'),
-        prefix(),
-        textInput(),
-        suffix(),
-        icon('suffix')
-      )
-    ),
-    help('$help'),
-    messages(message('$message.value'))
-  ),
-  /**
-   * The type of node, can be a list, group, or input.
-   */
-  type: 'input',
-  /**
-   * The family of inputs this one belongs too. For example "text" and "email"
-   * are both part of the "text" family. This is primary used for styling.
-   */
-  family: 'text',
-  /**
-   * An array of extra props to accept for this input.
-   */
-  props: [],
-  /**
-   * Forces node.props.type to be this explicit value.
-   */
-  forceTypeProp: 'text',
-  /**
-   * Additional features that should be added to your input
-   */
-  features: [casts],
-  /**
-   * The key used to memoize the schema.
-   */
-  schemaMemoKey: 'qmwq6rtsiye',
-}

package/src/inputs/innerLabelTextareaInput.js

@@ -1,57 +0,0 @@
-import {
-  outer,
-  inner,
-  wrapper,
-  label,
-  help,
-  messages,
-  message,
-  prefix,
-  suffix,
-  icon,
-  textareaInput,
-  initialValue,
-} from '@formkit/inputs'
-/**
- * Input definition for a textarea.
- * @public
- */
-export const innerLabelTextareaInput = {
-  /**
-   * The actual schema of the input, or a function that returns the schema.
-   */
-  schema: outer(
-    wrapper(
-      inner(
-        label('$label'),
-        icon('prefix', 'label'),
-        prefix(),
-        textareaInput(),
-        suffix(),
-        icon('suffix')
-      )
-    ),
-    help('$help'),
-    messages(message('$message.value'))
-  ),
-  /**
-   * The type of node, can be a list, group, or input.
-   */
-  type: 'input',
-  /**
-   * An array of extra props to accept for this input.
-   */
-  props: [],
-  /**
-   * Forces node.props.type to be this explicit value.
-   */
-  forceTypeProp: 'textarea',
-  /**
-   * Additional features that should be added to your input
-   */
-  features: [initialValue],
-  /**
-   * The key used to memoize the schema.
-   */
-  schemaMemoKey: 'zq0nltggno',
-}

package/src/inputs/selectInputGroup.js

@@ -1,76 +0,0 @@
-import {
-  outer,
-  inner,
-  wrapper,
-  label,
-  help,
-  messages,
-  message,
-  prefix,
-  suffix,
-  icon,
-  selectInput,
-  option,
-  optionSlot,
-  optGroup,
-  $if,
-  options,
-  selects,
-  defaultIcon,
-} from '@formkit/inputs'
-/**
- * Input definition for a select.
- * @public
- */
-export const selectInputGroup = {
-  /**
-   * The actual schema of the input, or a function that returns the schema.
-   */
-  schema: outer(
-    wrapper(
-      inner(
-        label('$label'),
-        icon('prefix'),
-        prefix(),
-        selectInput(
-          $if(
-            '$slots.default',
-            () => '$slots.default',
-            optionSlot(
-              $if(
-                '$option.group',
-                optGroup(optionSlot(option('$option.label'))),
-                option('$option.label')
-              )
-            )
-          )
-        ),
-        $if('$attrs.multiple !== undefined', () => '', icon('select')),
-        suffix(),
-        icon('suffix')
-      )
-    ),
-    help('$help'),
-    messages(message('$message.value'))
-  ),
-  /**
-   * The type of node, can be a list, group, or input.
-   */
-  type: 'input',
-  /**
-   * An array of extra props to accept for this input.
-   */
-  props: ['options', 'placeholder', 'optionsLoader'],
-  /**
-   * Forces node.props.type to be this explicit value.
-   */
-  forceTypeProp: 'select',
-  /**
-   * Additional features that should be added to your input
-   */
-  features: [options, selects, defaultIcon('select', 'select')],
-  /**
-   * The key used to memoize the schema.
-   */
-  schemaMemoKey: 'at63zamx5wg',
-}