ui-default: init

将ui-default合并至主存储库便于维护

packages/ui-default/components/menu/menu-heading.page.js

@@ -0,0 +1,28 @@
+import { AutoloadPage } from 'vj/misc/Page';
+
+import tpl from 'vj/utils/tpl';
+
+const menuHeadingPage = new AutoloadPage('menuHeadingPage', null, () => {
+  $('[data-heading-extract-to]').get().forEach((container) => {
+    const $container = $(container);
+    const $target = $('body').find($container.attr('data-heading-extract-to'));
+    if ($target.length === 0) return;
+    let $menu = $target.children('.menu');
+    if ($menu.length === 0) {
+      $menu = $(tpl`<ul class="menu collapsed"></ul>`).appendTo($target);
+      $target.children('.menu__link').addClass('expandable');
+    }
+    $container.find('[data-heading]').get().forEach((heading) => {
+      const $heading = $(heading);
+      $(tpl`
+        <li class="menu__item">
+          <a class="menu__link" href="#${$heading.attr('id') || ''}">
+            ${$heading.text()}
+          </a>
+        </li>
+      `).appendTo($menu);
+    });
+  });
+});
+
+export default menuHeadingPage;

packages/ui-default/components/menu/menu.page.js

@@ -0,0 +1,18 @@
+import { AutoloadPage } from 'vj/misc/Page';
+import { slideDown } from 'vj/utils/slide';
+import delay from 'vj/utils/delay';
+
+function expandMenu($menu) {
+  slideDown($menu, 500, { opacity: 0 }, { opacity: 1 });
+}
+
+async function expandAllMenus() {
+  await delay(200);
+  $('.menu.collapsed').get().forEach((menu) => expandMenu($(menu)));
+}
+
+const menuPage = new AutoloadPage('menuPage', () => {
+  expandAllMenus();
+});
+
+export default menuPage;

packages/ui-default/components/menu/menu.page.styl

@@ -0,0 +1,65 @@
+.menu
+  padding: rem(5px 0)
+  font-size: rem($font-size-secondary)
+
+  .icon
+    font-size: rem($font-size-icon)
+    display: inline-block
+    margin-right: rem(5px)
+    line-height: rem(18px)
+    vertical-align: top
+
+  .hasjs &.collapsed
+    display: none
+
+.menu__item .menu
+  padding: 0
+
+.menu__link
+  outline: 0
+  text-align: left
+  display: block
+  width: 100%
+  padding: rem(12px $section-gap-h)
+  line-height: rem(18px)
+  color: $text-1-color
+  border-left: 3px solid transparent
+  position: relative
+
+  &.highlight
+    background: mix($highlight-color, #FFF, 10%)
+
+  &.expandable:after
+    font-family: $icon-font-name
+    font-size: rem($font-size-icon)
+    content: $icon-expand_more
+    position: absolute
+    right: $section-gap-h
+    top: 50%
+    line-height: 1
+    margin-top: rem($font-size-icon / -2)
+    transition: transform .2s ease-out-cubic
+    opacity: 0.85
+
+a.menu__link, button.menu__link
+  &.disabled
+    cursor: default
+    opacity: 0.5
+  &:hover
+    text-decoration: none
+  &:not(.disabled):hover
+    color: $text-1-color
+    background: $menu-item-bg-color-hover
+    border-color: darken($primary-color, 10%)
+  &.active, &.active:hover
+    border-color: darken($secondary-color, 30%)
+    background: $secondary-color
+    color: #FFF
+
+.menu__item .menu .menu__link
+  padding-left: rem($section-gap-h + 10px)
+
+.menu__seperator
+  height: 1px
+  border-top: 1px solid #EEE
+  margin: rem(5px 0)