@mixd-id/web-scaffold 0.1.230406066 → 0.1.230406068

package/package.json

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

package/src/components/Checkbox.vue

@@ -2,7 +2,7 @@
 	<div :class="$style.comp">
 		<input :id="id" type="checkbox" :checked="checked" @change="onChange" :disabled="isDisabled"/>
 		<label :for="id">
-			<div :class="$style.indicator">
+			<div :class="$style.indicator" v-if="Boolean(showIcon)">
 				<Transition name="checkbox">
 					<div v-if="checked">
 						<svg width="14" height="14" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>
@@ -25,7 +25,11 @@ export default {
     value: undefined,
 		trueValue: undefined,
 		falseValue: undefined,
-		disabled: undefined
+		disabled: undefined,
+		showIcon: {
+			type: undefined,
+			default: true
+		}
 	},
 
 	computed: {

package/src/components/CodeEditor.vue

@@ -0,0 +1,62 @@
+<template>
+	<div :class="$style.comp">
+		<div class="flex flex-row bg-text-50 p-2">
+			<div class="flex-1">&nbsp;</div>
+		</div>
+		<code v-html="modelValue" contenteditable="true" spellcheck="false"
+					@paste="onPaste"></code>
+	</div>
+</template>
+
+<script>
+
+export default{
+
+	props:{
+
+		modelValue: String
+
+	},
+
+	methods: {
+
+		beautify(){
+			const html = JSON.parse(JSON.stringify(this.modelValue, null, 2))
+			console.log(html)
+			this.$emit('update:modelValue', html)
+		},
+
+		onPaste(e) {
+			e.preventDefault()
+
+			let text = (e.clipboardData || window.clipboardData).getData("text");
+			const el = document.createElement('div')
+			el.innerHTML = text
+			text = el.innerText
+
+			this.$emit('update:modelValue', text)
+		}
+
+	}
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+	@apply border-text-50 border-[1px] rounded-lg overflow-hidden flex flex-col;
+}
+
+.comp code{
+	@apply p-6 bg-base-300;
+	white-space: pre-wrap;
+	tab-size: 1rem;
+}
+
+.comp [contenteditable]{
+	outline: 0px solid transparent;
+}
+
+</style>

package/src/components/ColorPicker.vue

@@ -26,6 +26,8 @@
 
 export default{
 
+	emits: [ 'change', 'update:modelValue' ],
+
 	props: {
 
 		colors: Array,
@@ -40,6 +42,7 @@ export default{
 
 		select(color){
 			this.$emit('update:modelValue', color)
+			this.$emit('change')
 			this.$refs.contextMenu.close()
 		}
 

package/src/components/HTMLEditor.vue

@@ -228,7 +228,7 @@ export default{
 	},
 
 	mounted() {
-		this.html = this.modelValue
+		this.update()
 	},
 
 	methods: {
@@ -431,6 +431,10 @@ export default{
 			this.updateModelValue()
 		},
 
+		update(){
+			this.html = this.modelValue
+		},
+
 		updateModelValue(){
 
 			let html = this.$refs.article.innerHTML

package/src/components/Modal.vue

@@ -144,7 +144,7 @@ export default{
 
 	methods: {
 
-		open(context){
+		open(context = {}){
 			this.context = context
 			this._state = true
 		},

package/src/components/Radio.vue

@@ -15,6 +15,8 @@ import {parseBoolean} from "../utils/helpers.mjs";
 
 export default{
 
+	emits: [ 'change' ],
+
 	props:{
     name: String,
 		checked: undefined,
@@ -44,6 +46,7 @@ export default{
     onChange(){
       if(this.isDisabled) return
       this.$emit('update:modelValue', this.value)
+			this.$emit('change')
     }
 
 	}

package/src/index.js

@@ -143,6 +143,10 @@ const unregisterResizeEvent = (fn) => {
   }
 }
 
+const consoleInfo = (text) => { console.info(text) }
+const consoleLog = (text) => { console.log(text) }
+const consoleWarn = (text) => { console.warn(text) }
+
 const util = {
 
   push: (arr, item, opt = { key:"id" }) => {
@@ -239,6 +243,9 @@ export default{
     app.config.globalProperties.$util = util
     app.config.globalProperties.$resize = registerResizeEvent
     app.config.globalProperties.$unresize = unregisterResizeEvent
+    app.config.globalProperties.log = consoleLog
+    app.config.globalProperties.warn = consoleWarn
+    app.config.globalProperties.info = consoleInfo
 
     app.component('Alert', defineAsyncComponent(() => import("./components/Alert.vue")))
     app.component('Button', defineAsyncComponent(() => import("./components/Button.vue")))
@@ -248,6 +255,7 @@ export default{
     app.component('ButtonGroup', defineAsyncComponent(() => import("./components/ButtonGroup.vue")))
     app.component('ChatTyping', defineAsyncComponent(() => import("./components/ChatTyping.vue")))
     app.component('Checkbox', defineAsyncComponent(() => import("./components/Checkbox.vue")))
+    app.component('CodeEditor', defineAsyncComponent(() => import("./components/CodeEditor.vue")))
     app.component('CopyToClipboard', defineAsyncComponent(() => import("./components/CopyToClipboard.vue")))
     app.component('Countdown', defineAsyncComponent(() => import("./components/Countdown.vue")))
     app.component('Datepicker', defineAsyncComponent(() => import("./components/Datepicker.vue")))
@@ -296,9 +304,9 @@ export default{
     app.component('VirtualScroll', defineAsyncComponent(() => import("./components/VirtualScroll.vue")))
     app.component('VirtualTable', defineAsyncComponent(() => import("./components/VirtualTable.vue")))
     app.component('Slider', defineAsyncComponent(() => import("./components/Slider.vue")))
+    app.component('SplitPane', defineAsyncComponent(() => import("./components/SplitPane.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")))
 
 
   }

package/src/utils/helpers.js

@@ -274,6 +274,27 @@ const accessNestedObject = function(obj, path) {
   return nestedObj;
 }
 
+const cssDict = {
+  'Global': '*',
+  'Font': 'font-family',
+  'Impact': "'Impact', 'Arial Black', 'Arial Bold', Gadget, sans-serif",
+}
+
+const generateStylesheet = (styleObj) => {
+
+  return `*{ font-family: Impact; }`
+
+}
+
+const hexToRgb = (hex) => {
+  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return result ? {
+    r: parseInt(result[1], 16),
+    g: parseInt(result[2], 16),
+    b: parseInt(result[3], 16)
+  } : null;
+}
+
 
 module.exports = {
   ceil,
@@ -293,5 +314,7 @@ module.exports = {
   sequelizeChunk,
   getPresetSortWhereParams,
   unflatten,
-  accessNestedObject
+  accessNestedObject,
+  generateStylesheet,
+  hexToRgb
 }