vue-editify 0.2.13 → 0.2.15

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>

package/src/components/{toolbar/toolbar.less → updateLink/updateLink.less}

@@ -1,20 +1,9 @@
-.editify-toolbar {
-	display: flex;
-	justify-content: flex-start;
-	align-items: center;
-	padding: 6px 10px;
-
-	.editify-icon-rotate {
-		transform: rotate(180deg);
-	}
-}
-
-.editify-toolbar-link {
+.editify-link {
 	display: block;
 	width: 280px;
 	padding: 4px;
 
-	.editify-toolbar-link-label {
+	.editify-link-label {
 		display: block;
 		text-align: left;
 		margin-bottom: 10px;
@@ -46,14 +35,9 @@
 			font-size: inherit;
 			vertical-align: middle;
 		}
-
-		&[disabled] {
-			background-color: transparent;
-			opacity: 0.6;
-		}
 	}
 
-	.editify-toolbar-link-footer {
+	.editify-link-footer {
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
@@ -61,7 +45,7 @@
 		font-size: var(--editify-font-size);
 		color: var(--editify-font-color-light);
 
-		.editify-toolbar-link-operations {
+		.editify-link-operations {
 			display: flex;
 			justify-content: flex-start;
 			align-items: center;

package/src/components/updateLink/updateLink.vue

@@ -0,0 +1,74 @@
+<template>
+	<div class="editify-link">
+		<div class="editify-link-label">{{ $editTrans('linkAddress') }}</div>
+		<input @change="modifyLink" @focus="handleInputFocus" @blur="handleInputBlur" :placeholder="$editTrans('linkUrlEnterPlaceholder')" v-model.trim="url" type="url" />
+		<div class="editify-link-footer">
+			<Checkbox @change="modifyLink" v-model="newOpen" :label="$editTrans('newWindowOpen')" :color="color" :size="10"></Checkbox>
+			<div class="editify-link-operations">
+				<span @click="removeLink">{{ $editTrans('removeLink') }}</span>
+				<a :href="url" target="_blank" :style="{ color: color || '' }">{{ $editTrans('viewLink') }}</a>
+			</div>
+		</div>
+	</div>
+</template>
+<script setup lang="ts">
+import { inject, onBeforeUnmount, ref, watch } from 'vue'
+import { Checkbox } from '@/components/checkbox'
+import { UpdateLinkProps } from './props'
+
+defineOptions({
+	name: 'UpdateLink'
+})
+const props = defineProps(UpdateLinkProps)
+const emits = defineEmits(['remove', 'modify'])
+
+const $editTrans = inject<(key: string) => any>('$editTrans')!
+
+//链接地址
+const url = ref<string>('')
+//是否新窗口打开
+const newOpen = ref<boolean>(false)
+
+watch(
+	() => props.presetNewOpen,
+	newVal => {
+		newOpen.value = !!newVal
+	},
+	{
+		immediate: true
+	}
+)
+watch(
+	() => props.presetUrl,
+	newVal => {
+		url.value = newVal || ''
+	},
+	{
+		immediate: true
+	}
+)
+//输入框获取焦点
+const handleInputFocus = (e: Event) => {
+	if (props.color) {
+		;(e.currentTarget as HTMLInputElement).style.borderColor = props.color
+	}
+}
+//输入框失去焦点
+const handleInputBlur = (e: Event) => {
+	;(e.currentTarget as HTMLInputElement).style.borderColor = ''
+}
+//移除链接
+const removeLink = () => {
+	emits('remove')
+}
+//修改链接
+const modifyLink = () => {
+	emits('modify', url.value, newOpen.value)
+}
+
+//组件销毁前触发修改，解决组件销毁时change事件触发不了emits的问题
+onBeforeUnmount(() => {
+	emits('modify', url.value, newOpen.value)
+})
+</script>
+<style scoped src="./updateLink.less"></style>