@mixd-id/web-scaffold 0.1.230406001

package/src/components/SearchButton.vue

@@ -0,0 +1,57 @@
+<template>
+	<div :class="$style.comp" @click="$emit('search')">
+		<div class="flex flex-row gap-1">
+			<div :class="$style.key">
+				<div :class="$style.metaKey"></div>
+				<div :class="$style.lKey"></div>
+			</div>
+		</div>
+		<div class="text-text-300 min-w-[120px]">
+			Search...
+		</div>
+	</div>
+</template>
+
+<script>
+
+export default{
+
+	emits: [ 'search' ],
+
+	mounted() {
+		window.addEventListener('keydown', this.onKeyDown)
+	},
+
+	methods: {
+
+		onKeyDown(e){
+			if((e.metaKey || e.ctrlKey) && e.keyCode === 75){
+				this.$emit('search')
+			}
+		}
+
+	}
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+	@apply h-[var(--h-cp)];
+	@apply border-text-200 bg-base-50 border-[1px] rounded-lg flex flex-row items-center gap-1 cursor-pointer;
+}
+
+.key{
+	@apply border-[1px] border-text-200 rounded-md px-1 bg-base-300;
+	@apply flex flex-row gap-1 px-2 m-1;
+}
+.metaKey:before{
+	content: "⌘"
+}
+.lKey:before{
+	content: "K"
+}
+
+</style>

package/src/components/Slider.vue

@@ -0,0 +1,285 @@
+<template>
+  <div :class="$style.slider">
+
+    <div ref="bar"></div>
+
+    <div ref="highlight" :style="{ left:hgLeft + 'px', right:hgRight + 'px' }"></div>
+
+    <div id="sliderLeft" v-if="mode === 'double'" ref="left" @mousedown.prevent.capture="onMouseDown" @touchstart.passive.capture="onMouseDown"
+      :style="{ left:l1Left + 'px' }"></div>
+
+    <div id="sliderRight" ref="right" @mousedown.prevent.capture="onMouseDown" @touchstart.passive.capture="onMouseDown"
+      :style="{ left:l2Left + 'px' }"></div>
+
+  </div>
+</template>
+
+<script>
+
+export default{
+
+	props:{
+
+		modelValue:{
+			type: [ String, Number ],
+			default: ''
+		},
+
+		min:{
+			type: [ String, Number ],
+			default: '0'
+		},
+
+		max:{
+			type: [ String, Number ],
+			default: '100'
+		},
+
+		mode:{
+			type: String,
+			default: 'single' // single, double
+		},
+
+		step:{
+			type: [ String, Number ],
+			default: '10'
+		}
+
+	},
+
+  computed:{
+
+    l1Val(){
+      if(this.isMounted){
+        const [ from, to ] = this.modelValue.toString().split('-')
+        return parseInt(from)
+      }
+    },
+
+    l2Val(){
+      if(this.isMounted){
+        const [ from, to ] = this.modelValue.toString().split('-')
+        return this.mode === 'double' ? (!isNaN(parseInt(to)) ? parseInt(to) : parseInt(from)) : parseInt(from)
+      }
+    },
+
+    l1Left(){
+      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
+      }
+    },
+
+    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
+      }
+    },
+
+    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
+        }
+      }
+    },
+
+    hgRight(){
+      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)))
+        }
+      }
+    },
+
+    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 0
+    }
+
+  },
+
+  data(){
+    return {
+      isMounted: 0,
+      rootWidth: 0,
+			startValue: null, // Mouse down start value
+    }
+  },
+
+  emits: [ "update:modelValue", "change" ],
+
+  mounted(){
+    this.rootWidth = this.$el.clientWidth
+    this.isMounted = 1
+  },
+
+  methods:{
+
+		valueFromDistance(distance, startValue){
+			const stepCount = Math.round(Math.abs(distance) / this.stepDistance)
+			return startValue + (stepCount * this.step) * (distance > 0 ? 1 : -1)
+		},
+
+    onMouseMove(e){
+
+      e.preventDefault()
+      e.stopPropagation()
+
+      const currentX = typeof e.touches !== 'undefined' ? e.touches[0].clientX : e.clientX
+      const distance = currentX - this.startX
+
+			//console.log('distance', distance, this.stepDistance)
+
+      if(Math.abs(distance) > this.stepDistance * .5){
+
+        if(this.mode === 'double'){
+          let [ from, to ] = this.modelValue.toString().split('-')
+          if(this.current === 'left'){
+            let value = this.valueFromDistance(distance, this.startValue)
+            if(value >= parseInt(this.min) && value <= parseInt(to)){
+              from = value
+            }
+          }
+          else{
+						let value = this.valueFromDistance(distance, this.startValue)
+            if(value >= parseInt(from) && value <= parseInt(this.max)){
+              to = value
+            }
+          }
+
+					if(from + '-' + to !== this.modelValue){
+						this.$emit('update:modelValue', from + '-' + to)
+					}
+        }
+        else{
+          let value = this.valueFromDistance(distance, this.startValue)
+          if(value !== this.modelValue && value >= parseInt(this.min) && value <= parseInt(this.max)){
+            this.$emit('update:modelValue', value)
+          }
+        }
+
+      }
+      else{
+
+        /*const btnHalfWidth = this.$refs.right.clientWidth / 2
+
+        if(this.current === 'left'){
+          let left = this.l1Left + distance
+
+          const minLeft = 0
+          const maxLeft = this.l2Left > 0 ? this.l2Left : (this.rootWidth - btnHalfWidth)
+          if(left < minLeft) left = minLeft
+          if(left > maxLeft) left = maxLeft
+
+          this.$refs[this.current].style.left = left + "px"
+          this.$refs.highlight.style.left = (left + btnHalfWidth) + "px"
+        }
+        else{
+          let left = this.l2Left + distance
+
+          const maxLeft = this.rootWidth - (btnHalfWidth * 2)
+          const minLeft = this.l1Left > 0 ? this.l1Left : 0
+          if(left < minLeft) left = minLeft
+          if(left > maxLeft) left = maxLeft
+
+          this.$refs[this.current].style.left = left + "px"
+          this.$refs.highlight.style.right = ((this.rootWidth - left - btnHalfWidth)) + "px"
+        }*/
+      }
+    },
+
+    onMouseUp(){
+      window.removeEventListener('mousemove', this.onMouseMove)
+      window.removeEventListener('mouseup', this.onMouseUp)
+      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
+    },
+
+    onMouseDown(e){
+
+      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
+
+      window.addEventListener('mousemove', this.onMouseMove)
+      window.addEventListener('mouseup', this.onMouseUp)
+      window.addEventListener('touchmove', this.onMouseMove)
+      window.addEventListener('touchend', this.onMouseUp, { passive:true })
+    }
+  }
+
+}
+
+</script>
+
+<style module>
+
+  .slider{
+		@apply h-[var(--h-cp)];
+    @apply relative;
+  }
+
+  .slider>div:nth-child(1){
+    @apply absolute bg-base-300 rounded-lg;
+    height: .5rem;
+    top: 50%;
+    left: .75rem;
+    right: .75rem;
+    transform: translate3d(0, -50%, 0);
+  }
+
+  .slider>div:nth-child(2){
+    @apply absolute bg-primary rounded-lg;
+    height: .5rem;
+    top: 50%;
+    transform: translate3d(0, -50%, 0);
+  }
+
+  .slider>div:nth-child(3),
+  .slider>div:nth-child(4){
+    @apply absolute w-[2.1rem] h-[2.1rem] rounded-full bg-white shadow-sm border-[1px] border-text-200;
+    top: 50%;
+    transform: translate3d(0, -50%, 0);
+    touch-action: none;
+  }
+
+</style>

