package list from viandwi24

composables/useLang.ts

@@ -0,0 +1,8 @@
+import { useI18n } from 'vue-i18n'
+
+export const useLang = () => {
+  const { t } = useI18n()
+  return {
+    t,
+  }
+}

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,
+  }
+}

composables/useSticky.ts

@@ -0,0 +1,20 @@
+export const useSticky = (el: HTMLElement, offset: number) => {
+  const onScroll = () => {
+    const scrollTop = window.pageYOffset || document.documentElement.scrollTop
+    if (scrollTop > offset) {
+      el.classList.add('sticky')
+    } else {
+      el.classList.remove('sticky')
+    }
+  }
+
+  // lifecycle hooks
+  window.addEventListener('scroll', onScroll)
+  onUnmounted(() => {
+    window.removeEventListener('scroll', onScroll)
+  })
+
+  return {
+    onScroll,
+  }
+}

composables/useSyncProps.ts

@@ -0,0 +1,16 @@
+import { WritableComputedRef } from 'vue'
+
+export const useSyncProps = <T>(
+  props: any,
+  key: string,
+  emit: any
+): WritableComputedRef<T> => {
+  return computed({
+    get() {
+      return props[key]
+    },
+    set(value) {
+      emit(`update:${key}`, value)
+    },
+  })
+}