vue-editify 0.1.25 → 0.1.27

package/src/plugins/attachment/insertAttachment/insertAttachment.less

@@ -8,9 +8,10 @@
 		justify-content: flex-start;
 		align-items: center;
 		width: 100%;
-		margin-bottom: 20px;
+		margin-bottom: 10px;
 		position: relative;
 		padding-bottom: 6px;
+		user-select: none;
 
 		.editify-attachment-header-slider {
 			position: absolute;
@@ -107,29 +108,57 @@
 
 	.editify-attachment-upload {
 		display: flex;
-		justify-content: center;
-		align-items: center;
+		justify-content: space-between;
+		align-items: flex-end;
 		width: 100%;
 		padding: 15px 0;
-		font-size: 36px;
-		opacity: 0.8;
-		transition: all 200ms;
-		position: relative;
 
-		&:hover {
-			cursor: pointer;
-			opacity: 1;
+		input[type='text'] {
+			appearance: none;
+			-webkit-appearance: none;
+			-moz-appearance: none;
+			display: block;
+			width: 100%;
+			margin: 0;
+			padding: 4px 2px;
+			border: none;
+			font-size: @font-size;
+			color: @font-color;
+			border-bottom: 1px solid @border-color;
+			line-height: 1.5;
+			transition: border-color 500ms;
+			background-color: transparent;
+			outline: none;
+			box-sizing: border-box;
+
+			&::-webkit-input-placeholder,
+			&::placeholder {
+				color: @font-color-disabled;
+				font-family: inherit;
+				font-size: inherit;
+				vertical-align: middle;
+			}
 		}
 
-		input {
-			opacity: 0;
-			position: absolute;
-			left: 0;
-			top: 0;
-			width: 100%;
-			height: 100%;
-			z-index: 1;
-			cursor: pointer;
+		.editify-attachment-btn {
+			position: relative;
+			font-size: 20px;
+			line-height: 1;
+			opacity: 0.8;
+			transition: all 200ms;
+			color: @font-color;
+			border-radius: 2px;
+			padding: 2px;
+			margin-left: 15px;
+
+			&:hover {
+				cursor: pointer;
+				opacity: 1;
+			}
+
+			input[type='file'] {
+				display: none;
+			}
 		}
 	}
 }

package/src/plugins/attachment/insertAttachment/insertAttachment.vue

@@ -5,17 +5,21 @@
 			<div @click="current = 'remote'" class="editify-attachment-header-item" :class="{ 'editify-active': current == 'remote' }" :style="activeStyle('remote')">{{ $editTrans('remoteAttachment') }}</div>
 			<div class="editify-attachment-header-slider" :class="'editify-' + current" :style="{ backgroundColor: color || '' }"></div>
 		</div>
-		<!-- 网络图片 -->
+		<!-- 远程地址 -->
 		<div class="editify-attachment-remote" v-if="current == 'remote'">
-			<input v-model.trim="remoteUrl" :placeholder="$editTrans('attachmentUrlPlaceholder')" @blur="handleInputBlur" @focus="handleInputFocus" />
+			<input v-model.trim="attachmentName" :placeholder="$editTrans('attachmentNamePlaceholder')" @blur="handleInputBlur" @focus="handleInputFocus" type="text" />
+			<input v-model.trim="attachmentUrl" :placeholder="$editTrans('attachmentUrlPlaceholder')" @blur="handleInputBlur" @focus="handleInputFocus" type="url" />
 			<div class="editify-attachment-remote-footer" :style="{ color: color || '' }">
 				<span @click="insertRemoteAttachment">{{ $editTrans('insert') }}</span>
 			</div>
 		</div>
-		<!-- 上传图片 -->
+		<!-- 上传地址 -->
 		<div class="editify-attachment-upload" v-else>
-			<Icon value="upload"></Icon>
-			<input :multiple="multiple" :accept="acceptValue" @change="selectFile" type="file" />
+			<input v-model.trim="attachmentName" :placeholder="$editTrans('attachmentNamePlaceholder')" @blur="handleInputBlur" @focus="handleInputFocus" type="text" />
+			<div class="editify-attachment-btn" @click="triggerFileInput">
+				<Icon value="upload"></Icon>
+				<input ref="fileInputRef" :multiple="multiple" :accept="accept" @change="selectFile" type="file" />
+			</div>
 		</div>
 	</div>
 </template>
@@ -36,8 +40,12 @@ const $editTrans = inject<(key: string) => any>('$editTrans')!
 
 //当前展示的面板，取值remote和upload
 const current = ref<'remote' | 'upload'>('upload')
-//远程图片链接
-const remoteUrl = ref<string>('')
+//附件名称
+const attachmentName = ref<string>('')
+//附件远程地址
+const attachmentUrl = ref<string>('')
+//文件选择框
+const fileInputRef = ref<HTMLInputElement | null>(null)
 
 const activeStyle = computed<(name: 'remote' | 'upload') => ObjectType>(() => {
 	return (name: 'remote' | 'upload') => {
@@ -49,47 +57,6 @@ const activeStyle = computed<(name: 'remote' | 'upload') => ObjectType>(() => {
 		return {}
 	}
 })
-const acceptValue = computed<string | undefined>(() => {
-	if (props.accept === 'rar') {
-		return 'application/x-rar-compressed'
-	}
-	if (props.accept === 'zip') {
-		return 'application/x-zip-compressed'
-	}
-	if (props.accept === 'txt') {
-		return 'text/plain'
-	}
-	if (props.accept === 'image') {
-		return 'image/*'
-	}
-	if (props.accept === 'video') {
-		return 'video/*'
-	}
-	if (props.accept === 'audio') {
-		return 'aduio/*'
-	}
-	if (props.accept === 'html') {
-		return 'text/html'
-	}
-	if (props.accept === 'doc') {
-		return 'application/msword'
-	}
-	if (props.accept === 'xml') {
-		return 'text/xml'
-	}
-	if (props.accept === 'js') {
-		return 'text/javascript'
-	}
-	if (props.accept === 'json') {
-		return 'application/json'
-	}
-	if (props.accept === 'ppt') {
-		return 'application/vnd.ms-powerpoint'
-	}
-	if (props.accept === 'pdf') {
-		return 'application/pdf'
-	}
-})
 
 //获取文件后缀
 const getSuffix = (file: File) => {
@@ -102,21 +69,24 @@ const getSuffix = (file: File) => {
 //输入框获取焦点
 const handleInputFocus = (e: Event) => {
 	if (props.color) {
-		;(<HTMLInputElement>e.currentTarget).style.borderColor = props.color
+		;(e.currentTarget as HTMLInputElement).style.borderColor = props.color
 	}
 }
 //输入框失去焦点
 const handleInputBlur = (e: Event) => {
-	;(<HTMLInputElement>e.currentTarget).style.borderColor = ''
+	;(e.currentTarget as HTMLInputElement).style.borderColor = ''
 }
 //插入网络文件
 const insertRemoteAttachment = () => {
-	emits('insert', remoteUrl.value)
+	emits('insert', attachmentName.value, attachmentUrl.value)
+}
+//触发文件选择框
+const triggerFileInput = () => {
+	fileInputRef.value!.click()
 }
 //选择文件
-const selectFile = async (e: Event) => {
-	const inputEle = <HTMLInputElement>e.currentTarget
-	const files = inputEle.files
+const selectFile = async () => {
+	const files = fileInputRef.value!.files
 	if (!files || !files.length) {
 		return
 	}
@@ -171,11 +141,11 @@ const selectFile = async (e: Event) => {
 			}
 		}
 		attachments.forEach(url => {
-			emits('insert', url)
+			emits('insert', attachmentName.value, url)
 		})
 	}
 	//清空文件选择框
-	inputEle.value = ''
+	fileInputRef.value!.value = ''
 }
 
 //监听current变更触发change事件

package/src/plugins/attachment/insertAttachment/props.ts

@@ -10,7 +10,7 @@ export const InsertAttachmentProps = {
 	},
 	//可选择的文件类型
 	accept: {
-		type: String as PropType<'rar' | 'zip' | 'txt' | 'image' | 'video' | 'audio' | 'html' | 'doc' | 'xml' | 'js' | 'json' | 'ppt' | 'pdf' | null>,
+		type: String,
 		default: null
 	},
 	//支持的类型数组

package/vite.config.ts.timestamp-1714200628309-967ea10c27215.mjs

@@ -0,0 +1,48 @@
+// vite.config.ts
+import { defineConfig } from "file:///Users/lingkai/Desktop/%E5%89%8D%E7%AB%AF%E5%BA%93/vue-editify/node_modules/vite/dist/node/index.js";
+import vue from "file:///Users/lingkai/Desktop/%E5%89%8D%E7%AB%AF%E5%BA%93/vue-editify/node_modules/@vitejs/plugin-vue/dist/index.mjs";
+import dts from "file:///Users/lingkai/Desktop/%E5%89%8D%E7%AB%AF%E5%BA%93/vue-editify/node_modules/vite-plugin-dts/dist/index.mjs";
+import path from "path";
+var __vite_injected_original_dirname = "/Users/lingkai/Desktop/\u524D\u7AEF\u5E93/vue-editify";
+var vite_config_default = defineConfig({
+  plugins: [vue(), dts()],
+  build: {
+    //打包后的目录名称
+    outDir: "lib",
+    minify: "terser",
+    lib: {
+      entry: path.resolve(__vite_injected_original_dirname, "src/index.ts"),
+      name: "editify",
+      fileName: (format) => `editify.${format}.js`
+    },
+    rollupOptions: {
+      // 确保外部化处理那些你不想打包进库的依赖
+      external: ["vue"],
+      output: {
+        // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
+        globals: {
+          vue: "Vue"
+        },
+        exports: "named"
+      }
+    },
+    sourcemap: false
+    //是否构建source map 文件
+  },
+  css: {
+    preprocessorOptions: {
+      less: {
+        // 使用 less 编写样式的 UI 库（如 antd）时建议加入这个设置
+        javascriptEnabled: true,
+        additionalData: `@import "src/css/base.less";`
+      }
+    }
+  },
+  server: {
+    host: "0.0.0.0"
+  }
+});
+export {
+  vite_config_default as default
+};
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCIvVXNlcnMvbGluZ2thaS9EZXNrdG9wL1x1NTI0RFx1N0FFRlx1NUU5My92dWUtZWRpdGlmeVwiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9maWxlbmFtZSA9IFwiL1VzZXJzL2xpbmdrYWkvRGVza3RvcC9cdTUyNERcdTdBRUZcdTVFOTMvdnVlLWVkaXRpZnkvdml0ZS5jb25maWcudHNcIjtjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfaW1wb3J0X21ldGFfdXJsID0gXCJmaWxlOi8vL1VzZXJzL2xpbmdrYWkvRGVza3RvcC8lRTUlODklOEQlRTclQUIlQUYlRTUlQkElOTMvdnVlLWVkaXRpZnkvdml0ZS5jb25maWcudHNcIjtpbXBvcnQgeyBkZWZpbmVDb25maWcgfSBmcm9tICd2aXRlJ1xuaW1wb3J0IHZ1ZSBmcm9tICdAdml0ZWpzL3BsdWdpbi12dWUnXG5pbXBvcnQgZHRzIGZyb20gJ3ZpdGUtcGx1Z2luLWR0cydcbmltcG9ydCBwYXRoIGZyb20gJ3BhdGgnXG5cbmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbmZpZyh7XG5cdHBsdWdpbnM6IFt2dWUoKSwgZHRzKCldLFxuXHRidWlsZDoge1xuXHRcdC8vXHU2MjUzXHU1MzA1XHU1NDBFXHU3Njg0XHU3NkVFXHU1RjU1XHU1NDBEXHU3OUYwXG5cdFx0b3V0RGlyOiAnbGliJyxcblx0XHRtaW5pZnk6ICd0ZXJzZXInLFxuXHRcdGxpYjoge1xuXHRcdFx0ZW50cnk6IHBhdGgucmVzb2x2ZShfX2Rpcm5hbWUsICdzcmMvaW5kZXgudHMnKSxcblx0XHRcdG5hbWU6ICdlZGl0aWZ5Jyxcblx0XHRcdGZpbGVOYW1lOiBmb3JtYXQgPT4gYGVkaXRpZnkuJHtmb3JtYXR9LmpzYFxuXHRcdH0sXG5cdFx0cm9sbHVwT3B0aW9uczoge1xuXHRcdFx0Ly8gXHU3ODZFXHU0RkREXHU1OTE2XHU5MEU4XHU1MzE2XHU1OTA0XHU3NDA2XHU5MEEzXHU0RTlCXHU0RjYwXHU0RTBEXHU2MEYzXHU2MjUzXHU1MzA1XHU4RkRCXHU1RTkzXHU3Njg0XHU0RjlEXHU4RDU2XG5cdFx0XHRleHRlcm5hbDogWyd2dWUnXSxcblx0XHRcdG91dHB1dDoge1xuXHRcdFx0XHQvLyBcdTU3MjggVU1EIFx1Njc4NFx1NUVGQVx1NkEyMVx1NUYwRlx1NEUwQlx1NEUzQVx1OEZEOVx1NEU5Qlx1NTkxNlx1OTBFOFx1NTMxNlx1NzY4NFx1NEY5RFx1OEQ1Nlx1NjNEMFx1NEY5Qlx1NEUwMFx1NEUyQVx1NTE2OFx1NUM0MFx1NTNEOFx1OTFDRlxuXHRcdFx0XHRnbG9iYWxzOiB7XG5cdFx0XHRcdFx0dnVlOiAnVnVlJ1xuXHRcdFx0XHR9LFxuXHRcdFx0XHRleHBvcnRzOiAnbmFtZWQnXG5cdFx0XHR9XG5cdFx0fSxcblx0XHRzb3VyY2VtYXA6IGZhbHNlIC8vXHU2NjJGXHU1NDI2XHU2Nzg0XHU1RUZBc291cmNlIG1hcCBcdTY1ODdcdTRFRjZcblx0fSxcblx0Y3NzOiB7XG5cdFx0cHJlcHJvY2Vzc29yT3B0aW9uczoge1xuXHRcdFx0bGVzczoge1xuXHRcdFx0XHQvLyBcdTRGN0ZcdTc1MjggbGVzcyBcdTdGMTZcdTUxOTlcdTY4MzdcdTVGMEZcdTc2ODQgVUkgXHU1RTkzXHVGRjA4XHU1OTgyIGFudGRcdUZGMDlcdTY1RjZcdTVFRkFcdThCQUVcdTUyQTBcdTUxNjVcdThGRDlcdTRFMkFcdThCQkVcdTdGNkVcblx0XHRcdFx0amF2YXNjcmlwdEVuYWJsZWQ6IHRydWUsXG5cdFx0XHRcdGFkZGl0aW9uYWxEYXRhOiBgQGltcG9ydCBcInNyYy9jc3MvYmFzZS5sZXNzXCI7YFxuXHRcdFx0fVxuXHRcdH1cblx0fSxcblx0c2VydmVyOiB7XG5cdFx0aG9zdDogJzAuMC4wLjAnXG5cdH1cbn0pXG4iXSwKICAibWFwcGluZ3MiOiAiO0FBQTRULFNBQVMsb0JBQW9CO0FBQ3pWLE9BQU8sU0FBUztBQUNoQixPQUFPLFNBQVM7QUFDaEIsT0FBTyxVQUFVO0FBSGpCLElBQU0sbUNBQW1DO0FBS3pDLElBQU8sc0JBQVEsYUFBYTtBQUFBLEVBQzNCLFNBQVMsQ0FBQyxJQUFJLEdBQUcsSUFBSSxDQUFDO0FBQUEsRUFDdEIsT0FBTztBQUFBO0FBQUEsSUFFTixRQUFRO0FBQUEsSUFDUixRQUFRO0FBQUEsSUFDUixLQUFLO0FBQUEsTUFDSixPQUFPLEtBQUssUUFBUSxrQ0FBVyxjQUFjO0FBQUEsTUFDN0MsTUFBTTtBQUFBLE1BQ04sVUFBVSxZQUFVLFdBQVcsTUFBTTtBQUFBLElBQ3RDO0FBQUEsSUFDQSxlQUFlO0FBQUE7QUFBQSxNQUVkLFVBQVUsQ0FBQyxLQUFLO0FBQUEsTUFDaEIsUUFBUTtBQUFBO0FBQUEsUUFFUCxTQUFTO0FBQUEsVUFDUixLQUFLO0FBQUEsUUFDTjtBQUFBLFFBQ0EsU0FBUztBQUFBLE1BQ1Y7QUFBQSxJQUNEO0FBQUEsSUFDQSxXQUFXO0FBQUE7QUFBQSxFQUNaO0FBQUEsRUFDQSxLQUFLO0FBQUEsSUFDSixxQkFBcUI7QUFBQSxNQUNwQixNQUFNO0FBQUE7QUFBQSxRQUVMLG1CQUFtQjtBQUFBLFFBQ25CLGdCQUFnQjtBQUFBLE1BQ2pCO0FBQUEsSUFDRDtBQUFBLEVBQ0Q7QUFBQSxFQUNBLFFBQVE7QUFBQSxJQUNQLE1BQU07QUFBQSxFQUNQO0FBQ0QsQ0FBQzsiLAogICJuYW1lcyI6IFtdCn0K