eco-vue-js 0.11.11 → 0.11.13

package/dist/components/Input/WInputToolbarButton.vue.js

@@ -0,0 +1,79 @@
+import { defineComponent, ref, createBlock, openBlock, unref, withCtx, createElementVNode, withModifiers, createElementBlock, Fragment, renderList, createTextVNode, resolveDynamicComponent, toDisplayString, createVNode } from 'vue';
+import _sfc_main$1 from '../DropdownMenu/WDropdownMenu.vue.js';
+import _sfc_main$2 from '../MenuItem/WMenuItem.vue.js';
+import { HorizontalAlign } from '../../utils/HorizontalAlign.js';
+import _sfc_main$3 from './components/InputToolbarButton.vue.js';
+
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "WInputToolbarButton",
+  props: {
+    action: {}
+  },
+  emits: ["wrap-selection"],
+  setup(__props) {
+    const isOpen = ref(false);
+    let timeout = null;
+    const enter = () => {
+      if (timeout) {
+        clearTimeout(timeout);
+        timeout = null;
+      }
+      isOpen.value = true;
+    };
+    const leave = () => {
+      if (timeout) {
+        clearTimeout(timeout);
+        timeout = null;
+      }
+      timeout = setTimeout(() => {
+        isOpen.value = false;
+        timeout = null;
+      });
+    };
+    return (_ctx, _cache) => {
+      return Array.isArray(_ctx.action.value) ? (openBlock(), createBlock(_sfc_main$1, {
+        key: 0,
+        "is-open": isOpen.value,
+        "horizontal-align": unref(HorizontalAlign).CENTER,
+        top: ""
+      }, {
+        toggle: withCtx(() => [
+          createVNode(_sfc_main$3, {
+            action: _ctx.action,
+            onMouseenter: enter,
+            onMouseleave: leave
+          }, null, 8, ["action"])
+        ]),
+        content: withCtx(() => [
+          createElementVNode("div", {
+            class: "bg-default dark:bg-default-dark max-h-80 overflow-y-auto overscroll-y-contain rounded-xl text-start text-xs font-semibold shadow-md dark:border dark:border-solid dark:border-gray-800",
+            onMouseenter: enter,
+            onMouseleave: leave,
+            onMousedown: _cache[0] || (_cache[0] = withModifiers(() => {
+            }, ["prevent"]))
+          }, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.action.value, (item, index) => {
+              return openBlock(), createBlock(_sfc_main$2, {
+                key: index,
+                onClick: ($event) => _ctx.$emit("wrap-selection", item.value)
+              }, {
+                default: withCtx(() => [
+                  (openBlock(), createBlock(resolveDynamicComponent(item.icon))),
+                  createTextVNode(" " + toDisplayString(item.title), 1)
+                ]),
+                _: 2
+              }, 1032, ["onClick"]);
+            }), 128))
+          ], 32)
+        ]),
+        _: 1
+      }, 8, ["is-open", "horizontal-align"])) : (openBlock(), createBlock(_sfc_main$3, {
+        key: 1,
+        action: _ctx.action,
+        onClick: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("wrap-selection", _ctx.action.value))
+      }, null, 8, ["action"]));
+    };
+  }
+});
+
+export { _sfc_main as default };

package/dist/components/Input/WInputToolbarButton.vue2.js

@@ -0,0 +1,5 @@
+import _sfc_main from './WInputToolbarButton.vue.js';
+
+
+
+export { _sfc_main as default };

