@xenknight/framework7 0.0.2

package/components/input/input.js

@@ -0,0 +1,339 @@
+import { getWindow, getDocument } from 'ssr-window';
+import $ from '../../shared/dom7.js';
+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'));
+    $shadowEl.addClass('textarea-resizable-shadow');
+    $shadowEl.prop({
+      disabled: true,
+      readonly: true
+    });
+    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;
+    $shadowEl.val('');
+    const initialHeight = $shadowEl[0].scrollHeight;
+    $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,
+          currentHeight,
+          scrollHeight
+        });
+        app.emit('textareaResize', {
+          initialHeight,
+          currentHeight,
+          scrollHeight
+        });
+      }
+    }
+  },
+  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');
+    if (Input.ignoreTypes.indexOf(type) >= 0) return;
+    $inputEl.parents('.item-input').addClass('item-input-focused');
+    $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');
+      $inputEl.addClass('input-with-value');
+      $inputEl.trigger('input:notempty');
+      app.emit('inputNotEmpty', $inputEl[0]);
+    } else {
+      $itemInputEl.removeClass('item-input-with-value');
+      $inputWrapEl.removeClass('input-with-value');
+      $inputEl.removeClass('input-with-value');
+      $inputEl.trigger('input:empty');
+      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);
+    const contentPaddingBottom = parseInt($scrollableEl.css('padding-bottom'), 10);
+    const contentOffsetTop = $scrollableEl.offset().top - contentScrollTop;
+    const inputOffsetTop = $inputEl.offset().top - contentOffsetTop;
+    const inputHeight = $inputEl[0].offsetHeight;
+    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', () => {
+            if (document && document.activeElement === inputEl) {
+              app.input.scrollIntoView(inputEl, app.params.input.scrollIntoViewDuration, app.params.input.scrollIntoViewCentered, app.params.input.scrollIntoViewAlways);
+            }
+          });
+        } else {
+          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
+      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
+      app.input.checkEmptyState($inputEl);
+      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
+      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);
+      const previousValue = $inputEl.val();
+      $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);
+    $(document).on('focus', 'input, textarea, select, .item-input [contenteditable]', onFocus, true);
+    $(document).on('blur', 'input, textarea, select, .item-input [contenteditable]', onBlur, true);
+    $(document).on('invalid', 'input, textarea, select', onInvalid, true);
+  }
+};
+export default {
+  name: 'input',
+  params: {
+    input: {
+      scrollIntoViewOnFocus: undefined,
+      scrollIntoViewCentered: false,
+      scrollIntoViewDuration: 0,
+      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);
+      $tabEl.find('.item-input, .input').each(itemInputEl => {
+        const $itemInputEl = $(itemInputEl);
+        $itemInputEl.find('input, select, textarea, [contenteditable]').each(inputEl => {
+          const $inputEl = $(inputEl);
+          if (Input.ignoreTypes.indexOf($inputEl.attr('type')) >= 0) return;
+          app.input.checkEmptyState($inputEl);
+        });
+      });
+      $tabEl.find('textarea.resizable').each(textareaEl => {
+        app.input.resizeTextarea(textareaEl);
+      });
+    },
+    pageInit(page) {
+      const app = this;
+      const $pageEl = page.$el;
+      $pageEl.find('.item-input, .input').each(itemInputEl => {
+        const $itemInputEl = $(itemInputEl);
+        $itemInputEl.find('input, select, textarea, [contenteditable]').each(inputEl => {
+          const $inputEl = $(inputEl);
+          if (Input.ignoreTypes.indexOf($inputEl.attr('type')) >= 0) return;
+          app.input.checkEmptyState($inputEl);
+        });
+      });
+      $pageEl.find('textarea.resizable').each(textareaEl => {
+        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);
+        });
+      } else {
+        $('textarea.resizable').each(textareaEl => {
+          app.input.resizeTextarea(textareaEl);
+        });
+      }
+    }
+  }
+};

