@varlet/ui 3.3.1 → 3.3.2

package/es/app-bar/AppBar.mjs

@@ -20,6 +20,7 @@ function __render__(_ctx, _cache) {
             [_ctx.safeAreaTop, _ctx.n("--safe-area-top")],
             [_ctx.round, _ctx.n("--round")],
             [_ctx.fixed, _ctx.n("--fixed")],
+            [_ctx.border, _ctx.n("--border")],
             _ctx.formatElevation(_ctx.elevation, 3)
           ),
           ref: "appBar",

package/es/app-bar/appBar.css

@@ -1 +1 @@
-:root { --app-bar-color: var(--color-primary); --app-bar-title-padding: 0 12px; --app-bar-title-font-size: var(--font-size-lg); --app-bar-text-color: #fff; --app-bar-height: 54px; --app-bar-left-gap: 6px; --app-bar-right-gap: 6px; --app-bar-border-radius: 4px; --app-bar-font-size: var(--font-size-lg);}.var-app-bar { position: relative; width: 100%; font-size: var(--app-bar-font-size); background: var(--app-bar-color); color: var(--app-bar-text-color); transition: background-color 0.25s;}.var-app-bar__toolbar { position: relative; display: flex; justify-content: center; align-items: center; height: var(--app-bar-height);}.var-app-bar__title { font-size: var(--app-bar-title-font-size); flex: 1; display: flex; justify-content: center; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding: var(--app-bar-title-padding);}.var-app-bar__left,.var-app-bar__right { display: flex; align-items: center; height: 100%;}.var-app-bar__left { position: absolute; top: 0; left: var(--app-bar-left-gap);}.var-app-bar__right { position: absolute; top: 0; right: var(--app-bar-right-gap);}.var-app-bar--round { border-radius: var(--app-bar-border-radius);}.var-app-bar--safe-area-top { padding-top: constant(safe-area-inset-top); padding-top: env(safe-area-inset-top); box-sizing: content-box !important;}.var-app-bar--fixed { position: fixed; top: 0; left: 0;}
+:root { --app-bar-color: var(--color-primary); --app-bar-title-padding: 0 12px; --app-bar-title-font-size: var(--font-size-lg); --app-bar-text-color: #fff; --app-bar-height: 54px; --app-bar-left-gap: 6px; --app-bar-right-gap: 6px; --app-bar-border-radius: 4px; --app-bar-font-size: var(--font-size-lg); --app-bar-border-bottom: thin solid var(--color-outline);}.var-app-bar { position: relative; width: 100%; font-size: var(--app-bar-font-size); background: var(--app-bar-color); color: var(--app-bar-text-color); transition: background-color 0.25s;}.var-app-bar__toolbar { position: relative; display: flex; justify-content: center; align-items: center; height: var(--app-bar-height);}.var-app-bar__title { font-size: var(--app-bar-title-font-size); flex: 1; height: 100%; display: flex; align-items: center; justify-content: center; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding: var(--app-bar-title-padding);}.var-app-bar__left,.var-app-bar__right { display: flex; align-items: center; height: 100%;}.var-app-bar__left { position: absolute; top: 0; left: var(--app-bar-left-gap);}.var-app-bar__right { position: absolute; top: 0; right: var(--app-bar-right-gap);}.var-app-bar--round { border-radius: var(--app-bar-border-radius);}.var-app-bar--safe-area-top { padding-top: constant(safe-area-inset-top); padding-top: env(safe-area-inset-top); box-sizing: content-box !important;}.var-app-bar--fixed { position: fixed; top: 0; left: 0;}.var-app-bar--border { border-bottom: var(--app-bar-border-bottom);}

package/es/app-bar/props.mjs

@@ -14,6 +14,7 @@ const props = {
   image: String,
   imageLinearGradient: String,
   safeAreaTop: Boolean,
+  border: Boolean,
   zIndex: {
     type: [Number, String],
     default: 1

package/es/checkbox-group/CheckboxGroup.mjs

@@ -1,15 +1,16 @@
 import VarFormDetails from "../form-details/index.mjs";
-import CheckboxGroupOption from "./CheckboxGroupOption.mjs";
+import VarCheckbox from "../checkbox/index.mjs";
 import { defineComponent, computed, watch, nextTick } from "vue";
 import { props } from "./props.mjs";
-import { useValidation, createNamespace } from "../utils/components.mjs";
+import { useValidation, createNamespace, MaybeVNode } from "../utils/components.mjs";
 import { useCheckboxes } from "./provide.mjs";
 import { useForm } from "../form/provide.mjs";
-import { uniq, call, isArray } from "@varlet/shared";
+import { uniq, call, isArray, isFunction } from "@varlet/shared";
 const { name, n, classes } = createNamespace("checkbox-group");
-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";
+import { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, resolveComponent as _resolveComponent, createVNode as _createVNode, withCtx as _withCtx, createBlock as _createBlock, createCommentVNode as _createCommentVNode, renderSlot as _renderSlot, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode } from "vue";
 function __render__(_ctx, _cache) {
-  const _component_checkbox_group_option = _resolveComponent("checkbox-group-option");
+  const _component_maybe_v_node = _resolveComponent("maybe-v-node");
+  const _component_var_checkbox = _resolveComponent("var-checkbox");
   const _component_var_form_details = _resolveComponent("var-form-details");
   return _openBlock(), _createElementBlock(
     "div",
@@ -27,12 +28,19 @@ function __render__(_ctx, _cache) {
             _Fragment,
             { key: 0 },
             _renderList(_ctx.checkboxGroupOptions, (option) => {
-              return _openBlock(), _createBlock(_component_checkbox_group_option, {
+              return _openBlock(), _createBlock(_component_var_checkbox, {
                 key: option[_ctx.valueKey],
-                "label-key": _ctx.labelKey,
-                "value-key": _ctx.valueKey,
-                option
-              }, null, 8, ["label-key", "value-key", "option"]);
+                "checked-value": option[_ctx.valueKey],
+                disabled: option.disabled
+              }, {
+                default: _withCtx(({ checked }) => [
+                  _createVNode(_component_maybe_v_node, {
+                    is: _ctx.isFunction(option[_ctx.labelKey]) ? option[_ctx.labelKey](option, checked) : option[_ctx.labelKey]
+                  }, null, 8, ["is"])
+                ]),
+                _: 2
+                /* DYNAMIC */
+              }, 1032, ["checked-value", "disabled"]);
             }),
             128
             /* KEYED_FRAGMENT */
@@ -50,7 +58,7 @@ function __render__(_ctx, _cache) {
 }
 const __sfc__ = defineComponent({
   name,
-  components: { VarFormDetails, CheckboxGroupOption },
+  components: { VarFormDetails, VarCheckbox, MaybeVNode },
   props,
   setup(props2) {
     const max = computed(() => props2.max);
@@ -140,7 +148,8 @@ const __sfc__ = defineComponent({
       inverseAll,
       reset,
       validate,
-      resetValidation
+      resetValidation,
+      isFunction
     };
   }
 });

package/es/index.bundle.mjs

@@ -265,7 +265,7 @@ import './tooltip/style/index.mjs'
 import './uploader/style/index.mjs'
 import './watermark/style/index.mjs'
 
-const version = '3.3.1'
+const version = '3.3.2'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)

package/es/index.mjs

@@ -176,7 +176,7 @@ export * from './tooltip/index.mjs'
 export * from './uploader/index.mjs'
 export * from './watermark/index.mjs'
 
-const version = '3.3.1'
+const version = '3.3.2'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)

package/es/radio-group/RadioGroup.mjs

@@ -1,16 +1,17 @@
 import VarFormDetails from "../form-details/index.mjs";
-import RadioGroupOption from "./RadioGroupOption.mjs";
+import VarRadio from "../radio/index.mjs";
 import { computed, defineComponent, nextTick, watch } from "vue";
 import { props } from "./props.mjs";
-import { useValidation, createNamespace } from "../utils/components.mjs";
+import { useValidation, createNamespace, MaybeVNode } from "../utils/components.mjs";
 import { useRadios } from "./provide.mjs";
 import { useForm } from "../form/provide.mjs";
-import { call, preventDefault, isArray } from "@varlet/shared";
+import { call, preventDefault, isArray, isFunction } from "@varlet/shared";
 import { useEventListener } from "@varlet/use";
 const { name, n, classes } = createNamespace("radio-group");
-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";
+import { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, resolveComponent as _resolveComponent, createVNode as _createVNode, withCtx as _withCtx, createBlock as _createBlock, createCommentVNode as _createCommentVNode, renderSlot as _renderSlot, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode } from "vue";
 function __render__(_ctx, _cache) {
-  const _component_radio_group_option = _resolveComponent("radio-group-option");
+  const _component_maybe_v_node = _resolveComponent("maybe-v-node");
+  const _component_var_radio = _resolveComponent("var-radio");
   const _component_var_form_details = _resolveComponent("var-form-details");
   return _openBlock(), _createElementBlock(
     "div",
@@ -28,12 +29,19 @@ function __render__(_ctx, _cache) {
             _Fragment,
             { key: 0 },
             _renderList(_ctx.radioGroupOptions, (option) => {
-              return _openBlock(), _createBlock(_component_radio_group_option, {
+              return _openBlock(), _createBlock(_component_var_radio, {
                 key: option[_ctx.valueKey],
-                "label-key": _ctx.labelKey,
-                "value-key": _ctx.valueKey,
-                option
-              }, null, 8, ["label-key", "value-key", "option"]);
+                "checked-value": option[_ctx.valueKey],
+                disabled: option.disabled
+              }, {
+                default: _withCtx(({ checked }) => [
+                  _createVNode(_component_maybe_v_node, {
+                    is: _ctx.isFunction(option[_ctx.labelKey]) ? option[_ctx.labelKey](option, checked) : option[_ctx.labelKey]
+                  }, null, 8, ["is"])
+                ]),
+                _: 2
+                /* DYNAMIC */
+              }, 1032, ["checked-value", "disabled"]);
             }),
             128
             /* KEYED_FRAGMENT */
@@ -51,7 +59,7 @@ function __render__(_ctx, _cache) {
 }
 const __sfc__ = defineComponent({
   name,
-  components: { VarFormDetails, RadioGroupOption },
+  components: { VarFormDetails, VarRadio, MaybeVNode },
   props,
   setup(props2) {
     const { length, radios, bindRadios } = useRadios();
@@ -145,6 +153,7 @@ const __sfc__ = defineComponent({
       reset,
       validate,
       resetValidation,
+      isFunction,
       radioGroupOptions
     };
   }