@globalbrain/sefirot 0.70.0 → 2.0.0-draft.1

package/lib/components/SResponsive.vue

@@ -1,46 +0,0 @@
-<template>
-  <div ref="target" class="SResponsive" :class="el.classes">
-    <slot :el="el" />
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, ref, reactive, computed, PropType } from '@vue/composition-api'
-import useResizeObserver, { EL as BaseEL } from '../compositions/useResizeObserver'
-
-export interface EL extends BaseEL {
-  is: Record<string, boolean>
-}
-
-export interface BP {
-  [name: string]: (el: EL) => boolean
-}
-
-export default defineComponent({
-  props: {
-    bp: { type: Object as PropType<BP>, default: () => ({}) }
-  },
-
-  setup(props) {
-    const target = ref<HTMLElement | null>(null)
-
-    const { el: baseEl } = useResizeObserver(target)
-
-    const el = reactive({
-      ...baseEl,
-      is: computed(() => {
-        const classes: Record<string, boolean> = {}
-        for (const name in props.bp) {
-          classes[name] = props.bp[name](el)
-        }
-        return classes
-      })
-    })
-
-    return {
-      target,
-      el
-    }
-  }
-})
-</script>

package/lib/components/SScreen.vue

@@ -1,81 +0,0 @@
-<template>
-  <portal to="screen">
-    <transition name="screen">
-      <VueSimplebar v-if="show" :key="screenName" class="SScreen">
-        <div v-if="title" class="header">
-          <p class="header-title">{{ title }}</p>
-        </div>
-
-        <div class="content">
-          <slot />
-        </div>
-      </VueSimplebar>
-    </transition>
-  </portal>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent } from '@vue/composition-api'
-import VueSimplebar from 'simplebar-vue'
-import { useStore } from '../composables/Store'
-
-export default defineComponent({
-  components: {
-    VueSimplebar
-  },
-
-  props: {
-    name: { type: String, required: true },
-    title: { type: String, default: null }
-  },
-
-  setup(props) {
-    const store = useStore()
-
-    const screenName = computed(() => store.state.screen.name)
-    const show = computed(() => props.name === screenName.value)
-
-    return {
-      screenName,
-      show
-    }
-  }
-})
-</script>
-
-<style lang="postcss" scoped>
-@import "@/assets/styles/variables";
-
-.SScreen {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: var(--z-index-screen);
-  width: 100%;
-  height: 100%;
-  background-color: rgba(255, 255, 255, .5);
-  transition: opacity .25s;
-}
-
-.SScreen.screen-enter,
-.SScreen.screen-leave-to {
-  opacity: 0;
-
-  .header {
-    opacity: 0;
-    transform: translateY(8px);
-  }
-}
-
-.header {
-  padding: 64px 64px 0;
-  transition: opacity .25s, transform .25s;
-}
-
-.header-title {
-  text-align: center;
-  font-size: 20px;
-}
-</style>

package/lib/components/SStep.vue

