@varlet/ui 2.11.7 → 2.11.9-alpha.1687881786307

package/lib/varlet.cjs.js

@@ -493,7 +493,7 @@ function useClickOutside(target, type, listener) {
     return;
   }
   const handler = (event) => {
-    const element = vue.unref(target);
+    const element = isFunction(target) ? target() : vue.unref(target);
     if (element && !element.contains(event.target)) {
       listener(event);
     }
@@ -6232,7 +6232,7 @@ var __sfc__$V = vue.defineComponent({
       call(props2.onChange, timeData.value);
       showTime.value = parseFormat(props2.format, time);
     };
-    var countdown = () => {
+    var countdown2 = () => {
       var {
         time,
         onEnd
@@ -6251,7 +6251,7 @@ var __sfc__$V = vue.defineComponent({
         return;
       }
       if (isStart) {
-        handle = requestAnimationFrame(countdown);
+        handle = requestAnimationFrame(countdown2);
       }
     };
     var start2 = function(resume) {
@@ -6263,7 +6263,7 @@ var __sfc__$V = vue.defineComponent({
       }
       isStart = true;
       endTime = performance.now() + (remainingTime || toNumber(props2.time));
-      countdown();
+      countdown2();
     };
     var pause = () => {
       isStart = false;
@@ -6273,7 +6273,7 @@ var __sfc__$V = vue.defineComponent({
       endTime = 0;
       isStart = false;
       cancelAnimationFrame(handle);
-      countdown();
+      countdown2();
     };
     vue.watch(() => props2.time, () => {
       reset();
@@ -13036,17 +13036,21 @@ function usePopover(options) {
     };
   }();
   var handleHostClick = () => {
-    open();
+    if (options.closeOnClickReference && show.value) {
+      close();
+    } else {
+      open();
+    }
   };
   var handlePopoverClose = () => {
-    show.value = false;
-    call(options["onUpdate:show"], false);
+    close();
   };
-  var handleClickOutside = () => {
+  var handleClickOutside = (e) => {
     if (options.trigger !== "click") {
       return;
     }
     handlePopoverClose();
+    call(options.onClickOutside, e);
   };
   var getPosition = () => {
     computeHostSize();
@@ -13155,6 +13159,7 @@ function usePopover(options) {
       modifiers
     };
   };
+  var getReference = () => options.reference ? host.value.querySelector(options.reference) : host.value;
   var resize = () => {
     popoverInstance.setOptions(getPopperOptions());
   };
@@ -13172,15 +13177,14 @@ function usePopover(options) {
     show.value = false;
     call(options["onUpdate:show"], false);
   };
-  useClickOutside(host, "click", handleClickOutside);
+  useClickOutside(getReference, "click", handleClickOutside);
   vue.watch(() => options.offsetX, resize);
   vue.watch(() => options.offsetY, resize);
   vue.watch(() => options.placement, resize);
   vue.watch(() => options.disabled, close);
   vue.onMounted(() => {
-    var _host$value;
-    var reference2 = options.reference ? (_host$value = host.value) == null ? void 0 : _host$value.querySelector(options.reference) : host.value;
-    popoverInstance = createPopper(reference2 != null ? reference2 : host.value, popover.value, getPopperOptions());
+    var _getReference;
+    popoverInstance = createPopper((_getReference = getReference()) != null ? _getReference : host.value, popover.value, getPopperOptions());
   });
   vue.onUnmounted(() => {
     popoverInstance.destroy();
@@ -13260,10 +13264,15 @@ var props$I = {
     type: Boolean,
     default: false
   },
+  closeOnClickReference: {
+    type: Boolean,
+    default: false
+  },
   onOpen: defineListenerProp(),
   onOpened: defineListenerProp(),
   onClose: defineListenerProp(),
   onClosed: defineListenerProp(),
+  onClickOutside: defineListenerProp(),
   "onUpdate:show": defineListenerProp()
 };
 var {
@@ -13275,7 +13284,7 @@ function __render__$L(_ctx, _cache) {
     "div",
     {
       ref: "host",
-      class: vue.normalizeClass(_ctx.n()),
+      class: vue.normalizeClass(_ctx.classes(_ctx.n(), _ctx.n("$--box"))),
       onClick: _cache[3] || (_cache[3] = function() {
         return _ctx.handleHostClick && _ctx.handleHostClick(...arguments);
       }),
@@ -13304,7 +13313,7 @@ function __render__$L(_ctx, _cache) {
             "div",
             {
               ref: "popover",
-              class: vue.normalizeClass(_ctx.n("tooltip")),
+              class: vue.normalizeClass(_ctx.classes(_ctx.n("tooltip"), _ctx.n("$--box"))),
               style: vue.normalizeStyle({
                 zIndex: _ctx.zIndex
               }),
@@ -15977,6 +15986,9 @@ function __render__$B(_ctx, _cache) {
             "span",
             {
               ref: "placeholderTextEl",
+              style: {
+                "font-size": "var(--field-decorator-placeholder-size)"
+              },
               class: vue.normalizeClass(_ctx.classes(_ctx.n("placeholder-text"), _ctx.n("$--ellipsis"), [_ctx.size === "small", _ctx.n("placeholder-text--small")]))
             },
             vue.toDisplayString(_ctx.placeholder),
@@ -17162,10 +17174,15 @@ var props$s = {
     type: Boolean,
     default: true
   },
+  closeOnClickReference: {
+    type: Boolean,
+    default: false
+  },
   onOpen: defineListenerProp(),
   onOpened: defineListenerProp(),
   onClose: defineListenerProp(),
   onClosed: defineListenerProp(),
+  onClickOutside: defineListenerProp(),
   "onUpdate:show": defineListenerProp()
 };
 var {
@@ -17177,7 +17194,7 @@ function __render__$x(_ctx, _cache) {
     "div",
     {
       ref: "host",
-      class: vue.normalizeClass(_ctx.n()),
+      class: vue.normalizeClass(_ctx.classes(_ctx.n(), _ctx.n("$--box"))),
       onClick: _cache[3] || (_cache[3] = function() {
         return _ctx.handleHostClick && _ctx.handleHostClick(...arguments);
       }),
@@ -17210,7 +17227,7 @@ function __render__$x(_ctx, _cache) {
                 zIndex: _ctx.zIndex,
                 width: _ctx.sameWidth ? _ctx.toSizeUnit(Math.ceil(_ctx.hostSize.width)) : void 0
               }),
-              class: vue.normalizeClass(_ctx.classes(_ctx.n("menu"), [_ctx.defaultStyle, _ctx.n("--menu-background-color")], [_ctx.defaultStyle, _ctx.formatElevation(_ctx.elevation, 3)])),
+              class: vue.normalizeClass(_ctx.classes(_ctx.n("menu"), _ctx.n("$--box"), [_ctx.defaultStyle, _ctx.n("--menu-background-color")], [_ctx.defaultStyle, _ctx.formatElevation(_ctx.elevation, 3)])),
               onClick: _cache[0] || (_cache[0] = vue.withModifiers(() => {
               }, ["stop"])),
               onMouseenter: _cache[1] || (_cache[1] = function() {
@@ -20444,16 +20461,17 @@ function __render__$f(_ctx, _cache) {
     [vue.createVNode(
       _component_var_menu,
       {
-        class: vue.normalizeClass(_ctx.n("menu")),
         "var-select-cover": "",
         "same-width": "",
+        "close-on-click-reference": "",
+        show: _ctx.showMenu,
+        "onUpdate:show": _cache[1] || (_cache[1] = ($event) => _ctx.showMenu = $event),
+        class: vue.normalizeClass(_ctx.n("menu")),
         "offset-y": _ctx.offsetY,
         disabled: _ctx.formReadonly || _ctx.readonly || _ctx.formDisabled || _ctx.disabled,
         placement: _ctx.placement,
         "default-style": false,
-        show: _ctx.isFocus,
-        "onUpdate:show": _cache[1] || (_cache[1] = ($event) => _ctx.isFocus = $event),
-        onClose: _ctx.handleBlur
+        onClickOutside: _ctx.handleBlur
       },
       {
         menu: vue.withCtx(() => [vue.createElementVNode(
@@ -20585,11 +20603,11 @@ function __render__$f(_ctx, _cache) {
                 7
                 /* TEXT, CLASS, STYLE */
               )) : vue.createCommentVNode("v-if", true), vue.renderSlot(_ctx.$slots, "arrow-icon", {
-                focus: _ctx.isFocus
+                focus: _ctx.showMenu
               }, () => [vue.createVNode(
                 _component_var_icon,
                 {
-                  class: vue.normalizeClass(_ctx.classes(_ctx.n("arrow"), [_ctx.isFocus, _ctx.n("--arrow-rotate")])),
+                  class: vue.normalizeClass(_ctx.classes(_ctx.n("arrow"), [_ctx.showMenu, _ctx.n("--arrow-rotate")])),
                   "var-select-cover": "",
                   name: "menu-down",
                   transition: 300
@@ -20615,7 +20633,7 @@ function __render__$f(_ctx, _cache) {
         /* FORWARDED */
       },
       8,
-      ["class", "offset-y", "disabled", "placement", "show", "onClose"]
+      ["show", "class", "offset-y", "disabled", "placement", "onClickOutside"]
     ), vue.createVNode(
       _component_var_form_details,
       {
@@ -20643,6 +20661,7 @@ var __sfc__$g = vue.defineComponent({
   props: props$f,
   setup(props2) {
     var isFocus = vue.ref(false);
+    var showMenu = vue.ref(false);
     var multiple = vue.computed(() => props2.multiple);
     var focusColor = vue.computed(() => props2.focusColor);
     var label = vue.ref("");
@@ -20763,6 +20782,7 @@ var __sfc__$g = vue.defineComponent({
       if (form != null && form.disabled.value || form != null && form.readonly.value || disabled || readonly) {
         return;
       }
+      blur();
       call(onBlur);
       validateWithTrigger("onBlur");
     };
@@ -20785,7 +20805,9 @@ var __sfc__$g = vue.defineComponent({
       call(props2["onUpdate:modelValue"], selectedValue);
       call(onChange, selectedValue);
       validateWithTrigger("onChange");
-      !multiple2 && (isFocus.value = false);
+      if (!multiple2) {
+        blur();
+      }
     };
     var handleClear = () => {
       var {
@@ -20855,9 +20877,11 @@ var __sfc__$g = vue.defineComponent({
     var focus = () => {
       offsetY.value = toPxNum(props2.offsetY);
       isFocus.value = true;
+      showMenu.value = true;
     };
     var blur = () => {
       isFocus.value = false;
+      showMenu.value = false;
     };
     var validate = () => v(props2.rules, props2.modelValue);
     var reset = () => {
@@ -20891,6 +20915,7 @@ var __sfc__$g = vue.defineComponent({
     return {
       offsetY,
       isFocus,
+      showMenu,
       errorMessage,
       formDisabled: form == null ? void 0 : form.disabled,
       formReadonly: form == null ? void 0 : form.readonly,
@@ -23749,10 +23774,12 @@ const cell$1 = {
   "--cell-border-color": "#545454"
 };
 const checkbox$1 = {
-  "--checkbox-unchecked-color": "#fff"
+  "--checkbox-unchecked-color": "#fff",
+  "--checkbox-text-color": "#fff"
 };
 const chip$1 = {
-  "--chip-default-color": "#555"
+  "--chip-default-color": "#555",
+  "--chip-default-text-color": "#fff"
 };
 const collapse = {
   "--collapse-background": "#303030",
@@ -23762,7 +23789,9 @@ const collapse = {
 const datePicker$1 = {
   "--date-picker-main-color": "#fff",
   "--date-picker-body-background-color": "#303030",
-  "--day-picker-head-item-color": "#aaaaaa"
+  "--day-picker-head-item-color": "#aaaaaa",
+  "--year-picker-item-color": "#fff",
+  "--picker-header-color": "#fff"
 };
 const dialog$1 = {
   "--dialog-background": "#1e1e1e",
@@ -23800,7 +23829,8 @@ const pullRefresh$1 = {
   "--pull-refresh-background": "#303030"
 };
 const radio$1 = {
-  "--radio-unchecked-color": "#fff"
+  "--radio-unchecked-color": "#fff",
+  "--radio-text-color": "#fff"
 };
 const result$1 = {
   "--result-background": "#303030",
@@ -23844,7 +23874,8 @@ const table$1 = {
 const timePicker$1 = {
   "--time-picker-clock-container-background": "#545454",
   "--time-picker-body-background": "#303030",
-  "--time-picker-clock-item-disable-color": "#aaaaaa"
+  "--time-picker-clock-item-disable-color": "#aaaaaa",
+  "--time-picker-clock-item-text-color": "#fff"
 };
 const uploader$1 = {
   "--uploader-action-background": "#303030",
@@ -23885,6 +23916,12 @@ const link$1 = {
 const progress$1 = {
   "--progress-label-color": "#fff"
 };
+const option$1 = {
+  "--options-text-color": "#fff"
+};
+const countdown$1 = {
+  "--countdown-text-color": "#fff"
+};
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function(target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -23910,7 +23947,7 @@ const dark = _extends({
   "--color-danger": "#ef5350",
   "--color-disabled": "#404040",
   "--color-text-disabled": "#757575"
-}, button$1, cell$1, card$1, timePicker$1, datePicker$1, skeleton$1, tabs$1, tab$1, popup$1, dialog$1, actionSheet$1, chip$1, badge$1, uploader$1, collapse, pullRefresh$1, switchThemes, steps, pagination$1, table$1, fieldDecorator$1, select$1, radio$1, checkbox$1, divider$1, picker$1, appBar$1, bottomNavigation$1, bottomNavigationItem$1, menu$1, result$1, breadcrumb$1, paper$1, avatar$1, link$1, progress$1);
+}, button$1, cell$1, card$1, timePicker$1, datePicker$1, skeleton$1, tabs$1, tab$1, popup$1, dialog$1, actionSheet$1, chip$1, badge$1, uploader$1, collapse, pullRefresh$1, switchThemes, steps, pagination$1, table$1, fieldDecorator$1, select$1, radio$1, checkbox$1, divider$1, picker$1, appBar$1, bottomNavigation$1, bottomNavigationItem$1, menu$1, result$1, breadcrumb$1, paper$1, avatar$1, link$1, progress$1, option$1, countdown$1);
 var Themes = {
   dark
 };
@@ -25510,6 +25547,7 @@ const ColSfc = "";
 const CollapseSfc = "";
 const collapseItem = "";
 const CollapseItemSfc = "";
+const countdown = "";
 const CountdownSfc = "";
 const counter = "";
 const CounterSfc = "";
@@ -25604,7 +25642,7 @@ const TimePickerSfc = "";
 const TooltipSfc = "";
 const uploader = "";
 const UploaderSfc = "";
-const version = "2.11.7";
+const version = "2.11.9-alpha.1687881786307";
 function install(app) {
   ActionSheet.install && app.use(ActionSheet);
   AppBar.install && app.use(AppBar);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@varlet/ui",
-  "version": "2.11.7",
+  "version": "2.11.9-alpha.1687881786307",
   "description": "A material like components library",
   "main": "lib/varlet.cjs.js",
   "module": "es/index.mjs",
@@ -46,9 +46,9 @@
     "@popperjs/core": "^2.11.6",
     "dayjs": "^1.10.4",
     "decimal.js": "^10.2.1",
-    "@varlet/shared": "2.11.7",
-    "@varlet/icons": "2.11.7",
-    "@varlet/use": "2.11.7"
+    "@varlet/icons": "2.11.9-alpha.1687881786307",
+    "@varlet/shared": "2.11.9-alpha.1687881786307",
+    "@varlet/use": "2.11.9-alpha.1687881786307"
   },
   "devDependencies": {
     "@vue/runtime-core": "3.3.1",
@@ -63,8 +63,8 @@
     "typescript": "^4.4.4",
     "vue": "3.3.2",
     "vue-router": "4.2.0",
-    "@varlet/cli": "2.11.7",
-    "@varlet/touch-emulator": "2.11.7"
+    "@varlet/touch-emulator": "2.11.9-alpha.1687881786307",
+    "@varlet/cli": "2.11.9-alpha.1687881786307"
   },
   "browserslist": [
     "Chrome >= 54",

package/types/bottomNavigation.d.ts

@@ -1,4 +1,4 @@
-import { VarComponent, BasicAttributes } from './varComponent'
+import { VarComponent, BasicAttributes, ListenerProp } from './varComponent'
 import { ButtonProps } from './button'
 import { VNode } from 'vue'
 
@@ -13,10 +13,10 @@ export interface BottomNavigationProps extends BasicAttributes {
   activeColor?: string
   inactiveColor?: string
   fabProps?: Partial<ButtonProps>
-  onChange?: (active: string | number) => void
-  'onUpdate:active'?: (active: string | number) => void
-  onBeforeChange?: (active: string | number) => any | Promise<any>
-  onFabClick?: () => void
+  onChange?: ListenerProp<(active: string | number) => void>
+  onBeforeChange?: ListenerProp<(active: string | number) => any | Promise<any>>
+  onFabClick?: ListenerProp<() => void>
+  'onUpdate:active'?: ListenerProp<(active: string | number) => void>
 }
 
 export class BottomNavigation extends VarComponent {

package/types/bottomNavigationItem.d.ts

@@ -1,4 +1,4 @@
-import { VarComponent, BasicAttributes } from './varComponent'
+import { VarComponent, BasicAttributes, ListenerProp } from './varComponent'
 import { BadgeProps } from './badge'
 import { VNode } from 'vue'
 
@@ -10,7 +10,7 @@ export interface BottomNavigationItemProps extends BasicAttributes {
   label?: string
   namespace?: string
   badge?: boolean | BadgeProps
-  onClick?: (active: string | number) => void
+  onClick?: ListenerProp<(active: string | number) => void>
 }
 
 export interface BottomNavigationItemIcon {

package/types/menu.d.ts

@@ -31,6 +31,7 @@ export interface MenuProps extends BasicAttributes {
   sameWidth?: boolean
   elevation?: boolean | number | string
   defaultStyle?: boolean
+  closeOnClickReference?: boolean
   onOpen?: ListenerProp<() => void>
   onOpened?: ListenerProp<() => void>
   onClose?: ListenerProp<() => void>

package/types/picker.d.ts

@@ -22,7 +22,7 @@ export interface PickerProps {
   textKey?: string
   toolbar?: boolean
   cascade?: boolean
-  cascadeInitialIndexes: number[]
+  cascadeInitialIndexes?: number[]
   textFormatter?: (text: any, columnIndex: number) => any
   optionHeight?: string | number
   optionCount?: string | number

package/types/tooltip.d.ts

@@ -25,6 +25,7 @@ export interface TooltipProps extends BasicAttributes {
   offsetY?: string | number
   teleport?: TeleportProps['to']
   sameWidth?: boolean
+  closeOnClickReference?: boolean
   onOpen?: ListenerProp<() => void>
   onOpened?: ListenerProp<() => void>
   onClose?: ListenerProp<() => void>