@mixd-id/web-scaffold 0.1.230406311 → 0.1.230406313

package/src/widgets/WebPageBuilder4/BackgroundSizeSetting.vue

@@ -0,0 +1,72 @@
+<template>
+	<div :class="$style.comp">
+    <div class="flex flex-row items-center">
+      <label class="flex-1">Background Repeat</label>
+      <Dropdown v-model="bgSize[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: {
+
+    bgSize(){
+      if(!Array.isArray(this.value.props.bgSize))
+        this.value.props.bgSize = this.viewTypes.map(_ => '')
+      return this.value.props.bgSize
+    }
+
+  },
+
+  data(){
+    return {
+      values: [
+        [ 'bg-auto', 'Auto' ],
+        [ 'bg-cover', 'Cover' ],
+        [ 'bg-contain', 'Contain' ],
+        [ 'bg-50%', '50%' ],
+        [ 'bg-20%', '20%' ],
+        [ 'bg-10%', '10%' ],
+      ]
+    }
+  }
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+}
+
+</style>

package/src/widgets/WebPageBuilder4/BlurSetting.vue

@@ -0,0 +1,72 @@
+<template>
+	<div :class="$style.comp">
+    <div class="flex flex-row items-center">
+      <label class="flex-1">Blur</label>
+      <Dropdown v-model="blur[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: {
+
+    blur(){
+      if(!Array.isArray(this.value.props.blur))
+        this.value.props.blur = this.viewTypes.map(_ => '')
+      return this.value.props.blur
+    }
+
+  },
+
+  data(){
+    return {
+      values: [
+        [ 'blur-none', 'None' ],
+        [ 'blur-sm', 'Sm' ],
+        [ 'blur', 'Md' ],
+        [ 'blur-lg', 'Lg' ],
+        [ 'blur-xl', 'Xl' ],
+        [ 'blur-2xl', '2xl' ],
+      ]
+    }
+  }
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+}
+
+</style>

package/src/widgets/WebPageBuilder4/BorderColorSetting.vue

@@ -0,0 +1,64 @@
+<template>
+	<div :class="$style.comp">
+    <div class="flex flex-row items-center">
+      <label class="flex-1">Border Color</label>
+      <ColorPicker2 v-model="bdColor[index]"
+                    :prefix="viewType"
+                    :keys="keys" />
+    </div>
+	</div>
+</template>
+
+<script>
+
+export default{
+
+  computed: {
+
+    bdColor(){
+      if(!Array.isArray(this.value.props.bdColor))
+        this.value.props.bdColor = this.viewTypes.map(_ => '')
+      return this.value.props.bdColor
+    }
+
+  },
+
+  data(){
+    return {
+      keys: [
+        [ 'border-' ],
+      ]
+    }
+  },
+
+  inject: [ 'viewTypes' ],
+
+  props: {
+
+    index: {
+      type: Number,
+      required: true
+    },
+
+    value: {
+      type: Object,
+      required: true
+    },
+
+    viewType: {
+      type: String,
+      required: true
+    },
+
+  },
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+}
+
+</style>

package/src/widgets/WebPageBuilder4/BorderRadiusSetting.vue

@@ -0,0 +1,75 @@
+<template>
+	<div :class="$style.comp">
+    <div class="flex flex-row items-center">
+      <label class="flex-1">Border Radius</label>
+      <Dropdown v-model="bdRadius[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: {
+
+    bdRadius(){
+      if(!Array.isArray(this.value.props.bdRadius))
+        this.value.props.bdRadius = this.viewTypes.map(_ => '')
+      return this.value.props.bdRadius
+    }
+
+  },
+
+  data(){
+    return {
+      values: [
+        [ 'rounded-none', 'None' ],
+        [ 'rounded', 'Normal' ],
+        [ 'rounded-sm', 'Sm' ],
+        [ 'rounded-md', 'Md' ],
+        [ 'rounded-lg', 'Lg' ],
+        [ 'rounded-xl', 'Xl' ],
+        [ 'rounded-2xl', '2xl' ],
+        [ 'rounded-3xl', '3xl' ],
+        [ 'rounded-full', 'Full' ],
+      ]
+    }
+  }
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+}
+
+</style>

package/src/widgets/WebPageBuilder4/BorderSizeSetting.vue

