@xenknight/framework7-vue 0.0.2

package/components/radio.js

@@ -0,0 +1,59 @@
+import { createElementVNode as _createElementVNode, renderSlot as _renderSlot, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+const _hoisted_1 = ["name", "value", "disabled", "readonly", "checked"];
+const _hoisted_2 = /*#__PURE__*/_createElementVNode("i", {
+  class: "icon-radio"
+}, null, -1);
+function render(_ctx, _cache) {
+  return _openBlock(), _createElementBlock("label", {
+    class: _normalizeClass(_ctx.classes)
+  }, [_createElementVNode("input", {
+    ref: "inputElRef",
+    type: "radio",
+    name: _ctx.name,
+    value: _ctx.value,
+    disabled: _ctx.disabled,
+    readonly: _ctx.readonly,
+    checked: _ctx.checked,
+    onChange: _cache[0] || (_cache[0] = function () {
+      return _ctx.onChange && _ctx.onChange(...arguments);
+    })
+  }, null, 40, _hoisted_1), _hoisted_2, _renderSlot(_ctx.$slots, "default")], 2);
+}
+import { ref, computed } from 'vue';
+import { classNames } from '../shared/utils.js';
+import { colorClasses, colorProps } from '../shared/mixins.js';
+export default {
+  name: 'f7-radio',
+  render,
+  props: {
+    checked: Boolean,
+    name: [Number, String],
+    value: {
+      type: [Number, String, Boolean],
+      default: undefined
+    },
+    disabled: Boolean,
+    readonly: Boolean,
+    ...colorProps
+  },
+  emits: ['update:checked', 'change'],
+  setup(props, _ref) {
+    let {
+      emit
+    } = _ref;
+    const inputElRef = ref(null);
+    const onChange = event => {
+      emit('update:checked', event.target.checked);
+      emit('change', event);
+    };
+    const classes = computed(() => classNames({
+      radio: true,
+      disabled: props.disabled
+    }, colorClasses(props)));
+    return {
+      inputElRef,
+      classes,
+      onChange
+    };
+  }
+};

package/components/range.d.ts

@@ -0,0 +1,141 @@
+
+import { ComponentOptionsMixin, DefineComponent, PropType } from 'vue';
+
+
+declare const Range: DefineComponent<
+  {
+    
+    formatLabel: {
+      type: FunctionConstructor;
+    },
+
+    formatScaleLabel: {
+      type: FunctionConstructor;
+    },
+
+    name: {
+      type: StringConstructor;
+    },
+
+    input: {
+      type: BooleanConstructor;
+    },
+
+    inputId: {
+      type: StringConstructor;
+    },
+
+    disabled: {
+      type: BooleanConstructor;
+    },
+
+    init: {
+      type: BooleanConstructor;
+      default: boolean;
+    },
+
+    value: {
+      type: NumberConstructor | ArrayConstructor | StringConstructor;
+      default: number;
+    },
+
+    min: {
+      type: NumberConstructor | StringConstructor;
+      default: number;
+    },
+
+    max: {
+      type: NumberConstructor | StringConstructor;
+      default: number;
+    },
+
+    step: {
+      type: NumberConstructor | StringConstructor;
+      default: number;
+    },
+
+    label: {
+      type: BooleanConstructor;
+      default: boolean;
+    },
+
+    dual: {
+      type: BooleanConstructor;
+      default: boolean;
+    },
+
+    vertical: {
+      type: BooleanConstructor;
+      default: boolean;
+    },
+
+    verticalReversed: {
+      type: BooleanConstructor;
+      default: boolean;
+    },
+
+    draggableBar: {
+      type: BooleanConstructor;
+      default: boolean;
+    },
+
+    scale: {
+      type: BooleanConstructor;
+      default: boolean;
+    },
+
+    scaleSteps: {
+      type: NumberConstructor;
+      default: number;
+    },
+
+    scaleSubSteps: {
+      type: NumberConstructor;
+      default: number;
+    },
+
+    limitKnobPosition: {
+      type: BooleanConstructor;
+      default: undefined;
+    },
+
+    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,
+  ("range:change" | "range:changed" | "rangeChange" | "rangeChanged" | "update:value")[],
+  "range:change" | "range:changed" | "rangeChange" | "rangeChanged" | "update:value"
+>;
+
+export default Range;
+  

package/components/range.js

@@ -0,0 +1,139 @@
+import { openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, renderSlot as _renderSlot, normalizeClass as _normalizeClass } from "vue";
+const _hoisted_1 = ["name"];
+function render(_ctx, _cache) {
+  return _openBlock(), _createElementBlock("div", {
+    ref: "elRef",
+    class: _normalizeClass(_ctx.classes)
+  }, [_ctx.input ? (_openBlock(), _createElementBlock("input", {
+    key: 0,
+    id: "inputId",
+    type: "range",
+    name: _ctx.name
+  }, null, 8, _hoisted_1)) : _createCommentVNode("", true), _renderSlot(_ctx.$slots, "default")], 2);
+}
+import { computed, ref, onMounted, onBeforeUnmount, watch } 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-range',
+  render,
+  props: {
+    init: {
+      type: Boolean,
+      default: true
+    },
+    value: {
+      type: [Number, Array, String],
+      default: 0
+    },
+    min: {
+      type: [Number, String],
+      default: 0
+    },
+    max: {
+      type: [Number, String],
+      default: 100
+    },
+    step: {
+      type: [Number, String],
+      default: 1
+    },
+    label: {
+      type: Boolean,
+      default: false
+    },
+    dual: {
+      type: Boolean,
+      default: false
+    },
+    vertical: {
+      type: Boolean,
+      default: false
+    },
+    verticalReversed: {
+      type: Boolean,
+      default: false
+    },
+    draggableBar: {
+      type: Boolean,
+      default: true
+    },
+    formatLabel: Function,
+    scale: {
+      type: Boolean,
+      default: false
+    },
+    scaleSteps: {
+      type: Number,
+      default: 5
+    },
+    scaleSubSteps: {
+      type: Number,
+      default: 0
+    },
+    formatScaleLabel: Function,
+    limitKnobPosition: {
+      type: Boolean,
+      default: undefined
+    },
+    name: String,
+    input: Boolean,
+    inputId: String,
+    disabled: Boolean,
+    ...colorProps
+  },
+  emits: ['range:change', 'range:changed', 'rangeChange', 'rangeChanged', 'update:value'],
+  setup(props, _ref) {
+    let {
+      emit
+    } = _ref;
+    let f7Range = null;
+    const elRef = ref(null);
+    watch(() => props.value, newValue => {
+      if (!f7Range) return;
+      const rangeValue = f7Range.value;
+      if (Array.isArray(newValue) && Array.isArray(rangeValue)) {
+        if (rangeValue[0] !== newValue[0] || rangeValue[1] !== newValue[1]) {
+          f7Range.setValue(newValue);
+        }
+      } else {
+        f7Range.setValue(newValue);
+      }
+    });
+    onMounted(() => {
+      f7ready(() => {
+        if (!props.init || !elRef.value) return;
+        f7Range = f7.range.create(noUndefinedProps({
+          el: elRef.value,
+          ...props,
+          on: {
+            change(range, val) {
+              emit('range:change', val);
+              emit('rangeChange', val);
+            },
+            changed(range, val) {
+              emit('range:changed', val);
+              emit('rangeChanged', val);
+              emit('update:value', val);
+            }
+          }
+        }));
+      });
+    });
+    onBeforeUnmount(() => {
+      if (f7Range && f7Range.destroy) f7Range.destroy();
+      f7Range = null;
+    });
+    const classes = computed(() => classNames('range-slider', {
+      'range-slider-horizontal': !props.vertical,
+      'range-slider-vertical': props.vertical,
+      'range-slider-vertical-reversed': props.vertical && props.verticalReversed,
+      disabled: props.disabled
+    }, colorClasses(props)));
+    return {
+      elRef,
+      classes
+    };
+  }
+};

package/components/routable-modals.d.ts

@@ -0,0 +1,19 @@
+
+import { ComponentOptionsMixin, DefineComponent, PropType } from 'vue';
+
+
+declare const RoutableModals: DefineComponent<
+  {
+    
+  },
+  () => JSX.Element,
+  unknown,
+  {},
+  {},
+  ComponentOptionsMixin,
+  ComponentOptionsMixin,
+  
+>;
+
+export default RoutableModals;
+  

package/components/routable-modals.js

@@ -0,0 +1,58 @@
+import { ref, onMounted, onBeforeUnmount, onUpdated, toRaw, h } from 'vue';
+import { f7events, f7routers, f7 } from '../shared/f7.js';
+export default {
+  name: 'f7-routable-modals',
+  setup() {
+    const elRef = ref(null);
+    const modals = ref([]);
+    const routerData = ref(null);
+    onMounted(() => {
+      routerData.value = {
+        modals,
+        el: elRef.value,
+        setModals(newModals) {
+          newModals.forEach(modal => {
+            // eslint-disable-next-line
+            modal.component = toRaw(modal.component);
+          });
+          modals.value = [...newModals];
+        }
+      };
+      f7routers.modals = routerData.value;
+    });
+    onUpdated(() => {
+      if (!routerData.value || !f7) return;
+      f7events.emit('modalsRouterDidUpdate', routerData.value);
+    });
+    onBeforeUnmount(() => {
+      if (!routerData.value) return;
+      f7routers.modals = null;
+      routerData.value = null;
+    });
+    const getComponent = modal => toRaw(modal.component);
+    const getProps = modal => {
+      const {
+        component: modalComponent,
+        props: modalProps
+      } = modal;
+      let keys = [];
+      const passProps = {};
+      if (modalComponent && modalComponent.props) keys = Object.keys(modalComponent.props);
+      keys.forEach(key => {
+        if (key in modalProps) passProps[key] = modalProps[key];
+      });
+      return passProps;
+    };
+    return () => {
+      return h('div', {
+        ref: elRef,
+        class: 'framework7-modals'
+      }, [...modals.value.map(modal => {
+        return h(getComponent(modal), {
+          key: modal.id,
+          ...getProps(modal)
+        });
+      })]);
+    };
+  }
+};

package/components/searchbar.d.ts

@@ -0,0 +1,182 @@
+
+import { ComponentOptionsMixin, DefineComponent, PropType } from 'vue';
+
+
+declare const Searchbar: DefineComponent<
+  {
+    
+    value: {
+      type: StringConstructor | NumberConstructor | ArrayConstructor;
+    },
+
+    expandable: {
+      type: BooleanConstructor;
+    },
+
+    inline: {
+      type: BooleanConstructor;
+    },
+
+    searchContainer: {
+      type: StringConstructor | ObjectConstructor;
+    },
+
+    backdropEl: {
+      type: StringConstructor | ObjectConstructor;
+    },
+
+    outline: {
+      type: any;
+      default: boolean;
+    },
+
+    form: {
+      type: BooleanConstructor;
+      default: boolean;
+    },
+
+    placeholder: {
+      type: StringConstructor;
+      default: string;
+    },
+
+    spellcheck: {
+      type: BooleanConstructor;
+      default: undefined;
+    },
+
+    disableButton: {
+      type: BooleanConstructor;
+      default: boolean;
+    },
+
+    disableButtonText: {
+      type: StringConstructor;
+      default: string;
+    },
+
+    clearButton: {
+      type: BooleanConstructor;
+      default: boolean;
+    },
+
+    inputEvents: {
+      type: StringConstructor;
+      default: string;
+    },
+
+    searchIn: {
+      type: StringConstructor;
+      default: string;
+    },
+
+    searchItem: {
+      type: StringConstructor;
+      default: string;
+    },
+
+    searchGroup: {
+      type: StringConstructor;
+      default: string;
+    },
+
+    searchGroupTitle: {
+      type: StringConstructor;
+      default: string;
+    },
+
+    foundEl: {
+      type: StringConstructor | ObjectConstructor;
+      default: string;
+    },
+
+    notFoundEl: {
+      type: StringConstructor | ObjectConstructor;
+      default: string;
+    },
+
+    backdrop: {
+      type: BooleanConstructor;
+      default: undefined;
+    },
+
+    hideOnEnableEl: {
+      type: StringConstructor | ObjectConstructor;
+      default: string;
+    },
+
+    hideOnSearchEl: {
+      type: StringConstructor | ObjectConstructor;
+      default: string;
+    },
+
+    ignore: {
+      type: StringConstructor;
+      default: string;
+    },
+
+    customSearch: {
+      type: BooleanConstructor;
+      default: boolean;
+    },
+
+    removeDiacritics: {
+      type: BooleanConstructor;
+      default: boolean;
+    },
+
+    hideGroupTitles: {
+      type: BooleanConstructor;
+      default: boolean;
+    },
+
+    hideGroups: {
+      type: BooleanConstructor;
+      default: boolean;
+    },
+
+    init: {
+      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,
+  ("change" | "input" | "focus" | "blur" | "submit" | "click:clear" | "click:disable" | "searchbar:search" | "searchbar:clear" | "searchbar:enable" | "searchbar:disable" | "update:value")[],
+  "change" | "input" | "focus" | "blur" | "submit" | "click:clear" | "click:disable" | "searchbar:search" | "searchbar:clear" | "searchbar:enable" | "searchbar:disable" | "update:value"
+>;
+
+export default Searchbar;
+