@mixd-id/web-scaffold 0.1.230406110 → 0.1.230406111

package/package.json

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

package/src/components/Ahref.vue

@@ -1,31 +1,199 @@
 <template>
-	<a v-if="isExternalLink" :href="href" :target="target">
-		<slot />
+	<a v-if="isExternalLink" :href="href" :target="target" :class="compClass">
+		<slot>{{ text }}</slot>
 	</a>
-	<router-link v-else :to="href" :target="target">
-		<slot />
+	<router-link v-else :to="href" :target="target" :class="compClass">
+		<slot>{{ text }}</slot>
 	</router-link>
 </template>
 
 <script>
 
+import {componentMixin} from "../mixin/component";
+
 export default {
 
+	mixins: [ componentMixin ],
+
 	props: {
-		href: String,
-		target: String
+
+		href: {
+			type: String,
+			default: ''
+		},
+
+		target: String,
+
+		text: String,
+
+		variant: {
+			type: [ String, Number ],
+			default: "primary" // primary|secondary|outline, default:primary
+		},
 	},
 
 	computed: {
 
 		isExternalLink() {
 			return typeof this.href === 'string' && this.href.indexOf('://') > 0
-		}
+		},
+
+		compClass(){
+			return [
+				this.$style.button,
+				this.$style['button-' + this.variant]
+			]
+				.filter(_ => _)
+				.join(' ')
+		},
 	},
 }
 </script>
 
 <style module>
 
+.button{
+	@apply p-2 h-[var(--h-cp)];
+	@apply relative flex items-center justify-center;
+	@apply whitespace-nowrap text-ellipsis overflow-hidden;
+	@apply rounded-lg;
+	background-image: v-bind(bgImages[0]);
+}
+.button>*:first-child{
+	@apply flex items-center justify-center
+}
+.button:disabled{
+	@apply opacity-60;
+}
+.button:active{
+	@apply top-[1px] left-[1px] relative;
+}
+
+.button-primary{
+	@apply bg-primary-500 text-white rounded-lg;
+	box-shadow: 0 2px 1px rgba(0, 0, 0, .05);
+	outline: solid 1px rgb(var(--primary-700));
+	border: solid 1px rgb(var(--primary-400));
+}
+.button-primary:focus{
+	outline-color: rgb(var(--primary-800));
+	border-color: rgb(var(--primary-600));
+}
+.button-primary:hover{
+	@apply bg-primary-600;
+	outline-color: rgb(var(--primary-800))
+}
+.button-primary:disabled{
+	@apply bg-primary-500 opacity-50 top-0 left-0 cursor-not-allowed;
+	@apply top-0 left-0;
+	outline: solid 1px rgb(var(--primary-700));
+}
+.button-primary *{
+	@apply text-white fill-white;
+}
+.button-primary.loading *{
+	@apply fill-transparent
+}
+.button-primary .svgBg{
+	stroke: #fff;
+	stroke-opacity: 25%;
+}
+.button-primary .svgHg{
+	fill: #fff;
+	fill-opacity: 75%;
+}
+
+.button-outline{
+	@apply bg-transparent text-primary-500;
+	outline: solid 1px rgb(var(--primary-700));
+}
+.button-outline:hover{
+	outline-color: rgb(var(--primary-800))
+}
+.button-outline:disabled{
+	@apply opacity-50 top-0 left-0 cursor-not-allowed;
+	@apply text-text border-primary-500;
+}
+.button-outline *{
+	@apply text-primary-500 fill-primary-500;
+}
+.button-outline.loading *{
+	@apply fill-transparent
+}
+.button-outline .svgBg{
+	stroke: rgb(var(--primary-600));
+	stroke-opacity: 50%;
+}
+.button-outline .svgHg{
+	fill: rgb(var(--primary));
+	fill-opacity: 100%;
+}
+
+.button-secondary{
+	@apply bg-secondary text-text-500 rounded-lg;
+	box-shadow: 0 2px 1px rgba(0, 0, 0, .05);
+	outline: solid 1px rgb(var(--secondary-700));
+	border: solid 1px rgb(var(--secondary-400));
+}
+.button-secondary:hover{
+	@apply bg-secondary-600;
+	outline-color: rgb(var(--secondary-800))
+}
+.button-secondary:disabled{
+	@apply bg-secondary-500 opacity-50 top-0 left-0 cursor-not-allowed;
+	outline: solid 1px rgb(var(--secondary-700));
+}
+.button-secondary *{
+	@apply text-text-500 fill-white;
+}
+.button-secondary.loading *{
+	@apply fill-transparent
+}
+.button-secondary .svgBg{
+	stroke: rgb(var(--text-400));
+	stroke-opacity: 25%;
+}
+.button-secondary .svgHg{
+	fill: rgb(var(--text-500));
+	fill-opacity: 75%;
+}
+
+.button-red{
+	@apply bg-red-500 text-white rounded-md border-[2px] border-red-500;
+}
+.button-red:hover{
+	@apply bg-red-600 border-red-600;
+}
+.button-red:disabled{
+	@apply bg-red-500 border-red-500 opacity-50 top-0 left-0 cursor-not-allowed;
+}
+.button-red *{
+	@apply text-white fill-white;
+}
+.button-red.loading *{
+	@apply fill-transparent
+}
+.button-red .svgBg{
+	@apply stroke-red-400;
+	stroke-opacity: 50%;
+}
+.button-red .svgHg{
+	@apply fill-text-500;
+	fill-opacity: 100%;
+}
+
+.button-minimal{
+	@apply border-[2px] border-transparent;
+}
+.button-minimal:hover{
+}
+.button-minimal .svgBg{
+	stroke: rgb(var(--text-500));
+	stroke-opacity: 25%;
+}
+.button-minimal .svgHg{
+	fill: rgb(var(--text));
+	fill-opacity: 75%;
+}
 
 </style>

