@mixd-id/web-scaffold 0.1.230406311 → 0.1.230406313

package/src/utils/preset-selector.js

@@ -2,14 +2,17 @@ const groupBy = require("lodash/groupBy");
 const dayjs = require("dayjs");
 const {Op, literal, fn, DataTypes} = require("sequelize");
 const {ftWildcard} = require("./helpers");
+const util = require("util");
 
 const getValue = (filter, opt) => {
 
   const { columns, withoutKey = false } = opt
-  const { key, operator } = filter
+  const { key, operator, fn } = filter
   const keyColumns = groupBy(columns, 'key')
   const type = ((keyColumns[key] ?? [])[0] ?? {}).type
 
+  console.log('fn', fn)
+
   let whereObj = {}
 
   switch(type){
@@ -213,17 +216,26 @@ const getValue = (filter, opt) => {
           break
 
         case '<=':
-          withoutKey ?
-            whereObj = {
-              [Op.lte]: [
-                dayjs(filter.value).format('YYYY-MM-DD 23:59:59'),
-              ]
-            } :
-            whereObj[key] = {
-              [Op.lte]: [
-                dayjs(filter.value).format('YYYY-MM-DD 23:59:59'),
-              ]
-            }
+          switch(fn){
+
+            case 'format_hour':
+              //console.log('<=', filter.value)
+              break
+
+            default:
+              withoutKey ?
+                whereObj = {
+                  [Op.lte]: [
+                    dayjs(filter.value).format('YYYY-MM-DD 23:59:59'),
+                  ]
+                } :
+                whereObj[key] = {
+                  [Op.lte]: [
+                    dayjs(filter.value).format('YYYY-MM-DD 23:59:59'),
+                  ]
+                }
+          }
+
           break
 
         case '=':
@@ -257,17 +269,25 @@ const getValue = (filter, opt) => {
           break
 
         case '>=':
-          withoutKey ?
-            whereObj = {
-              [Op.gte]: [
-                dayjs(filter.value).format('YYYY-MM-DD 00:00:00'),
-              ]
-            } :
-            whereObj[key] = {
-              [Op.gte]: [
-                dayjs(filter.value).format('YYYY-MM-DD 00:00:00'),
-              ]
-            }
+          switch(fn) {
+
+            case 'format_hour':
+              //console.log('>=', filter.value)
+              break
+
+            default:
+              withoutKey ?
+                whereObj = {
+                  [Op.gte]: [
+                    dayjs(filter.value).format('YYYY-MM-DD 00:00:00'),
+                  ]
+                } :
+                whereObj[key] = {
+                  [Op.gte]: [
+                    dayjs(filter.value).format('YYYY-MM-DD 00:00:00'),
+                  ]
+                }
+          }
           break
 
       }
@@ -724,6 +744,12 @@ const pivotToSequelizeWhere = async (pivot, opt) => {
         if(!sortExists) order.push([ fn('DATE_FORMAT', literal(`${model.name}.${field}`), '%Y'), 'asc' ])
         break
 
+      case 'hour':
+        attributes.push([ fn('DATE_FORMAT', literal(`${model.name}.${field}`), '%H:00-%H:59'), row.key ])
+        group.push([ fn('DATE_FORMAT', literal(`${model.name}.${field}`), '%H:00-%H:59'), row.key ])
+        if(!sortExists) order.push([ fn('DATE_FORMAT', literal(`${model.name}.${field}`), '%H:00-%H:59'), 'asc' ])
+        break
+
       default:
         attributes.push([ literal(`${model.name}.${field}`), row.key ])
         group.push(`${model.name}.${field}`)
@@ -995,7 +1021,10 @@ const presetToSequelizeList = async(preset, {
       searchReplacements = syntaxSearchOpt.replacements
     }
     else{
-      const match = (config.columns ?? []).filter(_ => (_.search && _.key)).map(_ => _.key)
+      const match = (config.columns ?? [])
+        .filter(_ => (_.search && _.key))
+        .map(_ => typeof _.search === 'string' ? _.search : _.key)
+
       if(match !== null){
         const searchOpt = await searchToSequelizeWhere(search, {
           match

package/src/utils/preset-selector.mjs

@@ -157,9 +157,29 @@ const generatePivotColumns = (preset, items) => {
 
 }
 
+const generateTotalColumns = (preset, items) => {
+  if(!preset.pivot || !preset.pivot.enabled || !preset.pivot.useTotal || (items ?? []).length < 1) return
+
+  const totalItem = { _type:'totalRow' }
+
+  for(let item of items){
+    for(let key in item){
+      if(key.startsWith('_')){
+        if(!totalItem[key]){
+          totalItem[key] = 0
+        }
+        totalItem[key] += parseFloat(item[key])
+      }
+    }
+  }
+
+  items.push(totalItem)
+}
+
 export {
   sortsFn,
   pickColumns,
   setupConfig,
-  generatePivotColumns
+  generatePivotColumns,
+  generateTotalColumns
 }

package/src/utils/wss.js

@@ -97,7 +97,12 @@ class WSS extends EventEmitter2{
     this._opt = opt
     this._instance = new WebSocket.Server(opt);
 
-    this._client = redis.createClient()
+    this._client = redis.createClient({
+      socket: {
+        host: process.env.REDIS_HOST ?? '127.0.0.1',
+        port: process.env.REDIS_PORT ?? 6379
+      }
+    })
     this._client.connect().then()
 
     this._instance.on('connection', async (socket, req) => {

package/src/utils/wss.mjs

@@ -128,8 +128,8 @@ class WSS extends EventEmitter2{
 
           if(this._opt.debug){
             status === 200 ?
-              console.log(new Date().getTime() - t1, path, params, data) :
-              console.error(new Date().getTime() - t1, path, params, data)
+              console.log(`${new Date().getTime() - t1}ms`, `l:${JSON.stringify(data ?? '').length}`, path, params, data) :
+              console.error(`${new Date().getTime() - t1}ms`, `l:${JSON.stringify(data ?? '').length}`, path, params, data)
           }
         }
       }

package/src/widgets/PresetBar.vue

@@ -490,6 +490,7 @@
                                 v-model="item.aggregrate"
                                 class="px-1 appearance-none bg-base-300 rounded-md border-[1px] border-text-50 outline-none"
                                 @change="apply()">
+                          <option value="hour">Hour</option>
                           <option value="date">Date</option>
                           <option value="month">Month</option>
                           <option value="year">Year</option>
@@ -578,6 +579,11 @@
                 <PresetBarPivotColumnEdit ref="presetBarPivotColumnEdit" />
               </div>
 
+              <div class="flex flex-row items-center gap-3">
+                <label>Total</label>
+                <Switch v-model="presetPivot.useTotal" />
+              </div>
+
             </div>
 
           </div>

package/src/widgets/WebPageBuilder3.vue

@@ -1,222 +1,7 @@
 <template>
-	<div :class="$style.comp" v-if="page">
-
-    <div class="flex flex-row p-3 pr-5 bg-base-300 border-b-[1px] border-text-50">
-      <div class="flex-1 flex flex-row gap-4 items-center">
-
-        <button ref="close" class=" p-1"
-                @click="close">
-          <svg class="fill-text-300 hover:fill-red-500" width="18" height="18" 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>
-
-        <h5 class="mr-5 w-[200px] text-ellipsis whitespace-nowrap overflow-hidden">
-          {{ page.title }}
-        </h5>
-
-      </div>
-
-      <div>
-        <Button ref="saveBtn"
-                class="w-[70px] rounded-full p-1"
-                :state="canSave ? 1 : -1"
-                @click="save">{{ $t('Save') }}</Button>
-      </div>
-    </div>
-
-    <div class="flex-1 flex flex-row">
-
-      <div class="flex flex-row bg-base-400 dark:bg-base-300 border-r-[1px] border-text-50"
-           :style="section1Style">
-
-        <div class="flex-1 overflow-y-auto">
-          <div class="px-3 flex flex-col border-b-[1px] border-text-50 overflow-x-auto">
-            <Tabs :items="tabItems"
-                  class="pt-1"
-                  v-model="config.leftbarTabIndex" />
-          </div>
-
-          <div v-if="config.leftbarTabIndex === 2" class="p-5">
-            <div>
-              <div class="flex flex-row gap-1 items-center cursor-pointer">
-                <strong class="flex-1 text-text-400 line-clamp-1">{{ $t('Headers')}}</strong>
-                <button type="button" class="text-primary flex flex-row items-center gap-1"
-                        @click="$refs.webPageComponentSelector.open(comp => addComponent(layout.headers, comp))">
-                  <svg width="16" height="16" class="fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M376 232H216V72c0-4.42-3.58-8-8-8h-32c-4.42 0-8 3.58-8 8v160H8c-4.42 0-8 3.58-8 8v32c0 4.42 3.58 8 8 8h160v160c0 4.42 3.58 8 8 8h32c4.42 0 8-3.58 8-8V280h160c4.42 0 8-3.58 8-8v-32c0-4.42-3.58-8-8-8z"/></svg>
-                  {{ $t('Add')}}
-                </button>
-              </div>
-
-              <div class="flex flex-col gap-10">
-                <TreeView class="mt-2"
-                          :config="config"
-                          :items="layout.headers"
-                          :selected-item="currentItem"
-                          @change="">
-                  <template #default="{ item, index, parent, depth }">
-                    <div class="flex-1 flex flex-row gap-2">
-                      <div class="flex-1 text-ellipsis whitespace-nowrap overflow-hidden"
-                           :class="!item.props.enabled ? 'line-through' : ''"
-                           @click="config.selectedComponent = item.uid">
-                        {{ item.props.name ?? item.type }}
-                      </div>
-                      <button v-if="Array.isArray(item.items)"
-                              type="button"
-                              @click="$refs.webPageComponentSelector.open(comp => addComponent(item.items, comp))">
-                        <svg width="14" height="14" class="fill-text-300 hover: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>
-                      <button type="button" @click="parent ? parent.items.splice(index, 1) : layout.headers.splice(index, 1)">
-                        <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="M193.94 256L296.5 153.44l21.15-21.15c3.12-3.12 3.12-8.19 0-11.31l-22.63-22.63c-3.12-3.12-8.19-3.12-11.31 0L160 222.06 36.29 98.34c-3.12-3.12-8.19-3.12-11.31 0L2.34 120.97c-3.12 3.12-3.12 8.19 0 11.31L126.06 256 2.34 379.71c-3.12 3.12-3.12 8.19 0 11.31l22.63 22.63c3.12 3.12 8.19 3.12 11.31 0L160 289.94 262.56 392.5l21.15 21.15c3.12 3.12 8.19 3.12 11.31 0l22.63-22.63c3.12-3.12 3.12-8.19 0-11.31L193.94 256z"/></svg>
-                      </button>
-                    </div>
-                  </template>
-                </TreeView>
-              </div>
-            </div>
-
-            <div>
-              <div class="flex flex-row gap-1 items-center cursor-pointer">
-                <strong class="flex-1 text-text-400 line-clamp-1">{{ $t('Footers')}}</strong>
-                <button type="button" class="text-primary flex flex-row items-center gap-1"
-                        @click="$refs.webPageComponentSelector.open(comp => addComponent(layout.footers, comp))">
-                  <svg width="16" height="16" class="fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M376 232H216V72c0-4.42-3.58-8-8-8h-32c-4.42 0-8 3.58-8 8v160H8c-4.42 0-8 3.58-8 8v32c0 4.42 3.58 8 8 8h160v160c0 4.42 3.58 8 8 8h32c4.42 0 8-3.58 8-8V280h160c4.42 0 8-3.58 8-8v-32c0-4.42-3.58-8-8-8z"/></svg>
-                  {{ $t('Add')}}
-                </button>
-              </div>
-
-              <div class="flex flex-col gap-10">
-                <TreeView class="mt-2"
-                          :config="config"
-                          :items="layout.footers"
-                          :selected-item="currentItem"
-                          @change="">
-                  <template #default="{ item, index, parent, depth }">
-                    <div class="flex-1 flex flex-row gap-2">
-                      <div class="flex-1 text-ellipsis whitespace-nowrap overflow-hidden"
-                           :class="!item.props.enabled ? 'line-through' : ''"
-                           @click="config.selectedComponent = item.uid">
-                        {{ item.props.name ?? item.type }}
-                      </div>
-                      <button v-if="Array.isArray(item.items)"
-                              type="button"
-                              @click="$refs.webPageComponentSelector.open(comp => addComponent(item.items, comp))">
-                        <svg width="14" height="14" class="fill-text-300 hover: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>
-                      <button type="button" @click="parent ? parent.items.splice(index, 1) : layout.footers.splice(index, 1)">
-                        <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="M193.94 256L296.5 153.44l21.15-21.15c3.12-3.12 3.12-8.19 0-11.31l-22.63-22.63c-3.12-3.12-8.19-3.12-11.31 0L160 222.06 36.29 98.34c-3.12-3.12-8.19-3.12-11.31 0L2.34 120.97c-3.12 3.12-3.12 8.19 0 11.31L126.06 256 2.34 379.71c-3.12 3.12-3.12 8.19 0 11.31l22.63 22.63c3.12 3.12 8.19 3.12 11.31 0L160 289.94 262.56 392.5l21.15 21.15c3.12 3.12 8.19 3.12 11.31 0l22.63-22.63c3.12-3.12 3.12-8.19 0-11.31L193.94 256z"/></svg>
-                      </button>
-                    </div>
-                  </template>
-                </TreeView>
-              </div>
-            </div>
-
-            <div>
-              <div class="flex flex-row gap-1 items-center cursor-pointer">
-                <strong class="flex-1 text-text-400 line-clamp-1">{{ $t('Styles')}}</strong>
-                <button type="button" class="text-primary flex flex-row items-center gap-1"
-                        @click="">
-                  <svg width="16" height="16" class="fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M376 232H216V72c0-4.42-3.58-8-8-8h-32c-4.42 0-8 3.58-8 8v160H8c-4.42 0-8 3.58-8 8v32c0 4.42 3.58 8 8 8h160v160c0 4.42 3.58 8 8 8h32c4.42 0 8-3.58 8-8V280h160c4.42 0 8-3.58 8-8v-32c0-4.42-3.58-8-8-8z"/></svg>
-                  {{ $t('Add')}}
-                </button>
-              </div>
-              <TreeView class="mt-2"
-                        :items="styles"
-                        :selected-item="currentItem"
-                        :config="config"
-                        @change="">
-                <template #default="{ item, index, parent, depth }">
-                  <div class="flex-1 flex flex-row gap-2">
-                    <div class="flex-1 text-ellipsis whitespace-nowrap overflow-hidden"
-                         @click="config.selectedComponent = item.uid">
-                      {{ item.props.name ?? item.type }}
-                    </div>
-                  </div>
-                </template>
-              </TreeView>
-            </div>
-          </div>
-
-          <div v-else-if="config.leftbarTabIndex === 3" class="p-5">
-            <div class="flex flex-row gap-1 items-center cursor-pointer">
-              <strong class="flex-1 text-text-400 line-clamp-1">{{ $t('Components')}}</strong>
-              <button type="button" class="text-primary flex flex-row items-center gap-1"
-                      @click="$refs.webPageComponentSelector.open(comp => addComponent(page.components, comp))">
-                <svg width="16" height="16" class="fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M376 232H216V72c0-4.42-3.58-8-8-8h-32c-4.42 0-8 3.58-8 8v160H8c-4.42 0-8 3.58-8 8v32c0 4.42 3.58 8 8 8h160v160c0 4.42 3.58 8 8 8h32c4.42 0 8-3.58 8-8V280h160c4.42 0 8-3.58 8-8v-32c0-4.42-3.58-8-8-8z"/></svg>
-                {{ $t('Add')}}
-              </button>
-            </div>
-
-            <TreeView class="mt-2"
-                      :items="page.components"
-                      :selected-item="currentItem"
-                      :config="config"
-                      @change="">
-              <template #default="{ item, index, parent, depth }">
-                <div class="flex-1 flex flex-row gap-2">
-                  <div class="flex-1 text-ellipsis whitespace-nowrap overflow-hidden"
-                       :class="!item.props.enabled ? 'line-through' : ''"
-                       @click="config.selectedComponent = item.uid">
-                    {{ item.props.name ?? item.type }}
-                  </div>
-                  <button v-if="Array.isArray(item.items)"
-                          type="button"
-                          @click="$refs.webPageComponentSelector.open(comp => addComponent(item.items, comp))">
-                    <svg width="14" height="14" class="fill-text-300 hover: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>
-                  <button type="button" @click="parent ? parent.items.splice(index, 1) : page.components.splice(index, 1)">
-                    <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="M193.94 256L296.5 153.44l21.15-21.15c3.12-3.12 3.12-8.19 0-11.31l-22.63-22.63c-3.12-3.12-8.19-3.12-11.31 0L160 222.06 36.29 98.34c-3.12-3.12-8.19-3.12-11.31 0L2.34 120.97c-3.12 3.12-3.12 8.19 0 11.31L126.06 256 2.34 379.71c-3.12 3.12-3.12 8.19 0 11.31l22.63 22.63c3.12 3.12 8.19 3.12 11.31 0L160 289.94 262.56 392.5l21.15 21.15c3.12 3.12 8.19 3.12 11.31 0l22.63-22.63c3.12-3.12 3.12-8.19 0-11.31L193.94 256z"/></svg>
-                  </button>
-                </div>
-              </template>
-            </TreeView>
-          </div>
-
-          <WebComponentSelector ref="webPageComponentSelector"
-                                :components="components"
-                                dismissable="true"
-                                @dismiss="$refs.webPageComponentSelector.close()" />
-        </div>
-
-        <div :class="$style.resize1"
-             @mousedown="(e) => $util.dragResize(e, resize1)"></div>
-
-      </div>
-
-      <div class="flex-1 flex flex-col bg-base-300 dark:bg-base-400 relative">
-
-        <WebPagePreview :config="config"
-                        :page="page"
-                        class="flex-1"
-                        ref="preview"
-                        @message="onIframeMessage" />
-
-      </div>
-
-      <div v-if="currentItem" class="flex flex-row bg-base-400 dark:bg-base-300 border-l-[1px] border-text-50"
-           :style="section3Style">
-
-        <div :class="$style.resize3"
-             @mousedown="(e) => $util.dragResize(e, resize3)"></div>
-
-        <div class="flex-1 flex flex-col gap-6 overflow-y-auto">
-
-          <StyleSetting2 v-if="currentItem.type.startsWith('style:')"
-                         :item="currentItem"
-                         :config="config"
-                         ref="settingComponent" />
-
-          <ComponentSetting3 v-else
-                             :item="currentItem"
-                             :config="config"
-                             ref="settingComponent" />
-
-        </div>
-
-      </div>
-
-    </div>
-
-	</div>
+  <div>
+    <h1>Web Page Builder 3</h1>
+  </div>
 </template>
 
 <script>

package/src/widgets/WebPageBuilder4/BackgroundColorSetting.vue

@@ -0,0 +1,54 @@
+<template>
+	<div :class="$style.comp">
+    <div class="flex flex-row items-center">
+      <label class="flex-1">Background Color</label>
+      <ColorPicker2 v-model="bgColors[index]" :prefix="viewType" />
+    </div>
+	</div>
+</template>
+
+<script>
+
+export default{
+
+  inject: [ 'viewTypes' ],
+
+  props: {
+
+    index: {
+      type: Number,
+      required: true
+    },
+
+    value: {
+      type: Object,
+      required: true
+    },
+
+    viewType: {
+      type: String,
+      required: true
+    },
+
+  },
+
+  computed: {
+
+    bgColors(){
+      if(!Array.isArray(this.value.props.bgColors))
+        this.value.props.bgColors = this.viewTypes.map(_ => '')
+      return this.value.props.bgColors
+    }
+
+  }
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+}
+
+</style>

package/src/widgets/WebPageBuilder4/BackgroundPositionSetting.vue

@@ -0,0 +1,75 @@
+<template>
+	<div :class="$style.comp">
+    <div class="flex flex-row items-center">
+      <label class="flex-1">Background Position</label>
+      <Dropdown v-model="bgPosition[index]">
+        <option value="">Unset</option>
+        <option v-for="value in values" :value="`${viewType}${value[0]}`">
+          {{ value[1] }}
+        </option>
+      </Dropdown>
+    </div>
+	</div>
+</template>
+
+<script>
+
+export default{
+
+  inject: [ 'viewTypes' ],
+
+  props: {
+
+    index: {
+      type: Number,
+      required: true
+    },
+
+    value: {
+      type: Object,
+      required: true
+    },
+
+    viewType: {
+      type: String,
+      required: true
+    },
+
+  },
+
+  computed: {
+
+    bgPosition(){
+      if(!Array.isArray(this.value.props.bgPosition))
+        this.value.props.bgPosition = this.viewTypes.map(_ => '')
+      return this.value.props.bgPosition
+    }
+
+  },
+
+  data(){
+    return {
+      values: [
+        [ 'bg-center', 'Center' ],
+        [ 'bg-top', 'Top' ],
+        [ 'bg-right', 'Right' ],
+        [ 'bg-bottom', 'Bottom' ],
+        [ 'bg-left', 'Left' ],
+        [ 'bg-top-right', 'Top Right' ],
+        [ 'bg-top-left', 'Top Left' ],
+        [ 'bg-bottom-right', 'Bottom Right' ],
+        [ 'bg-bottom-left', 'Bottom Left' ],
+      ]
+    }
+  }
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+}
+
+</style>

package/src/widgets/WebPageBuilder4/BackgroundRepeatSetting.vue

@@ -0,0 +1,72 @@
+<template>
+	<div :class="$style.comp">
+    <div class="flex flex-row items-center">
+      <label class="flex-1">Background Repeat</label>
+      <Dropdown v-model="bgRepeat[index]">
+        <option value="">Unset</option>
+        <option v-for="value in values" :value="`${viewType}${value[0]}`">
+          {{ value[1] }}
+        </option>
+      </Dropdown>
+    </div>
+	</div>
+</template>
+
+<script>
+
+export default{
+
+  inject: [ 'viewTypes' ],
+
+  props: {
+
+    index: {
+      type: Number,
+      required: true
+    },
+
+    value: {
+      type: Object,
+      required: true
+    },
+
+    viewType: {
+      type: String,
+      required: true
+    },
+
+  },
+
+  computed: {
+
+    bgRepeat(){
+      if(!Array.isArray(this.value.props.bgRepeat))
+        this.value.props.bgRepeat = this.viewTypes.map(_ => '')
+      return this.value.props.bgRepeat
+    }
+
+  },
+
+  data(){
+    return {
+      values: [
+        [ 'bg-repeat', 'Repeat' ],
+        [ 'bg-no-repeat', 'No Repeat' ],
+        [ 'bg-repeat-x', 'Repeat X' ],
+        [ 'bg-repeat-y', 'Repeat Y' ],
+        [ 'bg-repeat-round', 'Repeat Round' ],
+        [ 'bg-repeat-space', 'Repeat Space' ],
+      ]
+    }
+  }
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+}
+
+</style>