vue-editify 0.1.18 → 0.1.19

package/src/components/tooltip/props.ts

@@ -1,21 +1,21 @@
-import { ExtractPublicPropTypes } from 'vue'
-
-export const TooltipProps = {
-	//提示内容
-	content: {
-		type: String,
-		default: ''
-	},
-	//是否禁用
-	disabled: {
-		type: Boolean,
-		default: false
-	},
-	//是否块级
-	block: {
-		type: Boolean,
-		default: false
-	}
-}
-
-export type TooltipPropsType = ExtractPublicPropTypes<typeof TooltipProps>
+import { ExtractPublicPropTypes } from 'vue'
+
+export const TooltipProps = {
+	//提示内容
+	content: {
+		type: String,
+		default: ''
+	},
+	//是否禁用
+	disabled: {
+		type: Boolean,
+		default: false
+	},
+	//是否块级
+	block: {
+		type: Boolean,
+		default: false
+	}
+}
+
+export type TooltipPropsType = ExtractPublicPropTypes<typeof TooltipProps>

package/src/components/tooltip/tooltip.less

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

package/src/components/tooltip/tooltip.vue

@@ -1,37 +1,37 @@
-<template>
-	<div class="editify-tooltip" :class="{ block: block }">
-		<div ref="targetRef" class="editify-tooltip-target" @mouseenter="showContent" @mouseleave="hideContent">
-			<slot></slot>
-		</div>
-		<Layer v-model="show" :node="targetRef" border border-color="#000" background="#000" show-triangle color="#fff" placement="bottom" animation="fade" :z-index="10">
-			<div class="editify-tooltip-content">{{ content }}</div>
-		</Layer>
-	</div>
-</template>
-<script setup lang="ts">
-import { ref } from 'vue'
-import Layer from '../layer/layer.vue'
-import { TooltipProps } from './props'
-
-defineOptions({
-	name: 'Tooltip'
-})
-const props = defineProps(TooltipProps)
-
-const show = ref<boolean>(false)
-const targetRef = ref<HTMLElement | null>(null)
-
-const showContent = () => {
-	if (props.disabled) {
-		return
-	}
-	show.value = true
-}
-const hideContent = () => {
-	if (props.disabled) {
-		return
-	}
-	show.value = false
-}
-</script>
-<style scoped src="./tooltip.less"></style>
+<template>
+	<div class="editify-tooltip" :class="{ block: block }">
+		<div ref="targetRef" class="editify-tooltip-target" @mouseenter="showContent" @mouseleave="hideContent">
+			<slot></slot>
+		</div>
+		<Layer v-model="show" :node="targetRef" border border-color="#000" background="#000" show-triangle color="#fff" placement="bottom" animation="fade" :z-index="10">
+			<div class="editify-tooltip-content">{{ content }}</div>
+		</Layer>
+	</div>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+import Layer from '../layer/layer.vue'
+import { TooltipProps } from './props'
+
+defineOptions({
+	name: 'Tooltip'
+})
+const props = defineProps(TooltipProps)
+
+const show = ref<boolean>(false)
+const targetRef = ref<HTMLElement | null>(null)
+
+const showContent = () => {
+	if (props.disabled) {
+		return
+	}
+	show.value = true
+}
+const hideContent = () => {
+	if (props.disabled) {
+		return
+	}
+	show.value = false
+}
+</script>
+<style scoped src="./tooltip.less"></style>

package/src/components/triangle/props.ts

