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

package/components/media/useMedia.js

@@ -0,0 +1,471 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import { createRef, nextTick, onMounted, onUnmounted, useInstance } from 'intact-vue-next';
+import { useConfigContext } from '../config';
+import { MediaGroupContext } from './context';
+import { getMediaDisplayName, isNamedMediaSize, normalizeMediaLength, parseMediaPixelLength, resolveMediaType } from './mediaUtils';
+import { mediaAudioCardErrorUrl, mediaAudioCardUrl, mediaImageCardErrorUrl, mediaVideoCardErrorUrl } from './mediaAssets';
+export function useMedia() {
+  var instance = useInstance();
+  var config = useConfigContext();
+  var group = MediaGroupContext.useContext();
+  var imageRef = createRef();
+  var videoRef = createRef();
+  var audioRef = createRef();
+  var syncTimer;
+  onMounted(function () {
+    var _group$value;
+    (_group$value = group.value) == null || _group$value.register(instance, {
+      canPreview: canPreview,
+      getViewerItem: getViewerItem
+    });
+    nextTick(scheduleNativeStatusSync);
+  });
+  onUnmounted(function () {
+    var _group$value2;
+    (_group$value2 = group.value) == null || _group$value2.unregister(instance);
+    clearNativeStatusSync();
+  });
+  // 根据显式类型或文件名推断媒体类型，兜底为图片。
+  function getResolvedType() {
+    var _instance$get = instance.get(),
+      name = _instance$get.name,
+      type = _instance$get.type,
+      src = _instance$get.src;
+    return resolveMediaType(type, name, src);
+  }
+  // 统一得到展示名称，优先使用 name，其次从 src 中提取。
+  function getFileName() {
+    var _instance$get2 = instance.get(),
+      name = _instance$get2.name,
+      src = _instance$get2.src;
+    return getMediaDisplayName(name, src);
+  }
+  function hasSource() {
+    return !!instance.get('src');
+  }
+  function getInternalStatus() {
+    var status = instance.get('$status');
+    if (status) return status;
+    return hasSource() ? 'loading' : 'default';
+  }
+  // status 属性非 default 时视为外部受控状态。
+  function getDisplayStatus() {
+    var status = instance.get('status');
+    if (status && status !== 'default') return status;
+    return getInternalStatus();
+  }
+  // 更新内部状态，并在离开 loading 后停止原生状态同步。
+  function setInternalStatus(status) {
+    instance.set('$status', status);
+    if (status !== 'loading') clearNativeStatusSync();
+  }
+  // 资源身份变化后重新进入初始加载状态。
+  function resetInternalStatus() {
+    setInternalStatus(hasSource() ? 'loading' : 'default');
+    nextTick(scheduleNativeStatusSync);
+  }
+  function isLoading() {
+    return getDisplayStatus() === 'loading';
+  }
+  function isError() {
+    return getDisplayStatus() === 'error';
+  }
+  function isDone() {
+    return getDisplayStatus() === 'done';
+  }
+  // 自定义遮罩层仅在 default/done 展示，避免与 loading/error 状态层冲突。
+  function shouldShowMaskLayer() {
+    var status = getDisplayStatus();
+    return status === 'default' || status === 'done';
+  }
+  function canPreview() {
+    return !!instance.get('showPreview') && hasSource() && isDone();
+  }
+  function shouldShowVideoPlayTrigger() {
+    return !!instance.get('showPreview') && shouldShowVideo();
+  }
+  // 事件和插槽使用的公共媒体信息。
+  function getValue() {
+    return {
+      name: instance.get('name'),
+      type: instance.get('type'),
+      resolvedType: getResolvedType(),
+      status: getDisplayStatus(),
+      src: instance.get('src'),
+      poster: instance.get('poster'),
+      size: instance.get('size') || 'default'
+    };
+  }
+  // 预览层使用展示名称，避免无 name 时标题为空。
+  function getViewerItem() {
+    return _extends({}, getValue(), {
+      name: getFileName()
+    });
+  }
+  // mask 插槽可通过 preview(event) 主动触发预览。
+  function getMaskValue() {
+    return _extends({}, getViewerItem(), {
+      canPreview: canPreview(),
+      preview: onPreview
+    });
+  }
+  // 根节点类名集中由状态、类型、尺寸和预览能力决定。
+  function getRootClassNameObj() {
+    var _ref;
+    var k = config.k;
+    var size = instance.get('size');
+    var resolvedType = getResolvedType();
+    return _ref = {}, _ref[k + "-media"] = true, _ref[k + "-media-" + resolvedType] = true, _ref[k + "-media-" + size] = isNamedMediaSize(size), _ref[k + "-media-" + getDisplayStatus()] = true, _ref[k + "-media-previewable"] = canPreview(), _ref[k + "-media-video-play-visible"] = shouldShowVideoPlayTrigger(), _ref;
+  }
+  // 只传单边宽高时镜像另一边，保持默认正方形语义。
+  function getRootStyle() {
+    var size = instance.get('size');
+    var width = instance.get('width');
+    var height = instance.get('height');
+    var style = {};
+    var normalizedWidth = normalizeMediaLength(width);
+    var normalizedHeight = normalizeMediaLength(height);
+    if (normalizedWidth || normalizedHeight) {
+      style.width = normalizedWidth || normalizedHeight;
+      style.height = normalizedHeight || normalizedWidth;
+      return style;
+    }
+    if (typeof size === 'number') {
+      style.width = size + "px";
+      style.height = size + "px";
+      return style;
+    }
+    if (typeof size === 'string' && !isNamedMediaSize(size)) {
+      style.width = size;
+      style.height = size;
+    }
+    return style;
+  }
+  function shouldShowImage() {
+    return getResolvedType() === 'image' && hasSource() && !isError();
+  }
+  function shouldShowVideo() {
+    return getResolvedType() === 'video' && hasSource() && !isError();
+  }
+  function shouldShowAudioLoader() {
+    return getResolvedType() === 'audio' && hasSource() && !isError();
+  }
+  function shouldShowAudioCard() {
+    return getResolvedType() === 'audio';
+  }
+  function shouldShowErrorCard() {
+    return isError();
+  }
+  function shouldShowPlaceholder() {
+    return !shouldShowImage() && !shouldShowVideo() && !shouldShowErrorCard();
+  }
+  // poster 是组件级视频封面，不从 videoProps 中读取。
+  function getPosterSource() {
+    var poster = instance.get('poster');
+    if (poster) return poster;
+    return '';
+  }
+  function hasVideoPoster() {
+    return !!getPosterSource();
+  }
+  function getAudioCardAssetSrc() {
+    return mediaAudioCardUrl;
+  }
+  function getErrorCardAssetSrc() {
+    var type = getResolvedType();
+    if (type === 'video') return mediaVideoCardErrorUrl;
+    if (type === 'audio') return mediaAudioCardErrorUrl;
+    return mediaImageCardErrorUrl;
+  }
+  function getMediaCardIconStyle() {
+    var _instance$get3 = instance.get(),
+      size = _instance$get3.size,
+      width = _instance$get3.width,
+      height = _instance$get3.height;
+    var widthPx = parseMediaPixelLength(width);
+    var heightPx = parseMediaPixelLength(height);
+    var shortest;
+    if (widthPx !== undefined || heightPx !== undefined) {
+      var resolvedWidth = widthPx === undefined ? heightPx : widthPx;
+      var resolvedHeight = heightPx === undefined ? widthPx : heightPx;
+      shortest = Math.min(resolvedWidth, resolvedHeight);
+    } else if (size !== 'mini' && size !== 'small' && size !== 'default' && size !== 'large') {
+      shortest = parseMediaPixelLength(size);
+    }
+    if (shortest !== undefined && shortest > 0 && shortest < 32) {
+      return {
+        width: shortest + "px",
+        height: shortest + "px"
+      };
+    }
+    return undefined;
+  }
+  function shouldShowLoadingIndicator() {
+    return isLoading();
+  }
+  // 去掉已被组件接管的事件键，避免作为普通 attribute 透传到 DOM。
+  function omitNativeHandlers(props, keys) {
+    var nextProps = _extends({}, props);
+    keys.forEach(function (key) {
+      return delete nextProps[key];
+    });
+    return nextProps;
+  }
+  // 内部状态先于用户回调更新，保证事件触发时状态已同步。
+  function getMergedNativeHandler(props, key, internalHandler) {
+    var handler = props[key];
+    if (typeof handler !== 'function') return internalHandler;
+    return function (e) {
+      internalHandler(e);
+      handler(e);
+    };
+  }
+  // src 是组件级资源属性，imageProps 只补充原生属性。
+  function getImageProps() {
+    var imageProps = instance.get('imageProps') || {};
+    var loadKey = 'onload';
+    var errorKey = 'onerror';
+    return _extends({}, omitNativeHandlers(imageProps, [loadKey, errorKey]), {
+      alt: getFileName(),
+      src: instance.get('src') || '',
+      draggable: false,
+      'ev-load': getMergedNativeHandler(imageProps, loadKey, onImageLoad),
+      'ev-error': getMergedNativeHandler(imageProps, errorKey, onImageError)
+    });
+  }
+  // src/poster 是组件级资源属性，videoProps 只补充原生行为。
+  function getVideoProps() {
+    var videoProps = instance.get('videoProps') || {};
+    var loadedmetadataKey = 'onloadedmetadata';
+    var loadeddataKey = 'onloadeddata';
+    var canplayKey = 'oncanplay';
+    var errorKey = 'onerror';
+    return _extends({
+      preload: hasVideoPoster() ? 'metadata' : 'auto',
+      muted: true,
+      playsinline: true,
+      controls: false,
+      tabindex: -1
+    }, omitNativeHandlers(videoProps, [loadedmetadataKey, loadeddataKey, canplayKey, errorKey]), {
+      src: instance.get('src') || '',
+      poster: getPosterSource() || undefined,
+      'ev-loadedmetadata': getMergedNativeHandler(videoProps, loadedmetadataKey, onVideoMetadataLoad),
+      'ev-loadeddata': getMergedNativeHandler(videoProps, loadeddataKey, onVideoDataLoad),
+      'ev-canplay': getMergedNativeHandler(videoProps, canplayKey, onVideoDataLoad),
+      'ev-error': getMergedNativeHandler(videoProps, errorKey, onVideoError)
+    });
+  }
+  // src/poster 改变时重建 video，避免浏览器保留旧封面或首帧。
+  function getVideoKey() {
+    return [instance.get('src') || '', getPosterSource() || ''].join('|');
+  }
+  // 音频 loader 只负责 metadata 加载，展示由音频卡片承接。
+  function getAudioLoaderProps() {
+    var audioProps = instance.get('audioProps') || {};
+    var loadedmetadataKey = 'onloadedmetadata';
+    var errorKey = 'onerror';
+    return _extends({
+      preload: 'metadata'
+    }, omitNativeHandlers(audioProps, [loadedmetadataKey, errorKey]), {
+      src: instance.get('src') || '',
+      'ev-loadedmetadata': getMergedNativeHandler(audioProps, loadedmetadataKey, onAudioLoad),
+      'ev-error': getMergedNativeHandler(audioProps, errorKey, onAudioError)
+    });
+  }
+  function getPreviewIconClassName() {
+    return getResolvedType() === 'image' ? 'ion-ios-eye-outline' : 'ion-ios-play';
+  }
+  function getPlaceholderIconClassName() {
+    var resolvedType = getResolvedType();
+    if (resolvedType === 'video') return 'ion-videocamera';
+    if (resolvedType === 'audio') return 'ion-ios-musical-note';
+    return 'ion-image';
+  }
+  function getPreviewTitle() {
+    var resolvedType = getResolvedType();
+    if (resolvedType === 'video') return '播放视频';
+    if (resolvedType === 'audio') return '播放音频';
+    return '查看图片';
+  }
+  // 单项预览在自身维护显隐，分组内则交给 MediaGroup 管理。
+  function isStandalonePreviewVisible() {
+    return !group.value && !!instance.get('$previewVisible');
+  }
+  // 关闭动画结束前保留预览节点，避免过早卸载。
+  function isStandalonePreviewRendered() {
+    return !group.value && !!instance.get('$previewRendered');
+  }
+  function showStandalonePreview() {
+    instance.set({
+      $previewRendered: true,
+      $previewVisible: true
+    });
+  }
+  function closeStandalonePreview() {
+    instance.set('$previewVisible', false);
+  }
+  function afterStandalonePreviewClose() {
+    instance.set('$previewRendered', false);
+  }
+  function onClick(e) {
+    instance.trigger('click', getValue(), e);
+  }
+  // 兼容 Intact 原生事件与 React 合成事件，统一触发预览。
+  function onPreview(e) {
+    if (e && typeof e.stopPropagation === 'function') {
+      e.stopPropagation();
+    }
+    if (!canPreview()) return;
+    // 分组预览统一交给 Group，保证导航停留在同一个 Viewer。
+    if (group.value) {
+      group.value.open(instance);
+    } else {
+      showStandalonePreview();
+    }
+    var nativeEvent = e && (e.nativeEvent || e);
+    instance.trigger('preview', getViewerItem(), nativeEvent);
+  }
+  function setDone(e) {
+    var isFirstDone = getInternalStatus() !== 'done';
+    setInternalStatus('done');
+    if (isFirstDone) instance.trigger('load', getValue(), e);
+  }
+  function setError(e) {
+    var isFirstError = getInternalStatus() !== 'error';
+    setInternalStatus('error');
+    if (isFirstError) instance.trigger('loadError', getValue(), e);
+  }
+  function onImageLoad(e) {
+    setDone(e);
+  }
+  function onImageError(e) {
+    setError(e);
+  }
+  // 有封面时 metadata 足够展示；无封面时等首帧数据。
+  function onVideoMetadataLoad(e) {
+    if (hasVideoPoster()) {
+      setDone(e);
+    } else {
+      scheduleNativeStatusSync();
+    }
+  }
+  function onVideoDataLoad(e) {
+    setDone(e);
+  }
+  function onVideoError(e) {
+    setError(e);
+  }
+  function onAudioLoad(e) {
+    setDone(e);
+  }
+  function onAudioError(e) {
+    setError(e);
+  }
+  function clearNativeStatusSync() {
+    if (syncTimer === undefined) return;
+    clearTimeout(syncTimer);
+    syncTimer = undefined;
+  }
+  // 缓存媒体可能错过原生事件，loading 期间读取 DOM ready 状态兜底。
+  function scheduleNativeStatusSync() {
+    clearNativeStatusSync();
+    syncNativeStatus();
+    if (!hasSource() || getInternalStatus() !== 'loading') return;
+    syncTimer = window.setTimeout(scheduleNativeStatusSync, 120);
+  }
+  // 将自动状态同步到原生媒体元素的当前 ready/error 状态。
+  function syncNativeStatus() {
+    if (!hasSource() || getInternalStatus() !== 'loading') return;
+    var resolvedType = getResolvedType();
+    if (resolvedType === 'image') {
+      var image = imageRef.value;
+      if (!image || !image.complete) return;
+      if (image.naturalWidth || image.naturalHeight) {
+        setDone(new Event('load'));
+      } else {
+        setError(new Event('error'));
+      }
+      return;
+    }
+    if (resolvedType === 'video') {
+      var video = videoRef.value;
+      if (!video) return;
+      if (video.error) {
+        setError(new Event('error'));
+      } else if (video.readyState >= (hasVideoPoster() ? 1 : 2)) {
+        setDone(new Event('load'));
+      }
+      return;
+    }
+    if (resolvedType === 'audio') {
+      var audio = audioRef.value;
+      if (!audio) return;
+      if (audio.error) {
+        setError(new Event('error'));
+      } else if (audio.readyState >= 1) {
+        setDone(new Event('load'));
+      }
+    }
+  }
+  // 资源身份变化重启加载；纯展示类属性变化不重置状态。
+  function bootstrap() {
+    instance.set({
+      $previewRendered: false,
+      $previewVisible: false,
+      $status: hasSource() ? 'loading' : 'default'
+    }, {
+      silent: true
+    });
+    instance.watch('src', resetInternalStatus, {
+      inited: true
+    });
+    instance.watch('type', resetInternalStatus, {
+      inited: true
+    });
+    instance.watch('poster', resetInternalStatus, {
+      inited: true
+    });
+  }
+  bootstrap();
+  return {
+    getRootClassNameObj: getRootClassNameObj,
+    getRootStyle: getRootStyle,
+    getFileName: getFileName,
+    getValue: getValue,
+    getViewerItem: getViewerItem,
+    getMaskValue: getMaskValue,
+    getDisplayStatus: getDisplayStatus,
+    isLoading: isLoading,
+    isError: isError,
+    isDone: isDone,
+    shouldShowLoadingIndicator: shouldShowLoadingIndicator,
+    shouldShowImage: shouldShowImage,
+    shouldShowVideo: shouldShowVideo,
+    shouldShowPlaceholder: shouldShowPlaceholder,
+    shouldShowAudioLoader: shouldShowAudioLoader,
+    shouldShowAudioCard: shouldShowAudioCard,
+    shouldShowErrorCard: shouldShowErrorCard,
+    imageRef: imageRef,
+    videoRef: videoRef,
+    audioRef: audioRef,
+    getImageProps: getImageProps,
+    getVideoProps: getVideoProps,
+    getVideoKey: getVideoKey,
+    getAudioLoaderProps: getAudioLoaderProps,
+    getAudioCardAssetSrc: getAudioCardAssetSrc,
+    getErrorCardAssetSrc: getErrorCardAssetSrc,
+    getMediaCardIconStyle: getMediaCardIconStyle,
+    getPreviewIconClassName: getPreviewIconClassName,
+    getPlaceholderIconClassName: getPlaceholderIconClassName,
+    getPreviewTitle: getPreviewTitle,
+    onClick: onClick,
+    onPreview: onPreview,
+    canPreview: canPreview,
+    shouldShowVideoPlayTrigger: shouldShowVideoPlayTrigger,
+    shouldShowMaskLayer: shouldShowMaskLayer,
+    isStandalonePreviewRendered: isStandalonePreviewRendered,
+    isStandalonePreviewVisible: isStandalonePreviewVisible,
+    closeStandalonePreview: closeStandalonePreview,
+    afterStandalonePreviewClose: afterStandalonePreviewClose
+  };
+}

