@shortfuse/materialdesignweb 0.2.0 → 0.5.0

package/docs/pwa/pwa.js

@@ -0,0 +1,298 @@
+import * as Button from '../../components/button/index.js';
+import * as Dialog from '../../components/dialog/index.js';
+import * as Layout from '../../components/layout/index.js';
+import * as ListContent from '../../components/list/content.js';
+import * as List from '../../components/list/index.js';
+import * as ListSecondary from '../../components/list/secondary.js';
+import * as Menu from '../../components/menu/index.js';
+import * as Selection from '../../components/selection/index.js';
+import * as SelectionRadioGroup from '../../components/selection/radiogroup.js';
+import * as Snackbar from '../../components/snackbar/index.js';
+import * as Attributes from '../../core/aria/attributes.js';
+import * as Overlay from '../../core/overlay/index.js';
+import * as Ripple from '../../core/ripple/index.js';
+
+/** @type {Element} */
+let checkedAutoHideItem;
+/** @type {Element} */
+let checkedFabMobileItem;
+/** @type {Element} */
+let checkedFabDesktopItem;
+
+Layout.attach();
+
+/** @return {void} */
+function initializeSampleComponents() {
+  for (const element of document.getElementsByClassName('mdw-overlay')) { Overlay.attach(element); }
+  for (const element of document.getElementsByClassName('mdw-ripple')) { Ripple.attach(element); }
+  for (const element of document.getElementsByClassName('mdw-button')) { Button.attach(element); }
+  for (const element of document.getElementsByClassName('mdw-selection__radio-group')) { SelectionRadioGroup.attach(element); }
+  for (const element of document.getElementsByClassName('mdw-selection')) { Selection.attach(element); }
+  for (const element of document.getElementsByClassName('mdw-list')) { List.attach(element); }
+  for (const element of document.getElementsByClassName('mdw-dialog')) { Dialog.attach(element); }
+  for (const element of document.getElementsByClassName('mdw-menu')) { Menu.attach(element); }
+}
+
+/**
+ * @param {string} name
+ * @return {Element}
+ */
+function getListContentElementByName(name) {
+  return document.querySelector(`[data-name="${name}"]`);
+}
+
+/**
+ * @param {string} name
+ * @return {string}
+ */
+function getCheckedValue(name) {
+  /** @type {HTMLElement} */
+  const el = document.querySelector(`[data-name="${name}"][aria-checked="true"]`);
+  return el.dataset.value;
+}
+
+/**
+ * @param {string} name
+ * @return {boolean}
+ */
+function getIsChecked(name) {
+  return Attributes.isChecked(getListContentElementByName(name));
+}
+
+/** @return {void} */
+function refreshFabCut() {
+  const enabled = getIsChecked('use-fab-mobile') && getIsChecked('fab-cut');
+  if (!enabled) {
+    Layout.getAppBarElement().removeAttribute('mdw-fab-cut');
+    return;
+  }
+  const shown = getIsChecked('fab-show');
+  const alignment = getCheckedValue('fab-mobile');
+  Layout.getAppBarElement().setAttribute('mdw-fab-cut', [shown ? 'open' : '', alignment].join(' ').trim());
+}
+
+/** @return {void} */
+function updateAutoHideOption() {
+  const switchItem = document.querySelector('[data-name="use-appbar-autohide"]');
+  const descriptionElement = switchItem.querySelector('.mdw-list__text-line:nth-child(2)');
+  const oldDescription = descriptionElement.textContent;
+  let newDescription = 'Off';
+  if (switchItem.getAttribute('aria-checked') === 'true') {
+    /** @type {HTMLElement} */
+    const checkedItem = document.querySelector('[data-name="appbar-autohide"][aria-checked="true"]');
+    newDescription = checkedItem.querySelector('.mdw-list__text-line').textContent;
+    Layout.getAppBarElement().setAttribute('mdw-autohide', checkedItem.dataset.value);
+  } else {
+    Layout.getAppBarElement().removeAttribute('mdw-autohide');
+  }
+  if (newDescription !== oldDescription) {
+    Layout.resetScroll();
+    descriptionElement.textContent = newDescription;
+    Snackbar.create({
+      text: `Auto hide is set to: ${newDescription}.`,
+      parent: document.getElementsByClassName('mdw-snackbar__container')[0],
+    });
+  }
+}
+
+/** @return {void} */
+function updateFabMobileOption() {
+  const switchItem = document.querySelector('[data-name="use-fab-mobile"]');
+  const descriptionElement = switchItem.querySelector('.mdw-list__text-line:nth-child(2)');
+  const oldDescription = descriptionElement.textContent;
+  let newDescription = 'Off';
+  if (switchItem.getAttribute('aria-checked') === 'true') {
+    /** @type {HTMLElement} */
+    const checkedItem = document.querySelector('[data-name="fab-mobile"][aria-checked="true"]');
+    newDescription = checkedItem.querySelector('.mdw-list__text-line').textContent;
+    document.getElementsByClassName('mdw-layout__fab')[0].setAttribute('mdw-mobile', checkedItem.dataset.value);
+  } else {
+    document.getElementsByClassName('mdw-layout__fab')[0].removeAttribute('mdw-mobile');
+  }
+  if (newDescription !== oldDescription) {
+    refreshFabCut();
+    descriptionElement.textContent = newDescription;
+    Snackbar.create({
+      text: `Mobile Fab is set to: ${newDescription}.`,
+      parent: document.getElementsByClassName('mdw-snackbar__container')[0],
+    });
+  }
+}
+
+/** @return {void} */
+function updateFabDesktopOption() {
+  const switchItem = document.querySelector('[data-name="use-fab-desktop"]');
+  const descriptionElement = switchItem.querySelector('.mdw-list__text-line:nth-child(2)');
+  const oldDescription = descriptionElement.textContent;
+  let newDescription = 'Off';
+  if (switchItem.getAttribute('aria-checked') === 'true') {
+    /** @type {HTMLElement} */
+    const checkedItem = document.querySelector('[data-name="fab-desktop"][aria-checked="true"]');
+    newDescription = checkedItem.querySelector('.mdw-list__text-line').textContent;
+    document.getElementsByClassName('mdw-layout__fab')[0].setAttribute('mdw-desktop', checkedItem.dataset.value);
+  } else {
+    document.getElementsByClassName('mdw-layout__fab')[0].removeAttribute('mdw-desktop');
+  }
+  if (newDescription !== oldDescription) {
+    descriptionElement.textContent = newDescription;
+    Snackbar.create({
+      text: `Desktop Fab is set to: ${newDescription}.`,
+      parent: document.getElementsByClassName('mdw-snackbar__container')[0],
+    });
+  }
+}
+
+/**
+ * @param {CustomEvent} event
+ * @return {void}
+ */
+function onCheckChange(event) {
+  const listContentElement = /** @type {HTMLElement} */ (event.target);
+  const checked = event.detail.value === 'true';
+  const { name, value } = listContentElement.dataset;
+  switch (name) {
+    case 'use-appbar-autohide':
+      updateAutoHideOption();
+      break;
+    case 'use-fab-mobile':
+      updateFabMobileOption();
+      break;
+    case 'use-fab-desktop':
+      updateFabDesktopOption();
+      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 'appbar-bottom':
+      if (checked) {
+        Layout.getAppBarElement().setAttribute('mdw-bottom', '');
+        getListContentElementByName('fab-cut').setAttribute('aria-disabled', 'false');
+      } else {
+        Layout.getAppBarElement().removeAttribute('mdw-bottom');
+        getListContentElementByName('fab-cut').setAttribute('aria-disabled', 'true');
+      }
+      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() {
+  document.addEventListener(ListSecondary.SECONDARY_ACTION_EVENT, (event) => {
+    const secondaryElement = /** @type {HTMLElement} */ (event.target);
+    const selectionElement = secondaryElement.parentElement;
+    // inverse check
+    const newValue = !Attributes.isChecked(selectionElement);
+    Selection.setChecked(selectionElement, newValue, true);
+  });
+  document.addEventListener(Selection.CHECKED_CHANGE_EVENT, onCheckChange);
+  document.getElementById('dialog-alert-button').addEventListener('click', (event) => {
+    Dialog.show(document.getElementById('dialog-alert'), event);
+  });
+  document.getElementById('dialog-confirm-button').addEventListener('click', (event) => {
+    Dialog.show(document.getElementById('dialog-confirm'), event);
+  });
+  document.getElementById('menu-button').addEventListener('click', (event) => {
+    Menu.show(document.getElementById('sample-menu'), event);
+  });
+}
+
+initializeSampleComponents();
+setupComponentOptions();
+
+document.addEventListener(Dialog.CONFIRM_EVENT, (event) => {
+  const dialog = /** @type {HTMLElement} */ (event.target);
+  switch (dialog.id) {
+    case 'dialog-autohide-options':
+      updateAutoHideOption();
+      break;
+    case 'dialog-fabmobile-options':
+      updateFabMobileOption();
+      break;
+    case 'dialog-fabdesktop-options':
+      updateFabDesktopOption();
+      break;
+    default:
+  }
+});
+// Dialog was cancelled
+document.addEventListener(Dialog.CANCEL_EVENT, (event) => {
+  const dialog = /** @type {HTMLElement} */ (event.target);
+  // Revert selection
+  switch (dialog.id) {
+    case 'dialog-autohide-options':
+      for (const item of document.querySelectorAll('[data-name="appbar-autohide"]')) {
+        item.setAttribute('aria-checked', (item === checkedAutoHideItem) ? 'true' : 'false');
+      }
+      break;
+    case 'dialog-fabmobile-options':
+      for (const item of document.querySelectorAll('[data-name="fab-mobile"]')) {
+        item.setAttribute('aria-checked', (item === checkedFabMobileItem) ? 'true' : 'false');
+      }
+      break;
+    case 'dialog-fabdesktop-options':
+      for (const item of document.querySelectorAll('[data-name="fab-desktop"]')) {
+        item.setAttribute('aria-checked', (item === checkedFabDesktopItem) ? 'true' : 'false');
+      }
+      break;
+    default:
+  }
+});
+
+document.addEventListener(ListContent.ACTIVATE_EVENT, (event) => {
+  const listContentElement = /** @type {HTMLElement} */ (event.target);
+
+  // Before opening dialog, remember which item was checked
+  switch (listContentElement.dataset.name) {
+    case 'use-appbar-autohide':
+      checkedAutoHideItem = document.querySelector('[data-name="appbar-autohide"][aria-checked="true"]');
+      Dialog.show(document.getElementById('dialog-autohide-options'), event);
+      break;
+    case 'use-fab-mobile':
+      checkedFabMobileItem = document.querySelector('[data-name="fab-mobile"][aria-checked="true"]');
+      Dialog.show(document.getElementById('dialog-fabmobile-options'), event);
+      break;
+    case 'use-fab-desktop':
+      checkedFabDesktopItem = document.querySelector('[data-name="fab-desktop"][aria-checked="true"]');
+      Dialog.show(document.getElementById('dialog-fabdesktop-options'), event);
+      break;
+    default:
+  }
+});

package/docs/pwa/pwa.scss

@@ -0,0 +1,31 @@
+@use "../../core/theme" with (
+  $alias: (
+    'primary': 'deeppurple',
+    'secondary': 'deeporange',
+    'warn': 'red',
+    'background': 'bluegray',
+  )
+);
+
+@use "../../core/overlay";
+@use "../../core/ripple";
+
+@use "../../components/appbar";
+@use "../../components/banner";
+@use "../../components/button";
+@use "../../components/card";
+@use "../../components/dialog";
+@use "../../components/divider";
+@use "../../components/fab";
+@use "../../components/grid";
+@use "../../components/layout";
+@use "../../components/list";
+@use "../../components/menu";
+@use "../../components/selection";
+@use "../../components/snackbar";
+@use "../../components/type";
+
+:root {
+  --mdw-ink-default-light: 0,96,100;
+  --mdw-ink-default-dark: 224,247,250;
+}

package/docs/themes/theme-colored.scss

@@ -0,0 +1,15 @@
+@use "../../core/theme/_config.scss" with (
+  $alias: (
+    'primary': 'deeppurple',
+    'secondary': 'deeporange',
+    'warn': 'red',
+    'background': 'bluegray'
+  )
+);
+@use "../../core/theme/_aliases.scss";
+
+:root {
+  --mdw-ink-default-light: 0,96,100;
+  --mdw-ink-default-dark: 224,247,250;
+  font-family: Merriweather, sans-serif;
+}

package/docs/themes/theme-default.scss

@@ -0,0 +1,3 @@
+:root {
+  font-family: Roboto, sans-serif;
+}

package/index.scss

@@ -0,0 +1,27 @@
+@use './core/theme';
+@use './core/overlay';
+@use './core/ripple';
+
+@use './components/appbar';
+@use './components/banner';
+@use './components/bottomnav';
+@use './components/button';
+@use './components/card';
+@use './components/chip';
+@use './components/datatable';
+@use './components/dialog';
+@use './components/divider';
+@use './components/elevation';
+@use './components/fab';
+@use './components/grid';
+@use './components/layout';
+@use './components/list';
+@use './components/menu';
+@use './components/progress';
+@use './components/selection';
+@use './components/slider';
+@use './components/snackbar';
+@use './components/tab';
+@use './components/textfield';
+@use './components/tooltip';
+@use './components/type';

package/jsconfig.json

@@ -1,10 +1,16 @@
 {
   "compilerOptions": {
     "checkJs": true,
-    "target": "es6",
-    "module": "es6"
+    "module": "esnext",
+    "moduleResolution": "node",
+    "noImplicitAny": true,
+    "resolveJsonModule": true,
+    "strict": false,
+    "target": "esnext",
+    "allowSyntheticDefaultImports": true
   },
   "exclude": [
     "**/node_modules/*",
+    ".history/*"
   ]
 }

package/package.json

@@ -1,13 +1,17 @@
 {
   "name": "@shortfuse/materialdesignweb",
-  "version": "0.2.0",
+  "version": "0.5.0",
   "description": "Material Design for Web",
-  "main": "components/index.js",
+  "type": "module",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "start:docs": "webpack-dev-server -w --env.target=docs --host 0.0.0.0",
-    "build:docs": "webpack --env.target=docs",
-    "dist": "webpack"
+    "analyze:docs": "webpack-bundle-analyzer stats.json",
+    "build:docs": "webpack --config webpack.config.js --env target=docs",
+    "deploy:docs": "scripts/deploy-docs.sh",
+    "dist": "webpack",
+    "pretest": "eslint --ignore-path .gitignore .",
+    "start:docs": "webpack serve --config webpack.config.js --env target=docs --host 0.0.0.0",
+    "stats:docs": "webpack --config webpack.config.js --env target=docs --profile --json > stats.json",
+    "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {
     "type": "git",
@@ -18,33 +22,56 @@
     "design",
     "web"
   ],
+  "exports": {
+    "./": "./"
+  },
   "author": "Carlos Lopez Jr. <clshortfuse@gmail.com> (https://shortfuse.org/)",
   "license": "ISC",
+  "sideEffects": false,
   "bugs": {
     "url": "https://github.com/clshortfuse/materialdesignweb/issues"
   },
   "homepage": "https://github.com/clshortfuse/materialdesignweb#readme",
   "devDependencies": {
-    "@babel/preset-env": "^7.0.0",
-    "babel-loader": "^8.0.0",
-    "css-loader": "^1.0.0",
-    "cssnano": "^4.1.0",
-    "eslint": "^5.4.0",
-    "eslint-config-airbnb-base": "^13.1.0",
-    "eslint-plugin-import": "^2.14.0",
-    "extract-loader": "^3.0.0",
-    "file-loader": "^2.0.0",
-    "html-loader": "^0.5.5",
-    "node-sass": "^4.9.3",
-    "postcss-loader": "^3.0.0",
-    "pug-html-loader": "^1.1.5",
-    "sass-loader": "^7.1.0",
-    "stylelint": "^9.5.0",
-    "stylelint-config-recommended-scss": "^3.2.0",
-    "stylelint-scss": "^3.3.0",
-    "uglifyjs-webpack-plugin": "^1.3.0",
-    "webpack": "^4.18.0",
-    "webpack-cli": "^3.1.0",
-    "webpack-dev-server": "^3.1.8"
+    "@babel/plugin-proposal-class-properties": "^7.16.7",
+    "@babel/plugin-proposal-optional-chaining": "^7.16.7",
+    "@babel/plugin-proposal-private-methods": "^7.16.11",
+    "@babel/plugin-proposal-private-property-in-object": "^7.16.7",
+    "@babel/preset-env": "^7.12.1",
+    "@typescript-eslint/eslint-plugin": "5.23",
+    "@typescript-eslint/parser": "5.23",
+    "babel-loader": "^8.2.3",
+    "clean-css": "^5.2.2",
+    "css-loader": "^6.5.1",
+    "cssnano": "^5.0.14",
+    "eslint": "^8.8.0",
+    "eslint-config-airbnb-base": "^15.0.0",
+    "eslint-plugin-compat": "^4.0.2",
+    "eslint-plugin-eta": "github:clshortfuse/eslint-plugin-eta",
+    "eslint-plugin-github": "^4.3.5",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jsdoc": "^39.2.9",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-unicorn": "^42.0.0",
+    "eta": "^1.12.0",
+    "extract-loader": "^5.1.0",
+    "fibers": "^5.0.0",
+    "file-loader": "^6.2.0",
+    "html-loader": "3.1",
+    "postcss-loader": "^6.2.1",
+    "sass": "^1.27.0",
+    "sass-loader": "^12.4.0",
+    "stylelint": "^14.8.2",
+    "stylelint-config-recommended-scss": "^6.0.0",
+    "stylelint-config-sass-guidelines": "^9.0.1",
+    "stylelint-no-unsupported-browser-features": "github:clshortfuse/stylelint-no-unsupported-browser-features",
+    "stylelint-scss": "^4.2.0",
+    "stylelint-use-logical-spec": "^3.2.2",
+    "terser-webpack-plugin": "^5.3.1",
+    "typescript": "^4.5.4",
+    "webpack": "^5.72.1",
+    "webpack-bundle-analyzer": "^4.1.0",
+    "webpack-cli": "^4.2.0",
+    "webpack-dev-server": "^4.7.0"
   }
 }

package/scripts/deploy-docs.sh

@@ -0,0 +1,9 @@
+if [ -z $(git status --untracked-files=no --porcelain) ];
+then
+    git add dist/docs -f
+    git commit -m "Update Docs"
+    git push origin `git subtree split --prefix dist/docs master`:gh-pages --force
+    git reset HEAD~
+else
+    echo "Need clean working directory to publish"
+fi

package/templates/index.eta

@@ -0,0 +1,2 @@
+<% var entry = Object.keys(it)[0]; -%>
+<%~ includeFile(`../components/${entry}/index.eta`, it[entry]) -%>

package/templates/index.pug

@@ -0,0 +1,3 @@
+include ../components/button/index.pug
+include ../components/selection/index.pug
+include ../components/textfield/index.pug

package/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "checkJs": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "noImplicitAny": true,
+    "resolveJsonModule": true,
+    "strict": false,
+    "target": "esnext",
+    "allowSyntheticDefaultImports": true
+  },
+  "exclude": [
+    "**/node_modules/*",
+    ".history/*"
+  ]
+}

package/utils/function.js

@@ -0,0 +1,3 @@
+/** @return {void} */
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+export function noop() {}