ibsp-fg-page 4.0.2

package/src/libs/vuedraggable/core/renderHelper.js

@@ -0,0 +1,57 @@
+import { resolveComponent, TransitionGroup } from 'vue';
+
+import { ComponentStructure } from './componentStructure.js';
+import { isHtmlTag, isTransition } from '../util/tags.js';
+
+function getSlot(slots, key) {
+  const slotValue = slots[key];
+  return slotValue ? slotValue() : [];
+}
+
+function computeNodes({ $slots, realList, getKey }) {
+  const normalizedList = realList || [];
+  const [header, footer] = ['header', 'footer'].map(name =>
+    getSlot($slots, name)
+  );
+  const { item } = $slots;
+  if (!item) {
+    throw new Error('draggable element must have an item slot');
+  }
+  const defaultNodes = normalizedList.flatMap((element, index) =>
+    item({ element, index }).map(node => {
+      node.key = getKey(element);
+      node.props = { ...(node.props || {}), 'data-draggable': true };
+      return node;
+    })
+  );
+  if (defaultNodes.length !== normalizedList.length) {
+    throw new Error('Item slot must have only one child');
+  }
+  return {
+    header,
+    footer,
+    default: defaultNodes
+  };
+}
+
+function getRootInformation(tag) {
+  const transition = isTransition(tag);
+  const externalComponent = !isHtmlTag(tag) && !transition;
+  return {
+    transition,
+    externalComponent,
+    tag: externalComponent
+      ? resolveComponent(tag)
+      : transition
+        ? TransitionGroup
+        : tag
+  };
+}
+
+function computeComponentStructure({ $slots, tag, realList, getKey }) {
+  const nodes = computeNodes({ $slots, realList, getKey });
+  const root = getRootInformation(tag);
+  return new ComponentStructure({ nodes, root, realList });
+}
+
+export { computeComponentStructure };

package/src/libs/vuedraggable/core/sortableEvents.js

@@ -0,0 +1,18 @@
+const manageAndEmit = ['Start', 'Add', 'Remove', 'Update', 'End'];
+const emit = ['Choose', 'Unchoose', 'Sort', 'Filter', 'Clone'];
+const manage = ['Move'];
+const eventHandlerNames = [manage, manageAndEmit, emit]
+  .flatMap(events => events)
+  .map(evt => `on${evt}`);
+
+const events = {
+  manage,
+  manageAndEmit,
+  emit
+};
+
+function isReadOnly(eventName) {
+  return eventHandlerNames.indexOf(eventName) !== -1;
+}
+
+export { events, isReadOnly };

package/src/libs/vuedraggable/util/console.js

@@ -0,0 +1,9 @@
+function getConsole() {
+  if (typeof window !== 'undefined') {
+    return window.console;
+  }
+  return global.console;
+}
+const console = getConsole();
+
+export { console };

package/src/libs/vuedraggable/util/htmlHelper.js

@@ -0,0 +1,15 @@
+function removeNode(node) {
+  if (node.parentElement !== null) {
+    node.parentElement.removeChild(node);
+  }
+}
+
+function insertNodeAt(fatherNode, node, position) {
+  const refNode =
+    position === 0
+      ? fatherNode.children[0]
+      : fatherNode.children[position - 1].nextSibling;
+  fatherNode.insertBefore(node, refNode);
+}
+
+export { insertNodeAt, removeNode };

package/src/libs/vuedraggable/util/string.js

@@ -0,0 +1,12 @@
+function cached(fn) {
+  const cache = Object.create(null);
+  return function cachedFn(str) {
+    const hit = cache[str];
+    return hit || (cache[str] = fn(str));
+  };
+}
+
+const regex = /-(\w)/g;
+const camelize = cached(str => str.replace(regex, (_, c) => c.toUpperCase()));
+
+export { camelize };

package/src/libs/vuedraggable/util/tags.js

