@globalbrain/sefirot 2.10.0 → 2.12.0

package/lib/components/SInputBase.vue

@@ -74,7 +74,7 @@ const showError = computed(() => {
 
 .SInputBase.has-error {
   .label {
-    color: var(--c-danger);
+    color: var(--input-error-text-color);
   }
 }
 
@@ -83,7 +83,7 @@ const showError = computed(() => {
   width: 100%;
   line-height: 16px;
   font-weight: 500;
-  color: var(--c-text-1);
+  color: var(--input-label-color);
   cursor: pointer;
   transition: color 0.25s;
 }
@@ -107,8 +107,8 @@ const showError = computed(() => {
   line-height: 18px;
   font-size: 12px;
   font-weight: 500;
-  color: var(--c-danger);
-  transition: opacity .25s, transform .25s;
+  color: var(--input-error-text-color);
+  transition: opacity 0.25s, transform 0.25s;
 }
 
 .help-text {

package/lib/components/SInputCheckboxes.vue

@@ -71,4 +71,3 @@ function handleChange(value: unknown): void {
   padding: 2px 8px;
 }
 </style>
-

package/lib/components/SInputDate.vue

@@ -29,7 +29,7 @@ function emitInput(date?: string) {
   emit('update:modelValue', date ? day(date) : null)
 }
 
-function emitBlur(e: FocusEvent) {
+function emitBlur() {
   setTimeout(() => {
     props.validation && props.validation.$touch()
   }, 100)

package/lib/components/SInputDropdown.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import IconCaretDown from '@iconify-icons/ph/caret-down'
-import IconCaretUp from '@iconify-icons/ph/caret-up'
+import IconCaretDown from '@iconify-icons/ph/caret-down-bold'
+import IconCaretUp from '@iconify-icons/ph/caret-up-bold'
 import xor from 'lodash-es/xor'
 import { computed } from 'vue'
 import { DropdownSectionFilter } from '../composables/Dropdown'

package/lib/components/SInputNumber.vue

@@ -17,24 +17,32 @@ const props = defineProps<{
   align?: Align
   separator?: boolean
   disabled?: boolean
-  modelValue: number | null
+  value?: number | null
+  modelValue?: number | null
   displayValue?: string | null
   hideError?: boolean
   validation?: Validatable
 }>()
 
 const emit = defineEmits<{
-  (e: 'update:modelValue', value: number | null): void
+  (e: 'update:model-value', value: number | null): void
+  (e: 'input', value: number | null): void
 }>()
 
+const _value = computed(() => {
+  return props.modelValue !== undefined
+    ? props.modelValue
+    : props.value !== undefined ? props.value : null
+})
+
 const valueWithSeparator = computed(() => {
-  if (isNullish(props.modelValue)) {
+  if (isNullish(_value.value)) {
     return null
   }
 
-  return props.modelValue >= 100000000000000000000
+  return _value.value >= 100000000000000000000
     ? 'The number is too big'
-    : props.modelValue.toLocaleString('en-US', { maximumSignificantDigits: 20 })
+    : _value.value.toLocaleString('en-US', { maximumSignificantDigits: 20 })
 })
 
 const displayValue = computed(() => {
@@ -48,7 +56,9 @@ const displayValue = computed(() => {
 })
 
 function emitUpdate(value: string | null) {
-  emit('update:modelValue', isNullish(value) ? null : Number(value))
+  const v = isNullish(value) ? null : Number(value)
+  emit('update:model-value', v)
+  emit('input', v)
 }
 </script>
 
@@ -66,8 +76,9 @@ function emitUpdate(value: string | null) {
     :disabled="disabled"
     :hide-error="hideError"
     :display-value="displayValue"
-    :model-value="String(modelValue)"
+    :model-value="_value === null ? null : String(_value)"
     :validation="validation"
     @update:model-value="emitUpdate"
+    @input="emitUpdate"
   />
 </template>

package/lib/components/SInputSelect.vue

@@ -1,48 +1,59 @@
 <script setup lang="ts">
-import IconCaretDown from '@iconify-icons/ph/caret-down'
-import IconCaretUp from '@iconify-icons/ph/caret-up'
-import { PropType, computed, ref } from 'vue'
+import IconCaretDown from '@iconify-icons/ph/caret-down-bold'
+import IconCaretUp from '@iconify-icons/ph/caret-up-bold'
+import { computed, ref } from 'vue'
 import { Validatable } from '../composables/Validation'
 import SIcon from './SIcon.vue'
 import SInputBase from './SInputBase.vue'
 
-type Size = 'mini' | 'small' | 'medium'
+export type Size = 'mini' | 'small' | 'medium'
+export type Value = string | number | boolean | null
 
-interface Option {
+export interface Option {
   label: string
-  value: boolean | number | string
+  value: string | number | boolean
   disabled?: boolean
 }
 
-const props = defineProps({
-  size: { type: String as PropType<Size>, default: 'small' },
-  label: { type: String, default: null },
-  note: { type: String, default: null },
-  help: { type: String, default: null },
-  placeholder: { type: String, default: null },
-  options: { type: Array as PropType<Option[]>, required: true },
-  disabled: { type: Boolean, default: false },
-  nullable: { type: Boolean, default: false },
-  errorMessage: { type: Boolean, default: true },
-  modelValue: { type: [String, Number, Boolean] as PropType<string | number | boolean | null>, default: null },
-  validation: { type: Object as PropType<Validatable>, default: null }
+const props = defineProps<{
+  size?: Size
+  label?: string
+  note?: string
+  help?: string
+  placeholder?: string
+  options: Option[]
+  nullable?: boolean
+  disabled?: boolean
+  value?: Value
+  modelValue?: Value
+  validation?: Validatable
+  hideError?: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:model-value', value: Value): void
+  (e: 'change', value: Value): void
+}>()
+
+const _value = computed(() => {
+  return props.modelValue !== undefined
+    ? props.modelValue
+    : props.value !== undefined ? props.value : null
 })
 
-const emit = defineEmits(['update:modelValue'])
-
 const isFocused = ref(false)
 
 const classes = computed(() => [
   props.size ?? 'small',
-  { disabled: props.disabled ?? false }
+  { disabled: props.disabled }
 ])
 
 const isNotSelected = computed(() => {
-  return props.modelValue === undefined || props.modelValue === null || props.modelValue === ''
+  return _value.value === undefined || _value.value === null || _value.value === ''
 })
 
 function isSelectedOption(option: Option): boolean {
-  return option.value === props.modelValue
+  return option.value === _value.value
 }
 
 function focus() {
@@ -54,11 +65,15 @@ function blur() {
 }
 
 function emitChange(e: any): void {
-  props.validation?.$touch()
+  if (!props.disabled) {
+    props.validation?.$touch()
 
-  const option = JSON.parse(e.target.value)
+    const input = e.target.value
+    const value = input === '__null__' ? null : JSON.parse(input).value
 
-  emit('update:modelValue', option.value)
+    emit('update:model-value', value)
+    emit('change', value)
+  }
 }
 </script>
 
@@ -69,7 +84,7 @@ function emitChange(e: any): void {
     :label="label"
     :note="note"
     :help="help"
-    :error-message="errorMessage ?? true"
+    :hide-error="hideError"
     :validation="validation"
   >
     <div class="box" :class="{ focus: isFocused }">
@@ -81,24 +96,26 @@ function emitChange(e: any): void {
         @blur="blur"
         @change="emitChange"
       >
-        <Option
+        <option
           v-if="placeholder || nullable"
-          :value="JSON.stringify({ value: null })"
+          class="option"
+          value="__null__"
           :selected="isNotSelected"
           :disabled="!nullable"
         >
           {{ placeholder || 'Please select' }}
-        </Option>
+        </option>
 
-        <Option
-          v-for="(option, index) in options"
-          :key="index"
+        <option
+          v-for="option in options"
+          :key="JSON.stringify(option)"
           :style="{ display: option.disabled ? 'none' : undefined }"
+          class="option"
           :value="JSON.stringify(option)"
           :selected="isSelectedOption(option)"
         >
           {{ option.label }}
-        </Option>
+        </option>
       </select>
 
       <div class="icon" role="button">
@@ -111,125 +128,94 @@ function emitChange(e: any): void {
 
 <style scoped lang="postcss">
 .SInputSelect.mini {
-  .box {
-    height: 32px;
-  }
+  line-height: 30px;
+  font-size: var(--input-font-size, var(--input-mini-font-size));
 
-  .select {
-    padding: 3px 30px 3px 12px;
-    line-height: 24px;
-    font-size: 14px;
-  }
-
-  .icon {
-    top: 3px;
-    right: 8px;
-  }
+  .box      { height: 32px; }
+  .select   { padding: 0 30px 0 10px; }
+  .icon     { top: 5px; right: 8px; }
+  .icon-svg { width: 12px; height: 12px; }
 }
 
 .SInputSelect.small {
-  .box {
-    height: 40px;
-  }
-
-  .select {
-    padding: 7px 30px 5px 12px;
-    line-height: 24px;
-    font-size: 16px;
-  }
+  line-height: 38px;
+  font-size: var(--input-font-size, var(--input-small-font-size));
 
-  .icon {
-    top: 7px;
-    right: 10px;
-  }
+  .box      { height: 40px; }
+  .select   { padding: 0 30px 0 12px; }
+  .icon     { top: 7px; right: 10px; }
+  .icon-svg { width: 14px; height: 14px; }
 }
 
 .SInputSelect.medium {
-  .box {
-    height: 48px;
-  }
-
-  .select {
-    padding: 11px 44px 11px 16px;
-    line-height: 24px;
-    font-size: 16px;
-  }
+  line-height: 46px;
+  font-size: var(--input-font-size, var(--input-medium-font-size));
 
-  .icon {
-    top: 11px;
-    right: 12px;
-  }
+  .box      { height: 48px; }
+  .select   { padding: 0 44px 0 16px; }
+  .icon     { top: 11px; right: 12px; }
+  .icon-svg { width: 14px; height: 14px; }
 }
 
 .SInputSelect.disabled {
   .box {
-    background-color: var(--c-bg-mute);
+    color: var(--input-disabled-value-color);
+    background-color: var(--input-disabled-bg-color);
   }
 
-  .box:hover .select {
-    cursor: not-allowed;
-  }
+  .box:hover { border-color: var(--input-border-color); }
+  .box.focus { border-color: var(--input-border-color); }
+
+  .box:hover .select { cursor: not-allowed; }
 }
 
 .SInputSelect.has-error {
-  .box {
-    border-color: var(--c-danger);
-  }
-
-  .select {
-    border-color: var(--c-danger);
-  }
+  .box { border-color: var(--input-error-border-color); }
 }
 
 .box {
   position: relative;
-  border: 1px solid var(--input-border);
-  border-radius: 4px;
+  border: 1px solid var(--input-border-color);
+  border-radius: 6px;
   width: 100%;
-  color: var(--input-text);
+  color: var(--input-value-color);
+  background-color: var(--input-bg-color);
   cursor: pointer;
-  transition: border-color .25s, background-color .25s;
+  transition: border-color 0.25s, background-color 0.25s;
 
-  &:hover,
-  &.focus {
-    border-color: var(--input-border);
-  }
-
-  &:focus:not(:focus-visible) {
-    border-color: var(--input-border);
-    outline: 0;
-  }
+  &:hover { border-color: var(--input-hover-border-color); }
+  &.focus { border-color: var(--input-focus-border-color); }
 }
 
 .select {
   position: relative;
   z-index: 20;
   display: block;
+  margin: 0;
   border: 0;
   border-radius: 4px;
   width: 100%;
+  line-height: inherit;
+  font-size: inherit;
   background-color: transparent;
   cursor: pointer;
 
   &.select.is-not-selected {
-    color: var(--input-placeholder);
-    font-weight: 500;
+    color: var(--input-placeholder-color);
   }
 }
 
+.option {
+  color: initial;
+}
+
 .icon {
   position: absolute;
   z-index: 10;
+  color: var(--c-text-2);
   cursor: pointer;
 }
 
-.icon-svg {
-  display: block;
-  width: 14px;
-  height: 14px;
-  color: var(--input-placeholder);
-}
-
 .icon-svg.up {
   margin-bottom: -4px;
 }

package/lib/components/SInputText.vue

@@ -26,6 +26,7 @@ const props = defineProps<{
 
 const emit = defineEmits<{
   (e: 'update:modelValue', value: string | null): void
+  (e: 'input', value: string | null): void
   (e: 'blur', value: string | null): void
   (e: 'enter', value: string | null): void
 }>()
@@ -35,6 +36,7 @@ const isFocused = ref(false)
 
 const classes = computed(() => [
   props.size ?? 'small',
+  props.align ?? 'left',
   { disabled: props.disabled }
 ])
 
@@ -62,7 +64,9 @@ function emitBlur(e: FocusEvent): void {
 }
 
 function emitInput(e: Event): void {
-  emit('update:modelValue', getValue(e))
+  const v = getValue(e)
+  emit('update:modelValue', v)
+  emit('input', v)
 }
 
 function emitEnter(e: KeyboardEvent): void {
@@ -237,6 +241,27 @@ function getValue(e: Event | FocusEvent | KeyboardEvent): string | null {
   }
 }
 
+.SInputText.left {
+  .input,
+  .display {
+    text-align: left;
+  }
+}
+
+.SInputText.center {
+  .input,
+  .display {
+    text-align: center;
+  }
+}
+
+.SInputText.right {
+  .input,
+  .display {
+    text-align: right;
+  }
+}
+
 .SInputText.has-error {
   .box {
     border-color: var(--c-danger);

package/lib/components/SPill.vue

@@ -0,0 +1,199 @@
+<script setup lang="ts">
+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'
+
+const props = defineProps<{
+  tag?: string
+  size?: Size
+  type?: Type
+  mode?: Mode
+  label?: string
+  clickable?: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'click'): void
+}>()
+
+const classes = computed(() => [
+  props.size ?? 'small',
+  props.type ?? 'dimm',
+  props.mode ?? 'neutral',
+  { clickable: props.clickable }
+])
+
+const computedTag = computed(() => {
+  return props.tag
+    ? props.tag
+    : props.clickable ? 'button' : 'span'
+})
+
+function onClick() {
+  props.clickable && emit('click')
+}
+</script>
+
+<template>
+  <component
+    :is="computedTag"
+    class="SPill"
+    :class="classes"
+    :role="props.clickable ? 'button' : undefined"
+    @click="onClick"
+  >
+    <span class="label">{{ label }}</span>
+  </component>
+</template>
+
+<style scoped lang="postcss">
+.SPill {
+  display: inline-block;
+  border: 1px solid transparent;
+  letter-spacing: 0.4px;
+  font-weight: 600;
+  transition: border-color 0.25s, color 0.25s, background-color 0.25s;
+}
+
+.SPill.mini {
+  border-radius: 10px;
+  padding: 0 8px;
+  line-height: 18px;
+  font-size: 12px;
+}
+
+.SPill.small {
+  border-radius: 12px;
+  padding: 0 10px;
+  line-height: 22px;
+  font-size: 12px;
+}
+
+.SPill.medium {
+  border-radius: 14px;
+  padding: 0 12px;
+  line-height: 26px;
+  font-size: 12px;
+}
+
+.SPill.large {
+  border-radius: 16px;
+  padding: 0 12px;
+  line-height: 30px;
+  font-size: 13px;
+}
+
+.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);
+
+    &.clickable:hover { background-color: var(--pill-dimm-neutral-hover-bg-color); }
+    &.clickable:active { background-color: var(--pill-dimm-neutral-active-bg-color); }
+  }
+
+  &.mute {
+    border-color: var(--pill-dimm-mute-border-color);
+    color: var(--pill-dimm-mute-text-color);
+    background-color: var(--pill-dimm-mute-bg-color);
+
+    &.clickable:hover { background-color: var(--pill-dimm-mute-hover-bg-color); }
+    &.clickable:active { background-color: var(--pill-dimm-mute-active-bg-color); }
+  }
+
+  &.info {
+    border-color: var(--pill-dimm-info-border-color);
+    color: var(--pill-dimm-info-text-color);
+    background-color: var(--pill-dimm-info-bg-color);
+
+    &.clickable:hover { background-color: var(--pill-dimm-info-hover-bg-color); }
+    &.clickable:active { background-color: var(--pill-dimm-info-active-bg-color); }
+  }
+
+  &.success {
+    border-color: var(--pill-dimm-success-border-color);
+    color: var(--pill-dimm-success-text-color);
+    background-color: var(--pill-dimm-success-bg-color);
+
+    &.clickable:hover { background-color: var(--pill-dimm-success-hover-bg-color); }
+    &.clickable:active { background-color: var(--pill-dimm-success-active-bg-color); }
+  }
+
+  &.warning {
+    border-color: var(--pill-dimm-warning-border-color);
+    color: var(--pill-dimm-warning-text-color);
+    background-color: var(--pill-dimm-warning-bg-color);
+
+    &.clickable:hover { background-color: var(--pill-dimm-warning-hover-bg-color); }
+    &.clickable:active { background-color: var(--pill-dimm-warning-active-bg-color); }
+  }
+
+  &.danger {
+    border-color: var(--pill-dimm-danger-border-color);
+    color: var(--pill-dimm-danger-text-color);
+    background-color: var(--pill-dimm-danger-bg-color);
+
+    &.clickable:hover { background-color: var(--pill-dimm-danger-hover-bg-color); }
+    &.clickable:active { background-color: var(--pill-dimm-danger-active-bg-color); }
+  }
+}
+
+.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);
+
+    &.clickable:hover { background-color: var(--pill-fill-neutral-hover-bg-color); }
+    &.clickable:active { background-color: var(--pill-fill-neutral-active-bg-color); }
+  }
+
+  &.mute {
+    border-color: var(--pill-fill-mute-border-color);
+    color: var(--pill-fill-mute-text-color);
+    background-color: var(--pill-fill-mute-bg-color);
+
+    &.clickable:hover { background-color: var(--pill-fill-mute-hover-bg-color); }
+    &.clickable:active { background-color: var(--pill-fill-mute-active-bg-color); }
+  }
+
+  &.info {
+    border-color: var(--pill-fill-info-border-color);
+    color: var(--pill-fill-info-text-color);
+    background-color: var(--pill-fill-info-bg-color);
+
+    &.clickable:hover { background-color: var(--pill-fill-info-hover-bg-color); }
+    &.clickable:active { background-color: var(--pill-fill-info-active-bg-color); }
+  }
+
+  &.success {
+    border-color: var(--pill-fill-success-border-color);
+    color: var(--pill-fill-success-text-color);
+    background-color: var(--pill-fill-success-bg-color);
+
+    &.clickable:hover { background-color: var(--pill-fill-success-hover-bg-color); }
+    &.clickable:active { background-color: var(--pill-fill-success-active-bg-color); }
+  }
+
+  &.warning {
+    border-color: var(--pill-fill-warning-border-color);
+    color: var(--pill-fill-warning-text-color);
+    background-color: var(--pill-fill-warning-bg-color);
+
+    &.clickable:hover { background-color: var(--pill-fill-warning-hover-bg-color); }
+    &.clickable:active { background-color: var(--pill-fill-warning-active-bg-color); }
+  }
+
+  &.danger {
+    border-color: var(--pill-fill-danger-border-color);
+    color: var(--pill-fill-danger-text-color);
+    background-color: var(--pill-fill-danger-bg-color);
+
+    &.clickable:hover { background-color: var(--pill-fill-danger-hover-bg-color); }
+    &.clickable:active { background-color: var(--pill-fill-danger-active-bg-color); }
+  }
+}
+</style>

package/lib/components/SSnackbar.vue

@@ -113,4 +113,3 @@ function close() {
   }
 }
 </style>
-