@ldmjs/ui 1.0.0-dev-23 → 1.0.1

package/README.md

@@ -1,6 +1,12 @@
 # Dependencies
 
-??????????
+"vue": "3.4.21",
+"vue-class-component": "8.0.0-rc.1",
+"vue-property-decorator": "10.0.0-rc.3",
+"vuetify": "3.6.8",
+"vue-screen-utils": "1.0.0-beta.13",
+"lodash-es": "4.17.21",
+"md-editor-v3": "4.15.6",
 
 # Installation
 
@@ -20,15 +26,27 @@ import '@ldmjs/ui/dist/css/index.css';
 import '@ldmjs/ui/dist/css/root.css';
 import '@ldmjs/ui/dist/css/calendar.css';
 import '@ldmjs/ui/dist/scss';
+import 'vuetify/styles';
+import 'material-design-icons-iconfont/dist/material-design-icons.css';
+import 'md-editor-v3/lib/style.css';
 import ldmui from '@ldmjs/ui';
 ```
 
 ```js
 const appComponent = createApp(App);
-appComponent.use(ldmui);
+appComponent.use(ldmui); // or appComponent.use(ldmui, options);
 appComponent.mount('#app');
 ```
 
+tsconfig.json
+```json
+{
+  "compilerOptions": {
+    "include": ["node_modules/@ldmjs/ui/index.d.ts"]
+  }
+}
+```
+
 # Library
 
 ## #ld-icon

package/dist/css/index.css

@@ -32,3 +32,5 @@
 
 .ld-edit-masked-text[data-v-4fae342a]{min-width:100%;font-size:inherit !important;display:flex}.ld-edit-masked-text .column[data-v-4fae342a]{flex-flow:column}input[data-v-4fae342a]{border:1px solid var(--grey-l-5);border-radius:var(--border-radius);width:100%;flex:1 1 auto;padding:0 8px;font-size:var(--font-size);height:var(--input-height)}input[data-v-4fae342a]:focus,input[data-v-4fae342a]:active{outline:none;border:1px solid var(--grey-l-4)}.ld-edit-masked-text-validate[data-v-4fae342a]{overflow:hidden;height:20px}
 
+.ld-text-markup[data-v-d0f0d7f0]{display:flex;flex-direction:column;min-width:100%;max-width:100%;width:100%;min-height:180px;padding-bottom:18px}.ld-text-markup-validate[data-v-d0f0d7f0]{overflow:hidden;height:20px;flex-grow:0}.content-wrapper[data-v-d0f0d7f0]{display:flex;flex-direction:column;position:relative;background-color:var(--grey-l-6);border-radius:4px}.tabs-wrapper[data-v-d0f0d7f0]{position:relative;display:flex;width:50%;max-width:155px;margin-bottom:-1px;z-index:1;flex-shrink:0}.tabs-wrapper .v-btn[data-v-d0f0d7f0]{border:1px solid var(--grey-l-5);height:30px !important;opacity:0.6;border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}.tabs-wrapper .v-btn[data-v-d0f0d7f0]:before,.tabs-wrapper .v-btn[data-v-d0f0d7f0]:after{display:none}.tabs-wrapper .v-btn.active[data-v-d0f0d7f0]{background-color:var(--white);border:1px solid var(--grey-l-4);border-bottom:none;opacity:1}.content[data-v-d0f0d7f0]{position:relative;z-index:0;flex-basis:100%;font-size:var(--font-size);color:var(--text)}.content .md-editor[data-v-d0f0d7f0]{height:100%}.contentbox[data-v-d0f0d7f0]{border:1px solid var(--grey-l-4);background-color:var(--white);border-radius:0 4px 4px 4px;padding:10px}[data-v-d0f0d7f0] .contentbox ul{padding:0 12px;list-style:disc;margin-bottom:8px}[data-v-d0f0d7f0] .contentbox ol{list-style:decimal;padding:0 12px;margin-bottom:8px}[data-v-d0f0d7f0] .contentbox p{margin-bottom:8px}[data-v-d0f0d7f0] .contentbox pre{padding:4px}[data-v-d0f0d7f0] .contentbox code{background:none;color:var(--text);padding:0;font-size:100%}[data-v-d0f0d7f0] .md-editor{border:1px solid var(--grey-l-4)}
+

package/dist/index.js

@@ -1,13 +1,13 @@
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
-		module.exports = factory(require("./calendar.js"), require("./floating.js"), require("./imask.js"), require("./multiselect.js"), require("@vuelidate/validators"), require("imask"), require("vue"), require("vue-class-component"), require("vue-property-decorator"));
+		module.exports = factory(require("./calendar.js"), require("./floating.js"), require("./imask.js"), require("./multiselect.js"), require("./runtime-template.js"), require("@vuelidate/validators"), require("imask"), require("markdown-it"), require("md-editor-v3"), require("vue"), require("vue-class-component"), require("vue-property-decorator"));
 	else if(typeof define === 'function' && define.amd)
-		define(["./calendar.js", "./floating.js", "./imask.js", "./multiselect.js", "@vuelidate/validators", "imask", "vue", "vue-class-component", "vue-property-decorator"], factory);
+		define(["./calendar.js", "./floating.js", "./imask.js", "./multiselect.js", "./runtime-template.js", "@vuelidate/validators", "imask", "markdown-it", "md-editor-v3", "vue", "vue-class-component", "vue-property-decorator"], factory);
 	else if(typeof exports === 'object')
-		exports["ldmui"] = factory(require("./calendar.js"), require("./floating.js"), require("./imask.js"), require("./multiselect.js"), require("@vuelidate/validators"), require("imask"), require("vue"), require("vue-class-component"), require("vue-property-decorator"));
+		exports["ldmui"] = factory(require("./calendar.js"), require("./floating.js"), require("./imask.js"), require("./multiselect.js"), require("./runtime-template.js"), require("@vuelidate/validators"), require("imask"), require("markdown-it"), require("md-editor-v3"), require("vue"), require("vue-class-component"), require("vue-property-decorator"));
 	else
-		root["ldmui"] = factory(root["./calendar.js"], root["./floating.js"], root["./imask.js"], root["./multiselect.js"], root["@vuelidate/validators"], root["imask"], root["vue"], root["vue-class-component"], root["vue-property-decorator"]);
-})(self, (__WEBPACK_EXTERNAL_MODULE__4634__, __WEBPACK_EXTERNAL_MODULE__3654__, __WEBPACK_EXTERNAL_MODULE__6135__, __WEBPACK_EXTERNAL_MODULE__9225__, __WEBPACK_EXTERNAL_MODULE__887__, __WEBPACK_EXTERNAL_MODULE__5467__, __WEBPACK_EXTERNAL_MODULE__2380__, __WEBPACK_EXTERNAL_MODULE__9299__, __WEBPACK_EXTERNAL_MODULE__5070__) => {
+		root["ldmui"] = factory(root["./calendar.js"], root["./floating.js"], root["./imask.js"], root["./multiselect.js"], root["./runtime-template.js"], root["@vuelidate/validators"], root["imask"], root["markdown-it"], root["md-editor-v3"], root["vue"], root["vue-class-component"], root["vue-property-decorator"]);
+})(self, (__WEBPACK_EXTERNAL_MODULE__4634__, __WEBPACK_EXTERNAL_MODULE__3654__, __WEBPACK_EXTERNAL_MODULE__6135__, __WEBPACK_EXTERNAL_MODULE__9225__, __WEBPACK_EXTERNAL_MODULE__119__, __WEBPACK_EXTERNAL_MODULE__887__, __WEBPACK_EXTERNAL_MODULE__5467__, __WEBPACK_EXTERNAL_MODULE__8461__, __WEBPACK_EXTERNAL_MODULE__6443__, __WEBPACK_EXTERNAL_MODULE__2380__, __WEBPACK_EXTERNAL_MODULE__9299__, __WEBPACK_EXTERNAL_MODULE__5070__) => {
 return /******/ (() => { // webpackBootstrap
 /******/ 	"use strict";
 /******/ 	var __webpack_modules__ = ({
@@ -59,6 +59,13 @@ module.exports = __WEBPACK_EXTERNAL_MODULE__9225__;
 
 /***/ }),
 
+/***/ 119:
+/***/ ((module) => {
+
+module.exports = __WEBPACK_EXTERNAL_MODULE__119__;
+
+/***/ }),
+
 /***/ 887:
 /***/ ((module) => {
 
@@ -73,6 +80,20 @@ module.exports = __WEBPACK_EXTERNAL_MODULE__5467__;
 
 /***/ }),
 
+/***/ 8461:
+/***/ ((module) => {
+
+module.exports = __WEBPACK_EXTERNAL_MODULE__8461__;
+
+/***/ }),
+
+/***/ 6443:
+/***/ ((module) => {
+
+module.exports = __WEBPACK_EXTERNAL_MODULE__6443__;
+
+/***/ }),
+
 /***/ 2380:
 /***/ ((module) => {
 
@@ -133,6 +154,36 @@ module.exports = __WEBPACK_EXTERNAL_MODULE__5070__;
 /******/ 		};
 /******/ 	})();
 /******/ 	
+/******/ 	/* webpack/runtime/create fake namespace object */
+/******/ 	(() => {
+/******/ 		var getProto = Object.getPrototypeOf ? (obj) => (Object.getPrototypeOf(obj)) : (obj) => (obj.__proto__);
+/******/ 		var leafPrototypes;
+/******/ 		// create a fake namespace object
+/******/ 		// mode & 1: value is a module id, require it
+/******/ 		// mode & 2: merge all properties of value into the ns
+/******/ 		// mode & 4: return value when already ns object
+/******/ 		// mode & 16: return value when it's Promise-like
+/******/ 		// mode & 8|1: behave like require
+/******/ 		__webpack_require__.t = function(value, mode) {
+/******/ 			if(mode & 1) value = this(value);
+/******/ 			if(mode & 8) return value;
+/******/ 			if(typeof value === 'object' && value) {
+/******/ 				if((mode & 4) && value.__esModule) return value;
+/******/ 				if((mode & 16) && typeof value.then === 'function') return value;
+/******/ 			}
+/******/ 			var ns = Object.create(null);
+/******/ 			__webpack_require__.r(ns);
+/******/ 			var def = {};
+/******/ 			leafPrototypes = leafPrototypes || [null, getProto({}), getProto([]), getProto(getProto)];
+/******/ 			for(var current = mode & 2 && value; typeof current == 'object' && !~leafPrototypes.indexOf(current); current = getProto(current)) {
+/******/ 				Object.getOwnPropertyNames(current).forEach((key) => (def[key] = () => (value[key])));
+/******/ 			}
+/******/ 			def['default'] = () => (value);
+/******/ 			__webpack_require__.d(ns, def);
+/******/ 			return ns;
+/******/ 		};
+/******/ 	})();
+/******/ 	
 /******/ 	/* webpack/runtime/define property getters */
 /******/ 	(() => {
 /******/ 		// define getter functions for harmony exports
@@ -10245,6 +10296,433 @@ function ld_edit_masked_text_reg(vue, options) {
 }
 /* harmony default export */ const src_ld_edit_masked_text = (ld_edit_masked_text_reg);
 
+;// CONCATENATED MODULE: ./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/ld-text-markup/ld-text-markup.vue?vue&type=template&id=d0f0d7f0&scoped=true
+
+
+const ld_text_markupvue_type_template_id_d0f0d7f0_scoped_true_withScopeId = n => (_pushScopeId("data-v-d0f0d7f0"),n=n(),_popScopeId(),n)
+const ld_text_markupvue_type_template_id_d0f0d7f0_scoped_true_hoisted_1 = { class: "ld-text-markup" }
+const ld_text_markupvue_type_template_id_d0f0d7f0_scoped_true_hoisted_2 = { class: "tabs-wrapper" }
+const ld_text_markupvue_type_template_id_d0f0d7f0_scoped_true_hoisted_3 = {
+  key: "editor",
+  class: "content editorbox",
+  style: {"visibility":"hidden"},
+  id: "editorbox"
+}
+
+function ld_text_markupvue_type_template_id_d0f0d7f0_scoped_true_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_ld_label = (0,external_vue_.resolveComponent)("ld-label")
+  const _component_v_btn = (0,external_vue_.resolveComponent)("v-btn")
+  const _component_v_runtime_template = (0,external_vue_.resolveComponent)("v-runtime-template")
+  const _component_md_editor = (0,external_vue_.resolveComponent)("md-editor")
+  const _component_v_col = (0,external_vue_.resolveComponent)("v-col")
+  const _component_v_row = (0,external_vue_.resolveComponent)("v-row")
+
+  return ((0,external_vue_.openBlock)(), (0,external_vue_.createElementBlock)("div", ld_text_markupvue_type_template_id_d0f0d7f0_scoped_true_hoisted_1, [
+    (0,external_vue_.createVNode)(_component_v_row, { "no-gutters": "" }, {
+      default: (0,external_vue_.withCtx)(() => [
+        (_ctx.label)
+          ? ((0,external_vue_.openBlock)(), (0,external_vue_.createBlock)(_component_ld_label, {
+              key: 0,
+              class: (0,external_vue_.normalizeClass)([_ctx.labelSizeClasses]),
+              label: _ctx.label,
+              required: _ctx.required,
+              "align-label-to-right": _ctx.alignLabelToRight
+            }, null, 8, ["class", "label", "required", "align-label-to-right"]))
+          : (0,external_vue_.createCommentVNode)("", true),
+        (0,external_vue_.createTextVNode)(),
+        (0,external_vue_.createVNode)(_component_v_col, {
+          class: (0,external_vue_.normalizeClass)([_ctx.inputSizeClasses, "pa-1 content-wrapper"])
+        }, {
+          default: (0,external_vue_.withCtx)(() => [
+            (0,external_vue_.createElementVNode)("div", ld_text_markupvue_type_template_id_d0f0d7f0_scoped_true_hoisted_2, [
+              (0,external_vue_.createVNode)(_component_v_btn, {
+                class: (0,external_vue_.normalizeClass)(["small-button", { active: !_ctx.isPreviewActive }]),
+                variant: "outlined",
+                disabled: _ctx.readonly,
+                onClick: _ctx.toggleClick
+              }, {
+                default: (0,external_vue_.withCtx)(() => [
+                  (0,external_vue_.createElementVNode)("span", {
+                    class: (0,external_vue_.normalizeClass)({ 'text-color': !_ctx.isPreviewActive })
+                  }, "Текст", 2)
+                ]),
+                _: 1
+              }, 8, ["class", "disabled", "onClick"]),
+              (0,external_vue_.createTextVNode)(),
+              (0,external_vue_.createVNode)(_component_v_btn, {
+                class: (0,external_vue_.normalizeClass)(["small-button", { active: _ctx.isPreviewActive }]),
+                variant: "outlined",
+                onClick: _ctx.toggleClick
+              }, {
+                default: (0,external_vue_.withCtx)(() => [
+                  (0,external_vue_.createElementVNode)("span", {
+                    class: (0,external_vue_.normalizeClass)({ 'text-color': _ctx.isPreviewActive })
+                  }, "Превью", 2)
+                ]),
+                _: 1
+              }, 8, ["class", "onClick"])
+            ]),
+            (0,external_vue_.createTextVNode)(),
+            (_ctx.isPreviewActive)
+              ? ((0,external_vue_.openBlock)(), (0,external_vue_.createBlock)(_component_v_runtime_template, {
+                  key: 0,
+                  template: _ctx.template,
+                  id: "contentbox"
+                }, null, 8, ["template"]))
+              : (0,external_vue_.createCommentVNode)("", true),
+            (0,external_vue_.createTextVNode)(),
+            (0,external_vue_.withDirectives)((0,external_vue_.createElementVNode)("div", ld_text_markupvue_type_template_id_d0f0d7f0_scoped_true_hoisted_3, [
+              (0,external_vue_.createVNode)(_component_md_editor, {
+                modelValue: _ctx.value,
+                "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((_ctx.value) = $event)),
+                ref: "editor",
+                language: "ru_RU",
+                preview: false,
+                toolbars: _ctx.toolbars,
+                footers: [],
+                onOnChange: _ctx.onEditorTextChange
+              }, null, 8, ["modelValue", "toolbars", "onOnChange"])
+            ], 512), [
+              [external_vue_.vShow, !_ctx.isPreviewActive]
+            ])
+          ]),
+          _: 1
+        }, 8, ["class"])
+      ]),
+      _: 1
+    }),
+    (0,external_vue_.createTextVNode)(),
+    (!_ctx.hideDetails)
+      ? ((0,external_vue_.openBlock)(), (0,external_vue_.createBlock)(_component_v_row, {
+          key: 0,
+          "no-gutters": "",
+          class: "ld-text-markup-validate"
+        }, {
+          default: (0,external_vue_.withCtx)(() => [
+            (0,external_vue_.createVNode)(_component_v_col, {
+              class: (0,external_vue_.normalizeClass)([_ctx.labelSizeClasses])
+            }, null, 8, ["class"]),
+            (0,external_vue_.createTextVNode)(),
+            (0,external_vue_.createVNode)(_component_v_col, {
+              class: (0,external_vue_.normalizeClass)(_ctx.inputSizeClasses)
+            }, {
+              default: (0,external_vue_.withCtx)(() => [
+                (0,external_vue_.createVNode)(external_vue_.Transition, { name: "squash" }, {
+                  default: (0,external_vue_.withCtx)(() => [
+                    (_ctx.showError)
+                      ? (0,external_vue_.withDirectives)(((0,external_vue_.openBlock)(), (0,external_vue_.createElementBlock)("span", {
+                          key: 0,
+                          class: "error--text",
+                          style: {"font-size":"var(--font-size--1)"}
+                        }, (0,external_vue_.toDisplayString)(_ctx.validationMessage), 513)), [
+                          [external_vue_.vShow, _ctx.showError]
+                        ])
+                      : (0,external_vue_.createCommentVNode)("", true)
+                  ]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            }, 8, ["class"])
+          ]),
+          _: 1
+        }))
+      : (0,external_vue_.createCommentVNode)("", true)
+  ]))
+}
+;// CONCATENATED MODULE: ./src/ld-text-markup/ld-text-markup.vue?vue&type=template&id=d0f0d7f0&scoped=true
+
+;// CONCATENATED MODULE: ./src/ld-text-markup/translation.ts
+/* eslint-disable @typescript-eslint/naming-convention */
+const ru_RU = {
+    toolbarTips: {
+        bold: 'Полужирный',
+        underline: 'Подчеркнутый',
+        italic: 'Курсив',
+        strikeThrough: 'strikeThrough',
+        title: 'Заголовок',
+        sub: 'subscript',
+        sup: 'superscript',
+        quote: 'quote',
+        unorderedList: 'Список',
+        orderedList: 'Нумерованный список',
+        task: 'task list',
+        codeRow: 'Программый код',
+        code: 'block-level code',
+        link: 'Создать ссылку',
+        image: 'image',
+        table: 'Добавить таблицу',
+        mermaid: 'mermaid',
+        katex: 'formula',
+        revoke: 'revoke',
+        next: 'undo revoke',
+        save: 'save',
+        prettier: 'prettier',
+        pageFullscreen: 'fullscreen in page',
+        fullscreen: 'fullscreen',
+        preview: 'Превью',
+        htmlPreview: 'html preview',
+        catalog: 'catalog',
+        github: 'source code',
+    },
+    titleItem: {
+        h1: 'Заголовок 1 уровня',
+        h2: 'Заголовок 2 уровня',
+        h3: 'Заголовок 3 уровня',
+        h4: 'Заголовок 4 уровня',
+        h5: 'Заголовок 5 уровня',
+        h6: 'Заголовок 6 уровня',
+    },
+    imgTitleItem: {
+        link: 'Add Img Link',
+        upload: 'Upload Img',
+        clip2upload: 'Clip Upload',
+    },
+    linkModalTips: {
+        descLabel: 'Описание',
+        descLabelPlaceHolder: 'Текст для отображения',
+        urlLabel: 'Ссылка',
+        urlLabelPlaceHolder: 'Адрес ссылки',
+        buttonOK: 'Сохранить',
+    },
+    clipModalTips: {
+        title: 'Crop Image',
+        buttonUpload: 'Upload',
+    },
+    copyCode: {
+        text: 'Copy',
+        successTips: 'Copied!',
+        failTips: 'Copy failed!',
+    },
+    mermaid: {
+        flow: 'flow',
+        sequence: 'sequence',
+        gantt: 'gantt',
+        class: 'class',
+        state: 'state',
+        pie: 'pie',
+        relationship: 'relationship',
+        journey: 'journey',
+    },
+    katex: {
+        inline: 'inline',
+        block: 'block',
+    },
+    footer: {
+        markdownTotal: 'Всего слов',
+        scrollAuto: 'Автопрокрутка',
+    },
+};
+/* harmony default export */ const translation = (ru_RU);
+
+// EXTERNAL MODULE: external "./runtime-template.js"
+var external_runtime_template_js_ = __webpack_require__(119);
+var external_runtime_template_js_default = /*#__PURE__*/__webpack_require__.n(external_runtime_template_js_);
+// EXTERNAL MODULE: external "md-editor-v3"
+var external_md_editor_v3_ = __webpack_require__(6443);
+;// CONCATENATED MODULE: ./node_modules/ts-loader/index.js??clonedRuleSet-1.use!./src/ld-text-markup/ld-text-markup.ts?vue&type=script&lang=js&external
+var ld_text_markupvue_type_script_lang_js_external_decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var ld_text_markupvue_type_script_lang_js_external_metadata = (undefined && undefined.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+
+
+
+
+
+
+
+
+
+
+/**
+ * @displayName ld-text-markup
+ */
+let TextMarkupComponent = class TextMarkupComponent extends (0,external_vue_class_component_.mixins)(ValidatableMixin, GridMixin, InputMixin) {
+    constructor() {
+        super(...arguments);
+        /**
+         * html
+         */
+        this.template = '';
+        /**
+         * markdown
+         */
+        this.value = '';
+        this.isPreviewActive = false;
+        this.md = null;
+    }
+    emitInput() {
+        return this.value;
+    }
+    onValueChanged() {
+        if (!this.value && this.required) {
+            this.validate();
+        }
+        if (this.value) {
+            this.validationMessage = '';
+        }
+    }
+    created() {
+        (0,external_md_editor_v3_.config)({
+            editorConfig: {
+                languageUserDefined: {
+                    /* eslint-disable-next-line @typescript-eslint/naming-convention */
+                    ru_RU: translation,
+                },
+            },
+        });
+        if (this.form) {
+            this.form.register(this, null);
+        }
+    }
+    async mounted() {
+        const markdownIt = (await Promise.resolve(/* import() */).then(__webpack_require__.t.bind(__webpack_require__, 8461, 23))).default;
+        const md = new markdownIt();
+        this.md = md;
+        this.buildEditor();
+        if (this.form) {
+            this.form?.register(this, null);
+        }
+    }
+    unmounted() {
+        if (this.form) {
+            this.form.unregister(this, null);
+        }
+    }
+    onEditorTextChange(value) {
+        this.value = value;
+        this.emitInput();
+    }
+    async togglePreview() {
+        this.isPreviewActive = !this.isPreviewActive;
+        if (this.isPreviewActive) {
+            this.previewRender(this.value);
+            await this.$nextTick();
+        }
+    }
+    toggleClick() {
+        if (this.readonly || this.disabled) {
+            return;
+        }
+        this.togglePreview();
+    }
+    validate() {
+        let funcResult = null;
+        this.validationMessage = '';
+        this.validRules.forEach(func => {
+            funcResult = func(this.value);
+            if (funcResult !== true) {
+                this.validationMessage = funcResult;
+            }
+        });
+        return !this.validationMessage;
+    }
+    buildEditor() {
+        this.value = this.modelValue;
+        if (this.preview || this.readonly) {
+            this.togglePreview();
+        }
+        const editorWrapper = document.getElementById('editorbox');
+        if (editorWrapper) {
+            editorWrapper.style.visibility = 'visible';
+        }
+    }
+    previewRender(plainText) {
+        plainText = plainText.replace(/\n\n/g, '\n <br> \n');
+        try {
+            let html = this.md.render(plainText);
+            html = html.replace(/&lt;br&gt;/g, '<br>');
+            this.template = '<div class="content contentbox"><div>' + html + '</div></div>';
+        }
+        catch (e) {
+            /* eslint-disable no-console */
+            console.log(e);
+        }
+    }
+    get showError() {
+        return Boolean(this.validationMessage);
+    }
+    get toolbars() {
+        return [
+            'bold',
+            'underline',
+            'italic',
+            '-',
+            'title',
+            'unorderedList',
+            'orderedList',
+            '-',
+            'codeRow',
+            'code',
+            'link',
+        ];
+    }
+};
+ld_text_markupvue_type_script_lang_js_external_decorate([
+    (0,external_vue_property_decorator_.Prop)(),
+    ld_text_markupvue_type_script_lang_js_external_metadata("design:type", String)
+], TextMarkupComponent.prototype, "modelValue", void 0);
+ld_text_markupvue_type_script_lang_js_external_decorate([
+    (0,external_vue_property_decorator_.Prop)({ type: Boolean, default: false }),
+    ld_text_markupvue_type_script_lang_js_external_metadata("design:type", Boolean)
+], TextMarkupComponent.prototype, "persistentHint", void 0);
+ld_text_markupvue_type_script_lang_js_external_decorate([
+    (0,external_vue_property_decorator_.Prop)({ default: false }),
+    ld_text_markupvue_type_script_lang_js_external_metadata("design:type", Boolean)
+], TextMarkupComponent.prototype, "preview", void 0);
+ld_text_markupvue_type_script_lang_js_external_decorate([
+    (0,external_vue_property_decorator_.Inject)({ from: 'form', default: null }),
+    ld_text_markupvue_type_script_lang_js_external_metadata("design:type", Object)
+], TextMarkupComponent.prototype, "form", void 0);
+ld_text_markupvue_type_script_lang_js_external_decorate([
+    Emit('update:model-value'),
+    ld_text_markupvue_type_script_lang_js_external_metadata("design:type", Function),
+    ld_text_markupvue_type_script_lang_js_external_metadata("design:paramtypes", []),
+    ld_text_markupvue_type_script_lang_js_external_metadata("design:returntype", void 0)
+], TextMarkupComponent.prototype, "emitInput", null);
+ld_text_markupvue_type_script_lang_js_external_decorate([
+    (0,external_vue_property_decorator_.Watch)('value'),
+    ld_text_markupvue_type_script_lang_js_external_metadata("design:type", Function),
+    ld_text_markupvue_type_script_lang_js_external_metadata("design:paramtypes", []),
+    ld_text_markupvue_type_script_lang_js_external_metadata("design:returntype", void 0)
+], TextMarkupComponent.prototype, "onValueChanged", null);
+TextMarkupComponent = ld_text_markupvue_type_script_lang_js_external_decorate([
+    (0,external_vue_property_decorator_.Options)({
+        components: {
+            'ld-label': ld_label,
+            'v-runtime-template': (external_runtime_template_js_default()),
+            'md-editor': external_md_editor_v3_.MdEditor,
+        },
+    })
+], TextMarkupComponent);
+/* harmony default export */ const ld_text_markupvue_type_script_lang_js_external = (TextMarkupComponent);
+
+;// CONCATENATED MODULE: ./src/ld-text-markup/ld-text-markup.ts?vue&type=script&lang=js&external
+ 
+;// CONCATENATED MODULE: ./src/ld-text-markup/ld-text-markup.vue
+
+
+
+
+;
+
+
+const ld_text_markup_exports_ = /*#__PURE__*/(0,exportHelper/* default */.A)(ld_text_markupvue_type_script_lang_js_external, [['render',ld_text_markupvue_type_template_id_d0f0d7f0_scoped_true_render],['__scopeId',"data-v-d0f0d7f0"]])
+
+/* harmony default export */ const ld_text_markup = (ld_text_markup_exports_);
+;// CONCATENATED MODULE: ./src/ld-text-markup/index.ts
+
+function ld_text_markup_reg(vue, options) {
+    vue.component(options.aliases['ld-text-markup'], ld_text_markup);
+}
+/* harmony default export */ const src_ld_text_markup = (ld_text_markup_reg);
+
 ;// CONCATENATED MODULE: ./src/utils/delay.ts
 async function delay(timeout) {
     return new Promise(resolve => setTimeout(() => resolve(), timeout));
@@ -10670,6 +11148,7 @@ const ActiveDirectiveOptions = {
 
 
 
+
 
 
 const ldmuiPlugin = {
@@ -10700,6 +11179,7 @@ const ldmuiPlugin = {
             'ld-timepicker': options.aliases?.['ld-timepicker'] ?? 'ld-timepicker',
             'ld-text-viewer': options.aliases?.['ld-text-viewer'] ?? 'ld-text-viewer',
             'ld-edit-masked-text': options.aliases?.['ld-edit-masked-text'] ?? 'ld-edit-masked-text',
+            'ld-text-markup': options.aliases?.['ld-text-markup'] ?? 'ld-text-markup',
         };
         vue.config.globalProperties.$utils = {
             ...utils_namespaceObject,
@@ -10736,6 +11216,7 @@ const ldmuiPlugin = {
         src_ld_timepicker(vue, options);
         src_ld_text_viewer(vue, options);
         src_ld_edit_masked_text(vue, options);
+        src_ld_text_markup(vue, options);
     },
 };
 /* harmony default export */ const src = (ldmuiPlugin);

package/dist/runtime-template.js

@@ -0,0 +1 @@
+(function webpackUniversalModuleDefinition(e,t){"object"===typeof exports&&"object"===typeof module?module.exports=t(require("vue")):"function"===typeof define&&define.amd?define(["vue"],t):"object"===typeof exports?exports["ldmui"]=t(require("vue")):e["ldmui"]=t(e["vue"])})(self,(e=>(()=>{"use strict";var t={6262:(e,t)=>{t.A=(e,t)=>{const o=e.__vccOpts||e;for(const[e,n]of t)o[e]=n;return o}},2380:t=>{t.exports=e}},o={};function __webpack_require__(e){var n=o[e];if(void 0!==n)return n.exports;var r=o[e]={exports:{}};return t[e](r,r.exports,__webpack_require__),r.exports}(()=>{__webpack_require__.d=(e,t)=>{for(var o in t)__webpack_require__.o(t,o)&&!__webpack_require__.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})}})(),(()=>{__webpack_require__.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t)})(),(()=>{__webpack_require__.r=e=>{"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}})();var n={};return(()=>{__webpack_require__.r(n),__webpack_require__.d(n,{default:()=>i});var e=__webpack_require__(2380);function render(t,o,n,r,s,c){return t.componentName?((0,e.openBlock)(),(0,e.createBlock)((0,e.resolveDynamicComponent)(t.componentName),{key:0})):(0,e.createCommentVNode)("",!0)}const defineDescriptor=(e,t,o)=>{if(!t.hasOwnProperty(o)){const n=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(t,o,n)}},merge=e=>{const t={};return e.forEach((e=>{e&&Object.getOwnPropertyNames(e).forEach((o=>defineDescriptor(e,t,o)))})),t},buildFromProps=(e,t)=>{const o={};return t.forEach((t=>defineDescriptor(e,o,t))),o},{defineComponent:t}=__webpack_require__(2380),o={props:{template:String,parentComp:Object},data(){return{componentName:"",dynamic:null}},created(){const e="runtime-template-"+Math.floor(1e4*Math.random());if(this.template){if(this.dynamic&&this.$parent){const{$data:o,$props:n}=this.$parent;let r={$data:{},$props:{}};Object.keys(o||{}).forEach((e=>{void 0===this.$data[e]&&(r.$data[e]=o[e])})),Object.keys(n||{}).forEach((e=>r.$props[e]=n[e]));const s=merge([r.$data,r.$props,this.methodsFromProps]);return this.$options.components[e]=t(this.dynamic,{props:s}),void(this.componentName=e)}const o=this.parentComp||this.$parent;this.$options.methods||(this.$options.methods={}),this.$options.computed||(this.$options.computed={}),this.$options.components||(this.$options.components={});const{$data:n,$props:r,$options:s}=o,{components:c,computed:p,methods:i}=s;let a={$data:{},$props:{},$options:{},components:{},computed:{},methods:{}};Object.keys(n||{}).forEach((e=>{void 0===this.$data[e]&&(a.$data[e]=n[e])})),Object.keys(r||{}).forEach((e=>{void 0===this.$props[e]&&(a.$props[e]=r[e])})),Object.keys(i||{}).forEach((e=>{void 0===this.$options.methods[e]&&(a.methods[e]=i[e])})),Object.keys(p||{}).forEach((e=>{void 0===this.$options.computed[e]&&(a.computed[e]=p[e])})),Object.keys(c||{}).forEach((e=>{void 0===this.$options.components[e]&&(a.components[e]=c[e])}));const d=Object.keys(a.methods||{}),_=Object.keys(a.$data||{}),m=Object.keys(a.$props||{}),h=_.concat(m).concat(d);this.methodsFromProps=buildFromProps(o,d);const u=merge([a.$data,a.$props,this.methodsFromProps]),f={},b={};let $=this.template||"<div></div>";_.forEach((e=>{const t=new RegExp(`[^"{\\s=]?${e}["}\\s]*?(?=["}\\s])`,"g"),n=t.exec($);if(n===e){const n=`${e}_ld`;b[n]=a.$data[e],$=$.replace(t,n);const r=o._watchers.find((t=>t.expression===e));if(r){const e=r.cb;r.cb=function(t,r){const s=this.__renderFn__.componentInstance;s[n]=t,e.call(o,t,r)}.bind(this)}else{const t=function(e){const t=this.__renderFn__.componentInstance;t[n]=e}.bind(this);o.$watch(e,t)}f[n]=function(t,n){o[e]=t}}})),this.$options.components[e]=t({template:$,props:h,data:()=>b,computed:a.computed,components:a.components,watch:f},{props:u}),this.componentName=e}}},r={components:{},mixins:[o]};var s=__webpack_require__(6262);const c=(0,s.A)(r,[["render",render]]),p=c,i=p})(),n})()));

package/dist/types/options.d.ts

@@ -21,6 +21,7 @@ export interface ldmuiOptions {
     'ld-timepicker'?: string;
     'ld-text-viewer'?: string;
     'ld-edit-masked-text'?: string;
+    'ld-text-markup'?: string;
   },
   viewport?: {
     isMobile: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ldmjs/ui",
-  "version": "1.0.0-dev-23",
+  "version": "1.0.1",
   "description": "ldm ui",
   "main": "dist/index.js",
   "engines": {
@@ -68,6 +68,7 @@
     "jest-transform-stub": "2.0.0",
     "lodash-es": "4.17.21",
     "material-design-icons-iconfont": "^6.7.0",
+    "md-editor-v3": "4.15.6",
     "mini-css-extract-plugin": "2.8.0",
     "node-sass": "9.0.0",
     "postcss-loader": "7.3.3",
@@ -85,7 +86,8 @@
     "vue-imask": "6.6.1",
     "vue-loader": "17.3.1",
     "vue-property-decorator": "10.0.0-rc.3",
-    "vuetify": "3.5.9",
+    "vue-screen-utils": "1.0.0-beta.13",
+    "vuetify": "3.6.8",
     "webpack": "5.90.2",
     "webpack-cli": "5.1.4",
     "webpack-dev-server": "4.15.1",