@ibiz-template/vue3-components 0.7.31-alpha.0 → 0.7.37-alpha.5

package/es/editor/date-range-select/date-range-select-picker/components/year-range-select/year-range-select.d.ts

@@ -0,0 +1,52 @@
+import { Ref } from 'vue';
+import './year-range-select.scss';
+declare const _default: import("vue").DefineComponent<{
+    value: {
+        type: {
+            (arrayLength: number): (string | number)[];
+            (...items: (string | number)[]): (string | number)[];
+            new (arrayLength: number): (string | number)[];
+            new (...items: (string | number)[]): (string | number)[];
+            isArray(arg: any): arg is any[];
+            readonly prototype: any[];
+            from<T>(arrayLike: ArrayLike<T>): T[];
+            from<T_1, U>(arrayLike: ArrayLike<T_1>, mapfn: (v: T_1, k: number) => U, thisArg?: any): U[];
+            from<T_2>(iterable: Iterable<T_2> | ArrayLike<T_2>): T_2[];
+            from<T_3, U_1>(iterable: Iterable<T_3> | ArrayLike<T_3>, mapfn: (v: T_3, k: number) => U_1, thisArg?: any): U_1[];
+            of<T_4>(...items: T_4[]): T_4[];
+            readonly [Symbol.species]: ArrayConstructor;
+        };
+        default: () => never[];
+    };
+}, {
+    ns: import("@ibiz-template/core").Namespace;
+    visible: Ref<boolean>;
+    renderSelect: () => JSX.Element;
+    handleClose: () => void;
+    handleOpen: () => void;
+    visibleChange: (tag: boolean) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "visibleChange")[], "change" | "visibleChange", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    value: {
+        type: {
+            (arrayLength: number): (string | number)[];
+            (...items: (string | number)[]): (string | number)[];
+            new (arrayLength: number): (string | number)[];
+            new (...items: (string | number)[]): (string | number)[];
+            isArray(arg: any): arg is any[];
+            readonly prototype: any[];
+            from<T>(arrayLike: ArrayLike<T>): T[];
+            from<T_1, U>(arrayLike: ArrayLike<T_1>, mapfn: (v: T_1, k: number) => U, thisArg?: any): U[];
+            from<T_2>(iterable: Iterable<T_2> | ArrayLike<T_2>): T_2[];
+            from<T_3, U_1>(iterable: Iterable<T_3> | ArrayLike<T_3>, mapfn: (v: T_3, k: number) => U_1, thisArg?: any): U_1[];
+            of<T_4>(...items: T_4[]): T_4[];
+            readonly [Symbol.species]: ArrayConstructor;
+        };
+        default: () => never[];
+    };
+}>> & {
+    onChange?: ((...args: any[]) => any) | undefined;
+    onVisibleChange?: ((...args: any[]) => any) | undefined;
+}, {
+    value: (string | number)[];
+}, {}>;
+export default _default;

package/es/editor/date-range-select/date-range-select-picker/components/year-range-select/year-range-select.mjs

