@mixd-id/web-scaffold 0.1.240411101 → 0.1.240411103

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.1.240411101",
+  "version": "0.1.240411103",
   "scripts": {
     "dev": "vite serve",
     "build": "vite build",

package/src/components/Ahref.vue

@@ -55,7 +55,7 @@ export default {
 <style module>
 
 .button{
-	@apply p-2;
+	@apply p-2 h-[var(--h-cp)];
 	@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-border-50;
+	@apply border-[1px] border-text-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-border-200 bg-base-300 hover:border-text-300 rounded-lg;
+  @apply border-[1px] border-text-200 bg-base-300 hover:border-text-300 rounded-lg;
   @apply flex flex-row items-start flex-nowrap;
 }
 
 .item{
-  @apply border-[1px] border-border-200 hover:border-text-300 rounded-lg p-1 px-2;
+  @apply border-[1px] border-text-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-border-200 border-collapse w-full;
+	@apply border-[1px] border-text-200 border-collapse w-full;
 	table-layout: fixed;
 }
 .article table th, .article table td{
-	@apply border-[1px] border-border-200 p-3 text-left;
+	@apply border-[1px] border-text-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 px-8 rounded-lg relative inline-flex flex-row items-center justify-center;
+  @apply p-2 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/Cart.vue

@@ -19,7 +19,7 @@
         <h3>Cart</h3>
       </div>
 
-      <div class="divide-y divide-border-50 px-3 bg-base-300 min-h-[80vh]">
+      <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" />
@@ -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-border-50">
+      <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>

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-border-50">
+      <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">

package/src/components/Checkout.vue

@@ -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-border-50">
+      <div class="flex md:hidden p-5 py-3 bg-base-300 flex-row sticky bottom-0 border-t-[1px] border-text-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-border-50">
+    <div v-if="!newItem" class="flex flex-col divide-y divide-text-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-border-200 bg-base-300 rounded-lg flex flex-col overflow-hidden;
+  @apply border-[1px] border-text-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-border-100 border-[1px] rounded-lg">None</button>
+									class="w-full p-1 border-text-100 border-[1px] rounded-lg">None</button>
 					<button type="button" v-if="mode !== 'class' && Boolean(customColor)"
-									class="w-full p-1 border-border-100 border-[1px] rounded-lg"
+									class="w-full p-1 border-text-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-border-200;
+	@apply w-[24px] h-[24px] rounded-full cursor-pointer border-[2px] border-text-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-border-100 border-[1px] rounded-lg">None</button>
+                  class="w-full p-1 border-text-100 border-[1px] rounded-lg">None</button>
           <button type="button" v-if="mode !== 'class' && Boolean(customColor)"
-                  class="w-full p-1 border-border-100 border-[1px] rounded-lg"
+                  class="w-full p-1 border-text-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-border-200;
+	@apply w-[24px] h-[24px] rounded-full cursor-pointer border-[2px] border-text-200;
 }
 
 .inputColor{

package/src/components/ColorPicker3.vue

@@ -9,7 +9,7 @@
     </Dropdown>
 
     <div v-if="computedBackground"
-         class="h-[8px] border-[1px] border-border-200 rounded-lg"
+         class="h-[8px] border-[1px] border-text-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-border-50;
+	@apply border-[1px] border-text-50;
 	@apply min-w-[280px] max-w-[80vw] md:max-w-[480px];
 }
 

package/src/components/ContextMenu.vue

@@ -242,7 +242,7 @@ export default {
 
 .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-border-50 mt-[1px];
+	@apply whitespace-nowrap shadow-2xl border-[1px] border-text-50 mt-[1px];
   z-index: 180;
 }
 

package/src/components/Dashboard.vue

@@ -1,7 +1,7 @@
 <template>
   <div :class="$style.comp">
 
-    <div v-if="config.params.openSidebar" :style="leftStyle" class="relative flex flex-col bg-base-300 border-l-[1px] border-border-50">
+    <div v-if="config.params.openSidebar" :style="leftStyle" class="relative flex flex-col bg-base-300 border-l-[1px] border-text-50">
       <DashboardConfigs :config="config" class="flex-1" />
 
       <div :class="$style.resize1" @mousedown="(e) => $util.dragResize(e, resize1)"></div>

package/src/components/Dashboard2.vue

@@ -1,7 +1,7 @@
 <template>
 	<div :class="$style.comp">
 
-    <div class="w-[480px] border-r-[1px] border-border-50">
+    <div class="w-[480px] border-r-[1px] border-text-50">
       <MetricSetting :value="preset.views[0]"/>
 
       <pre class="text-xs break-all">

package/src/components/DashboardComponentSelector.vue

@@ -17,7 +17,7 @@
 
 	    </div>
 	  </template>
-	  <div class="flex-1 divide-y divide-border-50">
+	  <div class="flex-1 divide-y divide-text-50">
 
       <div class="flex flex-col">
         <button v-for="component of components"

package/src/components/Datepicker.vue

@@ -1,6 +1,6 @@
 <template>
 
-	<div v-if="mode === ''" :class="compClass" class="divide-x divide-border-50">
+	<div v-if="mode === ''" :class="compClass" class="divide-x divide-text-50">
     <div class="w-[80px] flex flex-row items-center relative">
       <select v-model="DD" class="text-left w-full flex-1 px-3">
         <option disabled selected>Tanggal</option>
@@ -322,7 +322,7 @@ export default{
 
 .datepicker {
 	@apply flex overflow-hidden cursor-pointer relative;
-  @apply border-[1px] border-border-200 bg-base-300 rounded-lg;
+  @apply border-[1px] border-text-200 bg-base-300 rounded-lg;
 	@apply cursor-pointer;
 }
 .datepicker:not(.readonly){

package/src/components/DayTimeRange.vue

@@ -17,7 +17,7 @@
           <option value="-">Holiday</option>
         </select>
       </div>
-      <div class="flex-1 flex flex-col gap-1 pl-2 border-l-[1px] border-border-100 divide-y divide-text-100">
+      <div class="flex-1 flex flex-col gap-1 pl-2 border-l-[1px] border-text-100 divide-y divide-text-100">
         <div v-for="(range, i) in val.value" class="flex flex-row">
           <div class="flex-1 flex flex-row">
             <input type="time" v-model="val.value[i][0]" @blur="updateModelValue()">
@@ -111,7 +111,7 @@ export default{
 <style module>
 
 .comp{
-  @apply border-[1px] border-border-200 bg-base-500 rounded-lg;
+  @apply border-[1px] border-text-200 bg-base-500 rounded-lg;
   @apply inline-flex flex-col divide-y divide-text-100;
 }
 

package/src/components/Flex.vue

@@ -1,12 +1,10 @@
 <template>
 	<div :class="$style.Flex" :style="computedStyle">
 
-		<slot name="default">
-      <component v-for="item in items"
-                 :is="item.type"
-                 :key="item.key"
-                 :="item" />
-    </slot>
+		<component v-for="item in items"
+							 :is="item.type"
+               :key="item.key"
+							 :="item" />
 
 	</div>
 </template>

package/src/components/GHeatMaps.vue

@@ -14,7 +14,7 @@
 
     <div class="flex flex-row">
 
-      <div class="flex-1 flex items-center justify-center divide-x divide-border-50 border-l-[1px] border-r-[1px] border-border-50">
+      <div class="flex-1 flex items-center justify-center divide-x divide-text-50 border-l-[1px] border-r-[1px] border-text-50">
         <button type="button" class="p-1 px-3 hover:bg-primary text-text-400" @click="zoomOut">
           <svg width="16" height="16" class="fill-text-500 hover: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="M400 288h-352c-17.69 0-32-14.32-32-32.01s14.31-31.99 32-31.99h352c17.69 0 32 14.3 32 31.99S417.7 288 400 288z"/></svg>
         </button>
@@ -44,7 +44,7 @@
 
 <script>
 
-import {Loader} from '@googlemaps/js-api-loader';
+import { Loader } from '@googlemaps/js-api-loader';
 import {readyStateMixin} from "../mixin/ready-state";
 
 let loader = null
@@ -311,7 +311,7 @@ export default{
 <style module>
 
 .comp{
-	@apply flex flex-col h-[40vh] border-[1px] border-border-50 bg-base-500 rounded-xl overflow-hidden;
+	@apply flex flex-col h-[40vh] border-[1px] border-text-50 bg-base-500 rounded-xl overflow-hidden;
 }
 
 </style>

package/src/components/HTMLEditor.vue

@@ -554,15 +554,11 @@ export default{
 <style module>
 
 .comp{
-	@apply flex-1 flex flex-col border-[1px] border-border-200 rounded-lg overflow-hidden;
-}
-
-.comp article:before{
-  content: " "
+	@apply flex-1 flex flex-col border-[1px] border-text-200 rounded-lg overflow-hidden;
 }
 
 .comp article {
-	@apply w-full outline-none p-3 leading-6 bg-base-300;
+	@apply min-h-[var(--h-cp)] w-full outline-none p-3 leading-6 bg-base-300;
 	@apply flex-1 overflow-auto;
 }
 
@@ -579,10 +575,10 @@ export default{
 }
 
 .comp table{
-	@apply border-[1px] border-border-200 border-collapse;
+	@apply border-[1px] border-text-200 border-collapse;
 }
 .comp table th, .comp table td{
-	@apply border-[1px] border-border-200 p-3 text-left;
+	@apply border-[1px] border-text-200 p-3 text-left;
 }
 
 </style>

package/src/components/Image.vue

@@ -274,7 +274,7 @@ export default{
 }
 
 .shimmer{
-	@apply bg-text-300 animate-pulse;
+	@apply bg-text-200 animate-pulse;
 }
 
 </style>

package/src/components/ImportModal.vue

@@ -28,7 +28,7 @@
 		</template>
 
 		<div class="flex-1 p-5 flex flex-col items-center justify-center" v-if="step === 1">
-			<button type="button" @click="$refs.uploader.click()" class="rounded-3xl w-[160px] bg-base-300 px-6 aspect-square flex items-center justify-center text-center border-dashed border-[3px] border-border-100">
+			<button type="button" @click="$refs.uploader.click()" class="rounded-3xl w-[160px] bg-base-300 px-6 aspect-square flex items-center justify-center text-center border-dashed border-[3px] border-text-100">
 				<div class="text-xl" v-if="!isLoading">
 					Click to <br />
 					<span class="text-primary text-lg">Upload</span>