chore: refactor composables (#4391)

* chore: remove unused and duplicated composables

* chore: move some composables to std

* chore: update useChildComponents

* fix: broken story

* chore: remove useFocus

* feat: create useFormControl

* fix: useClientOnly

* chore: remove useSyncProp

* chore: move useFocusable composable to std

* chore: move useFocusOutside to std

* chore: remove useCSSVariables composable

* chore: remove useless composables and create useLoadableControl composable

* chore: move useStrictInject to utils

* chore: remove useClearable

* chore: remove useHTMLElement and useElementRef composables

* chore: simplify useBem

* chore: remove useTextColor composable

* chore: remove useHover

* chore: remove useDropdownable

* chore: make useElementFocusedKeyboard

* chore: remove useLongPressKey

* chore: remove useAlign

* chore: remove useDebounce

* chore: refactor useThrottle

* chore: refactor usePressed

* chore: move useMaxSelection to VaSelect

* chore: remove useScroll composable

* chore: remove useTimer composable

* fix(useFixedBar): correctly handle selector on mounted

* fix(VaSkeleton): do not convert classes  over ref keys

* fix(VaTimePicker): use correctly ref from useBem

* feat: change type of numeric prop

* chore: remove useParsableMeasure

* fix: improve useZIndex

* raw: useOptionsControl

* fix(build): correct imports and types

packages/docs/components/HeaderBanner.vue

@@ -117,6 +117,7 @@ const props = defineProps({
   },
 })
 
+// @ts-ignore
 import packageUi from 'vuestic-ui/package.json'
 
 const uiVersion = packageUi.version

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

