@opentiny/vue-renderless 3.1.0-alpha.0

package/package.json

@@ -0,0 +1,179 @@
+{
+  "name": "@opentiny/vue-renderless",
+  "version": "3.1.0-alpha.0",
+  "description": "@opentiny/vue-renderless",
+  "repository": {
+    "type": "git",
+    "url": ""
+  },
+  "keywords": [
+    "vue",
+    "Tiny"
+  ],
+  "author": "Tiny Team",
+  "license": "MIT",
+  "sideEffects": false,
+  "scripts": {
+    "clean": "rimraf dist",
+    "create:ui": "node build/create-ui.js",
+    "build": "babel --config-file ./build/babel.config.json src --out-dir dist",
+    "build:all": "npm run lint && npm run clean && npm run build && npm run build:version",
+    "build:version": "node build/build-version.js",
+    "release": "node build/release.js",
+    "format": "prettier --write src/**/* build/*.js ",
+    "lint": "eslint src/**/* build/*.js  --quiet"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.10.2",
+    "xss": "1.0.11"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.5.5",
+    "@babel/core": "^7.5.5",
+    "@babel/plugin-transform-runtime": "^7.10.1",
+    "@babel/preset-env": "^7.5.5",
+    "eslint": "^6.1.0",
+    "eslint-config-standard": "^17.0.0",
+    "eslint-plugin-import": "^2.18.2",
+    "eslint-plugin-node": "^11.1.0 ",
+    "eslint-plugin-promise": "^4.2.1",
+    "eslint-plugin-standard": "^4.0.0",
+    "fs-extra": "^10.1.0",
+    "prettier": "2.2.1",
+    "rimraf": "^3.0.2"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "es6": true,
+      "browser": true,
+      "node": true,
+      "jest": true
+    },
+    "extends": [
+      "eslint:recommended",
+      "plugin:jest/recommended"
+    ],
+    "rules": {
+      "no-debugger": "off",
+      "no-var": "error",
+      "no-tabs": "error",
+      "no-trailing-spaces": "error",
+      "no-mixed-spaces-and-tabs": "error",
+      "no-undef": "error",
+      "no-extra-semi": "error",
+      "no-empty": "error",
+      "no-console": "off",
+      "semi": [
+        2,
+        "never"
+      ],
+      "indent": [
+        "warn",
+        2
+      ],
+      "max-len": [
+        "warn",
+        {
+          "code": 160
+        }
+      ],
+      "function-paren-newline": [
+        "warn",
+        "multiline"
+      ],
+      "object-property-newline": [
+        "warn",
+        {
+          "allowAllPropertiesOnSameLine": true
+        }
+      ],
+      "newline-per-chained-call": [
+        "warn",
+        {
+          "ignoreChainWithDepth": 4
+        }
+      ],
+      "curly": "error",
+      "comma-dangle": [
+        "off",
+        "always-multiline"
+      ],
+      "semi-style": [
+        "warn",
+        "last"
+      ],
+      "max-lines": [
+        "error",
+        2000
+      ],
+      "max-lines-per-function": [
+        "error",
+        50
+      ],
+      "complexity": [
+        "error",
+        20
+      ],
+      "max-depth": [
+        "warn",
+        4
+      ],
+      "max-nested-callbacks": [
+        "error",
+        4
+      ],
+      "no-multi-assign": "error",
+      "no-undef-init": "warn",
+      "no-shadow": "warn",
+      "max-params": [
+        "warn",
+        5
+      ],
+      "no-param-reassign": "warn",
+      "prefer-rest-params": "warn",
+      "prefer-arrow-callback": "error",
+      "arrow-body-style": [
+        "warn",
+        "as-needed"
+      ],
+      "no-this-before-super": "error",
+      "quotes": [
+        "warn",
+        "single"
+      ],
+      "prefer-template": "warn",
+      "no-multi-str": "warn",
+      "object-shorthand": "warn",
+      "dot-notation": "error",
+      "accessor-pairs": "error",
+      "no-prototype-builtins": "error",
+      "guard-for-in": "error",
+      "eqeqeq": "warn",
+      "no-negated-condition": "warn",
+      "default-case": "error",
+      "no-fallthrough": "error",
+      "no-case-declarations": "error",
+      "no-unsafe-finally": "error",
+      "no-eval": "error",
+      "no-with": "error",
+      "no-implicit-coercion": [
+        "error",
+        {
+          "allow": [
+            "!!",
+            "~"
+          ]
+        }
+      ]
+    },
+    "parserOptions": {
+      "ecmaVersion": 2018,
+      "sourceType": "module",
+      "parser": "babel-eslint"
+    }
+  },
+  "engines": {
+    "node": ">=10.0.0"
+  }
+}

