package list from viandwi24

2023-04-28 09:58:09 +05:30
commit 4125135289
108 changed files with 27411 additions and 0 deletions
--- a/composables/useScreen.ts
+++ b/composables/useScreen.ts
@@ -0,0 +1,83 @@
+export enum Size {
+  SMALL = 'sm',
+  MEDIUM = 'md',
+  LARGE = 'lg',
+  EXTRA_LARGE = 'xl',
+}
+
+export type ScreenSize =
+  | typeof Size.SMALL
+  | typeof Size.MEDIUM
+  | typeof Size.LARGE
+  | typeof Size.EXTRA_LARGE
+
+export const defaultScreenConfig = {
+  [Size.SMALL]: 576,
+  [Size.MEDIUM]: 768,
+  [Size.LARGE]: 992,
+  [Size.EXTRA_LARGE]: 1200,
+}
+
+export const useScreen = () => {
+  const screenSize = reactive({
+    width: 0,
+    height: 0,
+  })
+
+  const current = ref<ScreenSize>(Size.SMALL)
+
+  const getSize = (width?: number) => {
+    if (width === undefined) width = screenSize.width
+    const {
+      [Size.SMALL]: sm,
+      [Size.MEDIUM]: md,
+      [Size.LARGE]: lg,
+      [Size.EXTRA_LARGE]: xl,
+    } = defaultScreenConfig
+    if (width < Number(sm)) return Size.SMALL
+    if (width < Number(md)) return Size.MEDIUM
+    if (width < Number(lg)) return Size.LARGE
+    if (width < Number(xl)) return Size.EXTRA_LARGE
+    return Size.EXTRA_LARGE
+  }
+
+  const onWindowResize = () => {
+    const { innerWidth, innerHeight } = window
+    screenSize.width = innerWidth
+    screenSize.height = innerHeight
+    current.value = getSize()
+  }
+
+  const higherThan = (size: ScreenSize) => {
+    const {
+      [Size.SMALL]: sm,
+      [Size.MEDIUM]: md,
+      [Size.LARGE]: lg,
+      [Size.EXTRA_LARGE]: xl,
+    } = defaultScreenConfig
+    const width = screenSize.width
+    if (size === Size.SMALL) return width >= Number(sm)
+    if (size === Size.MEDIUM) return width >= Number(md)
+    if (size === Size.LARGE) return width >= Number(lg)
+    if (size === Size.EXTRA_LARGE) return width >= Number(xl)
+    return false
+  }
+
+  onMounted(() => {
+    if (typeof window === 'undefined') return
+    window.addEventListener('resize', onWindowResize)
+    getSize(window.innerWidth)
+  })
+
+  onUnmounted(() => {
+    if (typeof window === 'undefined') return
+    window.removeEventListener('resize', onWindowResize)
+  })
+
+  return {
+    getSize,
+    screenSize,
+    current,
+    higherThan,
+  }
+}