@mixd-id/web-scaffold 0.1.2301231314 → 0.1.2301231316

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.1.2301231314",
+  "version": "0.1.2301231316",
   "scripts": {
     "dev": "vite serve",
     "build": "vite build",
@@ -28,6 +28,8 @@
     "express": "^4.18.1",
     "glob": "^8.0.3",
     "lodash": "^4.17.21",
+    "lodash-es": "^4.17.21",
+    "lodash.throttle": "^4.1.1",
     "nprogress": "^0.2.0",
     "pinia": "^2.0.14",
     "prismjs": "^1.28.0",

package/src/components/Dropdown.vue

@@ -48,6 +48,8 @@ export default {
 
 		position: String,
 
+		width: String,
+
 		state: {
 			type: [ Number, String ],
 			default: 1 // 1:normal, -1:disabled, -2:error
@@ -178,13 +180,17 @@ export default {
 
 .size-sm select,
 .size-sm input{
-	@apply p-2
+	@apply p-0;
 }
 
 .size-sm .arrow{
 	@apply p-2
 }
 
+.variant-transparent{
+	@apply bg-transparent border-transparent hover:border-transparent
+}
+
 .state--2{
 	@apply border-red-500
 }

package/src/components/Image.vue

@@ -1,8 +1,9 @@
 <template>
-  <span :class="$style.img">
+  <div :class="$style.img">
 		<img :class="computedClass" :src="actualSrc" ref="img" @click="onClick" :style="imageStyle"/>
 		<input v-if="Boolean(editable)" class="hidden" type="file" accept="image/*" ref="file" @change="onChange"/>
-	</span>
+		<slot></slot>
+	</div>
 </template>
 
 <script>
@@ -22,8 +23,6 @@ export default{
 
   props:{
 
-		class: String,
-
 		editable:{
 			type: [ Boolean, String ],
 			default: false
@@ -48,7 +47,6 @@ export default{
 
 		computedClass(){
 			return [
-				this.class,
 				this.$style.img
 			]
 				.join(' ')
@@ -154,5 +152,9 @@ export default{
 .img{
 }
 
+.img img{
+	height: 100%;
+}
+
 
 </style>

package/src/components/ListPage1.vue

@@ -173,7 +173,7 @@
 
 <script>
 
-import _ from "lodash";
+import throttle from "lodash.throttle";
 
 export default{
 
@@ -268,7 +268,7 @@ export default{
 			})
 		},
 
-		savePreset: _.throttle(function(preset) {
+		savePreset: throttle(function(preset) {
 			this.socket.emit('user.save-preset', { key:this.model, preset:{
 					presetIdx: this.presetIdx,
 					presets: this.presets

package/src/components/ListPage2.vue

@@ -180,7 +180,7 @@
 
 <script>
 
-import throttle from "lodash/throttle";
+import throttle from "lodash.throttle";
 import {parseBoolean} from "../helper";
 
 export default{

package/src/components/TextEditor.vue

@@ -0,0 +1,85 @@
+<template>
+	<div :class="$style.comp">
+		<Textbox v-model="modelValue.text" @blur="$emit('change')" class="border-none"/>
+		<div class="bg-base-300 flex flex-row gap-2 border-t-[1px] border-text-200 px-2">
+			<Dropdown v-model="modelValue.tagName" size="sm" variant="transparent">
+				<option value="default">Default</option>
+				<option value="h1">Heading 1</option>
+				<option value="h2">Heading 2</option>
+				<option value="h3">Heading 3</option>
+				<option value="h4">Heading 4</option>
+				<option value="h5">Heading 5</option>
+				<option value="custom">Custom</option>
+			</Dropdown>
+			<Dropdown v-if="modelValue.style && modelValue.tagName === 'custom'"
+								v-model="modelValue.style.fontFamily" size="sm" variant="transparent">
+				<option value="default">Default</option>
+				<option value="Arial">Arial</option>
+				<option value="Arial Black">Arial Black</option>
+				<option value="Impact">Impact</option>
+				<option value="Helvetica">Helvetica</option>
+			</Dropdown>
+			<Dropdown v-if="modelValue.style && modelValue.tagName === 'custom'"
+								v-model="modelValue.style.fontSize" size="sm" variant="transparent">
+				<option value="default">Default</option>
+				<option value="48px">48px</option>
+				<option value="42px">42px</option>
+				<option value="36px">36px</option>
+				<option value="32px">32px</option>
+				<option value="28px">28px</option>
+				<option value="24px">24px</option>
+				<option value="22px">22px</option>
+				<option value="21px">21px</option>
+				<option value="20px">20px</option>
+				<option value="18px">18px</option>
+				<option value="16px">16px</option>
+				<option value="14px">14px</option>
+				<option value="13px">13px</option>
+				<option value="12px">12px</option>
+				<option value="11px">11px</option>
+			</Dropdown>
+		</div>
+	</div>
+</template>
+
+<script>
+
+/**
+ * modelValue: { text:"", style:"", tagName:"" }
+ */
+
+export default{
+
+	props: {
+
+		modelValue: Object
+
+	},
+
+	mounted() {
+		if(this.modelValue){
+			if(!this.modelValue.style){
+				this.modelValue.style = {
+					fontFamily: 'default',
+					fontSize: 'default',
+				}
+			}
+
+			if(!this.modelValue.tagName){
+				this.modelValue.tagName = 'default'
+			}
+		}
+		console.log('mounted', this.modelValue)
+	}
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+	@apply flex flex-col border-[1px] border-text-200 bg-base-50 rounded-lg overflow-hidden;
+}
+
+</style>

package/src/components/Textbox.vue

@@ -3,7 +3,7 @@
 		<slot name="start"></slot>
 		<input :type="type" :disabled="isDisabled" @focus="isActive = true" @blur="onBlur"
 			:placeholder="placeholder" :maxlength="maxlength" ref="input" autocomplete="new-password"
-					 :value="modelValue" @input="$emit('update:modelValue', $event.target.value)"
+					 :value="modelValue ?? value" @input="onInput"
 			@keydown="onKeyDown"/>
 		<div v-if="!!(errors)">
 			<svg :class="$style.svg" width="24" height="24" class="fill-red-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
@@ -59,6 +59,8 @@ export default{
 
 		modelValue: [ String, Number ],
 
+		value: String,
+
 		placeholder: [ String, Number ],
 		maxlength: String,
 		type: String,
@@ -126,6 +128,11 @@ export default{
 			}
 		},
 
+		onInput(e){
+			this.$emit('update:modelValue', e.target.value)
+			this.$emit('change', e.target.value)
+		},
+
 		onBlur(){
 			this.isActive = false
 			this.$emit('blur')

package/src/components/VirtualScroll.vue

@@ -21,7 +21,7 @@
 
 <script>
 
-import throttle from "lodash/throttle"
+import throttle from "lodash.throttle"
 
 export default{
 

package/src/components/VirtualTable.vue

@@ -66,7 +66,7 @@
 
 <script>
 
-import throttle from "lodash/throttle";
+import throttle from "lodash.throttle";
 import dayjs from "dayjs";
 
 const _DEFAULT_COLUMN_WIDTH = '100px'

package/src/index.js

@@ -82,6 +82,7 @@ export default{
     app.component('VirtualTable', defineAsyncComponent(() => import("./components/VirtualTable.vue")))
     app.component('Slider', defineAsyncComponent(() => import("./components/Slider.vue")))
     app.component('TabView', defineAsyncComponent(() => import("./components/TabView.vue")))
+    app.component('TextEditor', defineAsyncComponent(() => import("./components/TextEditor.vue")))
     app.component('SplitPane', defineAsyncComponent(() => import("./components/SplitPane.vue")))