@mixd-id/web-scaffold 0.1.230406311 → 0.1.230406313

package/src/widgets/WebPageBuilder4/CarouselSetting.vue

@@ -0,0 +1,178 @@
+<template>
+	<div :class="$style.comp">
+		<strong v-if="title">{{ title }}</strong>
+
+    <div class="flex flex-row items-center">
+      <label class="flex-1">Enabled</label>
+      <Switch v-model="value.props.enabled" />
+    </div>
+
+    <div>
+      <div class="flex flex-row items-center">
+        <label class="flex-1">Images</label>
+        <button type="button" class="text-primary"
+                @click="addImage">
+          Add Image
+        </button>
+      </div>
+      <div>
+        <TreeView :items="items"
+                  v-model="currentConfig.selectedImageUid"
+                  class="mt-2">
+          <template #item="{ item, parent }">
+            <div class="flex-1 flex flex-row items-center gap-3 px-3">
+              <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">
+                <Image :src="item.props.src[index]" class="w-[64px] min-h-[32px] bg-text-50" />
+              </div>
+              <div>
+                <button type="button" @click="items.splice(items.indexOf(item), 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="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>
+        </TreeView>
+
+        <Modal ref="imageEdit" width="380" height="480">
+          <template v-slot:head>
+            <div class="relative p-5">
+              <h3>Add Image</h3>
+              <div class="absolute top-0 right-0 p-2">
+                <button type="button" class="p-2" @click="$refs.imageEdit.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 #foot="{ context }">
+            <div class="p-5">
+              <Button class="w-[120px]"
+                      @click="items.push(context.component);$refs.imageEdit.close()">
+                Add Image
+              </Button>
+            </div>
+          </template>
+          <template #default="{ context }">
+            <div class="flex-1 p-5">
+              <ImageSetting :value="context.component"
+                            :index="index" />
+            </div>
+          </template>
+        </Modal>
+      </div>
+    </div>
+
+    <div class="flex flex-row items-center">
+      <label class="flex-1">Legend</label>
+      <Checkbox v-model="value.props.useLegend" />
+    </div>
+
+    <div class="flex flex-row items-center">
+      <label class="flex-1">Autoplay</label>
+      <Dropdown class="w-[80px]" v-model="value.props.autoPlay">
+        <option :value="0">Off</option>
+        <option :value="1000">1s</option>
+        <option :value="2000">2s</option>
+        <option :value="3000">3s</option>
+        <option :value="4000">4s</option>
+        <option :value="5000">5s</option>
+        <option :value="6000">6s</option>
+        <option :value="7000">7s</option>
+        <option :value="8000">8s</option>
+        <option :value="9000">9s</option>
+        <option :value="10000">10s</option>
+      </Dropdown>
+    </div>
+
+    <div class="flex flex-row items-center">
+      <label class="flex-1">Infinite</label>
+      <Checkbox v-model="value.props.infinite" />
+    </div>
+
+	</div>
+</template>
+
+<script>
+
+import {defineAsyncComponent} from "vue";
+import md5 from "md5";
+import TreeView from "./TreeView.vue";
+
+export default{
+  components: {
+    TreeView,
+    ImageSetting: defineAsyncComponent(() => import('./ImageSetting.vue'))
+  },
+
+  inject: [ 'uploadImage', 'viewTypes' ],
+
+  props: {
+
+    config: {
+      type: Object,
+      default: {}
+    },
+
+    title: {
+      type: String,
+      default: 'Carousel Setting'
+    },
+
+    value: {
+      type: Object,
+      required: true
+    },
+
+    index: Number,
+
+  },
+
+  computed: {
+
+    currentConfig(){
+      if(!this.config.components[this.value.uid])
+        this.config.components[this.value.uid] = {}
+      return this.config.components[this.value.uid]
+    },
+
+    items(){
+      if(!Array.isArray(this.value.items))
+        this.value.items = []
+      return this.value.items
+    }
+
+  },
+
+  data(){
+    return {
+      selectedUid: null,
+    }
+  },
+
+  methods: {
+
+    addImage(){
+      const component = { type:'Image', name:'Image', props:{ enabled:true } }
+      component.uid = md5(JSON.stringify(component) + new Date().getTime())
+
+      this.$refs.imageEdit.open({ component })
+    }
+
+  }
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+  @apply flex flex-col gap-8;
+}
+
+</style>

package/src/widgets/WebPageBuilder4/DisplaySetting.vue

@@ -0,0 +1,76 @@
+<template>
+	<div :class="$style.comp">
+    <div class="flex flex-row items-center">
+      <label class="flex-1">Display</label>
+      <Dropdown v-model="display[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: {
+
+    display(){
+      if(!Array.isArray(this.value.props.display))
+        this.value.props.display = this.viewTypes.map(_ => '')
+      return this.value.props.display
+    }
+
+  },
+
+  data(){
+    return {
+      values: [
+        [ 'hidden', 'Hidden' ],
+        [ 'block', 'Block' ],
+        [ 'inline-block', 'Inline Block' ],
+        [ 'inline', 'Inline' ],
+        [ 'flex', 'Flex' ],
+        [ 'inline-flex', 'Inline Flex' ],
+        [ 'table', 'Table' ],
+        [ 'inline-table', 'Inline Table' ],
+        [ 'grid', 'Grid' ],
+        [ 'inline-grid', 'Inline Grid' ],
+      ]
+    }
+  }
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+}
+
+</style>

