framework7 7.0.8 → 8.0.0-beta.1

package/components/input/input.js

@@ -4,7 +4,6 @@ import { bindMethods } from '../../shared/utils.js';
 import { getDevice } from '../../shared/get-device.js';
 const Input = {
   ignoreTypes: ['checkbox', 'button', 'submit', 'range', 'radio', 'image'],
-
   createTextareaResizableShadow() {
     const document = getDocument();
     const $shadowEl = $(document.createElement('textarea'));
@@ -15,34 +14,26 @@ const Input = {
     });
     Input.textareaResizableShadow = $shadowEl;
   },
-
   textareaResizableShadow: undefined,
-
   resizeTextarea(textareaEl) {
     const app = this;
     const window = getWindow();
     const $textareaEl = $(textareaEl);
-
     if (!Input.textareaResizableShadow) {
       Input.createTextareaResizableShadow();
     }
-
     const $shadowEl = Input.textareaResizableShadow;
     if (!$textareaEl.length) return;
     if (!$textareaEl.hasClass('resizable')) return;
-
     if (Input.textareaResizableShadow.parents().length === 0) {
       app.$el.append($shadowEl);
     }
-
     const styles = window.getComputedStyle($textareaEl[0]);
     'padding-top padding-bottom padding-left padding-right margin-left margin-right margin-top margin-bottom width font-size font-family font-style font-weight line-height font-variant text-transform letter-spacing border box-sizing display'.split(' ').forEach(style => {
       let styleValue = styles[style];
-
       if ('font-size line-height letter-spacing width'.split(' ').indexOf(style) >= 0) {
         styleValue = styleValue.replace(',', '.');
       }
-
       $shadowEl.css(style, styleValue);
     });
     const currentHeight = $textareaEl[0].clientHeight;
@@ -51,14 +42,12 @@ const Input = {
     $shadowEl.val($textareaEl.val());
     $shadowEl.css('height', 0);
     const scrollHeight = $shadowEl[0].scrollHeight;
-
     if (currentHeight !== scrollHeight) {
       if (scrollHeight > initialHeight) {
         $textareaEl.css('height', `${scrollHeight}px`);
       } else if (scrollHeight < currentHeight) {
         $textareaEl.css('height', '');
       }
-
       if (scrollHeight > initialHeight || scrollHeight < currentHeight) {
         $textareaEl.trigger('textarea:resize', {
           initialHeight,
@@ -73,71 +62,58 @@ const Input = {
       }
     }
   },
-
   validate(inputEl) {
     const $inputEl = $(inputEl);
     if (!$inputEl.length) return true;
     const $itemInputEl = $inputEl.parents('.item-input');
     const $inputWrapEl = $inputEl.parents('.input');
-
     function unsetReadonly() {
       if ($inputEl[0].f7ValidateReadonly) {
         $inputEl[0].readOnly = false;
       }
     }
-
     function setReadonly() {
       if ($inputEl[0].f7ValidateReadonly) {
         $inputEl[0].readOnly = true;
       }
     }
-
     unsetReadonly();
     const validity = $inputEl[0].validity;
     const validationMessage = $inputEl.dataset().errorMessage || $inputEl[0].validationMessage || '';
-
     if (!validity) {
       setReadonly();
       return true;
     }
-
     if (!validity.valid) {
       let $errorEl = $inputEl.nextAll('.item-input-error-message, .input-error-message');
-
       if (validationMessage) {
         if ($errorEl.length === 0) {
           $errorEl = $(`<div class="${$inputWrapEl.length ? 'input-error-message' : 'item-input-error-message'}"></div>`);
           $errorEl.insertAfter($inputEl);
         }
-
         $errorEl.text(validationMessage);
       }
-
       if ($errorEl.length > 0) {
         $itemInputEl.addClass('item-input-with-error-message');
         $inputWrapEl.addClass('input-with-error-message');
       }
-
       $itemInputEl.addClass('item-input-invalid');
       $inputWrapEl.addClass('input-invalid');
       $inputEl.addClass('input-invalid');
       setReadonly();
       return false;
     }
-
     $itemInputEl.removeClass('item-input-invalid item-input-with-error-message');
     $inputWrapEl.removeClass('input-invalid input-with-error-message');
     $inputEl.removeClass('input-invalid');
     setReadonly();
     return true;
   },
-
   validateInputs(el) {
     const app = this;
     const validates = $(el).find('input, textarea, select').map(inputEl => app.input.validate(inputEl));
     return validates.indexOf(false) < 0;
   },
-
   focus(inputEl) {
     const $inputEl = $(inputEl);
     const type = $inputEl.attr('type');
@@ -146,35 +122,28 @@ const Input = {
     $inputEl.parents('.input').addClass('input-focused');
     $inputEl.addClass('input-focused');
   },
-
   blur(inputEl) {
     const $inputEl = $(inputEl);
     $inputEl.parents('.item-input').removeClass('item-input-focused');
     $inputEl.parents('.input').removeClass('input-focused');
     $inputEl.removeClass('input-focused');
   },
-
   checkEmptyState(inputEl) {
     const app = this;
     let $inputEl = $(inputEl);
-
     if (!$inputEl.is('input, select, textarea, .item-input [contenteditable]')) {
       $inputEl = $inputEl.find('input, select, textarea, .item-input [contenteditable]').eq(0);
     }
-
     if (!$inputEl.length) return;
     const isContentEditable = $inputEl[0].hasAttribute('contenteditable');
     let value;
-
     if (isContentEditable) {
       if ($inputEl.find('.text-editor-placeholder').length) value = '';else value = $inputEl.html();
     } else {
       value = $inputEl.val();
     }
-
     const $itemInputEl = $inputEl.parents('.item-input');
     const $inputWrapEl = $inputEl.parents('.input');
-
     if (value && typeof value === 'string' && value.trim() !== '' || Array.isArray(value) && value.length > 0) {
       $itemInputEl.addClass('item-input-with-value');
       $inputWrapEl.addClass('input-with-value');
@@ -189,19 +158,15 @@ const Input = {
       app.emit('inputEmpty', $inputEl[0]);
     }
   },
-
   scrollIntoView(inputEl, duration, centered, force) {
     if (duration === void 0) {
       duration = 0;
     }
-
     const $inputEl = $(inputEl);
     const $scrollableEl = $inputEl.parents('.page-content, .panel, .card-expandable .card-content').eq(0);
-
     if (!$scrollableEl.length) {
       return false;
     }
-
     const contentHeight = $scrollableEl[0].offsetHeight;
     const contentScrollTop = $scrollableEl[0].scrollTop;
     const contentPaddingTop = parseInt($scrollableEl.css('padding-top'), 10);
@@ -212,34 +177,27 @@ const Input = {
     const min = inputOffsetTop + contentScrollTop - contentPaddingTop;
     const max = inputOffsetTop + contentScrollTop - contentHeight + contentPaddingBottom + inputHeight;
     const centeredPosition = min + (max - min) / 2;
-
     if (contentScrollTop > min) {
       $scrollableEl.scrollTop(centered ? centeredPosition : min, duration);
       return true;
     }
-
     if (contentScrollTop < max) {
       $scrollableEl.scrollTop(centered ? centeredPosition : max, duration);
       return true;
     }
-
     if (force) {
       $scrollableEl.scrollTop(centered ? centeredPosition : max, duration);
     }
-
     return false;
   },
-
   init() {
     const app = this;
     const device = getDevice();
     const window = getWindow();
     const document = getDocument();
     Input.createTextareaResizableShadow();
-
     function onFocus() {
       const inputEl = this;
-
       if (app.params.input.scrollIntoViewOnFocus) {
         if (device.android) {
           $(window).once('resize', () => {
@@ -251,54 +209,48 @@ const Input = {
           app.input.scrollIntoView(inputEl, app.params.input.scrollIntoViewDuration, app.params.input.scrollIntoViewCentered, app.params.input.scrollIntoViewAlways);
         }
       }
-
       app.input.focus(inputEl);
     }
-
     function onBlur() {
       const $inputEl = $(this);
       const tag = $inputEl[0].nodeName.toLowerCase();
       app.input.blur($inputEl);
-
       if ($inputEl.dataset().validate || $inputEl.attr('validate') !== null || $inputEl.attr('data-validate-on-blur') !== null) {
         app.input.validate($inputEl);
-      } // Resize textarea
-
-
+      }
+      // Resize textarea
       if (tag === 'textarea' && $inputEl.hasClass('resizable')) {
         if (Input.textareaResizableShadow) Input.textareaResizableShadow.remove();
       }
     }
-
     function onChange() {
       const $inputEl = $(this);
       const type = $inputEl.attr('type');
       const tag = $inputEl[0].nodeName.toLowerCase();
       const isContentEditable = $inputEl[0].hasAttribute('contenteditable');
-      if (Input.ignoreTypes.indexOf(type) >= 0) return; // Check Empty State
+      if (Input.ignoreTypes.indexOf(type) >= 0) return;
 
+      // Check Empty State
       app.input.checkEmptyState($inputEl);
-      if (isContentEditable) return; // Check validation
+      if (isContentEditable) return;
 
+      // Check validation
       if ($inputEl.attr('data-validate-on-blur') === null && ($inputEl.dataset().validate || $inputEl.attr('validate') !== null)) {
         app.input.validate($inputEl);
-      } // Resize textarea
-
+      }
 
+      // Resize textarea
       if (tag === 'textarea' && $inputEl.hasClass('resizable')) {
         app.input.resizeTextarea($inputEl);
       }
     }
-
     function onInvalid(e) {
       const $inputEl = $(this);
-
       if ($inputEl.attr('data-validate-on-blur') === null && ($inputEl.dataset().validate || $inputEl.attr('validate') !== null)) {
         e.preventDefault();
         app.input.validate($inputEl);
       }
     }
-
     function clearInput() {
       const $clicked = $(this);
       const $inputEl = $clicked.siblings('input, textarea').eq(0);
@@ -306,11 +258,9 @@ const Input = {
       $inputEl.val('').trigger('input change').focus().trigger('input:clear', previousValue);
       app.emit('inputClear', previousValue);
     }
-
     function preventDefault(e) {
       e.preventDefault();
     }
-
     $(document).on('click', '.input-clear-button', clearInput);
     $(document).on('mousedown', '.input-clear-button', preventDefault);
     $(document).on('change input', 'input, textarea, select, .item-input [contenteditable]', onChange, true);
@@ -318,7 +268,6 @@ const Input = {
     $(document).on('blur', 'input, textarea, select, .item-input [contenteditable]', onBlur, true);
     $(document).on('invalid', 'input, textarea, select', onInvalid, true);
   }
-
 };
 export default {
   name: 'input',
@@ -330,25 +279,20 @@ export default {
       scrollIntoViewAlways: false
     }
   },
-
   create() {
     const app = this;
-
     if (typeof app.params.input.scrollIntoViewOnFocus === 'undefined') {
       app.params.input.scrollIntoViewOnFocus = getDevice().android;
     }
-
     bindMethods(app, {
       input: Input
     });
   },
-
   on: {
     init() {
       const app = this;
       app.input.init();
     },
-
     tabMounted(tabEl) {
       const app = this;
       const $tabEl = $(tabEl);
@@ -364,7 +308,6 @@ export default {
         app.input.resizeTextarea(textareaEl);
       });
     },
-
     pageInit(page) {
       const app = this;
       const $pageEl = page.$el;
@@ -380,10 +323,8 @@ export default {
         app.input.resizeTextarea(textareaEl);
       });
     },
-
     'panelBreakpoint panelCollapsedBreakpoint panelResize panelOpen panelSwipeOpen resize viewMasterDetailBreakpoint': function onPanelOpen(instance) {
       const app = this;
-
       if (instance && instance.$el) {
         instance.$el.find('textarea.resizable').each(textareaEl => {
           app.input.resizeTextarea(textareaEl);

package/components/input/input.less

@@ -28,6 +28,15 @@ textarea {
   resize: none;
   font-size: inherit;
   color: inherit;
+  &:-internal-autofill-selected {
+    background-color: transparent !important;
+    transition: background-color 5000s ease-in-out 0s !important;
+  }
+  &:autofill,
+  &:-webkit-autofill-and-obscured {
+    background-color: transparent !important;
+    transition: background-color 5000s ease-in-out 0s !important;
+  }
 }
 .textarea-resizable-shadow {
   opacity: 0;
@@ -78,7 +87,7 @@ textarea {
       color: var(--f7-input-placeholder-color);
     }
     &.resizable {
-      height: var(--f7-input-height);
+      height: calc(var(--f7-input-height) + var(--f7-textarea-padding-vertical) * 2);
     }
   }
   input[type='datetime-local'] {
@@ -101,22 +110,18 @@ textarea {
   });
   .item-label,
   .item-floating-label {
-    width: 100%;
+    width: auto;
     vertical-align: top;
     flex-shrink: 0;
     font-size: var(--f7-label-font-size);
     font-weight: var(--f7-label-font-weight);
-    line-height: var(--f7-label-line-height);
+    line-height: var(--f7-label-height);
     color: var(--f7-label-text-color);
     transition-duration: 200ms;
     transition-property: transform, color;
   }
   .item-floating-label {
-    --label-height: calc(var(--f7-label-font-size) * var(--f7-label-line-height));
-    transform: scale(var(--f7-floating-label-scale))
-      translateY(calc((var(--f7-input-height) / 2 + 50%) / var(--f7-floating-label-scale)));
     color: var(--f7-input-placeholder-color);
-    width: auto;
     max-width: calc(100% / var(--f7-floating-label-scale));
     pointer-events: none;
     .ltr({
@@ -148,7 +153,7 @@ textarea {
   }
   .item-input-with-value .item-floating-label,
   .item-input-focused .item-floating-label {
-    transform: scale(1) translateY(0);
+    transform: scale(1) translateY(0) !important;
   }
   .item-input-wrap {
     width: 100%;
@@ -156,10 +161,16 @@ textarea {
     position: relative;
   }
 }
+.item-input,
+.input {
+  position: relative;
+}
+
 .item-input .item-inner {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
+  justify-content: center;
 }
 .item-input-error-message,
 .input-error-message {
@@ -187,30 +198,7 @@ textarea {
     display: none;
   }
 }
-.inline-labels,
-.inline-label {
-  .item-inner {
-    display: flex;
-    align-items: center;
-    flex-direction: row;
-  }
-  .item-label,
-  .item-floating-label {
-    padding-top: var(--f7-inline-label-padding-top);
-    align-self: flex-start;
-    width: 35%;
-    font-size: var(--f7-inline-label-font-size);
-    line-height: var(--f7-inline-label-line-height);
-    + .item-input-wrap {
-      .ltr({
-        margin-left: 8px;
-      });
-      .rtl({
-        margin-right: 8px;
-      });
-    }
-  }
-}
+
 .input {
   position: relative;
   input,
@@ -300,131 +288,60 @@ textarea {
   }
 }
 
-.input-outline:after,
-.item-input-outline .item-input-wrap:after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  box-sizing: border-box;
-  border: 1px solid var(--f7-input-outline-border-color);
-  border-radius: var(--f7-input-outline-border-radius);
-  transition-duration: 200ms;
-  pointer-events: none;
-}
-.input-outline.input-focused:after,
-.item-input-outline.item-input-focused .item-input-wrap:after {
-  border-width: 2px;
-  border-color: var(--f7-input-outline-focused-border-color, var(--f7-theme-color));
-}
-.input-outline.input-invalid:after,
-.item-input-outline.item-input-invalid .item-input-wrap:after {
-  border-width: 2px;
-  border-color: var(--f7-input-outline-invalid-border-color, var(--f7-input-error-text-color));
-}
-.input-outline,
-.item-input-outline,
-.list .item-input-outline {
-  input,
-  textarea,
-  select {
+.item-input-outline .item-content,
+.item-input-outline.item-content,
+.input-outline {
+  &::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 8px;
+    bottom: 8px;
+    border: 1px solid var(--f7-input-outline-border-color);
     border-radius: var(--f7-input-outline-border-radius);
-    padding-left: var(--f7-input-outline-padding-horizontal);
-    padding-right: var(--f7-input-outline-padding-horizontal);
-  }
-}
-.input-outline.input-dropdown,
-.item-input-outline .input-dropdown-wrap {
-  &:before {
-    .ltr({
-      right: 8px;
-    });
-    .rtl({
-      left: 8px;
-    });
-  }
-  input,
-  textarea,
-  select {
-    .ltr({
-      padding-right: 20px;
-    });
-    .rtl({
-      padding-left: 20px;
-    });
-  }
-}
-.input-outline,
-.item-input-outline {
-  .input-clear-button {
-    .ltr({
-      right: 8px;
-    });
-    .rtl({
-      left: 8px;
-    });
-  }
-}
-.item-input-outline {
-  --f7-input-height: var(--f7-input-outline-height);
-  .item-inner:after {
-    display: none !important;
-  }
-  .item-label {
-    .ltr({
-      left: var(--f7-input-outline-padding-horizontal);
-    });
-    .rtl({
-      right: var(--f7-input-outline-padding-horizontal);
-    });
-  }
-  .inline-labels & .item-label,
-  .inline-label & .item-label,
-  .inline-label .item-label,
-  .inline-label.item-label {
-    .ltr({
-      left: 0;
-    });
-    .rtl({
-      right: 0;
-    });
+    pointer-events: none;
+    box-sizing: border-box;
+    transition-duration: 200ms;
   }
+  .item-label,
   .item-floating-label {
-    .ltr({
-      left: calc(var(--f7-input-outline-padding-horizontal) - 4px);
-    });
-    .rtl({
-      right: calc(var(--f7-input-outline-padding-horizontal) - 4px);
-    });
-    padding-left: 4px;
-    padding-right: 4px;
+    pointer-events: none;
     background: var(--f7-page-bg-color);
-    z-index: 10;
-    margin-top: calc(-0.5 * (var(--f7-label-font-size) * var(--f7-label-line-height)));
-  }
-  &.item-input-with-value .item-floating-label,
-  &.item-input-focused .item-floating-label {
-    transform: scale(1) translateY(50%);
+    z-index: 1;
+    padding: 4px;
+  }
+  &.item-input-focused,
+  &.input-focused {
+    &::after {
+      border-width: 2px;
+      border-color: var(--f7-input-outline-invalid-border-color, var(--f7-theme-color));
+    }
   }
-  .item-input-info,
-  .item-input-error-message {
-    .ltr({
-      padding-left: var(--f7-input-outline-padding-horizontal);
-    });
-    .rtl({
-      padding-right: var(--f7-input-outline-padding-horizontal);
-    });
+  &.item-input-invalid,
+  &.input-invalid {
+    &::after {
+      border-width: 2px;
+      border-color: var(--f7-input-outline-invalid-border-color, var(--f7-input-error-text-color));
+    }
   }
 }
-.item-input-outline {
-  .block-strong & .item-floating-label {
-    background: var(--f7-block-strong-bg-color);
-  }
-  .list & .item-floating-label {
-    background: var(--f7-list-bg-color);
-  }
+
+.block-strong .item-input-outline .item-label,
+.block-strong .item-input-outline .item-floating-label,
+.ios .block-strong-ios .item-input-outline .item-label,
+.ios .block-strong-ios .item-input-outline .item-floating-label,
+.md .block-strong-md .item-input-outline .item-label,
+.md .block-strong-md .item-input-outline .item-floating-label {
+  background: var(--f7-block-strong-bg-color) !important;
+}
+.list-strong .item-input-outline .item-floating-label,
+.list-strong .item-input-outline .item-label,
+.ios .list-strong-ios .item-input-outline .item-floating-label,
+.ios .list-strong-ios .item-input-outline .item-label,
+.md .list-strong-md .item-input-outline .item-floating-label,
+.md .list-strong-md .item-input-outline .item-label {
+  background: var(--f7-list-strong-bg-color) !important;
 }
 
 .if-dark-theme({
@@ -439,6 +356,3 @@ textarea {
 .if-md-theme({
   @import './input-md.less';
 });
-.if-aurora-theme({
-  @import './input-aurora.less';
-});

package/components/link/link-vars.less

@@ -7,8 +7,3 @@
 .ios-vars({
   --f7-link-pressed-opacity: 0.3;
 });
-
-.aurora-vars({
-  --f7-link-pressed-opacity: 0.3;
-  --f7-link-hover-opacity: 0.65;
-});

package/components/link/link.less

@@ -25,6 +25,9 @@
     });
   }
 }
+.link[class*='color-'] {
+  color: var(--f7-theme-color);
+}
 
 .if-ios-theme({
   @import './link-ios.less';
@@ -32,6 +35,3 @@
 .if-md-theme({
   @import './link-md.less';
 });
-.if-aurora-theme({
-  @import './link-aurora.less';
-});

package/components/list/list-md.less

@@ -1,7 +0,0 @@
-.md {
-  .list {
-    .item-media {
-      min-width: 40px;
-    }
-  }
-}