feat: add modal and drawer components and examples (#4229)

* feat: add modal component

* feat: add drawer component

* feat: apply new modal and drawer components to the layout

* chore: typo

* feat: add some unit tests

packages/effects/common-ui/src/components/ellipsis-text/ellipsis-text.vue

@@ -95,41 +95,43 @@ function handleExpand() {
 }
 </script>
 <template>
-  <VbenTooltip
-    :content-style="{
-      ...tooltipOverlayStyle,
-      maxWidth: `${defaultTooltipMaxWidth}px`,
-      fontSize: `${tooltipFontSize}px`,
-      color: tooltipColor,
-      backgroundColor: tooltipBackgroundColor,
-    }"
-    :disabled="!props.tooltip || isExpand"
-    :side="placement"
-  >
-    <slot name="tooltip">
-      <slot></slot>
-    </slot>
-
-    <template #trigger>
-      <div
-        ref="ellipsis"
-        :class="{
-          '!cursor-pointer': expand,
-          ['inline-block truncate']: line === 1,
-          [$style.ellipsisMultiLine]: line > 1,
-        }"
-        :style="{
-          '-webkit-line-clamp': isExpand ? '' : line,
-          'max-width': textMaxWidth,
-        }"
-        class="cursor-text overflow-hidden"
-        @click="handleExpand"
-        v-bind="$attrs"
-      >
+  <div>
+    <VbenTooltip
+      :content-style="{
+        ...tooltipOverlayStyle,
+        maxWidth: `${defaultTooltipMaxWidth}px`,
+        fontSize: `${tooltipFontSize}px`,
+        color: tooltipColor,
+        backgroundColor: tooltipBackgroundColor,
+      }"
+      :disabled="!props.tooltip || isExpand"
+      :side="placement"
+    >
+      <slot name="tooltip">
         <slot></slot>
-      </div>
-    </template>
-  </VbenTooltip>
+      </slot>
+
+      <template #trigger>
+        <div
+          ref="ellipsis"
+          :class="{
+            '!cursor-pointer': expand,
+            ['inline-block truncate']: line === 1,
+            [$style.ellipsisMultiLine]: line > 1,
+          }"
+          :style="{
+            '-webkit-line-clamp': isExpand ? '' : line,
+            'max-width': textMaxWidth,
+          }"
+          class="cursor-text overflow-hidden"
+          @click="handleExpand"
+          v-bind="$attrs"
+        >
+          <slot></slot>
+        </div>
+      </template>
+    </VbenTooltip>
+  </div>
 </template>
 
 <style module>

packages/effects/common-ui/src/components/index.ts

@@ -1,2 +1,3 @@
 export * from './ellipsis-text';
 export * from './page';
+export * from '@vben-core/popup-ui';