From baffe8c673334f698437b60fc97ce9b8c3867eec Mon Sep 17 00:00:00 2001 From: Claudio Brogliato Date: Tue, 1 Jun 2021 16:54:06 +0200 Subject: [PATCH 1/2] Added VDockableCard VCardDock and VSlottedSelect --- src/components/VCardDock.vue | 22 ++++ src/components/VDockableCard.vue | 53 ++++++++ src/components/VSlottedSelect.vue | 124 ++++++++++++++++++ src/components/VSlottedSelectItem.vue | 25 ++++ src/styleguide/Styleguide.vue | 178 +++++++++++++++++++++++++- 5 files changed, 401 insertions(+), 1 deletion(-) create mode 100644 src/components/VCardDock.vue create mode 100644 src/components/VDockableCard.vue create mode 100644 src/components/VSlottedSelect.vue create mode 100644 src/components/VSlottedSelectItem.vue diff --git a/src/components/VCardDock.vue b/src/components/VCardDock.vue new file mode 100644 index 0000000..44311ec --- /dev/null +++ b/src/components/VCardDock.vue @@ -0,0 +1,22 @@ + + diff --git a/src/components/VDockableCard.vue b/src/components/VDockableCard.vue new file mode 100644 index 0000000..2d67e43 --- /dev/null +++ b/src/components/VDockableCard.vue @@ -0,0 +1,53 @@ + + + diff --git a/src/components/VSlottedSelect.vue b/src/components/VSlottedSelect.vue new file mode 100644 index 0000000..f1bcc03 --- /dev/null +++ b/src/components/VSlottedSelect.vue @@ -0,0 +1,124 @@ + + + diff --git a/src/components/VSlottedSelectItem.vue b/src/components/VSlottedSelectItem.vue new file mode 100644 index 0000000..19ac481 --- /dev/null +++ b/src/components/VSlottedSelectItem.vue @@ -0,0 +1,25 @@ + + + diff --git a/src/styleguide/Styleguide.vue b/src/styleguide/Styleguide.vue index 0586cb7..5c237cf 100644 --- a/src/styleguide/Styleguide.vue +++ b/src/styleguide/Styleguide.vue @@ -519,6 +519,129 @@ 
<v-modal-video title='title' :sources="[urls]" size="xl"/>
+
+ +
+

VDockableCard

+
+ +
+ 
<v-dockable-card></v-dockable-card>
+
VDockableCard with title, body slot and footer slot
+
+ + + + +
+ 
<v-dockable-card title="My title" ></v-dockable-card>
+
VDockableCard with header slot, body slot and footer slot
+
+ + + + + +
+ 
<v-dockable-card>…</v-dockable-card>
+
Headless VDockableCard
+
+ + +
+ 
<v-dockable-card :showHeader="false"></v-dockable-card>
+
+
+
+

VCardDock

+
Single column (slot leftCol)
+
+ + + +
+ 
<v-card-dock><template v-slot:leftCol>…</template></v-card-dock>
+
Two columns (also with slot rightCol)
+
+ + + + +
+ 
<v-card-dock><template v-slot:leftCol>…</template><template v-slot:rightCol>…</template></v-card-dock>
+
+
+
+

VSlottedSelect

