@opentinyvue/vue-renderless 3.21.0

package/popeditor/vue.js

@@ -0,0 +1,223 @@
+import {
+  __spreadValues
+} from "../chunk-G2ADBYYC.js";
+import debounce from "../common/deps/debounce";
+import userPopper from "../common/deps/vue-popper";
+import {
+  computedGetTitle,
+  computedTreeOp,
+  computedModalWidth,
+  createSearchForm,
+  filterNode,
+  getColumns,
+  getDisplay,
+  getMultiSelectedData,
+  getRadioSelectedData,
+  handleClear,
+  handleConfirm,
+  handleOpen,
+  handleReset,
+  handleCancel,
+  handleBeforeClose,
+  handleSearch,
+  handleSizeChange,
+  initDisplay,
+  openDialog,
+  query,
+  selectedGridSelectAll,
+  selectedGridSelectChange,
+  sourceGridSelectAll,
+  sourceGridSelectChange,
+  treeCheckChange,
+  watchFilterText,
+  handleNumberPageChange,
+  doSearch,
+  doClear,
+  doSuggesst,
+  closeSuggestPanel,
+  getSuggestParam,
+  suggestRadioChange,
+  updateSuggestWidth,
+  handlePager,
+  initSearchOption,
+  mounted,
+  doDestroy,
+  selectedBoxInit,
+  selectedBoxClear,
+  selectedBoxDelete,
+  selectedBoxDrag,
+  radioChangeFn,
+  computedTreeMaxHeight
+} from "./index";
+const api = [
+  "state",
+  "handleOpen",
+  "openDialog",
+  "handleClear",
+  "handleConfirm",
+  "handleReset",
+  "handleSearch",
+  "handleCancel",
+  "handleBeforeClose",
+  "handleSizeChange",
+  "selectedGridSelectAll",
+  "selectedGridSelectChange",
+  "sourceGridSelectAll",
+  "sourceGridSelectChange",
+  "treeCheckChange",
+  "handleNumberPageChange",
+  "doSearch",
+  "doClear",
+  "doSuggesst",
+  "closeSuggestPanel",
+  "popper",
+  "doSuggesstNow",
+  "suggestRadioChange",
+  "doDestroy",
+  "selectedBoxClear",
+  "selectedBoxDelete",
+  "selectedBoxDrag",
+  "radioChangeFn",
+  "computedTreeMaxHeight"
+];
+const initState = ({ reactive, computed, props, api: api2, constants, t, parent, vm }) => {
+  const state = reactive({
+    showContent: false,
+    open: false,
+    display: "",
+    getTitle: computed(() => api2.computedGetTitle({ constants, props, t })),
+    readonly: computed(() => !props.suggest && props.readonly),
+    modalWidth: computed(() => api2.computedModalWidth({ constants, props })),
+    conditions: props.conditions,
+    activeName: props.showHistory ? constants.ACTIVE_NAME.history : constants.ACTIVE_NAME.source,
+    commitValue: Array.isArray(props.modelValue) ? props.modelValue.slice(0) : props.modelValue,
+    currentPage: 1,
+    baseColumns: computed(() => getColumns({ constants, props })),
+    removedNodeId: [],
+    selectedDatas: [],
+    selectedValues: [],
+    sourceGridDataset: [],
+    fullGridData: [],
+    historyGridDataset: [],
+    filterText: "",
+    treeOp: computed(() => api2.computedTreeOp(props, state)),
+    theme: vm.theme,
+    pagerConfig: reactive(__spreadValues({
+      currentPage: 1,
+      pageSize: 10,
+      total: 0,
+      layout: "prev,pager,next"
+    }, props.gridOp.pagerOp || props.pagerOp || {})),
+    loading: false,
+    treeSelectList: [],
+    radioConfig: props.radioConfig,
+    searchOp: {},
+    cacheStore: {},
+    formDisabled: computed(() => (parent.tinyForm || {}).disabled),
+    disabled: computed(() => props.disabled || state.formDisabled),
+    suggestList: [],
+    showSuggestPanel: false,
+    inputHover: false,
+    search: null,
+    closeSuggestPanelInvoker: null,
+    treeWrapperMaxHeight: "auto"
+  });
+  return state;
+};
+const initApi = ({ api: api2, props, state, parent, vm, emit, popper, constants, nextTick }) => {
+  Object.assign(api2, {
+    state,
+    popper,
+    computedGetTitle,
+    computedModalWidth,
+    filterNode: filterNode(),
+    query: query({ constants, parent, props, state }),
+    watchFilterText: watchFilterText(vm),
+    treeCheckChange: treeCheckChange({ constants, state, props }),
+    getDisplay: getDisplay({ constants, props, state }),
+    createSearchForm: createSearchForm(props),
+    handleCancel: handleCancel({ props, state, constants }),
+    handleBeforeClose: handleBeforeClose({ props, state, constants }),
+    getMultiSelectedData: getMultiSelectedData({ props, state }),
+    getRadioSelectedData: getRadioSelectedData({ constants, props, state, vm }),
+    selectedGridSelectAll: selectedGridSelectAll({ constants, props, vm, state }),
+    selectedGridSelectChange: selectedGridSelectChange({ constants, props, vm, state }),
+    handleReset: handleReset({ api: api2, state, props }),
+    openDialog: openDialog({ api: api2, emit, props, state, nextTick }),
+    initDisplay: initDisplay({ api: api2, constants, props, state, nextTick }),
+    handleSearch: handleSearch({ api: api2, props, state, vm, constants }),
+    computedTreeOp: computedTreeOp({ api: api2, constants }),
+    handleSizeChange: handleSizeChange({ api: api2, emit, state }),
+    handleOpen: handleOpen({ api: api2, constants, props, state }),
+    handleClear: handleClear({ constants, emit, props, state }),
+    handleConfirm: handleConfirm({ api: api2, constants, emit, props, state }),
+    handleNumberPageChange: handleNumberPageChange({ api: api2, emit, state }),
+    doSearch: doSearch({ api: api2, state, props }),
+    doClear: doClear({ api: api2, state, props }),
+    updateSuggestWidth: updateSuggestWidth({ vm }),
+    doSuggesstNow: doSuggesst({ api: api2, state, props, popper, nextTick }),
+    doSuggesst: debounce(1e3, doSuggesst({ api: api2, state, props, popper, nextTick })),
+    closeSuggestPanel: closeSuggestPanel({ api: api2, state, vm }),
+    sourceGridSelectChange: sourceGridSelectChange({ props, state, api: api2 }),
+    sourceGridSelectAll: sourceGridSelectAll({ props, state, api: api2 }),
+    getSuggestParam: getSuggestParam({ props, state, api: api2 }),
+    suggestRadioChange: suggestRadioChange({ api: api2, state }),
+    handlePager: handlePager({ api: api2, props, state }),
+    initSearchOption: initSearchOption({ api: api2, state }),
+    mounted: mounted({ api: api2, props }),
+    doDestroy: doDestroy({ popper }),
+    selectedBoxInit: selectedBoxInit(vm),
+    selectedBoxClear: selectedBoxClear(api2),
+    selectedBoxDelete: selectedBoxDelete(api2),
+    selectedBoxDrag: selectedBoxDrag({ props, state }),
+    radioChangeFn: radioChangeFn({ props, api: api2 }),
+    computedTreeMaxHeight: computedTreeMaxHeight({ vm, state })
+  });
+  state.search = api2.createSearchForm(false);
+};
+const initWatch = ({ watch, props, api: api2, state, popper }) => {
+  watch(
+    () => props.gridOp.data,
+    (value) => {
+      state.fullGridData = value;
+      api2.initDisplay(props.modelValue);
+    }
+  );
+  watch(() => state.fullGridData, api2.handlePager);
+  watch(() => props.modelValue, api2.initDisplay);
+  watch(() => state.filterText, api2.watchFilterText, { deep: true });
+  watch(
+    () => state.showSuggestPanel,
+    (value) => {
+      popper.showPopper.value = value;
+    },
+    { immediate: true }
+  );
+  watch(() => props.conditions, api2.initSearchOption, { deep: true, immediate: true });
+};
+const renderless = (props, { computed, onMounted, reactive, watch, inject, toRefs, onBeforeUnmount, onDeactivated }, { t, parent, emit, constants, vm, nextTick, slots }) => {
+  const api2 = {};
+  const state = initState({ reactive, computed, props, api: api2, constants, t, parent, vm });
+  const popper = userPopper({
+    emit,
+    vm,
+    watch,
+    onBeforeUnmount,
+    props,
+    nextTick,
+    toRefs,
+    slots,
+    reactive,
+    onDeactivated
+  });
+  parent.tinyForm = parent.tinyForm || inject("form", null);
+  initApi({ api: api2, props, state, parent, vm, emit, popper, constants, nextTick });
+  initWatch({ watch, props, api: api2, state, popper });
+  onMounted(api2.mounted);
+  onBeforeUnmount(api2.closeSuggestPanel);
+  return api2;
+};
+export {
+  api,
+  renderless
+};

