vue-editify 0.1.3 → 0.1.4

package/src/components/common/InsertLink.vue

@@ -1,136 +1,136 @@
-<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>
-import Checkbox from '../base/Checkbox'
-export default {
-	name: 'InsertLink',
-	emits: ['insert'],
-	inject: ['$editTrans'],
-	props: {
-		//主题色
-		color: {
-			type: String,
-			default: ''
-		},
-		//预置的链接文本值
-		text: {
-			type: String,
-			default: ''
-		}
-	},
-	data() {
-		return {
-			//链接地址
-			linkUrl: '',
-			//链接文本
-			linkText: '',
-			//是否新窗口打开
-			newOpen: false
-		}
-	},
-	watch: {
-		text: {
-			immediate: true,
-			handler: function (newValue) {
-				this.linkText = newValue
-			}
-		}
-	},
-	components: {
-		Checkbox
-	},
-	methods: {
-		//输入框获取焦点
-		handleInputFocus(e) {
-			if (this.color) {
-				e.currentTarget.style.borderColor = this.color
-			}
-		},
-		//输入框失去焦点
-		handleInputBlur(e) {
-			e.currentTarget.style.borderColor = ''
-		},
-		//插入链接
-		insertLink() {
-			this.$emit('insert', this.linkText, this.linkUrl, this.newOpen)
-		}
-	}
-}
-</script>
-<style lang="less" scoped>
-.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;
-				}
-			}
-		}
-	}
-}
-</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>
+import Checkbox from '../base/Checkbox'
+export default {
+	name: 'InsertLink',
+	emits: ['insert'],
+	inject: ['$editTrans'],
+	props: {
+		//主题色
+		color: {
+			type: String,
+			default: ''
+		},
+		//预置的链接文本值
+		text: {
+			type: String,
+			default: ''
+		}
+	},
+	data() {
+		return {
+			//链接地址
+			linkUrl: '',
+			//链接文本
+			linkText: '',
+			//是否新窗口打开
+			newOpen: false
+		}
+	},
+	watch: {
+		text: {
+			immediate: true,
+			handler: function (newValue) {
+				this.linkText = newValue
+			}
+		}
+	},
+	components: {
+		Checkbox
+	},
+	methods: {
+		//输入框获取焦点
+		handleInputFocus(e) {
+			if (this.color) {
+				e.currentTarget.style.borderColor = this.color
+			}
+		},
+		//输入框失去焦点
+		handleInputBlur(e) {
+			e.currentTarget.style.borderColor = ''
+		},
+		//插入链接
+		insertLink() {
+			this.$emit('insert', this.linkText, this.linkUrl, this.newOpen)
+		}
+	}
+}
+</script>
+<style lang="less" scoped>
+.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;
+				}
+			}
+		}
+	}
+}
+</style>

package/src/components/common/InsertTable.vue

