@xenknight/framework7-vue 0.0.2

package/components/actions.d.ts

@@ -0,0 +1,109 @@
+
+import { ComponentOptionsMixin, DefineComponent, PropType } from 'vue';
+
+
+declare const Actions: DefineComponent<
+  {
+    
+    tabletFullscreen: {
+      type: BooleanConstructor;
+    },
+
+    opened: {
+      type: BooleanConstructor;
+    },
+
+    grid: {
+      type: BooleanConstructor;
+    },
+
+    animate: {
+      type: BooleanConstructor;
+      default: undefined;
+    },
+
+    target: {
+      type: StringConstructor | ObjectConstructor;
+      default: undefined;
+    },
+
+    convertToPopover: {
+      type: BooleanConstructor;
+      default: undefined;
+    },
+
+    forceToPopover: {
+      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;
+    },
+
+    containerEl: {
+      type: StringConstructor | ObjectConstructor;
+      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,
+  ("actions:open" | "actions:opened" | "actions:close" | "actions:closed" | "update:opened")[],
+  "actions:open" | "actions:opened" | "actions:close" | "actions:closed" | "update:opened"
+>;
+
+export default Actions;
+  

package/components/actions.js

@@ -0,0 +1,157 @@
+import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+function render(_ctx, _cache) {
+  return _openBlock(), _createElementBlock("div", {
+    ref: "elRef",
+    class: _normalizeClass(_ctx.classes)
+  }, [_renderSlot(_ctx.$slots, "default")], 2);
+}
+import { 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-actions',
+  render,
+  props: {
+    tabletFullscreen: Boolean,
+    opened: Boolean,
+    animate: {
+      type: Boolean,
+      default: undefined
+    },
+    grid: Boolean,
+    target: {
+      type: [String, Object],
+      default: undefined
+    },
+    convertToPopover: {
+      type: Boolean,
+      default: undefined
+    },
+    forceToPopover: {
+      type: Boolean,
+      default: undefined
+    },
+    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
+    },
+    containerEl: {
+      type: [String, Object],
+      default: undefined
+    },
+    ...colorProps
+  },
+  emits: ['actions:open', 'actions:opened', 'actions:close', 'actions:closed', 'update:opened'],
+  setup(props, _ref) {
+    let {
+      emit
+    } = _ref;
+    // eslint-disable-next-line
+    let f7Actions = null;
+    // eslint-disable-next-line
+    let isOpened = props.opened;
+    let isClosing = false;
+    const elRef = ref(null);
+    const onOpen = instance => {
+      isOpened = true;
+      isClosing = false;
+      emit('actions:open', instance);
+      emit('update:opened', true);
+    };
+    const onOpened = instance => {
+      emit('actions:opened', instance);
+    };
+    const onClose = instance => {
+      isOpened = false;
+      isClosing = true;
+      emit('actions:close', instance);
+    };
+    const onClosed = instance => {
+      isClosing = false;
+      emit('actions:closed', instance);
+      emit('update:opened', false);
+    };
+    watch(() => props.opened, value => {
+      if (!f7Actions) return;
+      if (value) {
+        f7Actions.open();
+      } else {
+        f7Actions.close();
+      }
+    });
+    onMounted(() => {
+      if (!elRef.value) return;
+      const {
+        target,
+        convertToPopover,
+        forceToPopover,
+        closeByBackdropClick,
+        closeByOutsideClick,
+        closeOnEscape,
+        backdrop,
+        backdropEl,
+        grid,
+        containerEl
+      } = props;
+      const params = {
+        el: elRef.value,
+        grid,
+        on: {
+          open: onOpen,
+          opened: onOpened,
+          close: onClose,
+          closed: onClosed
+        }
+      };
+      if (typeof target !== 'undefined') params.target = target;
+      if (typeof convertToPopover !== 'undefined') params.convertToPopover = convertToPopover;
+      if (typeof forceToPopover !== 'undefined') params.forceToPopover = forceToPopover;
+      if (typeof closeByBackdropClick !== 'undefined') params.closeByBackdropClick = closeByBackdropClick;
+      if (typeof closeByOutsideClick !== 'undefined') params.closeByOutsideClick = closeByOutsideClick;
+      if (typeof closeOnEscape !== 'undefined') params.closeOnEscape = closeOnEscape;
+      if (typeof backdrop !== 'undefined') params.backdrop = backdrop;
+      if (typeof backdropEl !== 'undefined') params.backdropEl = backdropEl;
+      if (typeof containerEl !== 'undefined') params.containerEl = containerEl;
+      f7ready(() => {
+        f7Actions = f7.popup.create(params);
+        if (props.opened) {
+          f7Actions.open(false);
+        }
+      });
+    });
+    onBeforeUnmount(() => {
+      if (f7Actions) {
+        f7Actions.destroy();
+      }
+      f7Actions = null;
+    });
+    const classes = computed(() => classNames('actions-modal', {
+      'actions-grid': props.grid
+    }, modalStateClasses({
+      isOpened,
+      isClosing
+    }), colorClasses(props)));
+    return {
+      elRef,
+      classes
+    };
+  }
+};

package/components/app.d.ts

@@ -0,0 +1,310 @@
+
+import { ComponentOptionsMixin, DefineComponent, PropType } from 'vue';
+
+
+declare const App: DefineComponent<
+  {
+    
+    store: {
+      type: ObjectConstructor;
+    },
+
+    name: {
+      type: any;
+      default: undefined;
+    },
+
+    theme: {
+      type: any;
+      default: undefined;
+    },
+
+    routes: {
+      type: any;
+      default: () => [];
+    },
+
+    darkMode: {
+      type: BooleanConstructor | StringConstructor | any;
+      default: boolean;
+    },
+
+    colors: {
+      type: any;
+      default: () => undefined;
+    },
+
+    lazyModulesPath: {
+      type: any;
+      default: undefined;
+    },
+
+    initOnDeviceReady: {
+      type: any;
+      default: undefined;
+    },
+
+    iosTranslucentBars: {
+      type: any;
+      default: undefined;
+    },
+
+    iosTranslucentModals: {
+      type: any;
+      default: undefined;
+    },
+
+    userAgent: {
+      type: any;
+      default: undefined;
+    },
+
+    url: {
+      type: any;
+      default: undefined;
+    },
+
+    accordion: {
+      type: any;
+      default: () => undefined;
+    },
+
+    actions: {
+      type: any;
+      default: () => undefined;
+    },
+
+    areaChart: {
+      type: any;
+      default: () => undefined;
+    },
+
+    autocomplete: {
+      type: any;
+      default: () => undefined;
+    },
+
+    calendar: {
+      type: any;
+      default: () => undefined;
+    },
+
+    card: {
+      type: any;
+      default: () => undefined;
+    },
+
+    colorPicker: {
+      type: any;
+      default: () => undefined;
+    },
+
+    dialog: {
+      type: any;
+      default: () => undefined;
+    },
+
+    form: {
+      type: any;
+      default: () => undefined;
+    },
+
+    gauge: {
+      type: any;
+      default: () => undefined;
+    },
+
+    infiniteScroll: {
+      type: any;
+      default: () => undefined;
+    },
+
+    input: {
+      type: any;
+      default: () => undefined;
+    },
+
+    listIndex: {
+      type: any;
+      default: () => undefined;
+    },
+
+    loginScreen: {
+      type: any;
+      default: () => undefined;
+    },
+
+    messagebar: {
+      type: any;
+      default: () => undefined;
+    },
+
+    messages: {
+      type: any;
+      default: () => undefined;
+    },
+
+    navbar: {
+      type: any;
+      default: () => undefined;
+    },
+
+    notification: {
+      type: any;
+      default: () => undefined;
+    },
+
+    panel: {
+      type: any;
+      default: () => undefined;
+    },
+
+    photoBrowser: {
+      type: any;
+      default: () => undefined;
+    },
+
+    picker: {
+      type: any;
+      default: () => undefined;
+    },
+
+    pieChart: {
+      type: any;
+      default: () => undefined;
+    },
+
+    popover: {
+      type: any;
+      default: () => undefined;
+    },
+
+    popup: {
+      type: any;
+      default: () => undefined;
+    },
+
+    range: {
+      type: any;
+      default: () => undefined;
+    },
+
+    searchbar: {
+      type: any;
+      default: () => undefined;
+    },
+
+    sheet: {
+      type: any;
+      default: () => undefined;
+    },
+
+    smartSelect: {
+      type: any;
+      default: () => undefined;
+    },
+
+    sortable: {
+      type: any;
+      default: () => undefined;
+    },
+
+    statusbar: {
+      type: any;
+      default: () => undefined;
+    },
+
+    stepper: {
+      type: any;
+      default: () => undefined;
+    },
+
+    swipeout: {
+      type: any;
+      default: () => undefined;
+    },
+
+    textEditor: {
+      type: any;
+      default: () => undefined;
+    },
+
+    toast: {
+      type: any;
+      default: () => undefined;
+    },
+
+    toolbar: {
+      type: any;
+      default: () => undefined;
+    },
+
+    tooltip: {
+      type: any;
+      default: () => undefined;
+    },
+
+    view: {
+      type: any;
+      default: () => undefined;
+    },
+
+    virtualList: {
+      type: any;
+      default: () => undefined;
+    },
+
+    clicks: {
+      type: any;
+      default: () => undefined;
+    },
+
+    serviceWorker: {
+      type: any;
+      default: () => undefined;
+    },
+
+    touch: {
+      type: any;
+      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,
+  
+>;
+
+export default App;
+