@blueprint-ts/core 1.0.0

package/src/vue/composables/useGlobalCheckbox.ts

@@ -0,0 +1,145 @@
+import { getCurrentInstance, shallowRef, computed, type Component, type Ref, type ComputedRef, h, render, onUnmounted } from 'vue'
+
+interface UseGlobalCheckboxOptions<T> {
+  getAll: () => Promise<T[]>
+  getPage: () => T[]
+  totalCount: () => number
+}
+
+export default function <T>(
+  dialog: Component,
+  options: UseGlobalCheckboxOptions<T>,
+  querySelector: string = 'body'
+): {
+  selectedRows: Ref<T[]>
+  indeterminate: ComputedRef<boolean>
+  checked: ComputedRef<boolean>
+  handleGlobalCheckboxChange: (event: Event) => void
+} {
+  const self = getCurrentInstance()
+  const selectedRows = shallowRef<T[]>([])
+
+  function mountDialog() {
+    if (!self?.appContext) {
+      throw new Error('useGlobalCheckbox must be called inside a setup function')
+    }
+
+    const vNode = h(dialog, {
+      indeterminate: indeterminate.value,
+      checked: checked.value
+    })
+    vNode.key = Symbol()
+    vNode.appContext = self.appContext
+    render(vNode, document.querySelector(querySelector) as Element)
+    return vNode.component
+  }
+
+  function unmountConfirmDialog() {
+    render(null, document.querySelector(querySelector) as Element)
+  }
+
+  onUnmounted(() => {
+    unmountConfirmDialog()
+  })
+
+  const indeterminate = computed(() => {
+    const totalCount: number = options.totalCount()
+    return selectedRows.value.length > 0 && selectedRows.value.length < totalCount
+  })
+
+  const checked = computed({
+    get: () => {
+      const totalCount: number = options.totalCount()
+
+      return selectedRows.value.length > 0 && selectedRows.value.length === totalCount
+    },
+    set: (value: boolean) => {
+      if (!value) {
+        selectedRows.value = []
+      }
+    }
+  })
+
+  // Check if all elements are already displayed on the current page
+  const isAllElementsOnCurrentPage = (): boolean => {
+    return options.getPage().length === options.totalCount()
+  }
+
+  async function handleGlobalCheckboxChange(event: Event) {
+    if (!(event.target instanceof HTMLInputElement)) {
+      return
+    }
+
+    const pageData: T[] = options.getPage()
+
+    // If all elements are on the current page, we can skip the dialog
+    // as both options would result in the same selection
+    const allElementsOnPage = isAllElementsOnCurrentPage()
+
+    // Case 1: Nothing is selected (unchecked state)
+    if (!checked.value && !indeterminate.value) {
+      if (allElementsOnPage) {
+        // All elements are already on the current page, just select them
+        selectedRows.value = [...pageData]
+        return
+      }
+
+      // We need preventDefault() here because we're showing a dialog
+      // and don't want the checkbox to be checked until the user makes a choice
+      event.preventDefault()
+
+      const mountedDialog = mountDialog()
+      if (!mountedDialog?.exposed) return
+
+      // When clicking the empty checkbox, ask if user wants current page or all entries
+      if (await mountedDialog.exposed['open']) {
+        // User clicked "All Elements" button
+        selectedRows.value = await options.getAll()
+      } else {
+        // User clicked "Current Page" button
+        selectedRows.value = [...pageData]
+      }
+      return
+    }
+
+    // Case 2: Indeterminate state (some items selected, not all)
+    if (indeterminate.value) {
+      if (allElementsOnPage) {
+        // If all elements are on the page, just select them all
+        selectedRows.value = [...pageData]
+        return
+      }
+
+      // We need preventDefault() here because we're showing a dialog
+      // and don't want the checkbox to be checked until the user makes a choice
+      event.preventDefault()
+
+      const mountedDialog = mountDialog()
+      if (!mountedDialog?.exposed) return
+
+      // When clicking the indeterminate checkbox, ask if the user wants all entries or unselect all
+      if (await mountedDialog.exposed['open']) {
+        // User clicked "All Elements" button
+        selectedRows.value = await options.getAll()
+      } else {
+        // User clicked "Discard" button
+        selectedRows.value = []
+      }
+      return
+    }
+
+    // Case 3: Checked state (all items selected)
+    if (checked.value) {
+      // When all items are selected, we just clear the selection without a dialog
+      selectedRows.value = []
+      return
+    }
+  }
+
+  return {
+    selectedRows,
+    indeterminate,
+    checked,
+    handleGlobalCheckboxChange
+  }
+}

package/src/vue/composables/useIsEmpty.ts

@@ -0,0 +1,34 @@
+import { isEmpty as _isEmpty } from 'lodash-es'
+
+export default function () {
+  function isObject(value: unknown) {
+    return typeof value === 'object' && !Array.isArray(value) && value !== null
+  }
+
+  function isEmpty(value: unknown) {
+    // Check objects with lodash
+    if (isObject(value)) {
+      return _isEmpty(value)
+    }
+
+    // Check objects against their length property
+    if (Array.isArray(value)) {
+      return value.length === 0
+    }
+
+    if (value === '' || value === null) {
+      return true
+    }
+
+    return value === undefined
+  }
+
+  function isNotEmpty(value: unknown) {
+    return !isEmpty(value)
+  }
+
+  return {
+    isEmpty,
+    isNotEmpty
+  }
+}

