element-nice-ui
Version:
A Component Library for Vue.js.
631 lines (578 loc) • 18.4 kB
JavaScript
module.exports =
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/ }
/******/ };
/******/
/******/ // define __esModule on exports
/******/ __webpack_require__.r = function(exports) {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/
/******/ // create a fake namespace object
/******/ // mode & 1: value is a module id, require it
/******/ // mode & 2: merge all properties of value into the ns
/******/ // mode & 4: return value when already ns object
/******/ // mode & 8|1: behave like require
/******/ __webpack_require__.t = function(value, mode) {
/******/ if(mode & 1) value = __webpack_require__(value);
/******/ if(mode & 8) return value;
/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/ var ns = Object.create(null);
/******/ __webpack_require__.r(ns);
/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/ return ns;
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "/dist/";
/******/
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 195);
/******/ })
/************************************************************************/
/******/ ({
/***/ 195:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
// ESM COMPAT FLAG
__webpack_require__.r(__webpack_exports__);
// CONCATENATED MODULE: ./node_modules/.pnpm/vue-loader@15.11.1_@vue+compiler-sfc@3.5.18_css-loader@5.2.7_webpack@4.47.0__lodash@4.1_bb9a19950a80e648dc95ba33c71fa343/node_modules/vue-loader/lib/loaders/templateLoader.js??ref--5!./node_modules/.pnpm/vue-loader@15.11.1_@vue+compiler-sfc@3.5.18_css-loader@5.2.7_webpack@4.47.0__lodash@4.1_bb9a19950a80e648dc95ba33c71fa343/node_modules/vue-loader/lib??vue-loader-options!./packages/gantt/src/gantt.vue?vue&type=template&id=77d6c9c4
var render = function render() {
var _vm = this,
_c = _vm._self._c
return _c("div", { staticClass: "el-gantt" }, [
_c(
"section",
{ staticClass: "el-gantt__tasks" },
[
_c(
"ul",
{
staticClass: "el-gantt__row",
style: { height: "31px", "line-height": "31px" },
},
_vm._l(_vm.columns, function (column) {
return _c("li", { key: column.prop }, [
_vm._v(_vm._s(column.label)),
])
}),
0
),
_vm._l(_vm.tasksWithId, function (row) {
return _c(
"ul",
{
key: row._id,
staticClass: "el-gantt__row",
style: { height: "30px", "line-height": "30px" },
},
_vm._l(_vm.columns, function (column) {
return _c("li", { key: column.prop }, [
_vm._v(_vm._s(row[column.prop])),
])
}),
0
)
}),
],
2
),
_c("section", { staticClass: "el-gantt__wrap" }, [
_c("canvas", {
ref: "canvas",
staticClass: "el-gantt__container",
attrs: { width: _vm.width, height: _vm.height },
}),
]),
])
}
var staticRenderFns = []
render._withStripped = true
// CONCATENATED MODULE: ./packages/gantt/src/gantt.vue?vue&type=template&id=77d6c9c4
// EXTERNAL MODULE: external "element-nice-ui/lib/utils/date-util"
var date_util_ = __webpack_require__(4);
// CONCATENATED MODULE: ./packages/gantt/src/utils.js
function minDateStr() {
for (var _len = arguments.length, dates = new Array(_len), _key = 0; _key < _len; _key++) {
dates[_key] = arguments[_key];
}
let result = dates[0];
dates.forEach(date => {
if (date < result) {
result = date;
}
});
}
function maxDateStr() {
for (var _len2 = arguments.length, dates = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
dates[_key2] = arguments[_key2];
}
let result = dates[0];
dates.forEach(date => {
if (date > result) {
result = date;
}
});
}
function loop(number, cb) {
let i = 1;
let ret = [];
while (i <= number) {
ret.push(cb(i, i - 1));
i++;
}
return ret;
}
// CONCATENATED MODULE: ./packages/gantt/src/canvas.js
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
/**
* @typedef {Object} LineConfig
* @property {[number, number][]} path 路径
* @property { Record<string, any> } style 线的样式
*/
/**
* @typedef {Object} ManyLineConfig
* @property {[number, number][][]} lines 线段路径集合
* @property { Record<string, any> } style 线的样式
*/
/**
* @typedef {Object} GridConfig
* @property {number} left 网格左起点
* @property {number} top 网格上起点
* @property {number} colGap 列间距
* @property {number} rowGap 行间距
* @property {number} rowNumber 行数量
* @property {number} colNumber 列数量
* @property { Record<string, any> } style 线的样式
*/
class canvas_Canvas {
constructor(dom) {
/** @type {CanvasRenderingContext2D} */
_defineProperty(this, "ctx", null);
/** @type {HTMLCanvasElement} */
let canvas = null;
if (typeof dom === 'string') {
canvas = document.getElementById(id);
} else if (dom instanceof HTMLCanvasElement) {
canvas = dom;
} else {
throw new Error('没有传入canvas实例');
}
let ctx = canvas.getContext('2d');
this.ctx = ctx;
let properties = {};
for (let key in ctx) {
if (typeof ctx[key] === 'function') {
canvas_Canvas.prototype[key] = ctx[key];
} else {
properties[key] = {
get() {
return ctx[key];
},
set(v) {
ctx[key] = v;
}
};
}
}
let proto = ctx.constructor.prototype;
Object.keys(proto).forEach(key => {
if (typeof ctx[key] !== 'function') return;
canvas_Canvas.prototype[key] = function () {
ctx[key](...arguments);
};
});
Object.defineProperties(this, properties);
}
/**
* 绘制单个线段
* @param {LineConfig} config
*/
drawLine(config) {
const {
ctx
} = this;
const {
path,
style
} = config;
if (path.length < 2) {
throw new Error("path\u7684\u8DEF\u5F84\u6700\u5C11\u5E94\u8BE5\u67092\u4E2A");
}
this.beginPath();
this.moveTo(...path[0]);
path.slice(1).forEach(_ref => {
let [x, y] = _ref;
ctx.lineTo(x, y);
});
if (style) {
Object.keys(style).forEach(key => {
ctx[key] = style[key];
});
}
ctx.stroke();
}
/**
* 绘制多个线段
* @param {ManyLineConfig} config
*/
drawManyLine(config) {
const {
ctx
} = this;
const {
lines,
style
} = config;
if (style) {
Object.keys(style).forEach(key => {
this[key] = style[key];
});
}
lines.forEach(line => {
ctx.beginPath();
ctx.moveTo(...line[0]);
line.slice(1).forEach(_ref2 => {
let [x, y] = _ref2;
ctx.lineTo(x, y);
});
ctx.stroke();
});
}
/**
* 绘制网格
* @param { GridConfig } config 网格配置
*/
drawGrid(config) {
const {
style,
left,
top,
rowGap,
colGap,
rowNumber,
colNumber
} = config;
// 横线 y相等, x改变, top声明起点
let leftEnd = left + colGap * colNumber;
let horizontalLines = loop(rowNumber + 1, (n, i) => {
let lineTop = top + rowGap * i;
return [[left, lineTop], [leftEnd, lineTop]];
});
this.drawManyLine({
lines: horizontalLines,
style
});
// 竖线 x相等, left起点,
let topEnd = top + rowGap * rowNumber; // 结束等于横线数量乘以y间隔
let verticalLines = loop(colNumber + 1, (n, i) => {
let lineLeft = left + colGap * i;
return [[lineLeft, top], [lineLeft, topEnd]];
});
this.drawManyLine({
lines: verticalLines
});
}
}
// CONCATENATED MODULE: ./node_modules/.pnpm/babel-loader@8.4.1_@babel+core@7.28.0_webpack@4.47.0/node_modules/babel-loader/lib!./node_modules/.pnpm/vue-loader@15.11.1_@vue+compiler-sfc@3.5.18_css-loader@5.2.7_webpack@4.47.0__lodash@4.1_bb9a19950a80e648dc95ba33c71fa343/node_modules/vue-loader/lib??vue-loader-options!./packages/gantt/src/gantt.vue?vue&type=script&lang=js
/* harmony default export */ var ganttvue_type_script_lang_js = ({
name: 'ElGantt',
props: {
tasks: {
type: Array,
required: true
},
columns: {
type: Array,
required: true
}
},
data: () => {
return {
_canvas: null,
mode: 'day',
_seekId: 0,
dayWidth: 80,
taskHeight: 30,
fontSize: 12
};
},
computed: {
tasksWithId() {
return this.tasks.map(task => {
task._id = this.$data._seekId++;
return task;
});
},
/** 最早时间 */
earliestTimeStamp() {
let result = Date.now();
this.tasks.forEach(task => {
result = Math.min(result, new Date(task.start).getTime(), new Date(task.actualStart).getTime());
});
return result;
},
/** 最晚时间 */
latestTimeStamp() {
let result = Object(date_util_["formatDate"])(new Date(), 'yyyyMMdd');
this.tasks.forEach(task => {
result = Math.max(result, new Date(task.end).getTime(), new Date(task.actualEnd).getTime());
});
return result;
},
/** 总天数 */
days() {
return Math.ceil((this.latestTimeStamp - this.earliestTimeStamp) / 86400000);
},
width() {
return this.days * this.dayWidth + 1;
},
height() {
return this.tasks.length * 30 + 1 + 60;
}
},
watch: {
tasks() {
this.render();
}
},
methods: {
render() {
this.drawGrid();
},
/** 绘制日期 */
drawDate() {
/** @type { Canvas & CanvasRenderingContext2D } */
const _canvas = this.$data._canvas;
// 绘制年月
_canvas.drawManyLine({
lines: [[[0.5, 0.5], [0.5 + this.days * this.dayWidth, 0.5]]],
style: {
strokeStyle: '#ddd'
}
});
// 获取年月起始点
// (this.latestTimeStamp - this.earliestTimeStamp)
_canvas.drawManyLine({
lines: [[[0.5, 0.5], [0.5, 30.5]] // 第一条线
]
});
// 绘制天
_canvas.drawGrid({
left: 0.5,
top: this.taskHeight + 0.5,
colGap: this.dayWidth,
rowGap: this.taskHeight,
rowNumber: 1,
colNumber: this.days
});
_canvas.font = '24px serif';
loop(this.days, (_, i) => {
_canvas.fillText(Object(date_util_["formatDate"])(this.earliestTimeStamp + i * 86400000, 'dd'), this.dayWidth * i + 30, 50);
});
},
/**
* 绘制网格起点
*/
drawGrid() {
/** @type { Canvas } */
const _canvas = this.$data._canvas;
// 绘制日期
this.drawDate();
// 绘制任务网格
_canvas.drawGrid({
left: 0.5,
top: 60.5,
colGap: this.dayWidth,
rowGap: 30,
rowNumber: this.tasks.length,
colNumber: this.days,
style: {
strokeStyle: '#ddd'
}
});
}
},
mounted() {
this.$data._canvas = new canvas_Canvas(this.$refs.canvas);
this.render();
}
});
// CONCATENATED MODULE: ./packages/gantt/src/gantt.vue?vue&type=script&lang=js
/* harmony default export */ var src_ganttvue_type_script_lang_js = (ganttvue_type_script_lang_js);
// EXTERNAL MODULE: ./node_modules/.pnpm/vue-loader@15.11.1_@vue+compiler-sfc@3.5.18_css-loader@5.2.7_webpack@4.47.0__lodash@4.1_bb9a19950a80e648dc95ba33c71fa343/node_modules/vue-loader/lib/runtime/componentNormalizer.js
var componentNormalizer = __webpack_require__(2);
// CONCATENATED MODULE: ./packages/gantt/src/gantt.vue
/* normalize component */
var component = Object(componentNormalizer["a" /* default */])(
src_ganttvue_type_script_lang_js,
render,
staticRenderFns,
false,
null,
null,
null
)
/* harmony default export */ var gantt = (component.exports);
// CONCATENATED MODULE: ./packages/gantt/index.js
/* istanbul ignore next */
gantt.install = function (Vue) {
Vue.component(gantt.name, gantt);
};
/* harmony default export */ var packages_gantt = __webpack_exports__["default"] = (gantt);
/***/ }),
/***/ 2:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return normalizeComponent; });
/* globals __VUE_SSR_CONTEXT__ */
// IMPORTANT: Do NOT use ES2015 features in this file (except for modules).
// This module is a runtime utility for cleaner component module output and will
// be included in the final webpack user bundle.
function normalizeComponent(
scriptExports,
render,
staticRenderFns,
functionalTemplate,
injectStyles,
scopeId,
moduleIdentifier /* server only */,
shadowMode /* vue-cli only */
) {
// Vue.extend constructor export interop
var options =
typeof scriptExports === 'function' ? scriptExports.options : scriptExports
// render functions
if (render) {
options.render = render
options.staticRenderFns = staticRenderFns
options._compiled = true
}
// functional template
if (functionalTemplate) {
options.functional = true
}
// scopedId
if (scopeId) {
options._scopeId = 'data-v-' + scopeId
}
var hook
if (moduleIdentifier) {
// server build
hook = function (context) {
// 2.3 injection
context =
context || // cached call
(this.$vnode && this.$vnode.ssrContext) || // stateful
(this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext) // functional
// 2.2 with runInNewContext: true
if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
context = __VUE_SSR_CONTEXT__
}
// inject component styles
if (injectStyles) {
injectStyles.call(this, context)
}
// register component module identifier for async chunk inferrence
if (context && context._registeredComponents) {
context._registeredComponents.add(moduleIdentifier)
}
}
// used by ssr in case component is cached and beforeCreate
// never gets called
options._ssrRegister = hook
} else if (injectStyles) {
hook = shadowMode
? function () {
injectStyles.call(
this,
(options.functional ? this.parent : this).$root.$options.shadowRoot
)
}
: injectStyles
}
if (hook) {
if (options.functional) {
// for template-only hot-reload because in that case the render fn doesn't
// go through the normalizer
options._injectStyles = hook
// register for functional component in vue file
var originalRender = options.render
options.render = function renderWithStyleInjection(h, context) {
hook.call(context)
return originalRender(h, context)
}
} else {
// inject component registration as beforeCreate hook
var existing = options.beforeCreate
options.beforeCreate = existing ? [].concat(existing, hook) : [hook]
}
}
return {
exports: scriptExports,
options: options
}
}
/***/ }),
/***/ 4:
/***/ (function(module, exports) {
module.exports = require("element-nice-ui/lib/utils/date-util");
/***/ })
/******/ });