@mixd-id/web-scaffold 0.2.240706 → 0.2.250801009

package/src/widgets/WebPageBuilder4/FontSizeSetting.vue

@@ -1,76 +0,0 @@
-<template>
-	<div :class="$style.comp">
-    <div class="flex flex-row items-center">
-      <label class="flex-1">Font Size</label>
-      <Dropdown v-model="fontSize[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: {
-
-    fontSize(){
-      if(!Array.isArray(this.value.props.fontSize))
-        this.value.props.fontSize = this.viewTypes.map(_ => '')
-      return this.value.props.fontSize
-    }
-
-  },
-
-  data(){
-    return {
-      values: [
-        [ 'text-xs', 'Extra Small' ],
-        [ 'text-sm', 'Small' ],
-        [ 'text-base', 'Normal' ],
-        [ 'text-lg', 'Large' ],
-        [ 'text-xl', 'Extra Large' ],
-        [ 'text-2xl', 'Extra Large 2' ],
-        [ 'text-3xl', 'Extra Large 3' ],
-        [ 'text-4xl', 'Extra Large 4' ],
-        [ 'text-5xl', 'Extra Large 5' ],
-        [ 'text-6xl', 'Extra Large 6' ],
-      ]
-    }
-  }
-
-}
-
-</script>
-
-<style module>
-
-.comp{
-}
-
-</style>

package/src/widgets/WebPageBuilder4/LinkSetting.vue

@@ -1,68 +0,0 @@
-<template>
-	<div :class="$style.comp">
-
-    <div class="flex flex-row items-center gap-3">
-      <Textbox v-model="value.name" class="flex-1 p-0 border-none" :placeholder="value.type" />
-      <Switch v-model="value.props.enabled" />
-    </div>
-
-    <div class="flex flex-row items-center gap-3">
-      <label class="flex-1">Text</label>
-      <Textbox v-model="value.props.text" />
-    </div>
-
-    <div class="flex flex-col gap-1">
-      <label class="flex-1">Target</label>
-      <Textbox v-model="value.props.target" />
-    </div>
-
-    <PropertySetting :value="value" :index="index" :viewType="viewType" :keys="keys" />
-
-	</div>
-</template>
-
-<script>
-
-import {defineAsyncComponent} from "vue";
-
-export default{
-
-  components: {
-    ActionSetting: defineAsyncComponent(() => import('./ActionSetting.vue')),
-    PropertySetting: defineAsyncComponent(() => import('./PropertySetting.vue'))
-  },
-
-  data(){
-    return {
-      keys: [
-      ]
-    }
-  },
-
-  inject: [ 'viewTypes' ],
-
-  name: 'ButtonSetting',
-
-  props: {
-
-    index: Number,
-
-    value: {
-      type: Object,
-      required: true
-    },
-
-    viewType: String,
-
-  },
-}
-
-</script>
-
-<style module>
-
-.comp{
-  @apply flex flex-col gap-5;
-}
-
-</style>

package/src/widgets/WebPageBuilder4/MobileMenuSetting.vue

@@ -1,106 +0,0 @@
-<template>
-	<div :class="$style.comp">
-
-    <div class="flex flex-row items-center gap-3">
-      <Textbox v-model="value.name" class="flex-1 p-0 border-none" :placeholder="value.type" />
-      <Switch v-model="value.props.enabled" />
-    </div>
-
-    <div class="flex flex-row gap-2 items-center">
-      <label class="flex-1">Open</label>
-      <Switch v-model="value.props.debugOpen" />
-    </div>
-
-    <div class="flex flex-row gap-2 items-center">
-      <label class="flex-1">Position</label>
-      <Dropdown v-model="value.props.mode" class="w-[120px]">
-        <option value="left">Left</option>
-        <option value="right">Right</option>
-        <option value="top">Top</option>
-        <option value="middle">Middle</option>
-      </Dropdown>
-    </div>
-
-    <PropertySetting :value="value"
-                     :index="index"
-                     :viewType="viewType"
-                     :keys="keys" />
-
-	</div>
-</template>
-
-<script>
-
-import {defineAsyncComponent} from "vue";
-
-export default{
-
-  components: {
-    PropertySetting: defineAsyncComponent(() => import('./PropertySetting.vue')),
-  },
-
-  computed: {
-
-    flexAlign(){
-      if(!Array.isArray(this.value.props.flexAlign))
-        this.value.props.flexAlign = []
-
-      return this.value.props.flexAlign
-    },
-
-    flexJustify(){
-      if(!Array.isArray(this.value.props.flexJustify))
-        this.value.props.flexJustify = []
-
-      return this.value.props.flexJustify
-    },
-
-    gap(){
-      if(!Array.isArray(this.value.props.gap))
-        this.value.props.gap = [ 'gap-2' ]
-
-      return this.value.props.gap
-    },
-
-    wrap(){
-      if(!Array.isArray(this.value.props.wrap))
-        this.value.props.wrap = []
-
-      return this.value.props.wrap
-    },
-
-  },
-
-  data(){
-    return {
-      keys: [
-      ]
-    }
-  },
-
-  inject: [ 'uploadImage', 'viewTypes' ],
-
-  props: {
-
-    index: Number,
-
-    value: {
-      type: Object,
-      required: true
-    },
-
-    viewType: String,
-
-  },
-
-}
-
-</script>
-
-<style module>
-
-.comp{
-  @apply flex flex-col gap-5;
-}
-
-</style>