package/src/components/SplitPane.vue

@@ -0,0 +1,129 @@
+<template>
+	<div :class="computedClass">
+		<div ref="leftPane" :style="leftStyle" :class="leftClass">
+			<slot name="left"></slot>
+		</div>
+		<div v-if="resizable" ref="resizer" @mousedown="onMouseDown"></div>
+		<div :class="rightClass">
+			<slot name="right"></slot>
+		</div>
+	</div>
+</template>
+
+<script>
+
+export default{
+
+	props:{
+
+		mode: {
+			type: [ String, Number ],
+			default: 1
+		},
+
+		leftClass: String,
+		rightClass: String,
+
+		state: Number,
+
+		modelValue: {
+			type: [ String, Number ],
+			default: 300
+		},
+
+		resizable: {
+			type: Boolean,
+			default: true
+		}
+	},
+
+	computed:{
+
+		computedClass(){
+			return [
+				this.$style.splitPane,
+				this.$style['mode-' + this.mode],
+				this.$style['state-' + this.state]
+			]
+			.join(' ')
+		},
+
+		leftStyle(){
+			return {
+				width: parseInt(this.modelValue) + 'px'
+			}
+		}
+
+	},
+
+	data(){
+		return {
+
+		}
+	},
+
+	methods:{
+
+		onMouseDown(e){
+
+			let x1 = e.touches ? e.touches[0].clientX : e.clientX
+			const onMouseMove = (e) => {
+				const x2 = e.touches ? e.touches[0].clientX : e.clientX
+				const d = x2 - x1
+				x1 = x2
+				this.$emit('update:modelValue', this.modelValue + d)
+			}
+
+			const onMouseUp = (e) => {
+				window.removeEventListener('mousemove', onMouseMove)
+				window.removeEventListener('mouseup', onMouseUp)
+			}
+
+			window.addEventListener('mousemove', onMouseMove)
+			window.addEventListener('mouseup', onMouseUp)
+		}
+
+	}
+
+}
+
+</script>
+
+<style module>
+
+.splitPane{
+	@apply flex-1 flex flex-row;
+}
+.splitPane>*:first-child{
+	@apply overflow-y-auto flex-col;
+}
+.splitPane>*:last-child{
+	@apply flex-1 hidden overflow-y-auto;
+	@apply md:flex;
+}
+.splitPane>*:nth-child(2){
+	@apply w-[5px] cursor-e-resize hidden md:block
+}
+
+.state-2>*:first-child{
+	@apply hidden md:flex
+}
+.state-2>*:last-child{
+	@apply flex-1 flex
+}
+
+.mode-2.state-1>*:first-child{
+	@apply flex-1
+}
+.mode-2.state-1>*:last-child{
+	@apply hidden
+}
+
+@media screen and (max-width: 786px){
+
+	.splitPane>*:first-child{
+		@apply !w-full
+	}
+}
+
+</style>

