oruga-ui/oruga

🐛 Oruga is a lightweight library of UI components without any CSS framework dependency

oruga's Issues

Textarea Autosize Prop

Description

It might be a good idea to implement automatic resizing for textareas!
Having tried several packages for this, i highly recommend the following:
https://github.com/devstark-com/vue-textarea-autosize

I am happy to implement this as a feature :)

Why Oruga need this feature

It's a common request and is not difficult to implement. Having this as part of Orgua will save users the need to search for a working implementation.

How to set icon pack for Individual components (tree shaking) ?

If we using full Oruga, we do something like this

Vue.use(Oruga, {
  iconPack: 'fas'
})

But if we are using Individual components (tree shaking), how can we set the icon pack?

import { Icon, Config } from '@oruga-ui/oruga';
import '@oruga-ui/oruga/dist/oruga-full.css';

Vue.use(Icon);

I tried this

Vue.use(Config, {
  icon: {
    iconPack: 'fas',
  }
})

But the o-pag that was auto included by o-tablestill using the Material design icon

UI components using this.value instead of this.modelValue in oruga-next

Overview of the problem

Oruga version: 0.3.5
Vuejs version: 3
OS/Browser: All

Description

Some UI components still try to access this.value in oruga-next instead of this.modelValue. More information on this migration can be found here.

Steps to reproduce

Create an o-slider, and o-radio and use v-model to bind a local variable.
Try interacting with the components.

Expected behavior

The computed properties should resolve correctly

Actual behavior

The variable bound to v-model will update properly, however, computed properties that reference this.value within the component source throw an error, and do not reflect updates visually. (For instance, clicking on a radio button does correctly update the underlying v-model, however, the circle does not appear filled in).

Radio button not compatible with Vue 3 in oruga-next

Overview of the problem

Oruga version: [0.3.2]
Vuejs version: [3.0.5]
OS/Browser: Arch Linux / Mozilla Firefox

Description

Radio button is not compatible with Vue 3. It emits an input event instead of update:modelValue

o-datepicker donot work in nuxt module

I just going to use this UI in my next project but date picker does not work. but other components are working well.

I trying to solve this problem. So I try to use this as plugins. it works but it shows as without CSS but I copy-paste all code from your website.

Feature: set o-input invalid based on validationMessage if useHtml5Validation=false

Description

set o-input invalid based on validationMessage if useHtml5Validation=false
If validationMessage is set (useHtml5Validation=false), then the input field will be set invalid (variant = danger and validationMessage will be shown under the input field

Why Oruga need this feature

In order to set the o-input invalid when working with external validation plugin like vee-validate

<Field name="firstName" v-slot="{field, meta, errorMessage}" rules="required">
     <o-input :useHtml5Validation="false" v-bind="field" :modelValue="meta.initialValue" :validationMessage="errorMessage"> 
     </o-input>
</Field>

Add input customisation class for autocomplete component

Description

Autocomplete component provides these following classes to extend / override the component:

• root-class
• menu-class
• expanded-class
• item-class

It should include input-class.

Why Oruga need this feature

We need to be able to control the size of the input.

More over, then using with icon, we need to be able to set x-padding to the input.

Deprecated methods for vue 3

Hi,

Thx for providing the Vue 3 branch.

There are some methods now depricated:
Vue warn]: beforeDestroy has been renamed to beforeUnmount.
at
at <OTable data= (3) [{…}, {…}, {…}] isPaginated:="" true,="" ... >
at <HostListings onVnodeUnmounted=fn ref=Ref< Proxy {…} > >
at
at <HostLayout onVnodeUnmounted=fn ref=Ref< Proxy {…} > >
at
at

I can fix it, but it seems there is one code base for vue2 and vue3.
What is strategy to maintain those 2?

How to i use icons in vue 3

Overview of the problem

Oruga version: ^0.2.2
Vuejs version: ^3.0.0
OS/Browser: Sidekick Browser

Description

Steps to reproduce

according to docs:
https://oruga.io/components/Icon.html#examples
and
https://github.com/oruga-ui/oruga/blob/master/packages/oruga-tailwindcss/src/main.ts

its example not related with vue 3 anymore. so how i set the icons correctly in vue 3?

Expected behavior

icons shows up

Actual behavior

icons not rendered

