Revert "Revert "Merge remote-tracking branch 'upstream/develop' into …

…develop""

This reverts commit 84a5db9.

.circleci/config.yml

@@ -20,7 +20,7 @@ aliases:
 
 docker: &docker
   docker:
-    - image: cimg/node:16.16.0
+    - image: cimg/node:18.16.0
 
 defaults: &defaults
   <<: *docker

.nvmrc

@@ -1 +1 @@
-v18.14.0
+v18.16.0

packages/create-vuestic/package.json

@@ -19,7 +19,7 @@
     "prompts": "^2.4.2"
   },
   "devDependencies": {
-    "@types/node": "^18.11.18",
+    "@types/node": "^18.16.0",
     "@types/prompts": "^2.4.2",
     "tsup": "^6.5.0",
     "tsx": "^3.12.1"

packages/docs/page-config/ui-elements/data-table/examples/ColumnWidth.vue

@@ -0,0 +1,46 @@
+<template>
+  <va-data-table 
+    :columns="[
+      { key: 'id', label: '50px', width: '50px' },
+      { key: 'name', label: '100px', width: '100px' },
+      { key: 'username', label: '200px', width: '200px' },
+      { key: 'email', label: '400px', width: '300px' },
+    ]"
+    :items="items"
+  />
+</template>
+
+<script setup>
+  const items = [
+    {
+      id: 1,
+      name: "Leanne",
+      username: "Bret",
+      email: "[email protected]",
+    },
+    {
+      id: 2,
+      name: "Ervin",
+      username: "Antonette",
+      email: "[email protected]",
+    },
+    {
+      id: 3,
+      name: "Clementine",
+      username: "Samantha",
+      email: "[email protected]",
+    },
+    {
+      id: 4,
+      name: "Patricia",
+      username: "Karianne",
+      email: "[email protected]",
+    },
+    {
+      id: 5,
+      name: "Chelsey",
+      username: "Kamren",
+      email: "[email protected]",
+    },
+  ]
+</script>

packages/docs/page-config/ui-elements/data-table/index.ts

@@ -76,6 +76,10 @@ export default definePageConfig({
       title: "Inline Editing",
       description: "Inline cell editing example. We provide a `#cell` slot for each column. The [VaValue](/ui-elements/value) component provides a boolean variable, which we can use to show/hide input. To change cell data we need access it by reference using `row.rowData[item.key]` - this way vue can track reactivity. Additional CSS is used to make the table look better. This way you can use [VaInput](/ui-elements/input), [VaSelect](/ui-elements/select) or any other component to edit data inline."
     }),
+    block.example("ColumnWidth", {
+      title: "Column width",
+      description: "You can freeze column width with `width` property in column. You can use it with `virtual-scroller` to prevent column size shifting on different data."
+    }),
 
     block.subtitle("API"),
     block.api("VaDataTable", apiDescription, apiOptions),

packages/ui/src/components/va-data-table/VaDataTable.new.demo.vue

@@ -243,6 +243,25 @@
         <template #cell(company)="{ rowData }">{{ rowData.company.name }}</template>
       </va-data-table>
     </VbCard>
+
+    <VbCard title="row-bind">
+      <va-data-table
+        :items="items"
+        :columns="[
+          { key: 'username', sortable: true, width: '30px' },
+          { key: 'email', sortable: true, width: '200px' },
+          { key: 'name', sortable: true },
+        ]"
+        :selectable="selectable"
+        :select-mode="selectMode"
+        :row-bind="getCustomRowClass"
+        v-model="selectedItems"
+      >
+        <template #header(username)>U</template>
+
+        <template #cell(username)="{ rowData }">{{ rowData.username[0] }}</template>
+      </va-data-table>
+    </VbCard>
   </VbDemo>
 </template>
 

packages/ui/src/components/va-data-table/VaDataTable.vue

@@ -124,7 +124,11 @@
                     :key="`table-cell_${cell.column.name + cell.rowIndex}`"
                     class="va-data-table__table-td"
                     :class="getClass(cell.column.tdClass)"
-                    :style="[getCellCSSVariables(cell), getStyle(cell.column.tdStyle)]"
+                    :style="[
+                      cell.column.width ? { minWidth: cell.column.width, maxWidth: cell.column.width } : {},
+                      getCellCSSVariables(cell),
+                      getStyle(cell.column.tdStyle),
+                    ]"
                     v-bind="getCellBind(cell, row)"
                   >
                     <slot

packages/ui/src/components/va-data-table/components/VaDataTableThRow.vue

