@varlet/ui 2.16.1 → 2.16.3-alpha.1694267513697

package/es/button-group/ButtonGroup.mjs

@@ -3,6 +3,7 @@ import { useButtons } from './provide.mjs';
 import { createNamespace, formatElevation } from '../utils/components.mjs';
 import { props } from './props.mjs';
 var {
+  name,
   n,
   classes
 } = createNamespace('button-group');
@@ -14,7 +15,7 @@ function __render__(_ctx, _cache) {
 }
 
 var __sfc__ = defineComponent({
-  name: 'VarButtonGroup',
+  name,
   props,
   setup(props) {
     var {

package/es/card/Card.mjs

@@ -11,6 +11,7 @@ import { call, createNamespace, formatElevation } from '../utils/components.mjs'
 import { useZIndex } from '../context/zIndex.mjs';
 import { useLock } from '../context/lock.mjs';
 var {
+  name,
   n,
   classes
 } = createNamespace('card');
@@ -106,7 +107,7 @@ function __render__(_ctx, _cache) {
   }]]);
 }
 var __sfc__ = defineComponent({
-  name: 'VarCard',
+  name,
   directives: {
     Ripple
   },
@@ -134,13 +135,24 @@ var __sfc__ = defineComponent({
     var {
       zIndex
     } = useZIndex(() => props.floating, 1);
-    useLock(() => props.floating, () => !isRow.value);
     var dropdownFloaterTop = 'auto';
     var dropdownFloaterLeft = 'auto';
     var dropper = null;
     var floater = ref(null);
-    var floating = /*#__PURE__*/function () {
-      var _ref = _asyncToGenerator(function* () {
+    useLock(() => props.floating, () => !isRow.value);
+    watch(() => props.floating, value => {
+      if (isRow.value) return;
+      nextTick(() => {
+        value ? floating() : dropdown();
+      });
+    }, {
+      immediate: true
+    });
+    function floating() {
+      return _floating.apply(this, arguments);
+    }
+    function _floating() {
+      _floating = _asyncToGenerator(function* () {
         clearTimeout(floater.value);
         clearTimeout(dropper);
         floater.value = null;
@@ -172,11 +184,9 @@ var __sfc__ = defineComponent({
           floated.value = true;
         }), props.ripple ? RIPPLE_DELAY : 0);
       });
-      return function floating() {
-        return _ref.apply(this, arguments);
-      };
-    }();
-    var dropdown = () => {
+      return _floating.apply(this, arguments);
+    }
+    function dropdown() {
       clearTimeout(dropper);
       clearTimeout(floater.value);
       floater.value = null;
@@ -200,25 +210,14 @@ var __sfc__ = defineComponent({
         floaterPosition.value = undefined;
         floated.value = false;
       }, props.floatingDuration);
-    };
-    var close = () => {
+    }
+    function close() {
       call(props['onUpdate:floating'], false);
-    };
-    var handleClick = e => {
+    }
+    function handleClick(e) {
       call(props.onClick, e);
-    };
-    watch(() => props.floating, value => {
-      if (isRow.value) return;
-      nextTick(() => {
-        value ? floating() : dropdown();
-      });
-    }, {
-      immediate: true
-    });
+    }
     return {
-      n,
-      classes,
-      toSizeUnit,
       card,
       cardFloater,
       holderWidth,
@@ -234,9 +233,12 @@ var __sfc__ = defineComponent({
       opacity,
       zIndex,
       isRow,
-      close,
       showFloatingButtons,
       floated,
+      n,
+      classes,
+      toSizeUnit,
+      close,
       formatElevation,
       handleClick
     };

package/es/cell/Cell.mjs

@@ -5,6 +5,7 @@ import { props } from './props.mjs';
 import { call, createNamespace } from '../utils/components.mjs';
 import { toSizeUnit } from '../utils/elements.mjs';
 var {
+  name,
   n,
   classes
 } = createNamespace('cell');
@@ -39,7 +40,7 @@ function __render__(_ctx, _cache) {
   }]]);
 }
 var __sfc__ = defineComponent({
-  name: 'VarCell',
+  name,
   components: {
     VarIcon
   },
@@ -57,14 +58,14 @@ var __sfc__ = defineComponent({
         '--cell-border-right': toSizeUnit(props.borderOffset)
       };
     });
-    var handleClick = e => {
+    function handleClick(e) {
       call(props.onClick, e);
-    };
+    }
     return {
+      borderOffsetStyles,
       n,
       classes,
       toSizeUnit,
-      borderOffsetStyles,
       handleClick
     };
   }

package/es/checkbox/Checkbox.mjs

@@ -9,6 +9,7 @@ import { useValidation, createNamespace, call, useVModel } from '../utils/compon
 import { useCheckboxGroup } from './provide.mjs';
 import { useForm } from '../form/provide.mjs';
 var {
+  name,
   n,
   classes
 } = createNamespace('checkbox');
@@ -64,7 +65,7 @@ function __render__(_ctx, _cache) {
 }
 
 var __sfc__ = defineComponent({
-  name: 'VarCheckbox',
+  name,
   directives: {
     Ripple,
     Hover
@@ -77,6 +78,7 @@ var __sfc__ = defineComponent({
   props,
   setup(props) {
     var value = useVModel(props, 'modelValue');
+    var isIndeterminate = useVModel(props, 'indeterminate');
     var checked = computed(() => value.value === props.checkedValue);
     var checkedValue = computed(() => props.checkedValue);
     var withAnimation = ref(false);
@@ -99,8 +101,18 @@ var __sfc__ = defineComponent({
       // expose
       resetValidation
     } = useValidation();
-    var isIndeterminate = useVModel(props, 'indeterminate');
-    var validateWithTrigger = trigger => {
+    var checkboxProvider = {
+      checkedValue,
+      checked,
+      sync,
+      validate,
+      resetValidation,
+      reset,
+      resetWithAnimation
+    };
+    call(bindCheckboxGroup, checkboxProvider);
+    call(bindForm, checkboxProvider);
+    function validateWithTrigger(trigger) {
       nextTick(() => {
         var {
           validateTrigger,
@@ -109,8 +121,8 @@ var __sfc__ = defineComponent({
         } = props;
         vt(validateTrigger, trigger, rules, modelValue);
       });
-    };
-    var change = changedValue => {
+    }
+    function change(changedValue) {
       var {
         checkedValue,
         onChange
@@ -120,8 +132,8 @@ var __sfc__ = defineComponent({
       call(onChange, value.value);
       validateWithTrigger('onChange');
       changedValue === checkedValue ? checkboxGroup == null ? void 0 : checkboxGroup.onChecked(checkedValue) : checkboxGroup == null ? void 0 : checkboxGroup.onUnchecked(checkedValue);
-    };
-    var handleClick = e => {
+    }
+    function handleClick(e) {
       var {
         disabled,
         readonly,
@@ -142,26 +154,26 @@ var __sfc__ = defineComponent({
         return;
       }
       change(checked.value ? uncheckedValue : checkedValue);
-    };
-    var sync = values => {
+    }
+    function sync(values) {
       var {
         checkedValue,
         uncheckedValue
       } = props;
       value.value = values.includes(checkedValue) ? checkedValue : uncheckedValue;
-    };
-    var resetWithAnimation = () => {
+    }
+    function resetWithAnimation() {
       withAnimation.value = false;
-    };
+    }
 
     // expose
-    var reset = () => {
+    function reset() {
       value.value = props.uncheckedValue;
       resetValidation();
-    };
+    }
 
     // expose
-    var toggle = changedValue => {
+    function toggle(changedValue) {
       var {
         checkedValue,
         uncheckedValue
@@ -171,21 +183,12 @@ var __sfc__ = defineComponent({
         changedValue = checked.value ? uncheckedValue : checkedValue;
       }
       change(changedValue);
-    };
+    }
 
     // expose
-    var validate = () => v(props.rules, props.modelValue);
-    var checkboxProvider = {
-      checkedValue,
-      checked,
-      sync,
-      validate,
-      resetValidation,
-      reset,
-      resetWithAnimation
-    };
-    call(bindCheckboxGroup, checkboxProvider);
-    call(bindForm, checkboxProvider);
+    function validate() {
+      return v(props.rules, props.modelValue);
+    }
     return {
       isIndeterminate,
       withAnimation,
@@ -195,9 +198,9 @@ var __sfc__ = defineComponent({
       formDisabled: form == null ? void 0 : form.disabled,
       formReadonly: form == null ? void 0 : form.readonly,
       hovering,
-      handleHovering,
       n,
       classes,
+      handleHovering,
       handleClick,
       toggle,
       reset,

package/es/checkbox-group/CheckboxGroup.mjs

@@ -6,6 +6,7 @@ import { useCheckboxes } from './provide.mjs';
 import { useForm } from '../form/provide.mjs';
 import { uniq } from '@varlet/shared';
 var {
+  name,
   n,
   classes
 } = createNamespace('checkbox-group');
@@ -22,7 +23,7 @@ function __render__(_ctx, _cache) {
 }
 
 var __sfc__ = defineComponent({
-  name: 'VarCheckboxGroup',
+  name,
   components: {
     VarFormDetails
   },
@@ -46,7 +47,23 @@ var __sfc__ = defineComponent({
       resetValidation
     } = useValidation();
     var checkboxGroupErrorMessage = computed(() => errorMessage.value);
-    var validateWithTrigger = trigger => {
+    var checkboxGroupProvider = {
+      max,
+      checkedCount,
+      onChecked,
+      onUnchecked,
+      validate,
+      resetValidation,
+      reset,
+      errorMessage: checkboxGroupErrorMessage
+    };
+    watch(() => props.modelValue, syncCheckboxes, {
+      deep: true
+    });
+    watch(() => length.value, syncCheckboxes);
+    bindCheckboxes(checkboxGroupProvider);
+    call(bindForm, checkboxGroupProvider);
+    function validateWithTrigger(trigger) {
       nextTick(() => {
         var {
           validateTrigger,
@@ -55,21 +72,21 @@ var __sfc__ = defineComponent({
         } = props;
         vt(validateTrigger, trigger, rules, modelValue);
       });
-    };
-    var change = changedModelValue => {
+    }
+    function change(changedModelValue) {
       call(props['onUpdate:modelValue'], changedModelValue);
       call(props.onChange, changedModelValue);
       validateWithTrigger('onChange');
-    };
-    var onChecked = changedValue => {
+    }
+    function onChecked(changedValue) {
       var {
         modelValue
       } = props;
       if (!modelValue.includes(changedValue)) {
         change([...modelValue, changedValue]);
       }
-    };
-    var onUnchecked = changedValue => {
+    }
+    function onUnchecked(changedValue) {
       var {
         modelValue
       } = props;
@@ -77,19 +94,21 @@ var __sfc__ = defineComponent({
         return;
       }
       change(modelValue.filter(value => value !== changedValue));
-    };
-    var syncCheckboxes = () => checkboxes.forEach(_ref => {
-      var {
-        sync
-      } = _ref;
-      return sync(props.modelValue);
-    });
-    var resetWithAnimation = () => {
+    }
+    function syncCheckboxes() {
+      return checkboxes.forEach(_ref => {
+        var {
+          sync
+        } = _ref;
+        return sync(props.modelValue);
+      });
+    }
+    function resetWithAnimation() {
       checkboxes.forEach(checkbox => checkbox.resetWithAnimation());
-    };
+    }
 
     // expose
-    var checkAll = () => {
+    function checkAll() {
       var checkedValues = checkboxes.map(_ref2 => {
         var {
           checkedValue
@@ -100,10 +119,10 @@ var __sfc__ = defineComponent({
       resetWithAnimation();
       call(props['onUpdate:modelValue'], changedModelValue);
       return changedModelValue;
-    };
+    }
 
     // expose
-    var inverseAll = () => {
+    function inverseAll() {
       var checkedValues = checkboxes.filter(_ref3 => {
         var {
           checked
@@ -119,32 +138,18 @@ var __sfc__ = defineComponent({
       resetWithAnimation();
       call(props['onUpdate:modelValue'], changedModelValue);
       return changedModelValue;
-    };
+    }
 
     // expose
-    var reset = () => {
+    function reset() {
       call(props['onUpdate:modelValue'], []);
       resetValidation();
-    };
+    }
 
     // expose
-    var validate = () => v(props.rules, props.modelValue);
-    watch(() => props.modelValue, syncCheckboxes, {
-      deep: true
-    });
-    watch(() => length.value, syncCheckboxes);
-    var checkboxGroupProvider = {
-      max,
-      checkedCount,
-      onChecked,
-      onUnchecked,
-      validate,
-      resetValidation,
-      reset,
-      errorMessage: checkboxGroupErrorMessage
-    };
-    bindCheckboxes(checkboxGroupProvider);
-    call(bindForm, checkboxGroupProvider);
+    function validate() {
+      return v(props.rules, props.modelValue);
+    }
     return {
       errorMessage,
       n,

package/es/chip/Chip.mjs

@@ -3,6 +3,7 @@ import { defineComponent, computed } from 'vue';
 import { props } from './props.mjs';
 import { call, createNamespace } from '../utils/components.mjs';
 var {
+  name,
   n,
   classes
 } = createNamespace('chip');
@@ -31,7 +32,7 @@ function __render__(_ctx, _cache) {
   }, 8 /* PROPS */, ["name"]);
 }
 var __sfc__ = defineComponent({
-  name: 'VarChip',
+  name,
   components: {
     VarIcon
   },
@@ -68,14 +69,14 @@ var __sfc__ = defineComponent({
       var roundClass = round ? n('--round') : null;
       return [n("--" + size), blockClass, plainTypeClass, roundClass];
     });
-    var handleClose = e => {
+    function handleClose(e) {
       call(props.onClose, e);
-    };
+    }
     return {
-      n,
-      classes,
       chipStyles,
       contentClass,
+      n,
+      classes,
       handleClose
     };
   }

package/es/col/Col.mjs

@@ -5,6 +5,7 @@ import { useRow } from './provide.mjs';
 import { padStartFlex, toSizeUnit } from '../utils/elements.mjs';
 import { createNamespace, call } from '../utils/components.mjs';
 var {
+  name,
   n,
   classes
 } = createNamespace('col');
@@ -17,7 +18,9 @@ function __render__(_ctx, _cache) {
       justifyContent: _ctx.padStartFlex(_ctx.justify),
       alignItems: _ctx.padStartFlex(_ctx.align),
       paddingLeft: _ctx.toSizeUnit(_ctx.padding.left),
-      paddingRight: _ctx.toSizeUnit(_ctx.padding.right)
+      paddingRight: _ctx.toSizeUnit(_ctx.padding.right),
+      paddingTop: _ctx.toSizeUnit(_ctx.padding.top),
+      paddingBottom: _ctx.toSizeUnit(_ctx.padding.bottom)
     }),
     onClick: _cache[0] || (_cache[0] = function () {
       return _ctx.handleClick && _ctx.handleClick(...arguments);
@@ -26,15 +29,17 @@ function __render__(_ctx, _cache) {
 }
 
 var __sfc__ = defineComponent({
-  name: 'VarCol',
+  name,
   props,
   setup(props) {
+    var span = computed(() => toNumber(props.span));
+    var offset = computed(() => toNumber(props.offset));
     var padding = ref({
       left: 0,
-      right: 0
+      right: 0,
+      top: 0,
+      bottom: 0
     });
-    var span = computed(() => toNumber(props.span));
-    var offset = computed(() => toNumber(props.offset));
     var {
       row,
       bindRow
@@ -44,7 +49,11 @@ var __sfc__ = defineComponent({
         padding.value = pad;
       }
     };
-    var getSize = (mode, size) => {
+    watch([() => props.span, () => props.offset], () => {
+      row == null ? void 0 : row.computePadding();
+    });
+    call(bindRow, colProvider);
+    function getSize(mode, size) {
       var classes = [];
       if (size == null) {
         return classes;
@@ -60,23 +69,19 @@ var __sfc__ = defineComponent({
         Number(size) >= 0 && classes.push(n("--span-" + mode + "-" + size));
       }
       return classes;
-    };
-    var handleClick = e => {
+    }
+    function handleClick(e) {
       call(props.onClick, e);
-    };
-    watch([() => props.span, () => props.offset], () => {
-      row == null ? void 0 : row.computePadding();
-    });
-    call(bindRow, colProvider);
+    }
     return {
+      span,
+      offset,
+      padding,
       n,
       classes,
-      padding,
       toNumber,
       toSizeUnit,
       getSize,
-      span,
-      offset,
       handleClick,
       padStartFlex
     };

package/es/collapse/Collapse.mjs

@@ -4,6 +4,7 @@ import { props } from './props.mjs';
 import { call, createNamespace } from '../utils/components.mjs';
 import { isArray } from '@varlet/shared';
 var {
+  name,
   n
 } = createNamespace('collapse');
 import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
@@ -14,19 +15,29 @@ function __render__(_ctx, _cache) {
 }
 
 var __sfc__ = defineComponent({
-  name: 'VarCollapse',
+  name,
   props,
   setup(props) {
+    var active = computed(() => props.modelValue);
+    var offset = computed(() => props.offset);
+    var divider = computed(() => props.divider);
+    var elevation = computed(() => props.elevation);
     var {
       length,
       collapseItem,
       bindCollapseItem
     } = useCollapseItem();
-    var active = computed(() => props.modelValue);
-    var offset = computed(() => props.offset);
-    var divider = computed(() => props.divider);
-    var elevation = computed(() => props.elevation);
-    var checkValue = () => {
+    var collapseProvider = {
+      active,
+      offset,
+      divider,
+      elevation,
+      updateItem
+    };
+    watch(() => length.value, () => nextTick().then(resize));
+    watch(() => props.modelValue, () => nextTick().then(resize));
+    bindCollapseItem(collapseProvider);
+    function checkValue() {
       if (!props.accordion && !isArray(props.modelValue)) {
         console.error('[Varlet] Collapse: type of prop "modelValue" should be an Array');
         return false;
@@ -36,18 +47,18 @@ var __sfc__ = defineComponent({
         return false;
       }
       return true;
-    };
-    var getValue = (value, isExpand) => {
+    }
+    function getValue(value, isExpand) {
       if (!checkValue()) return null;
       if (isExpand) return props.accordion ? value : [...props.modelValue, value];
       return props.accordion ? null : props.modelValue.filter(name => name !== value);
-    };
-    var updateItem = (value, isExpand) => {
+    }
+    function updateItem(value, isExpand) {
       var modelValue = getValue(value, isExpand);
       call(props['onUpdate:modelValue'], modelValue);
       call(props.onChange, modelValue);
-    };
-    var matchName = () => {
+    }
+    function matchName() {
       if (props.accordion) {
         return collapseItem.find(_ref => {
           var {
@@ -64,8 +75,8 @@ var __sfc__ = defineComponent({
         return props.modelValue.includes(name.value);
       });
       return filterItem.length ? filterItem : undefined;
-    };
-    var matchIndex = () => {
+    }
+    function matchIndex() {
       if (props.accordion) {
         return collapseItem.find(_ref3 => {
           var {
@@ -82,8 +93,8 @@ var __sfc__ = defineComponent({
         } = _ref4;
         return name.value === undefined && props.modelValue.includes(index.value);
       });
-    };
-    var resize = () => {
+    }
+    function resize() {
       if (!checkValue()) return;
       var matchProviders = matchName() || matchIndex();
       if (props.accordion && !matchProviders || !props.accordion && !matchProviders.length) {
@@ -96,20 +107,10 @@ var __sfc__ = defineComponent({
         var isShow = props.accordion ? matchProviders === provider : matchProviders.includes(provider);
         provider.init(props.accordion, isShow);
       });
-    };
-    var collapseProvider = {
-      active,
-      offset,
-      divider,
-      elevation,
-      updateItem
-    };
-    bindCollapseItem(collapseProvider);
-    watch(() => length.value, () => nextTick().then(resize));
-    watch(() => props.modelValue, () => nextTick().then(resize));
+    }
     return {
-      n,
-      divider
+      divider,
+      n
     };
   }
 });