@fmdeui/fmui 1.0.122 → 1.0.123

package/es/component.mjs

@@ -17,6 +17,7 @@ import { FmInputNumber } from './packages/components/fm-inputnumber/index.mjs';
 import { FmAutocomplete } from './packages/components/fm-autocomplete/index.mjs';
 import { FmSelect } from './packages/components/fm-select/index.mjs';
 import { Fmdatepicker } from './packages/components/fm-datepicker/index.mjs';
+import { FmPeriod } from './packages/components/fm-period/index.mjs';
 
 const plugins = [
   FButton,
@@ -37,7 +38,8 @@ const plugins = [
   FmInputNumber,
   FmAutocomplete,
   FmSelect,
-  Fmdatepicker
+  Fmdatepicker,
+  FmPeriod
 ];
 
 export { plugins as default };

package/es/components/fm-period/index.d.ts

@@ -0,0 +1 @@
+export declare const FmPeriod: any;

package/es/components/index.d.ts

@@ -16,3 +16,4 @@ export * from './fm-inputdropdown';
 export * from './fm-inputnumber';
 export * from './fm-autocomplete';
 export * from './fm-datepicker';
+export * from './fm-period';

package/es/packages/components/fm-period/index.mjs

@@ -0,0 +1,5 @@
+import _sfc_main from './index.vue.mjs';
+
+const FmPeriod = _sfc_main;
+
+export { FmPeriod };

package/es/packages/components/fm-period/index.vue.mjs

@@ -0,0 +1,204 @@
+import { ref, useModel, resolveComponent, openBlock, createBlock, withCtx, createVNode, normalizeStyle, unref, createElementVNode, createCommentVNode, toDisplayString, createElementBlock, Fragment, renderList, createTextVNode, mergeModels } from 'vue';
+import { Calendar, DArrowLeft, DArrowRight } from '@element-plus/icons-vue';
+
+const _hoisted_1 = { style: { "display": "flex", "justify-content": "space-between", "align-items": "center" } };
+const _hoisted_2 = { style: { "font-size": "16px" } };
+const _sfc_main = /* @__PURE__ */ Object.assign({
+  name: "FmPeriod"
+}, {
+  __name: "index",
+  props: /* @__PURE__ */ mergeModels({
+    placeholder: {
+      type: String,
+      default: "\u8BF7\u9009\u62E9\u4F1A\u8BA1\u671F\u95F4"
+    },
+    inputWidth: {
+      type: String,
+      default: "200px"
+    },
+    dropWidth: {
+      type: String,
+      default: "200px"
+    }
+  }, {
+    "modelValue": {},
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const dropdownRef = ref(null);
+    const currentYear = ref((/* @__PURE__ */ new Date()).getFullYear());
+    const selectedPeriod = useModel(__props, "modelValue");
+    const props = __props;
+    const handleVisibleChange = (visible) => {
+      if (visible) {
+        const val = selectedPeriod.value;
+        if (val && typeof val === "string" && val.length >= 4) {
+          currentYear.value = parseInt(val.substring(0, 4), 10);
+        } else {
+          currentYear.value = (/* @__PURE__ */ new Date()).getFullYear();
+        }
+      }
+    };
+    const selectMonth = (item) => {
+      const monthStr = String(item).padStart(2, "0");
+      selectedPeriod.value = `${currentYear.value}${monthStr}`;
+      if (dropdownRef.value) {
+        dropdownRef.value.handleClose();
+      }
+    };
+    const isSelectedMonth = (item) => {
+      if (!selectedPeriod.value) return false;
+      const monthStr = String(item).padStart(2, "0");
+      return selectedPeriod.value === `${currentYear.value}${monthStr}`;
+    };
+    const changeYear = (offset) => {
+      currentYear.value += offset;
+    };
+    return (_ctx, _cache) => {
+      const _component_el_icon = resolveComponent("el-icon");
+      const _component_el_input = resolveComponent("el-input");
+      const _component_el_button = resolveComponent("el-button");
+      const _component_el_col = resolveComponent("el-col");
+      const _component_el_row = resolveComponent("el-row");
+      const _component_el_dropdown_menu = resolveComponent("el-dropdown-menu");
+      const _component_el_dropdown = resolveComponent("el-dropdown");
+      return openBlock(), createBlock(
+        _component_el_dropdown,
+        {
+          ref_key: "dropdownRef",
+          ref: dropdownRef,
+          trigger: "click",
+          "hide-on-click": true,
+          onVisibleChange: handleVisibleChange
+        },
+        {
+          dropdown: withCtx(() => [
+            createVNode(_component_el_dropdown_menu, null, {
+              default: withCtx(() => [
+                createElementVNode(
+                  "div",
+                  {
+                    style: normalizeStyle({ width: __props.dropWidth, padding: "10px" })
+                  },
+                  [
+                    createCommentVNode(" \u5E74\u4EFD\u63A7\u5236\u533A "),
+                    createVNode(_component_el_row, { style: { "margin-top": "8px" } }, {
+                      default: withCtx(() => [
+                        createVNode(_component_el_col, {
+                          span: 24,
+                          class: "mb20"
+                        }, {
+                          default: withCtx(() => [
+                            createElementVNode("div", _hoisted_1, [
+                              createVNode(_component_el_button, {
+                                size: "large",
+                                link: "",
+                                icon: unref(DArrowLeft),
+                                onClick: _cache[1] || (_cache[1] = ($event) => changeYear(-1))
+                              }, null, 8, ["icon"]),
+                              createElementVNode(
+                                "b",
+                                _hoisted_2,
+                                toDisplayString(currentYear.value) + toDisplayString(_ctx.$t("\u5E74") || "\u5E74"),
+                                1
+                                /* TEXT */
+                              ),
+                              createVNode(_component_el_button, {
+                                size: "large",
+                                link: "",
+                                icon: unref(DArrowRight),
+                                onClick: _cache[2] || (_cache[2] = ($event) => changeYear(1))
+                              }, null, 8, ["icon"])
+                            ])
+                          ]),
+                          _: 1
+                          /* STABLE */
+                        }),
+                        createCommentVNode(" \u6708\u4EFD\u9009\u62E9\u533A "),
+                        (openBlock(), createElementBlock(
+                          Fragment,
+                          null,
+                          renderList(12, (item) => {
+                            return createVNode(
+                              _component_el_col,
+                              {
+                                key: item,
+                                span: 6,
+                                class: "mb10",
+                                style: { "text-align": "center" }
+                              },
+                              {
+                                default: withCtx(() => [
+                                  createVNode(_component_el_button, {
+                                    circle: "",
+                                    type: isSelectedMonth(item) ? "primary" : "",
+                                    onClick: ($event) => selectMonth(item)
+                                  }, {
+                                    default: withCtx(() => [
+                                      createCommentVNode(" \u4F7F\u7528 padStart \u4F18\u96C5\u5730\u8865\u96F6\uFF0C\u4F8B\u5982 7 -> '07' "),
+                                      createTextVNode(
+                                        " " + toDisplayString(String(item).padStart(2, "0")),
+                                        1
+                                        /* TEXT */
+                                      )
+                                    ]),
+                                    _: 2
+                                    /* DYNAMIC */
+                                  }, 1032, ["type", "onClick"])
+                                ]),
+                                _: 2
+                                /* DYNAMIC */
+                              },
+                              1024
+                              /* DYNAMIC_SLOTS */
+                            );
+                          }),
+                          64
+                          /* STABLE_FRAGMENT */
+                        ))
+                      ]),
+                      _: 1
+                      /* STABLE */
+                    })
+                  ],
+                  4
+                  /* STYLE */
+                )
+              ]),
+              _: 1
+              /* STABLE */
+            })
+          ]),
+          default: withCtx(() => [
+            createVNode(_component_el_input, {
+              modelValue: selectedPeriod.value,
+              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => selectedPeriod.value = $event),
+              placeholder: "\u8BF7\u9009\u62E9\u4F1A\u8BA1\u671F\u95F4",
+              readonly: "",
+              style: normalizeStyle({ width: __props.inputWidth, cursor: "pointer" })
+            }, {
+              suffix: withCtx(() => [
+                createVNode(_component_el_icon, null, {
+                  default: withCtx(() => [
+                    createVNode(unref(Calendar))
+                  ]),
+                  _: 1
+                  /* STABLE */
+                })
+              ]),
+              _: 1
+              /* STABLE */
+            }, 8, ["modelValue", "style"])
+          ]),
+          _: 1
+          /* STABLE */
+        },
+        512
+        /* NEED_PATCH */
+      );
+    };
+  }
+});
+
+export { _sfc_main as default };

package/es/packages/components/index.mjs

@@ -16,3 +16,4 @@ export { Fminputdropdown } from './fm-inputdropdown/index.mjs';
 export { FmInputNumber } from './fm-inputnumber/index.mjs';
 export { FmAutocomplete } from './fm-autocomplete/index.mjs';
 export { Fmdatepicker } from './fm-datepicker/index.mjs';
+export { FmPeriod } from './fm-period/index.mjs';