@varlet/ui 3.2.13 → 3.2.14-alpha.1717685185218

package/es/app-bar/AppBar.mjs

@@ -1,92 +1,71 @@
 import { defineComponent, ref, onUpdated, computed } from "vue";
 import { props } from "./props.mjs";
 import { createNamespace, formatElevation } from "../utils/components.mjs";
-import { onSmartMounted } from "@varlet/use";
+import { onSmartMounted, onWindowResize } from "@varlet/use";
+import { getRect } from "@varlet/shared";
 const { name, n, classes } = createNamespace("app-bar");
-import { renderSlot as _renderSlot, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, createElementVNode as _createElementVNode } from "vue";
+import { renderSlot as _renderSlot, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, createElementVNode as _createElementVNode, mergeProps as _mergeProps, Fragment as _Fragment } from "vue";
 function __render__(_ctx, _cache) {
   return _openBlock(), _createElementBlock(
-    "div",
-    {
-      class: _normalizeClass(
-        _ctx.classes(
-          _ctx.n(),
-          _ctx.n("$--box"),
-          [_ctx.safeAreaTop, _ctx.n("--safe-area-top")],
-          [_ctx.round, _ctx.n("--round")],
-          [_ctx.fixed, _ctx.n("--fixed")],
-          _ctx.formatElevation(_ctx.elevation, 3)
-        )
-      ),
-      style: _normalizeStyle(_ctx.rootStyles)
-    },
+    _Fragment,
+    null,
     [
       _createElementVNode(
         "div",
-        {
-          class: _normalizeClass(_ctx.n("toolbar"))
-        },
+        _mergeProps({
+          class: _ctx.classes(
+            _ctx.n(),
+            _ctx.n("$--box"),
+            [_ctx.safeAreaTop, _ctx.n("--safe-area-top")],
+            [_ctx.round, _ctx.n("--round")],
+            [_ctx.fixed, _ctx.n("--fixed")],
+            _ctx.formatElevation(_ctx.elevation, 3)
+          ),
+          ref: "appBar",
+          style: _ctx.rootStyles
+        }, _ctx.$attrs),
         [
           _createElementVNode(
             "div",
             {
-              class: _normalizeClass(_ctx.n("left"))
+              class: _normalizeClass(_ctx.n("toolbar"))
             },
             [
-              _renderSlot(_ctx.$slots, "left"),
-              _ctx.titlePosition === "left" ? (_openBlock(), _createElementBlock(
+              _createElementVNode(
                 "div",
                 {
-                  key: 0,
-                  class: _normalizeClass(_ctx.n("title")),
-                  style: _normalizeStyle({ paddingLeft: _ctx.paddingLeft })
+                  class: _normalizeClass(_ctx.n("left"))
                 },
                 [
-                  _renderSlot(_ctx.$slots, "default", {}, () => [
-                    _createTextVNode(
-                      _toDisplayString(_ctx.title),
-                      1
-                      /* TEXT */
-                    )
-                  ])
+                  _renderSlot(_ctx.$slots, "left"),
+                  _ctx.titlePosition === "left" ? (_openBlock(), _createElementBlock(
+                    "div",
+                    {
+                      key: 0,
+                      class: _normalizeClass(_ctx.n("title")),
+                      style: _normalizeStyle({ paddingLeft: _ctx.paddingLeft })
+                    },
+                    [
+                      _renderSlot(_ctx.$slots, "default", {}, () => [
+                        _createTextVNode(
+                          _toDisplayString(_ctx.title),
+                          1
+                          /* TEXT */
+                        )
+                      ])
+                    ],
+                    6
+                    /* CLASS, STYLE */
+                  )) : _createCommentVNode("v-if", true)
                 ],
-                6
-                /* CLASS, STYLE */
-              )) : _createCommentVNode("v-if", true)
-            ],
-            2
-            /* CLASS */
-          ),
-          _ctx.titlePosition === "center" ? (_openBlock(), _createElementBlock(
-            "div",
-            {
-              key: 0,
-              class: _normalizeClass(_ctx.n("title"))
-            },
-            [
-              _renderSlot(_ctx.$slots, "default", {}, () => [
-                _createTextVNode(
-                  _toDisplayString(_ctx.title),
-                  1
-                  /* TEXT */
-                )
-              ])
-            ],
-            2
-            /* CLASS */
-          )) : _createCommentVNode("v-if", true),
-          _createElementVNode(
-            "div",
-            {
-              class: _normalizeClass(_ctx.n("right"))
-            },
-            [
-              _ctx.titlePosition === "right" ? (_openBlock(), _createElementBlock(
+                2
+                /* CLASS */
+              ),
+              _ctx.titlePosition === "center" ? (_openBlock(), _createElementBlock(
                 "div",
                 {
                   key: 0,
-                  class: _normalizeClass(_ctx.n("title")),
-                  style: _normalizeStyle({ paddingRight: _ctx.paddingRight })
+                  class: _normalizeClass(_ctx.n("title"))
                 },
                 [
                   _renderSlot(_ctx.$slots, "default", {}, () => [
@@ -97,30 +76,72 @@ function __render__(_ctx, _cache) {
                     )
                   ])
                 ],
-                6
-                /* CLASS, STYLE */
+                2
+                /* CLASS */
               )) : _createCommentVNode("v-if", true),
-              _renderSlot(_ctx.$slots, "right")
+              _createElementVNode(
+                "div",
+                {
+                  class: _normalizeClass(_ctx.n("right"))
+                },
+                [
+                  _ctx.titlePosition === "right" ? (_openBlock(), _createElementBlock(
+                    "div",
+                    {
+                      key: 0,
+                      class: _normalizeClass(_ctx.n("title")),
+                      style: _normalizeStyle({ paddingRight: _ctx.paddingRight })
+                    },
+                    [
+                      _renderSlot(_ctx.$slots, "default", {}, () => [
+                        _createTextVNode(
+                          _toDisplayString(_ctx.title),
+                          1
+                          /* TEXT */
+                        )
+                      ])
+                    ],
+                    6
+                    /* CLASS, STYLE */
+                  )) : _createCommentVNode("v-if", true),
+                  _renderSlot(_ctx.$slots, "right")
+                ],
+                2
+                /* CLASS */
+              )
             ],
             2
             /* CLASS */
-          )
+          ),
+          _renderSlot(_ctx.$slots, "content")
         ],
-        2
-        /* CLASS */
+        16
+        /* FULL_PROPS */
       ),
-      _renderSlot(_ctx.$slots, "content")
+      _ctx.fixed && _ctx.placeholder ? (_openBlock(), _createElementBlock(
+        "div",
+        {
+          key: 0,
+          class: _normalizeClass(_ctx.n("placeholder")),
+          style: _normalizeStyle({ height: _ctx.placeholderHeight })
+        },
+        null,
+        6
+        /* CLASS, STYLE */
+      )) : _createCommentVNode("v-if", true)
     ],
-    6
-    /* CLASS, STYLE */
+    64
+    /* STABLE_FRAGMENT */
   );
 }
 const __sfc__ = defineComponent({
   name,
   props,
   setup(props2, { slots }) {
+    const appBar = ref(null);
     const paddingLeft = ref();
     const paddingRight = ref();
+    const placeholderHeight = ref();
     const rootStyles = computed(() => {
       const { image, color, textColor, imageLinearGradient, zIndex } = props2;
       if (image != null) {
@@ -138,19 +159,32 @@ const __sfc__ = defineComponent({
         "z-index": zIndex
       };
     });
-    onSmartMounted(computePadding);
+    onWindowResize(resizePlaceholder);
+    onSmartMounted(() => {
+      computePadding();
+      resizePlaceholder();
+    });
     onUpdated(computePadding);
     function computePadding() {
       paddingLeft.value = slots.left ? 0 : void 0;
       paddingRight.value = slots.right ? 0 : void 0;
     }
+    function resizePlaceholder() {
+      if (!props2.fixed || !props2.placeholder) {
+        return;
+      }
+      const { height } = getRect(appBar.value);
+      placeholderHeight.value = `${height}px`;
+    }
     return {
       rootStyles,
       paddingLeft,
       paddingRight,
       n,
       classes,
-      formatElevation
+      formatElevation,
+      appBar,
+      placeholderHeight
     };
   }
 });

package/es/app-bar/props.mjs

@@ -18,7 +18,8 @@ const props = {
     type: [Number, String],
     default: 1
   },
-  fixed: Boolean
+  fixed: Boolean,
+  placeholder: Boolean
 };
 export {
   props

package/es/avatar/avatar.css

@@ -1 +1 @@
-:root { --avatar-text-color: #f5f5f5; --avatar-border-radius: 4px; --avatar-mini-size: 28px; --avatar-small-size: 36px; --avatar-normal-size: 48px; --avatar-large-size: 64px; --avatar-border: 2px solid #fff; --avatar-background-color: #bebebe; --avatar-hover-transform: scale(1.1);}.var-avatar { display: inline-flex; overflow: hidden; align-items: center; justify-content: center; color: var(--avatar-text-color); border-radius: var(--avatar-border-radius); background-color: var(--avatar-background-color); transition: background-color 0.25s;}.var-avatar img { width: 100%; height: 100%;}.var-avatar--mini { width: var(--avatar-mini-size); height: var(--avatar-mini-size);}.var-avatar--small { width: var(--avatar-small-size); height: var(--avatar-small-size);}.var-avatar--normal { width: var(--avatar-normal-size); height: var(--avatar-normal-size);}.var-avatar--large { width: var(--avatar-large-size); height: var(--avatar-large-size);}.var-avatar--round { border-radius: 50%;}.var-avatar--bordered { border: var(--avatar-border);}.var-avatar__text { padding: 0 4px; white-space: nowrap;}.var-avatar--hoverable { transition: transform 0.2s;}.var-avatar--hoverable:hover { transform: var(--avatar-hover-transform); cursor: pointer;}
+:root { --avatar-text-color: #f5f5f5; --avatar-border-radius: 4px; --avatar-mini-size: 28px; --avatar-small-size: 36px; --avatar-normal-size: 48px; --avatar-large-size: 64px; --avatar-border: 2px solid #fff; --avatar-background-color: #bebebe; --avatar-hover-transform: scale(1.1);}.var-avatar { display: inline-flex; overflow: hidden; align-items: center; justify-content: center; color: var(--avatar-text-color); border-radius: var(--avatar-border-radius); background-color: var(--avatar-background-color); transition: background-color 0.25s; -webkit-tap-highlight-color: transparent;}.var-avatar img { width: 100%; height: 100%;}.var-avatar--mini { width: var(--avatar-mini-size); height: var(--avatar-mini-size);}.var-avatar--small { width: var(--avatar-small-size); height: var(--avatar-small-size);}.var-avatar--normal { width: var(--avatar-normal-size); height: var(--avatar-normal-size);}.var-avatar--large { width: var(--avatar-large-size); height: var(--avatar-large-size);}.var-avatar--round { border-radius: 50%;}.var-avatar--bordered { border: var(--avatar-border);}.var-avatar__text { padding: 0 4px; white-space: nowrap;}.var-avatar--hoverable { transition: transform 0.2s;}.var-avatar--hoverable:hover { transform: var(--avatar-hover-transform); cursor: pointer;}

package/es/bottom-navigation/BottomNavigation.mjs

@@ -20,7 +20,7 @@ import { props } from "./props.mjs";
 import { useBottomNavigationItems } from "./provide.mjs";
 import { createNamespace } from "../utils/components.mjs";
 import { isNumber, normalizeToArray, call, getRect } from "@varlet/shared";
-import { onSmartMounted } from "@varlet/use";
+import { onSmartMounted, onWindowResize } from "@varlet/use";
 const { name, n, classes } = createNamespace("bottom-navigation");
 const { n: nItem } = createNamespace("bottom-navigation-item");
 const RIGHT_HALF_SPACE_CLASS = nItem("--right-half-space");
@@ -113,6 +113,7 @@ const __sfc__ = defineComponent({
       },
       { immediate: true, deep: true }
     );
+    onWindowResize(resizePlaceholder);
     onSmartMounted(() => {
       resizePlaceholder();
       if (!slots.fab) {

package/es/checkbox/Checkbox.mjs

@@ -23,14 +23,14 @@ function __render__(_ctx, _cache) {
   return _openBlock(), _createElementBlock(
     "div",
     {
-      class: _normalizeClass(_ctx.n("wrap")),
-      onClick: _cache[3] || (_cache[3] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
+      class: _normalizeClass(_ctx.n("wrap"))
     },
     [
       _createElementVNode(
         "div",
         {
-          class: _normalizeClass(_ctx.n())
+          class: _normalizeClass(_ctx.n()),
+          onClick: _cache[3] || (_cache[3] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
         },
         [
           _withDirectives((_openBlock(), _createElementBlock("div", {

package/es/checkbox-group/style/index.mjs

@@ -1,5 +1,8 @@
 import '../../styles/common.css'
 import '../../form-details/formDetails.css'
+import '../../ripple/ripple.css'
+import '../../icon/icon.css'
+import '../../hover-overlay/hoverOverlay.css'
 import '../../checkbox/checkbox.css'
 import '../checkboxGroup.css'
 import '../CheckboxGroupSfc.css'

package/es/collapse-item/collapseItem.css

@@ -1 +1 @@
-:root { --collapse-background: var(--color-surface-container-highest); --collapse-text-color: #232222; --collapse-header-font-size: var(--font-size-lg); --collapse-header-padding: 10px 12px; --collapse-content-font-size: var(--font-size-md); --collapse-content-padding: 0 12px 10px; --collapse-item-margin-top: 16px; --collapse-disable-color: #bdbdbd; --collapse-border-top: thin solid var(--color-outline);}.var-collapse-item { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; position: relative; margin-top: 0; background: var(--collapse-background); color: var(--collapse-text-color); transition: margin-top 0.25s, background-color 0.25s;}.var-collapse-item__shadow { bottom: 0; content: ''; left: 0; position: absolute; right: 0; top: 0; z-index: -1;}.var-collapse-item:not(:first-child)::after { border-top: var(--collapse-divider-top); content: ''; left: 0; position: absolute; right: 0; top: 0;}.var-collapse-item__header { align-items: center; display: flex; font-size: var(--collapse-header-font-size); outline: none; padding: var(--collapse-header-padding); justify-content: space-between; position: relative;}.var-collapse-item__header-title { transition: color 0.25s;}.var-collapse-item__header-icon { transform: rotate(0deg); opacity: 1;}.var-collapse-item__header-open { transform: rotate(-180deg);}.var-collapse-item__header--disable { opacity: 0;}.var-collapse-item__header--cursor-pointer { cursor: pointer;}.var-collapse-item__content { font-size: var(--collapse-content-font-size); overflow: hidden; transition: all 0.25s;}.var-collapse-item__content-wrap { padding: var(--collapse-content-padding); word-break: break-all;}.var-collapse-item--active + .var-collapse-item,.var-collapse-item--active:not(:first-child) { margin-top: var(--collapse-item-margin-top);}.var-collapse-item--active + .var-collapse-item::after,.var-collapse-item--active:not(:first-child)::after { border-top: none;}.var-collapse-item--disable { color: var(--collapse-disable-color); cursor: not-allowed;}
+:root { --collapse-background: var(--color-surface-container-highest); --collapse-text-color: #232222; --collapse-header-font-size: var(--font-size-lg); --collapse-header-padding: 10px 12px; --collapse-content-font-size: var(--font-size-md); --collapse-content-padding: 0 12px 10px; --collapse-item-margin-top: 16px; --collapse-disable-color: #bdbdbd; --collapse-border-top: thin solid var(--color-outline);}.var-collapse-item { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; position: relative; margin-top: 0; background: var(--collapse-background); color: var(--collapse-text-color); transition: margin-top 0.25s, background-color 0.25s;}.var-collapse-item__shadow { bottom: 0; content: ''; left: 0; position: absolute; right: 0; top: 0; z-index: -1;}.var-collapse-item:not(:first-child)::after { border-top: var(--collapse-border-top); content: ''; left: 0; position: absolute; right: 0; top: 0;}.var-collapse-item__header { align-items: center; display: flex; font-size: var(--collapse-header-font-size); outline: none; padding: var(--collapse-header-padding); justify-content: space-between; position: relative;}.var-collapse-item__header-title { transition: color 0.25s;}.var-collapse-item__header-icon { transform: rotate(0deg); opacity: 1;}.var-collapse-item__header-open { transform: rotate(-180deg);}.var-collapse-item__header--disable { opacity: 0;}.var-collapse-item__header--cursor-pointer { cursor: pointer;}.var-collapse-item__content { font-size: var(--collapse-content-font-size); overflow: hidden; transition: all 0.25s;}.var-collapse-item__content-wrap { padding: var(--collapse-content-padding); word-break: break-all;}.var-collapse-item--active + .var-collapse-item,.var-collapse-item--active:not(:first-child) { margin-top: var(--collapse-item-margin-top);}.var-collapse-item--active + .var-collapse-item::after,.var-collapse-item--active:not(:first-child)::after { border-top: none;}.var-collapse-item--disable { color: var(--collapse-disable-color); cursor: not-allowed;}

package/es/ellipsis/ellipsis.css

@@ -1 +1 @@
-.var-ellipsis { width: 100%; overflow: hidden; vertical-align: bottom;}.var-ellipsis--clamp { display: -webkit-inline-box; -webkit-box-orient: vertical;}.var-ellipsis--line { display: inline-block; white-space: nowrap; text-overflow: ellipsis;}.var-ellipsis--cursor { cursor: pointer;}.var-ellipsis--expand { display: inline-block; white-space: wrap; overflow: visible;}
+.var-ellipsis { width: 100%; overflow: hidden; vertical-align: bottom; -webkit-tap-highlight-color: transparent;}.var-ellipsis--clamp { display: -webkit-inline-box; -webkit-box-orient: vertical;}.var-ellipsis--line { display: inline-block; white-space: nowrap; text-overflow: ellipsis;}.var-ellipsis--cursor { cursor: pointer;}.var-ellipsis--expand { display: inline-block; white-space: wrap; overflow: visible;}

package/es/index.bundle.mjs

@@ -262,7 +262,7 @@ import './tooltip/style/index.mjs'
 import './uploader/style/index.mjs'
 import './watermark/style/index.mjs'
 
-const version = '3.2.13'
+const version = '3.2.14-alpha.1717685185218'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)

package/es/index.mjs

@@ -174,7 +174,7 @@ export * from './tooltip/index.mjs'
 export * from './uploader/index.mjs'
 export * from './watermark/index.mjs'
 
-const version = '3.2.13'
+const version = '3.2.14-alpha.1717685185218'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)

package/es/link/link.css

@@ -1 +1 @@
-:root { --link-default-color: #555; --link-primary-color: var(--color-primary); --link-danger-color: var(--color-danger); --link-success-color: var(--color-success); --link-warning-color: var(--color-warning); --link-info-color: var(--color-info); --link-disabled-color: var(--color-text-disabled); --link-font-size: var(--font-size-md); --link-focus-opacity: 0.8;}.var-link { position: relative; justify-content: center; align-items: center; outline: none; cursor: pointer; font-family: inherit; white-space: nowrap; text-decoration: none; font-size: var(--link-font-size); transition: opacity 0.15s;}.var-link--underline-always { text-decoration: underline;}.var-link--underline-hover:hover { text-decoration: underline;}.var-link--default { color: var(--link-default-color);}.var-link--primary { color: var(--link-primary-color);}.var-link--info { color: var(--link-info-color);}.var-link--success { color: var(--link-success-color);}.var-link--warning { color: var(--link-warning-color);}.var-link--danger { color: var(--link-danger-color);}.var-link--disabled { color: var(--link-disabled-color); cursor: not-allowed;}.var-link--focusing { opacity: var(--link-focus-opacity);}
+:root { --link-default-color: #555; --link-primary-color: var(--color-primary); --link-danger-color: var(--color-danger); --link-success-color: var(--color-success); --link-warning-color: var(--color-warning); --link-info-color: var(--color-info); --link-disabled-color: var(--color-text-disabled); --link-font-size: var(--font-size-md); --link-focus-opacity: 0.8;}.var-link { position: relative; justify-content: center; align-items: center; outline: none; cursor: pointer; font-family: inherit; white-space: nowrap; text-decoration: none; font-size: var(--link-font-size); transition: opacity 0.15s; -webkit-tap-highlight-color: transparent;}.var-link--underline-always { text-decoration: underline;}.var-link--underline-hover:hover { text-decoration: underline;}.var-link--default { color: var(--link-default-color);}.var-link--primary { color: var(--link-primary-color);}.var-link--info { color: var(--link-info-color);}.var-link--success { color: var(--link-success-color);}.var-link--warning { color: var(--link-warning-color);}.var-link--danger { color: var(--link-danger-color);}.var-link--disabled { color: var(--link-disabled-color); cursor: not-allowed;}.var-link--focusing { opacity: var(--link-focus-opacity);}

package/es/paper/paper.css

@@ -1 +1 @@
-:root { --paper-background: var(--color-surface-container-highest); --paper-border-radius: 4px;}.var-paper { background: var(--paper-background); transition: background-color 0.25s; overflow: hidden; border-radius: var(--paper-border-radius);}.var-paper--round { border-radius: 50%;}.var-paper--cursor { cursor: pointer;}
+:root { --paper-background: var(--color-surface-container-highest); --paper-border-radius: 4px;}.var-paper { background: var(--paper-background); transition: background-color 0.25s; overflow: hidden; border-radius: var(--paper-border-radius); -webkit-tap-highlight-color: transparent;}.var-paper--round { border-radius: 50%;}.var-paper--cursor { cursor: pointer;}

package/es/radio/Radio.mjs

@@ -85,7 +85,7 @@ function __render__(_ctx, _cache) {
               onClick: _cache[2] || (_cache[2] = (...args) => _ctx.handleTextClick && _ctx.handleTextClick(...args))
             },
             [
-              _renderSlot(_ctx.$slots, "default")
+              _renderSlot(_ctx.$slots, "default", { checked: _ctx.checked })
             ],
             2
             /* CLASS */

package/es/radio-group/RadioGroup.mjs

@@ -1,14 +1,16 @@
 import VarFormDetails from "../form-details/index.mjs";
+import RadioGroupOption from "./RadioGroupOption.mjs";
 import { computed, defineComponent, nextTick, watch } from "vue";
 import { props } from "./props.mjs";
 import { useValidation, createNamespace } from "../utils/components.mjs";
 import { useRadios } from "./provide.mjs";
 import { useForm } from "../form/provide.mjs";
-import { call, preventDefault } from "@varlet/shared";
+import { call, preventDefault, isArray } from "@varlet/shared";
 import { useEventListener } from "@varlet/use";
 const { name, n, classes } = createNamespace("radio-group");
-import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, createVNode as _createVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+import { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, resolveComponent as _resolveComponent, createBlock as _createBlock, createCommentVNode as _createCommentVNode, renderSlot as _renderSlot, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, createVNode as _createVNode } from "vue";
 function __render__(_ctx, _cache) {
+  const _component_radio_group_option = _resolveComponent("radio-group-option");
   const _component_var_form_details = _resolveComponent("var-form-details");
   return _openBlock(), _createElementBlock(
     "div",
@@ -22,6 +24,20 @@ function __render__(_ctx, _cache) {
           class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.n(`--${_ctx.direction}`)))
         },
         [
+          _ctx.radioGroupOptions.length ? (_openBlock(true), _createElementBlock(
+            _Fragment,
+            { key: 0 },
+            _renderList(_ctx.radioGroupOptions, (option) => {
+              return _openBlock(), _createBlock(_component_radio_group_option, {
+                key: option[_ctx.valueKey],
+                "label-key": _ctx.labelKey,
+                "value-key": _ctx.valueKey,
+                option
+              }, null, 8, ["label-key", "value-key", "option"]);
+            }),
+            128
+            /* KEYED_FRAGMENT */
+          )) : _createCommentVNode("v-if", true),
           _renderSlot(_ctx.$slots, "default")
         ],
         2
@@ -35,7 +51,7 @@ function __render__(_ctx, _cache) {
 }
 const __sfc__ = defineComponent({
   name,
-  components: { VarFormDetails },
+  components: { VarFormDetails, RadioGroupOption },
   props,
   setup(props2) {
     const { length, radios, bindRadios } = useRadios();
@@ -47,6 +63,7 @@ const __sfc__ = defineComponent({
       // expose
       resetValidation
     } = useValidation();
+    const radioGroupOptions = computed(() => isArray(props2.options) ? props2.options : []);
     const radioGroupErrorMessage = computed(() => errorMessage.value);
     const radioGroupProvider = {
       onToggle,
@@ -127,7 +144,8 @@ const __sfc__ = defineComponent({
       classes,
       reset,
       validate,
-      resetValidation
+      resetValidation,
+      radioGroupOptions
     };
   }
 });

package/es/radio-group/RadioGroupOption.mjs

@@ -0,0 +1,45 @@
+import { createVNode as _createVNode } from "vue";
+import { defineComponent } from "vue";
+import { isFunction } from "@varlet/shared";
+import { createNamespace } from "../utils/components.mjs";
+import Radio from "../radio/index.mjs";
+const {
+  name
+} = createNamespace("radio-group-option");
+var stdin_default = defineComponent({
+  name,
+  props: {
+    labelKey: {
+      type: String,
+      required: true
+    },
+    valueKey: {
+      type: String,
+      required: true
+    },
+    option: {
+      type: Object,
+      required: true
+    }
+  },
+  setup(props) {
+    return () => {
+      const {
+        option,
+        labelKey,
+        valueKey
+      } = props;
+      return _createVNode(Radio, {
+        "checkedValue": option[valueKey],
+        "disabled": option.disabled
+      }, {
+        default: ({
+          checked
+        }) => isFunction(option[labelKey]) ? option[labelKey](option, checked) : option[labelKey]
+      });
+    };
+  }
+});
+export {
+  stdin_default as default
+};

package/es/radio-group/props.mjs

@@ -8,6 +8,15 @@ const props = {
     type: String,
     default: "horizontal"
   },
+  options: Array,
+  labelKey: {
+    type: String,
+    default: "label"
+  },
+  valueKey: {
+    type: String,
+    default: "value"
+  },
   validateTrigger: {
     type: Array,
     default: () => ["onChange"]

package/es/radio-group/style/index.mjs

@@ -1,4 +1,8 @@
 import '../../styles/common.css'
 import '../../form-details/formDetails.css'
+import '../../ripple/ripple.css'
+import '../../hover-overlay/hoverOverlay.css'
+import '../../icon/icon.css'
+import '../../radio/radio.css'
 import '../radioGroup.css'
 import '../RadioGroupSfc.css'

package/es/snackbar/style/index.mjs

@@ -1,7 +1,7 @@
 import '../../styles/common.css'
+import '../SnackbarSfc.css'
 import '../../styles/elevation.css'
 import '../../loading/loading.css'
 import '../../icon/icon.css'
 import '../snackbar.css'
 import '../coreSfc.css'
-import '../SnackbarSfc.css'

package/es/style-provider/index.mjs

@@ -2,15 +2,33 @@ import VarStyleProvider from "./StyleProvider.mjs";
 import { formatStyleVars } from "../utils/elements.mjs";
 import { withInstall, withPropsDefaultsSetter } from "../utils/components.mjs";
 import { props as styleProviderProps } from "./props.mjs";
-const mountedVarKeys = [];
+const styleId = "varlet-style-vars";
+function removeStyle() {
+  const style = document.head.querySelector(`#${styleId}`);
+  if (style) {
+    document.head.removeChild(style);
+  }
+}
+function insertStyle(content) {
+  const style = document.createElement("style");
+  style.id = styleId;
+  style.innerHTML = content;
+  document.head.appendChild(style);
+}
 function StyleProvider(styleVars) {
-  mountedVarKeys.forEach((key) => document.documentElement.style.removeProperty(key));
-  mountedVarKeys.length = 0;
+  if (styleVars == null) {
+    removeStyle();
+    return;
+  }
   const styles = formatStyleVars(styleVars != null ? styleVars : {});
-  Object.entries(styles).forEach(([key, value]) => {
-    document.documentElement.style.setProperty(key, value);
-    mountedVarKeys.push(key);
-  });
+  const content = Object.entries(styles).reduce((content2, [key, value]) => {
+    content2 += `${key}:${value};`;
+    return content2;
+  }, `:root:root {
+`);
+  removeStyle();
+  insertStyle(`${content}
+}`);
 }
 StyleProvider.Component = VarStyleProvider;
 withInstall(VarStyleProvider);