Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

style(playground): Refactor layout, add icons and styles, fix sandbox default replay function #247

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

style(playground): Refactor layout, add icons and styles, fix sandbox default replay function #247

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions playgrounds/vite/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,9 @@
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Comic+Neue:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<title>Editor | @vueuse/motion</title>
</head>
<body>
Expand Down
1 change: 1 addition & 0 deletions playgrounds/vite/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
"preview:vite": "vite preview"
},
"dependencies": {
"@tabler/icons-vue": "^3.29.0",
"@vueuse/motion": "workspace:~",
"prism-theme-vars": "^0.2.5",
"prismjs": "^1.29.0",
Expand Down
67 changes: 38 additions & 29 deletions playgrounds/vite/src/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,55 +1,64 @@
<script setup lang="ts">
import { IconBrandGithub } from '@tabler/icons-vue'
import Delay from './demos/Delay.vue'
import Editor from './demos/Editor.vue'
import Transitions from './demos/Transitions.vue'
import Sandbox from './demos/Sandbox.vue'

// you can set this to true to see the sandbox
// sandbox can be edited in Sandbox.vue file
const sandbox = false
</script>

<template>
<div>
<div class="flex items-center justify-center">
<h1 class="m-6 cursor-pointer select-none text-4xl font-bold">
🤹&nbsp;@vueuse/motion
</h1>
</div>

<template v-if="!sandbox">
<h1 class="flex items-center justify-center text-3xl font-bold">
Delay
<div class="w-full h-full p-2 flex flex-col">
<div class="navbar flex h-16 -sm:(flex-col gap-1) items-center py-3 gap-3">
<h1 class="cursor-pointer flex gap-1 items-center select-none text-lg font-bold">
🤹 @vueuse/motion | <span class="text-sm text-gray-300">playground</span>
</h1>

<Delay class="mt-6 mb-6" />

<h1 class="flex items-center justify-center text-3xl font-bold">
Editor
</h1>
<p class="text-center ml-auto flex place-items-center justify-center -sm:w-full gap-2 text-sm">
<a class="px-1 py-[2px] hover:(bg-gray-500 text-white) rounded-md border border-[hsl(var(--border))] flex place-items-center" href="https://github.com/vueuse/motion">
<IconBrandGithub class="w-5" />
</a>
Package Founder:
<a href="https://twitter.com/yaeeelglx" target="_blank" class="underline"> Yaël Guilloux </a>
</p>
</div>
<div class="flex-1 w-full">
<!-- show sample views if sandbox mode is off -->
<template v-if="!sandbox">
<h1 class="preview-title">
Delay
</h1>

<Editor class="mt-6 mb-6" />
<Delay class="mt-6 mb-6" />

<h1 class="flex items-center justify-center text-3xl font-bold">
Transitions
</h1>
<h1 class="preview-title">
Editor
</h1>

<Transitions class="mt-6 mb-6" />
</template>
<Editor class="mt-6 mb-6" />

<Sandbox v-else />
<h1 class="preview-title">
Transitions
</h1>

<div class="flex flex-col items-center justify-center">
<a class="mt-12 mb-6" href="https://github.com/vueuse/motion"> ↩️&nbsp;&nbsp;Bring me back to GitHub </a>
<Transitions class="mt-6 mb-6" />
</template>

<p class="mb-6 text-center">
This package has been written by
<a href="https://twitter.com/yaeeelglx" target="_blank"> Yaël Guilloux </a>
</p>
<div v-else class="flex w-full h-full items-center justify-center">
<Sandbox />
</div>
</div>
</div>
</template>

<style lang="postcss" scoped>
a {
@apply font-bold transition-colors duration-100 hover:text-blue-400;
@apply font-bold transition-colors duration-100 ;
}
.preview-title{
@apply flex items-center justify-center text-3xl font-bold;
}
</style>
12 changes: 10 additions & 2 deletions playgrounds/vite/src/demos/Sandbox.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,11 +15,19 @@ const instance = useMotion(block, {
},
})

const replay = () => (instance.variant.value = 'enter')
function replay() {
// set animation state to initial
instance.variant.value = 'initial'

// wait for 200ms and set it back to enter
setTimeout(() => {
instance.variant.value = 'enter'
}, 200)
}
</script>

<template>
<div class="h-200 rounded-4xl flex w-full items-center justify-center border-4 border-red-400" @click="replay">
<div class="h-full rounded-lg flex w-full items-center justify-center border-1 border-gray-200" @click="replay">
<Block ref="block" />
</div>
</template>
37 changes: 34 additions & 3 deletions playgrounds/vite/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,12 @@ html {
}

body {
@apply text-white flex items-center justify-center bg-gradient-to-b from-violet-600 to-violet-900 bg-cover bg-fixed overflow-y-scroll;
@apply text-white flex items-center justify-center bg-gradient-to-b from-violet-600 to-violet-900 bg-cover bg-fixed;
}

#app {
@apply w-full md:w-8/12 xl:w-1/2 p-6;
@apply w-screen h-screen;
font-family: "Inter";
}

/* PrismJS theme fix */
Expand Down Expand Up @@ -39,4 +40,34 @@ pre[class*='language-'] {
--prism-line-number-gutter: #eeeeee;
--prism-line-highlight-background: #444444;
--prism-selection-background: #444444;
}

/* Custom */
--background: 0 0% 100%;
--foreground: 224 71.4% 4.1%;

--card: 0 0% 100%;
--card-foreground: 224 71.4% 4.1%;

--popover: 0 0% 100%;
--popover-foreground: 224 71.4% 4.1%;

--primary: 262.1 83.3% 57.8%;
--primary-foreground: 210 20% 98%;

--secondary: 220 14.3% 95.9%;
--secondary-foreground: 220.9 39.3% 11%;

--muted: 220 14.3% 95.9%;
--muted-foreground: 220 8.9% 46.1%;

--accent: 220 14.3% 95.9%;
--accent-foreground: 220.9 39.3% 11%;

--destructive: 0 84.2% 60.2%;
--destructive-foreground: 210 20% 98%;

--border: 220 13% 91%;
--input: 220 13% 91%;
--ring: 262.1 83.3% 57.8%;
--radius: 0.5rem;
}
2 changes: 1 addition & 1 deletion playgrounds/vite/windi.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { defineConfig } from 'vite-plugin-windicss'

defineConfig({
export default defineConfig({
darkMode: false, // or 'media' or 'class'
theme: {
extend: {
Expand Down
Loading