@@ -1,107 +0,0 @@
-<template>
-  <div class="SStep" :class="[status]">
-    <div class="indicator">
-      <div class="bar" :class="[barLeft]" />
-      <div class="point">
-        <div v-if="status === 'active'" class="inner-dot" />
-        <SIconCheck v-else-if="status === 'done'" class="icon" />
-        <SIconX v-else-if="status === 'failed'" class="icon" />
-      </div>
-      <div class="bar" :class="[barRight]" />
-    </div>
-
-    <p v-if="text" class="text">{{ text }}</p>
-  </div>
-</template>
-
-<script lang="ts">
-import { PropType, defineComponent } from '@vue/composition-api'
-import { StepStatus, BarMode } from '../composables/Step'
-import SIconCheck from './icons/SIconCheck.vue'
-import SIconX from './icons/SIconX.vue'
-
-export default defineComponent({
-  components: {
-    SIconCheck,
-    SIconX
-  },
-
-  props: {
-    status: { type: String as PropType<StepStatus>, required: true },
-    barLeft: { type: String as PropType<BarMode>, default: null },
-    barRight: { type: String as PropType<BarMode>, default: null },
-    text: { type: String, default: null }
-  }
-})
-</script>
-
-<style lang="postcss" scoped>
-@import "@/assets/styles/variables";
-
-.SStep.upcoming {
-  .point { border-color: var(--c-divider); }
-  .text  { color: var(--c-text-2); }
-}
-
-.SStep.active {
-  .point { border-color: var(--c-success); }
-  .text  { color: var(--c-success); }
-}
-
-.SStep.done {
-  .point { border-color: var(--c-success); background-color: var(--c-success); }
-  .text  { color: var(--c-text-1); }
-}
-
-.SStep.failed {
-  .point { border-color: var(--c-danger); background-color: var(--c-danger); }
-  .text  { color: var(--c-danger); }
-}
-
-.indicator {
-  display: flex;
-  align-items: center;
-  width: 100%;
-}
-
-.point {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border: 1px solid transparent;
-  border-radius: 50%;
-  width: 16px;
-  height: 16px;
-}
-
-.inner-dot {
-  border-radius: 50%;
-  width: 6px;
-  height: 6px;
-  background-color: var(--c-success);
-}
-
-.icon {
-  width: 10px;
-  height: 10px;
-  fill: var(--c-white);
-}
-
-.bar {
-  width: calc(50% - 8px);
-  height: 2px;
-}
-
-.bar.mute   { background-color: var(--c-divider-light); }
-.bar.active { background-color: var(--c-success); }
-.bar.failed { background-color: var(--c-danger); }
-
-.text {
-  margin: 0;
-  padding: 8px 8px 0;
-  text-align: center;
-  line-height: 16px;
-  font-size: 12px;
-  font-weight: 500;
-}
-</style>

package/lib/components/SSteps.vue

@@ -1,75 +0,0 @@
-<template>
-  <div class="SSteps">
-    <SStep
-      v-for="(step, index) in steps"
-      :key="index"
-      class="item"
-      :style="{ width }"
-      :bar-left="getBarLeftMode(index)"
-      :bar-right="getBarRightMode(index)"
-      v-bind="step"
-    />
-  </div>
-</template>
-
-<script lang="ts">
-import { PropType, defineComponent, computed } from '@vue/composition-api'
-import { Step, BarMode } from '../composables/Step'
-import SStep from './SStep.vue'
-
-export default defineComponent({
-  components: {
-    SStep
-  },
-
-  props: {
-    steps: { type: Array as PropType<Step[]>, required: true }
-  },
-
-  setup(props) {
-    const width = computed(() => {
-      return `calc(100% / ${props.steps.length})`
-    })
-
-    function getBarLeftMode(index: number): BarMode | null {
-      if (index === 0) {
-        return null
-      }
-
-      const current = props.steps[index]
-      const prev = props.steps[index - 1]
-
-      return isActive(prev) && isActive(current) ? 'active' : 'mute'
-    }
-
-    function getBarRightMode(index: number): BarMode | null {
-      if (index === props.steps.length - 1) {
-        return null
-      }
-
-      const current = props.steps[index]
-      const next = props.steps[index + 1]
-
-      return isActive(current) && isActive(next) ? 'active' : 'mute'
-    }
-
-    function isActive(step: Step): boolean {
-      return step.status === 'active' || step.status === 'done'
-    }
-
-    return {
-      width,
-      getBarLeftMode,
-      getBarRightMode
-    }
-  }
-})
-</script>
-
-<style lang="postcss" scoped>
-@import "@/assets/styles/variables";
-
-.SSteps {
-  display: flex;
-}
-</style>

package/lib/components/STag.vue

