sync

lib/ui.js

@@ -8,7 +8,7 @@ import { createTab } from "./ui/tab";
 import { Dropdown } from "./ui/dropdown";
 import { Grid } from "./ui/grid/grid";
 import { GridColumn, GridInputColumn, GridDropdownColumn, GridCheckboxColumn, GridIconColumn, GridTextColumn, GridDateColumn } from './ui/grid/column';
-import { Popup, createPopup, resolvePopup, showAlert, showConfirm } from "./ui/popup";
+import { Popup, createPopup, resolvePopup, showAlert, showInput, showConfirm } from "./ui/popup";
 import { createPicture, createAudio, createVideo, createFile, createVideoList } from './ui/media';
 import { validation, convertCssStyle } from './ui/extension';
 import { createDateInput, toDateValue, getFormatter, formatDate, setDateValue, getDateValue, DateSelector } from './ui/date';
@@ -64,6 +64,96 @@ class OptionBase {
   }
 }
 
+/**
+ * 通知选项
+ * @typedef NotifyOption
+ * @property {string | HTMLElement} message - 内容，支持自定义元素
+ * @property {HTMLElement} [parent] - 目标父元素
+ * @property {string} [title] - 标题
+ * @property {"success" | "warning" | "error"} [type] - 提示类型
+ * @property {boolean} [persistent] - 是否持续显示，默认为 `false`，3 秒后自动关闭
+ * @property {number} [timeout] - 超时时间，默认 3 秒
+ * @property {(auto: boolean) => void} [onDismissed] - 关闭时触发的函数
+ */
+
+/**
+ * @private
+ * @param {HTMLDivElement} wrapper 
+ * @param {(auto: boolean) => void} [onDismissed] 
+ * @param {boolean} [auto] 
+ */
+function closeNotify(wrapper, onDismissed, auto) {
+  wrapper.classList.remove('active');
+  setTimeout(() => {
+    wrapper.remove();
+    if (typeof onDismissed === 'function') {
+      onDismissed(auto);
+    }
+  }, 120);
+}
+
+/**
+ * 
+ * @param {NotifyOption} opts 
+ */
+function notify(opts) {
+  opts ||= {};
+  let timer;
+  const close = createIcon('fa-light', 'times');
+  close.classList.add('ui-notify-close');
+  close.addEventListener('click', () => {
+    timer && clearTimeout(timer);
+    closeNotify(wrapper, opts.onDismissed);
+  });
+  let type;
+  let typeClass;
+  opts.type ||= 'success';
+  switch (opts.type) {
+    case 'warning':
+      type = 'exclamation-circle';
+      typeClass = 'warning';
+      break;
+    case 'error':
+      type = 'times-circle';
+      typeClass = 'error';
+      break;
+    case 'success':
+      type = 'check-circle';
+      typeClass = 'success';
+      break;
+    default:
+      type = opts.type;
+      typeClass = 'success';
+      break;
+  }
+  const icon = createIcon('fa-solid', type);
+  icon.classList.add('ui-notify-type', typeClass);
+  const wrapper = createElement('div', 'ui-notify',
+    utility.nullOrEmpty(opts.title) ?
+      createElement('div', 'ui-notify-single',
+        icon,
+        createElement('span', 'ui-notify-message', opts.message),
+        close
+      ) :
+      createElement('div', 'ui-notify-content',
+        createElement('div', 'ui-notify-header',
+          icon,
+          createElement('h2', 'ui-notify-title', opts.title),
+          close
+        ),
+        createElement('span', 'ui-notify-message', opts.message)
+      )
+  );
+  if (!opts.persistent) {
+    timer = setTimeout(() => {
+      closeNotify(wrapper, opts.onDismissed, true);
+    }, opts.timeout || 3000);
+  }
+  (opts.parent ?? document.body).appendChild(wrapper);
+  setTimeout(() => wrapper.classList.add('active'), 10);
+  return wrapper;
+}
+
 export {
   createElement,
   // icon
@@ -95,6 +185,7 @@ export {
   createPopup,
   resolvePopup,
   showAlert,
+  showInput,
   showConfirm,
   // dateSelector
   createDateInput,
@@ -119,5 +210,7 @@ export {
   requestAnimationFrame,
   offset,
   // base classes
-  OptionBase
+  OptionBase,
+  // notify
+  notify
 }