From 51ff8b1f41cd848033cc76772feb2ccc13fc74ac Mon Sep 17 00:00:00 2001
From: Daniel Terletzkiy <daniel.terletzkiy@check24.de>
Date: Thu, 4 Aug 2022 12:01:51 +0200
Subject: [PATCH] VEZ-3 added menus and popovers

---
 src/components/button/DButton.vue   |  2 +-
 src/components/list/DList.vue       | 26 +++++++--
 src/components/list/DListItem.vue   |  8 +--
 src/components/menu/DSelectMenu.vue | 27 ++++++----
 src/components/tooltip/DTooltip.vue | 83 ++++++++++++++---------------
 src/stories/DMenu.stories.js        | 68 +++++++++++++++++++++++
 src/stories/DTooltip.stories.js     | 31 +++++++----
 7 files changed, 171 insertions(+), 74 deletions(-)
 create mode 100644 src/stories/DMenu.stories.js

diff --git a/src/components/button/DButton.vue b/src/components/button/DButton.vue
index d5137ed..fad5d88 100644
--- a/src/components/button/DButton.vue
+++ b/src/components/button/DButton.vue
@@ -1,7 +1,7 @@
 <template>
   <DWrapper root-tag="button" :classes="['d-btn', {filled, block, glow, size}]"
             v-bind="{...$props, ...$attrs}"
-            @click="$emit('click')" :glow="false">
+            @click.capture="$emit('click')" :glow="false">
     <span class="d-btn__content" :style="{color: filled ? $vuelize.getColorContrast(color,tint):''}" v-ripple>
       <span class="prefix" v-if="!!$slots.prefix">
         <slot name="prefix"></slot>
