@opentiny/vue-renderless 3.13.1 → 3.14.0

package/select-dropdown/vue.js

@@ -1,7 +1,30 @@
 import "../chunk-G2ADBYYC.js";
-import { mounted } from "./index";
+import {
+  mounted,
+  closeModal,
+  handleQueryChange,
+  toggleSelectedBox,
+  deleteSelected,
+  selectedBoxConfirm,
+  selectDropdownConfirm,
+  cancelSearch,
+  handleClear
+} from "./index";
 import userPopper from "../common/deps/vue-popper";
-const api = ["state", "doDestroy"];
+import PopupManager from "../common/deps/popup-manager";
+import debounce from "../common/deps/debounce";
+const api = [
+  "state",
+  "doDestroy",
+  "closeModal",
+  "debouncedQueryChange",
+  "toggleSelectedBox",
+  "deleteSelected",
+  "selectedBoxConfirm",
+  "selectDropdownConfirm",
+  "cancelSearch",
+  "handleClear"
+];
 const initState = ({ reactive, computed, popper, selectVm }) => {
   const { showPopper, currentPlacement, popperElm, referenceElm } = popper;
   const state = reactive({
@@ -10,16 +33,43 @@ const initState = ({ reactive, computed, popper, selectVm }) => {
     popperElm,
     referenceElm,
     minWidth: "",
+    query: "",
+    showSelectedBox: false,
+    debounce: 300,
+    selectedArr: [],
+    deletedArr: [],
+    originValue: [],
+    showClose: computed(() => selectVm.clearable && !selectVm.multiple && selectVm.modelValue !== ""),
+    filterable: computed(() => selectVm.filterable),
     multiple: computed(() => selectVm.multiple),
-    popperClass: computed(() => selectVm.popperClass)
+    popperClass: computed(() => selectVm.popperClass),
+    selected: computed(
+      () => selectVm.renderType === "tree" && !selectVm.treeOp.checkStrictly ? selectVm.state.selected.filter((item) => !item.children) : selectVm.state.selected
+    ),
+    device: computed(() => selectVm.state.device),
+    visible: false,
+    windowScrollTop: 0,
+    zIndex: 2e3,
+    valueField: computed(() => selectVm.renderType === "tree" ? "id" : "value")
   });
   return state;
 };
-const initApi = ({ api: api2, popper, state, selectEmitter, constants, selectVm, parent }) => {
+const initApi = ({ api: api2, popper, state, selectEmitter, constants, selectVm, parent, nextTick, props }) => {
   const { destroyPopper, doDestroy, updatePopper } = popper;
   Object.assign(api2, {
     state,
     doDestroy,
+    handleQueryChange: handleQueryChange({ state, selectVm }),
+    debouncedQueryChange: debounce(state.debounce, (value) => {
+      api2.handleQueryChange(value);
+    }),
+    toggleSelectedBox: toggleSelectedBox({ state }),
+    deleteSelected: deleteSelected({ state }),
+    selectedBoxConfirm: selectedBoxConfirm({ state, selectVm, nextTick }),
+    selectDropdownConfirm: selectDropdownConfirm({ state, selectVm }),
+    closeModal: closeModal({ state, selectVm, props }),
+    cancelSearch: cancelSearch({ api: api2, state, selectVm }),
+    handleClear: handleClear({ state, selectVm }),
     mounted: mounted({ selectEmitter, constants, state, selectVm, updatePopper, destroyPopper, parent })
   });
 };
@@ -33,8 +83,35 @@ const initWatch = ({ watch, selectVm, state, nextTick }) => {
     },
     { immediate: true }
   );
+  watch(
+    () => state.query,
+    (val) => {
+      selectVm.state.queryValue = val;
+    }
+  );
+  watch(
+    () => selectVm.state.visible,
+    (val) => {
+      state.query = "";
+      setTimeout(() => {
+        state.visible = val;
+        state.zIndex = PopupManager.nextZIndex();
+      }, 0);
+      if (val && selectVm.multiple) {
+        state.originValue = selectVm.modelValue.slice(0);
+      }
+    }
+  );
+  watch(
+    () => selectVm.shape,
+    () => {
+      nextTick(() => {
+        state.referenceElm = selectVm.$refs.reference && selectVm.$refs.reference.$el;
+      });
+    }
+  );
 };