package/dist/components/Input/components/ContentEditable.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContentEditable.vue.d.ts","sourceRoot":"","sources":["../../../../../src/components/Input/components/ContentEditable.vue"],"names":[],"mappings":"AAiBA;AA+RA,OAAO,KAAK,EAAC,QAAQ,EAAE,aAAa,EAAC,MAAM,UAAU,CAAA;AAIrD,KAAK,WAAW,GAAG;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,MAAM,CAAA;IACnB,SAAS,EAAE,MAAM,CAAA;IACjB,SAAS,EAAE,QAAQ,EAAE,GAAG,SAAS,CAAA;CAClC,CAAC;;;;2BAsN4B,aAAa,KAAG,IAAI;2BAnBpB,MAAM,aAAa,MAAM;;;;;;;;;;;;;;;;;;;AA2IvD,wBAUG"}
+{"version":3,"file":"ContentEditable.vue.d.ts","sourceRoot":"","sources":["../../../../../src/components/Input/components/ContentEditable.vue"],"names":[],"mappings":"AAiBA;AAyXA,OAAO,KAAK,EAAC,QAAQ,EAAG,aAAa,EAAC,MAAM,UAAU,CAAA;AAQtD,KAAK,WAAW,GAAG;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,MAAM,CAAA;IACnB,SAAS,EAAE,MAAM,CAAA;IACjB,SAAS,EAAE,QAAQ,EAAE,GAAG,SAAS,CAAA;CAClC,CAAC;;;;2BAwN4B,aAAa,KAAG,IAAI;2BArBpB,MAAM,aAAa,MAAM;;;;;;;;;;;;;;;;;;;AAiOvD,wBAUG"}

package/dist/components/Input/components/ContentEditable.vue2.js

@@ -1,4 +1,6 @@
 import { defineComponent, useTemplateRef, ref, watch, onMounted, createElementBlock, openBlock, nextTick } from 'vue';
+import { WrapSelectionType } from '../../../utils/utils.js';
+import { preserveIndentation } from '../models/toolbarActions.js';
 
 const _hoisted_1 = ["placeholder"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
@@ -55,9 +57,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         }
         nodeIndex++;
       }
-      while (nodeIndex < existingNodes.length) {
-        elementRef.value.removeChild(existingNodes[nodeIndex]);
-        nodeIndex++;
+      while (elementRef.value.childNodes.length > props.textParts.length) {
+        const nodeToRemove = elementRef.value.childNodes[props.textParts.length];
+        elementRef.value.removeChild(nodeToRemove);
       }
       if (focused.value) setCaret(offsets.start, offsets.end !== offsets.start ? void 0 : offsets.end);
     };
@@ -160,21 +162,95 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       selection?.removeAllRanges();
       selection?.addRange(range);
     };
