vue-editify 0.1.10 → 0.1.12

package/src/components/insertVideo/insertVideo.less

@@ -0,0 +1,135 @@
+.editify-video {
+	display: block;
+	width: 280px;
+	padding: 10px 14px;
+
+	.editify-video-header {
+		display: flex;
+		justify-content: flex-start;
+		align-items: center;
+		width: 100%;
+		margin-bottom: 20px;
+		position: relative;
+		padding-bottom: 6px;
+
+		.editify-video-header-slider {
+			position: absolute;
+			width: 50px;
+			height: 2px;
+			border-radius: 2px;
+			left: 0;
+			bottom: 0;
+			transition: left 200ms;
+
+			&.upload {
+				left: 5px;
+			}
+
+			&.remote {
+				left: 85px;
+			}
+		}
+
+		.editify-video-header-item {
+			display: block;
+			text-align: center;
+			font-size: @font-size;
+			color: @font-color;
+			opacity: 0.8;
+			transition: all 200ms;
+			width: 60px;
+			overflow: hidden;
+			white-space: nowrap;
+			text-overflow: ellipsis;
+
+			&:hover {
+				opacity: 1;
+				cursor: pointer;
+			}
+
+			&:first-child {
+				margin-right: 20px;
+			}
+
+			&.active {
+				opacity: 1;
+				color: @font-color-dark;
+			}
+		}
+	}
+
+	.editify-video-remote {
+		display: block;
+		width: 100%;
+
+		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-video-remote-footer {
+			display: flex;
+			justify-content: flex-end;
+			align-items: center;
+			width: 100%;
+			font-size: @font-size;
+			opacity: 0.8;
+			transition: all 200ms;
+
+			&:hover {
+				cursor: pointer;
+				opacity: 1;
+			}
+		}
+	}
+
+	.editify-video-upload {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		width: 100%;
+		padding: 15px 0;
+		font-size: 36px;
+		opacity: 0.8;
+		transition: all 200ms;
+		position: relative;
+
+		&:hover {
+			cursor: pointer;
+			opacity: 1;
+		}
+
+		input {
+			opacity: 0;
+			position: absolute;
+			left: 0;
+			top: 0;
+			width: 100%;
+			height: 100%;
+			z-index: 1;
+			cursor: pointer;
+		}
+	}
+}

package/src/components/insertVideo/insertVideo.vue

@@ -0,0 +1,146 @@
+<template>
+	<div class="editify-video">
+		<div class="editify-video-header">
+			<div @click="current = 'upload'" class="editify-video-header-item" :class="{ active: current == 'upload' }" :style="activeStyle('upload')">{{ $editTrans('uploadVideo') }}</div>
+			<div @click="current = 'remote'" class="editify-video-header-item" :class="{ active: current == 'remote' }" :style="activeStyle('remote')">{{ $editTrans('remoteVideo') }}</div>
+			<div class="editify-video-header-slider" :class="current" :style="{ backgroundColor: color || '' }"></div>
+		</div>
+		<!-- 网络视频 -->
+		<div class="editify-video-remote" v-if="current == 'remote'">
+			<input v-model.trim="remoteUrl" :placeholder="$editTrans('videoUrlPlaceholder')" @blur="handleInputBlur" @focus="handleInputFocus" />
+			<div class="editify-video-remote-footer" :style="{ color: color }">
+				<span @click="insertRemoteVideo">{{ $editTrans('insert') }}</span>
+			</div>
+		</div>
+		<!-- 上传视频 -->
+		<div class="editify-video-upload" v-else>
+			<Icon value="upload"></Icon>
+			<input :multiple="multiple" accept="video/*" @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 { InsertVideoProps } from './props'
+import { ComponentInternalInstance, computed, inject, ref, watch } from 'vue'
+import { ObjectType } from '../../core/tool'
+
+defineOptions({
+	name: 'InsertVideo'
+})
+const props = defineProps(InsertVideoProps)
+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 insertRemoteVideo = () => {
+	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 videos = []
+		//自定义上传方法
+		if (typeof props.customUpload == 'function') {
+			videos = (await props.customUpload.apply(editify.proxy!, [filterFiles])) || []
+		}
+		//默认上传方法
+		else {
+			for (let i = 0; i < filterFiles.length; i++) {
+				const url = await DapFile.dataFileToBase64(filterFiles[i])
+				videos.push(url)
+			}
+		}
+		videos.forEach(url => {
+			emits('insert', url)
+		})
+	}
+	//清空文件选择框
+	inputEle.value = ''
+}
+
+//监听current变更触发change事件
+watch(
+	() => current.value,
+	() => {
+		emits('change')
+	}
+)
+</script>
+<style scoped src="./insertVideo.less"></style>

package/src/components/insertVideo/props.ts

@@ -0,0 +1,43 @@
+import { ExtractPublicPropTypes, PropType } from 'vue'
+
+export type InsertVideoUploadErrorType = 'suffixError' | 'maxSizeError' | 'minSizeError'
+
+export const InsertVideoProps = {
+	//主题色
+	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: InsertVideoUploadErrorType, file: File) => void>,
+		default: null
+	}
+}
+
+export type InsertVideoPropsType = ExtractPublicPropTypes<typeof InsertVideoProps>

package/src/components/layer/layer.less

@@ -0,0 +1,49 @@
+.editify-layer-fade-enter-from,
+.editify-layer-fade-leave-to {
+	opacity: 0;
+}
+.editify-layer-fade-enter-active,
+.editify-layer-fade-leave-active {
+	transition: opacity 200ms linear;
+}
+
+.editify-layer-translate-enter-from,
+.editify-layer-translate-leave-to {
+	opacity: 0;
+	transform: translateY(20px);
+}
+
+.editify-layer-translate-enter-active,
+.editify-layer-translate-leave-active {
+	transition: opacity 200ms ease-in-out, transform 200ms ease-in-out;
+}
+
+.editify-layer {
+	display: block;
+	position: absolute;
+	padding: 0 0 10px 0;
+	font-size: @font-size;
+	color: @font-color;
+
+	&[data-editify-placement='bottom'],
+	&[data-editify-placement='bottom-start'],
+	&[data-editify-placement='bottom-end'] {
+		padding: 10px 0 0 0;
+	}
+
+	:deep(.editify-triangle) {
+		position: absolute;
+		z-index: 1;
+	}
+
+	.editify-layer-wrap {
+		display: block;
+		background-color: @background;
+		box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
+		border-radius: 4px;
+
+		&.border {
+			border: 1px solid @border-color;
+		}
+	}
+}