qy-better-lib 0.0.1

package/packages/pc_components/lib/contextMenu/src/index.vue.js

@@ -0,0 +1,153 @@
+import { defineComponent, useModel, ref, reactive, watch, onMounted, onBeforeUnmount, nextTick, resolveComponent, openBlock, createBlock, Teleport, withDirectives, createElementBlock, normalizeStyle, createElementVNode, Fragment, renderList, normalizeClass, renderSlot, createTextVNode, toDisplayString, unref, createCommentVNode, mergeModels } from "vue";
+import { ClickOutside } from "@qy_better_lib/core";
+import { props } from "./props.js";
+const _hoisted_1 = { class: "contextmenu-wrap" };
+const _hoisted_2 = { class: "contextmenu-items" };
+const _hoisted_3 = ["onClick"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "index",
+  props: /* @__PURE__ */ mergeModels(props(), {
+    "visible": {
+      type: Boolean,
+      default: false
+    },
+    "visibleModifiers": {}
+  }),
+  emits: /* @__PURE__ */ mergeModels(["menu_click", "show", "hide"], ["update:visible"]),
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props2 = __props;
+    const visible = useModel(__props, "visible");
+    const emit = __emit;
+    __expose({
+      hide,
+      show
+    });
+    const context_menu_ref = ref(null);
+    const position = reactive({
+      left: "0px",
+      top: "0px"
+    });
+    watch(() => visible.value, (val) => {
+      if (val) {
+        show_menu(props2.position);
+      } else {
+        hide_menu();
+      }
+    }, { immediate: true });
+    onMounted(() => {
+      add_context_menu_event();
+    });
+    onBeforeUnmount(() => {
+      remove_context_menu_event();
+    });
+    function add_context_menu_event() {
+      if (context_menu_ref.value && !props2.disabled) {
+        context_menu_ref.value.addEventListener("contextmenu", handle_context_menu);
+      }
+    }
+    function remove_context_menu_event() {
+      if (context_menu_ref.value) {
+        context_menu_ref.value.removeEventListener("contextmenu", handle_context_menu);
+      }
+    }
+    async function handle_context_menu(e) {
+      if (props2.disabled) return;
+      e.preventDefault();
+      e.stopPropagation();
+      await show_menu({ x: e.pageX, y: e.pageY });
+    }
+    async function show(event) {
+      if (props2.disabled) return;
+      let position2;
+      if ("pageX" in event && "pageY" in event) {
+        event.preventDefault();
+        event.stopPropagation();
+        position2 = { x: event.pageX, y: event.pageY };
+      } else {
+        position2 = event;
+      }
+      await show_menu(position2);
+    }
+    async function show_menu(pos) {
+      visible.value = true;
+      emit("show");
+      await nextTick();
+      set_position(pos);
+    }
+    function hide() {
+      hide_menu();
+    }
+    function hide_menu() {
+      visible.value = false;
+      emit("hide");
+    }
+    function set_position(pos) {
+      if (!context_menu_ref.value) return;
+      const menu_rect = context_menu_ref.value.getBoundingClientRect();
+      const { width, height } = menu_rect;
+      if (!width || !height) return;
+      const { top, left } = calculate_menu_position(pos, { width, height });
+      position.top = `${top}px`;
+      position.left = `${left}px`;
+    }
+    function calculate_menu_position(pos, size) {
+      const window_height = window.innerHeight;
+      const scroll_top = window.scrollY;
+      let top = pos.y - scroll_top;
+      if (top + size.height > window_height) {
+        top = Math.max(0, top - size.height);
+      }
+      top += scroll_top;
+      const window_width = window.innerWidth;
+      const scroll_left = window.scrollX;
+      let left = pos.x - scroll_left;
+      if (left + size.width > window_width) {
+        left = Math.max(0, left - size.width);
+      }
+      left += scroll_left;
+      return { top, left };
+    }
+    function on_menu_click(item) {
+      if (item.disabled) return;
+      emit("menu_click", item);
+      hide_menu();
+    }
+    return (_ctx, _cache) => {
+      const _component_el_divider = resolveComponent("el-divider");
+      return openBlock(), createBlock(Teleport, { to: "body" }, [
+        visible.value ? withDirectives((openBlock(), createElementBlock("div", {
+          key: 0,
+          class: "contextmenu",
+          style: normalizeStyle({ top: position.top, left: position.left }),
+          ref_key: "context_menu_ref",
+          ref: context_menu_ref
+        }, [
+          createElementVNode("div", _hoisted_1, [
+            createElementVNode("ul", _hoisted_2, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.options, (item) => {
+                return openBlock(), createElementBlock(Fragment, {
+                  key: item.key
+                }, [
+                  item.type === "divider" ? (openBlock(), createBlock(_component_el_divider, { key: 0 })) : (openBlock(), createElementBlock("li", {
+                    key: 1,
+                    class: normalizeClass(["contextmenu-item", { "disabled": item.disabled }]),
+                    onClick: ($event) => on_menu_click(item)
+                  }, [
+                    renderSlot(_ctx.$slots, "item", { data: item }, () => [
+                      createTextVNode(toDisplayString(item.label), 1)
+                    ])
+                  ], 10, _hoisted_3))
+                ], 64);
+              }), 128))
+            ])
+          ])
+        ], 4)), [
+          [unref(ClickOutside), hide_menu]
+        ]) : createCommentVNode("", true)
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/packages/pc_components/lib/contextMenu/src/index.vue2.js