package/popover/index.js

@@ -0,0 +1,207 @@
+import "../chunk-G2ADBYYC.js";
+import { on, off, addClass, removeClass } from "../common/deps/dom";
+import { guid } from "../common/string";
+import { KEY_CODE } from "../common";
+const processTrigger = ({
+  api,
+  state,
+  props,
+  nextTick
+}) => {
+  const { referenceElm, popperElm } = state;
+  if (props.trigger === "click") {
+    on(referenceElm, "click", api.doToggle);
+    on(document, "click", api.handleDocumentClick);
+  } else if (props.trigger === "hover") {
+    on(referenceElm, "mouseenter", api.handleMouseEnter);
+    on(popperElm, "mouseenter", api.handleMouseEnter);
+    on(referenceElm, "mouseleave", api.handleMouseLeave);
+    on(popperElm, "mouseleave", api.handleMouseLeave);
+  } else if (props.trigger === "focus") {
+    if (referenceElm.querySelector("input, textarea")) {
+      on(referenceElm, "focusin", api.doShow);
+      on(referenceElm, "focusout", api.doClose);
+    } else {
+      on(referenceElm, "mousedown", api.doShow);
+      on(referenceElm, "mouseup", api.doClose);
+    }
+  } else if (props.trigger === "manual") {
+    if (props.modelValue) {
+      nextTick(api.doShow);
+    }
+  }
+};
+const mounted = ({
+  api,
+  state,
+  constants,
+  props,
+  nextTick,
+  mode
+}) => () => {
+  state.mounted = true;
+  const { referenceElm, popperElm, tooltipId } = state;
+  if (referenceElm) {
+    if (mode !== "mobile-first") {
+      addClass(referenceElm, `${constants.IDPREFIX}__reference`);
+    }
+    referenceElm.setAttribute("aria-describedby", tooltipId);
+    referenceElm.setAttribute("tabindex", props.tabindex.toString());
+    popperElm.setAttribute("tabindex", 0);
+    if (props.trigger !== "click") {
+      on(referenceElm, "focusin", () => {
+        api.handleFocus();
+        const instance = referenceElm.__vue__;
+        if (instance && typeof instance.focus === "function") {
+          instance.focus();
+        }
+      });
+      on(popperElm, "focusin", api.handleFocus);
+      on(referenceElm, "focusout", api.handleBlur);
+      on(popperElm, "focusout", api.handleBlur);
+    }
+    on(referenceElm, "keydown", api.handleKeydown);
+    on(referenceElm, "click", api.handleClick);
+  }
+  processTrigger({ api, state, props, nextTick });
+};
+const doToggle = (state) => () => {
+  state.showPopper = !state.showPopper;
+};
+const doShow = (state) => () => {
+  state.showPopper = true;
+};
+const doClose = (state) => () => {
+  state.showPopper = false;
+};
+const handleFocus = ({ props, state }) => () => {
+  addClass(state.referenceElm, "focusing");
+  if (props.trigger === "click" || props.trigger === "focus") {
+    state.showPopper = true;
+  }
+};
+const handleClick = (state) => (event) => {
+  const popperElm = state.popperElm;
+  if ((event == null ? void 0 : event.target) && popperElm) {
+    state.webCompEventTarget = event.target;
+  }
+  removeClass(state.referenceElm, "focusing");
+};
+const handleBlur = ({ props, state }) => () => {
+  removeClass(state.referenceElm, "focusing");
+  if (props.trigger === "click" || props.trigger === "focus") {
+    state.showPopper = false;
+  }
+};
+const handleMouseEnter = ({ props, state }) => () => {
+  clearTimeout(state.timer);
+  if (props.openDelay) {
+    state.timer = window.setTimeout(() => {
+      state.showPopper = true;
+    }, props.openDelay);
+  } else {
+    state.showPopper = true;
+  }
+};
+const handleKeydown = ({ api, props }) => (event) => {
+  if (event.keyCode === KEY_CODE.Escape && props.trigger !== "manual") {
+    api.doClose();
+  }
+};
+const handleMouseLeave = ({ props, state }) => () => {
+  clearTimeout(state.timer);
+  if (props.closeDelay) {
+    state.timer = window.setTimeout(() => {
+      state.showPopper = false;
+    }, props.closeDelay);
+  } else {
+    state.showPopper = false;
+  }
+};
+const handleDocumentClick = ({ vm, state }) => (event) => {
+  const reference = state.referenceElm;
+  const popperElm = state.popperElm;
+  const $el = vm.$refs.root;
+  let target = event.target;
+  if ((target == null ? void 0 : target.shadowRoot) && popperElm) {
+    target = state.webCompEventTarget;
+  }
+  if (!$el || !reference || $el.contains(target) || reference.contains(target) || !popperElm || popperElm.contains(target)) {
+    return false;
+  } else {
+    state.showPopper = false;
+    return true;
+  }
+  state.showPopper = false;
+};
+const handleAfterEnter = (emit) => () => {
+  emit("after-enter");
+};
+const handleAfterLeave = (emit) => () => {
+  emit("after-leave");
+};
+const handleItemClick = ({ emit, state }) => (item) => {
+  state.showPopper = false;
+  emit("item-click", item);
+};
+const cleanup = ({ props, state }) => () => {
+  if (props.openDelay) {
+    clearTimeout(state.timer);
+  }
+};
+const destroyed = ({ state, api }) => () => {
+  const { referenceElm, popperElm } = state;
+  off(referenceElm, "click", api.doToggle);
+  off(referenceElm, "mouseup", api.doClose);
+  off(referenceElm, "mousedown", api.doShow);
+  off(referenceElm, "focusin", api.doShow);
+  off(referenceElm, "focusout", api.doClose);
+  off(referenceElm, "mouseleave", api.handleMouseLeave);
+  off(referenceElm, "mouseenter", api.handleMouseEnter);
+  off(document, "click", api.handleDocumentClick);
+  off(popperElm, "focusin", api.handleFocus);
+  off(popperElm, "focusout", api.handleBlur);
+  off(popperElm, "mouseenter", api.handleMouseEnter);
+  off(popperElm, "mouseleave", api.handleMouseLeave);
+  off(referenceElm, "click", api.handleClick);
+  off(referenceElm, "focusout", api.handleBlur);
+  off(referenceElm, "keydown", api.handleKeydown);
+};
+const computedTooltipId = (constants) => () => `${constants.IDPREFIX}-${guid("", 4)}`;
+const wrapMounted = ({ api, props, vm, state }) => () => {
+  const { reference, popper, wrapper } = vm.$refs;
+  const referenceElm = state.referenceElm = props.reference || reference;
+  state.popperElm = state.popperElm || popper;
+  if (!referenceElm && wrapper.children) {
+    state.referenceElm = wrapper.children[0] || wrapper;
+  }
+  state.referenceElm && api.mounted();
+};
+const observeCallback = ({ state, vm }) => (mutationsList) => {
+  for (let mutation of mutationsList) {
+    if (mutation.type === "attributes" && mutation.attributeName === "x-placement") {
+      state.xPlacement = vm.$refs.popper.getAttribute("x-placement") || "bottom";
+    }
+  }
+};
+export {
+  cleanup,
+  computedTooltipId,
+  destroyed,
+  doClose,
+  doShow,
+  doToggle,
+  handleAfterEnter,
+  handleAfterLeave,
+  handleBlur,
+  handleClick,
+  handleDocumentClick,
+  handleFocus,
+  handleItemClick,
+  handleKeydown,
+  handleMouseEnter,
+  handleMouseLeave,
+  mounted,
+  observeCallback,
+  wrapMounted
+};

