@shortfuse/materialdesignweb 0.3.0 → 0.4.0

package/docs/pwa/_dialogs.eta

@@ -0,0 +1,143 @@
+<% var T = '../../templates/index.eta' %>
+<div class="mdw-dialog" id="dialog-alert" mdw-width-units="5">
+  <div class="mdw-dialog__popup mdw-theme" mdw-surface="card">
+    <div class="mdw-dialog__title">Alert Dialog</div>
+    <div class="mdw-dialog__body mdw-theme" mdw-ink="medium">Alert dialog body text.</div>
+    <div class="mdw-dialog__button-area">
+      <%~ includeFile(T, { button: { ink:'secondary', attributes:{'mdw-autofocus':true}, text:'OK' }}) %>
+    </div>
+  </div>
+</div>
+<div class="mdw-dialog" id="dialog-confirm" mdw-width-units="5">
+  <div class="mdw-dialog__popup mdw-theme" mdw-surface="card">
+    <div class="mdw-dialog__title">Confirm Dialog</div>
+    <div class="mdw-dialog__body mdw-theme" mdw-ink="medium">Confirm dialog body text.</div>
+    <div class="mdw-dialog__button-area">
+      <%~ includeFile(T, { button: { ink:'secondary', attributes:{'mdw-autofocus':true}, text:'Yes' }}) %>
+      <%~ includeFile(T, { button: { ink:'secondary', text:'No' }}) %>
+    </div>
+  </div>
+</div>
+<div class="mdw-dialog" id="dialog-autohide-options">
+  <div class="mdw-dialog__popup mdw-theme" mdw-surface="card">
+    <div class="mdw-dialog__header">
+      <div class="mdw-dialog__title">App Bar Auto Hide</div>
+    </div>
+    <ul class="mdw-dialog__scrolling mdw-list mdw-selection__radio-group" role="radiogroup">
+      <li class="mdw-list__item">
+        <a class="mdw-list__content mdw-selection" aria-checked="false" data-name="appbar-autohide" data-value="mobile">
+          <div class="mdw-list__text mdw-selection__label">
+            <div class="mdw-list__text-line">Mobile Only</div>
+            <div class="mdw-list__text-line mdw-theme" mdw-ink="medium">[mdw-autohide="mobile"]</div>
+          </div>
+          <div class="mdw-selection__icon mdw-theme" mdw-ink="secondary" mdw-radio></div>
+        </a>
+      </li>
+      <li class="mdw-list__item">
+        <a class="mdw-list__content mdw-selection" aria-checked="false" data-name="appbar-autohide" data-value="tablet">
+          <div class="mdw-list__text mdw-selection__label">
+            <div class="mdw-list__text-line">Tablet Only</div>
+            <div class="mdw-list__text-line mdw-theme" mdw-ink="medium">[mdw-autohide="tablet"]</div>
+          </div>
+          <div class="mdw-selection__icon mdw-theme" mdw-ink="secondary" mdw-radio></div>
+        </a>
+      </li>
+      <li class="mdw-list__item">
+        <a class="mdw-list__content mdw-selection" aria-checked="true" data-name="appbar-autohide" data-value="mobile tablet">
+          <div class="mdw-list__text mdw-selection__label">
+            <div class="mdw-list__text-line">Mobile and Tablet</div>
+            <div class="mdw-list__text-line mdw-theme" mdw-ink="medium">[mdw-autohide="mobile tablet"]</div>
+          </div>
+          <div class="mdw-selection__icon mdw-theme" mdw-ink="secondary" mdw-radio></div>
+        </a>
+      </li>
+      <li class="mdw-list__item">
+        <a class="mdw-list__content mdw-selection" aria-checked="false" data-name="appbar-autohide" data-value="">
+          <div class="mdw-list__text mdw-selection__label">
+            <div class="mdw-list__text-line">All Devices</div>
+            <div class="mdw-list__text-line mdw-theme" mdw-ink="medium">[mdw-autohide=""]</div>
+          </div>
+          <div class="mdw-selection__icon mdw-theme" mdw-ink="secondary" mdw-radio></div>
+        </a>
+      </li>
+    </ul>
+    <!-- While it is possible to close on CHECK_EVENT, this would cause accessibility issues for keyboard users-->
+    <div class="mdw-dialog__button-area">
+      <%~ includeFile(T, { button: { ink:'secondary', attributes:{'mdw-autofocus':true}, text:'Change' }}) %>
+      <%~ includeFile(T, { button: { ink:'secondary', text:'Keep' }}) %>
+    </div>
+  </div>
+</div>
+<div class="mdw-dialog" id="dialog-fabmobile-options">
+  <div class="mdw-dialog__popup mdw-theme" mdw-surface="card">
+    <div class="mdw-dialog__header">
+      <div class="mdw-dialog__title">Mobile Fab Option</div>
+    </div>
+    <ul class="mdw-dialog__scrolling mdw-list mdw-selection__radio-group" role="radiogroup">
+      <li class="mdw-list__item">
+        <a class="mdw-list__content mdw-selection" aria-checked="false" data-name="fab-mobile" data-value="">
+          <div class="mdw-selection__label mdw-list__text">
+            <div class="mdw-list__text-line">End</div>
+            <div class="mdw-list__text-line mdw-theme" mdw-ink="medium">[mdw-fab-mobile=""]</div>
+          </div>
+          <div class="mdw-selection__icon mdw-theme" mdw-ink="secondary" mdw-radio></div>
+        </a>
+      </li>
+      <li class="mdw-list__item">
+        <a class="mdw-list__content mdw-selection" aria-checked="true" data-name="fab-mobile" data-value="center">
+          <div class="mdw-selection__label mdw-list__text">
+            <div class="mdw-list__text-line">Center</div>
+            <div class="mdw-list__text-line mdw-theme" mdw-ink="medium">[mdw-fab-mobile="center"]</div>
+          </div>
+          <div class="mdw-selection__icon mdw-theme" mdw-ink="secondary" mdw-radio></div>
+        </a>
+      </li>
+      <li class="mdw-list__item">
+        <a class="mdw-list__content mdw-selection" aria-checked="false" data-name="fab-mobile" data-value="full">
+          <div class="mdw-selection__label mdw-list__text">
+            <div class="mdw-list__text-line">Full</div>
+            <div class="mdw-list__text-line mdw-theme" mdw-ink="medium">[mdw-fab-mobile="full"]</div>
+          </div>
+          <div class="mdw-selection__icon mdw-theme" mdw-ink="secondary" mdw-radio></div>
+        </a>
+      </li>
+    </ul>
+    <!-- While it is possible to close on CHECK_EVENT, this would cause accessibility issues for keyboard users-->
+    <div class="mdw-dialog__button-area">
+      <%~ includeFile(T, { button: { ink:'secondary', attributes:{'mdw-autofocus':true}, text:'Change' }}) %>
+      <%~ includeFile(T, { button: { ink:'secondary', text:'Keep' }}) %>
+    </div>
+  </div>
+</div>
+<div class="mdw-dialog" id="dialog-fabdesktop-options">
+  <div class="mdw-dialog__popup mdw-theme" mdw-surface="card">
+    <div class="mdw-dialog__header">
+      <div class="mdw-dialog__title">Mobile Fab Option</div>
+    </div>
+    <ul class="mdw-dialog__scrolling mdw-list mdw-selection__radio-group" role="radiogroup">
+      <li class="mdw-list__item">
+        <a class="mdw-list__content mdw-selection" aria-checked="true" data-name="fab-desktop" data-value="">
+          <div class="mdw-selection__label mdw-list__text">
+            <div class="mdw-list__text-line">End</div>
+            <div class="mdw-list__text-line mdw-theme" mdw-ink="medium">[fab-desktop=""]</div>
+          </div>
+          <div class="mdw-selection__icon mdw-theme" mdw-ink="secondary" mdw-radio></div>
+        </a>
+      </li>
+      <li class="mdw-list__item">
+        <a class="mdw-list__content mdw-selection" aria-checked="false" data-name="fab-desktop" data-value="appbar">
+          <div class="mdw-selection__label mdw-list__text">
+            <div class="mdw-list__text-line">App Bar</div>
+            <div class="mdw-list__text-line mdw-theme" mdw-ink="medium">[fab-desktop="appbar"]</div>
+          </div>
+          <div class="mdw-selection__icon mdw-theme" mdw-ink="secondary" mdw-radio></div>
+        </a>
+      </li>
+    </ul>
+    <!-- While it is possible to close on CHECK_EVENT, this would cause accessibility issues for keyboard users-->
+    <div class="mdw-dialog__button-area">
+      <%~ includeFile(T, { button: { ink:'secondary', attributes:{'mdw-autofocus':true}, text:'Change' }}) %>
+      <%~ includeFile(T, { button: { ink:'secondary', text:'Keep' }}) %>
+    </div>
+  </div>
+</div>

package/docs/pwa/_dialogs.pug

@@ -0,0 +1,96 @@
+include ../_mixins.pug
+
+#dialog-alert.mdw-dialog(mdw-width-units="5")
+  .mdw-dialog__popup.mdw-theme(mdw-surface="card")
+    .mdw-dialog__title Alert Dialog
+    .mdw-dialog__body.mdw-theme(mdw-ink="medium") Alert dialog body text.
+    .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 Confirm Dialog
+    .mdw-dialog__body.mdw-theme(mdw-ink="medium") Confirm dialog body text.
+    .mdw-dialog__button-area
+      +mdwButton({ ink:'secondary' })(mdw-autofocus) Yes
+      +mdwButton({ ink:'secondary' }) No
+#dialog-autohide-options.mdw-dialog
+  .mdw-dialog__popup.mdw-theme(mdw-surface="card")
+    .mdw-dialog__header
+      .mdw-dialog__title App Bar Auto Hide
+    ul.mdw-dialog__scrolling.mdw-list.mdw-selection__radio-group(role="radiogroup")
+      li.mdw-list__item
+        a.mdw-list__content.mdw-selection(aria-checked="false" data-name="appbar-autohide" data-value="mobile")
+          .mdw-list__text.mdw-selection__label
+            .mdw-list__text-line Mobile Only
+            .mdw-list__text-line.mdw-theme(mdw-ink="medium") [mdw-autohide="mobile"]
+          .mdw-selection__icon.mdw-theme(mdw-ink="secondary" mdw-radio)
+      li.mdw-list__item
+        a.mdw-list__content.mdw-selection(aria-checked="false" data-name="appbar-autohide" data-value="tablet")
+          .mdw-list__text.mdw-selection__label
+            .mdw-list__text-line Tablet Only
+            .mdw-list__text-line.mdw-theme(mdw-ink="medium") [mdw-autohide="tablet"]
+          .mdw-selection__icon.mdw-theme(mdw-ink="secondary" mdw-radio)
+      li.mdw-list__item
+        a.mdw-list__content.mdw-selection(aria-checked="true" data-name="appbar-autohide" data-value="mobile tablet")
+          .mdw-list__text.mdw-selection__label
+            .mdw-list__text-line Mobile and Tablet
+            .mdw-list__text-line.mdw-theme(mdw-ink="medium") [mdw-autohide="mobile tablet"]
+          .mdw-selection__icon.mdw-theme(mdw-ink="secondary" mdw-radio)
+      li.mdw-list__item
+        a.mdw-list__content.mdw-selection(aria-checked="false" data-name="appbar-autohide" data-value="")
+          .mdw-list__text.mdw-selection__label
+            .mdw-list__text-line All Devices
+            .mdw-list__text-line.mdw-theme(mdw-ink="medium") [mdw-autohide=""]
+          .mdw-selection__icon.mdw-theme(mdw-ink="secondary" mdw-radio)
+    // While it is possible to close on CHECK_EVENT, this would cause accessibility issues for keyboard users
+    .mdw-dialog__button-area
+      +mdwButton({ ink:'secondary' })(mdw-autofocus) Change
+      +mdwButton({ ink:'secondary' }) Keep
+#dialog-fabmobile-options.mdw-dialog
+  .mdw-dialog__popup.mdw-theme(mdw-surface="card")
+    .mdw-dialog__header
+      .mdw-dialog__title Mobile Fab Option
+    ul.mdw-dialog__scrolling.mdw-list.mdw-selection__radio-group(role="radiogroup")
+      li.mdw-list__item
+        a.mdw-list__content.mdw-selection(aria-checked="false" data-name="fab-mobile" data-value="")
+          .mdw-selection__label.mdw-list__text
+            .mdw-list__text-line End
+            .mdw-list__text-line.mdw-theme(mdw-ink="medium") [mdw-fab-mobile=""]
+          .mdw-selection__icon.mdw-theme(mdw-ink="secondary" mdw-radio)
+      li.mdw-list__item
+        a.mdw-list__content.mdw-selection(aria-checked="true" data-name="fab-mobile" data-value="center")
+          .mdw-selection__label.mdw-list__text
+            .mdw-list__text-line Center
+            .mdw-list__text-line.mdw-theme(mdw-ink="medium") [mdw-fab-mobile="center"]
+          .mdw-selection__icon.mdw-theme(mdw-ink="secondary" mdw-radio)
+      li.mdw-list__item
+        a.mdw-list__content.mdw-selection(aria-checked="false" data-name="fab-mobile" data-value="full")
+          .mdw-selection__label.mdw-list__text
+            .mdw-list__text-line Full
+            .mdw-list__text-line.mdw-theme(mdw-ink="medium") [mdw-fab-mobile="full"]
+          .mdw-selection__icon.mdw-theme(mdw-ink="secondary" mdw-radio)
+    // While it is possible to close on CHECK_EVENT, this would cause accessibility issues for keyboard users
+    .mdw-dialog__button-area
+      +mdwButton({ ink:'secondary' })(mdw-autofocus) Change
+      +mdwButton({ ink:'secondary' }) Keep
+#dialog-fabdesktop-options.mdw-dialog
+  .mdw-dialog__popup.mdw-theme(mdw-surface="card")
+    .mdw-dialog__header
+      .mdw-dialog__title Mobile Fab Option
+    ul.mdw-dialog__scrolling.mdw-list.mdw-selection__radio-group(role="radiogroup")
+      li.mdw-list__item
+        a.mdw-list__content.mdw-selection(aria-checked="true" data-name="fab-desktop" data-value="")
+          .mdw-selection__label.mdw-list__text
+            .mdw-list__text-line End
+            .mdw-list__text-line.mdw-theme(mdw-ink="medium") [fab-desktop=""]
+          .mdw-selection__icon.mdw-theme(mdw-ink="secondary" mdw-radio)
+      li.mdw-list__item
+        a.mdw-list__content.mdw-selection(aria-checked="false" data-name="fab-desktop" data-value="appbar")
+          .mdw-selection__label.mdw-list__text
+            .mdw-list__text-line App Bar
+            .mdw-list__text-line.mdw-theme(mdw-ink="medium") [fab-desktop="appbar"]
+          .mdw-selection__icon.mdw-theme(mdw-ink="secondary" mdw-radio)
+    // While it is possible to close on CHECK_EVENT, this would cause accessibility issues for keyboard users
+    .mdw-dialog__button-area
+      +mdwButton({ ink:'secondary' })(mdw-autofocus) Change
+      +mdwButton({ ink:'secondary' }) Keep

package/docs/pwa/_menus.eta

@@ -0,0 +1,16 @@
+<div class="mdw-menu" id="sample-menu" mdw-width-units="4">
+  <div class="mdw-menu__popup mdw-theme" mdw-surface="card">
+    <div class="mdw-menu__item" data-action="connect">
+      <div class="mdw-menu__icon mdw-theme material-icons" mdw-ink="medium">&#xE61D;</div>
+      <div class="mdw-menu__text">Connect</div>
+    </div>
+    <div class="mdw-menu__item" data-action="hold">
+      <div class="mdw-menu__icon mdw-theme material-icons" mdw-ink="medium">&#xE620;</div>
+      <div class="mdw-menu__text">Hold</div>
+    </div>
+    <div class="mdw-menu__item" data-action="disconnect">
+      <div class="mdw-menu__icon mdw-theme material-icons" mdw-ink="medium">&#xE0B1;</div>
+      <div class="mdw-menu__text">Disconnect</div>
+    </div>
+  </div>
+</div>

package/docs/pwa/pwa-prerender.js

@@ -0,0 +1,3 @@
+import * as Document from '../../core/document/index.js';
+
+Document.onPrerender();