Fixing global options

Author: webdevnerdstuff

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');

src/playground/configs/templates/PlaygroundPage.vue

@@ -6,13 +6,6 @@
 		>
 			Toggle Disabled: {{ componentOptions.disabled }}
 		</v-btn>
-
-		<v-btn
-			class="me-2"
-			@click="componentOptions.open = !componentOptions.open"
-		>
-			Toggle Open: {{ componentOptions.open }}
-		</v-btn>
 	</v-col>
 
 	<v-col cols="12">
@@ -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<Props>({
 	autoSelectFirst: true,
@@ -426,8 +412,10 @@ const componentOptions = reactive<Props>({
 	// 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<Props>({
 	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<Headers>([
 ]);
 
 
+// ? Changes the type of field the table uses //
+const isCardField = ref<boolean>(false);
+const cardFieldState = computed<boolean>(() => 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;

src/plugin/VInlineCheckbox.vue

@@ -5,7 +5,7 @@
 		:style="inlineFieldsContainerStyle"
 	>
 		<div
-			v-if="(!showField && !settings.fieldOnly) || settings.cardField"
+			v-if="(!showField && !settings.fieldOnly) || cardField"
 			:class="displayContainerClass"
 			@click="settings.cell ? toggleField() : undefined"
 		>
@@ -44,22 +44,22 @@
 		</div>
 
 		<div
-			v-if="showField || settings.fieldOnly || settings.cardField"
+			v-if="showField || fieldOnly || cardField"
 			:class="fieldContainerClass"
 		>
 			<Teleport
-				:disabled="!settings.cardField"
+				:disabled="!cardField"
 				:to="cardFieldRef"
 			>
 				<v-checkbox
 					v-bind="bindingSettings"
-					:color="settings.color"
+					:color="color"
 					:density="settings.density"
-					:disabled="loadingProp || disabledProp"
+					:disabled="loadingProp || disabled"
 					:error="error"
 					:false-icon="theFalseIcon"
 					:false-value="settings.falseValue"
-					:hide-details="settings.hideDetails"
+					:hide-details="hideDetails"
 					:label="settings.label"
 					:model-value="truthyModelValue"
 					:true-icon="theTrueIcon"
@@ -82,25 +82,25 @@
 						#append
 					>
 						<SaveFieldButtons
-							:cancel-button-color="settings.cancelButtonColor"
-							:cancel-button-size="settings.cancelButtonSize"
-							:cancel-button-title="settings.cancelButtonTitle"
-							:cancel-button-variant="settings.cancelButtonVariant"
-							:cancel-icon="settings.cancelIcon"
-							:cancel-icon-color="settings.cancelIconColor"
+							:cancel-button-color="cancelButtonColor"
+							:cancel-button-size="cancelButtonSize"
+							:cancel-button-title="cancelButtonTitle"
+							:cancel-button-variant="cancelButtonVariant"
+							:cancel-icon="cancelIcon"
+							:cancel-icon-color="cancelIconColor"
 							:error="error"
-							:field-only="settings.fieldOnly"
-							:hide-cancel-icon="settings.hideCancelIcon"
+							:field-only="fieldOnly"
+							:hide-cancel-icon="hideCancelIcon"
 							:hide-save-icon="true"
 							:loading="loadingProp"
-							:loading-icon="settings.loadingIcon"
-							:loading-icon-color="settings.loadingIconColor"
-							:save-button-color="settings.saveButtonColor"
-							:save-button-size="settings.saveButtonSize"
-							:save-button-title="settings.saveButtonTitle"
-							:save-button-variant="settings.saveButtonVariant"
-							:save-icon="settings.saveIcon"
-							:save-icon-color="settings.saveIconColor"
+							: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"
 						/>
@@ -111,7 +111,7 @@
 
 		<!-- Card Field-->
 		<div
-			v-if="settings.cardField"
+			v-if="cardField"
 			:class="cardContainerClass"
 			:style="cardContainerStyle"
 		>
@@ -175,8 +175,30 @@ const theme = useTheme();
 
 const props = withDefaults(defineProps<VInlineCheckboxProps>(), { ...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<boolean>(false);
 const showField = ref<boolean>(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);