@tapni/auth 0.0.170 → 0.0.172

package/src/components/LinkIcon.vue

@@ -1,151 +1,101 @@
 <template>
-  <a
-    class="disable-select"
-    :class="linkStyle + (disabled ? ' opacity-50' : '')"
-    :style="
-      (editing ? 'cursor: move' : 'cursor: pointer') +
-      '!important; overflow: visible; margin-top: 5px;'
-    "
-  >
-
-    <span
-      :class="{
-        'user-link-img': true,
-        'pulse pulse-border': pulse,
-        'link-drag': editing,
-      }"
-      :style="{ ...customLinkStyle?.linkIcon }"
-    >
-      <img
-        v-if="!data.custom_icon && data.type !== 'customlink'"
-        :src="'https://cdn.tapni.co/icons/' + data.type + '.png'"
-        class="responsive-image"
-        :alt="data.text"
-        @load="$emit('loaded')"
-        @error="$emit('loaded')"
-      />
-      <img
-        v-else-if="
-          !data.custom_icon && data.type === 'customlink' && linkAdding
-        "
-        :src="'https://cdn.tapni.co/icons/custom-icon-128.gif'"
-        class="responsive-image"
-        :alt="data.text"
-        @load="$emit('loaded')"
-        @error="$emit('loaded')"
-      />
-      <img
-        v-else-if="
-          !data.custom_icon && data.type === 'customlink' && !linkAdding
-        "
-        :src="'https://cdn.tapni.co/icons/customlink.png'"
-        class="responsive-image"
-        :alt="data.text"
-        @load="$emit('loaded')"
-        @error="$emit('loaded')"
-      />
-      <img
-        v-else
-        :src="data.style.custom_icon"
-        style="border-radius: 22.46%"
-        class="responsive-image"
-        :alt="data.text"
-        @load="$emit('loaded')"
-        @error="$emit('loaded')"
-      />
-    </span>
-
-    <span
-      class="link-text link-drag color-black"
-      :style="{ color: customLinkStyle?.color }"
-    >
-      {{ linkText }}
-    </span>
-  </a>
+	<a class="disable-select" :class="linkStyle + (disabled ? ' opacity-50' : '')" :style="(editing ? 'cursor: move' : 'cursor: pointer') + '!important; overflow: visible; margin-top: 5px;'">
+		<span
+			:class="{
+				'user-link-img': true,
+				'pulse pulse-border': pulse,
+				'link-drag': editing
+			}"
+			:style="{ ...customLinkStyle?.linkIcon }"
+		>
+			<img v-if="!data.custom_icon && data.type !== 'customlink'" :src="'https://cdn.tapni.co/icons/' + data.type + '.png'" class="responsive-image" :alt="data.text" @load="$emit('loaded')" @error="$emit('loaded')" />
+			<img v-else-if="!data.custom_icon && data.type === 'customlink' && linkAdding" :src="'https://cdn.tapni.co/icons/custom-icon-128.gif'" class="responsive-image" :alt="data.text" @load="$emit('loaded')" @error="$emit('loaded')" />
+			<img v-else-if="!data.custom_icon && data.type === 'customlink' && !linkAdding" :src="'https://cdn.tapni.co/icons/customlink.png'" class="responsive-image" :alt="data.text" @load="$emit('loaded')" @error="$emit('loaded')" />
+			<img v-else :src="data.style.custom_icon" style="border-radius: 22.46%" class="responsive-image" :alt="data.text" @load="$emit('loaded')" @error="$emit('loaded')" />
+		</span>
+
+		<span class="link-text link-drag color-black" :style="{ color: customLinkStyle?.color }">
+			{{ linkText }}
+		</span>
+	</a>
 </template>
 
 <script>
 import AuthMixin from '../mixins/auth.mixin';
 
 export default {
-  name: "LinkIcon",
-  mixins: [AuthMixin],
-  props: {
-    linkAdding: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    hideExternalIcon: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    switching: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    pulse: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    editing: {
-      type: Boolean,
-      required: false,
-      default: true,
-    },
-    directPick: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    disabled: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    to: {
-      type: String,
-      required: false,
-      default: "",
-    },
-    linkStyle: {
-      type: String,
-      required: false,
-      default: "link-grid",
-    },
-    data: {
-      type: Object,
-      required: true,
-    },
-    customLinkStyle: {
-      type: Object,
-      required: false,
-      default: () => {},
-    },
-    shareIconStyle: {
-      type: Object,
-      required: false,
-      default: () => {},
-    },
-  },
-  computed: {
-    linkText() {
-      if (this.appLanguage !== "en" && this.data.text) {
-        return (
-          this.ssoLang[this.appLanguage][
-            "link_text_" +
-              this.data.text.toLowerCase().trim().replace(/ /g, "_")
-          ] || this.data.text
-        );
-      }
-      return this.data.text;
-    },
-  },
-  methods: {
-  },
+	name: 'LinkIcon',
+	mixins: [AuthMixin],
+	props: {
+		linkAdding: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		hideExternalIcon: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		switching: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		pulse: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		editing: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		directPick: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		to: {
+			type: String,
+			required: false,
+			default: ''
+		},
+		linkStyle: {
+			type: String,
+			required: false,
+			default: 'link-grid'
+		},
+		data: {
+			type: Object,
+			required: true
+		},
+		customLinkStyle: {
+			type: Object,
+			required: false,
+			default: () => {}
+		},
+		shareIconStyle: {
+			type: Object,
+			required: false,
+			default: () => {}
+		}
+	},
+	computed: {
+		linkText() {
+			if (this.appLanguage !== 'en' && this.data.text) {
+				return this.ssoLang[this.appLanguage]['link_text_' + this.data.text.toLowerCase().trim().replace(/ /g, '_')] || this.data.text;
+			}
+			return this.data.text;
+		}
+	},
+	methods: {}
 };
 </script>
 
