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

package/components/media/useMediaViewer.js

@@ -0,0 +1,129 @@
+import { onMounted, onUnmounted, useInstance } from 'intact-vue-next';
+import { useFixBody } from '../../hooks/useFixBody';
+import { mediaAudioCardUrl } from './mediaAssets';
+export function useMediaViewer() {
+  var instance = useInstance();
+  var fixBody = useFixBody();
+  var isListening = false;
+  function close() {
+    var onClose = instance.get('onClose');
+    if (onClose) onClose();
+  }
+  function prev() {
+    var onPrev = instance.get('onPrev');
+    if (onPrev && instance.get('hasPrev')) onPrev();
+  }
+  function next() {
+    var onNext = instance.get('onNext');
+    if (onNext && instance.get('hasNext')) onNext();
+  }
+  // 预览层支持 Esc 关闭和左右方向键切换。
+  function onKeydown(e) {
+    switch (e.keyCode) {
+      case 27:
+        close();
+        break;
+      case 37:
+        prev();
+        break;
+      case 39:
+        next();
+        break;
+    }
+  }
+  // 避免重复绑定全局键盘事件。
+  function addKeydownListener() {
+    if (isListening) return;
+    document.addEventListener('keydown', onKeydown);
+    isListening = true;
+  }
+  // Viewer 不可见或卸载时及时移除全局监听。
+  function removeKeydownListener() {
+    if (!isListening) return;
+    document.removeEventListener('keydown', onKeydown);
+    isListening = false;
+  }
+  onMounted(function () {
+    if (instance.get('value')) {
+      fixBody.onOpen();
+      addKeydownListener();
+    }
+  });
+  onUnmounted(function () {
+    removeKeydownListener();
+    fixBody.onClose();
+  });
+  instance.watch('value', function (value) {
+    if (value) {
+      fixBody.onOpen();
+      addKeydownListener();
+    } else {
+      removeKeydownListener();
+    }
+  });
+  // 点击遮罩关闭，内容区域在模板中会阻止冒泡。
+  function onMaskClick() {
+    close();
+  }
+  function onCloseClick(e) {
+    e.stopPropagation();
+    close();
+  }
+  function onPrevClick(e) {
+    e.stopPropagation();
+    prev();
+  }
+  function onNextClick(e) {
+    e.stopPropagation();
+    next();
+  }
+  function isImage() {
+    var _instance$get;
+    return ((_instance$get = instance.get('item')) == null ? void 0 : _instance$get.resolvedType) === 'image';
+  }
+  function isVideo() {
+    var _instance$get2;
+    return ((_instance$get2 = instance.get('item')) == null ? void 0 : _instance$get2.resolvedType) === 'video';
+  }
+  function isAudio() {
+    var _instance$get3;
+    return ((_instance$get3 = instance.get('item')) == null ? void 0 : _instance$get3.resolvedType) === 'audio';
+  }
+  function getTitle() {
+    var _instance$get4;
+    return ((_instance$get4 = instance.get('item')) == null ? void 0 : _instance$get4.name) || '';
+  }
+  function getCounterText() {
+    var total = instance.get('total') || 0;
+    if (total <= 1) return '';
+    return (instance.get('index') || 0) + 1 + " / " + total;
+  }
+  function shouldShowNavigation() {
+    return (instance.get('total') || 0) > 1;
+  }
+  function getAudioCardAssetSrc() {
+    return mediaAudioCardUrl;
+  }
+  // 离场动画完成后释放滚动锁并通知外层卸载。
+  function onAfterLeave() {
+    if (!instance.get('value')) {
+      fixBody.onClose();
+    }
+    var onAfterClose = instance.get('onAfterClose');
+    if (onAfterClose) onAfterClose();
+  }
+  return {
+    onMaskClick: onMaskClick,
+    onCloseClick: onCloseClick,
+    onPrevClick: onPrevClick,
+    onNextClick: onNextClick,
+    onAfterLeave: onAfterLeave,
+    isImage: isImage,
+    isVideo: isVideo,
+    isAudio: isAudio,
+    getTitle: getTitle,
+    getCounterText: getCounterText,
+    shouldShowNavigation: shouldShowNavigation,
+    getAudioCardAssetSrc: getAudioCardAssetSrc
+  };
+}

