@structured-field/widget-editor 0.1.0

package/src/editors/RelationEditor.vue

@@ -0,0 +1,208 @@
+<template>
+  <div class="sf-field sf-relation" :class="{ errors: fieldErrors.length }" ref="root">
+    <label class="sf-label" :class="{ required: isRequired }">{{ title }}</label>
+    <div class="sf-relation-wrapper">
+      <!-- Selected items -->
+      <div v-if="selected.length" class="sf-relation-selected">
+        <div v-for="item in selected" :key="itemKey(item)" class="sf-relation-tag">
+          <span class="sf-relation-tag-text">{{ getDisplayName(item) }}</span>
+          <button v-if="isMultiple || allowClear" type="button" class="sf-relation-tag-remove"
+            @click.stop="removeItem(item)">
+            <i class="fas fa-times"></i>
+          </button>
+        </div>
+      </div>
+
+      <!-- Search box -->
+      <div v-show="showSearch" class="sf-relation-search">
+        <input ref="searchInput" type="text" class="sf-input sf-relation-input" :placeholder="placeholder"
+          autocomplete="off" v-model="searchQuery" @input="onSearchInput" @focus="openDropdown"
+          @keydown="handleKeyDown" />
+        <!-- Dropdown -->
+        <div v-show="dropdownVisible" class="sf-relation-dropdown">
+          <div v-if="filteredResults.length === 0 && !loading" class="sf-relation-dropdown-empty">
+            No results found
+          </div>
+          <div v-for="(item, i) in filteredResults" :key="itemKey(item)" class="sf-relation-dropdown-item"
+            :class="{ highlighted: i === highlightIndex }" @click="selectItem(item)">
+            {{ getDisplayName(item) }}
+          </div>
+          <div v-if="hasMore" class="sf-relation-dropdown-more" @click="fetchResults(searchQuery, currentPage + 1)">
+            Load more...
+          </div>
+        </div>
+      </div>
+    </div>
+    <ul v-if="fieldErrors.length" class="errorlist">
+      <li v-for="(err, i) in fieldErrors" :key="i">{{ err }}</li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import { debounce } from '../utils';
+
+export default {
+  name: 'RelationEditor',
+  props: {
+    schema: { type: Object, required: true },
+    modelValue: { default: null },
+    path: { type: Array, default: () => [] },
+    form: { type: Object, default: null },
+  },
+  emits: ['update:modelValue'],
+  data() {
+    const isMultiple = !!this.schema.multiple;
+    const value = this.modelValue;
+    let selected;
+    if (isMultiple) {
+      selected = Array.isArray(value) ? [...value] : [];
+    } else {
+      selected = value ? [value] : [];
+    }
+    return {
+      isMultiple,
+      allowClear: this.schema.options?.select2?.allowClear ?? true,
+      placeholder: this.schema.options?.select2?.placeholder || 'Search...',
+      searchUrl: this.schema.options?.select2?.ajax?.url || '',
+      selected,
+      dropdownVisible: false,
+      searchResults: [],
+      currentPage: 1,
+      hasMore: false,
+      loading: false,
+      highlightIndex: -1,
+      searchQuery: '',
+    };
+  },
+  computed: {
+    title() {
+      return this.schema.title || this.humanize(this.path[this.path.length - 1]) || '';
+    },
+    isRequired() {
+      if (this.path.length < 2 || !this.form) return false;
+      const parentPath = this.path.slice(0, -1);
+      const fieldName = this.path[this.path.length - 1];
+      const parentSchema = this.form.getSchemaAtPath(parentPath);
+      return parentSchema && Array.isArray(parentSchema.required) && parentSchema.required.includes(fieldName);
+    },
+    showSearch() {
+      if (!this.isMultiple && this.selected.length > 0) return false;
+      return true;
+    },
+    fieldErrors() {
+      if (!this.form || !this.form.getErrorsForPath) return [];
+      return this.form.getErrorsForPath(this.path);
+    },
+    filteredResults() {
+      const selectedIds = new Set(this.selected.map(s => `${s.id}-${s.model || ''}`));
+      return this.searchResults.filter(item => !selectedIds.has(`${item.id}-${item.model || ''}`));
+    },
+  },
+  created() {
+    this._doSearch = debounce((query) => this.fetchResults(query, 1), 300);
+    this._onDocClick = (e) => {
+      if (this.$refs.root && !this.$refs.root.contains(e.target)) {
+        this.closeDropdown();
+      }
+    };
+  },
+  mounted() {
+    document.addEventListener('click', this._onDocClick);
+  },
+  beforeUnmount() {
+    document.removeEventListener('click', this._onDocClick);
+  },
+  methods: {
+    humanize(str) {
+      if (!str) return '';
+      return str.replace(/_/g, ' ').replace(/([a-z])([A-Z])/g, '$1 $2').replace(/^./, s => s.toUpperCase());
+    },
+    getDisplayName(item) {
+      if (!item) return '';
+      for (const key of ['__str__', 'name', 'title', 'label']) {
+        if (item[key]) return String(item[key]);
+      }
+      return `#${item.id || '?'}`;
+    },
+    itemKey(item) {
+      return `${item.id}-${item.model || ''}`;
+    },
+    onSearchInput() {
+      this._doSearch(this.searchQuery);
+    },
+    openDropdown() {
+      if (this.dropdownVisible) return;
+      this.dropdownVisible = true;
+      this.fetchResults(this.searchQuery, 1);
+    },
+    closeDropdown() {
+      this.dropdownVisible = false;
+      this.highlightIndex = -1;
+    },
+    async fetchResults(query, page) {
+      if (!this.searchUrl) return;
+      this.loading = true;
+      this.currentPage = page;
+
+      try {
+        const url = new URL(this.searchUrl, window.location.origin);
+        url.searchParams.set('_q', query || '');
+        url.searchParams.set('page', String(page));
+
+        const response = await fetch(url, { credentials: 'same-origin' });
+        if (!response.ok) return;
+        const data = await response.json();
+
+        if (page === 1) {
+          this.searchResults = data.items || [];
+        } else {
+          this.searchResults = this.searchResults.concat(data.items || []);
+        }
+        this.hasMore = data.more;
+      } finally {
+        this.loading = false;
+      }
+    },
+    handleKeyDown(e) {
+      if (!this.filteredResults.length) return;
+      if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        this.highlightIndex = Math.min(this.highlightIndex + 1, this.filteredResults.length - 1);
+      } else if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        this.highlightIndex = Math.max(this.highlightIndex - 1, 0);
+      } else if (e.key === 'Enter') {
+        e.preventDefault();
+        if (this.highlightIndex >= 0 && this.highlightIndex < this.filteredResults.length) {
+          this.selectItem(this.filteredResults[this.highlightIndex]);
+        }
+      } else if (e.key === 'Escape') {
+        this.closeDropdown();
+      }
+    },
+    selectItem(item) {
+      if (this.isMultiple) {
+        this.selected.push(item);
+      } else {
+        this.selected = [item];
+      }
+      this.searchQuery = '';
+      this.highlightIndex = -1;
+      this.closeDropdown();
+      this.emitValue();
+    },
+    removeItem(item) {
+      this.selected = this.selected.filter(s => !(s.id === item.id && (s.model || '') === (item.model || '')));
+      this.emitValue();
+    },
+    emitValue() {
+      if (this.isMultiple) {
+        this.$emit('update:modelValue', [...this.selected]);
+      } else {
+        this.$emit('update:modelValue', this.selected[0] || null);
+      }
+    },
+  },
+};
+</script>

