Skip to content

Dev #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
May 30, 2023
Merged

Dev #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
57151d3
Cleaning up composites call
webdevnerdstuff May 29, 2023
9c476e3
Added composable types
webdevnerdstuff May 29, 2023
f5b4d64
Updated db
webdevnerdstuff May 29, 2023
e470a64
Adding in some error handling stuff
webdevnerdstuff May 30, 2023
5eadc7b
Updated template
webdevnerdstuff May 30, 2023
e39c1fb
Adding error handling and added truncate functionality
webdevnerdstuff May 30, 2023
68e9afe
Added type
webdevnerdstuff May 30, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
102 changes: 97 additions & 5 deletions src/playground/configs/PlaygroundPage.template.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,20 @@
<VInlineSwitch
v-model="item.raw.active"
api-route="api/posts"
:cancel-button-color="componentOptions.cancelButtonColor"
:cancel-button-variant="componentOptions.cancelButtonVariant"
:cancel-icon="componentOptions.cancelIcon"
:cancel-icon-color="componentOptions.cancelIconColor"
:cancel-icon-text="componentOptions.cancelIconText"
:close-siblings="componentOptions.closeSiblings"
:color="componentOptions.color"
:disabled="componentOptions.disabled"
:do-not-save="false"
:do-not-save="componentOptions.doNotSave"
:field-only="componentOptions.fieldOnly"
:icon-false="componentOptions.iconFalse"
:icon-false-title="componentOptions.iconFalseTitle"
:icon-true="componentOptions.iconTrue"
:icon-true-title="componentOptions.iconTrueTitle"
:item="item"
:label="componentOptions.label"
name="active"
Expand All @@ -27,16 +37,22 @@
:underlined="componentOptions.underlined"
@error="showError = $event"
@loading="loading = $event"
@update="updatedValue($event, 'switch')"
/>
</div>
</template>
<template #[`item.userId`]="{ item }">
<VInlineSelect
v-model="item.raw.user"
api-route="api/posts"
:cancel-button-color="componentOptions.cancelButtonColor"
:cancel-button-variant="componentOptions.cancelButtonVariant"
:cancel-icon-color="componentOptions.cancelIconColor"
:cancel-icon-text="componentOptions.cancelIconText"
:close-siblings="componentOptions.closeSiblings"
:color="componentOptions.color"
:disabled="componentOptions.disabled"
:do-not-save="false"
:do-not-save="componentOptions.doNotSave"
:empty-text="componentOptions.emptyText"
:field-only="componentOptions.fieldOnly"
:hide-details="componentOptions.hideDetails"
Expand All @@ -48,62 +64,101 @@
:label="componentOptions.label"
name="active"
:return-object="true"
:save-button-color="componentOptions.saveButtonColor"
:save-icon="componentOptions.saveIcon"
:save-icon-color="componentOptions.saveIconColor"
:save-icon-text="componentOptions.saveIconText"
:underline-color="componentOptions.underlineColor"
:underline-style="componentOptions.underlineStyle"
:underline-width="componentOptions.underlineWidth"
:underlined="componentOptions.underlined"
@error="showError = $event"
@loading="loading = $event"
@update="updatedValue($event, 'select')"
>
</VInlineSelect>
</template>

<template #[`item.title`]="{ item }">
<VInlineTextField
v-model="item.raw.title"
api-route="api/posts"
:cancel-button-color="componentOptions.cancelButtonColor"
:cancel-button-variant="componentOptions.cancelButtonVariant"
:cancel-icon-color="componentOptions.cancelIconColor"
:cancel-icon-text="componentOptions.cancelIconText"
:close-siblings="componentOptions.closeSiblings"
:color="componentOptions.color"
:disabled="componentOptions.disabled"
:do-not-save="false"
:do-not-save="componentOptions.doNotSave"
:field-only="componentOptions.fieldOnly"
:hide-details="componentOptions.hideDetails"
:item="item"
:label="componentOptions.label"
name="title"
required
:save-button-color="componentOptions.saveButtonColor"
:save-icon-color="componentOptions.saveIconColor"
:save-icon-text="componentOptions.saveIconText"
:truncate-length="componentOptions.truncateTextFieldLength"
:underline-color="componentOptions.underlineColor"
:underline-style="componentOptions.underlineStyle"
:underline-width="componentOptions.underlineWidth"
:underlined="componentOptions.underlined"
@error="showError = $event"
@loading="loading = $event"
@update="updatedValue($event, 'text-field')"
/>
</template>

