@mixd-id/web-scaffold 0.2.250801013 → 0.2.250801014

package/src/widgets/ComponentSetting3.vue

@@ -1,231 +0,0 @@
-<template>
-  <div :class="$style.comp">
-
-    <div class="p-5 flex flex-col gap-4">
-      <div class="flex flex-row gap-1 items-start cursor-pointer">
-        <div v-if="!item.props.name" class="flex-1">
-          <strong class="flex-1 text-text-400 line-clamp-1">{{ item.type }}</strong>
-        </div>
-        <div v-else class="flex-1 flex flex-col">
-          <small class="text-text-400 text-xs">{{ item.type }}</small>
-          <strong class="flex-1 text-text-400 line-clamp-1">{{ item.props.name }}</strong>
-        </div>
-        <button type="button" class="text-primary" @click="log(item)">Log</button>
-      </div>
-
-      <div class="flex flex-row gap-4">
-        <div>
-          <label class="text-text-400">Enabled</label>
-          <Switch v-model="item.props.enabled" class="mt-2" />
-        </div>
-        <div class="flex-1">
-          <label class="text-text-400">Name</label>
-          <Textbox v-model="item.props.name" class="mt-2" />
-        </div>
-      </div>
-    </div>
-
-    <component :is="`${item.type}Setting`"
-               :config="config"
-               :item="item"
-               class="p-5 flex flex-col gap-4"
-               @change="$emit('change')" />
-
-    <component v-for="itemType in additionalSettings"
-               :is="itemType"
-               :config="config"
-               :item="item"
-               :removable="true"
-               class="p-5 flex flex-col gap-4" />
-
-    <div class="text-center">
-      <ComponentPropertySelector :propertyGroups="propertyGroups"
-                                 ref="componentPropertySelector"
-                                 :excludes="Object.keys(item.props)"
-                                 @add="addProperty" />
-
-      <button type="button" class="text-primary p-3"
-              @click="$refs.componentPropertySelector.open">
-        <svg width="16" height="16" class="fill-primary inline" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M376 232H216V72c0-4.42-3.58-8-8-8h-32c-4.42 0-8 3.58-8 8v160H8c-4.42 0-8 3.58-8 8v32c0 4.42 3.58 8 8 8h160v160c0 4.42 3.58 8 8 8h32c4.42 0 8-3.58 8-8V280h160c4.42 0 8-3.58 8-8v-32c0-4.42-3.58-8-8-8z"/></svg>
-        Add Property
-      </button>
-    </div>
-
-  </div>
-</template>
-
-<script>
-
-import ComponentPropertySelector from "./ComponentPropertySelector.vue";
-
-export default{
-
-  components: {ComponentPropertySelector},
-
-  emits: [ 'change' ],
-
-  inject: [ 'imageSrc', 'uploadImage', 'viewTypes' ],
-
-  provide(){
-    return {
-      initPropValue: this.initPropValue
-    }
-  },
-
-  props: {
-    config: Object,
-
-    item: {
-      type: Object,
-      required: true
-    },
-  },
-
-  computed: {
-
-    additionalSettings(){
-
-      let additionalSettings = {}
-      for(let group in this.propertyGroups){
-        for(let key in this.propertyGroups[group]){
-          if(Array.isArray(this.item.props[key])){
-            group = group.replace(/\W/g, '')
-            additionalSettings[`${group}Setting`] = 1
-          }
-        }
-      }
-
-      if(additionalSettings[`${this.item.type}Setting`])
-        delete additionalSettings[`${this.item.type}Setting`]
-
-      return Object.keys(additionalSettings)
-    },
-
-    viewType(){
-      return this.config.viewType
-    },
-
-  },
-
-  data(){
-    return {
-      _config: {},
-
-      types: {
-        type: Array,
-        default: [ 1, 2, 4 ]
-      },
-
-      propertyGroups: {
-        'Layout': {
-          aspectRatio: { text:'Aspect Ratio' },
-          position: { text:'Position' },
-          display: { text:'Display' },
-          overflow: { text:'Overflow' },
-          top: { text:'Top' },
-          left: { text:'Left' },
-          right: { text:'Right' },
-          bottom: { text:'Bottom' },
-          zIndex: { text:'Z Index' },
-        },
-        'Flex': {
-          flex: { text:'Flex' },
-          flexAlign: { text:'Align' },
-          flexBasis: { text:'Basis' },
-          flexJustify: { text:'Justify' },
-          flexDirection: { text:'Direction' },
-          flexWrap: { text:'Wrap' },
-          flexGap: { text:'Gap' },
-        },
-        'Grid': {
-          colSpan: { text:'Col span' },
-          gridGap: { text:'Gap' },
-          rowSpan: { text:'Row span' },
-        },
-        'Background': {
-          bgColor: { text:'Background Color' },
-          bgPosition: { text:'Background Position' },
-          bgRepeat: { text:'Background Repeat' },
-          bgSize: { text:'Background Size' },
-        },
-        'Border': {
-          bdColor: { text:'Border Color' },
-          bdSize: { text:'Border Size' },
-          bdRadius: { text:'Border Radius' },
-          bdStyle: { text:'Border Style' },
-          outlineStyle: { text:'Outline Style' },
-          outlineWidth: { text:'Outline Width' },
-        },
-        'Transition': {
-          animate: { text:'Animation' },
-        },
-        'Effect': {
-          boxShadow: { text:'Box Shadow' },
-          opacity: { text:'Opacity' },
-        },
-        'Spacing': {
-          padding: { text:'Padding' },
-          margin: { text:'Margin' },
-        },
-        'Sizing': {
-          height: { text:'Height' },
-          width: { text:'Width' },
-          maxHeight: { text:'Max Height' },
-          maxWidth: { text:'Max Width' },
-          minHeight: { text:'Min Height' },
-          minWidth: { text:'Min Width' },
-        },
-        'Typography': {
-          fontFamily: { text:'Font Family' },
-          fontSize: { text:'Font Size' },
-          fontStyle: { text:'Font Style' },
-          fontWeight: { text:'Font Weight' },
-          letterSpacing: { text:'Letter Spacing' },
-          lineClamp: { text:'Line Clamp' },
-          lineHeight: { text:'Line Height' },
-          textAlign: { text:'Text Align' },
-          textDecoration: { text:'Text Decoration' },
-          textOverflow: { text:'Text Overflow' },
-          textTransform: { text:'Text Transform' },
-          whitespace: { text:'Whitespace' },
-          verticalAlign: { text:'Vertical Align' },
-        },
-        'Filters': {
-          blur: { text:'Blur' },
-          grayscale: { text:'Grayscale' },
-        },
-        'Svg': {
-          fill: { text:'Fill' },
-          stroke: { text:'Stroke' },
-          strokeWidth: { text:'Stroke Width' },
-        },
-      },
-    }
-  },
-
-  methods: {
-
-    addProperty(prop){
-      this.initPropValue(this.item.props, prop.name)
-      this.$refs.componentPropertySelector.close()
-    },
-
-    initPropValue(props, name, defaultValue = ''){
-      if(!Array.isArray(props[name]) ||
-          props[name].length !== Object.keys(this.viewTypes).length)
-        props[name] = Object.assign(Object.keys(this.viewTypes).map(_ => JSON.parse(JSON.stringify(defaultValue))), props[name] ?? [])
-    }
-
-  }
-
-}
-
-</script>
-
-<style module>
-
-.comp{
-  @apply flex-1 flex flex-col divide-y divide-border-50;
-}
-
-</style>

