@xenknight/framework7-vue 0.0.2

package/components/gauge.js

@@ -0,0 +1,151 @@
+import { openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString } from "vue";
+const _hoisted_1 = {
+  class: "gauge"
+};
+const _hoisted_2 = ["width", "height", "viewBox"];
+const _hoisted_3 = ["d", "stroke", "stroke-width", "fill"];
+const _hoisted_4 = ["d", "stroke", "stroke-width", "stroke-dasharray", "stroke-dashoffset", "fill"];
+const _hoisted_5 = ["stroke", "stroke-width", "fill", "cx", "cy", "r"];
+const _hoisted_6 = ["transform", "stroke", "stroke-width", "stroke-dasharray", "stroke-dashoffset", "fill", "cx", "cy", "r"];
+const _hoisted_7 = ["y", "font-weight", "font-size", "fill", "dy", "dominant-baseline"];
+const _hoisted_8 = ["y", "font-weight", "font-size", "fill", "dy", "dominant-baseline"];
+function render(_ctx, _cache) {
+  return _openBlock(), _createElementBlock("div", _hoisted_1, [(_openBlock(), _createElementBlock("svg", {
+    class: "gauge-svg",
+    width: `${_ctx.size}px`,
+    height: `${_ctx.semiCircle ? _ctx.size / 2 : _ctx.size}px`,
+    viewBox: `0 0 ${_ctx.size} ${_ctx.semiCircle ? _ctx.size / 2 : _ctx.size}`
+  }, [_ctx.semiCircle ? (_openBlock(), _createElementBlock("path", {
+    key: 0,
+    class: "gauge-back-semi",
+    d: `M${_ctx.size - _ctx.borderWidth / 2},${_ctx.size / 2} a1,1 0 0,0 -${_ctx.size - _ctx.borderWidth},0`,
+    stroke: _ctx.borderBgColor,
+    "stroke-width": _ctx.borderWidth,
+    fill: _ctx.bgColor || 'none'
+  }, null, 8, _hoisted_3)) : _createCommentVNode("", true), _ctx.semiCircle ? (_openBlock(), _createElementBlock("path", {
+    key: 1,
+    class: "gauge-front-semi",
+    d: `M${_ctx.size - _ctx.borderWidth / 2},${_ctx.size / 2} a1,1 0 0,0 -${_ctx.size - _ctx.borderWidth},0`,
+    stroke: _ctx.borderColor,
+    "stroke-width": _ctx.borderWidth,
+    "stroke-dasharray": _ctx.length / 2,
+    "stroke-dashoffset": _ctx.length / 2 * (1 + _ctx.progress),
+    fill: _ctx.borderBgColor ? 'none' : _ctx.bgColor || 'none'
+  }, null, 8, _hoisted_4)) : _createCommentVNode("", true), !_ctx.semiCircle && _ctx.borderBgColor ? (_openBlock(), _createElementBlock("circle", {
+    key: 2,
+    class: "gauge-back-circle",
+    stroke: _ctx.borderBgColor,
+    "stroke-width": _ctx.borderWidth,
+    fill: _ctx.bgColor || 'none',
+    cx: _ctx.size / 2,
+    cy: _ctx.size / 2,
+    r: _ctx.radius
+  }, null, 8, _hoisted_5)) : _createCommentVNode("", true), !_ctx.semiCircle ? (_openBlock(), _createElementBlock("circle", {
+    key: 3,
+    class: "gauge-front-circle",
+    transform: `rotate(-90 ${_ctx.size / 2} ${_ctx.size / 2})`,
+    stroke: _ctx.borderColor,
+    "stroke-width": _ctx.borderWidth,
+    "stroke-dasharray": _ctx.length,
+    "stroke-dashoffset": _ctx.length * (1 - _ctx.progress),
+    fill: _ctx.borderBgColor ? 'none' : _ctx.bgColor || 'none',
+    cx: _ctx.size / 2,
+    cy: _ctx.size / 2,
+    r: _ctx.radius
+  }, null, 8, _hoisted_6)) : _createCommentVNode("", true), _ctx.valueText ? (_openBlock(), _createElementBlock("text", {
+    key: 4,
+    class: "gauge-value-text",
+    x: "50%",
+    y: _ctx.semiCircle ? '100%' : '50%',
+    "font-weight": _ctx.valueFontWeight,
+    "font-size": _ctx.valueFontSize,
+    fill: _ctx.valueTextColor,
+    dy: _ctx.semiCircle ? _ctx.labelText ? -_ctx.labelFontSize - 15 : -5 : 0,
+    "text-anchor": "middle",
+    "dominant-baseline": !_ctx.semiCircle ? 'middle' : null
+  }, _toDisplayString(_ctx.valueText), 9, _hoisted_7)) : _createCommentVNode("", true), _ctx.labelText ? (_openBlock(), _createElementBlock("text", {
+    key: 5,
+    class: "gauge-label-text",
+    x: "50%",
+    y: _ctx.semiCircle ? '100%' : '50%',
+    "font-weight": _ctx.labelFontWeight,
+    "font-size": _ctx.labelFontSize,
+    fill: _ctx.labelTextColor,
+    dy: _ctx.semiCircle ? -5 : _ctx.valueText ? _ctx.valueFontSize / 2 + 10 : 0,
+    "text-anchor": "middle",
+    "dominant-baseline": !_ctx.semiCircle ? 'middle' : null
+  }, _toDisplayString(_ctx.labelText), 9, _hoisted_8)) : _createCommentVNode("", true)], 8, _hoisted_2))]);
+}
+import { computed } from 'vue';
+export default {
+  name: 'f7-gauge',
+  render,
+  props: {
+    type: {
+      type: String,
+      default: 'circle'
+    },
+    value: {
+      type: [Number, String],
+      default: 0
+    },
+    size: {
+      type: [Number, String],
+      default: 200
+    },
+    bgColor: {
+      type: String,
+      default: 'transparent'
+    },
+    borderBgColor: {
+      type: String,
+      default: '#eeeeee'
+    },
+    borderColor: {
+      type: String,
+      default: '#000000'
+    },
+    borderWidth: {
+      type: [Number, String],
+      default: 10
+    },
+    valueText: [Number, String],
+    valueTextColor: {
+      type: String,
+      default: '#000000'
+    },
+    valueFontSize: {
+      type: [Number, String],
+      default: 31
+    },
+    valueFontWeight: {
+      type: [Number, String],
+      default: 500
+    },
+    labelText: String,
+    labelTextColor: {
+      type: String,
+      default: '#888888'
+    },
+    labelFontSize: {
+      type: [Number, String],
+      default: 14
+    },
+    labelFontWeight: {
+      type: [Number, String],
+      default: 400
+    }
+  },
+  setup(props) {
+    const semiCircle = computed(() => props.type === 'semicircle');
+    const radius = computed(() => props.size / 2 - props.borderWidth / 2);
+    const length = computed(() => 2 * Math.PI * radius.value);
+    const progress = computed(() => Math.max(Math.min(props.value, 1), 0));
+    return {
+      semiCircle,
+      radius,
+      length,
+      progress
+    };
+  }
+};

