@xenknight/framework7-vue 0.0.2

package/components/searchbar.js

@@ -0,0 +1,285 @@
+import { renderSlot as _renderSlot, createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString, resolveDynamicComponent as _resolveDynamicComponent, normalizeClass as _normalizeClass, withCtx as _withCtx, createBlock as _createBlock } from "vue";
+const _hoisted_1 = {
+  class: "searchbar-inner"
+};
+const _hoisted_2 = {
+  class: "searchbar-input-wrap"
+};
+const _hoisted_3 = ["value", "placeholder", "spellcheck"];
+const _hoisted_4 = /*#__PURE__*/_createElementVNode("i", {
+  class: "searchbar-icon"
+}, null, -1);
+function render(_ctx, _cache) {
+  return _openBlock(), _createBlock(_resolveDynamicComponent(_ctx.tag), {
+    ref: "elRef",
+    class: _normalizeClass(_ctx.classes),
+    onSubmit: _ctx.onSubmit
+  }, {
+    default: _withCtx(() => [_renderSlot(_ctx.$slots, "before-inner"), _createElementVNode("div", _hoisted_1, [_renderSlot(_ctx.$slots, "inner-start"), _createElementVNode("div", _hoisted_2, [_renderSlot(_ctx.$slots, "input-wrap-start"), _createElementVNode("input", {
+      value: _ctx.value,
+      placeholder: _ctx.placeholder,
+      spellcheck: _ctx.spellcheck,
+      type: "search",
+      onInput: _cache[0] || (_cache[0] = function () {
+        return _ctx.onInput && _ctx.onInput(...arguments);
+      }),
+      onChange: _cache[1] || (_cache[1] = function () {
+        return _ctx.onChange && _ctx.onChange(...arguments);
+      }),
+      onFocus: _cache[2] || (_cache[2] = function () {
+        return _ctx.onFocus && _ctx.onFocus(...arguments);
+      }),
+      onBlur: _cache[3] || (_cache[3] = function () {
+        return _ctx.onBlur && _ctx.onBlur(...arguments);
+      })
+    }, null, 40, _hoisted_3), _hoisted_4, _ctx.clearButton ? (_openBlock(), _createElementBlock("span", {
+      key: 0,
+      class: "input-clear-button",
+      onClick: _cache[4] || (_cache[4] = function () {
+        return _ctx.onClearButtonClick && _ctx.onClearButtonClick(...arguments);
+      })
+    })) : _createCommentVNode("", true), _renderSlot(_ctx.$slots, "input-wrap-end")]), _ctx.disableButton ? (_openBlock(), _createElementBlock("span", {
+      key: 0,
+      class: "searchbar-disable-button",
+      onClick: _cache[5] || (_cache[5] = function () {
+        return _ctx.onDisableButtonClick && _ctx.onDisableButtonClick(...arguments);
+      })
+    }, _toDisplayString(_ctx.disableButtonText), 1)) : _createCommentVNode("", true), _renderSlot(_ctx.$slots, "inner-end"), _renderSlot(_ctx.$slots, "default")]), _renderSlot(_ctx.$slots, "after-inner")]),
+    _: 3
+  }, 40, ["class", "onSubmit"]);
+}
+import { computed, ref, 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-searchbar',
+  render,
+  props: {
+    outline: {
+      type: Boolean,
+      default: true
+    },
+    form: {
+      type: Boolean,
+      default: true
+    },
+    placeholder: {
+      type: String,
+      default: 'Search'
+    },
+    spellcheck: {
+      type: Boolean,
+      default: undefined
+    },
+    disableButton: {
+      type: Boolean,
+      default: true
+    },
+    disableButtonText: {
+      type: String,
+      default: 'Cancel'
+    },
+    clearButton: {
+      type: Boolean,
+      default: true
+    },
+    // Input Value
+    value: [String, Number, Array],
+    // SB Params
+    inputEvents: {
+      type: String,
+      default: 'change input compositionend'
+    },
+    expandable: Boolean,
+    inline: Boolean,
+    searchContainer: [String, Object],
+    searchIn: {
+      type: String,
+      default: '.item-title'
+    },
+    searchItem: {
+      type: String,
+      default: 'li'
+    },
+    searchGroup: {
+      type: String,
+      default: '.list-group'
+    },
+    searchGroupTitle: {
+      type: String,
+      default: '.list-group-title'
+    },
+    foundEl: {
+      type: [String, Object],
+      default: '.searchbar-found'
+    },
+    notFoundEl: {
+      type: [String, Object],
+      default: '.searchbar-not-found'
+    },
+    backdrop: {
+      type: Boolean,
+      default: undefined
+    },
+    backdropEl: [String, Object],
+    hideOnEnableEl: {
+      type: [String, Object],
+      default: '.searchbar-hide-on-enable'
+    },
+    hideOnSearchEl: {
+      type: [String, Object],
+      default: '.searchbar-hide-on-search'
+    },
+    ignore: {
+      type: String,
+      default: '.searchbar-ignore'
+    },
+    customSearch: {
+      type: Boolean,
+      default: false
+    },
+    removeDiacritics: {
+      type: Boolean,
+      default: false
+    },
+    hideGroupTitles: {
+      type: Boolean,
+      default: true
+    },
+    hideGroups: {
+      type: Boolean,
+      default: true
+    },
+    init: {
+      type: Boolean,
+      default: true
+    },
+    ...colorProps
+  },
+  emits: ['change', 'input', 'focus', 'blur', 'submit', 'click:clear', 'click:disable', 'searchbar:search', 'searchbar:clear', 'searchbar:enable', 'searchbar:disable', 'update:value'],
+  setup(props, _ref) {
+    let {
+      emit
+    } = _ref;
+    let f7Searchbar = null;
+    const elRef = ref(null);
+    const search = query => {
+      if (!f7Searchbar) return undefined;
+      return f7Searchbar.search(query);
+    };
+    const enable = () => {
+      if (!f7Searchbar) return undefined;
+      return f7Searchbar.enable();
+    };
+    const disable = () => {
+      if (!f7Searchbar) return undefined;
+      return f7Searchbar.disable();
+    };
+    const toggle = () => {
+      if (!f7Searchbar) return undefined;
+      return f7Searchbar.toggle();
+    };
+    const clear = () => {
+      if (!f7Searchbar) return undefined;
+      return f7Searchbar.clear();
+    };
+    const onChange = event => {
+      emit('change', event);
+    };
+    const onInput = event => {
+      emit('input', event);
+      emit('update:value', event.target.value);
+    };
+    const onFocus = event => {
+      emit('focus', event);
+    };
+    const onBlur = event => {
+      emit('blur', event);
+    };
+    const onSubmit = event => {
+      emit('submit', event);
+    };
+    const onClearButtonClick = event => {
+      emit('click:clear', event);
+    };
+    const onDisableButtonClick = event => {
+      emit('click:disable', event);
+    };
+    onMounted(() => {
+      if (!props.init) return;
+      f7ready(() => {
+        const params = noUndefinedProps({
+          el: elRef.value,
+          inputEvents: props.inputEvents,
+          searchContainer: props.searchContainer,
+          searchIn: props.searchIn,
+          searchItem: props.searchItem,
+          searchGroup: props.searchGroup,
+          searchGroupTitle: props.searchGroupTitle,
+          hideOnEnableEl: props.hideOnEnableEl,
+          hideOnSearchEl: props.hideOnSearchEl,
+          foundEl: props.foundEl,
+          notFoundEl: props.notFoundEl,
+          backdrop: props.backdrop,
+          backdropEl: props.backdropEl,
+          disableButton: props.disableButton,
+          ignore: props.ignore,
+          customSearch: props.customSearch,
+          removeDiacritics: props.removeDiacritics,
+          hideGroupTitles: props.hideGroupTitles,
+          hideGroups: props.hideGroups,
+          expandable: props.expandable,
+          inline: props.inline,
+          on: {
+            search(searchbar, query, previousQuery) {
+              emit('searchbar:search', searchbar, query, previousQuery);
+            },
+            clear(searchbar, previousQuery) {
+              emit('searchbar:clear', searchbar, previousQuery);
+            },
+            enable(searchbar) {
+              emit('searchbar:enable', searchbar);
+            },
+            disable(searchbar) {
+              emit('searchbar:disable', searchbar);
+            }
+          }
+        });
+        Object.keys(params).forEach(key => {
+          if (params[key] === '') {
+            delete params[key];
+          }
+        });
+        f7Searchbar = f7.searchbar.create(params);
+      });
+    });
+    onBeforeUnmount(() => {
+      if (f7Searchbar && f7Searchbar.destroy) f7Searchbar.destroy();
+      f7Searchbar = null;
+    });
+    const classes = computed(() => classNames('searchbar', {
+      'searchbar-inline': props.inline,
+      'no-outline': !props.outline,
+      'searchbar-expandable': props.expandable
+    }, colorClasses(props)));
+    const tag = computed(() => props.form ? 'form' : 'div');
+    return {
+      elRef,
+      tag,
+      classes,
+      search,
+      enable,
+      disable,
+      toggle,
+      clear,
+      onChange,
+      onInput,
+      onFocus,
+      onBlur,
+      onSubmit,
+      onClearButtonClick,
+      onDisableButtonClick
+    };
+  }
+};