+
+ + + + +
+ 
<v-slotted-select label="My awesome label" :selected="..." :items="..."><template v-slot:selected="{ selected }">…</template><template v-slot:item="{ item }"></v-slotted-select>
+
VSlottedSelect with groups (items template uses slotted-select-item component)
+
+ + + + + +
+ 
<v-slotted-select :selected="..." :groups="..."><template v-slot:selected="{ selected }">…</template><template v-slot:group-header="{ group }">…</template><template v-slot:item="{ item }">…</template></v-slotted-select>
+
VSlottedSelect with groups templates are simple p tags...
+
+ + + + + +
+ 
<v-slotted-select :selected="..." :groups="..."><template v-slot:selected="{ selected }">…</template><template v-slot:group-header="{ group }">…</template><template v-slot:item="{ item }">…</template></v-slotted-select>
@@ -554,6 +677,9 @@
  • checkVAudio
  • VVideo
  • VModalVideo
    • +
  • VDockableCard
    • +
  • VCardDock
    • +
  • VSlottedSelect
    • @@ -591,6 +717,10 @@ import VComparisonGroupSelect from '../components/VComparisonGroupSelect.vue'; import VAudio from '../components/VAudio.vue'; import VVideo from '../components/VVideo.vue'; import VModalVideo from '../components/VModalVideo.vue'; +import VDockableCard from '../components/VDockableCard.vue'; +import VCardDock from '../components/VCardDock.vue'; +import VSlottedSelect, { SlottedSelectGroup, SlottedSelectItem } from '../components/VSlottedSelect.vue'; +import VSlottedSelectItem from '../components/VSlottedSelectItem.vue'; import { Component, Vue } from 'vue-property-decorator'; @@ -622,7 +752,11 @@ import { Component, Vue } from 'vue-property-decorator'; VComparisonGroupSelect, VAudio, VVideo, - VModalVideo + VModalVideo, + VDockableCard, + VCardDock, + VSlottedSelect, + VSlottedSelectItem } }) export default class Styleguide extends Vue { @@ -796,6 +930,48 @@ export default class Styleguide extends Vue { gItems: EntryGroupItem[] = []; + slottedModel: SlottedSelectItem = { + id: '-', + text: 'Select me', + icon: 'play', + additional: 'nothing serious' + }; + + slottedItems: SlottedSelectItem[] = [ + { + id: '-', + text: 'Select me', + icon: 'play', + additional: 'nothing serious' + }, + { + id: 'a', + icon: 'audio', + text: 'Audio', + additional: 'specimen' + } + ]; + + slottedGroups: SlottedSelectGroup[] = [ + { + id: 'g-a', + name: 'GROUP A', + items: this.slottedItems + }, + { + id: 'g-b', + name: 'GROUP B', + items: [ + { + id: 'c', + icon: 'timer', + text: 'I don\'t have additionals', + additional: '' + } + ] + } + ]; + public loadGroups(payload: any): Promise { return Promise.resolve(this.gItems); } From d46583956fb8898d23627f6fa91cf7fadf1b7961 Mon Sep 17 00:00:00 2001 From: Claudio Brogliato Date: Tue, 1 Jun 2021 18:04:26 +0200 Subject: [PATCH 2/2] Fixed as of merge request --- src/components/VAudioElementWrapper.vue | 2 +- src/components/VCardDock.vue | 3 ++- src/components/VDockableCard.vue | 10 ++++++---- src/components/VSlottedSelect.vue | 2 ++ src/components/VSlottedSelectItem.vue | 4 +++- 5 files changed, 14 insertions(+), 7 deletions(-) diff --git a/src/components/VAudioElementWrapper.vue b/src/components/VAudioElementWrapper.vue index 3d418ee..b7598fe 100644 --- a/src/components/VAudioElementWrapper.vue +++ b/src/components/VAudioElementWrapper.vue @@ -17,7 +17,7 @@ const TIMEOUT_MESSAGE = 'timed out'; const CAN_PLAY_MESSAGE = 'can play'; @Component({ }) -export default class AudioElementWrapper extends Vue { +export default class VAudioElementWrapper extends Vue { @Prop({ default: false }) canPause!: boolean; @Prop({ default: 1000 }) timeOut!: number; @Prop({ default: () => [] }) sources!: string[]; diff --git a/src/components/VCardDock.vue b/src/components/VCardDock.vue index 44311ec..03f4a4c 100644 --- a/src/components/VCardDock.vue +++ b/src/components/VCardDock.vue @@ -10,11 +10,12 @@ + +