@mixd-id/web-scaffold 0.1.230406002 → 0.1.230406004

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.1.230406002",
+  "version": "0.1.230406004",
   "scripts": {
     "dev": "vite serve",
     "build": "vite build",

package/src/components/HTMLEditor.vue

@@ -26,6 +26,9 @@
 			<button class="p-3" type="button" @click="createLink">
 				<svg width="14" height="14" class="fill-text-400 hover:fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z"/></svg>
 			</button>
+			<button class="p-3" type="button" @click="removeFormat">
+				<svg width="14" height="14" class="fill-text-400 hover:fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg>
+			</button>
 		</div>
 
 		<ContextMenu ref="headingContext">
@@ -105,7 +108,7 @@
 		  </template>
 		  <div class="flex-1 flex flex-col gap-5 p-5">
 				<div>
-					<Image class="min-h-[100px] bg-base-300 rounded-xl" ref="image" :src="newImage.file" editable="true"
+					<Image class="min-h-[100px] bg-base-300 rounded-xl" ref="image" :src="newImage.src" editable="true"
 						 @click="$refs.image.edit()" @change="onImageChanged">
 					  <template #empty="{ instance }">
 							<div class="absolute right-0 top-0 bottom-0 left-0 flex items-center justify-center">
@@ -135,7 +138,7 @@
 		  </div>
 		</Modal>
 
-		<Modal ref="linkModal" width="360" height="360" dismissable="true">
+		<Modal ref="linkModal" width="360" height="400" dismissable="true">
 			<template v-slot:head>
 				<div class="relative p-5">
 					<h3>Add Link</h3>
@@ -149,8 +152,9 @@
 				</div>
 			</template>
 			<template v-slot:foot>
-				<div class="p-5">
-					<Button class="w-full" :disabled="!linkCanSave" @click="addLink">Add Link</Button>
+				<div class="p-5 flex flex-row gap-3">
+					<Button variant="secondary" class="w-[100px]" :disabled="!linkCanSave" @click="removeLink">Remove</Button>
+					<Button class="flex-1" :disabled="!linkCanSave" @click="addLink">Add Link</Button>
 				</div>
 			</template>
 			<div class="flex-1 flex flex-col gap-5 p-5">
@@ -174,8 +178,8 @@
 			</div>
 		</Modal>
 
-		<article ref="article" contenteditable="true" v-html="html" @paste="onPaste"
-				@input="onInput"
+		<article ref="article" contenteditable="true" v-html="html" @paste="onPaste" spellcheck="false"
+				@input="onInput" @click="onClick"
 				@blur="onBlur">
 		</article>
 
@@ -184,13 +188,16 @@
 
 <script>
 
-import * as Vue from "vue/dist/vue.esm-bundler";
 import {restoreSelection, saveSelection} from "../utils/selection";
 import {downsizeImage} from "../utils/helpers.mjs";
 import axios from "axios";
 
 export default{
 
+	emits: [ 'change', 'update:modelValue' ],
+
+	inject: [ 'alert' ],
+
 	props:{
 		modelValue: String,
 		uploadImage: String
@@ -228,6 +235,27 @@ export default{
 			this.updateModelValue()
 		},
 
+		onClick(e){
+
+			if(e.target.tagName === 'IMG'){
+				this.newImage = {
+					src: e.target.src,
+					width: e.target.getAttribute('width'),
+					height: e.target.getAttribute('height'),
+					maxWidth: e.target.style.maxWidth,
+					maxHeight: e.target.style.maxHeight,
+					element: e.target
+				}
+			}
+			else{
+				this.newImage = {
+					width: "",
+					height: "",
+					element: null
+				}
+			}
+		},
+
 		onBlur(){
 			this.$emit('change')
 		},
@@ -249,16 +277,25 @@ export default{
 
 		createLink(){
 
-			const { text = '' } = saveSelection(this.$refs.article)
+			let { text = '', element, href = 'https://', target = '' } = saveSelection(this.$refs.article)
+
+			if(element && element.parentNode && element.parentNode.tagName === 'A'){
+				href = element.parentNode.href
+				target = element.parentNode.target
+			}
 
 			this.newLink = {
-				href: 'https://',
+				href,
 				text,
-				target: ''
+				target
 			}
 			this.$refs.linkModal.open()
 		},
 
+		removeFormat(){
+			document.execCommand('removeFormat', false);
+		},
+
 		addLink(){
 
 			restoreSelection()
@@ -274,20 +311,29 @@ export default{
 			this.$refs.linkModal.close()
 		},
 
+		removeLink(){
+
+			const { element } = saveSelection(this.$refs.article)
+
+			if(element && element.parentNode && element.parentNode.tagName === 'A'){
+				element.parentNode.parentNode.replaceChild(element, element.parentNode)
+			}
+
+			this.newLink = null
+			this.$refs.linkModal.close()
+
+			this.updateModelValue()
+		},
+
 		createImage(){
 
 			saveSelection(this.$refs.article)
 
-			this.newImage = {
-				width: "",
-				height: ""
-			}
 			this.$refs.imageModal.open()
 		},
 
 		onImageChanged(base64, file){
-			this.newImage.base64 = base64
-			this.newImage.file = file
+			this.newImage.src = file
 		},
 
 		onImageAdd(){
@@ -322,39 +368,52 @@ export default{
 
 		async saveImage(){
 
-			const blob = await downsizeImage(this.newImage.file, this.newImage.width ?? 600)
+			const blob = await downsizeImage(this.newImage.src, this.newImage.width ?? 600)
 
 			const data = new FormData()
 			data.append('image', blob)
 
-			const res = await axios.post(this.uploadImage,
-				data,
-				{
-					headers: {
-						"Content-Type": "multipart/form-data",
-					},
+			try{
+				const res = await axios.post(this.uploadImage,
+					data,
+					{
+						headers: {
+							"Content-Type": "multipart/form-data",
+						},
+					}
+				)
+
+				const { url } = res.data
+
+				restoreSelection()
+
+				const props = {}
+				if(this.newImage.width)
+					props.width = this.newImage.width
+				if(this.newImage.height)
+					props.height = this.newImage.height
+
+				let propHtml = []
+				for(let key in props){
+					propHtml.push(`${key}='${props[key]}'`)
 				}
-			)
-
-			const { url } = res.data
 
-			restoreSelection()
+				if(this.newImage.element){
+					const aDiv = document.createElement("div")
+					aDiv.innerHTML = "<img src=\"" + url + "\" " + propHtml.join(' ') + "/>"
+					this.newImage.element.parentNode.replaceChild(aDiv.firstChild, this.newImage.element)
+				}
 
-			const props = {}
-			if(this.newImage.width)
-				props.width = this.newImage.width
-			if(this.newImage.height)
-				props.height = this.newImage.height
+				else{
+					document.execCommand("insertHTML", false,
+						"<img src=\"" + url + "\" " + propHtml.join(' ') + "/>");
+				}
 
-			let propHtml = []
-			for(let key in props){
-				propHtml.push(`${key}='${props[key]}'`)
+				this.$refs.imageModal.close()
+			}
+			catch(e){
+				this.alert(e.response.data)
 			}
-
-			document.execCommand("insertHTML", false,
-				"<img src=\"" + url + "\" " + propHtml.join(' ') + "/>");
-
-			this.$refs.imageModal.close()
 		},
 
 		onPaste(e){
@@ -373,7 +432,7 @@ export default{
 		updateModelValue(){
 
 			let html = this.$refs.article.innerHTML
-			html = html.replaceAll("<a ", "<Ahref ").replaceAll("</a>", "</Ahref>")
+			//html = html.replaceAll("<a ", "<Ahref ").replaceAll("</a>", "</Ahref>")
 
 			this.$emit('update:modelValue', html)
 		}
@@ -387,10 +446,20 @@ export default{
 <style module>
 
 .comp{
+	@apply flex-1 flex flex-col;
 }
 
 .comp article {
-	@apply min-h-[var(--h-cp)] w-full outline-none p-2;
+	@apply min-h-[var(--h-cp)] w-full outline-none p-2 leading-6;
+	@apply flex-1 overflow-auto;
+}
+
+.comp article a{
+	@apply text-primary underline;
+}
+
+.comp ol li{
+	@apply list-disc ml-6;
 }
 
 </style>

package/src/components/ListPage1.vue

@@ -550,10 +550,11 @@ import {urlQuery} from "../utils/helpers.mjs";
 import { Bar, Line } from 'vue-chartjs'
 import Chart from 'chart.js/auto'
 import dayjs from "dayjs";
+import VirtualTable from "./VirtualTable.vue";
 
 export default{
 
-	components: { Bar, Line },
+	components: { Bar, Line, VirtualTable },
 
 	inject: [ 'socket', 'confirm', 'alert', 'socketEmit', 'toast' ],
 
@@ -903,9 +904,9 @@ export default{
 	},
 
 	mounted() {
-		this.patch()
 		this.socket.onAny(this.onHooks)
 		window.addEventListener('focus', this.onFocus)
+		window.setTimeout(() => { this.patch() }, 300)
 	},
 
 	unmounted() {

package/src/utils/helpers.js

@@ -166,6 +166,28 @@ const bufferToStream = (buffer) => {
   return stream
 }
 
+const sequelizeChunk = async (model, opt, callback, chunkSize = 5000) => {
+
+  let offset = 0
+  let iter = 0
+  while(true){
+    const items = await model.findAll({
+      ...opt,
+      offset,
+      limit: chunkSize
+    })
+
+    if(items.length > 0){
+      await callback(items, iter)
+      offset += chunkSize
+      iter++
+    }
+    else{
+      break
+    }
+  }
+}
+
 
 module.exports = {
   ceil,
@@ -181,5 +203,6 @@ module.exports = {
   strSlug,
   strVars,
   writeStorage,
-  bufferToStream
+  bufferToStream,
+  sequelizeChunk
 }

package/src/utils/helpers.mjs

@@ -30,9 +30,9 @@ const csvToArray = (str, delimiter = null) => {
 const downsizeImage = async (url, targetWidth, imageType, quality, opt = {}) => {
 
   let defaultImageType = 'image/jpeg'
+  targetWidth = isNaN(parseInt(targetWidth)) ? 2048 : parseInt(targetWidth)
 
   if(url instanceof File){
-
     defaultImageType = url.type
 
     await (new Promise((resolve, reject) => {

package/src/utils/selection.js

@@ -16,7 +16,8 @@ const saveSelection = (container) =>{
     start: start,
     end: start + range.toString().length,
     container,
-    text: range.toString()
+    text: range.toString(),
+    element: range.startContainer
   }
 
   return selection
@@ -56,6 +57,8 @@ const restoreSelection = () => {
   const sel = window.getSelection();
   sel.removeAllRanges();
   sel.addRange(range);
+
+  return range
 }
 
 export {