@@ -155,134 +105,133 @@ export default {
 /* ********* */
 .link-grid,
 .user-link-img {
-  width: 100%;
-  display: inline-table;
-  position: relative;
+	width: 100%;
+	display: inline-table;
+	position: relative;
 }
 
 .link-grid {
-  width: 30%;
-  margin: 1.6%;
-  padding: 1.6%;
+	width: 30%;
+	margin: 1.6%;
+	padding: 1.6%;
 }
 
 .link-grid .user-link-img img {
-  /* box-shadow: 0px 2px 10px rgba(200,200,200,0.8); */
-  /* border: 1px solid #e8e8e8; */
-  border-radius: 25% !important;
+	/* box-shadow: 0px 2px 10px rgba(200,200,200,0.8); */
+	/* border: 1px solid #e8e8e8; */
+	border-radius: 25% !important;
 }
 
 .link-grid .edit-icon {
-  border-radius: 20px;
-  right: -3%;
-  top: -3%;
-  position: absolute;
-  z-index: 3;
-  max-width: 23%;
-  overflow: hidden;
-  min-width: 30px;
+	border-radius: 20px;
+	right: -3%;
+	top: -3%;
+	position: absolute;
+	z-index: 3;
+	max-width: 23%;
+	overflow: hidden;
+	min-width: 30px;
 }
 
 .link-grid .direct-icon {
-  border-radius: 20px;
-  left: -3%;
-  top: -3%;
-  position: absolute;
-  z-index: 555;
-  max-width: 23%;
-  overflow: hidden;
-  min-width: 30px;
+	border-radius: 20px;
+	left: -3%;
+	top: -3%;
+	position: absolute;
+	z-index: 555;
+	max-width: 23%;
+	overflow: hidden;
+	min-width: 30px;
 }
 
 .link-grid .link-text {
-  min-height: 20px;
-  margin-top: 3px !important;
-  display: block;
-  text-align: center;
-  line-height: normal;
-  overflow-wrap: anywhere;
+	min-height: 20px;
+	margin-top: 3px !important;
+	display: block;
+	text-align: center;
+	line-height: normal;
+	overflow-wrap: anywhere;
 }
 
 /* ********* */
 /* Link List */
 /* ********* */
 .link-list {
-  width: 93%;
-  max-height: 67px !important;
-  margin: 0px auto;
-  display: flex;
-  border-radius: 15px !important;
-  background-color: #ffffff;
-  /* box-shadow: 0px 2px 5px rgba(0,0,0,0.15); */
-  border: solid 1px #e8e8e8;
-  position: relative;
-  align-items: center;
+	width: 93%;
+	max-height: 67px !important;
+	margin: 0px auto;
+	display: flex;
+	border-radius: 15px !important;
+	background-color: #ffffff;
+	/* box-shadow: 0px 2px 5px rgba(0,0,0,0.15); */
+	border: solid 1px #e8e8e8;
+	position: relative;
+	align-items: center;
 }
 
 .link-list .user-link-img {
-  display: inline-block;
-  width: 65px;
-  /* box-shadow: 0px 3px 6px rgba(0,0,0,0.16); */
-  border-radius: 25% !important;
+	display: inline-block;
+	width: 65px;
+	/* box-shadow: 0px 3px 6px rgba(0,0,0,0.16); */
+	border-radius: 25% !important;
 }
 
 .link-list .link-text {
-  display: inline-block;
-  padding: 18px 0% 17px 10%;
-  font-size: 15px;
-  font-weight: 500;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  flex: 1;
-  text-align: left;
-  border-radius: 15px !important;
+	display: inline-block;
+	padding: 18px 0% 17px 10%;
+	font-size: 15px;
+	font-weight: 500;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	overflow: hidden;
+	flex: 1;
+	text-align: left;
+	border-radius: 15px !important;
 }
 
 .link-list .edit-icon {
-  border-radius: 20px;
-  right: 7%;
-  top: 30%;
-  position: absolute;
-  z-index: 3;
-  width: 26px;
-  overflow: hidden;
+	border-radius: 20px;
+	right: 7%;
+	top: 30%;
+	position: absolute;
+	z-index: 3;
+	width: 26px;
+	overflow: hidden;
 }
 
 .link-list .switching {
-  width: 45px;
+	width: 45px;
 }
 
 .link-list .direct-icon {
-  border-radius: 20px;
-  left: -2%;
-  top: -13%;
-  position: absolute;
-  z-index: 555;
-  width: 26px;
-  overflow: hidden;
+	border-radius: 20px;
+	left: -2%;
+	top: -13%;
+	position: absolute;
+	z-index: 555;
+	width: 26px;
+	overflow: hidden;
 }
 /* ********* */
 
 .small {
-  width: 22% !important;
-  margin: 2% 4% 0%;
-  padding: 0%;
+	width: 22% !important;
+	margin: 2% 4% 0%;
+	padding: 0%;
 }
 .small .link-text {
-  margin-top: 0px !important;
-  font-size: 13px;
+	margin-top: 0px !important;
+	font-size: 13px;
 }
 
 .linkExternal {
-  margin-right: 20px;
-  width: 20px;
-  display: inline-block !important;
-  height: 20px;
-  background: black;
-  -webkit-mask: url(https://cdn.tapni.co/icons/link-external.svg) no-repeat
-    center;
-  mask: url(https://cdn.tapni.co/icons/link-external.svg) no-repeat center;
-  transform: scale(1.5);
+	margin-right: 20px;
+	width: 20px;
+	display: inline-block !important;
+	height: 20px;
+	background: black;
+	-webkit-mask: url(https://cdn.tapni.co/icons/link-external.svg) no-repeat center;
+	mask: url(https://cdn.tapni.co/icons/link-external.svg) no-repeat center;
+	transform: scale(1.5);
 }
 </style>

package/src/components/ModalOverlay.vue

@@ -1,10 +1,7 @@
 <template>
-  <div
-    :class="{ 'pointer delete-menu': true, 'delete-menu-active': toggle }"
-    @click="toggleEmit"
-  ></div>
+	<div :class="{ 'pointer delete-menu': true, 'delete-menu-active': toggle }" @click="toggleEmit"></div>
 
-  <!--
+	<!--
   <transition name="fade">
     <div v-if="toggle" class="pointer delete-menu" @click="toggleEmit"></div>
   </transition>
@@ -12,57 +9,57 @@
 </template>
 
 <script>
-import { EventBus } from "../store/event-bus";
-import AuthMixin from "../mixins/auth.mixin";
+import { EventBus } from '../store/event-bus';
+import AuthMixin from '../mixins/auth.mixin';
 
 export default {
-  name: "ModalOverlay",
-  mixins: [AuthMixin],
-  data() {
-    return {
-      toggle: false,
-    };
-  },
-  mounted() {
-    EventBus.$on("closeModal", () => {
-      this.toggle = false;
-      window.document.body.style.overflow = "auto";
-      window.document.body.style.height = "auto";
-    });
-    EventBus.$on("openModalOverlay", () => {
-      this.toggle = true;
-    });
-    // EventBus.$on('togglePasswordModal', this.toggleModal)
-    // EventBus.$on('toggleAddAccountModal', this.toggleModal)
-    // EventBus.$on("toggleAccountSettingsModal", this.toggleModal);
-    EventBus.$on("toggleSSOLanguageModal", this.toggleModal);
-    EventBus.$on("toggleOTPModal", this.toggleModal);
-    EventBus.$on("toggleSSOModal", this.toggleModal);
-    EventBus.$on("toggleSSOPickModal", this.toggleModal);
-  },
-  methods: {
-    toggleModal(shouldToggle = true) {
-      if (shouldToggle) {
-        this.toggle = !this.toggle;
-        if (this.toggle) {
-          window.document.body.style.overflow = "hidden";
-          window.document.body.style.height = "100vh";
-        } else {
-          window.document.body.style.overflow = "auto";
-          window.document.body.style.height = "auto";
-        }
-      }
-    },
-    toggleEmit() {
-      if(!this.isLoggedIn && this.user?.lead_form?.forceFilling) return;
-      EventBus.$emit("closeModal");
-    },
-  },
+	name: 'ModalOverlay',
+	mixins: [AuthMixin],
+	data() {
+		return {
+			toggle: false
+		};
+	},
+	mounted() {
+		EventBus.$on('closeModal', () => {
+			this.toggle = false;
+			window.document.body.style.overflow = 'auto';
+			window.document.body.style.height = 'auto';
+		});
+		EventBus.$on('openModalOverlay', () => {
+			this.toggle = true;
+		});
+		// EventBus.$on('togglePasswordModal', this.toggleModal)
+		// EventBus.$on('toggleAddAccountModal', this.toggleModal)
+		// EventBus.$on("toggleAccountSettingsModal", this.toggleModal);
+		EventBus.$on('toggleSSOLanguageModal', this.toggleModal);
+		EventBus.$on('toggleOTPModal', this.toggleModal);
+		EventBus.$on('toggleSSOModal', this.toggleModal);
+		EventBus.$on('toggleSSOPickModal', this.toggleModal);
+	},
+	methods: {
+		toggleModal(shouldToggle = true) {
+			if (shouldToggle) {
+				this.toggle = !this.toggle;
+				if (this.toggle) {
+					window.document.body.style.overflow = 'hidden';
+					window.document.body.style.height = '100vh';
+				} else {
+					window.document.body.style.overflow = 'auto';
+					window.document.body.style.height = 'auto';
+				}
+			}
+		},
+		toggleEmit() {
+			if (!this.isLoggedIn && this.user?.lead_form?.forceFilling) return;
+			EventBus.$emit('closeModal');
+		}
+	}
 };
 </script>
 
 <style scoped>
 .fade-enter-to /* .fade-leave-active below version 2.1.8 */ {
-  opacity: 1;
+	opacity: 1;
 }
 </style>