1.4.0

Author: adamberecz

CHANGELOG.md

@@ -1,5 +1,15 @@
 [//]: # (Don't use <tags>)
 
+## v1.4.0
+
+> `2024-04-12`
+
+### 🎉 Feature
+- Added AI Assistant.
+
+### 🐞 Bug Fixes
+- Escape double quote in inline export attributes #55
+
 ## v1.3.2
 
 > `2024-04-09`

index.css

@@ -352,6 +352,18 @@
   @apply mt-2;
 }
 
+.vfb-tool-dark-mode {
+  @apply mb-2;
+}
+
+.vfb-tool-ai-new-tag {
+  @apply absolute -bottom-[1.3875rem] left-1/2 transform -translate-x-1/2 bg-purple-500 text-white leading-none uppercase text-[11px] font-bold px-0.75 py-0.5 rounded;
+}
+
+.vfb-icon.vfb-tool-ai-new-tag-caret {
+  @apply absolute text-purple-500 left-1/2 transform -translate-x-1/2 -top-2.25;
+}
+
 .vfb-tool-item {
   @apply w-8 h-8 flex items-center justify-center text-xs relative cursor-pointer transition-colors;
 }
@@ -1466,6 +1478,138 @@ div > div:first-of-type[style*="none;"] + .vfb-util-props-separator-top {
   @apply mr-2;
 }
 
+.vfb-modal-ai {
+  @apply max-w-[38.75rem] rounded-[16px];
+}
+
+.vfb-modal-ai-head {
+  @apply px-8 pt-7 relative;
+}
+
+.vfb-modal-ai-head-title-container {
+  @apply flex items-center leading-tight;
+}
+
+.vfb-modal-ai-head-title-icon {
+  @apply text-[21px] text-sky-400;
+}
+
+.vfb-modal-ai-head-title {
+  @apply text-[24px] ml-2 font-semibold bg-gradient-to-r from-sky-400 to-primary-500 inline-block text-transparent bg-clip-text;
+}
+
+.vfb-modal-ai-head-title-beta {
+  @apply ml-2 text-[12px] mt-0.5 leading-none px-1 py-0.5 font-semibold bg-gradient-to-r from-sky-400 to-primary-500 rounded text-white;
+}
+
+.vfb-modal-ai-head-description {
+  @apply text-gray-500 text-[16px] leading-tight dark:text-dark-400;
+}
+
+.vfb-modal-ai-head-close-button {
+  @apply absolute top-7 right-8;
+}
+
+.vfb-modal-ai-speed-selector *, .vfb-modal-ai-speed-selector:before, .vfb-modal-ai-speed-selector:after {
+  --vf-primary: var(--vf-gray-100);
+}
+
+.dark .vfb-modal-ai-speed-selector *, .dark .vfb-modal-ai-speed-selector:before, .dark .vfb-modal-ai-speed-selector:after {
+  --vf-primary: var(--vf-dark-500);
+}
+
+.vfb-modal-ai-speed-selector-text span {
+  @apply text-gray-800 dark:text-white;
+}
+
+.vfb-modal-ai-loader-container {
+  @apply flex items-center justify-center flex-col mt-[3px] mb-4;
+}
+
+.form-p-btn.vfb-modal-ai-submit {
+  @apply bg-gradient-to-r from-sky-400 to-primary-500 rounded-lg py-2.5;
+}
+
+.vfb-modal-ai-loader {
+  transform: rotateZ(45deg);
+  perspective: 1000px;
+  border-radius: 50%;
+  width: 64px;
+  height: 64px;
+  @apply text-primary-500;
+}
+.vfb-modal-ai-loader:before, .vfb-modal-ai-loader:after {
+  content: "";
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: inherit;
+  height: inherit;
+  border-radius: 50%;
+  transform: rotateX(70deg);
+  animation: 1s vfb-ai-loader-spin linear infinite;
+}
+.vfb-modal-ai-loader:after {
+  transform: rotateY(70deg);
+  animation-delay: 0.4s;
+  @apply text-sky-400;
+}
+
+.vfb-modal-ai-text-loader {
+  @apply text-gray-500 text-[18px] text-center -mt-[9px] transform translate-y-0 transition-transform duration-500 leading-[3] relative z-1 dark:text-dark-300;
+}
+
+.vfb-modal-ai-loader-messages {
+  @apply h-[36px] overflow-hidden mt-2;
+}
+
+.vfb-modal-ai-loader-cancel {
+  @apply mt-4 text-[14px] text-gray-700 underline dark:text-dark-400;
+}
+
+@keyframes vfb-ai-loader-rotate {
+  0% {
+    transform: translate(-50%, -50%) rotateZ(0deg);
+  }
+  100% {
+    transform: translate(-50%, -50%) rotateZ(360deg);
+  }
+}
+@keyframes vfb-ai-loader-rotateccw {
+  0% {
+    transform: translate(-50%, -50%) rotate(0deg);
+  }
+  100% {
+    transform: translate(-50%, -50%) rotate(-360deg);
+  }
+}
+@keyframes vfb-ai-loader-spin {
+  0%, 100% {
+    box-shadow: 0.3em 0px 0 0px currentcolor;
+  }
+  12% {
+    box-shadow: 0.3em 0.3em 0 0 currentcolor;
+  }
+  25% {
+    box-shadow: 0 0.3em 0 0px currentcolor;
+  }
+  37% {
+    box-shadow: -0.3em 0.3em 0 0 currentcolor;
+  }
+  50% {
+    box-shadow: -0.3em 0 0 0 currentcolor;
+  }
+  62% {
+    box-shadow: -0.3em -0.3em 0 0 currentcolor;
+  }
+  75% {
+    box-shadow: 0px -0.3em 0 0 currentcolor;
+  }
+  87% {
+    box-shadow: 0.3em -0.3em 0 0 currentcolor;
+  }
+}
 .vfb-conditions-head-title {
   @apply font-semibold uppercase;
 }
