nwl-components 1.0.8 → 1.1.1

package/dist/nwl-components.es.js

@@ -10476,8 +10476,8 @@ var vueResizable_umd_min = { exports: {} };
   });
 })(vueResizable_umd_min);
 var VueResizable = /* @__PURE__ */ getDefaultExportFromCjs(vueResizable_umd_min.exports);
-var Editor_vue_vue_type_style_index_0_scoped_true_lang = /* @__PURE__ */ (() => ".area[data-v-8b3bc0da]{position:relative}.show-tools[data-v-8b3bc0da]{width:32px;height:32px;border:thin solid #777;border-radius:50%;background-color:#333;display:flex;align-items:center;justify-content:center}.show-tools img[data-v-8b3bc0da]{width:28px}.tools[data-v-8b3bc0da]{position:absolute;z-index:11}.tools .palette[data-v-8b3bc0da]{width:100%;height:100%;min-width:274px;background-color:#000000b3;box-shadow:2px 2px 5px gray}.tools .palette .content[data-v-8b3bc0da] button,.tools .palette .content[data-v-8b3bc0da] .group{flex-grow:1;flex-shrink:1;margin:1px}.tools .palette .content[data-v-8b3bc0da] button{padding:3px 6px}.tools .palette .content[data-v-8b3bc0da] .group button{padding:3px 6px;margin:0}.tools .content[data-v-8b3bc0da]{padding:5px 10px;height:100%;display:flex;flex-direction:column}.header[data-v-8b3bc0da]{display:flex;background:#333;user-select:none;align-items:center}.header button[data-v-8b3bc0da]{appearance:none;border:0;background:transparent;padding:5px;display:flex;align-items:center}.header button img[data-v-8b3bc0da]{max-height:14px}.title[data-v-8b3bc0da]{margin-left:5px;margin-right:auto}.content-wrapper[data-v-8b3bc0da]{position:relative;width:100%;height:100%}\n")();
-const _withScopeId$2 = (n) => (pushScopeId("data-v-8b3bc0da"), n = n(), popScopeId(), n);
+var Editor_vue_vue_type_style_index_0_scoped_true_lang = /* @__PURE__ */ (() => ".area[data-v-1b64780b]{position:relative}.show-tools[data-v-1b64780b]{width:32px;height:32px;border:thin solid #777;border-radius:50%;background-color:#333;display:flex;align-items:center;justify-content:center}.show-tools img[data-v-1b64780b]{width:28px}.tools[data-v-1b64780b]{position:absolute;z-index:11}.tools .palette[data-v-1b64780b]{width:100%;height:100%;min-width:274px;background-color:#000000b3;box-shadow:2px 2px 5px gray}.tools .palette .content[data-v-1b64780b] button,.tools .palette .content[data-v-1b64780b] .group{flex-grow:1;flex-shrink:1;margin:1px}.tools .palette .content[data-v-1b64780b] button{padding:1px 6px}.tools .palette .content[data-v-1b64780b] .group button{padding:1px 6px;margin:0}.tools .content[data-v-1b64780b]{padding:5px 10px;height:100%;display:flex;flex-direction:column}.header[data-v-1b64780b]{display:flex;background:#333;user-select:none;align-items:center}.header button[data-v-1b64780b]{appearance:none;border:0;background:transparent;padding:5px;display:flex;align-items:center}.header button img[data-v-1b64780b]{max-height:14px}.title[data-v-1b64780b]{margin-left:5px;margin-right:auto}.content-wrapper[data-v-1b64780b]{position:relative;width:100%;height:100%}\n")();
+const _withScopeId$2 = (n) => (pushScopeId("data-v-1b64780b"), n = n(), popScopeId(), n);
 const _hoisted_1$8 = { class: "content-wrapper" };
 const _hoisted_2$4 = /* @__PURE__ */ _withScopeId$2(() => /* @__PURE__ */ createElementVNode("img", {
   src: _imports_0$2,
@@ -10516,12 +10516,21 @@ const _sfc_main$9 = {
   __name: "Editor",
   props: { title: String, dense: Boolean },
   setup(__props) {
+    const props = __props;
     const drag = ref(false);
     const position = ref({ top: 5, left: 5, right: "auto" });
     const relativeCoords = ref({ left: 0, top: 0 });
     const toggled = ref(true);
     const toolsRect = ref({});
     const area = ref(null);
+    const resizableComponent = ref(null);
+    const denseHeight = ref(220);
+    watch(props, () => {
+      if (props.dense) {
+        const resizable = area.value.querySelector(".resizable-component");
+        resizable.style.height = "auto";
+      }
+    });
     const handleMouseDown = (event) => {
       const headerRect = event.target.getBoundingClientRect();
       relativeCoords.value = {
@@ -10550,6 +10559,14 @@ const _sfc_main$9 = {
       const paletteRect = area.value.querySelector(".palette").getBoundingClientRect();
       resizable.style.height = paletteRect.height + "px";
     };
+    const onResizeMove = () => {
+      const resizable = area.value.querySelector(".resizable-component");
+      if (resizable.getBoundingClientRect().width <= 518) {
+        denseHeight.value = 220;
+      } else {
+        denseHeight.value = 160;
+      }
+    };
     onMounted(() => {
       document.addEventListener("mousemove", handleMove);
       placeLeft();
@@ -10590,11 +10607,14 @@ const _sfc_main$9 = {
             [vShow, !toggled.value]
           ]),
           withDirectives(createVNode(unref(VueResizable), {
+            ref_key: "resizableComponent",
+            ref: resizableComponent,
             active: __props.dense ? ["r"] : ["rb", "b", "r"],
             "min-width": 275,
-            "min-height": __props.dense ? "auto" : 320,
+            "min-height": __props.dense ? 0 : 320,
             width: 275,
-            height: __props.dense ? "auto" : 320,
+            height: __props.dense ? denseHeight.value : 320,
+            "onResize:move": onResizeMove,
             "onResize:end": onResizeEnd
           }, {
             default: withCtx(() => [
@@ -10631,7 +10651,7 @@ const _sfc_main$9 = {
     };
   }
 };
-var Editor = /* @__PURE__ */ _export_sfc$1(_sfc_main$9, [["__scopeId", "data-v-8b3bc0da"]]);
+var Editor = /* @__PURE__ */ _export_sfc$1(_sfc_main$9, [["__scopeId", "data-v-1b64780b"]]);
 var RangeSlider_vue_vue_type_style_index_0_scoped_true_lang = /* @__PURE__ */ (() => ".range-slider[data-v-7b4d1dd8]{display:flex;align-items:center;justify-content:center;width:100%}input[type=range][data-v-7b4d1dd8]{-webkit-appearance:none;margin:18px 5px;width:100%;background:transparent}input[type=range][data-v-7b4d1dd8]:focus{outline:none}input[type=range][data-v-7b4d1dd8]::-webkit-slider-runnable-track{width:100%;height:1px;cursor:pointer;background:white;border:0}input[type=range][data-v-7b4d1dd8]::-webkit-slider-thumb{box-shadow:none;border:none;height:20px;width:20px;border-radius:50%;background:#ffffff;cursor:pointer;-webkit-appearance:none;margin-top:-10px}input[type=range][data-v-7b4d1dd8]:focus::-webkit-slider-runnable-track{background:white}input[type=range][data-v-7b4d1dd8]::-moz-range-track{width:100%;height:1px;background:#ffffff;cursor:pointer;box-shadow:none;border:none}input[type=range][data-v-7b4d1dd8]::-moz-range-thumb{box-shadow:none;border:none;height:20px;width:20px;border-radius:50%;background:white;cursor:pointer}input[type=range][data-v-7b4d1dd8]::-ms-track{width:100%;height:1px;cursor:pointer;background:transparent;border-color:transparent;border-width:16px 0;color:transparent}input[type=range][data-v-7b4d1dd8]::-ms-thumb{box-shadow:none;border:none;height:20px;width:20px;border-radius:50%;background:#ffffff;cursor:pointer}input[type=range][data-v-7b4d1dd8]:focus::-ms-fill-lower{background:white}input[type=range][data-v-7b4d1dd8]:focus::-ms-fill-upper{background:white}\n")();
 const _hoisted_1$7 = { class: "range-slider" };
 const _hoisted_2$3 = /* @__PURE__ */ createTextVNode("-");