@mixd-id/web-scaffold 0.2.240705 → 0.2.250801009

package/src/components/Carousel.vue

@@ -5,30 +5,42 @@
        :style="computedStyle">
 
     <div ref="inner" :class="computedContainerClass">
-			<div v-for="item in cItems" :class="computedItemClass">
+			<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="cItems && cItems.length > 1" :class="$style.carouselNext" @click="next(true)">
-      <slot name="next"></slot>
+    <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="cItems && cItems.length > 1" :class="$style.carouselPrev" @click="prev">
+		<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 v-if="useLegend && cItems && cItems.length > 1" :class="$style.legend">
-      <div v-for="_index in cItems.length"
-					 :class="$style.legendItem + (index === _index - 1 ? ` ${$style.legendItemActive}` : '')"
-           @click="index = _index - 1">
+    <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>
+          <div></div>
         </slot>
       </div>
     </div>
+
   </div>
 </template>
 
@@ -38,51 +50,10 @@ import {componentMixin} from "../mixin/component";
 
 export default{
 
-  computed: {
-
-    cItems(){
-
-      if(!this.dataKey)
-        return this.items
-
-      const page = this.getPage()
-      const obj = page.data?.find(_ => _.key === this.dataKey)
-      return obj ?
-          obj.value.map(_ => ({
-            ...this.items[0],
-            data: _
-          })) :
-          []
-    },
-
-    computedContainerClass(){
-      return [
-        this.$style.inner,
-        this.containerClass
-      ]
-          .filter(_ => _)
-          .join(' ')
-    },
-
-    computedItemClass(){
-      return [
-        this.$style.item,
-        this.itemClass
-      ]
-          .filter(_ => _)
-          .join(' ')
-    }
-
-  },
-
 	mixins: [ componentMixin ],
 
   props:{
 
-    data: Object,
-
-    dataKey: String,
-
     items: Array,
 
 		infinite: {
@@ -96,10 +67,34 @@ export default{
 
 		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,
@@ -147,7 +142,7 @@ export default{
 			const index = this.index
 			let left = 0
       const gapPx = parseInt(window.getComputedStyle(this.$refs.inner).getPropertyValue('column-gap'))
-			for(let curIndex = 0 ; curIndex < this.cItems.length ; curIndex++){
+			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))
@@ -168,7 +163,7 @@ export default{
 		},
 
     setIndex(index){
-      if(index >= 0 && index < this.cItems.length){
+      if(index >= 0 && index < this.items.length){
         this.index = index
         this.setPosition()
       }
@@ -177,8 +172,8 @@ export default{
     next(useBack){
       let index = this.index + 1
 
-      if(index >= this.cItems.length)
-        index = useBack === true ? 0 : this.cItems.length - 1
+      if(index >= this.items.length)
+        index = useBack === true ? 0 : this.items.length - 1
 
       this.index = index
 
@@ -223,7 +218,7 @@ export default{
       }
       else if(this._props['direction'] === 'horizontal'){
         let ix
-        if((this.index === this.cItems.length - 1 && dx < 0) ||
+        if((this.index === this.items.length - 1 && dx < 0) ||
             (this.index === 0 && dx > 0)){
           ix = parseInt(this._props['ix'] + (dx * .19812))
         }
@@ -268,7 +263,7 @@ export default{
     },
 
     mouseDown(e){
-			if(!this.cItems || this.cItems.length <= 1)
+			if(!this.items || this.items.length <= 1)
 				return
 
 			this.stop()
@@ -318,9 +313,9 @@ export default{
 <style module>
 
 .comp{
-	white-space: nowrap;
 	overflow: hidden;
 	position: relative;
+  @apply flex flex-col;
 }
 
 .comp img{
@@ -328,15 +323,14 @@ export default{
 }
 
 .carouselNext{
-	@apply absolute top-0 bottom-0 right-0 w-[20px];
+	@apply absolute top-0 bottom-0 right-0 flex items-center justify-center;
 }
 
 .carouselPrev{
-	@apply absolute top-0 bottom-0 left-0 w-[20px];
+	@apply absolute top-0 bottom-0 left-0 flex items-center justify-center;
 }
 
 .inner{
-	white-space: nowrap;
 	will-change: transform;
 	@apply flex flex-row items-stretch;
 }
@@ -359,5 +353,12 @@ export default{
 	@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>

package/src/components/Cart.vue

@@ -0,0 +1,192 @@
+<template>
+	<div :class="$style.el">
+
+    <div v-if="readyState === 2" class="flex justify-center items-center min-h-[80vh]">
+      Loading...
+    </div>
+
+    <div v-else-if="!cart" class="flex flex-col gap-4 justify-center items-center min-h-[80vh]">
+      <div class="text-center">
+        <h1>Cart is Empty</h1>
+        <p class="max-w-[480px]">Your cart is empty, if you're interested in our products, browse products from our catalog by clicking button below.</p>
+      </div>
+      <router-link to="/" class="text-primary">Browse Catalog</router-link>
+    </div>
+
+    <div v-else class="flex flex-col">
+
+      <div class="p-5">
+        <h3>Cart</h3>
+      </div>
+
+      <div class="divide-y divide-border-50 px-3 bg-base-300 min-h-[80vh]">
+        <div v-for="item in cart.items" class="flex flex-row gap-2 p-2">
+          <Checkbox v-model="item.checked" />
+          <Image :src="item.imageUrl" class="w-[56px] aspect-square rounded-lg" />
+          <div class="flex-1 flex flex-col">
+            <small>{{ item.code }}</small>
+            <label>{{ item.name }}</label>
+            <div class="flex flex-row gap-2">
+              <strong>Rp. {{ item.price.toLocaleString() }}</strong>
+              <button type="button" class="text-primary text-xs" @click="remove(item)">
+                <svg width="11" height="11" class="fill-text" 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="M432 80h-82.38l-34-56.75C306.1 8.827 291.4 0 274.6 0H173.4C156.6 0 141 8.827 132.4 23.25L98.38 80H16C7.125 80 0 87.13 0 96v16C0 120.9 7.125 128 16 128H32v320c0 35.35 28.65 64 64 64h256c35.35 0 64-28.65 64-64V128h16C440.9 128 448 120.9 448 112V96C448 87.13 440.9 80 432 80zM171.9 50.88C172.9 49.13 174.9 48 177 48h94c2.125 0 4.125 1.125 5.125 2.875L293.6 80H154.4L171.9 50.88zM352 464H96c-8.837 0-16-7.163-16-16V128h288v320C368 456.8 360.8 464 352 464zM224 416c8.844 0 16-7.156 16-16V192c0-8.844-7.156-16-16-16S208 183.2 208 192v208C208 408.8 215.2 416 224 416zM144 416C152.8 416 160 408.8 160 400V192c0-8.844-7.156-16-16-16S128 183.2 128 192v208C128 408.8 135.2 416 144 416zM304 416c8.844 0 16-7.156 16-16V192c0-8.844-7.156-16-16-16S288 183.2 288 192v208C288 408.8 295.2 416 304 416z"/></svg>
+              </button>
+            </div>
+          </div>
+          <div class="flex flex-col items-end gap-1">
+            <Textbox class="w-[100px]"
+                     v-model="item.qty"
+                     item-class="text-center p-1">
+              <template #start>
+                <button type="button"
+                        class="p-2"
+                        @click="item.qty = (res => res < 1 ? 1 : res)(item.qty - 1)">
+                  <svg width="14" height="14" class="fill-text" 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="M432 256C432 269.3 421.3 280 408 280H40c-13.25 0-24-10.74-24-23.99C16 242.8 26.75 232 40 232h368C421.3 232 432 242.8 432 256z"/></svg>
+                </button>
+              </template>
+              <template #end>
+                <button type="button"
+                        class="p-2"
+                        @click="item.qty = (res => res > 5 ? 5 : res)(item.qty + 1)">
+                  <svg width="14" height="14" class="fill-text" 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="M432 256C432 269.3 421.3 280 408 280h-160v160c0 13.25-10.75 24.01-24 24.01S200 453.3 200 440v-160h-160c-13.25 0-24-10.74-24-23.99C16 242.8 26.75 232 40 232h160v-160c0-13.25 10.75-23.99 24-23.99S248 58.75 248 72v160h160C421.3 232 432 242.8 432 256z"/></svg>
+                </button>
+              </template>
+            </Textbox>
+          </div>
+        </div>
+      </div>
+
+      <div class="p-5 py-3 bg-base-300 flex flex-row sticky bottom-0 border-t-[1px] border-border-50">
+        <div v-if="cart?.total > 0" class="flex flex-col flex-1 leading-3">
+          <small>Total</small>
+          <h5>Rp. {{ cart.total.toLocaleString() }}</h5>
+        </div>
+        <div v-else class="flex-1"></div>
+        <Button ref="checkoutBtn"
+                class="px-3"
+                :state="canCheckout ? 1 : -1"
+                @click="checkout">
+          Checkout
+        </Button>
+      </div>
+
+    </div>
+
+  </div>
+</template>
+
+<script>
+
+import axios from "axios";
+import {invokeAfterIdle} from "../utils/helpers.mjs";
+
+export default {
+
+  inject: [ 'alert' ],
+
+  computed: {
+
+    canCheckout(){
+      return this.apiUrl &&
+          this.cart && (this.cart.items ?? []).some(item => item.checked)
+    }
+
+  },
+
+  props: {
+
+    apiUrl: String
+
+  },
+
+  methods: {
+
+    calculate(){
+      if(!this.cart) return
+
+      let subtotal = 0;
+      for(let item of this.cart.items){
+        if(!item.checked) continue
+
+        subtotal += item.qty * item.price
+      }
+
+      this.cart.total = subtotal
+
+      this.update()
+    },
+
+    checkout(){
+      this.$refs.checkoutBtn.setState(2)
+      axios.post(import.meta.env.VITE_API_HOST + this.apiUrl, {
+        action: 'checkout',
+        cart: this.cart
+      })
+        .then(res => {
+          if(res.data.target)
+            this.$router.push(res.data.target)
+        })
+        .catch(err => this.alert(err))
+        .finally(_ => this.$refs.checkoutBtn.resetState())
+    },
+
+    load(){
+      this.readyState = 2
+      axios.get(import.meta.env.VITE_API_HOST + this.apiUrl)
+        .then(res => {
+          this.cart = res.data
+          this.readyState = 1
+        })
+        .catch(err => {
+          this.readyState = -1
+          this.error = err
+        })
+    },
+
+    remove(item){
+      this.cart.items.splice(this.cart.items.indexOf(item), 1)
+    },
+
+    update: invokeAfterIdle(function(){
+      axios.post(import.meta.env.VITE_API_HOST + this.apiUrl, {
+        action: 'update',
+        cart: this.cart
+      })
+    }, 1000),
+
+  },
+
+  data(){
+    return {
+      cart: null,
+      readyState: 1,
+      error: null,
+    }
+  },
+
+  mounted() {
+    this.load()
+  },
+
+  watch: {
+
+    cart: {
+      deep: true,
+      handler(){
+        this.calculate()
+      }
+    }
+
+  }
+
+}
+
+</script>
+
+<style module>
+
+.el{
+  @apply flex flex-col;
+}
+
+</style>

package/src/components/CartIcon.vue

@@ -0,0 +1,89 @@
+<template>
+	<button type="button"
+          :class="$style.comp"
+          @click="$refs.contextMenu.open($el)">
+
+    <div :class="$style.badge">3</div>
+
+    <slot name="icon">
+      <component v-if="items?.length > 0"
+                 v-for="item in items"
+                 :is="item.type"
+                 :key="item.key"
+                 :="item" />
+
+      <svg v-else
+           width="16"
+           height="16px"
+           class="fill-text"
+           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="M416 160h-72V120C344 53.83 290.2 0 224 0S104 53.83 104 120V160H32C14.33 160 0 174.3 0 192v240C0 476.2 35.82 512 80 512h288c44.18 0 80-35.82 80-80V192C448 174.3 433.7 160 416 160zM152 120C152 80.3 184.3 48 224 48s72 32.3 72 72V160h-144V120zM400 432c0 17.64-14.36 32-32 32h-288c-17.64 0-32-14.36-32-32v-224h56v56C104 277.3 114.8 288 128 288s24-10.75 24-24V208h144v56C296 277.3 306.8 288 320 288s24-10.75 24-24V208h56V432z"/></svg>
+    </slot>
+
+    <ContextMenu ref="contextMenu"
+                 position="bottom-right"
+                 class="border-transparent">
+      <div class="flex flex-col min-w-[300px] divide-y divide-border-50">
+
+        <div class="" @click.stop>
+          <div class="p-5 py-3 flex flex-row items-center">
+            <div class="flex-1">
+              <h5>Shopping Cart</h5>
+            </div>
+          </div>
+
+          <div>
+            <div class="min-h-[160px] flex items-center justify-center">
+              <label class="text-text-400">
+                No item in cart
+              </label>
+            </div>
+          </div>
+        </div>
+
+        <div class="text-center p-3">
+          <router-link to="/cart" type="button" class="text-primary">Open Cart</router-link>
+        </div>
+
+      </div>
+    </ContextMenu>
+
+  </button>
+</template>
+
+<script>
+
+import {componentMixin} from "../mixin/component";
+
+export default {
+
+  mixins: [ componentMixin ],
+
+  props: {
+
+    items: Array
+
+  },
+
+  methods: {
+
+
+  }
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+  @apply relative;
+}
+
+.badge{
+  @apply rounded-full w-[16px] h-[16px] bg-text text-white pointer-events-none;
+  @apply absolute bottom-[-6px] right-[-12px];
+  @apply flex items-center justify-center text-xs;
+}
+
+</style>

package/src/components/ChartBar.vue

@@ -7,10 +7,9 @@
 
 <script>
 
-import { Bar } from 'vue-chartjs';
-import Chart from 'chart.js/auto'
+import {Bar} from 'vue-chartjs';
 import dayjs from "dayjs";
-import groupBy from "lodash/groupBy";
+import {groupBy} from "../utils/helpers.mjs";
 
 export default{
 

package/src/components/Checkbox.vue

@@ -1,25 +1,24 @@
 <template>
 	<div :class="$style.comp">
 		<input :id="id" type="checkbox" :checked="checked" @change="onChange" :disabled="isDisabled"/>
-		<label :for="id" :class="labelClass" class="whitespace-nowrap text-ellipsis overflow-hidden">
-			<div :class="$style.indicator" v-if="Boolean(showIcon)">
+		<label :for="id" :class="labelClass" class="whitespace-nowrap text-ellipsis overflow-hidden flex flex-row">
+			<span :class="$style.indicator" v-if="Boolean(showIcon)">
 				<Transition name="checkbox">
 					<div v-if="checked">
 						<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>
-      <label v-if="!$slots.item" :class="$style.label">
+			</span>
+      <div v-if="$slots.default" class="ml-2">
         <slot name="default"></slot>
-      </label>
-      <slot v-else name="item"></slot>
+      </div>
 		</label>
 	</div>
 </template>
 
 <script>
 
-import { parseBoolean } from "../utils/helpers.mjs";
+import {parseBoolean} from "../utils/helpers.mjs";
 
 export default {
 
@@ -40,7 +39,7 @@ export default {
 	computed: {
 
 		id(){
-			return this.$style.comp + this.uniqid()
+			return this.mounted ? this.$style.comp + this.uniqid() : ''
 		},
 
 		isDisabled(){
@@ -78,6 +77,12 @@ export default {
 
 	},
 
+  data(){
+    return {
+      mounted: false
+    }
+  },
+
 	methods: {
 
 		onChange(e){
@@ -118,7 +123,11 @@ export default {
       }
 		}
 
-	}
+	},
+
+  mounted() {
+    this.mounted = true
+  }
 
 }
 
@@ -131,7 +140,7 @@ export default {
 }
 
 .comp label{
-	@apply flex flex-row items-start gap-2;
+	@apply flex flex-row items-start;
 }
 
 .comp label *{
@@ -151,7 +160,7 @@ export default {
 }
 
 .indicator{
-	@apply w-[21px] h-[21px] rounded-lg border-[1px] border-text-200 bg-base-500;
+	@apply min-w-[21px] w-[21px] h-[21px] rounded-lg border-[1px] border-text-300 bg-base-300;
 	@apply flex items-center justify-center overflow-hidden;
 	transition:  border 300ms cubic-bezier(0.25, 1, 0.5, 1);
 }