@structured-field/widget-editor 0.1.0

package/package.json

@@ -0,0 +1,105 @@
+{
+  "name": "@structured-field/widget-editor",
+  "version": "0.1.0",
+  "description": "A lightweight JSON Schema form builder with support for relation fields (ForeignKey, QuerySet) and autocomplete search.",
+  "type": "module",
+  "main": "dist/structured-widget-editor.js",
+  "module": "dist/structured-widget-editor.esm.js",
+  "exports": {
+    ".": {
+      "import": "./dist/structured-widget-editor.esm.js",
+      "require": "./dist/structured-widget-editor.js"
+    },
+    "./iife": "./dist/structured-widget-editor.iife.js",
+    "./css": "./dist/structured-widget-editor.css",
+    "./scss": "./src/scss/main.scss"
+  },
+  "files": [
+    "dist",
+    "src",
+    "LICENSE",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "rollup -c && node scripts/bundle-iife.mjs",
+    "build:cdn": "rollup -c && node scripts/bundle-iife.mjs",
+    "dev": "rollup -c -w",
+    "test:serve": "vite --open"
+  },
+  "keywords": [
+    "json-schema",
+    "form-builder",
+    "structured",
+    "widget",
+    "editor",
+    "autocomplete",
+    "relation"
+  ],
+  "author": "Lotrek",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^29.0.2",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@vitejs/plugin-vue": "^6.0.4",
+    "@vue/compiler-sfc": "^3.5.30",
+    "happy-dom": "^20.8.3",
+    "rollup": "^4.9.1",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-scss": "^4.0.0",
+    "rollup-plugin-vue": "^6.0.0",
+    "sass": "^1.69.7",
+    "vite": "^7.3.1",
+    "vitest": "^4.0.18"
+  },
+  "dependencies": {
+    "vue": "^3.5.30"
+  },
+  "release": {
+    "branches": [
+      "master"
+    ],
+    "plugins": [
+      "@semantic-release/commit-analyzer",
+      "@semantic-release/release-notes-generator",
+      "@semantic-release/changelog",
+      "@semantic-release/npm",
+      [
+        "@semantic-release/git",
+        {
+          "assets": [
+            "package.json",
+            "CHANGELOG.md"
+          ],
+          "message": "chore(release): ${nextRelease.version} [skip ci]"
+        }
+      ],
+      [
+        "@semantic-release/github",
+        {
+          "assets": [
+            {
+              "path": "dist/structured-widget-editor.iife.js",
+              "label": "IIFE bundle with embedded CSS (${nextRelease.version})"
+            },
+            {
+              "path": "dist/structured-widget-editor.js",
+              "label": "IIFE bundle (${nextRelease.version})"
+            },
+            {
+              "path": "dist/structured-widget-editor.css",
+              "label": "CSS stylesheet (${nextRelease.version})"
+            },
+            {
+              "path": "dist/structured-widget-editor.esm.js",
+              "label": "ESM module (${nextRelease.version})"
+            }
+          ]
+        }
+      ]
+    ]
+  }
+}

package/src/SchemaForm.vue

@@ -0,0 +1,142 @@
+<template>
+  <div class="structured-field-editor">
+    <SchemaEditor
+      v-if="resolvedSchema"
+      :schema="resolvedSchema"
+      :model-value="currentValue"
+      :path="[]"
+      :form="formApi"
+      @update:model-value="onValueChange"
+    />
+  </div>
+</template>
+
+<script>
+import SchemaEditor from './editors/SchemaEditor.vue';
+import { deepClone } from './utils';
+
+export default {
+  name: 'SchemaForm',
+  components: { SchemaEditor },
+  props: {
+    schema: { type: [Object, String], default: () => ({}) },
+    initialData: { default: undefined },
+    errors: { type: Object, default: () => ({}) },
+  },
+  emits: ['change'],
+  data() {
+    const parsedSchema = typeof this.schema === 'string' ? JSON.parse(this.schema) : this.schema;
+    const defs = parsedSchema.$defs || parsedSchema.definitions || {};
+    return {
+      rootSchema: parsedSchema,
+      defs,
+      currentValue: this.initialData != null ? deepClone(this.initialData) : undefined,
+    };
+  },
+  computed: {
+    resolvedSchema() {
+      return this.resolveSchema(this.rootSchema);
+    },
+    formApi() {
+      return {
+        resolveSchema: (s) => this.resolveSchema(s),
+        getSchemaAtPath: (p) => this.getSchemaAtPath(p),
+        getErrorsForPath: (p) => this.getErrorsForPath(p),
+      };
+    },
+  },
+  watch: {
+    schema: {
+      handler(val) {
+        const parsed = typeof val === 'string' ? JSON.parse(val) : val;
+        this.rootSchema = parsed;
+        this.defs = parsed.$defs || parsed.definitions || {};
+      },
+      deep: true,
+    },
+    initialData: {
+      handler(val) {
+        this.currentValue = val != null ? deepClone(val) : undefined;
+      },
+      deep: true,
+    },
+  },
+  methods: {
+    resolveSchema(schema) {
+      if (!schema) return { type: 'string' };
+
+      if (schema.$ref) {
+        const refPath = schema.$ref.replace(/^#\/\$defs\//, '').replace(/^#\/definitions\//, '');
+        const resolved = this.defs[refPath];
+        if (!resolved) return { type: 'string', title: refPath };
+        const { $ref, ...rest } = schema;
+        return { ...this.resolveSchema(resolved), ...rest };
+      }
+
+      if (schema.anyOf) {
+        const nonNull = schema.anyOf.filter(s => s.type !== 'null');
+        const hasNull = schema.anyOf.some(s => s.type === 'null');
+        if (hasNull && nonNull.length === 1) {
+          const resolved = this.resolveSchema(nonNull[0]);
+          return {
+            ...resolved,
+            _nullable: true,
+            title: schema.title || resolved.title,
+            default: 'default' in schema ? schema.default : null,
+          };
+        }
+        if (nonNull.length >= 1) return this.resolveSchema(nonNull[0]);
+      }
+
+      if (schema.oneOf && schema.discriminator) return schema;
+
+      if (schema.oneOf) {
+        const nonNull = schema.oneOf.filter(s => s.type !== 'null');
+        const hasNull = schema.oneOf.some(s => s.type === 'null');
+        if (hasNull && nonNull.length === 1) {
+          const resolved = this.resolveSchema(nonNull[0]);
+          return {
+            ...resolved,
+            _nullable: true,
+            title: schema.title || resolved.title,
+            default: 'default' in schema ? schema.default : null,
+          };
+        }
+        if (nonNull.length >= 1) return this.resolveSchema(nonNull[0]);
+      }
+
+      return schema;
+    },
+
+    getSchemaAtPath(path) {
+      let schema = this.resolveSchema(this.rootSchema);
+      for (const segment of path) {
+        if (!schema) return null;
+        if (schema.properties && schema.properties[segment]) {
+          schema = this.resolveSchema(schema.properties[segment]);
+        } else if (schema.items) {
+          schema = this.resolveSchema(schema.items);
+        } else {
+          return null;
+        }
+      }
+      return schema;
+    },
+
+    onValueChange(val) {
+      this.currentValue = val;
+      this.$emit('change', val);
+    },
+
+    getErrorsForPath(path) {
+      if (!this.errors || typeof this.errors !== 'object') return [];
+      const key = path.join('.');
+      return this.errors[key] || [];
+    },
+
+    getValue() {
+      return this.currentValue;
+    },
+  },
+};
+</script>

package/src/editors/ArrayEditor.vue

@@ -0,0 +1,108 @@
+<template>
+  <div class="sf-array" :class="{ errors: fieldErrors.length }">
+    <div class="sf-array-header">
+      <span class="sf-label">{{ title }}</span>
+      <span class="sf-array-count">{{ items.length }}</span>
+      <button type="button" class="sf-btn sf-btn-add" @click="addItem()">
+        <i class="fas fa-plus"></i> Add
+      </button>
+    </div>
+    <div class="sf-array-items">
+      <div v-for="(item, index) in items" :key="item._key" class="sf-array-item">
+        <div class="sf-array-item-header">
+          <span class="sf-array-item-index">#{{ index + 1 }}</span>
+          <div class="sf-array-item-actions">
+            <button v-if="index > 0" type="button" class="sf-btn sf-btn-sm" @click="moveItem(index, -1)">
+              <i class="fas fa-arrow-up"></i>
+            </button>
+            <button type="button" class="sf-btn sf-btn-sm" @click="moveItem(index, 1)">
+              <i class="fas fa-arrow-down"></i>
+            </button>
+            <button type="button" class="sf-btn sf-btn-sm sf-btn-danger" @click="removeItem(index)">
+              <i class="fas fa-times"></i>
+            </button>
+          </div>
+        </div>
+        <div class="sf-array-item-body">
+          <SchemaEditor
+            :schema="itemSchema"
+            :model-value="item.value"
+            :path="[...path, String(index)]"
+            :form="form"
+            @update:model-value="onItemChange(index, $event)"
+          />
+        </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 { defineAsyncComponent } from 'vue';
+import { getDefaultForSchema } from '../utils';
+
+let keyCounter = 0;
+
+export default {
+  name: 'ArrayEditor',
+  components: { SchemaEditor: defineAsyncComponent(() => import('./SchemaEditor.vue')) },
+  props: {
+    schema: { type: Object, required: true },
+    modelValue: { default: () => [] },
+    path: { type: Array, default: () => [] },
+    form: { type: Object, required: true },
+  },
+  emits: ['update:modelValue'],
+  data() {
+    const arr = Array.isArray(this.modelValue) ? this.modelValue : [];
+    return {
+      items: arr.map(v => ({ _key: keyCounter++, value: v })),
+    };
+  },
+  computed: {
+    title() {
+      return this.schema.title || this.humanize(this.path[this.path.length - 1]) || '';
+    },
+    itemSchema() {
+      return this.form.resolveSchema(this.schema.items || {});
+    },
+    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());
+    },
+    addItem() {
+      const value = getDefaultForSchema(this.itemSchema);
+      this.items.push({ _key: keyCounter++, value });
+      this.emitValue();
+    },
+    removeItem(index) {
+      this.items.splice(index, 1);
+      this.emitValue();
+    },
+    moveItem(index, direction) {
+      const newIndex = index + direction;
+      if (newIndex < 0 || newIndex >= this.items.length) return;
+      const temp = this.items[index];
+      this.items.splice(index, 1, this.items[newIndex]);
+      this.items.splice(newIndex, 1, temp);
+      this.emitValue();
+    },
+    onItemChange(index, value) {
+      this.items[index].value = value;
+      this.emitValue();
+    },
+    emitValue() {
+      this.$emit('update:modelValue', this.items.map(i => i.value));
+    },
+  },
+};
+</script>

package/src/editors/BooleanEditor.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="sf-field sf-field-boolean" :class="{ errors: fieldErrors.length }">
+    <label class="sf-checkbox-label">
+      <input
+        type="checkbox"
+        class="sf-checkbox"
+        :checked="!!modelValue"
+        @change="$emit('update:modelValue', $event.target.checked)"
+      />
+      {{ title }}
+    </label>
+    <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: 'BooleanEditor',
+  props: {
+    schema: { type: Object, required: true },
+    modelValue: { default: false },
+    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]) || '';
+    },
+    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/HiddenEditor.vue

@@ -0,0 +1,33 @@
+<template>
+  <div style="display: none"></div>
+</template>
+
+<script>
+export default {
+  name: 'HiddenEditor',
+  props: {
+    schema: { type: Object, required: true },
+    modelValue: { default: null },
+    path: { type: Array, default: () => [] },
+    form: { type: Object, default: null },
+  },
+  emits: ['update:modelValue'],
+  computed: {
+    resolvedValue() {
+      if ('const' in this.schema) return this.schema.const;
+      if (this.schema.enum && this.schema.enum.length === 1) return this.schema.enum[0];
+      return this.modelValue;
+    },
+  },
+  mounted() {
+    if (this.resolvedValue !== this.modelValue) {
+      this.$emit('update:modelValue', this.resolvedValue);
+    }
+  },
+  methods: {
+    getValue() {
+      return this.resolvedValue;
+    },
+  },
+};
+</script>

