init component

node_modules/buetify/lib/composables/input/useInput.js

@@ -0,0 +1,133 @@
+import { isObject, isString } from '../../utils/helpers';
+import { computed, toRefs, watch, shallowRef, toRef, reactive } from 'vue';
+import { useFieldData } from '../fieldData';
+import { useFocus, UseFocusPropsDefinition } from '../focus';
+import { getUseModelPropsDefinition, useModel } from '../model';
+import { useToggle } from '../toggle';
+import { useValidation, UseValidationPropsDefinition } from '../validation';
+export const StaticUseInputProps = {
+  variant: {
+    type: String,
+    default: ''
+  },
+  type: {
+    type: String
+  },
+  autocomplete: {
+    type: String
+  },
+  placeholder: {
+    type: String
+  },
+  size: {
+    type: String,
+    default: ''
+  },
+  isRequired: {
+    type: Boolean,
+    default: false
+  },
+  isExpanded: {
+    type: Boolean,
+    default: false
+  },
+  isLoading: {
+    type: Boolean,
+    default: false
+  },
+  isRounded: {
+    type: Boolean,
+    default: false
+  },
+  maxlength: {
+    type: [Number, String]
+  },
+  icon: null,
+  usePasswordReveal: {
+    type: Boolean,
+    default: undefined
+  },
+  ...UseValidationPropsDefinition,
+  ...UseFocusPropsDefinition
+};
+export function getUseInputPropsDefinition() {
+  return { ...getUseModelPropsDefinition(),
+    ...StaticUseInputProps
+  };
+}
+
+function getIconSize(size) {
+  switch (size) {
+    case 'is-small':
+      return size;
+
+    default:
+      return '';
+  }
+}
+
+function getMessageVariant(variant) {
+  if (isString(variant)) {
+    return variant;
+  } else if (isObject(variant)) {
+    return Object.values(variant)[0]; // eslint-disable-line
+  } else {
+    return undefined;
+  }
+}
+
+export function useInput(props, ref) {
+  const fieldData = useFieldData();
+  const isExpanded = computed(() => props.isExpanded || fieldData.attrs.isExpanded.value);
+  const model = useModel(props);
+  const validate = useValidation(props, ref);
+  const focus = useFocus(reactive({
+    isFocused: toRef(props, 'isFocused'),
+    onFocus: toRef(props, 'onFocus'),
+    focusOnMount: toRef(props, 'focusOnMount'),
+    onBlur: e => {
+      if (props.onBlur) {
+        props.onBlur(e);
+      }
+
+      validate.validate();
+    }
+  }), ref); // watch(model.modelValue, (newVal, oldVal) => {
+  //   if (newVal !== oldVal) {
+  //     validate.validate()
+  //   }
+  // });
+
+  const iconSize = computed(() => getIconSize(props.size));
+  const messageVariant = computed(() => getMessageVariant(fieldData.attrs.messageVariant.value));
+  const passwordToggle = useToggle({
+    isVisible: false,
+    hasPopup: false
+  }, 'isVisible');
+  const type = shallowRef(props.type);
+  const usePasswordReveal = computed(() => {
+    return props.type === 'password' && (props.usePasswordReveal === undefined || props.usePasswordReveal);
+  });
+  watch(toRef(props, 'type'), newVal => {
+    type.value = newVal;
+  });
+  watch(passwordToggle.isOn, newVal => {
+    type.value = newVal ? 'text' : 'password';
+  });
+  return { ...toRefs(props),
+    ...fieldData.attrs,
+    ...fieldData.setters,
+    isExpanded,
+    isFullwidth: isExpanded,
+    messageVariant,
+    setters: fieldData.setters,
+    ...model,
+    ...focus,
+    ...validate,
+    iconSize,
+    type,
+    passwordToggle,
+    usePasswordReveal
+  };
+}
+//# sourceMappingURL=useInput.js.map