@varlet/ui 2.8.1 → 2.8.2-alpha.1676818330977

package/es/button/Button.mjs

@@ -1,8 +1,9 @@
 import Ripple from '../ripple/index.mjs';
 import VarLoading from '../loading/index.mjs';
-import { defineComponent, ref } from 'vue';
+import { computed, defineComponent, ref } from 'vue';
 import { props } from './props.mjs';
 import { call, createNamespace } from '../utils/components.mjs';
+import { useButtonGroup } from './provide.mjs';
 import { isArray } from '@varlet/shared';
 var {
   n,
@@ -20,10 +21,11 @@ function __render__(_ctx, _cache) {
   var _directive_ripple = _resolveDirective("ripple");
 
   return _withDirectives((_openBlock(), _createElementBlock("button", {
-    class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.n('$--box'), _ctx.n("--" + _ctx.size), [_ctx.block, _ctx.n('$--flex') + " " + _ctx.n('--block'), _ctx.n('$--inline-flex')], [_ctx.disabled, _ctx.n('--disabled')], [_ctx.text, _ctx.n("--text-" + _ctx.type) + " " + _ctx.n('--text'), _ctx.n("--" + _ctx.type) + " " + _ctx.n('$-elevation--2')], [_ctx.text && _ctx.disabled, _ctx.n('--text-disabled')], [_ctx.round, _ctx.n('--round')], [_ctx.outline, _ctx.n('--outline')])),
+    ref: "buttonEl",
+    class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.n('$--box'), _ctx.n("--" + _ctx.states.size), [_ctx.block, _ctx.n('$--flex') + " " + _ctx.n('--block'), _ctx.n('$--inline-flex')], [_ctx.disabled, _ctx.n('--disabled')], [_ctx.states.text, _ctx.n("--text-" + _ctx.states.type) + " " + _ctx.n('--text'), _ctx.n("--" + _ctx.states.type) + " " + _ctx.n("$-elevation--" + _ctx.states.elevation)], [_ctx.states.text && _ctx.disabled, _ctx.n('--text-disabled')], [_ctx.round, _ctx.n('--round')], [_ctx.states.outline, _ctx.n('--outline')])),
     style: _normalizeStyle({
-      color: _ctx.textColor,
-      background: _ctx.color
+      color: _ctx.states.textColor,
+      background: _ctx.states.color
     }),
     type: _ctx.nativeType,
     disabled: _ctx.disabled,
@@ -66,6 +68,39 @@ var __sfc__ = defineComponent({
 
   setup(props) {
     var pending = ref(false);
+    var {
+      buttonGroup
+    } = useButtonGroup();
+    var states = computed(() => {
+      if (!buttonGroup) {
+        return {
+          elevation: 2,
+          type: props.type != null ? props.type : 'default',
+          size: props.size != null ? props.size : 'normal',
+          color: props.color,
+          text: props.text,
+          textColor: props.textColor,
+          outline: props.outline
+        };
+      }
+
+      var {
+        type,
+        size,
+        color,
+        textColor,
+        mode
+      } = buttonGroup;
+      return {
+        elevation: 0,
+        type: props.type != null ? props.type : type.value,
+        size: props.size != null ? props.size : size.value,
+        color: props.color != null ? props.color : color.value,
+        textColor: props.textColor != null ? props.textColor : textColor.value,
+        text: mode.value !== 'normal',
+        outline: mode.value === 'outline'
+      };
+    });
 
     var attemptAutoLoading = result => {
       if (props.autoLoading) {
@@ -111,6 +146,7 @@ var __sfc__ = defineComponent({
       n,
       classes,
       pending,
+      states,
       handleClick,
       handleTouchstart
     };

package/es/button/props.mjs

@@ -18,7 +18,6 @@ function nativeTypeValidator(nativeType) {
 export var props = {
   type: {
     type: String,
-    default: 'default',
     validator: typeValidator
   },
   nativeType: {
@@ -28,7 +27,6 @@ export var props = {
   },
   size: {
     type: String,
-    default: 'normal',
     validator: sizeValidator
   },
   loading: {

package/es/button/provide.mjs

@@ -0,0 +1,16 @@
+import { useAtParentIndex, useParent } from '../utils/components.mjs';
+import { BUTTON_GROUP_BIND_BUTTON_KEY, BUTTON_GROUP_COUNT_BUTTON_KEY } from '../button-group/provide.mjs';
+export function useButtonGroup() {
+  var {
+    bindParent,
+    parentProvider
+  } = useParent(BUTTON_GROUP_BIND_BUTTON_KEY);
+  var {
+    index
+  } = useAtParentIndex(BUTTON_GROUP_COUNT_BUTTON_KEY);
+  return {
+    index,
+    buttonGroup: parentProvider,
+    bindButtonGroup: bindParent
+  };
+}

package/es/button-group/ButtonGroup.mjs

@@ -0,0 +1,45 @@
+import { computed, defineComponent } from 'vue';
+import { useButtons } from './provide.mjs';
+import { createNamespace } from '../utils/components.mjs';
+import { props } from './props.mjs';
+var {
+  n,
+  classes
+} = createNamespace('button-group');
+import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+
+function __render__(_ctx, _cache) {
+  return _openBlock(), _createElementBlock("div", {
+    class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.n('$--box'), [_ctx.mode, "" + _ctx.n("--mode-" + _ctx.mode)], [_ctx.vertical, _ctx.n('--vertical'), _ctx.n('--horizontal')], [_ctx.mode === 'normal', _ctx.n("$-elevation--" + _ctx.elevation)]))
+  }, [_renderSlot(_ctx.$slots, "default")], 2
+  /* CLASS */
+  );
+}
+
+var __sfc__ = defineComponent({
+  name: 'VarButtonGroup',
+  props,
+
+  setup(props) {
+    var {
+      bindButtons
+    } = useButtons();
+    var buttonGroupProvider = {
+      elevation: computed(() => props.elevation),
+      type: computed(() => props.type),
+      size: computed(() => props.size),
+      color: computed(() => props.color),
+      textColor: computed(() => props.textColor),
+      mode: computed(() => props.mode)
+    };
+    bindButtons(buttonGroupProvider);
+    return {
+      n,
+      classes
+    };
+  }
+
+});
+
+__sfc__.render = __render__;
+export default __sfc__;

package/es/button-group/buttonGroup.css

@@ -0,0 +1 @@
+.var-button-group { display: inline-flex; border-radius: var(--button-border-radius); max-width: 100%; overflow: auto;}.var-button-group > .var-button:active { box-shadow: none;}.var-button-group--horizontal > .var-button:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0;}.var-button-group--horizontal > .var-button:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0;}.var-button-group--horizontal > .var-button:not(:first-child):not(:last-child) { border-radius: 0;}.var-button-group--horizontal.var-button-group--mode-text > .var-button { border-right: thin solid currentColor;}.var-button-group--horizontal.var-button-group--mode-text > .var-button:last-child { border: none;}.var-button-group--horizontal.var-button-group--mode-outline > .var-button:not(:first-child) { border-left: none;}.var-button-group--vertical { flex-direction: column;}.var-button-group--vertical > .var-button:first-child { border-bottom-left-radius: 0; border-bottom-right-radius: 0;}.var-button-group--vertical > .var-button:last-child { border-top-left-radius: 0; border-top-right-radius: 0;}.var-button-group--vertical > .var-button:not(:first-child):not(:last-child) { border-radius: 0;}.var-button-group--vertical.var-button-group--mode-text > .var-button { border-bottom: thin solid currentColor;}.var-button-group--vertical.var-button-group--mode-text > .var-button:last-child { border: none;}.var-button-group--vertical.var-button-group--mode-outline > .var-button:not(:first-child) { border-top: none;}

package/es/button-group/index.mjs

@@ -0,0 +1,9 @@
+// Component entry, the folder where the file exists will be exposed to the user
+import ButtonGroup from './ButtonGroup.mjs';
+
+ButtonGroup.install = function (app) {
+  app.component(ButtonGroup.name, ButtonGroup);
+};
+
+export var _ButtonGroupComponent = ButtonGroup;
+export default ButtonGroup;

package/es/button-group/props.mjs

@@ -0,0 +1,43 @@
+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
+  },
+  size: {
+    type: String,
+    default: 'normal',
+    validator: sizeValidator
+  },
+  color: {
+    type: String
+  },
+  textColor: {
+    type: String
+  },
+  mode: {
+    type: String,
+    default: 'normal',
+    validator: modeValidator
+  },
+  elevation: {
+    type: [Number, String],
+    default: 2
+  },
+  vertical: {
+    type: Boolean,
+    default: false
+  }
+};

package/es/button-group/provide.mjs

@@ -0,0 +1,17 @@
+import { useAtChildrenCounter, useChildren } from '../utils/components.mjs';
+export var BUTTON_GROUP_BIND_BUTTON_KEY = Symbol('BUTTON_GROUP_BIND_BUTTON_KEY');
+export var BUTTON_GROUP_COUNT_BUTTON_KEY = Symbol('BUTTON_GROUP_COUNT_BUTTON_KEY');
+export function useButtons() {
+  var {
+    bindChildren,
+    childProviders
+  } = useChildren(BUTTON_GROUP_BIND_BUTTON_KEY);
+  var {
+    length
+  } = useAtChildrenCounter(BUTTON_GROUP_COUNT_BUTTON_KEY);
+  return {
+    length,
+    buttons: childProviders,
+    bindButtons: bindChildren
+  };
+}

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

@@ -0,0 +1,3 @@
+import '../../styles/common.css'
+import '../buttonGroup.css'
+import '../ButtonGroupSfc.css'

package/es/index.bundle.mjs

@@ -9,6 +9,7 @@ import BottomNavigationItem from './bottom-navigation-item/index.mjs'
 import Breadcrumb from './breadcrumb/index.mjs'
 import Breadcrumbs from './breadcrumbs/index.mjs'
 import Button from './button/index.mjs'
+import ButtonGroup from './button-group/index.mjs'
 import Card from './card/index.mjs'
 import Cell from './cell/index.mjs'
 import Checkbox from './checkbox/index.mjs'
@@ -86,6 +87,7 @@ export * from './bottom-navigation-item/index.mjs'
 export * from './breadcrumb/index.mjs'
 export * from './breadcrumbs/index.mjs'
 export * from './button/index.mjs'
+export * from './button-group/index.mjs'
 export * from './card/index.mjs'
 export * from './cell/index.mjs'
 export * from './checkbox/index.mjs'
@@ -163,6 +165,7 @@ import './bottom-navigation-item/style/index.mjs'
 import './breadcrumb/style/index.mjs'
 import './breadcrumbs/style/index.mjs'
 import './button/style/index.mjs'
+import './button-group/style/index.mjs'
 import './card/style/index.mjs'
 import './cell/style/index.mjs'
 import './checkbox/style/index.mjs'
@@ -229,7 +232,7 @@ import './time-picker/style/index.mjs'
 import './tooltip/style/index.mjs'
 import './uploader/style/index.mjs'
 
-const version = '2.8.1'
+const version = '2.8.2-alpha.1676818330977'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)
@@ -243,6 +246,7 @@ function install(app) {
   Breadcrumb.install && app.use(Breadcrumb)
   Breadcrumbs.install && app.use(Breadcrumbs)
   Button.install && app.use(Button)
+  ButtonGroup.install && app.use(ButtonGroup)
   Card.install && app.use(Card)
   Cell.install && app.use(Cell)
   Checkbox.install && app.use(Checkbox)
@@ -324,6 +328,7 @@ export {
   Breadcrumb,
   Breadcrumbs,
   Button,
+  ButtonGroup,
   Card,
   Cell,
   Checkbox,
@@ -405,6 +410,7 @@ export default {
   Breadcrumb,
   Breadcrumbs,
   Button,
+  ButtonGroup,
   Card,
   Cell,
   Checkbox,

package/es/index.mjs

@@ -9,6 +9,7 @@ import BottomNavigationItem from './bottom-navigation-item/index.mjs'
 import Breadcrumb from './breadcrumb/index.mjs'
 import Breadcrumbs from './breadcrumbs/index.mjs'
 import Button from './button/index.mjs'
+import ButtonGroup from './button-group/index.mjs'
 import Card from './card/index.mjs'
 import Cell from './cell/index.mjs'
 import Checkbox from './checkbox/index.mjs'
@@ -86,6 +87,7 @@ export * from './bottom-navigation-item/index.mjs'
 export * from './breadcrumb/index.mjs'
 export * from './breadcrumbs/index.mjs'
 export * from './button/index.mjs'
+export * from './button-group/index.mjs'
 export * from './card/index.mjs'
 export * from './cell/index.mjs'
 export * from './checkbox/index.mjs'
@@ -152,7 +154,7 @@ export * from './time-picker/index.mjs'
 export * from './tooltip/index.mjs'
 export * from './uploader/index.mjs'
 
-const version = '2.8.1'
+const version = '2.8.2-alpha.1676818330977'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)
@@ -166,6 +168,7 @@ function install(app) {
   Breadcrumb.install && app.use(Breadcrumb)
   Breadcrumbs.install && app.use(Breadcrumbs)
   Button.install && app.use(Button)
+  ButtonGroup.install && app.use(ButtonGroup)
   Card.install && app.use(Card)
   Cell.install && app.use(Cell)
   Checkbox.install && app.use(Checkbox)
@@ -247,6 +250,7 @@ export {
   Breadcrumb,
   Breadcrumbs,
   Button,
+  ButtonGroup,
   Card,
   Cell,
   Checkbox,
@@ -328,6 +332,7 @@ export default {
   Breadcrumb,
   Breadcrumbs,
   Button,
+  ButtonGroup,
   Card,
   Cell,
   Checkbox,

package/es/paper/Paper.mjs

@@ -13,7 +13,7 @@ function __render__(_ctx, _cache) {
   var _directive_ripple = _resolveDirective("ripple");
 
   return _withDirectives((_openBlock(), _createElementBlock("div", {
-    class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.n('$--box'), _ctx.n("$-elevation--" + _ctx.elevation), [_ctx.onClick, _ctx.n('--cursor')], [_ctx.round, _ctx.n('--round')], [_ctx.inline, _ctx.n('$--inline-flex')])),
+    class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.n('$--box'), [_ctx.elevation != null, _ctx.n("$-elevation--" + _ctx.elevation)], [_ctx.onClick, _ctx.n('--cursor')], [_ctx.round, _ctx.n('--round')], [_ctx.inline, _ctx.n('$--inline-flex')])),
     style: _normalizeStyle({
       width: _ctx.toSizeUnit(_ctx.width),
       height: _ctx.toSizeUnit(_ctx.height),