@globalbrain/sefirot 0.65.0 → 0.68.0

package/lib/components/SInputBase.vue

@@ -24,6 +24,7 @@ export default defineComponent({
     note: { type: String, default: null },
     label: { type: String, default: null },
     help: { type: String, default: null },
+    errorMessage: { type: Boolean, default: true },
     validation: { type: Object as PropType<Validation>, default: null }
   },
 
@@ -46,7 +47,9 @@ export default defineComponent({
       return errors.length > 0 ? errors[0][1] : null
     })
 
-    const showError = computed(() => hasError.value && errorMsg.value)
+    const showError = computed(() => {
+      return props.errorMessage && hasError.value && errorMsg.value
+    })
 
     return {
       hasError,
@@ -60,8 +63,7 @@ export default defineComponent({
 <style lang="postcss" scoped>
 @import "@/assets/styles/variables";
 
-.SInputBase.mini,
-.SInputBase.small {
+.SInputBase.mini {
   .label {
     padding-bottom: 6px;
     font-size: 12px;
@@ -76,6 +78,28 @@ export default defineComponent({
   }
 }
 
+.SInputBase.small {
+  .label {
+    padding-bottom: 8px;
+    font-size: 14px;
+  }
+
+  .help-text {
+    padding-top: 4px;
+  }
+}
+
+.SInputBase.medium {
+  .label {
+    padding-bottom: 8px;
+    font-size: 14px;
+  }
+
+  .help-text {
+    padding-top: 4px;
+  }
+}
+
 .SInputBase.has-error {
   .label {
     color: var(--c-danger);
@@ -84,10 +108,8 @@ export default defineComponent({
 
 .label {
   display: block;
-  padding-bottom: 10px;
   width: 100%;
   line-height: 16px;
-  font-size: 14px;
   font-weight: 500;
   color: var(--input-label);
   cursor: pointer;

package/lib/components/SInputNumber.vue

@@ -9,13 +9,17 @@
     :help="help"
     type="number"
     :placeholder="placeholder"
+    :align="align"
     :text="text"
     :text-after="textAfter"
     :action="action"
+    :color="color"
     :step="step"
     :disabled="disabled"
     :validation="validation"
+    :display-value="displayValue"
     :value="value"
+    :error-message="errorMessage"
     @input="emitInput"
     @blur="emitBlur"
     @enter="emitEnter"
@@ -33,7 +37,7 @@
 import { defineComponent, computed, PropType } from '@vue/composition-api'
 import { isNullish } from '../support/Util'
 import { Validation } from '../validation/Validation'
-import SInputText, { Size, Mode, Action } from './SInputText.vue'
+import SInputText, { Size, Mode, Align, Color, Action } from './SInputText.vue'
 
 export default defineComponent({
   components: {
@@ -48,12 +52,16 @@ export default defineComponent({
     note: { type: String, default: null },
     help: { type: String, default: null },
     placeholder: { type: String, default: null },
+    align: { type: String as PropType<Align>, default: null },
     text: { type: String, default: null },
     textAfter: { type: String, default: null },
     action: { type: Object as PropType<Action>, default: null },
+    color: { type: Function as PropType<(value: number) => Color>, default: null },
     step: { type: Number, default: 1 },
+    separator: { type: Boolean, default: false },
     helpFormat: { type: Boolean, default: false },
     disabled: { type: Boolean, default: false },
+    errorMessage: { type: Boolean, default: true },
     value: { type: Number, default: null },
     validation: { type: Object as PropType<Validation>, default: null }
   },
@@ -69,6 +77,14 @@ export default defineComponent({
         : props.value.toLocaleString('en-US', { maximumFractionDigits: 20 })
     })
 
+    const displayValue = computed(() => {
+      if (!props.separator) {
+        return null
+      }
+
+      return valueWithSeparator.value !== '0' ? valueWithSeparator.value : null
+    })
+
     function emitInput(value: number): void {
       emit('input', value)
     }
@@ -83,6 +99,7 @@ export default defineComponent({
 
     return {
       valueWithSeparator,
+      displayValue,
       emitInput,
       emitBlur,
       emitEnter

package/lib/components/SInputRadio.vue

@@ -68,14 +68,14 @@ export default defineComponent({
 
   &:hover {
     .box {
-      border-color: var(--c-black);
+      border-color: var(--c-text-1);
     }
   }
 }
 
 .input.on {
   .box {
-    border-color: var(--c-black);
+    border-color: var(--c-text-1);
     box-shadow: var(--shadow-depth-3);
   }
 
@@ -87,7 +87,7 @@ export default defineComponent({
 
 .box {
   position: relative;
-  border: 2px solid var(--c-gray-dark-1);
+  border: 2px solid var(--c-text-3);
   border-radius: 50%;
   width: 18px;
   height: 18px;
@@ -105,7 +105,7 @@ export default defineComponent({
   align-items: center;
   border-radius: 50%;
   width: 100%;
-  background-color: var(--c-black);
+  background-color: var(--c-text-1);
   opacity: 0;
   transform: scale(0);
   transition: opacity .25s, transform .1s;
@@ -116,5 +116,6 @@ export default defineComponent({
   padding-left: 12px;
   line-height: 20px;
   font-size: 14px;
+  font-weight: 500;
 }
 </style>

package/lib/components/SInputText.vue

@@ -6,6 +6,7 @@
     :label="label"
     :note="note"
     :help="help"
+    :error-message="errorMessage"
     :validation="validation"
   >
     <div class="container">
@@ -28,14 +29,14 @@
         <input
           :id="name"
           ref="inputEl"
-          class="input"
-          :class="{ 'has-icon': icon, 'is-clearable': isClearable }"
+          class="input-area"
+          :class="inputAreaClasses"
           :style="inputStyles"
           :type="type"
           :step="step"
-          :placeholder="placeholder"
           :disabled="disabled"
           :value="value"
+          :placeholder="placeholder"
           @input="emitInput"
           @blur="emitBlur"
           @keypress.enter="emitEnter"
@@ -43,6 +44,16 @@
           @keyup.escape="$emit('escape')"
         >
 
+        <div
+          class="input"
+          :class="inputClasses"
+          :style="inputStyles"
+        >
+          <span v-if="displayValue !== null || value !== null" class="value">
+            {{ displayValue !== null ? displayValue : value }}
+          </span>
+        </div>
+
         <div v-if="icon" class="icon" role="button" @click="focus">
           <component :is="icon" class="icon-svg" />
         </div>
@@ -69,13 +80,13 @@
 
 <script lang="ts">
 import {
+  PropType,
   defineComponent,
   ref,
   reactive,
   computed,
   watch,
-  onMounted,
-  PropType
+  onMounted
 } from '@vue/composition-api'
 import { Validation } from '../validation/Validation'
 import { SyntheticInputEvent } from '../types/Utils'
@@ -84,8 +95,11 @@ import SIconChevronDown from './icons/SIconChevronDown.vue'
 import SIconX from './icons/SIconX.vue'
 import SInputBase from './SInputBase.vue'
 
-export type Size = 'medium' | 'mini'
+export type Size = 'mini' | 'small' | 'medium'
 export type Mode = 'filled' | 'outlined'
+export type Align = 'left' | 'center' | 'right'
+export type Color = 'neutral' | 'info' | 'success' | 'warning' | 'danger'
+export type ColorCallback = (value: string | number) => Color
 
 export interface Action {
   type?: 'button' | 'select'
@@ -113,11 +127,15 @@ export default defineComponent({
     placeholder: { type: String, default: null },
     action: { type: Object as PropType<Action>, default: null },
     icon: { type: Object, default: null },
+    align: { type: String as PropType<Align>, default: null },
     text: { type: String, default: null },
     textAfter: { type: String, default: null },
+    color: { type: Function as PropType<ColorCallback>, default: null },
     step: { type: Number, default: 1 },
     clearable: { type: Boolean, default: false },
     disabled: { type: Boolean, default: false },
+    errorMessage: { type: Boolean, default: true },
+    displayValue: { type: String, default: null },
     value: { type: [String, Number], default: null },
     validation: { type: Object as PropType<Validation>, default: null }
   },
@@ -126,25 +144,44 @@ export default defineComponent({
     const inputEl = ref<HTMLElement | null>(null)
     const textEl = ref<HTMLElement | null>(null)
     const textAfterEl = ref<HTMLElement | null>(null)
+    const color = ref<Color | null>(null)
 
-    const classes = computed(() => ({
-      medium: props.size === 'medium',
-      mini: props.size === 'mini',
-      filled: props.mode === 'filled',
-      outlined: props.mode === 'outlined',
-      disabled: props.disabled
-    }))
+    const classes = computed(() => [
+      props.size,
+      props.mode,
+      { disabled: props.disabled }
+    ])
 
     const inputStyles = reactive({
+      textAlign: props.align,
       paddingRight: '',
       paddingLeft: ''
     })
 
+    const isClearable = computed(() => props.clearable && !props.disabled)
+
+    const inputClasses = computed(() => [
+      color.value,
+      { 'has-icon': props.icon },
+      { 'is-clearable': isClearable.value }
+    ])
+
+    const inputAreaClasses = computed(() => ({
+      'has-icon': props.icon,
+      'is-clearable': isClearable.value
+    }))
+
     const showClearButton = computed(() => {
       return props.value !== null && props.value !== ''
     })
 
-    const isClearable = computed(() => props.clearable && !props.disabled)
+    watch(() => props.value, () => {
+      if (!props.color) {
+        return
+      }
+
+      color.value = props.color(props.value)
+    })
 
     onMounted(() => {
       setTextPadding()
@@ -205,6 +242,8 @@ export default defineComponent({
       textAfterEl,
       classes,
       inputStyles,
+      inputClasses,
+      inputAreaClasses,
       isClearable,
       showClearButton,
       focus,
@@ -242,10 +281,12 @@ export default defineComponent({
     font-size: 14px;
   }
 
-  .input {
+  .input,
+  .input-area {
     padding: 3px 12px;
     width: 100%;
     line-height: 24px;
+    min-height: 32px;
     font-size: 14px;
 
     &.has-icon {
@@ -292,6 +333,79 @@ export default defineComponent({
   }
 }
 
+.SInputText.small {
+  .action {
+    padding: 3px 10px;
+    line-height: 24px;
+  }
+
+  .action-icon {
+    width: 14px;
+    height: 14px;
+  }
+
+  .action-icon + .action-text,
+  .action-icon + .action-select,
+  .action-text + .action-select {
+    margin-left: 6px;
+  }
+
+  .action-text {
+    font-size: 14px;
+  }
+
+  .input,
+  .input-area {
+    padding: 7px 12px;
+    width: 100%;
+    line-height: 24px;
+    min-height: 40px;
+    font-size: 16px;
+
+    &.has-icon {
+      padding-left: 30px;
+    }
+
+    &.is-clearable {
+      padding-right: 40px;
+    }
+  }
+
+  .icon {
+    top: 9px;
+    left: 10px;
+  }
+
+  .icon-svg {
+    width: 14px;
+    height: 14px;
+  }
+
+  .text {
+    padding: 0 8px 0 12px;
+    line-height: 40px;
+    font-size: 16px;
+  }
+
+  .text-after {
+    padding: 0 12px 0 8px;
+    line-height: 32px;
+    font-size: 14px;
+  }
+
+  .clear {
+    top: 0;
+    right: 0;
+    width: 32px;
+    height: 32px;
+  }
+
+  .clear-svg {
+    width: 10px;
+    height: 10px;
+  }
+}
+
 .SInputText.medium {
   .action {
     padding: 11px 12px;
@@ -313,9 +427,11 @@ export default defineComponent({
     font-size: 14px;
   }
 
-  .input {
+  .input,
+  .input-area {
     padding: 11px 16px;
     width: 100%;
+    min-height: 48px;
     line-height: 24px;
     font-size: 16px;
 
@@ -374,10 +490,15 @@ export default defineComponent({
 
     &:focus {
       border-color: var(--input-focus-border);
-      background-color: var(--input-focus-bg);
+      background-color: var(--input-filled-bg-focus);
     }
   }
 
+  .input-area:focus + .input {
+    border-color: var(--input-focus-border);
+    background-color: var(--input-filled-bg-focus);
+  }
+
   &.disabled .input {
     background-color: var(--input-filled-bg-disabled);
   }
@@ -401,6 +522,11 @@ export default defineComponent({
     }
   }
 
+  .input-area:focus + .input {
+    border-color: var(--input-focus-border);
+    background-color: var(--input-filled-bg-focus);
+  }
+
   &.disabled .box:hover .input {
     border-color: var(--input-outlined-border);
   }
@@ -479,6 +605,7 @@ export default defineComponent({
   position: relative;
   display: flex;
   flex-grow: 1;
+  max-width: 100%;
 
   &:hover .input {
     border-color: var(--input-focus-border);
@@ -491,12 +618,42 @@ export default defineComponent({
   border-radius: 4px;
   color: var(--input-text);
   transition: border-color .25s, background-color .25s;
+  opacity: 1;
 
-  &::placeholder {
-    color: var(--input-placeholder);
+  .value {
+    display: block;
+    line-height: 24px;
+    overflow: hidden;
   }
 }
 
+.input-area {
+  position: absolute;
+  top: 0;
+  left: 0;
+  letter-spacing: .4px;
+  background: transparent;
+  border: 1px solid transparent;
+  color: transparent;
+
+  &:focus {
+    color: var(--c-text-1);
+  }
+
+  &:focus + .input .value {
+    opacity: 0;
+  }
+}
+
+.input,
+.input-area {
+  &.neutral { color: var(--c-black); }
+  &.info { color: var(--c-info); }
+  &.success { color: var(--c-success); }
+  &.warning { color: var(--c-warning); }
+  &.danger { color: var(--c-danger); }
+}
+
 .icon {
   position: absolute;
   cursor: text;

package/lib/components/SInputTextarea.vue

@@ -29,7 +29,7 @@ import { SyntheticInputEvent } from '../types/Utils'
 import { Validation } from '../validation/Validation'
 import SInputBase from './SInputBase.vue'
 
-type Size = 'medium' | 'mini'
+type Size = 'mini' | 'small' | 'medium'
 type Mode = 'filled' | 'outlined' | 'clear'
 
 export default defineComponent({
@@ -91,6 +91,16 @@ export default defineComponent({
   }
 }
 
+.SInputTextarea.small {
+  .input {
+    padding: 7px 12px;
+    width: 100%;
+    min-height: 88px;
+    line-height: 24px;
+    font-size: 16px;
+  }
+}
+
 .SInputTextarea.medium {
   .input {
     padding: 11px 16px;
@@ -119,6 +129,7 @@ export default defineComponent({
 .SInputTextarea.outlined {
   .input {
     border-color: var(--input-outlined-border);
+    background-color: transparent;
 
     &:hover {
       border-color: var(--input-focus-border);
@@ -126,7 +137,6 @@ export default defineComponent({
 
     &:focus {
       border-color: var(--input-focus-border);
-      background-color: var(--input-focus-bg);
     }
   }
 
@@ -160,6 +170,7 @@ export default defineComponent({
   .input {
     border-color: var(--c-danger);
 
+    &:hover,
     &:focus {
       border-color: var(--c-danger);
     }