Material design for Vue.js

Hey @marcosmoura and team, I'm integrating Vue Material with Nuxt (which uses SSR) as per their plugins instructions and get [Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. so I created an issue over there if you want to have a look - might be good for both projects - https://github.com/nuxt/nuxt.js/issues/76

I've looked at a lot of vue-material they are either old and not compatible with Vue@2 or incomplete and an inconsistent. i like the aim for this package

Vue Material is lightweight framework built exactly according to the Material Design specs.

I would love to see date and time picker implemented as well

After a while I had to create this component from the ground up.

Please, feel free to take a look in the code and help me out.

Usage example:

<md-input-container>
  <md-autocomplete
    :fetch="customFetchFunction"
    print-attribute="name"
    query-param="q"
    :debounce="1000"
    :minChars="3"
    v-model="object.name"
    @selected="setSelectedElement"/>
</md-input-container>

Or even with no fetch at all:

<md-input-container>
  <md-autocomplete
    :list="[{name: 'oi'}, {name: 'hi'}, {name: 'salut'}]",
    :filter-list="filterFunction"
    print-attribute="name"
    :debounce="5E2"
    :minChars="1"
    v-model="object.name"
    @selected="setSelectedElement"/>
</md-input-container>

Example

The only requirement in this component is to have a Vue.**$http** variable available when NOT using the :fetch prop.

Soon I'll make another PR for a Chips + Autocomplete component. Cheers.

Steps to reproduce

1. Currently using vue 2.5.13, vue-material 1.0.0-beta-8, vuex 3.0.1
2. Create an md-table populated via vuex (code below) that includes an md-table-empty-state
3. Scroll to the bottom of the page
4. Despite there being data, the md-table-empty-state appears

Which browser?

Currently testing on OSX, Chrome 65.

What is expected?

The md-table-empty-state should only appear when there's no data.

What is actually happening?

The md-table-empty-state is always happening

Reproduction Link

https://codesandbox.io/s/y2wyporwr9

Edit: Reproduction repo here: https://github.com/mattgrande/md-empty-state-reproduce

Hi, Can you please take a look at this codepen https://codepen.io/zapping/pen/bBPyOz .

I tried added the tabs component. But when the no. of tabs increases it does not seem to have a scroll option on desktop browser nor can the tabs be swipped on mobile.

Have I missed/overlooked something? Can you please clarify on how the tab heads can be navigated in such a case i,e when you have lots of tabs. It will be preferable to have the swipe option.

Thanks and you have a great set of components.

Steps to reproduce

When filling a MdList into MdTab content from an async source, the height is not set correctly for initial tab. eg I have this in my template.

events is filled in vuex, after calling an axios.get(...).

<md-tabs class="md-transparent" md-alignment="fixed">
                <md-tab id="tab-list-view" md-label="lijst" md-icon="list">
                    <div class="md-content">
                        <md-list>
                            <md-list-item :to="'/hikes/' + event.id" class="md-double-line" v-for="event in events"
                                          :key="event.id">
                                <div class="md-list-item-text">
                                    <ul class="meta md-layout">
                                        <li>
                                            <md-icon>today</md-icon>
                                            {{event.takes_place_on | shortDate}}
                                        </li>
                                        <li>
                                            <md-icon>location_on</md-icon>
                                            op {{event.start_location | fromPosition(currentLocation) | convert('m',
                                            'km', 1,
                                            true)}}
                                        </li>
                                        <li>
                                            <md-icon>directions_walk</md-icon>
                                            {{event.distances[0] | convert('m', 'km', 2, true)}}
                                        </li>
                                    </ul>
                                    <div class="description text-primary">
                                        {{event.name}} ({{event.organised_by_club.name}})
                                    </div>
                                </div>
                            </md-list-item>
                        </md-list>
                    </div>
                </md-tab>
                <md-tab id="tab-calendar-view" md-label="kalender" md-icon="today">
                    <div class="md-content"></div>
                </md-tab>
</md-tabs>

Initial view is this: (where md-tabs-content is set to style="height: 16px;")

When changing tab and return back to this tab:

Which browser?

Vue v2.5.13 Vue-material 1.0.0-beta-8

Any browser

What is expected?

When content is changed, a redraw should happen, so correct height is generated.

