@varlet/ui 3.5.1 → 3.5.2

package/es/dialog/index.mjs

@@ -0,0 +1,97 @@
+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 VarDialog from "./Dialog.mjs";
+import { reactive, nextTick } from "vue";
+import { inBrowser, isString, call } from "@varlet/shared";
+import { mountInstance, withInstall, withPropsDefaultsSetter } from "../utils/components.mjs";
+import { props as dialogProps } from "./props.mjs";
+let singletonOptions;
+let defaultOptions = {};
+function normalizeOptions(options = {}) {
+  if (isString(options)) {
+    return __spreadProps(__spreadValues({}, defaultOptions), { message: options });
+  }
+  return __spreadValues(__spreadValues({}, defaultOptions), options);
+}
+function Dialog(options) {
+  if (!inBrowser()) {
+    return Promise.resolve();
+  }
+  return new Promise((resolve) => {
+    Dialog.close();
+    const dialogOptions = normalizeOptions(options);
+    const reactiveDialogOptions = reactive(dialogOptions);
+    reactiveDialogOptions.teleport = "body";
+    singletonOptions = reactiveDialogOptions;
+    const { unmountInstance } = mountInstance(VarDialog, reactiveDialogOptions, {
+      onConfirm: () => {
+        call(reactiveDialogOptions.onConfirm);
+        resolve("confirm");
+      },
+      onCancel: () => {
+        call(reactiveDialogOptions.onCancel);
+        resolve("cancel");
+      },
+      onClose: () => {
+        call(reactiveDialogOptions.onClose);
+        resolve("close");
+      },
+      onClosed: () => {
+        call(reactiveDialogOptions.onClosed);
+        unmountInstance();
+        singletonOptions === reactiveDialogOptions && (singletonOptions = null);
+      },
+      onRouteChange: () => {
+        unmountInstance();
+        singletonOptions === reactiveDialogOptions && (singletonOptions = null);
+      },
+      "onUpdate:show": (value) => {
+        reactiveDialogOptions.show = value;
+      }
+    });
+    reactiveDialogOptions.show = true;
+  });
+}
+Dialog.setDefaultOptions = function(options) {
+  defaultOptions = options;
+};
+Dialog.resetDefaultOptions = function() {
+  defaultOptions = {};
+};
+Dialog.close = function() {
+  if (singletonOptions != null) {
+    const prevSingletonOptions = singletonOptions;
+    singletonOptions = null;
+    nextTick().then(() => {
+      prevSingletonOptions.show = false;
+    });
+  }
+};
+Dialog.Component = VarDialog;
+withInstall(VarDialog);
+withInstall(VarDialog, Dialog);
+withPropsDefaultsSetter(Dialog, dialogProps);
+const _DialogComponent = VarDialog;
+var stdin_default = Dialog;
+export {
+  _DialogComponent,
+  stdin_default as default,
+  dialogProps
+};

package/es/dialog/props.mjs

@@ -0,0 +1,67 @@
+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,
+  width: [Number, String],
+  title: String,
+  message: String,
+  messageAlign: {
+    type: String,
+    default: "left"
+  },
+  confirmButton: {
+    type: Boolean,
+    default: true
+  },
+  cancelButton: {
+    type: Boolean,
+    default: true
+  },
+  confirmButtonText: String,
+  cancelButtonText: String,
+  confirmButtonTextColor: String,
+  cancelButtonTextColor: String,
+  confirmButtonColor: String,
+  cancelButtonColor: String,
+  dialogClass: String,
+  dialogStyle: Object,
+  onBeforeClose: defineListenerProp(),
+  onConfirm: defineListenerProp(),
+  onCancel: defineListenerProp(),
+  "onUpdate:show": defineListenerProp()
+}, pickProps(popupProps, [
+  "overlay",
+  "overlayClass",
+  "overlayStyle",
+  "lockScroll",
+  "closeOnClickOverlay",
+  "closeOnKeyEscape",
+  "teleport",
+  "onOpen",
+  "onClose",
+  "onOpened",
+  "onClosed",
+  "onClickOverlay",
+  "onKeyEscape",
+  // internal for function call closes the dialog
+  "onRouteChange"
+]));
+export {
+  props
+};

package/es/dialog/style/index.mjs

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

package/es/divider/Divider.mjs

