@opentiny/vue-dropdown-item - npm Package Compare versions

Comparing version 3.1.0-alpha.0 to 3.5.0-alpha.0

lib/index.js

@@ -77,2 +77,20 @@ import { $prefix, $props, $setup } from '@opentiny/vue-common';
       default: 'selection'
+    },
+    label: {
+      type: String,
+      default: ''
+    },
+    itemData: {
+      type: Object,
+      default: function _default() {
+        return {};
+      }
+    },
+    appendToBody: {
+      type: Boolean,
+      default: true
+    },
+    textField: {
+      type: String,
+      default: 'label'
     }
@@ -96,4 +114,4 @@ }),
 };
-DropdownItem.version = '3.1.0-alpha.0';
+DropdownItem.version = '3.5.0-alpha.0';
 
 export { DropdownItem as default };

lib/pc.js

@@ -1,4 +0,5 @@
-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';
 
@@ -31,4 +32,40 @@ function _toConsumableArray(arr) {
 
+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) {
@@ -38,12 +75,4 @@ return setup({
       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
     });
@@ -54,3 +83,12 @@ }
 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", {
@@ -61,11 +99,36 @@ class: normalizeClass(["tiny-dropdown-menu__item", {
     }]),
-    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);
 }
@@ -72,0 +135,0 @@

package.json

 {
   "name": "@opentiny/vue-dropdown-item",
-  "version": "3.1.0-alpha.0",
+  "version": "3.5.0-alpha.0",
   "description": "",
@@ -12,12 +12,13 @@ "main": "lib/index.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-alpha.0",
+    "@opentiny/vue-icon": "~3.5.0-alpha.0",
+    "@opentiny/vue-renderless": "~3.5.0",
+    "@opentiny/vue-popup": "~3.5.0-alpha.0",
+    "@opentiny/vue-button": "~3.5.0-alpha.0",
+    "@opentiny/vue-theme": "~3.5.0",
+    "@opentiny/vue-theme-mobile": "~3.5.0"
   },
   "license": "MIT",
+  "types": "index.d.ts",
   "sideEffects": false
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Mixed license

License

(Experimental) Package contains multiple licenses.

Found 1 instance in 1 package

Unidentified License

License

(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

25451

increased by72.76%

Number of package files

9

increased by125%

Lines of code

556

increased by67.98%

Worsened metrics

Number of low license alerts

2

increased byInfinity%

License quality

80

decreased by-20%

Number of low supply chain risk alerts

4

increased by33.33%

Dependency changes

• + Added@babel/runtime@7.18.3(transitive)

• + Added@opentiny/vue-button@3.5.0(transitive)

• + Added@opentiny/vue-common@3.5.0(transitive)

• + Added@opentiny/vue-icon@3.5.2(transitive)

• + Added@opentiny/vue-locale@3.5.0(transitive)

• + Added@opentiny/vue-popup@3.5.0(transitive)

• + Added@opentiny/vue-renderless@3.5.0(transitive)

• + Added@opentiny/vue-theme@3.5.0(transitive)

• + Added@opentiny/vue-theme-mobile@3.5.0(transitive)

• + Addedregenerator-runtime@0.13.11(transitive)

• - Removed@babel/runtime@7.25.6(transitive)

• - Removed@opentiny/vue-button@3.1.0-alpha.0(transitive)

• - Removed@opentiny/vue-common@3.1.0-alpha.0(transitive)

• - Removed@opentiny/vue-icon@3.1.0-alpha.0(transitive)

• - Removed@opentiny/vue-locale@3.1.0-alpha.0(transitive)

• - Removed@opentiny/vue-popup@3.1.0-alpha.0(transitive)

• - Removed@opentiny/vue-renderless@3.1.0-alpha.0(transitive)

• - Removed@opentiny/vue-theme@3.1.0-alpha.1(transitive)

• - Removed@opentiny/vue-theme-mobile@3.1.0-alpha.0(transitive)

• - Removedregenerator-runtime@0.14.1(transitive)

• Updated@opentiny/vue-button@~3.5.0-alpha.0

• Updated@opentiny/vue-common@~3.5.0-alpha.0

• Updated@opentiny/vue-icon@~3.5.0-alpha.0

• Updated@opentiny/vue-popup@~3.5.0-alpha.0

• Updated@opentiny/vue-renderless@~3.5.0

• Updated@opentiny/vue-theme@~3.5.0

• Updated@opentiny/vue-theme-mobile@~3.5.0