@varlet/ui 3.5.0 → 3.5.1

package/es/floating-panel/FloatingPanel.mjs

@@ -1,186 +0,0 @@
-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 { renderSlot as _renderSlot, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, 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))
-      },
-      [
-        _renderSlot(_ctx.$slots, "header", {}, () => [
-          _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, NEED_HYDRATION */
-    )
-  ], 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", { defaultValue: DEFAULT_START_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

@@ -1 +0,0 @@
-:root { --floating-panel-z-index: 999; --floating-panel-border-top: none; --floating-panel-border-radius: 0; --floating-panel-background: var(--color-surface-container-high); --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

@@ -1,11 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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

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

package/es/form/Form.mjs

@@ -1,116 +0,0 @@
-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, NEED_HYDRATION */
-  );
-}
-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

@@ -1,15 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,47 +0,0 @@
-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

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

package/es/form-details/FormDetails.mjs

@@ -1,91 +0,0 @@
-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

@@ -1 +0,0 @@
-: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

@@ -1,12 +0,0 @@
-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

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

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

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