@yimou6/common-ui 1.6.1

package/lib/components/search/src/search.vue.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var search_vue_vue_type_script_setup_true_lang = require('./search.vue2.js');
+
+
+
+exports.default = search_vue_vue_type_script_setup_true_lang.default;
+//# sourceMappingURL=search.vue.js.map

package/lib/components/search/src/search.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"search.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/lib/components/search/src/search.vue2.js

@@ -0,0 +1,125 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var elementPlus = require('element-plus');
+require('../../../utils/index.js');
+require('../../form/src/form.vue.js');
+var search = require('./search.js');
+var util = require('../../../utils/util.js');
+var form_vue_vue_type_script_setup_true_lang = require('../../form/src/form.vue2.js');
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+const _hoisted_1 = { class: "t-search" };
+const _hoisted_2 = { class: "t-search__opera" };
+var _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...{
+    name: "ISearch"
+  },
+  __name: "search",
+  props: search.SearchProps,
+  emits: search.SearchEmits,
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const bindAttrs = vue.ref();
+    vue.watchEffect(() => {
+      const attrs = util.excludeObjectKeys(props, search.excludeSearchPropsKeys);
+      if (!attrs.fileds) {
+        attrs.fileds = [];
+      }
+      if (!attrs.fields.some((item) => item.prop === "searchBtn")) {
+        attrs.fields.push({
+          prop: "searchBtn",
+          comp: "slot"
+        });
+      }
+      bindAttrs.value = attrs;
+    });
+    const formRef = vue.ref();
+    __expose({
+      getRef() {
+        var _a;
+        return (_a = formRef.value) == null ? void 0 : _a.getRef();
+      }
+    });
+    const handleChange = /* @__PURE__ */ __name((key, value, ref2, comp) => {
+      emit("change", key, value, ref2, comp);
+      if (comp === "el-input") {
+      }
+    }, "handleChange");
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+        vue.createVNode(
+          form_vue_vue_type_script_setup_true_lang.default,
+          vue.mergeProps({
+            ref_key: "formRef",
+            ref: formRef
+          }, bindAttrs.value, { onChange: handleChange }),
+          vue.createSlots({
+            searchBtn: vue.withCtx(() => [
+              vue.createElementVNode("div", _hoisted_2, [
+                _ctx.showDefaultBtn ? (vue.openBlock(), vue.createElementBlock(
+                  vue.Fragment,
+                  { key: 0 },
+                  [
+                    vue.createVNode(vue.unref(elementPlus.ElButton), {
+                      type: "primary",
+                      loading: _ctx.loading,
+                      onClick: _cache[0] || (_cache[0] = ($event) => emit("search", _ctx.model))
+                    }, {
+                      default: vue.withCtx(() => [
+                        vue.createTextVNode(
+                          vue.toDisplayString(_ctx.searchBtnText),
+                          1
+                          /* TEXT */
+                        )
+                      ]),
+                      _: 1
+                      /* STABLE */
+                    }, 8, ["loading"]),
+                    vue.createVNode(vue.unref(elementPlus.ElButton), {
+                      loading: _ctx.loading,
+                      onClick: _cache[1] || (_cache[1] = ($event) => emit("reset"))
+                    }, {
+                      default: vue.withCtx(() => [
+                        vue.createTextVNode(
+                          vue.toDisplayString(_ctx.resetBtnText),
+                          1
+                          /* TEXT */
+                        )
+                      ]),
+                      _: 1
+                      /* STABLE */
+                    }, 8, ["loading"])
+                  ],
+                  64
+                  /* STABLE_FRAGMENT */
+                )) : vue.createCommentVNode("v-if", true),
+                _ctx.$slots.btn ? vue.renderSlot(_ctx.$slots, "btn", { key: 1 }) : vue.createCommentVNode("v-if", true)
+              ])
+            ]),
+            _: 2
+            /* DYNAMIC */
+          }, [
+            vue.renderList(_ctx.$slots, (item, key) => {
+              return {
+                name: key,
+                fn: vue.withCtx(() => [
+                  key !== "searchBtn" && key !== "btn" ? vue.renderSlot(_ctx.$slots, key, vue.normalizeProps(vue.mergeProps({ key: 0 }, item))) : vue.createCommentVNode("v-if", true)
+                ])
+              };
+            })
+          ]),
+          1040
+          /* FULL_PROPS, DYNAMIC_SLOTS */
+        )
+      ]);
+    };
+  }
+});
+
+exports.default = _sfc_main;
+//# sourceMappingURL=search.vue2.js.map

