From 95d5bc5a63351ce9961738847e87b0525596ff5a Mon Sep 17 00:00:00 2001
From: danielterletzkiy <danielterletzkiy@gmail.com>
Date: Thu, 25 Aug 2022 20:09:06 +0200
Subject: [PATCH] VEZ-14 fixed DSelect.vue for DTextfield.vue

---
 package-lock.json                            | 14 ++++
 package.json                                 |  1 +
 src/components/menu/DSelectMenu.vue          | 13 +++-
 src/components/textfield/DTextfield.vue      | 17 ++---
 src/components/textfield/variant/DSelect.vue | 72 ++++++++++++++++++++
 src/components/textfield/variant/Select.vue  | 72 --------------------
 src/stories/DTextfield.stories.js            | 36 ++++++++++
 7 files changed, 142 insertions(+), 83 deletions(-)
 create mode 100644 src/components/textfield/variant/DSelect.vue
 delete mode 100644 src/components/textfield/variant/Select.vue
 create mode 100644 src/stories/DTextfield.stories.js

diff --git a/package-lock.json b/package-lock.json
index a711d34..edf1147 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.1.8",
       "dependencies": {
         "@types/estree": "^0.0.47",
+        "click-outside-vue3": "^4.0.1",
         "lodash": "^4.17.21",
         "pinia": "^2.0.14",
         "rollup-plugin-typescript": "^1.0.1",
@@ -12132,6 +12133,14 @@
         "node": ">=8"
       }
     },
+    "node_modules/click-outside-vue3": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/click-outside-vue3/-/click-outside-vue3-4.0.1.tgz",
+      "integrity": "sha512-sbplNecrup5oGqA3o4bo8XmvHRT6q9fvw21Z67aDbTqB9M6LF7CuYLTlLvNtOgKU6W3zst5H5zJuEh4auqA34g==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/clipboardy": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/clipboardy/-/clipboardy-2.3.0.tgz",
@@ -38546,6 +38555,11 @@
         }
       }
     },
+    "click-outside-vue3": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/click-outside-vue3/-/click-outside-vue3-4.0.1.tgz",
+      "integrity": "sha512-sbplNecrup5oGqA3o4bo8XmvHRT6q9fvw21Z67aDbTqB9M6LF7CuYLTlLvNtOgKU6W3zst5H5zJuEh4auqA34g=="
+    },
     "clipboardy": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/clipboardy/-/clipboardy-2.3.0.tgz",