@@ -0,0 +1,138 @@
+const tags = [
+  'a',
+  'abbr',
+  'address',
+  'area',
+  'article',
+  'aside',
+  'audio',
+  'b',
+  'base',
+  'bdi',
+  'bdo',
+  'blockquote',
+  'body',
+  'br',
+  'button',
+  'canvas',
+  'caption',
+  'cite',
+  'code',
+  'col',
+  'colgroup',
+  'data',
+  'datalist',
+  'dd',
+  'del',
+  'details',
+  'dfn',
+  'dialog',
+  'div',
+  'dl',
+  'dt',
+  'em',
+  'embed',
+  'fieldset',
+  'figcaption',
+  'figure',
+  'footer',
+  'form',
+  'h1',
+  'h2',
+  'h3',
+  'h4',
+  'h5',
+  'h6',
+  'head',
+  'header',
+  'hgroup',
+  'hr',
+  'html',
+  'i',
+  'iframe',
+  'img',
+  'input',
+  'ins',
+  'kbd',
+  'label',
+  'legend',
+  'li',
+  'link',
+  'main',
+  'map',
+  'mark',
+  'math',
+  'menu',
+  'menuitem',
+  'meta',
+  'meter',
+  'nav',
+  'noscript',
+  'object',
+  'ol',
+  'optgroup',
+  'option',
+  'output',
+  'p',
+  'param',
+  'picture',
+  'pre',
+  'progress',
+  'q',
+  'rb',
+  'rp',
+  'rt',
+  'rtc',
+  'ruby',
+  's',
+  'samp',
+  'script',
+  'section',
+  'select',
+  'slot',
+  'small',
+  'source',
+  'span',
+  'strong',
+  'style',
+  'sub',
+  'summary',
+  'sup',
+  'svg',
+  'table',
+  'tbody',
+  'td',
+  'template',
+  'textarea',
+  'tfoot',
+  'th',
+  'thead',
+  'time',
+  'title',
+  'tr',
+  'track',
+  'u',
+  'ul',
+  'var',
+  'video',
+  'wbr'
+];
+
+function isHtmlTag(name) {
+  return tags.includes(name);
+}
+
+function isTransition(name) {
+  return ['transition-group', 'TransitionGroup'].includes(name);
+}
+
+function isHtmlAttribute(value) {
+  return (
+    ['id', 'class', 'role', 'style'].includes(value) ||
+    value.startsWith('data-') ||
+    value.startsWith('aria-') ||
+    value.startsWith('on')
+  );
+}
+
+export { isHtmlTag, isHtmlAttribute, isTransition };

package/src/libs/vuedraggable/vuedraggable.js

