@opentiny/vue-renderless 3.6.7 → 3.8.0

package/select-mobile/index.js

@@ -0,0 +1,111 @@
+import "../chunk-PKUHTIDK.js";
+const hide = ({ state, emit }) => () => {
+  state.search.show = false;
+  emit("update:visible", false);
+  emit("close", false);
+};
+const watchVisible = ({ emit, state, props, api }) => (bool) => {
+  const { multiple, modelValue } = props;
+  if (bool && multiple) {
+    api.watchModelValue(modelValue);
+  }
+  setTimeout(() => {
+    state.toggle = bool;
+  }, 0);
+  emit("update:visible", bool);
+};
+const watchModelValue = ({ props, state, emit }) => (value) => {
+  const { multiple, menus, valueField, textField, textSplit } = props;
+  if (multiple) {
+    const ids = menus.map((option) => option[valueField]);
+    state.checkList = (value || []).map((id) => {
+      return ids.indexOf(id) > -1 ? menus[ids.indexOf(id)] : { [valueField]: id, [textField]: id };
+    });
+  }
+  const text = multiple ? state.checkList.map((item) => item[textField]) : menus.filter((item) => item[valueField] === value).map((item) => item[textField]);
+  emit("update:text", text.join(textSplit));
+};
+const includeOptionIndex = (props) => (list, option) => {
+  const { valueField } = props;
+  let index = -1;
+  list.some((item, i) => {
+    const isEqual = item[valueField] === option[valueField];
+    isEqual && (index = i);
+    return isEqual;
+  });
+  return index;
+};
+const selectOption = ({ emit, state, props, api }) => (option) => {
+  const { valueField, multiple } = props;
+  if (multiple) {
+    const index = api.includeOptionIndex(state.checkList, option);
+    index > -1 ? state.checkList.splice(index, 1) : state.checkList.push(option);
+  } else {
+    emit("update:visible", false);
+    emit("update:modelValue", option[valueField]);
+  }
+  emit("click", option);
+};
+const confirm = ({ emit, state, props, api }) => () => {
+  if (state.search.show) {
+    api.searchBoxToggle(false);
+  } else {
+    emit("confirm", state);
+    emit("update:visible", false);
+    props.multiple && emit("update:modelValue", state.checkIds);
+  }
+};
+const searchMethod = ({ state, props }) => () => {
+  const { searchConfig, textField } = props;
+  const { input, options } = state.search;
+  let list;
+  if (searchConfig && searchConfig.searchMethod) {
+    list = searchConfig.searchMethod({ input, options }) || [];
+  } else {
+    list = options.filter((item) => item[textField].indexOf(input) > -1);
+  }
+  if (list.then === "function") {
+    list.then((data) => state.search.filterOptions = data);
+  } else {
+    state.search.filterOptions = list;
+  }
+};
+const searchBoxToggle = ({ state, props, api }) => (bool) => {
+  const { menus, searchConfig } = props;
+  state.search.show = bool;
+  state.search.input = "";
+  if (bool) {
+    state.search.options = !searchConfig.options || !searchConfig.options.length ? menus : searchConfig.options;
+    api.searchMethod();
+  }
+};
+const allCheckHandler = ({ state, props }) => () => {
+  if (state.checkList.length === props.menus.length) {
+    state.checkList = [];
+  } else {
+    state.checkList = props.menus.slice();
+  }
+};
+const searchSelectHandler = ({ state, emit, api, props }) => (option) => {
+  const { valueField, multiple } = props;
+  if (multiple) {
+    const index = api.includeOptionIndex(state.checkList, option);
+    index > -1 ? state.checkList.splice(index, 1) : state.checkList.push(option);
+  } else {
+    api.searchBoxToggle(false);
+    emit("update:modelValue", option[valueField]);
+  }
+  emit("search-click", option);
+};
+export {
+  allCheckHandler,
+  confirm,
+  hide,
+  includeOptionIndex,
+  searchBoxToggle,
+  searchMethod,
+  searchSelectHandler,
+  selectOption,
+  watchModelValue,
+  watchVisible
+};

package/select-mobile/vue.js

