bge-ui 1.4.5 → 1.4.7

package/dist/index.js

@@ -8570,6 +8570,10 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
       default: "",
       required: true
     },
+    styleType: {
+      type: String,
+      default: "message"
+    },
     type: {
       type: String,
       default: "info",
@@ -8621,7 +8625,10 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
       stopTimer == null ? void 0 : stopTimer();
     }
     const getInstance = (id) => {
-      const idx = props.instances.findIndex((instance) => instance.id === id);
+      const idx = props.instances.findIndex((instance) => {
+        console.log(id, instance.id);
+        return instance.id === id;
+      });
       const current = props.instances[idx];
       let prev;
       if (idx > 0) {
@@ -8674,7 +8681,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
             id: __props.id,
             ref_key: "messageRef",
             ref: messageRef,
-            class: normalizeClass(`bge-message ${__props.type}`),
+            class: normalizeClass(`bge-message ${__props.type} ${__props.styleType}`),
             style: normalizeStyle(customStyle.value),
             role: "alert",
             onMouseenter: clearTimer,
@@ -8721,9 +8728,12 @@ const messageDefaults = {
   repeatNum: 1,
   appendTo
 };
-let seed = 1;
-const instances = shallowReactive([]);
+let seedMessage = 1;
+let seedNotification = 1;
+const instancesMessage = shallowReactive([]);
+const instancesNotification = shallowReactive([]);
 const closeMessage = (instance) => {
+  const instances = instance.props.styleType === "notification" ? instancesNotification : instancesMessage;
   const idx = instances.indexOf(instance);
   if (idx === -1)
     return;
@@ -8735,11 +8745,13 @@ function isFunction(functionToCheck) {
   return functionToCheck && {}.toString.call(functionToCheck) === "[object Function]";
 }
 function createMessage(_options = {}, context) {
-  const id = `message_${seed++}`;
+  const instances = _options.styleType === "notification" ? instancesNotification : instancesMessage;
+  const id = `message_${_options.styleType || "message"}_${_options.styleType === "notification" ? seedNotification++ : seedMessage++}`;
   const normalized = {
     ...messageDefaults,
     ..._options
   };
+  console.log(_options.styleType === "notification", instances, id);
   const { appendTo: appendTo2, ...options } = normalized;
   const userOnClose = normalized.onClose;
   const container = document.createElement("div");
@@ -8784,10 +8796,11 @@ function createMessage(_options = {}, context) {
   return instance;
 }
 const message$1 = (options = {}, context) => {
+  const normalized = typeof options === "string" ? { message: options } : { ...options };
+  const instances = options.styleType === "notification" ? instancesNotification : instancesMessage;
   if (instances.length >= 10) {
     return { close: () => void 0 };
   }
-  const normalized = typeof options === "string" ? { message: options } : { ...options };
   const instance = createMessage(normalized, context);
   instances.push(instance);
   return instance.handler;
@@ -8798,8 +8811,9 @@ messageTypes.forEach((type4) => {
     return message$1({ ...normalized, type: type4 }, appContext);
   };
 });
-function closeAll(type4) {
-  for (const instance of instances) {
+function closeAll(type4, styleType = "message") {
+  const instances = styleType === "notification" ? instancesNotification : instancesMessage;
+  for (const instance of instances[styleType]) {
     if (!type4 || type4 === instance.props.type) {
       instance.handler.close();
     }
@@ -17966,7 +17980,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     const props = __props;
-    const instances2 = computed(
+    const instances = computed(
       () => props.multiCalendars > 0 ? [...Array(props.multiCalendars).keys()] : [0]
     );
     const calendarInstanceClassWrapper = computed(() => ({
@@ -17981,7 +17995,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
           "dp--flex-display-collapsed": _ctx.collapse
         })
       }, [
-        (openBlock(true), createElementBlock(Fragment, null, renderList(instances2.value, (instance, i) => {
+        (openBlock(true), createElementBlock(Fragment, null, renderList(instances.value, (instance, i) => {
           return openBlock(), createElementBlock("div", {
             key: instance,
             class: normalizeClass(calendarInstanceClassWrapper.value)

package/dist/message/method.d.ts

@@ -1,3 +1,3 @@
-export declare function closeAll(type?: any): void;
+export declare function closeAll(type?: any, styleType?: string): void;
 declare const _default: any;
 export default _default;

package/dist/style.css

@@ -1259,28 +1259,25 @@ to {
   transition: opacity 0.3s, transform 0.4s, top 0.4s;
   padding: var(--layout-x-2, 8px) var(--layout-x-4, 16px);
   overflow: hidden;
-  color: var(--persistent-white, #FFF);
-  /* shadow1 */
+  color: var(--tc-title, #FFF);
   box-shadow: var(--shadow1, "0px 12px 40px 0px rgba(0, 0, 0, 0.08)");
+  background: var(--bg-notification, #232B33);
 }
-.bge-message.info {
-  background: var(--bg-tooltip, #53677A);
-}
-.bge-message.error {
-  background: var(--bg-red, #D14770);
+.bge-message.notification {
+  transform: unset;
+  left: unset;
+  right: 24px;
 }
 .bge-message.error p {
-  width: calc(100% - 24px);
-}
-.bge-message.success {
-  background: var(--bg-green, #00A389);
+  width: calc(100% - 28px);
 }
 .bge-message.success p {
-  width: calc(100% - 24px);
+  width: calc(100% - 28px);
 }
 .bge-message .bge-message__icon {
-  vertical-align: middle;
-  margin-right: 4px;
+  vertical-align: top;
+  margin-right: 8px;
+  margin-top: 2px;
   flex-shrink: 0;
   display: inline-block;
 }
@@ -1292,7 +1289,7 @@ to {
   vertical-align: middle;
   white-space: nowrap;
   overflow: hidden;
-  color: var(--persistent-white, #FFF);
+  color: var(--tc-title, #FFF);
   text-overflow: ellipsis;
   font-size: 14px;
   font-style: normal;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bge-ui",
-  "version": "1.4.5",
+  "version": "1.4.7",
   "description": "",
   "type": "module",
   "main": "./src/index.ts",

package/src/message/index.vue

@@ -1,6 +1,6 @@
 <template>
   <transition name="fade" @before-leave="onClose" @after-leave="$emit('destroy')">
-    <div v-show="visible" :id="id" ref="messageRef" :class="`bge-message ${type}`" :style="customStyle" role="alert"
+    <div v-show="visible" :id="id" ref="messageRef" :class="`bge-message ${type} ${styleType}`" :style="customStyle" role="alert"
       @mouseenter="clearTimer" @mouseleave="startTimer">
       <component v-if="icon" :is="icon" class="bge-message__icon" :size="20" />
       <slot>
@@ -33,6 +33,10 @@ const props: any = defineProps({
     default: '',
     required: true
   },
+  styleType: {
+    type: String,
+    default: 'message'
+  },
   type: {
     type: String,
     default: 'info',
@@ -74,7 +78,10 @@ function clearTimer() {
 }
 
 const getInstance = (id: string) => {
-  const idx = props.instances.findIndex((instance: {id: String}) => instance.id === id)
+  const idx = props.instances.findIndex((instance: {id: String}) => {
+    console.log(id, instance.id)
+    return instance.id === id
+  })
   const current = props.instances[idx]
   let prev: any | undefined
   if (idx > 0) {
@@ -136,33 +143,40 @@ defineExpose({
   transition: opacity 0.3s, transform 0.4s, top 0.4s;
   padding: var(--layout-x-2, 8px) var(--layout-x-4, 16px);
   overflow: hidden;
-  color: var(--persistent-white, #FFF);
-  /* shadow1 */
+  color: var(--tc-title, #FFF);
   box-shadow: var(--shadow1, '0px 12px 40px 0px rgba(0, 0, 0, 0.08)');
+  background: var(--bg-notification, #232B33);
+
+  &.notification {
+    transform: unset;
+    left: unset;
+    right: 24px;
+  }
 
   &.info {
-    background: var(--bg-tooltip, #53677A);
+    // background: var(--bg-tooltip, #53677A);
   }
 
   &.error {
-    background: var(--bg-red, #D14770);
+    // background: var(--bg-red, #D14770);
 
     p {
-      width: calc(100% - 24px)
+      width: calc(100% - 28px)
     }
   }
 
   &.success {
-    background: var(--bg-green, #00A389);
+    // background: var(--bg-green, #00A389);
 
     p {
-      width: calc(100% - 24px)
+      width: calc(100% - 28px)
     }
   }
 
   .bge-message__icon {
-    vertical-align: middle;
-    margin-right: 4px;
+    vertical-align: top;
+    margin-right: 8px;
+    margin-top: 2px;
     flex-shrink: 0;
     display: inline-block;
   }
@@ -175,7 +189,7 @@ defineExpose({
     vertical-align: middle;
     white-space: nowrap;
     overflow: hidden;
-    color: var(--persistent-white, #FFF);
+    color: var(--tc-title, #FFF);
     text-overflow: ellipsis;
     font-size: 14px;
     font-style: normal;

package/src/message/method.ts

@@ -29,11 +29,19 @@ const messageDefaults = {
   appendTo,
 } as const
 
-let seed = 1
+let seedMessage = 1
+let seedNotification = 1
 
-const instances: any[] = shallowReactive([])
+// const instances: any = shallowReactive({
+//   message: [],
+//   notification: []
+// })
+
+const instancesMessage: any = shallowReactive([])
+const instancesNotification : any = shallowReactive([])
 
 const closeMessage = (instance: any) => {
+  const instances = instance.props.styleType === 'notification' ? instancesNotification : instancesMessage
   const idx = instances.indexOf(instance)
   if (idx === -1) return
 
@@ -47,12 +55,13 @@ function isFunction(functionToCheck: any) {
 }
 
 function createMessage(_options: any = {}, context?: AppContext | null) {
-  const id = `message_${seed++}`
+  const instances = _options.styleType === 'notification' ? instancesNotification : instancesMessage
+  const id = `message_${_options.styleType || 'message'}_${_options.styleType === 'notification' ? seedNotification ++ : seedMessage++}`
   const normalized = {
     ...messageDefaults,
     ..._options,
   }
-
+  console.log(_options.styleType === 'notification', instances, id)
   const { appendTo, ...options } = normalized
 
   const userOnClose = normalized.onClose
@@ -112,11 +121,12 @@ function createMessage(_options: any = {}, context?: AppContext | null) {
 }
 
 const message: any &
-  Partial<any> & { _context: AppContext | null } = (options = {}, context: any) => {
+  Partial<any> & { _context: AppContext | null } = (options:any = {}, context: any) => {
+    const normalized: any = typeof options === 'string' ? { message: options } : { ...options }
+    const instances = options.styleType === 'notification' ? instancesNotification : instancesMessage
     if (instances.length >= 10) {
       return { close: () => undefined }
     }
-    const normalized: any = typeof options === 'string' ? { message: options } : { ...options }
     const instance = createMessage(normalized, context)
 
     instances.push(instance)
@@ -131,8 +141,9 @@ messageTypes.forEach((type: any) => {
   }
 })
 
-export function closeAll(type?: any): void {
-  for (const instance of instances) {
+export function closeAll(type?: any, styleType: string = 'message'): void {
+  const instances = styleType === 'notification' ? instancesNotification : instancesMessage
+  for (const instance of instances[styleType]) {
     if (!type || type === instance.props.type) {
       instance.handler.close()
     }