@mixd-id/web-scaffold 0.1.230406311 → 0.1.230406313

package/src/widgets/WebPageBuilder4/PositionSetting.vue

@@ -0,0 +1,191 @@
+<template>
+	<div :class="$style.comp">
+    <div class="flex flex-row items-center">
+      <label class="flex-1">Position</label>
+      <Dropdown v-model="position[index]">
+        <option value="">Unset</option>
+        <option v-for="value in values.position" :value="`${viewType}${value[0]}`">
+          {{ value[1] }}
+        </option>
+      </Dropdown>
+    </div>
+    <div class="flex flex-row gap-4"
+         v-if="[ 'absolute', 'relative', 'fixed', 'sticky' ].includes(position[index])">
+      <div>
+        <label>Top</label>
+        <Dropdown v-model="top[index]">
+          <option value="">Unset</option>
+          <option v-for="value in values.top" :value="`${viewType}${value[0]}`">
+            {{ value[1] }}
+          </option>
+        </Dropdown>
+      </div>
+      <div>
+        <label>Right</label>
+        <Dropdown v-model="right[index]">
+          <option value="">Unset</option>
+          <option v-for="value in values.right" :value="`${viewType}${value[0]}`">
+            {{ value[1] }}
+          </option>
+        </Dropdown>
+      </div>
+      <div>
+        <label>Bottom</label>
+        <Dropdown v-model="bottom[index]">
+          <option value="">Unset</option>
+          <option v-for="value in values.bottom" :value="`${viewType}${value[0]}`">
+            {{ value[1] }}
+          </option>
+        </Dropdown>
+      </div>
+    </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: {
+
+    bottom(){
+      if(!Array.isArray(this.value.props.bottom))
+        this.value.props.bottom = this.viewTypes.map(_ => '')
+      return this.value.props.bottom
+    },
+
+    left(){
+      if(!Array.isArray(this.value.props.left))
+        this.value.props.left = this.viewTypes.map(_ => '')
+      return this.value.props.left
+    },
+
+    position(){
+      if(!Array.isArray(this.value.props.position))
+        this.value.props.position = this.viewTypes.map(_ => '')
+      return this.value.props.position
+    },
+
+    right(){
+      if(!Array.isArray(this.value.props.right))
+        this.value.props.right = this.viewTypes.map(_ => '')
+      return this.value.props.right
+    },
+
+    top(){
+      if(!Array.isArray(this.value.props.top))
+        this.value.props.top = this.viewTypes.map(_ => '')
+      return this.value.props.top
+    }
+
+  },
+
+  data(){
+    return {
+      values: {
+        position: [
+          [ 'static', 'Static' ],
+          [ 'fixed', 'Fixed' ],
+          [ 'absolute', 'Absolute' ],
+          [ 'relative', 'Relative' ],
+          [ 'sticky', 'Sticky' ],
+        ],
+        top: [
+          [ 'top-0', '0' ],
+          [ 'top-4', '4' ],
+          [ 'top-6', '6' ],
+          [ 'top-8', '8' ],
+          [ 'top-12', '12' ],
+          [ 'top-16', '16' ],
+          [ 'top-20', '20' ],
+          [ 'top-24', '24' ],
+          [ 'top-28', '28' ],
+          [ 'top-32', '32' ],
+          [ 'top-36', '36' ],
+          [ 'top-48', '48' ],
+        ],
+        left: [
+          [ 'left-0', '0' ],
+          [ 'left-4', '4' ],
+          [ 'left-6', '6' ],
+          [ 'left-8', '8' ],
+          [ 'left-12', '12' ],
+          [ 'left-16', '16' ],
+          [ 'left-20', '20' ],
+          [ 'left-24', '24' ],
+          [ 'left-28', '28' ],
+          [ 'left-32', '32' ],
+          [ 'left-36', '36' ],
+          [ 'left-48', '48' ],
+        ],
+        right: [
+          [ 'right-0', '0' ],
+          [ 'right-4', '4' ],
+          [ 'right-6', '6' ],
+          [ 'right-8', '8' ],
+          [ 'right-12', '12' ],
+          [ 'right-16', '16' ],
+          [ 'right-20', '20' ],
+          [ 'right-24', '24' ],
+          [ 'right-28', '28' ],
+          [ 'right-32', '32' ],
+          [ 'right-36', '36' ],
+          [ 'right-48', '48' ],
+        ],
+        bottom: [
+          [ 'bottom-0', '0' ],
+          [ 'bottom-4', '4' ],
+          [ 'bottom-6', '6' ],
+          [ 'bottom-8', '8' ],
+          [ 'bottom-12', '12' ],
+          [ 'bottom-16', '16' ],
+          [ 'bottom-20', '20' ],
+          [ 'bottom-24', '24' ],
+          [ 'bottom-28', '28' ],
+          [ 'bottom-32', '32' ],
+          [ 'bottom-36', '36' ],
+          [ 'bottom-48', '48' ],
+        ]
+      }
+    }
+  },
+
+  watch: {
+
+    position(to){
+
+    }
+
+  }
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+}
+
+</style>