package/components/segmented.d.ts

@@ -0,0 +1,87 @@
+
+import { ComponentOptionsMixin, DefineComponent, PropType } from 'vue';
+
+
+declare const Segmented: DefineComponent<
+  {
+    
+    raised: {
+      type: BooleanConstructor;
+    },
+
+    raisedIos: {
+      type: BooleanConstructor;
+    },
+
+    raisedMd: {
+      type: BooleanConstructor;
+    },
+
+    round: {
+      type: BooleanConstructor;
+    },
+
+    roundIos: {
+      type: BooleanConstructor;
+    },
+
+    roundMd: {
+      type: BooleanConstructor;
+    },
+
+    strong: {
+      type: BooleanConstructor;
+    },
+
+    strongIos: {
+      type: BooleanConstructor;
+    },
+
+    strongMd: {
+      type: BooleanConstructor;
+    },
+
+    tag: {
+      type: StringConstructor;
+      default: string;
+    },
+
+    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,
+  
+>;
+
+export default Segmented;
+  

package/components/segmented.js

@@ -0,0 +1,53 @@
+import { renderSlot as _renderSlot, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, resolveDynamicComponent as _resolveDynamicComponent, normalizeClass as _normalizeClass, withCtx as _withCtx, createBlock as _createBlock } from "vue";
+const _hoisted_1 = {
+  key: 0,
+  class: "segmented-highlight"
+};
+function render(_ctx, _cache) {
+  return _openBlock(), _createBlock(_resolveDynamicComponent(_ctx.tag), {
+    class: _normalizeClass(_ctx.classes)
+  }, {
+    default: _withCtx(() => [_renderSlot(_ctx.$slots, "default"), _ctx.strong || _ctx.strongIos || _ctx.strongMd ? (_openBlock(), _createElementBlock("span", _hoisted_1)) : _createCommentVNode("", true)]),
+    _: 3
+  }, 8, ["class"]);
+}
+import { computed } from 'vue';
+import { classNames } from '../shared/utils.js';
+import { colorClasses, colorProps } from '../shared/mixins.js';
+export default {
+  name: 'f7-segmented',
+  render,
+  props: {
+    raised: Boolean,
+    raisedIos: Boolean,
+    raisedMd: Boolean,
+    round: Boolean,
+    roundIos: Boolean,
+    roundMd: Boolean,
+    strong: Boolean,
+    strongIos: Boolean,
+    strongMd: Boolean,
+    tag: {
+      type: String,
+      default: 'div'
+    },
+    ...colorProps
+  },
+  setup(props) {
+    const classes = computed(() => classNames({
+      segmented: true,
+      'segmented-raised': props.raised,
+      'segmented-raised-ios': props.raisedIos,
+      'segmented-raised-md': props.raisedMd,
+      'segmented-round': props.round,
+      'segmented-round-ios': props.roundIos,
+      'segmented-round-md': props.roundMd,
+      'segmented-strong': props.strong,
+      'segmented-strong-ios': props.strongIos,
+      'segmented-strong-md': props.strongMd
+    }, colorClasses(props)));
+    return {
+      classes
+    };
+  }
+};

package/components/sheet.d.ts

@@ -0,0 +1,132 @@
+
+import { ComponentOptionsMixin, DefineComponent, PropType } from 'vue';
+
+
+declare const Sheet: DefineComponent<
+  {
+    
+    opened: {
+      type: BooleanConstructor;
+    },
+
+    top: {
+      type: BooleanConstructor;
+    },
+
+    bottom: {
+      type: BooleanConstructor;
+    },
+
+    position: {
+      type: StringConstructor;
+    },
+
+    push: {
+      type: BooleanConstructor;
+    },
+
+    animate: {
+      type: BooleanConstructor;
+      default: undefined;
+    },
+
+    backdrop: {
+      type: BooleanConstructor;
+      default: undefined;
+    },
+
+    backdropEl: {
+      type: StringConstructor | ObjectConstructor;
+      default: undefined;
+    },
+
+    closeByBackdropClick: {
+      type: BooleanConstructor;
+      default: undefined;
+    },
+
+    closeByOutsideClick: {
+      type: BooleanConstructor;
+      default: undefined;
+    },
+
+    closeOnEscape: {
+      type: BooleanConstructor;
+      default: undefined;
+    },
+
+    swipeToClose: {
+      type: BooleanConstructor;
+      default: undefined;
+    },
+
+    swipeToStep: {
+      type: BooleanConstructor;
+      default: undefined;
+    },
+
+    swipeHandler: {
+      type: StringConstructor | ObjectConstructor;
+      default: undefined;
+    },
+
+    containerEl: {
+      type: StringConstructor | ObjectConstructor;
+      default: undefined;
+    },
+
+    breakpoints: {
+      type: ArrayConstructor;
+      default: () => undefined;
+    },
+
+    backdropBreakpoint: {
+      type: NumberConstructor;
+      default: undefined;
+    },
+
+    pushBreakpoint: {
+      type: NumberConstructor;
+      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,
+  ("sheet:stepprogress" | "sheet:stepopen" | "sheet:stepclose" | "sheet:open" | "sheet:opened" | "sheet:close" | "sheet:closed" | "sheet:breakpoint" | "update:opened")[],
+  "sheet:stepprogress" | "sheet:stepopen" | "sheet:stepclose" | "sheet:open" | "sheet:opened" | "sheet:close" | "sheet:closed" | "sheet:breakpoint" | "update:opened"
+>;
+
+export default Sheet;
+