package/components/input/input.less

@@ -0,0 +1,355 @@
+/* === Input === */
+@import './input-vars.less';
+
+input[type='text'],
+input[type='password'],
+input[type='search'],
+input[type='email'],
+input[type='tel'],
+input[type='url'],
+input[type='date'],
+input[type='month'],
+input[type='datetime-local'],
+input[type='time'],
+input[type='number'],
+select,
+textarea {
+  box-sizing: border-box;
+  appearance: none;
+  border: none;
+  box-shadow: none;
+  border-radius: 0;
+  outline: 0;
+  display: block;
+  padding: 0;
+  margin: 0;
+  font-family: inherit;
+  background: none;
+  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;
+  position: absolute;
+  z-index: -1000;
+  pointer-events: none;
+  left: -1000px;
+  top: -1000px;
+  visibility: hidden;
+}
+.list {
+  input[type='text'],
+  input[type='password'],
+  input[type='search'],
+  input[type='email'],
+  input[type='tel'],
+  input[type='url'],
+  input[type='date'],
+  input[type='month'],
+  input[type='datetime-local'],
+  input[type='time'],
+  input[type='number'],
+  select {
+    width: 100%;
+    height: var(--f7-input-height);
+    color: var(--f7-input-text-color);
+    font-size: var(--f7-input-font-size);
+    background-color: var(--f7-input-bg-color, transparent);
+    padding-left: var(--f7-input-padding-left);
+    padding-right: var(--f7-input-padding-right);
+    &::placeholder {
+      color: var(--f7-input-placeholder-color);
+    }
+  }
+  textarea {
+    width: 100%;
+    color: var(--f7-input-text-color);
+    font-size: var(--f7-input-font-size);
+    resize: none;
+    line-height: 1.4;
+    height: var(--f7-textarea-height);
+    background-color: var(--f7-input-bg-color, transparent);
+    padding-top: var(--f7-textarea-padding-vertical);
+    padding-bottom: var(--f7-textarea-padding-vertical);
+    padding-left: var(--f7-input-padding-left);
+    padding-right: var(--f7-input-padding-right);
+    &::placeholder {
+      color: var(--f7-input-placeholder-color);
+    }
+    &.resizable {
+      height: calc(var(--f7-input-height) + var(--f7-textarea-padding-vertical) * 2);
+    }
+  }
+  input[type='time'],
+  input[type='date'],
+  input[type='month'],
+  input[type='datetime-local'] {
+    line-height: var(--f7-input-height);
+  }
+  .rtl({
+    input[type='date'],
+    input[type='month'],
+    input[type='datetime-local'] {
+      text-align: right;
+      flex-direction: row-reverse;
+      width: auto;
+    }
+  });
+  .item-label,
+  .item-floating-label {
+    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-height);
+    color: var(--f7-label-text-color);
+    transition-duration: 200ms;
+    transition-property: transform, color;
+  }
+  .item-floating-label {
+    color: var(--f7-input-placeholder-color);
+    max-width: calc(100% / var(--f7-floating-label-scale));
+    pointer-events: none;
+    .ltr({
+      left: var(--f7-input-padding-left);
+    });
+    .rtl({
+      right: var(--f7-input-padding-right);
+    });
+    ~ .item-input-wrap input,
+    ~ .item-input-wrap textarea {
+      &::placeholder {
+        opacity: 0;
+        transition-duration: 100ms;
+      }
+      &.input-focused::placeholder {
+        opacity: 1;
+        transition-duration: 300ms;
+      }
+    }
+    .ltr({
+      transform-origin: left center;
+    });
+    .rtl({
+      transform-origin: right center;
+    });
+  }
+  .item-input-with-value .item-floating-label {
+    color: var(--f7-label-text-color);
+  }
+  .item-input-with-value .item-floating-label,
+  .item-input-focused .item-floating-label {
+    transform: scale(1) translateY(0) !important;
+  }
+  .item-input-wrap {
+    width: 100%;
+    flex-shrink: 1;
+    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 {
+  font-size: var(--f7-input-error-font-size);
+  line-height: var(--f7-input-error-line-height);
+  color: var(--f7-input-error-text-color);
+  font-weight: var(--f7-input-error-font-weight);
+  display: none;
+  box-sizing: border-box;
+}
+.item-input-info,
+.input-info {
+  font-size: var(--f7-input-info-font-size);
+  line-height: var(--f7-input-info-line-height);
+  color: var(--f7-input-info-text-color);
+}
+.item-input-invalid,
+.input-invalid {
+  .item-input-error-message,
+  .input-error-message {
+    display: block;
+  }
+  .item-input-info,
+  .input-info {
+    display: none;
+  }
+}
+
+.input {
+  position: relative;
+  input,
+  select,
+  textarea {
+    width: 100%;
+  }
+}
+.input-clear-button {
+  opacity: 0;
+  pointer-events: none;
+  visibility: hidden;
+  transition-duration: 100ms;
+  position: absolute;
+  top: 50%;
+  border: none;
+  padding: 0;
+  margin: 0;
+  outline: 0;
+  z-index: 1;
+  cursor: pointer;
+  background: none;
+  width: var(--f7-input-clear-button-size);
+  height: var(--f7-input-clear-button-size);
+  margin-top: calc(-1 * var(--f7-input-clear-button-size) / 2);
+  color: var(--f7-input-clear-button-color);
+  .ltr({
+    right: 0;
+  });
+  .rtl({
+    left: 0;
+  });
+  &:after {
+    .core-icons-font();
+  }
+  &:before {
+    position: absolute;
+    content: '';
+    left: 50%;
+    top: 50%;
+  }
+  .item-input-wrap & {
+    top: calc(var(--f7-input-height) / 2);
+  }
+  &.active-state {
+    opacity: 0.75 !important;
+  }
+}
+
+.input-with-value ~ .input-clear-button,
+.item-input-with-value .input-clear-button,
+.input-with-value .input-clear-button {
+  opacity: 1;
+  pointer-events: auto;
+  visibility: visible;
+}
+.input-dropdown-wrap,
+.input-dropdown {
+  position: relative;
+  &:before {
+    content: '';
+    pointer-events: none;
+    position: absolute;
+    top: 50%;
+    margin-top: -2px;
+    width: 0;
+    height: 0;
+    border-left: 4px solid transparent;
+    border-right: 4px solid transparent;
+    border-top: 5px solid #727272;
+    .ltr({
+      right: 6px;
+    });
+    .rtl({
+      left: 6px;
+    });
+  }
+  select,
+  input,
+  textarea {
+    .ltr({
+      padding-right: calc(20px + var(--f7-input-padding-right));
+    });
+    .rtl({
+      padding-left: calc(20px + var(--f7-input-padding-left));
+    });
+  }
+}
+
+.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);
+    pointer-events: none;
+    box-sizing: border-box;
+    transition-duration: 200ms;
+  }
+  .item-label,
+  .item-floating-label {
+    pointer-events: none;
+    background: var(--f7-page-bg-color);
+    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-invalid,
+  &.input-invalid {
+    &::after {
+      border-width: 2px;
+      border-color: var(--f7-input-outline-invalid-border-color, var(--f7-input-error-text-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({
+  .dark option {
+    background-color: var(--f7-page-bg-color);
+  }
+});
+
+.if-ios-theme({
+  @import './input-ios.less';
+});
+.if-md-theme({
+  @import './input-md.less';
+});

package/components/link/link-ios.less

@@ -0,0 +1,9 @@
+.ios {
+  .link {
+    transition: opacity 300ms;
+    &.active-state {
+      opacity: var(--f7-link-pressed-opacity);
+      transition-duration: 0ms;
+    }
+  }
+}

package/components/link/link-md.less

@@ -0,0 +1,2 @@
+.md {
+}