package/components/media/viewer.d.ts

@@ -0,0 +1,24 @@
+import { Component, TypeDefs } from 'intact-vue-next';
+import type { Container } from '../portal';
+import type { MediaViewerItem } from './types';
+export interface MediaViewerProps {
+    className?: string;
+    value?: boolean;
+    item?: MediaViewerItem | null;
+    index?: number;
+    total?: number;
+    hasPrev?: boolean;
+    hasNext?: boolean;
+    container?: Container;
+    onClose?: () => void;
+    onAfterClose?: () => void;
+    onPrev?: () => void;
+    onNext?: () => void;
+}
+export declare class MediaViewer extends Component<MediaViewerProps> {
+    static template: string | import('intact-vue-next').Template<any>;
+    static typeDefs: Required<TypeDefs<MediaViewerProps>>;
+    static defaults: () => Partial<MediaViewerProps>;
+    private config;
+    private viewer;
+}

package/components/media/viewer.js

@@ -0,0 +1,54 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import { Component } from 'intact-vue-next';
+import template from './viewer.vdt';
+import { useConfigContext } from '../config';
+import { useMediaViewer } from './useMediaViewer';
+var typeDefs = {
+  className: String,
+  value: Boolean,
+  item: Object,
+  index: Number,
+  total: Number,
+  hasPrev: Boolean,
+  hasNext: Boolean,
+  container: [String, Function],
+  onClose: Function,
+  onAfterClose: Function,
+  onPrev: Function,
+  onNext: Function
+};
+var defaults = function defaults() {
+  return {
+    className: undefined,
+    value: false,
+    item: null,
+    index: 0,
+    total: 0,
+    hasPrev: false,
+    hasNext: false,
+    container: undefined,
+    onClose: undefined,
+    onAfterClose: undefined,
+    onPrev: undefined,
+    onNext: undefined
+  };
+};
+export var MediaViewer = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(MediaViewer, _Component);
+  function MediaViewer() {
+    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.viewer = useMediaViewer();
+    return _this;
+  }
+  return MediaViewer;
+}(Component);
+MediaViewer.template = template;
+MediaViewer.typeDefs = typeDefs;
+MediaViewer.defaults = defaults;

package/components/media/viewer.vdt.js

