@rdlabo/capacitor-native-ui 0.0.0-stage → 1.2.1

package/src/native/components/ion-fab.ts

@@ -0,0 +1,151 @@
+import type { Candidate } from '../shared/candidate';
+import { childElements, excluded, isDark, text } from '../shared/dom';
+import { iconSource } from '../shared/icons';
+import type { NativeUIItem } from '../definitions';
+
+export const tag = 'ion-fab';
+export const shadowSelector = 'ion-fab-button, ion-fab-list';
+
+const hasHostMotion = (style: CSSStyleDeclaration): boolean =>
+  style.animationName !== 'none' || style.transitionDuration.split(',').some((value) => parseFloat(value) > 0);
+
+// FAB owns the batch; only its buttons draw glass. Closed lists keep their IDs
+// and resolved artwork, without inventing layout for display:none descendants.
+export const read = (fab: HTMLElement, id: (element: HTMLElement) => string): Candidate | undefined => {
+  if (fab.slot !== 'fixed' || !fab.parentElement?.matches('ion-content') || fab.contains(fab.ownerDocument.activeElement)) return;
+  const children = childElements(fab);
+  const main = children.filter((child) => child.matches('ion-fab-button'));
+  const lists = children.filter((child) => child.matches('ion-fab-list'));
+  if (main.length !== 1 || main.length + lists.length !== children.length) return;
+  if (lists.some((list) => list.closest(excluded) || childElements(list).some((child) => !child.matches('ion-fab-button')))) return;
+  const buttons = [main[0], ...lists.flatMap((list) => childElements(list))] as HTMLIonFabButtonElement[];
+  const style = getComputedStyle(fab);
+  if (hasHostMotion(style)) return;
+  const transform = new DOMMatrixReadOnly(style.transform);
+  if (!transform.is2D || transform.a !== 1 || transform.d !== 1 || transform.b || transform.c) return;
+  const candidate: Candidate = {
+    element: fab,
+    control: {
+      id: id(fab),
+      kind: 'floating-action-button',
+      x: 0,
+      y: 0,
+      width: innerWidth,
+      height: innerHeight,
+      dark: isDark(style),
+      rtl: style.direction === 'rtl',
+      items: [],
+    },
+    actions: new Map(),
+    icons: [],
+  };
+  for (const button of buttons) {
+    if (!button.classList.contains('ios') || button.closest(excluded) || button.color || button.type !== 'button' || button.href) return;
+    if (button.querySelector('input, button, a, img, canvas, video, ion-spinner, ion-avatar, ion-badge')) return;
+    const native = button.shadowRoot?.querySelector<HTMLElement>('[part=native]');
+    if (!native) return;
+    const s = getComputedStyle(button),
+      n = getComputedStyle(native);
+    // An opaque custom host/background or custom shape cannot be discarded.
+    const alpha = n.backgroundColor.startsWith('rgba(') ? Number(n.backgroundColor.slice(5, -1).split(',')[3]) : 1;
+    if (
+      s.backgroundColor !== 'rgba(0, 0, 0, 0)' ||
+      s.backgroundImage !== 'none' ||
+      n.backgroundImage.includes('url(') ||
+      !n.backdropFilter.includes('blur') ||
+      !(alpha > 0 && alpha < 1)
+    )
+      return;
+    const width = parseFloat(s.width),
+      height = parseFloat(s.height);
+    if (!(width > 0 && height > 0) || Math.abs(width - height) > 0.5 || !n.borderRadius.includes('50%')) return;
+    const list = button.parentElement?.matches('ion-fab-list') ? (button.parentElement as HTMLIonFabListElement) : undefined;
+    const listStyle = list && getComputedStyle(list);
+    const laidOut = s.display !== 'none' && (!listStyle || listStyle.display !== 'none');
+    const visible =
+      laidOut &&
+      (!list || (list.activated && button.show && listStyle!.visibility === 'visible' && Number(listStyle!.opacity) > 0)) &&
+      s.visibility === 'visible' &&
+      Number(s.opacity) > 0;
+    // Standard scale is centered: even scale(0) retains its actual layout center.
+    // Static list translation is already included in the DOM rect (including RTL).
+    const matrix = new DOMMatrixReadOnly(s.transform);
+    if (!matrix.is2D || matrix.b || matrix.c || matrix.e || matrix.f || matrix.a !== matrix.d || matrix.a < 0) return;
+    // Only Ionic's hidden list child may use scale(0). Custom static scaling
+    // changes the actual glass/hit area and must retain its Web rendering.
+    // Stencil updates show before rendering its host class. Judge the rendered
+    // scale against that class so this normal one-frame gap keeps its cover.
+    if (matrix.a !== 1 && (matrix.a !== 0 || !list || button.classList.contains('fab-button-show'))) return;
+    if (laidOut && !matrix.isIdentity) {
+      const origin = s.transformOrigin.split(' ').map(parseFloat);
+      if (Math.abs(origin[0] - width / 2) > 0.5 || Math.abs(origin[1] - height / 2) > 0.5) return;
+    }
+    // Ionic's list appearance is staggered show changes, without a host CSS
+    // transition. Custom host animations keep their complete Web rendering.
+    if (hasHostMotion(s)) return;
+    if (listStyle) {
+      if (hasHostMotion(listStyle)) return;
+      const transform = new DOMMatrixReadOnly(listStyle.transform);
+      if (!transform.is2D || transform.a !== 1 || transform.d !== 1 || transform.b || transform.c) return;
+    }
+    const rect = button.getBoundingClientRect();
+    const x = laidOut ? rect.x + rect.width / 2 - width / 2 : 0;
+    const y = laidOut ? rect.y + rect.height / 2 - height / 2 : 0;
+    if (visible && (x < -1 || y < -1 || x + width > innerWidth + 1 || y + height > innerHeight + 1)) return;
+    const label = text(button);
+    const item: NativeUIItem = {
+      id: id(button),
+      x,
+      y,
+      width,
+      height,
+      label,
+      accessibilityLabel: button.getAttribute('aria-label') ?? native.getAttribute('aria-label') ?? label,
+      disabled: button.disabled || s.pointerEvents === 'none',
+      selected: button.activated,
+      visible,
+      fontSize: parseFloat(s.fontSize),
+      fontWeight: parseInt(s.fontWeight, 10) || 400,
+      color: n.color,
+    };
+    const normal = Array.from(button.querySelectorAll('ion-icon, svg'));
+    if (normal.length > 1) return;
+    const close = button.shadowRoot?.querySelector<HTMLElement>('ion-icon[part=close-icon]');
+    for (const [index, icon] of [normal[0], close].entries()) {
+      if (!icon) {
+        if (index === 1 || !label) return;
+        else continue;
+      }
+      const svg = icon.matches('svg') ? (icon as SVGElement) : icon.shadowRoot?.querySelector<SVGElement>('svg');
+      if (!svg) return;
+      const iconStyle = getComputedStyle(icon);
+      const inner = icon.shadowRoot?.querySelector('.icon-inner');
+      if (index === 0 && inner && !new DOMMatrixReadOnly(iconStyle.transform).isIdentity) return;
+      const transform = new DOMMatrixReadOnly(inner ? getComputedStyle(inner).transform : iconStyle.transform);
+      const mirrored =
+        transform.is2D && transform.a === -1 && transform.d === 1 && !transform.b && !transform.c && !transform.e && !transform.f;
+      if (index === 0 && !transform.isIdentity && !mirrored) return;
+      const source = iconSource(svg, index === 0 && mirrored);
+      const iconWidth = parseFloat(iconStyle.width),
+        iconHeight = parseFloat(iconStyle.height);
+      // The internal close-icon fills the button vertically; its glyph uses font-size.
+      const size = index === 1 ? parseFloat(iconStyle.fontSize) : iconWidth;
+      const h = index === 1 ? size : iconHeight;
+      if (!source || !(size > 0 && h > 0)) return;
+      if (index === 0) {
+        item.iconWidth = size;
+        item.iconHeight = h;
+      } else {
+        item.closeIconWidth = size;
+        item.closeIconHeight = h;
+        item.iconTransition =
+          parseFloat(iconStyle.transitionDuration) * (iconStyle.transitionDuration.split(',')[0].trim().endsWith('ms') ? 0.001 : 1);
+      }
+      candidate.icons.push({ item, source, ...(index === 1 ? { field: 'closeIcon' as const } : {}) });
+    }
+    if (!visible && !list) return;
+    candidate.control.items.push(item);
+    if (visible) candidate.actions.set(item.id, button);
+  }
+  return candidate;
+};