@@ -0,0 +1,58 @@
+import "../chunk-PKUHTIDK.js";
+import {
+  hide,
+  watchVisible,
+  selectOption,
+  confirm,
+  searchMethod,
+  searchSelectHandler,
+  searchBoxToggle,
+  watchModelValue,
+  includeOptionIndex,
+  allCheckHandler
+} from "./index";
+const api = [
+  "state",
+  "hide",
+  "selectOption",
+  "confirm",
+  "searchMethod",
+  "searchSelectHandler",
+  "searchBoxToggle",
+  "includeOptionIndex",
+  "allCheckHandler"
+];
+const renderless = (props, { computed, reactive, watch }, { emit }) => {
+  const api2 = {};
+  const state = reactive({
+    toggle: false,
+    checkList: [],
+    search: {
+      show: false,
+      input: "",
+      options: [],
+      filterOptions: []
+    },
+    checkIds: computed(() => state.checkList.map((option) => option[props.valueField]))
+  });
+  Object.assign(api2, {
+    state,
+    confirm: confirm({ state, emit, props, api: api2 }),
+    selectOption: selectOption({ state, emit, props, api: api2 }),
+    hide: hide({ state, emit }),
+    watchVisible: watchVisible({ emit, state, props, api: api2 }),
+    watchModelValue: watchModelValue({ props, state, emit }),
+    searchMethod: searchMethod({ state, props, api: api2 }),
+    searchSelectHandler: searchSelectHandler({ state, emit, api: api2, props }),
+    searchBoxToggle: searchBoxToggle({ state, props, api: api2 }),
+    allCheckHandler: allCheckHandler({ state, props }),
+    includeOptionIndex: includeOptionIndex(props)
+  });
+  watch(() => props.visible, api2.watchVisible);
+  watch(() => props.modelValue, api2.watchModelValue, { immediate: true });
+  return api2;
+};
+export {
+  api,
+  renderless
+};

package/select-view/index.js

@@ -0,0 +1,170 @@
+import "../chunk-PKUHTIDK.js";
+const close = ({ state, emit, vm }) => () => {
+  state.search.input = "";
+  vm.$refs.actionSheet.close();
+  emit("close", false);
+};
+const watchVisible = ({ emit, state, props, api }) => (bool) => {
+  const { multiple, modelValue, menus } = props;
+  if (bool) {
+    if (!state.lazy) {
+      state.search.options = menus;
+    }
+    api.searchMethod();
+    multiple && api.watchModelValue(modelValue);
+  }
+  emit("update:visible", bool);
+  setTimeout(() => {
+    state.toggle = bool;
+  }, 0);
+};
+const watchModelValue = ({ props, state, emit }) => (value) => {
+  const { multiple, menus, valueField, textField, textSplit } = props;
+  if (multiple) {
+    const ids = menus.map((option) => option[valueField]);
+    state.checkList = (value || []).map((id) => {
+      return ids.indexOf(id) > -1 ? menus[ids.indexOf(id)] : { [valueField]: id, [textField]: id };
+    });
+  }
+  const textStr = multiple ? state.checkList.map((data) => data[textField]) : menus.filter((data) => data[valueField] === value).map((data) => data[textField]);
+  emit("update:text", textStr.join(textSplit));
+};
+const includeOptionIndex = (props) => (list, option) => {
+  const { valueField } = props;
+  let OptionIndex = -1;
+  list.some((data, i) => {
+    const isEqual = data[valueField] === option[valueField];
+    isEqual && (OptionIndex = i);
+    return isEqual;
+  });
+  return OptionIndex;
+};
+const selectOption = ({ emit, state, props, api }) => (data) => {
+  const { valueField, multiple } = props;
+  if (multiple) {
+    const index = api.includeOptionIndex(state.checkList, data);
+    index > -1 ? state.checkList.splice(index, 1) : state.checkList.push(data);
+  } else {
+    emit("update:visible", false);
+    emit("update:modelValue", data[valueField]);
+  }
+  emit("click", data);
+};
+const confirm = ({ state, props, api, emit }) => () => {
+  const { search, checkIds } = state;
+  if (!search.show) {
+    emit("confirm", state);
+    emit("update:visible", false);
+    props.multiple && emit("update:modelValue", checkIds);
+  } else {
+    api.searchBoxToggle(false);
+  }
+};
+const searchMethod = ({ state, props }) => () => {
+  const { input, options } = state.search;
+  const { searchConfig, textField, valueField, topConfig } = props;
+  const topOptionIds = (topConfig.options || []).map((item) => item[valueField]);
+  let list;
+  if (searchConfig && searchConfig.searchMethod) {
+    list = searchConfig.searchMethod({ input, options }) || [];
+  } else {
+    list = options.filter(
+      (item) => item[textField].indexOf(input) > -1 && topOptionIds.indexOf(item[valueField]) === -1
+    );
+  }
+  if (typeof list.then === "function") {
+    list.then((data) => state.search.filterOptions = data);
+  } else {
+    state.search.filterOptions = list;
+  }
+};
+const searchBoxToggle = ({ state, props, api }) => (bool) => {
+  const { menus } = props;
+  state.search.input = "";
+  if (bool) {
+    if (!state.lazy) {
+      state.search.options = menus;
+    }
+    api.searchMethod();
+  } else {
+    api.close();
+  }
+};
+const allCheckHandler = ({ state, props }) => () => {
+  state.checkList = state.checkList.length === props.menus.length ? [] : props.menus.slice();
+};
+const searchSelectHandler = ({ state, emit, api, props }) => (option) => {
+  const { valueField, multiple, requiredSelectedList } = props;
+  if (multiple) {
+    const index = api.includeOptionIndex(state.checkList, option);
+    if (index > -1 && requiredSelectedList.indexOf(option[valueField]) !== -1) {
+      emit("search-click", option, false);
+      return;
+    }
+    index > -1 ? state.checkList.splice(index, 1) : state.checkList.push(option);
+  } else {
+    api.searchBoxToggle(false);
+    emit("update:modelValue", option[valueField]);
+  }
+  emit("search-click", option, true);
+};
+const toggleCheckList = ({ state }) => (value) => {
+  if (!state.checkList.length) {
+    return;
+  }
+  state.selected.show = value;
+  if (value) {
+    state.selected.options = state.checkList.slice();
+  } else {
+    state.checkList = state.selected.options.slice();
+  }
+};
+const clean = ({ state, props }) => () => {
+  const { valueField, requiredSelectedList } = props;
+  state.selected.options = state.selected.options.filter(
+    (item) => requiredSelectedList.indexOf(item[valueField]) !== -1
+  );
+};
+const selectedOptionHandler = ({ state, api }) => (option) => {
+  const index = api.includeOptionIndex(state.selected.options, option);
+  if (index > -1) {
+    state.selected.options.splice(index, 1);
+  }
+};
+const load = ({ state, props, api }) => () => {
+  const { infiniteScroll } = props;
+  const { search } = state;
+  if (!infiniteScroll.load || state.search.loading) {
+    return;
+  }
+  const list = infiniteScroll.load({ input: search.input, options: search.options });
+  if (!list) {
+    return;
+  } else if (typeof list.then === "function") {
+    state.search.loading = true;
+    list.then((data) => {
+      state.search.loading = false;
+      state.search.options = search.options.concat(data);
+      api.searchMethod();
+    });
+  } else {
+    state.search.options = search.options.concat(list);
+    api.searchMethod();
+  }
+};
+export {
+  allCheckHandler,
+  clean,
+  close,
+  confirm,
+  includeOptionIndex,
+  load,
+  searchBoxToggle,
+  searchMethod,
+  searchSelectHandler,
+  selectOption,
+  selectedOptionHandler,
+  toggleCheckList,
+  watchModelValue,
+  watchVisible
+};

