@y14e/tabs 1.5.4 → 1.5.6

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 (6) hide show
  1. package/README.md +4 -4
  2. package/dist/index.cjs +20 -26
  3. package/dist/index.d.cts +1 -1
  4. package/dist/index.d.ts +1 -1
  5. package/dist/index.js +20 -26
  6. package/package.json +1 -1
package/README.md CHANGED
@@ -10,14 +10,14 @@ npm i @y14e/tabs
10
10
 
11
11
  ```ts
12
12
  // npm
13
- import Tabs from '@y14e/tabs@1.5.4';
13
+ import Tabs from '@y14e/tabs@1.5.6';
14
14
 
15
15
  // CDNs
16
- import Tabs from 'https://esm.sh/@y14e/tabs@1.5.4';
16
+ import Tabs from 'https://esm.sh/@y14e/tabs@1.5.6';
17
17
  // or
18
- import Tabs from 'https://cdn.jsdelivr.net/npm/@y14e/tabs@1.5.4/+esm';
18
+ import Tabs from 'https://cdn.jsdelivr.net/npm/@y14e/tabs@1.5.6/+esm';
19
19
  // or
20
- import Tabs from 'https://esm.unpkg.com/@y14e/tabs@1.5.4';
20
+ import Tabs from 'https://esm.unpkg.com/@y14e/tabs@1.5.6';
21
21
  ```
22
22
 
23
23
  ## Usage
package/dist/index.cjs CHANGED
@@ -761,14 +761,14 @@ var Tabs = class _Tabs {
761
761
  const { style } = this.#contentElement;
762
762
  style.setProperty("overflow", "clip");
763
763
  style.setProperty("position", "relative");
764
- const { fade, crossFade } = this.#settings.animation.content;
764
+ const { crossFade, fade } = this.#settings.animation.content;
765
765
  const panel = this.#bindings.get(tab)?.panel;
766
766
  if (!panel) {
767
767
  return;
768
768
  }
769
769
  this.#panelElements.forEach((p) => {
770
770
  const { style: style2 } = p;
771
- if (fade || crossFade) {
771
+ if (crossFade || fade) {
772
772
  style2.setProperty("content-visibility", "visible");
773
773
  style2.setProperty("display", "block");
774
774
  style2.setProperty("opacity", p.hidden ? "0" : "1");
@@ -835,7 +835,7 @@ var Tabs = class _Tabs {
835
835
  opacity: fade ? isSelected ? [opacity, opacity, "1"] : [opacity, "0", "0"] : isSelected ? [opacity, "1"] : [opacity, "0"]
836
836
  },
837
837
  {
838
- duration: isMatch || !(fade || crossFade) ? 0 : this.#settings.animation.content.duration,
838
+ duration: isMatch || !(crossFade || fade) ? 0 : this.#settings.animation.content.duration,
839
839
  easing: "ease"
840
840
  }
841
841
  );
@@ -888,10 +888,7 @@ var Tabs = class _Tabs {
888
888
  );
889
889
  }
890
890
  this.#panelElements.forEach((panel) => {
891
- const animation = this.#bindings.get(panel)?.animation;
892
- if (animation) {
893
- animation.cancel();
894
- }
891
+ this.#bindings.get(panel)?.animation?.cancel();
895
892
  });
896
893
  this.#onAnimationFinish();
897
894
  this.#animationController?.abort();
@@ -973,11 +970,9 @@ var Tabs = class _Tabs {
973
970
  });
974
971
  const options = { selector: this.#settings.selector.tab, wrap: true };
975
972
  this.#listElements.forEach((list) => {
976
- if (list.ariaOrientation !== "undefined") {
977
- Object.assign(options, {
978
- direction: this.#settings.vertical ? "vertical" : "horizontal"
979
- });
980
- }
973
+ list.ariaOrientation !== "undefined" && Object.assign(options, {
974
+ direction: this.#settings.vertical ? "vertical" : "horizontal"
975
+ });
981
976
  this.#cleanupsRovingTabIndex.push(createRovingTabIndex(list, options));
982
977
  list.querySelectorAll(this.#settings.selector.tab).forEach((tab) => {
983
978
  tab.setAttribute(
@@ -1043,20 +1038,19 @@ var Tabs = class _Tabs {
1043
1038
  };
1044
1039
  }
1045
1040
  #onAnimationFinish() {
1046
- if (!this.#contentElement) {
1047
- return;
1048
- }
1049
- const { style } = this.#contentElement;
1050
- style.removeProperty("block-size");
1051
- style.removeProperty("overflow");
1052
- style.removeProperty("position");
1041
+ ["block-size", "overflow", "position"].forEach((name) => {
1042
+ this.#contentElement?.style.removeProperty(name);
1043
+ });
1053
1044
  this.#panelElements.forEach((panel) => {
1054
- const { style: style2 } = panel;
1055
- style2.removeProperty("content-visibility");
1056
- style2.removeProperty("display");
1057
- style2.removeProperty("inline-size");
1058
- style2.removeProperty("opacity");
1059
- style2.removeProperty("position");
1045
+ [
1046
+ "content-visibility",
1047
+ "display",
1048
+ "inline-size",
1049
+ "opacity",
1050
+ "position"
1051
+ ].forEach((name) => {
1052
+ panel.style.removeProperty(name);
1053
+ });
1060
1054
  });
1061
1055
  this.#rootElement.removeAttribute("data-tabs-animating");
1062
1056
  }
