From 7f65c6b5ecc6c87348cbb9cf05422c1702486a20 Mon Sep 17 00:00:00 2001 From: mm <25961416+mlmoravek@users.noreply.github.com> Date: Mon, 11 Nov 2024 16:50:54 +0100 Subject: [PATCH] feat: apply changes for oruga v0.9.0 (#142) --- index.html | 2 +- package-lock.json | 44 ++++++----- package.json | 6 +- src/App.vue | 9 ++- src/assets/scss/components/_datepicker.scss | 29 +++++-- src/assets/scss/components/_dropdown.scss | 22 ++---- src/assets/scss/components/_input.scss | 10 +++ src/assets/scss/components/_menu.scss | 14 +++- src/assets/scss/components/_modal.scss | 4 + src/assets/scss/components/_select.scss | 17 ++-- src/assets/scss/components/_steps.scss | 38 ++++----- src/assets/scss/components/_tabs.scss | 8 +- src/plugins/theme.ts | 86 +++++++++++---------- src/router/index.ts | 1 + stylelint.config.mjs | 1 + 15 files changed, 175 insertions(+), 116 deletions(-) diff --git a/index.html b/index.html index 11603f8..5912450 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,5 @@ - + diff --git a/package-lock.json b/package-lock.json index f314c3c..804602a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,8 +12,8 @@ "bulma": "1.0.2" }, "devDependencies": { - "@oruga-ui/examples": "0.9.0-pre.2", - "@oruga-ui/oruga-next": "0.9.0-pre.2", + "@oruga-ui/examples": "0.9.0", + "@oruga-ui/oruga-next": "0.9.0", "@types/node": "^22.9.0", "@vitejs/plugin-vue": "5.1.4", "@vue/eslint-config-prettier": "^10.1.0", @@ -42,7 +42,7 @@ "vue-tsc": "2.1.10" }, "peerDependencies": { - "@oruga-ui/oruga-next": "0.9.0-pre.2" + "@oruga-ui/oruga-next": "0.9.0" } }, "node_modules/@babel/code-frame": { @@ -726,11 +726,10 @@ } }, "node_modules/@fortawesome/fontawesome-free": { - "version": "6.5.2", - "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.5.2.tgz", - "integrity": "sha512-hRILoInAx8GNT5IMkrtIt9blOdrqHOnPBH+k70aWUAqPZPgopb9G5EQJFpaBx/S8zp2fC+mPW349Bziuk1o28Q==", + "version": "6.6.0", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.6.0.tgz", + "integrity": "sha512-60G28ke/sXdtS9KZCpZSHHkCbdsOGEhIUGlwq6yhY74UpTiToIh8np7A8yphhM4BWsvNFtIvLpi4co+h9Mr9Ow==", "dev": true, - "hasInstallScript": true, "engines": { "node": ">=6" } @@ -1059,30 +1058,33 @@ } }, "node_modules/@oruga-ui/examples": { - "version": "0.9.0-pre.2", - "resolved": "https://registry.npmjs.org/@oruga-ui/examples/-/examples-0.9.0-pre.2.tgz", - "integrity": "sha512-lu1ZAjEKWdT2MJVExYpFlEGXRsI8KsdzgZ1+ARBPOTuU9XCm4sY+6A3beIEX2F7fJOdfRgvr0CJgpB2+3wplTg==", + "version": "0.9.0", + "resolved": "https://registry.npmjs.org/@oruga-ui/examples/-/examples-0.9.0.tgz", + "integrity": "sha512-e4/RHNbaVaeLTii4Q3T+kNrLjz2yEaIlARaxty+PJSU0FVjGf4oTe8sU9qECxu75gZexqwjoP0TZetF3+l15Tg==", "dev": true, "dependencies": { - "@fortawesome/fontawesome-free": "6.5.2", - "@fortawesome/fontawesome-svg-core": "^6.5.2", - "@fortawesome/free-solid-svg-icons": "^6.5.2", + "@fortawesome/fontawesome-free": "6.6.0", + "@fortawesome/fontawesome-svg-core": "^6.6.0", + "@fortawesome/free-solid-svg-icons": "^6.6.0", "@fortawesome/vue-fontawesome": "^3.0.8", "@highlightjs/vue-plugin": "2.1.2", "highlight.js": "11.10.0", "markdown-it": "^14.1.0", - "markdown-it-highlightjs": "^4.1.0" + "markdown-it-highlightjs": "^4.2.0" }, "peerDependencies": { - "@oruga-ui/oruga-next": "0.9.0-pre.2", + "@oruga-ui/oruga-next": "0.9.0", "vue": "^3.0.0" } }, "node_modules/@oruga-ui/oruga-next": { - "version": "0.9.0-pre.2", - "resolved": "https://registry.npmjs.org/@oruga-ui/oruga-next/-/oruga-next-0.9.0-pre.2.tgz", - "integrity": "sha512-jy0hO5Df9vNfnfLF9Pu/O1Gxf/NlNkJ6xuw1W4Uq2RA1L0dk5NwgLWN9sU+hDJrrLSFFan08fdm83LcANWEXnA==", + "version": "0.9.0", + "resolved": "https://registry.npmjs.org/@oruga-ui/oruga-next/-/oruga-next-0.9.0.tgz", + "integrity": "sha512-k25URBruttk2u+pj0NsCXwbCE1OyORhv4jpHh7BXR9zAHHSSKwV1Evbbvbr77/wVRWhbgoso1IOxc8WaT9Fr5g==", "dev": true, + "dependencies": { + "vue-component-type-helpers": "^2.1.10" + }, "peerDependencies": { "vue": "^3.0.0" } @@ -5172,6 +5174,12 @@ } } }, + "node_modules/vue-component-type-helpers": { + "version": "2.1.10", + "resolved": "https://registry.npmjs.org/vue-component-type-helpers/-/vue-component-type-helpers-2.1.10.tgz", + "integrity": "sha512-lfgdSLQKrUmADiSV6PbBvYgQ33KF3Ztv6gP85MfGaGaSGMTXORVaHT1EHfsqCgzRNBstPKYDmvAV9Do5CmJ07A==", + "dev": true + }, "node_modules/vue-eslint-parser": { "version": "9.4.3", "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.4.3.tgz", diff --git a/package.json b/package.json index 49db6c5..5d5931d 100644 --- a/package.json +++ b/package.json @@ -31,14 +31,14 @@ "update": "ncu -u" }, "peerDependencies": { - "@oruga-ui/oruga-next": "0.9.0-pre.2" + "@oruga-ui/oruga-next": "0.9.0" }, "dependencies": { "bulma": "1.0.2" }, "devDependencies": { - "@oruga-ui/examples": "0.9.0-pre.2", - "@oruga-ui/oruga-next": "0.9.0-pre.2", + "@oruga-ui/examples": "0.9.0", + "@oruga-ui/oruga-next": "0.9.0", "@types/node": "^22.9.0", "@vitejs/plugin-vue": "5.1.4", "@vue/eslint-config-prettier": "^10.1.0", diff --git a/src/App.vue b/src/App.vue index 44e74bf..54dd89b 100644 --- a/src/App.vue +++ b/src/App.vue @@ -36,10 +36,11 @@ import components from "@/components"; main { flex-grow: 1; + width: 100%; height: 100vh; padding: 2rem; padding-bottom: 6rem; - overflow-y: scroll; + padding-left: calc(var(--vp-sidebar-width) + 2rem); > section { padding: 1rem 0; @@ -56,6 +57,8 @@ import components from "@/components"; } #nav { + position: fixed; + left: 0; display: flex; flex-direction: column; height: 100vh; @@ -84,7 +87,7 @@ import components from "@/components"; font-size: 1rem; &.router-link-exact-active { - color: #2c3e50; + color: var(--vp-c-brand-1); } } } @@ -97,7 +100,7 @@ import components from "@/components"; } @media (max-width: 576px) { - #main { + #app { #nav { display: none; } diff --git a/src/assets/scss/components/_datepicker.scss b/src/assets/scss/components/_datepicker.scss index 7887011..2ee132a 100644 --- a/src/assets/scss/components/_datepicker.scss +++ b/src/assets/scss/components/_datepicker.scss @@ -56,15 +56,25 @@ $datepicker-event-background-color: css.getVar("grey-light") !default; } } - // unset opacity when dropdow is disabled - .dropdown { + // dropdown override + .dropdown, + &.dropdown { + // unset opacity when dropdow is disabled &.is-disabled { opacity: 1; } - } - .dropdown-item { - font-size: inherit; + .dropdown-menu { + .dropdown-item { + @include css.register-vars( + ( + "dropdown-item-background-l-delta": "transparent", + ) + ); + font-size: inherit; + padding-inline-end: 1rem; + } + } } .datepicker-header { @@ -72,9 +82,12 @@ $datepicker-event-background-color: css.getVar("grey-light") !default; margin-bottom: 0.875rem; border-bottom: 1px solid css.getVar("grey-lighter"); - .pagination-previous, - .pagination-next { - border-width: css.getVar("button-border-width"); + .pagination { + button.pagination-previous, + button.pagination-next { + border-width: css.getVar("button-border-width"); + border-radius: css.getVar("control-radius"); + } } } diff --git a/src/assets/scss/components/_dropdown.scss b/src/assets/scss/components/_dropdown.scss index 60e812b..27fbf00 100644 --- a/src/assets/scss/components/_dropdown.scss +++ b/src/assets/scss/components/_dropdown.scss @@ -2,6 +2,8 @@ @use "bulma/sass/utilities/css-variables" as css; @use "bulma/sass/utilities/mixins" as mixins; +@use "bulma/sass/components/dropdown" as dropodown; + /* @docs */ $dropdown-mobile-breakpoint: vars.$desktop !default; $dropdown-background-background-color: hsla( @@ -44,6 +46,10 @@ $dropdown-z: 40 !default; } .dropdown-item { + @extend a; + + cursor: pointer; + &.is-disabled { cursor: not-allowed; opacity: css.getVar("dropdown-disabled-opacity"); @@ -86,6 +92,7 @@ $dropdown-z: 40 !default; position: static; display: inline-block; padding: 0; + overflow: auto; z-index: 0; } @@ -176,23 +183,10 @@ $dropdown-z: 40 !default; overflow-y: auto; z-index: calc(css.getVar("dropdown-z") + 10); - > .dropdown-item, - > .has-link a { + > .dropdown-item { padding: 1rem 1.5rem; } } } } - - // polyfills for other stuff - - .dropdown-menu .has-link a { - @extend .dropdown-item; - padding-right: 3rem; - white-space: nowrap; - } - - .navbar-item { - height: 100%; - } } diff --git a/src/assets/scss/components/_input.scss b/src/assets/scss/components/_input.scss index 0146f0e..9a290cd 100644 --- a/src/assets/scss/components/_input.scss +++ b/src/assets/scss/components/_input.scss @@ -1,7 +1,17 @@ +@use "utils/variables" as var; + .control { display: inline-block; &.is-expanded { width: 100%; } + + > .icon { + @each $name, $value in var.$sizes-map { + &.is-#{$name} { + font-size: #{$value}; + } + } + } } diff --git a/src/assets/scss/components/_menu.scss b/src/assets/scss/components/_menu.scss index b151f3f..64a3f33 100644 --- a/src/assets/scss/components/_menu.scss +++ b/src/assets/scss/components/_menu.scss @@ -1 +1,13 @@ -// nothing todo here +@use "bulma/sass/utilities/css-variables" as css; + +.menu { + .menu-item { + &.is-disabled { + @include css.register-vars( + ( + "menu-item-background-l-delta": -10%, + ) + ); + } + } +} diff --git a/src/assets/scss/components/_modal.scss b/src/assets/scss/components/_modal.scss index 2e60b71..e8e915b 100644 --- a/src/assets/scss/components/_modal.scss +++ b/src/assets/scss/components/_modal.scss @@ -6,4 +6,8 @@ max-height: 100vh; margin: 0; } + + .modal-content { + width: auto; + } } diff --git a/src/assets/scss/components/_select.scss b/src/assets/scss/components/_select.scss index 9ce8ad8..23c67ff 100644 --- a/src/assets/scss/components/_select.scss +++ b/src/assets/scss/components/_select.scss @@ -7,20 +7,19 @@ color: rgba(css.getVar("grey"), 0.7); } - &:has(+ .icon) { - padding-right: css.getVar("input-height"); + &.has-icon-left { + padding-left: css.getVar("input-height"); } - } - &.has-icons-left { - select { - padding-left: css.getVar("input-height"); + &.has-icon-right { + padding-right: css.getVar("input-height"); } } - &.has-icons-right { - select { - padding-right: css.getVar("input-height"); + // remove arrow if not has arrow + &:has(select:not(.has-arrow) + .icon) { + &::after { + display: none; } } diff --git a/src/assets/scss/components/_steps.scss b/src/assets/scss/components/_steps.scss index da44cab..c0989c9 100644 --- a/src/assets/scss/components/_steps.scss +++ b/src/assets/scss/components/_steps.scss @@ -22,32 +22,32 @@ $steps-vertical-padding: 1em 0 !default; /* @docs */ .steps-wrapper { - .steps { - @include css.register-vars( - ( - "steps-size": #{var.$size-normal}, - "steps-divider-height": #{$steps-divider-height}, - "steps-details-background-color": #{$steps-details-background-color}, - ) - ); + @include css.register-vars( + ( + "steps-size": #{var.$size-normal}, + "steps-divider-height": #{$steps-divider-height}, + "steps-details-background-color": #{$steps-details-background-color}, + ) + ); + + // sizes + @each $name, $value in var.$sizes-map { + &.is-#{$name} { + @include css.register-vars( + ( + "steps-size": #{$value}, + ) + ); + } + } + .steps { display: flex; flex-wrap: wrap; font-size: css.getVar("steps-size"); min-height: calc(css.getVar("steps-size") * 2); list-style: none; - // sizes - @each $name, $value in var.$sizes-map { - &.is-#{$name} { - @include css.register-vars( - ( - "steps-size": #{$value}, - ) - ); - } - } - &.is-animated { .step { &:not(:first-child), diff --git a/src/assets/scss/components/_tabs.scss b/src/assets/scss/components/_tabs.scss index 15129c4..1eec117 100644 --- a/src/assets/scss/components/_tabs.scss +++ b/src/assets/scss/components/_tabs.scss @@ -276,7 +276,7 @@ $tabs-toggle-link-focus-border-color: css.getVar( } } - .tab-content { + .tabs-content { position: relative; overflow: visible; display: flex; @@ -300,6 +300,7 @@ $tabs-toggle-link-focus-border-color: css.getVar( &.is-fullwidth { width: 100%; + .tab, .tab-link { width: 100%; } @@ -318,9 +319,14 @@ $tabs-toggle-link-focus-border-color: css.getVar( flex-wrap: wrap; .tabs { + flex-grow: 0; flex-direction: column; border-bottom-color: transparent !important; + .tab-link { + width: 100%; + } + &:not(.is-boxed) { .tab:not(:has(+ .tab .tab-link.is-active)) .tab-link { border-bottom-color: css.getVar("tabs-border-bottom-color"); diff --git a/src/plugins/theme.ts b/src/plugins/theme.ts index 01ee79f..1fc3533 100644 --- a/src/plugins/theme.ts +++ b/src/plugins/theme.ts @@ -11,14 +11,14 @@ const bulmaConfig: OrugaOptions = { labelClass: "label", labelSizeClass: "is-", messageClass: "help", - variantMessageClass: "is-", + messageVariantClass: "is-", bodyClass: "field-body", addonsClass: "has-addons", groupedClass: "is-grouped", groupMultilineClass: "is-grouped-multiline", horizontalClass: "is-horizontal", - labelHorizontalClass: "field-label", - bodyHorizontalClass: "field-body", + horizontalLabelClass: "field-label", + horizontalBodyClass: "field-body", }, input: { override: true, @@ -45,6 +45,7 @@ const bulmaConfig: OrugaOptions = { if (isTrueish(props.size)) classes.push(`is-${props.size}`); if (isTrueish(props.rounded)) classes.push("is-rounded"); if (isTrueish(props.multiple)) classes.push("is-multiple"); + if (isTrueish(props.disabled)) classes.push("is-disabled"); if (isTrueish(props.icon)) classes.push("has-icons-left"); if (isTrueish(props.iconRight)) classes.push("has-icons-right"); return classes.join(" "); @@ -54,6 +55,9 @@ const bulmaConfig: OrugaOptions = { iconLeftClass: "is-left", iconRightClass: "is-right", placeholderClass: "is-empty", + iconRightSpaceClass: "has-icon-right", + iconLeftSpaceClass: "has-icon-left", + arrowClass: "has-arrow", }, icon: { override: true, @@ -105,25 +109,27 @@ const bulmaConfig: OrugaOptions = { override: true, rootClass: "taginput control", containerClass: "taginput-container", - itemClass: "tag", closeClass: "delete is-small", + itemClass: "tag", + variantClass: "is-", + expandedClass: "is-expanded", }, pagination: { override: true, rootClass: (_: string, props: ComponentProps) => { const classes = ["pagination"]; - if (isTrueish(props.rounded)) classes.push("is-rounded"); + if (props.rounded) classes.push("is-rounded"); return classes.join(" "); }, sizeClass: "is-", simpleClass: "is-simple", orderClass: "is-", listClass: "pagination-list", - linkClass: "pagination-link", - linkCurrentClass: "is-current", - linkDisabledClass: "is-disabled", - nextButtonClass: "pagination-next", - prevButtonClass: "pagination-previous", + buttonClass: "pagination-link", + buttonCurrentClass: "is-current", + buttonDisabledClass: "is-disabled", + buttonNextClass: "pagination-next", + buttonPrevClass: "pagination-previous", infoClass: "info", }, slider: { @@ -147,21 +153,21 @@ const bulmaConfig: OrugaOptions = { rootClass: "tabs-wrapper", contentClass: "tabs-content", multilineClass: "is-multiline", - navTabsClass: "tabs", - navTypeClass: "is-", expandedClass: "is-fullwidth", verticalClass: "is-vertical", positionClass: "is-", + navClass: "tabs", + navTypeClass: "is-", + navItemClass: "tab", navSizeClass: "is-", navPositionClass: "is-", + tabPanelClass: "tab-item", + tabClass: "tab-link", + tabIconClass: "tab-icon", + tabLabelClass: "tab-title", + tabActiveClass: "is-active", + tabDisabledClass: "is-disabled", transitioningClass: "is-transitioning", - itemClass: "tab-item", - itemWrapperClass: "tab", - itemHeaderClass: "tab-link", - itemHeaderIconClass: "tab-icon", - itemHeaderTextClass: "tab-title", - itemHeaderActiveClass: () => "is-active", - itemHeaderDisabledClass: () => "is-disabled", }, table: { override: true, @@ -206,7 +212,7 @@ const bulmaConfig: OrugaOptions = { steps: { override: true, rootClass: "steps-wrapper", - stepsClass: (_: string, props: ComponentProps) => { + navClass: (_: string, props: ComponentProps) => { const classes = ["steps"]; if (props.labelPosition === "left") classes.push("has-label-left"); if (props.labelPosition === "right") @@ -217,24 +223,24 @@ const bulmaConfig: OrugaOptions = { animatedClass: "is-animated", positionClass: "is-", sizeClass: "is-", - itemHeaderClass: "step", - itemHeaderVariantClass: "is-", - itemHeaderActiveClass: "is-active", - itemHeaderPreviousClass: "is-previous", - stepLinkClass: "step-link", - stepLinkLabelClass: "step-title", - stepLinkClickableClass: "is-clickable", - labelPosition: "is-", - stepMarkerClass: "step-marker", - stepMarkerRoundedClass: "is-rounded", - stepContentClass: "step-content", - stepContentTransitioningClass: "is-transitioning", - itemClass: "step-item", - stepNavigationClass: "step-navigation", + navItemClass: "step", + navItemVariantClass: "is-", + navItemActiveClass: "is-active", + navItemPreviousClass: "is-previous", + stepClass: "step-link", + stepLabelClass: "step-title", + stepClickableClass: "is-clickable", + markerClass: "step-marker", + markerRoundedClass: "is-rounded", + contentClass: "step-content", + transitioningClass: "is-transitioning", + stepPanelClass: "step-item", + navigationClass: "step-navigation", }, button: { override: true, rootClass: "button", + wrapperClass: "button-wrapper", sizeClass: "is-", variantClass: "is-", roundedClass: "is-rounded", @@ -244,12 +250,10 @@ const bulmaConfig: OrugaOptions = { if (!variant) return "is-outlined"; return `is-${variant} is-outlined`; }, - invertedClass: (variant) => { if (!variant) return "is-inverted"; return `is-${variant} is-inverted`; }, - wrapperClass: "button-wrapper", }, collapse: { override: true, @@ -262,6 +266,10 @@ const bulmaConfig: OrugaOptions = { rootClass: "menu", listClass: "menu-list", listLabelClass: "menu-label", + itemButtonClass: "menu-item", + itemButtonActiveClass: "is-active", + itemButtonDisabledClass: "is-disabled", + itemSubmenuClass: "submenu", }, skeleton: { override: true, @@ -286,7 +294,6 @@ const bulmaConfig: OrugaOptions = { }, dropdown: { override: true, - itemTag: "a", rootClass: "dropdown", triggerClass: "dropdown-trigger", menuClass: "dropdown-content dropdown-menu", @@ -297,7 +304,7 @@ const bulmaConfig: OrugaOptions = { itemActiveClass: "is-active", itemDisabledClass: "is-disabled", mobileClass: "is-mobile-modal", - menuMobileOverlayClass: "background", + overlayClass: "background", positionClass: "is-", activeClass: "is-active", hoverableClass: "is-hoverable", @@ -386,7 +393,6 @@ const bulmaConfig: OrugaOptions = { overlayClass: "sidebar-background", contentClass: "sidebar-content", activeClass: "is-active", - variantClass: "is-", positionClass: "is-", expandOnHoverClass: "is-expanded", fullheightClass: "is-fullheight", @@ -394,12 +400,14 @@ const bulmaConfig: OrugaOptions = { reduceClass: "is-mini", inlineClass: "is-inline", mobileClass: "is-", + scrollClipClass: "is-clipped", }, loading: { fullPageClass: "is-full-page", overlayClass: "loading-overlay", iconClass: "icon", rootClass: "loading", + scrollClipClass: "is-clipped", }, carousel: { override: true, diff --git a/src/router/index.ts b/src/router/index.ts index 4fc1476..2bc2cde 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -11,6 +11,7 @@ import components from "@/components"; const routes: Array = [ { path: "/", + alias: "/home", name: "Home", component: Home, }, diff --git a/stylelint.config.mjs b/stylelint.config.mjs index c094ac7..a796151 100644 --- a/stylelint.config.mjs +++ b/stylelint.config.mjs @@ -7,6 +7,7 @@ export default { plugins: ["stylelint-prettier", "stylelint-scss"], ignoreFiles: ["**/.*", "**/dist"], rules: { + "scss/operator-no-newline-after": [true, { severity: "warning" }], "scss/at-extend-no-missing-placeholder": null, "no-duplicate-selectors": [true, { severity: "warning" }], "no-descending-specificity": [true, { severity: "warning" }],