@mixd-id/web-scaffold 0.2.240706 → 0.2.250801009

package/src/mixin/website.js

@@ -1,121 +0,0 @@
-const editComponents = {}
-
-export const websiteMixin = {
-
-  computed: {
-
-    fontFamily(){
-      switch(this.page.style?.normal?.font){
-
-        case 'Poppins':
-          return `"Poppins", sans-serif`
-
-        case 'Lato':
-          return `"Lato", sans-serif`
-
-        case 'Nunito':
-          return `"Nunito", sans-serif`
-
-        case 'Quicksand':
-          return `"Quicksand", sans-serif`
-
-        default:
-          return ``
-
-      }
-    },
-
-    fontWeight(){
-      return `400`
-    },
-
-    boldFontWeight(){
-      switch(this.page.style?.normal?.font){
-
-        case 'Poppins':
-          return `600`
-
-        case 'Lato':
-        case 'Nunito':
-        case 'Quicksand':
-          return `700`
-
-        default:
-          return ``
-
-      }
-    },
-
-    boldFontStyle(){
-      return `normal`
-    },
-
-  },
-
-  methods: {
-
-    editModeClick(uid){
-      if('edit-mode' in this.$route.query){
-        window.parent.postMessage({
-          type: 'component-click',
-          uid
-        }, '*')
-      }
-    },
-
-    editRegisterComponent(uid, component){
-      editComponents[uid] = component
-    },
-
-    getPage(){
-      return this.page
-    }
-
-  },
-
-  mounted() {
-
-    this.page.editMode = 'edit-mode' in this.$route.query ?
-      this.$route.query['edit-mode'] : false
-
-    if(this.page.editMode){
-      window.addEventListener('message', (event) => {
-        switch((event.data ?? {}).action){
-
-          case 'load':
-            this.webStore.pages[this.$route.path] = event.data.page
-            break
-
-          case 'reload':
-            this.patch(this.$route.path)
-            break
-
-          case 'select':
-            if(editComponents[event.data.uid]){
-              editComponents[event.data.uid].select()
-            }
-            break
-
-          case 'update':
-            const page = JSON.parse(event.data.page)
-            Object.assign(this.page, page)
-            break
-        }
-      })
-
-      window.parent.postMessage({
-        type: 'mounted',
-        path: this.$route.path
-      }, '*')
-    }
-  },
-
-  provide() {
-    return {
-      editModeClick: this.editModeClick,
-      editRegisterComponent: this.editRegisterComponent,
-      getPage: this.getPage,
-    }
-  }
-
-}

package/src/router.js

@@ -1,57 +0,0 @@
-import {
-  createMemoryHistory,
-  createRouter as _createRouter,
-  createWebHistory
-} from 'vue-router'
-
-const routes = [
-  { name:"", path:"/", component:() => import('./pages/Home.vue') },
-  { name:"", path:"/test", component:() => import('./pages/Test.vue') },
-  {
-    name:"inbox",
-    path:"/inbox",
-    component:() => import('./pages/Inbox.vue'),
-    children: [
-      { name:"message", path:":uid", component:() => import('./pages/Message.vue') },
-    ]
-  },
-  {
-    name: 'playground',
-    path: '/playground',
-    component: () => import('./pages/Playground.vue'),
-    children: [
-      { path:"initial", component: () => import('./pages/playground/Button.vue') },
-      { path:"ahref", component: () => import('./pages/playground/Ahref.vue') },
-      { path:"button", component: () => import('./pages/playground/Button.vue') },
-      { path:"dropdown", component: () => import('./pages/playground/Dropdown.vue') },
-      { path:"slider", component: () => import('./pages/playground/Slider.vue') },
-      { path:"switch", component: () => import('./pages/playground/Switch.vue') },
-      { path:"image", component: () => import('./pages/playground/Image.vue') },
-      { path:"carousel", component: () => import('./pages/playground/Carousel.vue') },
-      { path:"datepicker", component: () => import('./pages/playground/Datepicker.vue') },
-      { path:"textbox", component: () => import('./pages/playground/Textbox.vue') },
-      { path:"textarea", component: () => import('./pages/playground/Textarea.vue') },
-
-      { path:"modal", component: () => import('./pages/playground/Modal.vue') },
-      { path:"context-menu", component: () => import('./pages/playground/ContextMenu.vue') },
-      { path:"list-item", component: () => import('./pages/playground/ListItem.vue') },
-      { path:"toast", component: () => import('./pages/playground/Toast.vue') },
-      { path:"alert", component: () => import('./pages/playground/Alert.vue') },
-    ]
-  }
-]
-
-export function createRouter() {
-  return _createRouter({
-    history: import.meta.env.SSR ? createMemoryHistory() : createWebHistory(),
-    routes,
-    scrollBehavior(to, from, savedPosition) {
-      if(savedPosition){
-        return savedPosition
-      }
-      else{
-        return { top: 0 }
-      }
-    },
-  })
-}

