@mixd-id/web-scaffold 0.2.240705 → 0.2.250801009

package/src/widgets/OGSettingModal.vue

@@ -0,0 +1,103 @@
+<template>
+  <Modal ref="modal" width="480" height="420">
+    <template #head>
+      <div class="relative p-5">
+        <h3>{{ $t('Set OG')}}</h3>
+        <div class="absolute top-0 right-0 p-2">
+          <button type="button" class="p-2" @click="$refs.modal.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 #default>
+      <div class="flex-1 p-5 flex flex-col gap-6">
+
+        <div>
+          <small class="text-text-400">Image & Text</small>
+          <div class="flex flex-row gap-2 mt-1">
+            <div>
+              <Image ref="image"
+                     class="w-[90px] aspect-square bg-base-300 rounded-lg border-[1px] border-border-200"
+                     :editable="true"
+                     :src="instance.image"
+                     @click="$refs.image.edit()"
+                     @change="(_, file) => instance.image = file" />
+            </div>
+            <div class="flex-1 flex flex-col gap-2">
+              <Textbox v-model="instance.title" placeholder="Title" maxlength="100" />
+              <Textarea v-model="instance.description" class="mt-1" rows="3" maxlength="255" placeholder="Description" />
+            </div>
+          </div>
+        </div>
+
+        <div class="flex flex-row gap-4">
+          <div>
+            <small class="text-text-400">Type</small>
+            <Dropdown v-model="instance.type" class="mt-1 w-[150px]">
+              <option value="website">Website</option>
+              <option value="article">Article</option>
+            </Dropdown>
+          </div>
+        </div>
+
+      </div>
+    </template>
+
+    <template #foot>
+      <div class="p-5">
+        <Button type="button" class="w-[100px]" @click="save">
+          OK
+        </Button>
+      </div>
+    </template>
+  </Modal>
+</template>
+
+<script setup>
+
+import {inject, ref, useTemplateRef} from "vue";
+
+const modal = useTemplateRef('modal')
+const imageSrc = inject('imageSrc')
+const getPage = inject('getPage')
+const instance = ref(null)
+const callback = ref(null)
+
+function open(obj = {}, cb){
+  const page = getPage()
+
+  instance.value = Object.assign({
+    title: page?.title ?? '',
+    description: page?.description ?? '',
+    type: 'website'
+  }, obj)
+
+  callback.value = cb
+  modal.value.open()
+}
+
+function save(){
+  if(typeof callback.value === 'function'){
+    callback.value(instance.value)
+  }
+
+  modal.value.close()
+}
+
+defineExpose({
+  open
+})
+
+</script>
+
+<style module>
+
+.comp{
+
+}
+
+</style>

package/src/widgets/PaddingSetting.vue

@@ -131,12 +131,12 @@ export default{
 }
 
 .comp button{
-	@apply border-[1px] border-text-200 bg-text-100 rounded-lg p-1 px-3;
+	@apply border-[1px] border-border-200 bg-text-100 rounded-lg p-1 px-3;
 }
 
 .comp select{
 	@apply appearance-none outline-none p-1 px-2 bg-transparent cursor-pointer w-full;
-	@apply border-[1px] border-text-200 rounded-lg;
+	@apply border-[1px] border-border-200 rounded-lg;
 }
 
 </style>

package/src/widgets/ParagraphSetting.vue

@@ -1,7 +1,7 @@
 <template>
 	<div :class="$style.comp">
 
-		<div class="flex flex-col gap-4">
+		<div class="p-6 py-4 flex flex-col gap-4">
       <div>
         <strong class="flex-1 text-text-400">Paragraph</strong>
         <div class="h-[1px] bg-text-100 mt-2"></div>
@@ -26,11 +26,12 @@
       </div>
     </div>
 
-		<ComponentSetting2 :item="item"
-											:view-type="viewType"
-											:view-types="viewTypes"
-											defaultDisplay="flex"
-											@change="$emit('change')" />
+    <ComponentSetting2 :item="item"
+                       :view-type="viewType"
+                       :view-types="viewTypes"
+                       :view-index="viewIndex"
+                       defaultDisplay="block"
+                       @change="$emit('change')" />
 
 	</div>
 </template>
