donghy 0.0.1

package/dist/esm/components/feedback/notification/Notification.module.css

@@ -0,0 +1,262 @@
+.container {
+  position: fixed;
+  z-index: calc(var(--nv-z-toast, 1080) + 40);
+  display: flex;
+  flex-direction: column;
+  gap: var(--nv-space-sm, 8px);
+  pointer-events: none;
+}
+
+.container[data-placement='topRight'] {
+  top: var(--nv-space-xl, 24px);
+  right: var(--nv-space-xl, 24px);
+}
+
+.container[data-placement='topLeft'] {
+  top: var(--nv-space-xl, 24px);
+  left: var(--nv-space-xl, 24px);
+}
+
+.container[data-placement='bottomRight'] {
+  bottom: var(--nv-space-xl, 24px);
+  right: var(--nv-space-xl, 24px);
+}
+
+.container[data-placement='bottomLeft'] {
+  bottom: var(--nv-space-xl, 24px);
+  left: var(--nv-space-xl, 24px);
+}
+
+.container[data-placement='top'] {
+  top: var(--nv-space-xl, 24px);
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.container[data-placement='bottom'] {
+  bottom: var(--nv-space-xl, 24px);
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.item {
+  pointer-events: auto;
+  display: flex;
+  gap: var(--nv-space-md, 12px);
+  padding: var(--nv-space-lg, 16px) var(--nv-space-xl, 24px);
+  background: var(--nv-color-bg-elevated, #FFFFFF);
+  border-radius: var(--nv-radius-lg, 8px);
+  box-shadow: var(--nv-shadow-md, 0 3px 6px -4px rgba(0,0,0,0.12));
+  width: 384px;
+  max-width: calc(100vw - 48px);
+  position: relative;
+  overflow: hidden;
+}
+
+.item[data-placement='topRight'],
+.item[data-placement='bottomRight'] {
+  animation: notifSlideInRight var(--nv-motion-normal, 200ms) var(--nv-motion-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
+}
+
+.item[data-placement='topLeft'],
+.item[data-placement='bottomLeft'] {
+  animation: notifSlideInLeft var(--nv-motion-normal, 200ms) var(--nv-motion-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
+}
+
+.item[data-placement='top'] {
+  animation: notifSlideInDown var(--nv-motion-normal, 200ms) var(--nv-motion-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
+}
+
+.item[data-placement='bottom'] {
+  animation: notifSlideInUp var(--nv-motion-normal, 200ms) var(--nv-motion-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
+}
+
+.item[data-closing][data-placement='topRight'],
+.item[data-closing][data-placement='bottomRight'] {
+  animation: notifSlideOutRight var(--nv-motion-fast, 100ms) var(--nv-motion-ease-in) forwards;
+}
+
+.item[data-closing][data-placement='topLeft'],
+.item[data-closing][data-placement='bottomLeft'] {
+  animation: notifSlideOutLeft var(--nv-motion-fast, 100ms) var(--nv-motion-ease-in) forwards;
+}
+
+.item[data-closing][data-placement='top'] {
+  animation: notifSlideOutUp var(--nv-motion-fast, 100ms) var(--nv-motion-ease-in) forwards;
+}
+
+.item[data-closing][data-placement='bottom'] {
+  animation: notifSlideOutDown var(--nv-motion-fast, 100ms) var(--nv-motion-ease-in) forwards;
+}
+
+.icon {
+  display: inline-flex;
+  font-size: 20px;
+  line-height: 1;
+  flex-shrink: 0;
+  margin-top: 2px;
+}
+
+.icon[data-type='success'] {
+  color: var(--nv-color-success, #52C41A);
+}
+
+.icon[data-type='error'] {
+  color: var(--nv-color-error, #FF4D4F);
+}
+
+.icon[data-type='warning'] {
+  color: var(--nv-color-warning, #FAAD14);
+}
+
+.icon[data-type='info'] {
+  color: var(--nv-color-info, #4096FF);
+}
+
+.body {
+  flex: 1;
+  min-width: 0;
+}
+
+.title {
+  font-weight: var(--nv-font-weight-medium, 500);
+  font-size: var(--nv-font-size-md, 14px);
+  color: var(--nv-color-text, rgba(0, 0, 0, 0.88));
+  line-height: var(--nv-line-height-md, 22px);
+}
+
+.description {
+  font-size: var(--nv-font-size-sm, 13px);
+  color: var(--nv-color-text-secondary, rgba(0, 0, 0, 0.65));
+  margin-top: var(--nv-space-xs, 4px);
+  line-height: var(--nv-line-height-sm, 22px);
+}
+
+.actions {
+  margin-top: var(--nv-space-sm, 8px);
+  display: flex;
+  gap: var(--nv-space-sm, 8px);
+}
+
+.close {
+  position: absolute;
+  top: var(--nv-space-lg, 16px);
+  right: var(--nv-space-lg, 16px);
+  cursor: pointer;
+  background: none;
+  border: none;
+  font-size: 16px;
+  color: var(--nv-color-text-tertiary, rgba(0, 0, 0, 0.45));
+  line-height: 1;
+}
+
+.close:hover {
+  color: var(--nv-color-text-secondary, rgba(0, 0, 0, 0.65));
+}
+
+.progress {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  height: 2px;
+  background: var(--nv-color-primary, #6C5CE7);
+  border-radius: 0 0 var(--nv-radius-lg, 8px) var(--nv-radius-lg, 8px);
+  animation: progressShrink var(--_duration, 4.5s) linear;
+}
+
+@keyframes notifSlideInRight {
+  from {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes notifSlideOutRight {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+}
+
+@keyframes notifSlideInLeft {
+  from {
+    opacity: 0;
+    transform: translateX(-100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes notifSlideOutLeft {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(-100%);
+  }
+}
+
+@keyframes notifSlideInDown {
+  from {
+    opacity: 0;
+    transform: translateY(-100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes notifSlideOutUp {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-100%);
+  }
+}
+
+@keyframes notifSlideInUp {
+  from {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes notifSlideOutDown {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+}
+
+@keyframes progressShrink {
+  from {
+    width: 100%;
+  }
+  to {
+    width: 0%;
+  }
+}

package/dist/esm/components/feedback/notification/index.js

@@ -0,0 +1 @@
+export { Notification } from "./Notification";

package/dist/esm/components/feedback/popconfirm/Popconfirm.js

@@ -0,0 +1,165 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(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; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import React, { forwardRef, useState, useCallback, useRef } from 'react';
+import { useClickOutside } from "../../shared/hooks/useClickOutside";
+import styles from "./Popconfirm.module.css";
+
+/** 气泡确认框弹出位置 */
+
+/** 气泡确认框组件属性 */
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var DefaultIcon = function DefaultIcon() {
+  return /*#__PURE__*/_jsxs("svg", {
+    viewBox: "64 64 896 896",
+    width: "1em",
+    height: "1em",
+    fill: "currentColor",
+    children: [/*#__PURE__*/_jsx("path", {
+      d: "M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M464 336a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"
+    })]
+  });
+};
+var Popconfirm = /*#__PURE__*/forwardRef(function (_ref, _ref2) {
+  var title = _ref.title,
+    description = _ref.description,
+    _ref$icon = _ref.icon,
+    icon = _ref$icon === void 0 ? /*#__PURE__*/_jsx(DefaultIcon, {}) : _ref$icon,
+    _ref$okText = _ref.okText,
+    okText = _ref$okText === void 0 ? 'OK' : _ref$okText,
+    _ref$cancelText = _ref.cancelText,
+    cancelText = _ref$cancelText === void 0 ? 'Cancel' : _ref$cancelText,
+    _ref$showCancel = _ref.showCancel,
+    showCancel = _ref$showCancel === void 0 ? true : _ref$showCancel,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$placement = _ref.placement,
+    placement = _ref$placement === void 0 ? 'top' : _ref$placement,
+    _ref$trigger = _ref.trigger,
+    trigger = _ref$trigger === void 0 ? 'click' : _ref$trigger,
+    _ref$arrow = _ref.arrow,
+    arrow = _ref$arrow === void 0 ? true : _ref$arrow,
+    controlledOpen = _ref.open,
+    _ref$defaultOpen = _ref.defaultOpen,
+    defaultOpen = _ref$defaultOpen === void 0 ? false : _ref$defaultOpen,
+    onConfirm = _ref.onConfirm,
+    onCancel = _ref.onCancel,
+    onChange = _ref.onChange,
+    className = _ref.className,
+    style = _ref.style,
+    children = _ref.children;
+  var _useState = useState(defaultOpen),
+    _useState2 = _slicedToArray(_useState, 2),
+    internalOpen = _useState2[0],
+    setInternalOpen = _useState2[1];
+  var isControlled = controlledOpen !== undefined;
+  var isOpen = isControlled ? controlledOpen : internalOpen;
+  var wrapperRef = useRef(null);
+  var setOpen = useCallback(function (value) {
+    if (disabled) return;
+    if (!isControlled) setInternalOpen(value);
+    onChange === null || onChange === void 0 || onChange(value);
+  }, [isControlled, onChange, disabled]);
+  useClickOutside(wrapperRef, function () {
+    return setOpen(false);
+  }, isOpen);
+  var handleTrigger = useCallback(function () {
+    if (disabled) return;
+    if (trigger === 'click') {
+      setOpen(!isOpen);
+    }
+  }, [trigger, isOpen, setOpen, disabled]);
+  var handleMouseEnter = useCallback(function () {
+    if (disabled) return;
+    if (trigger === 'hover') setOpen(true);
+  }, [trigger, setOpen, disabled]);
+  var handleMouseLeave = useCallback(function () {
+    if (disabled) return;
+    if (trigger === 'hover') setOpen(false);
+  }, [trigger, setOpen, disabled]);
+  var handleFocus = useCallback(function () {
+    if (disabled) return;
+    if (trigger === 'focus') setOpen(true);
+  }, [trigger, setOpen, disabled]);
+  var handleBlur = useCallback(function () {
+    if (disabled) return;
+    if (trigger === 'focus') setOpen(false);
+  }, [trigger, setOpen, disabled]);
+  var handleContextMenu = useCallback(function (e) {
+    if (disabled) return;
+    if (trigger === 'contextMenu') {
+      e.preventDefault();
+      setOpen(!isOpen);
+    }
+  }, [trigger, isOpen, setOpen, disabled]);
+  var handleConfirm = useCallback(function (e) {
+    onConfirm === null || onConfirm === void 0 || onConfirm(e);
+    setOpen(false);
+  }, [onConfirm, setOpen]);
+  var handleCancel = useCallback(function (e) {
+    onCancel === null || onCancel === void 0 || onCancel(e);
+    setOpen(false);
+  }, [onCancel, setOpen]);
+  return /*#__PURE__*/_jsxs("div", {
+    ref: function ref(node) {
+      wrapperRef.current = node;
+      if (typeof _ref2 === 'function') _ref2(node);else if (_ref2) _ref2.current = node;
+    },
+    className: [styles.wrapper, className].filter(Boolean).join(' '),
+    style: style,
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
+    onContextMenu: handleContextMenu,
+    children: [/*#__PURE__*/_jsx("span", {
+      onClick: handleTrigger,
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      "data-popconfirm-trigger": true,
+      children: children
+    }), /*#__PURE__*/_jsxs("div", {
+      className: styles.popup,
+      "data-placement": placement,
+      "data-open": isOpen || undefined,
+      role: "dialog",
+      children: [arrow && /*#__PURE__*/_jsx("div", {
+        className: styles.arrow,
+        "data-popconfirm-arrow": true
+      }), /*#__PURE__*/_jsxs("div", {
+        className: styles.header,
+        children: [/*#__PURE__*/_jsx("span", {
+          className: styles.icon,
+          children: icon
+        }), /*#__PURE__*/_jsxs("div", {
+          className: styles.titleContent,
+          children: [title && /*#__PURE__*/_jsx("div", {
+            className: styles.title,
+            children: title
+          }), description && /*#__PURE__*/_jsx("div", {
+            className: styles.description,
+            children: description
+          })]
+        })]
+      }), /*#__PURE__*/_jsxs("div", {
+        className: styles.footer,
+        children: [showCancel && /*#__PURE__*/_jsx("button", {
+          className: "".concat(styles.btn, " ").concat(styles.btnCancel),
+          onClick: handleCancel,
+          children: cancelText
+        }), /*#__PURE__*/_jsx("button", {
+          className: "".concat(styles.btn, " ").concat(styles.btnOk),
+          onClick: handleConfirm,
+          children: okText
+        })]
+      })]
+    })]
+  });
+});
+Popconfirm.displayName = 'Popconfirm';
+export { Popconfirm };
+export default Popconfirm;

package/dist/esm/components/feedback/popconfirm/Popconfirm.module.css

@@ -0,0 +1,180 @@
+.wrapper {
+  position: relative;
+  display: inline-flex;
+}
+
+.popup {
+  position: absolute;
+  z-index: var(--nv-z-popover, 1060);
+  background: var(--nv-color-bg-elevated, #FFFFFF);
+  border-radius: var(--nv-radius-lg, 8px);
+  box-shadow: var(--nv-shadow-md, 0 3px 6px -4px rgba(0,0,0,0.12));
+  padding: var(--nv-space-md, 12px) var(--nv-space-lg, 16px);
+  min-width: 200px;
+  opacity: 0;
+  transform: scale(0.9);
+  transition: all var(--nv-motion-fast, 100ms) var(--nv-motion-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
+  pointer-events: none;
+}
+
+.popup[data-open] {
+  opacity: 1;
+  transform: scale(1);
+  pointer-events: auto;
+}
+
+.popup[data-placement="top"] {
+  bottom: calc(100% + 8px);
+  left: 50%;
+  transform: translateX(-50%) scale(0.9);
+}
+
+.popup[data-placement="top"][data-open] {
+  transform: translateX(-50%) scale(1);
+}
+
+.popup[data-placement="bottom"] {
+  top: calc(100% + 8px);
+  left: 50%;
+  transform: translateX(-50%) scale(0.9);
+}
+
+.popup[data-placement="bottom"][data-open] {
+  transform: translateX(-50%) scale(1);
+}
+
+.popup[data-placement="left"] {
+  right: calc(100% + 8px);
+  top: 50%;
+  transform: translateY(-50%) scale(0.9);
+}
+
+.popup[data-placement="left"][data-open] {
+  transform: translateY(-50%) scale(1);
+}
+
+.popup[data-placement="right"] {
+  left: calc(100% + 8px);
+  top: 50%;
+  transform: translateY(-50%) scale(0.9);
+}
+
+.popup[data-placement="right"][data-open] {
+  transform: translateY(-50%) scale(1);
+}
+
+.popup[data-placement="topLeft"] {
+  bottom: calc(100% + 8px);
+  left: 0;
+}
+
+.popup[data-placement="topRight"] {
+  bottom: calc(100% + 8px);
+  right: 0;
+}
+
+.popup[data-placement="bottomLeft"] {
+  top: calc(100% + 8px);
+  left: 0;
+}
+
+.popup[data-placement="bottomRight"] {
+  top: calc(100% + 8px);
+  right: 0;
+}
+
+.popup[data-placement="leftTop"] {
+  right: calc(100% + 8px);
+  top: 0;
+}
+
+.popup[data-placement="leftBottom"] {
+  right: calc(100% + 8px);
+  bottom: 0;
+}
+
+.popup[data-placement="rightTop"] {
+  left: calc(100% + 8px);
+  top: 0;
+}
+
+.popup[data-placement="rightBottom"] {
+  left: calc(100% + 8px);
+  bottom: 0;
+}
+
+.arrow {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background: var(--nv-color-bg-elevated, #FFFFFF);
+  transform: rotate(45deg);
+}
+
+.header {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--nv-space-sm, 8px);
+  margin-bottom: var(--nv-space-sm, 8px);
+}
+
+.icon {
+  display: inline-flex;
+  font-size: 16px;
+  line-height: 1;
+  color: var(--nv-color-warning, #FAAD14);
+  flex-shrink: 0;
+  margin-top: 2px;
+}
+
+.titleContent {
+  flex: 1;
+}
+
+.title {
+  font-weight: var(--nv-font-weight-medium, 500);
+  font-size: var(--nv-font-size-md, 14px);
+  color: var(--nv-color-text, rgba(0, 0, 0, 0.88));
+}
+
+.description {
+  font-size: var(--nv-font-size-sm, 13px);
+  color: var(--nv-color-text-secondary, rgba(0, 0, 0, 0.65));
+  margin-top: var(--nv-space-xs, 4px);
+}
+
+.footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--nv-space-sm, 8px);
+  margin-top: var(--nv-space-md, 12px);
+}
+
+.btn {
+  padding: var(--nv-space-xs, 4px) var(--nv-space-md, 12px);
+  border-radius: var(--nv-radius-lg, 8px);
+  font-size: var(--nv-font-size-sm, 13px);
+  cursor: pointer;
+  border: 1px solid var(--nv-color-border, #D9D9D9);
+  transition: all var(--nv-motion-fast, 100ms);
+}
+
+.btnCancel {
+  background: var(--nv-color-bg, #FFFFFF);
+  color: var(--nv-color-text, rgba(0, 0, 0, 0.88));
+}
+
+.btnCancel:hover {
+  color: var(--nv-color-primary, #6C5CE7);
+  border-color: var(--nv-color-primary, #6C5CE7);
+}
+
+.btnOk {
+  background: var(--nv-color-primary, #6C5CE7);
+  color: var(--nv-color-text-inverse, #FFFFFF);
+  border-color: var(--nv-color-primary, #6C5CE7);
+}
+
+.btnOk:hover {
+  background: var(--nv-color-primary-hover, #7C6FF0);
+}

package/dist/esm/components/feedback/popconfirm/index.js

@@ -0,0 +1 @@
+export { Popconfirm } from "./Popconfirm";