@vunk/form 1.2.0 → 1.3.0

package/components/vditor/index.mjs

@@ -1,435 +1,70 @@
-import Vditor from 'vditor';
-import { inject, unref, ref, getCurrentScope, onScopeDispose, watch, defineComponent, nextTick, shallowRef, provide, onMounted, resolveComponent, openBlock, createElementBlock, Fragment, createElementVNode, createBlock, withCtx, normalizeClass, renderSlot, createCommentVNode } from 'vue';
+import { defineComponent, resolveComponent, openBlock, createBlock, normalizeProps, guardReactiveProps, withCtx, createVNode, mergeProps, toHandlers, renderSlot } from 'vue';
+import { _VkVditorCtx, VkVditor } from '@vunk/plus/components/vditor';
+import { _VkfFormItemCtx, VkfFormItem } from '@vunk/form/components/form-item';
+import { useComputedReadonly } from '@vunk/form/composables';
 import { _ as _export_sfc } from '../_plugin-vue_export-helper.mjs';
-import { VkAsyncTeleport } from '@vunk/core';
 
 const props = {
-  modelValue: {
-    type: String,
-    default: ""
-  },
-  defaultOptions: {
-    type: Object,
-    default: () => ({})
-  },
-  placeholder: {
-    type: String,
-    default: "\u95EE\u6211\u4EFB\u4F55\u95EE\u9898...(Crtl + Enter \u53D1\u9001)"
-  },
-  toolbar: {
-    type: Array,
-    default: () => [
-      "headings",
-      "bold",
-      "italic",
-      "strike",
-      "link",
-      "|",
-      "list",
-      "ordered-list",
-      "outdent",
-      "indent",
-      "|",
-      "line",
-      "code",
-      "inline-code",
-      "insert-before",
-      "insert-after",
-      "|",
-      "table",
-      "|",
-      "undo",
-      "redo",
-      "|",
-      "fullscreen",
-      "outline",
-      "export",
-      "|"
-    ]
-  },
-  fullscreen: {
+  ..._VkfFormItemCtx.props,
+  ..._VkVditorCtx.props,
+  readonly: {
     type: Boolean,
-    default: false
+    default: void 0
   }
 };
 const emits = {
-  load: (e) => e,
-  "update:modelValue": (e) => e,
-  ctrlEnter: (e) => e,
-  "update:fullscreen": (e) => e
+  ..._VkVditorCtx.emits
 };
 
-function mitt(n){return {all:n=n||new Map,on:function(t,e){var i=n.get(t);i?i.push(e):n.set(t,[e]);},off:function(t,e){var i=n.get(t);i&&(e?i.splice(i.indexOf(e)>>>0,1):n.set(t,[]));},emit:function(t,e){var i=n.get(t);i&&i.slice().map(function(n){n(e);}),(i=n.get("*"))&&i.slice().map(function(n){n(t,e);});}}}
-
-const useVditor = () => {
-  const core = inject("vkfVditorRef", null);
-  if (!core) {
-    throw new Error("useVditor must be used after VditorProvider");
-  }
-  return unref(core);
-};
-const useVditorMitter = () => {
-  const core = inject("vkfVditorMitter", null);
-  if (!core) {
-    throw new Error("useVditorMitter must be used after VditorProvider");
-  }
-  return core;
-};
-
-var _a;
-const isClient = typeof window !== "undefined";
-isClient && ((_a = window == null ? void 0 : window.navigator) == null ? void 0 : _a.userAgent) && /iP(ad|hone|od)/.test(window.navigator.userAgent);
-
-function createFilterWrapper(filter, fn) {
-  function wrapper(...args) {
-    filter(() => fn.apply(this, args), { fn, thisArg: this, args });
-  }
-  return wrapper;
-}
-const bypassFilter = (invoke) => {
-  return invoke();
-};
-function pausableFilter(extendFilter = bypassFilter) {
-  const isActive = ref(true);
-  function pause() {
-    isActive.value = false;
-  }
-  function resume() {
-    isActive.value = true;
-  }
-  const eventFilter = (...args) => {
-    if (isActive.value)
-      extendFilter(...args);
-  };
-  return { isActive, pause, resume, eventFilter };
-}
-
-function tryOnScopeDispose(fn) {
-  if (getCurrentScope()) {
-    onScopeDispose(fn);
-    return true;
-  }
-  return false;
-}
-
-var __getOwnPropSymbols$6$1 = Object.getOwnPropertySymbols;
-var __hasOwnProp$6$1 = Object.prototype.hasOwnProperty;
-var __propIsEnum$6$1 = Object.prototype.propertyIsEnumerable;
-var __objRest$5 = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp$6$1.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$6$1)
-    for (var prop of __getOwnPropSymbols$6$1(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$6$1.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-function watchWithFilter(source, cb, options = {}) {
-  const _a = options, {
-    eventFilter = bypassFilter
-  } = _a, watchOptions = __objRest$5(_a, [
-    "eventFilter"
-  ]);
-  return watch(source, createFilterWrapper(eventFilter, cb), watchOptions);
-}
-
-var __defProp$2 = Object.defineProperty;
-var __defProps$2 = Object.defineProperties;
-var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
-var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
-var __propIsEnum$2 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$2 = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$2.call(b, prop))
-      __defNormalProp$2(a, prop, b[prop]);
-  if (__getOwnPropSymbols$2)
-    for (var prop of __getOwnPropSymbols$2(b)) {
-      if (__propIsEnum$2.call(b, prop))
-        __defNormalProp$2(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
-var __objRest$1$1 = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp$2.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$2)
-    for (var prop of __getOwnPropSymbols$2(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$2.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-function watchPausable(source, cb, options = {}) {
-  const _a = options, {
-    eventFilter: filter
-  } = _a, watchOptions = __objRest$1$1(_a, [
-    "eventFilter"
-  ]);
-  const { eventFilter, pause, resume, isActive } = pausableFilter(filter);
-  const stop = watchWithFilter(source, cb, __spreadProps$2(__spreadValues$2({}, watchOptions), {
-    eventFilter
-  }));
-  return { stop, pause, resume, isActive };
-}
-
-function unrefElement(elRef) {
-  var _a;
-  const plain = unref(elRef);
-  return (_a = plain == null ? void 0 : plain.$el) != null ? _a : plain;
-}
-
-const defaultWindow = isClient ? window : void 0;
-
-const _global = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
-const globalKey = "__vueuse_ssr_handlers__";
-_global[globalKey] = _global[globalKey] || {};
-
-var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
-var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
-var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
-var __objRest$1 = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp$6.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$6)
-    for (var prop of __getOwnPropSymbols$6(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$6.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-function useMutationObserver(target, callback, options = {}) {
-  const _a = options, { window = defaultWindow } = _a, mutationOptions = __objRest$1(_a, ["window"]);
-  let observer;
-  const isSupported = window && "MutationObserver" in window;
-  const cleanup = () => {
-    if (observer) {
-      observer.disconnect();
-      observer = void 0;
-    }
-  };
-  const stopWatch = watch(() => unrefElement(target), (el) => {
-    cleanup();
-    if (isSupported && window && el) {
-      observer = new MutationObserver(callback);
-      observer.observe(el, mutationOptions);
-    }
-  }, { immediate: true });
-  const stop = () => {
-    cleanup();
-    stopWatch();
-  };
-  tryOnScopeDispose(stop);
-  return {
-    isSupported,
-    stop
-  };
-}
-
-var SwipeDirection;
-(function(SwipeDirection2) {
-  SwipeDirection2["UP"] = "UP";
-  SwipeDirection2["RIGHT"] = "RIGHT";
-  SwipeDirection2["DOWN"] = "DOWN";
-  SwipeDirection2["LEFT"] = "LEFT";
-  SwipeDirection2["NONE"] = "NONE";
-})(SwipeDirection || (SwipeDirection = {}));
-
-var _sfc_main$2 = defineComponent({
-  props: {
-    modelValue: {
-      type: String,
-      default: ""
-    }
-  },
-  emits: {
-    "update:modelValue": null
-  },
-  setup(props, { emit }) {
-    const vditor = useVditor();
-    const mitter = useVditorMitter();
-    if (props.modelValue) {
-      vditor.setValue(props.modelValue, true);
-    }
-    const { pause, resume } = watchPausable(() => props.modelValue, (value) => {
-      vditor.setValue(value, true);
-    });
-    mitter.on("input", (value) => {
-      pause();
-      emit("update:modelValue", value);
-      nextTick(resume);
-    });
-    return () => null;
-  }
-});
-
-var HandleValue = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__file", "/home/runner/work/private-vunk-form/private-vunk-form/packages/components/vditor/src/handle-value.vue"]]);
-
-var _sfc_main$1 = defineComponent({
-  props: {
-    fullscreen: {
-      type: Boolean,
-      default: false
-    }
-  },
-  emits: {
-    "update:fullscreen": null
-  },
-  setup(props, { emit }) {
-    const vditor = useVditor();
-    const el = vditor.vditor.element;
-    const domFullscreen = ref(false);
-    useMutationObserver(el, () => {
-      if (el.classList.contains("vditor--fullscreen")) {
-        domFullscreen.value = true;
-      } else {
-        domFullscreen.value = false;
-      }
-    }, {
-      attributes: true
-    });
-    watch(() => props.fullscreen, (value) => {
-      if (value !== domFullscreen.value) {
-        const ir = vditor.vditor.ir?.element;
-        if (!ir) return;
-        ir.dispatchEvent(new KeyboardEvent("keydown", {
-          key: "'",
-          ctrlKey: true
-        }));
-      }
-    }, { immediate: true });
-    watch(() => domFullscreen.value, (value) => {
-      emit("update:fullscreen", value);
-    });
-    return () => null;
-  }
-});
-
-var HandleFullscreen = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__file", "/home/runner/work/private-vunk-form/private-vunk-form/packages/components/vditor/src/handle-fullscreen.vue"]]);
-
 var _sfc_main = defineComponent({
   name: "VkfVditor",
   components: {
-    HandleValue,
-    HandleFullscreen,
-    VkAsyncTeleport
+    VkfFormItem,
+    VkVditor
   },
   props,
   emits,
   setup(props2, { emit }) {
-    const vditorNode = ref();
-    const ready = ref(false);
-    const mitter = mitt();
-    const vditorRef = shallowRef();
-    const isTextareaFocus = ref(false);
-    provide("vkfVditorMitter", mitter);
-    provide("vkfVditorRef", vditorRef);
-    onMounted(() => {
-      const vditor = new Vditor(vditorNode.value, {
-        ...props2.defaultOptions,
-        placeholder: props2.placeholder,
-        cache: {
-          enable: true,
-          id: "VkfVditorCache",
-          ...props2.defaultOptions.cache || {}
-        },
-        after() {
-          vditorRef.value = vditor;
-          ready.value = true;
-          emit("load", vditor);
-          props2.defaultOptions.after?.();
-        },
-        input(value) {
-          mitter.emit("input", value);
-          props2.defaultOptions.input?.(value);
-        },
-        ctrlEnter(value) {
-          emit("update:modelValue", value);
-          emit("ctrlEnter", value);
-        },
-        focus(v) {
-          isTextareaFocus.value = true;
-          props2.defaultOptions.focus?.(v);
-        },
-        blur(v) {
-          isTextareaFocus.value = false;
-          props2.defaultOptions.blur?.(v);
-        },
-        toolbar: props2.toolbar
-      });
-    });
+    const coreProps = _VkVditorCtx.createBindProps(props2);
+    const coreEmits = _VkVditorCtx.createOnEmits(emit);
+    const formItemBindProps = _VkfFormItemCtx.createBindProps(props2);
+    const readonly = useComputedReadonly(props2);
     return {
-      vditorNode,
-      isTextareaFocus,
-      ready
+      formItemBindProps,
+      coreProps,
+      coreEmits,
+      readonly
     };
   }
 });
 
-const _hoisted_1 = {
-  ref: "vditorNode",
-  class: "vkf-vditor"
-};
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_VkAsyncTeleport = resolveComponent("VkAsyncTeleport");
-  const _component_HandleValue = resolveComponent("HandleValue");
-  const _component_HandleFullscreen = resolveComponent("HandleFullscreen");
-  return openBlock(), createElementBlock(
-    Fragment,
-    null,
-    [
-      createElementVNode(
-        "div",
-        _hoisted_1,
-        null,
-        512
-        /* NEED_PATCH */
-      ),
-      _ctx.ready ? (openBlock(), createBlock(_component_VkAsyncTeleport, {
-        key: 0,
-        to: _ctx.vditorNode
-      }, {
-        default: withCtx(() => [
-          createElementVNode(
-            "div",
-            {
-              class: normalizeClass(["vkf-vditor-footer", {
-                "is-textarea-focus": _ctx.isTextareaFocus
-              }])
-            },
-            [
+  const _component_VkVditor = resolveComponent("VkVditor");
+  const _component_VkfFormItem = resolveComponent("VkfFormItem");
+  return openBlock(), createBlock(
+    _component_VkfFormItem,
+    normalizeProps(guardReactiveProps(_ctx.formItemBindProps)),
+    {
+      default: withCtx(() => [
+        createVNode(
+          _component_VkVditor,
+          mergeProps(_ctx.coreProps, toHandlers(_ctx.coreEmits)),
+          {
+            footer: withCtx(() => [
               renderSlot(_ctx.$slots, "footer")
-            ],
-            2
-            /* CLASS */
-          )
-        ]),
-        _: 3
-        /* FORWARDED */
-      }, 8, ["to"])) : createCommentVNode("v-if", true),
-      _ctx.ready ? (openBlock(), createBlock(_component_HandleValue, {
-        key: 1,
-        "model-value": _ctx.modelValue,
-        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.$emit("update:modelValue", $event))
-      }, null, 8, ["model-value"])) : createCommentVNode("v-if", true),
-      _ctx.ready ? (openBlock(), createBlock(_component_HandleFullscreen, {
-        key: 2,
-        fullscreen: _ctx.fullscreen,
-        "onUpdate:fullscreen": _cache[1] || (_cache[1] = ($event) => _ctx.$emit("update:fullscreen", $event))
-      }, null, 8, ["fullscreen"])) : createCommentVNode("v-if", true),
-      _ctx.ready ? renderSlot(_ctx.$slots, "default", { key: 3 }) : createCommentVNode("v-if", true)
-    ],
-    64
-    /* STABLE_FRAGMENT */
+            ]),
+            _: 3
+            /* FORWARDED */
+          },
+          16
+          /* FULL_PROPS */
+        )
+      ]),
+      _: 3
+      /* FORWARDED */
+    },
+    16
+    /* FULL_PROPS */
   );
 }
 var VkfVditor = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/home/runner/work/private-vunk-form/private-vunk-form/packages/components/vditor/src/index.vue"]]);

package/composables/useSourceManager.d.ts

@@ -3,7 +3,7 @@ import { MaybeRef } from '@vunk/core';
 import { Ref } from 'vue';
 export declare const useSourceManager: <T = FormItemRendererSource>(source: MaybeRef<T[]>, opts?: {
     slotsChildren?: string[];
-}) => readonly [Ref<T[]>, {
+}) => readonly [Ref<T[], T[]>, {
     readonly manager: import("vue").ComputedRef<{
         keyRecord: Record<string, ManagerInfo<T>>;
         propRecord: Record<string, ManagerInfo<T>>;

package/index.css

@@ -247,6 +247,10 @@
   cursor: var(--el-readonly-cursor);
 }
 
+.vkf-form-item .vk-monaco-editor{
+  margin-top: 0.5em;
+}
+
 .el-radio-group.is-readonly,
 .el-radio-group.is-readonly .el-radio-button{
   --el-readonly-cursor: auto;
@@ -439,16 +443,3 @@
   padding-left: var(--date-picker-title-padding);
   padding-right: var(--date-picker-title-padding);
 }
-
-.vkf-vditor ul li {
-  list-style: initial;
-}
-.vkf-vditor ol li {
-  list-style: decimal;
-}
-.vkf-vditor.vditor{
-  --textarea-background-color: var(--el-fill-color-extra-light);
-}
-.vkf-vditor-footer.is-textarea-focus{
-  background-color:  var(--textarea-background-color);
-}

package/package.json

@@ -1,14 +1,11 @@
 {
   "name": "@vunk/form",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "",
   "main": "index.esm.js",
   "scripts": {
     "build": "gulp -f gulpfile.ts"
   },
-  "dependencies": {
-    "@vunk/core": "npm:@vunk/core@alpha"
-  },
   "keywords": [],
   "author": "",
   "license": "ISC",
@@ -168,6 +165,11 @@
       "types": "./components/radio/index.d.ts",
       "require": "./components/radio/index.cjs"
     },
+    "./components/monaco-editor": {
+      "import": "./components/monaco-editor/index.mjs",
+      "types": "./components/monaco-editor/index.d.ts",
+      "require": "./components/monaco-editor/index.cjs"
+    },
     "./components/input-number": {
       "import": "./components/input-number/index.mjs",
       "types": "./components/input-number/index.d.ts",
@@ -261,9 +263,6 @@
     "./index.css": {
       "import": "./index.css"
     },
-    "./components/vditor/index.css": {
-      "import": "./components/vditor/index.css"
-    },
     "./components/var-datetime-picker/index.css": {
       "import": "./components/var-datetime-picker/index.css"
     },
@@ -288,6 +287,9 @@
     "./components/radio/index.css": {
       "import": "./components/radio/index.css"
     },
+    "./components/monaco-editor/index.css": {
+      "import": "./components/monaco-editor/index.css"
+    },
     "./components/input-number/index.css": {
       "import": "./components/input-number/index.css"
     },