@globalbrain/sefirot 3.32.0 → 3.33.1

package/lib/components/SInputRadio.vue

@@ -17,7 +17,7 @@ const props = defineProps<{
   checkIcon?: IconifyIcon | DefineComponent
   checkText?: string
   checkColor?: Color
-  text: string
+  text?: string
   disabled?: boolean
   modelValue: boolean
   validation?: Validatable
@@ -68,7 +68,7 @@ function onClick() {
           <div class="check" />
         </div>
 
-        <p class="text">{{ text }}</p>
+        <p class="text" v-if="text">{{ text }}</p>
       </div>
     </div>
     <template v-if="$slots.info" #info><slot name="info" /></template>

package/lib/components/STable.vue

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts" generic="S extends any[] | any | undefined = undefined">
 import { useVirtualizer } from '@tanstack/vue-virtual'
 import { useResizeObserver } from '@vueuse/core'
 import xor from 'lodash-es/xor'
@@ -15,6 +15,7 @@ import {
 import { type Table } from '../composables/Table'
 import { getTextWidth } from '../support/Text'
 import SInputCheckbox from './SInputCheckbox.vue'
+import SInputRadio from './SInputRadio.vue'
 import SSpinner from './SSpinner.vue'
 import STableCell from './STableCell.vue'
 import STableColumn from './STableColumn.vue'
@@ -24,11 +25,11 @@ import STableItem from './STableItem.vue'
 
 const props = defineProps<{
   options: Table
-  selected?: unknown[]
+  selected?: S
 }>()
 
 const emit = defineEmits<{
-  (e: 'update:selected', value: unknown[]): void
+  (e: 'update:selected', value: S): void
 }>()
 
 const head = shallowRef<HTMLElement | null>(null)
@@ -41,7 +42,7 @@ const ordersToShow = computed(() => {
     const show = unref(props.options.columns)[key]?.show
     return toValue(show) !== false
   })
-  if (!props.selected) {
+  if (props.selected === undefined) {
     return orders
   }
   return ['__select', ...orders]
@@ -126,7 +127,7 @@ const recordsWithSummary = computed(() => {
 })
 
 const indexes = computed(() => {
-  if (!props.selected) {
+  if (props.selected === undefined) {
     return []
   }
   const records = unref(props.options.records) ?? []
@@ -139,9 +140,6 @@ const selectedIndexes = reactive(new Set())
 
 const control = computed({
   get() {
-    if (!props.selected) {
-      return false
-    }
     const selected = indexes.value.filter((index) => {
       return selectedIndexes.has(index)
     })
@@ -165,12 +163,11 @@ const control = computed({
 })
 
 watch(indexes, (newValue, oldValue) => {
-  if (!props.selected) {
-    return
+  if (Array.isArray(props.selected)) {
+    xor(newValue, oldValue).forEach((index) => {
+      selectedIndexes.delete(index)
+    })
   }
-  xor(newValue, oldValue).forEach((index) => {
-    selectedIndexes.delete(index)
-  })
 })
 
 const virtualizerOptions = computed(() => ({
@@ -343,8 +340,12 @@ function getCell(key: string, index: number) {
   return (isSummary(index) && col?.summaryCell) ? col?.summaryCell : col?.cell
 }
 
-function updateSelected(selected: unknown[]) {
-  if (xor(selected, props.selected ?? []).length) {
+function updateSelected(selected: any) {
+  if (Array.isArray(props.selected)) {
+    if (xor(selected, props.selected ?? []).length) {
+      emit('update:selected', selected)
+    }
+  } else {
     emit('update:selected', selected)
   }
 }
@@ -361,7 +362,7 @@ function updateSelected(selected: unknown[]) {
         :actions="unref(options.actions)"
         :borderless="unref(options.borderless)"
         :on-reset="options.onReset"
-        :selected="selected"
+        :selected="Array.isArray(selected) ? selected : undefined"
       />
 
       <div class="table" role="grid">
@@ -389,7 +390,7 @@ function updateSelected(selected: unknown[]) {
                   @resize="(value) => updateColWidth(key, value, true)"
                 >
                   <SInputCheckbox
-                    v-if="key === '__select' && unref(options.records)?.length"
+                    v-if="Array.isArray(selected) && key === '__select' && unref(options.records)?.length"
                     v-model="control"
                   />
                 </STableColumn>
@@ -444,11 +445,18 @@ function updateSelected(selected: unknown[]) {
                     :record="recordsWithSummary[index]"
                     :records="unref(options.records)!"
                   >
-                    <SInputCheckbox
-                      v-if="key === '__select' && !isSummary(index)"
-                      :value="selectedIndexes.has(indexes[index])"
-                      @change="c => selectedIndexes[c ? 'add' : 'delete'](indexes[index])"
-                    />
+                    <template v-if="key === '__select' && !isSummary(index)">
+                      <SInputCheckbox
+                        v-if="Array.isArray(selected)"
+                        :model-value="selectedIndexes.has(indexes[index])"
+                        @update:model-value="c => selectedIndexes[c ? 'add' : 'delete'](indexes[index])"
+                      />
+                      <SInputRadio
+                        v-else
+                        :model-value="selected === indexes[index]"
+                        @update:model-value="c => updateSelected(c ? indexes[index] : null)"
+                      />
+                    </template>
                   </STableCell>
                 </STableItem>
               </div>
@@ -598,6 +606,7 @@ function updateSelected(selected: unknown[]) {
     align-items: center;
     padding: 0 16px;
     min-height: 40px;
+    user-select: none;
   }
 
   :deep(.container) {

package/lib/styles/base.css

@@ -42,6 +42,17 @@ h6 {
   font-weight: inherit;
 }
 
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+li,
+p {
+  overflow-wrap: break-word;
+}
+
 /**
  * Avoid 300ms click delay on touch devices that support the `touch-action`
  * CSS property.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@globalbrain/sefirot",
-  "version": "3.32.0",
-  "packageManager": "pnpm@8.15.3",
+  "version": "3.33.1",
+  "packageManager": "pnpm@8.15.4",
   "description": "Vue Components for Global Brain Design System.",
   "author": "Kia Ishii <ka.ishii@globalbrains.com>",
   "license": "MIT",
@@ -46,7 +46,7 @@
     "@types/markdown-it": "^13.0.7",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
-    "@vueuse/core": "^10.7.2",
+    "@vueuse/core": "^10.8.0",
     "body-scroll-lock": "4.0.0-beta.0",
     "fuse.js": "^7.0.0",
     "lodash-es": "^4.17.21",
@@ -56,8 +56,8 @@
     "postcss": "^8.4.35",
     "postcss-nested": "^6.0.1",
     "v-calendar": "^3.1.2",
-    "vue": "^3.4.19",
-    "vue-router": "^4.2.5"
+    "vue": "^3.4.20",
+    "vue-router": "^4.3.0"
   },
   "dependencies": {
     "@tanstack/vue-virtual": "3.0.0-beta.62",
@@ -72,7 +72,7 @@
   },
   "devDependencies": {
     "@globalbrain/eslint-config": "^1.5.2",
-    "@histoire/plugin-vue": "0.17.9",
+    "@histoire/plugin-vue": "^0.16.5",
     "@iconify-icons/ph": "^1.2.5",
     "@iconify-icons/ri": "^1.2.10",
     "@iconify/vue": "^4.1.1",
@@ -80,18 +80,18 @@
     "@types/body-scroll-lock": "^3.1.2",
     "@types/lodash-es": "^4.17.12",
     "@types/markdown-it": "^13.0.7",
-    "@types/node": "^20.11.19",
+    "@types/node": "^20.11.20",
     "@vitejs/plugin-vue": "^5.0.4",
-    "@vitest/coverage-v8": "^1.3.0",
+    "@vitest/coverage-v8": "^1.3.1",
     "@vue/test-utils": "^2.4.4",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
-    "@vueuse/core": "^10.7.2",
+    "@vueuse/core": "^10.8.0",
     "body-scroll-lock": "4.0.0-beta.0",
-    "eslint": "^8.56.0",
+    "eslint": "^8.57.0",
     "fuse.js": "^7.0.0",
-    "happy-dom": "^13.3.8",
-    "histoire": "0.17.9",
+    "happy-dom": "^13.6.0",
+    "histoire": "^0.16.5",
     "lodash-es": "^4.17.21",
     "markdown-it": "^14.0.0",
     "normalize.css": "^8.0.1",
@@ -102,11 +102,11 @@
     "release-it": "^17.1.1",
     "typescript": "~5.3.3",
     "v-calendar": "^3.1.2",
-    "vite": "^5.1.3",
+    "vite": "^5.1.4",
     "vitepress": "1.0.0-rc.44",
-    "vitest": "^1.3.0",
-    "vue": "^3.4.19",
-    "vue-router": "^4.2.5",
+    "vitest": "^1.3.1",
+    "vue": "^3.4.20",
+    "vue-router": "^4.3.0",
     "vue-tsc": "^1.8.27"
   }
 }