@xenknight/framework7-vue 0.0.2

package/components/chip.d.ts

@@ -0,0 +1,107 @@
+
+import { ComponentOptionsMixin, DefineComponent, PropType } from 'vue';
+
+
+declare const Chip: DefineComponent<
+  {
+    
+    media: {
+      type: StringConstructor;
+    },
+
+    text: {
+      type: StringConstructor | NumberConstructor;
+    },
+
+    deleteable: {
+      type: BooleanConstructor;
+    },
+
+    mediaBgColor: {
+      type: StringConstructor;
+    },
+
+    mediaTextColor: {
+      type: StringConstructor;
+    },
+
+    outline: {
+      type: BooleanConstructor;
+    },
+
+    tooltip: {
+      type: StringConstructor;
+    },
+
+    tooltipTrigger: {
+      type: StringConstructor;
+    },
+
+    icon: {
+      type: StringConstructor;
+    },
+
+    iconMaterial: {
+      type: StringConstructor;
+    },
+
+    iconF7: {
+      type: StringConstructor;
+    },
+
+    iconIos: {
+      type: StringConstructor;
+    },
+
+    iconMd: {
+      type: StringConstructor;
+    },
+
+    iconColor: {
+      type: StringConstructor;
+    },
+
+    iconSize: {
+      type: StringConstructor | NumberConstructor;
+    },
+
+    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,
+  ("delete")[],
+  "delete"
+>;
+
+export default Chip;
+  

package/components/chip.js

@@ -0,0 +1,81 @@
+import { resolveComponent as _resolveComponent, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString, renderSlot as _renderSlot, createTextVNode as _createTextVNode, normalizeClass as _normalizeClass, createElementBlock as _createElementBlock } from "vue";
+const _hoisted_1 = {
+  key: 1,
+  class: "chip-label"
+};
+function render(_ctx, _cache) {
+  const _component_f7_use_icon = _resolveComponent("f7-use-icon");
+  return _openBlock(), _createElementBlock("div", {
+    ref: "elRef",
+    class: _normalizeClass(_ctx.classes)
+  }, [_ctx.hasMedia ? (_openBlock(), _createElementBlock("div", {
+    key: 0,
+    class: _normalizeClass(_ctx.mediaClasses)
+  }, [_ctx.icon ? (_openBlock(), _createBlock(_component_f7_use_icon, {
+    key: 0,
+    icon: _ctx.icon
+  }, null, 8, ["icon"])) : _createCommentVNode("", true), _createTextVNode(" " + _toDisplayString(_ctx.media) + " ", 1), _renderSlot(_ctx.$slots, "media")], 2)) : _createCommentVNode("", true), _ctx.hasLabel ? (_openBlock(), _createElementBlock("div", _hoisted_1, [_createTextVNode(_toDisplayString(_ctx.text) + " ", 1), _renderSlot(_ctx.$slots, "text"), _renderSlot(_ctx.$slots, "default")])) : _createCommentVNode("", true), _ctx.deleteable ? (_openBlock(), _createElementBlock("a", {
+    key: 2,
+    class: "chip-delete",
+    onClick: _cache[0] || (_cache[0] = function () {
+      return _ctx.onDeleteClick && _ctx.onDeleteClick(...arguments);
+    })
+  })) : _createCommentVNode("", true)], 2);
+}
+import { ref, computed } from 'vue';
+import { classNames } from '../shared/utils.js';
+import { colorClasses, colorProps, iconProps } from '../shared/mixins.js';
+import { useTooltip } from '../shared/use-tooltip.js';
+import { useIcon } from '../shared/use-icon.js';
+import f7UseIcon from './use-icon.js';
+export default {
+  name: 'f7-chip',
+  render,
+  components: {
+    f7UseIcon
+  },
+  props: {
+    media: String,
+    text: [String, Number],
+    deleteable: Boolean,
+    mediaBgColor: String,
+    mediaTextColor: String,
+    outline: Boolean,
+    tooltip: String,
+    tooltipTrigger: String,
+    ...iconProps,
+    ...colorProps
+  },
+  emits: ['delete'],
+  setup(props, _ref) {
+    let {
+      slots,
+      emit
+    } = _ref;
+    const elRef = ref(null);
+    const onDeleteClick = event => {
+      emit('delete', event);
+    };
+    useTooltip(elRef, props);
+    const icon = computed(() => useIcon(props));
+    const mediaClasses = computed(() => classNames('chip-media', props.mediaTextColor && `text-color-${props.mediaTextColor}`, props.mediaBgColor && `bg-color-${props.mediaBgColor}`));
+    const classes = computed(() => classNames('chip', {
+      'chip-outline': props.outline
+    }, colorClasses(props)));
+    const hasLabel = computed(() => {
+      return props.text || slots && (slots.text || slots.default);
+    });
+    const hasMedia = computed(() => {
+      return props.media || icon.value || slots && slots.media;
+    });
+    return {
+      classes,
+      icon,
+      mediaClasses,
+      elRef,
+      hasLabel,
+      hasMedia,
+      onDeleteClick
+    };
+  }
+};

package/components/fab-backdrop.d.ts

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

package/components/fab-backdrop.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-fab-backdrop',
+  render,
+  props: {
+    ...colorProps
+  },
+  setup(props) {
+    const classes = computed(() => classNames('fab-backdrop', colorClasses(props)));
+    return {
+      classes
+    };
+  }
+};

