@mixd-id/web-scaffold 0.1.230406311 → 0.1.230406313

package/src/widgets/WebPageBuilder4/GapSetting.vue

@@ -0,0 +1,75 @@
+<template>
+	<div :class="$style.comp">
+    <div class="flex flex-row items-center">
+      <label class="flex-1">Gap</label>
+      <Dropdown v-model="gap[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: {
+
+    gap(){
+      if(!Array.isArray(this.value.props.gap))
+        this.value.props.gap = this.viewTypes.map(_ => '')
+      return this.value.props.gap
+    }
+
+  },
+
+  data(){
+    return {
+      values: [
+        [ 'gap-0', '0' ],
+        [ 'gap-1', '1' ],
+        [ 'gap-2', '2' ],
+        [ 'gap-3', '3' ],
+        [ 'gap-4', '4' ],
+        [ 'gap-5', '5' ],
+        [ 'gap-6', '6' ],
+        [ 'gap-7', '7' ],
+        [ 'gap-8', '8'],
+      ]
+    }
+  }
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+}
+
+</style>

package/src/widgets/WebPageBuilder4/GrayscaleSetting.vue

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

package/src/widgets/WebPageBuilder4/GridSetting.vue

@@ -0,0 +1,166 @@
+<template>
+	<div :class="$style.comp">
+		<strong>Grid Setting</strong>
+
+    <div class="flex flex-row items-center">
+      <label class="flex-1">Enabled</label>
+      <Switch v-model="value.props.enabled" />
+    </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]">
+        <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 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]">
+        <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 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]">
+        <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 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]">
+        <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]">
+        <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>
+
+    <PaddingSetting :value="value" :index="index" />
+
+    <MarginSetting :value="value" :index="index" />
+
+	</div>
+</template>
+
+<script>
+
+import {defineAsyncComponent} from "vue";
+
+export default{
+  components: {
+    MarginSetting: defineAsyncComponent(() => import('./MarginSetting.vue')),
+    PaddingSetting: defineAsyncComponent(() => import('./PaddingSetting.vue'))
+  },
+
+  inject: [ 'uploadImage', 'viewTypes' ],
+
+  props: {
+
+    value: {
+      type: Object,
+      required: true
+    },
+
+    index: Number,
+
+    viewType: String,
+
+  },
+
+  computed: {
+
+    columns(){
+      if(!Array.isArray(this.value.props.columns) || this.value.props.columns.length < 1)
+        this.value.props.columns = [ '' ]
+      return this.value.props.columns
+    },
+
+    gap(){
+      if(!Array.isArray(this.value.props.gap))
+        this.value.props.gap = [ 'gap-2' ]
+
+      return this.value.props.gap
+    },
+
+    rows(){
+      if(!Array.isArray(this.value.props.rows) || this.value.props.rows.length < 1)
+        this.value.props.rows = [ '' ]
+      return this.value.props.rows
+    },
+
+    alignItems(){
+      if(!Array.isArray(this.value.props.alignItems) || this.value.props.alignItems.length < 1)
+        this.value.props.alignItems = [ '' ]
+      return this.value.props.alignItems
+    },
+
+    justifyContent(){
+      if(!Array.isArray(this.value.props.justifyContent) || this.value.props.justifyContent.length < 1)
+        this.value.props.justifyContent = [ '' ]
+      return this.value.props.justifyContent
+    },
+
+  },
+
+  data(){
+    return {
+      image: null
+    }
+  }
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+  @apply flex flex-col gap-5;
+}
+
+</style>

package/src/widgets/WebPageBuilder4/HeightSetting.vue

