@globalbrain/sefirot 2.13.0 → 2.14.1

package/lib/components/SInputRadios.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { computed } from 'vue'
 import { Validatable } from '../composables/Validation'
 import SInputBase from './SInputBase.vue'
 import SInputRadio from './SInputRadio.vue'
@@ -10,36 +11,58 @@ export interface Option {
   value: string | number | boolean
 }
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   size?: Size
   name?: string
   label?: string
+  info?: string
   note?: string
   help?: string
-  nullable?: boolean
   options: Option[]
-  hideError?: boolean
-  modelValue: string | number | boolean | null
+  nullable?: boolean
+  value?: string | number | boolean | null
+  modelValue?: string | number | boolean | null
   validation?: Validatable
-}>()
+  hideError?: boolean
+}>(), {
+  value: undefined,
+  modelValue: undefined
+})
 
 const emit = defineEmits<{
-  (e: 'update:modelValue', value: string | number | boolean | null): void
+  (e: 'update:model-value', value: string | number | boolean | null): void
+  (e: 'change', value: string | number | boolean | null): void
 }>()
 
+const _value = computed(() => {
+  return props.modelValue !== undefined
+    ? props.modelValue
+    : props.value !== undefined ? props.value : null
+})
+
 function isChecked(value: string | number | boolean) {
-  return value === props.modelValue
+  return value === _value.value
 }
 