package/src/widgets/EffectSetting.vue

@@ -1,94 +0,0 @@
-<template>
-  <div class="grid grid-cols-2 gap-4">
-
-    <div v-if="'boxShadow' in item.props">
-      <ComponentPropertyLabel label="Box Shadow"
-                              :removable="removable"
-                              @remove="delete item.props.boxShadow" />
-      <Dropdown v-for="(_, idx) in viewTypes"
-                v-show="viewType === _.value"
-                v-model="boxShadow[idx]"
-                @change="$emit('change')">
-        <option value="">Default</option>
-        <option :value="`${viewType}shadow-none`">None</option>
-        <option :value="`${viewType}shadow-sm`">Small</option>
-        <option :value="`${viewType}shadow`">Medium</option>
-        <option :value="`${viewType}shadow-lg`">Large</option>
-        <option :value="`${viewType}shadow-xl`">Extra Large</option>
-        <option :value="`${viewType}shadow-2xl`">Extra Large 2</option>
-        <option :value="`${viewType}shadow-inner`">Inner</option>
-      </Dropdown>
-    </div>
-
-    <div v-if="'opacity' in item.props">
-      <ComponentPropertyLabel label="Opacity"
-                              :removable="removable"
-                              @remove="delete item.props.opacity" />
-      <Dropdown v-for="(_, idx) in viewTypes"
-                v-show="viewType === _.value"
-                v-model="opacity[idx]"
-                @change="$emit('change')">
-        <option value="">Default</option>
-        <option :value="`${viewType}opacity-0`">0</option>
-        <option :value="`${viewType}opacity-10`">10%</option>
-        <option :value="`${viewType}opacity-20`">20%</option>
-        <option :value="`${viewType}opacity-30`">30%</option>
-        <option :value="`${viewType}opacity-40`">40%</option>
-        <option :value="`${viewType}opacity-50`">50%</option>
-        <option :value="`${viewType}opacity-60`">60%</option>
-        <option :value="`${viewType}opacity-70`">70%</option>
-        <option :value="`${viewType}opacity-80`">80%</option>
-        <option :value="`${viewType}opacity-90`">90%</option>
-        <option :value="`${viewType}opacity-100`">100%</option>
-      </Dropdown>
-    </div>
-
-  </div>
-</template>
-
-<script>
-
-export default{
-
-  emits: [ 'change' ],
-
-  inject: [ 'viewTypes', 'initPropValue' ],
-
-  props: {
-    config: Object,
-
-    item: {
-      type: Object,
-      required: true
-    },
-
-    removable: Boolean
-  },
-
-  computed: {
-
-    boxShadow(){
-      this.initPropValue(this.item.props, 'boxShadow')
-      return this.item.props.boxShadow
-    },
-
-    opacity(){
-      this.initPropValue(this.item.props, 'opacity')
-      return this.item.props.opacity
-    },
-
-    viewType(){
-      return this.config.viewType
-    },
-
-  },
-
-  data(){
-    return {
-      _config: {},
-    }
-  }
-
-}
-
-</script>