package/popover/vue.js

@@ -0,0 +1,165 @@
+import "../chunk-G2ADBYYC.js";
+import {
+  mounted,
+  computedTooltipId,
+  destroyed,
+  doToggle,
+  doShow,
+  doClose,
+  handleFocus,
+  handleClick,
+  handleBlur,
+  handleKeydown,
+  handleAfterEnter,
+  handleAfterLeave,
+  handleMouseEnter,
+  handleMouseLeave,
+  handleDocumentClick,
+  cleanup,
+  wrapMounted,
+  handleItemClick,
+  observeCallback
+} from "./index";
+import userPopper from "../common/deps/vue-popper";
+const api = [
+  "state",
+  "handleAfterEnter",
+  "handleAfterLeave",
+  "doToggle",
+  "doShow",
+  "doClose",
+  "doDestroy",
+  "handleItemClick",
+  "handleDocumentClick"
+];
+const initState = ({
+  reactive,
+  computed,
+  api: api2,
+  popperElm,
+  showPopper,
+  referenceElm
+}) => {
+  const state = reactive({
+    popperElm,
+    referenceElm,
+    /** popper 元素是否显示。 它是通过v-show 绑定到页面上，造成隐藏时，popperJs并没有destory,有一定的性能影响 */
+    showPopper,
+    timer: 0,
+    mounted: false,
+    xPlacement: "bottom",
+    tooltipId: computed(() => api2.computedTooltipId()),
+    webCompEventTarget: null
+  });
+  return state;
+};
+const initApi = ({ api: api2, props, state, emit, doDestroy, constants, nextTick, vm, mode }) => {
+  Object.assign(api2, {
+    state,
+    mounted: mounted({ api: api2, state, constants, props, nextTick, mode }),
+    cleanup: cleanup({ state, props }),
+    destroyed: destroyed({ state, api: api2 }),
+    doDestroy,
+    computedTooltipId: computedTooltipId(constants),
+    doShow: doShow(state),
+    doClose: doClose(state),
+    doToggle: doToggle(state),
+    handleClick: handleClick(state),
+    handleAfterEnter: handleAfterEnter(emit),
+    handleBlur: handleBlur({ props, state }),
+    handleFocus: handleFocus({ props, state }),
+    handleKeydown: handleKeydown({ api: api2, props }),
+    handleMouseLeave: handleMouseLeave({ props, state }),
+    handleAfterLeave: handleAfterLeave(emit),
+    handleMouseEnter: handleMouseEnter({ props, state }),
+    handleDocumentClick: handleDocumentClick({ vm, state }),
+    wrapMounted: wrapMounted({ api: api2, props, vm, state }),
+    handleItemClick: handleItemClick({ emit, state }),
+    observeCallback: observeCallback({ vm, state })
+  });
+};
+const initWatch = ({
+  watch,
+  props,
+  state,
+  emit,
+  api: api2,
+  nextTick,
+  updatePopper,
+  mode
+}) => {
+  watch(
+    () => state.showPopper,
+    (val) => {
+      if (props.disabled) {
+        return;
+      }
+      if (val) {
+        nextTick(() => updatePopper());
+      }
+      val ? emit("show") : emit("hide");
+    }
+  );
+  watch(
+    () => props.reference,
+    (val, oldVal) => {
+      if (val !== oldVal) {
+        api2.destroyed();
+        nextTick(() => {
+          api2.wrapMounted();
+        });
+      }
+    }
+  );
+  watch(
+    () => props.modelValue,
+    (val) => {
+      if (props.trigger === "manual") {
+        state.showPopper = val;
+        emit("update:modelValue", val);
+      }
+    }
+  );
+};
+const renderless = (props, {
+  reactive,
+  computed,
+  watch,
+  toRefs,
+  onBeforeUnmount,
+  onMounted,
+  onUnmounted,
+  onActivated,
+  onDeactivated
+}, { $prefix, emit, vm, slots, nextTick, mode }) => {
+  const api2 = {};
+  const constants = { IDPREFIX: `${$prefix.toLowerCase()}-popover` };
+  const options = { emit, onBeforeUnmount, nextTick, reactive, props, watch, onDeactivated, vm, slots, toRefs };
+  const { showPopper, popperElm, referenceElm, doDestroy, updatePopper } = userPopper(options);
+  const state = initState({ reactive, computed, api: api2, popperElm, showPopper, referenceElm });
+  initApi({ api: api2, constants, props, state, emit, doDestroy, nextTick, vm, mode });
+  onDeactivated(() => {
+    api2.destroyed();
+    api2.cleanup();
+  });
+  onMounted(() => {
+    api2.wrapMounted();
+    if (props.genArrowByHtml) {
+      const config = { attributes: true, childList: false, subtree: false };
+      api2.observer = new MutationObserver(api2.observeCallback);
+      api2.observer.observe(vm.$refs.popper, config);
+    }
+  });
+  onActivated(api2.mounted);
+  onUnmounted(() => {
+    api2.destroyed();
+    api2.observer && api2.observer.disconnect();
+  });
+  onBeforeUnmount(api2.cleanup);
+  initWatch({ watch, props, state, emit, api: api2, nextTick, updatePopper, mode });
+  return api2;
+};
+export {
+  api,
+  renderless
+};