table vue 3 with has errors in console, which breaks at least the sorting

The following errors are in the console:

runtime-dom.esm-bundler.js?830f:193 Uncaught (in promise) TypeError: Cannot convert object to primitive value
    at patchDOMProp (runtime-dom.esm-bundler.js?830f:193)
    at patchProp (runtime-dom.esm-bundler.js?830f:332)
    at mountElement (runtime-core.esm-bundler.js?5c40:3909)
    at processElement (runtime-core.esm-bundler.js?5c40:3872)
    at patch (runtime-core.esm-bundler.js?5c40:3785)
    at mountChildren (runtime-core.esm-bundler.js?5c40:3996)
    at processFragment (runtime-core.esm-bundler.js?5c40:4155)
    at patch (runtime-core.esm-bundler.js?5c40:3781)
    at mountChildren (runtime-core.esm-bundler.js?5c40:3996)
    at processFragment (runtime-core.esm-bundler.js?5c40:4155)

Uncaught (in promise) TypeError: Cannot read property 'parentNode' of null
    at parentNode (runtime-dom.esm-bundler.js?830f:30)
    at patchBlockChildren (runtime-core.esm-bundler.js?5c40:4108)
    at processFragment (runtime-core.esm-bundler.js?5c40:4163)
    at patch (runtime-core.esm-bundler.js?5c40:3781)
    at patchBlockChildren (runtime-core.esm-bundler.js?5c40:4112)
    at patchElement (runtime-core.esm-bundler.js?5c40:4076)
    at processElement (runtime-core.esm-bundler.js?5c40:3875)
    at patch (runtime-core.esm-bundler.js?5c40:3785)
    at componentEffect (runtime-core.esm-bundler.js?5c40:4373)
    at reactiveEffect (reactivity.esm-bundler.js?a1e9:42)

I copied the code from the doc in https://oruga.io/components/Table.html#examples (pagination) into the oruga-next-demo project

Default sort on table not working

Overview of the problem

Oruga version: 0.3.5
Vuejs version: 2.6.12
OS/Browser: Windows 10 64 bits / Chrome 87.0.4280.141 64 bits

Description

When one sets a default sort on a table, whether as a string (default-sort="user.first_name") or an array (:default-sort="['user.first_name', 'asc']"), this sort is not applied.

Steps to reproduce