@@ -0,0 +1,317 @@
+import Sortable from 'sortablejs';
+import { h, defineComponent, nextTick } from 'vue';
+
+import { insertNodeAt, removeNode } from './util/htmlHelper.js';
+import { console } from './util/console.js';
+import {
+  getComponentAttributes,
+  createSortableOption,
+  getValidSortableEntries
+} from './core/componentBuilderHelper.js';
+import { computeComponentStructure } from './core/renderHelper.js';
+import { events } from './core/sortableEvents.js';
+
+function emit(evtName, evtData) {
+  nextTick(() => this.$emit(evtName.toLowerCase(), evtData));
+}
+
+function manage(evtName) {
+  return (evtData, originalElement) => {
+    if (this.realList !== null) {
+      return this[`onDrag${evtName}`](evtData, originalElement);
+    }
+  };
+}
+
+function manageAndEmit(evtName) {
+  const delegateCallBack = manage.call(this, evtName);
+  return (evtData, originalElement) => {
+    delegateCallBack.call(this, evtData, originalElement);
+    emit.call(this, evtName, evtData);
+  };
+}
+
+let draggingElement = null;
+
+const props = {
+  list: {
+    type: Array,
+    required: false,
+    default: null
+  },
+  modelValue: {
+    type: Array,
+    required: false,
+    default: null
+  },
+  itemKey: {
+    type: [String, Function],
+    required: true
+  },
+  clone: {
+    type: Function,
+    default: original => {
+      return original;
+    }
+  },
+  tag: {
+    type: String,
+    default: 'div'
+  },
+  move: {
+    type: Function,
+    default: null
+  },
+  componentData: {
+    type: Object,
+    required: false,
+    default: null
+  }
+};
+
+const emits = [
+  'update:modelValue',
+  'change',
+  ...[...events.manageAndEmit, ...events.emit].map(evt => evt.toLowerCase())
+];
+
+const draggableComponent = defineComponent({
+  name: 'draggable',
+
+  inheritAttrs: false,
+
+  props,
+
+  emits,
+
+  data() {
+    return {
+      error: false
+    };
+  },
+
+  render() {
+    try {
+      this.error = false;
+      const { $slots, $attrs, tag, componentData, realList, getKey } = this;
+      const componentStructure = computeComponentStructure({
+        $slots,
+        tag,
+        realList,
+        getKey
+      });
+      this.componentStructure = componentStructure;
+      const attributes = getComponentAttributes({ $attrs, componentData });
+      return componentStructure.render(h, attributes);
+    } catch (err) {
+      this.error = true;
+      return h('pre', { style: { color: 'red' } }, err.stack);
+    }
+  },
+
+  created() {
+    if (this.list !== null && this.modelValue !== null) {
+      console.error(
+        'modelValue and list props are mutually exclusive! Please set one or another.'
+      );
+    }
+  },
+
+  mounted() {
+    if (this.error) {
+      return;
+    }
+
+    const { $attrs, $el, componentStructure } = this;
+    componentStructure.updated();
+
+    const sortableOptions = createSortableOption({
+      $attrs,
+      callBackBuilder: {
+        manageAndEmit: event => manageAndEmit.call(this, event),
+        emit: event => emit.bind(this, event),
+        manage: event => manage.call(this, event)
+      }
+    });
+    const targetDomElement = $el.nodeType === 1 ? $el : $el.parentElement;
+    this._sortable = new Sortable(targetDomElement, sortableOptions);
+    this.targetDomElement = targetDomElement;
+    targetDomElement.__draggable_component__ = this;
+  },
+
+  updated() {
+    this.componentStructure.updated();
+  },
+
+  beforeUnmount() {
+    if (this._sortable !== undefined) this._sortable.destroy();
+  },
+
+  computed: {
+    realList() {
+      const { list } = this;
+      return list ? list : this.modelValue;
+    },
+
+    getKey() {
+      const { itemKey } = this;
+      if (typeof itemKey === 'function') {
+        return itemKey;
+      }
+      return element => element[itemKey];
+    }
+  },
+
+  watch: {
+    $attrs: {
+      handler(newOptionValue) {
+        const { _sortable } = this;
+        if (!_sortable) return;
+        getValidSortableEntries(newOptionValue).forEach(([key, value]) => {
+          _sortable.option(key, value);
+        });
+      },
+      deep: true
+    }
+  },
+
+  methods: {
+    getUnderlyingVm(domElement) {
+      return this.componentStructure.getUnderlyingVm(domElement) || null;
+    },
+
+    getUnderlyingPotencialDraggableComponent(htmElement) {
+      // TODO check case where you need to see component children
+      return htmElement.__draggable_component__;
+    },
+
+    emitChanges(evt) {
+      nextTick(() => this.$emit('change', evt));
+    },
+
+    alterList(onList) {
+      if (this.list) {
+        onList(this.list);
+        return;
+      }
+      const newList = [...this.modelValue];
+      onList(newList);
+      this.$emit('update:modelValue', newList);
+    },
+
+    spliceList() {
+      const spliceList = list => list.splice(...arguments);
+      this.alterList(spliceList);
+    },
+
+    updatePosition(oldIndex, newIndex) {
+      const updatePosition = list =>
+        list.splice(newIndex, 0, list.splice(oldIndex, 1)[0]);
+      this.alterList(updatePosition);
+    },
+
+    getRelatedContextFromMoveEvent({ to, related }) {
+      const component = this.getUnderlyingPotencialDraggableComponent(to);
+      if (!component) {
+        return { component };
+      }
+      const list = component.realList;
+      const context = { list, component };
+      if (to !== related && list) {
+        const destination = component.getUnderlyingVm(related) || {};
+        return { ...destination, ...context };
+      }
+      return context;
+    },
+
+    getVmIndexFromDomIndex(domIndex) {
+      return this.componentStructure.getVmIndexFromDomIndex(
+        domIndex,
+        this.targetDomElement
+      );
+    },
+
+    onDragStart(evt) {
+      this.context = this.getUnderlyingVm(evt.item);
+      evt.item._underlying_vm_ = this.clone(this.context.element);
+      draggingElement = evt.item;
+    },
+
+    onDragAdd(evt) {
+      const element = evt.item._underlying_vm_;
+      if (element === undefined) {
+        return;
+      }
+      removeNode(evt.item);
+      const newIndex = this.getVmIndexFromDomIndex(evt.newIndex);
+      this.spliceList(newIndex, 0, element);
+      const added = { element, newIndex };
+      this.emitChanges({ added });
+    },
+
+    onDragRemove(evt) {
+      insertNodeAt(this.$el, evt.item, evt.oldIndex);
+      if (evt.pullMode === 'clone') {
+        removeNode(evt.clone);
+        return;
+      }
+      const { index: oldIndex, element } = this.context;
+      this.spliceList(oldIndex, 1);
+      const removed = { element, oldIndex };
+      this.emitChanges({ removed });
+    },
+
+    onDragUpdate(evt) {
+      removeNode(evt.item);
+      insertNodeAt(evt.from, evt.item, evt.oldIndex);
+      const oldIndex = this.context.index;
+      const newIndex = this.getVmIndexFromDomIndex(evt.newIndex);
+      this.updatePosition(oldIndex, newIndex);
+      const moved = { element: this.context.element, oldIndex, newIndex };
+      this.emitChanges({ moved });
+    },
+
+    computeFutureIndex(relatedContext, evt) {
+      if (!relatedContext.element) {
+        return 0;
+      }
+      const domChildren = [...evt.to.children].filter(
+        el => el.style.display !== 'none'
+      );
+      const currentDomIndex = domChildren.indexOf(evt.related);
+      const currentIndex = relatedContext.component.getVmIndexFromDomIndex(
+        currentDomIndex
+      );
+      const draggedInList = domChildren.indexOf(draggingElement) !== -1;
+      return draggedInList || !evt.willInsertAfter
+        ? currentIndex
+        : currentIndex + 1;
+    },
+
+    onDragMove(evt, originalEvent) {
+      const { move, realList } = this;
+      if (!move || !realList) {
+        return true;
+      }
+
+      const relatedContext = this.getRelatedContextFromMoveEvent(evt);
+      const futureIndex = this.computeFutureIndex(relatedContext, evt);
+      const draggedContext = {
+        ...this.context,
+        futureIndex
+      };
+      const sendEvent = {
+        ...evt,
+        relatedContext,
+        draggedContext
+      };
+      return move(sendEvent, originalEvent);
+    },
+
+    onDragEnd() {
+      draggingElement = null;
+    }
+  }
+});
+
+export default draggableComponent;

