Merge branch 'dev' into issue-1057

2026-01-19 14:31:47 +01:00 · 2024-11-12 17:17:46 +07:00
parent a78203ce49 acecff40ec
commit 3a5960fb58
10 changed files with 1298 additions and 773 deletions
--- a/src/runtime/components/data/Table.vue
+++ b/src/runtime/components/data/Table.vue
@@ -8,28 +8,27 @@
      </slot>
      <thead :class="ui.thead">
        <tr :class="ui.tr.base">
-          <th v-if="modelValue" scope="col" :class="ui.checkbox.padding">
-            <UCheckbox
-              :model-value="isAllRowChecked"
-              :indeterminate="indeterminate"
-              v-bind="ui.default.checkbox"
-              aria-label="Select all"
-              @change="onChange"
-            />
-          </th>
-
          <th v-if="expand" scope="col" :class="ui.tr.base">
            <span class="sr-only">Expand</span>
          </th>
-
          <th
            v-for="(column, index) in columns"
            :key="index"
            scope="col"
-            :class="[ui.th.base, ui.th.padding, ui.th.color, ui.th.font, ui.th.size, column.class]"
+            :class="[ui.th.base, ui.th.padding, ui.th.color, ui.th.font, ui.th.size, column.key === 'select' && ui.checkbox.padding, column.class]"
            :aria-sort="getAriaSort(column)"
          >
-            <slot :name="`${column.key}-header`" :column="column" :sort="sort" :on-sort="onSort">
+            <slot v-if="!singleSelect && modelValue && (column.key === 'select' || shouldRenderColumnInFirstPlace(index, 'select'))" name="select-header" :indeterminate="indeterminate" :checked="isAllRowChecked" :change="onChange">
+              <UCheckbox
+                :model-value="isAllRowChecked"
+                :indeterminate="indeterminate"
+                v-bind="ui.default.checkbox"
+                aria-label="Select all"
+                @change="onChange"
+              />
+            </slot>
+
+            <slot v-else :name="`${column.key}-header`" :column="column" :sort="sort" :on-sort="onSort">
              <UButton
                v-if="column.sortable"
                v-bind="{ ...(ui.default.sortButton || {}), ...sortButton }"
@@ -77,16 +76,7 @@

        <template v-else>
          <template v-for="(row, index) in rows" :key="index">
-            <tr :class="[ui.tr.base, isSelected(row) && ui.tr.selected, isExpanded(row) && ui.tr.expanded, ($attrs.onSelect || $attrs.onContextmenu) && ui.tr.active, row?.class]" @click="() => onSelect(row)" @contextmenu="(event) => onContextmenu(event, row)">
-              <td v-if="modelValue" :class="ui.checkbox.padding">
-                <UCheckbox
-                  :model-value="isSelected(row)"
-                  v-bind="ui.default.checkbox"
-                  aria-label="Select row"
-                  @change="onChangeCheckbox($event, row)"
-                  @click.capture.stop="() => onSelect(row)"
-                />
-              </td>
+            <tr :class="[ui.tr.base, isSelected(row) && ui.tr.selected, isExpanded(row) && ui.tr.expanded, $attrs.onSelect && ui.tr.active, row?.class]" @click="() => onSelect(row)" @contextmenu="(event) => onContextmenu(event, row)">
              <td
                v-if="expand"
                :class="[ui.td.base, ui.td.padding, ui.td.color, ui.td.font, ui.td.size]"
@@ -102,8 +92,26 @@
                  @click.capture.stop="toggleOpened(row)"
                />
              </td>
