@mixd-id/web-scaffold 0.2.250801010 → 0.2.250801012

package/src/components/Card.vue

@@ -1,257 +0,0 @@
-<template>
-  <Teleport v-if="float" to=".bW9k">
-    <Transition name="slideup"
-                @after-leave="onAfterLeave"
-                appear>
-      <div v-if="computedState"
-           :class="computedClass"
-           :style="computedStyle">
-
-        <slot name="header">
-          <div class="relative">
-            <div class="absolute top-0 right-0">
-              <button type="button" @click="close" class="p-4">
-                <svg width="24" height="24" viewBox="0 0 24 24" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg">
-                  <path d="M6.53034 5.46965C6.23745 5.17676 5.76257 5.17676 5.46968 5.46965C5.17679 5.76255 5.17679 6.23742 5.46968 6.53031L10.9393 12L5.46967 17.4697C5.17678 17.7626 5.17678 18.2374 5.46967 18.5303C5.76256 18.8232 6.23744 18.8232 6.53033 18.5303L12 13.0606L17.4697 18.5303C17.7626 18.8232 18.2375 18.8232 18.5303 18.5303C18.8232 18.2374 18.8232 17.7626 18.5303 17.4697L13.0607 12L18.5303 6.53032C18.8232 6.23743 18.8232 5.76256 18.5303 5.46966C18.2374 5.17677 17.7626 5.17677 17.4697 5.46966L12 10.9393L6.53034 5.46965Z"/>
-                </svg>
-              </button>
-            </div>
-          </div>
-        </slot>
-
-        <slot name="default" :context="context"></slot>
-
-      </div>
-    </Transition>
-  </Teleport>
-	<div v-else :class="computedClass">
-    <slot name="default" :context="context"></slot>
-	</div>
-</template>
-
-<script>
-
-const modals = []
-
-const onDismiss = (e) => {
-  if(e.target.classList.contains('bW9k')){
-
-  }
-}
-
-document.querySelector('.bW9k').addEventListener('click', onDismiss)
-
-export default{
-
-  computed: {
-
-    computedClass(){
-      return [
-        this.float ? this.$style.modal : this.$style.static,
-        this.class,
-        this.computedState ? this.$style['state-open'] : ''
-      ]
-          .join(' ')
-          .trim()
-    },
-
-    computedState(){
-      const state = this.query ? this.query in this.$route.query :
-          (this.hash ? this.$route.hash.indexOf(this.hash) > -1 : this._state);
-
-      return state
-    },
-
-    computedStyle(){
-      return {
-        width: (res => /^\d+$/.test(res) ? parseInt(res) + 'px' : res)(this.width),
-        height: (res => /^\d+$/.test(res) ? parseInt(res) + 'px' : res)(this.height),
-      }
-    },
-
-    computedTransition(){
-      return 'slidedown'
-    },
-
-  },
-
-  data(){
-    return {
-      _state: false,
-      context: {}
-    }
-  },
-
-  methods:{
-
-    close(){
-      if(!this.float) return
-
-      if(this.query){
-        this.$router.replace({
-          ...this.$route,
-          query: {
-            ...this.$route.query,
-            [this.query]: undefined
-          }
-        })
-      }
-      else if(this.hash){
-
-        let currentHash = ''
-        const hashNames = this.$route.hash.split('#')
-        for(let name of hashNames){
-          if(name.indexOf(this.hash.substring(1)) > -1){
-            currentHash = `#${name}`
-            break
-          }
-        }
-
-        this.$router.replace({
-          ...this.$route,
-          hash: this.$route.hash.replace(currentHash, '')
-        })
-      }
-      else{
-        this._state = false
-      }
-
-    },
-
-    open(context = {}){
-      this.context = context
-
-      if(this.query){
-
-      }
-      else{
-        this._state = true
-      }
-    },
-
-    onAfterLeave(){
-      this.$nextTick(() => {
-        let overlay = document.querySelector('.bW9k')
-        if(overlay){
-          if(overlay.children.length < 1)
-            overlay.classList.remove('bW9l')
-        }
-      })
-    },
-
-  },
-
-  mounted(){
-    this.mounted = true
-  },
-
-  props:{
-
-    class: String,
-
-    dismissable: {
-      type: Boolean,
-      default: false
-    },
-
-    float: Boolean,
-
-    height: {
-      type: [ String, Number ],
-    },
-
-    state: {
-      type: Boolean,
-      default: false
-    },
-
-    hash: String,
-
-    query: String,
-
-    width: [ String, Number ],
-
-  },
-
-  watch: {
-
-    computedState: {
-      immediate: true,
-      handler(state){
-        if(!this.float) return
-
-        let overlay = document.querySelector('.bW9k')
-        if(overlay){
-          if(state){
-            overlay.classList.add('bW9l')
-          }
-        }
-      }
-    }
-
-  }
-
-}
-
-</script>
-
-<style>
-
-.bW9k{
-  @apply z-20 hidden w-[100vw] h-[100vh];
-  @apply bg-white/50 backdrop-blur-xl;
-  position: fixed;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  z-index: 100;
-}
-[data-theme="dark"] .bW9k{
-  @apply bg-black/50;
-}
-.bW9l{
-  @apply flex items-center justify-center;
-}
-
-</style>
-
-<style module>
-
-.static{
-  @apply flex flex-col;
-}
-
-.modal{
-  @apply fixed;
-  @apply bg-base-400 dark:bg-base-300;
-  @apply border-[1px] border-border-50 flex max-h-[90vh] max-w-full;
-  @apply rounded-xl overflow-hidden transition-all;
-  @apply flex flex-col;
-  z-index: 101;
-  transition: all 200ms cubic-bezier(0.25, 1, 0.5, 1);
-  transform: scale(0);
-  opacity: 0;
-}
-.modal.state-open{
-  transform: scale(1);
-  opacity: 1;
-}
-
-.overlay{
-  @apply absolute z-20 left-0 bottom-0 top-0 right-0 bg-white/50 backdrop-blur-sm;
-}
-html[data-theme='dark'] .overlay{
-  @apply bg-black/50;
-}
-
-@media screen and (max-width: 640px){
-
-  .modal {
-    width: 100% !important;
-    max-height: 90vh;
-    @apply self-end;
-  }
-
-}
-</style>