You can see the bug in the official documentation for the table component, in the pagination example (https://oruga.io/components/table.html#pagination) where a default sort is set on the user.first_name column:

<o-table
      :data="data"
      :paginated="isPaginated"
      :per-page="perPage"
      :current-page.sync="currentPage"
      :pagination-simple="isPaginationSimple"
      :pagination-position="paginationPosition"
      :default-sort-direction="defaultSortDirection"
      :sort-icon="sortIcon"
      :sort-icon-size="sortIconSize"
      default-sort="user.first_name"
      aria-next-label="Next page"
      aria-previous-label="Previous page"
      aria-page-label="Page"
      aria-current-label="Current page"
    >

Expected behavior

Rows should be sorted by user first name.

Actual behavior

Rows aren't sorted by user first name, as you can see on the screenshot below:

In the table component source code, I've noticed that the checkSort method is never called.
Moreover, the firstTimeSort data is set to false:

data() {
    return {
        // ...

        // firstTimeSort: true, // Used by first time initSort
        firstTimeSort: false,

        // ...
    }
}

Workaround

In the mounted hook of the component where I put a table, I've added this:

<template>
  <o-table :data="data" :default-sort="['default-sort-column', 'asc']" />
</template>

<script>
export default: {
  // ...

  mounted() {
    this.$children.filter((c) => /otable/gi.test(c._name))[0].initSort()
  },

  // ...
}
</script>

Move scripts in the root `package.json`

I have a proposal. Instead of moving into the core package, we could add some script in the root package.json. Someting along:

    "test:oruga": "lerna run test --scope oruga",
    "test:all": "lerna run test --stream",

This way, it would be possible to test the package directly at the root using npm run test:oruga. It could be used to build also.

Originally posted by @service-paradis in #17 (comment)

Horizontal fields not rendering error messages

Horizontal fields are not rendering error messages at all in oruga@next, it's not just a css issue either but the element itself is not rendered

Incorrect centered class added to a column with the centered prop

Description

Table column props "centered" does not put the correct class on the column.

Steps to reproduce

Set a table column with the props "centered".

Expected behavior

The CSS class defined in the code in the file oruga/packages/oruga/src/scss/components/_table.scss for centered column is o-table-td-center. This class is the one that should be added to the cell.

Actual behavior

The CSS class o-table-td-centered is added to the cell. Since it's not defined, the column is not centered.

Checkable Table do not store the row when individual row is checked

Overview of the problem

Just reproduce it here: https://oruga.io/components/Table.html#checkable
Browser:

• Edge: v88.0.705.56
• Chrome: v88.0.4324.104

Description

When a single row is checked, the row is not pushed to checkedRows so it does not sync it at all (Total checked do not change)
However when bulk rows are checked it works as expected.

Steps to reproduce

Just reproduce it here: https://oruga.io/components/Table.html#checkable

(Thx for your amazing work)

Typo in rightIconClick event

Overview of the problem

Oruga version: v0.3.6
Vuejs version: 3
OS/Browser: N/A

Description

There is a typo in oruga-next for rightIconClick in Input.vue

Steps to reproduce

1. Use @icon-right-click in an o-input in oruga-next.

Expected behavior

Event to trigger

Actual behavior

Event does not trigger

Add options to debounce / throttle to `o-autocomplete` component

Description

Add options to debounce / throttle to o-autocomplete component in order to reduce number of requests sent to the backend when the user types very fast.

Why Oruga need this feature

Moreover, the method called when @typing is triggered is added to the call stack asynchronously so the second call is triggered before the first one has finished, resulting in incoherent data combined from both calls instead of having data from the very last call.

Lack of padding on pagination buttons

Overview of the problem

Oruga version: [0.1.4]
Vuejs version: [2.6.11]
OS/Browser: Ubuntu 20.04/Firefox

Description

The pagination buttons have a min-width but no padding. This makes links that have big numbers or even the previous and next buttons get a bit weird with the text next to the border:

I was thinking on adding a --oruga-pagination-link-padding variable and set it to the same value of --oruga-button-padding at first. This would leave things this way:

Notice that the buttons are not always squared anymore once you get to two digits, but I guess this is fine, its what I would expect.

Oruga-next should declare its types soemwhere

Description

When using vue-cli with Typescript, after installing oruga-next with npm, importing from '@oruga-ui/oruga-next' fails:

Could not find a declaration file for module '@oruga-ui/oruga-next'. '/home/franck/devel/git-repositories/tethys/node_modules/@oruga-ui/oruga-next/dist/cjs/index.js' implicitly has an 'any' type.

To work this around, I had to "provide custom typings about this module".

Create a folder named "typings-custom" at the root of your project
Reference the content of this folder in your tsconfig.json:

"include": [
"./typings-custom/**/*.ts"
]

Create a file with this exact name: foo.d.ts [foo = the name of the module] with the content:

declare module 'foo'

Your TypeScript code should now compile, albeit with NO type information (TypeScript consider the foo module of type "any").

(see https://stackoverflow.com/questions/38224232/how-to-consume-npm-modules-from-typescript==

Why Oruga need this feature

As Vue 3 improves Typescript compatibility, more and more users could opt for TypeScript. Having Oruga-next work out of the box would be a cool feature. Moreover, good typing could improve code quality.

Table component calls vue.extend when columns are specified

Overview of the problem

Oruga version: [0.2.2]
Vuejs version: [3.0.0]
OS/Browser: macOS/FF82

Description

The o-table component calls vue.extend when you specify an array of columns, but vue.extend doesn't exist in Vue 3.
See here

oruga/packages/oruga/src/components/table/Table.vue

Line 828 in 348b052

const TableColumnComponent = VueInstance.extend(TableColumn)

Steps to reproduce

1. Install oruga vnext
2. Save and run template with o-table component and columns prop set

Expected behavior

Table to render

Actual behavior

Error in console:

Uncaught (in promise) TypeError: _plugins_4daf8ef8_js__WEBPACK_IMPORTED_MODULE_1__.V.extend is not a function

Steps in vertical mode: line between steps not alligned

Hi,

I noticed that for the steps (vertical mode) the line between the steps is not horizontally centered between the icons
(compared to your other project Buefy, where it is aligned)

Docs site crashing?

I'm hanging on all component pages, eventually the browser crashes (tried in chrome + safari, M1 mac)

Add a WYSIWYG text editor.

A text editor is important. There are so many editors in vue but all are heavy or lightweights are not so efficient.
Text editor maybe content all like GitHub text editor and image may convert base64/upload option and importantly a table.
I see some editor like Vue2Editor but there is no support for the table.

How to overwrite scss variable

Inside app.js

import { Button } from '@oruga-ui/oruga';
import '@oruga-ui/oruga/dist/oruga-full.css';

Inside my app.scss

$primary: black;
@import "@oruga-ui/oruga/src/scss/utilities/_variables";

On template

<o-button @click="true">Click Me</o-button>

The button still using default color

Trying with this also doesnt seems to work

$button-background-color: black;
@import "@oruga-ui/oruga/src/scss/oruga-full.scss";

How to fix this?

Some findings on tooltip

Hi just want to report some issues that I found when using o-tooltip

1. The tooltip positioning is not reacted to the edge

For example, the placement is top. Usually Bootstrap tooltip will auto adjust itself to Bottom to avoid the edge

---

2. There is no variable to customize tooltip arrow color. For example the sceenshot show the tooltip arrow is using default border color in my project

So if I customize the tooltip background color inside app.scss

$tooltip-background-color: rgba(0, 0, 0, 0.75);
@import "@oruga-ui/oruga/src/scss/oruga-full.scss";

It will looks like this. Notice that the arrow color doesnt change

Thanks for the hardwork!

Pagination buttons are empty

Overview of the problem

Using the supplied example code for tables, the pagination next and previous buttons are empty. They work but no icon is displayed
Oruga version: [X.X.X]
Vuejs version: [X.X.X]
OS/Browser:

Description

Steps to reproduce

Expected behavior

Actual behavior

Oruga UI for Vue Next: Deprecated Slot syntax

Overview of the problem

Oruga version: [0.2.2]
Vuejs version: [3.0.0]
OS/Browser: Brave/Chromium

Description

When using the template from here: https://oruga.io/components/Steps.html#examples
We get an error about v-slot and slot-scope being deprecated. When you remove the problematic code, or try to use new syntax, the icons on the buttons do not render. Not sure if this

Steps to reproduce

1. Use this package on any Vue 3.0.0
2. Create a new view
3. Use the example code as a template.

Expected behavior

Actual behavior

Problematic code:

<template v-if="customNavigation" slot="navigation" slot-scope="{previous, next}">
        <o-button outlined variant="danger" icon-pack="fas" icon-left="backward" :disabled="previous.disabled" @click.prevent="previous.action">
          Previous
        </o-button>
        <o-button outlined variant="success" icon-pack="fas" icon-right="forward" :disabled="next.disabled" @click.prevent="next.action">
          Next
        </o-button>
      </template>

I reckon it should be rewritten as

<template v-if="customNavigation" v-slot:navigation #="{previous, next}">
        <o-button outlined variant="danger" icon-pack="fas" icon-left="backward" :disabled="previous.disabled" @click.prevent="previous.action">
          Previous
        </o-button>
        <o-button outlined variant="success" icon-pack="fas" icon-right="forward" :disabled="next.disabled" @click.prevent="next.action">
          Next
        </o-button>
      </template>

But I'm not sure that works for this.

Edit: Actually, it looks like the icons are a part of some library of icons "mdi" that are just not rendered properly.

What library is this "mdi"? Material Design Icons? If so you sould probably add in the installation steps to include the MDI icons using CDN or importing them.
Edit 2:
Icons work after linking to material design CDN

Detailed row opens at the end of the table instead of right under the row

Overview of the problem

Oruga version: 0.2.2
Vuejs version: 2.6.11
OS/Browser: Chrome

Description

When toggling a detailed row, the detail section appears at the end of the table.

Steps to reproduce

This behavior is present in the documentation examples. See: https://oruga.io/components/table.html#detailed

Expected behavior

It should open the detailed row under the row in which the toggle has been done.

Actual behavior

The detailed row opens at the end of the table.

@oruga-ui/next Typescript support

Description

Support Typescript in oruga-next

Get the following error message using "@oruga-ui/oruga-next": "^0.2.2"

Could not find a declaration file for module '@oruga-ui/oruga-next'.

table thDetailedClass not working

Hello,

the table th detailed class is not working for me.

<o-table v-if="activeTable"
....
detailed
th-detailed-class="o-table__th"
/>

outcome is

without any class

Any thoughts?

Cheers

oruga table subheading slot missing?

Hello,

in buefy there was this feature that you can customize your subheading in a table via a slot.
I could not find something similar in oruga.

Have I missed something or is this not implemeted.
I really miss this feature.

I would appreciate any help.

Cheers

checkbox disabled style overrides the background-image when checked

Overview of the problem

Oruga version: 0.3.4
Vuejs version: 2.6.12
Nuxtjs version: 2.15.0
OS/Browser: MacBook Pro/Chrome

Description

checkbox disabled style overrides the background-image when checked

Steps to reproduce

1. create checkbox component with value true
2. add the disabled prop

Expected behavior

checked svg icon should be displayed with a grayscale filter

Actual behavior

disabled prop adds a background style which overrides the checked svg img

<template>
  <o-checkbox v-model="checkboxCustom" true-value="Yes" false-value="No" disabled>23</o-checkbox>
</template>

<script>
export default {
  data() {
    return {
      checkboxCustom: "Yes",
    };
  },
};
</script>

Tabs nav doesn't support scroll in mobile

Overview of the problem

Oruga version: 0.3.4
Vuejs version: 2.6.12
Nuxtjs version: 2.15.0
OS/Browser: MacBook Pro/Chrome

Description

Tabs component doesn't support scroll in mobile

Steps to reproduce

Expected behavior

the tabs nav should be scrollable in mobile to select last childs

Actual behavior

can't scroll in mobile

Enregistrement_de_lecran_2021-03-26_a_14.49.37.mov

[Oruga-next][Vue 3.x] AddonsClass not working on Field component

Overview of the problem

Oruga-next version: [0.2.2]
Vuejs version: [3.0.5]
OS/Browser: Chromium/Firefox

Description

o-field--addons class is not added on Field component because of slot implementation on Vue3.

The problem is here:
oruga/packages/oruga/src/components/field/Field.vue

hasAddons() {
            let renderedNode = 0
            if (this.$slots.default) {
                renderedNode = this.$slots.default.reduce((i, node) => node.tag ? i + 1 : i, 0)
            }
            return (
                renderedNode > 1 &&
                this.addons &&
                !this.horizontal
            )
        }

this.$slots
https://v3.vuejs.org/guide/migration/slots-unification.html

Maybe deep refactoring is required, because Oruga uses lots of slot.

select-class prop ignored in oruga-next

Overview of the problem

Oruga version: 0.3.5
Vuejs version: 3
OS/Browser: Linux/Firefox

Description

The o-select component is missing the selectClass prop. See here in oruga vs here in oruga-next.

Steps to reproduce

Create an o-select component and attempt to set the select-class prop.

Expected behavior

Class should be applied

Actual behavior

Class is ignored

JS Agnostic

Description

It is good that Oruga is CSS Framework agnostic. How about also making it abit more JS Framework agnostic? Using VanillaJS, HTML5 Custom Elements

Why Oruga need this feature

Would make it available to even wider audience...

[Oruga-next][Vue 3.x] Time is missing on DateTimePicker

Overview of the problem

Oruga version: [email protected]
Vuejs version: 3.0.7
OS/Browser: Windows 10 20H2 , Chrome 89.0.4389.82

Description

When i'm using the datetimepicker, the timepicker is missing.

Steps to reproduce

I'm using the inline exemple
This is main.ts :

import { Datepicker, Timepicker, Datetimepicker, Dropdown, Icon, Input, Table, Config } from "@oruga-ui/oruga-next";

const app = createApp(App as any);

app.use(router);
app.use(Icon);
app.use(Dropdown);
app.use(Datepicker);
app.use(Timepicker);
app.use(Datetimepicker);
app.use(Input);
app.use(Table);
app.use(Config, {
    iconPack: "fas",
    table: {
        override: true,
        iconPack: "fas",
        tableClass: "table",
        stripedClass: "table-striped",
        hoverableClass: "table-hover",
        sortIcon: "angle-up",
        thSortableClass: "sortable",
        mobileCards: true,
        mobileClass: "mobile",
        wrapperClass: "o-table-wrapper"
    }
});
app.mount("#app");

Expected behavior

To have the timepicker.

Actual behavior

Thanks a lot.

Class customization/override not working in version 0.3.3 (in Nuxt)

Overview of the problem

Oruga version: [0.3.3]
Vuejs version: [2.6.12]
Nuxt version: [2.14.12]

Description

I tried to update Oruga from version 0.2.2 to 0.3.3 but the class override features doesn't seem to work anymore.
I'm using Oruga inside a Nuxt project, and I tried both ways to import Oruga in the project: the plugin way and the module way.
At the moment I'm just doing:

button: {
  override: true,
  rootClass: 'my-button',
  variantClass: 'my-button--',
  disabledClass: 'my-button--disabled',
}

which is working just fine with version 0.2.2.

Steps to reproduce

1. Create Nuxt App: yarn create nuxt-app oruga-test and choose Oruga as UI framework
2. Add the code above as the Oruga module options to customize the classes of the button component, as described in the documentation: https://oruga-documentation-preview.netlify.app/documentation/#nuxt-module
3. step into the project folder: cd oruga-test and start it yarn dev
4. the button classes on the homepage of the project should be changed as expected
5. now try to update the version of oruga in the package.json to 0.3.3
6. run the application again. The classes are the defaults, and no longer the ones I've set in nuxt.config

Expected behavior

To be able to override the classes of the components just as I did in the previous version.

Actual behavior

Custom classes are not working.

Thank you very much

Missing type="button" on Tabs buttons

Overview of the problem

Oruga version: 0.3.5
Vuejs version: 2.x
OS/Browser: any

Description

To switch tabs, Oruga use buttons without type="button" but this can cause issues when using tabs in a form. The form will be submitted everytime the user switch tabs, as by default button are from type="submit".

Steps to reproduce

Use tabs in a form.

Expected behavior

The form is not submitted when the active tab is changed.

Actual behavior

The form is submitted when the active tab is changed.

Edit: I've made a PR to fix this: #120. This may not be the only impacted component though.

[bug] arrow on table header not showing when default sort applied

Overview of the problem

Oruga version: [0.3.5]
Vuejs version: [2.6.12]
OS/Browser: chrome

Description

Sorted header doesnt showed up at first, when we use default-sort prop

Steps to reproduce

Set default-sort on table

Expected behavior

Sorted header work and arrow icon will showed up.

This is the reference https://buefy.org/documentation/table/#async-data.
vote count header get sorted at first load, when we set default-sort prop

Actual behavior

Header sorted state not shown

Add multiple autocomplete (tagsinput)

When multiple select true, to select multiple options we need to use ctrl but it can better interface and In our real-life application, we need to select multiple options but here data can be vast. So here we need to use filter to search target option.
You can add this searching option in the search bar which can be a better option

Doc site crashing on Slider

Happening in Chrome + Safari (Mac M1)

I have only seen it happen in the Slider area. I try a couple of the sliders, refresh and it crashes. Page becomes impossible to use.

How to overwrite CSS variables

Can someone please show me how to overwrite a variable?

For instance the $primary color ?

I'm using SCSS.

Thanks a lot!

Vue3: Dropdown error in console (breaks component)

Overview of the problem

Oruga version: [next]
Vuejs version: [3.0.1]
OS/Browser: chrome

Description

The following error in console

dropdown.js?3f50:603 Uncaught (in promise) TypeError: this.$destroy is not a function
    at Proxy.created (dropdown.js?3f50:603)
    at callSyncHook (runtime-core.esm-bundler.js?5c40:5475)
    at applyOptions (runtime-core.esm-bundler.js?5c40:5428)
    at finishComponentSetup (runtime-core.esm-bundler.js?5c40:6050)
    at setupStatefulComponent (runtime-core.esm-bundler.js?5c40:5986)
    at setupComponent (runtime-core.esm-bundler.js?5c40:5926)
    at mountComponent (runtime-core.esm-bundler.js?5c40:4207)
    at processComponent (runtime-core.esm-bundler.js?5c40:4183)
    at patch (runtime-core.esm-bundler.js?5c40:3788)
    at mountChildren (runtime-core.esm-bundler.js?5c40:3996)

Steps to reproduce

<template>
<div>
  <o-dropdown aria-role="list">
    <template v-slot:trigger>
    <o-button variant="primary"  >
      <span>Click me!</span>
      <o-icon icon="caret-down"></o-icon>
    </o-button>
    </template>

      <o-dropdown-item aria-role="listitem">Action</o-dropdown-item>
      <o-dropdown-item aria-role="listitem">Another action</o-dropdown-item>
      <o-dropdown-item aria-role="listitem">Something else</o-dropdown-item>
    </o-dropdown>
</div>

</template>

<script>
export default {}
</script>

Cant change variable using scss variable

Overview of the problem

Oruga version: [0.3.3]
Vuejs version: [2.6.12]
OS/Browser: Chrome

Description

Cant change using scss variable

Steps to reproduce

i'm using nuxt and import like this

import Vue from 'vue'
import Oruga from '@oruga-ui/oruga'
import '@oruga-ui/oruga/dist/oruga-full-vars.css'

Vue.use(Oruga)

then i created index.scss file to customize. i can do it using css variable like this:

:root {
    --oruga-pagination-margin: 1em;
}

but when i using scss variable, it wont work:

$pagination-margin: 1em;

How to override style using scss variable, there is no docs for this
https://oruga.io/documentation/#using-css-or-sass-scss-variables

Modal not showing

On version 0.3.4, and I was using TailwindCSS on my project. No configuration, basically just install Oruga to test it

I was following Open Modal Clip Scroll

https://oruga.io/components/Modal.html#examples

But the modal is not showing. Nothing happen

When inspect the vue dev tools, the o-modal active already true

o-table backend sort event not firing

Overview of the problem

Oruga version: "@oruga-ui/oruga-next": "^0.2.2",
Vuejs version: 3.0.1
OS/Browser: windows

Description

The sort event cannot be captured

Steps to reproduce

<o-table
      :mobileCards="false"

      :data="data"

      paginated
      backend-pagination
      :perPage="7"
      :total="total"

      backend-sorting
      v-model:selected="selected"
      v-model:currentPage="currentPage"
      :paginationSimple="false"
      :paginationPosition="'bottom'"
      scrollable
      stickyHeader

      @sort="onSort"
      @select="selectRow"
      @page-change="pageChange"
>

Expected behavior

The arrow icon on the column being sorted changes

and a console log message from function onSort() listening to @sort is seen when then sort order changes

this shows sort event has been fired.

Actual behavior

I can see the arrow icon change but no console log message

For Vue2 it seems to be working properly

Icons are not displayed in Oruga-next version with custom Iconpack [0.3.3]

Overview of the problem

Oruga version: [0.3.3]
Vuejs version: [3.0.0]
OS/Browser:

Description

Oruga uses default instead of custom Iconpack (working in Oruga version : 0.3.2)

A Custom Iconpack (mdi-Icons) is used.
The Icons are registered like that:

app.use(Oruga, {
	iconComponent: 'icon-mdi',
	iconPack: 'mdijs',
	customIconPacks: {
		mdijs: {
			iconPrefix: 'mdi-',
		},
	},
});
app.component('icon-mdi', iconMdi);

in the Vue component the icons are used like this:

<o-icon icon="map-marker"></o-icon>

Steps to reproduce

1. use Oruga Version 0.3.2
2. create a "o-icon" Tag
3. Icons are working
4. upgrade to Oruga Version: 0.3.3
5. Icons are not working anymore

Expected behavior

Icons from default are being loaded and not from the custom Iconpack.

Actual behavior

Icons from Iconpack are being laoded.

o-field with horizontal label not working

Description

When set horizontal and grouped on a o-field with a label, the child elements are not shown.
Also some other fixes related to this component.

Steps to reproduce

Search

    <o-field grouped message="What do you want to search?">
        <o-input placeholder="Search..."></o-input>
        <o-button variant="primary">Search</o-button>
    </o-field>
</section>

Table: add props to set table class (and th class)

Hi,

Is it possible to add a prop to the table component in order add class on table
This is needed to manage the width of the columns with tailwindcss (table-auto, table-fixed)
Maybe also something is needed at th level to specify the width by tailwind class (w-32, w-1/3)

Thx,
Filip.