vue-editify 0.1.19 → 0.1.20

package/src/components/checkbox/checkbox.less

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

@@ -1,68 +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>
+<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

@@ -1,49 +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>
+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

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

@@ -1,36 +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>
+<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>