@mixd-id/web-scaffold 0.1.230406230 → 0.1.230406232

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.1.230406230",
+  "version": "0.1.230406232",
   "scripts": {
     "dev": "vite serve",
     "build": "vite build",

package/src/components/FBLogin.vue

@@ -1,8 +1,14 @@
 <template>
-  <button type="button" @click="login">
+  <button type="button" @click="login" :class="compClass">
     <slot>
       Login with Facebook
     </slot>
+    <div v-if="isLoading" :class="$style.loadingPane">
+      <svg :class="$style.spinner" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+        <circle :class="$style.svgBg" cx="12" cy="12" r="10" stroke-width="4"></circle>
+        <path :class="$style.svgHg" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+      </svg>
+    </div>
   </button>
 </template>
 
@@ -16,21 +22,52 @@ export default{
 
     appId: String,
 
+    class: String,
+
     scope: {
       type: String,
       default: 'public_profile,email'
     },
 
+    state: {
+      type: [ String, Number ], // -1:disabled, 1:normal, 2:loading, default: normal,
+      default: 1
+    },
+
     version: {
       type: String,
       default: 'v18.0'
-    }
+    },
+
+  },
+
+  computed: {
+
+    compClass(){
+      return [
+        this.$style.comp,
+        parseInt(this.computedState) === 2 ? this.$style.loading : '',
+        this.class ?? '',
+      ]
+          .join(' ')
+    },
+
+    computedState(){
+      return this._state ?? this.state
+    },
+
+    isLoading(){
+      return parseInt(this.computedState) === 2
+    },
 
   },
 
   data(){
     return {
       text: '',
+      status: null,
+      accessToken: null,
+      _state: null,
     }
   },
 
@@ -41,27 +78,39 @@ export default{
   methods: {
 
     onResponse(){
-      FB.api('/me', { fields:'name,email' }, function(response){
-        console.log('#11', response)
-        this.$emit('login', response)
+      FB.api('/me', { fields:'name,email' }, response => {
+        this.$emit('login', {
+          ...response,
+          accessToken: this.accessToken
+        })
       });
     },
 
+    onLogin(response){
+      if(response.status === 'connected'){
+        this.accessToken = response.authResponse.accessToken
+        this.onResponse()
+      }
+    },
+
+    onLoginStatus(response){
+      this.status = response.status
+
+      if(response.status === 'connected'){
+        this.accessToken = response.authResponse.accessToken
+      }
+    },
+
     login(){
-      FB.getLoginStatus((response) => {
-        if(response.status === 'connected'){
-          this.onResponse(response)
-        }
-        else{
-          FB.login((response) => {
-              if(response.status === 'connected'){
-                this.onResponse(response)
-              }
-            },
-            { scope: this.scope }
-          );
-        }
-      });
+      if(!this.accessToken){
+        FB.login(
+          this.onLogin,
+          { scope: this.scope }
+        );
+      }
+      else{
+        this.onResponse()
+      }
     },
 
     loadScript(){
@@ -80,14 +129,66 @@ export default{
         FB.init({
           appId: this.appId,
           xfbml: true,
+          status: true,
           version: this.version
         });
+
+        FB.getLoginStatus(this.onLoginStatus, true);
       };
-    }
+    },
+
+    setState(state, percentage){
+      this._state = state
+    },
 
+    resetState(){
+      this._state = null
+    },
 
-  }
+  },
 
 }
 
 </script>
+
+<style module>
+
+.comp{
+  @apply relative;
+}
+
+.loadingPane{
+  @apply absolute left-0 top-0 right-0 bottom-0 flex items-center justify-center pl-1;
+}
+.loading{
+  color: transparent;
+}
+.loading>*:first-child{
+  @apply opacity-0
+}
+.loading:hover{
+}
+.loading:active{
+  @apply top-0 left-0;
+}
+.loading>*{
+  opacity: 0;
+}
+.loading .loadingPane{
+  opacity: 1;
+}
+
+.svgBg{
+  stroke: rgb(var(--primary-600));
+  stroke-opacity: 50%;
+}
+.svgHg{
+  fill: rgb(var(--primary-500));
+  fill-opacity: 100%;
+}
+
+.spinner{
+  @apply animate-spin h-5 w-5;
+}
+
+</style>