package/src/components/Carousel.vue

@@ -1,364 +0,0 @@
-<template>
-  <div :class="$style.comp"
-       @mousedown="mouseDown"
-       @touchstart.passive="mouseDown"
-       :style="computedStyle">
-
-    <div ref="inner" :class="computedContainerClass">
-			<div v-for="item in items" :class="computedItemClass">
-        <slot v-if="$slots['default']" :item="item"></slot>
-				<component v-else :is="item.type" :="item" />
-			</div>
-    </div>
-
-    <div v-if="useNextPrev && (items ?? []).length > 1 && index < items.length - 1" :class="$style.carouselNext" @click="next(true)">
-      <slot name="next">
-        <div class="p-3">
-          <button :class="$style.btn">
-            <svg :class="$style.btnSvg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M438.6 278.6l-160 160C272.4 444.9 264.2 448 256 448s-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L338.8 288H32C14.33 288 .0016 273.7 .0016 256S14.33 224 32 224h306.8l-105.4-105.4c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l160 160C451.1 245.9 451.1 266.1 438.6 278.6z"/></svg>
-          </button>
-        </div>
-      </slot>
-    </div>
-
-		<div v-if="useNextPrev && (items ?? []).length > 1 && index > 0" :class="$style.carouselPrev" @click="prev">
-      <slot name="prev">
-        <div class="p-3">
-          <button :class="$style.btn">
-            <svg :class="$style.btnSvg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M447.1 256C447.1 273.7 433.7 288 416 288H109.3l105.4 105.4c12.5 12.5 12.5 32.75 0 45.25C208.4 444.9 200.2 448 192 448s-16.38-3.125-22.62-9.375l-160-160c-12.5-12.5-12.5-32.75 0-45.25l160-160c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25L109.3 224H416C433.7 224 447.1 238.3 447.1 256z"/></svg>
-          </button>
-        </div>
-      </slot>
-    </div>
-
-    <div :class="$style.legend">
-      <div v-for="_index in items.length"
-           :class="$style.legendItem + (index === _index - 1 ? ` ${$style.legendItemActive}` : '')"
-           @click="setIndex(_index - 1)">
-        <slot name="legend">
-          <div></div>
-        </slot>
-      </div>
-    </div>
-
-  </div>
-</template>
-
-<script>
-
-import {componentMixin} from "../mixin/component";
-
-export default{
-
-	mixins: [ componentMixin ],
-
-  props:{
-
-    items: Array,
-
-		infinite: {
-			type: undefined,
-			default: false
-		},
-
-		ratio: Array,
-
-		autoPlay: [ Number, String ],
-
-		useLegend: [ Boolean, Number ],
-
-    useNextPrev: [ Boolean, Number ],
-
-  },
-
-  emits: [ 'change' ],
-
-	computed: {
-
-		computedContainerClass(){
-			return [
-				this.$style.inner,
-				this.containerClass
-			]
-				.filter(_ => _)
-				.join(' ')
-		},
-
-		computedItemClass(){
-			return [
-				this.$style.item,
-				this.itemClass
-			]
-				.filter(_ => _)
-				.join(' ')
-		}
-
-	},
-
-  data(){
-    return {
-      index: 0,
-			timeoutId: null,
-      scrollPosition: null,
-      swiping: false,
-    }
-  },
-
-  mounted(){
-    window.addEventListener('touchmove', this.onTouchMove, { passive: false });
-		if(this.autoPlay > 0)
-			this.play()
-  },
-
-  unmounted() {
-    window.removeEventListener('touchmove', this.onTouchMove, { passive: false });
-  },
-
-  watch:{
-
-		index(to){
-      this.$emit('change', to)
-    },
-
-		items(){
-			this.index = 0
-		},
-
-  },
-
-  methods:{
-
-    onTouchMove(e){
-      if(this.swiping && e.cancelable) {
-        e.preventDefault();
-        e.returnValue = false;
-        return false;
-      }
-    },
-
-		setPosition(noAnimation) {
-			if(!this.$refs.inner) return
-
-			const index = this.index
-			let left = 0
-      const gapPx = parseInt(window.getComputedStyle(this.$refs.inner).getPropertyValue('column-gap'))
-			for(let curIndex = 0 ; curIndex < this.items.length ; curIndex++){
-				const item = this.$refs.inner.children[curIndex]
-				if(curIndex < index)
-					left += (item.clientWidth + (!isNaN(gapPx) ? gapPx : 0))
-			}
-
-			left *= -1
-
-			if(!noAnimation){
-				this.$el.firstElementChild.addEventListener('transitionend', function(){
-					this.classList.remove('transition-carousel')
-				})
-				this.$el.firstElementChild.classList.add('transition-carousel')
-			}
-
-			window.requestAnimationFrame(() => {
-        this.$el.firstElementChild.style.transform = `translate3d(${left}px, 0, 0)`
-      })
-		},
-
-    setIndex(index){
-      if(index >= 0 && index < this.items.length){
-        this.index = index
-        this.setPosition()
-      }
-    },
-
-    next(useBack){
-      let index = this.index + 1
-
-      if(index >= this.items.length)
-        index = useBack === true ? 0 : this.items.length - 1
-
-      this.index = index
-
-      this.setPosition()
-    },
-
-    prev(){
-
-      let index = this.index - 1;
-
-      if(index < 0) index = 0
-
-      this.index = index
-
-      this.setPosition()
-    },
-
-		play(){
-      if(this.autoPlay > 0)
-			  this.timeoutId = window.setTimeout(() => { this.next(true); this.play() }, this.autoPlay)
-		},
-
-		stop(){
-			if(this.timeoutId)
-				window.clearTimeout(this.timeoutId)
-		},
-
-    mouseMove(e){
-      const sx = typeof e.touches !== 'undefined' ? e.touches[0].clientX : e.clientX
-      const sy = typeof e.touches !== 'undefined' ? e.touches[0].clientY : e.clientY
-      const dx = sx - this._props['sx']
-      const dy = sy - this._props['sy']
-
-      if(!this._props['direction']){
-        if(Math.abs(dx) > 3){
-          this._props['direction'] = 'horizontal'
-          this.swiping = true
-        }
-        else if(Math.abs(dy) > 3){
-          this._props['direction'] = 'vertical'
-        }
-      }
-      else if(this._props['direction'] === 'horizontal'){
-        let ix
-        if((this.index === this.items.length - 1 && dx < 0) ||
-            (this.index === 0 && dx > 0)){
-          ix = parseInt(this._props['ix'] + (dx * .19812))
-        }
-        else{
-          ix = parseInt(this._props['ix'] + dx)
-        }
-
-        this.$el.firstElementChild.style.transform = `translate3d(${ix}px, 0, 0)`
-      }
-
-    },
-
-    mouseUp(e){
-      if(this._props['direction'] === 'horizontal'){
-        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']
-
-        if (Math.abs(dx) > 10) {
-          if (tn < 1200){
-            dx < 0 ? this.next() : this.prev()
-          }
-          else{
-            this.setPosition()
-          }
-        }
-        else{
-          this.setPosition()
-        }
-
-        this.swiping = false
-      }
-
-      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)
-
-			if(this.autoPlay > 0)
-				this.play()
-    },
-
-    mouseDown(e){
-			if(!this.items || this.items.length <= 1)
-				return
-
-			this.stop()
-
-      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,
-        sy:typeof e.touches !== 'undefined' ? e.touches[0].clientY : e.clientY,
-        ix:ix,
-        t0:e.timeStamp,
-        direction: null
-      }
-
-      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>
-
-.comp{
-	overflow: hidden;
-	position: relative;
-  @apply flex flex-col;
-}
-
-.comp img{
-  pointer-events: none;
-}
-
-.carouselNext{
-	@apply absolute top-0 bottom-0 right-0 flex items-center justify-center;
-}
-
-.carouselPrev{
-	@apply absolute top-0 bottom-0 left-0 flex items-center justify-center;
-}
-
-.inner{
-	will-change: transform;
-	@apply flex flex-row items-stretch;
-}
-.inner>*{
-	display: inline-block;
-	width: 100%;
-	min-width: 100%;
-	vertical-align: top;
-}
-
-.legend{
-	@apply flex justify-center gap-2 py-1;
-}
-.legend .legendItem{
-}
-.legend .legendItem>*{
-	@apply w-2 h-2 rounded-full bg-gray-100;
-}
-.legend .legendItemActive>*{
-	@apply bg-primary-500;
-}
-
-.btn{
-  @apply w-[32px] h-[32px] md:w-[48px] md:h-[48px] rounded-full bg-black/50 flex items-center justify-center opacity-50 hover:opacity-70;
-}
-.btnSvg{
-  @apply w-[19px] h-[19px] md:w-[32px] md:h-[32px] fill-white/70 hover:fill-white/90;
-}
-
-
-</style>