vue-editify 0.1.18 → 0.1.19

package/src/components/insertTable/insertTable.less

@@ -1,54 +1,54 @@
-.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;
-	}
-}
+.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;
+	}
+}

package/src/components/insertTable/insertTable.vue

@@ -1,85 +1,85 @@
-<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 setup lang="ts">
-import { computed, inject, ref } from 'vue'
-import { InsertTableGridType, InsertTableProps } from './props'
-
-defineOptions({
-	name: 'InsertTable'
-})
-const props = defineProps(InsertTableProps)
-const emits = defineEmits(['insert'])
-
-const $editTrans = inject<(key: string) => any>('$editTrans')!
-
-//获取表格
-const getTableGrids = () => {
-	const grids: InsertTableGridType[][] = []
-	for (let i = 1; i <= props.maxRows; i++) {
-		let row: InsertTableGridType[] = []
-		for (let j = 1; j <= props.maxColumns; j++) {
-			row.push({
-				x: i,
-				y: j,
-				inside: false //是否被选中
-			})
-		}
-		grids.push(row)
-	}
-	return grids
-}
-
-const tableGrids = ref<InsertTableGridType[][]>(getTableGrids())
-
-//表格规格
-const specification = computed<InsertTableGridType>(() => {
-	return tableGrids.value
-		.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]
-})
-//改变表格大小
-const changeTableSize = (data: InsertTableGridType) => {
-	for (let i in tableGrids.value) {
-		const grid = tableGrids.value[i]
-		for (let j in grid) {
-			if (grid[j].x <= data.x && grid[j].y <= data.y) {
-				tableGrids.value[i][j].inside = true
-			} else {
-				tableGrids.value[i][j].inside = false
-			}
-		}
-	}
-}
-//确认创立表格
-const createTable = (data: InsertTableGridType) => {
-	emits('insert', data.x, data.y)
-}
-</script>
-<style scoped src="./insertTable.less"></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 setup lang="ts">
+import { computed, inject, ref } from 'vue'
+import { InsertTableGridType, InsertTableProps } from './props'
+
+defineOptions({
+	name: 'InsertTable'
+})
+const props = defineProps(InsertTableProps)
+const emits = defineEmits(['insert'])
+
+const $editTrans = inject<(key: string) => any>('$editTrans')!
+
+//获取表格
+const getTableGrids = () => {
+	const grids: InsertTableGridType[][] = []
+	for (let i = 1; i <= props.maxRows; i++) {
+		let row: InsertTableGridType[] = []
+		for (let j = 1; j <= props.maxColumns; j++) {
+			row.push({
+				x: i,
+				y: j,
+				inside: false //是否被选中
+			})
+		}
+		grids.push(row)
+	}
+	return grids
+}
+
+const tableGrids = ref<InsertTableGridType[][]>(getTableGrids())
+
+//表格规格
+const specification = computed<InsertTableGridType>(() => {
+	return tableGrids.value
+		.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]
+})
+//改变表格大小
+const changeTableSize = (data: InsertTableGridType) => {
+	for (let i in tableGrids.value) {
+		const grid = tableGrids.value[i]
+		for (let j in grid) {
+			if (grid[j].x <= data.x && grid[j].y <= data.y) {
+				tableGrids.value[i][j].inside = true
+			} else {
+				tableGrids.value[i][j].inside = false
+			}
+		}
+	}
+}
+//确认创立表格
+const createTable = (data: InsertTableGridType) => {
+	emits('insert', data.x, data.y)
+}
+</script>
+<style scoped src="./insertTable.less"></style>

package/src/components/insertTable/props.ts

@@ -1,27 +1,27 @@
-import { ExtractPublicPropTypes } from 'vue'
-
-export type InsertTableGridType = {
-	x: number
-	y: number
-	inside: boolean
-}
-
-export const InsertTableProps = {
-	//主题色
-	color: {
-		type: String,
-		default: ''
-	},
-	//最大行数
-	maxRows: {
-		type: Number,
-		default: 10
-	},
-	//最大列数
-	maxColumns: {
-		type: Number,
-		default: 10
-	}
-}
-
-export type InsertTablePropsType = ExtractPublicPropTypes<typeof InsertTableProps>
+import { ExtractPublicPropTypes } from 'vue'
+
+export type InsertTableGridType = {
+	x: number
+	y: number
+	inside: boolean
+}
+
+export const InsertTableProps = {
+	//主题色
+	color: {
+		type: String,
+		default: ''
+	},
+	//最大行数
+	maxRows: {
+		type: Number,
+		default: 10
+	},
+	//最大列数
+	maxColumns: {
+		type: Number,
+		default: 10
+	}
+}
+
+export type InsertTablePropsType = ExtractPublicPropTypes<typeof InsertTableProps>

package/src/components/insertVideo/insertVideo.less

@@ -1,135 +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;
-		}
-	}
-}
+.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;
+		}
+	}
+}