@globalbrain/sefirot 2.37.1 → 2.39.0

package/lib/components/SDropdownSection.vue

@@ -29,5 +29,6 @@ defineProps<{
   <SDropdownSectionComponent
     v-else-if="section.type === 'component'"
     :comp="section.component"
+    :props="section.props"
   />
 </template>

package/lib/components/SDropdownSectionComponent.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import { type DefineComponent } from 'vue'
+import { type Component } from 'vue'
 
 defineProps<{
-  comp: DefineComponent
+  comp: Component
+  props?: Record<string, any>
 }>()
 </script>
 
 <template>
-  <Component :is="comp" />
+  <component :is="comp" v-bind="props" />
 </template>

package/lib/components/SDropdownSectionMenu.vue

@@ -9,7 +9,11 @@ defineProps<{
 <template>
   <ul class="SDropdownSectionMenu">
     <li v-for="option in options" :key="option.label" class="item">
-      <button class="button" @click="option.onClick">
+      <button
+        class="button"
+        @click="option.onClick"
+        :disabled="option.disabled"
+      >
         {{ option.label }}
       </button>
     </li>
@@ -33,8 +37,13 @@ defineProps<{
   font-weight: 400;
   transition: color 0.25s, background-color 0.25s;
 
-  &:hover {
+  &:hover:not(:disabled) {
     background-color: var(--c-mute);
   }
+
+  &:disabled {
+    color: var(--c-text-3);
+    cursor: not-allowed;
+  }
 }
 </style>

package/lib/components/STable.vue

@@ -27,6 +27,14 @@ const body = shallowRef<HTMLElement | null>(null)
 const block = shallowRef<HTMLElement | null>(null)
 const row = shallowRef<HTMLElement | null>(null)
 
+const ordersToShow = computed(() => {
+  return unref(props.options.orders).filter((key) => {
+    return unref(props.options.columns)[key]?.show !== false
+  })
+})
+
+watch(() => ordersToShow.value, handleResize)
+
 const colToGrowAdjusted = ref(false)
 
 const colToGrow = computed(() => {
@@ -34,13 +42,13 @@ const colToGrow = computed(() => {
     return -1
   }
 
-  return unref(props.options.orders).findIndex((key) => {
+  return ordersToShow.value.findIndex((key) => {
     return unref(props.options.columns)[key]?.grow
   }) ?? -1
 })
 
 const nameOfColToGrow = computed(() => {
-  return unref(props.options.orders)[colToGrow.value]
+  return ordersToShow.value[colToGrow.value]
 })
 
 const cellOfColToGrow = computed(() => {
@@ -130,7 +138,7 @@ useResizeObserver(block, ([entry]) => {
 const resizeObserver = useResizeObserver(head, handleResize)
 
 function stopObserving() {
-  const orders = unref(props.options.orders)
+  const orders = ordersToShow.value
   colWidths[orders[orders.length - 1]] = 'auto'
   resizeObserver.stop()
 }
@@ -236,7 +244,7 @@ function getCell(key: string, index: number) {
           <div class="block" ref="block">
             <div class="row" ref="row">
               <STableItem
-                v-for="key in unref(options.orders)"
+                v-for="key in ordersToShow"
                 :key="key"
                 :name="key"
                 :class-name="unref(options.columns)[key].className"
@@ -281,7 +289,7 @@ function getCell(key: string, index: number) {
                 >
                   <div class="row" :class="isSummaryOrLastClass(rIndex)">
                     <STableItem
-                      v-for="key in unref(options.orders)"
+                      v-for="key in ordersToShow"
                       :key="key"
                       :name="key"
                       :class-name="unref(options.columns)[key].className"
@@ -313,7 +321,7 @@ function getCell(key: string, index: number) {
               >
                 <div class="row" :class="isSummaryOrLastClass(rIndex)">
                   <STableItem
-                    v-for="key in unref(options.orders)"
+                    v-for="key in ordersToShow"
                     :key="key"
                     :name="key"
                     :class-name="unref(options.columns)[key].className"

package/lib/components/STableCellText.vue

@@ -20,7 +20,7 @@ const props = defineProps<{
   getter?: string | null | ((value: any, record: any) => string | null)
   color?: Color | ((value: any, record: any) => Color)
   iconColor?: Color | ((value: any, record: any) => Color)
-  link?(value: any, record: any): string
+  link?: string | null | ((value: any, record: any) => string)
   onClick?(value: any, record: any): void
 }>()
 
@@ -34,6 +34,12 @@ const _value = computed(() => {
     : props.getter
 })
 
+const _link = computed(() => {
+  return typeof props.link === 'function'
+    ? props.link(props.value, props.record)
+    : props.link
+})
+
 const _color = computed(() => {
   return typeof props.color === 'function'
     ? props.color(props.value, props.record)
@@ -52,7 +58,7 @@ const _iconColor = computed(() => {
     <SLink
       v-if="_value"
       class="container"
-      :href="link?.(value, record)"
+      :href="_link"
       :role="onClick ? 'button' : null"
       @click="() => onClick?.(value, record)"
     >

package/lib/composables/Dropdown.ts

@@ -1,5 +1,5 @@
 import { type MaybeRef, useElementBounding, useWindowSize } from '@vueuse/core'
-import { type Ref } from 'vue'
+import { type Component, type Ref } from 'vue'
 import { ref, unref } from 'vue'
 
 export type DropdownSection =
@@ -21,6 +21,7 @@ export interface DropdownSectionMenu extends DropdownSectionBase {
 
 export interface DropdownSectionMenuOption {
   label: string
+  disabled?: boolean
   onClick(): void
 }
 
@@ -73,7 +74,8 @@ export interface DropdownSectionActionsOption {
 
 export interface DropdownSectionComponent extends DropdownSectionBase {
   type: 'component'
-  component: any
+  component: Component
+  props?: Record<string, any>
 }
 
 export interface ManualDropdownPosition {

package/lib/composables/Table.ts

@@ -43,6 +43,7 @@ export interface TableColumn<V, R, SV, SR> {
   resizable?: boolean
   cell?: TableCell | TableColumnCellFn<V, R>
   summaryCell?: TableCell | TableColumnCellFn<SV, SR>
+  show?: boolean
 }
 
 export type TableColumnCellFn<V, R> = (value: V, record: R) => TableCell
@@ -80,7 +81,7 @@ export interface TableCellText extends TableCellBase {
   align?: 'left' | 'center' | 'right'
   icon?: any
   value?: string | null | ((value: any, record: any) => string | null)
-  link?(value: any, record: any): string
+  link?: string | null | ((value: any, record: any) => string)
   color?: TableCellValueColor | ((value: any, record: any) => TableCellValueColor)
   iconColor?: TableCellValueColor | ((value: any, record: any) => TableCellValueColor)
   onClick?(value: any, record: any): void

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@globalbrain/sefirot",
-  "version": "2.37.1",
-  "packageManager": "pnpm@8.5.0",
+  "version": "2.39.0",
+  "packageManager": "pnpm@8.6.2",
   "description": "Vue Components for Global Brain Design System.",
   "author": "Kia Ishii <ka.ishii@globalbrains.com>",
   "license": "MIT",