npmapps 1.2.0 → 1.3.1

package/app/wujie-wk/wujie-vue2-child/src/directives/filldownTable.js

@@ -1,291 +0,0 @@
-function ensurePosition(el) {
-  const pos = window.getComputedStyle(el).position;
-  if (!pos || pos === "static") el.style.position = "relative";
-}
-
-function createHandle() {
-  const h = document.createElement("span");
-  h.className = "v-filldown-handle";
-  h.style.position = "absolute";
-  h.style.right = "0";
-  h.style.bottom = "0";
-  h.style.width = "10px";
-  h.style.height = "10px";
-  h.style.background = "#409EFF";
-  h.style.clipPath = "polygon(100% 0, 100% 100%, 0 100%)";
-  h.style.cursor = "crosshair";
-  h.style.display = "none";
-  h.style.zIndex = "10";
-  h.style.pointerEvents = "auto";
-  return h;
-}
-
-function setSelected(el, selected) {
-  if (selected) el.classList.add("v-filldown-selected");
-  else el.classList.remove("v-filldown-selected");
-}
-
-function indexOfNode(nodeList, node) {
-  for (let i = 0; i < nodeList.length; i++) if (nodeList[i] === node) return i;
-  return -1;
-}
-
-function getCellInfo(td, tbody) {
-  const tr = td.closest("tr");
-  if (!tr) return null;
-  const rowIndex = indexOfNode(tbody.children, tr);
-  const colIndex = indexOfNode(tr.children, td);
-  return { tr, rowIndex, colIndex };
-}
-
-function buildColumnMap(el, columns) {
-  const map = {};
-  const headerCells = el.querySelectorAll(".el-table__header-wrapper thead tr th .cell");
-  for (let i = 0; i < headerCells.length; i++) {
-    const text = (headerCells[i].textContent || "").trim();
-    const conf = columns.find((c) => c.label === text);
-    if (conf && conf.prop) map[i] = conf.prop;
-  }
-  return map;
-}
-
-function injectStyle() {
-  const styleId = "v-filldown-style";
-  if (!document.getElementById(styleId)) {
-    const style = document.createElement("style");
-    style.id = styleId;
-    style.innerHTML = `
-    .el-table td.v-filldown-selected{background-color:#ecf5ff !important;}
-    .el-table td .cell.v-filldown-range{
-      box-shadow: inset 0 0 0 2px #409EFF;
-      outline: 2px solid #409EFF;
-      outline-offset: -2px;
-      background-color: rgba(64,158,255,0.18);
-    }
-    .v-filldown-dragging{user-select:none;}
-    `;
-    document.head.appendChild(style);
-  }
-}
-
-function attach(el, binding) {
-  if (el._filldownTableCleanup) {
-    el._filldownTableCleanup();
-  }
-  el._filldownOverlay = null;
-  el._filldownDraggingGlobal = false;
-  if (el._filldownObserver) {
-    try { el._filldownObserver.disconnect(); } catch (e) {}
-    el._filldownObserver = null;
-  }
-  injectStyle();
-  const cfg = binding.value || {};
-  const group = cfg.group || "filldown-table";
-  const columns = Array.isArray(cfg.columns) ? cfg.columns : [];
-  const map = buildColumnMap(el, columns);
-  let tbody = el.querySelector(".el-table__body-wrapper tbody");
-  if (!tbody) {
-    const obs = new MutationObserver(() => {
-      const tb = el.querySelector(".el-table__body-wrapper tbody");
-      if (tb) {
-        obs.disconnect();
-        el._filldownObserver = null;
-        attach(el, binding);
-      }
-    });
-    obs.observe(el, { childList: true, subtree: true });
-    el._filldownObserver = obs;
-    return;
-  }
-
-  function clearSelection() {
-    const selectedTds = tbody.querySelectorAll(".v-filldown-selected");
-    selectedTds.forEach((n) => setSelected(n, false));
-    const rangeCells = tbody.querySelectorAll(".cell.v-filldown-range");
-    rangeCells.forEach((n) => n.classList.remove("v-filldown-range"));
-  }
-
-  function ensureHandle(td) {
-    ensurePosition(td);
-    let handle = td._filldownHandle;
-    if (!handle) {
-      handle = createHandle();
-      td._filldownHandle = handle;
-      td.appendChild(handle);
-      td.addEventListener("mouseenter", () => {
-        const info = getCellInfo(td, tbody);
-        if (info && map[info.colIndex] && !td._filldownDragging) handle.style.display = "block";
-      });
-      td.addEventListener("mouseleave", () => {
-        if (!td._filldownDragging) handle.style.display = "none";
-      });
-      handle.addEventListener("mousedown", (e) => startDrag(e, td));
-    }
-    return handle;
-  }
-
-  function findCellByPoint(clientX, clientY) {
-    let t = document.elementFromPoint(clientX, clientY);
-    while (t && t !== document.body) {
-      if (t.tagName === "TD") return t;
-      t = t.parentElement;
-    }
-    return null;
-  }
-
-  function startDrag(e, startTd) {
-    if (el._filldownDraggingGlobal) return;
-    el._filldownDraggingGlobal = true;
-    const state = el._filldownTableState || {};
-    const getRows = state.getRows || (() => []);
-    const rows = getRows();
-    const info = getCellInfo(startTd, tbody);
-    if (!info) return;
-    const prop = map[info.colIndex];
-    if (!prop || !Array.isArray(rows)) return;
-    const startIndex = info.rowIndex;
-    const startValue = rows[startIndex] ? rows[startIndex][prop] : undefined;
-    let lastIndex = startIndex;
-    startTd._filldownDragging = true;
-    const handle = startTd._filldownHandle;
-    if (handle) handle.style.display = "block";
-    el.classList.add("v-filldown-dragging");
-    const bodyWrapper = el.querySelector(".el-table__body-wrapper");
-    const overlayContainer = tbody;
-    ensurePosition(overlayContainer);
-    let overlay = el._filldownOverlay;
-    if (!overlay) {
-      overlay = document.createElement("div");
-      overlay.className = "v-filldown-overlay";
-      overlay.style.position = "absolute";
-      overlay.style.pointerEvents = "none";
-      overlay.style.zIndex = "9";
-      overlay.style.border = "2px solid #409EFF";
-      overlay.style.background = "rgba(64,158,255,0.12)";
-      overlay.style.display = "none";
-      el._filldownOverlay = overlay;
-      overlayContainer.appendChild(overlay);
-    }
-    const startCell = startTd.querySelector(".cell") || startTd;
-
-    function updateOverlayRect(currTd) {
-      if (!overlay) return;
-      const currCell = currTd ? (currTd.querySelector(".cell") || currTd) : startCell;
-      const containerRect = overlayContainer.getBoundingClientRect();
-      const startRect = (startTd.querySelector(".cell") || startTd).getBoundingClientRect();
-      const currRect = currCell.getBoundingClientRect();
-      overlay.style.display = "block";
-      overlay.style.left = `${startRect.left - containerRect.left}px`;
-      overlay.style.top = `${startRect.top - containerRect.top}px`;
-      overlay.style.width = `${startRect.width}px`;
-      overlay.style.height = `${currRect.bottom - startRect.top}px`;
-    }
-
-    function onMove(ev) {
-      const t = findCellByPoint(ev.clientX, ev.clientY);
-      if (t) {
-        const i = getCellInfo(t, tbody);
-        if (i && i.colIndex === info.colIndex && i.rowIndex !== lastIndex) {
-          clearSelection();
-          if (i.rowIndex > startIndex) {
-            for (let r = startIndex + 1; r <= i.rowIndex; r++) {
-              const tr = tbody.children[r];
-              if (tr && tr.children[info.colIndex]) {
-                const td = tr.children[info.colIndex];
-                setSelected(td, true);
-                const cellDiv = td.querySelector(".cell");
-                if (cellDiv) cellDiv.classList.add("v-filldown-range");
-              }
-            }
-          }
-          updateOverlayRect(t);
-          lastIndex = i.rowIndex;
-        }
-      }
-    }
-
-    function onScroll() {
-      const currTr = tbody.children[lastIndex];
-      const currTd = currTr && currTr.children[info.colIndex] ? currTr.children[info.colIndex] : null;
-      updateOverlayRect(currTd);
-    }
-
-    function onUp() {
-      document.removeEventListener("mousemove", onMove);
-      document.removeEventListener("mouseup", onUp);
-      window.removeEventListener("mouseup", onUp);
-      bodyWrapper && bodyWrapper.removeEventListener("scroll", onScroll, true);
-      startTd._filldownDragging = false;
-      if (handle) handle.style.display = "none";
-      el.classList.remove("v-filldown-dragging");
-      if (overlay) overlay.style.display = "none";
-      el._filldownDraggingGlobal = false;
-      if (typeof lastIndex === "number" && lastIndex > startIndex) {
-        for (let r = startIndex + 1; r <= lastIndex; r++) {
-          if (rows[r] && prop in rows[r]) {
-            const next = Object.assign({}, rows[r], { [prop]: startValue });
-            if (typeof rows.splice === "function") rows.splice(r, 1, next);
-            else rows[r][prop] = startValue;
-          }
-        }
-      }
-      clearSelection();
-    }
-
-    document.addEventListener("mousemove", onMove);
-    document.addEventListener("mouseup", onUp);
-    window.addEventListener("mouseup", onUp);
-    bodyWrapper && bodyWrapper.addEventListener("scroll", onScroll, true);
-    e.preventDefault();
-    e.stopPropagation();
-  }
-
-  function onMouseOver(e) {
-    const td = e.target.tagName === "TD" ? e.target : e.target.closest("td");
-    if (!td) return;
-    const info = getCellInfo(td, tbody);
-    if (!info) return;
-    if (!map[info.colIndex]) return;
-    const h = ensureHandle(td);
-    if (h && !td._filldownDragging) h.style.display = "block";
-  }
-
-  el._filldownTableCleanup = () => {
-    el.removeEventListener("mouseover", onMouseOver, true);
-    const hs = el.querySelectorAll(".v-filldown-handle");
-    hs.forEach((h) => h.remove());
-    if (el._filldownOverlay) {
-      try { el._filldownOverlay.remove(); } catch (e) {}
-      el._filldownOverlay = null;
-    }
-    if (el._filldownObserver) {
-      try { el._filldownObserver.disconnect(); } catch (e) {}
-      el._filldownObserver = null;
-    }
-  };
-
-  el.addEventListener("mouseover", onMouseOver, true);
-  const getRows = () => {
-    const v = el.__vue__;
-    const arr = v && v.$props ? v.$props.data : null;
-    return Array.isArray(arr) ? arr : (cfg.rows || []);
-  };
-  el._filldownTableState = { group, map, getRows };
-}
-
-export default {
-  inserted(el, binding) {
-    attach(el, binding);
-  },
-  update(el, binding) {
-    attach(el, binding);
-  },
-  componentUpdated(el, binding) {
-    attach(el, binding);
-  },
-  unbind(el) {
-    if (el._filldownTableCleanup) el._filldownTableCleanup();
-    el._filldownTableCleanup = null;
-    el._filldownTableState = null;
-  },
-};

