@varlet/ui 3.2.10 → 3.2.11

package/es/bottom-navigation/BottomNavigation.mjs

@@ -19,7 +19,7 @@ import { defineComponent, ref, computed, onUpdated, watch } from "vue";
 import { props } from "./props.mjs";
 import { useBottomNavigationItems } from "./provide.mjs";
 import { createNamespace } from "../utils/components.mjs";
-import { isNumber, normalizeToArray, call } from "@varlet/shared";
+import { isNumber, normalizeToArray, call, getRect } from "@varlet/shared";
 import { onSmartMounted } from "@varlet/use";
 const { name, n, classes } = createNamespace("bottom-navigation");
 const { n: nItem } = createNamespace("bottom-navigation-item");
@@ -29,42 +29,59 @@ const RIGHT_SPACE_CLASS = nItem("--right-space");
 const defaultFabProps = {
   type: "primary"
 };
-import { renderSlot as _renderSlot, resolveComponent as _resolveComponent, mergeProps as _mergeProps, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createElementBlock as _createElementBlock } from "vue";
+import { renderSlot as _renderSlot, resolveComponent as _resolveComponent, mergeProps as _mergeProps, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, createElementVNode as _createElementVNode, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createElementBlock as _createElementBlock, Fragment as _Fragment } from "vue";
 function __render__(_ctx, _cache) {
   const _component_var_button = _resolveComponent("var-button");
   return _openBlock(), _createElementBlock(
-    "div",
-    {
-      class: _normalizeClass(
-        _ctx.classes(
-          _ctx.n(),
-          _ctx.n("$--box"),
-          [_ctx.fixed, _ctx.n("--fixed")],
-          [_ctx.border, _ctx.n("--border")],
-          [_ctx.safeArea, _ctx.n("--safe-area")],
-          [_ctx.variant, _ctx.n("--variant")]
-        )
-      ),
-      ref: "bottomNavigationDom",
-      style: _normalizeStyle(`z-index:${_ctx.zIndex}`)
-    },
+    _Fragment,
+    null,
     [
-      _renderSlot(_ctx.$slots, "default"),
-      _ctx.$slots.fab ? (_openBlock(), _createBlock(_component_var_button, _mergeProps({
-        key: 0,
-        class: _ctx.classes(_ctx.n("fab"), [_ctx.length % 2, _ctx.n("--fab-right"), _ctx.n("--fab-center")]),
-        "var-bottom-navigation__fab": "",
-        onClick: _ctx.handleFabClick
-      }, _ctx.fabProps), {
-        default: _withCtx(() => [
-          _renderSlot(_ctx.$slots, "fab")
-        ]),
-        _: 3
-        /* FORWARDED */
-      }, 16, ["class", "onClick"])) : _createCommentVNode("v-if", true)
+      _createElementVNode(
+        "div",
+        _mergeProps({
+          class: _ctx.classes(
+            _ctx.n(),
+            _ctx.n("$--box"),
+            [_ctx.fixed, _ctx.n("--fixed")],
+            [_ctx.border, _ctx.n("--border")],
+            [_ctx.safeArea, _ctx.n("--safe-area")],
+            [_ctx.variant, _ctx.n("--variant")]
+          ),
+          ref: "bottomNavigationDom",
+          style: `z-index:${_ctx.zIndex}`
+        }, _ctx.$attrs),
+        [
+          _renderSlot(_ctx.$slots, "default"),
+          _ctx.$slots.fab ? (_openBlock(), _createBlock(_component_var_button, _mergeProps({
+            key: 0,
+            class: _ctx.classes(_ctx.n("fab"), [_ctx.length % 2, _ctx.n("--fab-right"), _ctx.n("--fab-center")]),
+            "var-bottom-navigation__fab": "",
+            onClick: _ctx.handleFabClick
+          }, _ctx.fabProps), {
+            default: _withCtx(() => [
+              _renderSlot(_ctx.$slots, "fab")
+            ]),
+            _: 3
+            /* FORWARDED */
+          }, 16, ["class", "onClick"])) : _createCommentVNode("v-if", true)
+        ],
+        16
+        /* FULL_PROPS */
+      ),
+      _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({
@@ -77,6 +94,7 @@ const __sfc__ = defineComponent({
     const activeColor = computed(() => props2.activeColor);
     const inactiveColor = computed(() => props2.inactiveColor);
     const variant = computed(() => props2.variant);
+    const placeholderHeight = ref();
     const fabProps = ref({});
     const { length, bottomNavigationItems, bindBottomNavigationItem } = useBottomNavigationItems();
     const bottomNavigationProvider = {
@@ -96,6 +114,7 @@ const __sfc__ = defineComponent({
       { immediate: true, deep: true }
     );
     onSmartMounted(() => {
+      resizePlaceholder();
       if (!slots.fab) {
         return;
       }
@@ -182,10 +201,18 @@ const __sfc__ = defineComponent({
     function handleFabClick() {
       call(props2.onFabClick);
     }
+    function resizePlaceholder() {
+      if (!props2.fixed || !props2.placeholder) {
+        return;
+      }
+      const { height } = getRect(bottomNavigationDom.value);
+      placeholderHeight.value = `${height}px`;
+    }
     return {
       length,
       bottomNavigationDom,
       fabProps,
+      placeholderHeight,
       n,
       classes,
       handleFabClick

package/es/bottom-navigation/props.mjs

@@ -14,6 +14,7 @@ const props = {
   safeArea: Boolean,
   activeColor: String,
   inactiveColor: String,
+  placeholder: Boolean,
   fabProps: Object,
   onChange: defineListenerProp(),
   onBeforeChange: defineListenerProp(),

package/es/checkbox-group/CheckboxGroup.mjs

@@ -1,13 +1,15 @@
 import VarFormDetails from "../form-details/index.mjs";
+import CheckboxGroupOption from "./CheckboxGroupOption.mjs";
 import { defineComponent, computed, watch, nextTick } from "vue";
 import { props } from "./props.mjs";
 import { useValidation, createNamespace } from "../utils/components.mjs";
 import { useCheckboxes } from "./provide.mjs";
 import { useForm } from "../form/provide.mjs";
-import { uniq, call } from "@varlet/shared";
+import { uniq, call, isArray } from "@varlet/shared";
 const { name, n, classes } = createNamespace("checkbox-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_checkbox_group_option = _resolveComponent("checkbox-group-option");
   const _component_var_form_details = _resolveComponent("var-form-details");
   return _openBlock(), _createElementBlock(
     "div",
@@ -21,6 +23,19 @@ function __render__(_ctx, _cache) {
           class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.n(`--${_ctx.direction}`)))
         },
         [
+          _ctx.checkboxGroupOptions.length ? (_openBlock(true), _createElementBlock(
+            _Fragment,
+            { key: 0 },
+            _renderList(_ctx.checkboxGroupOptions, (option) => {
+              return _openBlock(), _createBlock(_component_checkbox_group_option, {
+                key: option.value.toString(),
+                checked: _ctx.modelValue.includes(option.value),
+                option
+              }, null, 8, ["checked", "option"]);
+            }),
+            128
+            /* KEYED_FRAGMENT */
+          )) : _createCommentVNode("v-if", true),
           _renderSlot(_ctx.$slots, "default")
         ],
         2
@@ -34,11 +49,12 @@ function __render__(_ctx, _cache) {
 }
 const __sfc__ = defineComponent({
   name,
-  components: { VarFormDetails },
+  components: { VarFormDetails, CheckboxGroupOption },
   props,
   setup(props2) {
     const max = computed(() => props2.max);
     const checkedCount = computed(() => props2.modelValue.length);
+    const checkboxGroupOptions = computed(() => isArray(props2.options) ? props2.options : []);
     const { length, checkboxes, bindCheckboxes } = useCheckboxes();
     const { bindForm } = useForm();
     const {
@@ -88,7 +104,7 @@ const __sfc__ = defineComponent({
       change(modelValue.filter((value) => value !== changedValue));
     }
     function syncCheckboxes() {
-      return checkboxes.forEach(({ sync }) => sync(props2.modelValue));
+      checkboxes.forEach(({ sync }) => sync(props2.modelValue));
     }
     function resetWithAnimation() {
       checkboxes.forEach((checkbox) => checkbox.resetWithAnimation());
@@ -116,6 +132,7 @@ const __sfc__ = defineComponent({
     }
     return {
       errorMessage,
+      checkboxGroupOptions,
       n,
       classes,
       checkAll,

package/es/checkbox-group/CheckboxGroupOption.mjs

@@ -0,0 +1,28 @@
+import { createVNode as _createVNode } from "vue";
+import { defineComponent } from "vue";
+import Checkbox from "../checkbox/index.mjs";
+import { isFunction } from "@varlet/shared";
+
+var stdin_default = defineComponent({
+  name: "CheckboxGroupOption",
+  props: {
+    checked: Boolean,
+    option: Object
+  },
+  setup(props) {
+    return () => {
+      if (props.option == null) {
+        return;
+      }
+      return _createVNode(Checkbox, {
+        "checkedValue": props.option.value,
+        "disabled": props.option.disabled
+      }, {
+        default: () => [isFunction(props.option.label) ? props.option.label(props.option, props.checked) : props.option.label]
+      });
+    };
+  }
+});
+export {
+  stdin_default as default
+};

package/es/checkbox-group/props.mjs

@@ -5,6 +5,7 @@ const props = {
     default: () => []
   },
   max: [String, Number],
+  options: Array,
   direction: {
     type: String,
     default: "horizontal"

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

@@ -1,3 +1,4 @@
+import '../../checkbox/checkbox.css'
 import '../../styles/common.css'
 import '../../form-details/formDetails.css'
 import '../checkboxGroup.css'

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.10'
+const version = '3.2.11'
 
 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.10'
+const version = '3.2.11'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)

package/es/utils/shared.mjs

@@ -36,9 +36,13 @@ const createCache = (max) => {
 const linear = (value) => value;
 const cubic = (value) => value ** 3;
 const easeInOutCubic = (value) => value < 0.5 ? cubic(value * 2) / 2 : 1 - cubic((1 - value) * 2) / 2;
-const padStart = (str = "", maxLength, fillString = "") => {
-  if (str.length >= maxLength)
+const padStart = (str, maxLength, fillString = "") => {
+  if (str === void 0) {
+    str = "";
+  }
+  if (str.length >= maxLength) {
     return str;
+  }
   const len = maxLength - str.length;
   const repeatCount = Math.floor(len / fillString.length);
   return fillString.repeat(repeatCount) + fillString.slice(0, len % fillString.length) + str;