Hi,

In order to use the select component inside of an element that has overflow: hidden without the droplist being cut we need to add the "mdc-menu-surface--fixed" class to the ".mdc-select__menu" element (https://github.com/material-components/material-components-web/issues/5590#issuecomment-657032119)

An argument like fullwidth will be very appreciated :)

Thanks

ERROR  Failed to compile with 2 errors

This dependency was not found:

* Vue in ./node_modules/balm-ui/dist/balm-ui-plus.js, ./node_modules/balm-ui/dist/balm-ui.js

To install it, you can run: npm install --save Vue

Development Relevant Information:

BalmUI version: 9.38.2 Browser: Chrome Operating System: Win 10

Hi,

I've got a select input sat inside a slot in a datatable (simplified example):

Markup:

<ui-table :data="requestData"
                :thead="thead"
                :tbody=tbody"

   <template #selectInput="{ data }">
                     <ui-select v-model='mySelectedValue'
                                      :options='myOptions'>
                        Label
                     </ui-select>
</ui-table>

data:

data() {
   return {
      thead: [
         'selectColumn'
      ],
      tbody: [
         {
            slot: 'selectInput'
         }
      ],
      requestData: [
         mySelectedValue: '',
         myOptions: [
             {
                label: 'option 1',
                value: 1
             },
             {
                label: 'option 2',
                value: 2
             }
         ]
      ]
   }
}

However when you click the ui-select to drop down it's selectable options, the menu doesn't render outside of the table row (i.e. you can barely see any more than the original select input).

I've had a quick look at the CSS applied hoping there was maybe an overflow: hidden on the table row but I can't see anything.

Any ideas?

Cheers.

Hi,

I'm wondering what needs to be done in order to override scss?

Looking at the data table SCSS example section, I should be able to just import the following;

@use '@material/data-table' with (
  $fill-color: red,
  $header-row-fill-color: green,
);

This seems to have no effect though? I have other scss in the same file that updates correctly so it's nothing to do with not loading the file etc.

Any ideas / example? Thanks in advance

Hey,

I'm working on a private project. i'm using a lot of ui-autocomplete for searching elements.

With the actual source prop for ui-autocomplete i have to format all my call for matching {'label': '', value: ''}

It's possible to have a source format parameter ?

app.use(BalmUIPlus, {
  UiAutocomplete: {
    sourceFormat: {
      label: 'name',
      value: 'id'
    }
  }
});

Thank you

Hello! Firstly, love using balm ui, I am running into an issue, specifically relating to updating data tables after the fact, my app pulls data from a websocket and displays it in the table, when doing this I get errors logged in the console relating to nextTick. When a message is received it is decoded, and the contents of the data array in the table is updated.

[Vue warn]: Error in nextTick: "TypeError: Cannot read properties of undefined (reading 'hideProgress')"

If I am doing something wrong please do tell me. Thanks In Advance, Adam Mathieson

First of all, thanks for this excellent library!

balm-ui 8.10.0

I found that importing the default BalmUI module results in smaller js bundle size than importing the individual components/directives/plugins. The css bundle, by contrast, is larger in the default case, as expected.

Bundle | Size --- | --- chunk-vendors...js (default) | 611.63 KiB chunk-vendors...js (individual) | 911.78 KiB app...css (default) | 417.97 KiB app...css (individual) | 210.83 KiB

The imported individual components/directives/plugins were:

import $theme from 'balm-ui/plugins/theme'
import $typography from 'balm-ui/plugins/typography'
import UiIcon from 'balm-ui/components/icon'
import UiButton from 'balm-ui/components/button'
import UiIconButton from 'balm-ui/components/icon-button'
import UiTopAppBar from 'balm-ui/components/top-app-bar'
import UiGridComponents from 'balm-ui/components/grid'
import UiForm from 'balm-ui/components/form'
import UiFormField from 'balm-ui/components/form-field'
import UiDivider from 'balm-ui/components/divider'
import UiDrawerComponents from 'balm-ui/components/drawer'
import UiMenuComponents from 'balm-ui/components/menu'
import UiTextfieldComponents from 'balm-ui/components/textfield'
import UiCheckbox from 'balm-ui/components/checkbox'
import UiListComponents from 'balm-ui/components/list'
import UiCardComponents from 'balm-ui/components/card'
import vRipple from 'balm-ui/directives/ripple'