package/app/wujie-wk/wujie-vue2-child/src/main.js

@@ -1,40 +0,0 @@
-import Vue from 'vue'
-import App from './App.vue'
-import router from './router'
-import ElementUI from 'element-ui'
-import 'element-ui/lib/theme-chalk/index.css'
-import Router from 'vue-router'
-import VueCodemirror from 'vue-codemirror'
-import 'codemirror/lib/codemirror.css'
-import store from './store'
-import filldown from './directives/filldown'
-import filldownTable from './directives/filldownTable'
-Vue.use(VueCodemirror)
-Vue.config.productionTip = false
-
-Vue.use(Router)
-Vue.use(ElementUI)
-Vue.directive('filldown', filldown)
-Vue.directive('filldown-table', filldownTable)
-
-new Vue({
-  store,
-  router,
-  render: h => h(App),
-}).$mount('#app')
-// 自适应布局代码
-function setRem() {
-  const baseSize = 16; // 基准字体大小
-  const scale = document.documentElement.clientWidth / 1920; // 1920为设计稿宽度
-  document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px';
-  console.log('setRem', baseSize * Math.min(scale, 2) + 'px');
-}
-window.onload = function() {
-  console.log('onload');
-  setRem();
-}
-
-// 改变窗口大小时重新设置rem
-window.onresize = function() {
-  setRem();
-}

