vue-editify 0.1.19 → 0.1.20

package/src/components/insertImage/insertImage.vue

@@ -1,146 +1,146 @@
-<template>
-	<div class="editify-image">
-		<div class="editify-image-header">
-			<div @click="current = 'upload'" class="editify-image-header-item" :class="{ active: current == 'upload' }" :style="activeStyle('upload')">{{ $editTrans('uploadImage') }}</div>
-			<div @click="current = 'remote'" class="editify-image-header-item" :class="{ active: current == 'remote' }" :style="activeStyle('remote')">{{ $editTrans('remoteImage') }}</div>
-			<div class="editify-image-header-slider" :class="current" :style="{ backgroundColor: color || '' }"></div>
-		</div>
-		<!-- 网络图片 -->
-		<div class="editify-image-remote" v-if="current == 'remote'">
-			<input v-model.trim="remoteUrl" :placeholder="$editTrans('imageUrlPlaceholder')" @blur="handleInputBlur" @focus="handleInputFocus" />
-			<div class="editify-image-remote-footer" :style="{ color: color }">
-				<span @click="insertRemoteImage">{{ $editTrans('insert') }}</span>
-			</div>
-		</div>
-		<!-- 上传图片 -->
-		<div class="editify-image-upload" v-else>
-			<Icon value="upload"></Icon>
-			<input :multiple="multiple" accept="image/*" @change="selectFile" type="file" />
-		</div>
-	</div>
-</template>
-<script setup lang="ts">
-import { file as DapFile } from 'dap-util'
-import Icon from '../icon/icon.vue'
-import { InsertImageProps } from './props'
-import { ComponentInternalInstance, computed, inject, ref, watch } from 'vue'
-import { ObjectType } from '../../core/tool'
-
-defineOptions({
-	name: 'InsertImage'
-})
-const props = defineProps(InsertImageProps)
-const emits = defineEmits(['change', 'insert'])
-
-const $editTrans = inject<(key: string) => any>('$editTrans')!
-const editify = inject<ComponentInternalInstance>('editify')!
-
-//当前展示的面板，取值remote和upload
-const current = ref<'remote' | 'upload'>('upload')
-//远程图片链接
-const remoteUrl = ref<string>('')
-
-const activeStyle = computed<(name: 'remote' | 'upload') => ObjectType>(() => {
-	return (name: 'remote' | 'upload') => {
-		if (current.value == name) {
-			return {
-				color: props.color
-			}
-		}
-		return {}
-	}
-})
-
-//获取文件后缀
-const getSuffix = (file: File) => {
-	const index = file.name.lastIndexOf('.')
-	if (index <= 0) {
-		return ''
-	}
-	return file.name.substring(index + 1)
-}
-//输入框获取焦点
-const handleInputFocus = (e: Event) => {
-	if (props.color) {
-		;(<HTMLInputElement>e.currentTarget).style.borderColor = props.color
-	}
-}
-//输入框失去焦点
-const handleInputBlur = (e: Event) => {
-	;(<HTMLInputElement>e.currentTarget).style.borderColor = ''
-}
-//插入网络图片
-const insertRemoteImage = () => {
-	emits('insert', remoteUrl.value)
-}
-//选择文件
-const selectFile = async (e: Event) => {
-	const inputEle = <HTMLInputElement>e.currentTarget
-	const files = inputEle.files
-	if (!files || !files.length) {
-		return
-	}
-	let filterFiles = []
-	for (let i = 0; i < files.length; i++) {
-		const file = files[i]
-		const suffix = getSuffix(file)
-		const isMatch = props.accept.some(item => {
-			return item.toLocaleLowerCase() == suffix.toLocaleLowerCase()
-		})
-		//后缀不符合
-		if (!isMatch) {
-			//如果自定义了异常处理
-			if (typeof props.handleError == 'function') {
-				props.handleError.apply(editify.proxy!, ['suffixError', file])
-			}
-			continue
-		}
-		//超过最大值
-		if (props.maxSize && file.size / 1024 > props.maxSize) {
-			//如果自定义了异常处理
-			if (typeof props.handleError == 'function') {
-				props.handleError.apply(editify.proxy!, ['maxSizeError', file])
-			}
-			continue
-		}
-		//没达到最小值
-		if (props.minSize && file.size / 1024 < props.minSize) {
-			//如果自定义了异常处理
-			if (typeof props.handleError == 'function') {
-				props.handleError.apply(editify.proxy!, ['minSizeError', file])
-			}
-			continue
-		}
-		filterFiles.push(file)
-	}
-	//有文件可上传
-	if (filterFiles.length) {
-		let images = []
-		//自定义上传方法
-		if (typeof props.customUpload == 'function') {
-			images = (await props.customUpload.apply(editify.proxy!, [filterFiles])) || []
-		}
-		//默认上传方法
-		else {
-			for (let i = 0; i < filterFiles.length; i++) {
-				const url = await DapFile.dataFileToBase64(filterFiles[i])
-				images.push(url)
-			}
-		}
-		images.forEach(url => {
-			emits('insert', url)
-		})
-	}
-	//清空文件选择框
-	inputEle.value = ''
-}
-
-//监听current变更触发change事件
-watch(
-	() => current.value,
-	() => {
-		emits('change')
-	}
-)
-</script>
-<style scoped src="./insertImage.less"></style>
+<template>
+	<div class="editify-image">
+		<div class="editify-image-header">
+			<div @click="current = 'upload'" class="editify-image-header-item" :class="{ active: current == 'upload' }" :style="activeStyle('upload')">{{ $editTrans('uploadImage') }}</div>
+			<div @click="current = 'remote'" class="editify-image-header-item" :class="{ active: current == 'remote' }" :style="activeStyle('remote')">{{ $editTrans('remoteImage') }}</div>
+			<div class="editify-image-header-slider" :class="current" :style="{ backgroundColor: color || '' }"></div>
+		</div>
+		<!-- 网络图片 -->
+		<div class="editify-image-remote" v-if="current == 'remote'">
+			<input v-model.trim="remoteUrl" :placeholder="$editTrans('imageUrlPlaceholder')" @blur="handleInputBlur" @focus="handleInputFocus" />
+			<div class="editify-image-remote-footer" :style="{ color: color }">
+				<span @click="insertRemoteImage">{{ $editTrans('insert') }}</span>
+			</div>
+		</div>
+		<!-- 上传图片 -->
+		<div class="editify-image-upload" v-else>
+			<Icon value="upload"></Icon>
+			<input :multiple="multiple" accept="image/*" @change="selectFile" type="file" />
+		</div>
+	</div>
+</template>
+<script setup lang="ts">
+import { file as DapFile } from 'dap-util'
+import Icon from '../icon/icon.vue'
+import { InsertImageProps } from './props'
+import { ComponentInternalInstance, computed, inject, ref, watch } from 'vue'
+import { ObjectType } from '../../core/tool'
+
+defineOptions({
+	name: 'InsertImage'
+})
+const props = defineProps(InsertImageProps)
+const emits = defineEmits(['change', 'insert'])
+
+const $editTrans = inject<(key: string) => any>('$editTrans')!
+const editify = inject<ComponentInternalInstance>('editify')!
+
+//当前展示的面板，取值remote和upload
+const current = ref<'remote' | 'upload'>('upload')
+//远程图片链接
+const remoteUrl = ref<string>('')
+
+const activeStyle = computed<(name: 'remote' | 'upload') => ObjectType>(() => {
+	return (name: 'remote' | 'upload') => {
+		if (current.value == name) {
+			return {
+				color: props.color
+			}
+		}
+		return {}
+	}
+})
+
+//获取文件后缀
+const getSuffix = (file: File) => {
+	const index = file.name.lastIndexOf('.')
+	if (index <= 0) {
+		return ''
+	}
+	return file.name.substring(index + 1)
+}
+//输入框获取焦点
+const handleInputFocus = (e: Event) => {
+	if (props.color) {
+		;(<HTMLInputElement>e.currentTarget).style.borderColor = props.color
+	}
+}
+//输入框失去焦点
+const handleInputBlur = (e: Event) => {
+	;(<HTMLInputElement>e.currentTarget).style.borderColor = ''
+}
+//插入网络图片
+const insertRemoteImage = () => {
+	emits('insert', remoteUrl.value)
+}
+//选择文件
+const selectFile = async (e: Event) => {
+	const inputEle = <HTMLInputElement>e.currentTarget
+	const files = inputEle.files
+	if (!files || !files.length) {
+		return
+	}
+	let filterFiles = []
+	for (let i = 0; i < files.length; i++) {
+		const file = files[i]
+		const suffix = getSuffix(file)
+		const isMatch = props.accept.some(item => {
+			return item.toLocaleLowerCase() == suffix.toLocaleLowerCase()
+		})
+		//后缀不符合
+		if (!isMatch) {
+			//如果自定义了异常处理
+			if (typeof props.handleError == 'function') {
+				props.handleError.apply(editify.proxy!, ['suffixError', file])
+			}
+			continue
+		}
+		//超过最大值
+		if (props.maxSize && file.size / 1024 > props.maxSize) {
+			//如果自定义了异常处理
+			if (typeof props.handleError == 'function') {
+				props.handleError.apply(editify.proxy!, ['maxSizeError', file])
+			}
+			continue
+		}
+		//没达到最小值
+		if (props.minSize && file.size / 1024 < props.minSize) {
+			//如果自定义了异常处理
+			if (typeof props.handleError == 'function') {
+				props.handleError.apply(editify.proxy!, ['minSizeError', file])
+			}
+			continue
+		}
+		filterFiles.push(file)
+	}
+	//有文件可上传
+	if (filterFiles.length) {
+		let images = []
+		//自定义上传方法
+		if (typeof props.customUpload == 'function') {
+			images = (await props.customUpload.apply(editify.proxy!, [filterFiles])) || []
+		}
+		//默认上传方法
+		else {
+			for (let i = 0; i < filterFiles.length; i++) {
+				const url = await DapFile.dataFileToBase64(filterFiles[i])
+				images.push(url)
+			}
+		}
+		images.forEach(url => {
+			emits('insert', url)
+		})
+	}
+	//清空文件选择框
+	inputEle.value = ''
+}
+
+//监听current变更触发change事件
+watch(
+	() => current.value,
+	() => {
+		emits('change')
+	}
+)
+</script>
+<style scoped src="./insertImage.less"></style>

