sajjad.talkhabi
/
meshkeetoast
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

fix

Browse Source
master
sajjad 6 months ago
parent b5d10058bd
commit 875a1c2386
24 changed files with 843 additions and 674 deletions
Show Stats Download Patch File Download Diff File

4
package.json
Unescape View File

@ -1,8 +1,8 @@
{ {
"name": "meshkeetoast", "name": "meshkeetoast",
"version": "0.1.0", "version": "0.1.1",
"main": "dist/MeshkeeToast.umd.js", "main": "dist/MeshkeeToast.umd.js",
"style": "dist/theme-bootstrap.css", "style": "dist/theme-default.css",
"module": "dist/MeshkeeToast.esm.js", "module": "dist/MeshkeeToast.esm.js",
"unpkg": "dist/MeshkeeToast.min.js", "unpkg": "dist/MeshkeeToast.min.js",
"browser": { "browser": {

43
src/api.js
Unescape View File

@ -1,10 +1,10 @@
import MeshkeeToast from './MeshkeeToast.vue' import MeshkeeToast from './components/MeshkeeToast.vue'
import { createComponent } from './helpers'; import { createComponent } from './utils/helpers.js';
import eventBus from './bus.js'; import eventBus from './utils/bus.js';
import Positions from './positions.js'; import Positions from './utils/positions.js';
let parentTop = document.querySelector('.v-toast.v-toast--top'); let parentTop = document.querySelector('.me-toast.me-toast--top');
let parentBottom = document.querySelector('.v-toast.v-toast--bottom'); let parentBottom = document.querySelector('.me-toast.me-toast--bottom');
const correctParent = (position) => { const correctParent = (position) => {
switch (position) { switch (position) {
@ -25,12 +25,12 @@ const setupContainer = () => {
if (!parentTop) { if (!parentTop) {
parentTop = document.createElement('div'); parentTop = document.createElement('div');
parentTop.className = 'v-toast v-toast--top'; parentTop.className = 'me-toast me-toast--top';
} }
if (!parentBottom) { if (!parentBottom) {
parentBottom = document.createElement('div'); parentBottom = document.createElement('div');
parentBottom.className = 'v-toast v-toast--bottom' parentBottom.className = 'me-toast me-toast--bottom'
} }
const container = document.body; const container = document.body;
@ -49,7 +49,6 @@ export const useToast = (globalProps = {}) => {
const propsData = Object.assign({}, defaultProps, globalProps, options); const propsData = Object.assign({}, defaultProps, globalProps, options);
setupContainer(); setupContainer();
console.log(propsData.position, correctParent(propsData.position ? propsData.position : 'bottom'));
const instance = createComponent(MeshkeeToast, propsData, correctParent(propsData.position ? propsData.position : 'bottom')); const instance = createComponent(MeshkeeToast, propsData, correctParent(propsData.position ? propsData.position : 'bottom'));
return { return {
dismiss: instance.dismiss dismiss: instance.dismiss
@ -58,33 +57,35 @@ export const useToast = (globalProps = {}) => {
clear() { clear() {
eventBus.emit('toast-clear') eventBus.emit('toast-clear')
}, },
success(message, options = {}) { success(title, message, options = {}) {
return this.open(Object.assign({}, { return this.open(Object.assign({}, {
title,
message, message,
type: 'success' type: 'success',
borderColor: '#EDEDED'
}, options)) }, options))
}, },
error(message, options = {}) { error(title, message, options = {}) {
return this.open(Object.assign({}, { return this.open(Object.assign({}, {
title,
message, message,
type: 'error' type: 'error',
borderColor: '#EDEDED'
}, options)) }, options))
}, },
info(message, options = {}) { info(title, message, options = {}) {
return this.open(Object.assign({}, { return this.open(Object.assign({}, {
title,
message, message,
type: 'info' type: 'info'
}, options)) }, options))
}, },
warning(message, options = {}) { preset(title, message, options = {}) {
return this.open(Object.assign({}, {
message,
type: 'warning'
}, options))
},
default(message, options = {}) {
return this.open(Object.assign({}, { return this.open(Object.assign({}, {
title,
message, message,
titleColor: 'black',
messageColor: 'black',
type: 'default' type: 'default'
}, options)) }, options))
} }

108
src/MeshkeeToast.vue → src/components/MeshkeeToast.vue
Unescape View File

@ -1,23 +1,37 @@
<template> <template>
<transition :enter-active-class="transition.enter" :leave-active-class="transition.leave"> <transition :enter-active-class="transition.enter" :leave-active-class="transition.leave">
<div ref="root" role="alert" v-show="isActive" class="v-toast__item" <div ref="root" role="alert" v-show="isActive" :class="[`me-toast__root me-toast__root--${position}`]">
:class="[`v-toast__item--${type}`, `v-toast__item--${direction}`, `v-toast__item--${position}`]" <div :class="`me-toast__item--${direction}`">
@mouseover="toggleTimer(true)" @mouseleave="toggleTimer(false)" @click="whenClicked"> <div @mouseenter="toggleTimer(true)" @mouseleave="toggleTimer(false)"
<div :class="['v-toast__icon', `v-toast__icon--${type}-light`]"> :class="[`me-toast__item me-toast__item--${type}-light`]">
<div class="v-toast__icon--image"></div> <div class="me-toast__box">
<div :class="['me-toast__icon', `me-toast__icon--${type}`]">
<div class="me-toast__icon--image"></div>
</div>
<div class="me-toast__title"
:style="`color: ${titleColor};font-family: ${titleFontFamily}; ${direction == 'rtl' ? `border-left: 0.5px dashed ${borderColor};` : `border-right: 0.5px dashed ${borderColor};`}`"
v-html="title">
</div>
<p class="me-toast__message" :style="`color: ${messageColor};font-family: ${messageFontFamily};`"
v-html="message"></p>
</div>
<!-- close button -->
<div class="me-toast__close" @click="whenClicked"></div>
</div>
<div :class="[`me-toast__progress me-toast__progress--${type}-light`]">
<div ref="progress_bar" :class="[`me-toast__bar me-toast__bar--${type}`]"></div>
</div>
</div> </div>
<div class="mx-2 toast__title" v-html="title"></div>
<p class="v-toast__text" v-html="message"></p>
</div> </div>
</transition> </transition>
</template> </template>
<script> <script>
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import { removeElement } from './helpers.js'; import { removeElement } from '../utils/helpers.js';
import Timer from "./timer.js"; import Timer from "../utils/timer.js";
import Positions from './positions.js' import Positions from '../utils/positions.js'
import eventBus from './bus.js' import eventBus from '../utils/bus.js';
export default defineComponent({ export default defineComponent({
name: 'Toast', name: 'Toast',
@ -34,6 +48,26 @@ export default defineComponent({
type: String, type: String,
default: 'success' default: 'success'
}, },
titleFontFamily: {
type: String,
default: 'IranYekan-Regular'
},
messageFontFamily: {
type: String,
default: 'IranYekan-light'
},
titleColor: {
type: String,
default: 'white',
},
messageColor: {
type: String,
default: 'white',
},
borderColor: {
type: String,
default: '#888888'
},
position: { position: {
type: String, type: String,
default: Positions.BOTTOM_RIGHT, default: Positions.BOTTOM_RIGHT,
@ -43,7 +77,7 @@ export default defineComponent({
}, },
duration: { duration: {
type: Number, type: Number,
default: 3000 default: 6000
}, },
direction: { direction: {
type: String, type: String,
@ -75,8 +109,20 @@ export default defineComponent({
parentTop: null, parentTop: null,
parentBottom: null, parentBottom: null,
isHovered: false, isHovered: false,
timer: null,
} }
}, },
// watch: {
// 'timer.delay': {
// deep: true,
// handler(newVal) {
// console.log(newVal);
// if (!this.timer) return
// console.log(this.timer, (this.timer.delay / this.duration) * 100);
// this.getTimerWidth = 100 - ((this.timer.delay / this.duration) * 100);
// },
// },
// },
computed: { computed: {
correctParent() { correctParent() {
switch (this.position) { switch (this.position) {
@ -97,35 +143,35 @@ export default defineComponent({
case Positions.TOP_RIGHT: case Positions.TOP_RIGHT:
case Positions.TOP_LEFT: case Positions.TOP_LEFT:
return { return {
enter: 'v-toast--fade-in-down', enter: 'me-toast--fade-in-down',
leave: 'v-toast--fade-out' leave: 'me-toast--fade-out'
}; };
case Positions.BOTTOM: case Positions.BOTTOM:
case Positions.BOTTOM_RIGHT: case Positions.BOTTOM_RIGHT:
case Positions.BOTTOM_LEFT: case Positions.BOTTOM_LEFT:
return { return {
enter: 'v-toast--fade-in-up', enter: 'me-toast--fade-in-up',
leave: 'v-toast--fade-out' leave: 'me-toast--fade-out'
} }
} }
}, },
}, },
methods: { methods: {
setupContainer() { setupContainer() {
this.parentTop = document.querySelector('.v-toast.v-toast--top'); this.parentTop = document.querySelector('.me-toast.me-toast--top');
this.parentBottom = document.querySelector('.v-toast.v-toast--bottom'); this.parentBottom = document.querySelector('.me-toast.me-toast--bottom');
// No need to create them, they already exists // No need to create them, they already exists
if (this.parentTop && this.parentBottom) return; if (this.parentTop && this.parentBottom) return;
if (!this.parentTop) { if (!this.parentTop) {
this.parentTop = document.createElement('div'); this.parentTop = document.createElement('div');
this.parentTop.className = 'v-toast v-toast--top'; this.parentTop.className = 'me-toast me-toast--top';
} }
if (!this.parentBottom) { if (!this.parentBottom) {
this.parentBottom = document.createElement('div'); this.parentBottom = document.createElement('div');
this.parentBottom.className = 'v-toast v-toast--bottom' this.parentBottom.className = 'me-toast me-toast--bottom'
} }
const container = document.body; const container = document.body;
@ -153,7 +199,7 @@ export default defineComponent({
const wrapper = this.$refs.root; const wrapper = this.$refs.root;
// unmount the component // unmount the component
// removeElement(wrapper); removeElement(wrapper);
}, 150) }, 150)
}, },
@ -163,11 +209,9 @@ export default defineComponent({
this.queueTimer = setTimeout(this.showNotice, 250); this.queueTimer = setTimeout(this.showNotice, 250);
return return
} }
console.log(this.correctParent); document.querySelector('.me-toast--bottom').insertAdjacentElement('afterbegin', this.$refs.root);
document.querySelector('.v-toast--bottom').insertAdjacentElement('afterbegin', this.$refs.root);
this.correctParent.appendChild(this.$refs.root); this.correctParent.appendChild(this.$refs.root);
console.log(this.$refs.root); document.querySelector('.me-toast--bottom').appendChild(this.$refs.root);
document.querySelector('.v-toast--bottom').appendChild(this.$refs.root);
this.$options.elem = this.correctParent; this.$options.elem = this.correctParent;
@ -175,9 +219,9 @@ export default defineComponent({
if (this.duration) { if (this.duration) {
this.timer = new Timer(this.dismiss, this.duration); this.timer = new Timer(this.dismiss, this.duration);
this.timer.move(this.$refs.progress_bar);
} }
}, },
whenClicked() { whenClicked() {
if (!this.dismissible) return; if (!this.dismissible) return;
this.onClick.apply(null, arguments); this.onClick.apply(null, arguments);
@ -186,8 +230,15 @@ export default defineComponent({
toggleTimer(newVal) { toggleTimer(newVal) {
if (!this.pauseOnHover || !this.timer) return; if (!this.pauseOnHover || !this.timer) return;
newVal ? this.timer.pause() : this.timer.resume(); if (newVal) {
this.timer.move(this.$refs.progress_bar, true);
this.timer.pause();
} else {
this.timer.move(this.$refs.progress_bar);
this.timer.resume();
} }
// newVal ? this.timer.pause(); : this.timer.resume();
},
}, },
beforeUnmount() { beforeUnmount() {
eventBus.off('toast-clear', this.dismiss) eventBus.off('toast-clear', this.dismiss)
@ -201,6 +252,3 @@ export default defineComponent({
}, },
}) })
</script> </script>
<style lang="scss">
@import './theme/bootstrap';
</style>

45
src/main.js
Unescape View File

@ -1,51 +1,12 @@
// Import vue component
import Vue from 'vue';
import MeshkeeToast from './MeshkeeToast.vue';
import { useToast } from './api'; import { useToast } from './api';
// Vue.prototype.$meshkeeToast = function () { // To allow use as module (npm/webpack/etc.) export component
// console.log(324);
// return 321;
// }
// // Declare install function executed by Vue.use()
// export function install(Vue) {
// console.log(43);
// if (install.installed) return;
// install.installed = true;
// Vue.prototype.$meshkeeToast = function () {
// console.log(324);
// return 321;
// }
// Vue.component('MeshkeeToast', MeshkeeToast);
// }
// // Create module definition for Vue.use()
// const plugin = {
// install,
// };
// // Auto-install when vue is found (eg. in browser via <script> tag)
// let GlobalVue = null;
// if (typeof window !== 'undefined') {
// GlobalVue = window.Vue;
// } else if (typeof global !== 'undefined') {
// GlobalVue = global.Vue;
// }
// console.log(global, GlobalVue);
// if (GlobalVue) {
// GlobalVue.use(plugin);
// }
// // To allow use as module (npm/webpack/etc.) export component
// export default MeshkeeToast;
export default { export default {
install(Vue, options) { install(Vue, options) {
// Let's register our component globally // Let's register our component globally
// https://vuejs.org/v2/guide/components-registration.html // https://vuejs.org/v2/guide/components-registration.html
Vue.prototype.$meshkeeToast = function () { Vue.prototype.$metoast = () => {
const { open } = useToast(options); return new useToast(options);
open('Vue');
} }
} }
}; };

84
src/theme/_animations.scss
Unescape View File

@ -8,7 +8,7 @@
} }
} }
.v-toast--fade-out { .me-toast--fade-out {
animation-name: fadeOut; animation-name: fadeOut;
} }
@ -24,7 +24,7 @@
} }
} }
.v-toast--fade-in-down { .me-toast--fade-in-down {
animation-name: fadeInDown; animation-name: fadeInDown;
} }
@ -40,12 +40,12 @@
} }
} }
.v-toast--fade-in-up { .me-toast--fade-in-up {
animation-name: fadeInUp; animation-name: fadeInUp;
} }
/** /**
* Vue Transitions * Meshkeetoast Transitions
*/ */
.fade-enter-active, .fade-enter-active,
@ -57,3 +57,79 @@
.fade-leave-to { .fade-leave-to {
opacity: 0; opacity: 0;
} }
// progress bar
// @-webkit-keyframes progress {
// 0% {
// width: 0%;
// }
// 50% {
// width: 50%;
// }
// 100% {
// width: 100%;
// }
// }
// @-moz-keyframes progress {
// 0% {
// width: 0%;
// }
// 50% {
// width: 50%;
// }
// 100% {
// width: 100%;
// }
// }
// @-o-keyframes progress {
// 0% {
// width: 0%;
// }
// 50% {
// width: 50%;
// }
// 100% {
// width: 100%;
// }
// }
// @keyframes progress {
// 0% {
// width: 0%;
// }
// 50% {
// width: 50%;
// }
// 100% {
// width: 100%;
// }
// }
// .me-toast__progress {
// -webkit-animation-name: progress;
// -moz-animation-name: progress;
// -o-animation-name: progress;
// animation-name: progress;
// -webkit-animation: progress 2s linear;
// -moz-animation: progress 2s linear;
// -o-animation: progress 2s linear;
// -ms-animation: progress 2s linear;
// }
// .me-toast__root:hover>.me-toast__bar {
// -webkit-animation-play-state: paused;
// animation-play-state: paused;
// }

1
src/theme/bootstrap/_variables.scss
Unescape View File

@ -1 +0,0 @@
$toast-icons-path: "./theme/sugar/icons" !default;

5
src/theme/bootstrap/index.scss
Unescape View File

@ -1,5 +0,0 @@
@import '../default/variables';
@import 'variables';
@import '../animations';
@import '../default/main';
@import '../sugar/icons';

107
src/theme/default/_main.scss
Unescape View File

@ -1,4 +1,4 @@
.v-toast { .me-toast {
position: fixed; position: fixed;
display: flex; display: flex;
top: 0; top: 0;
@ -10,26 +10,66 @@
z-index: 1090; z-index: 1090;
pointer-events: none; pointer-events: none;
&__root {
display: flex;
// Individual toast position
&.me-toast__root--top,
&.me-toast__root--bottom {
align-self: center;
}
&.me-toast__root--top-right,
&.me-toast__root--bottom-right {
align-self: flex-end;
}
&.me-toast__root--top-left,
&.me-toast__root--bottom-left {
align-self: flex-start;
}
}
&__item { &__item {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: space-between;
animation-duration: 150ms; animation-duration: 150ms;
margin: 0.5em 0; margin: 0.3em 0;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
border-radius: 0.25em; border-radius: 0.25em;
pointer-events: auto; pointer-events: auto;
opacity: 0.92; opacity: 0.92;
color: #fff; color: #fff;
min-height: 3em; min-height: 49px;
width: 490px;
cursor: pointer; cursor: pointer;
& .me-toast__box {
display: flex;
align-items: center;
height: 49px;
}
// Directions // Directions
&__item--rtl {
&--rtl {
direction: rtl; direction: rtl;
.me-toast__icon {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
} }
&__item--ltr { }
&--ltr {
direction: ltr; direction: ltr;
.me-toast__icon {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
} }
// Colors // Colors
@ -39,52 +79,65 @@
background-color: $value !important; background-color: $value !important;
} }
& .v-toast__icon--#{$color} { & .me-toast__icon--#{$color} {
background-color: $value; background-color: $value;
} }
} }
&--warning {
color: #000
} }
// Individual toast position &__title {
&.v-toast__item--top, font-size: 12px;
&.v-toast__item--bottom { padding: 0 16px;
align-self: center; height: 65%;
display: flex;
align-items: center;
} }
&.v-toast__item--top-right, &__message {
&.v-toast__item--bottom-right { font-size: 10px;
align-self: flex-end; margin-right: 16px;
word-break: break-word;
} }
&.v-toast__item--top-left, &__icon {
&.v-toast__item--bottom-left { display: none;
align-self: flex-start;
} }
// Colors
@each $color, $value in $toast-colors {
&__progress--#{$color} {
background: $value !important;
} }
&__text { .me-toast__bar--#{$color} {
margin: 0; background-color: $value ;
padding: 0.5em 1em; }
word-break: break-word;
} }
&__icon {
display: none;
&__progress {
width: 490px;
border-radius: 12px;
.me-toast__bar {
width: 1%;
height: 3px;
}
} }
// Notice container positions // Notice container positions
&.v-toast--top { &.me-toast--top {
flex-direction: column; flex-direction: column;
} }
&.v-toast--bottom { &.me-toast--bottom {
flex-direction: column-reverse; flex-direction: column-reverse;
} }
&.v-toast--custom-parent { &.me-toast--custom-parent {
position: absolute; position: absolute;
} }

9
src/theme/default/_variables.scss
Unescape View File

@ -2,13 +2,14 @@ $toast-colors: (
) !default; ) !default;
$toast-colors: map-merge(("success": #32CAD5, $toast-colors: map-merge(("success": #32CAD5,
"success-light": #32CAD5CC, "success-light": #32CAD5CC,
"info": #E8E8E8, "info": #000000,
"info-light": #F7F7F7, "info-light": #3E3E3E,
"warning": #febc22, "warning": #febc22,
"warning-light": #febc22, "warning-light": #febc22,
"error": #EE3552, "error": #EE3552,
"error-light": #EE3552CC, "error-light": #EE3552CC,
"default": #000, "default": #E8E8E8,
"default-light": #3E3E3E), "default-light": #F7F7F7),
$toast-colors $toast-colors
); );
$toast-icons-path: "../sugar/icons" !default;

1
src/theme/default/index.scss
Unescape View File

@ -1,3 +1,4 @@
@import 'variables'; @import 'variables';
@import '../animations'; @import '../animations';
@import 'main'; @import 'main';
@import '../sugar/icons';

62
src/theme/sugar/icons.scss
View File

File diff suppressed because one or more lines are too long

3
src/theme/sugar/icons/close-black.svg
Unescape View File

@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.36644 7.99839L15.9245 0.440374C16.0252 0.339619 16.0252 0.176296 15.9245 0.0755417C15.8237 -0.0251806 15.6604 -0.0251806 15.5596 0.0755417L8.00161 7.63356L0.443598 0.0755417C0.341102 -0.023439 0.177779 -0.0206008 0.0787656 0.0818954C-0.0177962 0.181876 -0.0177962 0.340393 0.0787656 0.440374L7.63678 7.99839L0.0787656 15.5564C-0.0237305 15.6554 -0.0265687 15.8187 0.0724443 15.9212C0.171457 16.0237 0.33478 16.0266 0.437277 15.9276C0.439437 15.9255 0.441534 15.9234 0.443598 15.9212L8.00161 8.36322L15.5596 15.9212C15.6621 16.0202 15.8254 16.0174 15.9245 15.9149C16.0211 15.8149 16.0211 15.6564 15.9245 15.5564L8.36644 7.99839Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 759 B

3
src/theme/sugar/icons/close.svg
Unescape View File

@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.36644 7.99839L15.9245 0.440374C16.0252 0.339619 16.0252 0.176296 15.9245 0.0755417C15.8237 -0.0251806 15.6604 -0.0251806 15.5596 0.0755417L8.00161 7.63356L0.443598 0.0755417C0.341102 -0.023439 0.177779 -0.0206008 0.0787656 0.0818954C-0.0177962 0.181876 -0.0177962 0.340393 0.0787656 0.440374L7.63678 7.99839L0.0787656 15.5564C-0.0237305 15.6554 -0.0265687 15.8187 0.0724443 15.9212C0.171457 16.0237 0.33478 16.0266 0.437277 15.9276C0.439437 15.9255 0.441534 15.9234 0.443598 15.9212L8.00161 8.36322L15.5596 15.9212C15.6621 16.0202 15.8254 16.0174 15.9245 15.9149C16.0211 15.8149 16.0211 15.6564 15.9245 15.5564L8.36644 7.99839Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 759 B

14
src/theme/sugar/icons/error.svg
Unescape View File

@ -1,4 +1,12 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.976 51.976"> <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill="#fff" <g clip-path="url(#clip0_563_165)">
d="M44.373 7.603c-10.137-10.137-26.632-10.138-36.77 0-10.138 10.138-10.137 26.632 0 36.77s26.632 10.138 36.77 0c10.137-10.138 10.137-26.633 0-36.77zm-8.132 28.638a2 2 0 01-2.828 0l-7.425-7.425-7.778 7.778a2 2 0 11-2.828-2.828l7.778-7.778-7.425-7.425a2 2 0 112.828-2.828l7.425 7.425 7.071-7.071a2 2 0 112.828 2.828l-7.071 7.071 7.425 7.425a2 2 0 010 2.828z"/> <path d="M13.8334 2.83883C14.1127 2.29703 14.8873 2.29703 15.1666 2.83883L24.3514 20.6564C24.6087 21.1555 24.2464 21.75 23.6848 21.75H5.31522C4.75364 21.75 4.39127 21.1555 4.64858 20.6564L13.8334 2.83883Z" stroke="white" stroke-width="0.5"/>
<rect x="14" y="8" width="1" height="9" rx="0.5" fill="white"/>
<rect x="14" y="18" width="1" height="2" rx="0.5" fill="white"/>
</g>
<defs>
<clipPath id="clip0_563_165">
<rect width="26" height="26" fill="white"/>
</clipPath>
</defs>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 466 B

After

Width:  |  Height:  |  Size: 616 B

BIN
src/theme/sugar/icons/info-1.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 142 B

4
src/theme/sugar/icons/info-black.svg
Unescape View File

@ -0,0 +1,4 @@
<svg width="1" height="20" viewBox="0 0 1 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="1" height="17" rx="0.5" fill="black"/>
<rect y="18" width="1" height="2" rx="0.5" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 211 B

6
src/theme/sugar/icons/info.svg
Unescape View File

@ -1,4 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45.999 45.999"> <svg width="1" height="20" viewBox="0 0 1 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill="#fff" <rect width="1" height="17" rx="0.5" fill="white"/>
d="M39.264 6.736c-8.982-8.981-23.545-8.982-32.528 0-8.982 8.982-8.981 23.545 0 32.528 8.982 8.98 23.545 8.981 32.528 0 8.981-8.983 8.98-23.545 0-32.528zM25.999 33a3 3 0 11-6 0V21a3 3 0 116 0v12zm-3.053-17.128c-1.728 0-2.88-1.224-2.844-2.735-.036-1.584 1.116-2.771 2.879-2.771 1.764 0 2.88 1.188 2.917 2.771-.001 1.511-1.152 2.735-2.952 2.735z"/> <rect y="18" width="1" height="2" rx="0.5" fill="white"/>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 453 B

After

Width:  |  Height:  |  Size: 211 B

5
src/theme/sugar/icons/success.svg
Unescape View File

@ -1,4 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52"> <svg width="21" height="11" viewBox="0 0 21 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill="#fff" <path d="M20.9268 0.120905C20.8106 -0.0171521 20.5976 -0.0404273 20.4509 0.0689341L6.79774 10.2571L0.576272 4.55434C0.442354 4.43107 0.22761 4.43339 0.0966553 4.55945C-0.0342994 4.68555 -0.0318861 4.88765 0.102075 5.01092L6.53761 10.9094C6.65955 11.0214 6.85083 11.0307 6.98437 10.9311L20.8716 0.568872C21.0182 0.459511 21.0429 0.258922 20.9268 0.120905Z" fill="white"/>
d="M26 0C11.664 0 0 11.663 0 26s11.664 26 26 26 26-11.663 26-26S40.336 0 26 0zm14.495 17.329l-16 18a1.997 1.997 0 01-2.745.233l-10-8a2 2 0 012.499-3.124l8.517 6.813L37.505 14.67a2.001 2.001 0 012.99 2.659z"/>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 308 B

After

Width:  |  Height:  |  Size: 474 B

4
src/theme/sugar/icons/warning.svg
Unescape View File

@ -1,4 +0,0 @@
<svg viewBox="0 0 52 52" xmlns="http://www.w3.org/2000/svg">
<path fill="#000"
d="M49.466 41.26L29.216 6.85c-.69-1.16-1.89-1.85-3.22-1.85-1.32 0-2.53.69-3.21 1.85L2.536 41.26c-.71 1.2-.72 2.64-.03 3.85.68 1.18 1.89 1.89 3.24 1.89h40.51c1.35 0 2.56-.71 3.23-1.89.7-1.21.69-2.65-.02-3.85zm-25.53-21.405h3.381v3.187l-.724 8.92H24.66l-.725-8.92v-3.187zm2.97 17.344a1.712 1.712 0 01-1.267.543c-.491 0-.914-.181-1.268-.543a1.788 1.788 0 01-.531-1.297c0-.502.176-.935.53-1.297a1.712 1.712 0 011.269-.544c.49 0 .914.181 1.268.544s.53.795.53 1.297c0 .503-.176.934-.53 1.297z"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 589 B

24
src/timer.js
Unescape View File

@ -1,24 +0,0 @@
export default class Timer {
constructor(callback, delay) {
this.startedAt = Date.now();
this.callback = callback;
this.delay = delay;
this.timer = setTimeout(callback, delay);
}
pause() {
this.stop();
this.delay -= Date.now() - this.startedAt;
}
resume() {
this.stop();
this.startedAt = Date.now();
this.timer = setTimeout(this.callback, this.delay);
}
stop() {
clearTimeout(this.timer);
}
}

0
src/bus.js → src/utils/bus.js
Unescape View File

18
src/helpers.js → src/utils/helpers.js
Unescape View File

@ -1,6 +1,5 @@
import Vue from 'vue'; import Vue from 'vue';
export const removeElement = (el) => { export const removeElement = (el) => {
console.log(el);
if (typeof el.remove !== 'undefined') { if (typeof el.remove !== 'undefined') {
el.remove() el.remove()
} else { } else {
@ -9,23 +8,6 @@ export const removeElement = (el) => {
} }
export const createComponent = (component, props, parentContainer, slots = {}) => { export const createComponent = (component, props, parentContainer, slots = {}) => {
// const vNode = h(component, props, slots)
// const container = document.createElement('div');
// console.log(parentContainer, container);
// container.classList.add('v-toast--pending')
// parentContainer.appendChild(container);
// h(vNode, container);
// return vNode.component
// return Vue.component('MeshkeeToast', {
// render: (createElement) => {
// return createElement(
// 'div',
// { class: { 'v-toast--pending': true } },
// MeshkeeToast
// )
// }
// });
const toastTpl = Vue.extend({ const toastTpl = Vue.extend({
data() { data() {
return { return {

0
src/positions.js → src/utils/positions.js
Unescape View File

47
src/utils/timer.js
Unescape View File

@ -0,0 +1,47 @@
export default class Timer {
constructor(callback, delay) {
this.startedAt = Date.now();
this.callback = callback;
this.delay = delay;
this.timer = setTimeout(callback, delay);
this.index = 0;
this.width = 0;
this.widthTimer = null;
}
pause() {
this.stop();
this.delay -= Date.now() - this.startedAt;
}
resume() {
this.stop();
this.startedAt = Date.now();
this.timer = setTimeout(this.callback, this.delay);
}
stop() {
clearTimeout(this.timer);
}
move(elem, stop) {
if (stop) {
this.index = 0;
return clearInterval(this.widthTimer);
}
if (this.index == 0) {
this.index = 1;
this.widthTimer = setInterval(() => {
if (this.width >= 100) {
clearInterval(this.widthTimer);
this.index = 0;
} else {
this.width++;
elem.style.width = this.width + "%";
}
}, (this.delay / 100));
}
}
}
Write Preview
Loading…
Cancel
Save