@opentiny/vue-dropdown-item 2.5.0-alpha.0

package/lib/index.js

@@ -0,0 +1,115 @@
+import { $prefix, $props, $setup } from '@opentiny/vue-common';
+import PCTemplate from './pc';
+import MobileTemplate from './mobile';
+
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    enumerableOnly && (symbols = symbols.filter(function (sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    })), keys.push.apply(keys, symbols);
+  }
+  return keys;
+}
+function _objectSpread2(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = null != arguments[i] ? arguments[i] : {};
+    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
+      _defineProperty(target, key, source[key]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
+      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
+  }
+  return target;
+}
+function _defineProperty(obj, key, value) {
+  key = _toPropertyKey(key);
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
+function _toPrimitive(input, hint) {
+  if (typeof input !== "object" || input === null) return input;
+  var prim = input[Symbol.toPrimitive];
+  if (prim !== undefined) {
+    var res = prim.call(input, hint || "default");
+    if (typeof res !== "object") return res;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return (hint === "string" ? String : Number)(input);
+}
+function _toPropertyKey(arg) {
+  var key = _toPrimitive(arg, "string");
+  return typeof key === "symbol" ? key : String(key);
+}
+
+var template = function template(mode) {
+  if (process.env.TINY_MODE === 'pc') return PCTemplate;else if (process.env.TINY_MODE === 'mobile') return MobileTemplate;else return mode === 'mobile' ? MobileTemplate : PCTemplate;
+};
+var DropdownItem = {
+  name: $prefix + 'DropdownItem',
+  componentName: 'TinyDropdownItem',
+  props: _objectSpread2(_objectSpread2({}, $props), {}, {
+    icon: [String, Object],
+    disabled: Boolean,
+    divided: Boolean,
+    command: {},
+    title: String,
+    titleClass: String,
+    options: {
+      type: Array,
+      default: function _default() {
+        return [];
+      }
+    },
+    type: {
+      type: String,
+      default: 'selection'
+    },
+    label: {
+      type: String,
+      default: ''
+    },
+    itemData: {
+      type: Object,
+      default: function _default() {
+        return {};
+      }
+    },
+    appendToBody: {
+      type: Boolean,
+      default: true
+    },
+    textField: {
+      type: String,
+      default: 'label'
+    }
+  }),
+  setup: function setup(props, context) {
+    return $setup({
+      props: props,
+      context: context,
+      template: template
+    });
+  }
+};
+
+DropdownItem.model = {
+  prop: 'modelValue',
+  event: 'update:modelValue'
+};
+DropdownItem.install = function (Vue) {
+  Vue.component(DropdownItem.name, DropdownItem);
+};
+DropdownItem.version = '2.5.0-alpha.0';
+
+export { DropdownItem as default };

package/lib/mobile.js

@@ -0,0 +1,276 @@
+import { renderless, api } from '@opentiny/vue-renderless/dropdown-item/vue';
+import { setup, props } from '@opentiny/vue-common';
+import { iconYes } from '@opentiny/vue-icon';
+import Popup from '@opentiny/vue-popup';
+import Button from '@opentiny/vue-button';
+import Clickoutside from '@opentiny/vue-renderless/common/deps/clickoutside';
+import '@opentiny/vue-theme-mobile/dropdown-item/index.css';
+
+function _toConsumableArray(arr) {
+  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
+}
+function _arrayWithoutHoles(arr) {
+  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
+}
+function _iterableToArray(iter) {
+  if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+}
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+  return arr2;
+}
+function _nonIterableSpread() {
+  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
+var script = {
+  directives: {
+    Clickoutside: Clickoutside
+  },
+  props: [].concat(_toConsumableArray(props), ['modelValue', 'title', 'disabled', 'titleClass', 'options', 'icon', 'type']),
+  components: {
+    IconYes: iconYes(),
+    TinyPopup: Popup,
+    TinyButton: Button
+  },
+  emits: ['update:modelValue'],
+  setup: function setup$1(props, context) {
+    return setup({
+      props: props,
+      context: context,
+      renderless: renderless,
+      api: api
+    });
+  }
+};
+
+function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier
+/* server only */
+, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
+  if (typeof shadowMode !== 'boolean') {
+    createInjectorSSR = createInjector;
+    createInjector = shadowMode;
+    shadowMode = false;
+  } // Vue.extend constructor export interop.
+
+
+  var options = typeof script === 'function' ? script.options : script; // render functions
+
+  if (template && template.render) {
+    options.render = template.render;
+    options.staticRenderFns = template.staticRenderFns;
+    options._compiled = true; // functional template
+
+    if (isFunctionalTemplate) {
+      options.functional = true;
+    }
+  } // scopedId
+
+
+  if (scopeId) {
+    options._scopeId = scopeId;
+  }
+
+  var hook;
+
+  if (moduleIdentifier) {
+    // server build
+    hook = function hook(context) {
+      // 2.3 injection
+      context = context || // cached call
+      this.$vnode && this.$vnode.ssrContext || // stateful
+      this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext; // functional
+      // 2.2 with runInNewContext: true
+
+      if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
+        context = __VUE_SSR_CONTEXT__;
+      } // inject component styles
+
+
+      if (style) {
+        style.call(this, createInjectorSSR(context));
+      } // register component module identifier for async chunk inference
+
+
+      if (context && context._registeredComponents) {
+        context._registeredComponents.add(moduleIdentifier);
+      }
+    }; // used by ssr in case component is cached and beforeCreate
+    // never gets called
+
+
+    options._ssrRegister = hook;
+  } else if (style) {
+    hook = shadowMode ? function () {
+      style.call(this, createInjectorShadow(this.$root.$options.shadowRoot));
+    } : function (context) {
+      style.call(this, createInjector(context));
+    };
+  }
+
+  if (hook) {
+    if (options.functional) {
+      // register for functional component in vue file
+      var originalRender = options.render;
+
+      options.render = function renderWithStyleInjection(h, context) {
+        hook.call(context);
+        return originalRender(h, context);
+      };
+    } else {
+      // inject component registration as beforeCreate hook
+      var existing = options.beforeCreate;
+      options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
+    }
+  }
+
+  return script;
+}
+
+var normalizeComponent_1 = normalizeComponent;
+
+var __vue_script__ = script;
+var __vue_render__ = function __vue_render__() {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c('div', {
+    directives: [{
+      name: "show",
+      rawName: "v-show",
+      value: _vm.state.showWrapper,
+      expression: "state.showWrapper"
+    }],
+    ref: "wrapper",
+    staticClass: "tiny-mobile-dropdown-item",
+    class: 'tiny-mobile-dropdown-item--' + _vm.state.direction,
+    style: _vm.state.itemStyle,
+    on: {
+      "click": _vm.clickWrapper
+    }
+  }, [_c('tiny-popup', {
+    attrs: {
+      "popupClass": "tiny-mobile-dropdown-item__content",
+      "overlay": _vm.state.overlay,
+      "close-on-click-overlay": _vm.state.closeOnClickOverlay,
+      "closeable": false,
+      "position": _vm.state.direction === 'down' ? 'top' : 'bottom',
+      "duration": _vm.state.transition ? _vm.state.duration : 0
+    },
+    on: {
+      "open": _vm.open,
+      "close": _vm.close,
+      "opened": _vm.opened,
+      "closed": _vm.closed
+    },
+    model: {
+      value: _vm.state.showPopup,
+      callback: function callback($$v) {
+        _vm.$set(_vm.state, "showPopup", $$v);
+      },
+      expression: "state.showPopup"
+    }
+  }, [_vm._t("default", function () {
+    return [_vm.type === 'selection' ? _c('div', {
+      staticClass: "tiny-mobile-dropdown-item__options"
+    }, _vm._l(_vm.options, function (item, index) {
+      return _c('div', {
+        key: index,
+        staticClass: "tiny-mobile-dropdown-item__cell tiny-mobile-dropdown-item__option",
+        class: item.value === _vm.modelValue ? 'is-active' : '',
+        attrs: {
+          "tabindex": "0"
+        },
+        on: {
+          "click": function click($event) {
+            return _vm.clickItem(item.value);
+          }
+        }
+      }, [_c('div', {
+        staticClass: "tiny-mobile-dropdown-item__option-icon"
+      }, [_vm._t("icon", function () {
+        return [_c(_vm.icon, {
+          tag: "component"
+        })];
+      })], 2), _vm._v(" "), _c('div', {
+        staticClass: "tiny-mobile-dropdown-item__option-title"
+      }, [_vm._t("title", function () {
+        return [_c('span', {
+          style: {
+            color: item.value === _vm.modelValue && _vm.state.activeColor ? _vm.state.activeColor : ''
+          }
+        }, [_vm._v(_vm._s(item.text))])];
+      }, {
+        "titleData": item
+      })], 2), _vm._v(" "), _c('div', {
+        staticClass: "tiny-mobile-dropdown-item__option-value"
+      }, [item.value === _vm.modelValue ? _c('icon-yes', {
+        attrs: {
+          "fill": _vm.state.activeColor ? _vm.state.activeColor : '#f36f64'
+        }
+      }) : _vm._e()], 1)]);
+    }), 0) : _vm._e(), _vm._v(" "), _vm.type === 'filter' ? _c('div', {
+      directives: [{
+        name: "clickoutside",
+        rawName: "v-clickoutside",
+        value: _vm.clickOutside,
+        expression: "clickOutside"
+      }],
+      staticClass: "tiny-mobile-dropdown-item__filter"
+    }, [_c('div', {
+      staticClass: "tiny-mobile-dropdown-item__filter-wrap"
+    }, _vm._l(_vm.options, function (item, key) {
+      return _c('div', {
+        key: key,
+        staticClass: "tiny-mobile-dropdown-item__cell tiny-mobile-dropdown-item__filter-item"
+      }, [_c('span', {
+        staticClass: "tiny-mobile-dropdown-item__filter-title"
+      }, [_vm._v(_vm._s(item.title))]), _vm._v(" "), _c('ul', _vm._l(_vm.options.length === 0 ? item.data = [] : item.data, function (tag, tagkey) {
+        return _c('li', {
+          key: tagkey,
+          staticClass: "tiny-mobile-dropdown-item__filter-li",
+          class: [_vm.modelValue[key].indexOf(tag.value) > -1 ? 'checked' : ''],
+          style: _vm.getOptionStyle(tag, _vm.modelValue[key]),
+          on: {
+            "click": function click($event) {
+              return _vm.tagClick(key, tag, $event);
+            }
+          }
+        }, [_vm._v("\n                " + _vm._s(tag.text) + "\n              ")]);
+      }), 0)]);
+    }), 0), _vm._v(" "), _c('div', {
+      staticClass: "tiny-mobile-dropdown-item__filter-operate"
+    }, [_c('tiny-button', {
+      on: {
+        "click": _vm.reset
+      }
+    }, [_vm._v("Reset")]), _vm._v(" "), _c('tiny-button', {
+      attrs: {
+        "type": "primary"
+      },
+      on: {
+        "click": _vm.confirm
+      }
+    }, [_vm._v("OK")])], 1)]) : _vm._e()];
+  })], 2)], 1);
+};
+var __vue_staticRenderFns__ = [];
+var __vue_inject_styles__ = undefined;
+var __vue_scope_id__ = undefined;
+var __vue_module_identifier__ = undefined;
+var __vue_is_functional_template__ = false;
+var __vue_component__ = normalizeComponent_1({
+  render: __vue_render__,
+  staticRenderFns: __vue_staticRenderFns__
+}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, undefined, undefined);
+
+export { __vue_component__ as default };