package/src/editors/SchemaEditor.vue

@@ -0,0 +1,68 @@
+<template>
+  <component
+    :is="editorComponent"
+    :schema="schema"
+    :model-value="modelValue"
+    :path="path"
+    :form="form"
+    @update:model-value="$emit('update:modelValue', $event)"
+  />
+</template>
+
+<script>
+import StringEditor from './StringEditor.vue';
+import NumberEditor from './NumberEditor.vue';
+import BooleanEditor from './BooleanEditor.vue';
+import SelectEditor from './SelectEditor.vue';
+import HiddenEditor from './HiddenEditor.vue';
+import ObjectEditor from './ObjectEditor.vue';
+import ArrayEditor from './ArrayEditor.vue';
+import NullableEditor from './NullableEditor.vue';
+import UnionEditor from './UnionEditor.vue';
+import RelationEditor from './RelationEditor.vue';
+
+const MAX_DEPTH = 12;
+
+export default {
+  name: 'SchemaEditor',
+  components: {
+    StringEditor,
+    NumberEditor,
+    BooleanEditor,
+    SelectEditor,
+    HiddenEditor,
+    ObjectEditor,
+    ArrayEditor,
+    NullableEditor,
+    UnionEditor,
+    RelationEditor,
+  },
+  props: {
+    schema: { type: Object, required: true },
+    modelValue: { default: undefined },
+    path: { type: Array, default: () => [] },
+    form: { type: Object, required: true },
+  },
+  emits: ['update:modelValue'],
+  computed: {
+    editorComponent() {
+      const schema = this.schema;
+
+      if (this.path.length > MAX_DEPTH) return 'StringEditor';
+
+      if (schema.type === 'relation') return 'RelationEditor';
+      if (schema.oneOf && schema.discriminator) return 'UnionEditor';
+      if ('const' in schema) return 'HiddenEditor';
+      if (schema.enum && schema.enum.length === 1 && schema.type === 'string') return 'HiddenEditor';
+      if (schema._nullable) return 'NullableEditor';
+      if (schema.type === 'object' && schema.properties) return 'ObjectEditor';
+      if (schema.type === 'array') return 'ArrayEditor';
+      if (schema.enum) return 'SelectEditor';
+      if (schema.type === 'boolean') return 'BooleanEditor';
+      if (schema.type === 'number' || schema.type === 'integer') return 'NumberEditor';
+
+      return 'StringEditor';
+    },
+  },
+};
+</script>

