@varlet/ui 3.5.1 → 3.5.2

package/es/ellipsis/Ellipsis.mjs

@@ -0,0 +1,109 @@
+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 VarTooltip from "../tooltip/index.mjs";
+import { computed, defineComponent } from "vue";
+import { createNamespace } from "../utils/components.mjs";
+import { props } from "./props.mjs";
+import { useVModel } from "@varlet/use";
+const { name, n, classes } = createNamespace("ellipsis");
+import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock, resolveComponent as _resolveComponent, normalizeProps as _normalizeProps, guardReactiveProps as _guardReactiveProps, withCtx as _withCtx, createBlock as _createBlock } from "vue";
+const _hoisted_1 = { key: 0 };
+function __render__(_ctx, _cache) {
+  const _component_var_tooltip = _resolveComponent("var-tooltip");
+  return _openBlock(), _createBlock(
+    _component_var_tooltip,
+    _normalizeProps(_guardReactiveProps(_ctx.tooltipProps)),
+    {
+      content: _withCtx(() => [
+        _renderSlot(_ctx.$slots, "tooltip-content", {}, () => {
+          var _a;
+          return [
+            ((_a = _ctx.tooltipProps) == null ? void 0 : _a.content) ? (_openBlock(), _createElementBlock(
+              "span",
+              _hoisted_1,
+              _toDisplayString(_ctx.tooltipProps.content),
+              1
+              /* TEXT */
+            )) : _renderSlot(_ctx.$slots, "default", { key: 1 })
+          ];
+        })
+      ]),
+      default: _withCtx(() => [
+        _createElementVNode(
+          "span",
+          {
+            class: _normalizeClass(
+              _ctx.classes(_ctx.n(), [_ctx.lineClamp, _ctx.n("--clamp"), _ctx.n("--line")], [_ctx.expandTrigger, _ctx.n("--cursor")], [_ctx.expanding, _ctx.n("--expand")])
+            ),
+            style: _normalizeStyle(_ctx.rootStyles),
+            onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
+          },
+          [
+            _renderSlot(_ctx.$slots, "default")
+          ],
+          6
+          /* CLASS, STYLE */
+        )
+      ]),
+      _: 3
+      /* FORWARDED */
+    },
+    16
+    /* FULL_PROPS */
+  );
+}
+const __sfc__ = defineComponent({
+  name,
+  components: { VarTooltip },
+  props,
+  setup(props2) {
+    const expanding = useVModel(props2, "expand");
+    const rootStyles = computed(() => props2.lineClamp ? { "-webkit-line-clamp": props2.lineClamp } : {});
+    const tooltipProps = computed(() => {
+      if (props2.tooltip === false) {
+        return {
+          disabled: true
+        };
+      }
+      if (props2.tooltip === true) {
+        return {
+          sameWidth: true
+        };
+      }
+      return __spreadValues({ sameWidth: true }, props2.tooltip);
+    });
+    function handleClick() {
+      if (!props2.expandTrigger) {
+        return;
+      }
+      expanding.value = !expanding.value;
+    }
+    return {
+      tooltipProps,
+      expanding,
+      rootStyles,
+      n,
+      classes,
+      handleClick
+    };
+  }
+});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

package/es/ellipsis/ellipsis.css

@@ -0,0 +1 @@
+.var-ellipsis { width: 100%; overflow: hidden; vertical-align: bottom; -webkit-tap-highlight-color: transparent;}.var-ellipsis--clamp { display: -webkit-inline-box; -webkit-box-orient: vertical;}.var-ellipsis--line { display: inline-block; white-space: nowrap; text-overflow: ellipsis;}.var-ellipsis--cursor { cursor: pointer;}.var-ellipsis--expand { display: inline-block; white-space: wrap; overflow: visible;}

package/es/ellipsis/index.mjs

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

package/es/ellipsis/props.mjs

@@ -0,0 +1,14 @@
+import { defineListenerProp } from "../utils/components.mjs";
+const props = {
+  expand: Boolean,
+  expandTrigger: String,
+  lineClamp: [Number, String],
+  tooltip: {
+    type: [Object, Boolean],
+    default: true
+  },
+  "onUpdate:expand": defineListenerProp()
+};
+export {
+  props
+};

package/es/ellipsis/style/index.mjs

