@varlet/ui 2.7.4 → 2.8.0-alpha.1676441771603

package/es/style.mjs

@@ -21,6 +21,7 @@ import './counter/style/index.mjs'
 import './date-picker/style/index.mjs'
 import './dialog/style/index.mjs'
 import './divider/style/index.mjs'
+import './ellipsis/style/index.mjs'
 import './form/style/index.mjs'
 import './form-details/style/index.mjs'
 import './icon/style/index.mjs'
@@ -39,6 +40,7 @@ import './menu/style/index.mjs'
 import './option/style/index.mjs'
 import './overlay/style/index.mjs'
 import './pagination/style/index.mjs'
+import './paper/style/index.mjs'
 import './picker/style/index.mjs'
 import './popup/style/index.mjs'
 import './progress/style/index.mjs'

package/es/tabs/Tabs.mjs

@@ -138,13 +138,14 @@ var __sfc__ = defineComponent({
         element
       } = _ref3;
       var el = element.value;
+      if (!el) return;
 
       if (props.layoutDirection === 'horizontal') {
-        indicatorWidth.value = (el == null ? void 0 : el.offsetWidth) + "px";
-        indicatorX.value = (el == null ? void 0 : el.offsetLeft) + "px";
+        indicatorWidth.value = el.offsetWidth + "px";
+        indicatorX.value = el.offsetLeft + "px";
       } else {
-        indicatorHeight.value = (el == null ? void 0 : el.offsetHeight) + "px";
-        indicatorY.value = (el == null ? void 0 : el.offsetTop) + "px";
+        indicatorHeight.value = el.offsetHeight + "px";
+        indicatorY.value = el.offsetTop + "px";
       }
     };
 

package/es/themes/dark/index.mjs

@@ -32,6 +32,7 @@ import bottomNavigation from './bottomNavigation.mjs';
 import bottomNavigationItem from './bottomNavigationItem.mjs';
 import menu from './menu.mjs';
 import breadcrumb from './breadcrumb.mjs';
+import paper from './paper.mjs';
 export default _extends({
   // common
   '--color-body': '#1e1e1e',
@@ -43,4 +44,4 @@ export default _extends({
   '--color-danger': '#ef5350',
   '--color-disabled': '#404040',
   '--color-text-disabled': '#757575'
-}, button, cell, card, timePicker, datePicker, skeleton, tabs, tab, popup, dialog, actionSheet, chip, badge, uploader, collapse, pullRefresh, switchThemes, steps, pagination, table, input, select, radio, checkbox, divider, picker, appBar, bottomNavigation, bottomNavigationItem, menu, result, breadcrumb);
+}, button, cell, card, timePicker, datePicker, skeleton, tabs, tab, popup, dialog, actionSheet, chip, badge, uploader, collapse, pullRefresh, switchThemes, steps, pagination, table, input, select, radio, checkbox, divider, picker, appBar, bottomNavigation, bottomNavigationItem, menu, result, breadcrumb, paper);

package/es/themes/dark/paper.mjs

@@ -0,0 +1,3 @@
+export default {
+  '--paper-background': '#303030'
+};

package/es/tooltip/Tooltip.mjs

@@ -1,5 +1,6 @@
 import { createNamespace } from '../utils/components.mjs';
 import { defineComponent } from 'vue';
