@mixd-id/web-scaffold 0.1.230406067 → 0.1.230406069

package/package.json

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

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/TreeView.vue

@@ -7,20 +7,13 @@
 									@moveup="moveUp(item)"
 									@movedown="moveDown(item)"
 									@change="$emit('change')"
-									@remove="modelValue.splice(index, 1);$emit('change')"
+									@remove="confirm($t('Remove this item?'), { onConfirm: () => { modelValue.splice(index, 1);$emit('change') }})"
 									@add="(items) => $emit('add', items)">
 			<template #default="{ item }">
 				<slot :item="item"></slot>
 			</template>
 		</TreeViewItem>
 
-		<div class="flex flex-row items-center justify-center">
-			<button type="button" class="p-3 text-primary flex flex-row gap-1 items-center" @click="add">
-				<svg width="14" height="14" class="fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M376 232H216V72c0-4.42-3.58-8-8-8h-32c-4.42 0-8 3.58-8 8v160H8c-4.42 0-8 3.58-8 8v32c0 4.42 3.58 8 8 8h160v160c0 4.42 3.58 8 8 8h32c4.42 0 8-3.58 8-8V280h160c4.42 0 8-3.58 8-8v-32c0-4.42-3.58-8-8-8z"/></svg>
-				Add
-			</button>
-		</div>
-
 	</div>
 </template>
 
@@ -34,6 +27,8 @@ export default{
 
 	emits: [ 'add', 'change' ],
 
+	inject: [ 'confirm' ],
+
 	props: {
 
 		modelValue: Array

package/src/components/TreeViewItem.vue

@@ -3,7 +3,7 @@
 		<div ref="item" :class="$style.item"
 				 @mouseover="hoverMouseOver" @mouseout="hoverMouseOut">
 			<div class="cursor-move" ref="drag" @mousedown="mouseDown">
-				<svg width="14" height="14" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M96 32H32C14.33 32 0 46.33 0 64v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32V64c0-17.67-14.33-32-32-32zm0 160H32c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32zm0 160H32c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32zM288 32h-64c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32V64c0-17.67-14.33-32-32-32zm0 160h-64c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32zm0 160h-64c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32z"/></svg>
+				<svg width="14" height="14" class="fill-text-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M496 288H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16zm0-128H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16z"/></svg>
 			</div>
 			<div class="flex flex-col hidden">
 				<button type="button" @click="$emit('moveup')">
@@ -29,7 +29,7 @@
 										:parent="item.items"
 										@moveup="moveUp(subItem)"
 										@movedown="moveDown(subItem)"
-										@remove="item.items.splice(index, 1);$emit('change')"
+										@remove="confirm($t('Remove this item?'), { onConfirm: () => { item.items.splice(index, 1);$emit('change') }})"
 										@add="(items) => $emit('add', items)"
 										@change="$emit('change')">
 				<template #default="{ item }">
@@ -55,6 +55,8 @@ export default{
 
 	emits: [ 'add', 'change', 'moveup', 'movedown', 'remove' ],
 
+	inject: [ 'confirm' ],
+
 	props: {
 		item: Object,
 

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")))

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
 }