├── .editorconfig ├── .eslintrc ├── .gitattributes ├── .gitignore ├── README.md ├── README.zh.md ├── demo ├── .eslintignore ├── .eslintrc ├── .gitignore ├── .npmrc ├── .stackblitzrc ├── README.md ├── app.vue ├── assets │ ├── images │ │ └── nuxt.png │ └── svgs │ │ ├── apollo.svg │ │ ├── en.svg │ │ └── zh-CN.svg ├── codegen.yml ├── components │ ├── DarkToggle.vue │ ├── Footer.vue │ ├── Highlight.vue │ ├── Home.vue │ └── SvgIcon.vue ├── composables │ └── locale.ts ├── locales │ ├── en.json │ └── zh-CN.json ├── netlify.toml ├── nuxt.config.ts ├── package.json ├── pages │ ├── index.vue │ ├── transition.vue │ └── webgl-filter.vue ├── plugins │ └── as-image.ts ├── public │ └── favicon.ico ├── sandbox.config.json ├── serverless.yml ├── stores │ └── user.ts ├── styles │ └── main.css ├── tsconfig.json └── yarn.lock ├── docs ├── .env.example ├── .gitignore ├── README.md ├── components │ ├── AppFooter.vue │ ├── AppHeader.vue │ ├── AppLangSwitcher.vue │ ├── AppNav.vue │ └── global │ │ ├── Banner.vue │ │ ├── Fake3d.vue │ │ └── TransitionBanner.vue ├── content │ ├── en │ │ ├── filter │ │ │ ├── custom.md │ │ │ ├── introduction.md │ │ │ ├── lib.md │ │ │ └── usage.md │ │ ├── index.md │ │ ├── setup.md │ │ ├── transition │ │ │ ├── build-in.md │ │ │ ├── custom.md │ │ │ ├── gl-transition.md │ │ │ ├── introduction.md │ │ │ ├── setup.md │ │ │ └── usage.md │ │ ├── url.md │ │ └── usage.md │ ├── settings.json │ └── zh │ │ ├── filter │ │ ├── custom.md │ │ ├── introduction.md │ │ ├── lib.md │ │ └── usage.md │ │ ├── index.md │ │ ├── setup.md │ │ ├── transition │ │ ├── build-in.md │ │ ├── custom.md │ │ ├── gl-transition.md │ │ ├── introduction.md │ │ ├── setup.md │ │ └── usage.md │ │ ├── url.md │ │ └── usage.md ├── nuxt.config.js ├── package.json ├── plugins │ └── as-image.js ├── static │ ├── banner-depth.png │ ├── banner.jpg │ ├── fake3d.gif │ ├── icon.png │ ├── logo-dark.svg │ ├── logo-light.svg │ ├── logo.svg │ ├── mount-map.jpg │ ├── mount.jpg │ ├── preview-dark.png │ ├── preview.png │ ├── show.gif │ └── transition.gif ├── style.css └── yarn.lock ├── package.json ├── packages ├── filters │ ├── ascii │ │ ├── .gitignore │ │ ├── .vscode │ │ │ └── extensions.json │ │ ├── README.md │ │ ├── examples │ │ │ ├── vue2 │ │ │ │ ├── .gitignore │ │ │ │ ├── .npmrc │ │ │ │ ├── README.md │ │ │ │ ├── babel.config.js │ │ │ │ ├── jsconfig.json │ │ │ │ ├── package.json │ │ │ │ ├── public │ │ │ │ │ ├── favicon.ico │ │ │ │ │ └── index.html │ │ │ │ ├── src │ │ │ │ │ ├── App.vue │ │ │ │ │ ├── assets │ │ │ │ │ │ └── logo.png │ │ │ │ │ └── main.js │ │ │ │ └── vue.config.js │ │ │ └── vue3 │ │ │ │ ├── .gitignore │ │ │ │ ├── .npmrc │ │ │ │ ├── README.md │ │ │ │ ├── babel.config.js │ │ │ │ ├── jsconfig.json │ │ │ │ ├── package.json │ │ │ │ ├── public │ │ │ │ ├── favicon.ico │ │ │ │ └── index.html │ │ │ │ ├── src │ │ │ │ ├── App.vue │ │ │ │ ├── assets │ │ │ │ │ └── logo.png │ │ │ │ ├── components │ │ │ │ │ └── HelloWorld.vue │ │ │ │ └── main.js │ │ │ │ └── vue.config.js │ │ ├── index.html │ │ ├── package.json │ │ ├── patches │ │ │ └── vue-template-compiler+2.6.14.patch │ │ ├── public │ │ │ └── favicon.ico │ │ ├── scripts │ │ │ ├── copy.js │ │ │ ├── postinstall.js │ │ │ └── util.js │ │ ├── src │ │ │ ├── App.vue │ │ │ ├── assets │ │ │ │ └── logo.png │ │ │ ├── components │ │ │ │ └── index.vue │ │ │ ├── env.d.ts │ │ │ ├── index.ts │ │ │ └── main.ts │ │ ├── tsconfig.json │ │ ├── tsconfig.node.json │ │ ├── vite.config.ts │ │ ├── vite.config.vue2.ts │ │ └── vite.config.vue3.ts │ ├── crt │ │ ├── .gitignore │ │ ├── .vscode │ │ │ └── extensions.json │ │ ├── README.md │ │ ├── examples │ │ │ ├── vue2 │ │ │ │ ├── .gitignore │ │ │ │ ├── .npmrc │ │ │ │ ├── README.md │ │ │ │ ├── babel.config.js │ │ │ │ ├── jsconfig.json │ │ │ │ ├── package.json │ │ │ │ ├── public │ │ │ │ │ ├── favicon.ico │ │ │ │ │ └── index.html │ │ │ │ ├── src │ │ │ │ │ ├── App.vue │ │ │ │ │ ├── assets │ │ │ │ │ │ └── logo.png │ │ │ │ │ └── main.js │ │ │ │ └── vue.config.js │ │ │ └── vue3 │ │ │ │ ├── .gitignore │ │ │ │ ├── .npmrc │ │ │ │ ├── README.md │ │ │ │ ├── babel.config.js │ │ │ │ ├── jsconfig.json │ │ │ │ ├── package.json │ │ │ │ ├── public │ │ │ │ ├── favicon.ico │ │ │ │ └── index.html │ │ │ │ ├── src │ │ │ │ ├── App.vue │ │ │ │ ├── assets │ │ │ │ │ └── logo.png │ │ │ │ ├── components │ │ │ │ │ └── HelloWorld.vue │ │ │ │ └── main.js │ │ │ │ └── vue.config.js │ │ ├── index.html │ │ ├── package.json │ │ ├── patches │ │ │ └── vue-template-compiler+2.6.14.patch │ │ ├── pnpm-lock.yaml │ │ ├── public │ │ │ └── favicon.ico │ │ ├── scripts │ │ │ ├── copy.js │ │ │ ├── postinstall.js │ │ │ └── util.js │ │ ├── src │ │ │ ├── App.vue │ │ │ ├── assets │ │ │ │ └── logo.png │ │ │ ├── components │ │ │ │ └── index.vue │ │ │ ├── env.d.ts │ │ │ ├── index.ts │ │ │ └── main.ts │ │ ├── tsconfig.json │ │ ├── tsconfig.node.json │ │ ├── vite.config.ts │ │ ├── vite.config.vue2.ts │ │ └── vite.config.vue3.ts │ ├── fake3d │ │ ├── .gitignore │ │ ├── .vscode │ │ │ └── extensions.json │ │ ├── README.md │ │ ├── examples │ │ │ ├── vue2 │ │ │ │ ├── .gitignore │ │ │ │ ├── .npmrc │ │ │ │ ├── README.md │ │ │ │ ├── babel.config.js │ │ │ │ ├── jsconfig.json │ │ │ │ ├── package.json │ │ │ │ ├── public │ │ │ │ │ ├── favicon.ico │ │ │ │ │ └── index.html │ │ │ │ ├── src │ │ │ │ │ ├── App.vue │ │ │ │ │ ├── assets │ │ │ │ │ │ └── logo.png │ │ │ │ │ └── main.js │ │ │ │ └── vue.config.js │ │ │ └── vue3 │ │ │ │ ├── .gitignore │ │ │ │ ├── .npmrc │ │ │ │ ├── README.md │ │ │ │ ├── babel.config.js │ │ │ │ ├── jsconfig.json │ │ │ │ ├── package.json │ │ │ │ ├── public │ │ │ │ ├── favicon.ico │ │ │ │ └── index.html │ │ │ │ ├── src │ │ │ │ ├── App.vue │ │ │ │ ├── assets │ │ │ │ │ └── logo.png │ │ │ │ ├── components │ │ │ │ │ └── HelloWorld.vue │ │ │ │ └── main.js │ │ │ │ └── vue.config.js │ │ ├── index.html │ │ ├── package.json │ │ ├── patches │ │ │ └── vue-template-compiler+2.6.14.patch │ │ ├── pnpm-lock.yaml │ │ ├── public │ │ │ └── favicon.ico │ │ ├── scripts │ │ │ ├── copy.js │ │ │ ├── postinstall.js │ │ │ └── util.js │ │ ├── src │ │ │ ├── App.vue │ │ │ ├── assets │ │ │ │ └── logo.png │ │ │ ├── components │ │ │ │ └── index.vue │ │ │ ├── env.d.ts │ │ │ ├── index.ts │ │ │ └── main.ts │ │ ├── tsconfig.json │ │ ├── tsconfig.node.json │ │ ├── vite.config.ts │ │ ├── vite.config.vue2.ts │ │ └── vite.config.vue3.ts │ ├── glitch │ │ ├── .gitignore │ │ ├── .vscode │ │ │ └── extensions.json │ │ ├── README.md │ │ ├── examples │ │ │ ├── vue2 │ │ │ │ ├── .gitignore │ │ │ │ ├── .npmrc │ │ │ │ ├── README.md │ │ │ │ ├── babel.config.js │ │ │ │ ├── jsconfig.json │ │ │ │ ├── package.json │ │ │ │ ├── public │ │ │ │ │ ├── favicon.ico │ │ │ │ │ └── index.html │ │ │ │ ├── src │ │ │ │ │ ├── App.vue │ │ │ │ │ ├── assets │ │ │ │ │ │ └── logo.png │ │ │ │ │ └── main.js │ │ │ │ └── vue.config.js │ │ │ └── vue3 │ │ │ │ ├── .gitignore │ │ │ │ ├── .npmrc │ │ │ │ ├── README.md │ │ │ │ ├── babel.config.js │ │ │ │ ├── jsconfig.json │ │ │ │ ├── package.json │ │ │ │ ├── public │ │ │ │ ├── favicon.ico │ │ │ │ └── index.html │ │ │ │ ├── src │ │ │ │ ├── App.vue │ │ │ │ ├── assets │ │ │ │ │ └── logo.png │ │ │ │ ├── components │ │ │ │ │ └── HelloWorld.vue │ │ │ │ └── main.js │ │ │ │ └── vue.config.js │ │ ├── index.html │ │ ├── package.json │ │ ├── patches │ │ │ └── vue-template-compiler+2.6.14.patch │ │ ├── pnpm-lock.yaml │ │ ├── public │ │ │ └── favicon.ico │ │ ├── scripts │ │ │ ├── copy.js │ │ │ ├── postinstall.js │ │ │ └── util.js │ │ ├── src │ │ │ ├── App.vue │ │ │ ├── assets │ │ │ │ └── logo.png │ │ │ ├── components │ │ │ │ └── index.vue │ │ │ ├── env.d.ts │ │ │ ├── index.ts │ │ │ └── main.ts │ │ ├── tsconfig.json │ │ ├── tsconfig.node.json │ │ ├── vite.config.ts │ │ ├── vite.config.vue2.ts │ │ └── vite.config.vue3.ts │ └── hexagon │ │ ├── .gitignore │ │ ├── .vscode │ │ └── extensions.json │ │ ├── README.md │ │ ├── examples │ │ ├── vue2 │ │ │ ├── .gitignore │ │ │ ├── .npmrc │ │ │ ├── README.md │ │ │ ├── babel.config.js │ │ │ ├── jsconfig.json │ │ │ ├── package.json │ │ │ ├── public │ │ │ │ ├── favicon.ico │ │ │ │ └── index.html │ │ │ ├── src │ │ │ │ ├── App.vue │ │ │ │ ├── assets │ │ │ │ │ └── logo.png │ │ │ │ └── main.js │ │ │ └── vue.config.js │ │ └── vue3 │ │ │ ├── .gitignore │ │ │ ├── .npmrc │ │ │ ├── README.md │ │ │ ├── babel.config.js │ │ │ ├── jsconfig.json │ │ │ ├── package.json │ │ │ ├── public │ │ │ ├── favicon.ico │ │ │ └── index.html │ │ │ ├── src │ │ │ ├── App.vue │ │ │ ├── assets │ │ │ │ └── logo.png │ │ │ ├── components │ │ │ │ └── HelloWorld.vue │ │ │ └── main.js │ │ │ └── vue.config.js │ │ ├── index.html │ │ ├── package.json │ │ ├── patches │ │ └── vue-template-compiler+2.6.14.patch │ │ ├── pnpm-lock.yaml │ │ ├── public │ │ └── favicon.ico │ │ ├── scripts │ │ ├── copy.js │ │ ├── postinstall.js │ │ └── util.js │ │ ├── src │ │ ├── App.vue │ │ ├── assets │ │ │ └── logo.png │ │ ├── components │ │ │ └── index.vue │ │ ├── env.d.ts │ │ ├── index.ts │ │ └── main.ts │ │ ├── tsconfig.json │ │ ├── tsconfig.node.json │ │ ├── vite.config.ts │ │ ├── vite.config.vue2.ts │ │ └── vite.config.vue3.ts ├── image │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package.json │ ├── patches │ │ └── vue-template-compiler+2.6.14.patch │ ├── public │ │ └── favicon.ico │ ├── scripts │ │ ├── copy.js │ │ ├── gentype.js │ │ ├── postinstall.js │ │ └── util.js │ ├── src │ │ ├── App.vue │ │ ├── assets │ │ │ └── logo.png │ │ ├── components │ │ │ ├── ImageComponent.tsx │ │ │ ├── index.tsx │ │ │ └── style.module.scss │ │ ├── composables │ │ │ ├── default-image-provider.ts │ │ │ ├── lazy.ts │ │ │ ├── merge-options.ts │ │ │ └── responsive.ts │ │ ├── env.d.ts │ │ ├── index.ts │ │ ├── interface.ts │ │ └── main.ts │ ├── tsconfig.json │ ├── tsconfig.node.json │ ├── vite-plugin-vue2-transition.ts │ ├── vite.config.ts │ ├── vite.config.vue2.ts │ └── vite.config.vue3.ts ├── services │ ├── fastly │ │ └── index.ts │ ├── fp │ │ └── index.ts │ ├── imagekit │ │ └── index.ts │ ├── index.ts │ ├── package.json │ ├── qiniu │ │ └── index.ts │ ├── tsconfig.json │ ├── upyun │ │ └── index.ts │ └── vite.config.ts └── transition │ ├── .gitignore │ ├── .vscode │ └── extensions.json │ ├── README.md │ ├── examples │ ├── vue2 │ │ ├── .gitignore │ │ ├── .npmrc │ │ ├── README.md │ │ ├── babel.config.js │ │ ├── jsconfig.json │ │ ├── package.json │ │ ├── public │ │ │ ├── favicon.ico │ │ │ └── index.html │ │ ├── src │ │ │ ├── App.vue │ │ │ ├── assets │ │ │ │ └── logo.png │ │ │ └── main.js │ │ └── vue.config.js │ └── vue3 │ │ ├── .gitignore │ │ ├── .npmrc │ │ ├── README.md │ │ ├── babel.config.js │ │ ├── jsconfig.json │ │ ├── package.json │ │ ├── public │ │ ├── favicon.ico │ │ └── index.html │ │ ├── src │ │ ├── App.vue │ │ ├── assets │ │ │ └── logo.png │ │ ├── components │ │ │ └── HelloWorld.vue │ │ └── main.js │ │ └── vue.config.js │ ├── index.html │ ├── package.json │ ├── patches │ └── vue-template-compiler+2.6.14.patch │ ├── pnpm-lock.yaml │ ├── public │ └── favicon.ico │ ├── scripts │ ├── copy.js │ ├── postinstall.js │ └── util.js │ ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ ├── components │ │ └── Transition.vue │ ├── env.d.ts │ ├── index.ts │ ├── main.ts │ └── transitions.ts │ ├── tsconfig.json │ ├── tsconfig.node.json │ ├── vite.config.ts │ ├── vite.config.vue2.ts │ └── vite.config.vue3.ts ├── pnpm-lock.yaml ├── pnpm-workspace.yaml ├── tsconfig.json ├── tsconfig.node.json └── utils └── install.ts /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@antfu", 3 | "rules": { 4 | "curly": "off", 5 | "vue/html-self-closing": "off", 6 | "no-console": "off", 7 | "no-unused-vars": "off", 8 | "@typescript-eslint/no-unused-vars": "off", 9 | "react/display-name": "off" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | * text=auto eol=lf -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | examples/vue3/node_modules 12 | dist 13 | dist-ssr 14 | *.local 15 | 16 | # Editor directories and files 17 | .vscode/* 18 | !.vscode/extensions.json 19 | .idea 20 | .DS_Store 21 | *.suo 22 | *.ntvs* 23 | *.njsproj 24 | *.sln 25 | *.sw? 26 | 27 | .history 28 | 29 | .nuxt3 30 | .output 31 | -------------------------------------------------------------------------------- /demo/.eslintignore: -------------------------------------------------------------------------------- 1 | dist 2 | node_modules 3 | .output 4 | .nuxt 5 | generated 6 | -------------------------------------------------------------------------------- /demo/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@antfu", 3 | "rules": { 4 | "no-console": "off", 5 | "no-unused-vars": "warn", 6 | "@typescript-eslint/no-unused-vars": "warn" 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /demo/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | *.log 3 | dist 4 | .output 5 | .nuxt 6 | .env 7 | .history 8 | .serverless -------------------------------------------------------------------------------- /demo/.npmrc: -------------------------------------------------------------------------------- 1 | shamefully-hoist=true 2 | -------------------------------------------------------------------------------- /demo/.stackblitzrc: -------------------------------------------------------------------------------- 1 | { 2 | "installDependencies": true, 3 | "startCommand": "npm run dev" 4 | } 5 | -------------------------------------------------------------------------------- /demo/app.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 22 | 23 | 26 | -------------------------------------------------------------------------------- /demo/assets/images/nuxt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbeea/awesome-image/397ab12b7c72fb66fe117e62ff16ee0f91adb11e/demo/assets/images/nuxt.png -------------------------------------------------------------------------------- /demo/assets/svgs/apollo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /demo/assets/svgs/en.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /demo/codegen.yml: -------------------------------------------------------------------------------- 1 | 2 | documents: graphql/**/*.graphql 3 | generates: 4 | generated/schema.d.ts: 5 | plugins: 6 | - typescript 7 | generated/operations.ts: 8 | config: 9 | documentMode: documentNode 10 | plugins: 11 | - typescript 12 | - typescript-operations 13 | - typescript-vue-apollo 14 | -------------------------------------------------------------------------------- /demo/components/DarkToggle.vue: -------------------------------------------------------------------------------- 1 | 5 | 6 | 12 | -------------------------------------------------------------------------------- /demo/components/Footer.vue: -------------------------------------------------------------------------------- 1 | 4 | 24 | -------------------------------------------------------------------------------- /demo/components/Highlight.vue: -------------------------------------------------------------------------------- 1 | 14 | 26 | 45 | -------------------------------------------------------------------------------- /demo/components/SvgIcon.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 32 | -------------------------------------------------------------------------------- /demo/composables/locale.ts: -------------------------------------------------------------------------------- 1 | import { useI18n } from 'vue-i18n' 2 | import { useNuxtApp } from '#app' 3 | export function useLocal() { 4 | const { locale } = useI18n() 5 | 6 | const currentLocale = useCookie('locale', { maxAge: 20 * 365 * 24 * 60 * 60 }) 7 | 8 | const setLocale = (l: string) => { 9 | currentLocale.value = l 10 | locale.value = l 11 | } 12 | 13 | const setPreferredLanguage = () => { 14 | if (!currentLocale.value) { 15 | if (process.server) { 16 | const nuxtApp = useNuxtApp() 17 | if (nuxtApp.ssrContext?.req?.headers) { 18 | const acceptLanguage = nuxtApp.ssrContext.req.headers['accept-language'] || 'en' 19 | const preferredLanguage = acceptLanguage.split(',')[0] 20 | setLocale(preferredLanguage) 21 | } 22 | } 23 | } 24 | else { 25 | setLocale(currentLocale.value) 26 | } 27 | } 28 | 29 | return { 30 | setPreferredLanguage, 31 | setLocale, 32 | locale, 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /demo/netlify.toml: -------------------------------------------------------------------------------- 1 | [build.environment] 2 | NPM_FLAGS = "--version" 3 | NODE_VERSION = "16" 4 | 5 | [build] 6 | publish = "dist" 7 | command = "yarn run build" 8 | 9 | [[redirects]] 10 | from = "/*" 11 | to = "/index.html" 12 | status = 200 13 | -------------------------------------------------------------------------------- /demo/nuxt.config.ts: -------------------------------------------------------------------------------- 1 | import path from 'path' 2 | import { defineNuxtConfig } from 'nuxt3' 3 | 4 | import viteSvgIcons from 'vite-plugin-svg-icons' 5 | export default defineNuxtConfig({ 6 | app: { 7 | // cdnURL: 'https://d17a2275ko4nj4.cloudfront.net', // upload .output/server/public to cdn when using serverless 8 | }, 9 | css: [ 10 | // '@awesome-image/image/dist/style.css', 11 | ], 12 | buildModules: [ 13 | '@vueuse/nuxt', 14 | '@unocss/nuxt', 15 | '@pinia/nuxt', 16 | '@intlify/nuxt3', 17 | ], 18 | build: { 19 | transpile: ['@awesome-image/image', '@awesome-image/transition', '@awesome-image/filter-fake3d', '@awesome-image/filter-glitch', '@icon-park/vue-next'], 20 | }, 21 | unocss: { 22 | uno: true, 23 | attributify: true, 24 | preflight: true, 25 | icons: { 26 | scale: 1.2, 27 | }, 28 | rules: [ 29 | ['text-apollo', { color: '#112B49' }], 30 | ], 31 | shortcuts: [ 32 | ['btn', 'px-4 py-1 rounded inline-block bg-teal-600 text-white cursor-pointer hover:bg-teal-700 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50'], 33 | ], 34 | }, 35 | vite: { 36 | server: { 37 | watch: { 38 | usePolling: true, 39 | }, 40 | }, 41 | plugins: [ 42 | viteSvgIcons({ 43 | iconDirs: [path.resolve(process.cwd(), 'assets/svgs/')], 44 | symbolId: 'icon-[dir]-[name]', 45 | }), 46 | ], 47 | }, 48 | intlify: { 49 | localeDir: 'locales', // set the `locales` directory at source directory of your Nuxt application 50 | vueI18n: { 51 | }, 52 | }, 53 | }) 54 | -------------------------------------------------------------------------------- /demo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "scripts": { 4 | "build": "nuxi build", 5 | "build:sls": "cross-env NITRO_PRESET=lambda nuxi build", 6 | "deploy": "serverless deploy", 7 | "domain": "serverless create_domain", 8 | "dev": "nuxi dev", 9 | "start": "node .output/server/index.mjs" 10 | }, 11 | "dependencies": { 12 | "@awesome-image/filter-fake3d": "^1.0.21", 13 | "@awesome-image/filter-glitch": "^0.0.0", 14 | "@awesome-image/image": "^0.0.7", 15 | "@awesome-image/services": "^0.0.0", 16 | "@awesome-image/transition": "^0.0.4", 17 | "@iconify-json/carbon": "^1.1.2", 18 | "@iconify-json/twemoji": "^1.1.2", 19 | "@intlify/nuxt3": "^0.1.10", 20 | "@vue/composition-api": "^1.4.3", 21 | "class-validator": "^0.13.2", 22 | "highlight.js": "^11.5.0", 23 | "pinia": "^2.0.6", 24 | "unenv": "^0.4.3" 25 | }, 26 | "devDependencies": { 27 | "@antfu/eslint-config": "^0.13.1", 28 | "@icon-park/vue-next": "^1.3.6", 29 | "@nuxt/kit": "npm:@nuxt/kit-edge@3.0.0-27454426.4cefce4", 30 | "@pinia/nuxt": "^0.1.6", 31 | "@unocss/nuxt": "^0.16.4", 32 | "@vueuse/nuxt": "^7.3.0", 33 | "cross-env": "^7.0.3", 34 | "eslint": "^8.4.1", 35 | "nuxt3": "3.0.0-27454426.4cefce4", 36 | "sass": "^1.49.9", 37 | "serverless": "^3.2.1", 38 | "serverless-domain-manager": "^6.0.2", 39 | "typescript": "^4.5.4", 40 | "vite-plugin-svg-icons": "^1.0.5" 41 | }, 42 | "resolutions": { 43 | "vite": "2.7.13", 44 | "@nuxt/kit": "npm:@nuxt/kit-edge@3.0.0-27454426.4cefce4" 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /demo/pages/index.vue: -------------------------------------------------------------------------------- 1 | 13 | -------------------------------------------------------------------------------- /demo/plugins/as-image.ts: -------------------------------------------------------------------------------- 1 | 2 | import { AsImage } from '@awesome-image/image' 3 | import { imageUrlGeneratorFP } from '@awesome-image/services' 4 | 5 | // @ts-expect-error #app resolved by Nuxt3 6 | import type { NuxtApp } from '#app' 7 | import { defineNuxtPlugin } from '#app' 8 | export default defineNuxtPlugin((nuxt: NuxtApp) => { 9 | nuxt.vueApp.use(AsImage, { 10 | imageUrlGenerator: imageUrlGeneratorFP, 11 | }) 12 | }) 13 | -------------------------------------------------------------------------------- /demo/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbeea/awesome-image/397ab12b7c72fb66fe117e62ff16ee0f91adb11e/demo/public/favicon.ico -------------------------------------------------------------------------------- /demo/sandbox.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "infiniteLoopProtection": true, 3 | "hardReloadOnChange": false, 4 | "view": "browser", 5 | "template": "nuxt", 6 | "container": { 7 | "node": "14" 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /demo/serverless.yml: -------------------------------------------------------------------------------- 1 | service: nuxt3-ssr 2 | 3 | # custom: 4 | # customDomain: 5 | # http: 6 | # domainName: ssr-sls.youbefashion.com 7 | # endpointType: regional 8 | # certificateName: youbefashion.com 9 | # createRoute53Record: true 10 | # plugins: 11 | # - serverless-domain-manager 12 | 13 | provider: 14 | name: aws 15 | lambdaHashingVersion: 20201221 16 | 17 | 18 | 19 | package: 20 | individually: true 21 | 22 | functions: 23 | ssr: 24 | handler: .output/server/index.handler 25 | runtime: nodejs14.x 26 | memorySize: 256 27 | package: 28 | exclude: 29 | - ./** 30 | include: 31 | - ./.output/server/** 32 | events: 33 | - httpApi: '*' 34 | -------------------------------------------------------------------------------- /demo/stores/user.ts: -------------------------------------------------------------------------------- 1 | import { acceptHMRUpdate, defineStore } from 'pinia' 2 | 3 | export const useUserStore = defineStore('user', () => { 4 | /** 5 | * Current named of the user. 6 | */ 7 | const savedName = ref('') 8 | const previousNames = ref(new Set()) 9 | 10 | const usedNames = computed(() => Array.from(previousNames.value)) 11 | const otherNames = computed(() => usedNames.value.filter(name => name !== savedName.value)) 12 | 13 | /** 14 | * Changes the current name of the user and saves the one that was used 15 | * before. 16 | * 17 | * @param name - new name to set 18 | */ 19 | function setNewName(name: string) { 20 | if (savedName.value) 21 | previousNames.value.add(savedName.value) 22 | 23 | savedName.value = name 24 | } 25 | 26 | return { 27 | setNewName, 28 | otherNames, 29 | savedName, 30 | } 31 | }) 32 | 33 | if (import.meta.hot) 34 | import.meta.hot.accept(acceptHMRUpdate(useUserStore, import.meta.hot)) 35 | -------------------------------------------------------------------------------- /demo/styles/main.css: -------------------------------------------------------------------------------- 1 | html, 2 | body, 3 | #app { 4 | margin: 0; 5 | padding: 0; 6 | } 7 | 8 | html.dark { 9 | background: #222; 10 | color: white; 11 | } 12 | svg { 13 | display: unset; 14 | } -------------------------------------------------------------------------------- /demo/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./.nuxt/tsconfig.json", 3 | "compilerOptions": { 4 | "lib": ["esnext", "esnext.asynciterable"], 5 | "emitDecoratorMetadata": true, 6 | "esModuleInterop": true, 7 | "experimentalDecorators": true 8 | } 9 | 10 | } 11 | -------------------------------------------------------------------------------- /docs/.env.example: -------------------------------------------------------------------------------- 1 | 2 | # Create one with no scope selected on https://github.com/settings/tokens/new 3 | GITHUB_TOKEN=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 4 | -------------------------------------------------------------------------------- /docs/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | *.iml 3 | .idea 4 | *.log* 5 | .nuxt 6 | .vscode 7 | .DS_Store 8 | coverage 9 | dist 10 | sw.* 11 | .env 12 | -------------------------------------------------------------------------------- /docs/README.md: -------------------------------------------------------------------------------- 1 | # vue-awesome-image-website 2 | 3 | ## Setup 4 | 5 | Install dependencies: 6 | 7 | ```bash 8 | yarn install 9 | ``` 10 | 11 | ## Development 12 | 13 | ```bash 14 | yarn dev 15 | ``` 16 | 17 | ## Static Generation 18 | 19 | This will create the `dist/` directory for publishing to static hosting: 20 | 21 | ```bash 22 | yarn generate 23 | ``` 24 | 25 | To preview the static generated app, run `yarn start` 26 | 27 | For detailed explanation on how things work, checkout [nuxt/content](https://content.nuxtjs.org) and [@nuxt/content theme docs](https://content.nuxtjs.org/themes-docs). 28 | -------------------------------------------------------------------------------- /docs/components/AppFooter.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 24 | -------------------------------------------------------------------------------- /docs/components/AppLangSwitcher.vue: -------------------------------------------------------------------------------- 1 | 26 | 27 | 36 | -------------------------------------------------------------------------------- /docs/components/global/Banner.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 28 | -------------------------------------------------------------------------------- /docs/components/global/Fake3d.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 31 | -------------------------------------------------------------------------------- /docs/content/en/filter/introduction.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Introduction 3 | description: '' 4 | position: 11 5 | category: Webgl Filter 6 | --- 7 | Using the filter component as `AsImage`'s filter slot, you can achieve a variety of cool image processing effects. 8 | 9 | 10 | For example, Fake 3D effect `@awesome-image/filter-fake3d`, where you move the mouse over an image to see the effect 11 | 12 | 13 | 14 | 15 | 16 | 17 | ## Features 18 | 19 | - WebGL Filter —— Achieve a variety of image processing effect, support dynamic, static effect 20 | - Filter library —— Many filters [More](/filter/lib) 21 | - Custom filters —— you can customize `WebGL shader` to implement custom filters [More](/filter/custom) 22 | 23 | 24 | -------------------------------------------------------------------------------- /docs/content/en/transition/gl-transition.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: GLTransitions 3 | description: '' 4 | position: 9 5 | category: Webgl Transition 6 | --- 7 | 8 | [GLTransitions](https://gl-transitions.com/) is an open source WebGL transition library that contains a large number of transitions, all of which can be used in `AsTransition` 9 | 10 | ## Install 11 | 12 | 13 | 14 | 15 | ```bash 16 | yarn add gl-transitions 17 | ``` 18 | 19 | 20 | 21 | 22 | ```bash 23 | 24 | ``` 25 | 26 | 27 | 28 | 29 | 30 | ## Usage 31 | ### `transition` 32 | - Assign GLTransitions[x].glsl to `shader` 33 | - Assign GLTransitions[x].defaultParams to `uniforms`, the parameters can be modified according to the requirements 34 | 35 | ```js 36 | export interface Transition { 37 | shader?: string 38 | uniforms?: Record 39 | } 40 | ``` 41 | ```html 42 | 45 | 54 | ``` 55 | ### Example 56 | Click to change transition effects 57 | 58 | 59 | -------------------------------------------------------------------------------- /docs/content/en/transition/introduction.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Introduction 3 | description: '' 4 | position: 5 5 | category: Webgl Transition 6 | 7 | --- 8 | 9 | 10 | 11 | `AsTransition` is a Webgl transition component, which wraps multiple `AsImage` components to apply all sorts of cool image transition effects 12 | 13 | ## Features 14 | 15 | - WebGL effects —— Unlike CSS animations, WebGL can support even cooler transitions 16 | - Built-in effects —— Many built-in transition effects [More](/transition/build-in) 17 | - GLTransitions —— Support open source WebGL transition libraries [GLTransitions](https://gl-transitions.com/) [More](/transition/gl-transition) 18 | - Custom transition —— you can customize `WebGL shader` to implement custom transition [详见](/transition/custom) 19 | 20 | 21 | -------------------------------------------------------------------------------- /docs/content/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Awesome Image", 3 | "url": "awesome-image.vercel.com", 4 | "logo": { 5 | "light": "/logo.svg", 6 | "dark": "/logo.svg" 7 | }, 8 | "github": "newbeea/awesome-image" 9 | } -------------------------------------------------------------------------------- /docs/content/zh/filter/introduction.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 介绍 3 | description: '' 4 | position: 11 5 | category: Webgl Filter 6 | features: 7 | - WebGL滤镜 —— 利用 `WebGL` 实现各种图片处理效果，支持动态、静态效果 8 | - 内置滤镜 —— 内置多种滤镜 9 | - 自定义滤镜 —— 可以自定义 WebGL shader 实现自定义滤镜 10 | --- 11 | 利用滤镜组件作为 `AsImage` 组件的滤镜插槽子组件，可以实现各种酷炫的图片处理效果。 12 | 13 | 14 | 例如伪3D效果 @awesome-image/filter-fake3d，用鼠标在图片上移动查看效果。 15 | 16 | 17 | 18 | 19 | 20 | 21 | ## 特性 22 | 23 | - WebGL滤镜 —— 利用 `WebGL` 实现各种图片处理效果，支持动态、静态效果 24 | - 滤镜库 —— 滤镜库多种滤镜 [详见](/filter/lib) 25 | - 自定义滤镜 —— 可以自定义 WebGL shader 实现自定义滤镜 [详见](/filter/custom) 26 | 27 | 28 | -------------------------------------------------------------------------------- /docs/content/zh/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 介绍 3 | description: 'AwesomeImage 是一个支持 `懒加载` / `渐进加载` / `响应加载` / `自动webp`、兼容 `vue2` / `vue3` / `nuxt` 的通用图片组件，可搭配内置或自定义WebGL滤镜组件、WebGL过渡组件实现更酷炫的图片展示或按钮效果' 4 | position: 1 5 | category: 'Awesome Image' 6 | 7 | --- 8 | 9 | 10 | AwesomeImage WebGL Filter: @awesome-image/filter-glitch 11 | 12 | 13 | AwesomeImage 是一个支持 `懒加载` / `渐进加载` / `响应加载` / `自动webp`、兼容 `vue2` / `vue3` / `nuxt` 的通用图片组件。 14 | 15 | 另外可搭配官方WebGL滤镜库或自定义WebGL滤镜组件、WebGL过渡组件实现更酷炫的图片展示或按钮效果。 16 | 17 | ## 特性 18 | 19 | - 懒加载 —— 分别设置图片和placeholder加载时机 20 | - 响应式加载 —— 根据屏幕宽度加载不同尺寸图片 21 | - 渐进式加载 —— 加载宽度为48px模糊缩率图作为placeholder，并且加载过程平滑过渡 22 | - SSR —— 支持服务端渲染，对于首屏图片指定非懒加载，可以在 `注水` 前加载图片，并兼容渐进效果，提升首屏加载体验 23 | - webp兼容 —— 使用不支持自动webp的图片服务时，可以使用autoWebp参数添加webp兼容写法 24 | - WebGL滤镜 —— 可以在图片组件AsImage内使用滤镜组件，支持自定义WebGL图片处理效果 [详见](/filter/introduction) 25 | - 轮播过渡 —— 可以使用轮播图片过渡组件AsTransition，支持[GLTransitions](https://gl-transitions.com/)过渡效果，支持自定义WebGL图片过渡效果 [详见](/transition/introduction) 26 | - 自定义图片处理 —— @awesome-image/services内置fastly、upyun等图片处理规则，可自由定制其他图片url转换函数 [详见](/url) 27 | 28 | ## 效果 29 | ### 懒加载 / 渐进加载 / 响应加载 / SSR 30 | 31 | 32 | ### WebGL滤镜 (@awesome-image/filter-fake3d) 33 | 34 | 35 | ### WebGL过渡 36 | 37 | 38 | ## Demo 39 | [Demo](https://awesome-image-demo.vercel.app) 40 | 41 | -------------------------------------------------------------------------------- /docs/content/zh/transition/custom.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 自定义过渡效果 3 | description: '' 4 | position: 10 5 | category: Webgl Transition 6 | --- 7 | 8 | 参考 `GLTransitions` 你可以很方便的实现自己的过渡效果。 9 | 10 | 11 | ## 实现 12 | ### 接口 13 | 14 | ```js 15 | export interface Transition { 16 | shader?: string 17 | uniforms?: Record 18 | } 19 | ``` 20 | ### 概念 21 | #### shader 22 | `fragment shader` 代码，完成过渡效果 23 | - 定义变量， 常量或声明 `uniform` 变量 24 | - `vec4 transition(vec2 uv)` 定义过渡函数 25 | - 参数 `uv`： 图片每个点坐标 26 | - 内置 `getFromColor` 函数： 获取当前图 `uv` 坐标点像素值 27 | - 内置 `getToColor` 函数：获取目标图 `uv` 坐标点像素值 28 | - 内置 `uniform` 变量 29 | - `progress`： 切换进度 （0 - 1） 30 | - `next`： 切换方向，下一张为 `true`，上一张为 `false` 31 | 32 | #### uniforms 33 | - `shader` 中自定义的 `uniform` 变量 34 | 35 | 36 | 37 | 38 | ## 使用 39 | ### 使用 `next` `progress` 40 | ```html 41 | 61 | 67 | ``` 68 | ### 示例 69 | 向前和向后切换有不同效果 70 | 71 | 72 | -------------------------------------------------------------------------------- /docs/content/zh/transition/gl-transition.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: GLTransitions 3 | description: '' 4 | position: 9 5 | category: Webgl Transition 6 | --- 7 | 8 | [GLTransitions](https://gl-transitions.com/) 是开源的WebGL过渡效果库，包含大量过渡效果，所有效果都能在 `AsTransition` 中使用。 9 | 10 | ## 安装 11 | 12 | 13 | 14 | 15 | ```bash 16 | yarn add gl-transitions 17 | ``` 18 | 19 | 20 | 21 | 22 | ```bash 23 | 24 | ``` 25 | 26 | 27 | 28 | 29 | 30 | ## 使用 31 | ### `transition` 属性 32 | - 将GLTransitions[x].glsl 赋值给 `shader` 33 | - 将GLTransitions[x].defaultParams 赋值给 `uniforms`, 可根据需求修改参数 34 | 35 | ```js 36 | export interface Transition { 37 | shader?: string 38 | uniforms?: Record 39 | } 40 | ``` 41 | ```html 42 | 45 | 54 | ``` 55 | ### 示例 56 | 点击切换过渡效果 57 | 58 | 59 | -------------------------------------------------------------------------------- /docs/content/zh/transition/introduction.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 介绍 3 | description: '' 4 | position: 5 5 | category: Webgl Transition 6 | 7 | --- 8 | 9 | 10 | 11 | `AsTransition` 是 `Webgl` 过渡效果组件，用 `AsTransition` 包裹多个图片 `AsImage` 组件，可以实现各种酷炫的图片切换效果。 12 | 13 | ## 特性 14 | 15 | - WebGL特效 —— 不同于css动画方式，WebGL可以支持更酷炫的切换效果 16 | - 内置特效 —— 内置多种切换特效 [详见](/transition/build-in) 17 | - GLTransitions —— 支持开源WebGL过渡库 [GLTransitions](https://gl-transitions.com/) 中的过渡效果 [详见](/transition/gl-transition) 18 | - 自定义特效 —— 可以自定义 WebGL shader 实现自定义切换 [详见](/transition/custom) 19 | 20 | 21 | -------------------------------------------------------------------------------- /docs/nuxt.config.js: -------------------------------------------------------------------------------- 1 | import theme from '@nuxt/content-theme-docs' 2 | 3 | export default theme({ 4 | components: [ 5 | './components', // default level is 0 6 | { path: '~~/node_modules/@nuxt/content-theme-docs/src/components/', level: 1 }, 7 | ], 8 | docs: { 9 | }, 10 | css: ['~~/style.css'], 11 | i18n: { 12 | locales: () => [{ 13 | code: 'zh', 14 | iso: 'zh-CN', 15 | file: 'zh-CN.js', 16 | name: '中文', 17 | }, { 18 | code: 'en', 19 | iso: 'en-US', 20 | file: 'en-US.js', 21 | name: 'English', 22 | }], 23 | defaultLocale: 'en', 24 | }, 25 | buildModules: [ 26 | '@nuxtjs/composition-api/module', 27 | ], 28 | plugins: ['~~/plugins/as-image.js'], 29 | }) 30 | -------------------------------------------------------------------------------- /docs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-awesome-image-website", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "nuxt", 7 | "build": "nuxt build", 8 | "start": "nuxt start", 9 | "generate": "nuxt generate" 10 | }, 11 | "dependencies": { 12 | "@awesome-image/filter-fake3d": "^1.0.21", 13 | "@awesome-image/image": "^0.0.0", 14 | "@nuxt/content-theme-docs": "^0.11.0", 15 | "@nuxtjs/composition-api": "^0.32.0", 16 | "nuxt": "^2.15.8", 17 | "vue-demi": "^0.12.4" 18 | }, 19 | "devDependencies": { 20 | "@awesome-image/filter-ascii": "^0.0.0", 21 | "@awesome-image/filter-crt": "^0.0.0", 22 | "@awesome-image/filter-glitch": "^0.0.0", 23 | "@awesome-image/filter-hexagon": "^0.0.0", 24 | "@awesome-image/services": "^0.0.0", 25 | "@awesome-image/transition": "^0.0.4", 26 | "@gl-widget/gl-widget": "^1.1.3" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /docs/plugins/as-image.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import { AsImage } from '@awesome-image/image' 3 | import { imageUrlGeneratorFP } from '@awesome-image/services' 4 | import Glitch from '@awesome-image/filter-glitch' 5 | import Crt from '@awesome-image/filter-crt' 6 | import Ascii from '@awesome-image/filter-ascii' 7 | import Hexagon from '@awesome-image/filter-hexagon' 8 | import Fake3d from '@awesome-image/filter-fake3d' 9 | import '@awesome-image/image/dist/style.css' 10 | import { AsTransition } from '@awesome-image/transition' 11 | import '@awesome-image/transition/dist/style.css' 12 | Vue.use(AsImage, { 13 | imageUrlGenerator: imageUrlGeneratorFP, 14 | }) 15 | Vue.use(Glitch) 16 | Vue.use(Crt) 17 | Vue.use(Ascii) 18 | Vue.use(Hexagon) 19 | Vue.use(Fake3d) 20 | Vue.use(AsTransition) 21 | -------------------------------------------------------------------------------- /docs/static/banner-depth.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbeea/awesome-image/397ab12b7c72fb66fe117e62ff16ee0f91adb11e/docs/static/banner-depth.png -------------------------------------------------------------------------------- /docs/static/banner.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbeea/awesome-image/397ab12b7c72fb66fe117e62ff16ee0f91adb11e/docs/static/banner.jpg -------------------------------------------------------------------------------- /docs/static/fake3d.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbeea/awesome-image/397ab12b7c72fb66fe117e62ff16ee0f91adb11e/docs/static/fake3d.gif -------------------------------------------------------------------------------- /docs/static/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbeea/awesome-image/397ab12b7c72fb66fe117e62ff16ee0f91adb11e/docs/static/icon.png -------------------------------------------------------------------------------- /docs/static/mount-map.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbeea/awesome-image/397ab12b7c72fb66fe117e62ff16ee0f91adb11e/docs/static/mount-map.jpg -------------------------------------------------------------------------------- /docs/static/mount.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbeea/awesome-image/397ab12b7c72fb66fe117e62ff16ee0f91adb11e/docs/static/mount.jpg -------------------------------------------------------------------------------- /docs/static/preview-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbeea/awesome-image/397ab12b7c72fb66fe117e62ff16ee0f91adb11e/docs/static/preview-dark.png -------------------------------------------------------------------------------- /docs/static/preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbeea/awesome-image/397ab12b7c72fb66fe117e62ff16ee0f91adb11e/docs/static/preview.png -------------------------------------------------------------------------------- /docs/static/show.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbeea/awesome-image/397ab12b7c72fb66fe117e62ff16ee0f91adb11e/docs/static/show.gif -------------------------------------------------------------------------------- /docs/static/transition.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbeea/awesome-image/397ab12b7c72fb66fe117e62ff16ee0f91adb11e/docs/static/transition.gif -------------------------------------------------------------------------------- /docs/style.css: -------------------------------------------------------------------------------- 1 | a[aria-label="Awesome Image Logo"] img { 2 | height: 6rem; 3 | } 4 | .prose img { 5 | margin-top: unset; 6 | margin-bottom: unset; 7 | } 8 | .banner { 9 | width: 100%; 10 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@vue-awesome-image/monorepo", 3 | "publishConfig": { 4 | "access": "public" 5 | }, 6 | "version": "1.0.2", 7 | "description": "", 8 | "main": "index.js", 9 | "scripts": { 10 | "build": "pnpm run build:s && pnpm run build:i && pnpm run build:t", 11 | "build:i": "pnpm -C ./packages/image build", 12 | "build:t": "pnpm -C ./packages/transition build", 13 | "build:s": "pnpm -C ./packages/services build", 14 | "test": "echo \"Error: no test specified\" && exit 1" 15 | }, 16 | "author": "", 17 | "dependencies": { 18 | "@vue/composition-api": "^1.4.9", 19 | "vue-demi": "^0.12.1", 20 | "vue-template-compiler": "^2.6.14" 21 | }, 22 | "devDependencies": { 23 | "@antfu/eslint-config": "^0.16.1", 24 | "@types/node": "^17.0.21", 25 | "@vitejs/plugin-vue": "^2.2.0", 26 | "@vitejs/plugin-vue-jsx": "^1.3.8", 27 | "eslint": "^8.10.0", 28 | "patch-package": "^6.4.7", 29 | "sass": "^1.49.9", 30 | "typescript": "^4.5.4", 31 | "vite": "^2.8.0", 32 | "vite-plugin-vue2": "^1.9.3", 33 | "vue": "^3.2.25", 34 | "vue-tsc": "^0.29.8", 35 | "vue2": "npm:vue@2" 36 | }, 37 | "license": "ISC" 38 | } 39 | -------------------------------------------------------------------------------- /packages/filters/ascii/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | examples/vue3/node_modules 12 | dist 13 | dist-ssr 14 | *.local 15 | 16 | # Editor directories and files 17 | .vscode/* 18 | !.vscode/extensions.json 19 | .idea 20 | .DS_Store 21 | *.suo 22 | *.ntvs* 23 | *.njsproj 24 | *.sln 25 | *.sw? 26 | 27 | .history 28 | -------------------------------------------------------------------------------- /packages/filters/ascii/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["johnsoncodehk.volar"] 3 | } 4 | -------------------------------------------------------------------------------- /packages/filters/ascii/README.md: -------------------------------------------------------------------------------- 1 | # Universal vue component template 2 | - Building Universal Vue Libraries for Vue 2 & 3 3 | - Using vue-demi but you don't need to write "render" function, "template" and "tsx" are supported! 4 | 5 | ## Usage 6 | ### Use this template or clone it 7 | ### Install 8 | ``` 9 | yarn 10 | ``` 11 | ### Develop 12 | ``` 13 | yarn run dev 14 | ``` 15 | ### Build 16 | ``` 17 | yarn run build 18 | ``` 19 | ### Publish 20 | Change package name, publish and install it to test in vue2/3 21 | 22 | If you want to use 'npm link' project locally, you need to edit "package.module" "package.main" according to vue version. 23 | ``` 24 | // vue2 25 | { 26 | "name": "your-component", 27 | "module": "./dist/vue2/index.es.js", 28 | "main": "./dist/vue2/index.umd.js", 29 | ... 30 | } 31 | ``` 32 | ``` 33 | // vue3 34 | { 35 | "name": "your-component", 36 | "module": "./dist/vue3/index.es.js", 37 | "main": "./dist/vue3/index.umd.js", 38 | ... 39 | } 40 | ``` 41 | 42 | ## Example 43 | Install 'universal-vue-template' which built by this template in vue2 or vue3, it will work correctly. 44 | ``` 45 | yarn add universal-vue-template 46 | ``` 47 | 48 | ``` 49 | import Universal from 'universal-vue-template' 50 | import 'universal-vue-template/dist/style.css' 51 | ``` 52 | 53 | Vue2 example 54 | [src](https://github.com/newbeea/universal-vue-component-template/tree/master/examples/vue2) 55 | [preview](https://universal-vue-component-2.vercel.app/) 56 | 57 | Vue3 example 58 | [src](https://github.com/newbeea/universal-vue-component-template/tree/master/examples/vue3) 59 | [preview](https://universal-vue-component-3.vercel.app/) 60 | -------------------------------------------------------------------------------- /packages/filters/ascii/examples/vue2/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | 6 | # local env files 7 | .env.local 8 | .env.*.local 9 | 10 | # Log files 11 | npm-debug.log* 12 | yarn-debug.log* 13 | yarn-error.log* 14 | pnpm-debug.log* 15 | 16 | # Editor directories and files 17 | .idea 18 | .vscode 19 | *.suo 20 | *.ntvs* 21 | *.njsproj 22 | *.sln 23 | *.sw? 24 | -------------------------------------------------------------------------------- /packages/filters/ascii/examples/vue2/.npmrc: -------------------------------------------------------------------------------- 1 | shamefully-hoist=true 2 | -------------------------------------------------------------------------------- /packages/filters/ascii/examples/vue2/README.md: -------------------------------------------------------------------------------- 1 | # vue2-test 2 | 3 | ## Project setup 4 | ``` 5 | pnpm install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | pnpm run serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | pnpm run build 16 | ``` 17 | 18 | ### Lints and fixes files 19 | ``` 20 | pnpm run lint 21 | ``` 22 | 23 | ### Customize configuration 24 | See [Configuration Reference](https://cli.vuejs.org/config/). 25 | -------------------------------------------------------------------------------- /packages/filters/ascii/examples/vue2/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /packages/filters/ascii/examples/vue2/jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "esnext", 5 | "baseUrl": "./", 6 | "moduleResolution": "node", 7 | "paths": { 8 | "@/*": [ 9 | "src/*" 10 | ] 11 | }, 12 | "lib": [ 13 | "esnext", 14 | "dom", 15 | "dom.iterable", 16 | "scripthost" 17 | ] 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /packages/filters/ascii/examples/vue2/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue2-test", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "core-js": "^3.8.3", 12 | "universal-vue-template": "^0.0.4", 13 | "vue": "^2.6.14" 14 | }, 15 | "devDependencies": { 16 | "@babel/core": "^7.12.16", 17 | "@babel/eslint-parser": "^7.12.16", 18 | "@vue/cli-plugin-babel": "~5.0.0", 19 | "@vue/cli-plugin-eslint": "~5.0.0", 20 | "@vue/cli-service": "~5.0.0", 21 | "eslint": "^7.32.0", 22 | "eslint-plugin-vue": "^8.0.3", 23 | "vue-template-compiler": "^2.6.14" 24 | }, 25 | "eslintConfig": { 26 | "root": true, 27 | "env": { 28 | "node": true 29 | }, 30 | "extends": [ 31 | "plugin:vue/essential", 32 | "eslint:recommended" 33 | ], 34 | "parserOptions": { 35 | "parser": "@babel/eslint-parser" 36 | }, 37 | "rules": {} 38 | }, 39 | "browserslist": [ 40 | "> 1%", 41 | "last 2 versions", 42 | "not dead" 43 | ] 44 | } 45 | -------------------------------------------------------------------------------- /packages/filters/ascii/examples/vue2/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbeea/awesome-image/397ab12b7c72fb66fe117e62ff16ee0f91adb11e/packages/filters/ascii/examples/vue2/public/favicon.ico -------------------------------------------------------------------------------- /packages/filters/ascii/examples/vue2/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /packages/filters/ascii/examples/vue2/src/App.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 18 | 19 | 29 | -------------------------------------------------------------------------------- /packages/filters/ascii/examples/vue2/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbeea/awesome-image/397ab12b7c72fb66fe117e62ff16ee0f91adb11e/packages/filters/ascii/examples/vue2/src/assets/logo.png -------------------------------------------------------------------------------- /packages/filters/ascii/examples/vue2/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | Vue.config.productionTip = false 5 | 6 | new Vue({ 7 | render: h => h(App), 8 | }).$mount('#app') 9 | -------------------------------------------------------------------------------- /packages/filters/ascii/examples/vue2/vue.config.js: -------------------------------------------------------------------------------- 1 | const { defineConfig } = require('@vue/cli-service') 2 | module.exports = defineConfig({ 3 | transpileDependencies: true 4 | }) 5 | -------------------------------------------------------------------------------- /packages/filters/ascii/examples/vue3/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | 6 | # local env files 7 | .env.local 8 | .env.*.local 9 | 10 | # Log files 11 | npm-debug.log* 12 | yarn-debug.log* 13 | yarn-error.log* 14 | pnpm-debug.log* 15 | 16 | # Editor directories and files 17 | .idea 18 | .vscode 19 | *.suo 20 | *.ntvs* 21 | *.njsproj 22 | *.sln 23 | *.sw? 24 | -------------------------------------------------------------------------------- /packages/filters/ascii/examples/vue3/.npmrc: -------------------------------------------------------------------------------- 1 | shamefully-hoist=true 2 | -------------------------------------------------------------------------------- /packages/filters/ascii/examples/vue3/README.md: -------------------------------------------------------------------------------- 1 | # vue3-test 2 | 3 | ## Project setup 4 | ``` 5 | pnpm install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | pnpm run serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | pnpm run build 16 | ``` 17 | 18 | ### Lints and fixes files 19 | ``` 20 | pnpm run lint 21 | ``` 22 | 23 | ### Customize configuration 24 | See [Configuration Reference](https://cli.vuejs.org/config/). 25 | -------------------------------------------------------------------------------- /packages/filters/ascii/examples/vue3/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /packages/filters/ascii/examples/vue3/jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "esnext", 5 | "baseUrl": "./", 6 | "moduleResolution": "node", 7 | "paths": { 8 | "@/*": [ 9 | "src/*" 10 | ] 11 | }, 12 | "lib": [ 13 | "esnext", 14 | "dom", 15 | "dom.iterable", 16 | "scripthost" 17 | ] 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /packages/filters/ascii/examples/vue3/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue3-test", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "core-js": "^3.8.3", 12 | "universal-vue-template": "^0.0.4", 13 | "vue": "^3.2.13" 14 | }, 15 | "devDependencies": { 16 | "@babel/core": "^7.12.16", 17 | "@babel/eslint-parser": "^7.12.16", 18 | "@vue/cli-plugin-babel": "~5.0.0", 19 | "@vue/cli-plugin-eslint": "~5.0.0", 20 | "@vue/cli-service": "~5.0.0", 21 | "eslint": "^7.32.0", 22 | "eslint-plugin-vue": "^8.0.3" 23 | }, 24 | "eslintConfig": { 25 | "root": true, 26 | "env": { 27 | "node": true 28 | }, 29 | "extends": [ 30 | "plugin:vue/vue3-essential", 31 | "eslint:recommended" 32 | ], 33 | "parserOptions": { 34 | "parser": "@babel/eslint-parser" 35 | }, 36 | "rules": {} 37 | }, 38 | "browserslist": [ 39 | "> 1%", 40 | "last 2 versions", 41 | "not dead", 42 | "not ie 11" 43 | ] 44 | } 45 | -------------------------------------------------------------------------------- /packages/filters/ascii/examples/vue3/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbeea/awesome-image/397ab12b7c72fb66fe117e62ff16ee0f91adb11e/packages/filters/ascii/examples/vue3/public/favicon.ico -------------------------------------------------------------------------------- /packages/filters/ascii/examples/vue3/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /packages/filters/ascii/examples/vue3/src/App.vue: -------------------------------------------------------------------------------- 1 | 5 | 6 | 16 | 17 | 27 | -------------------------------------------------------------------------------- /packages/filters/ascii/examples/vue3/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbeea/awesome-image/397ab12b7c72fb66fe117e62ff16ee0f91adb11e/packages/filters/ascii/examples/vue3/src/assets/logo.png -------------------------------------------------------------------------------- /packages/filters/ascii/examples/vue3/src/main.js: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import App from './App.vue' 3 | 4 | createApp(App).mount('#app') 5 | -------------------------------------------------------------------------------- /packages/filters/ascii/examples/vue3/vue.config.js: -------------------------------------------------------------------------------- 1 | const { defineConfig } = require('@vue/cli-service') 2 | module.exports = defineConfig({ 3 | transpileDependencies: true 4 | }) 5 | -------------------------------------------------------------------------------- /packages/filters/ascii/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite App 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /packages/filters/ascii/patches/vue-template-compiler+2.6.14.patch: -------------------------------------------------------------------------------- 1 | diff --git a/node_modules/vue-template-compiler/index.js b/node_modules/vue-template-compiler/index.js 2 | index dcc7e6c..9775466 100644 3 | --- a/node_modules/vue-template-compiler/index.js 4 | +++ b/node_modules/vue-template-compiler/index.js 5 | @@ -1,5 +1,5 @@ 6 | try { 7 | - var vueVersion = require('vue').version 8 | + var vueVersion = require('vue2').version 9 | } catch (e) {} 10 | 11 | var packageName = require('./package.json').name 12 | -------------------------------------------------------------------------------- /packages/filters/ascii/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbeea/awesome-image/397ab12b7c72fb66fe117e62ff16ee0f91adb11e/packages/filters/ascii/public/favicon.ico -------------------------------------------------------------------------------- /packages/filters/ascii/scripts/copy.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const copy = require('./util').copy 3 | copy(path.join(__dirname, '../dist/vue3/index.es.js'), path.join(__dirname, '../dist/index.es.js')) 4 | copy(path.join(__dirname, '../dist/vue3/index.umd.js'), path.join(__dirname, '../dist/index.umd.js')) 5 | -------------------------------------------------------------------------------- /packages/filters/ascii/scripts/postinstall.js: -------------------------------------------------------------------------------- 1 | 2 | /* eslint-disable @typescript-eslint/no-var-requires */ 3 | const fs = require('fs') 4 | const path = require('path') 5 | const vue = require('vue') 6 | const pkg = require('../package.json') 7 | const copy = require('./util').copy 8 | const version = vue.version 9 | const isVue2 = +version.split('.')[0] === 2 10 | 11 | if (isVue2) { 12 | copy(path.join(__dirname, '../dist/vue2/index.umd.js'), path.join(__dirname, '../dist/index.umd.js')) 13 | copy(path.join(__dirname, '../dist/vue2/index.es.js'), path.join(__dirname, '../dist/index.es.js')) 14 | } 15 | else { 16 | copy(path.join(__dirname, '../dist/vue3/index.umd.js'), path.join(__dirname, '../dist/index.umd.js')) 17 | copy(path.join(__dirname, '../dist/vue3/index.es.js'), path.join(__dirname, '../dist/index.es.js')) 18 | } 19 | -------------------------------------------------------------------------------- /packages/filters/ascii/scripts/util.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs') 2 | function copy(src, dest) { 3 | try { 4 | fs.unlinkSync(dest) 5 | } 6 | catch (error) { } 7 | try { 8 | const content = fs.readFileSync(src, 'utf-8') 9 | fs.writeFileSync(dest, content, 'utf-8') 10 | } 11 | catch (error) { } 12 | } 13 | exports.copy = copy 14 | -------------------------------------------------------------------------------- /packages/filters/ascii/src/App.vue: -------------------------------------------------------------------------------- 1 | 27 | 28 | 51 | 52 | 65 | -------------------------------------------------------------------------------- /packages/filters/ascii/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbeea/awesome-image/397ab12b7c72fb66fe117e62ff16ee0f91adb11e/packages/filters/ascii/src/assets/logo.png -------------------------------------------------------------------------------- /packages/filters/ascii/src/env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | declare module '*.vue' { 4 | import type { DefineComponent } from 'vue' 5 | // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types 6 | const component: DefineComponent<{}, {}, any> 7 | export default component 8 | } 9 | 10 | declare module "@vue-awesome-image/filter-fake3d" -------------------------------------------------------------------------------- /packages/filters/ascii/src/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '../../../../utils/install' 2 | import FilterAscii from './components/index.vue' 3 | export const AsFilterAscii = withInstall(FilterAscii) 4 | export default AsFilterAscii 5 | -------------------------------------------------------------------------------- /packages/filters/ascii/src/main.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue-demi' 2 | import App from './App.vue' 3 | 4 | createApp(App).mount('#app') 5 | -------------------------------------------------------------------------------- /packages/filters/ascii/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "esnext", 4 | "useDefineForClassFields": true, 5 | "module": "esnext", 6 | "moduleResolution": "node", 7 | "strict": true, 8 | "jsx": "preserve", 9 | "sourceMap": true, 10 | "resolveJsonModule": true, 11 | "esModuleInterop": true, 12 | "lib": ["esnext", "dom"] 13 | }, 14 | "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"], 15 | "references": [{ "path": "./tsconfig.node.json" }] 16 | } 17 | -------------------------------------------------------------------------------- /packages/filters/ascii/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "module": "esnext", 5 | "moduleResolution": "node" 6 | }, 7 | "include": ["vite.config.ts", "vite.config.vue2.ts", "vite.config.vue3.ts"] 8 | } 9 | -------------------------------------------------------------------------------- /packages/filters/ascii/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import vue from '@vitejs/plugin-vue' 3 | import vueJsx from '@vitejs/plugin-vue-jsx' 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [vue(), vueJsx()], 7 | }) 8 | -------------------------------------------------------------------------------- /packages/filters/ascii/vite.config.vue2.ts: -------------------------------------------------------------------------------- 1 | import { resolve } from 'path' 2 | import { defineConfig } from 'vite' 3 | import { createVuePlugin } from 'vite-plugin-vue2' 4 | import vueJsx from '@vitejs/plugin-vue-jsx' 5 | // https://vitejs.dev/config/ 6 | export default defineConfig({ 7 | plugins: [createVuePlugin(), vueJsx()], 8 | build: { 9 | outDir: './dist/vue2', 10 | 11 | lib: { 12 | entry: resolve(__dirname, 'src/index.ts'), 13 | fileName: format => `index.${format}.js`, 14 | name: 'AsFilterAscii', 15 | }, 16 | cssCodeSplit: false, 17 | rollupOptions: { 18 | external: ['vue', 'vue-demi'], 19 | output: { 20 | globals: { 21 | 'vue': 'Vue', 22 | 'vue-demi': 'VueDemi', 23 | }, 24 | }, 25 | }, 26 | }, 27 | }) 28 | -------------------------------------------------------------------------------- /packages/filters/ascii/vite.config.vue3.ts: -------------------------------------------------------------------------------- 1 | import { resolve } from 'path' 2 | import { defineConfig } from 'vite' 3 | import vue from '@vitejs/plugin-vue' 4 | import vueJsx from '@vitejs/plugin-vue-jsx' 5 | // https://vitejs.dev/config/ 6 | export default defineConfig({ 7 | plugins: [vue(), vueJsx()], 8 | build: { 9 | outDir: './dist/vue3', 10 | 11 | lib: { 12 | entry: resolve(__dirname, 'src/index.ts'), 13 | fileName: format => `index.${format}.js`, 14 | name: 'AsFilterAscii', 15 | }, 16 | cssCodeSplit: false, 17 | rollupOptions: { 18 | external: ['vue', 'vue-demi'], 19 | output: { 20 | globals: { 21 | 'vue': 'Vue', 22 | 'vue-demi': 'VueDemi', 23 | }, 24 | }, 25 | }, 26 | }, 27 | }) 28 | -------------------------------------------------------------------------------- /packages/filters/crt/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | examples/vue3/node_modules 12 | dist 13 | dist-ssr 14 | *.local 15 | 16 | # Editor directories and files 17 | .vscode/* 18 | !.vscode/extensions.json 19 | .idea 20 | .DS_Store 21 | *.suo 22 | *.ntvs* 23 | *.njsproj 24 | *.sln 25 | *.sw? 26 | 27 | .history 28 | -------------------------------------------------------------------------------- /packages/filters/crt/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["johnsoncodehk.volar"] 3 | } 4 | -------------------------------------------------------------------------------- /packages/filters/crt/README.md: -------------------------------------------------------------------------------- 1 | # Universal vue component template 2 | - Building Universal Vue Libraries for Vue 2 & 3 3 | - Using vue-demi but you don't need to write "render" function, "template" and "tsx" are supported! 4 | 5 | ## Usage 6 | ### Use this template or clone it 7 | ### Install 8 | ``` 9 | yarn 10 | ``` 11 | ### Develop 12 | ``` 13 | yarn run dev 14 | ``` 15 | ### Build 16 | ``` 17 | yarn run build 18 | ``` 19 | ### Publish 20 | Change package name, publish and install it to test in vue2/3 21 | 22 | If you want to use 'npm link' project locally, you need to edit "package.module" "package.main" according to vue version. 23 | ``` 24 | // vue2 25 | { 26 | "name": "your-component", 27 | "module": "./dist/vue2/index.es.js", 28 | "main": "./dist/vue2/index.umd.js", 29 | ... 30 | } 31 | ``` 32 | ``` 33 | // vue3 34 | { 35 | "name": "your-component", 36 | "module": "./dist/vue3/index.es.js", 37 | "main": "./dist/vue3/index.umd.js", 38 | ... 39 | } 40 | ``` 41 | 42 | ## Example 43 | Install 'universal-vue-template' which built by this template in vue2 or vue3, it will work correctly. 44 | ``` 45 | yarn add universal-vue-template 46 | ``` 47 | 48 | ``` 49 | import Universal from 'universal-vue-template' 50 | import 'universal-vue-template/dist/style.css' 51 | ``` 52 | 53 | Vue2 example 54 | [src](https://github.com/newbeea/universal-vue-component-template/tree/master/examples/vue2) 55 | [preview](https://universal-vue-component-2.vercel.app/) 56 | 57 | Vue3 example 58 | [src](https://github.com/newbeea/universal-vue-component-template/tree/master/examples/vue3) 59 | [preview](https://universal-vue-component-3.vercel.app/) 60 | -------------------------------------------------------------------------------- /packages/filters/crt/examples/vue2/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | 6 | # local env files 7 | .env.local 8 | .env.*.local 9 | 10 | # Log files 11 | npm-debug.log* 12 | yarn-debug.log* 13 | yarn-error.log* 14 | pnpm-debug.log* 15 | 16 | # Editor directories and files 17 | .idea 18 | .vscode 19 | *.suo 20 | *.ntvs* 21 | *.njsproj 22 | *.sln 23 | *.sw? 24 | -------------------------------------------------------------------------------- /packages/filters/crt/examples/vue2/.npmrc: -------------------------------------------------------------------------------- 1 | shamefully-hoist=true 2 | -------------------------------------------------------------------------------- /packages/filters/crt/examples/vue2/README.md: -------------------------------------------------------------------------------- 1 | # vue2-test 2 | 3 | ## Project setup 4 | ``` 5 | pnpm install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | pnpm run serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | pnpm run build 16 | ``` 17 | 18 | ### Lints and fixes files 19 | ``` 20 | pnpm run lint 21 | ``` 22 | 23 | ### Customize configuration 24 | See [Configuration Reference](https://cli.vuejs.org/config/). 25 | -------------------------------------------------------------------------------- /packages/filters/crt/examples/vue2/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /packages/filters/crt/examples/vue2/jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "esnext", 5 | "baseUrl": "./", 6 | "moduleResolution": "node", 7 | "paths": { 8 | "@/*": [ 9 | "src/*" 10 | ] 11 | }, 12 | "lib": [ 13 | "esnext", 14 | "dom", 15 | "dom.iterable", 16 | "scripthost" 17 | ] 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /packages/filters/crt/examples/vue2/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue2-test", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "core-js": "^3.8.3", 12 | "universal-vue-template": "^0.0.4", 13 | "vue": "^2.6.14" 14 | }, 15 | "devDependencies": { 16 | "@babel/core": "^7.12.16", 17 | "@babel/eslint-parser": "^7.12.16", 18 | "@vue/cli-plugin-babel": "~5.0.0", 19 | "@vue/cli-plugin-eslint": "~5.0.0", 20 | "@vue/cli-service": "~5.0.0", 21 | "eslint": "^7.32.0", 22 | "eslint-plugin-vue": "^8.0.3", 23 | "vue-template-compiler": "^2.6.14" 24 | }, 25 | "eslintConfig": { 26 | "root": true, 27 | "env": { 28 | "node": true 29 | }, 30 | "extends": [ 31 | "plugin:vue/essential", 32 | "eslint:recommended" 33 | ], 34 | "parserOptions": { 35 | "parser": "@babel/eslint-parser" 36 | }, 37 | "rules": {} 38 | }, 39 | "browserslist": [ 40 | "> 1%", 41 | "last 2 versions", 42 | "not dead" 43 | ] 44 | } 45 | -------------------------------------------------------------------------------- /packages/filters/crt/examples/vue2/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbeea/awesome-image/397ab12b7c72fb66fe117e62ff16ee0f91adb11e/packages/filters/crt/examples/vue2/public/favicon.ico -------------------------------------------------------------------------------- /packages/filters/crt/examples/vue2/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /packages/filters/crt/examples/vue2/src/App.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 18 | 19 | 29 | -------------------------------------------------------------------------------- /packages/filters/crt/examples/vue2/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbeea/awesome-image/397ab12b7c72fb66fe117e62ff16ee0f91adb11e/packages/filters/crt/examples/vue2/src/assets/logo.png -------------------------------------------------------------------------------- /packages/filters/crt/examples/vue2/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | Vue.config.productionTip = false 5 | 6 | new Vue({ 7 | render: h => h(App), 8 | }).$mount('#app') 9 | -------------------------------------------------------------------------------- /packages/filters/crt/examples/vue2/vue.config.js: -------------------------------------------------------------------------------- 1 | const { defineConfig } = require('@vue/cli-service') 2 | module.exports = defineConfig({ 3 | transpileDependencies: true 4 | }) 5 | -------------------------------------------------------------------------------- /packages/filters/crt/examples/vue3/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | 6 | # local env files 7 | .env.local 8 | .env.*.local 9 | 10 | # Log files 11 | npm-debug.log* 12 | yarn-debug.log* 13 | yarn-error.log* 14 | pnpm-debug.log* 15 | 16 | # Editor directories and files 17 | .idea 18 | .vscode 19 | *.suo 20 | *.ntvs* 21 | *.njsproj 22 | *.sln 23 | *.sw? 24 | -------------------------------------------------------------------------------- /packages/filters/crt/examples/vue3/.npmrc: -------------------------------------------------------------------------------- 1 | shamefully-hoist=true 2 | -------------------------------------------------------------------------------- /packages/filters/crt/examples/vue3/README.md: -------------------------------------------------------------------------------- 1 | # vue3-test 2 | 3 | ## Project setup 4 | ``` 5 | pnpm install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | pnpm run serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | pnpm run build 16 | ``` 17 | 18 | ### Lints and fixes files 19 | ``` 20 | pnpm run lint 21 | ``` 22 | 23 | ### Customize configuration 24 | See [Configuration Reference](https://cli.vuejs.org/config/). 25 | -------------------------------------------------------------------------------- /packages/filters/crt/examples/vue3/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /packages/filters/crt/examples/vue3/jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "esnext", 5 | "baseUrl": "./", 6 | "moduleResolution": "node", 7 | "paths": { 8 | "@/*": [ 9 | "src/*" 10 | ] 11 | }, 12 | "lib": [ 13 | "esnext", 14 | "dom", 15 | "dom.iterable", 16 | "scripthost" 17 | ] 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /packages/filters/crt/examples/vue3/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue3-test", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "core-js": "^3.8.3", 12 | "universal-vue-template": "^0.0.4", 13 | "vue": "^3.2.13" 14 | }, 15 | "devDependencies": { 16 | "@babel/core": "^7.12.16", 17 | "@babel/eslint-parser": "^7.12.16", 18 | "@vue/cli-plugin-babel": "~5.0.0", 19 | "@vue/cli-plugin-eslint": "~5.0.0", 20 | "@vue/cli-service": "~5.0.0", 21 | "eslint": "^7.32.0", 22 | "eslint-plugin-vue": "^8.0.3" 23 | }, 24 | "eslintConfig": { 25 | "root": true, 26 | "env": { 27 | "node": true 28 | }, 29 | "extends": [ 30 | "plugin:vue/vue3-essential", 31 | "eslint:recommended" 32 | ], 33 | "parserOptions": { 34 | "parser": "@babel/eslint-parser" 35 | }, 36 | "rules": {} 37 | }, 38 | "browserslist": [ 39 | "> 1%", 40 | "last 2 versions", 41 | "not dead", 42 | "not ie 11" 43 | ] 44 | } 45 | -------------------------------------------------------------------------------- /packages/filters/crt/examples/vue3/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbeea/awesome-image/397ab12b7c72fb66fe117e62ff16ee0f91adb11e/packages/filters/crt/examples/vue3/public/favicon.ico -------------------------------------------------------------------------------- /packages/filters/crt/examples/vue3/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /packages/filters/crt/examples/vue3/src/App.vue: -------------------------------------------------------------------------------- 1 | 5 | 6 | 16 | 17 | 27 | -------------------------------------------------------------------------------- /packages/filters/crt/examples/vue3/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbeea/awesome-image/397ab12b7c72fb66fe117e62ff16ee0f91adb11e/packages/filters/crt/examples/vue3/src/assets/logo.png -------------------------------------------------------------------------------- /packages/filters/crt/examples/vue3/src/main.js: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import App from './App.vue' 3 | 4 | createApp(App).mount('#app') 5 | -------------------------------------------------------------------------------- /packages/filters/crt/examples/vue3/vue.config.js: -------------------------------------------------------------------------------- 1 | const { defineConfig } = require('@vue/cli-service') 2 | module.exports = defineConfig({ 3 | transpileDependencies: true 4 | }) 5 | -------------------------------------------------------------------------------- /packages/filters/crt/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite App 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /packages/filters/crt/patches/vue-template-compiler+2.6.14.patch: -------------------------------------------------------------------------------- 1 | diff --git a/node_modules/vue-template-compiler/index.js b/node_modules/vue-template-compiler/index.js 2 | index dcc7e6c..9775466 100644 3 | --- a/node_modules/vue-template-compiler/index.js 4 | +++ b/node_modules/vue-template-compiler/index.js 5 | @@ -1,5 +1,5 @@ 6 | try { 7 | - var vueVersion = require('vue').version 8 | + var vueVersion = require('vue2').version 9 | } catch (e) {} 10 | 11 | var packageName = require('./package.json').name 12 | -------------------------------------------------------------------------------- /packages/filters/crt/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbeea/awesome-image/397ab12b7c72fb66fe117e62ff16ee0f91adb11e/packages/filters/crt/public/favicon.ico -------------------------------------------------------------------------------- /packages/filters/crt/scripts/copy.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const copy = require('./util').copy 3 | copy(path.join(__dirname, '../dist/vue3/index.es.js'), path.join(__dirname, '../dist/index.es.js')) 4 | copy(path.join(__dirname, '../dist/vue3/index.umd.js'), path.join(__dirname, '../dist/index.umd.js')) 5 | -------------------------------------------------------------------------------- /packages/filters/crt/scripts/postinstall.js: -------------------------------------------------------------------------------- 1 | 2 | /* eslint-disable @typescript-eslint/no-var-requires */ 3 | const fs = require('fs') 4 | const path = require('path') 5 | const vue = require('vue') 6 | const pkg = require('../package.json') 7 | const copy = require('./util').copy 8 | const version = vue.version 9 | const isVue2 = +version.split('.')[0] === 2 10 | 11 | if (isVue2) { 12 | copy(path.join(__dirname, '../dist/vue2/index.umd.js'), path.join(__dirname, '../dist/index.umd.js')) 13 | copy(path.join(__dirname, '../dist/vue2/index.es.js'), path.join(__dirname, '../dist/index.es.js')) 14 | } 15 | else { 16 | copy(path.join(__dirname, '../dist/vue3/index.umd.js'), path.join(__dirname, '../dist/index.umd.js')) 17 | copy(path.join(__dirname, '../dist/vue3/index.es.js'), path.join(__dirname, '../dist/index.es.js')) 18 | } 19 | -------------------------------------------------------------------------------- /packages/filters/crt/scripts/util.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs') 2 | function copy(src, dest) { 3 | try { 4 | fs.unlinkSync(dest) 5 | } 6 | catch (error) { } 7 | try { 8 | const content = fs.readFileSync(src, 'utf-8') 9 | fs.writeFileSync(dest, content, 'utf-8') 10 | } 11 | catch (error) { } 12 | } 13 | exports.copy = copy 14 | -------------------------------------------------------------------------------- /packages/filters/crt/src/App.vue: -------------------------------------------------------------------------------- 1 | 27 | 28 | 51 | 52 | 62 | -------------------------------------------------------------------------------- /packages/filters/crt/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbeea/awesome-image/397ab12b7c72fb66fe117e62ff16ee0f91adb11e/packages/filters/crt/src/assets/logo.png -------------------------------------------------------------------------------- /packages/filters/crt/src/env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | declare module '*.vue' { 4 | import type { DefineComponent } from 'vue' 5 | // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types 6 | const component: DefineComponent<{}, {}, any> 7 | export default component 8 | } 9 | 10 | declare module "@vue-awesome-image/filter-fake3d" -------------------------------------------------------------------------------- /packages/filters/crt/src/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '../../../../utils/install' 2 | import FilterCrt from './components/index.vue' 3 | export const AsFilterCrt = withInstall(FilterCrt) 4 | export default AsFilterCrt 5 | -------------------------------------------------------------------------------- /packages/filters/crt/src/main.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue-demi' 2 | import App from './App.vue' 3 | 4 | createApp(App).mount('#app') 5 | -------------------------------------------------------------------------------- /packages/filters/crt/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "esnext", 4 | "useDefineForClassFields": true, 5 | "module": "esnext", 6 | "moduleResolution": "node", 7 | "strict": true, 8 | "jsx": "preserve", 9 | "sourceMap": true, 10 | "resolveJsonModule": true, 11 | "esModuleInterop": true, 12 | "lib": ["esnext", "dom"] 13 | }, 14 | "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"], 15 | "references": [{ "path": "./tsconfig.node.json" }] 16 | } 17 | -------------------------------------------------------------------------------- /packages/filters/crt/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "module": "esnext", 5 | "moduleResolution": "node" 6 | }, 7 | "include": ["vite.config.ts", "vite.config.vue2.ts", "vite.config.vue3.ts"] 8 | } 9 | -------------------------------------------------------------------------------- /packages/filters/crt/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import vue from '@vitejs/plugin-vue' 3 | import vueJsx from '@vitejs/plugin-vue-jsx' 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [vue(), vueJsx()], 7 | }) 8 | -------------------------------------------------------------------------------- /packages/filters/crt/vite.config.vue2.ts: -------------------------------------------------------------------------------- 1 | import { resolve } from 'path' 2 | import { defineConfig } from 'vite' 3 | import { createVuePlugin } from 'vite-plugin-vue2' 4 | import vueJsx from '@vitejs/plugin-vue-jsx' 5 | // https://vitejs.dev/config/ 6 | export default defineConfig({ 7 | plugins: [createVuePlugin(), vueJsx()], 8 | build: { 9 | outDir: './dist/vue2', 10 | 11 | lib: { 12 | entry: resolve(__dirname, 'src/index.ts'), 13 | fileName: format => `index.${format}.js`, 14 | name: 'AsFilterCrt', 15 | }, 16 | cssCodeSplit: false, 17 | rollupOptions: { 18 | external: ['vue', 'vue-demi'], 19 | output: { 20 | globals: { 21 | 'vue': 'Vue', 22 | 'vue-demi': 'VueDemi', 23 | }, 24 | }, 25 | }, 26 | }, 27 | }) 28 | -------------------------------------------------------------------------------- /packages/filters/crt/vite.config.vue3.ts: -------------------------------------------------------------------------------- 1 | import { resolve } from 'path' 2 | import { defineConfig } from 'vite' 3 | import vue from '@vitejs/plugin-vue' 4 | import vueJsx from '@vitejs/plugin-vue-jsx' 5 | // https://vitejs.dev/config/ 6 | export default defineConfig({ 7 | plugins: [vue(), vueJsx()], 8 | build: { 9 | outDir: './dist/vue3', 10 | 11 | lib: { 12 | entry: resolve(__dirname, 'src/index.ts'), 13 | fileName: format => `index.${format}.js`, 14 | name: 'AsFilterCrt', 15 | }, 16 | cssCodeSplit: false, 17 | rollupOptions: { 18 | external: ['vue', 'vue-demi'], 19 | output: { 20 | globals: { 21 | 'vue': 'Vue', 22 | 'vue-demi': 'VueDemi', 23 | }, 24 | }, 25 | }, 26 | }, 27 | }) 28 | -------------------------------------------------------------------------------- /packages/filters/fake3d/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | examples/vue3/node_modules 12 | dist 13 | dist-ssr 14 | *.local 15 | 16 | # Editor directories and files 17 | .vscode/* 18 | !.vscode/extensions.json 19 | .idea 20 | .DS_Store 21 | *.suo 22 | *.ntvs* 23 | *.njsproj 24 | *.sln 25 | *.sw? 26 | 27 | .history 28 | -------------------------------------------------------------------------------- /packages/filters/fake3d/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["johnsoncodehk.volar"] 3 | } 4 | -------------------------------------------------------------------------------- /packages/filters/fake3d/README.md: -------------------------------------------------------------------------------- 1 | # Universal vue component template 2 | - Building Universal Vue Libraries for Vue 2 & 3 3 | - Using vue-demi but you don't need to write "render" function, "template" and "tsx" are supported! 4 | 5 | ## Usage 6 | ### Use this template or clone it 7 | ### Install 8 | ``` 9 | yarn 10 | ``` 11 | ### Develop 12 | ``` 13 | yarn run dev 14 | ``` 15 | ### Build 16 | ``` 17 | yarn run build 18 | ``` 19 | ### Publish 20 | Change package name, publish and install it to test in vue2/3 21 | 22 | If you want to use 'npm link' project locally, you need to edit "package.module" "package.main" according to vue version. 23 | ``` 24 | // vue2 25 | { 26 | "name": "your-component", 27 | "module": "./dist/vue2/index.es.js", 28 | "main": "./dist/vue2/index.umd.js", 29 | ... 30 | } 31 | ``` 32 | ``` 33 | // vue3 34 | { 35 | "name": "your-component", 36 | "module": "./dist/vue3/index.es.js", 37 | "main": "./dist/vue3/index.umd.js", 38 | ... 39 | } 40 | ``` 41 | 42 | ## Example 43 | Install 'universal-vue-template' which built by this template in vue2 or vue3, it will work correctly. 44 | ``` 45 | yarn add universal-vue-template 46 | ``` 47 | 48 | ``` 49 | import Universal from 'universal-vue-template' 50 | import 'universal-vue-template/dist/style.css' 51 | ``` 52 | 53 | Vue2 example 54 | [src](https://github.com/newbeea/universal-vue-component-template/tree/master/examples/vue2) 55 | [preview](https://universal-vue-component-2.vercel.app/) 56 | 57 | Vue3 example 58 | [src](https://github.com/newbeea/universal-vue-component-template/tree/master/examples/vue3) 59 | [preview](https://universal-vue-component-3.vercel.app/) 60 | -------------------------------------------------------------------------------- /packages/filters/fake3d/examples/vue2/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | 6 | # local env files 7 | .env.local 8 | .env.*.local 9 | 10 | # Log files 11 | npm-debug.log* 12 | yarn-debug.log* 13 | yarn-error.log* 14 | pnpm-debug.log* 15 | 16 | # Editor directories and files 17 | .idea 18 | .vscode 19 | *.suo 20 | *.ntvs* 21 | *.njsproj 22 | *.sln 23 | *.sw? 24 | -------------------------------------------------------------------------------- /packages/filters/fake3d/examples/vue2/.npmrc: -------------------------------------------------------------------------------- 1 | shamefully-hoist=true 2 | -------------------------------------------------------------------------------- /packages/filters/fake3d/examples/vue2/README.md: -------------------------------------------------------------------------------- 1 | # vue2-test 2 | 3 | ## Project setup 4 | ``` 5 | pnpm install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | pnpm run serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | pnpm run build 16 | ``` 17 | 18 | ### Lints and fixes files 19 | ``` 20 | pnpm run lint 21 | ``` 22 | 23 | ### Customize configuration 24 | See [Configuration Reference](https://cli.vuejs.org/config/). 25 | -------------------------------------------------------------------------------- /packages/filters/fake3d/examples/vue2/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /packages/filters/fake3d/examples/vue2/jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "esnext", 5 | "baseUrl": "./", 6 | "moduleResolution": "node", 7 | "paths": { 8 | "@/*": [ 9 | "src/*" 10 | ] 11 | }, 12 | "lib": [ 13 | "esnext", 14 | "dom", 15 | "dom.iterable", 16 | "scripthost" 17 | ] 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /packages/filters/fake3d/examples/vue2/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue2-test", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "core-js": "^3.8.3", 12 | "universal-vue-template": "^0.0.4", 13 | "vue": "^2.6.14" 14 | }, 15 | "devDependencies": { 16 | "@babel/core": "^7.12.16", 17 | "@babel/eslint-parser": "^7.12.16", 18 | "@vue/cli-plugin-babel": "~5.0.0", 19 | "@vue/cli-plugin-eslint": "~5.0.0", 20 | "@vue/cli-service": "~5.0.0", 21 | "eslint": "^7.32.0", 22 | "eslint-plugin-vue": "^8.0.3", 23 | "vue-template-compiler": "^2.6.14" 24 | }, 25 | "eslintConfig": { 26 | "root": true, 27 | "env": { 28 | "node": true 29 | }, 30 | "extends": [ 31 | "plugin:vue/essential", 32 | "eslint:recommended" 33 | ], 34 | "parserOptions": { 35 | "parser": "@babel/eslint-parser" 36 | }, 37 | "rules": {} 38 | }, 39 | "browserslist": [ 40 | "> 1%", 41 | "last 2 versions", 42 | "not dead" 43 | ] 44 | } 45 | -------------------------------------------------------------------------------- /packages/filters/fake3d/examples/vue2/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbeea/awesome-image/397ab12b7c72fb66fe117e62ff16ee0f91adb11e/packages/filters/fake3d/examples/vue2/public/favicon.ico -------------------------------------------------------------------------------- /packages/filters/fake3d/examples/vue2/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /packages/filters/fake3d/examples/vue2/src/App.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 18 | 19 | 29 | -------------------------------------------------------------------------------- /packages/filters/fake3d/examples/vue2/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbeea/awesome-image/397ab12b7c72fb66fe117e62ff16ee0f91adb11e/packages/filters/fake3d/examples/vue2/src/assets/logo.png -------------------------------------------------------------------------------- /packages/filters/fake3d/examples/vue2/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | Vue.config.productionTip = false 5 | 6 | new Vue({ 7 | render: h => h(App), 8 | }).$mount('#app') 9 | -------------------------------------------------------------------------------- /packages/filters/fake3d/examples/vue2/vue.config.js: -------------------------------------------------------------------------------- 1 | const { defineConfig } = require('@vue/cli-service') 2 | module.exports = defineConfig({ 3 | transpileDependencies: true 4 | }) 5 | -------------------------------------------------------------------------------- /packages/filters/fake3d/examples/vue3/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | 6 | # local env files 7 | .env.local 8 | .env.*.local 9 | 10 | # Log files 11 | npm-debug.log* 12 | yarn-debug.log* 13 | yarn-error.log* 14 | pnpm-debug.log* 15 | 16 | # Editor directories and files 17 | .idea 18 | .vscode 19 | *.suo 20 | *.ntvs* 21 | *.njsproj 22 | *.sln 23 | *.sw? 24 | -------------------------------------------------------------------------------- /packages/filters/fake3d/examples/vue3/.npmrc: -------------------------------------------------------------------------------- 1 | shamefully-hoist=true 2 | -------------------------------------------------------------------------------- /packages/filters/fake3d/examples/vue3/README.md: -------------------------------------------------------------------------------- 1 | # vue3-test 2 | 3 | ## Project setup 4 | ``` 5 | pnpm install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | pnpm run serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | pnpm run build 16 | ``` 17 | 18 | ### Lints and fixes files 19 | ``` 20 | pnpm run lint 21 | ``` 22 | 23 | ### Customize configuration 24 | See [Configuration Reference](https://cli.vuejs.org/config/). 25 | -------------------------------------------------------------------------------- /packages/filters/fake3d/examples/vue3/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /packages/filters/fake3d/examples/vue3/jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "esnext", 5 | "baseUrl": "./", 6 | "moduleResolution": "node", 7 | "paths": { 8 | "@/*": [ 9 | "src/*" 10 | ] 11 | }, 12 | "lib": [ 13 | "esnext", 14 | "dom", 15 | "dom.iterable", 16 | "scripthost" 17 | ] 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /packages/filters/fake3d/examples/vue3/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue3-test", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "core-js": "^3.8.3", 12 | "universal-vue-template": "^0.0.4", 13 | "vue": "^3.2.13" 14 | }, 15 | "devDependencies": { 16 | "@babel/core": "^7.12.16", 17 | "@babel/eslint-parser": "^7.12.16", 18 | "@vue/cli-plugin-babel": "~5.0.0", 19 | "@vue/cli-plugin-eslint": "~5.0.0", 20 | "@vue/cli-service": "~5.0.0", 21 | "eslint": "^7.32.0", 22 | "eslint-plugin-vue": "^8.0.3" 23 | }, 24 | "eslintConfig": { 25 | "root": true, 26 | "env": { 27 | "node": true 28 | }, 29 | "extends": [ 30 | "plugin:vue/vue3-essential", 31 | "eslint:recommended" 32 | ], 33 | "parserOptions": { 34 | "parser": "@babel/eslint-parser" 35 | }, 36 | "rules": {} 37 | }, 38 | "browserslist": [ 39 | "> 1%", 40 | "last 2 versions", 41 | "not dead", 42 | "not ie 11" 43 | ] 44 | } 45 | -------------------------------------------------------------------------------- /packages/filters/fake3d/examples/vue3/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbeea/awesome-image/397ab12b7c72fb66fe117e62ff16ee0f91adb11e/packages/filters/fake3d/examples/vue3/public/favicon.ico -------------------------------------------------------------------------------- /packages/filters/fake3d/examples/vue3/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /packages/filters/fake3d/examples/vue3/src/App.vue: -------------------------------------------------------------------------------- 1 | 5 | 6 | 16 | 17 | 27 | -------------------------------------------------------------------------------- /packages/filters/fake3d/examples/vue3/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbeea/awesome-image/397ab12b7c72fb66fe117e62ff16ee0f91adb11e/packages/filters/fake3d/examples/vue3/src/assets/logo.png -------------------------------------------------------------------------------- /packages/filters/fake3d/examples/vue3/src/main.js: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import App from './App.vue' 3 | 4 | createApp(App).mount('#app') 5 | -------------------------------------------------------------------------------- /packages/filters/fake3d/examples/vue3/vue.config.js: -------------------------------------------------------------------------------- 1 | const { defineConfig } = require('@vue/cli-service') 2 | module.exports = defineConfig({ 3 | transpileDependencies: true 4 | }) 5 | -------------------------------------------------------------------------------- /packages/filters/fake3d/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite App 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /packages/filters/fake3d/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@awesome-image/filter-fake3d", 3 | "publishConfig": { 4 | "access": "public" 5 | }, 6 | "version": "1.0.30", 7 | "module": "./dist/index.es.js", 8 | "main": "./dist/index.umd.js", 9 | "files": [ 10 | "dist", 11 | "scripts", 12 | "assets" 13 | ], 14 | "scripts": { 15 | "dev": "vite", 16 | "build": "npm run build:2 && npm run build:3 && npm run copy", 17 | "build:2": "patch-package && vue-demi-switch 2 vue && vite --config vite.config.vue2.ts build", 18 | "build:3": "vue-demi-switch 3 && vite --config vite.config.vue3.ts build", 19 | "watch": "vue-demi-switch 3 && vite --config vite.config.vue3.ts build --watch", 20 | "copy": "node ./scripts/copy.js", 21 | "postinstall": "node ./scripts/postinstall.js", 22 | "preview": "vite preview" 23 | }, 24 | "dependencies": { 25 | "@vue/composition-api": "^1.4.9", 26 | "vue-demi": "^0.12.1", 27 | "vue-template-compiler": "^2.6.14" 28 | }, 29 | "devDependencies": { 30 | "@awesome-image/image": "workspace:*", 31 | "@antfu/eslint-config": "^0.16.1", 32 | "@gl-widget/gl-widget": "^1.1.3", 33 | "@types/node": "^17.0.21", 34 | "@vitejs/plugin-vue": "^2.2.0", 35 | "@vitejs/plugin-vue-jsx": "^1.3.8", 36 | "eslint": "^8.10.0", 37 | "patch-package": "^6.4.7", 38 | "sass": "^1.49.9", 39 | "typescript": "^4.5.4", 40 | "vite": "^2.8.0", 41 | "vite-plugin-vue2": "^1.9.3", 42 | "vue": "^3.2.25", 43 | "vue-tsc": "^0.29.8", 44 | "vue2": "npm:vue@2" 45 | }, 46 | "peerDependencies": { 47 | "@vue/composition-api": "^1.0.0-rc.1", 48 | "vue": "^2.0.0 || >=3.0.0" 49 | }, 50 | "peerDependenciesMeta": { 51 | "@vue/composition-api": { 52 | "optional": true 53 | } 54 | } 55 | } -------------------------------------------------------------------------------- /packages/filters/fake3d/patches/vue-template-compiler+2.6.14.patch: -------------------------------------------------------------------------------- 1 | diff --git a/node_modules/vue-template-compiler/index.js b/node_modules/vue-template-compiler/index.js 2 | index dcc7e6c..9775466 100644 3 | --- a/node_modules/vue-template-compiler/index.js 4 | +++ b/node_modules/vue-template-compiler/index.js 5 | @@ -1,5 +1,5 @@ 6 | try { 7 | - var vueVersion = require('vue').version 8 | + var vueVersion = require('vue2').version 9 | } catch (e) {} 10 | 11 | var packageName = require('./package.json').name 12 | -------------------------------------------------------------------------------- /packages/filters/fake3d/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbeea/awesome-image/397ab12b7c72fb66fe117e62ff16ee0f91adb11e/packages/filters/fake3d/public/favicon.ico -------------------------------------------------------------------------------- /packages/filters/fake3d/scripts/copy.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const copy = require('./util').copy 3 | copy(path.join(__dirname, '../dist/vue3/index.es.js'), path.join(__dirname, '../dist/index.es.js')) 4 | copy(path.join(__dirname, '../dist/vue3/index.umd.js'), path.join(__dirname, '../dist/index.umd.js')) 5 | -------------------------------------------------------------------------------- /packages/filters/fake3d/scripts/postinstall.js: -------------------------------------------------------------------------------- 1 | 2 | /* eslint-disable @typescript-eslint/no-var-requires */ 3 | const fs = require('fs') 4 | const path = require('path') 5 | const vue = require('vue') 6 | const pkg = require('../package.json') 7 | const copy = require('./util').copy 8 | const version = vue.version 9 | const isVue2 = +version.split('.')[0] === 2 10 | 11 | if (isVue2) { 12 | copy(path.join(__dirname, '../dist/vue2/index.umd.js'), path.join(__dirname, '../dist/index.umd.js')) 13 | copy(path.join(__dirname, '../dist/vue2/index.es.js'), path.join(__dirname, '../dist/index.es.js')) 14 | } 15 | else { 16 | copy(path.join(__dirname, '../dist/vue3/index.umd.js'), path.join(__dirname, '../dist/index.umd.js')) 17 | copy(path.join(__dirname, '../dist/vue3/index.es.js'), path.join(__dirname, '../dist/index.es.js')) 18 | } 19 | -------------------------------------------------------------------------------- /packages/filters/fake3d/scripts/util.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs') 2 | function copy(src, dest) { 3 | try { 4 | fs.unlinkSync(dest) 5 | } 6 | catch (error) { } 7 | try { 8 | const content = fs.readFileSync(src, 'utf-8') 9 | fs.writeFileSync(dest, content, 'utf-8') 10 | } 11 | catch (error) { } 12 | } 13 | exports.copy = copy 14 | -------------------------------------------------------------------------------- /packages/filters/fake3d/src/App.vue: -------------------------------------------------------------------------------- 1 | 23 | 24 | 47 | 48 | 61 | -------------------------------------------------------------------------------- /packages/filters/fake3d/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbeea/awesome-image/397ab12b7c72fb66fe117e62ff16ee0f91adb11e/packages/filters/fake3d/src/assets/logo.png -------------------------------------------------------------------------------- /packages/filters/fake3d/src/env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | declare module '*.vue' { 4 | import type { DefineComponent } from 'vue' 5 | // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types 6 | const component: DefineComponent<{}, {}, any> 7 | export default component 8 | } 9 | 10 | declare module "@vue-awesome-image/filter-fake3d" -------------------------------------------------------------------------------- /packages/filters/fake3d/src/index.ts: -------------------------------------------------------------------------------- 1 | 2 | import type { App } from 'vue-demi' 3 | import AsFilterFake3d from './components/index.vue' 4 | 5 | export { AsFilterFake3d } 6 | export default { 7 | install: (app: App) => { 8 | app.component(AsFilterFake3d.name, AsFilterFake3d) 9 | }, 10 | } 11 | -------------------------------------------------------------------------------- /packages/filters/fake3d/src/main.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue-demi' 2 | import App from './App.vue' 3 | 4 | createApp(App).mount('#app') 5 | -------------------------------------------------------------------------------- /packages/filters/fake3d/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "esnext", 4 | "useDefineForClassFields": true, 5 | "module": "esnext", 6 | "moduleResolution": "node", 7 | "strict": true, 8 | "jsx": "preserve", 9 | "sourceMap": true, 10 | "resolveJsonModule": true, 11 | "esModuleInterop": true, 12 | "lib": ["esnext", "dom"] 13 | }, 14 | "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"], 15 | "references": [{ "path": "./tsconfig.node.json" }] 16 | } 17 | -------------------------------------------------------------------------------- /packages/filters/fake3d/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "module": "esnext", 5 | "moduleResolution": "node" 6 | }, 7 | "include": ["vite.config.ts", "vite.config.vue2.ts", "vite.config.vue3.ts"] 8 | } 9 | -------------------------------------------------------------------------------- /packages/filters/fake3d/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import vue from '@vitejs/plugin-vue' 3 | import vueJsx from '@vitejs/plugin-vue-jsx' 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [vue(), vueJsx()], 7 | }) 8 | -------------------------------------------------------------------------------- /packages/filters/fake3d/vite.config.vue2.ts: -------------------------------------------------------------------------------- 1 | import { resolve } from 'path' 2 | import { defineConfig } from 'vite' 3 | import { createVuePlugin } from 'vite-plugin-vue2' 4 | import vueJsx from '@vitejs/plugin-vue-jsx' 5 | // https://vitejs.dev/config/ 6 | export default defineConfig({ 7 | plugins: [createVuePlugin(), vueJsx()], 8 | build: { 9 | outDir: './dist/vue2', 10 | 11 | lib: { 12 | entry: resolve(__dirname, 'src/index.ts'), 13 | fileName: format => `index.${format}.js`, 14 | name: 'AsFilterFake3d', 15 | }, 16 | cssCodeSplit: false, 17 | rollupOptions: { 18 | external: ['vue', 'vue-demi'], 19 | output: { 20 | globals: { 21 | 'vue': 'Vue', 22 | 'vue-demi': 'VueDemi', 23 | }, 24 | }, 25 | }, 26 | }, 27 | }) 28 | -------------------------------------------------------------------------------- /packages/filters/fake3d/vite.config.vue3.ts: -------------------------------------------------------------------------------- 1 | import { resolve } from 'path' 2 | import { defineConfig } from 'vite' 3 | import vue from '@vitejs/plugin-vue' 4 | import vueJsx from '@vitejs/plugin-vue-jsx' 5 | // https://vitejs.dev/config/ 6 | export default defineConfig({ 7 | plugins: [vue(), vueJsx()], 8 | build: { 9 | outDir: './dist/vue3', 10 | 11 | lib: { 12 | entry: resolve(__dirname, 'src/index.ts'), 13 | fileName: format => `index.${format}.js`, 14 | name: 'AsFilterFake3d', 15 | }, 16 | cssCodeSplit: false, 17 | rollupOptions: { 18 | external: ['vue', 'vue-demi'], 19 | output: { 20 | globals: { 21 | 'vue': 'Vue', 22 | 'vue-demi': 'VueDemi', 23 | }, 24 | }, 25 | }, 26 | }, 27 | }) 28 | -------------------------------------------------------------------------------- /packages/filters/glitch/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | examples/vue3/node_modules 12 | dist 13 | dist-ssr 14 | *.local 15 | 16 | # Editor directories and files 17 | .vscode/* 18 | !.vscode/extensions.json 19 | .idea 20 | .DS_Store 21 | *.suo 22 | *.ntvs* 23 | *.njsproj 24 | *.sln 25 | *.sw? 26 | 27 | .history 28 | -------------------------------------------------------------------------------- /packages/filters/glitch/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["johnsoncodehk.volar"] 3 | } 4 | -------------------------------------------------------------------------------- /packages/filters/glitch/README.md: -------------------------------------------------------------------------------- 1 | # Universal vue component template 2 | - Building Universal Vue Libraries for Vue 2 & 3 3 | - Using vue-demi but you don't need to write "render" function, "template" and "tsx" are supported! 4 | 5 | ## Usage 6 | ### Use this template or clone it 7 | ### Install 8 | ``` 9 | yarn 10 | ``` 11 | ### Develop 12 | ``` 13 | yarn run dev 14 | ``` 15 | ### Build 16 | ``` 17 | yarn run build 18 | ``` 19 | ### Publish 20 | Change package name, publish and install it to test in vue2/3 21 | 22 | If you want to use 'npm link' project locally, you need to edit "package.module" "package.main" according to vue version. 23 | ``` 24 | // vue2 25 | { 26 | "name": "your-component", 27 | "module": "./dist/vue2/index.es.js", 28 | "main": "./dist/vue2/index.umd.js", 29 | ... 30 | } 31 | ``` 32 | ``` 33 | // vue3 34 | { 35 | "name": "your-component", 36 | "module": "./dist/vue3/index.es.js", 37 | "main": "./dist/vue3/index.umd.js", 38 | ... 39 | } 40 | ``` 41 | 42 | ## Example 43 | Install 'universal-vue-template' which built by this template in vue2 or vue3, it will work correctly. 44 | ``` 45 | yarn add universal-vue-template 46 | ``` 47 | 48 | ``` 49 | import Universal from 'universal-vue-template' 50 | import 'universal-vue-template/dist/style.css' 51 | ``` 52 | 53 | Vue2 example 54 | [src](https://github.com/newbeea/universal-vue-component-template/tree/master/examples/vue2) 55 | [preview](https://universal-vue-component-2.vercel.app/) 56 | 57 | Vue3 example 58 | [src](https://github.com/newbeea/universal-vue-component-template/tree/master/examples/vue3) 59 | [preview](https://universal-vue-component-3.vercel.app/) 60 | -------------------------------------------------------------------------------- /packages/filters/glitch/examples/vue2/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | 6 | # local env files 7 | .env.local 8 | .env.*.local 9 | 10 | # Log files 11 | npm-debug.log* 12 | yarn-debug.log* 13 | yarn-error.log* 14 | pnpm-debug.log* 15 | 16 | # Editor directories and files 17 | .idea 18 | .vscode 19 | *.suo 20 | *.ntvs* 21 | *.njsproj 22 | *.sln 23 | *.sw? 24 | -------------------------------------------------------------------------------- /packages/filters/glitch/examples/vue2/.npmrc: -------------------------------------------------------------------------------- 1 | shamefully-hoist=true 2 | -------------------------------------------------------------------------------- /packages/filters/glitch/examples/vue2/README.md: -------------------------------------------------------------------------------- 1 | # vue2-test 2 | 3 | ## Project setup 4 | ``` 5 | pnpm install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | pnpm run serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | pnpm run build 16 | ``` 17 | 18 | ### Lints and fixes files 19 | ``` 20 | pnpm run lint 21 | ``` 22 | 23 | ### Customize configuration 24 | See [Configuration Reference](https://cli.vuejs.org/config/). 25 | -------------------------------------------------------------------------------- /packages/filters/glitch/examples/vue2/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /packages/filters/glitch/examples/vue2/jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "esnext", 5 | "baseUrl": "./", 6 | "moduleResolution": "node", 7 | "paths": { 8 | "@/*": [ 9 | "src/*" 10 | ] 11 | }, 12 | "lib": [ 13 | "esnext", 14 | "dom", 15 | "dom.iterable", 16 | "scripthost" 17 | ] 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /packages/filters/glitch/examples/vue2/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue2-test", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "core-js": "^3.8.3", 12 | "universal-vue-template": "^0.0.4", 13 | "vue": "^2.6.14" 14 | }, 15 | "devDependencies": { 16 | "@babel/core": "^7.12.16", 17 | "@babel/eslint-parser": "^7.12.16", 18 | "@vue/cli-plugin-babel": "~5.0.0", 19 | "@vue/cli-plugin-eslint": "~5.0.0", 20 | "@vue/cli-service": "~5.0.0", 21 | "eslint": "^7.32.0", 22 | "eslint-plugin-vue": "^8.0.3", 23 | "vue-template-compiler": "^2.6.14" 24 | }, 25 | "eslintConfig": { 26 | "root": true, 27 | "env": { 28 | "node": true 29 | }, 30 | "extends": [ 31 | "plugin:vue/essential", 32 | "eslint:recommended" 33 | ], 34 | "parserOptions": { 35 | "parser": "@babel/eslint-parser" 36 | }, 37 | "rules": {} 38 | }, 39 | "browserslist": [ 40 | "> 1%", 41 | "last 2 versions", 42 | "not dead" 43 | ] 44 | } 45 | -------------------------------------------------------------------------------- /packages/filters/glitch/examples/vue2/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbeea/awesome-image/397ab12b7c72fb66fe117e62ff16ee0f91adb11e/packages/filters/glitch/examples/vue2/public/favicon.ico -------------------------------------------------------------------------------- /packages/filters/glitch/examples/vue2/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /packages/filters/glitch/examples/vue2/src/App.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 18 | 19 | 29 | -------------------------------------------------------------------------------- /packages/filters/glitch/examples/vue2/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbeea/awesome-image/397ab12b7c72fb66fe117e62ff16ee0f91adb11e/packages/filters/glitch/examples/vue2/src/assets/logo.png -------------------------------------------------------------------------------- /packages/filters/glitch/examples/vue2/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | Vue.config.productionTip = false 5 | 6 | new Vue({ 7 | render: h => h(App), 8 | }).$mount('#app') 9 | -------------------------------------------------------------------------------- /packages/filters/glitch/examples/vue2/vue.config.js: -------------------------------------------------------------------------------- 1 | const { defineConfig } = require('@vue/cli-service') 2 | module.exports = defineConfig({ 3 | transpileDependencies: true 4 | }) 5 | -------------------------------------------------------------------------------- /packages/filters/glitch/examples/vue3/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | 6 | # local env files 7 | .env.local 8 | .env.*.local 9 | 10 | # Log files 11 | npm-debug.log* 12 | yarn-debug.log* 13 | yarn-error.log* 14 | pnpm-debug.log* 15 | 16 | # Editor directories and files 17 | .idea 18 | .vscode 19 | *.suo 20 | *.ntvs* 21 | *.njsproj 22 | *.sln 23 | *.sw? 24 | -------------------------------------------------------------------------------- /packages/filters/glitch/examples/vue3/.npmrc: -------------------------------------------------------------------------------- 1 | shamefully-hoist=true 2 | -------------------------------------------------------------------------------- /packages/filters/glitch/examples/vue3/README.md: -------------------------------------------------------------------------------- 1 | # vue3-test 2 | 3 | ## Project setup 4 | ``` 5 | pnpm install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | pnpm run serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | pnpm run build 16 | ``` 17 | 18 | ### Lints and fixes files 19 | ``` 20 | pnpm run lint 21 | ``` 22 | 23 | ### Customize configuration 24 | See [Configuration Reference](https://cli.vuejs.org/config/). 25 | -------------------------------------------------------------------------------- /packages/filters/glitch/examples/vue3/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /packages/filters/glitch/examples/vue3/jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "esnext", 5 | "baseUrl": "./", 6 | "moduleResolution": "node", 7 | "paths": { 8 | "@/*": [ 9 | "src/*" 10 | ] 11 | }, 12 | "lib": [ 13 | "esnext", 14 | "dom", 15 | "dom.iterable", 16 | "scripthost" 17 | ] 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /packages/filters/glitch/examples/vue3/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue3-test", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "core-js": "^3.8.3", 12 | "universal-vue-template": "^0.0.4", 13 | "vue": "^3.2.13" 14 | }, 15 | "devDependencies": { 16 | "@babel/core": "^7.12.16", 17 | "@babel/eslint-parser": "^7.12.16", 18 | "@vue/cli-plugin-babel": "~5.0.0", 19 | "@vue/cli-plugin-eslint": "~5.0.0", 20 | "@vue/cli-service": "~5.0.0", 21 | "eslint": "^7.32.0", 22 | "eslint-plugin-vue": "^8.0.3" 23 | }, 24 | "eslintConfig": { 25 | "root": true, 26 | "env": { 27 | "node": true 28 | }, 29 | "extends": [ 30 | "plugin:vue/vue3-essential", 31 | "eslint:recommended" 32 | ], 33 | "parserOptions": { 34 | "parser": "@babel/eslint-parser" 35 | }, 36 | "rules": {} 37 | }, 38 | "browserslist": [ 39 | "> 1%", 40 | "last 2 versions", 41 | "not dead", 42 | "not ie 11" 43 | ] 44 | } 45 | -------------------------------------------------------------------------------- /packages/filters/glitch/examples/vue3/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbeea/awesome-image/397ab12b7c72fb66fe117e62ff16ee0f91adb11e/packages/filters/glitch/examples/vue3/public/favicon.ico -------------------------------------------------------------------------------- /packages/filters/glitch/examples/vue3/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /packages/filters/glitch/examples/vue3/src/App.vue: -------------------------------------------------------------------------------- 1 | 5 | 6 | 16 | 17 | 27 | -------------------------------------------------------------------------------- /packages/filters/glitch/examples/vue3/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbeea/awesome-image/397ab12b7c72fb66fe117e62ff16ee0f91adb11e/packages/filters/glitch/examples/vue3/src/assets/logo.png -------------------------------------------------------------------------------- /packages/filters/glitch/examples/vue3/src/main.js: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import App from './App.vue' 3 | 4 | createApp(App).mount('#app') 5 | -------------------------------------------------------------------------------- /packages/filters/glitch/examples/vue3/vue.config.js: -------------------------------------------------------------------------------- 1 | const { defineConfig } = require('@vue/cli-service') 2 | module.exports = defineConfig({ 3 | transpileDependencies: true 4 | }) 5 | -------------------------------------------------------------------------------- /packages/filters/glitch/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite App 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /packages/filters/glitch/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@awesome-image/filter-glitch", 3 | "publishConfig": { 4 | "access": "public" 5 | }, 6 | "version": "0.0.10", 7 | "module": "./dist/index.es.js", 8 | "main": "./dist/index.umd.js", 9 | "files": [ 10 | "dist", 11 | "scripts", 12 | "assets" 13 | ], 14 | "scripts": { 15 | "dev": "vite", 16 | "build": "npm run build:2 && npm run build:3 && npm run copy", 17 | "build:2": "patch-package && vue-demi-switch 2 vue && vite --config vite.config.vue2.ts build", 18 | "build:3": "vue-demi-switch 3 && vite --config vite.config.vue3.ts build", 19 | "watch": "vue-demi-switch 3 && vite --config vite.config.vue3.ts build --watch", 20 | "copy": "node ./scripts/copy.js", 21 | "postinstall": "node ./scripts/postinstall.js", 22 | "preview": "vite preview" 23 | }, 24 | "dependencies": { 25 | "@vue/composition-api": "^1.4.9", 26 | "vue-demi": "^0.12.1", 27 | "vue-template-compiler": "^2.6.14" 28 | }, 29 | "devDependencies": { 30 | "@awesome-image/image": "workspace:*", 31 | "@antfu/eslint-config": "^0.16.1", 32 | "@gl-widget/gl-widget": "^1.1.3", 33 | "@types/node": "^17.0.21", 34 | "@vitejs/plugin-vue": "^2.2.0", 35 | "@vitejs/plugin-vue-jsx": "^1.3.8", 36 | "eslint": "^8.10.0", 37 | "patch-package": "^6.4.7", 38 | "sass": "^1.49.9", 39 | "typescript": "^4.5.4", 40 | "vite": "^2.8.0", 41 | "vite-plugin-vue2": "^1.9.3", 42 | "vue": "^3.2.25", 43 | "vue-tsc": "^0.29.8", 44 | "vue2": "npm:vue@2" 45 | }, 46 | "peerDependencies": { 47 | "@vue/composition-api": "^1.0.0-rc.1", 48 | "vue": "^2.0.0 || >=3.0.0" 49 | }, 50 | "peerDependenciesMeta": { 51 | "@vue/composition-api": { 52 | "optional": true 53 | } 54 | } 55 | } -------------------------------------------------------------------------------- /packages/filters/glitch/patches/vue-template-compiler+2.6.14.patch: -------------------------------------------------------------------------------- 1 | diff --git a/node_modules/vue-template-compiler/index.js b/node_modules/vue-template-compiler/index.js 2 | index dcc7e6c..9775466 100644 3 | --- a/node_modules/vue-template-compiler/index.js 4 | +++ b/node_modules/vue-template-compiler/index.js 5 | @@ -1,5 +1,5 @@ 6 | try { 7 | - var vueVersion = require('vue').version 8 | + var vueVersion = require('vue2').version 9 | } catch (e) {} 10 | 11 | var packageName = require('./package.json').name 12 | -------------------------------------------------------------------------------- /packages/filters/glitch/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbeea/awesome-image/397ab12b7c72fb66fe117e62ff16ee0f91adb11e/packages/filters/glitch/public/favicon.ico -------------------------------------------------------------------------------- /packages/filters/glitch/scripts/copy.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const copy = require('./util').copy 3 | copy(path.join(__dirname, '../dist/vue3/index.es.js'), path.join(__dirname, '../dist/index.es.js')) 4 | copy(path.join(__dirname, '../dist/vue3/index.umd.js'), path.join(__dirname, '../dist/index.umd.js')) 5 | -------------------------------------------------------------------------------- /packages/filters/glitch/scripts/postinstall.js: -------------------------------------------------------------------------------- 1 | 2 | /* eslint-disable @typescript-eslint/no-var-requires */ 3 | const fs = require('fs') 4 | const path = require('path') 5 | const vue = require('vue') 6 | const pkg = require('../package.json') 7 | const copy = require('./util').copy 8 | const version = vue.version 9 | const isVue2 = +version.split('.')[0] === 2 10 | 11 | if (isVue2) { 12 | copy(path.join(__dirname, '../dist/vue2/index.umd.js'), path.join(__dirname, '../dist/index.umd.js')) 13 | copy(path.join(__dirname, '../dist/vue2/index.es.js'), path.join(__dirname, '../dist/index.es.js')) 14 | } 15 | else { 16 | copy(path.join(__dirname, '../dist/vue3/index.umd.js'), path.join(__dirname, '../dist/index.umd.js')) 17 | copy(path.join(__dirname, '../dist/vue3/index.es.js'), path.join(__dirname, '../dist/index.es.js')) 18 | } 19 | -------------------------------------------------------------------------------- /packages/filters/glitch/scripts/util.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs') 2 | function copy(src, dest) { 3 | try { 4 | fs.unlinkSync(dest) 5 | } 6 | catch (error) { } 7 | try { 8 | const content = fs.readFileSync(src, 'utf-8') 9 | fs.writeFileSync(dest, content, 'utf-8') 10 | } 11 | catch (error) { } 12 | } 13 | exports.copy = copy 14 | -------------------------------------------------------------------------------- /packages/filters/glitch/src/App.vue: -------------------------------------------------------------------------------- 1 | 23 | 24 | 47 | 48 | 61 | -------------------------------------------------------------------------------- /packages/filters/glitch/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbeea/awesome-image/397ab12b7c72fb66fe117e62ff16ee0f91adb11e/packages/filters/glitch/src/assets/logo.png -------------------------------------------------------------------------------- /packages/filters/glitch/src/env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | declare module '*.vue' { 4 | import type { DefineComponent } from 'vue' 5 | // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types 6 | const component: DefineComponent<{}, {}, any> 7 | export default component 8 | } 9 | 10 | declare module "@vue-awesome-image/filter-fake3d" -------------------------------------------------------------------------------- /packages/filters/glitch/src/index.ts: -------------------------------------------------------------------------------- 1 | 2 | import type { App } from 'vue-demi' 3 | import AsFilterGlitch from './components/index.vue' 4 | 5 | export { AsFilterGlitch } 6 | export default { 7 | install: (app: App) => { 8 | app.component(AsFilterGlitch.name, AsFilterGlitch) 9 | }, 10 | } 11 | -------------------------------------------------------------------------------- /packages/filters/glitch/src/main.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue-demi' 2 | import App from './App.vue' 3 | 4 | createApp(App).mount('#app') 5 | -------------------------------------------------------------------------------- /packages/filters/glitch/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "esnext", 4 | "useDefineForClassFields": true, 5 | "module": "esnext", 6 | "moduleResolution": "node", 7 | "strict": true, 8 | "jsx": "preserve", 9 | "sourceMap": true, 10 | "resolveJsonModule": true, 11 | "esModuleInterop": true, 12 | "lib": ["esnext", "dom"] 13 | }, 14 | "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"], 15 | "references": [{ "path": "./tsconfig.node.json" }] 16 | } 17 | -------------------------------------------------------------------------------- /packages/filters/glitch/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "module": "esnext", 5 | "moduleResolution": "node" 6 | }, 7 | "include": ["vite.config.ts", "vite.config.vue2.ts", "vite.config.vue3.ts"] 8 | } 9 | -------------------------------------------------------------------------------- /packages/filters/glitch/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import vue from '@vitejs/plugin-vue' 3 | import vueJsx from '@vitejs/plugin-vue-jsx' 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [vue(), vueJsx()], 7 | }) 8 | -------------------------------------------------------------------------------- /packages/filters/glitch/vite.config.vue2.ts: -------------------------------------------------------------------------------- 1 | import { resolve } from 'path' 2 | import { defineConfig } from 'vite' 3 | import { createVuePlugin } from 'vite-plugin-vue2' 4 | import vueJsx from '@vitejs/plugin-vue-jsx' 5 | // https://vitejs.dev/config/ 6 | export default defineConfig({ 7 | plugins: [createVuePlugin(), vueJsx()], 8 | build: { 9 | outDir: './dist/vue2', 10 | 11 | lib: { 12 | entry: resolve(__dirname, 'src/index.ts'), 13 | fileName: format => `index.${format}.js`, 14 | name: 'AsFilterGlitch', 15 | }, 16 | cssCodeSplit: false, 17 | rollupOptions: { 18 | external: ['vue', 'vue-demi'], 19 | output: { 20 | globals: { 21 | 'vue': 'Vue', 22 | 'vue-demi': 'VueDemi', 23 | }, 24 | }, 25 | }, 26 | }, 27 | }) 28 | -------------------------------------------------------------------------------- /packages/filters/glitch/vite.config.vue3.ts: -------------------------------------------------------------------------------- 1 | import { resolve } from 'path' 2 | import { defineConfig } from 'vite' 3 | import vue from '@vitejs/plugin-vue' 4 | import vueJsx from '@vitejs/plugin-vue-jsx' 5 | // https://vitejs.dev/config/ 6 | export default defineConfig({ 7 | plugins: [vue(), vueJsx()], 8 | build: { 9 | outDir: './dist/vue3', 10 | 11 | lib: { 12 | entry: resolve(__dirname, 'src/index.ts'), 13 | fileName: format => `index.${format}.js`, 14 | name: 'AsFilterGlitch', 15 | }, 16 | cssCodeSplit: false, 17 | rollupOptions: { 18 | external: ['vue', 'vue-demi'], 19 | output: { 20 | globals: { 21 | 'vue': 'Vue', 22 | 'vue-demi': 'VueDemi', 23 | }, 24 | }, 25 | }, 26 | }, 27 | }) 28 | -------------------------------------------------------------------------------- /packages/filters/hexagon/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | examples/vue3/node_modules 12 | dist 13 | dist-ssr 14 | *.local 15 | 16 | # Editor directories and files 17 | .vscode/* 18 | !.vscode/extensions.json 19 | .idea 20 | .DS_Store 21 | *.suo 22 | *.ntvs* 23 | *.njsproj 24 | *.sln 25 | *.sw? 26 | 27 | .history 28 | -------------------------------------------------------------------------------- /packages/filters/hexagon/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["johnsoncodehk.volar"] 3 | } 4 | -------------------------------------------------------------------------------- /packages/filters/hexagon/README.md: -------------------------------------------------------------------------------- 1 | # Universal vue component template 2 | - Building Universal Vue Libraries for Vue 2 & 3 3 | - Using vue-demi but you don't need to write "render" function, "template" and "tsx" are supported! 4 | 5 | ## Usage 6 | ### Use this template or clone it 7 | ### Install 8 | ``` 9 | yarn 10 | ``` 11 | ### Develop 12 | ``` 13 | yarn run dev 14 | ``` 15 | ### Build 16 | ``` 17 | yarn run build 18 | ``` 19 | ### Publish 20 | Change package name, publish and install it to test in vue2/3 21 | 22 | If you want to use 'npm link' project locally, you need to edit "package.module" "package.main" according to vue version. 23 | ``` 24 | // vue2 25 | { 26 | "name": "your-component", 27 | "module": "./dist/vue2/index.es.js", 28 | "main": "./dist/vue2/index.umd.js", 29 | ... 30 | } 31 | ``` 32 | ``` 33 | // vue3 34 | { 35 | "name": "your-component", 36 | "module": "./dist/vue3/index.es.js", 37 | "main": "./dist/vue3/index.umd.js", 38 | ... 39 | } 40 | ``` 41 | 42 | ## Example 43 | Install 'universal-vue-template' which built by this template in vue2 or vue3, it will work correctly. 44 | ``` 45 | yarn add universal-vue-template 46 | ``` 47 | 48 | ``` 49 | import Universal from 'universal-vue-template' 50 | import 'universal-vue-template/dist/style.css' 51 | ``` 52 | 53 | Vue2 example 54 | [src](https://github.com/newbeea/universal-vue-component-template/tree/master/examples/vue2) 55 | [preview](https://universal-vue-component-2.vercel.app/) 56 | 57 | Vue3 example 58 | [src](https://github.com/newbeea/universal-vue-component-template/tree/master/examples/vue3) 59 | [preview](https://universal-vue-component-3.vercel.app/) 60 | -------------------------------------------------------------------------------- /packages/filters/hexagon/examples/vue2/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | 6 | # local env files 7 | .env.local 8 | .env.*.local 9 | 10 | # Log files 11 | npm-debug.log* 12 | yarn-debug.log* 13 | yarn-error.log* 14 | pnpm-debug.log* 15 | 16 | # Editor directories and files 17 | .idea 18 | .vscode 19 | *.suo 20 | *.ntvs* 21 | *.njsproj 22 | *.sln 23 | *.sw? 24 | -------------------------------------------------------------------------------- /packages/filters/hexagon/examples/vue2/.npmrc: -------------------------------------------------------------------------------- 1 | shamefully-hoist=true 2 | -------------------------------------------------------------------------------- /packages/filters/hexagon/examples/vue2/README.md: -------------------------------------------------------------------------------- 1 | # vue2-test 2 | 3 | ## Project setup 4 | ``` 5 | pnpm install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | pnpm run serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | pnpm run build 16 | ``` 17 | 18 | ### Lints and fixes files 19 | ``` 20 | pnpm run lint 21 | ``` 22 | 23 | ### Customize configuration 24 | See [Configuration Reference](https://cli.vuejs.org/config/). 25 | -------------------------------------------------------------------------------- /packages/filters/hexagon/examples/vue2/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /packages/filters/hexagon/examples/vue2/jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "esnext", 5 | "baseUrl": "./", 6 | "moduleResolution": "node", 7 | "paths": { 8 | "@/*": [ 9 | "src/*" 10 | ] 11 | }, 12 | "lib": [ 13 | "esnext", 14 | "dom", 15 | "dom.iterable", 16 | "scripthost" 17 | ] 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /packages/filters/hexagon/examples/vue2/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue2-test", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "core-js": "^3.8.3", 12 | "universal-vue-template": "^0.0.4", 13 | "vue": "^2.6.14" 14 | }, 15 | "devDependencies": { 16 | "@babel/core": "^7.12.16", 17 | "@babel/eslint-parser": "^7.12.16", 18 | "@vue/cli-plugin-babel": "~5.0.0", 19 | "@vue/cli-plugin-eslint": "~5.0.0", 20 | "@vue/cli-service": "~5.0.0", 21 | "eslint": "^7.32.0", 22 | "eslint-plugin-vue": "^8.0.3", 23 | "vue-template-compiler": "^2.6.14" 24 | }, 25 | "eslintConfig": { 26 | "root": true, 27 | "env": { 28 | "node": true 29 | }, 30 | "extends": [ 31 | "plugin:vue/essential", 32 | "eslint:recommended" 33 | ], 34 | "parserOptions": { 35 | "parser": "@babel/eslint-parser" 36 | }, 37 | "rules": {} 38 | }, 39 | "browserslist": [ 40 | "> 1%", 41 | "last 2 versions", 42 | "not dead" 43 | ] 44 | } 45 | -------------------------------------------------------------------------------- /packages/filters/hexagon/examples/vue2/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbeea/awesome-image/397ab12b7c72fb66fe117e62ff16ee0f91adb11e/packages/filters/hexagon/examples/vue2/public/favicon.ico -------------------------------------------------------------------------------- /packages/filters/hexagon/examples/vue2/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /packages/filters/hexagon/examples/vue2/src/App.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 18 | 19 | 29 | -------------------------------------------------------------------------------- /packages/filters/hexagon/examples/vue2/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbeea/awesome-image/397ab12b7c72fb66fe117e62ff16ee0f91adb11e/packages/filters/hexagon/examples/vue2/src/assets/logo.png -------------------------------------------------------------------------------- /packages/filters/hexagon/examples/vue2/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | Vue.config.productionTip = false 5 | 6 | new Vue({ 7 | render: h => h(App), 8 | }).$mount('#app') 9 | -------------------------------------------------------------------------------- /packages/filters/hexagon/examples/vue2/vue.config.js: -------------------------------------------------------------------------------- 1 | const { defineConfig } = require('@vue/cli-service') 2 | module.exports = defineConfig({ 3 | transpileDependencies: true 4 | }) 5 | -------------------------------------------------------------------------------- /packages/filters/hexagon/examples/vue3/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | 6 | # local env files 7 | .env.local 8 | .env.*.local 9 | 10 | # Log files 11 | npm-debug.log* 12 | yarn-debug.log* 13 | yarn-error.log* 14 | pnpm-debug.log* 15 | 16 | # Editor directories and files 17 | .idea 18 | .vscode 19 | *.suo 20 | *.ntvs* 21 | *.njsproj 22 | *.sln 23 | *.sw? 24 | -------------------------------------------------------------------------------- /packages/filters/hexagon/examples/vue3/.npmrc: -------------------------------------------------------------------------------- 1 | shamefully-hoist=true 2 | -------------------------------------------------------------------------------- /packages/filters/hexagon/examples/vue3/README.md: -------------------------------------------------------------------------------- 1 | # vue3-test 2 | 3 | ## Project setup 4 | ``` 5 | pnpm install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | pnpm run serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | pnpm run build 16 | ``` 17 | 18 | ### Lints and fixes files 19 | ``` 20 | pnpm run lint 21 | ``` 22 | 23 | ### Customize configuration 24 | See [Configuration Reference](https://cli.vuejs.org/config/). 25 | -------------------------------------------------------------------------------- /packages/filters/hexagon/examples/vue3/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /packages/filters/hexagon/examples/vue3/jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "esnext", 5 | "baseUrl": "./", 6 | "moduleResolution": "node", 7 | "paths": { 8 | "@/*": [ 9 | "src/*" 10 | ] 11 | }, 12 | "lib": [ 13 | "esnext", 14 | "dom", 15 | "dom.iterable", 16 | "scripthost" 17 | ] 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /packages/filters/hexagon/examples/vue3/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue3-test", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "core-js": "^3.8.3", 12 | "universal-vue-template": "^0.0.4", 13 | "vue": "^3.2.13" 14 | }, 15 | "devDependencies": { 16 | "@babel/core": "^7.12.16", 17 | "@babel/eslint-parser": "^7.12.16", 18 | "@vue/cli-plugin-babel": "~5.0.0", 19 | "@vue/cli-plugin-eslint": "~5.0.0", 20 | "@vue/cli-service": "~5.0.0", 21 | "eslint": "^7.32.0", 22 | "eslint-plugin-vue": "^8.0.3" 23 | }, 24 | "eslintConfig": { 25 | "root": true, 26 | "env": { 27 | "node": true 28 | }, 29 | "extends": [ 30 | "plugin:vue/vue3-essential", 31 | "eslint:recommended" 32 | ], 33 | "parserOptions": { 34 | "parser": "@babel/eslint-parser" 35 | }, 36 | "rules": {} 37 | }, 38 | "browserslist": [ 39 | "> 1%", 40 | "last 2 versions", 41 | "not dead", 42 | "not ie 11" 43 | ] 44 | } 45 | -------------------------------------------------------------------------------- /packages/filters/hexagon/examples/vue3/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbeea/awesome-image/397ab12b7c72fb66fe117e62ff16ee0f91adb11e/packages/filters/hexagon/examples/vue3/public/favicon.ico -------------------------------------------------------------------------------- /packages/filters/hexagon/examples/vue3/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /packages/filters/hexagon/examples/vue3/src/App.vue: -------------------------------------------------------------------------------- 1 | 5 | 6 | 16 | 17 | 27 | -------------------------------------------------------------------------------- /packages/filters/hexagon/examples/vue3/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbeea/awesome-image/397ab12b7c72fb66fe117e62ff16ee0f91adb11e/packages/filters/hexagon/examples/vue3/src/assets/logo.png -------------------------------------------------------------------------------- /packages/filters/hexagon/examples/vue3/src/main.js: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import App from './App.vue' 3 | 4 | createApp(App).mount('#app') 5 | -------------------------------------------------------------------------------- /packages/filters/hexagon/examples/vue3/vue.config.js: -------------------------------------------------------------------------------- 1 | const { defineConfig } = require('@vue/cli-service') 2 | module.exports = defineConfig({ 3 | transpileDependencies: true 4 | }) 5 | -------------------------------------------------------------------------------- /packages/filters/hexagon/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite App 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /packages/filters/hexagon/patches/vue-template-compiler+2.6.14.patch: -------------------------------------------------------------------------------- 1 | diff --git a/node_modules/vue-template-compiler/index.js b/node_modules/vue-template-compiler/index.js 2 | index dcc7e6c..9775466 100644 3 | --- a/node_modules/vue-template-compiler/index.js 4 | +++ b/node_modules/vue-template-compiler/index.js 5 | @@ -1,5 +1,5 @@ 6 | try { 7 | - var vueVersion = require('vue').version 8 | + var vueVersion = require('vue2').version 9 | } catch (e) {} 10 | 11 | var packageName = require('./package.json').name 12 | -------------------------------------------------------------------------------- /packages/filters/hexagon/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbeea/awesome-image/397ab12b7c72fb66fe117e62ff16ee0f91adb11e/packages/filters/hexagon/public/favicon.ico -------------------------------------------------------------------------------- /packages/filters/hexagon/scripts/copy.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const copy = require('./util').copy 3 | copy(path.join(__dirname, '../dist/vue3/index.es.js'), path.join(__dirname, '../dist/index.es.js')) 4 | copy(path.join(__dirname, '../dist/vue3/index.umd.js'), path.join(__dirname, '../dist/index.umd.js')) 5 | -------------------------------------------------------------------------------- /packages/filters/hexagon/scripts/postinstall.js: -------------------------------------------------------------------------------- 1 | 2 | /* eslint-disable @typescript-eslint/no-var-requires */ 3 | const fs = require('fs') 4 | const path = require('path') 5 | const vue = require('vue') 6 | const pkg = require('../package.json') 7 | const copy = require('./util').copy 8 | const version = vue.version 9 | const isVue2 = +version.split('.')[0] === 2 10 | 11 | if (isVue2) { 12 | copy(path.join(__dirname, '../dist/vue2/index.umd.js'), path.join(__dirname, '../dist/index.umd.js')) 13 | copy(path.join(__dirname, '../dist/vue2/index.es.js'), path.join(__dirname, '../dist/index.es.js')) 14 | } 15 | else { 16 | copy(path.join(__dirname, '../dist/vue3/index.umd.js'), path.join(__dirname, '../dist/index.umd.js')) 17 | copy(path.join(__dirname, '../dist/vue3/index.es.js'), path.join(__dirname, '../dist/index.es.js')) 18 | } 19 | -------------------------------------------------------------------------------- /packages/filters/hexagon/scripts/util.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs') 2 | function copy(src, dest) { 3 | try { 4 | fs.unlinkSync(dest) 5 | } 6 | catch (error) { } 7 | try { 8 | const content = fs.readFileSync(src, 'utf-8') 9 | fs.writeFileSync(dest, content, 'utf-8') 10 | } 11 | catch (error) { } 12 | } 13 | exports.copy = copy 14 | -------------------------------------------------------------------------------- /packages/filters/hexagon/src/App.vue: -------------------------------------------------------------------------------- 1 | 27 | 28 | 51 | 52 | 65 | -------------------------------------------------------------------------------- /packages/filters/hexagon/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbeea/awesome-image/397ab12b7c72fb66fe117e62ff16ee0f91adb11e/packages/filters/hexagon/src/assets/logo.png -------------------------------------------------------------------------------- /packages/filters/hexagon/src/env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | declare module '*.vue' { 4 | import type { DefineComponent } from 'vue' 5 | // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types 6 | const component: DefineComponent<{}, {}, any> 7 | export default component 8 | } 9 | -------------------------------------------------------------------------------- /packages/filters/hexagon/src/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '../../../../utils/install' 2 | import FilterHexagon from './components/index.vue' 3 | export const AsFilterHexagon = withInstall(FilterHexagon) 4 | export default AsFilterHexagon 5 | -------------------------------------------------------------------------------- /packages/filters/hexagon/src/main.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue-demi' 2 | import App from './App.vue' 3 | 4 | createApp(App).mount('#app') 5 | -------------------------------------------------------------------------------- /packages/filters/hexagon/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "esnext", 4 | "useDefineForClassFields": true, 5 | "module": "esnext", 6 | "moduleResolution": "node", 7 | "strict": true, 8 | "jsx": "preserve", 9 | "sourceMap": true, 10 | "resolveJsonModule": true, 11 | "esModuleInterop": true, 12 | "lib": ["esnext", "dom"] 13 | }, 14 | "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"], 15 | "references": [{ "path": "./tsconfig.node.json" }] 16 | } 17 | -------------------------------------------------------------------------------- /packages/filters/hexagon/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "module": "esnext", 5 | "moduleResolution": "node" 6 | }, 7 | "include": ["vite.config.ts", "vite.config.vue2.ts", "vite.config.vue3.ts"] 8 | } 9 | -------------------------------------------------------------------------------- /packages/filters/hexagon/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import vue from '@vitejs/plugin-vue' 3 | import vueJsx from '@vitejs/plugin-vue-jsx' 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [vue(), vueJsx()], 7 | }) 8 | -------------------------------------------------------------------------------- /packages/filters/hexagon/vite.config.vue2.ts: -------------------------------------------------------------------------------- 1 | import { resolve } from 'path' 2 | import { defineConfig } from 'vite' 3 | import { createVuePlugin } from 'vite-plugin-vue2' 4 | import vueJsx from '@vitejs/plugin-vue-jsx' 5 | // https://vitejs.dev/config/ 6 | export default defineConfig({ 7 | plugins: [createVuePlugin(), vueJsx()], 8 | build: { 9 | outDir: './dist/vue2', 10 | 11 | lib: { 12 | entry: resolve(__dirname, 'src/index.ts'), 13 | fileName: format => `index.${format}.js`, 14 | name: 'AsFilterHexagon', 15 | }, 16 | cssCodeSplit: false, 17 | rollupOptions: { 18 | external: ['vue', 'vue-demi'], 19 | output: { 20 | globals: { 21 | 'vue': 'Vue', 22 | 'vue-demi': 'VueDemi', 23 | }, 24 | }, 25 | }, 26 | }, 27 | }) 28 | -------------------------------------------------------------------------------- /packages/filters/hexagon/vite.config.vue3.ts: -------------------------------------------------------------------------------- 1 | import { resolve } from 'path' 2 | import { defineConfig } from 'vite' 3 | import vue from '@vitejs/plugin-vue' 4 | import vueJsx from '@vitejs/plugin-vue-jsx' 5 | // https://vitejs.dev/config/ 6 | export default defineConfig({ 7 | plugins: [vue(), vueJsx()], 8 | build: { 9 | outDir: './dist/vue3', 10 | 11 | lib: { 12 | entry: resolve(__dirname, 'src/index.ts'), 13 | fileName: format => `index.${format}.js`, 14 | name: 'AsFilterHexagon', 15 | }, 16 | cssCodeSplit: false, 17 | rollupOptions: { 18 | external: ['vue', 'vue-demi'], 19 | output: { 20 | globals: { 21 | 'vue': 'Vue', 22 | 'vue-demi': 'VueDemi', 23 | }, 24 | }, 25 | }, 26 | }, 27 | }) 28 | -------------------------------------------------------------------------------- /packages/image/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | examples/vue3/node_modules 12 | dist 13 | dist-ssr 14 | *.local 15 | 16 | # Editor directories and files 17 | .vscode/* 18 | !.vscode/extensions.json 19 | .idea 20 | .DS_Store 21 | *.suo 22 | *.ntvs* 23 | *.njsproj 24 | *.sln 25 | *.sw? 26 | 27 | .history 28 | -------------------------------------------------------------------------------- /packages/image/README.md: -------------------------------------------------------------------------------- 1 | # Universal vue component template 2 | Awesome image component for vue2 & vue3. Lazyload + Responsive + Progressive. Filter supported(webgl filter eg.) -------------------------------------------------------------------------------- /packages/image/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite App 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /packages/image/patches/vue-template-compiler+2.6.14.patch: -------------------------------------------------------------------------------- 1 | diff --git a/node_modules/vue-template-compiler/index.js b/node_modules/vue-template-compiler/index.js 2 | index dcc7e6c..9775466 100644 3 | --- a/node_modules/vue-template-compiler/index.js 4 | +++ b/node_modules/vue-template-compiler/index.js 5 | @@ -1,5 +1,5 @@ 6 | try { 7 | - var vueVersion = require('vue').version 8 | + var vueVersion = require('vue2').version 9 | } catch (e) {} 10 | 11 | var packageName = require('./package.json').name 12 | -------------------------------------------------------------------------------- /packages/image/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbeea/awesome-image/397ab12b7c72fb66fe117e62ff16ee0f91adb11e/packages/image/public/favicon.ico -------------------------------------------------------------------------------- /packages/image/scripts/copy.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const copy = require('./util').copy 3 | copy(path.join(__dirname, '../dist/vue3/style.css'), path.join(__dirname, '../dist/style.css')) 4 | copy(path.join(__dirname, '../dist/vue3/index.es.js'), path.join(__dirname, '../dist/index.es.js')) 5 | copy(path.join(__dirname, '../dist/vue3/index.js'), path.join(__dirname, '../dist/index.js')) 6 | copy(path.join(__dirname, '../dist/vue3/index.umd.js'), path.join(__dirname, '../dist/index.umd.js')) 7 | -------------------------------------------------------------------------------- /packages/image/scripts/postinstall.js: -------------------------------------------------------------------------------- 1 | 2 | /* eslint-disable @typescript-eslint/no-var-requires */ 3 | const fs = require('fs') 4 | const path = require('path') 5 | const vue = require('vue') 6 | const pkg = require('../package.json') 7 | const copy = require('./util.js').copy 8 | const version = vue.version 9 | const isVue2 = +version.split('.')[0] === 2 10 | 11 | if (isVue2) { 12 | copy(path.join(__dirname, '../dist/vue2/index.umd.js'), path.join(__dirname, '../dist/index.umd.js')) 13 | copy(path.join(__dirname, '../dist/vue2/index.es.js'), path.join(__dirname, '../dist/index.es.js')) 14 | copy(path.join(__dirname, '../dist/vue2/index.js'), path.join(__dirname, '../dist/index.js')) 15 | } 16 | else { 17 | copy(path.join(__dirname, '../dist/vue3/index.umd.js'), path.join(__dirname, '../dist/index.umd.js')) 18 | copy(path.join(__dirname, '../dist/vue3/index.es.js'), path.join(__dirname, '../dist/index.es.js')) 19 | copy(path.join(__dirname, '../dist/vue2/index.js'), path.join(__dirname, '../dist/index.js')) 20 | } 21 | -------------------------------------------------------------------------------- /packages/image/scripts/util.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs') 2 | function copy(src, dest) { 3 | try { 4 | fs.unlinkSync(dest) 5 | } 6 | catch (error) { } 7 | try { 8 | const content = fs.readFileSync(src, 'utf-8') 9 | fs.writeFileSync(dest, content, 'utf-8') 10 | } 11 | catch (error) { } 12 | } 13 | exports.copy = copy 14 | -------------------------------------------------------------------------------- /packages/image/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbeea/awesome-image/397ab12b7c72fb66fe117e62ff16ee0f91adb11e/packages/image/src/assets/logo.png -------------------------------------------------------------------------------- /packages/image/src/components/index.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent, isVue2 } from 'vue-demi' 2 | import ImageComponent from './ImageComponent' 3 | 4 | export default defineComponent({ 5 | name: 'AsImage', 6 | components: { 7 | ImageComponent, 8 | }, 9 | inheritAttrs: false, 10 | setup() {}, 11 | render() { 12 | if (isVue2) { 13 | const loading = () => { 14 | return this.$slots.loading 15 | ? 18 | : null 19 | } 20 | return ( 21 | 22 | 30 | {loading()} 31 | 32 | ) 33 | } 34 | else { 35 | return ( 36 | 37 | 38 | ) 39 | } 40 | }, 41 | }) 42 | -------------------------------------------------------------------------------- /packages/image/src/components/style.module.scss: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | :global(.vue-awesome-image) { 5 | :global(.fade-enter-active), :global(.fade-leave-active) { 6 | transition: opacity 1s ease; 7 | } 8 | 9 | :global(.fade-enter-from), :global(.fade-leave-to), :global(.fade-enter) { 10 | opacity: 0; 11 | } 12 | 13 | position: relative; 14 | display: inline-block; 15 | vertical-align: bottom; 16 | 17 | 18 | 19 | .image-background { 20 | position: absolute; 21 | top: 0; 22 | left: 0; 23 | width: 100%; 24 | height: 100%; 25 | // z-index: -3; 26 | } 27 | 28 | .image-placeholder-wrapper { 29 | position: absolute; 30 | top: 0; 31 | left: 0; 32 | width: 100%; 33 | height: 100%; 34 | overflow: hidden; 35 | .image-placeholder { 36 | position: relative; 37 | &.placeholder-loaded { 38 | &.has-webgl-filter { 39 | opacity: 0 !important; 40 | } 41 | } 42 | } 43 | img { 44 | filter: blur(10px); 45 | width: 100%; 46 | height: 100%; 47 | } 48 | } 49 | 50 | .image { 51 | position: relative; 52 | } 53 | 54 | img { 55 | width: 100%; 56 | height: auto; 57 | transition: opacity; 58 | vertical-align: bottom; 59 | } 60 | img.has-webgl-filter.image-loaded { 61 | position: absolute; 62 | opacity: 0 !important; 63 | left: 0; 64 | top: 0; 65 | } 66 | img[srcset=""] { visibility: hidden; opacity: 0;} 67 | img.placeholder-loaded { 68 | opacity: 1 !important; 69 | } 70 | img.image-loaded { 71 | opacity: 1 !important; 72 | } 73 | canvas { 74 | vertical-align: bottom; 75 | } 76 | } 77 | -------------------------------------------------------------------------------- /packages/image/src/composables/default-image-provider.ts: -------------------------------------------------------------------------------- 1 | 2 | import type { ImageOptions, ImageUrlGenerator } from '../interface' 3 | const imageUrlGeneratorDefault: ImageUrlGenerator = (url: string, options: ImageOptions = {}): string => url 4 | export default imageUrlGeneratorDefault 5 | -------------------------------------------------------------------------------- /packages/image/src/composables/lazy.ts: -------------------------------------------------------------------------------- 1 | import type { Ref } from 'vue-demi' 2 | import { onMounted, ref } from 'vue-demi' 3 | export function useLazy(imageRef: Ref, offset: Ref) { 4 | const loaded = ref(false) 5 | const image = ref() 6 | onMounted(() => { 7 | const imageObserver = new IntersectionObserver((entries, observer) => { 8 | entries.forEach((entry) => { 9 | if (entry.isIntersecting) { 10 | const imageDom = entry.target as any 11 | imageDom.srcset = imageDom.dataset.srcset 12 | imageObserver.unobserve(imageDom) 13 | } 14 | }) 15 | }, { 16 | rootMargin: offset.value, 17 | }) 18 | imageObserver.observe(imageRef.value) 19 | }) 20 | return { loaded, image } 21 | } 22 | -------------------------------------------------------------------------------- /packages/image/src/composables/merge-options.ts: -------------------------------------------------------------------------------- 1 | import type { ToRefs } from 'vue-demi' 2 | import { ref } from 'vue-demi' 3 | import type { AsImageOptions } from '../interface' 4 | import imageUrlGeneratorDefault from '../composables/default-image-provider' 5 | 6 | const defaultOptions: AsImageOptions = { 7 | quanlity: 0, 8 | format: '', 9 | lazy: false, 10 | placeholderLazyOffset: '0px', 11 | imageLazyOffset: '0px', 12 | responsive: false, 13 | progressive: false, 14 | breakpoints: [640, 768, 1024, 1280, 1536], 15 | sizes: '100vw', 16 | imageUrlGenerator: imageUrlGeneratorDefault, 17 | duration: 1, 18 | autoWebp: false, 19 | } 20 | 21 | export function useMergedOptions(props: ToRefs, globals: AsImageOptions = {}) { 22 | const mergedOptions: any = {}; 23 | (Object.keys(defaultOptions) as (keyof AsImageOptions)[]).forEach((key) => { 24 | mergedOptions[key] = (props[key]?.value ? props[key] : undefined) ?? ref(globals[key] ?? defaultOptions[key]) 25 | }) 26 | return mergedOptions as ToRefs> 27 | } 28 | -------------------------------------------------------------------------------- /packages/image/src/composables/responsive.ts: -------------------------------------------------------------------------------- 1 | 2 | import type { Ref } from 'vue-demi' 3 | import { computed } from 'vue-demi' 4 | import type { ImageUrlGenerator } from '../interface' 5 | 6 | export function useResponsive(src: Ref, breakpoints: Ref>, imageUrlGenerator: Ref, options: any = {}) { 7 | const srcset = computed(() => breakpoints.value.map((size) => { 8 | const url = imageUrlGenerator.value(src.value, Object.assign({ 9 | width: size, 10 | }, options)) 11 | return `${url} ${size}w` 12 | }).join(', ')) 13 | return srcset 14 | } 15 | -------------------------------------------------------------------------------- /packages/image/src/env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | import 'vue-demi' 3 | declare module '*.vue' { 4 | import type { DefineComponent } from 'vue' 5 | // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types 6 | const component: DefineComponent<{}, {}, any> 7 | export default component 8 | } 9 | // declare module './style.module.scss' 10 | 11 | declare module 'vue-demi' { 12 | interface ComponentCustomProperties { 13 | $scopedSlots: any 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /packages/image/src/index.ts: -------------------------------------------------------------------------------- 1 | 2 | import { isVue3 } from 'vue-demi' 3 | import type { App, Plugin } from 'vue-demi' 4 | 5 | import Image from './components/index' 6 | import type { AsImageOptions } from './interface' 7 | 8 | export type SFCWithInstall = T & Plugin 9 | 10 | Image.install = (app: any, options: AsImageOptions = {}) => { 11 | if (options.imageUrlGenerator) { 12 | if (isVue3) { 13 | app.provide('imageUrlGenerator', options.imageUrlGenerator) 14 | app.provide('$asImageOptions', options) 15 | } 16 | else { 17 | app.prototype.$imageUrlGenerator = options.imageUrlGenerator 18 | app.prototype.$asImageOptions = options 19 | } 20 | } 21 | app.component(Image.name, Image) 22 | } 23 | const AsImage = Image as SFCWithInstall 24 | export { AsImage } 25 | export default AsImage 26 | -------------------------------------------------------------------------------- /packages/image/src/interface.ts: -------------------------------------------------------------------------------- 1 | import type { ComputedRef, Ref } from 'vue-demi' 2 | export interface ImageOptions { 3 | width?: number 4 | height?: number 5 | blur?: number 6 | quanlity?: number 7 | format?: string 8 | } 9 | export interface ImageUrlGenerator { 10 | (url: string, options: ImageOptions): string 11 | } 12 | 13 | export interface AsImageOptions { 14 | quanlity?: number 15 | format?: string 16 | lazy?: boolean 17 | placeholderLazyOffset?: string 18 | imageLazyOffset?: string 19 | responsive?: boolean 20 | progressive?: boolean 21 | breakpoints?: number[] 22 | sizes?: string 23 | imageUrlGenerator?: ImageUrlGenerator 24 | duration?: number 25 | autoWebp?: boolean 26 | } 27 | -------------------------------------------------------------------------------- /packages/image/src/main.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue-demi' 2 | import { imageUrlGeneratorFP } from '@awesome-image/services' 3 | import App from './App.vue' 4 | import { AsImage } from '.' 5 | const app = createApp(App) 6 | app.use(AsImage, { 7 | imageUrlGenerator: imageUrlGeneratorFP, 8 | lazy: true, 9 | }) 10 | app.mount('#app') 11 | -------------------------------------------------------------------------------- /packages/image/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "esnext", 4 | "useDefineForClassFields": true, 5 | "module": "esnext", 6 | "moduleResolution": "node", 7 | "strict": true, 8 | "jsx": "preserve", 9 | "sourceMap": true, 10 | "resolveJsonModule": true, 11 | "esModuleInterop": true, 12 | "lib": ["esnext", "dom"] 13 | }, 14 | "include": ["src/env.d.ts", "src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"], 15 | "references": [{ "path": "./tsconfig.node.json" }] 16 | } 17 | -------------------------------------------------------------------------------- /packages/image/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "module": "esnext", 5 | "moduleResolution": "node" 6 | }, 7 | "include": ["vite.config.ts", "vite.config.vue2.ts", "vite.config.vue3.ts", "vite-plugin-vue2-transition.ts"] 8 | } 9 | -------------------------------------------------------------------------------- /packages/image/vite-plugin-vue2-transition.ts: -------------------------------------------------------------------------------- 1 | import type { Plugin } from 'vite' 2 | 3 | function rmTransitionPlugin(): Plugin { 4 | return { 5 | name: 'vite-plugin-rm-transition', 6 | async transform(code, id) { 7 | if (!id.endsWith('.tsx')) return 8 | code.match(/import\s+{.*(Transition\s*,).*\sfrom\s/s) 9 | code = code.replace(RegExp.$1, '') 10 | code.match(/components\s*:\s*{.*(Transition\s*,?)/s) 11 | code = code.replace(RegExp.$1, '') 12 | return code 13 | }, 14 | } 15 | } 16 | 17 | export default rmTransitionPlugin 18 | -------------------------------------------------------------------------------- /packages/image/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import vue from '@vitejs/plugin-vue' 3 | import vueJsx from '@vitejs/plugin-vue-jsx' 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | css: { 7 | modules: { 8 | localsConvention: 'camelCase', 9 | }, 10 | }, 11 | plugins: [vue(), vueJsx()], 12 | }) 13 | -------------------------------------------------------------------------------- /packages/image/vite.config.vue2.ts: -------------------------------------------------------------------------------- 1 | import { resolve } from 'path' 2 | import { defineConfig } from 'vite' 3 | import { createVuePlugin } from 'vite-plugin-vue2' 4 | import vueJsx from '@vitejs/plugin-vue-jsx' 5 | import rmTransition from './vite-plugin-vue2-transition' 6 | 7 | // https://vitejs.dev/config/ 8 | export default defineConfig({ 9 | css: { 10 | modules: { 11 | localsConvention: 'camelCase', 12 | }, 13 | }, 14 | plugins: [rmTransition(), createVuePlugin(), vueJsx()], 15 | build: { 16 | outDir: './dist/vue2', 17 | 18 | lib: { 19 | formats: ['es', 'umd', 'cjs'], 20 | entry: resolve(__dirname, 'src/index.ts'), 21 | fileName: (format) => { 22 | if (format === 'es') return 'index.es.js' 23 | else if (format === 'umd') return 'index.umd.js' 24 | else if (format === 'cjs') return 'index.js' 25 | }, 26 | name: 'AsImage', 27 | }, 28 | cssCodeSplit: false, 29 | rollupOptions: { 30 | external: ['vue', 'vue-demi'], 31 | output: { 32 | globals: { 33 | 'vue': 'Vue', 34 | 'vue-demi': 'VueDemi', 35 | }, 36 | }, 37 | }, 38 | }, 39 | }) 40 | -------------------------------------------------------------------------------- /packages/image/vite.config.vue3.ts: -------------------------------------------------------------------------------- 1 | import { resolve } from 'path' 2 | import { defineConfig } from 'vite' 3 | import vue from '@vitejs/plugin-vue' 4 | import vueJsx from '@vitejs/plugin-vue-jsx' 5 | // https://vitejs.dev/config/ 6 | export default defineConfig({ 7 | css: { 8 | modules: { 9 | localsConvention: 'camelCase', 10 | }, 11 | }, 12 | plugins: [vue(), vueJsx()], 13 | build: { 14 | outDir: './dist/vue3', 15 | 16 | lib: { 17 | formats: ['es', 'umd', 'cjs'], 18 | entry: resolve(__dirname, 'src/index.ts'), 19 | fileName: (format) => { 20 | if (format === 'es') return 'index.es.js' 21 | else if (format === 'umd') return 'index.umd.js' 22 | else if (format === 'cjs') return 'index.js' 23 | }, 24 | name: 'AsImage', 25 | }, 26 | cssCodeSplit: false, 27 | rollupOptions: { 28 | external: ['vue', 'vue-demi'], 29 | output: { 30 | globals: { 31 | 'vue': 'Vue', 32 | 'vue-demi': 'VueDemi', 33 | }, 34 | }, 35 | }, 36 | }, 37 | }) 38 | -------------------------------------------------------------------------------- /packages/services/fastly/index.ts: -------------------------------------------------------------------------------- 1 | import type { ImageOptions, ImageUrlGenerator } from '../../image/src/interface' 2 | 3 | const imageUrlGeneratorFastly: ImageUrlGenerator = (url: string, options: ImageOptions = {}): string => { 4 | const query: Array = Object.entries(options).map(kv => `${kv[0]}=${kv[1]}`) 5 | 6 | if (/(.+\?$)|(.+\?.+&$)/.test(url)) 7 | return url + query.join('&') 8 | else if (/.+\?.+/.test(url)) 9 | return `${url}&${query.join('&')}` 10 | else 11 | return `${url}?${query.join('&')}` 12 | } 13 | 14 | export { imageUrlGeneratorFastly } 15 | -------------------------------------------------------------------------------- /packages/services/fp/index.ts: -------------------------------------------------------------------------------- 1 | import type { ImageOptions, ImageUrlGenerator } from '../../image/src/interface' 2 | 3 | const imageUrlGeneratorFP: ImageUrlGenerator = (url: string, options: ImageOptions = {}): string => { 4 | const query: Array = [] 5 | if (options.width) 6 | query.push(`w=${options.width}`) 7 | if (options.blur) 8 | query.push(`b=${options.blur}`) 9 | if (options.quanlity) 10 | query.push(`q=${options.quanlity}`) 11 | if (options.format) 12 | query.push(`f=${options.format}`) 13 | 14 | if (!query.length) return url 15 | 16 | if (/(.+\?$)|(.+\?.+&$)/.test(url)) // a.jpg? a.jpg?id=1& 17 | return url + query.join('&') 18 | else if (/.+\?.+/.test(url)) // a.jpg?id 19 | return `${url}&${query.join('&')}` 20 | else // a.jpg 21 | return `${url}?${query.join('&')}` 22 | } 23 | 24 | export { imageUrlGeneratorFP } 25 | -------------------------------------------------------------------------------- /packages/services/imagekit/index.ts: -------------------------------------------------------------------------------- 1 | import type { ImageOptions, ImageUrlGenerator } from '../../image/src/interface' 2 | 3 | const imageUrlGeneratorImagekit: ImageUrlGenerator = (url: string, options: ImageOptions = {}): string => { 4 | const params: Array = [] 5 | if (options.width) 6 | params.push(`w-${options.width}`) 7 | if (options.blur) 8 | params.push(`bl-${options.blur * 5}`) 9 | if (options.quanlity) 10 | params.push(`q-${options.quanlity}`) 11 | if (options.format) 12 | params.push(`f-${options.format}`) 13 | 14 | const query = `tr=${params.join(',')}` 15 | 16 | if (/(.+\?$)|(.+\?.+&$)/.test(url)) 17 | return url + query 18 | else if (/.+\?.+/.test(url)) 19 | return `${url}&${query}` 20 | else 21 | return `${url}?${query}` 22 | } 23 | 24 | export { imageUrlGeneratorImagekit } 25 | -------------------------------------------------------------------------------- /packages/services/index.ts: -------------------------------------------------------------------------------- 1 | export * from './fp' 2 | export * from './fastly' 3 | export * from './imagekit' 4 | export * from './upyun' 5 | -------------------------------------------------------------------------------- /packages/services/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@awesome-image/services", 3 | "publishConfig": { 4 | "access": "public" 5 | }, 6 | "version": "0.0.2", 7 | "description": "", 8 | "module": "./dist/index.mjs", 9 | "main": "./dist/index.js", 10 | "files": [ 11 | "dist" 12 | ], 13 | "scripts": { 14 | "dev": "tsup ./index.ts --dts --format esm,cjs --watch", 15 | "build": "tsup ./index.ts --dts --format esm,cjs,iife" 16 | }, 17 | "author": "", 18 | "devDependencies": { 19 | "typescript": "^4.5.4", 20 | "tsup": "^5.11.13", 21 | "vue": "^3.2.31" 22 | }, 23 | "license": "ISC", 24 | "dependencies": { 25 | "vue-demi": "^0.12.1" 26 | }, 27 | "peerDependencies": { 28 | "@vue/composition-api": "^1.0.0-rc.1", 29 | "vue": "^2.0.0 || >=3.0.0" 30 | }, 31 | "peerDependenciesMeta": { 32 | "@vue/composition-api": { 33 | "optional": true 34 | } 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /packages/services/qiniu/index.ts: -------------------------------------------------------------------------------- 1 | import type { Ref } from 'vue-demi' 2 | import { computed } from 'vue-demi' 3 | 4 | function stringifyPrimitive(v: any) { 5 | switch (typeof v) { 6 | case 'string': 7 | return v 8 | 9 | case 'boolean': 10 | return v ? 'true' : 'false' 11 | 12 | case 'number': 13 | return isFinite(v) ? v : '' 14 | 15 | default: 16 | return '' 17 | } 18 | } 19 | 20 | function stringify(obj: any, sep?: string | undefined, eq?: string | undefined, name?: undefined) { 21 | sep = sep || '&' 22 | eq = eq || '=' 23 | if (obj === null) { obj = undefined } 24 | 25 | else if (typeof obj === 'object') { 26 | return Object.keys(obj).map((k) => { 27 | const ks = encodeURIComponent(stringifyPrimitive(k)) + eq 28 | if (obj && Array.isArray(obj[k])) { 29 | return obj[k].map((v: any) => { 30 | return ks + encodeURIComponent(stringifyPrimitive(v)) 31 | }).join(sep) 32 | } 33 | else { 34 | return ks + encodeURIComponent(stringifyPrimitive(obj[k])) 35 | } 36 | }).join(sep) 37 | } 38 | 39 | if (!name) return '' 40 | return encodeURIComponent(stringifyPrimitive(name)) + eq 41 | + encodeURIComponent(stringifyPrimitive(obj)) 42 | } 43 | 44 | export function useAppendQuery(url: Ref, querystring: Record = {}) { 45 | const newUrl = computed(() => { 46 | if (/(.+\?$)|(.+\?.+&$)/.test(url.value)) 47 | return url.value + stringify(querystring) 48 | else if (/.+\?.+/.test(url.value)) 49 | return `${url.value}&${stringify(querystring)}` 50 | else 51 | return `${url.value}?${stringify(querystring)}` 52 | }) 53 | 54 | return newUrl 55 | } 56 | -------------------------------------------------------------------------------- /packages/services/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "esnext", 4 | "useDefineForClassFields": true, 5 | "module": "esnext", 6 | "moduleResolution": "node", 7 | "strict": true, 8 | "jsx": "preserve", 9 | "sourceMap": true, 10 | "preserveSymlinks": false, 11 | "resolveJsonModule": true, 12 | "esModuleInterop": true, 13 | "lib": ["esnext", "dom"] 14 | }, 15 | "include": ["./**/*.ts"] 16 | } 17 | -------------------------------------------------------------------------------- /packages/services/upyun/index.ts: -------------------------------------------------------------------------------- 1 | import type { ImageOptions, ImageUrlGenerator } from '../../image/src/interface' 2 | 3 | const imageUrlGeneratorUpyun: ImageUrlGenerator = (url: string, options: ImageOptions = {}): string => { 4 | const query: Array = [] 5 | if (options.width) 6 | query.push(`fw/${options.width}`) 7 | if (options.blur) 8 | query.push(`gaussblur/${options.blur * 5}x${options.blur * 5}`) 9 | if (options.quanlity) 10 | query.push(`quality/${options.quanlity}`) 11 | if (options.format) 12 | query.push(`format/${options.format}`) 13 | 14 | return `${url}!/${query.join('/')}` 15 | } 16 | 17 | export { imageUrlGeneratorUpyun } 18 | -------------------------------------------------------------------------------- /packages/services/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { resolve } from 'path' 2 | import { defineConfig } from 'vite' 3 | import typescript2 from 'rollup-plugin-typescript2' 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [typescript2()], 7 | build: { 8 | lib: { 9 | entry: resolve(__dirname, 'index.ts'), 10 | fileName: format => `index.${format}.js`, 11 | name: 'useImageUrl', 12 | }, 13 | cssCodeSplit: false, 14 | rollupOptions: { 15 | external: ['vue', 'vue-demi'], 16 | output: { 17 | globals: { 18 | 'vue': 'Vue', 19 | 'vue-demi': 'VueDemi', 20 | }, 21 | }, 22 | }, 23 | }, 24 | }) 25 | -------------------------------------------------------------------------------- /packages/transition/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | examples/vue3/node_modules 12 | dist 13 | dist-ssr 14 | *.local 15 | 16 | # Editor directories and files 17 | .vscode/* 18 | !.vscode/extensions.json 19 | .idea 20 | .DS_Store 21 | *.suo 22 | *.ntvs* 23 | *.njsproj 24 | *.sln 25 | *.sw? 26 | 27 | .history 28 | -------------------------------------------------------------------------------- /packages/transition/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["johnsoncodehk.volar"] 3 | } 4 | -------------------------------------------------------------------------------- /packages/transition/README.md: -------------------------------------------------------------------------------- 1 | # Universal vue component template 2 | - Building Universal Vue Libraries for Vue 2 & 3 3 | - Using vue-demi but you don't need to write "render" function, "template" and "tsx" are supported! 4 | 5 | ## Usage 6 | ### Use this template or clone it 7 | ### Install 8 | ``` 9 | yarn 10 | ``` 11 | ### Develop 12 | ``` 13 | yarn run dev 14 | ``` 15 | ### Build 16 | ``` 17 | yarn run build 18 | ``` 19 | ### Publish 20 | Change package name, publish and install it to test in vue2/3 21 | 22 | If you want to use 'npm link' project locally, you need to edit "package.module" "package.main" according to vue version. 23 | ``` 24 | // vue2 25 | { 26 | "name": "your-component", 27 | "module": "./dist/vue2/index.es.js", 28 | "main": "./dist/vue2/index.umd.js", 29 | ... 30 | } 31 | ``` 32 | ``` 33 | // vue3 34 | { 35 | "name": "your-component", 36 | "module": "./dist/vue3/index.es.js", 37 | "main": "./dist/vue3/index.umd.js", 38 | ... 39 | } 40 | ``` 41 | 42 | ## Example 43 | Install 'universal-vue-template' which built by this template in vue2 or vue3, it will work correctly. 44 | ``` 45 | yarn add universal-vue-template 46 | ``` 47 | 48 | ``` 49 | import Universal from 'universal-vue-template' 50 | import 'universal-vue-template/dist/style.css' 51 | ``` 52 | 53 | Vue2 example 54 | [src](https://github.com/newbeea/universal-vue-component-template/tree/master/examples/vue2) 55 | [preview](https://universal-vue-component-2.vercel.app/) 56 | 57 | Vue3 example 58 | [src](https://github.com/newbeea/universal-vue-component-template/tree/master/examples/vue3) 59 | [preview](https://universal-vue-component-3.vercel.app/) 60 | -------------------------------------------------------------------------------- /packages/transition/examples/vue2/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | 6 | # local env files 7 | .env.local 8 | .env.*.local 9 | 10 | # Log files 11 | npm-debug.log* 12 | yarn-debug.log* 13 | yarn-error.log* 14 | pnpm-debug.log* 15 | 16 | # Editor directories and files 17 | .idea 18 | .vscode 19 | *.suo 20 | *.ntvs* 21 | *.njsproj 22 | *.sln 23 | *.sw? 24 | -------------------------------------------------------------------------------- /packages/transition/examples/vue2/.npmrc: -------------------------------------------------------------------------------- 1 | shamefully-hoist=true 2 | -------------------------------------------------------------------------------- /packages/transition/examples/vue2/README.md: -------------------------------------------------------------------------------- 1 | # vue2-test 2 | 3 | ## Project setup 4 | ``` 5 | pnpm install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | pnpm run serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | pnpm run build 16 | ``` 17 | 18 | ### Lints and fixes files 19 | ``` 20 | pnpm run lint 21 | ``` 22 | 23 | ### Customize configuration 24 | See [Configuration Reference](https://cli.vuejs.org/config/). 25 | -------------------------------------------------------------------------------- /packages/transition/examples/vue2/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /packages/transition/examples/vue2/jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "esnext", 5 | "baseUrl": "./", 6 | "moduleResolution": "node", 7 | "paths": { 8 | "@/*": [ 9 | "src/*" 10 | ] 11 | }, 12 | "lib": [ 13 | "esnext", 14 | "dom", 15 | "dom.iterable", 16 | "scripthost" 17 | ] 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /packages/transition/examples/vue2/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue2-test", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "core-js": "^3.8.3", 12 | "universal-vue-template": "^0.0.4", 13 | "vue": "^2.6.14" 14 | }, 15 | "devDependencies": { 16 | "@babel/core": "^7.12.16", 17 | "@babel/eslint-parser": "^7.12.16", 18 | "@vue/cli-plugin-babel": "~5.0.0", 19 | "@vue/cli-plugin-eslint": "~5.0.0", 20 | "@vue/cli-service": "~5.0.0", 21 | "eslint": "^7.32.0", 22 | "eslint-plugin-vue": "^8.0.3", 23 | "vue-template-compiler": "^2.6.14" 24 | }, 25 | "eslintConfig": { 26 | "root": true, 27 | "env": { 28 | "node": true 29 | }, 30 | "extends": [ 31 | "plugin:vue/essential", 32 | "eslint:recommended" 33 | ], 34 | "parserOptions": { 35 | "parser": "@babel/eslint-parser" 36 | }, 37 | "rules": {} 38 | }, 39 | "browserslist": [ 40 | "> 1%", 41 | "last 2 versions", 42 | "not dead" 43 | ] 44 | } 45 | -------------------------------------------------------------------------------- /packages/transition/examples/vue2/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbeea/awesome-image/397ab12b7c72fb66fe117e62ff16ee0f91adb11e/packages/transition/examples/vue2/public/favicon.ico -------------------------------------------------------------------------------- /packages/transition/examples/vue2/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /packages/transition/examples/vue2/src/App.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 18 | 19 | 29 | -------------------------------------------------------------------------------- /packages/transition/examples/vue2/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbeea/awesome-image/397ab12b7c72fb66fe117e62ff16ee0f91adb11e/packages/transition/examples/vue2/src/assets/logo.png -------------------------------------------------------------------------------- /packages/transition/examples/vue2/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | Vue.config.productionTip = false 5 | 6 | new Vue({ 7 | render: h => h(App), 8 | }).$mount('#app') 9 | -------------------------------------------------------------------------------- /packages/transition/examples/vue2/vue.config.js: -------------------------------------------------------------------------------- 1 | const { defineConfig } = require('@vue/cli-service') 2 | module.exports = defineConfig({ 3 | transpileDependencies: true 4 | }) 5 | -------------------------------------------------------------------------------- /packages/transition/examples/vue3/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | 6 | # local env files 7 | .env.local 8 | .env.*.local 9 | 10 | # Log files 11 | npm-debug.log* 12 | yarn-debug.log* 13 | yarn-error.log* 14 | pnpm-debug.log* 15 | 16 | # Editor directories and files 17 | .idea 18 | .vscode 19 | *.suo 20 | *.ntvs* 21 | *.njsproj 22 | *.sln 23 | *.sw? 24 | -------------------------------------------------------------------------------- /packages/transition/examples/vue3/.npmrc: -------------------------------------------------------------------------------- 1 | shamefully-hoist=true 2 | -------------------------------------------------------------------------------- /packages/transition/examples/vue3/README.md: -------------------------------------------------------------------------------- 1 | # vue3-test 2 | 3 | ## Project setup 4 | ``` 5 | pnpm install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | pnpm run serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | pnpm run build 16 | ``` 17 | 18 | ### Lints and fixes files 19 | ``` 20 | pnpm run lint 21 | ``` 22 | 23 | ### Customize configuration 24 | See [Configuration Reference](https://cli.vuejs.org/config/). 25 | -------------------------------------------------------------------------------- /packages/transition/examples/vue3/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /packages/transition/examples/vue3/jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "esnext", 5 | "baseUrl": "./", 6 | "moduleResolution": "node", 7 | "paths": { 8 | "@/*": [ 9 | "src/*" 10 | ] 11 | }, 12 | "lib": [ 13 | "esnext", 14 | "dom", 15 | "dom.iterable", 16 | "scripthost" 17 | ] 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /packages/transition/examples/vue3/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue3-test", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "core-js": "^3.8.3", 12 | "universal-vue-template": "^0.0.4", 13 | "vue": "^3.2.13" 14 | }, 15 | "devDependencies": { 16 | "@babel/core": "^7.12.16", 17 | "@babel/eslint-parser": "^7.12.16", 18 | "@vue/cli-plugin-babel": "~5.0.0", 19 | "@vue/cli-plugin-eslint": "~5.0.0", 20 | "@vue/cli-service": "~5.0.0", 21 | "eslint": "^7.32.0", 22 | "eslint-plugin-vue": "^8.0.3" 23 | }, 24 | "eslintConfig": { 25 | "root": true, 26 | "env": { 27 | "node": true 28 | }, 29 | "extends": [ 30 | "plugin:vue/vue3-essential", 31 | "eslint:recommended" 32 | ], 33 | "parserOptions": { 34 | "parser": "@babel/eslint-parser" 35 | }, 36 | "rules": {} 37 | }, 38 | "browserslist": [ 39 | "> 1%", 40 | "last 2 versions", 41 | "not dead", 42 | "not ie 11" 43 | ] 44 | } 45 | -------------------------------------------------------------------------------- /packages/transition/examples/vue3/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbeea/awesome-image/397ab12b7c72fb66fe117e62ff16ee0f91adb11e/packages/transition/examples/vue3/public/favicon.ico -------------------------------------------------------------------------------- /packages/transition/examples/vue3/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /packages/transition/examples/vue3/src/App.vue: -------------------------------------------------------------------------------- 1 | 5 | 6 | 16 | 17 | 27 | -------------------------------------------------------------------------------- /packages/transition/examples/vue3/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbeea/awesome-image/397ab12b7c72fb66fe117e62ff16ee0f91adb11e/packages/transition/examples/vue3/src/assets/logo.png -------------------------------------------------------------------------------- /packages/transition/examples/vue3/src/main.js: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import App from './App.vue' 3 | 4 | createApp(App).mount('#app') 5 | -------------------------------------------------------------------------------- /packages/transition/examples/vue3/vue.config.js: -------------------------------------------------------------------------------- 1 | const { defineConfig } = require('@vue/cli-service') 2 | module.exports = defineConfig({ 3 | transpileDependencies: true 4 | }) 5 | -------------------------------------------------------------------------------- /packages/transition/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite App 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /packages/transition/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@awesome-image/transition", 3 | "publishConfig": { 4 | "access": "public" 5 | }, 6 | "version": "0.0.5", 7 | "module": "./dist/index.es.js", 8 | "main": "./dist/index.umd.js", 9 | "files": [ 10 | "dist", 11 | "scripts", 12 | "assets" 13 | ], 14 | "scripts": { 15 | "dev": "vite", 16 | "build": "npm run build:2 && npm run build:3 && npm run copy", 17 | "build:2": "patch-package && vue-demi-switch 2 vue && vite --config vite.config.vue2.ts build", 18 | "build:3": "vue-demi-switch 3 && vite --config vite.config.vue3.ts build", 19 | "watch": "vue-demi-switch 3 && vite --config vite.config.vue3.ts build --watch", 20 | "copy": "node ./scripts/copy.js", 21 | "postinstall": "node ./scripts/postinstall.js", 22 | "preview": "vite preview" 23 | }, 24 | "dependencies": { 25 | "@vue/composition-api": "^1.4.9", 26 | "vue-demi": "^0.12.1", 27 | "vue-template-compiler": "^2.6.14" 28 | }, 29 | "devDependencies": { 30 | "@awesome-image/image": "workspace:*", 31 | "@antfu/eslint-config": "^0.16.1", 32 | "@gl-widget/gl-widget": "^1.1.3", 33 | "@types/node": "^17.0.21", 34 | "@vitejs/plugin-vue": "^2.2.0", 35 | "@vitejs/plugin-vue-jsx": "^1.3.8", 36 | "eslint": "^8.10.0", 37 | "patch-package": "^6.4.7", 38 | "sass": "^1.49.9", 39 | "typescript": "^4.5.4", 40 | "vite": "^2.8.0", 41 | "vite-plugin-vue2": "^1.9.3", 42 | "vue": "^3.2.25", 43 | "vue-tsc": "^0.29.8", 44 | "vue2": "npm:vue@2" 45 | }, 46 | "peerDependencies": { 47 | "@vue/composition-api": "^1.0.0-rc.1", 48 | "vue": "^2.0.0 || >=3.0.0" 49 | }, 50 | "peerDependenciesMeta": { 51 | "@vue/composition-api": { 52 | "optional": true 53 | } 54 | } 55 | } -------------------------------------------------------------------------------- /packages/transition/patches/vue-template-compiler+2.6.14.patch: -------------------------------------------------------------------------------- 1 | diff --git a/node_modules/vue-template-compiler/index.js b/node_modules/vue-template-compiler/index.js 2 | index dcc7e6c..9775466 100644 3 | --- a/node_modules/vue-template-compiler/index.js 4 | +++ b/node_modules/vue-template-compiler/index.js 5 | @@ -1,5 +1,5 @@ 6 | try { 7 | - var vueVersion = require('vue').version 8 | + var vueVersion = require('vue2').version 9 | } catch (e) {} 10 | 11 | var packageName = require('./package.json').name 12 | -------------------------------------------------------------------------------- /packages/transition/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbeea/awesome-image/397ab12b7c72fb66fe117e62ff16ee0f91adb11e/packages/transition/public/favicon.ico -------------------------------------------------------------------------------- /packages/transition/scripts/copy.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const copy = require('./util').copy 3 | copy(path.join(__dirname, '../dist/vue3/index.es.js'), path.join(__dirname, '../dist/index.es.js')) 4 | copy(path.join(__dirname, '../dist/vue3/index.umd.js'), path.join(__dirname, '../dist/index.umd.js')) 5 | copy(path.join(__dirname, '../dist/vue3/style.css'), path.join(__dirname, '../dist/style.css')) 6 | -------------------------------------------------------------------------------- /packages/transition/scripts/postinstall.js: -------------------------------------------------------------------------------- 1 | 2 | /* eslint-disable @typescript-eslint/no-var-requires */ 3 | const fs = require('fs') 4 | const path = require('path') 5 | const vue = require('vue') 6 | const pkg = require('../package.json') 7 | const copy = require('./util').copy 8 | const version = vue.version 9 | const isVue2 = +version.split('.')[0] === 2 10 | 11 | if (isVue2) { 12 | copy(path.join(__dirname, '../dist/vue2/index.umd.js'), path.join(__dirname, '../dist/index.umd.js')) 13 | copy(path.join(__dirname, '../dist/vue2/index.es.js'), path.join(__dirname, '../dist/index.es.js')) 14 | } 15 | else { 16 | copy(path.join(__dirname, '../dist/vue3/index.umd.js'), path.join(__dirname, '../dist/index.umd.js')) 17 | copy(path.join(__dirname, '../dist/vue3/index.es.js'), path.join(__dirname, '../dist/index.es.js')) 18 | } 19 | -------------------------------------------------------------------------------- /packages/transition/scripts/util.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs') 2 | function copy(src, dest) { 3 | try { 4 | fs.unlinkSync(dest) 5 | } 6 | catch (error) { } 7 | try { 8 | const content = fs.readFileSync(src, 'utf-8') 9 | fs.writeFileSync(dest, content, 'utf-8') 10 | } 11 | catch (error) { } 12 | } 13 | exports.copy = copy 14 | -------------------------------------------------------------------------------- /packages/transition/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/newbeea/awesome-image/397ab12b7c72fb66fe117e62ff16ee0f91adb11e/packages/transition/src/assets/logo.png -------------------------------------------------------------------------------- /packages/transition/src/env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | declare module '*.vue' { 4 | import type { DefineComponent } from 'vue' 5 | // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types 6 | const component: DefineComponent<{}, {}, any> 7 | export default component 8 | } 9 | 10 | declare module "@vue-awesome-image/filter-fake3d" -------------------------------------------------------------------------------- /packages/transition/src/index.ts: -------------------------------------------------------------------------------- 1 | import { withInstall } from '../../../utils/install' 2 | import Transition from './components/Transition.vue' 3 | export const AsTransition = withInstall(Transition) 4 | export default AsTransition 5 | -------------------------------------------------------------------------------- /packages/transition/src/main.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue-demi' 2 | import App from './App.vue' 3 | 4 | createApp(App).mount('#app') 5 | -------------------------------------------------------------------------------- /packages/transition/src/transitions.ts: -------------------------------------------------------------------------------- 1 | export interface Transition { 2 | name?: string 3 | shader?: string 4 | uniforms?: Record 5 | } 6 | const transition: Record = { 7 | default: { 8 | shader: ` 9 | vec4 transition (vec2 uv) { 10 | return mix( 11 | getFromColor(uv), 12 | getToColor(uv), 13 | progress 14 | ); 15 | } 16 | `, 17 | }, 18 | windowslice: { 19 | shader: ` 20 | uniform float count; // = 10.0 21 | uniform float smoothness; // = 0.5 22 | 23 | vec4 transition (vec2 p) { 24 | float pr = smoothstep(-smoothness, 0.0, p.x - progress * (1.0 + smoothness)); 25 | float s = step(pr, fract(count * p.x)); 26 | return mix(getFromColor(p), getToColor(p), s); 27 | } 28 | `, 29 | uniforms: { 30 | count: 10, 31 | smoothness: 0.5, 32 | }, 33 | }, 34 | directionalwrap: { 35 | shader: ` 36 | uniform vec2 direction; // = vec2(-1.0, 1.0) 37 | 38 | const float smoothness = 0.5; 39 | const vec2 center = vec2(0.5, 0.5); 40 | 41 | vec4 transition (vec2 uv) { 42 | vec2 v = normalize(direction); 43 | v /= abs(v.x) + abs(v.y); 44 | float d = v.x * center.x + v.y * center.y; 45 | float m = 1.0 - smoothstep(-smoothness, 0.0, v.x * uv.x + v.y * uv.y - (d - 0.5 + progress * (1.0 + smoothness))); 46 | return mix(getFromColor((uv - 0.5) * (1.0 - m) + 0.5), getToColor((uv - 0.5) * m + 0.5), m); 47 | } 48 | 49 | `, 50 | uniforms: { 51 | direction: { 52 | x: -1, 53 | y: 1, 54 | }, 55 | }, 56 | }, 57 | } 58 | 59 | export default transition 60 | -------------------------------------------------------------------------------- /packages/transition/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "esnext", 4 | "useDefineForClassFields": true, 5 | "module": "esnext", 6 | "moduleResolution": "node", 7 | "strict": true, 8 | "jsx": "preserve", 9 | "sourceMap": true, 10 | "resolveJsonModule": true, 11 | "esModuleInterop": true, 12 | "lib": ["esnext", "dom"] 13 | }, 14 | "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"], 15 | "references": [{ "path": "./tsconfig.node.json" }] 16 | } 17 | -------------------------------------------------------------------------------- /packages/transition/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "module": "esnext", 5 | "moduleResolution": "node" 6 | }, 7 | "include": ["vite.config.ts", "vite.config.vue2.ts", "vite.config.vue3.ts"] 8 | } 9 | -------------------------------------------------------------------------------- /packages/transition/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import vue from '@vitejs/plugin-vue' 3 | import vueJsx from '@vitejs/plugin-vue-jsx' 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | server: { 7 | port: 3003, 8 | }, 9 | plugins: [vue(), vueJsx()], 10 | }) 11 | -------------------------------------------------------------------------------- /packages/transition/vite.config.vue2.ts: -------------------------------------------------------------------------------- 1 | import { resolve } from 'path' 2 | import { defineConfig } from 'vite' 3 | import { createVuePlugin } from 'vite-plugin-vue2' 4 | import vueJsx from '@vitejs/plugin-vue-jsx' 5 | // https://vitejs.dev/config/ 6 | export default defineConfig({ 7 | plugins: [createVuePlugin(), vueJsx()], 8 | build: { 9 | outDir: './dist/vue2', 10 | 11 | lib: { 12 | entry: resolve(__dirname, 'src/index.ts'), 13 | fileName: format => `index.${format}.js`, 14 | name: 'AsTransition', 15 | }, 16 | cssCodeSplit: false, 17 | rollupOptions: { 18 | external: ['vue', 'vue-demi'], 19 | output: { 20 | globals: { 21 | 'vue': 'Vue', 22 | 'vue-demi': 'VueDemi', 23 | }, 24 | }, 25 | }, 26 | }, 27 | }) 28 | -------------------------------------------------------------------------------- /packages/transition/vite.config.vue3.ts: -------------------------------------------------------------------------------- 1 | import { resolve } from 'path' 2 | import { defineConfig } from 'vite' 3 | import vue from '@vitejs/plugin-vue' 4 | import vueJsx from '@vitejs/plugin-vue-jsx' 5 | // https://vitejs.dev/config/ 6 | export default defineConfig({ 7 | plugins: [vue(), vueJsx()], 8 | build: { 9 | outDir: './dist/vue3', 10 | 11 | lib: { 12 | entry: resolve(__dirname, 'src/index.ts'), 13 | fileName: format => `index.${format}.js`, 14 | name: 'AsTransition', 15 | }, 16 | cssCodeSplit: false, 17 | rollupOptions: { 18 | external: ['vue', 'vue-demi'], 19 | output: { 20 | globals: { 21 | 'vue': 'Vue', 22 | 'vue-demi': 'VueDemi', 23 | }, 24 | }, 25 | }, 26 | }, 27 | }) 28 | -------------------------------------------------------------------------------- /pnpm-workspace.yaml: -------------------------------------------------------------------------------- 1 | packages: 2 | - 'packages/**' 3 | - 'packages/filters/**' -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "esnext", 4 | "useDefineForClassFields": true, 5 | "module": "esnext", 6 | "moduleResolution": "node", 7 | "strict": true, 8 | "jsx": "preserve", 9 | "sourceMap": true, 10 | "preserveSymlinks": false, 11 | "resolveJsonModule": true, 12 | "esModuleInterop": true, 13 | "lib": ["esnext", "dom"] 14 | }, 15 | "include": ["packages", "utils"], 16 | "references": [{ "path": "./tsconfig.node.json" }] 17 | } 18 | -------------------------------------------------------------------------------- /tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "module": "esnext", 5 | "moduleResolution": "node" 6 | }, 7 | "include": ["vite.config.ts", "vite.config.vue2.ts", "vite.config.vue3.ts"] 8 | } 9 | -------------------------------------------------------------------------------- /utils/install.ts: -------------------------------------------------------------------------------- 1 | import type { AppContext, Plugin } from 'vue-demi' 2 | 3 | export type SFCWithInstall = T & Plugin 4 | 5 | export type SFCInstallWithContext = SFCWithInstall & { 6 | _context: AppContext | null 7 | } 8 | 9 | export const withInstall = >( 10 | main: T, 11 | extra?: E, 12 | ) => { 13 | (main as SFCWithInstall).install = (app): void => { 14 | for (const comp of [main, ...Object.values(extra ?? {})]) { 15 | app.component(comp.name, comp) 16 | } 17 | } 18 | 19 | if (extra) { 20 | for (const [key, comp] of Object.entries(extra)) { 21 | (main as any)[key] = comp 22 | } 23 | } 24 | return main as SFCWithInstall & E 25 | } 26 | --------------------------------------------------------------------------------