@@ -0,0 +1,4 @@
+import _sfc_main from "./index.vue.js";
+export {
+  _sfc_main as default
+};

package/packages/pc_components/lib/contextMenu/src/props.d.ts

@@ -0,0 +1,32 @@
+import { PropType } from 'vue';
+import { ContextMenuItem, MenuPosition } from './type';
+/**
+ * 右键菜单组件属性定义
+ */
+export declare const props: () => {
+    /**
+     * 菜单显示位置
+     */
+    position: {
+        type: PropType<MenuPosition>;
+        default: () => {
+            x: number;
+            y: number;
+        };
+    };
+    /**
+     * 菜单项配置
+     */
+    options: {
+        type: PropType<ContextMenuItem[]>;
+        default: () => never[];
+        required: boolean;
+    };
+    /**
+     * 是否禁用右键菜单
+     */
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+};

package/packages/pc_components/lib/contextMenu/src/props.js

@@ -0,0 +1,27 @@
+const props = () => ({
+  /**
+   * 菜单显示位置
+   */
+  position: {
+    type: Object,
+    default: () => ({ x: 0, y: 0 })
+  },
+  /**
+   * 菜单项配置
+   */
+  options: {
+    type: Array,
+    default: () => [],
+    required: true
+  },
+  /**
+   * 是否禁用右键菜单
+   */
+  disabled: {
+    type: Boolean,
+    default: false
+  }
+});
+export {
+  props
+};

package/packages/pc_components/lib/contextMenu/src/type.d.ts

@@ -0,0 +1,11 @@
+export interface ContextMenuItem {
+    key: string;
+    label: string;
+    disabled?: boolean;
+    type?: 'divider';
+    [key: string]: any;
+}
+export interface MenuPosition {
+    x: number;
+    y: number;
+}

package/packages/pc_components/lib/describeView/index.d.ts

@@ -0,0 +1,2 @@
+import { default as describeView } from './src/index.vue';
+export default describeView;

package/packages/pc_components/lib/describeView/index.js

@@ -0,0 +1,7 @@
+import _sfc_main from "./src/index.vue.js";
+_sfc_main.install = (app) => {
+  app.component("DescribeView", _sfc_main);
+};
+export {
+  _sfc_main as default
+};

package/packages/pc_components/lib/describeView/src/index.vue.d.ts