@@ -1,67 +0,0 @@
-<template>
-  <div class="STag" :class="[size, mode]">
-    <SLink class="text" :href="link">
-      <component :is="icon" class="icon" /> {{ text }}
-    </SLink>
-  </div>
-</template>
-
-<script lang="ts">
-import { PropType, defineComponent } from '@vue/composition-api'
-import { Size, Mode } from '../composables/Tag'
-import SLink from './SLink.vue'
-
-export default defineComponent({
-  components: {
-    SLink
-  },
-
-  props: {
-    size: { type: String as PropType<Size>, default: 'small' },
-    mode: { type: String as PropType<Mode>, default: 'neutral' },
-    icon: { type: Object, default: null },
-    text: { type: String, default: null },
-    link: { type: String, default: null }
-  }
-})
-</script>
-
-<style lang="postcss" scoped>
-@import "@/assets/styles/variables";
-
-.STag.small {
-  .text {
-    line-height: 20px;
-    font-size: 12px;
-    font-weight: 500;
-  }
-
-  .icon {
-    margin-right: 6px;
-    width: 12px;
-    height: 12px;
-  }
-}
-
-.STag.info .text    { color: var(--c-info); }
-.STag.success .text { color: var(--c-success); }
-.STag.warning .text { color: var(--c-warning); }
-.STag.danger .text  { color: var(--c-danger); }
-.STag.mute .text    { color: var(--c-text-2); }
-
-.STag.info .text.link:hover    { color: var(--c-info-dark); }
-.STag.success .text.link:hover { color: var(--c-success-dark); }
-.STag.warning .text.link:hover { color: var(--c-warning-dark); }
-.STag.danger .text.link:hover  { color: var(--c-danger-dark); }
-.STag.mute .text.link:hover    { color: var(--c-info); }
-
-.text {
-  display: flex;
-  align-items: center;
-  transition: color .25s;
-}
-
-.icon {
-  fill: currentColor;
-}
-</style>

package/lib/components/STooltip.vue

@@ -1,134 +0,0 @@
-<template>
-  <component :is="tag" class="STooltip" @mouseenter="show" @mouseleave="hide">
-    <template v-if="text">
-      <span ref="content" class="STooltip-content">
-        <slot />
-      </span>
-
-      <transition name="fade">
-        <span v-show="on" ref="tip" class="STooltip-container" :class="classes">
-          <SMarkdown class="STooltip-tip" :content="text" inline />
-        </span>
-      </transition>
-    </template>
-
-    <template v-else>
-      <span class="STooltip-content">
-        <slot />
-      </span>
-    </template>
-  </component>
-</template>
-
-<script lang="ts">
-import { PropType, defineComponent, ref, computed } from '@vue/composition-api'
-import { Position, useTooltip } from '../composables/Tooltip'
-import SMarkdown from './SMarkdown.vue'
-
-export default defineComponent({
-  components: {
-    SMarkdown
-  },
-
-  props: {
-    tag: { type: String, default: 'span' },
-    text: { type: String, default: null },
-    position: { type: String as PropType<Position>, default: 'top' }
-  },
-
-  setup(props) {
-    const tip = ref<HTMLElement | null>(null)
-    const content = ref<HTMLElement | null>(null)
-
-    const classes = computed(() => [props.position])
-
-    const { on, show, hide } = useTooltip(content, tip, props.position)
-
-    return {
-      tip,
-      content,
-      classes,
-      on,
-      show,
-      hide
-    }
-  }
-})
-</script>
-
-<style lang="postcss" scoped>
-@import "@/assets/styles/variables";
-
-.STooltip {
-  position: relative;
-}
-
-.STooltip-container {
-  position: absolute;
-  display: block;
-  transition: opacity .25s;
-  z-index: var(--z-index-tooltip);
-}
-
-.STooltip-container.fade-enter,
-.STooltip-container.fade-leave-to {
-  opacity: 0;
-
-  &.top .STooltip-tip    { transform: translateY(8px); }
-  &.right .STooltip-tip  { transform: translateX(-8px); }
-  &.bottom .STooltip-tip { transform: translateY(-8px); }
-  &.left  .STooltip-tip  { transform: translateX(8px); }
-}
-
-.STooltip-container.top {
-  top: 0;
-  left: 50%;
-  padding-bottom: 8px;
-  transform: translate(-50%, -100%);
-}
-
-.STooltip-container.right {
-  top: 50%;
-  left: 100%;
-  transform: translate(8px, -50%);
-}
-
-.STooltip-container.bottom {
-  bottom: 0;
-  left: 50%;
-  padding-top: 8px;
-  transform: translate(-50%, 100%);
-}
-
-.STooltip-container.left {
-  top: 50%;
-  right: 100%;
-  transform: translate(-8px, -50%);
-}
-
-.STooltip-tip {
-  display: block;
-  border-radius: 4px;
-  padding: 12px;
-  width: max-content;
-  max-width: 288px;
-  line-height: 18px;
-  font-size: 12px;
-  font-weight: 500;
-  color: var(--c-text-dark-1);
-  background-color: rgba(0, 0, 0, .9);
-  transition: transform .25s;
-}
-
-.STooltip-tip >>> a {
-  color: var(--c-info);
-
-  &:hover {
-    color: var(--c-info-dark);
-  }
-}
-
-.STooltip-content {
-  white-space: nowrap;
-}
-</style>

