vue-editify 0.1.10 → 0.1.13

package/src/components/button/button.vue

@@ -0,0 +1,197 @@
+<template>
+	<div class="editify-button">
+		<div class="editify-button-wrap" :class="{ 'right-border': rightBorder, 'left-border': leftBorder }">
+			<Tooltip :content="title" :disabled="!tooltip">
+				<div ref="btnRef" :style="btnStyle" class="editify-button-el" :class="{ disabled: disabled, active: active }" @mouseenter="status = 'hover'" @mouseleave="status = null" @mousedown="status = 'down'" @mouseup="status = 'hover'" @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: show }"></Icon>
+				</div>
+			</Tooltip>
+			<Layer ref="layerRef" v-model="show" :node="btnRef" border fade placement="bottom-start" :z-index="12" animation="translate" @show="emits('layerShow')" @shown="emits('layerShown')" @hidden="emits('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 setup lang="ts">
+import Tooltip from '../tooltip/tooltip.vue'
+import Layer from '../layer/layer.vue'
+import Icon from '../icon/icon.vue'
+import { common as DapCommon, color as DapColor } from 'dap-util'
+import { ButtonDisplayConfigType, ButtonOptionsItemType, ButtonProps, ButtonSelectConfigType } from './props'
+import { computed, ref } from 'vue'
+import { ObjectType } from '../../core/tool'
+
+defineOptions({
+	name: 'Button'
+})
+const props = defineProps(ButtonProps)
+const emits = defineEmits(['operate', 'layerShow', 'layerShown', 'layerHidden'])
+
+//是否显示浮层
+const show = ref<boolean>(false)
+//按钮状态，hover表示悬浮，down表示按下
+const status = ref<'hover' | 'down' | null>(null)
+const btnRef = ref<HTMLElement | null>(null)
+const layerRef = ref<InstanceType<typeof Layer> | null>(null)
+
+//处理后的select配置
+const parseSelectConfig = computed<ButtonSelectConfigType>(() => {
+	let options: ButtonOptionsItemType[] = []
+	let width: number | '' = ''
+	let maxHeight: number | '' = ''
+	if (DapCommon.isObject(props.selectConfig)) {
+		if (Array.isArray(props.selectConfig.options)) {
+			options = props.selectConfig.options.map(item => {
+				if (DapCommon.isObject(item)) {
+					return {
+						label: (<ButtonOptionsItemType>item).label,
+						value: (<ButtonOptionsItemType>item).value,
+						icon: (<ButtonOptionsItemType>item).icon,
+						style: (<ButtonOptionsItemType>item).style
+					}
+				}
+				return {
+					label: <string | number>item,
+					value: <string | number>item
+				}
+			})
+		}
+		if (typeof props.selectConfig.width == 'number') {
+			width = props.selectConfig.width
+		}
+		if (typeof props.selectConfig.maxHeight == 'number') {
+			maxHeight = props.selectConfig.maxHeight
+		}
+	}
+	return {
+		options,
+		width,
+		maxHeight
+	}
+})
+//处理后的display配置
+const parseDisplayConfig = computed<ButtonDisplayConfigType>(() => {
+	let options: ButtonOptionsItemType[] = []
+	let width: number | '' = ''
+	let maxHeight: number | '' = ''
+	let value: string | number = ''
+	if (DapCommon.isObject(props.displayConfig)) {
+		if (typeof props.displayConfig.value == 'string' || typeof props.displayConfig.value == 'number') {
+			value = props.displayConfig.value
+		}
+		if (Array.isArray(props.displayConfig.options)) {
+			options = props.displayConfig.options.map(item => {
+				if (DapCommon.isObject(item)) {
+					return {
+						label: (<ButtonOptionsItemType>item).label,
+						value: (<ButtonOptionsItemType>item).value,
+						icon: (<ButtonOptionsItemType>item).icon,
+						style: (<ButtonOptionsItemType>item).style
+					}
+				}
+				return {
+					label: <string | number>item,
+					value: <string | number>item
+				}
+			})
+			let optItem = options.find(item => {
+				return item.value == value
+			})
+			if (!optItem && options[0]) {
+				value = options[0].value!
+			}
+		}
+		if (typeof props.displayConfig.width == 'number') {
+			width = props.displayConfig.width
+		}
+		if (typeof props.displayConfig.maxHeight == 'number') {
+			maxHeight = props.displayConfig.maxHeight
+		}
+	}
+	return {
+		options,
+		width,
+		maxHeight,
+		value
+	}
+})
+//渲染的浮层列表数据
+const cmpOptions = computed<ButtonOptionsItemType[]>(() => {
+	return props.type == 'select' ? <ButtonOptionsItemType[]>parseSelectConfig.value.options : <ButtonOptionsItemType[]>parseDisplayConfig.value.options
+})
+//显示在页面的value值对应的label
+const displayLabel = computed<string | number>(() => {
+	const val = (<ButtonOptionsItemType[]>parseDisplayConfig.value.options).find(item => {
+		return item.value == parseDisplayConfig.value.value
+	})
+	return val ? val.label! : ''
+})
+//十六进制颜色转换的rgb颜色数组
+const parseColor = computed<number[]>(() => {
+	return DapColor.hex2rgb(props.color)
+})
+//按钮样式
+const btnStyle = computed<ObjectType>(() => {
+	if (props.disabled) {
+		return {}
+	}
+	if (props.color) {
+		//激活情况下和鼠标按下状态
+		if (props.active || status.value == 'down') {
+			return {
+				color: props.color,
+				backgroundColor: `rgba(${parseColor.value[0]},${parseColor.value[1]},${parseColor.value[2]},0.15)`
+			}
+		}
+		//鼠标悬浮状态
+		if (status.value == 'hover') {
+			return {
+				color: `rgba(${parseColor.value[0]},${parseColor.value[1]},${parseColor.value[2]},0.9)`,
+				backgroundColor: `rgba(${parseColor.value[0]},${parseColor.value[1]},${parseColor.value[2]},0.05)`
+			}
+		}
+	}
+	return {}
+})
+
+//列表选择
+const select = (item: ButtonOptionsItemType) => {
+	if (props.disabled) {
+		return
+	}
+	emits('operate', props.name, item.value)
+	show.value = false
+}
+//按钮点击处理
+const handleClick = () => {
+	if (props.disabled) {
+		return
+	}
+	if (props.type == 'default') {
+		emits('operate', props.name)
+	} else {
+		show.value = !show.value
+	}
+}
+
+defineExpose({
+	show,
+	status
+})
+</script>
+<style scoped src="./button.less"></style>