@@ -1,157 +1,157 @@
-<template>
-	<div class="editify-table">
-		<table>
-			<tr v-for="row in tableGrids">
-				<td :class="{ inside: column.inside }" v-for="column in row" @mouseenter="changeTableSize(column)" @click="createTable(column)">
-					<span></span>
-				</td>
-			</tr>
-		</table>
-		<div class="editify-table-footer">
-			<span v-if="specification">{{ specification.x }} x {{ specification.y }}</span>
-			<span v-else>{{ $editTrans('insertTable') }}</span>
-		</div>
-	</div>
-</template>
-<script>
-export default {
-	name: 'InsertTable',
-	emits: ['insert'],
-	inject: ['$editTrans'],
-	props: {
-		//主题色
-		color: {
-			type: String,
-			default: ''
-		},
-		//最大行数
-		maxRows: {
-			type: Number,
-			default: 10
-		},
-		//最大列数
-		maxColumns: {
-			type: Number,
-			default: 10
-		}
-	},
-	data() {
-		return {
-			tableGrids: this.getTableGrids()
-		}
-	},
-	computed: {
-		//表格规格
-		specification() {
-			return this.tableGrids
-				.flat()
-				.filter(item => {
-					return item.inside
-				})
-				.sort((a, b) => {
-					if (a.x > b.x && a.y > b.y) {
-						return -1
-					}
-					if (a.x > b.x) {
-						return -1
-					}
-					if (a.y > b.y) {
-						return -1
-					}
-					return 1
-				})[0]
-		}
-	},
-	methods: {
-		//确认创立表格
-		createTable(data) {
-			this.$emit('insert', data.x, data.y)
-		},
-		//改变表格大小
-		changeTableSize(data) {
-			for (let i in this.tableGrids) {
-				const grid = this.tableGrids[i]
-				for (let j in grid) {
-					if (grid[j].x <= data.x && grid[j].y <= data.y) {
-						this.tableGrids[i][j].inside = true
-					} else {
-						this.tableGrids[i][j].inside = false
-					}
-				}
-			}
-		},
-		//获取表格
-		getTableGrids() {
-			const grids = []
-			for (let i = 1; i <= this.maxRows; i++) {
-				let row = []
-				for (let j = 1; j <= this.maxColumns; j++) {
-					row.push({
-						x: i,
-						y: j,
-						inside: false //是否被选中
-					})
-				}
-				grids.push(row)
-			}
-			return grids
-		}
-	}
-}
-</script>
-<style lang="less" scoped>
-.editify-table {
-	display: block;
-	position: relative;
-	padding: 10px 10px 32px 10px;
-	box-sizing: border-box;
-
-	table {
-		border: 1px solid @border-color;
-		margin: 0;
-		padding: 0;
-		border-collapse: collapse;
-
-		tr {
-			margin: 0;
-			padding: 0;
-
-			td {
-				margin: 0;
-				padding: 0;
-				border: 1px solid @border-color;
-
-				span {
-					display: block;
-					width: 15px;
-					height: 15px;
-				}
-
-				&:hover {
-					cursor: pointer;
-				}
-
-				&.inside {
-					background-color: @background-darker;
-				}
-			}
-		}
-	}
-
-	.editify-table-footer {
-		text-align: center;
-		color: @font-color-light;
-		line-height: 1;
-		font-size: 12px;
-		position: absolute;
-		padding: 0 10px;
-		bottom: 10px;
-		left: 0;
-		width: 100%;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-		box-sizing: border-box;
-	}
-}
-</style>
+<template>
+	<div class="editify-table">
+		<table>
+			<tr v-for="row in tableGrids">
+				<td :class="{ inside: column.inside }" v-for="column in row" @mouseenter="changeTableSize(column)" @click="createTable(column)">
+					<span></span>
+				</td>
+			</tr>
+		</table>
+		<div class="editify-table-footer">
+			<span v-if="specification">{{ specification.x }} x {{ specification.y }}</span>
+			<span v-else>{{ $editTrans('insertTable') }}</span>
+		</div>
+	</div>
+</template>
+<script>
+export default {
+	name: 'InsertTable',
+	emits: ['insert'],
+	inject: ['$editTrans'],
+	props: {
+		//主题色
+		color: {
+			type: String,
+			default: ''
+		},
+		//最大行数
+		maxRows: {
+			type: Number,
+			default: 10
+		},
+		//最大列数
+		maxColumns: {
+			type: Number,
+			default: 10
+		}
+	},
+	data() {
+		return {
+			tableGrids: this.getTableGrids()
+		}
+	},
+	computed: {
+		//表格规格
+		specification() {
+			return this.tableGrids
+				.flat()
+				.filter(item => {
+					return item.inside
+				})
+				.sort((a, b) => {
+					if (a.x > b.x && a.y > b.y) {
+						return -1
+					}
+					if (a.x > b.x) {
+						return -1
+					}
+					if (a.y > b.y) {
+						return -1
+					}
+					return 1
+				})[0]
+		}
+	},
+	methods: {
+		//确认创立表格
+		createTable(data) {
+			this.$emit('insert', data.x, data.y)
+		},
+		//改变表格大小
+		changeTableSize(data) {
+			for (let i in this.tableGrids) {
+				const grid = this.tableGrids[i]
+				for (let j in grid) {
+					if (grid[j].x <= data.x && grid[j].y <= data.y) {
+						this.tableGrids[i][j].inside = true
+					} else {
+						this.tableGrids[i][j].inside = false
+					}
+				}
+			}
+		},
+		//获取表格
+		getTableGrids() {
+			const grids = []
+			for (let i = 1; i <= this.maxRows; i++) {
+				let row = []
+				for (let j = 1; j <= this.maxColumns; j++) {
+					row.push({
+						x: i,
+						y: j,
+						inside: false //是否被选中
+					})
+				}
+				grids.push(row)
+			}
+			return grids
+		}
+	}
+}
+</script>
+<style lang="less" scoped>
+.editify-table {
+	display: block;
+	position: relative;
+	padding: 10px 10px 32px 10px;
+	box-sizing: border-box;
+
+	table {
+		border: 1px solid @border-color;
+		margin: 0;
+		padding: 0;
+		border-collapse: collapse;
+
+		tr {
+			margin: 0;
+			padding: 0;
+
+			td {
+				margin: 0;
+				padding: 0;
+				border: 1px solid @border-color;
+
+				span {
+					display: block;
+					width: 15px;
+					height: 15px;
+				}
+
+				&:hover {
+					cursor: pointer;
+				}
+
+				&.inside {
+					background-color: @background-darker;
+				}
+			}
+		}
+	}
+
+	.editify-table-footer {
+		text-align: center;
+		color: @font-color-light;
+		line-height: 1;
+		font-size: 12px;
+		position: absolute;
+		padding: 0 10px;
+		bottom: 10px;
+		left: 0;
+		width: 100%;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		box-sizing: border-box;
+	}
+}
+</style>