@globalbrain/sefirot 2.0.0-draft.8 → 2.0.0

package/lib/components/SSheetFooterAction.vue

@@ -1,27 +1,34 @@
+<script setup lang="ts">
+import SButton, { Type, Mode } from './SButton.vue'
+
+defineProps<{
+  type?: Type
+  mode?: Mode
+  label: string
+  loading?: boolean
+}>()
+
+defineEmits<{
+  (e: 'click'): void
+}>()
+</script>
+
 <template>
   <div class="SSheetFooterAction">
     <SButton
-      size="small"
-      :type="type ?? 'primary'"
-      :mode="mode ?? 'neutral'"
+      size="medium"
+      :type="type"
+      :mode="mode"
       :label="label"
+      :loading="loading"
       block
       @click="$emit('click')"
     />
   </div>
 </template>
 
-<script setup lang="ts">
-import SButton from './SButton.vue'
-
-type Type = 'primary' | 'secondary' | 'tertiary' | 'text' | 'mute'
-type Mode = 'neutral' | 'info' | 'success' | 'warning' | 'danger'
-
-defineProps<{
-  type?: Type
-  mode?: Mode
-  label?: string
-}>()
-
-defineEmits(['click'])
-</script>
+<style scoped lang="postcss">
+.SSheetFooterAction {
+  min-width: 88px;
+}
+</style>

package/lib/components/SSheetFooterActions.vue

@@ -8,10 +8,7 @@
 .SSheetFooterActions {
   display: flex;
   justify-content: flex-end;
+  gap: 12px;
   padding: 16px 0 15px;
 }
-
-.SSheetFooterActions :deep(.SSheetFooterAction + .SSheetFooterAction) {
-  padding-left: 8px;
-}
 </style>

package/lib/components/SSheetForm.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="SSheetForm">
+    <slot />
+  </div>
+</template>
+
+<style scoped lang="postcss">
+.SSheetForm {
+  padding: 32px;
+
+  .SSheetTitle + & {
+    padding-top: 16px;
+  }
+}
+</style>

package/lib/components/SSheetMedium.vue

@@ -4,20 +4,17 @@
   </div>
 </template>
 
