From 2ea1409506b8a526a37e7128b1a785a9fc1ff70c Mon Sep 17 00:00:00 2001 From: Maksim Nedoshev Date: Sun, 27 Oct 2024 02:57:03 +0300 Subject: [PATCH 1/3] feat: upgrade ag-grid to 32 --- packages/ag-grid-theme/demo.html | 170 --------- packages/ag-grid-theme/package.json | 8 +- packages/ag-grid-theme/playground/.gitignore | 30 ++ packages/ag-grid-theme/playground/index.html | 14 + .../ag-grid-theme/playground/package.json | 19 + packages/ag-grid-theme/playground/src/App.vue | 84 +++++ packages/ag-grid-theme/playground/src/main.js | 6 + .../ag-grid-theme/playground/vite.config.js | 14 + .../ag-grid-theme/src/styles/_variables.scss | 30 -- packages/ag-grid-theme/src/styles/index.scss | 356 +++++++++++++----- .../src/styles/parts/_footer.scss | 63 ---- .../ag-grid-theme/src/styles/parts/_grid.scss | 60 --- .../src/styles/parts/_header.scss | 54 --- .../src/styles/parts/_widgets.scss | 122 ------ yarn.lock | 81 ++-- 15 files changed, 466 insertions(+), 645 deletions(-) delete mode 100644 packages/ag-grid-theme/demo.html create mode 100644 packages/ag-grid-theme/playground/.gitignore create mode 100644 packages/ag-grid-theme/playground/index.html create mode 100644 packages/ag-grid-theme/playground/package.json create mode 100644 packages/ag-grid-theme/playground/src/App.vue create mode 100644 packages/ag-grid-theme/playground/src/main.js create mode 100644 packages/ag-grid-theme/playground/vite.config.js delete mode 100644 packages/ag-grid-theme/src/styles/_variables.scss delete mode 100644 packages/ag-grid-theme/src/styles/parts/_footer.scss delete mode 100644 packages/ag-grid-theme/src/styles/parts/_grid.scss delete mode 100644 packages/ag-grid-theme/src/styles/parts/_header.scss delete mode 100644 packages/ag-grid-theme/src/styles/parts/_widgets.scss diff --git a/packages/ag-grid-theme/demo.html b/packages/ag-grid-theme/demo.html deleted file mode 100644 index 3a9813886e..0000000000 --- a/packages/ag-grid-theme/demo.html +++ /dev/null @@ -1,170 +0,0 @@ - - - - - @vuestic/ag-grid-theme - - - - - - -
- Filters -
- -
- -
- -
-
-
- Styles -
- -
- -
-
- - -
- - - - \ No newline at end of file diff --git a/packages/ag-grid-theme/package.json b/packages/ag-grid-theme/package.json index 67b1cadb67..87da8a252a 100644 --- a/packages/ag-grid-theme/package.json +++ b/packages/ag-grid-theme/package.json @@ -11,10 +11,10 @@ "prepack": "npm run build" }, "dependencies": { - "@ag-grid-community/client-side-row-model": "^29.0.0", - "@ag-grid-community/core": "^29.0.0", - "@ag-grid-community/styles": "^29.0.0", - "@ag-grid-community/vue3": "^29.0.0" + "@ag-grid-community/client-side-row-model": "^32.2.2", + "@ag-grid-community/core": "^32.2.2", + "@ag-grid-community/styles": "^32.2.2", + "@ag-grid-community/vue3": "^32.2.2" }, "peerDependencies": { "vuestic-ui": "^1.3.0" diff --git a/packages/ag-grid-theme/playground/.gitignore b/packages/ag-grid-theme/playground/.gitignore new file mode 100644 index 0000000000..9883a8023e --- /dev/null +++ b/packages/ag-grid-theme/playground/.gitignore @@ -0,0 +1,30 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +.DS_Store +dist +dist-ssr +coverage +*.local + +/cypress/videos/ +/cypress/screenshots/ + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? + +yarn.lock \ No newline at end of file diff --git a/packages/ag-grid-theme/playground/index.html b/packages/ag-grid-theme/playground/index.html new file mode 100644 index 0000000000..f93bfcfe9e --- /dev/null +++ b/packages/ag-grid-theme/playground/index.html @@ -0,0 +1,14 @@ + + + + + + + + Vite App + + +
+ + + diff --git a/packages/ag-grid-theme/playground/package.json b/packages/ag-grid-theme/playground/package.json new file mode 100644 index 0000000000..0c8586d778 --- /dev/null +++ b/packages/ag-grid-theme/playground/package.json @@ -0,0 +1,19 @@ +{ + "name": "playground", + "version": "0.0.0", + "private": true, + "scripts": { + "dev": "vite", + "build": "vite build", + "preview": "vite preview" + }, + "dependencies": { + "ag-grid-vue3": "^32.2.2", + "vue": "^3.2.47", + "vuestic-ui": "^1.9.0" + }, + "devDependencies": { + "@vitejs/plugin-vue": "^4.0.0", + "vite": "^4.1.3" + } +} diff --git a/packages/ag-grid-theme/playground/src/App.vue b/packages/ag-grid-theme/playground/src/App.vue new file mode 100644 index 0000000000..9452c5d9b6 --- /dev/null +++ b/packages/ag-grid-theme/playground/src/App.vue @@ -0,0 +1,84 @@ + + + diff --git a/packages/ag-grid-theme/playground/src/main.js b/packages/ag-grid-theme/playground/src/main.js new file mode 100644 index 0000000000..d5a93c16da --- /dev/null +++ b/packages/ag-grid-theme/playground/src/main.js @@ -0,0 +1,6 @@ +import { createVuestic } from 'vuestic-ui' +import 'vuestic-ui/css' +import { createApp } from 'vue' +import App from './App.vue' + +createApp(App).use(createVuestic()).mount('#app') diff --git a/packages/ag-grid-theme/playground/vite.config.js b/packages/ag-grid-theme/playground/vite.config.js new file mode 100644 index 0000000000..de5cb31c63 --- /dev/null +++ b/packages/ag-grid-theme/playground/vite.config.js @@ -0,0 +1,14 @@ +import { fileURLToPath, URL } from 'node:url' + +import { defineConfig } from 'vite' +import vue from '@vitejs/plugin-vue' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [vue()], + resolve: { + alias: { + '@': fileURLToPath(new URL('./src', import.meta.url)) + } + } +}) diff --git a/packages/ag-grid-theme/src/styles/_variables.scss b/packages/ag-grid-theme/src/styles/_variables.scss deleted file mode 100644 index 6e03692c89..0000000000 --- a/packages/ag-grid-theme/src/styles/_variables.scss +++ /dev/null @@ -1,30 +0,0 @@ -// Accent -$primary: #154EC1; -$secondary: #767C88; - -$success: #3D9209; -$danger: #E42222; -$warning: #FFD43A; - -// Background Colors -$backgroundSecondary: #FFFFFF; -$backgroundElement: #EBF1F4; -$backgroundBorder: #DEE5F2; -$backgroundHoverable: #d4d9dc; - -// Text Colors -$textPrimary: #262824; - -// Misc -$shadow: rgba(0, 0, 0, 0.12); -$focus: #49A8FF; - -// Inputs -$inputHorizontalPadding: 12px; -$inputBorderRadius: 4px; -$inputBorderColor: #e1e9f8; - -// Dropdowns -$dropdownContentBorderRadius: 4px; -$dropdownContentBoxShadow: 0 0.25rem 0.5rem 0 $shadow; -$dropdownContentPadding: 0.5rem; diff --git a/packages/ag-grid-theme/src/styles/index.scss b/packages/ag-grid-theme/src/styles/index.scss index 052db91eae..c3ecf042bb 100644 --- a/packages/ag-grid-theme/src/styles/index.scss +++ b/packages/ag-grid-theme/src/styles/index.scss @@ -1,100 +1,264 @@ @use '@ag-grid-community/styles' as ag; -@import 'variables'; - -@include ag.grid-styles(( - theme: vuestic, - extend-theme: alpine, - foreground-color: $textPrimary, - data-color: $textPrimary, - disabled-foreground-color: rgba(0, 0, 0, 0.5), - background-color: transparent, - header-background-color: transparent, - subheader-background-color: $backgroundElement, - subheader-toolbar-background-color: $backgroundSecondary, - control-panel-background-color: $backgroundSecondary, - selected-row-background-color: $backgroundElement, - odd-row-background-color: transparent, - modal-overlay-background-color: rgba(255, 255, 255, 0.5), - row-hover-color: transparent, - column-hover-color: transparent, - range-selection-border-color: $textPrimary, - selected-tab-underline-width: 0, - selected-tab-underline-transition-speed: 0, - range-selection-chart-category-background-color: rgba(#00FF84, 0.1), - range-selection-chart-background-color: rgba(#0058FF, 0.1), - header-cell-hover-background-color: transparent, - value-change-value-highlight-background-color: rgba(#16A085, 0.5), - value-change-delta-up-color: var(--va-success, #43a047), - value-change-delta-down-color: var(--va-danger, #e53935), - chip-background-color: transparent, - borders: solid 0, - borders-critical: solid 1px, - borders-secondary: solid 0, - borders-side-button: solid 0, - side-bar-panel-width: 200px, - border-radius: 0px, - border-color: $backgroundBorder, - secondary-border-color: transparent, - row-border-color: transparent, - cell-horizontal-border: solid transparent, - header-column-separator-display: none, - header-column-separator-height: 100%, - header-column-separator-width: 1px, - header-column-separator-color: $backgroundBorder, - header-column-resize-handle-display: none, - header-column-resize-handle-height: 50%, - header-column-resize-handle-width: 1px, - header-column-resize-handle-color: $backgroundBorder, - input-border-color: $inputBorderColor, - input-disabled-border-color: $backgroundBorder, - input-disabled-background-color: transparent, - checkbox-background-color: transparent, - checkbox-border-radius: $inputBorderRadius, - checkbox-checked-color: $textPrimary, - checkbox-unchecked-color: $textPrimary, - checkbox-indeterminate-color: $textPrimary, - toggle-button-off-border-color: $textPrimary, - toggle-button-off-background-color:$textPrimary, - toggle-button-on-border-color: $textPrimary, - toggle-button-on-background-color: $textPrimary, - toggle-button-switch-background-color: $textPrimary, - toggle-button-switch-border-color: $textPrimary, - toggle-button-border-width: 1px, - toggle-button-height: 10px, - toggle-button-width: 10px, - input-focus-box-shadow: transparent, - input-focus-border-color: $focus, - minichart-selected-chart-color: $textPrimary, - minichart-selected-page-color: $textPrimary, - grid-size: 8px, - icon-size: 10px, - widget-container-horizontal-padding: 12px, - widget-container-vertical-padding: 12px, - widget-horizontal-spacing: 12px, - widget-vertical-spacing: 8px, - cell-horizontal-padding: 10px, - cell-widget-spacing: 10px, - row-height: calc(var(--ag-grid-size) * 6), - header-height: calc(var(--ag-grid-size) * 6), - list-item-height: calc(var(--ag-grid-size) * 4), - column-select-indent-size: 18px, - row-group-indent-size: 20px, - filter-tool-panel-group-indent: 16px, - font-family: ("Source Sans Pro", sans-serif), - font-size: 15px, - card-radius: 0px, - card-shadow: none, - popup-shadow: $shadow -)); - -@import './parts/header'; -@import './parts/grid'; -@import './parts/footer'; -@import './parts/widgets'; + +@font-face { + font-family: "agGridMaterial"; + src: url(data:font/woff2;charset=utf-8;base64,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); + font-weight: normal; + font-style: normal; +} .ag-theme-vuestic { - @include ag-vuestic-theme-part-widgets(); - @include ag-vuestic-theme-part-header(); - @include ag-vuestic-theme-part-grid(); - @include ag-vuestic-theme-part-footer(); + // Font + --ag-font-family: var(--va-font-family, "Source Sans Pro", sans-serif); + --ag-icon-font-family: agGridMaterial; + + // Background + --ag-background-color: var(--va-background-primary); + // Foreground (Text) + --ag-foreground-color: var(--va-on-background-primary); + --ag-secondary-foreground-color: color-mix(in srgb, var(--va-on-background-primary) 50%, transparent); + --ag-disabled-foreground-color: color-mix(in srgb, var(--va-on-background-primary) 50%, transparent); + + // Border + --ag-border-color: var(--va-background-border); + --ag-secondary-border-color: var(--ag-border-color); + + // Accents + --ag-active-color: var(--va-primary, #154EC1); + --ag-invalid-color: var(--va-danger); + + --ag-advanced-filter-join-pill-color: var(--va-danger); + --ag-advanced-filter-column-pill-color: var(--va-success); + --ag-advanced-filter-option-pill-color: var(--va-warning); + --ag-advanced-filter-value-pill-color: var(--va-info); + + // Sizes + --ag-row-height: 36px; + + // Custom + --ag-va-cell-padding: var(--va-data-table-cell-padding, 0.625rem); + + // Tooltips + --ag-tooltip-background-color: var(--va-background-secondary); + --ag-menu-background-color: var(--va-background-secondary); + + // Cards + --ag-card-shadow: 0 1px 4px 1px var(--va-shadow); + --ag-popup-shadow: var(--ag-card-shadow); + + // Selection + --ag-selected-tab-underline-color: var(--va-primary); + --ag-selected-row-background-color: color-mix(in srgb, var(--va-primary) 10%, transparent); + --ag-range-selection-background-color: color-mix(in srgb, var(--va-primary) 10%, transparent); + --ag-range-selection-background-color-2: color-mix(in srgb, var(--va-primary) 20%, transparent); + --ag-range-selection-background-color-3: color-mix(in srgb, var(--va-primary) 30%, transparent); + --ag-range-selection-background-color-4: color-mix(in srgb, var(--va-primary) 40%, transparent); + --ag-range-selection-border-color: var(--va-focus); + --ag-range-border-color: var(--va-focus); + + // Input + --ag-input-border-color-invalid: var(--ag-invalid-color); + --ag-input-border-color: var(--va-background-border); + --ag-input-disabled-background-color: color-mix(in srgb, var(--va-background-border) 25%, transparent); + --ag-input-disabled-border-color: color-mix(in srgb, var(--va-background-border) 50%, transparent); + --ag-input-focus-border-color: var(--va-focus); + --ag-input-focus-box-shadow: 0 0 2px 0.1rem var(--ag-input-focus-border-color); + + // Checkbox + --ag-checkbox-unchecked-color: var(--va-background-border); + --ag-checkbox-checked-color: var(--va-primary); + --ag-checkbox-indeterminate-color: var(--va-primary); + + // Chip + --ag-chip-background-color: color-mix(in srgb, var(--va-on-background-primary) 5%, transparent); + + // Column + --ag-column-hover-color: color-mix(in srgb, var(--va-primary) 5%, transparent); + + // Control panel + --ag-control-panel-background-color: var(--va-background-secondary); + + // Header + --ag-header-background-color: var(--va-background-secondary); + --ag-subheader-background-color: var(--va-background-primary); + + // Menu + --ag-menu-background-color: var(--ag-header-background-color); + + // Row + --ag-odd-row-background-color: color-mix(in srgb, var(--va-primary) 5%, transparent); + --ag-row-hover-color: color-mix(in srgb, var(--va-primary) 5%, transparent); + + // Panel + --ag-panel-background-color: var(--ag-header-background-color); + + // Tooltip + --ag-tooltip-background-color: var(--va-background-secondary); + + .ag-header { + border-bottom: 1px solid var(--va-background-border); + + .ag-header-cell { + padding-left: var(--ag-va-cell-padding); + padding-right: var(--ag-va-cell-padding); + } + + .ag-header-cell-label { + font-size: var(--va-data-table-thead-font-size, 0.625rem); + font-weight: var(--va-data-table-thead-font-weight, 700); + text-transform: var(--va-data-table-thead-text-transform, uppercase); + letter-spacing: var(--va-data-table-thead-letter-spacing, 0.6px); + line-height: 1.2; + } + } + + .ag-row { + border-bottom: none; + } + + .ag-cell { + border: none; + font-family: var(--ag-font-family); + } + + .ag-body-vertical-scroll-viewport, + .ag-body-horizontal-scroll-viewport { + $size: 8px; + $color: var(--va-secondary); + + &::-webkit-scrollbar { + width: $size; + height: $size; + } + + &::-webkit-scrollbar-track { + box-shadow: none; + border-radius: 10px; + } + + &::-webkit-scrollbar-thumb { + background: $color; + opacity: 0.3; + border-radius: 2px; + transition: background 0.3s ease-in-out; + } + + scrollbar-color: $color transparent; + scrollbar-width: thin; + transition: scrollbar-color 0.3s ease-in-out; + } + + // Controls + + .ag-checkbox-input-wrapper { + width: var(--va-checkbox-square-width); + min-width: var(--va-checkbox-square-min-width); + height: var(--va-checkbox-square-height); + position: relative; + font-size: 18px; + } + + // Editing + + .ag-cell-inline-editing { + background: transparent; + box-shadow: none; + + .ag-input-wrapper { + input { + padding-left: calc(var(--ag-cell-horizontal-padding) - 1px); + padding-right: calc(var(--ag-cell-horizontal-padding) - 1px); + background: transparent; + } + } + } + + // Inputs + input[class^=ag-] { + background: transparent; + } + + .ag-header:has(.ag-floating-filter) { + height: calc(var(--ag-row-height) * 2 + 20px) !important; + min-height: calc(var(--ag-row-height) * 2 + 20px) !important; + } + + .ag-header-row:has(.ag-floating-filter) { + height: calc(var(--ag-row-height) + 20px) !important; + } + + .ag-floating-filter { + input { + height: 32px; + padding: 0 0.5rem !important; + } + } + + .ag-floating-filter-button { + height: 100%; + margin-left: 0; + button { + height: 100%; + padding-left: var(--ag-cell-widget-spacing); + box-sizing: content-box; + } + } + + // Filters + .ag-header { + height: auto !important; + } + + // Styles + + &--striped { + --ag-odd-row-background-color: var(--va-background-element); + --ag-selected-row-background-color: var(--ag-selected-row-background-color); + } + + &--hoverable { + --ag-row-hover-color: var(--va-background-hoverable); + } + + &--clickable { + .ag-cell { + cursor: pointer; + } + } + + .ag-select { + .ag-picker-field-wrapper { + cursor: pointer; + padding: 0 var(--va-input-content-horizontal-padding); + background: var(--va-input-color); + border: 1px solid var(--va-background-secondary); + border-radius: var(--va-input-border-radius); + } + + .ag-picker-field-display { + margin: 0; + } + } + + input[class^=ag-]:not([type]), + input[class^=ag-][type=text], + input[class^=ag-][type=number], + input[class^=ag-][type=tel], + input[class^=ag-][type=date], + input[class^=ag-][type=datetime-local], + textarea[class^=ag-] { + padding: 0 9px; + font-family: var(--ag-font-family); + border: 1px solid var(--va-background-border); + + &:focus { + border: 1px solid var(--va-background-border); // keyboard focus color + } + } + + .ag-filter-body { + input { + height: 32px !important; + } + } } diff --git a/packages/ag-grid-theme/src/styles/parts/_footer.scss b/packages/ag-grid-theme/src/styles/parts/_footer.scss deleted file mode 100644 index 25b3d99ff7..0000000000 --- a/packages/ag-grid-theme/src/styles/parts/_footer.scss +++ /dev/null @@ -1,63 +0,0 @@ -@import '../variables'; - -// -// See: https://github.com/ag-grid/ag-grid/blob/latest/community-modules/core/src/styles/ag-theme-base/sass/parts/_footer.scss -// -@mixin ag-vuestic-theme-part-footer { - .ag-paging-panel { - //va-title mixin - font-size: 0.625rem; - letter-spacing: 0.6px; - line-height: 1.2; - font-weight: 700; - text-transform: uppercase; - } - - .ag-paging-button { - padding: 5px; - border-radius: 50%; - - &:hover { - background: var(--va-background-secondary, #{$backgroundSecondary}); - } - } - - .ag-paging-button.ag-disabled { - opacity: 0.5; - - &:hover { - background: var(--ag-background-color); - } - - &:focus { - background: var(--ag-background-color); - - &::after { - display: none; - } - } - } - - .ag-keyboard-focus { - .ag-paging-button { - &:focus { - background: var(--va-background-secondary, #{$backgroundSecondary}); - - &::after { - display: none; - } - } - } - - .ag-paging-button.ag-disabled { - &:focus { - background: var(--va-background-color, #{$backgroundElement}); - opacity: 0.75; - - &::after { - display: none; - } - } - } - } -} diff --git a/packages/ag-grid-theme/src/styles/parts/_grid.scss b/packages/ag-grid-theme/src/styles/parts/_grid.scss deleted file mode 100644 index aabba3689e..0000000000 --- a/packages/ag-grid-theme/src/styles/parts/_grid.scss +++ /dev/null @@ -1,60 +0,0 @@ -@import '../variables'; - -// -// See: https://github.com/ag-grid/ag-grid/blob/latest/community-modules/core/src/styles/ag-theme-base/sass/parts/_grid-borders.scss -// See: https://github.com/ag-grid/ag-grid/blob/latest/community-modules/core/src/styles/ag-theme-base/sass/parts/_grid-layout.scss -// -@mixin ag-vuestic-theme-part-grid { - // ltr - left to right languages - // rtl - right to left languages - .ag-ltr, - .ag-rtl { - .ag-cell { - border: none; - padding-bottom: 0; - padding-top: 0; - } - .ag-cell-inline-editing { - padding: 0; - } - // keyboard focus - .ag-has-focus .ag-cell-focus:not(.ag-cell-range-selected) { - border: none; - background-color: var(--va-background-secondary); - } - } - - @include vuestic-theme-striped(); - @include vuestic-theme-hoverable(); - @include vuestic-theme-clickable(); -} - -//////////////////////////////////////// -// STRIPED MODE -//////////////////////////////////////// -@mixin vuestic-theme-striped { - &--striped { - --ag-odd-row-background-color: var(--va-background-element, #{$backgroundElement}); - --ag-selected-row-background-color: var(--ag-selected-row-background-color); - } -} - -//////////////////////////////////////// -// HOVERABlE MODE -//////////////////////////////////////// -@mixin vuestic-theme-hoverable { - &--hoverable { - --ag-row-hover-color: var(--va-background-hoverable, #{$backgroundHoverable}); - } -} - -//////////////////////////////////////// -// CLICKABLE MODE -//////////////////////////////////////// -@mixin vuestic-theme-clickable { - &--clickable { - .ag-cell { - cursor: pointer; - } - } -} diff --git a/packages/ag-grid-theme/src/styles/parts/_header.scss b/packages/ag-grid-theme/src/styles/parts/_header.scss deleted file mode 100644 index 14b7b1932c..0000000000 --- a/packages/ag-grid-theme/src/styles/parts/_header.scss +++ /dev/null @@ -1,54 +0,0 @@ -@import '../variables'; - -// -// See: https://github.com/ag-grid/ag-grid/blob/latest/community-modules/core/src/styles/ag-theme-base/sass/parts/_header.scss -// -@mixin ag-vuestic-theme-part-header { - .ag-header { - border-bottom-width: 2px; - - .ag-header-cell-label { - padding: 0; - border: none; - } - - .ag-floating-filter-body { - input[class^=ag-][type=text] { - border-radius: var(--va-input-border-radius, #{ $inputBorderRadius }); - } - } - } - - .ag-header-cell-label, - .ag-header-group-cell-label { - //va-title mixin - font-size: 0.625rem; - letter-spacing: 0.6px; - line-height: 1.2; - font-weight: 700; - text-transform: uppercase; - } - - .ag-keyboard-focus .ag-header-cell { - &:focus { - background: var(--va-background-secondary, #{$backgroundSecondary}); - - &::after { - display: none; - } - } - } - - .ag-ltr, - .ag-rtl { - .ag-floating-filter-button { - margin: 0; - height: 70%; - } - - .ag-floating-filter-button-button { - height: 100%; - width: 20px; - } - } -} diff --git a/packages/ag-grid-theme/src/styles/parts/_widgets.scss b/packages/ag-grid-theme/src/styles/parts/_widgets.scss deleted file mode 100644 index cd6b888347..0000000000 --- a/packages/ag-grid-theme/src/styles/parts/_widgets.scss +++ /dev/null @@ -1,122 +0,0 @@ -@import '../variables'; - -// -// See: https://github.com/ag-grid/ag-grid/blob/latest/community-modules/core/src/styles/ag-theme-base/sass/parts/_widgets.scss -// -@mixin ag-vuestic-theme-part-widgets { - input[class^=ag-]:not([type]), - input[class^=ag-][type=text], - input[class^=ag-][type=number], - input[class^=ag-][type=tel], - input[class^=ag-][type=date], - input[class^=ag-][type=datetime-local], - textarea[class^=ag-] { - background: var(--va-input-color, #{ $backgroundElement }); - padding: 0 9px; - font-family: var(--ag-font-family); - border: 1px solid var(--va-input-color, #{ $backgroundElement }); - - &:focus { - border: 1px solid var(--va-background-secondary, #{ $focus }); // keyboard focus color - } - } - - //////////////////////////////////////// - // Lists - //////////////////////////////////////// - .ag-list-item { - &.ag-active-item { - background-color: var(--va-background-element, #{ $backgroundElement }); - } - } - - .ag-select-list-item { - padding-left: 12px; - padding-right: 12px; - cursor: pointer; - } - - //////////////////////////////////////// - // Picker - //////////////////////////////////////// - .ag-select { - .ag-picker-field-wrapper { - cursor: pointer; - padding: 0 var(--va-input-content-horizontal-padding, #{ $inputHorizontalPadding }); - background: var(--va-input-color, #{ $backgroundElement }); - border: 1px solid var(--va-background-secondary, #{ $backgroundSecondary }); - border-radius: var(--va-input-border-radius, #{ $inputBorderRadius }); - } - - .ag-picker-field-display { - margin: 0; - } - } - - //////////////////////////////////////// - // Radio - //////////////////////////////////////// - .ag-radio-button-input-wrapper { - $radio-size: 22px; - - width: $radio-size; - height: $radio-size; - - &::after { - font-size: $radio-size; - color: var(--va-background-primary); - line-height: $radio-size; - } - - &.ag-checked::after { - font-size: $radio-size; - color: currentColor; - } - } - - //////////////////////////////////////// - // Popup - //////////////////////////////////////// - .ag-popup-child { - --ag-background-color: var(--va-background-secondary, #{ $backgroundSecondary }); - - padding: 0; - border-radius: var(--va-dropdown-content-border-radius, #{ $dropdownContentBorderRadius }); - - &:not(.ag-tooltip-custom) { - box-shadow: var(--va-dropdown-content-box-shadow, #{ $dropdownContentBoxShadow }); - } - - .ag-simple-filter-body-wrapper { - padding: var(--va-dropdown-content-padding, #{ $dropdownContentPadding }); - - input[class^=ag-]:not([type]), - input[class^=ag-][type=text], - input[class^=ag-][type=number], - input[class^=ag-][type=tel], - input[class^=ag-][type=date], - input[class^=ag-][type=datetime-local], - textarea[class^=ag-] { - height: var(--ag-list-item-height); - padding: 0 12px; - border-radius: var(--va-input-border-radius, #{ $inputBorderRadius }); - border: 1px solid var(--va-input-color, #{ $backgroundElement }); - } - } - } - // add more space for radio section - .ag-filter-condition { - padding: 10px 0; - } - - //////////////////////////////////////// - // Ghost Element (Drag and Drop) - //////////////////////////////////////// - &.ag-dnd-ghost { - box-shadow: var(--va-dropdown-content-box-shadow, #{ $dropdownContentBoxShadow }); - } - - .ag-dnd-ghost-icon { - color: currentColor; - } -} diff --git a/yarn.lock b/yarn.lock index 2374ef6d6d..39efd44a01 100644 --- a/yarn.lock +++ b/yarn.lock @@ -12,29 +12,33 @@ resolved "https://registry.yarnpkg.com/@adobe/css-tools/-/css-tools-4.3.3.tgz#90749bde8b89cd41764224f5aac29cd4138f75ff" integrity sha512-rE0Pygv0sEZ4vBWHlAgJLGDU7Pm8xoO6p3wsEceb7GYAjScrOHpEo8KK/eVkAcnSM+slAEtXjA2JpdjLp4fJQQ== -"@ag-grid-community/client-side-row-model@^29.0.0": - version "29.3.5" - resolved "https://registry.yarnpkg.com/@ag-grid-community/client-side-row-model/-/client-side-row-model-29.3.5.tgz#3895a778195bca17f86d0e7f90f80b207a283d8e" - integrity sha512-+uA28LTAummyYdZbEDys+cTECPn1Po1f6vX9QZOK9gpZdNzSpGjd3Vc1SKR/2brR6XMGlPeSRsX+FPZmG9uvHQ== +"@ag-grid-community/client-side-row-model@^32.2.2": + version "32.2.2" + resolved "https://registry.yarnpkg.com/@ag-grid-community/client-side-row-model/-/client-side-row-model-32.2.2.tgz#1fb617b7a7391f8969adaf9050f5412512356b5a" + integrity sha512-BenXaVRISOAlMwl59BWGAJ/RBRsc0eHR3i/pGRmjQc8eGgdTqjrePL4kDL7UXDAKoqqNsoGKK5TGHjCHAs1cHA== dependencies: - "@ag-grid-community/core" "~29.3.5" + "@ag-grid-community/core" "32.2.2" + tslib "^2.3.0" -"@ag-grid-community/core@^29.0.0", "@ag-grid-community/core@~29.3.5": - version "29.3.5" - resolved "https://registry.yarnpkg.com/@ag-grid-community/core/-/core-29.3.5.tgz#f6fd10f5a612290c4dfbc8a78adc2af587008c99" - integrity sha512-r86bOCscnKVtaYyKqlN2UCtfbjf4UcmxHfVuXzJ94iN8Jy3iiQVrbQnbNArnjR589Bt/1VR/m+SdAMsOLcdpag== +"@ag-grid-community/core@32.2.2", "@ag-grid-community/core@^32.2.2": + version "32.2.2" + resolved "https://registry.yarnpkg.com/@ag-grid-community/core/-/core-32.2.2.tgz#aa3556a2d05ea03463e489c8df14622e2385cbbd" + integrity sha512-8w++Q5DKbFKhee7ZZ3HCx6KkMTHVwtV+xNwN/RJZneQ3WkXJYvsnkgVWmiwtglEo1iuMArxTz6pqOz/p23TBxA== + dependencies: + ag-charts-types "10.2.0" + tslib "^2.3.0" -"@ag-grid-community/styles@^29.0.0": - version "29.3.5" - resolved "https://registry.yarnpkg.com/@ag-grid-community/styles/-/styles-29.3.5.tgz#11168b5e78190d2ba3e2249e9adc315fce9012e3" - integrity sha512-Z1r6lKx0ds92SV5mX9ZsGFgiStktrRMrWGs92bz3rQN9uethsthIri4RfLaZYaZ03i3zw15peqJtmYEu+sGy/A== +"@ag-grid-community/styles@^32.2.2": + version "32.2.2" + resolved "https://registry.yarnpkg.com/@ag-grid-community/styles/-/styles-32.2.2.tgz#74f8f9d83caae33fd03b94881f5174f88e70b69a" + integrity sha512-YQm+Tb0yPUxxFmExrYtic+gMOU+00/brLZNVE8sB8/6SuxIKla6Vk7sC1aljtMtwaxO0H4gOL7vx4wYB4FtwBA== -"@ag-grid-community/vue3@^29.0.0": - version "29.3.5" - resolved "https://registry.yarnpkg.com/@ag-grid-community/vue3/-/vue3-29.3.5.tgz#392b73fadc3f3a2c00e735096e5eb90a12e49945" - integrity sha512-gBX4fZrSVgBDOcge+KqwHhFeCOyN+2hhW/9dd3TMv2eN7hfHr3UCXs4X9VJKwmuhT4MD1d+pwNTjx+uaWP/qKQ== +"@ag-grid-community/vue3@^32.2.2": + version "32.2.2" + resolved "https://registry.yarnpkg.com/@ag-grid-community/vue3/-/vue3-32.2.2.tgz#b9a8720848422614e3b23a56c32dc7da3f6506ad" + integrity sha512-fbGy2c2/775huBmLXJtYPoKaKLLWQGxTrm18VOACFwo4hFkGVBgovygFwtOPuXNZDkV4rZWrgQ59zJCkKFY36Q== dependencies: - "@ag-grid-community/core" "~29.3.5" + "@ag-grid-community/core" "32.2.2" vue "^3.0.0" "@algolia/autocomplete-core@1.9.3": @@ -6410,6 +6414,11 @@ address@^1.0.1: resolved "https://registry.yarnpkg.com/address/-/address-1.2.2.tgz#2b5248dac5485a6390532c6a517fda2e3faac89e" integrity sha512-4B/qKCfeE/ODUaAUpSwfzazo5x29WD4r3vXiWsB7I2mSDAihwEqKO+g8GELZUQSSAo5e1XTYh3ZVfLyxBc12nA== +ag-charts-types@10.2.0: + version "10.2.0" + resolved "https://registry.yarnpkg.com/ag-charts-types/-/ag-charts-types-10.2.0.tgz#9af7e333d196d02da1635b19b2649a9b2d06241a" + integrity sha512-PUqH1QtugpYLnlbMdeSZVf5PpT1XZVsP69qN1JXhetLtQpVC28zaj7ikwu9CMA9N9b+dBboA9QcjUQUJZVUokQ== + agent-base@4, agent-base@^4.1.0, agent-base@^4.3.0: version "4.3.0" resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-4.3.0.tgz#8165f01c436009bccad0b1d122f05ed770efc6ee" @@ -18835,7 +18844,7 @@ string-hash@^1.1.1: resolved "https://registry.yarnpkg.com/string-hash/-/string-hash-1.1.3.tgz#e8aafc0ac1855b4666929ed7dd1275df5d6c811b" integrity sha512-kJUvRUFK49aub+a7T1nNE66EJbZBMnBgoC1UbCZ5n6bsZKBRga4KgBRTMn/pFkeCZSYtNeSyMxPDM0AXWELk2A== -"string-width-cjs@npm:string-width@^4.2.0": +"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.2, string-width@^4.2.3: version "4.2.3" resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== @@ -18853,15 +18862,6 @@ string-width@^1.0.1: is-fullwidth-code-point "^1.0.0" strip-ansi "^3.0.0" -"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.2, string-width@^4.2.3: - version "4.2.3" - resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" - integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== - dependencies: - emoji-regex "^8.0.0" - is-fullwidth-code-point "^3.0.0" - strip-ansi "^6.0.1" - string-width@^2.0.0, string-width@^2.1.0, string-width@^2.1.1: version "2.1.1" resolved "https://registry.yarnpkg.com/string-width/-/string-width-2.1.1.tgz#ab93f27a8dc13d28cac815c462143a6d9012ae9e" @@ -18939,7 +18939,7 @@ stringify-object@3.3.0: is-obj "^1.0.1" is-regexp "^1.0.0" -"strip-ansi-cjs@npm:strip-ansi@^6.0.1": +"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1: version "6.0.1" resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== @@ -18967,13 +18967,6 @@ strip-ansi@^5.0.0, strip-ansi@^5.1.0, strip-ansi@^5.2.0: dependencies: ansi-regex "^4.1.0" -strip-ansi@^6.0.0, strip-ansi@^6.0.1: - version "6.0.1" - resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" - integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== - dependencies: - ansi-regex "^5.0.1" - strip-ansi@^7.0.1: version "7.1.0" resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45" @@ -19819,6 +19812,11 @@ tslib@^2.0.0, tslib@^2.0.1, tslib@^2.1.0, tslib@^2.4.0: resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae" integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q== +tslib@^2.3.0: + version "2.8.0" + resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.8.0.tgz#d124c86c3c05a40a91e6fdea4021bd31d377971b" + integrity sha512-jWVzBLplnCmoaTr13V9dYbiQ99wvZRd0vNWaDRg+aVYRcjDF3nDksxFDE/+fkXnKhpnUUkmx5pK/v8mCtLVqZA== + tsscmp@1.0.6: version "1.0.6" resolved "https://registry.yarnpkg.com/tsscmp/-/tsscmp-1.0.6.tgz#85b99583ac3589ec4bfef825b5000aa911d605eb" @@ -21179,7 +21177,7 @@ wordwrap@^1.0.0: resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb" integrity sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q== -"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0": +"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0: version "7.0.0" resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== @@ -21206,15 +21204,6 @@ wrap-ansi@^6.2.0: string-width "^4.1.0" strip-ansi "^6.0.0" -wrap-ansi@^7.0.0: - version "7.0.0" - resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" - integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== - dependencies: - ansi-styles "^4.0.0" - string-width "^4.1.0" - strip-ansi "^6.0.0" - wrap-ansi@^8.0.1, wrap-ansi@^8.1.0: version "8.1.0" resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214" From 2ca8ea5825fe15810d8c5efabcdc762bf0d2f7b0 Mon Sep 17 00:00:00 2001 From: Maksim Nedoshev Date: Sun, 27 Oct 2024 17:03:03 +0200 Subject: [PATCH 2/3] fix(ag-grid): improve UI and build --- packages/ag-grid-theme/.npmignore | 4 +- packages/ag-grid-theme/README.md | 104 ++----- packages/ag-grid-theme/build.ts | 42 +++ packages/ag-grid-theme/package.json | 9 +- packages/ag-grid-theme/rollup.config.js | 24 -- packages/ag-grid-theme/src/styles/index.scss | 266 +---------------- packages/ag-grid-theme/src/styles/theme.scss | 291 +++++++++++++++++++ 7 files changed, 365 insertions(+), 375 deletions(-) create mode 100644 packages/ag-grid-theme/build.ts delete mode 100644 packages/ag-grid-theme/rollup.config.js create mode 100644 packages/ag-grid-theme/src/styles/theme.scss diff --git a/packages/ag-grid-theme/.npmignore b/packages/ag-grid-theme/.npmignore index d535cd0bba..7f75d41e7f 100644 --- a/packages/ag-grid-theme/.npmignore +++ b/packages/ag-grid-theme/.npmignore @@ -1,2 +1,2 @@ -demo.html -rollup.config.js \ No newline at end of file +build.ts +playground \ No newline at end of file diff --git a/packages/ag-grid-theme/README.md b/packages/ag-grid-theme/README.md index a6a93c0f09..39124694cb 100644 --- a/packages/ag-grid-theme/README.md +++ b/packages/ag-grid-theme/README.md @@ -1,87 +1,6 @@

