vue-editify 0.1.9 → 0.1.12

package/src/components/base/Tooltip.vue

@@ -1,82 +0,0 @@
-<template>
-	<div class="editify-tooltip" :class="{ block: block }">
-		<div ref="target" class="editify-tooltip-target" @mouseenter="showContent" @mouseleave="hideContent">
-			<slot></slot>
-		</div>
-		<Layer v-model="show" :node="node" border border-color="#000" background="#000" show-triangle color="#fff" placement="bottom" animation="fade">
-			<div class="editify-tooltip-content">{{ content }}</div>
-		</Layer>
-	</div>
-</template>
-<script>
-import Layer from './Layer'
-export default {
-	name: 'Tooltip',
-	props: {
-		//提示内容
-		content: {
-			type: String,
-			default: ''
-		},
-		//是否禁用
-		disabled: {
-			type: Boolean,
-			default: false
-		},
-		//是否块级
-		block: {
-			type: Boolean,
-			default: false
-		}
-	},
-	data() {
-		return {
-			show: false,
-			node: null
-		}
-	},
-	components: {
-		Layer
-	},
-	methods: {
-		showContent() {
-			if (this.disabled) {
-				return
-			}
-			this.node = this.$refs.target
-			this.show = true
-		},
-		hideContent() {
-			if (this.disabled) {
-				return
-			}
-			this.show = false
-		}
-	}
-}
-</script>
-<style lang="less" scoped>
-.editify-tooltip {
-	position: relative;
-	display: inline-block;
-
-	.editify-tooltip-target {
-		display: inline-block;
-	}
-
-	.editify-tooltip-content {
-		display: block;
-		padding: 6px 10px;
-		font-size: @font-size;
-		white-space: nowrap;
-	}
-
-	&.block {
-		display: block;
-
-		.editify-tooltip-target {
-			display: block;
-		}
-	}
-}
-</style>

package/src/components/base/Triangle.vue

@@ -1,159 +0,0 @@
-<template>
-	<div class="editify-triangle" :style="style" :data-editify-placement="placement">
-		<div class="editify-triangle-el" :style="elStyle"></div>
-	</div>
-</template>
-
-<script>
-export default {
-	name: 'Triangle',
-	props: {
-		//位置
-		placement: {
-			type: String,
-			default: 'top',
-			validator(value) {
-				return ['top', 'left', 'right', 'bottom'].includes(value)
-			}
-		},
-		//边框颜色
-		color: {
-			type: String,
-			default: null
-		},
-		//背景色
-		background: {
-			type: String,
-			default: null
-		}
-	},
-	computed: {
-		style() {
-			if (this.placement == 'top') {
-				return {
-					borderBottomColor: this.color ? this.color : ''
-				}
-			}
-			if (this.placement == 'bottom') {
-				return {
-					borderTopColor: this.color ? this.color : ''
-				}
-			}
-			if (this.placement == 'left') {
-				return {
-					borderRightColor: this.color ? this.color : ''
-				}
-			}
-			if (this.placement == 'right') {
-				return {
-					borderLeftColor: this.color ? this.color : ''
-				}
-			}
-		},
-		elStyle() {
-			if (this.placement == 'top') {
-				return {
-					borderBottomColor: this.background ? this.background : ''
-				}
-			}
-			if (this.placement == 'bottom') {
-				return {
-					borderTopColor: this.background ? this.background : ''
-				}
-			}
-			if (this.placement == 'left') {
-				return {
-					borderRightColor: this.background ? this.background : ''
-				}
-			}
-			if (this.placement == 'right') {
-				return {
-					borderLeftColor: this.background ? this.background : ''
-				}
-			}
-		}
-	}
-}
-</script>
-
-<style lang="less" scoped>
-.editify-triangle {
-	position: relative;
-	display: inline-block;
-	width: 0;
-	height: 0;
-	border-color: transparent;
-	border-style: solid;
-	border-width: @triangle-size;
-
-	.editify-triangle-el {
-		position: absolute;
-		display: inline-block;
-		width: 0;
-		height: 0;
-		border-color: transparent;
-		border-style: solid;
-		border-width: calc(@triangle-size - 1px);
-	}
-
-	&[data-editify-placement='top'] {
-		border-top: none;
-		border-bottom-color: @border-color;
-
-		.editify-triangle-el {
-			border-top: none;
-			border-bottom-color: @background;
-			left: 1px;
-			top: 1.5px;
-			right: auto;
-			bottom: 0;
-			margin-left: -@triangle-size;
-		}
-	}
-
-	&[data-editify-placement='bottom'] {
-		border-bottom: none;
-		border-top-color: @border-color;
-
-		.editify-triangle-el {
-			border-bottom: none;
-			border-top-color: @background;
-			left: 1px;
-			bottom: 1.5px;
-			top: auto;
-			right: auto;
-			margin-left: -@triangle-size;
-		}
-	}
-
-	&[data-editify-placement='left'] {
-		border-left: none;
-		border-right-color: @border-color;
-
-		.editify-triangle-el {
-			border-left: none;
-			border-right-color: @background;
-			left: 1.5px;
-			top: 1px;
-			right: auto;
-			bottom: auto;
-			margin-top: -@triangle-size;
-		}
-	}
-
-	&[data-editify-placement='right'] {
-		border-right: none;
-		border-left-color: @border-color;
-
-		.editify-triangle-el {
-			border-right: none;
-			border-left-color: @background;
-			right: 1.5px;
-			top: 1px;
-			bottom: auto;
-			left: auto;
-			margin-top: -@triangle-size;
-		}
-	}
-}
-</style>

