feat: new components & css fixes

package.json

@@ -1,6 +1,6 @@
 {
     "name": "kodama-ui",
-    "version": "0.25.0",
+    "version": "0.28.0",
     "description": "Kodama UI is a Vue 3 component library that provides a set of components & funcionality to build your application.",
     "homepage": "https://50l3r.github.io/kodama-ui",
     "keywords": [

src/assets/style/_viewport.scss

@@ -7,3 +7,13 @@
     background-color: theme('colors.primary');
     border-radius: 10px;
 }
+
+iframe::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+}
+
+iframe::-webkit-scrollbar-thumb {
+    background-color: black;
+    border-radius: 10px;
+}

src/components/data-display/k-drag/k-drag.vue

@@ -0,0 +1,33 @@
+<template>
+    <div
+        @dragenter.prevent="setActive"
+        @dragover.prevent="setActive"
+        @dragleave.prevent="setInactive"
+        @drop.prevent="onDrop"
+    >
+        <slot name="dropzone" v-bind="{ active }"></slot>
+    </div>
+</template>
+
+<script setup lang="ts">
+    import { ref } from 'vue'
+    const emit = defineEmits(['drop'])
+
+    let active = ref(false)
+    let inActiveTimeout: any = null
+
+    function setActive() {
+        active.value = true
+        clearTimeout(inActiveTimeout)
+    }
+    function setInactive() {
+        inActiveTimeout = setTimeout(() => {
+            active.value = false
+        }, 50)
+    }
+
+    function onDrop(e: any) {
+        setInactive()
+        emit('drop', [...e.dataTransfer.files])
+    }
+</script>

src/components/data-display/k-image/k-image.vue

@@ -10,6 +10,7 @@
             data-zoom
             :data-zoom-src="src"
             :style="style"
+            class="object-cover"
         />
     </div>
 </template>

src/components/data-display/k-table/k-table.vue

@@ -484,7 +484,15 @@
 </template>
 
 <script lang="ts">
-    import { defineComponent, watch, onMounted, computed, ref } from 'vue'
+    import {
+        defineComponent,
+        watch,
+        onMounted,
+        computed,
+        ref,
+        onUnmounted
+    } from 'vue'
+    import { emitter } from '@/plugins'
 
     import props from './k-table.props'
     import useColumn from './lib/columns'
@@ -596,6 +604,15 @@
             onMounted(() => {
                 enable404.value = true
                 ctx.emit('fetch', query.value)
+
+                emitter.on(`ktable_${props.store}_fetch`, () => {
+                    console.log('emite')
+                    ctx.emit('fetch', query.value)
+                })
+            })
+
+            onUnmounted(() => {
+                emitter.off(`ktable_${props.store}_fetch`)
             })
 
             return {

src/components/data-entry/k-dropzone/k-dropzone.props.ts

@@ -5,6 +5,10 @@ const Props = {
         type: String,
         default: ''
     },
+    id: {
+        type: [Number, String],
+        default: ''
+    },
     maxSize: {
         type: Number,
         default: 5

src/components/data-entry/k-dropzone/k-dropzone.vue

@@ -9,7 +9,7 @@
                 [`k-dropzone-${size}`]: true
             }"
         >
-            <label v-if="hasLabel">
+            <label v-if="hasLabel" class="k-dropzone-label">
                 <slot v-if="hasSlot('default')" />
                 <template v-else>{{ label }}</template>
 
@@ -168,7 +168,7 @@
 
 <script lang="ts">
     import { uid } from '@/helpers/utils'
-    import { computed, defineComponent, ref } from 'vue'
+    import { computed, defineComponent, ref, watch } from 'vue'
     import props from './k-dropzone.props'
 
     export default defineComponent({
@@ -203,6 +203,8 @@
             })
 
             const isModelValueImage = computed(() => {
+                if (!props.modelValue) return false
+
                 const extension = (
                     props.modelValue.split('.').pop() || ''
                 ).split('?')[0]
@@ -345,6 +347,13 @@
                 return props.label || hasSlot('default')
             })
 
+            watch(
+                () => props.id,
+                () => {
+                    file.value.name = ''
+                }
+            )
+
             return {
                 id,
                 file,
@@ -369,7 +378,11 @@
 
         .k-dropzone-wrapper {
             label {
-                @apply mb-2 block select-none text-sm text-gray-500 dark:text-white font-semibold;
+                @apply block select-none text-sm text-gray-500 dark:text-white font-semibold;
+            }
+
+            label.k-dropzone-label {
+                @apply mb-2;
             }
 
             .k-dropzone-input {

src/components/data-entry/k-editor/k-editor.scss

@@ -100,7 +100,7 @@
         }
 
         .k-editor-menu {
-            @apply z-0 flex flex-row border-t-2 border-gray-200 border-dashed py-2 mx-5 gap-1 sticky bottom-0 left-0 select-none dark:border-gray-700 overflow-x-scroll;
+            @apply z-0 flex flex-row border-t-2 border-gray-200 border-dashed py-2 mx-5 gap-1 sticky bottom-0 left-0 select-none dark:border-gray-700 overflow-x-scroll bg-gray-100 min-h-[56px] dark:bg-gray-900;
 
             .k-button.active {
                 @apply text-white bg-gray-700 border-gray-700 opacity-60;

src/components/data-entry/k-file/k-file.vue

@@ -0,0 +1,44 @@
+<template>
+    <div @click="onPickFile">
+        <slot></slot>
+        <input
+            ref="fileInput"
+            type="file"
+            class="hidden"
+            :accept="accept"
+            :multiple="multiple"
+            @change="onFilePicked"
+        />
+    </div>
+</template>
+
+<script setup lang="ts">
+    import { ref } from 'vue'
+
+    defineProps({
+        accept: {
+            type: String,
+            default: '*'
+        },
+        multiple: {
+            type: Boolean,
+            default: false
+        }
+    })
+
+    const emit = defineEmits(['upload'])
+
+    const fileInput = ref()
+
+    const onPickFile = () => {
+        fileInput.value.click()
+    }
+
+    const onFilePicked = (event: any) => {
+        const files = event.target.files
+
+        if (files.length) {
+            emit('upload', [...files])
+        }
+    }
+</script>

src/components/data-entry/k-input-inline/k-input-inline.vue

@@ -8,9 +8,9 @@
             :disabled="disabled"
             :readonly="readonly"
             :maxlength="maxlength > 0 ? maxlength : undefined"
-            :style="{ width: width }"
+            :style="{ width: parsedWidth }"
         />
-        <span ref="span" :style="{ minWidth: `${width}px` }">
+        <span ref="span" :style="{ minWidth: parsedWidth }">
             {{ model || placeholder }}
         </span>
     </div>
@@ -46,6 +46,10 @@
                 type: Number,
                 default: 40
             },
+            fluid: {
+                type: Boolean,
+                default: false
+            },
             size: {
                 type: String,
                 default: 'md',
@@ -81,14 +85,21 @@
                 return classes
             })
 
+            const parsedWidth = computed(() => {
+                if (props.fluid) return '100%'
+                return `${props.width}px`
+            })
+
             const syncWidth = () => {
                 if (input.value && span.value) {
                     input.value.style.width = span.value.offsetWidth + 'px'
                 }
             }
 
             onMounted(() => {
-                new ResizeObserver(syncWidth).observe(span.value)
+                if (!props.fluid) {
+                    new ResizeObserver(syncWidth).observe(span.value)
+                }
             })
 
             return {
@@ -97,7 +108,7 @@
                 span,
                 model,
                 classes,
-                syncWidth
+                parsedWidth
             }
         }
     })