package/src/editors/NullableEditor.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="sf-nullable" :class="{ errors: fieldErrors.length }">
+    <div class="sf-nullable-header">
+      <label class="sf-label" :class="{ required: isRequired }">{{ title }}</label>
+      <button type="button" :class="toggleClass" @click="toggle">
+        <template v-if="isNull">
+          <i class="fas fa-plus"></i> Add
+        </template>
+        <template v-else>
+          <i class="fas fa-times"></i> Remove
+        </template>
+      </button>
+    </div>
+    <div class="sf-nullable-body">
+      <SchemaEditor
+        v-if="!isNull"
+        :schema="innerSchema"
+        :model-value="modelValue"
+        :path="path"
+        :form="form"
+        @update:model-value="$emit('update:modelValue', $event)"
+      />
+    </div>
+    <ul v-if="fieldErrors.length" class="errorlist">
+      <li v-for="(err, i) in fieldErrors" :key="i">{{ err }}</li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import { defineAsyncComponent } from 'vue';
+import { getDefaultForSchema } from '../utils';
+
+export default {
+  name: 'NullableEditor',
+  components: { SchemaEditor: defineAsyncComponent(() => import('./SchemaEditor.vue')) },
+  props: {
+    schema: { type: Object, required: true },
+    modelValue: { default: null },
+    path: { type: Array, default: () => [] },
+    form: { type: Object, default: null },
+  },
+  emits: ['update:modelValue'],
+  data() {
+    return {
+      isNull: this.modelValue === null || this.modelValue === undefined,
+    };
+  },
+  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);
+    },
+    innerSchema() {
+      const s = { ...this.schema };
+      delete s._nullable;
+      return s;
+    },
+    toggleClass() {
+      return this.isNull ? 'sf-btn sf-btn-sm sf-btn-add' : 'sf-btn sf-btn-sm sf-btn-danger';
+    },
+    fieldErrors() {
+      if (!this.form || !this.form.getErrorsForPath) return [];
+      return this.form.getErrorsForPath(this.path);
+    },
+  },
+  watch: {
+    modelValue(val) {
+      this.isNull = val === null || val === undefined;
+    },
+  },
+  methods: {
+    humanize(str) {
+      if (!str) return '';
+      return str.replace(/_/g, ' ').replace(/([a-z])([A-Z])/g, '$1 $2').replace(/^./, s => s.toUpperCase());
+    },
+    toggle() {
+      if (this.isNull) {
+        this.isNull = false;
+        this.$emit('update:modelValue', getDefaultForSchema(this.innerSchema));
+      } else {
+        this.isNull = true;
+        this.$emit('update:modelValue', null);
+      }
+    },
+  },
+};
+</script>

package/src/editors/NumberEditor.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="sf-field" :class="{ errors: fieldErrors.length }">
+    <label class="sf-label" :class="{ required: isRequired }">{{ title }}</label>
+    <input
+      type="number"
+      class="sf-input"
+      :step="schema.type === 'integer' ? '1' : 'any'"
+      :min="schema.minimum != null ? String(schema.minimum) : undefined"
+      :max="schema.maximum != null ? String(schema.maximum) : undefined"
+      :value="modelValue != null ? modelValue : ''"
+      @input="onInput"
+    />
+    <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: 'NumberEditor',
+  props: {
+    schema: { type: Object, required: true },
+    modelValue: { default: 0 },
+    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());
+    },
+    onInput(e) {
+      const raw = e.target.value;
+      if (raw === '') {
+        this.$emit('update:modelValue', 0);
+      } else {
+        this.$emit('update:modelValue', this.schema.type === 'integer' ? parseInt(raw, 10) : parseFloat(raw));
+      }
+    },
+  },
+};
+</script>

package/src/editors/ObjectEditor.vue

@@ -0,0 +1,63 @@
+<template>
+  <div v-if="isRoot" class="sf-object sf-object-root">
+    <div class="sf-object-fields">
+      <SchemaEditor
+        v-for="(propSchema, key) in (schema.properties || {})"
+        :key="key"
+        :schema="form.resolveSchema(propSchema)"
+        :model-value="(modelValue || {})[key]"
+        :path="[...path, key]"
+        :form="form"
+        @update:model-value="onChildChange(key, $event)"
+      />
+    </div>
+  </div>
+  <fieldset v-else class="sf-object">
+    <legend class="sf-object-title">{{ title }}</legend>
+    <div class="sf-object-fields">
+      <SchemaEditor
+        v-for="(propSchema, key) in (schema.properties || {})"
+        :key="key"
+        :schema="form.resolveSchema(propSchema)"
+        :model-value="(modelValue || {})[key]"
+        :path="[...path, key]"
+        :form="form"
+        @update:model-value="onChildChange(key, $event)"
+      />
+    </div>
+  </fieldset>
+</template>
+
+<script>
+import { defineAsyncComponent } from 'vue';
+
+export default {
+  name: 'ObjectEditor',
+  components: { SchemaEditor: defineAsyncComponent(() => import('./SchemaEditor.vue')) },
+  props: {
+    schema: { type: Object, required: true },
+    modelValue: { default: () => ({}) },
+    path: { type: Array, default: () => [] },
+    form: { type: Object, required: true },
+  },
+  emits: ['update:modelValue'],
+  computed: {
+    isRoot() {
+      return this.path.length === 0;
+    },
+    title() {
+      return this.schema.title || this.humanize(this.path[this.path.length - 1]) || '';
+    },
+  },
+  methods: {
+    humanize(str) {
+      if (!str) return '';
+      return str.replace(/_/g, ' ').replace(/([a-z])([A-Z])/g, '$1 $2').replace(/^./, s => s.toUpperCase());
+    },
+    onChildChange(key, value) {
+      const newVal = { ...(this.modelValue || {}), [key]: value };
+      this.$emit('update:modelValue', newVal);
+    },
+  },
+};
+</script>