package/src/widgets/WebPageBuilder4/Setting.vue

@@ -1,73 +0,0 @@
-<template>
-  <div :class="$style.comp">
-
-    <div class="flex flex-row items-center gap-3">
-      <Textbox v-model="value.name" class="flex-1 p-0 border-none" :placeholder="value.type" />
-      <Switch v-model="value.props.enabled" />
-    </div>
-
-    <div class="flex flex-row items-center">
-      <label class="flex-1">propertyName</label>
-      <Dropdown v-model="propertyName[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: {
-
-    propertyName(){
-      if(!Array.isArray(this.value.props.propertyName))
-        this.value.props.propertyName = this.viewTypes.map(_ => '')
-      return this.value.props.propertyName
-    }
-
-  },
-
-  data(){
-    return {
-      values: [
-        [ 'value', 'text' ],
-      ]
-    }
-  }
-
-}
-
-</script>
-
-<style module>
-
-.comp{
-}
-
-</style>

package/src/widgets/WebPageBuilder4/StyleSetting.vue

@@ -1,77 +0,0 @@
-<template>
-	<div :class="$style.comp">
-
-    <strong>Style Setting</strong>
-
-    <div class="flex flex-col gap-3">
-
-      <div class="flex flex-row items-center gap-2">
-        <label class="flex-1">Normal Font</label>
-        <button type="button" class="text-primary">
-          Add Style
-        </button>
-      </div>
-      <div>
-        <div class="flex flex-row items-center gap-2">
-          <label class="flex-1">Font Family</label>
-          <Dropdown class="w-[120px]" v-model="normalStyle.font">
-            <option value="">Default</option>
-            <option value="Lato">Lato</option>
-            <option value="Nunito">Nunito</option>
-            <option value="Poppins">Poppins</option>
-            <option value="Quicksand">Quicksand</option>
-          </Dropdown>
-        </div>
-      </div>
-
-    </div>
-
-	</div>
-</template>
-
-<script>
-
-export default{
-
-  computed: {
-
-    normalStyle(){
-      if(!this.style.normal){
-        this.style.normal = {}
-      }
-      return this.style.normal
-    },
-
-    style(){
-      if(!this.value.style){
-        this.value.style = {}
-      }
-      return this.value.style
-    },
-
-  },
-
-  props: {
-
-    index: Number,
-
-    value: {
-      type: Object,
-      required: true
-    },
-
-    viewType: String,
-
-  }
-
-}
-
-</script>
-
-<style module>
-
-.comp{
-  @apply flex flex-col gap-5;
-}
-
-</style>

package/src/widgets/WebPageBuilder4/SvgSetting.vue