@@ -0,0 +1,4 @@
+import '../../styles/common.css'
+import '../../tooltip/tooltip.css'
+import '../ellipsis.css'
+import '../EllipsisSfc.css'

package/es/fab/Fab.mjs

@@ -0,0 +1,153 @@
+import { createVNode as _createVNode, vShow as _vShow, withDirectives as _withDirectives, mergeProps as _mergeProps } from "vue";
+import Button from "../button/index.mjs";
+import Icon from "../icon/index.mjs";
+import Drag from "../drag/index.mjs";
+import { defineComponent, ref, Transition, watch } from "vue";
+import { useClickOutside, useVModel } from "@varlet/use";
+import { isBoolean, call } from "@varlet/shared";
+import { createNamespace, flatFragment } from "../utils/components.mjs";
+import { toSizeUnit } from "../utils/elements.mjs";
+import { props } from "./props.mjs";
+
+
+
+
+
+
+
+
+const {
+  name,
+  classes,
+  n
+} = createNamespace("fab");
+var stdin_default = defineComponent({
+  name,
+  inheritAttrs: false,
+  props,
+  setup(props2, {
+    slots,
+    attrs
+  }) {
+    const isActive = useVModel(props2, "active");
+    const host = ref(null);
+    const dragRef = ref(null);
+    watch(() => props2.trigger, () => {
+      isActive.value = false;
+    });
+    watch(() => props2.disabled, () => {
+      isActive.value = false;
+    });
+    watch(() => [props2.position, props2.fixed, props2.top, props2.bottom, props2.left, props2.right], () => {
+      var _a;
+      (_a = dragRef.value) == null ? void 0 : _a.reset();
+    });
+    useClickOutside(host, "click", handleClickOutside);
+    function handleClick(e, value, childrenLength) {
+      e.stopPropagation();
+      if (props2.trigger !== "click" || props2.disabled) {
+        return;
+      }
+      if (childrenLength === 0) {
+        call(props2.onClick, isActive.value, e);
+        return;
+      }
+      isActive.value = value;
+      call(props2.onClick, isActive.value, e);
+      call(isActive.value ? props2.onOpen : props2.onClose);
+    }
+    function handleMouse(value, childrenLength) {
+      if (props2.trigger !== "hover" || props2.disabled || childrenLength === 0) {
+        return;
+      }
+      isActive.value = value;
+      call(isActive.value ? props2.onOpen : props2.onClose);
+    }
+    function handleClickOutside() {
+      if (props2.trigger !== "click" || props2.disabled) {
+        return;
+      }
+      if (isActive.value !== false) {
+        isActive.value = false;
+        call(props2.onClose);
+      }
+    }
+    function renderTrigger() {
+      if (slots.trigger) {
+        return props2.show ? slots.trigger({
+          active: isActive.value
+        }) : null;
+      }
+      return _withDirectives(_createVNode(Button, {
+        "var-fab-cover": true,
+        "class": n("trigger"),
+        "type": props2.type,
+        "color": props2.color,
+        "disabled": props2.disabled,
+        "elevation": props2.elevation,
+        "iconContainer": true
+      }, {
+        default: () => [_createVNode(Icon, {
+          "var-fab-cover": true,
+          "class": classes([isActive.value, n("trigger-active-icon"), n("trigger-inactive-icon")]),
+          "name": isActive.value ? props2.activeIcon : props2.inactiveIcon,
+          "size": isActive.value ? props2.activeIconSize : props2.inactiveIconSize,
+          "namespace": isActive.value ? props2.activeIconNamespace : props2.inactiveIconNamespace,
+          "transition": 200,
+          "animationClass": n("--trigger-icon-animation")
+        }, null)]
+      }), [[_vShow, props2.show]]);
+    }
+    return () => {
+      var _a;
+      const children = flatFragment((_a = call(slots.default)) != null ? _a : []);
+      const dragProps = isBoolean(props2.drag) ? {} : props2.drag;
+      return _createVNode(Drag, _mergeProps({
+        "ref": dragRef,
+        "class": classes(n(`--position-${props2.position}`), [!props2.fixed, n("--absolute")]),
+        "style": {
+          top: toSizeUnit(props2.top),
+          bottom: toSizeUnit(props2.bottom),
+          left: toSizeUnit(props2.left),
+          right: toSizeUnit(props2.right)
+        },
+        "zIndex": props2.zIndex,
+        "teleport": props2.teleport,
+        "disabled": props2.disabled || !props2.drag || !props2.fixed,
+        "direction": dragProps.direction,
+        "attraction": dragProps.attraction,
+        "boundary": dragProps.boundary,
+        "onClick": (e) => handleClick(e, !isActive.value, children.length)
+      }, attrs), {
+        default: () => [_createVNode("div", {
+          "class": classes(n(), n(`--direction-${props2.direction}`), [props2.safeArea, n("--safe-area")]),
+          "ref": host,
+          "onMouseleave": () => handleMouse(false, children.length),
+          "onMouseenter": () => handleMouse(true, children.length)
+        }, [_createVNode(Transition, {
+          "name": n(`--active-transition`)
+        }, {
+          default: () => [renderTrigger()]
+        }), _createVNode(Transition, {
+          "name": n(`--actions-transition-${props2.direction}`),
+          "onAfterEnter": props2.onOpened,
+          "onAfterLeave": props2.onClosed
+        }, {
+          default: () => [_withDirectives(_createVNode("div", {
+            "class": n("actions"),
+            "onClick": (e) => e.stopPropagation()
+          }, [children.map((child) => {
+            var _a2;
+            return _createVNode("div", {
+              "class": n("action"),
+              "key": (_a2 = child.key) != null ? _a2 : void 0
+            }, [child]);
+          })]), [[_vShow, props2.show && isActive.value && children.length]])]
+        })])]
+      });
+    };
+  }
+});
+export {
+  stdin_default as default
+};