package/pager-item/index.js

@@ -0,0 +1,122 @@
+export var getPages = function getPages(_ref) {
+  var props = _ref.props,
+    state = _ref.state;
+  return function () {
+    var pagerCount = props.pagerCount;
+    var halfPagerCount = (pagerCount - 1) / 2;
+    var currentPage = Number(props.currentPage);
+    var pageCount = Number(props.pageCount);
+    var showPrevMore = false;
+    var showNextMore = false;
+    if (pageCount > pagerCount) {
+      if (currentPage < pageCount - halfPagerCount) {
+        showNextMore = true;
+      }
+      if (currentPage > pagerCount - halfPagerCount) {
+        showPrevMore = true;
+      }
+    }
+    var pages = [];
+    if (showPrevMore && !showNextMore) {
+      var startPage = pageCount - (pagerCount - 2);
+      for (var i = startPage; i < pageCount; i++) {
+        pages.push(i);
+      }
+    } else if (!showPrevMore && showNextMore) {
+      for (var _i = 2; _i < pagerCount; _i++) {
+        pages.push(_i);
+      }
+    } else if (showPrevMore && showNextMore) {
+      var offset = Math.floor(pagerCount / 2) - 1;
+      for (var _i2 = currentPage - offset; _i2 <= currentPage + offset; _i2++) {
+        pages.push(_i2);
+      }
+    } else {
+      for (var _i3 = 2; _i3 < pageCount; _i3++) {
+        pages.push(_i3);
+      }
+    }
+    state.showPrevMore = showPrevMore;
+    state.showNextMore = showNextMore;
+    return pages;
+  };
+};
+var getClassListVal = function getClassListVal(parentNode) {
+  var classListVal = [];
+  var classList = parentNode.classList;
+  if (classList) {
+    var index = 0;
+    for (var key in classList) {
+      if (Object.prototype.hasOwnProperty.call(classList, key) && typeof Number(key) === 'number') {
+        classListVal[index] = classList[key];
+        index++;
+      }
+    }
+  } else {
+    classListVal = parentNode.className.split(/\s+/);
+  }
+  return classListVal;
+};
+export var onPagerClick = function onPagerClick(_ref2) {
+  var emit = _ref2.emit,
+    props = _ref2.props,
+    vm = _ref2.vm;
+  return function (event) {
+    var target = event.target;
+    if (target.tagName === 'UL' || props.disabled) {
+      return;
+    }
+    var newPage = Number(event.target.textContent);
+    var tagName = target.tagName,
+      parentNode = target.parentNode;
+    var parentEl = tagName === 'LI' ? target : tagName === 'svg' ? parentNode : parentNode.parentNode;
+    var pageCount = props.pageCount;
+    var currentPage = props.currentPage;
+    var pagerCountOffset = props.pagerCount - 2;
+    var classListVal = getClassListVal(parentEl);
+    if (classListVal.indexOf('dot') !== -1) {
+      if (classListVal.indexOf('quickprev') !== -1) {
+        newPage = currentPage - pagerCountOffset;
+      } else if (classListVal.indexOf('quicknext') !== -1) {
+        newPage = currentPage + pagerCountOffset;
+      }
+    }
+    if (!isNaN(newPage)) {
+      if (newPage < 1) {
+        newPage = 1;
+      }
+      if (newPage > pageCount) {
+        newPage = pageCount;
+      }
+    }
+    var callback = function callback() {
+      if (newPage !== currentPage) {
+        emit('change', newPage);
+      }
+    };
+    if (props.isBeforePageChange && newPage !== currentPage) {
+      var params = {
+        newPage: newPage,
+        currentPage: currentPage,
+        callback: callback
+      };
+      vm.$parent.beforePagerChangeHandler(params);
+    } else {
+      callback();
+    }
+  };
+};
+export var onMouseenter = function onMouseenter(_ref3) {
+  var props = _ref3.props,
+    state = _ref3.state;
+  return function (direction) {
+    if (props.disabled) {
+      return;
+    }
+    if (direction === 'left') {
+      state.quickprevIconClass = props.doubleLeftIcon;
+    } else {
+      state.quicknextIconClass = props.doubleRightIcon;
+    }
+  };
+};