@@ -0,0 +1,61 @@
+import { ViewConfig } from './type';
+import { DefineComponent, ExtractPropTypes, PropType, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Partial<Record<`label_${string}`, (_: {}) => any>> & Partial<Record<`value_${string}`, (_: {
+        data: Record<string, any>;
+    }) => any>> & {
+        header?(_: {}): any;
+        footer?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: DefineComponent<ExtractPropTypes<{
+    config: {
+        type: PropType<Array<ViewConfig>>;
+        default: () => never[];
+    };
+    data: {
+        type: PropType<Record<string, any>>;
+        default: () => {};
+    };
+    column: {
+        type: NumberConstructor;
+        default: number;
+    };
+    labelWidth: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly< ExtractPropTypes<{
+    config: {
+        type: PropType<Array<ViewConfig>>;
+        default: () => never[];
+    };
+    data: {
+        type: PropType<Record<string, any>>;
+        default: () => {};
+    };
+    column: {
+        type: NumberConstructor;
+        default: number;
+    };
+    labelWidth: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+}>> & Readonly<{}>, {
+    data: Record<string, any>;
+    column: number;
+    config: ViewConfig[];
+    labelWidth: string | number;
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/packages/pc_components/lib/describeView/src/index.vue.js

@@ -0,0 +1,84 @@
+import { defineComponent, computed, openBlock, createElementBlock, renderSlot, createElementVNode, normalizeStyle, Fragment, renderList, createTextVNode, toDisplayString } from "vue";
+import { is_number } from "@qy_better_lib/core";
+import { props } from "./props.js";
+const _hoisted_1 = { class: "describe-view-container" };
+const _hoisted_2 = { class: "value" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "index",
+  props: props(),
+  setup(__props) {
+    const props2 = __props;
+    const container_style = computed(() => {
+      return {
+        "grid-template-columns": `repeat(${props2.column}, minmax(1px, 1fr))`
+      };
+    });
+    function item_style(item) {
+      const style = {};
+      if (item.col_span) {
+        style.gridColumnStart = `span ${item.col_span}`;
+      }
+      if (item.row_span) {
+        style.gridRowStart = `span ${item.row_span}`;
+      }
+      return style;
+    }
+    function label_style(index) {
+      let col_number = (index + 1) % props2.column;
+      col_number = col_number === 0 ? props2.column : col_number;
+      let width = 0;
+      if (is_number(props2.labelWidth)) {
+        width = props2.labelWidth;
+      } else {
+        if (props2.labelWidth === "auto") return {};
+        const w_list = props2.labelWidth.split(",");
+        if (w_list.length === 1) {
+          width = props2.labelWidth;
+        } else {
+          width = w_list[col_number - 1] || w_list[0];
+        }
+      }
+      return {
+        width: `${width}px`
+      };
+    }
+    function get_item_value(item) {
+      return props2.data[item.prop] !== void 0 ? props2.data[item.prop] : "--";
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        renderSlot(_ctx.$slots, "header"),
+        createElementVNode("div", {
+          class: "view-content",
+          style: normalizeStyle(container_style.value)
+        }, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.config, (item, index) => {
+            return openBlock(), createElementBlock("div", {
+              key: item.prop,
+              class: "view-item",
+              style: normalizeStyle(item_style(item))
+            }, [
+              createElementVNode("div", {
+                class: "label",
+                style: normalizeStyle(label_style(index))
+              }, [
+                renderSlot(_ctx.$slots, `label_${item.prop}`, {}, () => [
+                  createTextVNode(toDisplayString(`${item.label}：`), 1)
+                ])
+              ], 4),
+              createElementVNode("div", _hoisted_2, [
+                renderSlot(_ctx.$slots, `value_${item.prop}`, { data: _ctx.data }, () => [
+                  createTextVNode(toDisplayString(get_item_value(item)), 1)
+                ])
+              ])
+            ], 4);
+          }), 128))
+        ], 4),
+        renderSlot(_ctx.$slots, "footer")
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/packages/pc_components/lib/describeView/src/index.vue2.js

@@ -0,0 +1,4 @@
+import _sfc_main from "./index.vue.js";
+export {
+  _sfc_main as default
+};

package/packages/pc_components/lib/describeView/src/props.d.ts

@@ -0,0 +1,35 @@
+import { PropType } from 'vue';
+import { ViewConfig } from './type';
+/**
+ * 描述性视图组件属性定义
+ */
+export declare const props: () => {
+    /**
+     * 配置项列表
+     */
+    config: {
+        type: PropType<Array<ViewConfig>>;
+        default: () => never[];
+    };
+    /**
+     * 数据对象
+     */
+    data: {
+        type: PropType<Record<string, any>>;
+        default: () => {};
+    };
+    /**
+     * 展示列数
+     */
+    column: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /**
+     * label宽度：数字或字符串；如果定义多列宽度,使用字符串格式'20,30,50'
+     */
+    labelWidth: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+};

package/packages/pc_components/lib/describeView/src/props.js

@@ -0,0 +1,33 @@
+const props = () => ({
+  /**
+   * 配置项列表
+   */
+  config: {
+    type: Array,
+    default: () => []
+  },
+  /**
+   * 数据对象
+   */
+  data: {
+    type: Object,
+    default: () => ({})
+  },
+  /**
+   * 展示列数
+   */
+  column: {
+    type: Number,
+    default: 3
+  },
+  /**
+   * label宽度：数字或字符串；如果定义多列宽度,使用字符串格式'20,30,50'
+   */
+  labelWidth: {
+    type: [Number, String],
+    default: 85
+  }
+});
+export {
+  props
+};

package/packages/pc_components/lib/describeView/src/type.d.ts

@@ -0,0 +1,10 @@
+export type ViewConfig = {
+    /**标签名 */
+    label: string;
+    /**属性字段 */
+    prop: string;
+    /**跨列 */
+    col_span?: number;
+    /**跨行 */
+    row_span?: number;
+};

package/packages/pc_components/lib/index.d.ts

@@ -0,0 +1,18 @@
+import { default as textButton } from './textButton';
+import { default as tableExtend } from './tableExtend';
+import { default as ContextMenu } from './contextMenu';
+import { default as describeView } from './describeView';
+import { default as simpleVirtualList } from './simpleVirtualList';
+import { default as commDialog } from './commDialog';
+import { default as commForm } from './commForm';
+import { App } from 'vue';
+import { message_alert, message_box, confirm_box, confirm_box_async, notification, close_all_messages, close_all_notifications, close_all_message_boxes } from './utils';
+/**
+ * 安装所有组件
+ * 也可以手动安装所需组件
+*/
+declare function install(app: App): void;
+export type { TableProp, TableColumn } from './tableExtend';
+export type { ContextMenuItem, MenuPosition } from './contextMenu';
+export { install, textButton, tableExtend, ContextMenu, describeView, simpleVirtualList, commDialog, commForm, message_alert, message_box, confirm_box, confirm_box_async, notification, close_all_messages, close_all_notifications, close_all_message_boxes };
+export { ContextMenu as contextMenu };

package/packages/pc_components/lib/index.js

@@ -0,0 +1,40 @@
+import "./textButton/index.js";
+import "./tableExtend/index.js";
+import "./contextMenu/index.js";
+import "./describeView/index.js";
+import "./simpleVirtualList/index.js";
+import "./commDialog/index.js";
+import "./commForm/index.js";
+import { close_all_message_boxes, close_all_messages, close_all_notifications, confirm_box, confirm_box_async, message_alert, message_box, notification } from "./utils/index.js";
+import _sfc_main from "./textButton/src/index.vue.js";
+import _sfc_main$1 from "./tableExtend/src/index.vue.js";
+import _sfc_main$2 from "./contextMenu/src/index.vue.js";
+import _sfc_main$3 from "./describeView/src/index.vue.js";
+import _sfc_main$4 from "./simpleVirtualList/src/index.vue.js";
+import _sfc_main$5 from "./commDialog/src/index.vue.js";
+import _sfc_main$6 from "./commForm/src/index.vue.js";
+const components = [_sfc_main, _sfc_main$1, _sfc_main$2, _sfc_main$3, _sfc_main$4, _sfc_main$5, _sfc_main$6];
+function install(app) {
+  components.forEach((component) => {
+    app.use(component);
+  });
+}
+export {
+  _sfc_main$2 as ContextMenu,
+  close_all_message_boxes,
+  close_all_messages,
+  close_all_notifications,
+  _sfc_main$5 as commDialog,
+  _sfc_main$6 as commForm,
+  confirm_box,
+  confirm_box_async,
+  _sfc_main$2 as contextMenu,
+  _sfc_main$3 as describeView,
+  install,
+  message_alert,
+  message_box,
+  notification,
+  _sfc_main$4 as simpleVirtualList,
+  _sfc_main$1 as tableExtend,
+  _sfc_main as textButton
+};

package/packages/pc_components/lib/simpleVirtualList/index.d.ts

@@ -0,0 +1,2 @@
+import { default as simpleVirtualList } from './src/index.vue';
+export default simpleVirtualList;

package/packages/pc_components/lib/simpleVirtualList/index.js

@@ -0,0 +1,7 @@
+import _sfc_main from "./src/index.vue.js";
+_sfc_main.install = (app) => {
+  app.component("SimpleVirtualList", _sfc_main);
+};
+export {
+  _sfc_main as default
+};

package/packages/pc_components/lib/simpleVirtualList/src/index.vue.d.ts

@@ -0,0 +1,28 @@
+import { VirtualListProps } from './type';
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        item?(_: {
+            item: any;
+        }): any;
+    };
+    refs: {
+        container_ref: HTMLDivElement;
+    };
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: DefineComponent<VirtualListProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<VirtualListProps> & Readonly<{}>, {
+    buffer: number;
+    data_key: string;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {
+    container_ref: HTMLDivElement;
+}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/packages/pc_components/lib/simpleVirtualList/src/index.vue.js

@@ -0,0 +1,101 @@
+import { defineComponent, ref, computed, watch, onMounted, openBlock, createElementBlock, unref, normalizeStyle, createElementVNode, Fragment, renderList, renderSlot, createTextVNode, toDisplayString } from "vue";
+import { throttle } from "@qy_better_lib/core";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "index",
+  props: {
+    data: {},
+    item_height: {},
+    container_height: {},
+    buffer: { default: 5 },
+    data_key: { default: "id" }
+  },
+  setup(__props) {
+    const props = __props;
+    const container_ref = ref();
+    const scroll_cfg = ref({
+      /**起始索引 */
+      start_index: 0,
+      /**结束索引 */
+      end_index: 0,
+      /**可见数量 */
+      visible_count: 0,
+      /**滚动位置 */
+      scroll_top: 0
+    });
+    const list_visible_height = ref(0);
+    const list_height = computed(() => props.data.length * props.item_height);
+    const content_offset_y = computed(() => scroll_cfg.value.start_index * props.item_height);
+    const visible_data = computed(() => {
+      const { start_index, end_index } = scroll_cfg.value;
+      return props.data.slice(start_index, end_index + 1);
+    });
+    watch(() => props.data?.length || 0, () => {
+      init();
+    });
+    onMounted(() => {
+      const container = container_ref.value;
+      list_visible_height.value = props.container_height || container.clientHeight;
+      init();
+    });
+    const throttled_scroll = throttle((e) => on_scroll(e), 80);
+    function init() {
+      if (!container_ref.value) return;
+      const visible_count = Math.ceil(list_visible_height.value / props.item_height);
+      const end_index = Math.min(visible_count + props.buffer * 2, props.data.length - 1);
+      scroll_cfg.value = {
+        start_index: 0,
+        end_index,
+        visible_count,
+        scroll_top: 0
+      };
+    }
+    function on_scroll(e) {
+      const target = e.target;
+      const scroll_top = target.scrollTop;
+      const { visible_count } = scroll_cfg.value;
+      const start_index = Math.floor(scroll_top / props.item_height);
+      const end_index = Math.min(start_index + visible_count + props.buffer * 2, props.data.length - 1);
+      scroll_cfg.value = {
+        start_index: Math.max(0, start_index - props.buffer),
+        // 起始索引减去缓冲区，确保上方有预备项
+        end_index,
+        visible_count,
+        scroll_top
+      };
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "container_ref",
+        ref: container_ref,
+        class: "simple-virtual-list",
+        style: normalizeStyle({ height: `${list_visible_height.value}px` }),
+        onScroll: _cache[0] || (_cache[0] = //@ts-ignore
+        (...args) => unref(throttled_scroll) && unref(throttled_scroll)(...args))
+      }, [
+        createElementVNode("div", {
+          class: "simple-virtual-list-wrap",
+          style: normalizeStyle({ height: `${list_height.value}px` })
+        }, null, 4),
+        createElementVNode("div", {
+          class: "simple-virtual-list-content",
+          style: normalizeStyle({ transform: `translateY(${content_offset_y.value}px)` })
+        }, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(visible_data.value, (item) => {
+            return openBlock(), createElementBlock("div", {
+              key: item[__props.data_key],
+              class: "simple-virtual-list-item",
+              style: normalizeStyle({ height: `${__props.item_height}px` })
+            }, [
+              renderSlot(_ctx.$slots, "item", { item }, () => [
+                createTextVNode(toDisplayString(item), 1)
+              ])
+            ], 4);
+          }), 128))
+        ], 4)
+      ], 36);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};