@wizleap-inc/wiz-ui-next 1.14.2 → 1.16.0

package/dist/hooks/index.d.ts

@@ -1,2 +1,3 @@
 export * from "./use-z-index";
+export * from "./use-breakpoint";
 export { useSnackbar } from "./use-snackbar";

package/dist/hooks/use-breakpoint.d.ts

@@ -0,0 +1,51 @@
+import { PropType } from "vue";
+declare const BREAKPOINTS: readonly ["sm", "md", "lg"];
+/**
+ * @see {@link useBreakpoint}
+ * @example
+ * BreakpointVariantは、次の値のいずれかを取ります。
+ * - sm: max-width: 480px(30rem)
+ * - md: max-width: 768px(48rem)
+ * - lg: max-width: 1024px(64rem)
+ *
+ * この閾値は、BreakpointProviderを使用して、カスタマイズすることができます。
+ */
+export type BreakpointVariant = (typeof BREAKPOINTS)[number];
+export type Breakpoint = Record<BreakpointVariant, number>;
+/**
+ * @see {@link BreakpointVariant}
+ * @example
+ * # カスタマイズ
+ * `useBreakpoint`フックを使用して、一番近い親のprovideBreakpointの閾値を取得することができます。
+ * このフックは、`BreakpointVariant`のいずれかの値を返します。
+ * この戻り値は、`bp`という名前のPropsにそのまま渡すことができます。
+ *
+ * ```vue
+ * <template>
+ *  <Timeline :bp="bp">
+ * </template>
+ *
+ * <script setup lang="ts">
+ * import { Timeline } from "wiz-ui";
+ * import { useBreakpoint } from '../hooks/use-breakpoint';
+ *
+ * // 一番近い親のprovideBreakpointの閾値を取得する（同じキーのprovideネストは子優先挙動をするため)
+ * const bp = useBreakpoint();
+ * </script>
+ * ```
+ */
+export declare const useBreakpoint: () => import("vue").Ref<"sm" | "md" | "lg">;
+export declare const BreakpointProvider: import("vue").DefineComponent<{
+    bp: {
+        type: PropType<Breakpoint>;
+        required: true;
+    };
+}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>[] | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    bp: {
+        type: PropType<Breakpoint>;
+        required: true;
+    };
+}>>, {}>;
+export {};