@@ -0,0 +1,86 @@
+import { defineComponent, computed, ref, onUpdated } from "vue";
+import { toSizeUnit } from "../utils/elements.mjs";
+import { toNumber, isBoolean } from "@varlet/shared";
+import { props } from "./props.mjs";
+import { createNamespace } from "../utils/components.mjs";
+import { onSmartMounted } from "@varlet/use";
+const { name, n, classes } = createNamespace("divider");
+import { renderSlot as _renderSlot, toDisplayString as _toDisplayString, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, normalizeStyle as _normalizeStyle } from "vue";
+function __render__(_ctx, _cache) {
+  return _openBlock(), _createElementBlock(
+    "div",
+    {
+      class: _normalizeClass(
+        _ctx.classes(
+          _ctx.n(),
+          _ctx.n("$--box"),
+          [_ctx.vertical, _ctx.n("--vertical")],
+          [_ctx.withText, _ctx.n("--with-text")],
+          [_ctx.withPresetInset, _ctx.n("--inset")],
+          [_ctx.dashed, _ctx.n("--dashed")],
+          [_ctx.hairline, _ctx.n("--hairline")]
+        )
+      ),
+      style: _normalizeStyle(_ctx.style),
+      role: "separator"
+    },
+    [
+      !_ctx.vertical ? _renderSlot(_ctx.$slots, "default", { key: 0 }, () => [
+        _ctx.description ? (_openBlock(), _createElementBlock(
+          "span",
+          {
+            key: 0,
+            class: _normalizeClass(_ctx.n("text"))
+          },
+          _toDisplayString(_ctx.description),
+          3
+          /* TEXT, CLASS */
+        )) : _createCommentVNode("v-if", true)
+      ]) : _createCommentVNode("v-if", true)
+    ],
+    6
+    /* CLASS, STYLE */
+  );
+}
+const __sfc__ = defineComponent({
+  name,
+  props,
+  setup(props2, { slots }) {
+    const withText = ref(false);
+    const withPresetInset = computed(() => {
+      const { vertical, inset } = props2;
+      return !vertical && inset === true;
+    });
+    const style = computed(() => {
+      const { inset, vertical, margin } = props2;
+      if (isBoolean(inset) || vertical) {
+        return { margin };
+      }
+      const _inset = toNumber(inset);
+      const absInsetWithUnit = Math.abs(_inset) + (inset + "").replace(_inset + "", "");
+      return {
+        margin,
+        width: `calc(100% - ${toSizeUnit(absInsetWithUnit)})`,
+        left: _inset > 0 ? toSizeUnit(absInsetWithUnit) : toSizeUnit(0)
+      };
+    });
+    onSmartMounted(checkHasText);
+    onUpdated(checkHasText);
+    function checkHasText() {
+      const { description, vertical } = props2;
+      withText.value = (slots.default || description != null) && !vertical;
+    }
+    return {
+      n,
+      classes,
+      withText,
+      style,
+      withPresetInset
+    };
+  }
+});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

package/es/divider/divider.css