package/src/native/components/ion-menu-button.ts

@@ -0,0 +1,37 @@
+import { horizontalSelected, horizontalToolbarGroup, inVerticalToolbarLayout } from '../shared/toolbar-options';
+import { createCandidate, appendItem } from '../shared/candidate';
+import type { Candidate, Identify } from '../shared/candidate';
+import type { VerticalControlAreaOptions } from '../definitions';
+import { childElements, inFixedToolbar, isVerticalBarsToolbarAction, isVerticalBarsToolbarGroup } from '../shared/dom';
+
+export const tag = 'ion-menu-button';
+// Horizontal menu buttons belong to ion-buttons; vertical actions can opt out of grouping.
+export const selector = tag;
+export const shadowSelector = tag;
+
+export const append = (candidate: Candidate, button: HTMLIonMenuButtonElement, id: Identify): boolean => {
+  if (button.type !== 'button') return false;
+  const content = !button.shadowRoot?.querySelector('slot')?.assignedNodes().length ? button.shadowRoot : button;
+  return !!content && !!appendItem(candidate, button, id, content);
+};
+
+export const read = (group: HTMLElement, id: Identify, options: VerticalControlAreaOptions = {}): Candidate | undefined => {
+  if (group.matches(tag)) {
+    if (!inFixedToolbar(group)) return;
+    if (inVerticalToolbarLayout(group)) {
+      if (!isVerticalBarsToolbarAction(group)) return;
+      if (group.parentElement && isVerticalBarsToolbarGroup(group.parentElement)) return;
+    } else {
+      if (!horizontalSelected(group, options) || !group.parentElement?.matches('ion-buttons')) return;
+      if (horizontalToolbarGroup(group.parentElement, options)) return;
+    }
+    const candidate = createCandidate(group, tag, id, options);
+    return append(candidate, group as HTMLIonMenuButtonElement, id) ? candidate : undefined;
+  }
+  const children = group.matches('ion-buttons') ? childElements(group) : [];
+  if (!inFixedToolbar(group) || children.length !== 1) return;
+  const button = children[0];
+  if (!button?.matches(`${tag}${group.closest('ion-app.ios-theme-vertical-bars') ? '' : '.ios'}`)) return;
+  const candidate = createCandidate(group, tag, id, options);
+  return append(candidate, button as HTMLIonMenuButtonElement, id) ? candidate : undefined;
+};

