vue-editify 0.2.14 → 0.2.16

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "vue-editify",
-	"version": "0.2.14",
+	"version": "0.2.16",
 	"private": false,
 	"sideEffects": [
 		"*.css"
@@ -17,7 +17,7 @@
 		"lib": "vue-tsc && vite build"
 	},
 	"dependencies": {
-		"alex-editor": "^1.4.20",
+		"alex-editor": "^1.4.24",
 		"dap-util": "^1.5.8",
 		"highlight.js": "^11.8.0",
 		"katex": "^0.16.10",
@@ -29,11 +29,11 @@
 		"@vitejs/plugin-vue": "^5.0.4",
 		"less": "^3.0.4",
 		"terser": "^5.16.9",
-		"typescript": "^5.2.2",
+		"typescript": "^5.5.3",
 		"vite": "^5.2.8",
 		"vite-plugin-css-injected-by-js": "^3.5.1",
-		"vite-plugin-dts": "^3.7.3",
-		"vue-tsc": "^1.8.27"
+		"vite-plugin-dts": "^3.9.1",
+		"vue-tsc": "^2.0.26"
 	},
 	"browserslist": [
 		"> 1%",

package/src/components/button/button.vue

@@ -30,11 +30,11 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 import { common as DapCommon, color as DapColor } from 'dap-util'
-import Tooltip from '@/components/tooltip/tooltip.vue'
-import Layer from '@/components/layer/layer.vue'
-import Icon from '@/components/icon/icon.vue'
 import { ObjectType } from '@/core/tool'
-import { ButtonDisplayConfigType, ButtonOptionsItemType, ButtonProps, ButtonSelectConfigType } from './props'
+import { Tooltip } from '@/components/tooltip'
+import { Layer } from '@/components/layer'
+import { Icon } from '@/components/icon'
+import { ButtonOptionsItemType, ButtonParseDisplayConfigType, ButtonParseSelectConfigType, ButtonProps } from './props'
 
 defineOptions({
 	name: 'Button'
@@ -50,7 +50,7 @@ const btnRef = ref<HTMLElement | null>(null)
 const layerRef = ref<InstanceType<typeof Layer> | null>(null)
 
 //处理后的select配置
-const parseSelectConfig = computed<ButtonSelectConfigType>(() => {
+const parseSelectConfig = computed<ButtonParseSelectConfigType>(() => {
 	let options: ButtonOptionsItemType[] = []
 	let width: number | '' = ''
 	let maxHeight: number | '' = ''
@@ -59,15 +59,15 @@ const parseSelectConfig = computed<ButtonSelectConfigType>(() => {
 			options = props.selectConfig.options.map(item => {
 				if (DapCommon.isObject(item)) {
 					return {
-						label: (<ButtonOptionsItemType>item).label,
-						value: (<ButtonOptionsItemType>item).value,
-						icon: (<ButtonOptionsItemType>item).icon,
-						style: (<ButtonOptionsItemType>item).style
+						label: (item as ButtonOptionsItemType).label,
+						value: (item as ButtonOptionsItemType).value,
+						icon: (item as ButtonOptionsItemType).icon,
+						style: (item as ButtonOptionsItemType).style
 					}
 				}
 				return {
-					label: <string | number>item,
-					value: <string | number>item
+					label: item as string | number,
+					value: item as string | number
 				}
 			})
 		}
@@ -85,7 +85,7 @@ const parseSelectConfig = computed<ButtonSelectConfigType>(() => {
 	}
 })
 //处理后的display配置
-const parseDisplayConfig = computed<ButtonDisplayConfigType>(() => {
+const parseDisplayConfig = computed<ButtonParseDisplayConfigType>(() => {
 	let options: ButtonOptionsItemType[] = []
 	let width: number | '' = ''
 	let maxHeight: number | '' = ''
@@ -98,15 +98,15 @@ const parseDisplayConfig = computed<ButtonDisplayConfigType>(() => {
 			options = props.displayConfig.options.map(item => {
 				if (DapCommon.isObject(item)) {
 					return {
-						label: (<ButtonOptionsItemType>item).label,
-						value: (<ButtonOptionsItemType>item).value,
-						icon: (<ButtonOptionsItemType>item).icon,
-						style: (<ButtonOptionsItemType>item).style
+						label: (item as ButtonOptionsItemType).label,
+						value: (item as ButtonOptionsItemType).value,
+						icon: (item as ButtonOptionsItemType).icon,
+						style: (item as ButtonOptionsItemType).style
 					}
 				}
 				return {
-					label: <string | number>item,
-					value: <string | number>item
+					label: item as string | number,
+					value: item as string | number
 				}
 			})
 			let optItem = options.find(item => {
@@ -132,11 +132,11 @@ const parseDisplayConfig = computed<ButtonDisplayConfigType>(() => {
 })
 //渲染的浮层列表数据
 const cmpOptions = computed<ButtonOptionsItemType[]>(() => {
-	return props.type == 'select' ? <ButtonOptionsItemType[]>parseSelectConfig.value.options : <ButtonOptionsItemType[]>parseDisplayConfig.value.options
+	return props.type == 'select' ? parseSelectConfig.value.options! : parseDisplayConfig.value.options!
 })
 //显示在页面的value值对应的label
 const displayLabel = computed<string | number>(() => {
-	const val = (<ButtonOptionsItemType[]>parseDisplayConfig.value.options).find(item => {
+	const val = parseDisplayConfig.value.options!.find(item => {
 		return item.value == parseDisplayConfig.value.value
 	})
 	return val ? val.label! : ''
@@ -150,10 +150,7 @@ const parseColor = computed<number[]>(() => {
 })
 //按钮样式
 const btnStyle = computed<ObjectType>(() => {
-	if (props.disabled) {
-		return {}
-	}
-	if (props.color) {
+	if (!props.disabled && props.color) {
 		//激活情况下和鼠标按下状态
 		if (props.active || status.value == 'down') {
 			return {

package/src/components/button/index.ts

@@ -0,0 +1,5 @@
+import Button from './button.vue'
+
+export type * from './props'
+
+export { Button }

package/src/components/button/props.ts

@@ -16,6 +16,12 @@ export type ButtonSelectConfigType = {
 	maxHeight?: number | ''
 }
 
+export type ButtonParseSelectConfigType = {
+	options?: ButtonOptionsItemType[]
+	width?: number | ''
+	maxHeight?: number | ''
+}
+
 export type ButtonDisplayConfigType = {
 	options?: (ButtonOptionsItemType | number | string)[]
 	width?: number | ''
@@ -23,6 +29,13 @@ export type ButtonDisplayConfigType = {
 	value?: string | number
 }
 
+export type ButtonParseDisplayConfigType = {
+	options?: ButtonOptionsItemType[]
+	width?: number | ''
+	maxHeight?: number | ''
+	value?: string | number
+}
+
 export const ButtonProps = {
 	//按钮类型
 	type: {
@@ -62,7 +75,7 @@ export const ButtonProps = {
 	},
 	//主题色，用于按钮悬浮颜色变化使用,仅支持十六进制
 	color: {
-		type: String as PropType<string | null>,
+		type: String,
 		default: ''
 	},
 	//是否禁用

package/src/components/checkbox/checkbox.vue

@@ -12,7 +12,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { common as DapCommon } from 'dap-util'
-import Icon from '@/components/icon/icon.vue'
+import { Icon } from '@/components/icon'
 import { ObjectType } from '@/core/tool'
 import { CheckboxProps } from './props'
 

package/src/components/checkbox/index.ts

@@ -0,0 +1,5 @@
+import Checkbox from './checkbox.vue'
+
+export type * from './props'
+
+export { Checkbox }

package/src/components/checkbox/props.ts

@@ -38,7 +38,7 @@ export const CheckboxProps = {
 	},
 	//主题颜色
 	color: {
-		type: String as PropType<string | null>,
+		type: String,
 		default: '',
 		validator(value: any) {
 			return DapCommon.matchingText(value, 'hex')

package/src/components/colors/colors.vue

@@ -15,9 +15,9 @@
 </template>
 <script setup lang="ts">
 import { inject } from 'vue'
-import Icon from '@/components/icon/icon.vue'
-import Tooltip from '@/components/tooltip/tooltip.vue'
-import { ButtonOptionsItemType } from '@/components/button/props'
+import { Icon } from '@/components/icon'
+import { Tooltip } from '@/components/tooltip'
+import { ButtonOptionsItemType } from '@/components/button'
 import { ColorsProps } from './props'
 
 defineOptions({

package/src/components/colors/index.ts

@@ -0,0 +1,5 @@
+import Colors from './colors.vue'
+
+export type * from './props'
+
+export { Colors }

package/src/components/colors/props.ts

@@ -1,5 +1,5 @@
 import { ExtractPublicPropTypes, PropType } from 'vue'
-import { ButtonOptionsItemType } from '@/components/button/props'
+import { ButtonOptionsItemType } from '@/components/button'
 
 export const ColorsProps = {
 	//颜色数组
@@ -16,7 +16,7 @@ export const ColorsProps = {
 	},
 	//激活状态颜色
 	color: {
-		type: String as PropType<string | null>,
+		type: String,
 		default: ''
 	},
 	//是否使用工具提示

package/src/components/icon/index.ts

@@ -0,0 +1,5 @@
+import Icon from './icon.vue'
+
+export type * from './props'
+
+export { Icon }

package/src/components/insertAttachment/index.ts

@@ -0,0 +1,5 @@
+import InsertAttachment from './insertAttachment.vue'
+
+export type * from './props'
+
+export { InsertAttachment }

package/src/{plugins/attachment → components}/insertAttachment/insertAttachment.vue

@@ -24,16 +24,18 @@
 	</div>
 </template>
 <script setup lang="ts">
-import { file as DapFile } from 'dap-util'
 import { computed, inject, ref, watch } from 'vue'
+import { file as DapFile } from 'dap-util'
 import { ObjectType } from '@/core/tool'
-import Icon from '@/components/icon/icon.vue'
+import { Icon } from '@/components/icon'
 import { InsertAttachmentProps } from './props'
 
 defineOptions({
 	name: 'InsertAttachment'
 })
+//属性
 const props = defineProps(InsertAttachmentProps)
+//事件
 const emits = defineEmits(['change', 'insert'])
 
 const $editTrans = inject<(key: string) => any>('$editTrans')!

package/src/{plugins/attachment → components}/insertAttachment/props.ts

@@ -5,7 +5,7 @@ export type InsertAttachmentUploadErrorType = 'suffixError' | 'maxSizeError' | '
 export const InsertAttachmentProps = {
 	//主题色
 	color: {
-		type: String as PropType<string | null>,
+		type: String,
 		default: ''
 	},
 	//可选择的文件类型

package/src/components/insertImage/index.ts

@@ -0,0 +1,5 @@
+import InsertImage from './insertImage.vue'
+
+export type * from './props'
+
+export { InsertImage }

package/src/components/insertImage/insertImage.vue

@@ -20,10 +20,10 @@
 	</div>
 </template>
 <script setup lang="ts">
-import { file as DapFile } from 'dap-util'
 import { computed, inject, ref, watch } from 'vue'
-import Icon from '@/components/icon/icon.vue'
+import { file as DapFile } from 'dap-util'
 import { ObjectType } from '@/core/tool'
+import { Icon } from '@/components/icon'
 import { InsertImageProps } from './props'
 
 defineOptions({
@@ -61,12 +61,12 @@ const getSuffix = (file: File) => {
 //输入框获取焦点
 const handleInputFocus = (e: Event) => {
 	if (props.color) {
-		;(<HTMLInputElement>e.currentTarget).style.borderColor = props.color
+		;(e.currentTarget as HTMLInputElement).style.borderColor = props.color
 	}
 }
 //输入框失去焦点
 const handleInputBlur = (e: Event) => {
-	;(<HTMLInputElement>e.currentTarget).style.borderColor = ''
+	;(e.currentTarget as HTMLInputElement).style.borderColor = ''
 }
 //插入网络图片
 const insertRemoteImage = () => {
@@ -74,7 +74,7 @@ const insertRemoteImage = () => {
 }
 //选择文件
 const selectFile = async (e: Event) => {
-	const inputEle = <HTMLInputElement>e.currentTarget
+	const inputEle = e.currentTarget as HTMLInputElement
 	const files = inputEle.files
 	if (!files || !files.length) {
 		return

package/src/components/insertImage/props.ts

@@ -5,7 +5,7 @@ export type InsertImageUploadErrorType = 'suffixError' | 'maxSizeError' | 'minSi
 export const InsertImageProps = {
 	//主题色
 	color: {
-		type: String as PropType<string | null>,
+		type: String,
 		default: ''
 	},
 	//支持的图片类型数组

package/src/components/insertLink/index.ts

@@ -0,0 +1,5 @@
+import InsertLink from './insertLink.vue'
+
+export type * from './props'
+
+export { InsertLink }

package/src/components/insertLink/insertLink.vue

@@ -1,8 +1,8 @@
 <template>
 	<div class="editify-link">
 		<div class="editify-link-label">{{ $editTrans('linkAddress') }}</div>
-		<input @focus="handleInputFocus" @blur="handleInputBlur" :placeholder="$editTrans('linkTextEnterPlaceholder')" v-model.trim="linkText" type="text" />
-		<input @focus="handleInputFocus" @blur="handleInputBlur" :placeholder="$editTrans('linkUrlEnterPlaceholder')" v-model.trim="linkUrl" type="url" />
+		<input @focus="handleInputFocus" @blur="handleInputBlur" :placeholder="$editTrans('linkTextEnterPlaceholder')" v-model.trim="text" type="text" />
+		<input @focus="handleInputFocus" @blur="handleInputBlur" :placeholder="$editTrans('linkUrlEnterPlaceholder')" v-model.trim="url" type="url" />
 		<div class="editify-link-footer">
 			<Checkbox v-model="newOpen" :label="$editTrans('newWindowOpen')" :color="color" :size="10"></Checkbox>
 			<div class="editify-link-operations">
@@ -13,7 +13,7 @@
 </template>
 <script setup lang="ts">
 import { inject, ref, watch } from 'vue'
-import Checkbox from '@/components/checkbox/checkbox.vue'
+import { Checkbox } from '@/components/checkbox'
 import { InsertLinkProps } from './props'
 
 defineOptions({
@@ -25,16 +25,16 @@ const emits = defineEmits(['insert'])
 const $editTrans = inject<(key: string) => any>('$editTrans')!
 
 //链接地址
-const linkUrl = ref<string>('')
+const url = ref<string>('')
 //链接文本
-const linkText = ref<string>('')
+const text = ref<string>('')
 //是否新窗口打开
 const newOpen = ref<boolean>(false)
 
 watch(
-	() => props.text,
+	() => props.presetText,
 	newVal => {
-		linkText.value = newVal
+		text.value = newVal || ''
 	},
 	{
 		immediate: true
@@ -43,16 +43,16 @@ watch(
 //输入框获取焦点
 const handleInputFocus = (e: Event) => {
 	if (props.color) {
-		;(<HTMLInputElement>e.currentTarget).style.borderColor = props.color
+		;(e.currentTarget as HTMLInputElement).style.borderColor = props.color
 	}
 }
 //输入框失去焦点
 const handleInputBlur = (e: Event) => {
-	;(<HTMLInputElement>e.currentTarget).style.borderColor = ''
+	;(e.currentTarget as HTMLInputElement).style.borderColor = ''
 }
 //插入链接
 const insertLink = () => {
-	emits('insert', linkText.value, linkUrl.value, newOpen.value)
+	emits('insert', text.value, url.value, newOpen.value)
 }
 </script>
 <style scoped src="./insertLink.less"></style>

package/src/components/insertLink/props.ts

@@ -1,13 +1,13 @@
-import { ExtractPublicPropTypes, PropType } from 'vue'
+import { ExtractPublicPropTypes } from 'vue'
 
 export const InsertLinkProps = {
 	//主题色
 	color: {
-		type: String as PropType<string | null>,
+		type: String,
 		default: ''
 	},
 	//预置的链接文本值
-	text: {
+	presetText: {
 		type: String,
 		default: ''
 	}

package/src/components/insertMathformula/index.ts

@@ -0,0 +1,5 @@
+import InsertMathformula from './insertMathformula.vue'
+
+export type * from './props'
+
+export { InsertMathformula }

package/src/{plugins/mathformula → components}/insertMathformula/props.ts

@@ -1,9 +1,9 @@
-import { ExtractPublicPropTypes, PropType } from 'vue'
+import { ExtractPublicPropTypes } from 'vue'
 
 export const InsertMathformulaProps = {
 	//主题色
 	color: {
-		type: String as PropType<string | null>,
+		type: String,
 		default: ''
 	},
 	//预置的LaTex文本内容

package/src/components/insertTable/index.ts

@@ -0,0 +1,5 @@
+import InsertTable from './insertTable.vue'
+
+export type * from './props'
+
+export { InsertTable }

package/src/components/insertTable/props.ts

@@ -1,4 +1,4 @@
-import { ExtractPublicPropTypes, PropType } from 'vue'
+import { ExtractPublicPropTypes } from 'vue'
 
 export type InsertTableGridType = {
 	x: number
@@ -9,7 +9,7 @@ export type InsertTableGridType = {
 export const InsertTableProps = {
 	//主题色
 	color: {
-		type: String as PropType<string | null>,
+		type: String,
 		default: ''
 	},
 	//最大行数

package/src/components/insertVideo/index.ts

@@ -0,0 +1,5 @@
+import InsertVideo from './insertVideo.vue'
+
+export type * from './props'
+
+export { InsertVideo }

package/src/components/insertVideo/insertVideo.vue

@@ -20,10 +20,10 @@
 	</div>
 </template>
 <script setup lang="ts">
-import { file as DapFile } from 'dap-util'
 import { computed, inject, ref, watch } from 'vue'
+import { file as DapFile } from 'dap-util'
 import { ObjectType } from '@/core/tool'
-import Icon from '@/components/icon/icon.vue'
+import { Icon } from '@/components/icon'
 import { InsertVideoProps } from './props'
 
 defineOptions({

package/src/components/insertVideo/props.ts

@@ -5,7 +5,7 @@ export type InsertVideoUploadErrorType = 'suffixError' | 'maxSizeError' | 'minSi
 export const InsertVideoProps = {
 	//主题色
 	color: {
-		type: String as PropType<string | null>,
+		type: String,
 		default: ''
 	},
 	//支持的视频类型数组

package/src/components/layer/index.ts

@@ -0,0 +1,5 @@
+import Layer from './layer.vue'
+
+export type * from './props'
+
+export { Layer }

package/src/components/layer/layer.vue

@@ -1,6 +1,6 @@
 <template>
 	<Teleport to="body">
-		<Transition :name="animation ? 'editify-layer-' + animation : 'editify-layer'" @enter="handleEnter" @after-enter="el => emits('shown', el)" @after-leave="el => emits('hidden', el)">
+		<Transition :name="animation ? 'editify-layer-' + animation : 'editify-layer'" @enter="handleEnter" @after-enter="(el:Element) => emits('shown', el)" @after-leave="(el:Element) => emits('hidden', el)">
 			<div v-if="modelValue" class="editify-layer" :data-editify-placement="realPlacement || null" :style="{ zIndex: zIndex }" ref="elRef">
 				<Triangle v-if="showTriangle" :color="border && borderColor ? borderColor : background" :background="background" :placement="triPlacement" ref="triangleRef" />
 				<div ref="wrapRef" class="editify-layer-wrap" :class="{ 'editify-border': border }" :style="wrapStyle">
@@ -11,11 +11,10 @@
 	</Teleport>
 </template>
 <script setup lang="ts">
-import { computed, getCurrentInstance, nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
+import { computed, getCurrentInstance, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { element as DapElement, event as DapEvent } from 'dap-util'
-import Triangle from '@/components/triangle/triangle.vue'
-import { TrianglePlacementType } from '@/components/triangle/props'
 import { ObjectType } from '@/core/tool'
+import { Triangle, TrianglePlacementType } from '@/components/triangle'
 import { LayerPlacementType, LayerProps } from './props'
 
 defineOptions({
@@ -572,6 +571,30 @@ const handleResize = () => {
 		emits('update:modelValue', false)
 	}
 }
+//有元素滚动
+const handleScroll = () => {
+	const setScroll = (el: HTMLElement) => {
+		DapEvent.on(el, `scroll.editify_layer_${instance.uid}`, () => {
+			if (props.modelValue) {
+				emits('update:modelValue', false)
+			}
+		})
+		if (el.parentNode) {
+			setScroll(el.parentNode as HTMLElement)
+		}
+	}
+	setScroll(getNode()! || getScrollNode()!)
+}
+//移除上述滚动事件的监听
+const removeScrollHandle = () => {
+	const removeScroll = (el: HTMLElement) => {
+		DapEvent.off(el, `scroll.editify_layer_${instance.uid}`)
+		if (el.parentNode) {
+			removeScroll(el.parentNode as HTMLElement)
+		}
+	}
+	removeScroll(getNode()! || getScrollNode()!)
+}
 //点击定位元素和自身以外的元素关闭浮层
 const handleClick = (e: Event) => {
 	if (!DapElement.isElement(elRef.value)) {
@@ -595,6 +618,20 @@ const handleClick = (e: Event) => {
 	}
 }
 
+watch(
+	() => props.modelValue,
+	newVal => {
+		if (newVal) {
+			nextTick(() => {
+				handleScroll()
+			})
+		}
+	},
+	{
+		immediate: true
+	}
+)
+
 onMounted(() => {
 	if (props.modelValue) {
 		setPosition()
@@ -604,6 +641,7 @@ onMounted(() => {
 })
 
 onBeforeUnmount(() => {
+	removeScrollHandle()
 	DapEvent.off(window, `mousedown.editify_layer_${instance.uid} resize.editify_layer_${instance.uid}`)
 })
 

package/src/components/tooltip/index.ts

@@ -0,0 +1,5 @@
+import Tooltip from './tooltip.vue'
+
+export type * from './props'
+
+export { Tooltip }

package/src/components/tooltip/tooltip.vue

@@ -8,7 +8,7 @@
 </template>
 <script setup lang="ts">
 import { ComputedRef, inject, ref } from 'vue'
-import Layer from '@/components/layer/layer.vue'
+import { Layer } from '@/components/layer'
 import { TooltipProps } from './props'
 
 defineOptions({

package/src/components/triangle/index.ts

@@ -0,0 +1,5 @@
+import Triangle from './triangle.vue'
+
+export type * from './props'
+
+export { Triangle }

package/src/components/triangle/triangle.vue

@@ -6,8 +6,8 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import { TriangleProps } from './props'
 import { ObjectType } from '@/core/tool'
+import { TriangleProps } from './props'
 
 defineOptions({
 	name: 'Triangle'

package/src/components/updateLink/index.ts

@@ -0,0 +1,5 @@
+import UpdateLink from './updateLink.vue'
+
+export type * from './props'
+
+export { UpdateLink }

package/src/components/updateLink/props.ts

@@ -0,0 +1,21 @@
+import { ExtractPublicPropTypes } from 'vue'
+
+export const UpdateLinkProps = {
+	//主题色
+	color: {
+		type: String,
+		default: ''
+	},
+	//预置链接值
+	presetUrl: {
+		type: String,
+		default: ''
+	},
+	//预置是否新窗口打开
+	presetNewOpen: {
+		type: Boolean,
+		default: false
+	}
+}
+
+export type UpdateLinkPropsType = ExtractPublicPropTypes<typeof UpdateLinkProps>