@opentiny/vue-dropdown-item 3.1.0-alpha.0 → 3.5.0

package/index.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) 2022 - present TinyVue Authors.
+ * Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+import DropdownItem from './src/index';
+export default DropdownItem;

package/lib/index.js

@@ -74,6 +74,24 @@ var DropdownItem = {
     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) {
@@ -92,6 +110,6 @@ DropdownItem.model = {
 DropdownItem.install = function (Vue) {
   Vue.component(DropdownItem.name, DropdownItem);
 };
-DropdownItem.version = '3.1.0-alpha.0';
+DropdownItem.version = '3.5.0';
 
 export { DropdownItem as default };

package/lib/pc.js

@@ -1,6 +1,7 @@
-import { setup, props } from '@opentiny/vue-common';
-import '@opentiny/vue-theme/dropdown-item/index.css';
-import { openBlock, createElementBlock, normalizeClass, withModifiers, createBlock, resolveDynamicComponent, createCommentVNode, renderSlot } from 'vue';
+import { $prefix, setup, props } from '@opentiny/vue-common';
+import { renderless, api } from '@opentiny/vue-renderless/dropdown-item/vue';
+import { iconDeltaLeft } from '@opentiny/vue-icon';
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, withModifiers, createVNode, createCommentVNode, createElementVNode, createBlock, resolveDynamicComponent, renderSlot, toDisplayString, Fragment, renderList, withCtx } from 'vue';
 
 function _toConsumableArray(arr) {
   return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
@@ -28,42 +29,104 @@ 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 = {
-  props: [].concat(_toConsumableArray(props), ['command', 'disabled', 'divided', 'icon']),
+  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: function renderless(props, hooks, _ref) {
-        var dispatch = _ref.dispatch,
-          vm = _ref.vm;
-        return {
-          handleClick: function handleClick() {
-            dispatch('TinyDropdown', 'menu-item-click', [props.itemData, vm]);
-          }
-        };
-      },
-      api: ['handleClick']
+      renderless: renderless,
+      api: api
     });
   }
 };
 
 var _hoisted_1 = ["aria-disabled", "tabindex"];
+var _hoisted_2 = {
+  key: 0,
+  class: "tiny-dropdown-menu__item-expand"
+};
+var _hoisted_3 = {
+  class: "tiny-dropdown-menu__item-content"
+};
 function render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _component_icon_delta_left = resolveComponent("icon-delta-left");
+  var _component_tiny_dropdown_item = resolveComponent("tiny-dropdown-item");
   return openBlock(), createElementBlock("li", {
     class: normalizeClass(["tiny-dropdown-menu__item", {
       'is-disabled': $props.disabled,
       'tiny-dropdown-menu__item--divided': $props.divided
     }]),
-    onClick: _cache[0] || (_cache[0] = withModifiers(function () {
+    ref: "dropdownItem",
+    onClick: _cache[0] || (_cache[0] = function () {
       return _ctx.handleClick && _ctx.handleClick.apply(_ctx, arguments);
-    }, ["stop"])),
+    }),
+    onMousedown: _cache[1] || (_cache[1] = withModifiers(function () {}, ["stop"])),
     "aria-disabled": $props.disabled,
     tabindex: $props.disabled ? null : -1
-  }, [$props.icon ? (openBlock(), createBlock(resolveDynamicComponent($props.icon), {
+  }, [$props.itemData.children && $props.itemData.children.length ? (openBlock(), createElementBlock("span", _hoisted_2, [createVNode(_component_icon_delta_left)])) : createCommentVNode("", true), createElementVNode("div", _hoisted_3, [$props.icon ? (openBlock(), createBlock(resolveDynamicComponent($props.icon), {
     key: 0,
     class: "tiny-svg-size"
-  })) : createCommentVNode("", true), renderSlot(_ctx.$slots, "default")], 10, _hoisted_1);
+  })) : createCommentVNode("", true), renderSlot(_ctx.$slots, "default", {
+    itemData: $props.itemData
+  }, function () {
+    return [createElementVNode("span", null, toDisplayString($props.label), 1)];
+  })]), $props.itemData.children && $props.itemData.children.length ? (openBlock(), createElementBlock("ul", {
+    key: 1,
+    class: normalizeClass(['tiny-dropdown-menu', 'tiny-dropdown-menu__item--child', _ctx.state.popperClass])
+  }, [(openBlock(true), createElementBlock(Fragment, null, renderList($props.itemData.children, function (item, index) {
+    return openBlock(), createBlock(_component_tiny_dropdown_item, {
+      key: index,
+      label: item[_ctx.state.textField],
+      itemData: item,
+      icon: item.icon,
+      disabled: item.disabled,
+      divided: item.divided
+    }, {
+      default: withCtx(function () {
+        return [renderSlot(_ctx.$slots, "default", {
+          itemData: item
+        })];
+      }),
+      _: 2
+    }, 1032, ["label", "itemData", "icon", "disabled", "divided"]);
+  }), 128))], 2)) : createCommentVNode("", true)], 42, _hoisted_1);
 }
 
 script.render = render;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-dropdown-item",