package/src/widgets/WebPageBuilder4/FlexAlignSetting.vue

@@ -0,0 +1,71 @@
+<template>
+	<div :class="$style.comp">
+    <div class="flex flex-row items-center">
+      <label class="flex-1">Flex Align</label>
+      <Dropdown v-model="flexAlign[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: {
+
+    flexAlign(){
+      if(!Array.isArray(this.value.props.flexAlign))
+        this.value.props.flexAlign = this.viewTypes.map(_ => '')
+      return this.value.props.flexAlign
+    }
+
+  },
+
+  data(){
+    return {
+      values: [
+        [ 'items-start', 'Start' ],
+        [ 'items-end', 'End' ],
+        [ 'Center', 'items-center' ],
+        [ 'Baseline', 'items-baseline' ],
+        [ 'Stretch', 'items-stretch' ],
+      ]
+    }
+  }
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+}
+
+</style>

package/src/widgets/WebPageBuilder4/FlexDirectionSetting.vue

@@ -0,0 +1,70 @@
+<template>
+	<div :class="$style.comp">
+    <div class="flex flex-row items-center">
+      <label class="flex-1">Flex Direction</label>
+      <Dropdown v-model="flexDirection[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: {
+
+    flexDirection(){
+      if(!Array.isArray(this.value.props.flexDirection))
+        this.value.props.flexDirection = this.viewTypes.map(_ => '')
+      return this.value.props.flexDirection
+    }
+
+  },
+
+  data(){
+    return {
+      values: [
+        [ 'flex-row', 'Row' ],
+        [ 'flex-col', 'Column' ],
+        [ 'flex-row-reverse', 'Row Reverse' ],
+        [ 'flex-col-reverse', 'Column Reverse' ],
+      ]
+    }
+  }
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+}
+
+</style>

package/src/widgets/WebPageBuilder4/FlexJustifySetting.vue

@@ -0,0 +1,74 @@
+<template>
+	<div :class="$style.comp">
+    <div class="flex flex-row items-center">
+      <label class="flex-1">Flex Justify</label>
+      <Dropdown v-model="flexJustify[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: {
+
+    flexJustify(){
+      if(!Array.isArray(this.value.props.flexJustify))
+        this.value.props.flexJustify = this.viewTypes.map(_ => '')
+      return this.value.props.flexJustify
+    }
+
+  },
+
+  data(){
+    return {
+      values: [
+        [ 'justify-normal', 'Normal' ],
+        [ 'justify-start', 'Start' ],
+        [ 'justify-end', 'End' ],
+        [ 'justify-center', 'Center' ],
+        [ 'justify-between', 'Between' ],
+        [ 'justify-around', 'Around' ],
+        [ 'justify-evenly', 'Evenly' ],
+        [ 'justify-stretch', 'Stretch' ],
+      ]
+    }
+  }
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+}
+
+</style>

package/src/widgets/WebPageBuilder4/FlexPropertySetting.vue

@@ -0,0 +1,71 @@
+<template>
+	<div :class="$style.comp">
+    <div class="flex flex-row items-center">
+      <label class="flex-1">Flex</label>
+      <Dropdown v-model="flex[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: {
+
+    flex(){
+      if(!Array.isArray(this.value.props.flex))
+        this.value.props.flex = this.viewTypes.map(_ => '')
+      return this.value.props.flex
+    }
+
+  },
+
+  data(){
+    return {
+      values: [
+        [ 'flex-1', 'Flex 1' ],
+        [ 'flex-0', 'Flex 0' ],
+        [ 'flex-auto', 'Auto' ],
+        [ 'flex-initial', 'Initial' ],
+        [ 'flex-none', 'None' ],
+      ]
+    }
+  }
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+}
+
+</style>

package/src/widgets/WebPageBuilder4/FlexSetting.vue

@@ -0,0 +1,96 @@
+<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>
+
+    <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: [
+        'flexDirection',
+        'flexAlign',
+        'flexJustify',
+        'flexWrap',
+        'gap'
+      ]
+    }
+  },
+
+  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/FlexWrapSetting.vue

@@ -0,0 +1,69 @@
+<template>
+	<div :class="$style.comp">
+    <div class="flex flex-row items-center">
+      <label class="flex-1">Flex Wrap</label>
+      <Dropdown v-model="flexWrap[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: {
+
+    flexWrap(){
+      if(!Array.isArray(this.value.props.flexWrap))
+        this.value.props.flexWrap = this.viewTypes.map(_ => '')
+      return this.value.props.flexWrap
+    }
+
+  },
+
+  data(){
+    return {
+      values: [
+        [ 'Wrap', 'flex-wrap' ],
+        [ 'Wrap reverse', 'flex-wrap-reverse' ],
+        [ 'No wrap', 'flex-nowrap' ],
+      ]
+    }
+  }
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+}
+
+</style>