From 6f0b4183a11cda41c4e506b4fcc3ba50a6642980 Mon Sep 17 00:00:00 2001 From: WebDevNerdStuff Date: Thu, 23 Nov 2023 15:07:18 -0800 Subject: [PATCH 1/6] Add component, using VInlineSelect as a template --- src/index.ts | 1 + src/plugin/VInlineAutocomplete.vue | 406 +++++++++++++++++++++++++++++ src/plugin/index.ts | 2 + 3 files changed, 409 insertions(+) create mode 100644 src/plugin/VInlineAutocomplete.vue diff --git a/src/index.ts b/src/index.ts index 096225b..ecf7481 100644 --- a/src/index.ts +++ b/src/index.ts @@ -14,6 +14,7 @@ for (const prop in VInlineFields) { component.install = install; } +export const VInlineAutocomplete = VInlineFields.VInlineAutocomplete; export const VInlineCheckbox = VInlineFields.VInlineCheckbox; export const VInlineCustomField = VInlineFields.VInlineCustomField; export const VInlineSelect = VInlineFields.VInlineSelect; diff --git a/src/plugin/VInlineAutocomplete.vue b/src/plugin/VInlineAutocomplete.vue new file mode 100644 index 0000000..d3dbc6e --- /dev/null +++ b/src/plugin/VInlineAutocomplete.vue @@ -0,0 +1,406 @@ + + + + + diff --git a/src/plugin/index.ts b/src/plugin/index.ts index 05c03e2..ba84df5 100644 --- a/src/plugin/index.ts +++ b/src/plugin/index.ts @@ -1,3 +1,4 @@ +import VInlineAutocomplete from './VInlineAutocomplete.vue'; import VInlineCheckbox from './VInlineCheckbox.vue'; import VInlineCustomField from './VInlineCustomField.vue'; import VInlineSelect from './VInlineSelect.vue'; @@ -7,6 +8,7 @@ import VInlineTextarea from './VInlineTextarea.vue'; export default { + VInlineAutocomplete, VInlineCheckbox, VInlineCustomField, VInlineSelect, From 294bccb9bbf1c2772a8281457e927dc2761890a4 Mon Sep 17 00:00:00 2001 From: WebDevNerdStuff Date: Thu, 23 Nov 2023 18:02:19 -0800 Subject: [PATCH 2/6] Adjusting styles --- src/plugin/styles/main.scss | 55 +++++++++++++++++++++++++++++++++++-- 1 file changed, 52 insertions(+), 3 deletions(-) diff --git a/src/plugin/styles/main.scss b/src/plugin/styles/main.scss index fd6461a..01a0dce 100644 --- a/src/plugin/styles/main.scss +++ b/src/plugin/styles/main.scss @@ -6,12 +6,13 @@ --v-inline-fields-density-compact-height: 32px; --v-inline-fields-density-comfortable-height: 40px; --v-inline-fields-grey: #909090; + --v-inline-fields-clearable-top-padding: 3px; } %clearable-icons { .v-field__clearable, .v-input__append { - padding-top: 0 !important; + padding-top: var(--v-inline-fields-clearable-top-padding) !important; .v-icon { font-size: 1rem !important; @@ -154,7 +155,7 @@ padding-bottom: 4px; } - > div { + > div:not(.v-input__details) { height: inherit !important; max-height: inherit !important; } @@ -186,10 +187,15 @@ &__control { @extend %clearable-icons; + .v-field__clearable, + .v-input__append { + --v-inline-fields-clearable-top-padding: 8px; + } + padding-bottom: 8px; } - > div { + > div:not(.v-input__details) { height: inherit !important; max-height: inherit !important; } @@ -239,6 +245,44 @@ .v-inline-fields--save-fields-container { align-items: flex-end; } + + // ----------- Compact // + &-compact { + &-plain, + &-underlined { + .v-input { + &__control { + @extend %clearable-icons; + + .v-field__clearable, + .v-input__append { + --v-inline-fields-clearable-top-padding: 8px; + } + + padding-bottom: 4px; + } + } + } + } + + // ----------- Comfortable // + &-comfortable { + &-plain, + &-underlined { + .v-input { + &__control { + @extend %clearable-icons; + + .v-field__clearable, + .v-input__append { + --v-inline-fields-clearable-top-padding: 16px; + } + + padding-bottom: 8px; + } + } + } + } } // ------------------------ VSelect, VTextarea, VTextField // @@ -289,6 +333,11 @@ padding-bottom: 10px !important; } + .v-input__details { + height: fit-content !important; + min-height: unset; + } + &-compact { .v-input__append, .v-input__prepend, From e25b3cb08d8d6ba31a628a3a8f99f82d36f2db0b Mon Sep 17 00:00:00 2001 From: WebDevNerdStuff Date: Thu, 23 Nov 2023 18:02:35 -0800 Subject: [PATCH 3/6] Add cell props --- src/plugin/VInlineAutocomplete.vue | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/plugin/VInlineAutocomplete.vue b/src/plugin/VInlineAutocomplete.vue index d3dbc6e..f6edb37 100644 --- a/src/plugin/VInlineAutocomplete.vue +++ b/src/plugin/VInlineAutocomplete.vue @@ -249,6 +249,7 @@ watchEffect(() => { // ------------------------------------------------ Class & Styles // const inlineFieldsContainerClass = computed(() => useInlineFieldsContainerClass({ + cell: settings.cell && !showField.value, density: settings.density, disabled: disabledProp.value, field: 'v-select', @@ -260,6 +261,8 @@ const inlineFieldsContainerClass = computed(() => useInlineFieldsContainerClass( })); const displayContainerClass = computed(() => useDisplayContainerClass({ + cell: settings.cell, + cellUnderlineFullWidth: settings.cellUnderlineFullWidth, density: settings.density, field: 'v-select', })); From 2838fec98b7bed01b55e8168c57f8fa2580b04e1 Mon Sep 17 00:00:00 2001 From: WebDevNerdStuff Date: Thu, 23 Nov 2023 18:04:11 -0800 Subject: [PATCH 4/6] Update template --- .../configs/templates/PlaygroundPage.vue | 59 +++++++++++++++++++ 1 file changed, 59 insertions(+) diff --git a/src/playground/configs/templates/PlaygroundPage.vue b/src/playground/configs/templates/PlaygroundPage.vue index b9bd5db..1f6e48d 100644 --- a/src/playground/configs/templates/PlaygroundPage.vue +++ b/src/playground/configs/templates/PlaygroundPage.vue @@ -104,6 +104,58 @@ + +