@varlet/ui 3.5.1 → 3.5.3

package/es/action-sheet/ActionItem.mjs

@@ -0,0 +1,79 @@
+import Ripple from "../ripple/index.mjs";
+import VarIcon from "../icon/index.mjs";
+import VarHoverOverlay, { useHoverOverlay } from "../hover-overlay/index.mjs";
+import Hover from "../hover/index.mjs";
+import { defineComponent } from "vue";
+import { createNamespace } from "../utils/components.mjs";
+const { name, n, classes } = createNamespace("action-sheet");
+import { resolveComponent as _resolveComponent, normalizeClass as _normalizeClass, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, createVNode as _createVNode, normalizeStyle as _normalizeStyle, resolveDirective as _resolveDirective, createElementBlock as _createElementBlock, withDirectives as _withDirectives } from "vue";
+function __render__(_ctx, _cache) {
+  const _component_var_icon = _resolveComponent("var-icon");
+  const _component_var_hover_overlay = _resolveComponent("var-hover-overlay");
+  const _directive_ripple = _resolveDirective("ripple");
+  const _directive_hover = _resolveDirective("hover");
+  return _withDirectives((_openBlock(), _createElementBlock(
+    "div",
+    {
+      class: _normalizeClass(_ctx.classes(_ctx.n("action-item"), _ctx.className, [_ctx.disabled, _ctx.n("--disabled")])),
+      style: _normalizeStyle({ color: _ctx.color })
+    },
+    [
+      _ctx.icon ? (_openBlock(), _createBlock(_component_var_icon, {
+        key: 0,
+        "var-action-sheet-cover": "",
+        class: _normalizeClass(_ctx.n("action-icon")),
+        namespace: _ctx.namespace,
+        name: _ctx.icon,
+        size: _ctx.iconSize
+      }, null, 8, ["class", "namespace", "name", "size"])) : _createCommentVNode("v-if", true),
+      _createElementVNode(
+        "div",
+        {
+          class: _normalizeClass(_ctx.n("action-name"))
+        },
+        _toDisplayString(_ctx.name),
+        3
+        /* TEXT, CLASS */
+      ),
+      _createVNode(_component_var_hover_overlay, {
+        hovering: _ctx.disabled ? false : _ctx.hovering
+      }, null, 8, ["hovering"])
+    ],
+    6
+    /* CLASS, STYLE */
+  )), [
+    [_directive_ripple, { disabled: _ctx.disabled }],
+    [_directive_hover, _ctx.handleHovering, "desktop"]
+  ]);
+}
+const __sfc__ = defineComponent({
+  name,
+  components: {
+    VarHoverOverlay,
+    VarIcon
+  },
+  directives: { Ripple, Hover },
+  props: {
+    name: String,
+    className: String,
+    disabled: Boolean,
+    color: String,
+    namespace: String,
+    iconSize: [String, Number],
+    icon: String
+  },
+  setup() {
+    const { hovering, handleHovering } = useHoverOverlay();
+    return {
+      hovering,
+      n,
+      classes,
+      handleHovering
+    };
+  }
+});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

package/es/action-sheet/ActionSheet.mjs