package/src/widgets/MobileMenu.vue

@@ -1,182 +0,0 @@
-<template>
-	<Transition :name="cTransition">
-    <div v-if="computedOpen" :class="className" @click="close">
-      <div :class="$style.panel" @click.stop="">
-        <component v-for="item in items"
-                   :is="item.type"
-                   :key="item.key"
-                   :="item" />
-
-      </div>
-    </div>
-  </Transition>
-</template>
-
-<script>
-import {componentMixin} from "../mixin/component";
-
-export default{
-
-  computed: {
-
-    className(){
-      return [
-        this.$style.comp,
-        this.$style[`mode-${this.mode}`]
-      ]
-    },
-
-    computedOpen(){
-      return this.isOpen || this.debugOpen
-    },
-
-    cTransition(){
-      return this.transition ?? this._transition
-    }
-
-  },
-
-  data(){
-    return {
-      isOpen: false,
-      _transition: this.transition
-    }
-  },
-
-  mixins: [ componentMixin ],
-
-  methods: {
-
-    close(){
-      this.isOpen = false
-    },
-
-    open(){
-      this.isOpen = true
-    },
-
-    toggle(){
-      this.isOpen = !this.isOpen
-    },
-
-  },
-
-  mounted() {
-
-
-
-  },
-
-  props: {
-
-    debugOpen: [ Boolean, Number ],
-
-    items: Array,
-
-    id: String,
-
-    mode: {
-      type: String,
-      default: 'left'
-    },
-
-    transition: String
-
-  },
-
-  watch: {
-
-    mode: {
-      immediate: true,
-      handler(){
-
-        const defaultTransitions = {
-          left: 'slide-ltr',
-          right: 'slide-rtl',
-          top: 'slide-ttb',
-          middle: 'slide-mid',
-        }
-
-        this._transition = defaultTransitions[this.mode]
-      }
-    }
-
-  }
-
-}
-
-</script>
-
-<style module>
-
-.comp{
-  @apply fixed z-10 backdrop-blur-sm;
-  @apply flex flex-col;
-}
-.comp.mode-left{
-  @apply top-0 left-0 bottom-0 right-0;
-}
-.comp.mode-right{
-  @apply top-0 left-0 bottom-0 right-0;
-  @apply items-end;
-}
-.comp.mode-top{
-  @apply top-[48px] left-0 bottom-0 right-0;
-  @apply items-center;
-}
-.comp.mode-middle{
-  @apply top-0 left-0 bottom-0 right-0;
-  @apply items-center justify-center;
-}
-
-.panel{
-  @apply flex-1 flex flex-col w-full max-w-[80vw] bg-white;
-}
-.comp.mode-top .panel{
-  @apply max-w-[100vw];
-}
-.comp.mode-middle .panel{
-  @apply max-w-[90vw] max-h-[90vh];
-}
-
-</style>
-
-<style>
-
-.slide-ltr-enter-active,
-.slide-ltr-enter-active {
-  transition: all 300ms cubic-bezier(0.25, 1, 0.5, 1);
-}
-.slide-ltr-enter-from,
-.slide-ltr-leave-to {
-  transform: translate3d(-50px, 0, 0);
-}
-
-.slide-rtl-enter-active,
-.slide-rtl-enter-active {
-  transition: all 300ms cubic-bezier(0.25, 1, 0.5, 1);
-}
-.slide-rtl-enter-from,
-.slide-rtl-leave-to {
-  transform: translate3d(50px, 0, 0);
-}
-
-.slide-ttb-enter-active,
-.slide-ttb-enter-active {
-  transition: all 300ms cubic-bezier(0.25, 1, 0.5, 1);
-}
-.slide-ttb-enter-from,
-.slide-ttb-leave-to {
-  transform: translate3d(0, -50px, 0);
-}
-
-.slide-mid-enter-active,
-.slide-mid-enter-active {
-  transition: all 300ms cubic-bezier(0.25, 1, 0.5, 1);
-}
-.slide-mid-enter-from,
-.slide-mid-leave-to {
-  transform: scale3d(0.9, 0.9, 1);
-}
-
-</style>

