@shortfuse/materialdesignweb 0.3.0 → 0.4.0

package/docs-src/pwa/_dialogs.pug

@@ -1,15 +0,0 @@
-include ../_mixins.pug
-
-#dialog-alert.mdw-dialog(mdw-width-units="5")
-  .mdw-dialog__popup.mdw-theme(mdw-surface="card")
-    .mdw-dialog__title title
-    .mdw-dialog__body.mdw-theme(mdw-ink="medium") body
-    .mdw-dialog__button-area
-      +mdwButton({ ink:'secondary' })(mdw-autofocus) OK
-#dialog-confirm.mdw-dialog(mdw-width-units="5")
-  .mdw-dialog__popup.mdw-theme(mdw-surface="card")
-    .mdw-dialog__title title
-    .mdw-dialog__body.mdw-theme(mdw-ink="medium") body
-    .mdw-dialog__button-area
-      +mdwButton({ ink:'secondary' })(mdw-autofocus) Yes
-      +mdwButton({ ink:'secondary' }) No

package/docs-src/pwa/pwa-prerender.js

@@ -1,3 +0,0 @@
-import * as Layout from '../../components/layout/index';
-
-Layout.onPrerender();

package/docs-src/pwa/pwa.js

@@ -1,182 +0,0 @@
-import { iterateArrayLike, iterateSomeOfArrayLike } from '../../core/dom';
-import * as Layout from '../../components/layout/index';
-import * as Button from '../../components/button/index';
-import * as Dialog from '../../components/dialog/index';
-import * as Overlay from '../../core/overlay/index';
-import * as Ripple from '../../core/ripple/index';
-import * as List from '../../components/list/index';
-import * as Menu from '../../components/menu/index';
-
-Layout.attach();
-
-/** @return {void} */
-function initializeSampleComponents() {
-  iterateArrayLike(document.getElementsByClassName('mdw-overlay'), Overlay.attach);
-  iterateArrayLike(document.getElementsByClassName('mdw-ripple'), Ripple.attach);
-  iterateArrayLike(document.getElementsByClassName('mdw-button'), Button.attach);
-  iterateArrayLike(document.getElementsByClassName('mdw-list'), List.attach);
-  iterateArrayLike(document.getElementsByClassName('mdw-dialog'), Dialog.attach);
-  iterateArrayLike(document.getElementsByClassName('mdw-menu'), Menu.attach);
-}
-
-/**
- * @param {string} inputName
- * @return {Element}
- */
-function getInputElementByName(inputName) {
-  return document.querySelector(`input[name="${inputName}"]`);
-}
-
-/**
- * @param {string} inputName
- * @return {string}
- */
-function getCheckedRadioValue(inputName) {
-  let value = null;
-  iterateSomeOfArrayLike(document.querySelectorAll(`input[name="${inputName}"]`), (el) => {
-    if (el.checked) {
-      value = el.value;
-      return true;
-    }
-    return false;
-  });
-  return value;
-}
-
-/**
- * @param {string} inputName
- * @return {boolean}
- */
-function getCheckedCheckboxValue(inputName) {
-  const el = document.querySelector(`input[name="${inputName}"]`);
-  if (el && el.checked) {
-    return true;
-  }
-  return false;
-}
-
-/** @return {void} */
-function refreshFabCut() {
-  const enabled = getCheckedCheckboxValue('use-fab-mobile') && getCheckedCheckboxValue('fab-cut');
-  if (!enabled) {
-    Layout.getAppBarElement().removeAttribute('mdw-fab-cut');
-    return;
-  }
-  const shown = getCheckedCheckboxValue('fab-show');
-  const alignment = getCheckedRadioValue('fab-mobile');
-  Layout.getAppBarElement().setAttribute('mdw-fab-cut', [shown ? 'open' : '', alignment].join(' ').trim());
-}
-
-/**
- * @param {Event} event
- * @return {void}
- */
-function onOptionChange(event) {
-  /** @type {HTMLInputElement} */
-  const inputElement = (event.currentTarget);
-  const { name, value, checked } = inputElement;
-  switch (name) {
-    case 'use-appbar-autohide':
-      iterateArrayLike(document.querySelectorAll('input[name="appbar-autohide"]'),
-        el => (checked ? el.removeAttribute('disabled') : el.setAttribute('disabled', '')));
-      if (checked) {
-        Layout.getAppBarElement().setAttribute('mdw-autohide', getCheckedRadioValue('appbar-autohide'));
-      } else {
-        Layout.getAppBarElement().removeAttribute('mdw-autohide');
-      }
-      Layout.resetScroll();
-      break;
-    case 'use-fab-mobile':
-      iterateArrayLike(document.querySelectorAll('input[name="fab-mobile"]'),
-        el => (checked ? el.removeAttribute('disabled') : el.setAttribute('disabled', '')));
-      if (checked) {
-        document.getElementsByClassName('mdw-layout__fab')[0].setAttribute('mdw-mobile', getCheckedRadioValue('fab-mobile'));
-      } else {
-        document.getElementsByClassName('mdw-layout__fab')[0].removeAttribute('mdw-mobile');
-      }
-      refreshFabCut();
-      break;
-    case 'use-fab-desktop':
-      iterateArrayLike(document.querySelectorAll('input[name="fab-desktop"]'),
-        el => (checked ? el.removeAttribute('disabled') : el.setAttribute('disabled', '')));
-      if (checked) {
-        document.getElementsByClassName('mdw-layout__fab')[0].setAttribute('mdw-desktop', getCheckedRadioValue('fab-desktop'));
-      } else {
-        document.getElementsByClassName('mdw-layout__fab')[0].removeAttribute('mdw-desktop');
-      }
-      break;
-    case 'appbar-autohide':
-      Layout.getAppBarElement().setAttribute('mdw-autohide', value);
-      break;
-    case 'appbar-autoraise':
-      if (checked) {
-        Layout.getAppBarElement().setAttribute('mdw-autoraise', '');
-      } else {
-        Layout.getAppBarElement().removeAttribute('mdw-autoraise');
-      }
-      break;
-    case 'fab-mobile':
-      document.getElementsByClassName('mdw-layout__fab')[0].setAttribute('mdw-mobile', value);
-      refreshFabCut();
-      break;
-    case 'fab-desktop':
-      document.getElementsByClassName('mdw-layout__fab')[0].setAttribute('mdw-desktop', value);
-      break;
-    case 'appbar-bottom':
-      if (value === 'bottom') {
-        Layout.getAppBarElement().setAttribute('mdw-bottom', '');
-        getInputElementByName('fab-cut').removeAttribute('disabled');
-      } else {
-        Layout.getAppBarElement().removeAttribute('mdw-bottom');
-        getInputElementByName('fab-cut').setAttribute('disabled', '');
-      }
-      break;
-    case 'appbar-autoprominent':
-      if (checked) {
-        Layout.getAppBarElement().setAttribute('mdw-autoprominent', '');
-      } else {
-        Layout.getAppBarElement().removeAttribute('mdw-autoprominent');
-      }
-      break;
-    case 'fab-cut':
-      refreshFabCut();
-      break;
-    case 'fab-show':
-      if (checked) {
-        Layout.showFab();
-      } else {
-        Layout.hideFab();
-      }
-      break;
-    case 'navdrawer-style':
-    case 'navdrawer-toggle':
-    case 'sidesheet-style':
-    case 'sidesheet-toggle':
-      if (value) {
-        document.body.setAttribute(`mdw-${name}`, value);
-      } else {
-        document.body.removeAttribute(`mdw-${name}`);
-      }
-      break;
-    default:
-  }
-  if (name.indexOf('appbar') === 0) {
-    Layout.resetScroll();
-  }
-}
-
-/** @return {void} */
-function setupComponentOptions() {
-  iterateArrayLike(document.querySelectorAll('input[name]'), (el) => {
-    el.addEventListener('change', onOptionChange);
-  });
-  document.getElementById('dialog-alert-button').addEventListener('click', (event) => {
-    Dialog.show(document.getElementById('dialog-alert'), event);
-  });
-  document.getElementById('menu-button').addEventListener('click', (event) => {
-    Menu.show(document.getElementById('sample-menu'), event);
-  });
-}
-
-initializeSampleComponents();
-setupComponentOptions();

