Merge pull request #29 from DanielTerletzkiy/VEZ-14

Vez 14

package.json

@@ -1,7 +1,7 @@
 {
   "name": "vuelize",
   "private": false,
-  "version": "0.1.13",
+  "version": "0.1.16",
   "repository": {
     "type": "git",
     "url": "https://github.com/DanielTerletzkiy/vuelize"
@@ -23,6 +23,8 @@
   ],
   "dependencies": {
     "@types/estree": "^0.0.47",
+    "focus-trap": "^6.9.4",
+    "focus-trap-vue": "^3.3.1",
     "lodash": "^4.17.21",
     "pinia": "^2.0.14",
     "rollup-plugin-typescript": "^1.0.1",

src/components/DWrapper.vue

@@ -20,7 +20,7 @@ const props = defineProps({
 })
 
 const componentTag = computed(() => {
-  return props.link ? 'a' : props.rootTag ?? 'div'
+  return props.link ? 'router-link' : props.rootTag ?? 'div'
 })
 
 const globalClasses = computed(() => {

src/components/HelloWorld.vue

@@ -86,6 +86,11 @@
           </DTooltip>
         </DRow>
         <DTextfield v-model="textfield" filled color="primary" label="Test"/>
+        <DTextfield v-model="textfield" filled color="primary" label="Test">
+          <template v-slot:prefix>
+            <d-icon name="clock"/>
+          </template>
+        </DTextfield>
         <DCheckbox color="primary" off-icon="times" v-model="fill">
           Check for filled List
         </DCheckbox>

src/components/button/DButton.vue

@@ -2,7 +2,7 @@
   <DWrapper root-tag="button" :classes="['d-btn', {filled, block, glow, size}]"
             v-bind="{...$props, ...$attrs}"
             @click.capture="$emit('click')" :glow="false">
-    <span class="d-btn__content" :style="{color: filled ? $vuelize.getColorContrast(color,tint):''}" v-ripple>
+    <span class="d-btn__content" :style="{color: filled && color ? $vuelize.getColorContrast(color,tint):''}" v-ripple>
       <span class="prefix" v-if="!!$slots.prefix">
         <slot name="prefix"></slot>
       </span>

src/components/dialog/DDialog.vue

@@ -2,10 +2,14 @@
   <fade-transition :duration="{enter: 200, leave: 150}">
     <DWrapper :classes="['d-dialog']" v-bind="{...$props, ...$attrs}" v-if="modelValue">
       <div class="d-dialog__backdrop" @click.self="handleClick"/>
-      <div class="d-dialog__content">
-        <slot name="default">
-        </slot>
-      </div>
+      <focus-trap v-model:active="modelValue">
+        <div class="d-dialog__content" tabindex="-1">
+          <DWrapper class="d-dialog__content__focus" tabindex="0">
+            <slot name="default">
+            </slot>
+          </DWrapper>
+        </div>
+      </focus-trap>
     </DWrapper>
   </fade-transition>
 </template>
@@ -19,6 +23,7 @@ export default {
 <script setup lang="ts">
 import DWrapper from "../DWrapper.vue";
 import {FadeTransition} from "v3-transitions";
+import {FocusTrap} from "focus-trap-vue";
 
 const emit = defineEmits(['update:modelValue']);
 const props = defineProps({
@@ -50,6 +55,7 @@ function close() {
   align-items: center;
 
   &__backdrop {
+    z-index: 1;
     position: absolute;
     width: 100%;
     height: 100%;
@@ -60,6 +66,10 @@ function close() {
 
   &__content {
     z-index: 5;
+
+    &__focus {
+      outline: none;
+    }
   }
 }
 </style>

src/components/menu/DSelectMenu.vue

@@ -6,7 +6,7 @@
         <DList :modelValue="modelValue"
                @update:modelValue="onInput" :multiple="multiple" :mandatory="mandatory"
                :color="color" class="d-select-menu__dropdown__list pa-0" rounded="none">
-          <DListItem v-for="(item, index) in items" :key="index"
+          <DListItem v-for="(item, index) in items" :key="item[indexKey] || index"
                      :color="item.color || 'currentColor'"
                      :tabindex="0" ref="item">
             <slot name="item" :item="item" :index="index">
@@ -40,6 +40,7 @@ const props = defineProps({
   modelValue: [Number, String, Array],
   open: {type: Boolean},
   items: {type: Array},
+  indexKey: {type: String},
   multiple: {type: Boolean},
   mandatory: {type: Boolean},
   ...defaultProps

src/components/table/DTable.vue

@@ -23,8 +23,8 @@
           <DDivider block width="100%"/>
         </td>
       </tr>
-      <tr v-for="(row, r) in visibleData" :key="r">
-        <td v-for="cell in row" :key="cell.value" :colspan="cell.colspan">
+      <tr v-for="(row, r) in visibleData" :key="r" @click="$emit(`rowClick`, r)">
+        <td v-for="(cell, c) in row" :key="r+c" :colspan="cell.colspan" @click="$emit(`cellClick`, c)">
           <slot :name="`data(${cell.key})`" :value="cell.value" :key="cell.key" :type="cell.type"
                 :params="cell.params"
                 :row="r"
@@ -39,7 +39,7 @@
     <DDivider v-if="paginationAvailable" block width="100%"/>
     <DRow v-if="paginationAvailable" class="pa-2" block>
       <DSpacer/>
-      <DPagination v-model="currentPage" color="primary" :size="24" rounded="md" :total="pages"/>
+      <DPagination v-model="currentPage" :color="color||'primary'" :size="24" rounded="md" :total="pages"/>
     </DRow>
   </DWrapper>
 </template>

src/components/textfield/DTextfield.vue

@@ -2,7 +2,7 @@
   <DWrapper :classes="['d-text-field', classesObject]" v-bind="{...$props, ...$attrs}"
             :style="textFieldStylesObject"
             @mouseenter="hover = true" @mouseleave="hover = false">
-    <div class="d-text-field__prefix">
+    <div v-if="!!$slots.prefix" class="d-text-field__prefix">
       <slot name="prefix"/>
     </div>
     <component v-if="componentType !== 'input'" :is="componentType" v-bind="{...$props, ...$attrs}" :id="instance.uid"
@@ -28,7 +28,7 @@
     <label v-if="label && !solo" :for="instance.uid" class="d-text-field__label" :class="labelClassesObject">{{
         label
       }}</label>
-    <div class="d-text-field__suffix">
+    <div v-if="!!$slots.suffix" class="d-text-field__suffix">
       <slot name="suffix"/>
     </div>
   </DWrapper>
@@ -175,6 +175,10 @@ function removeFocus() {
     position: relative;
     left: 0.7rem;
     font-size: 20px;
+
+    & ~ .d-text-field__label {
+      left: 40px;
+    }
   }
 
   &__suffix {

src/components/textfield/variant/DSelect.vue

@@ -11,7 +11,7 @@
       </SlideYDownTransition>
     </DIconButton>
     <DSelectMenu :items="items" :modelValue="modelValue" @update:modelValue="onInput"
-                 v-model:open="dropdownOpen" :mandatory="mandatory" :multiple="false" :color="$props.color">
+                 v-model:open="dropdownOpen" :mandatory="mandatory" :multiple="false" :index-key="indexKey" :color="$props.color">
       <template v-slot:item="props">
         <slot name="item" v-bind="props"></slot>
       </template>
@@ -30,6 +30,7 @@ const emit = defineEmits(['update:modelValue', 'removeFocus'])
 const props = defineProps({
   modelValue: [Number, String],
   items: Array,
+  indexKey: {type: String},
   mandatory: {type: Boolean},
   ...defaultProps
 })

src/stories/DDialog.stories.js

@@ -6,8 +6,7 @@ import {ref} from "vue";
 export default {
     title: 'DDialog',
     component: DDialog,
-    argTypes: {
-    },
+    argTypes: {},
 };
 
 const Template = (args) => ({
@@ -17,10 +16,12 @@ const Template = (args) => ({
         return {args, value};
     },
     template: `
-      <d-button @click="value=true">open</d-button>
+      <d-button @click="value = !value">open</d-button>
       <d-dialog v-bind="args" v-model="value">
       <d-card width="200px" height="200px">
-
+        <d-button>
+          Tab me!
+        </d-button>
       </d-card>
       </d-dialog>`,
 });

vite.config.js

@@ -6,7 +6,7 @@ import rollup from "./rollup.config.js";
 export default defineConfig({
     plugins: [vue()],
     resolve: { dedupe: ['vue'] },
-    server: { port: 5555 },
+    server: { port: 5656 },
     build: {
         // @ts-ignore
         rollupOptions: rollup

vite.config.ts

@@ -8,7 +8,7 @@ import rollup from "./rollup.config.js";
 export default defineConfig({
     plugins: [vue()],
     resolve: {dedupe: ['vue']},
-    server: {port: 5555},
+    server: {port: 5656},
     build: {
         // @ts-ignore
         rollupOptions: rollup