framework7-react 6.3.15 → 7.0.0-beta.11

package/components/breadcrumbs-item.js

@@ -0,0 +1,33 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React, { forwardRef, useRef, useImperativeHandle } from 'react';
+import { classNames, getExtraAttrs, emit } from '../shared/utils.js';
+
+const BreadcrumbsItem = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    className,
+    id,
+    style,
+    active,
+    children
+  } = props;
+  const extraAttrs = getExtraAttrs(props);
+  const elRef = useRef(null);
+  useImperativeHandle(ref, () => ({
+    el: elRef.current
+  }));
+
+  const onClick = e => {
+    emit(props, 'click', e);
+  };
+
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: classNames('breadcrumbs-item', className, active && 'breadcrumbs-item-active'),
+    ref: elRef,
+    id: id,
+    style: style,
+    onClick: onClick
+  }, extraAttrs), children);
+});
+BreadcrumbsItem.displayName = 'f7-breadcrumbs-item';
+export default BreadcrumbsItem;

package/components/breadcrumbs-separator.d.ts

@@ -0,0 +1,15 @@
+
+import * as React from 'react';
+
+
+interface BreadcrumbsSeparatorProps {
+  slot?: string;
+  id?: string | number;
+  className?: string;
+  style?: React.CSSProperties;
+  ref?: React.MutableRefObject<{el: HTMLElement | null}>;
+}
+declare const BreadcrumbsSeparator: React.FunctionComponent<BreadcrumbsSeparatorProps>;
+
+export default BreadcrumbsSeparator;
+  

package/components/breadcrumbs-separator.js

@@ -0,0 +1,25 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React, { forwardRef, useRef, useImperativeHandle } from 'react';
+import { classNames, getExtraAttrs } from '../shared/utils.js';
+
+const BreadcrumbsSeparator = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    className,
+    id,
+    style
+  } = props;
+  const extraAttrs = getExtraAttrs(props);
+  const elRef = useRef(null);
+  useImperativeHandle(ref, () => ({
+    el: elRef.current
+  }));
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: classNames('breadcrumbs-separator', className),
+    ref: elRef,
+    id: id,
+    style: style
+  }, extraAttrs));
+});
+BreadcrumbsSeparator.displayName = 'f7-breadcrumbs-separator';
+export default BreadcrumbsSeparator;

package/components/breadcrumbs.d.ts

@@ -0,0 +1,15 @@
+
+import * as React from 'react';
+
+
+interface BreadcrumbsProps {
+  slot?: string;
+  id?: string | number;
+  className?: string;
+  style?: React.CSSProperties;
+  ref?: React.MutableRefObject<{el: HTMLElement | null}>;
+}
+declare const Breadcrumbs: React.FunctionComponent<BreadcrumbsProps>;
+
+export default Breadcrumbs;
+  

package/components/breadcrumbs.js

@@ -0,0 +1,26 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React, { forwardRef, useRef, useImperativeHandle } from 'react';
+import { classNames, getExtraAttrs } from '../shared/utils.js';
+
+const Breadcrumbs = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    className,
+    id,
+    style,
+    children
+  } = props;
+  const extraAttrs = getExtraAttrs(props);
+  const elRef = useRef(null);
+  useImperativeHandle(ref, () => ({
+    el: elRef.current
+  }));
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: classNames('breadcrumbs', className),
+    ref: elRef,
+    id: id,
+    style: style
+  }, extraAttrs), children);
+});
+Breadcrumbs.displayName = 'f7-breadcrumbs';
+export default Breadcrumbs;

package/{esm/components → components}/button.js

@@ -1,71 +1,70 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React, { forwardRef, useRef, useImperativeHandle } from 'react';
-import { classNames, getExtraAttrs, extend, isStringProp, emit } from '../shared/utils';
-import { colorClasses, actionsAttrs, actionsClasses, routerAttrs, routerClasses } from '../shared/mixins';
-import { useTooltip } from '../shared/use-tooltip';
-import { useIcon } from '../shared/use-icon';
-import { useRouteProps } from '../shared/use-route-props';
-import Preloader from './preloader';
+import { classNames, getExtraAttrs, extend, isStringProp, emit } from '../shared/utils.js';
+import { colorClasses, actionsAttrs, actionsClasses, routerAttrs, routerClasses } from '../shared/mixins.js';
+import { useTooltip } from '../shared/use-tooltip.js';
+import { useIcon } from '../shared/use-icon.js';
+import { useRouteProps } from '../shared/use-route-props.js';
+import Preloader from './preloader.js';
 
