Skip to content

Commit 005b592

Browse files
webdevnerdstuffwebdevnerdstuff
committed
Merge branch 'cell' into dev
2 parents 438d881 + 8572585 commit 005b592

File tree

13 files changed

+124
-11
lines changed

13 files changed

+124
-11
lines changed

‎src/playground/configs/templates/PlaygroundPage.vue‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
11
<template>
2+
<v-col cols="12">
3+
<v-btn @click="componentOptions.disabled = !componentOptions.disabled">Toggle Disabled: {{ componentOptions.disabled
4+
}}</v-btn>
5+
</v-col>
26
<v-col cols="12">
37
<v-card elevation="5">
48
<v-data-table
@@ -22,11 +26,14 @@
2226
:card-offset-x="componentOptions.cardOffsetX"
2327
:card-offset-y="componentOptions.cardOffsetY"
2428
:card-props="componentOptions.cardProps"
29+
:cell="componentOptions.cell"
30+
:cell-underline-full-width="componentOptions.cellUnderlineFullWidth"
2531
:close-siblings="componentOptions.closeSiblings"
2632
:color="componentOptions.color"
2733
:density="componentOptions.density"
2834
:disabled="componentOptions.disabled"
2935
:field-only="componentOptions.fieldOnly"
36+
:hide-cancel-icon="componentOptions.hideCancelIcon"
3037
:icon-false="componentOptions.iconFalse"
3138
:icon-false-title="componentOptions.iconFalseTitle"
3239
:icon-true="componentOptions.iconTrue"
@@ -56,6 +63,8 @@
5663
:card-offset-x="componentOptions.cardOffsetX"
5764
:card-offset-y="componentOptions.cardOffsetY"
5865
:card-props="componentOptions.cardProps"
66+
:cell="componentOptions.cell"
67+
:cell-underline-full-width="componentOptions.cellUnderlineFullWidth"
5968
:clearable="componentOptions.clearable"
6069
:close-siblings="componentOptions.closeSiblings"
6170
:color="componentOptions.color"
@@ -67,6 +76,7 @@
6776
:display-append-inner-icon-color="componentOptions.displayAppendInnerIconColor"
6877
:empty-text="componentOptions.emptyText"
6978
:field-only="componentOptions.fieldOnly"
79+
:hide-cancel-icon="componentOptions.hideCancelIcon"
7080
:hide-details="componentOptions.hideDetails"
7181
:hide-selected="componentOptions.hideSelected"
7282
:item="item"
@@ -105,12 +115,15 @@
105115
:card-offset-x="componentOptions.cardOffsetX"
106116
:card-offset-y="componentOptions.cardOffsetY"
107117
:card-props="componentOptions.cardProps"
118+
:cell="componentOptions.cell"
119+
:cell-underline-full-width="componentOptions.cellUnderlineFullWidth"
108120
:clearable="componentOptions.clearable"
109121
:close-siblings="componentOptions.closeSiblings"
110122
:color="componentOptions.color"
111123
:density="componentOptions.density"
112124
:disabled="componentOptions.disabled"
113125
:field-only="componentOptions.fieldOnly"
126+
:hide-cancel-icon="componentOptions.hideCancelIcon"
114127
:hide-details="componentOptions.hideDetails"
115128
:item="item"
116129
:label="componentOptions.label"
@@ -147,6 +160,8 @@
147160
:card-offset-x="componentOptions.cardOffsetX"
148161
:card-offset-y="componentOptions.cardOffsetY"
149162
:card-props="componentOptions.cardProps"
163+
:cell="componentOptions.cell"
164+
:cell-underline-full-width="componentOptions.cellUnderlineFullWidth"
150165
:close-siblings="componentOptions.closeSiblings"
151166
:color="componentOptions.color"
152167
:density="componentOptions.density"
@@ -156,6 +171,7 @@
156171
:display-append-inner-icon="componentOptions.displayAppendInnerIcon"
157172
:display-append-inner-icon-color="componentOptions.displayAppendInnerIconColor"
158173
:field-only="componentOptions.fieldOnly"
174+
:hide-cancel-icon="componentOptions.hideCancelIcon"
159175
:hide-details="componentOptions.hideDetails"
160176
:item="item"
161177
:label="componentOptions.label"
@@ -186,6 +202,8 @@
186202
:card-offset-x="componentOptions.cardOffsetX"
187203
:card-offset-y="componentOptions.cardOffsetY"
188204
:card-props="componentOptions.cardProps"
205+
:cell="componentOptions.cell"
206+
:cell-underline-full-width="componentOptions.cellUnderlineFullWidth"
189207
:loading="item.loading"
190208
@update="updatedValue(item, 'range')"
191209
>
@@ -211,11 +229,14 @@
211229
:card-offset-x="componentOptions.cardOffsetX"
212230
:card-offset-y="componentOptions.cardOffsetY"
213231
:card-props="componentOptions.cardProps"
232+
:cell="componentOptions.cell"
233+
:cell-underline-full-width="componentOptions.cellUnderlineFullWidth"
214234
:close-siblings="componentOptions.closeSiblings"
215235
:color="componentOptions.color"
216236
:density="componentOptions.density"
217237
:disabled="componentOptions.disabled"
218238
:field-only="componentOptions.fieldOnly"
239+
:hide-cancel-icon="componentOptions.hideCancelIcon"
219240
:icon-false-title="componentOptions.iconFalseTitle"
220241
:icon-true-title="componentOptions.iconTrueTitle"
221242
:item="item"
@@ -299,6 +320,8 @@ const componentOptions = reactive({
299320
cardOffsetX: 0,
300321
cardOffsetY: 0,
301322
cardProps: {},
323+
cell: false,
324+
cellUnderlineFullWidth: true,
302325
clearable: false,
303326
closeSiblings: true,
304327
color: 'primary',
@@ -318,6 +341,7 @@ const componentOptions = reactive({
318341
// displayPrependInnerIconSize: 'x-small',
319342
emptyText: 'empty',
320343
fieldOnly: false,
344+
hideCancelIcon: false,
321345
hideDetails: true,
322346
hideSelected: false,
323347
iconFalse: undefined,

‎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 {

0 commit comments

Comments
 (0)