What is actually happening?

Content height was computed before async data was loaded. So height is set to 16px;

Reproduction Link

I poorly just don't get this to run.

Steps to reproduce

As soon as I import - import { MdApp } from 'vue-material/dist/components' import 'vue-material/dist/vue-material.min.css' Vue.use(MdApp)

to my project, I get:

index.js:1 Uncaught ReferenceError: regeneratorRuntime is not defined at index.js:1 at Object../node_modules/vue-material/dist/components/index.js.Object.defineProperty.value (index.js:1)

I am working with JeffreyWay/laravel-mix let mix = require('laravel-mix'); mix.js('resources/assets/spa/main.js','public/js/app')

Happens also if i try to import the whole bundle or other components.

Hello,

i want to use md autocomplete, with list prop and filteredList but i have an error

Error in nextTick: "Error: You should use a fetch function prop"

my code below : <md-autocomplete :min-chars="3" v-model="searchAgenciesQuery" :list="agencies" :filter-list="filteredAgencies" ">

agencies is the result of my promise

Services.getAgencies({size: 1000, page: 0}).then(resp => {
        this.agencies = resp
      })

filteredAgencies is my filter method :

filteredAgencies () {
        let query = this.searchAgenciesQuery
        if (query) {
          return this.agencies.filter(agency => {
            let filterByName = agency.name ? agency.name.toLowerCase().includes(query.toLowCase()) : ''
            let filterById = agency.id !== null ? agency.id.includes(query) : ''
            return filterByName || filterById
          })
        }
      }

I don't understand the difference between list prop and fetch prop. I don't use fetch cuz i have to store locally my agencies, so my promise is not for the fetch that it should return but it implement on the created, so i dont want to use fetch way

 created () {
      Services.getAgencies({size: 1000, page: 0}).then(resp => {
        this.agencies = resp
      })
    },

Thanks a lot for your help

Steps to reproduce

1. JavaScript - Create a vue object with one property as an array;
2. HTML - Bind at least two md-checkbox using a v-model with the property of step 1 with different values (e.g. 1 and 2);
3. HTML - Show the value of the property of step 1;
4. Check one checkbox.

Which browser?

Google Chrome version 62.0.3202.89 64 bits using VueMaterial 1.0.0-beta-4

What is expected?

Only the checked checkbox should be marked and the content of the property matrix binded to the checkbox should contain only the value of the checked checkbox. If another checkbox is checked, the array must also contain the checked value.

In summary, the array property must contain the value that represents the checked checkboxes.

What is actually happening?

