@globalbrain/sefirot 0.72.0 → 2.0.0-draft.4

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/SSheetHeader.vue

@@ -1,75 +0,0 @@
-<template>
-  <header class="SSheetHeader">
-    <slot />
-
-    <div v-if="closable" class="close">
-      <button class="close-button" @click="close">
-        <SIconX class="close-icon" />
-      </button>
-    </div>
-  </header>
-</template>
-
-<script lang="ts">
-import { defineComponent } from '@vue/composition-api'
-import { useStore } from '../composables/Store'
-import SIconX from './icons/SIconX.vue'
-
-export default defineComponent({
-  components: {
-    SIconX
-  },
-
-  props: {
-    closable: { type: Boolean, default: true }
-  },
-
-  setup() {
-    const store = useStore()
-
-    function close() {
-      store.dispatch('modal/close')
-    }
-
-    return {
-      close
-    }
-  }
-})
-</script>
-
-<style lang="postcss" scoped>
-@import "@/assets/styles/variables";
-
-.SSheetHeader {
-  display: flex;
-  justify-content: space-between;
-  border-bottom: 1px solid var(--c-divider-light);
-  min-height: 48px;
-  background-color: var(--c-bg-soft);
-}
-
-.close {
-  margin: 0 0 0 auto;
-}
-
-.close-button {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 48px;
-  height: 47px;
-  color: var(--c-text-3);
-  transition: color .25s;
-
-  &:hover {
-    color: var(--c-text-1);
-  }
-}
-
-.close-icon {
-  width: 20px;
-  height: 20px;
-  fill: currentColor;
-}
-</style>

package/lib/components/SSheetHeaderTitle.vue

@@ -1,17 +0,0 @@
-<template>
-  <h1 class="SSheetHeaderTitle">
-    <slot />
-  </h1>
-</template>
-
-<style lang="postcss" scoped>
-@import "@/assets/styles/variables";
-
-.SSheetHeaderTitle {
-  margin: 0;
-  padding: 14px 16px 10px;
-  line-height: 20px;
-  font-size: 14px;
-  font-weight: 500;
-}
-</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>