@u-elements/u-tabs 0.0.2 → 0.0.3

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/u-tabs.cjs +10 -19
  2. package/dist/u-tabs.js +10 -19
  3. package/package.json +1 -1
package/dist/u-tabs.cjs CHANGED
@@ -20,10 +20,8 @@ var attachStyle = (element, css) => element.attachShadow({ mode: "closed" }).app
20
20
  );
21
21
  var asButton = (event) => {
22
22
  const isClick = "key" in event && (event.key === " " || event.key === "Enter");
23
- if (isClick)
24
- event.preventDefault();
25
- if (isClick && event.target instanceof HTMLElement)
26
- event.target.click();
23
+ if (isClick) event.preventDefault();
24
+ if (isClick && event.target instanceof HTMLElement) event.target.click();
27
25
  return isClick;
28
26
  };
29
27
  var getRoot = (node) => node.getRootNode();
@@ -48,7 +46,7 @@ var UHTMLTabsElement = class extends UHTMLElement {
48
46
  return [...this.tabs].findIndex((tab) => tab.ariaSelected === "true");
49
47
  }
50
48
  set selectedIndex(index) {
51
- this.tabs[index].ariaSelected = "true";
49
+ if (this.tabs[index]) this.tabs[index].ariaSelected = "true";
52
50
  }
53
51
  get tabs() {
54
52
  return queryWithoutNested("u-tab", this);
@@ -73,21 +71,16 @@ var UHTMLTabListElement = class extends UHTMLElement {
73
71
  const { key } = event;
74
72
  const tabs = [...this.getElementsByTagName("u-tab")];
75
73
  let index = tabs.findIndex((tab) => tab.contains(event.target));
76
- if (event.defaultPrevented || index === -1)
77
- return;
78
- if (event.type === "click")
79
- tabs[index].selected = true;
74
+ if (event.defaultPrevented || index === -1) return;
75
+ if (event.type === "click") tabs[index].selected = true;
80
76
  if (event.type === "keydown" && !asButton(event)) {
81
77
  if (key === "ArrowDown" || key === "ArrowRight")
82
78
  index = ++index % tabs.length;
83
79
  else if (key === "ArrowUp" || key === "ArrowLeft")
84
80
  index = (index || tabs.length) - 1;
85
- else if (key === "End")
86
- index = tabs.length - 1;
87
- else if (key === "Home")
88
- index = 0;
89
- else
90
- return;
81
+ else if (key === "End") index = tabs.length - 1;
82
+ else if (key === "Home") index = 0;
83
+ else return;
91
84
  event.preventDefault();
92
85
  tabs[index].focus();
93
86
  }
@@ -119,8 +112,7 @@ var UHTMLTabElement = class extends UHTMLElement {
119
112
  });
120
113
  tabs.forEach((tab, index) => {
121
114
  const panel = getPanel(tab) || panels[index] || null;
122
- if (selected === tab && panel)
123
- selectedPanel = panel;
115
+ if (selected === tab && panel) selectedPanel = panel;
124
116
  tab.role = "tab";
125
117
  tab.tabIndex = selected === tab ? 0 : -1;
126
118
  tab.ariaSelected = `${selected === tab}`;
@@ -165,8 +157,7 @@ var UHTMLTabPanelElement = class extends UHTMLElement {
165
157
  this.hidden = Array.from(this.tabs).every((tab) => !tab.selected);
166
158
  }
167
159
  attributeChangedCallback(_name, prev, next) {
168
- if (SKIP_ATTR_CHANGE || prev === next)
169
- return;
160
+ if (SKIP_ATTR_CHANGE || prev === next) return;
170
161
  getTabs(this, prev).forEach((tab) => tab.setAttribute(ARIA_CONTROLS, next));
171
162
  }
172
163
  get tabsElement() {
package/dist/u-tabs.js CHANGED
@@ -18,10 +18,8 @@ var attachStyle = (element, css) => element.attachShadow({ mode: "closed" }).app
18
18
  );
19
19
  var asButton = (event) => {
20
20
  const isClick = "key" in event && (event.key === " " || event.key === "Enter");
21
- if (isClick)
22
- event.preventDefault();
23
- if (isClick && event.target instanceof HTMLElement)
24
- event.target.click();
21
+ if (isClick) event.preventDefault();
22
+ if (isClick && event.target instanceof HTMLElement) event.target.click();
25
23
  return isClick;
26
24
  };
27
25
  var getRoot = (node) => node.getRootNode();
@@ -46,7 +44,7 @@ var UHTMLTabsElement = class extends UHTMLElement {
46
44
  return [...this.tabs].findIndex((tab) => tab.ariaSelected === "true");
47
45
  }
48
46
  set selectedIndex(index) {
49
- this.tabs[index].ariaSelected = "true";
47
+ if (this.tabs[index]) this.tabs[index].ariaSelected = "true";
50
48
  }
51
49
  get tabs() {
52
50
  return queryWithoutNested("u-tab", this);
@@ -71,21 +69,16 @@ var UHTMLTabListElement = class extends UHTMLElement {
71
69
  const { key } = event;
72
70
  const tabs = [...this.getElementsByTagName("u-tab")];
73
71
  let index = tabs.findIndex((tab) => tab.contains(event.target));
74
- if (event.defaultPrevented || index === -1)
75
- return;
76
- if (event.type === "click")
77
- tabs[index].selected = true;
72
+ if (event.defaultPrevented || index === -1) return;
73
+ if (event.type === "click") tabs[index].selected = true;
78
74
  if (event.type === "keydown" && !asButton(event)) {
79
75
  if (key === "ArrowDown" || key === "ArrowRight")
80
76
  index = ++index % tabs.length;
81
77
  else if (key === "ArrowUp" || key === "ArrowLeft")
82
78
  index = (index || tabs.length) - 1;
83
- else if (key === "End")
84
- index = tabs.length - 1;
85
- else if (key === "Home")
86
- index = 0;
87
- else
88
- return;
79
+ else if (key === "End") index = tabs.length - 1;
80
+ else if (key === "Home") index = 0;
81
+ else return;
89
82
  event.preventDefault();
90
83
  tabs[index].focus();
91
84
  }
@@ -117,8 +110,7 @@ var UHTMLTabElement = class extends UHTMLElement {
117
110
  });
118
111
  tabs.forEach((tab, index) => {
119
112
  const panel = getPanel(tab) || panels[index] || null;
120
- if (selected === tab && panel)
121
- selectedPanel = panel;
113
+ if (selected === tab && panel) selectedPanel = panel;
122
114
  tab.role = "tab";
123
115
  tab.tabIndex = selected === tab ? 0 : -1;
124
116
  tab.ariaSelected = `${selected === tab}`;
@@ -163,8 +155,7 @@ var UHTMLTabPanelElement = class extends UHTMLElement {
163
155
  this.hidden = Array.from(this.tabs).every((tab) => !tab.selected);
164
156
  }
165
157
  attributeChangedCallback(_name, prev, next) {
166
- if (SKIP_ATTR_CHANGE || prev === next)
167
- return;
158
+ if (SKIP_ATTR_CHANGE || prev === next) return;
168
159
  getTabs(this, prev).forEach((tab) => tab.setAttribute(ARIA_CONTROLS, next));
169
160
  }
170
161
  get tabsElement() {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@u-elements/u-tabs",
3
- "version": "0.0.2",
3
+ "version": "0.0.3",
4
4
  "license": "MIT",
5
5
  "description": "HTML tags, just truly accessible",
6
6
  "homepage": "https://u-elements.github.io/u-elements/",