package/select-view/vue.js

@@ -0,0 +1,82 @@
+import "../chunk-PKUHTIDK.js";
+import {
+  close,
+  watchVisible,
+  selectOption,
+  confirm,
+  searchMethod,
+  searchSelectHandler,
+  searchBoxToggle,
+  watchModelValue,
+  includeOptionIndex,
+  allCheckHandler,
+  toggleCheckList,
+  clean,
+  load,
+  selectedOptionHandler
+} from "./index";
+const api = [
+  "state",
+  "allCheckHandler",
+  "close",
+  "selectOption",
+  "confirm",
+  "searchMethod",
+  "searchSelectHandler",
+  "searchBoxToggle",
+  "includeOptionIndex",
+  "clean",
+  "load",
+  "selectedOptionHandler",
+  "toggleCheckList"
+];
+const renderless = (props, { computed, reactive, watch }, { emit, vm }) => {
+  const api2 = {};
+  const state = reactive({
+    toggle: false,
+    checkList: [],
+    selected: {
+      show: false,
+      options: []
+    },
+    search: {
+      filterOptions: [],
+      input: "",
+      options: props.menus || [],
+      loading: false
+    },
+    checkIds: computed(() => state.checkList.map((option) => option[props.valueField])),
+    lazy: computed(() => !props.infiniteScroll.disabled && typeof props.infiniteScroll.load === "function")
+  });
+  Object.assign(api2, {
+    state,
+    confirm: confirm({ state, emit, props, api: api2 }),
+    selectOption: selectOption({ state, emit, props, api: api2 }),
+    close: close({ state, emit, vm }),
+    watchVisible: watchVisible({ emit, state, props, api: api2 }),
+    watchModelValue: watchModelValue({ props, state, emit }),
+    searchMethod: searchMethod({ state, props, api: api2 }),
+    searchSelectHandler: searchSelectHandler({ state, emit, api: api2, props }),
+    searchBoxToggle: searchBoxToggle({ state, props, api: api2 }),
+    allCheckHandler: allCheckHandler({ state, props }),
+    toggleCheckList: toggleCheckList({ state }),
+    clean: clean({ state, props }),
+    load: load({ state, props, api: api2 }),
+    selectedOptionHandler: selectedOptionHandler({ state, api: api2 }),
+    includeOptionIndex: includeOptionIndex(props)
+  });
+  watch(() => props.visible, api2.watchVisible, { immediate: true });
+  watch(() => props.modelValue, api2.watchModelValue, { immediate: true });
+  watch(
+    () => props.menus,
+    (value) => {
+      state.search.options = value;
+      api2.searchMethod();
+    }
+  );
+  return api2;
+};
+export {
+  api,
+  renderless
+};

