@zjlab-fe/data-hub-ui 0.21.6 → 0.22.0

package/es/components/tag-group-filter/dataSizeFilter.js

@@ -0,0 +1,100 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import React from 'react';
+import { Select, Flex, InputNumber } from 'antd';
+import { dataSizeFilter, iconTagHeader, iconTagContent, header, iconClear } from './index.module.scss.js';
+import { MinusOutlined } from '@ant-design/icons';
+import iconTagHeader$1 from '../../assets/icon-tag-header.png.js';
+
+const { Option } = Select;
+const DATA_SIZE_UNIT = [
+    { value: 'kb', name: 'KB' },
+    { value: 'mb', name: 'MB' },
+    { value: 'gb', name: 'GB' },
+    { value: 'tb', name: 'TB' },
+];
+const transToMB = (value, unit) => {
+    switch (unit) {
+        case 'kb':
+            return value / 1024;
+        case 'gb':
+            return value * 1024;
+        case 'tb':
+            return value * 1048576;
+        default:
+            return value;
+    }
+};
+function DataSizeFilter(p) {
+    const [startValue, setStartValue] = React.useState(null);
+    const [startUnit, setStartUnit] = React.useState('kb');
+    const [endValue, setEndValue] = React.useState(null);
+    const [endUnit, setEndUnit] = React.useState('kb');
+    const startInputRef = React.useRef(null);
+    const endInputRef = React.useRef(null);
+    const errMsg = React.useMemo(() => {
+        let res = '';
+        if (startValue !== null &&
+            endValue !== null &&
+            transToMB(startValue, startUnit) > transToMB(endValue, endUnit)) {
+            res = p.isEn ? 'The left value can not greater than the right value' : '左侧数值不能大于右侧数值';
+        }
+        return res;
+    }, [startValue, startUnit, endValue, endUnit, p.isEn]);
+    const handleClear = (e) => {
+        e.stopPropagation();
+        p.onChange(['', '']);
+    };
+    const handleChange = (param) => {
+        const obj = Object.assign({ startValue, startUnit, endValue, endUnit }, param);
+        if (obj.startValue !== null &&
+            obj.endValue !== null &&
+            transToMB(obj.startValue, obj.startUnit) > transToMB(obj.endValue, obj.endUnit)) {
+            return;
+        }
+        p.onChange([
+            obj.startValue === null || obj.startValue === undefined ? '' : `${obj.startValue}${obj.startUnit}`,
+            obj.endValue === null || obj.endValue === undefined ? '' : `${obj.endValue}${obj.endUnit}`,
+        ]);
+    };
+    const handleStartValueChange = (value) => {
+        setStartValue(value);
+    };
+    const handleStartUnitChange = (value) => {
+        setStartUnit(value);
+        if (startValue !== null) {
+            handleChange({ startUnit: value });
+        }
+    };
+    const handleEndValueChange = (value) => {
+        setEndValue(value);
+    };
+    const handleEndUnitChange = (value) => {
+        setEndUnit(value);
+        if (endValue !== null) {
+            handleChange({ endUnit: value });
+        }
+    };
+    const handleStartPressEnter = () => {
+        var _a;
+        (_a = startInputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+    };
+    const handleEndPressEnter = () => {
+        var _a;
+        (_a = endInputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+    };
+    const handleStartBlur = () => {
+        handleChange({ startValue });
+    };
+    const handleEndBlur = () => {
+        handleChange({ endValue });
+    };
+    React.useEffect(() => {
+        setStartValue(p.value[0] ? +p.value[0].slice(0, -2) : null);
+        setStartUnit(p.value[0] ? p.value[0].slice(-2) : 'kb');
+        setEndValue(p.value[1] ? +p.value[1].slice(0, -2) : null);
+        setEndUnit(p.value[1] ? p.value[1].slice(-2) : 'kb');
+    }, [p.value]);
+    return (jsxs("div", { className: dataSizeFilter, children: [jsx("span", { className: iconTagHeader, style: { backgroundImage: 'url(' + iconTagHeader$1 + ')' } }), jsx("span", { className: iconTagContent }), jsx(Flex, { justify: "space-between", align: "center", className: header, children: jsxs(Flex, { align: "center", children: [jsx("h3", { children: p.isEn ? 'DataVolume' : '数据体量' }), (startValue !== null || endValue !== null) && (jsx("span", { className: iconClear, onClick: handleClear, children: "\uE85E" }))] }) }), jsxs(Fragment, { children: [jsxs(Flex, { align: "center", children: [jsx(InputNumber, { ref: startInputRef, value: startValue, controls: false, placeholder: p.isEn ? 'Min' : '最小', size: "small", style: { fontSize: 12, width: 140 }, addonAfter: jsx(Select, { style: { width: 50 }, popupMatchSelectWidth: false, value: startUnit, onChange: handleStartUnitChange, children: DATA_SIZE_UNIT.map((item, i) => (jsx(Option, { value: item.value, children: item.name }, i))) }), onChange: handleStartValueChange, onPressEnter: handleStartPressEnter, onBlur: handleStartBlur }), jsx(MinusOutlined, { style: { margin: '0 4px' } }), jsx(InputNumber, { ref: endInputRef, value: endValue, controls: false, placeholder: p.isEn ? 'Max' : '最大', size: "small", style: { fontSize: 12, width: 140 }, addonAfter: jsx(Select, { style: { width: 50 }, popupMatchSelectWidth: false, value: endUnit, onChange: handleEndUnitChange, children: DATA_SIZE_UNIT.map((item, i) => (jsx(Option, { value: item.value, children: item.name }, i))) }), onChange: handleEndValueChange, onPressEnter: handleEndPressEnter, onBlur: handleEndBlur })] }), !!errMsg && jsx("div", { style: { color: 'red', marginTop: 4 }, children: errMsg })] })] }));
+}
+
+export { DataSizeFilter as default };

package/es/components/tag-group-filter/index.js

@@ -0,0 +1,53 @@
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+import DataSizeFilter from './dataSizeFilter.js';
+import TagFilter from './tagFilter.js';
+import { tagGroupFilter } from './index.module.scss.js';
+
+/**
+ * 标签组过滤器
+ * @param tagGroupDatas 标签组数据
+ * @param tagSelected 标签选中状态
+ * @param needDataSizeFilter 是否需要数据量过滤（可选）
+ * @param dataSizeValue 数据量过滤值（可选）
+ * @param isEn 是否英文环境（可选）
+ * @param tagClassName 标签类名（可选）
+ * @param onTagChange 标签选中状态变化回调
+ * @param onDataSizeChange 数据量过滤值变化回调（可选）
+ */
+function TagGroupFilter(p) {
+    const [menuOpenKeys, setMenuOpenKeys] = React.useState([]);
+    const handleTagChange = (key, selected) => {
+        const _tagSelected = JSON.parse(JSON.stringify(p.tagSelected));
+        _tagSelected[key] = selected;
+        p.onTagChange(_tagSelected);
+    };
+    const handleDataSizeChange = (value) => {
+        var _a, _b;
+        if (value[0] !== ((_a = p.dataSizeValue) === null || _a === void 0 ? void 0 : _a[0]) || value[1] !== ((_b = p.dataSizeValue) === null || _b === void 0 ? void 0 : _b[1])) {
+            p.onDataSizeChange && p.onDataSizeChange(value);
+        }
+    };
+    const handleOpenKeysChange = (key, isFold) => {
+        if (isFold) {
+            setMenuOpenKeys(menuOpenKeys.filter((v) => v !== key));
+        }
+        else {
+            setMenuOpenKeys([...menuOpenKeys, key]);
+        }
+    };
+    const viewTagGroupDatas = React.useMemo(() => {
+        if (p.needDataSizeFilter) {
+            const tagGroupDatas = [...p.tagGroupDatas];
+            tagGroupDatas.splice(2, 0, { key: 'dataSize', children: [] });
+            return tagGroupDatas;
+        }
+        return p.tagGroupDatas;
+    }, [p.tagGroupDatas, p.needDataSizeFilter]);
+    React.useEffect(() => {
+        setMenuOpenKeys(p.tagGroupDatas.map((item) => item.key));
+    }, [p.tagGroupDatas]);
+    return (jsx("div", { className: tagGroupFilter, children: viewTagGroupDatas.map((item, index) => (jsx(React.Fragment, { children: item.key === 'dataSize' ? (jsx(DataSizeFilter, { isEn: p.isEn, value: p.dataSizeValue || [], onChange: handleDataSizeChange })) : (jsx(TagFilter, { title: item.title, list: item.children, selected: p.tagSelected[item.key] || [], isFold: !menuOpenKeys.includes(item.key), onChange: (selectd) => handleTagChange(item.key, selectd), onFoldChange: (isFold) => handleOpenKeysChange(item.key, isFold), tagClassName: p.tagClassName }, item.key)) }, index))) }));
+}
+
+export { TagGroupFilter as default };

package/es/components/tag-group-filter/index.module.scss.js

@@ -0,0 +1,134 @@
+var style = document.createElement('style');
+style.textContent = `.index-module__tagGroupFilter___RjT8z {
+  padding-bottom: 1px;
+  min-height: 100px;
+}
+.index-module__tagGroupFilter___RjT8z .index-module__defaultTagCls___DCei2 {
+  background-color: #fff;
+  color: #222427;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+  font-family: "Alibaba PuHuiTi 3.0, Alibaba PuHuiTi 30";
+  font-size: 14px;
+}
+.index-module__tagGroupFilter___RjT8z .index-module__defaultTagCls___DCei2:hover {
+  color: #1775fe;
+  background: #e8f1ff;
+}
+.index-module__dataSizeFilter___bc-Rw {
+  font-size: 12px;
+  margin-bottom: 30px;
+  padding-left: 8px;
+  position: relative;
+}
+.index-module__dataSizeFilter___bc-Rw .index-module__iconTagHeader___jRKpZ {
+  position: absolute;
+  top: 3px;
+  left: 0;
+  display: inline-block;
+  width: 3px;
+  height: 13px;
+  background-size: 3px 13px;
+  background-repeat: no-repeat;
+}
+.index-module__dataSizeFilter___bc-Rw .index-module__iconTagContent___g7GGW {
+  position: absolute;
+  top: 16px;
+  left: 0;
+  display: inline-block;
+  width: 3px;
+  height: calc(100% - 16px);
+  background-color: #eff0f2;
+}
+.index-module__dataSizeFilter___bc-Rw .index-module__header___BYX3M {
+  height: 18px;
+  margin-bottom: 20px;
+  cursor: pointer;
+}
+.index-module__dataSizeFilter___bc-Rw .index-module__header___BYX3M h3 {
+  font-size: 18px;
+  line-height: 18px;
+  margin: 0;
+  font-family: "Alibaba PuHuiTi 3.0, Alibaba PuHuiTi 30";
+  color: #222427;
+}
+.index-module__dataSizeFilter___bc-Rw .index-module__header___BYX3M .index-module__iconClear___-lxmF {
+  margin-left: 10px;
+  font-family: "hub-iconfont";
+  font-size: 16px;
+  line-height: 16px;
+}
+.index-module__dataSizeFilter___bc-Rw .ant-select-selection-item {
+  font-size: 12px;
+}
+.index-module__dataSizeFilter___bc-Rw .ant-input-number-input {
+  font-size: 12px;
+}
+.index-module__dataSizeFilter___bc-Rw .ant-select-selector {
+  padding: 0 4px !important;
+}
+.index-module__dataSizeFilter___bc-Rw .ant-input-number-group-addon {
+  padding: 0 2px 0 10px;
+}
+.index-module__tagFilter___50Ybi {
+  margin-bottom: 30px;
+  padding-left: 8px;
+  position: relative;
+}
+.index-module__tagFilter___50Ybi .index-module__iconTagHeader___jRKpZ {
+  position: absolute;
+  top: 3px;
+  left: 0;
+  display: inline-block;
+  width: 3px;
+  height: 13px;
+  background-size: 3px 13px;
+  background-repeat: no-repeat;
+}
+.index-module__tagFilter___50Ybi .index-module__iconTagContent___g7GGW {
+  position: absolute;
+  top: 16px;
+  left: 0;
+  display: inline-block;
+  width: 3px;
+  height: calc(100% - 16px);
+  background-color: #eff0f2;
+}
+.index-module__tagFilter___50Ybi .index-module__header___BYX3M {
+  height: 18px;
+  margin-bottom: 20px;
+  cursor: pointer;
+}
+.index-module__tagFilter___50Ybi .index-module__header___BYX3M h3 {
+  font-size: 18px;
+  line-height: 18px;
+  margin: 0;
+  font-family: "Alibaba PuHuiTi 3.0, Alibaba PuHuiTi 30";
+  color: #222427;
+}
+.index-module__tagFilter___50Ybi .index-module__header___BYX3M .index-module__iconClear___-lxmF {
+  margin-left: 10px;
+  font-family: "hub-iconfont";
+  font-size: 16px;
+  line-height: 16px;
+}
+.index-module__tagFilter___50Ybi .index-module__header___BYX3M .index-module__iconArrow___4p7Zy {
+  color: #545b64;
+  font-size: 12px;
+}
+.index-module__tagFilter___50Ybi .index-module__subTitle___5vrhh {
+  color: #87909e;
+  font-size: 14px;
+  line-height: 14px;
+  margin: 20px 0 10px 0;
+  min-height: 1px;
+  font-family: "Alibaba PuHuiTi 3.0, Alibaba PuHuiTi 30";
+  font-weight: 600;
+}`;
+document.head.appendChild(style);
+
+var tagGroupFilter = "index-module__tagGroupFilter___RjT8z";var dataSizeFilter = "index-module__dataSizeFilter___bc-Rw";var iconTagHeader = "index-module__iconTagHeader___jRKpZ";var iconTagContent = "index-module__iconTagContent___g7GGW";var header = "index-module__header___BYX3M";var iconClear = "index-module__iconClear___-lxmF";var tagFilter = "index-module__tagFilter___50Ybi";var iconArrow = "index-module__iconArrow___4p7Zy";var subTitle = "index-module__subTitle___5vrhh";
+
+export { dataSizeFilter, header, iconArrow, iconClear, iconTagContent, iconTagHeader, subTitle, tagFilter, tagGroupFilter };

package/es/components/tag-group-filter/tagFilter.js

@@ -0,0 +1,19 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { Flex } from 'antd';
+import { tagFilter, iconTagHeader, iconTagContent, header, iconClear, iconArrow, subTitle } from './index.module.scss.js';
+import TagView from '../tag-view/index.js';
+import { CaretRightOutlined, CaretDownOutlined } from '@ant-design/icons';
+import iconTagHeader$1 from '../../assets/icon-tag-header.png.js';
+
+function TagFilter(p) {
+    const handleClear = (e) => {
+        e.stopPropagation();
+        p.onChange([]);
+    };
+    return (jsxs("div", { className: tagFilter, children: [p.title !== undefined && (jsxs(Fragment, { children: [jsx("span", { className: iconTagHeader, style: { backgroundImage: 'url(' + iconTagHeader$1 + ')' } }), !p.isFold && jsx("span", { className: iconTagContent })] })), p.title !== undefined && (jsxs(Flex, { justify: "space-between", align: "center", className: header, onClick: () => p.onFoldChange(!p.isFold), children: [jsxs(Flex, { align: "center", children: [jsx("h3", { children: p.title }), !p.isFold && p.selected.length > 0 && (jsx("span", { className: iconClear, onClick: handleClear, children: "\uE85E" }))] }), !p.hideFoldIcon && (jsx(Fragment, { children: p.isFold ? (jsx("span", { className: iconArrow, children: jsx(CaretRightOutlined, {}) })) : (jsx("span", { className: iconArrow, children: jsx(CaretDownOutlined, {}) })) }))] })), !p.isFold &&
+                p.list
+                    .filter((item) => item.children.length > 0)
+                    .map((item, i) => (jsxs("div", { children: [item.subTitle !== undefined && jsx("div", { className: subTitle, children: item.subTitle }), jsx(TagView, { list: item.children, maxLine: item.subTitle ? 2 : 3, selected: p.selected, onChange: p.onChange, tagClassName: p.tagClassName })] }, i)))] }));
+}
+
+export { TagFilter as default };

package/es/components/tag-view/index.js

@@ -0,0 +1,138 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Space, Tag, Tooltip } from 'antd';
+import { useRef, useState, useMemo, useCallback, useEffect } from 'react';
+import { EllipsisOutlined } from '@ant-design/icons';
+import { tagView, checkedTag, defaultTag2, defaultTag } from './index.module.scss.js';
+import useSize from './useSize.js';
+
+const lineHeight = 22;
+const rowGap = 8;
+const tagGap = 8;
+const ellipsisWidth = 44;
+function showMarkDom(str) {
+    if (!str) {
+        return '';
+    }
+    const res = [];
+    let key = 0;
+    str.split('<mark>').forEach((item) => {
+        const arr = item.split('</mark>');
+        if (arr.length > 1) {
+            res.push(jsx("mark", { children: arr[0] }, key++));
+            res.push(jsx("span", { children: arr[1] }, key++));
+        }
+        else {
+            res.push(jsx("span", { children: arr[0] }, key++));
+        }
+    });
+    return res;
+}
+function TagViewInner(p) {
+    const { list = [], maxLine = 1, needTooltip = false, selected, tagClassName } = p;
+    const spaceRef = useRef(null);
+    const [isOverflow, setIsOverflow] = useState(false); // 标签是否超出了容器
+    const [breakIndex, setBreakIndex] = useState(0);
+    const [tagWidths, setTagWidths] = useState([]);
+    const { width: spaceWidth } = useSize(spaceRef.current);
+    const canSelect = useMemo(() => Boolean(selected), [selected]);
+    const names = useMemo(() => list.map((item) => item.name).join(''), [list]);
+    const isFold = needTooltip;
+    const handleChange = (value, checked) => {
+        let newSelected = [];
+        if (checked) {
+            newSelected = [...(selected || []), value];
+        }
+        else {
+            newSelected = (selected || []).filter((v) => v !== value);
+        }
+        p.onChange && p.onChange(newSelected);
+    };
+    const calcBreakIndex = useCallback(() => {
+        let _breakIndex = 0;
+        let _isOverflow = false;
+        let curWidth = 0;
+        let curLine = 1;
+        for (let i = 0; i < tagWidths.length; i++) {
+            if (curWidth + tagWidths[i] + tagGap > spaceWidth) {
+                if (curLine < maxLine) {
+                    curLine++;
+                    curWidth = tagWidths[i] + tagGap;
+                }
+                else {
+                    _isOverflow = true;
+                    if (i > 0 && spaceWidth - curWidth < ellipsisWidth) {
+                        _breakIndex = i - 1;
+                        if (_breakIndex > 0 && spaceWidth - curWidth + tagWidths[_breakIndex] + tagGap < ellipsisWidth) {
+                            _breakIndex--;
+                        }
+                    }
+                    else {
+                        _breakIndex = i;
+                    }
+                    break;
+                }
+            }
+            else {
+                curWidth += tagWidths[i] + tagGap;
+            }
+        }
+        setBreakIndex(_breakIndex);
+        setIsOverflow(_isOverflow);
+    }, [maxLine, tagWidths, spaceWidth]);
+    useEffect(() => {
+        if (!spaceWidth) {
+            return;
+        }
+        calcBreakIndex();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [maxLine, tagWidths, spaceWidth]);
+    useEffect(() => {
+        var _a;
+        // 如果list为空数组，spaceRef.current是null
+        const tagDoms = spaceRef.current.querySelectorAll('.label');
+        const _tagWidths = [];
+        for (let i = 0; i < list.length; i++) {
+            _tagWidths.push((_a = tagDoms[i]) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width);
+        }
+        setTagWidths(_tagWidths);
+    }, [names, list.length]);
+    return (jsxs(Space, { size: [0, rowGap], wrap: true, ref: spaceRef, style: Object.assign({ maxHeight: isFold ? lineHeight * maxLine + rowGap * (maxLine - 1) + 2 : 'none', overflow: 'hidden' }, p.style), className: tagView, children: [list.slice(0, breakIndex).map((item) => {
+                const checked = (selected || []).includes(item.value);
+                return (jsx(Tag, { className: `label ${checked
+                        ? (tagClassName === null || tagClassName === void 0 ? void 0 : tagClassName.checked) || checkedTag
+                        : canSelect
+                            ? (tagClassName === null || tagClassName === void 0 ? void 0 : tagClassName.default) || defaultTag2
+                            : defaultTag}`, onClick: canSelect ? () => handleChange(item.value, !checked) : undefined, bordered: false, children: showMarkDom(item.name) }, item.value));
+            }), isOverflow && needTooltip ? (jsx(Tooltip, { title: list
+                    .slice(breakIndex)
+                    .map((item) => (item.name || '').replace(/<mark>/g, '').replace(/<\/mark>/g, ''))
+                    .join('；'), children: jsx(Tag, { className: defaultTag, bordered: false, children: jsx(EllipsisOutlined, {}) }) })) : (list.slice(breakIndex).map((item) => {
+                const checked = (selected || []).includes(item.value);
+                return (jsx(Tag, { className: `label ${checked
+                        ? (tagClassName === null || tagClassName === void 0 ? void 0 : tagClassName.checked) || checkedTag
+                        : canSelect
+                            ? (tagClassName === null || tagClassName === void 0 ? void 0 : tagClassName.default) || defaultTag2
+                            : defaultTag}`, onClick: canSelect ? () => handleChange(item.value, !checked) : undefined, bordered: false, children: showMarkDom(item.name) }, item.value));
+            }))] }));
+}
+/**
+ * 标签视图
+ * @param list 标签列表
+ * @param maxLine 最大行数（可选）
+ * @param needTooltip 是否需要tooltip（可选）
+ * @param selected 选中的标签（可选）
+ * @param style 样式（可选）
+ * @param onChange 选中状态变化回调（可选）
+ * @param tagClassName 标签类名（可选）
+ */
+function TagView(p) {
+    const { list } = p;
+    if (list && list.length > 0) {
+        return jsx(TagViewInner, Object.assign({}, p));
+    }
+    else {
+        return jsx("div", {});
+    }
+}
+
+export { TagView as default };

package/es/components/tag-view/index.module.scss.js

@@ -0,0 +1,56 @@
+var style = document.createElement('style');
+style.textContent = `.index-module__tagView___7CGfz {
+  display: flex;
+}
+.index-module__tagView___7CGfz .index-module__defaultTag___gGS-w {
+  background-color: #f4f6fa;
+  color: #222427;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+  font-family: "Alibaba PuHuiTi 3.0, Alibaba PuHuiTi 30";
+  font-size: 14px;
+}
+.index-module__tagView___7CGfz .index-module__defaultTag2___ICmyv {
+  background-color: #f4f6fa;
+  color: #222427;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+  font-family: "Alibaba PuHuiTi 3.0, Alibaba PuHuiTi 30";
+  font-size: 14px;
+}
+.index-module__tagView___7CGfz .index-module__defaultTag2___ICmyv:hover {
+  color: #1775fe;
+  background: #e8f1ff;
+}
+.index-module__tagView___7CGfz .index-module__checkedTag___IJjWj {
+  background-color: #f4f6fa;
+  color: #222427;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+  font-family: "Alibaba PuHuiTi 3.0, Alibaba PuHuiTi 30";
+  font-size: 14px;
+  background-color: #1775fe;
+  color: #fff;
+}
+.index-module__tagView___7CGfz .index-module__foldTag___9mpRP {
+  background-color: #f4f6fa;
+  color: #222427;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+  font-family: "Alibaba PuHuiTi 3.0, Alibaba PuHuiTi 30";
+  font-size: 14px;
+  color: #1775fe;
+}`;
+document.head.appendChild(style);
+
+var tagView = "index-module__tagView___7CGfz";var defaultTag = "index-module__defaultTag___gGS-w";var defaultTag2 = "index-module__defaultTag2___ICmyv";var checkedTag = "index-module__checkedTag___IJjWj";
+
+export { checkedTag, defaultTag, defaultTag2, tagView };

package/es/components/tag-view/useSize.js

@@ -0,0 +1,41 @@
+import { useState, useLayoutEffect } from 'react';
+import ResizeObserver from 'resize-observer-polyfill';
+
+function useSize(target) {
+    const getElement = () => {
+        if (!target)
+            return null;
+        if (target instanceof HTMLElement)
+            return target;
+        return target.current || null;
+    };
+    const [state, setState] = useState(() => {
+        const element = getElement();
+        return {
+            width: element ? element.clientWidth : 0,
+            height: element ? element.clientHeight : 0,
+        };
+    });
+    useLayoutEffect(() => {
+        const element = getElement();
+        if (!element) {
+            return () => { };
+        }
+        const resizeObserver = new ResizeObserver((entries) => {
+            entries.forEach((entry) => {
+                setState({
+                    width: entry.target.clientWidth,
+                    height: entry.target.clientHeight,
+                });
+            });
+        });
+        resizeObserver.observe(element);
+        return () => {
+            resizeObserver.disconnect();
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [typeof target === 'function' ? undefined : target]);
+    return state;
+}
+
+export { useSize as default };

package/es/components/tip-tap/bubble-menu.js

@@ -0,0 +1,47 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useRef } from 'react';
+import { IconBold, IconItalic, IconUnderline, IconStrikethrough, IconHighlight, IconCheck, IconTrash, IconLink } from './icons/index.js';
+
+function TipTapBubbleMenu({ editor }) {
+    return (jsxs("div", { className: "tip-tap-bubble-menu", children: [jsx(BubbleButton, { icon: jsx(IconBold, {}), onClick: () => editor.chain().focus().toggleBold().run(), active: editor.isActive('bold'), tooltip: "\u7C97\u4F53" }), jsx(BubbleButton, { icon: jsx(IconItalic, {}), onClick: () => editor.chain().focus().toggleItalic().run(), active: editor.isActive('italic'), tooltip: "\u659C\u4F53" }), jsx(BubbleButton, { icon: jsx(IconUnderline, {}), onClick: () => editor.chain().focus().toggleUnderline().run(), active: editor.isActive('underline'), tooltip: "\u4E0B\u5212\u7EBF" }), jsx(BubbleButton, { icon: jsx(IconStrikethrough, {}), onClick: () => editor.chain().focus().toggleStrike().run(), active: editor.isActive('strike'), tooltip: "\u5220\u9664\u7EBF" }), jsx("div", { className: "tip-tap-toolbar__divider" }), jsx(BubbleButton, { icon: jsx(IconHighlight, {}), onClick: () => editor.chain().focus().toggleHighlight().run(), active: editor.isActive('highlight'), tooltip: "\u9AD8\u4EAE" }), jsx("div", { className: "tip-tap-toolbar__divider" }), jsx(BubbleLinkButton, { editor: editor })] }));
+}
+function BubbleButton({ icon, onClick, active = false, tooltip, }) {
+    return (jsx("button", { className: `tip-tap-btn ${active ? 'tip-tap-btn--active' : ''}`, onClick: onClick, type: "button", title: tooltip, children: icon }));
+}
+function BubbleLinkButton({ editor }) {
+    const [showInput, setShowInput] = useState(false);
+    const [url, setUrl] = useState('');
+    const inputRef = useRef(null);
+    function handleOpenInput() {
+        const currentUrl = editor.getAttributes('link').href || '';
+        setUrl(currentUrl);
+        setShowInput(true);
+        queueMicrotask(() => {
+            var _a;
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        });
+    }
+    function handleSubmit() {
+        if (url) {
+            editor.chain().focus().extendMarkRange('link').setLink({ href: url }).run();
+        }
+        setShowInput(false);
+        setUrl('');
+    }
+    function handleRemove() {
+        editor.chain().focus().unsetLink().run();
+        setShowInput(false);
+        setUrl('');
+    }
+    if (showInput) {
+        return (jsxs("div", { className: "tip-tap-link-popup", style: { boxShadow: 'none', border: 'none', padding: 0, margin: 0 }, children: [jsx("input", { ref: inputRef, type: "text", className: "tip-tap-link-popup__input", style: { width: '160px', padding: '4px 8px', fontSize: '13px' }, placeholder: "\u8F93\u5165\u94FE\u63A5...", value: url, onChange: (e) => setUrl(e.target.value), onKeyDown: (e) => {
+                        if (e.key === 'Enter')
+                            handleSubmit();
+                        if (e.key === 'Escape')
+                            setShowInput(false);
+                    } }), jsx("button", { className: "tip-tap-btn", onClick: handleSubmit, type: "button", style: { width: '24px', height: '24px' }, children: jsx(IconCheck, {}) }), editor.isActive('link') && (jsx("button", { className: "tip-tap-btn", onClick: handleRemove, type: "button", style: { width: '24px', height: '24px', color: '#dc2626' }, children: jsx(IconTrash, {}) }))] }));
+    }
+    return (jsx(BubbleButton, { icon: jsx(IconLink, {}), onClick: handleOpenInput, active: editor.isActive('link'), tooltip: "\u94FE\u63A5" }));
+}
+
+export { TipTapBubbleMenu as default };

package/es/components/tip-tap/editor.js

@@ -0,0 +1,34 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useEditor, EditorContent } from '@tiptap/react';
+import { BubbleMenu } from '@tiptap/react/menus';
+import { forwardRef, useImperativeHandle } from 'react';
+import { editorExtensions } from './extensions/index.js';
+import Toolbar from './toolbar/index.js';
+import TipTapBubbleMenu from './bubble-menu.js';
+
+var editor = forwardRef(function TipTapEditor({ content = '', placeholder = '开始输入内容...', editable = true, autofocus = false, className = '', toolbarClassName = '', onChange, }, ref) {
+    const editor = useEditor({
+        extensions: editorExtensions(placeholder),
+        content,
+        editable,
+        autofocus,
+        immediatelyRender: true,
+        onUpdate: ({ editor }) => {
+            onChange === null || onChange === void 0 ? void 0 : onChange(editor.getHTML());
+        },
+    });
+    useImperativeHandle(ref, () => ({
+        getContent: () => { var _a; return (_a = editor === null || editor === void 0 ? void 0 : editor.getHTML()) !== null && _a !== void 0 ? _a : ''; },
+        getJSON: () => { var _a; return (_a = editor === null || editor === void 0 ? void 0 : editor.getJSON()) !== null && _a !== void 0 ? _a : {}; },
+        getMarkdown: () => { var _a; return (_a = editor === null || editor === void 0 ? void 0 : editor.getMarkdown()) !== null && _a !== void 0 ? _a : ''; },
+        setContent: (content) => editor === null || editor === void 0 ? void 0 : editor.commands.setContent(content),
+        setMarkdown: (markdown) => editor === null || editor === void 0 ? void 0 : editor.commands.setContent(markdown, { contentType: 'markdown' }),
+        focus: () => editor === null || editor === void 0 ? void 0 : editor.commands.focus(),
+        isEmpty: () => { var _a; return (_a = editor === null || editor === void 0 ? void 0 : editor.isEmpty) !== null && _a !== void 0 ? _a : true; },
+    }));
+    return (jsxs("div", { className: `tip-tap-editor ${className}`, children: [editor && editable && (jsxs(Fragment, { children: [jsx(Toolbar, { editor: editor, className: toolbarClassName }), jsx(BubbleMenu, { editor: editor, options: {
+                            placement: 'top',
+                        }, children: jsx(TipTapBubbleMenu, { editor: editor }) })] })), jsx(EditorContent, { editor: editor, className: "tip-tap-editor__content" })] }));
+});
+
+export { editor as default };