@authme/util 2.8.2 → 2.8.4

package/index.cjs

@@ -835,7 +835,9 @@ function debugTools() {
       const debugImage = yield getDebugImageData(data);
       // 創建一個虛擬的 canvas
       const canvas = document.createElement('canvas');
-      const ctx = canvas.getContext('2d');
+      const ctx = canvas.getContext('2d', {
+        willReadFrequently: true
+      });
       // 設置 canvas 的尺寸
       canvas.width = width;
       canvas.height = height;
@@ -916,7 +918,9 @@ function getImageData(canvas, ctx, video, sizeInfo, base64 = false, imageType =
 }
 
 function clearCanvas(canvas) {
-  const ctx = canvas.getContext('2d');
+  const ctx = canvas.getContext('2d', {
+    willReadFrequently: true
+  });
   ctx.clearRect(0, 0, canvas.width, canvas.height);
 }
 
@@ -1030,7 +1034,29 @@ const uiThemeHint = (dom, hintStyle) => {
   dom.style.fontWeight = fontWeight[hintStyle.textWeight];
   dom.style.fontSize = `${hintStyle.fontSize}px`;
 };
-const uiThemeButton = (dom, buttonStyle) => {
+const uiThemeButton = (dom, buttonStyle, disabled) => {
+  dom.style.opacity = buttonStyle.backgroundOpacity;
+  if (disabled) {
+    dom.style.color = buttonStyle.disabledTextColor;
+    dom.style.borderRadius = `${buttonStyle.cornerRadius}px`;
+    dom.style.backgroundColor = buttonStyle.disabledBackgroundColor;
+    dom.style.borderColor = hexToRgba(buttonStyle.disabledBorderColor, buttonStyle.borderOpacity);
+  } else {
+    dom.style.color = buttonStyle.textColor;
+    dom.style.borderRadius = `${buttonStyle.cornerRadius}px`;
+    dom.style.backgroundColor = buttonStyle.backgroundColor;
+    dom.style.borderColor = hexToRgba(buttonStyle.borderColor, buttonStyle.borderOpacity);
+  }
+  dom.style.borderWidth = `${buttonStyle.borderWidth}px`;
+  dom.style.fontWeight = fontWeight[buttonStyle.textWeight];
+  dom.style.fontSize = `${buttonStyle.fontSize}px`;
+  dom.style.borderStyle = 'solid';
+  // dom.style.height = `${buttonStyle.cornerRadius * 2}px`;
+  dom.style.height = `48px`;
+  dom.style.width = `calc(100% - ${buttonStyle.cornerRadius * 2}px)`;
+  dom.style.maxWidth = `327px`;
+};
+const uiThemeSmallButton = (dom, buttonStyle) => {
   dom.style.borderRadius = `${buttonStyle.cornerRadius}px`;
   dom.style.backgroundColor = buttonStyle.backgroundColor;
   dom.style.opacity = buttonStyle.backgroundOpacity;
@@ -1040,9 +1066,10 @@ const uiThemeButton = (dom, buttonStyle) => {
   dom.style.fontWeight = fontWeight[buttonStyle.textWeight];
   dom.style.fontSize = `${buttonStyle.fontSize}px`;
   dom.style.borderStyle = 'solid';
-  dom.style.height = `${buttonStyle.cornerRadius * 2}px`;
+  // dom.style.height = `${buttonStyle.cornerRadius * 2}px`;
+  dom.style.height = `30px`;
   dom.style.width = `calc(100% - ${buttonStyle.cornerRadius * 2}px)`;
-  dom.style.maxWidth = `327px`;
+  dom.style.maxWidth = `106px`;
 };
 
 function startSpinner(args) {
@@ -2659,6 +2686,46 @@ const uploadModal = arg => {
   };
 };
 
+const dropMenu = function dropMenu(dom, callback) {
+  if (!dom) {
+    console.error('dom is required');
+    return;
+  }
+  const ul = dom.querySelector('ul');
+  const ulSection = dom.querySelector('section');
+  const list = dom.querySelectorAll('li');
+  dom.querySelector('.drop_menu_title').addEventListener('click', function (e) {
+    e.stopPropagation();
+    ulSection.classList.toggle('hide');
+    dom.querySelector('.drop_menu_title').classList.toggle('focus');
+  });
+  for (let i = 0; i < list.length; i++) {
+    const element = list[i];
+    element.addEventListener('click', function (e) {
+      e.stopPropagation();
+      if (ul.querySelector('.active')) {
+        ul.querySelector('.active').classList.remove('active');
+      }
+      this.classList.add('active');
+      dom.querySelector('.drop_menu_title span').innerText = this.innerText.trim();
+      if (callback) {
+        callback(this);
+      }
+      ulSection.classList.toggle('hide');
+      dom.querySelector('.drop_menu_title').classList.toggle('focus');
+    });
+  }
+  window.addEventListener('click', function (e) {
+    e.stopPropagation();
+    if (!ulSection.classList.contains('hide')) {
+      ulSection.classList.add('hide');
+    }
+    if (dom.querySelector('.drop_menu_title').classList.contains('focus')) {
+      dom.querySelector('.drop_menu_title').classList.remove('focus');
+    }
+  });
+};
+
 const QUEUE_LENGTH = 10;
 const requstQueue = [];
 function pushRequest(request) {
@@ -2962,12 +3029,33 @@ const themeConfigDefault = {
     textColor: '#E0E0E0',
     textWeight: 'regular',
     fontSize: 12
+  },
+  resultTitle: {
+    // G.6
+    // Figma標示resultPage_text_title
+    textColor: '#25608A',
+    textWeight: 'medium',
+    fontSize: 22
+  },
+  resultBody: {
+    // G.7
+    // Figma標示resultPage_text_body
+    textColor: '#757575',
+    textWeight: 'regular',
+    fontSize: 14
+  },
+  resultTime: {
+    // G.8
+    // Figma標示resultPage_timeText
+    textColor: '#FF3B30',
+    textWeight: 'medium',
+    fontSize: 16
   }
 };
 
 var name = "authme/sdk";
-var version$1 = "2.8.2";
-var date = "2025-02-26T06:47:43+0000";
+var version$1 = "2.8.4";
+var date = "2025-03-13T06:47:53+0000";
 var packageInfo = {
 	name: name,
 	version: version$1,
@@ -2998,6 +3086,7 @@ exports.dataURItoBlob = dataURItoBlob;
 exports.debugLog = debugLog;
 exports.debugTools = debugTools;
 exports.decodeToken = decodeToken;
+exports.dropMenu = dropMenu;
 exports.fontWeight = fontWeight;
 exports.getCanvasSize = getCanvasSize;
 exports.getCssVariable = getCssVariable;
@@ -3028,6 +3117,7 @@ exports.switchCamera = switchCamera;
 exports.themeConfigDefault = themeConfigDefault;
 exports.uiThemeButton = uiThemeButton;
 exports.uiThemeHint = uiThemeHint;
+exports.uiThemeSmallButton = uiThemeSmallButton;
 exports.uiThemeText = uiThemeText;
 exports.uploadModal = uploadModal;
 exports.useState = useState;

package/index.js

@@ -825,7 +825,9 @@ function debugTools() {
       const debugImage = yield getDebugImageData(data);
       // 創建一個虛擬的 canvas
       const canvas = document.createElement('canvas');
-      const ctx = canvas.getContext('2d');
+      const ctx = canvas.getContext('2d', {
+        willReadFrequently: true
+      });
       // 設置 canvas 的尺寸
       canvas.width = width;
       canvas.height = height;
@@ -906,7 +908,9 @@ function getImageData(canvas, ctx, video, sizeInfo, base64 = false, imageType =
 }
 
 function clearCanvas(canvas) {
-  const ctx = canvas.getContext('2d');
+  const ctx = canvas.getContext('2d', {
+    willReadFrequently: true
+  });
   ctx.clearRect(0, 0, canvas.width, canvas.height);
 }
 
@@ -1020,7 +1024,29 @@ const uiThemeHint = (dom, hintStyle) => {
   dom.style.fontWeight = fontWeight[hintStyle.textWeight];
   dom.style.fontSize = `${hintStyle.fontSize}px`;
 };
-const uiThemeButton = (dom, buttonStyle) => {
+const uiThemeButton = (dom, buttonStyle, disabled) => {
+  dom.style.opacity = buttonStyle.backgroundOpacity;
+  if (disabled) {
+    dom.style.color = buttonStyle.disabledTextColor;
+    dom.style.borderRadius = `${buttonStyle.cornerRadius}px`;
+    dom.style.backgroundColor = buttonStyle.disabledBackgroundColor;
+    dom.style.borderColor = hexToRgba(buttonStyle.disabledBorderColor, buttonStyle.borderOpacity);
+  } else {
+    dom.style.color = buttonStyle.textColor;
+    dom.style.borderRadius = `${buttonStyle.cornerRadius}px`;
+    dom.style.backgroundColor = buttonStyle.backgroundColor;
+    dom.style.borderColor = hexToRgba(buttonStyle.borderColor, buttonStyle.borderOpacity);
+  }
+  dom.style.borderWidth = `${buttonStyle.borderWidth}px`;
+  dom.style.fontWeight = fontWeight[buttonStyle.textWeight];
+  dom.style.fontSize = `${buttonStyle.fontSize}px`;
+  dom.style.borderStyle = 'solid';
+  // dom.style.height = `${buttonStyle.cornerRadius * 2}px`;
+  dom.style.height = `48px`;
+  dom.style.width = `calc(100% - ${buttonStyle.cornerRadius * 2}px)`;
+  dom.style.maxWidth = `327px`;
+};
+const uiThemeSmallButton = (dom, buttonStyle) => {
   dom.style.borderRadius = `${buttonStyle.cornerRadius}px`;
   dom.style.backgroundColor = buttonStyle.backgroundColor;
   dom.style.opacity = buttonStyle.backgroundOpacity;
@@ -1030,9 +1056,10 @@ const uiThemeButton = (dom, buttonStyle) => {
   dom.style.fontWeight = fontWeight[buttonStyle.textWeight];
   dom.style.fontSize = `${buttonStyle.fontSize}px`;
   dom.style.borderStyle = 'solid';
-  dom.style.height = `${buttonStyle.cornerRadius * 2}px`;
+  // dom.style.height = `${buttonStyle.cornerRadius * 2}px`;
+  dom.style.height = `30px`;
   dom.style.width = `calc(100% - ${buttonStyle.cornerRadius * 2}px)`;
-  dom.style.maxWidth = `327px`;
+  dom.style.maxWidth = `106px`;
 };
 
 function startSpinner(args) {
@@ -2649,6 +2676,46 @@ const uploadModal = arg => {
   };
 };
 
+const dropMenu = function dropMenu(dom, callback) {
+  if (!dom) {
+    console.error('dom is required');
+    return;
+  }
+  const ul = dom.querySelector('ul');
+  const ulSection = dom.querySelector('section');
+  const list = dom.querySelectorAll('li');
+  dom.querySelector('.drop_menu_title').addEventListener('click', function (e) {
+    e.stopPropagation();
+    ulSection.classList.toggle('hide');
+    dom.querySelector('.drop_menu_title').classList.toggle('focus');
+  });
+  for (let i = 0; i < list.length; i++) {
+    const element = list[i];
+    element.addEventListener('click', function (e) {
+      e.stopPropagation();
+      if (ul.querySelector('.active')) {
+        ul.querySelector('.active').classList.remove('active');
+      }
+      this.classList.add('active');
+      dom.querySelector('.drop_menu_title span').innerText = this.innerText.trim();
+      if (callback) {
+        callback(this);
+      }
+      ulSection.classList.toggle('hide');
+      dom.querySelector('.drop_menu_title').classList.toggle('focus');
+    });
+  }
+  window.addEventListener('click', function (e) {
+    e.stopPropagation();
+    if (!ulSection.classList.contains('hide')) {
+      ulSection.classList.add('hide');
+    }
+    if (dom.querySelector('.drop_menu_title').classList.contains('focus')) {
+      dom.querySelector('.drop_menu_title').classList.remove('focus');
+    }
+  });
+};
+
 const QUEUE_LENGTH = 10;
 const requstQueue = [];
 function pushRequest(request) {
@@ -2952,12 +3019,33 @@ const themeConfigDefault = {
     textColor: '#E0E0E0',
     textWeight: 'regular',
     fontSize: 12
+  },
+  resultTitle: {
+    // G.6
+    // Figma標示resultPage_text_title
+    textColor: '#25608A',
+    textWeight: 'medium',
+    fontSize: 22
+  },
+  resultBody: {
+    // G.7
+    // Figma標示resultPage_text_body
+    textColor: '#757575',
+    textWeight: 'regular',
+    fontSize: 14
+  },
+  resultTime: {
+    // G.8
+    // Figma標示resultPage_timeText
+    textColor: '#FF3B30',
+    textWeight: 'medium',
+    fontSize: 16
   }
 };
 
 var name = "authme/sdk";
-var version$1 = "2.8.2";
-var date = "2025-02-26T06:47:43+0000";
+var version$1 = "2.8.4";
+var date = "2025-03-13T06:47:53+0000";
 var packageInfo = {
 	name: name,
 	version: version$1,
@@ -2970,4 +3058,4 @@ const version = packageInfo.version;
 (_a = (_b = window)[_c = Symbol.for('authme-sdk')]) !== null && _a !== void 0 ? _a : _b[_c] = {};
 window[Symbol.for('authme-sdk')][packageInfo.name] = version;
 
-export { AuthmeError, ErrorCode, Icon, RGBToLottieColor, RUN_FUNCTION_NAME, STORAGE_KEY, Storage, TIME_UNIT, UintArrayToBlob, asyncOnLineShowErrorMessage, asyncShowErrorMessage, asyncShowPopup, backgroundRequest, checkOnlineStatus, clearCanvas, colorStringToRGB, colorToRGB, combineResult, cropByRatio, dataURItoBlob, debugLog, debugTools, decodeToken, fontWeight, getCanvasSize, getCssVariable, getDeviceInfo, getImageData, getSystemInfo, hexToRGB, hideElement, hideErrorMessage, hidePopup, isIphone14proOrProMax, isMobile, isMobileOrTablet, osVersion, requestCamera, resize, retryPromiseWithCondition, showElement, showErrorMessage, showErrorMessageEventName, showPopup, splitResult, startLoadingSDK, startSpinner, stopLoadingSDK, stopSpinner, switchCamera, themeConfigDefault, uiThemeButton, uiThemeHint, uiThemeText, uploadModal, useState, verificationErrorMessages, version, videoConstraintsFactory, waitTime };
+export { AuthmeError, ErrorCode, Icon, RGBToLottieColor, RUN_FUNCTION_NAME, STORAGE_KEY, Storage, TIME_UNIT, UintArrayToBlob, asyncOnLineShowErrorMessage, asyncShowErrorMessage, asyncShowPopup, backgroundRequest, checkOnlineStatus, clearCanvas, colorStringToRGB, colorToRGB, combineResult, cropByRatio, dataURItoBlob, debugLog, debugTools, decodeToken, dropMenu, fontWeight, getCanvasSize, getCssVariable, getDeviceInfo, getImageData, getSystemInfo, hexToRGB, hideElement, hideErrorMessage, hidePopup, isIphone14proOrProMax, isMobile, isMobileOrTablet, osVersion, requestCamera, resize, retryPromiseWithCondition, showElement, showErrorMessage, showErrorMessageEventName, showPopup, splitResult, startLoadingSDK, startSpinner, stopLoadingSDK, stopSpinner, switchCamera, themeConfigDefault, uiThemeButton, uiThemeHint, uiThemeSmallButton, uiThemeText, uploadModal, useState, verificationErrorMessages, version, videoConstraintsFactory, waitTime };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@authme/util",
-  "version": "2.8.2",
+  "version": "2.8.4",
   "peerDependencies": {
     "core-js": "^3.6.0",
     "jwt-decode": "3.1.2",

package/src/ui/dropMenu.d.ts

@@ -0,0 +1 @@
+export declare const dropMenu: (dom: any, callback: any) => void;

package/src/ui/index.d.ts

@@ -9,3 +9,4 @@ export * from './sdk-loading';
 export * from './cssToJs';
 export * from './uiThemeStyle';
 export * from './uploadModal';
+export * from './dropMenu';

package/src/ui/uiThemeStyle.d.ts

@@ -1,4 +1,5 @@
 export declare const fontWeight: any;
 export declare const uiThemeText: (dom: any, textStyle: any) => void;
 export declare const uiThemeHint: (dom: any, hintStyle: any) => void;
-export declare const uiThemeButton: (dom: any, buttonStyle: any) => void;
+export declare const uiThemeButton: (dom: any, buttonStyle: any, disabled?: boolean) => void;
+export declare const uiThemeSmallButton: (dom: any, buttonStyle: any) => void;