package/docs-src/pwa/pwa.scss

@@ -1,25 +0,0 @@
-$mdw-theme__primary: 'green';
-$mdw-theme__secondary: 'deeporange';
-$mdw-theme__warn: 'red';
-$mdw-theme__background: 'bluegray';
-$mdw-theme__foreground-light: #006064;
-$mdw-theme__foreground-dark: #E0F7FA;
-
-@import "../../core/color/index.scss";
-@import "../../core/overlay/index.scss";
-@import "../../core/ripple/index.scss";
-
-@import "../../components/appbar/index.scss";
-@import "../../components/banner/index.scss";
-@import "../../components/button/index.scss";
-@import "../../components/card/index.scss";
-@import "../../components/dialog/index.scss";
-@import "../../components/divider/index.scss";
-@import "../../components/fab/index.scss";
-@import "../../components/grid/index.scss";
-@import "../../components/layout/index.scss";
-@import "../../components/list/index.scss";
-@import "../../components/menu/index.scss";
-@import "../../components/selection/index.scss";
-@import "../../components/snackbar/index.scss";
-@import "../../components/type/index.scss";

package/docs-src/spec.scss

@@ -1 +0,0 @@
-@import "../_spec.scss";

package/docs-src/themes/theme-colored-fallbacks.scss

