@xenknight/framework7-vue 0.0.2

package/shared/use-icon.js

@@ -0,0 +1,37 @@
+export const useIcon = function (props) {
+  if (props === void 0) {
+    props = {};
+  }
+  const {
+    icon,
+    iconMaterial,
+    iconF7,
+    iconMd,
+    iconIos,
+    iconColor,
+    iconSize,
+    iconBadge,
+    badgeColor,
+    iconBadgeColor
+  } = props;
+  if (icon || iconMaterial || iconF7 || iconMd || iconIos) {
+    return {
+      props: {
+        material: iconMaterial,
+        f7: iconF7,
+        icon,
+        md: iconMd,
+        ios: iconIos,
+        color: iconColor,
+        size: iconSize
+      },
+      badge: iconBadge || iconBadge === 0 ? {
+        props: {
+          color: badgeColor || iconBadgeColor
+        },
+        content: iconBadge
+      } : null
+    };
+  }
+  return null;
+};

package/shared/use-route-props.js

@@ -0,0 +1,18 @@
+import { onMounted, onUpdated } from 'vue';
+export const useRouteProps = function (elRef, _temp) {
+  let {
+    routeProps
+  } = _temp === void 0 ? {} : _temp;
+  onMounted(() => {
+    if (elRef.value && routeProps) {
+      elRef.value.f7RouteProps = routeProps;
+    }
+  });
+  onUpdated(() => {
+    if (elRef.value && routeProps) {
+      elRef.value.f7RouteProps = routeProps;
+    } else if (elRef.value && elRef.value.f7RouteProps) {
+      delete elRef.value.f7RouteProps;
+    }
+  });
+};

package/shared/use-smart-select.js

@@ -0,0 +1,24 @@
+import { onMounted, onBeforeUnmount } from 'vue';
+import { f7ready, f7 } from './f7.js';
+import { extend } from './utils.js';
+export const useSmartSelect = (props, setInstance, getEl) => {
+  let f7SmartSelect;
+  onMounted(() => {
+    f7ready(() => {
+      if (props.smartSelect) {
+        const ssParams = extend({
+          el: getEl()
+        }, props.smartSelectParams || {});
+        f7SmartSelect = f7.smartSelect.create(ssParams);
+        setInstance(f7SmartSelect);
+      }
+    });
+  });
+  onBeforeUnmount(() => {
+    if (f7SmartSelect && f7SmartSelect.destroy) {
+      f7SmartSelect.destroy();
+    }
+    f7SmartSelect = null;
+    setInstance(f7SmartSelect);
+  });
+};

package/shared/use-store.js

@@ -0,0 +1,24 @@
+import { onBeforeUnmount, ref } from 'vue';
+import { f7 } from './f7.js';
+export const useStore = function () {
+  // (store, getter)
+  let store = arguments.length <= 0 ? undefined : arguments[0];
+  let getter = arguments.length <= 1 ? undefined : arguments[1];
+  if (arguments.length === 1) {
+    // (getter)
+    store = f7.store;
+    getter = arguments.length <= 0 ? undefined : arguments[0];
+  }
+  // eslint-disable-next-line
+  const obj = store._gettersPlain[getter];
+  const valueRef = ref(obj.value);
+  const callback = v => {
+    valueRef.value = v;
+  };
+  obj.onUpdated(callback);
+  onBeforeUnmount(() => {
+    // eslint-disable-next-line
+    store.__removeCallback(callback);
+  });
+  return valueRef;
+};

package/shared/use-tab.js

@@ -0,0 +1,24 @@
+import { onMounted, onBeforeUnmount } from 'vue';
+import { f7, f7ready } from './f7.js';
+export const useTab = (elRef, emit) => {
+  const onTabShow = el => {
+    if (elRef.value !== el) return;
+    emit('tab:show', el);
+  };
+  const onTabHide = el => {
+    if (elRef.value !== el) return;
+    emit('tab:hide', el);
+  };
+  onMounted(() => {
+    if (!elRef.value) return;
+    f7ready(() => {
+      f7.on('tabShow', onTabShow);
+      f7.on('tabHide', onTabHide);
+    });
+  });
+  onBeforeUnmount(() => {
+    if (!f7) return;
+    f7.off('tabShow', onTabShow);
+    f7.off('tabHide', onTabHide);
+  });
+};

package/shared/use-theme.js

@@ -0,0 +1,11 @@
+import { ref } from 'vue';
+import { f7, f7ready, theme } from './f7.js';
+export const useTheme = () => {
+  const t = ref(f7 ? theme : null);
+  if (!f7) {
+    f7ready(() => {
+      t.value = theme;
+    });
+  }
+  return t;
+};

package/shared/use-tooltip.js