• Old version of VueMaterial: When any checkbox is checked all is checked (https://jsfiddle.net/JaderCM/2wt85dt5/)

• Version 1.0.0-beta-4 of VueMaterial: The checkbox component is not rendered.

Reproduction Link

https://jsfiddle.net/JaderCM/2wt85dt5/7/

<md-bottom-bar md-sync-route>
  <md-bottom-bar-item to="/hot" md-label="Home" md-icon="home"></md-bottom-bar-item>
  <md-bottom-bar-item to="/mobile" md-label="Posts" md-icon="perm_identity"></md-bottom-bar-item>
  <md-bottom-bar-item to="/formDemo" md-label="Favorites" md-icon="favorite"></md-bottom-bar-item>
</md-bottom-bar>

my vue version is 2.5.2, thanks~

Hi, I've switched to the latest version (from a working 0.5.x), and I got:

ERROR in ./~/vue-material/dist/vue-material.js
Module not found: Error: Cannot resolve module 'Vue' in /home/da/ibt2/node_modules/vue-material/dist

@ ./~/vue-material/dist/vue-material.js 6:83-97

I include vue-material with: import Vue from 'vue'; import VueMaterial from 'vue-material'; import 'vue-material/dist/vue-material.css';

Am I doing something wrong, or is it a bug?

I've also tried removing the whole node_modules directory and rebuilding it with npm install, to no avail.

Thanks.

"Forbid manual entering to input element. The only way to choose date is interacting with dialog."

https://user-images.githubusercontent.com/39626061/187055488-e6fdc227-75c2-4b91-bb81-1fa9456e5d74.mp4

after reopening dialog window appears out of screen bounds in the usual case mounted hook in mdpopover should fixing this, but here we using keep-alive in MdDatepicker so it's not

https://user-images.githubusercontent.com/39626061/187054220-c4d1f8da-bb3b-4fd7-b33c-5ce9d9b0bd9c.mp4

this PR automatically updates popper on activated hook (Called when the component is activated inside )

Steps to reproduce

Setup a nuxt.js project on Vercel, add vue-material to the dependencies and deploy. The problem happens during the build, where the @nuxt/vercel-builder tries to install devDependencies and fails with this message:

...
[17:02:52.479] [log] Running with @nuxt/vercel-builder version 0.22.1
[17:02:52.479] [log]  ----------------- Prepare build ----------------- 
[17:02:52.480] [log] Downloading files...
[17:02:52.488] [log] Working directory: /vercel/path2
[17:02:52.511] [log] Using yarn
[17:02:52.513] [info] Prepare build took: 33.743406 ms
[17:02:52.513] [log]  ----------------- Install devDependencies ----------------- 
[17:02:52.514] [log] Using cached node_modules_dev
[17:02:52.859] yarn install v1.22.17
[17:02:52.974] [1/5] Resolving packages...
[17:02:53.614] [2/5] Fetching packages...
[17:02:54.971] [3/5] Linking dependencies...
[17:04:20.904] [4/5] Building fresh packages...
[17:04:21.802] error /vercel/path2/node_modules/vue-material: Command failed.
[17:04:21.802] Exit code: 127
[17:04:21.802] Command: opencollective-postinstall
[17:04:21.803] Arguments: 
[17:04:21.803] Directory: /vercel/path2/node_modules/vue-material
[17:04:21.803] Output:
[17:04:21.803] /bin/sh: opencollective-postinstall: command not found
[17:04:21.803] info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
[17:04:22.003] Error: Command "yarn install" exited with 127
...

What is expected?

No errors.

What is actually happening?

I am not sure why this error occurs, but I found this issue with opencollective-postinstall and I believe that a workaround such as the ones proposed in there would work around the issue, e.g. using "postinstall": "opencollective-postinstall || true" or "postinstall": "opencollective-postinstall || exit 0".

What's the problem

I know there is already an open request for this but there is no update or information ( see #2173 and #2174 ). I am trying to create a Web Component using vue-material but I am having a problem once the component is built.

When I am in dev mode there is no problem, the CSS styles load correctly and everything works fine.

see here:

But once the component build (using this command vue-cli-service build --target wc --inline-vue --name dsd-planning-component), I end up with a part of the CSS that doesn't apply correctly (especially with the DatePicker modal) the rest seems ok.

I have already tried to use vue-material but without success. I followed the steps to install and use vue-material and I even forced the import of css in the style tag.

<template id="x-dsd-planning-component">
    <div id="app">
        <div class="head_row">
            <div class="sub_head_row">
                <p>Planning {{ this.selectedDate }}</p>
                <md-datepicker v-model="selectedDate">
                    <label>Select a date</label>
                </md-datepicker>
            </div>
            <md-button class="md-raised md-primary">Test de bouton</md-button>
        </div>
    </div>
</template>

<script lang="ts">
import VueMaterial from "vue-material"
import "vue-material/dist/vue-material.min.css"
import "vue-material/dist/theme/default.css"


Vue.use(VueMaterial)

@Component({
    components: {
    }
})
export default class dsdPlanningComponent extends Vue {
    ...
}
</script>

<style>
/*@import "../node_modules/vuetify/dist/vuetify.css";*/
@import "vue-material/dist/vue-material.css";
@import "vue-material/dist/theme/default.css";
#app {
    ...
}
...
</style>

Steps to reproduce

1. Create a project using vue-clie and Vue 2 along with Typescript
2. Install vue-material
3. Follow the "template" I wrote above
4. Build the Web Component

Which browser?

"vue": "^2.6.14", "vue-material": "^1.0.0-beta-15", "typescript": "~4.5.5", And I'm on Chrome

What is expected?

I'd like the component once built to work exactly as in dev mode.

What is actually happening?

Using Vuetify, I know that the problem was related to encapsulating the component in a Shadow Dom and that the Vuetify CSS styles were in the and not in the . But now once the component is built, I don't see any