Skip to content

Commit

Permalink
Fixing global options
Browse files Browse the repository at this point in the history
  • Loading branch information
@webdevnerdstuff
webdevnerdstuff committed Dec 7, 2023
1 parent 5e7849a commit 88fac0c
Show file tree
Hide file tree
Showing 13 changed files with 392 additions and 242 deletions.
42 changes: 27 additions & 15 deletions src/playground/configs/playground.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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');
40 changes: 18 additions & 22 deletions src/playground/configs/templates/PlaygroundPage.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand All @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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 //
Expand All @@ -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,
Expand Down Expand Up @@ -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,
Expand All @@ -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';
Expand Down Expand Up @@ -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;
Expand Down
80 changes: 51 additions & 29 deletions src/plugin/VInlineCheckbox.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
>
Expand Down Expand Up @@ -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"
Expand All @@ -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"
/>
Expand All @@ -111,7 +111,7 @@

<!-- Card Field-->
<div
v-if="settings.cardField"
v-if="cardField"
:class="cardContainerClass"
:style="cardContainerStyle"
>
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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;
}
Expand All @@ -326,7 +348,7 @@ function toggleField() {
const response = useToggleField({
attrs,
closeSiblings: settings.closeSiblings,
closeSiblings: closeSiblings.value,
fieldOnly: settings.fieldOnly,
props,
showField,
Expand All @@ -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);
}
}
Expand All @@ -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);
Expand Down
Loading

0 comments on commit 88fac0c

Please sign in to comment.