@@ -0,0 +1,122 @@
+import Ripple from "../ripple/index.mjs";
+import VarPopup from "../popup/index.mjs";
+import VarActionItem from "./ActionItem.mjs";
+import { defineComponent } from "vue";
+import { props } from "./props.mjs";
+import { t } from "../locale/index.mjs";
+import { createNamespace } from "../utils/components.mjs";
+import { call } from "@varlet/shared";
+import { useVModel } from "@varlet/use";
+import { injectLocaleProvider } from "../locale-provider/provide.mjs";
+const { name, n, classes } = createNamespace("action-sheet");
+import { renderSlot as _renderSlot, toDisplayString as _toDisplayString, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, resolveComponent as _resolveComponent, createBlock as _createBlock, mergeProps as _mergeProps, withCtx as _withCtx } from "vue";
+function __render__(_ctx, _cache) {
+  const _component_var_action_item = _resolveComponent("var-action-item");
+  const _component_var_popup = _resolveComponent("var-popup");
+  return _openBlock(), _createBlock(_component_var_popup, {
+    position: "bottom",
+    class: _normalizeClass(_ctx.n("popup-radius")),
+    overlay: _ctx.overlay,
+    "overlay-class": _ctx.overlayClass,
+    "overlay-style": _ctx.overlayStyle,
+    "lock-scroll": _ctx.lockScroll,
+    "close-on-click-overlay": _ctx.closeOnClickOverlay,
+    "close-on-key-escape": _ctx.closeOnKeyEscape,
+    teleport: _ctx.teleport,
+    "safe-area": _ctx.safeArea,
+    show: _ctx.show,
+    "onUpdate:show": _cache[0] || (_cache[0] = ($event) => _ctx.show = $event),
+    onOpen: _ctx.onOpen,
+    onClose: _ctx.onClose,
+    onClosed: _ctx.onClosed,
+    onOpened: _ctx.onOpened,
+    onRouteChange: _ctx.onRouteChange,
+    onKeyEscape: _ctx.onKeyEscape
+  }, {
+    default: _withCtx(() => [
+      _createElementVNode(
+        "div",
+        _mergeProps({
+          class: _ctx.classes(_ctx.n(), _ctx.n("$--box"))
+        }, _ctx.$attrs),
+        [
+          _renderSlot(_ctx.$slots, "title", {}, () => {
+            var _a;
+            return [
+              _createElementVNode(
+                "div",
+                {
+                  class: _normalizeClass(_ctx.n("title"))
+                },
+                _toDisplayString((_a = _ctx.title) != null ? _a : (_ctx.pt ? _ctx.pt : _ctx.t)("actionSheetTitle")),
+                3
+                /* TEXT, CLASS */
+              )
+            ];
+          }),
+          _renderSlot(_ctx.$slots, "actions", {}, () => [
+            (_openBlock(true), _createElementBlock(
+              _Fragment,
+              null,
+              _renderList(_ctx.actions, (action) => {
+                return _openBlock(), _createBlock(_component_var_action_item, {
+                  key: action.name,
+                  name: action.name,
+                  namespace: action.namespace,
+                  icon: action.icon,
+                  "icon-size": action.iconSize,
+                  "class-name": action.className,
+                  color: action.color,
+                  onClick: ($event) => _ctx.handleSelect(action)
+                }, null, 8, ["name", "namespace", "icon", "icon-size", "class-name", "color", "onClick"]);
+              }),
+              128
+              /* KEYED_FRAGMENT */
+            ))
+          ])
+        ],
+        16
+        /* FULL_PROPS */
+      )
+    ]),
+    _: 3
+    /* FORWARDED */
+  }, 8, ["class", "overlay", "overlay-class", "overlay-style", "lock-scroll", "close-on-click-overlay", "close-on-key-escape", "teleport", "safe-area", "show", "onOpen", "onClose", "onClosed", "onOpened", "onRouteChange", "onKeyEscape"]);
+}
+const __sfc__ = defineComponent({
+  name,
+  directives: { Ripple },
+  components: {
+    VarPopup,
+    VarActionItem
+  },
+  inheritAttrs: false,
+  props,
+  setup(props2) {
+    const show = useVModel(props2, "show");
+    const { t: pt } = injectLocaleProvider();
+    function handleSelect(action) {
+      if (action.disabled) {
+        return;
+      }
+      const { closeOnClickAction, onSelect } = props2;
+      call(onSelect, action);
+      if (closeOnClickAction) {
+        show.value = false;
+      }
+    }
+    return {
+      show,
+      pt,
+      t,
+      n,
+      classes,
+      handleSelect
+    };
+  }
+});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

package/es/action-sheet/actionSheet.css