package/components/fab-button.d.ts

@@ -0,0 +1,67 @@
+
+import { ComponentOptionsMixin, DefineComponent, PropType } from 'vue';
+
+
+declare const FabButton: DefineComponent<
+  {
+    
+    fabClose: {
+      type: BooleanConstructor;
+    },
+
+    label: {
+      type: StringConstructor;
+    },
+
+    target: {
+      type: StringConstructor;
+    },
+
+    tooltip: {
+      type: StringConstructor;
+    },
+
+    tooltipTrigger: {
+      type: StringConstructor;
+    },
+
+    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,
+  ("click")[],
+  "click"
+>;
+
+export default FabButton;
+  

package/components/fab-button.js

@@ -0,0 +1,52 @@
+import { renderSlot as _renderSlot, toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, normalizeClass as _normalizeClass } from "vue";
+const _hoisted_1 = ["target"];
+const _hoisted_2 = {
+  key: 0,
+  class: "fab-label"
+};
+function render(_ctx, _cache) {
+  return _openBlock(), _createElementBlock("a", {
+    ref: "elRef",
+    class: _normalizeClass(_ctx.classes),
+    target: _ctx.target,
+    onClick: _cache[0] || (_cache[0] = function () {
+      return _ctx.onClick && _ctx.onClick(...arguments);
+    })
+  }, [_renderSlot(_ctx.$slots, "default"), _ctx.label ? (_openBlock(), _createElementBlock("span", _hoisted_2, _toDisplayString(_ctx.label), 1)) : _createCommentVNode("", true)], 10, _hoisted_1);
+}
+import { computed, ref } from 'vue';
+import { classNames } from '../shared/utils.js';
+import { colorClasses, colorProps } from '../shared/mixins.js';
+import { useTooltip } from '../shared/use-tooltip.js';
+export default {
+  name: 'f7-fab-button',
+  render,
+  props: {
+    fabClose: Boolean,
+    label: String,
+    target: String,
+    tooltip: String,
+    tooltipTrigger: String,
+    ...colorProps
+  },
+  emits: ['click'],
+  setup(props, _ref) {
+    let {
+      emit
+    } = _ref;
+    const elRef = ref(null);
+    const onClick = e => {
+      emit('click', e);
+    };
+    useTooltip(elRef, props);
+    const classes = computed(() => classNames({
+      'fab-close': props.fabClose,
+      'fab-label-button': props.label
+    }, colorClasses(props)));
+    return {
+      classes,
+      onClick,
+      elRef
+    };
+  }
+};

package/components/fab-buttons.d.ts

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

package/components/fab-buttons.js

@@ -0,0 +1,26 @@
+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-fab-buttons',
+  render,
+  props: {
+    position: {
+      type: String,
+      default: 'top'
+    },
+    ...colorProps
+  },
+  setup(props) {
+    const classes = computed(() => classNames('fab-buttons', `fab-buttons-${props.position}`, colorClasses(props)));
+    return {
+      classes
+    };
+  }
+};

package/components/fab.d.ts

