@globalbrain/sefirot 0.72.0 → 2.0.0-draft.4

package/lib/components/SAlert.vue

@@ -1,145 +0,0 @@
-<template>
-  <div class="SAlert" :class="[type]">
-    <SCard :collapsable="false" :depth="3">
-      <div class="container">
-        <div class="icon">
-          <component :is="icon" class="icon-svg" />
-        </div>
-
-        <div class="content">
-          <p class="title">{{ title }}</p>
-          <p class="text">{{ text }}</p>
-
-          <div class="actions">
-            <div v-for="(action, index) in actions" :key="index" class="action">
-              <SButton
-                size="small"
-                :type="action.type"
-                :mode="action.mode"
-                :icon="action.icon"
-                :label="action.label"
-                @click="action.callback"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </SCard>
-  </div>
-</template>
-
-<script lang="ts">
-import { PropType, defineComponent, computed } from '@vue/composition-api'
-import { Action, AlertMode, AlertModes } from '../composables/Alert'
-import SIconInfo from './icons/SIconInfo.vue'
-import SIconCheckCircle from './icons/SIconCheckCircle.vue'
-import SIconWarning from './icons/SIconWarning.vue'
-import SIconXCircle from './icons/SIconXCircle.vue'
-import SButton from './SButton.vue'
-import SCard from './SCard.vue'
-
-export default defineComponent({
-  components: {
-    SButton,
-    SCard
-  },
-
-  props: {
-    type: { type: String as PropType<AlertMode>, default: AlertModes.Info },
-    title: { type: String, default: null },
-    text: { type: String, default: null },
-    actions: { type: Array as PropType<Action[]>, default: () => [] }
-  },
-
-  setup(props) {
-    const icon = computed(() => {
-      switch (props.type) {
-        case AlertModes.Info:
-          return SIconInfo
-        case AlertModes.Success:
-          return SIconCheckCircle
-        case AlertModes.Warning:
-          return SIconWarning
-        case AlertModes.Danger:
-          return SIconXCircle
-      }
-    })
-
-    return {
-      icon
-    }
-  }
-})
-</script>
-
-<style lang="postcss" scoped>
-@import "@/assets/styles/variables";
-
-.SAlert {
-  margin: 64px 16px;
-  border-radius: 8px;
-  max-width: 512px;
-
-  @media (min-width: 544px) {
-    margin: 64px auto;
-  }
-}
-
-.SAlert.info .icon-svg    { fill: var(--c-info); }
-.SAlert.success .icon-svg { fill: var(--c-success); }
-.SAlert.warning .icon-svg { fill: var(--c-warning); }
-.SAlert.danger .icon-svg  { fill: var(--c-danger); }
-
-.container {
-  @media (min-width: 544px) {
-    display: flex;
-  }
-}
-
-.icon {
-  padding: 16px 16px 8px;
-
-  @media (min-width: 544px) {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-shrink: 0;
-    padding: 0;
-    width: 64px;
-    height: 64px;
-  }
-}
-
-.icon-svg {
-  width: 24px;
-  height: 24px;
-}
-
-.content {
-  padding: 0 16px 16px;
-
-  @media (min-width: 544px) {
-    flex-grow: 1;
-    padding: 20px 24px 20px 0;
-  }
-}
-
-.title {
-  font-size: 16px;
-  font-weight: 500;
-}
-
-.text {
-  font-size: 14px;
-}
-
-.actions {
-  display: flex;
-  justify-content: flex-end;
-  padding-top: 16px;
-}
-
-.action + .action {
-  padding-left: 8px;
-}
-</style>

package/lib/components/SButtonGroup.vue