@@ -0,0 +1,258 @@
+import { ref, watch, createVNode, resolveComponent, defineComponent } from 'vue';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import './year-range-select.css';
+
+"use strict";
+var yearRangeSelect = /* @__PURE__ */ defineComponent({
+  name: "BIYearRangeSelect",
+  props: {
+    value: {
+      type: Array,
+      default: () => []
+    }
+  },
+  emits: ["change", "visibleChange"],
+  setup(props, {
+    emit
+  }) {
+    const ns = useNamespace("bi-year-range-select");
+    const hoverItem = ref();
+    const visible = ref(false);
+    const leftYears = ref([(/* @__PURE__ */ new Date()).getFullYear() - (/* @__PURE__ */ new Date()).getFullYear() % 10, (/* @__PURE__ */ new Date()).getFullYear() + (9 - (/* @__PURE__ */ new Date()).getFullYear() % 10)]);
+    const rightYears = ref([(/* @__PURE__ */ new Date()).getFullYear() + (10 - (/* @__PURE__ */ new Date()).getFullYear() % 10), (/* @__PURE__ */ new Date()).getFullYear() + (19 - (/* @__PURE__ */ new Date()).getFullYear() % 10)]);
+    const years = ref({
+      start: void 0,
+      end: void 0
+    });
+    const prevYears = ref([]);
+    const nextYears = ref([]);
+    const init = () => {
+      leftYears.value = [(/* @__PURE__ */ new Date()).getFullYear() - (/* @__PURE__ */ new Date()).getFullYear() % 10, (/* @__PURE__ */ new Date()).getFullYear() + (9 - (/* @__PURE__ */ new Date()).getFullYear() % 10)];
+      rightYears.value = [(/* @__PURE__ */ new Date()).getFullYear() + (10 - (/* @__PURE__ */ new Date()).getFullYear() % 10), (/* @__PURE__ */ new Date()).getFullYear() + (19 - (/* @__PURE__ */ new Date()).getFullYear() % 10)];
+    };
+    const computedBatchYears = (left, right) => {
+      let value = left - 1;
+      const tempYears = [];
+      while (value <= right + 1) {
+        tempYears.push(value);
+        value += 1;
+      }
+      return tempYears;
+    };
+    prevYears.value = computedBatchYears(leftYears.value[0], leftYears.value[1]);
+    nextYears.value = computedBatchYears(rightYears.value[0], rightYears.value[1]);
+    watch(() => props.value, (newVal) => {
+      if (newVal && Array.isArray(newVal) && newVal.length > 0) {
+        const start = Number(newVal[0]);
+        const end = Number(newVal[1]);
+        if (!Number.isNaN(start) && !Number.isNaN(end)) {
+          leftYears.value = [start - start % 10, start + (9 - start % 10)];
+          years.value.start = start;
+          rightYears.value = [end - end % 10, end + (9 - end % 10)];
+          years.value.end = end;
+        }
+      } else {
+        init();
+      }
+    }, {
+      immediate: true,
+      deep: true
+    });
+    const onReduce = (tag) => {
+      if (tag === "left") {
+        leftYears.value[0] -= 10;
+        leftYears.value[1] -= 10;
+        prevYears.value = computedBatchYears(leftYears.value[0], leftYears.value[1]);
+      } else {
+        rightYears.value[0] -= 10;
+        rightYears.value[1] -= 10;
+        nextYears.value = computedBatchYears(rightYears.value[0], rightYears.value[1]);
+      }
+    };
+    const onAdd = (tag) => {
+      if (tag === "left") {
+        leftYears.value[0] += 10;
+        leftYears.value[1] += 10;
+        prevYears.value = computedBatchYears(leftYears.value[0], leftYears.value[1]);
+      } else {
+        rightYears.value[0] += 10;
+        rightYears.value[1] += 10;
+        nextYears.value = computedBatchYears(rightYears.value[0], rightYears.value[1]);
+      }
+    };
+    const renderLeftIcon = (tag) => {
+      if (tag === "right" && leftYears.value && rightYears.value && leftYears.value.at(-1) === rightYears.value[0] - 1) {
+        return createVNode("div", null, null);
+      }
+      return createVNode("svg", {
+        "onClick": () => onReduce(tag),
+        "viewBox": "0 0 16 16",
+        "xmlns": "http://www.w3.org/2000/svg",
+        "height": "1em",
+        "width": "1em",
+        "focusable": "false",
+        "fill": "currentColor"
+      }, [createVNode("g", {
+        "id": "aav1.icon\u56FE\u6807/5.navigation/angle-double-left",
+        "stroke-width": "1",
+        "fill-rule": "evenodd"
+      }, [createVNode("path", {
+        "d": "M7.984 7l4.75 4.762-.832.817-3.924-3.924-3.99 3.99-.825-.836L7.973 7l.005.006L7.984 7zm0-4l4.75 4.762-.832.817-3.924-3.924-3.99 3.99-.825-.836L7.973 3l.005.006L7.984 3z",
+        "id": "aav\u5F62\u72B6\u7ED3\u5408",
+        "transform": "rotate(-90 7.949 7.822)"
+      }, null)])]);
+    };
+    const renderRightIcon = (tag) => {
+      if (tag === "left" && leftYears.value && rightYears.value && leftYears.value.at(-1) === rightYears.value[0] - 1) {
+        return createVNode("div", null, null);
+      }
+      return createVNode("svg", {
+        "onClick": () => onAdd(tag),
+        "viewBox": "0 0 16 16",
+        "xmlns": "http://www.w3.org/2000/svg",
+        "height": "1em",
+        "width": "1em",
+        "focusable": "false",
+        "fill": "currentColor"
+      }, [createVNode("g", {
+        "id": "aaw1.icon\u56FE\u6807/5.navigation/angle-double-right",
+        "stroke-width": "1",
+        "fill-rule": "evenodd"
+      }, [createVNode("path", {
+        "d": "M7.984 7.3l4.75 4.762-.832.817-3.924-3.924-3.99 3.99-.825-.836L7.973 7.3l.005.006.006-.006zm0-4l4.75 4.762-.832.817-3.924-3.924-3.99 3.99-.825-.836L7.973 3.3l.005.006.006-.006z",
+        "id": "aaw\u5F62\u72B6\u7ED3\u5408",
+        "transform": "rotate(90 7.949 8.122)"
+      }, null)])]);
+    };
+    const emitFunc = () => {
+      var _a, _b;
+      emit("change", [(_a = years.value.start) == null ? void 0 : _a.toString(), (_b = years.value.end) == null ? void 0 : _b.toString()]);
+      visible.value = false;
+    };
+    const onItemClick = (year) => {
+      if (years.value.start && years.value.end) {
+        years.value.start = void 0;
+        years.value.end = void 0;
+      }
+      if (!years.value.start) {
+        years.value.start = year;
+      } else {
+        if (year >= years.value.start) {
+          years.value.end = year;
+        } else {
+          const tempvalue = years.value.start;
+          years.value.start = year;
+          years.value.end = tempvalue;
+        }
+        emitFunc();
+      }
+    };
+    const computedSelectArea = (year) => {
+      if (years.value.start && years.value.end && year >= years.value.start && year <= years.value.end) {
+        return true;
+      }
+      return false;
+    };
+    const computedHoverSelectArea = (year) => {
+      if (years.value.start && !years.value.end && hoverItem.value) {
+        let tempStart = years.value.start;
+        let tempEnd = hoverItem.value;
+        if (hoverItem.value < years.value.start) {
+          tempEnd = years.value.start;
+          tempStart = hoverItem.value;
+        }
+        if (year >= tempStart && year <= tempEnd) {
+          return true;
+        }
+      }
+      return false;
+    };
+    const computedSelected = (year) => {
+      if (years.value.start === year || years.value.end === year) {
+        return true;
+      }
+      return false;
+    };
+    const isCurYear = (year) => {
+      return year === (/* @__PURE__ */ new Date()).getFullYear();
+    };
+    const onMouseHover = (year) => {
+      hoverItem.value = year;
+    };
+    const onMouseleave = () => {
+      hoverItem.value = null;
+    };
+    const renderSelect = () => {
+      var _a, _b;
+      return createVNode("div", {
+        "class": ns.e("date-panel")
+      }, [createVNode("div", {
+        "class": ns.em("date-panel", "left")
+      }, [createVNode("div", {
+        "class": ns.em("date-panel", "left-header")
+      }, [renderLeftIcon("left"), createVNode("span", null, [(_a = leftYears.value) == null ? void 0 : _a.join("-")]), renderRightIcon("left")]), createVNode("div", {
+        "class": ns.em("date-panel", "left-content")
+      }, [prevYears.value.map((item) => {
+        return createVNode("div", {
+          "class": [ns.em("date-panel", "left-item"), ns.is("selected", computedSelected(item)), ns.is("include", computedSelectArea(item)), ns.is("hover", hoverItem.value === item), ns.is("curyear", isCurYear(item)), ns.is("hoverinclude", computedHoverSelectArea(item))],
+          "onClick": () => onItemClick(item),
+          "onMouseenter": () => onMouseHover(item),
+          "onMouseleave": () => onMouseleave()
+        }, [item]);
+      })])]), createVNode("div", {
+        "class": ns.em("date-panel", "right")
+      }, [createVNode("div", {
+        "class": ns.em("date-panel", "right-header")
+      }, [renderLeftIcon("right"), createVNode("span", null, [(_b = rightYears.value) == null ? void 0 : _b.join("-")]), renderRightIcon("right")]), createVNode("div", {
+        "class": ns.em("date-panel", "right-content")
+      }, [nextYears.value.map((item) => {
+        return createVNode("div", {
+          "class": [ns.em("date-panel", "right-item"), ns.is("selected", computedSelected(item)), ns.is("include", computedSelectArea(item)), ns.is("hover", hoverItem.value === item), ns.is("curyear", isCurYear(item)), ns.is("hoverinclude", computedHoverSelectArea(item))],
+          "onClick": () => onItemClick(item),
+          "onMouseenter": () => onMouseHover(item),
+          "onMouseleave": () => onMouseleave()
+        }, [item]);
+      })])])]);
+    };
+    const visibleChange = (tag) => {
+      visible.value = tag;
+      emit("visibleChange", tag);
+    };
+    const handleClose = () => {
+      visible.value = true;
+    };
+    const handleOpen = () => {
+      visible.value = true;
+    };
+    return {
+      ns,
+      visible,
+      renderSelect,
+      handleClose,
+      handleOpen,
+      visibleChange
+    };
+  },
+  render() {
+    return createVNode("div", {
+      "class": this.ns.b()
+    }, [createVNode(resolveComponent("el-popover"), {
+      "visible": this.visible,
+      "onUpdate:visible": ($event) => this.visible = $event,
+      "trigger": "click",
+      "width": 600,
+      "placement": "top",
+      "onAfterEnter": () => this.visibleChange(true),
+      "onAfterLeave": () => this.visibleChange(false)
+    }, {
+      default: () => {
+        return this.renderSelect();
+      },
+      reference: () => {
+        return createVNode("div", null, null);
+      }
+    })]);
+  }
+});
+
+export { yearRangeSelect as default };