@@ -1,207 +0,0 @@
-<template>
-  <div class="flex flex-col gap-5">
-
-    <div class="flex flex-row items-center gap-3">
-      <Textbox v-model="value.name" class="flex-1 p-0 border-none" :placeholder="value.type" />
-      <Switch v-model="value.props.enabled" />
-    </div>
-
-    <div>
-      <label class="flex-1">SVG</label>
-      <div class="flex flex-row gap-2">
-        <div>
-          <div class="bg-text-50 rounded-lg p-2">
-            <Svg :html="value.props.html" />
-          </div>
-        </div>
-        <div class="flex flex-col gap-2 items-start">
-          <button type="button" class="text-primary" @click="$refs.file.click()">Upload SVG File</button>
-          <input type="file" ref="file" accept="image/svg+xml" class="hidden" @change="onFileUpload" />
-
-          <button type="button" class="text-primary" @click="$refs.modal.open({ html:svg.html })">
-            Upload SVG HTML
-          </button>
-        </div>
-      </div>
-    </div>
-
-    <div class="flex flex-row gap-2">
-      <div>
-        <label>Width</label>
-        <Dropdown v-model="svg.width" class="w-[80px] mt-1">
-          <option value="">Auto</option>
-          <option value="16px">16px</option>
-          <option value="24px">24px</option>
-          <option value="32px">32px</option>
-          <option value="36px">36px</option>
-          <option value="48px">48px</option>
-          <option value="64px">64px</option>
-        </Dropdown>
-      </div>
-      <div>
-        <label>Height</label>
-        <Dropdown v-model="svg.height" class="w-[80px] mt-1">
-          <option value="">Auto</option>
-          <option value="16px">16px</option>
-          <option value="24px">24px</option>
-          <option value="32px">32px</option>
-          <option value="36px">36px</option>
-          <option value="48px">48px</option>
-          <option value="64px">64px</option>
-        </Dropdown>
-      </div>
-    </div>
-
-    <div class="flex flex-row gap-2">
-      <div>
-        <label>Fill Color</label>
-        <Dropdown v-model="svg.fillColor" class="w-[120px] mt-1">
-          <option value="fill-primary-600">Primary 600</option>
-        </Dropdown>
-      </div>
-    </div>
-
-    <Modal ref="modal" width="360" height="360">
-
-      <template v-slot:head>
-        <div class="relative p-5">
-          <h3>Add SVG</h3>
-          <div class="absolute top-0 right-0 p-2">
-            <button type="button" class="p-2" @click="$refs.modal.close()">
-              <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>
-      </template>
-
-      <template v-slot:foot="{ context }">
-        <div class="p-5">
-          <Button class="w-[90px]" @click="svg.html = context.html; $refs.modal.close()">OK</Button>
-        </div>
-      </template>
-
-      <template #default="{ context }">
-        <div class="flex-1 p-5">
-          <Textarea v-model="context.html" rows="6" />
-        </div>
-      </template>
-
-    </Modal>
-
-    <br />
-    <br />
-    <pre class="hidden text-xs break-all">{{ value.props.html }}</pre>
-
-  </div>
-</template>
-
-<script>
-
-export default{
-
-  computed: {
-
-    svg(){
-      if(typeof this.value.svg !== 'object')
-        this.value.svg = {}
-      return this.value.svg
-    }
-
-  },
-
-  data(){
-    return {
-    }
-  },
-
-  inject: [ 'alert', 'viewTypes' ],
-
-  methods: {
-
-    onFileUpload(e){
-
-      const reader = new FileReader();
-      reader.addEventListener('load', () => {
-        this.svg.html = reader.result
-      }, false)
-      reader.addEventListener('error', (e) => {
-        this.alert(this.$t('Unable to read file'))
-      })
-      reader.readAsText(this.$refs.file.files[0]);
-
-    },
-
-  },
-
-  props: {
-
-    index: {
-      type: Number,
-      required: true
-    },
-
-    value: {
-      type: Object,
-      required: true
-    },
-
-    viewType: {
-      type: String,
-      required: true
-    },
-
-  },
-
-  watch: {
-
-    svg: {
-      deep: true,
-      handler(to){
-
-        const html = to.html
-
-        const aDiv = document.createElement('div')
-        aDiv.innerHTML = html
-
-        const svg = aDiv.firstElementChild
-
-        if(svg){
-
-          const hasHeight = !!svg.getAttribute('height') || !!svg.style.height
-          const hasWidth = !!svg.getAttribute('width') || !!svg.style.width
-
-          if(this.svg.width || !hasWidth){
-            svg.style.width = this.svg.width ? this.svg.width : '16px'
-          }
-
-          if(this.svg.height || !hasHeight){
-            svg.style.height = this.svg.height ? this.svg.height : '16px'
-          }
-
-          svg.classList.add(this.svg.fillColor)
-          svg.removeAttribute('height')
-          svg.removeAttribute('width')
-
-          this.value.props.html = aDiv.innerHTML
-        }
-        else{
-          this.value.props.html = ''
-        }
-
-      }
-    }
-
-  }
-
-}
-
-</script>
-
-<style module>
-
-.comp{
-}
-
-</style>

package/src/widgets/WebPageBuilder4/TextTransformSetting.vue

@@ -1,70 +0,0 @@
-<template>
-  <div :class="$style.comp">
-    <div class="flex flex-row items-center">
-      <label class="flex-1">Text Transform</label>
-      <Dropdown v-model="textTransform[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: {
-
-    textTransform(){
-      if(!Array.isArray(this.value.props.textTransform))
-        this.value.props.textTransform = this.viewTypes.map(_ => '')
-      return this.value.props.textTransform
-    }
-
-  },
-
-  data(){
-    return {
-      values: [
-        [ 'capitalize', 'Capitalize' ],
-        [ 'lowercase', 'Lowercase' ],
-        [ 'normal-case', 'Normal' ],
-        [ 'uppercase', 'Uppercase' ],
-      ]
-    }
-  }
-
-}
-
-</script>
-
-<style module>
-
-.comp{
-}
-
-</style>