package/src/widgets/WebPageBuilder4/PropertySetting.vue

@@ -0,0 +1,176 @@
+<template>
+	<div :class="$style.comp">
+
+    <component v-for="setting in definedProperties"
+               :is="setting.component"
+               :value="value"
+               :index="index"
+               :viewType="viewType" />
+
+    <div class="flex justify-center mt-8">
+      <button type="button" class="text-primary" @click="$refs.selector.open()">
+        <svg width="14" height="14" class="fill-primary inline mr-1" 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 256c0 17.69-14.33 32.01-32 32.01H256v144c0 17.69-14.33 31.99-32 31.99s-32-14.3-32-31.99v-144H48c-17.67 0-32-14.32-32-32.01s14.33-31.99 32-31.99H192v-144c0-17.69 14.33-32.01 32-32.01s32 14.32 32 32.01v144h144C417.7 224 432 238.3 432 256z"/></svg>
+        {{ $t('Add Property') }}
+      </button>
+
+      <WebPagePropertySelector ref="selector"
+                               :value="value.props"
+                               :properties="properties" />
+    </div>
+
+	</div>
+</template>
+
+<script>
+
+import {defineAsyncComponent} from "vue";
+import WebPagePropertySelector from "./WebPagePropertySelector.vue";
+
+export default{
+
+  components: {
+    WebPagePropertySelector,
+    BackgroundColorSetting: defineAsyncComponent(() => import('./BackgroundColorSetting.vue')),
+    BackgroundPositionSetting: defineAsyncComponent(() => import('./BackgroundPositionSetting.vue')),
+    BackgroundRepeatSetting: defineAsyncComponent(() => import('./BackgroundRepeatSetting.vue')),
+    BackgroundSizeSetting: defineAsyncComponent(() => import('./BackgroundSizeSetting.vue')),
+    BlurSetting: defineAsyncComponent(() => import('./BlurSetting.vue')),
+    BorderColorSetting: defineAsyncComponent(() => import('./BorderColorSetting.vue')),
+    BorderRadiusSetting: defineAsyncComponent(() => import('./BorderRadiusSetting.vue')),
+    BorderSizeSetting: defineAsyncComponent(() => import('./BorderSizeSetting.vue')),
+    BorderStyleSetting: defineAsyncComponent(() => import('./BorderStyleSetting.vue')),
+    BoxShadowSetting: defineAsyncComponent(() => import('./BoxShadowSetting.vue')),
+    DisplaySetting: defineAsyncComponent(() => import('./DisplaySetting.vue')),
+    FlexAlignSetting: defineAsyncComponent(() => import('./FlexAlignSetting.vue')),
+    FlexDirectionSetting: defineAsyncComponent(() => import('./FlexDirectionSetting.vue')),
+    FlexJustifySetting: defineAsyncComponent(() => import('./FlexJustifySetting.vue')),
+    FlexPropertySetting: defineAsyncComponent(() => import('./FlexPropertySetting.vue')),
+    FlexWrapSetting: defineAsyncComponent(() => import('./FlexWrapSetting.vue')),
+    GapSetting: defineAsyncComponent(() => import('./GapSetting.vue')),
+    GrayscaleSetting: defineAsyncComponent(() => import('./GrayscaleSetting.vue')),
+    HeightSetting: defineAsyncComponent(() => import('./HeightSetting.vue')),
+    MarginSetting: defineAsyncComponent(() => import('./MarginSetting.vue')),
+    MaxHeightSetting: defineAsyncComponent(() => import('./MaxHeightSetting.vue')),
+    MaxWidthSetting: defineAsyncComponent(() => import('./MaxWidthSetting.vue')),
+    MinHeightSetting: defineAsyncComponent(() => import('./MinHeightSetting.vue')),
+    MinWidthSetting: defineAsyncComponent(() => import('./MinWidthSetting.vue')),
+    OpacitySetting: defineAsyncComponent(() => import('./OpacitySetting.vue')),
+    OverflowSetting: defineAsyncComponent(() => import('./OverflowSetting.vue')),
+    PaddingSetting: defineAsyncComponent(() => import('./PaddingSetting.vue')),
+    PositionSetting: defineAsyncComponent(() => import('./PositionSetting.vue')),
+    WidthSetting: defineAsyncComponent(() => import('./WidthSetting.vue')),
+    ZIndexSetting: defineAsyncComponent(() => import('./ZIndexSetting.vue')),
+  },
+
+  computed: {
+
+    definedProperties(){
+      const settings = []
+
+      for(let key in this.properties){
+        if(key in this.value.props){
+          settings.push(this.properties[key])
+        }
+      }
+
+      return settings
+    }
+
+  },
+
+  data(){
+    return {
+      properties: {
+        'bgColors': { component:"BackgroundColorSetting", text:'Background Color', group:'Background' },
+        'bgPosition': { component:"BackgroundPositionSetting", text:'Background Position', group:'Background' },
+        'bgRepeat': { component:"BackgroundRepeatSetting", text:'Background Repeat', group:'Background' },
+        'bgSize': { component:"BackgroundSizeSetting", text:'Background Size', group:'Background' },
+
+        'bdColor': { component:"BorderColorSetting", text:'Border Color', group:'Border' },
+        'bdRadius': { component:"BorderRadiusSetting", text:'Border Radius', group:'Border' },
+        'bdSize': { component:"BorderSizeSetting", text:'Border Size', group:'Border' },
+        'bdStyle': { component:"BorderStyleSetting", text:'Border Style', group:'Border' },
+
+        'boxShadow': { component:"BoxShadowSetting", text:'Box Shadow', group:'Effects' },
+        'opacity': { component:"OpacitySetting", text:'Opacity', group:'Effects' },
+
+        'flex': { component:"FlexPropertySetting", text:'Flex', group:'Flex' },
+        'flexAlign': { component:"FlexAlignSetting", text:'Flex Align', group:'Flex' },
+        'flexDirection': { component:"FlexDirectionSetting", text:'Flex Direction', group:'Flex' },
+        'flexJustify': { component:"FlexJustifySetting", text:'Flex Justify', group:'Flex' },
+        'flexWrap': { component:"FlexWrapSetting", text:'Flex Wrap', group:'Flex' },
+        'gap': { component:"GapSetting", text:'Gap', group:'Flex' },
+
+        'blur': { component:"BlurSetting", text:'Grayscale', group:'Filters' },
+        'grayscale': { component:"GrayscaleSetting", text:'Grayscale', group:'Filters' },
+
+        'display': { component:"DisplaySetting", text:'Display', group:'Layout' },
+        'height': { component:"HeightSetting", text:'Height', group:'Layout' },
+        'margin': { component:"MarginSetting", text:'Margin', group:'Layout' },
+        'maxHeight': { component:"MaxHeightSetting", text:'Max Height', group:'Layout' },
+        'maxWidth': { component:"MaxWidthSetting", text:'Max Width', group:'Layout' },
+        'minHeight': { component:"MinHeightSetting", text:'Min Height', group:'Layout' },
+        'minWidth': { component:"MinWidthSetting", text:'Min Width', group:'Layout' },
+        'overflow': { component:"OverflowSetting", text:'Overflow', group:'Layout' },
+        'position': { component:"PositionSetting", text:'Position', group:'Layout' },
+        'padding': { component:"PaddingSetting", text:'Padding', group:'Layout' },
+        'width': { component:"WidthSetting", text:'Width', group:'Layout' },
+        'zIndex': { component:"ZIndexSetting", text:'Z Index', group:'Layout' },
+      }
+    }
+  },
+
+  inject: [ 'viewTypes' ],
+
+  methods: {
+
+    setDefaultKeys(){
+      if(Array.isArray(this.keys)){
+        for(let propName of this.keys){
+          if(!(propName in this.value.props) && propName in this.properties){
+            this.value.props[propName] = this.viewTypes.map(_ => '')
+          }
+        }
+      }
+    }
+
+  },
+
+  mounted() {
+    this.setDefaultKeys()
+  },
+
+  props: {
+
+    index: Number,
+
+    keys: Array,
+
+    value: {
+      type: Object,
+      required: true
+    },
+
+    viewType: String,
+
+  },
+
+  watch: {
+
+    value(){
+      this.setDefaultKeys()
+    }
+
+  }
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+  @apply flex flex-col gap-5;
+}
+
+</style>

