framework7-vue
Version:
Build full featured iOS & Android apps using Framework7 & Vue
276 lines • 8.71 kB
JavaScript
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 = {
key: 0
};
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] = (...args) => _ctx.onInput && _ctx.onInput(...args)),
onChange: _cache[1] || (_cache[1] = (...args) => _ctx.onChange && _ctx.onChange(...args)),
onFocus: _cache[2] || (_cache[2] = (...args) => _ctx.onFocus && _ctx.onFocus(...args)),
onBlur: _cache[3] || (_cache[3] = (...args) => _ctx.onBlur && _ctx.onBlur(...args))
}, null, 40, _hoisted_3), _cache[6] || (_cache[6] = _createElementVNode("i", {
class: "searchbar-icon"
}, null, -1)), _ctx.clearButton ? (_openBlock(), _createElementBlock("span", {
key: 0,
class: "input-clear-button",
onClick: _cache[4] || (_cache[4] = (...args) => _ctx.onClearButtonClick && _ctx.onClearButtonClick(...args))
})) : _createCommentVNode("", true), _renderSlot(_ctx.$slots, "input-wrap-end")]), _ctx.disableButton ? (_openBlock(), _createElementBlock("span", {
key: 0,
class: "searchbar-disable-button",
onClick: _cache[5] || (_cache[5] = (...args) => _ctx.onDisableButtonClick && _ctx.onDisableButtonClick(...args))
}, [_cache[7] || (_cache[7] = _createElementVNode("i", {
class: "icon icon-close"
}, null, -1)), _ctx.disableButtonText ? (_openBlock(), _createElementBlock("span", _hoisted_4, _toDisplayString(_ctx.disableButtonText), 1)) : _createCommentVNode("", true)])) : _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, {
emit
}) {
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
};
}
};