@king-design/vue 3.6.2 → 3.8.0-beta.0

package/components/anchor/useScroll.js

@@ -0,0 +1,218 @@
+import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/slice";
+import _Array$from from "@babel/runtime-corejs3/core-js/array/from";
+import _Symbol from "@babel/runtime-corejs3/core-js/symbol";
+import _getIteratorMethod from "@babel/runtime-corejs3/core-js/get-iterator-method";
+function _createForOfIteratorHelperLoose(o, allowArrayLike) { var it = typeof _Symbol !== "undefined" && _getIteratorMethod(o) || o["@@iterator"]; if (it) return (it = it.call(o)).next.bind(it); if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; return function () { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { var _context; if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = _sliceInstanceProperty(_context = Object.prototype.toString.call(o)).call(_context, 8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return _Array$from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+import { useInstance } from 'intact-vue-next';
+import { useState } from '../../hooks/useState';
+export function useScroll() {
+  var instance = useInstance();
+  var isScrolling = useState(false);
+  var scrollTimer = null;
+  var rafId = null;
+  var scrollContainer = window;
+  // 回调函数，用于通知外部这是滚动触发的 value 变化
+  var setIsSettingFromScroll = null;
+  function getScrollContainer() {
+    var _instance$get = instance.get(),
+      container = _instance$get.container;
+    if (!container) {
+      return window;
+    }
+    if (typeof container === 'string') {
+      var el = document.querySelector(container);
+      return el || window;
+    }
+    return container;
+  }
+  // 获取当前滚动距离
+  function getScrollTop() {
+    if (scrollContainer === window) {
+      return window.scrollY || document.documentElement.scrollTop;
+    }
+    return scrollContainer.scrollTop;
+  }
+  // 获取滚动容器的高度
+  function getScrollHeight() {
+    if (scrollContainer === window) {
+      return document.documentElement.scrollHeight;
+    }
+    return scrollContainer.scrollHeight;
+  }
+  // 获取视口高度
+  function getViewportHeight() {
+    if (scrollContainer === window) {
+      return window.innerHeight;
+    }
+    return scrollContainer.clientHeight;
+  }
+  function getElementTop(element, container) {
+    if (container === window) {
+      // window: 累加 offsetTop
+      var offsetTop = 0;
+      var currentElement = element;
+      while (currentElement && currentElement !== document.body) {
+        offsetTop += currentElement.offsetTop;
+        currentElement = currentElement.offsetParent;
+      }
+      return offsetTop;
+    }
+    // 自定义容器: 使用 getBoundingClientRect
+    var containerEl = container;
+    var elementRect = element.getBoundingClientRect();
+    var containerRect = containerEl.getBoundingClientRect();
+    // 元素相对于容器内容区的位置 = 
+    // (元素到视口顶部的距离 - 容器到视口顶部的距离) + 容器已滚动的距离
+    return elementRect.top - containerRect.top + containerEl.scrollTop;
+  }
+  function scrollTo(target) {
+    var _instance$get2 = instance.get(),
+      _instance$get2$offset = _instance$get2.offset,
+      offset = _instance$get2$offset === void 0 ? 0 : _instance$get2$offset,
+      _instance$get2$durati = _instance$get2.duration,
+      duration = _instance$get2$durati === void 0 ? 700 : _instance$get2$durati;
+    // 目标位置
+    var targetTop = getElementTop(target, scrollContainer) - offset;
+    // 当前位置
+    var currentTop = getScrollTop();
+    if (Math.abs(currentTop - targetTop) < 1) return;
+    if (scrollTimer) {
+      clearTimeout(scrollTimer);
+    }
+    isScrolling.set(true);
+    if (scrollContainer === window) {
+      window.scrollTo({
+        top: targetTop,
+        behavior: 'smooth'
+      });
+    } else {
+      scrollContainer.scrollTo({
+        top: targetTop,
+        behavior: 'smooth'
+      });
+    }
+    scrollTimer = window.setTimeout(function () {
+      isScrolling.set(false);
+    }, duration);
+  }
+  // 滚动触发的 value 更新
+  function setValueFromScroll(href) {
+    if (setIsSettingFromScroll) {
+      setIsSettingFromScroll(true);
+    }
+    try {
+      instance.set('value', href);
+    } finally {
+      if (setIsSettingFromScroll) {
+        setIsSettingFromScroll(false);
+      }
+    }
+  }
+  // 更新当前激活的锚点
+  function updateActive() {
+    if (isScrolling.value) return;
+    var _instance$get3 = instance.get(),
+      _instance$get3$offset = _instance$get3.offset,
+      offset = _instance$get3$offset === void 0 ? 0 : _instance$get3$offset,
+      _instance$get3$thresh = _instance$get3.threshold,
+      threshold = _instance$get3$thresh === void 0 ? 50 : _instance$get3$thresh;
+    var links = instance.getLinks();
+    // 只处理当前存在且可见的锚点
+    var candidates = [];
+    for (var _iterator = _createForOfIteratorHelperLoose(links), _step; !(_step = _iterator()).done;) {
+      var _href = _step.value;
+      var _element = instance.getTargetElement(_href);
+      if (_element && _element.getClientRects().length > 0) {
+        candidates.push({
+          href: _href,
+          element: _element
+        });
+      }
+    }
+    if (candidates.length === 0) return;
+    var scrollTop = getScrollTop();
+    var viewportHeight = getViewportHeight();
+    var totalHeight = getScrollHeight();
+    var activeHref = candidates[0].href;
+    if (scrollTop + viewportHeight >= totalHeight - 10) {
+      // 接近底部，激活最后一个可见锚点
+      activeHref = candidates[candidates.length - 1].href;
+    } else if (scrollTop <= threshold) {
+      // 接近顶部，激活第一个可见锚点
+      activeHref = candidates[0].href;
+    } else {
+      // 正常滚动，寻找最后一个被“滚到”的锚点
+      for (var _iterator2 = _createForOfIteratorHelperLoose(candidates), _step2; !(_step2 = _iterator2()).done;) {
+        var _step2$value = _step2.value,
+          href = _step2$value.href,
+          element = _step2$value.element;
+        var sectionTop = getElementTop(element, scrollContainer) - offset - threshold;
+        if (scrollTop >= sectionTop) {
+          activeHref = href;
+        } else {
+          break;
+        }
+      }
+    }
+    if (activeHref !== instance.get('value')) {
+      setValueFromScroll(activeHref);
+    }
+  }
+  // 滚动事件处理
+  function onScroll() {
+    if (isScrolling.value) return;
+    if (rafId) {
+      cancelAnimationFrame(rafId);
+    }
+    // 使用 requestAnimationFrame 优化滚动性能
+    rafId = requestAnimationFrame(updateActive);
+  }
+  // 挂载后的初始化
+  function init() {
+    setTimeout(function () {
+      scrollContainer = getScrollContainer();
+      if (scrollContainer === window) {
+        window.addEventListener('scroll', onScroll, {
+          passive: true
+        });
+      } else {
+        scrollContainer.addEventListener('scroll', onScroll, {
+          passive: true
+        });
+      }
+      var initialValue = instance.get('value');
+      if (initialValue) {
+        var element = instance.getTargetElement(initialValue);
+        if (element) {
+          scrollTo(element);
+          return;
+        }
+      }
+    }, 100);
+    return function () {
+      if (scrollTimer) {
+        clearTimeout(scrollTimer);
+      }
+      if (rafId) {
+        cancelAnimationFrame(rafId);
+      }
+      var currentContainer = scrollContainer;
+      if (currentContainer === window) {
+        window.removeEventListener('scroll', onScroll);
+      } else {
+        currentContainer.removeEventListener('scroll', onScroll);
+      }
+    };
+  }
+  return {
+    scrollTo: scrollTo,
+    updateActive: updateActive,
+    init: init,
+    isScrolling: isScrolling,
+    set setIsSettingFromScroll(fn) {
+      setIsSettingFromScroll = fn;
+    }
+  };
+}

package/components/bubble/bubble.d.ts

@@ -0,0 +1,61 @@
+import { Component, TypeDefs } from 'intact-vue-next';
+import type { Events } from '../types';
+export interface BubbleTyping {
+    interval?: number;
+    step?: number;
+}
+export interface BubbleRenderSlots {
+    avatar?: Function;
+    roleName?: Function;
+    beforeContent?: Function;
+    attachments?: Function;
+    content?: Function;
+    bottom?: Function;
+    footer?: Function;
+    loading?: Function;
+    extra?: Function;
+}
+export type BubbleRenderSlotName = keyof BubbleRenderSlots;
+export interface BubbleProps {
+    content?: string | number;
+    placement?: 'start' | 'middle' | 'end';
+    avatar?: string | boolean;
+    roleName?: string;
+    loading?: boolean;
+    streaming?: boolean;
+    variant?: 'filled' | 'outlined' | 'plain';
+    shape?: 'round' | 'square' | 'corner';
+    maxWidthString?: string;
+    typing?: boolean | BubbleTyping;
+}
+interface BubbleInternalProps extends BubbleProps {
+    slotRenderers?: BubbleRenderSlots;
+}
+export interface BubbleEvents {
+    typing: [string, string];
+    typingComplete: [string];
+}
+export interface BubbleBlocks {
+    avatar: null;
+    roleName: null;
+    beforeContent: null;
+    attachments: null;
+    content: null;
+    bottom: null;
+    footer: null;
+    loading: null;
+    extra: null;
+}
+export declare class Bubble extends Component<BubbleInternalProps, BubbleEvents, BubbleBlocks> {
+    static template: string | import('intact-vue-next').Template<any>;
+    static typeDefs: Required<TypeDefs<BubbleInternalProps>>;
+    static defaults: () => Partial<BubbleProps>;
+    static events: Events<BubbleEvents>;
+    private config;
+    private display;
+    private getSlotRenderer;
+    private getSlotRenderers;
+    mounted(): void;
+    beforeUnmount(): void;
+}
+export {};

package/components/bubble/bubble.js

@@ -0,0 +1,81 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import { Component } from 'intact-vue-next';
+import template from './bubble.vdt';
+import { useConfigContext } from '../config';
+import { useBubbleDisplay } from './useBubbleDisplay';
+var BUBBLE_RENDER_SLOT_NAMES = ['avatar', 'roleName', 'beforeContent', 'attachments', 'content', 'bottom', 'footer', 'loading', 'extra'];
+var typeDefs = {
+  content: [String, Number],
+  placement: ['start', 'middle', 'end'],
+  avatar: [Boolean, String],
+  roleName: String,
+  loading: Boolean,
+  streaming: Boolean,
+  variant: ['filled', 'outlined', 'plain'],
+  shape: ['round', 'square', 'corner'],
+  maxWidthString: String,
+  typing: [Boolean, Object]
+};
+var internalTypeDefs = _extends({}, typeDefs, {
+  slotRenderers: Object
+});
+var defaults = function defaults() {
+  return {
+    placement: 'start',
+    avatar: false,
+    roleName: undefined,
+    loading: false,
+    streaming: false,
+    variant: 'filled',
+    shape: 'square',
+    maxWidthString: '640px',
+    typing: false
+  };
+};
+var events = {
+  typing: true,
+  typingComplete: true
+};
+export var Bubble = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(Bubble, _Component);
+  function Bubble() {
+    var _context;
+    var _this;
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
+    _this.config = useConfigContext();
+    _this.display = useBubbleDisplay();
+    return _this;
+  }
+  var _proto = Bubble.prototype;
+  // React/Vue 包装层通过 slotRenderers 传入插槽，Intact 原生插槽仍走 $blocks。
+  _proto.getSlotRenderer = function getSlotRenderer(name) {
+    var slotRenderers = this.get('slotRenderers');
+    return slotRenderers && slotRenderers[name] ? slotRenderers[name] : undefined;
+  };
+  _proto.getSlotRenderers = function getSlotRenderers() {
+    var _this2 = this;
+    return BUBBLE_RENDER_SLOT_NAMES.reduce(function (slotRenderers, name) {
+      var renderer = _this2.getSlotRenderer(name);
+      if (renderer) {
+        slotRenderers[name] = renderer;
+      }
+      return slotRenderers;
+    }, {});
+  };
+  _proto.mounted = function mounted() {
+    this.display.onMounted();
+  };
+  _proto.beforeUnmount = function beforeUnmount() {
+    this.display.onBeforeUnmount();
+  };
+  return Bubble;
+}(Component);
+Bubble.template = template;
+Bubble.typeDefs = internalTypeDefs;
+Bubble.defaults = defaults;
+Bubble.events = events;

package/components/bubble/bubble.vdt.js

@@ -0,0 +1,85 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import { createVNode as _$cv, className as _$cn, createElementVNode as _$ce, createUnknownComponentVNode as _$cc } from 'intact-vue-next';
+import { Icon } from '../icon';
+import { isInvalid } from 'intact-shared';
+import { getRestProps, isEmptyString } from '../utils';
+import { makeStyles } from './styles';
+var _$tmp0 = {
+  'className': 'ion-person'
+};
+export default function ($props, $blocks, $__proto__) {
+  var _classNameObj;
+  $blocks || ($blocks = {});
+  $props || ($props = {});
+  var $this = this;
+  var _this$display = this.display,
+    shouldShowLoadingShell = _this$display.shouldShowLoadingShell,
+    shouldShowAvatar = _this$display.shouldShowAvatar,
+    hasRoleName = _this$display.hasRoleName,
+    shouldShowContentBlock = _this$display.shouldShowContentBlock,
+    getBubbleStyle = _this$display.getBubbleStyle,
+    getRoleNameText = _this$display.getRoleNameText,
+    getAvatarText = _this$display.getAvatarText,
+    hasNonEmptyContentProp = _this$display.hasNonEmptyContentProp,
+    getDisplayedContent = _this$display.getDisplayedContent;
+  var _this$get = this.get(),
+    className = _this$get.className,
+    placement = _this$get.placement,
+    avatar = _this$get.avatar,
+    variant = _this$get.variant,
+    shape = _this$get.shape,
+    children = _this$get.children;
+  var k = this.config.k;
+  var showLoadingShell = shouldShowLoadingShell();
+  var slotRenderers = this.getSlotRenderers();
+  var renderSlot = function renderSlot(name) {
+    if (slotRenderers[name]) return slotRenderers[name]();
+    if ($blocks[name]) return $blocks[name](function () {
+      return undefined;
+    });
+  };
+  var isEmptySlot = function isEmptySlot(value) {
+    if (isInvalid(value) || isEmptyString(value)) return true;
+    if (Array.isArray(value)) return value.every(function (item) {
+      return isEmptySlot(item);
+    });
+    if (value.type === 1) return isEmptySlot(value.children);
+    return false;
+  };
+  var avatarSlot = renderSlot('avatar');
+  var roleNameSlot = renderSlot('roleName');
+  var beforeContentSlot = renderSlot('beforeContent');
+  var attachmentsSlot = renderSlot('attachments');
+  var contentSlot = showLoadingShell ? undefined : renderSlot('content');
+  var bottomSlot = renderSlot('bottom');
+  var footerSlot = renderSlot('footer');
+  var loadingSlot = showLoadingShell ? renderSlot('loading') : undefined;
+  var extraSlot = renderSlot('extra');
+  var hasAvatarSlot = !isEmptySlot(avatarSlot);
+  var hasRoleNameSlot = !isEmptySlot(roleNameSlot);
+  var hasBeforeContentSlot = !isEmptySlot(beforeContentSlot);
+  var hasAttachmentsSlot = !isEmptySlot(attachmentsSlot);
+  var hasContentSlot = !isEmptySlot(contentSlot);
+  var hasBottomSlot = !isEmptySlot(bottomSlot);
+  var hasFooterSlot = !isEmptySlot(footerSlot);
+  var hasLoadingSlot = !isEmptySlot(loadingSlot);
+  var hasExtraSlot = !isEmptySlot(extraSlot);
+  var showAvatar = hasAvatarSlot || shouldShowAvatar();
+  var showHeader = hasRoleNameSlot || hasRoleName();
+  var showBeforeContent = hasBeforeContentSlot;
+  var showAttachments = hasAttachmentsSlot;
+  var showContent = showAttachments || hasContentSlot || !!children || shouldShowContentBlock();
+  var showFooter = hasFooterSlot;
+  var showBubble = showBeforeContent || showContent || showFooter;
+  var showMeta = (showBeforeContent || showContent) && (showAvatar || showHeader);
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-bubble"] = true, _classNameObj[k + "-bubble-" + placement] = true, _classNameObj[k + "-bubble-" + variant] = true, _classNameObj[k + "-bubble-" + shape] = true, _classNameObj[className] = className, _classNameObj[makeStyles(k)] = true, _classNameObj);
+  return showBubble ? _$cv('div', _extends({
+    'className': _$cn(classNameObj)
+  }, getRestProps(this)), _$ce(2, 'div', [showMeta ? _$ce(2, 'div', [showAvatar ? _$ce(2, 'div', hasAvatarSlot ? avatarSlot : typeof avatar === 'string' && avatar ? _$ce(2, 'img', null, 1, _$cn(k + "-bubble-avatar-image"), {
+    'src': avatar,
+    'alt': getRoleNameText() || 'avatar'
+  }) : getAvatarText() ? _$ce(2, 'span', getAvatarText(), 0) : _$cc(Icon, _$tmp0), 0, _$cn(k + "-bubble-avatar")) : undefined, showHeader ? _$ce(2, 'div', hasRoleNameSlot ? roleNameSlot : _$ce(2, 'span', getRoleNameText(), 0), 0, _$cn(k + "-bubble-header")) : undefined], 0, _$cn(k + "-bubble-meta")) : undefined, showBeforeContent ? _$ce(2, 'div', beforeContentSlot, 0, _$cn(k + "-bubble-before-content")) : undefined, showContent ? _$ce(2, 'div', [showAttachments ? _$ce(2, 'div', attachmentsSlot, 0, _$cn(k + "-bubble-attachments")) : undefined, showLoadingShell ? hasLoadingSlot ? loadingSlot : _$ce(2, 'div', [_$ce(2, 'span', null, 1, _$cn(k + "-bubble-loading-dot")), _$ce(2, 'span', null, 1, _$cn(k + "-bubble-loading-dot")), _$ce(2, 'span', null, 1, _$cn(k + "-bubble-loading-dot"))], 4, _$cn(k + "-bubble-loading")) : hasContentSlot ? contentSlot : children ? children : hasNonEmptyContentProp() || getDisplayedContent() ? _$ce(2, 'div', getDisplayedContent(), 0, _$cn(k + "-bubble-text")) : undefined, hasBottomSlot ? _$ce(2, 'div', bottomSlot, 0, _$cn(k + "-bubble-bottom")) : undefined], 0, _$cn(k + "-bubble-content")) : undefined, showFooter ? _$ce(2, 'div', footerSlot, 0, _$cn(k + "-bubble-footer")) : undefined, hasExtraSlot ? _$ce(2, 'div', extraSlot, 0, _$cn(k + "-bubble-extra")) : undefined], 0, _$cn(k + "-bubble-main"), {
+    'style': getBubbleStyle()
+  })) : undefined;
+}
+;

package/components/bubble/index.d.ts

@@ -0,0 +1 @@
+export * from './bubble';

package/components/bubble/index.js

@@ -0,0 +1 @@
+export * from './bubble';

package/components/bubble/index.spec.d.ts

@@ -0,0 +1 @@
+export {};