@idds/js 1.0.75 → 1.0.77

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/index.iife.js +71 -45
  2. package/dist/index.js +71 -45
  3. package/package.json +1 -1
package/dist/index.iife.js CHANGED
@@ -2698,72 +2698,98 @@ var InaUI = (() => {
2698
2698
  }
2699
2699
 
2700
2700
  // src/js/components/stateless/toast.js
2701
- function showToast(optionsOrMessage, variant = "default", duration = 3e3) {
2702
- let message, title, state, style, position, actionHtml;
2703
- if (typeof optionsOrMessage === "object") {
2704
- message = optionsOrMessage.message || "";
2705
- title = optionsOrMessage.title;
2706
- state = optionsOrMessage.state || "default";
2707
- style = optionsOrMessage.style || "solid";
2708
- duration = optionsOrMessage.duration || 3e3;
2709
- position = optionsOrMessage.position || "top-right";
2710
- actionHtml = optionsOrMessage.actionHtml || "";
2711
- } else {
2712
- message = optionsOrMessage;
2713
- state = variant;
2714
- style = "solid";
2715
- position = "top-right";
2716
- actionHtml = "";
2717
- }
2718
- let containerId = `ina-toast-container-${position}`;
2701
+ var ICONS3 = {
2702
+ default: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>`,
2703
+ destructive: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>`,
2704
+ positive: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>`
2705
+ };
2706
+ function getOrCreateContainer(position) {
2707
+ const containerId = `ina-toast-container-${position}`;
2719
2708
  let container = document.getElementById(containerId);
2720
2709
  if (!container) {
2721
2710
  container = document.createElement("div");
2722
2711
  container.id = containerId;
2723
2712
  container.className = `ina-toast-container ina-toast-container--${position}`;
2713
+ container.style.maxHeight = "calc(100vh - 32px)";
2714
+ container.style.overflow = "auto";
2724
2715
  document.body.appendChild(container);
2725
2716
  }
2717
+ return container;
2718
+ }
2719
+ function createToastElement({ title, message, state, style, actionHtml }) {
2726
2720
  const toastItem = document.createElement("div");
2727
2721
  toastItem.className = "ina-toast-item";
2728
2722
  const toast = document.createElement("div");
2729
- toast.className = `ina-toast ina-toast--state-${state} ina-toast--style-${style} ina-toast--visible`;
2730
- const iconMap = {
2731
- default: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>',
2732
- destructive: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>',
2733
- positive: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>'
2734
- };
2735
- const iconHtml = iconMap[state] || iconMap.default;
2736
- let contentHtml = `
2737
- <div class="ina-toast__icon">${iconHtml}</div>
2738
- <div class="ina-toast__content">
2739
- <div class="ina-toast__text-area">
2740
- ${title ? `<p class="ina-toast__title">${title}</p>` : ""}
2741
- ${message ? `<p class="ina-toast__description">${message}</p>` : ""}
2742
- </div>
2743
- ${actionHtml ? `<div class="ina-toast__action-area">${actionHtml}</div>` : ""}
2744
- </div>
2745
- <button class="ina-toast__close-button">
2746
- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ina-toast__close-icon"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
2747
- </button>
2723
+ toast.className = `ina-toast ina-toast--state-${state} ina-toast--style-${style} ina-toast--hidden`;
2724
+ const iconHtml = ICONS3[state] || ICONS3.default;
2725
+ const contentHtml = `
2726
+ <div class="ina-toast__icon">${iconHtml}</div>
2727
+ <div class="ina-toast__content">
2728
+ <div class="ina-toast__text-area">
2729
+ <p class="ina-toast__title">${title || message || ""}</p>
2730
+ ${title && message ? `<p class="ina-toast__description">${message}</p>` : ""}
2731
+ </div>
2732
+ ${actionHtml ? `<div class="ina-toast__action-area">${actionHtml}</div>` : ""}
2733
+ </div>
2734
+ <button class="ina-toast__close-button" aria-label="Tutup notifikasi">
2735
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ina-toast__close-icon"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
2736
+ </button>
2748
2737
  `;
2749
2738
  toast.innerHTML = contentHtml;
2750
2739
  toastItem.appendChild(toast);
2751
- const closeBtn = toast.querySelector(".ina-toast__close-button");
2740
+ return { toastItem, toast };
2741
+ }
2742
+ function showToast(optionsOrMessage, variant = "default", duration = 5e3) {
2743
+ const options = typeof optionsOrMessage === "string" ? {
2744
+ message: optionsOrMessage,
2745
+ state: variant,
2746
+ duration
2747
+ } : optionsOrMessage || {};
2748
+ const {
2749
+ message = "",
2750
+ title = "",
2751
+ state = "default",
2752
+ style = "solid",
2753
+ duration: autoCloseDuration = 5e3,
2754
+ position = "top-right",
2755
+ actionHtml = ""
2756
+ } = options;
2757
+ const container = getOrCreateContainer(position);
2758
+ const { toastItem, toast } = createToastElement({
2759
+ title,
2760
+ message,
2761
+ state,
2762
+ style,
2763
+ actionHtml
2764
+ });
2765
+ container.appendChild(toastItem);
2766
+ requestAnimationFrame(() => {
2767
+ toast.offsetHeight;
2768
+ toast.classList.remove("ina-toast--hidden");
2769
+ toast.classList.add("ina-toast--visible");
2770
+ });
2752
2771
  const close = () => {
2753
2772
  toast.classList.remove("ina-toast--visible");
2754
2773
  toast.classList.add("ina-toast--hidden");
2755
2774
  setTimeout(() => {
2756
- if (toastItem.parentNode) toastItem.parentNode.removeChild(toastItem);
2757
- if (container.children.length === 0) {
2758
- if (container.parentNode) container.parentNode.removeChild(container);
2775
+ if (toastItem.parentNode === container) {
2776
+ container.removeChild(toastItem);
2777
+ }
2778
+ if (container.children.length === 0 && container.parentNode) {
2779
+ container.parentNode.removeChild(container);
2759
2780
  }
2760
2781
  }, 300);
2761
2782
  };
2762
- closeBtn.addEventListener("click", close);
2763
- container.appendChild(toastItem);
2764
- if (duration > 0) {
2765
- setTimeout(close, duration);
2783
+ const closeBtn = toast.querySelector(".ina-toast__close-button");
2784
+ if (closeBtn) {
2785
+ closeBtn.addEventListener("click", close);
2786
+ }
2787
+ if (autoCloseDuration > 0) {
2788
+ setTimeout(close, autoCloseDuration);
2766
2789
  }
2790
+ return {
2791
+ close
2792
+ };
2767
2793
  }
2768
2794
 
2769
2795
  // src/js/utils/theme.js
package/dist/index.js CHANGED
@@ -2857,72 +2857,98 @@ function initTabHorizontal() {
2857
2857
  }
2858
2858
 
2859
2859
  // src/js/components/stateless/toast.js
2860
- function showToast(optionsOrMessage, variant = "default", duration = 3e3) {
2861
- let message, title, state, style, position, actionHtml;
2862
- if (typeof optionsOrMessage === "object") {
2863
- message = optionsOrMessage.message || "";
2864
- title = optionsOrMessage.title;
2865
- state = optionsOrMessage.state || "default";
2866
- style = optionsOrMessage.style || "solid";
2867
- duration = optionsOrMessage.duration || 3e3;
2868
- position = optionsOrMessage.position || "top-right";
2869
- actionHtml = optionsOrMessage.actionHtml || "";
2870
- } else {
2871
- message = optionsOrMessage;
2872
- state = variant;
2873
- style = "solid";
2874
- position = "top-right";
2875
- actionHtml = "";
2876
- }
2877
- let containerId = `ina-toast-container-${position}`;
2860
+ var ICONS3 = {
2861
+ default: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>`,
2862
+ destructive: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>`,
2863
+ positive: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>`
2864
+ };
2865
+ function getOrCreateContainer(position) {
2866
+ const containerId = `ina-toast-container-${position}`;
2878
2867
  let container = document.getElementById(containerId);
2879
2868
  if (!container) {
2880
2869
  container = document.createElement("div");
2881
2870
  container.id = containerId;
2882
2871
  container.className = `ina-toast-container ina-toast-container--${position}`;
2872
+ container.style.maxHeight = "calc(100vh - 32px)";
2873
+ container.style.overflow = "auto";
2883
2874
  document.body.appendChild(container);
2884
2875
  }
2876
+ return container;
2877
+ }
2878
+ function createToastElement({ title, message, state, style, actionHtml }) {
2885
2879
  const toastItem = document.createElement("div");
2886
2880
  toastItem.className = "ina-toast-item";
2887
2881
  const toast = document.createElement("div");
2888
- toast.className = `ina-toast ina-toast--state-${state} ina-toast--style-${style} ina-toast--visible`;
2889
- const iconMap = {
2890
- default: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>',
2891
- destructive: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>',
2892
- positive: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>'
2893
- };
2894
- const iconHtml = iconMap[state] || iconMap.default;
2895
- let contentHtml = `
2896
- <div class="ina-toast__icon">${iconHtml}</div>
2897
- <div class="ina-toast__content">
2898
- <div class="ina-toast__text-area">
2899
- ${title ? `<p class="ina-toast__title">${title}</p>` : ""}
2900
- ${message ? `<p class="ina-toast__description">${message}</p>` : ""}
2901
- </div>
2902
- ${actionHtml ? `<div class="ina-toast__action-area">${actionHtml}</div>` : ""}
2903
- </div>
2904
- <button class="ina-toast__close-button">
2905
- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ina-toast__close-icon"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
2906
- </button>
2882
+ toast.className = `ina-toast ina-toast--state-${state} ina-toast--style-${style} ina-toast--hidden`;
2883
+ const iconHtml = ICONS3[state] || ICONS3.default;
2884
+ const contentHtml = `
2885
+ <div class="ina-toast__icon">${iconHtml}</div>
2886
+ <div class="ina-toast__content">
2887
+ <div class="ina-toast__text-area">
2888
+ <p class="ina-toast__title">${title || message || ""}</p>
2889
+ ${title && message ? `<p class="ina-toast__description">${message}</p>` : ""}
2890
+ </div>
2891
+ ${actionHtml ? `<div class="ina-toast__action-area">${actionHtml}</div>` : ""}
2892
+ </div>
2893
+ <button class="ina-toast__close-button" aria-label="Tutup notifikasi">
2894
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ina-toast__close-icon"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
2895
+ </button>
2907
2896
  `;
2908
2897
  toast.innerHTML = contentHtml;
2909
2898
  toastItem.appendChild(toast);
2910
- const closeBtn = toast.querySelector(".ina-toast__close-button");
2899
+ return { toastItem, toast };
2900
+ }
2901
+ function showToast(optionsOrMessage, variant = "default", duration = 5e3) {
2902
+ const options = typeof optionsOrMessage === "string" ? {
2903
+ message: optionsOrMessage,
2904
+ state: variant,
2905
+ duration
2906
+ } : optionsOrMessage || {};
2907
+ const {
2908
+ message = "",
2909
+ title = "",
2910
+ state = "default",
2911
+ style = "solid",
2912
+ duration: autoCloseDuration = 5e3,
2913
+ position = "top-right",
2914
+ actionHtml = ""
2915
+ } = options;
2916
+ const container = getOrCreateContainer(position);
2917
+ const { toastItem, toast } = createToastElement({
2918
+ title,
2919
+ message,
2920
+ state,
2921
+ style,
2922
+ actionHtml
2923
+ });
2924
+ container.appendChild(toastItem);
2925
+ requestAnimationFrame(() => {
2926
+ toast.offsetHeight;
2927
+ toast.classList.remove("ina-toast--hidden");
2928
+ toast.classList.add("ina-toast--visible");
2929
+ });
2911
2930
  const close = () => {
2912
2931
  toast.classList.remove("ina-toast--visible");
2913
2932
  toast.classList.add("ina-toast--hidden");
2914
2933
  setTimeout(() => {
2915
- if (toastItem.parentNode) toastItem.parentNode.removeChild(toastItem);
2916
- if (container.children.length === 0) {
2917
- if (container.parentNode) container.parentNode.removeChild(container);
2934
+ if (toastItem.parentNode === container) {
2935
+ container.removeChild(toastItem);
2936
+ }
2937
+ if (container.children.length === 0 && container.parentNode) {
2938
+ container.parentNode.removeChild(container);
2918
2939
  }
2919
2940
  }, 300);
2920
2941
  };
2921
- closeBtn.addEventListener("click", close);
2922
- container.appendChild(toastItem);
2923
- if (duration > 0) {
2924
- setTimeout(close, duration);
2942
+ const closeBtn = toast.querySelector(".ina-toast__close-button");
2943
+ if (closeBtn) {
2944
+ closeBtn.addEventListener("click", close);
2945
+ }
2946
+ if (autoCloseDuration > 0) {
2947
+ setTimeout(close, autoCloseDuration);
2925
2948
  }
2949
+ return {
2950
+ close
2951
+ };
2926
2952
  }
2927
2953
 
2928
2954
  // src/js/utils/theme.js
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@idds/js",
3
- "version": "1.0.75",
3
+ "version": "1.0.77",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },