From 3c09e71c3d6b4ea62364f2fb174d45af31cc9451 Mon Sep 17 00:00:00 2001 From: ldrovira Date: Thu, 18 Jun 2020 12:56:36 +0200 Subject: [PATCH] update repo github --- package-lock.json | 5 + package.json | 3 + .../.vuepress/components/Checkbox/array.vue | 4 +- .../.vuepress/components/Checkbox/icon.vue | 7 +- .../.vuepress/components/Checkbox/object.vue | 23 +- .../.vuepress/components/Input/default.vue | 2 +- .../.vuepress/components/Navbar/color.vue | 69 + .../components/Navbar/default copy.vue | 62 + .../.vuepress/components/Navbar/default.vue | 69 + .../.vuepress/components/Pagination/color.vue | 1 + .../.vuepress/components/Table/default.vue | 116 ++ .../docs/.vuepress/components/Table/edit.vue | 148 ++ .../.vuepress/components/Table/expand.vue | 159 ++ .../components/Table/miscellaneous.vue | 210 ++ .../.vuepress/components/Table/multiple.vue | 148 ++ .../.vuepress/components/Table/pagination.vue | 121 ++ .../.vuepress/components/Table/search.vue | 120 ++ .../.vuepress/components/Table/selected.vue | 135 ++ .../docs/.vuepress/components/Table/state.vue | 120 ++ .../.vuepress/components/Table/striped.vue | 116 ++ packages/docs/.vuepress/config.js | 6 + packages/docs/.vuepress/dist | 2 +- .../docs/.vuepress/public/nuxt-test-page.png | Bin 0 -> 6628 bytes .../docs/.vuepress/public/nuxt-ui-vuesax.png | Bin 0 -> 45813 bytes packages/docs/docs/components/Navbar.md | 93 + packages/docs/docs/components/Table.md | 1834 +++++++++++++++++ packages/docs/docs/guide/gettingStarted.md | 4 +- packages/docs/docs/guide/nuxt.md | 76 + packages/docs/docs/layout/README.md | 225 +- packages/docs/es/docs/components/Table.md | 1834 +++++++++++++++++ packages/docs/es/docs/guide/nuxt.md | 76 + packages/docs/es/docs/layout/README.md | 238 ++- packages/docs/examples/navbar.md | 4 + .../components/Config.vue | 1 - .../components/HeaderNotification.vue | 6 +- .../components/navbarLayout.vue | 173 ++ .../global-components/card.vue | 8 + .../vuepress-theme-vuesax/layouts/Layout.vue | 9 +- .../vuesax/build/components/components.json | 7 + packages/vuesax/package-lock.json | 8 +- packages/vuesax/package.json | 4 +- packages/vuesax/scripts/newComponent.js | 2 +- packages/vuesax/src/components/index.ts | 7 + .../src/components/vsAlert/Base/style.sass | 46 +- .../src/components/vsAvatar/Base/style.sass | 26 +- .../src/components/vsButton/Base/style.sass | 86 +- .../src/components/vsCheckbox/Base/style.sass | 24 +- .../components/vsCheckbox/Base/vsCheckbox.ts | 14 +- .../src/components/vsDialog/Base/style.sass | 40 +- .../src/components/vsInput/Base/style.sass | 101 +- .../src/components/vsInput/Base/vsInput.ts | 20 +- .../src/components/vsNavbar/Base/_root.sass | 2 + .../src/components/vsNavbar/Base/index.ts | 12 + .../src/components/vsNavbar/Base/style.sass | 66 + .../src/components/vsNavbar/Base/vsNavbar.ts | 205 ++ .../src/components/vsNavbar/Group/index.ts | 12 + .../src/components/vsNavbar/Group/style.sass | 64 + .../vsNavbar/Group/vsNavbarGroup.ts | 40 + .../src/components/vsNavbar/Item/index.ts | 12 + .../src/components/vsNavbar/Item/style.sass | 15 + .../components/vsNavbar/Item/vsNavbarItem.ts | 74 + .../components/vsPagination/Base/style.sass | 42 +- .../vsPagination/Base/vsPagination.ts | 13 +- .../src/components/vsRadio/Base/style.sass | 36 +- .../src/components/vsSelect/Base/style.sass | 123 +- .../src/components/vsSelect/Base/vsSelect.ts | 14 +- .../src/components/vsSelect/Option/style.sass | 14 +- .../vsSelect/OptionGroup/style.sass | 4 +- .../src/components/vsSwitch/Base/style.sass | 20 +- .../src/components/vsTable/Base/_root.sass | 2 + .../src/components/vsTable/Base/index.ts | 12 + .../src/components/vsTable/Base/style.sass | 66 + .../src/components/vsTable/Base/vsTable.ts | 105 + .../vuesax/src/components/vsTable/Td/index.ts | 12 + .../src/components/vsTable/Td/style.sass | 14 + .../src/components/vsTable/Td/vsTableTd.ts | 23 + .../vuesax/src/components/vsTable/Th/index.ts | 12 + .../src/components/vsTable/Th/style.sass | 43 + .../src/components/vsTable/Th/vsTableTh.ts | 48 + .../vuesax/src/components/vsTable/Tr/index.ts | 12 + .../src/components/vsTable/Tr/style.sass | 74 + .../components/vsTable/Tr/vsTableExpand.ts | 60 + .../src/components/vsTable/Tr/vsTableTr.ts | 79 + .../src/components/vsTooltip/Base/style.sass | 58 +- .../components/vsTooltip/Base/vsTooltip.ts | 14 +- .../src/functions/defineVuesaxFunctions.ts | 8 +- .../src/functions/vsLoading/Base/style.sass | 62 +- .../functions/vsNotification/Base/style.sass | 40 +- .../vuesax/src/functions/vsTable/index.ts | 112 + packages/vuesax/src/icons/icons.sass | 12 +- packages/vuesax/src/styles/_dark.sass | 14 +- packages/vuesax/src/styles/_mixins.sass | 4 +- packages/vuesax/src/styles/_vars.sass | 2 +- packages/vuesax/src/styles/vuesax.sass | 4 +- .../vuesax/src/util/defineVuesaxOptions.ts | 1 - packages/vuesax/src/util/ripple/style.sass | 6 +- tsconfig.json | 3 + 97 files changed, 7787 insertions(+), 495 deletions(-) create mode 100644 packages/docs/.vuepress/components/Navbar/color.vue create mode 100644 packages/docs/.vuepress/components/Navbar/default copy.vue create mode 100644 packages/docs/.vuepress/components/Navbar/default.vue create mode 100644 packages/docs/.vuepress/components/Table/default.vue create mode 100644 packages/docs/.vuepress/components/Table/edit.vue create mode 100644 packages/docs/.vuepress/components/Table/expand.vue create mode 100644 packages/docs/.vuepress/components/Table/miscellaneous.vue create mode 100644 packages/docs/.vuepress/components/Table/multiple.vue create mode 100644 packages/docs/.vuepress/components/Table/pagination.vue create mode 100644 packages/docs/.vuepress/components/Table/search.vue create mode 100644 packages/docs/.vuepress/components/Table/selected.vue create mode 100644 packages/docs/.vuepress/components/Table/state.vue create mode 100644 packages/docs/.vuepress/components/Table/striped.vue create mode 100644 packages/docs/.vuepress/public/nuxt-test-page.png create mode 100644 packages/docs/.vuepress/public/nuxt-ui-vuesax.png create mode 100644 packages/docs/docs/components/Navbar.md create mode 100644 packages/docs/docs/components/Table.md create mode 100644 packages/docs/docs/guide/nuxt.md create mode 100644 packages/docs/es/docs/components/Table.md create mode 100644 packages/docs/es/docs/guide/nuxt.md create mode 100644 packages/docs/examples/navbar.md create mode 100644 packages/vuepress-theme-vuesax/components/navbarLayout.vue create mode 100644 packages/vuesax/src/components/vsNavbar/Base/_root.sass create mode 100644 packages/vuesax/src/components/vsNavbar/Base/index.ts create mode 100644 packages/vuesax/src/components/vsNavbar/Base/style.sass create mode 100644 packages/vuesax/src/components/vsNavbar/Base/vsNavbar.ts create mode 100644 packages/vuesax/src/components/vsNavbar/Group/index.ts create mode 100644 packages/vuesax/src/components/vsNavbar/Group/style.sass create mode 100644 packages/vuesax/src/components/vsNavbar/Group/vsNavbarGroup.ts create mode 100644 packages/vuesax/src/components/vsNavbar/Item/index.ts create mode 100644 packages/vuesax/src/components/vsNavbar/Item/style.sass create mode 100644 packages/vuesax/src/components/vsNavbar/Item/vsNavbarItem.ts create mode 100644 packages/vuesax/src/components/vsTable/Base/_root.sass create mode 100644 packages/vuesax/src/components/vsTable/Base/index.ts create mode 100644 packages/vuesax/src/components/vsTable/Base/style.sass create mode 100644 packages/vuesax/src/components/vsTable/Base/vsTable.ts create mode 100644 packages/vuesax/src/components/vsTable/Td/index.ts create mode 100644 packages/vuesax/src/components/vsTable/Td/style.sass create mode 100644 packages/vuesax/src/components/vsTable/Td/vsTableTd.ts create mode 100644 packages/vuesax/src/components/vsTable/Th/index.ts create mode 100644 packages/vuesax/src/components/vsTable/Th/style.sass create mode 100644 packages/vuesax/src/components/vsTable/Th/vsTableTh.ts create mode 100644 packages/vuesax/src/components/vsTable/Tr/index.ts create mode 100644 packages/vuesax/src/components/vsTable/Tr/style.sass create mode 100644 packages/vuesax/src/components/vsTable/Tr/vsTableExpand.ts create mode 100644 packages/vuesax/src/components/vsTable/Tr/vsTableTr.ts create mode 100644 packages/vuesax/src/functions/vsTable/index.ts diff --git a/package-lock.json b/package-lock.json index 0a5c218f..375f4625 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1032,6 +1032,11 @@ "@types/node": "*" } }, + "@types/lodash": { + "version": "4.14.150", + "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.150.tgz", + "integrity": "sha512-kMNLM5JBcasgYscD9x/Gvr6lTAv2NVgsKtet/hm93qMyf/D1pt+7jeEZklKJKxMVmXjxbRVQQGfqDSfipYCO6w==" + }, "@types/minimatch": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz", diff --git a/package.json b/package.json index 25116023..fc9810af 100644 --- a/package.json +++ b/package.json @@ -15,5 +15,8 @@ "lerna": "^3.19.0", "shelljs": "^0.8.3", "vue": "^2.6.11" + }, + "dependencies": { + "@types/lodash": "^4.14.150" } } diff --git a/packages/docs/.vuepress/components/Checkbox/array.vue b/packages/docs/.vuepress/components/Checkbox/array.vue index 0eb4f444..3a0fa64c 100644 --- a/packages/docs/.vuepress/components/Checkbox/array.vue +++ b/packages/docs/.vuepress/components/Checkbox/array.vue @@ -16,7 +16,7 @@ Vuesax - + {{ options }} @@ -37,7 +37,7 @@ export default { align-items flex-start >>>.vs-checkbox-content min-width 80px - .data + .data-check background rgba(0,0,0,.03) padding 10px 20px border-radius 18px diff --git a/packages/docs/.vuepress/components/Checkbox/icon.vue b/packages/docs/.vuepress/components/Checkbox/icon.vue index b28b8880..9a1f3f6a 100644 --- a/packages/docs/.vuepress/components/Checkbox/icon.vue +++ b/packages/docs/.vuepress/components/Checkbox/icon.vue @@ -1,5 +1,5 @@ @@ -99,6 +102,7 @@ import HeaderNotification from '../components/HeaderNotification.vue' import Codefund from '../components/Codefund.vue' import VuesaxAds from '../components/VuesaxAds.vue' import Branding from '../components/Branding.vue' +import navbar from '../components/navbarLayout.vue' export default { components: { Home, @@ -113,7 +117,8 @@ export default { License, Codefund, VuesaxAds, - Branding + Branding, + navbar }, data () { diff --git a/packages/vuesax/build/components/components.json b/packages/vuesax/build/components/components.json index 9d496cbd..e44cc04f 100644 --- a/packages/vuesax/build/components/components.json +++ b/packages/vuesax/build/components/components.json @@ -13,5 +13,12 @@ "vsTooltip": "./src/components/vsTooltip/Base/index.ts", "vsDialog": "./src/components/vsDialog/Base/index.ts", "vsPagination": "./src/components/vsPagination/Base/index.ts", + "vsTable": "./src/components/vsTable/Base/index.ts", + "vsTableTr": "./src/components/vsTable/Tr/index.ts", + "vsTableTh": "./src/components/vsTable/Th/index.ts", + "vsTableTd": "./src/components/vsTable/Td/index.ts", + "vsNavbar": "./src/components/vsNavbar/Base/index.ts", + "vsNavbarItem": "./src/components/vsNavbar/Item/index.ts", + "vsNavbarGroup": "./src/components/vsNavbar/Group/index.ts", "newComponent": "" } diff --git a/packages/vuesax/package-lock.json b/packages/vuesax/package-lock.json index f0ab504d..e172d06e 100644 --- a/packages/vuesax/package-lock.json +++ b/packages/vuesax/package-lock.json @@ -1,6 +1,6 @@ { "name": "vuesax", - "version": "4.0.1-alpha.16", + "version": "4.0.1-alpha.20", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -1498,9 +1498,9 @@ } }, "@types/lodash": { - "version": "4.14.144", - "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.144.tgz", - "integrity": "sha512-ogI4g9W5qIQQUhXAclq6zhqgqNUr7UlFaqDHbch7WLSLeeM/7d3CRaw7GLajxvyFvhJqw4Rpcz5bhoaYtIx6Tg==", + "version": "4.14.150", + "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.150.tgz", + "integrity": "sha512-kMNLM5JBcasgYscD9x/Gvr6lTAv2NVgsKtet/hm93qMyf/D1pt+7jeEZklKJKxMVmXjxbRVQQGfqDSfipYCO6w==", "dev": true }, "@types/minimatch": { diff --git a/packages/vuesax/package.json b/packages/vuesax/package.json index e59aa0e9..32f23b2d 100644 --- a/packages/vuesax/package.json +++ b/packages/vuesax/package.json @@ -1,6 +1,6 @@ { "name": "vuesax", - "version": "4.0.1-alpha.16", + "version": "4.0.1-alpha.20", "description": "Framework components for vuejs", "main": "dist/vuesax.js", "scripts": { @@ -30,7 +30,7 @@ "@babel/preset-typescript": "^7.6.0", "@babel/runtime": "^7.8.3", "@types/color": "^3.0.0", - "@types/lodash": "^4.14.144", + "@types/lodash": "^4.14.150", "autoprefixer": "^9.6.4", "babel-loader": "^8.0.6", "babel-plugin-transform-decorators-legacy": "^1.3.5", diff --git a/packages/vuesax/scripts/newComponent.js b/packages/vuesax/scripts/newComponent.js index cb6e895d..196e2863 100644 --- a/packages/vuesax/scripts/newComponent.js +++ b/packages/vuesax/scripts/newComponent.js @@ -17,7 +17,7 @@ function FileSass(name) { @import 'root' .vs-${name.toLowerCase()}-content - background: vs-color('color') + background: -color('color') .vs-${name.toLowerCase()} background: #000 diff --git a/packages/vuesax/src/components/index.ts b/packages/vuesax/src/components/index.ts index 2ff2c34c..0346d64b 100644 --- a/packages/vuesax/src/components/index.ts +++ b/packages/vuesax/src/components/index.ts @@ -13,4 +13,11 @@ export { default as vsRadio } from './vsRadio/Base/index' export { default as vsTooltip } from './vsTooltip/Base/index' export { default as vsDialog } from './vsDialog/Base/index' export { default as vsPagination } from './vsPagination/Base/index' +export { default as vsTable } from './vsTable/Base/index' +export { default as vsTableTr } from './vsTable/Tr' +export { default as vsTableTh } from './vsTable/Th' +export { default as vsTableTd } from './vsTable/Td' +export { default as vsNavbar } from './vsNavbar/Base/index' +export { default as vsNavbarItem } from './vsNavbar/Item' +export { default as vsNavbarGroup } from './vsNavbar/Group' // new component slot diff --git a/packages/vuesax/src/components/vsAlert/Base/style.sass b/packages/vuesax/src/components/vsAlert/Base/style.sass index 707ccee4..098a7c3e 100644 --- a/packages/vuesax/src/components/vsAlert/Base/style.sass +++ b/packages/vuesax/src/components/vsAlert/Base/style.sass @@ -3,8 +3,8 @@ @import 'root' .vs-alert - background: vs-color('color', .1) - color: vs-color('color', 1) + background: -color('color', .1) + color: -color('color', 1) width: 100% padding: 0px 20px border-radius: 0px 12px 12px 0px @@ -14,9 +14,9 @@ transition: height .25s ease overflow: hidden &::selection - background: vs-color('color', .15) + background: -color('color', .15) *::selection - background: vs-color('color', .15) + background: -color('color', .15) b font-weight: 600 a @@ -26,14 +26,14 @@ opacity: .6 &::after content: '' - background: vs-color('color', 1) + background: -color('color', 1) left: 0px top: 0px width: 2px height: 100% position: absolute &--solid - background: vs-color('color', 1) + background: -color('color', 1) color: #fff .vs-alert__icon i @@ -53,7 +53,7 @@ &--border background: transparent &::before - border: 1px solid vs-color('color', 1) + border: 1px solid -color('color', 1) border-left: 0px width: calc(100% - 2px) content: '' @@ -65,9 +65,9 @@ border-radius: inherit &--shadow background: transparent - box-shadow: 0px 4px 15px 0px vs-color('color', .12) + box-shadow: 0px 4px 15px 0px -color('color', .12) &--gradient - background: vs-color('color', 1) + background: -color('color', 1) color: #fff border-radius: 12px .vs-alert__icon @@ -86,7 +86,7 @@ &::after display: none &::before - background: linear-gradient(30deg, vs-color('color',0) 33%, vs-color('color', 1) 100%) + background: linear-gradient(30deg, -color('color',0) 33%, -color('color', 1) 100%) filter: hue-rotate(-50deg) width: 100% content: '' @@ -99,10 +99,10 @@ &--flat background: rgba(0,0,0,.03) &--relief - background: vs-color('color', 1) + background: -color('color', 1) color: #fff border-radius: 12px - box-shadow: 6px 6px 0px 0px vs-color('color', .3) + box-shadow: 6px 6px 0px 0px -color('color', .3) .vs-alert__icon i color: #fff @@ -152,23 +152,23 @@ right: 6px background: transparent border: 0px - color: vs-color('color') + color: -color('color') width: 30px height: 30px display: flex align-items: center justify-content: center transition: all .25s ease - box-shadow: 0px 0px 0px 0px vs-color('color', .3) + box-shadow: 0px 0px 0px 0px -color('color', .3) border-radius: 10px padding: 0px // background-image: url(../../../icons/bx-x.svg) // background-position: center &:hover transform: translate(0,-2px) - box-shadow: 0px 5px 18px 0px vs-color('color', .3) + box-shadow: 0px 5px 18px 0px -color('color', .3) svg - fill: vs-color('color') + fill: -color('color') .vs-alert__footer position: relative @@ -191,11 +191,11 @@ padding-left: 2px i font-size: 1.3rem - color: vs-color('color', 1) + color: -color('color', 1) svg width: 24px height: 24px - fill: vs-color('color', 1) + fill: -color('color', 1) ~ .vs-alert__footer padding-left: 35px ~ .vs-alert__content @@ -209,13 +209,13 @@ bottom: 0px left: 0px height: 2px - background: vs-color('color', .2) + background: -color('color', .2) &__bar width: 30% left: 0px position: relative height: 100% - background: vs-color('color', 1) + background: -color('color', 1) transition: all .25s ease .vs-alert__pagination @@ -233,12 +233,12 @@ button border: 0px background: transparent - color: vs-color('color', 1) + color: -color('color', 1) padding: 0px 7px font-size: 1rem - background: vs-color('color', .1) + background: -color('color', .1) border-radius: 8px transition: all .25s ease &:hover - background: vs-color('color', 1) + background: -color('color', 1) color: #fff diff --git a/packages/vuesax/src/components/vsAvatar/Base/style.sass b/packages/vuesax/src/components/vsAvatar/Base/style.sass index a00667c9..74fcde6c 100644 --- a/packages/vuesax/src/components/vsAvatar/Base/style.sass +++ b/packages/vuesax/src/components/vsAvatar/Base/style.sass @@ -13,7 +13,7 @@ &.vs-change-color-badge .vs-avatar__badge .vs-avatar__points__point - background: vs-color('background') + background: -color('background') &.vs-change-color &:hover .vs-avatar @@ -52,7 +52,7 @@ .vs-avatar width: calc(100% - 4px) height: calc(100% - 4px) - border: 2px solid vs-color('background') + border: 2px solid -color('background') margin: 2px &:after content: '' @@ -64,21 +64,21 @@ border-radius: inherit background-color: #FFE53B z-index: -1 - background: vs-color('color') + background: -color('color') &.vs-change-color .vs-avatar - color: vs-color('background') + color: -color('background') .vs-avatar__points .vs-avatar__points__point - background: vs-color('background') + background: -color('background') .vs-avatar - background: vs-color('color') + background: -color('color') color: #fff overflow: hidden display: flex align-items: center justify-content: center - color: vs-color('text') + color: -color('text') border-radius: inherit width: 100% height: 100% @@ -151,15 +151,15 @@ position: absolute width: 13px height: 13px - background: vs-color('badge') + background: -color('badge') border-radius: 50% - border: 2px solid vs-color('background') + border: 2px solid -color('background') !important right: -4px bottom: -4px font-size: .6rem font-weight: bold z-index: 200 - color: vs-color('text') + color: -color('text') &.isSlot, &.writing width: auto height: auto @@ -168,7 +168,7 @@ display: flex align-items: center justify-content: center - color: vs-color('background') + color: -color('background') line-height: .9rem padding: 0px 3px min-height: 18px @@ -192,7 +192,7 @@ &__point width: 5px height: 5px - background: vs-color('text') + background: -color('text') margin: 0px 2px border-radius: 50% &:nth-child(1) @@ -223,7 +223,7 @@ width: auto height: auto min-height: 90% - background: vs-color('gray-3') + background: -color('gray-3') top: 50% transform: translate(0, -50%) right: -20px diff --git a/packages/vuesax/src/components/vsButton/Base/style.sass b/packages/vuesax/src/components/vsButton/Base/style.sass index 770ad22d..a8147078 100644 --- a/packages/vuesax/src/components/vsButton/Base/style.sass +++ b/packages/vuesax/src/components/vsButton/Base/style.sass @@ -4,8 +4,8 @@ .vs-button border: 0px - margin: vs-var(button-margin) - border-radius: vs-var(button-border-radius) + margin: -var(button-margin) + border-radius: -var(button-border-radius) transition: all .25s ease position: relative user-select: none @@ -20,13 +20,13 @@ box-sizing: border-box &.vs-component-dark &.vs-button--transparent - color: vs-color('text') !important + color: -color('text') !important &--fff &:focus color: rgba(30,30,30,1) !important &__content - padding: vs-var(button-padding) + padding: -var(button-padding) width: 100% display: flex align-items: center @@ -106,7 +106,7 @@ position: absolute width: 100% height: 100% - background: vs-color('color', .4) + background: -color('color', .4) top: 0px left: 0px z-index: 1200 @@ -126,7 +126,7 @@ display: flex align-items: center justify-content: center - background: vs-color('color', .8) + background: -color('color', .8) border-radius: inherit &:after content: '' @@ -195,51 +195,51 @@ // Type Button Style .vs-button--default - background: vs-color(color, 1) + background: -color(color, 1) color: #fff &.vs-button--active - box-shadow: 0px 10px 20px -10px vs-color(color, 1) + box-shadow: 0px 10px 20px -10px -color(color, 1) transform: translate(0,-3px) &:hover - box-shadow: 0px 10px 20px -10px vs-color(color, 1) + box-shadow: 0px 10px 20px -10px -color(color, 1) transform: translate(0,-3px) .vs-button--flat - background: vs-color(color, .15) - color: vs-color(color, 1) + background: -color(color, .15) + color: -color(color, 1) &.vs-button--dark - color: vs-color(text, 1) + color: -color(text, 1) &:hover - background: vs-color(color, .25) + background: -color(color, .25) &:focus color: #fff - background: vs-color(color, 1) + background: -color(color, 1) transition: all .25s ease, background .25s ease .25s &.vs-button--active - background: vs-color(color, 1) + background: -color(color, 1) color: #fff .vs-button--floating - background: vs-color(color, 1) + background: -color(color, 1) color: #fff - box-shadow: 0px 8px 20px -6px vs-color(color, 1) + box-shadow: 0px 8px 20px -6px -color(color, 1) transform: translate(0,-3px) &:hover - box-shadow: 0px 8px 20px -6px vs-color(color, 1) + box-shadow: 0px 8px 20px -6px -color(color, 1) transform: translate(0,-6px) &:focus transform: translate(0,0px) - box-shadow: 0px 0px 0px 0px vs-color(color, 1) + box-shadow: 0px 0px 0px 0px -color(color, 1) &.vs-button--active transform: translate(0,0px) - box-shadow: 0px 0px 0px 0px vs-color(color, 1) + box-shadow: 0px 0px 0px 0px -color(color, 1) .vs-button--border - background: vs-color(color, 0) - color: vs-color(color, 1) + background: -color(color, 0) + color: -color(color, 1) &:before content: '' - border: 2px solid vs-color(color, 1) + border: 2px solid -color(color, 1) position: absolute top: 0px left: 0px @@ -252,16 +252,16 @@ box-sizing: border-box &:hover &:before - border: 2px solid vs-color(color, .5) + border: 2px solid -color(color, .5) &:focus color: #fff - background: vs-color(color, 1) + background: -color(color, 1) &.vs-button--active - background: vs-color(color, 1) + background: -color(color, 1) color: #fff .vs-button--gradient - background: vs-color('color') + background: -color('color') color: #fff overflow: hidden &.vs-button--primary, &.vs-button--success @@ -269,7 +269,7 @@ filter: hue-rotate(40deg) &::before content: '' - background: linear-gradient(30deg, vs-color('color',0) 33%, vs-color('color', 1) 100%) + background: linear-gradient(30deg, -color('color',0) 33%, -color('color', 1) 100%) position: absolute top: 0px left: 0px @@ -284,7 +284,7 @@ &:hover transform: translate(0, -3px) - box-shadow: 0px 10px 20px -10px vs-color('color', .7) + box-shadow: 0px 10px 20px -10px -color('color', .7) &::before opacity: 0 // transform: translate(50%, -50%) @@ -293,7 +293,7 @@ box-shadow: 0px 10px 20px -10px rgba(0,0,0,.35) .vs-button--relief - background: vs-color('color') + background: -color('color') color: #fff overflow: hidden transform: translate(0) scale(1,1) @@ -314,29 +314,29 @@ transition: all .4s ease z-index: -1 filter: contrast(2) grayscale(.4) - border-bottom: 3px solid vs-color('color') + border-bottom: 3px solid -color('color') box-sizing: border-box &:active transform: translate(0,1px) .vs-button__content padding-bottom: 6px &::before - border-bottom: 0px solid vs-color('color') + border-bottom: 0px solid -color('color') &.vs-button--active transform: translate(0,1px) .vs-button__content padding-bottom: 6px &::before - border-bottom: 0px solid vs-color('color') + border-bottom: 0px solid -color('color') .vs-button--transparent background: transparent - color: vs-color('color') + color: -color('color') overflow: hidden &::before content: '' - background: vs-color('color', .1) - // background: vs-color('color', vs-var('background-opacity')) + background: -color('color', .1) + // background: -color('color', -var('background-opacity')) position: absolute bottom: 0px left: 0px @@ -358,24 +358,24 @@ transform: scale(1) &.vs-button--active &::before - background: vs-color('color', .2) + background: -color('color', .2) opacity: 1 transform: scale(1) .vs-button--shadow - background: vs-color('background') - color: vs-color('text') + background: -color('background') + color: -color('text') overflow: hidden - box-shadow: 0px 0px 0px 0px rgba(0,0,0, vs-var(shadow-opacity)) + box-shadow: 0px 0px 0px 0px rgba(0,0,0, -var(shadow-opacity)) &:active:not(.vs-button--active) transform: translate(0,-1px) - box-shadow: 0px 5px 15px 0px rgba(0,0,0, vs-var(shadow-opacity)) !important + box-shadow: 0px 5px 15px 0px rgba(0,0,0, -var(shadow-opacity)) !important &:hover transform: translate(0,-3px) - box-shadow: 0px 8px 25px 0px rgba(0,0,0, vs-var(shadow-opacity)) + box-shadow: 0px 8px 25px 0px rgba(0,0,0, -var(shadow-opacity)) &.vs-button--active transform: translate(0,-3px) - box-shadow: 0px 8px 25px 0px rgba(0,0,0, vs-var(shadow-opacity)) + box-shadow: 0px 8px 25px 0px rgba(0,0,0, -var(shadow-opacity)) @keyframes btnload 0% diff --git a/packages/vuesax/src/components/vsCheckbox/Base/style.sass b/packages/vuesax/src/components/vsCheckbox/Base/style.sass index d09eb63a..947ea776 100644 --- a/packages/vuesax/src/components/vsCheckbox/Base/style.sass +++ b/packages/vuesax/src/components/vsCheckbox/Base/style.sass @@ -43,7 +43,7 @@ left: 0px width: 100% height: 100% - background: vs-color('color', 1) + background: -color('color', 1) transform: scale(.5) border-radius: inherit opacity: 0 @@ -59,7 +59,7 @@ border-radius: inherit transition: all .25s ease z-index: -1 - border: 2px solid vs-color('gray-4', 1) + border: 2px solid -color('gray-4', 1) box-sizing: border-box .vs-icon-check opacity: 0 @@ -81,20 +81,20 @@ pointer-events: none &:active ~ .vs-checkbox-mask - background: vs-color('gray-4', 1) !important + background: -color('gray-4', 1) !important &:hover ~ .vs-checkbox-mask - background: vs-color('gray-3', 1) + background: -color('gray-3', 1) &:before - border: 2px solid vs-color('gray-4', 0) - // border: 2px solid vs-color('gray-3', 1) + border: 2px solid -color('gray-4', 0) + // border: 2px solid -color('gray-3', 1) &:checked &:hover ~ .vs-checkbox-mask - box-shadow: 0px 3px 15px 0px vs-color('color', .35) + box-shadow: 0px 3px 15px 0px -color('color', .35) ~ .vs-checkbox-mask - // border: 2px solid vs-color('color', 1) !important - box-shadow: 0px 0px 0px 0px vs-color('color', .35) + // border: 2px solid -color('color', 1) !important + box-shadow: 0px 0px 0px 0px -color('color', .35) i:not(.vs-icon-check) opacity: 1 transform: scale(1) @@ -131,7 +131,7 @@ position: absolute width: 0px height: 2px - background: vs-color('text', .6) + background: -color('text', .6) content: '' transition: all .25s ease @@ -156,7 +156,7 @@ background: transparent !important &:before border-radius: 50% - border: 2px solid vs-color('color', 1) !important + border: 2px solid -color('color', 1) !important border-top: 2px solid transparent !important animation: rotateCheckboxLoading .6s linear infinite opacity: 1 !important @@ -167,7 +167,7 @@ background: transparent !important &:before border-radius: 50% - border: 2px solid vs-color('gray-4', 1) !important + border: 2px solid -color('gray-4', 1) !important border-top: 2px solid transparent !important animation: rotateCheckboxLoading .6s linear infinite diff --git a/packages/vuesax/src/components/vsCheckbox/Base/vsCheckbox.ts b/packages/vuesax/src/components/vsCheckbox/Base/vsCheckbox.ts index a7493977..709a4c7a 100644 --- a/packages/vuesax/src/components/vsCheckbox/Base/vsCheckbox.ts +++ b/packages/vuesax/src/components/vsCheckbox/Base/vsCheckbox.ts @@ -1,5 +1,5 @@ import { VNode } from 'vue' -import { Component, Prop } from 'vue-property-decorator' +import { Component, Prop, Watch } from 'vue-property-decorator' import VsIconsCheck from '../../../icons/check' import VsComponent from '../../../mixins/component' @@ -26,6 +26,15 @@ export default class VsCheckbox extends VsComponent { @Prop({ type: Boolean, default: false }) labelBefore!: boolean + @Watch('indeterminate') + handleIndeterminate(val: boolean) { + if (val) { + this.$emit('input', true) + } else { + this.$emit('input', false) + } + } + mounted() { if (this.checked && typeof this.value == 'boolean') { this.$emit('input', true) @@ -111,7 +120,6 @@ export default class VsCheckbox extends VsComponent { this.$emit('input', this.notValue || null) } } - this.$emit('change', evt) this.$emit('mousedown', evt) }, blur: (evt: EventTarget) => { @@ -163,7 +171,7 @@ export default class VsCheckbox extends VsComponent { }, [ conCheckbox, - label + this.$slots.default && label ] ) } diff --git a/packages/vuesax/src/components/vsDialog/Base/style.sass b/packages/vuesax/src/components/vsDialog/Base/style.sass index e084e523..6b0bf07f 100644 --- a/packages/vuesax/src/components/vsDialog/Base/style.sass +++ b/packages/vuesax/src/components/vsDialog/Base/style.sass @@ -17,7 +17,7 @@ opacity: 0 .vs-dialog transform: scale(.7) - box-shadow: 0px 0px 0px 0px rgba(0,0,0, vs-var('shadow-opacity')) + box-shadow: 0px 0px 0px 0px rgba(0,0,0, -var('shadow-opacity')) &--fullScreen transform: translate(0,8%) !important @@ -42,11 +42,11 @@ transform: scale(1) .vs-dialog-content - background: rgba(0,0,0, vs-var('background-opacity')) + background: rgba(0,0,0, -var('background-opacity')) position: fixed left: 0px top: 0px - z-index: vs-var('zindex-2') + z-index: -var('zindex-2') display: flex align-items: flex-start justify-content: center @@ -64,13 +64,13 @@ backdrop-filter: saturate(180%) blur(15px) .vs-dialog - background: vs-color('background') - color: vs-color('text') + background: -color('background') + color: -color('text') position: relative min-width: 400px - border-radius: vs-var('radius') + border-radius: -var('radius') transition: all .25s ease - box-shadow: 0px 5px 30px 0px rgba(0,0,0, vs-var('shadow-opacity')) + box-shadow: 0px 5px 30px 0px rgba(0,0,0, -var('shadow-opacity')) max-width: 800px margin: auto &--notCenter @@ -83,7 +83,7 @@ left: 0px height: 100% border-radius: inherit - background: vs-color('background', .8) + background: -color('background', .8) z-index: 100 display: flex align-items: center @@ -94,14 +94,14 @@ width: 30px height: 30px border-radius: inherit - border: 2px solid vs-color('color', 1) - border-top: 2px solid vs-color('color', 0) - border-left: 2px solid vs-color('color', 0) - border-bottom: 2px solid vs-color('color', 0) + border: 2px solid -color('color', 1) + border-top: 2px solid -color('color', 0) + border-left: 2px solid -color('color', 0) + border-bottom: 2px solid -color('color', 0) box-sizing: border-box transition: all .25s ease display: block - box-shadow: 0px 0px 0px 0px vs-color('color',1) + box-shadow: 0px 0px 0px 0px -color('color',1) animation: loadingDialog .6s ease infinite &:before content: '' @@ -109,14 +109,14 @@ width: 30px height: 30px border-radius: inherit - border: 2px dashed vs-color('color',1) - border-top: 2px solid vs-color('color', 0) - border-left: 2px solid vs-color('color', 0) - border-bottom: 2px solid vs-color('color', 0) + border: 2px dashed -color('color',1) + border-top: 2px solid -color('color', 0) + border-left: 2px solid -color('color', 0) + border-bottom: 2px solid -color('color', 0) box-sizing: border-box transition: all .25s ease display: block - box-shadow: 0px 0px 0px 0px vs-color('color',1) + box-shadow: 0px 0px 0px 0px -color('color',1) animation: loadingDialog .6s linear infinite &--scroll .vs-dialog__content @@ -172,7 +172,7 @@ justify-content: center background: inherit border-radius: 12px - box-shadow: 0px 5px 20px 0px rgba(0,0,0, vs-var('shadow-opacity')) + box-shadow: 0px 5px 20px 0px rgba(0,0,0, -var('shadow-opacity')) transition: all .25s ease z-index: 200 i @@ -184,7 +184,7 @@ &:before width: 14px &:hover - box-shadow: 0px 0px 4px 0px rgba(0,0,0, vs-var('shadow-opacity')) + box-shadow: 0px 0px 4px 0px rgba(0,0,0, -var('shadow-opacity')) transform: translate(-2px, 2px) i opacity: 1 diff --git a/packages/vuesax/src/components/vsInput/Base/style.sass b/packages/vuesax/src/components/vsInput/Base/style.sass index 835e6d52..70e31236 100644 --- a/packages/vuesax/src/components/vsInput/Base/style.sass +++ b/packages/vuesax/src/components/vsInput/Base/style.sass @@ -4,14 +4,14 @@ @mixin state($color) .vs-input - background: vs-color($color,.1) !important - color: vs-color($color,1) + background: -color($color,.1) !important + color: -color($color,1) .vs-input__label - color: vs-color($color,1) + color: -color($color,1) .vs-input__icon - color: vs-color($color,1) - background: vs-color($color,.1) - box-shadow: -15px 10px 10px -10px vs-color($color,.1) + color: -color($color,1) + background: -color($color,.1) + box-shadow: -15px 10px 10px -10px -color($color,.1) .vs-input-parent display: flex @@ -19,6 +19,19 @@ justify-content: center flex-direction: column position: relative + &.square + .vs-input-content + border-radius: 0px !important + &.textWhite + .vs-input + color: #fff + &.transparent + .vs-input + background: transparent !important + &.block + width: 100% + .vs-input + width: 100% &--has-label margin-top: 20px !important &--state-success @@ -43,38 +56,38 @@ &--has-color .vs-input - // box-shadow: 0px 10px 20px -5px vs-color('color',.3) + // box-shadow: 0px 10px 20px -5px -color('color',.3) &:focus - border-bottom: 2px solid vs-color('color',1) + border-bottom: 2px solid -color('color',1) ~ .vs-input__icon - color: vs-color('color',1) + color: -color('color',1) ~ .vs-input__label - color: vs-color('color',1) + color: -color('color',1) ~ .vs-input__label--placeholder - color: vs-color('color',1) + color: -color('color',1) .vs-input border: 2px solid transparent - background: vs-color('gray-2') - color: vs-color('text') + background: -color('gray-2') + color: -color('text') padding: 7px 13px border-radius: inherit transition: all .25s ease - width: 200px padding-left: 10px + width: 200px &:focus - background: vs-color('gray-3') + background: -color('gray-3') padding-left: 15px &.vs-input--has-icon:not(.vs-input--has-icon--after) padding-left: 40px ~ .vs-input__icon - box-shadow: 15px 10px 10px -10px rgba(0,0,0, vs-var(shadow-opacity)) + box-shadow: 15px 10px 10px -10px rgba(0,0,0, -var(shadow-opacity)) ~ .vs-input__label:not(.vs-input__label--placeholder):not(.vs-input__label--label) left: 44px ~ .vs-input__icon - box-shadow: -15px 10px 10px -10px rgba(0,0,0, vs-var(shadow-opacity)) + box-shadow: -15px 10px 10px -10px rgba(0,0,0, -var(shadow-opacity)) transform: translate(-6px, -6px) - background: vs-color('gray-1') + background: -color('gray-1') &--after transform: translate(6px, -6px) @@ -108,13 +121,13 @@ opacity: 1 visibility: visible pointer-events: auto - transform: translate(-3%, -80%) + transform: translate(-3px, -80%) font-size: .75rem &--label opacity: 1 visibility: visible pointer-events: auto - transform: translate(-2%, -77%) + transform: translate(-2px, -77%) font-size: .75rem &--has-icon padding-left: 38px @@ -127,14 +140,14 @@ ~ .vs-input__label left: 13px &.vs-input__label--label - transform: translate(calc(-3% - 22px), -80%) !important + transform: translate(calc(-3px - 22px), -80%) !important &:focus &--has-icon &--after ~ .vs-input__label left: 44px ~ .vs-input__label--placeholder - transform: translate(calc(-3% - 22px), -80%) !important + transform: translate(calc(-3px - 22px), -80%) !important ~ .vs-input__label left: 44px @@ -146,23 +159,23 @@ display: flex align-items: center justify-content: center - box-shadow: 12px 0px 10px -10px rgba(0,0,0,vs-var(shadow-opacity)) + box-shadow: 12px 0px 10px -10px rgba(0,0,0,-var(shadow-opacity)) transition: all .25s ease border-radius: inherit - background: vs-color('gray-2') + background: -color('gray-2') pointer-events: none left: 0px &--after left: auto right: 0px - box-shadow: -12px 0px 10px -10px rgba(0,0,0, vs-var(shadow-opacity)) + box-shadow: -12px 0px 10px -10px rgba(0,0,0, -var(shadow-opacity)) &--click pointer-events: auto !important cursor: pointer &:hover - box-shadow: -15px 10px 10px -10px rgba(0,0,0, vs-var(shadow-opacity)) + box-shadow: -15px 10px 10px -10px rgba(0,0,0, -var(shadow-opacity)) transform: translate(-6px, -6px) - background: vs-color('gray-1') + background: -color('gray-1') &.vs-input__icon--after transform: translate(6px, -6px) @@ -173,34 +186,34 @@ transition: all .25s ease overflow: hidden &--success - color: vs-color('success',1) + color: -color('success',1) &--danger - color: vs-color('danger',1) + color: -color('danger',1) &--warn - color: vs-color('warn',1) + color: -color('warn',1) &--dark - color: vs-color('dark',1) + color: -color('dark',1) &--primary - color: vs-color('primary',1) + color: -color('primary',1) &__progress width: 95% left: 2.5% position: relative height: 2px - background: vs-color('gray-2') + background: -color('gray-2') margin-top: 5px overflow: hidden border-radius: 5px &--danger .vs-input__progress__bar - background: vs-color('danger',1) + background: -color('danger',1) &--warn .vs-input__progress__bar - background: vs-color('warn',1) + background: -color('warn',1) &--success .vs-input__progress__bar - background: vs-color('success',1) + background: -color('success',1) &__bar width: 32% height: 2px @@ -223,7 +236,7 @@ position: absolute width: 100% height: 100% - border: 2px solid vs-color('primary',1) + border: 2px solid -color('primary',1) border-radius: inherit border-top: 2px solid transparent border-left: 2px solid transparent @@ -237,7 +250,7 @@ position: absolute width: 100% height: 100% - border: 2px dashed vs-color('primary',1) + border: 2px dashed -color('primary',1) border-radius: inherit border-top: 2px solid transparent border-left: 2px solid transparent @@ -261,14 +274,14 @@ left: 0px pointer-events: none &__1 - border-bottom: 2px solid vs-color('gray-3') + border-bottom: 2px solid -color('gray-3') width: 100% height: 2px position: absolute bottom: 0px transition: all .25s ease &__2 - border-bottom: 2px solid vs-color('color',1) + border-bottom: 2px solid -color('color',1) width: 0% height: 2px position: absolute @@ -299,7 +312,7 @@ pointer-events: none z-index: 10 &__1 - box-shadow: 0px 6px 25px -6px rgba(0,0,0, vs-var(shadow-opacity)) + box-shadow: 0px 6px 25px -6px rgba(0,0,0, -var(shadow-opacity)) width: 100% height: 100% position: absolute @@ -314,13 +327,13 @@ &:focus transform: translate(0,3px) ~ .vs-input__icon - background: vs-color('background') !important + background: -color('background') !important opacity: 1 - box-shadow: 0px 10px 20px -5px rgba(0,0,0, vs-var(shadow-opacity)) !important + box-shadow: 0px 10px 20px -5px rgba(0,0,0, -var(shadow-opacity)) !important ~ .vs-input__affects .vs-input__affects__1 transform: translate(0,3px) - box-shadow: 0px 0px 3px 0px rgba(0,0,0, vs-var(shadow-opacity)) + box-shadow: 0px 0px 3px 0px rgba(0,0,0, -var(shadow-opacity)) @keyframes rotateInputLoading 0% diff --git a/packages/vuesax/src/components/vsInput/Base/vsInput.ts b/packages/vuesax/src/components/vsInput/Base/vsInput.ts index a8a9e107..e765f26c 100644 --- a/packages/vuesax/src/components/vsInput/Base/vsInput.ts +++ b/packages/vuesax/src/components/vsInput/Base/vsInput.ts @@ -7,26 +7,20 @@ export default class VsInput extends VsComponent { isVisiblePassword: boolean = false @Prop({ default: '' }) value!: any - @Prop({ default: '' }) labelPlaceholder!: any - @Prop({ default: '' }) label!: any - + @Prop({ type: Boolean, default: false }) block!: boolean @Prop({ type: Boolean, default: false }) iconAfter!: boolean - @Prop({ type: Boolean, default: false }) visiblePassword!: boolean - @Prop({ type: Boolean, default: false }) loading!: boolean - @Prop({ type: String, default: null }) color!: string - @Prop({ type: String, default: null }) state!: string - @Prop({ type: Number, default: 0 }) progress!: number - @Prop({ type: Boolean, default: false }) border!: boolean - @Prop({ type: Boolean, default: false }) shadow!: boolean + @Prop({ type: Boolean, default: false }) transparent!: boolean + @Prop({ type: Boolean, default: false }) textWhite!: boolean + @Prop({ type: Boolean, default: false }) square!: boolean // tslint:disable-next-line:variable-name _uid: any @@ -203,7 +197,11 @@ export default class VsInput extends VsComponent { `vs-input-parent--state-${this.state}`, { 'vs-input-parent--border': !!this.border }, { 'vs-input-parent--shadow': !!this.shadow }, - { [`vs-input-content--has-label`]: this.label || this.labelPlaceholder } + { [`vs-input-content--has-label`]: this.label || this.labelPlaceholder }, + { block: this.block }, + { transparent: this.transparent }, + { textWhite: this.textWhite }, + { square: this.square } ] }, [ inputContent, diff --git a/packages/vuesax/src/components/vsNavbar/Base/_root.sass b/packages/vuesax/src/components/vsNavbar/Base/_root.sass new file mode 100644 index 00000000..b2504346 --- /dev/null +++ b/packages/vuesax/src/components/vsNavbar/Base/_root.sass @@ -0,0 +1,2 @@ +.vs-navbar-content + --vs-color: var(--vs-background) diff --git a/packages/vuesax/src/components/vsNavbar/Base/index.ts b/packages/vuesax/src/components/vsNavbar/Base/index.ts new file mode 100644 index 00000000..33160d34 --- /dev/null +++ b/packages/vuesax/src/components/vsNavbar/Base/index.ts @@ -0,0 +1,12 @@ +import './style.sass' +import component from './VsNavbar' + +component.install = (vue: any) => { + vue.component('vs-navbar', component) +} + +if (typeof window !== 'undefined' && window.Vue) { + component.install(window.Vue) +} + +export default component diff --git a/packages/vuesax/src/components/vsNavbar/Base/style.sass b/packages/vuesax/src/components/vsNavbar/Base/style.sass new file mode 100644 index 00000000..2b23a399 --- /dev/null +++ b/packages/vuesax/src/components/vsNavbar/Base/style.sass @@ -0,0 +1,66 @@ +@import '../../../styles/mixins' +@import '../../../styles/colors' +@import 'root' + +.vs-navbar-content + width: 100% + position: absolute + z-index: 9000 + top: 0px + width: 100% + border-radius: 0px 0px 15px 15px + background: -color('color') + transition: all .25s ease + color: -color('text') + &.paddingScroll:not(.paddingScrollActive) + padding-top: 20px + padding-bottom: 20px + .vs-navbar__group__items + margin-bottom: -30px + &.square + border-radius: 0px + &.textWhite + color: #fff + .vs-navbar__line + background: #fff + .vs-navbar__item + &:before + background: #fff + &.fixed + position: fixed !important + &.shadow, &.shadowActive + box-shadow: 0px 5px 25px 0px rgba(0,0,0, -var('shadow-opacity')) + &.hidden + transform: translate(0,-100%) + +.vs-navbar + width: 100% + position: relative + display: flex + align-items: center + justify-content: space-between + padding: 0px 15px + box-sizing: border-box + &__left + display: flex + align-items: center + justify-content: flex-start + &__right + display: flex + align-items: center + justify-content: flex-end + &__center + display: flex + align-items: center + justify-content: center + &__line + position: absolute + left: 0px + bottom: 0px + width: 100px + background: -color('text') + height: 3px + transition: all .25s ease + &.notTransition + transition: none !important + diff --git a/packages/vuesax/src/components/vsNavbar/Base/vsNavbar.ts b/packages/vuesax/src/components/vsNavbar/Base/vsNavbar.ts new file mode 100644 index 00000000..b334da57 --- /dev/null +++ b/packages/vuesax/src/components/vsNavbar/Base/vsNavbar.ts @@ -0,0 +1,205 @@ +import { VNode } from 'vue' +import { Component, Prop, Watch } from 'vue-property-decorator' +import VsComponent from '../../../mixins/component' + +@Component +export default class VsNavbar extends VsComponent { + + @Prop({ default: false, type: Boolean }) loading: boolean + @Prop({ default: false, type: Boolean }) fixed: boolean + @Prop({ default: false, type: Boolean }) shadow: boolean + @Prop({ default: false, type: Boolean }) shadowScroll: boolean + @Prop({ default: false, type: Boolean }) hideScroll: boolean + @Prop({ default: false, type: Boolean }) textWhite: boolean + @Prop({ default: false, type: Boolean }) square: boolean + @Prop({ default: false, type: Boolean }) paddingScroll: boolean + @Prop({ default: false, type: Boolean }) notLine: boolean + @Prop({ default: false, type: Boolean }) leftCollapsed: boolean + @Prop({ default: false, type: Boolean }) centerCollapsed: boolean + @Prop({ default: false, type: Boolean }) rightCollapsed: boolean + @Prop({ default: null }) targetScroll: any + + leftLine: number = 0 + widthLine: number = 0 + scrollTop: number = 0 + collapsedWidth: number = 0 + hidden: boolean = false + shadowActive: boolean = false + paddingScrollActive: boolean = false + lineNotTransition: boolean = false + collapsedForced: boolean = false + + @Watch('hideScroll') + @Watch('paddingScroll') + @Watch('shadowScroll') + handleShadowScroll() { + this.handleScroll() + } + + setModel(id: string) { + this.$emit('input', id) + } + + setLeftLine(left: any, transition: boolean = true) { + if (!transition) { + this.lineNotTransition = true + } else { + this.lineNotTransition = false + } + this.$nextTick(() => { + this.leftLine = left + }) + } + + setWidthLine(width: any) { + this.$nextTick(() => { + this.widthLine = width + }) + } + + scroll(evt: any) { + const scrollTop = this.targetScroll ? document.querySelector(this.targetScroll).scrollTop : window.pageYOffset + if (this.hideScroll) { + if (Math.sign(scrollTop - this.scrollTop) === 1) { + this.hidden = true + } else { + this.hidden = false + } + } + + if (this.shadowScroll) { + if (scrollTop > 0) { + this.shadowActive = true + } else { + this.shadowActive = false + } + } + + if (this.paddingScroll) { + if (scrollTop > 0) { + this.paddingScrollActive = true + } else { + this.paddingScrollActive = false + } + } + this.scrollTop = scrollTop + } + + handleScroll() { + if (this.hideScroll || this.shadowScroll || this.paddingScroll) { + if (this.targetScroll) { + const scrollElement = document.querySelector(this.targetScroll) + scrollElement.addEventListener('scroll', this.scroll) + } else { + window.addEventListener('scroll', this.scroll) + } + } + } + + handleResize() { + const active: HTMLElement = this.$el.querySelector('.vs-navbar__item.active') + if (active) { + this.setLeftLine(active.offsetLeft, false) + } else { + this.widthLine = 0 + } + const navbar: any = this.$el + + if (this.leftCollapsed || this.centerCollapsed || this.rightCollapsed) { + if (navbar.offsetWidth < this.collapsedWidth) { + this.collapsedForced = true + } + } + + if (this.collapsedForced) { + this.$emit('collapsed', true) + } else { + this.$emit('collapsed', false) + } + + if (navbar.offsetWidth < this.collapsedWidth) { + this.$emit('collapsed', true) + } else { + this.$emit('collapsed', false) + this.collapsedForced = false + } + } + + mounted() { + setTimeout(() => { + const left: any = this.$refs.left + const center: any = this.$refs.center + const right: any = this.$refs.right + this.collapsedWidth = left.offsetWidth + center.offsetWidth + right.offsetWidth + 150 + const navbar: any = this.$el + if (navbar.offsetWidth < this.collapsedWidth) { + this.collapsedForced = true + this.$emit('collapsed', true) + this.widthLine = 0 + this.handleResize() + } + }, 150) + + this.handleScroll() + window.addEventListener('resize', this.handleResize) + } + + public render(h: any): VNode { + const left = h('div', { + staticClass: 'vs-navbar__left', + ref: 'left' + }, [ + this.$slots.left + ]) + + const center = h('div', { + staticClass: 'vs-navbar__center', + ref: 'center' + }, [ + this.$slots.default + ]) + + const right = h('div', { + staticClass: 'vs-navbar__right', + ref: 'right' + }, [ + this.$slots.right + ]) + + const line = h('div', { + staticClass: 'vs-navbar__line', + class: { + notTransition: this.lineNotTransition + }, + style: { + left: `${this.leftLine}px`, + width: `${this.widthLine}px` + } + }) + + const navbar = h('div', { + staticClass: 'vs-navbar' + }, [ + (this.leftCollapsed ? !this.collapsedForced : true) && left, + (this.centerCollapsed ? !this.collapsedForced : true) && center, + (this.rightCollapsed ? !this.collapsedForced : true) && right + ]) + + return h('div', { + staticClass: 'vs-navbar-content', + class: { + fixed: this.fixed, + shadow: this.shadow, + hidden: this.hidden, + shadowActive: this.shadowActive, + textWhite: this.textWhite, + square: this.square, + paddingScroll: this.paddingScroll, + paddingScrollActive: this.paddingScrollActive + } + }, [ + navbar, + !this.notLine && line + ]) + } +} diff --git a/packages/vuesax/src/components/vsNavbar/Group/index.ts b/packages/vuesax/src/components/vsNavbar/Group/index.ts new file mode 100644 index 00000000..dd473593 --- /dev/null +++ b/packages/vuesax/src/components/vsNavbar/Group/index.ts @@ -0,0 +1,12 @@ +import './style.sass' +import component from './VsNavbarGroup' + +component.install = (vue: any) => { + vue.component('vs-navbar-group', component) +} + +if (typeof window !== 'undefined' && window.Vue) { + component.install(window.Vue) +} + +export default component diff --git a/packages/vuesax/src/components/vsNavbar/Group/style.sass b/packages/vuesax/src/components/vsNavbar/Group/style.sass new file mode 100644 index 00000000..2b070f16 --- /dev/null +++ b/packages/vuesax/src/components/vsNavbar/Group/style.sass @@ -0,0 +1,64 @@ +@import '../../../styles/mixins' +.vs-navbar__group + position: relative + &:hover + .vs-navbar__group__items + opacity: 1 + visibility: visible + transform: translate(0, 100%) + &__item + padding: 10px 15px + background: transparent + color: inherit + font-weight: bold + transition: all .25s ease, color 0s + &__items + position: absolute + bottom: 0px + left: 0px + display: flex + align-items: center + justify-content: center + flex-direction: column + margin-bottom: -12px + transform: translate(0, 90%) + background: -color('color') + border-radius: 5px 18px 18px 18px + padding: 10px + min-width: 160px + opacity: 0 + box-shadow: 0px 5px 20px 0px rgba(0,0,0, -var('shadow-opacity')) + transition: all .25s ease + color: inherit + visibility: hidden + &:after + content: '' + left: 0px + top: -13px + background: transparent + width: 100% + height: 14px + position: absolute + z-index: -1 + .vs-navbar__item + text-align: left + width: 100% + position: relative + &:before + content: '' + left: 0px + top: 0px + width: 4px + height: 4px + background: -color('text') + position: absolute + border-radius: 50% + top: calc(50% - 2px) + opacity: 0 + transform: translate(-10px) + transition: all .25s ease + &.active + &:before + opacity: 1 + transform: translate(0px) + diff --git a/packages/vuesax/src/components/vsNavbar/Group/vsNavbarGroup.ts b/packages/vuesax/src/components/vsNavbar/Group/vsNavbarGroup.ts new file mode 100644 index 00000000..f62ba308 --- /dev/null +++ b/packages/vuesax/src/components/vsNavbar/Group/vsNavbarGroup.ts @@ -0,0 +1,40 @@ +import { VNode } from 'vue' +import { Component } from 'vue-property-decorator' +import VsComponent from '../../../mixins/component' + +@Component +export default class VsNavbarGroup extends VsComponent { + setModel(id: any) { + const parent: any = this.$parent + parent.setModel(id) + } + setLeftLine() { + const parent: any = this.$parent + const left = (this.$el as any).offsetLeft + parent.setLeftLine(left) + const width = (this.$refs.item as any).scrollWidth + parent.setWidthLine(width) + } + setWidthLine() {} + + public render(h: any): VNode { + const item = h('button', { + staticClass: 'vs-navbar__group__item', + ref: 'item' + }, [ + this.$slots.default + ]) + const items = h('div', { + staticClass: 'vs-navbar__group__items' + }, [ + this.$slots.items + ]) + + return h('div', { + staticClass: 'vs-navbar__group', + }, [ + item, + items + ]) + } +} diff --git a/packages/vuesax/src/components/vsNavbar/Item/index.ts b/packages/vuesax/src/components/vsNavbar/Item/index.ts new file mode 100644 index 00000000..3c48305e --- /dev/null +++ b/packages/vuesax/src/components/vsNavbar/Item/index.ts @@ -0,0 +1,12 @@ +import './style.sass' +import component from './VsNavbarItem' + +component.install = (vue: any) => { + vue.component('vs-navbar-item', component) +} + +if (typeof window !== 'undefined' && window.Vue) { + component.install(window.Vue) +} + +export default component diff --git a/packages/vuesax/src/components/vsNavbar/Item/style.sass b/packages/vuesax/src/components/vsNavbar/Item/style.sass new file mode 100644 index 00000000..f09c0a04 --- /dev/null +++ b/packages/vuesax/src/components/vsNavbar/Item/style.sass @@ -0,0 +1,15 @@ +@import '../../../styles/mixins' +.vs-navbar__item + padding: 10px 15px + margin: 0px + border: 0px + background: transparent + font-size: .85rem + opacity: .7 + transition: all .25s ease, color 0s + font-weight: bold + color: inherit + &.active + opacity: 1 + &:hover + opacity: 1 diff --git a/packages/vuesax/src/components/vsNavbar/Item/vsNavbarItem.ts b/packages/vuesax/src/components/vsNavbar/Item/vsNavbarItem.ts new file mode 100644 index 00000000..e17c2214 --- /dev/null +++ b/packages/vuesax/src/components/vsNavbar/Item/vsNavbarItem.ts @@ -0,0 +1,74 @@ +import { VNode } from 'vue' +import { Component, Prop, Watch } from 'vue-property-decorator' +import VsComponent from '../../../mixins/component' + +@Component +export default class VsNavbarItem extends VsComponent { + @Prop({ default: false, type: Boolean }) active: boolean + @Prop({}) to: string + @Prop({}) id: string + @Prop({}) href: string + @Prop({ default: '_blank' }) target: string + $router: any + + @Watch('active') + handleWatchActive() { + this.handleLine() + } + + handleLine() { + this.$nextTick(() => { + if (this.active) { + const parent: any = this.$parent + const left = (this.$el as any).offsetLeft + parent.setLeftLine(left) + const width = (this.$el as any).scrollWidth + parent.setWidthLine(width) + } + }) + } + + handleClick() { + if (this.to) { + this.$router.push(this.to) + } else if (this.href) { + window.open(this.href, this.target) + } + } + + handleActive() { + const parent: any = this.$parent + parent.setModel(this.id) + this.handleLine() + } + + mounted() { + setTimeout(() => { + if (this.active) { + const el: any = this.$el + const parent: any = this.$parent + const left = el.offsetLeft + parent.setLeftLine(left) + const width = el.scrollWidth + parent.setWidthLine(width) + } + }, 150) + } + + public render(h: any): VNode { + return h('button', { + staticClass: 'vs-navbar__item', + class: { + active: this.active + }, + on: { + click: (evt: any) => { + this.$emit('click', evt) + this.handleLine() + this.handleClick() + this.handleActive() + } + } + }, this.$slots.default) + } +} diff --git a/packages/vuesax/src/components/vsPagination/Base/style.sass b/packages/vuesax/src/components/vsPagination/Base/style.sass index 2860f79e..a19c18fd 100644 --- a/packages/vuesax/src/components/vsPagination/Base/style.sass +++ b/packages/vuesax/src/components/vsPagination/Base/style.sass @@ -10,7 +10,7 @@ &.notMargin .vs-pagination &__dotted - background: vs-color('gray-3') + background: -color('gray-3') margin: 0px &__arrow margin: 0px !important @@ -70,7 +70,7 @@ &__active width: 12px height: 12px - box-shadow: 0px 2px 10px 0px vs-color('color', .4) + box-shadow: 0px 2px 10px 0px -color('color', .4) transform: scale(1) &.move transform: scale(1.2) @@ -82,13 +82,13 @@ &__progress width: calc(100% - 16px) height: 3px - background: vs-color('gray-3') + background: -color('gray-3') position: absolute bottom: -8px border-radius: 10px .progress width: 0px - background: vs-color('color', 1) + background: -color('color', 1) height: 100% position: relative border-radius: inherit @@ -112,13 +112,13 @@ align-items: center justify-content: center margin: 0px 2px - background: vs-color('gray-3') + background: -color('gray-3') transition: all .25s ease &:disabled opacity: .4 pointer-events: none &:hover - background: vs-color('gray-4') + background: -color('gray-4') i width: 10px height: 10px @@ -142,7 +142,7 @@ top: 0px width: 36px height: 36px - background: vs-color('color') + background: -color('color') border-radius: 12px z-index: 100 display: flex @@ -151,7 +151,7 @@ font-size: .9rem transition: all .25s ease color: #fff - box-shadow: 0px 5px 20px 0px vs-color('color', .3) + box-shadow: 0px 5px 20px 0px -color('color', .3) cursor: default &.move transform: scale(1.1) @@ -221,14 +221,14 @@ height: 36px border-radius: 12px padding: 0px - background: vs-color('gray-3') + background: -color('gray-3') margin: 0px 2px display: flex align-items: center justify-content: center font-size: .9rem transition: all .25s ease - color: vs-color('text') + color: -color('text') position: relative &.loading border-radius: 50% @@ -241,14 +241,14 @@ width: 100% height: 100% border-radius: 50% - border: 2px solid vs-color('color', 1) - border-top: 2px solid vs-color('background', 0) - border-left: 2px solid vs-color('background', 0) - border-bottom: 2px solid vs-color('background', 0) + border: 2px solid -color('color', 1) + border-top: 2px solid -color('background', 0) + border-left: 2px solid -color('background', 0) + border-bottom: 2px solid -color('background', 0) box-sizing: border-box transition: all .25s ease display: block - box-shadow: 0px 0px 0px 0px vs-color('color',1) + box-shadow: 0px 0px 0px 0px -color('color',1) animation: loadingPagination .6s ease infinite &:before content: '' @@ -256,14 +256,14 @@ width: 100% height: 100% border-radius: 50% - border: 2px dashed vs-color('color',1) - border-top: 2px solid vs-color('background', 0) - border-left: 2px solid vs-color('background', 0) - border-bottom: 2px solid vs-color('background', 0) + border: 2px dashed -color('color',1) + border-top: 2px solid -color('background', 0) + border-left: 2px solid -color('background', 0) + border-bottom: 2px solid -color('background', 0) box-sizing: border-box transition: all .25s ease display: block - box-shadow: 0px 0px 0px 0px vs-color('color',1) + box-shadow: 0px 0px 0px 0px -color('color',1) animation: loadingPagination .6s linear infinite &.disabled @@ -271,7 +271,7 @@ pointer-events: none user-select: none &:hover - background: vs-color('gray-4') + background: -color('gray-4') &:active transform: scale(.9) diff --git a/packages/vuesax/src/components/vsPagination/Base/vsPagination.ts b/packages/vuesax/src/components/vsPagination/Base/vsPagination.ts index 65542a06..a3d8bbda 100644 --- a/packages/vuesax/src/components/vsPagination/Base/vsPagination.ts +++ b/packages/vuesax/src/components/vsPagination/Base/vsPagination.ts @@ -41,6 +41,17 @@ export default class VsPagination extends VsComponent { @Prop({ default: 5, type: Number }) dottedNumber: number + @Watch('length') + handleLength() { + this.$nextTick(() => { + const offsetLeftPagination = (this.$refs.pagination as HTMLElement).offsetLeft + this.leftActive = (this.$refs[`btn${this.value}`] as HTMLElement).offsetLeft + offsetLeftPagination + setTimeout(() => { + this.activeClassMove = false + }, 300) + }) + } + @Watch('value') handleValue(val: number, prevValue: number) { if (this.isDisabledItem(val) || this.isLoadingItem(val)) { @@ -194,7 +205,7 @@ export default class VsPagination extends VsComponent { ]) } else if (this.buttonsDotted || this.length <= 6) { return this.renderButtons([ - ...this.getButtons(1, this.length), + ...this.getButtons(1, this.length == 0 ? 1 : this.length ), ]) } diff --git a/packages/vuesax/src/components/vsRadio/Base/style.sass b/packages/vuesax/src/components/vsRadio/Base/style.sass index ef6657ac..183d0587 100644 --- a/packages/vuesax/src/components/vsRadio/Base/style.sass +++ b/packages/vuesax/src/components/vsRadio/Base/style.sass @@ -14,8 +14,8 @@ transform: scale(1.3) .vs-radio__effect &:after - border: 7px solid vs-color('color', 1) - box-shadow: 0px 3px 12px 0px vs-color('color', .3) + border: 7px solid -color('color', 1) + box-shadow: 0px 3px 12px 0px -color('color', .3) &:not(.active) .vs-radio input @@ -24,7 +24,7 @@ .vs-radio__effect__icon opacity: .7 &::after - border: 2px solid vs-color('text', .2) + border: 2px solid -color('text', .2) &.loading pointer-events: none @@ -44,14 +44,14 @@ width: 100% height: 100% border-radius: inherit - border: 2px solid vs-color('text', .4) - border-top: 2px solid vs-color('text', 0) - border-left: 2px solid vs-color('text', 0) - border-bottom: 2px solid vs-color('text', 0) + border: 2px solid -color('text', .4) + border-top: 2px solid -color('text', 0) + border-left: 2px solid -color('text', 0) + border-bottom: 2px solid -color('text', 0) box-sizing: border-box transition: all .25s ease display: block - box-shadow: 0px 0px 0px 0px vs-color('color', .4) + box-shadow: 0px 0px 0px 0px -color('color', .4) animation: loadingRadio .6s ease infinite &:before content: '' @@ -59,14 +59,14 @@ width: 100% height: 100% border-radius: inherit - border: 2px dashed vs-color('text', .4) - border-top: 2px solid vs-color('text', 0) - border-left: 2px solid vs-color('text', 0) - border-bottom: 2px solid vs-color('text', 0) + border: 2px dashed -color('text', .4) + border-top: 2px solid -color('text', 0) + border-left: 2px solid -color('text', 0) + border-bottom: 2px solid -color('text', 0) box-sizing: border-box transition: all .25s ease display: block - box-shadow: 0px 0px 0px 0px vs-color('color', .4) + box-shadow: 0px 0px 0px 0px -color('color', .4) animation: loadingRadio .6s linear infinite label cursor: pointer @@ -75,7 +75,7 @@ pointer-events: none .vs-radio &__effect - background: vs-color('gray-3') + background: -color('gray-3') label pointer-events: none .vs-radio @@ -112,11 +112,11 @@ width: 100% height: 100% border-radius: inherit - border: 2px solid vs-color('text', .4) + border: 2px solid -color('text', .4) box-sizing: border-box transition: all .25s ease display: block - box-shadow: 0px 0px 0px 0px vs-color('color', .4) + box-shadow: 0px 0px 0px 0px -color('color', .4) input margin: 0px padding: 0px @@ -134,14 +134,14 @@ // &:checked // ~ .vs-radio__effect // &:after - // // border: 7px solid vs-color('color', 1) + // // border: 7px solid -color('color', 1) // animation-name: radio // animation-duration: 4s // animation-play-state: paused // animation-iteration-count: infinite - // box-shadow: 0px 3px 10px 0px vs-color('color', .4) + // box-shadow: 0px 3px 10px 0px -color('color', .4) @keyframes loadingRadio 0% diff --git a/packages/vuesax/src/components/vsSelect/Base/style.sass b/packages/vuesax/src/components/vsSelect/Base/style.sass index 670b039b..5147b001 100644 --- a/packages/vuesax/src/components/vsSelect/Base/style.sass +++ b/packages/vuesax/src/components/vsSelect/Base/style.sass @@ -4,15 +4,15 @@ @mixin state($color) .vs-select__input - // border: 2px solid vs-color($color,.5) - background: vs-color($color,.05) - color: vs-color($color,1) + // border: 2px solid -color($color,.5) + background: -color($color,.05) + color: -color($color,1) &:hover - // border: 2px solid vs-color($color, 0) - color: vs-color('text',1) + // border: 2px solid -color($color, 0) + color: -color('text',1) .vs-select__chips - background: vs-color($color,.05) - color: vs-color($color,1) + background: -color($color,.05) + color: -color($color,1) &:hover &:after opacity: 0 @@ -23,20 +23,20 @@ position: absolute top: 0px left: 0px - border: 2px solid vs-color($color,.5) + border: 2px solid -color($color,.5) border-radius: inherit transition: all .25s ease .vs-select__label - color: vs-color($color,1) + color: -color($color,1) .vs-select__icon - color: vs-color($color,1) - background: vs-color($color,.1) - box-shadow: -15px 10px 10px -10px vs-color($color,.1) + color: -color($color,1) + background: -color($color,.1) + box-shadow: -15px 10px 10px -10px -color($color,.1) .vs-icon-arrow &:after - background: vs-color($color,1) + background: -color($color,1) &:before - background: vs-color($color,1) + background: -color($color,1) .vs-select-enter-active transition: all .25s ease @@ -44,10 +44,10 @@ opacity: 0 transform: translate(0, -10px) transition: all .25s ease - box-shadow: 0px 0px 0px 0px rgba(0,0,0, vs-var(shadow-opacity)) + box-shadow: 0px 0px 0px 0px rgba(0,0,0, -var(shadow-opacity)) &:after opacity: 0 !important - box-shadow: 0px 0px 0px 0px rgba(0,0,0, vs-var(shadow-opacity)) + box-shadow: 0px 0px 0px 0px rgba(0,0,0, -var(shadow-opacity)) .vs-select-leave-active transition: all .25s ease @@ -55,16 +55,18 @@ opacity: 0 transform: translate(0, -10px) transition: all .25s ease - box-shadow: 0px 0px 0px 0px rgba(0,0,0, vs-var(shadow-opacity)) + box-shadow: 0px 0px 0px 0px rgba(0,0,0, -var(shadow-opacity)) &.top transform: translate(0, 10px) !important &:after opacity: 0 !important - box-shadow: 0px 0px 0px 0px rgba(0,0,0, vs-var(shadow-opacity)) + box-shadow: 0px 0px 0px 0px rgba(0,0,0, -var(shadow-opacity)) .vs-select-content width: 100% max-width: 200px - + &.block + &.block + max-width: 100% .vs-select position: relative display: flex @@ -72,6 +74,7 @@ justify-content: center min-height: 38px width: 100% + &--state-success @include state('success') &--state-danger @@ -93,7 +96,7 @@ &.activeOptions .vs-select__input, .vs-select__chips border-radius: 0px 0px 12px 12px !important - box-shadow: 0px -5px 25px -4px rgba(0,0,0, vs-var(shadow-opacity)) !important + box-shadow: 0px -5px 25px -4px rgba(0,0,0, -var(shadow-opacity)) !important &--disabled opacity: .6 pointer-events: none @@ -114,16 +117,16 @@ margin-top: -2px !important .vs-select__input border-radius: 12px 12px 0px 0px - background: vs-color('background') - box-shadow: 0px 5px 25px -4px rgba(0,0,0, vs-var(shadow-opacity)) + background: -color('background') + box-shadow: 0px 5px 25px -4px rgba(0,0,0, -var(shadow-opacity)) transform: translate(0, -4px) transition: all .25s ease, height 0s // border: 2px solid transparent !important - color: vs-color('text',1) + color: -color('text',1) .vs-select__chips border-radius: 12px 12px 0px 0px - background: vs-color('background') - box-shadow: 0px 5px 25px -4px rgba(0,0,0, vs-var(shadow-opacity)) + background: -color('background') + box-shadow: 0px 5px 25px -4px rgba(0,0,0, -var(shadow-opacity)) transform: translate(0, -4px) transition: all .25s ease, height 0s &:after @@ -145,8 +148,8 @@ border-radius: 12px cursor: pointer transition: all .25s ease, height 0s - background: vs-color('gray-2') - color: vs-color('text') + background: -color('gray-2') + color: -color('text') min-height: 38px padding-right: 30px width: 100% @@ -158,8 +161,8 @@ user-select: none &:focus border-radius: 12px 12px 0px 0px - background: vs-color('background') - box-shadow: 0px 5px 25px -4px rgba(0,0,0, vs-var(shadow-opacity)) + background: -color('background') + box-shadow: 0px 5px 25px -4px rgba(0,0,0, -var(shadow-opacity)) transform: translate(0, -4px) transition: all .25s ease ~ .vs-select__label--placeholder @@ -170,8 +173,8 @@ font-size: .75rem margin-top: 0px !important &:hover - background: vs-color('background') - box-shadow: 0px 5px 25px -4px rgba(0,0,0, vs-var(shadow-opacity)) + background: -color('background') + box-shadow: 0px 5px 25px -4px rgba(0,0,0, -var(shadow-opacity)) transform: translate(0, -4px) ~ .vs-select__label margin-top: -4px @@ -184,7 +187,7 @@ height: auto position: absolute left: 0px - background: vs-color('gray-2') + background: -color('gray-2') z-index: 300 border-radius: 12px display: flex @@ -199,13 +202,13 @@ padding-right: 26px &:focus border-radius: 12px 12px 0px 0px - background: vs-color('background') - box-shadow: 0px 5px 25px -4px rgba(0,0,0, vs-var(shadow-opacity)) + background: -color('background') + box-shadow: 0px 5px 25px -4px rgba(0,0,0, -var(shadow-opacity)) transform: translate(0, -4px) transition: all .25s ease &:hover - background: vs-color('background') - box-shadow: 0px 5px 25px -4px rgba(0,0,0, vs-var(shadow-opacity)) + background: -color('background') + box-shadow: 0px 5px 25px -4px rgba(0,0,0, -var(shadow-opacity)) transform: translate(0, -4px) transition: all .25s ease ~ .vs-icon-arrow @@ -222,11 +225,11 @@ margin: 2px 3px min-width: 30px &::placeholder - color: vs-color('text', .4) + color: -color('text', .4) &__chip flex: 0 1 auto position: relative - background: vs-color('background') + background: -color('background') border-radius: 10px display: flex align-items: center @@ -235,9 +238,9 @@ margin: 2px 3px padding-right: 10px font-size: .84rem - border: 2px solid vs-color('gray-2') + border: 2px solid -color('gray-2') box-sizing: border-box - color: vs-color('text') + color: -color('text') &.isCollapse padding-right: 6px !important &__close @@ -246,7 +249,7 @@ right: -4px width: 15px height: 15px - background: vs-color('gray-4') + background: -color('gray-4') display: flex align-items: center justify-content: center @@ -255,7 +258,7 @@ cursor: pointer transition: all .25s ease &:hover - background: vs-color('danger') + background: -color('danger') .vs-icon-close --vs-color: var(--vs-background) &:after @@ -271,15 +274,15 @@ &__options --vs-color: var(--vs-primary) position: absolute - z-index: 9999 - background: vs-color('background') + z-index: 99999 + background: -color('background') padding: 5px border-radius: 0px 0px 12px 12px overflow: hidden - box-shadow: 0px 10px 20px -5px rgba(0,0,0, vs-var(shadow-opacity)) + box-shadow: 0px 10px 20px -5px rgba(0,0,0, -var(shadow-opacity)) &.top border-radius: 12px 12px 0px 0px - box-shadow: 0px -10px 20px -5px rgba(0,0,0, vs-var(shadow-opacity)) + box-shadow: 0px -10px 20px -5px rgba(0,0,0, -var(shadow-opacity)) &:after top: auto bottom: -10px @@ -291,8 +294,8 @@ margin-left: 10% left: 0px height: 10px - background: vs-color('background') - box-shadow: 0px 0px 20px 0px rgba(0,0,0, vs-var(shadow-opacity)) + background: -color('background') + box-shadow: 0px 0px 20px 0px rgba(0,0,0, -var(shadow-opacity)) z-index: 200 transition: all .25s ease .05s opacity: 1 @@ -316,7 +319,7 @@ background: transparent &::-webkit-scrollbar-thumb - background: vs-color('gray-3') + background: -color('gray-3') border-radius: 5px &__label @@ -369,7 +372,7 @@ position: absolute width: 100% height: 100% - border: 2px solid vs-color('primary',1) + border: 2px solid -color('primary',1) border-radius: inherit border-top: 2px solid transparent border-left: 2px solid transparent @@ -383,7 +386,7 @@ position: absolute width: 100% height: 100% - border: 2px dashed vs-color('primary',1) + border: 2px dashed -color('primary',1) border-radius: inherit border-top: 2px solid transparent border-left: 2px solid transparent @@ -401,15 +404,15 @@ transition: all .25s ease overflow: hidden &--success - color: vs-color('success',1) + color: -color('success',1) &--danger - color: vs-color('danger',1) + color: -color('danger',1) &--warn - color: vs-color('warn',1) + color: -color('warn',1) &--dark - color: vs-color('dark',1) + color: -color('dark',1) &--primary - color: vs-color('primary',1) + color: -color('primary',1) .vs-darken .vs-select__options @@ -417,8 +420,8 @@ --vs-color: 0, 0, 0 !important .vs-select__option &:hover - background: vs-color('color',.2) - color: vs-color('text') + background: -color('color',.2) + color: -color('text') .activeOption - color: vs-color('text') - background: vs-color('color',.6) + color: -color('text') + background: -color('color',.6) diff --git a/packages/vuesax/src/components/vsSelect/Base/vsSelect.ts b/packages/vuesax/src/components/vsSelect/Base/vsSelect.ts index bb546ccb..ded9795f 100644 --- a/packages/vuesax/src/components/vsSelect/Base/vsSelect.ts +++ b/packages/vuesax/src/components/vsSelect/Base/vsSelect.ts @@ -30,6 +30,8 @@ export default class VsSelect extends VsComponent { @Prop({ type: String, default: null }) state!: string + @Prop({ type: Boolean, default: false }) block!: boolean + renderSelect: boolean = false activeOptions: boolean = false @@ -368,7 +370,9 @@ export default class VsSelect extends VsComponent { @Watch('value') handleValue(val: string) { this.getValue() - this.$emit('change', val) + setTimeout(() => { + this.$emit('change', val) + }, 10) if (this.multiple) { this.$nextTick(() => { @@ -414,6 +418,7 @@ export default class VsSelect extends VsComponent { } beforeDestroy() { + this.handleBlur() window.removeEventListener('resize', this.handleResize) window.removeEventListener('scroll', this.handleScroll) } @@ -588,7 +593,7 @@ export default class VsSelect extends VsComponent { { 'vs-select--disabled': this.disabled, 'activeOptions': this.activeOptions, - 'loading': this.loading, + 'loading': this.loading } ], on: { @@ -613,7 +618,10 @@ export default class VsSelect extends VsComponent { ]) return h('div', { - staticClass: 'vs-select-content' + staticClass: 'vs-select-content', + class: { + block: this.block + } }, [ selectContent, messageSuccess, diff --git a/packages/vuesax/src/components/vsSelect/Option/style.sass b/packages/vuesax/src/components/vsSelect/Option/style.sass index ec2a56b2..195bbcb4 100644 --- a/packages/vuesax/src/components/vsSelect/Option/style.sass +++ b/packages/vuesax/src/components/vsSelect/Option/style.sass @@ -6,9 +6,9 @@ text-align: left background: transparent transition: all .25s ease - color: vs-color('text') + color: -color('text') border-radius: 5px - box-shadow: 0px 0px 0px 0px rgba(0,0,0, vs-var(shadow-opacity)) + box-shadow: 0px 0px 0px 0px rgba(0,0,0, -var(shadow-opacity)) margin: 2px 0px display: flex align-items: cneter @@ -32,7 +32,7 @@ .vs-select__option-group padding-left: 0px &.isHover - background: vs-color('gray-2') !important + background: -color('gray-2') !important &:disabled .vs-checkbox-content pointer-events: none @@ -50,14 +50,14 @@ &.activeOption pointer-events: auto !important &.isHover - background: vs-color('gray-2') + background: -color('gray-2') &.activeOption - background: vs-color('color', .05) - color: vs-color('color', 1) + background: -color('color', .05) + color: -color('color', 1) pointer-events: none // &:last-child // border-radius: 0px 0px 12px 12px &:hover:not(:disabled) - color: vs-color('color') + color: -color('color') padding-left: 14px diff --git a/packages/vuesax/src/components/vsSelect/OptionGroup/style.sass b/packages/vuesax/src/components/vsSelect/OptionGroup/style.sass index 31bf828f..f72b8235 100644 --- a/packages/vuesax/src/components/vsSelect/OptionGroup/style.sass +++ b/packages/vuesax/src/components/vsSelect/OptionGroup/style.sass @@ -1,14 +1,14 @@ @import '../../../styles/mixins' .vs-select__option-group padding-left: 10px - border-bottom: 2px solid vs-color('gray-1') + border-bottom: 2px solid -color('gray-1') position: relative overflow: hidden transition: all .25s ease &:last-child border: 0px &.hiddenOptionGroup - border-bottom: 0px solid vs-color('gray-1') + border-bottom: 0px solid -color('gray-1') // display: none // visibility: hidden // opacity: 0 diff --git a/packages/vuesax/src/components/vsSwitch/Base/style.sass b/packages/vuesax/src/components/vsSwitch/Base/style.sass index f200bb19..8d2875db 100644 --- a/packages/vuesax/src/components/vsSwitch/Base/style.sass +++ b/packages/vuesax/src/components/vsSwitch/Base/style.sass @@ -19,7 +19,7 @@ display: flex align-items: center justify-content: center - background: vs-color('gray-3') + background: -color('gray-3') transition: all .25s ease overflow: hidden &--icon @@ -53,7 +53,7 @@ position: absolute width: calc(100% - 8px) height: calc(100% - 8px) - border: 3px dashed vs-color('color') + border: 3px dashed -color('color') z-index: 200 border-radius: 50% border-top: 3px solid transparent @@ -69,7 +69,7 @@ position: absolute width: calc(100% - 8px) height: calc(100% - 8px) - border: 3px solid vs-color('color') + border: 3px solid -color('color') z-index: 200 border-radius: 50% border-top: 3px solid transparent @@ -93,14 +93,14 @@ visibility: visible transition: all .25s ease .3s &:hover - background: vs-color('gray-4') + background: -color('gray-4') &:active transform: scale(.9) &__background width: 100% height: auto position: absolute - background: vs-color('color') + background: -color('color') border-radius: inherit z-index: 2 transition: all .25s ease-out @@ -114,7 +114,7 @@ padding: 5px padding-left: 25px transition: all .25s ease .05s - color: vs-color('text') + color: -color('text') z-index: 9 display: flex align-items: center @@ -132,13 +132,13 @@ &__circle width: 20px height: 20px - background: vs-color('background') + background: -color('background') border-radius: 20px transition: all .25s ease position: absolute z-index: 10 left: 4px - color: vs-color('text') + color: -color('text') display: flex align-items: center justify-content: center @@ -186,5 +186,5 @@ opacity: 0 ~ .vs-switch__circle left: calc(100% - 24px) - box-shadow: -5px 0px 25px 0px vs-color('background', .6) - color: vs-color('color') + box-shadow: -5px 0px 25px 0px -color('background', .6) + color: -color('color') diff --git a/packages/vuesax/src/components/vsTable/Base/_root.sass b/packages/vuesax/src/components/vsTable/Base/_root.sass new file mode 100644 index 00000000..ee5627b5 --- /dev/null +++ b/packages/vuesax/src/components/vsTable/Base/_root.sass @@ -0,0 +1,2 @@ +.vs-table-content + --vs-color: var(--vs-primary) \ No newline at end of file diff --git a/packages/vuesax/src/components/vsTable/Base/index.ts b/packages/vuesax/src/components/vsTable/Base/index.ts new file mode 100644 index 00000000..87d52ed8 --- /dev/null +++ b/packages/vuesax/src/components/vsTable/Base/index.ts @@ -0,0 +1,12 @@ +import './style.sass' +import component from './VsTable' + +component.install = (vue: any) => { + vue.component('vs-table', component) +} + +if (typeof window !== 'undefined' && window.Vue) { + component.install(window.Vue) +} + +export default component diff --git a/packages/vuesax/src/components/vsTable/Base/style.sass b/packages/vuesax/src/components/vsTable/Base/style.sass new file mode 100644 index 00000000..f33b113d --- /dev/null +++ b/packages/vuesax/src/components/vsTable/Base/style.sass @@ -0,0 +1,66 @@ +@import '../../../styles/mixins' +@import '../../../styles/colors' +@import 'root' + +.vs-table-content + width: 100% + // box-shadow: 0px 5px 22px 0px rgba(0,0,0, -var(shadow-opacity)) + border-radius: 16px +.vs-table + width: 100% + font-size: .9rem + margin: 0px + overflow: auto + table + margin: 0px + border-collapse: collapse + width: 100% + min-width: 500px + &.striped + .vs-table__tr + &:nth-child(2n) + background: -color('gray-1') !important + &_not-found + display: none + padding: 20px + text-align: center + width: 100% + tr + text-align: center + td + padding: 20px + border: 0px + // width: 100% + &__tbody + &:empty + display: none + background: #000 + ~ .vs-table_not-found + display: table-row-group + &.isSelectedValue + tr + cursor: pointer + &__footer + padding: 8px 10px + background: -color('gray-2') + border-radius: 0px 0px 14px 14px + &__header + width: 100% + padding: 10px + background: -color('gray-2') + border-radius: 14px 14px 0px 0px + & ~ .vs-table + .vs-table__th + &:first-child + border-radius: 0px + &:last-child + border-radius: 0px + &__thead + width: 100% + .vs-table__th + background: -color('gray-2') + &:first-child + border-radius: 14px 0px 0px 0px + &:last-child + border-radius: 0px 14px 0px 0px + diff --git a/packages/vuesax/src/components/vsTable/Base/vsTable.ts b/packages/vuesax/src/components/vsTable/Base/vsTable.ts new file mode 100644 index 00000000..de4ab02d --- /dev/null +++ b/packages/vuesax/src/components/vsTable/Base/vsTable.ts @@ -0,0 +1,105 @@ +import * as _ from 'lodash' +import { VNode } from 'vue' +import { Component, Prop } from 'vue-property-decorator' +import VsComponent from '../../../mixins/component' + +@Component +export default class VsTable extends VsComponent { + colspan: number = 0 + @Prop({}) value: any + @Prop({ default: false, type: Boolean }) striped: any + @Prop({ default: false, type: Boolean }) loading: boolean + // @Prop({ default: false, type: Boolean }) multiple: boolean + + mounted() { + const tds = (this.$refs as any).thead.querySelectorAll('th') + this.colspan = tds.length + } + + get isMultipleSelected() { + return _.isArray(this.value) + } + + selected(val: any) { + if (this.isMultipleSelected) { + this.selectedMultiple(val) + } else { + this.$emit('input', val) + } + } + + selectedMultiple(val: any) { + const newVal = this.value + if (this.value.includes(val)) { + newVal.splice(this.value.indexOf(val), 1) + } else { + newVal.push(val) + } + + this.$emit('input', newVal) + } + + public render(h: any): VNode { + const footer = h('footer', { + staticClass: 'vs-table__footer' + }, [ + this.$slots.footer + ]) + + const header = h('header', { + staticClass: 'vs-table__header' + }, [ + this.$slots.header + ]) + + const thead = h('thead', { + ref: 'thead', + staticClass: 'vs-table__thead' + }, [ + this.$slots.thead + ]) + + const notFound = h('tbody', { + staticClass: 'vs-table_not-found' + }, [ + h('tr', [ + h('td', { + attrs: { + colspan: this.colspan + } + }, [ + this.$slots.notFound || 'No matching records found' + ]) + ]) + ]) + + const tbody = h('tbody', { + staticClass: 'vs-table__tbody' + }, [ + this.$slots.tbody, + ]) + + const table = h('div', { + staticClass: 'vs-table', + class: { + isSelectedValue: this.value, + striped: this.striped, + isMultipleSelected: this.isMultipleSelected + } + }, [ + h('table', {}, [ + thead, + tbody, + notFound + ]) + ]) + + return h('div', { + staticClass: 'vs-table-content', + }, [ + this.$slots.header && header, + table, + this.$slots.footer && footer + ]) + } +} diff --git a/packages/vuesax/src/components/vsTable/Td/index.ts b/packages/vuesax/src/components/vsTable/Td/index.ts new file mode 100644 index 00000000..2e44e830 --- /dev/null +++ b/packages/vuesax/src/components/vsTable/Td/index.ts @@ -0,0 +1,12 @@ +import './style.sass' +import component from './VsTableTd' + +component.install = (vue: any) => { + vue.component('vs-td', component) +} + +if (typeof window !== 'undefined' && window.Vue) { + component.install(window.Vue) +} + +export default component diff --git a/packages/vuesax/src/components/vsTable/Td/style.sass b/packages/vuesax/src/components/vsTable/Td/style.sass new file mode 100644 index 00000000..0404a027 --- /dev/null +++ b/packages/vuesax/src/components/vsTable/Td/style.sass @@ -0,0 +1,14 @@ +@import '../../../styles/mixins' +.vs-table__td + padding: 10px 12px + transition: all .25s ease + font-size: .8rem + &:last-child + border-radius: 0px 15px 15px 0px + &:first-child + border-radius: 15px 0px 0px 15px + &.isCheckbox + width: 23px + &.isEdit + text-decoration: underline + cursor: pointer diff --git a/packages/vuesax/src/components/vsTable/Td/vsTableTd.ts b/packages/vuesax/src/components/vsTable/Td/vsTableTd.ts new file mode 100644 index 00000000..7320435b --- /dev/null +++ b/packages/vuesax/src/components/vsTable/Td/vsTableTd.ts @@ -0,0 +1,23 @@ +import { VNode } from 'vue' +import { Component, Prop } from 'vue-property-decorator' +import VsComponent from '../../../mixins/component' + +@Component +export default class VsTableTd extends VsComponent { + @Prop({ type: Boolean }) checkbox: boolean + @Prop({ type: Boolean }) edit: boolean + public render(h: any): VNode { + return h('td', { + staticClass: 'vs-table__td', + on: { + click: (evt: any) => { + this.$emit('click', evt) + } + }, + class: { + isCheckbox: this.checkbox, + isEdit: this.edit + } + }, this.$slots.default) + } +} diff --git a/packages/vuesax/src/components/vsTable/Th/index.ts b/packages/vuesax/src/components/vsTable/Th/index.ts new file mode 100644 index 00000000..a354fe5b --- /dev/null +++ b/packages/vuesax/src/components/vsTable/Th/index.ts @@ -0,0 +1,12 @@ +import './style.sass' +import component from './VsTableTh' + +component.install = (vue: any) => { + vue.component('vs-th', component) +} + +if (typeof window !== 'undefined' && window.Vue) { + component.install(window.Vue) +} + +export default component diff --git a/packages/vuesax/src/components/vsTable/Th/style.sass b/packages/vuesax/src/components/vsTable/Th/style.sass new file mode 100644 index 00000000..bebe1650 --- /dev/null +++ b/packages/vuesax/src/components/vsTable/Th/style.sass @@ -0,0 +1,43 @@ +@import '../../../styles/mixins' +.vs-table__th + padding: 10px 12px + text-align: left + transition: all .25s ease + font-size: .8rem + &.sort + .vs-table__th__content + pointer-events: none + &:hover + background: -color('gray-3') + &[data-sort-type='asc'] + .icon-sort-2 + margin-top: -7px + transform: rotate(45deg) !important + .icon-sort-1 + margin-top: -1px + transform: rotate(45deg) !important + &[data-sort-type='desc'] + .icon-sort-2 + margin-top: -7px + .icon-sort-1 + margin-top: -1px + transform: rotate(-135deg) !important + &__content + display: flex + align-items: center + justify-content: flex-start + transition: all .25s ease + &__icons + display: flex + align-items: center + justify-content: center + flex-direction: column + margin-left: 7px + transform: scale(.8) + .vs-icon-arrow + position: relative + display: block + &.icon-sort-1 + transform: rotate(45deg) + &.icon-sort-2 + transform: rotate(-135deg) diff --git a/packages/vuesax/src/components/vsTable/Th/vsTableTh.ts b/packages/vuesax/src/components/vsTable/Th/vsTableTh.ts new file mode 100644 index 00000000..34f0ce96 --- /dev/null +++ b/packages/vuesax/src/components/vsTable/Th/vsTableTh.ts @@ -0,0 +1,48 @@ +import { VNode } from 'vue' +import { Component, Prop } from 'vue-property-decorator' +import VsIconsArrow from '../../../icons/arrow' +import VsComponent from '../../../mixins/component' + +@Component +export default class VsTableTh extends VsComponent { + @Prop({ default: false, type: Boolean }) sort: boolean + + mounted() { + (this.$el as HTMLElement).style.width = `${this.$el.scrollWidth}px` + } + + public render(h: any): VNode { + const icon2 = h(VsIconsArrow, { + staticClass: 'icon-sort-2' + }) + const icon = h(VsIconsArrow, { + staticClass: 'icon-sort-1' + }) + + const icons = h('div', { + staticClass: 'vs-table__th__content__icons' + }, [ + icon, + icon2 + ]) + + const content = h('div', { + staticClass: 'vs-table__th__content', + }, [ + this.$slots.default, + this.sort && icons + ]) + + return h('th', { + staticClass: 'vs-table__th', + class: { + sort: this.sort + }, + on: { + ...this.$listeners + } + }, [ + content + ]) + } +} diff --git a/packages/vuesax/src/components/vsTable/Tr/index.ts b/packages/vuesax/src/components/vsTable/Tr/index.ts new file mode 100644 index 00000000..5dcecd0f --- /dev/null +++ b/packages/vuesax/src/components/vsTable/Tr/index.ts @@ -0,0 +1,12 @@ +import './style.sass' +import component from './VsTableTr' + +component.install = (vue: any) => { + vue.component('vs-tr', component) +} + +if (typeof window !== 'undefined' && window.Vue) { + component.install(window.Vue) +} + +export default component diff --git a/packages/vuesax/src/components/vsTable/Tr/style.sass b/packages/vuesax/src/components/vsTable/Tr/style.sass new file mode 100644 index 00000000..bb08431d --- /dev/null +++ b/packages/vuesax/src/components/vsTable/Tr/style.sass @@ -0,0 +1,74 @@ +@import '../../../styles/mixins' +.isMultipleSelected + .vs-table__tr + .vs-table__td + border-radius: 0px !important +.vs-table__tr + padding: 5px + &.expand + cursor: pointer + &.vs-change-color + .vs-table__td + background: -color('color', .1) !important + color: -color('color', 1) !important + &:hover + background: -color('color', .2) !important + &:first-of-type + .vs-table__td + &:last-child + border-radius: 0px 0px 15px 0px + &:first-child + border-radius: 0px 0px 0px 15px + &.isExpand:first-of-type + .vs-table__td + background: -color('gray-1') !important + border-radius: 0px + &.isExpand:not(:first-of-type) + .vs-table__td + background: -color('gray-1') !important + &:last-child + border-radius: 0px 15px 0px 0px + &:first-child + border-radius: 15px 0px 0px 0px + + .vs-table__tr__expand + td + border-radius: 0px 0px 15px 15px !important + &.selected + .vs-table__td + background: -color('color', .1) !important + color: -color('color', 1) !important + .vs-table__td + background: -color('bg', .1) + color: -color('bg', 1) + &.vs-change-color + &:hover + .vs-table__td + background: -color('color', .2) !important + &:hover + .vs-table__td + background: -color('gray-1') + +.vs-table__tr__expand + transition: all .25s ease + td + transition: all .25s ease + padding: 0px + background: -color('gray-1') !important + .vs-table__expand__td__content + overflow: hidden + display: block + transition: all .25s ease + &__sub + padding: 10px 15px + z-index: 1 + position: relative + + +.fade-expand-enter-active, .fade-expand-leave-active + transition: all .25s ease + +.fade-expand-enter, .fade-expand-leave-to + opacity: 0 + td + .vs-table__expand__td__content + height: 0px !important diff --git a/packages/vuesax/src/components/vsTable/Tr/vsTableExpand.ts b/packages/vuesax/src/components/vsTable/Tr/vsTableExpand.ts new file mode 100644 index 00000000..f2d8d9cc --- /dev/null +++ b/packages/vuesax/src/components/vsTable/Tr/vsTableExpand.ts @@ -0,0 +1,60 @@ +import { VNode } from 'vue' +import { Component, Prop, Watch } from 'vue-property-decorator' +import VsComponent from '../../../mixins/component' + +@Component +export default class VsTableTr extends VsComponent { + @Prop({}) colspan: number + hidden: boolean = true + + @Watch('hidden') + handleChangeHidden(val: boolean) { + if (val) { + setTimeout(() => { + this.$el.parentNode.removeChild(this.$el) + this.$destroy() + }, 300) + } else { + this.$nextTick(() => { + const content: any = this.$refs.content + content.style.height = `${content.scrollHeight}px` + }) + } + } + + public render(h: any): VNode { + const subContent = h('div', { + staticClass: 'vs-table__expand__td__content__sub', + }, [ + this.$slots.default + ]) + + const content = h('div', { + staticClass: 'vs-table__expand__td__content', + ref: 'content' + }, [ + subContent + ]) + + const td = h('td', { + staticClass: 'vs-table__expand__td', + attrs: { + colspan: this.colspan + } + }, [ + content + ]) + + const expand = h('tr', { + staticClass: 'vs-table__tr__expand' + }, [ + td + ]) + + return h('transition', { + props: { + name: 'fade-expand' + } + }, [!this.hidden && expand]) + } +} diff --git a/packages/vuesax/src/components/vsTable/Tr/vsTableTr.ts b/packages/vuesax/src/components/vsTable/Tr/vsTableTr.ts new file mode 100644 index 00000000..10303191 --- /dev/null +++ b/packages/vuesax/src/components/vsTable/Tr/vsTableTr.ts @@ -0,0 +1,79 @@ +import Vue, { CreateElement } from 'vue' +import { VNode } from 'vue' +import { Component, Prop, Watch } from 'vue-property-decorator' +import VsComponent from '../../../mixins/component' +import expand from './vsTableExpand' +@Component +export default class VsTableTr extends VsComponent { + @Prop({}) data: any + @Prop({ type: Boolean, default: false }) isSelected: boolean + @Prop({ type: Boolean, default: false }) notClickSelected: boolean + @Prop({ type: Boolean, default: false }) openExpandOnlyTd: boolean + expand: boolean = false + instanceExpand: any = null + + insertAfter(element: any) { + if (this.$el.nextSibling) { + this.$el.parentNode.insertBefore(element, this.$el.nextSibling) + } else { + this.$el.parentNode.appendChild(element) + } + } + + @Watch('data') + handleChangeData() { + (this.$el as HTMLElement).style.removeProperty(`--vs-color`) + if (this.instanceExpand) { + this.instanceExpand.$data.hidden = true + this.instanceExpand = null + // this.expand = false + } + } + + handleClickHasExpand(h: CreateElement) { + if (this.instanceExpand) { + this.instanceExpand.$data.hidden = !this.instanceExpand.$data.hidden + this.instanceExpand = null + // this.expand = false + } else { + const colspan = this.$parent.$el.querySelectorAll('thead th').length + const trExpand = Vue.extend(expand) + this.instanceExpand = new trExpand() + this.instanceExpand.$props.colspan = colspan + this.instanceExpand.$slots.default = this.$slots.expand + this.instanceExpand.vm = this.instanceExpand.$mount() + this.instanceExpand.$data.hidden = false + this.insertAfter(this.instanceExpand.vm.$el) + // this.expand = true + } + } + + public render(h: any): VNode { + return h('tr', { + staticClass: 'vs-table__tr', + on: { + click: (evt: any) => { + if (this.$slots.expand) { + if ( + (this.openExpandOnlyTd ? evt.target.nodeName == 'TD' : true) && + !evt.target.className.includes('isEdit')) { + this.handleClickHasExpand(h) + } + } + + if (evt.target.nodeName == 'TD' && !this.notClickSelected) { + (this.$parent as any).selected(this.data) + this.$emit('selected', this.data) + } + + this.$emit('click', evt) + } + }, + class: { + selected: this.isSelected, + isExpand: !!this.instanceExpand, + expand: this.$slots.expand + } + }, this.$slots.default) + } +} diff --git a/packages/vuesax/src/components/vsTooltip/Base/style.sass b/packages/vuesax/src/components/vsTooltip/Base/style.sass index c76e1e4c..db4bc187 100644 --- a/packages/vuesax/src/components/vsTooltip/Base/style.sass +++ b/packages/vuesax/src/components/vsTooltip/Base/style.sass @@ -24,8 +24,8 @@ .vs-tooltip - background: vs-color('color') - color: vs-color('background') + background: -color('color') + color: -color('background') position: absolute z-index: 1000000 text-align: center @@ -36,7 +36,7 @@ min-width: 30px min-height: 30px &.loading - color: vs-color('background', .2) + color: -color('background', .2) * opacity: .5 pointer-events: none @@ -56,14 +56,14 @@ width: 100% height: 100% border-radius: inherit - border: 2px solid vs-color('background', 1) - border-top: 2px solid vs-color('background', 0) - border-left: 2px solid vs-color('background', 0) - border-bottom: 2px solid vs-color('background', 0) + border: 2px solid -color('background', 1) + border-top: 2px solid -color('background', 0) + border-left: 2px solid -color('background', 0) + border-bottom: 2px solid -color('background', 0) box-sizing: border-box transition: all .25s ease display: block - box-shadow: 0px 0px 0px 0px vs-color('color',1) + box-shadow: 0px 0px 0px 0px -color('color',1) animation: loadingTooltip .6s ease infinite &:before content: '' @@ -71,33 +71,33 @@ width: 100% height: 100% border-radius: inherit - border: 2px dashed vs-color('background',1) - border-top: 2px solid vs-color('background', 0) - border-left: 2px solid vs-color('background', 0) - border-bottom: 2px solid vs-color('background', 0) + border: 2px dashed -color('background',1) + border-top: 2px solid -color('background', 0) + border-left: 2px solid -color('background', 0) + border-bottom: 2px solid -color('background', 0) box-sizing: border-box transition: all .25s ease display: block - box-shadow: 0px 0px 0px 0px vs-color('color',1) + box-shadow: 0px 0px 0px 0px -color('color',1) animation: loadingTooltip .6s linear infinite &.borderThick - background: vs-color('background') - color: vs-color('color') - box-shadow: 0px 2px 10px 0px rgba(0,0,0, vs-var(shadow-opacity)) + background: -color('background') + color: -color('color') + box-shadow: 0px 2px 10px 0px rgba(0,0,0, -var(shadow-opacity)) &.top - border-bottom: 4px solid vs-color('color') + border-bottom: 4px solid -color('color') &:after bottom: -7px &.left - border-right: 4px solid vs-color('color') + border-right: 4px solid -color('color') &:after right: -7px &.right - border-left: 4px solid vs-color('color') + border-left: 4px solid -color('color') &:after left: -7px &.bottom - border-top: 4px solid vs-color('color') + border-top: 4px solid -color('color') &:after top: -7px @@ -113,11 +113,11 @@ content: '' position: absolute &:after - background: vs-color('color') !important + background: -color('color') !important &.border - background: vs-color('background') - color: vs-color('color') - border: 2px solid vs-color('color') + background: -color('background') + color: -color('color') + border: 2px solid -color('color') &:before width: 100% height: 100% @@ -129,7 +129,7 @@ content: '' position: absolute &:after - border: 2px solid vs-color('color') + border: 2px solid -color('color') width: 12px !important height: 12px !important &.circle @@ -140,9 +140,9 @@ &:after display: none &.shadow - background: vs-color('background') - color: vs-color('color') - box-shadow: 0px 2px 10px 0px rgba(0,0,0, vs-var(shadow-opacity)) + background: -color('background') + color: -color('color') + box-shadow: 0px 2px 10px 0px rgba(0,0,0, -var(shadow-opacity)) &:before width: 100% height: 100% @@ -154,7 +154,7 @@ content: '' position: absolute &:after - box-shadow: 0px 2px 10px 0px rgba(0,0,0, vs-var(shadow-opacity)) + box-shadow: 0px 2px 10px 0px rgba(0,0,0, -var(shadow-opacity)) &.isDark --vs-color: var(--vs-gray-3) color: #fff diff --git a/packages/vuesax/src/components/vsTooltip/Base/vsTooltip.ts b/packages/vuesax/src/components/vsTooltip/Base/vsTooltip.ts index 4afb5fa5..0182e1b0 100644 --- a/packages/vuesax/src/components/vsTooltip/Base/vsTooltip.ts +++ b/packages/vuesax/src/components/vsTooltip/Base/vsTooltip.ts @@ -2,6 +2,7 @@ import { VNode } from 'vue' import { Component, Prop, Watch } from 'vue-property-decorator' import VsComponent from '../../../mixins/component' import { insertBody, setCordsPosition } from '../../../util/index' + @Component export default class VsTooltip extends VsComponent { @@ -35,7 +36,7 @@ export default class VsTooltip extends VsComponent { @Prop({ default: false, type: Boolean }) borderThick: boolean - @Prop({ default: '0', type: String }) delay: string + @Prop({ default: null, type: String }) delay: any insertTooltip() { const tooltip = this.$refs.tooltip as HTMLElement @@ -57,12 +58,19 @@ export default class VsTooltip extends VsComponent { } handlerMouseEnter() { - setTimeout(() => { + if (this.delay) { + setTimeout(() => { + this.activeTooltip = true + this.$nextTick(() => { + this.insertTooltip() + }) + }, Number(this.delay)) + } else { this.activeTooltip = true this.$nextTick(() => { this.insertTooltip() }) - }, Number(this.delay)) + } } removeTooltip() { diff --git a/packages/vuesax/src/functions/defineVuesaxFunctions.ts b/packages/vuesax/src/functions/defineVuesaxFunctions.ts index a29e10b1..6fb93487 100644 --- a/packages/vuesax/src/functions/defineVuesaxFunctions.ts +++ b/packages/vuesax/src/functions/defineVuesaxFunctions.ts @@ -2,6 +2,7 @@ import { setColor } from '../util/index' import { setTheme, toggleTheme } from './toggleTheme/index' import loading from './vsLoading/Base/index' import notification from './vsNotification/Base/index' +import { checkAll, getLength, getPage, getSearch, sortData } from './vsTable/index' export default (Vue: any) => { const vsFunctions = { @@ -11,7 +12,12 @@ export default (Vue: any) => { loading, toggleTheme, setTheme, - notification + notification, + getPage, + getLength, + checkAll, + getSearch, + sortData } Vue.prototype.$vs = vsFunctions diff --git a/packages/vuesax/src/functions/vsLoading/Base/style.sass b/packages/vuesax/src/functions/vsLoading/Base/style.sass index 5bff96c9..eb598dc8 100644 --- a/packages/vuesax/src/functions/vsLoading/Base/style.sass +++ b/packages/vuesax/src/functions/vsLoading/Base/style.sass @@ -21,7 +21,7 @@ display: flex align-items: center justify-content: center - background: vs-color('background', vs-var('opacity')) + background: -color('background', -var('opacity')) transition: all .25s ease padding: 20px border-radius: inherit @@ -36,12 +36,12 @@ font-size: .75em margin: 7px font-weight: bold - color: vs-color('color') + color: -color('color') &__percent position: relative font-size: .65rem font-weight: bold - color: vs-color('color') + color: -color('color') margin-top: 1px z-index: 200 &__animation @@ -58,9 +58,9 @@ top: 0px left: 0px height: 4px - background: vs-color('color', .2) + background: -color('color', .2) &__bar - background: vs-color('color') + background: -color('color') height: 100% position: relative border-radius: 0px 10px 10px 0px @@ -73,7 +73,7 @@ position: absolute width: 100% height: 100% - border: 3px solid vs-color('color') + border: 3px solid -color('color') border-radius: inherit border-top: 3px solid transparent border-left: 3px solid transparent @@ -85,7 +85,7 @@ position: absolute width: 100% height: 100% - border: 3px dashed vs-color('color') + border: 3px dashed -color('color') border-radius: inherit border-top: 3px solid transparent border-left: 3px solid transparent @@ -112,7 +112,7 @@ height: 0px position: absolute animation: waves .7s ease infinite - box-shadow: 0px 0px 10px 0px vs-color('color',.5) + box-shadow: 0px 0px 10px 0px -color('color',.5) border-radius: 50% &__2 width: 0px @@ -120,7 +120,7 @@ height: 0px position: absolute animation: waves 1.4s linear infinite - box-shadow: 0px 0px 10px 0px vs-color('color',.5) + box-shadow: 0px 0px 10px 0px -color('color',.5) border-radius: 50% &__3 width: 0px @@ -128,7 +128,7 @@ height: 0px position: absolute animation: waves 1.75s ease infinite - box-shadow: 0px 0px 10px 0px vs-color('color',.5) + box-shadow: 0px 0px 10px 0px -color('color',.5) border-radius: 50% @keyframes waves @@ -152,7 +152,7 @@ position: absolute animation: corners 1s ease infinite border-radius: 50% - border: 2px solid vs-color('color',1) + border: 2px solid -color('color',1) &__2 display: none &__3 @@ -184,7 +184,7 @@ position: absolute width: 100% height: 100% - border: 1px solid vs-color('color') + border: 1px solid -color('color') border-radius: inherit border-top: 1px solid transparent border-left: 1px solid transparent @@ -196,7 +196,7 @@ position: absolute width: 100% height: 100% - border: 1px dashed vs-color('color') + border: 1px dashed -color('color') border-radius: inherit border-top: 1px solid transparent border-left: 1px solid transparent @@ -207,7 +207,7 @@ position: absolute width: 100% height: 100% - border: 1px dashed vs-color('color') + border: 1px dashed -color('color') border-radius: inherit animation: rotate 1s linear infinite .4s opacity: .2 @@ -224,21 +224,21 @@ &__1 width: 8px height: 8px - background: vs-color('color') + background: -color('color') border-radius: 50% margin: 3px animation: points .75s ease infinite &__2 width: 8px height: 8px - background: vs-color('color') + background: -color('color') border-radius: 50% margin: 3px animation: points .75s ease infinite .25s &__3 width: 8px height: 8px - background: vs-color('color') + background: -color('color') border-radius: 50% margin: 3px animation: points .75s ease infinite .5s @@ -261,7 +261,7 @@ position: absolute width: 100% height: 100% - border: 2px solid vs-color('color') + border: 2px solid -color('color') border-radius: inherit animation: rotateSquare 4s ease infinite top: 0px @@ -270,10 +270,10 @@ position: absolute width: 100% height: 100% - border: 2px solid vs-color('color') + border: 2px solid -color('color') border-radius: inherit animation: rotateSquare 4s ease infinite reverse - background: vs-color('background', 1) + background: -color('background', 1) &__3 display: none @@ -300,7 +300,7 @@ border-radius: inherit animation: rotate 1s linear infinite top: 0px - background: linear-gradient(0deg, vs-color('background', 0) 33%, vs-color('color', 1) 100%) + background: linear-gradient(0deg, -color('background', 0) 33%, -color('color', 1) 100%) border-radius: 50% &__2 top: 2px @@ -309,7 +309,7 @@ height: calc(100% - 4px) border: 0px border-radius: inherit - background: vs-color('background', 1) + background: -color('background', 1) border-radius: 50% &__3 display: none @@ -329,7 +329,7 @@ border: 0px border-radius: inherit animation: rectangle 1s ease infinite - background: vs-color('color', 1) + background: -color('color', 1) &__2 position: absolute width: 15px @@ -337,7 +337,7 @@ border: 0px border-radius: inherit animation: rectangle 1s ease-out infinite - background: vs-color('color', .2) + background: -color('color', .2) &__3 display: none @@ -362,7 +362,7 @@ height: 40px animation: rotate 1s ease infinite border-radius: 50% - border: 2px solid vs-color('color', 1) + border: 2px solid -color('color', 1) border-top: 3px solid transparent border-left: 3px solid transparent border-right: 3px solid transparent @@ -372,7 +372,7 @@ height: 50px animation: rotate 1s ease-in-out infinite border-radius: 50% - border: 2px dashed vs-color('color', 1) + border: 2px dashed -color('color', 1) border-top: 3px solid transparent border-left: 3px solid transparent border-right: 3px solid transparent @@ -382,7 +382,7 @@ height: 60px animation: rotate 1s linear infinite reverse border-radius: 50% - border: 2px solid vs-color('color', 1) + border: 2px solid -color('color', 1) border-top: 3px solid transparent border-left: 3px solid transparent border-right: 3px solid transparent @@ -402,7 +402,7 @@ width: 25px height: 25px animation: squareRotate 3s ease infinite - background: vs-color('color', 1) + background: -color('color', 1) &__2 display: none &__3 @@ -434,7 +434,7 @@ position: relative width: 5px height: 5px - background: vs-color('color', 1) + background: -color('color', 1) margin: 3px animation: scale .8s ease infinite border-radius: 5px @@ -442,7 +442,7 @@ position: relative width: 5px height: 5px - background: vs-color('color', 1) + background: -color('color', 1) margin: 3px animation: scale .8s ease infinite .2s border-radius: 5px @@ -450,7 +450,7 @@ position: relative width: 5px height: 5px - background: vs-color('color', 1) + background: -color('color', 1) margin: 3px animation: scale .8s ease infinite .4s border-radius: 5px diff --git a/packages/vuesax/src/functions/vsNotification/Base/style.sass b/packages/vuesax/src/functions/vsNotification/Base/style.sass index 273d767d..cac3c762 100644 --- a/packages/vuesax/src/functions/vsNotification/Base/style.sass +++ b/packages/vuesax/src/functions/vsNotification/Base/style.sass @@ -65,7 +65,7 @@ transition: all .25s ease, transform .3s ease, max-height .25s ease, clip-path .5s ease .1s &.vs-notification--border border: 3px solid transparent - border-top: 3px solid vs-color('border') + border-top: 3px solid -color('border') .notification-enter transform: translate(0,-25%) clip-path: circle(0% at 50% 0%) !important @@ -87,7 +87,7 @@ transition: all .25s ease, transform .3s ease, max-height .25s ease, clip-path .5s ease .1s &.vs-notification--border border: 3px solid transparent - border-bottom: 3px solid vs-color('border') + border-bottom: 3px solid -color('border') .notification-enter transform: translate(0,25%) clip-path: circle(0% at 50% 100%) !important @@ -110,7 +110,7 @@ clip-path: circle(145% at 0% 50%) &.vs-notification--border border: 3px solid transparent - border-left: 3px solid vs-color('border') + border-left: 3px solid -color('border') .notification-enter transform: translate(-25%) clip-path: circle(0% at 20% 35%) !important @@ -127,7 +127,7 @@ clip-path: circle(145% at 0% 50%) &.vs-notification--border border: 3px solid transparent - border-left: 3px solid vs-color('border') + border-left: 3px solid -color('border') .notification-enter transform: translate(-25%) clip-path: circle(0% at 20% 35%) !important @@ -144,15 +144,15 @@ width: 100% height: auto border-radius: 20px - box-shadow: 0px 10px 30px -5px rgba(0,0,0, vs-var('shadow-opacity')) + box-shadow: 0px 10px 30px -5px rgba(0,0,0, -var('shadow-opacity')) overflow: hidden clip-path: circle(145% at 100% 50%) - background: vs-color('color') - color: vs-color('text') + background: -color('color') + color: -color('text') margin: 3px 10px transition: all .25s ease, transform .3s ease .1s, max-height .25s ease, clip-path .5s ease .1s &:hover:not(&--flat) - box-shadow: 0px 0px 0px 0px rgba(0,0,0, vs-var('shadow-opacity')) + box-shadow: 0px 0px 0px 0px rgba(0,0,0, -var('shadow-opacity')) transform: translate(0,3px) &--notPadding padding: 0px !important @@ -180,24 +180,24 @@ margin-bottom: 0px border-radius: 20px 0px 0px 20px &--flat - box-shadow: 0px 0px 0px 0px rgba(0,0,0, vs-var('shadow-opacity')) - background: vs-color('background') - color: vs-color('color') !important + box-shadow: 0px 0px 0px 0px rgba(0,0,0, -var('shadow-opacity')) + background: -color('background') + color: -color('color') !important &:hover &::after - background: vs-color('color', .15) + background: -color('color', .15) .vs-notification__progress - background: vs-color('color') + background: -color('color') .vs-notification__close --vs-color: inherit .vs-notification__content - color: vs-color('color') !important + color: -color('color') !important &.vs-notification--border border: 0px solid transparent !important - border-right: 3px solid vs-color('border') !important + border-right: 3px solid -color('border') !important &:after content: '' - background: vs-color('color', .1) + background: -color('color', .1) width: 100% height: 100% border-radius: inherit @@ -228,11 +228,11 @@ &.vs-notification--border border: 3px solid transparent - border-right: 3px solid vs-color('border') + border-right: 3px solid -color('border') &__progress width: 0% height: 3px - background: vs-color('text') + background: -color('text') position: absolute bottom: 0px left: 0px @@ -247,7 +247,7 @@ position: absolute width: 100% height: 100% - border: 2px solid vs-color('text') + border: 2px solid -color('text') border-radius: inherit border-top: 2px solid transparent border-left: 2px solid transparent @@ -261,7 +261,7 @@ position: absolute width: 100% height: 100% - border: 2px dashed vs-color('text') + border: 2px dashed -color('text') border-radius: inherit border-top: 2px solid transparent border-left: 2px solid transparent diff --git a/packages/vuesax/src/functions/vsTable/index.ts b/packages/vuesax/src/functions/vsTable/index.ts new file mode 100644 index 00000000..87cd09af --- /dev/null +++ b/packages/vuesax/src/functions/vsTable/index.ts @@ -0,0 +1,112 @@ +const getPage = (data: any, page: number, maxItems: number = 5): any => { + // console.log(data) + const max = Math.ceil(page * maxItems) + const min = max - maxItems + + const items: any = [] + data.forEach((item: any, index: number) => { + if (index >= min && index < max) { + items.push(item) + } + }) + return items +} + +const getLength = (data: any, maxItems: number = 5): any => { + const length = Math.ceil(data.length / maxItems) + return length +} + +const checkAll = (selected: any, data: any): any => { + if (selected.length !== data.length) { + selected = [] + data.forEach((item: any) => { + selected.push(item) + }) + return selected + } else { + return [] + } + +} + +const getSearch = (data: any, search: string = ''): any => { + + function flattenDeep(val: any): any { + return Object.values(val || []).reduce( + (acc: any, val: any) => (typeof val === 'object') ? + acc.concat(flattenDeep(val)) : + acc.concat(val), []) + } + + function getValues(obj: any) { + return flattenDeep(obj).filter(function (item: any) { + return (typeof item === 'string') || (typeof item === 'number'); + }); + } + + function normalize(text: string) { + return text.normalize('NFD').replace(/[\u0300-\u036f]/g, '').toLowerCase() + } + + const searchNormalize = normalize(search) + + return data.filter((item: any) => { + return normalize(getValues(item).toString()).indexOf(searchNormalize) != -1 + }) +} + +const sortData = (evt: any, data: any, sortKey: string, type: string) => { + data = [...data].sort(returnOriginalIndex) + let sortType = type || 'desc' + const el = evt.target + + if (el.dataset[`sortType${sortKey}`] == 'desc') { + sortType = 'asc' + } else if (el.dataset[`sortType${sortKey}`] == 'asc') { + sortType = null + } + + if (sortType == 'desc') { + data.map((item: any, i: number) => { + item[`vsOriginalIndex${sortKey}`] = i + }) + } + + el.dataset[`sortType${sortKey}`] = sortType + el.dataset[`sortType`] = sortType + el.dataset[`sortKey`] = `sortType${sortKey}` + + const parent = el.closest('.vs-table__tr') + const ths = parent.querySelectorAll('th.sort') + ths.forEach((th: any) => { + if (th != el) { + th.dataset.sortType = null + th.dataset[th.dataset[`sortKey`]] = null + } + }) + + function compare(a: any, b: any) { + if (a[sortKey] < b[sortKey]) { + return sortType !== 'desc' ? 1 : -1 + } + if (a[sortKey] > b[sortKey]) { + return sortType !== 'desc' ? - 1 : 1 + } + return 0 + } + + function returnOriginalIndex(a: any, b: any) { + return a[`vsOriginalIndex${sortKey}`] - b[`vsOriginalIndex${sortKey}`] + } + + return sortType !== null ? [...data].sort(compare) : [...data].sort(returnOriginalIndex) +} + +export { + getPage, + getLength, + checkAll, + getSearch, + sortData +} diff --git a/packages/vuesax/src/icons/icons.sass b/packages/vuesax/src/icons/icons.sass index aea32957..0f1c9728 100644 --- a/packages/vuesax/src/icons/icons.sass +++ b/packages/vuesax/src/icons/icons.sass @@ -9,7 +9,7 @@ position: relative transition: all .25s ease &:before - background: vs-color('color', 1) + background: -color('color', 1) content: '' position: absolute width: 16px @@ -18,7 +18,7 @@ border-radius: 2px transition: all .3s ease &:after - background: vs-color('color', 1) + background: -color('color', 1) content: '' position: absolute width: 16px @@ -46,7 +46,7 @@ transition: all .25s ease cursor: pointer &:before - background: vs-color('color', 1) + background: -color('color', 1) content: '' position: absolute width: 14px @@ -55,7 +55,7 @@ border-radius: 2px transition: all .3s ease &:after - background: vs-color('color', 1) + background: -color('color', 1) content: '' position: absolute width: 14px @@ -172,7 +172,7 @@ content: '' width: 100% height: 1px - background: vs-color('text') + background: -color('text') position: absolute display: block top: 0px @@ -181,6 +181,6 @@ content: '' width: 1px height: 100% - background: vs-color('text') + background: -color('text') position: absolute display: block diff --git a/packages/vuesax/src/styles/_dark.sass b/packages/vuesax/src/styles/_dark.sass index 327e6407..1f61e89c 100644 --- a/packages/vuesax/src/styles/_dark.sass +++ b/packages/vuesax/src/styles/_dark.sass @@ -7,24 +7,24 @@ --vs-gray-2: 20, 20, 23 --vs-gray-3: 15, 16, 19 --vs-gray-4: 10, 11, 14 - --vs-shadow-opacity: .75 + --vs-shadow-opacity: .3 --vs-dark: 0, 0, 0 --vs-background-opacity: .6 .vs-pagination-content &.vs-component-dark .vs-pagination__active --vs-color: 255, 255, 255 - color: vs-color('gray-3') + color: -color('gray-3') .vs-button &.vs-component-dark &.vs-button--transparent - color: vs-color('text') !important + color: -color('text') !important &:hover &:before - background: vs-color('color', .2) + background: -color('color', .2) &.vs-button--active &:before - background: vs-color('color', vs-var('background-opacity')) + background: -color('color', -var('background-opacity')) .vs-ripple,.vs-ripple-invert,.vs-ripple-content --vs-color: 0,0,0 .vs-loading @@ -39,5 +39,5 @@ color: #fff !important &.vs-alert --vs-color: 0, 0, 0 !important - background: vs-color('color', 1) !important - color: vs-color('text', 1) !important + background: -color('color', 1) !important + color: -color('text', 1) !important diff --git a/packages/vuesax/src/styles/_mixins.sass b/packages/vuesax/src/styles/_mixins.sass index ac83400b..79d04d80 100644 --- a/packages/vuesax/src/styles/_mixins.sass +++ b/packages/vuesax/src/styles/_mixins.sass @@ -1,6 +1,6 @@ // get color var css -@function vs-color($color, $alpha: 1) +@function -color($color, $alpha: 1) @return unquote('rgba(var(--vs-#{$color}), #{$alpha})') -@function vs-var($var) +@function -var($var) @return unquote('var(--vs-#{$var})') diff --git a/packages/vuesax/src/styles/_vars.sass b/packages/vuesax/src/styles/_vars.sass index 3a395fe2..df40b8c0 100644 --- a/packages/vuesax/src/styles/_vars.sass +++ b/packages/vuesax/src/styles/_vars.sass @@ -1,5 +1,5 @@ \:root - --vs-shadow-opacity: .08 + --vs-shadow-opacity: .05 --vs-radius: 20px --vs-zindex-1: 100000 --vs-zindex-2: 99000 diff --git a/packages/vuesax/src/styles/vuesax.sass b/packages/vuesax/src/styles/vuesax.sass index 67091cff..a21d7e6a 100644 --- a/packages/vuesax/src/styles/vuesax.sass +++ b/packages/vuesax/src/styles/vuesax.sass @@ -8,8 +8,8 @@ @import '../util/ripple/style' -body,table,td,tr - backface-visibility: hidden +// body,table,td,tr +// backface-visibility: hidden .vs-remove-transition *, *:after, *:before diff --git a/packages/vuesax/src/util/defineVuesaxOptions.ts b/packages/vuesax/src/util/defineVuesaxOptions.ts index 46b31ae7..a61bfcb9 100644 --- a/packages/vuesax/src/util/defineVuesaxOptions.ts +++ b/packages/vuesax/src/util/defineVuesaxOptions.ts @@ -20,7 +20,6 @@ const defineColors = (colors: VuesaxColors) => { } export const defineVuesaxOptions = (options: VuesaxOptions) => { - console.log(options) if (!!options.colors) { defineColors(options.colors) } diff --git a/packages/vuesax/src/util/ripple/style.sass b/packages/vuesax/src/util/ripple/style.sass index 3570a533..f0971447 100644 --- a/packages/vuesax/src/util/ripple/style.sass +++ b/packages/vuesax/src/util/ripple/style.sass @@ -22,9 +22,9 @@ position: absolute transform: translate(-50%,-50%) transition: all .5s ease - background: radial-gradient(circle,vs-color(color, .05),vs-color(color, .6)) + background: radial-gradient(circle,-color(color, .05),-color(color, .6)) &--solid - background: vs-color(color, 1) + background: -color(color, 1) opacity: 1 .vs-ripple-invert width: 0px @@ -34,7 +34,7 @@ position: absolute transform: translate(-50%,-50%) transition: all .5s ease - background-image: radial-gradient(circle,vs-color(color, .5),vs-color(color, 0)) + background-image: radial-gradient(circle,-color(color, .5),-color(color, 0)) .vs-ripple-cut-1 width: 0px height: 0px diff --git a/tsconfig.json b/tsconfig.json index 3de12252..15fc4716 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -17,6 +17,9 @@ "**/*", "./src/**/*" ], + "types": [ + "@types/lodash", + ], "rules": { "interface-name" : [true, "never-prefix"] }