@tailor-cms/ce-accordion-edit 0.0.5 → 0.0.7

package/dist/index.cjs

@@ -19601,7 +19601,7 @@ function uniqueId(prefix) {
 }
 var uniqueId_1 = uniqueId;
 const uniqueId$1 = /* @__PURE__ */ getDefaultExportFromCjs(uniqueId_1);
-const _hoisted_1$3 = ["id", "accept"];
+const _hoisted_1$4 = ["id", "accept"];
 /* @__PURE__ */ vue.defineComponent({
   __name: "UploadBtn",
   props: {
@@ -19654,7 +19654,7 @@ const _hoisted_1$3 = ["id", "accept"];
           class: "d-none",
           type: "file",
           onChange: _cache[1] || (_cache[1] = ($event) => validateAndUpload($event.target))
-        }, null, 40, _hoisted_1$3)),
+        }, null, 40, _hoisted_1$4)),
         fileInput.value ? (vue.openBlock(), vue.createBlock(_component_VBtn, {
           key: 0,
           loading: vue.unref(uploading),
@@ -19675,11 +19675,11 @@ const _hoisted_1$3 = ["id", "accept"];
     };
   }
 });
-const _hoisted_1$2 = {
+const _hoisted_1$3 = {
   key: 0,
   class: "text-grey-darken-2 text-subtitle-1"
 };
-const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
   __name: "ElementPlaceholder",
   props: {
     icon: {},
@@ -19727,7 +19727,7 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
               _ctx.dense ? "my-2 text-subtitle-2" : "my-4 text-h5"
             ])
           }, vue.toDisplayString(_ctx.name), 3),
-          !_ctx.dense && !_ctx.isDisabled ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$2, [
+          !_ctx.dense && !_ctx.isDisabled ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3, [
             !_ctx.isFocused ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
               vue.createTextVNode(vue.toDisplayString(_ctx.placeholder), 1)
             ], 64)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
@@ -27490,7 +27490,7 @@ function isEmpty(value) {
 }
 var isEmpty_1 = isEmpty;
 const isEmpty$1 = /* @__PURE__ */ getDefaultExportFromCjs(isEmpty_1);
-const _hoisted_1$1 = {
+const _hoisted_1$2 = {
   key: 2,
   class: "accordion-title ml-4"
 };
@@ -27498,7 +27498,7 @@ const _hoisted_2 = {
   key: 3,
   class: "d-flex mx-2 ga-1"
 };
-const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
   __name: "AccordionItem",
   props: {
     item: {},
@@ -27606,7 +27606,7 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
                         }, ["stop"])),
                         onKeyup: _cache[3] || (_cache[3] = vue.withKeys(vue.withModifiers(() => {
                         }, ["prevent"]), ["space"]))
-                      }, null, 8, ["modelValue", "rules"])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1, vue.toDisplayString(_ctx.item.title), 1)),
+                      }, null, 8, ["modelValue", "rules"])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$2, vue.toDisplayString(_ctx.item.title), 1)),
                       vue.createVNode(_component_VSpacer),
                       !_ctx.isDisabled ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
                         isEditing.value ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
@@ -27697,9 +27697,9 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const AccordionItem_vue_vue_type_style_index_0_scoped_2e9fbd32_lang = "";
-const AccordionItem = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-2e9fbd32"]]);
-const _hoisted_1 = { class: "tce-accordion d-flex flex-column align-center text-center" };
-const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+const AccordionItem = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-2e9fbd32"]]);
+const _hoisted_1$1 = { class: "tce-accordion d-flex flex-column align-center text-center" };
+const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
   __name: "Edit",
   props: {
     element: {},
@@ -27710,6 +27710,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   emits: ["save", "link"],
   setup(__props, { emit: emit2 }) {
     const props2 = __props;
+    const elementBus = vue.inject("$elementBus");
     const expanded = vue.ref([]);
     const elementData = vue.reactive(cloneDeep$1(props2.element.data));
     const panels = vue.ref();
@@ -27720,12 +27721,6 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         return acc;
       }, {})
     );
-    const add2 = () => {
-      const id = createId_1();
-      elementData.items.push({ id, title: "Title", elementIds: [] });
-      expanded.value.push(id);
-      emit2("save", elementData);
-    };
     const saveItem = ({ item, embeds = {} }, index2) => {
       elementData.items[index2] = item;
       Object.assign(elementData.embeds, embeds);
@@ -27753,19 +27748,25 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         }
       });
     });
