mattrothenberg / vue-flip-toolkit Goto Github PK

<template>
  <div id="app">
    <Nav :routes="$router.options.routes" />
    <div id="app-content">
      <Header :viewName="$router.currentRoute.meta.friendlyName" />
      <Swap>
        <Flipper :flipKey="$route.path">
          <router-view />
        </Flipper>
      </Swap>
    </div>
  </div>
</template>

<script>
import Header from '@/components/Header'
import Nav from '@/components/Nav'

import Flipper from '@/components/Flip'

import Swap from '@/components/utils/transitions/Swap'

export default {
  components: {
    Header,
    Nav,
    Swap,
    Flipper
  }
}
</script>

<style lang="sass" src="@/styles/Global.sass">

<template>
    <Flipper :flipKey="key">
        <Flipped flipId="btn-chat-launch" scale v-if="!visible">
            <chat-launch-button @click="showChat"></chat-launch-button>
        </Flipped>
        <Flipped flipId="btn-chat-launch" scale v-else>
            <chat-wrapper></chat-wrapper>
        </Flipped>
    </Flipper>
</template>

<script>
    import { EventBus } from '../../EventBus';
    import { Flipper, Flipped } from 'vue-flip-toolkit';
    import ChatLaunchButton from "./ChatLaunchButton";
    import ChatWrapper from "./ChatWrapper";

    export default {
        name: "Chat",
        components: {
            ChatLaunchButton,
            ChatWrapper,
            Flipper,
            Flipped,
        },
        data() {
            return {
                visible: true
            }
        },
        mounted() {
            EventBus.$on('hideChat', () => {
                this.visible = false;
            })
        },
        beforeDestroy() {
            EventBus.$off('hideChat');
        },
        computed: {
            key() {
                return this.visible.toString();
            }
        },
        methods: {
            showChat() {
                this.visible = true;
            }
        }
    }
</script>

<template>
    <div class="chat-wrapper shadow">
        <Flipper :flipKey="key" stagger="gentle" className="d-flex flex-column flex-1">
            <router-view></router-view>
        </Flipper>
    </div>
</template>

<script>
    import { Flipper } from 'vue-flip-toolkit';
    export default {
        name: "ChatWrapper",
        components: {
            Flipper,
        },
        beforeCreate() {
            this.$router.push('/')
        },
        computed: {
            key() {
                return this.$route.path;
            }
        }
    }
</script>

<template>
    <div class="chat-page">
        <chat-header>
            <button @click="hideChat" class="chat-header-button text-white bg-transparent border-0 "><i class="fa fa-bars" aria-hidden="true"></i></button>
            <i class="fa fa-comment mr-2 font-size-large" aria-hidden="true"></i>
            <span class="font-size-small">Chats</span>
        </chat-header>
        <section class="chat-list px-3">
            <div class="chat-list-heading">
                Recent Conversations
            </div>

            <Flipped v-for="conversation of conversations" :key="conversation.id" :flipId="conversations.slug">
                <chat-conversation-card :conversation="conversation" @click="viewConversation(conversation.slug)"></chat-conversation-card>
            </Flipped>

        </section>
    </div>
</template>

<script>
    import { EventBus } from '../../EventBus';
    import { Flipped } from 'vue-flip-toolkit';
    import ChatHeader from "./ChatHeader";
    import ChatConversationCard from "./ChatConversationCard";

    export default {
        name: "ChatIndex",
        components: {
            ChatConversationCard,
            ChatHeader,
            Flipped,
        },
        data() {
            return {
                conversations: [
                    {'id': 1, 'slug': 'abc'},
                    {'id': 2, 'slug': 'def'},
                ]
            }
        },
        methods: {
            hideChat() {
                EventBus.$emit('hideChat');
            },
            viewConversation(slug) {
                this.$router.push(`/conversations/${slug}`);
            }
        },
    }
</script>

<template>
    <Flipped scale translate :flipId="flipId">
        <div class="chat-page">
            <chat-header>
                <router-link to="/" class="chat-header-button text-white bg-transparent border-0"><i class="fa fa-bars" aria-hidden="true"></i></router-link>
                <span class="font-size-small">Chats</span>
            </chat-header>
            <section class="chat-list px-3">

            </section>
        </div>
    </Flipped>
</template>

<script>
    import ChatHeader from "./ChatHeader";
    import { Flipped } from 'vue-flip-toolkit';

    export default {
        name: "ChatConversation",
        components: {
            ChatHeader,
            Flipped
        },
        computed: {
            flipId() {
                return this.$route.params.conversation;
            },
        }
    }
</script>

<template>
  <Flipper :flip-key="active" style="display:flex">
    <div v-for="(item,idx) in items" :key="idx">
      <button @click="active=idx">{{idx}}</button>
        <Flipped flip-id="square" scale translate v-if="active===idx">
          <div class="item">
           <Flipped inverse-flip-id="square" scale >
             <div>
              <component :is="current"/>
             </div>
           </Flipped>
         </div>
       </Flipped>
    </div>
  </Flipper>
</template>
<script>
import { Flipper, Flipped } from "vue-flip-toolkit";
import one from "@/components/one";
import two from "@/components/two";

export default {
  components: { Flipper, Flipped, one, two},
  data() {
    return {
      items: [{ component: one }, { component: two }],
      active: 0
    };
  },
  computed: {
    current() {
      return this.items[this.active].component;
    }
  },
};
</script>