@varlet/ui 2.18.0-alpha.1697511280107 → 2.18.0-alpha.1697555377370

package/es/floating-panel/FloatingPanel.mjs

@@ -0,0 +1,179 @@
+import { defineComponent, ref, computed, watch } from "vue";
+import { props } from "./props.mjs";
+import { useLock } from "../context/lock.mjs";
+import { call, createNamespace, useVModel, formatElevation, useTeleport } from "../utils/components.mjs";
+import { toSizeUnit } from "../utils/elements.mjs";
+import { useTouch, useWindowSize } from "@varlet/use";
+import { toNumber, isEmpty, preventDefault } from "@varlet/shared";
+const { name, n, classes } = createNamespace("floating-panel");
+const DEFAULT_START_ANCHOR = 100;
+const OVERFLOW_REDUCE_RATIO = 0.2;
+import { normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, renderSlot as _renderSlot, normalizeStyle as _normalizeStyle, Teleport as _Teleport, openBlock as _openBlock, createBlock as _createBlock } from "vue";
+function __render__(_ctx, _cache) {
+  return _openBlock(), _createBlock(_Teleport, {
+    to: _ctx.teleport === false ? void 0 : _ctx.teleport,
+    disabled: _ctx.teleportDisabled || _ctx.teleport === false
+  }, [
+    _createElementVNode(
+      "div",
+      {
+        class: _normalizeClass(_ctx.classes(_ctx.n(), [_ctx.safeArea, _ctx.n("--safe-area")], _ctx.formatElevation(_ctx.elevation, 2))),
+        style: _normalizeStyle({
+          height: `${_ctx.toSizeUnit(_ctx.maxAnchor)}`,
+          transform: `translateY(calc(100% - ${_ctx.toSizeUnit(_ctx.visibleHeight)}))`,
+          transition: _ctx.touching ? "none" : `transform ${_ctx.toNumber(_ctx.duration)}ms var(--floating-panel-transition-timing-function)`
+        }),
+        onTouchstart: _cache[0] || (_cache[0] = (...args) => _ctx.handleTouchstart && _ctx.handleTouchstart(...args)),
+        onTouchmove: _cache[1] || (_cache[1] = (...args) => _ctx.handleTouchmove && _ctx.handleTouchmove(...args)),
+        onTouchend: _cache[2] || (_cache[2] = (...args) => _ctx.handleTouchend && _ctx.handleTouchend(...args)),
+        onTouchcancel: _cache[3] || (_cache[3] = (...args) => _ctx.handleTouchend && _ctx.handleTouchend(...args))
+      },
+      [
+        _createElementVNode(
+          "div",
+          {
+            class: _normalizeClass(_ctx.n("header"))
+          },
+          [
+            _createElementVNode(
+              "div",
+              {
+                class: _normalizeClass(_ctx.n("header-toolbar"))
+              },
+              null,
+              2
+              /* CLASS */
+            )
+          ],
+          2
+          /* CLASS */
+        ),
+        _createElementVNode(
+          "div",
+          {
+            class: _normalizeClass(_ctx.n("content")),
+            ref: "contentRef"
+          },
+          [
+            _renderSlot(_ctx.$slots, "default")
+          ],
+          2
+          /* CLASS */
+        )
+      ],
+      38
+      /* CLASS, STYLE, HYDRATE_EVENTS */
+    )
+  ], 8, ["to", "disabled"]);
+}
+const __sfc__ = defineComponent({
+  name,
+  props,
+  setup(props2) {
+    const visibleHeight = ref(0);
+    const contentRef = ref(null);
+    const { height: windowHeight } = useWindowSize();
+    const defaultEndAnchor = computed(() => windowHeight.value * 0.6);
+    const anchor = useVModel(props2, "anchor");
+    const anchors = computed(() => {
+      const defaultAnchors = [DEFAULT_START_ANCHOR, defaultEndAnchor.value];
+      const { anchors: anchors2 } = props2;
+      return isEmpty(anchors2) ? defaultAnchors : anchors2;
+    });
+    const minAnchor = computed(() => Math.min(...anchors.value));
+    const maxAnchor = computed(() => Math.max(...anchors.value));
+    const { disabled: teleportDisabled } = useTeleport();
+    const { deltaY, touching, startTouch, moveTouch, endTouch, isReachTop, isReachBottom } = useTouch();
+    let startVisibleHeight;
+    useLock(() => touching.value);
+    watch(() => anchor.value, matchAnchor, { immediate: true });
+    watch(
+      () => anchors.value,
+      () => {
+        matchAnchor(anchor.value);
+      },
+      { immediate: true }
+    );
+    function matchAnchor(anchor2) {
+      setVisibleHeight(anchor2 != null ? anchor2 : minAnchor.value);
+    }
+    function handleTouchstart(event) {
+      startTouch(event);
+      startVisibleHeight = visibleHeight.value;
+    }
+    function handleTouchmove(event) {
+      var _a;
+      moveTouch(event);
+      const target = event.target;
+      const eventFromContent = contentRef.value === target || ((_a = contentRef.value) == null ? void 0 : _a.contains(target));
+      if (eventFromContent && !props2.contentDraggable) {
+        if (isReachTop(contentRef.value) || isReachBottom(contentRef.value)) {
+          preventDefault(event);
+        }
+        return;
+      }
+      const targetVisibleHeight = startVisibleHeight - deltaY.value;
+      setVisibleHeight(clampVisibleHeight(targetVisibleHeight));
+      preventDefault(event);
+    }
+    function handleTouchend() {
+      endTouch();
+      const oldAnchor = anchor.value;
+      setVisibleHeight(visibleHeight.value);
+      anchor.value = visibleHeight.value;
+      if (anchor.value !== oldAnchor) {
+        call(props2.onAnchorChange, visibleHeight.value);
+      }
+    }
+    function setVisibleHeight(targetVisibleHeight) {
+      visibleHeight.value = touching.value ? targetVisibleHeight : findNearestAnchor(targetVisibleHeight);
+    }
+    function clampVisibleHeight(visibleHeight2) {
+      if (visibleHeight2 > maxAnchor.value) {
+        const overflowHeight = visibleHeight2 - maxAnchor.value;
+        return maxAnchor.value + overflowHeight * OVERFLOW_REDUCE_RATIO;
+      }
+      if (visibleHeight2 < minAnchor.value) {
+        const overflowHeight = minAnchor.value - visibleHeight2;
+        return minAnchor.value - overflowHeight * OVERFLOW_REDUCE_RATIO;
+      }
+      return visibleHeight2;
+    }
+    function findNearestAnchor(targetAnchor) {
+      if (anchors.value.includes(targetAnchor)) {
+        return targetAnchor;
+      }
+      let minDifference = Infinity;
+      let nearestAnchor = 0;
+      anchors.value.forEach((anchor2) => {
+        const difference = Math.abs(anchor2 - targetAnchor);
+        if (difference < minDifference) {
+          minDifference = difference;
+          nearestAnchor = anchor2;
+        }
+      });
+      return nearestAnchor;
+    }
+    return {
+      contentRef,
+      teleportDisabled,
+      touching,
+      minAnchor,
+      maxAnchor,
+      visibleHeight,
+      n,
+      classes,
+      toSizeUnit,
+      toNumber,
+      formatElevation,
+      handleTouchstart,
+      handleTouchmove,
+      handleTouchend
+    };
+  }
+});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