@@ -21,8 +21,7 @@ import { computed, PropType, ref, nextTick, onMounted, onBeforeUnmount, shallowR
 import { noop } from '../../utils/noop'
 
 import { getWindow } from '../../utils/ssr'
-import { useComponentPresetProp } from '../../composables/useComponentPreset'
-import { useNumericProp } from '../../composables/useNumericProp'
+import { useComponentPresetProp, useNumericProp, makeNumericProp } from '../../composables'
 
 import {
   handleThrottledEvent,
@@ -38,8 +37,8 @@ defineOptions({
 
 const props = defineProps({
   ...useComponentPresetProp,
-  offsetTop: { type: [Number, String], default: undefined },
-  offsetBottom: { type: [Number, String], default: undefined },
+  offsetTop: makeNumericProp(),
+  offsetBottom: makeNumericProp(),
   target: { type: [Object, Function] as PropType<HTMLElement | Window | (() => HTMLElement | Window)>, default: getWindow },
 })
 

packages/ui/src/components/va-alert/useAlertStyles.ts

@@ -1,5 +1,5 @@
 import { computed, toRef } from 'vue'
-import { useColors, useCurrentElement, useElementBackground, useElementTextColor, useTextColor } from '../../composables'
+import { useColors, useCurrentElement, useElementBackground, useElementTextColor } from '../../composables'
 
 type AlertStyleProps = {
   modelValue: boolean,
@@ -21,7 +21,7 @@ export const useAlertStyles = (props: AlertStyleProps) => {
   const { getColor } = useColors()
 
   const isTransparentBackground = computed(() => Boolean(props.outline || props.border))
-  const { textColorComputed } = useTextColor(toRef(props, 'color'), isTransparentBackground)
+  const textColorComputed = useElementTextColor(toRef(props, 'color'), isTransparentBackground)
 
   const colorComputed = computed(() => getColor(props.color))
 

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

@@ -1,6 +1,6 @@
 <template>
   <header
-    ref="scrollRoot"
+    ref="rootElement"
     role="toolbar"
     class="va-app-bar"
     :style="computedStyle"
@@ -12,7 +12,7 @@
 <script lang="ts" setup>
 import { PropType, computed, toRef } from 'vue'
 
-import { setupScroll, useColors, useFixedBar, useFixedBarProps, useComponentPresetProp, useTextColor } from '../../composables'
+import { useColors, useFixedBar, useFixedBarProps, useComponentPresetProp, useElementTextColor, useTemplateRef, useSelectorTemplateRef, useElementScrollableParent } from '../../composables'
 
 defineOptions({
   name: 'VaAppBar',
@@ -28,12 +28,14 @@ const props = defineProps({
   color: { type: String, default: 'primary' },
 })
 
-const { scrollRoot, isScrolledDown } = setupScroll(props.fixed, props.target)
-const { fixedBarStyleComputed } = useFixedBar(props, isScrolledDown)
+const targetHtmlElement = useSelectorTemplateRef(toRef(props, 'target'))
+const scrollRootScrollParent = useElementScrollableParent<HTMLElement>(useTemplateRef('rootElement'))
+
+const { fixedBarStyleComputed, isScrolledDown } = useFixedBar(props, computed(() => targetHtmlElement.value || scrollRootScrollParent.value))
 
 const { getColor, getGradientBackground, getBoxShadowColor } = useColors()
 const colorComputed = computed(() => getColor(props.color))
-const { textColorComputed } = useTextColor(toRef(props, 'color'))
+const textColorComputed = useElementTextColor(toRef(props, 'color'))
 const showShadowComputed = computed(() => isScrolledDown.value ? !!props.shadowOnScroll : false)
 const shadowColorComputed = computed(() => getColor(props.shadowColor, colorComputed.value))
 

packages/ui/src/components/va-aspect-ratio/VaAspectRatio.vue

@@ -8,7 +8,7 @@
 <script lang="ts" setup>
 import { computed, type PropType } from 'vue'
 
-import { useComponentPresetProp, useNumericProp } from '../../composables'
+import { useComponentPresetProp, useNumericProp, makeNumericProp } from '../../composables'
 import { StringWithAutocomplete } from '../../utils/types/prop-type'
 
 defineOptions({
@@ -21,8 +21,8 @@ const props = defineProps({
     type: [Number, String] as PropType<number | StringWithAutocomplete<'auto'>>,
     default: 'auto',
   },
-  contentHeight: { type: [Number, String], default: 1 },
-  contentWidth: { type: [Number, String], default: 1 },
+  contentHeight: makeNumericProp({ default: 1 }),
+  contentWidth: makeNumericProp({ default: 1 }),
   maxWidth: {
     type: [Number, String],
     default: 0,

packages/ui/src/components/va-avatar-group/VaAvatarGroup.vue

@@ -28,7 +28,7 @@ import { computed, PropType } from 'vue'
 
 import { VaAvatar } from '../va-avatar'
 import { extractComponentProps, filterComponentProps } from '../../utils/component-options'
-import { useBem, useComponentPresetProp, useSize, useSizeProps, useNumericProp } from '../../composables'
+import { useBem, useComponentPresetProp, useSize, useSizeProps, useNumericProp, makeNumericProp } from '../../composables'
 import { pick } from '../../utils/pick'
 
 const VaAvatarProps = extractComponentProps(VaAvatar)
@@ -45,10 +45,7 @@ const props = defineProps({
   ...useComponentPresetProp,
   ...VaAvatarProps,
 
-  max: {
-    type: [Number, String],
-    default: 0,
-  },
+  max: makeNumericProp({ default: 0 }),
   vertical: {
     type: Boolean,
     default: false,

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

@@ -38,9 +38,9 @@ import {
   useBem,
   useSize,
   useColors,
-  useTextColor,
+  useElementTextColor,
   useSizeProps,
-  useLoadingProps,
+  useLoadableControlProps,
   useComponentPresetProp,
 } from '../../composables'
 import { extractComponentProps, filterComponentProps } from '../../utils/component-options'
@@ -58,7 +58,7 @@ defineOptions({
 })
 
 const props = defineProps({
-  ...useLoadingProps,
+  ...useLoadableControlProps,
   ...useSizeProps,
   ...useComponentPresetProp,
   ...VaFallbackPropsDeclaration,
@@ -84,7 +84,7 @@ const backgroundColorComputed = computed(() => {
   return colorComputed.value
 })
 const { sizeComputed, fontSizeComputed } = useSize(props, 'VaAvatar')
-const { textColorComputed } = useTextColor(backgroundColorComputed)
+const textColorComputed = useElementTextColor(backgroundColorComputed)
 
 const computedStyle = computed(() => ({
   fontSize: props.fontSize || fontSizeComputed.value,

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

@@ -21,7 +21,7 @@
 
 <script lang="ts" setup>
 import { PropType, ref, computed, onMounted, onBeforeUnmount } from 'vue'
-import { useComponentPresetProp, useTranslation, useTranslationProp, useNumericProp } from '../../composables'
+import { useComponentPresetProp, useTranslation, useTranslationProp, useNumericProp, makeNumericProp } from '../../composables'
 import { VaButton } from '../va-button'
 import { isServer } from '../../utils/ssr'
 import { warn } from '../../utils/console'
@@ -36,8 +36,8 @@ const props = defineProps({
     type: [Object, String] as PropType<Element | string | undefined>,
     default: undefined,
   },
-  visibilityHeight: { type: [Number, String], default: 300 },
-  speed: { type: [Number, String], default: 50 },
+  visibilityHeight: makeNumericProp({ default: 300 }),
+  speed: makeNumericProp({ default: 50 }),
   verticalOffset: { type: String, default: '1rem' },
   horizontalOffset: { type: String, default: '1rem' },
   color: { type: String, default: '' },

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

@@ -25,7 +25,7 @@ import { computed, unref, useSlots } from 'vue'
 import {
   useBem,
   useColors,
-  useTextColor,
+  useElementTextColor,
   useDeprecated,
   useComponentPresetProp,
 } from '../../composables'
@@ -68,7 +68,7 @@ const badgeClass = useBem('va-badge', () => ({
 
 const { getColor } = useColors()
 const colorComputed = computed(() => getColor(props.color))
-const { textColorComputed } = useTextColor(colorComputed)
+const textColorComputed = useElementTextColor(colorComputed)
 
 const positionStylesComputed = useFloatingPosition(props, isFloating)
 

packages/ui/src/components/va-badge/hooks/useFloatingPositionStyles.ts

@@ -5,9 +5,8 @@ import type { BadgeOffsetProp } from '../types'
 
 import { computed } from 'vue'
 
-import { usePlacementAliases, placementsPositionsWithAliases, useParsableMeasure } from '../../../composables'
-
-const { isParsableMeasure, parseSizeValue } = useParsableMeasure()
+import { usePlacementAliases, placementsPositionsWithAliases } from '../../../composables'
+import { isLengthValue, useLength } from '../../../composables/std'
 
 export const useFloatingPositionProps = {
   overlap: { type: Boolean, default: false },
@@ -21,11 +20,11 @@ export const useFloatingPositionProps = {
     default: 0,
     validator: (value: keyof BadgeOffsetProp) => {
       if (Array.isArray(value)) {
-        return value.every(isParsableMeasure)
+        return value.every(isLengthValue)
       }
 
       if (typeof value === 'string') {
-        return isParsableMeasure(value)
+        return isLengthValue(value)
       }
 
       return !isNaN(value)
@@ -41,6 +40,8 @@ export const useFloatingPosition = (
 
   const { position, align } = usePlacementAliases(props)
 
+  const parseLengthValue = useLength()
+
   const alignmentShiftComputed = computed(() => {
     const alignOptions = {
       start: props.overlap ? '-50%' : '-100%',
@@ -58,15 +59,15 @@ export const useFloatingPosition = (
     const crossAxis = mainAxis === 'top' ? 'left' : 'top'
 
     if (Array.isArray(props.offset)) {
-      const [x, y] = props.offset.map(parseSizeValue)
+      const [x, y] = props.offset.map(parseLengthValue)
 
       return {
         [`margin-${mainAxis}`]: `${x}px`,
         [`margin-${crossAxis}`]: `${y}px`,
       }
     }
 
-    const offset = parseSizeValue(props.offset)
+    const offset = parseLengthValue(props.offset)
 
     return {
       [`margin-${crossAxis}`]: `${offset}px`,

packages/ui/src/components/va-badge/types.ts

@@ -1 +1,3 @@
-export type BadgeOffsetProp = number | string | [number, number] | [string, string]
+import { LengthString } from '../../composables/std'
+
+export type BadgeOffsetProp = number | LengthString | [number, number] | [LengthString, LengthString]

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

@@ -3,8 +3,8 @@ import { computed, defineComponent, Fragment, h, ref, VNode } from 'vue'
 
 import {
   useComponentPresetProp,
-  useAlign,
-  useAlignProps,
+  useAlignable,
+  useAlignableProps,
   useColors,
   useTranslation, useTranslationProp,
 } from '../../composables'
@@ -15,7 +15,7 @@ import { resolveSlot } from '../../utils/resolveSlot'
 export default defineComponent({
   name: 'VaBreadcrumbs',
   props: {
-    ...useAlignProps,
+    ...useAlignableProps,
     ...useComponentPresetProp,
     separator: { type: String, default: '/' },
     color: { type: String, default: null },
@@ -25,7 +25,7 @@ export default defineComponent({
     ariaLabel: useTranslationProp('$t:breadcrumbs'),
   },
   setup (props, { slots }) {
-    const { alignComputed } = useAlign(props)
+    const { alignComputed } = useAlignable(props)
 
     const { getColor } = useColors()
     const computedThemesSeparatorColor = computed(() => {

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

@@ -9,7 +9,7 @@
 <script lang="ts">
 import { computed } from 'vue'
 import { extractComponentProps, filterComponentProps } from '../../utils/component-options'
-import { useBem, useComponentPresetProp, useColors, useTextColor } from '../../composables'
+import { useBem, useComponentPresetProp, useColors, useElementTextColor } from '../../composables'
 
 import { VaConfig } from '../va-config'
 import { VaButton } from '../va-button'
@@ -32,7 +32,7 @@ const props = defineProps({
 
 const { getColor, getGradientBackground } = useColors()
 const colorComputed = computed(() => getColor(props.color))
-const { textColorComputed } = useTextColor(colorComputed)
+const textColorComputed = useElementTextColor(colorComputed)
 
 const filteredProps = filterComponentProps(VaButtonProps)
 const buttonConfig = computed(() => ({

packages/ui/src/components/va-button/VaButton.stories.ts

@@ -22,3 +22,13 @@ export const RightShift = () => ({
     </div>
   `,
 })
+
+export const Focus = () => ({
+  components: { VaButton },
+  template: `
+    <div>
+      <VaButton ref="target">Target</VaButton>
+      <VaButton @click="$refs.target.focus()">Focus</VaButton>
+    </div>
+  `,
+})