+    const collapseList = [" ", "\n"];
     let offsetsOld = null;
     const wrapSelection = (value) => {
-      const root = elementRef.value;
-      if (!root) return;
       let offsets = getSelectionOffsets();
       if (focused.value || !offsetsOld) offsetsOld = offsets;
       else offsets = offsetsOld;
       const currentText = getCurrentText() ?? "";
-      const selectedText = currentText.slice(offsets.start, offsets.end);
-      const beforeSelection = currentText.slice(0, offsets.start);
-      const afterSelection = currentText.slice(offsets.end);
-      const newText = beforeSelection + (value.start || "") + selectedText + (value.end || "") + afterSelection;
-      const cursorPosition = offsets.start + (value.end ? (value.start?.length ?? 0) + selectedText.length : 0);
+      let newText = "";
+      let newCursorStart = offsets.start;
+      let newCursorEnd = void 0;
+      switch (value.type) {
+        case WrapSelectionType.TOGGLE:
+          let startLen = value.start.length;
+          const endLen = value.end.length;
+          const textWithContext = currentText.slice(
+            Math.max(0, offsets.start - startLen),
+            Math.min(currentText.length, offsets.end + endLen)
+          );
+          if ((!value.start || textWithContext.startsWith(value.start)) && (!value.end || textWithContext.endsWith(value.end))) {
+            let expandedStart = Math.max(0, offsets.start - startLen);
+            let start = currentText.slice(0, expandedStart);
+            const middle = currentText.slice(offsets.start, offsets.end);
+            let end = currentText.slice(Math.min(currentText.length, offsets.end + endLen));
+            for (const item of collapseList) {
+              if (value.start.startsWith(item) && !start.endsWith(item) && !middle.startsWith(item)) {
+                start += item;
+                expandedStart += item.length;
+              }
+              if (value.end.endsWith(item) && !end.startsWith(item) && !middle.endsWith(item)) end = item + end;
+            }
+            newText = start + middle + end;
+            if (value.prepare) newText = value.prepare(newText, 0);
+            newCursorStart = expandedStart;
+            newCursorEnd = expandedStart + offsets.end - offsets.start;
+          } else {
+            if (!value.start || !value.end) {
+              const offset = value.start ? offsets.start : offsets.end;
+              let start = currentText.slice(0, offset);
+              let end = currentText.slice(offset);
+              for (const item of collapseList) {
+                if (value.start.startsWith(item) && start.endsWith(item)) {
+                  start = start.slice(0, offsets.start - item.length);
+                  startLen -= item.length;
+                }
+                if (value.end.endsWith(item) && end.startsWith(item)) end = end.slice(item.length);
+              }
+              newText = (value.prepare?.(start, 0) ?? start) + (value.start || value.end) + (value.prepare?.(end, offset) ?? end);
+            } else {
+              let start = currentText.slice(0, offsets.start);
+              const middle = currentText.slice(offsets.start, offsets.end);
+              let end = currentText.slice(offsets.end);
+              for (const item of collapseList) {
+                if (value.start.startsWith(item) && start.endsWith(item)) {
+                  start = start.slice(0, offsets.start - item.length);
+                  startLen -= item.length;
+                }
+                if (value.end.endsWith(item) && end.startsWith(item)) end = end.slice(item.length);
+              }
+              newText = (value.prepare?.(start, 0) ?? start) + value.start + (value.prepare?.(middle, offsets.start) ?? middle) + value.end + (value.prepare?.(end, offsets.end) ?? end);
+            }
+            newCursorStart = offsets.start + startLen;
+            if (offsets.start !== offsets.end) newCursorEnd = newCursorStart + offsets.end - offsets.start;
+          }
+          break;
+        case WrapSelectionType.LINE_PREFIX:
+          const lineStart = currentText.lastIndexOf("\n", offsets.start - 1) + 1;
+          const lineEnd = currentText.indexOf("\n", offsets.end);
+          const actualLineEnd = lineEnd === -1 ? currentText.length : lineEnd;
+          const linesText = currentText.slice(lineStart, actualLineEnd);
+          const beforeLines = currentText.slice(0, lineStart);
+          const afterLines = currentText.slice(actualLineEnd);
+          const lines = linesText.split("\n");
+          if (lines.length === 0) lines.push("");
+          const allLinesHavePrefix = value.detectPattern ? lines.every((line) => !line.trim() || value.detectPattern.test(line)) : value.linePrefix ? lines.every((line) => !line.trim() || line.startsWith(value.linePrefix)) : false;
+          if (allLinesHavePrefix) {
+            const cleanText = lines.map((line) => preserveIndentation(line, "")).join("\n");
+            newText = beforeLines + cleanText + afterLines;
+            newCursorStart = lineStart;
+            newCursorEnd = lineStart + cleanText.length;
+          } else {
+            const processedText = value.lineTransformAll ? value.lineTransformAll(lines) : value.lineTransform ? lines.map(value.lineTransform).join("\n") : lines.map((line) => line.trim() ? preserveIndentation(line, value.linePrefix) : line).join("\n");
+            newText = beforeLines + processedText + afterLines;
+            newCursorStart = lineStart;
+            newCursorEnd = lineStart + processedText.length;
+          }
+          break;
+      }
       emit("update:model-value", newText);
-      nextTick(() => setCaret(cursorPosition));
+      nextTick(() => setCaret(newCursorStart, newCursorEnd));
     };
     const focus = () => {
       elementRef.value?.focus();

package/dist/components/Input/components/InputToolbar.vue.d.ts

@@ -0,0 +1,27 @@
+import { ToolbarAction, WrapSelection } from '../types';
+type __VLS_Props = {
+    list: ToolbarAction[] | undefined;
+    rich: boolean;
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    "wrap-selection": (value: WrapSelection) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onWrap-selection"?: ((value: WrapSelection) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=InputToolbar.vue.d.ts.map

package/dist/components/Input/components/InputToolbar.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputToolbar.vue.d.ts","sourceRoot":"","sources":["../../../../../src/components/Input/components/InputToolbar.vue"],"names":[],"mappings":"AA2BA;AA4CA,OAAO,KAAK,EAAC,aAAa,EAAE,aAAa,EAAC,MAAM,0BAA0B,CAAA;AAK1E,KAAK,WAAW,GAAG;IACjB,IAAI,EAAE,aAAa,EAAE,GAAG,SAAS,CAAA;IACjC,IAAI,EAAE,OAAO,CAAA;CACd,CAAC;AAUF,iBAAS,cAAc;WA0ET,OAAO,IAA6B;;yBAVrB,GAAG;;;;EAe/B;AAWD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;6FAQnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAQpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/components/Input/components/InputToolbar.vue.js

@@ -0,0 +1,5 @@
+import _sfc_main from './InputToolbar.vue2.js';
+
+
+
+export { _sfc_main as default };

package/dist/components/Input/components/InputToolbar.vue2.js

@@ -0,0 +1,39 @@
+import { defineComponent, createElementBlock, openBlock, withModifiers, renderSlot, createCommentVNode, Fragment, renderList, createBlock, unref } from 'vue';
+import _sfc_main$1 from '../WInputToolbarButton.vue.js';
+import { toolbarActionList } from '../models/toolbarActions.js';
+
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "InputToolbar",
+  props: {
+    list: {},
+    rich: { type: Boolean }
+  },
+  emits: ["wrap-selection"],
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: "bg-default dark:bg-default-dark no-scrollbar sticky top-0 z-[2] col-span-full -mb-2 flex overflow-x-auto overscroll-x-contain border-b border-solid border-gray-50 text-xs dark:border-gray-800/50",
+        onMousedown: _cache[2] || (_cache[2] = withModifiers(() => {
+        }, ["prevent"]))
+      }, [
+        renderSlot(_ctx.$slots, "default"),
+        (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.list, (action, index) => {
+          return openBlock(), createBlock(_sfc_main$1, {
+            key: index,
+            action,
+            onWrapSelection: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("wrap-selection", $event))
+          }, null, 8, ["action"]);
+        }), 128)),
+        _ctx.rich ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(unref(toolbarActionList), (action, index) => {
+          return openBlock(), createBlock(_sfc_main$1, {
+            key: index,
+            action,
+            onWrapSelection: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("wrap-selection", $event))
+          }, null, 8, ["action"]);
+        }), 128)) : createCommentVNode("", true)
+      ], 32);
+    };
+  }
+});
+
+export { _sfc_main as default };

