@mixd-id/web-scaffold 0.2.240706 → 0.2.250801009

package/src/components/CollapsiblePanel.vue

@@ -0,0 +1,70 @@
+<template>
+  <div :class="$style.comp">
+
+    <div class="p-3 cursor-pointer flex flex-row" @click="expanded = !expanded">
+      <div class="flex-1">{{ text ?? 'Untitled' }}</div>
+      <button type="button">
+        <svg :class="expanded ? 'rotate-180' : ''" width="14" height="14" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M224 416c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 338.8l169.4-169.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-192 192C240.4 412.9 232.2 416 224 416z"/></svg>
+      </button>
+    </div>
+
+    <div v-if="expanded || editMode === 1" class="px-3">
+      <component v-for="comp in items"
+                 :is="`${comp.type}`"
+                 :key="comp.uid"
+                 :="comp" />
+    </div>
+
+  </div>
+</template>
+
+<script>
+
+import {componentMixin} from "../mixin/component";
+
+export default{
+
+  mixins: [ componentMixin ],
+
+  props:{
+    items: Array,
+    text: String,
+  },
+
+  data(){
+    return {
+      expanded: false
+    }
+  },
+
+  provide(){
+    return {
+      parentData: this.data
+    }
+  }
+
+}
+
+</script>
+
+<style>
+
+.menuitem2-enter-active,
+.menuitem2-leave-active {
+  max-height: 100vh;
+  transition: all 300ms cubic-bezier(0.25, 1, 0.5, 1);
+}
+
+.menuitem2-enter-from,
+.menuitem2-leave-to{
+  max-height: 0;
+}
+
+</style>
+
+<style module>
+
+.comp {
+}
+
+</style>

package/src/components/ColorPicker.vue

@@ -1,8 +1,10 @@
 <template>
 	<div :class="$style.comp">
+
 		<div :class="circleClass" :style="circleStyle"
 				 @click="mode === 'hex' ? $refs.inputColor.click() : $refs.contextMenu.open($refs.btn)"
 				 ref="btn"></div>
+
 		<input type="color" :class="$style.inputColor" ref="inputColor"
 			@change="select($refs.inputColor.value)"/>
 
@@ -18,9 +20,9 @@
 				</div>
 				<div class="grid grid-cols-2 gap-4">
 					<button type="button" @click="select('')"
-									class="w-full p-1 border-text-100 border-[1px] rounded-lg">None</button>
+									class="w-full p-1 border-border-100 border-[1px] rounded-lg">None</button>
 					<button type="button" v-if="mode !== 'class' && Boolean(customColor)"
-									class="w-full p-1 border-text-100 border-[1px] rounded-lg"
+									class="w-full p-1 border-border-100 border-[1px] rounded-lg"
 									@click="$refs.inputColor.click()">Custom</button>
 				</div>
 			</div>