-              <td v-for="(column, subIndex) in columns" :key="subIndex" :class="[ui.td.base, ui.td.padding, ui.td.color, ui.td.font, ui.td.size, column?.rowClass, row[column.key]?.class]">
-                <slot :name="`${column.key}-data`" :column="column" :row="row" :index="index" :get-row-data="(defaultValue) => getRowData(row, column.key, defaultValue)">
+              <td v-for="(column, subIndex) in columns" :key="subIndex" :class="[ui.td.base, ui.td.padding, ui.td.color, ui.td.font, ui.td.size, column?.rowClass, row[column.key]?.class, column.key === 'select' && ui.checkbox.padding]">
+                <slot v-if="modelValue && (column.key === 'select' || shouldRenderColumnInFirstPlace(subIndex, 'select')) " name="select-data" :checked="isSelected(row)" :change="(ev: boolean) => onChangeCheckbox(ev, row)">
+                  <UCheckbox
+                    :model-value="isSelected(row)"
+                    v-bind="ui.default.checkbox"
+                    aria-label="Select row"
+                    @change="onChangeCheckbox($event, row)"
+                    @click.capture.stop="() => onSelect(row)"
+                  />
+                </slot>
+
+                <slot
+                  v-else
+                  :key="retriggerSlot"
+                  :name="`${column.key}-data`"
+                  :column="column"
+                  :row="row"
+                  :index="index"
+                  :get-row-data="(defaultValue) => getRowData(row, column.key, defaultValue)"
+                >
                  {{ getRowData(row, column.key) }}
                </slot>
              </td>
@@ -125,11 +133,12 @@
 </template>

 <script lang="ts">
-import { computed, defineComponent, toRaw, toRef } from 'vue'
+import { computed, defineComponent, ref, toRaw, toRef, watch } from 'vue'
 import type { PropType, AriaAttributes } from 'vue'
 import { upperFirst } from 'scule'
 import { defu } from 'defu'
 import { useVModel } from '@vueuse/core'
+import { isEqual } from 'ohash'
 import UIcon from '../elements/Icon.vue'
 import UButton from '../elements/Button.vue'
 import UProgress from '../elements/Progress.vue'
@@ -144,7 +153,7 @@ import { table } from '#ui/ui.config'
 const config = mergeConfig<typeof table>(appConfig.ui.strategy, appConfig.ui.table, table)

 function defaultComparator<T>(a: T, z: T): boolean {
-  return JSON.stringify(a) === JSON.stringify(z)
+  return isEqual(a, z)
 }

 function defaultSort(a: any, b: any, direction: 'asc' | 'desc') {
@@ -159,6 +168,14 @@ function defaultSort(a: any, b: any, direction: 'asc' | 'desc') {
  }
 }