@@ -1146,7 +1140,7 @@ function isFocusable2(element) {
1146
1140
  * Tabs
1147
1141
  * WAI-ARIA compliant tabs pattern implementation in TypeScript.
1148
1142
  *
1149
- * @version 1.5.4
1143
+ * @version 1.5.6
1150
1144
  * @author Yusuke Kamiyamane
1151
1145
  * @license MIT
1152
1146
  * @copyright Copyright (c) Yusuke Kamiyamane
package/dist/index.d.cts CHANGED
@@ -2,7 +2,7 @@
2
2
  * Tabs
3
3
  * WAI-ARIA compliant tabs pattern implementation in TypeScript.
4
4
  *
5
- * @version 1.5.4
5
+ * @version 1.5.6
6
6
  * @author Yusuke Kamiyamane
7
7
  * @license MIT
8
8
  * @copyright Copyright (c) Yusuke Kamiyamane
package/dist/index.d.ts CHANGED
@@ -2,7 +2,7 @@
2
2
  * Tabs
3
3
  * WAI-ARIA compliant tabs pattern implementation in TypeScript.
4
4
  *
5
- * @version 1.5.4
5
+ * @version 1.5.6
6
6
  * @author Yusuke Kamiyamane
7
7
  * @license MIT
8
8
  * @copyright Copyright (c) Yusuke Kamiyamane
package/dist/index.js CHANGED
@@ -759,14 +759,14 @@ var Tabs = class _Tabs {
759
759
  const { style } = this.#contentElement;
760
760
  style.setProperty("overflow", "clip");
761
761
  style.setProperty("position", "relative");
762
- const { fade, crossFade } = this.#settings.animation.content;
762
+ const { crossFade, fade } = this.#settings.animation.content;
763
763
  const panel = this.#bindings.get(tab)?.panel;
764
764
  if (!panel) {
765
765
  return;
766
766
  }
767
767
  this.#panelElements.forEach((p) => {
768
768
  const { style: style2 } = p;
769
- if (fade || crossFade) {
769
+ if (crossFade || fade) {
770
770
  style2.setProperty("content-visibility", "visible");
771
771
  style2.setProperty("display", "block");
772
772
  style2.setProperty("opacity", p.hidden ? "0" : "1");
@@ -833,7 +833,7 @@ var Tabs = class _Tabs {
833
833
  opacity: fade ? isSelected ? [opacity, opacity, "1"] : [opacity, "0", "0"] : isSelected ? [opacity, "1"] : [opacity, "0"]
834
834
  },
835
835
  {
836
- duration: isMatch || !(fade || crossFade) ? 0 : this.#settings.animation.content.duration,
836
+ duration: isMatch || !(crossFade || fade) ? 0 : this.#settings.animation.content.duration,
837
837
  easing: "ease"
838
838
  }
839
839
  );
@@ -886,10 +886,7 @@ var Tabs = class _Tabs {
886
886
  );
887
887
  }
888
888
  this.#panelElements.forEach((panel) => {
889
- const animation = this.#bindings.get(panel)?.animation;
890
- if (animation) {
891
- animation.cancel();
892
- }
889
+ this.#bindings.get(panel)?.animation?.cancel();
893
890
  });
894
891
  this.#onAnimationFinish();
895
892
  this.#animationController?.abort();
@@ -971,11 +968,9 @@ var Tabs = class _Tabs {
971
968
  });
972
969
  const options = { selector: this.#settings.selector.tab, wrap: true };
973
970
  this.#listElements.forEach((list) => {
974
- if (list.ariaOrientation !== "undefined") {
975
- Object.assign(options, {
976
- direction: this.#settings.vertical ? "vertical" : "horizontal"
977
- });
978
- }
971
+ list.ariaOrientation !== "undefined" && Object.assign(options, {
972
+ direction: this.#settings.vertical ? "vertical" : "horizontal"
973
+ });
979
974
  this.#cleanupsRovingTabIndex.push(createRovingTabIndex(list, options));
980
975
  list.querySelectorAll(this.#settings.selector.tab).forEach((tab) => {
981
976
  tab.setAttribute(
@@ -1041,20 +1036,19 @@ var Tabs = class _Tabs {
1041
1036
  };
1042
1037
  }
1043
1038
  #onAnimationFinish() {
1044
- if (!this.#contentElement) {
1045
- return;
1046
- }
1047
- const { style } = this.#contentElement;
1048
- style.removeProperty("block-size");
1049
- style.removeProperty("overflow");
1050
- style.removeProperty("position");
1039
+ ["block-size", "overflow", "position"].forEach((name) => {
1040
+ this.#contentElement?.style.removeProperty(name);
1041
+ });
1051
1042
  this.#panelElements.forEach((panel) => {
1052
- const { style: style2 } = panel;
1053
- style2.removeProperty("content-visibility");
1054
- style2.removeProperty("display");
1055
- style2.removeProperty("inline-size");
1056
- style2.removeProperty("opacity");
1057
- style2.removeProperty("position");
1043
+ [
1044
+ "content-visibility",
1045
+ "display",
1046
+ "inline-size",
1047
+ "opacity",
1048
+ "position"
1049
+ ].forEach((name) => {
1050
+ panel.style.removeProperty(name);
1051
+ });
1058
1052
  });
1059
1053
  this.#rootElement.removeAttribute("data-tabs-animating");
1060
1054
  }
@@ -1144,7 +1138,7 @@ function isFocusable2(element) {
1144
1138
  * Tabs
1145
1139
  * WAI-ARIA compliant tabs pattern implementation in TypeScript.
1146
1140
  *
1147
- * @version 1.5.4
1141
+ * @version 1.5.6
1148
1142
  * @author Yusuke Kamiyamane
1149
1143
  * @license MIT
1150
1144
  * @copyright Copyright (c) Yusuke Kamiyamane
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@y14e/tabs",
3
- "version": "1.5.4",
3
+ "version": "1.5.6",
4
4
  "description": "WAI-ARIA compliant tabs pattern implementation in TypeScript",
5
5
  "type": "module",
6
6
  "main": "./dist/index.cjs",