@globalbrain/sefirot 3.2.1 → 3.4.0

package/lib/components/SCard.vue

@@ -2,7 +2,7 @@
 import { computed } from 'vue'
 import { provideCardState } from '../composables/Card'
 
-export type Size = 'small' | 'medium' | 'large'
+export type Size = 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge'
 export type Mode = 'neutral' | 'info' | 'success' | 'warning' | 'danger'
 
 const props = defineProps<{
@@ -83,6 +83,20 @@ const classes = computed(() => [
       max-width: 768px;
     }
   }
+
+  &.xlarge {
+    @media (min-width: 1056px) {
+      margin: 48px auto 128px;
+      max-width: 960px;
+    }
+  }
+
+  &.xxlarge {
+    @media (min-width: 1248px) {
+      margin: 48px auto 128px;
+      max-width: 1152px;
+    }
+  }
 }
 
 .SModal.fade-enter-from > .SCard,

package/lib/components/SInputDropdownItemAvatar.vue

@@ -36,7 +36,7 @@ defineEmits<{
 <style lang="postcss" scoped>
 .SInputDropdownItemAvatar {
   display: flex;
-  border: 1px solid var(--c-divider-light);
+  border: 1px solid var(--c-divider);
   border-radius: 14px;
   padding: 0 12px 0 0;
   background-color: var(--c-bg-mute);

package/lib/components/SInputDropdownItemText.vue

@@ -29,7 +29,7 @@ defineEmits<{
 <style lang="postcss" scoped>
 .SInputDropdownItemText {
   display: flex;
-  border: 1px solid var(--c-divider-light);
+  border: 1px solid var(--c-divider);
   border-radius: 14px;
   padding: 0 12px;
   background-color: var(--c-bg-mute);

package/lib/components/SPill.vue

@@ -3,15 +3,18 @@ import { computed } from 'vue'
 
 export type Size = 'mini' | 'small' | 'medium' | 'large'
 export type Type = 'dimm' | 'fill'
-export type Mode = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
+export type Mode = 'default' | 'mute' | 'neutral' | 'info' | 'success' | 'warning' | 'danger'
 
 const props = defineProps<{
-  tag?: string
+  as?: string
   size?: Size
   type?: Type
   mode?: Mode
   label?: string
   clickable?: boolean
+
+  // @deprecated Use `as` instead.
+  tag?: string
 }>()
 
 const emit = defineEmits<{
@@ -21,14 +24,13 @@ const emit = defineEmits<{
 const classes = computed(() => [
   props.size ?? 'small',
   props.type ?? 'dimm',
-  props.mode ?? 'neutral',
+  props.mode ?? 'default',
   { clickable: props.clickable }
 ])
 
 const computedTag = computed(() => {
-  return props.tag
-    ? props.tag
-    : props.clickable ? 'button' : 'span'
+  const as = props.as ?? props.tag
+  return as || (props.clickable ? 'button' : 'span')
 })
 
 function onClick() {
@@ -82,17 +84,17 @@ function onClick() {
   border-radius: 16px;
   padding: 0 12px;
   line-height: 30px;
-  font-size: 13px;
+  font-size: 14px;
 }
 
 .SPill.dimm {
-  &.neutral {
-    border-color: var(--pill-dimm-neutral-border-color);
-    color: var(--pill-dimm-neutral-text-color);
-    background-color: var(--pill-dimm-neutral-bg-color);
+  &.default {
+    border-color: var(--pill-dimm-default-border-color);
+    color: var(--pill-dimm-default-text-color);
+    background-color: var(--pill-dimm-default-bg-color);
 
-    &.clickable:hover { background-color: var(--pill-dimm-neutral-hover-bg-color); }
-    &.clickable:active { background-color: var(--pill-dimm-neutral-active-bg-color); }
+    &.clickable:hover { background-color: var(--pill-dimm-default-hover-bg-color); }
+    &.clickable:active { background-color: var(--pill-dimm-default-active-bg-color); }
   }
 
   &.mute {
@@ -104,6 +106,15 @@ function onClick() {
     &.clickable:active { background-color: var(--pill-dimm-mute-active-bg-color); }
   }
 
+  &.neutral {
+    border-color: var(--pill-dimm-neutral-border-color);
+    color: var(--pill-dimm-neutral-text-color);
+    background-color: var(--pill-dimm-neutral-bg-color);
+
+    &.clickable:hover { background-color: var(--pill-dimm-neutral-hover-bg-color); }
+    &.clickable:active { background-color: var(--pill-dimm-neutral-active-bg-color); }
+  }
+
   &.info {
     border-color: var(--pill-dimm-info-border-color);
     color: var(--pill-dimm-info-text-color);
@@ -142,13 +153,13 @@ function onClick() {
 }
 
 .SPill.fill {
-  &.neutral {
-    border-color: var(--pill-fill-neutral-border-color);
-    color: var(--pill-fill-neutral-text-color);
-    background-color: var(--pill-fill-neutral-bg-color);
+  &.default {
+    border-color: var(--pill-fill-default-border-color);
+    color: var(--pill-fill-default-text-color);
+    background-color: var(--pill-fill-default-bg-color);
 
-    &.clickable:hover { background-color: var(--pill-fill-neutral-hover-bg-color); }
-    &.clickable:active { background-color: var(--pill-fill-neutral-active-bg-color); }
+    &.clickable:hover { background-color: var(--pill-fill-default-hover-bg-color); }
+    &.clickable:active { background-color: var(--pill-fill-default-active-bg-color); }
   }
 
   &.mute {
@@ -160,6 +171,15 @@ function onClick() {
     &.clickable:active { background-color: var(--pill-fill-mute-active-bg-color); }
   }
 
+  &.neutral {
+    border-color: var(--pill-fill-neutral-border-color);
+    color: var(--pill-fill-neutral-text-color);
+    background-color: var(--pill-fill-neutral-bg-color);
+
+    &.clickable:hover { background-color: var(--pill-fill-neutral-hover-bg-color); }
+    &.clickable:active { background-color: var(--pill-fill-neutral-active-bg-color); }
+  }
+
   &.info {
     border-color: var(--pill-fill-info-border-color);
     color: var(--pill-fill-info-text-color);

package/lib/components/SSheet.vue

@@ -31,7 +31,7 @@ defineEmits<{
 <style scoped lang="postcss">
 .SSheet {
   position: relative;
-  border: 1px solid var(--c-divider-light);
+  border: 1px solid var(--c-divider);
   border-radius: 16px;
   background-color: var(--c-bg);
   transition: opacity 0.25s, transform 0.25s;

package/lib/components/SSheetFooter.vue

@@ -6,7 +6,7 @@
 
 <style scoped lang="postcss">
 .SSheetFooter {
-  border-top: 1px solid var(--c-divider-light);
+  border-top: 1px solid var(--c-divider);
   padding: 0 16px;
 
   @media (min-width: 512px) {

package/lib/components/SSnackbar.vue

@@ -44,7 +44,7 @@ function close() {
 <style scoped lang="postcss">
 .SSnackbar {
   position: relative;
-  border: 1px solid var(--c-divider-light);
+  border: 1px solid var(--c-divider);
   border-radius: 6px;
   width: 100%;
   background-color: var(--c-bg-elv-up);

package/lib/components/SState.vue

@@ -2,7 +2,7 @@
 import { computed } from 'vue'
 
 export type Size = 'mini' | 'small' | 'medium' | 'large'
-export type Mode = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
+export type Mode = 'default' | 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
 
 const props = defineProps<{
   as?: string
@@ -13,7 +13,7 @@ const props = defineProps<{
 
 const classes = computed(() => [
   props.size ?? 'small',
-  props.mode ?? 'neutral'
+  props.mode ?? 'default'
 ])
 </script>
 
@@ -29,7 +29,6 @@ const classes = computed(() => [
   display: inline-flex;
   align-items: center;
   border: 1px solid var(--c-border-mute-1);
-  border-radius: 6px;
   font-weight: 500;
   white-space: nowrap;
   background-color: var(--c-bg-mute-1);
@@ -37,11 +36,11 @@ const classes = computed(() => [
 
 .SState.mini {
   gap: 6px;
+  border-radius: 10px;
   padding: 0 6px;
   height: 20px;
 
   .indicator {
-    border-radius: 2px;
     width: 8px;
     height: 8px;
   }
@@ -52,12 +51,12 @@ const classes = computed(() => [
 }
 
 .SState.small {
-  gap: 8px;
+  gap: 6px;
+  border-radius: 12px;
   padding: 0 8px;
   height: 24px;
 
   .indicator {
-    border-radius: 3px;
     width: 10px;
     height: 10px;
   }
@@ -68,12 +67,12 @@ const classes = computed(() => [
 }
 
 .SState.medium {
-  gap: 8px;
+  gap: 6px;
+  border-radius: 14px;
   padding: 0 8px;
   height: 28px;
 
   .indicator {
-    border-radius: 3px;
     width: 10px;
     height: 10px;
   }
@@ -84,12 +83,12 @@ const classes = computed(() => [
 }
 
 .SState.large {
-  gap: 10px;
+  gap: 8px;
+  border-radius: 16px;
   padding: 0 10px;
   height: 32px;
 
   .indicator {
-    border-radius: 4px;
     width: 12px;
     height: 12px;
   }
@@ -99,28 +98,38 @@ const classes = computed(() => [
   }
 }
 
-.SState.neutral {
-  .indicator { background-color: var(--c-neutral-1); }
+.SState.default {
+  .label     { color: var(--c-text-1); }
+  .indicator { background-color: var(--c-fg-gray-1); }
 }
 
-.SState.mute  {
+.SState.mute {
   .label     { color: var(--c-text-2); }
   .indicator { background-color: var(--c-fg-gray-1); }
 }
 
-.SState.info  {
+.SState.neutral {
+  .label     { color: var(--c-text-1); }
+  .indicator { background-color: var(--c-neutral-1); }
+}
+
+.SState.info {
+  .label     { color: var(--c-text-1); }
   .indicator { background-color: var(--c-fg-info-1); }
 }
 
-.SState.success  {
+.SState.success {
+  .label     { color: var(--c-text-1); }
   .indicator { background-color: var(--c-fg-success-1); }
 }
 
-.SState.warning  {
+.SState.warning {
+  .label     { color: var(--c-text-1); }
   .indicator { background-color: var(--c-fg-warning-1); }
 }
 
-.SState.danger  {
+.SState.danger {
+  .label     { color: var(--c-text-1); }
   .indicator { background-color: var(--c-fg-danger-1); }
 }
 
@@ -130,6 +139,7 @@ const classes = computed(() => [
 
 .indicator {
   display: block;
+  border-radius: 50%;
   transition: background-color 0.25s;
 }
 </style>

package/lib/components/SStep.vue

@@ -92,7 +92,7 @@ defineProps({
   height: 2px;
 }
 
-.bar.mute   { background-color: var(--c-divider-light); }
+.bar.mute   { background-color: var(--c-divider); }
 .bar.active { background-color: var(--c-success); }
 .bar.failed { background-color: var(--c-danger); }
 

package/lib/components/STable.vue

@@ -12,6 +12,7 @@ import {
   watch
 } from 'vue'
 import { type Table } from '../composables/Table'
+import { getTextWidth } from '../support/Text'
 import SInputCheckbox from './SInputCheckbox.vue'
 import SSpinner from './SSpinner.vue'
 import STableCell from './STableCell.vue'
@@ -204,6 +205,52 @@ useResizeObserver(block, ([entry]) => {
 
 const resizeObserver = useResizeObserver(head, handleResize)
 
+const font = typeof document !== 'undefined'
+  ? `500 12px ${getComputedStyle(document.body).fontFamily}`
+  : '500 12px Inter'
+
+const actionsColumnWidth = computed(() => {
+  const { cell } = unref(props.options.columns).actions ?? {}
+
+  if (
+    typeof document === 'undefined'
+    || !cell
+    || typeof cell === 'function'
+    || cell.type !== 'actions'
+  ) {
+    return undefined
+  }
+
+  const { actions } = cell
+
+  const widths = actions.map(({ icon, label }) => {
+    // has only icon
+    if (icon && !label) {
+      return 1 /* border */ + 5 /* padding */ + 16 /* icon */ + 5 /* padding */ + 1 /* border */
+    }
+
+    // has only label
+    if (label && !icon) {
+      return 1 /* border */ + 12 /* padding */ + getTextWidth(label, font) + 12 /* padding */ + 1 /* border */
+    }
+
+    // has both icon and label
+    if (icon && label) {
+      return 1 /* border */ + 8 /* padding */ + 16 /* icon */ + 4 /* padding */ + getTextWidth(label, font) + 10 /* padding */ + 1 /* border */
+    }
+
+    return 0
+  })
+
+  return 8 /* padding */ + widths.reduce((a, b) => a + b, 0) + 8 /* padding */
+})
+
+watch(actionsColumnWidth, (newValue) => {
+  if (newValue) {
+    updateColWidth('actions', `${newValue}px`)
+  }
+}, { immediate: true, flush: 'post' })
+
 function stopObserving() {
   const orders = ordersToShow.value
   const lastOrder
@@ -496,7 +543,7 @@ function updateSelected(selected: unknown[]) {
 
 :deep(.row) {
   display: flex;
-  border-bottom: 1px solid var(--c-divider-2);
+  border-bottom: 1px solid var(--c-gutter);
 }
 
 :deep(.row.last),

package/lib/components/STableCell.vue

@@ -102,7 +102,6 @@ const computedCell = computed<TableCell | undefined>(() =>
     />
     <STableCellActions
       v-else-if="computedCell.type === 'actions'"
-      :value="value"
       :record="record"
       :actions="computedCell.actions"
     />

package/lib/components/STableCellActions.vue

@@ -3,7 +3,6 @@ import { type TableCellAction } from '../composables/Table'
 import SButton from './SButton.vue'
 
 defineProps<{
-  value: any
   record: any
   actions: TableCellAction[]
 }>()
@@ -11,18 +10,19 @@ defineProps<{
 
 <template>
   <div class="STableCellActions">
-    <SButton
-      v-for="(action, i) in actions"
-      :key="i"
-      size="mini"
-      type="text"
-      :mode="action.mode ?? 'mute'"
-      :icon="action.icon"
-      :icon-mode="action.iconMode"
-      :label="action.label"
-      :label-mode="action.labelMode"
-      @click="action.onClick(value, record)"
-    />
+    <template v-for="(action, i) in actions" :key="i">
+      <SButton
+        v-if="action.show == null || action.show(record)"
+        size="mini"
+        type="text"
+        :mode="action.mode ?? 'mute'"
+        :icon="action.icon"
+        :icon-mode="action.iconMode"
+        :label="action.label"
+        :label-mode="action.labelMode"
+        @click="action.onClick(record)"
+      />
+    </template>
   </div>
 </template>
 
@@ -31,8 +31,8 @@ defineProps<{
   min-height: 40px;
   display: flex;
   align-items: center;
-  justify-content: center;
   flex-wrap: nowrap;
   flex-direction: row;
+  padding: 0 8px;
 }
 </style>

package/lib/components/STableColumn.vue

@@ -151,7 +151,7 @@ function stopDialogPositionListener() {
   background-color: var(--c-bg-elv-4);
 
   &.has-header {
-    border-top: 1px solid var(--c-divider-2);
+    border-top: 1px solid var(--c-gutter);
   }
 
   .STableItem:first-child & {

package/lib/components/STableFooter.vue

@@ -56,7 +56,7 @@ const hasNext = computed(() => {
 
 <style scoped lang="postcss">
 .STableFooter {
-  border-top: 1px solid var(--c-divider-2);
+  border-top: 1px solid var(--c-gutter);
   border-radius: 0 0 calc(var(--table-border-radius) - 1px) calc(var(--table-border-radius) - 1px);
   padding-right: var(--table-padding-right);
   padding-left: var(--table-padding-left);

package/lib/components/STableHeaderMenu.vue

@@ -47,6 +47,6 @@ const normalizedMenu = computed(() => {
   margin: 0 8px;
   width: 1px;
   height: 16px;
-  background-color: var(--c-divider-2);
+  background-color: var(--c-gutter);
 }
 </style>

package/lib/components/STableItem.vue

@@ -26,10 +26,13 @@ const classes = computed(() => [
 .STableItem {
   position: var(--table-col-position, relative);
   left: var(--table-col-left, 0);
+  right: var(--table-col-right, auto);
   z-index: var(--table-col-z-index, auto);
   flex-shrink: 0;
   flex-grow: 1;
-  border-right: 1px solid var(--c-divider-light);
+  border-left: var(--table-col-border-left, 0) solid var(--c-gutter);
+  border-right: 1px solid var(--c-gutter);
+  margin-left: calc(var(--table-col-border-left, 0) * -1);
   min-width: var(--table-col-width);
   max-width: var(--table-col-width);
 

package/lib/components/SW.vue

@@ -0,0 +1,3 @@
+<template>
+  <wbr><span class="u-nowrap"><slot /></span>
+</template>

package/lib/composables/Table.ts

@@ -189,7 +189,8 @@ export interface TableCellAction {
   iconMode?: Mode
   label?: string
   labelMode?: Mode
-  onClick(value: any, record: any): void
+  onClick(record: any): void
+  show?(record: any): boolean
 }
 
 export interface TableMenu {

package/lib/styles/bootstrap.css

@@ -3,3 +3,4 @@
 @import "./variables-deprecated";
 @import "./variables";
 @import "./base";
+@import "./utilities";

package/lib/styles/utilities.css

@@ -0,0 +1,3 @@
+.u-nowrap {
+  white-space: nowrap;
+}

package/lib/styles/variables.css

@@ -441,7 +441,7 @@
   --button-fill-mute-active-border-color: var(--c-border-mute-3);
   --button-fill-mute-active-text-color: var(--c-text-2);
   --button-fill-mute-active-bg-color: var(--c-bg-mute-3);
-  --button-fill-mute-disabled-border-color: var(--c-divider-2);
+  --button-fill-mute-disabled-border-color: var(--c-border-mute-1);
   --button-fill-mute-disabled-text-color: var(--c-text-3);
   --button-fill-mute-disabled-content-color: var(--c-text-3);
   --button-fill-mute-disabled-bg-color: var(--c-bg-mute-1);
@@ -508,11 +508,11 @@
   --button-fill-info-disabled-border-color: var(--c-border-info-1);
   --button-fill-info-disabled-text-color: var(--c-white-a3);
   --button-fill-info-disabled-content-color: var(--c-white-a3);
-  --button-fill-info-disabled-bg-color: var(--c-info-bg-dark);
+  --button-fill-info-disabled-bg-color: var(--c-blue-8);
 
   --button-fill-success-border-color: var(--c-border-success-1);
   --button-fill-success-text-color: var(--c-white-1);
-  --button-fill-success-content-color: var(--c-success-text);
+  --button-fill-success-content-color: var(--c-white-1);
   --button-fill-success-bg-color: var(--c-bg-success-1);
   --button-fill-success-loader-color: var(--c-white);
   --button-fill-success-hover-border-color: var(--c-border-success-2);
@@ -524,7 +524,7 @@
   --button-fill-success-disabled-border-color: var(--c-border-success-1);
   --button-fill-success-disabled-text-color: var(--c-white-a3);
   --button-fill-success-disabled-content-color: var(--c-white-a3);
-  --button-fill-success-disabled-bg-color: var(--c-success-bg-dark);
+  --button-fill-success-disabled-bg-color: var(--c-green-8);
 
   --button-fill-warning-border-color: var(--c-border-mute-1);
   --button-fill-warning-text-color: var(--c-text-warning-1);
@@ -717,11 +717,11 @@
  * -------------------------------------------------------------------------- */
 
 :root {
-  --pill-dimm-neutral-border-color: var(--c-border-mute-1);
-  --pill-dimm-neutral-text-color: var(--c-text-1);
-  --pill-dimm-neutral-bg-color: var(--c-bg-mute-1);
-  --pill-dimm-neutral-hover-bg-color: var(--c-bg-mute-2);
-  --pill-dimm-neutral-active-bg-color: var(--c-bg-mute-3);
+  --pill-dimm-default-border-color: var(--c-border-mute-1);
+  --pill-dimm-default-text-color: var(--c-text-1);
+  --pill-dimm-default-bg-color: var(--c-bg-mute-1);
+  --pill-dimm-default-hover-bg-color: var(--c-bg-mute-2);
+  --pill-dimm-default-active-bg-color: var(--c-bg-mute-3);
 
   --pill-dimm-mute-border-color: var(--c-border-mute-1);
   --pill-dimm-mute-text-color: var(--c-text-2);
@@ -729,6 +729,12 @@
   --pill-dimm-mute-hover-bg-color: var(--c-bg-mute-2);
   --pill-dimm-mute-active-bg-color: var(--c-bg-mute-3);
 
+  --pill-dimm-neutral-border-color: var(--c-neutral-1);
+  --pill-dimm-neutral-text-color: var(--c-text-inverse-1);
+  --pill-dimm-neutral-bg-color: var(--c-neutral-1);
+  --pill-dimm-neutral-hover-bg-color: var(--c-neutral-2);
+  --pill-dimm-neutral-active-bg-color: var(--c-neutral-3);
+
   --pill-dimm-info-border-color: var(--c-border-info-1);
   --pill-dimm-info-text-color: var(--c-text-info-1);
   --pill-dimm-info-bg-color: var(--c-bg-info-dimm-a1);
@@ -753,11 +759,11 @@
   --pill-dimm-danger-hover-bg-color: var(--c-bg-danger-dimm-a2);
   --pill-dimm-danger-active-bg-color: var(--c-bg-danger-dimm-a2);
 
-  --pill-fill-neutral-border-color: transparent;
-  --pill-fill-neutral-text-color: var(--c-text-inverse-1);
-  --pill-fill-neutral-bg-color: var(--c-neutral-1);
-  --pill-fill-neutral-hover-bg-color: var(--c-neutral-2);
-  --pill-fill-neutral-active-bg-color: var(--c-neutral-3);
+  --pill-fill-default-border-color: transparent;
+  --pill-fill-default-text-color: var(--c-text-1);
+  --pill-fill-default-bg-color: var(--c-bg-mute-1);
+  --pill-fill-default-hover-bg-color: var(--c-bg-mute-2);
+  --pill-fill-default-active-bg-color: var(--c-bg-mute-3);
 
   --pill-fill-mute-border-color: transparent;
   --pill-fill-mute-text-color: var(--c-text-2);
@@ -765,6 +771,12 @@
   --pill-fill-mute-hover-bg-color: var(--c-bg-mute-2);
   --pill-fill-mute-active-bg-color: var(--c-bg-mute-3);
 
+  --pill-fill-neutral-border-color: transparent;
+  --pill-fill-neutral-text-color: var(--c-text-inverse-1);
+  --pill-fill-neutral-bg-color: var(--c-neutral-1);
+  --pill-fill-neutral-hover-bg-color: var(--c-neutral-2);
+  --pill-fill-neutral-active-bg-color: var(--c-neutral-3);
+
   --pill-fill-info-border-color: transparent;
   --pill-fill-info-text-color: var(--c-white-1);
   --pill-fill-info-bg-color: var(--c-bg-info-1);
@@ -814,7 +826,7 @@
  * -------------------------------------------------------------------------- */
 
 :root {
-  --table-border: 1px solid var(--c-divider-2);
+  --table-border: 1px solid var(--c-divider);
   --table-border-top: var(--table-border);
   --table-border-right: var(--table-border);
   --table-border-bottom: var(--table-border);

package/lib/support/Text.ts

@@ -0,0 +1,25 @@
+// Adapted from https://stackoverflow.com/a/21015393/11613622
+
+let _canvas: HTMLCanvasElement
+
+export function getTextWidth(text: string, font: string): number
+export function getTextWidth(text: string, el: HTMLElement): number
+
+export function getTextWidth(text: string, fontOrEl: string | HTMLElement): number {
+  const canvas = _canvas || (_canvas = document.createElement('canvas'))
+  const context = canvas.getContext('2d')!
+  context.font = typeof fontOrEl === 'string' ? fontOrEl : getCanvasFont(fontOrEl)
+  const metrics = context.measureText(text)
+
+  return metrics.width
+}
+
+function getCanvasFont(el: HTMLElement) {
+  const {
+    fontWeight = 'normal',
+    fontSize = '16px',
+    fontFamily = 'Times New Roman'
+  } = getComputedStyle(el)
+
+  return `${fontWeight} ${fontSize} ${fontFamily}`
+}

package/lib/types/shims.d.ts

@@ -1,3 +1,7 @@
-declare module 'v-calendar' {
-  export const DatePicker: any
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@globalbrain/sefirot",
-  "version": "3.2.1",
-  "packageManager": "pnpm@8.8.0",
+  "version": "3.4.0",
+  "packageManager": "pnpm@8.10.4",
   "description": "Vue Components for Global Brain Design System.",
   "author": "Kia Ishii <ka.ishii@globalbrains.com>",
   "license": "MIT",
@@ -20,26 +20,42 @@
   "files": [
     "lib"
   ],
+  "scripts": {
+    "docs": "vitepress dev docs --port 4000",
+    "docs:build": "vitepress build docs",
+    "docs:preview": "vitepress serve docs --port 3000",
+    "story": "histoire dev --port 3000",
+    "story:build": "histoire build",
+    "story:preview": "histoire preview --port 3000",
+    "type": "vue-tsc --noEmit",
+    "lint": "eslint --fix .",
+    "lint:fail": "eslint .",
+    "vitest": "vitest",
+    "coverage": "vitest run --coverage",
+    "test": "pnpm run type && pnpm run lint && pnpm run coverage",
+    "test:fail": "pnpm run type && pnpm run lint:fail && pnpm run coverage",
+    "release": "release-it"
+  },
   "peerDependencies": {
     "@iconify-icons/ph": "^1.2.5",
     "@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.9",
-    "@types/markdown-it": "^13.0.2",
+    "@tanstack/vue-virtual": "3.0.0-beta.62",
+    "@types/body-scroll-lock": "^3.1.2",
+    "@types/lodash-es": "^4.17.11",
+    "@types/markdown-it": "^13.0.6",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
-    "@vueuse/core": "^10.5.0",
+    "@vueuse/core": "^10.6.1",
     "body-scroll-lock": "4.0.0-beta.0",
-    "fuse.js": "^6.6.2",
+    "fuse.js": "^7.0.0",
     "lodash-es": "^4.17.21",
     "markdown-it": "^13.0.2",
     "normalize.css": "^8.0.1",
-    "pinia": "^2.1.6",
+    "pinia": "^2.1.7",
     "postcss": "^8.4.31",
     "postcss-nested": "^6.0.1",
-    "v-calendar": "^3.1.1",
-    "vue": "^3.3.4",
+    "v-calendar": "^3.1.2",
+    "vue": "^3.3.8",
     "vue-router": "^4.2.5"
   },
   "dependencies": {
@@ -47,60 +63,40 @@
   },
   "devDependencies": {
     "@globalbrain/eslint-config": "^1.5.2",
-    "@histoire/plugin-vue": "^0.17.1",
+    "@histoire/plugin-vue": "^0.17.5",
     "@iconify-icons/ph": "^1.2.5",
     "@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.9",
-    "@types/markdown-it": "^13.0.2",
-    "@types/node": "^20.8.3",
-    "@vitejs/plugin-vue": "^4.4.0",
-    "@vitest/coverage-v8": "^0.34.6",
+    "@release-it/conventional-changelog": "^8.0.1",
+    "@tanstack/vue-virtual": "3.0.0-beta.62",
+    "@types/body-scroll-lock": "^3.1.2",
+    "@types/lodash-es": "^4.17.11",
+    "@types/markdown-it": "^13.0.6",
+    "@types/node": "^20.9.0",
+    "@vitejs/plugin-vue": "^4.4.1",
+    "@vitest/coverage-v8": "^1.0.0-beta.4",
     "@vue/test-utils": "^2.4.1",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
-    "@vueuse/core": "^10.5.0",
+    "@vueuse/core": "^10.6.1",
     "body-scroll-lock": "4.0.0-beta.0",
-    "chalk": "^4.1.2",
-    "conventional-changelog-cli": "^4.1.0",
-    "enquirer": "^2.4.1",
-    "eslint": "^8.51.0",
-    "execa": "^5.1.1",
-    "fuse.js": "^6.6.2",
-    "happy-dom": "^12.9.0",
-    "histoire": "^0.17.2",
+    "eslint": "^8.53.0",
+    "fuse.js": "^7.0.0",
+    "happy-dom": "^12.10.3",
+    "histoire": "^0.17.5",
     "lodash-es": "^4.17.21",
     "markdown-it": "^13.0.2",
     "normalize.css": "^8.0.1",
-    "pinia": "^2.1.6",
+    "pinia": "^2.1.7",
     "postcss": "^8.4.31",
     "postcss-nested": "^6.0.1",
-    "semver": "^7.5.4",
+    "release-it": "^17.0.0",
     "typescript": "~5.2.2",
-    "v-calendar": "^3.1.1",
-    "vite": "^4.4.11",
-    "vitepress": "1.0.0-rc.20",
-    "vitest": "^0.34.6",
-    "vue": "^3.3.4",
+    "v-calendar": "^3.1.2",
+    "vite": "^4.5.0",
+    "vitepress": "1.0.0-rc.25",
+    "vitest": "^1.0.0-beta.4",
+    "vue": "^3.3.8",
     "vue-router": "^4.2.5",
-    "vue-tsc": "^1.8.18"
-  },
-  "scripts": {
-    "docs": "vitepress dev docs --port 4000",
-    "docs:build": "vitepress build docs",
-    "docs:preview": "vitepress serve docs --port 3000",
-    "story": "histoire dev --port 3000",
-    "story:build": "histoire build",
-    "story:preview": "histoire preview --port 3000",
-    "type": "vue-tsc --noEmit",
-    "lint": "eslint --fix .",
-    "lint:fail": "eslint .",
-    "vitest": "vitest",
-    "coverage": "vitest run --coverage",
-    "test": "pnpm run type && pnpm run lint && pnpm run coverage",
-    "test:fail": "pnpm run type && pnpm run lint:fail && pnpm run coverage",
-    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
-    "release": "node scripts/release.js"
+    "vue-tsc": "^1.8.22"
   }
-}
+}

package/lib/types/vue-shims.d.ts

@@ -1,7 +0,0 @@
-declare module '*.vue' {
-  import { DefineComponent } from 'vue'
-
-  const component: DefineComponent<{}, {}, any>
-
-  export default component
-}