Skip to content

Commit 8572585

Browse files
webdevnerdstuffwebdevnerdstuff
committed
Add functionality to have clicking cell the trigger to open the field
1 parent 5c5364b commit 8572585

File tree

11 files changed

+88
-11
lines changed

11 files changed

+88
-11
lines changed

‎src/plugin/VInlineCheckbox.vue

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,18 @@
77
<div
88
v-if="(!showField && !settings.fieldOnly) || settings.cardField"
99
:class="displayContainerClass"
10+
@click="settings.cell ? toggleField() : undefined"
1011
>
11-
<div :class="displaySelectionControlClasses">
12+
<div
13+
:class="displaySelectionControlClasses"
14+
@click="!settings.cell ? toggleField() : undefined"
15+
>
1216
<div class="v-selection-control__wrapper">
1317
<div
1418
v-if="icons"
19+
class="v-inline-fields--boolean-icons-container"
1520
:class="displayValueClass"
1621
:style="displayValueStyle"
17-
@click="toggleField"
1822
>
1923
<BooleanIcons
2024
v-model="truthyModelValue"
@@ -32,7 +36,6 @@
3236
class="d-inline-flex align-center justify-center"
3337
:class="displayValueClass"
3438
:style="displayValueStyle"
35-
@click="toggleField"
3639
>
3740
{{ displayValue }}
3841
</div>
@@ -224,6 +227,7 @@ const truthyModelValue = computed(() => useTruthyModelValue({
224227
225228
// ------------------------------------------------ Class & Styles //
226229
const inlineFieldsContainerClass = computed(() => useInlineFieldsContainerClass({
230+
cell: settings.cell && !showField.value,
227231
density: settings.density,
228232
disabled: disabledProp.value,
229233
field: 'v-checkbox',
@@ -233,6 +237,8 @@ const inlineFieldsContainerClass = computed(() => useInlineFieldsContainerClass(
233237
}));
234238
235239
const displayContainerClass = computed(() => useDisplayContainerClass({
240+
cell: settings.cell,
241+
cellUnderlineFullWidth: settings.cellUnderlineFullWidth,
236242
density: settings.density,
237243
field: 'v-checkbox',
238244
}));

‎src/plugin/VInlineCustomField.vue

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -212,6 +212,7 @@ const bindingCard = computed(() => ({
212212
213213
// ------------------------------------------------ Class & Styles //
214214
const inlineFieldsContainerClass = computed(() => useInlineFieldsContainerClass({
215+
cell: settings.cell && !showField.value,
215216
density: settings.density,
216217
disabled: disabledProp.value,
217218
field: 'v-text-field',
@@ -223,6 +224,8 @@ const inlineFieldsContainerClass = computed(() => useInlineFieldsContainerClass(
223224
}));
224225
225226
const displayContainerClass = computed(() => useDisplayContainerClass({
227+
cell: settings.cell,
228+
cellUnderlineFullWidth: settings.cellUnderlineFullWidth,
226229
density: settings.density,
227230
field: 'v-text-field',
228231
}));

‎src/plugin/VInlineSelect.vue

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -249,6 +249,7 @@ watchEffect(() => {
249249
250250
// ------------------------------------------------ Class & Styles //
251251
const inlineFieldsContainerClass = computed(() => useInlineFieldsContainerClass({
252+
cell: settings.cell && !showField.value,
252253
density: settings.density,
253254
disabled: disabledProp.value,
254255
field: 'v-select',
@@ -260,6 +261,8 @@ const inlineFieldsContainerClass = computed(() => useInlineFieldsContainerClass(
260261
}));
261262
262263
const displayContainerClass = computed(() => useDisplayContainerClass({
264+
cell: settings.cell,
265+
cellUnderlineFullWidth: settings.cellUnderlineFullWidth,
263266
density: settings.density,
264267
field: 'v-select',
265268
}));

‎src/plugin/VInlineSwitch.vue

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,18 @@
77
<div
88
v-if="(!showField && !settings.fieldOnly) || settings.cardField"
99
:class="displayContainerClass"
10+
@click="settings.cell ? toggleField() : undefined"
1011
>
11-
<div :class="displaySelectionControlClasses">
12+
<div
13+
:class="displaySelectionControlClasses"
14+
@click="!settings.cell ? toggleField() : undefined"
15+
>
1216
<div class="v-selection-control__wrapper">
1317
<div
1418
v-if="icons"
19+
class="v-inline-fields--boolean-icons-container"
1520
:class="displayValueClass"
1621
:style="displayValueStyle"
17-
@click="toggleField"
1822
>
1923
<BooleanIcons
2024
v-model="truthyModelValue"
@@ -32,7 +36,6 @@
3236
class="d-inline-flex align-center justify-center"
3337
:class="displayValueClass"
3438
:style="displayValueStyle"
35-
@click="toggleField"
3639
>
3740
{{ displayValue }}
3841
</div>
@@ -79,7 +82,7 @@
7982
#append
8083
>
8184
<v-btn
82-
v-if="!settings.fieldOnly || settings.cardField"
85+
v-if="(!settings.fieldOnly || settings.cardField) && !settings.hideCancelIcon"
8386
class="ms-3"
8487
:color="settings.cancelButtonColor"
8588
icon
@@ -205,6 +208,7 @@ const truthyModelValue = computed(() => useTruthyModelValue({
205208
206209
// ------------------------------------------------ Class & Styles //
207210
const inlineFieldsContainerClass = computed(() => useInlineFieldsContainerClass({
211+
cell: settings.cell && !showField.value,
208212
density: settings.density,
209213
disabled: disabledProp.value,
210214
field: 'v-switch',
@@ -214,6 +218,8 @@ const inlineFieldsContainerClass = computed(() => useInlineFieldsContainerClass(
214218
}));
215219
216220
const displayContainerClass = computed(() => useDisplayContainerClass({
221+
cell: settings.cell,
222+
cellUnderlineFullWidth: settings.cellUnderlineFullWidth,
217223
density: settings.density,
218224
field: 'v-switch',
219225
}));

‎src/plugin/VInlineTextField.vue

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -246,6 +246,7 @@ const bindingCard = computed(() => ({
246246
247247
// ------------------------------------------------ Class & Styles //
248248
const inlineFieldsContainerClass = computed(() => useInlineFieldsContainerClass({
249+
cell: settings.cell && !showField.value,
249250
density: settings.density,
250251
disabled: disabledProp.value,
251252
field: 'v-text-field',
@@ -257,6 +258,8 @@ const inlineFieldsContainerClass = computed(() => useInlineFieldsContainerClass(
257258
}));
258259
259260
const displayContainerClass = computed(() => useDisplayContainerClass({
261+
cell: settings.cell,
262+
cellUnderlineFullWidth: settings.cellUnderlineFullWidth,
260263
density: settings.density,
261264
field: 'v-text-field',
262265
}));

‎src/plugin/VInlineTextarea.vue

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -244,6 +244,7 @@ const bindingCard = computed(() => ({
244244
245245
// ------------------------------------------------ Class & Styles //
246246
const inlineFieldsContainerClass = computed(() => useInlineFieldsContainerClass({
247+
cell: settings.cell && !showField.value,
247248
density: settings.density,
248249
disabled: disabledProp.value,
249250
field: 'v-textarea',
@@ -255,6 +256,8 @@ const inlineFieldsContainerClass = computed(() => useInlineFieldsContainerClass(
255256
}));
256257
257258
const displayContainerClass = computed(() => useDisplayContainerClass({
259+
cell: settings.cell,
260+
cellUnderlineFullWidth: settings.cellUnderlineFullWidth,
258261
density: settings.density,
259262
field: 'v-textarea',
260263
}));

‎src/plugin/components/DisplayedValue.vue

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
<template>
2-
<div class="v-inline-fields--display-wrapper">
2+
<div
3+
class="v-inline-fields--display-wrapper"
4+
@click="toggleField"
5+
>
36

47
<!-- Prepend Icon -->
58
<div
@@ -23,7 +26,6 @@
2326
class="d-inline-flex"
2427
:class="displayValueClass"
2528
:style="displayValueStyle"
26-
@click="toggleField"
2729
>
2830
<!-- Prepend Inner Icon -->
2931
<div

‎src/plugin/composables/classes.ts

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,14 @@ import { componentName } from '../utils/globals';
1414

1515
// -------------------------------------------------- Main Container //
1616
export const useInlineFieldsContainerClass: UseInlineFieldsContainerClass = (options) => {
17-
const { field = '', density = '', disabled = false, iconSet = 'mdi', loading = false, loadingWait, tableField = false, variant } = options;
17+
const { cell = false, field = '', density = '', disabled = false, iconSet = 'mdi', loading = false, loadingWait, tableField = false, variant } = options;
1818

1919
const hasDensityAndVariant = density && variant;
2020

2121
return {
2222
[`${componentName}`]: true,
2323
[`${componentName}--container`]: true,
24+
[`${componentName}--container-cell`]: cell,
2425
[`${componentName}--container-disabled`]: unref(disabled),
2526
[`${componentName}--container-table`]: tableField,
2627
[`${componentName}--container-icon-set-${iconSet}`]: true,
@@ -47,9 +48,11 @@ export const useInlineFieldsContainerClass: UseInlineFieldsContainerClass = (opt
4748

4849
// -------------------------------------------------- Display Value Container //
4950
export const useDisplayContainerClass: UseDisplayContainerClass = (options) => {
50-
const { field = '', density = '' } = options;
51+
const { cell = false, cellUnderlineFullWidth = true, field = '', density = '' } = options;
5152

5253
return {
54+
[`${componentName}--display-container-cell`]: cell,
55+
[`${componentName}--display-container-cell-underline-full-width`]: cellUnderlineFullWidth,
5356
[`${componentName}--display-container`]: true,
5457
[`${componentName}--display-wrapper-value`]: true,
5558
[`${field}`]: true,
@@ -76,6 +79,7 @@ export const useDisplaySelectionControlClasses: UseDisplaySelectionControlClass
7679
const { density = '' } = options;
7780

7881
return {
82+
[`${componentName}--selection-control`]: true,
7983
[`v-selection-control--density-${density}`]: true,
8084
};
8185
};

‎src/plugin/styles/main.scss

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,41 @@
2929
align-items: center;
3030
display: flex;
3131
}
32+
33+
// ------------------------ Clickable Cell Displayed Value //
34+
&-cell {
35+
cursor: pointer;
36+
display: block;
37+
max-height: unset !important;
38+
39+
> div {
40+
width: 100%;
41+
}
42+
43+
&-underline-full-width {
44+
.v-inline-fields {
45+
&--display-value {
46+
width: 100%;
47+
}
48+
}
49+
}
50+
51+
.v-inline-fields {
52+
&--selection-control {
53+
.v-inline-fields--display-value {
54+
justify-content: center;
55+
}
56+
}
57+
}
58+
59+
&,
60+
.v-input,
61+
.v-inline-fields--display-wrapper,
62+
.v-selection-control__wrapper {
63+
height: 100% !important;
64+
width: 100%;
65+
}
66+
}
3267
}
3368

3469
// ------------------------ Displayed Value //
@@ -64,6 +99,11 @@
6499
}
65100

66101
&--container {
102+
&-cell {
103+
height: 100%;
104+
width: 100%;
105+
}
106+
67107
// ------------------------------------------------ Disabled //
68108
&-disabled {
69109
.v-inline-fields--display-value {

‎src/plugin/utils/props.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,8 @@ export const sharedProps = {
1616
cardOffsetX: 0,
1717
cardOffsetY: 0,
1818
cardProps: () => ({}) as const,
19+
cell: false,
20+
cellUnderlineFullWidth: true,
1921
closeSiblings: false,
2022
color: 'primary',
2123
density: 'compact' as const,

0 commit comments

Comments
 (0)