package/components/icon.d.ts

@@ -0,0 +1,78 @@
+
+import { ComponentOptionsMixin, DefineComponent, PropType } from 'vue';
+
+
+declare const Icon: DefineComponent<
+  {
+    
+    material: {
+      type: StringConstructor;
+    },
+
+    f7: {
+      type: StringConstructor;
+    },
+
+    icon: {
+      type: StringConstructor;
+    },
+
+    ios: {
+      type: StringConstructor;
+    },
+
+    md: {
+      type: StringConstructor;
+    },
+
+    tooltip: {
+      type: StringConstructor;
+    },
+
+    tooltipTrigger: {
+      type: StringConstructor;
+    },
+
+    size: {
+      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,
+  
+>;
+
+export default Icon;
+  

package/components/icon.js

@@ -0,0 +1,100 @@
+import { toDisplayString as _toDisplayString, renderSlot as _renderSlot, createTextVNode as _createTextVNode, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+function render(_ctx, _cache) {
+  return _openBlock(), _createElementBlock("i", {
+    ref: "elRef",
+    style: _normalizeStyle({
+      fontSize: _ctx.sizeComputed,
+      width: _ctx.sizeComputed,
+      height: _ctx.sizeComputed
+    }),
+    class: _normalizeClass(_ctx.classesComputed)
+  }, [_createTextVNode(_toDisplayString(_ctx.iconText) + " ", 1), _renderSlot(_ctx.$slots, "default")], 6);
+}
+import { ref, computed } from 'vue';
+import { classNames } from '../shared/utils.js';
+import { colorClasses, colorProps } from '../shared/mixins.js';
+import { useTooltip } from '../shared/use-tooltip.js';
+import { useTheme } from '../shared/use-theme.js';
+export default {
+  name: 'f7-icon',
+  render,
+  props: {
+    material: String,
+    f7: String,
+    icon: String,
+    ios: String,
+    md: String,
+    tooltip: String,
+    tooltipTrigger: String,
+    size: [String, Number],
+    ...colorProps
+  },
+  setup(props) {
+    const elRef = ref(null);
+    const theme = useTheme();
+    useTooltip(elRef, props);
+    const classesComputed = computed(() => {
+      const {
+        ios,
+        md,
+        f7,
+        material,
+        icon
+      } = props;
+      let classes = {
+        icon: true
+      };
+      let themeIcon;
+      if (theme.value && theme.value.ios) themeIcon = ios;else if (theme.value && theme.value.md) themeIcon = md;
+      if (themeIcon) {
+        const parts = themeIcon.split(':');
+        const prop = parts[0];
+        const value = parts[1];
+        if (prop === 'material' || prop === 'f7') {
+          classes['material-icons'] = prop === 'material';
+          classes['f7-icons'] = prop === 'f7';
+        }
+        if (prop === 'icon') {
+          classes[value] = true;
+        }
+        if (icon) classes[icon] = true;
+      } else {
+        classes = {
+          icon: true,
+          'material-icons': material,
+          'f7-icons': f7
+        };
+        if (icon) classes[icon] = true;
+      }
+      return classNames(classes, colorClasses(props));
+    });
+    const sizeComputed = computed(() => {
+      let size = props.size;
+      if (typeof props.size === 'number' || parseFloat(props.size) === props.size * 1) {
+        size = `${props.size}px`;
+      }
+      return size;
+    });
+    const iconText = computed(() => {
+      const {
+        ios,
+        md,
+        f7,
+        material
+      } = props;
+      let text = material || f7;
+      if (md && theme.value && theme.value.md && (md.indexOf('material:') >= 0 || md.indexOf('f7:') >= 0)) {
+        text = md.split(':')[1];
+      } else if (ios && theme.value && theme.value.ios && (ios.indexOf('material:') >= 0 || ios.indexOf('f7:') >= 0)) {
+        text = ios.split(':')[1];
+      }
+      return text;
+    });
+    return {
+      elRef,
+      sizeComputed,
+      classesComputed,
+      iconText
+    };
+  }
+};

package/components/input.d.ts

@@ -0,0 +1,226 @@
+
+import { ComponentOptionsMixin, DefineComponent, PropType } from 'vue';
+
+
+declare const Input: DefineComponent<
+  {
+    
+    type: {
+      type: StringConstructor;
+    },
+
+    name: {
+      type: StringConstructor;
+    },
+
+    inputmode: {
+      type: StringConstructor;
+    },
+
+    placeholder: {
+      type: StringConstructor;
+    },
+
+    inputId: {
+      type: StringConstructor | NumberConstructor;
+    },
+
+    size: {
+      type: StringConstructor | NumberConstructor;
+    },
+
+    accept: {
+      type: StringConstructor | NumberConstructor;
+    },
+
+    autocomplete: {
+      type: StringConstructor;
+    },
+
+    autocorrect: {
+      type: StringConstructor;
+    },
+
+    autocapitalize: {
+      type: StringConstructor;
+    },
+
+    spellcheck: {
+      type: StringConstructor;
+    },
+
+    autofocus: {
+      type: BooleanConstructor;
+    },
+
+    autosave: {
+      type: StringConstructor;
+    },
+
+    checked: {
+      type: BooleanConstructor;
+    },
+
+    disabled: {
+      type: BooleanConstructor;
+    },
+
+    max: {
+      type: StringConstructor | NumberConstructor;
+    },
+
+    min: {
+      type: StringConstructor | NumberConstructor;
+    },
+
+    step: {
+      type: StringConstructor | NumberConstructor;
+    },
+
+    maxlength: {
+      type: StringConstructor | NumberConstructor;
+    },
+
+    minlength: {
+      type: StringConstructor | NumberConstructor;
+    },
+
+    multiple: {
+      type: BooleanConstructor;
+    },
+
+    readonly: {
+      type: BooleanConstructor;
+    },
+
+    required: {
+      type: BooleanConstructor;
+    },
+
+    inputStyle: {
+      type: StringConstructor | ObjectConstructor;
+    },
+
+    pattern: {
+      type: StringConstructor;
+    },
+
+    validate: {
+      type: BooleanConstructor | StringConstructor;
+    },
+
+    validateOnBlur: {
+      type: BooleanConstructor;
+    },
+
+    onValidate: {
+      type: FunctionConstructor;
+    },
+
+    tabindex: {
+      type: StringConstructor | NumberConstructor;
+    },
+
+    resizable: {
+      type: BooleanConstructor;
+    },
+
+    clearButton: {
+      type: BooleanConstructor;
+    },
+
+    noFormStoreData: {
+      type: BooleanConstructor;
+    },
+
+    noStoreData: {
+      type: BooleanConstructor;
+    },
+
+    ignoreStoreData: {
+      type: BooleanConstructor;
+    },
+
+    errorMessage: {
+      type: StringConstructor;
+    },
+
+    errorMessageForce: {
+      type: BooleanConstructor;
+    },
+
+    info: {
+      type: StringConstructor;
+    },
+
+    outline: {
+      type: BooleanConstructor;
+    },
+
+    calendarParams: {
+      type: ObjectConstructor;
+    },
+
+    colorPickerParams: {
+      type: ObjectConstructor;
+    },
+
+    textEditorParams: {
+      type: ObjectConstructor;
+    },
+
+    value: {
+      type: StringConstructor | NumberConstructor | ArrayConstructor | any | ObjectConstructor;
+      default: undefined;
+    },
+
+    wrap: {
+      type: BooleanConstructor;
+      default: boolean;
+    },
+
+    dropdown: {
+      type: StringConstructor | BooleanConstructor;
+      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,
+  ("input" | "focus" | "blur" | "change" | "textarea:resize" | "input:notempty" | "input:empty" | "input:clear" | "texteditor:change" | "calendar:change" | "colorpicker:change" | "update:value")[],
+  "input" | "focus" | "blur" | "change" | "textarea:resize" | "input:notempty" | "input:empty" | "input:clear" | "texteditor:change" | "calendar:change" | "colorpicker:change" | "update:value"
+>;
+
+export default Input;
+