@@ -0,0 +1,100 @@
+import { createUnknownComponentVNode as _$cc, createElementVNode as _$ce, className as _$cn } from 'intact-vue-next';
+import { Portal } from '../portal';
+import { Icon } from '../icon';
+import { Transition } from 'intact-vue-next';
+import { stopPropagation } from '../utils';
+export default function ($props, $blocks, $__proto__) {
+  var _$cn2;
+  $blocks || ($blocks = {});
+  $props || ($props = {});
+  var $this = this;
+  var _this$viewer = this.viewer,
+    onMaskClick = _this$viewer.onMaskClick,
+    onCloseClick = _this$viewer.onCloseClick,
+    onPrevClick = _this$viewer.onPrevClick,
+    onNextClick = _this$viewer.onNextClick,
+    onAfterLeave = _this$viewer.onAfterLeave,
+    isImage = _this$viewer.isImage,
+    isVideo = _this$viewer.isVideo,
+    isAudio = _this$viewer.isAudio,
+    getTitle = _this$viewer.getTitle,
+    getCounterText = _this$viewer.getCounterText,
+    shouldShowNavigation = _this$viewer.shouldShowNavigation,
+    getAudioCardAssetSrc = _this$viewer.getAudioCardAssetSrc;
+  var _this$get = this.get(),
+    item = _this$get.item,
+    hasPrev = _this$get.hasPrev,
+    hasNext = _this$get.hasNext,
+    container = _this$get.container,
+    value = _this$get.value;
+  var k = this.config.k;
+  var currentItem = item || {
+    name: '',
+    src: '',
+    poster: ''
+  };
+  return _$cc(Portal, {
+    'container': container,
+    'children': _$cc(Transition, {
+      'show': value,
+      'appear': value,
+      'name': 'k-fade',
+      'onAfterLeave': onAfterLeave,
+      'children': value ? _$ce(2, 'div', [_$ce(2, 'div', [_$ce(2, 'div', [_$ce(2, 'div', getTitle(), 0, _$cn(k + "-media-viewer-title"), {
+        'title': getTitle()
+      }), getCounterText() ? _$ce(2, 'div', getCounterText(), 0, _$cn(k + "-media-viewer-counter")) : undefined], 0, _$cn(k + "-media-viewer-heading")), _$ce(2, 'button', _$cc(Icon, {
+        'className': _$cn(k + "-icon-close-bold")
+      }), 2, _$cn(k + "-media-viewer-close"), {
+        'type': 'button',
+        'title': '关闭预览',
+        'aria-label': '关闭预览',
+        'ev-click': onCloseClick
+      })], 4, _$cn(k + "-media-viewer-header"), {
+        'ev-click': stopPropagation
+      }), shouldShowNavigation() ? _$ce(2, 'button', _$cc(Icon, {
+        'className': _$cn(k + "-icon-left")
+      }), 2, _$cn(k + "-media-viewer-prev"), {
+        'type': 'button',
+        'title': '上一个',
+        'aria-label': '上一个',
+        'disabled': !hasPrev,
+        'ev-click': onPrevClick
+      }) : undefined, shouldShowNavigation() ? _$ce(2, 'button', _$cc(Icon, {
+        'className': _$cn(k + "-icon-right")
+      }), 2, _$cn(k + "-media-viewer-next"), {
+        'type': 'button',
+        'title': '下一个',
+        'aria-label': '下一个',
+        'disabled': !hasNext,
+        'ev-click': onNextClick
+      }) : undefined, _$ce(2, 'div', isImage() ? _$ce(2, 'img', null, 1, _$cn(k + "-media-viewer-image"), {
+        'src': currentItem.src,
+        'alt': currentItem.name,
+        'draggable': false,
+        'ev-click': stopPropagation
+      }) : isVideo() ? _$ce(2, 'video', null, 1, _$cn(k + "-media-viewer-video"), {
+        'src': currentItem.src,
+        'poster': currentItem.poster || undefined,
+        'controls': true,
+        'autoplay': true,
+        'preload': 'metadata',
+        'playsinline': true,
+        'ev-click': stopPropagation
+      }) : isAudio() ? _$ce(2, 'div', [_$ce(2, 'div', _$ce(2, 'img', null, 1, _$cn(k + "-media-viewer-audio-cover-image"), {
+        'src': getAudioCardAssetSrc(),
+        'alt': '',
+        'draggable': false
+      }), 2, _$cn(k + "-media-viewer-audio-cover")), _$ce(2, 'div', currentItem.name, 0, _$cn(k + "-media-viewer-audio-title")), _$ce(2, 'audio', null, 1, _$cn(k + "-media-viewer-audio-player"), {
+        'src': currentItem.src,
+        'controls': true,
+        'autoplay': true,
+        'preload': 'metadata'
+      })], 4, _$cn(k + "-media-viewer-audio"), {
+        'ev-click': stopPropagation
+      }) : undefined, 0, _$cn(k + "-media-viewer-stage"))], 0, _$cn((_$cn2 = {}, _$cn2[k + "-media-viewer"] = true, _$cn2[this.get('className')] = this.get('className'), _$cn2)), {
+        'ev-click': onMaskClick
+      }) : undefined
+    })
+  });
+}
+;

package/components/radio/index.d.ts

@@ -1,6 +1,6 @@
 import { Component, TypeDefs } from 'intact-vue-next';
