cosey 0.6.34 → 0.7.0

package/components/components.d.ts

@@ -33,6 +33,7 @@ import { OnlyChild } from './only-child';
 import { OptionalWrapper } from './optional-wrapper';
 import { Panel } from './panel';
 import { RemoteSelect } from './remote-select';
+import { Ribbon } from './ribbon';
 import { Row } from './row';
 import { ScrollView } from './scroll-view';
 import { SnugMenu, SnugMenuItem } from './snug-menu';
@@ -89,6 +90,7 @@ declare module 'vue' {
         CoOptionalWrapper: typeof OptionalWrapper;
         CoPanel: typeof Panel;
         CoRemoteSelect: typeof RemoteSelect;
+        CoRibbon: typeof Ribbon;
         CoRow: typeof Row;
         CoScrollView: typeof ScrollView;
         CoSnugMenu: typeof SnugMenu;
@@ -107,4 +109,4 @@ declare module 'vue' {
         CoVideoViewer: typeof VideoViewer;
     }
 }
-export { AudioCard, AudioViewer, Card, Close, Col, ConfigProvider, Container, ContextMenu, ContextMenuItem, ContextSubMenu, Copy, DndSort, DndSortItem, Editor, Field, FileCard, Form, FormDialog, FormDrawer, FormGroup, FormItem, FormList, FormQuery, Highlight, HorizontalTree, Icon, IconifyIcon, ImageCard, InputNumberRange, LongText, Mask, MediaCard, MediaCardGroup, MediaViewer, NumberFormat, OnlyChild, OptionalWrapper, Panel, RemoteSelect, Row, ScrollView, SnugMenu, SnugMenuItem, StackDialog, SvgIcon, SvgaCard, SvgaViewer, Table, TableAction, Toggle, Transition, TransitionGroup, Upload, VideoCard, VideoViewer, };
+export { AudioCard, AudioViewer, Card, Close, Col, ConfigProvider, Container, ContextMenu, ContextMenuItem, ContextSubMenu, Copy, DndSort, DndSortItem, Editor, Field, FileCard, Form, FormDialog, FormDrawer, FormGroup, FormItem, FormList, FormQuery, Highlight, HorizontalTree, Icon, IconifyIcon, ImageCard, InputNumberRange, LongText, Mask, MediaCard, MediaCardGroup, MediaViewer, NumberFormat, OnlyChild, OptionalWrapper, Panel, RemoteSelect, Ribbon, Row, ScrollView, SnugMenu, SnugMenuItem, StackDialog, SvgIcon, SvgaCard, SvgaViewer, Table, TableAction, Toggle, Transition, TransitionGroup, Upload, VideoCard, VideoViewer, };

package/components/components.js

@@ -33,6 +33,7 @@ export { OnlyChild } from './only-child/index.js';
 export { OptionalWrapper } from './optional-wrapper/index.js';
 export { Panel } from './panel/index.js';
 export { RemoteSelect } from './remote-select/index.js';
+export { Ribbon } from './ribbon/index.js';
 export { Row } from './row/index.js';
 export { ScrollView } from './scroll-view/index.js';
 export { SnugMenu, SnugMenuItem } from './snug-menu/index.js';

package/components/index.d.ts

@@ -34,6 +34,7 @@ export * from './only-child';
 export * from './optional-wrapper';
 export * from './panel';
 export * from './remote-select';
+export * from './ribbon';
 export * from './row';
 export * from './scroll-view';
 export * from './snug-menu';

package/components/index.js

@@ -33,6 +33,7 @@ export { OnlyChild } from './only-child/index.js';
 export { OptionalWrapper } from './optional-wrapper/index.js';
 export { Panel } from './panel/index.js';
 export { RemoteSelect } from './remote-select/index.js';
+export { Ribbon } from './ribbon/index.js';
 export { Row } from './row/index.js';
 export { ScrollView } from './scroll-view/index.js';
 export { SnugMenu, SnugMenuItem } from './snug-menu/index.js';
