Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

rowKey mandatory on OTable since version 0.9.0 #1105

Closed
pflirae opened this issue Nov 12, 2024 · 4 comments · Fixed by #1137
Closed

rowKey mandatory on OTable since version 0.9.0 #1105

pflirae opened this issue Nov 12, 2024 · 4 comments · Fixed by #1137
Labels
question Further information is requested

Comments

@pflirae
Copy link

pflirae commented Nov 12, 2024

Overview of the problem

Oruga version: 0.9.0
Vuejs version: 3.5.12
OS/Browser: not related

Description

Whe an OTable dos not have a rowKey defined the following error is reported by the browser:
TypeError: crypto.randomUUID is not a function

Steps to reproduce

Create an OTable component without rowKey defined and try to load data, then on the browser console the error will be displayed.

Expected behavior

Expected that this error dos not showed up as in previous versions of oruga.

Actual behavior

The table does not load data until a rowKey is defined

@mlmoravek
Copy link
Member

Hey, I cannot reproduce this with my stack.
crypto.randomUUID should be widely available in many browsers (https://developer.mozilla.org/de/docs/Web/API/Crypto/randomUUID).

The docs work fine too.
Can you make a reproducible example?

@mlmoravek mlmoravek added the question Further information is requested label Nov 13, 2024
@pflirae
Copy link
Author

pflirae commented Nov 13, 2024

Will work in a minimal case and get back, will take some time.

@pflirae
Copy link
Author

pflirae commented Nov 15, 2024

The smallet possible case for testing an OTable with and without row-key.
The case has been tested with vite and on Chrome version 130.

the pruebas.ts file

import Oruga from '@oruga-ui/oruga-next'

import { createApp } from 'vue'
import App from '@/components/Pruebas.vue'

const pruebas = createApp(App)

pruebas.use(Oruga)
pruebas.mount('#app')

the pruebas.vue file

<script lang="ts">
    import { defineComponent } from 'vue'
    import { OTable, OTableColumn, ODatepicker } from '@oruga-ui/oruga-next'

    export default defineComponent({
        name: 'Pruebas',
        components: {
            OTable,
            OTableColumn,
            ODatepicker
        },
        data() {
            return {
                lista_datos: [
                    {rk: 1, name1: 'Name10', name2: 'Name21'},
                    {rk: 2, name1: 'Name11', name2: 'Name22'},
                    {rk: 3, name1: 'Name12', name2: 'Name23'},
                ],
                loading: false,
                isEmpty: false,
                fecha: new Date()
            }
        }
    })
</script>

<template>
    <div>
        <OTable :data="isEmpty ? [] : lista_datos"
                :loading="loading"
                row-key="rk"
        >
            <OTableColumn v-slot="props" label="Name1" field="name1">{{ props.row.name1 }}</OTableColumn>
            <OTableColumn v-slot="props" label="Name2" field="name2">{{ props.row.name2 }}</OTableColumn>
        </OTable>
    </div>
</template>

<style scoped>
</style>

runing with vite dev mode, this example works fine, the table is displayed without problems, but if the row-key prop is removed from the oruga table component, this message appears on the Chrome console:

image

the vite.config.js file is

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    server: {
        host: '0.0.0.0',
        hmr: {
            clientPort: 5176,
            host: 'localhost',
            protocol: 'ws'
        },
        port: 5176,
        watch: {
            // usePolling: true,
            interval: 500,
            ignored: ['**/resources/views/**', '**/storage/framework/cache/**']
        }
    },
    plugins: [
        laravel({
            input: ['resources/sass/prueba.scss', 'resources/ts/prueba.ts'],
            refresh: true,
        }),
        vue(),
    ],
    resolve: {
        alias: {
            '@': '/resources/vue/'
        }
    }
});

the package.json is this:

{
    "private": true,
    "type": "module",
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "@oruga-ui/oruga-next": "^0.9.1",
        "@vitejs/plugin-vue": "^5.2.0",
        "@vue/compiler-sfc": "^3.5.13",
        "@vue/tsconfig": "^0.6.0",
        "axios": "^1.7.7",
        "laravel-vite-plugin": "^1.0",
        "sass": "^1.81.0",
        "typescript": "^5.6.3",
        "vite": "^5.4.11",
        "vue": "^3.5.13"
    }
}

If any other information is need, just let me know to post it.

@mlmoravek
Copy link
Member

related to #1136

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
question Further information is requested
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants