doNotSave prop is set to false',
+ name: 'apiRoute',
+ type: 'string | undefined',
+ },
+ {
+ default: 'default',
+ desc: `${colorDesc} cancel button`,
+ name: 'cancelButtonColor',
+ type: "VBtn['$props']['color']",
+ },
+ {
+ default: 'x-small',
+ desc: 'Sets the height and width of the cancel button',
+ name: 'cancelButtonSize',
+ type: "VBtn['$props']['size']",
+ },
+ {
+ default: 'Cancel',
+ desc: 'The title of the cancel button',
+ name: 'cancelButtonTitle',
+ type: 'string | undefined',
+ },
+ {
+ default: 'tonal',
+ desc: `${variantDesc} cancel button`,
+ name: 'cancelButtonVariant',
+ type: "VBtn['$props']['variant']",
+ },
+ {
+ default: 'mdi:mdi-close',
+ desc: 'The icon to use to cancel',
+ name: 'cancelIcon',
+ type: 'string',
+ },
+ {
+ default: 'default',
+ desc: `${colorDesc} cancel icon`,
+ name: 'cancelIconColor',
+ type: 'string',
+ },
+ {
+ default: false,
+ desc: 'If true, the field will close when the user opens another inline form element',
+ name: 'closeSiblings',
+ type: 'boolean',
+ },
+ {
+ default: 'primary',
+ desc: `${colorDesc} control`,
+ name: 'color',
+ type: 'string',
+ },
+ {
+ default: 'compact',
+ desc: densityDesc,
+ name: 'density',
+ type: 'string',
+ },
+ {
+ default: false,
+ desc: 'Disables the field',
+ name: 'disabled',
+ type: 'boolean',
+ },
+ {
+ default: true,
+ desc: 'If true the component will not use axios to attempt to save the value. The prop apiRoute is required if this prop is set to false',
+ name: 'doNotSave',
+ type: 'boolean',
+ },
+ {
+ default: 'empty',
+ desc: 'Text to display when the field is empty',
+ name: 'emptyText',
+ type: 'string',
+ },
+ {
+ default: false,
+ desc: 'If set to true will only show the field',
+ name: 'fieldOnly',
+ type: 'boolean',
+ },
+ {
+ default: true,
+ desc: 'Hides hint and validation errors. When set to auto messages will be rendered only if there\'s a message (hint, error message, counter value etc) to display',
+ name: 'hideDetails',
+ type: 'boolean'
+ },
+ {
+ default: () => ({}),
+ desc: 'The item object',
+ name: 'item',
+ type: 'Recordv-label or v-field-label component',
+ name: 'label',
+ type: 'string',
+ },
+ {
+ default: 'PUT',
+ desc: 'The http method to use when saving the text field',
+ name: 'method',
+ type: 'string',
+ },
+ {
+ default: 'undefined',
+ desc: "Sets the component's name attribute",
+ name: 'name',
+ type: 'string',
+ },
+ {
+ default: true,
+ desc: 'Adjusts padding to help the field to be vertically centered in the table cell',
+ name: 'tableField',
+ type: 'boolean',
+ },
+ {
+ default: 'primary',
+ desc: `${colorDesc} display value underline`,
+ name: 'underlineColor',
+ type: 'string',
+ },
+ {
+ default: 'dotted',
+ desc: 'The style of the display value underline',
+ name: 'underlineStyle',
+ type: 'string',
+ },
+ {
+ default: '1px',
+ desc: 'The width of the display value underline',
+ name: 'underlineWidth',
+ type: 'string',
+ },
+ {
+ default: true,
+ desc: 'Displays/Hides the display value underline',
+ name: 'underlined',
+ type: 'boolean',
+ },
+ {
+ default: 'default',
+ desc: `${colorDesc} value`,
+ name: 'valueColor',
+ type: 'string',
+ },
+];
+
+const autofocusProp = [
+ {
+ default: false,
+ desc: 'If true, the field will autofocus',
+ name: 'autofocus',
+ type: 'boolean',
+ },
+];
+
+const saveAndLoadingIconProps = [
+ {
+ default: false,
+ desc: 'Displays/Hides the save icon',
+ name: 'hideSaveIcon',
+ type: 'boolean',
+ },
+ {
+ default: 'mdi:mdi-loading mdi:mdi-spin',
+ desc: 'The icon to use when loading',
+ name: 'loadingIcon',
+ type: 'string',
+ },
+ {
+ default: 'primary',
+ desc: `${colorDesc} loading icon`,
+ name: 'loadingIconColor',
+ type: 'string',
+ },
+ {
+ default: 'primary',
+ desc: `${colorDesc} save button`,
+ name: 'saveButtonColor',
+ type: "VBtn['$props']['color']",
+ },
+ {
+ default: 'x-small',
+ desc: 'Sets the height and width of the save button',
+ name: 'saveButtonSize',
+ type: "VBtn['$props']['size']",
+ },
+ {
+ default: 'Save',
+ desc: 'The title of the save button',
+ name: 'saveButtonTitle',
+ type: 'string | undefined',
+ },
+ {
+ default: 'text',
+ desc: `${variantDesc} save button`,
+ name: 'saveButtonVariant',
+ type: "VBtn['$props']['variant']",
+ },
+ {
+ default: 'mdi:mdi-content-save',
+ desc: 'The icon to use to save',
+ name: 'saveIcon',
+ type: 'string',
+ },
+ {
+ default: 'primary',
+ desc: `${colorDesc} save icon`,
+ name: 'saveIconColor',
+ type: 'string',
+ },
+];
+
+const trueFalseIconProps = [
+ {
+ default: false,
+ desc: 'Sets value for falsy state',
+ name: 'falseValue',
+ type: 'boolean | string',
+ },
+ {
+ default: 'mdi:mdi-close',
+ desc: 'The false icon',
+ name: 'iconFalse',
+ type: 'string',
+ },
+ {
+ default: 'danger',
+ desc: `${colorDesc} icon when false`,
+ name: 'iconFalseColor',
+ type: 'string',
+ },
+ {
+ default: 'No',
+ desc: 'The title of the false icon',
+ name: 'iconFalseTitle',
+ type: 'string | undefined',
+ },
+ {
+ default: 'mdi:mdi-check',
+ desc: 'The true icon',
+ name: 'iconTrue',
+ type: 'string',
+ },
+ {
+ default: 'success',
+ desc: `${colorDesc} icon when true`,
+ name: 'iconTrueColor',
+ type: 'string',
+ },
+ {
+ default: 'Yes',
+ desc: 'The title of the true icon',
+ name: 'iconTrueTitle',
+ type: 'string | undefined',
+ },
+ {
+ default: true,
+ desc: 'Displays/Hides the icons',
+ name: 'icons',
+ type: 'boolean',
+ },
+ {
+ default: true,
+ desc: 'Sets value for truthy state',
+ name: 'trueValue',
+ type: 'boolean | string',
+ },
+];
+
+const truncateProps = [
+ {
+ default: 0,
+ desc: 'The number of characters to truncate the displayed value',
+ name: 'truncateLength',
+ type: 'number | undefined',
+ },
+ {
+ default: '...',
+ desc: 'The suffix to use when truncating the displayed value',
+ name: 'truncateSuffix',
+ type: 'string | undefined',
+ },
+];
+
+const vInlineCheckboxProps = [
+ ...sharedProps,
+ ...trueFalseIconProps,
+ ...[
+ {
+ default: 'compact',
+ desc: densityDesc,
+ name: 'density',
+ type: "VCheckbox['$props']['density']",
+ },
+ {
+ default: 'mdi:mdi-checkbox-blank-outline',
+ desc: 'The icon of the field when false',
+ name: 'falseIcon',
+ type: "VCheckbox['$props']['falseIcon']",
+ },
+ {
+ default: 'mdi:mdi-checkbox-outline',
+ desc: 'The icon of the field when true',
+ name: 'trueIcon',
+ type: "VCheckbox['$props']['trueIcon']",
+ },
+ {
+ default: true,
+ desc: 'Displays/Hides the icons',
+ name: 'icons',
+ type: 'boolean',
+ },
+ ]
+];
+
+const vInlineSelectProps = [
+ ...sharedProps,
+ ...autofocusProp,
+ ...saveAndLoadingIconProps,
+ ...[
+ {
+ default: 'mdi:mdi-close-circle-outline',
+ desc: 'The icon to use to clear the field',
+ name: 'clearIcon',
+ type: "VSelect['$props']['clearIcon']",
+ },
+ {
+ default: false,
+ desc: 'Allows for the component to be cleared',
+ name: 'clearable',
+ type: "VSelect['$props']['clearable']",
+ },
+ {
+ default: 'compact',
+ desc: densityDesc,
+ name: 'density',
+ type: "VSelect['$props']['density']",
+ },
+ {
+ default: true,
+ desc: 'Hides the selected items',
+ name: 'hideSelected',
+ type: "VSelect['$props']['hideSelected']",
+ },
+ {
+ default: 'title',
+ desc: 'The item title',
+ name: 'itemTitle',
+ type: "VSelect['$props']['itemTitle']",
+ },
+ {
+ default: 'value',
+ desc: 'The item value',
+ name: 'itemValue',
+ type: "VSelect['$props']['itemValue']",
+ },
+ {
+ default: () => ([]),
+ desc: 'The select list items',
+ name: 'items',
+ type: "VSelect['$props']['items']",
+ },
+ {
+ default: 'underlined',
+ desc: `${variantDesc} component`,
+ name: 'variant',
+ type: "VSelect['$props']['variant']",
+ },
+ ]
+];
+
+const vInlineSwitchProps = [
+ ...sharedProps,
+ ...trueFalseIconProps,
+ ...[
+ {
+ default: 'compact',
+ desc: densityDesc,
+ name: 'density',
+ type: "VSwitch['$props']['density']",
+ },
+ {
+ default: 'mdi:mdi-checkbox-blank-outline',
+ desc: 'The icon of the field when false',
+ name: 'falseIcon',
+ type: "falseIcon['$props']['falseIcon']",
+ },
+ {
+ default: true,
+ desc: 'Displays/Hides the icons',
+ name: 'icons',
+ type: 'boolean',
+ },
+ ]
+];
+
+const vInlineTextareaProps = [
+ ...sharedProps,
+ ...autofocusProp,
+ ...saveAndLoadingIconProps,
+ ...truncateProps,
+ ...[
+ {
+ default: true,
+ desc: 'Automatically grow the textarea depending on amount of text',
+ name: 'autoGrow',
+ type: "VTextarea['$props']['autoGrow']",
+ },
+ {
+ default: 'compact',
+ desc: densityDesc,
+ name: 'density',
+ type: "VTextarea['$props']['density']",
+ },
+ {
+ default: 1,
+ desc: 'Default row count',
+ name: 'rows',
+ type: "VTextarea['$props']['rows']",
+ },
+ {
+ default: 'underlined',
+ desc: `${variantDesc} component`,
+ name: 'variant',
+ type: "VTextarea['$props']['variant']",
+ },
+ ]
+];
+
+const vInlineTextFieldProps = [
+ ...sharedProps,
+ ...autofocusProp,
+ ...saveAndLoadingIconProps,
+ ...truncateProps,
+ ...[
+ {
+ default: 'compact',
+ desc: densityDesc,
+ name: 'density',
+ type: "VTextField['$props']['density']",
+ },
+ {
+ default: 'underlined',
+ desc: `${variantDesc} component`,
+ name: 'variant',
+ type: "VTextField['$props']['variant']",
+ },
+ ]
+];
+
+export const usePropsStore = defineStore('props', {
+ state: () => {
+ return {
+ autofocusProp,
+ propsSupported,
+ saveAndLoadingIconProps,
+ sharedProps,
+ trueFalseIconProps,
+ truncateProps,
+ vInlineCheckboxProps,
+ vInlineSelectProps,
+ vInlineSwitchProps,
+ vInlineTextFieldProps,
+ vInlineTextareaProps,
+ };
+ },
+});
diff --git a/src/types/index.ts b/src/types/index.ts
index 0e10a20..78a1842 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -21,10 +21,15 @@ import {
export type FieldValue = string | boolean | number | object | [] | null | { [key: string]: string | unknown; };
export type TimeOpened = Date | null;
+export type GlobalDensity = VCheckbox['$props']['density'] | VSelect['$props']['density'] | VSwitch['$props']['density'] | VTextField['$props']['density'] | VTextarea['$props']['density'];
+
+export type GlobalVariant = VSelect['$props']['variant'] | VTextField['$props']['variant'] | VTextarea['$props']['variant'];
+
+
// -------------------------------------------------- Props //
export interface SharedProps {
- apiRoute?: string;
+ apiRoute?: string | undefined;
autofocus?: boolean;
cancelButtonColor?: VBtn['$props']['color'];
cancelButtonSize?: VBtn['$props']['size'];
@@ -49,12 +54,13 @@ export interface SharedProps {
iconTrueColor?: string;
iconTrueTitle?: string | undefined;
icons?: boolean;
- item: Record