-var Button = /*#__PURE__*/forwardRef(function (props, ref) {
-  var className = props.className,
-      id = props.id,
-      style = props.style,
-      children = props.children,
-      text = props.text,
-      type = props.type,
-      _props$href = props.href,
-      href = _props$href === void 0 ? '#' : _props$href,
-      target = props.target,
-      tabLink = props.tabLink,
-      tabLinkActive = props.tabLinkActive,
-      round = props.round,
-      roundIos = props.roundIos,
-      roundAurora = props.roundAurora,
-      roundMd = props.roundMd,
-      fill = props.fill,
-      fillIos = props.fillIos,
-      fillAurora = props.fillAurora,
-      fillMd = props.fillMd,
-      large = props.large,
-      largeIos = props.largeIos,
-      largeAurora = props.largeAurora,
-      largeMd = props.largeMd,
-      small = props.small,
-      smallIos = props.smallIos,
-      smallAurora = props.smallAurora,
-      smallMd = props.smallMd,
-      raised = props.raised,
-      raisedIos = props.raisedIos,
-      raisedAurora = props.raisedAurora,
-      raisedMd = props.raisedMd,
-      active = props.active,
-      outline = props.outline,
-      outlineIos = props.outlineIos,
-      outlineAurora = props.outlineAurora,
-      outlineMd = props.outlineMd,
-      disabled = props.disabled,
-      preloader = props.preloader,
-      preloaderSize = props.preloaderSize,
-      preloaderColor = props.preloaderColor,
-      loading = props.loading;
-  var extraAttrs = getExtraAttrs(props);
-  var elRef = useRef(null);
+const Button = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    className,
+    id,
+    style,
+    children,
+    text,
+    type,
+    href = '#',
+    target,
+    tabLink,
+    tabLinkActive,
+    round,
+    roundIos,
+    roundAurora,
+    roundMd,
+    fill,
+    fillIos,
+    fillAurora,
+    fillMd,
+    large,
+    largeIos,
+    largeAurora,
+    largeMd,
+    small,
+    smallIos,
+    smallAurora,
+    smallMd,
+    raised,
+    raisedIos,
+    raisedAurora,
+    raisedMd,
+    active,
+    outline,
+    outlineIos,
+    outlineAurora,
+    outlineMd,
+    disabled,
+    preloader,
+    preloaderSize,
+    preloaderColor,
+    loading
+  } = props;
+  const extraAttrs = getExtraAttrs(props);
+  const elRef = useRef(null);
 
-  var onClick = function onClick(e) {
+  const onClick = e => {
     emit(props, 'click', e);
   };
 
-  useImperativeHandle(ref, function () {
-    return {
-      el: elRef.current
-    };
-  });
+  useImperativeHandle(ref, () => ({
+    el: elRef.current
+  }));
   useTooltip(elRef, props);
   useRouteProps(elRef, props);
 
-  var getClasses = function getClasses() {
+  const getClasses = () => {
     return classNames(className, 'button', {
       'tab-link': tabLink || tabLink === '',
       'tab-link-active': tabLinkActive,
@@ -96,27 +95,27 @@ var Button = /*#__PURE__*/forwardRef(function (props, ref) {
       'button-outline-md': outlineMd,
       'button-preloader': preloader,
       'button-loading': loading,
-      disabled: disabled
+      disabled
     }, colorClasses(props), routerClasses(props), actionsClasses(props));
   };
 
-  var ButtonTag = type === 'submit' || type === 'reset' || type === 'button' ? 'button' : 'a';
+  const ButtonTag = type === 'submit' || type === 'reset' || type === 'button' ? 'button' : 'a';
 
-  var getAttrs = function getAttrs() {
-    var hrefComputed = href;
+  const getAttrs = () => {
+    let hrefComputed = href;
     if (href === true) hrefComputed = '#';
     if (href === false || ButtonTag === 'button') hrefComputed = undefined; // no href attribute
 
     return extend({
       href: hrefComputed,
-      target: target,
-      type: type,
+      target,
+      type,
       'data-tab': isStringProp(tabLink) && tabLink || undefined
     }, routerAttrs(props), actionsAttrs(props));
   };
 
-  var iconEl = useIcon(props);
-  var textEl;
+  const iconEl = useIcon(props);
+  let textEl;
 
   if (text) {
     textEl = /*#__PURE__*/React.createElement("span", null, text);

package/{esm/components → components}/card-content.js

@@ -1,24 +1,23 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React, { forwardRef, useRef, useImperativeHandle } from 'react';
-import { classNames, getExtraAttrs } from '../shared/utils';
-import { colorClasses } from '../shared/mixins';
+import { classNames, getExtraAttrs } from '../shared/utils.js';
+import { colorClasses } from '../shared/mixins.js';
 
-var CardContent = /*#__PURE__*/forwardRef(function (props, ref) {
-  var className = props.className,
-      id = props.id,
-      style = props.style,
-      children = props.children,
-      _props$padding = props.padding,
-      padding = _props$padding === void 0 ? true : _props$padding;
-  var extraAttrs = getExtraAttrs(props);
-  var elRef = useRef(null);
-  useImperativeHandle(ref, function () {
-    return {
-      el: elRef.current
-    };
-  });
-  var classes = classNames(className, 'card-content', {
+const CardContent = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    className,
+    id,
+    style,
+    children,
+    padding = true
+  } = props;
+  const extraAttrs = getExtraAttrs(props);
+  const elRef = useRef(null);
+  useImperativeHandle(ref, () => ({
+    el: elRef.current
+  }));
+  const classes = classNames(className, 'card-content', {
     'card-content-padding': padding
   }, colorClasses(props));
   return /*#__PURE__*/React.createElement("div", _extends({

package/{esm/components → components}/card-footer.js

@@ -1,22 +1,22 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React, { forwardRef, useRef, useImperativeHandle } from 'react';
-import { classNames, getExtraAttrs } from '../shared/utils';
-import { colorClasses } from '../shared/mixins';
+import { classNames, getExtraAttrs } from '../shared/utils.js';
+import { colorClasses } from '../shared/mixins.js';
 
-var CardFooter = /*#__PURE__*/forwardRef(function (props, ref) {
-  var className = props.className,
-      id = props.id,
-      style = props.style,
-      children = props.children;
-  var extraAttrs = getExtraAttrs(props);
-  var elRef = useRef(null);
-  useImperativeHandle(ref, function () {
-    return {
-      el: elRef.current
-    };
-  });
-  var classes = classNames(className, 'card-footer', colorClasses(props));
+const CardFooter = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    className,
+    id,
+    style,
+    children
+  } = props;
+  const extraAttrs = getExtraAttrs(props);
+  const elRef = useRef(null);
+  useImperativeHandle(ref, () => ({
+    el: elRef.current
+  }));
+  const classes = classNames(className, 'card-footer', colorClasses(props));
   return /*#__PURE__*/React.createElement("div", _extends({
     id: id,
     style: style,

package/{esm/components → components}/card-header.js

@@ -1,22 +1,22 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React, { forwardRef, useRef, useImperativeHandle } from 'react';
-import { classNames, getExtraAttrs } from '../shared/utils';
-import { colorClasses } from '../shared/mixins';
+import { classNames, getExtraAttrs } from '../shared/utils.js';
+import { colorClasses } from '../shared/mixins.js';
 
-var CardHeader = /*#__PURE__*/forwardRef(function (props, ref) {
-  var className = props.className,
-      id = props.id,
-      style = props.style,
-      children = props.children;
-  var extraAttrs = getExtraAttrs(props);
-  var elRef = useRef(null);
-  useImperativeHandle(ref, function () {
-    return {
-      el: elRef.current
-    };
-  });
-  var classes = classNames(className, 'card-header', colorClasses(props));
+const CardHeader = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    className,
+    id,
+    style,
+    children
+  } = props;
+  const extraAttrs = getExtraAttrs(props);
+  const elRef = useRef(null);
+  useImperativeHandle(ref, () => ({
+    el: elRef.current
+  }));
+  const classes = classNames(className, 'card-header', colorClasses(props));
   return /*#__PURE__*/React.createElement("div", _extends({
     id: id,
     style: style,

package/{esm/components → components}/card.js

@@ -1,79 +1,81 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React, { forwardRef, useRef, useImperativeHandle } from 'react';
-import { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effect';
-import CardHeader from './card-header';
-import CardContent from './card-content';
-import CardFooter from './card-footer';
-import { classNames, getExtraAttrs, getSlots, emit } from '../shared/utils';
-import { colorClasses } from '../shared/mixins';
-import { f7, f7ready } from '../shared/f7';
-import { watchProp } from '../shared/watch-prop';
-
-var Card = /*#__PURE__*/forwardRef(function (props, ref) {
-  var className = props.className,
-      id = props.id,
-      style = props.style,
-      title = props.title,
-      content = props.content,
-      footer = props.footer,
-      padding = props.padding,
-      outline = props.outline,
-      expandable = props.expandable,
-      expandableAnimateWidth = props.expandableAnimateWidth,
-      expandableOpened = props.expandableOpened,
-      animate = props.animate,
-      hideNavbarOnOpen = props.hideNavbarOnOpen,
-      hideToolbarOnOpen = props.hideToolbarOnOpen,
-      hideStatusbarOnOpen = props.hideStatusbarOnOpen,
-      scrollableEl = props.scrollableEl,
-      swipeToClose = props.swipeToClose,
-      closeByBackdropClick = props.closeByBackdropClick,
-      backdrop = props.backdrop,
-      backdropEl = props.backdropEl,
-      noShadow = props.noShadow,
-      noBorder = props.noBorder;
-  var extraAttrs = getExtraAttrs(props);
-  var elRef = useRef(null);
-
-  var open = function open() {
+import { useIsomorphicLayoutEffect } from '../shared/use-isomorphic-layout-effect.js';
+import CardHeader from './card-header.js';
+import CardContent from './card-content.js';
+import CardFooter from './card-footer.js';
+import { classNames, getExtraAttrs, getSlots, emit } from '../shared/utils.js';
+import { colorClasses } from '../shared/mixins.js';
+import { f7, f7ready } from '../shared/f7.js';
+import { watchProp } from '../shared/watch-prop.js';
+
+const Card = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    className,
+    id,
+    style,
+    title,
+    content,
+    footer,
+    padding,
+    outline,
+    expandable,
+    expandableAnimateWidth,
+    expandableOpened,
+    animate,
+    hideNavbarOnOpen,
+    hideToolbarOnOpen,
+    hideStatusbarOnOpen,
+    scrollableEl,
+    swipeToClose,
+    closeByBackdropClick,
+    backdrop,
+    backdropEl,
+    noShadow,
+    noBorder
+  } = props;
+  const extraAttrs = getExtraAttrs(props);
+  const elRef = useRef(null);
+
+  const open = () => {
     if (!elRef.current) return;
     f7.card.open(elRef.current);
   };
 
-  var close = function close() {
+  const close = () => {
     if (!elRef.current) return;
     f7.card.close(elRef.current);
   };
 
-  var onBeforeOpen = function onBeforeOpen(el, prevent) {
+  const onBeforeOpen = (el, prevent) => {
     if (elRef.current !== el) return;
     emit(props, 'cardBeforeOpen', el, prevent);
   };
 
-  var onOpen = function onOpen(el) {
+  const onOpen = el => {
     if (elRef.current !== el) return;
     emit(props, 'cardOpen', el);
   };
 
-  var onOpened = function onOpened(el, pageEl) {
+  const onOpened = (el, pageEl) => {
     if (elRef.current !== el) return;
     emit(props, 'cardOpened', el, pageEl);
   };
 
-  var onClose = function onClose(el) {
+  const onClose = el => {
     if (elRef.current !== el) return;
     emit(props, 'cardClose', el);
   };
 
-  var onClosed = function onClosed(el, pageEl) {
+  const onClosed = (el, pageEl) => {
     if (elRef.current !== el) return;
     emit(props, 'cardClosed', el, pageEl);
   };
 
-  var attachEvents = function attachEvents() {
+  const attachEvents = () => {
     if (!expandable || !elRef.current) return;
-    f7ready(function () {
+    f7ready(() => {
       f7.on('cardBeforeOpen', onBeforeOpen);
       f7.on('cardOpen', onOpen);
       f7.on('cardOpened', onOpened);
@@ -82,7 +84,7 @@ var Card = /*#__PURE__*/forwardRef(function (props, ref) {
     });
   };
 
-  var detachEvents = function detachEvents() {
+  const detachEvents = () => {
     f7.off('cardBeforeOpen', onBeforeOpen);
     f7.off('cardOpen', onOpen);
     f7.off('cardOpened', onOpened);
@@ -90,47 +92,45 @@ var Card = /*#__PURE__*/forwardRef(function (props, ref) {
     f7.off('cardClosed', onClosed);
   };
 
-  var onMount = function onMount() {
+  const onMount = () => {
     if (!expandable || !elRef.current) return;
-    f7ready(function () {
+    f7ready(() => {
       if (expandable && expandableOpened) {
         f7.card.open(elRef.current, false);
       }
     });
   };
 
-  useIsomorphicLayoutEffect(function () {
+  useIsomorphicLayoutEffect(() => {
     onMount();
   }, []);
-  useIsomorphicLayoutEffect(function () {
+  useIsomorphicLayoutEffect(() => {
     attachEvents();
     return detachEvents;
   });
-  watchProp(expandableOpened, function (value) {
+  watchProp(expandableOpened, value => {
     if (value) {
       open();
     } else {
       close();
     }
   });
-  useImperativeHandle(ref, function () {
-    return {
-      el: elRef.current,
-      open: open,
-      close: close
-    };
-  });
-  var headerEl;
-  var contentEl;
-  var footerEl;
-  var classes = classNames(className, 'card', {
+  useImperativeHandle(ref, () => ({
+    el: elRef.current,
+    open,
+    close
+  }));
+  let headerEl;
+  let contentEl;
+  let footerEl;
+  const classes = classNames(className, 'card', {
     'card-outline': outline,
     'card-expandable': expandable,
     'card-expandable-animate-width': expandableAnimateWidth,
     'no-shadow': noShadow,
     'no-border': noBorder
   }, colorClasses(props));
-  var slots = getSlots(props);
+  const slots = getSlots(props);
 
   if (title || slots.header) {
     headerEl = /*#__PURE__*/React.createElement(CardHeader, null, title, slots.header);