@xenknight/framework7-vue 0.0.2

package/components/card-footer.d.ts

@@ -0,0 +1,46 @@
+
+import { ComponentOptionsMixin, DefineComponent, PropType } from 'vue';
+
+
+declare const CardFooter: DefineComponent<
+  {
+    
+    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 CardFooter;
+  

package/components/card-footer.js

@@ -0,0 +1,22 @@
+import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+function render(_ctx, _cache) {
+  return _openBlock(), _createElementBlock("div", {
+    class: _normalizeClass(_ctx.classes)
+  }, [_renderSlot(_ctx.$slots, "default")], 2);
+}
+import { computed } from 'vue';
+import { classNames } from '../shared/utils.js';
+import { colorClasses, colorProps } from '../shared/mixins.js';
+export default {
+  name: 'f7-card-footer',
+  render,
+  props: {
+    ...colorProps
+  },
+  setup(props) {
+    const classes = computed(() => classNames('card-footer', colorClasses(props)));
+    return {
+      classes
+    };
+  }
+};

package/components/card-header.d.ts

@@ -0,0 +1,46 @@
+
+import { ComponentOptionsMixin, DefineComponent, PropType } from 'vue';
+
+
+declare const CardHeader: DefineComponent<
+  {
+    
+    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 CardHeader;
+  

package/components/card-header.js

@@ -0,0 +1,22 @@
+import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+function render(_ctx, _cache) {
+  return _openBlock(), _createElementBlock("div", {
+    class: _normalizeClass(_ctx.classes)
+  }, [_renderSlot(_ctx.$slots, "default")], 2);
+}
+import { computed } from 'vue';
+import { classNames } from '../shared/utils.js';
+import { colorClasses, colorProps } from '../shared/mixins.js';
+export default {
+  name: 'f7-card-header',
+  render,
+  props: {
+    ...colorProps
+  },
+  setup(props) {
+    const classes = computed(() => classNames('card-header', colorClasses(props)));
+    return {
+      classes
+    };
+  }
+};

package/components/card.d.ts

@@ -0,0 +1,145 @@
+
+import { ComponentOptionsMixin, DefineComponent, PropType } from 'vue';
+
+
+declare const Card: DefineComponent<
+  {
+    
+    title: {
+      type: StringConstructor | NumberConstructor;
+    },
+
+    content: {
+      type: StringConstructor | NumberConstructor;
+    },
+
+    footer: {
+      type: StringConstructor | NumberConstructor;
+    },
+
+    raised: {
+      type: BooleanConstructor;
+    },
+
+    outline: {
+      type: BooleanConstructor;
+    },
+
+    outlineIos: {
+      type: BooleanConstructor;
+    },
+
+    outlineMd: {
+      type: BooleanConstructor;
+    },
+
+    headerDivider: {
+      type: BooleanConstructor;
+    },
+
+    footerDivider: {
+      type: BooleanConstructor;
+    },
+
+    expandable: {
+      type: BooleanConstructor;
+    },
+
+    expandableAnimateWidth: {
+      type: BooleanConstructor;
+    },
+
+    expandableOpened: {
+      type: BooleanConstructor;
+    },
+
+    animate: {
+      type: BooleanConstructor;
+      default: undefined;
+    },
+
+    hideNavbarOnOpen: {
+      type: BooleanConstructor;
+      default: undefined;
+    },
+
+    hideToolbarOnOpen: {
+      type: BooleanConstructor;
+      default: undefined;
+    },
+
+    hideStatusbarOnOpen: {
+      type: BooleanConstructor;
+      default: undefined;
+    },
+
+    scrollableEl: {
+      type: StringConstructor;
+      default: undefined;
+    },
+
+    swipeToClose: {
+      type: BooleanConstructor;
+      default: undefined;
+    },
+
+    closeByBackdropClick: {
+      type: BooleanConstructor;
+      default: undefined;
+    },
+
+    backdrop: {
+      type: BooleanConstructor;
+      default: undefined;
+    },
+
+    backdropEl: {
+      type: StringConstructor;
+      default: undefined;
+    },
+
+    padding: {
+      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,
+  ("card:beforeopen" | "card:open" | "card:opened" | "card:close" | "card:closed" | "update:expandableOpened")[],
+  "card:beforeopen" | "card:open" | "card:opened" | "card:close" | "card:closed" | "update:expandableOpened"
+>;
+
+export default Card;
+  

package/components/card.js

@@ -0,0 +1,192 @@
+import { toDisplayString as _toDisplayString, renderSlot as _renderSlot, createTextVNode as _createTextVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, normalizeClass as _normalizeClass, createElementBlock as _createElementBlock } from "vue";
+const _hoisted_1 = ["data-animate", "data-hide-navbar-on-open", "data-hide-toolbar-on-open", "data-hide-statusbar-on-open", "data-scrollable-el", "data-swipe-to-close", "data-close-by-backdrop-click", "data-backdrop", "data-backdrop-el"];
+function render(_ctx, _cache) {
+  const _component_f7_card_header = _resolveComponent("f7-card-header");
+  const _component_f7_card_content = _resolveComponent("f7-card-content");
+  const _component_f7_card_footer = _resolveComponent("f7-card-footer");
+  return _openBlock(), _createElementBlock("div", {
+    ref: "elRef",
+    class: _normalizeClass(_ctx.classes),
+    "data-animate": typeof _ctx.animate === 'undefined' ? _ctx.animate : _ctx.animate.toString(),
+    "data-hide-navbar-on-open": typeof _ctx.hideNavbarOnOpen === 'undefined' ? _ctx.hideNavbarOnOpen : _ctx.hideNavbarOnOpen.toString(),
+    "data-hide-toolbar-on-open": typeof _ctx.hideToolbarOnOpen === 'undefined' ? _ctx.hideToolbarOnOpen : _ctx.hideToolbarOnOpen.toString(),
+    "data-hide-statusbar-on-open": typeof _ctx.hideStatusbarOnOpen === 'undefined' ? _ctx.hideStatusbarOnOpen : _ctx.hideStatusbarOnOpen.toString(),
+    "data-scrollable-el": _ctx.scrollableEl,
+    "data-swipe-to-close": typeof _ctx.swipeToClose === 'undefined' ? _ctx.swipeToClose : _ctx.swipeToClose.toString(),
+    "data-close-by-backdrop-click": typeof _ctx.closeByBackdropClick === 'undefined' ? _ctx.closeByBackdropClick : _ctx.closeByBackdropClick.toString(),
+    "data-backdrop": typeof _ctx.backdrop === 'undefined' ? _ctx.backdrop : _ctx.backdrop.toString(),
+    "data-backdrop-el": _ctx.backdropEl
+  }, [_ctx.hasHeader ? (_openBlock(), _createBlock(_component_f7_card_header, {
+    key: 0
+  }, {
+    default: _withCtx(() => [_createTextVNode(_toDisplayString(_ctx.title) + " ", 1), _renderSlot(_ctx.$slots, "header")]),
+    _: 3
+  })) : _createCommentVNode("", true), _ctx.hasContent ? (_openBlock(), _createBlock(_component_f7_card_content, {
+    key: 1,
+    padding: _ctx.padding
+  }, {
+    default: _withCtx(() => [_createTextVNode(_toDisplayString(_ctx.content) + " ", 1), _renderSlot(_ctx.$slots, "content")]),
+    _: 3
+  }, 8, ["padding"])) : _createCommentVNode("", true), _ctx.hasFooter ? (_openBlock(), _createBlock(_component_f7_card_footer, {
+    key: 2
+  }, {
+    default: _withCtx(() => [_createTextVNode(_toDisplayString(_ctx.footer) + " ", 1), _renderSlot(_ctx.$slots, "footer")]),
+    _: 3
+  })) : _createCommentVNode("", true), _renderSlot(_ctx.$slots, "default")], 10, _hoisted_1);
+}
+import { computed, ref, onMounted, onBeforeUnmount, watch } from 'vue';
+import { classNames } from '../shared/utils.js';
+import { colorClasses, colorProps } from '../shared/mixins.js';
+import { f7, f7ready } from '../shared/f7.js';
+import f7CardHeader from './card-header.js';
+import f7CardContent from './card-content.js';
+import f7CardFooter from './card-footer.js';
+export default {
+  name: 'f7-card',
+  render,
+  components: {
+    f7CardHeader,
+    f7CardContent,
+    f7CardFooter
+  },
+  props: {
+    title: [String, Number],
+    content: [String, Number],
+    footer: [String, Number],
+    raised: Boolean,
+    outline: Boolean,
+    outlineIos: Boolean,
+    outlineMd: Boolean,
+    headerDivider: Boolean,
+    footerDivider: Boolean,
+    expandable: Boolean,
+    expandableAnimateWidth: Boolean,
+    expandableOpened: Boolean,
+    animate: {
+      type: Boolean,
+      default: undefined
+    },
+    hideNavbarOnOpen: {
+      type: Boolean,
+      default: undefined
+    },
+    hideToolbarOnOpen: {
+      type: Boolean,
+      default: undefined
+    },
+    hideStatusbarOnOpen: {
+      type: Boolean,
+      default: undefined
+    },
+    scrollableEl: {
+      type: String,
+      default: undefined
+    },
+    swipeToClose: {
+      type: Boolean,
+      default: undefined
+    },
+    closeByBackdropClick: {
+      type: Boolean,
+      default: undefined
+    },
+    backdrop: {
+      type: Boolean,
+      default: undefined
+    },
+    backdropEl: {
+      type: String,
+      default: undefined
+    },
+    padding: {
+      type: Boolean,
+      default: true
+    },
+    ...colorProps
+  },
+  emits: ['card:beforeopen', 'card:open', 'card:opened', 'card:close', 'card:closed', 'update:expandableOpened'],
+  setup(props, _ref) {
+    let {
+      emit,
+      slots
+    } = _ref;
+    const elRef = ref(null);
+    const open = () => {
+      if (!elRef.value) return;
+      f7.card.open(elRef.value);
+    };
+    const close = () => {
+      if (!elRef.value) return;
+      f7.card.close(elRef.value);
+    };
+    const onBeforeOpen = (el, prevent) => {
+      if (elRef.value !== el) return;
+      emit('card:beforeopen', el, prevent);
+    };
+    const onOpen = el => {
+      if (elRef.value !== el) return;
+      emit('card:open', el);
+      emit('update:expandableOpened', true);
+    };
+    const onOpened = (el, pageEl) => {
+      if (elRef.value !== el) return;
+      emit('card:opened', el, pageEl);
+    };
+    const onClose = el => {
+      if (elRef.value !== el) return;
+      emit('card:close', el);
+    };
+    const onClosed = (el, pageEl) => {
+      if (elRef.value !== el) return;
+      emit('card:closed', el, pageEl);
+      emit('update:expandableOpened', false);
+    };
+    onMounted(() => {
+      if (!props.expandable || !elRef.value) return;
+      f7ready(() => {
+        if (props.expandable && props.expandableOpened) {
+          f7.card.open(elRef.value, false);
+        }
+        f7.on('cardBeforeOpen', onBeforeOpen);
+        f7.on('cardOpen', onOpen);
+        f7.on('cardOpened', onOpened);
+        f7.on('cardClose', onClose);
+        f7.on('cardClosed', onClosed);
+      });
+    });
+    onBeforeUnmount(() => {
+      f7.off('cardBeforeOpen', onBeforeOpen);
+      f7.off('cardOpen', onOpen);
+      f7.off('cardOpened', onOpened);
+      f7.off('cardClose', onClose);
+      f7.off('cardClosed', onClosed);
+    });
+    watch(() => props.expandableOpened, value => {
+      if (value) {
+        open();
+      } else {
+        close();
+      }
+    });
+    const hasHeader = computed(() => props.title || slots.header);
+    const hasContent = computed(() => props.content || slots.content);
+    const hasFooter = computed(() => props.footer || slots.footer);
+    const classes = computed(() => classNames('card', {
+      'card-raised': props.raised,
+      'card-outline': props.outline,
+      'card-outline-ios': props.outlineIos,
+      'card-outline-md': props.outlineMd,
+      'card-expandable': props.expandable,
+      'card-expandable-animate-width': props.expandableAnimateWidth,
+      'card-header-divider': props.headerDivider,
+      'card-footer-divider': props.footerDivider
+    }, colorClasses(props)));
+    return {
+      elRef,
+      classes,
+      hasHeader,
+      hasContent,
+      hasFooter
+    };
+  }
+};

package/components/checkbox.d.ts

@@ -0,0 +1,72 @@
+
+import { ComponentOptionsMixin, DefineComponent, PropType } from 'vue';
+
+
+declare const Checkbox: DefineComponent<
+  {
+    
+    checked: {
+      type: BooleanConstructor;
+    },
+
+    indeterminate: {
+      type: BooleanConstructor;
+    },
+
+    name: {
+      type: NumberConstructor | StringConstructor;
+    },
+
+    disabled: {
+      type: BooleanConstructor;
+    },
+
+    readonly: {
+      type: BooleanConstructor;
+    },
+
+    value: {
+      type: NumberConstructor | StringConstructor | 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,
+  ("update:checked" | "change")[],
+  "update:checked" | "change"
+>;
+
+export default Checkbox;
+  

package/components/checkbox.js

@@ -0,0 +1,70 @@
+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-checkbox"
+}, null, -1);
+function render(_ctx, _cache) {
+  return _openBlock(), _createElementBlock("label", {
+    class: _normalizeClass(_ctx.classes)
+  }, [_createElementVNode("input", {
+    ref: "inputElRef",
+    type: "checkbox",
+    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, onMounted, watch } from 'vue';
+import { classNames } from '../shared/utils.js';
+import { colorClasses, colorProps } from '../shared/mixins.js';
+export default {
+  name: 'f7-checkbox',
+  render,
+  props: {
+    checked: Boolean,
+    indeterminate: 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);
+    };
+    onMounted(() => {
+      if (inputElRef.value) {
+        inputElRef.value.indeterminate = !!props.indeterminate;
+      }
+    });
+    watch(() => props.indeterminate, newValue => {
+      if (inputElRef.value) {
+        inputElRef.value.indeterminate = !!newValue;
+      }
+    });
+    const classes = computed(() => classNames({
+      checkbox: true,
+      disabled: props.disabled
+    }, colorClasses(props)));
+    return {
+      inputElRef,
+      classes,
+      onChange
+    };
+  }
+};