@mixd-id/web-scaffold 0.1.2301231369 → 0.2.240702

package/src/widgets/BorderSetting.vue

@@ -0,0 +1,201 @@
+<template>
+  <div class="grid grid-cols-2 gap-4">
+
+    <div v-if="'bdColor' in item.props" class="col-span-2">
+      <ComponentPropertyLabel label="Border Color"
+                              :removable="removable"
+                              @remove="delete item.props.bdColor" />
+      <ColorPicker v-for="(_, idx) in viewTypes"
+                   v-show="viewType === _.value"
+                   v-model="bdColor[idx]"
+                   :prefix="`${viewType}border-`">
+      </ColorPicker>
+    </div>
+
+    <div v-if="'bdSize' in item.props" class="col-span-2">
+      <ComponentPropertyLabel label="Border Size"
+                              :removable="removable"
+                              @remove="delete item.props.bdSize" />
+      <MultiValueSetting v-model="bdSize"
+                         :viewTypes="viewTypes"
+                         :viewType="viewType"
+                         :keys="[['border'], ['border-x', 'border-y'], ['border-l', 'border-t', 'border-r', 'border-b']]"
+                         :values="[['', 'Normal'], ['-0', '0'], ['-2', '2'], ['-4', '4'], ['-8', '8']]" />
+    </div>
+
+    <div v-if="'bdRadius' in item.props" class="col-span-2">
+      <ComponentPropertyLabel label="Border Radius"
+                              :removable="removable"
+                              @remove="delete item.props.bdRadius" />
+      <Dropdown v-for="(_, idx) in viewTypes"
+                v-show="viewType === _.value"
+                v-model="bdRadius[idx]"
+                @change="$emit('change')">
+        <option value="">Default</option>
+        <option :value="`${viewType}rounded-none`">None</option>
+        <option :value="`${viewType}rounded`">Normal</option>
+        <option :value="`${viewType}rounded-sm`">Sm</option>
+        <option :value="`${viewType}rounded-md`">Md</option>
+        <option :value="`${viewType}rounded-lg`">Lg</option>
+        <option :value="`${viewType}rounded-xl`">Xl</option>
+        <option :value="`${viewType}rounded-2xl`">2xl</option>
+        <option :value="`${viewType}rounded-3xl`">3xl</option>
+        <option :value="`${viewType}rounded-full`">Full</option>
+      </Dropdown>
+    </div>
+
+    <div v-if="'bdStyle' in item.props" class="col-span-2">
+      <ComponentPropertyLabel label="Border Style"
+                              :removable="removable"
+                              @remove="delete item.props.bdStyle" />
+      <Dropdown v-for="(_, idx) in viewTypes"
+                v-show="viewType === _.value"
+                v-model="bdStyle[idx]"
+                @change="$emit('change')">
+        <option value="">Default</option>
+        <option :value="`${viewType}border-solid`">Solid</option>
+        <option :value="`${viewType}border-dashed`">Dashed</option>
+        <option :value="`${viewType}border-dotted`">Dotted</option>
+        <option :value="`${viewType}border-double`">Double</option>
+        <option :value="`${viewType}border-hidden`">Hidden</option>
+        <option :value="`${viewType}border-none`">None</option>
+      </Dropdown>
+    </div>
+
+    <div v-if="'outlineStyle' in item.props">
+      <ComponentPropertyLabel label="Outline Style"
+                              :removable="removable"
+                              @remove="delete item.props.outlineStyle" />
+      <Dropdown v-for="(_, idx) in viewTypes"
+                v-show="viewType === _.value"
+                v-model="outlineStyle[idx]"
+                @change="$emit('change')">
+        <option value="">Default</option>
+        <option :value="`${viewType}outline-dashed`">Dashed</option>
+        <option :value="`${viewType}outline-dotted`">Dotted</option>
+        <option :value="`${viewType}outline-double`">Double</option>
+        <option :value="`${viewType}outline-none`">None</option>
+      </Dropdown>
+    </div>
+
+    <div v-if="'outlineStyle' in item.props">
+      <ComponentPropertyLabel label="Outline Style"
+                              :removable="removable"
+                              @remove="delete item.props.outlineStyle" />
+      <Dropdown v-for="(_, idx) in viewTypes"
+                v-show="viewType === _.value"
+                v-model="outlineStyle[idx]"
+                @change="$emit('change')">
+        <option value="">Default</option>
+        <option :value="`${viewType}outline-dashed`">Dashed</option>
+        <option :value="`${viewType}outline-dotted`">Dotted</option>
+        <option :value="`${viewType}outline-double`">Double</option>
+        <option :value="`${viewType}outline-none`">None</option>
+      </Dropdown>
+    </div>
+
+    <div v-if="'outlineWidth' in item.props">
+      <ComponentPropertyLabel label="Outline Width"
+                              :removable="removable"
+                              @remove="delete item.props.outlineWidth" />
+      <Dropdown v-for="(_, idx) in viewTypes"
+                v-show="viewType === _.value"
+                v-model="outlineWidth[idx]"
+                @change="$emit('change')">
+        <option value="">Default</option>
+        <option :value="`${viewType}outline-0`">0</option>
+        <option :value="`${viewType}outline-2`">2</option>
+        <option :value="`${viewType}outline-4`">4</option>
+        <option :value="`${viewType}outline-8`">8</option>
+      </Dropdown>
+    </div>
+
+  </div>
+</template>
+
+<script>
+
+export default{
+
+  emits: [ 'change' ],
+
+  inject: [ 'viewTypes', 'initPropValue' ],
+
+  props: {
+    config: Object,
+
+    item: {
+      type: Object,
+      required: true
+    },
+
+    removable: Boolean
+  },
+
+  computed: {
+
+    bdColor(){
+      this.initPropValue(this.item.props, 'bdColor')
+      return this.item.props.bdColor
+    },
+
+    bdSize(){
+      this.initPropValue(this.item.props, 'bdSize')
+      return this.item.props.bdSize
+    },
+
+    bdRadius(){
+      this.initPropValue(this.item.props, 'bdRadius')
+      return this.item.props.bdRadius
+    },
+
+    bdStyle(){
+      this.initPropValue(this.item.props, 'bdStyle')
+      return this.item.props.bdStyle
+    },
+
+    divideColor(){
+      this.initPropValue(this.item.props, 'divideColor')
+      return this.item.props.divideColor
+    },
+
+    divideWidth(){
+      this.initPropValue(this.item.props, 'divideWidth')
+      return this.item.props.divideWidth
+    },
+
+    divideStyle(){
+      this.initPropValue(this.item.props, 'divideStyle')
+      return this.item.props.divideStyle
+    },
+
+    outlineColor(){
+      this.initPropValue(this.item.props, 'outlineColor')
+      return this.item.props.outlineColor
+    },
+
+    outlineStyle(){
+      this.initPropValue(this.item.props, 'outlineStyle')
+      return this.item.props.outlineStyle
+    },
+
+    outlineWidth(){
+      this.initPropValue(this.item.props, 'outlineWidth')
+      return this.item.props.outlineWidth
+    },
+
+    viewType(){
+      return this.config.viewType
+    },
+
+  },
+
+  data(){
+    return {
+      _config: {},
+    }
+  }
+
+}
+
+</script>