@@ -140,7 +140,11 @@ export default defineComponent({
     const toggleBulkSelection = () => emit('toggleBulkSelection')
 
     const getColumnStyles = (column: DataTableColumnInternal) => {
-      return [props.isFooter ? getFooterCSSVariables(column) : getHeaderCSSVariables(column), getStyle(column.thStyle)]
+      return [
+        column.width ? { minWidth: column.width, maxWidth: column.width } : {},
+        props.isFooter ? getFooterCSSVariables(column) : getHeaderCSSVariables(column),
+        getStyle(column.thStyle),
+      ]
     }
 
     const slotNameComputed = computed(() => props.isFooter ? 'footer' : 'header')

packages/ui/src/components/va-select/VaSelect.vue

@@ -476,7 +476,11 @@ export default defineComponent({
       showDropdownContent.value = false
       searchInput.value = ''
       validate()
+      nextTick(() => {
+        isInputFocused.focusIfNothingIfFocused()
+      })
     }
+
     const hideAndFocus = () => {
       handleDropdownClose()
       isInputFocused.value = true
@@ -499,11 +503,6 @@ export default defineComponent({
       }
     })
 
-    const onInputFocus = () => {
-      isInputFocused.value = true
-      onFocus()
-    }
-
     const onInputBlur = () => {
       if (showDropdownContentComputed.value) { return }
 
@@ -653,6 +652,9 @@ export default defineComponent({
       searchInput.value = ''
       emit('clear')
       resetValidation()
+      nextTick(() => {
+        isInputFocused.value = true
+      })
     })
 
     const focusAutocompleteInput = (e?: Event) => {
@@ -700,7 +702,7 @@ export default defineComponent({
       tp,
       t,
 
-      onInputFocus,
+      onInputFocus: onFocus,
       onInputBlur,
       focusOptionList,
       focusSearchBar,

packages/ui/src/components/va-sidebar/VaSidebar.demo.vue

@@ -155,6 +155,25 @@
         </va-sidebar>
       </div>
     </VbCard>
+    <VbCard title="close on click outside">
+      <va-checkbox v-model="doShowVmodelClickOutside" />
+      <br />
+      <div class="demo__sidebar-container-2x">
+        <va-sidebar
+          v-model="doShowVmodelClickOutside"
+          close-on-click-outside
+        >
+          <div>Item</div>
+          <div>Item</div>
+        </va-sidebar>
+      </div>
+      <div class="demo__sidebar-container-2x">
+        <va-sidebar v-model="doShowVmodelClickOutside" position="right">
+          <div>Item</div>
+          <div>Item</div>
+        </va-sidebar>
+      </div>
+    </VbCard>
   </VbDemo>
 </template>
 
@@ -181,6 +200,7 @@ export default {
       minimized: true,
       minimizedWithWidth: true,
       doShowVmodelDemoSidebar: true,
+      doShowVmodelClickOutside: true,
     }
   },
 }

packages/ui/src/components/va-sidebar/VaSidebar.vue

@@ -1,5 +1,6 @@
 <template>
   <aside
+    ref="rootElement"
     class="va-sidebar"
     :class="computedClass"
     :style="computedStyle"
@@ -15,11 +16,11 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed, ref, PropType } from 'vue'
+import { defineComponent, computed, ref, PropType, shallowRef } from 'vue'
 
 import { VaConfig } from '../va-config'
 import { getGradientBackground } from '../../services/color'
-import { useColors, useTextColor, useBem } from '../../composables'
+import { useColors, useTextColor, useBem, useClickOutside } from '../../composables'
 import { useSidebar } from './hooks/useSidebar'
 import { useComponentPresetProp } from '../../composables/useComponentPreset'
 
@@ -49,11 +50,14 @@ export default defineComponent({
     minimizedWidth: { type: String, default: '4rem' },
     modelValue: { type: Boolean, default: true },
     animated: { type: Boolean, default: true },
+    closeOnClickOutside: { type: Boolean, default: false },
   },
 
+  emits: ['update:modelValue'],
+
   components: { VaConfig },
 
-  setup (props) {
+  setup (props, { emit }) {
     const { getColor } = useColors()
     useSidebar(props)
 
@@ -93,11 +97,22 @@ export default defineComponent({
       isHovered.value = props.hoverable && newHoverState
     }
 
+    const rootElement = shallowRef<HTMLElement>()
+
+    useClickOutside([rootElement], () => {
+      if (props.closeOnClickOutside && props.modelValue) {
+        setTimeout(() => {
+          emit('update:modelValue', false)
+        }, 0)
+      }
+    })
+
     return {
       computedWidth,
       computedClass,
       computedStyle,
       updateHoverState,
+      rootElement,
       vaSidebarItemProps: computed(() => ({
         textColor: props.textColor,
         activeColor: props.activeColor,

packages/ui/src/composables/useFocusDeep.ts

@@ -1,31 +1,22 @@
-import { shallowRef, computed, Ref, onMounted, DefineComponent } from 'vue'
+import { computed, Ref, DefineComponent } from 'vue'
 import { useHTMLElement } from './useHTMLElement'
-import { useCaptureEvent } from './useCaptureEvent'
 import { useCurrentElement } from './useCurrentElement'
-import { blurElement, focusElement } from '../utils/focus'
-
-const useActiveElement = () => {
-  const activeEl = shallowRef<HTMLElement>()
-
-  const updateActiveElement = () => {
-    activeEl.value = document.activeElement as HTMLElement
-  }
-
-  onMounted(updateActiveElement)
-
-  useCaptureEvent('focus', updateActiveElement)
-  useCaptureEvent('blur', updateActiveElement)
-
-  return activeEl
-}
-
+import { useFocusedElement } from './useFocusedElement'
+
+/**
+ * `true` if `el` or any of his children are in focus
+ *
+ *  if set to `true` set `el` focused, but if any of `el` children was focused before, set child focused instead
+ *
+ * @notice this will not trigger native `focus` event and you need to trigger it manually and handle infinite loop
+ */
 export const useFocusDeep = (el?: Ref<HTMLElement | DefineComponent | undefined>) => {
-  const focused = useActiveElement()
+  const focused = useFocusedElement()
   const current = useCurrentElement(el ? useHTMLElement(el) : undefined)
   // Cache previouslyFocusedElement, so we can simply come back to it
   let previouslyFocusedElement: HTMLElement | null = null
 
-  return computed<boolean | undefined>({
+  const isFocused = computed<boolean | undefined>({
     get () {
       if (!focused.value) { return false }
       if (focused.value === current.value) { return true }
@@ -41,11 +32,31 @@ export const useFocusDeep = (el?: Ref<HTMLElement | DefineComponent | undefined>
         target = current.value
       }
 
+      // NOTICE: Focus and blur events will not be dispatched here to prevent infinite loop
       if (value) {
         (target)?.focus()
       } else {
         (target)?.blur()
       }
     },
   })
+
+  return Object.assign(isFocused, {
+    /** Focus `el` if focus is not set to any other element */
+    focusIfNothingIfFocused: () => {
+      // body if focused by default, but we assume it means nothing is focused
+      // by nothing we mean elements like input, button, etc.
+      if (focused.value === document.body) {
+        isFocused.value = true
+      }
+    },
+
+    focusPreviousElement: () => {
+      if (previouslyFocusedElement) {
+        previouslyFocusedElement.focus()
+      } else {
+        document.body.focus()
+      }
+    },
+  })
 }

packages/ui/src/composables/useFocusedElement.ts

@@ -0,0 +1,17 @@
+import { onMounted, shallowRef } from 'vue'
+import { useCaptureEvent } from './useCaptureEvent'
+
+export const useFocusedElement = () => {
+  const activeEl = shallowRef<HTMLElement>()
+
+  const updateActiveElement = () => {
+    activeEl.value = document.activeElement as HTMLElement
+  }
+
+  onMounted(updateActiveElement)
+
+  useCaptureEvent('focus', updateActiveElement)
+  useCaptureEvent('blur', updateActiveElement)
+
+  return activeEl
+}

yarn.lock

@@ -17931,9 +17931,9 @@ vite-plugin-chunk-split@^0.4.7:
     fsevents "~2.3.2"
 
 "vite@^3.0.0 || ^4.0.0", vite@^4.2.1, vite@~4.3.3:
-  version "4.3.3"
-  resolved "https://registry.yarnpkg.com/vite/-/vite-4.3.3.tgz#26adb4aa01439fc4546c480ea547674d87289396"
-  integrity sha512-MwFlLBO4udZXd+VBcezo3u8mC77YQk+ik+fbc0GZWGgzfbPP+8Kf0fldhARqvSYmtIWoAJ5BXPClUbMTlqFxrA==
+  version "4.3.9"
+  resolved "https://registry.yarnpkg.com/vite/-/vite-4.3.9.tgz#db896200c0b1aa13b37cdc35c9e99ee2fdd5f96d"
+  integrity sha512-qsTNZjO9NoJNW7KnOrgYwczm0WctJ8m/yqYAMAK9Lxt4SoySUfS5S8ia9K7JHpa3KEeMfyF8LoJ3c5NeBJy6pg==
   dependencies:
     esbuild "^0.17.5"
     postcss "^8.4.23"