zartui 3.1.3 → 3.1.5

package/lib/index.d.ts

@@ -47,6 +47,7 @@ export * from "./popup";
 export * from "./pull-refresh";
 export * from "./radio";
 export * from "./radio-group";
+export * from "./radio-picker";
 export * from "./rate";
 export * from "./row";
 export * from "./search";
@@ -77,4 +78,4 @@ declare namespace _default {
 }
 export default _default;
 export function install(app: any): void;
-export const version: "3.1.3";
+export const version: "3.1.5";

package/lib/index.js

@@ -71,6 +71,7 @@ var import_popup = require("./popup");
 var import_pull_refresh = require("./pull-refresh");
 var import_radio = require("./radio");
 var import_radio_group = require("./radio-group");
+var import_radio_picker = require("./radio-picker");
 var import_rate = require("./rate");
 var import_row = require("./row");
 var import_search = require("./search");
@@ -144,6 +145,7 @@ __reExport(stdin_exports, require("./popup"), module.exports);
 __reExport(stdin_exports, require("./pull-refresh"), module.exports);
 __reExport(stdin_exports, require("./radio"), module.exports);
 __reExport(stdin_exports, require("./radio-group"), module.exports);
+__reExport(stdin_exports, require("./radio-picker"), module.exports);
 __reExport(stdin_exports, require("./rate"), module.exports);
 __reExport(stdin_exports, require("./row"), module.exports);
 __reExport(stdin_exports, require("./search"), module.exports);
@@ -168,7 +170,7 @@ __reExport(stdin_exports, require("./time-picker"), module.exports);
 __reExport(stdin_exports, require("./timeline"), module.exports);
 __reExport(stdin_exports, require("./toast"), module.exports);
 __reExport(stdin_exports, require("./uploader"), module.exports);