package/src/widgets/BoxSetting.vue

@@ -0,0 +1,53 @@
+<template>
+	<div>
+		<div>
+			<label class="text-text-400">Title</label>
+			<Textbox v-model="item.props.title" />
+		</div>
+
+		<ComponentSetting2 :item="item"
+											:view-type="viewType"
+											:view-types="viewTypes"
+											default-display="block"
+											@change="$emit('change')" />
+	</div>
+</template>
+
+<script>
+
+export default{
+
+	emits: [ 'save' ],
+
+	inject: [ 'socketEmit2' ],
+
+	methods: {
+
+		save(){
+			this.$emit('save')
+			this.close()
+		}
+
+	},
+
+	props: {
+
+		item: Object,
+
+		viewTypes: Array,
+
+		viewType: String
+
+	}
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+
+}
+
+</style>

package/src/widgets/ButtonSetting.vue

@@ -0,0 +1,114 @@
+<template>
+	<div :class="$style.comp">
+
+		<div class="flex flex-col gap-4">
+      <div>
+        <strong class="flex-1 text-text-400">Button</strong>
+        <div class="h-[1px] bg-text-100 mt-2"></div>
+      </div>
+
+      <div>
+        <label class="flex-1 text-text-400">Text</label>
+        <Textbox v-model="item.props.text" @keyup.enter="$emit('change')"/>
+      </div>
+
+      <div>
+        <label class="flex-1 text-text-400">Target</label>
+        <div class="flex flex-row items-center gap-2">
+          <Dropdown class="w-[70px]"
+                    v-model="item.props.targetType"
+                    @change="item.props.target= ''; $emit('change')">
+            <option value="">URL</option>
+            <option value="section">Section</option>
+          </Dropdown>
+          <Dropdown v-if="item.props.targetType === 'section'"
+                    v-model="item.props.target"
+                    @change="$emit('change')"
+                    class="flex-1">
+            <option value="" disabled>-Select-</option>
+            <option v-for="comp in compUids" :value="comp.uid">{{ comp.name }}</option>
+          </Dropdown>
+          <Textbox class="flex-1" v-else v-model="item.props.target"
+                   @keyup.enter="$emit('change')"
+                   @blur="$emit('change')"/>
+        </div>
+      </div>
+
+      <div>
+        <label class="flex-1 text-text-400">Variant</label>
+        <Dropdown v-model="item.props.variant"
+                  @change="$emit('change')">
+          <option value="primary">Primary</option>
+          <option value="secondary">Secondary</option>
+          <option value="red">Red</option>
+          <option value="minimal">Minimal</option>
+          <option value="outline">Outline</option>
+          <option value="">Not Set</option>
+        </Dropdown>
+      </div>
+    </div>
+
+		<ComponentSetting2 :item="item"
+											:view-type="viewType"
+											:view-types="viewTypes"
+											defaultDisplay="flex"
+											@change="$emit('change')" />
+
+	</div>
+</template>
+
+<script>
+
+import {getComponentUids} from "../utils/helpers.mjs";
+
+export default{
+
+	emits: [ 'change' ],
+
+	props: {
+
+		item: {
+			type: Object,
+			required: true
+		},
+
+		viewType: String,
+
+		viewTypes: Array,
+
+	},
+
+	data(){
+		return {
+		}
+	},
+
+	inject: [ 'confirm', 'imageSrc', 'getPage' ],
+
+	computed: {
+
+		compUids(){
+			if(this.item.props.targetType === 'section'){
+				const page = this.getPage()
+				const components = page.components
+				return getComponentUids(components, [ this.item.uid ])
+			}
+		}
+
+	},
+
+	methods: {
+
+	}
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+	@apply flex flex-col gap-6;
+}
+
+</style>

