vue-editify 0.1.10 → 0.1.12

package/src/components/base/Button.vue

@@ -1,450 +0,0 @@
-<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="12" 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 { common as DapCommon, color as DapColor } 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 (DapCommon.isObject(this.selectConfig)) {
-				if (Array.isArray(this.selectConfig.options)) {
-					options = this.selectConfig.options.map(item => {
-						if (DapCommon.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 (DapCommon.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 (DapCommon.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 DapColor.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;
-
-		&:not(:hover)::-webkit-scrollbar {
-			display: none;
-		}
-
-		.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;
-					}
-
-					span {
-						overflow: hidden;
-						text-overflow: ellipsis;
-						white-space: nowrap;
-					}
-				}
-			}
-		}
-	}
-}
-</style>

package/src/components/base/Checkbox.vue

@@ -1,196 +0,0 @@
-<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 { common as DapCommon } 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 DapCommon.matchingText(value, 'hex')
-			}
-		}
-	},
-	computed: {
-		check() {
-			if (typeof this.modelValue == 'boolean') {
-				return this.modelValue
-			}
-			if (Array.isArray(this.modelValue)) {
-				//数组中是否已包含此复选框的值
-				return this.modelValue.some(item => {
-					return DapCommon.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 !DapCommon.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>