@globalbrain/sefirot 0.72.0 → 2.0.0-draft.1

package/lib/components/SInputSelect.vue

@@ -1,298 +0,0 @@
-<template>
-  <SInputBase
-    class="SInputSelect"
-    :class="classes"
-    :name="name"
-    :label="label"
-    :note="note"
-    :help="help"
-    :validation="validation"
-    :error-message="errorMessage"
-  >
-    <div class="box" :class="{ focus: isFocused }">
-      <select
-        :id="name"
-        class="select"
-        :class="{ 'is-not-selected': isNotSelected }"
-        :disabled="disabled"
-        @focus="focus"
-        @blur="blur"
-        @change="emitChange"
-      >
-        <option
-          v-if="placeholder || nullable"
-          :value="JSON.stringify({ value: null })"
-          :selected="isNotSelected"
-          :disabled="!nullable"
-        >
-          {{ placeholder || 'Please select' }}
-        </option>
-
-        <option
-          v-for="option in options"
-          :key="option.value"
-          :style="{ display: option.disabled ? 'none' : null }"
-          :value="JSON.stringify(option)"
-          :selected="isSelectedOption(option)"
-        >
-          {{ option.label }}
-        </option>
-      </select>
-
-      <div class="icon" role="button">
-        <SIconChevronUp class="icon-svg up" />
-        <SIconChevronDown class="icon-svg down" />
-      </div>
-    </div>
-  </SInputBase>
-</template>
-
-<script lang="ts">
-import { PropType, defineComponent, ref, computed } from '@vue/composition-api'
-import { SyntheticInputEvent } from '../types/Utils'
-import SIconChevronUp from './icons/SIconChevronUp.vue'
-import SIconChevronDown from './icons/SIconChevronDown.vue'
-import SInputBase from './SInputBase.vue'
-
-type Size = 'mini' | 'small' | 'medium'
-type Mode = 'outlined' | 'filled'
-
-interface Option {
-  label: string
-  value: boolean | number | string
-  disabled?: boolean
-}
-
-export default defineComponent({
-  components: {
-    SIconChevronUp,
-    SIconChevronDown,
-    SInputBase
-  },
-
-  model: {
-    prop: 'value',
-    event: 'change'
-  },
-
-  props: {
-    size: { type: String as PropType<Size>, default: 'small' },
-    mode: { type: String as PropType<Mode>, default: 'outlined' },
-    name: { type: String, default: null },
-    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 },
-    nullable: { type: Boolean, default: false },
-    disabled: { type: Boolean, default: false },
-    errorMessage: { type: Boolean, default: true },
-    value: { type: [String, Number, Boolean], default: null },
-    validation: { type: Object, default: null }
-  },
-
-  setup(props, { emit }) {
-    const isFocused = ref(false)
-
-    const classes = computed(() => [
-      props.size,
-      props.mode,
-      { disabled: props.disabled }
-    ])
-
-    const isNotSelected = computed(() => {
-      return props.value === undefined || props.value === null || props.value === ''
-    })
-
-    function isSelectedOption(option: Option): boolean {
-      return option.value === props.value
-    }
-
-    function focus() {
-      isFocused.value = true
-    }
-
-    function blur() {
-      isFocused.value = false
-    }
-
-    function emitChange(e: SyntheticInputEvent): void {
-      props.validation?.$touch()
-
-      const option = JSON.parse(e.target.value)
-
-      emit('change', option.value)
-    }
-
-    return {
-      isFocused,
-      classes,
-      isNotSelected,
-      isSelectedOption,
-      focus,
-      blur,
-      emitChange
-    }
-  }
-})
-</script>
-
-<style lang="postcss" scoped>
-@import "@/assets/styles/variables";
-
-.SInputSelect.mini {
-  .box {
-    height: 32px;
-  }
-
-  .select {
-    padding: 3px 30px 3px 12px;
-    line-height: 24px;
-    font-size: 14px;
-  }
-
-  .icon {
-    top: 3px;
-    right: 8px;
-  }
-}
-
-.SInputSelect.small {
-  .box {
-    height: 40px;
-  }
-
-  .select {
-    padding: 7px 30px 5px 12px;
-    line-height: 24px;
-    font-size: 16px;
-  }
-
-  .icon {
-    top: 7px;
-    right: 10px;
-  }
-}
-
-.SInputSelect.medium {
-  .box {
-    height: 48px;
-  }
-
-  .select {
-    padding: 11px 44px 11px 16px;
-    line-height: 24px;
-    font-size: 16px;
-  }
-
-  .icon {
-    top: 11px;
-    right: 12px;
-  }
-}
-
-.SInputSelect.filled {
-  .box {
-    background-color: var(--input-filled-bg);
-
-    &:hover,
-    &.focus {
-      border-color: var(--input-focus-border);
-    }
-  }
-
-  &.disabled .box:hover {
-    border-color: transparent;
-  }
-
-  &.disabled .select {
-    background-color: var(--input-filled-bg-disabled);
-    opacity: 1;
-  }
-}
-
-.SInputSelect.outlined {
-  &.has-error {
-    .box {
-      border-color: var(--c-danger);
-    }
-  }
-
-  .box {
-    border-color: var(--input-outlined-border);
-
-    &:hover,
-    &.focus {
-      border-color: var(--input-focus-border);
-    }
-
-    &:focus:not(:focus-visible) {
-      border-color: var(--input-focus-border);
-      outline: 0;
-    }
-  }
-
-  &.disabled .box:hover {
-    border-color: var(--input-outlined-border);
-  }
-
-  &.disabled .select {
-    background-color: var(--input-outlined-bg-disabled);
-    opacity: 1;
-  }
-}
-
-.SInputSelect.disabled {
-  .box:hover .select {
-    cursor: not-allowed;
-  }
-}
-
-.SInputSelect.has-error {
-  .select {
-    border-color: var(--c-danger);
-  }
-}
-
-.box {
-  position: relative;
-  border: 1px solid transparent;
-  border-radius: 4px;
-  width: 100%;
-  color: var(--input-text);
-  cursor: pointer;
-  transition: border-color .25s, background-color .25s;
-}
-
-.select {
-  position: relative;
-  z-index: 20;
-  display: block;
-  border: 0;
-  border-radius: 4px;
-  width: 100%;
-  background-color: transparent;
-  cursor: pointer;
-
-  &.select.is-not-selected {
-    color: var(--input-placeholder);
-  }
-}
-
-.icon {
-  position: absolute;
-  z-index: 10;
-  cursor: pointer;
-}
-
-.icon-svg {
-  display: block;
-  width: 14px;
-  height: 14px;
-  fill: var(--input-placeholder);
-}
-
-.icon-svg.up {
-  margin-bottom: -4px;
-}
-</style>