package/src/widgets/CarouselSetting.vue

@@ -0,0 +1,193 @@
+<template>
+	<div :class="$style.comp">
+
+    <div>
+      <div class="flex flex-row gap-1 items-center cursor-pointer">
+        <svg v-if="!expanded['carousel']" width="12" height="12" @click="expanded['carousel'] = !expanded['carousel']" class="fill-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 512"><path d="M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z"/></svg>
+        <svg v-else width="12" height="12" @click="expanded['carousel'] = !expanded['carousel']" class="fill-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"/></svg>
+        <strong class="flex-1 text-text-400 line-clamp-1" @click="expanded['carousel'] = !expanded['carousel']">Carousel</strong>
+        <button type="button" class="text-primary" @click="$router.replace({ hash:'#select-property' })">
+          <svg width="16" height="16" class="fill-text-300 hover:fill-primary-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M368 224H224V80c0-8.84-7.16-16-16-16h-32c-8.84 0-16 7.16-16 16v144H16c-8.84 0-16 7.16-16 16v32c0 8.84 7.16 16 16 16h144v144c0 8.84 7.16 16 16 16h32c8.84 0 16-7.16 16-16V288h144c8.84 0 16-7.16 16-16v-32c0-8.84-7.16-16-16-16z"/></svg>
+        </button>
+      </div>
+
+      <div class="h-[1px] bg-text-100 mt-2 mb-4"></div>
+
+      <div v-if="expanded['carousel']" class="flex flex-col gap-8">
+
+        <div>
+          <div class="flex flex-row items-center gap-2">
+            <label class="flex-1 text-text-400">Gap</label>
+            <button type="button" v-if="containerGap.length < 2" @click="containerGap.push('')">
+              <svg width="16" height="16" class="fill-text-300 hover:fill-primary-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M352 240v32c0 6.6-5.4 12-12 12h-88v88c0 6.6-5.4 12-12 12h-32c-6.6 0-12-5.4-12-12v-88h-88c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h88v-88c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v88h88c6.6 0 12 5.4 12 12zm96-160v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V80c0-26.5 21.5-48 48-48h352c26.5 0 48 21.5 48 48zm-48 346V86c0-3.3-2.7-6-6-6H54c-3.3 0-6 2.7-6 6v340c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"/></svg>
+            </button>
+          </div>
+          <div class="flex flex-row gap-2">
+            <div v-for="(_, index) in containerGap" class="items-start">
+              <div class="flex flex-row">
+                <small class="w-[60px] flex-1 text-text-300">{{ viewTypes[index].text }}</small>
+                <button type="button" v-if="index > 0" @click="containerGap.splice(index, 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 class="flex flex-row items-start gap-2">
+                <Dropdown v-model="containerGap[index]" class="mt-1 min-w-[100px]" @change="apply">
+                  <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>
+                </Dropdown>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="grid grid-cols-2 gap-4">
+          <div>
+            <label class="text-text-400">Autoplay</label>
+            <Dropdown v-model="item.props.autoPlay" class="mt-1" @change="apply">
+              <option value="0">None</option>
+              <option v-for="i in 10" :value="i * 1000">{{ i }} seconds</option>
+            </Dropdown>
+          </div>
+
+          <div class="flex flex-row gap-4">
+            <div>
+              <label class="text-text-400">Legend</label>
+              <div class="mt-1 py-2">
+                <Checkbox v-model="item.props.useLegend" @change="apply"/>
+              </div>
+            </div>
+            <div>
+              <label class="text-text-400">Infinite</label>
+              <div class="mt-1 py-2">
+                <Checkbox v-model="item.props.infinite" @change="apply"/>
+              </div>
+            </div>
+          </div>
+        </div>
+
+      </div>
+
+    </div>
+
+		<ComponentSetting2 :item="item"
+											:view-type="viewType"
+											:view-types="viewTypes"
+											defaultDisplay="flex"
+											@change="apply" />
+
+		<Modal ref="imageModal" width="320" height="640">
+			<template #head="{ context }">
+				<div class="relative p-5">
+					<h3>Image</h3>
+					<div class="absolute top-0 right-0 p-2">
+						<button type="button" class="p-2" @click="$refs.imageModal.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 class="flex justify-center mt-4">
+						<Tabs v-model="context.viewType" variant="button" :items="viewTypes" />
+					</div>
+				</div>
+			</template>
+			<template #foot="{ context }">
+				<div class="p-5">
+					<Button type="button" class="w-full" @click="context.index >= 0 ?
+						item.items[context.index] = context.item :
+						item.items.push(context.item);
+						$refs.imageModal.close();
+						apply
+						">
+						OK
+					</Button>
+				</div>
+			</template>
+			<template #default="{ context }">
+				<div class="flex-1 p-5 flex flex-col gap-4">
+					<ImageSetting :item="context.item" :view-types="viewTypes" :view-type="context.viewType" />
+					<ComponentSetting2 :item="context.item" :view-types="viewTypes" :view-type="context.viewType" />
+				</div>
+			</template>
+		</Modal>
+
+	</div>
+</template>
+
+<script>
+
+export default{
+
+	emits: [ 'change' ],
+
+	inject: [ 'confirm', 'imageUrl', 'store' ],
+
+	props: {
+
+		item: {
+			type: Object,
+			required: true
+		},
+
+		viewType: String,
+
+		viewTypes: Array,
+
+	},
+
+	methods: {
+
+		apply(){
+			this.$emit('change')
+		}
+
+	},
+
+	computed: {
+
+    componentStore(){
+      if(this.store && this.store.components){
+        if(!this.store.components.compsetting)
+          this.store.components.compsetting = {}
+
+        return this.store.components.compsetting
+      }
+      return {}
+    },
+
+    expanded(){
+      if(!this.componentStore['expanded'])
+        this.componentStore['expanded'] = {}
+      return this.componentStore['expanded']
+    },
+
+		items(){
+			if(!Array.isArray(this.item.items))
+				this.item.items = []
+			return this.item.items
+		},
+
+		containerGap(){
+			if(!Array.isArray(this.item.props.containerGap))
+				this.item.props.containerGap = []
+			return this.item.props.containerGap
+		},
+
+	}
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+	@apply flex flex-col gap-8;
+}
+
+</style>

