@opentiny/vue-renderless 3.14.1 → 3.15.0

package/input/vue.js

@@ -95,8 +95,8 @@ const initState = ({
     checkedLabel: "",
     enteredTextarea: false,
     sheetvalue: props.modelValue,
-    inputSize: computed(() => props.size || state.formItemSize),
-    inputSizeMf: computed(() => props.size || (parent.tinyForm || {}).size),
+    inputSize: computed(() => props.size || state.formItemSize || (parent.tinyForm || {}).size),
+    inputSizeMf: computed(() => props.size || state.formItemSize || (parent.tinyForm || {}).size),
     showClear: computed(
       () => props.clearable && !state.inputDisabled && !props.readonly && state.nativeInputValue && (state.focused || state.hovering)
     ),
@@ -179,7 +179,9 @@ const mergeApi = ({
   nextTick,
   parent,
   state,
-  vm
+  vm,
+  mode,
+  constants
 }) => {
   const { storageData, isMemoryStorage, addMemory, searchMemory, selectedMemory } = storages;
   return Object.assign(api2, {
@@ -208,7 +210,9 @@ const mergeApi = ({
       api: api2,
       hiddenTextarea: null,
       props,
-      state
+      state,
+      mode,
+      constants
     }),
     setNativeInputValue: setNativeInputValue({ api: api2, state }),
     handleCompositionEnd: handleCompositionEnd({ api: api2, state }),
@@ -300,7 +304,7 @@ const renderless = (props, { computed, onMounted, onUpdated, reactive, toRefs, w
   initApi({ api: api2, state, dispatch, broadcast, emit, refs, props, CLASS_PREFIX, parent, vm, nextTick });
   const storages = useStorageBox({ api: api2, props, reactive, toRefs });
   parent.tinyForm = parent.tinyForm || inject("form", null);
-  mergeApi({ api: api2, storages, componentName, emit, eventName, props, state, nextTick, parent, vm });
+  mergeApi({ api: api2, storages, componentName, emit, eventName, props, state, nextTick, parent, vm, mode, constants });
   initWatch({ watch, state, api: api2, props, nextTick, emit, componentName, eventName });
   onMounted(() => {
     api2.setNativeInputValue();

package/modal/index.js

@@ -234,7 +234,7 @@ const handleGlobalKeydownEvent = (api) => (event) => {
   }
 };
 const handleHashChange = (api) => () => {
-  api.close("close");
+  api.close("hide");
 };
 const getBox = ({ vm }) => () => vm.$refs.modalBox;
 const maximize = ({

package/numeric/index.js

@@ -16,14 +16,11 @@ const initService = (service) => {
   };
 };
 const getDecimal = (props) => (value) => getMiniDecimal(value, props.plugin);
-const watchValue = ({ api, props, state, nextTick }) => (value) => {
+const watchValue = ({ api, props, state }) => (value) => {
   if (value === state.currentValue) {
     return;
   }
   api.setCurrentValue(value, props.changeCompat);
-  nextTick(() => {
-    api.dispatchDisplayedValue();
-  });
 };
 const toPrecision = (state) => ({ num, precision }) => {
   if (precision === void 0) {
@@ -132,10 +129,10 @@ const focus = (vm) => () => {
   vm.$refs.input.focus();
 };
 const getEmitValue = (args) => {
-  let { newVal, emitValue, allowEmpty, defaultVal, bigNew, oldVal } = args;
+  let { newVal, emitValue, allowEmpty, defaultVal, bigNew, oldVal, emptyValue } = args;
   let { max, min, api, props, format, plugin, stringMode } = args;
   if (!newVal && newVal !== 0) {
-    emitValue = allowEmpty ? void 0 : defaultVal;
+    emitValue = allowEmpty ? emptyValue : defaultVal;
   } else if (bigNew.isNaN()) {
     emitValue = oldVal;
   } else {
@@ -166,7 +163,7 @@ const setCurrentValue = ({
   props,
   state
 }) => (newVal, emitChangeFlag = true) => {
-  const { max, min, allowEmpty, validateEvent, stringMode, plugin } = props;
+  const { max, min, allowEmpty, validateEvent, stringMode, plugin, emptyValue } = props;
   const { format } = state;
   const oldVal = state.currentValue;
   const bigNew = api.getDecimal(newVal);
@@ -176,7 +173,7 @@ const setCurrentValue = ({
     state.userInput = state.currentValue;
     return;
   }
-  let args = { newVal, emitValue, allowEmpty, defaultVal, bigNew, oldVal };
+  let args = { newVal, emitValue, allowEmpty, defaultVal, bigNew, oldVal, emptyValue };
   Object.assign(args, { max, min, api, props, format, plugin, stringMode });
   let ret = getEmitValue(args);
   newVal = ret.newVal;
@@ -321,14 +318,6 @@ const getUnitPrecision = ({
   rounding = isNumber(format.rounding) ? format.rounding : serFra.rounding;
   return __spreadValues(__spreadValues(__spreadProps(__spreadValues({}, defaultFmt), { fraction, rounding }), serFmt), format);
 };
-const dispatchDisplayedValue = ({ state, api, dispatch }) => () => {
-  if (state.isDisplayOnly) {
-    dispatch("FormItem", "displayed-value-changed", { type: "numeric", val: api.getDisplayedValue() });
-  }
-};
-const getDisplayedValue = ({ state, props }) => () => {
-  return state.displayValue || state.displayValue === 0 ? state.displayValue + " " + (props.unit || "") : "-";
-};
 const getDisplayOnlyText = ({ parent, state, props }) => () => {
   const showEmptyValue = props.showEmptyValue || (parent.tinyForm || {}).showEmptyValue;
   if (showEmptyValue) {
@@ -356,13 +345,11 @@ const handleChange = ({ state, emit }) => () => {
 };
 export {
   decrease,
-  dispatchDisplayedValue,
   displayValue,
   filterValue,
   focus,
   getDecimal,
   getDisplayOnlyText,
-  getDisplayedValue,
   getNumPecision,
   getPrecision,
   getUnitPrecision,

package/numeric/vue.js

@@ -23,8 +23,6 @@ import {
   getDecimal,
   unmounted,
   initService,
-  dispatchDisplayedValue,
-  getDisplayedValue,
   getDisplayOnlyText,
   filterValue,
   handleClear,
@@ -112,10 +110,8 @@ const initApi = ({
     handleInputChange: handleInputChange({ api: api2, state, props }),
     mouseEvent: mouseEvent({ api: api2, props, state }),
     handleBlur: handleBlur({ constants, dispatch, emit, props, state, api: api2 }),
-    watchValue: watchValue({ api: api2, props, state, nextTick }),
+    watchValue: watchValue({ api: api2, props, state }),
     setCurrentValue: setCurrentValue({ api: api2, constants, dispatch, emit, props, state }),
-    dispatchDisplayedValue: dispatchDisplayedValue({ api: api2, state, dispatch }),
-    getDisplayedValue: getDisplayedValue({ state, props }),
     getDisplayOnlyText: getDisplayOnlyText({ parent, props, state }),
     filterValue: filterValue({ state }),
     handleClear: handleClear({ state, emit }),
@@ -124,7 +120,6 @@ const initApi = ({
   api2.getDecimal(0);
 };
 const initWatch = ({
-  state,
   watch,
   props,
   api: api2
@@ -139,7 +134,6 @@ const initWatch = ({
     { immediate: true }
   );
   watch(() => props.modelValue, api2.watchValue, { immediate: true });
-  watch(() => state.isDisplayOnly, api2.dispatchDisplayedValue);
 };
 const renderless = (props, { computed, onMounted, onUpdated, onUnmounted, reactive, watch, inject }, { parent, emit, vm, constants, dispatch, service, nextTick }) => {
   const api2 = {};
@@ -147,11 +141,8 @@ const renderless = (props, { computed, onMounted, onUpdated, onUnmounted, reacti
   const state = initState({ reactive, computed, props, api: api2, constants, $service, parent });
   parent.tinyForm = parent.tinyForm || inject("form", null);
   initApi({ api: api2, props, state, parent, vm, emit, dispatch, constants, nextTick });
-  initWatch({ state, watch, props, api: api2 });
-  onMounted(() => {
-    api2.dispatchDisplayedValue();
-    api2.mounted();
-  });
+  initWatch({ watch, props, api: api2 });
+  onMounted(api2.mounted);
   onUpdated(api2.updated);
   onUnmounted(api2.unmounted);
   return api2;

package/option-group/index.js

@@ -10,6 +10,19 @@ const queryChange = ({ select, state, vm }) => () => {
     }
   }
 };
+const observeCallback = ({ state, api }) => (mutationsList) => {
+  for (let mutation of mutationsList) {
+    if (mutation.type === "childList") {
+      if (state.timer) {
+        clearTimeout(state.timer);
+      }
+      state.timer = setTimeout(() => {
+        api.queryChange();
+      }, 100);
+    }
+  }
+};
 export {
+  observeCallback,
   queryChange
 };

package/option-group/vue.js

@@ -1,16 +1,19 @@
 import "../chunk-G2ADBYYC.js";
-import { queryChange } from "./index";
+import { queryChange, observeCallback } from "./index";
 const api = ["state", "queryChange"];
-const renderless = (props, { onMounted, reactive, watch, inject }, { broadcast, vm }) => {
+const renderless = (props, { onMounted, onBeforeUnmount, reactive, watch, inject }, { broadcast, vm }) => {
   const select = inject("select");
   const constants = select._constants;
   const state = reactive({
-    visible: true
+    visible: true,
+    timer: null
   });
-  const api2 = {
+  const api2 = {};
+  Object.assign(api2, {
     state,
-    queryChange: queryChange({ select, state, vm })
-  };
+    queryChange: queryChange({ select, state, vm }),
+    observeCallback: observeCallback({ state, api: api2 })
+  });
   watch(
     () => props.disabled,
     (value) => {
@@ -19,11 +22,21 @@ const renderless = (props, { onMounted, reactive, watch, inject }, { broadcast,
     { immediate: true }
   );
   onMounted(() => {
+    if (select.filterable) {
+      const config = { attributes: false, childList: true, subtree: false };
+      api2.observer = new MutationObserver(api2.observeCallback);
+      if (vm.$refs.selectGroup) {
+        api2.observer.observe(vm.$refs.selectGroup, config);
+      }
+    }
     if (props.disabled) {
       broadcast(constants.COMPONENT_NAME.Option, constants.EVENT_NAME.handleGroupDisabled, props.disabled);
     }
     select.state.selectEmitter.on(constants.EVENT_NAME.queryChange, api2.queryChange);
   });
+  onBeforeUnmount(() => {
+    api2.observer && api2.observer.disconnect();
+  });
   return api2;
 };
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-renderless",
-  "version": "3.14.1",
+  "version": "3.15.0",
   "description": "An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.",
   "homepage": "https://opentiny.design/tiny-vue",
   "keywords": [
@@ -24,12 +24,6 @@
     "url": "https://github.com/opentiny/tiny-vue/issues"
   },
   "sideEffects": false,
-  "scripts": {
-    "build": "tsup",
-    "build:fast": "npm run build && npm run release",
-    "postversion": "pnpm build",
-    "release": "esno ./scripts/postbuild.ts && shx cp README.md dist"
-  },
   "dependencies": {
     "xss": "1.0.11",
     "color": "4.2.3"
@@ -37,5 +31,11 @@
   "devDependencies": {
     "esno": "^0.16.3",
     "tsup": "7.2.0"
+  },
+  "scripts": {
+    "build": "tsup",
+    "build:fast": "npm run build && npm run release",
+    "postversion": "pnpm build",
+    "release": "esno ./scripts/postbuild.ts && shx cp README.md dist"
   }
 }

package/picker/index.js

@@ -10,7 +10,16 @@ import { formatDate, parseDate, isDateObject, getWeekNumber, prevDate, nextDate
 import { extend } from "../common/object";
 import globalTimezone from "./timezone";
 const iso8601Reg = /^\d{4}-\d{2}-\d{2}(.)\d{2}:\d{2}:\d{2}(.+)$/;
-const getPanel = ({ DatePanel, DateRangePanel, MonthRangePanel, YearRangePanel, TimePanel, TimeRangePanel, TimeSelect }) => (type) => {
+const getPanel = ({
+  DatePanel,
+  DateRangePanel,
+  MonthRangePanel,
+  YearRangePanel,
+  TimePanel,
+  TimeRangePanel,
+  QuarterPanel,
+  TimeSelect
+}) => (type) => {
   if (type === DATEPICKER.DateRange || type === DATEPICKER.DateTimeRange) {
     return DateRangePanel;
   } else if (type === DATEPICKER.MonthRange) {
@@ -23,14 +32,18 @@ const getPanel = ({ DatePanel, DateRangePanel, MonthRangePanel, YearRangePanel,
     return TimePanel;
   } else if (type === DATEPICKER.TimeSelect) {
     return TimeSelect;
+  } else if (type === DATEPICKER.Quarter) {
+    return QuarterPanel;
   }
   return DatePanel;
 };
-const watchMobileVisible = ({ api, props, state }) => ([dateMobileVisible, timeMobileVisible]) => {
+const watchMobileVisible = ({ api, props, state, nextTick }) => ([dateMobileVisible, timeMobileVisible]) => {
   if (dateMobileVisible || timeMobileVisible) {
     state.valueOnOpen = Array.isArray(props.modelValue) ? [...props.modelValue] : props.modelValue;
   } else {
-    api.emitChange(props.modelValue);
+    nextTick(() => {
+      api.emitChange(props.modelValue);
+    });
   }
 };
 const watchPickerVisible = ({ api, vm, dispatch, emit, props, state, nextTick }) => (value) => {
@@ -41,7 +54,9 @@ const watchPickerVisible = ({ api, vm, dispatch, emit, props, state, nextTick })
     state.valueOnOpen = Array.isArray(props.modelValue) ? [...props.modelValue] : props.modelValue;
   } else {
     api.hidePicker();
-    nextTick(() => api.emitChange(props.modelValue));
+    nextTick(() => {
+      api.emitChange(props.modelValue);
+    });
     state.userInput = null;
     if (props.validateEvent) {
       dispatch("FormItem", "form.blur");
@@ -132,7 +147,9 @@ const parsedValue = ({ api, props, state, t }) => () => {
           return isDate(item) ? formatDate(item, state.valueFormat, t) : item;
         });
       } else {
-        date = formatDate(date, state.valueFormat, t);
+        if (state.valueFormat !== DATEPICKER.TimesTamp) {
+          date = formatDate(date, state.valueFormat, t);
+        }
       }
     }
     const result = api.parseAsFormatAndType(date, state.valueFormat, state.type, props.rangeSeparator);
@@ -313,7 +330,11 @@ const typeValueResolveMap = ({ api, props, t }) => () => ({
   years: getDatesOfTypeValueResolveMap(api),
   yearrange: getDatesOfTypeValueResolveMap(api),
   number: getNumberOfTypeValueResolveMap(),
-  dates: getDatesOfTypeValueResolveMap(api)
+  dates: getDatesOfTypeValueResolveMap(api),
+  quarter: {
+    formatter: (value) => `${value.getFullYear()}-Q${DATEPICKER.MonthQuarterMap[value.getMonth()]}`,
+    parser: api.dateParser
+  }
 });
 const firstInputId = ({ props, state }) => () => {
   const obj = {};

package/picker/vue.js

@@ -189,7 +189,7 @@ const initApi = ({ api: api2, props, hooks, state, vnode, others, utils, parent
     displayValue: displayValue({ api: api2, props, state }),
     handlePick: handlePick({ api: api2, state }),
     watchPickerVisible: watchPickerVisible({ api: api2, vm, dispatch, emit, props, state, nextTick }),
-    watchMobileVisible: watchMobileVisible({ api: api2, props, state }),
+    watchMobileVisible: watchMobileVisible({ api: api2, props, state, nextTick }),
     formatToString: formatToString({ api: api2, state }),
     watchIsRange: watchIsRange({ api: api2, state, TimePanel, TimeRangePanel }),
     mountPicker: mountPicker({ api: api2, vm, props, state, updatePopper }),
@@ -198,7 +198,7 @@ const initApi = ({ api: api2, props, hooks, state, vnode, others, utils, parent
     computedTriggerClass: computedTriggerClass({ props, state }),
     computedHaveTrigger: computedHaveTrigger({ props }),
     setInputPaddingLeft: setInputPaddingLeft({ props, state, vm, nextTick }),
-    formatInputValue: formatInputValue({ props, state, api: api2 })
+    formatInputValue: formatInputValue({ props, state })
   });
   initApi2({ api: api2, props, state, t, parent });
   initMobileApi({ api: api2, props, state, t, parent });

package/popconfirm/index.js

@@ -24,8 +24,14 @@ const handleEmit = ({ state, emit, vm }) => (type) => {
     emit(type, state);
   }
 };
+const handleDocumentClick = ({ vm, api }) => (event) => {
+  if (vm.$refs.popover.handleDocumentClick(event)) {
+    api.hide();
+  }
+};
 export {
   confirm,
+  handleDocumentClick,
   handleEmit,
   hide,
   show

package/popconfirm/vue.js

@@ -1,7 +1,8 @@
 import "../chunk-G2ADBYYC.js";
-import { show, hide, confirm, handleEmit } from "./index";
+import { on, off } from "../common/deps/dom";
+import { show, hide, confirm, handleEmit, handleDocumentClick } from "./index";
 const api = ["state", "show", "hide", "confirm", "handleEmit"];
-const renderless = (props, { computed, reactive }, { emit, constants, designConfig, vm }) => {
+const renderless = (props, { computed, reactive, onMounted, onBeforeUnmount }, { emit, constants, designConfig, vm }) => {
   var _a;
   const api2 = {};
   const designIcon = (_a = designConfig == null ? void 0 : designConfig.icons) == null ? void 0 : _a[props.type];
@@ -17,7 +18,14 @@ const renderless = (props, { computed, reactive }, { emit, constants, designConf
     show: show({ state, emit, props }),
     hide: hide({ state, emit }),
     confirm: confirm({ state, api: api2 }),
-    handleEmit: handleEmit({ state, emit, vm })
+    handleEmit: handleEmit({ state, emit, vm }),
+    handleDocumentClick: handleDocumentClick({ api: api2, vm })
+  });
+  onMounted(() => {
+    props.closeOnClickOutside && on(document, "click", api2.handleDocumentClick);
+  });
+  onBeforeUnmount(() => {
+    props.closeOnClickOutside && off(document, "click", api2.handleDocumentClick);
   });
   return api2;
 };

package/popover/index.js

@@ -127,7 +127,10 @@ const handleDocumentClick = ({ vm, state }) => (event) => {
     target = state.webCompEventTarget;
   }
   if (!$el || !reference || $el.contains(target) || reference.contains(target) || !popperElm || popperElm.contains(target)) {
-    return;
+    return false;
+  } else {
+    state.showPopper = false;
+    return true;
   }
   state.showPopper = false;
 };

package/popover/vue.js

@@ -29,7 +29,8 @@ const api = [
   "doShow",
   "doClose",
   "doDestroy",
-  "handleItemClick"
+  "handleItemClick",
+  "handleDocumentClick"
 ];
 const initState = ({
   reactive,

package/quarter-panel/index.js

@@ -0,0 +1,61 @@
+import "../chunk-G2ADBYYC.js";
+import { modifyDate, nextYear, prevYear } from "../common/deps/date-util";
+import { DATEPICKER } from "../common";
+const getTarget = (event) => {
+  let target = event.target;
+  const tagName = target.tagName;
+  if (tagName === "A") {
+    target = target.parentNode.parentNode;
+  }
+  if (tagName === "DIV") {
+    target = target.parentNode;
+  }
+  if (target.tagName !== "TD") {
+    return;
+  }
+  return target;
+};
+const handleQuarterTableClick = ({ state, emit }) => (event) => {
+  const target = getTarget(event);
+  const currentDate = new Date(state.date.getFullYear(), DATEPICKER.QuarterMap[target.cellIndex], 1);
+  state.value = currentDate;
+  emit("pick", currentDate);
+};
+const showYearPicker = ({ state }) => () => state.currentView = DATEPICKER.Year;
+const cusPrevYear = ({ state }) => () => {
+  if (state.currentView === DATEPICKER.Year) {
+    state.startYear = state.startYear - DATEPICKER.PanelYearNum;
+  } else {
+    state.date = prevYear(state.date);
+  }
+};
+const cusNextYear = ({ state }) => () => {
+  if (state.currentView === DATEPICKER.Year) {
+    state.startYear = state.startYear + DATEPICKER.PanelYearNum;
+  } else {
+    state.date = nextYear(state.date);
+  }
+};
+const handleYearPick = ({ state }) => (value) => {
+  state.currentView = DATEPICKER.Quarter;
+  state.date = modifyDate(state.date, value, state.date.getMonth(), state.date.getDate());
+};
+const getYearLabel = ({ state, t }) => () => {
+  return state.date.getFullYear();
+};
+const getCellStyle = ({ api, props, state }) => (cell) => {
+  const year = state.date.getFullYear();
+  const quarter = cell.text.slice(1) - 1;
+  const style = {};
+  style.current = state.value && state.value.getFullYear() === year && state.value.getMonth() === DATEPICKER.QuarterMap[quarter];
+  return style;
+};
+export {
+  cusNextYear,
+  cusPrevYear,
+  getCellStyle,
+  getYearLabel,
+  handleQuarterTableClick,
+  handleYearPick,
+  showYearPicker
+};

package/quarter-panel/vue.js

@@ -0,0 +1,46 @@
+import "../chunk-G2ADBYYC.js";
+import { DATEPICKER } from "../common";
+import {
+  handleQuarterTableClick,
+  showYearPicker,
+  handleYearPick,
+  cusPrevYear,
+  cusNextYear,
+  getYearLabel,
+  getCellStyle
+} from "./index";
+const api = [
+  "state",
+  "handleQuarterTableClick",
+  "showYearPicker",
+  "handleYearPick",
+  "cusPrevYear",
+  "cusNextYear",
+  "getCellStyle"
+];
+const renderless = (props, { reactive, computed }, { emit, t }) => {
+  const api2 = {};
+  const state = reactive({
+    date: /* @__PURE__ */ new Date(),
+    visible: false,
+    currentView: DATEPICKER.Quarter,
+    yearLabel: computed(() => api2.getYearLabel()),
+    startYear: Math.floor((/* @__PURE__ */ new Date()).getFullYear() / 10) * 10,
+    rows: [{ text: "Q1" }, { text: "Q2" }, { text: "Q3" }, { text: "Q4" }]
+  });
+  Object.assign(api2, {
+    state,
+    handleQuarterTableClick: handleQuarterTableClick({ state, emit }),
+    showYearPicker: showYearPicker({ state }),
+    handleYearPick: handleYearPick({ state }),
+    cusPrevYear: cusPrevYear({ state }),
+    cusNextYear: cusNextYear({ state }),
+    getYearLabel: getYearLabel({ state, t }),
+    getCellStyle: getCellStyle({ api: api2, props, state })
+  });
+  return api2;
+};
+export {
+  api,
+  renderless
+};