package/src/widgets/WebPageBuilder4/ActionSetting.vue

@@ -1,158 +0,0 @@
-<template>
-  <div :class="$style.comp">
-    <div class="flex flex-row items-center">
-      <label class="flex-1">{{ $t('Action') }}</label>
-      <button type="button"
-              class="text-primary"
-              @click="open({})">
-        {{ $t('Add Action' ) }}
-      </button>
-    </div>
-    <ListItem :items="actions"
-              class="mt-1"
-              @reorder="(from, to) => { actions.splice(to, 0, actions.splice(from, 1)[0]);}">
-      <template v-slot="{ item, index }">
-        <div class="flex flex-row items-center gap-3 p-3">
-          <div data-reorder>
-            <svg width="14" height="14" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M496 288H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16zm0-128H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16z"/></svg>
-          </div>
-          <div class="flex-1 flex flex-row gap-2" @click="open(item, index)">
-            <div>{{ item.type }}</div>
-            <div class="flex-1 text-ellipsis overflow-hidden whitespace-nowrap">{{ item.name ?? item.target }}</div>
-          </div>
-          <button type="button" @click="actions.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>
-      </template>
-    </ListItem>
-
-    <Modal ref="modal" width="360" height="360">
-      <template v-slot:head>
-        <div class="relative p-5">
-          <h3>Add Action</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 v-slot:foot>
-        <div class="p-5">
-          <Button class="w-[100px]" @click="add">
-            {{ $t('Add') }}
-          </Button>
-        </div>
-      </template>
-      <div class="flex-1 p-5 flex flex-col gap-5">
-
-        <div>
-          <label>Action</label>
-          <Dropdown v-model="action.type"
-                    class="mt-1">
-            <option v-for="key in methodKeys" :value="key">{{ key }}</option>
-          </Dropdown>
-        </div>
-
-        <div>
-          <label>Target</label>
-          <Dropdown v-model="action.target" class="mt-1">
-            <option v-for="component in components" :value="component.props.id">
-              {{ component.name }}
-            </option>
-          </Dropdown>
-        </div>
-
-      </div>
-    </Modal>
-  </div>
-</template>
-
-<script>
-
-export default{
-
-  inject: [ 'getComponentIdWithType', 'viewTypes' ],
-
-  props: {
-
-    index: {
-      type: Number,
-      required: true
-    },
-
-    value: {
-      type: Object,
-      required: true
-    },
-
-    viewType: {
-      type: String,
-      required: true
-    },
-
-  },
-
-  computed: {
-
-    actions(){
-      if(!('actions' in this.value.props))
-        this.value.props.actions = []
-      return this.value.props.actions
-    },
-
-    components(){
-      this.log(this.methods, this.action)
-      return (this.methods ?? {})[this.action?.type] ?? []
-    },
-
-    methodKeys(){
-      return Object.keys(this.methods)
-    }
-
-  },
-
-  data(){
-    return {
-      methods: {},
-      action: null,
-      actionIndex: null
-    }
-  },
-
-  methods: {
-
-    add(){
-      const comp = this.components.find(comp => comp.props.id === this.action.target)
-      Object.assign(this.action, {
-        name: comp.name
-      })
-
-      this.actionIndex >= 0 ?
-        Object.assign(this.actions[this.actionIndex], this.action) :
-        this.actions.push(this.action)
-      this.$refs.modal.close()
-    },
-
-    open(action, index = -1){
-      this.methods = this.getComponentIdWithType()
-      this.action = action
-      this.actionIndex = index
-      this.$refs.modal.open()
-    },
-
-  }
-
-}
-
-</script>
-
-<style module>
-
-.comp{
-}
-
-</style>

package/src/widgets/WebPageBuilder4/ColorSetting.vue

