@opensalt/ob3-definer 1.0.0

package/src/components/TagList.vue

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

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

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

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

@@ -0,0 +1,76 @@
+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',
+}

package/src/main.js

@@ -0,0 +1,50 @@
+//import "bootstrap/dist/css/bootstrap.min.css";
+//import "bootstrap";
+//import './assets/main.css'
+//import './assets/style.scss';
+
+import { createApp } from 'vue';
+import App from './App.vue';
+import { plugin, defaultConfig } from "@formkit/vue";
+import customConfig from '../formkit.config.js';
+import { innerLabelTextInput } from '@/inputs/innerLabelTextInput.js';
+import { innerLabelTextareaInput } from '@/inputs/innerLabelTextareaInput.js';
+import { selectInputGroup } from '@/inputs/selectInputGroup.js';
+
+const createDefiner = (el, props) => {
+    const app = createApp(App, props);
+    app.use(plugin, defaultConfig({
+        config: customConfig.config,
+        inputs: {
+            innerLabelTextInput,
+            innerLabelTextareaInput,
+            selectInputGroup,
+        },
+    }));
+    return app;
+}
+
+window.addEventListener('ob3-open', function(event) {
+    const selector = event.detail?.selector || '#ob3-definer';
+    const mountEl = document.querySelector(selector);
+    if (!mountEl) {
+        throw new Error('No element found for selector ' + selector);
+    }
+    const props = { ...mountEl.dataset };
+    if (event.detail?.achievement) {
+        const achievement = event.detail.achievement;
+        if (typeof achievement === 'string') {
+            props.achievement = event.detail.achievement;
+        } else {
+            props.achievement = JSON.stringify(event.detail.achievement);
+        }
+    }
+    const app = createDefiner(selector, props);
+    app.mount(selector);
+    window.addEventListener('ob3-close', function close() {
+        window.removeEventListener('ob3-open', close);
+        app.unmount();
+    });
+});
+
+export default createDefiner;