Am I missing something?

"balm-ui": "^10.4.0" "vuex": "^4.0.2", "vue": "3"

I have a file shims-vuex.d.ts with the following content:

import { SharedState, TeacherState, StudentState } from "./store/types";
import { Store } from "vuex";

declare module "@vue/runtime-core" {
  interface State {
    shared: SharedState;
    teacher: TeacherState;
    student: StudentState;
  }

  interface ComponentCustomProperties {
    $store: Store<State>;
  }
}

as soon as I use BamlUI in my main.ts file like this:

import BalmUI from "balm-ui";
import "balm-ui-css";

const app = createApp(App);
app
  .use(BalmUI)
  .mount("#app")

all the spots where I do this.$store in my components raise errors like: Property 'getters' does not exist on type 'ComponentInternalInstance'. and the project fails to compile.

I suspect for some reason the type Store being used when I try to access $store in my components is BalmUI's and not the one I defined inside of my shims file.

How can this be fixed?

Development Relevant Information:

• BalmUI version: 9.41.0✨
• Browser: Microsoft Edge 版本 97.0.1072.76 (官方内部版本) (64 位)
• Operating System: Windows 10 pro

Description:

1. The button that shows the plaintext seems to only appear when the text field is empty, I don't know if that's what you planned, but I would like to be able to show the button when the text field is empty, or add an option for this, if not, that's fine. GIF demo
2. I want that effect But if I write it this way, it doesn't seem to work. I don't know what went wrong.

Steps To Reproduce:

n/a