package/src/libs/vuejs-loadmore/icon/index.js

@@ -0,0 +1,3 @@
+import loading from './loading.vue';
+
+export default loading;

package/src/libs/vuejs-loadmore/icon/loading.scss

@@ -0,0 +1,59 @@
+@import '../style/var';
+.vuejs-loading {
+  position: relative;
+  color: $loading-spinner-color;
+  font-size: 0;
+  vertical-align: middle;
+
+  &-spinner {
+    position: relative;
+    display: inline-block;
+    width: $loading-spinner-size;
+    // compatible for 1.x, users may set width or height in root element
+    max-width: 100%;
+    height: $loading-spinner-size;
+    max-height: 100%;
+    vertical-align: middle;
+
+    &-circular {
+      animation-duration: 2s;
+    }
+  }
+
+  &-circular {
+    display: block;
+    width: 100%;
+    height: 100%;
+
+    circle {
+      animation: vuejs-circular 1.5s ease-in-out infinite;
+      stroke: currentColor;
+      stroke-width: 3;
+      stroke-linecap: round;
+    }
+  }
+
+  &-text {
+    display: inline-block;
+    margin-left: $padding-xs;
+    color: $loading-text-color;
+    font-size: $loading-text-font-size;
+    vertical-align: middle;
+  }
+}
+@keyframes vuejs-circular {
+  0% {
+    stroke-dasharray: 1, 200;
+    stroke-dashoffset: 0;
+  }
+
+  50% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -40;
+  }
+
+  100% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -120;
+  }
+}

package/src/libs/vuejs-loadmore/icon/loading.vue

@@ -0,0 +1,21 @@
+<script>
+export default {
+  name: 'loading'
+};
+</script>
+
+<template>
+  <div class="vuejs-loading vuejs-loading-circular">
+    <span class="vuejs-loading-spinner vuejs-loading-spinner-circular">
+      <svg class="vuejs-loading-circular" viewBox="25 25 50 50">
+        <circle cx="50"
+                cy="50"
+                r="20"
+                fill="none" />
+      </svg>
+    </span>
+    <span class="vuejs-loading-text">
+      <slot></slot>
+    </span>
+  </div>
+</template>

package/src/libs/vuejs-loadmore/index.js

@@ -0,0 +1,18 @@
+import VueLoadmore from './vuejs-loadmore/index.vue';
+import './vuejs-loadmore/index.scss';
+import './icon/loading.scss';
+// import locale from './locale/index';
+
+// export default {
+//   install (Vue, options = {}) {
+//     Vue.component('vue-loadmore', VueLoadmore);
+
+//     locale.use(options.lang);
+//   }
+// };
+
+// export {
+//   locale
+// };
+
+export default VueLoadmore;

package/src/libs/vuejs-loadmore/locale/index.js

@@ -0,0 +1,32 @@
+import Vue from 'vue';
+
+import { getDeepVal } from '../utils/getDeepValByKey';
+import zhCN from './lang/zh-CN';
+import enUS from './lang/en-US';
+
+const langLibrary = {
+  'zh-CN': zhCN,
+  'en-US': enUS
+};
+
+const proto = Vue.prototype;
+const { defineReactive } = Vue.util;
+// 将proto.lang定义成响应式数据
+defineReactive(proto, 'lang', 'zh-CN');
+
+const getLangLibrary = () => langLibrary[proto.lang];
+
+export default {
+  // 获取当前语言库的值
+  t (path) {
+    const library = getLangLibrary();
+    return getDeepVal(library, path);
+  },
+
+  // 使用某个语言库(zhCN/enUS)
+  use (lang) {
+    if (langLibrary[lang]) {
+      proto.lang = lang;
+    }
+  }
+};