@@ -90,6 +91,7 @@ export { mediaViewerBaseEmits, mediaViewerBaseProps, mediaViewerEmits, mediaView
 export { numberFormatProps, numberFormatSlots } from './number-format/number-format.api.js';
 export { panelProps, panelSlots } from './panel/panel.api.js';
 export { remoteSelectEmits, remoteSelectProps, remoteSelectSlots } from './remote-select/remote-select.api.js';
+export { ribbonEmits, ribbonProps, ribbonSlots } from './ribbon/ribbon.api.js';
 export { defaultBreakpoints, defaultRowProps, generateAlgorithms, rowColumns, rowContextSymbol, rowSizes } from './row/row.js';
 export { snugMenuContextSymbol } from './snug-menu/snug-menu.js';
 export { createStackDialogInfo, stackDialogProps, useStackDialog, useStackDialogProvide } from './stack-dialog/stack-dialog.js';

package/components/ribbon/index.d.ts

@@ -0,0 +1,100 @@
+export * from './ribbon.api';
+declare const _Ribbon: {
+    new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("vue").ExtractPropTypes<{
+        direction: {
+            type: import("vue").PropType<"top-right" | "top-left" | "bottom-right" | "bottom-left">;
+            default: string;
+        };
+        gap: {
+            type: NumberConstructor;
+            default: number;
+        };
+        size: {
+            type: NumberConstructor;
+            default: number;
+        };
+        breadth: {
+            type: NumberConstructor;
+            default: number;
+        };
+        background: {
+            type: StringConstructor;
+        };
+        color: {
+            type: StringConstructor;
+        };
+    }>> & Readonly<{}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
+        direction: "top-left" | "top-right" | "bottom-left" | "bottom-right";
+        gap: number;
+        size: number;
+        breadth: number;
+    }, true, {}, import("vue").SlotsType<import("./ribbon.api").RibbonSlots>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import("vue").ExtractPropTypes<{
+        direction: {
+            type: import("vue").PropType<"top-right" | "top-left" | "bottom-right" | "bottom-left">;
+            default: string;
+        };
+        gap: {
+            type: NumberConstructor;
+            default: number;
+        };
+        size: {
+            type: NumberConstructor;
+            default: number;
+        };
+        breadth: {
+            type: NumberConstructor;
+            default: number;
+        };
+        background: {
+            type: StringConstructor;
+        };
+        color: {
+            type: StringConstructor;
+        };
+    }>> & Readonly<{}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, {
+        direction: "top-left" | "top-right" | "bottom-left" | "bottom-right";
+        gap: number;
+        size: number;
+        breadth: number;
+    }>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+    direction: {
+        type: import("vue").PropType<"top-right" | "top-left" | "bottom-right" | "bottom-left">;
+        default: string;
+    };
+    gap: {
+        type: NumberConstructor;
+        default: number;
+    };
+    size: {
+        type: NumberConstructor;
+        default: number;
+    };
+    breadth: {
+        type: NumberConstructor;
+        default: number;
+    };
+    background: {
+        type: StringConstructor;
+    };
+    color: {
+        type: StringConstructor;
+    };
+}>> & Readonly<{}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
+    direction: "top-left" | "top-right" | "bottom-left" | "bottom-right";
+    gap: number;
+    size: number;
+    breadth: number;
+}, {}, string, import("vue").SlotsType<import("./ribbon.api").RibbonSlots>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & import("vue").Plugin;
+export { _Ribbon as Ribbon };
+export default _Ribbon;

package/components/ribbon/index.js

@@ -0,0 +1,8 @@
+import { withInstall } from '../utils.js';
+import stdin_default$1 from './ribbon.js';
+export { ribbonEmits, ribbonProps, ribbonSlots } from './ribbon.api.js';
+
+const _Ribbon = withInstall(stdin_default$1);
+var stdin_default = _Ribbon;
+
+export { _Ribbon as Ribbon, stdin_default as default };

package/components/ribbon/ribbon.api.d.ts

