@das-fed/ui 6.4.0-dev.82 → 6.4.0-dev.84

package/packages/components/tooltip/index.d.ts

@@ -5,6 +5,7 @@ declare const DasTooltipRef: () => import("vue").Ref<({
     $props: {
         readonly selfPopperClass?: string | undefined;
         readonly effect?: ("dark" | "light") | undefined;
+        readonly placement?: ("top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end") | undefined;
         readonly customClass?: string | undefined;
         readonly content?: string | undefined;
         readonly disabled?: boolean | undefined;
@@ -43,6 +44,7 @@ declare const DasTooltipRef: () => import("vue").Ref<({
         text: string;
         selfPopperClass: string;
         effect: "dark" | "light";
+        placement: "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end";
         customClass: string;
         content: string;
         row: number | string;
@@ -74,6 +76,7 @@ declare const DasTooltipRef: () => import("vue").Ref<({
     text: string;
     selfPopperClass: string;
     effect: "dark" | "light";
+    placement: "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end";
     customClass: string;
     content: string;
     row: number | string;
@@ -83,7 +86,7 @@ declare const DasTooltipRef: () => import("vue").Ref<({
 }> & Omit<Readonly<import("./src/type.js").Props> & Readonly<{
     onShow?: ((event?: Event | undefined) => any) | undefined;
     onHide?: ((event?: Event | undefined) => any) | undefined;
-}>, "$tooltipRef" | ("disabled" | "text" | "selfPopperClass" | "effect" | "customClass" | "content" | "row" | "textWidth" | "textHtml" | "isMaxheight")> & import("vue").ShallowUnwrapRef<{
+}>, "$tooltipRef" | ("disabled" | "text" | "selfPopperClass" | "effect" | "placement" | "customClass" | "content" | "row" | "textWidth" | "textHtml" | "isMaxheight")> & import("vue").ShallowUnwrapRef<{
     $tooltipRef: import("vue").Ref<any, any>;
 }> & {} & import("vue").ComponentCustomProperties & {} & {
     $slots: {
@@ -96,6 +99,7 @@ declare const DasTooltipRef: () => import("vue").Ref<({
     $props: {
         readonly selfPopperClass?: string | undefined;
         readonly effect?: ("dark" | "light") | undefined;
+        readonly placement?: ("top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end") | undefined;
         readonly customClass?: string | undefined;
         readonly content?: string | undefined;
         readonly disabled?: boolean | undefined;
@@ -134,6 +138,7 @@ declare const DasTooltipRef: () => import("vue").Ref<({
         text: string;
         selfPopperClass: string;
         effect: "dark" | "light";
+        placement: "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end";
         customClass: string;
         content: string;
         row: number | string;
@@ -165,6 +170,7 @@ declare const DasTooltipRef: () => import("vue").Ref<({
     text: string;
     selfPopperClass: string;
     effect: "dark" | "light";
+    placement: "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end";
     customClass: string;
     content: string;
     row: number | string;
@@ -174,7 +180,7 @@ declare const DasTooltipRef: () => import("vue").Ref<({
 }> & Omit<Readonly<import("./src/type.js").Props> & Readonly<{
     onShow?: ((event?: Event | undefined) => any) | undefined;
     onHide?: ((event?: Event | undefined) => any) | undefined;
-}>, "$tooltipRef" | ("disabled" | "text" | "selfPopperClass" | "effect" | "customClass" | "content" | "row" | "textWidth" | "textHtml" | "isMaxheight")> & import("vue").ShallowUnwrapRef<{
+}>, "$tooltipRef" | ("disabled" | "text" | "selfPopperClass" | "effect" | "placement" | "customClass" | "content" | "row" | "textWidth" | "textHtml" | "isMaxheight")> & import("vue").ShallowUnwrapRef<{
     $tooltipRef: import("vue").Ref<any, any>;
 }> & {} & import("vue").ComponentCustomProperties & {} & {
     $slots: {
@@ -196,6 +202,7 @@ declare const DasTooltip: import("@das-fed/utils").SFCWithInstall<{
         text: string;
         selfPopperClass: string;
         effect: "dark" | "light";
+        placement: "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end";
         customClass: string;
         content: string;
         row: number | string;
@@ -219,6 +226,7 @@ declare const DasTooltip: import("@das-fed/utils").SFCWithInstall<{
         text: string;
         selfPopperClass: string;
         effect: "dark" | "light";
+        placement: "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end";
         customClass: string;
         content: string;
         row: number | string;
@@ -242,6 +250,7 @@ declare const DasTooltip: import("@das-fed/utils").SFCWithInstall<{
     text: string;
     selfPopperClass: string;
     effect: "dark" | "light";
+    placement: "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end";
     customClass: string;
     content: string;
     row: number | string;

package/packages/components/tooltip/index.js

@@ -1,5 +1,5 @@
 import '@das-fed/ui/packages/components/tooltip/style.css';
-import { defineComponent as S, useCssVars as E, ref as u, computed as c, onMounted as L, onBeforeMount as _, openBlock as s, createBlock as D, unref as C, mergeProps as N, withCtx as x, withDirectives as P, createElementBlock as l, normalizeClass as b, renderSlot as k, Fragment as z, createTextVNode as I, toDisplayString as T, createCommentVNode as $, normalizeStyle as V, nextTick as W } from "vue";
+import { defineComponent as S, useCssVars as E, ref as u, computed as c, onMounted as L, onBeforeMount as D, openBlock as s, createBlock as N, unref as C, mergeProps as P, withCtx as x, withDirectives as _, createElementBlock as l, normalizeClass as b, renderSlot as k, Fragment as z, createTextVNode as I, toDisplayString as T, createCommentVNode as $, normalizeStyle as V, nextTick as W } from "vue";
 import { setThemeRule as q } from "@das-fed/web/packages/theme/index";
 import { setI18nRule as F, t as X } from "@das-fed/web/packages/i18n/index";
 import { withInstall as Y } from "@das-fed/utils/with-install/index";
@@ -12,6 +12,7 @@ const A = ["innerHTML"], G = { key: 1 }, J = /* @__PURE__ */ S({
   props: {
     selfPopperClass: { default: "" },
     effect: { default: "light" },
+    placement: { default: "top" },
     customClass: { default: "" },
     content: { default: "" },
     disabled: { type: Boolean, default: void 0 },
@@ -24,7 +25,7 @@ const A = ["innerHTML"], G = { key: 1 }, J = /* @__PURE__ */ S({
   emits: ["show", "hide"],
   setup(i, { expose: d, emit: r }) {
     E((e) => ({
-      "3fbd3ffc": M.value
+      ebe86fd8: M.value
     }));
     const o = i, a = r, m = u(), h = u(!1), M = c(() => Number(o.row)), B = c(() => o.disabled ?? (o.text ? !h.value : !1)), v = c(() => o.content || o.text), H = (e) => {
       h.value = e.target.scrollHeight > e.target.clientHeight;
@@ -43,16 +44,17 @@ const A = ["innerHTML"], G = { key: 1 }, J = /* @__PURE__ */ S({
       }));
     };
     return L(() => {
-    }), _(() => {
+    }), D(() => {
       window.removeEventListener("wheel", f);
     }), d({
       $tooltipRef: m
-    }), (e, n) => (s(), D(C(j), N({
+    }), (e, n) => (s(), N(C(j), P({
       ref_key: "$tooltipRef",
       ref: m,
       class: "das-ui-tooltip",
       disabled: B.value,
       effect: e.effect,
+      placement: e.placement,
       "popper-class": `das-ui-tooltip-popper ${e.isMaxheight ? "max-height" : ""} ${e.selfPopperClass}`,
       "hide-after": 100,
       "show-after": 100,
@@ -60,7 +62,7 @@ const A = ["innerHTML"], G = { key: 1 }, J = /* @__PURE__ */ S({
       onHide: w
     }, e.$attrs), {
       content: x(() => [
-        P((s(), l(
+        _((s(), l(
           "div",
           {
             class: b({ "max-height": e.isMaxheight, "das-popper-content": !0 })
@@ -116,14 +118,14 @@ const A = ["innerHTML"], G = { key: 1 }, J = /* @__PURE__ */ S({
       ]),
       _: 3
       /* FORWARDED */
-    }, 16, ["disabled", "effect", "popper-class"]));
+    }, 16, ["disabled", "effect", "placement", "popper-class"]));
   }
 }), K = (i, d) => {
   const r = i.__vccOpts || i;
   for (const [o, a] of d)
     r[o] = a;
   return r;
-}, Q = /* @__PURE__ */ K(J, [["__scopeId", "data-v-4470233c"]]), U = {
+}, Q = /* @__PURE__ */ K(J, [["__scopeId", "data-v-dc13a585"]]), U = {
   "--das-ui-tooltip-font-normal": "#212121",
   "--das-ui-tooltip-font-light": "#fff",
   "--das-ui-tooltip-bgff-color": "#fff"

package/packages/components/tooltip/src/index.vue.d.ts

@@ -5897,6 +5897,7 @@ declare const __VLS_component: import("vue").DefineComponent<Props, {
     text: string;
     selfPopperClass: string;
     effect: "dark" | "light";
+    placement: "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end";
     customClass: string;
     content: string;
     row: number | string;

package/packages/components/tooltip/src/type.d.ts

@@ -7,6 +7,21 @@ export interface Props {
   effect?: 'dark' | 'light'
 
   
+  placement?:
+    | 'top'
+    | 'top-start'
+    | 'top-end'
+    | 'bottom'
+    | 'bottom-start'
+    | 'bottom-end'
+    | 'left'
+    | 'left-start'
+    | 'left-end'
+    | 'right'
+    | 'right-start'
+    | 'right-end'
+
+  
   customClass?: string
 
   
@@ -29,8 +44,6 @@ export interface Props {
 
   
   isMaxheight?: boolean
-  
-  content?: string
 }
 export interface Emits {
   

package/packages/components/tooltip/style.css

@@ -1 +1 @@
-.das-ui-tooltip-popper.el-popper{max-width:360px;box-shadow:0 4px 10px #0003;border:none;font-size:var(--das-ui-font-size-sm);padding:0;border-radius:unset}.das-ui-tooltip-popper.el-popper[data-popper-placement^=bottom]>.el-popper__arrow{top:-3px!important}.das-ui-tooltip-popper.el-popper[data-popper-placement^=left]>.el-popper__arrow{right:-3px!important}.das-ui-tooltip-popper.el-popper .das-popper-content{padding:7px 12px}.das-ui-tooltip-popper.el-popper .max-height{max-height:298px}.das-ui-tooltip-popper.el-popper.is-light{color:var(--das-ui-color-normal);background-color:var(--das-ui-tooltip-bgff-color)}.das-ui-tooltip-popper.el-popper.is-light:after{position:absolute;z-index:-1;top:0;right:0;bottom:0;left:0;content:"";background:var(--das-ui-tooltip-bgff-color);border-radius:2px}.das-ui-tooltip-popper.el-popper.is-light .el-popper__arrow:before{height:8px;width:8px;background-color:var(--das-ui-tooltip-bgff-color);border-color:var(--das-ui-tooltip-bgff-color);border-radius:0!important}.das-ui-tooltip-popper.el-popper.is-light[data-popper-placement^=top] .el-popper__arrow:before{box-shadow:3px 3px 5px #00000026}.das-ui-tooltip-popper.el-popper.is-light[data-popper-placement^=bottom] .el-popper__arrow:before{box-shadow:-2px -2px 5px #0000001a}.das-ui-tooltip-popper.el-popper.is-light[data-popper-placement^=left] .el-popper__arrow:before{box-shadow:3px 0 6px #0000001f,0 -2px 6px #cc95951f}.das-ui-tooltip-popper.el-popper.is-light[data-popper-placement^=right] .el-popper__arrow:before{box-shadow:0 3px 6px #0000001a,-2px 0 6px #0000001a}.das-tooltip-text-wrap[data-v-4470233c]{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--3fbd3ffc)}
+.das-ui-tooltip-popper.el-popper{max-width:360px;box-shadow:0 4px 10px #0003;border:none;font-size:var(--das-ui-font-size-sm);padding:0;border-radius:unset}.das-ui-tooltip-popper.el-popper[data-popper-placement^=bottom]>.el-popper__arrow{top:-3px!important}.das-ui-tooltip-popper.el-popper[data-popper-placement^=left]>.el-popper__arrow{right:-3px!important}.das-ui-tooltip-popper.el-popper .das-popper-content{padding:7px 12px}.das-ui-tooltip-popper.el-popper .max-height{max-height:298px}.das-ui-tooltip-popper.el-popper.is-light{color:var(--das-ui-color-normal);background-color:var(--das-ui-tooltip-bgff-color)}.das-ui-tooltip-popper.el-popper.is-light:after{position:absolute;z-index:-1;top:0;right:0;bottom:0;left:0;content:"";background:var(--das-ui-tooltip-bgff-color);border-radius:2px}.das-ui-tooltip-popper.el-popper.is-light .el-popper__arrow:before{height:8px;width:8px;background-color:var(--das-ui-tooltip-bgff-color);border-color:var(--das-ui-tooltip-bgff-color);border-radius:0!important}.das-ui-tooltip-popper.el-popper.is-light[data-popper-placement^=top] .el-popper__arrow:before{box-shadow:3px 3px 5px #00000026}.das-ui-tooltip-popper.el-popper.is-light[data-popper-placement^=bottom] .el-popper__arrow:before{box-shadow:-2px -2px 5px #0000001a}.das-ui-tooltip-popper.el-popper.is-light[data-popper-placement^=left] .el-popper__arrow:before{box-shadow:3px 0 6px #0000001f,0 -2px 6px #cc95951f}.das-ui-tooltip-popper.el-popper.is-light[data-popper-placement^=right] .el-popper__arrow:before{box-shadow:0 3px 6px #0000001a,-2px 0 6px #0000001a}.das-tooltip-text-wrap[data-v-dc13a585]{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--ebe86fd8)}