VEZ-14 fixed DSelect.vue for DTextfield.vue

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",

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) => {

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 {

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>

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
+};