package/src/components/insertImage/props.ts

@@ -1,43 +1,43 @@
-import { ExtractPublicPropTypes, PropType } from 'vue'
-
-export type InsertImageUploadErrorType = 'suffixError' | 'maxSizeError' | 'minSizeError'
-
-export const InsertImageProps = {
-	//主题色
-	color: {
-		type: String,
-		default: ''
-	},
-	//支持的图片类型数组
-	accept: {
-		type: Array as PropType<string[]>,
-		default: null
-	},
-	//是否支持多选
-	multiple: {
-		type: Boolean,
-		default: false
-	},
-	//单个文件最大值
-	maxSize: {
-		type: Number,
-		default: null
-	},
-	//单个文件最小值
-	minSize: {
-		type: Number,
-		default: null
-	},
-	//是否自定义上传图片
-	customUpload: {
-		type: Function as PropType<(files: File[]) => string[] | Promise<string[]>>,
-		default: null
-	},
-	//处理上传图片异常
-	handleError: {
-		type: Function as PropType<(error: InsertImageUploadErrorType, file: File) => void>,
-		default: null
-	}
-}
-
-export type InsertImagePropsType = ExtractPublicPropTypes<typeof InsertImageProps>
+import { ExtractPublicPropTypes, PropType } from 'vue'
+
+export type InsertImageUploadErrorType = 'suffixError' | 'maxSizeError' | 'minSizeError'
+
+export const InsertImageProps = {
+	//主题色
+	color: {
+		type: String,
+		default: ''
+	},
+	//支持的图片类型数组
+	accept: {
+		type: Array as PropType<string[]>,
+		default: null
+	},
+	//是否支持多选
+	multiple: {
+		type: Boolean,
+		default: false
+	},
+	//单个文件最大值
+	maxSize: {
+		type: Number,
+		default: null
+	},
+	//单个文件最小值
+	minSize: {
+		type: Number,
+		default: null
+	},
+	//是否自定义上传图片
+	customUpload: {
+		type: Function as PropType<(files: File[]) => string[] | Promise<string[]>>,
+		default: null
+	},
+	//处理上传图片异常
+	handleError: {
+		type: Function as PropType<(error: InsertImageUploadErrorType, file: File) => void>,
+		default: null
+	}
+}
+
+export type InsertImagePropsType = ExtractPublicPropTypes<typeof InsertImageProps>