-const version = "3.1.3";
+const version = "3.1.5";
 function install(app) {
   const components = [
     import_action_sheet.ActionSheet,
@@ -219,6 +221,7 @@ function install(app) {
     import_pull_refresh.PullRefresh,
     import_radio.Radio,
     import_radio_group.RadioGroup,
+    import_radio_picker.RadioPicker,
     import_rate.Rate,
     import_row.Row,
     import_search.Search,

package/lib/lazyload/vue-lazyload/index.d.ts

@@ -1,55 +1,55 @@
-import type { App } from 'vue';
-
-declare type ListenEvent =
-  | 'scroll'
-  | 'wheel'
-  | 'mousewheel'
-  | 'resize'
-  | 'animationend'
-  | 'transitionend'
-  | 'touchmove';
-
-// eslint-disable-next-line
-declare type Callback = (listener: any, options: LazyloadOptions) => void;
-
-declare type Filter = {
-  webp?: Callback;
-  progressive?: Callback;
-};
-
-declare type Adapter = {
-  error?: Callback;
-  loaded?: Callback;
-  loading?: Callback;
-};
-
-export declare type LazyloadOptions = {
-  error?: string;
-  filter?: Filter;
-  silent?: boolean;
-  adapter?: Adapter;
-  loading?: string;
-  attempt?: number;
-  preLoad?: number;
-  observer?: boolean;
-  lazyImage?: boolean;
-  throttleWait?: number;
-  listenEvents?: ListenEvent[];
-  dispatchEvent?: boolean;
-  lazyComponent?: boolean;
-  observerOptions?: IntersectionObserverInit;
-};
-
-export declare const Lazyload: {
-  install(app: App, options?: LazyloadOptions): void;
-};
-
-declare module '@vue/runtime-core' {
-  interface ComponentCustomProperties {
-    $Lazyload: {
-      $on: (event: string, handler: Callback) => void;
-      $off: (event: string, handler?: Callback) => void;
-      $once: (event: string, handler: Callback) => void;
-    };
-  }
-}
+import type { App } from 'vue';
+
+declare type ListenEvent =
+  | 'scroll'
+  | 'wheel'
+  | 'mousewheel'
+  | 'resize'
+  | 'animationend'
+  | 'transitionend'
+  | 'touchmove';
+
+// eslint-disable-next-line
+declare type Callback = (listener: any, options: LazyloadOptions) => void;
+
+declare type Filter = {
+  webp?: Callback;
+  progressive?: Callback;
+};
+
+declare type Adapter = {
+  error?: Callback;
+  loaded?: Callback;
+  loading?: Callback;
+};
+
+export declare type LazyloadOptions = {
+  error?: string;
+  filter?: Filter;
+  silent?: boolean;
+  adapter?: Adapter;
+  loading?: string;
+  attempt?: number;
+  preLoad?: number;
+  observer?: boolean;
+  lazyImage?: boolean;
+  throttleWait?: number;
+  listenEvents?: ListenEvent[];
+  dispatchEvent?: boolean;
+  lazyComponent?: boolean;
+  observerOptions?: IntersectionObserverInit;
+};
+
+export declare const Lazyload: {
+  install(app: App, options?: LazyloadOptions): void;
+};
+
+declare module '@vue/runtime-core' {
+  interface ComponentCustomProperties {
+    $Lazyload: {
+      $on: (event: string, handler: Callback) => void;
+      $off: (event: string, handler?: Callback) => void;
+      $once: (event: string, handler: Callback) => void;
+    };
+  }
+}

package/lib/radio-picker/RadioPicker.d.ts

@@ -0,0 +1,207 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+import { Numeric } from '../utils';
+import type { PickerColumn, PickerFieldNames, RadioPickerOption } from './types';
+export declare const pickerSharedProps: {
+    loading: BooleanConstructor;
+    readonly: BooleanConstructor;
+    allowHtml: BooleanConstructor;
+    showToolbar: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    showTitle: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    swipeDuration: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    title: {
+        type: PropType<string>;
+        default: string;
+    };
+} & {
+    cancelButtonText: StringConstructor;
+    confirmButtonText: StringConstructor;
+};
+export declare const radioPickerProps: {
+    loading: BooleanConstructor;
+    readonly: BooleanConstructor;
+    allowHtml: BooleanConstructor;
+    showToolbar: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    showTitle: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    swipeDuration: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    title: {
+        type: PropType<string>;
+        default: string;
+    };
+} & {
+    cancelButtonText: StringConstructor;
+    confirmButtonText: StringConstructor;
+} & {
+    columns: {
+        type: PropType<(PickerColumn | RadioPickerOption)[]>;
+        default: () => (PickerColumn | RadioPickerOption)[];
+    };
+    modelValue: {
+        type: PropType<Numeric[]>;
+        default: () => Numeric[];
+    };
+    columnsFieldNames: PropType<PickerFieldNames>;
+    wrapHeight: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: string;
+    };
+    showPicker: BooleanConstructor;
+    popup: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    searchable: BooleanConstructor;
+    autoSearch: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    searchPlaceholder: {
+        type: PropType<string>;
+        default: string;
+    };
+};
+export type RadioPickerProps = ExtractPropTypes<typeof radioPickerProps>;
+declare const _default: import("vue").DefineComponent<{
+    loading: BooleanConstructor;
+    readonly: BooleanConstructor;
+    allowHtml: BooleanConstructor;
+    showToolbar: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    showTitle: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    swipeDuration: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    title: {
+        type: PropType<string>;
+        default: string;
+    };
+} & {
+    cancelButtonText: StringConstructor;
+    confirmButtonText: StringConstructor;
+} & {
+    columns: {
+        type: PropType<(PickerColumn | RadioPickerOption)[]>;
+        default: () => (PickerColumn | RadioPickerOption)[];
+    };
+    modelValue: {
+        type: PropType<Numeric[]>;
+        default: () => Numeric[];
+    };
+    columnsFieldNames: PropType<PickerFieldNames>;
+    wrapHeight: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: string;
+    };
+    showPicker: BooleanConstructor;
+    popup: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    searchable: BooleanConstructor;
+    autoSearch: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    searchPlaceholder: {
+        type: PropType<string>;
+        default: string;
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "cancel" | "change" | "confirm" | "clickOption" | "update:showPicker")[], "update:modelValue" | "cancel" | "change" | "confirm" | "clickOption" | "update:showPicker", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+    loading: BooleanConstructor;
+    readonly: BooleanConstructor;
+    allowHtml: BooleanConstructor;
+    showToolbar: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    showTitle: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    swipeDuration: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    title: {
+        type: PropType<string>;
+        default: string;
+    };
+} & {
+    cancelButtonText: StringConstructor;
+    confirmButtonText: StringConstructor;
+} & {
+    columns: {
+        type: PropType<(PickerColumn | RadioPickerOption)[]>;
+        default: () => (PickerColumn | RadioPickerOption)[];
+    };
+    modelValue: {
+        type: PropType<Numeric[]>;
+        default: () => Numeric[];
+    };
+    columnsFieldNames: PropType<PickerFieldNames>;
+    wrapHeight: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: string;
+    };
+    showPicker: BooleanConstructor;
+    popup: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    searchable: BooleanConstructor;
+    autoSearch: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    searchPlaceholder: {
+        type: PropType<string>;
+        default: string;
+    };
+}>> & {
+    onChange?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onCancel?: ((...args: any[]) => any) | undefined;
+    onConfirm?: ((...args: any[]) => any) | undefined;
+    onClickOption?: ((...args: any[]) => any) | undefined;
+    "onUpdate:showPicker"?: ((...args: any[]) => any) | undefined;
+}, {
+    title: string;
+    modelValue: Numeric[];
+    readonly: boolean;
+    popup: boolean;
+    loading: boolean;
+    showTitle: boolean;
+    columns: (PickerColumn | RadioPickerOption)[];
+    allowHtml: boolean;
+    showToolbar: boolean;
+    swipeDuration: string | number;
+    showPicker: boolean;
+    wrapHeight: string | number;
+    searchable: boolean;
+    autoSearch: boolean;
+    searchPlaceholder: string;
+}, {}>;
+export default _default;

