@globalbrain/sefirot 0.72.0 → 2.0.0-draft.4

package/lib/components/SInputTime.vue

@@ -1,255 +0,0 @@
-<template>
-  <SInputBase
-    class="SInputTime"
-    :name="name"
-    :label="label"
-    :note="note"
-    :help="help"
-    :validation="validation"
-  >
-    <div class="box">
-      <input
-        :id="name"
-        ref="input"
-        class="input"
-        :value="value"
-        placeholder="HH:MM"
-        @click.stop
-        @blur="handleBlur"
-        @focus="openSelector"
-      >
-
-      <transition name="fade">
-        <div v-if="on" class="selectors" @click.stop>
-          <div class="selector hours">
-            <div class="title">HOUR</div>
-            <div class="values">
-              <button
-                v-for="hour in hours"
-                :key="hour"
-                class="value"
-                :class="{ active: hValue === hour }"
-                @click="setHour(hour)"
-              >
-                {{ hour }}
-              </button>
-            </div>
-          </div>
-
-          <div class="selector minutes">
-            <div class="title">MIN</div>
-            <div class="values">
-              <button
-                v-for="minute in minutes"
-                :key="minute"
-                class="value"
-                :class="{ active: mValue === minute }"
-                @click="setMin(minute)"
-              >
-                {{ minute }}
-              </button>
-            </div>
-          </div>
-        </div>
-      </transition>
-    </div>
-  </SInputBase>
-</template>
-
-<script lang="ts">
-import { defineComponent, ref, computed, onMounted, onUnmounted, PropType } from '@vue/composition-api'
-import useTime from '../compositions/useTime'
-import { SyntheticInputEvent } from '../types/Utils'
-import { Validation } from '../validation/Validation'
-import SInputBase from './SInputBase.vue'
-
-export default defineComponent({
-  components: {
-    SInputBase
-  },
-
-  model: {
-    prop: 'value',
-    event: 'change'
-  },
-
-  props: {
-    name: { type: String, default: null },
-    label: { type: String, default: null },
-    note: { type: String, default: null },
-    help: { type: String, default: null },
-    value: { type: String, default: null },
-    validation: { type: Object as PropType<Validation>, default: null }
-  },
-
-  setup(props, { emit }) {
-    const input = ref<HTMLInputElement | null>(null)
-
-    const on = ref(false)
-
-    const { hours, minutes } = useTime()
-
-    const values = computed(() => props.value ? props.value.split(':') : '00:00'.split(':'))
-    const hValue = computed(() => values.value[0])
-    const mValue = computed(() => values.value[1])
-
-    onMounted(() => {
-      window.addEventListener('click', closeSelector)
-    })
-
-    onUnmounted(() => {
-      window.removeEventListener('click', closeSelector)
-    })
-
-    function openSelector(): void {
-      on.value = true
-    }
-
-    function closeSelector(): void {
-      on.value = false
-    }
-
-    function handleBlur(e: SyntheticInputEvent): void {
-      let value: string | null = e.target.value
-
-      if (!value) {
-        value = null
-      } else if (!value.match(/^[0-2][0-3]:[0-5][0-9]$/)) {
-        value = [hValue.value, mValue.value].join(':')
-      }
-
-      emit('change', value)
-      updateInput(value ?? '')
-    }
-
-    function updateInput(value: string): void {
-      (input.value as HTMLInputElement).value = value
-    }
-
-    function setHour(hour: string): void {
-      emit('change', [hour, mValue.value].join(':'))
-    }
-
-    function setMin(minute: string): void {
-      emit('change', [hValue.value, minute].join(':'))
-    }
-
-    return {
-      input,
-      on,
-      hours,
-      minutes,
-      hValue,
-      mValue,
-      openSelector,
-      handleBlur,
-      setHour,
-      setMin
-    }
-  }
-})
-</script>
-
-<style lang="postcss" scoped>
-@import "@/assets/styles/variables";
-
-.SInputTime.has-error {
-  .input {
-    border-color: var(--c-danger);
-
-    &:focus {
-      border-color: var(--c-danger);
-    }
-  }
-}
-
-.box {
-  position: relative;
-
-  &:hover .input {
-    border-color: var(--c-gray);
-  }
-}
-
-.input {
-  display: block;
-  border: 1px solid transparent;
-  border-radius: 4px;
-  padding: 11px 16px;
-  width: 100%;
-  line-height: 24px;
-  font-size: 16px;
-  background-color: var(--c-white-mute);
-  transition: border-color .25s, background-color .25s;
-
-  &::placeholder {
-    color: var(--c-text-light-2);
-  }
-
-  &:focus {
-    border-color: var(--c-black);
-    background-color: var(--c-white);
-  }
-}
-
-.selectors {
-  position: absolute;
-  top: 56px;
-  left: 0;
-  z-index: var(--z-index-screen);
-  display: flex;
-  border-radius: 4px;
-  padding: 12px;
-  background-color: var(--c-black-elevated);
-  box-shadow: var(--shadow-depth-3);
-  transition: opacity .25s, transform .25s;
-}
-
-.selectors.fade-enter,
-.selectors.fade-leave-to {
-  opacity: 0;
-  transform: translateY(-4px);
-}
-
-.selector {
-  width: 56px;
-  text-align: center;
-}
-
-.selector + .selector {
-  margin-left: 4px;
-}
-
-.title {
-  padding-bottom: 4px;
-  font-size: 12px;
-  font-weight: 500;
-  color: var(--c-text-dark-2);
-}
-
-.values {
-  height: 178px;
-  overflow: hidden;
-  overflow-y: auto;
-}
-
-.value {
-  display: block;
-  border-radius: 2px;
-  width: 100%;
-  line-height: 32px;
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--c-text-dark-2);
-  transition: background-color .25s;
-  cursor: pointer;
-
-  &:hover {
-    background-color: var(--c-black-elevated-mute);
-  }
-
-  &.active {
-    color: var(--c-text-dark-1);
-  }
-}
-</style>