@@ -0,0 +1,34 @@
+import type { ExtractPropTypes, PropType, SlotsType } from 'vue';
+export declare const ribbonProps: {
+    direction: {
+        type: PropType<"top-right" | "top-left" | "bottom-right" | "bottom-left">;
+        default: string;
+    };
+    gap: {
+        type: NumberConstructor;
+        default: number;
+    };
+    size: {
+        type: NumberConstructor;
+        default: number;
+    };
+    breadth: {
+        type: NumberConstructor;
+        default: number;
+    };
+    background: {
+        type: StringConstructor;
+    };
+    color: {
+        type: StringConstructor;
+    };
+};
+export type RibbonProps = ExtractPropTypes<typeof ribbonProps>;
+export interface RibbonSlots {
+    default: {};
+}
+export declare const ribbonSlots: SlotsType<RibbonSlots>;
+export declare const ribbonEmits: {};
+export type RibbonEmits = typeof ribbonEmits;
+export interface RibbonExpose {
+}

package/components/ribbon/ribbon.api.js

@@ -0,0 +1,28 @@
+const ribbonProps = {
+  direction: {
+    type: String,
+    default: "top-right"
+  },
+  gap: {
+    type: Number,
+    default: 0
+  },
+  size: {
+    type: Number,
+    default: 150
+  },
+  breadth: {
+    type: Number,
+    default: 0.5
+  },
+  background: {
+    type: String
+  },
+  color: {
+    type: String
+  }
+};
+const ribbonSlots = {};
+const ribbonEmits = {};
+
+export { ribbonEmits, ribbonProps, ribbonSlots };

package/components/ribbon/ribbon.d.ts

@@ -0,0 +1,53 @@
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    direction: {
+        type: import("vue").PropType<"top-right" | "top-left" | "bottom-right" | "bottom-left">;
+        default: string;
+    };
+    gap: {
+        type: NumberConstructor;
+        default: number;
+    };
+    size: {
+        type: NumberConstructor;
+        default: number;
+    };
+    breadth: {
+        type: NumberConstructor;
+        default: number;
+    };
+    background: {
+        type: StringConstructor;
+    };
+    color: {
+        type: StringConstructor;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    direction: {
+        type: import("vue").PropType<"top-right" | "top-left" | "bottom-right" | "bottom-left">;
+        default: string;
+    };
+    gap: {
+        type: NumberConstructor;
+        default: number;
+    };
+    size: {
+        type: NumberConstructor;
+        default: number;
+    };
+    breadth: {
+        type: NumberConstructor;
+        default: number;
+    };
+    background: {
+        type: StringConstructor;
+    };
+    color: {
+        type: StringConstructor;
+    };
+}>> & Readonly<{}>, {
+    direction: "top-left" | "top-right" | "bottom-left" | "bottom-right";
+    gap: number;
+    size: number;
+    breadth: number;
+}, import("vue").SlotsType<import("./ribbon.api").RibbonSlots>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/components/ribbon/ribbon.js

@@ -0,0 +1,53 @@
+import { defineComponent, computed, createVNode } from 'vue';
+import { ribbonEmits, ribbonSlots, ribbonProps } from './ribbon.api.js';
+import { useToken } from '../theme/util/useToken.js';
+import stdin_default$1 from './ribbon.style.js';
+import { useComponentConfig } from '../config-provider/config-provider.api.js';
+
+var stdin_default = defineComponent({
+  name: "CoRibbon",
+  props: ribbonProps,
+  slots: ribbonSlots,
+  emits: ribbonEmits,
+  setup(props, {
+    slots
+  }) {
+    const {
+      prefixCls
+    } = useComponentConfig("ribbon", props);
+    const {
+      hashId
+    } = stdin_default$1(prefixCls);
+    const {
+      token
+    } = useToken();
+    const ribbon = computed(() => {
+      return {
+        width: props.size + "px",
+        height: props.size + "px",
+        "--gap": props.gap + "px",
+        "--bg": props.background || token.value.colorPrimary
+      };
+    });
+    const silkStyle = computed(() => {
+      const hypotenuse = Math.sqrt(Math.pow(props.size, 2) * 2);
+      const breadth = hypotenuse / 2 * props.breadth;
+      return {
+        width: hypotenuse + "px",
+        height: breadth + "px",
+        color: props.color
+      };
+    });
+    return () => {
+      return createVNode("div", {
+        "class": [hashId.value, prefixCls.value, `is-${props.direction}`],
+        "style": ribbon.value
+      }, [createVNode("div", {
+        "class": `${prefixCls.value}-silk`,
+        "style": silkStyle.value
+      }, [slots.default?.({})])]);
+    };
+  }
+});
+
+export { stdin_default as default };

