nwl-components 1.1.0 → 1.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/nwl-components.es.js +17 -4
- package/dist/nwl-components.umd.js +38 -38
- package/dist/style.css +1 -1
- package/package.json +1 -1
|
@@ -10476,8 +10476,8 @@ var vueResizable_umd_min = { exports: {} };
|
|
|
10476
10476
|
});
|
|
10477
10477
|
})(vueResizable_umd_min);
|
|
10478
10478
|
var VueResizable = /* @__PURE__ */ getDefaultExportFromCjs(vueResizable_umd_min.exports);
|
|
10479
|
-
var Editor_vue_vue_type_style_index_0_scoped_true_lang = /* @__PURE__ */ (() => ".area[data-v-
|
|
10480
|
-
const _withScopeId$2 = (n) => (pushScopeId("data-v-
|
|
10479
|
+
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")();
|
|
10480
|
+
const _withScopeId$2 = (n) => (pushScopeId("data-v-1b64780b"), n = n(), popScopeId(), n);
|
|
10481
10481
|
const _hoisted_1$8 = { class: "content-wrapper" };
|
|
10482
10482
|
const _hoisted_2$4 = /* @__PURE__ */ _withScopeId$2(() => /* @__PURE__ */ createElementVNode("img", {
|
|
10483
10483
|
src: _imports_0$2,
|
|
@@ -10523,6 +10523,8 @@ const _sfc_main$9 = {
|
|
|
10523
10523
|
const toggled = ref(true);
|
|
10524
10524
|
const toolsRect = ref({});
|
|
10525
10525
|
const area = ref(null);
|
|
10526
|
+
const resizableComponent = ref(null);
|
|
10527
|
+
const denseHeight = ref(220);
|
|
10526
10528
|
watch(props, () => {
|
|
10527
10529
|
if (props.dense) {
|
|
10528
10530
|
const resizable = area.value.querySelector(".resizable-component");
|
|
@@ -10557,6 +10559,14 @@ const _sfc_main$9 = {
|
|
|
10557
10559
|
const paletteRect = area.value.querySelector(".palette").getBoundingClientRect();
|
|
10558
10560
|
resizable.style.height = paletteRect.height + "px";
|
|
10559
10561
|
};
|
|
10562
|
+
const onResizeMove = () => {
|
|
10563
|
+
const resizable = area.value.querySelector(".resizable-component");
|
|
10564
|
+
if (resizable.getBoundingClientRect().width <= 518) {
|
|
10565
|
+
denseHeight.value = 220;
|
|
10566
|
+
} else {
|
|
10567
|
+
denseHeight.value = 160;
|
|
10568
|
+
}
|
|
10569
|
+
};
|
|
10560
10570
|
onMounted(() => {
|
|
10561
10571
|
document.addEventListener("mousemove", handleMove);
|
|
10562
10572
|
placeLeft();
|
|
@@ -10597,11 +10607,14 @@ const _sfc_main$9 = {
|
|
|
10597
10607
|
[vShow, !toggled.value]
|
|
10598
10608
|
]),
|
|
10599
10609
|
withDirectives(createVNode(unref(VueResizable), {
|
|
10610
|
+
ref_key: "resizableComponent",
|
|
10611
|
+
ref: resizableComponent,
|
|
10600
10612
|
active: __props.dense ? ["r"] : ["rb", "b", "r"],
|
|
10601
10613
|
"min-width": 275,
|
|
10602
10614
|
"min-height": __props.dense ? 0 : 320,
|
|
10603
10615
|
width: 275,
|
|
10604
|
-
height: __props.dense ?
|
|
10616
|
+
height: __props.dense ? denseHeight.value : 320,
|
|
10617
|
+
"onResize:move": onResizeMove,
|
|
10605
10618
|
"onResize:end": onResizeEnd
|
|
10606
10619
|
}, {
|
|
10607
10620
|
default: withCtx(() => [
|
|
@@ -10638,7 +10651,7 @@ const _sfc_main$9 = {
|
|
|
10638
10651
|
};
|
|
10639
10652
|
}
|
|
10640
10653
|
};
|
|
10641
|
-
var Editor = /* @__PURE__ */ _export_sfc$1(_sfc_main$9, [["__scopeId", "data-v-
|
|
10654
|
+
var Editor = /* @__PURE__ */ _export_sfc$1(_sfc_main$9, [["__scopeId", "data-v-1b64780b"]]);
|
|
10642
10655
|
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")();
|
|
10643
10656
|
const _hoisted_1$7 = { class: "range-slider" };
|
|
10644
10657
|
const _hoisted_2$3 = /* @__PURE__ */ createTextVNode("-");
|