@mixd-id/web-scaffold 0.2.240705 → 0.2.250801009

package/src/widgets/PresetBarPivot.vue

@@ -4,7 +4,7 @@
     <div>
       <Checkbox v-model="pivot.enabled"
                 @change="apply()">
-        Pivot Enabled
+        Enabled
       </Checkbox>
     </div>
 
@@ -13,14 +13,14 @@
       <div>
         <div class="flex flex-row items-center gap-2">
           <label>Groups</label>
-          <button type="button" @click="$refs.columnSelector.open(obj => addPivot('rows', obj), columns)">
+          <button type="button" @click="$refs.columnSelector.open(obj => addPivot('rows', obj), pivotColumns)">
             <svg width="16" height="16" class="fill-primary" 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>
         </div>
         <ListItem :items="pivot.rows"
                   @reorder="(from, to) => { pivot.rows.splice(to, 0, pivot.rows.splice(from, 1)[0]); apply() }"
-                  class="mt-2 h-[25vh] overflow-y-auto border-[1px] border-text-200 bg-base-400 rounded-lg p-0.5"
-                  container-class="divide-y divide-text-50">
+                  class="mt-2 h-[25vh] overflow-y-auto border-[1px] border-border-200 bg-base-300 rounded-lg p-0.5"
+                  container-class="divide-y divide-border-50">
           <template v-slot="{ item, index }">
             <div class="flex flex-row items-center gap-3 p-2 bg-base-500 hover:bg-primary-100 first:rounded-t-md last:rounded-b-md">
               <div data-reorder v-if="(pivot.rows ?? []).length > 1">
@@ -33,7 +33,7 @@
                 </strong>
                 <select v-if="item.type === 'date'"
                         v-model="item.aggregrate"
-                        class="px-1 appearance-none bg-base-300 rounded-md border-[1px] border-text-50 outline-none"
+                        class="px-1 appearance-none bg-base-300 rounded-md border-[1px] border-border-50 outline-none"
                         @change="apply()">
                   <option value="hour">Hour</option>
                   <option value="date">Date</option>
@@ -58,8 +58,8 @@
         </div>
         <ListItem :items="pivot.values"
                   @reorder="(from, to) => { pivot.values.splice(to, 0, pivot.values.splice(from, 1)[0]); }"
-                  class="mt-2 h-[25vh] overflow-y-auto border-[1px] border-text-200 bg-base-400 rounded-lg p-0.5"
-                  container-class="divide-y divide-text-50">
+                  class="mt-2 h-[25vh] overflow-y-auto border-[1px] border-border-200 bg-base-300 rounded-lg p-0.5"
+                  container-class="divide-y divide-border-50">
           <template v-slot="{ item, index }">
             <div class="flex flex-row items-center gap-3 p-2 bg-base-500 hover:bg-primary-100 first:rounded-t-md last:rounded-b-md">
               <div data-reorder v-if="(pivot.values ?? []).length > 1">
@@ -71,15 +71,17 @@
                   {{ item.label ? item.label : item.key }}
                 </strong>
                 <select v-model="item.aggregrate"
-                        class="px-1 appearance-none bg-base-300 w-[80px] rounded-md border-[1px] border-text-50 outline-none"
+                        class="px-1 appearance-none bg-base-300 w-[80px] rounded-md border-[1px] border-border-50 outline-none"
                         @change="apply()">
                   <option value="">Default</option>
                   <option value="count">Count</option>
                   <option value="countDistinct">Distinct Count</option>
-                  <option v-if="[ 'number' ].includes(item.type)" value="sum">Sum</option>
-                  <option v-if="[ 'number' ].includes(item.type)" value="avg">Average</option>
-                  <option v-if="[ 'number' ].includes(item.type)" value="min">Min</option>
-                  <option v-if="[ 'number' ].includes(item.type)" value="max">Max</option>
+                  <option value="first">First</option>
+                  <option value="last">Last</option>
+                  <option v-if="[ 'number', 'currency' ].includes(item.type)" value="sum">Sum</option>
+                  <option v-if="[ 'number', 'currency' ].includes(item.type)" value="avg">Average</option>
+                  <option v-if="[ 'number', 'currency' ].includes(item.type)" value="min">Min</option>
+                  <option v-if="[ 'number', 'currency' ].includes(item.type)" value="max">Max</option>
                 </select>
               </div>
               <button type="button" @click="pivot.values.splice(index, 1); apply()">