package/es/editor/date-range-select/date-range-select-picker/date-range-select.css

@@ -0,0 +1 @@
+.ibiz-date-range-select{width:100%}.ibiz-date-range-select__date-unit{width:100%}.ibiz-date-range-select__date-unit--label{font-size:var(--ibiz-font-size-regular)}.ibiz-date-range-select__date-unit--label::after{position:relative;top:0;left:var(--ibiz-spacing-extra-tight);color:var(--ibiz-color-danger);content:"*"}.ibiz-date-range-select__date-unit--editor-select{width:100%;margin-top:12px}.ibiz-date-range-select__date-range{width:100%;margin-top:12px}.ibiz-date-range-select__date-range--label{font-size:var(--ibiz-font-size-regular)}.ibiz-date-range-select__date-range--label::after{position:relative;top:0;left:var(--ibiz-spacing-extra-tight);color:var(--ibiz-color-danger);content:"*"}.ibiz-date-range-select__date-range--editor{display:inline-flex;flex-grow:1;align-items:center;justify-content:space-between;width:100%;padding:1px 11px;margin-top:var(--ibiz-spacing-base-tight);font-size:var(--ibiz-font-size-small);line-height:32px;cursor:pointer;background-image:none;border-radius:var(--ibiz-border-radius-small);box-shadow:0 0 0 1px var(--ibiz-color-border) inset;transition:all .2s;transform:translate3d(0,0,0)}.ibiz-date-range-select__date-range--editor i{color:var(--ibiz-color-tertiary-light-active)}.ibiz-date-range-select__date-range--editor:hover{box-shadow:0 0 0 1px var(--ibiz-color-primary) inset}.ibiz-date-range-select__date-type{padding:var(--ibiz-spacing-base-tight) 0}.ibiz-date-range-select__date-type--item{position:relative;display:flex;align-items:center;width:100%;height:32px;padding:0 var(--ibiz-spacing-base-tight);cursor:pointer}.ibiz-date-range-select__date-type--item:hover{background-color:var(--ibiz-color-fill-1)}.ibiz-date-range-select__date-type--item-caption{flex:1}.ibiz-date-range-select__date-type--item-icon{margin-top:2px}.ibiz-date-range-select__date-type--item-icon i{margin-left:var(--ibiz-spacing-base-tight);font-size:var(--ibiz-font-size-header-5)}.ibiz-date-range-select__date-type--editor{position:absolute;top:0;left:0;z-index:-1;width:100%;height:100%;visibility:hidden}.ibiz-date-range-select__date-type--quarter{z-index:-10;visibility:visible;opacity:0}.ibiz-date-range-select__date-type--quarter .el-tooltip__trigger{width:100%;height:100%}.ibiz-date-range-select__date-type--year{z-index:-10;visibility:visible;opacity:0}.ibiz-date-range-select__date-type--year .el-tooltip__trigger{width:100%;height:100%}.ibiz-date-range-select__date-type--week{z-index:-10;visibility:visible;opacity:0}.ibiz-date-range-select__date-type--week .el-tooltip__trigger{width:100%;height:100%}.ibiz-date-range-select__select-value{height:32px;overflow:hidden;text-overflow:ellipsis}