package/dist/components/Input/components/InputToolbarButton.vue.d.ts

@@ -0,0 +1,15 @@
+import { ToolbarAction } from '../types';
+type __VLS_Props = {
+    action: ToolbarAction;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    click: (value: MouseEvent) => any;
+    mouseenter: (value: MouseEvent) => any;
+    mouseleave: (value: MouseEvent) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClick?: ((value: MouseEvent) => any) | undefined;
+    onMouseenter?: ((value: MouseEvent) => any) | undefined;
+    onMouseleave?: ((value: MouseEvent) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLButtonElement>;
+export default _default;
+//# sourceMappingURL=InputToolbarButton.vue.d.ts.map

package/dist/components/Input/components/InputToolbarButton.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputToolbarButton.vue.d.ts","sourceRoot":"","sources":["../../../../../src/components/Input/components/InputToolbarButton.vue"],"names":[],"mappings":"AAqBA;AAAA,OAsCO,KAAK,EAAC,aAAa,EAAC,MAAM,0BAA0B,CAAA;AAI3D,KAAK,WAAW,GAAG;IACjB,MAAM,EAAE,aAAa,CAAA;CACtB,CAAC;;;;;;;;;;AAmFF,wBAQG"}

package/dist/components/Input/components/InputToolbarButton.vue.js

@@ -0,0 +1,33 @@
+import { defineComponent, createElementBlock, openBlock, createElementVNode, createBlock, createCommentVNode, createTextVNode, resolveDynamicComponent, toDisplayString } from 'vue';
+import _sfc_main$1 from '../../Tooltip/WTooltip.vue.js';
+
+const _hoisted_1 = { class: "border-r border-solid border-gray-300 px-2 group-last/toolbar:border-r-0 dark:border-gray-600" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "InputToolbarButton",
+  props: {
+    action: {}
+  },
+  emits: ["click", "mouseenter", "mouseleave"],
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("button", {
+        class: "text-accent w-ripple w-ripple-hover group/toolbar first-not:-ml-px relative pb-1 pt-2",
+        onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event)),
+        onMouseenter: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("mouseenter", $event)),
+        onMouseleave: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("mouseleave", $event))
+      }, [
+        createElementVNode("div", _hoisted_1, [
+          (openBlock(), createBlock(resolveDynamicComponent(_ctx.action.icon), { class: "square-[1.25em] -mt-[0.25em] inline" })),
+          createTextVNode(" " + toDisplayString(_ctx.action.title ?? ""), 1)
+        ]),
+        _ctx.action.tooltip ? (openBlock(), createBlock(_sfc_main$1, {
+          key: 0,
+          text: _ctx.action.tooltip,
+          top: ""
+        }, null, 8, ["text"])) : createCommentVNode("", true)
+      ], 32);
+    };
+  }
+});
+
+export { _sfc_main as default };

