ui-default: init

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

packages/ui-default/components/dropdown/Dropdown.js

@@ -0,0 +1,55 @@
+import Drop from 'tether-drop';
+import _ from 'lodash';
+import DOMAttachedObject from 'vj/components/DOMAttachedObject';
+import responsiveCutoff from 'vj/breakpoints.json';
+
+import zIndexManager from 'vj/utils/zIndexManager';
+import { isBelow } from 'vj/utils/mediaQuery';
+
+export default class Dropdown extends DOMAttachedObject {
+  static DOMAttachKey = 'vjDropdownInstance';
+
+  static DOMAttachSelector = '[data-dropdown-target]';
+
+  constructor($dom, options = {}) {
+    if ($dom.attr('data-dropdown-trigger-desktop-only') !== undefined) {
+      if (isBelow(responsiveCutoff.mobile)) {
+        super(null);
+        return;
+      }
+    }
+    super($dom);
+    this.options = {
+      target: null,
+      position: $dom.attr('data-dropdown-pos') || 'bottom left',
+      ...options,
+    };
+    this.dropInstance = new Drop({
+      target: $dom[0],
+      classes: 'dropdown',
+      content: this.options.target || $.find($dom.attr('data-dropdown-target'))[0],
+      position: this.options.position,
+      openOn: 'hover',
+      constrainToWindow: true,
+      constrainToScrollParent: false,
+    });
+    this.dropInstance.on('open', this.onDropOpen.bind(this));
+    this.dropInstance.on('close', this.onDropClose.bind(this));
+  }
+
+  detach() {
+    super.detach();
+    this.dropInstance.destroy();
+  }
+
+  onDropOpen() {
+    $(this.dropInstance.drop).css('z-index', zIndexManager.getNext());
+    this.$dom.trigger('vjDropdownShow');
+  }
+
+  onDropClose() {
+    this.$dom.trigger('vjDropdownHide');
+  }
+}
+
+_.assign(Dropdown, DOMAttachedObject);

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

@@ -0,0 +1,8 @@
+import { AutoloadPage } from 'vj/misc/Page';
+import Dropdown from './Dropdown';
+
+const dropdownPage = new AutoloadPage('dropdownPage', () => {
+  Dropdown.registerLifeCycleHooks();
+});
+
+export default dropdownPage;

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

@@ -0,0 +1,24 @@
+.dropdown-target
+  display: none
+
+.drop .dropdown-target
+  display: block
+
+.dropdown
+  .menu
+    min-width: rem(150px)
+    box-shadow: $menu-drop-shadow
+    background: $menu-drop-bg-color
+    font-size: rem($font-size-small)
+
+  .menu__link
+    padding: rem(8px 10px)
+
+.dropdown
+  .drop-content
+    transition: transform .1s ease-in-out
+    transform: scale(0.9) translateZ(0)
+
+  &.drop-after-open
+    .drop-content
+      transform: scale(1) translateZ(0)