src/components/data-entry/k-input/k-input.scss

@@ -1,8 +1,11 @@
 .k-input-number {
-    input {
-        &::-webkit-inner-spin-button {
-            -webkit-appearance: none;
-        }
+    input[type='number']::-webkit-outer-spin-button,
+    input[type='number']::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+    }
+
+    input[type='number'] {
+        -moz-appearance: textfield;
     }
 
     .k-input-control {

src/components/data-entry/k-input/k-input.vue

@@ -24,6 +24,7 @@
             :style="style"
             :autofocus="autofocus"
             :disabled="disabled"
+            :autocomplete="autocomplete"
             @input="change"
             @blur="validate"
         />
@@ -161,6 +162,11 @@
                 type: Boolean,
                 default: false,
                 description: 'Indica si el input está deshabilitado'
+            },
+            autocomplete: {
+                type: String,
+                default: 'off',
+                description: 'Indica si el input tiene autocompletado'
             }
         },
         emits: ['update:modelValue'],

src/components/data-entry/k-textarea/k-textarea.vue

@@ -19,6 +19,7 @@
             :placeholder="placeholder"
             :required="required"
             :style="style"
+            :autocomplete="autocomplete"
         >
         </textarea>
     </div>
@@ -98,6 +99,11 @@
                 type: Number,
                 default: 0,
                 description: 'Altura mínima del control'
+            },
+            autocomplete: {
+                type: String,
+                default: 'off',
+                description: 'Indica si el input tiene autocompletado'
             }
         },
         emits: ['update:modelValue'],

src/components/feedback/k-confirm/k-confirm.vue

@@ -66,6 +66,10 @@
             disabled: {
                 type: Boolean,
                 default: false
+            },
+            unlocked: {
+                type: Boolean,
+                default: false
             }
         },
         emits: ['ok', 'ko'],
@@ -94,7 +98,11 @@
 
             const open = () => {
                 if (props.disabled) return
-                showModal.value = true
+                if (props.unlocked) {
+                    ok()
+                } else {
+                    showModal.value = true
+                }
             }
 
             return { showModal, ok, ko, open, model }

src/config/_components.ts

@@ -22,6 +22,7 @@ import KEditor from '../components/data-entry/k-editor/k-editor.vue'
 import KRadio from '../components/data-entry/k-radio/k-radio.vue'
 import KColor from '../components/data-entry/k-color/k-color.vue'
 import KInputColor from '../components/data-entry/k-input-color/k-input-color.vue'
+import KFile from '../components/data-entry/k-file/k-file.vue'
 
 // Data Display Components
 import KAvatar from '../components/data-display/k-avatar/k-avatar.vue'
@@ -39,6 +40,7 @@ import KPrice from '../components/data-display/k-price/k-price.vue'
 import KSimpleTable from '../components/data-display/k-simple-table/k-simple-table.vue'
 import KTabs from '../components/data-display/k-tabs/k-tabs.vue'
 import KTab from '../components/data-display/k-tabs/k-tab.vue'
+import KDrag from '../components/data-display/k-drag/k-drag.vue'
 
 // Feedback
 import KModal from '../components/feedback/k-modal/k-modal.vue'
@@ -87,6 +89,7 @@ export default (
     app.component('KRadio', KRadio)
     app.component('KColor', KColor)
     app.component('KInputColor', KInputColor)
+    app.component('KFile', KFile)
 
     // Data Display Components
     app.component('KAvatar', KAvatar)
@@ -104,6 +107,7 @@ export default (
     app.component('KSimpleTable', KSimpleTable)
     app.component('KTabs', KTabs)
     app.component('KTab', KTab)
+    app.component('KDrag', KDrag)
 
     // Feedback
     app.component('KModal', KModal)