package/app/wujie-wk/wujie-vue2-child/src/router/index.js

@@ -1,72 +0,0 @@
-import VueRouter from 'vue-router'
-// 引入组件
-// import ExampleComponent from './components/ExampleComponent.vue'
-
-const routes = [
- {
-    path: '/',
-    name: 'Home',
-    component: () => import('../views/Home.vue'),
-    meta: {
-      title: 'Vue2子应用'
-    }
- },
-
- // router-jump
- {
-  path: '/router-jump',
-  name: 'RouterJump',
-  component: () => import('../views/RouterJump.vue'),
-  meta: {
-    title: '路由跳转'
-  }
- },
- // css
- {
-  path: '/css',
-  name: 'Css',
-  component: () => import('../views/css.vue'),
-  meta: {
-    title: 'css'
-  }
- },
- {
-  path: '/extend',
-  name: 'Extend',
-  component: () => import('../views/Extend/index.vue'),
-  meta: {
-    title: '扩展'
-  }
- },
- {
-  path: 'echarts',
-  name: 'Echarts',
-  component: () => import('../views/echarts/index.vue'), 
-  meta: {
-    title: 'echarts' 
-  }
- },
- {
-   path: 'element',
-   name: 'Element',
-   component: () => import('../views/element/index.vue'),
-   meta: {
-     title: 'element'
-   }
- },
- // 日程日历
- {
-   path: '/calendar',
-   name: 'Calendar',
-   component: () => import('../views/calendar/index.vue'),
-   meta: {
-     title: '日程日历'
-   }
- },
-]
-
-const router = new VueRouter({
-  routes // (缩写) 相当于 routes: routes
-})
-
-export default router

package/app/wujie-wk/wujie-vue2-child/src/store/index.js

@@ -1,23 +0,0 @@
-import Vue from 'vue'
-import Vuex from 'vuex'
-
-Vue.use(Vuex)
-
-export default new Vuex.Store({
-  state: {
-    radioValue: ''
-  },
-  getters: {
-    radioValue ({ radioValue }) {
-      return radioValue
-    }
-  },
-  mutations: {
-
-    setRadioValue (state, newVAlue) {
-      state.radioValue = newVAlue
-    }
-  },
-  actions: {},
-  modules: {}
-})

package/app/wujie-wk/wujie-vue2-child/src/utils/winBox.js

@@ -1,23 +0,0 @@
-import WinBox from 'winbox/src/js/winbox.js';
-import 'winbox/dist/css/winbox.min.css';
-
-export const openWinBox = ({
-    mount,
-    width,
-    height,
-    title,
-    url
-}) => {
-
-    const win = new WinBox("标题", {
-        width: '500px',
-        height: '400px',
-        x: "center",
-        y: "center",
-        mount,
-        title,
-        url
-      });
-
-      return win;
-}

package/app/wujie-wk/wujie-vue2-child/src/views/Extend/A.vue

@@ -1,12 +0,0 @@
-<template>
-  <div>A</div>
-</template>
-
-<script>
-  export default {
-    name: 'A',
-    created() {
-      console.log('A created')
-    }
-  }
-</script>

package/app/wujie-wk/wujie-vue2-child/src/views/Extend/B.vue

@@ -1,10 +0,0 @@
-<script>
-  import A from "./A.vue";
-  export default {
-    extends: A,
-    name: 'B',
-    created() {
-      console.log('B created')
-    }
-  }
-</script>

package/app/wujie-wk/wujie-vue2-child/src/views/Extend/MagicalComponentsForELFormItem.vue