+    elementBus.on("add", () => {
+      const id = createId_1();
+      elementData.items.push({ id, title: "Title", elementIds: [] });
+      expanded.value.push(id);
+      emit2("save", elementData);
+    });
     vue.onBeforeUnmount(() => {
       sortable.value.destroy();
     });
     return (_ctx, _cache) => {
       const _component_VExpandTransition = vue.resolveComponent("VExpandTransition");
       const _component_VExpansionPanels = vue.resolveComponent("VExpansionPanels");
-      const _component_VBtn = vue.resolveComponent("VBtn");
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1, [
         vue.createVNode(_component_VExpansionPanels, {
           ref_key: "panels",
           ref: panels,
           modelValue: expanded.value,
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => expanded.value = $event),
+          elevation: "0",
           rounded: "lg",
           multiple: ""
         }, {
@@ -27795,37 +27796,49 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
           ]),
           _: 1
         }, 8, ["modelValue"]),
-        !elementData.items.length ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$2), {
+        !elementData.items.length ? (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$3), {
           key: 0,
           icon: vue.unref(src_default).ui.icon,
           "is-disabled": _ctx.isDisabled,
           "is-focused": _ctx.isFocused,
           name: `${vue.unref(src_default).name} component`,
-          "active-icon": "mdi-arrow-down",
-          "active-placeholder": "Click the button below to create the first item"
-        }, null, 8, ["icon", "is-disabled", "is-focused", "name"])) : vue.createCommentVNode("", true),
-        !_ctx.isDisabled ? (vue.openBlock(), vue.createBlock(_component_VBtn, {
-          key: 1,
-          class: "mt-6",
+          "active-icon": "mdi-arrow-up",
+          "active-placeholder": "Use toolbar to create the first item"
+        }, null, 8, ["icon", "is-disabled", "is-focused", "name"])) : vue.createCommentVNode("", true)
+      ]);
+    };
+  }
+});
+const Edit_vue_vue_type_style_index_0_scoped_38529b44_lang = "";
+const Edit = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-38529b44"]]);
+const _hoisted_1 = { class: "d-flex align-center justify-center" };
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "TopToolbar",
+  setup(__props) {
+    const elementBus = vue.inject("$elementBus");
+    return (_ctx, _cache) => {
+      const _component_VBtn = vue.resolveComponent("VBtn");
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+        vue.createVNode(_component_VBtn, {
           color: "primary-darken-4",
           "prepend-icon": "mdi-plus",
           variant: "text",
-          onClick: add2
+          onClick: _cache[0] || (_cache[0] = ($event) => vue.unref(elementBus).emit("add"))
         }, {
           default: vue.withCtx(() => [
             vue.createTextVNode(" Add accordion item ")
           ]),
           _: 1
-        })) : vue.createCommentVNode("", true)
+        })
       ]);
     };
   }
 });
-const Edit_vue_vue_type_style_index_0_scoped_b6deefb4_lang = "";
-const Edit = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-b6deefb4"]]);
 const manifest = {
   ...src_default,
-  Edit
+  Edit,
+  TopToolbar: _sfc_main
 };
 exports.Edit = Edit;
+exports.TopToolbar = _sfc_main;
 exports.default = manifest;

package/dist/index.js

@@ -19599,7 +19599,7 @@ function uniqueId(prefix) {
 }
 var uniqueId_1 = uniqueId;
 const uniqueId$1 = /* @__PURE__ */ getDefaultExportFromCjs(uniqueId_1);
-const _hoisted_1$3 = ["id", "accept"];
+const _hoisted_1$4 = ["id", "accept"];
 /* @__PURE__ */ defineComponent({
   __name: "UploadBtn",
   props: {
@@ -19652,7 +19652,7 @@ const _hoisted_1$3 = ["id", "accept"];
           class: "d-none",
           type: "file",
           onChange: _cache[1] || (_cache[1] = ($event) => validateAndUpload($event.target))
-        }, null, 40, _hoisted_1$3)),
+        }, null, 40, _hoisted_1$4)),
         fileInput.value ? (openBlock(), createBlock(_component_VBtn, {
           key: 0,
           loading: unref(uploading),
@@ -19673,11 +19673,11 @@ const _hoisted_1$3 = ["id", "accept"];
     };
   }
 });
