1.6.2

vueform · Aug 15, 2024 · ea6d771 · ea6d771
1 parent a8de44d
commit ea6d771
Show file tree

Hide file tree

Showing 12 changed files with 125 additions and 10 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,12 @@
 [//]: # (Don't use <tags>)
 
+## v1.6.2
+
+> `2024-08-15`
+
+### 🎉 Feature
+- Optional Import / Export button that can be enabled in `builder.config.js` with `import: true`.
+
 ## v1.6.1
 
 > `2024-08-07`

diff --git a/index.css b/index.css
@@ -340,6 +340,14 @@
   @apply mb-2;
 }
 
+.vfb-tool-import {
+  @apply mb-2;
+}
+
+.vfb-tool-language-selector {
+  @apply mb-2;
+}
+
 .vfb-tool-language-selector .vfb-tool-item {
   @apply text-sm;
 }
@@ -994,7 +1002,15 @@ input.vfb-clr-color:focus {
 }
 
 .vfb-icon {
-  @apply inline-block text-inherit h-1em overflow-visible align-icon;
+  @apply inline-block text-inherit overflow-visible align-icon;
+}
+
+.vfb-icon-md {
+  @apply h-1em;
+}
+
+.vfb-icon-lg {
+  @apply h-[1.2em];
 }
 
 .vfb-hidden {
@@ -1597,6 +1613,26 @@ div > div:first-of-type[style*="none;"] + .vfb-util-props-separator-top {
   @apply mt-4 text-[14px] text-gray-700 underline dark:text-dark-400;
 }
 
+.vfb-modal-import {
+  @apply mb-12;
+}
+
+.vfb-modal-import-wrapper {
+  @apply w-[calc(100%+4rem)] -ml-8 -mt-10 -mb-6 flex flex-col;
+}
+
+.vfb-modal-import-textarea {
+  @apply w-full px-5 py-4 border-gray-300 min-h-[400px] text-[13px] shadow-inner box-border m-0 font-mono leading-normal;
+}
+
+.vfb-modal-import-error {
+  @apply w-full bg-red-500 bg-opacity-20 text-red-500 px-6 py-2 box-border;
+}
+
+.vfb-modal-import-btn-disabled {
+  @apply opacity-60 pointer-events-none;
+}
+
 @keyframes vfb-ai-loader-rotate {
   0% {
     transform: translate(-50%, -50%) rotateZ(0deg);

diff --git a/index.mjs b/index.mjs
diff --git a/locales/en_US/index.mjs b/locales/en_US/index.mjs
@@ -1362,5 +1362,12 @@ export default {
 	"view_view_item_gallery": "Gallery",
 	"view_view_item_image": "Image",
 	"view_view_item_tabs": "Tabs",
-	"view_view_label": "View &nbsp;<a href=\"https://vueform.com/reference/1.x/%elementType%-element#views\" target=\"_blank\" class=\"vfb-learn-more\">learn more</a>"
+	"view_view_label": "View &nbsp;<a href=\"https://vueform.com/reference/1.x/%elementType%-element#views\" target=\"_blank\" class=\"vfb-learn-more\">learn more</a>",
+	"tool_import": "Export / import",
+	"import_modal_title": "Import / Export",
+	"import_modal_subtitle": "The following JSON represents the current state of the builder. Save it to import back later.",
+	"import_modal_button_save": "Save & import",
+	"import_modal_button_download": "Download as JSON",
+	"import_modal_button_cancel": "Cancel",
+	"import_modal_json_error": "Not a valid JSON."
 };
diff --git a/locales/hu_HU/index.mjs b/locales/hu_HU/index.mjs
@@ -1362,5 +1362,12 @@ export default {
 	"view_view_item_gallery": "Galéria",
 	"view_view_item_image": "Kép",
 	"view_view_item_tabs": "Lapok",
-	"view_view_label": "Nézet &nbsp;<a href=\"https://vueform.com/reference/1.x/%elementType%-element#views\" target=\"_blank\" class=\"vfb-learn-more\">tudj meg többet</a>"
+	"view_view_label": "Nézet &nbsp;<a href=\"https://vueform.com/reference/1.x/%elementType%-element#views\" target=\"_blank\" class=\"vfb-learn-more\">tudj meg többet</a>",
+  "tool_import": "Exportálás / importálás",
+  "import_modal_title": "Importálás / Exportálás",
+  "import_modal_subtitle": "A következő JSON a szerkesztő aktuális állapotát képviseli. Mentse el, hogy később visszaimportálhassa.",
+  "import_modal_button_save": "Mentés és importálás",
+  "import_modal_button_download": "Letöltés JSON formátumban",
+  "import_modal_button_cancel": "Mégse",
+  "import_modal_json_error": "Érvénytelen JSON."
 };
diff --git a/locales/ja_JP/index.mjs b/locales/ja_JP/index.mjs
@@ -1362,5 +1362,12 @@ export default {
 	"view_view_item_gallery": "ギャラリー",
 	"view_view_item_image": "画像",
 	"view_view_item_tabs": "タブ",
-	"view_view_label": "表示 &nbsp;<a href=\"https://vueform.com/reference/1.x/%elementType%-element#views\" target=\"_blank\" class=\"vfb-learn-more\">詳細</a>"
+	"view_view_label": "表示 &nbsp;<a href=\"https://vueform.com/reference/1.x/%elementType%-element#views\" target=\"_blank\" class=\"vfb-learn-more\">詳細</a>",
+  "tool_import": "エクスポート / インポート",
+  "import_modal_title": "インポート / エクスポート",
+  "import_modal_subtitle": "以下のJSONは、現在のビルダーの状態を表しています。後でインポートできるように保存してください。",
+  "import_modal_button_save": "保存してインポート",
+  "import_modal_button_download": "JSONとしてダウンロード",
+  "import_modal_button_cancel": "キャンセル",
+  "import_modal_json_error": "無効なJSONです。"
 };
diff --git a/locales/nl_NL/index.mjs b/locales/nl_NL/index.mjs
@@ -1362,5 +1362,12 @@ export default {
 	"view_view_item_gallery": "Galerij",
 	"view_view_item_image": "Afbeelding",
 	"view_view_item_tabs": "Tabbladen",
-	"view_view_label": "Bekijk &nbsp;<a href=\"https://vueform.com/reference/1.x/%elementType%-element#views\" target=\"_blank\" class=\"vfb-learn-more\">lees meer</a>"
+	"view_view_label": "Bekijk &nbsp;<a href=\"https://vueform.com/reference/1.x/%elementType%-element#views\" target=\"_blank\" class=\"vfb-learn-more\">lees meer</a>",
+  "tool_import": "Exporteren / importeren",
+  "import_modal_title": "Importeren / Exporteren",
+  "import_modal_subtitle": "De volgende JSON vertegenwoordigt de huidige staat van de builder. Sla deze op om later te kunnen importeren.",
+  "import_modal_button_save": "Opslaan en importeren",
+  "import_modal_button_download": "Download als JSON",
+  "import_modal_button_cancel": "Annuleren",
+  "import_modal_json_error": "Ongeldige JSON."
 };
diff --git a/locales/sv_SE/index.mjs b/locales/sv_SE/index.mjs
@@ -1362,5 +1362,12 @@ export default {
 	"view_view_item_gallery": "Galleri",
 	"view_view_item_image": "Bild",
 	"view_view_item_tabs": "Flikar",
-	"view_view_label": "Visa &nbsp;<a href=\"https://vueform.com/reference/1.x/%elementType%-element#views\" target=\"_blank\" class=\"vfb-learn-more\">läs mer</a>"
+	"view_view_label": "Visa &nbsp;<a href=\"https://vueform.com/reference/1.x/%elementType%-element#views\" target=\"_blank\" class=\"vfb-learn-more\">läs mer</a>",
+  "tool_import": "Exportera / importera",
+  "import_modal_title": "Importera / Exportera",
+  "import_modal_subtitle": "Följande JSON representerar det aktuella tillståndet för byggverktyget. Spara den för att importera senare.",
+  "import_modal_button_save": "Spara och importera",
+  "import_modal_button_download": "Ladda ner som JSON",
+  "import_modal_button_cancel": "Avbryt",
+  "import_modal_json_error": "Ogiltig JSON."
 };
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "private": false,
   "name": "@vueform/builder",
-  "version": "1.6.1",
+  "version": "1.6.2",
   "description": "Vueform Builder development build.",
   "homepage": "https://vueform.com",
   "license": "SEE LICENSE IN LICENSE.txt",

diff --git a/scss/_modal.scss b/scss/_modal.scss
@@ -151,6 +151,27 @@
   @apply mt-4 text-[14px] text-gray-700 underline dark:text-dark-400;
 }
 
+.vfb-modal-import {
+  @apply mb-12;
+}
+
+.vfb-modal-import-wrapper {
+  @apply w-[calc(100%+4rem)] -ml-8 -mt-10 -mb-6 flex flex-col;
+}
+
+.vfb-modal-import-textarea {
+  @apply w-full px-5 py-4 border-gray-300 min-h-[400px] text-[13px] shadow-inner box-border m-0 font-mono leading-normal;
+}
+
+.vfb-modal-import-error {
+  @apply w-full bg-red-500 bg-opacity-20 text-red-500 px-6 py-2 box-border;
+}
+
+.vfb-modal-import-btn-disabled {
+  @apply opacity-60 pointer-events-none;
+}
+
+
 @keyframes vfb-ai-loader-rotate {
   0% {
     transform: translate(-50%, -50%) rotateZ(0deg);

diff --git a/scss/_tools.scss b/scss/_tools.scss
@@ -36,6 +36,14 @@
   @apply mb-2;
 }
 
+.vfb-tool-import {
+  @apply mb-2;
+}
+
+.vfb-tool-language-selector {
+  @apply mb-2;
+}
+
 .vfb-tool-language-selector .vfb-tool-item {
   @apply text-sm;
 }

diff --git a/scss/_utils.scss b/scss/_utils.scss
@@ -43,7 +43,15 @@
 }
 
 .vfb-icon {
-  @apply inline-block text-inherit h-1em overflow-visible align-icon;
+  @apply inline-block text-inherit overflow-visible align-icon;
+}
+
+.vfb-icon-md {
+  @apply h-1em;
+}
+
+.vfb-icon-lg {
+  @apply h-[1.2em];
 }
 
 .vfb-hidden {