package/lib/components/SInputYear.vue

@@ -1,60 +0,0 @@
-<template>
-  <SInputNumber
-    class="SInputYear"
-    :size="size"
-    :mode="mode"
-    :name="name"
-    :label="label"
-    :note="note"
-    :help="help"
-    :placeholder="placeholder"
-    :action="action"
-    :text="text"
-    :text-after="textAfter"
-    :disabled="disabled"
-    :value="value"
-    :validation="validation"
-    @action="$emit('action')"
-    @input="v => $emit('input', v)"
-    @enter="v => $emit('enter', v)"
-    @blur="v => $emit('blur', v)"
-  />
-</template>
-
-<script lang="ts">
-import { PropType, defineComponent } from '@vue/composition-api'
-import { Validation } from '../validation/Validation'
-import SInputNumber from './SInputNumber.vue'
-
-type Size = 'medium' | 'mini'
-type Mode = 'filled' | 'outlined'
-
-interface Action {
-  type?: 'button' | 'select'
-  icon?: any
-  text?: string
-  clickable?: boolean
-}
-
-export default defineComponent({
-  components: {
-    SInputNumber
-  },
-
-  props: {
-    size: { type: String as PropType<Size>, default: 'medium' },
-    mode: { type: String as PropType<Mode>, default: 'filled' },
-    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 },
-    action: { type: Object as PropType<Action>, default: null },
-    text: { type: String, default: null },
-    textAfter: { type: String, default: null },
-    disabled: { type: Boolean, default: false },
-    value: { type: [String, Number], default: null },
-    validation: { type: Object as PropType<Validation>, default: null }
-  }
-})
-</script>

package/lib/components/SMarkdown.vue

@@ -1,56 +0,0 @@
-<template>
-  <component
-    :is="tag"
-    v-if="$scopedSlots.default"
-    ref="container"
-    class="SMarkdown-container"
-  >
-    <slot v-bind="{ rendered }" />
-  </component>
-  <component
-    :is="tag"
-    v-else
-    ref="container"
-    class="SMarkdown-container"
-    v-html="rendered"
-  />
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, nextTick, PropType, ref, watch } from '@vue/composition-api'
-import { useMarkdown, useLink, LinkCallback } from '../composables/Markdown'
-
-export default defineComponent({
-  props: {
-    content: { type: String, required: true },
-    callbacks: { type: Array as PropType<LinkCallback[]>, default: () => [] },
-    inline: { type: Boolean, default: false },
-    tag: { type: String, default: 'div' }
-  },
-
-  setup(props, { emit }) {
-    const container = ref<Element | null>(null)
-
-    const { addListeners, subscribe } = useLink({
-      container,
-      callbacks: props.callbacks
-    })
-
-    const markdown = useMarkdown()
-    const rendered = computed(() => markdown(props.content, props.inline))
-
-    watch(
-      rendered,
-      () => nextTick(() => addListeners()),
-      { immediate: true }
-    )
-
-    subscribe(payload => emit('clicked', payload))
-
-    return {
-      container,
-      rendered
-    }
-  }
-})
-</script>