package/lib/components/SWindow.vue

@@ -1,158 +0,0 @@
-<template>
-  <SModalBase :name="name" :closable="closable" @click.stop>
-    <div class="SWindow" @click.stop>
-      <button v-if="closable" class="close" @click="close">
-        <SIconX class="close-icon" />
-      </button>
-
-      <div v-if="showHeader" class="header">
-        <p class="title">{{ title }}</p>
-        <p v-if="lead" class="lead">{{ lead }}</p>
-      </div>
-
-      <div class="content">
-        <slot />
-      </div>
-
-      <div v-if="actions" class="actions">
-        <div v-for="(action, index) in actions" :key="index" class="action">
-          <SButton
-            :label="action.label"
-            :type="action.type"
-            :mode="action.mode"
-            size="large"
-            @click="action.callback"
-          />
-        </div>
-      </div>
-    </div>
-  </SModalBase>
-</template>
-
-<script lang="ts">
-import { PropType, computed, defineComponent } from '@vue/composition-api'
-import { ButtonAction } from '../composables/Action'
-import { useStore } from '../composables/Store'
-import SIconX from './icons/SIconX.vue'
-import SButton from './SButton.vue'
-import SModalBase from './SModalBase.vue'
-
-export default defineComponent({
-  components: {
-    SIconX,
-    SButton,
-    SModalBase
-  },
-
-  props: {
-    name: { type: String, required: true },
-    title: { type: String, default: null },
-    lead: { type: String, default: null },
-    actions: { type: Array as PropType<ButtonAction[]>, default: null },
-    closable: { type: Boolean, default: false }
-  },
-
-  setup(props) {
-    const store = useStore()
-
-    const showHeader = computed(() => !!props.title)
-
-    function close(): void {
-      store.dispatch('window/close')
-    }
-
-    return {
-      showHeader,
-      close
-    }
-  }
-})
-</script>
-
-<style lang="postcss" scoped>
-@import "@/assets/styles/variables";
-
-.SWindow {
-  position: relative;
-  margin: 48px 24px;
-  border-radius: 2px;
-  max-width: 768px;
-  background-color: var(--c-white);
-  box-shadow: var(--shadow-depth-5);
-  transition: opacity .25s, transform .25s;
-  transition-delay: .05s;
-
-  @media (min-width: 768px) {
-    margin: 96px auto;
-  }
-}
-
-.close {
-  position: absolute;
-  top: 0;
-  right: 0;
-  z-index: 10;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 64px;
-  height: 64px;
-
-  &:hover .close-icon {
-    fill: var(--c-black);
-  }
-}
-
-.close-icon {
-  width: 16px;
-  height: 16px;
-  fill: var(--c-gray);
-  transition: fill .25s;
-}
-
-.header {
-  border-radius: 2px 2px 0 0;
-  padding: 32px;
-  background-color: var(--c-white-soft);
-
-  @media (min-width: 768px) {
-    padding: 48px 64px 40px;
-  }
-}
-
-.title {
-  line-height: 32px;
-  text-align: center;
-  font-size: 24px;
-}
-
-.lead {
-  padding-top: 8px;
-  text-align: center;
-  color: var(--c-gray);
-}
-
-.content {
-  padding: 32px;
-
-  @media (min-width: 768px) {
-    padding: 48px 64px;
-  }
-}
-
-.actions {
-  display: flex;
-  justify-content: center;
-  padding: 32px;
-
-  @media (min-width: 768px) {
-    padding: 32px 64px 48px;
-  }
-}
-
-.action {
-  & + & {
-    padding-left: 16px;
-  }
-}
-</style>