@globalbrain/sefirot 4.30.1 → 4.32.0

package/lib/components/SInputRadios.vue

@@ -13,9 +13,7 @@ import SInputRadio from './SInputRadio.vue'
 
 export type { Color, Size }
 
-export interface Option<
-  ValueType extends string | number | boolean = string | number | boolean
-> {
+export interface Option<ValueType extends string | number | boolean = string | number | boolean> {
   label: string
   value: ValueType
   disabled?: boolean
@@ -53,7 +51,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
 })
 
 function isChecked(value: ValueType) {
@@ -88,6 +88,7 @@ function onChange(value: ValueType) {
     class="SInputRadios"
     :class="[size ?? 'small']"
     :size
+    :name
     :label
     :note
     :info
@@ -100,7 +101,7 @@ function onChange(value: ValueType) {
   >
     <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">
           <SInputRadio
             size="sm"
             :text="option.label"

package/lib/components/SInputSegments.vue

@@ -38,9 +38,7 @@ const emit = defineEmits<{
 }>()
 
 const _value = computed(() => {
-  const v = props.modelValue !== undefined
-    ? props.modelValue
-    : props.value
+  const v = props.modelValue !== undefined ? props.modelValue : props.value
 
   if (v === undefined) {
     throw new Error('[sefirot] SInputSegments: `value` or `modelValue` is required.')
@@ -60,6 +58,7 @@ function onSelect(value: T) {
     class="SInputSegments"
     :class="[size ?? 'small', { block }]"
     :size
+    :name
     :label
     :note
     :info
@@ -72,14 +71,13 @@ function onSelect(value: T) {
   >
     <div class="box">
       <SInputSegmentsOption
-        v-for="option, index in options"
-        :key="index"
+        v-for="(option, i) in options"
+        :key="i"
         :size="size ?? 'small'"
         :label="option.label"
-        :value="option.value"
         :mode="option.mode ?? 'default'"
         :active="_value === option.value"
-        :disabled="disabled ? true : option.disabled ?? false"
+        :disabled="disabled ? true : (option.disabled ?? false)"
         @click="onSelect(option.value)"
       />
     </div>

package/lib/components/SInputSegmentsOption.vue

@@ -1,4 +1,4 @@
-<script setup lang="ts" generic="T extends string | number | boolean">
+<script setup lang="ts">
 import { type Size } from './SInputBase.vue'
 
 export type { Size }
@@ -7,7 +7,6 @@ export type Mode = 'default' | 'mute' | 'neutral' | 'info' | 'success' | 'warnin
 const props = defineProps<{
   size: Size
   label: string
-  value: T
   mode: Mode
   active: boolean
   disabled: boolean

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>