@@ -0,0 +1 @@
+:root { --action-sheet-border-radius: 2px; --action-sheet-border-top: none; --action-sheet-title-color: #888; --action-sheet-title-padding: 10px 16px; --action-sheet-title-font-size: 14px; --action-sheet-action-item-height: 48px; --action-sheet-action-item-padding: 0 18px; --action-sheet-action-item-color: #333; --action-sheet-action-item-disabled-color: var(--color-text-disabled); --action-sheet-icon-margin: 0 20px 0 0; --action-sheet-icon-size: 24px; --action-sheet-background: #fff;}.var-action-sheet { padding: 10px 0; background: var(--action-sheet-background); transition: background-color 0.25s;}.var-action-sheet__popup-radius { border-radius: var(--action-sheet-border-radius); border-top: var(--action-sheet-border-top);}.var-action-sheet__title { padding: var(--action-sheet-title-padding); color: var(--action-sheet-title-color); font-size: var(--action-sheet-title-font-size);}.var-action-sheet__action-item { display: flex; align-items: center; height: var(--action-sheet-action-item-height); padding: var(--action-sheet-action-item-padding); color: var(--action-sheet-action-item-color); cursor: pointer; position: relative;}.var-action-sheet__action-name { overflow: auto; max-height: var(--action-sheet-action-item-height);}.var-action-sheet__action-icon[var-action-sheet-cover] { margin: var(--action-sheet-icon-margin); width: var(--action-sheet-icon-size); height: var(--action-sheet-icon-size); font-size: var(--action-sheet-icon-size);}.var-action-sheet--disabled { color: var(--action-sheet-action-item-disabled-color) !important; cursor: not-allowed;}

package/es/action-sheet/index.mjs

@@ -0,0 +1,86 @@
+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 VarActionSheet from "./ActionSheet.mjs";
+import { nextTick, reactive } from "vue";
+import { inBrowser, call } from "@varlet/shared";
+import { mountInstance, withInstall, withPropsDefaultsSetter } from "../utils/components.mjs";
+import { props as actionSheetProps } from "./props.mjs";
+let singletonOptions;
+let defaultOptions = {};
+function normalizeOptions(options = {}) {
+  return __spreadValues(__spreadValues({}, defaultOptions), options);
+}
+function ActionSheet(options) {
+  if (!inBrowser()) {
+    return Promise.resolve();
+  }
+  return new Promise((resolve) => {
+    ActionSheet.close();
+    const reactiveActionSheetOptions = reactive(normalizeOptions(options));
+    reactiveActionSheetOptions.teleport = "body";
+    singletonOptions = reactiveActionSheetOptions;
+    const { unmountInstance } = mountInstance(VarActionSheet, reactiveActionSheetOptions, {
+      onSelect: (action) => {
+        call(reactiveActionSheetOptions.onSelect, action);
+        resolve(action);
+      },
+      onClose: () => {
+        call(reactiveActionSheetOptions.onClose);
+        resolve("close");
+      },
+      onClosed: () => {
+        call(reactiveActionSheetOptions.onClosed);
+        unmountInstance();
+        singletonOptions === reactiveActionSheetOptions && (singletonOptions = null);
+      },
+      onRouteChange: () => {
+        unmountInstance();
+        singletonOptions === reactiveActionSheetOptions && (singletonOptions = null);
+      },
+      "onUpdate:show": (value) => {
+        reactiveActionSheetOptions.show = value;
+      }
+    });
+    reactiveActionSheetOptions.show = true;
+  });
+}
+ActionSheet.setDefaultOptions = function(options) {
+  defaultOptions = options;
+};
+ActionSheet.resetDefaultOptions = function() {
+  defaultOptions = {};
+};
+ActionSheet.close = function() {
+  if (singletonOptions != null) {
+    const prevSingletonOptions = singletonOptions;
+    singletonOptions = null;
+    nextTick().then(() => {
+      prevSingletonOptions.show = false;
+    });
+  }
+};
+ActionSheet.Component = VarActionSheet;
+withInstall(VarActionSheet);
+withInstall(VarActionSheet, ActionSheet);
+withPropsDefaultsSetter(ActionSheet, actionSheetProps);
+const _ActionSheetComponent = VarActionSheet;
+var stdin_default = ActionSheet;
+export {
+  _ActionSheetComponent,
+  actionSheetProps,
+  stdin_default as default
+};

package/es/action-sheet/props.mjs

@@ -0,0 +1,52 @@
+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({
+  show: Boolean,
+  title: String,
+  actions: {
+    type: Array,
+    default: () => []
+  },
+  closeOnClickAction: {
+    type: Boolean,
+    default: true
+  },
+  onSelect: defineListenerProp(),
+  "onUpdate:show": defineListenerProp()
+}, pickProps(popupProps, [
+  "overlay",
+  "overlayClass",
+  "overlayStyle",
+  "lockScroll",
+  "closeOnClickOverlay",
+  "closeOnKeyEscape",
+  "safeArea",
+  "teleport",
+  "onOpen",
+  "onClose",
+  "onOpened",
+  "onClosed",
+  "onClickOverlay",
+  // internal for function call closes the dialog
+  "onRouteChange",
+  "onKeyEscape"
+]));
+export {
+  props
+};

package/es/action-sheet/style/index.mjs

@@ -0,0 +1,7 @@
+import '../../styles/common.css'
+import '../../icon/icon.css'
+import '../../ripple/ripple.css'
+import '../../popup/popup.css'
+import '../actionSheet.css'
+import '../ActionItemSfc.css'
+import '../ActionSheetSfc.css'

package/es/app-bar/AppBar.mjs

@@ -0,0 +1,197 @@
+import { defineComponent, ref, onUpdated, computed } from "vue";
+import { props } from "./props.mjs";
+import { createNamespace, formatElevation } from "../utils/components.mjs";
+import { onSmartMounted, onWindowResize } from "@varlet/use";
+import { getRect } from "@varlet/shared";
+import { toSizeUnit } from "../utils/elements.mjs";
+const { name, n, classes } = createNamespace("app-bar");
+import { renderSlot as _renderSlot, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, createElementVNode as _createElementVNode, mergeProps as _mergeProps, Fragment as _Fragment } from "vue";
+function __render__(_ctx, _cache) {
+  return _openBlock(), _createElementBlock(
+    _Fragment,
+    null,
+    [
+      _createElementVNode(
+        "div",
+        _mergeProps({
+          class: _ctx.classes(
+            _ctx.n(),
+            _ctx.n("$--box"),
+            [_ctx.safeAreaTop, _ctx.n("--safe-area-top")],
+            [_ctx.round, _ctx.n("--round")],
+            [_ctx.fixed, _ctx.n("--fixed")],
+            [_ctx.border, _ctx.n("--border")],
+            _ctx.formatElevation(_ctx.elevation, 3)
+          ),
+          ref: "appBar",
+          style: _ctx.rootStyles
+        }, _ctx.$attrs),
+        [
+          _createElementVNode(
+            "div",
+            {
+              class: _normalizeClass(_ctx.n("toolbar"))
+            },
+            [
+              _createElementVNode(
+                "div",
+                {
+                  class: _normalizeClass(_ctx.n("left"))
+                },
+                [
+                  _renderSlot(_ctx.$slots, "left"),
+                  _ctx.titlePosition === "left" ? (_openBlock(), _createElementBlock(
+                    "div",
+                    {
+                      key: 0,
+                      class: _normalizeClass(_ctx.n("title")),
+                      style: _normalizeStyle({ paddingLeft: _ctx.paddingLeft })
+                    },
+                    [
+                      _renderSlot(_ctx.$slots, "default", {}, () => [
+                        _createTextVNode(
+                          _toDisplayString(_ctx.title),
+                          1
+                          /* TEXT */
+                        )
+                      ])
+                    ],
+                    6
+                    /* CLASS, STYLE */
+                  )) : _createCommentVNode("v-if", true)
+                ],
+                2
+                /* CLASS */
+              ),
+              _ctx.titlePosition === "center" ? (_openBlock(), _createElementBlock(
+                "div",
+                {
+                  key: 0,
+                  class: _normalizeClass(_ctx.n("title"))
+                },
+                [
+                  _renderSlot(_ctx.$slots, "default", {}, () => [
+                    _createTextVNode(
+                      _toDisplayString(_ctx.title),
+                      1
+                      /* TEXT */
+                    )
+                  ])
+                ],
+                2
+                /* CLASS */
+              )) : _createCommentVNode("v-if", true),
+              _createElementVNode(
+                "div",
+                {
+                  class: _normalizeClass(_ctx.n("right"))
+                },
+                [
+                  _ctx.titlePosition === "right" ? (_openBlock(), _createElementBlock(
+                    "div",
+                    {
+                      key: 0,
+                      class: _normalizeClass(_ctx.n("title")),
+                      style: _normalizeStyle({ paddingRight: _ctx.paddingRight })
+                    },
+                    [
+                      _renderSlot(_ctx.$slots, "default", {}, () => [
+                        _createTextVNode(
+                          _toDisplayString(_ctx.title),
+                          1
+                          /* TEXT */
+                        )
+                      ])
+                    ],
+                    6
+                    /* CLASS, STYLE */
+                  )) : _createCommentVNode("v-if", true),
+                  _renderSlot(_ctx.$slots, "right")
+                ],
+                2
+                /* CLASS */
+              )
+            ],
+            2
+            /* CLASS */
+          ),
+          _renderSlot(_ctx.$slots, "content")
+        ],
+        16
+        /* FULL_PROPS */
+      ),
+      _ctx.fixed && _ctx.placeholder ? (_openBlock(), _createElementBlock(
+        "div",
+        {
+          key: 0,
+          class: _normalizeClass(_ctx.n("placeholder")),
+          style: _normalizeStyle({ height: _ctx.placeholderHeight })
+        },
+        null,
+        6
+        /* CLASS, STYLE */
+      )) : _createCommentVNode("v-if", true)
+    ],
+    64
+    /* STABLE_FRAGMENT */
+  );
+}
+const __sfc__ = defineComponent({
+  name,
+  props,
+  setup(props2, { slots }) {
+    const appBar = ref(null);
+    const paddingLeft = ref();
+    const paddingRight = ref();
+    const placeholderHeight = ref();
+    const rootStyles = computed(() => {
+      const { image, color, textColor, imageLinearGradient, zIndex } = props2;
+      if (image != null) {
+        const gradient = imageLinearGradient ? `linear-gradient(${imageLinearGradient}), ` : "";
+        return {
+          "background-image": `${gradient}url(${image})`,
+          "background-position": "center center",
+          "background-size": "cover",
+          "z-index": zIndex
+        };
+      }
+      return {
+        background: color,
+        color: textColor,
+        "z-index": zIndex
+      };
+    });
+    onWindowResize(resizePlaceholder);
+    onSmartMounted(() => {
+      computePadding();
+      resizePlaceholder();
+    });
+    onUpdated(computePadding);
+    function computePadding() {
+      paddingLeft.value = slots.left ? 0 : void 0;
+      paddingRight.value = slots.right ? 0 : void 0;
+    }
+    function resizePlaceholder() {
+      if (!props2.fixed || !props2.placeholder) {
+        return;
+      }
+      const { height } = getRect(appBar.value);
+      placeholderHeight.value = toSizeUnit(height);
+    }
+    return {
+      rootStyles,
+      paddingLeft,
+      paddingRight,
+      n,
+      classes,
+      formatElevation,
+      appBar,
+      placeholderHeight
+    };
+  }
+});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

package/es/app-bar/appBar.css

@@ -0,0 +1 @@
+:root { --app-bar-color: var(--color-primary); --app-bar-title-padding: 0 12px; --app-bar-title-font-size: var(--font-size-lg); --app-bar-text-color: #fff; --app-bar-height: 54px; --app-bar-left-gap: 6px; --app-bar-right-gap: 6px; --app-bar-border-radius: 4px; --app-bar-font-size: var(--font-size-lg); --app-bar-border-bottom: thin solid var(--color-outline);}.var-app-bar { position: relative; width: 100%; font-size: var(--app-bar-font-size); background: var(--app-bar-color); color: var(--app-bar-text-color); transition: background-color 0.25s;}.var-app-bar__toolbar { position: relative; display: flex; justify-content: center; align-items: center; height: var(--app-bar-height);}.var-app-bar__title { font-size: var(--app-bar-title-font-size); flex: 1; height: 100%; display: flex; align-items: center; justify-content: center; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding: var(--app-bar-title-padding);}.var-app-bar__left,.var-app-bar__right { display: flex; align-items: center; height: 100%;}.var-app-bar__left { position: absolute; top: 0; left: var(--app-bar-left-gap);}.var-app-bar__right { position: absolute; top: 0; right: var(--app-bar-right-gap);}.var-app-bar--round { border-radius: var(--app-bar-border-radius);}.var-app-bar--safe-area-top { padding-top: constant(safe-area-inset-top); padding-top: env(safe-area-inset-top); box-sizing: content-box !important;}.var-app-bar--fixed { position: fixed; top: 0; left: 0;}.var-app-bar--border { border-bottom: var(--app-bar-border-bottom);}

package/es/app-bar/index.mjs

@@ -0,0 +1,12 @@
+import AppBar from "./AppBar.mjs";
+import { withInstall, withPropsDefaultsSetter } from "../utils/components.mjs";
+import { props as appBarProps } from "./props.mjs";
+withInstall(AppBar);
+withPropsDefaultsSetter(AppBar, appBarProps);
+const _AppBarComponent = AppBar;
+var stdin_default = AppBar;
+export {
+  _AppBarComponent,
+  appBarProps,
+  stdin_default as default
+};

package/es/app-bar/props.mjs

@@ -0,0 +1,27 @@
+const props = {
+  color: String,
+  textColor: String,
+  title: String,
+  titlePosition: {
+    type: String,
+    default: "left"
+  },
+  elevation: {
+    type: [Boolean, String, Number],
+    default: true
+  },
+  round: Boolean,
+  image: String,
+  imageLinearGradient: String,
+  safeAreaTop: Boolean,
+  border: Boolean,
+  zIndex: {
+    type: [Number, String],
+    default: 1
+  },
+  fixed: Boolean,
+  placeholder: Boolean
+};
+export {
+  props
+};

package/es/app-bar/style/index.mjs

@@ -0,0 +1,4 @@
+import '../../styles/common.css'
+import '../../styles/elevation.css'
+import '../appBar.css'
+import '../AppBarSfc.css'