@jetlinks-web/components 2.0.2 → 2.0.4-1

package/src/MonacoEditor/Monaco.vue

@@ -1,242 +0,0 @@
-<!-- 代码编辑器 -->
-<template>
-  <div ref="dom" class="j-monaco-editor"></div>
-</template>
-
-<script setup>
-import {
-  ref,
-  onMounted,
-  watch,
-  onUnmounted,
-  toRaw,
-  nextTick
-} from 'vue';
-import * as monaco from 'monaco-editor';
-import { omit } from 'lodash-es';
-
-const props = defineProps({
-  modelValue: [String, Number],
-  theme: {type: String, default: 'vs-dark'},
-  language: {type: String, default: 'json'},
-  codeTips: {type: Array, default: () => []},
-  init: {type: Function, default: undefined},
-  registrationTips: {type: Object, default: () => ({})},
-  registrationTypescript: {type: Object, default: () => ({})},
-  blurFormat: {type: Boolean, default: true},
-  readOnly: {type: Boolean, default: false},
-  options: {type: Object, default: () => ({})},
-});
-
-const emit = defineEmits([
-  'update:modelValue',
-  'blur',
-  'focus',
-  'change',
-  'errorChange',
-]);
-
-const dom = ref();
-
-const instance = ref();
-
-const monacoProviderRef = ref();
-const monacoTypescriptProviderRef = ref();
-
-// codeTipItem.dispose() // 销毁自定义提示
-
-const handleSuggestions = (suggestions, range) => {
-  return Array.isArray(suggestions)
-      ? suggestions.map((item) => ({...item, range}))
-      : [];
-};
-
-const disposeRegister = () => {
-  monacoProviderRef.value?.dispose();
-  monacoProviderRef.value = null;
-};
-/**
- * 代码提示注册
- */
-const registerCompletionItemProvider = () => {
-  disposeRegister();
-  if (monaco.languages && props.registrationTips?.suggestions) {
-    const {name, suggestions} = props.registrationTips;
-    monacoProviderRef.value =
-        monaco.languages.registerCompletionItemProvider(name || 'json', {
-          provideCompletionItems: function (model, position) {
-            const word = model.getWordUntilPosition(position); // 获取提示代码范围位置
-            const range = {
-              startLineNumber: position.lineNumber,
-              endLineNumber: position.lineNumber,
-              startColumn: word.startColumn,
-              endColumn: word.endColumn,
-            };
-
-            return {
-              suggestions: handleSuggestions(suggestions, range),
-            };
-          },
-        });
-  }
-};
-
-const disposeTypescript = () => {
-  monacoTypescriptProviderRef.value?.dispose();
-  monacoTypescriptProviderRef.value = null;
-};
-
-const registerTypescript = () => {
-  disposeTypescript();
-  if (monaco.languages && props.registrationTypescript?.typescript) {
-    const {name, typescript} = props.registrationTypescript;
-    monacoTypescriptProviderRef.value =
-        monaco.languages.typescript.javascriptDefaults.addExtraLib(
-            typescript,
-        );
-  }
-};
-
-/**
- * 代码格式化
- */
-const editorFormat = () => {
-  if (!instance.value) return;
-  toRaw(instance.value).getAction('editor.action.formatDocument')?.run();
-  if (props.hasOwnProperty('readOnly')) {
-    setTimeout(() => {
-      toRaw(instance.value).updateOptions({
-        readOnly: props.readOnly !== false,
-      });
-    }, 100);
-  }
-};
-
-monaco.editor.onDidChangeMarkers(([uri]) => {
-  const markers = monaco.editor.getModelMarkers({resource: uri});
-  emit('errorChange', markers);
-});
-
-onMounted(async () => {
-  const _model = monaco.editor.createModel(props.modelValue, props.language);
-
-  instance.value = monaco.editor.create(dom.value, {
-    model: _model,
-    tabSize: 2,
-    automaticLayout: true,
-    scrollBeyondLastLine: false,
-    theme: props.theme, // 主题色: vs(默认高亮), vs-dark(黑色), hc-black(高亮黑色)
-    formatOnPaste: true,
-    ...(omit(props.options, ['readOnly']) || {}),
-  });
-
-  instance.value.onDidChangeModelContent(() => {
-    //
-    const value = toRaw(instance.value).getValue();
-    nextTick(() => {
-      emit('update:modelValue', value);
-      emit('change', value);
-    });
-  });
-
-  instance.value.onDidBlurEditorText(() => {
-    emit('blur');
-    if (props.blurFormat) {
-      editorFormat();
-    }
-  });
-
-  instance.value.onDidFocusEditorText(() => {
-    emit('focus');
-  });
-
-  if (props.modelValue) {
-    setTimeout(() => {
-      editorFormat();
-    }, 200);
-  }
-
-  props.init?.(instance.value, monaco);
-});
-
-/**
- * 光标位置插入内容
- * @param {String} val
- * @param position
- */
-const insert = (val, position) => {
-  if (!instance.value) return;
-  const _position = position || toRaw(instance.value).getPosition();
-  const value = toRaw(instance.value).getValue();
-
-  if (position && position.lineNumber) {
-    toRaw(instance.value).setPosition(position);
-  }
-
-  toRaw(instance.value).executeEdits(value, [
-    {
-      range: new monaco.Range(
-          _position?.lineNumber,
-          _position?.column,
-          _position?.lineNumber,
-          _position?.column,
-      ),
-      text: val,
-    },
-  ]);
-};
-
-watch(
-    () => props.modelValue,
-    (val) => {
-      if (
-          !instance.value ||
-          (instance.value &&
-              props.modelValue === toRaw(instance.value).getValue())
-      )
-        return;
-      // setValue之前获取光标位置
-      const position = toRaw(instance.value).getPosition();
-
-      // setValue之后光标位置改变
-      toRaw(instance.value).setValue(val);
-      // 设置光标位置为setValue之前的位置
-      toRaw(instance.value).setPosition(position);
-
-      editorFormat();
-    },
-);
-
-watch(
-    () => JSON.stringify(props.registrationTips),
-    () => {
-      registerCompletionItemProvider();
-    },
-    {immediate: true},
-);
-
-watch(
-    () => JSON.stringify(props.registrationTypescript),
-    () => {
-      registerTypescript();
-    },
-    {immediate: true},
-);
-
-onUnmounted(() => {
-  disposeRegister();
-  disposeTypescript();
-  toRaw(instance.value).editor?.dispose?.();
-});
-
-defineExpose({
-  editorFormat,
-  insert,
-});
-</script>
-<style lang="less" scoped>
-.j-monaco-editor {
-  min-height: 50px;
-  height: 100%;
-}
-</style>