-const _hoisted_1$2 = {
+const _hoisted_1$3 = {
   key: 0,
   class: "text-grey-darken-2 text-subtitle-1"
 };
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   __name: "ElementPlaceholder",
   props: {
     icon: {},
@@ -19725,7 +19725,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
               _ctx.dense ? "my-2 text-subtitle-2" : "my-4 text-h5"
             ])
           }, toDisplayString(_ctx.name), 3),
-          !_ctx.dense && !_ctx.isDisabled ? (openBlock(), createElementBlock("div", _hoisted_1$2, [
+          !_ctx.dense && !_ctx.isDisabled ? (openBlock(), createElementBlock("div", _hoisted_1$3, [
             !_ctx.isFocused ? (openBlock(), createElementBlock(Fragment$1, { key: 0 }, [
               createTextVNode(toDisplayString(_ctx.placeholder), 1)
             ], 64)) : (openBlock(), createElementBlock(Fragment$1, { key: 1 }, [
@@ -27488,7 +27488,7 @@ function isEmpty(value) {
 }
 var isEmpty_1 = isEmpty;
 const isEmpty$1 = /* @__PURE__ */ getDefaultExportFromCjs(isEmpty_1);
-const _hoisted_1$1 = {
+const _hoisted_1$2 = {
   key: 2,
   class: "accordion-title ml-4"
 };
@@ -27496,7 +27496,7 @@ const _hoisted_2 = {
   key: 3,
   class: "d-flex mx-2 ga-1"
 };
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   __name: "AccordionItem",
   props: {
     item: {},
@@ -27604,7 +27604,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                         }, ["stop"])),
                         onKeyup: _cache[3] || (_cache[3] = withKeys(withModifiers(() => {
                         }, ["prevent"]), ["space"]))
-                      }, null, 8, ["modelValue", "rules"])) : (openBlock(), createElementBlock("div", _hoisted_1$1, toDisplayString(_ctx.item.title), 1)),
+                      }, null, 8, ["modelValue", "rules"])) : (openBlock(), createElementBlock("div", _hoisted_1$2, toDisplayString(_ctx.item.title), 1)),
                       createVNode(_component_VSpacer),
                       !_ctx.isDisabled ? (openBlock(), createElementBlock("div", _hoisted_2, [
                         isEditing.value ? (openBlock(), createElementBlock(Fragment$1, { key: 0 }, [
@@ -27695,9 +27695,9 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   }
 });
 const AccordionItem_vue_vue_type_style_index_0_scoped_2e9fbd32_lang = "";
-const AccordionItem = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-2e9fbd32"]]);
-const _hoisted_1 = { class: "tce-accordion d-flex flex-column align-center text-center" };
-const _sfc_main = /* @__PURE__ */ defineComponent({
+const AccordionItem = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-2e9fbd32"]]);
+const _hoisted_1$1 = { class: "tce-accordion d-flex flex-column align-center text-center" };
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   __name: "Edit",
   props: {
     element: {},
@@ -27708,6 +27708,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   emits: ["save", "link"],
   setup(__props, { emit: emit2 }) {
     const props2 = __props;
+    const elementBus = inject("$elementBus");
     const expanded = ref([]);
     const elementData = reactive(cloneDeep$1(props2.element.data));
     const panels = ref();
@@ -27718,12 +27719,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         return acc;
       }, {})
     );
-    const add2 = () => {
-      const id = createId_1();
-      elementData.items.push({ id, title: "Title", elementIds: [] });
-      expanded.value.push(id);
-      emit2("save", elementData);
-    };
     const saveItem = ({ item, embeds = {} }, index2) => {
       elementData.items[index2] = item;
       Object.assign(elementData.embeds, embeds);
@@ -27751,19 +27746,25 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         }
       });
     });
+    elementBus.on("add", () => {
+      const id = createId_1();
+      elementData.items.push({ id, title: "Title", elementIds: [] });
+      expanded.value.push(id);
+      emit2("save", elementData);
+    });
     onBeforeUnmount(() => {
       sortable.value.destroy();
     });
     return (_ctx, _cache) => {
       const _component_VExpandTransition = resolveComponent("VExpandTransition");
       const _component_VExpansionPanels = resolveComponent("VExpansionPanels");
-      const _component_VBtn = resolveComponent("VBtn");
-      return openBlock(), createElementBlock("div", _hoisted_1, [
+      return openBlock(), createElementBlock("div", _hoisted_1$1, [
         createVNode(_component_VExpansionPanels, {
           ref_key: "panels",
           ref: panels,
           modelValue: expanded.value,
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => expanded.value = $event),
+          elevation: "0",
           rounded: "lg",
           multiple: ""
         }, {
@@ -27793,39 +27794,51 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           ]),
           _: 1
         }, 8, ["modelValue"]),
-        !elementData.items.length ? (openBlock(), createBlock(unref(_sfc_main$2), {
+        !elementData.items.length ? (openBlock(), createBlock(unref(_sfc_main$3), {
           key: 0,
           icon: unref(src_default).ui.icon,
           "is-disabled": _ctx.isDisabled,
           "is-focused": _ctx.isFocused,
           name: `${unref(src_default).name} component`,
-          "active-icon": "mdi-arrow-down",
-          "active-placeholder": "Click the button below to create the first item"
-        }, null, 8, ["icon", "is-disabled", "is-focused", "name"])) : createCommentVNode("", true),
-        !_ctx.isDisabled ? (openBlock(), createBlock(_component_VBtn, {
-          key: 1,
-          class: "mt-6",
+          "active-icon": "mdi-arrow-up",
+          "active-placeholder": "Use toolbar to create the first item"
+        }, null, 8, ["icon", "is-disabled", "is-focused", "name"])) : createCommentVNode("", true)
+      ]);
+    };
+  }
+});
+const Edit_vue_vue_type_style_index_0_scoped_38529b44_lang = "";
+const Edit = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-38529b44"]]);
+const _hoisted_1 = { class: "d-flex align-center justify-center" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "TopToolbar",
+  setup(__props) {
+    const elementBus = inject("$elementBus");
+    return (_ctx, _cache) => {
+      const _component_VBtn = resolveComponent("VBtn");
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createVNode(_component_VBtn, {
           color: "primary-darken-4",
           "prepend-icon": "mdi-plus",
           variant: "text",
-          onClick: add2
+          onClick: _cache[0] || (_cache[0] = ($event) => unref(elementBus).emit("add"))
         }, {
           default: withCtx(() => [
             createTextVNode(" Add accordion item ")
           ]),
           _: 1
-        })) : createCommentVNode("", true)
+        })
       ]);
     };
   }
 });
