@mixd-id/web-scaffold 0.1.240411023 → 0.1.240411025

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.1.240411023",
+  "version": "0.1.240411025",
   "scripts": {
     "dev": "vite serve",
     "build": "vite build",
@@ -37,6 +37,7 @@
       "require": "./src/utils/preset-selector.cjs",
       "import": "./src/utils/preset-selector.mjs"
     },
+    "./hooks/*": "./src/hooks/*",
     "./preset-selector.cjs": "./src/utils/preset-selector.cjs",
     "./preset-selector.js": "./src/utils/preset-selector.js",
     "./preset-selector.mjs": "./src/utils/preset-selector.mjs",
@@ -70,6 +71,7 @@
     "redis": "^4.6.13",
     "sequelize": "^6.37.6",
     "tailwindcss": "^3.2.4",
+    "tinycolor2": "^1.6.0",
     "vue": "^3.2.25",
     "vue-chartjs": "^5.2.0",
     "vue-router": "^4.0.14",

package/src/components/404.vue

@@ -0,0 +1,61 @@
+<template>
+	<div :class="$style.el">
+
+    <div>
+      <h1>{{ title }}</h1>
+      <p>{{ description }}</p>
+    </div>
+
+    <slot>
+      <component v-if="items?.length > 0"
+                 v-for="item in items"
+                 :is="item.type"
+                 :key="item.key"
+                 :="item" />
+
+      <router-link v-else :to="{ path:'/' }" class="text-primary">
+        Back to Home
+      </router-link>
+    </slot>
+
+  </div>
+</template>
+
+<script>
+
+export default {
+
+  props: {
+
+    description: {
+      type: String,
+      default: 'The page you are looking for does not exist.'
+    },
+
+    title: {
+      type: String,
+      default: 'Page Not Found'
+    },
+
+    items: Array
+
+  },
+
+  methods: {
+
+
+  }
+
+}
+
+</script>
+
+<style module>
+
+.el{
+  @apply w-full max-w-[600px] mx-auto;
+  @apply flex flex-col gap-8 items-center justify-center;
+  @apply min-h-[60vh]
+}
+
+</style>

package/src/components/AccountIcon.vue

@@ -0,0 +1,19 @@
+<template>
+	<button type="button">
+
+  </button>
+</template>
+
+<script setup>
+
+
+
+</script>
+
+<style module>
+
+.comp{
+
+}
+
+</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-text-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-text-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-text-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>