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

package/lib/index.js

@@ -0,0 +1,97 @@
+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'
+    }
+  }),
+  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 = '3.1.0-alpha.0';
+
+export { DropdownItem as default };

package/lib/mobile.js

@@ -0,0 +1,175 @@
+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';
+import { resolveComponent, resolveDirective, withDirectives, openBlock, createElementBlock, normalizeClass, normalizeStyle, createVNode, withCtx, renderSlot, Fragment, renderList, createElementVNode, createBlock, resolveDynamicComponent, toDisplayString, createCommentVNode, createTextVNode, vShow } from 'vue';
+
+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
+    });
+  }
+};
+
+var _hoisted_1 = {
+  key: 0,
+  class: "tiny-mobile-dropdown-item__options"
+};
+var _hoisted_2 = ["onClick"];
+var _hoisted_3 = {
+  class: "tiny-mobile-dropdown-item__option-icon"
+};
+var _hoisted_4 = {
+  class: "tiny-mobile-dropdown-item__option-title"
+};
+var _hoisted_5 = {
+  class: "tiny-mobile-dropdown-item__option-value"
+};
+var _hoisted_6 = {
+  key: 1,
+  class: "tiny-mobile-dropdown-item__filter"
+};
+var _hoisted_7 = {
+  class: "tiny-mobile-dropdown-item__filter-wrap"
+};
+var _hoisted_8 = {
+  class: "tiny-mobile-dropdown-item__filter-title"
+};
+var _hoisted_9 = ["onClick"];
+var _hoisted_10 = {
+  class: "tiny-mobile-dropdown-item__filter-operate"
+};
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _component_icon_yes = resolveComponent("icon-yes");
+  var _component_tiny_button = resolveComponent("tiny-button");
+  var _component_tiny_popup = resolveComponent("tiny-popup");
+  var _directive_clickoutside = resolveDirective("clickoutside");
+  return withDirectives((openBlock(), createElementBlock("div", {
+    ref: "wrapper",
+    class: normalizeClass(['tiny-mobile-dropdown-item--' + _ctx.state.direction, "tiny-mobile-dropdown-item"]),
+    onClick: _cache[1] || (_cache[1] = function () {
+      return _ctx.clickWrapper && _ctx.clickWrapper.apply(_ctx, arguments);
+    }),
+    style: normalizeStyle(_ctx.state.itemStyle)
+  }, [createVNode(_component_tiny_popup, {
+    modelValue: _ctx.state.showPopup,
+    "onUpdate:modelValue": _cache[0] || (_cache[0] = function ($event) {
+      return _ctx.state.showPopup = $event;
+    }),
+    popupClass: "tiny-mobile-dropdown-item__content",
+    overlay: _ctx.state.overlay,
+    "close-on-click-overlay": _ctx.state.closeOnClickOverlay,
+    closeable: false,
+    position: _ctx.state.direction === 'down' ? 'top' : 'bottom',
+    duration: _ctx.state.transition ? _ctx.state.duration : 0,
+    onOpen: _ctx.open,
+    onClose: _ctx.close,
+    onOpened: _ctx.opened,
+    onClosed: _ctx.closed
+  }, {
+    default: withCtx(function () {
+      return [renderSlot(_ctx.$slots, "default", {}, function () {
+        return [$props.type === 'selection' ? (openBlock(), createElementBlock("div", _hoisted_1, [(openBlock(true), createElementBlock(Fragment, null, renderList($props.options, function (item, index) {
+          return openBlock(), createElementBlock("div", {
+            class: normalizeClass(["tiny-mobile-dropdown-item__cell tiny-mobile-dropdown-item__option", item.value === $props.modelValue ? 'is-active' : '']),
+            key: index,
+            tabindex: "0",
+            onClick: function onClick($event) {
+              return _ctx.clickItem(item.value);
+            }
+          }, [createElementVNode("div", _hoisted_3, [renderSlot(_ctx.$slots, "icon", {}, function () {
+            return [(openBlock(), createBlock(resolveDynamicComponent($props.icon)))];
+          })]), createElementVNode("div", _hoisted_4, [renderSlot(_ctx.$slots, "title", {
+            titleData: item
+          }, function () {
+            return [createElementVNode("span", {
+              style: normalizeStyle({
+                color: item.value === $props.modelValue && _ctx.state.activeColor ? _ctx.state.activeColor : ''
+              })
+            }, toDisplayString(item.text), 5)];
+          })]), createElementVNode("div", _hoisted_5, [item.value === $props.modelValue ? (openBlock(), createBlock(_component_icon_yes, {
+            key: 0,
+            fill: _ctx.state.activeColor ? _ctx.state.activeColor : '#f36f64'
+          }, null, 8, ["fill"])) : createCommentVNode("", true)])], 10, _hoisted_2);
+        }), 128))])) : createCommentVNode("", true), $props.type === 'filter' ? withDirectives((openBlock(), createElementBlock("div", _hoisted_6, [createElementVNode("div", _hoisted_7, [(openBlock(true), createElementBlock(Fragment, null, renderList($props.options, function (item, key) {
+          return openBlock(), createElementBlock("div", {
+            key: key,
+            class: "tiny-mobile-dropdown-item__cell tiny-mobile-dropdown-item__filter-item"
+          }, [createElementVNode("span", _hoisted_8, toDisplayString(item.title), 1), createElementVNode("ul", null, [(openBlock(true), createElementBlock(Fragment, null, renderList($props.options.length === 0 ? item.data = [] : item.data, function (tag, tagkey) {
+            return openBlock(), createElementBlock("li", {
+              class: normalizeClass(["tiny-mobile-dropdown-item__filter-li", [$props.modelValue[key].indexOf(tag.value) > -1 ? 'checked' : '']]),
+              style: normalizeStyle(_ctx.getOptionStyle(tag, $props.modelValue[key])),
+              onClick: function onClick($event) {
+                return _ctx.tagClick(key, tag, $event);
+              },
+              key: tagkey
+            }, toDisplayString(tag.text), 15, _hoisted_9);
+          }), 128))])]);
+        }), 128))]), createElementVNode("div", _hoisted_10, [createVNode(_component_tiny_button, {
+          onClick: _ctx.reset
+        }, {
+          default: withCtx(function () {
+            return [createTextVNode("Reset")];
+          }),
+          _: 1
+        }, 8, ["onClick"]), createVNode(_component_tiny_button, {
+          type: "primary",
+          onClick: _ctx.confirm
+        }, {
+          default: withCtx(function () {
+            return [createTextVNode("OK")];
+          }),
+          _: 1
+        }, 8, ["onClick"])])])), [[_directive_clickoutside, _ctx.clickOutside]]) : createCommentVNode("", true)];
+      })];
+    }),
+    _: 3
+  }, 8, ["modelValue", "overlay", "close-on-click-overlay", "position", "duration", "onOpen", "onClose", "onOpened", "onClosed"])], 6)), [[vShow, _ctx.state.showWrapper]]);
+}
+
+script.render = render;
+
+export { script as default };

package/lib/pc.js

@@ -0,0 +1,71 @@
+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';
+
+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 = {
+  props: [].concat(_toConsumableArray(props), ['command', 'disabled', 'divided', 'icon']),
+  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']
+    });
+  }
+};
+
+var _hoisted_1 = ["aria-disabled", "tabindex"];
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  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 () {
+      return _ctx.handleClick && _ctx.handleClick.apply(_ctx, arguments);
+    }, ["stop"])),
+    "aria-disabled": $props.disabled,
+    tabindex: $props.disabled ? null : -1
+  }, [$props.icon ? (openBlock(), createBlock(resolveDynamicComponent($props.icon), {
+    key: 0,
+    class: "tiny-svg-size"
+  })) : createCommentVNode("", true), renderSlot(_ctx.$slots, "default")], 10, _hoisted_1);
+}
+
+script.render = render;
+
+export { script as default };

package/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@opentiny/vue-dropdown-item",
+  "version": "3.1.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": "~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"
+  },
+  "license": "MIT",
+  "sideEffects": false
+}