<template #[`item.body`]="{ item }">
<VInlineTextarea
v-model="item.raw.body"
api-route="api/posts"
:cancel-button-color="componentOptions.cancelButtonColor"
:cancel-button-variant="componentOptions.cancelButtonVariant"
:cancel-icon-color="componentOptions.cancelIconColor"
:cancel-icon-text="componentOptions.cancelIconText"
:close-siblings="componentOptions.closeSiblings"
:color="componentOptions.color"
:disabled="componentOptions.disabled"
:do-not-save="false"
:do-not-save="componentOptions.doNotSave"
:field-only="componentOptions.fieldOnly"
:hide-details="false"
:item="item"
:label="componentOptions.label"
name="body"
:rules="[componentOptions.rules.required, componentOptions.rules.minLength]"
:save-button-color="componentOptions.saveButtonColor"
:save-icon-color="componentOptions.saveIconColor"
:save-icon-text="componentOptions.saveIconText"
:truncate-length="componentOptions.truncateTextareaLength"
:underline-color="componentOptions.underlineColor"
:underline-style="componentOptions.underlineStyle"
:underline-width="componentOptions.underlineWidth"
:underlined="componentOptions.underlined"
@error="showError = $event"
@loading="loading = $event"
@update="updatedValue($event, 'textarea')"
/>
</template>

<template #[`item.reviewed`]="{ item }">
<div class="d-flex flex-align-center">
<VInlineCheckbox
v-model="item.raw.reviewed"
api-route="api/posts"
:cancel-button-color="componentOptions.cancelButtonColor"
:cancel-button-variant="componentOptions.cancelButtonVariant"
:cancel-icon-color="componentOptions.cancelIconColor"
:cancel-icon-text="componentOptions.cancelIconText"
:close-siblings="componentOptions.closeSiblings"
:color="componentOptions.color"
:disabled="componentOptions.disabled"
:do-not-save="false"
:do-not-save="componentOptions.doNotSave"
:field-only="componentOptions.fieldOnly"
:icon-false-title="componentOptions.iconFalseTitle"
:icon-true-title="componentOptions.iconTrueTitle"
:item="item"
name="reviewed"
:underline-color="componentOptions.underlineColor"
Expand All @@ -112,6 +167,7 @@
:underlined="componentOptions.underlined"
@error="showError = $event"
@loading="loading = $event"
@update="updatedValue($event, 'checkbox')"
/>
</div>
</template>
Expand Down Expand Up @@ -146,13 +202,36 @@ const tableOptions = reactive({
});

const componentOptions = reactive({
cancelButtonColor: 'default',
cancelButtonVariant: 'text',
cancelIcon: undefined,
cancelIconColor: 'default',
cancelIconText: 'Cancel',
closeSiblings: true,
color: 'primary',
disabled: false,
doNotSave: false,
emptyText: 'empty',
fieldOnly: false,
hideDetails: true,
hideSelected: true,
iconFalse: undefined,
iconFalseTitle: undefined,
iconTrue: undefined,
iconTrueTitle: undefined,
label: '',
rules: {
minLength(value) {
return value?.length >= 5 || 'Min 5 characters';
},
required: value => !!value || 'Field is required',
},
saveButtonColor: 'default',
saveIcon: undefined,
saveIconColor: 'primary',
saveIconText: 'Save',
truncateTextFieldLength: 25,
truncateTextareaLength: 75,
underlineColor: 'primary',
underlineStyle: 'dotted',
underlineWidth: '1px',
Expand Down Expand Up @@ -217,6 +296,19 @@ function getUsers() {
users.value = [...json.users];
});
};

/**
* ? You can use this function to update the value in the database.
* ? Instead of using the internal axios call.
*
* @param {any} val
* @param {string} field
*/
// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
function updatedValue(val, field) {
// Save updated values
// console.log('updatedValue', val, field);
}
</script>