package/dist/components/Input/components/InputToolbarButton.vue2.js

@@ -0,0 +1,5 @@
+import _sfc_main from './InputToolbarButton.vue.js';
+
+
+
+export { _sfc_main as default };

package/dist/components/Input/models/toolbarActions.d.ts

@@ -0,0 +1,6 @@
+import { ToolbarAction } from '../types';
+export declare const linePrefixRegex: RegExp;
+export declare const indentRegex: RegExp;
+export declare const preserveIndentation: (line: string, newPrefix: string) => string;
+export declare const toolbarActionList: ToolbarAction[];
+//# sourceMappingURL=toolbarActions.d.ts.map

package/dist/components/Input/models/toolbarActions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toolbarActions.d.ts","sourceRoot":"","sources":["../../../../../src/components/Input/models/toolbarActions.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,UAAU,CAAA;AAsB3C,eAAO,MAAM,eAAe,QAA0C,CAAA;AACtE,eAAO,MAAM,WAAW,QAAW,CAAA;AAGnC,eAAO,MAAM,mBAAmB,GAAI,MAAM,MAAM,EAAE,WAAW,MAAM,KAAG,MAGrE,CAAA;AAgDD,eAAO,MAAM,iBAAiB,EAAE,aAAa,EAkF5C,CAAA"}

package/dist/components/Input/models/toolbarActions.js