package/src/widgets/ColumnSelector.vue

@@ -0,0 +1,80 @@
+<template>
+	<Modal :state="isOpen" width="320" height="400">
+	  <template v-slot:head>
+	    <div class="relative p-5">
+	      <h3>{{ $t('Select Column') }}</h3>
+	      <div class="absolute top-0 right-0 p-2">
+	        <button type="button" class="p-2" @click="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>
+      <div class="pb-6"></div>
+    </template>
+	  <div class="flex-1 px-3">
+
+      <div class="flex flex-col divide-y divide-text-50 bg-base-400 border-[1px] border-text-50 rounded-lg overflow-hidden">
+        <button v-for="column in columns"
+                type="button" class="p-3 px-5 text-left hover:bg-primary hover:text-white"
+                @click="select(column)">
+          {{ column.label ? column.label : column.key }}
+        </button>
+      </div>
+
+	  </div>
+	</Modal>
+</template>
+
+<script>
+
+export default{
+
+	emits: [ 'select' ],
+
+	data(){
+		return {
+			isOpen: false,
+      context: null,
+      columns: []
+		}
+	},
+
+	methods: {
+
+		open(context, columns){
+      this.context = context
+      this.columns = columns
+			this.isOpen = true
+		},
+
+		close(){
+			this.isOpen = false
+		},
+
+    select(column){
+      if(typeof this.context === 'function'){
+        this.context(column)
+      }
+      else{
+        this.$emit('select', column, this.context)
+      }
+      this.close()
+    },
+
+	}
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+
+}
+
+</style>

package/src/widgets/ComponentPropertyLabel.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="flex flex-row">
+    <label class="flex-1 text-text-400">{{ label }}</label>
+    <slot v-if="$slots.default" />
+    <button v-else-if="removable"
+            class="mr-1"
+            type="button"
+            @click="$emit('remove')">
+      <svg width="14" height="14" class="fill-text-300 hover:fill-red-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"/></svg>
+    </button>
+  </div>
+</template>
+
+<script>
+
+export default{
+
+  emits: [ 'remove' ],
+
+  props: {
+    label: String,
+    removable: Boolean,
+  }
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+
+}
+
+</style>