+import { toSizeUnit } from '../utils/elements.mjs';
 import { usePopover } from '../menu/usePopover.mjs';
 import { props } from './props.mjs';
 var {
@@ -43,7 +44,8 @@ function __render__(_ctx, _cache) {
       })
     }, [_createElementVNode("div", {
       style: _normalizeStyle({
-        background: _ctx.color
+        background: _ctx.color,
+        width: _ctx.sameWidth ? _ctx.toSizeUnit(Math.ceil(_ctx.hostSize.width)) : undefined
       }),
       class: _normalizeClass(_ctx.classes(_ctx.n('content-container'), _ctx.n("--" + _ctx.type)))
     }, [_renderSlot(_ctx.$slots, "content", {}, () => [_createTextVNode(_toDisplayString(_ctx.content), 1
@@ -73,6 +75,7 @@ var __sfc__ = defineComponent({
     var {
       popover,
       host,
+      hostSize,
       show,
       zIndex,
       handleHostClick,
@@ -89,8 +92,10 @@ var __sfc__ = defineComponent({
       resize
     } = usePopover(props);
     return {
+      toSizeUnit,
       popover,
       host,
+      hostSize,
       show,
       zIndex,
       n,

package/es/tooltip/props.mjs

@@ -54,6 +54,10 @@ export var props = {
     type: [String, Object],
     default: 'body'
   },
+  sameWidth: {
+    type: Boolean,
+    default: false
+  },
   onOpen: defineListenerProp(),
   onOpened: defineListenerProp(),
   onClose: defineListenerProp(),

package/es/tooltip/tooltip.css

@@ -1 +1 @@
-:root { --tooltip-opacity: 0.9; --tooltip-border-radius: 4px; --tooltip-font-size: 14px; --tooltip-padding: 8px 16px; --tooltip-default-color: #616161; --tooltip-offset: 10px; --tooltip-primary-color: var(--color-primary); --tooltip-info-color: var(--color-info); --tooltip-success-color: var(--color-success); --tooltip-warning-color: var(--color-warning); --tooltip-danger-color: var(--color-danger);}.var-tooltip-enter-from,.var-tooltip-leave-to { opacity: 0;}.var-tooltip-enter-active,.var-tooltip-leave-active { transition-property: opacity; transition-duration: 0.25s;}.var-tooltip { display: inline-block;}.var-tooltip__content-container { display: inline-block; border-radius: var(--tooltip-border-radius); font-size: var(--tooltip-font-size); padding: var(--tooltip-padding); opacity: var(--tooltip-opacity); transition: opacity 0.25s, background-color 0.25s;}.var-tooltip--default { color: #fff; background: var(--tooltip-default-color);}.var-tooltip--primary { color: #fff; background-color: var(--tooltip-primary-color);}.var-tooltip--info { color: #fff; background-color: var(--tooltip-info-color);}.var-tooltip--success { color: #fff; background-color: var(--tooltip-success-color);}.var-tooltip--warning { color: #fff; background-color: var(--tooltip-warning-color);}.var-tooltip--danger { color: #fff; background-color: var(--tooltip-danger-color);}.var-tooltip__tooltip[data-popper-placement='top'] .var-tooltip__content-container,.var-tooltip__tooltip[data-popper-placement='top-start'] .var-tooltip__content-container,.var-tooltip__tooltip[data-popper-placement='top-end'] .var-tooltip__content-container { margin-bottom: var(--tooltip-offset);}.var-tooltip__tooltip[data-popper-placement='bottom'] .var-tooltip__content-container,.var-tooltip__tooltip[data-popper-placement='bottom-start'] .var-tooltip__content-container,.var-tooltip__tooltip[data-popper-placement='bottom-end'] .var-tooltip__content-container { margin-top: var(--tooltip-offset);}.var-tooltip__tooltip[data-popper-placement='right'] .var-tooltip__content-container,.var-tooltip__tooltip[data-popper-placement='right-start'] .var-tooltip__content-container,.var-tooltip__tooltip[data-popper-placement='right-end'] .var-tooltip__content-container { margin-left: var(--tooltip-offset);}.var-tooltip__tooltip[data-popper-placement='left'] .var-tooltip__content-container,.var-tooltip__tooltip[data-popper-placement='left-start'] .var-tooltip__content-container,.var-tooltip__tooltip[data-popper-placement='left-end'] .var-tooltip__content-container { margin-right: var(--tooltip-offset);}
+:root { --tooltip-opacity: 0.9; --tooltip-border-radius: 4px; --tooltip-font-size: 14px; --tooltip-padding: 8px 16px; --tooltip-default-color: #616161; --tooltip-offset: 10px; --tooltip-primary-color: var(--color-primary); --tooltip-info-color: var(--color-info); --tooltip-success-color: var(--color-success); --tooltip-warning-color: var(--color-warning); --tooltip-danger-color: var(--color-danger);}.var-tooltip-enter-from,.var-tooltip-leave-to { opacity: 0;}.var-tooltip-enter-active,.var-tooltip-leave-active { transition-property: opacity; transition-duration: 0.25s;}.var-tooltip { display: inline-block;}.var-tooltip__content-container { display: inline-block; text-align: center; border-radius: var(--tooltip-border-radius); font-size: var(--tooltip-font-size); padding: var(--tooltip-padding); opacity: var(--tooltip-opacity); transition: opacity 0.25s, background-color 0.25s;}.var-tooltip--default { color: #fff; background: var(--tooltip-default-color);}.var-tooltip--primary { color: #fff; background-color: var(--tooltip-primary-color);}.var-tooltip--info { color: #fff; background-color: var(--tooltip-info-color);}.var-tooltip--success { color: #fff; background-color: var(--tooltip-success-color);}.var-tooltip--warning { color: #fff; background-color: var(--tooltip-warning-color);}.var-tooltip--danger { color: #fff; background-color: var(--tooltip-danger-color);}.var-tooltip__tooltip[data-popper-placement='top'] .var-tooltip__content-container,.var-tooltip__tooltip[data-popper-placement='top-start'] .var-tooltip__content-container,.var-tooltip__tooltip[data-popper-placement='top-end'] .var-tooltip__content-container { margin-bottom: var(--tooltip-offset);}.var-tooltip__tooltip[data-popper-placement='bottom'] .var-tooltip__content-container,.var-tooltip__tooltip[data-popper-placement='bottom-start'] .var-tooltip__content-container,.var-tooltip__tooltip[data-popper-placement='bottom-end'] .var-tooltip__content-container { margin-top: var(--tooltip-offset);}.var-tooltip__tooltip[data-popper-placement='right'] .var-tooltip__content-container,.var-tooltip__tooltip[data-popper-placement='right-start'] .var-tooltip__content-container,.var-tooltip__tooltip[data-popper-placement='right-end'] .var-tooltip__content-container { margin-left: var(--tooltip-offset);}.var-tooltip__tooltip[data-popper-placement='left'] .var-tooltip__content-container,.var-tooltip__tooltip[data-popper-placement='left-start'] .var-tooltip__content-container,.var-tooltip__tooltip[data-popper-placement='left-end'] .var-tooltip__content-container { margin-right: var(--tooltip-offset);}