package/src/components/button/props.ts

@@ -0,0 +1,95 @@
+import { ExtractPublicPropTypes, PropType } from 'vue'
+import { ObjectType } from '../../core/tool'
+
+export type ButtonTypeType = 'default' | 'select' | 'display'
+
+export type ButtonOptionsItemType = {
+	label?: string | number
+	value?: string | number
+	icon?: string
+	style?: ObjectType
+}
+
+export type ButtonSelectConfigType = {
+	options?: (ButtonOptionsItemType | number | string)[]
+	width?: number | ''
+	maxHeight?: number | ''
+}
+
+export type ButtonDisplayConfigType = {
+	options?: (ButtonOptionsItemType | number | string)[]
+	width?: number | ''
+	maxHeight?: number | ''
+	value?: string | number
+}
+
+export const ButtonProps = {
+	//按钮类型
+	type: {
+		type: String as PropType<ButtonTypeType>,
+		default: 'default',
+		validator(value: any) {
+			//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 as PropType<ButtonSelectConfigType>,
+		default: null
+	},
+	//type=display时的配置
+	displayConfig: {
+		type: Object as PropType<ButtonDisplayConfigType>,
+		default: null
+	},
+	//浮层隐藏滚动条
+	hideScroll: {
+		type: Boolean,
+		default: false
+	}
+}
+
+export type ButtonPropsType = ExtractPublicPropTypes<typeof ButtonProps>

package/src/components/checkbox/checkbox.less

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

package/src/components/checkbox/checkbox.vue

@@ -0,0 +1,68 @@
+<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 setup lang="ts">
+import { common as DapCommon } from 'dap-util'
+import Icon from '../icon/icon.vue'
+import { CheckboxProps } from './props'
+import { computed } from 'vue'
+import { ObjectType } from '../../core/tool'
+
+defineOptions({
+	name: 'Checkbox'
+})
+const props = defineProps(CheckboxProps)
+const emits = defineEmits(['update:modelValue', 'change'])
+
+const check = computed<boolean>(() => {
+	if (typeof props.modelValue == 'boolean') {
+		return props.modelValue
+	}
+	if (Array.isArray(props.modelValue)) {
+		//数组中是否已包含此复选框的值
+		return props.modelValue.some(item => {
+			return DapCommon.equal(item, props.value)
+		})
+	}
+	return false
+})
+const itemStyle = computed<ObjectType>(() => {
+	let style: ObjectType = {}
+	if (props.color && check.value && !props.disabled) {
+		style.backgroundColor = props.color
+		style.borderColor = props.color
+	}
+	return style
+})
+
+const change = (event: Event) => {
+	if (Array.isArray(props.modelValue)) {
+		let arr = [...props.modelValue]
+		//勾选且不包含
+		if ((<HTMLInputElement>event.target).checked && !check.value) {
+			arr.push(props.value)
+		}
+		//取消且包含
+		else if (check.value) {
+			arr = arr.filter(item => {
+				return !DapCommon.equal(item, props.value)
+			})
+		}
+		emits('update:modelValue', arr)
+		emits('change', arr)
+	} else if (typeof props.modelValue == 'boolean') {
+		emits('update:modelValue', (<HTMLInputElement>event.target).checked)
+		emits('change', (<HTMLInputElement>event.target).checked)
+	}
+}
+</script>
+
+<style scoped src="./checkbox.less"></style>

package/src/components/checkbox/props.ts

@@ -0,0 +1,49 @@
+import { ExtractPublicPropTypes, PropType } from 'vue'
+import { ObjectType } from '../../core/tool'
+import { common as DapCommon } from 'dap-util'
+
+export const CheckboxProps = {
+	//是否禁用
+	disabled: {
+		type: Boolean,
+		default: false
+	},
+	//是否选中
+	modelValue: {
+		type: [Boolean, Array] as PropType<boolean | any[]>,
+		default: false
+	},
+	//label文字
+	label: {
+		type: String,
+		default: null
+	},
+	//值
+	value: {
+		type: [Object, Number, String, Array] as PropType<ObjectType | number | string | any[]>,
+		default: ''
+	},
+	//是否圆形
+	round: {
+		type: Boolean,
+		default: false
+	},
+	//文字位置
+	placement: {
+		type: String as PropType<'left' | 'right'>,
+		default: 'right',
+		validator(value: any) {
+			return ['left', 'right'].includes(value)
+		}
+	},
+	//主题颜色
+	color: {
+		type: String,
+		default: '',
+		validator(value: any) {
+			return DapCommon.matchingText(value, 'hex')
+		}
+	}
+}
+
+export type CheckboxPropsType = ExtractPublicPropTypes<typeof CheckboxProps>

package/src/components/colors/colors.less

@@ -0,0 +1,75 @@
+.editify-colors {
+	display: block;
+	color: @font-color;
+	font-size: @font-size;
+	padding: 6px 10px;
+	box-sizing: border-box;
+	width: 244px;
+
+	.editify-colors-header {
+		display: flex;
+		justify-content: flex-start;
+		align-items: center;
+		position: relative;
+		padding: 6px 10px;
+		transform: all 200ms;
+		margin-bottom: 10px;
+		opacity: 0.8;
+
+		&::after {
+			content: '';
+			width: 100%;
+			height: 1px;
+			background-color: @background-darker;
+			position: absolute;
+			left: 0;
+			bottom: -5px;
+		}
+
+		:deep(.editify-icon) {
+			margin-right: 10px;
+		}
+
+		&:hover {
+			cursor: pointer;
+			background-color: @background-dark;
+			opacity: 1;
+		}
+
+		&:active {
+			opacity: 1;
+			background-color: @background-darker;
+		}
+	}
+
+	.editify-colors-list {
+		display: flex;
+		justify-content: flex-start;
+		flex-wrap: wrap;
+
+		.editify-color {
+			display: block;
+			padding: 4px;
+			border: 1px solid transparent;
+			border-radius: 2px;
+
+			&.active {
+				border-color: @font-color-light;
+			}
+
+			.editify-color-el {
+				display: block;
+				width: 16px;
+				height: 16px;
+				border: 1px solid @border-color;
+				border-radius: 2px;
+				cursor: pointer;
+				transition: all 200ms;
+
+				&:hover {
+					transform: scale(1.2);
+				}
+			}
+		}
+	}
+}

package/src/components/colors/colors.vue

@@ -0,0 +1,36 @@
+<template>
+	<div class="editify-colors">
+		<div class="editify-colors-header" @click="selectColor({ value: '' })">
+			<Icon value="remove"></Icon>
+			<span>{{ $editTrans('defaultColor') }}</span>
+		</div>
+		<div class="editify-colors-list">
+			<div class="editify-color" :class="{ active: value == item.value }" v-for="item in data" :style="{ borderColor: value == item.value ? color : '' }">
+				<Tooltip block :content="<string>item.label" :disabled="!tooltip">
+					<div @click="selectColor(item)" class="editify-color-el" :style="{ background: item.value }"></div>
+				</Tooltip>
+			</div>
+		</div>
+	</div>
+</template>
+<script setup lang="ts">
+import { inject } from 'vue'
+import Icon from '../icon/icon.vue'
+import Tooltip from '../tooltip/tooltip.vue'
+import { ColorsProps } from './props'
+import { ButtonOptionsItemType } from '../button/props'
+
+defineOptions({
+	name: 'Colors'
+})
+defineProps(ColorsProps)
+const emits = defineEmits(['change'])
+
+const $editTrans = inject<(key: string) => any>('$editTrans')!
+
+//选择颜色
+const selectColor = (item: ButtonOptionsItemType) => {
+	emits('change', item.value)
+}
+</script>
+<style scoped src="./colors.less"></style>

package/src/components/colors/props.ts

@@ -0,0 +1,29 @@
+import { ExtractPublicPropTypes, PropType } from 'vue'
+import { ButtonOptionsItemType } from '../button/props'
+
+export const ColorsProps = {
+	//颜色数组
+	data: {
+		type: Array as PropType<ButtonOptionsItemType[]>,
+		default: function () {
+			return []
+		}
+	},
+	//选中的颜色
+	value: {
+		type: String,
+		default: null
+	},
+	//激活状态颜色
+	color: {
+		type: String,
+		default: ''
+	},
+	//是否使用工具提示
+	tooltip: {
+		type: Boolean,
+		default: false
+	}
+}
+
+export type ColorsPropsType = ExtractPublicPropTypes<typeof ColorsProps>

package/src/components/{base/Icon.vue → icon/icon.less}

@@ -1,19 +1,3 @@
-<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');
@@ -28,4 +12,3 @@ export default {
 	line-height: 1;
 	vertical-align: middle;
 }
-</style>

package/src/components/icon/icon.vue

@@ -0,0 +1,12 @@
+<template>
+	<i class="editify-icon" :class="'editify-icon-' + value"></i>
+</template>
+<script setup lang="ts">
+import { IconProps } from './props'
+
+defineOptions({
+	name: 'Icon'
+})
+defineProps(IconProps)
+</script>
+<style scoped src="./icon.less"></style>

package/src/components/icon/props.ts

@@ -0,0 +1,11 @@
+import { ExtractPublicPropTypes } from 'vue'
+
+export const IconProps = {
+	//图标值
+	value: {
+		type: String,
+		default: ''
+	}
+}
+
+export type IconPropsType = ExtractPublicPropTypes<typeof IconProps>