@@ -1,160 +0,0 @@
-<template>
-  <div class="SButtonGroup" :class="classes">
-    <button
-      v-for="item in items"
-      :key="item.value"
-      class="button"
-      :class="getButtonClasses(item)"
-      @click="handleClick(item.value)"
-    >
-      <span class="content">
-        {{ item.label }}
-      </span>
-    </button>
-  </div>
-</template>
-
-<script lang="ts">
-import { PropType, defineComponent, computed } from '@vue/composition-api'
-
-interface ButtonGroupItem {
-  label: string
-  value: string
-  mode: Mode
-}
-
-type Mode = 'neutral' | 'info' | 'success' | 'warning' | 'danger'
-type Size = 'mini' | 'small' | 'medium' | 'large' | 'jumbo'
-
-export default defineComponent({
-  model: {
-    prop: 'value',
-    event: 'change'
-  },
-
-  props: {
-    items: { type: Array as PropType<ButtonGroupItem[]>, required: true },
-    size: { type: String as PropType<Size>, default: 'medium' },
-    value: { type: String, default: null }
-  },
-
-  setup(props, { emit }) {
-    const classes = computed(() => [props.size])
-
-    function getButtonClasses(button: ButtonGroupItem) {
-      return [
-        { active: button.value === props.value },
-        button.mode ?? 'neutral'
-      ]
-    }
-
-    function handleClick(value: string) {
-      emit('change', value)
-    }
-
-    return {
-      classes,
-      getButtonClasses,
-      handleClick
-    }
-  }
-})
-</script>
-
-<style lang="postcss" scoped>
-.SButtonGroup {
-  display: flex;
-  border: 1px solid var(--c-divider);
-  border-radius: 4px;
-  overflow: hidden;
-}
-
-.SButtonGroup.mini {
-  height: 28px;
-
-  .button {
-    padding: 0 8px;
-    height: 28px;
-    font-size: 12px;
-    font-weight: 500;
-  }
-}
-
-.SButtonGroup.small {
-  height: 32px;
-
-  .button {
-    padding: 0 10px;
-    height: 32px;
-    font-size: 12px;
-    font-weight: 500;
-  }
-}
-
-.SButtonGroup.medium {
-  height: 40px;
-
-  .button {
-    padding: 0 12px;
-    height: 40px;
-    font-size: 13px;
-    font-weight: 500;
-  }
-}
-
-.SButtonGroup.large {
-  height: 48px;
-
-  .button {
-    padding: 0 14px;
-    height: 48px;
-    font-size: 14px;
-    font-weight: 500;
-  }
-}
-
-.SButtonGroup.jumbo {
-  height: 64px;
-
-  .button {
-    padding: 0 24px;
-    height: 64px;
-    font-size: 14px;
-    font-weight: 500;
-  }
-}
-
-.button {
-  border-left: 1px solid transparent;
-  letter-spacing: .4px;
-  color: var(--c-text-2);
-  white-space: nowrap;
-  transition: color .25s, background-color .25s;
-
-  &:hover {
-    color: var(--c-text-1);
-  }
-}
-
-.button:not(:first-child) {
-  border-left: 1px solid var(--c-divider);
-}
-
-.button.active {
-  color: var(--c-text-dark-1);
-}
-
-.button.neutral.active { background-color: var(--c-black); }
-.button.info.active    { background-color: var(--c-info); }
-.button.success.active { background-color: var(--c-success); }
-.button.warning.active { background-color: var(--c-warning); }
-.button.danger.active  { background-color: var(--c-danger); }
-
-.content {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-}
-</style>

package/lib/components/SCard.vue

@@ -1,111 +0,0 @@
-<template>
-  <div class="SCard" :class="classes">
-    <div v-if="header" class="header">
-      <SCardHeader
-        :is-collapsed="isCollapsed"
-        :title="header.title"
-        :actions="header.actions"
-        :mode="header.mode"
-        :collapsable="collapsable"
-        @collapse="toggleCollapse"
-      />
-    </div>
-
-    <div class="content">
-      <slot />
-    </div>
-
-    <div v-if="showFooter" class="footer">
-      <SCardFooter :actions="footer.actions" />
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { PropType, defineComponent, ref, computed } from '@vue/composition-api'
-import { Header, Footer, Mode } from '../composables/Card'
-import { get } from '../composables/Utils'
-import SCardHeader from './SCardHeader.vue'
-import SCardFooter from './SCardFooter.vue'
-
-export default defineComponent({
-  components: {
-    SCardHeader,
-    SCardFooter
-  },
-
-  props: {
-    header: { type: Object as PropType<Header>, default: null },
-    footer: { type: Object as PropType<Footer>, default: null },
-    mode: { type: String as PropType<Mode>, default: 'neutral' },
-    round: { type: Number, default: 8 },
-    depth: { type: Number, default: 0 },
-    collapsable: { type: Boolean, default: true }
-  },
-
-  setup(props) {
-    const isCollapsed = ref(false)
-    const showFooter = computed(() => {
-      const actions = get(props.footer?.actions) ?? []
-
-      return actions.length > 0
-    })
-
-    const classes = computed(() => [
-      { collapsed: isCollapsed.value },
-      props.mode,
-      `round-${props.round}`,
-      `depth-${props.depth}`
-    ])
-
-    function toggleCollapse(): void {
-      isCollapsed.value = !isCollapsed.value
-    }
-
-    return {
-      isCollapsed,
-      showFooter,
-      classes,
-      toggleCollapse
-    }
-  }
-})
-</script>
-
-<style lang="postcss" scoped>
-@import "@/assets/styles/variables";
-
-.SCard {
-  border: 1px solid transparent;
-  background-color: var(--card-bg);
-}
-
-.SCard.neutral { border-color: var(--c-divider-light); }
-.SCard.info    { border-color: var(--c-info); }
-.SCard.success { border-color: var(--c-success); }
-.SCard.warning { border-color: var(--c-warning); }
-.SCard.danger  { border-color: var(--c-danger); }
-
-.SCard.collapsed {
-  height: 48px;
-  overflow: hidden;
-}
-
-.SCard.round-4 { border-radius: 4px; }
-.SCard.round-8 { border-radius: 8px; }
-
-.SCard.depth-0 { box-shadow: none; }
-.SCard.depth-1 { box-shadow: var(--card-shadow-depth-1); }
-.SCard.depth-2 { box-shadow: var(--card-shadow-depth-2); }
-.SCard.depth-3 { box-shadow: var(--card-shadow-depth-3); }
-.SCard.depth-4 { box-shadow: var(--card-shadow-depth-4); }
-.SCard.depth-5 { box-shadow: var(--card-shadow-depth-5); }
-
-.content {
-  position: relative;
-}
-
-.footer {
-  overflow: hidden;
-}
-</style>

