@globalbrain/sefirot 0.72.0 → 2.0.0-draft.1

package/lib/components/SGrid.vue

@@ -1,237 +0,0 @@
-<template>
-  <div class="SGrid">
-    <div v-if="$slots.header" class="header">
-      <slot name="header" />
-    </div>
-
-    <VueSimplebar class="body">
-      <div v-if="$slots.columns" class="columns">
-        <div class="columns-row">
-          <slot name="columns" />
-        </div>
-      </div>
-
-      <div v-if="records.length > 0" class="body-records" :class="{ loading }">
-        <div
-          v-for="record in records"
-          :key="record[primaryKey]"
-          class="row"
-          :class="{ clickable }"
-          role="button"
-          @click="handleClick(record)"
-        >
-          <slot :record="record" />
-
-          <div v-if="actions" class="actions">
-            <component
-              :is="actionComponent"
-              :action="actions"
-              :actions="actions"
-            />
-          </div>
-        </div>
-      </div>
-
-      <div v-else class="body-empty">
-        <slot name="empty" />
-      </div>
-    </VueSimplebar>
-
-    <div v-if="$slots.footer" class="footer">
-      <slot name="footer" />
-    </div>
-
-    <transition name="fade">
-      <div v-if="loading" class="body-loading">
-        <SIconPreloaderDark class="body-loading-icon" />
-      </div>
-    </transition>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, computed } from '@vue/composition-api'
-import VueSimplebar from 'simplebar-vue'
-import { isArray } from '../support/Util'
-import SIconPreloaderDark from './icons/SIconPreloaderDark.vue'
-import SGridActionLink from './SGridActionLink.vue'
-import SGridActionSingle from './SGridActionSingle.vue'
-import SGridActionMulti from './SGridActionMulti.vue'
-
-export default defineComponent({
-  components: {
-    VueSimplebar,
-    SIconPreloaderDark
-  },
-
-  props: {
-    primaryKey: { type: String, default: 'id' },
-    records: { type: Array, required: true },
-    actions: { type: [String, Object, Array], default: null },
-    clickable: { type: Boolean, default: true },
-    loading: { type: Boolean, default: false }
-  },
-
-  setup(props, { emit }) {
-    const actionComponent = computed(() => {
-      if (typeof props.actions === 'string') {
-        return SGridActionLink
-      }
-
-      if (isArray(props.actions)) {
-        return SGridActionMulti
-      }
-
-      return SGridActionSingle
-    })
-
-    function handleClick(record: object): void {
-      props.clickable && emit('click', record)
-    }
-
-    return {
-      actionComponent,
-      handleClick
-    }
-  }
-})
-</script>
-
-<style lang="postcss" scoped>
-@import "@/assets/styles/variables";
-
-.SGrid {
-  border-radius: 8px;
-  background-color: var(--c-bg);
-  box-shadow: var(--shadow-depth-1);
-}
-
-.columns {
-  display: inline-flex;
-}
-
-.columns-row {
-  display: inline-flex;
-  padding: 0 12px;
-
-  & >>> .cell {
-    flex-grow: 1;
-    flex-shrink: 0;
-    padding: 16px 12px 12px;
-    font-size: 12px;
-    font-weight: 700;
-    color: var(--c-text-light-2);
-  }
-}
-
-.body {
-  position: relative;
-  overflow: hidden;
-  overflow-x: auto;
-}
-
-.body-records {
-  display: inline-flex;
-  flex-direction: column;
-  border-top: 1px solid var(--c-divider-lighter);
-  min-width: 100%;
-
-  & >>> .row {
-    display: flex;
-    border-top: 1px solid var(--c-divider-lighter);
-    padding: 22px 12px 21px;
-    transition: background-color .25s;
-    cursor: default;
-
-    &:first-child {
-      border-top: 0;
-    }
-
-    &:hover {
-      background-color: var(--c-white-soft);
-    }
-
-    &.clickable {
-      cursor: pointer;
-    }
-  }
-
-  & >>> .cell {
-    flex-shrink: 0;
-    margin: 0;
-    padding: 0 12px;
-    line-height: 20px;
-    font-size: 14px;
-    color: var(--c-text-light-1);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-
-    a {
-      color: var(--c-info-light);
-      transition: color .25s;
-
-      &:hover {
-        color: var(--c-info-dark);
-      }
-    }
-  }
-
-  & >>> .cell-main {
-    margin: 0;
-    width: 100%;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  & >>> .cell-sub {
-    margin: 0;
-    width: 100%;
-    font-size: 12px;
-    font-weight: 500;
-    color: var(--c-text-light-2);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  & >>> .actions {
-    flex-grow: 1;
-    height: 100%;
-  }
-}
-
-.body-empty {
-  border-top: 1px solid var(--c-divider-lighter);
-  min-width: 100%;
-}
-
-.footer {
-  border-top: 1px solid var(--c-divider);
-}
-
-.body-loading {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  background-color: var(--c-bg);
-  transition: opacity .25s, transform .25s;
-}
-
-.body-loading.fade-enter,
-.body-loading.fade-leave-to {
-  opacity: 0;
-}
-
-.body-loading-icon {
-  position: absolute;
-  top: 24px;
-  left: 50%;
-  width: 48px;
-  height: 48px;
-  transform: translateX(-50%);
-}
-</style>

package/lib/components/SGridActionLink.vue

@@ -1,53 +0,0 @@
-<template>
-  <div class="SGridActionLink">
-    <div class="icon">
-      <SIconChevronRight class="icon-svg" />
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from '@vue/composition-api'
-import SIconChevronRight from './icons/SIconChevronRight.vue'
-
-export default defineComponent({
-  components: {
-    SIconChevronRight
-  }
-})
-</script>
-
-<style lang="postcss" scoped>
-@import "@/assets/styles/variables";
-
-.SGridActionLink {
-  display: flex;
-  justify-content: flex-end;
-  padding-right: 8px;
-}
-
-.icon {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 20px;
-  height: 20px;
-  transition: transform .25s;
-}
-
-.SGrid .row:hover .icon {
-  transform: translateX(4px);
-
-  .icon-svg {
-    fill: var(--c-gray);
-  }
-}
-
-.icon-svg {
-  display: block;
-  width: 16px;
-  height: 16px;
-  fill: var(--c-gray-light-1);
-  transition: fill .25s;
-}
-</style>

package/lib/components/SGridActionMulti.vue

@@ -1,139 +0,0 @@
-<template>
-  <div class="SGridActionMulti">
-    <div class="menu">
-      <SIconMoreHorizontal class="menu-icon" />
-    </div>
-
-    <div class="actions">
-      <STooltip
-        v-for="(action, index) in actions"
-        :key="index"
-        class="action"
-        :style="actionStyles(index)"
-        :text="action.name"
-        position="top"
-      >
-        <div class="action-content">
-          <component :is="action.icon" class="action-icon" />
-        </div>
-      </STooltip>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from '@vue/composition-api'
-import SIconMoreHorizontal from './icons/SIconMoreHorizontal.vue'
-import STooltip from './STooltip.vue'
-
-export default defineComponent({
-  components: {
-    SIconMoreHorizontal,
-    STooltip
-  },
-
-  props: {
-    actions: { type: Array, required: true }
-  },
-
-  setup(props) {
-    function actionStyles(index: number): Partial<CSSStyleDeclaration> {
-      const size = props.actions.length
-      const sec = (size - (index + 1)) * 0.1
-
-      return {
-        transition: `background-color .25s, opacity .25s ${sec}s, transform .25s ${sec}s`
-      }
-    }
-
-    return {
-      actionStyles
-    }
-  }
-})
-</script>
-
-<style lang="postcss" scoped>
-@import "@/assets/styles/variables";
-
-.SGridActionMulti {
-  position: relative;
-  display: flex;
-  justify-content: flex-end;
-  margin: -6px 0;
-  padding-right: 8px;
-}
-
-.SGrid .row:hover {
-  .menu {
-    opacity: 0;
-  }
-
-  .action {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.menu {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 50%;
-  width: 32px;
-  height: 32px;
-  transition: opacity .25s;
-}
-
-.menu-icon {
-  display: block;
-  width: 12px;
-  height: 12px;
-  fill: var(--c-gray);
-  transition: fill .25s;
-}
-
-.actions {
-  position: absolute;
-  top: 0;
-  right: 8px;
-  display: flex;
-}
-
-.action {
-  border-radius: 50%;
-  opacity: 0;
-  transform: translateY(-8px);
-
-  & + & {
-    margin-left: 4px;
-  }
-
-  &:hover {
-    background-color: var(--c-gray-light-3);
-
-    .action-icon {
-      fill: var(--c-black);
-    }
-  }
-
-  &:active {
-    background-color: var(--c-gray-light-2);
-  }
-}
-
-.action-content {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 32px;
-  height: 32px;
-}
-
-.action-icon {
-  width: 14px;
-  height: 14px;
-  fill: var(--c-gray);
-  transition: fill .25s;
-}
-</style>

package/lib/components/SGridActionSingle.vue

@@ -1,64 +0,0 @@
-<template>
-  <div class="SGridActionSingle">
-    <button class="icon" @click.stop="action.callback">
-      <component :is="action.icon" class="icon-svg" />
-    </button>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from '@vue/composition-api'
-
-export default defineComponent({
-  props: {
-    action: { type: Object, required: true }
-  }
-})
-</script>
-
-<style lang="postcss" scoped>
-@import "@/assets/styles/variables";
-
-.SGridActionSingle {
-  display: flex;
-  justify-content: flex-end;
-  margin: -6px 0;
-  padding-right: 8px;
-}
-
-.icon {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 50%;
-  width: 32px;
-  height: 32px;
-  transition: background-color .25s;
-}
-
-.SGrid .row:hover .icon {
-  .icon-svg {
-    fill: var(--c-gray);
-  }
-
-  &:hover {
-    background-color: var(--c-gray-light-3);
-  }
-
-  &:hover .icon-svg {
-    fill: var(--c-black);
-  }
-
-  &:active {
-    background-color: var(--c-gray-light-2);
-  }
-}
-
-.icon-svg {
-  display: block;
-  width: 12px;
-  height: 12px;
-  fill: var(--c-gray-light-1);
-  transition: fill .25s;
-}
-</style>

package/lib/components/SHeader.vue

@@ -1,180 +0,0 @@
-<template>
-  <div class="SHeader" :class="[size, mode]">
-    <div class="main">
-      <div class="primary">
-        <component :is="icon" v-if="icon" class="SHeader-icon" />
-        <p v-if="title" class="title">{{ title }}</p>
-        <slot />
-      </div>
-
-      <div class="actions">
-        <div
-          v-for="(action, index) in cActions"
-          :key="index"
-          class="action"
-          :class="[`gap-${action.gap}`]"
-        >
-          <SAction :action="action" />
-        </div>
-
-        <slot name="after-actions" />
-      </div>
-    </div>
-
-    <div v-if="cTags.length > 0" class="sub">
-      <div class="tags">
-        <div v-for="(tag, index) in cTags" :key="index" class="tag">
-          <STag v-bind="tag" />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { PropType, defineComponent, computed } from '@vue/composition-api'
-import { Size, Mode, Search, Action, Tag } from '../composables/Header'
-import SAction from './SAction.vue'
-import STag from './STag.vue'
-
-export default defineComponent({
-  components: {
-    SAction,
-    STag
-  },
-
-  props: {
-    size: { type: String as PropType<Size>, default: 'medium' },
-    mode: { type: String as PropType<Mode>, default: 'neutral' },
-    icon: { type: Object, default: null },
-    title: { type: String, default: null },
-    search: { type: Object as PropType<Search>, default: null },
-    actions: { type: Array as PropType<Action[]>, default: () => [] },
-    tags: { type: Array as PropType<Tag[]>, default: () => [] }
-  },
-
-  setup(props) {
-    const cActions = computed(() => {
-      return props.actions.map(action => ({
-        size: 'small',
-        ...action
-      }))
-    })
-
-    const cTags = computed(() => {
-      return props.tags.map(tag => ({
-        size: 'small',
-        ...tag
-      }))
-    })
-
-    return {
-      cActions,
-      cTags
-    }
-  }
-})
-</script>
-
-<style lang="postcss" scoped>
-@import "@/assets/styles/variables";
-
-.SHeader {
-  flex-shrink: 0;
-}
-
-.SHeader.small {
-  .SHeader-icon {
-    margin-right: 8px;
-    width: 16px;
-    height: 16px;
-  }
-
-  .title {
-    line-height: 32px;
-    font-size: 14px;
-  }
-
-  .tags { margin: 0 -8px; }
-  .tag  { padding: 0 8px; }
-}
-
-.SHeader.medium {
-  .SHeader-icon {
-    margin-right: 8px;
-    width: 16px;
-    height: 16px;
-  }
-
-  .title {
-    line-height: 32px;
-    font-size: 16px;
-  }
-
-  .tags { margin: 0 -8px; }
-  .tag  { padding: 0 8px; }
-}
-
-.SHeader.large {
-  .SHeader-icon {
-    margin-right: 8px;
-    width: 16px;
-    height: 16px;
-  }
-
-  .title {
-    line-height: 32px;
-    font-size: 20px;
-  }
-
-  .tags { margin: 0 -8px; }
-  .tag  { padding: 0 8px; }
-}
-
-.SHeader.neutral .title { color: var(--c-text-1); }
-.SHeader.info .title    { color: var(--c-text-1); }
-.SHeader.success .title { color: var(--c-text-1); }
-.SHeader.warning .title { color: var(--c-text-1); }
-.SHeader.danger .title  { color: var(--c-danger); }
-
-.SHeader.neutral .SHeader-icon { fill: var(--c-text-1); }
-.SHeader.info .SHeader-icon    { fill: var(--c-info); }
-.SHeader.success .SHeader-icon { fill: var(--c-success); }
-.SHeader.warning .SHeader-icon { fill: var(--c-warning); }
-.SHeader.danger .SHeader-icon  { fill: var(--c-danger); }
-
-.main {
-  display: flex;
-}
-
-.primary {
-  display: flex;
-  align-items: center;
-  flex-grow: 1;
-}
-
-.title {
-  font-weight: 500;
-}
-
-.actions {
-  display: flex;
-  align-items: center;
-}
-
-.action        { padding-left: 8px; }
-.action.gap-4  { padding-left: 4px; }
-.action.gap-8  { padding-left: 8px; }
-.action.gap-12 { padding-left: 12px; }
-.action.gap-16 { padding-left: 16px; }
-.action.gap-24 { padding-left: 24px; }
-.action.gap-32 { padding-left: 32px; }
-
-.sub {
-  padding-top: 2px;
-}
-
-.tags {
-  display: flex;
-}
-</style>