package/src/editors/SelectEditor.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="sf-field" :class="{ errors: fieldErrors.length }">
+    <label class="sf-label" :class="{ required: isRequired }">{{ title }}</label>
+    <select
+      class="sf-input sf-select"
+      :value="modelValue != null ? String(modelValue) : ''"
+      @change="$emit('update:modelValue', $event.target.value)"
+    >
+      <option v-for="opt in (schema.enum || [])" :key="opt" :value="String(opt)">
+        {{ opt }}
+      </option>
+    </select>
+    <ul v-if="fieldErrors.length" class="errorlist">
+      <li v-for="(err, i) in fieldErrors" :key="i">{{ err }}</li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SelectEditor',
+  props: {
+    schema: { type: Object, required: true },
+    modelValue: { default: '' },
+    path: { type: Array, default: () => [] },
+    form: { type: Object, default: null },
+  },
+  emits: ['update:modelValue'],
+  computed: {
+    title() {
+      return this.schema.title || this.humanize(this.path[this.path.length - 1]) || '';
+    },
+    isRequired() {
+      if (this.path.length < 2 || !this.form) return false;
+      const parentPath = this.path.slice(0, -1);
+      const fieldName = this.path[this.path.length - 1];
+      const parentSchema = this.form.getSchemaAtPath(parentPath);
+      return parentSchema && Array.isArray(parentSchema.required) && parentSchema.required.includes(fieldName);
+    },
+    fieldErrors() {
+      if (!this.form || !this.form.getErrorsForPath) return [];
+      return this.form.getErrorsForPath(this.path);
+    },
+  },
+  methods: {
+    humanize(str) {
+      if (!str) return '';
+      return str.replace(/_/g, ' ').replace(/([a-z])([A-Z])/g, '$1 $2').replace(/^./, s => s.toUpperCase());
+    },
+  },
+};
+</script>

