@varlet/ui 2.14.2 → 2.15.0-alpha.1692990022445

package/es/action-sheet/props.mjs

@@ -2,17 +2,12 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 import { defineListenerProp, pickProps } from '../utils/components.mjs';
 import { props as popupProps } from '../popup/props.mjs';
 export var props = _extends({
-  show: {
-    type: Boolean,
-    default: false
-  },
+  show: Boolean,
+  title: String,
   actions: {
     type: Array,
     default: () => []
   },
-  title: {
-    type: String
-  },
   closeOnClickAction: {
     type: Boolean,
     default: true

package/es/app-bar/props.mjs

@@ -1,38 +1,17 @@
-export function positionValidator(position) {
-  var validPositions = ['left', 'center', 'right'];
-  return validPositions.includes(position);
-}
 export var props = {
-  color: {
-    type: String
-  },
-  textColor: {
-    type: String
-  },
-  title: {
-    type: String
-  },
+  color: String,
+  textColor: String,
+  title: String,
   titlePosition: {
     type: String,
-    default: 'left',
-    validator: positionValidator
+    default: 'left'
   },
   elevation: {
     type: [Boolean, String, Number],
     default: true
   },
-  round: {
-    type: Boolean,
-    default: false
-  },
-  image: {
-    type: String
-  },
-  imageLinearGradient: {
-    type: String
-  },
-  safeAreaTop: {
-    type: Boolean,
-    default: false
-  }
+  round: Boolean,
+  image: String,
+  imageLinearGradient: String,
+  safeAreaTop: Boolean
 };

package/es/avatar/Avatar.mjs

@@ -1,9 +1,10 @@
 import Lazy from '../lazy/index.mjs';
 import { defineComponent, ref, onUpdated } from 'vue';
-import { props, internalSizeValidator, sizeValidator } from './props.mjs';
+import { props } from './props.mjs';
 import { toSizeUnit } from '../utils/elements.mjs';
 import { createNamespace, call } from '../utils/components.mjs';
 import { onSmartMounted } from '@varlet/use';
+var isInternalSize = size => ['mini', 'small', 'normal', 'large'].includes(size);
 var {
   n,
   classes
@@ -16,10 +17,10 @@ function __render__(_ctx, _cache) {
   var _directive_lazy = _resolveDirective("lazy");
   return _openBlock(), _createElementBlock("div", {
     ref: "avatarElement",
-    class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.n('$--box'), [_ctx.internalSizeValidator(_ctx.size), _ctx.n("--" + _ctx.size)], [_ctx.round, _ctx.n('--round')], [_ctx.bordered, _ctx.n('--bordered')])),
+    class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.n('$--box'), [_ctx.isInternalSize(_ctx.size), _ctx.n("--" + _ctx.size)], [_ctx.round, _ctx.n('--round')], [_ctx.bordered, _ctx.n('--bordered')])),
     style: _normalizeStyle({
-      width: !_ctx.internalSizeValidator(_ctx.size) ? _ctx.toSizeUnit(_ctx.size) : undefined,
-      height: !_ctx.internalSizeValidator(_ctx.size) ? _ctx.toSizeUnit(_ctx.size) : undefined,
+      width: !_ctx.isInternalSize(_ctx.size) ? _ctx.toSizeUnit(_ctx.size) : undefined,
+      height: !_ctx.isInternalSize(_ctx.size) ? _ctx.toSizeUnit(_ctx.size) : undefined,
       borderColor: _ctx.borderColor,
       backgroundColor: _ctx.color
     }),
@@ -111,8 +112,7 @@ var __sfc__ = defineComponent({
     onSmartMounted(getScale);
     onUpdated(getScale);
     return {
-      internalSizeValidator,
-      sizeValidator,
+      isInternalSize,
       toSizeUnit,
       n,
       classes,

package/es/avatar/props.mjs

@@ -1,12 +1,4 @@
 import { defineListenerProp } from '../utils/components.mjs';
-import { isNumber, isString } from '@varlet/shared';
-function fitValidator(fit) {
-  return ['fill', 'contain', 'cover', 'none', 'scale-down'].includes(fit);
-}
-export var internalSizeValidator = size => ['mini', 'small', 'normal', 'large'].includes(size);
-export function sizeValidator(size) {
-  return internalSizeValidator(size) || isNumber(size) || isString(size);
-}
 export var props = {
   round: {
     type: Boolean,
@@ -14,40 +6,20 @@ export var props = {
   },
   size: {
     type: [String, Number],
-    validator: sizeValidator,
     default: 'normal'
   },
-  alt: {
-    type: String
-  },
-  color: {
-    type: String
-  },
-  src: {
-    type: String
-  },
+  alt: String,
+  color: String,
+  src: String,
   fit: {
     type: String,
-    validator: fitValidator,
     default: 'cover'
   },
-  bordered: {
-    type: Boolean,
-    default: false
-  },
-  borderColor: {
-    type: String
-  },
-  loading: {
-    type: String
-  },
-  error: {
-    type: String
-  },
-  lazy: {
-    type: Boolean,
-    default: false
-  },
+  bordered: Boolean,
+  borderColor: String,
+  loading: String,
+  error: String,
+  lazy: Boolean,
   onClick: defineListenerProp(),
   onLoad: defineListenerProp(),
   onError: defineListenerProp()

package/es/avatar-group/props.mjs

@@ -1,9 +1,4 @@
 export var props = {
-  offset: {
-    type: [Number, String]
-  },
-  vertical: {
-    type: Boolean,
-    default: false
-  }
+  offset: [Number, String],
+  vertical: Boolean
 };

package/es/back-top/props.mjs

@@ -8,18 +8,12 @@ export var props = {
     type: Number,
     default: 300
   },
-  right: {
-    type: [Number, String]
-  },
+  right: [Number, String],
   elevation: {
     type: [Boolean, Number, String],
     default: true
   },
-  bottom: {
-    type: [Number, String]
-  },
-  target: {
-    type: [String, Object]
-  },
+  bottom: [Number, String],
+  target: [String, Object],
   onClick: defineListenerProp()
 };

package/es/badge/props.mjs

@@ -1,39 +1,19 @@
-function typeValidator(type) {
-  return ['default', 'primary', 'info', 'success', 'warning', 'danger'].includes(type);
-}
-function positionValidator(position) {
-  return ['right-top', 'right-bottom', 'left-top', 'left-bottom'].includes(position);
-}
 export var props = {
   type: {
     type: String,
-    default: 'default',
-    validator: typeValidator
+    default: 'default'
   },
   position: {
     type: String,
-    default: 'right-top',
-    validator: positionValidator
-  },
-  hidden: {
-    type: Boolean,
-    default: false
+    default: 'right-top'
   },
+  hidden: Boolean,
   value: {
     type: [String, Number],
     default: 0
   },
-  maxValue: {
-    type: [String, Number]
-  },
-  dot: {
-    type: Boolean,
-    default: false
-  },
-  icon: {
-    type: String
-  },
-  color: {
-    type: String
-  }
+  maxValue: [String, Number],
+  dot: Boolean,
+  icon: String,
+  color: String
 };

package/es/bottom-navigation/props.mjs

@@ -4,33 +4,18 @@ export var props = {
     type: [Number, String],
     default: 0
   },
-  fixed: {
-    type: Boolean,
-    default: false
-  },
-  border: {
-    type: Boolean,
-    default: false
-  },
-  safeArea: {
-    type: Boolean,
-    default: false
-  },
   zIndex: {
     type: [Number, String],
     default: 1
   },
-  activeColor: {
-    type: String
-  },
-  inactiveColor: {
-    type: String
-  },
+  fixed: Boolean,
+  border: Boolean,
+  safeArea: Boolean,
+  activeColor: String,
+  inactiveColor: String,
+  fabProps: Object,
   onChange: defineListenerProp(),
-  'onUpdate:active': defineListenerProp(),
   onBeforeChange: defineListenerProp(),
   onFabClick: defineListenerProp(),
-  fabProps: {
-    type: Object
-  }
+  'onUpdate:active': defineListenerProp()
 };

package/es/bottom-navigation-item/props.mjs

@@ -1,14 +1,8 @@
 import { defineListenerProp } from '../utils/components.mjs';
 export var props = {
-  name: {
-    type: String
-  },
-  icon: {
-    type: String
-  },
-  label: {
-    type: String
-  },
+  name: String,
+  icon: String,
+  label: String,
   namespace: {
     type: String,
     default: 'var-icon'

package/es/breadcrumb/props.mjs

@@ -1,7 +1,5 @@
 import { defineListenerProp } from '../utils/components.mjs';
 export var props = {
-  separator: {
-    type: String
-  },
+  separator: String,
   onClick: defineListenerProp()
 };

package/es/button/props.mjs

@@ -1,74 +1,31 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import { props as loadingProps } from '../loading/props.mjs';
 import { defineListenerProp, pickProps } from '../utils/components.mjs';
-export function typeValidator(type) {
-  return ['default', 'primary', 'info', 'success', 'warning', 'danger'].includes(type);
-}
-export function sizeValidator(size) {
-  return ['normal', 'mini', 'small', 'large'].includes(size);
-}
-export function nativeTypeValidator(nativeType) {
-  return ['button', 'reset', 'submit'].includes(nativeType);
-}
 export var props = {
-  type: {
-    type: String,
-    validator: typeValidator
-  },
+  type: String,
   nativeType: {
     type: String,
-    default: 'button',
-    validator: nativeTypeValidator
-  },
-  size: {
-    type: String,
-    validator: sizeValidator
-  },
-  loading: {
-    type: Boolean,
-    default: false
-  },
-  round: {
-    type: Boolean,
-    default: false
-  },
-  block: {
-    type: Boolean,
-    default: false
-  },
-  text: {
-    type: Boolean,
-    default: false
-  },
-  outline: {
-    type: Boolean,
-    default: false
-  },
-  disabled: {
-    type: Boolean,
-    default: false
-  },
+    default: 'button'
+  },
+  size: String,
+  loading: Boolean,
+  round: Boolean,
+  block: Boolean,
+  text: Boolean,
+  outline: Boolean,
+  disabled: Boolean,
+  autoLoading: Boolean,
   ripple: {
     type: Boolean,
     default: true
   },
-  color: {
-    type: String
-  },
-  textColor: {
-    type: String
-  },
+  color: String,
+  textColor: String,
   elevation: {
     type: [Boolean, Number, String],
     default: true
   },
-  autoLoading: {
-    type: Boolean,
-    default: false
-  },
-  loadingRadius: {
-    type: [Number, String]
-  },
+  loadingRadius: [Number, String],
   loadingType: pickProps(loadingProps, 'type'),
   loadingSize: pickProps(loadingProps, 'size'),
   loadingColor: _extends({}, pickProps(loadingProps, 'color'), {

package/es/button-group/props.mjs

@@ -1,40 +1,21 @@
-function typeValidator(type) {
-  return ['default', 'primary', 'info', 'success', 'warning', 'danger'].includes(type);
-}
-function sizeValidator(size) {
-  return ['normal', 'mini', 'small', 'large'].includes(size);
-}
-function modeValidator(mode) {
-  return ['normal', 'text', 'outline'].includes(mode);
-}
 export var props = {
   type: {
     type: String,
-    default: 'default',
-    validator: typeValidator
+    default: 'default'
   },
   size: {
     type: String,
-    default: 'normal',
-    validator: sizeValidator
-  },
-  color: {
-    type: String
-  },
-  textColor: {
-    type: String
+    default: 'normal'
   },
+  color: String,
+  textColor: String,
   mode: {
     type: String,
-    default: 'normal',
-    validator: modeValidator
+    default: 'normal'
   },
   elevation: {
     type: [Boolean, Number, String],
     default: true
   },
-  vertical: {
-    type: Boolean,
-    default: false
-  }
+  vertical: Boolean
 };

package/es/cell/props.mjs

@@ -1,36 +1,14 @@
 import { defineListenerProp } from '../utils/components.mjs';
 export var props = {
-  title: {
-    type: [Number, String]
-  },
-  icon: {
-    type: String
-  },
-  description: {
-    type: String
-  },
-  border: {
-    type: Boolean,
-    default: false
-  },
-  borderOffset: {
-    type: [Number, String]
-  },
-  iconClass: {
-    type: String
-  },
-  titleClass: {
-    type: String
-  },
-  descriptionClass: {
-    type: String
-  },
-  extraClass: {
-    type: String
-  },
-  ripple: {
-    type: Boolean,
-    default: false
-  },
+  title: [Number, String],
+  icon: String,
+  description: String,
+  border: Boolean,
+  borderOffset: [Number, String],
+  iconClass: String,
+  titleClass: String,
+  descriptionClass: String,
+  extraClass: String,
+  ripple: Boolean,
   onClick: defineListenerProp()
 };

package/es/checkbox/Checkbox.mjs

@@ -2,17 +2,17 @@ import VarIcon from '../icon/index.mjs';
 import VarFormDetails from '../form-details/index.mjs';
 import Ripple from '../ripple/index.mjs';
 import Hover from '../hover/index.mjs';
-import { defineComponent, ref, computed, watch, nextTick } from 'vue';
+import VarHoverOverlay, { useHoverOverlay } from '../hover-overlay/index.mjs';
+import { defineComponent, ref, computed, nextTick } from 'vue';
 import { props } from './props.mjs';
-import { useValidation, createNamespace, call } from '../utils/components.mjs';
+import { useValidation, createNamespace, call, useVModel } from '../utils/components.mjs';
 import { useCheckboxGroup } from './provide.mjs';
 import { useForm } from '../form/provide.mjs';
-import VarHoverOverlay, { useHoverOverlay } from '../hover-overlay/index.mjs';
 var {
   n,
   classes
 } = createNamespace('checkbox');
-import { renderSlot as _renderSlot, resolveComponent as _resolveComponent, normalizeClass as _normalizeClass, createVNode as _createVNode, normalizeStyle as _normalizeStyle, resolveDirective as _resolveDirective, openBlock as _openBlock, createElementBlock as _createElementBlock, withDirectives as _withDirectives, createElementVNode as _createElementVNode } from "vue";
+import { renderSlot as _renderSlot, resolveComponent as _resolveComponent, normalizeClass as _normalizeClass, createVNode as _createVNode, createCommentVNode as _createCommentVNode, normalizeStyle as _normalizeStyle, resolveDirective as _resolveDirective, openBlock as _openBlock, createElementBlock as _createElementBlock, withDirectives as _withDirectives, createElementVNode as _createElementVNode } from "vue";
 function __render__(_ctx, _cache) {
   var _component_var_icon = _resolveComponent("var-icon");
   var _component_var_hover_overlay = _resolveComponent("var-hover-overlay");
@@ -27,25 +27,32 @@ function __render__(_ctx, _cache) {
   }, [_createElementVNode("div", {
     class: _normalizeClass(_ctx.n())
   }, [_withDirectives((_openBlock(), _createElementBlock("div", {
-    class: _normalizeClass(_ctx.classes(_ctx.n('action'), [_ctx.checked, _ctx.n('--checked'), _ctx.n('--unchecked')], [_ctx.errorMessage || _ctx.checkboxGroupErrorMessage, _ctx.n('--error')], [_ctx.formDisabled || _ctx.disabled, _ctx.n('--disabled')])),
+    class: _normalizeClass(_ctx.classes(_ctx.n('action'), [_ctx.checked || _ctx.isIndeterminate, _ctx.n('--checked'), _ctx.n('--unchecked')], [_ctx.errorMessage || _ctx.checkboxGroupErrorMessage, _ctx.n('--error')], [_ctx.formDisabled || _ctx.disabled, _ctx.n('--disabled')])),
     style: _normalizeStyle({
-      color: _ctx.checked ? _ctx.checkedColor : _ctx.uncheckedColor
+      color: _ctx.checked || _ctx.isIndeterminate ? _ctx.checkedColor : _ctx.uncheckedColor
     })
-  }, [_ctx.checked ? _renderSlot(_ctx.$slots, "checked-icon", {
+  }, [_ctx.isIndeterminate ? _renderSlot(_ctx.$slots, "indeterminate-icon", {
     key: 0
   }, () => [_createVNode(_component_var_icon, {
     class: _normalizeClass(_ctx.classes(_ctx.n('icon'), [_ctx.withAnimation, _ctx.n('--with-animation')])),
-    name: "checkbox-marked",
+    name: "minus-box",
     size: _ctx.iconSize,
     "var-checkbox-cover": ""
-  }, null, 8 /* PROPS */, ["class", "size"])]) : _renderSlot(_ctx.$slots, "unchecked-icon", {
+  }, null, 8 /* PROPS */, ["class", "size"])]) : _createCommentVNode("v-if", true), _ctx.checked && !_ctx.isIndeterminate ? _renderSlot(_ctx.$slots, "checked-icon", {
     key: 1
+  }, () => [_createVNode(_component_var_icon, {
+    class: _normalizeClass(_ctx.classes(_ctx.n('icon'), [_ctx.withAnimation, _ctx.n('--with-animation')])),
+    name: "checkbox-marked",
+    size: _ctx.iconSize,
+    "var-checkbox-cover": ""
+  }, null, 8 /* PROPS */, ["class", "size"])]) : _createCommentVNode("v-if", true), !_ctx.checked && !_ctx.isIndeterminate ? _renderSlot(_ctx.$slots, "unchecked-icon", {
+    key: 2
   }, () => [_createVNode(_component_var_icon, {
     class: _normalizeClass(_ctx.classes(_ctx.n('icon'), [_ctx.withAnimation, _ctx.n('--with-animation')])),
     name: "checkbox-blank-outline",
     size: _ctx.iconSize,
     "var-checkbox-cover": ""
-  }, null, 8 /* PROPS */, ["class", "size"])]), _createVNode(_component_var_hover_overlay, {
+  }, null, 8 /* PROPS */, ["class", "size"])]) : _createCommentVNode("v-if", true), _createVNode(_component_var_hover_overlay, {
     hovering: !_ctx.disabled && !_ctx.formDisabled && _ctx.hovering
   }, null, 8 /* PROPS */, ["hovering"])], 6 /* CLASS, STYLE */)), [[_directive_hover, _ctx.handleHovering, "desktop"], [_directive_ripple, {
     disabled: _ctx.formReadonly || _ctx.readonly || _ctx.formDisabled || _ctx.disabled || !_ctx.ripple
@@ -69,7 +76,7 @@ var __sfc__ = defineComponent({
   },
   props,
   setup(props) {
-    var value = ref(false);
+    var value = useVModel(props, 'modelValue');
     var checked = computed(() => value.value === props.checkedValue);
     var checkedValue = computed(() => props.checkedValue);
     var withAnimation = ref(false);
@@ -92,6 +99,7 @@ var __sfc__ = defineComponent({
       // expose
       resetValidation
     } = useValidation();
+    var isIndeterminate = useVModel(props, 'indeterminate');
     var validateWithTrigger = trigger => {
       nextTick(() => {
         var {
@@ -103,12 +111,12 @@ var __sfc__ = defineComponent({
       });
     };
     var change = changedValue => {
-      value.value = changedValue;
       var {
         checkedValue,
         onChange
       } = props;
-      call(props['onUpdate:modelValue'], value.value);
+      value.value = changedValue;
+      isIndeterminate.value = false;
       call(onChange, value.value);
       validateWithTrigger('onChange');
       changedValue === checkedValue ? checkboxGroup == null ? void 0 : checkboxGroup.onChecked(checkedValue) : checkboxGroup == null ? void 0 : checkboxGroup.onUnchecked(checkedValue);
@@ -148,7 +156,7 @@ var __sfc__ = defineComponent({
 
     // expose
     var reset = () => {
-      call(props['onUpdate:modelValue'], props.uncheckedValue);
+      value.value = props.uncheckedValue;
       resetValidation();
     };
 
@@ -167,11 +175,6 @@ var __sfc__ = defineComponent({
 
     // expose
     var validate = () => v(props.rules, props.modelValue);
-    watch(() => props.modelValue, newValue => {
-      value.value = newValue;
-    }, {
-      immediate: true
-    });
     var checkboxProvider = {
       checkedValue,
       checked,
@@ -184,6 +187,7 @@ var __sfc__ = defineComponent({
     call(bindCheckboxGroup, checkboxProvider);
     call(bindForm, checkboxProvider);
     return {
+      isIndeterminate,
       withAnimation,
       checked,
       errorMessage,

package/es/checkbox/props.mjs

@@ -12,35 +12,23 @@ export var props = {
     type: [String, Number, Boolean, Object, Array],
     default: false
   },
-  checkedColor: {
-    type: String
-  },
-  uncheckedColor: {
-    type: String
-  },
-  disabled: {
-    type: Boolean,
-    default: false
-  },
-  readonly: {
-    type: Boolean,
-    default: false
-  },
-  iconSize: {
-    type: [String, Number]
-  },
+  checkedColor: String,
+  uncheckedColor: String,
+  disabled: Boolean,
+  readonly: Boolean,
+  indeterminate: Boolean,
+  iconSize: [String, Number],
   ripple: {
     type: Boolean,
     default: true
   },
   validateTrigger: {
     type: Array,
-    default: ['onChange']
-  },
-  rules: {
-    type: Array
+    default: () => ['onChange']
   },
+  rules: Array,
   onClick: defineListenerProp(),
   onChange: defineListenerProp(),
-  'onUpdate:modelValue': defineListenerProp()
+  'onUpdate:modelValue': defineListenerProp(),
+  'onUpdate:indeterminate': defineListenerProp()
 };