diff --git a/package-lock.json b/package-lock.json index 2a16dab..7627a8e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,8 +13,8 @@ }, "devDependencies": { "@eslint/compat": "^1.4.0", - "@oruga-ui/examples": "0.11.3", - "@oruga-ui/oruga-next": "0.11.3", + "@oruga-ui/examples": "^0.12.0-pre.2", + "@oruga-ui/oruga-next": "^0.12.0-pre.2", "@tsconfig/node22": "^22.0.2", "@types/node": "^24.7.2", "@vitejs/plugin-vue": "6.0.1", @@ -43,7 +43,7 @@ "vue-tsc": "3.1.1" }, "peerDependencies": { - "@oruga-ui/oruga-next": "^0.11.0" + "@oruga-ui/oruga-next": "^0.12.0-pre.2" } }, "node_modules/@babel/code-frame": { @@ -869,9 +869,9 @@ } }, "node_modules/@fortawesome/fontawesome-common-types": { - "version": "6.7.2", - "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.7.2.tgz", - "integrity": "sha512-Zs+YeHUC5fkt7Mg1l6XTniei3k4bwG/yo3iFUtZWd/pMx9g3fdvkSK9E0FOC+++phXOka78uJcYb8JaFkW52Xg==", + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-7.1.0.tgz", + "integrity": "sha512-l/BQM7fYntsCI//du+6sEnHOP6a74UixFyOYUyz2DLMXKx+6DEhfR3F2NYGE45XH1JJuIamacb4IZs9S0ZOWLA==", "dev": true, "license": "MIT", "engines": { @@ -879,9 +879,9 @@ } }, "node_modules/@fortawesome/fontawesome-free": { - "version": "6.7.2", - "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.7.2.tgz", - "integrity": "sha512-JUOtgFW6k9u4Y+xeIaEiLr3+cjoUPiAuLXoyKOJSia6Duzb7pq+A76P9ZdPDoAoxHdHzq6gE9/jKBGXlZT8FbA==", + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-7.0.1.tgz", + "integrity": "sha512-RLmb9U6H2rJDnGxEqXxzy7ANPrQz7WK2/eTjdZqyU9uRU5W+FkAec9uU5gTYzFBH7aoXIw2WTJSCJR4KPlReQw==", "dev": true, "license": "(CC-BY-4.0 AND OFL-1.1 AND MIT)", "engines": { @@ -889,39 +889,39 @@ } }, "node_modules/@fortawesome/fontawesome-svg-core": { - "version": "6.7.2", - "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.7.2.tgz", - "integrity": "sha512-yxtOBWDrdi5DD5o1pmVdq3WMCvnobT0LU6R8RyyVXPvFRd2o79/0NCuQoCjNTeZz9EzA9xS3JxNWfv54RIHFEA==", + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-7.1.0.tgz", + "integrity": "sha512-fNxRUk1KhjSbnbuBxlWSnBLKLBNun52ZBTcs22H/xEEzM6Ap81ZFTQ4bZBxVQGQgVY0xugKGoRcCbaKjLQ3XZA==", "dev": true, "license": "MIT", "dependencies": { - "@fortawesome/fontawesome-common-types": "6.7.2" + "@fortawesome/fontawesome-common-types": "7.1.0" }, "engines": { "node": ">=6" } }, "node_modules/@fortawesome/free-solid-svg-icons": { - "version": "6.7.2", - "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.7.2.tgz", - "integrity": "sha512-GsBrnOzU8uj0LECDfD5zomZJIjrPhIlWU82AHwa2s40FKH+kcxQaBvBo3Z4TxyZHIyX8XTDxsyA33/Vx9eFuQA==", + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-7.1.0.tgz", + "integrity": "sha512-Udu3K7SzAo9N013qt7qmm22/wo2hADdheXtBfxFTecp+ogsc0caQNRKEb7pkvvagUGOpG9wJC1ViH6WXs8oXIA==", "dev": true, "license": "(CC-BY-4.0 AND MIT)", "dependencies": { - "@fortawesome/fontawesome-common-types": "6.7.2" + "@fortawesome/fontawesome-common-types": "7.1.0" }, "engines": { "node": ">=6" } }, "node_modules/@fortawesome/vue-fontawesome": { - "version": "3.0.8", - "resolved": "https://registry.npmjs.org/@fortawesome/vue-fontawesome/-/vue-fontawesome-3.0.8.tgz", - "integrity": "sha512-yyHHAj4G8pQIDfaIsMvQpwKMboIZtcHTUvPqXjOHyldh1O1vZfH4W03VDPv5RvI9P6DLTzJQlmVgj9wCf7c2Fw==", + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/@fortawesome/vue-fontawesome/-/vue-fontawesome-3.1.2.tgz", + "integrity": "sha512-mhYnBIuuW8OIMHf31kOjaBmyE7BMrwBorhrOHVud6vTTu+7IPQNWB+DWaHoE75v10dRF5s/dFtcrgE7vKSEWwQ==", "dev": true, "license": "MIT", "peerDependencies": { - "@fortawesome/fontawesome-svg-core": "~1 || ~6", + "@fortawesome/fontawesome-svg-core": "~1 || ~6 || ~7", "vue": ">= 3.0.0 < 4" } }, @@ -1260,34 +1260,34 @@ } }, "node_modules/@oruga-ui/examples": { - "version": "0.11.3", - "resolved": "https://registry.npmjs.org/@oruga-ui/examples/-/examples-0.11.3.tgz", - "integrity": "sha512-auWKuoH+rDbeCAg0Sw3yx4q5VAqhs3Fa87KpFGxDKT5mH6117q8Z9Us9vzZEH1UHxsbxZazVfRzGcqoJr6OZHA==", + "version": "0.12.0-pre.2", + "resolved": "https://registry.npmjs.org/@oruga-ui/examples/-/examples-0.12.0-pre.2.tgz", + "integrity": "sha512-R0mZy9mv1Q2h/3ndR3+3LVffnpAmmXEUbTTbe+CzWhqlw6+6JF9x9NX7bo9DejiKwZrvRhVvqJ9nKSrigOYtLg==", "dev": true, "license": "MIT", "dependencies": { - "@fortawesome/fontawesome-free": "6.7.2", - "@fortawesome/fontawesome-svg-core": "^6.7.2", - "@fortawesome/free-solid-svg-icons": "^6.7.2", - "@fortawesome/vue-fontawesome": "^3.0.8", + "@fortawesome/fontawesome-free": "7.0.1", + "@fortawesome/fontawesome-svg-core": "^7.0.1", + "@fortawesome/free-solid-svg-icons": "^7.0.1", + "@fortawesome/vue-fontawesome": "^3.1.1", "@highlightjs/vue-plugin": "2.1.2", "highlight.js": "11.11.1", "markdown-it": "^14.1.0", "markdown-it-highlightjs": "^4.2.0" }, "peerDependencies": { - "@oruga-ui/oruga-next": "0.11.3", + "@oruga-ui/oruga-next": "0.12.0-pre.2", "vue": "^3.0.0" } }, "node_modules/@oruga-ui/oruga-next": { - "version": "0.11.3", - "resolved": "https://registry.npmjs.org/@oruga-ui/oruga-next/-/oruga-next-0.11.3.tgz", - "integrity": "sha512-vYgbzouCYEJHWW84L+9/Ly4lSy9W3xw6JDRa6OsIbN2jfONI98yof7ymBVVAYF4juZSYrJ7l8rQGaB6zYnX4Qg==", + "version": "0.12.0-pre.2", + "resolved": "https://registry.npmjs.org/@oruga-ui/oruga-next/-/oruga-next-0.12.0-pre.2.tgz", + "integrity": "sha512-m64YJS5Z/SNJiWz6UZAYqtXg3aiW/mPtGlNr1d/pq4RtuOTSef2N9l+Ut5ZJx5+TyJv+PPxOIJ0omiVqWPmD7Q==", "dev": true, "license": "MIT", "dependencies": { - "vue-component-type-helpers": "^3.0.2" + "vue-component-type-helpers": "^3.1.0" }, "peerDependencies": { "vue": "^3.0.0" @@ -6295,9 +6295,9 @@ } }, "node_modules/vue-component-type-helpers": { - "version": "3.0.3", - "resolved": "https://registry.npmjs.org/vue-component-type-helpers/-/vue-component-type-helpers-3.0.3.tgz", - "integrity": "sha512-koiBu7lO8e6w/UlbZAAIW11qcFQocYIl7Nh/SVwGZ804ej5KrncU32bRxi2zfU2Kyf6HWuk1CeeVP2rhIL+vyQ==", + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/vue-component-type-helpers/-/vue-component-type-helpers-3.1.3.tgz", + "integrity": "sha512-V1dOD8XYfstOKCnXbWyEJIrhTBMwSyNjv271L1Jlx9ExpNlCSuqOs3OdWrGJ0V544zXufKbcYabi/o+gK8lyfQ==", "dev": true, "license": "MIT" }, diff --git a/package.json b/package.json index 6b99d7f..7c5e3b7 100644 --- a/package.json +++ b/package.json @@ -37,15 +37,15 @@ "update": "ncu -u" }, "peerDependencies": { - "@oruga-ui/oruga-next": "^0.11.0" + "@oruga-ui/oruga-next": "^0.12.0-pre.2" }, "dependencies": { "bootstrap": "^5.3.8" }, "devDependencies": { "@eslint/compat": "^1.4.0", - "@oruga-ui/examples": "0.11.3", - "@oruga-ui/oruga-next": "0.11.3", + "@oruga-ui/examples": "^0.12.0-pre.2", + "@oruga-ui/oruga-next": "^0.12.0-pre.2", "@tsconfig/node22": "^22.0.2", "@types/node": "^24.7.2", "@vitejs/plugin-vue": "6.0.1", diff --git a/src/assets/scss/components/_notification.scss b/src/assets/scss/components/_notification.scss index 869c2ea..ca103db 100644 --- a/src/assets/scss/components/_notification.scss +++ b/src/assets/scss/components/_notification.scss @@ -45,12 +45,12 @@ $notification-icon-margin-right: 0.5rem !default; .icon { margin-right: $notification-icon-margin-right; } + } - .notifictation-content { - padding-right: calc( - $notification-close-btn-position + $alert-padding-x - ); - } + .btn-close + .notifictation-wrapper { + padding-right: calc( + $notification-close-btn-position + $alert-padding-x + ); } } diff --git a/src/assets/scss/components/_pagination.scss b/src/assets/scss/components/_pagination.scss index 1e90c47..afe7a4d 100644 --- a/src/assets/scss/components/_pagination.scss +++ b/src/assets/scss/components/_pagination.scss @@ -42,24 +42,6 @@ $pagination-items-spacer: 0.5rem !default; // $pagination-border-radius-lg: var(--#{$prefix}border-radius-lg); /* @bootstrap docs */ -@mixin roundEdge { - .pagination { - li:first-child .page-link { - border-top-left-radius: $pagination-border-radius; - border-bottom-left-radius: $pagination-border-radius; - } - - li:last-child .page-link { - border-top-right-radius: $pagination-border-radius; - border-bottom-right-radius: $pagination-border-radius; - } - } -} -@mixin vertical-centered { - display: flex; - align-items: center; -} - .pagination-wrapper { @extend .pagination; @@ -69,13 +51,20 @@ $pagination-items-spacer: 0.5rem !default; display: flex; flex-direction: row; + .page-link { + border-radius: unset; + } + .pagination { order: 2; margin: 0; &-prev, - &-next { - @include vertical-centered; + &-next, + &-ellipsis, + &-info { + display: flex; + align-items: center; .icon { margin: unset; @@ -97,28 +86,37 @@ $pagination-items-spacer: 0.5rem !default; } &-ellipsis { - @include vertical-centered; height: 100%; margin-right: var(--#{$prefix}pagination-items-spacer); margin-left: var(--#{$prefix}pagination-items-spacer); } &-info { - @include vertical-centered; margin-right: var(--#{$prefix}pagination-items-spacer); } - - .page-link { - height: 100%; - } } &:not(.simple) { - &.order { - &-left { - @include roundEdge; + &.position { + &-left, + &-centered, + &-right { justify-content: space-between; + .pagination { + li:first-child .page-link { + border-top-left-radius: $pagination-border-radius; + border-bottom-left-radius: $pagination-border-radius; + } + + li:last-child .page-link { + border-top-right-radius: $pagination-border-radius; + border-bottom-right-radius: $pagination-border-radius; + } + } + } + + &-left { .pagination-prev { order: 2; } @@ -136,9 +134,6 @@ $pagination-items-spacer: 0.5rem !default; } &-centered { - @include roundEdge; - justify-content: space-between; - .pagination { margin-left: var(--#{$prefix}pagination-items-spacer); margin-right: var(--#{$prefix}pagination-items-spacer); @@ -146,9 +141,6 @@ $pagination-items-spacer: 0.5rem !default; } &-right { - @include roundEdge; - justify-content: space-between; - .pagination-next { order: 2; } diff --git a/src/assets/scss/components/_tabs.scss b/src/assets/scss/components/_tabs.scss index 24cfc97..774309c 100644 --- a/src/assets/scss/components/_tabs.scss +++ b/src/assets/scss/components/_tabs.scss @@ -113,6 +113,7 @@ $nav-underline-link-active-border-color: currentcolor !default; flex-direction: row; .nav { + flex-shrink: 0; margin-bottom: var(--#{$prefix}nav-tabs-spacer); .nav-item { @@ -154,6 +155,10 @@ $nav-underline-link-active-border-color: currentcolor !default; margin-left: var(--#{$prefix}nav-tabs-spacer); } } + + .tab-content { + flex-grow: 1; + } } &.expanded:not(.vertical) .nav { diff --git a/src/assets/scss/components/_upload.scss b/src/assets/scss/components/_upload.scss index 11e33ca..2659b4e 100644 --- a/src/assets/scss/components/_upload.scss +++ b/src/assets/scss/components/_upload.scss @@ -37,22 +37,26 @@ $upload-disabled-opacity: 0.5 !default; --#{$prefix}upload-draggable-padding: #{$upload-draggable-padding}; background: var(--#{$prefix}upload-draggable-bg); - border: var(--#{$prefix}upload-draggable-border-width) dashed - var(--#{$prefix}upload-draggable-border-color); + border-width: var(--#{$prefix}upload-draggable-border-width); + border-style: dashed; + border-color: var(--#{$prefix}upload-draggable-border-color); border-radius: var(--#{$prefix}upload-draggable-border-radius); padding: var(--#{$prefix}upload-draggable-padding); + &:hover, &.hovered { background-color: var(--#{$prefix}upload-draggable-bg-hover); border-color: var(--#{$prefix}upload-draggable-border-color-hover); } - // Color variant - @each $name, $color-light in $theme-colors { - &.variant-#{$name} { - background-color: var(--#{$prefix}#{$name}-bg-subtle); - border-color: var(--#{$prefix}#{$name}); - } + } + + // Color variant + @each $name, $color-light in $theme-colors { + &.variant-#{$name} .upload-draggable { + --#{$prefix}upload-draggable-bg-hover: var(--#{$prefix}#{$name}-bg-subtle); + --#{$prefix}upload-draggable-border-color-hover: var(--#{$prefix}#{$name}); + --#{$prefix}upload-draggable-border-color: var(--#{$prefix}#{$name}-bg-subtle); } } } diff --git a/src/plugins/theme.ts b/src/plugins/theme.ts index bc18813..d9561ac 100644 --- a/src/plugins/theme.ts +++ b/src/plugins/theme.ts @@ -1,11 +1,12 @@ -import type { OrugaOptions, ComponentProps } from "@oruga-ui/oruga-next"; +/* eslint-disable @typescript-eslint/no-explicit-any */ +import type { OrugaOptions } from "@oruga-ui/oruga-next"; const bootstrapConfig: OrugaOptions = { autocomplete: { override: true, rootClass: "autocomplete", itemEmptyClass: "disabled", - itemGroupTitleClass: "fw-bold", + itemGroupClass: "fw-bold", }, breadcrumb: { override: true, @@ -33,11 +34,11 @@ const bootstrapConfig: OrugaOptions = { else if (size == "large") return "btn-lg"; else return `btn-${size}`; }, - variantClass: (_: string, props: ComponentProps) => { - if (props.outlined) return ""; + variantClass: (_: string, props: Record) => { + if (props.outlined || props.inverted) return ""; return `btn-${props.variant}`; }, - outlinedClass: (_: string, props: ComponentProps) => { + outlinedClass: (_: string, props: Record) => { if (!props.variant) return "btn-outline"; return `btn-outline-${props.variant}`; }, @@ -138,7 +139,7 @@ const bootstrapConfig: OrugaOptions = { tableCellWithinSelectedClass: "selected-within", tableCellInvisibleClass: "", tableCellNearbyClass: "nearby", - tableCellEventsClass: (_: string, props: ComponentProps) => { + tableCellEventsClass: (_: string, props: Record) => { const classes = ["has-event"]; if (props.indicators) classes.push(`${props.indicators}`); return classes.join(" "); @@ -211,7 +212,7 @@ const bootstrapConfig: OrugaOptions = { expandedClass: "expanded", disabledClass: "disabled", roundedClass: "rounded-pill", - inputClass: (_: string, props: ComponentProps) => { + inputClass: (_: string, props: Record) => { const classes = ["form-control focus-ring"]; if (props.icon) classes.push("icon-left"); if (props.iconRight) classes.push("icon-right"); @@ -252,7 +253,7 @@ const bootstrapConfig: OrugaOptions = { rootClass: "modal fade", activeClass: "show", overlayClass: "modal-backdrop", - contentClass: (_: string, props: ComponentProps) => { + contentClass: (_: string, props: Record) => { const classes = ["modal-dialog"]; if (!props.fullScreen) classes.push("modal-dialog-centered"); return classes.join(" "); @@ -279,15 +280,15 @@ const bootstrapConfig: OrugaOptions = { pagination: { override: true, rootClass: "pagination-wrapper", - sizeClass: (_: string, props: ComponentProps) => { + sizeClass: (_: string, props: Record) => { if (props.size == "small") return "pagination-sm"; else if (props.size == "medium") return "pagination-md"; else if (props.size == "large") return "pagination-lg"; }, roundedClass: "rounded-pill", simpleClass: "simple", - orderClass: "order-", - listClass: (_: string, props: ComponentProps) => { + positionClass: "position-", + listClass: (_: string, props: Record) => { const classes = ["pagination"]; if (props.size == "small") classes.push("pagination-sm"); else if (props.size == "medium") classes.push("pagination-md"); @@ -298,7 +299,7 @@ const bootstrapConfig: OrugaOptions = { buttonClass: "page-link", buttonCurrentClass: "active", buttonDisabledClass: "disabled", - ellipsisClass: (_: string, props: ComponentProps) => { + ellipsisClass: (_: string, props: Record) => { const classes = ["pagination-ellipsis"]; if (props.rounded) classes.push("rounded-pill"); return classes.join(" "); @@ -327,7 +328,7 @@ const bootstrapConfig: OrugaOptions = { multipleClass: "multiple", placeholderClass: "empty", arrowedClass: "arrowed", - selectClass: (_: string, props: ComponentProps) => { + selectClass: (_: string, props: Record) => { const classes = ["form-select focus-ring"]; if (props.icon) classes.push("icon-left"); if (props.iconRight) classes.push("icon-right"); @@ -344,7 +345,7 @@ const bootstrapConfig: OrugaOptions = { rootClass: "sidebar", overlayClass: "offcanvas-backdrop", activeClass: "show", - positionClass: (_: string, props: ComponentProps) => { + positionClass: (_: string, props: Record) => { if (props.position === "left") return "offcanvas-start"; else if (props.position === "right") return "offcanvas-end"; else if (props.position === "top") return "offcanvas-top"; @@ -384,7 +385,7 @@ const bootstrapConfig: OrugaOptions = { fillClass: "slider-fill", thumbWrapperClass: "slider-thumb-wrapper", sizeClass: "size-", - thumbClass: (_: string, props: ComponentProps) => { + thumbClass: (_: string, props: Record) => { const classes = ["slider-thumb", "focus-ring"]; if (props.variant) classes.push(`variant-${props.variant}`); if (props.variant) classes.push(`focus-ring-${props.variant}`); @@ -398,7 +399,7 @@ const bootstrapConfig: OrugaOptions = { }, steps: { override: true, - rootClass: (_: string, props: ComponentProps) => { + rootClass: (_: string, props: Record) => { const classes = ["steps"]; if (props.variant) classes.push(`variant-${props.variant}`); if (props.disabled) classes.push("disabled"); @@ -434,7 +435,7 @@ const bootstrapConfig: OrugaOptions = { positionClass: (position: string) => { if (position == "left") return "reversed"; }, - inputClass: (_: string, props: ComponentProps) => { + inputClass: (_: string, props: Record) => { const classes = ["form-check-input"]; if (props.rounded) classes.push("rounded-pill"); return classes.join(" "); @@ -492,7 +493,7 @@ const bootstrapConfig: OrugaOptions = { multilineClass: "multiline", typeClass: "type-", sizeClass: "size-", - listClass: (_: string, props: ComponentProps) => { + listClass: (_: string, props: Record) => { const classes = ["nav"]; if (props.type) classes.push(`nav-${props.type}`); if (props.position === "left") @@ -522,12 +523,12 @@ const bootstrapConfig: OrugaOptions = { }, taginput: { override: true, - rootClass: (_: string, props: ComponentProps) => { + rootClass: (_: string, props: Record) => { const classes = ["taginput"]; if (props.disabled) classes.push("disabled"); return classes.join(" "); }, - containerClass: (_: string, props: ComponentProps) => { + containerClass: (_: string, props: Record) => { const classes = ["taginput-wrapper", "focus-ring"]; if (props.variant) classes.push(`focus-ring-${props.variant}`); return classes.join(" "); @@ -553,10 +554,10 @@ const bootstrapConfig: OrugaOptions = { override: true, rootClass: "upload", variantClass: "variant-", - draggableClass: "upload-draggable", expandedClass: "expanded", disabledClass: "disabled", - hoveredClass: "hovered", + draggableClass: "upload-draggable", + draggableHoveredClass: "hovered", }, };