@@ -46,14 +47,16 @@ export default{
 
 	props: {
 
-		item: {
-			type: Object,
-			required: true
-		},
+    item: {
+      type: Object,
+      required: true
+    },
 
-		viewType: String,
+    viewType: String,
 
-		viewTypes: Array,
+    viewIndex: Number,
+
+    viewTypes: Array,
 
 	},
 
@@ -80,7 +83,7 @@ export default{
 <style module>
 
 .comp{
-	@apply flex flex-col gap-6;
+  @apply flex flex-col divide-y divide-border-50;
 }
 
 </style>

package/src/widgets/PositionSetting.vue

@@ -0,0 +1,209 @@
+<template>
+  <div :class="$style.comp">
+
+    <div class="flex flex-row gap-4">
+      <div class="flex-1">
+        <small class="text-text-400">Position</small>
+        <Dropdown class="flex-1 w-full" v-model="position[viewIndex]">
+          <option value="">Default</option>
+          <option v-for="position in positions" :value="position[0]">{{ position[1] }}</option>
+        </Dropdown>
+      </div>
+
+      <div v-if="[ '' ].includes('')" class="w-[80px]">
+        <small class="text-text-400">Z Index</small>
+        <Dropdown v-model="zIndex[viewIndex]">
+          <option value="">-</option>
+          <option v-for="_ in zIndexes" :value="_[0]">{{ _[1] }}</option>
+        </Dropdown>
+      </div>
+    </div>
+
+    <div class="grid grid-cols-4 gap-4">
+      <div>
+        <small class="text-text-400">Left</small>
+        <Dropdown v-model="left[viewIndex]">
+          <option value="">-</option>
+          <option v-for="_ in lefts" :value="_[0]">{{ _[1] }}</option>
+        </Dropdown>
+      </div>
+
+      <div>
+        <small class="text-text-400">Top</small>
+        <Dropdown v-model="top[viewIndex]">
+          <option value="">-</option>
+          <option v-for="_ in tops" :value="_[0]">{{ _[1] }}</option>
+        </Dropdown>
+      </div>
+
+      <div>
+        <small class="text-text-400">Right</small>
+        <Dropdown v-model="right[viewIndex]">
+          <option value="">-</option>
+          <option v-for="_ in rights" :value="_[0]">{{ _[1] }}</option>
+        </Dropdown>
+      </div>
+
+      <div>
+        <small class="text-text-400">Bottom</small>
+        <Dropdown v-model="bottom[viewIndex]">
+          <option value="">-</option>
+          <option v-for="_ in bottoms" :value="_[0]">{{ _[1] }}</option>
+        </Dropdown>
+      </div>
+    </div>
+
+	</div>
+</template>
+
+<script>
+
+export default{
+
+  computed: {
+
+    left(){
+      if(!Array.isArray(this.item.props.left) || this.item.props.left.length < 1)
+        this.item.props.left = []
+      return this.item.props.left
+    },
+
+    top(){
+      if(!Array.isArray(this.item.props.top) || this.item.props.top.length < 1)
+        this.item.props.top = []
+      return this.item.props.top
+    },
+
+    right(){
+      if(!Array.isArray(this.item.props.right) || this.item.props.right.length < 1)
+        this.item.props.right = []
+      return this.item.props.right
+    },
+
+    bottom(){
+      if(!Array.isArray(this.item.props.bottom) || this.item.props.bottom.length < 1)
+        this.item.props.bottom = []
+      return this.item.props.bottom
+    },
+
+    zIndex(){
+      if(!Array.isArray(this.item.props.zIndex) || this.item.props.zIndex.length < 1)
+        this.item.props.zIndex = []
+      return this.item.props.zIndex
+    },
+
+    position(){
+      if(!Array.isArray(this.item.props.position) || this.item.props.position.length < 1)
+        this.item.props.position = []
+      return this.item.props.position
+    },
+
+  },
+
+  data(){
+    return {
+      positions: [
+        [ 'static', 'Static' ],
+        [ 'fixed', 'Fixed' ],
+        [ 'absolute', 'Absolute' ],
+        [ 'relative', 'Relative' ],
+        [ 'sticky', 'Sticky' ],
+      ],
+
+      lefts: [
+        [ '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' ],
+      ],
+
+      tops: [
+        [ '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' ],
+      ],
+
+      rights: [
+        [ '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' ],
+      ],
+
+      bottoms: [
+        [ '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' ],
+      ],
+
+      zIndexes: [
+        [ 'z-0', '0' ],
+        [ 'z-10', '10' ],
+        [ 'z-20', '20' ],
+        [ 'z-30', '30' ],
+        [ 'z-40', '40' ],
+        [ 'z-50', '50' ],
+      ]
+    }
+  },
+
+  props: {
+
+    item: {
+      type: Object,
+      required: true
+    },
+
+    viewType: String,
+
+    viewIndex: Number,
+
+    viewTypes: Array,
+
+  },
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+  @apply flex-1 flex flex-col gap-4;
+}
+
+</style>