feat: slots config and child components config (#4176)

* feat(child-props): init child props feature

* feat(modal): use child props

* feat(components-config): slot prop

* docs(components-config): add child and slots. improve examples

* docs: minor fix

packages/docs/config/GithubSvgIcon.vue

@@ -0,0 +1,5 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path d="M12 0a12 12 0 0 0-3.8 23.4c.6.1.8-.3.8-.6v-2.2c-3.3.7-4-1.4-4-1.4-.6-1.4-1.4-1.8-1.4-1.8-1-.7.1-.7.1-.7 1.2 0 1.9 1.2 1.9 1.2 1 1.8 2.8 1.3 3.4 1 .2-.8.5-1.3.8-1.6-2.7-.3-5.5-1.3-5.5-6 0-1.2.5-2.3 1.3-3.1-.1-.4-.6-1.6.1-3.2 0 0 1-.3 3.3 1.2a11.5 11.5 0 0 1 6 0C17.3 4.7 18.3 5 18.3 5c.7 1.6.2 2.9.1 3.2.8.8 1.3 1.9 1.3 3.2 0 4.6-2.9 5.6-5.5 5.9.4.4.8 1.1.8 2.2v3.3c0 .3.2.7.8.6A12 12 0 0 0 12 0z" />
+  </svg>
+</template>

packages/docs/config/vuestic-config.ts

@@ -1,5 +1,7 @@
 import { defineVuesticConfig } from 'vuestic-ui'
 import { icons } from './icons-config/icons-config'
+import GithubSvgIcon from './GithubSvgIcon.vue'
+import { markRaw } from 'vue'
 
 const scrollWrapperSelector = '.docs-layout__main-content'
 
@@ -26,9 +28,16 @@ export const VuesticConfig = defineVuesticConfig({
     },
     presets: {
       VaButton: {
-        addToCart: { size: 'large', round: true },
+        addToCart: { round: true, color: 'success', icon: 'shopping_cart', 'slot:default': 'Add to card' },
         deleteFromCart: { size: 'small', plain: true },
         landingHeader: VaButtonLandingHeader,
+        github: {
+          'slot:prepend': markRaw(GithubSvgIcon),
+          'slot:default': 'View on GitHub',
+          color: '#000000',
+          style: 'fill: currentColor',
+          class: 'va-button--github',
+        }
       },
       VaButtonDropdown: {
         landingHeader: VaButtonLandingHeader,

packages/docs/page-config/services/components-config/code/components-all.ts

@@ -1,6 +1,8 @@
-components: {
-  all: {
-    color: '#d91698',
-    disabled: 'true',
+createVuestic({
+  components: {
+    all: {
+      color: '#d91698',
+      disabled: true,
+    },
   },
-},
+})

packages/docs/page-config/services/components-config/code/components-attributes-style.scss

@@ -0,0 +1,3 @@
+.my-custom-alert {
+  background: linear-gradient(90deg, #ff8a00 0%, #e52e71 100%);
+}

packages/docs/page-config/services/components-config/code/components-attributes.ts

@@ -0,0 +1,10 @@
+createVuestic({
+  components: {
+    VaAlert: {
+      style: 'outline: 2px solid var(--va-primary)',
+      class: 'my-custom-alert',
+      icon: 'info',
+      dense: true,
+    }
+  }
+})

packages/docs/page-config/services/components-config/code/components-config.ts

@@ -1,12 +1,14 @@
-components: {
-  VaAvatar: {
-    square: true,
-    icon: 'spinner',
+createVuestic({
+  components: {
+    VaAvatar: {
+      square: true,
+      icon: 'spinner',
+    },
+    VaCard: {
+      color: 'secondary',
+    },
+    VaTabs: {
+      grow: true,
+    },
   },
-  VaCard: {
-    color: 'secondary',
-  },
-  VaTabs: {
-    grow: true,
-  },
-},
+})

packages/docs/page-config/services/components-config/code/components-default-sizes.ts

@@ -1,12 +1,14 @@
-components: {
-  VaIcon: {
-    sizesConfig: {
-      defaultSize: 24,
-      sizes: {
+createVuestic({
+  components: {
+    VaIcon: {
+      sizesConfig: {
+        defaultSize: 24,
+        sizes: {
           small: 16,
           medium: 24,
           large: 32,
+        },
       },
     },
   },
-},
+})

packages/docs/page-config/services/components-config/code/components-presets.ts

@@ -1,8 +1,9 @@
-components: {
-  presets: {
-    VaButton: {
-      addToCart: { size: 'large', round: true },
-      deleteFromCart: { size: 'small', plain: true },
+createVuestic({
+  components: {
+    presets: {
+      VaButton: {
+        addToCart: { round: true, color: 'success', icon: 'shopping_cart', 'slot:default': 'Add to card' },
+      },
     },
   },
-},
+})

packages/docs/page-config/services/components-config/code/components-slots-style.scss

@@ -0,0 +1,5 @@
+.va-button--github {
+  svg {
+    margin-right: 8px;
+  }
+}

packages/docs/page-config/services/components-config/code/components-slots.ts

@@ -0,0 +1,17 @@
+import GithubSvgIcon from './GithubSvgIcon.vue'
+
+createVuestic({
+  components: {
+    presets: {
+      VaButton: {
+        github: {
+          'slot:prepend': markRaw(GithubSvgIcon),
+          'slot:default': 'View on GitHub',
+          color: '#000000',
+          style: 'fill: currentColor',
+          class: 'va-button--github',
+        }
+      }
+    }
+  }
+})

packages/docs/page-config/services/components-config/components/Priority.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="flex flex-col">
+    <p class="my-2 mx-auto">Less important</p>
+    <div
+      v-for="priority, index in [
+        'Component `default` prop value',
+        'Global `all` props value',
+        'Component props from Global Config',
+        'Component props form VaConfig',
+        'Props value from component preset',
+        'Props bound directly to component',
+      ]"
+      :key="priority"
+    >
+      <div
+        class="border-2 border-solid border-[var(--va-background-border)] p-4"
+      >
+        {{ priority }}
+      </div>
+      <div v-if="index !== 5" class="w-0 mx-auto justify-self-center border-r-2 border-solid border-[var(--va-background-border)] h-4" />
+    </div>
+    <p class="my-2 mx-auto">More important</p>
+  </div>
+</template>

packages/docs/page-config/services/components-config/examples/attributes.vue

@@ -0,0 +1,27 @@
+<template>
+  <VaConfig
+    :components="{
+      VaAlert: {
+        style: 'outline: 2px solid var(--va-primary)',
+        class: 'my-custom-alert',
+        icon: 'info',
+        dense: true,
+      }
+    }
+    "
+  >
+    <VaAlert>
+      Test alert!
+    </VaAlert>
+  </VaConfig>
+</template>
+
+<script setup>
+import { VaConfig, VaAlert } from 'vuestic-ui'
+</script>
+
+<style>
+.my-custom-alert {
+  background: linear-gradient(90deg, #ff8a00 0%, #e52e71 100%);
+}
+</style>

packages/docs/page-config/services/components-config/examples/child-components.vue

@@ -0,0 +1,11 @@
+<template>
+  <VaDatePicker
+    :child:prev-button="{ textColor: 'danger' }"
+    :child:middle-button="{ textColor: 'info' }"
+    :child:next-button="{ textColor: 'success' }"
+  />
+</template>
+
+<script setup>
+import { VaDatePicker } from 'vuestic-ui'
+</script>

packages/docs/page-config/services/components-config/examples/presets.vue

@@ -1,11 +1,5 @@
 <template>
   <VaButton
     preset="addToCart"
-    class="mr-6"
-  >
-    'addToCart' preset
-  </VaButton>
-  <VaButton preset="deleteFromCart">
-    'deleteFromCart' preset
-  </VaButton>
+  />
 </template>

packages/docs/page-config/services/components-config/examples/slots.vue

@@ -0,0 +1,11 @@
+<template>
+  <VaButton preset="github" />
+</template>
+
+<style>
+  .va-button--github {
+    svg {
+      margin-right: 8px;
+    }
+  }
+</style>

packages/docs/page-config/services/components-config/examples/va-config.vue

@@ -1,33 +1,21 @@
 <template>
-  <VaAlert color="#1B2D2A">
-    <VaConfig
-      :components="{
-        VaButton: { color: '#414066', round: true },
-        VaIcon: { color: '#605E97' },
-      }"
-    >
-      <div class="alert-content">
-        <p>Read this important demo message!</p>
-        <VaButton icon="hearing">
-          Ok
-        </VaButton>
-        <VaButton icon="visibility">
-          I already read it before
-        </VaButton>
-        <VaButton
-          color="danger"
-          icon="close"
-          icon-color="warning"
-        >
-          Close
-        </VaButton>
-      </div>
-    </VaConfig>
-  </VaAlert>
+  <VaConfig
+    :components="{
+      VaAlert: { color: 'danger', icon: 'warning' },
+    }"
+  >
+    <div>
+      <VaAlert>
+        This is error alert
+      </VaAlert>
+      <VaAlert>
+        This is error alert
+      </VaAlert>
+
+      <VaAlert color="warning">
+        This alert can have it's own color
+      </VaAlert>
+    </div>
+  </VaConfig>
 </template>
 
-<style>
-.alert-content .va-button {
-  margin-right: 0.5rem;
-}
-</style>