@@ -0,0 +1,43 @@
+import { watch, onMounted, onBeforeUnmount } from 'vue';
+import { f7, f7ready } from './f7.js';
+export const useTooltip = (elRef, props) => {
+  let f7Tooltip = null;
+  const {
+    tooltip,
+    tooltipTrigger
+  } = props;
+  onMounted(() => {
+    if (!elRef.value) return;
+    if (!tooltip) return;
+    f7ready(() => {
+      f7Tooltip = f7.tooltip.create({
+        targetEl: elRef.value,
+        text: tooltip,
+        trigger: tooltipTrigger
+      });
+    });
+  });
+  onBeforeUnmount(() => {
+    if (f7Tooltip && f7Tooltip.destroy) {
+      f7Tooltip.destroy();
+      f7Tooltip = null;
+    }
+  });
+  watch(() => props.tooltip, value => {
+    if (!value && f7Tooltip) {
+      f7Tooltip.destroy();
+      f7Tooltip = null;
+      return;
+    }
+    if (value && !f7Tooltip && f7) {
+      f7Tooltip = f7.tooltip.create({
+        targetEl: elRef.value,
+        text: value,
+        trigger: tooltipTrigger
+      });
+      return;
+    }
+    if (!value || !f7Tooltip) return;
+    f7Tooltip.setText(value);
+  });
+};

package/shared/utils.js

@@ -0,0 +1,110 @@
+import { Comment, Fragment } from 'vue';
+export function noUndefinedProps(obj) {
+  const o = {};
+  Object.keys(obj).forEach(key => {
+    if (typeof obj[key] !== 'undefined') o[key] = obj[key];
+  });
+  return o;
+}
+export function isStringProp(val) {
+  return typeof val === 'string' && val !== '';
+}
+export function isObject(o) {
+  return typeof o === 'object' && o !== null && o.constructor && o.constructor === Object;
+}
+export function now() {
+  return Date.now();
+}
+export function extend() {
+  let deep = true;
+  let to;
+  let from;
+  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+    args[_key] = arguments[_key];
+  }
+  if (typeof args[0] === 'boolean') {
+    [deep, to] = args;
+    args.splice(0, 2);
+    from = args;
+  } else {
+    [to] = args;
+    args.splice(0, 1);
+    from = args;
+  }
+  for (let i = 0; i < from.length; i += 1) {
+    const nextSource = args[i];
+    if (nextSource !== undefined && nextSource !== null) {
+      const keysArray = Object.keys(Object(nextSource));
+      for (let nextIndex = 0, len = keysArray.length; nextIndex < len; nextIndex += 1) {
+        const nextKey = keysArray[nextIndex];
+        const desc = Object.getOwnPropertyDescriptor(nextSource, nextKey);
+        if (desc !== undefined && desc.enumerable) {
+          if (!deep) {
+            to[nextKey] = nextSource[nextKey];
+          } else if (isObject(to[nextKey]) && isObject(nextSource[nextKey])) {
+            extend(to[nextKey], nextSource[nextKey]);
+          } else if (!isObject(to[nextKey]) && isObject(nextSource[nextKey])) {
+            to[nextKey] = {};
+            extend(to[nextKey], nextSource[nextKey]);
+          } else {
+            to[nextKey] = nextSource[nextKey];
+          }
+        }
+      }
+    }
+  }
+  return to;
+}
+export function classNames() {
+  const classes = [];
+  for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+    args[_key2] = arguments[_key2];
+  }
+  args.forEach(arg => {
+    if (typeof arg === 'object' && arg.constructor === Object) {
+      Object.keys(arg).forEach(key => {
+        if (arg[key]) classes.push(key);
+      });
+    } else if (arg) classes.push(arg);
+  });
+  const uniqueClasses = [];
+  classes.forEach(c => {
+    if (uniqueClasses.indexOf(c) < 0) uniqueClasses.push(c);
+  });
+  return uniqueClasses.join(' ');
+}
+let routerIdCounter = 0;
+let routerComponentIdCounter = 0;
+export function unsetRouterIds() {
+  routerIdCounter = 0;
+  routerComponentIdCounter = 0;
+}
+export function getRouterId() {
+  routerIdCounter += 1;
+  return `${now()}_${routerIdCounter}`;
+}
+export function getComponentId() {
+  routerComponentIdCounter += 1;
+  return `${now()}_${routerComponentIdCounter}`;
+}
+export function getChildren(slots, slotName) {
+  if (slotName === void 0) {
+    slotName = 'default';
+  }
+  const result = [];
+  const getElementsChildren = els => {
+    if (!Array.isArray(els)) {
+      return;
+    }
+    els.forEach(vnode => {
+      const isFragment = vnode.type === Fragment;
+      if (isFragment && vnode.children) {
+        getElementsChildren(vnode.children);
+      } else if (vnode.type && vnode.type !== Comment) {
+        result.push(vnode);
+      }
+    });
+  };
+  if (slots[slotName]) getElementsChildren(slots[slotName]());
+  return result;
+}