package/src/components/common/Colors.vue

@@ -1,138 +0,0 @@
-<template>
-	<div class="editify-colors">
-		<div class="editify-colors-header" @click="selectColor({ value: '' })">
-			<Icon value="remove"></Icon>
-			<span>{{ $editTrans('defaultColor') }}</span>
-		</div>
-		<div class="editify-colors-list">
-			<div class="editify-color" :class="{ active: value == item.value }" v-for="item in data" :style="{ borderColor: value == item.value ? color : '' }">
-				<Tooltip block :content="item.label" :disabled="!tooltip">
-					<div @click="selectColor(item)" class="editify-color-el" :style="{ background: item.value }"></div>
-				</Tooltip>
-			</div>
-		</div>
-	</div>
-</template>
-<script>
-import Icon from '../base/Icon'
-import Tooltip from '../base/Tooltip'
-export default {
-	name: 'Colors',
-	emits: ['change'],
-	props: {
-		//颜色数组
-		data: {
-			type: Array,
-			default: function () {
-				return []
-			}
-		},
-		//选中的颜色
-		value: {
-			type: String,
-			default: null
-		},
-		//激活状态颜色
-		color: {
-			type: String,
-			default: ''
-		},
-		//是否使用工具提示
-		tooltip: {
-			type: Boolean,
-			default: false
-		}
-	},
-	data() {
-		return {}
-	},
-	inject: ['$editTrans'],
-	components: {
-		Icon,
-		Tooltip
-	},
-	methods: {
-		//选择颜色
-		selectColor(item) {
-			this.$emit('change', item.value)
-		}
-	}
-}
-</script>
-<style lang="less" scoped>
-.editify-colors {
-	display: block;
-	color: @font-color;
-	font-size: @font-size;
-	padding: 6px 10px;
-	box-sizing: border-box;
-	width: 244px;
-
-	.editify-colors-header {
-		display: flex;
-		justify-content: flex-start;
-		align-items: center;
-		position: relative;
-		padding: 6px 10px;
-		transform: all 200ms;
-		margin-bottom: 10px;
-		opacity: 0.8;
-
-		&::after {
-			content: '';
-			width: 100%;
-			height: 1px;
-			background-color: @background-darker;
-			position: absolute;
-			left: 0;
-			bottom: -5px;
-		}
-
-		:deep(.editify-icon) {
-			margin-right: 10px;
-		}
-
-		&:hover {
-			cursor: pointer;
-			background-color: @background-dark;
-			opacity: 1;
-		}
-
-		&:active {
-			opacity: 1;
-			background-color: @background-darker;
-		}
-	}
-
-	.editify-colors-list {
-		display: flex;
-		justify-content: flex-start;
-		flex-wrap: wrap;
-
-		.editify-color {
-			display: block;
-			padding: 4px;
-			border: 1px solid transparent;
-			border-radius: 2px;
-
-			&.active {
-				border-color: @font-color-light;
-			}
-
-			.editify-color-el {
-				display: block;
-				width: 16px;
-				height: 16px;
-				border: 1px solid @border-color;
-				border-radius: 2px;
-				cursor: pointer;
-				transition: all 200ms;
-
-				&:hover {
-					transform: scale(1.2);
-				}
-			}
-		}
-	}
-}
-</style>

package/src/components/common/InsertImage.vue

