1.3.0

Author: adamberecz

.github/ISSUE_TEMPLATE/bug-report.yml

@@ -6,7 +6,7 @@ body:
     attributes:
       value: |
         Please use a template below to create a minimal reproduction
-        👉 https://codesandbox.io/p/sandbox/github/vueform/builder-sandbox/tree/main
+        👉 https://stackblitz.com/github/vueform/builder-sandbox
   - type: textarea
     id: bug-env
     attributes:
@@ -19,7 +19,7 @@ body:
     id: reproduction
     attributes:
       label: Reproduction
-      description: Please provide a link to a repo that can reproduce the problem you ran into. A [**minimal reproduction**](https://codesandbox.io/p/sandbox/github/vueform/builder-sandbox/tree/main) is required unless you are absolutely sure that the issue is obvious and the provided information is enough to understand the problem. If a report is vague (e.g. just a generic error message) and has no reproduction, it will receive a "need reproduction" label. If no reproduction is provided we might close it.
+      description: Please provide a link to a repo that can reproduce the problem you ran into. A [**minimal reproduction**](https://stackblitz.com/github/vueform/builder-sandbox) is required unless you are absolutely sure that the issue is obvious and the provided information is enough to understand the problem. If a report is vague (e.g. just a generic error message) and has no reproduction, it will receive a "need reproduction" label. If no reproduction is provided we might close it.
       placeholder: Reproduction
     validations:
       required: true

CHANGELOG.md

@@ -1,5 +1,17 @@
 [//]: # (Don't use <tags>)
 
+## v1.3.0
+
+> `2024-03-19`
+
+### 🎉 Feature
+- [Simple preset](https://builder.vueform.com/docs/presets#available-presets) added.
+- Allow `formatLoad` on config elements' schema.
+- Added `formDefaults`, `transformElement` and `names` options to config.
+- Element name increments now respect container element names.
+- Added placeholder for list/container elements.
+- All imports should now be proper modules.
+
 ## v1.2.0
 
 > `2024-02-19`

index.css

@@ -1052,6 +1052,10 @@ input.vfb-clr-color:focus {
   @apply absolute top-1.5 -right-0.5;
 }
 
+.vfb-util-props-group-container {
+  @apply col-span-12;
+}
+
 .vfb-util-props-group {
   @apply my-4;
 }
@@ -3331,6 +3335,12 @@ div > div:first-of-type[style*="none;"] + .vfb-util-props-separator-top {
   --vf-container-bg-dynamic-3: rgb(255 0 244 / 15%);
   --vf-container-bg-dynamic-4: rgb(255 0 0 / 20%);
   --vf-container-bg-dynamic-5: rgb(0 0 0 / 12%);
+  --vf-container-text-neutral: rgb(149 161 170);
+  --vf-container-text-dynamic-1: rgb(91, 153, 168);
+  --vf-container-text-dynamic-2: rgb(99 115 180);
+  --vf-container-text-dynamic-3: rgb(139 86 137);
+  --vf-container-text-dynamic-4: rgb(154 13 13);
+  --vf-container-text-dynamic-5: rgb(0 0 0 / 54%);
 }
 
 .vfb-preview-wrapper-dark .vfb-preview-element-container-nested,
@@ -3341,35 +3351,47 @@ div > div:first-of-type[style*="none;"] + .vfb-util-props-separator-top {
   --vf-container-bg-dynamic-3: rgb(0 255 12 / 20%);
   --vf-container-bg-dynamic-4: rgb(0 3 255 / 20%);
   --vf-container-bg-dynamic-5: rgb(0 0 0 / 20%);
+  --vf-container-text-neutral: rgb(255 255 255 / 100%);
+  --vf-container-text-dynamic-1: rgb(0 208 255 / 100%);
+  --vf-container-text-dynamic-2: rgb(2 215 130 / 100%);
+  --vf-container-text-dynamic-3: rgb(0 255 12 / 100%);
+  --vf-container-text-dynamic-4: rgb(0 3 255 / 100%);
+  --vf-container-text-dynamic-5: rgb(0 0 0 / 100%);
 }
 
 .vfb-preview-element-container-nested {
   --vf-container-bg: var(--vf-container-bg-neutral);
+  --vf-container-text: var(--vf-container-text-neutral);
 }
 
 .vfb-preview-element-container-list,
 .vfb-preview-element-container-list .vfb-preview-element-container-nested {
   --vf-container-bg: var(--vf-container-bg-dynamic-1);
+  --vf-container-text: var(--vf-container-text-dynamic-1);
 }
 
 .vfb-preview-element-container-list .vfb-preview-element-container-list,
 .vfb-preview-element-container-list .vfb-preview-element-container-list .vfb-preview-element-container-nested {
   --vf-container-bg: var(--vf-container-bg-dynamic-2);
+  --vf-container-text: var(--vf-container-text-dynamic-2);
 }
 
 .vfb-preview-element-container-list .vfb-preview-element-container-list .vfb-preview-element-container-list,
 .vfb-preview-element-container-list .vfb-preview-element-container-list .vfb-preview-element-container-list .vfb-preview-element-container-nested {
   --vf-container-bg: var(--vf-container-bg-dynamic-3);
+  --vf-container-text: var(--vf-container-text-dynamic-3);
 }
 
 .vfb-preview-element-container-list .vfb-preview-element-container-list .vfb-preview-element-container-list .vfb-preview-element-container-list,
 .vfb-preview-element-container-list .vfb-preview-element-container-list .vfb-preview-element-container-list .vfb-preview-element-container-list .vfb-preview-element-container-nested {
   --vf-container-bg: var(--vf-container-bg-dynamic-4);
+  --vf-container-text: var(--vf-container-text-dynamic-4);
 }
 
 .vfb-preview-element-container-list .vfb-preview-element-container-list .vfb-preview-element-container-list .vfb-preview-element-container-list .vfb-preview-element-container-list,
 .vfb-preview-element-container-list .vfb-preview-element-container-list .vfb-preview-element-container-list .vfb-preview-element-container-list .vfb-preview-element-container-list .vfb-preview-element-container-nested {
   --vf-container-bg: var(--vf-container-bg-dynamic-5);
+  --vf-container-text: var(--vf-container-text-dynamic-5);
 }
 
 .vfb-preview-element-container-no-visual-nesting {
@@ -3588,4 +3610,13 @@ div > div:first-of-type[style*="none;"] + .vfb-util-props-separator-top {
 }
 .vfb-preview-wrapper-preview .vfb-preview-nested-list-element-wrapper {
   @apply z-auto;
+}
+
+.vfb-drag-placeholder-container {
+  color: var(--vf-container-text);
+  @apply col-span-12 text-[32px] flex items-center justify-center flex-col my-3 text-center;
+}
+
+.vfb-drag-placeholder-text {
+  @apply text-base mt-2 leading-tight;
 }

index.d.ts renamed to index.d.mts

@@ -63,6 +63,10 @@ interface BuilderConfig {
   element?: ElementPanelConfig;
   elements?: string[];
   excludeElements?: string[];
+  preset?: BuilderConfig;
+  names?: boolean;
+  transformElement?: boolean | function;
+  formDefaults?: object;
   [key: string]: any;
 }
 

index.js

@@ -25,24 +25,25 @@ export default defineNuxtModule<ModuleOptions>({
 
     nuxt.hook('prepare:types', (opts) => {
       opts.references.push({ types: '@vueform/vueform' })
+      opts.references.push({ types: '@vueform/builder' })
     })
 
     nuxt.options.build.transpile.push('@vueform/vueform')
     nuxt.options.build.transpile.push('@vueform/builder')
 
-    nuxt.options.vite.optimizeDeps = {
-      ...(nuxt.options.vite.optimizeDeps || {}),
-      include: [
-        ...(nuxt.options.vite.optimizeDeps?.include || []),
-        'wnumb',
-        'nouislider',
-        'trix',
-        'lodash',
-        'axios',
-        'json5',
-        'prismjs',
-      ]
-    }
+    // nuxt.options.vite.optimizeDeps = {
+    //   ...(nuxt.options.vite.optimizeDeps || {}),
+    //   include: [
+    //     ...(nuxt.options.vite.optimizeDeps?.include || []),
+    //     'wnumb',
+    //     'nouislider',
+    //     'trix',
+    //     'lodash',
+    //     'axios',
+    //     'json5',
+    //     'prismjs',
+    //   ]
+    // }
 
     let configBase = resolve(
       nuxt.options.rootDir,

index.mjs

@@ -1,7 +1,7 @@
 {
   "private": false,
   "name": "@vueform/builder",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Vueform Builder development build.",
   "homepage": "https://vueform.com",
   "license": "SEE LICENSE IN LICENSE.txt",
@@ -11,8 +11,52 @@
       "email": "[email protected]"
     }
   ],
-  "main": "index.js",
+  "sideEffects": false,
+  "main": "index.mjs",
+  "module": "index.mjs",
   "types": "index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./index.d.mts",
+      "default": "./index.mjs"
+    },
+    "./index": {
+      "types": "./index.d.mts",
+      "default": "./index.mjs"
+    },
+    "./index.js": {
+      "types": "./index.d.mts",
+      "default": "./index.mjs"
+    },
+    "./index.css": "./index.css",
+    "./scss/*": "./scss/*",
+    "./plugins/*": "./plugins/*",
+    "./presets/simple": {
+      "types": "./presets/simple.d.mts",
+      "default": "./presets/simple.mjs"
+    },
+    "./plugins/elementSelector": "./plugins/elementSelector/index.mjs",
+    "./plugins/elementSelector/index": "./plugins/elementSelector/index.mjs",
+    "./plugins/elementSelector/index.js": "./plugins/elementSelector/index.mjs",
+    "./plugin": {
+      "types": "./plugin.d.mts",
+      "default": "./plugin.mjs"
+    },
+    "./plugin.js": {
+      "types": "./plugin.d.mts",
+      "default": "./plugin.mjs"
+    },
+    "./tailwind": "./tailwind.js",
+    "./tailwind.js": "./tailwind.js",
+    "./vite": {
+      "types": "./vite.d.mts",
+      "default": "./vite.mjs"
+    },
+    "./vite.js": {
+      "types": "./vite.d.mts",
+      "default": "./vite.mjs"
+    }
+  },
   "dependencies": {
     "axios": "^1.5.0",
     "json5": "^2.2.3",

nuxt/src/module.ts

@@ -1,5 +1,5 @@
 import { onMounted, ref, computed, toRefs, watch, nextTick, inject, resolveComponent, } from 'vue'
-import elementSelectorPlugin from './plugins/elementSelector'
+import elementSelectorPlugin from './plugins/elementSelector/index.mjs'
 import _ from 'lodash'
 
 const asyncForEach = async (array, callback) => {
@@ -705,6 +705,11 @@ export default function () {
           type: Array,
           default: () => ([]),
         },
+        builderConfig: {
+          required: false,
+          type: Object,
+          default: () => ({}),
+        },
       },
       setup(props, context, component) {
         const { pluginSettings, } = toRefs(props)
@@ -772,6 +777,7 @@ export default function () {
               if (excludeFields.value.indexOf(`${sectionName}.${fieldName}`) === -1) {
                 fields.push(new field.type({
                   ...fieldOptions.value,
+                  extend: field.extend || {},
                   loading: formLoading,
                   emit: context.emit,
                   icon,
@@ -802,6 +808,7 @@ export default function () {
 
               let f = new field.type({
                 ...fieldOptions.value,
+                extend: field.extend || {},
                 loading: formLoading,
                 emit: context.emit,
                 icon,
@@ -886,7 +893,7 @@ export default function () {
           let target = section ? form.el$(section) : form
           let elements$ = section ? target.children$ : target.elements$.value
 
-          target.load(load)
+          target.load(load, true)
 
           Object.keys(elements$).forEach((elementName) => {
             let element$ = elements$[elementName]
@@ -1980,6 +1987,10 @@ export default function () {
 
         // ============== COMPUTED ==============
 
+        const names = computed(() => {
+          return component.form$.value.builderConfig.names
+        })
+
         const device = computed(() => {
           return component.el$.value.form$.device || 'default'
         })
@@ -2639,6 +2650,7 @@ export default function () {
 
         return {
           ...component,
+          names,
           ariaLabel,
           editing,
           resizing,

package.json

@@ -0,0 +1,3 @@
+declare module '@vueform/builder/presets/simple' {
+  export default BuilderConfig;
+}