Size config rework (#3333)

.envrc

@@ -0,0 +1,2 @@
+type nvm >/dev/null 2>&1 || . "$NVM_DIR/nvm.sh"
+nvm use

.ws-context

@@ -0,0 +1,3 @@
+{
+  "framework": "vue"
+}

packages/nuxt/src/runtime/plugin.ts

@@ -9,28 +9,27 @@ import {
   type PartialGlobalConfig
 } from 'vuestic-ui'
 import { markRaw, computed, watch, type Ref } from 'vue'
-import { useHead, ReactiveHead, defineNuxtPlugin, useCookie  } from '#imports'
+import type { VuesticOptions } from '../types'
+import { useHead, ReactiveHead, defineNuxtPlugin, useCookie } from '#imports'
 import NuxtLink from '#app/components/nuxt-link'
 import configFromFile from '#vuestic-config'
 
-import type { VuesticOptions } from '../types'
-
 function getGlobalProperty (app, key) {
   return app.config.globalProperties[key]
 }
 
-export default defineNuxtPlugin(async (nuxtApp) => {
+export default defineNuxtPlugin((nuxtApp) => {
   const { vueApp: app } = nuxtApp
 
   // It's important to use `, because TS will compile qoutes to " and JSON will not be parsed...
-  const moduleOptions: VuesticOptions = JSON.parse(`<%= options.value %>`)
+  const moduleOptions: VuesticOptions = JSON.parse('<%= options.value %>')
   const themeCookie = useCookie(moduleOptions.themeCookieKey)
   const userConfig = configFromFile || moduleOptions.config || {}
   const configWithColors: PartialGlobalConfig = {
     ...userConfig,
     colors: {
       currentPresetName: themeCookie.value || userConfig.colors?.currentPresetName || 'light',
-      ...userConfig.colors,
+      ...userConfig.colors
     }
   }
 
@@ -44,7 +43,7 @@ export default defineNuxtPlugin(async (nuxtApp) => {
       VaDropdownPlugin,
       VaToastPlugin,
       VaModalPlugin,
-      ColorsClassesPlugin,
+      ColorsClassesPlugin
     },
     /** Do not import any components. Nuxt will import them automatically */
     components: {}
@@ -76,6 +75,19 @@ export default defineNuxtPlugin(async (nuxtApp) => {
     }))
   }
 
+  const componentConfig = getGlobalProperty(app, '$vaComponentConfig')
+  if (componentConfig) {
+    useHead(computed(() => {
+      return {
+        style: [
+          {
+            innerHTML: componentConfig.renderStyles()
+          }
+        ]
+      } satisfies ReactiveHead
+    }))
+  }
+
   // Watch for preset name change and update cookie
   const { globalConfig } = getGlobalProperty(app, '$vaConfig') as { globalConfig: Ref<GlobalConfig> }
   watch(() => globalConfig.value.colors.currentPresetName, (newTheme) => {

packages/ui/.storybook/preview.ts

@@ -9,7 +9,7 @@ import {
   VaToastPlugin,
   VaModalPlugin,
   VaDropdownPlugin,
-  BreakpointConfigPlugin,
+  BreakpointConfigPlugin, ComponentConfigPlugin,
 } from './../src/main'
 import demoIconAliases from './vuestic-config/demo-icon-aliases'
 import demoIconFonts from './vuestic-config/demo-icon-fonts'
@@ -49,7 +49,7 @@ setup((app) => {
         },
       },
     },
-    plugins: { VaToastPlugin, VaDropdownPlugin, VaModalPlugin, BreakpointConfigPlugin },
+    plugins: { VaToastPlugin, VaDropdownPlugin, VaModalPlugin, BreakpointConfigPlugin, ComponentConfigPlugin },
   }))
 })
 

packages/ui/build/configs/vite.web-components.ts

@@ -5,6 +5,7 @@ import { chunkSplitPlugin } from 'vite-plugin-chunk-split'
 import { removeSideEffectedChunks } from '../plugins/remove-side-effected-chunks'
 import { webComponentsNestedStyles } from '../plugins/web-components-nested-styles'
 import { readFileSync } from 'fs'
