@inkline/inkline
Version:
Inkline is the Vue.js UI/UX Library built for creating your next design system
181 lines • 5.23 kB
JavaScript
import { defineComponent } from 'vue';
import { getValueByPath, setValueByPath, setValuesAlongPath, clone, uid } from '../../helpers/index.mjs';
import { colorVariantClass, defaultPropValue, sizePropValidator, FormComponentMixin } from '../../mixins/index.mjs';
import { validate } from '../../validation/index.mjs';
/**
* Slot for default card content
* @name default
* @kind slot
*/
const componentName = 'IForm';
export default defineComponent({
name: componentName,
mixins: [
FormComponentMixin
],
provide() {
return {
form: this
};
},
inheritAttrs: false,
props: {
/**
* The color variant of the form
* @type light | dark
* @default light
* @name color
*/
color: {
type: String,
default: ''
},
/**
* The disabled state of the form
* @type Boolean
* @default false
* @name disabled
*/
disabled: {
type: Boolean,
default: false
},
/**
* Display the form as inline
* @type Boolean
* @default false
* @name inline
*/
inline: {
type: Boolean,
default: false
},
/**
* The loading state of the form
* @type Boolean
* @default false
* @name loading
*/
loading: {
type: Boolean,
default: false
},
/**
* The unique identifier of the form
* @type String
* @default uid()
* @name name
*/
name: {
type: String,
default() {
return uid('form');
}
},
/**
* Used to set the form schema
* @type Boolean
* @default false
* @name modelValue
*/
modelValue: {
type: Object,
default: () => null
},
/**
* The readonly state of the form
* @type Boolean
* @default false
* @name readonly
*/
readonly: {
type: Boolean,
default: false
},
/**
* The size variant of the form
* @type sm | md | lg
* @default md
* @name size
*/
size: {
type: String,
default: defaultPropValue(componentName, 'size'),
validator: sizePropValidator
}
},
emits: [
/**
* Event emitted for setting the modelValue schema
* @event update:modelValue
*/
'update:modelValue',
/**
* Event emitted for submitting the form
* @event submit
*/
'submit'
],
computed: {
classes() {
return {
...colorVariantClass(this),
[`-${this.size}`]: Boolean(this.size),
'-disabled': this.isDisabled,
'-readonly': this.isReadonly,
'-inline': this.inline
};
},
schema() {
if (this.modelValue) {
return this.modelValue;
}
return getValueByPath(this.formGroup.schema || this.form.schema || {}, this.name);
}
},
methods: {
onBlur(name, event) {
this.parent.onBlur?.(this.name ? `${this.name}.${name}` : name, event);
if (this.modelValue) {
let schema = clone(this.modelValue);
schema = setValuesAlongPath(schema, name, { untouched: false, touched: true });
if (this.shouldValidate(name, 'blur')) {
schema = validate(schema);
}
this.$emit('update:modelValue', schema);
}
},
onInput(name, value) {
this.parent.onInput?.(this.name ? `${this.name}.${name}` : name, value);
if (this.modelValue) {
let schema = this.modelValue;
schema = setValueByPath(schema, name, 'value', value);
schema = setValuesAlongPath(schema, name, { pristine: false, dirty: true });
if (this.shouldValidate(name, 'input')) {
schema = validate(schema);
}
this.$emit('update:modelValue', schema);
}
},
onSubmit(event) {
event.preventDefault();
if (this.modelValue) {
let schema = clone(this.modelValue);
schema = validate(schema);
this.$emit('update:modelValue', schema);
if (schema.invalid) {
return;
}
}
this.$emit('submit', event);
},
shouldValidate(path, eventName) {
const targetSchema = getValueByPath(this.modelValue, path);
const events = targetSchema.validateOn
? [].concat(targetSchema.validateOn)
: this.$inkline.options.validateOn;
return events.includes(eventName);
}
}
});
//# sourceMappingURL=script.mjs.map