package/src/components/insertLink/insertLink.less

@@ -1,64 +1,64 @@
-.editify-link {
-	display: block;
-	width: 280px;
-	padding: 10px 14px;
-
-	.editify-link-label {
-		display: block;
-		text-align: left;
-		margin-bottom: 10px;
-		font-size: @font-size;
-		color: @font-color;
-	}
-
-	input {
-		appearance: none;
-		-webkit-appearance: none;
-		-moz-appearance: none;
-		display: block;
-		width: 100%;
-		margin: 0 0 10px 0;
-		padding: 4px 2px;
-		border: none;
-		font-size: @font-size;
-		color: @font-color;
-		border-bottom: 1px solid @border-color;
-		line-height: 1.5;
-		transition: border-color 500ms;
-		background-color: transparent;
-		outline: none;
-		box-sizing: border-box;
-
-		&::-webkit-input-placeholder,
-		&::placeholder {
-			color: @font-color-disabled;
-			font-family: inherit;
-			font-size: inherit;
-			vertical-align: middle;
-		}
-	}
-
-	.editify-link-footer {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		width: 100%;
-
-		.editify-link-operations {
-			display: flex;
-			justify-content: flex-start;
-			align-items: center;
-
-			& > span {
-				cursor: pointer;
-				opacity: 0.8;
-				transition: all 200ms;
-				font-size: @font-size;
-
-				&:hover {
-					opacity: 1;
-				}
-			}
-		}
-	}
-}
+.editify-link {
+	display: block;
+	width: 280px;
+	padding: 10px 14px;
+
+	.editify-link-label {
+		display: block;
+		text-align: left;
+		margin-bottom: 10px;
+		font-size: @font-size;
+		color: @font-color;
+	}
+
+	input {
+		appearance: none;
+		-webkit-appearance: none;
+		-moz-appearance: none;
+		display: block;
+		width: 100%;
+		margin: 0 0 10px 0;
+		padding: 4px 2px;
+		border: none;
+		font-size: @font-size;
+		color: @font-color;
+		border-bottom: 1px solid @border-color;
+		line-height: 1.5;
+		transition: border-color 500ms;
+		background-color: transparent;
+		outline: none;
+		box-sizing: border-box;
+
+		&::-webkit-input-placeholder,
+		&::placeholder {
+			color: @font-color-disabled;
+			font-family: inherit;
+			font-size: inherit;
+			vertical-align: middle;
+		}
+	}
+
+	.editify-link-footer {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		width: 100%;
+
+		.editify-link-operations {
+			display: flex;
+			justify-content: flex-start;
+			align-items: center;
+
+			& > span {
+				cursor: pointer;
+				opacity: 0.8;
+				transition: all 200ms;
+				font-size: @font-size;
+
+				&:hover {
+					opacity: 1;
+				}
+			}
+		}
+	}
+}

