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/@core/composables/src/__tests__/use-sortable.test.ts

@@ -2,7 +2,7 @@ import type { SortableOptions } from 'sortablejs';
 
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
-import { useSortable } from './use-sortable';
+import { useSortable } from '../use-sortable';
 
 describe('useSortable', () => {
   beforeEach(() => {
@@ -30,7 +30,6 @@ describe('useSortable', () => {
 
     // Import sortablejs to access the mocked create function
     const Sortable = await import(
-      // @ts-expect-error - This is a dynamic import
       'sortablejs/modular/sortable.complete.esm.js'
     );
 

packages/@core/composables/src/index.ts

@@ -1,5 +1,6 @@
 export * from './use-content-style';
 export * from './use-namespace';
+export * from './use-priority-value';
 export * from './use-sortable';
 export {
   useEmitAsProps,

packages/@core/composables/src/use-priority-value.ts

@@ -0,0 +1,47 @@
+import type { Ref } from 'vue';
+import { computed, getCurrentInstance, useAttrs, useSlots } from 'vue';
+
+import {
+  getFirstNonNullOrUndefined,
+  kebabToCamelCase,
+} from '@vben-core/shared';
+
+/**
+ * 依次从插槽、attrs、props、state 中获取值
+ * @param key
+ * @param props
+ * @param state
+ */
+export function usePriorityValue<
+  T extends Record<string, any>,
+  S extends Record<string, any>,
+  K extends keyof T = keyof T,
+>(key: K, props: T, state: Readonly<Ref<NoInfer<S>>> | undefined) {
+  const instance = getCurrentInstance();
+  const slots = useSlots();
+  const attrs = useAttrs() as T;
+
+  const value = computed((): T[K] => {
+    // props不管有没有传，都会有默认值，会影响这里的顺序，
+    // 通过判断原始props是否有值来判断是否传入
+    const rawProps = (instance?.vnode?.props || {}) as T;
+
+    const standardRwaProps = {} as T;
+
+    for (const [key, value] of Object.entries(rawProps)) {
+      standardRwaProps[kebabToCamelCase(key) as K] = value;
+    }
+    const propsKey =
+      standardRwaProps?.[key] === undefined ? undefined : props[key];
+
+    // slot可以关闭
+    return getFirstNonNullOrUndefined(
+      slots[key as string],
+      attrs[key],
+      propsKey,
+      state?.value?.[key as keyof S],
+    ) as T[K];
+  });
+
+  return value;
+}