package/src/widgets/FiltersSetting.vue

@@ -1,88 +0,0 @@
-<template>
-  <div class="grid grid-cols-2 gap-4">
-
-    <div v-if="'blur' in item.props">
-      <ComponentPropertyLabel label="Blur"
-                              :removable="removable"
-                              @remove="delete item.props.blur" />
-      <Dropdown v-for="(_, idx) in viewTypes"
-                v-show="viewType === _.value"
-                v-model="blur[idx]"
-                @change="$emit('change')">
-        <option value="">Default</option>
-        <option :value="`${viewType}blur-none`">None</option>
-        <option :value="`${viewType}blur-sm`">Sm</option>
-        <option :value="`${viewType}blur`">Md</option>
-        <option :value="`${viewType}blur-lg`">Lg</option>
-        <option :value="`${viewType}blur-xl`">Xl</option>
-        <option :value="`${viewType}blur-2xl`">2xl</option>
-      </Dropdown>
-    </div>
-
-    <div v-if="'grayscale' in item.props">
-      <ComponentPropertyLabel label="Grayscale"
-                              :removable="removable"
-                              @remove="delete item.props.grayscale" />
-      <Dropdown v-for="(_, idx) in viewTypes"
-                v-show="viewType === _.value"
-                v-model="grayscale[idx]"
-                @change="$emit('change')">
-        <option value="">Default</option>
-        <option :value="`${viewType}grayscale-0`">Not Grayscale</option>
-        <option :value="`${viewType}grayscale`">Grayscale</option>
-      </Dropdown>
-    </div>
-
-  </div>
-</template>
-
-<script>
-
-import ComponentPropertyLabel from "./ComponentPropertyLabel.vue";
-import Dropdown from "../components/Dropdown.vue";
-
-export default{
-  components: {Dropdown, ComponentPropertyLabel},
-
-  emits: [ 'change' ],
-
-  inject: [ 'viewTypes', 'initPropValue' ],
-
-  props: {
-    config: Object,
-
-    item: {
-      type: Object,
-      required: true
-    },
-
-    removable: Boolean
-  },
-
-  computed: {
-
-    blur(){
-      this.initPropValue(this.item.props, 'blur')
-      return this.item.props.blur
-    },
-
-    grayscale(){
-      this.initPropValue(this.item.props, 'grayscale')
-      return this.item.props.grayscale
-    },
-
-    viewType(){
-      return this.config.viewType
-    },
-
-  },
-
-  data(){
-    return {
-      _config: {},
-    }
-  }
-
-}
-
-</script>

package/src/widgets/Header.vue

@@ -1,15 +0,0 @@
-<template>
-	<component :is="variant" />
-</template>
-
-<script>
-
-export default{
-
-  props: {
-    variant: String
-  }
-
-}
-
-</script>

package/src/widgets/Header0.vue