package/src/editors/StringEditor.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="sf-field" :class="{ errors: fieldErrors.length }">
+    <label class="sf-label" :class="{ required: isRequired }">{{ title }}</label>
+    <textarea
+      v-if="isLong"
+      class="sf-input sf-textarea"
+      rows="3"
+      :value="modelValue"
+      :placeholder="schema.placeholder || ''"
+      @input="$emit('update:modelValue', $event.target.value)"
+    />
+    <input
+      v-else
+      type="text"
+      class="sf-input"
+      :value="modelValue != null ? String(modelValue) : ''"
+      :placeholder="schema.placeholder || ''"
+      @input="$emit('update:modelValue', $event.target.value)"
+    />
+    <ul v-if="fieldErrors.length" class="errorlist">
+      <li v-for="(err, i) in fieldErrors" :key="i">{{ err }}</li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'StringEditor',
+  props: {
+    schema: { type: Object, required: true },
+    modelValue: { default: '' },
+    path: { type: Array, default: () => [] },
+    form: { type: Object, default: null },
+  },
+  emits: ['update:modelValue'],
+  computed: {
+    title() {
+      return this.schema.title || this.humanize(this.path[this.path.length - 1]) || '';
+    },
+    isRequired() {
+      if (this.path.length < 2 || !this.form) return false;
+      const parentPath = this.path.slice(0, -1);
+      const fieldName = this.path[this.path.length - 1];
+      const parentSchema = this.form.getSchemaAtPath(parentPath);
+      return parentSchema && Array.isArray(parentSchema.required) && parentSchema.required.includes(fieldName);
+    },
+    isLong() {
+      return this.schema.maxLength > 255 || this.schema.format === 'textarea';
+    },
+    fieldErrors() {
+      if (!this.form || !this.form.getErrorsForPath) return [];
+      return this.form.getErrorsForPath(this.path);
+    },
+  },
+  methods: {
+    humanize(str) {
+      if (!str) return '';
+      return str.replace(/_/g, ' ').replace(/([a-z])([A-Z])/g, '$1 $2').replace(/^./, s => s.toUpperCase());
+    },
+  },
+};
+</script>

package/src/editors/UnionEditor.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="sf-union">
+    <div class="sf-field">
+      <label class="sf-label">{{ title }}</label>
+      <select class="sf-input sf-select" :value="currentType" @change="onTypeChange">
+        <option v-for="key in typeKeys" :key="key" :value="key">{{ humanize(key) }}</option>
+      </select>
+    </div>
+    <div class="sf-union-body">
+      <SchemaEditor
+        :key="currentType"
+        :schema="currentSchema"
+        :model-value="innerValue"
+        :path="path"
+        :form="form"
+        @update:model-value="onInnerChange"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineAsyncComponent } from 'vue';
+import { getDefaultForSchema } from '../utils';
+
+export default {
+  name: 'UnionEditor',
+  components: { SchemaEditor: defineAsyncComponent(() => import('./SchemaEditor.vue')) },
+  props: {
+    schema: { type: Object, required: true },
+    modelValue: { default: null },
+    path: { type: Array, default: () => [] },
+    form: { type: Object, required: true },
+  },
+  emits: ['update:modelValue'],
+  data() {
+    const discriminatorProp = this.schema.discriminator.propertyName;
+    const mapping = this.schema.discriminator.mapping;
+    const currentType = this.modelValue ? this.modelValue[discriminatorProp] : Object.keys(mapping)[0];
+    return {
+      discriminatorProp,
+      mapping,
+      currentType,
+    };
+  },
+  computed: {
+    title() {
+      return this.schema.title || this.humanize(this.path[this.path.length - 1]) || '';
+    },
+    typeKeys() {
+      return Object.keys(this.mapping);
+    },
+    currentSchema() {
+      const ref = this.mapping[this.currentType];
+      return this.form.resolveSchema({ $ref: ref });
+    },
+    innerValue() {
+      if (this.modelValue && this.modelValue[this.discriminatorProp] === this.currentType) {
+        return this.modelValue;
+      }
+      const def = getDefaultForSchema(this.currentSchema);
+      def[this.discriminatorProp] = this.currentType;
+      return def;
+    },
+  },
+  methods: {
+    humanize(str) {
+      if (!str) return '';
+      return str.replace(/_/g, ' ').replace(/([a-z])([A-Z])/g, '$1 $2').replace(/^./, s => s.toUpperCase());
+    },
+    onTypeChange(e) {
+      this.currentType = e.target.value;
+      const def = getDefaultForSchema(this.currentSchema);
+      def[this.discriminatorProp] = this.currentType;
+      this.$emit('update:modelValue', def);
+    },
+    onInnerChange(val) {
+      if (val) val[this.discriminatorProp] = this.currentType;
+      this.$emit('update:modelValue', val);
+    },
+  },
+};
+</script>

package/src/index.js