@@ -71,6 +73,8 @@ export default{
 
     valueType: String,
 
+    itemClass: String
+
 	},
 
 	methods: {
@@ -104,6 +108,7 @@ export default{
 		circleClass(){
 			return [
 				this.$style.circle,
+        this.itemClass,
 				this.mode === 'class' ?
 					(this.modelValue ?? '').replace('text-', 'bg-').replace('border-', 'bg-') :
 					''
@@ -145,7 +150,7 @@ export default{
 }
 
 .circle{
-	@apply w-[24px] h-[24px] rounded-full cursor-pointer border-[2px] border-text-200;
+	@apply w-[24px] h-[24px] rounded-full cursor-pointer border-[2px] border-border-200;
 }
 
 .inputColor{

package/src/components/ColorPicker2.vue

@@ -1,10 +1,16 @@
 <template>
 	<div :class="$style.comp">
+
+    <small class="text-text-400" v-if="title">
+      {{ title }}
+    </small>
+
     <div :class="circleClass" :style="circleStyle"
          @click="mode === 'hex' ? $refs.inputColor.click() : $refs.contextMenu.open($refs.btn)"
          ref="btn"></div>
+
     <input type="color" :class="$style.inputColor" ref="inputColor"
-           @change="select($refs.inputColor.value)"/>
+           @change="select($refs.inputColor.value)" />
 
     <ContextMenu ref="contextMenu" :dismiss="false">
       <div class="p-4 flex flex-col gap-4">
@@ -18,13 +24,14 @@
         </div>
         <div class="grid grid-cols-2 gap-4">
           <button type="button" @click="select('')"
-                  class="w-full p-1 border-text-100 border-[1px] rounded-lg">None</button>
+                  class="w-full p-1 border-border-100 border-[1px] rounded-lg">None</button>
           <button type="button" v-if="mode !== 'class' && Boolean(customColor)"
-                  class="w-full p-1 border-text-100 border-[1px] rounded-lg"
+                  class="w-full p-1 border-border-100 border-[1px] rounded-lg"
                   @click="$refs.inputColor.click()">Custom</button>
         </div>
       </div>
     </ContextMenu>
+
 	</div>
 </template>
 
@@ -34,8 +41,6 @@ import {hexToRgb, rgbToHex} from "../utils/helpers.mjs";
 
 export default{
 
-	emits: [ 'change', 'update:modelValue' ],
-
 	props: {
 
 		mode: {
@@ -50,6 +55,8 @@ export default{
       ]
     },
 
+    title: String,
+
 		values: {
 			type: Array,
 			default: [
@@ -71,30 +78,41 @@ export default{
 
 		customColor: undefined,
 
-		modelValue: String,
-
 		prefix: String,
 
     valueType: String,
 
+
+    name: String,
+
+    item: {
+      type: Object,
+      required: true
+    },
+
+    viewType: String,
+
+    viewIndex: Number,
+
+    viewTypes: Array,
+
 	},
 
 	methods: {
 
 		select(color){
 			if(this.mode === 'class'){
-				this.$emit('update:modelValue', color ? `${this.prefix}${this.keys[0][0]}` + color : '')
+        this.value[this.viewIndex] = `${this.viewType}${this.keys[0][0]}${color}`
 			}
 			else{
         if(this.valueType === 'rgb'){
           const hex = hexToRgb(color)
-          this.$emit('update:modelValue', `${hex.r},${hex.g},${hex.b}`)
+          this.value[this.viewIndex] = `${hex.r},${hex.g},${hex.b}`
         }
         else{
-          this.$emit('update:modelValue', color)
+          this.value[this.viewIndex] = color
         }
 			}
-			this.$emit('change')
 			this.$refs.contextMenu.close()
 		}
 
@@ -102,16 +120,20 @@ export default{
 
 	computed:{
 
-		customColorCount(){
-			const count = parseInt(this.customColor)
-			return isNaN(count) ? 0 : count
-		},
+    value(){
+      if(!Array.isArray(this.item.props[this.name]))
+        this.item.props[this.name] = []
+
+      return this.item.props[this.name]
+    },
 
 		circleClass(){
+      const value = this.value[this.viewIndex]
+
 			return [
 				this.$style.circle,
 				this.mode === 'class' ?
-					(this.modelValue ?? '').replace('text-', 'bg-').replace('border-', 'bg-') :
+					(value ?? '').replace('text-', 'bg-').replace('border-', 'bg-') :
 					''
 			]
 				.filter(_=>_)
@@ -121,9 +143,9 @@ export default{
 		circleStyle(){
 			if(this.mode !== 'class'){
 
-        let value = this.modelValue
+        let value = this.value[this.viewIndex]
         if(this.valueType === 'rgb'){
-          value = rgbToHex(...(this.modelValue ?? '').split(','))
+          value = rgbToHex(...(value ?? '').split(','))
         }
 
 				return {
@@ -151,7 +173,7 @@ export default{
 }
 
 .circle{
-	@apply w-[24px] h-[24px] rounded-full cursor-pointer border-[2px] border-text-200;
+	@apply w-[24px] h-[24px] rounded-full cursor-pointer border-[2px] border-border-200;
 }
 
 .inputColor{

package/src/components/ColorPicker3.vue

@@ -0,0 +1,100 @@
+<template>
+  <div :class="$style.comp">
+
+    <Dropdown v-model="mode" @change="calculate">
+      <option value="none">None</option>
+      <option value="solid">Solid</option>
+      <option value="linear">Linear Gradient</option>
+      <option value="radial">Radial Gradient</option>
+    </Dropdown>
+
+    <div v-if="computedBackground"
+         class="h-[8px] border-[1px] border-border-200 rounded-lg"
+         :style="{ background:computedBackground }"></div>
+
+    <div v-if="mode === 'solid'">
+      <input type="color" v-model="color1" @change="calculate" />
+    </div>
+
+    <div v-else-if="[ 'linear', 'radial' ].includes(mode)" class="flex flex-row gap-3">
+      <input type="color" v-model="color1" @change="calculate" />
+      <div class="flex-1"></div>
+      <input type="color" v-model="color2" @change="calculate" />
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+
+  emits: [ 'update:modelValue' ],
+
+  props: {
+
+    modelValue: String
+
+  },
+
+  methods: {
+
+    calculate(){
+      this.$emit('update:modelValue', this.computedBackground)
+    }
+  },
+
+  mounted() {
+    if(`${this.modelValue ?? ''}`.substring(0, 1) === '#'){
+      this.color1 = this.modelValue
+      this.mode = 'solid'
+    }
+    else if(`${this.modelValue ?? ''}`.indexOf('linear-') >= 0){
+      const match = this.modelValue.match(/linear-gradient\(([^,]+),([^,]+),([^)]+)\)/)
+
+      this.mode = 'linear'
+      this.color1 = ((match ?? [])[2] ?? '').trim()
+      this.color2 = ((match ?? [])[3] ?? '').trim()
+    }
+    else if(`${this.modelValue ?? ''}`.indexOf('radial-') >= 0){
+      const match = this.modelValue.match(/radial-gradient\(([^,]+),([^,]+),([^)]+)\)/)
+
+      this.mode = 'radial'
+      this.color1 = ((match ?? [])[2] ?? '').trim()
+      this.color2 = ((match ?? [])[3] ?? '').trim()
+    }
+  },
+
+  data() {
+    return {
+      mode: "solid", // solid, linear, radial
+      color1: "",
+      color2: "",
+    };
+  },
+
+  computed: {
+    computedBackground() {
+      if (this.mode === "solid") {
+        return this.color1;
+      }
+      else if (this.mode === "linear") {
+        return `linear-gradient(to right, ${this.color1}, ${this.color2})`;
+      }
+      else if (this.mode === "radial") {
+        return `radial-gradient(circle, ${this.color1}, ${this.color2})`;
+      }
+      else{
+        return null
+      }
+    },
+  },
+};
+</script>
+
+<style module>
+
+.comp {
+  @apply flex flex-col gap-2;
+}
+
+</style>

package/src/components/Confirm.vue

@@ -18,16 +18,18 @@
 						</div>
 
 						<div class="mt-4 flex flex-row gap-2">
-							<Button ref="btnOK" @click="onConfirm" class="min-w-[88px]" tabindex="0">
+							<Button ref="btnOK" @click="onConfirm" class="min-w-[88px] text-lg" tabindex="0">
 								<strong class="px-4">
 									{{ buttonText[0] }}
 								</strong>
 							</Button>
-							<Button variant="minimal" @click="onDismiss" class="min-w-[88px] px-4 hover:text-primary">
+							<Button variant="minimal" @click="onDismiss" class="min-w-[88px] px-4 hover:text-primary text-lg">
 								{{ buttonText[1] }}
 							</Button>
 						</div>
 
+            <slot name="end"></slot>
+
 					</div>
 				</Transition>
 			</div>
@@ -113,15 +115,15 @@ export default{
 .confirm{
 	@apply fixed top-0 left-0 flex w-screen h-screen px-8;
 	@apply items-center justify-center bg-white/50 backdrop-blur-md;
-	z-index: 60;
+  z-index: 150;
 }
 [data-theme="dark"] .confirm{
   @apply bg-black/50;
 }
 
 .confirm>*{
-	@apply max-h-[60vh] overflow-y-auto bg-base-500 rounded-xl;
-	@apply border-[1px] border-text-50;
+	@apply max-h-[60vh] overflow-y-auto bg-base-400 dark:bg-base-300 rounded-xl;
+	@apply border-[1px] border-border-50;
 	@apply min-w-[280px] max-w-[80vw] md:max-w-[480px];
 }
 
@@ -130,7 +132,7 @@ export default{
 }
 
 .cont2{
-	@apply my-4 text-center flex-1 overflow-y-auto;
+	@apply my-4 text-center flex-1 overflow-y-auto px-6;
 }
 
 .title{
@@ -138,7 +140,7 @@ export default{
 }
 
 .description{
-	@apply overflow-y-auto whitespace-pre-line text-center;
+	@apply overflow-y-auto whitespace-pre-line text-center text-lg;
 	overflow-wrap: break-word;
 	word-wrap: break-word;
 	-ms-word-break: break-all;