Feat #1806: Presets for all components & components config structure …

…change (#1921)

* Feat #1806: Presets for all components

minor

minor tweaks

minor style

Minor demo

* Fix #1967: move componentsAll and Presets to components

* Fix VaConfig demo

packages/docs/src/locales/en/en.json

@@ -3268,7 +3268,7 @@
     },
     "components": {
       "title": "Components config",
-      "intro": "If you want to set global defaults for Vuestic components — we've got a config for that either!",
+      "intro": "If you want to set global defaults for Vuestic components or create presets — we have config for this as well!",
       "description": "Let’s say you want all of your buttons to be `outline` and `small` to match your design, but by default that's not the case:",
       "action": "To solve that problem edit to `main.js` file the following way:",
       "result": "Now all of your buttons by default will look like this:",

packages/nuxt-docs/locales/en.json

@@ -3140,9 +3140,9 @@
     },
     "components": {
       "title": "Components config",
-      "intro": "If you want to set global defaults for Vuestic components — we've got a config for that either!",
+      "intro": "If you want to set global defaults for Vuestic components or create presets — we have config for this as well!",
       "description": "Let’s say you want all of your buttons to be `outline` and `small` to match your design, but by default that's not the case:",
-      "action": "To solve that problem edit to `main.js` file the following way:",
+      "action": "To solve that problem edit `main.js` file the following way:",
       "result": "Now all of your buttons by default will look like this:",
       "example": "You can configure any prop for any Vuestic UI component in such a manner.",
       "more": "In case your customization runs deeper consider [overriding CSS variables](/styles/css-variables#overriding) or even directly the `.class`' properties (components use BEM-notation so it should be easy to figure out which selector to address with the help of standard dev-tooling)."
@@ -3812,4 +3812,4 @@
       }
     }
   }
-}
+}

packages/ui/src/components/va-accordion/VaAccordion.vue

@@ -8,13 +8,15 @@
 import { defineComponent, PropType } from 'vue'
 
 import { useStateful, useStatefulProps, useStatefulEmits } from '../../composables/useStateful'