+function getStringifiedSet(arr: TableRow[]) {
+  return new Set(arr.map(item => JSON.stringify(item)))
+}
+
+function accessor<T extends Record<string, any>>(key: string) {
+  return (obj: T) => get(obj, key)
+}
+
 export default defineComponent({
  components: {
    UIcon,
@@ -221,7 +238,7 @@ export default defineComponent({
      default: false
    },
    loadingState: {
-      type: Object as PropType<{ icon: string, label: string }>,
+      type: Object as PropType<{ icon: string, label: string } | null>,
      default: () => config.default.loadingState
    },
    emptyState: {
@@ -247,9 +264,13 @@ export default defineComponent({
    multipleExpand: {
      type: Boolean,
      default: true
+    },
+    singleSelect: {
+      type: Boolean,
+      default: false
    }
  },
-  emits: ['update:modelValue', 'update:sort', 'update:expand'],
+  emits: ['update:modelValue', 'update:sort', 'update:expand', 'select:all'],
  setup(props, { emit, attrs: $attrs }) {
    const { ui, attrs } = useUI('table', toRef(props, 'ui'), config, toRef(props, 'class'))

@@ -264,6 +285,8 @@ export default defineComponent({
      })
    })

+    const retriggerSlot = ref(null)
+
    const savedSort = { column: sort.value.column, direction: null }

    const rows = computed(() => {
@@ -292,8 +315,6 @@ export default defineComponent({
      }
    })

-    const getStringifiedSet = (arr: TableRow[]) => new Set(arr.map(item => JSON.stringify(item)))
-
    const totalRows = computed(() => props.rows.length)

    const countCheckedRow = computed(() => {
@@ -328,10 +349,6 @@ export default defineComponent({
      return props.by(a, z)
    }

-    function accessor<T extends Record<string, any>>(key: string) {
-      return (obj: T) => get(obj, key)
-    }
-
    function isSelected(row: TableRow) {
      if (!props.modelValue) {
        return false
@@ -355,6 +372,11 @@ export default defineComponent({
    }

    function onSelect(row: TableRow) {
+      const selection = window.getSelection()
+      if (selection && selection.toString().length > 0) {
+        return
+      }
+
      if (!$attrs.onSelect) {
        return
      }
@@ -393,11 +415,12 @@ export default defineComponent({
      } else {
        selected.value = []
      }
+      emit('select:all', checked)
    }

    function onChangeCheckbox(checked: boolean, row: TableRow) {
      if (checked) {
-        selected.value.push(row)
+        selected.value = props.singleSelect ? [row] : [...selected.value, row]
      } else {
        const index = selected.value.findIndex(item => compare(item, row))
        selected.value.splice(index, 1)
@@ -412,6 +435,13 @@ export default defineComponent({
      return expand.value?.openedRows ? expand.value.openedRows.some(openedRow => compare(openedRow, row)) : false
    }

+    function shouldRenderColumnInFirstPlace(index: number, key: string) {
+      if (!props.columns) {
+        return index === 0
+      }
+      return index === 0 && !props.columns.find(col => col.key === key)
+    }
+
    function toggleOpened(row: TableRow) {
      expand.value = {
        openedRows: isExpanded(row) ? expand.value.openedRows.filter(v => !compare(v, row)) : props.multipleExpand ? [...expand.value.openedRows, row] : [row],
@@ -439,6 +469,12 @@ export default defineComponent({
      return undefined
    }

+    watch(rows, () => {
+      retriggerSlot.value = new Date()
+    }, {
+      deep: true
+    })
+
    return {
      // eslint-disable-next-line vue/no-dupe-keys
      ui,
@@ -465,7 +501,9 @@ export default defineComponent({
      getRowData,
      toggleOpened,
      getAriaSort,
-      isExpanded
+      isExpanded,
+      shouldRenderColumnInFirstPlace,
+      retriggerSlot
    }
  }
 })
--- a/src/runtime/components/forms/Form.vue
+++ b/src/runtime/components/forms/Form.vue
@@ -252,10 +252,10 @@ async function validateJoiSchema(
  schema: JoiSchema
 ): Promise<ValidateReturnSchema<typeof state>> {
  try {
-    await schema.validateAsync(state, { abortEarly: false })
+    const result = await schema.validateAsync(state, { abortEarly: false })
    return {
      errors: null,
-      result: state
+      result
    }
  } catch (error) {
    if (isJoiError(error)) {
--- a/src/runtime/components/forms/InputMenu.vue
+++ b/src/runtime/components/forms/InputMenu.vue
@@ -48,7 +48,7 @@
              v-slot="{ active, selected, disabled: optionDisabled }"
              :key="index"
              as="template"
-              :value="valueAttribute ? option[valueAttribute] : option"
+              :value="valueAttribute ? accessor(option, valueAttribute) : option"
              :disabled="option.disabled"
            >
              <li :class="[uiMenu.option.base, uiMenu.option.rounded, uiMenu.option.padding, uiMenu.option.size, uiMenu.option.color, active ? uiMenu.option.active : uiMenu.option.inactive, selected && uiMenu.option.selected, optionDisabled && uiMenu.option.disabled]">
@@ -104,6 +104,7 @@ import {
 import { computedAsync, useDebounceFn } from '@vueuse/core'
 import { defu } from 'defu'
 import { twMerge, twJoin } from 'tailwind-merge'
+import { isEqual } from 'ohash'
 import UIcon from '../elements/Icon.vue'
 import UAvatar from '../elements/Avatar.vue'
 import { useUI } from '../../composables/useUI'
@@ -308,8 +309,28 @@ export default defineComponent({
        return
      }

+      function getValue(value: any) {
+        if (props.valueAttribute) {
+          return accessor(value, props.valueAttribute)
+        }
+
+        return value
+      }
+
+      function compareValues(value1: any, value2: any) {
+        if (props.by && typeof value1 === 'object' && typeof value2 === 'object') {
+          return isEqual(value1[props.by], value2[props.by])
+        }
+        return isEqual(value1, value2)
+      }
+
      if (props.valueAttribute) {
-        const option = options.value.find(option => option[props.valueAttribute] === props.modelValue)
+        const option = options.value.find((option) => {
+          const optionValue = getValue(option)
+
+          return compareValues(optionValue, props.modelValue)
+        })
+
        return option ? accessor(option, props.optionAttribute) : null
      } else {
        return ['string', 'number'].includes(typeof props.modelValue) ? props.modelValue : accessor(props.modelValue as Record<string, any>, props.optionAttribute)
--- a/src/runtime/components/forms/SelectMenu.vue
+++ b/src/runtime/components/forms/SelectMenu.vue
@@ -74,7 +74,7 @@
              v-slot="{ active, selected: optionSelected, disabled: optionDisabled }"
              :key="index"
              as="template"
-              :value="valueAttribute ? option[valueAttribute] : option"
+              :value="valueAttribute ? accessor(option, valueAttribute) : option"
              :disabled="option.disabled"
            >
              <li :class="[uiMenu.option.base, uiMenu.option.rounded, uiMenu.option.padding, uiMenu.option.size, uiMenu.option.color, active ? uiMenu.option.active : uiMenu.option.inactive, optionSelected && uiMenu.option.selected, optionDisabled && uiMenu.option.disabled]">
@@ -143,6 +143,7 @@ import {
 import { computedAsync, useDebounceFn } from '@vueuse/core'
 import { defu } from 'defu'
 import { twMerge, twJoin } from 'tailwind-merge'
+import { isEqual } from 'ohash'
 import UIcon from '../elements/Icon.vue'
 import UAvatar from '../elements/Avatar.vue'
 import { useUI } from '../../composables/useUI'
@@ -379,39 +380,53 @@ export default defineComponent({
    })

    const selected = computed(() => {
+      function compareValues(value1: any, value2: any) {
+        if (props.by && typeof value1 === 'object' && typeof value2 === 'object') {
+          return isEqual(value1[props.by], value2[props.by])
+        }
+        return isEqual(value1, value2)
+      }
+
+      function getValue(value: any) {
+        if (props.valueAttribute) {
+          return accessor(value, props.valueAttribute)
+        }
+
+        return value
+      }
+
      if (props.multiple) {
-        if (!Array.isArray(props.modelValue) || !props.modelValue.length) {
+        const modelValue = props.modelValue
+        if (!Array.isArray(modelValue) || !modelValue.length) {
          return []
        }

-        if (props.valueAttribute) {
-          return options.value.filter(option => (props.modelValue as any[]).includes(option[props.valueAttribute]))
-        }
-        return options.value.filter(option => (props.modelValue as any[]).includes(option))
+        return options.value.filter((option) => {
+          const optionValue = getValue(option)
+          return modelValue.some(value => compareValues(value, optionValue))
+        })
      }

-      if (props.valueAttribute) {
-        return options.value.find(option => option[props.valueAttribute] === props.modelValue)
-      }
-      return options.value.find(option => option === props.modelValue)
+      return options.value.find((option) => {
+        const optionValue = getValue(option)
+        return compareValues(optionValue, toRaw(props.modelValue))
+      }) ?? props.modelValue
    })

    const label = computed(() => {
-      if (props.multiple) {
-        if (Array.isArray(props.modelValue) && props.modelValue.length) {
-          return `${selected.value.length} selected`
-        } else {
-          return null
-        }
-      } else if (props.modelValue !== undefined && props.modelValue !== null) {
-        if (props.valueAttribute) {
-          return accessor(selected.value, props.optionAttribute) ?? null
-        } else {
-          return ['string', 'number'].includes(typeof props.modelValue) ? props.modelValue : accessor(props.modelValue as Record<string, any>, props.optionAttribute)
-        }
+      if (!selected.value) return null
+
+      if (props.valueAttribute) {
+        return accessor(selected.value as Record<string, any>, props.optionAttribute)
      }

-      return null
+      if (Array.isArray(props.modelValue) && props.modelValue.length) {
+        return `${props.modelValue.length} selected`
+      } else if (['string', 'number'].includes(typeof props.modelValue)) {
+        return props.modelValue
+      }
+
+      return accessor(props.modelValue as Record<string, any>, props.optionAttribute)
    })

    const selectClass = computed(() => {
--- a/src/runtime/components/overlays/Notifications.vue
+++ b/src/runtime/components/overlays/Notifications.vue
@@ -1,7 +1,7 @@
 <template>
  <Teleport to="body">
-    <div :class="wrapperClass" role="region" v-bind="attrs">
-      <div v-if="notifications.length" :class="ui.container">
+    <div v-if="notifications.length" :class="wrapperClass" role="region" v-bind="attrs">
+      <div :class="ui.container">
        <div v-for="notification of notifications" :key="notification.id">
          <UNotification
            v-bind="notification"