cosey 0.4.51 → 0.4.53

package/components/form-group/form-group.d.ts

@@ -1,6 +1,8 @@
-import { type DividerProps, type SpaceProps } from 'element-plus';
-export interface FormGroupProps extends Partial<SpaceProps>, Partial<DividerProps> {
+import { type SpaceProps } from 'element-plus';
+export interface FormGroupProps extends Partial<Omit<SpaceProps, 'class' | 'style'>> {
     title?: string;
+    borderStyle?: 'none' | 'solid' | 'dashed' | 'dotted';
+    position?: 'left' | 'right' | 'center';
     collapsible?: boolean;
     collapsed?: boolean;
 }

package/components/form-group/form-group.vue.d.ts

@@ -5,6 +5,7 @@ declare const __VLS_component: import("vue").DefineComponent<FormGroupProps, {},
 }, string, import("vue").PublicProps, Readonly<FormGroupProps> & Readonly<{
     "onUpdate:collapsed"?: ((collapsed: boolean) => any) | undefined;
 }>, {
+    position: "left" | "right" | "center";
     readonly size: number | "" | "default" | "large" | "small" | [number, number];
     readonly wrap: boolean;
     readonly alignment: string;

package/components/form-group/form-group.vue.js

@@ -1,7 +1,8 @@
-import { defineComponent, computed, ref, watch, resolveComponent, createElementBlock, openBlock, createBlock, createCommentVNode, withDirectives, mergeProps, withCtx, createElementVNode, normalizeStyle, createTextVNode, toDisplayString, createVNode, unref, renderSlot, vShow } from 'vue';
-import { reactivePick, reactiveOmit } from '@vueuse/core';
-import stdin_default$1 from '../icon/icon.vue.js';
-import { omitUndefined } from '../../utils/object.js';
+import { defineComponent, ref, computed, watch, resolveComponent, createElementBlock, openBlock, normalizeStyle, normalizeClass, unref, createCommentVNode, withDirectives, createElementVNode, createBlock, createTextVNode, toDisplayString, createVNode, mergeProps, withCtx, renderSlot, vShow } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import stdin_default$2 from '../icon/icon.vue.js';
+import stdin_default$1 from './style/index.js';
+import { useComponentConfig } from '../config-provider/config-provider.js';
 
 var stdin_default = /* @__PURE__ */defineComponent({
   ...{
@@ -13,6 +14,15 @@ var stdin_default = /* @__PURE__ */defineComponent({
       type: String,
       required: false
     },
+    borderStyle: {
+      type: String,
+      required: false
+    },
+    position: {
+      type: String,
+      required: false,
+      default: "left"
+    },
     collapsible: {
       type: Boolean,
       required: false
@@ -25,14 +35,6 @@ var stdin_default = /* @__PURE__ */defineComponent({
       type: String,
       required: false
     },
-    class: {
-      type: null,
-      required: false
-    },
-    style: {
-      type: null,
-      required: false
-    },
     alignment: {
       type: null,
       required: false,
@@ -63,14 +65,6 @@ var stdin_default = /* @__PURE__ */defineComponent({
       type: null,
       required: false,
       default: () => [32, 0]
-    },
-    contentPosition: {
-      type: String,
-      required: false
-    },
-    borderStyle: {
-      type: null,
-      required: false
     }
   },
   emits: ["update:collapsed"],
@@ -78,16 +72,17 @@ var stdin_default = /* @__PURE__ */defineComponent({
     emit: __emit
   }) {
     const props = __props;
+    console.log(props);
     const emit = __emit;
-    const dividerPropsKeys = ["borderStyle", "contentPosition"];
-    const dividerProps = computed(() => {
-      return {
-        contentPosition: "left",
-        ...omitUndefined(reactivePick(props, dividerPropsKeys))
-      };
-    });
-    const spaceProps = reactiveOmit(props, dividerPropsKeys, ["title", "collapsible", "collapsed"]);
+    const {
+      prefixCls
+    } = useComponentConfig("form-group", props);
+    const {
+      hashId
+    } = stdin_default$1(prefixCls);
+    const spaceProps = reactiveOmit(props, ["title", "borderStyle", "position", "collapsible", "collapsed"]);
     const innerCollapsed = ref(false);
+    const isBordered = computed(() => !!props.title);
     watch(() => props.collapsed, () => {
       innerCollapsed.value = !!props.collapsed;
     }, {
@@ -100,31 +95,33 @@ var stdin_default = /* @__PURE__ */defineComponent({
       }
     };
     return (_ctx, _cache) => {
-      const _component_el_divider = resolveComponent("el-divider");
       const _component_el_space = resolveComponent("el-space");
-      return openBlock(), createElementBlock("div", null, [_ctx.title ? (openBlock(), createBlock(_component_el_divider, mergeProps({
-        key: 0
-      }, dividerProps.value, {
-        direction: "horizontal"
-      }), {
-        default: withCtx(() => [createElementVNode("div", {
-          style: normalizeStyle({
-            display: "inline-flex",
-            alignItems: "center",
-            cursor: _ctx.collapsible ? "pointer" : ""
-          }),
-          onClick: handleToggle
-        }, [_ctx.collapsible ? (openBlock(), createBlock(stdin_default$1, {
-          key: 0,
-          name: innerCollapsed.value ? "co:caret-up" : "co:caret-down",
-          size: "xl"
-        }, null, 8, ["name"])) : createCommentVNode("v-if", true), createTextVNode(" " + toDisplayString(_ctx.title), 1
-        /* TEXT */)], 4
-        /* STYLE */)]),
-        _: 1
-        /* STABLE */
-      }, 16
-      /* FULL_PROPS */)) : createCommentVNode("v-if", true), withDirectives(createVNode(_component_el_space, mergeProps(unref(spaceProps), {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass([unref(hashId), unref(prefixCls), {
+          "is-bordered": isBordered.value,
+          "is-collapsed": innerCollapsed.value
+        }]),
+        style: normalizeStyle({
+          borderStyle: isBordered.value ? props.borderStyle : void 0
+        })
+      }, [_ctx.title ? (openBlock(), createElementBlock("div", {
+        key: 0,
+        class: normalizeClass([`${unref(prefixCls)}-title`, `is-${_ctx.position}`])
+      }, [createElementVNode("div", {
+        style: normalizeStyle({
+          display: "inline-flex",
+          alignItems: "center",
+          cursor: _ctx.collapsible ? "pointer" : ""
+        }),
+        onClick: handleToggle
+      }, [_ctx.collapsible ? (openBlock(), createBlock(stdin_default$2, {
+        key: 0,
+        name: innerCollapsed.value ? "co:caret-up" : "co:caret-down",
+        size: "xl"
+      }, null, 8, ["name"])) : createCommentVNode("v-if", true), createTextVNode(" " + toDisplayString(_ctx.title), 1
+      /* TEXT */)], 4
+      /* STYLE */)], 2
+      /* CLASS */)) : createCommentVNode("v-if", true), withDirectives(createVNode(_component_el_space, mergeProps(unref(spaceProps), {
         style: {
           display: "flex",
           minWidth: 0
@@ -134,7 +131,8 @@ var stdin_default = /* @__PURE__ */defineComponent({
         _: 3
         /* FORWARDED */
       }, 16
-      /* FULL_PROPS */), [[vShow, !innerCollapsed.value]])]);
+      /* FULL_PROPS */), [[vShow, !innerCollapsed.value]])], 6
+      /* CLASS, STYLE */);
     };
   }
 });

package/components/form-group/index.d.ts

@@ -5,6 +5,7 @@ declare const _FormGroup: {
     }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
         "update:collapsed": (collapsed: boolean) => any;
     }, import("vue").PublicProps, {
+        position: "left" | "right" | "center";
         readonly size: number | "" | "default" | "large" | "small" | [number, number];
         readonly wrap: boolean;
         readonly alignment: string;
@@ -18,6 +19,7 @@ declare const _FormGroup: {
     }, Readonly<import("./form-group").FormGroupProps> & Readonly<{
         "onUpdate:collapsed"?: ((collapsed: boolean) => any) | undefined;
     }>, {}, {}, {}, {}, {
+        position: "left" | "right" | "center";
         readonly size: number | "" | "default" | "large" | "small" | [number, number];
         readonly wrap: boolean;
         readonly alignment: string;
@@ -30,6 +32,7 @@ declare const _FormGroup: {
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:collapsed": (collapsed: boolean) => any;
 }, string, {
+    position: "left" | "right" | "center";
     readonly size: number | "" | "default" | "large" | "small" | [number, number];
     readonly wrap: boolean;
     readonly alignment: string;

package/components/form-group/style/index.d.ts

@@ -0,0 +1,4 @@
+declare const _default: (_prefixCls?: import("vue").ComputedRef<string> | string, themeManager?: import("../../theme/theme-context").ThemeManager) => {
+    hashId: import("vue").Ref<string, string>;
+};
+export default _default;

package/components/form-group/style/index.js

@@ -0,0 +1,43 @@
+import { getSimpleStyleHook } from '../../theme/getSimpleStyleHook.js';
+
+var stdin_default = getSimpleStyleHook("FromGroup", (token) => {
+  const { componentCls } = token;
+  return {
+    [componentCls]: {
+      "&.is-bordered": {
+        position: "relative",
+        marginBlock: token.marginLG,
+        padding: token.paddingMD,
+        paddingBlockStart: token.paddingLG,
+        border: `${token.lineWidth} ${token.lineType} ${token.colorBorder}`,
+        borderRadius: token.borderRadius,
+        "&.is-collapsed": {
+          paddingBlockEnd: 0
+        }
+      },
+      [`${componentCls}-title`]: {
+        position: "absolute",
+        top: 0,
+        paddingInline: token.paddingMD,
+        fontSize: token.fontSize,
+        fontWeight: token.fontWeightStrong,
+        color: token.colorTextBase,
+        backgroundColor: token.colorBgContainer,
+        "&.is-left": {
+          left: token.sizeMD,
+          transform: "translateY(-50%)"
+        },
+        "&.is-center": {
+          left: "50%",
+          transform: "translate(-50%) translateY(-50%)"
+        },
+        "&.is-right": {
+          right: token.sizeMD,
+          transform: "translateY(-50%)"
+        }
+      }
+    }
+  };
+});
+
+export { stdin_default as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cosey",
-  "version": "0.4.51",
+  "version": "0.4.53",
   "description": "基于 Vue3 + vite 的后台管理系统框架",
   "type": "module",
   "main": "index.js",