@opentiny/vue-dropdown-item 2.9.0 → 2.11.0-alpha.0

package/lib/index.js

@@ -12,7 +12,7 @@ function _extends() {
   };
   return _extends.apply(this, arguments);
 }
-import { defineComponent, $prefix, $props, $setup } from "@opentiny/vue-common";
+import { defineComponent, $prefix, $setup, $props } from "@opentiny/vue-common";
 import PcTemplate from "./pc.js";
 import MobileTemplate from "./mobile.js";
 import MobileFirstTemplate from "./mobile-first.js";
@@ -33,69 +33,76 @@ var $constants = {
     leftWardArrow: "icon-delta-left"
   }
 };
+var dropdownItemProps = _extends({}, $props, {
+  _constants: {
+    type: Object,
+    default: function _default() {
+      return $constants;
+    }
+  },
+  icon: [String, Object],
+  disabled: Boolean,
+  divided: Boolean,
+  itemData: {
+    type: [String, Object],
+    default: ""
+  },
+  title: String,
+  label: {
+    type: String,
+    default: ""
+  },
+  level: String,
+  titleClass: String,
+  options: {
+    type: Array,
+    default: function _default2() {
+      return [];
+    }
+  },
+  type: {
+    type: String,
+    default: "selection"
+  },
+  selected: {
+    type: Boolean,
+    default: false
+  },
+  selectedField: {
+    type: String,
+    default: "selected"
+  },
+  multiStage: {
+    type: Boolean,
+    default: false
+  },
+  currentIndex: {
+    type: Number,
+    default: function _default3() {
+      return -1;
+    }
+  },
+  appendToBody: {
+    type: Boolean,
+    default: true
+  },
+  textField: {
+    type: String,
+    default: "label"
+  },
+  tip: {
+    type: [String, Function],
+    default: ""
+  },
+  tipPosition: {
+    type: String,
+    default: "right"
+  }
+});
 var DropdownItem = defineComponent({
   name: $prefix + "DropdownItem",
   componentName: "TinyDropdownItem",
-  props: _extends({}, $props, {
-    _constants: {
-      type: Object,
-      default: function _default() {
-        return $constants;
-      }
-    },
-    icon: [String, Object],
-    disabled: Boolean,
-    divided: Boolean,
-    command: {},
-    title: String,
-    titleClass: String,
-    options: {
-      type: Array,
-      default: function _default2() {
-        return [];
-      }
-    },
-    type: {
-      type: String,
-      default: "selection"
-    },
-    label: {
-      type: String,
-      default: ""
-    },
-    itemData: {
-      type: Object,
-      default: function _default3() {
-        return {};
-      }
-    },
-    appendToBody: {
-      type: Boolean,
-      default: true
-    },
-    textField: {
-      type: String,
-      default: "label"
-    },
-    selected: {
-      type: Boolean,
-      default: false
-    },
-    selectedField: {
-      type: String,
-      default: "selected"
-    },
-    multiStage: {
-      type: Boolean,
-      default: false
-    },
-    currentIndex: {
-      type: Number,
-      default: function _default4() {
-        return -1;
-      }
-    }
-  }),
+  props: dropdownItemProps,
   setup: function setup(props, context) {
     return $setup({
       props,
@@ -104,7 +111,7 @@ var DropdownItem = defineComponent({
     });
   }
 });
-var version = "2.9.0";
+var version = "2.11.0-alpha.0";
 DropdownItem.model = {
   prop: "modelValue",
   event: "update:modelValue"

package/lib/mobile-first.js

@@ -70,15 +70,11 @@ var render = function render2() {
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
   return _c("li", {
-    class: ["list-none leading-10 sm:leading-8 m-0 cursor-pointer outline-0 min-w-[4.5rem] max-w-[13.5rem] w-full [&_svg]:sm:w-3.5 [&_svg]:sm:h-3.5 [&_svg]:sm:mr-1.5 [&_svg]:mr-2 [&_svg]:align-text-bottom", {
-      "text-color-text-primary active:bg-color-bg-4 visited:text-color-brand hover:bg-color-bg-4 focus:bg-color-bg-4": !_vm.disabled
-    }, {
-      "cursor-not-allowed text-color-text-disabled [&_svg]:fill-color-text-disabled": _vm.disabled
-    }, {
+    class: _vm.m("list-none leading-10 sm:leading-8 m-0 outline-0 min-w-[theme(spacing.18)] max-w-[theme(spacing.52)] w-full [&_svg]:sm:w-3.5 [&_svg]:sm:h-3.5 [&_svg]:sm:mr-1.5 [&_svg]:mr-2 [&_svg]:align-text-bottom", _vm.disabled ? "cursor-not-allowed text-color-text-disabled [&_svg]:fill-color-text-disabled" : "text-color-text-primary active:bg-color-bg-4 visited:text-color-brand hover:bg-color-bg-4 focus:bg-color-bg-4 cursor-pointer", {
       "text-color-brand-focus": _vm.dataStore.checkedStatus && _vm.selected
     }, {
-      "!px-0 sm:!px-0": _vm.dataStore.multiStage
-    }],
+      "!px-0": _vm.dataStore.multiStage
+    }),
     attrs: {
       "aria-disabled": _vm.disabled,
       "tabindex": _vm.disabled ? null : -1

package/lib/mobile.js

@@ -1,5 +1,5 @@
 import { renderless, api } from "@opentiny/vue-renderless/dropdown-item/vue";
-import { defineComponent, props, setup as _setup } from "@opentiny/vue-common";
+import { defineComponent, directive, props, setup as _setup } from "@opentiny/vue-common";
 import { iconYes } from "@opentiny/vue-icon";
 import Popup from "@opentiny/vue-popup";
 import Button from "@opentiny/vue-button";
@@ -60,9 +60,9 @@ function normalizeComponent(scriptExports, render, staticRenderFns, functionalTe
 }
 
 var __vue2_script = defineComponent({
-  directives: {
+  directives: directive({
     Clickoutside
-  },
+  }),
   props: [].concat(props, ["modelValue", "title", "disabled", "titleClass", "options", "icon", "type"]),
   components: {
     IconYes: iconYes(),

package/lib/pc.js

@@ -1,6 +1,7 @@
 import { defineComponent, $prefix, props, setup as _setup } from "@opentiny/vue-common";
 import { renderless, api } from "@opentiny/vue-renderless/dropdown-item/vue";
 import { iconDeltaLeft } from "@opentiny/vue-icon";
+import Tooltip from "@opentiny/vue-tooltip";
 import "@opentiny/vue-theme/dropdown-item/index.css";
 function normalizeComponent(scriptExports, render, staticRenderFns, functionalTemplate, injectStyles, scopeId, moduleIdentifier, shadowMode) {
   var options = typeof scriptExports === "function" ? scriptExports.options : scriptExports;
@@ -60,9 +61,10 @@ var __vue2_script = defineComponent({
   name: $prefix + "DropdownItem",
   componentName: $prefix + "DropdownItem",
   emits: ["item-click"],
-  props: [].concat(props, ["command", "disabled", "divided", "icon", "label", "itemData", "appendToBody", "textField"]),
+  props: [].concat(props, ["disabled", "divided", "icon", "itemData", "title", "titleClass", "options", "type", "label", "appendToBody", "textField", "selected", "selectedField", "multiStage", "currentIndex", "tip", "tipPosition"]),
   components: {
-    IconDeltaLeft: iconDeltaLeft()
+    IconDeltaLeft: iconDeltaLeft(),
+    TinyTooltip: Tooltip
   },
   setup: function setup(props2, context) {
     return _setup({
@@ -77,7 +79,12 @@ var render = function render2() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
-  return _c("li", {
+  return _c("tiny-tooltip", {
+    attrs: {
+      "content": _vm.getTip,
+      "placement": _vm.tipPosition
+    }
+  }, [_c("li", {
     ref: "dropdownItem",
     staticClass: "tiny-dropdown-item tiny-dropdown-menu__item",
     class: {
@@ -90,7 +97,10 @@ var render = function render2() {
       "tabindex": _vm.disabled ? null : -1
     },
     on: {
-      "click": _vm.handleClick,
+      "click": function click($event) {
+        $event.stopPropagation();
+        return _vm.handleClick.apply(null, arguments);
+      },
       "mousedown": function mousedown($event) {
         $event.stopPropagation();
       }
@@ -120,12 +130,14 @@ var render = function render2() {
         "item-data": item,
         "icon": item.icon,
         "disabled": item.disabled,
-        "divided": item.divided
+        "divided": item.divided,
+        "tip": item.tip,
+        "tip-position": item.tipPosition
       }
     }, [_vm._t("default", null, {
       "itemData": item
     })], 2);
-  }), 1) : _vm._e()])]);
+  }), 1) : _vm._e()])])]);
 };
 var staticRenderFns = [];
 var __cssModules = {};

package/package.json

@@ -1,16 +1,18 @@
 {
   "name": "@opentiny/vue-dropdown-item",
-  "version": "2.9.0",
+  "version": "2.11.0-alpha.0",
   "description": "",
   "main": "./lib/index.js",
   "module": "./lib/index.js",
   "sideEffects": false,
+  "type": "module",
   "dependencies": {
-    "@opentiny/vue-common": "~2.9.0",
-    "@opentiny/vue-icon": "~2.9.0",
-    "@opentiny/vue-renderless": "~3.9.0",
-    "@opentiny/vue-popup": "~2.9.0",
-    "@opentiny/vue-button": "~2.9.0"
+    "@opentiny/vue-common": "~2.11.0",
+    "@opentiny/vue-icon": "~2.11.0",
+    "@opentiny/vue-renderless": "~3.11.0",
+    "@opentiny/vue-popup": "~2.11.0",
+    "@opentiny/vue-button": "~2.11.0",
+    "@opentiny/vue-tooltip": "~2.11.0"
   },
   "license": "MIT",
   "types": "index.d.ts",

package/src/index.d.ts

@@ -1,4 +1,20 @@
-declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api/dist/vue-composition-api.js").ShallowUnwrapRef<() => import("vue").VNode> & import("@vue/composition-api/dist/vue-composition-api.js").Data, {}, {}, {
+/**
+ * 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.
+ *
+ */
+export declare const $constants: {
+    ICON_MAP: {
+        leftWardArrow: string;
+    };
+};
+export declare const dropdownItemProps: {
     _constants: {
         type: ObjectConstructor;
         default: () => {
@@ -10,30 +26,22 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     icon: (ObjectConstructor | StringConstructor)[];
     disabled: BooleanConstructor;
     divided: BooleanConstructor;
-    command: {};
-    title: StringConstructor;
-    titleClass: StringConstructor;
-    options: {
-        type: ArrayConstructor;
-        default: () => never[];
-    };
-    type: {
-        type: StringConstructor;
+    itemData: {
+        type: (ObjectConstructor | StringConstructor)[];
         default: string;
     };
+    title: StringConstructor;
     label: {
         type: StringConstructor;
         default: string;
     };
-    itemData: {
-        type: ObjectConstructor;
-        default: () => {};
-    };
-    appendToBody: {
-        type: BooleanConstructor;
-        default: boolean;
+    level: StringConstructor;
+    titleClass: StringConstructor;
+    options: {
+        type: ArrayConstructor;
+        default: () => never[];
     };
-    textField: {
+    type: {
         type: StringConstructor;
         default: string;
     };
@@ -53,98 +61,28 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         type: NumberConstructor;
         default: () => number;
     };
+    appendToBody: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    textField: {
+        type: StringConstructor;
+        default: string;
+    };
+    tip: {
+        type: (StringConstructor | FunctionConstructor)[];
+        default: string;
+    };
+    tipPosition: {
+        type: StringConstructor;
+        default: string;
+    };
     tiny_mode: StringConstructor;
     tiny_mode_root: BooleanConstructor;
     tiny_template: (ObjectConstructor | FunctionConstructor)[];
     tiny_renderless: FunctionConstructor;
     tiny_theme: StringConstructor;
     tiny_chart_theme: ObjectConstructor;
-}, {
-    label: string;
-    options: unknown[];
-    textField: string;
-    type: string;
-    tiny_mode_root: boolean;
-    _constants: Record<string, any>;
-    disabled: boolean;
-    appendToBody: boolean;
-    selected: boolean;
-    divided: boolean;
-    itemData: Record<string, any>;
-    selectedField: string;
-    multiStage: boolean;
-    currentIndex: number;
-} & {
-    tiny_mode?: string | undefined;
-    title?: string | undefined;
-    tiny_template?: unknown;
-    tiny_renderless?: Function | undefined;
-    tiny_theme?: string | undefined;
-    tiny_chart_theme?: Record<string, any> | undefined;
-    icon?: unknown;
-    titleClass?: string | undefined;
-    command?: unknown;
-}> & import("vue").VueConstructor<import("vue").default> & (new (...args: any[]) => import("@vue/composition-api/dist/vue-composition-api.js").ComponentRenderProxy<{
-    label: string;
-    options: unknown[];
-    textField: string;
-    type: string;
-    tiny_mode_root: boolean;
-    _constants: Record<string, any>;
-    disabled: boolean;
-    appendToBody: boolean;
-    selected: boolean;
-    divided: boolean;
-    itemData: Record<string, any>;
-    selectedField: string;
-    multiStage: boolean;
-    currentIndex: number;
-} & {
-    tiny_mode?: string | undefined;
-    title?: string | undefined;
-    tiny_template?: unknown;
-    tiny_renderless?: Function | undefined;
-    tiny_theme?: string | undefined;
-    tiny_chart_theme?: Record<string, any> | undefined;
-    icon?: unknown;
-    titleClass?: string | undefined;
-    command?: unknown;
-}, import("@vue/composition-api/dist/vue-composition-api.js").ShallowUnwrapRef<() => import("vue").VNode>, import("@vue/composition-api/dist/vue-composition-api.js").Data, {}, {}, {
-    label: string;
-    options: unknown[];
-    textField: string;
-    type: string;
-    tiny_mode_root: boolean;
-    _constants: Record<string, any>;
-    disabled: boolean;
-    appendToBody: boolean;
-    selected: boolean;
-    divided: boolean;
-    itemData: Record<string, any>;
-    selectedField: string;
-    multiStage: boolean;
-    currentIndex: number;
-} & {
-    tiny_mode?: string | undefined;
-    title?: string | undefined;
-    tiny_template?: unknown;
-    tiny_renderless?: Function | undefined;
-    tiny_theme?: string | undefined;
-    tiny_chart_theme?: Record<string, any> | undefined;
-    icon?: unknown;
-    titleClass?: string | undefined;
-    command?: unknown;
-}, {
-    label: string;
-    options: unknown[];
-    textField: string;
-    type: string;
-    _constants: Record<string, any>;
-    appendToBody: boolean;
-    selected: boolean;
-    itemData: Record<string, any>;
-    selectedField: string;
-    multiStage: boolean;
-    currentIndex: number;
-}, true>);
+};
+declare const _default: any;
 export default _default;

package/src/mobile-first.vue.d.ts

@@ -1,12 +1,2 @@
-declare const _sfc_main: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api/dist/vue-composition-api.js").ShallowUnwrapRef<any> & import("@vue/composition-api/dist/vue-composition-api.js").Data, {}, {}, Readonly<{
-    [x: string]: any;
-}>, {
-    [x: string]: any;
-} & {}> & import("vue").VueConstructor<import("vue").default> & (new (...args: any[]) => import("@vue/composition-api/dist/vue-composition-api.js").ComponentRenderProxy<{
-    [x: string]: any;
-} & {}, import("@vue/composition-api/dist/vue-composition-api.js").ShallowUnwrapRef<any>, import("@vue/composition-api/dist/vue-composition-api.js").Data, {}, {}, {
-    [x: string]: any;
-} & {}, {
-    [x: string]: any;
-}, true>);
-export default _sfc_main;
+declare const _default: any;
+export default _default;

package/src/mobile.vue.d.ts

@@ -1,30 +1,2 @@
-declare const _sfc_main: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api/dist/vue-composition-api.js").ShallowUnwrapRef<{
-    t: (this: any, path: any, options?: any) => any;
-    vm: any;
-    f: (props: any, attrs?: {}) => {};
-    a: (attrs: any, filters: any, include: any) => {};
-    d: (props: any) => void;
-    dp: (props: any) => void;
-    gcls: (key: any) => any;
-    m: (...cssClasses: any[]) => string;
-}> & import("@vue/composition-api/dist/vue-composition-api.js").Data, {}, {}, Readonly<{
-    [x: string]: any;
-}>, {
-    [x: string]: any;
-} & {}> & import("vue").VueConstructor<import("vue").default> & (new (...args: any[]) => import("@vue/composition-api/dist/vue-composition-api.js").ComponentRenderProxy<{
-    [x: string]: any;
-} & {}, import("@vue/composition-api/dist/vue-composition-api.js").ShallowUnwrapRef<{
-    t: (this: any, path: any, options?: any) => any;
-    vm: any;
-    f: (props: any, attrs?: {}) => {};
-    a: (attrs: any, filters: any, include: any) => {};
-    d: (props: any) => void;
-    dp: (props: any) => void;
-    gcls: (key: any) => any;
-    m: (...cssClasses: any[]) => string;
-}>, import("@vue/composition-api/dist/vue-composition-api.js").Data, {}, {}, {
-    [x: string]: any;
-} & {}, {
-    [x: string]: any;
-}, true>);
-export default _sfc_main;
+declare const _default: any;
+export default _default;

package/src/pc.vue.d.ts

@@ -1,30 +1,2 @@
-declare const _sfc_main: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api/dist/vue-composition-api.js").ShallowUnwrapRef<{
-    t: (this: any, path: any, options?: any) => any;
-    vm: any;
-    f: (props: any, attrs?: {}) => {};
-    a: (attrs: any, filters: any, include: any) => {};
-    d: (props: any) => void;
-    dp: (props: any) => void;
-    gcls: (key: any) => any;
-    m: (...cssClasses: any[]) => string;
-}> & import("@vue/composition-api/dist/vue-composition-api.js").Data, {}, {}, Readonly<{
-    [x: string]: any;
-}>, {
-    [x: string]: any;
-} & {}> & import("vue").VueConstructor<import("vue").default> & (new (...args: any[]) => import("@vue/composition-api/dist/vue-composition-api.js").ComponentRenderProxy<{
-    [x: string]: any;
-} & {}, import("@vue/composition-api/dist/vue-composition-api.js").ShallowUnwrapRef<{
-    t: (this: any, path: any, options?: any) => any;
-    vm: any;
-    f: (props: any, attrs?: {}) => {};
-    a: (attrs: any, filters: any, include: any) => {};
-    d: (props: any) => void;
-    dp: (props: any) => void;
-    gcls: (key: any) => any;
-    m: (...cssClasses: any[]) => string;
-}>, import("@vue/composition-api/dist/vue-composition-api.js").Data, {}, {}, {
-    [x: string]: any;
-} & {}, {
-    [x: string]: any;
-}, true>);
-export default _sfc_main;
+declare const _default: any;
+export default _default;