@@ -0,0 +1,155 @@
+import './scss/main.scss';
+
+export { default as SchemaForm } from './SchemaForm.vue';
+export { default as SchemaEditor } from './editors/SchemaEditor.vue';
+export { default as StringEditor } from './editors/StringEditor.vue';
+export { default as NumberEditor } from './editors/NumberEditor.vue';
+export { default as BooleanEditor } from './editors/BooleanEditor.vue';
+export { default as SelectEditor } from './editors/SelectEditor.vue';
+export { default as HiddenEditor } from './editors/HiddenEditor.vue';
+export { default as ObjectEditor } from './editors/ObjectEditor.vue';
+export { default as ArrayEditor } from './editors/ArrayEditor.vue';
+export { default as NullableEditor } from './editors/NullableEditor.vue';
+export { default as UnionEditor } from './editors/UnionEditor.vue';
+export { default as RelationEditor } from './editors/RelationEditor.vue';
+
+import { createApp, h, ref, reactive } from 'vue';
+import SchemaFormComponent from './SchemaForm.vue';
+
+export class SchemaFormElement extends HTMLElement {
+  constructor() {
+    super();
+    this._formRef = ref(null);
+    this._props = reactive({
+      schema: {},
+      initialData: undefined,
+      errors: {},
+    });
+    this._app = null;
+    this._mountPoint = null;
+  }
+
+  connectedCallback() {
+    this._mountPoint = document.createElement('div');
+    this.appendChild(this._mountPoint);
+
+    // Read from attributes if properties haven't been set programmatically
+    if (!this._propsSet) {
+      const schemaAttr = this.getAttribute('schema');
+      const dataAttr = this.getAttribute('initial-data');
+      if (schemaAttr) this._props.schema = JSON.parse(schemaAttr);
+      if (dataAttr) this._props.initialData = JSON.parse(dataAttr);
+    }
+
+    const formRef = this._formRef;
+    const props = this._props;
+
+    this._app = createApp({
+      render: () => h(SchemaFormComponent, {
+        ref: formRef,
+        schema: props.schema,
+        initialData: props.initialData,
+        errors: props.errors,
+        onChange: (val) => {
+          this.dispatchEvent(new CustomEvent('change', { detail: val, bubbles: true }));
+        },
+      }),
+    });
+
+    this._app.mount(this._mountPoint);
+  }
+
+  disconnectedCallback() {
+    if (this._app) {
+      this._app.unmount();
+      this._app = null;
+    }
+    this._mountPoint = null;
+  }
+
+  // --- Property API ---
+
+  get schema() {
+    return this._props.schema;
+  }
+
+  set schema(val) {
+    this._propsSet = true;
+    this._props.schema = typeof val === 'string' ? JSON.parse(val) : val;
+    this._rerender();
+  }
+
+  get initialData() {
+    return this._props.initialData;
+  }
+
+  set initialData(val) {
+    this._propsSet = true;
+    this._props.initialData = typeof val === 'string' ? JSON.parse(val) : val;
+    this._rerender();
+  }
+
+  get errors() {
+    return this._props.errors;
+  }
+
+  set errors(val) {
+    this._propsSet = true;
+    this._props.errors = typeof val === 'string' ? JSON.parse(val) : (val || {});
+    this._rerender();
+  }
+
+  // --- Attribute reflection ---
+
+  static get observedAttributes() {
+    return ['schema', 'initial-data', 'errors'];
+  }
+
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (oldVal === newVal || this._propsSet) return;
+    if (name === 'schema') {
+      this._props.schema = newVal ? JSON.parse(newVal) : {};
+    } else if (name === 'initial-data') {
+      this._props.initialData = newVal ? JSON.parse(newVal) : undefined;
+    } else if (name === 'errors') {
+      this._props.errors = newVal ? JSON.parse(newVal) : {};
+    }
+    this._rerender();
+  }
+
+  // --- Public methods ---
+
+  getValue() {
+    return this._formRef.value?.getValue?.() ?? null;
+  }
+
+  // --- Internal ---
+
+  _rerender() {
+    if (!this._app) return;
+    this._app.unmount();
+    this._mountPoint.innerHTML = '';
+    const formRef = this._formRef;
+    const props = this._props;
+
+    this._app = createApp({
+      render: () => h(SchemaFormComponent, {
+        ref: formRef,
+        schema: props.schema,
+        initialData: props.initialData,
+        errors: props.errors,
+        onChange: (val) => {
+          this.dispatchEvent(new CustomEvent('change', { detail: val, bubbles: true }));
+        },
+      }),
+    });
+
+    this._app.mount(this._mountPoint);
+  }
+}
+
+export function registerCustomElement(tagName = 'schema-form') {
+  if (!customElements.get(tagName)) {
+    customElements.define(tagName, SchemaFormElement);
+  }
+}