-import type { CommonInputHTMLAttributes, Events } from '../types';
-export interface RadioProps<Value = false, True = true> extends CommonInputHTMLAttributes {
+import type { CommonFormElementAttributes, Events } from '../types';
+export interface RadioProps<Value = false, True = true> extends CommonFormElementAttributes {
     disabled?: boolean;
     value?: Value | True;
     trueValue?: True;
@@ -11,7 +11,7 @@ export interface RadioEvents<True = true> {
 }
 export declare class Radio<Value = false, True = true> extends Component<RadioProps<Value, True>, RadioEvents<True>> {
     static template: string | import('intact-vue-next').Template<any>;
-    static typeDefs: Required<TypeDefs<Omit<RadioProps<false, true>, keyof CommonInputHTMLAttributes>>>;
+    static typeDefs: Required<TypeDefs<Omit<RadioProps<false, true>, keyof CommonFormElementAttributes>>>;
     static defaults: () => Partial<RadioProps<false, true>>;
     static events: Events<RadioEvents<true>>;
     private elementRef;

package/components/sender/icons.d.ts

@@ -0,0 +1,3 @@
+export declare const senderSendIcon: string;
+export declare const senderStopIcon: string;
+export declare const senderAttachSvg: string;

package/components/sender/icons.js

@@ -0,0 +1,17 @@
+// 内联 SVG 资源：data URL 形式，与 fileCard 中的占位图保持一致策略，避免下游打包额外处理 SVG 资源。
+// 三个发送态共用同一张图，hover/disabled 通过 CSS opacity 切换；附件用 currentColor，hover 时由 CSS 改色。
+// 设计为 32×32 可点击主形（与 sendButtonSize 一致）；原先 48×48 导出版本中间才是 32px 圆，用 img 外溢对齐容易「撑不满 / 对不齐」。
+// 将图形坐标归一到 viewBox 0 0 32 32，阴影用组件侧 CSS filter，与原有 SVG feDropShadow 观感接近且不占画布。
+var SEND_SVG = ['<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">', '<rect width="32" height="32" rx="16" fill="url(#b)"/>',
+// 路径由原 48 稿中 path 平移 (-8, -4) 到 0..32 坐标系
+'<path d="M22.3337 9.6666L17.9003 22.3333L16.0003 16L9.667 14.1L22.3337 9.6666Z" fill="white" stroke="white" stroke-linejoin="round"/>', '<defs>', '<linearGradient id="b" x1="0" y1="0" x2="32" y2="32" gradientUnits="userSpaceOnUse">', '<stop stop-color="#00DDDD"/>', '<stop offset="0.538462" stop-color="#5370FF"/>', '<stop offset="1" stop-color="#712FFF"/>', '</linearGradient>', '</defs>', '</svg>'].join('');
+var STOP_SVG = ['<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">', '<rect width="32" height="32" rx="16" fill="url(#b)"/>', '<rect x="10" y="10" width="12" height="12" rx="2" fill="white"/>', '<defs>', '<linearGradient id="b" x1="0" y1="0" x2="32" y2="32" gradientUnits="userSpaceOnUse">', '<stop stop-color="#00DDDD"/>', '<stop offset="0.538462" stop-color="#5370FF"/>', '<stop offset="1" stop-color="#712FFF"/>', '</linearGradient>', '</defs>', '</svg>'].join('');
+// 附件回形针 16x16，stroke 用 currentColor，方便用 CSS color 控制颜色变化。
+var ATTACH_SVG = ['<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">', '<path d="M8.23567 3.18836L3.28591 8.13812C2.11433 9.30969 2.11433 11.2092 3.28591 12.3808C4.45747 13.5523 6.35697 13.5523 7.52854 12.3808L13.4211 6.48819C14.2021 5.70716 14.2021 4.44082 13.4211 3.65975C12.6401 2.87871 11.3737 2.87871 10.5927 3.65975L4.70014 9.55232C4.3096 9.94286 4.3096 10.576 4.70014 10.9665C5.09064 11.3571 5.7238 11.3571 6.11434 10.9665L11.0641 6.01679" stroke="currentColor" stroke-linecap="square" stroke-linejoin="round"/>', '</svg>'].join('');
+function toDataUrl(svg) {
+  return "data:image/svg+xml;charset=UTF-8," + encodeURIComponent(svg);
+}
+export var senderSendIcon = toDataUrl(SEND_SVG);
+export var senderStopIcon = toDataUrl(STOP_SVG);
+// 附件用 innerHTML 注入，因为 currentColor 在 <img src> 形式下无法继承 color。
+export var senderAttachSvg = ATTACH_SVG;

package/components/sender/index.d.ts

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

package/components/sender/index.js

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

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

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