1.4.3

Author: adamberecz

CHANGELOG.md

@@ -1,5 +1,16 @@
 [//]: # (Don't use <tags>)
 
+## v1.4.3
+
+> `2024-05-10`
+
+### 🎉 Feature
+- New Phone element.
+- Show warning at the element when data paths are duplicated #54.
+
+### 🐞 Bug Fixes
+- Increment child names when cloning containers #54.
+
 ## v1.4.2
 
 > `2024-04-29`

index.css

@@ -1869,6 +1869,10 @@ div > div:first-of-type[style*="none;"] + .vfb-util-props-separator-top {
   @apply text-xl;
 }
 
+.vfb-config-panel-header-warning {
+  @apply text-red-500 text-[12px] ml-1.5 mt-1 cursor-pointer relative;
+}
+
 .vfb-config-panel-header-clone,
 .vfb-config-panel-header-remove,
 .vfb-config-panel-header-collapse {
@@ -1909,6 +1913,7 @@ div > div:first-of-type[style*="none;"] + .vfb-util-props-separator-top {
   --vf-radius-checkbox-sm: 4px;
   --vf-bg-input: var(--vf-gray-100);
   --vf-bg-passive: var(--vf-gray-200);
+  --vf-bg-selected: var(--vf-gray-200);
   --vf-border-color-passive: var(--vf-gray-200);
   --vf-border-color-input: var(--vf-gray-200);
   --vf-color-input: var(--vf-gray-900);
@@ -1961,6 +1966,22 @@ div > div:first-of-type[style*="none;"] + .vfb-util-props-separator-top {
   @apply text-gray-400 font-bold text-0.5xs uppercase cursor-text select-none bg-gray-100 bg-opacity-50 absolute bottom-1.5 right-2 leading-none p-0.5 dark:bg-dark-700 dark:text-dark-400;
 }
 
+.vfb-config-panel-warning {
+  @apply bg-red-100 text-red-500 my-4 px-4 py-3 rounded leading-tight overflow-x-auto;
+}
+
+.vfb-config-panel-warning-text {
+  @apply my-1;
+}
+
+.vfb-config-panel-warning-ul {
+  @apply list-disc pl-5 leading-tight;
+}
+
+.vfb-config-panel-warning-li {
+  @apply text-xs font-semibold -ml-1 pr-4 underline cursor-pointer;
+}
+
 .vfb-elements-container {
   @apply absolute inset-0;
 }
@@ -3573,6 +3594,10 @@ div > div:first-of-type[style*="none;"] + .vfb-util-props-separator-top {
   @apply border-dashed border;
 }
 
+.vfb-preview-element-warning {
+  @apply absolute inset-0 bg-red-500 bg-opacity-20;
+}
+
 .vfb-preview-element-outer-wrapper {
   @apply grid grid-cols-12 flex-1;
 }

index.d.mts

@@ -135,6 +135,7 @@ declare module '@vueform/builder' {
   const DisabledField: any;
   const DragAndDropField: any;
   const EndpointField: any;
+  const ExcludeCountriesField: any;
   const ExportApiField: any;
   const ExportDownloadField: any;
   const ExportOutputField: any;
@@ -164,6 +165,7 @@ declare module '@vueform/builder' {
   const HrefField: any;
   const IdField: any;
   const ImgField: any;
+  const IncludeCountriesField: any;
   const InfoField: any;
   const InitialField: any;
   const InputTypeField: any;
@@ -228,6 +230,7 @@ declare module '@vueform/builder' {
   const TooltipFormatField: any;
   const TooltipsField: any;
   const TypeField: any;
+  const UnmaskField: any;
   const ValidationField: any;
   const ViewField: any;
   const ViewField_file: any;
@@ -299,6 +302,7 @@ declare module '@vueform/builder' {
     DisabledField,
     DragAndDropField,
     EndpointField,
+    ExcludeCountriesField,
     ExportApiField,
     ExportDownloadField,
     ExportOutputField,
@@ -328,6 +332,7 @@ declare module '@vueform/builder' {
     HrefField,
     IdField,
     ImgField,
+    IncludeCountriesField,
     InfoField,
     InitialField,
     InputTypeField,
@@ -392,6 +397,7 @@ declare module '@vueform/builder' {
     TooltipFormatField,
     TooltipsField,
     TypeField,
+    UnmaskField,
     ValidationField,
     ViewField,
     ViewField_file,

index.mjs

@@ -1,7 +1,7 @@
 {
   "private": false,
   "name": "@vueform/builder",
-  "version": "1.4.2",
+  "version": "1.4.3",
   "description": "Vueform Builder development build.",
   "homepage": "https://vueform.com",
   "license": "SEE LICENSE IN LICENSE.txt",

package.json

@@ -450,6 +450,10 @@ export default function () {
           required: false,
           type: String,
         },
+        modelDuplicates: {
+          required: false,
+          type: Array,
+        },
       },
       setup(props, context, component) {
         const { builder, schema, draggedSchema, tabs, steps } = toRefs(props)
@@ -2098,6 +2102,14 @@ export default function () {
           return component.form$.value.pageType
         })
 
+        const duplicates = computed(() => {
+          return component.form$.value.modelDuplicates.filter(d => d.dataPath === component.el$.value.dataPath)
+        })
+
+        const hasWarning = computed(() => {
+          return duplicates.value.length
+        })
+
         // =============== METHODS ==============
 
 
@@ -2669,6 +2681,7 @@ export default function () {
           hideDragLine,
           lastWidth,
           childRestrictions,
+          hasWarning,
           handleOverlayClick,
           handleCloneClick,
           handleRemoveClick,

plugin.mjs

@@ -40,6 +40,8 @@ import {
   TypeField,
   ValidationField,
   ViewField,
+  IncludeCountriesField,
+  ExcludeCountriesField,
 } from './../'
 
 /**
@@ -66,6 +68,7 @@ const rules = [
   'before',
   'before_or_equal',
   'boolean',
+  'completed',
   'date',
   'date_equals',
   'date_format',
@@ -941,27 +944,32 @@ const email = {
 
 const phone = {
   label: 'Phone',
-  description: 'Input field that expects a phone number',
+  description: 'Phone number with country selector',
   icon: ['fas', 'phone-rotary'],
   category: 'fields',
   schema: {
-    type: 'text',
+    type: 'phone',
     label: 'Phone',
-    mask: { mask: '+1 (000) 000 0000', label: 'US Phone number', placeholder: true },
+    allowIncomplete: true,
+    unmask: true,
   },
   sections: {
     properties: {
       name: 'properties',
       label: 'Properties',
       fields: {
         type: { type: TypeField },
-        inputType: { type: InputTypeField_simple },
-        mask: { type: PhoneMask_simple },
         label: { type: LabelField },
         description: { type: DescriptionField },
         placeholder: { type: PlaceholderField },
-        addons: { type: AddonsField },
-        readonly: { type: ReadonlyField },
+      },
+    },
+    options: {
+      name: 'options',
+      label: 'Phone options',
+      fields: {
+        include: { type: IncludeCountriesField, },
+        exclude: { type: ExcludeCountriesField, },
       },
     },
     layout: {
@@ -996,12 +1004,6 @@ const phone = {
     }
   },
   separators: {
-    properties: [
-      ['mask'],
-      ['type', 'label', 'description', 'placeholder'],
-      ['addons'],
-      ['readonly',]
-    ],
     layout: [
       ['columns'],
       ['size'],

presets/simple.mjs

@@ -38,6 +38,10 @@
   @apply text-xl;
 }
 
+.vfb-config-panel-header-warning {
+  @apply text-red-500 text-[12px] ml-1.5 mt-1 cursor-pointer relative;
+}
+
 .vfb-config-panel-header-clone,
 .vfb-config-panel-header-remove,
 .vfb-config-panel-header-collapse {
@@ -92,6 +96,7 @@
 
     --vf-bg-input: var(--vf-gray-100);
     --vf-bg-passive: var(--vf-gray-200);
+    --vf-bg-selected: var(--vf-gray-200);
     --vf-border-color-passive: var(--vf-gray-200);
 
     --vf-border-color-input: var(--vf-gray-200);
@@ -158,4 +163,20 @@
 
 .vfb-config-panel-input-language-editor {
   @apply text-gray-400 font-bold text-0.5xs uppercase cursor-text select-none bg-gray-100 bg-opacity-50 absolute bottom-1.5 right-2 leading-none p-0.5 dark:bg-dark-700 dark:text-dark-400;
+}
+
+.vfb-config-panel-warning {
+  @apply bg-red-100 text-red-500 my-4 px-4 py-3 rounded leading-tight overflow-x-auto;
+}
+
+.vfb-config-panel-warning-text {
+  @apply my-1;
+}
+
+.vfb-config-panel-warning-ul {
+  @apply list-disc pl-5 leading-tight;
+}
+
+.vfb-config-panel-warning-li {
+  @apply text-xs font-semibold -ml-1 pr-4 underline cursor-pointer;
 }

scss/_config-panel.scss

@@ -138,6 +138,10 @@
   }
 }
 
+.vfb-preview-element-warning {
+  @apply absolute inset-0 bg-red-500 bg-opacity-20;
+}
+
 .vfb-preview-element-outer-wrapper {
   @apply grid grid-cols-12 flex-1;
 }