@opentiny/vue-renderless 3.21.2 → 3.23.0

package/transfer/vue.js

@@ -11,34 +11,48 @@ import {
   addToLeft,
   addToRight,
   clearQuery,
-  sortableEvent
+  sortableEvent,
+  recurseTreeDataToFlagInitDisabled,
+  recurseTreeDataToDisabled,
+  setCheckedOnMounted
 } from "./index";
 const api = ["state", "onSourceCheckedChange", "onTargetCheckedChange", "addToLeft", "addToRight", "clearQuery"];
-const initState = ({ reactive, computed, api: api2, props, h, slots }) => reactive({
-  leftChecked: [],
-  rightChecked: [],
-  rightData: computed(() => api2.getRightCheckedData()),
-  leftData: computed(() => api2.getLeftCheckedData()),
-  dataObj: computed(() => api2.getObj()),
-  sourceData: computed(() => api2.getSourceData()),
-  targetData: computed(() => api2.getTargetData()),
-  hasButtonTexts: computed(() => props.buttonTexts.length === 2),
-  isToLeft: false,
-  optionRender: computed(() => (option) => {
-    if (props.renderContent) {
-      return props.renderContent(h, option);
-    }
-    if (slots.default) {
-      return slots.default({ option });
-    }
-    return h("span", option[props.props.label] || option[props.props.key]);
-  })
-});
-const renderless = (props, { computed, onMounted, reactive, h }, { $prefix, emit, refs, parent, slots, vm }) => {
+const initState = ({ reactive, computed, api: api2, props, h, slots, Tree }) => {
+  const state = reactive({
+    leftChecked: [],
+    rightChecked: [],
+    rightData: computed(() => api2.getRightCheckedData()),
+    leftData: computed(() => api2.getLeftCheckedData()),
+    dataObj: computed(() => api2.getObj()),
+    sourceData: computed(() => api2.getSourceData()),
+    targetData: computed(() => api2.getTargetData()),
+    hasButtonTexts: computed(() => props.buttonTexts.length === 2),
+    isToLeft: false,
+    optionRender: computed(() => (option) => {
+      if (props.renderContent) {
+        return props.renderContent(h, option);
+      }
+      if (slots.default) {
+        return slots.default({ option });
+      }
+      return h("span", option[props.props.label] || option[props.props.key]);
+    }),
+    isToLeftBtnDisabled: computed(() => {
+      var _a, _b;
+      if (((_b = (_a = props.render) == null ? void 0 : _a.plugin) == null ? void 0 : _b.name) === Tree) {
+        return props.toLeftDisable && state.leftChecked.length <= props.modelValue.length;
+      }
+      return props.toLeftDisable && state.leftChecked.length === 0;
+    })
+  });
+  return state;
+};
+const renderless = (props, { computed, onMounted, reactive, h, watch }, { $prefix, emit, refs, parent, slots, vm }) => {
+  var _a, _b;
   const api2 = {};
   const Tree = $prefix + "Tree";
   const Table = $prefix + "Table";
-  const state = initState({ reactive, computed, api: api2, props, h, slots });
+  const state = initState({ reactive, computed, api: api2, props, h, slots, Tree });
   const { DROPPANEL, TRANSFERPANEL } = parent.$constants;
   Object.assign(api2, {
     state,
@@ -53,9 +67,35 @@ const renderless = (props, { computed, onMounted, reactive, h }, { $prefix, emit
     onSourceCheckedChange: onSourceCheckedChange({ emit, state }),
     logicFun: logicFun({ props, emit, state, vm }),
     getTargetData: getTargetData({ props, state, Tree, Table }),
-    sortableEvent: sortableEvent({ api: api2, droppanel: DROPPANEL, props, queryDom: TRANSFERPANEL, refs })
+    sortableEvent: sortableEvent({ api: api2, droppanel: DROPPANEL, props, queryDom: TRANSFERPANEL, refs }),
+    setCheckedOnMounted: setCheckedOnMounted({ props, vm, Tree })
   });
+  if (((_b = (_a = props.render) == null ? void 0 : _a.plugin) == null ? void 0 : _b.name) === Tree) {
+    watch(
+      props.data,
+      (value) => {
+        recurseTreeDataToFlagInitDisabled(
+          value,
+          props.props.children || "children",
+          props.props.key || "key",
+          props.modelValue
+        );
+      },
+      { immediate: true }
+    );
+    watch(
+      () => props.modelValue,
+      (value) => {
+        var _a2, _b2;
+        if (((_b2 = (_a2 = props.render) == null ? void 0 : _a2.plugin) == null ? void 0 : _b2.name) === Tree) {
+          recurseTreeDataToDisabled(props.data, props.props.children || "children", props.props.key || "key", value);
+          api2.setCheckedOnMounted();
+        }
+      }
+    );
+  }
   onMounted(api2.sortableEvent);
+  onMounted(api2.setCheckedOnMounted);
   return api2;
 };
 export {

package/transfer-panel/index.js

@@ -1,5 +1,5 @@
 import "../chunk-G2ADBYYC.js";
-import { copyArray } from "../common/object";
+import { copyArray } from "@opentiny/utils";
 import { getFlatData } from "../transfer";
 const showFilterData = (data, sign) => {
   const getChild = (data2, sign2) => data2.filter((node) => {
@@ -185,6 +185,11 @@ const handlePageChange = (state) => (currentPage) => {
 const getFilterTreeData = ({ props, state }) => (data) => {
   const getChild = (data2, query) => {
     data2.forEach((node) => {
+      if (node.__disabled) {
+        node.disabled = true;
+      } else if (!props.showLeft) {
+        node.disabled = false;
+      }
       const label = node[state.labelProp];
       if (typeof props.treeOp.filterNodeMethod === "function") {
         const result = props.treeOp.filterNodeMethod(state.query, node);

package/tree/index.js

@@ -1,12 +1,12 @@
 import "../chunk-G2ADBYYC.js";
-import { getNodeKey as innerGetNodekey } from "../common/deps/tree-model/util";
-import { KEY_CODE } from "../common";
-import TreeStore from "../common/deps/tree-model/tree-store";
-import { addClass, removeClass } from "../common/deps/dom";
-import { on, off } from "../common/deps/dom";
-import { getDataset } from "../common/dataset";
-import { copyArray } from "../common/object";
-import { log } from "../common";
+import { getNodeKey as innerGetNodekey } from "@opentiny/utils";
+import { KEY_CODE } from "@opentiny/utils";
+import { TreeStore } from "@opentiny/utils";
+import { addClass, removeClass } from "@opentiny/utils";
+import { on, off } from "@opentiny/utils";
+import { getDataset } from "@opentiny/utils";
+import { copyArray } from "@opentiny/utils";
+import { logger } from "@opentiny/utils";
 const setChildren = (props) => (data) => props.data = data;
 const getChildren = () => (props) => props.data;
 const computedTreeItemArray = () => (props, state) => Array.prototype.slice.call(state.treeItems);
@@ -561,7 +561,7 @@ const addNode = ({ api, props, state }) => (node) => {
     state.newNodeId++;
   }
   if (state.allNodeKeys.includes(nodeId) && !props.editConfig.noWarning) {
-    log.logger.warn(`the ${props.nodeKey || "id"} ${nodeId} is already exists. Please check.`);
+    logger.warn(`the ${props.nodeKey || "id"} ${nodeId} is already exists. Please check.`);
   }
   state.allNodeKeys.push(nodeId);
   const newNode = { label: "", [props.nodeKey || "id"]: nodeId };

package/tree/vue.js

@@ -1,5 +1,5 @@
 import "../chunk-G2ADBYYC.js";
-import debounce from "../common/deps/debounce";
+import { debounce } from "@opentiny/utils";
 import {
   computedShowEmptyText,
   closeMenu,
@@ -68,7 +68,7 @@ import {
   handleClickPlainNode,
   setCheckedByNodeKey
 } from "./index";
-import { random } from "../common/string";
+import { random } from "@opentiny/utils";
 const api = [
   "state",
   "closeMenu",

package/tree-node/index.js

@@ -1,7 +1,7 @@
 import {
   __spreadValues
 } from "../chunk-G2ADBYYC.js";
-import { getNodeKey as getTreeNodeKey } from "../common/deps/tree-model/util";
+import { getNodeKey as getTreeNodeKey } from "@opentiny/utils";
 const watchIndeterminate = ({ api, props }) => (value) => api.handleSelectChange(props.node.checked, value);
 const watchChecked = ({ api, props }) => (value) => api.handleSelectChange(value, props.node.indeterminate);
 const watchExpanded = ({ state }) => (value) => {

package/tree-node/vue.js

@@ -1,5 +1,5 @@
 import "../chunk-G2ADBYYC.js";
-import debounce from "../common/deps/debounce";
+import { debounce } from "@opentiny/utils";
 import {
   created,
   handleDragEnd,

package/tree-select/index.js

@@ -2,7 +2,7 @@ import {
   __spreadProps,
   __spreadValues
 } from "../chunk-G2ADBYYC.js";
-import { find } from "../common/array";
+import { find } from "@opentiny/utils";
 const filter = ({ vm }) => (value) => {
   vm.$refs.treeRef.filter(value);
 };
@@ -28,8 +28,7 @@ const check = ({ props, vm, emit }) => (data, { checkedNodes }) => {
         currentValue.push(node[props.valueField]);
         return __spreadProps(__spreadValues({}, node), {
           currentLabel: node[props.textField],
-          value: node[props.valueField],
-          isTree: true
+          value: node[props.valueField]
         });
       })
     );
@@ -63,40 +62,51 @@ const getPluginOption = ({ api, props, state }) => (value) => {
   }
   return items;
 };
-const getCheckedData = ({ props, state }) => () => {
+const getCheckedData = ({ props, state }) => (selected) => {
   const checkedKey = [];
-  if (!Array.isArray(state.selected)) {
-    return props.modelValue ? [props.modelValue] : [state.selected[props.valueField]];
+  if (!Array.isArray(selected)) {
+    return props.modelValue ? [props.modelValue] : [selected[props.valueField]];
   } else {
-    state.selected.length > 0 && state.selected.forEach((item) => {
+    selected.length > 0 && selected.forEach((item) => {
       checkedKey.push(item[props.valueField]);
     });
     return checkedKey;
   }
 };
+const getChildValue = () => (childNodes, key) => {
+  const ids = [];
+  const getChild = (nodes) => {
+    nodes.forEach((node) => {
+      ids.push(node.data[key]);
+      if (node.childNodes.length > 0) {
+        getChild(node.childNodes);
+      }
+    });
+  };
+  getChild(childNodes);
+  return ids;
+};
 const mounted = ({ api, state, props, vm }) => () => {
-  if (!state.value || state.value.length === 0)
+  if (!state.modelValue || state.modelValue.length === 0)
     return;
   if (props.multiple) {
     let initialNodes = [];
-    if (Array.isArray(state.value)) {
-      state.value.forEach((value) => {
+    if (Array.isArray(state.modelValue)) {
+      state.modelValue.forEach((value) => {
         const option = api.getPluginOption(value);
         initialNodes = initialNodes.concat(option);
       });
     }
-    vm.$refs.baseSelectRef.updateSelectedData(
-      initialNodes.map((node) => {
-        return __spreadProps(__spreadValues({}, node), {
-          currentLabel: node[props.textField],
-          value: node[props.valueField],
-          isTree: true
-        });
-      })
-    );
-    state.defaultCheckedKeys = api.getCheckedData()[0];
+    const selected = initialNodes.map((node) => {
+      return __spreadProps(__spreadValues({}, node), {
+        currentLabel: node[props.textField],
+        value: node[props.valueField]
+      });
+    });
+    vm.$refs.baseSelectRef.updateSelectedData(selected);
+    state.defaultCheckedKeys = api.getCheckedData(selected);
   } else {
-    const data = api.getPluginOption(state.value)[0];
+    const data = api.getPluginOption(state.modelValue)[0];
     vm.$refs.baseSelectRef.updateSelectedData(__spreadProps(__spreadValues({}, data), {
       currentLabel: data[props.textField],
       value: data[props.valueField],
@@ -107,12 +117,48 @@ const mounted = ({ api, state, props, vm }) => () => {
     state.currentKey = data[props.valueField];
   }
 };
+const watchValue = ({ api, props, vm, state }) => (newValue, oldValue) => {
+  if (props.multiple) {
+    const xorResult = oldValue.filter((item) => !newValue.includes(item));
+    const tagId = xorResult[0];
+    const treeIds = [tagId];
+    let checkedKeys = newValue;
+    if (xorResult.length === 1 && !props.treeOp.checkStrictly) {
+      let node = vm.$refs.treeRef.getNode(tagId);
+      if (!node.isLeaf) {
+        treeIds.push(...api.getChildValue(node.childNodes, props.valueField));
+      }
+      while (node.parent && !Array.isArray(node.parent.data)) {
+        node.parent.data && treeIds.push(node.parent.data[props.valueField]);
+        node = node.parent;
+      }
+      checkedKeys = newValue.filter((item) => !treeIds.includes(item));
+    }
+    let initialNodes = [];
+    if (Array.isArray(checkedKeys)) {
+      checkedKeys.forEach((value) => {
+        const option = api.getPluginOption(value);
+        initialNodes = initialNodes.concat(option);
+      });
+    }
+    const selected = initialNodes.map((node) => {
+      return __spreadProps(__spreadValues({}, node), {
+        currentLabel: node[props.textField],
+        value: node[props.valueField]
+      });
+    });
+    vm.$refs.baseSelectRef.updateSelectedData(selected);
+    vm.$refs.treeRef.setCheckedKeys(checkedKeys);
+  }
+};
 export {
   check,
   filter,
   getCheckedData,
+  getChildValue,
   getPluginOption,
   getTreeData,
   mounted,
-  nodeClick
+  nodeClick,
+  watchValue
 };

package/tree-select/vue.js

@@ -1,5 +1,15 @@
 import "../chunk-G2ADBYYC.js";
-import { check, filter, getCheckedData, getPluginOption, getTreeData, mounted, nodeClick } from "./index";
+import {
+  check,
+  filter,
+  getCheckedData,
+  getPluginOption,
+  getTreeData,
+  mounted,
+  nodeClick,
+  watchValue,
+  getChildValue
+} from "./index";
 const api = ["state", "check", "filter", "nodeClick"];
 const renderless = (props, { reactive, computed, watch, onMounted }, { vm, emit }) => {
   const api2 = {};
@@ -9,7 +19,7 @@ const renderless = (props, { reactive, computed, watch, onMounted }, { vm, emit
     defaultCheckedKeys: [],
     remoteData: [],
     treeData: props.treeOp.data,
-    value: computed(() => props.modelValue)
+    modelValue: []
   });
   Object.assign(api2, {
     state,
@@ -19,13 +29,27 @@ const renderless = (props, { reactive, computed, watch, onMounted }, { vm, emit
     getPluginOption: getPluginOption({ api: api2, props, state }),
     getTreeData: getTreeData({ props, state }),
     mounted: mounted({ api: api2, state, props, vm }),
-    nodeClick: nodeClick({ props, vm, emit })
+    nodeClick: nodeClick({ props, vm, emit }),
+    watchValue: watchValue({ api: api2, props, vm, state }),
+    getChildValue: getChildValue()
   });
   watch(
     () => props.treeOp.data,
     (data) => data && (state.treeData = data),
     { immediate: true, deep: true }
   );
+  watch(
+    () => props.modelValue,
+    () => {
+      if (props.multiple && Array.isArray(props.modelValue)) {
+        state.modelValue = [...props.modelValue];
+      } else {
+        state.modelValue = props.modelValue;
+      }
+    },
+    { immediate: true, deep: true }
+  );
+  watch(() => state.modelValue, api2.watchValue);
   onMounted(api2.mounted);
   return api2;
 };

package/types/async-flowchart.type.d.ts

@@ -1,4 +1,5 @@
 import { ExtractPropTypes } from 'vue';
+import { ResizeObserver } from '@opentiny/utils';
 import { ISharedRenderlessParamHooks, ISharedRenderlessParamUtils } from './shared.type.js';
 
 declare const asyncFlowchartProps: {
@@ -14,19 +15,6 @@ declare const asyncFlowchartProps: {
     tiny_chart_theme: ObjectConstructor;
 };
 
-/**
- * Copyright (c) 2022 - present TinyVue Authors.
- * Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
- *
- * Use of this source code is governed by an MIT-style license.
- *
- * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
- * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
- * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
- *
- */
-declare const index: any;
-
 declare const observeContainerSize: ({ nextTick, vm, state }: {
     nextTick: ISharedRenderlessParamHooks['nextTick'];
     vm: ISharedRenderlessParamUtils['vm'];
@@ -54,7 +42,7 @@ interface IAsyncFlowchartState {
     config: null | {
         nodeWrapperSize: number;
     };
-    temporary?: typeof index;
+    temporary?: typeof ResizeObserver;
 }
 type IAsyncFlowchartProps = ExtractPropTypes<typeof asyncFlowchartProps>;
 interface IAsyncFlowchartApi {

package/types/breadcrumb-item.type.d.ts

@@ -7,7 +7,11 @@ declare const breadcrumbItemProps: {
         type: BooleanConstructor;
         default: boolean;
     };
-    size: StringConstructor;
+    size: {
+        type: StringConstructor;
+        default: string;
+        validator: (val: string) => boolean;
+    };
     option: {
         type: ObjectConstructor;
         default: () => {};

package/types/breadcrumb.type.d.ts

@@ -26,7 +26,11 @@ declare const breadcrumbProps: {
         type: StringConstructor;
         default: string;
     };
-    size: StringConstructor;
+    size: {
+        type: StringConstructor;
+        default: string;
+        validator: (val: string) => boolean;
+    };
     options: {
         type: ArrayConstructor;
         default: () => never[];

package/types/button-group.type.d.ts

@@ -3,7 +3,11 @@ import { IButtonGroupNode as IButtonGroupNode$1 } from '@opentiny/vue-renderless
 import { ISharedRenderlessFunctionParams, ISharedRenderlessParamUtils } from './shared.type.js';
 
 declare const buttonGroupProps: {
-    size: StringConstructor;
+    size: {
+        type: StringConstructor;
+        default: string;
+        validator: (val: string) => boolean;
+    };
     data: {
         type: PropType<IButtonGroupNode$1[]>;
         default: () => never[];

package/types/button.type.d.ts

@@ -75,9 +75,9 @@ declare const buttonProps: {
         type: PropType<(ev: MouseEvent) => void>;
     };
     tiny_mode: StringConstructor;
-    tiny_mode_root: BooleanConstructor;
+    tiny_mode_root: BooleanConstructor; /** 是否圆角按钮 */
     tiny_template: (FunctionConstructor | ObjectConstructor)[];
-    tiny_renderless: FunctionConstructor; /** 是否圆形按钮  */
+    tiny_renderless: FunctionConstructor;
     tiny_theme: StringConstructor;
     tiny_chart_theme: ObjectConstructor;
 };

package/types/cascader.type.d.ts

@@ -89,6 +89,10 @@ declare const cascaderProps: {
         type: BooleanConstructor;
         default: boolean;
     };
+    changeCompat: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     tiny_mode: StringConstructor;
     tiny_mode_root: BooleanConstructor;
     tiny_template: (FunctionConstructor | ObjectConstructor)[];
@@ -121,11 +125,12 @@ declare const computePresentContent: ({ api, state }: {
     api: ICascaderApi;
     state: ICascaderState;
 }) => () => void;
+/** 用户在修改值，不必触发change */
 declare const watchValue: ({ api, state }: {
     api: ICascaderApi;
     state: ICascaderState;
 }) => (value: any) => void;
-declare const watchCheckedValue: ({ nextTick, constants, dispatch, api, emit, state }: {
+declare const watchCheckedValue: ({ nextTick, constants, dispatch, api, emit, state, props }: {
     api: ICascaderApi;
     emit: ICascadeRenderlessParamUtils['emit'];
     state: ICascaderState;

package/types/date-table.type.d.ts

@@ -1,123 +1,4 @@
-/**
- * Copyright (c) 2022 - present TinyVue Authors.
- * Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
- *
- * Use of this source code is governed by an MIT-style license.
- *
- * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
- * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
- * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
- *
- */
-
-declare const DATEPICKER: {
-    Day: string;
-    Date: string;
-    Dates: string;
-    Year: string;
-    Years: string;
-    YearRange: string;
-    PanelYearNum: number;
-    Month: string;
-    Week: string;
-    Normal: string;
-    Today: string;
-    PreMonth: string;
-    NextMonth: string;
-    YearI18n: string;
-    List: number[];
-    YearObj: {
-        38: number;
-        40: number;
-        37: number;
-        39: number;
-    };
-    WeekObj: {
-        38: number;
-        40: number;
-        37: number;
-        39: number;
-    };
-    DayObj: {
-        38: number;
-        40: number;
-        37: number;
-        39: number;
-    };
-    Aviailable: string;
-    Default: string;
-    Current: string;
-    InRange: string;
-    StartDate: string;
-    EndDate: string;
-    Selected: string;
-    Disabled: string;
-    Range: string;
-    fullMonths: string[];
-    fullWeeks: string[];
-    MonhtList: string[];
-    Weeks: string[];
-    PlacementMap: {
-        left: string;
-        center: string;
-        right: string;
-    };
-    QuarterMap: {
-        0: number;
-        1: number;
-        2: number;
-        3: number;
-    };
-    MonthQuarterMap: {
-        0: number;
-        3: number;
-        6: number;
-        9: number;
-    };
-    TriggerTypes: string[];
-    DateFormats: {
-        year: string;
-        years: string;
-        yearrange: string;
-        month: string;
-        time: string;
-        week: string;
-        date: string;
-        timerange: string;
-        monthrange: string;
-        daterange: string;
-        datetime: string;
-        datetimerange: string;
-    };
-    Time: string;
-    TimeRange: string;
-    Quarter: string;
-    IconTime: string;
-    IconDate: string;
-    DateRange: string;
-    DateTimeRange: string;
-    MonthRange: string;
-    TimeSelect: string;
-    TimesTamp: string;
-    DateTime: string;
-    SelectbaleRange: string;
-    Start: string;
-    End: string;
-    Step: string;
-    CompareOne: string;
-    CompareHundred: string;
-    selClass: string;
-    queryClass: string;
-    disableClass: string;
-    defaultClass: string;
-    Qurtyli: string;
-    MappingKeyCode: {
-        40: number;
-        38: number;
-    };
-    DatePicker: string;
-    TimePicker: string;
-};
+import { DATEPICKER } from '@opentiny/utils';
 
 interface IDateTableRow {
     /** 列数，从0开始，[0, 6] */

package/types/dropdown.type.d.ts

@@ -4,7 +4,7 @@ import { ISharedRenderlessFunctionParams, ISharedRenderlessParamUtils } from './
 declare const dropdownProps: {
     modelValue: (StringConstructor | NumberConstructor)[];
     visible: {
-        type: BooleanConstructor;
+        type: (BooleanConstructor | undefined)[];
         default: undefined;
     };
     type: StringConstructor;