From ab87d5659bb0190da748c7e1ec7eb5ab84ab8bc2 Mon Sep 17 00:00:00 2001 From: mmoravek Date: Mon, 16 Sep 2024 14:15:16 +0200 Subject: [PATCH 1/2] feat(sidebar): remove `variant` prop | improve props --- packages/docs/components/Sidebar.md | 47 +++++++++-------- .../oruga/src/components/sidebar/Sidebar.vue | 51 ++++++++----------- packages/oruga/src/components/types.ts | 8 +-- 3 files changed, 47 insertions(+), 59 deletions(-) diff --git a/packages/docs/components/Sidebar.md b/packages/docs/components/Sidebar.md index 581f4fad9..b22c9be44 100644 --- a/packages/docs/components/Sidebar.md +++ b/packages/docs/components/Sidebar.md @@ -33,30 +33,29 @@ ### Props -| Prop name | Description | Type | Values | Default | -| ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------- | ------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| active | Whether siedbar is active or not, use v-model:active to make it two-way binding | boolean | - | false | -| animation | Custom animation (transition name) | string | - |
From config:
sidebar: {
  animation: undefined
} | -| cancelable | Is Sidebar cancleable by pressing escape or clicking outside. | boolean \| string[] | `escape`, `outside`, `true`, `false` |
From config:
sidebar: {
  cancelable: ["escape","outside"]
} | -| component | Component to be injected, used to open a component sidebar programmatically.
Close sidebar within the component by emitting a 'close' event — emits('close') | any | - | | -| container | DOM element where the sidebar component will be created on (for programmatic usage). | string \| HTMLElement | - |
From config:
sidebar: {
  container: "body"
} | -| destroyOnHide | Destroy sidebar on hide | boolean | - |
From config:
sidebar: {
  destroyOnHide: false
} | -| events | Events to be binded to the injected component. | Record<string, any> | - | {} | -| expandOnHover | Expand sidebar on hover when reduced or mobile is reduce | boolean | - |
From config:
sidebar: {
  expandOnHover: false
} | -| fullheight | Show sidebar in fullheight | boolean | - |
From config:
sidebar: {
  fullheight: false
} | -| fullwidth | Show sidebar in fullwidth | boolean | - |
From config:
sidebar: {
  fullwidth: false
} | -| inline | Display the Sidebear inline | boolean | - | false | -| mobile | Custom layout on mobile | string | `fullwidth`, `reduced`, `hidden` |
From config:
sidebar: {
  mobile: undefined
} | -| mobileBreakpoint | Mobile breakpoint as `max-width` value | string | - |
From config:
sidebar: {
  mobileBreakpoint: undefined
} | -| onClose | Callback function to call on close (programmatically close or user canceled) | () => void | - | Default function (see source code) | -| overlay | Show an overlay like modal | boolean | - |
From config:
sidebar: {
  overlay: false
} | -| override | Override existing theme classes completely | boolean | - | | -| position | Sidebar position | "top" \| "bottom" \| "left" \| "right" | `top`, `right`, `bottom`, `left` |
From config:
sidebar: {
  position: "left"
} | -| props | Props to be binded to the injected component. | Record<string, any> | - | | -| reduce | Show a small sidebar | boolean | - |
From config:
sidebar: {
  reduce: false
} | -| scroll | Use `clip` to remove the body scrollbar, `keep` to have a non scrollable scrollbar to avoid shifting background,
but will set body to position fixed, might break some layouts. | string | `keep`, `clip` |
From config:
sidebar: {
  scroll: "clip"
} | -| teleport | Append the component to another part of the DOM.
Set `true` to append the component to the body.
In addition, any CSS selector string or an actual DOM node can be used. | string \| boolean \| Record<string, any> | - |
From config:
sidebar: {
  teleport: false
} | -| variant | Color of the sidebar | string | `primary`, `info`, `success`, `warning`, `danger`, `and any other custom color` |
From config:
sidebar: {
  variant: undefined
} | +| Prop name | Description | Type | Values | Default | +| ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------- | ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| active | Whether siedbar is active or not, use v-model:active to make it two-way binding | boolean | - | false | +| animation | Custom animation (transition name) | string | - |
From config:
sidebar: {
  animation: undefined
} | +| cancelable | Is Sidebar cancleable by pressing escape or clicking outside. | boolean \| string[] | `escape`, `outside`, `true`, `false` |
From config:
sidebar: {
  cancelable: ["escape","outside"]
} | +| component | Component to be injected, used to open a component sidebar programmatically.
Close sidebar within the component by emitting a 'close' event — emits('close') | any | - | | +| container | DOM element where the sidebar component will be created on (for programmatic usage). | string \| HTMLElement | - |
From config:
sidebar: {
  container: "body"
} | +| destroyOnHide | Destroy sidebar on hide | boolean | - |
From config:
sidebar: {
  destroyOnHide: false
} | +| events | Events to be binded to the injected component. | Record<string, any> | - | {} | +| expandOnHover | Expand sidebar on hover when reduced or mobile is reduce | boolean | - |
From config:
sidebar: {
  expandOnHover: false
} | +| fullheight | Show sidebar in fullheight | boolean | - |
From config:
sidebar: {
  fullheight: false
} | +| fullwidth | Show sidebar in fullwidth | boolean | - |
From config:
sidebar: {
  fullwidth: false
} | +| inline | Display the Sidebear inline | boolean | - | false | +| mobile | Custom layout on mobile | "fullwidth" \| "reduced" \| "hidden" | `fullwidth`, `reduced`, `hidden` |
From config:
sidebar: {
  mobile: undefined
} | +| mobileBreakpoint | Mobile breakpoint as `max-width` value | string | - |
From config:
sidebar: {
  mobileBreakpoint: undefined
} | +| onClose | Callback function to call on close (programmatically close or user canceled) | () => void | - | Default function (see source code) | +| overlay | Show an overlay like modal | boolean | - |
From config:
sidebar: {
  overlay: false
} | +| override | Override existing theme classes completely | boolean | - | | +| position | Sidebar position | "top" \| "bottom" \| "left" \| "right" | `top`, `right`, `bottom`, `left` |
From config:
sidebar: {
  position: "left"
} | +| props | Props to be binded to the injected component. | Record<string, any> | - | | +| reduce | Show a small sidebar | boolean | - |
From config:
sidebar: {
  reduce: false
} | +| scroll | Use `clip` to remove the body scrollbar, `keep` to have a non scrollable scrollbar to avoid shifting background,
but will set body to position fixed, might break some layouts. | "keep" \| "clip" | `keep`, `clip` |
From config:
sidebar: {
  scroll: "clip"
} | +| teleport | Append the component to another part of the DOM.
Set `true` to append the component to the body.
In addition, any CSS selector string or an actual DOM node can be used. | string \| boolean \| Record<string, any> | - |
From config:
sidebar: {
  teleport: false
} | ### Events diff --git a/packages/oruga/src/components/sidebar/Sidebar.vue b/packages/oruga/src/components/sidebar/Sidebar.vue index fd4c86ee9..eaf7ad741 100644 --- a/packages/oruga/src/components/sidebar/Sidebar.vue +++ b/packages/oruga/src/components/sidebar/Sidebar.vue @@ -39,16 +39,12 @@ const props = defineProps({ override: { type: Boolean, default: undefined }, /** Whether siedbar is active or not, use v-model:active to make it two-way binding */ active: { type: Boolean, default: false }, - /** - * Color of the sidebar - * @values primary, info, success, warning, danger, and any other custom color - */ - variant: { - type: String, - default: () => getOption("sidebar.variant"), - }, + /** Show an overlay like modal */ - overlay: { type: Boolean, default: getOption("sidebar.overlay", false) }, + overlay: { + type: Boolean, + default: () => getOption("sidebar.overlay", false), + }, /** Display the Sidebear inline */ inline: { type: Boolean, default: false }, /** @@ -58,33 +54,38 @@ const props = defineProps({ position: { type: String as PropType<"top" | "right" | "bottom" | "left">, default: () => getOption("sidebar.position", "left"), + validator: (value: string) => + ["top", "right", "bottom", "left"].indexOf(value) >= 0, }, /** Show sidebar in fullheight */ fullheight: { type: Boolean, - default: getOption("sidebar.fullheight", false), + default: () => getOption("sidebar.fullheight", false), }, /** Show sidebar in fullwidth */ fullwidth: { type: Boolean, - default: getOption("sidebar.fullwidth", false), + default: () => getOption("sidebar.fullwidth", false), }, /** Show a small sidebar */ - reduce: { type: Boolean, default: getOption("sidebar.reduce", false) }, + reduce: { + type: Boolean, + default: () => getOption("sidebar.reduce", false), + }, /** * Custom layout on mobile * @values fullwidth, reduced, hidden */ mobile: { - type: String, - default: getOption("sidebar.mobile"), + type: String as PropType<"fullwidth" | "reduced" | "hidden">, + default: () => getOption("sidebar.mobile"), validator: (value: string) => ["fullwidth", "reduced", "hidden"].indexOf(value) >= 0, }, /** Expand sidebar on hover when reduced or mobile is reduce */ expandOnHover: { type: Boolean, - default: getOption("sidebar.expandOnHover", false), + default: () => getOption("sidebar.expandOnHover", false), }, /** Custom animation (transition name) */ animation: { @@ -100,14 +101,17 @@ const props = defineProps({ default: () => getOption("sidebar.cancelable", ["escape", "outside"]), }, /** Callback function to call on close (programmatically close or user canceled) */ - onClose: { type: Function as PropType<() => void>, default: () => {} }, + onClose: { + type: Function as PropType<() => void>, + default: () => {}, + }, /** * Use `clip` to remove the body scrollbar, `keep` to have a non scrollable scrollbar to avoid shifting background, * but will set body to position fixed, might break some layouts. * @values keep, clip */ scroll: { - type: String, + type: String as PropType<"clip" | "keep">, default: () => getOption("sidebar.scroll", "clip"), validator: (value: string) => ["clip", "keep"].indexOf(value) >= 0, }, @@ -216,11 +220,6 @@ const props = defineProps({ type: [String, Array, Function] as PropType, default: undefined, }, - /** Class of the sidebar variant */ - variantClass: { - type: [String, Array, Function] as PropType, - default: undefined, - }, /** Class of sidebar component when on mobile */ mobileClass: { type: [String, Array, Function] as PropType, @@ -410,7 +409,7 @@ function beforeLeave(): void { const rootClasses = defineClasses( ["rootClass", "o-side"], - ["mobileClass", "o-side--mobile", null, isMobile], + ["mobileClass", "o-side--mobile", computed(() => props.mobile), isMobile], ["activeClass", "o-side--active", null, isActive], [ "teleportClass", @@ -425,12 +424,6 @@ const overlayClasses = defineClasses(["overlayClass", "o-side__overlay"]); const contentClasses = defineClasses( ["contentClass", "o-side__content"], - [ - "variantClass", - "o-side__content--", - computed(() => props.variant), - computed(() => !!props.variant), - ], [ "positionClass", "o-side__content--", diff --git a/packages/oruga/src/components/types.ts b/packages/oruga/src/components/types.ts index a67dedb36..078927e42 100644 --- a/packages/oruga/src/components/types.ts +++ b/packages/oruga/src/components/types.ts @@ -918,8 +918,6 @@ In addition, any CSS selector string or an actual DOM node can be used. */ overlayClass: ClassDefinition; /** Class of the sidebar position */ positionClass: ClassDefinition; - /** Class of the sidebar variant */ - variantClass: ClassDefinition; /** Class of the sidebar when expanded on hover */ expandOnHoverClass: ClassDefinition; /** Class of the sidebar when is fullheight */ @@ -930,12 +928,10 @@ In addition, any CSS selector string or an actual DOM node can be used. */ inlineClass: ClassDefinition; /** Class of the sidebar when reduced */ reduceClass: ClassDefinition; - /** Color of the sidebar */ - variant: string; /** Custom animation (transition name) */ animation: string; /** Custom layout on mobile */ - mobile: string; + mobile: "fullwidth" | "reduced" | "hidden"; /** Destroy sidebar on hide */ destroyOnHide: boolean; /** DOM element where the sidebar component will be created on (for programmatic usage). */ @@ -958,7 +954,7 @@ In addition, any CSS selector string or an actual DOM node can be used. */ position: "top" | "bottom" | "left" | "right"; /** Use `clip` to remove the body scrollbar, `keep` to have a non scrollable scrollbar to avoid shifting background, but will set body to position fixed, might break some layouts. */ - scroll: string; + scroll: "keep" | "clip"; }>; skeleton?: ComponentConfigBase & Partial<{ From fc5fa752f52a302364ca47558d929b4d0383e4f6 Mon Sep 17 00:00:00 2001 From: mlmoravek Date: Tue, 17 Sep 2024 13:39:06 +0200 Subject: [PATCH 2/2] fix: solve type issue --- packages/oruga/src/components/sidebar/examples/inline.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/oruga/src/components/sidebar/examples/inline.vue b/packages/oruga/src/components/sidebar/examples/inline.vue index 660bbac11..2b1c3f0c8 100644 --- a/packages/oruga/src/components/sidebar/examples/inline.vue +++ b/packages/oruga/src/components/sidebar/examples/inline.vue @@ -1,8 +1,8 @@