@indielayer/ui 0.2.0 → 0.2.1

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

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

package/lib/cjs/components/form/Form.vue.js

@@ -1,7 +1,8 @@
 'use strict';
 
 var Form_vue_vue_type_script_lang = require('./Form.vue_vue_type_script_lang.js');
+var Form_vue_vue_type_template_id_bf90a49e_lang = require('./Form.vue_vue_type_template_id_bf90a49e_lang.js');
 
-
+Form_vue_vue_type_script_lang.render = Form_vue_vue_type_template_id_bf90a49e_lang.render;
 
 module.exports = Form_vue_vue_type_script_lang;

package/lib/cjs/components/form/Form.vue_vue_type_script_lang.js

@@ -2,7 +2,7 @@
 
 var vue = require('vue');
 
-var script = vue.defineComponent({
+var script = {
   name: 'XForm',
   inheritAttrs: false,
   props: {
@@ -23,42 +23,46 @@ var script = vue.defineComponent({
       default: () => [],
     },
   },
-  data() {
-    return {
-      inputs: [],
-    }
-  },
-  watch: {
-    errors(errors) {
-      this.$nextTick(() => {
+
+  setup(props, { emit }) {
+    const inputs = [];
+
+    vue.provide('form', {
+      registerInput: (name, { focus, validate, setError }) => {
+        const exists = inputs.find((i) => i.name === name);
+
+        if (exists) {
+          exists.focus = focus;
+          exists.validate = validate;
+          exists.setError = setError;
+        }
+        else inputs.push({ name, focus, validate, setError });
+      },
+      unregisterInput: (name) => {
+        const index = inputs.findIndex((i) => i.name === name);
+
+        inputs.splice(index, 1);
+      },
+    });
+
+    vue.onMounted(() => {
+      if (props.autoFocus && inputs && inputs.length > 0) inputs[0].focus();
+    });
+
+    vue.watch(() => props.errors, (errors) => {
+      vue.nextTick(() => {
         errors.forEach((error) => {
-          const input = this.inputs.find((i) => i.name === error.field);
+          const input = inputs.find((i) => i.name === error.field);
 
-          if (input) input.setErrorInternal(error.msg);
+          if (input) input.setError(error.msg);
         });
       });
-    },
-  },
-  mounted() {
-    this.getInputs(this.vnodesInDefaultSlot);
-
-    if (this.autoFocus) {
-      if (this.inputs && this.inputs.length > 0) this.inputs[0].focus();
-    }
-  },
-  methods: {
-    submit(e) {
-      e.preventDefault();
-      e.stopPropagation();
-
-      const isFormValid = this.autoValidate ? this.validate() : true;
+    });
 
-      this.$emit('submit', isFormValid);
-    },
-    validate() {
+    const validate = () => {
       let isFormValid = true;
 
-      this.inputs.forEach((input) => {
+      inputs.forEach((input) => {
         const isInputValid = input.validate();
 
         if (!isInputValid && isFormValid) {
@@ -70,40 +74,22 @@ var script = vue.defineComponent({
       });
 
       return isFormValid
-    },
-    getInputs(vnodesInDefaultSlot) {
-      if (!Array.isArray(vnodesInDefaultSlot)) return
+    };
+
+    const submit = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
 
-      vnodesInDefaultSlot.forEach((vNode) => {
-        const vInstance = vNode.component?.ctx;
+      const isFormValid = props.autoValidate ? validate() : true;
 
-        if (vInstance && typeof vInstance.validate === 'function') this.inputs.push(vInstance);
-        else if (vNode.children) this.getInputs(vNode.children);
-      });
-    },
-  },
-  render() {
-    const vnodesInDefaultSlot = this.$slots.default ? this.$slots.default() : [];
-
-    this.vnodesInDefaultSlot = vnodesInDefaultSlot;
-
-    return vue.h(
-      'form',
-      {
-        onKeyUp: (event) => {
-          if (event.target !== event.currentTarget) return
-          if (event.key === 'Enter') this.submit(event);
-        },
-        onSubmit: this.submit,
-      },
-      [
-        vue.h('fieldset', {
-          disabled: this.disabled,
-        },
-        vnodesInDefaultSlot),
-      ],
-    )
+      emit('submit', isFormValid);
+    };
+
+    return {
+      validate,
+      submit,
+    }
   },
-});
+};
 
 module.exports = script;

package/lib/cjs/components/form/Form.vue_vue_type_template_id_bf90a49e_lang.js

@@ -0,0 +1,20 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+
+const _hoisted_1 = ["disabled"];
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  return (vue.openBlock(), vue.createElementBlock("form", {
+    onSubmit: _cache[0] || (_cache[0] = (...args) => ($setup.submit && $setup.submit(...args))),
+    onKeypress: _cache[1] || (_cache[1] = vue.withKeys((...args) => ($setup.submit && $setup.submit(...args)), ["enter"]))
+  }, [
+    vue.createElementVNode("fieldset", { disabled: $props.disabled }, [
+      vue.renderSlot(_ctx.$slots, "default")
+    ], 8, _hoisted_1)
+  ], 32))
+}
+
+exports.render = render;

package/lib/cjs/components/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var Spacer = require('./spacer/Spacer.vue.js');
-var Colors = require('./Colors.vue.js');
+var colors = require('./colors.vue.js');
 var Avatar_vue_vue_type_script_lang = require('./avatar/Avatar.vue_vue_type_script_lang.js');
 var Button_vue_vue_type_script_lang = require('./button/Button.vue_vue_type_script_lang.js');
 var Card_vue_vue_type_script_lang = require('./card/Card.vue_vue_type_script_lang.js');
@@ -46,7 +46,7 @@ var Tooltip_vue_vue_type_script_lang = require('./tooltip/Tooltip.vue_vue_type_s
 
 
 exports.Spacer = Spacer;
-exports.Colors = Colors;
+exports.Colors = colors;
 exports.Avatar = Avatar_vue_vue_type_script_lang;
 exports.Button = Button_vue_vue_type_script_lang;
 exports.Card = Card_vue_vue_type_script_lang;

package/lib/cjs/composables/inputtable.js

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

package/lib/cjs/composables/interactive.js

@@ -26,15 +26,13 @@ const withValidator = () => validator;
 const useInteractive = () => {
   const focusRef = vue.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/index.js

@@ -17,6 +17,7 @@ require('./components/container/Container.vue.js');
 var Container_vue_vue_type_script_lang = require('./components/container/Container.vue_vue_type_script_lang.js');
 require('./components/divider/Divider.vue.js');
 var Divider_vue_vue_type_script_lang = require('./components/divider/Divider.vue_vue_type_script_lang.js');
+require('./components/form/Form.vue.js');
 var Form_vue_vue_type_script_lang = require('./components/form/Form.vue_vue_type_script_lang.js');
 require('./components/image/Image.vue.js');
 var Image_vue_vue_type_script_lang = require('./components/image/Image.vue_vue_type_script_lang.js');
@@ -71,7 +72,7 @@ var TableCell_vue_vue_type_script_lang = require('./components/table/TableCell.v
 var TableHead_vue_vue_type_script_lang = require('./components/table/TableHead.vue_vue_type_script_lang.js');
 var TableHeader_vue_vue_type_script_lang = require('./components/table/TableHeader.vue_vue_type_script_lang.js');
 var TableRow_vue_vue_type_script_lang = require('./components/table/TableRow.vue_vue_type_script_lang.js');
-var Colors = require('./components/Colors.vue.js');
+var colors = require('./components/colors.vue.js');
 
 const install = (Vue, config = {}) => {
   Object.entries(index).forEach(([name, component]) => {
@@ -124,5 +125,5 @@ exports.TableCell = TableCell_vue_vue_type_script_lang;
 exports.TableHead = TableHead_vue_vue_type_script_lang;
 exports.TableHeader = TableHeader_vue_vue_type_script_lang;
 exports.TableRow = TableRow_vue_vue_type_script_lang;
-exports.Colors = Colors;
+exports.Colors = colors;
 exports["default"] = install;

package/lib/esm/components/{Colors.vue.js → colors.vue.js}

@@ -1,4 +1,4 @@
-import { render } from './Colors.vue_vue_type_template_id_039e5c98_lang.js';
+import { render } from './colors.vue_vue_type_template_id_227ea690_lang.js';
 
 const script = {};
 

package/lib/esm/components/form/Form.vue.js

@@ -1,2 +1,5 @@
 import script from './Form.vue_vue_type_script_lang.js';
 export { default } from './Form.vue_vue_type_script_lang.js';
+import { render } from './Form.vue_vue_type_template_id_bf90a49e_lang.js';
+
+script.render = render;

package/lib/esm/components/form/Form.vue_vue_type_script_lang.js

@@ -1,6 +1,6 @@
-import { defineComponent, h } from 'vue';
+import { provide, onMounted, watch, nextTick } from 'vue';
 
-var script = defineComponent({
+var script = {
   name: 'XForm',
   inheritAttrs: false,
   props: {
@@ -21,42 +21,46 @@ var script = defineComponent({
       default: () => [],
     },
   },
-  data() {
-    return {
-      inputs: [],
-    }
-  },
-  watch: {
-    errors(errors) {
-      this.$nextTick(() => {
+
+  setup(props, { emit }) {
+    const inputs = [];
+
+    provide('form', {
+      registerInput: (name, { focus, validate, setError }) => {
+        const exists = inputs.find((i) => i.name === name);
+
+        if (exists) {
+          exists.focus = focus;
+          exists.validate = validate;
+          exists.setError = setError;
+        }
+        else inputs.push({ name, focus, validate, setError });
+      },
+      unregisterInput: (name) => {
+        const index = inputs.findIndex((i) => i.name === name);
+
+        inputs.splice(index, 1);
+      },
+    });
+
+    onMounted(() => {
+      if (props.autoFocus && inputs && inputs.length > 0) inputs[0].focus();
+    });
+
+    watch(() => props.errors, (errors) => {
+      nextTick(() => {
         errors.forEach((error) => {
-          const input = this.inputs.find((i) => i.name === error.field);
+          const input = inputs.find((i) => i.name === error.field);
 
-          if (input) input.setErrorInternal(error.msg);
+          if (input) input.setError(error.msg);
         });
       });
-    },
-  },
-  mounted() {
-    this.getInputs(this.vnodesInDefaultSlot);
-
-    if (this.autoFocus) {
-      if (this.inputs && this.inputs.length > 0) this.inputs[0].focus();
-    }
-  },
-  methods: {
-    submit(e) {
-      e.preventDefault();
-      e.stopPropagation();
-
-      const isFormValid = this.autoValidate ? this.validate() : true;
+    });
 
-      this.$emit('submit', isFormValid);
-    },
-    validate() {
+    const validate = () => {
       let isFormValid = true;
 
-      this.inputs.forEach((input) => {
+      inputs.forEach((input) => {
         const isInputValid = input.validate();
 
         if (!isInputValid && isFormValid) {
@@ -68,40 +72,22 @@ var script = defineComponent({
       });
 
       return isFormValid
-    },
-    getInputs(vnodesInDefaultSlot) {
-      if (!Array.isArray(vnodesInDefaultSlot)) return
+    };
+
+    const submit = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
 
-      vnodesInDefaultSlot.forEach((vNode) => {
-        const vInstance = vNode.component?.ctx;
+      const isFormValid = props.autoValidate ? validate() : true;
 
-        if (vInstance && typeof vInstance.validate === 'function') this.inputs.push(vInstance);
-        else if (vNode.children) this.getInputs(vNode.children);
-      });
-    },
-  },
-  render() {
-    const vnodesInDefaultSlot = this.$slots.default ? this.$slots.default() : [];
-
-    this.vnodesInDefaultSlot = vnodesInDefaultSlot;
-
-    return h(
-      'form',
-      {
-        onKeyUp: (event) => {
-          if (event.target !== event.currentTarget) return
-          if (event.key === 'Enter') this.submit(event);
-        },
-        onSubmit: this.submit,
-      },
-      [
-        h('fieldset', {
-          disabled: this.disabled,
-        },
-        vnodesInDefaultSlot),
-      ],
-    )
+      emit('submit', isFormValid);
+    };
+
+    return {
+      validate,
+      submit,
+    }
   },
-});
+};
 
 export { script as default };

package/lib/esm/components/form/Form.vue_vue_type_template_id_bf90a49e_lang.js

@@ -0,0 +1,16 @@
+import { openBlock, createElementBlock, withKeys, createElementVNode, renderSlot } from 'vue';
+
+const _hoisted_1 = ["disabled"];
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  return (openBlock(), createElementBlock("form", {
+    onSubmit: _cache[0] || (_cache[0] = (...args) => ($setup.submit && $setup.submit(...args))),
+    onKeypress: _cache[1] || (_cache[1] = withKeys((...args) => ($setup.submit && $setup.submit(...args)), ["enter"]))
+  }, [
+    createElementVNode("fieldset", { disabled: $props.disabled }, [
+      renderSlot(_ctx.$slots, "default")
+    ], 8, _hoisted_1)
+  ], 32))
+}
+
+export { render };

package/lib/esm/components/index.js

@@ -1,5 +1,5 @@
 export { default as Spacer } from './spacer/Spacer.vue.js';
-export { default as Colors } from './Colors.vue.js';
+export { default as Colors } from './colors.vue.js';
 export { default as Avatar } from './avatar/Avatar.vue_vue_type_script_lang.js';
 export { default as Button } from './button/Button.vue_vue_type_script_lang.js';
 export { default as Card } from './card/Card.vue_vue_type_script_lang.js';

package/lib/esm/composables/inputtable.js

@@ -1,4 +1,4 @@
-import { ref, watch, computed } from 'vue';
+import { ref, watch, inject, computed, onMounted, onUnmounted } from 'vue';
 import { withProps as withProps$1, useInteractive, withValidator as withValidator$1 } from './interactive.js';
 
 const validator = {
@@ -48,10 +48,21 @@ const withEmits = (useListeners = true) => {
 };
 
 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 = '';
@@ -59,7 +70,7 @@ const useInputtable = (props, { attrs, emit, useListeners = true } = {}) => {
     emit('update:modelValue', '');
   };
 
-  const setErrorInternal = (val) => {
+  const setError = (val) => {
     errorInternal.value = val;
   };
 
@@ -116,8 +127,16 @@ 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,
@@ -129,7 +148,7 @@ const useInputtable = (props, { attrs, emit, useListeners = true } = {}) => {
     // methods
     reset,
     validate,
-    setErrorInternal,
+    setError,
   }
 };
 

package/lib/esm/composables/interactive.js

@@ -22,15 +22,13 @@ const withValidator = () => validator;
 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/esm/index.js

@@ -13,6 +13,7 @@ import './components/container/Container.vue.js';
 export { default as Container } from './components/container/Container.vue_vue_type_script_lang.js';
 import './components/divider/Divider.vue.js';
 export { default as Divider } from './components/divider/Divider.vue_vue_type_script_lang.js';
+import './components/form/Form.vue.js';
 export { default as Form } from './components/form/Form.vue_vue_type_script_lang.js';
 import './components/image/Image.vue.js';
 export { default as Image } from './components/image/Image.vue_vue_type_script_lang.js';
@@ -67,7 +68,7 @@ export { default as TableCell } from './components/table/TableCell.vue_vue_type_
 export { default as TableHead } from './components/table/TableHead.vue_vue_type_script_lang.js';
 export { default as TableHeader } from './components/table/TableHeader.vue_vue_type_script_lang.js';
 export { default as TableRow } from './components/table/TableRow.vue_vue_type_script_lang.js';
-export { default as Colors } from './components/Colors.vue.js';
+export { default as Colors } from './components/colors.vue.js';
 
 const install = (Vue, config = {}) => {
   Object.entries(index).forEach(([name, component]) => {