@mixd-id/web-scaffold 0.2.250801010 → 0.2.250801012

package/src/widgets/WebPageBuilder4/GridSetting.vue

@@ -1,216 +0,0 @@
-<template>
-	<div :class="$style.comp">
-
-    <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">
-      <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="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="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="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>
-</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,
-
-    readonly: [ Boolean, 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
-    },
-
-    colSpan(){
-      if(!Array.isArray(this.value.props.colSpan) || this.value.props.colSpan.length < 1)
-        this.value.props.colSpan = [ '' ]
-      return this.value.props.colSpan
-    },
-
-    rowSpan(){
-      if(!Array.isArray(this.value.props.rowSpan) || this.value.props.rowSpan.length < 1)
-        this.value.props.rowSpan = [ '' ]
-      return this.value.props.rowSpan
-    },
-
-  },
-
-  data(){
-    return {
-      image: null
-    }
-  }
-
-}
-
-</script>
-
-<style module>
-
-.comp{
-  @apply flex flex-col gap-6 p-6;
-}
-
-</style>

package/src/widgets/WebPageBuilder4/HeightSetting.vue

@@ -1,98 +0,0 @@
-<template>
-	<div :class="$style.comp">
-    <div class="flex flex-row items-center">
-      <label class="flex-1">Height</label>
-      <Dropdown v-model="height[index]"
-                :readonly="readonly">
-        <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
-    },
-
-    readonly: [ Boolean, Number ],
-
-    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

@@ -1,102 +0,0 @@
-<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

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

package/src/widgets/WebPageBuilder4/MaxHeightSetting.vue

@@ -1,82 +0,0 @@
-<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>

package/src/widgets/WebPageBuilder4/MaxWidthSetting.vue

@@ -1,90 +0,0 @@
-<template>
-	<div :class="$style.comp">
-    <div class="flex flex-row items-center">
-      <label class="flex-1">Max Width</label>
-      <Dropdown v-model="maxWidth[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: {
-
-    maxWidth(){
-      if(!Array.isArray(this.value.props.maxWidth))
-        this.value.props.maxWidth = this.viewTypes.map(_ => '')
-      return this.value.props.maxWidth
-    }
-
-  },
-
-  data(){
-    return {
-      values: [
-        [ 'max-w-none', 'None' ],
-        [ 'max-w-0', '0' ],
-        [ 'max-w-xs', 'Extra Small' ],
-        [ 'max-w-sm', 'Small' ],
-        [ 'max-w-md', 'Normal' ],
-        [ 'max-w-lg', 'Large' ],
-        [ 'max-w-xl', 'Extra Large' ],
-        [ 'max-w-2xl', 'Extra Large 2' ],
-        [ 'max-w-3xl', 'Extra Large 3' ],
-        [ 'max-w-4xl', 'Extra Large 4' ],
-        [ 'max-w-screen-sm', 'Screen Small' ],
-        [ 'max-w-screen-md', 'Screen Normal' ],
-        [ 'max-w-screen-lg', 'Screen Large' ],
-        [ 'max-w-screen-xl', 'Screen Extra Large' ],
-        [ 'max-w-screen-2xl', 'Screen Extra Large 2' ],
-        [ 'max-w-[10vw]', '10vw' ],
-        [ 'max-w-[20vw]', '20vw' ],
-        [ 'max-w-[30vw]', '30vw' ],
-        [ 'max-w-[40vw]', '40vw' ],
-        [ 'max-w-[50vw]', '50vw' ],
-        [ 'max-w-[60vw]', '60vw' ],
-        [ 'max-w-[70vw]', '70vw' ],
-        [ 'max-w-[80vw]', '80vw' ],
-        [ 'max-w-[90vw]', '90vw' ],
-      ]
-    }
-  }
-
-}
-
-</script>
-
-<style module>
-
-.comp{
-}
-
-</style>