vue-editify 0.1.10 → 0.1.13

package/src/components/menu/props.ts

@@ -0,0 +1,17 @@
+import { ExtractPublicPropTypes, PropType } from 'vue'
+import { MenuConfigType } from '../../core/tool'
+
+export const MenuProps = {
+	//菜单栏配置
+	config: {
+		type: Object as PropType<MenuConfigType>,
+		default: null
+	},
+	//主题色
+	color: {
+		type: String,
+		default: ''
+	}
+}
+
+export type MenuPropsType = ExtractPublicPropTypes<typeof MenuProps>

package/src/components/toolbar/props.ts

@@ -0,0 +1,35 @@
+import { ExtractPublicPropTypes, PropType } from 'vue'
+import { ToolbarConfigType } from '../../core/tool'
+
+export const ToolbarProps = {
+	//是否显示
+	modelValue: {
+		type: Boolean,
+		default: false
+	},
+	//关联元素
+	node: {
+		type: [String, Node] as PropType<string | HTMLElement>,
+		default: null
+	},
+	//类型
+	type: {
+		type: String as PropType<'text' | 'table' | 'link' | 'codeBlock' | 'image' | 'video'>,
+		default: 'text',
+		validator(value: any) {
+			return ['text', 'table', 'link', 'codeBlock', 'image', 'video'].includes(value)
+		}
+	},
+	//工具条配置
+	config: {
+		type: Object as PropType<ToolbarConfigType>,
+		default: null
+	},
+	//主题色
+	color: {
+		type: String,
+		default: ''
+	}
+}
+
+export type ToolbarPropsType = ExtractPublicPropTypes<typeof ToolbarProps>

package/src/components/toolbar/toolbar.less

@@ -0,0 +1,89 @@
+.editify-toolbar {
+	display: flex;
+	justify-content: flex-start;
+	align-items: center;
+	padding: 6px 10px;
+
+	.editify-icon-rotate {
+		transform: rotate(180deg);
+	}
+}
+
+.editify-toolbar-link {
+	display: block;
+	width: 280px;
+	padding: 4px;
+
+	.editify-toolbar-link-label {
+		display: block;
+		text-align: left;
+		margin-bottom: 10px;
+		font-size: @font-size;
+		color: @font-color;
+	}
+
+	input {
+		appearance: none;
+		-webkit-appearance: none;
+		-moz-appearance: none;
+		display: block;
+		width: 100%;
+		margin: 0 0 10px 0;
+		padding: 4px 2px;
+		border: none;
+		font-size: @font-size;
+		color: @font-color;
+		border-bottom: 1px solid @border-color;
+		line-height: 1.5;
+		transition: all 500ms;
+		background-color: transparent;
+		outline: none;
+
+		&::-webkit-input-placeholder,
+		&::placeholder {
+			color: @font-color-disabled;
+			font-family: inherit;
+			font-size: inherit;
+			vertical-align: middle;
+		}
+
+		&[disabled] {
+			background-color: transparent;
+			opacity: 0.6;
+		}
+	}
+
+	.editify-toolbar-link-footer {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		width: 100%;
+		font-size: @font-size;
+		color: @font-color-light;
+
+		.editify-toolbar-link-operations {
+			display: flex;
+			justify-content: flex-start;
+			align-items: center;
+
+			& > span,
+			& > a {
+				cursor: pointer;
+				opacity: 0.8;
+				transition: all 200ms;
+
+				&:hover {
+					opacity: 1;
+				}
+			}
+
+			& > span {
+				margin-right: 15px;
+			}
+
+			& > a {
+				text-decoration: none;
+			}
+		}
+	}
+}