@@ -1,26 +1,26 @@
-import { ExtractPublicPropTypes, PropType } from 'vue'
-
-export type TrianglePlacementType = 'top' | 'left' | 'right' | 'bottom'
-
-export const TriangleProps = {
-	//位置
-	placement: {
-		type: String as PropType<TrianglePlacementType>,
-		default: 'top',
-		validator(value: any) {
-			return ['top', 'left', 'right', 'bottom'].includes(value)
-		}
-	},
-	//边框颜色
-	color: {
-		type: String,
-		default: null
-	},
-	//背景色
-	background: {
-		type: String,
-		default: null
-	}
-}
-
-export type TrianglePropsType = ExtractPublicPropTypes<typeof TriangleProps>
+import { ExtractPublicPropTypes, PropType } from 'vue'
+
+export type TrianglePlacementType = 'top' | 'left' | 'right' | 'bottom'
+
+export const TriangleProps = {
+	//位置
+	placement: {
+		type: String as PropType<TrianglePlacementType>,
+		default: 'top',
+		validator(value: any) {
+			return ['top', 'left', 'right', 'bottom'].includes(value)
+		}
+	},
+	//边框颜色
+	color: {
+		type: String,
+		default: null
+	},
+	//背景色
+	background: {
+		type: String,
+		default: null
+	}
+}
+
+export type TrianglePropsType = ExtractPublicPropTypes<typeof TriangleProps>

package/src/components/triangle/triangle.less

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

package/src/components/triangle/triangle.vue

@@ -1,65 +1,65 @@
-<template>
-	<div class="editify-triangle" :style="style" :data-editify-placement="placement">
-		<div class="editify-triangle-el" :style="elStyle"></div>
-	</div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-import { TriangleProps } from './props'
-import { ObjectType } from '../../core/tool'
-
-defineOptions({
-	name: 'Triangle'
-})
-const props = defineProps(TriangleProps)
-
-const style = computed<ObjectType>(() => {
-	if (props.placement == 'top') {
-		return {
-			borderBottomColor: props.color || ''
-		}
-	}
-	if (props.placement == 'bottom') {
-		return {
-			borderTopColor: props.color || ''
-		}
-	}
-	if (props.placement == 'left') {
-		return {
-			borderRightColor: props.color || ''
-		}
-	}
-	if (props.placement == 'right') {
-		return {
-			borderLeftColor: props.color || ''
-		}
-	}
-	return {}
-})
-const elStyle = computed<ObjectType>(() => {
-	if (props.placement == 'top') {
-		return {
-			borderBottomColor: props.background || ''
-		}
-	}
-	if (props.placement == 'bottom') {
-		return {
-			borderTopColor: props.background || ''
-		}
-	}
-	if (props.placement == 'left') {
-		return {
-			borderRightColor: props.background || ''
-		}
-	}
-	if (props.placement == 'right') {
-		return {
-			borderLeftColor: props.background || ''
-		}
-	}
-	return {}
-})
-</script>
-
-<style scoped src="./triangle.less"></style>
+<template>
+	<div class="editify-triangle" :style="style" :data-editify-placement="placement">
+		<div class="editify-triangle-el" :style="elStyle"></div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { TriangleProps } from './props'
+import { ObjectType } from '../../core/tool'
+
+defineOptions({
+	name: 'Triangle'
+})
+const props = defineProps(TriangleProps)
+
+const style = computed<ObjectType>(() => {
+	if (props.placement == 'top') {
+		return {
+			borderBottomColor: props.color || ''
+		}
+	}
+	if (props.placement == 'bottom') {
+		return {
+			borderTopColor: props.color || ''
+		}
+	}
+	if (props.placement == 'left') {
+		return {
+			borderRightColor: props.color || ''
+		}
+	}
+	if (props.placement == 'right') {
+		return {
+			borderLeftColor: props.color || ''
+		}
+	}
+	return {}
+})
+const elStyle = computed<ObjectType>(() => {
+	if (props.placement == 'top') {
+		return {
+			borderBottomColor: props.background || ''
+		}
+	}
+	if (props.placement == 'bottom') {
+		return {
+			borderTopColor: props.background || ''
+		}
+	}
+	if (props.placement == 'left') {
+		return {
+			borderRightColor: props.background || ''
+		}
+	}
+	if (props.placement == 'right') {
+		return {
+			borderLeftColor: props.background || ''
+		}
+	}
+	return {}
+})
+</script>
+
+<style scoped src="./triangle.less"></style>