@xenknight/framework7-vue 0.0.2

package/components/list-index.js

@@ -0,0 +1,96 @@
+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, onMounted, onBeforeUnmount, watch } from 'vue';
+import { classNames } from '../shared/utils.js';
+import { colorClasses, colorProps } from '../shared/mixins.js';
+import { f7ready, f7 } from '../shared/f7.js';
+export default {
+  name: 'f7-list-index',
+  render,
+  props: {
+    init: {
+      type: Boolean,
+      default: true
+    },
+    listEl: [String, Object],
+    indexes: {
+      type: [String, Array],
+      default: 'auto'
+    },
+    scrollList: {
+      type: Boolean,
+      default: true
+    },
+    label: {
+      type: Boolean,
+      default: false
+    },
+    iosItemHeight: {
+      type: Number,
+      default: 14
+    },
+    mdItemHeight: {
+      type: Number,
+      default: 14
+    },
+    ...colorProps
+  },
+  emits: ['listindex:select'],
+  setup(props, _ref) {
+    let {
+      emit
+    } = _ref;
+    let f7ListIndex = null;
+    const elRef = ref(null);
+    const update = () => {
+      if (!f7ListIndex) return;
+      f7ListIndex.update();
+    };
+    const scrollListToIndex = indexContent => {
+      if (!f7ListIndex) return;
+      f7ListIndex.scrollListToIndex(indexContent);
+    };
+    watch(() => props.indexes, newValue => {
+      if (!f7ListIndex) return;
+      f7ListIndex.params.indexes = newValue;
+      update();
+    });
+    onMounted(() => {
+      if (!props.init) return;
+      f7ready(() => {
+        f7ListIndex = f7.listIndex.create({
+          el: elRef.value,
+          listEl: props.listEl,
+          indexes: props.indexes,
+          iosItemHeight: props.iosItemHeight,
+          mdItemHeight: props.mdItemHeight,
+          scrollList: props.scrollList,
+          label: props.label,
+          on: {
+            select(index, itemContent, itemIndex) {
+              emit('listindex:select', itemContent, itemIndex);
+            }
+          }
+        });
+      });
+    });
+    onBeforeUnmount(() => {
+      if (f7ListIndex && f7ListIndex.destroy) {
+        f7ListIndex.destroy();
+      }
+      f7ListIndex = null;
+    });
+    const classes = computed(() => classNames('list-index', colorClasses(props)));
+    return {
+      elRef,
+      classes,
+      update,
+      scrollListToIndex
+    };
+  }
+};

package/components/list-input.d.ts

@@ -0,0 +1,245 @@
+
+import { ComponentOptionsMixin, DefineComponent, PropType } from 'vue';
+
+
+declare const ListInput: DefineComponent<
+  {
+    
+    media: {
+      type: StringConstructor;
+    },
+
+    name: {
+      type: StringConstructor;
+    },
+
+    inputmode: {
+      type: StringConstructor;
+    },
+
+    readonly: {
+      type: BooleanConstructor;
+    },
+
+    required: {
+      type: BooleanConstructor;
+    },
+
+    disabled: {
+      type: BooleanConstructor;
+    },
+
+    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;
+    },
+
+    max: {
+      type: StringConstructor | NumberConstructor;
+    },
+
+    min: {
+      type: StringConstructor | NumberConstructor;
+    },
+
+    step: {
+      type: StringConstructor | NumberConstructor;
+    },
+
+    maxlength: {
+      type: StringConstructor | NumberConstructor;
+    },
+
+    minlength: {
+      type: StringConstructor | NumberConstructor;
+    },
+
+    multiple: {
+      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;
+    },
+
+    label: {
+      type: StringConstructor | NumberConstructor;
+    },
+
+    floatingLabel: {
+      type: BooleanConstructor;
+    },
+
+    calendarParams: {
+      type: ObjectConstructor;
+    },
+
+    colorPickerParams: {
+      type: ObjectConstructor;
+    },
+
+    textEditorParams: {
+      type: ObjectConstructor;
+    },
+
+    sortable: {
+      type: BooleanConstructor;
+      default: undefined;
+    },
+
+    dropdown: {
+      type: StringConstructor | BooleanConstructor;
+      default: string;
+    },
+
+    wrap: {
+      type: BooleanConstructor;
+      default: boolean;
+    },
+
+    input: {
+      type: BooleanConstructor;
+      default: boolean;
+    },
+
+    type: {
+      type: StringConstructor;
+      default: string;
+    },
+
+    value: {
+      type: StringConstructor | NumberConstructor | ArrayConstructor | any | 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,
+  ("textarea:resize" | "input:notempty" | "input:empty" | "input:clear" | "texteditor:change" | "calendar:change" | "colorpicker:change" | "change" | "focus" | "blur" | "input" | "update:value")[],
+  "textarea:resize" | "input:notempty" | "input:empty" | "input:clear" | "texteditor:change" | "calendar:change" | "colorpicker:change" | "change" | "focus" | "blur" | "input" | "update:value"
+>;
+
+export default ListInput;
+