package/lib/components/search/src/search.vue2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"search.vue2.js","sources":["../../../../../../../packages/components/search/src/search.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import { ElButton } from 'element-plus';\n  import { ref, watchEffect } from 'vue';\n  import { excludeObjectKeys } from '../../../utils';\n  import IForm from '../../form/src/form.vue';\n  import { excludeSearchPropsKeys, SearchEmits, SearchProps } from './search';\n\n  defineOptions({\n    name: 'ISearch',\n  });\n  const props = defineProps(SearchProps);\n  const emit = defineEmits(SearchEmits);\n\n  const bindAttrs = ref<any>();\n  watchEffect(() => {\n    const attrs = excludeObjectKeys(props, excludeSearchPropsKeys);\n    if (!attrs.fileds) {\n      attrs.fileds = [];\n    }\n    if (!attrs.fields.some((item: any) => item.prop === 'searchBtn')) {\n      attrs.fields.push({\n        prop: 'searchBtn',\n        comp: 'slot',\n      });\n    }\n    bindAttrs.value = attrs;\n  });\n\n  const formRef = ref();\n  defineExpose({\n    getRef() {\n      return formRef.value?.getRef();\n    },\n  });\n\n  const handleChange = (key: string, value: any, ref: any, comp: string) => {\n    emit('change', key, value, ref, comp);\n    if (comp === 'el-input') {\n      // el-input change 调用查询事件\n      // 即在输入框值变化和按下回车时，触发查询事件。\n      // emit('search', props.model);\n    }\n  };\n</script>\n\n<template>\n  <div class=\"t-search\">\n    <IForm ref=\"formRef\" v-bind=\"bindAttrs\" @change=\"handleChange\">\n      <template v-for=\"(item, key) in $slots\" :key=\"key\" #[key]>\n        <slot v-if=\"key !== 'searchBtn' && key !== 'btn'\" :name=\"key\" v-bind=\"item\" />\n      </template>\n      <template #searchBtn>\n        <div class=\"t-search__opera\">\n          <template v-if=\"showDefaultBtn\">\n            <ElButton type=\"primary\" :loading=\"loading\" @click=\"emit('search', model)\">{{ searchBtnText }}</ElButton>\n            <ElButton :loading=\"loading\" @click=\"emit('reset')\">{{ resetBtnText }}</ElButton>\n          </template>\n          <template v-if=\"$slots.btn\">\n            <slot name=\"btn\" />\n          </template>\n        </div>\n      </template>\n    </IForm>\n  </div>\n</template>\n"],"names":["ref","watchEffect","excludeObjectKeys","excludeSearchPropsKeys"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAUE,IAAA,MAAM,KAAQ,GAAA,OAAA;AACd,IAAA,MAAM,IAAO,GAAA,MAAA;AAEb,IAAA,MAAM,YAAYA,OAAS,EAAA;AAC3B,IAAAC,eAAA,CAAY,MAAM;AAChB,MAAM,MAAA,KAAA,GAAQC,sBAAkB,CAAA,KAAA,EAAOC,6BAAsB,CAAA;AAC7D,MAAI,IAAA,CAAC,MAAM,MAAQ,EAAA;AACjB,QAAA,KAAA,CAAM,SAAS,EAAC;AAAA;AAElB,MAAI,IAAA,CAAC,MAAM,MAAO,CAAA,IAAA,CAAK,CAAC,IAAc,KAAA,IAAA,CAAK,IAAS,KAAA,WAAW,CAAG,EAAA;AAChE,QAAA,KAAA,CAAM,OAAO,IAAK,CAAA;AAAA,UAChB,IAAM,EAAA,WAAA;AAAA,UACN,IAAM,EAAA;AAAA,SACP,CAAA;AAAA;AAEH,MAAA,SAAA,CAAU,KAAQ,GAAA,KAAA;AAAA,KACnB,CAAA;AAED,IAAA,MAAM,UAAUH,OAAI,EAAA;AACpB,IAAa,QAAA,CAAA;AAAA,MACX,MAAS,GAAA;;AACP,QAAO,OAAA,CAAA,EAAA,GAAA,OAAA,CAAQ,UAAR,IAAe,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,MAAA,EAAA;AAAA;AACxB,KACD,CAAA;AAED,IAAA,MAAM,YAAe,mBAAA,MAAA,CAAA,CAAC,GAAa,EAAA,KAAA,EAAYA,MAAU,IAAiB,KAAA;AACxE,MAAA,IAAA,CAAK,QAAU,EAAA,GAAA,EAAK,KAAOA,EAAAA,IAAAA,EAAK,IAAI,CAAA;AACpC,MAAA,IAAI,SAAS,UAAY,EAAA;AAAA;AAIzB,KANmB,EAAA,cAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/components/segmented/index.d.ts

@@ -0,0 +1,77 @@
+export declare const ISegmented: import("../../types").SFCWithInstall<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    block: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    segments: {
+        type: import("vue").PropType<Record<string, any>[]>;
+        default: () => never[];
+    };
+    size: {
+        type: import("vue").PropType<"small" | "default" | "large" | "">;
+        default: string;
+    };
+    modelValue: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+}>, {
+    props: import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
+        block: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        segments: {
+            type: import("vue").PropType<Record<string, any>[]>;
+            default: () => never[];
+        };
+        size: {
+            type: import("vue").PropType<"small" | "default" | "large" | "">;
+            default: string;
+        };
+        modelValue: {
+            type: (StringConstructor | NumberConstructor)[];
+            default: string;
+        };
+    }>> & Readonly<{
+        "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+        onChange?: ((...args: any[]) => any) | undefined;
+    }> & {}>;
+    emits: (event: "update:modelValue" | "change", ...args: any[]) => void;
+    segmentedControl: import("vue").Ref<HTMLElement | null, HTMLElement | null>;
+    activeSegment: import("vue").Ref<number, number>;
+    buttonWidths: import("vue").Ref<number[], number[]>;
+    cw: import("vue").Ref<number, number>;
+    updateButtonWidths: () => void;
+    activeOffset: import("vue").ComputedRef<string>;
+    selectSegment: (index: number, disabled?: boolean) => void;
+    slots: Readonly<{
+        [name: string]: import("vue").Slot<any> | undefined;
+    }>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "change")[], "update:modelValue" | "change", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    block: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    segments: {
+        type: import("vue").PropType<Record<string, any>[]>;
+        default: () => never[];
+    };
+    size: {
+        type: import("vue").PropType<"small" | "default" | "large" | "">;
+        default: string;
+    };
+    modelValue: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onChange?: ((...args: any[]) => any) | undefined;
+}>, {
+    modelValue: string | number;
+    size: "" | "small" | "large" | "default";
+    block: boolean;
+    segments: Record<string, any>[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>>;
+export default ISegmented;

package/lib/components/segmented/index.js

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var install = require('../../utils/install.js');
+require('./src/segmented.vue.js');
+var segmented_vue_vue_type_script_setup_true_lang = require('./src/segmented.vue2.js');
+
+const ISegmented = install.withInstall(segmented_vue_vue_type_script_setup_true_lang.default);
+
+exports.ISegmented = ISegmented;
+exports.default = ISegmented;
+//# sourceMappingURL=index.js.map

package/lib/components/segmented/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../packages/components/segmented/index.ts"],"sourcesContent":["import { withInstall } from '../../utils/install';\nimport Segmented from './src/segmented.vue';\n\nexport const ISegmented = withInstall(Segmented); // 增加类型\n\nexport default ISegmented;\n"],"names":["withInstall","Segmented"],"mappings":";;;;;;;;AAGa,MAAA,UAAA,GAAaA,oBAAYC,qDAAS;;;;;"}

package/lib/components/segmented/src/segmented.d.ts

@@ -0,0 +1,22 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+import type Segmented from './segmented.vue';
+export declare const SegmentedProps: {
+    block: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    segments: {
+        type: PropType<Record<string, any>[]>;
+        default: () => never[];
+    };
+    size: {
+        type: PropType<"small" | "default" | "large" | "">;
+        default: string;
+    };
+    modelValue: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+};
+export type SegmentedPropsType = ExtractPropTypes<typeof SegmentedProps>;
+export type SegmentedInstance = InstanceType<typeof Segmented>;

package/lib/components/segmented/src/segmented.js

@@ -0,0 +1,25 @@
+'use strict';
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+const SegmentedProps = {
+  block: {
+    type: Boolean,
+    default: false
+  },
+  segments: {
+    type: Array,
+    default: /* @__PURE__ */ __name(() => [], "default")
+  },
+  size: {
+    type: String,
+    default: ""
+  },
+  modelValue: {
+    type: [String, Number],
+    default: ""
+  }
+};
+
+exports.SegmentedProps = SegmentedProps;
+//# sourceMappingURL=segmented.js.map

package/lib/components/segmented/src/segmented.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"segmented.js","sources":["../../../../../../../packages/components/segmented/src/segmented.ts"],"sourcesContent":["import type { ExtractPropTypes, PropType } from 'vue';\nimport type Segmented from './segmented.vue';\n\nexport const SegmentedProps = {\n  block: {\n    type: Boolean,\n    default: false,\n  },\n  segments: {\n    type: Array as PropType<Record<string, any>[]>,\n    default: () => [],\n  },\n  size: {\n    type: String as PropType<'small' | 'default' | 'large' | ''>,\n    default: '',\n  },\n  modelValue: {\n    type: [String, Number],\n    default: '',\n  },\n};\n\nexport type SegmentedPropsType = ExtractPropTypes<typeof SegmentedProps>;\nexport type SegmentedInstance = InstanceType<typeof Segmented>;\n"],"names":[],"mappings":";;;;AAGO,MAAM,cAAiB,GAAA;AAAA,EAC5B,KAAO,EAAA;AAAA,IACL,IAAM,EAAA,OAAA;AAAA,IACN,OAAS,EAAA;AAAA,GACX;AAAA,EACA,QAAU,EAAA;AAAA,IACR,IAAM,EAAA,KAAA;AAAA,IACN,OAAA,kBAAe,MAAA,CAAA,MAAA,EAAN,EAAA,SAAA;AAAA,GACX;AAAA,EACA,IAAM,EAAA;AAAA,IACJ,IAAM,EAAA,MAAA;AAAA,IACN,OAAS,EAAA;AAAA,GACX;AAAA,EACA,UAAY,EAAA;AAAA,IACV,IAAA,EAAM,CAAC,MAAA,EAAQ,MAAM,CAAA;AAAA,IACrB,OAAS,EAAA;AAAA;AAEb;;;;"}

package/lib/components/segmented/src/segmented.vue.d.ts

@@ -0,0 +1,77 @@
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    block: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    segments: {
+        type: import("vue").PropType<Record<string, any>[]>;
+        default: () => never[];
+    };
+    size: {
+        type: import("vue").PropType<"small" | "default" | "large" | "">;
+        default: string;
+    };
+    modelValue: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+}>, {
+    props: import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
+        block: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        segments: {
+            type: import("vue").PropType<Record<string, any>[]>;
+            default: () => never[];
+        };
+        size: {
+            type: import("vue").PropType<"small" | "default" | "large" | "">;
+            default: string;
+        };
+        modelValue: {
+            type: (StringConstructor | NumberConstructor)[];
+            default: string;
+        };
+    }>> & Readonly<{
+        "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+        onChange?: ((...args: any[]) => any) | undefined;
+    }> & {}>;
+    emits: (event: "update:modelValue" | "change", ...args: any[]) => void;
+    segmentedControl: import("vue").Ref<HTMLElement | null, HTMLElement | null>;
+    activeSegment: import("vue").Ref<number, number>;
+    buttonWidths: import("vue").Ref<number[], number[]>;
+    cw: import("vue").Ref<number, number>;
+    updateButtonWidths: () => void;
+    activeOffset: import("vue").ComputedRef<string>;
+    selectSegment: (index: number, disabled?: boolean) => void;
+    slots: Readonly<{
+        [name: string]: import("vue").Slot<any> | undefined;
+    }>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "change")[], "update:modelValue" | "change", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    block: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    segments: {
+        type: import("vue").PropType<Record<string, any>[]>;
+        default: () => never[];
+    };
+    size: {
+        type: import("vue").PropType<"small" | "default" | "large" | "">;
+        default: string;
+    };
+    modelValue: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onChange?: ((...args: any[]) => any) | undefined;
+}>, {
+    modelValue: string | number;
+    size: "" | "small" | "large" | "default";
+    block: boolean;
+    segments: Record<string, any>[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/lib/components/segmented/src/segmented.vue.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var segmented_vue_vue_type_script_setup_true_lang = require('./segmented.vue2.js');
+
+
+
+exports.default = segmented_vue_vue_type_script_setup_true_lang.default;
+//# sourceMappingURL=segmented.vue.js.map

package/lib/components/segmented/src/segmented.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"segmented.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/lib/components/segmented/src/segmented.vue2.js

@@ -0,0 +1,126 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var core = require('@vueuse/core');
+var segmented = require('./segmented.js');
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+const _hoisted_1 = { class: "i-segmented-control" };
+const _hoisted_2 = ["onClick"];
+const _hoisted_3 = ["title"];
+var _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...{
+    name: "ISegmented"
+  },
+  __name: "segmented",
+  props: segmented.SegmentedProps,
+  emits: ["update:modelValue", "change"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const segmentedControl = vue.ref(null);
+    const activeSegment = vue.ref(-1);
+    const buttonWidths = vue.ref([]);
+    const { width: cw } = core.useElementSize(segmentedControl);
+    const updateButtonWidths = /* @__PURE__ */ __name(() => {
+      vue.nextTick(() => {
+        setTimeout(() => {
+          var _a;
+          const buttons = ((_a = segmentedControl.value) == null ? void 0 : _a.querySelectorAll(".i-segmented-control__item")) || [];
+          buttonWidths.value = Array.from(buttons).map((button) => {
+            return button.getBoundingClientRect().width;
+          });
+          activeSegment.value = props.segments.findIndex((it) => it.value === props.modelValue);
+        }, 100);
+      });
+    }, "updateButtonWidths");
+    vue.onMounted(() => {
+      updateButtonWidths();
+      window.addEventListener("resize", updateButtonWidths);
+    });
+    vue.watch(
+      () => props.modelValue,
+      (newValue) => {
+        activeSegment.value = props.segments.findIndex((it) => it.value === newValue);
+      }
+    );
+    vue.onUnmounted(() => {
+      window.removeEventListener("resize", updateButtonWidths);
+    });
+    const activeOffset = vue.computed(() => {
+      if (buttonWidths.value.length === 0) return "0px";
+      const offset = buttonWidths.value.slice(0, activeSegment.value).reduce((sum, width) => sum + width, 0);
+      return `${offset}px`;
+    });
+    const selectSegment = /* @__PURE__ */ __name((index, disabled) => {
+      if (disabled) return;
+      activeSegment.value = index;
+      vue.nextTick(() => {
+        emits("update:modelValue", props.segments[index].value);
+        emits("change", props.segments[index].value);
+      });
+    }, "selectSegment");
+    const slots = vue.useSlots();
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock(
+        "div",
+        {
+          ref_key: "segmentedControl",
+          ref: segmentedControl,
+          class: vue.normalizeClass(["i-segmented", [`i-segmented__${_ctx.size || "default"}`]])
+        },
+        [
+          vue.createElementVNode("div", _hoisted_1, [
+            vue.createCommentVNode(" \u5206\u6BB5\u6309\u94AE "),
+            (vue.openBlock(true), vue.createElementBlock(
+              vue.Fragment,
+              null,
+              vue.renderList(_ctx.segments, (segment, index) => {
+                return vue.openBlock(), vue.createElementBlock("div", {
+                  key: index,
+                  class: vue.normalizeClass(["i-segmented-control__item", { active: activeSegment.value === index, "i-segmented-control__disabled": segment.disabled }]),
+                  onClick: /* @__PURE__ */ __name(($event) => selectSegment(index, segment.disabled), "onClick")
+                }, [
+                  vue.unref(slots).default ? vue.renderSlot(_ctx.$slots, "default", {
+                    key: 0,
+                    segment,
+                    index
+                  }) : (vue.openBlock(), vue.createElementBlock("span", {
+                    key: 1,
+                    class: "i-segmented-label",
+                    style: vue.normalizeStyle({ width: _ctx.block ? `${vue.unref(cw) / _ctx.segments.length - 20}px` : "100%" }),
+                    title: segment.label
+                  }, vue.toDisplayString(segment.label), 13, _hoisted_3))
+                ], 10, _hoisted_2);
+              }),
+              128
+              /* KEYED_FRAGMENT */
+            )),
+            vue.createCommentVNode(" \u5E73\u79FB\u52A8\u6548\u6307\u793A\u5668 "),
+            vue.createElementVNode(
+              "span",
+              {
+                class: "indicator",
+                style: vue.normalizeStyle({
+                  transform: `translateX(${activeOffset.value})`,
+                  width: _ctx.block ? `calc(100% / ${_ctx.segments.length})` : `${buttonWidths.value[activeSegment.value]}px`
+                })
+              },
+              null,
+              4
+              /* STYLE */
+            )
+          ])
+        ],
+        2
+        /* CLASS */
+      );
+    };
+  }
+});
+
+exports.default = _sfc_main;
+//# sourceMappingURL=segmented.vue2.js.map