<style lang="scss" scoped>
Expand Down
36 changes: 18 additions & 18 deletions src/playground/configs/database.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,18 +98,18 @@
},
{
"id": 5,
"name": "Chelsey Dietrich",
"name": "Robert Ross",
"active": false,
"username": "Kamren",
"email": "[email protected]",
"username": "joyofpainting",
"email": "[email protected]",
"address": {
"street": "Skiles Walks",
"suite": "Suite 351",
"city": "Roscoeview",
"zipcode": "33263",
"street": "400 Woodlawn Rd",
"suite": "537",
"city": "Gotha",
"zipcode": "34734",
"geo": {
"lat": "-31.8129",
"lng": "62.5342"
"lat": "28.538320",
"lng": "-81.5097323"
}
},
"phone": "(254)954-1289",
Expand Down Expand Up @@ -243,7 +243,7 @@
],
"posts": [
{
"userId": null,
"userId": 1,
"id": 1,
"active": null,
"title": null,
Expand All @@ -259,63 +259,63 @@
"reviewed": false
},
{
"userId": 1,
"userId": 4,
"id": 3,
"active": true,
"title": "ea molestias quasi exercitationem repellat qui ipsa sit aut",
"body": "et iusto sed quo iure\nvoluptatem occaecati omnis eligendi aut ad\nvoluptatem doloribus vel accusantium quis pariatur\nmolestiae porro eius odio et labore et velit aut",
"reviewed": true
},
{
"userId": 1,
"userId": 2,
"id": 4,
"active": true,
"title": "eum et est occaecati",
"body": "ullam et saepe reiciendis voluptatem adipisci\nsit amet autem assumenda provident rerum culpa\nquis hic commodi nesciunt rem tenetur doloremque ipsam iure\nquis sunt voluptatem rerum illo velit",
"reviewed": true
},
{
"userId": 1,
"userId": 10,
"id": 5,
"active": false,
"title": "nesciunt quas odio",
"body": "repudiandae veniam quaerat sunt sed\nalias aut fugiat sit autem sed est\nvoluptatem omnis possimus esse voluptatibus quis\nest aut tenetur dolor neque",
"reviewed": false
},
{
"userId": 1,
"userId": 5,
"id": 6,
"active": false,
"title": "dolorem eum magni eos aperiam quia",
"body": "ut aspernatur corporis harum nihil quis provident sequi\nmollitia nobis aliquid molestiae\nperspiciatis et ea nemo ab reprehenderit accusantium quas\nvoluptate dolores velit et doloremque molestiae",
"reviewed": false
},
{
"userId": 1,
"userId": 8,
"id": 7,
"active": true,
"title": "magnam facilis autem",
"body": "dolore placeat quibusdam ea quo vitae\nmagni quis enim qui quis quo nemo aut saepe\nquidem repellat excepturi ut quia\nsunt ut sequi eos ea sed quas",
"reviewed": true
},
{
"userId": 1,
"userId": 3,
"id": 8,
"active": true,
"title": "dolorem dolore est ipsam",
"body": "dignissimos aperiam dolorem qui eum\nfacilis quibusdam animi sint suscipit qui sint possimus cum\nquaerat magni maiores excepturi\nipsam ut commodi dolor voluptatum modi aut vitae",
"reviewed": true
},
{
"userId": 1,
"userId": 8,
"id": 9,
"active": true,
"title": "nesciunt iure omnis dolorem tempora et accusantium",
"body": "consectetur animi nesciunt iure dolore\nenim quia ad\nveniam autem ut quam aut nobis\net est aut quod aut provident voluptas autem voluptas",
"reviewed": true
},
{
"userId": 1,
"userId": 7,
"id": 10,
"active": true,
"title": "optio molestias id quia eum",
Expand Down
42 changes: 24 additions & 18 deletions src/plugin/VInlineCheckbox.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,17 +134,19 @@ const fieldContainerClass = computed(() => useFieldContainerClass('checkbox', sh
const fieldDisplayClass = computed(() => useDisplayContainerClass(
'checkbox',
settings.valueColor,
settings.disabled,
error.value,
));
const fieldDisplayStyle = computed(() => useFieldDisplayStyles(
settings.underlineColor,
settings.underlineStyle,
settings.underlineWidth,
settings.color,
error.value,
settings.underlined,
{
disabled: settings.disabled,
error,
}
));
const fieldDisplayStyle = computed(() => useFieldDisplayStyles({
color: settings.color,
error,
underlineColor: settings.underlineColor,
underlineStyle: settings.underlineStyle,
underlineWidth: settings.underlineWidth,
underlined: settings.underlined,
}));


// ------------------------------------------------ Toggle the field //
Expand All @@ -153,15 +155,14 @@ function toggleField() {
return;
}

const response = useToggleField(
settings.item.id as number,
showField.value,
const response = useToggleField({
attrs,
closeSiblings: settings.closeSiblings,
fieldOnly: settings.fieldOnly,
props,
timeOpened.value,
settings.closeSiblings,
settings.fieldOnly,
);
showField,
timeOpened: timeOpened.value,
});

settings = { ...settings, ...response.settings };
showField.value = response.showField;
Expand All @@ -180,7 +181,12 @@ function saveValue(value: undefined) {
loading.value = true;
emit('loading', loading.value);

useSaveValue(settings, emit as keyof UseSaveValue, settings.name, value as keyof UseSaveValue)
useSaveValue({
emit: emit as keyof UseSaveValue,
name: settings.name,
settings,
value: value as keyof UseSaveValue,
})
.then((response) => {
error.value = response?.error as boolean ?? false;
loading.value = false;
Expand Down
Loading