package/src/native/components/ion-segment.ts

@@ -0,0 +1,27 @@
+import { createCandidate, appendItem } from '../shared/candidate';
+import type { Candidate, Identify } from '../shared/candidate';
+import { inFixedToolbar } from '../shared/dom';
+
+export const tag = 'ion-segment';
+export const shadowSelector = 'ion-segment-button';
+export const tracksMotion = true;
+
+export const read = (element: HTMLElement, id: Identify): Candidate | undefined => {
+  const segment = element as HTMLIonSegmentElement;
+  if (
+    !inFixedToolbar(element) ||
+    segment.scrollable ||
+    element.classList.contains('segment-expand') ||
+    element.querySelector('ion-segment-button[content-id]')
+  )
+    return;
+  const children = Array.from(element.querySelectorAll<HTMLIonSegmentButtonElement>(':scope > ion-segment-button'));
+  if (!children.length) return;
+  const candidate = createCandidate(element, tag, id);
+  for (const child of children) {
+    const item = appendItem(candidate, child, id);
+    if (!item || (item.label && item.iconWidth)) return;
+    item.selected = segment.value === child.value;
+  }
+  return candidate;
+};

package/src/native/components/ion-tab-bar.ts

@@ -0,0 +1,50 @@
+import { createCandidate, appendItem } from '../shared/candidate';
+import type { Candidate, Identify } from '../shared/candidate';
+
+export const tag = 'ion-tab-bar';
+export const shadowSelector = 'ion-tab-button';
+export const tracksMotion = true;
+
+export const read = (element: HTMLElement, id: Identify): Candidate | undefined => {
+  if (element.closest('ion-content')) return;
+  const children = Array.from(element.querySelectorAll<HTMLElement>(':scope > ion-tab-button:not(.ion-cloned-element)'));
+  if (!children.length) return;
+  // Only equal items with Ionic's default layout map to UIKit's adaptive tabs.
+  const width = children[0].getBoundingClientRect().width;
+  if (
+    children.some(
+      (child) =>
+        ((child as HTMLIonTabButtonElement).layout ?? 'icon-top') !== 'icon-top' ||
+        Math.abs(child.getBoundingClientRect().width - width) > 1,
+    )
+  )
+    return undefined;
+
+  const candidate = createCandidate(element, tag, id);
+  const style = getComputedStyle(element);
+  const rtl = style.direction === 'rtl';
+  const position = ['start', 'center', 'end'].find((value) => element.classList.contains(`tab-bar-position-${value}`));
+  candidate.control.tabBarAnchor = {
+    x: position === 'center' ? 0.5 : position ? ((position === 'start') !== rtl ? 0 : 1) : style.left !== 'auto' ? 0 : 1,
+    y: element.slot === 'bottom' ? 1 : 0,
+  };
+
+  for (const child of children) {
+    const item = appendItem(candidate, child, id);
+    if (!item) return;
+    const svg = child.querySelector<SVGElement>('svg') ?? child.querySelector('ion-icon')?.shadowRoot?.querySelector<SVGElement>('svg');
+    if (svg) {
+      item.iconPosition = 'top';
+      const color = getComputedStyle(svg).color;
+      const shapes = Array.from(svg.querySelectorAll('path, rect, circle, ellipse, line, polygon, polyline'));
+      // Only text-colored SVGs follow UIKit selection tint; preserve explicit artwork colors.
+      item.iconTemplate =
+        shapes.length > 0 &&
+        shapes.every((shape) => {
+          const paint = getComputedStyle(shape);
+          return [paint.fill, paint.stroke].every((value) => value === 'none' || value === color);
+        });
+    }
+  }
+  return candidate;
+};