package/lib/components/segmented/src/segmented.vue2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"segmented.vue2.js","sources":["../../../../../../../packages/components/segmented/src/segmented.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import { useElementSize } from '@vueuse/core';\n  import { computed, nextTick, onMounted, onUnmounted, ref, useSlots, watch } from 'vue';\n  import { SegmentedProps } from './segmented';\n\n  defineOptions({\n    name: 'ISegmented',\n  });\n\n  const props = defineProps(SegmentedProps);\n  const emits = defineEmits(['update:modelValue', 'change']);\n\n  // ref 引用\n  const segmentedControl = ref<HTMLElement | null>(null);\n  // 当前选中的索引\n  const activeSegment = ref(-1);\n\n  // 获取每个按钮的宽度\n  const buttonWidths = ref<number[]>([]);\n\n  const { width: cw } = useElementSize(segmentedControl);\n\n  // 更新按钮宽度\n  const updateButtonWidths = () => {\n    nextTick(() => {\n      setTimeout(() => {\n        // 同样增加延迟以确保样式已完全应用\n        const buttons = segmentedControl.value?.querySelectorAll('.i-segmented-control__item') || [];\n        buttonWidths.value = Array.from(buttons).map(button => {\n          return button.getBoundingClientRect().width;\n        });\n        activeSegment.value = props.segments.findIndex(it => it.value === props.modelValue);\n      }, 100); // 延迟 100ms\n    });\n  };\n\n  // 在组件挂载后获取按钮宽度\n  onMounted(() => {\n    updateButtonWidths();\n    // 监听窗口大小变化，重新计算按钮宽度\n    window.addEventListener('resize', updateButtonWidths);\n  });\n\n  // 监听 modelValue 的变化\n  watch(\n    () => props.modelValue,\n    newValue => {\n      activeSegment.value = props.segments.findIndex(it => it.value === newValue);\n    },\n  );\n\n  // 在组件卸载时移除 resize 事件监听\n  onUnmounted(() => {\n    window.removeEventListener('resize', updateButtonWidths);\n  });\n\n  // 计算当前激活分段的样式偏移量\n  const activeOffset = computed(() => {\n    if (buttonWidths.value.length === 0) return '0px';\n    const offset = buttonWidths.value.slice(0, activeSegment.value).reduce((sum, width) => sum + width, 0);\n    return `${offset}px`;\n  });\n\n  // 切换分段的方法\n  const selectSegment = (index: number, disabled?: boolean) => {\n    if (disabled) return;\n    activeSegment.value = index;\n    nextTick(() => {\n      emits('update:modelValue', props.segments[index].value);\n      emits('change', props.segments[index].value);\n    });\n  };\n\n  const slots = useSlots();\n</script>\n\n<template>\n  <div ref=\"segmentedControl\" class=\"i-segmented\" :class=\"[`i-segmented__${size || 'default'}`]\">\n    <div class=\"i-segmented-control\">\n      <!-- 分段按钮 -->\n      <div\n        v-for=\"(segment, index) in segments\"\n        :key=\"index\"\n        class=\"i-segmented-control__item\"\n        :class=\"{ active: activeSegment === index, 'i-segmented-control__disabled': segment.disabled }\"\n        @click=\"selectSegment(index, segment.disabled)\"\n      >\n        <slot v-if=\"slots.default\" name=\"default\" :segment=\"segment\" :index=\"index\" />\n        <span\n          v-else\n          class=\"i-segmented-label\"\n          :style=\"{ width: block ? `${cw / segments.length - 20}px` : '100%' }\"\n          :title=\"segment.label\"\n          >{{ segment.label }}</span\n        >\n      </div>\n\n      <!-- 平移动效指示器 -->\n      <span\n        class=\"indicator\"\n        :style=\"{\n          transform: `translateX(${activeOffset})`,\n          width: block ? `calc(100% / ${segments.length})` : `${buttonWidths[activeSegment]}px`,\n        }\"\n      />\n    </div>\n  </div>\n</template>\n"],"names":["ref","useElementSize","nextTick","onMounted","watch","onUnmounted","computed","useSlots"],"mappings":";;;;;;;;;;;;;;;;;;;;;AASE,IAAA,MAAM,KAAQ,GAAA,OAAA;AACd,IAAA,MAAM,KAAQ,GAAA,MAAA;AAGd,IAAM,MAAA,gBAAA,GAAmBA,QAAwB,IAAI,CAAA;AAErD,IAAM,MAAA,aAAA,GAAgBA,QAAI,CAAE,CAAA,CAAA;AAG5B,IAAM,MAAA,YAAA,GAAeA,OAAc,CAAA,EAAE,CAAA;AAErC,IAAA,MAAM,EAAE,KAAA,EAAO,EAAG,EAAA,GAAIC,oBAAe,gBAAgB,CAAA;AAGrD,IAAA,MAAM,qCAA2B,MAAA,CAAA,MAAA;AAC/B,MAAAC,YAAA,CAAS,MAAM;AACb,QAAA,UAAA,CAAW,MAAM;;AAEf,UAAA,MAAM,YAAU,EAAiB,GAAA,gBAAA,CAAA,KAAA,KAAjB,IAAwB,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,gBAAA,CAAiB,kCAAiC,EAAC;AAC3F,UAAA,YAAA,CAAa,QAAQ,KAAM,CAAA,IAAA,CAAK,OAAO,CAAA,CAAE,IAAI,CAAU,MAAA,KAAA;AACrD,YAAO,OAAA,MAAA,CAAO,uBAAwB,CAAA,KAAA;AAAA,WACvC,CAAA;AACD,UAAc,aAAA,CAAA,KAAA,GAAQ,MAAM,QAAS,CAAA,SAAA,CAAU,QAAM,EAAG,CAAA,KAAA,KAAU,MAAM,UAAU,CAAA;AAAA,WACjF,GAAG,CAAA;AAAA,OACP,CAAA;AAAA,KAVwB,EAAA,oBAAA,CAAA;AAc3B,IAAAC,aAAA,CAAU,MAAM;AACd,MAAmB,kBAAA,EAAA;AAEnB,MAAO,MAAA,CAAA,gBAAA,CAAiB,UAAU,kBAAkB,CAAA;AAAA,KACrD,CAAA;AAGD,IAAAC,SAAA;AAAA,MACE,MAAM,KAAM,CAAA,UAAA;AAAA,MACZ,CAAY,QAAA,KAAA;AACV,QAAA,aAAA,CAAc,QAAQ,KAAM,CAAA,QAAA,CAAS,UAAU,CAAM,EAAA,KAAA,EAAA,CAAG,UAAU,QAAQ,CAAA;AAAA;AAC5E,KACF;AAGA,IAAAC,eAAA,CAAY,MAAM;AAChB,MAAO,MAAA,CAAA,mBAAA,CAAoB,UAAU,kBAAkB,CAAA;AAAA,KACxD,CAAA;AAGD,IAAM,MAAA,YAAA,GAAeC,aAAS,MAAM;AAClC,MAAA,IAAI,YAAa,CAAA,KAAA,CAAM,MAAW,KAAA,CAAA,EAAU,OAAA,KAAA;AAC5C,MAAA,MAAM,MAAS,GAAA,YAAA,CAAa,KAAM,CAAA,KAAA,CAAM,GAAG,aAAc,CAAA,KAAK,CAAE,CAAA,MAAA,CAAO,CAAC,GAAA,EAAK,KAAU,KAAA,GAAA,GAAM,OAAO,CAAC,CAAA;AACrG,MAAA,OAAO,GAAG,MAAM,CAAA,EAAA,CAAA;AAAA,KACjB,CAAA;AAGD,IAAM,MAAA,aAAA,mBAAiB,MAAA,CAAA,CAAA,KAAA,EAAe,QAAuB,KAAA;AAC3D,MAAA,IAAI,QAAU,EAAA;AACd,MAAA,aAAA,CAAc,KAAQ,GAAA,KAAA;AACtB,MAAAJ,YAAA,CAAS,MAAM;AACb,QAAA,KAAA,CAAM,mBAAqB,EAAA,KAAA,CAAM,QAAS,CAAA,KAAK,EAAE,KAAK,CAAA;AACtD,QAAA,KAAA,CAAM,QAAU,EAAA,KAAA,CAAM,QAAS,CAAA,KAAK,EAAE,KAAK,CAAA;AAAA,OAC5C,CAAA;AAAA,KANmB,EAAA,eAAA,CAAA;AAStB,IAAA,MAAM,QAAQK,YAAS,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}