@myissue/vue-website-page-builder 3.3.83 → 3.3.84

package/dist/{zh-Hans-DU7U45Js.js → zh-Hans-CZQ2JK7v.js}

@@ -1,4 +1,4 @@
-const e = "保存", t = "选项", o = "头像", n = "发布", a = "组件", i = "样式", s = "排版", r = "选择", l = "内边距", d = "边距", c = "全局", u = "具体", p = "边框", g = "透明", h = "添加", y = "属性", m = "值", T = "关闭", S = "编辑", w = "删除", b = "预览", f = "移动", C = "加粗", v = "链接", B = "列表", D = "搜索", L = "横向", H = "纵向", P = "方形", k = "图片", M = "上一页", A = "下一页", x = "信息", I = "文本", F = {
+const e = "保存", t = "选项", o = "头像", n = "发布", a = "组件", s = "样式", i = "排版", r = "选择", l = "内边距", d = "边距", c = "全局", p = "具体", u = "边框", g = "透明", m = "添加", y = "属性", h = "值", T = "关闭", S = "编辑", C = "删除", w = "预览", b = "移动", f = "加粗", v = "链接", L = "列表", H = "搜索", M = "横向", D = "纵向", B = "方形", P = "图片", k = "上一页", A = "下一页", x = "信息", I = "文本", E = "类型", F = "数组", R = "内容", V = "元素", z = "组件", q = "全部", U = "图片", W = {
   "Reset Page": "重置页面",
   "Global Page Styles": "全局页面样式",
   "Try the powerful Click & Drop Page Builder—designed for developers and creators who want full control without the hassle. Customize layouts, fonts, and colors. Edit content visually in real time. Add media, embed YouTube videos, or export everything as clean HTML. With responsive editing, local auto-save, Tailwind support, and even Unsplash integration, it's everything you need—wrapped in one seamless builder. Build Stunning Pages in Minutes.": "试试强大的Click & Drop Page Builder——专为希望完全控制而无需麻烦的开发者和创作者设计。自定义布局、字体和颜色。实时可视化编辑内容。添加媒体、嵌入YouTube视频或将所有内容导出为干净的HTML。凭借响应式编辑、本地自动保存、Tailwind支持，甚至Unsplash集成，它是您所需的一切——集成在一个无缝的构建器中。几分钟内构建令人惊叹的页面。",
@@ -23,13 +23,13 @@ const e = "保存", t = "选项", o = "头像", n = "发布", a = "组件", i =
   "Click to add component": "点击添加组件",
   "Remove all Components": "删除所有组件",
   "Are you sure you want to remove all Components?": "您确定要删除所有组件吗？",
-  Styles: i,
+  Styles: s,
   "Apply styles that affect the entire page. These settings include global font family, text color, background color, and other universal styles that apply to all sections.": "应用影响整个页面的样式。这些设置包括全局字体系列、文本颜色、背景颜色和适用于所有部分的其他通用样式。",
   "Update Page Styles": "更新页面样式",
   "Download HTML": "下载HTML",
   "Export the entire page as a standalone HTML file. This includes all sections, content, and applied styles, making it ready for use or integration elsewhere.": "将整个页面导出为独立的HTML文件。这包括所有部分、内容和应用的样式，使其可以随时使用或集成到其他地方。",
   "Download HTML file": "下载HTML文件",
-  Typographies: s,
+  Typographies: i,
   "Font Appearance": "字体外观",
   "Font Size": "字体大小",
   Select: r,
@@ -48,13 +48,13 @@ const e = "保存", t = "选项", o = "头像", n = "发布", a = "组件", i =
   "Horizontal Margin": "水平边距",
   "Border Radius": "边框半径",
   Global: c,
-  Specific: u,
+  Specific: p,
   "Border Radius top left": "边框半径 左上",
   "Border Radius top right": "边框半径 右上",
   "Border Radius bottom left": "边框半径 左下",
   "Border Radius bottom right": "边框半径 右下",
   "Border Style, Width & Color": "边框样式、宽度和颜色",
-  Border: p,
+  Border: u,
   "Border Style": "边框样式",
   "Border Width": "边框宽度",
   "Border Color": "边框颜色",
@@ -64,12 +64,12 @@ const e = "保存", t = "选项", o = "头像", n = "发布", a = "组件", i =
   "Add your CSS.": "添加您的CSS。",
   "The pbx- prefix is added automatically.": "pbx-前缀会自动添加。",
   "Type class": "输入类",
-  Add: h,
+  Add: m,
   "Inline Styles": "内联样式",
   "These are the inline styles applied by the builder. Add your own styles and press Enter to apply them to the selected element.": "这些是构建器应用的内联样式。添加您自己的样式，然后按 Enter 将其应用于选定的元素。",
   "Add your own style.": "添加您自己的样式。",
   property: y,
-  value: m,
+  value: h,
   Close: T,
   Editing: S,
   "Loading...": "加载中...",
@@ -78,10 +78,10 @@ const e = "保存", t = "选项", o = "头像", n = "发布", a = "组件", i =
   "Default black": "默认黑色",
   "Remove Component?": "删除组件？",
   "Are you sure you want to remove this Component?": "您确定要删除此组件吗？",
-  Delete: w,
+  Delete: C,
   "Add to the bottom": "添加到底部",
-  Preview: b,
-  Mobile: f,
+  Preview: w,
+  Mobile: b,
   "Demo Content": "演示内容",
   "Demo Description": "介绍轻量级和免费的Vue Click & Drop页面构建器。使用Vue轻松创建和增强数字体验。并非所有强大的东西都需要复杂。这款简约轻便的页面构建器提供了一个优雅直观的界面，专注于简单性和速度。创建完全响应式的页面，例如列表、职位板或博客文章，并使用免费的Click & Drop页面构建器轻松管理您的内容。",
   "Demo Title": "令人惊叹的页面的网页构建器",
@@ -93,11 +93,11 @@ const e = "保存", t = "选项", o = "头像", n = "发布", a = "组件", i =
   "Edit text and links": "编辑文本和链接",
   "Enter URL": "输入URL",
   "Line break": "换行",
-  Bold: C,
+  Bold: f,
   Link: v,
   "Header 2": "标题2",
   "Header 3": "标题3",
-  List: B,
+  List: L,
   "Add a valid URL to transform the selected text into a clickable hyperlink that directs users to the specified web address.": "添加一个有效的URL，将选定的文本转换为可点击的超链接，指向指定的网页地址。",
   "Select image": "选择图片",
   "Manage Content": "管理内容",
@@ -105,15 +105,15 @@ const e = "保存", t = "选项", o = "头像", n = "发布", a = "组件", i =
   "Reset changes": "重置更改",
   "Do you want to reset this page?": "您想重置此页面吗？",
   "Are you sure you want to reset this page? This will overwrite your current changes.": "您确定要重置此页面吗？这将覆盖您当前的更改。",
-  Search: D,
+  Search: H,
   "Search...": "搜索...",
-  Landscape: L,
-  Portrait: H,
-  Squarish: P,
+  Landscape: M,
+  Portrait: D,
+  Squarish: B,
   "Total pages": "总页数",
-  Images: k,
+  Images: P,
   "First page": "第一页",
-  Prev: M,
+  Prev: k,
   Next: A,
   "By:": "作者：",
   "We did not find any images. Make a new search.": "我们没有找到任何图片。请重新搜索。",
@@ -129,49 +129,80 @@ const e = "保存", t = "选项", o = "头像", n = "发布", a = "组件", i =
   "Three Square Images": "三张方形图片",
   "Six Square Images Grid": "六张方形图片网格",
   "Three Vertical Images": "三张竖直图片",
-  "Four Square Images With Text": "四张方形图片和文字",
+  "Four Square Images With Text": "四张带文字的方形图片",
   "Three Square Images With Text": "三张方形图片和文字",
   "Two Square Images With Text": "两张方形图片和文字",
   Text: I,
   "Header H2": "标题 H2",
   "Header H3": "标题 H3",
   "YouTube Video": "YouTube 视频",
-  "Break Divider": "分隔线"
+  "Break Divider": "分隔线",
+  "Selected HTML": "选定的HTML",
+  "Overview of Selected Element, Component, and Components. This section provides real-time updates based on your HTML selection.": "所选元素、组件和组件的概述。本节根据您的HTML选择提供实时更新。",
+  Types: E,
+  "Element type:": "元素类型:",
+  "Component type:": "组件类型:",
+  "Components:": "组件:",
+  array: F,
+  Content: R,
+  Element: V,
+  Component: z,
+  "Components added": "添加的组件",
+  "No Element selected": "未选择元素",
+  "Selected HTML:": "选定的HTML:",
+  "Element src:": "元素来源:",
+  "Element classes:": "元素类:",
+  "No Component selected": "未选择组件",
+  "ID:": "ID:",
+  "Title:": "标题:",
+  "HTML Code:": "HTML代码:",
+  "No Components added yet": "尚未添加组件",
+  All: q,
+  Image: U,
+  "Image & Text": "图片和文字",
+  "Four Square Images": "四张方形图片"
 };
 export {
-  h as Add,
-  C as Bold,
-  p as Border,
+  m as Add,
+  q as All,
+  f as Bold,
+  u as Border,
   T as Close,
-  w as Delete,
+  z as Component,
+  R as Content,
+  C as Delete,
   S as Editing,
+  V as Element,
   c as Global,
-  k as Images,
+  U as Image,
+  P as Images,
   x as Information,
-  L as Landscape,
+  M as Landscape,
   v as Link,
-  B as List,
+  L as List,
   d as Margin,
-  f as Mobile,
+  b as Mobile,
   A as Next,
   t as Options,
   l as Padding,
-  H as Portrait,
-  M as Prev,
-  b as Preview,
+  D as Portrait,
+  k as Prev,
+  w as Preview,
   n as Publish,
   e as Save,
-  D as Search,
+  H as Search,
   r as Select,
-  u as Specific,
-  P as Squarish,
-  i as Styles,
+  p as Specific,
+  B as Squarish,
+  s as Styles,
   I as Text,
   g as Transparent,
-  s as Typographies,
+  E as Types,
+  i as Typographies,
+  F as array,
   o as avatar,
   a as component,
-  F as default,
+  W as default,
   y as property,
-  m as value
+  h as value
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myissue/vue-website-page-builder",
-  "version": "3.3.83",
+  "version": "3.3.84",
   "description": "Vue 3 page builder component with drag & drop functionality.",
   "type": "module",
   "main": "./dist/vue-website-page-builder.umd.cjs",

package/src/Components/Modals/BuilderComponents.vue

@@ -1,6 +1,6 @@
 <script setup>
 import ModalBuilder from '../Modals/ModalBuilder.vue'
-import DefaultBuilderComponents from '../PageBuilder/DefaultComponents/DefaultBuilderComponents.vue'
+import DefaultBuilderComponents from '../../tests/DefaultComponents/DefaultBuilderComponents.vue'
 import { inject } from 'vue'
 const customMediaComponent = inject('CustomMediaComponent')
 

package/src/Components/Modals/MediaLibraryModal.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { provide } from 'vue'
-import DefaultMediaLibraryComponent from '../PageBuilder/DefaultComponents/DefaultMediaLibraryComponent.vue'
+import DefaultMediaLibraryComponent from '../../tests/DefaultComponents/DefaultMediaLibraryComponent.vue'
 import ModalBuilder from './ModalBuilder.vue'
 
 defineProps({

package/src/Components/PageBuilder/EditorMenu/Editables/BorderRadius.vue

@@ -123,6 +123,7 @@ watch(
           </option>
         </select>
       </div>
+      <hr />
       <div class="pbx-my-2 pbx-py-2">
         <label for="border-radius-top-right" class="pbx-myPrimaryInputLabel">
           {{ translate('Border Radius top right') }}
@@ -142,6 +143,7 @@ watch(
           </option>
         </select>
       </div>
+      <hr />
       <div class="pbx-my-2 pbx-py-2">
         <label for="border-radius-bottom-left" class="pbx-myPrimaryInputLabel">
           {{ translate('Border Radius bottom left') }}
@@ -161,6 +163,7 @@ watch(
           </option>
         </select>
       </div>
+      <hr />
       <div class="pbx-my-2 pbx-py-2">
         <label for="border-radius-bottom-right" class="pbx-myPrimaryInputLabel">
           {{ translate('Border Radius bottom right') }}

package/src/Components/PageBuilder/EditorMenu/Editables/Borders.vue

@@ -80,6 +80,7 @@ watch(
           </option>
         </select>
       </div>
+      <hr />
       <div class="pbx-my-2 pbx-py-2">
         <label for="border-width" class="pbx-myPrimaryInputLabel">{{
           translate('Border Width')
@@ -99,80 +100,82 @@ watch(
           </option>
         </select>
       </div>
-
-      <label for="border-color" class="pbx-myPrimaryInputLabel">{{
-        translate('Border Color')
-      }}</label>
-      <Listbox as="div" v-model="borderColor">
-        <div class="pbx-relative pbx-mt-2">
-          <ListboxButton class="pbx-myPrimarySelect" id="border-color">
-            <span class="pbx-flex pbx-items-center pbx-gap-2">
-              <div v-if="getBorderColor === 'none'">
-                <div class="pbx-myPrimaryColorPreview pbx-border-none">
-                  <span class="material-symbols-outlined"> ev_shadow </span>
+      <hr />
+      <div class="pbx-my-2 pbx-py-2">
+        <label for="border-color" class="pbx-myPrimaryInputLabel">{{
+          translate('Border Color')
+        }}</label>
+        <Listbox as="div" v-model="borderColor">
+          <div class="pbx-relative pbx-mt-2">
+            <ListboxButton class="pbx-myPrimarySelect" id="border-color">
+              <span class="pbx-flex pbx-items-center pbx-gap-2">
+                <div v-if="getBorderColor === 'none'">
+                  <div class="pbx-myPrimaryColorPreview pbx-border-none">
+                    <span class="material-symbols-outlined"> ev_shadow </span>
+                  </div>
                 </div>
-              </div>
-              <div
-                v-if="borderColor !== 'none'"
-                class="pbx-aspect-square pbx-w-6 pbx-h-6 pbx-border-solid pbx-border pbx-border-gray-100 pbx-rounded-sm"
-                :class="`pbx-bg-${borderColor?.replace('pbx-border-', '')}`"
-              ></div>
-              <span class="pbx-block pbx-truncate">{{ borderColor }}</span>
-            </span>
-            <span
-              class="pbx-pointer-events-none pbx-absolute pbx-inset-y-0 pbx-right-0 pbx-ml-3 pbx-flex pbx-items-center pbx-pr-2"
-            >
-              <span class="material-symbols-outlined"> keyboard_arrow_down </span>
-            </span>
-          </ListboxButton>
+                <div
+                  v-if="borderColor !== 'none'"
+                  class="pbx-aspect-square pbx-w-6 pbx-h-6 pbx-border-solid pbx-border pbx-border-gray-100 pbx-rounded-sm"
+                  :class="`pbx-bg-${borderColor?.replace('pbx-border-', '')}`"
+                ></div>
+                <span class="pbx-block pbx-truncate">{{ borderColor }}</span>
+              </span>
+              <span
+                class="pbx-pointer-events-none pbx-absolute pbx-inset-y-0 pbx-right-0 pbx-ml-3 pbx-flex pbx-items-center pbx-pr-2"
+              >
+                <span class="material-symbols-outlined"> keyboard_arrow_down </span>
+              </span>
+            </ListboxButton>
 
-          <transition
-            leave-active-class="pbx-transition pbx-ease-in pbx-duration-100"
-            leave-from-class="pbx-opacity-100"
-            leave-to-class="pbx-opacity-0"
-          >
-            <ListboxOptions
-              class="pbx-absolute pbx-z-10 pbx-mt-1 pbx-max-h-56 pbx-w-full pbx-overflow-auto pbx-rounded-md pbx-bg-white pbx-text-base pbx-shadow-lg pbx-ring-1 pbx-ring-black pbx-ring-opacity-5 focus:pbx-outline-none sm:pbx-text-sm pbx-list-none pbx-p-0 pbx-m-0"
+            <transition
+              leave-active-class="pbx-transition pbx-ease-in pbx-duration-100"
+              leave-from-class="pbx-opacity-100"
+              leave-to-class="pbx-opacity-0"
             >
-              <ListboxOption
-                as="template"
-                v-for="color in tailwindBorderStyleWidthPlusColor.borderColor"
-                @click="pageBuilderService.handleBorderColor(borderColor)"
-                :key="color"
-                :value="color"
-                v-slot="{ active, borderColor }"
+              <ListboxOptions
+                class="pbx-absolute pbx-z-10 pbx-mt-1 pbx-max-h-56 pbx-w-full pbx-overflow-auto pbx-rounded-md pbx-bg-white pbx-text-base pbx-shadow-lg pbx-ring-1 pbx-ring-black pbx-ring-opacity-5 focus:pbx-outline-none sm:pbx-text-sm pbx-list-none pbx-p-0 pbx-m-0"
               >
-                <li
-                  :class="[
-                    active
-                      ? 'pbx-bg-myPrimaryLinkColor pbx-text-white'
-                      : 'pbx-text-myPrimaryDarkGrayColor',
-                    'pbx-relative pbx-cursor-default pbx-select-none pbx-py-2 pbx-pl-3 pbx-pr-9',
-                  ]"
+                <ListboxOption
+                  as="template"
+                  v-for="color in tailwindBorderStyleWidthPlusColor.borderColor"
+                  @click="pageBuilderService.handleBorderColor(borderColor)"
+                  :key="color"
+                  :value="color"
+                  v-slot="{ active, borderColor }"
                 >
-                  <div class="pbx-flex pbx-items-center">
-                    <div v-if="color === 'none'">
-                      <div class="pbx-myPrimaryColorPreview pbx-border-none">
-                        <span class="material-symbols-outlined"> ev_shadow </span>
+                  <li
+                    :class="[
+                      active
+                        ? 'pbx-bg-myPrimaryLinkColor pbx-text-white'
+                        : 'pbx-text-myPrimaryDarkGrayColor',
+                      'pbx-relative pbx-cursor-default pbx-select-none pbx-py-2 pbx-pl-3 pbx-pr-9',
+                    ]"
+                  >
+                    <div class="pbx-flex pbx-items-center">
+                      <div v-if="color === 'none'">
+                        <div class="pbx-myPrimaryColorPreview pbx-border-none">
+                          <span class="material-symbols-outlined"> ev_shadow </span>
+                        </div>
                       </div>
-                    </div>
 
-                    <div
-                      v-if="color !== 'none'"
-                      class="pbx-aspect-square pbx-w-6 pbx-h-6 pbx-bg-gray-950"
-                      :class="`pbx-bg-${color.replace('pbx-border-', '')}`"
-                    ></div>
-                    <span v-if="color === 'none'" class="pbx-ml-3">{{
-                      translate('Transparent')
-                    }}</span>
-                    <span v-if="color !== 'none'" class="pbx-ml-3">{{ color }}</span>
-                  </div>
-                </li>
-              </ListboxOption>
-            </ListboxOptions>
-          </transition>
-        </div>
-      </Listbox>
+                      <div
+                        v-if="color !== 'none'"
+                        class="pbx-aspect-square pbx-w-6 pbx-h-6 pbx-bg-gray-950"
+                        :class="`pbx-bg-${color.replace('pbx-border-', '')}`"
+                      ></div>
+                      <span v-if="color === 'none'" class="pbx-ml-3">{{
+                        translate('Transparent')
+                      }}</span>
+                      <span v-if="color !== 'none'" class="pbx-ml-3">{{ color }}</span>
+                    </div>
+                  </li>
+                </ListboxOption>
+              </ListboxOptions>
+            </transition>
+          </div>
+        </Listbox>
+      </div>
     </template>
   </EditorAccordion>
 </template>

package/src/Components/PageBuilder/EditorMenu/Editables/ClassEditor.vue

@@ -83,7 +83,8 @@ const handleAddClasses = async () => {
         </div>
       </div>
 
-      <div>
+      <hr />
+      <div class="pbx-my-2 pbx-py-2">
         <label for="custom-css" class="pbx-myPrimaryInputLabel">
           {{ translate('Add your CSS.') }}
           <br />

package/src/Components/PageBuilder/EditorMenu/Editables/StyleEditor.vue

@@ -86,7 +86,8 @@ const handleAddStyle = async () => {
         </div>
       </div>
 
-      <div>
+      <hr />
+      <div class="pbx-my-2 pbx-py-2">
         <label for="custom-style-property" class="pbx-myPrimaryInputLabel">
           {{ translate('Add your own style.') }}
         </label>

package/src/Components/PageBuilder/EditorMenu/RightSidebarEditor.vue

@@ -194,7 +194,8 @@ const handleCloseGlobalPageStyles = async function () {
               }}
             </label>
 
-            <div class="pbx-mt-4">
+            <hr />
+            <div class="pbx-my-2 pbx-py-2">
               <button @click="handleUpdatePageStyles" type="button" class="pbx-myPrimaryButton">
                 {{ translate('Update Page Styles') }}
               </button>
@@ -219,7 +220,8 @@ const handleCloseGlobalPageStyles = async function () {
                 )
               }}
             </label>
-            <div class="pbx-mt-4">
+            <hr />
+            <div class="pbx-my-2 pbx-py-2">
               <button @click="handleDownloadHTML" type="button" class="pbx-myPrimaryButton">
                 {{ translate('Download HTML file') }}
               </button>