@@ -0,0 +1 @@
+:root { --divider-color: var(--color-outline); --divider-text-color: #888; --divider-text-margin: 8px 0; --divider-text-padding: 0 8px; --divider-inset: 72px;}.var-divider { position: relative; width: 100%; height: 0; border: none; border-top: 1px solid var(--divider-color); margin: var(--divider-text-margin); font-size: var(--font-size-md); color: var(--divider-text-color);}.var-divider--vertical { width: 0; height: auto; align-self: stretch; margin: 0 var(--divider-text-margin); border-top: none; border-left: 1px solid var(--divider-color);}.var-divider--inset { width: calc(100% - var(--divider-inset)); left: var(--divider-inset);}.var-divider__text { display: inline-block; padding: var(--divider-text-padding);}.var-divider--with-text { background-color: transparent; height: fit-content; display: flex; align-items: center; justify-content: center; border: none;}.var-divider--with-text::before,.var-divider--with-text::after { display: inline-block; content: ''; flex: 1; height: 0; border-top: 1px solid var(--divider-color);}.var-divider--dashed { border-top-style: dashed;}.var-divider--dashed.var-divider--vertical { border-top: none; border-left-style: dashed;}.var-divider--hairline { transform: scaleY(0.5);}.var-divider--hairline.var-divider--with-text { transform: none;}.var-divider--hairline.var-divider--with-text::before,.var-divider--hairline.var-divider--with-text::after { transform: scaleY(0.5);}.var-divider--hairline.var-divider--vertical { transform: scaleX(0.5);}

package/es/divider/index.mjs

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

package/es/divider/props.mjs

@@ -0,0 +1,14 @@
+const props = {
+  inset: {
+    type: [Boolean, Number, String],
+    default: false
+  },
+  vertical: Boolean,
+  description: String,
+  margin: String,
+  dashed: Boolean,
+  hairline: Boolean
+};
+export {
+  props
+};

package/es/divider/style/index.mjs

@@ -0,0 +1,3 @@
+import '../../styles/common.css'
+import '../divider.css'
+import '../DividerSfc.css'

package/es/drag/Drag.mjs

@@ -0,0 +1,261 @@
+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));
+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, ref, reactive, watch } from "vue";
+import { props } from "./props.mjs";
+import { createNamespace, useTeleport } from "../utils/components.mjs";
+import { toPxNum } from "../utils/elements.mjs";
+import { onSmartMounted, onWindowResize, useTouch } from "@varlet/use";
+import { clamp, getRect, preventDefault, call } from "@varlet/shared";
+const { name, n, classes } = createNamespace("drag");
+import { renderSlot as _renderSlot, mergeProps as _mergeProps, createElementVNode as _createElementVNode, 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",
+      _mergeProps({
+        ref: "drag",
+        class: _ctx.classes(_ctx.n(), _ctx.n("$--box"), [_ctx.enableTransition, _ctx.n("--transition")]),
+        style: {
+          "z-index": _ctx.zIndex
+        },
+        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)),
+        onClick: _cache[4] || (_cache[4] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
+      }, _ctx.getAttrs()),
+      [
+        _renderSlot(_ctx.$slots, "default")
+      ],
+      16
+      /* FULL_PROPS */
+    )
+  ], 8, ["to", "disabled"]);
+}
+const __sfc__ = defineComponent({
+  name,
+  inheritAttrs: false,
+  props,
+  setup(props2, { attrs }) {
+    const drag = ref(null);
+    const x = ref(0);
+    const y = ref(0);
+    const dragged = ref(false);
+    const enableTransition = ref(false);
+    const { touching, dragging, moveX, moveY, startTouch, moveTouch, endTouch, resetTouch } = useTouch();
+    const { disabled: teleportDisabled } = useTeleport();
+    const boundary = reactive({
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0
+    });
+    watch(() => props2.boundary, toPxBoundary);
+    onWindowResize(resize);
+    onSmartMounted(() => {
+      toPxBoundary();
+      resize();
+    });
+    function handleTouchstart(event) {
+      if (props2.disabled) {
+        return;
+      }
+      startTouch(event);
+      saveXY();
+    }
+    function handleTouchmove(event) {
+      return __async(this, null, function* () {
+        if (!touching.value || props2.disabled) {
+          return;
+        }
+        moveTouch(event);
+        preventDefault(event);
+        enableTransition.value = false;
+        dragged.value = true;
+        if (props2.direction.includes("x")) {
+          x.value += moveX.value;
+        }
+        if (props2.direction.includes("y")) {
+          y.value += moveY.value;
+        }
+        clampToBoundary();
+      });
+    }
+    function handleTouchend() {
+      if (props2.disabled) {
+        return;
+      }
+      endTouch();
+      enableTransition.value = true;
+      attract();
+    }
+    function handleClick(event) {
+      if (dragging.value) {
+        return;
+      }
+      call(props2.onClick, event);
+    }
+    function saveXY() {
+      const { left, top } = getOffset();
+      x.value = left;
+      y.value = top;
+    }
+    function getOffset() {
+      const dragRect = getRect(drag.value);
+      const windowRect = getRect(window);
+      const top = dragRect.top - windowRect.top;
+      const bottom = windowRect.bottom - dragRect.bottom;
+      const left = dragRect.left - windowRect.left;
+      const right = windowRect.right - dragRect.right;
+      const { width, height } = dragRect;
+      const { width: windowWidth, height: windowHeight } = windowRect;
+      return {
+        top,
+        bottom,
+        left,
+        right,
+        width,
+        height,
+        halfWidth: width / 2,
+        halfHeight: height / 2,
+        windowWidth,
+        windowHeight
+      };
+    }
+    function getRange() {
+      const offset = getOffset();
+      const x1 = boundary.left;
+      const x2 = offset.windowWidth - boundary.right - offset.width;
+      const y1 = boundary.top;
+      const y2 = offset.windowHeight - boundary.bottom - offset.height;
+      return {
+        minX: x1,
+        minY: y1,
+        // fallback the drag element overflows boundary
+        maxX: x1 < x2 ? x2 : x1,
+        maxY: y1 < y2 ? y2 : y1
+      };
+    }
+    function attract() {
+      if (props2.attraction == null) {
+        return;
+      }
+      const { halfWidth, halfHeight, top, bottom, left, right } = getOffset();
+      const { minX, minY, maxX, maxY } = getRange();
+      const leftDistance = left + halfWidth - boundary.left;
+      const rightDistance = right + halfWidth - boundary.right;
+      const topDistance = top + halfHeight - boundary.top;
+      const bottomDistance = bottom + halfHeight - boundary.bottom;
+      const nearLeft = leftDistance <= rightDistance;
+      const nearTop = topDistance <= bottomDistance;
+      if (props2.attraction.includes("x")) {
+        x.value = nearLeft ? minX : maxX;
+      }
+      if (props2.attraction.includes("y")) {
+        y.value = nearTop ? minY : maxY;
+      }
+    }
+    function clampToBoundary() {
+      const { minX, minY, maxX, maxY } = getRange();
+      x.value = clamp(x.value, minX, maxX);
+      y.value = clamp(y.value, minY, maxY);
+    }
+    function toPxBoundary() {
+      const { top = 0, bottom = 0, left = 0, right = 0 } = props2.boundary;
+      boundary.top = toPxNum(top);
+      boundary.bottom = toPxNum(bottom);
+      boundary.left = toPxNum(left);
+      boundary.right = toPxNum(right);
+    }
+    function getAttrs() {
+      var _a;
+      const style = (_a = attrs.style) != null ? _a : {};
+      return __spreadProps(__spreadValues({}, attrs), {
+        style: __spreadProps(__spreadValues({}, style), {
+          // when the drag element is dragged for the first time, the inset should be cleared to avoid affecting translateX and translateY.
+          top: dragged.value ? 0 : style.top,
+          left: dragged.value ? 0 : style.left,
+          right: dragged.value ? "auto" : style.right,
+          bottom: dragged.value ? "auto" : style.bottom,
+          transform: dragged.value ? `translate(${x.value}px, ${y.value}px)` : style.transform
+        })
+      });
+    }
+    function resize() {
+      if (!dragged.value) {
+        return;
+      }
+      saveXY();
+      clampToBoundary();
+    }
+    function reset() {
+      resetTouch();
+      enableTransition.value = false;
+      dragged.value = false;
+      x.value = 0;
+      y.value = 0;
+    }
+    return {
+      drag,
+      x,
+      y,
+      enableTransition,
+      dragging,
+      teleportDisabled,
+      n,
+      classes,
+      getAttrs,
+      handleTouchstart,
+      handleTouchmove,
+      handleTouchend,
+      handleClick,
+      resize,
+      reset
+    };
+  }
+});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

package/es/drag/drag.css

@@ -0,0 +1 @@
+.var-drag { position: fixed; display: inline-flex;}.var-drag--transition { transition: transform 0.2s linear;}

package/es/drag/index.mjs

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

package/es/drag/props.mjs

@@ -0,0 +1,30 @@
+import { defineListenerProp } from "../utils/components.mjs";
+const props = {
+  direction: {
+    type: String,
+    default: "xy"
+  },
+  attraction: String,
+  disabled: Boolean,
+  boundary: {
+    type: Object,
+    default: () => ({
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0
+    })
+  },
+  zIndex: {
+    type: [Number, String],
+    default: 90
+  },
+  teleport: {
+    type: [String, Object, Boolean],
+    default: "body"
+  },
+  onClick: defineListenerProp()
+};
+export {
+  props
+};

package/es/drag/style/index.mjs

@@ -0,0 +1,3 @@
+import '../../styles/common.css'
+import '../drag.css'
+import '../DragSfc.css'