Skip to content

Commit

Permalink
release: v0.4.3
Browse files Browse the repository at this point in the history
  • Loading branch information
sheepbox8646 committed Oct 5, 2024
1 parent ac744af commit 553f900
Show file tree
Hide file tree
Showing 17 changed files with 185 additions and 190 deletions.
2 changes: 1 addition & 1 deletion packages/app/package.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "@vue-motion/app",
"type": "module",
"version": "0.4.2",
"version": "0.4.3",
"scripts": {
"dev": "vite",
"dev:tw": "npx tailwindcss -i ./src/style.css -o ./src/output.css --watch",
Expand Down
26 changes: 15 additions & 11 deletions packages/app/src/components/Preview.vue
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
<script setup lang="ts">
/** @ts-expect-error virtual-import */
// import Animation from 'virtual:user-main'
import Animation from 'virtual:user-main'
import { Motion, scale } from '@vue-motion/lib'
import { ref, watch } from 'vue'
// import TestAnimation from './__test__/TestAnimation.vue'
const { width, height } = defineProps<{
width: number
Expand All @@ -18,21 +19,24 @@ function updateZoom() {
window.addEventListener('resize', updateZoom)
watch(() => window.innerHeight, updateZoom)
let dev: boolean
if (__DEV__)
dev = true
else
dev = false
</script>

<template>
<div class="w-full h-[60%] flex overflow-hidden">
<div class="w-full h-full flex items-center justify-center">
<svg :viewBox="`0 0 ${width} ${height}`" class="bg-black" :style="{
transform: `scale(${zoom})`,
minWidth: `${width * zoom}px`,
minHeight: `${height * zoom}px`,
}" style="transform-origin: center center;">
<circle cx="100" cy="100" r="200" fill="white" />
</svg>
<!-- <Motion id="motion" :width="width" :height="height" :scale="zoom" :min-width="width * zoom" :min-height="height * zoom">
<Animation />
</Motion> -->
<Motion
id="motion" :width="width" :height="height" :scale="dev ? zoom : null as any" :min-width="dev ? (width * zoom) : (null as any)"
:min-height="dev ? (height * zoom) : (null as any)"
>
<Animation/>
<!-- <TestAnimation/> -->
</Motion>
</div>
</div>
</template>
12 changes: 12 additions & 0 deletions packages/app/src/components/__test__/TestAnimation.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<script setup lang="ts">
import { Arc } from '@vue-motion/lib'
import { useMotion } from '@vue-motion/core'
const motion = useMotion()
motion.width.value = 1600
motion.height.value = 900
</script>

<template>
<Arc :radius="100"/>
</template>
1 change: 1 addition & 0 deletions packages/app/src/global.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
declare const __DEV__: boolean;
7 changes: 6 additions & 1 deletion packages/app/src/main.ts
Original file line number Diff line number Diff line change
@@ -1,10 +1,15 @@
import { createApp } from 'vue'
import './output.css'
import App from './App.vue'
import Preview from './components/Preview.vue'
import 'font-awesome/css/font-awesome.css'
// /**@ts-ignore */
// import router from 'virtual:router'
// /**@ts-ignore */
// import player from 'virtual:player'

createApp(App).mount('#app')
if (__DEV__) {
createApp(App).mount('#app')
} else {
createApp(Preview).mount('#app')
}
227 changes: 109 additions & 118 deletions packages/app/src/output.css
Original file line number Diff line number Diff line change
@@ -1,5 +1,113 @@
*, ::before, ::after {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-gradient-from-position: ;
--tw-gradient-via-position: ;
--tw-gradient-to-position: ;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
--tw-contain-size: ;
--tw-contain-layout: ;
--tw-contain-paint: ;
--tw-contain-style: ;
}

::backdrop {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-gradient-from-position: ;
--tw-gradient-via-position: ;
--tw-gradient-to-position: ;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
--tw-contain-size: ;
--tw-contain-layout: ;
--tw-contain-paint: ;
--tw-contain-style: ;
}

/*
! tailwindcss v3.4.10 | MIT License | https://tailwindcss.com
! tailwindcss v3.4.13 | MIT License | https://tailwindcss.com
*/

/*
Expand Down Expand Up @@ -446,114 +554,6 @@ video {
display: none;
}

*, ::before, ::after {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-gradient-from-position: ;
--tw-gradient-via-position: ;
--tw-gradient-to-position: ;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
--tw-contain-size: ;
--tw-contain-layout: ;
--tw-contain-paint: ;
--tw-contain-style: ;
}

::backdrop {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-gradient-from-position: ;
--tw-gradient-via-position: ;
--tw-gradient-to-position: ;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
--tw-contain-size: ;
--tw-contain-layout: ;
--tw-contain-paint: ;
--tw-contain-style: ;
}

.absolute {
position: absolute;
}
Expand Down Expand Up @@ -635,10 +635,6 @@ video {
flex-grow: 1;
}

.transform {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.select-none {
-webkit-user-select: none;
-moz-user-select: none;
Expand Down Expand Up @@ -697,11 +693,6 @@ video {
border-bottom-width: 1px;
}

.bg-black {
--tw-bg-opacity: 1;
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
}

.bg-white {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
Expand Down
2 changes: 2 additions & 0 deletions packages/app/src/vite-env.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,3 +6,5 @@ declare module '*.vue' {
const componentOptions: ComponentOptions
export default componentOptions
}

declare const __DEV__: boolean
4 changes: 4 additions & 0 deletions packages/app/vite.config.ts
Original file line number Diff line number Diff line change
@@ -1,8 +1,12 @@
import process from 'node:process'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
plugins: [
vue(),
],
define: {
__DEV__: process.env.NODE_ENV === 'development',
},
})
2 changes: 1 addition & 1 deletion packages/client/package.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "@vue-motion/client",
"type": "module",
"version": "0.4.1",
"version": "0.4.3",
"description": "The components and hooks of vue-motion",
"author": "BugDuck Team",
"license": "Apache-2.0",
Expand Down
8 changes: 8 additions & 0 deletions packages/client/template/src/App.vue
Original file line number Diff line number Diff line change
@@ -1,3 +1,11 @@
<script setup lang="ts">
import { useMotion } from '@vue-motion/core'
const { width, height } = useMotion()
width.value = 1600
height.value = 900
</script>

<template>
<RouterView />
</template>
2 changes: 1 addition & 1 deletion packages/core/package.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "@vue-motion/core",
"type": "module",
"version": "0.4.1",
"version": "0.4.3",
"description": "The components and hooks of vue-motion",
"author": "BugDuck Team",
"license": "Apache-2.0",
Expand Down
Loading

0 comments on commit 553f900

Please sign in to comment.