package/lib/radio-picker/RadioPicker.js

@@ -0,0 +1,319 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name2 in all)
+    __defProp(target, name2, { get: all[name2], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var stdin_exports = {};
+__export(stdin_exports, {
+  default: () => stdin_default,
+  pickerSharedProps: () => pickerSharedProps,
+  radioPickerProps: () => radioPickerProps
+});
+module.exports = __toCommonJS(stdin_exports);
+var import_vue = require("vue");
+var import_vue2 = require("vue");
+var import_utils = require("../utils");
+var import_utils2 = require("./utils");
+var import_use = require("@zartui/use");
+var import_use_expose = require("../composables/use-expose");
+var import_divider = require("../divider");
+var import_loading = require("../loading");
+var import_search = __toESM(require("../search"));
+var import_RadioPickerColumn = __toESM(require("./RadioPickerColumn"));
+var import_RadioPickerToolbar = __toESM(require("./RadioPickerToolbar"));
+var import_popup = __toESM(require("../popup"));
+var import_debounce = require("../utils/debounce");
+const RADIO_PICKER_TITLE_HEIGHT = 44;
+const RADIO_PICKER_SEARCH_HEIGHT = 60;
+const pickerSharedProps = (0, import_utils.extend)({
+  loading: Boolean,
+  readonly: Boolean,
+  allowHtml: Boolean,
+  showToolbar: import_utils.truthProp,
+  showTitle: import_utils.truthProp,
+  swipeDuration: (0, import_utils.makeNumericProp)(1e3),
+  title: (0, import_utils.makeStringProp)("\u8BF7\u9009\u62E9")
+}, import_RadioPickerToolbar.pickerToolbarProps);
+const radioPickerProps = (0, import_utils.extend)({}, pickerSharedProps, {
+  columns: (0, import_utils.makeArrayProp)(),
+  modelValue: (0, import_utils.makeArrayProp)(),
+  columnsFieldNames: Object,
+  // 占满半屏，这里的高度是减去了title与底部按钮的内容高度
+  wrapHeight: (0, import_utils.makeNumericProp)("40vh"),
+  showPicker: Boolean,
+  popup: import_utils.truthProp,
+  searchable: Boolean,
+  autoSearch: import_utils.truthProp,
+  searchPlaceholder: (0, import_utils.makeStringProp)("\u8BF7\u641C\u7D22")
+});
+var stdin_default = (0, import_vue2.defineComponent)({
+  name: import_utils2.name,
+  props: radioPickerProps,
+  emits: ["confirm", "cancel", "change", "clickOption", "update:modelValue", "update:showPicker"],
+  setup(props, {
+    emit,
+    slots
+  }) {
+    const columnsRef = (0, import_vue2.ref)();
+    const selectedValues = (0, import_vue2.ref)(props.modelValue.slice(0));
+    const showPicker = (0, import_vue2.ref)(props.showPicker);
+    const {
+      children,
+      linkChildren
+    } = (0, import_use.useChildren)(import_RadioPickerColumn.PICKER_KEY);
+    const searchVal = (0, import_vue2.ref)("");
+    const autoSearchVal = (0, import_vue2.ref)("");
+    linkChildren();
+    const fields = (0, import_vue2.computed)(() => (0, import_utils2.assignDefaultFields)(props.columnsFieldNames));
+    const wrapHeight = (0, import_vue2.computed)(() => {
+      const basicContentHeight = (0, import_utils.unitToPx)(props.wrapHeight);
+      let contentHeight = basicContentHeight;
+      if (props.showTitle) {
+        if (props.searchable) {
+          contentHeight = basicContentHeight - RADIO_PICKER_SEARCH_HEIGHT;
+        }
+      } else {
+        contentHeight = basicContentHeight + RADIO_PICKER_TITLE_HEIGHT;
+        if (props.searchable) {
+          contentHeight -= RADIO_PICKER_SEARCH_HEIGHT;
+        }
+      }
+      return contentHeight;
+    });
+    const columnsType = (0, import_vue2.computed)(() => (0, import_utils2.getColumnsType)(props.columns, fields.value));
+    const currentColumns = (0, import_vue2.computed)(() => {
+      const {
+        columns
+      } = props;
+      switch (columnsType.value) {
+        case "multiple":
+          return columns;
+        case "cascade":
+          return (0, import_utils2.formatCascadeColumns)(columns, fields.value, selectedValues);
+        default:
+          return [columns];
+      }
+    });
+    const hasOptions = (0, import_vue2.computed)(() => currentColumns.value.some((options) => options.length));
+    const selectedOptions = (0, import_vue2.computed)(() => currentColumns.value.map((options, index) => (0, import_utils2.findOptionByValue)(options, selectedValues.value[index], fields.value)));
+    (0, import_vue2.watch)(showPicker, (newValue) => {
+      if (newValue !== props.showPicker) {
+        emit("update:showPicker", newValue);
+      }
+    });
+    (0, import_vue2.watch)(() => props.showPicker, (newValue) => {
+      if (newValue !== showPicker.value) {
+        showPicker.value = newValue;
+      }
+    });
+    const setValue = (index, value) => {
+      if (selectedValues.value[index] !== value) {
+        const newValues = selectedValues.value.slice(0);
+        newValues[index] = value;
+        selectedValues.value = newValues;
+      }
+    };
+    const getEventParams = () => ({
+      selectedValues: selectedValues.value.slice(0),
+      selectedOptions: selectedOptions.value
+    });
+    const onChange = (value, columnIndex) => {
+      setValue(columnIndex, value);
+      if (columnsType.value === "cascade") {
+        selectedValues.value.forEach((value2, index) => {
+          const options = currentColumns.value[index];
+          if (!(0, import_utils2.isOptionExist)(options, value2, fields.value)) {
+            setValue(index, options.length ? options[0][fields.value.value] : void 0);
+          }
+        });
+      }
+      (0, import_vue2.nextTick)(() => {
+        emit("change", (0, import_utils.extend)({
+          columnIndex
+        }, getEventParams()));
+      });
+    };
+    const onClickOption = (currentOption, columnIndex) => emit("clickOption", (0, import_utils.extend)({
+      columnIndex,
+      currentOption
+    }, getEventParams()));
+    const confirm = () => {
+      children.forEach((child) => child.stopMomentum());
+      const params = getEventParams();
+      emit("confirm", params);
+      return params;
+    };
+    const cancel = () => {
+      emit("update:showPicker", false);
+      emit("cancel", getEventParams());
+    };
+    const updateShow = (value) => emit("update:showPicker", value);
+    const renderColumnItems = () => currentColumns.value.map((options, columnIndex) => (0, import_vue.createVNode)(import_RadioPickerColumn.default, {
+      "value": selectedValues.value[columnIndex],
+      "fields": fields.value,
+      "options": options,
+      "readonly": props.readonly,
+      "allowHtml": props.allowHtml,
+      "wrapHeight": wrapHeight.value,
+      "swipeDuration": props.swipeDuration,
+      "autoSearchVal": autoSearchVal.value,
+      "onChange": (value) => onChange(value, columnIndex),
+      "onClickOption": (option) => onClickOption(option, columnIndex)
+    }, {
+      option: slots.option,
+      searchEmpty: slots["search-empty"]
+    }));
+    const renderMask = (maskHeight) => {
+      if (hasOptions.value) {
+        const maskStyle = {
+          backgroundSize: `100% ${(maskHeight - wrapHeight.value) / 2}px`
+        };
+        return [(0, import_vue.createVNode)("div", {
+          "class": (0, import_utils2.bem)("mask"),
+          "style": maskStyle
+        }, null)];
+      }
+    };
+    const handleSearchInput = () => {
+      if (props.autoSearch) {
+        return (0, import_debounce.useDebounceFn)((val) => {
+          searchVal.value = val;
+          autoSearchVal.value = searchVal.value;
+        }, 500);
+      }
+      return (val) => {
+        searchVal.value = val;
+      };
+    };
+    const handleSearch = () => {
+      if (!props.autoSearch) {
+        autoSearchVal.value = searchVal.value;
+      }
+    };
+    const renderSearch = () => {
+      if (props.searchable) {
+        return (0, import_vue.createVNode)("div", {
+          "class": (0, import_utils2.bem)("search")
+        }, [(0, import_vue.createVNode)(import_search.default, {
+          "show-action": !props.autoSearch,
+          "modelValue": searchVal.value,
+          "placeholder": props.searchPlaceholder,
+          "onUpdate:modelValue": handleSearchInput(),
+          "onSearch": handleSearch,
+          "onClear": handleSearch
+        }, null)]);
+      }
+    };
+    const renderColumns = () => {
+      const columnsStyle = {
+        height: `${wrapHeight.value}px`
+      };
+      return (0, import_vue.createVNode)("div", {
+        "ref": columnsRef,
+        "class": (0, import_utils2.bem)("columns"),
+        "style": columnsStyle
+      }, [renderColumnItems(), renderMask(wrapHeight.value)]);
+    };
+    const renderToolbar = () => {
+      if (props.showToolbar) {
+        return (0, import_vue.createVNode)(import_RadioPickerToolbar.default, (0, import_vue.mergeProps)((0, import_utils.pick)(props, import_RadioPickerToolbar.pickerToolbarPropKeys), {
+          "onConfirm": confirm,
+          "onCancel": cancel
+        }), (0, import_utils.pick)(slots, import_RadioPickerToolbar.pickerToolbarSlots));
+      }
+    };
+    const renderTitleBar = () => {
+      if (props.showTitle) {
+        if (slots["title"]) {
+          return slots["title"]();
+        }
+        return (0, import_vue.createVNode)("div", {
+          "class": [(0, import_utils2.bem)("title"), import_utils.HAPTICS_FEEDBACK]
+        }, [props.title]);
+      }
+    };
+    const topDivider = () => props.showTitle ? (0, import_vue.createVNode)(import_divider.Divider, {
+      "style": "margin: 0"
+    }, null) : null;
+    const buttomDivider = () => props.showToolbar ? (0, import_vue.createVNode)(import_divider.Divider, {
+      "style": "margin: 0"
+    }, null) : null;
+    (0, import_vue2.watch)(currentColumns, (columns) => {
+      columns.forEach((options, index) => {
+        if (options.length && !(0, import_utils2.isOptionExist)(options, selectedValues.value[index], fields.value)) {
+          setValue(index, (0, import_utils2.getFirstEnabledOption)(options)[fields.value.value]);
+        }
+      });
+    }, {
+      immediate: true
+    });
+    let lastEmittedModelValue;
+    (0, import_vue2.watch)(() => props.modelValue, (newValues) => {
+      if (!(0, import_utils.isSameValue)(newValues, selectedValues.value) && !(0, import_utils.isSameValue)(newValues, lastEmittedModelValue)) {
+        selectedValues.value = newValues.slice(0);
+        lastEmittedModelValue = newValues.slice(0);
+      }
+    }, {
+      deep: true
+    });
+    (0, import_vue2.watch)(selectedValues, (newValues) => {
+      if (!(0, import_utils.isSameValue)(newValues, props.modelValue)) {
+        lastEmittedModelValue = newValues.slice(0);
+        emit("update:modelValue", lastEmittedModelValue);
+      }
+    }, {
+      immediate: true
+    });
+    (0, import_use.useEventListener)("touchmove", import_utils.preventDefault, {
+      target: columnsRef
+    });
+    const getSelectedOptions = () => selectedOptions.value;
+    (0, import_use_expose.useExpose)({
+      confirm,
+      getSelectedOptions
+    });
+    const renderPicker = () => {
+      var _a, _b;
+      return (0, import_vue.createVNode)("div", {
+        "class": (0, import_utils2.bem)()
+      }, [renderTitleBar(), props.loading ? (0, import_vue.createVNode)(import_loading.Loading, {
+        "class": (0, import_utils2.bem)("loading")
+      }, null) : null, topDivider(), renderSearch(), (_a = slots["columns-top"]) == null ? void 0 : _a.call(slots), renderColumns(), (_b = slots["columns-bottom"]) == null ? void 0 : _b.call(slots), buttomDivider(), renderToolbar()]);
+    };
+    return () => {
+      if (props.popup) {
+        return (0, import_vue.createVNode)(import_popup.default, {
+          "show": showPicker.value,
+          "onUpdate:show": [($event) => showPicker.value = $event, updateShow],
+          "round": true,
+          "position": "bottom"
+        }, {
+          default: renderPicker
+        });
+      }
+      return renderPicker();
+    };
+  }
+});