@xenknight/framework7-vue 0.0.2

package/components/sheet.js

@@ -0,0 +1,213 @@
+import { h, computed, ref, watch, onMounted, onBeforeUnmount } from 'vue';
+import { classNames } from '../shared/utils.js';
+import { colorClasses, colorProps } from '../shared/mixins.js';
+import { f7ready, f7 } from '../shared/f7.js';
+import { modalStateClasses } from '../shared/modal-state-classes.js';
+export default {
+  name: 'f7-sheet',
+  props: {
+    opened: Boolean,
+    animate: {
+      type: Boolean,
+      default: undefined
+    },
+    top: Boolean,
+    bottom: Boolean,
+    position: String,
+    backdrop: {
+      type: Boolean,
+      default: undefined
+    },
+    backdropEl: {
+      type: [String, Object],
+      default: undefined
+    },
+    closeByBackdropClick: {
+      type: Boolean,
+      default: undefined
+    },
+    closeByOutsideClick: {
+      type: Boolean,
+      default: undefined
+    },
+    closeOnEscape: {
+      type: Boolean,
+      default: undefined
+    },
+    push: Boolean,
+    swipeToClose: {
+      type: Boolean,
+      default: undefined
+    },
+    swipeToStep: {
+      type: Boolean,
+      default: undefined
+    },
+    swipeHandler: {
+      type: [String, Object],
+      default: undefined
+    },
+    containerEl: {
+      type: [String, Object],
+      default: undefined
+    },
+    breakpoints: {
+      type: Array,
+      default: () => undefined
+    },
+    backdropBreakpoint: {
+      type: Number,
+      default: undefined
+    },
+    pushBreakpoint: {
+      type: Number,
+      default: undefined
+    },
+    ...colorProps
+  },
+  emits: ['sheet:stepprogress', 'sheet:stepopen', 'sheet:stepclose', 'sheet:open', 'sheet:opened', 'sheet:close', 'sheet:closed', 'sheet:breakpoint', 'update:opened'],
+  setup(props, _ref) {
+    let {
+      emit,
+      slots
+    } = _ref;
+    let f7Sheet = null;
+    // eslint-disable-next-line
+    let isOpened = props.opened;
+    let isClosing = false;
+    const elRef = ref(null);
+    const onBreakpoint = (instance, breakpoint) => {
+      emit('sheet:breakpoint', instance, breakpoint);
+    };
+    const onStepProgress = (instance, progress) => {
+      emit('sheet:stepprogress', instance, progress);
+    };
+    const onStepOpen = instance => {
+      emit('sheet:stepopen', instance);
+    };
+    const onStepClose = instance => {
+      emit('sheet:stepclose', instance);
+    };
+    const onOpen = instance => {
+      isOpened = true;
+      isClosing = false;
+      emit('sheet:open', instance);
+      emit('update:opened', true);
+    };
+    const onOpened = instance => {
+      emit('sheet:opened', instance);
+    };
+    const onClose = instance => {
+      isOpened = false;
+      isClosing = true;
+      emit('sheet:close', instance);
+    };
+    const onClosed = instance => {
+      isClosing = false;
+      emit('sheet:closed', instance);
+      emit('update:opened', false);
+    };
+    onMounted(() => {
+      if (!elRef.value) return;
+      const sheetParams = {
+        el: elRef.value,
+        on: {
+          open: onOpen,
+          opened: onOpened,
+          close: onClose,
+          closed: onClosed,
+          stepOpen: onStepOpen,
+          stepClose: onStepClose,
+          stepProgress: onStepProgress,
+          breakpoint: onBreakpoint
+        }
+      };
+      const {
+        animate,
+        backdrop,
+        backdropEl,
+        closeByBackdropClick,
+        closeByOutsideClick,
+        closeOnEscape,
+        swipeToClose,
+        swipeToStep,
+        swipeHandler,
+        containerEl,
+        breakpoints,
+        backdropBreakpoint,
+        pushBreakpoint
+      } = props;
+      if (typeof animate !== 'undefined') sheetParams.animate = animate;
+      if (typeof backdrop !== 'undefined') sheetParams.backdrop = backdrop;
+      if (typeof backdropEl !== 'undefined') sheetParams.backdropEl = backdropEl;
+      if (typeof closeByBackdropClick !== 'undefined') sheetParams.closeByBackdropClick = closeByBackdropClick;
+      if (typeof closeByOutsideClick !== 'undefined') sheetParams.closeByOutsideClick = closeByOutsideClick;
+      if (typeof closeOnEscape !== 'undefined') sheetParams.closeOnEscape = closeOnEscape;
+      if (typeof swipeToClose !== 'undefined') sheetParams.swipeToClose = swipeToClose;
+      if (typeof swipeToStep !== 'undefined') sheetParams.swipeToStep = swipeToStep;
+      if (typeof swipeHandler !== 'undefined') sheetParams.swipeHandler = swipeHandler;
+      if (typeof containerEl !== 'undefined') sheetParams.containerEl = containerEl;
+      if (typeof breakpoints !== 'undefined') sheetParams.breakpoints = breakpoints;
+      if (typeof backdropBreakpoint !== 'undefined') sheetParams.backdropBreakpoint = backdropBreakpoint;
+      if (typeof pushBreakpoint !== 'undefined') sheetParams.pushBreakpoint = pushBreakpoint;
+      f7ready(() => {
+        f7Sheet = f7.sheet.create(sheetParams);
+        if (props.opened) {
+          f7Sheet.open(false);
+        }
+      });
+    });
+    onBeforeUnmount(() => {
+      if (f7Sheet) {
+        f7Sheet.destroy();
+      }
+      f7Sheet = null;
+    });
+    watch(() => props.opened, value => {
+      if (!f7Sheet) return;
+      if (value) {
+        f7Sheet.open();
+      } else {
+        f7Sheet.close();
+      }
+    });
+    ['closeByBackdropClick', 'closeByOutsideClick', 'closeOnEscape', 'swipeToClose'].forEach(propName => {
+      watch(() => props[propName], propValue => {
+        if (!f7Sheet) return;
+        f7Sheet.params[propName] = propValue;
+      });
+    });
+    const classes = computed(() => {
+      let positionComputed = 'bottom';
+      if (props.position) positionComputed = props.position;else if (props.top) positionComputed = 'top';else if (props.bottom) positionComputed = 'bottom';
+      return classNames('sheet-modal', `sheet-modal-${positionComputed}`, {
+        'sheet-modal-push': props.push
+      }, modalStateClasses({
+        isOpened,
+        isClosing
+      }), colorClasses(props));
+    });
+    const fixedTags = 'navbar toolbar tabbar subnavbar searchbar messagebar fab list-index panel'.split(' ').map(tagName => `f7-${tagName}`);
+    return () => {
+      const fixedList = [];
+      const staticList = [];
+      if (slots.default) {
+        slots.default().forEach(vnode => {
+          if (typeof vnode === 'undefined') return;
+          const tag = vnode.type && vnode.type.name ? vnode.type.name : vnode.type;
+          if (fixedTags.indexOf(tag) >= 0) {
+            fixedList.push(vnode);
+          } else {
+            staticList.push(vnode);
+          }
+        });
+      }
+      return h('div', {
+        class: classes.value,
+        ref: elRef
+      }, [fixedList, slots.fixed && slots.fixed(), h('div', {
+        class: 'sheet-modal-inner'
+      }, [staticList, slots.static && slots.static()])]);
+    };
+  }
+};

