@globalbrain/sefirot 4.31.0 → 4.32.0

package/lib/components/SInputSelect.vue

@@ -36,7 +36,9 @@ const emit = defineEmits<{
 const _value = computed(() => {
   return props.modelValue !== undefined
     ? props.modelValue
-    : props.value !== undefined ? props.value : null
+    : props.value !== undefined
+      ? props.value
+      : null
 })
 
 const isFocused = ref(false)
@@ -103,11 +105,11 @@ function emitChange(e: any): void {
         </option>
 
         <option
-          v-for="option, index in options"
+          v-for="(option, i) in options"
           :key="JSON.stringify(option)"
           :style="{ display: option.disabled ? 'none' : undefined }"
           class="option"
-          :value="index"
+          :value="i"
           :selected="isSelectedOption(option)"
         >
           {{ option.label }}
@@ -214,7 +216,7 @@ function emitChange(e: any): void {
 }
 
 .option {
-  color: initial;
+  background-color: var(--input-bg-color);
 }
 
 .icon {

package/lib/components/SInputSwitch.vue

@@ -36,7 +36,9 @@ const emit = defineEmits<{
 const _value = computed(() => {
   return props.modelValue !== undefined
     ? props.modelValue
-    : props.value !== undefined ? props.value : false
+    : props.value !== undefined
+      ? props.value
+      : false
 })
 
 const classes = computed(() => [
@@ -67,6 +69,7 @@ function emitChange(): void {
     :check-color
     :help
     :hide-error
+    :validation
   >
     <div class="container">
       <div class="input" :class="{ on: _value }" role="button" @click="emitChange">

package/lib/components/SInputSwitches.vue

@@ -40,7 +40,7 @@ function isChecked(value: any): boolean {
   return props.modelValue.includes(value)
 }
 
-function handleChange(value: any): void {
+function onChange(value: any): void {
   const difference = props.modelValue
     .filter((v) => v !== value)
     .concat(props.modelValue.includes(value) ? [] : [value])
@@ -63,15 +63,17 @@ function handleChange(value: any): void {
     :check-text
     :check-color
     :hide-error
+    :validation
   >
     <div class="container">
       <div class="row">
-        <div v-for="(option, index) in options" :key="index" class="col">
+        <div v-for="(option, i) in options" :key="i" class="col">
           <SInputSwitch
             size="sm"
             :text="option.label"
+            :disabled
             :model-value="isChecked(option.value)"
-            @update:model-value="handleChange(option.value)"
+            @update:model-value="onChange(option.value)"
           />
         </div>
       </div>

package/lib/components/SInputText.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { type Component, computed, ref } from 'vue'
-import { isString } from '../support/Utils'
 import SInputBase, { type Props as BaseProps } from './SInputBase.vue'
 
 export type { Color, Size } from './SInputBase.vue'
@@ -37,17 +36,12 @@ const classes = computed(() => [
   { disabled: props.disabled }
 ])
 
-const inputClasses = computed(() => [
-  textColor.value,
-  { hide: showDisplay.value }
-])
-
 const textColor = computed(() => {
   if (!props.textColor) {
     return 'neutral'
   }
 
-  if (isString(props.textColor)) {
+  if (typeof props.textColor === 'string') {
     return props.textColor
   }
 
@@ -58,6 +52,11 @@ const showDisplay = computed(() => {
   return !isFocused.value && props.displayValue
 })
 
+const inputClasses = computed(() => [
+  textColor.value,
+  { hide: showDisplay.value }
+])
+
 function focus(): void {
   input.value?.focus()
 }
@@ -78,9 +77,10 @@ function emitBlur(e: FocusEvent): void {
 }
 
 function emitInput(e: Event): void {
-  const v = getValue(e)
-  emit('update:model-value', v)
-  emit('input', v)
+  const value = getValue(e)
+
+  emit('update:model-value', value)
+  emit('input', value)
 }
 
 function emitEnter(e: KeyboardEvent): void {
@@ -124,21 +124,21 @@ function getValue(e: Event | FocusEvent | KeyboardEvent): string | null {
 
       <div class="value">
         <div v-if="unitBefore" class="unit before">
-          <span v-if="isString(unitBefore)" class="unit-text">{{ unitBefore }}</span>
-          <component v-else :is="unitBefore" class="unit-icon" />
+          <span v-if="typeof unitBefore === 'string'" class="unit-text">{{ unitBefore }}</span>
+          <component :is="unitBefore" v-else class="unit-icon" />
         </div>
 
         <div class="area">
           <input
+            :id="name"
+            ref="input"
             class="input entity"
             :class="inputClasses"
-            :id="name"
             :type="type ?? 'text'"
             :placeholder
             :disabled
             :tabindex
             :value="modelValue"
-            ref="input"
             @focus="onFocus"
             @blur="emitBlur"
             @input="emitInput"
@@ -150,8 +150,8 @@ function getValue(e: Event | FocusEvent | KeyboardEvent): string | null {
         </div>
 
         <div v-if="unitAfter" class="unit after">
-          <span v-if="isString(unitAfter)" class="unit-text">{{ unitAfter }}</span>
-          <component v-else :is="unitAfter" class="unit-icon" />
+          <span v-if="typeof unitAfter === 'string'" class="unit-text">{{ unitAfter }}</span>
+          <component :is="unitAfter" v-else class="unit-icon" />
         </div>
       </div>
 

package/lib/components/SInputTextarea.vue

@@ -39,7 +39,9 @@ const sizePaddingYDict = {
 const _value = computed(() => {
   return props.modelValue !== undefined
     ? props.modelValue
-    : props.value !== undefined ? props.value : null
+    : props.value !== undefined
+      ? props.value
+      : null
 })
 
 const classes = computed(() => [
@@ -58,7 +60,9 @@ const style = computed(() => {
   const fontSize = 24
 
   const minHeight = `min-height: ${rows * fontSize + padding}px;`
-  const maxHeight = props.autoResize === true ? '' : `max-height: calc(${props.autoResize}lh + ${padding}px);`
+  const maxHeight = props.autoResize === true
+    ? ''
+    : `max-height: calc(${props.autoResize}lh + ${padding}px);`
 
   return `field-sizing:content;${minHeight}${maxHeight}`
 })
@@ -101,11 +105,11 @@ const isPreview = ref(false)
     <div class="box">
       <div v-if="preview !== undefined" class="control">
         <SInputSegments
+          v-model="isPreview"
           :options="[
             { label: writeLabel ?? 'Write', value: false },
             { label: previewLabel ?? 'Preview', value: true }
           ]"
-          v-model="isPreview"
           size="mini"
         />
       </div>

package/lib/components/SInputYMD.vue

@@ -38,7 +38,9 @@ const emit = defineEmits<{
 const _value = computed(() => {
   return props.modelValue !== undefined
     ? props.modelValue
-    : props.value !== undefined ? props.value : null
+    : props.value !== undefined
+      ? props.value
+      : null
 })
 
 const padValue = computed(() => {

package/lib/components/SLink.vue

@@ -30,8 +30,8 @@ const component = computed(() => {
   return isExternal.value ? 'a' : 'router-link'
 })
 
-const target = computed(() => isExternal.value ? '_blank' : null)
-const rel = computed(() => isExternal.value ? 'noopener noreferrer' : null)
+const target = computed(() => (isExternal.value ? '_blank' : null))
+const rel = computed(() => (isExternal.value ? 'noopener noreferrer' : null))
 </script>
 
 <template>

package/lib/components/SLocalNav.vue

@@ -6,7 +6,7 @@ import SLocalNavDescription from './SLocalNavDescription.vue'
 import SLocalNavMenu, { type MenuItem } from './SLocalNavMenu.vue'
 import SLocalNavTitle, { type Title } from './SLocalNavTitle.vue'
 
-export type { Title, Action, MenuItem }
+export type { Action, MenuItem, Title }
 
 export interface Avatar {
   image?: string | null

package/lib/components/SLocalNavActions.vue

@@ -26,7 +26,7 @@ defineProps<{
 
 <template>
   <div class="SLocalNavActions">
-    <div v-for="action, i in actions" :key="i" class="action">
+    <div v-for="(action, i) in actions" :key="i" class="action">
       <SButton
         size="small"
         :tag="action.tag"

package/lib/components/SLocalNavMenu.vue

@@ -16,10 +16,10 @@ defineProps<{
 
 <template>
   <div class="SLocalNavMenu">
-    <div v-for="nav, index in menu" :key="index" class="group">
+    <div v-for="(nav, i) in menu" :key="i" class="group">
       <div v-for="item in nav" :key="item.text" class="item">
         <SLink class="link" :class="{ active: item.active }" :href="item.link">
-          <component v-if="item.icon" :is="item.icon" class="icon-svg" />
+          <component :is="item.icon" v-if="item.icon" class="icon-svg" />
           <span class="text">{{ item.text }}</span>
         </SLink>
       </div>

package/lib/components/SLoginPagePasswordDialog.vue

@@ -57,19 +57,19 @@ async function onSubmit() {
           <p>Invalid email or password.</p>
         </SAlert>
         <SInputText
+          v-model="data.email"
           name="email"
           type="email"
           label="Email"
           placeholder="john.doe@example.com"
-          v-model="data.email"
           :validation="validation.email"
         />
         <SInputText
+          v-model="data.password"
           name="password"
           type="password"
           label="Password"
           placeholder="Password"
-          v-model="data.password"
           :validation="validation.password"
         />
       </SDoc>

package/lib/components/SM.vue

@@ -34,7 +34,7 @@ const { stop } = useIntersectionObserver(target, ([{ isIntersecting }]) => {
 </script>
 
 <template>
-  <component :is="as" class="SM" :class="{ on }" ref="target">
+  <component :is="as" ref="target" class="SM" :class="{ on }">
     <slot :on />
   </component>
 </template>

package/lib/components/SMFade.vue

@@ -8,7 +8,7 @@ withDefaults(defineProps<Props>(), {
 </script>
 
 <template>
-  <SM class="SMFade" v-bind="$props" v-slot="{ on }">
+  <SM v-slot="{ on }" class="SMFade" v-bind="$props">
     <slot :on />
   </SM>
 </template>

package/lib/components/SMarkdown.vue

@@ -17,8 +17,9 @@ const rendered = computed(() => markdown(props.content))
 </script>
 
 <template>
-  <component v-if="$slots.default" :is="tag" class="SMarkdown-container">
+  <component :is="tag" v-if="$slots.default" class="SMarkdown-container">
     <slot v-bind="{ rendered }" />
   </component>
-  <component v-else :is="tag" class="SMarkdown-container" v-html="rendered" />
+  <!-- eslint-disable-next-line vue/no-v-text-v-html-on-component -->
+  <component :is="tag" v-else class="SMarkdown-container" v-html="rendered" />
 </template>

package/lib/components/SModal.vue

@@ -30,7 +30,7 @@ function onClick(e: MouseEvent) {
 <template>
   <Teleport to="#sefirot-modals">
     <Transition name="fade">
-      <div v-if="open" class="SModal" ref="el" @mousedown="onClick">
+      <div v-if="open" ref="el" class="SModal" @mousedown="onClick">
         <slot />
       </div>
     </Transition>
@@ -45,7 +45,7 @@ function onClick(e: MouseEvent) {
   bottom: 0;
   left: 0;
   z-index: var(--z-index-backdrop);
-  background-color: rgba(0, 0, 0, .8);
+  background-color: rgba(0, 0, 0, 0.8);
   transition: opacity 0.25s;
   overflow: hidden;
   overflow-y: auto;

package/lib/components/SSnackbar.vue

@@ -28,7 +28,7 @@ function close() {
     </p>
 
     <div v-if="actions" class="actions">
-      <div v-for="(action, index) in actions" :key="index" class="action">
+      <div v-for="(action, i) in actions" :key="i" class="action">
         <SButton
           size="medium"
           type="text"
@@ -87,7 +87,7 @@ function close() {
   width: 16px;
   height: 16px;
   color: var(--c-text-3);
-  transition: color .25s;
+  transition: color 0.25s;
 }
 
 .content {

package/lib/components/SSteps.vue

@@ -19,7 +19,7 @@ function getBarLeftMode(index: number): BarMode | null {
   const current = props.steps[index]
   const prev = props.steps[index - 1]
 
-  return (isActive(prev) && isActive(current)) ? 'active' : 'mute'
+  return isActive(prev) && isActive(current) ? 'active' : 'mute'
 }
 
 function getBarRightMode(index: number): BarMode | null {
@@ -30,7 +30,7 @@ function getBarRightMode(index: number): BarMode | null {
   const current = props.steps[index]
   const next = props.steps[index + 1]
 
-  return (isActive(current) && isActive(next)) ? 'active' : 'mute'
+  return isActive(current) && isActive(next) ? 'active' : 'mute'
 }
 
 function isActive(step: Step): boolean {
@@ -41,12 +41,12 @@ function isActive(step: Step): boolean {
 <template>
   <div class="SSteps">
     <SStep
-      v-for="(step, index) in steps"
-      :key="index"
+      v-for="(step, i) in steps"
+      :key="i"
       class="item"
       :style="{ width }"
-      :bar-left="getBarLeftMode(index)"
-      :bar-right="getBarRightMode(index)"
+      :bar-left="getBarLeftMode(i)"
+      :bar-right="getBarRightMode(i)"
       v-bind="step"
     />
   </div>

package/lib/components/STable.vue

@@ -22,6 +22,7 @@ const head = shallowRef<HTMLElement | null>(null)
 const body = shallowRef<HTMLElement | null>(null)
 const block = shallowRef<HTMLElement | null>(null)
 const row = shallowRef<HTMLElement | null>(null)
+const table = shallowRef<HTMLElement | null>(null)
 
 const ordersToShow = smartComputed(() => {
   const orders = unref(props.options.orders).filter((key) => {
@@ -36,7 +37,7 @@ const ordersToShow = smartComputed(() => {
   return ['__select', ...orders]
 })
 
-watch(() => ordersToShow.value, handleResize)
+watch(() => ordersToShow.value, onResize)
 
 const colToGrowAdjusted = ref(false)
 
@@ -61,6 +62,12 @@ const cellOfColToGrow = computed(() => {
 const colWidths = reactive<Record<string, string>>({})
 const blockWidth = ref<number | undefined>()
 
+const resizeState = ref<{
+  columnName: string
+  startX: number
+  indicatorX: number
+} | null>(null)
+
 watch(() => unref(props.options.columns), (columns) => {
   Object.keys(columns).forEach((key) => {
     const width = columns[key]?.width
@@ -77,7 +84,6 @@ const showHeader = computed(() => {
 
   return (
     unref(props.options.total) != null
-    || !!unref(props.options.reset)
     || !!unref(props.options.menu)
   )
 })
@@ -201,7 +207,6 @@ const frozenColumns = smartComputed(() => {
 })
 
 const frozenColWidths = smartComputed(() => {
-  // eslint-disable-next-line no-void
   void blockWidth.value
   return frozenColumns.value.map((key) => getColWidth(key))
 })
@@ -210,7 +215,7 @@ useResizeObserver(block, ([entry]) => {
   blockWidth.value = entry.contentRect.width
 })
 
-const resizeObserver = useResizeObserver(head, handleResize)
+const resizeObserver = useResizeObserver(head, onResize)
 
 const font = typeof document !== 'undefined'
   ? `500 12px ${getComputedStyle(document.body).fontFamily}`
@@ -267,7 +272,7 @@ function stopObserving() {
   resizeObserver.stop()
 }
 
-async function handleResize() {
+async function onResize() {
   if (colToGrow.value < 0 || !cellOfColToGrow.value || !row.value) {
     stopObserving()
     return
@@ -387,6 +392,29 @@ function getStyles(key: string) {
     '--table-col-left': widthSum ? `calc(${widthSum})` : '0px'
   }
 }
+
+function onResizeStart(data: { columnName: string; startX: number; initialX: number }) {
+  const tableRect = table.value?.getBoundingClientRect()
+  const tableLeft = tableRect?.left ?? 0
+  const indicatorX = data.initialX - tableLeft
+
+  resizeState.value = {
+    columnName: data.columnName,
+    startX: indicatorX,
+    indicatorX
+  }
+}
+
+function onResizeMove(data: { deltaX: number }) {
+  if (resizeState.value) {
+    resizeState.value.indicatorX = resizeState.value.startX + data.deltaX
+  }
+}
+
+function onResizeEnd(data: { columnName: string; finalWidth: string }) {
+  updateColWidth(data.columnName, data.finalWidth, true)
+  resizeState.value = null
+}
 </script>
 
 <template>
@@ -395,17 +423,21 @@ function getStyles(key: string) {
       <STableHeader
         v-if="showHeader"
         :total="unref(options.total)"
-        :reset="unref(options.reset)"
         :menu="unref(options.menu)"
         :borderless="unref(options.borderless)"
-        :on-reset="options.onReset"
         :selected="Array.isArray(selected) ? selected : undefined"
       />
 
-      <div class="table" role="grid">
-        <div class="container head" ref="head" @scroll="syncHeadScroll">
-          <div class="block" ref="block">
-            <div class="row" ref="row">
+      <div ref="table" class="table" role="grid">
+        <div
+          v-if="resizeState"
+          class="resize-indicator"
+          :style="{ left: `${resizeState.indicatorX}px` }"
+        />
+
+        <div ref="head" class="container head" @scroll="syncHeadScroll">
+          <div ref="block" class="block">
+            <div ref="row" class="row">
               <STableItem
                 v-for="key in ordersToShow"
                 :key
@@ -421,7 +453,9 @@ function getStyles(key: string) {
                   :dropdown="unref(options.columns)[key]?.dropdown"
                   :has-header="showHeader"
                   :resizable="unref(options.columns)[key]?.resizable"
-                  @resize="(value) => updateColWidth(key, value, true)"
+                  @resize-start="onResizeStart"
+                  @resize-move="onResizeMove"
+                  @resize-end="onResizeEnd"
                 >
                   <SInputCheckbox
                     v-if="
@@ -440,8 +474,8 @@ function getStyles(key: string) {
 
         <div
           v-if="!unref(options.loading) && unref(options.records)?.length"
-          class="container body"
           ref="body"
+          class="container body"
           @scroll="syncBodyScroll"
         >
           <div
@@ -452,10 +486,10 @@ function getStyles(key: string) {
               position: 'relative'
             }"
           >
-            <div v-for="{ index, key: __key, size, start } in virtualItems" :key="__key">
+            <div v-for="{ index: i, key: __key, size, start } in virtualItems" :key="__key">
               <div
                 class="row"
-                :class="isSummaryOrLastClass(index)"
+                :class="isSummaryOrLastClass(i)"
                 :style="{
                   position: 'absolute',
                   top: 0,
@@ -475,25 +509,24 @@ function getStyles(key: string) {
                 >
                   <STableCell
                     :name="key"
-                    :class="isSummary(index) && 'summary'"
+                    :class="isSummary(i) && 'summary'"
                     :class-name="unref(options.columns)[key]?.className"
-                    :cell="getCell(key, index)"
-                    :value="recordsWithSummary[index][key]"
-                    :record="recordsWithSummary[index]"
-                    :records="unref(options.records)!"
+                    :cell="getCell(key, i)"
+                    :value="recordsWithSummary[i][key]"
+                    :record="recordsWithSummary[i]"
                   >
-                    <template v-if="key === '__select' && !isSummary(index)">
+                    <template v-if="key === '__select' && !isSummary(i)">
                       <SInputCheckbox
                         v-if="Array.isArray(selected)"
-                        :model-value="selected.includes(indexes[index])"
-                        @update:model-value="(c) => (c ? addSelected : removeSelected)(indexes[index])"
-                        :disabled="options.disableSelection?.(recordsWithSummary[index]) === true"
+                        :model-value="selected.includes(indexes[i])"
+                        :disabled="options.disableSelection?.(recordsWithSummary[i]) === true"
+                        @update:model-value="(c) => (c ? addSelected : removeSelected)(indexes[i])"
                       />
                       <SInputRadio
                         v-else
-                        :model-value="selected === indexes[index]"
-                        @update:model-value="(c) => updateSelected(c ? indexes[index] : null)"
-                        :disabled="options.disableSelection?.(recordsWithSummary[index]) === true"
+                        :model-value="selected === indexes[i]"
+                        :disabled="options.disableSelection?.(recordsWithSummary[i]) === true"
+                        @update:model-value="(c) => updateSelected(c ? indexes[i] : null)"
                       />
                     </template>
                   </STableCell>
@@ -637,6 +670,16 @@ function getStyles(key: string) {
   color: var(--c-text-1);
 }
 
+.resize-indicator {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 1px;
+  background-color: var(--c-border-info-1);
+  z-index: 200;
+  pointer-events: none;
+}
+
 .STable .col-__select {
   --table-col-width: calc(48px + var(--table-padding-left));