@@ -1,63 +0,0 @@
-<template>
-	<div :class="$style.comp">
-    <div class="flex flex-row items-center">
-      <label class="flex-1">Text Color</label>
-      <ColorPicker2 v-model="textColor[index]" :prefix="viewType" :keys="keys" />
-    </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: {
-
-    textColor(){
-      if(!Array.isArray(this.value.props.textColor))
-        this.value.props.textColor = []
-
-      return this.value.props.textColor
-    },
-
-  },
-
-  data(){
-    return {
-      keys: [
-        [ 'text-' ]
-      ]
-    }
-  }
-
-}
-
-</script>
-
-<style module>
-
-.comp{
-}
-
-</style>

package/src/widgets/WebPageBuilder4/DataSetting.vue

@@ -1,92 +0,0 @@
-<template>
-	<div :class="$style.comp">
-
-    <div v-if="value.mode === 1" class="flex flex-col gap-5">
-
-      <div>
-        <label>Key</label>
-        <Textbox v-model="value.key" class="mt-1" />
-      </div>
-
-      <div class="flex flex-col">
-        <label>Data</label>
-        <VirtualTable :columns="value.columns"
-                      :items="value.value"
-                      class="mt-1 max-h-[50vh]">
-          <template #col-default="{ column }">
-            <Textbox v-model="column.key" />
-          </template>
-
-          <template #col-_add>
-            <div class="flex-1 flex justify-center">
-              <button type="button" class="p-3"
-                      @click="value.columns.push({ key:`Column ${value.columns.length}` })">
-                <svg width="16" height="16" class="fill-green-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256C397.4 512 512 397.4 512 256S397.4 0 256 0zM352 280H280V352c0 13.2-10.8 24-23.1 24C242.8 376 232 365.2 232 352V280H160C146.8 280 136 269.2 136 256c0-13.2 10.8-24 24-24H232V160c0-13.2 10.8-24 24-24C269.2 136 280 146.8 280 160v72h72C365.2 232 376 242.8 376 256C376 269.2 365.2 280 352 280z"/></svg>
-              </button>
-            </div>
-          </template>
-
-          <template #_add="{ item, index }">
-            <div class="flex-1 flex justify-center">
-              <button type="button" class="p-3"
-                      @click="value.value.splice(index, 1)">
-                <svg width="16" height="16" class="fill-red-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256C397.4 512 512 397.4 512 256S397.4 0 256 0zM336.1 303c9.375 9.375 9.375 24.56 0 33.94c-9.381 9.381-24.56 9.373-33.94 0L256 289.9l-47.03 47.03c-9.381 9.381-24.56 9.373-33.94 0c-9.375-9.375-9.375-24.56 0-33.94l47.03-47.03L175 208.1c-9.375-9.375-9.375-24.56 0-33.94s24.56-9.375 33.94 0L256 222.1l47.03-47.03c9.375-9.375 24.56-9.375 33.94 0s9.375 24.56 0 33.94l-47.03 47.03L336.1 303z"/></svg>
-              </button>
-            </div>
-          </template>
-
-          <template #default="{ item, column }">
-            <Textbox v-model="item[column.key]" :placeholder="column.key" />
-          </template>
-        </VirtualTable>
-
-        <div class="w-[60px] bg-base-500 flex justify-center">
-          <button type="button" class="p-3"
-                  @click="value.value.push({})">
-            <svg width="16" height="16" class="fill-green-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256C397.4 512 512 397.4 512 256S397.4 0 256 0zM352 280H280V352c0 13.2-10.8 24-23.1 24C242.8 376 232 365.2 232 352V280H160C146.8 280 136 269.2 136 256c0-13.2 10.8-24 24-24H232V160c0-13.2 10.8-24 24-24C269.2 136 280 146.8 280 160v72h72C365.2 232 376 242.8 376 256C376 269.2 365.2 280 352 280z"/></svg>
-          </button>
-        </div>
-      </div>
-
-    </div>
-
-	</div>
-</template>
-
-<script>
-
-import Textbox from "../../components/Textbox.vue";
-
-export default{
-  components: {Textbox},
-
-  inject: [ 'viewTypes' ],
-
-  props: {
-
-    value: Object
-
-  },
-
-  computed: {
-
-
-
-  },
-
-  data(){
-    return {
-
-    }
-  }
-
-}
-
-</script>
-
-<style module>
-
-.comp{
-}
-
-</style>