@@ -1,41 +0,0 @@
-<template>
-	<div :class="$style.comp">
-    <component v-for="(item, idx) in items"
-               :is="item.type"
-               :key="item.key"
-               :="item" />
-	</div>
-</template>
-
-<script>
-
-import {componentMixin} from "../mixin/component";
-
-export default{
-
-	mixins: [ componentMixin ],
-
-	props: {
-		images: Object,
-    items: Array,
-	},
-
-	computed: {
-
-		logoUrl(){
-			return import.meta.env.VITE_IMAGE_HOST + '/' + (this.images ?? {}).logo
-		}
-
-	}
-
-}
-
-</script>
-
-<style module>
-
-.comp{
-	@apply bg-white flex flex-row items-center;
-}
-
-</style>

package/src/widgets/Header0Setting.vue

@@ -1,75 +0,0 @@
-<template>
-	<div class="flex flex-col gap-6">
-
-	</div>
-</template>
-
-<script>
-
-export default{
-
-	emits: [ 'change' ],
-
-	inject: [ 'alert', 'imageSrc', 'openComponentSelector', 'uploadImage' ],
-
-	props: {
-
-		item: {
-			type: Object,
-			required: true
-		},
-
-		viewType: String,
-
-		viewTypes: Array,
-
-	},
-
-	computed: {
-
-		logoSrc(){
-			if(!this.item.props.images){
-				this.item.props.images = {}
-			}
-
-			return typeof this.item.props.images .logo === 'string' ?
-				import.meta.env.VITE_IMAGE_HOST + '/' + this.item.props.images.logo :
-				this.item.props.images.logo
-		},
-
-    menu(){
-      if(!this.item.props.menu){
-        this.item.props.menu = []
-      }
-
-      return this.item.props.menu
-    },
-
-    icons(){
-      if(!this.item.props.icons){
-        this.item.props.icons = []
-      }
-
-      return this.item.props.icons
-    },
-
-	},
-
-	methods: {
-
-
-	}
-
-}
-
-</script>
-
-<style module>
-
-.imageBg{
-	@apply p-2 bg-white;
-	background-image: radial-gradient(rgba(var(--primary-500)) 1px, transparent 1px);
-	background-size: calc(10 * 1px) calc(10 * 1px);
-}
-
-</style>

package/src/widgets/HeaderSetting.vue

@@ -1,102 +0,0 @@
-<template>
-  <div :class="$style.comp">
-
-		<div class="flex flex-col gap-6 p-6">
-
-      <div class="flex flex-col gap-1">
-        <small class="flex-1 text-text-400">Model</small>
-        <Dropdown v-model="item.props.variant"
-                  @change="$emit('change')">
-          <option value="Header1">Model 1</option>
-          <option value="Header2">Model 2</option>
-        </Dropdown>
-      </div>
-
-      <component :is="`${item.props.variant}Setting`"
-                 :item="item"
-                 :view-type="viewType"
-                 :view-types="viewTypes"
-                 :view-index="viewIndex"
-                 @change="$emit('change')" />
-
-    </div>
-
-    <ComponentSetting2 :item="item"
-                       :view-type="viewType"
-                       :view-types="viewTypes"
-                       :view-index="viewIndex"
-                       defaultDisplay="block"
-                       @change="$emit('change')" />
-
-	</div>
-</template>
-
-<script>
-
-export default{
-
-	emits: [ 'change' ],
-
-	inject: [ 'alert', 'imageSrc', 'uploadImage' ],
-
-	props: {
-
-		item: {
-			type: Object,
-			required: true
-		},
-
-    viewType: String,
-
-    viewIndex: Number,
-
-    viewTypes: Array,
-
-	},
-
-	computed: {
-
-		logoSrc(){
-			if(!this.item.props.images){
-				this.item.props.images = {}
-			}
-
-			return typeof this.item.props.images .logo === 'string' ?
-				import.meta.env.VITE_IMAGE_HOST + '/' + this.item.props.images.logo :
-				this.item.props.images.logo
-		},
-
-    menu(){
-      if(!this.item.props.menu){
-        this.item.props.menu = []
-      }
-
-      return this.item.props.menu
-    },
-
-    icons(){
-      if(!this.item.props.icons){
-        this.item.props.icons = []
-      }
-
-      return this.item.props.icons
-    },
-
-	},
-
-	methods: {
-
-
-	}
-
-}
-
-</script>
-
-<style module>
-
-.comp{
-  @apply flex flex-col divide-y divide-border-50;
-}
-
-</style>