diff --git a/src/components/list/DList.vue b/src/components/list/DList.vue
index 280fdbe..b0e47a2 100644
--- a/src/components/list/DList.vue
+++ b/src/components/list/DList.vue
@@ -13,17 +13,37 @@ export default {
 <script setup lang="ts">
 import defaultProps from "../../mixins/DefaultProps";
 import DWrapper from "../DWrapper.vue";
-import {provide} from "vue";
+import {provide, unref} from "vue";
 
 const emits = defineEmits(['update:modelValue']);
 const props = defineProps({
   modelValue: [Number, String, Array],
   filled: {type: Boolean},
+  multiple: {type: Boolean},
+  mandatory: {type: Boolean},
   ...defaultProps
 })
 
-provide('updateList', (key: string | number) => {
-  emits("update:modelValue", key);
+provide('updateList', (key: number) => {
+  console.log('props.multiple:', props.multiple, 'props.modelValue:', props.modelValue, 'key:', key)
+
+  if (props.multiple) {
+    const values = unref(props.modelValue) as Array<number>;
+    const index = values.indexOf(key);
+    if (index > -1 && !(props.mandatory && values.length === 1)) {
+      values.splice(index, 1);
+    } else if (index === -1) {
+      values.push(key)
+    }
+    emits("update:modelValue", values);
+  } else {
+    if (!props.mandatory && key === props.modelValue as number) {
+      console.log('aaa')
+      emits("update:modelValue", -1);
+    } else {
+      emits("update:modelValue", key);
+    }
+  }
 })
 provide('parentProps', props)
 </script>
diff --git a/src/components/list/DListItem.vue b/src/components/list/DListItem.vue
index 5508026..623bf5e 100644
--- a/src/components/list/DListItem.vue
+++ b/src/components/list/DListItem.vue
@@ -1,8 +1,8 @@
 <template>
   <DWrapper root-tag="li" :classes="['d-list__item', {selected, center}]"
             :style="stylesObject" v-ripple
-            @focusin="()=>focus = true"
-            @focusout="()=>focus = false"
+            @focusin="focus = true"
+            @focusout="focus = false"
             v-bind="{...$props, ...$attrs}" @click="onClick" :tabindex="disabled?-1:0" @keyup.enter="onClick"
             glow :glowing="!filled && selected">
     <div class="d-list__item__content">
@@ -72,7 +72,7 @@ const stylesObject = computed(() => {
 
 watch(() => selected.value, (state) => {
   if (state) {
-    updateParent();
+    //updateParent();
   }
 })
 
@@ -87,7 +87,7 @@ function onClick(e: Event) {
 
 onMounted(() => {
   if (selected.value) {
-    updateParent();
+    //updateParent();
   }
 })
 </script>
diff --git a/src/components/menu/DSelectMenu.vue b/src/components/menu/DSelectMenu.vue
index 9af167b..6e65bc5 100644
--- a/src/components/menu/DSelectMenu.vue
+++ b/src/components/menu/DSelectMenu.vue
@@ -1,14 +1,13 @@
 <template>
-  <DWrapper :classes="['d-select-menu']" v-bind="{...$props, ...$attrs}">
+  <DWrapper :classes="['d-select-menu']">
     <SlideYUpTransition :duration="80">
-      <DCard v-if="open" class="d-select-menu__dropdown pa-0" elevation="4"
-              v-click-outside="hideSelectMenu">
-        <DList :value="modelValue"
-                @input="onInput"
-                color="primary" class="d-select-menu__dropdown__list pa-0" rounded="none">
+      <DCard v-show="open && items" v-bind="{...$props, ...$attrs}" class="d-select-menu__dropdown pa-0" elevation="4">
+        <DList :modelValue="modelValue"
+               @update:modelValue="onInput" :multiple="multiple" :mandatory="mandatory"
+               color="primary" class="d-select-menu__dropdown__list pa-0" rounded="none">
           <DListItem v-for="(item, index) in items" :key="index"
-                       :color="item.color || ''"
-                       :tabindex="0" ref="item">
+                     :color="item.color || 'currentColor'"
+                     :tabindex="0" ref="item">
             <slot name="item" :item="item" :index="index">
               {{ item }}
             </slot>
@@ -31,13 +30,16 @@ import DWrapper from "../DWrapper.vue";
 import DCard from "../card/DCard.vue";
 import DList from "../list/DList.vue";
 import DListItem from "../list/DListItem.vue";
+import {SlideYUpTransition} from "v3-transitions";
 
 const emit = defineEmits(['update:modelValue', 'update:open']);
 
 const props = defineProps({
   modelValue: [Number, String, Array],
   open: {type: Boolean},
-  items: {type: Array}
+  items: {type: Array},
+  multiple: {type: Boolean},
+  mandatory: {type: Boolean},
 })
 
 const currentItem = ref(-1);
@@ -53,11 +55,14 @@ watch(() => props.items, () => {
 })
 
 function hideSelectMenu() {
-  emit('update:open', false)
+  if (!props.multiple) {
+    emit('update:open', false)
+  }
 }
 
-function onInput(e: Event) {
+function onInput(e: number | Array<number>) {
   emit('update:modelValue', e)
+  hideSelectMenu()
 }
 </script>
 
diff --git a/src/components/tooltip/DTooltip.vue b/src/components/tooltip/DTooltip.vue
index 65af2fb..570610d 100644
--- a/src/components/tooltip/DTooltip.vue
+++ b/src/components/tooltip/DTooltip.vue
@@ -1,19 +1,21 @@
 <template>
-  <DWrapper :classes="['d-tooltip', position]">
-    <div class="d-tooltip__slot" ref="trigger" @mouseover="hoverState=true" @mouseleave="hoverState=false">
+  <DWrapper :classes="['d-tooltip', position, popover]" @mouseleave="popover && onHoverLeave()">
+    <div class="d-tooltip__slot" ref="trigger" @mouseover="onHoverOver" @mouseleave="!popover && onHoverLeave()">
       <slot name="default" v-bind="{...$props, ...$attrs}">
       </slot>
     </div>
     <component :is="transitionComponent" :duration="100">
       <suspense>
         <div class="d-tooltip__wrapper" :style="stylesObject" v-show="hoverState" ref="tooltip">
-          <DLabel class="d-tooltip__wrapper__content" v-bind="{...$props, ...$attrs}" :filled="filled" :glow="!filled"
-                  glowing>
-            <DCardSubtitle :style="{color: useFontColor + '!important'}" class="pa-0">
-              <slot name="tooltip">
-              </slot>
-            </DCardSubtitle>
-          </DLabel>
+          <slot name="tooltip-wrapper">
+            <DLabel class="d-tooltip__wrapper__content" v-bind="{...$props, ...$attrs}" :filled="filled" :glow="!filled"
+                    glowing>
+              <DCardSubtitle :style="{color: useFontColor + '!important'}" class="pa-0">
+                <slot name="tooltip">
+                </slot>
+              </DCardSubtitle>
+            </DLabel>
+          </slot>
         </div>
       </suspense>
     </component>
@@ -32,7 +34,13 @@ import defaultProps from "../../mixins/DefaultProps";
 import DWrapper from "../DWrapper.vue";
 import DLabel from "../label/DLabel.vue";
 import DCardSubtitle from "../card/text/DCardSubtitle.vue";
-import {SlideYDownTransition, SlideXLeftTransition, SlideXRightTransition, SlideYUpTransition} from "v3-transitions";
+import {
+  SlideYDownTransition,
+  SlideXLeftTransition,
+  SlideXRightTransition,
+  SlideYUpTransition,
+  FadeTransition
+} from "v3-transitions";
 import {Position} from "../../types/Vuelize";
 
 const vuelize: any = inject('vuelize');
@@ -41,6 +49,9 @@ const instance: any = getCurrentInstance();
 const props = defineProps({
   filled: Boolean,
   fontColor: String,
+  popover: Boolean,
+  simpleFade: Boolean,
+  padding: {type: String, default: '4px'},
   position: {
     type: String as PropType<Position>,
     default: 'bottom',
@@ -51,7 +62,6 @@ const props = defineProps({
   ...defaultProps
 });
 
-const padding = 4;
 const hoverState = ref(false);
 const offset = reactive({
   top: 'initial',
@@ -67,6 +77,14 @@ watch(() => hoverState.value, () => {
   nextTick().then(() => onHover())
 })
 
+function onHoverOver() {
+  hoverState.value = true;
+}
+
+function onHoverLeave() {
+  hoverState.value = false;
+}
+
 async function onHover() {
   //console.log(tooltip)
   if (hoverState.value && tooltip.value) {
@@ -104,6 +122,9 @@ const stylesObject = computed(() => {
 })
 
 const transitionComponent = computed(() => {
+  if (props.simpleFade) {
+    return FadeTransition;
+  }
   switch (props.position) {
     case Position.Top: {
       return SlideYDownTransition;
@@ -136,9 +157,15 @@ const useFontColor = computed(() => {
   position: relative;
   width: max-content;
 
+  &.popover {
+    &__wrapper {
+      pointer-events: all;
+    }
+  }
+
   &__wrapper {
     z-index: 12;
-    padding: $gap;
+    padding: v-bind(padding);
     position: fixed;
     display: flex;
     justify-content: center;
@@ -165,37 +192,5 @@ const useFontColor = computed(() => {
       }
     }
   }
-
-  /*&.left {
-    display: flex;
-    align-items: center;
-
-    .d-tooltip__wrapper {
-      display: unset;
-      right: calc(100% + #{$gap});
-    }
-  }
-
-  &.right {
-    display: flex;
-    align-items: center;
-
-    .d-tooltip__wrapper {
-      display: unset;
-      left: calc(100% + #{$gap});
-    }
-  }
-
-  &.bottom {
-    .d-tooltip__wrapper {
-      top: calc(100% + #{$gap});
-    }
-  }
-
-  &.top {
-    .d-tooltip__wrapper {
-      bottom: calc(100% + #{$gap});
-    }
-  }*/
 }
 </style>
diff --git a/src/stories/DMenu.stories.js b/src/stories/DMenu.stories.js
new file mode 100644
index 0000000..9076699
--- /dev/null
+++ b/src/stories/DMenu.stories.js
@@ -0,0 +1,68 @@
+import DSelectMenu from "../components/menu/DSelectMenu.vue";
+import DCard from "../components/card/DCard.vue";
+import DButton from "../components/button/DButton.vue";
+import {ref} from "vue";
+
+export default {
+    title: 'DSelectMenu',
+    component: DSelectMenu,
+    argTypes: {},
+};
+
+const Template = (args) => ({
+    components: {DSelectMenu, DCard, DButton},
+    setup() {
+        const open1 = ref(false)
+        const open2 = ref(false)
+        const position = ref(2)
+        const positions = ref([1, 3])
+        const positionsArray = [
+            'bottom',
+            'top',
+            'left',
+            'right'
+        ]
+        return {args, positionsArray, positions, position, open1, open2};
+    },
+    template: `
+      <d-card class="ma-20 pa-10" elevation>
+      <d-row>
+        <d-column gap v-for="val in [false, true]" :outlined="val">
+          {{ positions }}
+          <d-button @click="open1 = !open1">
+            Multi Select
+            <template v-slot:misc>
+              <d-select-menu v-model="positions" :items="positionsArray" :open="open1" multiple :mandatory="val" v-bind="args"/>
+            </template>
+          </d-button>
+          {{ position }}
+          <d-button @click="open2 = !open2">
+            Single Select
+            <template v-slot:misc>
+              <d-select-menu v-model="position" :items="positionsArray" :open="open2" :mandatory="val" v-bind="args"/>
+            </template>
+          </d-button>
+        </d-column>
+      </d-row>
+      </d-card>`,
+});
+
+export const Primary = Template.bind({});
+Primary.args = {};
+/*
+export const Secondary = Template.bind({});
+Secondary.args = {
+    label: 'Secondary',
+};
+
+export const Outlined = Template.bind({});
+Outlined.args = {
+    label: 'Outlined',
+    outlined: true
+};
+
+export const Glow = Template.bind({});
+Glow.args = {
+    label: 'Outlined',
+    glow: true
+};*/
diff --git a/src/stories/DTooltip.stories.js b/src/stories/DTooltip.stories.js
index 05b045b..653eaaa 100644
--- a/src/stories/DTooltip.stories.js
+++ b/src/stories/DTooltip.stories.js
@@ -5,8 +5,7 @@ import DButton from "../components/button/DButton.vue";
 export default {
     title: 'DTooltip',
     component: DTooltip,
-    argTypes: {
-    },
+    argTypes: {},
 };
 
 const Template = (args) => ({
@@ -21,15 +20,25 @@ const Template = (args) => ({
         return {args, positions};
     },
     template: `
-      <d-tooltip v-bind="args" v-for="position in positions" :position="position">
-      <d-button filled color="primary">
-        hello i is btn {{ position }}
-      </d-button>
-      <template v-slot:tooltip>
-        toooooooltip
-      </template>
-      </d-tooltip>
-    `,
+      <d-card class="ma-20 pa-10" elevation>
+      <d-column gap>
+        <d-tooltip v-bind="args" v-for="position in positions" :position="position">
+          <d-button filled color="primary">
+            hello i is btn {{ position }}
+          </d-button>
+          <template v-slot:tooltip-wrapper>
+            <d-card elevation="6">
+              <d-card-title>
+                This is a tooltip
+              </d-card-title>
+              <d-button>
+                hiii :)
+              </d-button>
+            </d-card>
+          </template>
+        </d-tooltip>
+      </d-column>
+      </d-card>`,
 });
 
 export const Primary = Template.bind({});