@@ -100,8 +102,8 @@
         </div>
         <ListItem :items="pivot.columns"
                   @reorder="(from, to) => { pivot.columns.splice(to, 0, pivot.columns.splice(from, 1)[0]); pivot.manualColumns = true; apply() }"
-                  class="mt-2 h-[25vh] overflow-y-auto border-[1px] border-text-200 bg-base-400 rounded-lg p-0.5"
-                  container-class="divide-y divide-text-50">
+                  class="mt-2 h-[25vh] overflow-y-auto border-[1px] border-border-200 bg-base-300 rounded-lg p-0.5"
+                  container-class="divide-y divide-border-50">
           <template v-slot="{ item, index }">
             <div class="flex flex-row gap-2 items-center px-2 bg-base-500">
               <div data-reorder>
@@ -129,6 +131,8 @@
       </div>
 
     </div>
+    <br />
+    <br />
 
     <ColumnSelector ref="columnSelector" />
 
@@ -147,6 +151,14 @@ export default{
 
   emits: [ 'apply' ],
 
+  computed: {
+
+    pivotColumns(){
+      return this.columns.filter(_ => _.filterable === true && (_.pivot ?? true) !== false)
+    },
+
+  },
+
   methods: {
 
     apply(){
@@ -154,7 +166,11 @@ export default{
     },
 
     addPivot(type, obj){
-      console.log(this.pivot, type)
+      if(!Array.isArray(this.pivot[type])){
+        this.pivot[type] = []
+      }
+      console.log(this.pivot[type])
+
       this.pivot[type].push(Object.assign({}, obj))
       this.apply()
     },
@@ -179,8 +195,4 @@ export default{
 
 }
 
-.columnTextbox input::placeholder{
-  @apply text-text;
-}
-
 </style>

package/src/widgets/PresetSelector.vue

@@ -52,10 +52,10 @@
 	  </template>
 
     <div v-if="mode === 'select'" class="flex-1 flex flex-col">
-      <div class="flex flex-col bg-base-300 border-t-[1px] border-b-[1px] border-text-50 divide-y divide-text-50">
+      <div class="flex flex-col bg-base-300 border-t-[1px] border-b-[1px] border-border-50 divide-y divide-border-50">
         <div v-for="(preset, idx) in config.presets"
                 class="px-6 text-left hover:bg-primary-200 hover:text-white flex flex-row items-center">
-          <div class="flex-1 py-4" @click="select(idx)">
+          <div class="flex-1 py-4" @click="select(preset)">
             {{ preset.name }}
           </div>
           <button type="button"
@@ -69,7 +69,7 @@
 
       <ContextMenu ref="contextMenu" position="bottom-right">
         <template #default="{ context }">
-          <div class="flex flex-col min-w-[200px] divide-y divide-text-50">
+          <div class="flex flex-col min-w-[200px] divide-y divide-border-50">
 
             <button class="w-full p-3 text-left flex flex-row gap-3" :class="appStyle.menuItem"
                     @click="edit(context.idx)">
@@ -103,10 +103,10 @@
     <div v-else class="flex-1 flex flex-row">
 
       <div v-if="tabIndex === 1" class="flex-1 flex flex-row">
-        <div class="w-[240px] border-r-[1px] border-text-50 overflow-y-auto">
-          <div class="flex flex-col divide-y divide-text-50">
+        <div class="w-[240px] border-r-[1px] border-border-50 overflow-y-auto">
+          <div class="flex flex-col divide-y divide-border-50">
             <ListItem :items="presetColumns"
-                      body-class="divide-y divide-text-50"
+                      body-class="divide-y divide-border-50"
                       @reorder="(from, to) => { presetColumns.splice(to, 0, presetColumns.splice(from, 1)[0]); }">
               <template v-slot="{ item }">
                 <div class="flex flex-row items-center gap-3 px-3 p-2 hover:bg-primary-100"
@@ -118,7 +118,7 @@
                   <div class="flex-1 flex flex-row gap-2 items-center">
                     <div>
                       <div class="w-[14px] rounded-full h-[14px]"
-                           :class="!('visible' in item) || item.visible ? 'bg-primary' : 'bg-text-200'"></div>
+                           :class="!('visible' in item) || item.visible ? 'bg-primary' : 'bg-text-300'"></div>
                     </div>
                     {{ item.label ? item.label : item.key }}
                   </div>
@@ -150,9 +150,9 @@
       </div>
 
       <div v-if="tabIndex === 2" class="flex-1 flex flex-row">
-        <div class="w-[200px] border-r-[1px] border-text-50 overflow-y-auto">
+        <div class="w-[200px] border-r-[1px] border-border-50 overflow-y-auto">
 
-          <div class="flex flex-col divide-y divide-text-50 border-b-[1px] border-text-50">
+          <div class="flex flex-col divide-y divide-border-50 border-b-[1px] border-border-50">
             <button v-for="column in filterColumns"
                     type="button"
                     :disabled="filterColumnAdded(column)"
@@ -169,7 +169,7 @@
 
         </div>
 
-        <div class="flex-1 flex flex-col divide-y divide-text-50 overflow-y-auto">
+        <div class="flex-1 flex flex-col divide-y divide-border-50 overflow-y-auto">
 
           <div v-for="(filter, idx) in preset.filters" class="p-6">
 
@@ -334,7 +334,7 @@
             </div>
             <ListItem :items="presetPivot.rows"
                       @reorder="(from, to) => { presetPivot.rows.splice(to, 0, presetPivot.rows.splice(from, 1)[0]); }"
-                      class="mt-2 h-[200px] border-[1px] border-text-200">
+                      class="mt-2 h-[200px] border-[1px] border-border-200">
               <template v-slot="{ item, index }">
                 <div class="flex flex-row items-center gap-3 p-2 hover:bg-primary-100">
                   <div data-reorder>
@@ -371,7 +371,7 @@
             </div>
             <ListItem :items="presetPivot.columns"
                       @reorder="(from, to) => { presetPivot.columns.splice(to, 0, presetPivot.columns.splice(from, 1)[0]); }"
-                      class="mt-2 h-[200px] border-[1px] border-text-200">
+                      class="mt-2 h-[200px] border-[1px] border-border-200">
               <template v-slot="{ item, index }">
                 <div class="flex flex-row items-center gap-3 p-2 hover:bg-primary-100">
                   <div data-reorder>
@@ -399,7 +399,7 @@
             </div>
             <ListItem :items="presetPivot.values"
                       @reorder="(from, to) => { presetPivot.values.splice(to, 0, presetPivot.values.splice(from, 1)[0]); }"
-                      class="mt-2 h-[200px] border-[1px] border-text-200">
+                      class="mt-2 h-[200px] border-[1px] border-border-200">
               <template v-slot="{ item, index }">
                 <div class="flex flex-row items-center gap-3 p-2 hover:bg-primary-100">
                   <div data-reorder>
@@ -464,7 +464,7 @@ export default{
 
   emits: [ 'select' ],
 
-	inject: [ 'appStyle', 'alert', 'confirm', 'socketEmit2' ],
+	inject: [ 'appStyle', 'alert', 'confirm' ],
 
   props: {
 
@@ -479,6 +479,18 @@ export default{
 
   computed: {
 
+    configParams(){
+      if(!this.config.params)
+        this.config.params = {}
+
+      if(this.config.presets.length > 0 &&
+          (!this.config.params.presetIdx ||
+              !this.config.presets.find(_ => _.uid === this.config.params.presetIdx)))
+        this.config.params.presetIdx = this.config.presets[0].uid
+
+      return this.config.params
+    },
+
     filterColumns(){
       return JSON.parse(JSON.stringify(this.config.columns ?? []))
           .filter(_ => !('filterable' in _) || _.filterable)
@@ -641,8 +653,8 @@ export default{
       })
     },
 
-    select(idx){
-      this.config.presetIdx = idx
+    select(item){
+      this.configParams.presetIdx = item.uid
       this.close()
       this.$emit('select')
     },
@@ -652,7 +664,7 @@ export default{
         return 'boolean'
       else if([ 'date' ].includes(type))
         return 'date'
-      else if([ 'number' ].includes(type))
+      else if([ 'number', 'currency', 'decimal' ].includes(type))
         return 'number'
       else
         return 'text'

package/src/widgets/SearchModalSetting.vue

@@ -0,0 +1,70 @@
+<template>
+  <div :class="$style.comp">
+
+    <div class="p-6 py-4 flex flex-col gap-4">
+
+      <div>
+        <label class="flex-1 text-text-400">API Url</label>
+        <Textbox v-model="item.props.apiUrl"/>
+      </div>
+
+    </div>
+
+    <ComponentSetting2 :item="item"
+                       :view-type="viewType"
+                       :view-types="viewTypes"
+                       :view-index="viewIndex"
+                       defaultDisplay="block"
+                       @change="$emit('change')" />
+
+  </div>
+</template>
+
+<script>
+
+export default{
+
+  emits: [ 'change' ],
+
+  props: {
+
+    item: {
+      type: Object,
+      required: true
+    },
+
+    viewType: String,
+
+    viewIndex: Number,
+
+    viewTypes: Array,
+
+  },
+
+  data(){
+    return {
+    }
+  },
+
+  inject: [ ],
+
+  methods: {
+
+
+  },
+
+  computed: {
+
+  }
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+  @apply flex flex-col divide-y divide-border-50;
+}
+
+</style>

package/src/widgets/Share.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="$style.comp">
+  <div :class="$style.comp" :data-uid="uid">
     <strong v-if="title" class="mr-6">{{ title }}</strong>
 
     <div v-if="direction === 'vertical'" class="flex-1 flex flex-col divide-y divide-text-100 self-stretch">
@@ -110,7 +110,6 @@ export default{
     },
 
     waShareUrl(){
-      if(typeof window === 'undefined') return
       return `https://wa.me/send?text=` + encodeURIComponent(this.currentUrl)
     },
 

package/src/widgets/ShareSetting.vue

@@ -1,59 +1,64 @@
 <template>
 	<div :class="$style.comp">
 
-		<div>
-			<label class="text-text-400">Title</label>
-			<Textbox v-model="item.props.title" @keyup.enter="$emit('change')"/>
-		</div>
-
-		<div>
-			<div class="flex flex-row items-center gap-4">
-				<label class="flex-1 text-text-400">Platform</label>
-				<button type="button" class="text-primary p-2" @click="(e) => $refs.contextMenu.open(e.target)">Add Platform</button>
-			</div>
-			<ListItem :items="item.props.channels"
-								@reorder="(from, to) => { item.props.channels.splice(to, 0, item.props.channels.splice(from, 1)[0]); $emit('change') }">
-				<template v-slot="{ item:channel, index }">
-					<div class="flex flex-row items-center gap-2 mb-1 bg-text-50 rounded-lg p-2">
-						<div data-reorder>
-							<svg width="14" height="14" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M496 288H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16zm0-128H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16z"/></svg>
-						</div>
-						<div class="flex-1">{{ channel.channel }}</div>
-						<div>
-							<button type="button" @click="confirm('Hapus channel ini?', '', () => { item.props.channels.splice(index, 1); $emit('change') })">
-								<svg width="16" height="16" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"/></svg>
-							</button>
-						</div>
-					</div>
-				</template>
-			</ListItem>
-		</div>
-
-		<ComponentSetting2 :item="item"
-											:view-type="viewType"
-											:view-types="viewTypes"
-											defaultDisplay="flex"
-											@change="$emit('change')" />
-
-		<ContextMenu ref="contextMenu" position="bottom-right">
-			<div class="flex flex-col min-w-[200px]">
-				<button type="button" class="p-3 disabled:text-text-300"
-								@click="item.props.channels.push({ channel:'facebook' });$emit('change')"
-								:disabled="item.props.channels.findIndex(_ => _.channel === 'facebook') > -1">Facebook</button>
-
-				<button type="button" class="p-3 disabled:text-text-300"
-								@click="item.props.channels.push({ channel:'twitter' });$emit('change')"
-								:disabled="item.props.channels.findIndex(_ => _.channel === 'twitter') > -1">Twitter</button>
-
-				<button type="button" class="p-3 disabled:text-text-300"
-								@click="item.props.channels.push({ channel:'whatsapp' });$emit('change')"
-								:disabled="item.props.channels.findIndex(_ => _.channel === 'whatsapp') > -1">Whatsapp</button>
-
-				<button type="button" class="p-3 disabled:text-text-300"
-								@click="item.props.channels.push({ channel:'instagram' });$emit('change')"
-								:disabled="item.props.channels.findIndex(_ => _.channel === 'instagram') > -1">Instagram</button>
-			</div>
-		</ContextMenu>
+		<div class="p-6 py-4 flex flex-col gap-4">
+      <div>
+        <label class="text-text-400">Title</label>
+        <Textbox v-model="item.props.title" @keyup.enter="$emit('change')"/>
+      </div>
+
+      <div>
+        <div class="flex flex-row items-center gap-4">
+          <label class="flex-1 text-text-400">Platform</label>
+          <button type="button" class="text-primary p-2" @click="(e) => $refs.contextMenu.open(e.target)">Add Platform</button>
+        </div>
+        <ListItem :items="item.props.channels"
+                  class="border-[1px] border-border-200 bg-base-300 rounded-lg overflow-hidden"
+                  container-class="divide-y divide-border-50"
+                  @reorder="(from, to) => { item.props.channels.splice(to, 0, item.props.channels.splice(from, 1)[0]); $emit('change') }">
+          <template v-slot="{ item:channel, index }">
+            <div class="flex flex-row items-center gap-2 p-2">
+              <div data-reorder>
+                <svg width="14" height="14" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M496 288H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16zm0-128H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16z"/></svg>
+              </div>
+              <div class="flex-1">{{ channel.channel }}</div>
+              <div>
+                <button type="button" @click="confirm('Hapus channel ini?', '', () => { item.props.channels.splice(index, 1); $emit('change') })">
+                  <svg width="16" height="16" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"/></svg>
+                </button>
+              </div>
+            </div>
+          </template>
+        </ListItem>
+      </div>
+    </div>
+
+    <ContextMenu ref="contextMenu" position="bottom-right">
+      <div class="flex flex-col min-w-[200px]">
+        <button type="button" class="p-3 disabled:text-text-300"
+                @click="item.props.channels.push({ channel:'facebook' });$emit('change')"
+                :disabled="item.props.channels.findIndex(_ => _.channel === 'facebook') > -1">Facebook</button>
+
+        <button type="button" class="p-3 disabled:text-text-300"
+                @click="item.props.channels.push({ channel:'twitter' });$emit('change')"
+                :disabled="item.props.channels.findIndex(_ => _.channel === 'twitter') > -1">Twitter</button>
+
+        <button type="button" class="p-3 disabled:text-text-300"
+                @click="item.props.channels.push({ channel:'whatsapp' });$emit('change')"
+                :disabled="item.props.channels.findIndex(_ => _.channel === 'whatsapp') > -1">Whatsapp</button>
+
+        <button type="button" class="p-3 disabled:text-text-300"
+                @click="item.props.channels.push({ channel:'instagram' });$emit('change')"
+                :disabled="item.props.channels.findIndex(_ => _.channel === 'instagram') > -1">Instagram</button>
+      </div>
+    </ContextMenu>
+
+    <ComponentSetting2 :item="item"
+                       :view-type="viewType"
+                       :view-types="viewTypes"
+                       :view-index="viewIndex"
+                       defaultDisplay="block"
+                       @change="$emit('change')" />
 
 	</div>
 </template>
@@ -68,14 +73,16 @@ export default{
 
 	props: {
 
-		item: {
-			type: Object,
-			required: true
-		},
+    item: {
+      type: Object,
+      required: true
+    },
 
-		viewType: String,
+    viewType: String,
 
-		viewTypes: Array,
+    viewIndex: Number,
+
+    viewTypes: Array,
 
 	}
 
@@ -86,7 +93,7 @@ export default{
 <style module>
 
 .comp{
-	@apply flex flex-col gap-4;
+  @apply flex flex-col divide-y divide-border-50;
 }
 
 </style>