vue-editify 0.0.1

package/src/components/base/Button.vue

@@ -0,0 +1,440 @@
+<template>
+	<div class="editify-button">
+		<div class="editify-button-wrap" :class="{ 'right-border': rightBorder, 'left-border': leftBorder }">
+			<Tooltip :content="title" :disabled="!tooltip">
+				<div ref="btn" :style="btnStyle" class="editify-button-el" :class="{ disabled: disabled, active: active }" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave" @mousedown="handleMouseDown" @mouseup="handleMouseUp" @click="handleClick">
+					<div v-if="type == 'default' || type == 'select'" class="editify-button-slot">
+						<slot></slot>
+					</div>
+					<div v-else-if="type == 'display'">{{ displayLabel }}</div>
+					<Icon v-if="type == 'select' || type == 'display'" value="caret-down" class="editify-button-caret" :class="{ rotate: layerConfig.show }"></Icon>
+				</div>
+			</Tooltip>
+			<Layer ref="layer" v-model="layerConfig.show" :node="layerConfig.node" border fade placement="bottom-start" :z-index="20" animation="translate" @show="layerShow" @shown="layerShown" @hidden="layerHidden">
+				<div class="editify-button-layer" :style="{ width: (type == 'select' ? parseSelectConfig.width : parseDisplayConfig.width) + 'px', maxHeight: (type == 'select' ? parseSelectConfig.maxHeight : parseDisplayConfig.maxHeight) + 'px', overflow: hideScroll ? 'visible' : '' }">
+					<slot v-if="$slots.layer" name="layer" :options="cmpOptions"></slot>
+					<div v-else class="editify-button-options">
+						<div @click="select(item)" class="editify-button-option" :class="{ active: type == 'display' ? item.value == parseDisplayConfig.value : false }" :style="item.style || ''" v-for="item in cmpOptions">
+							<slot v-if="$slots.option" name="option" :item="item"></slot>
+							<div class="editify-button-option-flex" v-else>
+								<Icon v-if="item.icon" :value="item.icon"></Icon>
+								<span>{{ item.label }}</span>
+							</div>
+						</div>
+					</div>
+				</div>
+			</Layer>
+		</div>
+	</div>
+</template>
+<script>
+import Tooltip from './Tooltip'
+import Layer from './Layer'
+import Icon from './Icon'
+import Dap from 'dap-util'
+export default {
+	name: 'Button',
+	emits: ['operate', 'layerShow', 'layerShown', 'layerHidden'],
+	props: {
+		//按钮类型
+		type: {
+			type: String,
+			default: 'default',
+			validator(value) {
+				//default表示默认的点击按钮
+				//select表示下拉列表的按钮
+				//display表示显示值的下拉列表按钮
+				return ['default', 'select', 'display'].includes(value)
+			}
+		},
+		//按钮名称，唯一值
+		name: {
+			type: String,
+			default: ''
+		},
+		//按钮提示内容
+		title: {
+			type: String,
+			default: ''
+		},
+		//是否显示工具提示
+		tooltip: {
+			type: Boolean,
+			default: false
+		},
+		//是否显示右侧边框
+		rightBorder: {
+			type: Boolean,
+			default: false
+		},
+		//是否显示左侧边框
+		leftBorder: {
+			type: Boolean,
+			default: false
+		},
+		//主题色，用于按钮悬浮颜色变化使用,仅支持十六进制
+		color: {
+			type: String,
+			default: ''
+		},
+		//是否禁用
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		//是否激活
+		active: {
+			type: Boolean,
+			default: false
+		},
+		//type=select时的配置
+		selectConfig: {
+			type: Object,
+			default: null
+		},
+		//type=display时的配置
+		displayConfig: {
+			type: Object,
+			default: null
+		},
+		//浮层隐藏滚动条
+		hideScroll: {
+			type: Boolean,
+			default: false
+		}
+	},
+	data() {
+		return {
+			//选择列表的浮层配置
+			layerConfig: {
+				show: false,
+				node: null
+			},
+			//按钮状态
+			status: null //hover表示悬浮，down表示按下
+		}
+	},
+	computed: {
+		//显示在页面的value值对应的label
+		displayLabel() {
+			const val = this.parseDisplayConfig.options.find(item => {
+				return item.value == this.parseDisplayConfig.value
+			})
+			return val ? val.label : ''
+		},
+		//渲染的浮层列表数据
+		cmpOptions() {
+			return this.type == 'select' ? this.parseSelectConfig.options : this.parseDisplayConfig.options
+		},
+		//处理后的select配置
+		parseSelectConfig() {
+			let options = []
+			let width = ''
+			let maxHeight = ''
+			if (Dap.common.isObject(this.selectConfig)) {
+				if (Array.isArray(this.selectConfig.options)) {
+					options = this.selectConfig.options.map(item => {
+						if (Dap.common.isObject(item)) {
+							return {
+								label: item.label,
+								value: item.value,
+								icon: item.icon,
+								style: item.style
+							}
+						}
+						return {
+							label: item,
+							value: item
+						}
+					})
+				}
+				if (typeof this.selectConfig.width == 'number') {
+					width = this.selectConfig.width
+				}
+				if (typeof this.selectConfig.maxHeight == 'number') {
+					maxHeight = this.selectConfig.maxHeight
+				}
+			}
+			return {
+				options,
+				width,
+				maxHeight
+			}
+		},
+		//处理后的display配置
+		parseDisplayConfig() {
+			let options = []
+			let width = ''
+			let maxHeight = ''
+			let value = ''
+			if (Dap.common.isObject(this.displayConfig)) {
+				if (typeof this.displayConfig.value == 'string' || typeof this.displayConfig.value == 'number') {
+					value = this.displayConfig.value
+				}
+				if (Array.isArray(this.displayConfig.options)) {
+					options = this.displayConfig.options.map(item => {
+						if (Dap.common.isObject(item)) {
+							return {
+								label: item.label,
+								value: item.value,
+								icon: item.icon,
+								style: item.style
+							}
+						}
+						return {
+							label: item,
+							value: item
+						}
+					})
+					let optItem = options.find(item => {
+						return item.value == value
+					})
+					if (!optItem && options[0]) {
+						value = options[0].value
+					}
+				}
+				if (typeof this.displayConfig.width == 'number') {
+					width = this.displayConfig.width
+				}
+				if (typeof this.displayConfig.maxHeight == 'number') {
+					maxHeight = this.displayConfig.maxHeight
+				}
+			}
+			return {
+				options,
+				width,
+				maxHeight,
+				value
+			}
+		},
+		//十六进制颜色转换的rgb颜色数组
+		parseColor() {
+			return Dap.color.hex2rgb(this.color)
+		},
+		//按钮样式
+		btnStyle() {
+			if (this.disabled) {
+				return {}
+			}
+			if (this.color) {
+				//激活情况下和鼠标按下状态
+				if (this.active || this.status == 'down') {
+					return {
+						color: this.color,
+						backgroundColor: `rgba(${this.parseColor[0]},${this.parseColor[1]},${this.parseColor[2]},0.15)`
+					}
+				}
+				//鼠标悬浮状态
+				if (this.status == 'hover') {
+					return {
+						color: `rgba(${this.parseColor[0]},${this.parseColor[1]},${this.parseColor[2]},0.9)`,
+						backgroundColor: `rgba(${this.parseColor[0]},${this.parseColor[1]},${this.parseColor[2]},0.05)`
+					}
+				}
+			}
+			return {}
+		}
+	},
+	components: {
+		Tooltip,
+		Layer,
+		Icon
+	},
+	methods: {
+		//主动关闭浮层
+		hideLayer() {
+			this.layerConfig.show = false
+			this.layerConfig.node = null
+		},
+		//浮层显示时
+		layerShow() {
+			this.$emit('layerShow')
+		},
+		//浮层显示后
+		layerShown() {
+			this.$emit('layerShown')
+		},
+		//浮层隐藏后
+		layerHidden() {
+			this.$emit('layerHidden')
+		},
+		//列表选择
+		select(item) {
+			if (this.disabled) {
+				return
+			}
+			this.$emit('operate', this.name, item.value)
+			this.hideLayer()
+		},
+		//按钮点击处理
+		handleClick() {
+			if (this.disabled) {
+				return
+			}
+			if (this.type == 'default') {
+				this.$emit('operate', this.name)
+			} else {
+				if (this.layerConfig.show) {
+					this.hideLayer()
+				} else {
+					this.layerConfig.node = this.$refs.btn
+					this.layerConfig.show = true
+				}
+			}
+		},
+		//鼠标移入处理
+		handleMouseEnter() {
+			this.status = 'hover'
+		},
+		//鼠标移出处理
+		handleMouseLeave() {
+			this.status = null
+		},
+		//鼠标按下处理
+		handleMouseDown() {
+			this.status = 'down'
+		},
+		//鼠标松开处理
+		handleMouseUp() {
+			this.status = 'hover'
+		}
+	}
+}
+</script>
+<style lang="less" scoped>
+.editify-button {
+	display: inline-flex;
+	justify-content: center;
+	align-items: center;
+	position: relative;
+	color: @font-color;
+	font-size: @font-size;
+
+	.editify-button-wrap {
+		padding: 0 4px;
+		position: relative;
+
+		&.right-border::after {
+			position: absolute;
+			right: 0;
+			top: 50%;
+			content: '';
+			transform: translateY(-50%);
+			height: 18px;
+			width: 1px;
+			background-color: @border-color;
+		}
+
+		&.left-border::before {
+			position: absolute;
+			left: 0;
+			top: 50%;
+			content: '';
+			transform: translateY(-50%);
+			height: 18px;
+			width: 1px;
+			background-color: @border-color;
+		}
+
+		.editify-button-el {
+			display: inline-flex;
+			justify-content: flex-start;
+			align-items: center;
+			white-space: nowrap;
+			height: 28px;
+			line-height: 1;
+			transition: all 200ms;
+			background-color: @background;
+			padding: 0 8px;
+			border-radius: 2px;
+
+			.editify-button-slot {
+				display: inline-flex;
+				justify-content: flex-start;
+				align-items: center;
+			}
+
+			.editify-button-caret {
+				margin-left: 2px;
+				transform: scale(0.6);
+				transition: transform 200ms;
+				font-size: 14px;
+
+				&.rotate {
+					transform: scale(0.6) rotate(180deg);
+				}
+			}
+
+			&:hover {
+				cursor: pointer;
+				background-color: @background-dark;
+			}
+
+			&:active,
+			&.active {
+				background-color: @background-darker;
+			}
+
+			&.disabled {
+				color: @font-color-disabled;
+				cursor: not-allowed;
+				background-color: @background;
+			}
+		}
+	}
+
+	.editify-button-layer {
+		display: block;
+		position: relative;
+		overflow-x: hidden;
+		overflow-y: auto;
+
+		.editify-button-options {
+			display: block;
+			width: 100%;
+			padding: 4px 0;
+
+			.editify-button-option {
+				display: flex;
+				justify-content: flex-start;
+				align-items: center;
+				width: 100%;
+				padding: 6px 12px;
+				transition: all 200ms;
+				opacity: 0.8;
+				white-space: nowrap;
+				text-overflow: ellipsis;
+				overflow: hidden;
+				box-sizing: border-box;
+
+				&:hover {
+					opacity: 1;
+					cursor: pointer;
+					background-color: @background-dark;
+				}
+
+				&:active {
+					opacity: 1;
+					background-color: @background-darker;
+				}
+
+				&.active {
+					opacity: 1;
+					background-color: @background-darker;
+				}
+
+				.editify-button-option-flex {
+					display: flex;
+					justify-content: flex-start;
+					align-items: center;
+					width: 100%;
+
+					:deep(.editify-icon) {
+						margin-right: 10px;
+					}
+				}
+			}
+		}
+	}
+}
+</style>