package/es/fab/fab.css

@@ -0,0 +1 @@
+:root { --fab-top: 70px; --fab-bottom: 16px; --fab-left: 16px; --fab-right: 16px; --fab-trigger-size: 56px; --fab-trigger-border-radius: 50%; --fab-trigger-inactive-icon-size: 26px; --fab-trigger-active-icon-size: 22px; --fab-actions-padding: 10px 0; --fab-action-margin: 6px; --fab-action-size: 40px; --fab-action-border-radius: 50%; --fab-transition-standard-easing: cubic-bezier(0.4, 0, 0.2, 1);}.var-fab-transition-default-enter-active { transition: 0.3s var(--fab-transition-standard-easing) !important;}.var-fab-transition-default-leave-active { transition: 0.3s var(--fab-transition-standard-easing) !important;}.var-fab__trigger[var-fab-cover] { width: var(--fab-trigger-size); height: var(--fab-trigger-size); border-radius: var(--fab-trigger-border-radius);}.var-fab__trigger-inactive-icon[var-fab-cover] { font-size: var(--fab-trigger-inactive-icon-size);}.var-fab__trigger-active-icon[var-fab-cover] { font-size: var(--fab-trigger-active-icon-size);}.var-fab__actions { position: absolute; display: flex; justify-content: center; align-items: center; padding: var(--fab-actions-padding);}.var-fab__action { margin: var(--fab-action-margin);}.var-fab__action .var-button { width: var(--fab-action-size); height: var(--fab-action-size); border-radius: var(--fab-action-border-radius);}.var-fab--position-left-top { top: var(--fab-top); left: var(--fab-left);}.var-fab--position-right-top { top: var(--fab-top); right: var(--fab-right);}.var-fab--position-left-bottom { bottom: var(--fab-bottom); left: var(--fab-left);}.var-fab--position-right-bottom { bottom: var(--fab-bottom); right: var(--fab-right);}.var-fab--direction-left .var-fab__actions,.var-fab--direction-right .var-fab__actions { height: 100%; top: 0; padding: 0 var(--fab-actions-padding);}.var-fab--direction-left .var-fab__actions { flex-direction: row-reverse; right: 100%;}.var-fab--direction-right .var-fab__actions { flex-direction: row; left: 100%;}.var-fab--direction-top .var-fab__actions,.var-fab--direction-bottom .var-fab__actions { width: 100%; left: 0;}.var-fab--direction-top .var-fab__actions { flex-direction: column-reverse; bottom: 100%;}.var-fab--direction-bottom .var-fab__actions { flex-direction: column; top: 100%;}.var-fab--fixed { position: fixed;}.var-fab--absolute { position: absolute;}.var-fab--active-transition-enter-active { transition: 0.3s var(--fab-transition-standard-easing) !important;}.var-fab--active-transition-leave-active { transition: 0.3s var(--fab-transition-standard-easing) !important;}.var-fab--active-transition-enter-from,.var-fab--active-transition-leave-to { transform: scale(0);}.var-fab--actions-transition-top-enter-active { transition: 0.3s var(--fab-transition-standard-easing) !important;}.var-fab--actions-transition-top-leave-active { transition: 0.3s var(--fab-transition-standard-easing) !important;}.var-fab--actions-transition-top-enter-from,.var-fab--actions-transition-top-leave-to { opacity: 0; transform: translateY(40px);}.var-fab--actions-transition-bottom-enter-active { transition: 0.3s var(--fab-transition-standard-easing) !important;}.var-fab--actions-transition-bottom-leave-active { transition: 0.3s var(--fab-transition-standard-easing) !important;}.var-fab--actions-transition-bottom-enter-from,.var-fab--actions-transition-bottom-leave-to { opacity: 0; transform: translateY(-40px);}.var-fab--actions-transition-left-enter-active { transition: 0.3s var(--fab-transition-standard-easing) !important;}.var-fab--actions-transition-left-leave-active { transition: 0.3s var(--fab-transition-standard-easing) !important;}.var-fab--actions-transition-left-enter-from,.var-fab--actions-transition-left-leave-to { opacity: 0; transform: translateX(40px);}.var-fab--actions-transition-right-enter-active { transition: 0.3s var(--fab-transition-standard-easing) !important;}.var-fab--actions-transition-right-leave-active { transition: 0.3s var(--fab-transition-standard-easing) !important;}.var-fab--actions-transition-right-enter-from,.var-fab--actions-transition-right-leave-to { opacity: 0; transform: translateX(-40px);}.var-fab--trigger-icon-animation { transform: scale(0.4); opacity: 0; transition-property: transform, opacity;}.var-fab--safe-area { margin-bottom: constant(safe-area-inset-bottom); margin-bottom: env(safe-area-inset-bottom);}

