framework7-react 6.3.15 → 7.0.0-beta.11

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

@@ -1,41 +1,41 @@
 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, useEffect } from 'react';
-import { classNames, getExtraAttrs, emit } from '../shared/utils';
-import { colorClasses } from '../shared/mixins';
+import { classNames, getExtraAttrs, emit } from '../shared/utils.js';
+import { colorClasses } from '../shared/mixins.js';
 
-var Checkbox = /*#__PURE__*/forwardRef(function (props, ref) {
-  var className = props.className,
-      id = props.id,
-      style = props.style,
-      children = props.children,
-      name = props.name,
-      value = props.value,
-      disabled = props.disabled,
-      readonly = props.readonly,
-      checked = props.checked,
-      defaultChecked = props.defaultChecked,
-      indeterminate = props.indeterminate;
-  var extraAttrs = getExtraAttrs(props);
-  var elRef = useRef(null);
-  var inputElRef = useRef(null);
-  useImperativeHandle(ref, function () {
-    return {
-      el: elRef.current,
-      inputEl: inputElRef.current
-    };
-  });
+const Checkbox = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    className,
+    id,
+    style,
+    children,
+    name,
+    value,
+    disabled,
+    readonly,
+    checked,
+    defaultChecked,
+    indeterminate
+  } = props;
+  const extraAttrs = getExtraAttrs(props);
+  const elRef = useRef(null);
+  const inputElRef = useRef(null);
+  useImperativeHandle(ref, () => ({
+    el: elRef.current,
+    inputEl: inputElRef.current
+  }));
 
-  var onChange = function onChange(event) {
+  const onChange = event => {
     emit(props, 'change', event);
   };
 
-  useEffect(function () {
+  useEffect(() => {
     if (inputElRef.current) {
       inputElRef.current.indeterminate = !!indeterminate;
     }
   }, [indeterminate]);
-  var inputEl = /*#__PURE__*/React.createElement("input", {
+  const inputEl = /*#__PURE__*/React.createElement("input", {
     ref: inputElRef,
     type: "checkbox",
     name: name,
@@ -46,12 +46,12 @@ var Checkbox = /*#__PURE__*/forwardRef(function (props, ref) {
     defaultChecked: defaultChecked,
     onChange: onChange
   });
-  var iconEl = /*#__PURE__*/React.createElement("i", {
+  const iconEl = /*#__PURE__*/React.createElement("i", {
     className: "icon-checkbox"
   });
-  var classes = classNames(className, {
+  const classes = classNames(className, {
     checkbox: true,
-    disabled: disabled
+    disabled
   }, colorClasses(props));
   return /*#__PURE__*/React.createElement("label", _extends({
     id: id,

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

@@ -1,46 +1,46 @@
 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, getSlots, emit } from '../shared/utils';
-import { colorClasses } from '../shared/mixins';
-import { useTooltip } from '../shared/use-tooltip';
-import { useIcon } from '../shared/use-icon';
+import { classNames, getExtraAttrs, getSlots, emit } from '../shared/utils.js';
+import { colorClasses } from '../shared/mixins.js';
+import { useTooltip } from '../shared/use-tooltip.js';
+import { useIcon } from '../shared/use-icon.js';
 
-var Chip = /*#__PURE__*/forwardRef(function (props, ref) {
-  var className = props.className,
-      id = props.id,
-      style = props.style,
-      media = props.media,
-      text = props.text,
-      deleteable = props.deleteable,
-      mediaTextColor = props.mediaTextColor,
-      mediaBgColor = props.mediaBgColor,
-      outline = props.outline;
-  var extraAttrs = getExtraAttrs(props);
+const Chip = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    className,
+    id,
+    style,
+    media,
+    text,
+    deleteable,
+    mediaTextColor,
+    mediaBgColor,
+    outline
+  } = props;
+  const extraAttrs = getExtraAttrs(props);
 
-  var onClick = function onClick(event) {
+  const onClick = event => {
     emit(props, 'click', event);
   };
 
-  var onDeleteClick = function onDeleteClick(event) {
+  const onDeleteClick = event => {
     emit(props, 'delete', event);
   };
 
-  var elRef = useRef(null);
-  useImperativeHandle(ref, function () {
-    return {
-      el: elRef.current
-    };
-  });
+  const elRef = useRef(null);
+  useImperativeHandle(ref, () => ({
+    el: elRef.current
+  }));
   useTooltip(elRef, props);
-  var slots = getSlots(props);
-  var iconEl = useIcon(props);
-  var mediaEl;
-  var labelEl;
-  var deleteEl;
+  const slots = getSlots(props);
+  const iconEl = useIcon(props);
+  let mediaEl;
+  let labelEl;
+  let deleteEl;
 
   if (media || iconEl || slots && slots.media) {
-    var mediaClasses = classNames('chip-media', mediaTextColor && "text-color-" + mediaTextColor, mediaBgColor && "bg-color-" + mediaBgColor);
+    const mediaClasses = classNames('chip-media', mediaTextColor && `text-color-${mediaTextColor}`, mediaBgColor && `bg-color-${mediaBgColor}`);
     mediaEl = /*#__PURE__*/React.createElement("div", {
       className: mediaClasses
     }, iconEl, media, slots.media);
@@ -59,7 +59,7 @@ var Chip = /*#__PURE__*/forwardRef(function (props, ref) {
     });
   }
 
-  var classes = classNames(className, 'chip', {
+  const classes = classNames(className, 'chip', {
     'chip-outline': outline
   }, colorClasses(props));
   return /*#__PURE__*/React.createElement("div", _extends({

package/components/col.js

@@ -0,0 +1,75 @@
+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, useEffect } from 'react';
+import { classNames, getExtraAttrs, emit } from '../shared/utils.js';
+import { colorClasses } from '../shared/mixins.js';
+import { f7ready, f7 } from '../shared/f7.js';
+
+const Col = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    className,
+    id,
+    style,
+    children,
+    tag = 'div',
+    width = 'auto',
+    xsmall,
+    small,
+    medium,
+    large,
+    xlarge,
+    resizable,
+    resizableFixed,
+    resizableAbsolute,
+    resizableHandler = true
+  } = props;
+  const extraAttrs = getExtraAttrs(props);
+  const elRef = useRef(null);
+
+  const onClick = event => {
+    emit(props, 'click', event);
+  };
+
+  const onResize = el => {
+    if (el === elRef.current) {
+      emit(props, 'gridResize');
+    }
+  };
+
+  useImperativeHandle(ref, () => ({
+    el: elRef.current
+  }));
+  const ColTag = tag;
+  const classes = classNames(className, {
+    col: width === 'auto',
+    [`col-${width}`]: width !== 'auto',
+    [`xsmall-${xsmall}`]: xsmall,
+    [`small-${small}`]: small,
+    [`medium-${medium}`]: medium,
+    [`large-${large}`]: large,
+    [`xlarge-${xlarge}`]: xlarge,
+    resizable,
+    'resizable-fixed': resizableFixed,
+    'resizable-absolute': resizableAbsolute
+  }, colorClasses(props));
+  useEffect(() => {
+    f7ready(() => {
+      f7.on('gridResize', onResize);
+    });
+    return () => {
+      f7.off('gridResize', onResize);
+    };
+  });
+  return /*#__PURE__*/React.createElement(ColTag, _extends({
+    id: id,
+    style: style,
+    className: classes,
+    ref: elRef
+  }, extraAttrs, {
+    onClick: onClick
+  }), children, resizable && resizableHandler && /*#__PURE__*/React.createElement("span", {
+    className: "resize-handler"
+  }));
+});
+Col.displayName = 'f7-col';
+export default Col;

package/{esm/components → components}/fab-backdrop.js

@@ -1,21 +1,21 @@
 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 { getExtraAttrs, classNames } from '../shared/utils';
+import { getExtraAttrs, classNames } from '../shared/utils.js';
 
-var FabBackdrop = /*#__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, 'fab-backdrop');
+const FabBackdrop = /*#__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, 'fab-backdrop');
   return /*#__PURE__*/React.createElement("div", _extends({
     id: id,
     style: style,

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

@@ -1,36 +1,36 @@
 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';
-import { colorClasses } from '../shared/mixins';
-import { useTooltip } from '../shared/use-tooltip';
+import { classNames, getExtraAttrs, emit } from '../shared/utils.js';
+import { colorClasses } from '../shared/mixins.js';
+import { useTooltip } from '../shared/use-tooltip.js';
 
-var FabButton = /*#__PURE__*/forwardRef(function (props, ref) {
-  var className = props.className,
-      id = props.id,
-      style = props.style,
-      children = props.children,
-      fabClose = props.fabClose,
-      label = props.label,
-      target = props.target;
-  var extraAttrs = getExtraAttrs(props);
-  var elRef = useRef(null);
+const FabButton = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    className,
+    id,
+    style,
+    children,
+    fabClose,
+    label,
+    target
+  } = 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);
-  var classes = classNames(className, {
+  const classes = classNames(className, {
     'fab-close': fabClose,
     'fab-label-button': label
   }, colorClasses(props));
-  var labelEl;
+  let labelEl;
 
   if (label) {
     labelEl = /*#__PURE__*/React.createElement("span", {

package/components/fab-buttons.js

@@ -0,0 +1,29 @@
+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';
+import { colorClasses } from '../shared/mixins.js';
+
+const FabButtons = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    className,
+    id,
+    style,
+    children,
+    position
+  } = props;
+  const extraAttrs = getExtraAttrs(props);
+  const elRef = useRef(null);
+  useImperativeHandle(ref, () => ({
+    el: elRef.current
+  }));
+  const classes = classNames(className, 'fab-buttons', `fab-buttons-${position}`, colorClasses(props));
+  return /*#__PURE__*/React.createElement("div", _extends({
+    id: id,
+    style: style,
+    className: classes,
+    ref: elRef
+  }, extraAttrs), children);
+});
+FabButtons.displayName = 'f7-fab-buttons';
+export default FabButtons;

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

@@ -1,57 +1,56 @@
 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, getSlots, emit } from '../shared/utils';
-import { colorClasses } from '../shared/mixins';
-import { useTooltip } from '../shared/use-tooltip';
+import { classNames, getExtraAttrs, getSlots, emit } from '../shared/utils.js';
+import { colorClasses } from '../shared/mixins.js';
+import { useTooltip } from '../shared/use-tooltip.js';
 
-var Fab = /*#__PURE__*/forwardRef(function (props, ref) {
-  var className = props.className,
-      id = props.id,
-      style = props.style,
-      morphTo = props.morphTo,
-      href = props.href,
-      target = props.target,
-      text = props.text,
-      _props$position = props.position,
-      position = _props$position === void 0 ? 'right-bottom' : _props$position;
-  var extraAttrs = getExtraAttrs(props);
-  var elRef = useRef(null);
+const Fab = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    className,
+    id,
+    style,
+    morphTo,
+    href,
+    target,
+    text,
+    position = 'right-bottom'
+  } = 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);
-  var hrefComputed = href;
+  let hrefComputed = href;
   if (hrefComputed === true) hrefComputed = '#';
   if (hrefComputed === false) hrefComputed = undefined; // no href attribute
 
-  var linkChildren = [];
-  var rootChildren = [];
-
-  var _getSlots = getSlots(props),
-      linkSlots = _getSlots.link,
-      defaultSlots = _getSlots.default,
-      rootSlots = _getSlots.root,
-      textSlots = _getSlots.text;
+  const linkChildren = [];
+  const rootChildren = [];
+  const {
+    link: linkSlots,
+    default: defaultSlots,
+    root: rootSlots,
+    text: textSlots
+  } = getSlots(props);
 
   if (defaultSlots) {
-    for (var i = 0; i < defaultSlots.length; i += 1) {
-      var child = defaultSlots[i];
-      var isRoot = void 0;
-      var tag = child.type && (child.type.displayName || child.type.name);
+    for (let i = 0; i < defaultSlots.length; i += 1) {
+      const child = defaultSlots[i];
+      let isRoot;
+      const tag = child.type && (child.type.displayName || child.type.name);
       if (tag === 'FabButtons' || tag === 'f7-fab-buttons') isRoot = true;
       if (isRoot) rootChildren.push(child);else linkChildren.push(child);
     }
   }
 
-  var textEl;
+  let textEl;
 
   if (text || textSlots && textSlots.length) {
     textEl = /*#__PURE__*/React.createElement("div", {
@@ -59,7 +58,7 @@ var Fab = /*#__PURE__*/forwardRef(function (props, ref) {
     }, text, textSlots);
   }
 
-  var linkEl;
+  let linkEl;
 
   if (linkChildren.length || linkSlots && linkSlots.length || textEl) {
     linkEl = /*#__PURE__*/React.createElement("a", {
@@ -69,7 +68,7 @@ var Fab = /*#__PURE__*/forwardRef(function (props, ref) {
     }, linkChildren, textEl, linkSlots);
   }
 
-  var classes = classNames(className, 'fab', "fab-" + position, {
+  const classes = classNames(className, 'fab', `fab-${position}`, {
     'fab-morph': morphTo,
     'fab-extended': typeof textEl !== 'undefined'
   }, colorClasses(props));

package/components/gauge.js

@@ -0,0 +1,104 @@
+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); }
+
+/* eslint no-nested-ternary: off */
+import React, { forwardRef, useRef, useImperativeHandle } from 'react';
+import { classNames, getExtraAttrs } from '../shared/utils.js';
+
+const Gauge = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    className,
+    id,
+    style,
+    type = 'circle',
+    value = 0,
+    size = 200,
+    bgColor = 'transparent',
+    borderBgColor = '#eeeeee',
+    borderColor = '#000000',
+    borderWidth = 10,
+    valueText,
+    valueTextColor = '#000000',
+    valueFontSize = 31,
+    valueFontWeight = 500,
+    labelText,
+    labelTextColor = '#888888',
+    labelFontSize = 14,
+    labelFontWeight = 400
+  } = props;
+  const extraAttrs = getExtraAttrs(props);
+  const elRef = useRef(null);
+  useImperativeHandle(ref, () => ({
+    el: elRef.current
+  }));
+  const classes = classNames(className, 'gauge');
+  const semiCircle = type === 'semicircle';
+  const radius = size / 2 - borderWidth / 2;
+  const length = 2 * Math.PI * radius;
+  const progress = Math.max(Math.min(value, 1), 0);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    id: id,
+    style: style,
+    className: classes,
+    ref: elRef
+  }, extraAttrs), /*#__PURE__*/React.createElement("svg", {
+    className: "gauge-svg",
+    width: `${size}px`,
+    height: `${semiCircle ? size / 2 : size}px`,
+    viewBox: `0 0 ${size} ${semiCircle ? size / 2 : size}`
+  }, semiCircle && /*#__PURE__*/React.createElement("path", {
+    className: "gauge-back-semi",
+    d: `M${size - borderWidth / 2},${size / 2} a1,1 0 0,0 -${size - borderWidth},0`,
+    stroke: borderBgColor,
+    strokeWidth: borderWidth,
+    fill: bgColor || 'none'
+  }), semiCircle && /*#__PURE__*/React.createElement("path", {
+    className: "gauge-front-semi",
+    d: `M${size - borderWidth / 2},${size / 2} a1,1 0 0,0 -${size - borderWidth},0`,
+    stroke: borderColor,
+    strokeWidth: borderWidth,
+    strokeDasharray: length / 2,
+    strokeDashoffset: length / 2 * (1 + progress),
+    fill: borderBgColor ? 'none' : bgColor || 'none'
+  }), !semiCircle && borderBgColor && /*#__PURE__*/React.createElement("circle", {
+    className: "gauge-back-circle",
+    stroke: borderBgColor,
+    strokeWidth: borderWidth,
+    fill: bgColor || 'none',
+    cx: size / 2,
+    cy: size / 2,
+    r: radius
+  }), !semiCircle && /*#__PURE__*/React.createElement("circle", {
+    className: "gauge-front-circle",
+    transform: `rotate(-90 ${size / 2} ${size / 2})`,
+    stroke: borderColor,
+    strokeWidth: borderWidth,
+    strokeDasharray: length,
+    strokeDashoffset: length * (1 - progress),
+    fill: borderBgColor ? 'none' : bgColor || 'none',
+    cx: size / 2,
+    cy: size / 2,
+    r: radius
+  }), valueText && /*#__PURE__*/React.createElement("text", {
+    className: "gauge-value-text",
+    x: "50%",
+    y: semiCircle ? '100%' : '50%',
+    fontWeight: valueFontWeight,
+    fontSize: valueFontSize,
+    fill: valueTextColor,
+    dy: semiCircle ? labelText ? -labelFontSize - 15 : -5 : 0,
+    textAnchor: "middle",
+    dominantBaseline: !semiCircle ? 'middle' : null
+  }, valueText), labelText && /*#__PURE__*/React.createElement("text", {
+    className: "gauge-label-text",
+    x: "50%",
+    y: semiCircle ? '100%' : '50%',
+    fontWeight: labelFontWeight,
+    fontSize: labelFontSize,
+    fill: labelTextColor,
+    dy: semiCircle ? -5 : valueText ? valueFontSize / 2 + 10 : 0,
+    textAnchor: "middle",
+    dominantBaseline: !semiCircle ? 'middle' : null
+  }, labelText)));
+});
+Gauge.displayName = 'f7-gauge';
+export default Gauge;