@@ -1,316 +0,0 @@
-<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>
-import { file as DapFile } from 'dap-util'
-import Icon from '../base/Icon'
-export default {
-	name: 'InsertImage',
-	emits: ['change', 'insert'],
-	props: {
-		//主题色
-		color: {
-			type: String,
-			default: ''
-		},
-		//支持的图片类型数组
-		accept: {
-			type: Array,
-			default: null
-		},
-		//是否支持多选
-		multiple: {
-			type: Boolean,
-			default: false
-		},
-		//单个文件最大值
-		maxSize: {
-			type: Number,
-			default: null
-		},
-		//单个文件最小值
-		minSize: {
-			type: Number,
-			default: null
-		},
-		//是否自定义上传图片
-		customUpload: {
-			type: Function,
-			default: null
-		},
-		//处理上传图片异常
-		handleError: {
-			type: Function,
-			default: null
-		}
-	},
-	inject: ['$editTrans'],
-	data() {
-		return {
-			current: 'upload', //当前展示的面板，取值remote和upload
-			remoteUrl: '' //远程图片链接
-		}
-	},
-	computed: {
-		activeStyle() {
-			return name => {
-				if (this.current == name) {
-					return {
-						color: this.color
-					}
-				}
-				return {}
-			}
-		}
-	},
-	components: {
-		Icon
-	},
-	watch: {
-		//监听current变更触发change事件
-		current() {
-			this.$emit('change')
-		}
-	},
-	methods: {
-		//选择文件
-		async selectFile(e) {
-			const inputEle = e.currentTarget
-			const files = inputEle.files
-			if (!files.length) {
-				return
-			}
-			let filterFiles = []
-			for (let i = 0; i < files.length; i++) {
-				const file = files[i]
-				const suffix = this.getSuffix(file)
-				const isMatch = this.accept.some(item => {
-					return item.toLocaleLowerCase() == suffix.toLocaleLowerCase()
-				})
-				//后缀不符合
-				if (!isMatch) {
-					//如果自定义了异常处理
-					if (typeof this.handleError == 'function') {
-						this.handleError.apply(this, ['suffixError', file])
-					}
-					continue
-				}
-				//超过最大值
-				if (this.maxSize && file.size / 1024 > this.maxSize) {
-					//如果自定义了异常处理
-					if (typeof this.handleError == 'function') {
-						this.handleError.apply(this, ['maxSizeError', file])
-					}
-					continue
-				}
-				//没达到最小值
-				if (this.minSize && file.size / 1024 < this.minSize) {
-					//如果自定义了异常处理
-					if (typeof this.handleError == 'function') {
-						this.handleError.apply(this, ['minSizeError', file])
-					}
-					continue
-				}
-				filterFiles.push(file)
-			}
-			//有文件可上传
-			if (filterFiles.length) {
-				let images = []
-				//自定义上传方法
-				if (typeof this.customUpload == 'function') {
-					images = (await this.customUpload.apply(this, [filterFiles])) || []
-				}
-				//默认上传方法
-				else {
-					for (let i = 0; i < filterFiles.length; i++) {
-						const url = await DapFile.dataFileToBase64(filterFiles[i])
-						images.push(url)
-					}
-				}
-				images.forEach(url => {
-					this.$emit('insert', url)
-				})
-			}
-			//清空文件选择框
-			inputEle.value = ''
-		},
-		//获取文件后缀
-		getSuffix(file) {
-			const index = file.name.lastIndexOf('.')
-			if (index <= 0) {
-				return ''
-			}
-			return file.name.substring(index + 1)
-		},
-		//输入框获取焦点
-		handleInputFocus(e) {
-			if (this.color) {
-				e.currentTarget.style.borderColor = this.color
-			}
-		},
-		//输入框失去焦点
-		handleInputBlur(e) {
-			e.currentTarget.style.borderColor = ''
-		},
-		//插入网络图片
-		insertRemoteImage() {
-			this.$emit('insert', this.remoteUrl)
-		}
-	}
-}
-</script>
-<style lang="less" scoped>
-.editify-image {
-	display: block;
-	width: 280px;
-	padding: 10px 14px;
-
-	.editify-image-header {
-		display: flex;
-		justify-content: flex-start;
-		align-items: center;
-		width: 100%;
-		margin-bottom: 20px;
-		position: relative;
-		padding-bottom: 6px;
-
-		.editify-image-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-image-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-image-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-image-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-image-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;
-		}
-	}
-}
-</style>