package/components/media/useMediaGroup.d.ts

@@ -0,0 +1,15 @@
+import type { MediaGroupContextValue } from './types';
+export declare function useMediaGroup(): {
+    getContextValue: () => MediaGroupContextValue;
+    isPreviewRendered: () => boolean;
+    isPreviewVisible: () => boolean;
+    getActiveViewerItem: () => import("./types").MediaViewerItem | null;
+    getActiveIndex: () => any;
+    getPreviewCount: () => number;
+    hasPrev: () => boolean;
+    hasNext: () => boolean;
+    close: () => void;
+    afterClose: () => void;
+    prev: () => void;
+    next: () => void;
+};

package/components/media/useMediaGroup.js

@@ -0,0 +1,136 @@
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js/instance/filter";
+import _findIndexInstanceProperty from "@babel/runtime-corejs3/core-js/instance/find-index";
+import _spliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/splice";
+import { useInstance } from 'intact-vue-next';
+export function useMediaGroup() {
+  var instance = useInstance();
+  var items = [];
+  // 分组导航只包含当前真正可预览的媒体项。
+  function getPreviewableItems() {
+    return _filterInstanceProperty(items).call(items, function (item) {
+      return item.api.canPreview();
+    });
+  }
+  function getActiveIndex() {
+    return instance.get('$activeIndex') || 0;
+  }
+  function setActiveIndex(activeIndex) {
+    instance.set('$activeIndex', activeIndex);
+  }
+  function isPreviewVisible() {
+    return !!instance.get('$previewVisible');
+  }
+  function setPreviewVisible(value) {
+    instance.set('$previewVisible', value);
+  }
+  function isPreviewRendered() {
+    return !!instance.get('$previewRendered');
+  }
+  function setPreviewRendered(value) {
+    instance.set('$previewRendered', value);
+  }
+  // 子 Media 挂载时注册，顺序跟随组件挂载顺序。
+  function register(media, api) {
+    if (!items.some(function (item) {
+      return item.media === media;
+    })) {
+      items.push({
+        media: media,
+        api: api
+      });
+    }
+  }
+  // 子项卸载后修正当前下标，避免预览指向空项。
+  function unregister(media) {
+    var index = _findIndexInstanceProperty(items).call(items, function (item) {
+      return item.media === media;
+    });
+    if (index < 0) return;
+    _spliceInstanceProperty(items).call(items, index, 1);
+    var previewableItems = getPreviewableItems();
+    if (!previewableItems.length) {
+      setPreviewVisible(false);
+      setActiveIndex(0);
+      return;
+    }
+    if (getActiveIndex() >= previewableItems.length) {
+      setActiveIndex(previewableItems.length - 1);
+    }
+  }
+  // 打开被点击的媒体，并把 Viewer 维持在分组层。
+  function open(media) {
+    var previewableItems = getPreviewableItems();
+    var index = _findIndexInstanceProperty(previewableItems).call(previewableItems, function (item) {
+      return item.media === media;
+    });
+    if (index < 0) return;
+    setActiveIndex(index);
+    setPreviewRendered(true);
+    setPreviewVisible(true);
+  }
+  function close() {
+    setPreviewVisible(false);
+  }
+  // 等关闭动画完成后再卸载 Viewer。
+  function afterClose() {
+    setPreviewRendered(false);
+  }
+  function prev() {
+    var current = getActiveIndex();
+    if (current <= 0) return;
+    setActiveIndex(current - 1);
+  }
+  function next() {
+    var previewableItems = getPreviewableItems();
+    var current = getActiveIndex();
+    if (current >= previewableItems.length - 1) return;
+    setActiveIndex(current + 1);
+  }
+  function getActiveItem() {
+    return getPreviewableItems()[getActiveIndex()] || null;
+  }
+  // Viewer 只需要媒体快照，不直接依赖子组件实例。
+  function getActiveViewerItem() {
+    var item = getActiveItem();
+    return item ? item.api.getViewerItem() : null;
+  }
+  function hasPrev() {
+    return getActiveIndex() > 0;
+  }
+  function hasNext() {
+    var previewableItems = getPreviewableItems();
+    return getActiveIndex() < previewableItems.length - 1;
+  }
+  function getPreviewCount() {
+    return getPreviewableItems().length;
+  }
+  // 通过 Context 向子 Media 暴露分组预览能力。
+  function getContextValue() {
+    return {
+      register: register,
+      unregister: unregister,
+      open: open
+    };
+  }
+  instance.set({
+    $previewRendered: false,
+    $previewVisible: false,
+    $activeIndex: 0
+  }, {
+    silent: true
+  });
+  return {
+    getContextValue: getContextValue,
+    isPreviewRendered: isPreviewRendered,
+    isPreviewVisible: isPreviewVisible,
+    getActiveViewerItem: getActiveViewerItem,
+    getActiveIndex: getActiveIndex,
+    getPreviewCount: getPreviewCount,
+    hasPrev: hasPrev,
+    hasNext: hasNext,
+    close: close,
+    afterClose: afterClose,
+    prev: prev,
+    next: next
+  };
+}

package/components/media/useMediaViewer.d.ts

@@ -0,0 +1,14 @@
+export declare function useMediaViewer(): {
+    onMaskClick: () => void;
+    onCloseClick: (e: MouseEvent) => void;
+    onPrevClick: (e: MouseEvent) => void;
+    onNextClick: (e: MouseEvent) => void;
+    onAfterLeave: () => void;
+    isImage: () => boolean;
+    isVideo: () => boolean;
+    isAudio: () => boolean;
+    getTitle: () => string;
+    getCounterText: () => string;
+    shouldShowNavigation: () => boolean;
+    getAudioCardAssetSrc: () => string;
+};