@structured-field/widget-editor 0.1.0

package/src/scss/components/editors.scss

@@ -0,0 +1,162 @@
+.structured-field-editor {
+
+  // --- Field spacing ---
+  .sf-field {
+    margin-bottom: 12px;
+  }
+
+  .sf-field-boolean {
+    margin-bottom: 8px;
+  }
+
+  // --- Object editor ---
+  .sf-object {
+    &.sf-object-root {
+      // Root level: no border
+    }
+
+    &:not(.sf-object-root) {
+      border: 1px solid var(--border-color, #ccc);
+      border-radius: 4px;
+      padding: 12px;
+      margin-bottom: 12px;
+      background: var(--body-bg, #fff);
+    }
+  }
+
+  .sf-object-title {
+    font-weight: 600;
+    font-size: 0.8125rem;
+    color: var(--body-fg, #333);
+    text-transform: capitalize;
+    padding: 0 4px;
+  }
+
+  .sf-object-fields {
+    display: flex;
+    flex-direction: column;
+  }
+
+  // --- Array editor ---
+  .sf-array {
+    margin-bottom: 12px;
+  }
+
+  .sf-array-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 8px;
+
+    .sf-label {
+      margin-bottom: 0;
+    }
+  }
+
+  .sf-array-count {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 20px;
+    height: 20px;
+    padding: 0 6px;
+    background: var(--darkened-bg, #f0f0f0);
+    border-radius: 10px;
+    font-size: 0.6875rem;
+    font-weight: 600;
+    color: var(--body-quiet-color, #666);
+  }
+
+  .sf-array-items {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .sf-array-item {
+    border: 1px solid var(--border-color, #ccc);
+    border-radius: 4px;
+    background: var(--darkened-bg, #f8f8f8);
+    overflow: hidden;
+  }
+
+  .sf-array-item-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 4px 8px;
+    background: var(--darkened-bg, #f0f0f0);
+    border-bottom: 1px solid var(--border-color, #ccc);
+  }
+
+  .sf-array-item-index {
+    font-size: 0.6875rem;
+    font-weight: 600;
+    color: var(--body-quiet-color, #666);
+  }
+
+  .sf-array-item-actions {
+    display: flex;
+    gap: 4px;
+  }
+
+  .sf-array-item-body {
+    padding: 10px;
+
+    > .sf-object.sf-object-root,
+    > .sf-object:not(.sf-object-root) {
+      border: none;
+      padding: 0;
+      margin: 0;
+      background: transparent;
+    }
+  }
+
+  // --- Nullable editor ---
+  .sf-nullable {
+    margin-bottom: 12px;
+  }
+
+  .sf-nullable-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 4px;
+
+    .sf-label {
+      margin-bottom: 0;
+    }
+  }
+
+  .sf-nullable-body {
+    padding-left: 0;
+
+    &:not(:empty) {
+      border: 1px solid var(--border-color, #ccc);
+      border-radius: 4px;
+      padding: 12px;
+      margin-top: 4px;
+      background: var(--body-bg, #fff);
+    }
+  }
+
+  // --- Union editor ---
+  .sf-union {
+    margin-bottom: 12px;
+  }
+
+  .sf-union-body {
+    border: 1px solid var(--border-color, #ccc);
+    border-radius: 4px;
+    padding: 12px;
+    margin-top: 8px;
+    background: var(--body-bg, #fff);
+
+    > .sf-object {
+      border: none;
+      padding: 0;
+      margin: 0;
+      background: transparent;
+    }
+  }
+}

package/src/scss/components/form.scss

@@ -0,0 +1,137 @@
+.structured-field-editor {
+  width: 100%;
+  border-radius: 4px;
+  font-size: 0.8125rem;
+
+  *, *::before, *::after {
+    box-sizing: border-box;
+  }
+
+  .sf-label {
+    display: block;
+    font-weight: 600;
+    margin-bottom: 4px;
+    text-transform: capitalize;
+    color: var(--body-quiet-color, #666);
+    font-size: 0.8125rem;
+
+    &.required::after {
+      content: " *";
+      color: var(--error-fg, #ba2121);
+    }
+  }
+
+  .sf-input {
+    display: block;
+    width: 100%;
+    padding: 6px 8px;
+    border: 1px solid var(--border-color, #ccc);
+    border-radius: 4px;
+    background: var(--body-bg, #fff);
+    color: var(--body-fg, #333);
+    font-size: 0.8125rem;
+    font-family: inherit;
+    transition: border-color 0.15s;
+
+    &:focus {
+      outline: none;
+      border-color: var(--primary, #79aec8);
+      box-shadow: 0 0 0 2px rgba(121, 174, 200, 0.2);
+    }
+  }
+
+  .sf-textarea {
+    resize: vertical;
+    min-height: 60px;
+  }
+
+  .sf-select {
+    appearance: auto;
+    cursor: pointer;
+  }
+
+  .sf-checkbox {
+    margin-right: 6px;
+    accent-color: var(--primary, #79aec8);
+  }
+
+  .sf-checkbox-label {
+    display: flex;
+    align-items: center;
+    font-weight: normal;
+    cursor: pointer;
+    padding: 6px 0;
+  }
+
+  .sf-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 4px 12px;
+    background: var(--object-tools-bg, #888);
+    color: var(--object-tools-fg, #fff);
+    font-weight: 400;
+    font-size: 0.6875rem;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    border-radius: 15px;
+    border: none;
+    cursor: pointer;
+    transition: background-color 0.15s;
+
+    &:hover {
+      background-color: var(--object-tools-hover-bg, #666);
+    }
+
+    i {
+      font-size: 0.6rem;
+    }
+  }
+
+  .sf-btn-sm {
+    padding: 2px 8px;
+    font-size: 0.625rem;
+  }
+
+  .sf-btn-add {
+    background: var(--object-tools-bg, #888);
+    color: var(--object-tools-fg, #fff);
+  }
+
+  .sf-btn-danger {
+    background: var(--delete-button-bg, #ba2121);
+    color: var(--delete-button-fg, #fff);
+
+    &:hover {
+      background: #a41515;
+    }
+  }
+
+  .sf-error {
+    color: var(--error-fg, #ba2121);
+    font-size: 0.75rem;
+    margin-top: 2px;
+  }
+
+  .errors {
+    .sf-input {
+      border-color: var(--error-fg, #ba2121);
+    }
+  }
+
+  .errorlist {
+    margin: 4px 0 0 0;
+    padding: 0;
+    list-style: none;
+    color: var(--error-fg, #ba2121);
+    font-size: 0.75rem;
+
+    li {
+      padding: 2px 0;
+    }
+  }
+}
+
+.form-row {
+  overflow: visible !important;
+}

package/src/scss/components/relation.scss

@@ -0,0 +1,134 @@
+.structured-field-editor {
+
+  // --- Relation field ---
+  .sf-relation {
+    position: relative;
+  }
+
+  .sf-relation-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+  }
+
+  .sf-relation-selected {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+
+    &:empty {
+      display: none;
+    }
+  }
+
+  .sf-relation-tag {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 4px 10px;
+    background: var(--darkened-bg, #f0f0f0);
+    border: 1px solid var(--border-color, #ccc);
+    border-radius: 4px;
+    font-size: 0.8125rem;
+    color: var(--body-fg, #333);
+    max-width: 100%;
+  }
+
+  .sf-relation-tag-text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .sf-relation-tag-remove {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 18px;
+    height: 18px;
+    padding: 0;
+    border: none;
+    border-radius: 50%;
+    background: transparent;
+    color: var(--body-quiet-color, #666);
+    cursor: pointer;
+    font-size: 0.6875rem;
+    flex-shrink: 0;
+    transition: color 0.15s, background 0.15s;
+
+    &:hover {
+      color: var(--error-fg, #ba2121);
+      background: rgba(186, 33, 33, 0.1);
+    }
+  }
+
+  // --- Search input ---
+  .sf-relation-search {
+    position: relative;
+  }
+
+  .sf-relation-input {
+    padding-left: 28px;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: 8px center;
+    background-size: 14px;
+  }
+
+  // --- Dropdown ---
+  .sf-relation-dropdown {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    z-index: 1000;
+    max-height: 240px;
+    overflow-y: auto;
+    background: var(--body-bg, #fff);
+    border: 1px solid var(--border-color, #ccc);
+    border-top: none;
+    border-radius: 0 0 4px 4px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  }
+
+  .sf-relation-dropdown-item {
+    padding: 8px 12px;
+    cursor: pointer;
+    font-size: 0.8125rem;
+    color: var(--body-fg, #333);
+    transition: background 0.1s;
+    border-bottom: 1px solid var(--hairline-color, #eee);
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    &:hover,
+    &.highlighted {
+      background: var(--selected-bg, #e4e4e4);
+    }
+  }
+
+  .sf-relation-dropdown-empty {
+    padding: 12px;
+    text-align: center;
+    color: var(--body-quiet-color, #999);
+    font-size: 0.8125rem;
+    font-style: italic;
+  }
+
+  .sf-relation-dropdown-more {
+    padding: 8px 12px;
+    text-align: center;
+    cursor: pointer;
+    font-size: 0.75rem;
+    color: var(--link-fg, #417690);
+    font-weight: 600;
+    border-top: 1px solid var(--hairline-color, #eee);
+    transition: background 0.1s;
+
+    &:hover {
+      background: var(--darkened-bg, #f0f0f0);
+    }
+  }
+}

package/src/scss/main.scss

@@ -0,0 +1,3 @@
+@import './components/form.scss';
+@import './components/editors.scss';
+@import './components/relation.scss';

package/src/utils.js

@@ -0,0 +1,38 @@
+export function debounce(fn, delay) {
+  let timer;
+  return function (...args) {
+    clearTimeout(timer);
+    timer = setTimeout(() => fn.apply(this, args), delay);
+  };
+}
+
+export function deepClone(obj) {
+  if (obj === null || typeof obj !== 'object') return obj;
+  if (Array.isArray(obj)) return obj.map(deepClone);
+  const clone = {};
+  for (const key of Object.keys(obj)) {
+    clone[key] = deepClone(obj[key]);
+  }
+  return clone;
+}
+
+export function getDefaultForSchema(schema) {
+  if ('default' in schema) return deepClone(schema.default);
+  if (schema.type === 'object') {
+    const obj = {};
+    for (const [key, prop] of Object.entries(schema.properties || {})) {
+      if ('default' in prop) obj[key] = deepClone(prop.default);
+      else if (prop.type === 'string') obj[key] = '';
+      else if (prop.type === 'integer' || prop.type === 'number') obj[key] = 0;
+      else if (prop.type === 'boolean') obj[key] = false;
+      else if (prop.type === 'array') obj[key] = [];
+    }
+    return obj;
+  }
+  if (schema.type === 'array') return [];
+  if (schema.type === 'string') return '';
+  if (schema.type === 'integer' || schema.type === 'number') return 0;
+  if (schema.type === 'boolean') return false;
+  if (schema.type === 'relation') return schema.multiple ? [] : null;
+  return null;
+}