@@ -1,14 +0,0 @@
-$mdw-theme__primary: 'green';
-$mdw-theme__secondary: 'deeporange';
-$mdw-theme__warn: 'red';
-$mdw-theme__background: 'bluegray';
-$mdw-theme__foreground-light: #006064;
-$mdw-theme__foreground-dark: #E0F7FA;
-$mdw-theme__colors: ('amber', 'blue', 'cyan', 'red', 'green', 'deeppurple', 'purple', 'yellow', 'teal');
-$mdw-theme__variables: false;
-
-@import "../../_theme.scss";
-
-:root {
-  font-family: Merriweather, sans-serif;
-}

package/docs-src/themes/theme-colored.scss

@@ -1,14 +0,0 @@
-$mdw-theme__primary: 'green';
-$mdw-theme__secondary: 'deeporange';
-$mdw-theme__warn: 'red';
-$mdw-theme__background: 'bluegray';
-$mdw-theme__foreground-light: #006064;
-$mdw-theme__foreground-dark: #E0F7FA;
-$mdw-theme__colors: ('amber', 'blue', 'cyan', 'red', 'green', 'deeppurple', 'purple', 'yellow', 'teal');
-$mdw-theme__fallbacks: false;
-
-@import "../../_theme.scss";
-
-:root {
-  font-family: Merriweather, sans-serif;
-}

package/docs-src/themes/theme-default-fallbacks.scss

@@ -1,14 +0,0 @@
-$mdw-theme__primary: 'blue';
-$mdw-theme__secondary: 'pink';
-$mdw-theme__warn: 'red';
-$mdw-theme__background: 'gray';
-$mdw-theme__foreground-light: #000;
-$mdw-theme__foreground-dark: #fff;
-$mdw-theme__colors: ('amber', 'blue', 'cyan', 'red', 'green', 'deeppurple', 'purple', 'yellow', 'teal');
-$mdw-theme__variables: false;
-
-@import "../../_theme.scss";
-
-:root {
-  font-family: Roboto, sans-serif;
-}

package/docs-src/themes/theme-default.scss