package/components/skeleton-avatar.d.ts

@@ -0,0 +1,6 @@
+
+// eslint-disable-next-line
+import { SkeletonAvatar } from 'skeleton-elements/vue';
+
+export default SkeletonAvatar;
+

package/components/skeleton-avatar.js

@@ -0,0 +1,3 @@
+// eslint-disable-next-line
+import { SkeletonAvatar } from 'skeleton-elements/vue';
+export default SkeletonAvatar;

package/components/skeleton-block.d.ts

@@ -0,0 +1,6 @@
+
+// eslint-disable-next-line
+import { SkeletonBlock } from 'skeleton-elements/vue';
+
+export default SkeletonBlock;
+

package/components/skeleton-block.js

@@ -0,0 +1,3 @@
+// eslint-disable-next-line
+import { SkeletonBlock } from 'skeleton-elements/vue';
+export default SkeletonBlock;

package/components/skeleton-image.d.ts

@@ -0,0 +1,6 @@
+
+// eslint-disable-next-line
+import { SkeletonImage } from 'skeleton-elements/vue';
+
+export default SkeletonImage;
+

package/components/skeleton-image.js

@@ -0,0 +1,3 @@
+// eslint-disable-next-line
+import { SkeletonImage } from 'skeleton-elements/vue';
+export default SkeletonImage;