Hello, I am running the latest version on Balm ui on vue3 and I have the following error in the console (it's also blocking all my component from loading)

It's me ! Again...

Sorry to bother you @elf-mouse

When i try to compile to prod i got an error.

> [email protected] docs J:\balm-ui
> cross-env NODE_ENV=production balm -p --docs

BalmJS version: 3.9.1
[19:53:48] BalmJS i <clean task> 'assets' is local directory: true
[19:53:48] BalmJS ‼ <clean task> { deletedPaths: [ 'J:\\balm-ui\\dist' ] }
Hash: be5b3d1d4ce72632fec1
Version: webpack 4.44.2
Time: 12492ms
Built at: 2020-11-27 19:54:07
                              Asset       Size  Chunks                                Chunk Names
                          js/app.js   1.38 MiB       0  [emitted]              [big]  app
           js/assets/1.0fb9c0ac.jpg   30.8 KiB          [emitted] [immutable]
           js/assets/1.859e0c2f.jpg   15.6 KiB          [emitted] [immutable]
          js/assets/10.88157fee.jpg   33.8 KiB          [emitted] [immutable]
          js/assets/11.d0880493.jpg   36.9 KiB          [emitted] [immutable]
          js/assets/12.147ee708.jpg   27.2 KiB          [emitted] [immutable]
          js/assets/13.975a9bf1.jpg   31.7 KiB          [emitted] [immutable]
          js/assets/14.ca7fe944.jpg   28.3 KiB          [emitted] [immutable]
          js/assets/15.d850efb7.jpg   30.2 KiB          [emitted] [immutable]
          js/assets/16.816c91d0.jpg   33.7 KiB          [emitted] [immutable]
           js/assets/2.7e817c3c.jpg     31 KiB          [emitted] [immutable]
           js/assets/2.e7480c88.jpg   36.5 KiB          [emitted] [immutable]
           js/assets/3.5d1dde2f.jpg     14 KiB          [emitted] [immutable]
           js/assets/3.a28c3e60.jpg   38.1 KiB          [emitted] [immutable]
           js/assets/4.d875b9e4.jpg   26.2 KiB          [emitted] [immutable]
           js/assets/4.ed598cbb.jpg   29.3 KiB          [emitted] [immutable]
           js/assets/5.1da36d8c.jpg   23.1 KiB          [emitted] [immutable]
           js/assets/5.654a4b0e.jpg   22.9 KiB          [emitted] [immutable]
           js/assets/6.c6d607fe.jpg   21.9 KiB          [emitted] [immutable]
           js/assets/6.e0f7a437.jpg   24.3 KiB          [emitted] [immutable]
           js/assets/7.3f8032b7.jpg     34 KiB          [emitted] [immutable]
           js/assets/7.6694d7b2.jpg   34.4 KiB          [emitted] [immutable]
           js/assets/8.2903d41b.jpg   40.5 KiB          [emitted] [immutable]
           js/assets/8.c6de9b29.jpg   35.9 KiB          [emitted] [immutable]
           js/assets/9.f1f0a835.jpg   31.8 KiB          [emitted] [immutable]
js/assets/card-media-h.e728c270.png   36.1 KiB          [emitted] [immutable]
js/assets/card-media-v.0495eb73.png   27.2 KiB          [emitted] [immutable]
            js/async/10.ea7e791f.js   1.88 KiB      10  [emitted] [immutable]
            js/async/11.707e9649.js   2.56 KiB      11  [emitted] [immutable]
            js/async/12.5b227932.js   1.85 KiB      12  [emitted] [immutable]
            js/async/13.005a7291.js  696 bytes      13  [emitted] [immutable]
            js/async/14.08cf3476.js   1.39 KiB      14  [emitted] [immutable]
            js/async/15.b5b5c7c7.js   2.11 KiB      15  [emitted] [immutable]
            js/async/16.62114161.js   4.15 KiB      16  [emitted] [immutable]
            js/async/17.f0826a27.js   4.34 KiB      17  [emitted] [immutable]
            js/async/18.0b3c17be.js   2.29 KiB      18  [emitted] [immutable]
            js/async/19.6a992d18.js   3.76 KiB      19  [emitted] [immutable]
            js/async/20.4a2b71e6.js   5.13 KiB      20  [emitted] [immutable]
            js/async/21.1350339e.js   2.12 KiB      21  [emitted] [immutable]
            js/async/22.3ada3462.js    4.8 KiB      22  [emitted] [immutable]
            js/async/23.28b2fd69.js   4.93 KiB      23  [emitted] [immutable]
            js/async/24.8502d170.js   3.67 KiB      24  [emitted] [immutable]
            js/async/25.9b39e737.js   1.75 KiB      25  [emitted] [immutable]
            js/async/26.dd337051.js   9.68 KiB      26  [emitted] [immutable]
            js/async/27.45d60bf9.js   5.74 KiB      27  [emitted] [immutable]
            js/async/28.8bff8f07.js   7.18 KiB      28  [emitted] [immutable]
            js/async/29.b37e8278.js   9.19 KiB      29  [emitted] [immutable]
             js/async/3.e11569c4.js   5.48 KiB       3  [emitted] [immutable]
            js/async/30.1f03b0da.js   2.17 KiB      30  [emitted] [immutable]
            js/async/31.78d999a7.js   2.05 KiB      31  [emitted] [immutable]
            js/async/32.b4ed9b65.js   3.68 KiB      32  [emitted] [immutable]
            js/async/33.791b1279.js   1.13 KiB      33  [emitted] [immutable]
            js/async/34.2febd084.js  646 bytes      34  [emitted] [immutable]
            js/async/35.4f9f3bf3.js   8.04 KiB      35  [emitted] [immutable]
            js/async/36.798efbad.js   1.71 KiB      36  [emitted] [immutable]
            js/async/37.e7bcb41b.js   3.29 KiB      37  [emitted] [immutable]
            js/async/38.7ab936b9.js   2.06 KiB      38  [emitted] [immutable]
            js/async/39.1f09e840.js   1.34 KiB      39  [emitted] [immutable]
             js/async/4.a2450fa7.js   20.8 KiB       4  [emitted] [immutable]
            js/async/40.9cecac9c.js   1.92 KiB      40  [emitted] [immutable]
            js/async/41.64cccc3f.js   3.62 KiB      41  [emitted] [immutable]
            js/async/42.9278a9cf.js   10.4 KiB      42  [emitted] [immutable]
            js/async/43.57e3f644.js   11.7 KiB      43  [emitted] [immutable]
            js/async/44.8a4e6a30.js   1.49 KiB      44  [emitted] [immutable]
            js/async/45.dbc728bc.js   3.58 KiB      45  [emitted] [immutable]
            js/async/46.f294f4bd.js   2.07 KiB      46  [emitted] [immutable]
            js/async/47.1f5073c3.js   1.65 KiB      47  [emitted] [immutable]
            js/async/48.25f0411c.js   3.23 KiB      48  [emitted] [immutable]
            js/async/49.a18b466b.js   1.76 KiB      49  [emitted] [immutable]
             js/async/5.60f9b4de.js   7.61 KiB       5  [emitted] [immutable]
            js/async/50.6ab4ee43.js   1.72 KiB      50  [emitted] [immutable]
            js/async/51.3d51b730.js   1.86 KiB      51  [emitted] [immutable]
            js/async/52.9a959c17.js   2.58 KiB      52  [emitted] [immutable]
            js/async/53.f0c62ecb.js   1.99 KiB      53  [emitted] [immutable]
            js/async/54.8653c2be.js   1.75 KiB      54  [emitted] [immutable]
            js/async/55.55eac751.js   1.71 KiB      55  [emitted] [immutable]
            js/async/56.348c4847.js  445 bytes      56  [emitted] [immutable]
            js/async/57.9f0179ec.js  387 bytes      57  [emitted] [immutable]
            js/async/58.bb11943a.js  382 bytes      58  [emitted] [immutable]
            js/async/59.d6f386c9.js  436 bytes      59  [emitted] [immutable]
             js/async/6.44305576.js   7.11 KiB       6  [emitted] [immutable]
            js/async/60.926b1284.js  356 bytes      60  [emitted] [immutable]
            js/async/61.1794a259.js  577 bytes      61  [emitted] [immutable]
            js/async/62.8fb71dc5.js   1.07 KiB      62  [emitted] [immutable]
            js/async/63.7b9a710a.js   1.27 KiB      63  [emitted] [immutable]
            js/async/64.53e205fb.js   2.97 KiB      64  [emitted] [immutable]
            js/async/65.07f4afae.js  473 bytes      65  [emitted] [immutable]
            js/async/66.94af1b2d.js  742 bytes      66  [emitted] [immutable]
            js/async/67.7ac2da5e.js   2.69 KiB      67  [emitted] [immutable]
            js/async/68.97613f21.js   6.53 KiB      68  [emitted] [immutable]
            js/async/69.5626c96f.js  254 bytes      69  [emitted] [immutable]
             js/async/7.2ce3d650.js   1.42 KiB       7  [emitted] [immutable]
            js/async/70.191c217e.js  484 bytes      70  [emitted] [immutable]
             js/async/8.fa1e68a5.js   1.25 KiB       8  [emitted] [immutable]
             js/async/9.39d03011.js   3.86 KiB       9  [emitted] [immutable]
                 js\vendor\hello.js    271 KiB       1  [emitted]              [big]  hello.js
                    js\vendor\ui.js   85.6 KiB       2  [emitted]                     ui.js
Entrypoint app [big] = js\vendor\ui.js js\vendor\hello.js js/app.js

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
  js/app.js (1.38 MiB)
  js\vendor\hello.js (271 KiB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  app (1.73 MiB)
      js\vendor\ui.js
      js\vendor\hello.js
      js/app.js

[19:54:07] BalmJS × <image task> EPERM: operation not permitted, futime
J:\balm-ui\node_modules\async-done\index.js:18
    throw err;
    ^

Error [ERR_UNHANDLED_ERROR]: Unhandled error. ({
  uid: 9,
  name: 'balm:image',
  branch: false,
  error: Error: premature close
      at onclosenexttick (J:\balm-ui\node_modules\end-of-stream\index.js:53:86)
      at processTicksAndRejections (internal/process/task_queues.js:79:11),
  duration: [ 0, 59933100 ],
  time: 1606503247365
})
    at Gulp.emit (events.js:303:17)
    at Gulp.EventEmitter.emit (domain.js:483:12)
    at Object.error (J:\balm-ui\node_modules\undertaker\lib\helpers\createExtensions.js:61:10)
    at handler (J:\balm-ui\node_modules\now-and-later\lib\mapSeries.js:47:14)
    at f (J:\balm-ui\node_modules\once\once.js:25:25)
    at f (J:\balm-ui\node_modules\once\once.js:25:25)
    at tryCatch (J:\balm-ui\node_modules\async-done\index.js:24:15)
    at Pumpify.done (J:\balm-ui\node_modules\async-done\index.js:40:12)
    at Pumpify.f (J:\balm-ui\node_modules\once\once.js:25:25)
    at onclosenexttick (J:\balm-ui\node_modules\end-of-stream\index.js:53:73)
    at processTicksAndRejections (internal/process/task_queues.js:79:11) {
  code: 'ERR_UNHANDLED_ERROR',
  context: {
    uid: 9,
    name: 'balm:image',
    branch: false,
    error: Error: premature close
        at onclosenexttick (J:\balm-ui\node_modules\end-of-stream\index.js:53:86)
        at processTicksAndRejections (internal/process/task_queues.js:79:11),
    duration: [ 0, 59933100 ],
    time: 1606503247365
  }
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] docs: `cross-env NODE_ENV=production balm -p --docs`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] docs script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\JFRAG\AppData\Roaming\npm-cache\_logs\2020-11-27T18_54_07_445Z-debug.log
The terminal process "C:\Windows\System32\WindowsPowerShell\v1.0\powershell.exe -Command npm run docs" terminated with exit code: 1.

Hi @elf-mouse ,

I've just tried updating my version of balm-ui from 10.9.3 to 10.13.4 and noticed that where I have select inputs inside of data grid row templates, the select options now don't show outside of the current row, cutting off basically the entirety of the content of the select options. I believe this was an issue in the past that we resolved, would you mind having a look if this is something that's broken again?

edit: Similar to the original issue from here: https://github.com/balmjs/balm-ui/issues/91

Cheers.

Bumps json5 from 2.2.1 to 2.2.3.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Bumps decode-uri-component from 0.2.0 to 0.2.2.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Bumps loader-utils from 2.0.2 to 2.0.4.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Development Relevant Information:

• BalmUI version: 10.12.0
• Browser: Chrome
• Vue version: 3.2.38

Description:

I'm using<ui-tabs> in a vue component in a single page application that uses vue-router. The problem is thatmdc-tab-bar seems to hijack the app's scroll position, so that it is exactly set at the middle of the viewport (with the first tab focused).

Expected behavior is that that the tab won't receive focus and will certainly not hijack the scroll position.

Any help is greatly appreciated!

kind regards, Marco

Development Relevant Information:

• BalmUI version: 10.12.10
• Browser: Chrome 89 & MS Edge 87 (Chrome 105 on Ubuntu 22.04)
• Operating System: Windows 10

Description:

Using the latest VueJS 3 created using npm init vue@latest (included balm-test.zip file) and then setting up following the documentation on the balm-ui website, the textfields do not have the expected ripple / underline.

Steps To Reproduce:

Included minimal repro project... extract project run yarn install in the project folder run yarn dev to start the app browse to http://localhost://5173

Expected ripple to be shown like in the documentation for a filled input, actual result attached.

Simple minimal example: balm-test.zip

Expected to look something like this:

Ends up looking like this (notice the missing underline):

A couple of things to note, the "expected" image shows the input in it's non-focused form, however when you click on it, the label moves up and the underline changes to purple.

The "actual" image shows the input in it's focused state. The ripple / underline does not appear in either the focused or non-focused state