@varlet/ui 2.20.1 → 2.20.2

package/es/picker/Picker.mjs

@@ -0,0 +1,486 @@
+import VarButton from "../button/index.mjs";
+import VarPopup from "../popup/index.mjs";
+import { defineComponent, watch, ref, computed, Transition } from "vue";
+import { props } from "./props.mjs";
+import { useTouch, useVModel } from "@varlet/use";
+import { clamp, clampArrayRange, call } from "@varlet/shared";
+import { toPxNum, getTranslateY } from "../utils/elements.mjs";
+import { pack } from "../locale/index.mjs";
+import { createNamespace } from "../utils/components.mjs";
+const { name, n, classes } = createNamespace("picker");
+const MOMENTUM_RECORD_TIME = 300;
+const MOMENTUM_ALLOW_DISTANCE = 15;
+const TRANSITION_DURATION = 200;
+const MOMENTUM_TRANSITION_DURATION = 1e3;
+let sid = 0;
+import { renderSlot as _renderSlot, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, resolveComponent as _resolveComponent, normalizeClass as _normalizeClass, withCtx as _withCtx, createVNode as _createVNode, createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, renderList as _renderList, Fragment as _Fragment, normalizeStyle as _normalizeStyle, withModifiers as _withModifiers, mergeProps as _mergeProps, resolveDynamicComponent as _resolveDynamicComponent, createBlock as _createBlock, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
+const _withScopeId = (n2) => (_pushScopeId(""), n2 = n2(), _popScopeId(), n2);
+const _hoisted_1 = ["onTouchstartPassive", "onTouchmove", "onTouchend"];
+const _hoisted_2 = ["onTransitionend"];
+const _hoisted_3 = ["onClick"];
+function __render__(_ctx, _cache) {
+  const _component_var_button = _resolveComponent("var-button");
+  return _openBlock(), _createBlock(
+    _resolveDynamicComponent(_ctx.dynamic ? _ctx.n("$-popup") : _ctx.Transition),
+    _mergeProps(
+      _ctx.dynamic ? {
+        onOpen: _ctx.onOpen,
+        onOpened: _ctx.onOpened,
+        onClose: _ctx.onClose,
+        onClosed: _ctx.onClosed,
+        onClickOverlay: _ctx.onClickOverlay,
+        onRouteChange: _ctx.onRouteChange,
+        closeOnClickOverlay: _ctx.closeOnClickOverlay,
+        teleport: _ctx.teleport,
+        show: _ctx.show,
+        safeArea: _ctx.safeArea,
+        "onUpdate:show": _ctx.handlePopupUpdateShow,
+        position: "bottom",
+        class: _ctx.n("popup")
+      } : null,
+      { "var-picker-cover": "" }
+    ),
+    {
+      default: _withCtx(() => [
+        _createElementVNode(
+          "div",
+          _mergeProps({
+            class: _ctx.n()
+          }, _ctx.$attrs),
+          [
+            _ctx.toolbar ? (_openBlock(), _createElementBlock(
+              "div",
+              {
+                key: 0,
+                class: _normalizeClass(_ctx.n("toolbar"))
+              },
+              [
+                _renderSlot(_ctx.$slots, "cancel", {}, () => [
+                  _createVNode(_component_var_button, {
+                    class: _normalizeClass(_ctx.n("cancel-button")),
+                    "var-picker-cover": "",
+                    text: "",
+                    "text-color": _ctx.cancelButtonTextColor,
+                    onClick: _ctx.cancel
+                  }, {
+                    default: _withCtx(() => {
+                      var _a;
+                      return [
+                        _createTextVNode(
+                          _toDisplayString((_a = _ctx.cancelButtonText) != null ? _a : _ctx.pack.pickerCancelButtonText),
+                          1
+                          /* TEXT */
+                        )
+                      ];
+                    }),
+                    _: 1
+                    /* STABLE */
+                  }, 8, ["class", "text-color", "onClick"])
+                ]),
+                _renderSlot(_ctx.$slots, "title", {}, () => {
+                  var _a;
+                  return [
+                    _createElementVNode(
+                      "div",
+                      {
+                        class: _normalizeClass(_ctx.n("title"))
+                      },
+                      _toDisplayString((_a = _ctx.title) != null ? _a : _ctx.pack.pickerTitle),
+                      3
+                      /* TEXT, CLASS */
+                    )
+                  ];
+                }),
+                _renderSlot(_ctx.$slots, "confirm", {}, () => [
+                  _createVNode(_component_var_button, {
+                    class: _normalizeClass(_ctx.n("confirm-button")),
+                    text: "",
+                    "var-picker-cover": "",
+                    "text-color": _ctx.confirmButtonTextColor,
+                    onClick: _ctx.confirm
+                  }, {
+                    default: _withCtx(() => {
+                      var _a;
+                      return [
+                        _createTextVNode(
+                          _toDisplayString((_a = _ctx.confirmButtonText) != null ? _a : _ctx.pack.pickerConfirmButtonText),
+                          1
+                          /* TEXT */
+                        )
+                      ];
+                    }),
+                    _: 1
+                    /* STABLE */
+                  }, 8, ["class", "text-color", "onClick"])
+                ])
+              ],
+              2
+              /* CLASS */
+            )) : _createCommentVNode("v-if", true),
+            _createElementVNode(
+              "div",
+              {
+                class: _normalizeClass(_ctx.n("columns")),
+                style: _normalizeStyle({ height: `${_ctx.columnHeight}px` })
+              },
+              [
+                (_openBlock(true), _createElementBlock(
+                  _Fragment,
+                  null,
+                  _renderList(_ctx.scrollColumns, (c) => {
+                    return _openBlock(), _createElementBlock("div", {
+                      class: _normalizeClass(_ctx.n("column")),
+                      key: c.id,
+                      onTouchstartPassive: ($event) => _ctx.handleTouchstart($event, c),
+                      onTouchmove: _withModifiers(($event) => _ctx.handleTouchmove($event, c), ["prevent"]),
+                      onTouchend: ($event) => _ctx.handleTouchend(c)
+                    }, [
+                      _createElementVNode("div", {
+                        class: _normalizeClass(_ctx.n("scroller")),
+                        ref_for: true,
+                        ref: (el) => _ctx.setScrollEl(el, c),
+                        style: _normalizeStyle({
+                          transform: `translateY(${c.translate}px)`,
+                          transitionDuration: `${c.duration}ms`,
+                          transitionProperty: c.duration ? "transform" : "none"
+                        }),
+                        onTransitionend: ($event) => _ctx.handleTransitionend(c)
+                      }, [
+                        (_openBlock(true), _createElementBlock(
+                          _Fragment,
+                          null,
+                          _renderList(c.column, (option, index) => {
+                            return _openBlock(), _createElementBlock("div", {
+                              key: _ctx.getValue(option),
+                              class: _normalizeClass(_ctx.classes(_ctx.n("option"), option.className)),
+                              style: _normalizeStyle({ height: `${_ctx.optionHeight}px` }),
+                              onClick: ($event) => _ctx.handleClick(c, index)
+                            }, [
+                              _createElementVNode(
+                                "div",
+                                {
+                                  class: _normalizeClass(_ctx.classes(_ctx.n("text"), option.textClassName))
+                                },
+                                _toDisplayString(option[_ctx.getOptionKey("text")]),
+                                3
+                                /* TEXT, CLASS */
+                              )
+                            ], 14, _hoisted_3);
+                          }),
+                          128
+                          /* KEYED_FRAGMENT */
+                        ))
+                      ], 46, _hoisted_2)
+                    ], 42, _hoisted_1);
+                  }),
+                  128
+                  /* KEYED_FRAGMENT */
+                )),
+                _createElementVNode(
+                  "div",
+                  {
+                    class: _normalizeClass(_ctx.n("picked")),
+                    style: _normalizeStyle({
+                      top: `${_ctx.center}px`,
+                      height: `${_ctx.optionHeight}px`
+                    })
+                  },
+                  null,
+                  6
+                  /* CLASS, STYLE */
+                ),
+                _createElementVNode(
+                  "div",
+                  {
+                    class: _normalizeClass(_ctx.n("mask")),
+                    style: _normalizeStyle({ backgroundSize: `100% ${(_ctx.columnHeight - _ctx.optionHeight) / 2}px` })
+                  },
+                  null,
+                  6
+                  /* CLASS, STYLE */
+                )
+              ],
+              6
+              /* CLASS, STYLE */
+            )
+          ],
+          16
+          /* FULL_PROPS */
+        )
+      ]),
+      _: 3
+      /* FORWARDED */
+    },
+    16
+    /* FULL_PROPS */
+  );
+}
+const __sfc__ = defineComponent({
+  name,
+  components: {
+    VarButton,
+    VarPopup
+  },
+  inheritAttrs: false,
+  props,
+  setup(props2) {
+    const modelValue = useVModel(props2, "modelValue");
+    const scrollColumns = ref([]);
+    const optionHeight = computed(() => toPxNum(props2.optionHeight));
+    const optionCount = computed(() => toPxNum(props2.optionCount));
+    const center = computed(() => optionCount.value * optionHeight.value / 2 - optionHeight.value / 2);
+    const columnHeight = computed(() => optionCount.value * optionHeight.value);
+    const { prevY, moveY, dragging, startTouch, moveTouch, endTouch } = useTouch();
+    let prevIndexes = [];
+    buildScrollColumns();
+    watch(() => props2.columns, buildScrollColumns, { deep: true });
+    watch(() => modelValue.value, updateScrollColumnsIndex);
+    function getOptionKey(key) {
+      const keyMap = {
+        text: props2.textKey,
+        value: props2.valueKey,
+        children: props2.childrenKey
+      };
+      return keyMap[key];
+    }
+    function getValue(option) {
+      var _a;
+      return (_a = option[getOptionKey("value")]) != null ? _a : option[getOptionKey("text")];
+    }
+    function setPrevIndexes(indexes) {
+      prevIndexes = [...indexes];
+    }
+    function normalizeNormalMode(columns) {
+      return columns.map((column) => {
+        const scrollColumn = {
+          id: sid++,
+          prevY: 0,
+          momentumPrevY: 0,
+          touching: false,
+          translate: center.value,
+          index: 0,
+          duration: 0,
+          momentumTime: 0,
+          column,
+          scrollEl: null,
+          scrolling: false
+        };
+        scrollTo(scrollColumn);
+        return scrollColumn;
+      });
+    }
+    function normalizeCascadeMode(column) {
+      const scrollColumns2 = [];
+      createChildren(scrollColumns2, column);
+      return scrollColumns2;
+    }
+    function createChildren(scrollColumns2, children) {
+      var _a;
+      if (children.length) {
+        const scrollColumn = {
+          id: sid++,
+          prevY: 0,
+          momentumPrevY: 0,
+          touching: false,
+          translate: center.value,
+          index: 0,
+          duration: 0,
+          momentumTime: 0,
+          column: children,
+          scrollEl: null,
+          scrolling: false
+        };
+        scrollColumns2.push(scrollColumn);
+        scrollTo(scrollColumn);
+        createChildren(scrollColumns2, (_a = scrollColumn.column[scrollColumn.index][getOptionKey("children")]) != null ? _a : []);
+      }
+    }
+    function rebuildChildren(scrollColumn) {
+      var _a;
+      scrollColumns.value.splice(scrollColumns.value.indexOf(scrollColumn) + 1);
+      createChildren(scrollColumns.value, (_a = scrollColumn.column[scrollColumn.index][getOptionKey("children")]) != null ? _a : []);
+    }
+    function buildScrollColumns() {
+      scrollColumns.value = props2.cascade ? normalizeCascadeMode(props2.columns) : normalizeNormalMode(props2.columns);
+      updateScrollColumnsIndex();
+    }
+    function updateScrollColumnsIndex() {
+      scrollColumns.value.forEach((scrollColumn, idx) => {
+        const index = scrollColumn.column.findIndex((option) => modelValue.value[idx] === getValue(option));
+        scrollColumn.index = index === -1 ? 0 : index;
+        scrollTo(scrollColumn);
+      });
+      const { indexes } = getPicked();
+      setPrevIndexes(indexes);
+    }
+    function setScrollEl(el, scrollColumn) {
+      scrollColumn.scrollEl = el;
+    }
+    function handlePopupUpdateShow(value) {
+      call(props2["onUpdate:show"], value);
+    }
+    function clampTranslate(scrollColumn) {
+      const minTranslate = center.value - scrollColumn.column.length * optionHeight.value;
+      const maxTranslate = optionHeight.value + center.value;
+      scrollColumn.translate = clamp(scrollColumn.translate, minTranslate, maxTranslate);
+    }
+    function getTargetIndex(scrollColumn, viewTranslate) {
+      const index = Math.round((center.value - viewTranslate) / optionHeight.value);
+      return clampArrayRange(index, scrollColumn.column);
+    }
+    function updateTranslate(scrollColumn) {
+      scrollColumn.translate = center.value - scrollColumn.index * optionHeight.value;
+      return scrollColumn.translate;
+    }
+    function getPicked() {
+      const values = [];
+      const indexes = [];
+      const options = [];
+      scrollColumns.value.forEach(({ column, index }) => {
+        const option = column[index];
+        values.push(getValue(option));
+        indexes.push(index);
+        options.push(option);
+      });
+      return {
+        values,
+        indexes,
+        options
+      };
+    }
+    function scrollTo(scrollColumn, duration = 0) {
+      updateTranslate(scrollColumn);
+      scrollColumn.duration = duration;
+    }
+    function momentum(scrollColumn, distance, duration) {
+      scrollColumn.translate += Math.abs(distance / duration) / 3e-3 * (distance < 0 ? -1 : 1);
+    }
+    function handleClick(scrollColumn, index) {
+      if (dragging.value) {
+        return;
+      }
+      scrollColumn.index = index;
+      scrollTo(scrollColumn, TRANSITION_DURATION);
+    }
+    function handleTouchstart(event, scrollColumn) {
+      scrollColumn.touching = true;
+      scrollColumn.translate = getTranslateY(scrollColumn.scrollEl);
+      startTouch(event);
+    }
+    function handleTouchmove(event, scrollColumn) {
+      if (!scrollColumn.touching) {
+        return;
+      }
+      moveTouch(event);
+      scrollColumn.scrolling = false;
+      scrollColumn.duration = 0;
+      scrollColumn.prevY = prevY.value;
+      scrollColumn.translate += moveY.value;
+      clampTranslate(scrollColumn);
+      const now = performance.now();
+      if (now - scrollColumn.momentumTime > MOMENTUM_RECORD_TIME) {
+        scrollColumn.momentumTime = now;
+        scrollColumn.momentumPrevY = scrollColumn.translate;
+      }
+    }
+    function handleTouchend(scrollColumn) {
+      endTouch();
+      scrollColumn.touching = false;
+      scrollColumn.prevY = 0;
+      const distance = scrollColumn.translate - scrollColumn.momentumPrevY;
+      const duration = performance.now() - scrollColumn.momentumTime;
+      const shouldMomentum = Math.abs(distance) >= MOMENTUM_ALLOW_DISTANCE && duration <= MOMENTUM_RECORD_TIME;
+      const oldTranslate = scrollColumn.translate;
+      if (shouldMomentum) {
+        momentum(scrollColumn, distance, duration);
+      }
+      scrollColumn.index = getTargetIndex(scrollColumn, scrollColumn.translate);
+      scrollTo(scrollColumn, shouldMomentum ? MOMENTUM_TRANSITION_DURATION : TRANSITION_DURATION);
+      scrollColumn.scrolling = scrollColumn.translate !== oldTranslate;
+      if (!scrollColumn.scrolling) {
+        change(scrollColumn);
+      }
+    }
+    function handleTransitionend(scrollColumn) {
+      scrollColumn.scrolling = false;
+      change(scrollColumn);
+    }
+    function isSamePicked() {
+      const { indexes } = getPicked();
+      return indexes.every((index, idx) => index === prevIndexes[idx]);
+    }
+    function change(scrollColumn) {
+      const { cascade, onChange } = props2;
+      if (isSamePicked()) {
+        return;
+      }
+      if (cascade) {
+        rebuildChildren(scrollColumn);
+      }
+      const hasScrolling = scrollColumns.value.some((scrollColumn2) => scrollColumn2.scrolling);
+      const hasTouching = scrollColumns.value.some((scrollColumn2) => scrollColumn2.touching);
+      if (hasScrolling || hasTouching) {
+        return;
+      }
+      const { values, indexes, options } = getPicked();
+      setPrevIndexes(indexes);
+      call(onChange, values, indexes, options);
+      modelValue.value = values;
+    }
+    function stopScroll() {
+      if (props2.cascade) {
+        const currentScrollColumn = scrollColumns.value.find((scrollColumn) => scrollColumn.scrolling);
+        if (currentScrollColumn) {
+          currentScrollColumn.index = getTargetIndex(currentScrollColumn, getTranslateY(currentScrollColumn.scrollEl));
+          currentScrollColumn.scrolling = false;
+          scrollTo(currentScrollColumn);
+          rebuildChildren(currentScrollColumn);
+        }
+      } else {
+        scrollColumns.value.forEach((scrollColumn) => {
+          scrollColumn.index = getTargetIndex(scrollColumn, getTranslateY(scrollColumn.scrollEl));
+          scrollTo(scrollColumn);
+        });
+      }
+    }
+    function confirm() {
+      stopScroll();
+      const { values, indexes, options } = getPicked();
+      setPrevIndexes(indexes);
+      call(props2.onConfirm, values, indexes, options);
+    }
+    function cancel() {
+      stopScroll();
+      const { values, indexes, options } = getPicked();
+      setPrevIndexes(indexes);
+      call(props2.onCancel, values, indexes, options);
+    }
+    return {
+      pack,
+      optionHeight,
+      optionCount,
+      scrollColumns,
+      columnHeight,
+      center,
+      Transition,
+      n,
+      classes,
+      setScrollEl,
+      getOptionKey,
+      getValue,
+      handlePopupUpdateShow,
+      handleTouchstart,
+      handleTouchmove,
+      handleTouchend,
+      handleTransitionend,
+      confirm,
+      cancel,
+      handleClick
+    };
+  }
+});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

package/es/picker/index.mjs

@@ -0,0 +1,84 @@
+import VarPicker from "./Picker.mjs";
+import { nextTick, reactive } from "vue";
+import { isArray, call } from "@varlet/shared";
+import { mountInstance, withInstall, withPropsDefaultsSetter } from "../utils/components.mjs";
+import { props as pickerProps } from "./props.mjs";
+let singletonOptions;
+function Picker(options) {
+  return new Promise((resolve) => {
+    Picker.close();
+    const pickerOptions = isArray(options) ? { columns: options } : options;
+    const reactivePickerOptions = reactive(pickerOptions);
+    reactivePickerOptions.dynamic = true;
+    reactivePickerOptions.teleport = "body";
+    singletonOptions = reactivePickerOptions;
+    function resetSingletonOptions() {
+      singletonOptions === reactivePickerOptions && (singletonOptions = null);
+    }
+    const { unmountInstance } = mountInstance(VarPicker, reactivePickerOptions, {
+      onConfirm: (values, indexes, options2) => {
+        call(reactivePickerOptions.onConfirm, values, indexes, options2);
+        resolve({
+          state: "confirm",
+          values,
+          indexes,
+          options: options2
+        });
+        reactivePickerOptions.show = false;
+        resetSingletonOptions();
+      },
+      onCancel: (values, indexes, options2) => {
+        call(reactivePickerOptions.onCancel, values, indexes, options2);
+        resolve({
+          state: "cancel",
+          values,
+          indexes,
+          options: options2
+        });
+        reactivePickerOptions.show = false;
+        resetSingletonOptions();
+      },
+      onClose: () => {
+        call(reactivePickerOptions.onClose);
+        resolve({
+          state: "close"
+        });
+        resetSingletonOptions();
+      },
+      onClosed: () => {
+        call(reactivePickerOptions.onClosed);
+        unmountInstance();
+        resetSingletonOptions();
+      },
+      onRouteChange: () => {
+        unmountInstance();
+        resetSingletonOptions();
+      },
+      "onUpdate:show": (value) => {
+        reactivePickerOptions.show = value;
+      }
+    });
+    reactivePickerOptions.show = true;
+  });
+}
+Picker.close = function() {
+  if (singletonOptions == null) {
+    return;
+  }
+  const prevSingletonOptions = singletonOptions;
+  singletonOptions = null;
+  nextTick().then(() => {
+    prevSingletonOptions.show = false;
+  });
+};
+Picker.Component = VarPicker;
+withInstall(VarPicker);
+withInstall(VarPicker, Picker);
+withPropsDefaultsSetter(Picker, pickerProps);
+const _PickerComponent = VarPicker;
+var stdin_default = Picker;
+export {
+  _PickerComponent,
+  stdin_default as default,
+  pickerProps
+};

package/es/picker/picker.css

@@ -0,0 +1 @@
+:root { --picker-background: #fff; --picker-toolbar-height: 44px; --picker-confirm-button-text-color: var(--color-primary); --picker-cancel-button-text-color: #888; --picker-picked-border: 1px solid rgba(0, 0, 0, 0.12); --picker-title-font-size: var(--font-size-lg); --picker-title-text-color: #555; --picker-option-font-size: var(--font-size-lg); --picker-option-text-color: #555; --picker-toolbar-padding: 0 4px; --picker-mask-background-image: linear-gradient(180deg, hsla(0, 0%, 100%, 0.9), hsla(0, 0%, 100%, 0.4)), linear-gradient(0deg, hsla(0, 0%, 100%, 0.9), hsla(0, 0%, 100%, 0.4));}.var-picker { width: 100%; background: var(--picker-background); user-select: none; transition: 0.25s background-color;}.var-picker__popup[var-picker-cover] { width: 100%;}.var-picker__columns { position: relative; display: flex; width: 100%; cursor: grab;}.var-picker__column { flex: 1; overflow: hidden;}.var-picker__option { display: flex; justify-content: center; align-items: center; width: 100%; padding: 0 4px;}.var-picker__text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--picker-option-text-color); font-size: var(--picker-option-font-size);}.var-picker__scroller { width: 100%; transition-timing-function: cubic-bezier(0.23, 1, 0.68, 1);}.var-picker__picked { position: absolute; z-index: 2; pointer-events: none; width: 100%; left: 0; border-top: var(--picker-picked-border); border-bottom: var(--picker-picked-border); transition: 0.25s border;}.var-picker__mask { position: absolute; pointer-events: none; top: 0; left: 0; width: 100%; height: 100%; background-image: var(--picker-mask-background-image); background-repeat: no-repeat; background-position: top, bottom;}.var-picker__toolbar { display: flex; justify-content: space-between; align-items: center; width: 100%; height: var(--picker-toolbar-height); padding: var(--picker-toolbar-padding);}.var-picker__confirm-button[var-picker-cover] { color: var(--picker-confirm-button-text-color);}.var-picker__cancel-button[var-picker-cover] { color: var(--picker-cancel-button-text-color);}.var-picker__title { color: var(--picker-title-text-color); font-size: var(--picker-title-font-size);}

package/es/picker/props.mjs

@@ -0,0 +1,79 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+import { defineListenerProp, pickProps } from "../utils/components.mjs";
+import { popupProps } from "../popup/index.mjs";
+const props = __spreadValues({
+  modelValue: {
+    type: Array,
+    default: () => []
+  },
+  columns: {
+    type: Array,
+    default: () => []
+  },
+  title: String,
+  textKey: {
+    type: String,
+    default: "text"
+  },
+  valueKey: {
+    type: String,
+    default: "value"
+  },
+  childrenKey: {
+    type: String,
+    default: "children"
+  },
+  toolbar: {
+    type: Boolean,
+    default: true
+  },
+  cascade: Boolean,
+  optionHeight: {
+    type: [Number, String],
+    default: 44
+  },
+  optionCount: {
+    type: [Number, String],
+    default: 6
+  },
+  confirmButtonText: String,
+  cancelButtonText: String,
+  confirmButtonTextColor: String,
+  cancelButtonTextColor: String,
+  // dynamic internal
+  dynamic: Boolean,
+  onChange: defineListenerProp(),
+  onConfirm: defineListenerProp(),
+  onCancel: defineListenerProp(),
+  "onUpdate:modelValue": defineListenerProp()
+}, pickProps(popupProps, [
+  "show",
+  "onUpdate:show",
+  "closeOnClickOverlay",
+  "teleport",
+  "safeArea",
+  "onOpen",
+  "onClose",
+  "onOpened",
+  "onClosed",
+  "onClickOverlay",
+  "onRouteChange"
+]));
+export {
+  props
+};

package/es/picker/style/index.mjs

@@ -0,0 +1,5 @@
+import '../../styles/common.css'
+import '../../button/button.css'
+import '../../popup/popup.css'
+import '../picker.css'
+import '../PickerSfc.css'