@mixd-id/web-scaffold 0.1.230406001

package/src/components/Carousel.vue

@@ -0,0 +1,293 @@
+<template>
+  <div :class="$style.carousel" @mousedown.prevent.capture="mouseDown" @touchstart.passive.capture="mouseDown">
+    <div :class="$style.inner">
+      <span v-if="images && images.length && images.length > 0" v-for="image in images" :key="image">
+        <a v-if="image.target && image.target.indexOf('://') >= 0" :href="image.target" @click="checkClick">
+          <Image :src="image.imageUrl" :class="imageClass" />
+        </a>
+        <router-link v-if="image.target" :to="scrolling ? '' : image.target">
+          <Image :src="image.imageUrl" :class="imageClass"/>
+        </router-link>
+				<Image v-else :src="image.imageUrl" :class="imageClass" />
+      </span>
+			<div v-else :class="imageClass" class="bg-gray-200 animate-pulse"></div>
+    </div>
+    <div v-if="images && images.length > 1" class="carousel-next" @click="next(false, true)">
+      <slot name="next">
+        <div class="w-10 h-10 rounded-full bg-black/10 hover:bg-black/60 group cursor-pointer flex items-center justify-center">
+          <svg width="24" height="24" viewBox="0 0 24 24" class="fill-white/30 group-hover:fill-white/60" xmlns="http://www.w3.org/2000/svg">
+            <g clip-path="url(#clip0)">
+              <path fill-rule="evenodd" clip-rule="evenodd" d="M8.04289 19.2071C7.65237 18.8166 7.65237 18.1834 8.04289 17.7929L13.8358 12L8.04289 6.20711C7.65237 5.81658 7.65237 5.18342 8.04289 4.79289C8.43342 4.40237 9.06658 4.40237 9.45711 4.79289L15.25 10.5858C16.031 11.3668 16.031 12.6332 15.25 13.4142L9.45711 19.2071C9.06658 19.5976 8.43342 19.5976 8.04289 19.2071Z"/>
+            </g>
+          </svg>
+        </div>
+      </slot>
+    </div>
+    <div v-if="images && images.length > 1" class="carousel-prev" @click="prev">
+      <slot name="prev">
+        <div class="w-10 h-10 rounded-full bg-black/10 cursor-pointer flex items-center justify-center">
+          <svg width="24" height="24" viewBox="0 0 24 24" class="fill-white/30" xmlns="http://www.w3.org/2000/svg">
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M15.7071 19.2071C16.0976 18.8166 16.0976 18.1834 15.7071 17.7929L9.91421 12L15.7071 6.20711C16.0976 5.81658 16.0976 5.18342 15.7071 4.79289C15.3166 4.40237 14.6834 4.40237 14.2929 4.79289L8.5 10.5858C7.71895 11.3668 7.71895 12.6332 8.5 13.4142L14.2929 19.2071C14.6834 19.5976 15.3166 19.5976 15.7071 19.2071Z"/>
+          </svg>
+        </div>
+      </slot>
+    </div>
+    <div v-if="images && images.length > 1" class="carousel-legend">
+      <div v-if="images && images.length && images.length > 0" v-for="_index in images.length"
+					 :class="'legend-item ' + (index === _index - 1 ? 'active' : '')" :key="_index"
+           @click="index = _index - 1">
+        <slot name="legend">
+          <span></span>
+        </slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import { parseBoolean } from "../utils/helpers.mjs";
+
+export default{
+
+  props:{
+
+    images: {
+      type: Array,
+      default: []
+    },
+
+		infinite: {
+			type: [ Boolean, String, Number ],
+			default: false
+		},
+
+		ratioMobile: String,
+		ratioDesktop: String,
+
+    imageClass:{
+      type: String,
+      default: "w-full"
+    }
+
+  },
+
+  emits: [ 'changed' ],
+
+	computed: {
+
+	},
+
+  data(){
+    return {
+      count: 0,
+      index: 0,
+      scrolling:0
+    }
+  },
+
+  mounted(){
+    this.count = this.$el.querySelectorAll('img').length
+  },
+
+  watch:{
+
+		index(to, from){
+      this.setPosition()
+      this.$emit('changed', to)
+    },
+
+		images(to){
+			this.index = 0
+		}
+
+  },
+
+  methods:{
+
+    checkClick(e){
+      if(this.scrolling){
+        e.preventDefault()
+        e.stopPropagation()
+      }
+    },
+
+    setPosition(noAnimation){
+
+      const index = this.index
+
+      let left = 0
+      this.$el.querySelectorAll('img').forEach((img, curIndex) => {
+        if(curIndex < index)
+          left += img.clientWidth
+      })
+      left *= -1
+
+			if(!noAnimation){
+				this.$el.firstElementChild.addEventListener('transitionend', function(){
+					this.classList.remove('transition-carousel')
+				})
+				this.$el.firstElementChild.classList.add('transition-carousel')
+			}
+
+      this.$el.firstElementChild.style.transform = `translate3d(${left}px, 0, 0)`
+    },
+
+    next(setPosition, useBack){
+
+      let index = this.index + 1
+
+      if(index >= this._props['count'])
+        index = typeof useBack !== 'undefined' && useBack === true && parseBoolean(this.infinite) ? 0 : this._props['count'] - 1
+
+      this.index = index
+
+      if(setPosition) this.setPosition()
+    },
+
+    prev(setPosition){
+
+      let index = this.index - 1;
+
+      if(index < 0) index = 0
+
+      this.index = index
+
+      if(setPosition) this.setPosition()
+    },
+
+    mouseMove(e){
+
+      this.scrolling = true
+
+      const sx = typeof e.touches !== 'undefined' ? e.touches[0].clientX : e.clientX
+      const dx = sx - this._props['sx']
+      const ix = parseInt(this._props['ix'] + dx)
+
+      //console.warn('mousemove', dx, ix)
+
+      this.$el.firstElementChild.style.transform = `translate3d(${ix}px, 0, 0)`
+    },
+
+    mouseUp(e){
+
+      window.setTimeout(() => {
+        this.scrolling = false
+      }, 50)
+
+      const tn = e.timeStamp - this._props['t0']
+      const sx = typeof e.changedTouches !== 'undefined' ? e.changedTouches[0].clientX : e.clientX
+      const dx = sx - this._props['sx']
+
+      //console.warn('mouseup', tn, dx, dx)
+
+      if (Math.abs(dx) > 10) {
+        if (tn < 1200){
+          dx < 0 ? this.next(true) : this.prev(true)
+        }
+        else{
+          this.setPosition()
+        }
+      }
+      else{
+        this.setPosition()
+      }
+
+      window.removeEventListener('mousemove', this.mouseMove)
+      window.removeEventListener('mouseup', this.mouseUp)
+      window.removeEventListener('mouseout', this.mouseUp)
+      window.removeEventListener('touchmove', this.mouseMove)
+      window.removeEventListener('touchend', this.mouseUp)
+    },
+
+    mouseDown(e){
+
+			if(!this.images || this.images.length <= 1)
+				return
+
+      var matches = this.$el.firstElementChild.style.transform.match(/translate3d\((.*?)(?=\,)/)
+      var ix = matches != null && typeof matches[1] != 'undefined' ? parseInt(matches[1].replace('px', '')) : 0
+
+      this._props = {
+        sx:typeof e.touches !== 'undefined' ? e.touches[0].clientX : e.clientX,
+        ix:ix,
+        t0:e.timeStamp,
+        count: this.$el.querySelectorAll('img').length,
+      }
+
+      //console.log('mousedown', this._props, this.count)
+
+      window.addEventListener('mousemove', this.mouseMove)
+      window.addEventListener('mouseup', this.mouseUp)
+      window.addEventListener('mouseout', this.mouseUp)
+      window.addEventListener('touchmove', this.mouseMove)
+      window.addEventListener('touchend', this.mouseUp)
+    }
+
+  }
+}
+</script>
+
+<style>
+
+.carousel-next,
+.carousel-prev{
+  position: absolute;
+  top: 50%;
+  transform: translate3d(0, -50%, 0);
+}
+.carousel-next{
+  right: 10px;
+}
+.carousel-prev{
+  left: 10px;
+}
+
+.transition-carousel{
+  transition: all 300ms cubic-bezier(0.25, 1, 0.5, 1);
+}
+</style>
+
+<style module>
+
+.carousel{
+	white-space: nowrap;
+	overflow: hidden;
+	position: relative;
+	touch-action: none;
+}
+
+.inner{
+	white-space: nowrap;
+	will-change: transform;
+	touch-action: none;
+}
+.inner>*{
+	display: inline-block;
+	width: 100%;
+	touch-action: none;
+	vertical-align: top;
+}
+
+.legend{
+	position: absolute;
+	bottom: 6px;
+	left: 50%;
+	transform: translate3d(-50%, 0, 0);
+}
+.legend .legend-item{
+	display: inline-block;
+}
+.legend .legend-item>*{
+	width: 12px;
+	height: 12px;
+	border-radius: 100%;
+	background: rgba(0, 0, 0, .2);
+	margin: 0 3px;
+	display: inline-block;
+}
+.legend .legend-item.active>*{
+	background: rgba(0, 0, 0, .6);
+}
+
+</style>

package/src/components/ChatTyping.vue

@@ -0,0 +1,69 @@
+<template>
+	<div :class="$style.comp">
+		<div :class="$style.typing">
+			<div :class="$style.dot"></div>
+			<div :class="$style.dot"></div>
+			<div :class="$style.dot"></div>
+		</div>
+	</div>
+</template>
+
+<script>
+
+export default{
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+	@apply bg-primary-100 p-5 rounded-3xl inline-block;
+	border-bottom-left-radius: 2px;
+}
+
+.typing {
+	align-items: center;
+	display: flex;
+}
+
+.dot {
+	animation: chatTypingAnimation 1.8s infinite ease-in-out;
+	@apply bg-primary-200;
+	border-radius: 50%;
+	height: 8px;
+	margin-right: 4px;
+	vertical-align: middle;
+	width: 8px;
+	display: inline-block;
+}
+.dot:nth-child(1) {
+	animation-delay: 200ms;
+}
+.dot:nth-child(2) {
+	animation-delay: 300ms;
+}
+.dot:nth-child(3) {
+	animation-delay: 400ms;
+}
+.dot:last-child {
+	margin-right: 0;
+}
+
+@keyframes chatTypingAnimation {
+	0% {
+		transform: translateY(0px);
+		@apply bg-primary-300;
+	}
+	28% {
+		transform: translateY(-7px);
+		@apply bg-primary-300;
+	}
+	44% {
+		transform: translateY(0px);
+		@apply bg-primary-200;
+	}
+}
+
+</style>

package/src/components/Checkbox.vue

@@ -0,0 +1,152 @@
+<template>
+	<div :class="$style.comp">
+		<input :id="id" type="checkbox" :checked="computedChecked" @change="onChange" />
+		<label :for="id">
+			<div :class="$style.indicator">
+				<Transition name="checkbox">
+					<div v-if="computedChecked">
+						<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>
+				</Transition>
+			</div>
+			<slot></slot>
+		</label>
+	</div>
+</template>
+
+<script>
+
+import { parseBoolean } from "../utils/helpers.mjs";
+
+export default{
+
+	props:{
+		name: String,
+		checked: undefined,
+		value: undefined,
+
+		modelValue: undefined,
+		trueValue: undefined,
+		falseValue: undefined,
+
+		customClass: String,
+		variant: String, // default
+	},
+
+	computed: {
+
+		id(){
+			return this.$style.comp + this.uniqid()
+		},
+
+		computedChecked(){
+			let checked
+			if(this.modelValue){
+
+				const isArray = Array.isArray(this.modelValue)
+
+				if(this.value){
+					checked = isArray ? this.modelValue.includes(this.value) :
+						this.modelValue === this.value
+				}
+				else if(this.trueValue){
+					checked = isArray ? this.modelValue.includes(this.trueValue) :
+						this.modelValue === this.trueValue
+				}
+				else{
+					checked = parseBoolean(this.modelValue)
+				}
+			}
+			else{
+				checked = !!this.checked
+			}
+			return checked
+		}
+
+	},
+
+	methods: {
+
+		onChange(e){
+
+			let value
+			if(e.target.checked){
+				if(this.value) value = this.value
+				else if(this.trueValue) value = this.trueValue
+				else value = true
+
+				if(this.modelValue && Array.isArray(this.modelValue)){
+					value = [ ...this.modelValue, value ].filter((v, idx, arr) => {
+						return arr.indexOf(v) === idx
+					})
+				}
+			}
+			else{
+				if(this.value) value = null
+				else if(this.falseValue) value = this.falseValue
+				else value = false
+
+				if(this.modelValue && Array.isArray(this.modelValue)){
+					value = this.modelValue.filter((v) => {
+						return v !== this.value ?? (this.falseValue ?? false)
+					})
+				}
+			}
+			this.$emit('update:modelValue', value)
+		}
+
+	}
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+	@apply h-[var(--h-cp)] flex items-center;
+}
+
+.comp label{
+	@apply flex flex-row items-center gap-2;
+}
+
+.comp input{
+	@apply hidden;
+}
+
+.indicator{
+	@apply w-[21px] h-[21px] border-[1px] rounded-lg border-text-200 bg-base-50;
+	@apply flex items-center justify-center overflow-hidden;
+	transition:  border 300ms cubic-bezier(0.25, 1, 0.5, 1);
+}
+.comp:hover .indicator{
+	@apply border-primary;
+}
+
+.indicator>div{
+	@apply w-[21px] h-[21px] flex items-center justify-center bg-primary;
+}
+.indicator>div>*{
+	@apply fill-white;
+}
+
+</style>
+
+<style>
+
+.checkbox-enter-active{
+	transition: all 300ms cubic-bezier(0.25, 1, 0.5, 1);
+}
+
+.checkbox-leave-active{
+	transition: all 300ms cubic-bezier(0.25, 1, 0.5, 1);
+}
+
+.checkbox-enter-from,
+.checkbox-leave-to{
+	transform: scale(0);
+	opacity: 0;
+}
+
+</style>