package/es/floating-panel/floatingPanel.css

@@ -0,0 +1 @@
+:root { --floating-panel-z-index: 999; --floating-panel-border-top: none; --floating-panel-border-radius: 0; --floating-panel-background: #fff; --floating-panel-header-height: 40px; --floating-panel-toolbar-width: 20px; --floating-panel-toolbar-height: 3px; --floating-panel-toolbar-border-radius: 10px; --floating-panel-toolbar-background: #ddd; --floating-panel-transition-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);}.var-floating-panel { position: fixed; left: 0; bottom: 0; width: 100%; display: flex; flex-direction: column; z-index: var(--floating-panel-z-index); border-top: var(--floating-panel-border-top); border-top-left-radius: var(--floating-panel-border-radius); border-top-right-radius: var(--floating-panel-border-radius); border-bottom-right-radius: 0; border-bottom-left-radius: 0; background-color: var(--floating-panel-background); will-change: transform; touch-action: none;}.var-floating-panel::after { content: ''; display: block; position: absolute; bottom: -100vh; height: 100vh; width: 100vw; background-color: inherit;}.var-floating-panel__header { height: var(--floating-panel-header-height); display: flex; justify-content: center; align-items: center; cursor: grab; user-select: none;}.var-floating-panel__header-toolbar { width: var(--floating-panel-toolbar-width); height: var(--floating-panel-toolbar-height); border-radius: var(--floating-panel-toolbar-border-radius); background: var(--floating-panel-toolbar-background);}.var-floating-panel__content { flex: 1; overflow-y: auto;}.var-floating-panel--safe-area { padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom);}

package/es/floating-panel/index.mjs

@@ -0,0 +1,9 @@
+import FloatingPanel from "./FloatingPanel.mjs";
+import { withInstall } from "../utils/components.mjs";
+withInstall(FloatingPanel);
+const _FloatingPanelComponent = FloatingPanel;
+var stdin_default = FloatingPanel;
+export {
+  _FloatingPanelComponent,
+  stdin_default as default
+};

package/es/floating-panel/props.mjs

@@ -0,0 +1,27 @@
+import { defineListenerProp } from "../utils/components.mjs";
+const props = {
+  anchor: Number,
+  anchors: Array,
+  contentDraggable: {
+    type: Boolean,
+    default: true
+  },
+  duration: {
+    type: [Number, String],
+    default: 300
+  },
+  elevation: {
+    type: [Boolean, Number, String],
+    default: true
+  },
+  teleport: {
+    type: [String, Object, Boolean],
+    default: "body"
+  },
+  safeArea: Boolean,
+  "onUpdate:anchor": defineListenerProp(),
+  onAnchorChange: defineListenerProp()
+};
+export {
+  props
+};

package/es/floating-panel/style/index.mjs

@@ -0,0 +1,4 @@
+import '../../styles/common.css'
+import '../../styles/elevation.css'
+import '../floatingPanel.css'
+import '../FloatingPanelSfc.css'

package/es/index.bundle.mjs

@@ -28,6 +28,7 @@ import Drag from './drag/index.mjs'
 import Ellipsis from './ellipsis/index.mjs'
 import Fab from './fab/index.mjs'
 import FieldDecorator from './field-decorator/index.mjs'
+import FloatingPanel from './floating-panel/index.mjs'
 import Form from './form/index.mjs'
 import FormDetails from './form-details/index.mjs'
 import Hover from './hover/index.mjs'
@@ -114,6 +115,7 @@ export * from './drag/index.mjs'
 export * from './ellipsis/index.mjs'
 export * from './fab/index.mjs'
 export * from './field-decorator/index.mjs'
+export * from './floating-panel/index.mjs'
 export * from './form/index.mjs'
 export * from './form-details/index.mjs'
 export * from './hover/index.mjs'
@@ -200,6 +202,7 @@ import './drag/style/index.mjs'
 import './ellipsis/style/index.mjs'
 import './fab/style/index.mjs'
 import './field-decorator/style/index.mjs'
+import './floating-panel/style/index.mjs'
 import './form/style/index.mjs'
 import './form-details/style/index.mjs'
 import './hover/style/index.mjs'
@@ -256,7 +259,7 @@ import './tooltip/style/index.mjs'
 import './uploader/style/index.mjs'
 import './watermark/style/index.mjs'
 
-const version = '2.18.0-alpha.1697511280107'
+const version = '2.18.0-alpha.1697555377370'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)
@@ -289,6 +292,7 @@ function install(app) {
   Ellipsis.install && app.use(Ellipsis)
   Fab.install && app.use(Fab)
   FieldDecorator.install && app.use(FieldDecorator)
+  FloatingPanel.install && app.use(FloatingPanel)
   Form.install && app.use(Form)
   FormDetails.install && app.use(FormDetails)
   Hover.install && app.use(Hover)
@@ -379,6 +383,7 @@ export {
   Ellipsis,
   Fab,
   FieldDecorator,
+  FloatingPanel,
   Form,
   FormDetails,
   Hover,
@@ -469,6 +474,7 @@ export default {
   Ellipsis,
   Fab,
   FieldDecorator,
+  FloatingPanel,
   Form,
   FormDetails,
   Hover,

package/es/index.mjs

@@ -28,6 +28,7 @@ import Drag from './drag/index.mjs'
 import Ellipsis from './ellipsis/index.mjs'
 import Fab from './fab/index.mjs'
 import FieldDecorator from './field-decorator/index.mjs'
+import FloatingPanel from './floating-panel/index.mjs'
 import Form from './form/index.mjs'
 import FormDetails from './form-details/index.mjs'
 import Hover from './hover/index.mjs'
@@ -114,6 +115,7 @@ export * from './drag/index.mjs'
 export * from './ellipsis/index.mjs'
 export * from './fab/index.mjs'
 export * from './field-decorator/index.mjs'
+export * from './floating-panel/index.mjs'
 export * from './form/index.mjs'
 export * from './form-details/index.mjs'
 export * from './hover/index.mjs'
@@ -170,7 +172,7 @@ export * from './tooltip/index.mjs'
 export * from './uploader/index.mjs'
 export * from './watermark/index.mjs'
 
-const version = '2.18.0-alpha.1697511280107'
+const version = '2.18.0-alpha.1697555377370'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)
@@ -203,6 +205,7 @@ function install(app) {
   Ellipsis.install && app.use(Ellipsis)
   Fab.install && app.use(Fab)
   FieldDecorator.install && app.use(FieldDecorator)
+  FloatingPanel.install && app.use(FloatingPanel)
   Form.install && app.use(Form)
   FormDetails.install && app.use(FormDetails)
   Hover.install && app.use(Hover)
@@ -293,6 +296,7 @@ export {
   Ellipsis,
   Fab,
   FieldDecorator,
+  FloatingPanel,
   Form,
   FormDetails,
   Hover,
@@ -383,6 +387,7 @@ export default {
   Ellipsis,
   Fab,
   FieldDecorator,
+  FloatingPanel,
   Form,
   FormDetails,
   Hover,

package/es/snackbar/style/index.mjs

@@ -1,8 +1,8 @@
 import '../../styles/common.css'
-import '../SnackbarSfc.css'
 import '../../styles/elevation.css'
 import '../../loading/loading.css'
 import '../../button/button.css'
 import '../../icon/icon.css'
 import '../snackbar.css'
 import '../coreSfc.css'
+import '../SnackbarSfc.css'