+import { useComponentPresetProp } from '../../composables/useComponentPreset'
 import { useAccordion } from './hooks/useAccordion'
 
 export default defineComponent({
   name: 'VaAccordion',
   emits: useStatefulEmits,
   props: {
     ...useStatefulProps,
+    ...useComponentPresetProp,
     modelValue: { type: Array as PropType<boolean[]>, default: () => [] as boolean[] },
     multiply: { type: Boolean, default: false },
     inset: { type: Boolean, default: false },

packages/ui/src/components/va-affix/VaAffix.vue

@@ -21,6 +21,8 @@ import { defineComponent, computed, PropType, ref, nextTick, onMounted, onBefore
 import noop from 'lodash/noop.js'
 
 import { getWindow } from '../../utils/ssr-utils'
+import { useComponentPresetProp } from '../../composables/useComponentPreset'
+
 import {
   handleThrottledEvent,
   useEventsHandlerWithThrottle,
@@ -33,6 +35,7 @@ export default defineComponent({
   name: 'VaAffix',
   emits: ['change'],
   props: {
+    ...useComponentPresetProp,
     offsetTop: { type: Number, default: undefined },
     offsetBottom: { type: Number, default: undefined },
     target: { type: [Object, Function] as PropType<HTMLElement | Window | (() => HTMLElement | Window)>, default: getWindow },

packages/ui/src/components/va-alert/VaAlert.vue

@@ -83,6 +83,7 @@ import { defineComponent, computed, PropType } from 'vue'
 
 import { generateUniqueId } from '../../services/utils'
 import { useStateful, useStatefulProps, useStatefulEmits } from '../../composables/useStateful'
+import { useComponentPresetProp } from '../../composables/useComponentPreset'
 import { useAlertStyles } from './useAlertStyles'
 
 import { VaIcon } from '../va-icon'
@@ -93,6 +94,7 @@ export default defineComponent({
   emits: useStatefulEmits,
   props: {
     ...useStatefulProps,
+    ...useComponentPresetProp,
     modelValue: { type: Boolean, default: true },
     color: { type: String, default: 'primary' },
     textColor: { type: String, default: '' },

packages/ui/src/components/va-app-bar/VaAppBar.vue

@@ -15,10 +15,12 @@ import { defineComponent, PropType, computed, ref } from 'vue'
 import { setupScroll } from '../../composables/useScroll'
 import { getGradientBackground, getBoxShadowColor } from '../../services/color-config/color-functions'
 import { useColors } from '../../services/color-config/color-config'
+import { useComponentPresetProp } from '../../composables/useComponentPreset'
 
 export default defineComponent({
   name: 'VaAppBar',
   props: {
+    ...useComponentPresetProp,
     gradient: { type: Boolean, default: false },
     bottom: { type: Boolean, default: false },
     target: { type: [Object, String] as PropType<string | Element>, default: '' },

packages/ui/src/components/va-avatar/VaAvatar.vue

@@ -32,6 +32,7 @@ import { useColors } from '../../composables/useColor'
 import { useSize, useSizeProps } from '../../composables/useSize'
 import { useLoadingProps } from '../../composables/useLoading'
 import { useTextColor } from '../../composables/useTextColor'
+import { useComponentPresetProp } from '../../composables/useComponentPreset'
 
 import { VaIcon } from '../va-icon'
 import { VaProgressCircle } from '../va-progress-circle'
@@ -42,6 +43,7 @@ export default defineComponent({
   props: {
     ...useLoadingProps,
     ...useSizeProps,
+    ...useComponentPresetProp,
     color: { type: String, default: 'info' },
     textColor: { type: String, default: 'white' },
     square: { type: Boolean, default: false },

packages/ui/src/components/va-backtop/VaBacktop.vue

@@ -20,13 +20,14 @@
 
 <script lang="ts">
 import { defineComponent, PropType, ref, computed, onMounted, onBeforeUnmount } from 'vue'
-
+import { useComponentPresetProp } from '../../composables/useComponentPreset'
 import { VaButton } from '../va-button'
 
 export default defineComponent({
   name: 'VaBacktop',
   components: { VaButton },
   props: {
+    ...useComponentPresetProp,
     target: {
       type: [Object, String] as PropType<Element | string | undefined>,
       default: undefined,

packages/ui/src/components/va-badge/VaBadge.vue

@@ -23,11 +23,13 @@ import { defineComponent, computed, PropType } from 'vue'
 
 import { useColors } from '../../composables/useColor'
 import { useTextColor } from '../../composables/useTextColor'
+import { useComponentPresetProp } from '../../composables/useComponentPreset'
 import { generateUniqueId } from '../../services/utils'
 
 export default defineComponent({
   name: 'VaBadge',
   props: {
+    ...useComponentPresetProp,
     color: { type: String, default: 'danger' },
     textColor: { type: String },
     text: { type: [String, Number] as PropType<string | number>, default: '' },

packages/ui/src/components/va-breadcrumbs/VaBreadcrumbs.vue

@@ -3,12 +3,14 @@ import { computed, defineComponent, Fragment, h, ref, VNode } from 'vue'
 
 import { useAlign, useAlignProps } from '../../composables/useAlign'
 import { useColors } from '../../composables/useColor'
+import { useComponentPresetProp } from '../../composables/useComponentPreset'
 import { hasOwnProperty } from '../../services/utils'
 
 export default defineComponent({
   name: 'VaBreadcrumbs',
   props: {
     ...useAlignProps,
+    ...useComponentPresetProp,
     separator: { type: String, default: '/' },
     color: { type: String, default: 'gray' },
     activeColor: { type: String, default: null },

packages/ui/src/components/va-button-dropdown/VaButtonDropdown.vue

@@ -87,6 +87,7 @@ import pick from 'lodash/pick.js'
 import { useStatefulProps, useStateful } from '../../composables/useStateful'
 import { useEmitProxy } from '../../composables/useEmitProxy'
 import { Placement, placementsPositions } from '../../composables/usePopover'
+import { useComponentPresetProp } from '../../composables/useComponentPreset'
 
 import { VaDropdown, VaDropdownContent } from '../va-dropdown'
 import { VaButton } from '../va-button'
@@ -116,6 +117,8 @@ export default defineComponent({
 
   props: {
     ...useStatefulProps,
+    ...useComponentPresetProp,
+
     modelValue: { type: Boolean, default: false },
     stateful: { type: Boolean, default: true },
 

packages/ui/src/components/va-button-group/VaButtonGroup.vue

@@ -12,13 +12,15 @@ import { defineComponent, computed, PropType } from 'vue'
 import { getGradientBackground } from '../../services/color-config/color-functions'
 import { useColors } from '../../composables/useColor'
 import { useTextColor } from '../../composables/useTextColor'
+import { useComponentPresetProp } from '../../composables/useComponentPreset'
 
 import { VaConfig } from '../va-config'
 
 export default defineComponent({
   name: 'VaButtonGroup',
   components: { VaConfig },
   props: {
+    ...useComponentPresetProp,
     color: { type: String, default: 'primary' },
     gradient: { type: Boolean, default: undefined },
     textColor: { type: String, default: undefined },

packages/ui/src/components/va-button-toggle/VaButtonToggle.vue

@@ -30,6 +30,7 @@ import { defineComponent, PropType, computed } from 'vue'
 import { shiftHSLAColor } from '../../services/color-config/color-functions'
 import { useColors } from '../../composables/useColor'
 import { useTextColor } from '../../composables/useTextColor'
+import { useComponentPresetProp } from '../../composables/useComponentPreset'
 
 import { ButtonOption } from './types'
 
@@ -44,6 +45,7 @@ export default defineComponent({
   },
   emits: ['update:modelValue'],
   props: {
+    ...useComponentPresetProp,
     options: {
       type: Array as PropType<ButtonOption[]>,
       required: true,

packages/ui/src/components/va-button/VaButton.vue

@@ -61,6 +61,7 @@ import { useColors } from '../../composables/useColor'
 import { useRouterLink, useRouterLinkProps } from '../../composables/useRouterLink'
 import { useSizeProps, useSize } from '../../composables/useSize'
 import { useLoadingProps } from '../../composables/useLoading'
+import { useComponentPresetProp } from '../../composables/useComponentPreset'
 
 import { VaIcon } from '../va-icon'
 import { VaProgressCircle } from '../va-progress-circle'
@@ -72,6 +73,7 @@ export default defineComponent({
     ...useSizeProps,
     ...useLoadingProps,
     ...useRouterLinkProps,
+    ...useComponentPresetProp,
     color: { type: String, default: 'primary' },
     textColor: { type: String, default: undefined },
     tag: { type: String, default: 'button' },

packages/ui/src/components/va-card/VaCard.vue

@@ -26,12 +26,14 @@ import { getGradientBackground } from '../../services/color-config/color-functio
 import { useColors } from '../../composables/useColor'
 import { useRouterLink, useRouterLinkProps } from '../../composables/useRouterLink'
 import { useTextColor } from '../../composables/useTextColor'
+import { useComponentPresetProp } from '../../composables/useComponentPreset'
 
 export default defineComponent({
   name: 'VaCard',
   emits: ['click'],
   props: {
     ...useRouterLinkProps,
+    ...useComponentPresetProp,
     tag: { type: String, default: 'div' },
     square: { type: Boolean, default: false },
     outlined: { type: Boolean, default: false },

packages/ui/src/components/va-card/VaCardActions.vue

@@ -10,11 +10,13 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 import { useAlignProps, useAlign } from '../../composables/useAlign'
+import { useComponentPresetProp } from '../../composables/useComponentPreset'
 
 export default defineComponent({
   name: 'VaCardActions',
   props: {
     ...useAlignProps,
+    ...useComponentPresetProp,
   },
   setup (props) {
     const { alignComputed } = useAlign(props)

packages/ui/src/components/va-card/VaCardTitle.vue

@@ -11,10 +11,12 @@
 import { defineComponent, computed } from 'vue'
 
 import { useColors } from '../../composables/useColor'
+import { useComponentPresetProp } from '../../composables/useComponentPreset'
 
 export default defineComponent({
   name: 'VaCardTitle',
   props: {
+    ...useComponentPresetProp,
     textColor: { type: String },
   },
   setup (props) {

packages/ui/src/components/va-carousel/VaCarousel.vue

@@ -98,6 +98,7 @@ import { useCarousel } from './hooks/useCarousel'
 import { useCarouselAnimation } from './hooks/useCarouselAnimation'
 import { useCarouselColor } from './hooks/useCarouselColors'
 import { useStateful, useStatefulProps, useStatefulEmits } from '../../composables/useStateful'
+import { useComponentPresetProp } from '../../composables/useComponentPreset'
 import { VaImage } from '../va-image'
 import { VaButton } from '../va-button'
 import { VaHover } from '../va-hover'
@@ -109,6 +110,7 @@ export default defineComponent({
 
   props: {
     ...useStatefulProps,
+    ...useComponentPresetProp,
 
     modelValue: { type: Number, default: 0 },
     items: { type: Array as PropType<any[]>, required: true },

packages/ui/src/components/va-checkbox/VaCheckbox.vue

@@ -65,6 +65,7 @@ import useKeyboardOnlyFocus from '../../composables/useKeyboardOnlyFocus'
 import { useColors } from '../../composables/useColor'
 import { useSelectable, useSelectableProps, useSelectableEmits, Elements } from '../../composables/useSelectable'
 import { useTextColor } from '../../composables/useTextColor'
+import { useComponentPresetProp } from '../../composables/useComponentPreset'
 
 import { VaMessageListWrapper } from '../va-input'
 import { VaIcon } from '../va-icon/'
@@ -77,6 +78,7 @@ export default defineComponent({
   emits: useSelectableEmits,
   props: {
     ...useSelectableProps,
+    ...useComponentPresetProp,
     modelValue: { type: VaCheckboxValueType, default: false },
     color: { type: String, default: 'primary' },
     checkedIcon: { type: String, default: 'check' },

packages/ui/src/components/va-chip/VaChip.vue

@@ -56,6 +56,7 @@ import { useColors, useColorProps } from '../../composables/useColor'
 import { useStateful, useStatefulEmits, useStatefulProps } from '../../composables/useStateful'
 import { useHover } from '../../composables/useHover'
 import { useTextColor } from '../../composables/useTextColor'
+import { useComponentPresetProp } from '../../composables/useComponentPreset'
 
 import { VaIcon } from '../va-icon'
 
@@ -70,6 +71,7 @@ export default defineComponent({
     ...useRouterLinkProps,
     ...useColorProps,
     ...useStatefulProps,
+    ...useComponentPresetProp,
     modelValue: { type: Boolean, default: true },
     closeable: { type: Boolean, default: false },
     outline: { type: Boolean, default: false },

packages/ui/src/components/va-collapse/VaCollapse.vue

@@ -64,6 +64,7 @@ import { useColors } from '../../composables/useColor'
 import { useSyncProp } from '../../composables/useSyncProp'
 import { useTextColor } from '../../composables/useTextColor'
 import { useAccordionItem } from '../va-accordion/hooks/useAccordion'
+import { useComponentPresetProp } from '../../composables/useComponentPreset'
 
 import { VaIcon } from '../va-icon'
 
@@ -73,6 +74,7 @@ export default defineComponent({
     VaIcon,
   },
   props: {
+    ...useComponentPresetProp,
     modelValue: { type: Boolean, default: undefined },
     disabled: { type: Boolean, default: false },
     header: { type: String, default: '' },

packages/ui/src/components/va-color-indicator/VaColorIndicator.vue

@@ -18,13 +18,15 @@
 import { defineComponent, computed } from 'vue'
 
 import { useColors } from '../../composables/useColor'
+import { useComponentPresetProp } from '../../composables/useComponentPreset'
 import { useStateful, useStatefulProps, useStatefulEmits } from '../../composables/useStateful'
 
 export default defineComponent({
   name: 'VaColorIndicator',
   emits: useStatefulEmits,
   props: {
     ...useStatefulProps,
+    ...useComponentPresetProp,
     modelValue: { type: Boolean, default: null },
     color: { type: String, default: '' },
     square: { type: Boolean, default: false },

packages/ui/src/components/va-color-input/VaColorInput.vue

@@ -33,6 +33,7 @@
 import { defineComponent, PropType, shallowRef, computed } from 'vue'
 
 import { useStateful, useStatefulProps, useStatefulEmits } from '../../composables/useStateful'
+import { useComponentPresetProp } from '../../composables/useComponentPreset'
 
 import { VaColorIndicator } from '../va-color-indicator'
 import { VaInput } from '../va-input'
@@ -46,6 +47,7 @@ export default defineComponent({
   emits: useStatefulEmits,
   props: {
     ...useStatefulProps,
+    ...useComponentPresetProp,
     modelValue: { type: String, default: null },
     disabled: { type: Boolean, default: false },
     indicator: {

packages/ui/src/components/va-color-palette/VaColorPalette.vue

@@ -25,6 +25,7 @@
 import { defineComponent, PropType } from 'vue'
 
 import { useStatefulProps, useStateful, useStatefulEmits } from '../../composables/useStateful'
+import { useComponentPresetProp } from '../../composables/useComponentPreset'
 
 import { VaColorIndicator } from '../va-color-indicator'
 
@@ -34,6 +35,7 @@ export default defineComponent({
   emits: useStatefulEmits,
   props: {
     ...useStatefulProps,
+    ...useComponentPresetProp,
     modelValue: { type: String, default: null },
     palette: { type: Array as PropType<string[]>, default: () => [] },
     indicator: {