package/lib/components/SCardFooter.vue

@@ -1,74 +0,0 @@
-<template>
-  <div class="SCardFooter" :class="classes">
-    <div v-if="unwrappedActions.length > 0" class="actions">
-      <div v-for="(action, index) in unwrappedActions" :key="index" class="action">
-        <SButton
-          size="small"
-          :type="action.type"
-          :mode="action.mode"
-          :icon="action.icon"
-          :label="action.label"
-          block
-          @click="action.callback ? action.callback() : () => {}"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, PropType, computed } from '@vue/composition-api'
-import { Refish, get } from '../composables/Utils'
-import { Action } from '../composables/Card'
-import SButton from './SButton.vue'
-
-export default defineComponent({
-  components: {
-    SButton
-  },
-
-  props: {
-    actions: { type: [Object, Array] as PropType<Refish<Action[]>>, required: true },
-    round: { type: Number, default: 8 }
-  },
-
-  setup(props) {
-    const classes = computed(() => [
-      `round-${props.round}`
-    ])
-
-    const unwrappedActions = computed(() => get(props.actions))
-
-    return {
-      classes,
-      unwrappedActions
-    }
-  }
-})
-</script>
-
-<style lang="postcss" scoped>
-@import "@/assets/styles/variables";
-
-.SCardFooter {
-  border-top: 1px solid var(--c-divider-light);
-  padding: 16px 16px 15px;
-  background-color: var(--card-bg);
-}
-
-.SCardFooter.round-4 { border-radius: 0 0 4px 4px; }
-.SCardFooter.round-8 { border-radius: 0 0 8px 8px; }
-
-.actions {
-  display: flex;
-  justify-content: flex-end;
-}
-
-.action {
-  min-width: 96px;
-}
-
-.action + .action {
-  margin-left: 8px;
-}
-</style>

package/lib/components/SCardHeader.vue

