@varlet/ui 2.20.1 → 2.20.2

package/es/floating-panel/FloatingPanel.mjs

@@ -0,0 +1,184 @@
+import { defineComponent, ref, computed, watch } from "vue";
+import { props } from "./props.mjs";
+import { useLock } from "../context/lock.mjs";
+import { createNamespace, formatElevation, useTeleport } from "../utils/components.mjs";
+import { toSizeUnit } from "../utils/elements.mjs";
+import { useTouch, useWindowSize, useVModel } from "@varlet/use";
+import { toNumber, isEmpty, preventDefault, call } 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, 3))),
+        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), background-color 0.25s`
+        }),
+        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) {
+        return;
+      }
+      if (eventFromContent && props2.contentDraggable && visibleHeight.value >= maxAnchor.value && !isReachTop(contentRef.value)) {
+        if (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: 30px; --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: 100%; background-color: inherit; box-shadow: 0 -1px var(--floating-panel-background);}.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,11 @@
+import FloatingPanel from "./FloatingPanel.mjs";
+import { withInstall, withPropsDefaultsSetter } from "../utils/components.mjs";
+import { props as floatingPanelProps } from "./props.mjs";
+withInstall(FloatingPanel);
+withPropsDefaultsSetter(FloatingPanel, floatingPanelProps);
+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/form/Form.mjs

@@ -0,0 +1,116 @@
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+import { defineComponent, computed } from "vue";
+import { props } from "./props.mjs";
+import { useFormItems } from "./provide.mjs";
+import { createNamespace } from "../utils/components.mjs";
+import { find, preventDefault, call } from "@varlet/shared";
+import { getParentScroller, getTop, scrollTo, toPxNum } from "../utils/elements.mjs";
+import { linear } from "../utils/shared.mjs";
+const { name, n } = createNamespace("form");
+import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+function __render__(_ctx, _cache) {
+  return _openBlock(), _createElementBlock(
+    "form",
+    {
+      class: _normalizeClass(_ctx.n()),
+      onSubmit: _cache[0] || (_cache[0] = (...args) => _ctx.handleSubmit && _ctx.handleSubmit(...args)),
+      onReset: _cache[1] || (_cache[1] = (...args) => _ctx.handleReset && _ctx.handleReset(...args))
+    },
+    [
+      _renderSlot(_ctx.$slots, "default")
+    ],
+    34
+    /* CLASS, HYDRATE_EVENTS */
+  );
+}
+const __sfc__ = defineComponent({
+  name,
+  props,
+  setup(props2) {
+    const disabled = computed(() => props2.disabled);
+    const readonly = computed(() => props2.readonly);
+    const { formItems, bindFormItems } = useFormItems();
+    const formProvider = {
+      disabled,
+      readonly
+    };
+    bindFormItems(formProvider);
+    function scroll(formItemElement) {
+      setTimeout(() => {
+        const scroller = getParentScroller(formItemElement);
+        const scrollerTop = scroller === window ? 0 : getTop(scroller);
+        const top = getTop(formItemElement) - scrollerTop - toPxNum(props2.scrollToErrorOffsetY);
+        scrollTo(scroller, {
+          top,
+          animation: linear
+        });
+      }, 300);
+    }
+    function handleSubmit(event) {
+      return __async(this, null, function* () {
+        preventDefault(event);
+        const valid = yield validate();
+        call(props2.onSubmit, valid);
+      });
+    }
+    function handleReset(event) {
+      preventDefault(event);
+      reset();
+      call(props2.onReset);
+    }
+    function validate() {
+      return __async(this, null, function* () {
+        var _a;
+        const res = yield Promise.all(formItems.map(({ validate: validate2 }) => validate2()));
+        if (props2.scrollToError) {
+          const [, errorIndex] = find(res, (r) => r === false, props2.scrollToError);
+          const hasError = errorIndex > -1;
+          if (hasError) {
+            const formItemElement = (_a = formItems[errorIndex].instance.proxy) == null ? void 0 : _a.$el;
+            scroll(formItemElement);
+          }
+          return !hasError;
+        }
+        return res.every((result) => result === true);
+      });
+    }
+    function reset() {
+      return formItems.forEach(({ reset: reset2 }) => reset2());
+    }
+    function resetValidation() {
+      return formItems.forEach(({ resetValidation: resetValidation2 }) => resetValidation2());
+    }
+    return {
+      n,
+      handleSubmit,
+      handleReset,
+      validate,
+      reset,
+      resetValidation
+    };
+  }
+});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

package/es/form/index.mjs

@@ -0,0 +1,15 @@
+import Form from "./Form.mjs";
+import { useValidation, withInstall, withPropsDefaultsSetter } from "../utils/components.mjs";
+import { useForm } from "./provide.mjs";
+import { props as formProps } from "./props.mjs";
+Form.useValidation = useValidation;
+Form.useForm = useForm;
+withInstall(Form);
+withPropsDefaultsSetter(Form, formProps);
+const _FormComponent = Form;
+var stdin_default = Form;
+export {
+  _FormComponent,
+  stdin_default as default,
+  formProps
+};

package/es/form/props.mjs

@@ -0,0 +1,15 @@
+import { defineListenerProp } from "../utils/components.mjs";
+const props = {
+  disabled: Boolean,
+  readonly: Boolean,
+  scrollToError: String,
+  scrollToErrorOffsetY: {
+    type: [String, Number],
+    default: 0
+  },
+  onSubmit: defineListenerProp(),
+  onReset: defineListenerProp()
+};
+export {
+  props
+};

package/es/form/provide.mjs

@@ -0,0 +1,47 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+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;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { useChildren, useParent } from "@varlet/use";
+import { getCurrentInstance } from "vue";
+const FORM_BIND_FORM_ITEM_KEY = Symbol("FORM_BIND_FORM_ITEM_KEY");
+function useForm() {
+  const { parentProvider, index, bindParent } = useParent(FORM_BIND_FORM_ITEM_KEY);
+  const instance = getCurrentInstance();
+  const bindForm = bindParent ? (formItemProvider) => {
+    bindParent(__spreadProps(__spreadValues({}, formItemProvider), { instance }));
+  } : null;
+  return {
+    index,
+    form: parentProvider,
+    bindForm
+  };
+}
+function useFormItems() {
+  const { childProviders, length, bindChildren } = useChildren(FORM_BIND_FORM_ITEM_KEY);
+  return {
+    length,
+    formItems: childProviders,
+    bindFormItems: bindChildren
+  };
+}
+export {
+  FORM_BIND_FORM_ITEM_KEY,
+  useForm,
+  useFormItems
+};

package/es/form/style/index.mjs

@@ -0,0 +1,2 @@
+import '../../styles/common.css'
+import '../FormSfc.css'

package/es/form-details/FormDetails.mjs

@@ -0,0 +1,91 @@
+import { defineComponent } from "vue";
+import { createNamespace } from "../utils/components.mjs";
+import { props } from "./props.mjs";
+const { name, n } = createNamespace("form-details");
+import { toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, Transition as _Transition, withCtx as _withCtx, createVNode as _createVNode, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, renderSlot as _renderSlot, createBlock as _createBlock, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
+const _withScopeId = (n2) => (_pushScopeId(""), n2 = n2(), _popScopeId(), n2);
+const _hoisted_1 = { key: 0 };
+const _hoisted_2 = { key: 0 };
+function __render__(_ctx, _cache) {
+  return _openBlock(), _createBlock(_Transition, {
+    name: _ctx.n()
+  }, {
+    default: _withCtx(() => [
+      _ctx.errorMessage || _ctx.extraMessage || _ctx.$slots["extra-message"] ? (_openBlock(), _createElementBlock(
+        "div",
+        {
+          key: 0,
+          class: _normalizeClass(_ctx.n())
+        },
+        [
+          _createElementVNode(
+            "div",
+            {
+              class: _normalizeClass(_ctx.n("error-message"))
+            },
+            [
+              _createVNode(_Transition, {
+                name: _ctx.n("message")
+              }, {
+                default: _withCtx(() => [
+                  _ctx.errorMessage ? (_openBlock(), _createElementBlock(
+                    "div",
+                    _hoisted_1,
+                    _toDisplayString(_ctx.errorMessage),
+                    1
+                    /* TEXT */
+                  )) : _createCommentVNode("v-if", true)
+                ]),
+                _: 1
+                /* STABLE */
+              }, 8, ["name"])
+            ],
+            2
+            /* CLASS */
+          ),
+          _createElementVNode(
+            "div",
+            {
+              class: _normalizeClass(_ctx.n("extra-message"))
+            },
+            [
+              _createVNode(_Transition, {
+                name: _ctx.n("message")
+              }, {
+                default: _withCtx(() => [
+                  _renderSlot(_ctx.$slots, "extra-message", {}, () => [
+                    _ctx.extraMessage ? (_openBlock(), _createElementBlock(
+                      "div",
+                      _hoisted_2,
+                      _toDisplayString(_ctx.extraMessage),
+                      1
+                      /* TEXT */
+                    )) : _createCommentVNode("v-if", true)
+                  ])
+                ]),
+                _: 3
+                /* FORWARDED */
+              }, 8, ["name"])
+            ],
+            2
+            /* CLASS */
+          )
+        ],
+        2
+        /* CLASS */
+      )) : _createCommentVNode("v-if", true)
+    ]),
+    _: 3
+    /* FORWARDED */
+  }, 8, ["name"]);
+}
+const __sfc__ = defineComponent({
+  name,
+  props,
+  setup: () => ({ n })
+});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

package/es/form-details/formDetails.css

@@ -0,0 +1 @@
+:root { --form-details-error-message-color: var(--color-danger); --form-details-extra-message-color: #888; --form-details-margin-top: 6px; --form-details-font-size: 12px; --form-details-message-margin-right: 4px;}.var-form-details { display: flex; justify-content: space-between; font-size: var(--form-details-font-size); margin-top: var(--form-details-margin-top);}.var-form-details-enter-from,.var-form-details-leave-to { opacity: 0; margin-top: 2px !important;}.var-form-details-enter-active,.var-form-details-leave-active { transition: 0.2s all var(--cubic-bezier);}.var-form-details__message-enter-from,.var-form-details__message-leave-to { opacity: 0;}.var-form-details__message-enter-active,.var-form-details__message-leave-active { transition: 0.2s all var(--cubic-bezier);}.var-form-details__error-message { flex-grow: 1; color: var(--form-details-error-message-color); margin-right: var(--form-details-message-margin-right); user-select: none; text-align: left;}.var-form-details__extra-message { flex-shrink: 0; color: var(--form-details-extra-message-color); user-select: none; text-align: right;}

package/es/form-details/index.mjs

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

package/es/form-details/props.mjs

@@ -0,0 +1,13 @@
+const props = {
+  errorMessage: {
+    type: String,
+    default: ""
+  },
+  extraMessage: {
+    type: String,
+    default: ""
+  }
+};
+export {
+  props
+};

package/es/form-details/style/index.mjs

@@ -0,0 +1,3 @@
+import '../../styles/common.css'
+import '../formDetails.css'
+import '../FormDetailsSfc.css'