package/src/vue/composables/useIsOpen.ts

@@ -0,0 +1,37 @@
+import { ref, computed, type Ref, type WritableComputedRef } from 'vue'
+
+export default function (
+  callback: (value: boolean) => void = () => {},
+  delay: number = 500
+): {
+  isOpenKey: Ref<number>
+  isOpen: WritableComputedRef<boolean>
+} {
+  const internalIsOpen = ref<boolean>(false)
+
+  const isOpenKey = ref<number>(0)
+
+  const isOpen = computed({
+    get(): boolean {
+      return internalIsOpen.value
+    },
+    set(value: boolean): void {
+      // False means we close, so we increment the key
+      // Add delay to preserve the closing animation.
+      setTimeout(() => {
+        if (!value) {
+          isOpenKey.value++
+        }
+      }, delay)
+
+      internalIsOpen.value = value
+
+      callback(value)
+    }
+  })
+
+  return {
+    isOpenKey,
+    isOpen
+  }
+}

package/src/vue/composables/useIsOpenFromVar.ts

@@ -0,0 +1,61 @@
+import { ref, computed, type Ref, type ComputedRef } from 'vue'
+import useIsEmpty from './useIsEmpty'
+
+export default function <FromVarType>(
+  defaultValue: FromVarType | undefined = undefined,
+  delay: number = 500
+): {
+  fromVar: ComputedRef<FromVarType | undefined>
+  isOpenFromVar: ComputedRef<boolean>
+  isOpenFromVarKey: Ref<number>
+} {
+  const isOpenFromVarKey = ref<number>(0)
+
+  const { isNotEmpty } = useIsEmpty()
+
+  const internalIsOpen = ref<boolean>(false)
+
+  const internalFromVar = ref<FromVarType | undefined>(defaultValue)
+
+  const isOpenFromVar = computed({
+    get(): boolean {
+      return internalIsOpen.value
+    },
+    set(value): void {
+      if (value) {
+        internalIsOpen.value = true
+
+        internalFromVar.value = value
+      } else {
+        internalIsOpen.value = false
+
+        setTimeout((): void => {
+          internalFromVar.value = defaultValue
+
+          isOpenFromVarKey.value++
+        }, delay)
+      }
+    }
+  })
+
+  const fromVar = computed({
+    get(): FromVarType | undefined {
+      return internalFromVar.value
+    },
+    set(value): void {
+      if (isNotEmpty(value)) {
+        isOpenFromVar.value = true
+
+        internalFromVar.value = value
+      } else {
+        isOpenFromVar.value = false
+      }
+    }
+  })
+
+  return {
+    fromVar,
+    isOpenFromVar,
+    isOpenFromVarKey
+  }
+}

package/src/vue/composables/useModelWrapper.ts

@@ -0,0 +1,24 @@
+import { computed } from 'vue'
+import { type ModelValueProps } from '../contracts/ModelValueProps'
+import { type ModelValueOptions as ParentModelValueOptions } from '../contracts/ModelValueOptions'
+
+export interface ModelValueOptions<T> extends ParentModelValueOptions {
+  callback?: (value: T) => void
+}
+
+export default function <T, EmitType>(props: ModelValueProps, emit: EmitType, options: ModelValueOptions<T> = {}) {
+  const { name = 'modelValue', callback = () => {} } = options
+
+  return computed({
+    get(): T {
+      /* @ts-expect-error Ignore type */
+      return props[name]
+    },
+    set(value: T): void {
+      /* @ts-expect-error Ignore expression is not callable */
+      emit(`update:${name}`, value)
+
+      callback(value)
+    }
+  })
+}

package/src/vue/composables/useOnOpen.ts

@@ -0,0 +1,34 @@
+import { nextTick, type Ref, watch } from 'vue'
+
+type Callback = () => void
+
+export default function (ref: Ref<unknown>) {
+  const openCallbacks: Callback[] = []
+  const closeCallbacks: Callback[] = []
+
+  watch(
+    () => ref.value,
+    (newValue, oldValue) => {
+      nextTick(() => {
+        if (newValue && !oldValue) {
+          openCallbacks.forEach((callback) => callback())
+        } else if (!newValue && oldValue) {
+          closeCallbacks.forEach((callback) => callback())
+        }
+      })
+    }
+  )
+
+  function onOpen(callback: Callback): void {
+    openCallbacks.push(callback)
+  }
+
+  function onClose(callback: Callback): void {
+    closeCallbacks.push(callback)
+  }
+
+  return {
+    onOpen,
+    onClose
+  }
+}

package/src/vue/contracts/ModelValueOptions.ts

@@ -0,0 +1,3 @@
+export interface ModelValueOptions {
+  name?: string
+}

package/src/vue/contracts/ModelValueProps.ts

@@ -0,0 +1,3 @@
+export interface ModelValueProps {
+  [key: string]: string | number | Array<unknown> | boolean | object
+}