@@ -1,213 +0,0 @@
-<template>
-  <div class="SCardHeader" :class="classes">
-    <div class="title">
-      <p v-if="title" class="title-text">{{ title }}</p>
-    </div>
-
-    <div class="actions">
-      <template v-if="unwrapedActions.length > 0">
-        <template v-for="(action, index) in unwrapedActions">
-          <SToolTip :key="index" :text="action.disabled">
-            <component
-              :is="action.link ? 'a' : 'button'"
-              class="action"
-              :class="[action.mode || 'neutral', { disabled: action.disabled }]"
-              :href="action.link ? action.link : null"
-              @click.prevent="handleCallback(action)"
-            >
-              <component :is="getIcon(action.icon, !!action.disabled)" class="action-icon" />
-            </component>
-          </SToolTip>
-        </template>
-      </template>
-
-      <div v-if="collapsable" class="action action-collapse">
-        <button class="collapse" @click="$emit('collapse')">
-          <SIconChevronDown class="collapse-icon" />
-        </button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { PropType, defineComponent, computed } from '@vue/composition-api'
-import { useRouter } from '../composables/Router'
-import { Refish, get } from '../composables/Utils'
-import { Action, ActionIconType, Mode } from '../composables/Card'
-import SIconPlus from './icons/SIconPlus.vue'
-import SIconPlusOff from './icons/SIconPlusOff.vue'
-import SIconEdit3 from './icons/SIconEdit3.vue'
-import SIconEdit3Off from './icons/SIconEdit3Off.vue'
-import SIconTrash2 from './icons/SIconTrash2.vue'
-import SIconTrash2Off from './icons/SIconTrash2Off.vue'
-import SIconChevronDown from './icons/SIconChevronDown.vue'
-import SToolTip from './STooltip.vue'
-
-export default defineComponent({
-  components: {
-    SIconChevronDown,
-    SToolTip
-  },
-
-  props: {
-    isCollapsed: { type: Boolean, required: true },
-    title: { type: String, default: null },
-    actions: { type: [Array, Object] as PropType<Refish<Action[]>>, default: () => [] },
-    mode: { type: String as PropType<Mode>, default: 'neutral' },
-    round: { type: Number, default: 8 },
-    collapsable: { type: Boolean, required: true }
-  },
-
-  setup(props) {
-    const router = useRouter()
-
-    const classes = computed(() => [
-      { collapsed: props.isCollapsed },
-      props.mode,
-      `round-${props.round}`
-    ])
-
-    const unwrapedActions = computed(() => get(props.actions))
-
-    function getIcon(icon: ActionIconType | object, disabled: boolean) {
-      if (typeof icon === 'object') {
-        return icon
-      }
-
-      if (icon === 'plus') {
-        return disabled ? SIconPlusOff : SIconPlus
-      }
-
-      if (icon === 'edit-3') {
-        return disabled ? SIconEdit3Off : SIconEdit3
-      }
-
-      if (icon === 'trash-2') {
-        return disabled ? SIconTrash2Off : SIconTrash2
-      }
-
-      throw new Error(`[sefirot] Invalid icon type: ${icon}.`)
-    }
-
-    function handleCallback(action: Action): void {
-      if (action.disabled) {
-        return
-      }
-
-      if (action.link) {
-        router.push(action.link)
-        return
-      }
-
-      action.callback?.()
-    }
-
-    return {
-      classes,
-      unwrapedActions,
-      getIcon,
-      handleCallback
-    }
-  }
-})
-</script>
-
-<style lang="postcss" scoped>
-@import "@/assets/styles/variables";
-
-.SCardHeader {
-  display: flex;
-  padding: 8px 8px 7px 16px;
-  border-bottom: 1px solid var(--c-divider-light);
-  background-color: var(--card-bg-mute);
-}
-
-.SCardHeader.collapsed {
-  border-bottom-color: transparent;
-}
-
-.SCardHeader.collapsed .collapse {
-  transform: rotate(0);
-}
-
-.SCardHeader.collapsed .collapse-icon {
-  transform: translateY(1px);
-}
-
-.SCardHeader.round-0 { border-radius: none; }
-.SCardHeader.round-4 { border-radius: 4px 4px 0 0; }
-.SCardHeader.round-8 { border-radius: 8px 8px 0 0; }
-
-.title {
-  flex-grow: 1;
-}
-
-.title-text {
-  line-height: 32px;
-  font-size: 14px;
-  font-weight: 500;
-}
-
-.actions {
-  display: flex;
-}
-
-.action {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-shrink: 0;
-  border-radius: 4px;
-  width: 32px;
-  height: 32px;
-  color: var(--c-text-2);
-  cursor: pointer;
-  transition: color .25s, background-color .25s;
-
-  &:hover {
-    background-color: var(--c-gray-light-4);
-  }
-}
-
-.action.neutral:hover { color: var(--c-text-1); }
-.action.info:hover    { color: var(--c-info); }
-.action.success:hover { color: var(--c-success); }
-.action.warning:hover { color: var(--c-warning); }
-.action.danger:hover  { color: var(--c-danger); }
-
-.action.disabled:hover {
-  color: var(--c-text-2);
-  background-color: transparent;
-  cursor: not-allowed;
-}
-
-.action-icon {
-  width: 16px;
-  height: 16px;
-  fill: currentColor;
-}
-
-.collapse {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 4px;
-  width: 32px;
-  height: 32px;
-  color: var(--c-text-3);
-  transform: rotate(180deg);
-  transition: color .25s, background-color .25s;
-
-  &:hover {
-    color: var(--c-text-2);
-    background-color: var(--c-gray-light-4);
-  }
-}
-
-.collapse-icon {
-  width: 20px;
-  height: 20px;
-  fill: currentColor;
-}
-</style>