rappel-ui 1.0.28 → 1.0.29

package/theme-chalk/src/css-vars/_message.scss

@@ -0,0 +1,42 @@
+@use 'sass:map';
+@use '../function/index' as *;
+
+$message: () !default;
+$message: map.deep-merge(
+  (
+    'message': (
+      'font-size': 14px,
+      'border-radius': 4px,
+      'padding': 7px 12px,
+      'close-size': 16px,
+      'icon-size': 16px
+    ),
+    'light': (
+      'color': getCssVar('color', 'text', 'base'),
+      'bgcolor': getCssVar('color', 'fill', 'blank'),
+      'border-color': getCssVar('color', 'border', 'light')
+    ),
+    'dark': (
+      'color': getCssVar('color', 'fill', 'blank'),
+      'bgcolor': getCssVar('color', 'text', 'darker'),
+      'border-color': getCssVar('color', 'text', 'darker')
+    )
+  ),
+  $message
+);
+
+// $message-types: ('', 'primary', 'success', 'danger', 'warning', 'info');
+// @each $type in $message-types {
+//   @if $type {
+//     $message: map.deep-merge(
+//       (
+//         $type: (
+//             'bgcolor': getCssVar('color', $type, 'base'),
+//             'color': getCssVar('color', 'text', 'lightest'),
+//             'border-color': getCssVar('color', $type, 'base')
+//           )
+//       ),
+//       $message
+//     );
+//   }
+// }

package/theme-chalk/src/index.scss

@@ -9,3 +9,4 @@
 @forward './popover';
 @forward './tooltip';
 @forward './popconfirm';
+@forward './message';

package/theme-chalk/src/message.scss