package/lib/pc.js

@@ -0,0 +1,224 @@
+import { $prefix, setup, props } from '@opentiny/vue-common';
+import { renderless, api } from '@opentiny/vue-renderless/dropdown-item/vue';
+import { iconDeltaLeft } from '@opentiny/vue-icon';
+
+function _toConsumableArray(arr) {
+  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
+}
+function _arrayWithoutHoles(arr) {
+  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
+}
+function _iterableToArray(iter) {
+  if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+}
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+  return arr2;
+}
+function _nonIterableSpread() {
+  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z = "[class*=tiny-] li.tiny-dropdown-menu__item{--ti-dropdown-menu-item-hover-bg-color:var(--ti-base-color-hover-background);--ti-dropdown-menu-item-hover-text-color:var(--ti-base-color-brand-6);--ti-dropdown-menu-item-active-bg-color:var(--ti-base-color-brand-6);--ti-dropdown-menu-item-active-text-color:var(--ti-base-color-white);--ti-dropdown-menu-item-disabled-text-color:var(--ti-common-color-text-disabled);--ti-dropdown-menu-item-text-color:#333;--ti-dropdown-menu-item-height:1.5;--ti-dropdown-menu-item-padding-vertical:6px;--ti-dropdown-menu-item-padding-horizontal:20px;--ti-dropdown-menu-item-border-radius:0;--ti-dropdown-menu-item-max-width:130px;--ti-dropdown-menu-item-divided-bg-color:var(--ti-base-color-white);--ti-dropdown-menu-item-divided-margin-top:var(--ti-common-space-base);list-style:none;line-height:var(--ti-dropdown-menu-item-height);padding:var(--ti-dropdown-menu-item-padding-vertical) var(--ti-dropdown-menu-item-padding-horizontal);margin:0;font-size:var(--ti-common-font-size-base);color:var(--ti-dropdown-menu-item-text-color);cursor:pointer;outline:0;position:relative;word-break:break-all;max-width:var(--ti-dropdown-menu-item-max-width);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}[class*=tiny-] li.tiny-dropdown-menu__item .tiny-dropdown-menu__item--child{position:absolute;right:100%;top:0;display:none}[class*=tiny-] li.tiny-dropdown-menu__item:focus,[class*=tiny-] li.tiny-dropdown-menu__item:not(.is-disabled):hover{background-color:var(--ti-dropdown-menu-item-hover-bg-color);color:var(--ti-dropdown-menu-item-hover-text-color);border-radius:var(--ti-dropdown-menu-item-border-radius)}[class*=tiny-] li.tiny-dropdown-menu__item:focus>.tiny-dropdown-menu__item-content svg,[class*=tiny-] li.tiny-dropdown-menu__item:focus>.tiny-dropdown-menu__item-expand svg,[class*=tiny-] li.tiny-dropdown-menu__item:not(.is-disabled):hover>.tiny-dropdown-menu__item-content svg,[class*=tiny-] li.tiny-dropdown-menu__item:not(.is-disabled):hover>.tiny-dropdown-menu__item-expand svg{fill:var(--ti-dropdown-menu-item-hover-text-color)}[class*=tiny-] li.tiny-dropdown-menu__item:focus>.tiny-dropdown-menu__item--child,[class*=tiny-] li.tiny-dropdown-menu__item:not(.is-disabled):hover>.tiny-dropdown-menu__item--child{display:block}[class*=tiny-] li.tiny-dropdown-menu__item:not(.is-disabled):active{background-color:var(--ti-dropdown-menu-item-active-bg-color);color:var(--ti-dropdown-menu-item-active-text-color);border-radius:var(--ti-dropdown-menu-item-border-radius)}[class*=tiny-] li.tiny-dropdown-menu__item:not(.is-disabled):active svg{fill:var(--ti-dropdown-menu-item-active-text-color)}[class*=tiny-] li.tiny-dropdown-menu__item svg{margin-right:5px;margin-top:-2px}[class*=tiny-] li.tiny-dropdown-menu__item.is-disabled{cursor:not-allowed;color:var(--ti-dropdown-menu-item-disabled-text-color)}[class*=tiny-] li.tiny-dropdown-menu__item .tiny-dropdown-menu__item-expand{display:inline-block;height:100%;margin-left:-20px;width:20px}[class*=tiny-] li.tiny-dropdown-menu__item .tiny-dropdown-menu__item-expand .tiny-svg{width:.6em;height:.6em;margin-left:5px}.tiny-dropdown-menu__item--divided{position:relative;margin-top:6px;border-top:1px solid #e4e7ed}.tiny-dropdown-menu__item--divided:before{height:6px;display:block;margin:0 -20px;background-color:var(--ti-dropdown-menu-item-divided-bg-color)}";
+styleInject(css_248z);
+
+var script = {
+  name: $prefix + 'DropdownItem',
+  componentName: $prefix + 'DropdownItem',
+  emits: ['item-click'],
+  props: [].concat(_toConsumableArray(props), ['command', 'disabled', 'divided', 'icon', 'label', 'itemData', 'appendToBody', 'textField']),
+  components: {
+    iconDeltaLeft: iconDeltaLeft()
+  },
+  setup: function setup$1(props, context) {
+    return setup({
+      props: props,
+      context: context,
+      renderless: renderless,
+      api: api
+    });
+  }
+};
+
+function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier
+/* server only */
+, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
+  if (typeof shadowMode !== 'boolean') {
+    createInjectorSSR = createInjector;
+    createInjector = shadowMode;
+    shadowMode = false;
+  } // Vue.extend constructor export interop.
+
+
+  var options = typeof script === 'function' ? script.options : script; // render functions
+
+  if (template && template.render) {
+    options.render = template.render;
+    options.staticRenderFns = template.staticRenderFns;
+    options._compiled = true; // functional template
+
+    if (isFunctionalTemplate) {
+      options.functional = true;
+    }
+  } // scopedId
+
+
+  if (scopeId) {
+    options._scopeId = scopeId;
+  }
+
+  var hook;
+
+  if (moduleIdentifier) {
+    // server build
+    hook = function hook(context) {
+      // 2.3 injection
+      context = context || // cached call
+      this.$vnode && this.$vnode.ssrContext || // stateful
+      this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext; // functional
+      // 2.2 with runInNewContext: true
+
+      if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
+        context = __VUE_SSR_CONTEXT__;
+      } // inject component styles
+
+
+      if (style) {
+        style.call(this, createInjectorSSR(context));
+      } // register component module identifier for async chunk inference
+
+
+      if (context && context._registeredComponents) {
+        context._registeredComponents.add(moduleIdentifier);
+      }
+    }; // used by ssr in case component is cached and beforeCreate
+    // never gets called
+
+
+    options._ssrRegister = hook;
+  } else if (style) {
+    hook = shadowMode ? function () {
+      style.call(this, createInjectorShadow(this.$root.$options.shadowRoot));
+    } : function (context) {
+      style.call(this, createInjector(context));
+    };
+  }
+
+  if (hook) {
+    if (options.functional) {
+      // register for functional component in vue file
+      var originalRender = options.render;
+
+      options.render = function renderWithStyleInjection(h, context) {
+        hook.call(context);
+        return originalRender(h, context);
+      };
+    } else {
+      // inject component registration as beforeCreate hook
+      var existing = options.beforeCreate;
+      options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
+    }
+  }
+
+  return script;
+}
+
+var normalizeComponent_1 = normalizeComponent;
+
+var __vue_script__ = script;
+var __vue_render__ = function __vue_render__() {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c('li', {
+    ref: "dropdownItem",
+    staticClass: "tiny-dropdown-menu__item",
+    class: {
+      'is-disabled': _vm.disabled,
+      'tiny-dropdown-menu__item--divided': _vm.divided
+    },
+    attrs: {
+      "aria-disabled": _vm.disabled,
+      "tabindex": _vm.disabled ? null : -1
+    },
+    on: {
+      "click": _vm.handleClick,
+      "mousedown": function mousedown($event) {
+        $event.stopPropagation();
+      }
+    }
+  }, [_vm.itemData.children && _vm.itemData.children.length ? _c('span', {
+    staticClass: "tiny-dropdown-menu__item-expand"
+  }, [_c('icon-delta-left')], 1) : _vm._e(), _vm._v(" "), _c('div', {
+    staticClass: "tiny-dropdown-menu__item-content"
+  }, [_vm.icon ? _c(_vm.icon, {
+    tag: "component",
+    staticClass: "tiny-svg-size"
+  }) : _vm._e(), _vm._v(" "), _vm._t("default", function () {
+    return [_c('span', [_vm._v(_vm._s(_vm.label))])];
+  }, {
+    "itemData": _vm.itemData
+  })], 2), _vm._v(" "), _vm.itemData.children && _vm.itemData.children.length ? _c('ul', {
+    class: ['tiny-dropdown-menu', 'tiny-dropdown-menu__item--child', _vm.state.popperClass]
+  }, _vm._l(_vm.itemData.children, function (item, index) {
+    return _c('tiny-dropdown-item', {
+      key: index,
+      attrs: {
+        "label": item[_vm.state.textField],
+        "itemData": item,
+        "icon": item.icon,
+        "disabled": item.disabled,
+        "divided": item.divided
+      }
+    }, [_vm._t("default", null, {
+      "itemData": item
+    })], 2);
+  }), 1) : _vm._e()]);
+};
+var __vue_staticRenderFns__ = [];
+var __vue_inject_styles__ = undefined;
+var __vue_scope_id__ = undefined;
+var __vue_module_identifier__ = undefined;
+var __vue_is_functional_template__ = false;
+var __vue_component__ = normalizeComponent_1({
+  render: __vue_render__,
+  staticRenderFns: __vue_staticRenderFns__
+}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, undefined, undefined);
+
+export { __vue_component__ as default };

package/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@opentiny/vue-dropdown-item",
+  "version": "2.5.0-alpha.0",
+  "description": "",
+  "main": "lib/index.js",
+  "scripts": {
+    "lint": "eslint src/**/*{.js,.html,.vue} --quiet",
+    "build:ui2": "cross-env BUILD_TARGET=single NODE_ENV=production node ../../build/build-ui.js",
+    "build:ui3": "cross-env BUILD_TARGET=single NODE_ENV=production node ../../example/build/build-ui.js"
+  },
+  "dependencies": {
+    "@opentiny/vue-common": "~2.5.0-alpha.0",
+    "@opentiny/vue-icon": "~2.5.0-alpha.0",
+    "@opentiny/vue-renderless": "~3.5.0",
+    "@opentiny/vue-popup": "~2.5.0-alpha.0",
+    "@opentiny/vue-button": "~2.5.0-alpha.0",
+    "@opentiny/vue-theme": "~3.5.0",
+    "@opentiny/vue-theme-mobile": "~3.5.0"
+  },
+  "license": "MIT",
+  "sideEffects": false
+}