@mixd-id/web-scaffold 0.1.230406343 → 0.1.230406345

package/package.json

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

package/src/components/VirtualTable.vue

@@ -6,7 +6,7 @@
 				<thead>
 				<tr>
 					<th v-for="column in visibleColumns" :style="thStyle(column)" :class="thClass(column)"
-              v-tooltip="`${column.label ? column.label : column.key}`">
+              v-tooltip="column.tooltip">
 						<slot v-if="$slots['col-' + column.key]" :name="'col-' + column.key" :column="column"></slot>
 						<div v-else :class="headerColumnClass(column)">
 							<span>{{ column.label2 ? column.label2 : (column.label ?? column.key) }}</span>

package/src/index.js

@@ -334,6 +334,9 @@ export default{
     const tooltips = {}
 
     app.directive('tooltip', (el, binding) => {
+      if(!binding.value) return
+
+      console.log(binding)
 
       if(!el.getAttribute('data-tooltip')) {
 

package/src/utils/dashboard.js

@@ -1,7 +1,38 @@
 const {presetToSequelizeList} = require("./preset-selector");
 
 const backgroundColors = [
-  '#5D9CEC',
+  "#FF5733", // Bright Red
+  "#33FF57", // Bright Green
+  "#3357FF", // Bright Blue
+  "#FFC300", // Bright Yellow
+  "#28B463", // Emerald Green
+  "#2874A6", // Deep Blue
+  "#F39C12", // Orange
+  "#8E44AD", // Purple
+  "#1ABC9C", // Aqua
+  "#3498DB", // Sky Blue
+  "#2ECC71", // Green
+  "#F1C40F", // Yellow
+  "#34495E", // Dark Slate
+  "#7D3C98", // Amethyst
+  "#16A085", // Teal
+  "#E67E22", // Carrot Orange
+  "#2C3E50", // Dark Blue
+  "#D35400", // Pumpkin Orange
+  "#7FB3D5", // Light Blue
+  "#B03A2E", // Rust
+  "#1F618D", // Steel Blue
+  "#A93226", // Dark Red
+  "#48C9B0", // Light Teal
+  "#E74C3C", // Red
+  "#AF7AC5", // Lavender
+  "#45B39D", // Seafoam
+  "#5D6D7E", // Gray Blue
+  "#52BE80", // Light Green
+  "#F5B041", // Saffron
+  "#BDC3C7"  // Light Gray
+
+  /*'#5D9CEC',
   '#A0D468',
   '#FFCE54',
   '#FC6E51',
@@ -10,7 +41,7 @@ const backgroundColors = [
   '#4FC1E9',
   '#FFCE54',
   '#ED5565',
-  '#EC87C0'
+  '#EC87C0'*/
 ]
 
 const getModelFromDatasource = async (datasource, opt) => {

package/src/widgets/Dashboard/BarChart.vue

@@ -12,8 +12,8 @@
     <div v-if="yAxeMultiple" class="flex flex-row justify-center gap-1">
       <div v-for="(yLegend, idx) in yLegends"
            class="p-0.5 px-1 rounded-lg text-black cursor-default text-xs w-[50px] text-center text-ellipsis overflow-hidden whitespace-nowrap capitalize"
-           :style="{ backgroundColor:backgroundColors[idx % backgroundColors.length] }">
-        {{ (yLegend ?? '').toString().split(' ')[0].toLowerCase() }}
+           :style="{ backgroundColor:yLegend.color }">
+        {{ (yLegend.key ?? '').toString().split(' ')[0].toLowerCase() }}
       </div>
     </div>
 
@@ -24,6 +24,7 @@
 
 import {Bar} from 'vue-chartjs'
 import Chart from 'chart.js/auto'
+import { color } from 'chart.js/helpers'
 import {useDatasource} from "../../stores/datasource";
 
 export default{
@@ -42,7 +43,22 @@ export default{
     },
 
     chartData(){
-      return this.value ?? { labels:[], datasets:[] }
+      if(!this.value?.datasets)
+        return { labels:[], datasets:[] }
+
+      return {
+        labels: this.value?.labels ?? [],
+        datasets: this.value.datasets.map(_ => {
+          return {
+            ..._,
+            borderWidth: 1,
+            borderColor: function(context, options) {
+              const hex = options.color;
+              return color(hex).darken(0.5).rgbString()
+            }
+          }
+        })
+      }
     },
 
     chartOptions(){
@@ -53,6 +69,18 @@ export default{
         plugins: {
           legend: {
             display: false // This hides the legend
+          },
+          tooltip: {
+            callbacks: {
+              title: function(tooltipItems) {
+                return `${tooltipItems[0].label}`;
+              },
+              label: (tooltipItem) => {
+                if(this.usePercentage)
+                  return `${tooltipItem.dataset.label}: ${tooltipItem.dataset.data0[tooltipItem.dataIndex]} (${tooltipItem.raw}%)`
+                return `${tooltipItem.dataset.label}: ${tooltipItem.raw}`;
+              }
+            },
           }
         },
         scales: {

package/src/widgets/Dashboard/BarChartSetting.vue

@@ -1,6 +1,11 @@
 <template>
   <div class="flex flex-col gap-5 p-6">
 
+    <div class="flex flex-row items-center">
+      <label class="flex-1">Active</label>
+      <Switch v-model="value.props.enabled" :readonly="readonly" />
+    </div>
+
     <div class="flex flex-col gap-1">
       <div class="flex flex-row gap-2">
         <label class="flex-1">Datasource</label>

package/src/widgets/Dashboard/Doughnut.vue

@@ -16,6 +16,7 @@
 
 import { Doughnut } from 'vue-chartjs'
 import Chart from 'chart.js/auto'
+import {color} from "chart.js/helpers";
 
 export default{
 
@@ -26,9 +27,22 @@ export default{
   computed: {
 
     chartData(){
-      return this.value?.datasets ?
-          this.value :
-          { labels:[], datasets:[] }
+      if(!this.value?.datasets)
+        return { labels:[], datasets:[] }
+
+      return {
+        labels: this.value?.labels ?? [],
+        datasets: this.value.datasets.map(_ => {
+          return {
+            ..._,
+            borderWidth: 1,
+            borderColor: function(context, options) {
+              const hex = options.color;
+              return color(hex).darken(0.5).rgbString()
+            }
+          }
+        })
+      }
     },
 
     chartOptions(){

package/src/widgets/Dashboard/DoughnutSetting.vue

@@ -1,6 +1,11 @@
 <template>
   <div class="flex flex-col gap-5 p-6">
 
+    <div class="flex flex-row items-center">
+      <label class="flex-1">Active</label>
+      <Switch v-model="value.props.enabled" :readonly="readonly" />
+    </div>
+
     <div>
       <label class="text-text-400">Datasource</label>
       <Dropdown class="min-w-[150px]"

package/src/widgets/Dashboard/Metric.vue

@@ -7,7 +7,7 @@
       </h1>
       <div class="flex flex-col" v-if="column2Enabled">
         <div class="text-sm text-ellipsis whitespace-nowrap overflow-hidden" :class="value?.comparedPercent <= 50 ? 'text-red-600' : 'text-green-600'">{{ value?.comparedPercent }}%</div>
-        <div class="text-sm text-ellipsis whitespace-nowrap overflow-hidden">{{ value?.comparedValue.toLocaleString() }}</div>
+        <div class="text-sm text-ellipsis whitespace-nowrap overflow-hidden">{{ ccValue }}</div>
       </div>
     </div>
 	</div>
@@ -24,7 +24,15 @@ export default{
     cValue(){
       let value = parseFloat(this.value?.value)
       if(isNaN(value)) return 'N/A'
-      return value
+      return value.toLocaleString()
+    },
+
+    ccValue(){
+      if(!this.column2Enabled) return
+
+      let value = parseFloat(this.value?.comparedValue)
+      if(isNaN(value)) return 'N/A'
+      return value.toLocaleString()
     }
 
   },

package/src/widgets/Dashboard/MetricSetting.vue

@@ -1,6 +1,11 @@
 <template>
   <div class="flex flex-col gap-5 p-6">
 
+    <div class="flex flex-row items-center">
+      <label class="flex-1">Active</label>
+      <Switch v-model="value.props.enabled" :readonly="readonly" />
+    </div>
+
     <div class="flex flex-col gap-1">
       <div class="flex flex-row gap-2">
         <label class="flex-1">Datasource</label>

package/src/widgets/Dashboard/Pie.vue

@@ -16,6 +16,7 @@
 
 import { Pie } from 'vue-chartjs'
 import Chart from 'chart.js/auto'
+import { color } from 'chart.js/helpers'
 
 export default{
 
@@ -26,9 +27,22 @@ export default{
   computed: {
 
     chartData(){
-      return this.value?.datasets ?
-          this.value :
-          { labels:[], datasets:[] }
+      if(!this.value?.datasets)
+        return { labels:[], datasets:[] }
+
+      return {
+        labels: this.value?.labels ?? [],
+        datasets: this.value.datasets.map(_ => {
+          return {
+            ..._,
+            borderWidth: 1,
+            borderColor: function(context, options) {
+              const hex = options.color;
+              return color(hex).darken(0.5).rgbString()
+            }
+          }
+        })
+      }
     },
 
     chartOptions(){
@@ -49,18 +63,6 @@ export default{
 
   data(){
     return {
-      backgroundColors: [
-        '#5D9CEC',
-        '#A0D468',
-        '#FFCE54',
-        '#FC6E51',
-        '#48CFAD',
-        '#AC92EC',
-        '#4FC1E9',
-        '#FFCE54',
-        '#ED5565',
-        '#EC87C0'
-      ],
     }
   },
 

package/src/widgets/Dashboard/PieSetting.vue

@@ -1,6 +1,11 @@
 <template>
   <div class="flex flex-col gap-6 p-6">
 
+    <div class="flex flex-row items-center">
+      <label class="flex-1">Active</label>
+      <Switch v-model="value.props.enabled" :readonly="readonly" />
+    </div>
+
     <div>
       <label class="text-text-400">Datasource</label>
       <Dropdown class="min-w-[150px]"

package/src/widgets/Dashboard/VirtualTableSetting.vue

@@ -1,6 +1,11 @@
 <template>
   <div :class="$style.comp">
 
+    <div class="flex flex-row items-center px-5">
+      <label class="flex-1">Active</label>
+      <Switch v-model="value.props.enabled" :readonly="readonly" />
+    </div>
+
     <div class="flex justify-center border-b-[1px] border-text-50" v-if="tabItems.length > 1">
       <Tabs :items="tabItems" v-model="value.tabIndex" />
     </div>

package/src/widgets/Dashboard.vue

@@ -430,7 +430,8 @@
                         <svg v-else-if="item.type === 'Pie'" class="fill-text-200" width="14" height="14" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M559.7 288l-237.2-.0006l157.1 158c6.124 6.124 15.99 6.484 22.24 .7343c38.62-36.5 65.25-85.62 73.12-140.9C577.2 296.4 569.4 288 559.7 288zM543.1 223.2c-8.249-119.5-103.7-214.1-223.2-223.2c-9.124-.6249-16.76 7.113-16.76 16.24L304 240l223.7-.0012C536.9 240 544.6 232.4 543.1 223.2zM256 288V50.75c0-9.624-8.369-17.48-17.87-16.11C119 51.52 27.89 155.6 32.14 280.4c4.375 128.1 114.8 233.2 242.9 231.6c50.37-.6249 97-16.88 135.2-44c7.999-5.624 8.487-17.24 1.612-24.11L256 288z"/></svg>
                         <svg v-else-if="item.type === 'PolarArea'" class="fill-text-200" width="14" height="14" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M119.1 272C107.1 252.1 87.55 240 64 240c-35.25 0-64 28.75-64 64s28.75 64 64 64c23.55 0 43.96-12.97 55.08-32h60.15C177.1 325.7 176 314.1 176 304s1.127-21.66 3.229-32H119.1zM576 192c35.25 0 64-28.75 64-64s-28.75-64-64-64s-64 28.75-64 64S540.8 192 576 192zM576 384c-11.19 0-21.66 3.094-30.78 8.213l-86.1-52.2C461.6 328.5 464 316.6 464 304c0-16.77-3.436-32.68-9.301-47.36l67.3-49.36c-17.94-12.26-31.13-30.59-37.53-51.86l-67.96 49.84C394.5 187.3 366.7 176 336 176c-7.988 0-15.74 .9492-23.32 2.352L276.3 100.3C283.5 89.98 288 77.54 288 64c0-35.25-28.75-64-64-64S160 28.75 160 64c0 33.29 25.73 60.47 58.28 63.42l36.57 78.36C226.5 229.3 208 264.3 208 304c0 70.67 57.33 128 128 128c34.97 0 66.61-14.11 89.71-36.85l86.39 51.83C512.1 447.3 512 447.7 512 448c0 35.25 28.75 64 64 64S640 483.3 640 448S611.3 384 576 384zM336 352C309.5 352 288 330.5 288 304S309.5 256 336 256S384 277.5 384 304S362.5 352 336 352z"/></svg>
                       </div>
-                      <div class="flex-1 text-ellipsis overflow-hidden whitespace-nowrap">
+                      <div class="flex-1 text-ellipsis overflow-hidden whitespace-nowrap"
+                           :class="!item.props?.enabled ? 'line-through opacity-50' : ''">
                         <strong @click="cConfig.selectedView = item.uid" class="hover:text-primary">
                           {{ item.props?.label ?? (item.name ?? item.type) }}
                         </strong>
@@ -646,7 +647,11 @@
            @mousedown="(e) => $util.dragResize(e, resize1)"></div>
     </div>
 
-    <div v-if="viewedPreset" class="flex-1 px-8 py-5 overflow-y-auto flex flex-col gap-6">
+    <div v-if="readyState === 0" class="flex-1 flex items-center justify-center">
+      <svg class="animate-spin aspect-square w-[64px] h-[64px]" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
+    </div>
+
+    <div v-else-if="viewedPreset" class="flex-1 px-8 py-5 overflow-y-auto flex flex-col gap-6">
 
       <div class="flex flex-row gap-2 md:gap-2 items-center" ref="title">
         <button type="button"
@@ -939,6 +944,8 @@ export default{
 
       previewData: null,
 
+      readyState: 1,
+
       selectedViewUid: null,
 
       viewTypes: [
@@ -1206,9 +1213,12 @@ export default{
       if(!this.viewedComponents) return
 
       const views = this.recurseViews(this.viewedComponents, uids)
+      if(views?.length < 1) return
 
+      if(!uids) this.readyState = 0
       this.socket.send(this.src, { views })
           .then(_ => {
+            this.readyState = 1
             Object.assign(this.values, _)
           })
     },

package/src/widgets/WebPageBuilder4/GridSetting.vue

@@ -1,110 +1,123 @@
 <template>
 	<div :class="$style.comp">
-		<strong>Grid Setting</strong>
 
     <div class="flex flex-row items-center">
-      <label class="flex-1">Enabled</label>
+      <label class="flex-1">Active</label>
       <Switch v-model="value.props.enabled" :readonly="readonly" />
     </div>
 
-    <div class="flex flex-row items-center">
-      <label class="flex-1">Columns</label>
-      <Dropdown v-for="(_, idx) in viewTypes"
-                v-show="viewType === _.value"
-                v-model="columns[idx]"
-                class="w-[100px]"
-                :readonly="readonly">
-        <option value="">Default</option>
-        <option v-for="i in 12" :value="`${viewType}grid-cols-${i}`">{{ i }}</option>
-        <option :value="`${viewType}grid-cols-none`">None</option>
-      </Dropdown>
+    <div class="flex flex-col gap-1">
+      <label class="flex-1">Label</label>
+      <Textbox v-model="value.props.label"
+               maxlength="30"
+               placeholder="Label"
+               :readonly="readonly"
+               @keyup.enter="$emit('change')"
+               @blur="$emit('change')" />
     </div>
 
-    <div class="flex flex-row items-center">
-      <label class="flex-1">Rows</label>
-      <Dropdown v-for="(_, idx) in viewTypes"
-                v-show="viewType === _.value"
-                v-model="rows[idx]"
-                class="w-[100px]"
-                :readonly="readonly">
-        <option value="">Default</option>
-        <option v-for="i in 12" :value="`${viewType}grid-rows-${i}`">{{ i }}</option>
-        <option :value="`${viewType}grid-rows-none`">None</option>
-      </Dropdown>
+    <div class="grid grid-cols-3 gap-3">
+      <div>
+        <label class="flex-1">Columns</label>
+        <Dropdown v-for="(_, idx) in viewTypes"
+                  v-show="viewType === _.value"
+                  v-model="columns[idx]"
+                  :readonly="readonly">
+          <option value="">Default</option>
+          <option v-for="i in 12" :value="`${viewType}grid-cols-${i}`">{{ i }}</option>
+          <option :value="`${viewType}grid-cols-none`">None</option>
+        </Dropdown>
+      </div>
+
+      <div>
+        <label class="flex-1">Rows</label>
+        <Dropdown v-for="(_, idx) in viewTypes"
+                  v-show="viewType === _.value"
+                  v-model="rows[idx]"
+                  :readonly="readonly">
+          <option value="">Default</option>
+          <option v-for="i in 12" :value="`${viewType}grid-rows-${i}`">{{ i }}</option>
+          <option :value="`${viewType}grid-rows-none`">None</option>
+        </Dropdown>
+      </div>
+
+      <div>
+        <label class="flex-1">Gap</label>
+        <Dropdown v-for="(_, idx) in viewTypes"
+                  v-show="viewType === _.value"
+                  v-model="gap[idx]"
+                  :readonly="readonly">
+          <option value="">Not Set</option>
+          <option :value="`${viewType}gap-0`">0</option>
+          <option :value="`${viewType}gap-1`">1</option>
+          <option :value="`${viewType}gap-2`">2</option>
+          <option :value="`${viewType}gap-3`">3</option>
+          <option :value="`${viewType}gap-4`">4</option>
+          <option :value="`${viewType}gap-5`">5</option>
+          <option :value="`${viewType}gap-6`">6</option>
+          <option :value="`${viewType}gap-7`">7</option>
+          <option :value="`${viewType}gap-8`">8</option>
+        </Dropdown>
+      </div>
     </div>
 
-    <div class="flex flex-row items-center">
-      <label class="flex-1">Gap</label>
-      <Dropdown v-for="(_, idx) in viewTypes"
-                v-show="viewType === _.value"
-                v-model="gap[idx]"
-                :readonly="readonly">
-        <option value="">Not Set</option>
-        <option :value="`${viewType}gap-0`">0</option>
-        <option :value="`${viewType}gap-1`">1</option>
-        <option :value="`${viewType}gap-2`">2</option>
-        <option :value="`${viewType}gap-3`">3</option>
-        <option :value="`${viewType}gap-4`">4</option>
-        <option :value="`${viewType}gap-5`">5</option>
-        <option :value="`${viewType}gap-6`">6</option>
-        <option :value="`${viewType}gap-7`">7</option>
-        <option :value="`${viewType}gap-8`">8</option>
-      </Dropdown>
+    <div class="grid grid-cols-2 gap-3">
+      <div>
+        <label class="flex-1">Align Items</label>
+        <Dropdown v-for="(_, idx) in viewTypes"
+                  v-show="viewType === _.value"
+                  v-model="alignItems[idx]"
+                  :readonly="readonly">
+          <option value="">Default</option>
+          <option :value="`${viewType}items-start`">Start</option>
+          <option :value="`${viewType}items-end`">End</option>
+          <option :value="`${viewType}items-center`">Center</option>
+          <option :value="`${viewType}items-baseline`">Baseline</option>
+          <option :value="`${viewType}items-stretch`">Stretch</option>
+        </Dropdown>
+      </div>
+
+      <div>
+        <label class="flex-1">Justify Content</label>
+        <Dropdown v-for="(_, idx) in viewTypes"
+                  v-show="viewType === _.value"
+                  v-model="justifyContent[idx]"
+                  :readonly="readonly">
+          <option value="">Default</option>
+          <option :value="`${viewType}justify-normal`">Normal</option>
+          <option :value="`${viewType}justify-start`">Start</option>
+          <option :value="`${viewType}justify-end`">End</option>
+          <option :value="`${viewType}justify-center`">Center</option>
+          <option :value="`${viewType}justify-between`">Between</option>
+          <option :value="`${viewType}justify-around`">Around</option>
+          <option :value="`${viewType}justify-evenly`">Evenly</option>
+          <option :value="`${viewType}justify-stretch`">Stretch</option>
+        </Dropdown>
+      </div>
     </div>
 
-    <div class="flex flex-row items-center">
-      <label class="flex-1">Align Items</label>
-      <Dropdown v-for="(_, idx) in viewTypes"
-                v-show="viewType === _.value"
-                v-model="alignItems[idx]"
-                :readonly="readonly">
-        <option value="">Default</option>
-        <option :value="`${viewType}items-start`">Start</option>
-        <option :value="`${viewType}items-end`">End</option>
-        <option :value="`${viewType}items-center`">Center</option>
-        <option :value="`${viewType}items-baseline`">Baseline</option>
-        <option :value="`${viewType}items-stretch`">Stretch</option>
-      </Dropdown>
-    </div>
-
-    <div class="flex flex-row items-center">
-      <label class="flex-1">Justify Content</label>
-      <Dropdown v-for="(_, idx) in viewTypes"
-                v-show="viewType === _.value"
-                v-model="justifyContent[idx]"
-                :readonly="readonly">
-        <option value="">Default</option>
-        <option :value="`${viewType}justify-normal`">Normal</option>
-        <option :value="`${viewType}justify-start`">Start</option>
-        <option :value="`${viewType}justify-end`">End</option>
-        <option :value="`${viewType}justify-center`">Center</option>
-        <option :value="`${viewType}justify-between`">Between</option>
-        <option :value="`${viewType}justify-around`">Around</option>
-        <option :value="`${viewType}justify-evenly`">Evenly</option>
-        <option :value="`${viewType}justify-stretch`">Stretch</option>
-      </Dropdown>
-    </div>
-
-    <div class="flex flex-row items-center">
-      <label class="flex-1">Col Span</label>
-      <Dropdown v-for="(_, idx) in viewTypes"
-                v-show="viewType === _.value"
-                v-model="colSpan[idx]"
-                :readonly="readonly">
-        <option value="">Default</option>
-        <option v-for="i in 12" :value="`${viewType}col-span-${i}`">{{ i }}</option>
-      </Dropdown>
-    </div>
-
-    <div class="flex flex-row items-center">
-      <label class="flex-1">Row Span</label>
-      <Dropdown v-for="(_, idx) in viewTypes"
-                v-show="viewType === _.value"
-                v-model="rowSpan[idx]"
-                :readonly="readonly">
-        <option value="">Default</option>
-        <option v-for="i in 12" :value="`${viewType}row-span-${i}`">{{ i }}</option>
-      </Dropdown>
+    <div class="grid grid-cols-2 gap-3">
+      <div>
+        <label class="flex-1">Col Span</label>
+        <Dropdown v-for="(_, idx) in viewTypes"
+                  v-show="viewType === _.value"
+                  v-model="colSpan[idx]"
+                  :readonly="readonly">
+          <option value="">Default</option>
+          <option v-for="i in 12" :value="`${viewType}col-span-${i}`">{{ i }}</option>
+        </Dropdown>
+      </div>
+
+      <div>
+        <label class="flex-1">Row Span</label>
+        <Dropdown v-for="(_, idx) in viewTypes"
+                  v-show="viewType === _.value"
+                  v-model="rowSpan[idx]"
+                  :readonly="readonly">
+          <option value="">Default</option>
+          <option v-for="i in 12" :value="`${viewType}row-span-${i}`">{{ i }}</option>
+        </Dropdown>
+      </div>
     </div>
 
 	</div>
@@ -197,7 +210,7 @@ export default{
 <style module>
 
 .comp{
-  @apply flex flex-col gap-5 p-6;
+  @apply flex flex-col gap-6 p-6;
 }
 
 </style>