@mixd-id/web-scaffold 0.1.230406300 → 0.1.230406302

package/docs/components/Header2.md

@@ -0,0 +1,16 @@
+# Header 2
+
+### Properties
+| Name                     | Type   | Default | Description                |
+|--------------------------|--------|---------|----------------------------|
+| `logo`                   | Array  | []      | Responsive Array of Object |
+| `logo[].url`             | String |         | Logo url                   |
+| `icons`                  | Array  | {}      | Responsive Array of Object |
+| `icons[].items`          | Array  | {}      | Array of Object            |
+| `icons[].items[].icon`   | String |         | (required) icon value      |
+| `icons[].items[].target` | String |    | (required) target value    |
+| `icons[].items[].text`   | String | route   | route, search              |
+| `menu[].items[].icon`    | String |      | svg, image                 |
+| `menu[].items[].text`    | String |      |                  |
+| `menu[].items[].target`  | String |      |               |
+| `menu[].items[].items`   | Array  |      |            |

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.1.230406300",
+  "version": "0.1.230406302",
   "scripts": {
     "dev": "vite serve",
     "build": "vite build",
@@ -45,7 +45,6 @@
     "cookie-parser": "^1.4.6",
     "cors": "^2.8.5",
     "crypto-js": "^4.2.0",
-    "daisyui": "^2.19.0",
     "dayjs": "^1.11.2",
     "eventemitter2": "^6.4.7",
     "exceljs": "^4.3.0",
@@ -58,6 +57,7 @@
     "pinia": "^2.0.14",
     "prismjs": "^1.28.0",
     "redis": "^4.6.13",
+    "sequelize": "^6.37.3",
     "serve-static": "^1.15.0",
     "tailwindcss": "^3.2.4",
     "vue": "^3.2.25",

package/src/components/Carousel.vue

@@ -35,7 +35,6 @@
 
 <script>
 
-import {parseBoolean} from "../utils/helpers.mjs";
 import {componentMixin} from "../mixin/component";
 
 export default{
@@ -55,7 +54,7 @@ export default{
 
 		autoPlay: [ Number, String ],
 
-		useLegend: Boolean
+		useLegend: [ Boolean, Number ],
 
   },
 
@@ -161,7 +160,7 @@ export default{
       let index = this.index + 1
 
       if(index >= this.items.length)
-        index = typeof useBack !== 'undefined' && useBack === true && parseBoolean(this.infinite) ? 0 : this.items.length - 1
+        index = useBack === true ? 0 : this.items.length - 1
 
       this.index = index
 

package/src/components/Checkbox.vue

@@ -61,6 +61,7 @@ export default {
           return this.modelValue.includes(this.value)
 				}
         else if(this.modelValue){
+          console.log(2, this.value, this.modelValue)
           return this.value === this.modelValue
 				}
 				else{

package/src/components/ErrorText.vue

@@ -13,7 +13,7 @@
 				</div>
 			</div>
 		</div>
-		<div v-else-if="error.message" class="p-2 bg-base-500">{{ error.message }}</div>
+		<div v-else-if="error.message" class="p-2">{{ error.message }}</div>
 		<div v-else>
 
 		</div>

package/src/components/Slider.vue

@@ -1,20 +1,24 @@
 <template>
   <div :class="$style.slider">
 
-    <div ref="bar"></div>
+    <div ref="bar">
 
-    <div ref="highlight" :style="{ left:hgLeft + 'px', right:hgRight + 'px' }"></div>
+      <div ref="highlight"></div>
 
-    <div id="sliderLeft" v-if="mode === 'double'" ref="left" @mousedown.prevent.capture="onMouseDown" @touchstart.passive.capture="onMouseDown"
-      :style="{ left:l1Left + 'px' }">
-      <slot name="inner"></slot>
-    </div>
+      <div v-show="mode === 'double'"
+           ref="left"
+           @mousedown.prevent.capture="onMouseDown"
+           @touchstart.passive.capture="onMouseDown">
+        <slot name="inner"></slot>
+      </div>
 
-    <div id="sliderRight" ref="right" @mousedown.prevent.capture="onMouseDown" @touchstart.passive.capture="onMouseDown"
-      :style="{ left:l2Left + 'px' }">
-      <slot name="inner"></slot>
-    </div>
+      <div ref="right"
+           @mousedown.prevent.capture="onMouseDown"
+           @touchstart.passive.capture="onMouseDown">
+        <slot name="inner"></slot>
+      </div>
 
+    </div>
   </div>
 </template>
 
@@ -24,6 +28,8 @@ export default{
 
 	props:{
 
+    items: Array,
+
 		modelValue:{
 			type: [ String, Number ],
 			default: ''
@@ -53,79 +59,59 @@ export default{
 
   computed:{
 
-    l1Val(){
-      if(this.isMounted){
-        const [ from, to ] = this.modelValue.toString().split('-')
-        return parseInt(from)
+    cItems(){
+
+      let items = []
+
+      if(this.items){
+        items = this.items
       }
-    },
+      else{
+
+        for(let i = this.min ; i <= this.max ; i += this.step){
+          items.push(i)
+        }
+
+        if(items[items.length - 1] !== this.max)
+          items.push(this.max)
 
-    l2Val(){
-      if(this.isMounted){
-        const [ from, to ] = this.modelValue.toString().split('-')
-        return this.mode === 'double' ? (!isNaN(parseInt(to)) ? parseInt(to) : parseInt(from)) : parseInt(from)
       }
+
+      return items
+
     },
 
-    l1Left(){
+    l1Val(){
       if(this.isMounted){
-        const min = parseInt(this.min)
-        const max = this.l2Val
-        const l1Val = this.l1Val > max ? max : (this.l1Val < min ? min : this.l1Val)
-        return (Math.round((l1Val - parseInt(this.min)) / parseInt(this.step))) * this.stepDistance
+        const [ from, to ] = this.modelValue.toString().split('-')
+        return parseInt(from)
       }
     },
 
-    l2Left(){
-      if(this.isMounted){
-        const min = this.l1Val ? this.l1Val : parseInt(this.min)
-        const max = parseInt(this.max)
-        const l2Val = this.l2Val > max ? max : (this.l2Val < min ? min : this.l2Val)
-
-        return (Math.round((l2Val - parseInt(this.min)) / parseInt(this.step))) * this.stepDistance
-      }
+    l1Index(){
+      return this.cItems.indexOf(this.l1Val)
     },
 
-    hgLeft(){
-      if(this.isMounted){
-        if (this.mode === 'double') {
-					const min = parseInt(this.min)
-					const max = this.l2Val
-					const l1Val = this.l1Val > max ? max : (this.l1Val < min ? min : this.l1Val)
-					return (Math.round((l1Val - parseInt(this.min)) / parseInt(this.step))) * this.stepDistance
-        }
-				else {
-          return 0
-        }
-      }
+    l2Index(){
+      return this.cItems.indexOf(this.l2Val)
     },
 
-    hgRight(){
+    l2Val(){
       if(this.isMounted){
-        if(this.mode === 'double'){
-          return this.rootWidth - (Math.round(this.l2Left + (this.$refs.right.clientWidth / 2)))
-        }
-        else{
-          return this.rootWidth - (Math.round(this.l2Left + (this.$refs.right.clientWidth / 2)))
-        }
+        const [ from, to ] = this.modelValue.toString().split('-')
+        return this.mode === 'double' ? (!isNaN(parseInt(to)) ? parseInt(to) : parseInt(from)) : parseInt(from)
       }
     },
 
-    trackWidth(){
-      if(this.isMounted)
-        return this.rootWidth - this.$refs.right.clientWidth
-    },
+
 
     stepDistance(){
       if(this.isMounted){
-        const min = parseInt(this.min)
-        const max = parseInt(this.max)
-        const step = parseInt(this.step)
-        const totalStep = (max - min) / step
-        return this.trackWidth / totalStep
+        return this.$refs.bar.clientWidth / this.cItems.length
       }
       return 0
-    }
+    },
+
 
   },
 
@@ -134,6 +120,11 @@ export default{
       isMounted: 0,
       rootWidth: 0,
 			startValue: null, // Mouse down start value
+      startIndex: null,
+      l1LeftPx: '',
+      l2LeftPx: '',
+      hgLeftPx: '',
+      hgRightPx: '',
     }
   },
 
@@ -142,10 +133,30 @@ export default{
   mounted(){
     this.rootWidth = this.$el.clientWidth
     this.isMounted = 1
+    this.paint()
   },
 
   methods:{
 
+    paint(){
+      if(!this.isMounted) return
+
+      const barWidth = this.$refs.bar.clientWidth
+      const stepWidth = Math.round(barWidth / (this.cItems.length - 1))
+      const l1Left = Math.round(this.l1Index * stepWidth)
+
+      const buttonHalfWidth = this.$refs.right.clientWidth / 2
+
+      let l2Left = Math.round((this.l2Index * stepWidth) - buttonHalfWidth)
+      if(l2Left > barWidth - buttonHalfWidth)
+        l2Left = barWidth - buttonHalfWidth
+
+      this.l1LeftPx = l1Left + "px"
+      this.l2LeftPx = l2Left + "px"
+      this.hgLeftPx = 0
+      this.hgRightPx = (barWidth - l2Left - buttonHalfWidth)  + "px"
+    },
+
 		valueFromDistance(distance, startValue){
 			const stepCount = Math.round(Math.abs(distance) / this.stepDistance)
 			return startValue + (stepCount * this.step) * (distance > 0 ? 1 : -1)
@@ -183,8 +194,10 @@ export default{
 					}
         }
         else{
-          let value = this.valueFromDistance(distance, this.startValue)
-          if(value !== this.modelValue && value >= parseInt(this.min) && value <= parseInt(this.max)){
+          const increment = Math.round(distance / this.stepDistance)
+          const nextIndex = this.startIndex + increment
+          const value = this.cItems[nextIndex]
+          if(value && value !== this.modelValue){
             this.$emit('update:modelValue', value)
           }
         }
@@ -225,15 +238,9 @@ export default{
       window.removeEventListener('touchmove', this.onMouseMove)
       window.removeEventListener('touchend', this.onMouseUp)
 
-      this.$refs[this.current].style.left = ((this.current === 'left' ? this.l1Left : this.l2Left)) + "px"
-
-      this.$refs.highlight.style.left = (this.hgLeft) + "px"
-      this.$refs.highlight.style.right = (this.hgRight) + "px"
-
 			if(this.modelValue !== this.startValue){
 				this.$emit('change')
 			}
-
 			this.startValue = null
     },
 
@@ -241,14 +248,25 @@ export default{
 
       this.current = e.target === this.$refs.right ? 'right' : 'left'
       this.startX = typeof e.touches !== 'undefined' ? e.touches[0].clientX : e.clientX
-      this.startLeft = parseInt(this.$refs[this.current].style.left)
 			this.startValue = this.modelValue
+      this.startIndex = this.l2Index
 
       window.addEventListener('mousemove', this.onMouseMove)
       window.addEventListener('mouseup', this.onMouseUp)
       window.addEventListener('touchmove', this.onMouseMove)
       window.addEventListener('touchend', this.onMouseUp, { passive:true })
     }
+  },
+
+  watch: {
+
+    l2Index: {
+      handler(){
+        this.paint()
+      },
+      immediate: true
+    }
+
   }
 
 }
@@ -259,27 +277,28 @@ export default{
 
   .slider{
 		@apply h-[var(--h-cp)];
-    @apply relative;
   }
 
   .slider>div:nth-child(1){
-    @apply absolute bg-text-50 rounded-lg;
+    @apply relative bg-text-50 rounded-lg;
     height: .5rem;
     top: 50%;
-    left: .75rem;
-    right: .75rem;
+    margin-left: 1.25rem;
+    margin-right: 1.25rem;
     transform: translate3d(0, -50%, 0);
   }
 
-  .slider>div:nth-child(2){
+  .slider>div:nth-child(1)>div:nth-child(1){
     @apply absolute bg-primary rounded-lg;
     height: .5rem;
     top: 50%;
+    left: v-bind(hgLeftPx);
+    right: v-bind(hgRightPx);
     transform: translate3d(0, -50%, 0);
   }
 
-  .slider>div:nth-child(3),
-  .slider>div:nth-child(4){
+  .slider>div:nth-child(1)>div:nth-child(2),
+  .slider>div:nth-child(1)>div:nth-child(3){
     @apply absolute w-[2.5rem] h-[2.5rem] rounded-full bg-white shadow-sm border-[1px] border-text-200;
     @apply flex;
     top: 50%;
@@ -287,4 +306,12 @@ export default{
     touch-action: none;
   }
 
+  .slider>div:nth-child(1)>div:nth-child(2){
+    left: v-bind(l1LeftPx)
+  }
+
+  .slider>div:nth-child(1)>div:nth-child(3){
+    left: v-bind(l2LeftPx)
+  }
+
 </style>

package/src/components/TreeView.vue

@@ -1,17 +1,16 @@
 <template>
 	<div :class="$style.comp">
 
-		<TreeViewItem v-for="(item, index) in modelValue"
+		<TreeViewItem v-for="(item, index) in items"
 									:item="item"
-									:parent="modelValue"
-									:selected-item="selectedItem"
-									@moveup="moveUp(item)"
-									@movedown="moveDown(item)"
-									@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, parent }">
-				<slot :item="item" :parent="parent"></slot>
+                  :selectedItem="selectedItem"
+                  :index="index"
+                  :parent="parent"
+                  :config="config"
+                  :depth="0"
+									@change="$emit('change')">
+			<template #default="{ item, parent, index, depth }">
+				<slot :item="item" :parent="parent" :index="index" :depth="depth"></slot>
 			</template>
 		</TreeViewItem>
 
@@ -27,67 +26,29 @@ export default{
 
 	components: {TreeViewItem},
 
-	emits: [ 'add', 'change', 'paste' ],
+	emits: [ 'change' ],
 
 	inject: [ 'confirm', 'toast' ],
 
 	props: {
 
-		modelValue: Array,
+		items: Array,
 
-		selectedItem: Object
+		selectedItem: Object,
 
-	},
-
-	methods: {
-
-		copy(){
-			if(this.selectedItem){
-				copyToClipboard(JSON.stringify(this.selectedItem))
-					.then(() => this.toast('Copied to clipboard'))
-			}
-		},
-
-		paste(){
-			getClipboardData().then(text => {
-				try{
-					const item = JSON.parse(text)
-					this.$emit('paste', item)
-				}
-				catch(e){}
-			})
-		},
-
-		moveDown(item){
-			const idx = this.modelValue.indexOf(item)
-			if(idx < this.modelValue.length - 1){
-				this.modelValue.splice(idx + 1, 0, this.modelValue.splice(idx, 1)[0])
-				this.$emit('change')
-			}
-		},
-
-		moveUp(item){
-			const idx = this.modelValue.indexOf(item)
-			if(idx - 1 >= 0){
-				this.modelValue.splice(idx - 1, 0, this.modelValue.splice(idx, 1)[0])
-				this.$emit('change')
-			}
-		},
-
-		add(){
-			this.$emit('add', this.modelValue)
-		},
-
-	},
+    config: Object,
 
-	mounted() {
-		window.addEventListener('keydown', this.onKeyUp)
 	},
 
-  watch: {
+  computed: {
 
+    parent(){
+      return {
+        items: this.items
+      }
+    }
 
-  }
+  },
 
 }