@@ -0,0 +1,95 @@
+<template>
+	<div :class="$style.comp">
+    <div class="flex flex-row items-center">
+      <label class="flex-1">Height</label>
+      <Dropdown v-model="height[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: {
+
+    height(){
+      if(!Array.isArray(this.value.props.height))
+        this.value.props.height = this.viewTypes.map(_ => '')
+      return this.value.props.height
+    }
+
+  },
+
+  data(){
+    return {
+      values: [
+        [ 'h-1', '1' ],
+        [ 'h-2', '2' ],
+        [ 'h-3', '3' ],
+        [ 'h-4', '4' ],
+        [ 'h-5', '5' ],
+        [ 'h-6', '6' ],
+        [ 'h-7', '7' ],
+        [ 'h-8', '8' ],
+        [ 'h-9', '9' ],
+        [ 'h-10', '10' ],
+        [ 'h-11', '11' ],
+        [ 'h-12', '12' ],
+        [ 'h-14', '14' ],
+        [ 'h-16', '16' ],
+        [ 'h-20', '20' ],
+        [ 'h-24', '24' ],
+        [ 'h-32', '32' ],
+        [ 'h-36', '36' ],
+        [ 'h-48', '48' ],
+        [ 'h-10vh', '10vh' ],
+        [ 'h-20vh', '20vh' ],
+        [ 'h-30vh', '30vh' ],
+        [ 'h-40vh', '40vh' ],
+        [ 'h-50vh', '50vh' ],
+        [ 'h-60vh', '60vh' ],
+        [ 'h-70vh', '70vh' ],
+        [ 'h-80vh', '80vh' ],
+        [ 'h-90vh', '90vh' ],
+        [ 'h-100vh', '100vh' ]
+      ]
+    }
+  }
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+}
+
+</style>

package/src/widgets/WebPageBuilder4/ImageSetting.vue

@@ -0,0 +1,102 @@
+<template>
+	<div :class="$style.comp">
+		<strong>Image Setting</strong>
+
+    <div>
+      <div class="flex flex-row items-center gap-2">
+        <label class="flex-1">Src</label>
+        <button v-if="src[index]"
+                type="button"
+                class="text-primary"
+                @click="$refs.image.edit()">
+          Change
+        </button>
+      </div>
+      <Image class="mt-1 w-full max-w-[120px] min-h-[100px] bg-text-50 rounded-lg flex"
+             :src="src[index]"
+             :editable="true"
+             ref="image"
+             @change="(_, file) => uploadImage(file).then(res => src[index] = res.url)">
+        <template #empty>
+          <div class="flex-1 flex items-center justify-center">
+            <button type="button"
+                    @click="$refs.image.edit()">
+              <svg width="19" height="19" class="fill-text-300 hover:fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M447.1 32h-384C28.64 32-.0091 60.65-.0091 96v320c0 35.35 28.65 64 63.1 64h384c35.35 0 64-28.65 64-64V96C511.1 60.65 483.3 32 447.1 32zM111.1 96c26.51 0 48 21.49 48 48S138.5 192 111.1 192s-48-21.49-48-48S85.48 96 111.1 96zM446.1 407.6C443.3 412.8 437.9 416 432 416H82.01c-6.021 0-11.53-3.379-14.26-8.75c-2.73-5.367-2.215-11.81 1.334-16.68l70-96C142.1 290.4 146.9 288 152 288s9.916 2.441 12.93 6.574l32.46 44.51l93.3-139.1C293.7 194.7 298.7 192 304 192s10.35 2.672 13.31 7.125l128 192C448.6 396 448.9 402.3 446.1 407.6z"/></svg>
+            </button>
+          </div>
+        </template>
+
+        <template #error>
+          <div class="flex-1 flex items-center justify-center">
+            <button type="button"
+                    @click="$refs.image.edit()">
+              <svg width="19" height="19" class="fill-text-300 hover:fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M447.1 32h-384C28.64 32-.0091 60.65-.0091 96v320c0 35.35 28.65 64 63.1 64h384c35.35 0 64-28.65 64-64V96C511.1 60.65 483.3 32 447.1 32zM111.1 96c26.51 0 48 21.49 48 48S138.5 192 111.1 192s-48-21.49-48-48S85.48 96 111.1 96zM446.1 407.6C443.3 412.8 437.9 416 432 416H82.01c-6.021 0-11.53-3.379-14.26-8.75c-2.73-5.367-2.215-11.81 1.334-16.68l70-96C142.1 290.4 146.9 288 152 288s9.916 2.441 12.93 6.574l32.46 44.51l93.3-139.1C293.7 194.7 298.7 192 304 192s10.35 2.672 13.31 7.125l128 192C448.6 396 448.9 402.3 446.1 407.6z"/></svg>
+            </button>
+          </div>
+        </template>
+      </Image>
+    </div>
+
+    <div>
+      <label>Alt</label>
+      <Textbox v-model="value.props.alt" rows="3" ref="alt" />
+    </div>
+
+    <PropertySetting :value="value" :index="index" :viewType="viewType" />
+
+	</div>
+</template>
+
+<script>
+
+import {defineAsyncComponent} from "vue";
+
+export default{
+  components: {
+    PropertySetting: defineAsyncComponent(() => import('./PropertySetting.vue'))
+  },
+
+  computed: {
+
+    src(){
+      if(!Array.isArray(this.value.props.src))
+        this.value.props.src = this.viewTypes.map(_ => '')
+      return this.value.props.src
+    }
+
+  },
+
+  data(){
+    return {
+      image: null
+    }
+  },
+
+  inject: [ 'uploadImage', 'viewTypes' ],
+
+  name: 'ImageSetting',
+
+  props: {
+
+    index: Number,
+
+    value: {
+      type: Object,
+      required: true
+    },
+
+    viewType: String,
+
+  },
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+  @apply flex flex-col gap-8;
+}
+
+</style>