@@ -0,0 +1,270 @@
+@use 'mixins/index' as *;
+@use 'mixins/_message' as *;
+@use 'function/index' as *;
+
+@include buildRootCls('message') {
+  &.is-light {
+    @include message-var('light');
+  }
+  &.is-dark {
+    @include message-var('dark');
+  }
+
+  $border-color: getCssVar('message', 'border-color');
+  $bgcolor: getCssVar('message', 'bgcolor');
+  $color: getCssVar('message', 'color');
+  $font-size: getCssVar('message', 'font', 'size');
+  $border-radius: getCssVar('message', 'border-radius');
+
+  display: flex;
+  align-items: start;
+  padding: getCssVar('message', 'padding');
+  color: $color;
+  background-color: $bgcolor;
+  border-radius: $border-radius;
+  border: 1px solid $border-color;
+
+  &__icon {
+    flex-shrink: 0;
+    margin-right: 5px;
+    font-size: getCssVar('message', 'icon', 'size');
+  }
+  &__content {
+    font-size: $font-size;
+    line-height: 1.2;
+  }
+
+  &__close {
+    flex-shrink: 0;
+    margin-left: 5px;
+    color: $color;
+    font-size: getCssVar('message', 'close', 'size');
+    cursor: pointer;
+  }
+  &[data-placement='top'],
+  &[data-placement='bottom'] {
+    left: 50%;
+    transform: translateX(-50%);
+  }
+  &[data-placement='top-start'],
+  &[data-placement='bottom-start'] {
+    left: 5px;
+  }
+  &[data-placement='left-top'] {
+    top: 0;
+    left: 0;
+  }
+  &[data-placement='left-bottom'] {
+    bottom: 0;
+    left: 0;
+  }
+  &[data-placement='top-end'],
+  &[data-placement='bottom-end'] {
+    right: 5px;
+  }
+  &[data-placement='right-top'] {
+    top: 0;
+    right: 0;
+  }
+  &[data-placement='right-bottom'] {
+    bottom: 0;
+    right: 0;
+  }
+
+  &[data-placement='left'],
+  &[data-placement='right'] {
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  &[data-placement='left-start'],
+  &[data-placement='right-start'] {
+    top: 5px;
+  }
+
+  &[data-placement='left-end'],
+  &[data-placement='right-end'] {
+    bottom: 5px;
+  }
+
+  &.top-enter-from {
+    opacity: 0;
+    &[data-placement='top-start'],
+    &[data-placement='top-end'] {
+      transform: translateY(-20px);
+    }
+    &[data-placement='top'] {
+      transform: translateX(-50%) translateY(-20px);
+    }
+  }
+
+  &.top-enter-active {
+    opacity: 0;
+  }
+
+  &.top-enter-to,
+  &.top-leave-from {
+    opacity: 1;
+    &[data-placement='top'] {
+      transform: translateX(-50%) translateY(0);
+    }
+  }
+
+  &.top-leave-active {
+    opacity: 1;
+  }
+
+  &.top-leave-to {
+    opacity: 0;
+    &[data-placement='top'] {
+      transform: translateX(-50%) translateY(-20px);
+    }
+  }
+
+  &.bottom-enter-from {
+    opacity: 0;
+    &[data-placement='bottom'] {
+      transform: translateX(-50%) translateY(20px);
+    }
+    &[data-placement='bottom-start'],
+    &[data-placement='bottom-end'] {
+      transform: translateX(0) translateY(20px);
+    }
+  }
+  &.bottom-enter-active {
+    opacity: 0;
+  }
+
+  &.bottom-enter-to,
+  &.bottom-leave-from {
+    opacity: 1;
+    &[data-placement='bottom'] {
+      transform: translateX(-50%) translateY(0);
+    }
+    &[data-placement='bottom-start'],
+    &[data-placement='bottom-end'] {
+      transform: translateX(0) translateY(0);
+    }
+  }
+
+  &.bottom-leave-active {
+    opacity: 1;
+  }
+
+  &.bottom-leave-to {
+    opacity: 0;
+    &[data-placement='bottom'] {
+      transform: translateX(-50%) translateY(20px);
+    }
+    &[data-placement='bottom-start'],
+    &[data-placement='bottom-end'] {
+      transform: translateX(0) translateY(20px);
+    }
+  }
+
+  &.left-enter-from {
+    opacity: 0;
+    &[data-placement='left'] {
+      transform: translateY(-50%) translateX(-20px);
+    }
+    &[data-placement='left-start'],
+    &[data-placement='left-end'] {
+      transform: translateY(0) translateX(-20px);
+    }
+    &[data-placement='left-top'],
+    &[data-placement='left-bottom'] {
+      transform: translateY(0) translateX(-100%);
+    }
+  }
+  &.left-enter-active {
+    opacity: 0;
+  }
+  &.left-enter-to,
+  &.left-leave-from {
+    opacity: 1;
+    &[data-placement='left'] {
+      transform: translateY(-50%) translateX(0);
+    }
+    &[data-placement='left-start'],
+    &[data-placement='left-end'] {
+      transform: translateY(0) translateX(0);
+    }
+    &[data-placement='left-top'],
+    &[data-placement='left-bottom'] {
+      transform: translateY(0) translateX(0);
+    }
+  }
+  &.left-leave-active {
+    opacity: 1;
+  }
+  &.left-leave-to {
+    opacity: 0;
+    &[data-placement='left'] {
+      transform: translateY(-50%) translateX(-20px);
+    }
+    &[data-placement='left-start'],
+    &[data-placement='left-end'] {
+      transform: translateY(0) translateX(-20px);
+    }
+    &[data-placement='left-top'],
+    &[data-placement='left-bottom'] {
+      transform: translateY(0) translateX(-100%);
+    }
+  }
+
+  &.right-enter-from {
+    opacity: 0;
+    &[data-placement='right'] {
+      transform: translateY(-50%) translateX(20px);
+    }
+
+    &[data-placement='right-start'],
+    &[data-placement='right-end'] {
+      transform: translateY(0) translateX(20px);
+    }
+
+    &[data-placement='right-top'],
+    &[data-placement='right-bottom'] {
+      transform: translateY(0) translateX(100%);
+    }
+  }
+  &.right-enter-active {
+    opacity: 0;
+  }
+
+  &.right-enter-to,
+  &.right-leave-from {
+    opacity: 1;
+    &[data-placement='right'] {
+      transform: translateY(-50%) translateX(0);
+    }
+    &[data-placement='right-start'],
+    &[data-placement='right-end'] {
+      transform: translateY(0) translateX(0);
+    }
+
+    &[data-placement='right-top'],
+    &[data-placement='right-bottom'] {
+      transform: translateY(0) translateX(0);
+    }
+  }
+
+  &.right-leave-active {
+    opacity: 1;
+  }
+  &.right-leave-to {
+    opacity: 0;
+    &[data-placement='right'] {
+      transform: translateY(-50%) translateX(20px);
+    }
+    &[data-placement='right-start'],
+    &[data-placement='right-end'] {
+      transform: translateY(0) translateX(20px);
+    }
+
+    &[data-placement='right-top'],
+    &[data-placement='right-bottom'] {
+      transform: translateY(0) translateX(100%);
+    }
+  }
+}

package/theme-chalk/src/mixins/_message.scss

@@ -0,0 +1,51 @@
+@use 'sass:map';
+@use '../css-vars/_message' as *;
+@use './index' as *;
+@use '../function/index' as *;
+
+@mixin set-bgcolor-var($key, $val) {
+  #{getCssVarStr('message' ,'bgcolor')}: #{deepGet($message, $key, $val)};
+}
+
+@mixin set-color-var($key, $val) {
+  #{getCssVarStr('message' ,'color')}: #{deepGet($message, $key, $val)};
+}
+
+@mixin set-bordercolor-var($key, $val) {
+  #{getCssVarStr('message' ,'border-color')}: #{deepGet($message, $key, $val)};
+}
+
+@mixin set-radius-var($key, $val) {
+  #{getCssVarStr('message' ,'border-radius')}: #{deepGet($message, $key, $val)};
+}
+
+@mixin set-font-size-var($key, $val) {
+  #{getCssVarStr('message' ,'font-size')}: #{deepGet($message, $key, $val)};
+}
+
+@mixin set-padding-var($key, $val) {
+  #{getCssVarStr('message' ,'padding')}: #{deepGet($message, $key, $val)};
+}
+
+@mixin set-close-size-var($key, $val) {
+  #{getCssVarStr('message' ,'close-size')}: #{deepGet($message, $key, $val)};
+}
+@mixin set-icon-size-var($key, $val) {
+  #{getCssVarStr('message' ,'icon-size')}: #{deepGet($message, $key, $val)};
+}
+
+@mixin message-theme-var($theme) {
+  @include set-bgcolor-var($theme, 'bgcolor');
+  @include set-color-var($theme, 'color');
+  @include set-bordercolor-var($theme, 'border-color');
+}
+
+@mixin message-var($theme) {
+  @include set-font-size-var('message', 'font-size');
+  @include set-radius-var('message', 'border-radius');
+  @include set-padding-var('message', 'padding');
+  @include set-close-size-var('message', 'close-size');
+  @include set-icon-size-var('message', 'icon-size');
+
+  @include message-theme-var($theme);
+}

package/cjs/components/tooltip/src/content.js

@@ -1 +0,0 @@
-var e=require("./content.vue_vue_type_script_setup_true_lang.js").default;exports.default=e;

package/cjs/components/tooltip/src/content.vue_vue_type_script_setup_true_lang.js

@@ -1 +0,0 @@
-const e=require("../../../utils/util.js");require("../../../utils/index.js");const t=require("../../../composables/use-namespace/index.js"),n=require("../../../composables/use-z-index/index.js"),r=require("../../../composables/use-theme/index.js");require("../../../composables/index.js");const i=require("./use-emit.js");let a=require("vue");var o=[`data-placement`],s=(0,a.defineComponent)({__name:`content`,props:(0,a.mergeModels)({modelValue:{type:Boolean},style:{type:[Boolean,null,String,Object,Array],default:()=>void 0},arrowStyle:{default:()=>void 0},appendTo:{default:`body`},teleported:{type:Boolean,default:!0},defer:{type:Boolean,default:()=>void 0},content:{},placement:{default:`top`},showArrow:{type:Boolean,default:!1},width:{default:()=>void 0},height:{default:()=>void 0},maxWidth:{default:()=>void 0},maxHeight:{default:()=>void 0},floatingClass:{default:()=>void 0},transition:{default:``},mode:{default:()=>void 0},cssTransition:{type:Boolean,default:!1},cssDuration:{default:0},appear:{type:Boolean,default:!1},zIndex:{default:()=>void 0},theme:{default:`light`},reverseTheme:{type:Boolean,default:!1}},{modelValue:{type:Boolean,default:!1},modelModifiers:{}}),emits:(0,a.mergeModels)([`beforeShow`,`show`,`beforeHide`,`hide`,`beforeEnter`,`enter`,`enterCancelled`,`afterEnter`,`beforeLeave`,`leave`,`leaveCancelled`,`afterLeave`],[`update:modelValue`]),setup(s,{expose:c,emit:l}){let u=(0,a.useModel)(s,`modelValue`),{beforeShow:d,show:f,beforeHide:p,hide:m,beforeEnter:h,beforeLeave:g,enter:_,leave:v,afterEnter:y,afterLeave:b,enterCancelled:x,leaveCancelled:S}=i.useEmits(l),{n:C,ns:w,is:T}=t.useNamespace(`tooltip`),{currentTheme:E}=r.useTheme(s.theme,s.reverseTheme),D=(0,a.useTemplateRef)(`floatingRef`),O=(0,a.useTemplateRef)(`arrowRef`),k=(0,a.computed)(()=>[s.style,{width:e.toPx(s.width),height:e.toPx(s.height),maxWidth:e.toPx(s.maxWidth),maxHeight:e.toPx(s.maxHeight),zIndex:A.value}]),A=(0,a.ref)(0),{zIndex:j}=n.useZIndex(),{stop:M}=(0,a.watch)(u,e=>{e&&(A.value=s.zIndex||j.value)}),N=(0,a.computed)(()=>s.cssTransition?null:`enter`),P=(0,a.computed)(()=>s.cssTransition?null:`leave`),F=e=>{s.cssTransition?d(e):h(e)},I=(e,t)=>{_(e,t)},L=e=>{x(e)},R=e=>{s.cssTransition?f(e):y(e)},z=e=>{s.cssTransition?p(e):g(e)},B=(e,t)=>{v(e,t)},V=e=>{S(e)},H=e=>{s.cssTransition?m(e):b(e)};return(0,a.onUnmounted)(()=>{M()}),c({floatingRef:D,arrowRef:O}),(e,t)=>((0,a.openBlock)(),(0,a.createBlock)(a.Teleport,{disabled:!s.teleported,defer:s.defer,to:s.appendTo},[(0,a.createVNode)(a.Transition,(0,a.mergeProps)({name:s.transition,type:`transition`,css:s.cssTransition,duration:s.cssDuration,appear:s.appear,mode:s.mode,onBeforeEnter:F,onBeforeLeave:z},{[(0,a.toHandlerKey)(N.value)]:I},{[(0,a.toHandlerKey)(P.value)]:B},{onEnterCancelled:L,onLeaveCancelled:V,onAfterEnter:R,onAfterLeave:H}),{default:(0,a.withCtx)(()=>[u.value?((0,a.openBlock)(),(0,a.createElementBlock)(`div`,{key:0,ref_key:`floatingRef`,ref:D,style:(0,a.normalizeStyle)(k.value),class:(0,a.normalizeClass)([(0,a.unref)(C)(),(0,a.unref)(T)((0,a.unref)(E),!!(0,a.unref)(E)),s.floatingClass])},[(0,a.renderSlot)(e.$slots,`default`),s.showArrow?((0,a.openBlock)(),(0,a.createElementBlock)(`span`,{key:0,ref_key:`arrowRef`,ref:O,"data-placement":s.placement,style:(0,a.normalizeStyle)(s.arrowStyle),class:(0,a.normalizeClass)([(0,a.unref)(w)(`arrow`)])},null,14,o)):(0,a.createCommentVNode)(``,!0)],6)):(0,a.createCommentVNode)(``,!0)]),_:3},16,[`name`,`css`,`duration`,`appear`,`mode`])],8,[`disabled`,`defer`,`to`]))}});exports.default=s;

package/cjs/components/tooltip/src/use-emit.js

@@ -1 +0,0 @@
-function e(e){return{beforeShow:t=>e(`beforeShow`,t),show:t=>e(`show`,t),beforeHide:t=>e(`beforeHide`,t),hide:t=>e(`hide`,t),beforeEnter:t=>e(`beforeEnter`,t),enter:(t,n)=>e(`enter`,t,n),enterCancelled:t=>e(`enterCancelled`,t),afterEnter:t=>e(`afterEnter`,t),beforeLeave:t=>e(`beforeLeave`,t),leave:(t,n)=>e(`leave`,t,n),leaveCancelled:t=>e(`leaveCancelled`,t),afterLeave:t=>e(`afterLeave`,t)}}exports.useEmits=e;

package/es/components/tooltip/src/content.mjs

@@ -1,5 +0,0 @@
-import e from "./content.vue_vue_type_script_setup_true_lang.mjs";
-//#region packages/components/tooltip/src/content.vue
-var t = e;
-//#endregion
-export { t as default };

package/es/components/tooltip/src/content.vue_vue_type_script_setup_true_lang.mjs

@@ -1,166 +0,0 @@
-import { toPx as e } from "../../../utils/util.mjs";
-import "../../../utils/index.mjs";
-import { useNamespace as t } from "../../../composables/use-namespace/index.mjs";
-import { useZIndex as n } from "../../../composables/use-z-index/index.mjs";
-import { useTheme as r } from "../../../composables/use-theme/index.mjs";
-import "../../../composables/index.mjs";
-import { useEmits as i } from "./use-emit.mjs";
-import { Teleport as a, Transition as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createVNode as d, defineComponent as f, mergeModels as p, mergeProps as m, normalizeClass as h, normalizeStyle as g, onUnmounted as _, openBlock as v, ref as y, renderSlot as b, toHandlerKey as x, unref as S, useModel as C, useTemplateRef as w, watch as T, withCtx as E } from "vue";
-//#region packages/components/tooltip/src/content.vue?vue&type=script&setup=true&lang.ts
-var D = ["data-placement"], O = f({
-	__name: "content",
-	props: p({
-		modelValue: { type: Boolean },
-		style: {
-			type: [
-				Boolean,
-				null,
-				String,
-				Object,
-				Array
-			],
-			default: () => void 0
-		},
-		arrowStyle: { default: () => void 0 },
-		appendTo: { default: "body" },
-		teleported: {
-			type: Boolean,
-			default: !0
-		},
-		defer: {
-			type: Boolean,
-			default: () => void 0
-		},
-		content: {},
-		placement: { default: "top" },
-		showArrow: {
-			type: Boolean,
-			default: !1
-		},
-		width: { default: () => void 0 },
-		height: { default: () => void 0 },
-		maxWidth: { default: () => void 0 },
-		maxHeight: { default: () => void 0 },
-		floatingClass: { default: () => void 0 },
-		transition: { default: "" },
-		mode: { default: () => void 0 },
-		cssTransition: {
-			type: Boolean,
-			default: !1
-		},
-		cssDuration: { default: 0 },
-		appear: {
-			type: Boolean,
-			default: !1
-		},
-		zIndex: { default: () => void 0 },
-		theme: { default: "light" },
-		reverseTheme: {
-			type: Boolean,
-			default: !1
-		}
-	}, {
-		modelValue: {
-			type: Boolean,
-			default: !1
-		},
-		modelModifiers: {}
-	}),
-	emits: p([
-		"beforeShow",
-		"show",
-		"beforeHide",
-		"hide",
-		"beforeEnter",
-		"enter",
-		"enterCancelled",
-		"afterEnter",
-		"beforeLeave",
-		"leave",
-		"leaveCancelled",
-		"afterLeave"
-	], ["update:modelValue"]),
-	setup(f, { expose: p, emit: O }) {
-		let k = C(f, "modelValue"), { beforeShow: A, show: j, beforeHide: M, hide: N, beforeEnter: P, beforeLeave: F, enter: I, leave: L, afterEnter: R, afterLeave: z, enterCancelled: ee, leaveCancelled: B } = i(O), { n: V, ns: H, is: U } = t("tooltip"), { currentTheme: W } = r(f.theme, f.reverseTheme), G = w("floatingRef"), K = w("arrowRef"), q = s(() => [f.style, {
-			width: e(f.width),
-			height: e(f.height),
-			maxWidth: e(f.maxWidth),
-			maxHeight: e(f.maxHeight),
-			zIndex: J.value
-		}]), J = y(0), { zIndex: Y } = n(), { stop: X } = T(k, (e) => {
-			e && (J.value = f.zIndex || Y.value);
-		}), Z = s(() => f.cssTransition ? null : "enter"), Q = s(() => f.cssTransition ? null : "leave"), $ = (e) => {
-			f.cssTransition ? A(e) : P(e);
-		}, te = (e, t) => {
-			I(e, t);
-		}, ne = (e) => {
-			ee(e);
-		}, re = (e) => {
-			f.cssTransition ? j(e) : R(e);
-		}, ie = (e) => {
-			f.cssTransition ? M(e) : F(e);
-		}, ae = (e, t) => {
-			L(e, t);
-		}, oe = (e) => {
-			B(e);
-		}, se = (e) => {
-			f.cssTransition ? N(e) : z(e);
-		};
-		return _(() => {
-			X();
-		}), p({
-			floatingRef: G,
-			arrowRef: K
-		}), (e, t) => (v(), c(a, {
-			disabled: !f.teleported,
-			defer: f.defer,
-			to: f.appendTo
-		}, [d(o, m({
-			name: f.transition,
-			type: "transition",
-			css: f.cssTransition,
-			duration: f.cssDuration,
-			appear: f.appear,
-			mode: f.mode,
-			onBeforeEnter: $,
-			onBeforeLeave: ie
-		}, { [x(Z.value)]: te }, { [x(Q.value)]: ae }, {
-			onEnterCancelled: ne,
-			onLeaveCancelled: oe,
-			onAfterEnter: re,
-			onAfterLeave: se
-		}), {
-			default: E(() => [k.value ? (v(), u("div", {
-				key: 0,
-				ref_key: "floatingRef",
-				ref: G,
-				style: g(q.value),
-				class: h([
-					S(V)(),
-					S(U)(S(W), !!S(W)),
-					f.floatingClass
-				])
-			}, [b(e.$slots, "default"), f.showArrow ? (v(), u("span", {
-				key: 0,
-				ref_key: "arrowRef",
-				ref: K,
-				"data-placement": f.placement,
-				style: g(f.arrowStyle),
-				class: h([S(H)("arrow")])
-			}, null, 14, D)) : l("", !0)], 6)) : l("", !0)]),
-			_: 3
-		}, 16, [
-			"name",
-			"css",
-			"duration",
-			"appear",
-			"mode"
-		])], 8, [
-			"disabled",
-			"defer",
-			"to"
-		]));
-	}
-});
-//#endregion
-export { O as default };