vue-editify 0.1.9 → 0.1.12

package/src/components/tooltip/props.ts

@@ -0,0 +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>

package/src/components/tooltip/tooltip.less

@@ -0,0 +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;
+		}
+	}
+}

package/src/components/tooltip/tooltip.vue

@@ -0,0 +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">
+			<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

@@ -0,0 +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>

package/src/components/triangle/triangle.less

@@ -0,0 +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;
+		}
+	}
+}

package/src/components/triangle/triangle.vue

@@ -0,0 +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>