package/src/MonacoEditor/index.md

@@ -1,26 +0,0 @@
----
-category: Components
-type: 数据录入
-title: MonacoEditor
-subtitle: 代码编辑器
-cols: 1
-cover: https://gw.alipayobjects.com/zos/alicdn/xS9YEJhfe/Input.svg
----
-
-## API
-
-> 在 vite 项目中使用需要安装[`vite-plugin-monaco-editor`](https://github.com/vdesjs/vite-plugin-monaco-editor), 并在 vite.config.ts 中配置
-
-### MonacoEditor
-
-| 参数 | 说明                                                        | 类型 | 默认值 | 版本 |
-| --- |-----------------------------------------------------------| --- | --- | --- |
-| value(v-model) | 编辑器内容                                                     | string |  |  |
-| theme | 主题色: vs(默认高亮), vs-dark(黑色), hc-black(高亮黑色)                | string |  |  |
-| language | 编辑器支持的语言: json, css, html, typescript, javascript, vue    | string |  |  |
-| 参数           | 说明                                                        | 类型   | 默认值 | 版本 |
-| -------------- | --------------------------------------------------------- | ------ | ------ | ---- |
-| value(v-model) | 编辑器内容                                                     | string |        |      |
-| theme          | 主题色: vs(默认高亮), vs-dark(黑色), hc-black(高亮黑色)                | string |        |      |
-| language       | 编辑器支持的语言: json, css, html, typescript, javascript, vue    | string |        |      |
-

package/src/MonacoEditor/index.ts

@@ -1,2 +0,0 @@
-import Monaco from './Monaco.vue';
-export default Monaco;

package/src/PermissionButton/index.tsx

@@ -1,110 +0,0 @@
-import { h, defineComponent, computed } from "vue";
-import type { PropType, CSSProperties, ExtractPropTypes } from 'vue'
-import { Button, Tooltip, Popconfirm } from 'ant-design-vue'
-import { PopconfirmProps, TooltipProps } from "ant-design-vue/es";
-import { omit } from "lodash-es";
-import { buttonProps } from "ant-design-vue/es/button/button";
-import { usePermission } from '@jetlinks-web/hooks'
-
-type PermissionType = string | Array<string> | boolean
-
-const definedProps = {
-    tooltip: {
-        type: Object as PropType<TooltipProps>,
-    },
-    popConfirm: {
-        type: Object as PropType<PopconfirmProps>,
-    },
-    hasPermission: {
-        type: [String, Array, Boolean] as PropType<PermissionType>,
-        default: undefined
-    },
-    style: {
-        type: Object as PropType<CSSProperties>
-    },
-    noPermissionTitle: {
-        type: String
-    },
-    ...omit(buttonProps(), 'icon')
-}
-
-type DefinedPropsType = Partial<ExtractPropTypes<typeof definedProps>>
-
-const PermissionButton = defineComponent({
-    name: 'PermissionButton',
-    // @ts-ignore
-    slots: ['button', 'icon'],
-    props: definedProps,
-    setup(props, {slots}) {
-
-        const {popConfirm, tooltip} = props
-        const {hasPerm} = usePermission(props.hasPermission as PermissionType)
-
-        const permission = computed(() => {
-            if (!props.hasPermission || props.hasPermission === true) {
-                return true
-            }
-            return hasPerm.value
-        })
-
-        const isPermission = computed(() => {
-            if ('hasPermission' in props && permission.value) {
-                return 'disabled' in props ? props.disabled : false
-            }
-            return true
-        })
-
-        const hasPopConfirm = computed(() => !!popConfirm) // 是否包含确认弹窗
-        const hasTooltip = computed(() => !!tooltip) // 是否包含文字提示
-
-        return () => {
-            const {popConfirm, tooltip, hasPermission, noPermissionTitle, ...buttonProps} = props
-
-            const button = !slots.button ?
-                h(Button,
-                    {
-                        ...buttonProps,
-                        disabled: isPermission.value,
-                    },
-                    {
-                        default: () => slots?.default?.(),
-                        icon: () => slots?.icon?.()
-                    }) :
-                slots.button()
-
-            // 文字提示
-            const _tooltip = tooltip ? h(Tooltip, Object.assign(tooltip, {disabled: isPermission.value}), {default: () => button}) : undefined
-
-            // 无权限
-            const noPermissionButton = !permission.value ? h(Tooltip, {title: noPermissionTitle || '暂无权限，请联系管理员'}, {default: () => button}) : undefined
-
-            // 二次确认
-            const _popConfirm = popConfirm ?
-                h(Popconfirm,
-                    Object.assign(
-                        {overlayStyle: {width: '220px'}},
-                        popConfirm,
-                        {
-                            disabled: !permission.value || buttonProps.disabled
-                        }
-                    ),
-                    {default: () => tooltip ? _tooltip : button})
-                : undefined
-
-            if (permission.value) {
-                if (hasPopConfirm.value) {
-                    return _popConfirm
-                }
-
-                if (hasTooltip.value) {
-                    return _tooltip
-                }
-
-                return button
-            }
-            return noPermissionButton
-        }
-    }
-})
-
-export default PermissionButton