-function handleChange(value: string | number | boolean) {
-  if (value !== props.modelValue) {
-    emit('update:modelValue', value)
+function onUpdate(value: string | number | boolean) {
+  if (value !== _value.value) {
+    emit('update:model-value', value)
+    return
+  }
+
+  if (props.nullable) {
+    emit('update:model-value', null)
+  }
+}
 
+function onChange(value: string | number | boolean) {
+  if (value !== _value.value) {
+    emit('change', value)
     return
   }
 
   if (props.nullable) {
-    emit('update:modelValue', null)
+    emit('change', null)
   }
 }
 </script>
@@ -50,6 +73,7 @@ function handleChange(value: string | number | boolean) {
     :class="[size ?? 'small']"
     :label="label"
     :note="note"
+    :info="info"
     :help="help"
     :hide-error="hideError"
     :validation="validation"
@@ -60,10 +84,12 @@ function handleChange(value: string | number | boolean) {
           <SInputRadio
             :text="option.label"
             :model-value="isChecked(option.value)"
-            @update:model-value="handleChange(option.value)"
+            @update:model-value="onUpdate(option.value)"
+            @change="onChange(option.value)"
           />
         </div>
       </div>
     </div>
+    <template v-if="$slots.info" #info><slot name="info" /></template>
   </SInputBase>
 </template>

package/lib/components/SInputSelect.vue

@@ -15,9 +15,10 @@ export interface Option {
   disabled?: boolean
 }
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   size?: Size
   label?: string
+  info?: string
   note?: string
   help?: string
   placeholder?: string
@@ -28,7 +29,10 @@ const props = defineProps<{
   modelValue?: Value
   validation?: Validatable
   hideError?: boolean
-}>()
+}>(), {
+  value: undefined,
+  modelValue: undefined
+})
 
 const emit = defineEmits<{
   (e: 'update:model-value', value: Value): void
@@ -56,14 +60,6 @@ function isSelectedOption(option: Option): boolean {
   return option.value === _value.value
 }
 
-function focus() {
-  isFocused.value = true
-}
-
-function blur() {
-  isFocused.value = false
-}
-
 function emitChange(e: any): void {
   if (!props.disabled) {
     props.validation?.$touch()
@@ -83,6 +79,7 @@ function emitChange(e: any): void {
     :class="classes"
     :label="label"
     :note="note"
+    :info="info"
     :help="help"
     :hide-error="hideError"
     :validation="validation"
@@ -92,8 +89,8 @@ function emitChange(e: any): void {
         class="select"
         :class="{ 'is-not-selected': isNotSelected }"
         :disabled="disabled"
-        @focus="focus"
-        @blur="blur"
+        @focus="isFocused = true"
+        @blur="isFocused = false"
         @change="emitChange"
       >
         <option
@@ -123,6 +120,7 @@ function emitChange(e: any): void {
         <SIcon :icon="IconCaretDown" class="icon-svg down" />
       </div>
     </div>
+    <template v-if="$slots.info" #info><slot name="info" /></template>
   </SInputBase>
 </template>
 

package/lib/components/SInputSwitch.vue

@@ -9,6 +9,7 @@ const props = defineProps<{
   size?: Size
   name?: string
   label?: string
+  info?: string
   note?: string
   text?: string
   help?: string
@@ -39,6 +40,7 @@ function emitChange(): void {
     :name="name"
     :label="label"
     :note="note"
+    :info="info"
     :help="help"
     :hide-error="hideError"
   >
@@ -51,6 +53,7 @@ function emitChange(): void {
         </div>
       </div>
     </div>
+    <template v-if="$slots.info" #info><slot name="info" /></template>
   </SInputBase>
 </template>
 

package/lib/components/SInputSwitches.vue

@@ -15,6 +15,7 @@ const props = defineProps<{
   size?: Size
   name?: string
   label?: string
+  info?: string
   note?: string
   help?: string
   options: Option[]
@@ -52,6 +53,7 @@ function handleChange(value: string | number | boolean): void {
     :name="name"
     :label="label"
     :note="note"
+    :info="info"
     :help="help"
     :hide-error="hideError"
   >
@@ -67,6 +69,7 @@ function handleChange(value: string | number | boolean): void {
         </div>
       </div>
     </div>
+    <template v-if="$slots.info" #info><slot name="info" /></template>
   </SInputBase>
 </template>
 

package/lib/components/SInputText.vue

@@ -11,6 +11,7 @@ const props = defineProps<{
   size?: Size
   name?: string
   label?: string
+  info?: string
   note?: string
   help?: string
   type?: string
@@ -92,6 +93,7 @@ function getValue(e: Event | FocusEvent | KeyboardEvent): string | null {
     :name="name"
     :label="label"
     :note="note"
+    :info="info"
     :help="help"
     :hide-error="hideError"
     :validation="validation"
@@ -121,6 +123,7 @@ function getValue(e: Event | FocusEvent | KeyboardEvent): string | null {
         </div>
       </div>
     </div>
+    <template v-if="$slots.info" #info><slot name="info" /></template>
   </SInputBase>
 </template>
 

package/lib/components/SInputTextarea.vue

@@ -9,6 +9,7 @@ const props = defineProps<{
   size?: Size
   name?: string
   label?: string
+  info?: string
   note?: string
   help?: string
   placeholder?: string
@@ -45,6 +46,7 @@ function emitBlur(e: FocusEvent): void {
     :name="name"
     :label="label"
     :note="note"
+    :info="info"
     :help="help"
     :hide-error="hideError"
     :validation="validation"
@@ -59,6 +61,7 @@ function emitBlur(e: FocusEvent): void {
       @input="emitInput"
       @blur="emitBlur"
     />
+    <template v-if="$slots.info" #info><slot name="info" /></template>
   </SInputBase>
 </template>
 

package/lib/components/SInputYMD.vue

@@ -16,6 +16,7 @@ export type ValueType = 'year' | 'month' | 'date'
 const props = defineProps<{
   size?: Size
   label?: string
+  info?: string
   note?: string
   help?: string
   noYear?: boolean
@@ -101,6 +102,7 @@ function createRequiredTouched(): boolean[] {
     :class="[size ?? 'small', { disabled }]"
     :label="label"
     :note="note"
+    :info="info"
     :help="help"
     :hide-error="hideError"
     :validation="validation"
@@ -145,6 +147,7 @@ function createRequiredTouched(): boolean[] {
         @blur="updateDate"
       >
     </div>
+    <template v-if="$slots.info" #info><slot name="info" /></template>
   </SInputBase>
 </template>
 

package/lib/components/STable.vue

@@ -16,6 +16,8 @@ const {
   orders,
   columns,
   records,
+  header,
+  footer,
   total,
   page,
   perPage,
@@ -36,13 +38,39 @@ let bodyLock = false
 const colWidths = reactive<Record<string, string>>({})
 
 const showHeader = computed(() => {
-  return total?.value !== undefined
+  if (header?.value === true) {
+    return true
+  }
+
+  if (header?.value === false) {
+    return false
+  }
+
+  return total?.value !== undefined || !!reset?.value
 })
 
 const showFooter = computed(() => {
-  return !loading?.value && page?.value && total?.value
+  if (loading?.value) {
+    return false
+  }
+
+  if (footer?.value === true) {
+    return true
+  }
+
+  if (footer?.value === false) {
+    return false
+  }
+
+  return page?.value && perPage?.value && total?.value
 })
 
+const classes = computed(() => ({
+  'has-header': showHeader.value,
+  'has-footer': showFooter.value,
+  'borderless': borderless?.value
+}))
+
 watch(() => records?.value, () => {
   headLock = true
   bodyLock = true
@@ -82,7 +110,7 @@ function updateColWidth(key: string, value: string) {
 </script>
 
 <template>
-  <div class="STable" :class="{ borderless }" ref="el">
+  <div class="STable" :class="classes" ref="el">
     <div class="box">
       <STableHeader
         v-if="showHeader"
@@ -114,6 +142,8 @@ function updateColWidth(key: string, value: string) {
                   :label="columns[key].label"
                   :class-name="columns[key].className"
                   :dropdown="columns[key].dropdown"
+                  :has-header="showHeader"
+                  :resizable="columns[key].resizable"
                   @resize="(value) => updateColWidth(key, value)"
                 />
               </STableItem>
@@ -180,10 +210,10 @@ function updateColWidth(key: string, value: string) {
 <style scoped lang="postcss">
 .box {
   position: relative;
-  border-top: var(--table-border);
-  border-right: var(--table-border);
-  border-bottom: var(--table-border);
-  border-left: var(--table-border);
+  border-top: var(--table-border-top, var(--table-border));
+  border-right: var(--table-border-right, var(--table-border));
+  border-bottom: var(--table-border-bottom, var(--table-border));
+  border-left: var(--table-border-left, var(--table-border));
   border-radius: var(--table-border-radius);
   width: 100%;
 
@@ -205,16 +235,29 @@ function updateColWidth(key: string, value: string) {
   width: 100%;
   min-width: 100%;
   overflow-x: auto;
+}
+
+.container.head {
+  position: var(--table-head-position, static);
+  top: var(--table-head-top, auto);
+  z-index: 100;
+  border-radius: var(--table-border-radius) var(--table-border-radius) 0 0;
+  background-color: var(--bg-elv-2);
 
-  &.head {
-    position: var(--table-head-position, static);
-    top: var(--table-head-top, auto);
-    z-index: 100;
-    background-color: var(--bg-elv);
+  .STable.has-header & {
+    border-radius: 0;
+  }
 
-    &::-webkit-scrollbar {
-      display: none;
-    }
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+.container.body {
+  border-radius: 6px 6px var(--table-border-radius) var(--table-border-radius);
+
+  .STable.has-footer & {
+    border-radius: 0;
   }
 }
 
@@ -225,14 +268,18 @@ function updateColWidth(key: string, value: string) {
 
 .row {
   display: flex;
-  border-bottom: 1px solid var(--c-divider-light);
+  border-bottom: 1px solid var(--c-divider-2);
+
+  .body &:last-child {
+    border-bottom: 0;
+  }
 }
 
 .missing {
   border-radius: 0 0 6px 6px;
   padding: 48px 32px;
   text-align: center;
-  background-color: var(--c-bg-elv-up);
+  background-color: var(--c-bg-elv-3);
   line-height: 24px;
   font-size: 14px;
   font-weight: 500;
@@ -242,7 +289,7 @@ function updateColWidth(key: string, value: string) {
 .loading {
   border-radius: 0 0 6px 6px;
   padding: 64px 32px;
-  background-color: var(--c-bg-elv-up);
+  background-color: var(--c-bg-elv-3);
 }
 
 .loading-icon {

package/lib/components/STableColumn.vue

@@ -7,12 +7,16 @@ import { isArray } from '../support/Utils'
 import SDropdown from './SDropdown.vue'
 import SIcon from './SIcon.vue'
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   name: string
   label: string
   className?: string
   dropdown?: DropdownSection[]
-}>()
+  hasHeader: boolean
+  resizable?: boolean
+}>(), {
+  resizable: true
+})
 
 const emit = defineEmits<{
   (e: 'resize', value: string): void
@@ -54,6 +58,13 @@ const buttonActive = computed(() => {
   return isOpen.value || active.value
 })
 
+const classes = computed(() => [
+  { active: active.value },
+  { 'has-header': props.hasHeader },
+  props.className,
+  `col-${props.name}`
+])
+
 watch(isOpen, (value) => {
   value ? adjustDialogPosition() : stopDialogPositionListener()
 })
@@ -112,7 +123,7 @@ function stopDialogPositionListener() {
 </script>
 
 <template>
-  <div class="STableColumn STableCell" :class="[{ active }, className, `col-${name}`]" ref="column">
+  <div class="STableColumn STableCell" :class="classes" ref="column">
     <div class="container">
       <p class="label">{{ label }}</p>
 
@@ -128,16 +139,19 @@ function stopDialogPositionListener() {
         </transition>
       </div>
 
-      <div class="grip" @mousedown="grip" />
+      <div v-if="resizable" class="grip" @mousedown="grip" />
     </div>
   </div>
 </template>
 
 <style scoped lang="postcss">
 .STableColumn {
-  border-top: 1px solid var(--c-divider-light);
   background-color: var(--c-bg-soft);
 
+  &.has-header {
+    border-top: 1px solid var(--c-divider-2);
+  }
+
   .STableItem:first-child & {
     padding-left: var(--table-padding-left);
   }
@@ -156,6 +170,7 @@ function stopDialogPositionListener() {
 
 .label {
   flex-grow: 1;
+  margin: 0;
   line-height: 40px;
   text-align: left;
   font-size: 12px;

package/lib/components/STableFooter.vue

@@ -42,7 +42,7 @@ const hasNext = computed(() => {
     <div class="container">
       <p class="info">{{ format(from) }}–{{ format(to) }} of {{ format(_total) }}</p>
 
-      <div class="actions">
+      <div v-if="onPrev && onNext" class="actions">
         <button class="button prev" :class="{ active: hasPrev }" @click="() => hasPrev && onPrev?.()">
           <SIcon :icon="IconCaretLeft" class="icon" />
         </button>
@@ -56,12 +56,11 @@ const hasNext = computed(() => {
 
 <style scoped lang="postcss">
 .STableFooter {
+  border-top: 1px solid var(--c-divider-2);
   border-radius: 0 0 6px 6px;
-  padding-top: 8px;
   padding-right: var(--table-padding-right);
-  padding-bottom: 8px;
   padding-left: var(--table-padding-left);
-  background-color: var(--c-bg-elv-up);
+  background-color: var(--c-bg-elv-3);
 
   &.borderless {
     border-radius: 0;
@@ -71,11 +70,13 @@ const hasNext = computed(() => {
 .container {
   display: flex;
   justify-content: flex-end;
+  padding-right: 16px;
+  min-height: 47px;
 }
 
 .info {
-  padding-right: 8px;
-  padding-top: 4px;
+  margin: 0;
+  padding: 13px 0 10px;
   line-height: 24px;
   font-size: 12px;
   font-weight: 500;
@@ -84,7 +85,12 @@ const hasNext = computed(() => {
 
 .actions {
   display: flex;
-  padding-right: 8px;
+  margin-right: -8px;
+  padding: 8px 0 7px;
+
+  .info + & {
+    padding-left: 8px;
+  }
 }
 
 .button {
@@ -104,7 +110,7 @@ const hasNext = computed(() => {
   }
 
   &.active:hover {
-    background-color: var(--c-bg-elv-down);
+    background-color: var(--c-bg-elv-1);
   }
 }
 

package/lib/components/STableHeader.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { format } from '../support/Num'
+import { isNullish } from '../support/Utils'
 
 defineProps<{
   total?: number | null
@@ -12,8 +13,8 @@ defineProps<{
 <template>
   <div class="STableHeader" :class="{ borderless }">
     <div class="container">
-      <p class="total">
-        {{ format(total ?? 0) }} {{ (total ?? 0) > 1 ? 'records' : 'record' }}
+      <p v-if="!isNullish(total)" class="total">
+        {{ format(total) }} {{ (total) > 1 ? 'records' : 'record' }}
       </p>
 
       <div v-if="reset" class="reset">
@@ -34,9 +35,11 @@ defineProps<{
 .container {
   display: flex;
   padding: 0 16px;
+  min-height: 48px;
 }
 
 .total {
+  margin: 0;
   padding: 13px 0 11px;
   line-height: 24px;
   font-size: 12px;
@@ -46,14 +49,17 @@ defineProps<{
 
 .reset {
   position: relative;
-  margin-left: 16px;
 
-  &::before {
+  .total + & {
+    margin-left: 16px;
+  }
+
+  .total + &::before {
     display: inline-block;
     margin-right: 16px;
     width: 1px;
     height: 16px;
-    background-color: var(--c-divider-light);
+    background-color: var(--c-divider-2);
     content: "";
     transform: translateY(4px);
   }
@@ -64,11 +70,11 @@ defineProps<{
   line-height: 24px;
   font-size: 12px;
   font-weight: 500;
-  color: var(--c-info);
+  color: var(--c-info-text);
   transition: color 0.25s;
 
   &:hover {
-    color: var(--c-info-dark);
+    color: var(--c-info-text-dark);
   }
 }
 </style>