+import { resolve } from '../common-config'
 
 /**
  * Build web components folder. It is a separated build of vuestic-ui for SPA-only (?: maybe for SPA-only).
@@ -19,6 +20,7 @@ const packageJSON = JSON.parse(readFileSync(resolver(process.cwd(), './package.j
 const dependencies = [...Object.keys(packageJSON.dependencies), ...Object.keys(packageJSON.peerDependencies)]
 
 export default () => defineConfig({
+  resolve,
   build: {
     lib: {
       entry: resolver(process.cwd(), 'src/main.ts'),

packages/ui/package.json

@@ -167,4 +167,4 @@
       ]
     }
   }
-}
+}

packages/ui/src/components/va-avatar-group/VaAvatarGroup.stories.ts

@@ -1,5 +1,4 @@
 import { VaAvatarGroup } from './'
-import { addText } from '../../../.storybook/interaction-utils/addText'
 
 export default {
   title: 'VaAvatarGroup',

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

@@ -28,9 +28,9 @@ import { computed, PropType } from 'vue'
 
 import { VaAvatar } from '../va-avatar'
 
-import pick from 'lodash/pick.js'
+import pick from 'lodash/pick'
 import { extractComponentProps, filterComponentProps } from '../../utils/component-options'
-import { useBem, useComponentPresetProp, useSize, useSizeProps, useNumericProp } from '../../composables'
+import { useBem, useComponentPresetProp, useNumericProp } from '../../composables'
 
 const VaAvatarProps = extractComponentProps(VaAvatar)
 </script>
@@ -42,7 +42,6 @@ defineOptions({
 })
 
 const props = defineProps({
-  ...useSizeProps,
   ...useComponentPresetProp,
   ...VaAvatarProps,
 
@@ -78,14 +77,8 @@ const restOptionsCount = computed(() => {
 
   return hasOptions && canAddMoreOptions ? remainingOptions : 0
 })
-const { sizeComputed, fontSizeComputed } = useSize(props, 'VaAvatarGroup')
 
-const filteredAvatarProps = filterComponentProps(VaAvatarProps)
-const avatarProps = computed(() => ({
-  ...filteredAvatarProps.value,
-  fontSize: fontSizeComputed.value,
-  size: sizeComputed.value,
-}))
+const avatarProps = filterComponentProps(VaAvatarProps)
 </script>
 
 <style lang="scss">

packages/ui/src/components/va-avatar/VaAvatar.stories.ts

@@ -1,5 +1,6 @@
 import { VaAvatar } from './'
 import { h } from 'vue'
+import { StoryFn } from '@storybook/vue3'
 
 export default {
   title: 'VaAvatar',
@@ -58,32 +59,40 @@ export const Size = () => ({
   `,
 })
 
-export const SizesConfig = () => ({
+const sizesConfig = { small: { variables: { size: '16px' } }, medium: { variables: { size: '24px' } }, large: { variables: { size: '32px' } } }
+
+export const SizesConfig: StoryFn<typeof VaAvatar> = (args) => ({
   components: { VaAvatar },
+  setup () {
+    return { args }
+  },
   template: `
     [small: 16px]
     <VaAvatar
-      :sizesConfig="{ 'defaultSize': 24, 'sizes': { 'small': 16, 'medium': 24, 'large': 32 } }"
+      v-bind="args"
       size="small"
     >
       Text
     </VaAvatar>
     [medium: 24px]
     <VaAvatar
-      :sizesConfig="{ 'defaultSize': 24, 'sizes': { 'small': 16, 'medium': 24, 'large': 32 } }"
+      v-bind="args"
       size="medium"
     >
       Text
     </VaAvatar>
     [large: 32px]
     <VaAvatar
-      :sizesConfig="{ 'defaultSize': 24, 'sizes': { 'small': 16, 'medium': 24, 'large': 32 } }"
+      v-bind="args"
       size="large"
     >
       Text
     </VaAvatar>
   `,
 })
+SizesConfig.args = {
+  sizesConfig,
+}
 
 export const FontSize = () => ({
   components: { VaAvatar },

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

@@ -3,10 +3,11 @@
     class="va-avatar"
     :class="classesComputed"
     :style="computedStyle"
+    v-bind="variablesComputed"
   >
     <va-progress-circle
       v-if="$props.loading"
-      :size="sizeComputed"
+      :size="props.size"
       :color="colorComputed"
       indeterminate
     />
@@ -37,7 +38,6 @@ import pick from 'lodash/pick'
 
 import {
   useBem,
-  useSize,
   useColors,
   useTextColor,
   useSizeProps,
@@ -48,6 +48,9 @@ import { extractComponentProps, filterComponentProps } from '../../utils/compone
 
 import { VaIcon, VaProgressCircle, VaFallback } from '../index'
 
+import { useComponentVariables } from '../../composables/useComponentVariables'
+import type { Variables, Sizes } from './const'
+
 const VaFallbackPropsDeclaration = extractComponentProps(VaFallback)
 </script>
 
@@ -59,7 +62,7 @@ defineOptions({
 
 const props = defineProps({
   ...useLoadingProps,
-  ...useSizeProps,
+  ...useSizeProps<Variables, Sizes>(),
   ...useComponentPresetProp,
   ...VaFallbackPropsDeclaration,
 
@@ -83,16 +86,16 @@ const backgroundColorComputed = computed(() => {
 
   return colorComputed.value
 })
-const { sizeComputed, fontSizeComputed } = useSize(props, 'VaAvatar')
+
 const { textColorComputed } = useTextColor(backgroundColorComputed)
 
+const variablesComputed = useComponentVariables(props)
+
 const computedStyle = computed(() => ({
-  fontSize: props.fontSize || fontSizeComputed.value,
+  fontSize: props.fontSize,
 }))
 
-const classesComputed = useBem('va-avatar', () => ({
-  ...pick(props, ['square']),
-}))
+const classesComputed = useBem('va-avatar', () => pick(props, ['square']))
 
 const hasLoadError = ref(false)
 
@@ -132,9 +135,18 @@ defineExpose({
   font-family: var(--va-font-family);
   background-color: v-bind(backgroundColorComputed);
   color: v-bind(textColorComputed);
-  width: v-bind(sizeComputed);
-  min-width: v-bind(sizeComputed);  // We only define width because common use case would be flex row, for column we expect user to set appropriate styling externally.
-  height: v-bind(sizeComputed);
+  width: var(--va-avatar-size);
+  min-width: var(--va-avatar-size);  // We only define width because common use case would be flex row, for column we expect user to set appropriate styling externally.
+  height: var(--va-avatar-size);
+  font-size: var(--va-avatar-font-size, var(--va-font-size));
+
+  &--small {
+    --va-avatar-size: 32px;
+  }
+
+  &--large {
+    --va-avatar-size: 64px;
+  }
 
   &--square {
     --va-avatar-border-radius: 0;

packages/ui/src/components/va-avatar/_variables.scss

@@ -9,4 +9,8 @@
   --va-avatar-position: relative;
   --va-avatar-line-height: normal;
   --va-avatar-border-radius: 50%;
+  --va-avatar-font-size: unset;
+
+  /* Medium */
+  --va-avatar-size: 48px;
 }

packages/ui/src/components/va-avatar/const.ts

@@ -0,0 +1,17 @@
+import { ArrayElementType } from '../../utils/types/array'
+export { defaultSizes as sizes, DefaultSizes as Sizes } from '../../composables'
+
+export const variables = [
+  'display',
+  'justifyContent',
+  'alignItems',
+  'textAlign',
+  'verticalAlign',
+  'position',
+  'lineHeight',
+  'borderRadius',
+  'size',
+  'fontSize',
+] as const
+
+export type Variables = ArrayElementType<typeof variables>

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

@@ -92,6 +92,7 @@
             <va-button size="small" preset="secondary">Secondary</va-button>
             <va-button size="small" preset="plain">Plain</va-button>
             <va-button size="small" preset="plainOpacity">Plain with opacity</va-button>
+            <va-button size="small" loading />
           </td>
         </tr>
 
@@ -103,6 +104,7 @@
             <va-button size="large" preset="secondary">Secondary</va-button>
             <va-button size="large" preset="plain">Plain</va-button>
             <va-button size="large" preset="plainOpacity">Plain with opacity</va-button>
+            <va-button size="large" loading />
           </td>
         </tr>