@@ -1,14 +0,0 @@
-$mdw-theme__primary: 'blue';
-$mdw-theme__secondary: 'pink';
-$mdw-theme__warn: 'red';
-$mdw-theme__background: 'gray';
-$mdw-theme__foreground-light: #000;
-$mdw-theme__foreground-dark: #fff;
-$mdw-theme__colors: ('amber', 'blue', 'cyan', 'red', 'green', 'deeppurple', 'purple', 'yellow', 'teal');
-$mdw-theme__fallbacks: false;
-
-@import "../../_theme.scss";
-
-:root {
-  font-family: Roboto, sans-serif;
-}

package/index.js

@@ -1,51 +0,0 @@
-import * as BottomNav from './components/bottomnav/index';
-import * as BottomNavItem from './components/bottomnav/item';
-import * as Button from './components/button/index';
-import * as Chip from './components/chip/index';
-import * as ChipItem from './components/chip/item';
-import * as DataTable from './components/datatable/index';
-import * as Dialog from './components/dialog/index';
-import * as Fab from './components/fab/index';
-import * as Layout from './components/layout/index';
-import * as List from './components/list/index';
-import * as ListItem from './components/list/item';
-import * as ListExpander from './components/list/expander';
-import * as Menu from './components/menu/index';
-import * as MenuItem from './components/menu/item';
-import * as Overlay from './core/overlay/index';
-import * as ProgressCircle from './components/progress/index';
-import * as Ripple from './core/ripple/index';
-import * as Snackbar from './components/snackbar/index';
-import * as Tab from './components/tab/index';
-import * as TabItem from './components/tab/item';
-import * as TextField from './components/textfield/index';
-
-export {
-  BottomNav,
-  BottomNavItem,
-  Button,
-  Chip,
-  ChipItem,
-  DataTable,
-  Dialog,
-  Fab,
-  Layout,
-  List,
-  ListItem,
-  ListExpander,
-  Menu,
-  MenuItem,
-  Overlay,
-  ProgressCircle,
-  Ripple,
-  Snackbar,
-  Tab,
-  TabItem,
-  TextField,
-};
-
-export { default as DomAdapter } from './adapters/list/index';
-export { default as ListAdapter } from './adapters/list/index';
-export { default as DataTableAdapter } from './adapters/datatable/index';
-export { default as DataTableAdapterColumn } from './adapters/datatable/column';
-export { default as SearchAdapter } from './adapters/search/index';

package/index.scss

@@ -1,2 +0,0 @@
-@import './_spec.scss';
-@import './_theme.scss';

package/webpack.config.js