package/src/components/TreeViewItem.vue

@@ -113,11 +113,12 @@ export default{
 
 			const rect = this.$el.getBoundingClientRect()
 			const startX = e.clientX
+			const startY = e.clientY
 
 			const cloned = this.$el.cloneNode(true)
 			cloned.style.position = 'absolute'
 			cloned.style.left = rect.x + "px"
-			cloned.style.top = (e.clientY - 10) + "px"
+			cloned.style.top = rect.y + "px"
 			cloned.style.width = this.$el.clientWidth + "px"
 			cloned.style.pointerEvents = 'none'
 			document.body.appendChild(cloned)
@@ -129,8 +130,9 @@ export default{
 
 			const mouseMove = (e) => {
 				const distanceX = e.clientX - startX
+				const distanceY = e.clientY - startY
 				cloned.style.left = (rect.x + distanceX) + "px"
-				cloned.style.top = (e.clientY - 10) + "px"
+				cloned.style.top = (rect.y + distanceY) + "px"
 			}
 
 			const mouseUp = (e) => {

package/src/index.js

@@ -354,6 +354,8 @@ export default{
     app.component('BlockSetting', defineAsyncComponent(() => import("./widgets/BlockSetting.vue")))
     app.component('BoxItem', defineAsyncComponent(() => import("./widgets/BoxItem.vue")))
     app.component('BoxSetting', defineAsyncComponent(() => import("./widgets/BoxSetting.vue")))
+    app.component('AhrefItem', defineAsyncComponent(() => import("./widgets/AhrefItem.vue")))
+    app.component('AhrefSetting', defineAsyncComponent(() => import("./widgets/AhrefSetting.vue")))
     app.component('ButtonItem', defineAsyncComponent(() => import("./widgets/ButtonItem.vue")))
     app.component('ButtonSetting', defineAsyncComponent(() => import("./widgets/ButtonSetting.vue")))
     app.component('CarouselItem', defineAsyncComponent(() => import("./widgets/CarouselItem.vue")))

package/src/widgets/AhrefItem.vue

@@ -0,0 +1,25 @@
+<template>
+	<div class="flex-1 flex flex-row items-center gap-2">
+		{{ item.props.name ?? item.type }}
+	</div>
+</template>
+
+<script>
+
+export default{
+
+	props: {
+		item: Object
+	}
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+
+}
+
+</style>

package/src/widgets/AhrefSetting.vue

@@ -0,0 +1,91 @@
+<template>
+	<div :class="$style.comp">
+
+		<div>
+			<label class="flex-1 text-text-400">Text</label>
+			<Textbox v-model="item.props.text" @keyup.enter="$emit('change')"/>
+		</div>
+
+		<div>
+			<label class="flex-1 text-text-400">Href</label>
+			<Textbox v-model="item.props.href" @keyup.enter="$emit('change')"/>
+		</div>
+
+		<div>
+			<label class="flex-1 text-text-400">Target</label>
+			<Dropdown v-model="item.props.target" @change="$emit('change')">
+				<option value="_self">Self</option>
+				<option value="_blank">Blank</option>
+				<option value="_parent">Parent</option>
+				<option value="_top">Top</option>
+			</Dropdown>
+		</div>
+
+		<div>
+			<label class="flex-1 text-text-400">Variant</label>
+			<Dropdown v-model="item.props.variant"
+								@change="$emit('change')">
+				<option value="primary">Primary</option>
+				<option value="secondary">Secondary</option>
+				<option value="red">Red</option>
+				<option value="minimal">Minimal</option>
+				<option value="outline">Outline</option>
+				<option value="">Not Set</option>
+			</Dropdown>
+		</div>
+
+		<ComponentSetting :item="item"
+											:view-type="viewType"
+											:view-types="viewTypes"
+											defaultDisplay="flex"
+											@change="$emit('change')" />
+
+	</div>
+</template>
+
+<script>
+
+export default{
+
+	emits: [ 'change' ],
+
+	props: {
+
+		item: {
+			type: Object,
+			required: true
+		},
+
+		viewType: String,
+
+		viewTypes: Array,
+
+	},
+
+	data(){
+		return {
+		}
+	},
+
+	inject: [ 'confirm', 'imageSrc' ],
+
+	methods: {
+
+
+	},
+
+	computed: {
+
+	}
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+	@apply flex flex-col gap-4;
+}
+
+</style>

package/src/widgets/ComponentSetting.vue

@@ -421,7 +421,7 @@
 
 		<div class="flex flex-col gap-4">
 
-			<label class="flex-1 text-text-400">Shadow</label>
+			<strong class="flex-1 text-text-400">Shadow</strong>
 
 			<div class="flex flex-row items-center gap-4">
 				<label class="flex-1 text-text-400">Box Shadow</label>

package/src/widgets/WebPageBuilder.vue

@@ -997,6 +997,10 @@ export default{
 						htmlText:'', images:{},
 					}},
 
+				{ type:'Ahref', name:'Ahref', group:'Components', props:{
+						name:'Ahref', text:'Ahref'
+					}},
+
 				{ type:'Button', name:'Button', group:'Components', props:{
 						name:'Button', text:'Button'
 					}},