Vue wrapper arround Material Components for the Web

Overview

Material Components for Vue

Build Status

Vue components (Vue 3.0) for Material Web Components which uses the Using Foundations and Adapters integration technique.

This project defines Vue components that use the Material Components Web library to implement Material Design.mization while sticking to the Vue Spirit (approachable, versatile, and performant)

This is the Vue 3 version, for the Vue 2 version install vue-material-adapter-legacy see Legacy Vue 2 (semantic version references to the previous version eg. [email protected]^0.17.3 will continue to work normally with Vue 2).

Install

$ npm install vue-material-adapter

Documentation & Demo

See Documentation & Demo for working examples of how to structure the markup for Vue.

Examples

There are examples of using vue-material-adapter both as a basic-vue-cli and a basic-webpack project examples.

Release Notes

See Release Notes

Building and running demo

Install dependencies

npm install vue-material-adapter

to build everything

npm run build
npm run build:demo

to run demo

npm run dev

Acknowledgements

This project is based on a fork of the successful vue-mdc-adapter project.

Comments
  • Theme colors not applied

    Theme colors not applied

    Theme not applied

    Editing src/styles/theme.scss for your sample project do not result in a change of colors.

    What vue-material-adapter Version are you using?

    0.16.8, 0.16.9 and 0.17.0-beta.10 give the same results

    What browser(s) is this bug affecting?

    Safari, Chrome, Firefox

    What OS are you using?

    macOS Catalina 10.15.6

    What are the steps to reproduce the bug?

    1. In the codebase, cd to examples/basic-vue-cli
    2. OPTIONAL: update package.json with "vue-material-adapter": "^0.16.9"
    3. run npm install
    4. edit examples/basic-vue-cli/src/styles/theme.scss to change theme colors, for example with:
    @use '@material/theme'  with (
      $primary: #FEDBD0,
      $on-primary: #442C2E,
      $secondary: #FEEAE6,
      $on-secondary: #442C2E,
      $surface: #FFFBFA,
      $on-surface: #442C2E,
      $background: #FFFFFF,
      //$on-background: #442C2E, // Causes an error reproduced bellow
    );
    

    What is the expected behavior?

    Color should change, in the case above to Shrine theme.

    What is the actual behavior?

    Colors remain the default ones.

    Any other information you believe would be useful?

    Additionally to running your examples/basic-vue-cli, I set up another project from scratch, using the latest versions for all packages in package.json, with the exact same result: theme colors not applied. The Github repo is here.

    A CodeSandbox with basically the similar code presents a different issue: the components do not receive any style at all.

    An additional error, probably unrelated

    Most likely not related to the issue described above, the use of $on-background causes an error on the sass-loader. It's probably an upstream problem, but since I bumped into it, I reproduce it here for the sake of completeness.

    Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
    SassError: This module was already loaded, so it can't be configured using "with".
       ┌──> node_modules/@material/theme/_index.scss
    4  │   @forward "./functions";
       │   ^^^^^^^^^^^^^^^^^^^^^^ new load
       ╵
       ┌──> node_modules/@material/theme/_variables.scss
    25 │   @use "./functions";
       │   ━━━━━━━━━━━━━━━━━━ original load
       ╵
       ┌──> vue-material-adapter/examples/basic-vue-cli/src/styles/theme.scss
    1  │ ┌ @use '@material/theme'  with (
    2  │ │   $primary: #FEDBD0,
    3  │ │   $on-primary: #442C2E,
    4  │ │   $secondary: #FEEAE6,
    5  │ │   $on-secondary: #442C2E,
    6  │ │   $surface: #FFFBFA,
    7  │ │   $on-surface: #442C2E,
    8  │ │   $background: #FFFFFF,
    9  │ │   $on-background: #442C2E,
    10 │ │ );
       │ └─^ configuration
       ╵
      node_modules/@material/theme/_index.scss 4:1  @use
      stdin 1:1                                     root stylesheet
    
    opened by marcolabreu 9
  • Update html-webpack-plugin to the latest version 🚀

    Update html-webpack-plugin to the latest version 🚀


    ☝️ Important announcement: Greenkeeper will be saying goodbye 👋 and passing the torch to Snyk on June 3rd, 2020! Find out how to migrate to Snyk and more at greenkeeper.io


    The devDependency html-webpack-plugin was updated from 3.2.0 to 4.0.0.

    This version is not covered by your current version range.

    If you don’t accept this pull request, your project will work just like it did before. However, you might be missing out on a bunch of new features, fixes and/or performance improvements from the dependency update.


    Publisher: jantimon License: MIT

    Find out more about this release.


    FAQ and help

    There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.


    Your Greenkeeper bot :palm_tree:

    greenkeeper 
    opened by greenkeeper[bot] 9
  • Update husky to the latest version 🚀

    Update husky to the latest version 🚀

    The devDependency husky was updated from 3.1.0 to 4.0.2.

    This version is not covered by your current version range.

    If you don’t accept this pull request, your project will work just like it did before. However, you might be missing out on a bunch of new features, fixes and/or performance improvements from the dependency update.


    Publisher: typicode License: MIT

    Release Notes for v4.0.2
    • Fix: show error message when hook fails
    Commits

    The new version differs by 10 commits.

    See the full diff


    FAQ and help

    There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.


    Your Greenkeeper bot :palm_tree:

    greenkeeper 
    opened by greenkeeper[bot] 9
  • Update prettier to the latest version 🚀

    Update prettier to the latest version 🚀


    ☝️ Important announcement: Greenkeeper will be saying goodbye 👋 and passing the torch to Snyk on June 3rd, 2020! Find out how to migrate to Snyk and more at greenkeeper.io


    The devDependency prettier was updated from 1.19.1 to 2.0.0.

    This version is not covered by your current version range.

    If you don’t accept this pull request, your project will work just like it did before. However, you might be missing out on a bunch of new features, fixes and/or performance improvements from the dependency update.


    Publisher: thorn0 License: MIT

    Find out more about this release.


    FAQ and help

    There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.


    Your Greenkeeper bot :palm_tree:

    greenkeeper 
    opened by greenkeeper[bot] 5
  • Update extract-loader to the latest version 🚀

    Update extract-loader to the latest version 🚀

    The devDependency extract-loader was updated from 3.1.0 to 4.0.0.

    This version is not covered by your current version range.

    If you don’t accept this pull request, your project will work just like it did before. However, you might be missing out on a bunch of new features, fixes and/or performance improvements from the dependency update.


    Publisher: peeri License: Unlicense

    Release Notes for v4.0.0

    4.0.0 (2020-01-27)

    chore

    BREAKING CHANGES

    • remove node v6 support
    Commits

    The new version differs by 3 commits.

    • 0ffa05f chore(release): 4.0.0 [skip ci]
    • 3938c75 chore(): remove node v6 support
    • 09cade1 Adds the --save-dev flag to the install command (#49)

    See the full diff


    FAQ and help

    There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.


    Your Greenkeeper bot :palm_tree:

    greenkeeper 
    opened by greenkeeper[bot] 5
  • Partial import

    Partial import

    Nice to see that someone picks up on material adapter! Great job!

    I just need the tabs component in my project. Are there any plans to support partial/selective import?

    opened by henrikekblad 5
  • Sticking drawer

    Sticking drawer

    vue-material-adapter is still under active development. You can see our current progress on master.

    Bugs

    Follow the template below to ensure the quickest and most accurate response to your issue.

    What vue-material-adapter Version are you using?

    vue-material-adapter: 1.0.0

    What browser(s) is this bug affecting?

    Chrome 88

    What OS are you using?

    Ubuntu 20

    What are the steps to reproduce the bug?

    When using drawer it listens when you click out of it and toggles it hence closes.

    What is the expected behavior?

    Provide prop to stop auto hiding.

    What is the actual behavior?

    No props.

    opened by simultsop 4
  • Fail to import with sass-loader

    Fail to import with sass-loader

    ** PLEASE READ THIS BEFORE FILING AN ISSUE **

    vue-material-adapter is still under active development. You can see our current progress on master.

    Bugs

    Follow the template below to ensure the quickest and most accurate response to your issue.

    What vue-material-adapter Version are you using?

    0.12.1

    What browser(s) is this bug affecting?

    Chrome Version 78.0.3904.97 (Official Build) (64-bit)

    What OS are you using?

    Arch Linux

    What are the steps to reproduce the bug?

    1. Create a vue project with vue-cli v4
    2. Follow the Webpack/Rollup section in Getting started instruction
    3. In theme.scss, import the styles with @import "~vue-material-adapter/style";

    What is the expected behavior?

    Work fine.

    What is the actual behavior?

    The theme.scss doesn't compile:

    Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
    SassError: Can't find stylesheet to import.
      ╷
    7 │ @import "~vue-material-adapter/style";
      │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
      ╵
      /home/perqin/Workspaces/yukiri/yukiri-im-web/src/theme.scss 7:9  root stylesheet
    
     @ ./src/theme.scss 4:14-216 14:3-18:5 15:22-224
     @ ./src/main.ts
     @ multi (webpack)-dev-server/client?http://192.168.50.8:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.ts
    

    Any other information you believe would be useful?

    I've explored the node_modules/vue-material-adapter/ directory but no any styles.* found:

    $ ls node_modules/vue-material-adapter
    dist  index.js  index.scss  LICENSE  package.json  README.md
    
    opened by perqin 4
  • fix: setting menu-surface position

    fix: setting menu-surface position

    The issue is that setting style property to "undefined" doesn't reset the current value. Because of that, depending on the current position of the menu, it is positioned using both "top" and "bottom" properties. The result is that menu changes its size instead of just being positioned.

    Fixed by setting to empty string.

    opened by axxie 3
  • The production bundle includes all components

    The production bundle includes all components

    Description

    The built bundle includes all components from vue-material-adapter and from @material. Unused components are still included into the bundle.

    Versions

    vue-material-adapter: 2.0.3 npm: 6.12.1 node: v12.13.1 OS: Windows 10 21H1 (OS Build 1904.1055) Browser: any/doesn’t matter

    Steps to reproduce

    1. Create project with vue and vue-material-adapter. Only use button, dialog and snackbar components.
    2. Build the bundle by using the following command:
    vue-cli-service build --report
    

    Note: you may need to add full bath to node_modules/.bin in front of the vue-cli-service command to make it work.

    1. Check the bundle size and the report.html in the dist directory. When viewing the report.html make sure that “Show content of concatenated modules (inaccurate)” checkbox is selected.

    The demo repository with reproduction is available here: https://github.com/axxie/vue-material-adapter-issues/tree/bundle-size-issue. The demo is based on the basic-vue-cli example.

    To reproduce the issue with the demo repo, run the following commands in the terminal:

    git clone https://github.com/axxie/vue-material-adapter-issues.git -b bundle-size-issue
    cd vue-material-adapter-issues
    npm install
    vue-cli-service --report
    

    Expected result

    The bundle includes only button, dialog, snackbar and their dependencies.

    Actual result

    The bundle includes all of the vue-material-adapter and all the @material components.

    Details

    Just to make sure that tree-shaking works, the main.js in the demo repository contains the following lines:

    import { square, cube } from './math';
    …
    console.log(square(2));
    

    One can manually inspect app.<hash>.js file in the dist directory. It only contains square function (look for ‘n*n’ string), but doesn’t contain cube function.

    Please also note that the same issue is reproduced with raw webpack, without vue-cli-service.

    bug 
    opened by axxie 3
  • (Feature request) Enhanced Select

    (Feature request) Enhanced Select

    Provide tools to create an Enhanced Select following this specifications https://material-components.github.io/material-components-web-catalog/#/component/select:

    From already thank you very much

    enhancement 
    opened by lsegurado 3
  • how to integrate it into Vite based project?

    how to integrate it into Vite based project?

    each component throws error as following:

    Internal server error: ENOENT: no such file or directory, open 'xxxxx/node_modules/@material/textfield/icon/foundation.ts
    
    Investigation 
    opened by hxgqh 0
  • The ripple is missing on list items in the app drawer

    The ripple is missing on list items in the app drawer

    Description

    There is no ripple effect on items in the list in the app drawer and the current list item in the app drawer is not highlighted. The keyboard navigation in the app drawer doesn’t work.

    Versions

    vue-material-adapter: 2.0.3 yarn: 2.4.2 node: v12.13.1 OS: Windows 10 21H1 (OS Build 1904.1055) Browser: chrome 91.0.4472.124, firefox 89.0.2

    Steps to reproduce

    1. Create application with app drawer, add some list items for navigation with “to” prop set, as described in https://pgbross.github.io/vue-material-adapter/#/component/drawer.
    2. Try to click navigation items in the drawer.
    3. Try to use keyboard for navigation.

    Expected result

    1. The ripple effect is be displayed on mouse click.
    2. The current list item is displayed with the primary color.
    3. If the keyboard is used, it is possible to highlight navigation list item using “up” and “down” and navigate to corresponding page by using “space” key

    Example 1

    The drawer of the main material design site:

    https://user-images.githubusercontent.com/5149179/124641161-0f1e3d00-de97-11eb-9c31-4aa6fe02fa67.mp4

    Example 2

    The drawer example within the list component example of the material components for the web:

    https://user-images.githubusercontent.com/5149179/124641212-1ba29580-de97-11eb-876f-98c38669576e.mp4

    Actual result

    1. The ripple effect is missing.
    2. The current list item is not shown.
    3. It is not possible to select item and navigate using keyboard

    Example

    The app drawer of the vue-material-adapter demo site:

    https://user-images.githubusercontent.com/5149179/124641233-22c9a380-de97-11eb-9491-77be1cb986c8.mp4

    Analysis

    It looks like the presence of the “to” prop on the list item prevents some of the list functionality from working.

    opened by axxie 0
  • Yarn 2 Plug’n’Play support

    Yarn 2 Plug’n’Play support

    Description

    vue-material-adapter is not compatible with yarn 2 Plug’n’Play.

    Versions

    vue-material-adapter: 2.0.3 yarn: 2.4.2 node: v12.13.1 OS: Windows 10 21H1 (OS Build 1904.1055) Browser: any/doesn’t matter - issue is with the dependencies

    Steps to reproduce

    1. Create project with vue and vue-material-adapter for yarn version 2 (berry).
    2. Make sure Plug’n’Play is enabled
    3. Run build or development server.

    The demo repository with reproduction is available here: https://github.com/axxie/vue-material-adapter-issues/tree/yarn-pnp-issue. The demo is based on the basic-vue-cli example.

    To reproduce the issue, run the following commands in the terminal:

    git clone https://github.com/axxie/vue-material-adapter-issues.git -b yarn-pnp-issue
    cd vue-material-adapter-issues
    yarn install
    yarn serve  
    

    Expected result

    The development server is started and serves the demo app.

    Actual result

    The server is not started and the following errors are displayed in the terminal:

    error  in ./.yarn/$$virtual/vue-material-adapter-virtual-ad6ef94fe0/0/cache/vue-material-adapter-npm-2.0.2-f7f440219e-e2a6201f2c.zip/node_modules/vue-material-adapter/dist/vue-material-adapter.esm.js
    
    Module not found: Error: Can't resolve '@material/banner' in '<path>\.yarn\$$virtual\vue-material-adapter-virtual-ad6ef94fe0\0\cache\vue-material-adapter-npm-2.0.2-f7f440219e-e2a6201f2c.zip\node_modules\vue-material-adapter\dist'
    
     error  in ./.yarn/$$virtual/vue-material-adapter-virtual-ad6ef94fe0/0/cache/vue-material-adapter-npm-2.0.2-f7f440219e-e2a6201f2c.zip/node_modules/vue-material-adapter/dist/vue-material-adapter.esm.js
    
    Module not found: Error: Can't resolve '@material/dom/events' in '<path>\.yarn\$$virtual\vue-material-adapter-virtual-ad6ef94fe0\0\cache\vue-material-adapter-npm-2.0.2-f7f440219e-e2a6201f2c.zip\node_modules\vue-material-adapter\dist'
    
    … and so on …
    

    The same error is printed when running “yarn build” command.

    Details

    vue-material-adapter uses separate packages from "Material Components for the web" (prefixed with @material/), but it doesn't list individual packages as dependencies. Vue-material-adapter lists material-components-web package as a dependency, but with yarn 2 Plug'n'play it is not enough.

    Plug'n'play requires a package to list all packages it uses even if they are already included as a transitive dependency. The detail are described on Plug'n'Play page: https://yarnpkg.com/features/pnp

    Expected fix

    The vue-material-adapter should explicitly list all of its dependencies in package.json.

    opened by axxie 1
  • NuxtJS Server Side rendering issues

    NuxtJS Server Side rendering issues

    Bugs

    Follow the template below to ensure the quickest and most accurate response to your issue.

    What vue-material-adapter Version are you using?

    "@mcwv/button": ^0.15.0

    What browser(s) is this bug affecting?

    NodeJS! (not a browser and that's the problem)

    What OS are you using?

    Mac OS Catalina V10.15.6

    What are the steps to reproduce the bug?

    Hi,

    thanks for maintaining this library!

    Unfortunately I've been struggling with SSR on Nuxt.js :( I'm not sure if you're familiar with Nuxt or not, so I've written some details inside the Any other information you believe would be useful?

    SSR attempt

    If I try something like this on the server:

    import Vue from 'vue';
    import button from '@mcwv/button/index';
    
    Vue.use(button);
    

    On my page.

    <mcw-button>a vue-material-adapter button</mcw-button>
    

    I have this error on the rendering:

    SyntaxError
    Cannot use import statement outside a module 
    

    And I don't know how to deal with this…

    CSR attempt

    The same plugin code will be used. But in my config I toggle the client only mode

    module.exports = {
      plugins: [{ src: `~/plugins/material-components.js`, mode: `client` }],
    };
    

    But by doing this I have some errors on the browser:

    [Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.
    

    Which is expected.

    The Nuxt way to prevent this is to wrap the component inside a client only

    <client-only>
      <mcw-button>a vue-material-adapter button</mcw-button>
    </client-only>
    

    And it's working but “flashing” on first hydration, so it's not a good solution…

    The question

    I've tried to figured how I could setup this Server Side without succeeding… Do you have any ideas where I can search for that kind of things?

    Thanks in advance.

    What is the expected behavior?

    SSR should be working

    What is the actual behavior?

    Error while rendering Server Side

    Any other information you believe would be useful?

    How Nuxt plugins works:

    To include an external library we use what they call plugins A plugin can be invoked:

    • on both server & client (default)
    • or server only
    • or client only
    opened by Hiswe 1
Releases(v6.2.0)
  • v6.2.0(Dec 2, 2022)

    V6.2.0

    Fixes dialog initial focus. Updates examples to use latest package versions.

    Bug Fixes

    • dialog: check if initial focus attr has true value (ec6bb47)
    • textfield: guard against no foundation on destory (aeda11e)
    Source code(tar.gz)
    Source code(zip)
  • v6.0.0(Jul 15, 2022)

    V6 aligns with material-components-web V14.

    Note material-components-web V14 list component is in flux. As such vue-material-adapter V6 is using the new components but as they are not finalised there will be some inconsistencies.

    Bug Fixes

    • bind attributes to icon button (c33f6dd)
    • dialog confirmation example (5479999)
    • expose select icon and helper text foundations (8b11475)
    • list checkbox click logic (0b94269)

    Features

    • banner demo docs (05f7f69)
    • card: use render function (71cd5a4)
    • circular-progress: support four color rendering (f595a11)
    • data-table: pass checkbox helpers (717b364)
    • drawer: remove eslint comments (5b2e428)
    • fab: support isTouch and pass inherited attrs to root (3232233)
    • floating-label: use render function (e3edd47)
    • implement line ripple render function (eea5c81)
    • improve button demo logic (bb0574e)
    • layout-grid: use render functions (9d53632)
    • list update in progress (4b00bff)
    • menu and select (4116195)
    • notched-outline: refactor to use render function (7fc333b)
    • radio: refactor (93338cb)
    • refactor icon button (aa62a53)
    • refactor linear-progress (13f5235)
    • refactor list and list-item (18db22d)
    • ripple: removed unneeded eslint comments (ddead0a)
    • sdwitch: use form field wrapper (00523f6)
    • segmented-button: use render function and touch-wrapper element (b4828ba)
    • slider: add key for discrete marks (077d8e0)
    • snackbar: use snackbar queue render function (b653da0)
    • tabs: use render function in tab scroller, indicator, and tab-bar (73db9df)
    • tooltip: support rich property (0431162)
    • top-app-bar: use render function (fa656d1)
    • update banner to support disableAutoClose (b11e998)
    • update checkbox (db7f461)
    • wotking on lists (e8391ef)
    • wotking on lists (353de2f)
    Source code(tar.gz)
    Source code(zip)
  • v3.2.2(Oct 27, 2021)

    What's Changed

    • fix: ensure hoisting menu-surface adds element to body by @axxie in https://github.com/pgbross/vue-material-adapter/pull/187
    • fix: setting menu-surface position by @axxie in https://github.com/pgbross/vue-material-adapter/pull/188
    Source code(tar.gz)
    Source code(zip)
  • v4.0.2(Oct 25, 2021)

    What's Changed

    • fix: ensure hoisting menu-surface adds element to body by @axxie in https://github.com/pgbross/vue-material-adapter/pull/187
    • fix: setting menu-surface position by @axxie in https://github.com/pgbross/vue-material-adapter/pull/188
    Source code(tar.gz)
    Source code(zip)
  • v4.0.1(Aug 10, 2021)

    Next release aligns with material-components-web V12.

    Note material-components-web V12 has several components that are in-flux. Notable the so called 'evolution' list. As such vue-material-adapter V4 is starting to use the new components but as they are not finalised there will be some inconsistencies.

    As material-components-web has patches and updated releases, vue-material-adapter V4 will incorporate the changes.

    Source code(tar.gz)
    Source code(zip)
  • v4.0.0-beta.2(Aug 5, 2021)

    Working on compatibility with material-components-web v12.0.0

    Implementing evolution list structure

    Now use named slots for list-item functionality

    • leading-icon
    • trailing-icon
    • trailing-meta
    Source code(tar.gz)
    Source code(zip)
  • v4.0.0-beta.1(Aug 3, 2021)

  • v3.2.0(Jul 23, 2021)

  • v3.0.3(Jul 15, 2021)

    v3.0.3

    • Restructure sources to be more friendly for Tree Shaking in consumers of the library.
    • Use esbuild instead of babel.
    • Update examples.

    BREAKING CHANGES:

    ES modules:

    When using ES modules, the default is now to reference src/index.js. This will require consumers to be able to handle SFC .vue files.

    For example:

    {
      module: {
        rules: [
          {
            test: /\.vue$/,
            loader: 'vue-loader',
          },
          // more rules...
        ];
      }
    }
    

    To use the esm bundle (the previous default) update your build process.

    For example using webpack add a resolve option:

    {
      resolve: {
        alias: {
          'vue-material-adapter$': 'vue-material-adapter/dist/vue-material-adapter.esm.js'
        }
      }
    }
    

    Source references:

    Source path has changed from package to src. Update any explicit imports of sub-components.

    Source code(tar.gz)
    Source code(zip)
  • v2.0.0(Mar 12, 2021)

    v2.0.0 - This release targets material-components-web v10.0.0.

    Adds support for:

    • Segmented Button multi-select
    • Segmented Button v-model

    Features

    • working on multi select segmented button (5852ac0)
    • add segmented button v-model for single select mode (4f4b2b8)
    • update for husky changes (f914eac)
    Source code(tar.gz)
    Source code(zip)
  • V1.0.0(Jan 7, 2021)

    1.0.0 (2021-01-07)

    v1.0.0 - This release targets material-components-web v9.0.0.

    Adds support for:

    • Banner
    • Segmented Button
    • Select (input range version)
    • Tooltip

    BREAKING CHANGE:

    vue 3.0 or greater is required as a peer dependency. Some event name may be changed because Vue 3 only handles lowercase event names. See Documentation & Demo for notes, information, and examples.

    Install vue-material-adapter-legacy for the Vue 2 version (see legacy)

    Source code(tar.gz)
    Source code(zip)
  • v0.17.3(Aug 27, 2020)

  • v0.17.2(Aug 25, 2020)

  • v0.17.1(Aug 25, 2020)

    v0.17.0 - This release targets material-components-web v7.0.0.

    BREAKING CHANGE:

    @vue/composition-api 1.0 or greater is required as peer dependency.

    Add import and use composition api. Applications do not have to use the composition api if they do not wish to.

    import VueCompositionAPI from '@vue/composition-api';
    
    Vue.use(VueCompositionAPI);
    

    Packages based on list items now use mcw-list-item. Affected pacakges include:

    mcw-list
    mcw-menu
    mcw-select
    mcw-drawer
    

    FEATURES:

    Support Textfield character counter.

    See demo for documentation and examples on updated html structure. Also the examples basic-webpack and basic-vue-cli show using the declarative UI and how to initialise the @vue/composition-api functionality.

    Source code(tar.gz)
    Source code(zip)
  • v0.17.0-beta.10(Jul 24, 2020)

  • v0.17.0-beta.9(Jul 22, 2020)

    BREAKING CHANGE

    Several components have been rewritten to more closely follow the principles and capabilities of the underlying material-components-web foundation packages. This allows more flexibility in implementing the UI but may require changes in any application that use vue-material-adapter components (generally the changes are limited to extended flexibility through the use of slots).

    This release rewrites how list items are managed, it is now required that lists use <mcw-list-item/> components (previously mcw-list attempted to work with plain <li/> style markup but list elements need more complex behaviour that makes this impossible now). This affects all components that utilise the underlying list-item component - list, menu, select, and drawer.

    <mcw-top-app-bar/> has removed the helper methods favouring the use of markup directly as documented in the main material-components-web package.

    Source code(tar.gz)
    Source code(zip)
  • v0.17.0-beta.8(Jul 16, 2020)

  • v0.17.0-beta.0(Jul 10, 2020)

  • v0.16.5-beta(Jun 8, 2020)

    Beta 5

    V0.16.5-Beta

    Interim release, supporting material-components-web v6.x

    BREAKING CHANGE: The build process now uses rollup to produce 'ESM', 'CJS', and 'AMD' bundles. Clients should nowimport { button } from 'vue-material-adapter, instead ofimport button from '@mcwv/button'.

    if consumers of this library are using a bundler such as webpack or rollup, then the default should be to use the correct bundle. This can be overridden in webpack, for example, by specifying an alias.

    Source code(tar.gz)
    Source code(zip)
Owner
null
Material Design styled components for Vue.js

Material Components Vue Material Design styled components for Vue.js Material-components-vue integrates the mdc-web (by google) vanilla components fol

Mats Pfeiffer 307 Dec 25, 2022
Bootstrap4 Material Design Components for Vue.js

Vue MDBootstrap Vue MDBootstrap is a collection of VueJs components and built according to the Google Material Design specs. They can be used to built

Ahmad Fajar 3 Dec 23, 2022
📕 Material Components for @vuejs

@lbzui/vue Material Components for Vue.js @lbzui/vue is now available in BETA, but you can read in more depth on API documentation and documentation w

LBZUI 40 Jul 10, 2022
Business React components for Bootstrap and Material-UI

DevExtreme Reactive · DevExtreme Reactive is a set of business React components that deeply integrate with Bootstrap and Material-UI libraries. Common

Developer Express Inc. 1.9k Dec 25, 2022
Material design for Vue.js

Material Design for Vue.js Vue Material is Simple, lightweight and built exactly according to the Google Material Design specs Build well-designed app

Vue Material 9.7k Jan 5, 2023
🐉 Material Component Framework for Vue

Supporting Vuetify Vuetify is a MIT licensed project that is developed and maintained full-time by John Leider and Heather Leider; with support from t

vuetify 36.2k Dec 30, 2022
:diamonds: A modular and customizable UI library based on Material Design and Vue

BalmUI Next Generation Material UI for Vue.js Introduction BalmUI is a modular and customizable Material Design UI library for Vue.js. ?? NOW, balm-ui

BalmJS 428 Jan 4, 2023
Vue Bootstrap with Material Design - Powerful and free UI KIT

Vue Bootstrap with Material Design Based on the latest Bootstrap 4 and Vue. 400+ material UI elemens, 600+ material icons, 74 CSS animations, SASS fil

MDBootstrap 902 Jan 4, 2023
Vue 3 & Bootstrap 5 & Material Design 2.0 UI KIT

Vue 3 & Bootstrap 5 & Material Design 2.0 UI KIT

MDBootstrap 899 Dec 29, 2022
The material-ripple directive for Vue that actually works

v-wave The material-ripple directive for Vue that actually works Support for both Vue 2 and Vue 3! Why did I make this? Because every ripple-plugin I'

Justin Taddei 167 Dec 29, 2022
Material Design UI library for Vuejs 2.0

Muse-UI Material Design UI library for Vuejs 2.0 Installation Muse-UI is available as an npm package npm install muse-ui -S yarn add muse-ui Usage imp

Muse UI 8.3k Dec 27, 2022
Build material design interfaces in record time... without stress for devs... 🍺💛

Beercss Build material design interfaces in record time... ...without stress for devs ?? ?? Cheers, www.beercss.com Why? It's based on latest material

beercss 359 Jan 3, 2023
Vue2 material design icons with easy access to icons names and types

vue-material-icons Vue2 material design icons with easy access to icons names and types (all available in IDE hints). Hints were tested on IntelliJ ID

Dominik Betka 0 May 11, 2022
Vue.js components implementation of Fundamental Library Styles guidelines. The library is aiming to provide a Vue.js implementation of the components designed in Fundamental Library Styles.

Fundamental Vue Description The fundamental-vue library is a set of Vue.js components built using Fundamental Library Styles. Fundamental Library for

SAP 188 Jan 1, 2023
📓 The UI component explorer. Develop, document, & test React, Vue, Angular, Web Components, Ember, Svelte & more!

Build bulletproof UI components faster Storybook is a development environment for UI components. It allows you to browse a component library, view the

Storybook 75.7k Dec 30, 2022
🧬Equal UI is a Vue 3 components library with 30+ components based on TypeScript and personal design system.

??Equal UI is a Vue 3 components library with 30+ components based on TypeScript and personal design system.

Yan Savinov 873 Jan 3, 2023
Use EasyVueUI ui components to build web page easily (vue3 project)

EasyVueUI Use EasyVueUI ui components to build web page easily (vue3 project) This template should help get you started developing with Vue 3 in Vite.

null 4 Sep 7, 2022
MADE Vue - A library of Vue 3 UI Components

MADE Vue A library of Vue 3 UI Components. Support MADE Vue ♥ Projects like MADE Vue are built and maintained in spare time. If you find this project

MADE Apps 4 Oct 6, 2022
A Vue.js 2.0 UI Toolkit for Web

A Vue.js 2.0 UI Toolkit for Web. Element will stay with Vue 2.x For Vue 3.0, we recommend using Element Plus from the same team Links Homepage and doc

饿了么前端 53k Jan 4, 2023