package/lib/components/SPlaceholderBlank.vue

@@ -1,113 +0,0 @@
-<template>
-  <div class="SPlaceholderBlank" :class="classes">
-    <transition name="fade">
-      <div v-if="!loaded" class="loader">
-        <div class="icon">
-          <SIconPreloaderDark class="icon-svg" />
-        </div>
-      </div>
-    </transition>
-
-    <div class="content">
-      <slot />
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent } from '@vue/composition-api'
-import SIconPreloaderDark from './icons/SIconPreloaderDark.vue'
-
-export default defineComponent({
-  components: {
-    SIconPreloaderDark
-  },
-
-  props: {
-    loaded: { type: Boolean, required: true },
-    loaderPosition: { type: String, default: 'left' }
-  },
-
-  setup(props) {
-    const classes = computed(() => ({
-      loaded: props.loaded,
-      left: props.loaderPosition === 'left',
-      center: props.loaderPosition === 'center',
-      right: props.loaderPosition === 'right'
-    }))
-
-    return {
-      classes
-    }
-  }
-})
-</script>
-
-<style lang="postcss" scoped>
-@import "@/assets/styles/variables";
-
-.SPlaceholderBlank {
-  position: relative;
-  width: 100%;
-  min-height: 48px;
-}
-
-.SPlaceholderBlank.loaded {
-  .content {
-    opacity: 1;
-  }
-}
-
-.SPlaceholderBlank.left .icon {
-  top: 0;
-  left: 0;
-}
-
-.SPlaceholderBlank.center .icon {
-  top: 0;
-  left: 50%;
-  transform: translateX(-50%);
-}
-
-.SPlaceholderBlank.right .icon {
-  top: 0;
-  right: 0;
-}
-
-.loader {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  display: flex;
-  justify-content: flex-start;
-  align-items: flex-start;
-  width: 100%;
-  height: 100%;
-  transition: opacity .5s;
-}
-
-.loader.fade-enter,
-.loader.fade-leave-to {
-  opacity: 0;
-}
-
-.icon {
-  position: absolute;
-  display: block;
-  width: 48px;
-  height: 48px;
-}
-
-.icon-svg {
-  display: block;
-  width: 48px;
-  height: 48px;
-}
-
-.content {
-  opacity: 0;
-  transition: opacity .25s;
-}
-</style>

package/lib/components/SPlaceholderImage.vue

@@ -1,83 +0,0 @@
-<template>
-  <SPlaceholderBlank class="SPlaceholderImage" :loaded="isLoaded">
-    <div class="placeholder" :style="styles" />
-
-    <div class="img">
-      <img class="img-src" :src="img" :alt="alt" @load="handleLoad">
-    </div>
-  </SPlaceholderBlank>
-</template>
-
-<script lang="ts">
-import { computed, ref, defineComponent } from '@vue/composition-api'
-import SPlaceholderBlank from './SPlaceholderBlank.vue'
-
-export default defineComponent({
-  components: {
-    SPlaceholderBlank
-  },
-
-  props: {
-    img: { type: String, required: true },
-    alt: { type: String, default: '' },
-    width: { type: Number, required: true },
-    height: { type: Number, required: true },
-    delay: { type: Number, default: 0 }
-  },
-
-  setup(props, { emit }) {
-    const isLoaded = ref(false)
-
-    const styles = computed(() => ({
-      paddingBottom: `calc((${props.height} / ${props.width}) * 100%)`
-    }))
-
-    function handleLoad(): void {
-      setTimeout(() => {
-        isLoaded.value = true
-
-        emit('load')
-      }, props.delay)
-    }
-
-    return {
-      isLoaded,
-      styles,
-      handleLoad
-    }
-  }
-})
-</script>
-
-<style lang="postcss" scoped>
-@import "@/assets/styles/variables";
-
-.SPlaceholderImage {
-  position: relative;
-  width: 100%;
-}
-
-.SPlaceholderImage.loaded {
-  .img {
-    opacity: 1;
-  }
-}
-
-.SPlaceholderImage >>> .loader {
-  justify-content: center;
-  align-items: center;
-  border: 1px solid var(--c-divider-light);
-}
-
-.img {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  opacity: 0;
-  transition: opacity .5s;
-}
-</style>