-<style lang="postcss" scoped>
+<style scoped lang="postcss">
 .SSheetMedium {
-  padding: 12px 16px 20px;
+  padding: 32px;
 
-  @media (min-width: 512px) {
-    padding: 16px 24px 26px;
+  .SSheetTitle + & {
+    padding-top: 0;
   }
 }
 
 .SSheetMedium :deep(p) {
-  margin: 16px 0;
-  line-height: 24px;
-  font-size: 14px;
-  font-weight: 400;
+  margin-bottom: 16px;
 }
 
 .SSheetMedium :deep(p:first-child) {
@@ -49,7 +46,7 @@
 .SSheetMedium :deep(li) {
   position: relative;
   padding-left: 20px;
-  font-size: 14px;
+  font-size: 16px;
   font-weight: 400;
 }
 
@@ -65,10 +62,11 @@
 }
 
 .SSheetMedium :deep(li + li) {
-  margin-top: 4px;
+  margin-top: 8px;
 }
 
 .SSheetMedium :deep(li > ul) {
   margin: 4px 0 0;
+  margin-bottom: 16px;
 }
 </style>

package/lib/components/SSheetTitle.vue

@@ -1,20 +1,13 @@
 <template>
-  <header class="SSheetTitle">
-    <h1 class="title">
-      <slot />
-    </h1>
-  </header>
+  <div class="SSheetTitle">
+    <p class="title"><slot /></p>
+  </div>
 </template>
 
-<style lang="postcss" scoped>
-.title {
-  padding: 20px 48px 0 16px;
-  line-height: 28px;
+<style scoped lang="postcss">
+.SSheetTitle {
+  padding: 32px 32px 16px;
   font-size: 20px;
-  font-weight: 500;
-
-  @media (min-width: 512px) {
-    padding: 24px 64px 0 24px;
-  }
+  font-weight: 600;
 }
 </style>

package/lib/components/SSnackbar.vue

@@ -1,77 +1,84 @@
+<script setup lang="ts">
+import { SnackbarAction, useSnackbars } from '../stores/Snackbars'
+import SButton from './SButton.vue'
+import SIconX from './icons/SIconX.vue'
+
+const props = defineProps<{
+  id: number
+  mode?: 'neutral' | 'info' | 'warning' | 'danger'
+  text: string
+  actions?: SnackbarAction[]
+}>()
+
+const snackbars = useSnackbars()
+
+function close() {
+  snackbars.pop(props.id)
+}
+</script>
+
 <template>
-  <div class="SSnackbar">
+  <div class="SSnackbar" :class="[mode ?? 'neutral']">
     <button class="close" @click="close">
       <SIconX class="close-icon" />
     </button>
 
-    <p class="content">{{ text }}</p>
+    <p class="content">
+      {{ text }}
+    </p>
 
     <div v-if="actions" class="actions">
       <div v-for="(action, index) in actions" :key="index" class="action">
         <SButton
-          :type="action.type"
+          size="medium"
+          type="text"
           :label="action.label"
-          inverse
-          @click="handleCallback(action)"
+          @click="action.onClick"
         />
       </div>
     </div>
   </div>
 </template>
 
-<script setup lang="ts">
-import { PropType } from 'vue'
-import { useStore } from 'vuex'
-import { Action } from '../store/snackbars'
-import SIconX from './icons/SIconX.vue'
-import SButton from './SButton.vue'
-
-const props = defineProps({
-  id: { type: Number, required: true },
-  text: { type: String, required: true },
-  actions: { type: Array as PropType<Action[]>, default: null }
-})
-
-const store = useStore()
-
-function close() {
-  store.dispatch('snackbars/pop', props.id)
-}
-
-function handleCallback(action: Action) {
-  action.callback()
-}
-</script>
-
-<style lang="postcss" scoped>
+<style scoped lang="postcss">
 .SSnackbar {
   position: relative;
-  border: 1px solid transparent;
-  border-radius: 4px;
+  border: 1px solid var(--c-divider-light);
+  border-radius: 6px;
   width: 100%;
-  color: var(--c-text-dark-1);
-  background-color: rgba(0, 0, 0, .9);
-  box-shadow: var(--shadow-depth-5);
-}
+  background-color: var(--c-bg-elv-up);
+  box-shadow: var(--shadow-depth-3);
+  overflow: hidden;
+
+  &::before {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: 3px;
+    content: "";
+  }
 
-.dark .SSnackbar {
-  border-color: var(--c-divider-light);
+  &.neutral::before { background-color: var(--c-gray); }
+  &.info::before    { background-color: var(--c-info); }
+  &.warning::before { background-color: var(--c-warning); }
+  &.danger::before  { background-color: var(--c-danger); }
 }
 
 .close {
   position: absolute;
-  top: 4px;
-  right: 4px;
+  top: 2px;
+  right: 0;
   z-index: 20;
   display: flex;
   justify-content: center;
   align-items: center;
   width: 48px;
-  height: 48px;
+  height: 45px;
 
   &:hover {
     .close-icon {
-      fill: var(--c-text-dark-1);
+      fill: var(--c-text-1);
     }
   }
 }
@@ -79,26 +86,29 @@ function handleCallback(action: Action) {
 .close-icon {
   width: 16px;
   height: 16px;
-  fill: var(--c-text-dark-2);
+  fill: var(--c-text-3);
   transition: fill .25s;
 }
 
 .content {
   position: relative;
   z-index: 10;
-  padding: 16px 68px 16px 20px;
+  padding: 14px 68px 14px 16px;
+  line-height: 20px;
   font-size: 14px;
+  color: var(--c-text-1);
 }
 
 .actions {
   display: flex;
   justify-content: flex-end;
+  margin-top: -8px;
   padding: 0 8px 8px;
 }
 
 .action {
   & + & {
-    padding-left: 8px;
+    padding-left: 4px;
   }
 }
 </style>

package/lib/components/{SPortalSnackbars.vue → SSnackbars.vue}

@@ -1,10 +1,18 @@
+<script setup lang="ts">
+import { useSnackbars } from '../stores/Snackbars'
+import SSnackbar from './SSnackbar.vue'
+
+const snackbars = useSnackbars()
+</script>
+
 <template>
   <transition name="fade">
-    <div v-if="hasItem" class="SPortalSnackbars">
+    <div v-if="snackbars.items.length" class="SSnackbars">
       <transition-group name="fade-up">
-        <div v-for="item in items" :key="item.id" class="item">
+        <div v-for="item in snackbars.items" :key="item.id" class="item">
           <SSnackbar
             :id="item.id"
+            :mode="item.mode"
             :text="item.text"
             :actions="item.actions"
           />
@@ -14,19 +22,8 @@
   </transition>
 </template>
 
-<script setup lang="ts">
-import { computed } from 'vue'
-import { useStore } from 'vuex'
-import SSnackbar from './SSnackbar.vue'
-
-const store = useStore()
-
-const items = computed(() => store.state.snackbars.items)
-const hasItem = computed(() => items.value.length > 0)
-</script>
-
 <style lang="postcss" scoped>
-.SPortalSnackbars {
+.SSnackbars {
   position: fixed;
   bottom: 0;
   left: 0;
@@ -34,26 +31,26 @@ const hasItem = computed(() => items.value.length > 0)
   padding: 16px;
   width: 100%;
   max-width: 560px;
-  transition: opacity .25s, transform .25s;
+  transition: opacity 0.25s, transform 0.25s;
 
   @media (min-width: 768px) {
     padding: 24px;
   }
 }
 
-.SPortalSnackbars.fade-enter-from {
+.SSnackbars.fade-enter-from {
   opacity: 0;
-  transform: translateY(48px);
+  transform: translateY(24px);
 }
 
-.SPortalSnackbars.fade-leave-to {
+.SSnackbars.fade-leave-to {
   opacity: 0;
 }
 
 .item {
   width: 100%;
   max-width: 512px;
-  transition: opacity .25s, transform .25s;
+  transition: opacity 0.25s, transform 0.25s;
 
   & + & {
     padding-top: 8px;
@@ -70,6 +67,6 @@ const hasItem = computed(() => items.value.length > 0)
 }
 
 .item.fade-up-enter-from {
-  transform: translateY(48px);
+  transform: translateY(24px);
 }
 </style>

package/lib/components/SStep.vue

@@ -0,0 +1,106 @@
+<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 setup lang="ts">
+import { PropType } from 'vue'
+import { StepStatus, BarMode } from '../composables/Step'
+import SIconCheck from './icons/SIconCheck.vue'
+import SIconX from './icons/SIconX.vue'
+
+defineProps({
+  status: { type: String as PropType<StepStatus>, required: true },
+  barLeft: { type: String as PropType<BarMode | null>, default: null },
+  barRight: { type: String as PropType<BarMode | null>, default: null },
+  text: { type: String, default: null }
+})
+</script>
+
+<style lang="postcss" scoped>
+.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

@@ -0,0 +1,59 @@
+<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 setup lang="ts">
+import { computed, PropType } from 'vue'
+import { Step, BarMode } from '../composables/Step'
+import SStep from './SStep.vue'
+
+const props = defineProps({
+  steps: { type: Array as PropType<Step[]>, required: true }
+})
+
+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'
+}
+</script>
+
+<style lang="postcss" scoped>
+.SSteps {
+  display: flex;
+}
+</style>