package/src/widgets/WebPageBuilder4/TextSetting.vue

@@ -0,0 +1,72 @@
+<template>
+	<div :class="$style.comp">
+
+		<strong>Text 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-col gap-1">
+      <label class="flex-1">Text</label>
+      <HTMLEditor v-model="htmlText2[index]" />
+    </div>
+
+    <PropertySetting :value="value" :index="index" :viewType="viewType" />
+
+	</div>
+</template>
+
+<script>
+
+import {defineAsyncComponent} from "vue";
+
+export default{
+  components: {
+    PropertySetting: defineAsyncComponent(() => import('./PropertySetting.vue'))
+  },
+
+  inject: [ 'viewTypes' ],
+
+  props: {
+
+    index: Number,
+
+    value: {
+      type: Object,
+      required: true
+    },
+
+    viewType: String,
+
+  },
+
+  computed: {
+
+    htmlText2(){
+      if(!Array.isArray(this.value.props.htmlText2))
+        this.value.props.htmlText2 = this.viewTypes.map(_ => '')
+
+      return this.value.props.htmlText2
+    },
+
+  },
+
+  data(){
+    return {
+      image: null
+    }
+  }
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+  @apply flex flex-col gap-5;
+}
+
+</style>

package/src/widgets/WebPageBuilder4/TreeView.vue

@@ -0,0 +1,43 @@
+<template>
+	<div :class="$style.comp">
+		<TreeViewItem v-for="item in items"
+                  :parent="items"
+                  :config="config"
+                  :item="item"
+                  :value="modelValue"
+                  @change="uid => $emit('update:modelValue', uid)">
+      <template #item="{ item, parent }">
+        <slot name="item" :item="item" :parent="parent"></slot>
+      </template>
+    </TreeViewItem>
+	</div>
+</template>
+
+<script>
+import TreeViewItem from "./TreeViewItem.vue";
+
+export default{
+
+  components: {
+    TreeViewItem
+  },
+
+  name: 'TreeView',
+
+  props:{
+    items: Array,
+    config: Object,
+    modelValue: String,
+  }
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+  @apply flex flex-col gap-1;
+}
+
+</style>