@@ -1,78 +0,0 @@
-<script>
-import { FormItem } from "element-ui";
-import Vue from "vue";
-Vue.component("ell-form-item", {
-  extends: FormItem,
-  async mounted() {
-    await this.$nextTick();
-    if (!this.$el.children && !this.$el.children.length) return;
-    const label = Array.from(this.$el.children).find((item) =>
-      item.classList.contains("el-form-item__label")
-    );
-    if (!label) return;
-
-    // 如果有noEllipsis属性
-    if (this.$attrs.noEllipsis !== undefined) {
-      return;
-    }
-
-    // 获取元素的行高
-    const lineHeight = parseFloat(getComputedStyle(label).lineHeight);
-    // 获取元素的高度
-    const scrollHeight = label.scrollHeight;
-    // 计算元素的行数
-    const lineCount = Math.round(scrollHeight / lineHeight);
-    // 如果行数大于2
-    if (lineCount > 2) {
-      const newLineHeight = scrollHeight / lineCount / 2;
-      // 设置元素的行高
-      label.style.lineHeight = newLineHeight + "px";
-      label.style.overflow = "hidden";
-      label.style.textOverflow = "ellipsis";
-      label.style.display = "-webkit-box";
-      label.style.webkitBoxOrient = "vertical";
-      label.style.webkitLineClamp = "2";
-      label.title = label.innerText;
-    }
-    // 如果行数大于1
-    if (lineCount > 1) {
-      const newLineHeight = scrollHeight / lineCount / 2;
-      // 设置元素的行高
-      label.style.lineHeight = newLineHeight + "px";
-    }
-  },
-});
-export default {
-  name: "MagicalComponentsForELFormItem",
-};
-</script>
-<template>
-  <div>
-    <el-form label-width="100px">
-      <el-form-item label="活动名称">
-        <el-input placeholder="请输入活动名称" />
-      </el-form-item>
-      <el-form-item label="活动名称活动名称">
-        <el-input placeholder="请输入活动名称" />
-      </el-form-item>
-      <el-form-item label="活动名称活动名称活动名称活动名称">
-        <el-input placeholder="请输入活动名称" />
-      </el-form-item>
-    </el-form>
-
-    <el-form label-width="100px">
-      <ell-form-item label="活动名称">
-        <el-input placeholder="请输入活动名称" />
-      </ell-form-item>
-      <ell-form-item label="活动名称活动名称">
-        <el-input placeholder="请输入活动名称" />
-      </ell-form-item>
-      <ell-form-item label="活动名称活动名称活动名称活动名称">
-        <el-input placeholder="请输入活动名称" />
-      </ell-form-item>
-      <ell-form-item noEllipsis label="活动名称活动名称活动名称活动名称">
-        <el-input placeholder="请输入活动名称" />
-      </ell-form-item>
-    </el-form>
-  </div>
-</template>

package/app/wujie-wk/wujie-vue2-child/src/views/Extend/index.vue

@@ -1,59 +0,0 @@
-<template>
-  <div id="extend">
-    <el-button @click="winbox">winbox</el-button>
-    <span>{{ $route.query.a }}</span>
-    <el-tabs type="border-card">
-      <el-tab-pane label="鼠标滚轮控制横向滚动">
-        <tableMouseHorizontalWheel />
-      </el-tab-pane>
-      <el-tab-pane label="魔改el-form-item lable换行问题">
-        <MagicalComponentsForELFormItem />
-      </el-tab-pane>
-      <el-tab-pane label="vue2继承组件的生命周期会覆盖原有的生命周期吗">
-        <!-- <A></A> -->
-        <B></B>
-        <C></C>
-      </el-tab-pane>
-    </el-tabs>
-
-  </div>
-</template>
-
-<script>
-import Vue from "vue";
-import A from "./A.vue";
-import B from "./B.vue";
-import MagicalComponentsForELFormItem from "./MagicalComponentsForELFormItem.vue";
-import tableMouseHorizontalWheel from "./tableMouseHorizontalWheel.vue";
-
-import { openWinBox } from "@/utils/winBox";
-Vue.component("C", {
-  extends: A,
-  created() {
-    console.log("C created");
-  },
-});
-export default {
-  name: "App",
-  components: {
-    A,
-    B,
-    MagicalComponentsForELFormItem,
-    tableMouseHorizontalWheel,
-  },
-  created() {
-    console.log("App created", this.$route.query);
-  },
-  mounted() {
-    console.log(this);
-  },
-  methods: {
-    winbox() {
-      openWinBox({
-        title: "winbox",
-        mount: this.$el,
-      });
-    },
-  },
-};
-</script>