AG Theme Vuestic

-Custom theme with Vuestic UI styles for AG Grid Vue 3. - -## Installation - -#### npm -``` -npm i @vuestic/ag-grid-theme -``` -#### yarn -``` -yarn add @vuestic/ag-grid-theme -``` -Import styles to project via entry js/ts file: - -```js -// main.js - -import '@vuestic/ag-grid-theme/index.scss' -``` -or via a scss: -```scss -// *.scss or - -@import "~@vuestic/ag-grid-theme"; -``` - -## Usage -```vue - -``` - -```js - -``` - -```scss - -``` - - +Vuestic UI styles for AG Grid Vue 3. ## Documentation @@ -90,6 +9,27 @@ on [vuestic.dev](https://vuestic.dev/en/extensions/ag-grid) For more information about AG Grid for Vue 3, visit [ag-grid.com](https://www.ag-grid.com/vue-data-grid/getting-started/) + +## Installation + +1. Install package + #### npm + ``` + npm i @vuestic/ag-grid-theme + ``` + #### yarn + ``` + yarn add @vuestic/ag-grid-theme + ``` +2. Import styles to project via entry js/ts file: + ```js + import '@vuestic/ag-grid-theme' + ``` + or via a scss: + ```scss + @import "@vuestic/ag-grid-theme"; + ``` + ## License [MIT](https://github.com/epicmaxco/vuestic-ui/blob/develop/LICENSE.MD) license diff --git a/packages/ag-grid-theme/build.ts b/packages/ag-grid-theme/build.ts new file mode 100644 index 0000000000..8ec6384cbc --- /dev/null +++ b/packages/ag-grid-theme/build.ts @@ -0,0 +1,42 @@ +import { dirname } from 'pathe'; +import { compileAsync, FileImporter } from 'sass' +import { writeFile, stat, mkdir } from 'fs/promises' +import { existsSync } from 'fs'; + +const nodeImporter: FileImporter = { + findFileUrl(url, context) { + if (url.startsWith('.') || url.startsWith('url') || url.startsWith('http')) { + return null + } + + try { + const resolved = import.meta.resolve(url) + return new URL(resolved) + } catch (e) { + return null + } + }, +} + +const compileScss = async (inputPath: string, outputPath: string) => { + const result = await compileAsync(inputPath, { + style: 'compressed', + importers: [nodeImporter], + }) + + const dirName = dirname(outputPath) + + if (!existsSync(dirName)) { + await mkdir(dirName, { recursive: true }) + } + + // Write result to output file + await writeFile(outputPath, result.css, { + flag: 'w', + }) +} + +Promise.all([ + compileScss('./src/styles/index.scss', './dist/ag-theme-vuestic.css'), + compileScss('./src/styles/theme.scss', './dist/ag-theme-vuestic-clean.css'), +]) diff --git a/packages/ag-grid-theme/package.json b/packages/ag-grid-theme/package.json index 87da8a252a..dce8250f99 100644 --- a/packages/ag-grid-theme/package.json +++ b/packages/ag-grid-theme/package.json @@ -7,8 +7,9 @@ "license": "MIT", "type": "module", "scripts": { - "build": "rollup --config rollup.config.js --bundleConfigAsCjs", - "prepack": "npm run build" + "build": "tsx ./build.ts", + "prepack": "npm run build", + "play": "cd playground && npm run dev" }, "dependencies": { "@ag-grid-community/client-side-row-model": "^32.2.2", @@ -35,6 +36,8 @@ "main": "dist/ag-theme-vuestic.css", "exports": { ".": "./dist/ag-theme-vuestic.css", - "./scss": "./src/styles/index.scss" + "./scss": "./src/styles/index.scss", + "./clean": "./dist/ag-theme-vuestic-clean.css", + "./clean/scss": "./src/styles/clean.scss" } } diff --git a/packages/ag-grid-theme/rollup.config.js b/packages/ag-grid-theme/rollup.config.js deleted file mode 100644 index 36142b3155..0000000000 --- a/packages/ag-grid-theme/rollup.config.js +++ /dev/null @@ -1,24 +0,0 @@ -import { resolve } from 'path'; -import { existsSync, mkdirSync, writeFileSync } from 'fs' - -import scss from 'rollup-plugin-scss' - -export default { - input: resolve(__dirname, 'src/styles/index.scss'), - plugins: [ - scss({ - name: 'ag-theme-vuestic', - fileName: 'ag-theme-vuestic.css', - sass: require('sass'), - failOnError: true, - outputStyle: 'compressed', - output: (styles) => { - if (!existsSync('./dist')) { - mkdirSync('./dist') - } - - writeFileSync('./dist/ag-theme-vuestic.css', styles) - } - }) - ], -} diff --git a/packages/ag-grid-theme/src/styles/index.scss b/packages/ag-grid-theme/src/styles/index.scss index c3ecf042bb..d6102af3a8 100644 --- a/packages/ag-grid-theme/src/styles/index.scss +++ b/packages/ag-grid-theme/src/styles/index.scss @@ -1,264 +1,2 @@ -@use '@ag-grid-community/styles' as ag; - -@font-face { - font-family: "agGridMaterial"; - src: url(data:font/woff2;charset=utf-8;base64,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); - font-weight: normal; - font-style: normal; -} - -.ag-theme-vuestic { - // Font - --ag-font-family: var(--va-font-family, "Source Sans Pro", sans-serif); - --ag-icon-font-family: agGridMaterial; - - // Background - --ag-background-color: var(--va-background-primary); - // Foreground (Text) - --ag-foreground-color: var(--va-on-background-primary); - --ag-secondary-foreground-color: color-mix(in srgb, var(--va-on-background-primary) 50%, transparent); - --ag-disabled-foreground-color: color-mix(in srgb, var(--va-on-background-primary) 50%, transparent); - - // Border - --ag-border-color: var(--va-background-border); - --ag-secondary-border-color: var(--ag-border-color); - - // Accents - --ag-active-color: var(--va-primary, #154EC1); - --ag-invalid-color: var(--va-danger); - - --ag-advanced-filter-join-pill-color: var(--va-danger); - --ag-advanced-filter-column-pill-color: var(--va-success); - --ag-advanced-filter-option-pill-color: var(--va-warning); - --ag-advanced-filter-value-pill-color: var(--va-info); - - // Sizes - --ag-row-height: 36px; - - // Custom - --ag-va-cell-padding: var(--va-data-table-cell-padding, 0.625rem); - - // Tooltips - --ag-tooltip-background-color: var(--va-background-secondary); - --ag-menu-background-color: var(--va-background-secondary); - - // Cards - --ag-card-shadow: 0 1px 4px 1px var(--va-shadow); - --ag-popup-shadow: var(--ag-card-shadow); - - // Selection - --ag-selected-tab-underline-color: var(--va-primary); - --ag-selected-row-background-color: color-mix(in srgb, var(--va-primary) 10%, transparent); - --ag-range-selection-background-color: color-mix(in srgb, var(--va-primary) 10%, transparent); - --ag-range-selection-background-color-2: color-mix(in srgb, var(--va-primary) 20%, transparent); - --ag-range-selection-background-color-3: color-mix(in srgb, var(--va-primary) 30%, transparent); - --ag-range-selection-background-color-4: color-mix(in srgb, var(--va-primary) 40%, transparent); - --ag-range-selection-border-color: var(--va-focus); - --ag-range-border-color: var(--va-focus); - - // Input - --ag-input-border-color-invalid: var(--ag-invalid-color); - --ag-input-border-color: var(--va-background-border); - --ag-input-disabled-background-color: color-mix(in srgb, var(--va-background-border) 25%, transparent); - --ag-input-disabled-border-color: color-mix(in srgb, var(--va-background-border) 50%, transparent); - --ag-input-focus-border-color: var(--va-focus); - --ag-input-focus-box-shadow: 0 0 2px 0.1rem var(--ag-input-focus-border-color); - - // Checkbox - --ag-checkbox-unchecked-color: var(--va-background-border); - --ag-checkbox-checked-color: var(--va-primary); - --ag-checkbox-indeterminate-color: var(--va-primary); - - // Chip - --ag-chip-background-color: color-mix(in srgb, var(--va-on-background-primary) 5%, transparent); - - // Column - --ag-column-hover-color: color-mix(in srgb, var(--va-primary) 5%, transparent); - - // Control panel - --ag-control-panel-background-color: var(--va-background-secondary); - - // Header - --ag-header-background-color: var(--va-background-secondary); - --ag-subheader-background-color: var(--va-background-primary); - - // Menu - --ag-menu-background-color: var(--ag-header-background-color); - - // Row - --ag-odd-row-background-color: color-mix(in srgb, var(--va-primary) 5%, transparent); - --ag-row-hover-color: color-mix(in srgb, var(--va-primary) 5%, transparent); - - // Panel - --ag-panel-background-color: var(--ag-header-background-color); - - // Tooltip - --ag-tooltip-background-color: var(--va-background-secondary); - - .ag-header { - border-bottom: 1px solid var(--va-background-border); - - .ag-header-cell { - padding-left: var(--ag-va-cell-padding); - padding-right: var(--ag-va-cell-padding); - } - - .ag-header-cell-label { - font-size: var(--va-data-table-thead-font-size, 0.625rem); - font-weight: var(--va-data-table-thead-font-weight, 700); - text-transform: var(--va-data-table-thead-text-transform, uppercase); - letter-spacing: var(--va-data-table-thead-letter-spacing, 0.6px); - line-height: 1.2; - } - } - - .ag-row { - border-bottom: none; - } - - .ag-cell { - border: none; - font-family: var(--ag-font-family); - } - - .ag-body-vertical-scroll-viewport, - .ag-body-horizontal-scroll-viewport { - $size: 8px; - $color: var(--va-secondary); - - &::-webkit-scrollbar { - width: $size; - height: $size; - } - - &::-webkit-scrollbar-track { - box-shadow: none; - border-radius: 10px; - } - - &::-webkit-scrollbar-thumb { - background: $color; - opacity: 0.3; - border-radius: 2px; - transition: background 0.3s ease-in-out; - } - - scrollbar-color: $color transparent; - scrollbar-width: thin; - transition: scrollbar-color 0.3s ease-in-out; - } - - // Controls - - .ag-checkbox-input-wrapper { - width: var(--va-checkbox-square-width); - min-width: var(--va-checkbox-square-min-width); - height: var(--va-checkbox-square-height); - position: relative; - font-size: 18px; - } - - // Editing - - .ag-cell-inline-editing { - background: transparent; - box-shadow: none; - - .ag-input-wrapper { - input { - padding-left: calc(var(--ag-cell-horizontal-padding) - 1px); - padding-right: calc(var(--ag-cell-horizontal-padding) - 1px); - background: transparent; - } - } - } - - // Inputs - input[class^=ag-] { - background: transparent; - } - - .ag-header:has(.ag-floating-filter) { - height: calc(var(--ag-row-height) * 2 + 20px) !important; - min-height: calc(var(--ag-row-height) * 2 + 20px) !important; - } - - .ag-header-row:has(.ag-floating-filter) { - height: calc(var(--ag-row-height) + 20px) !important; - } - - .ag-floating-filter { - input { - height: 32px; - padding: 0 0.5rem !important; - } - } - - .ag-floating-filter-button { - height: 100%; - margin-left: 0; - button { - height: 100%; - padding-left: var(--ag-cell-widget-spacing); - box-sizing: content-box; - } - } - - // Filters - .ag-header { - height: auto !important; - } - - // Styles - - &--striped { - --ag-odd-row-background-color: var(--va-background-element); - --ag-selected-row-background-color: var(--ag-selected-row-background-color); - } - - &--hoverable { - --ag-row-hover-color: var(--va-background-hoverable); - } - - &--clickable { - .ag-cell { - cursor: pointer; - } - } - - .ag-select { - .ag-picker-field-wrapper { - cursor: pointer; - padding: 0 var(--va-input-content-horizontal-padding); - background: var(--va-input-color); - border: 1px solid var(--va-background-secondary); - border-radius: var(--va-input-border-radius); - } - - .ag-picker-field-display { - margin: 0; - } - } - - input[class^=ag-]:not([type]), - input[class^=ag-][type=text], - input[class^=ag-][type=number], - input[class^=ag-][type=tel], - input[class^=ag-][type=date], - input[class^=ag-][type=datetime-local], - textarea[class^=ag-] { - padding: 0 9px; - font-family: var(--ag-font-family); - border: 1px solid var(--va-background-border); - - &:focus { - border: 1px solid var(--va-background-border); // keyboard focus color - } - } - - .ag-filter-body { - input { - height: 32px !important; - } - } -} +@forward "@ag-grid-community/styles/ag-grid.css"; +@forward "./theme.scss"; diff --git a/packages/ag-grid-theme/src/styles/theme.scss b/packages/ag-grid-theme/src/styles/theme.scss new file mode 100644 index 0000000000..fbf14dfeb3 --- /dev/null +++ b/packages/ag-grid-theme/src/styles/theme.scss @@ -0,0 +1,291 @@ +@font-face { + font-family: "agGridMaterial"; + src: url(data:font/woff2;charset=utf-8;base64,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); + font-weight: normal; + font-style: normal; +} + +.ag-theme-vuestic { + // Font + --ag-font-family: var(--va-font-family, "Source Sans Pro", sans-serif); + --ag-icon-font-family: agGridMaterial; + + // Sizes + --ag-row-height: 47px; + + // Background + --ag-background-color: var(--va-background-primary); + // Foreground (Text) + --ag-foreground-color: var(--va-on-background-primary); + --ag-secondary-foreground-color: color-mix(in srgb, var(--va-on-background-primary) 50%, transparent); + --ag-disabled-foreground-color: color-mix(in srgb, var(--va-on-background-primary) 50%, transparent); + + // Border + --ag-border-color: var(--va-background-border); + --ag-secondary-border-color: var(--ag-border-color); + + // Accents + --ag-active-color: var(--va-primary, #154EC1); + --ag-invalid-color: var(--va-danger); + + --ag-advanced-filter-join-pill-color: var(--va-danger); + --ag-advanced-filter-column-pill-color: var(--va-success); + --ag-advanced-filter-option-pill-color: var(--va-warning); + --ag-advanced-filter-value-pill-color: var(--va-info); + + // Custom + --ag-va-cell-padding: var(--va-data-table-cell-padding, 0.625rem); + + // Tooltips + --ag-tooltip-background-color: var(--va-background-secondary); + --ag-menu-background-color: var(--va-background-secondary); + + // Cards + --ag-card-shadow: 0 1px 4px 1px var(--va-shadow); + --ag-popup-shadow: var(--ag-card-shadow); + + // Selection + --ag-selected-tab-underline-color: var(--va-primary); + --ag-selected-row-background-color: color-mix(in srgb, var(--va-primary) 10%, transparent); + --ag-range-selection-background-color: color-mix(in srgb, var(--va-primary) 10%, transparent); + --ag-range-selection-background-color-2: color-mix(in srgb, var(--va-primary) 20%, transparent); + --ag-range-selection-background-color-3: color-mix(in srgb, var(--va-primary) 30%, transparent); + --ag-range-selection-background-color-4: color-mix(in srgb, var(--va-primary) 40%, transparent); + --ag-range-selection-border-color: var(--va-focus); + --ag-range-border-color: var(--va-focus); + + // Input + --ag-input-border-color-invalid: var(--ag-invalid-color); + --ag-input-border-color: var(--va-background-border); + --ag-input-disabled-background-color: color-mix(in srgb, var(--va-background-border) 25%, transparent); + --ag-input-disabled-border-color: color-mix(in srgb, var(--va-background-border) 50%, transparent); + --ag-input-focus-border-color: var(--va-focus); + --ag-input-focus-box-shadow: 0 0 2px 0.1rem var(--ag-input-focus-border-color); + + // Checkbox + --ag-checkbox-unchecked-color: var(--va-background-border); + --ag-checkbox-checked-color: var(--va-primary); + --ag-checkbox-indeterminate-color: var(--va-primary); + + // Chip + --ag-chip-background-color: color-mix(in srgb, var(--va-on-background-primary) 5%, transparent); + + // Column + --ag-column-hover-color: color-mix(in srgb, var(--va-primary) 5%, transparent); + + // Control panel + --ag-control-panel-background-color: var(--va-background-secondary); + + // Header + --ag-header-background-color: var(--va-background-secondary); + --ag-subheader-background-color: var(--va-background-primary); + + // Menu + --ag-menu-background-color: var(--ag-header-background-color); + + // Row + // --ag-odd-row-background-color: color-mix(in srgb, var(--va-primary) 5%, transparent); + // --ag-row-hover-color: color-mix(in srgb, var(--va-primary) 5%, transparent); + + // Panel + --ag-panel-background-color: var(--ag-header-background-color); + + // Tooltip + --ag-tooltip-background-color: var(--va-background-secondary); + + // Header + + .ag-header { + border-bottom: 1px solid var(--va-background-border); + height: calc(var(--ag-row-height) - 10px) !important; + min-height: calc(var(--ag-row-height) - 10px) !important; + + .ag-header-cell { + height: calc(var(--ag-row-height) - 10px) !important; + display: flex; + align-items: center; + } + + .ag-header-row-column { + height: calc(var(--ag-row-height) - 10px) !important; + } + + .ag-header-row-column-filter { + top: calc(var(--ag-row-height) - 10px) !important; + } + + .ag-header-cell-label { + font-size: var(--va-data-table-thead-font-size, 0.625rem); + font-weight: var(--va-data-table-thead-font-weight, 700); + color: var(--va-data-table-grid-tr-header-color, var(--va-text-primary)); + text-transform: var(--va-data-table-thead-text-transform, uppercase); + letter-spacing: var(--va-data-table-thead-letter-spacing, 0.6px); + line-height: 1.2; + } + } + + .ag-header:has(.ag-floating-filter) { + height: calc(var(--ag-row-height) * 2 - 10px) !important; + min-height: calc(var(--ag-row-height) * 2 - 10px) !important; + } + + .ag-header-row-column-filter { + height: calc(var(--ag-row-height)) !important; + display: flex; + align-items: center; + + .ag-header-cell { + height: calc(var(--ag-row-height)) !important; + } + } + + .ag-row { + border-bottom: none; + } + + .ag-cell { + border: none; + font-family: var(--ag-font-family); + font-size: 1rem; + } + + .ag-root-wrapper { + border: none; + } + + // Scollbars + + .ag-body-vertical-scroll-viewport, + .ag-body-horizontal-scroll-viewport { + $size: 8px; + $color: var(--va-background-element); + + &::-webkit-scrollbar { + width: $size; + height: $size; + } + + &::-webkit-scrollbar-track { + box-shadow: none; + border-radius: 10px; + } + + &::-webkit-scrollbar-thumb { + background: $color; + opacity: 0.3; + border-radius: 2px; + transition: background 0.3s ease-in-out; + } + + scrollbar-color: $color transparent; + scrollbar-width: thin; + transition: scrollbar-color 0.3s ease-in-out; + } + + // Controls + + .ag-checkbox-input-wrapper { + width: var(--va-checkbox-square-width); + min-width: var(--va-checkbox-square-min-width); + height: var(--va-checkbox-square-height); + position: relative; + font-size: 18px; + } + + // Editing + + .ag-cell-inline-editing { + background: transparent; + box-shadow: none; + + .ag-input-wrapper { + input { + padding-left: calc(var(--ag-cell-horizontal-padding) - 1px); + padding-right: calc(var(--ag-cell-horizontal-padding) - 1px); + background: transparent; + } + } + } + + // Inputs + input[class^=ag-] { + background: transparent; + } + + .ag-floating-filter { + input { + height: 32px; + padding: 0 0.5rem !important; + } + } + + .ag-floating-filter-button { + height: 100%; + margin-left: 0; + button { + height: 100%; + padding-left: var(--ag-cell-widget-spacing); + box-sizing: content-box; + } + } + + // Filters + .ag-header { + height: auto !important; + } + + // Styles + + &--striped { + --ag-odd-row-background-color: color-mix(in srgb, var(--va-primary) 5%, transparent); + --ag-selected-row-background-color: var(--ag-selected-row-background-color); + } + + &--hoverable { + --ag-row-hover-color: color-mix(in srgb, var(--va-primary) 5%, transparent); + } + + &--clickable { + .ag-cell { + cursor: pointer; + } + } + + .ag-select { + .ag-picker-field-wrapper { + cursor: pointer; + padding: 0 var(--va-input-content-horizontal-padding); + background: var(--va-input-color); + border: 1px solid var(--va-background-secondary); + border-radius: var(--va-input-border-radius); + height: 32px; + padding-left: 0.5rem; + } + + .ag-picker-field-display { + margin: 0; + } + } + + input[class^=ag-]:not([type]), + input[class^=ag-][type=text], + input[class^=ag-][type=number], + input[class^=ag-][type=tel], + input[class^=ag-][type=date], + input[class^=ag-][type=datetime-local], + textarea[class^=ag-] { + padding: 0 9px; + font-family: var(--ag-font-family); + border: 1px solid var(--va-background-border); + + &:focus { + border: 1px solid var(--va-background-border); // keyboard focus color + } + } + + .ag-filter-body { + input { + height: 32px !important; + } + } +} From 29c97d063d352b01a6de6eefc2eb7cfe939c4a94 Mon Sep 17 00:00:00 2001 From: Maksim Nedoshev Date: Sun, 27 Oct 2024 17:07:59 +0200 Subject: [PATCH 3/3] chore(ag-grid): bump 1.2.0 --- packages/ag-grid-theme/package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/ag-grid-theme/package.json b/packages/ag-grid-theme/package.json index dce8250f99..ceecc65962 100644 --- a/packages/ag-grid-theme/package.json +++ b/packages/ag-grid-theme/package.json @@ -1,6 +1,6 @@ { "name": "@vuestic/ag-grid-theme", - "version": "1.1.4", + "version": "1.2.0", "description": "Custom theme with Vuestic UI styles for AG Grid Vue 3.", "homepage": "https://vuestic.dev", "repository": "https://github.com/epicmaxco/vuestic-ui", @@ -18,7 +18,7 @@ "@ag-grid-community/vue3": "^32.2.2" }, "peerDependencies": { - "vuestic-ui": "^1.3.0" + "vuestic-ui": "^1.10.0" }, "devDependencies": { "sass": "^1.57.1",