@@ -1,187 +0,0 @@
-const path = require('path');
-const fs = require('fs');
-const cssnano = require('cssnano');
-const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
-
-const isProduction = (process.env.NODE_ENV === 'production');
-
-/** @typedef {import('webpack').Configuration} WebpackConfiguration */
-
-/** @return {Object} */
-function getComponentsConfig() {
-  const DEST = (isProduction ? 'dist' : 'test/dist');
-  return {
-    entry: {
-      materialdesignweb: [
-        path.resolve(__dirname, './index.js'),
-        path.resolve(__dirname, './index.scss'),
-      ],
-    },
-    mode: process.env.NODE_ENV || 'development',
-    devtool: 'nosources-source-map',
-    optimization: {
-      usedExports: false,
-    },
-    output: {
-      filename: 'materialdesignweb.min.js',
-      path: path.resolve(__dirname, DEST),
-    },
-    plugins: [
-      new BundleAnalyzerPlugin({
-        analyzerMode: 'static',
-        openAnalyzer: false,
-        generateStatsFile: true,
-      }),
-    ],
-    module: {
-      rules: [{
-        test: /\.js$/,
-        exclude: /(node_modules|bower_components)/,
-        use: {
-          loader: 'babel-loader',
-          options: {
-            presets: [
-              ['@babel/preset-env'],
-            ],
-          },
-        },
-      }, {
-        test: /\.scss$/,
-        use: [
-          'file-loader?name=materialdesignweb.min.css',
-          'extract-loader',
-          'css-loader?import=false',
-          {
-            loader: 'postcss-loader',
-            options: {
-              plugins: () => [
-                cssnano(),
-              ],
-            },
-          },
-          'sass-loader',
-        ],
-      }],
-    },
-  };
-}
-
-/** @return {WebpackConfiguration} */
-function getDocsConfig() {
-  const plugins = [];
-  /** @type {Object.<string, string[]>} */
-  const entries = {};
-  ['.', 'pwa', 'core', 'components', 'themes'].map(folder => path.join('./docs-src', folder))
-    .forEach(folderPath => fs.readdirSync(folderPath).forEach((filename) => {
-      if (filename[0] === '_') {
-        return;
-      }
-      if (fs.statSync(path.join(folderPath, filename)).isDirectory()) {
-        return;
-      }
-      const noExt = filename.substring(0, filename.lastIndexOf('.'));
-      if (!entries[`${noExt}`]) {
-        entries[`${noExt}`] = [];
-      }
-      entries[`${noExt}`].push(path.resolve(`${folderPath}/${filename}`));
-    }));
-  const DEST = (isProduction ? 'docs' : 'test/docs');
-  /** @type {WebpackConfiguration} */
-  const webpackConfig = {
-    entry: entries,
-    context: path.resolve(__dirname, 'docs-src'),
-    devtool: isProduction ? 'source-map' : 'nosources-source-map',
-    mode: process.env.NODE_ENV || 'development',
-    devServer: {
-      contentBase: path.resolve(__dirname, DEST),
-      compress: true,
-      inline: false,
-    },
-    output: {
-      filename: '[name].min.js',
-      chunkFilename: '[name].min.js',
-      path: path.resolve(__dirname, DEST),
-    },
-    optimization: {
-      usedExports: true,
-      splitChunks: {
-        chunks: 'all',
-        cacheGroups: {
-          prerender: {
-            test: /prerender/,
-            name: 'prerender.common',
-            minSize: 0,
-            minChunks: 2,
-            priority: -10,
-            chunks: 'all',
-          },
-          vendors: false,
-          default: {
-            test(module, chunks) {
-              if (module && module.resource && module.resource.indexOf('prerender') !== -1) {
-                return false;
-              }
-              if (chunks && chunks.some(chunk => chunk.name.indexOf('prerender') !== -1)) {
-                return false;
-              }
-              return true;
-            },
-            name: 'default.common',
-            minSize: 0,
-            minChunks: 2,
-            chunks: 'all',
-            reuseExistingChunk: true,
-          },
-        },
-      },
-    },
-    module: {
-      rules: [{
-        test: /\.js$/,
-        exclude: /(node_modules|bower_components)/,
-        use: [
-          'babel-loader?{"presets":["@babel/preset-env"]}',
-        ],
-      }, {
-        test: /\.scss$/,
-        use: [
-          'file-loader?name=[name].min.css',
-          'extract-loader',
-          'css-loader?import=false',
-          {
-            loader: 'postcss-loader',
-            options: {
-              plugins: () => [
-                cssnano(),
-              ],
-            },
-          },
-          'sass-loader',
-        ],
-      }, {
-        test: /\.pug$/,
-        use: [
-          'file-loader?&name=[name].html',
-          'extract-loader',
-          'html-loader',
-          'pug-html-loader',
-        ],
-      }],
-    },
-    plugins,
-  };
-  return webpackConfig;
-}
-
-/**
- * @param {Object} env
- * @return {WebpackConfiguration}
- */
-function makeWebPackConfig(env = {}) {
-  if (env.target === 'docs') {
-    return getDocsConfig();
-  }
-  return getComponentsConfig();
-}
-
-module.exports = makeWebPackConfig;