@mixd-id/web-scaffold 0.1.230406224 → 0.1.230406226

package/package.json

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

package/src/components/Checkbox.vue

@@ -146,7 +146,7 @@ export default {
 }
 
 .indicator{
-	@apply w-[21px] h-[21px] border-[1px] rounded-lg border-text-200 bg-base-50;
+	@apply w-[21px] h-[21px] rounded-lg border-[1px] border-text-200 bg-base-50;
 	@apply flex items-center justify-center overflow-hidden;
 	transition:  border 300ms cubic-bezier(0.25, 1, 0.5, 1);
 }

package/src/components/FBLogin.vue

@@ -0,0 +1,93 @@
+<template>
+  <button type="button" @click="login">
+    <slot>
+      Login with Facebook
+    </slot>
+  </button>
+</template>
+
+<script>
+
+export default{
+
+  emits: [ 'login' ],
+
+  props: {
+
+    appId: String,
+
+    scope: {
+      type: String,
+      default: 'public_profile,email'
+    },
+
+    version: {
+      type: String,
+      default: 'v18.0'
+    }
+
+  },
+
+  data(){
+    return {
+      text: '',
+    }
+  },
+
+  mounted() {
+    this.loadScript();
+  },
+
+  methods: {
+
+    onResponse(){
+      FB.api('/me', { fields:'name,email' }, function(response){
+        console.log('#11', response)
+        this.$emit('login', response)
+      });
+    },
+
+    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 }
+          );
+        }
+      });
+    },
+
+    loadScript(){
+      if('FB' in window) return
+
+      (function(d, s, id){
+            var js, fjs = d.getElementsByTagName(s)[0];
+            if (d.getElementById(id)) {return;}
+            js = d.createElement(s); js.id = id;
+            js.src = "https://connect.facebook.net/en_US/sdk.js";
+            fjs.parentNode.insertBefore(js, fjs);
+          }(document, 'script', 'facebook-jssdk')
+      );
+
+      window.fbAsyncInit = () => {
+        FB.init({
+          appId: this.appId,
+          xfbml: true,
+          version: this.version
+        });
+      };
+    }
+
+
+  }
+
+}
+
+</script>

package/src/components/GSignIn.vue

@@ -0,0 +1,95 @@
+<template>
+  <button type="button" @click="login">
+    <slot>
+      Sign In with Google
+    </slot>
+  </button>
+</template>
+
+<script>
+
+export default{
+
+  emits: [ 'login' ],
+
+  props: {
+
+    apiKey: String
+
+  },
+
+  mounted() {
+    this.loadScript();
+  },
+
+  data(){
+    return {
+      auth2: null
+    }
+  },
+
+  methods: {
+
+    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,
+      }))));
+
+      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'
+          };
+          console.log(authObj)
+          window.gapi.auth2.init(authObj)
+              .then(function(gAuth){
+                console.log('gAuth', gAuth)
+              })
+        })
+      })
+    },
+
+    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
+          })
+        })
+    }
+
+  }
+
+}
+
+</script>

package/src/components/Textarea.vue

@@ -91,7 +91,7 @@ export default{
 			return this.customClass ?? [
 				this.$style.textarea,
 				this.$style['state-' + this.computedState],
-				this.isActive ? this.$style.active : '',
+				this.isActive && !this.readonly ? this.$style.active : '',
 				this.align ? this.$style['align-' + this.align] : '',
 				this.readonly ? this.$style.readonly : '',
 				this.size ? this.$style['size-' + this.size] : ''
@@ -153,7 +153,7 @@ export default{
 	@apply text-text-200;
 }
 .textarea.readonly{
-	@apply bg-text-50;
+	@apply bg-transparent;
 }
 
 .size-sm{ @apply min-h-[var(--h-cp-sm)]; }

package/src/components/Textbox.vue

@@ -175,7 +175,7 @@ export default{
 <style module>
 
 .textbox{
-	@apply flex items-center border-[1px] border-text-200;
+	@apply flex items-center border-[1px] border-text-200 bg-base-50;
 	@apply rounded-lg overflow-hidden;
 }
 

package/src/index.js

@@ -4,7 +4,7 @@ import throttle from "lodash/throttle"
 
 let _UNIQID = 0
 const uniqid = (additionalKey = '') => {
-  return '_c' + additionalKey + (new Date().getTime()).toString().substring(8) + _UNIQID++
+  return 'u' + Math.random().toString(36).substr(2) + Date.now().toString(36)
 }
 
 const mediaBreakpoints = {
@@ -432,6 +432,8 @@ 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('AhrefSetting', defineAsyncComponent(() => import("./widgets/AhrefSetting.vue")))
     app.component('ArticleSetting', defineAsyncComponent(() => import("./widgets/ArticleSetting.vue")))