@mixd-id/web-scaffold 0.1.250801003 → 0.1.250801005

package/docs/components/Dashboard.md

@@ -0,0 +1,56 @@
+# Dashboard
+Dashboard components
+
+## Configs
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| params | Object | {} | | Dashboard parameters |
+| params.presetUid | String | "" | | Preset unique identifier |
+
+## Samples
+```json
+{
+  "params": {
+    "presetUid": "abc",
+    "viewUid": "def"
+  },
+  
+  "presets": [
+
+    {
+      "name": "Preset Name",
+      
+      "views": [
+        {
+          "type": "Grid",
+          "uid": ":uid"
+        }
+      ],
+      
+      "datasource": {
+        
+        ":uid": {
+          "uid": ":uid",
+          "datasourceUid": "234",
+          "filters": [],
+          "sorts": [],
+          "groups": [],
+          "pivot": []
+        },
+        
+      }
+      
+    }
+    
+  ]
+}
+```
+
+
+## Sub Components
+
+### Dashboard Configs
+Dashboard configuration panel
+
+### Dashboard Component Selector
+Component selector for adding component to preset views

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.1.250801003",
+  "version": "0.1.250801005",
   "scripts": {
     "dev": "vite serve",
     "build": "vite build",
@@ -64,6 +64,7 @@
     "glob": "^8.0.3",
     "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",
+    "marked": "^16.4.1",
     "md5": "^2.3.0",
     "mitt": "^3.0.1",
     "pinia": "^2.0.2",

package/src/components/Ahref.vue

@@ -55,7 +55,7 @@ export default {
 <style module>
 
 .button{
-	@apply p-2 h-[var(--h-cp)];
+	@apply p-2;
 	@apply relative flex items-center justify-center;
 	@apply whitespace-nowrap text-ellipsis overflow-hidden;
 	@apply rounded-lg;

package/src/components/Alert.vue

@@ -205,7 +205,7 @@ export default{
 
 .alert>*{
 	@apply max-h-[60vh] overflow-y-auto bg-base-400 dark:bg-base-300 rounded-xl;
-	@apply border-[1px] border-text-50;
+	@apply border-[1px] border-border-50;
 	@apply min-w-[280px] max-w-[80vw] md:max-w-[480px];
 }
 

package/src/components/ArrayList.vue

@@ -37,12 +37,12 @@ export default{
 
 .comp{
   @apply min-w-[200px] p-1;
-  @apply border-[1px] border-text-200 bg-base-300 hover:border-text-300 rounded-lg;
+  @apply border-[1px] border-border-200 bg-base-300 hover:border-text-300 rounded-lg;
   @apply flex flex-row items-start flex-nowrap;
 }
 
 .item{
-  @apply border-[1px] border-text-200 hover:border-text-300 rounded-lg p-1 px-2;
+  @apply border-[1px] border-border-200 hover:border-text-300 rounded-lg p-1 px-2;
   @apply flex flex-row items-center gap-2;
 }
 

package/src/components/Article.vue

@@ -376,11 +376,11 @@ export default{
 .article font[size='7']{ @apply text-4xl; }
 
 .article table{
-	@apply border-[1px] border-text-200 border-collapse w-full;
+	@apply border-[1px] border-border-200 border-collapse w-full;
 	table-layout: fixed;
 }
 .article table th, .article table td{
-	@apply border-[1px] border-text-200 p-3 text-left;
+	@apply border-[1px] border-border-200 p-3 text-left;
 	@apply break-words;
 }
 

package/src/components/Button.vue

@@ -137,7 +137,7 @@ export default{
 <style module>
 
 .button{
-  @apply p-2 rounded-lg relative inline-flex flex-row items-center justify-center;
+  @apply p-2 px-8 rounded-lg relative inline-flex flex-row items-center justify-center;
   @apply whitespace-nowrap text-ellipsis overflow-hidden min-h-7;
   @apply border-[1px];
   @apply active:top-[1px] active:left-[1px] disabled:top-0 disabled:left-0;

package/src/components/Card.vue

@@ -0,0 +1,221 @@
+<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"></slot>
+
+      </div>
+    </Transition>
+  </Teleport>
+	<div v-else :class="computedClass">
+    <slot name="default"></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(){
+      return this.mounted &&
+          (this.query ? this.query in this.$route.query : this._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 {
+      mounted: false,
+      _state: false
+    }
+  },
+
+  methods:{
+
+    close(){
+      if(!this.float) return
+
+      if(this.query){
+        this.$router.replace({
+          ...this.$route,
+          query: {
+            ...this.$route.query,
+            [this.query]: undefined
+          }
+        })
+      }
+      else{
+        this._state = false
+      }
+
+    },
+
+    open(){
+      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,
+
+    float: Boolean,
+
+    height: {
+      type: [ String, Number ],
+    },
+
+    state: {
+      type: Boolean,
+      default: false
+    },
+
+    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;
+}
+
+</style>

package/src/components/Cart.vue

@@ -19,7 +19,7 @@
         <h3>Cart</h3>
       </div>
 
-      <div class="divide-y divide-text-50 px-3 bg-base-300 min-h-[80vh]">
+      <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" />
@@ -56,7 +56,7 @@
         </div>
       </div>
 
-      <div class="p-5 py-3 bg-base-300 flex flex-row sticky bottom-0 border-t-[1px] border-text-50">
+      <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>

package/src/components/CartIcon.vue

@@ -23,7 +23,7 @@
     <ContextMenu ref="contextMenu"
                  position="bottom-right"
                  class="border-transparent">
-      <div class="flex flex-col min-w-[300px] divide-y divide-text-50">
+      <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">

package/src/components/Checkout.vue

@@ -66,7 +66,7 @@
 
           <div class="mt-1 p-5 bg-base-300 flex flex-col gap-3">
             <div v-for="item in order.items" class="flex flex-row gap-3">
-              <Image :src="item.imageSrc" class="w-[60px] aspect-square rounded-lg bg-base-50" />
+              <Image :src="item.imageSrc" class="w-[60px] aspect-square rounded-lg bg-base-300" />
               <div class="flex-1 flex flex-col gap1">
                 <small>{{ item.code }}</small>
                 <strong>{{ item.name }}</strong>
@@ -173,7 +173,7 @@
 
       </div>
 
-      <div class="flex md:hidden p-5 py-3 bg-base-300 flex-row sticky bottom-0 border-t-[1px] border-text-50">
+      <div class="flex md:hidden p-5 py-3 bg-base-300 flex-row sticky bottom-0 border-t-[1px] border-border-50">
         <div v-if="order?.total > 0" class="flex flex-col flex-1 leading-3">
           <small>Total</small>
           <h5>Rp. {{ order.total.toLocaleString() }}</h5>

package/src/components/CheckoutDelivery.vue

@@ -5,7 +5,7 @@
       <h3>Select Delivery</h3>
     </div>
 
-    <div v-if="!newItem" class="flex flex-col divide-y divide-text-50">
+    <div v-if="!newItem" class="flex flex-col divide-y divide-border-50">
       <div v-for="item in items"
            class="p-5 py-3 flex flex-col cursor-pointer"
            @click="apply(item)">

package/src/components/CodeEditor.vue

@@ -34,7 +34,7 @@ export default{
 <style module>
 
 .comp{
-  @apply border-[1px] border-text-200 bg-base-300 rounded-lg flex flex-col overflow-hidden;
+  @apply border-[1px] border-border-200 bg-base-300 rounded-lg flex flex-col overflow-hidden;
 }
 
 .comp code{

package/src/components/ColorPicker.vue

@@ -20,9 +20,9 @@
 				</div>
 				<div class="grid grid-cols-2 gap-4">
 					<button type="button" @click="select('')"
-									class="w-full p-1 border-text-100 border-[1px] rounded-lg">None</button>
+									class="w-full p-1 border-border-100 border-[1px] rounded-lg">None</button>
 					<button type="button" v-if="mode !== 'class' && Boolean(customColor)"
-									class="w-full p-1 border-text-100 border-[1px] rounded-lg"
+									class="w-full p-1 border-border-100 border-[1px] rounded-lg"
 									@click="$refs.inputColor.click()">Custom</button>
 				</div>
 			</div>
@@ -150,7 +150,7 @@ export default{
 }
 
 .circle{
-	@apply w-[24px] h-[24px] rounded-full cursor-pointer border-[2px] border-text-200;
+	@apply w-[24px] h-[24px] rounded-full cursor-pointer border-[2px] border-border-200;
 }
 
 .inputColor{

package/src/components/ColorPicker2.vue

@@ -24,9 +24,9 @@
         </div>
         <div class="grid grid-cols-2 gap-4">
           <button type="button" @click="select('')"
-                  class="w-full p-1 border-text-100 border-[1px] rounded-lg">None</button>
+                  class="w-full p-1 border-border-100 border-[1px] rounded-lg">None</button>
           <button type="button" v-if="mode !== 'class' && Boolean(customColor)"
-                  class="w-full p-1 border-text-100 border-[1px] rounded-lg"
+                  class="w-full p-1 border-border-100 border-[1px] rounded-lg"
                   @click="$refs.inputColor.click()">Custom</button>
         </div>
       </div>
@@ -173,7 +173,7 @@ export default{
 }
 
 .circle{
-	@apply w-[24px] h-[24px] rounded-full cursor-pointer border-[2px] border-text-200;
+	@apply w-[24px] h-[24px] rounded-full cursor-pointer border-[2px] border-border-200;
 }
 
 .inputColor{

package/src/components/ColorPicker3.vue

@@ -9,7 +9,7 @@
     </Dropdown>
 
     <div v-if="computedBackground"
-         class="h-[8px] border-[1px] border-text-200 rounded-lg"
+         class="h-[8px] border-[1px] border-border-200 rounded-lg"
          :style="{ background:computedBackground }"></div>
 
     <div v-if="mode === 'solid'">

package/src/components/Confirm.vue

@@ -123,7 +123,7 @@ export default{
 
 .confirm>*{
 	@apply max-h-[60vh] overflow-y-auto bg-base-400 dark:bg-base-300 rounded-xl;
-	@apply border-[1px] border-text-50;
+	@apply border-[1px] border-border-50;
 	@apply min-w-[280px] max-w-[80vw] md:max-w-[480px];
 }
 

package/src/components/ContextMenu.vue

@@ -241,8 +241,8 @@ export default {
 <style module>
 
 .contextMenu{
-	@apply fixed bg-base-400 dark:bg-base-300 min-w-[150px] overflow-y-auto rounded-lg;
-	@apply whitespace-nowrap shadow-2xl border-[1px] border-text-50 mt-[1px];
+	@apply fixed bg-base-400 backdrop-blur-xl min-w-[150px] overflow-y-auto rounded-lg;
+	@apply whitespace-nowrap shadow-2xl border-[1px] border-border-50 mt-[1px];
   z-index: 180;
 }
 

package/src/components/ContextMenuItem.vue

@@ -0,0 +1,53 @@
+<template>
+  <div :class="$style.item">
+    <div class="py-1">
+      <div :class="`${$style.indicator}${value.status === 2 ? ` ${$style.read}` : ''}`"></div>
+    </div>
+    <div class="flex-1 flex flex-col">
+      <div class="flex flex-row gap-6">
+        <strong class="flex-1 text-ellipsis-nowrap">{{ value.title }}</strong>
+        <small class="text-text-400">{{ dayjs(value.createdAt).format('D MMM HH:mm') }}</small>
+      </div>
+      <div>
+        <p class="whitespace-pre-wrap line-clamp-2">Biscuit bonbon gummi bears biscuit jelly-o cupcake danish tart carrot cake. Icing muffin gummi bears</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import dayjs from "dayjs";
+
+export default{
+  methods: {dayjs},
+
+  props: {
+
+    value: Object
+
+  }
+
+}
+
+</script>
+
+<style module>
+
+.item {
+  @apply flex flex-row gap-3 p-3;
+}
+
+.item:hover{
+  @apply bg-primary-50;
+}
+
+.indicator{
+  @apply w-[14px] h-[14px] rounded-full bg-primary-600;
+}
+
+.indicator.read{
+  @apply bg-text-300;
+}
+
+</style>