From 88fac0cd7e4a82114f04bf25c2da3673c8b7eb96 Mon Sep 17 00:00:00 2001 From: WebDevNerdStuff Date: Wed, 6 Dec 2023 17:30:42 -0800 Subject: [PATCH] Fixing global options --- src/playground/configs/playground.ts | 42 ++++--- .../configs/templates/PlaygroundPage.vue | 40 +++---- src/plugin/VInlineCheckbox.vue | 80 ++++++++----- src/plugin/VInlineCustomField.vue | 78 ++++++++----- src/plugin/VInlineSelect.vue | 86 +++++++++----- src/plugin/VInlineSwitch.vue | 109 +++++++++++------- src/plugin/VInlineTextField.vue | 85 +++++++++----- src/plugin/VInlineTextarea.vue | 83 ++++++++----- src/plugin/components/SaveFieldButtons.vue | 2 + src/plugin/index.ts | 4 +- src/plugin/types/index.ts | 18 +-- src/plugin/types/inline-fields.d.ts | 4 +- src/plugin/utils/props.ts | 3 +- 13 files changed, 392 insertions(+), 242 deletions(-) diff --git a/src/playground/configs/playground.ts b/src/playground/configs/playground.ts index a02040d..79b3d08 100644 --- a/src/playground/configs/playground.ts +++ b/src/playground/configs/playground.ts @@ -6,32 +6,44 @@ import { registerPlugins } from '../../plugins'; import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'; import { makeServer } from '../../server'; import { createVInlineFields } from '../../plugin/index'; -// import { -// VInlineCheckbox, -// VInlineCustomField, -// VInlineSelect, -// VInlineSwitch, -// VInlineTextField, -// VInlineTextarea, -// } from '../../plugin/index'; + makeServer({ environment: 'playground' }); const app = createApp(PlaygroundApp); app.use(createVInlineFields({ + // cancelButtonColor: 'yellow', + // cancelButtonSize: 'x-small', + // cancelButtonTitle: 'xxxxxxxxxxx', + // cancelButtonVariant: 'outlined', + // cancelIcon: 'mdi:mdi-cog', + // cancelIconColor: 'purple', + // cardField: true, + // cardOffsetX: 100, + // cardOffsetY: 100, // cell: true, + // cellUnderlineFullWidth: true, + // closeSiblings: false, + // color: 'orange', + // disabled: false, + // emptyText: 'xxxxxxxxxxxx', + // fieldOnly: true, + // hideCancelIcon: true, + // hideDetails: true, + // hideSaveIcon: true, + // hideSaveIcon: true, + // loadingWait: true, + // tableField: false, + // underlineColor: 'red', + // underlineStyle: 'dashed', + // underlineWidth: '10px', + // underlined: false, + // valueColor: 'pink', })); app.use(createPinia()); app.component('font-awesome-icon', FontAwesomeIcon); app.component('FaIcon', FontAwesomeIcon); -// app.component('VInlineCheckbox', VInlineCheckbox); -// app.component('VInlineCustomField', VInlineCustomField); -// app.component('VInlineSelect', VInlineSelect); -// app.component('VInlineSwitch', VInlineSwitch); -// app.component('VInlineTextField', VInlineTextField); -// app.component('VInlineTextarea', VInlineTextarea); - registerPlugins(app); app.mount('#app'); diff --git a/src/playground/configs/templates/PlaygroundPage.vue b/src/playground/configs/templates/PlaygroundPage.vue index 5991f78..49225a2 100644 --- a/src/playground/configs/templates/PlaygroundPage.vue +++ b/src/playground/configs/templates/PlaygroundPage.vue @@ -6,13 +6,6 @@ > Toggle Disabled: {{ componentOptions.disabled }} - - - Toggle Open: {{ componentOptions.open }} - @@ -45,6 +38,7 @@ :disabled="componentOptions.disabled" :field-only="componentOptions.fieldOnly" :hide-cancel-icon="componentOptions.hideCancelIcon" + :hide-save-icon="componentOptions.hideSaveIcon" :icon-false="componentOptions.iconFalse" :icon-false-title="componentOptions.iconFalseTitle" :icon-true="componentOptions.iconTrue" @@ -88,6 +82,7 @@ :field-only="componentOptions.fieldOnly" :hide-cancel-icon="componentOptions.hideCancelIcon" :hide-details="componentOptions.hideDetails" + :hide-save-icon="componentOptions.hideSaveIcon" :hide-selected="componentOptions.hideSelected" item-title="name" item-value="id" @@ -137,7 +132,7 @@ :display-append-inner-icon-color="componentOptions.displayAppendInnerIconColor" :empty-text="componentOptions.emptyText" :field-only="componentOptions.fieldOnly" - :hide-cancel-icon="componentOptions.hideCancelIcon" + :hide-details="componentOptions.hideDetails" :hide-selected="componentOptions.hideSelected" item-title="name" @@ -148,7 +143,6 @@ :loading-wait="componentOptions.loadingWait" :menu="componentOptions.menu" name="userId" - :open="componentOptions.open" return-object :save-button-color="componentOptions.saveButtonColor" :save-button-title="componentOptions.saveButtonTitle" @@ -189,6 +183,7 @@ :field-only="componentOptions.fieldOnly" :hide-cancel-icon="componentOptions.hideCancelIcon" :hide-details="componentOptions.hideDetails" + :hide-save-icon="componentOptions.hideSaveIcon" :label="componentOptions.label" :loading="item.loading" :loading-wait="componentOptions.loadingWait" @@ -236,6 +231,7 @@ :field-only="componentOptions.fieldOnly" :hide-cancel-icon="componentOptions.hideCancelIcon" :hide-details="componentOptions.hideDetails" + :hide-save-icon="componentOptions.hideSaveIcon" :label="componentOptions.label" :loading="item.loading" :loading-wait="componentOptions.loadingWait" @@ -298,6 +294,7 @@ :disabled="componentOptions.disabled" :field-only="componentOptions.fieldOnly" :hide-cancel-icon="componentOptions.hideCancelIcon" + :hide-save-icon="componentOptions.hideSaveIcon" :icon-false-title="componentOptions.iconFalseTitle" :icon-true-title="componentOptions.iconTrueTitle" :label="componentOptions.label" @@ -363,9 +360,7 @@ import type { type Headers = VDataTable['$props']['headers']; type Item = (typeof VDataTableRow)['$props']['item']; type Items = VDataTable['$props']['items']; -interface Props extends SharedProps { - [key: string]: any; -} +interface Props extends SharedProps { [key: string]: any; } // ? Components are already loaded via the configs/playground.ts file // @@ -385,15 +380,6 @@ const tableOptions = reactive({ }); -// ? Changes the type of field the table uses // -const isCardField = ref(false); -const cardFieldState = computed(() => isCardField.value); - -watch(() => isCardField.value, () => { - tableOptions.tableKey = new Date().getUTCMilliseconds(); -}); - - // ? Use these options to play around with the component props // const componentOptions = reactive({ autoSelectFirst: true, @@ -426,8 +412,10 @@ const componentOptions = reactive({ // displayPrependInnerIconSize: 'x-small', emptyText: 'empty', fieldOnly: false, + // hideCancelIcon: true, hideCancelIcon: false, hideDetails: true, + hideSaveIcon: false, hideSelected: false, iconFalse: undefined, iconFalseTitle: undefined, @@ -436,7 +424,6 @@ const componentOptions = reactive({ label: undefined, loadingWait: true, menu: true, - open: false, rules: { minLength(value: any) { return value?.length >= 5 || 'Min 5 characters'; @@ -508,6 +495,15 @@ const headers = ref([ ]); +// ? Changes the type of field the table uses // +const isCardField = ref(false); +const cardFieldState = computed(() => isCardField.value); + +watch(() => isCardField.value, () => { + tableOptions.tableKey = new Date().getUTCMilliseconds(); +}); + + // ? This is where you would save the item in the database. // function updatedValue(item: Item, _field?: string): void { item.loading = true; diff --git a/src/plugin/VInlineCheckbox.vue b/src/plugin/VInlineCheckbox.vue index 972c3b3..6eb7d7c 100644 --- a/src/plugin/VInlineCheckbox.vue +++ b/src/plugin/VInlineCheckbox.vue @@ -5,7 +5,7 @@ :style="inlineFieldsContainerStyle" >
@@ -44,22 +44,22 @@
@@ -111,7 +111,7 @@
@@ -175,8 +175,30 @@ const theme = useTheme(); const props = withDefaults(defineProps(), { ...checkboxProps }); let settings = reactive({ ...attrs, ...props, ...injectedOptions }); + +const { cancelButtonColor, + cancelButtonSize, + cancelButtonTitle, + cancelButtonVariant, + cancelIcon, + cancelIconColor, + cardField, + closeSiblings, + color, + fieldOnly, + hideCancelIcon, + hideDetails, + loadingIcon, + loadingIconColor, + saveButtonColor, + saveButtonSize, + saveButtonTitle, + saveButtonVariant, + saveIcon, + saveIconColor } = toRefs(settings); + +const disabled = computed(() => props.disabled); const loadingProp = computed(() => props.loading); -const disabledProp = computed(() => props.disabled); const error = ref(false); const showField = ref(false); @@ -231,7 +253,7 @@ const truthyModelValue = computed(() => useTruthyModelValue({ const inlineFieldsContainerClass = computed(() => useInlineFieldsContainerClass({ cell: settings.cell && !showField.value, density: settings.density, - disabled: disabledProp.value, + disabled: disabled.value, field: 'v-checkbox', loading: loadingProp.value, loadingWait: settings.loadingWait, @@ -311,7 +333,7 @@ watch(() => windowSize, () => { // ------------------------------------------------ Toggle the field // function toggleField() { - if (disabledProp.value || (settings.loadingWait && loadingProp.value)) { + if (disabled.value || (settings.loadingWait && loadingProp.value)) { return; } @@ -326,7 +348,7 @@ function toggleField() { const response = useToggleField({ attrs, - closeSiblings: settings.closeSiblings, + closeSiblings: closeSiblings.value, fieldOnly: settings.fieldOnly, props, showField, @@ -337,7 +359,7 @@ function toggleField() { showField.value = response.showField; timeOpened.value = response.timeOpened; - if (closeSiblingsBus !== null && settings.closeSiblings && showField.value && !settings.fieldOnly) { + if (closeSiblingsBus !== null && closeSiblings.value && showField.value && !settings.fieldOnly) { closeSiblingsBus.emit(response.timeOpened); } } @@ -361,7 +383,7 @@ function saveValue(value: any) { let closeSiblingsBus: unknown | any; let unsubscribeBus: () => void; -if (settings.closeSiblings) { +if (closeSiblings.value) { import('@vueuse/core').then(({ useEventBus }) => { closeSiblingsBus = useEventBus(CloseSiblingsBus); unsubscribeBus = closeSiblingsBus.on(closeSiblingsListener); diff --git a/src/plugin/VInlineCustomField.vue b/src/plugin/VInlineCustomField.vue index 3ce627a..acc1bc6 100644 --- a/src/plugin/VInlineCustomField.vue +++ b/src/plugin/VInlineCustomField.vue @@ -5,7 +5,7 @@ :style="inlineFieldsContainerStyle" >
@@ -29,41 +29,38 @@
- @@ -72,7 +69,7 @@
@@ -130,8 +127,29 @@ const iconOptions = inject(Symbol.for('vuetify:icons')); const props = withDefaults(defineProps(), { ...textFieldProps }); let settings = reactive({ ...attrs, ...props, ...injectedOptions }); + +const { cancelButtonColor, + cancelButtonSize, + cancelButtonTitle, + cancelButtonVariant, + cancelIcon, + cancelIconColor, + cardField, + closeSiblings, + fieldOnly, + hideCancelIcon, + hideSaveIcon, + loadingIcon, + loadingIconColor, + saveButtonColor, + saveButtonSize, + saveButtonTitle, + saveButtonVariant, + saveIcon, + saveIconColor } = toRefs(settings); + +const disabled = computed(() => props.disabled); const loadingProp = computed(() => props.loading); -const disabledProp = computed(() => props.disabled); const empty = ref(false); const error = ref(false); @@ -216,7 +234,7 @@ const bindingCard = computed(() => ({ const inlineFieldsContainerClass = computed(() => useInlineFieldsContainerClass({ cell: settings.cell && !showField.value, density: settings.density, - disabled: disabledProp.value, + disabled: disabled.value, field: 'v-text-field', iconSet: iconOptions?.defaultSet, loading: loadingProp.value, @@ -267,7 +285,7 @@ const cardFieldRef = ref('body'); // ------------------------------------------------ Toggle the field // function toggleField() { - if (disabledProp.value || (settings.loadingWait && loadingProp.value)) { + if (disabled.value || (settings.loadingWait && loadingProp.value)) { return; } @@ -281,7 +299,7 @@ function toggleField() { const response = useToggleField({ attrs, - closeSiblings: settings.closeSiblings, + closeSiblings: closeSiblings.value, fieldOnly: settings.fieldOnly, props, showField, @@ -292,7 +310,7 @@ function toggleField() { showField.value = response.showField; timeOpened.value = response.timeOpened; - if (closeSiblingsBus !== null && settings.closeSiblings && showField.value && !settings.fieldOnly) { + if (closeSiblingsBus !== null && closeSiblings.value && showField.value && !settings.fieldOnly) { closeSiblingsBus.emit(response.timeOpened); } } @@ -348,7 +366,7 @@ function saveValue() { let closeSiblingsBus: unknown | any; let unsubscribeBus: () => void; -if (settings.closeSiblings) { +if (closeSiblings.value) { import('@vueuse/core').then(({ useEventBus }) => { closeSiblingsBus = useEventBus(CloseSiblingsBus); unsubscribeBus = closeSiblingsBus.on(closeSiblingsListener); diff --git a/src/plugin/VInlineSelect.vue b/src/plugin/VInlineSelect.vue index bd6f4b7..52a9f28 100644 --- a/src/plugin/VInlineSelect.vue +++ b/src/plugin/VInlineSelect.vue @@ -5,7 +5,7 @@ :style="inlineFieldsContainerStyle" >
@@ -29,11 +29,11 @@
@@ -104,7 +104,7 @@
@@ -164,8 +164,32 @@ const iconOptions = inject(Symbol.for('vuetify:icons')); const props = withDefaults(defineProps(), { ...selectProps }); let settings = reactive({ ...attrs, ...props, ...injectedOptions }); + +const { cancelButtonColor, + cancelButtonSize, + cancelButtonTitle, + cancelButtonVariant, + cancelIcon, + cancelIconColor, + cardField, + closeSiblings, + color, + fieldOnly, + hideCancelIcon, + hideDetails, + hideSaveIcon, + loadingIcon, + loadingIconColor, + saveButtonColor, + saveButtonSize, + saveButtonTitle, + saveButtonVariant, + saveIcon, + saveIconColor, + valueColor } = toRefs(settings); + +const disabled = computed(() => props.disabled); const loadingProp = computed(() => props.loading); -const disabledProp = computed(() => props.disabled); const empty = ref(false); const error = ref(false); @@ -235,7 +259,7 @@ const bindingDisplay = computed(() => { underlineStyle: settings.underlineStyle, underlineWidth: settings.underlineWidth, underlined: settings.underlined, - valueColor: settings.valueColor, + valueColor: valueColor.value, }; }); @@ -255,7 +279,7 @@ watchEffect(() => { const inlineFieldsContainerClass = computed(() => useInlineFieldsContainerClass({ cell: settings.cell && !showField.value, density: settings.density, - disabled: disabledProp.value, + disabled: disabled.value, field: 'v-select', iconSet: iconOptions?.defaultSet, loading: loadingProp.value, @@ -306,7 +330,7 @@ const cardFieldRef = ref('body'); // ------------------------------------------------ Toggle the field // function toggleField() { - if (disabledProp.value || (settings.loadingWait && loadingProp.value)) { + if (disabled.value || (settings.loadingWait && loadingProp.value)) { return; } @@ -320,7 +344,7 @@ function toggleField() { const response = useToggleField({ attrs, - closeSiblings: settings.closeSiblings, + closeSiblings: closeSiblings.value, fieldOnly: settings.fieldOnly, props, showField, @@ -331,7 +355,7 @@ function toggleField() { showField.value = response.showField; timeOpened.value = response.timeOpened; - if (closeSiblingsBus !== null && settings.closeSiblings && showField.value && !settings.fieldOnly) { + if (closeSiblingsBus !== null && closeSiblings.value && showField.value && !settings.fieldOnly) { closeSiblingsBus.emit(response.timeOpened); } } @@ -384,7 +408,7 @@ function saveValue() { let closeSiblingsBus: unknown | any; let unsubscribeBus: () => void; -if (settings.closeSiblings) { +if (closeSiblings.value) { import('@vueuse/core').then(({ useEventBus }) => { closeSiblingsBus = useEventBus(CloseSiblingsBus); unsubscribeBus = closeSiblingsBus.on(closeSiblingsListener); diff --git a/src/plugin/VInlineSwitch.vue b/src/plugin/VInlineSwitch.vue index 582dd7f..52faacc 100644 --- a/src/plugin/VInlineSwitch.vue +++ b/src/plugin/VInlineSwitch.vue @@ -44,22 +44,22 @@
- - - + :error="error" + :field-only="fieldOnly" + :hide-cancel-icon="hideCancelIcon" + :hide-save-icon="true" + :loading="loadingProp" + :loading-icon="loadingIcon" + :loading-icon-color="loadingIconColor" + :save-button-color="saveButtonColor" + :save-button-size="saveButtonSize" + :save-button-title="saveButtonTitle" + :save-button-variant="saveButtonVariant" + :save-icon="saveIcon" + :save-icon-color="saveIconColor" + @close="closeField" + @save="saveValue" + /> @@ -103,7 +112,7 @@
@@ -124,15 +133,17 @@ import { TimeOpened, VInlineSwitchProps, } from '@/plugin/types'; -import { IconOptions, useTheme } from 'vuetify'; +import { useTheme } from 'vuetify'; import { defaultCardProps, switchProps, } from './utils/props'; -import { BooleanIcons } from './components/index'; +import { + BooleanIcons, + SaveFieldButtons, +} from './components/index'; import { useTruthyModelValue } from './composables/helpers'; import { useToggleField } from './composables/methods'; -import { useGetIcon } from './composables/icons'; import { useCardContainerClass, useDisplayContainerClass, @@ -158,13 +169,34 @@ const slots = useSlots(); const emit = defineEmits([...inlineEmits]); const injectedOptions = inject(globalOptions, {}); -const iconOptions = inject(Symbol.for('vuetify:icons')); const theme = useTheme(); const props = withDefaults(defineProps(), { ...switchProps }); let settings = reactive({ ...attrs, ...props, ...injectedOptions }); + +const { cancelButtonColor, + cancelButtonSize, + cancelButtonTitle, + cancelButtonVariant, + cancelIcon, + cancelIconColor, + cardField, + closeSiblings, + color, + fieldOnly, + hideCancelIcon, + hideDetails, + loadingIcon, + loadingIconColor, + saveButtonColor, + saveButtonSize, + saveButtonTitle, + saveButtonVariant, + saveIcon, + saveIconColor } = toRefs(settings); + +const disabled = computed(() => props.disabled); const loadingProp = computed(() => props.loading); -const disabledProp = computed(() => props.disabled); const error = ref(false); const showField = ref(false); @@ -187,16 +219,6 @@ watch(() => loadingProp.value, (newVal, oldVal) => { }); -// ------------------------------------------------ Icons // -const theCancelIcon = computed(() => { - return useGetIcon({ - icon: settings.cancelIcon, - iconOptions, - name: 'false', - }); -}); - - // ------------------------------------------------ The displayed value // const displayValue = computed(() => { return modelValue.value == settings.trueValue; @@ -212,7 +234,7 @@ const truthyModelValue = computed(() => useTruthyModelValue({ const inlineFieldsContainerClass = computed(() => useInlineFieldsContainerClass({ cell: settings.cell && !showField.value, density: settings.density, - disabled: disabledProp.value, + disabled: disabled.value, field: 'v-switch', loading: loadingProp.value, loadingWait: settings.loadingWait, @@ -263,6 +285,13 @@ const displayValueStyle = computed(() => useDisplayValueStyles({ const cardContainerStyle = computed(() => fieldCoordinates.value); +// ------------------------------------------------ Key event to cancel/close field // +function closeField() { + error.value = false; + toggleField(); +} + + // ----------------------------------------------- Card Field// const fieldCoordinates = ref(); const inlineFieldsContainer = ref(null); @@ -271,7 +300,7 @@ const cardFieldRef = ref('body'); // ------------------------------------------------ Toggle the field // function toggleField() { - if (disabledProp.value || (settings.loadingWait && loadingProp.value)) { + if (disabled.value || (settings.loadingWait && loadingProp.value)) { return; } @@ -285,7 +314,7 @@ function toggleField() { const response = useToggleField({ attrs, - closeSiblings: settings.closeSiblings, + closeSiblings: closeSiblings.value, fieldOnly: settings.fieldOnly, props, showField: showField.value, @@ -296,7 +325,7 @@ function toggleField() { showField.value = response.showField; timeOpened.value = response.timeOpened; - if (closeSiblingsBus !== null && settings.closeSiblings && showField.value && !settings.fieldOnly) { + if (closeSiblingsBus !== null && closeSiblings.value && showField.value && !settings.fieldOnly) { closeSiblingsBus.emit(response.timeOpened); } } @@ -320,7 +349,7 @@ function saveValue(value: any) { let closeSiblingsBus: unknown | any; let unsubscribeBus: () => void; -if (settings.closeSiblings) { +if (closeSiblings.value) { import('@vueuse/core').then(({ useEventBus }) => { closeSiblingsBus = useEventBus(CloseSiblingsBus); unsubscribeBus = closeSiblingsBus.on(closeSiblingsListener); diff --git a/src/plugin/VInlineTextField.vue b/src/plugin/VInlineTextField.vue index cab9ae6..1980e16 100644 --- a/src/plugin/VInlineTextField.vue +++ b/src/plugin/VInlineTextField.vue @@ -5,7 +5,7 @@ :style="inlineFieldsContainerStyle" >
@@ -29,11 +29,11 @@
@@ -101,7 +99,7 @@
@@ -161,8 +159,31 @@ const iconOptions = inject(Symbol.for('vuetify:icons')); const props = withDefaults(defineProps(), { ...textFieldProps }); let settings = reactive({ ...attrs, ...props, ...injectedOptions }); + +const { cancelButtonColor, + cancelButtonSize, + cancelButtonTitle, + cancelButtonVariant, + cancelIcon, + cancelIconColor, + cardField, + closeSiblings, + color, + fieldOnly, + hideCancelIcon, + hideDetails, + hideSaveIcon, + loadingIcon, + loadingIconColor, + saveButtonColor, + saveButtonSize, + saveButtonTitle, + saveButtonVariant, + saveIcon, + saveIconColor } = toRefs(settings); + +const disabled = computed(() => props.disabled); const loadingProp = computed(() => props.loading); -const disabledProp = computed(() => props.disabled); const empty = ref(false); const error = ref(false); @@ -250,7 +271,7 @@ const bindingCard = computed(() => ({ const inlineFieldsContainerClass = computed(() => useInlineFieldsContainerClass({ cell: settings.cell && !showField.value, density: settings.density, - disabled: disabledProp.value, + disabled: disabled.value, field: 'v-text-field', iconSet: iconOptions?.defaultSet, loading: loadingProp.value, @@ -301,7 +322,7 @@ const cardFieldRef = ref('body'); // ------------------------------------------------ Toggle the field // function toggleField() { - if (disabledProp.value || (settings.loadingWait && loadingProp.value)) { + if (disabled.value || (settings.loadingWait && loadingProp.value)) { return; } @@ -315,7 +336,7 @@ function toggleField() { const response = useToggleField({ attrs, - closeSiblings: settings.closeSiblings, + closeSiblings: closeSiblings.value, fieldOnly: settings.fieldOnly, props, showField, @@ -326,7 +347,7 @@ function toggleField() { showField.value = response.showField; timeOpened.value = response.timeOpened; - if (closeSiblingsBus !== null && settings.closeSiblings && showField.value && !settings.fieldOnly) { + if (closeSiblingsBus !== null && closeSiblings.value && showField.value && !settings.fieldOnly) { closeSiblingsBus.emit(response.timeOpened); } } @@ -383,7 +404,7 @@ function saveValue() { let closeSiblingsBus: unknown | any; let unsubscribeBus: () => void; -if (settings.closeSiblings) { +if (closeSiblings.value) { import('@vueuse/core').then(({ useEventBus }) => { closeSiblingsBus = useEventBus(CloseSiblingsBus); unsubscribeBus = closeSiblingsBus.on(closeSiblingsListener); diff --git a/src/plugin/VInlineTextarea.vue b/src/plugin/VInlineTextarea.vue index a213cad..b99265c 100644 --- a/src/plugin/VInlineTextarea.vue +++ b/src/plugin/VInlineTextarea.vue @@ -5,7 +5,7 @@ :style="inlineFieldsContainerStyle" >
@@ -29,11 +29,11 @@
@@ -100,7 +100,7 @@
@@ -160,8 +160,31 @@ const iconOptions = inject(Symbol.for('vuetify:icons')); const props = withDefaults(defineProps(), { ...textareaProps }); let settings = reactive({ ...attrs, ...props, ...injectedOptions }); + +const { cancelButtonColor, + cancelButtonSize, + cancelButtonTitle, + cancelButtonVariant, + cancelIcon, + cancelIconColor, + cardField, + closeSiblings, + color, + fieldOnly, + hideCancelIcon, + hideDetails, + hideSaveIcon, + loadingIcon, + loadingIconColor, + saveButtonColor, + saveButtonSize, + saveButtonTitle, + saveButtonVariant, + saveIcon, + saveIconColor } = toRefs(settings); + +const disabled = computed(() => props.disabled); const loadingProp = computed(() => props.loading); -const disabledProp = computed(() => props.disabled); const empty = ref(false); const error = ref(false); @@ -248,7 +271,7 @@ const bindingCard = computed(() => ({ const inlineFieldsContainerClass = computed(() => useInlineFieldsContainerClass({ cell: settings.cell && !showField.value, density: settings.density, - disabled: disabledProp.value, + disabled: disabled.value, field: 'v-textarea', iconSet: iconOptions?.defaultSet, loading: loadingProp.value, @@ -299,7 +322,7 @@ const cardFieldRef = ref('body'); // ------------------------------------------------ Toggle the field // function toggleField() { - if (disabledProp.value || (settings.loadingWait && loadingProp.value)) { + if (disabled.value || (settings.loadingWait && loadingProp.value)) { return; } @@ -313,7 +336,7 @@ function toggleField() { const response = useToggleField({ attrs, - closeSiblings: settings.closeSiblings, + closeSiblings: closeSiblings.value, fieldOnly: settings.fieldOnly, props, showField, @@ -324,7 +347,7 @@ function toggleField() { showField.value = response.showField; timeOpened.value = response.timeOpened; - if (closeSiblingsBus !== null && settings.closeSiblings && showField.value && !settings.fieldOnly) { + if (closeSiblingsBus !== null && closeSiblings.value && showField.value && !settings.fieldOnly) { closeSiblingsBus.emit(response.timeOpened); } } @@ -377,7 +400,7 @@ function saveValue() { let closeSiblingsBus: unknown | any; let unsubscribeBus: () => void; -if (settings.closeSiblings) { +if (closeSiblings.value) { import('@vueuse/core').then(({ useEventBus }) => { closeSiblingsBus = useEventBus(CloseSiblingsBus); unsubscribeBus = closeSiblingsBus.on(closeSiblingsListener); diff --git a/src/plugin/components/SaveFieldButtons.vue b/src/plugin/components/SaveFieldButtons.vue index a15d339..c84f606 100644 --- a/src/plugin/components/SaveFieldButtons.vue +++ b/src/plugin/components/SaveFieldButtons.vue @@ -77,6 +77,8 @@ const loading = computed(() => props.loading); const settings = reactive({ ...attrs, ...props }); +console.log({ settings }); + const loadingIconClasses = computed(() => { if (iconOptions?.defaultSet === 'fa') { return 'fa-spin'; diff --git a/src/plugin/index.ts b/src/plugin/index.ts index d842a89..fd40232 100644 --- a/src/plugin/index.ts +++ b/src/plugin/index.ts @@ -11,7 +11,9 @@ import type { SharedProps } from './types'; export const globalOptions = Symbol(); -export function createVInlineFields(options: SharedProps = {}) { +export function createVInlineFields(options: Omit = {}) { return (app: App) => { app.provide(globalOptions, options); app.component('VInlineCheckbox', VInlineCheckbox); diff --git a/src/plugin/types/index.ts b/src/plugin/types/index.ts index f1fd68f..0fd8d77 100644 --- a/src/plugin/types/index.ts +++ b/src/plugin/types/index.ts @@ -2,7 +2,6 @@ /* eslint-disable no-unused-vars */ import type { CSSProperties, - JSXComponent, MaybeRef, Ref, } from 'vue'; @@ -35,7 +34,7 @@ export type GlobalVariant = VSelect['$props']['variant'] | VTextField['$props'][ export type VIconColor = VIcon['$props']['color']; export type VIconSize = VIcon['$props']['size']; -export type VIconValue = string | (string | [path: string, opacity: number])[] | JSXComponent; +export type VIconValue = VIcon['$props']['icon']; export type VBtnColor = VBtn['$props']['color']; export type VBtnSize = VBtn['$props']['size']; @@ -158,7 +157,7 @@ export interface VInlineSelectProps extends Omit { density?: VSwitch['$props']['density']; falseIcon?: VSwitch['$props']['falseIcon']; @@ -228,6 +227,7 @@ export interface DisplayValueProps { underlineStyle?: SharedProps['underlineStyle']; underlineWidth?: SharedProps['underlineWidth']; underlined?: SharedProps['underlined']; + valueColor?: SharedProps['valueColor']; } export interface SaveFieldButtons extends @@ -240,18 +240,18 @@ export interface SaveFieldButtons extends 'error' | 'fieldOnly' | 'hideCancelIcon' | - 'hideSaveIcon' | + 'hideSaveIcon' + >>, + Pick>, - Pick { loading: boolean; }; diff --git a/src/plugin/types/inline-fields.d.ts b/src/plugin/types/inline-fields.d.ts index 013b0be..6817205 100644 --- a/src/plugin/types/inline-fields.d.ts +++ b/src/plugin/types/inline-fields.d.ts @@ -5,11 +5,11 @@ import { VInlineSwitch, VInlineTextField, VInlineTextarea, -} from '../plugin'; +} from '../'; export * from '../index'; -declare module "v-inline-fields" { +declare module "vue" { interface GlobalComponents { VInlineCheckbox: typeof VInlineCheckbox; VInlineCustomField: typeof VInlineCustomField; diff --git a/src/plugin/utils/props.ts b/src/plugin/utils/props.ts index 05105bc..54c5073 100644 --- a/src/plugin/utils/props.ts +++ b/src/plugin/utils/props.ts @@ -36,7 +36,7 @@ export const sharedProps = { displayPrependInnerIconSize: 'x-small', emptyText: 'empty', fieldOnly: false, - hideCancelIcon: true, + hideCancelIcon: false, hideDetails: true, label: '', loading: false, @@ -122,6 +122,7 @@ const selectProps = { const switchProps = { ...sharedProps, ...trueFalseIcons, + ...saveAndLoadingIconProps, ...valueIcons, ...{ falseIcon: '',