package/es/fab/index.mjs

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

package/es/fab/props.mjs

@@ -0,0 +1,73 @@
+import { defineListenerProp, pickProps } from "../utils/components.mjs";
+import { iconProps } from "../icon/index.mjs";
+const props = {
+  active: Boolean,
+  show: {
+    type: Boolean,
+    default: true
+  },
+  drag: {
+    type: [Object, Boolean],
+    default: false
+  },
+  type: {
+    type: String,
+    default: "primary"
+  },
+  position: {
+    type: String,
+    default: "right-bottom"
+  },
+  direction: {
+    type: String,
+    default: "top"
+  },
+  trigger: {
+    type: String,
+    default: "click"
+  },
+  disabled: Boolean,
+  color: String,
+  inactiveIcon: {
+    type: String,
+    default: "plus"
+  },
+  activeIcon: {
+    type: String,
+    default: "window-close"
+  },
+  inactiveIconSize: pickProps(iconProps, "size"),
+  activeIconSize: pickProps(iconProps, "size"),
+  inactiveIconNamespace: pickProps(iconProps, "namespace"),
+  activeIconNamespace: pickProps(iconProps, "namespace"),
+  fixed: {
+    type: Boolean,
+    default: true
+  },
+  zIndex: {
+    type: [Number, String],
+    default: 90
+  },
+  top: [Number, String],
+  bottom: [Number, String],
+  left: [Number, String],
+  right: [Number, String],
+  elevation: {
+    type: [Boolean, Number, String],
+    default: true
+  },
+  safeArea: Boolean,
+  teleport: {
+    type: [String, Object, Boolean],
+    default: "body"
+  },
+  onClick: defineListenerProp(),
+  onOpen: defineListenerProp(),
+  onOpened: defineListenerProp(),
+  onClose: defineListenerProp(),
+  onClosed: defineListenerProp(),
+  "onUpdate:active": defineListenerProp()
+};
+export {
+  props
+};

package/es/fab/style/index.mjs

@@ -0,0 +1,8 @@
+import '../../styles/common.css'
+import '../../styles/elevation.css'
+import '../../ripple/ripple.css'
+import '../../icon/icon.css'
+import '../../loading/loading.css'
+import '../../button/button.css'
+import '../../drag/drag.css'
+import '../fab.css'