package/lib/components/SInputSwitch.vue

@@ -1,212 +0,0 @@
-<template>
-  <SInputBase
-    class="SInputSwitch"
-    :class="classes"
-    :name="name"
-    :label="label"
-    :note="note"
-    :help="help"
-  >
-    <div class="SInputSwitch-container">
-      <div class="SInputSwitch-input" :class="{ on: value }" role="button" @click="emitChange">
-        <p v-if="text" class="SInputSwitch-text" :class="[textMode]">{{ text }}</p>
-
-        <div class="SInputSwitch-box">
-          <div class="SInputSwitch-check" />
-        </div>
-
-        <p v-if="textAfter" class="SInputSwitch-text after" :class="[textMode]">{{ textAfter }}</p>
-      </div>
-    </div>
-  </SInputBase>
-</template>
-
-<script lang="ts">
-import { PropType, defineComponent, computed } from '@vue/composition-api'
-import SInputBase from './SInputBase.vue'
-
-type Size = 'mini' | 'small'
-type Mode = 'neutral' | 'info' | 'success' | 'warning' | 'danger'
-type TextMode = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
-
-export default defineComponent({
-  components: {
-    SInputBase
-  },
-
-  model: {
-    prop: 'value',
-    event: 'change'
-  },
-
-  props: {
-    size: { type: String as PropType<Size>, default: 'small' },
-    mode: { type: String as PropType<Mode>, default: 'neutral' },
-    name: { type: String, default: null },
-    label: { type: String, default: null },
-    note: { type: String, default: null },
-    text: { type: String, default: null },
-    textAfter: { type: String, default: null },
-    textMode: { type: String as PropType<TextMode>, default: 'neutral' },
-    disabled: { type: Boolean, default: false },
-    help: { type: String, default: null },
-    value: { type: Boolean, required: true }
-  },
-
-  setup(props, { emit }) {
-    const classes = computed(() => ({
-      mini: props.size === 'mini',
-      small: props.size === 'small',
-      neutral: props.mode === 'neutral',
-      info: props.mode === 'info',
-      success: props.mode === 'success',
-      warning: props.mode === 'warning',
-      danger: props.mode === 'danger',
-      disabled: props.disabled
-    }))
-
-    function emitChange(): void {
-      !props.disabled && emit('change', !props.value)
-    }
-
-    return {
-      classes,
-      emitChange
-    }
-  }
-})
-</script>
-
-<style lang="postcss" scoped>
-@import "@/assets/styles/variables";
-
-.SInputSwitch.mini {
-  .SInputSwitch-box {
-    margin: 1px 0 0;
-    border-radius: 9px;
-    width: 36px;
-    height: 18px;
-  }
-
-  .SInputSwitch-check {
-    top: 2px;
-    left: 2px;
-    width: 12px;
-    height: 12px;
-    transition: background-color .25s, transform .25s;
-  }
-}
-
-.SInputSwitch.small {
-  .SInputSwitch-box {
-    margin: -1px 0 -1px;
-    border-radius: 11px;
-    width: 40px;
-    height: 22px;
-  }
-
-  .SInputSwitch-check {
-    top: 2px;
-    left: 2px;
-    width: 16px;
-    height: 16px;
-    transition: background-color .25s, transform .25s;
-  }
-}
-
-.SInputSwitch.neutral .SInputSwitch-input.on .SInputSwitch-box {
-  border-color: var(--c-black);
-  background-color: var(--c-black);
-}
-
-.SInputSwitch.info .SInputSwitch-input.on .SInputSwitch-box {
-  border-color: var(--c-info);
-  background-color: var(--c-info);
-}
-
-.SInputSwitch.success .SInputSwitch-input.on .SInputSwitch-box {
-  border-color: var(--c-success);
-  background-color: var(--c-success);
-}
-
-.SInputSwitch.warning .SInputSwitch-input.on .SInputSwitch-box {
-  border-color: var(--c-warning);
-  background-color: var(--c-warning);
-}
-
-.SInputSwitch.danger .SInputSwitch-input.on .SInputSwitch-box {
-  border-color: var(--c-danger);
-  background-color: var(--c-danger);
-}
-
-.SInputSwitch.disabled .SInputSwitch-input {
-  .SInputSwitch-box {
-    cursor: not-allowed;
-    opacity: .6;
-  }
-
-  &:hover .SInputSwitch-box { border-color: var(--c-gray); }
-}
-
-.SInputSwitch.disabled .SInputSwitch-input.on {
-  &:hover .SInputSwitch-box { border-color: transparent; }
-}
-
-.SInputSwitch-container {
-  display: flex;
-}
-
-.SInputSwitch-input {
-  position: relative;
-  display: flex;
-  justify-content: space-between;
-  width: 100%;
-
-  &:hover {
-    .SInputSwitch-box   { border-color: var(--c-black); }
-    .SInputSwitch-check { background-color: var(--c-black); }
-  }
-}
-
-.SInputSwitch-input.on .SInputSwitch-check {
-  background-color: var(--c-white);
-  transform: translateX(18px);
-}
-
-.SInputSwitch-text {
-  flex-grow: 1;
-  margin: 0;
-  padding-right: 16px;
-  line-height: 20px;
-  font-size: 14px;
-}
-
-.SInputSwitch-text.mute {
-  color: var(--c-text-light-2);
-  font-weight: 500;
-}
-
-.SInputSwitch-text.info    { color: var(--c-info); }
-.SInputSwitch-text.success { color: var(--c-success); }
-.SInputSwitch-text.warning { color: var(--c-warning); }
-.SInputSwitch-text.danger  { color: var(--c-danger); }
-
-.SInputSwitch-text.after {
-  padding-left: 12px;
-}
-
-.SInputSwitch-box {
-  position: relative;
-  flex-shrink: 0;
-  border: 1px solid var(--c-gray);
-  background-color: var(--c-white-mute);
-  transition: border-color .25s, background-color .25s, box-shadow .25s;
-}
-
-.SInputSwitch-check {
-  position: absolute;
-  border-radius: 50%;
-  background-color: var(--c-black);
-  transition: background-color .25s, transform .25s;
-}
-</style>