package/src/components/insertLink/insertLink.vue

@@ -1,58 +1,58 @@
-<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" />
-		<div class="editify-link-footer">
-			<Checkbox v-model="newOpen" :label="$editTrans('newWindowOpen')" :color="color" :size="10"></Checkbox>
-			<div class="editify-link-operations">
-				<span :style="{ color: color }" @click="insertLink">{{ $editTrans('insertLink') }}</span>
-			</div>
-		</div>
-	</div>
-</template>
-<script setup lang="ts">
-import { inject, ref, watch } from 'vue'
-import Checkbox from '../checkbox/checkbox.vue'
-import { InsertLinkProps } from './props'
-
-defineOptions({
-	name: 'InsertLink'
-})
-const props = defineProps(InsertLinkProps)
-const emits = defineEmits(['insert'])
-
-const $editTrans = inject<(key: string) => any>('$editTrans')!
-
-//链接地址
-const linkUrl = ref<string>('')
-//链接文本
-const linkText = ref<string>('')
-//是否新窗口打开
-const newOpen = ref<boolean>(false)
-
-watch(
-	() => props.text,
-	newVal => {
-		linkText.value = newVal
-	},
-	{
-		immediate: true
-	}
-)
-//输入框获取焦点
-const handleInputFocus = (e: Event) => {
-	if (props.color) {
-		;(<HTMLInputElement>e.currentTarget).style.borderColor = props.color
-	}
-}
-//输入框失去焦点
-const handleInputBlur = (e: Event) => {
-	;(<HTMLInputElement>e.currentTarget).style.borderColor = ''
-}
-//插入链接
-const insertLink = () => {
-	emits('insert', linkText.value, linkUrl.value, newOpen.value)
-}
-</script>
-<style scoped src="./insertLink.less"></style>
+<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" />
+		<div class="editify-link-footer">
+			<Checkbox v-model="newOpen" :label="$editTrans('newWindowOpen')" :color="color" :size="10"></Checkbox>
+			<div class="editify-link-operations">
+				<span :style="{ color: color }" @click="insertLink">{{ $editTrans('insertLink') }}</span>
+			</div>
+		</div>
+	</div>
+</template>
+<script setup lang="ts">
+import { inject, ref, watch } from 'vue'
+import Checkbox from '../checkbox/checkbox.vue'
+import { InsertLinkProps } from './props'
+
+defineOptions({
+	name: 'InsertLink'
+})
+const props = defineProps(InsertLinkProps)
+const emits = defineEmits(['insert'])
+
+const $editTrans = inject<(key: string) => any>('$editTrans')!
+
+//链接地址
+const linkUrl = ref<string>('')
+//链接文本
+const linkText = ref<string>('')
+//是否新窗口打开
+const newOpen = ref<boolean>(false)
+
+watch(
+	() => props.text,
+	newVal => {
+		linkText.value = newVal
+	},
+	{
+		immediate: true
+	}
+)
+//输入框获取焦点
+const handleInputFocus = (e: Event) => {
+	if (props.color) {
+		;(<HTMLInputElement>e.currentTarget).style.borderColor = props.color
+	}
+}
+//输入框失去焦点
+const handleInputBlur = (e: Event) => {
+	;(<HTMLInputElement>e.currentTarget).style.borderColor = ''
+}
+//插入链接
+const insertLink = () => {
+	emits('insert', linkText.value, linkUrl.value, newOpen.value)
+}
+</script>
+<style scoped src="./insertLink.less"></style>

package/src/components/insertLink/props.ts

@@ -1,16 +1,16 @@
-import { ExtractPublicPropTypes } from 'vue'
-
-export const InsertLinkProps = {
-	//主题色
-	color: {
-		type: String,
-		default: ''
-	},
-	//预置的链接文本值
-	text: {
-		type: String,
-		default: ''
-	}
-}
-
-export type InsertLinkPropsType = ExtractPublicPropTypes<typeof InsertLinkProps>
+import { ExtractPublicPropTypes } from 'vue'
+
+export const InsertLinkProps = {
+	//主题色
+	color: {
+		type: String,
+		default: ''
+	},
+	//预置的链接文本值
+	text: {
+		type: String,
+		default: ''
+	}
+}
+
+export type InsertLinkPropsType = ExtractPublicPropTypes<typeof InsertLinkProps>