package/es/editor/date-range-select/date-range-select-picker/date-range-select.d.ts

@@ -0,0 +1,64 @@
+import { PropType } from 'vue';
+import { DateRangeSelectEditorController } from '../date-range-select.controller';
+import './date-range-select.scss';
+export declare const IBizDateRangeSelect: import("vue").DefineComponent<{
+    value: {
+        type: PropType<IData>;
+    };
+    controller: import("@ibiz-template/vue3-util").RequiredProp<PropType<DateRangeSelectEditorController>, undefined, undefined>;
+    data: import("@ibiz-template/vue3-util").RequiredProp<PropType<IData>, undefined, undefined>;
+    disabled: {
+        type: BooleanConstructor;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    autoFocus: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    overflowMode: {
+        type: StringConstructor;
+    };
+    controlParams: {
+        type: ObjectConstructor;
+        required: boolean;
+    };
+}, {
+    ns: import("@ibiz-template/core").Namespace;
+    c: DateRangeSelectEditorController;
+    renderDateUnit: () => JSX.Element;
+    renderDateRange: () => JSX.Element;
+    onOpen: (_event: MouseEvent) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "change"[], "change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    value: {
+        type: PropType<IData>;
+    };
+    controller: import("@ibiz-template/vue3-util").RequiredProp<PropType<DateRangeSelectEditorController>, undefined, undefined>;
+    data: import("@ibiz-template/vue3-util").RequiredProp<PropType<IData>, undefined, undefined>;
+    disabled: {
+        type: BooleanConstructor;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    autoFocus: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    overflowMode: {
+        type: StringConstructor;
+    };
+    controlParams: {
+        type: ObjectConstructor;
+        required: boolean;
+    };
+}>> & {
+    onChange?: ((...args: any[]) => any) | undefined;
+}, {
+    disabled: boolean;
+    readonly: boolean;
+    autoFocus: boolean;
+}, {}>;