package/lib/components/SInputSwitches.vue

@@ -1,108 +0,0 @@
-<template>
-  <SInputBase
-    class="SInputSwitches"
-    :class="classes"
-    :name="name"
-    :label="label"
-    :note="note"
-    :help="help"
-  >
-    <div class="SInputSwitches-container">
-      <div class="SInputSwitches-row">
-        <div v-for="option in options" :key="option.value" class="SInputSwitches-col">
-          <SInputSwitch
-            :size="size"
-            :mode="mode"
-            :text="option.label"
-            :value="isChecked(option.value)"
-            @change="handleChange(option.value)"
-          />
-        </div>
-      </div>
-    </div>
-  </SInputBase>
-</template>
-
-<script lang="ts">
-import { PropType, defineComponent, computed } from '@vue/composition-api'
-import SInputBase from './SInputBase.vue'
-import SInputSwitch from './SInputSwitch.vue'
-
-type Size = 'mini' | 'small'
-type Mode = 'neutral' | 'info' | 'success' | 'warning' | 'danger'
-
-interface Option {
-  label: string
-  value: unknown
-}
-
-export default defineComponent({
-  components: {
-    SInputBase,
-    SInputSwitch
-  },
-
-  model: {
-    prop: 'value',
-    event: 'change'
-  },
-
-  props: {
-    size: { type: String as PropType<Size>, default: 'small' },
-    mode: { type: String as PropType<Mode>, default: 'neutral' },
-    name: { type: String, default: null },
-    label: { type: String, default: null },
-    note: { type: String, default: null },
-    help: { type: String, default: null },
-    options: { type: Array as PropType<Option[]>, required: true },
-    value: { type: Array as PropType<unknown[]>, required: true }
-  },
-
-  setup(props, { emit }) {
-    const classes = computed(() => [
-      props.size,
-      props.mode
-    ])
-
-    function isChecked(value: unknown): boolean {
-      return props.value.includes(value)
-    }
-
-    function handleChange(value: unknown): void {
-      const difference = props.value
-        .filter(v => v !== value)
-        .concat(props.value.includes(value) ? [] : [value])
-
-      emit('change', difference)
-    }
-
-    return {
-      classes,
-      isChecked,
-      handleChange
-    }
-  }
-})
-</script>
-
-<style lang="postcss" scoped>
-@import "@/assets/styles/variables";
-
-.SInputSwitches.mini {
-  .SInputSwitches-row { margin: -2px -8px; }
-  .SInputSwitches-col { padding: 2px 8px; }
-}
-
-.SInputSwitches.small {
-  .SInputSwitches-row { margin: -4px -8px; }
-  .SInputSwitches-col { padding: 4px 8px; }
-}
-
-.SInputSwitches-container {
-  display: flex;
-}
-
-.SInputSwitches-row {
-  width: 100%;
-}
-</style>