@@ -0,0 +1,69 @@
+<template>
+	<div :class="$style.comp">
+    <div class="flex flex-row">
+      <label class="flex-1">Border Size</label>
+      <MultiValueSetting :keys="keys"
+                          class="items-end"
+                          item-class="max-w-[40px]"
+                          :values="values"
+                          v-model="bdSize[index]"
+                          :prefix="viewType" />
+    </div>
+	</div>
+</template>
+
+<script>
+
+import MultiValueSetting from "./MultiValueSetting.vue";
+
+export default{
+  components: {MultiValueSetting},
+
+  inject: [ 'viewTypes' ],
+
+  props: {
+
+    index: {
+      type: Number,
+      required: true
+    },
+
+    value: {
+      type: Object,
+      required: true
+    },
+
+    viewType: {
+      type: String,
+      required: true
+    },
+
+  },
+
+  computed: {
+
+    bdSize(){
+      if(!Array.isArray(this.value.props.bdSize))
+        this.value.props.bdSize = this.viewTypes.map(_ => '')
+      return this.value.props.bdSize
+    }
+
+  },
+
+  data(){
+    return {
+      keys: [['border'], ['border-x', 'border-y'], ['border-l', 'border-t', 'border-r', 'border-b']],
+      values: [['', 'Normal'], ['-0', '0'], ['-2', '2'], ['-4', '4'], ['-8', '8']]
+    }
+  }
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+}
+
+</style>

package/src/widgets/WebPageBuilder4/BorderStyleSetting.vue

@@ -0,0 +1,72 @@
+<template>
+	<div :class="$style.comp">
+    <div class="flex flex-row items-center">
+      <label class="flex-1">Border Style</label>
+      <Dropdown v-model="bdStyle[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: {
+
+    bdStyle(){
+      if(!Array.isArray(this.value.props.bdStyle))
+        this.value.props.bdStyle = this.viewTypes.map(_ => '')
+      return this.value.props.bdStyle
+    }
+
+  },
+
+  data(){
+    return {
+      values: [
+        [ 'border-solid', 'Solid' ],
+        [ 'border-dashed', 'Dashed' ],
+        [ 'border-dotted', 'Dotted' ],
+        [ 'border-double', 'Double' ],
+        [ 'border-hidden', 'Double' ],
+        [ 'border-none', 'None' ],
+      ]
+    }
+  }
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+}
+
+</style>

package/src/widgets/WebPageBuilder4/BoxShadowSetting.vue

@@ -0,0 +1,73 @@
+<template>
+	<div :class="$style.comp">
+    <div class="flex flex-row items-center">
+      <label class="flex-1">Box Shadow</label>
+      <Dropdown v-model="boxShadow[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: {
+
+    boxShadow(){
+      if(!Array.isArray(this.value.props.boxShadow))
+        this.value.props.boxShadow = this.viewTypes.map(_ => '')
+      return this.value.props.boxShadow
+    }
+
+  },
+
+  data(){
+    return {
+      values: [
+        [ 'shadow-none', 'None' ],
+        [ 'shadow-sm', 'Sm' ],
+        [ 'shadow', 'Md' ],
+        [ 'shadow-lg', 'Lg' ],
+        [ 'shadow-xl', 'Xl' ],
+        [ 'shadow-2xl', '2xl' ],
+        [ 'shadow-inner', 'Inner' ],
+      ]
+    }
+  }
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+}
+
+</style>

package/src/widgets/WebPageBuilder4/ButtonSetting.vue

@@ -0,0 +1,65 @@
+<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">Variant</label>
+      <Dropdown v-model="value.props.variant" class="w-[120px]">
+        <option value="primary">Primary</option>
+        <option value="secondary">Secondary</option>
+        <option value="outline">Outline</option>
+        <option value="minimal">Minimal</option>
+      </Dropdown>
+    </div>
+
+    <div class="flex flex-col gap-1">
+      <label class="flex-1">Text</label>
+      <Textbox v-model="value.props.text" />
+    </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' ],
+
+  name: 'ButtonSetting',
+
+  props: {
+
+    index: Number,
+
+    value: {
+      type: Object,
+      required: true
+    },
+
+    viewType: String,
+
+  },
+}
+
+</script>
+
+<style module>
+
+.comp{
+  @apply flex flex-col gap-5;
+}
+
+</style>