@@ -0,0 +1,140 @@
+import { markRaw } from 'vue';
+import IconBold from '../../../assets/icons/IconBold.svg.js';
+import IconCodeBlock from '../../../assets/icons/IconCodeBlock.svg.js';
+import IconCodeInline from '../../../assets/icons/IconCodeInline.svg.js';
+import IconHeading from '../../../assets/icons/IconHeading.svg.js';
+import IconItalic from '../../../assets/icons/IconItalic.svg.js';
+import IconLink from '../../../assets/icons/IconLink.svg.js';
+import IconListBullet from '../../../assets/icons/IconListBullet.svg.js';
+import IconListDecrease from '../../../assets/icons/IconListDecrease.svg.js';
+import IconListIncrease from '../../../assets/icons/IconListIncrease.svg.js';
+import IconListNumbered from '../../../assets/icons/IconListNumbered.svg.js';
+import IconQuote from '../../../assets/icons/IconQuote.svg.js';
+import IconStrikethrough from '../../../assets/icons/IconStrikethrough.svg.js';
+import IconTable from '../../../assets/icons/IconTable.svg.js';
+import IconTableCollapsed from '../../../assets/icons/IconTableCollapsed.svg.js';
+import { WrapSelectionType } from '../../../utils/utils.js';
+
+const linePrefixRegex = /^-\s|^>\s|^\d+\.\s|^\[ \]\s|^#{1,6}\s/;
+const indentRegex = /^(\s*)/;
+const tableDividerRowRegex = /^\s*\|(\s*-+\s*\|)+\s*$/;
+const preserveIndentation = (line, newPrefix) => {
+  const indent2 = line.match(indentRegex)?.[1] ?? "";
+  return indent2 + newPrefix + (indent2 ? line.slice(indent2.length) : line).replace(linePrefixRegex, "");
+};
+const indent = "  ";
+const insertTable = (lines, collapsed) => {
+  let indent2 = "";
+  const columns = [];
+  const items = [];
+  if (lines.length === 1 && !lines[0].trim()) lines.push("header|header");
+  else if (lines[1] && tableDividerRowRegex.test(lines[1])) lines.splice(1, 1);
+  for (const item of lines) {
+    const match = item.match(indentRegex)?.[1] ?? "";
+    if (match.length > indent2.length) indent2 = match;
+    const currentItems = [];
+    items.push(currentItems);
+    const splitted = item.trim().split("|");
+    if (splitted[0] === "") splitted.shift();
+    if (splitted[splitted.length - 1] === "") splitted.pop();
+    for (let col = 0; col < splitted.length; col++) {
+      const prepared = splitted[col].trim();
+      currentItems.push(prepared);
+      const length = collapsed ? 0 : prepared.length;
+      if (columns[col] === void 0) {
+        columns.push(length);
+      } else if (!collapsed && columns[col] < length) {
+        columns.splice(col, 1, length);
+      }
+    }
+  }
+  const s = collapsed ? "" : " ";
+  return items.map((splitted, index) => `${indent2}${columns.reduce((result, length, col) => `${result}${s}${(splitted[col] ?? "").padEnd(length, " ")}${s}|`, "|")}${index === 0 ? `
+${indent2}${columns.reduce((result, length) => `${result}${s}${"-".repeat(length || 1)}${s}|`, "|")}` : ""}${lines.length === 1 ? `
+${indent2}| ${columns.reduce((result, length) => `${result}${s}${length === 0 ? "" : " ".repeat(length)}${s}|`, "|")} |` : ""}`).join("\n");
+};
+const toolbarActionList = [
+  {
+    icon: markRaw(IconBold),
+    value: { type: WrapSelectionType.TOGGLE, start: "**", end: "**" },
+    tooltip: "Bold"
+  },
+  {
+    icon: markRaw(IconItalic),
+    value: { type: WrapSelectionType.TOGGLE, start: " _", end: "_ " },
+    tooltip: "Italic"
+  },
+  {
+    icon: markRaw(IconStrikethrough),
+    value: { type: WrapSelectionType.TOGGLE, start: "~~", end: "~~" },
+    tooltip: "Strikethrough"
+  },
+  {
+    icon: markRaw(IconCodeInline),
+    value: { type: WrapSelectionType.TOGGLE, start: "`", end: "`" },
+    tooltip: "Inline code"
+  },
+  {
+    icon: markRaw(IconCodeBlock),
+    value: { type: WrapSelectionType.TOGGLE, start: "\n```\n", end: "\n```\n" },
+    tooltip: "Code block"
+  },
+  {
+    icon: markRaw(IconLink),
+    value: { type: WrapSelectionType.TOGGLE, start: "[", end: "](url)" },
+    tooltip: "Insert link"
+  },
+  {
+    icon: markRaw(IconListBullet),
+    value: { type: WrapSelectionType.LINE_PREFIX, linePrefix: "- " },
+    tooltip: "Bullet list"
+  },
+  {
+    icon: markRaw(IconListNumbered),
+    value: {
+      type: WrapSelectionType.LINE_PREFIX,
+      detectPattern: /^\d+\.\s/,
+      lineTransform: (line, index) => preserveIndentation(line, `${index + 1}. `)
+    },
+    tooltip: "Numbered list"
+  },
+  // {
+  //   icon: markRaw(IconListCheckbox),
+  //   value: {type: WrapSelectionType.LINE_PREFIX, linePrefix: '[ ] '},
+  //   tooltip: 'Checkbox list',
+  // },
+  {
+    icon: markRaw(IconListIncrease),
+    value: { type: WrapSelectionType.LINE_PREFIX, lineTransform: (line) => indent + line },
+    tooltip: "Increase indent"
+  },
+  {
+    icon: markRaw(IconListDecrease),
+    value: { type: WrapSelectionType.LINE_PREFIX, lineTransform: (line) => line.startsWith(indent) ? line.slice(indent.length) : line },
+    tooltip: "Decrease indent"
+  },
+  {
+    icon: markRaw(IconQuote),
+    value: { type: WrapSelectionType.LINE_PREFIX, linePrefix: "> " },
+    tooltip: "Quote"
+  },
+  {
+    icon: markRaw(IconTable),
+    value: { type: WrapSelectionType.LINE_PREFIX, lineTransformAll: insertTable },
+    tooltip: "Insert table / Align table"
+  },
+  {
+    icon: markRaw(IconTableCollapsed),
+    value: { type: WrapSelectionType.LINE_PREFIX, lineTransformAll: (lines) => insertTable(lines, true) },
+    tooltip: "Collapse table"
+  },
+  {
+    icon: markRaw(IconHeading),
+    value: Array(6).fill(null).map((_, index) => ({
+      title: `H${index + 1}`,
+      value: { type: WrapSelectionType.LINE_PREFIX, linePrefix: `${"#".repeat(index + 1)} ` }
+    }))
+  }
+];
+
+export { indentRegex, linePrefixRegex, preserveIndentation, toolbarActionList };

