@mixd-id/web-scaffold 0.1.230406174 → 0.1.230406176

package/package.json

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

package/src/components/Button.vue

@@ -132,7 +132,7 @@ export default{
 <style module>
 
 .button{
-	@apply p-2 h-[var(--h-cp)];
+	@apply p-2;
 	@apply relative flex items-center justify-center;
 	@apply whitespace-nowrap text-ellipsis overflow-hidden;
 	@apply rounded-lg;
@@ -209,14 +209,15 @@ export default{
 }
 
 .button-secondary{
-	@apply bg-secondary text-text-500 rounded-lg;
+	@apply bg-secondary-200 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));
+	outline: solid 1px rgb(var(--secondary-200));
+	border: solid 1px rgb(var(--secondary-200));
 }
 .button-secondary:hover{
-	@apply bg-secondary-600;
-	outline-color: rgb(var(--secondary-800))
+	@apply bg-secondary-100;
+	outline-color: rgb(var(--secondary-100));
+	border-color: rgb(var(--secondary-100));
 }
 .button-secondary:disabled{
 	@apply bg-secondary-500 opacity-50 top-0 left-0 cursor-not-allowed;
@@ -275,13 +276,6 @@ export default{
 	fill-opacity: 75%;
 }
 
-.size-sm{
-	@apply h-[var(--h-cp-sm)];
-}
-.size-lg{
-	@apply h-[var(--h-cp-lg)];
-}
-
 .loadingPane{
 	@apply absolute left-0 top-0 right-0 bottom-0 flex items-center justify-center pl-1;
 }

package/src/components/Carousel.vue

@@ -4,7 +4,8 @@
     <div ref="inner" :class="computedContainerClass">
 			<div v-for="item in items" :class="computedItemClass">
 				<component  :is="item.type"
-										:="item" />
+										:="item"
+                    edit-selectable="false" />
 			</div>
     </div>
 
@@ -27,7 +28,6 @@
         </slot>
       </div>
     </div>
-
   </div>
 </template>
 

package/src/components/HTMLEditor.vue

@@ -1,7 +1,7 @@
 <template>
 	<div :class="$style.comp">
 
-		<div class="overflow-x-auto">
+		<div class="overflow-x-auto bg-text-50">
 			<div class="flex flex-row">
 				<button class="p-3" type="button" @click="format('bold')">
 					<svg width="14" height="14" class="fill-text-400 hover:fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M0 64C0 46.3 14.3 32 32 32H80 96 224c70.7 0 128 57.3 128 128c0 31.3-11.3 60.1-30 82.3c37.1 22.4 62 63.1 62 109.7c0 70.7-57.3 128-128 128H96 80 32c-17.7 0-32-14.3-32-32s14.3-32 32-32H48V256 96H32C14.3 96 0 81.7 0 64zM224 224c35.3 0 64-28.7 64-64s-28.7-64-64-64H112V224H224zM112 288V416H256c35.3 0 64-28.7 64-64s-28.7-64-64-64H224 112z"/></svg>
@@ -545,7 +545,7 @@ export default{
 <style module>
 
 .comp{
-	@apply flex-1 flex flex-col;
+	@apply flex-1 flex flex-col border-[1px] border-text-200 rounded-lg;
 }
 
 .comp article {

package/src/components/Image.vue

@@ -5,7 +5,7 @@
 
     <slot v-else-if="status === 1" name="loading">
       <div :class="$style.loading + (spinnerType === 'shimmer' ? ' ' + $style.shimmer : '')">
-        <svg v-if="spinnerType !== 'shimmer'" class="animate-spin aspect-square w-[15%] min-w-[14px] text-primary" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
+        <svg v-if="spinnerType !== 'shimmer'" class="animate-spin aspect-square w-[15%] min-w-[14px]" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
       </div>
     </slot>
 

package/src/components/ListItem.vue

@@ -109,10 +109,12 @@ export default{
 		},
 
 		attachReorder(){
-			this.$el.querySelectorAll('[data-reorder]').forEach((comp) => {
-				comp.addEventListener('mousedown', this.onDrag)
-				comp.addEventListener('touchstart', this.onDrag)
-			})
+      if(this.$el && this.$el.nodeType === 1){
+        this.$el.querySelectorAll('[data-reorder]').forEach((comp) => {
+          comp.addEventListener('mousedown', this.onDrag)
+          comp.addEventListener('touchstart', this.onDrag)
+        })
+      }
 		}
 
 	},
@@ -144,4 +146,4 @@ export default{
 	@apply opacity-50
 }
 
-</style>
+</style>

package/src/components/Modal.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <Teleport to=".bW9k">
-      <Transition :name="transition"
+      <Transition :name="computedTransition"
 									appear
 									@after-leave="onAfterLeave(); $emit('hide')"
 									@after-enter="$emit('show')">
@@ -81,7 +81,7 @@ export default{
 
     state: [ Number, Boolean, String ],
 
-    transition: { type: String, default: 'slideup' },
+    transition: String,
 
     width: String,
 
@@ -176,6 +176,26 @@ export default{
       }
     },
 
+    computedTransition(){
+      if(this.transition){
+        return this.transition
+      }
+      else{
+        switch(this.position){
+          case 'top':
+            return 'slidedown'
+          case 'bottom':
+            return 'slideup'
+          case 'left':
+            return 'slideright'
+          case 'right':
+            return 'slideleft'
+          case 'center':
+            return 'slideout'
+        }
+      }
+    },
+
 		computedState(){
       return this.state ? Boolean(this.state) : this._state
 		},
@@ -233,11 +253,11 @@ export default{
 <style>
 
 .bW9k{
-	@apply fixed z-20 top-0 left-0 bottom-0 right-0 hidden items-center justify-center;
+	@apply fixed z-20 top-0 left-0 bottom-0 right-0 hidden;
 	@apply bg-black/50 backdrop-blur-md;
 }
 .bW9l{
-	@apply flex;
+	@apply grid;
 }
 
 </style>
@@ -286,11 +306,28 @@ html[data-theme='dark'] .overlay{
 		width: 100vw !important;
 	}
 
+  .modal-left{
+    justify-self: start;
+    align-self: center;
+  }
+
 	.modal-center{
+    justify-self: center;
 		align-self: center;
 	}
 
+  .modal-right{
+    justify-self: end;
+    align-self: center;
+  }
+
+  .modal-top{
+    justify-self: center;
+    align-self: start;
+  }
+
 	.modal-bottom{
+    justify-self: center;
 		align-self: end;
 	}
 
@@ -301,6 +338,8 @@ html[data-theme='dark'] .overlay{
 	.modal {
 		max-width: 90vw;
 		width: 480px;
+    justify-self: center;
+    align-self: center;
 	}
 
 }
@@ -323,4 +362,60 @@ html[data-theme='dark'] .overlay{
 	transform: translate3d(0, 10px, 0);
 }
 
+.slidedown-enter-active,
+.slidedown-leave-active {
+  transition: all 300ms cubic-bezier(0.25, 1, 0.5, 1);
+}
+.slidedown-enter-active,
+.slidedown-leave-active {
+  transform: translate3d(0, 0, 0);
+}
+.slidedown-enter-from,
+.slidedown-leave-to {
+  opacity: 0;
+  transform: translate3d(0, -10px, 0);
+}
+
+.slideleft-enter-active,
+.slideleft-leave-active {
+  transition: all 300ms cubic-bezier(0.25, 1, 0.5, 1);
+}
+.slideleft-enter-active,
+.slideleft-leave-active {
+  transform: translate3d(0, 0, 0);
+}
+.slideleft-enter-from,
+.slideleft-leave-to {
+  opacity: 0;
+  transform: translate3d(10px, 0, 0);
+}
+
+.slideright-enter-active,
+.slideright-leave-active {
+  transition: all 300ms cubic-bezier(0.25, 1, 0.5, 1);
+}
+.slideright-enter-active,
+.slideright-leave-active {
+  transform: translate3d(0, 0, 0);
+}
+.slideright-enter-from,
+.slideright-leave-to {
+  opacity: 0;
+  transform: translate3d(-10px, 0, 0);
+}
+
+.slideout-enter-active,
+.slideout-leave-active {
+  transition: all 300ms cubic-bezier(0.25, 1, 0.5, 1);
+}
+.slideout-enter-active,
+.slideout-leave-active {
+  transform: scale(1);
+}
+.slideout-enter-from,
+.slideout-leave-to {
+  opacity: 0;
+  transform: scale(.9);
+}
+
 </style>

package/src/components/Paragraph.vue

@@ -0,0 +1,27 @@
+<template>
+	<p :class="$style.comp" v-html="html"></p>
+</template>
+
+<script>
+
+import {componentMixin} from "../mixin/component";
+
+export default{
+
+  mixins: [ componentMixin ],
+
+  props: {
+    html: String
+  }
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+
+}
+
+</style>

package/src/components/Radio.vue

@@ -1,6 +1,6 @@
 <template>
-	<div :class="$style.comp + (cChecked ? ' ' + $style.checked : '') + (isDisabled ? ' ' + $style.disabled : '')" @click="onChange">
-    <div :class="$style.indicator">
+	<div :class="compClass" @click="onChange">
+    <div :class="$style.indicator" v-if="variant === 'radio'">
       <div>
         <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>
       </div>
@@ -22,11 +22,25 @@ export default{
 		checked: undefined,
 		modelValue: undefined,
     value: undefined,
-		disabled: undefined
+		disabled: undefined,
+    variant: {
+      type: String,
+      default: 'radio', // radio|square
+    }
 	},
 
 	computed: {
 
+    compClass(){
+      return [
+        this.$style.comp,
+        (this.cChecked ? ' ' + this.$style.checked : ''),
+        (this.isDisabled ? ' ' + this.$style.disabled : ''),
+        this.$style[this.variant]
+      ]
+        .join(' ')
+    },
+
 		id(){
 			return this.$style.comp + this.uniqid()
 		},
@@ -58,7 +72,7 @@ export default{
 <style module>
 
 .comp{
-	@apply h-[var(--h-cp)] flex items-center cursor-pointer;
+	@apply flex items-center cursor-pointer;
 	@apply flex flex-row items-center gap-2
 }
 
@@ -84,4 +98,15 @@ export default{
   @apply border-primary;
 }
 
+.radio{
+
+}
+
+.square{
+  @apply border-[2px] border-transparent;
+}
+.square.checked{
+  @apply border-primary;
+}
+
 </style>

package/src/components/Tabs.vue

@@ -2,10 +2,9 @@
 	<div :class="computedClass">
 		<button v-for="(item, index) in filteredItems" :class="tabClass(item)"
 			@click="onClick(item)" type="button" >
-			<slot v-if="$slots.tab" name="tab" :="{ item, index }"></slot>
-			<div v-else :class="$style.item">
-				{{ item.text }}
-			</div>
+			<slot name="tab" :="{ item, index }">
+        {{ item.text }}
+      </slot>
 		</button>
 	</div>
 </template>

package/src/components/Textbox.vue

@@ -4,6 +4,7 @@
 		<input :type="computedType" :disabled="isDisabled" @focus="isActive = true" @input="onInput" @blur="onBlur"
 			:placeholder="placeholder" :maxlength="maxlength" ref="input" autocomplete="new-password"
 					 :value="displayedValue" :readonly="Boolean(readonly)" @paste="onPaste"
+           :class="itemClass"
 			@keydown="onKeyDown"/>
 		<button class="mr-2" v-if="Boolean(clearable) && !Boolean(readonly) && state >= 1 && modelValue" type="button" @click="$emit('clear')">
 			<svg :class="$style.svg" width="19" height="19" viewBox="0 0 24 24" class="fill-text-200" xmlns="http://www.w3.org/2000/svg">
@@ -50,7 +51,9 @@ export default{
 		placeholder: String,
 		readonly: undefined,
 		maxlength: [ String, Number ],
-		type: String // text, tel, password, number,
+		type: String, // text, tel, password, number,
+
+    itemClass: String
 
 	},
 
@@ -172,7 +175,6 @@ export default{
 <style module>
 
 .textbox{
-	@apply min-h-[var(--h-cp)];
 	@apply flex items-center border-[1px] border-text-200;
 	@apply rounded-lg overflow-hidden;
 }
@@ -181,13 +183,11 @@ export default{
 	@apply bg-text-50;
 }
 
-.size-sm{ @apply min-h-[var(--h-cp-sm)]; }
 .size-sm input{ @apply text-sm; }
 
-.size-lg{ @apply min-h-[var(--h-cp-lg)]; }
 
 .textbox>input{
-	@apply flex-1 outline-none p-2 bg-transparent;
+	@apply flex-1 outline-none p-3 bg-transparent;
 	font-size: inherit;
 }
 

package/src/components/TreeView.vue

@@ -10,8 +10,8 @@
 									@change="$emit('change')"
 									@remove="confirm({ title:$t('Remove this item?'), onConfirm: () => { modelValue.splice(index, 1);$emit('change') }})"
 									@add="(items) => $emit('add', items)">
-			<template #default="{ item }">
-				<slot :item="item"></slot>
+			<template #default="{ item, parent }">
+				<slot :item="item" :parent="parent"></slot>
 			</template>
 		</TreeViewItem>
 
@@ -82,7 +82,12 @@ export default{
 
 	mounted() {
 		window.addEventListener('keydown', this.onKeyUp)
-	}
+	},
+
+  watch: {
+
+
+  }
 
 }
 

package/src/components/TreeViewItem.vue

@@ -5,49 +5,51 @@
          :class="itemClass"
 				 @mousedown="mouseDown">
 
-      <button type="button" class="py-1" v-if="Array.isArray((item ?? {}).items) && item.items.length > 0"
+      <button type="button" class="p-1 w-[18px]"
+              v-if="Array.isArray((item ?? {}).items) && item.items.length > 0"
 							@click="childCollapsed = !childCollapsed">
-				<svg v-if="!childCollapsed" width="16" height="16" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"/></svg>
-				<svg v-else width="16" height="16" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 512"><path d="M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z"/></svg>
+				<svg v-if="!childCollapsed" width="14" height="14" class="fill-text-300 pointer-events-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"/></svg>
+				<svg v-else width="14" height="14" class="fill-text-300 pointer-events-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 512"><path d="M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z"/></svg>
 			</button>
-			<div v-else class="px-2"></div>
 
-			<slot :item="item"></slot>
+			<div class="flex-1 flex px-3">
+        <slot :item="item" :parent="parent"></slot>
+      </div>
 
-      <div class="flex flex-row gap-2 items-center">
+      <div class="flex flex-row items-center">
         <button v-if="item && Array.isArray(item.items)"
                 type="button"
-                class="py-1"
+                class="p-1"
                 @click="add">
           <svg width="16" height="16" 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>
         </button>
 
         <button type="button"
-                class="py-1"
+                class="p-1"
                 @click="$emit('remove')">
           <svg width="16" height="16" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M193.94 256L296.5 153.44l21.15-21.15c3.12-3.12 3.12-8.19 0-11.31l-22.63-22.63c-3.12-3.12-8.19-3.12-11.31 0L160 222.06 36.29 98.34c-3.12-3.12-8.19-3.12-11.31 0L2.34 120.97c-3.12 3.12-3.12 8.19 0 11.31L126.06 256 2.34 379.71c-3.12 3.12-3.12 8.19 0 11.31l22.63 22.63c3.12 3.12 8.19 3.12 11.31 0L160 289.94 262.56 392.5l21.15 21.15c3.12 3.12 8.19 3.12 11.31 0l22.63-22.63c3.12-3.12 3.12-8.19 0-11.31L193.94 256z"/></svg>
         </button>
       </div>
 
 		</div>
-		<div ref="container"
-         v-if="item && Array.isArray(item.items) && !childCollapsed" class="ml-4"
+    <div ref="container"
+         v-show="item && Array.isArray(item.items) && !childCollapsed" class="ml-6"
          @mousemove.stop=""
          @mouseout.stop="">
-			<TreeViewItem v-for="(subItem, index) in item.items"
-										:item="subItem"
-										:parent="item.items"
-										:selected-item="selectedItem"
-										@moveup="moveUp(subItem)"
-										@movedown="moveDown(subItem)"
-										@remove="confirm({ title:$t('Remove this item?'), onConfirm: () => { item.items.splice(index, 1);$emit('change') }})"
-										@add="(items) => $emit('add', items)"
-										@change="$emit('change')">
-				<template #default="{ item }">
-					<slot :item="item"></slot>
-				</template>
-			</TreeViewItem>
-		</div>
+      <TreeViewItem v-for="(subItem, index) in item.items"
+                    :item="subItem"
+                    :parent="item.items"
+                    :selected-item="selectedItem"
+                    @moveup="moveUp(subItem)"
+                    @movedown="moveDown(subItem)"
+                    @remove="confirm({ title:$t('Remove this item?'), onConfirm: () => { item.items.splice(index, 1);$emit('change') }})"
+                    @add="(items) => $emit('add', items)"
+                    @change="$emit('change')">
+        <template #default="{ item }">
+          <slot :item="item"></slot>
+        </template>
+      </TreeViewItem>
+    </div>
 	</div>
 </template>
 
@@ -101,6 +103,8 @@ export default{
 		},
 
 		mouseDown(e){
+      if(!this.$el || this.$el.nodeType !== 1) return
+
 			e.preventDefault()
 
 			const startX = e.clientX
@@ -327,18 +331,16 @@ export default{
 	},
 
   mounted() {
-
     if(this.componentStore){
       this.childCollapsed = this.componentStore[this.item.uid] ?? this.childCollapsed
     }
-
   },
 
   watch: {
 
     item: {
       handler(){
-        this.childCollapsed = false
+        this.childCollapsed = this.componentStore[this.item.uid] ?? this.childCollapsed
       },
       deep: true
     },
@@ -356,11 +358,37 @@ export default{
     },
 
     isSelected(to){
-      /*if(to){
-        this.$el.scrollIntoView({
-          behavior: 'smooth',
+      if(to){
+
+        // Expand all parents
+        let parent = this.$parent
+        while('childCollapsed' in parent){
+          parent.childCollapsed = false
+          parent = parent.$parent
+        }
+
+        // Scroll into view
+        this.$nextTick(() => {
+          let parentContainer = this.$el.parentNode
+          do{
+            if([ 'auto' ].includes(window.getComputedStyle(parentContainer).overflowY)){
+              break
+            }
+            parentContainer = parentContainer.parentNode
+          }
+          while(parentContainer && parentContainer.tagName !== 'BODY')
+
+          let isInViewPort = this.$el.offsetTop > parentContainer.scrollTop &&
+              this.$el.offsetTop < (parentContainer.scrollTop + parentContainer.clientHeight)
+
+          if(!isInViewPort){
+            this.$el.scrollIntoView({
+              behavior: 'smooth',
+            })
+          }
         })
-      }*/
+
+      }
     }
 
   },
@@ -372,7 +400,7 @@ export default{
 <style module>
 
 .item{
-	@apply bg-base-300 dark:bg-base-400 flex flex-row gap-2 px-2 py-1 items-center rounded-lg mb-1;
+	@apply bg-base-300 dark:bg-base-400 flex flex-row py-1 items-center rounded-lg mb-1;
 	@apply border-[1px] border-transparent cursor-pointer;
 }
 .item.active{