package/popup/index.js

@@ -0,0 +1,101 @@
+import {
+  __spreadValues
+} from "../chunk-G2ADBYYC.js";
+import { on, off } from "../common/deps/dom";
+import { touchStart, touchMove } from "../common/deps/touch";
+import { getScroller } from "../dropdown-menu";
+import { isNull } from "../common/type";
+const getStyle = (props) => () => {
+  const style = __spreadValues({}, props.popupStyle);
+  if (!isNull(props.duration)) {
+    const key = props.position === "center" ? "animationDuration" : "transitionDuration";
+    style[key] = `${props.duration}s`;
+  }
+  return style;
+};
+const watchValue = (api) => (value) => {
+  const type = value ? "open" : "close";
+  api[type]();
+};
+const open = ({ api, constants, emit, props, state }) => () => {
+  if (state.opened) {
+    return;
+  }
+  if (props.zIndex !== void 0) {
+    state.context.zIndex = props.zIndex;
+  }
+  api.renderOverlay();
+  state.opened = true;
+  emit("open");
+  if (props.lockScroll) {
+    on(document, "touchstart", touchStart);
+    on(document, "touchmove", api.onTouchMove);
+    if (!state.context.lockCount) {
+      document.body.classList.add(constants.OVERFLOWHIDDEN);
+    }
+    state.context.lockCount++;
+  }
+};
+const close = ({ api, constants, emit, props, state }) => () => {
+  if (!state.opened) {
+    return;
+  }
+  if (props.lockScroll) {
+    state.context.lockCount--;
+    off(document, "touchstart", touchStart);
+    off(document, "touchmove", api.onTouchMove);
+    if (!state.context.lockCount) {
+      document.body.classList.remove(constants.OVERFLOWHIDDEN);
+    }
+  }
+  state.opened = false;
+  emit("update:modelValue", false);
+  emit("close");
+};
+const onTouchMove = ({ vm, state }) => (event) => {
+  touchMove(event);
+  const direction = state.deltaY > 0 ? "10" : "01";
+  const el = getScroller()(event.target, vm.$refs.$el);
+  const { scrollHeight, offsetHeight, scrollTop } = el;
+  let status = "11";
+  if (scrollTop === 0) {
+    status = offsetHeight >= scrollHeight ? "00" : "01";
+  } else if (scrollTop + offsetHeight >= scrollHeight) {
+    status = "10";
+  }
+  if (status !== "11" && state.direction === "vertical" && !(parseInt(status, 2) & parseInt(direction, 2))) {
+    event.preventDefault();
+  }
+};
+const renderOverlay = ({ api, nextTick, props, state }) => () => {
+  if (!props.modelValue) {
+    return;
+  }
+  nextTick(() => {
+    api.updateZIndex(props.overlay ? 1 : 0);
+    if (props.overlay) {
+      state.zIndex = state.context.zIndex++;
+    }
+  });
+};
+const updateZIndex = ({ vm, state }) => (value = 0) => vm.$refs.popup.style.zIndex = ++state.context.zIndex + value;
+const clickOverlay = ({ api, props, emit }) => () => {
+  if (props.closeOnClickOverlay) {
+    api.close();
+    emit("click-overlay");
+  }
+};
+const closed = (emit) => () => emit("closed");
+const opened = (emit) => () => emit("opened");
+export {
+  clickOverlay,
+  close,
+  closed,
+  getStyle,
+  onTouchMove,
+  open,
+  opened,
+  renderOverlay,
+  updateZIndex,
+  watchValue
+};