@indielayer/ui 0.2.0 → 0.2.1

package/src/composables/inputtable.js

@@ -1,4 +1,4 @@
-import { ref, computed, watch } from 'vue'
+import { ref, computed, inject, watch, onMounted, onUnmounted } from 'vue'
 import {
   withValidator as withInteractiveValidator,
   withProps as withInteractiveProps,
@@ -52,10 +52,21 @@ export const withEmits = (useListeners = true) => {
 }
 
 export const useInputtable = (props, { attrs, emit, useListeners = true } = {}) => {
+  const interactive = useInteractive()
+
   const isFirstValidation = ref(true)
   const errorInternal = ref(props.error)
 
+  const name = props.name ? props.name : (Math.random() + 1).toString(36).substring(7)
+  const nameInternal = ref(name)
+
   watch(() => props.error, (val) => { errorInternal.value = val })
+  watch(() => props.name, (val) => { if (val) nameInternal.value = val })
+
+  const form = inject('form', {
+    registerInput: () => {},
+    unregisterInput: () => {},
+  })
 
   const reset = () => {
     errorInternal.value = ''
@@ -63,7 +74,7 @@ export const useInputtable = (props, { attrs, emit, useListeners = true } = {})
     emit('update:modelValue', '')
   }
 
-  const setErrorInternal = (val) => {
+  const setError = (val) => {
     errorInternal.value = val
   }
 
@@ -120,8 +131,16 @@ export const useInputtable = (props, { attrs, emit, useListeners = true } = {})
     }
   }) : ref({})
 
+  onMounted(() => {
+    form.registerInput(nameInternal.value, { focus: interactive.focus, validate, setError })
+  })
+
+  onUnmounted(() => {
+    form.unregisterInput(nameInternal.value)
+  })
+
   return {
-    ...useInteractive(),
+    ...interactive,
 
     // data
     isFirstValidation,
@@ -133,6 +152,6 @@ export const useInputtable = (props, { attrs, emit, useListeners = true } = {})
     // methods
     reset,
     validate,
-    setErrorInternal,
+    setError,
   }
 }

package/src/composables/interactive.js

@@ -25,14 +25,12 @@ export const withValidator = () => validator
 export const useInteractive = () => {
   const focusRef = ref(null)
 
-  const methods = {
-    focus: () => {
-      if (focusRef.value) focusRef.value.focus()
-    },
+  const focus = () => {
+    if (focusRef.value) focusRef.value.focus()
   }
 
   return {
     focusRef,
-    ...methods,
+    focus,
   }
 }

package/lib/cjs/components/Colors.vue.js

@@ -1,11 +0,0 @@
-'use strict';
-
-var Colors_vue_vue_type_template_id_039e5c98_lang = require('./Colors.vue_vue_type_template_id_039e5c98_lang.js');
-
-const script = {};
-
-
-script.render = Colors_vue_vue_type_template_id_039e5c98_lang.render;
-var script$1 = script;
-
-module.exports = script$1;