diff --git a/package.json b/package.json
index dcefa22..cf5385b 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
   ],
   "dependencies": {
     "@types/estree": "^0.0.47",
+    "click-outside-vue3": "^4.0.1",
     "lodash": "^4.17.21",
     "pinia": "^2.0.14",
     "rollup-plugin-typescript": "^1.0.1",
diff --git a/src/components/menu/DSelectMenu.vue b/src/components/menu/DSelectMenu.vue
index 6e65bc5..9ca0a39 100644
--- a/src/components/menu/DSelectMenu.vue
+++ b/src/components/menu/DSelectMenu.vue
@@ -1,10 +1,11 @@
 <template>
-  <DWrapper :classes="['d-select-menu']">
+  <DWrapper :classes="['d-select-menu']" @keyup.esc="hideSelectMenu">
     <SlideYUpTransition :duration="80">
-      <DCard v-show="open && items" v-bind="{...$props, ...$attrs}" class="d-select-menu__dropdown pa-0" elevation="4">
+      <DCard v-if="open && items" v-bind="{...$props, ...$attrs}" class="d-select-menu__dropdown pa-0" elevation="4"
+             v-click-outside="hideSelectMenu">
         <DList :modelValue="modelValue"
                @update:modelValue="onInput" :multiple="multiple" :mandatory="mandatory"
-               color="primary" class="d-select-menu__dropdown__list pa-0" rounded="none">
+               :color="color" class="d-select-menu__dropdown__list pa-0" rounded="none">
           <DListItem v-for="(item, index) in items" :key="index"
                      :color="item.color || 'currentColor'"
                      :tabindex="0" ref="item">
@@ -31,6 +32,9 @@ import DCard from "../card/DCard.vue";
 import DList from "../list/DList.vue";
 import DListItem from "../list/DListItem.vue";
 import {SlideYUpTransition} from "v3-transitions";
+//@ts-ignore
+import ClickOutside from 'click-outside-vue3'
+import defaultProps from "../../mixins/DefaultProps";
 
 const emit = defineEmits(['update:modelValue', 'update:open']);
 
@@ -40,8 +44,11 @@ const props = defineProps({
   items: {type: Array},
   multiple: {type: Boolean},
   mandatory: {type: Boolean},
+  ...defaultProps
 })
 
+const vClickOutside = ClickOutside.directive
+
 const currentItem = ref(-1);
 
 watch(() => props.open, (state) => {
diff --git a/src/components/textfield/DTextfield.vue b/src/components/textfield/DTextfield.vue
index 0c5fea2..01eae79 100644
--- a/src/components/textfield/DTextfield.vue
+++ b/src/components/textfield/DTextfield.vue
@@ -1,20 +1,20 @@
 <template>
   <DWrapper :classes="['d-text-field', classesObject]" v-bind="{...$props, ...$attrs}"
             :style="textFieldStylesObject"
-            @mouseenter="()=> hover = true" @mouseleave="()=> hover = false">
+            @mouseenter="hover = true" @mouseleave="hover = false">
     <div class="d-text-field__prefix">
       <slot name="prefix"/>
     </div>
     <component v-if="componentType !== 'input'" :is="componentType" v-bind="{...$props, ...$attrs}" :id="instance.uid"
                class="d-text-field__input"
                :placeholder="placeholderActive ? placeholder : ' '"
-               :value="modelValue" @input="onInput"
+               :modelValue="modelValue" @update:modelValue="onInput"
                @removeFocus="removeFocus"
-               @focusin="()=>selected = true" @focusout="()=>selected = false">
-      <template v-if="componentType !== 'input'" slot="label" slot-scope="props">
+               @focusin="selected = true" @focusout="selected = false">
+      <template v-if="componentType !== 'input'" v-slot:label="props">
         <slot name="label" v-bind="props"></slot>
       </template>
-      <template v-if="componentType !== 'input'" slot="item" slot-scope="props">
+      <template v-if="componentType !== 'input'" v-slot:item="props">
         <slot name="item" v-bind="props"></slot>
       </template>
     </component>
@@ -24,7 +24,7 @@
            :value="modelValue" @input="onInput"
            @keyup.enter="$emit('enter')"
            @removeFocus="removeFocus"
-           @focusin="()=>selected = true" @focusout="()=>selected = false"/>
+           @focusin="selected = true" @focusout="selected = false"/>
     <label v-if="label && !solo" :for="instance.uid" class="d-text-field__label" :class="labelClassesObject">{{
         label
       }}</label>
@@ -41,7 +41,7 @@ export default {
 </script>
 
 <script setup lang="ts">
-//import DSelect from "@/components/textfield/variant/Select.vue";
+import DSelect from "./variant/DSelect.vue";
 //import DAutocomplete from "@/components/textfield/variant/Autocomplete.vue";
 import {computed, inject, onMounted, ref} from "vue";
 import defaultProps from "../../mixins/DefaultProps";
@@ -61,6 +61,7 @@ const props = defineProps({
   label: {type: String},
   placeholder: {type: String, default: ''},
   select: {type: Boolean},
+  mandatory: {type: Boolean},
   modelValue: {type: [String, Object]},
   ...defaultProps
 });
@@ -82,7 +83,7 @@ const classesObject = computed(() => {
 
 const componentType = computed(() => {
   if (props.select) {
-    return 'd-select'
+    return DSelect
   } else if (props.autocomplete) {
     return 'd-autocomplete'
   } else {
diff --git a/src/components/textfield/variant/DSelect.vue b/src/components/textfield/variant/DSelect.vue
new file mode 100644
index 0000000..0a59f05
--- /dev/null
+++ b/src/components/textfield/variant/DSelect.vue
@@ -0,0 +1,72 @@
+<template>
+  <div v-bind="{...$props, ...$attrs}" @focusin="$emit('focusin')" @keyup.esc="dropdownOpen = false"
+       @focusout="$emit('focusout')" @click.self="toggleDropdown" @keypress.enter="dropdownOpen = true"
+       tabindex="0">
+    <slot name="label" :item="items[modelValue]" :index="modelValue">
+      <span class="d-text-field__input__default">{{ items[modelValue] }}</span>
+    </slot>
+    <DIconButton size="24" rounded="md" class="d-text-field__input__icon" tabindex="-1" @click="toggleDropdown">
+      <SlideYDownTransition group :duration="150">
+        <DIcon :name="angleIcon" color="currentColor"/>
+      </SlideYDownTransition>
+    </DIconButton>
+    <DSelectMenu :items="items" :modelValue="modelValue" @update:modelValue="onInput"
+                 v-model:open="dropdownOpen" :mandatory="mandatory" :multiple="false" :color="$attrs.color">
+      <template v-slot:item="props">
+        <slot name="item" v-bind="props"></slot>
+      </template>
+    </DSelectMenu>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {computed, ref} from "vue";
+import DSelectMenu from "../../menu/DSelectMenu.vue";
+import DIconButton from "../../button/DIconButton.vue";
+import DIcon from "../../icon/DIcon.vue";
+import defaultProps from "../../../mixins/DefaultProps";
+
+const emit = defineEmits(['update:modelValue', 'removeFocus'])
+const props = defineProps({
+  modelValue: [Number, String],
+  items: Array,
+  mandatory: {type: Boolean},
+  ...defaultProps
+})
+
+const dropdownOpen = ref(false);
+
+function toggleDropdown() {
+  dropdownOpen.value = !dropdownOpen.value;
+}
+
+function onInput(val: any) {
+  emit('update:modelValue', val)
+  emit('removeFocus')
+}
+
+const angleIcon = computed(() => {
+  return dropdownOpen.value ? 'angle-up' : 'angle-down'
+})
+</script>
+
+<style scoped lang="scss">
+.d-text-field__input {
+  user-select: none;
+  cursor: default;
+  position: relative;
+  padding-top: 0.5em !important;
+  padding-bottom: 0.5em !important;
+  display: flex;
+
+  .d-text-field__input__default {
+    align-self: center;
+  }
+
+  .d-text-field__input__icon {
+    margin-left: auto;
+    margin-right: -8px;
+    align-self: center;
+  }
+}
+</style>
diff --git a/src/components/textfield/variant/Select.vue b/src/components/textfield/variant/Select.vue
deleted file mode 100644
index c475446..0000000
--- a/src/components/textfield/variant/Select.vue
+++ /dev/null
@@ -1,72 +0,0 @@
-<template>
-  <div v-bind="{...$props, ...$attrs}" @focusin="$emit('focusin')"
-       @focusout="$emit('focusout')" @click="toggleDropdown" @keypress.enter="dropdownOpen = true"
-       tabindex="0">
-    <slot name="item" v-ripple :item="items[value]" :index="value">
-      <span class="d-text-field__input__default">{{ items[value] }}</span>
-    </slot>
-    <d-icon-button size="24" rounded="md" class="d-text-field__input__icon">
-      <d-icon :name="angleIcon"/>
-    </d-icon-button>
-    <d-select-menu width="0" v-bind="{...$props, ...$attrs}" :value="value" @input="onInput"
-                   :open.sync="dropdownOpen">
-      <template slot="item" slot-scope="props">
-        <slot name="item" v-bind="props"></slot>
-      </template>
-    </d-select-menu>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "d-select",
-
-  props: {
-    value: [Number, String],
-    items: Array,
-  },
-
-  methods: {
-    toggleDropdown() {
-      this.dropdownOpen = !this.dropdownOpen;
-    },
-
-    onInput(val) {
-      this.toggleDropdown()
-      this.$emit('input', val)
-      this.$emit('removeFocus')
-    }
-  },
-
-  computed: {
-    angleIcon() {
-      return this.dropdownOpen ? 'angle-up' : 'angle-down'
-    }
-  },
-
-  data: () => ({
-    dropdownOpen: false
-  }),
-}
-</script>
-
-<style scoped lang="scss">
-.d-text-field__input {
-  user-select: none;
-  cursor: default;
-  position: relative;
-  padding-top: 0.5em !important;
-  padding-bottom: 0.5em !important;
-  display: flex;
-
-  .d-text-field__input__default {
-    align-self: center;
-  }
-
-  .d-text-field__input__icon {
-    margin-left: auto;
-    margin-right: -8px;
-    align-self: center;
-  }
-}
-</style>
diff --git a/src/stories/DTextfield.stories.js b/src/stories/DTextfield.stories.js
new file mode 100644
index 0000000..dac88cd
--- /dev/null
+++ b/src/stories/DTextfield.stories.js
@@ -0,0 +1,36 @@
+import DTextfield from "../components/textfield/DTextfield.vue";
+import {ref} from "vue";
+
+export default {
+    title: 'DTextfield',
+    component: DTextfield,
+};
+
+const Template = (args) => ({
+    components: {DTextfield},
+    setup() {
+        const modelValue = ref(0)
+        return {args, modelValue};
+    },
+    template: `
+      <d-textfield v-bind="args" v-model="modelValue" :items="[1,2,3,4]" mandatory>
+      <template v-slot:item="{item}">
+        <d-tooltip>
+            item: {{ item }}
+          <template v-slot:tooltip>
+            {{item}}
+          </template>
+        </d-tooltip>
+      </template>
+      <template v-slot:label="{item}">
+        selected: {{ item }}
+      </template>
+      </d-textfield>`,
+});
+
+export const Primary = Template.bind({});
+Primary.args = {
+    label: 'Primary',
+    color: 'primary',
+    filled: true
+};