package/src/components/Switch.vue

@@ -0,0 +1,89 @@
+<template>
+	<div :class="$style.switch">
+		<input type="checkbox" :id="id" @change="changed"
+					 :checked="checked"/>
+		<label :for="id"><span></span></label>
+	</div>
+</template>
+
+<script>
+
+import { parseBoolean, uid } from "../utils/helpers.mjs"
+
+export default{
+
+	props:{
+		modelValue: [ String, Number, Boolean ],
+		trueValue: undefined,
+		falseValue: undefined
+	},
+
+	computed: {
+
+		checked(){
+			return (this.trueValue && this.trueValue === this.modelValue) ||
+				parseBoolean(this.modelValue)
+		}
+
+	},
+
+	emits: ['update:modelValue', 'change'],
+
+	data(){
+		return {
+			id: uid('switch_')
+		}
+	},
+
+	methods: {
+
+		changed(e){
+			const value = e.target.checked ?
+				(this.trueValue ?? 1) :
+				(this.falseValue ?? 0)
+
+			this.$emit('update:modelValue', value)
+			this.$emit('change', value)
+		}
+	}
+
+}
+</script>
+
+<style module>
+
+.switch{
+	@apply h-[var(--h-cp)];
+	@apply text-left flex items-center;
+}
+
+.switch>*{
+	vertical-align: middle;
+}
+
+.switch input{
+	@apply hidden;
+}
+
+.switch label{
+	@apply w-[3rem] inline-block rounded-2xl bg-base-50 h-[2rem];
+	@apply border-[1px] border-text-200 hover:border-text-300;
+}
+
+.switch label>span{
+	@apply mt-[.2rem] mx-1 w-[1.4rem] h-[1.4rem] inline-block align-middle rounded-full bg-text-200;
+	transition: margin 200ms ease;
+}
+
+.switch>input:checked + label{
+	@apply bg-primary;
+}
+.switch>input:checked + label>span{
+	@apply ml-[1.3rem] border-base bg-white
+}
+
+.switch>input:checked + label + *,
+.switch>input:not(:checked) + label + * + *{
+	@apply hidden;
+}
+</style>

package/src/components/TabView.vue

@@ -0,0 +1,106 @@
+<template>
+  <div :class="$style.tabView">
+    <div :class="computedHeadClass">
+      <div v-for="(name, idx) in slotNames" :class="idx === selectedIndex ? $style['tabViewHeaderActive'] : ''"
+          @click="selectedIndex = idx">
+        <slot v-if="$slots['title__' + name]" :name="'title__' + name"></slot>
+        <span v-else :class="headItemClass">{{ titles[idx] ?? 'Untitled' }}</span>
+      </div>
+    </div>
+    <div :class="bodyClass">
+      <div v-for="(name, idx) in slotNames" v-show="idx === selectedIndex">
+        <slot v-if="name.substring(0, 7) !== 'title__'" :name="name"></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default{
+
+  props:{
+
+    title:{
+      type: String
+    },
+
+    headClass:{
+      type: String,
+      default: "bg-white"
+    },
+
+    headItemClass:{
+      type: String,
+      default: ""
+    },
+
+    bodyClass:{
+      type: String,
+      default: "bg-white"
+    },
+
+    defaultIndex:{
+      type: String,
+      default: "0"
+    },
+
+    modelValue:{
+      type: Number,
+      default: 0
+    }
+
+  },
+
+  mounted(){
+    console.log(this.$slots)
+  },
+
+  data(){
+
+    const selectedIndex = parseInt(this.defaultIndex)
+    return {
+      selectedIndex
+    }
+  },
+
+  computed:{
+
+    computedHeadClass(){
+      return [
+        this.$style['tabViewHeader'],
+        this.headClass
+      ]
+        .join(' ')
+        .trim()
+    },
+
+    slotNames(){
+      return Object.keys(this.$slots).filter((key) => key.substring(0, 7) !== 'title__')
+    },
+
+    titles(){
+      return this.title.split(',')
+    }
+
+  }
+
+}
+</script>
+
+<style module>
+
+.tabView{
+
+}
+
+.tabViewHeader{
+  @apply overflow-x-auto whitespace-nowrap;
+}
+.tabViewHeader>*{
+  @apply inline-block p-2 px-4 border-b-[1px] border-transparent bg-white cursor-pointer align-middle
+}
+.tabViewHeaderActive{
+  @apply border-red-500;
+}
+
+</style>