package/src/widgets/WebPageBuilder4/MarginSetting.vue

@@ -0,0 +1,64 @@
+<template>
+  <div :class="$style.comp">
+    <div class="flex flex-row">
+      <label class="flex-1">Margin</label>
+      <MultiValueSetting :keys="keys"
+                         class="items-end"
+                         item-class="max-w-[40px]"
+                         v-model="margin[index]"
+                         :prefix="viewType" />
+    </div>
+  </div>
+</template>
+
+<script>
+
+import MultiValueSetting from "./MultiValueSetting.vue";
+
+export default{
+  components: {MultiValueSetting},
+
+  inject: [ 'viewTypes' ],
+
+  props: {
+
+    value: {
+      type: Object,
+      required: true
+    },
+
+    index: Number,
+    viewType: String,
+
+  },
+
+  computed: {
+
+    margin(){
+      if(!Array.isArray(this.value.props.margin))
+        this.value.props.margin = this.viewTypes.map(_ => '')
+      return this.value.props.margin
+    }
+
+  },
+
+  data(){
+    return {
+      keys: [
+        [ 'm-' ],
+        [ 'mx-', 'my-' ],
+        [ 'ml-', 'mt-', 'mr-', 'mb-' ]
+      ]
+    }
+  }
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+}
+
+</style>

package/src/widgets/WebPageBuilder4/MaxHeightSetting.vue

@@ -0,0 +1,82 @@
+<template>
+	<div :class="$style.comp">
+    <div class="flex flex-row items-center">
+      <label class="flex-1">Max Height</label>
+      <Dropdown v-model="maxHeight[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: {
+
+    maxHeight(){
+      if(!Array.isArray(this.value.props.maxHeight))
+        this.value.props.maxHeight = this.viewTypes.map(_ => '')
+      return this.value.props.maxHeight
+    }
+
+  },
+
+  data(){
+    return {
+      values: [
+        [ 'max-h-0', '0' ],
+        [ 'max-h-1', '1' ],
+        [ 'max-h-2', '2' ],
+        [ 'max-h-3', '3' ],
+        [ 'max-h-4', '4' ],
+        [ 'max-h-5', '5' ],
+        [ 'max-h-[10vh]', '10vh' ],
+        [ 'max-h-[20vh]', '20vh' ],
+        [ 'max-h-[30vh]', '30vh' ],
+        [ 'max-h-[40vh]', '40vh' ],
+        [ 'max-h-[50vh]', '50vh' ],
+        [ 'max-h-[60vh]', '60vh' ],
+        [ 'max-h-[70vh]', '70vh' ],
+        [ 'max-h-[80vh]', '80vh' ],
+        [ 'max-h-[90vh]', '90vh' ],
+        [ 'max-h-screen', 'Full' ],
+      ]
+    }
+  }
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+}
+
+</style>