package/lib/components/SPortalScreens.vue

@@ -1,62 +0,0 @@
-<template>
-  <div class="SPortalScreens">
-    <portal-target name="screen" />
-  </div>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, watch } from '@vue/composition-api'
-import { useRoute } from '../composables/Router'
-import { useStore } from '../composables/Store'
-
-type Styles = Record<'paddingRight' | 'top' | 'position', string | null>
-
-export default defineComponent({
-  setup() {
-    const store = useStore()
-    const route = useRoute()
-
-    const screenName = computed(() => store.state.screen.name)
-
-    watch(screenName, (value) => { value === null ? close() : open() })
-
-    watch(route, () => { store.dispatch('screen/close') })
-
-    function close(): void {
-      setTimeout(() => {
-        const scrollY = document.body.style.top
-
-        setBodyStyles({
-          paddingRight: null,
-          top: null,
-          position: null
-        })
-
-        window.scrollTo(0, parseInt(scrollY || '0') * -1)
-      }, 300)
-    }
-
-    function open(): void {
-      const scrollBarWidth = getScrollbarWidth()
-
-      setBodyStyles({
-        paddingRight: `${scrollBarWidth}px`,
-        top: `-${window.scrollY}px`,
-        position: 'fixed'
-      })
-    }
-
-    function setBodyStyles(styles: Styles): void {
-      Object.assign(document.body.style, styles)
-    }
-
-    function getScrollbarWidth(): number {
-      return window.innerWidth - document.documentElement.clientWidth
-    }
-
-    return {
-      screenName
-    }
-  }
-})
-</script>

package/lib/components/SProgressBar.vue

@@ -1,89 +0,0 @@
-<template>
-  <div class="SProgressBar">
-    <div class="bar">
-      <div class="bar-bg">
-        <div class="bar-line" :style="styles" />
-      </div>
-    </div>
-
-    <p class="number">
-      {{ progressForNumber }}<span class="number-unit">%</span>
-    </p>
-  </div>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent } from '@vue/composition-api'
-
-export default defineComponent({
-  props: {
-    now: { type: Number, required: true },
-    max: { type: Number, required: true }
-  },
-
-  setup(props) {
-    const progress = computed(() => {
-      const value = props.now / props.max
-      const pow = 10 ** 4
-
-      return Math.round(value * pow) / pow
-    })
-
-    const progressForNumber = computed(() => (progress.value * 100).toFixed(2))
-
-    const styles = computed<Partial<CSSStyleDeclaration>>(() => ({
-      transform: `scaleX(${progress.value})`
-    }))
-
-    return {
-      styles,
-      progressForNumber
-    }
-  }
-})
-</script>
-
-<style lang="postcss" scoped>
-@import "@/assets/styles/variables";
-
-.SProgressBar {
-  display: flex;
-  width: 100%;
-}
-
-.bar {
-  flex-grow: 1;
-}
-
-.bar-bg {
-  border-radius: 2px;
-  width: 100%;
-  height: 16px;
-  background-color: var(--c-white-mute);
-  overflow: hidden;
-}
-
-.bar-line {
-  border-radius: 2px;
-  height: 16px;
-  background-color: var(--c-black);
-  transform-origin: 0 50%;
-  transition: transform .25s;
-}
-
-.number {
-  flex-shrink: 0;
-  width: 64px;
-  text-align: right;
-  line-height: 16px;
-  font-family: var(--font-family-number);
-  font-size: 14px;
-}
-
-.number-unit {
-  display: inline-block;
-  margin-left: 2px;
-  font-size: 12px;
-  color: var(--c-gray);
-}
-</style>