package/components/skeleton-text.d.ts

@@ -0,0 +1,6 @@
+
+// eslint-disable-next-line
+import { SkeletonText } from 'skeleton-elements/vue';
+
+export default SkeletonText;
+

package/components/skeleton-text.js

@@ -0,0 +1,3 @@
+// eslint-disable-next-line
+import { SkeletonText } from 'skeleton-elements/vue';
+export default SkeletonText;

package/components/stepper.d.ts

@@ -0,0 +1,197 @@
+
+import { ComponentOptionsMixin, DefineComponent, PropType } from 'vue';
+
+
+declare const Stepper: DefineComponent<
+  {
+    
+    formatValue: {
+      type: FunctionConstructor;
+    },
+
+    name: {
+      type: StringConstructor;
+    },
+
+    inputId: {
+      type: StringConstructor;
+    },
+
+    disabled: {
+      type: BooleanConstructor;
+    },
+
+    buttonsOnly: {
+      type: BooleanConstructor;
+    },
+
+    round: {
+      type: BooleanConstructor;
+    },
+
+    roundMd: {
+      type: BooleanConstructor;
+    },
+
+    roundIos: {
+      type: BooleanConstructor;
+    },
+
+    fill: {
+      type: BooleanConstructor;
+    },
+
+    fillMd: {
+      type: BooleanConstructor;
+    },
+
+    fillIos: {
+      type: BooleanConstructor;
+    },
+
+    large: {
+      type: BooleanConstructor;
+    },
+
+    largeMd: {
+      type: BooleanConstructor;
+    },
+
+    largeIos: {
+      type: BooleanConstructor;
+    },
+
+    small: {
+      type: BooleanConstructor;
+    },
+
+    smallMd: {
+      type: BooleanConstructor;
+    },
+
+    smallIos: {
+      type: BooleanConstructor;
+    },
+
+    raised: {
+      type: BooleanConstructor;
+    },
+
+    raisedMd: {
+      type: BooleanConstructor;
+    },
+
+    raisedIos: {
+      type: BooleanConstructor;
+    },
+
+    init: {
+      type: BooleanConstructor;
+      default: boolean;
+    },
+
+    value: {
+      type: NumberConstructor;
+      default: number;
+    },
+
+    min: {
+      type: NumberConstructor;
+      default: number;
+    },
+
+    max: {
+      type: NumberConstructor;
+      default: number;
+    },
+
+    step: {
+      type: NumberConstructor;
+      default: number;
+    },
+
+    input: {
+      type: BooleanConstructor;
+      default: boolean;
+    },
+
+    inputType: {
+      type: StringConstructor;
+      default: string;
+    },
+
+    inputReadonly: {
+      type: BooleanConstructor;
+      default: boolean;
+    },
+
+    autorepeat: {
+      type: BooleanConstructor;
+      default: boolean;
+    },
+
+    autorepeatDynamic: {
+      type: BooleanConstructor;
+      default: boolean;
+    },
+
+    wraps: {
+      type: BooleanConstructor;
+      default: boolean;
+    },
+
+    manualInputMode: {
+      type: BooleanConstructor;
+      default: boolean;
+    },
+
+    decimalPoint: {
+      type: NumberConstructor;
+      default: number;
+    },
+
+    buttonsEndInputMode: {
+      type: BooleanConstructor;
+      default: boolean;
+    },
+
+    color: {
+      type: StringConstructor;
+    },
+
+    colorTheme: {
+      type: StringConstructor;
+    },
+
+    textColor: {
+      type: StringConstructor;
+    },
+
+    bgColor: {
+      type: StringConstructor;
+    },
+
+    borderColor: {
+      type: StringConstructor;
+    },
+
+    rippleColor: {
+      type: StringConstructor;
+    },
+
+    dark: {
+      type: BooleanConstructor;
+    }
+  },
+  () => JSX.Element,
+  unknown,
+  {},
+  {},
+  ComponentOptionsMixin,
+  ComponentOptionsMixin,
+  ("input" | "change" | "stepper:minusclick" | "stepper:plusclick" | "stepper:change" | "update:value")[],
+  "input" | "change" | "stepper:minusclick" | "stepper:plusclick" | "stepper:change" | "update:value"
+>;
+
+export default Stepper;
+  