package/src/components/base/Checkbox.vue

@@ -0,0 +1,196 @@
+<template>
+	<label class="editify-checkbox" :class="{ disabled: disabled }">
+		<span v-if="placement == 'left' && label" class="editify-checkbox-label" :data-editify-placement="placement" v-text="label"></span>
+		<input @change="change" :value="value" :disabled="disabled" :checked="check" type="checkbox" />
+		<span class="editify-checkbox-item" :class="{ reverse: !color, round: round, checked: check && !disabled }" :style="itemStyle">
+			<Icon value="check" :style="{ opacity: check ? '' : 0 }" />
+		</span>
+		<span v-if="placement == 'right' && label" class="editify-checkbox-label" :data-editify-placement="placement" v-text="label"></span>
+	</label>
+</template>
+
+<script>
+import Dap from 'dap-util'
+import Icon from './Icon'
+export default {
+	name: 'Checkbox',
+	emits: ['update:modelValue', 'change'],
+	props: {
+		//是否禁用
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		//是否选中
+		modelValue: {
+			type: [Boolean, Array],
+			default: false
+		},
+		//label文字
+		label: {
+			type: String,
+			default: null
+		},
+		//值
+		value: {
+			type: [Object, Number, String, Array],
+			default: ''
+		},
+		//是否圆形
+		round: {
+			type: Boolean,
+			default: false
+		},
+		//文字位置
+		placement: {
+			type: String,
+			default: 'right',
+			validator(value) {
+				return ['left', 'right'].includes(value)
+			}
+		},
+		//主题颜色
+		color: {
+			type: String,
+			default: '',
+			validator(value) {
+				return Dap.common.matchingText(value, 'hex')
+			}
+		}
+	},
+	computed: {
+		check() {
+			if (typeof this.modelValue == 'boolean') {
+				return this.modelValue
+			}
+			if (Array.isArray(this.modelValue)) {
+				//数组中是否已包含此复选框的值
+				return this.modelValue.some(item => {
+					return Dap.common.equal(item, this.value)
+				})
+			}
+			return false
+		},
+		itemStyle() {
+			let style = {}
+			if (this.color && this.check && !this.disabled) {
+				style.backgroundColor = this.color
+				style.borderColor = this.color
+			}
+			return style
+		}
+	},
+	components: {
+		Icon
+	},
+	methods: {
+		change(event) {
+			if (Array.isArray(this.modelValue)) {
+				let arr = [...this.modelValue]
+				//勾选且不包含
+				if (event.target.checked && !this.check) {
+					arr.push(this.value)
+				}
+				//取消且包含
+				else if (this.check) {
+					arr = arr.filter(item => {
+						return !Dap.common.equal(item, this.value)
+					})
+				}
+				this.$emit('update:modelValue', arr)
+				this.$emit('change', arr)
+			} else if (typeof this.modelValue == 'boolean') {
+				this.$emit('update:modelValue', event.target.checked)
+				this.$emit('change', event.target.checked)
+			}
+		}
+	}
+}
+</script>
+
+<style scoped lang="less">
+.editify-checkbox {
+	display: inline-flex;
+	margin: 0;
+	padding: 0;
+	position: relative;
+	vertical-align: middle;
+	justify-content: flex-start;
+	align-items: center;
+	cursor: pointer;
+	user-select: none;
+	font-size: @font-size;
+
+	input[type='checkbox'] {
+		width: 0;
+		height: 0;
+		opacity: 0;
+		border: none;
+		display: none;
+	}
+
+	.editify-checkbox-item {
+		display: inline-flex;
+		display: -webkit-inline-flex;
+		justify-content: center;
+		align-items: center;
+		position: relative;
+		margin: 0;
+		padding: 1px;
+		border: 1px solid @border-color;
+		background-color: @background;
+		border-radius: 2px;
+		color: @background;
+		transition: border-color 0.1s cubic-bezier(0.71, -0.46, 0.29, 1.46), background-color 0.1s cubic-bezier(0.71, -0.46, 0.29, 1.46), color 0.1s cubic-bezier(0.71, -0.46, 0.29, 1.46);
+
+		&.round {
+			border-radius: 50%;
+		}
+
+		&.checked {
+			background-color: @font-color;
+			border-color: @font-color;
+
+			&.reverse {
+				background-color: @background;
+				color: @font-color-light;
+				border-color: @border-color;
+			}
+		}
+
+		:deep(.editify-icon) {
+			font-size: 18px;
+			zoom: 50%;
+		}
+	}
+
+	.editify-checkbox-label {
+		vertical-align: middle;
+		color: @font-color;
+		user-select: none;
+		line-height: 1;
+
+		&[data-editify-placement='left'] {
+			margin-right: 6px;
+		}
+
+		&[data-editify-placement='right'] {
+			margin-left: 6px;
+		}
+	}
+
+	&.disabled {
+		cursor: not-allowed;
+		.editify-checkbox-item,
+		.editify-checkbox-item.check {
+			background-color: @background-darker;
+			border-color: @border-color;
+			color: @font-color-disabled;
+		}
+
+		.editify-checkbox-label {
+			color: @font-color-disabled;
+		}
+	}
+}
+</style>

package/src/components/base/Icon.vue

@@ -0,0 +1,31 @@
+<template>
+	<i class="editify-icon" :class="'editify-icon-' + value"></i>
+</template>
+<script>
+export default {
+	name: 'Icon',
+	props: {
+		//图标值
+		value: {
+			type: String,
+			default: ''
+		}
+	}
+}
+</script>
+<style lang="less" scoped>
+@font-face {
+	font-family: 'editify-icon';
+	src: url('../../icon/iconfont.woff?t=1699274556400') format('woff'), url('../../icon/iconfont.ttf?t=1699274556400') format('truetype');
+}
+
+.editify-icon {
+	font-family: 'editify-icon' !important;
+	font-size: inherit;
+	font-style: normal;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	line-height: 1;
+	vertical-align: middle;
+}
+</style>