-const Edit_vue_vue_type_style_index_0_scoped_b6deefb4_lang = "";
-const Edit = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-b6deefb4"]]);
 const manifest = {
   ...src_default,
-  Edit
+  Edit,
+  TopToolbar: _sfc_main
 };
 export {
   Edit,
+  _sfc_main as TopToolbar,
   manifest as default
 };

package/dist/style.css

@@ -461,7 +461,13 @@
   padding: 0.5rem 0.75rem;
   background: #424242;
   color: #fff !important;
-}.tce-accordion[data-v-b6deefb4] {
+}.tce-accordion[data-v-38529b44] {
   text-align: left;
   margin: 1rem 0;
+}
+.tce-accordion[data-v-38529b44] .v-expansion-panel-text {
+  border-bottom-right-radius: inherit;
+  border-bottom-left-radius: inherit;
+  border: 2px solid rgb(var(--v-theme-primary-lighten-5));
+  border-top: none !important;
 }

package/package.json

@@ -3,7 +3,7 @@
   "description": "Tailor CMS accordion element",
   "author": "Studion <info@gostudion.com> (https://github.com/tailor-cms)",
   "type": "module",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "exports": {
     ".": {
       "import": "./dist/index.js",
@@ -25,7 +25,7 @@
     "typescript": "^5.1.6",
     "vite": "^4.4.5",
     "vue-tsc": "^1.8.5",
-    "@tailor-cms/ce-accordion-manifest": "0.0.5"
+    "@tailor-cms/ce-accordion-manifest": "0.0.7"
   },
   "dependencies": {
     "@paralleldrive/cuid2": "^2.2.2",