package/src/components/GSignIn.vue

@@ -1,8 +1,14 @@
 <template>
-  <button type="button" @click="login">
+  <button type="button" @click="login" :class="compClass">
     <slot>
       Sign In with Google
     </slot>
+    <div v-if="isLoading" :class="$style.loadingPane">
+      <svg :class="$style.spinner" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+        <circle :class="$style.svgBg" cx="12" cy="12" r="10" stroke-width="4"></circle>
+        <path :class="$style.svgHg" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+      </svg>
+    </div>
   </button>
 </template>
 
@@ -12,9 +18,40 @@ export default{
 
   emits: [ 'login' ],
 
+  inject: [ 'alert' ],
+
   props: {
 
-    apiKey: String
+    class: String,
+
+    apiKey: String,
+    pluginName: String,
+
+    state: {
+      type: [ String, Number ], // -1:disabled, 1:normal, 2:loading, default: normal,
+      default: 1
+    },
+
+  },
+
+  computed: {
+
+    compClass(){
+      return [
+        this.$style.comp,
+        parseInt(this.computedState) === 2 ? this.$style.loading : '',
+        this.class ?? '',
+      ]
+          .join(' ')
+    },
+
+    computedState(){
+      return this._state ?? this.state
+    },
+
+    isLoading(){
+      return parseInt(this.computedState) === 2
+    },
 
   },
 
@@ -24,7 +61,8 @@ export default{
 
   data(){
     return {
-      auth2: null
+      auth2: null,
+      _state: null,
     }
   },
 
@@ -33,63 +71,96 @@ export default{
     async loadScript(){
       if("gapi" in window) return
 
-      /*await new Promise(api_ready => document.head.append(Object.assign(
-          document.createElement('script'),
-          {
-            src: 'https://apis.google.com/js/api.js',
-            onload: api_ready,
-          })));
-
-      await new Promise(auth2_ready => gapi.load('auth2', auth2_ready));
-
-      const googleAuth = await new Promise(init_done => gapi.auth2.init({
-        client_id: this.apiKey,
-        scope: 'profile email',
-      }).then(googleAuthWithThen => init_done(Object.assign(googleAuthWithThen, {
-        then: undefined,
-      }))));
+      window.gapiInit = () => {
+        gapi.load('auth2', () => {
 
-      console.log('googleAuth =', googleAuth);*/
-
-      const script = document.createElement('script')
-      script.src = 'https://apis.google.com/js/api:client.js'
-      document.head.appendChild(script)
-      script.addEventListener('load', () => {
-        window.gapi.load('auth2', () => {
           var authObj = {
             client_id: this.apiKey,
             scope: 'profile email',
-            cookiepolicy: 'single_host_origin'
+            cookiepolicy: 'single_host_origin',
+            plugin_name: this.pluginName
           };
-          console.log(authObj)
           window.gapi.auth2.init(authObj)
-              .then(function(gAuth){
-                console.log('gAuth', gAuth)
-              })
         })
-      })
+      }
+
+      const script = document.createElement('script')
+      script.src = 'https://apis.google.com/js/platform.js?onload=gapiInit'
+      document.head.appendChild(script)
     },
 
     login(){
-      gapi.auth2.getAuthInstance().signIn()
-        .then((googleUser) => {
-          console.log('googleUser', googleUser)
-          var profile = googleUser.getBasicProfile();
-          var idToken = googleUser.getAuthResponse().id_token;
-          const name = profile.getName()
-          const imageUrl = profile.getImageUrl()
-          const email = profile.getEmail()
-          this.$emit('login', {
-            idToken,
-            name,
-            imageUrl,
-            email
+      gapi.auth2.getAuthInstance()
+        .signIn()
+          .then((googleUser) => {
+            var profile = googleUser.getBasicProfile();
+            var idToken = googleUser.getAuthResponse().id_token;
+            const id = profile.getId()
+            const name = profile.getName()
+            const imageUrl = profile.getImageUrl()
+            const email = profile.getEmail()
+            this.$emit('login', {
+              id,
+              idToken,
+              name,
+              imageUrl,
+              email
+            })
           })
-        })
-    }
+    },
+
+    setState(state, percentage){
+      this._state = state
+    },
+
+    resetState(){
+      this._state = null
+    },
 
   }
 
 }
 
 </script>
+
+<style module>
+
+.comp{
+  @apply relative;
+}
+
+.loadingPane{
+  @apply absolute left-0 top-0 right-0 bottom-0 flex items-center justify-center pl-1;
+}
+.loading{
+  color: transparent;
+}
+.loading>*:first-child{
+  @apply opacity-0
+}
+.loading:hover{
+}
+.loading:active{
+  @apply top-0 left-0;
+}
+.loading>*{
+  opacity: 0;
+}
+.loading .loadingPane{
+  opacity: 1;
+}
+
+.svgBg{
+  stroke: rgb(var(--primary-600));
+  stroke-opacity: 50%;
+}
+.svgHg{
+  fill: rgb(var(--primary-500));
+  fill-opacity: 100%;
+}
+
+.spinner{
+  @apply animate-spin h-5 w-5;
+}
+
+</style>

package/src/components/ImportModal.vue

@@ -4,7 +4,9 @@
 			<div class="relative p-5">
 				<div v-if="step !== 3">
 					<h3>{{ title }}</h3>
-					<p v-if="step === 1" class="mt-1 text-text-400" v-html="description"></p>
+          <slot v-if="step === 1 && 'description' in $slots" name="description"></slot>
+					<p v-else-if="step === 1" class="mt-1 text-text-400" v-html="description"></p>
+          <slot v-else-if="step === 2 && 'description2' in $slots" name="description2"></slot>
 					<p v-else-if="step === 2" class="mt-1 text-text-400" v-html="description2"></p>
 				</div>
 				<div class="absolute top-0 right-0 p-2">

package/src/components/ObjectTree.vue

@@ -0,0 +1,102 @@
+<template>
+	<div :class="$style.comp">
+    <div class="flex flex-row" @click="toggle">
+      <div class="p-1" v-if="value && typeof value === 'object' && Object.keys(value).length > 0">
+        <svg width="14" height="14" class="fill-text-300" 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>
+      </div>
+      <div v-if="valueKey" class="mr-2 font-bold">
+        {{ valueKey }}:
+      </div>
+      <div class="flex-1 text-ellipsis overflow-hidden whitespace-nowrap break-all">
+        {{ JSON.stringify(value) }}
+      </div>
+    </div>
+    <div v-if="!collapsed" class="ml-6">
+      <div v-for="(obj, key) in value" class="flex flex-row">
+        <ObjectTree v-if="typeof obj === 'object'" :valueKey="key" :value="obj" />
+        <div v-else class="flex flex-row">
+          <div class="p-1">
+            <svg width="14" height="14" class="fill-transparent" 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>
+          </div>
+          <div class="mr-2 font-bold">{{ key }}:</div>
+          <div>{{ obj }}</div>
+        </div>
+      </div>
+    </div>
+	</div>
+</template>
+
+<script>
+
+import md5 from "md5";
+
+export default{
+
+  props: {
+
+    valueKey: String,
+    value: Object,
+    store: Object,
+
+  },
+
+  data(){
+    return {
+      collapsed: true,
+    }
+  },
+
+  mounted() {
+    this.collapsed = (this.componentStore[this.uid] ?? {}).collapsed ?? this.collapsed
+  },
+
+  computed: {
+
+    uid(){
+      if(this.value)
+        return md5(JSON.stringify(this.value))
+    },
+
+    componentStore(){
+      if(this.store && this.store.components){
+        if(!this.store.components.objectTree)
+          this.store.components.objectTree = {}
+
+        return this.store.components.objectTree
+      }
+      return {}
+    },
+
+  },
+
+  methods: {
+
+    toggle(){
+      this.collapsed = !this.collapsed
+
+      this.componentStore[this.uid] = {
+        collapsed: this.collapsed
+      }
+    },
+
+  },
+
+  watch: {
+
+    value(){
+      this.collapsed = (this.componentStore[this.uid] ?? {}).collapsed ?? this.collapsed
+    }
+
+  }
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+  @apply flex flex-col;
+}
+
+</style>

package/src/index.js

@@ -152,24 +152,28 @@ const consoleTimeEnd = (text) => { console.timeEnd(text) }
 
 const util = {
 
-  dragResize: (e, initialWidth, callback) => {
+  dragResize: (e, callback) => {
 
     e.preventDefault()
 
     let startX = e.clientX
+    let startY = e.clientY
     const onMouseMove = (mE) => {
       const distanceX = mE.clientX - startX
+      const distanceY = mE.clientY - startY
       startX = mE.clientX
+      startY = mE.clientY
 
-      if(distanceX !== 0){
-        callback(distanceX)
+      if(distanceX !== 0 || distanceY !== 0){
+        callback(distanceX, distanceY)
       }
     }
 
-    const onMouseUp = (mE) => {
+    const onMouseUp = _ => {
       window.removeEventListener('mousemove', onMouseMove)
       window.removeEventListener('mouseup', onMouseUp)
     }
+
     window.addEventListener('mousemove', onMouseMove)
     window.addEventListener('mouseup', onMouseUp)
   },
@@ -310,9 +314,11 @@ export default{
             const uid = el.getAttribute('data-tooltip')
             const tooltip = tooltips[uid]
             const rect = el.getBoundingClientRect()
-            tooltip.style.top = (rect.y + rect.height + 10) + 'px'
-            tooltip.style.left = rect.x - (Math.round((tooltip.clientWidth - rect.width) / 2)) + 'px'
-            tooltip.classList.add('active')
+            if(rect && rect.width > 0){
+              tooltip.style.top = (rect.y + rect.height + 10) + 'px'
+              tooltip.style.left = rect.x - (Math.round((tooltip.clientWidth - rect.width) / 2)) + 'px'
+              tooltip.classList.add('active')
+            }
           }
         }, 1300)
         el.setAttribute('data-tooltip-open', true)
@@ -433,8 +439,9 @@ export default{
     app.component('YoutubeVideo', defineAsyncComponent(() => import("./components/YoutubeVideo.vue")))
     app.component('Svg', defineAsyncComponent(() => import("./components/Svg.vue")))
     app.component('ConversationBuilder', defineAsyncComponent(() => import("./components/ConversationBuilder.vue")))
-    //app.component('FBLogin', defineAsyncComponent(() => import("./components/FBLogin.vue")))
-    //app.component('GSignIn', defineAsyncComponent(() => import("./components/GSignIn.vue")))
+    app.component('ObjectTree', defineAsyncComponent(() => import("./components/ObjectTree.vue")))
+    app.component('FBLogin', defineAsyncComponent(() => import("./components/FBLogin.vue")))
+    app.component('GSignIn', defineAsyncComponent(() => import("./components/GSignIn.vue")))
 
     app.component('AhrefSetting', defineAsyncComponent(() => import("./widgets/AhrefSetting.vue")))
     app.component('ArticleSetting', defineAsyncComponent(() => import("./widgets/ArticleSetting.vue")))

package/src/widgets/WebPageBuilder.vue

@@ -389,7 +389,7 @@
           </div>
 
           <div :class="$style.resize1"
-               @mousedown="(e) => $util.dragResize(e, store.width[0], resize1)"></div>
+               @mousedown="(e) => $util.dragResize(e, resize1)"></div>
 
           <Modal ref="ogModal" width="480" height="520">
             <template v-slot:head>
@@ -543,7 +543,7 @@
           <div class="flex-1 flex flex-row border-t-[1px] border-text-50">
 
             <div :class="$style.resize3"
-                 @mousedown="(e) => $util.dragResize(e, store.width[1], resize3)"></div>
+                 @mousedown="(e) => $util.dragResize(e, resize3)"></div>
 
             <div class="flex-1 flex flex-col gap-6 overflow-y-auto p-6">