@@ -0,0 +1,76 @@
+
+import { ComponentOptionsMixin, DefineComponent, PropType } from 'vue';
+
+
+declare const Fab: DefineComponent<
+  {
+    
+    morphTo: {
+      type: StringConstructor;
+    },
+
+    href: {
+      type: BooleanConstructor | StringConstructor;
+    },
+
+    target: {
+      type: StringConstructor;
+    },
+
+    text: {
+      type: StringConstructor;
+    },
+
+    tooltip: {
+      type: StringConstructor;
+    },
+
+    tooltipTrigger: {
+      type: StringConstructor;
+    },
+
+    position: {
+      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,
+  ("click")[],
+  "click"
+>;
+
+export default Fab;
+  

package/components/fab.js

@@ -0,0 +1,78 @@
+import { h, computed, ref } from 'vue';
+import { classNames } from '../shared/utils.js';
+import { colorClasses, colorProps } from '../shared/mixins.js';
+import { useTooltip } from '../shared/use-tooltip.js';
+export default {
+  name: 'f7-fab',
+  props: {
+    morphTo: String,
+    href: [Boolean, String],
+    target: String,
+    text: String,
+    position: {
+      type: String,
+      default: 'right-bottom'
+    },
+    tooltip: String,
+    tooltipTrigger: String,
+    ...colorProps
+  },
+  emits: ['click'],
+  setup(props, _ref) {
+    let {
+      emit,
+      slots
+    } = _ref;
+    const elRef = ref(null);
+    const onClick = e => {
+      emit('click', e);
+    };
+    useTooltip(elRef, props);
+    const hrefComputed = computed(() => {
+      let href = props.href;
+      if (href === true) href = '#';
+      if (href === false) href = undefined; // no href attribute
+      return href;
+    });
+    return () => {
+      const linkChildren = [];
+      const rootChildren = [];
+      let textEl;
+      let linkEl;
+      const {
+        link: linkSlots,
+        default: defaultSlots,
+        root: rootSlots,
+        text: textSlots
+      } = slots;
+      if (defaultSlots) {
+        defaultSlots().forEach(vnode => {
+          if (typeof vnode === 'undefined') return;
+          const tag = vnode.type && vnode.type.name ? vnode.type.name : vnode.type;
+          if (tag === 'FabButtons' || tag === 'f7-fab-buttons') rootChildren.push(vnode);else linkChildren.push(vnode);
+        });
+      }
+      if (props.text || textSlots) {
+        textEl = h('div', {
+          class: 'fab-text'
+        }, [props.text, textSlots && textSlots()]);
+      }
+      if (linkChildren.length || linkSlots || textEl) {
+        linkEl = h('a', {
+          target: props.target,
+          href: hrefComputed.value,
+          onClick
+        }, [linkChildren, textEl, linkSlots && linkSlots()]);
+      }
+      const classes = classNames('fab', `fab-${props.position}`, {
+        'fab-morph': props.morphTo,
+        'fab-extended': typeof textEl !== 'undefined'
+      }, colorClasses(props));
+      return h('div', {
+        class: classes,
+        'data-morph-to': props.morphTo,
+        ref: elRef
+      }, [linkEl, rootChildren, rootSlots && rootSlots()]);
+    };
+  }
+};

package/components/gauge.d.ts

@@ -0,0 +1,91 @@
+
+import { ComponentOptionsMixin, DefineComponent, PropType } from 'vue';
+
+
+declare const Gauge: DefineComponent<
+  {
+    
+    valueText: {
+      type: NumberConstructor | StringConstructor;
+    },
+
+    labelText: {
+      type: StringConstructor;
+    },
+
+    type: {
+      type: StringConstructor;
+      default: string;
+    },
+
+    value: {
+      type: NumberConstructor | StringConstructor;
+      default: number;
+    },
+
+    size: {
+      type: NumberConstructor | StringConstructor;
+      default: number;
+    },
+
+    bgColor: {
+      type: StringConstructor;
+      default: string;
+    },
+
+    borderBgColor: {
+      type: StringConstructor;
+      default: string;
+    },
+
+    borderColor: {
+      type: StringConstructor;
+      default: string;
+    },
+
+    borderWidth: {
+      type: NumberConstructor | StringConstructor;
+      default: number;
+    },
+
+    valueTextColor: {
+      type: StringConstructor;
+      default: string;
+    },
+
+    valueFontSize: {
+      type: NumberConstructor | StringConstructor;
+      default: number;
+    },
+
+    valueFontWeight: {
+      type: NumberConstructor | StringConstructor;
+      default: number;
+    },
+
+    labelTextColor: {
+      type: StringConstructor;
+      default: string;
+    },
+
+    labelFontSize: {
+      type: NumberConstructor | StringConstructor;
+      default: number;
+    },
+
+    labelFontWeight: {
+      type: NumberConstructor | StringConstructor;
+      default: number;
+    }
+  },
+  () => JSX.Element,
+  unknown,
+  {},
+  {},
+  ComponentOptionsMixin,
+  ComponentOptionsMixin,
+  
+>;
+
+export default Gauge;
+