package/pager-item/vue.js

@@ -0,0 +1,52 @@
+import { getPages, onPagerClick, onMouseenter } from './index';
+export var api = ['state', 'onPagerClick', 'onMouseenter'];
+export var renderless = function renderless(props, _ref, _ref2) {
+  var computed = _ref.computed,
+    reactive = _ref.reactive,
+    watch = _ref.watch;
+  var emit = _ref2.emit,
+    vm = _ref2.vm;
+  var api = {
+    onPagerClick: onPagerClick({
+      emit: emit,
+      props: props,
+      vm: vm
+    })
+  };
+  var state = reactive({
+    current: null,
+    showPrevMore: false,
+    showNextMore: false,
+    quicknextIconClass: props.popupIcon,
+    quickprevIconClass: props.popupIcon,
+    pagers: computed(function () {
+      return api.getPages();
+    })
+  });
+  Object.assign(api, {
+    state: state,
+    getPages: getPages({
+      props: props,
+      state: state
+    }),
+    onMouseenter: onMouseenter({
+      props: props,
+      state: state
+    })
+  });
+  watch(function () {
+    return state.showPrevMore;
+  }, function (value) {
+    if (!value) state.quickprevIconClass = props.popupIcon;
+  }, {
+    immediate: true
+  });
+  watch(function () {
+    return state.showNextMore;
+  }, function (value) {
+    if (!value) state.quicknextIconClass = props.popupIcon;
+  }, {
+    immediate: true
+  });
+  return api;
+};

package/panel/index.js

@@ -0,0 +1,30 @@
+import { emitEvent } from '@opentiny/vue-renderless/common/event';
+export var toggle = function toggle(_ref) {
+  var api = _ref.api,
+    state = _ref.state;
+  return function () {
+    state.isShow ? api.collapse() : api.expand();
+  };
+};
+export var expand = function expand(_ref2) {
+  var emit = _ref2.emit,
+    state = _ref2.state;
+  return function () {
+    if (!emitEvent(emit, 'before-expand')) {
+      return;
+    }
+    state.isShow = true;
+    emit('expand', true);
+  };
+};
+export var collapse = function collapse(_ref3) {
+  var emit = _ref3.emit,
+    state = _ref3.state;
+  return function () {
+    if (!emitEvent(emit, 'before-collapse')) {
+      return;
+    }
+    state.isShow = false;
+    emit('collapse', false);
+  };
+};

package/panel/vue.js

@@ -0,0 +1,26 @@
+import { collapse, expand, toggle } from './index';
+export var api = ['state', 'toggle'];
+export var renderless = function renderless(props, _ref, _ref2) {
+  var reactive = _ref.reactive;
+  var emit = _ref2.emit;
+  var api = {};
+  var state = reactive({
+    isShow: props.expand
+  });
+  Object.assign(api, {
+    state: state,
+    collapse: collapse({
+      emit: emit,
+      state: state
+    }),
+    expand: expand({
+      emit: emit,
+      state: state
+    }),
+    toggle: toggle({
+      api: api,
+      state: state
+    })
+  });
+  return api;
+};