Skip to content

Commit

Permalink
update(types): remove useClassProps composable (#695)
Browse files Browse the repository at this point in the history 
* update(types): add type ComponentClass

* refactor(components): remove useClassProps composable
  • Loading branch information
@mlmoravek
mlmoravek authored Dec 21, 2023
1 parent fb191a8 commit e98fd0d
Show file tree
Hide file tree
Showing 50 changed files with 1,787 additions and 655 deletions.
49 changes: 34 additions & 15 deletions packages/oruga-next/src/components/autocomplete/Autocomplete.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,18 +18,18 @@ import ODropdownItem from "../dropdown/DropdownItem.vue";
import { baseComponentProps } from "@/utils/SharedProps";
import { getOption } from "@/utils/config";
import { getValueByPath } from "@/utils/helpers";
import { isClient } from "@/utils/ssr";
import { unrefElement } from "@/utils/unrefElement";
import {
useComputedClass,
useClassProps,
useVModelBinding,
useInputHandler,
useDebounce,
useEventListener,
} from "@/composables";
import { getValueByPath } from "@/utils/helpers";
import type { DynamicComponent, PropBind } from "@/types";
import { isClient } from "@/utils/ssr";
import { unrefElement } from "@/utils/unrefElement";
import type { ComponentClass, DynamicComponent, PropBind } from "@/types";
/**
* Extended input that provide suggestions while the user types
Expand Down Expand Up @@ -217,16 +217,35 @@ const props = defineProps({
type: [Boolean, String, Object],
default: () => getOption("autocomplete.teleport", false),
},
// add class props (will not be displayed in the docs)
...useClassProps([
"rootClass",
"itemClass",
"itemHoverClass",
"itemGroupTitleClass",
"itemEmptyClass",
"itemHeaderClass",
"itemFooterClass",
]),
// class props (will not be displayed in the docs)
rootClass: {
type: [String, Array, Function] as PropType<ComponentClass>,
default: undefined,
},
itemClass: {
type: [String, Array, Function] as PropType<ComponentClass>,
default: undefined,
},
itemHoverClass: {
type: [String, Array, Function] as PropType<ComponentClass>,
default: undefined,
},
itemGroupTitleClass: {
type: [String, Array, Function] as PropType<ComponentClass>,
default: undefined,
},
itemEmptyClass: {
type: [String, Array, Function] as PropType<ComponentClass>,
default: undefined,
},
itemHeaderClass: {
type: [String, Array, Function] as PropType<ComponentClass>,
default: undefined,
},
itemFooterClass: {
type: [String, Array, Function] as PropType<ComponentClass>,
default: undefined,
},
/**
* Classes to apply on internal input component
* @ignore
Expand Down
78 changes: 60 additions & 18 deletions packages/oruga-next/src/components/button/Button.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,9 @@ import OIcon from "../icon/Icon.vue";
import { baseComponentProps } from "@/utils/SharedProps";
import { getOption } from "@/utils/config";
import { useComputedClass, useClassProps } from "@/composables";
import { useComputedClass } from "@/composables";
import type { ComponentClass } from "@/types";
/**
* The classic button, in different colors, sizes, and states
Expand Down Expand Up @@ -92,23 +94,63 @@ const props = defineProps({
* @ignore
*/
iconBoth: { type: Boolean, default: false },
// add class props (will not be displayed in the docs)
...useClassProps([
"rootClass",
"wrapperClass",
"outlinedClass",
"loadingClass",
"invertedClass",
"expandedClass",
"roundedClass",
"disabledClass",
"iconClass",
"iconLeftClass",
"iconRightClass",
"labelClass",
"sizeClass",
"variantClass",
]),
// class props (will not be displayed in the docs)
rootClass: {
type: [String, Array, Function] as PropType<ComponentClass>,
default: undefined,
},
wrapperClass: {
type: [String, Array, Function] as PropType<ComponentClass>,
default: undefined,
},
outlinedClass: {
type: [String, Array, Function] as PropType<ComponentClass>,
default: undefined,
},
loadingClass: {
type: [String, Array, Function] as PropType<ComponentClass>,
default: undefined,
},
invertedClass: {
type: [String, Array, Function] as PropType<ComponentClass>,
default: undefined,
},
expandedClass: {
type: [String, Array, Function] as PropType<ComponentClass>,
default: undefined,
},
roundedClass: {
type: [String, Array, Function] as PropType<ComponentClass>,
default: undefined,
},
disabledClass: {
type: [String, Array, Function] as PropType<ComponentClass>,
default: undefined,
},
iconClass: {
type: [String, Array, Function] as PropType<ComponentClass>,
default: undefined,
},
iconLeftClass: {
type: [String, Array, Function] as PropType<ComponentClass>,
default: undefined,
},
iconRightClass: {
type: [String, Array, Function] as PropType<ComponentClass>,
default: undefined,
},
labelClass: {
type: [String, Array, Function] as PropType<ComponentClass>,
default: undefined,
},
sizeClass: {
type: [String, Array, Function] as PropType<ComponentClass>,
default: undefined,
},
variantClass: {
type: [String, Array, Function] as PropType<ComponentClass>,
default: undefined,
},
});
const computedTag = computed(() =>
Expand Down
84 changes: 64 additions & 20 deletions packages/oruga-next/src/components/carousel/Carousel.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,15 +16,15 @@ import OIcon from "../icon/Icon.vue";
import { baseComponentProps } from "@/utils/SharedProps";
import { getOption } from "@/utils/config";
import { sign, mod, bound, isDefined } from "@/utils/helpers";
import { isClient } from "@/utils/ssr";
import {
useComputedClass,
useClassProps,
useVModelBinding,
useEventListener,
useProviderParent,
} from "@/composables";
import type { PropBind } from "@/types";
import { isClient } from "@/utils/ssr";
import type { ComponentClass, PropBind } from "@/types";
/**
* A Slideshow for cycling images in confined spaces
Expand Down Expand Up @@ -132,23 +132,67 @@ const props = defineProps({
type: Object as PropType<Record<number, any>>,
default: () => ({}),
},
...useClassProps([
"rootClass",
"overlayClass",
"wrapperClass",
"itemsClass",
"itemsDraggingClass",
"arrowIconClass",
"arrowIconPrevClass",
"arrowIconNextClass",
"indicatorClass",
"indicatorsClass",
"indicatorsInsideClass",
"indicatorsInsidePositionClass",
"indicatorItemClass",
"indicatorItemActiveClass",
"indicatorItemStyleClass",
]),
// class props (will not be displayed in the docs)
rootClass: {
type: [String, Array, Function] as PropType<ComponentClass>,
default: undefined,
},
overlayClass: {
type: [String, Array, Function] as PropType<ComponentClass>,
default: undefined,
},
wrapperClass: {
type: [String, Array, Function] as PropType<ComponentClass>,
default: undefined,
},
itemsClass: {
type: [String, Array, Function] as PropType<ComponentClass>,
default: undefined,
},
itemsDraggingClass: {
type: [String, Array, Function] as PropType<ComponentClass>,
default: undefined,
},
arrowIconClass: {
type: [String, Array, Function] as PropType<ComponentClass>,
default: undefined,
},
arrowIconPrevClass: {
type: [String, Array, Function] as PropType<ComponentClass>,
default: undefined,
},
arrowIconNextClass: {
type: [String, Array, Function] as PropType<ComponentClass>,
default: undefined,
},
indicatorClass: {
type: [String, Array, Function] as PropType<ComponentClass>,
default: undefined,
},
indicatorsClass: {
type: [String, Array, Function] as PropType<ComponentClass>,
default: undefined,
},
indicatorsInsideClass: {
type: [String, Array, Function] as PropType<ComponentClass>,
default: undefined,
},
indicatorsInsidePositionClass: {
type: [String, Array, Function] as PropType<ComponentClass>,
default: undefined,
},
indicatorItemClass: {
type: [String, Array, Function] as PropType<ComponentClass>,
default: undefined,
},
indicatorItemActiveClass: {
type: [String, Array, Function] as PropType<ComponentClass>,
default: undefined,
},
indicatorItemStyleClass: {
type: [String, Array, Function] as PropType<ComponentClass>,
default: undefined,
},
});
const emits = defineEmits<{
Expand Down
25 changes: 17 additions & 8 deletions packages/oruga-next/src/components/carousel/CarouselItem.vue
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,10 @@
<script setup lang="ts">
import { computed, type Ref } from "vue";
import { computed, type PropType, type Ref } from "vue";
import { baseComponentProps } from "@/utils/SharedProps";
import {
useComputedClass,
useClassProps,
useProviderChild,
} from "@/composables";
import { useComputedClass, useProviderChild } from "@/composables";
import type { ComponentClass } from "@/types";
/**
* A Slideshow item used by the carousel
Expand All @@ -23,8 +21,19 @@ const props = defineProps({
...baseComponentProps,
/** Make item clickable */
clickable: { type: Boolean, default: false },
// add class props (will not be displayed in the docs)
...useClassProps(["itemClass", "itemActiveClass", "itemClickableClass"]),
// class props (will not be displayed in the docs)
itemClass: {
type: [String, Array, Function] as PropType<ComponentClass>,
default: undefined,
},
itemActiveClass: {
type: [String, Array, Function] as PropType<ComponentClass>,
default: undefined,
},
itemClickableClass: {
type: [String, Array, Function] as PropType<ComponentClass>,
default: undefined,
},
});
// Inject functionalities and data from the parent carousel component
Expand Down
54 changes: 40 additions & 14 deletions packages/oruga-next/src/components/checkbox/Checkbox.vue
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,18 @@
<script setup lang="ts">
import { computed, ref } from "vue";
import { computed, ref, type PropType } from "vue";
import { baseComponentProps } from "@/utils/SharedProps";
import { getOption } from "@/utils/config";
import { uuid } from "@/utils/helpers";
import {
useComputedClass,
useClassProps,
usePropBinding,
useVModelBinding,
useInputHandler,
} from "@/composables";
import type { ComponentClass } from "@/types";
/**
* Select a single or grouped options
* @displayName Checkbox
Expand Down Expand Up @@ -73,18 +74,43 @@ const props = defineProps({
type: Boolean,
default: () => getOption("useHtml5Validation", true),
},
// add class props (will not be displayed in the docs)
...useClassProps([
"rootClass",
"disabledClass",
"checkedClass",
"inputClass",
"inputCheckedClass",
"indeterminateClass",
"labelClass",
"sizeClass",
"variantClass",
]),
// class props (will not be displayed in the docs)
rootClass: {
type: [String, Array, Function] as PropType<ComponentClass>,
default: undefined,
},
disabledClass: {
type: [String, Array, Function] as PropType<ComponentClass>,
default: undefined,
},
checkedClass: {
type: [String, Array, Function] as PropType<ComponentClass>,
default: undefined,
},
inputClass: {
type: [String, Array, Function] as PropType<ComponentClass>,
default: undefined,
},
inputCheckedClass: {
type: [String, Array, Function] as PropType<ComponentClass>,
default: undefined,
},
indeterminateClass: {
type: [String, Array, Function] as PropType<ComponentClass>,
default: undefined,
},
labelClass: {
type: [String, Array, Function] as PropType<ComponentClass>,
default: undefined,
},
sizeClass: {
type: [String, Array, Function] as PropType<ComponentClass>,
default: undefined,
},
variantClass: {
type: [String, Array, Function] as PropType<ComponentClass>,
default: undefined,
},
});
const emits = defineEmits<{
Expand Down
Loading

0 comments on commit e98fd0d

Please sign in to comment.