package/selected-box/index.js

@@ -0,0 +1,216 @@
+import "../chunk-PKUHTIDK.js";
+import { omitText } from "../common/string";
+const normal = (n) => n < 0 ? 0 : n;
+const init = ({ props, state }) => () => {
+  const { inverse, total, select } = props;
+  state.inverse = !!inverse;
+  state.total = state.inverse ? normal(total - select.length) : select.length;
+  state.select = select.slice(0);
+};
+const submitSelection = ({ api, state }) => (option, oper = "add") => {
+  const { inverse, total, select } = state;
+  if (oper === "add") {
+    const index = select.findIndex((opt) => api.keyOption(opt) === api.keyOption(option));
+    if (index === -1) {
+      state.select = [...select, option];
+      state.total = total + (inverse ? -1 : 1);
+      api.emitChange();
+    }
+  } else if (oper === "remove") {
+    const index = select.findIndex((opt) => api.keyOption(opt) === api.keyOption(option));
+    if (index > -1) {
+      state.select = [...select.slice(0, index), ...select.slice(index + 1)];
+      state.total = total + (inverse ? 1 : -1);
+      api.emitChange();
+    }
+  }
+};
+const validArray = (arr) => Array.isArray(arr) && arr.length;
+const arrayMinus = (api) => (arr1, arr2) => {
+  let res = [];
+  if (validArray(arr1) && validArray(arr2)) {
+    arr1.forEach((item1) => {
+      if (arr2.findIndex((item2) => api.keyOption(item1) === api.keyOption(item2)) === -1) {
+        res.push(item1);
+      }
+    });
+  } else if (validArray(arr1) && !validArray(arr2)) {
+    res = [...arr1];
+  }
+  return res;
+};
+const batchSubmit = ({ api, state }) => (options, oper = "add") => {
+  const { inverse, total, select } = state;
+  if (oper === "add") {
+    const toPlus = api.arrayMinus(options, select);
+    if (validArray(toPlus)) {
+      state.select = [...select, ...toPlus];
+      state.total = total + (inverse ? -1 : 1) * toPlus.length;
+      api.emitChange();
+    }
+  } else if (oper === "remove") {
+    const toMinus = api.arrayMinus(select, api.arrayMinus(select, options));
+    if (validArray(toMinus)) {
+      let tmpSelect = select;
+      toMinus.map((opt1) => select.findIndex((opt2) => api.keyOption(opt1) === api.keyOption(opt2))).sort((a, b) => a - b).reverse().forEach((i) => tmpSelect = [...tmpSelect.slice(0, i), ...tmpSelect.slice(i + 1)]);
+      state.select = [...tmpSelect];
+      state.total = total + (inverse ? 1 : -1) * toMinus.length;
+      api.emitChange();
+    }
+  }
+};
+const coverSubmit = ({ api, props, state }) => (options) => {
+  const { total } = props;
+  const { inverse, select } = state;
+  if (Array.isArray(options)) {
+    const t0 = api.arrayMinus(select, api.arrayMinus(select, options));
+    const t1 = api.arrayMinus(options, select);
+    state.select = [...t0, ...t1];
+    state.total = inverse ? normal(total - options.length) : options.length;
+    api.emitChange();
+  }
+};
+const getSelection = ({ api, state }) => () => {
+  const { inverse, select } = state;
+  return { flag: !inverse, selection: select, state: api.getParams() };
+};
+const i18nSelected = ({ state, t }) => () => {
+  const { inverse, total } = state;
+  const template = inverse ? t("ui.selectedBox.allSelect") : t("ui.selectedBox.select");
+  return template.replace("%s", total);
+};
+const computedShowAuxi = (props) => () => {
+  const { config } = props;
+  const { showField } = config || {};
+  return Array.isArray(showField) && showField.length > 1;
+};
+const textPrimary = (props) => (option) => {
+  const { config } = props;
+  const { showField } = config || {};
+  let primaryText = "";
+  if (typeof showField === "string") {
+    primaryText = option[showField];
+  } else if (Array.isArray(showField) && typeof showField[0] === "string") {
+    primaryText = option[showField[0]];
+  }
+  return primaryText;
+};
+const textAuxi = (props) => (option) => {
+  const { config } = props;
+  const { showField } = config || {};
+  let auxiText = "";
+  if (Array.isArray(showField) && typeof showField[1] === "string") {
+    auxiText = option[showField[1]];
+  }
+  return auxiText;
+};
+const handleMouseenter = ({ state, vm }) => (e) => {
+  const dom = e.target;
+  const text = dom.textContent;
+  const font = window.getComputedStyle(dom).font;
+  const rect = dom.getBoundingClientRect();
+  const res = omitText(text, font, rect.width);
+  const popover = vm.$refs.popover;
+  if (res.o) {
+    popover.state.referenceElm = dom;
+    popover.state.popperElm && (popover.state.popperElm.style.display = "none");
+    popover.doDestroy();
+    state.popoverContent = text;
+    state.popoverVisible = true;
+    setTimeout(popover.updatePopper, 20);
+  }
+};
+const handleMouseleave = (state) => () => {
+  state.popoverContent = "";
+  state.popoverVisible = false;
+};
+const handleClear = ({ api, emit, props, state }) => () => {
+  const { total } = props;
+  const { inverse, select } = state;
+  if (Array.isArray(select) && select.length) {
+    state.select = [];
+    state.total = inverse ? normal(total) : 0;
+    api.emitChange();
+    emit("clear", { state: api.getParams() });
+  }
+};
+const handleDelete = ({ api, emit, state }) => (option) => {
+  const { inverse, total, select } = state;
+  const index = select.findIndex((opt) => api.keyOption(opt) === api.keyOption(option));
+  if (index > -1) {
+    state.select = [...select.slice(0, index), ...select.slice(index + 1)];
+    state.total = total + (inverse ? 1 : -1);
+    api.emitChange();
+    emit("delete", { option, state: api.getParams() });
+  }
+};
+const getParams = (state) => () => {
+  const { inverse, total, select } = state;
+  return { inverse, total, select };
+};
+const emitChange = ({ api, emit }) => () => emit("change", api.getSelection());
+const keyOption = ({ api, props }) => (option) => {
+  const { config } = props;
+  const { pkField = "id" } = config || {};
+  return api.keyType(option[pkField]);
+};
+const keyType = (props) => (keyValue) => {
+  const { config } = props;
+  const { pkFieldType = "number" } = config || {};
+  const typeFn = pkFieldType === "number" ? Number : String;
+  return typeFn(keyValue);
+};
+const initDrag = ({ api, emit, markRaw, props, state, vm }) => () => {
+  const { config } = props;
+  const { plugin } = config || {};
+  const { optionSelector, dragAnimation } = state;
+  const handleUpdate = (e) => {
+    const { from, to, oldIndex, newIndex } = e;
+    const { select } = state;
+    if (from === to && oldIndex !== newIndex) {
+      const optDoms = Array.from(vm.$el.querySelectorAll(optionSelector));
+      const slct = optDoms.map((optDom) => select.find((opt) => api.keyOption(opt) === api.keyType(optDom.dataset.key)));
+      state.select = slct;
+      state.refresh += 1;
+      api.emitChange();
+      emit("drag", { state: api.getParams() });
+    }
+  };
+  if (!plugin)
+    return;
+  const dragInstance = plugin.create(vm.$refs.list, {
+    animation: dragAnimation,
+    draggable: optionSelector,
+    onUpdate: handleUpdate
+  });
+  state.dragInstance = markRaw(dragInstance);
+};
+const unmount = (state) => () => {
+  const { dragInstance } = state;
+  if (dragInstance && typeof dragInstance.destroy === "function") {
+    dragInstance.destroy();
+    state.dragInstance = null;
+  }
+};
+export {
+  arrayMinus,
+  batchSubmit,
+  computedShowAuxi,
+  coverSubmit,
+  emitChange,
+  getParams,
+  getSelection,
+  handleClear,
+  handleDelete,
+  handleMouseenter,
+  handleMouseleave,
+  i18nSelected,
+  init,
+  initDrag,
+  keyOption,
+  keyType,
+  submitSelection,
+  textAuxi,
+  textPrimary,
+  unmount
+};