package/components/stepper.js

@@ -0,0 +1,230 @@
+import { createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString, normalizeClass as _normalizeClass } from "vue";
+const _hoisted_1 = {
+  key: 0,
+  class: "stepper-input-wrap"
+};
+const _hoisted_2 = ["id", "name", "type", "min", "max", "step", "value", "readonly"];
+const _hoisted_3 = {
+  key: 1,
+  class: "stepper-value"
+};
+function render(_ctx, _cache) {
+  return _openBlock(), _createElementBlock("div", {
+    ref: "elRef",
+    class: _normalizeClass(_ctx.classes)
+  }, [_createElementVNode("div", {
+    class: "stepper-button-minus",
+    onClick: _cache[0] || (_cache[0] = function () {
+      return _ctx.onMinusClick && _ctx.onMinusClick(...arguments);
+    })
+  }), _ctx.input && !_ctx.buttonsOnly ? (_openBlock(), _createElementBlock("div", _hoisted_1, [_createElementVNode("input", {
+    id: _ctx.inputId,
+    name: _ctx.name,
+    type: _ctx.inputType,
+    min: _ctx.inputType === 'number' ? _ctx.min : undefined,
+    max: _ctx.inputType === 'number' ? _ctx.max : undefined,
+    step: _ctx.inputType === 'number' ? _ctx.step : undefined,
+    value: _ctx.value,
+    readonly: _ctx.inputReadonly,
+    onInput: _cache[1] || (_cache[1] = function () {
+      return _ctx.onInput && _ctx.onInput(...arguments);
+    }),
+    onChange: _cache[2] || (_cache[2] = function () {
+      return _ctx.onChange && _ctx.onChange(...arguments);
+    })
+  }, null, 40, _hoisted_2)])) : _createCommentVNode("", true), !_ctx.input && !_ctx.buttonsOnly ? (_openBlock(), _createElementBlock("div", _hoisted_3, _toDisplayString(_ctx.value), 1)) : _createCommentVNode("", true), _createElementVNode("div", {
+    class: "stepper-button-plus",
+    onClick: _cache[3] || (_cache[3] = function () {
+      return _ctx.onPlusClick && _ctx.onPlusClick(...arguments);
+    })
+  })], 2);
+}
+import { computed, ref, watch, onMounted, onBeforeUnmount } from 'vue';
+import { classNames, noUndefinedProps } from '../shared/utils.js';
+import { colorClasses, colorProps } from '../shared/mixins.js';
+import { f7ready, f7 } from '../shared/f7.js';
+export default {
+  name: 'f7-stepper',
+  render,
+  props: {
+    init: {
+      type: Boolean,
+      default: true
+    },
+    value: {
+      type: Number,
+      default: 0
+    },
+    min: {
+      type: Number,
+      default: 0
+    },
+    max: {
+      type: Number,
+      default: 100
+    },
+    step: {
+      type: Number,
+      default: 1
+    },
+    formatValue: Function,
+    name: String,
+    inputId: String,
+    input: {
+      type: Boolean,
+      default: true
+    },
+    inputType: {
+      type: String,
+      default: 'text'
+    },
+    inputReadonly: {
+      type: Boolean,
+      default: false
+    },
+    autorepeat: {
+      type: Boolean,
+      default: false
+    },
+    autorepeatDynamic: {
+      type: Boolean,
+      default: false
+    },
+    wraps: {
+      type: Boolean,
+      default: false
+    },
+    manualInputMode: {
+      type: Boolean,
+      default: false
+    },
+    decimalPoint: {
+      type: Number,
+      default: 4
+    },
+    buttonsEndInputMode: {
+      type: Boolean,
+      default: true
+    },
+    disabled: Boolean,
+    buttonsOnly: Boolean,
+    round: Boolean,
+    roundMd: Boolean,
+    roundIos: Boolean,
+    fill: Boolean,
+    fillMd: Boolean,
+    fillIos: Boolean,
+    large: Boolean,
+    largeMd: Boolean,
+    largeIos: Boolean,
+    small: Boolean,
+    smallMd: Boolean,
+    smallIos: Boolean,
+    raised: Boolean,
+    raisedMd: Boolean,
+    raisedIos: Boolean,
+    ...colorProps
+  },
+  emits: ['input', 'change', 'stepper:minusclick', 'stepper:plusclick', 'stepper:change', 'update:value'],
+  setup(props, _ref) {
+    let {
+      emit
+    } = _ref;
+    let f7Stepper = null;
+    const elRef = ref(null);
+    const increment = () => {
+      if (!f7Stepper) return;
+      f7Stepper.increment();
+    };
+    const decrement = () => {
+      if (!f7Stepper) return;
+      f7Stepper.decrement();
+    };
+    const setValue = newValue => {
+      if (f7Stepper && f7Stepper.setValue) f7Stepper.setValue(newValue);
+    };
+    const getValue = () => {
+      if (f7Stepper && f7Stepper.getValue) {
+        return f7Stepper.getValue();
+      }
+      return undefined;
+    };
+    const onInput = event => {
+      emit('input', event, f7Stepper);
+    };
+    const onChange = event => {
+      emit('change', event, f7Stepper);
+    };
+    const onMinusClick = event => {
+      emit('stepper:minusclick', event, f7Stepper);
+    };
+    const onPlusClick = event => {
+      emit('stepper:plusclick', event, f7Stepper);
+    };
+    watch(() => props.value, newValue => {
+      if (!f7Stepper) return;
+      f7Stepper.setValue(newValue);
+    });
+    onMounted(() => {
+      f7ready(() => {
+        if (!props.init || !elRef.value) return;
+        f7Stepper = f7.stepper.create(noUndefinedProps({
+          el: elRef.value,
+          min: props.min,
+          max: props.max,
+          value: props.value,
+          step: props.step,
+          formatValue: props.formatValue,
+          autorepeat: props.autorepeat,
+          autorepeatDynamic: props.autorepeatDynamic,
+          wraps: props.wraps,
+          manualInputMode: props.manualInputMode,
+          decimalPoint: props.decimalPoint,
+          buttonsEndInputMode: props.buttonsEndInputMode,
+          on: {
+            change(stepper, newValue) {
+              emit('stepper:change', newValue);
+              emit('update:value', newValue);
+            }
+          }
+        }));
+      });
+    });
+    onBeforeUnmount(() => {
+      if (f7Stepper && f7Stepper.destroy) {
+        f7Stepper.destroy();
+      }
+      f7Stepper = null;
+    });
+    const classes = computed(() => classNames('stepper', {
+      disabled: props.disabled,
+      'stepper-round': props.round,
+      'stepper-round-ios': props.roundIos,
+      'stepper-round-md': props.roundMd,
+      'stepper-fill': props.fill,
+      'stepper-fill-ios': props.fillIos,
+      'stepper-fill-md': props.fillMd,
+      'stepper-large': props.large,
+      'stepper-large-ios': props.largeIos,
+      'stepper-large-md': props.largeMd,
+      'stepper-small': props.small,
+      'stepper-small-ios': props.smallIos,
+      'stepper-small-md': props.smallMd,
+      'stepper-raised': props.raised,
+      'stepper-raised-ios': props.raisedIos,
+      'stepper-raised-md': props.raisedMd
+    }, colorClasses(props)));
+    return {
+      elRef,
+      classes,
+      increment,
+      decrement,
+      setValue,
+      getValue,
+      onInput,
+      onChange,
+      onMinusClick,
+      onPlusClick
+    };
+  }
+};