package/dist/components/Input/types.d.ts

@@ -1,5 +1,6 @@
 import { DropdownMenuProps } from '../DropdownMenu/types';
 import { FieldWrapperProps } from '../FieldWrapper/types';
+import { WrapSelectionType } from '../../utils/utils';
 import { Component } from 'vue';
 export interface InputProps<Type extends InputType> extends Omit<FieldWrapperProps, 'modelValue'> {
     modelValue?: (Type extends 'number' ? number : string) | undefined;
@@ -30,6 +31,8 @@ export interface InputProps<Type extends InputType> extends Omit<FieldWrapperPro
     noWrap?: boolean;
     textTransparent?: boolean;
     textParts?: TextPart[];
+    rich?: boolean;
+    toolbarActions?: ToolbarAction[];
 }
 export interface InputAsyncProps<Type extends InputType> extends InputProps<Type> {
     validate?: ValidateFn | ValidateFn[];
@@ -58,8 +61,38 @@ export interface InputDateProps extends Omit<InputSuggestProps<'text'>, 'modelVa
     maxDate?: Date;
 }
 export type WrapSelection = {
-    start?: string;
-    end?: string;
+    type: WrapSelectionType.TOGGLE;
+    start: string;
+    end: string;
+    prepare?: (previousValue: string, offset: number) => string;
+} | {
+    type: WrapSelectionType.LINE_PREFIX;
+    linePrefix: string;
+    lineTransform?: never;
+    lineTransformAll?: never;
+    detectPattern?: never;
+} | {
+    type: WrapSelectionType.LINE_PREFIX;
+    linePrefix?: never;
+    lineTransform: (line: string, index: number, lines: string[]) => string;
+    lineTransformAll?: never;
+    detectPattern?: RegExp;
+} | {
+    type: WrapSelectionType.LINE_PREFIX;
+    linePrefix?: never;
+    lineTransform?: never;
+    lineTransformAll: (lines: string[]) => string;
+    detectPattern?: RegExp;
+};
+export type ToolbarAction = {
+    title?: string;
+    icon?: SVGComponent;
+    value: WrapSelection | {
+        title?: string;
+        icon?: SVGComponent;
+        value: WrapSelection;
+    }[];
+    tooltip?: string;
 };
 export type TextPart = {
     value: string;

package/dist/components/Input/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/types.ts"],"names":[],"mappings":"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"}

package/dist/components/List/components/HeaderSettings.vue.js

@@ -2,7 +2,7 @@ import { defineComponent, ref, createBlock, openBlock, unref, withCtx, createVNo
 import _sfc_main$5 from '../../Button/WButtonSelectionAction.vue.js';
 import _sfc_main$2 from '../../ClickOutside/WClickOutside.vue.js';
 import _sfc_main$1 from '../../DropdownMenu/WDropdownMenu.vue.js';
-import IconTableSettings from '../../../assets/icons/IconTableSettings.svg.js';
+import IconListSettings from '../../../assets/icons/IconListSettings.svg.js';
 import { HorizontalAlign } from '../../../utils/HorizontalAlign.js';
 import { isField } from '../models/utils.js';
 import _sfc_main$4 from './HeaderSettingsList.vue.js';
@@ -70,7 +70,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }, {
         toggle: withCtx(() => [
           createVNode(_sfc_main$5, {
-            icon: markRaw(unref(IconTableSettings)),
+            icon: markRaw(unref(IconListSettings)),
             disabled: _ctx.disabled,
             active: isOpen.value,
             onClick: _cache[0] || (_cache[0] = ($event) => isOpen.value = !isOpen.value)

package/dist/components/List/use/useListConfig.js

@@ -1,6 +1,6 @@
 import { markRaw, ref, unref, computed, isRef, watch } from 'vue';
 import IconGrid from '../../../assets/icons/IconGrid.svg.js';
-import IconTable from '../../../assets/icons/IconTable.svg.js';
+import IconList from '../../../assets/icons/IconList.svg.js';
 import { useIsMobile } from '../../../utils/mobile.js';
 import { ListMode } from '../../../utils/utils.js';
 
@@ -15,7 +15,7 @@ const parseListMode = (value) => {
   return isListMode(value) ? value : void 0;
 };
 const listModeIconMap = {
-  [ListMode.TABLE]: markRaw(IconTable),
+  [ListMode.TABLE]: markRaw(IconList),
   [ListMode.GRID]: markRaw(IconGrid)
 };
 const fieldConfigKeyLength = 4;

package/dist/components/MenuItem/WMenuItem.vue.js

@@ -13,7 +13,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   setup(__props) {
     return (_ctx, _cache) => {
       return openBlock(), createBlock(resolveDynamicComponent(_ctx.disabled ? "div" : _ctx.to ? unref(RouterLink) : _ctx.href ? "a" : "button"), mergeProps(_ctx.disabled ? void 0 : _ctx.to ? { to: _ctx.to } : _ctx.href ? { href: _ctx.href, download: _ctx.download } : void 0, {
-        class: ["text-description w-ripple-trigger block w-full min-w-36 select-none items-center justify-start px-2 text-start outline-none first:pt-2 last:pb-2", {
+        class: ["text-description w-ripple-trigger block w-full select-none items-center justify-start px-2 text-start outline-none first:pt-2 last:pb-2", {
           "hover:text-primary dark:hover:text-primary-dark cursor-pointer": !_ctx.disabled,
           "cursor-not-allowed opacity-50": _ctx.disabled
         }],

package/dist/components/Select/WSelect.vue.js

@@ -62,6 +62,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     noWrap: { type: Boolean },
     textTransparent: { type: Boolean },
     textParts: {},
+    rich: { type: Boolean },
+    toolbarActions: {},
     title: {},
     titleIcon: {},
     description: {},

package/dist/components/Select/WSelectAsync.vue.js

@@ -54,6 +54,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     noWrap: { type: Boolean },
     textTransparent: { type: Boolean },
     textParts: {},
+    rich: { type: Boolean },
+    toolbarActions: {},
     title: {},
     titleIcon: {},
     description: {},