@mixd-id/web-scaffold 0.1.230406066 → 0.1.230406067

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.1.230406066",
+  "version": "0.1.230406067",
   "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/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

@@ -248,6 +248,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 +297,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")))
 
 
   }