@globalbrain/sefirot 2.45.0 → 2.46.1

package/lib/components/SDesc.vue

@@ -13,7 +13,7 @@ const props = withDefaults(defineProps<{
   divider: true
 })
 
-provide('sefirot-desc-label-wdith', () => props.labelWidth)
+provide('sefirot-desc-label-width', () => props.labelWidth)
 </script>
 
 <template>

package/lib/components/SDescItem.vue

@@ -6,7 +6,9 @@ defineProps<{
   span?: string | number
 }>()
 
-const labelWidthProp = inject<() => string | number | undefined>('sefirot-desc-label-wdith')
+const labelWidthProp = inject<() => string | number | undefined>(
+  'sefirot-desc-label-width', () => undefined
+)
 
 const labelWidth = computed(() => {
   const w = labelWidthProp?.()

package/lib/components/SInputAddon.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import IconCaretDown from '@iconify-icons/ph/caret-down-bold'
-import { type DropdownSection } from 'sefirot/composables/Dropdown'
 import {
+  type DropdownSection,
   getSelectedOption,
   useManualDropdownPosition
 } from 'sefirot/composables/Dropdown'

package/lib/components/SInputBase.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import { type IconifyIcon } from '@iconify/vue/dist/offline'
 import IconQuestion from '@iconify-icons/ph/question'
-import { type DefineComponent } from 'vue'
-import { computed, unref, useSlots } from 'vue'
+import { type DefineComponent, computed, unref, useSlots } from 'vue'
 import { type Validatable } from '../composables/Validation'
 import SIcon from './SIcon.vue'
 import STooltip from './STooltip.vue'

package/lib/components/SInputDropdown.vue

@@ -3,10 +3,8 @@ import { type IconifyIcon } from '@iconify/vue/dist/offline'
 import IconCaretDown from '@iconify-icons/ph/caret-down-bold'
 import IconCaretUp from '@iconify-icons/ph/caret-up-bold'
 import xor from 'lodash-es/xor'
-import { type DefineComponent } from 'vue'
-import { computed, ref } from 'vue'
-import { type DropdownSectionFilter } from '../composables/Dropdown'
-import { useManualDropdownPosition } from '../composables/Dropdown'
+import { type DefineComponent, computed, ref } from 'vue'
+import { type DropdownSectionFilter, useManualDropdownPosition } from '../composables/Dropdown'
 import { useFlyout } from '../composables/Flyout'
 import { type Validatable } from '../composables/Validation'
 import { isArray } from '../support/Utils'

package/lib/components/SInputFile.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { type IconifyIcon } from '@iconify/vue/dist/offline'
-import { type DefineComponent } from 'vue'
-import { computed, ref } from 'vue'
+import { type DefineComponent, computed, ref } from 'vue'
 import { type Validatable } from '../composables/Validation'
 import SInputBase from './SInputBase.vue'
 

package/lib/components/SInputHMS.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { type IconifyIcon } from '@iconify/vue/dist/offline'
-import { type DefineComponent } from 'vue'
-import { computed, ref } from 'vue'
+import { type DefineComponent, computed, ref } from 'vue'
 import { type Validatable } from '../composables/Validation'
 import SInputBase from './SInputBase.vue'
 

package/lib/components/SInputNumber.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { type IconifyIcon } from '@iconify/vue/dist/offline'
-import { type DefineComponent } from 'vue'
-import { computed } from 'vue'
+import { type DefineComponent, computed } from 'vue'
 import { type Validatable } from '../composables/Validation'
 import { isNullish, isString } from '../support/Utils'
 import SInputText from './SInputText.vue'

package/lib/components/SInputRadios.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { type IconifyIcon } from '@iconify/vue/dist/offline'
-import { type DefineComponent } from 'vue'
-import { computed } from 'vue'
+import { type DefineComponent, computed } from 'vue'
 import { type Validatable } from '../composables/Validation'
 import SInputBase from './SInputBase.vue'
 import SInputRadio from './SInputRadio.vue'

package/lib/components/SInputSelect.vue

@@ -2,8 +2,7 @@
 import { type IconifyIcon } from '@iconify/vue/dist/offline'
 import IconCaretDown from '@iconify-icons/ph/caret-down-bold'
 import IconCaretUp from '@iconify-icons/ph/caret-up-bold'
-import { type DefineComponent } from 'vue'
-import { computed, ref } from 'vue'
+import { type DefineComponent, computed, ref } from 'vue'
 import { type Validatable } from '../composables/Validation'
 import SIcon from './SIcon.vue'
 import SInputBase from './SInputBase.vue'

package/lib/components/SInputSwitch.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { type IconifyIcon } from '@iconify/vue/dist/offline'
-import { type DefineComponent } from 'vue'
-import { computed } from 'vue'
+import { type DefineComponent, computed } from 'vue'
 import { type Validatable } from '../composables/Validation'
 import SInputBase from './SInputBase.vue'
 

package/lib/components/SInputSwitches.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { type IconifyIcon } from '@iconify/vue/dist/offline'
-import { type DefineComponent } from 'vue'
-import { computed } from 'vue'
+import { type DefineComponent, computed } from 'vue'
 import { type Validatable } from '../composables/Validation'
 import SInputBase from './SInputBase.vue'
 import SInputSwitch from './SInputSwitch.vue'

package/lib/components/SInputText.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { type IconifyIcon } from '@iconify/vue/dist/offline'
-import { type DefineComponent } from 'vue'
-import { computed, ref } from 'vue'
+import { type DefineComponent, computed, ref } from 'vue'
 import { type Validatable } from '../composables/Validation'
 import { isString } from '../support/Utils'
 import SIcon from './SIcon.vue'

package/lib/components/SInputYMD.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { type IconifyIcon } from '@iconify/vue/dist/offline'
-import { type DefineComponent } from 'vue'
-import { computed, ref } from 'vue'
+import { type DefineComponent, computed, ref } from 'vue'
 import { type Validatable } from '../composables/Validation'
 import SInputBase from './SInputBase.vue'
 

package/lib/components/SMarkdown.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { computed, nextTick, shallowRef, watch } from 'vue'
-import { type LinkCallback, type LinkSubscriberPayload } from '../composables/Markdown'
-import { useLink, useMarkdown } from '../composables/Markdown'
+import { type LinkCallback, type LinkSubscriberPayload, useLink, useMarkdown } from '../composables/Markdown'
 
 const props = defineProps<{
   tag?: string

package/lib/components/SSheetFooterAction.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { type Mode, type Type } from './SButton.vue'
-import SButton from './SButton.vue'
+import SButton, { type Mode, type Type } from './SButton.vue'
 
 defineProps<{
   type?: Type

package/lib/components/SSnackbar.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import IconX from '@iconify-icons/ph/x'
-import { type SnackbarAction } from '../stores/Snackbars'
-import { useSnackbars } from '../stores/Snackbars'
+import { type SnackbarAction, useSnackbars } from '../stores/Snackbars'
 import SButton from './SButton.vue'
 import SIcon from './SIcon.vue'
 

package/lib/components/SSteps.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { type PropType } from 'vue'
-import { computed } from 'vue'
+import { type PropType, computed } from 'vue'
 import { type BarMode, type Step } from '../composables/Step'
 import SStep from './SStep.vue'
 

package/lib/components/STable.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { useVirtualizer } from '@tanstack/vue-virtual'
 import { useResizeObserver } from '@vueuse/core'
 import {
   computed,
@@ -9,7 +10,6 @@ import {
   unref,
   watch
 } from 'vue'
-import { DynamicScroller, DynamicScrollerItem } from 'vue-virtual-scroller'
 import { type Table } from '../composables/Table'
 import SSpinner from './SSpinner.vue'
 import STableCell from './STableCell.vue'
@@ -111,14 +111,18 @@ const recordsWithSummary = computed(() => {
   const records = unref(props.options.records) ?? []
   const summary = unref(props.options.summary)
 
-  const res = summary ? [...records, summary] : records
+  return summary ? [...records, summary] : records
+})
 
-  res.forEach((record, index) => {
-    record.__index = index
-  })
+const virtualizerOptions = computed(() => ({
+  count: recordsWithSummary.value.length,
+  getScrollElement: () => body.value,
+  estimateSize: () => unref(props.options.rowSize) ?? 41,
+  overscan: 10
+}))
 
-  return res
-})
+const rowVirtualizer = useVirtualizer(virtualizerOptions)
+const virtualItems = computed(() => rowVirtualizer.value.getVirtualItems())
 
 watch(() => props.options.records, () => {
   headLock = true
@@ -272,75 +276,50 @@ function getCell(key: string, index: number) {
           @mouseleave="lockBody(false)"
           @scroll="syncBodyScroll"
         >
-          <template v-if="unref(options.virtualScroll)">
-            <DynamicScroller
-              :items="recordsWithSummary"
-              :min-item-size="40"
-              key-field="__index"
-              class="block"
-              :style="blockWidth ? { width: `${blockWidth}px` } : undefined"
-              :prerender="Math.min(10, recordsWithSummary.length)"
-            >
-              <template #default="{ item: record, index: rIndex, active }">
-                <DynamicScrollerItem
-                  :item="record"
-                  :active="active"
-                  :data-index="rIndex"
-                >
-                  <div class="row" :class="isSummaryOrLastClass(rIndex)">
-                    <STableItem
-                      v-for="key in ordersToShow"
-                      :key="key"
-                      :name="key"
-                      :class-name="unref(options.columns)[key].className"
-                      :width="colWidths[key]"
-                    >
-                      <STableCell
-                        :name="key"
-                        :class="isSummary(rIndex) && 'summary'"
-                        :class-name="unref(options.columns)[key].className"
-                        :cell="getCell(key, rIndex)"
-                        :value="record[key]"
-                        :record="record"
-                        :records="unref(options.records)!"
-                      />
-                    </STableItem>
-                  </div>
-                </DynamicScrollerItem>
-              </template>
-            </DynamicScroller>
-          </template>
-          <template v-else>
+          <div
+            class="block"
+            :style="{
+              width: blockWidth ? `${blockWidth}px` : '100%',
+              height: `${rowVirtualizer.getTotalSize()}px`,
+              position: 'relative'
+            }"
+          >
             <div
-              class="block"
-              :style="blockWidth ? { width: `${blockWidth}px` } : undefined"
+              v-for="{ index, key: __key, size, start } in virtualItems"
+              :key="__key"
             >
               <div
-                v-for="(record, rIndex) in recordsWithSummary"
-                :key="record.__index"
+                class="row"
+                :class="isSummaryOrLastClass(index)"
+                :style="{
+                  position: 'absolute',
+                  top: 0,
+                  left: 0,
+                  width: '100%',
+                  height: `${size}px`,
+                  transform: `translateY(${start}px)`
+                }"
               >
-                <div class="row" :class="isSummaryOrLastClass(rIndex)">
-                  <STableItem
-                    v-for="key in ordersToShow"
-                    :key="key"
+                <STableItem
+                  v-for="key in ordersToShow"
+                  :key="key"
+                  :name="key"
+                  :class-name="unref(options.columns)[key].className"
+                  :width="colWidths[key]"
+                >
+                  <STableCell
                     :name="key"
+                    :class="isSummary(index) && 'summary'"
                     :class-name="unref(options.columns)[key].className"
-                    :width="colWidths[key]"
-                  >
-                    <STableCell
-                      :name="key"
-                      :class="isSummary(rIndex) && 'summary'"
-                      :class-name="unref(options.columns)[key].className"
-                      :cell="getCell(key, rIndex)"
-                      :value="record[key]"
-                      :record="record"
-                      :records="unref(options.records)!"
-                    />
-                  </STableItem>
-                </div>
+                    :cell="getCell(key, index)"
+                    :value="recordsWithSummary[index][key]"
+                    :record="recordsWithSummary[index]"
+                    :records="unref(options.records)!"
+                  />
+                </STableItem>
               </div>
             </div>
-          </template>
+          </div>
         </div>
       </div>
 
@@ -417,14 +396,11 @@ function getCell(key: string, index: number) {
 .container.body {
   border-radius: 6px 6px var(--table-border-radius) var(--table-border-radius);
   line-height: 0;
+  max-height: var(--table-max-height, 100%);
 
   .STable.has-footer & {
     border-radius: 0;
   }
-
-  .block {
-    max-height: var(--table-max-height, 100%);
-  }
 }
 
 .block {

package/lib/composables/Dropdown.ts

@@ -1,6 +1,5 @@
 import { type MaybeRef, useElementBounding, useWindowSize } from '@vueuse/core'
-import { type Component, type Ref } from 'vue'
-import { ref, unref } from 'vue'
+import { type Component, type Ref, ref, unref } from 'vue'
 
 export type DropdownSection =
   | DropdownSectionMenu

package/lib/composables/Table.ts

@@ -21,7 +21,7 @@ export interface Table<
   reset?: MaybeRef<boolean | undefined>
   borderless?: MaybeRef<boolean>
   loading?: MaybeRef<boolean | undefined>
-  virtualScroll?: MaybeRef<boolean | undefined>
+  rowSize?: MaybeRef<number | undefined>
   onPrev?(): void
   onNext?(): void
   onReset?(): void

package/lib/styles/bootstrap.css

@@ -1,5 +1,4 @@
 @import "normalize.css";
 @import "v-calendar/dist/style.css";
-@import "vue-virtual-scroller/dist/vue-virtual-scroller.css";
 @import "./variables";
 @import "./base";

package/lib/types/shims.d.ts

@@ -1,9 +1,3 @@
 declare module 'v-calendar' {
   export const DatePicker: any
 }
-
-declare module 'vue-virtual-scroller' {
-  export const RecycleScroller: any
-  export const DynamicScroller: any
-  export const DynamicScrollerItem: any
-}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@globalbrain/sefirot",
-  "version": "2.45.0",
-  "packageManager": "pnpm@8.6.2",
+  "version": "2.46.1",
+  "packageManager": "pnpm@8.7.5",
   "description": "Vue Components for Global Brain Design System.",
   "author": "Kia Ishii <ka.ishii@globalbrains.com>",
   "license": "MIT",
@@ -23,69 +23,65 @@
   "peerDependencies": {
     "@iconify-icons/ph": "^1.2.4",
     "@iconify/vue": "^4.1.1",
-    "@types/body-scroll-lock": "^3.1.0",
-    "@types/lodash-es": "^4.17.7",
-    "@types/markdown-it": "^12.2.3",
-    "@vuelidate/core": "^2.0.2",
-    "@vuelidate/validators": "^2.0.2",
-    "@vueuse/core": "^10.1.2",
+    "@tanstack/vue-virtual": "3.0.0-beta.60",
+    "@vuelidate/core": "^2.0.3",
+    "@vuelidate/validators": "^2.0.4",
+    "@vueuse/core": "^10.4.1",
     "body-scroll-lock": "4.0.0-beta.0",
     "fuse.js": "^6.6.2",
     "lodash-es": "^4.17.21",
     "markdown-it": "^13.0.1",
     "normalize.css": "^8.0.1",
-    "pinia": "^2.0.36",
-    "postcss": "^8.4.23",
+    "pinia": "^2.1.6",
+    "postcss": "^8.4.29",
     "postcss-nested": "^6.0.1",
-    "typescript": "~4.9.5",
     "v-calendar": "^3.0.3",
-    "vue": "^3.2.47",
-    "vue-router": "^4.1.6",
-    "vue-virtual-scroller": "2.0.0-beta.8"
+    "vue": "^3.3.4",
+    "vue-router": "^4.2.4"
   },
   "dependencies": {
-    "dayjs": "^1.11.7"
+    "dayjs": "^1.11.9"
   },
   "devDependencies": {
-    "@globalbrain/eslint-config": "^1.5.1",
-    "@histoire/plugin-vue": "^0.16.1",
+    "@globalbrain/eslint-config": "^1.5.2",
+    "@histoire/plugin-vue": "^0.17.1",
     "@iconify-icons/ph": "^1.2.4",
     "@iconify/vue": "^4.1.1",
+    "@tanstack/vue-virtual": "3.0.0-beta.60",
     "@types/body-scroll-lock": "^3.1.0",
-    "@types/lodash-es": "^4.17.7",
-    "@types/markdown-it": "^12.2.3",
-    "@types/node": "^20.1.1",
-    "@vitejs/plugin-vue": "^4.2.1",
-    "@vitest/coverage-c8": "^0.33.0",
-    "@vue/test-utils": "^2.3.2",
-    "@vuelidate/core": "^2.0.2",
-    "@vuelidate/validators": "^2.0.2",
-    "@vueuse/core": "^10.1.2",
+    "@types/lodash-es": "^4.17.9",
+    "@types/markdown-it": "^13.0.1",
+    "@types/node": "^20.6.0",
+    "@vitejs/plugin-vue": "^4.3.4",
+    "@vitest/coverage-v8": "^0.34.4",
+    "@vue/test-utils": "^2.4.1",
+    "@vuelidate/core": "^2.0.3",
+    "@vuelidate/validators": "^2.0.4",
+    "@vueuse/core": "^10.4.1",
     "body-scroll-lock": "4.0.0-beta.0",
     "chalk": "^4.1.2",
-    "conventional-changelog-cli": "^2.2.2",
-    "enquirer": "^2.3.6",
-    "eslint": "^8.44.0",
+    "conventional-changelog-cli": "^4.1.0",
+    "enquirer": "^2.4.1",
+    "eslint": "^8.49.0",
     "execa": "^5.1.1",
     "fuse.js": "^6.6.2",
-    "happy-dom": "^10.1.1",
-    "histoire": "^0.16.1",
+    "happy-dom": "^11.0.2",
+    "histoire": "^0.17.0",
     "lodash-es": "^4.17.21",
     "markdown-it": "^13.0.1",
     "normalize.css": "^8.0.1",
-    "pinia": "^2.0.36",
-    "postcss": "^8.4.23",
+    "pinia": "^2.1.6",
+    "postcss": "^8.4.29",
     "postcss-nested": "^6.0.1",
-    "semver": "^7.5.0",
-    "typescript": "~4.9.5",
+    "semver": "^7.5.4",
+    "typescript": "~5.2.2",
     "v-calendar": "^3.0.3",
-    "vite": "^4.3.5",
-    "vitepress": "1.0.0-alpha.75",
-    "vitest": "^0.33.0",
-    "vue": "^3.2.47",
-    "vue-router": "^4.1.6",
-    "vue-tsc": "^1.7.1",
-    "vue-virtual-scroller": "2.0.0-beta.8"
+    "vite": "^4.4.9",
+    "vitepress": "1.0.0-rc.11",
+    "vitest": "^0.34.4",
+    "vue": "^3.3.4",
+    "vue-router": "^4.2.4",
+    "vue-tsc": "^1.8.10"
   },
   "scripts": {
     "docs": "vitepress dev docs --port 4000",