@@ -2730,7 +2874,7 @@ div > div:first-of-type[style*="none;"] + .vfb-util-props-separator-top {
 }
 
 .vfb-builder {
-  @apply h-full w-full flex min-h-98 overflow-y-hidden relative;
+  @apply h-full w-full flex min-h-[28.5rem] overflow-y-hidden relative;
 }
 
 .vfb-left-container {

index.mjs

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

package.json

@@ -2255,6 +2255,7 @@ const h1 = {
         type: { type: TypeField },
         tag: { type: TagField_simple, },
         content: { type: ContentField, },
+        description: { type: DescriptionField, },
       },
     },
     layout: {
@@ -2282,6 +2283,10 @@ const h1 = {
     }
   },
   separators: {
+    properties: [
+      ['type', 'tag', 'content'],
+      ['description'],
+    ],
     layout: [
       ['align'],
       ['space'],
@@ -2337,6 +2342,7 @@ const p = {
         type: { type: TypeField },
         tag: { type: TagField_simple, },
         content: { type: ContentField_p, },
+        description: { type: DescriptionField, },
       },
     },
     layout: {
@@ -2365,8 +2371,8 @@ const p = {
   },
   separators: {
     properties: [
-      ['type', 'tag'],
-      ['content'],
+      ['type', 'tag', 'content'],
+      ['description'],
     ],
     layout: [
       ['align'],
@@ -2395,6 +2401,7 @@ const img = {
         type: { type: TypeField },
         tag: { type: TagField_simple, },
         img: { type: ImgField_simple, },
+        description: { type: DescriptionField, },
       },
     },
     layout: {
@@ -2432,6 +2439,7 @@ const img = {
     properties: [
       ['type', 'tag'],
       ['img'],
+      ['description'],
     ],
     layout: [
       ['align'],
@@ -2465,6 +2473,7 @@ const link = {
         tag: { type: TagField_simple, },
         content: { type: ContentField, extend: { rows: 1, label: 'Link text', columns: { label: 4 }, floating: false, placeholder: null } },
         link: { type: LinkField_simple, },
+        description: { type: DescriptionField, },
       },
     },
     layout: {
@@ -2492,6 +2501,10 @@ const link = {
     }
   },
   separators: {
+    properties: [
+      ['type', 'tag', 'content', 'link'],
+      ['description'],
+    ],
     layout: [
       ['align'],
       ['space'],

presets/simple.mjs

@@ -1,5 +1,5 @@
 .vfb-builder {
-  @apply h-full w-full flex min-h-98 overflow-y-hidden relative;
+  @apply h-full w-full flex min-h-[28.5rem] overflow-y-hidden relative;
 }
 
 .vfb-left-container {