package/components/ribbon/ribbon.style.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/ribbon/ribbon.style.js

@@ -0,0 +1,121 @@
+import { getSimpleStyleHook } from '../theme/getSimpleStyleHook.js';
+
+var stdin_default = getSimpleStyleHook("CoRibbon", (token) => {
+  const { componentCls } = token;
+  return {
+    [`${componentCls}`]: {
+      position: "absolute",
+      overflow: "hidden",
+      pointerEvents: "none",
+      [`${componentCls}-silk`]: {
+        position: "absolute",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        fontSize: token.fontSize,
+        textAlign: "center",
+        color: token.colorWhite,
+        textShadow: "0 1px 1px rgba(0, 0, 0, 0.1)",
+        background: "var(--bg)",
+        pointerEvents: "auto"
+      },
+      "&::before,&::after": {
+        content: '""',
+        position: "absolute",
+        display: "block",
+        border: "calc(var(--gap) / 2) solid var(--bg)",
+        filter: "grayscale(70%) brightness(0.7)"
+      },
+      [`&.is-top-left`]: {
+        top: "calc(var(--gap) * -1)",
+        left: "calc(var(--gap) * -1)",
+        [`${componentCls}-silk`]: {
+          top: 0,
+          right: 0,
+          transformOrigin: "right bottom",
+          transform: "translateY(-100%) rotate(-45deg)"
+        },
+        "&::before,&::after": {
+          borderTopColor: "transparent",
+          borderLeftColor: "transparent"
+        },
+        "&::before": {
+          top: 0,
+          right: 0
+        },
+        "&::after": {
+          bottom: 0,
+          left: 0
+        }
+      },
+      [`&.is-top-right`]: {
+        top: "calc(var(--gap) * -1)",
+        right: "calc(var(--gap) * -1)",
+        [`${componentCls}-silk`]: {
+          top: 0,
+          left: 0,
+          transformOrigin: "left bottom",
+          transform: "translateY(-100%) rotate(45deg)"
+        },
+        "&::before,&::after": {
+          borderTopColor: "transparent",
+          borderRightColor: "transparent"
+        },
+        "&::before": {
+          top: 0,
+          left: 0
+        },
+        "&::after": {
+          bottom: 0,
+          right: 0
+        }
+      },
+      [`&.is-bottom-left`]: {
+        bottom: "calc(var(--gap) * -1)",
+        left: "calc(var(--gap) * -1)",
+        [`${componentCls}-silk`]: {
+          bottom: 0,
+          right: 0,
+          transformOrigin: "top right",
+          transform: "translateY(100%) rotate(45deg)"
+        },
+        "&::before,&::after": {
+          borderBottomColor: "transparent",
+          borderLeftColor: "transparent"
+        },
+        "&::before": {
+          bottom: 0,
+          right: 0
+        },
+        "&::after": {
+          top: 0,
+          left: 0
+        }
+      },
+      [`&.is-bottom-right`]: {
+        bottom: "calc(var(--gap) * -1)",
+        right: "calc(var(--gap) * -1)",
+        [`${componentCls}-silk`]: {
+          bottom: 0,
+          left: 0,
+          transformOrigin: "left top",
+          transform: "translateY(100%) rotate(-45deg)"
+        },
+        "&::before,&::after": {
+          borderBottomColor: "transparent",
+          borderRightColor: "transparent"
+        },
+        "&::before": {
+          bottom: 0,
+          left: 0
+        },
+        "&::after": {
+          top: 0,
+          right: 0
+        }
+      }
+    }
+  };
+});
+
+export { stdin_default as default };

package/package.json

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