-const renderless = (props, { computed, onBeforeUnmount, onDeactivated, onMounted, reactive, toRefs, watch, inject }, { vm, slots, parent, emit, nextTick }) => {
+const renderless = (props, { computed, onBeforeUnmount, onDeactivated, onMounted, reactive, toRefs, watch, inject }, { vm, slots, parent, emit, nextTick, isMobileFirstMode }) => {
   const api2 = {};
   const constants = parent.select._constants;
   const selectEmitter = inject("selectEmitter");
@@ -51,9 +128,9 @@ const renderless = (props, { computed, onBeforeUnmount, onDeactivated, onMounted
     toRefs,
     watch
   });
-  const state = initState({ reactive, computed, popper, selectVm });
-  initApi({ api: api2, popper, state, selectEmitter, constants, selectVm, parent });
-  initWatch({ watch, selectVm, state, nextTick });
+  const state = initState({ reactive, computed, popper, props, selectVm });
+  initApi({ api: api2, popper, state, selectEmitter, constants, selectVm, parent, nextTick, props, isMobileFirstMode });
+  initWatch({ watch, selectVm, state, nextTick, api: api2 });
   onBeforeUnmount(() => {
     popper.destroyPopper("remove");
     state.popperElm = null;

package/select-view/index.js

@@ -125,7 +125,9 @@ const load = ({ state, props, api }) => () => {
   }
   const list = infiniteScroll.load({ input: search.input, options: search.options });
   if (!list) {
-  } else if (typeof list.then === "function") {
+    return;
+  }
+  if (typeof list.then === "function") {
     state.search.loading = true;
     list.then((data) => {
       state.search.loading = false;

package/selected-box/index.js

@@ -194,10 +194,12 @@ const unmount = (state) => () => {
     state.dragInstance = null;
   }
 };
+const computedShowClear = (state) => () => Array.isArray(state.select) && state.select.length;
 export {
   arrayMinus,
   batchSubmit,
   computedShowAuxi,
+  computedShowClear,
   coverSubmit,
   emitChange,
   getParams,

package/selected-box/vue.js

@@ -19,7 +19,8 @@ import {
   arrayMinus,
   batchSubmit,
   getParams,
-  coverSubmit
+  coverSubmit,
+  computedShowClear
 } from "./index";
 const api = [
   "state",
@@ -50,7 +51,8 @@ const renderless = (props, { reactive, computed, onBeforeMount, onMounted, onBef
     popoverVisible: false,
     popoverContent: "",
     dragInstance: null,
-    slotParams: computed(() => ({ inverse: state.inverse, total: state.total, select: state.select }))
+    slotParams: computed(() => ({ inverse: state.inverse, total: state.total, select: state.select })),
+    showClear: computed(() => api2.computedShowClear())
   });
   const api2 = {
     state,
@@ -63,7 +65,8 @@ const renderless = (props, { reactive, computed, onBeforeMount, onMounted, onBef
     handleMouseleave: handleMouseleave(state),
     keyType: keyType(props),
     unmount: unmount(state),
-    getParams: getParams(state)
+    getParams: getParams(state),
+    computedShowClear: computedShowClear(state)
   };
   Object.assign(api2, {
     submitSelection: submitSelection({ api: api2, state }),

package/signature/index.js

@@ -0,0 +1,241 @@
+import "../chunk-G2ADBYYC.js";
+import { preventDefault } from "../common/deps/dom";
+const getOffsetPosition = ({ touch, state }) => {
+  let offsetY = 0;
+  let offsetX = 0;
+  if (state.current === "default" && state.isFullscreen) {
+    offsetY = state.canvasRect.width - touch.clientX + (state.canvasRect.left || 0);
+    offsetX = touch.clientY - (state.canvasRect.top || 0);
+  } else {
+    offsetX = touch.clientX - (state.canvasRect.left || 0);
+    offsetY = touch.clientY - (state.canvasRect.top || 0);
+  }
+  return { offsetX, offsetY };
+};
+const redraw = ({ state, props, nextTick }) => ({ oldWidth, oldHeight }) => {
+  if (Date.now() - state.lastRedrawDate < 100) {
+    return;
+  }
+  state.lastRedrawDate = Date.now();
+  nextTick(() => {
+    const context = state.ctx;
+    context.lineWidth = props.lineWidth;
+    context.strokeStyle = props.penColor;
+    context.beginPath();
+    state.ctx.lineJoin = "round";
+    state.paths.forEach((point) => {
+      point.offsetX *= state.width / oldWidth;
+      point.offsetY *= state.height / oldHeight;
+      if (point.isStart) {
+        context.moveTo(point.offsetX, point.offsetY);
+      } else {
+        context.lineTo(point.offsetX, point.offsetY);
+        context.stroke();
+      }
+    });
+  });
+};
+const touchStart = ({ emit, props, state, vm, api, useRect }) => () => {
+  if (!state.ctx) {
+    return false;
+  }
+  if (!state.isBeginWrite) {
+    api.rewrite(true);
+  }
+  state.canvasRect = useRect(vm.$refs.canvasRef);
+  state.ctx.lineWidth = props.lineWidth;
+  state.ctx.strokeStyle = props.penColor;
+  const touch = event.touches[0];
+  if (!touch.offsetX) {
+    const pos = getOffsetPosition({ touch, state });
+    touch.offsetX = pos.offsetX;
+    touch.offsetY = pos.offsetY;
+  }
+  state.isDrawing = true;
+  const point = {
+    isStart: true,
+    offsetX: touch.offsetX,
+    offsetY: touch.offsetY
+  };
+  state.paths.push(point);
+  state.ctx.beginPath();
+  state.ctx.lineJoin = "round";
+  state.ctx.moveTo(touch.offsetX, touch.offsetY);
+  emit("start");
+};
+const touchMove = ({ emit, state }) => (e) => {
+  if (!state.ctx) {
+    return false;
+  }
+  preventDefault(e);
+  const touch = event.touches[0];
+  if (state.isDrawing) {
+    if (!touch.offsetX) {
+      const pos = getOffsetPosition({ touch, state });
+      touch.offsetX = pos.offsetX;
+      touch.offsetY = pos.offsetY;
+    }
+    state.ctx.lineTo(touch.offsetX, touch.offsetY);
+    state.ctx.stroke();
+    const point = {
+      isStart: false,
+      offsetX: touch.offsetX,
+      offsetY: touch.offsetY
+    };
+    state.paths.push(point);
+  }
+  emit("signing", event);
+};
+const touchEnd = ({ emit, state }) => (event2) => {
+  state.isDrawing = false;
+  preventDefault(event2);
+  emit("end");
+};
+const isCanvasEmpty = (canvas, props) => {
+  const empty = document.createElement("canvas");
+  const ctx = empty.getContext("2d");
+  empty.width = canvas.width;
+  empty.height = canvas.height;
+  ctx.font = "16px PingFangSC";
+  ctx.textAlign = "center";
+  ctx.fillStyle = "#AEAEAE";
+  ctx.fillText(props.placeholder, empty.width / 2, empty.height / 2);
+  return canvas.toDataURL() === empty.toDataURL();
+};
+const setCanvasBgColor = ({ props, state }) => () => {
+  if (state.ctx && props.backgroundColor) {
+    state.ctx.fillStyle = props.backgroundColor;
+    state.ctx.fillRect(0, 0, state.width, state.height);
+  }
+};
+const setPlaceholder = ({ props, state }) => () => {
+  if (state.ctx) {
+    state.ctx.font = "16px PingFangSC";
+    state.ctx.textAlign = "center";
+    state.ctx.fillStyle = "#AEAEAE";
+    state.ctx.fillText(props.placeholder, state.width / 2, state.height / 2);
+  }
+};
+const getSignatureImage = ({ props, vm, Modal, t }) => () => {
+  const canvas = vm.$refs.canvasRef;
+  if (!canvas) {
+    return;
+  }
+  const isEmpty = isCanvasEmpty(canvas, props);
+  let image = "";
+  if (isEmpty) {
+    Modal.message(t("ui.signature.tips"));
+  } else {
+    const types = {
+      jpg: () => canvas.toDataURL("image/jpeg", 0.8),
+      jpeg: () => canvas.toDataURL("image/jpeg", 0.8)
+    };
+    let type = types[props.type];
+    if (type) {
+      image = type();
+    } else {
+      image = canvas.toDataURL(`image/${props.type}`);
+    }
+  }
+  return { image, canvas };
+};
+const submit = ({ emit, api }) => () => {
+  const { image, canvas } = api.getSignatureImage();
+  emit("submit", { image, canvas });
+};
+const rewrite = ({ api, emit, state }) => (isBeginWrite) => {
+  if (state.ctx) {
+    state.value = false;
+    state.ctx.clearRect(0, 0, state.width, state.height);
+    state.ctx.closePath();
+    api.setCanvasBgColor();
+    state.isBeginWrite = true;
+    if (isBeginWrite === true)
+      return;
+    api.setPlaceholder();
+    state.isBeginWrite = false;
+    state.paths.length = 0;
+    emit("rewrite");
+  }
+};
+const cancel = ({ api, emit }) => () => {
+  api.toggleFullscreen();
+  emit("cancel");
+};
+const tranformImage = ({ api, vm, props, nextTick }) => ({ oldWidth, oldHeight }) => {
+  const canvas = vm.$refs.canvasRef;
+  if (isCanvasEmpty(canvas, props)) {
+    nextTick(() => {
+      api.setPlaceholder();
+    });
+  } else {
+    nextTick(() => {
+      api.redraw({ oldWidth, oldHeight });
+    });
+  }
+};
+const toggleFullscreen = ({ nextTick, api, state }) => () => {
+  const clientWidth = document.documentElement.clientWidth;
+  const clientHeight = document.documentElement.clientHeight;
+  const oldWidth = state.width;
+  const oldHeight = state.height;
+  state.isFullscreen = !state.isFullscreen;
+  nextTick(() => {
+    if (state.current.value === "default" && state.isFullscreen) {
+      state.width = clientHeight;
+      state.height = clientWidth;
+    } else {
+      api.initCanvas();
+    }
+    api.tranformImage({ oldWidth, oldHeight });
+  });
+};
+const initCanvas = ({ props, state, vm }) => () => {
+  const canvas = vm.$refs.canvasRef;
+  const wrap = vm.$refs.wrapRef;
+  const width = wrap.offsetWidth || 0;
+  const height = wrap.offsetHeight || 0;
+  state.ctx = canvas.getContext("2d");
+  state.width = width;
+  state.height = props.height || height;
+};
+const mounted = ({ vm, state, api, nextTick, markRaw }) => () => {
+  const wrap = vm.$refs.wrapRef;
+  const resizeObserver = new ResizeObserver((ResizeObserverEntryArr) => {
+    const [{ contentRect }] = ResizeObserverEntryArr;
+    if (contentRect.width && contentRect.height) {
+      api.initCanvas();
+      if (state.paths.length) {
+        api.redraw({ oldWidth: contentRect.width, oldHeight: contentRect.height });
+      } else {
+        nextTick(() => {
+          api.setCanvasBgColor();
+          api.setPlaceholder();
+        });
+      }
+    }
+  });
+  state.resizeObserver = markRaw(resizeObserver);
+  state.resizeObserver.observe(wrap);
+};
+const beforeUnmount = ({ vm, state }) => () => {
+  const wrap = vm.$refs.wrapRef;
+  state.resizeObserver.unobserve(wrap);
+};
+export {
+  beforeUnmount,
+  cancel,
+  getSignatureImage,
+  initCanvas,
+  mounted,
+  redraw,
+  rewrite,
+  setCanvasBgColor,
+  setPlaceholder,
+  submit,
+  toggleFullscreen,
+  touchEnd,
+  touchMove,
+  touchStart,
+  tranformImage
+};

package/signature/vue.js

@@ -0,0 +1,88 @@
+import "../chunk-G2ADBYYC.js";
+import emulate from "../common/deps/touch-emulator";
+import { useRect as _useRect } from "../common/deps/useRect";
+import {
+  touchStart,
+  touchMove,
+  touchEnd,
+  setCanvasBgColor,
+  submit,
+  cancel,
+  rewrite,
+  mounted,
+  beforeUnmount,
+  setPlaceholder,
+  toggleFullscreen,
+  initCanvas,
+  tranformImage,
+  redraw,
+  getSignatureImage
+} from "./index";
+emulate();
+const api = [
+  "state",
+  "touchStart",
+  "touchMove",
+  "touchEnd",
+  "rewrite",
+  "submit",
+  "toggleFullscreen",
+  "initCanvas",
+  "cancel",
+  "tranformImage",
+  "redraw",
+  "getSignatureImage"
+];
+const renderless = (props, { unref, reactive, onMounted, onBeforeUnmount, watch, markRaw }, { emit, vm, nextTick, t, useBreakpoint }, { Modal }) => {
+  const { current } = useBreakpoint();
+  const state = reactive({
+    width: 0,
+    height: 0,
+    ctx: null,
+    isBeginWrite: false,
+    isFullscreen: false,
+    current,
+    canvasRect: null,
+    isDrawing: false,
+    paths: markRaw([]),
+    resizeObserver: null,
+    value: props.value,
+    lastRedrawDate: 0
+  });
+  watch(
+    () => props.value,
+    (newValue) => {
+      if (newValue) {
+        state.value = newValue;
+      }
+    }
+  );
+  const useRect = _useRect(unref);
+  const api2 = {
+    state,
+    touchMove: touchMove({ emit, state }),
+    touchEnd: touchEnd({ emit, state }),
+    setCanvasBgColor: setCanvasBgColor({ props, state }),
+    setPlaceholder: setPlaceholder({ props, state }),
+    getSignatureImage: getSignatureImage({ props, vm, Modal, t })
+  };
+  Object.assign(api2, {
+    touchStart: touchStart({ emit, props, state, vm, api: api2, useRect }),
+    rewrite: rewrite({ api: api2, emit, state }),
+    mounted: mounted({ state, api: api2, vm, nextTick, markRaw }),
+    onBeforeUnmount: beforeUnmount({ state, vm }),
+    initCanvas: initCanvas({ props, state, vm }),
+    toggleFullscreen: toggleFullscreen({ api: api2, nextTick, state }),
+    cancel: cancel({ api: api2, emit }),
+    redraw: redraw({ props, state, nextTick }),
+    tranformImage: tranformImage({ api: api2, vm, props, nextTick }),
+    submit: submit({ emit, api: api2 })
+  });
+  onMounted(() => api2.mounted());
+  onBeforeUnmount(() => api2.onBeforeUnmount());
+  return api2;
+};
+export {
+  api,
+  renderless
+};

package/skeleton/index.js

@@ -0,0 +1,14 @@
+import "../chunk-G2ADBYYC.js";
+import { isNumber, isNull } from "../common/type";
+const toPxStyle = (value) => {
+  if (isNull(value)) {
+    return void 0;
+  }
+  if (isNumber(value)) {
+    return `${value}px`;
+  }
+  return String(value);
+};
+export {
+  toPxStyle
+};

package/skeleton/vue.js

@@ -0,0 +1,15 @@
+import "../chunk-G2ADBYYC.js";
+import { toPxStyle } from "./index";
+const api = ["toPxStyle"];
+const renderless = (props, { toRefs, provide }) => {
+  const { active } = toRefs(props);
+  provide("active", active);
+  const api2 = {
+    toPxStyle
+  };
+  return api2;
+};
+export {
+  api,
+  renderless
+};

package/skeleton-item/vue.js

@@ -0,0 +1,15 @@
+import "../chunk-G2ADBYYC.js";
+const api = ["state"];
+const renderless = (props, { reactive, inject }) => {
+  const state = reactive({
+    isActive: inject("active", false)
+  });
+  const api2 = {
+    state
+  };
+  return api2;
+};
+export {
+  api,
+  renderless
+};