-  "version": "3.1.0-alpha.0",
+  "version": "3.5.0",
   "description": "",
   "main": "lib/index.js",
   "scripts": {
@@ -9,14 +9,15 @@
     "build:ui3": "cross-env BUILD_TARGET=single NODE_ENV=production node ../../example/build/build-ui.js"
   },
   "dependencies": {
-    "@opentiny/vue-common": "~3.1.0-alpha.0",
-    "@opentiny/vue-icon": "~3.1.0-alpha.0",
-    "@opentiny/vue-renderless": "~3.1.0-alpha.0",
-    "@opentiny/vue-popup": "~3.1.0-alpha.0",
-    "@opentiny/vue-button": "~3.1.0-alpha.0",
-    "@opentiny/vue-theme": "~3.1.0-alpha.0",
-    "@opentiny/vue-theme-mobile": "~3.1.0-alpha.0"
+    "@opentiny/vue-common": "~3.5.0",
+    "@opentiny/vue-icon": "~3.5.0",
+    "@opentiny/vue-renderless": "~3.5.0",
+    "@opentiny/vue-popup": "~3.5.0",
+    "@opentiny/vue-button": "~3.5.0",
+    "@opentiny/vue-theme": "~3.5.0",
+    "@opentiny/vue-theme-mobile": "~3.5.0"
   },
   "license": "MIT",
+  "types": "index.d.ts",
   "sideEffects": false
 }

package/src/index.d.ts

@@ -0,0 +1,37 @@
+declare const _default: import("vue").DefineComponent<{
+    icon: (ObjectConstructor | StringConstructor)[];
+    disabled: BooleanConstructor;
+    divided: BooleanConstructor;
+    command: {};
+    title: StringConstructor;
+    titleClass: StringConstructor;
+    options: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+    type: {
+        type: StringConstructor;
+        default: string;
+    };
+}, () => any, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    icon: (ObjectConstructor | StringConstructor)[];
+    disabled: BooleanConstructor;
+    divided: BooleanConstructor;
+    command: {};
+    title: StringConstructor;
+    titleClass: StringConstructor;
+    options: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+    type: {
+        type: StringConstructor;
+        default: string;
+    };
+}>>, {
+    type: string;
+    disabled: boolean;
+    options: unknown[];
+    divided: boolean;
+}>;
+export default _default;

package/src/index.vue.d.ts

@@ -0,0 +1,50 @@
+declare const _default: import("vue").DefineComponent<{
+    modelValue: null;
+    title: StringConstructor;
+    disabled: BooleanConstructor;
+    titleClass: StringConstructor;
+    options: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+    icon: ObjectConstructor;
+    type: {
+        type: StringConstructor;
+        default: string;
+    };
+}, {
+    t: any;
+    vm: any;
+    f: (props: any, attrs?: {}) => {};
+    a: (attrs: any, filters: any, include: any) => {};
+    d: (props: any) => void;
+    dp: (props: any) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click" | "change" | "update:modelValue" | "close" | "confirm" | "open" | "opened" | "closed")[], "click" | "change" | "update:modelValue" | "close" | "confirm" | "open" | "opened" | "closed", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: null;
+    title: StringConstructor;
+    disabled: BooleanConstructor;
+    titleClass: StringConstructor;
+    options: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+    icon: ObjectConstructor;
+    type: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & {
+    onChange?: ((...args: any[]) => any) | undefined;
+    onClick?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onClose?: ((...args: any[]) => any) | undefined;
+    onConfirm?: ((...args: any[]) => any) | undefined;
+    onOpen?: ((...args: any[]) => any) | undefined;
+    onOpened?: ((...args: any[]) => any) | undefined;
+    onClosed?: ((...args: any[]) => any) | undefined;
+}, {
+    type: string;
+    disabled: boolean;
+    options: unknown[];
+}>;
+export default _default;

package/src/mobile.vue.d.ts

@@ -0,0 +1,22 @@
+import '@opentiny/vue-theme-mobile/dropdown-item/index.css';
+declare const _default: {
+    directives: {
+        Clickoutside: any;
+    };
+    props: string[];
+    components: {
+        IconYes: any;
+        TinyPopup: any;
+        TinyButton: any;
+    };
+    emits: string[];
+    setup(props: any, context: any): {
+        t: any;
+        vm: any;
+        f: (props: any, attrs?: {}) => {};
+        a: (attrs: any, filters: any, include: any) => {};
+        d: (props: any) => void;
+        dp: (props: any) => void;
+    };
+};
+export default _default;

package/src/pc.vue.d.ts

@@ -0,0 +1,13 @@
+import '@opentiny/vue-theme/dropdown-item/index.css';
+declare const _default: {
+    props: string[];
+    setup(props: any, context: any): {
+        t: any;
+        vm: any;
+        f: (props: any, attrs?: {}) => {};
+        a: (attrs: any, filters: any, include: any) => {};
+        d: (props: any) => void;
+        dp: (props: any) => void;
+    };
+};
+export default _default;