diff --git a/.gitignore b/.gitignore index 72377e6..3c6f660 100644 --- a/.gitignore +++ b/.gitignore @@ -27,3 +27,5 @@ dist-ssr tests-report # Local Netlify folder .netlify + +*-e \ No newline at end of file diff --git a/LICENSE b/LICENSE index 55a7777..1abadf0 100644 --- a/LICENSE +++ b/LICENSE @@ -2,20 +2,8 @@ MIT License Copyright (c) 2024 yamogoo (Mikhail Grebennikov) -Permission is hereby granted, free of charge, to any person obtaining a copy -of this software and associated documentation files (the "Software"), to deal -in the Software without restriction, including without limitation the rights -to use, copy, modify, merge, publish, distribute, sublicense, and/or sell -copies of the Software, and to permit persons to whom the Software is -furnished to do so, subject to the following conditions: +Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: -The above copyright notice and this permission notice shall be included in all -copies or substantial portions of the Software. +The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE -AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, -OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE -SOFTWARE. +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. diff --git a/README.md b/README.md index da33bad..7a1d5fe 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,15 @@ -![image](./demo/public/resize-bounding.svg) +![image](https://raw.githubusercontent.com/yamogoo/vue3-resize-bounding/v1.0.3/images/resize-bounding.svg) -# Vue3 Resize Bounding ![Version](https://img.shields.io/badge/version-1.0.2-blue) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) +# Vue3 Resize Bounding ![Version](https://img.shields.io/badge/version-1.0.3-blue) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) **Vue3 Resize Bounding** is a simple, custom component for Vue 3 that allows you to intuitively resize nested components using draggable border panels. It easily increases interactivity and control. -![image](./demo/public/resize-bounding.gif) +![image](https://github.com/yamogoo/vue3-resize-bounding/blob/v1.0.3/images/resize-bounding.gif) [Demo](https://vue3-resize-bounding.netlify.app/) +[Figma UI Component](https://www.figma.com/community/file/1392603830584852243) + > **Examples** > > - [Interactive Grid](https://github.com/yamogoo/vue3-resize-bounding/blob/main/packages/playground/vite-app/src/components/InteractiveGrid.vue) diff --git a/build.sh b/build.sh deleted file mode 100644 index ca80472..0000000 --- a/build.sh +++ /dev/null @@ -1,15 +0,0 @@ -#!/bin/bash - -ICON=resize-bounding.svg -PREVIEW=resize-bounding.gif -README=README.md - -IMAGES_PATH=images -LIB_PATH=packages/vue3-resize-bounding -DEMO_PATH=demo/public - -cp ./$IMAGES_PATH/$ICON ./$LIB_PATH/ -cp ./$IMAGES_PATH/$ICON ./$DEMO_PATH/ -cp ./$IMAGES_PATH/$PREVIEW ./$LIB_PATH/ -cp ./$IMAGES_PATH/$PREVIEW ./$DEMO_PATH/ -cp ./$README ./$LIB_PATH/$README \ No newline at end of file diff --git a/demo/components/atoms/cover/Guide.vue b/demo/components/atoms/cover/Guide.vue index 675e472..d143a0a 100644 --- a/demo/components/atoms/cover/Guide.vue +++ b/demo/components/atoms/cover/Guide.vue @@ -15,15 +15,15 @@ > {{ name }} - + @@ -41,6 +41,9 @@ const onCopy = (name: string | undefined): void => { if (name) navigator.clipboard.writeText(name); }; +const figmaUrl = + "https://www.figma.com/community/file/1392603830584852243/resize-bounding"; + const colorMode = useColorMode(); const onChangeTheme = () => { diff --git a/demo/components/atoms/menu/Tabbar.vue b/demo/components/atoms/menu/Tabbar.vue index 668da59..d5e9d9e 100644 --- a/demo/components/atoms/menu/Tabbar.vue +++ b/demo/components/atoms/menu/Tabbar.vue @@ -45,21 +45,25 @@ export interface TabbarItem { &__item { @include use-font-size(--sm); - @include themify($app-themes) { - color: themed("text", "primary"); - } cursor: pointer; &:not(.active) { - opacity: 0.35; + @include themify($app-themes) { + color: themed("text", "primary"); + } &:hover { - opacity: 0.5 !important; + @include themify($app-themes) { + color: themed("colors", "accent"); + } } } &.active { opacity: 1; + @include themify($app-themes) { + color: themed("colors", "accent"); + } } } } diff --git a/demo/nuxt.config.ts b/demo/nuxt.config.ts index fa04b2e..5fb7483 100644 --- a/demo/nuxt.config.ts +++ b/demo/nuxt.config.ts @@ -25,6 +25,27 @@ export default defineNuxtConfig({ rel: "stylesheet", href: "https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap", }, + { + rel: "apple-touch-icon", + sizes: "180x180", + href: "/favicon/apple-touch-icon.png", + }, + { + rel: "icon", + type: "image/png", + sizes: "32x32", + href: "/favicon/favicon-32x32.png", + }, + { + rel: "icon", + type: "image/png", + sizes: "16x16", + href: "/favicon/favicon-16x16.png", + }, + { + rel: "manifest", + href: "/favicon/site.webmanifest", + }, ], }, }, diff --git a/demo/package.json b/demo/package.json index 9ec6dd5..fd5522b 100644 --- a/demo/package.json +++ b/demo/package.json @@ -3,7 +3,7 @@ "description": "Simple Vue 3 component for resizing nested components", "private": true, "version": "1.0.0", - "productVersion": "1.0.2", + "productVersion": "1.0.3", "type": "module", "author": { "name": "yamogoo", diff --git a/demo/public/favicon.ico b/demo/public/favicon.ico deleted file mode 100644 index 18993ad..0000000 Binary files a/demo/public/favicon.ico and /dev/null differ diff --git a/demo/public/favicon/android-chrome-192x192.png b/demo/public/favicon/android-chrome-192x192.png new file mode 100644 index 0000000..b11b887 Binary files /dev/null and b/demo/public/favicon/android-chrome-192x192.png differ diff --git a/demo/public/favicon/android-chrome-512x512.png b/demo/public/favicon/android-chrome-512x512.png new file mode 100644 index 0000000..7e58be7 Binary files /dev/null and b/demo/public/favicon/android-chrome-512x512.png differ diff --git a/demo/public/favicon/apple-touch-icon.png b/demo/public/favicon/apple-touch-icon.png new file mode 100644 index 0000000..5673f5d Binary files /dev/null and b/demo/public/favicon/apple-touch-icon.png differ diff --git a/demo/public/favicon/favicon-16x16.png b/demo/public/favicon/favicon-16x16.png new file mode 100644 index 0000000..884723b Binary files /dev/null and b/demo/public/favicon/favicon-16x16.png differ diff --git a/demo/public/favicon/favicon-32x32.png b/demo/public/favicon/favicon-32x32.png new file mode 100644 index 0000000..0ef799b Binary files /dev/null and b/demo/public/favicon/favicon-32x32.png differ diff --git a/demo/public/favicon/favicon.ico b/demo/public/favicon/favicon.ico new file mode 100644 index 0000000..6a9cffd Binary files /dev/null and b/demo/public/favicon/favicon.ico differ diff --git a/demo/public/favicon/site.webmanifest b/demo/public/favicon/site.webmanifest new file mode 100644 index 0000000..45dc8a2 --- /dev/null +++ b/demo/public/favicon/site.webmanifest @@ -0,0 +1 @@ +{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"} \ No newline at end of file diff --git a/demo/styles/abstracts/themes/_palette.scss b/demo/styles/abstracts/themes/_palette.scss index 11c0f8e..d1bfbdd 100644 --- a/demo/styles/abstracts/themes/_palette.scss +++ b/demo/styles/abstracts/themes/_palette.scss @@ -1,13 +1,13 @@ $c-white: #ffffff; -$c-black: #303030; +$c-black: #232323; -$c-dark-gray: #1f1f1f; -$c-deep-gray: #242424; +$c-dark-gray: #171717; +$c-deep-gray: #1a1a1a; $c-gray: #4e4e4e; $c-light-gray: #aeaeae; $c-fade-gray: #c9c8c8; -$c-app--light: #e8ebec; +$c-app--light: #eeeff0; $c-container--light: #dbdede; $c-app--dark: darken($c-black, 6%); $c-container--dark: #212222; diff --git a/demo/styles/abstracts/themes/_themes.scss b/demo/styles/abstracts/themes/_themes.scss index 0d001dc..fa4e10b 100644 --- a/demo/styles/abstracts/themes/_themes.scss +++ b/demo/styles/abstracts/themes/_themes.scss @@ -6,7 +6,8 @@ $app-themes: ( background: ( primary: $c-black, primary--invert: $c-white, - secondary: $c-app--dark, + secondary: #181818, + //$c-app--dark, inactive: $c-deep-gray, ), text: ( @@ -17,8 +18,8 @@ $app-themes: ( inactive: #656565, ), border: ( - primary: darken($c-gray, 8%), - secondary: darken($c-gray, 3%), + primary: darken($c-gray, 12%), + secondary: darken($c-gray, 12%), ), scrollbar: ( thumb: $c-white, @@ -58,8 +59,8 @@ $app-themes: ( inactive: #656565, ), border: ( - primary: lighten($c-fade-gray, 3%), - secondary: lighten($c-fade-gray, 3%), + primary: lighten($c-fade-gray, 6%), + secondary: lighten($c-fade-gray, 6%), ), scrollbar: ( thumb: $c-black, diff --git a/package.json b/package.json index c78d256..9cc5ae5 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,7 @@ { "name": "vue3-boundarize-monorepo", - "description": "Simple Vue 3 component for resizing nested components", + "description": "Simple Vue3 component for resizing nested components", + "version": "1.0.3", "private": true, "author": { "name": "yamogoo", @@ -9,9 +10,12 @@ "scripts": { "preview:demo": "pnpm --filter resize-bounding-demo run dev", "preview:example": "pnpm --filter vite-app dev", - "build": "pnpm --filter vue3-resize-bounding build", + "build": "pnpm prepare && pnpm --filter vue3-resize-bounding build", "test:unit": "pnpm --filter vue3-resize-bounding test:unit", "test:ui": "pnpm --filter vue3-resize-bounding test:ui", - "playground:vite": "pnpm --filter vite-app dev" + "playground:vite": "pnpm --filter vite-app dev", + "prepare": "bash prepare.sh", + "deploy:dev": "pnpm prepare && pnpm --filter resize-bounding-demo run deploy:dev", + "deploy:prod": "pnpm prepare && pnpm --filter resize-bounding-demo run deploy:prod" } } diff --git a/packages/vue3-resize-bounding/LICENSE b/packages/vue3-resize-bounding/LICENSE index 55a7777..1abadf0 100644 --- a/packages/vue3-resize-bounding/LICENSE +++ b/packages/vue3-resize-bounding/LICENSE @@ -2,20 +2,8 @@ MIT License Copyright (c) 2024 yamogoo (Mikhail Grebennikov) -Permission is hereby granted, free of charge, to any person obtaining a copy -of this software and associated documentation files (the "Software"), to deal -in the Software without restriction, including without limitation the rights -to use, copy, modify, merge, publish, distribute, sublicense, and/or sell -copies of the Software, and to permit persons to whom the Software is -furnished to do so, subject to the following conditions: +Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: -The above copyright notice and this permission notice shall be included in all -copies or substantial portions of the Software. +The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE -AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, -OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE -SOFTWARE. +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. diff --git a/packages/vue3-resize-bounding/README.md b/packages/vue3-resize-bounding/README.md index 3e5c6d0..7a1d5fe 100644 --- a/packages/vue3-resize-bounding/README.md +++ b/packages/vue3-resize-bounding/README.md @@ -1,13 +1,15 @@ -![image](./resize-bounding.svg) +![image](https://raw.githubusercontent.com/yamogoo/vue3-resize-bounding/v1.0.3/images/resize-bounding.svg) -# Vue3 Resize Bounding ![Version](https://img.shields.io/badge/version-1.0.2-blue) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) +# Vue3 Resize Bounding ![Version](https://img.shields.io/badge/version-1.0.3-blue) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) **Vue3 Resize Bounding** is a simple, custom component for Vue 3 that allows you to intuitively resize nested components using draggable border panels. It easily increases interactivity and control. -![image](./resize-bounding.gif) +![image](https://github.com/yamogoo/vue3-resize-bounding/blob/v1.0.3/images/resize-bounding.gif) [Demo](https://vue3-resize-bounding.netlify.app/) +[Figma UI Component](https://www.figma.com/community/file/1392603830584852243) + > **Examples** > > - [Interactive Grid](https://github.com/yamogoo/vue3-resize-bounding/blob/main/packages/playground/vite-app/src/components/InteractiveGrid.vue) diff --git a/packages/vue3-resize-bounding/package.json b/packages/vue3-resize-bounding/package.json index 1af2e2f..59f5fbd 100644 --- a/packages/vue3-resize-bounding/package.json +++ b/packages/vue3-resize-bounding/package.json @@ -1,7 +1,7 @@ { "name": "vue3-resize-bounding", - "description": "Simple Vue 3 component for resizing nested components", - "version": "1.0.2", + "description": "Simple Vue3 component for resizing nested components", + "version": "1.0.3", "license": "MIT", "author": { "name": "yamogoo", diff --git a/prepare.sh b/prepare.sh new file mode 100644 index 0000000..bb28f36 --- /dev/null +++ b/prepare.sh @@ -0,0 +1,50 @@ +#!/bin/bash + +ICON=resize-bounding.svg +PREVIEW=resize-bounding.gif +README=README.md +IMAGES_PATH=images +LIB_PATH=packages/vue3-resize-bounding +DEMO_PATH=demo +DEMO_PUBLIC_PATH=$DEMO_PATH/public + +MONOREPO_PACKAGE_JSON=package.json +DEMO_PACKAGE_JSON=$DEMO_PATH/package.json +LIB_PACKAGE_JSON=$LIB_PATH/package.json + +MONOREPO_LICENSE=LICENSE +LIB_LICENSE=$LIB_PATH/LICENSE + +VERSION_PATTERN="[[:digit:]][[:graph:]][[:digit:]][[:graph:]][[:digit:]]" + +function get_version { + VERSION=$(grep version $1 | sed "s/.*\"version\": \"\($VERSION_PATTERN\)\".*/\1/") +} + +function change_readme_version () { + sed -i -e "s/version-$VERSION_PATTERN-blue/version-$1-blue/g" $2 + sed -i -e "s@/v$VERSION_PATTERN@/v$1@g" $2 +} + +function change_pkg_version { + sed -i -e "s@\(.*\"$1\"\): \"\(.*\)\"@\1: ""\"$VERSION\"@" $2 +} + +get_version $MONOREPO_PACKAGE_JSON + +# update LICENSE: +cp $MONOREPO_LICENSE $LIB_LICENSE + +# copy assets: +cp $IMAGES_PATH/$ICON $LIB_PATH +cp $IMAGES_PATH/$ICON $DEMO_PUBLIC_PATH +cp $IMAGES_PATH/$PREVIEW $LIB_PATH +cp $IMAGES_PATH/$PREVIEW $DEMO_PUBLIC_PATH + +# change and copy README: +change_readme_version $VERSION $README +cp $README $LIB_PATH/$README + +# change PKG files: +change_pkg_version productVersion $DEMO_PACKAGE_JSON +change_pkg_version version $LIB_PACKAGE_JSON \ No newline at end of file