@globalbrain/sefirot 0.72.0 → 2.0.0-draft.4

package/lib/components/SModal.vue

@@ -1,99 +1,45 @@
 <template>
-  <transition name="fade" :duration="250" appear>
-    <div ref="el" class="SModal" @click="closeIfClosable">
-      <transition name="fade">
-        <div
-          v-show="show"
-          class="SModal-content"
-          :style="contentStyles"
-          @click="closeIfClosable"
-        >
-          <component
-            :is="resolvedComponent"
-            :if="resolvedComponent"
-            v-bind="data"
-            @close="close"
-          />
-        </div>
-      </transition>
+  <div v-show="show" class="SModal" ref="el">
+    <div class="content">
+      <component :is="component" v-bind="data ?? {}" @close="close" />
     </div>
-  </transition>
+  </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { ref, onMounted, onBeforeUnmount } from 'vue'
 import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock'
-import { defineComponent, ref, computed, onMounted, onUnmounted } from '@vue/composition-api'
-import { SyntheticMouseEvent } from '../types/Utils'
 
-export default defineComponent({
-  props: {
-    component: { type: [Object, Function], default: () => ({}) },
-    data: { type: Object, default: () => ({}) },
-    uid: { type: Number, default: null },
-    show: { type: Boolean, required: true },
-    width: { type: String, default: 'auto' },
-    closable: { type: Boolean, default: true }
-  },
+const props = defineProps<{
+  id?: number
+  component: any
+  data?: Record<string, any>
+  show: boolean
+}>()
 
-  setup(props, { emit }) {
-    const el = ref<Element | null>(null)
-    const resolvedComponent = ref<any>(null)
+const emit = defineEmits<{
+  (e: 'close', id?: number): void
+}>()
 
-    props.component instanceof Function
-      ? props.component().then((module: any) => { resolvedComponent.value = module.default })
-      : (resolvedComponent.value = props.component)
+const el = ref<any>(null)
 
-    const contentStyles = computed(() => ({
-      maxWidth: props.width
-    }))
+onMounted(lock)
+onBeforeUnmount(release)
 
-    onMounted(lock)
-    onUnmounted(release)
-
-    function close() {
-      emit('close', props.uid)
-    }
-
-    function closeIfClosable(e: SyntheticMouseEvent): void {
-      if (props.closable) {
-        if (!isDescendant(e.target)) {
-          close()
-        }
-      }
-    }
-
-    function isDescendant(el: Element): boolean {
-      if (el.classList && el.classList.contains('SModal-content')) {
-        return false
-      }
-
-      const parent = document.getElementsByClassName('SModal-content')[0]
-
-      return parent && parent.contains(el)
-    }
-
-    function lock(): void {
-      disableBodyScroll(el.value!, { reserveScrollBarGap: true })
-    }
+function close() {
+  emit('close', props.id)
+}
 
-    function release(): void {
-      enableBodyScroll(el.value!)
-    }
+function lock() {
+  disableBodyScroll(el.value!, { reserveScrollBarGap: true })
+}
 
-    return {
-      el,
-      contentStyles,
-      resolvedComponent,
-      close,
-      closeIfClosable
-    }
-  }
-})
+function release() {
+  enableBodyScroll(el.value!)
+}
 </script>
 
-<style lang="postcss" scoped>
-@import "@/assets/styles/variables";
-
+<style scoped lang="postcss">
 .SModal {
   position: absolute;
   top: 0;
@@ -101,40 +47,35 @@ export default defineComponent({
   bottom: 0;
   left: 0;
   height: 100vh;
-  padding: 32px 16px 96px;
   overflow: hidden;
   overflow-y: auto;
-
-  @media (min-width: 768px) {
-    padding: 48px 24px 96px;
-  }
 }
 
-.SModal.fade-enter-active .SModal-content,
-.SModal.fade-leave-active .SModal-content,
-.SModal-content.fade-enter-active,
-.SModal-content.fade-leave-active {
+.SModal.fade-enter-active .content,
+.SModal.fade-leave-active .content,
+.content.fade-enter-active,
+.content.fade-leave-active {
   transition: opacity .25s, transform .25s;
 }
 
-.SModal.fade-enter-active .SModal-content,
-.SModal-content.fade-enter-active {
+.SModal.fade-enter-active .content,
+.content.fade-enter-active {
   transition-delay: .15s;
 }
 
-.SModal.fade-enter .SModal-content,
-.SModal-content.fade-enter {
+.SModal.fade-enter-from .content,
+.content.fade-enter-from {
   opacity: 0;
   transform: translateY(8px);
 }
 
-.SModal.fade-leave-to .SModal-content,
-.SModal-content.fade-leave-to {
+.SModal.fade-leave-to .content,
+.content.fade-leave-to {
   opacity: 0;
   transform: translateY(-8px);
 }
 
-.SModal-content {
+.content {
   margin: 0 auto;
   transition: opacity .25s, transform .25s;
 }

package/lib/components/SPortalModals.vue

@@ -1,74 +1,57 @@
 <template>
   <transition name="fade">
     <div v-if="isActive" class="SPortalModals">
-      <SModal
-        v-for="(item, index) in items"
-        :key="index"
-        :uid="item.uid"
-        :show="index === items.length - 1"
-        :component="item.component"
-        :data="item.data"
-        :width="item.options && item.options.width"
-        :closable="item.options && item.options.closable"
-        @close="uid => close(uid)"
-      />
+      <transition-group name="fade" :duration="250" appear>
+        <SModal
+          v-for="(item, index) in items"
+          :key="item.id"
+          :id="item.id"
+          :show="index === items.length - 1"
+          :component="item.component"
+          :data="item.data"
+          @close="id => close(id)"
+        />
+      </transition-group>
     </div>
   </transition>
 </template>
 
-<script lang="ts">
-import { defineComponent, ref, computed, watch } from '@vue/composition-api'
-import { useRoute } from '../composables/Router'
-import { useStore } from '../composables/Store'
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import { useStore } from 'vuex'
 import SModal from './SModal.vue'
 
-export default defineComponent({
-  components: {
-    SModal
-  },
+const route = useRoute()
+const store = useStore()
 
-  setup() {
-    const route = useRoute()
-    const store = useStore()
+const items = computed(() => store.state.modal.items)
+const hasItem = computed(() => items.value.length > 0)
 
-    const items = computed(() => store.state.modal.items)
-    const hasItem = computed(() => items.value.length > 0)
+const isActive = ref(false)
 
-    const isActive = ref(false)
+let timer: any
 
-    let timer: any
+watch(hasItem, (value) => {
+  clearTimeout(timer)
 
-    watch(hasItem, (value) => {
-      clearTimeout(timer)
-
-      value
-        ? (isActive.value = true)
-        : (timer = setTimeout(() => { isActive.value = false }, 250))
-    })
-
-    watch(route, closeAll)
+  value
+    ? (isActive.value = true)
+    : (timer = setTimeout(() => { isActive.value = false }, 250))
+})
 
-    function close(uid: number) {
-      store.dispatch('modal/close', uid)
-    }
+watch(route, closeAll)
 
-    function closeAll() {
-      store.dispatch('modal/closeAll')
-    }
+function close(id?: number) {
+  store.dispatch('modal/close', id)
+}
 
-    return {
-      items,
-      hasItem,
-      isActive,
-      close
-    }
-  }
-})
+function closeAll() {
+  store.dispatch('modal/closeAll')
+}
 </script>
 
-<style lang="postcss" scoped>
-@import "@/assets/styles/variables";
-
+<style scoped lang="postcss">
 .SPortalModals {
   position: fixed;
   top: 0;
@@ -84,8 +67,8 @@ export default defineComponent({
   transition: opacity .25s;
 }
 
-.SPortalModals.fade-enter,
-.SPortalModals.fade-leave-active {
+.SPortalModals.fade-enter-from,
+.SPortalModals.fade-leave-to {
   opacity: 0;
 }
 </style>

package/lib/components/SPortalSnackbars.vue

@@ -14,33 +14,18 @@
   </transition>
 </template>
 
-<script lang="ts">
-import { defineComponent, computed } from '@vue/composition-api'
-import { useStore } from '../composables/Store'
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useStore } from 'vuex'
 import SSnackbar from './SSnackbar.vue'
 
-export default defineComponent({
-  components: {
-    SSnackbar
-  },
+const store = useStore()
 
-  setup() {
-    const store = useStore()
-
-    const items = computed(() => store.state.snackbars.items)
-    const hasItem = computed(() => items.value.length > 0)
-
-    return {
-      items,
-      hasItem
-    }
-  }
-})
+const items = computed(() => store.state.snackbars.items)
+const hasItem = computed(() => items.value.length > 0)
 </script>
 
 <style lang="postcss" scoped>
-@import "@/assets/styles/variables";
-
 .SPortalSnackbars {
   position: fixed;
   bottom: 0;
@@ -56,7 +41,7 @@ export default defineComponent({
   }
 }
 
-.SPortalSnackbars.fade-enter {
+.SPortalSnackbars.fade-enter-from {
   opacity: 0;
   transform: translateY(48px);
 }
@@ -79,12 +64,12 @@ export default defineComponent({
   position: absolute;
 }
 
-.item.fade-up-enter,
+.item.fade-up-enter-from,
 .item.fade-up-leave-to {
   opacity: 0;
 }
 
-.item.fade-up-enter {
+.item.fade-up-enter-from {
   transform: translateY(48px);
 }
 </style>

package/lib/components/SSheet.vue

@@ -1,47 +1,92 @@
 <template>
-  <article class="SSheet" :class="[size]">
-    <slot :close="close" />
-  </article>
+  <div class="SSheet" :class="[size ?? 'medium']" @click="closeIfClosable">
+    <article class="box" @click.stop>
+      <div v-if="closable !== false" class="close">
+        <button class="close-button" @click="$emit('close')">
+          <SIconX class="close-icon" />
+        </button>
+      </div>
+
+      <slot :close="() => emit('close')" />
+    </article>
+  </div>
 </template>
 
-<script lang="ts">
-import { PropType, defineComponent } from '@vue/composition-api'
-import { useStore } from '../composables/Store'
+<script setup lang="ts">
+import SIconX from './icons/SIconX.vue'
+
+const props = defineProps<{
+  size?: 'small' | 'medium' | 'large'
+  closable?: boolean
+}>()
 
-type Size = 'small' | 'medium' | 'large'
+const emit = defineEmits<{
+  (e: 'close'): void
+}>()
 
-export default defineComponent({
-  props: {
-    size: { type: String as PropType<Size>, default: 'medium' }
-  },
+function closeIfClosable() {
+  if (props.closable !== false) {
+    emit('close')
+  }
+}
+</script>
 
-  setup() {
-    const store = useStore()
+<style scoped lang="postcss">
+.SSheet {
+  padding: 16px 16px 96px;
+  min-height: 100vh;
 
-    function close() {
-      store.dispatch('modal/close')
-    }
+  @media (min-width: 512px) {
+    padding: 32px 24px 96px;
+  }
 
-    return {
-      close
-    }
+  @media (min-width: 768px) {
+    padding: 48px 32px 128px;
   }
-})
-</script>
+}
 
-<style lang="postcss" scoped>
-@import "@/assets/styles/variables";
+.SSheet.small .box  { max-width: 392px; }
+.SSheet.medium .box { max-width: 512px; }
+.SSheet.large .box  { max-width: 768px; }
 
-.SSheet {
+.box {
+  position: relative;
   margin: 0 auto;
   border: 1px solid var(--c-divider-light);
   border-radius: 8px;
   background-color: var(--c-bg);
   box-shadow: var(--shadow-depth-3);
-  overflow: hidden;
 }
 
-.SSheet.small  { max-width: 392px; }
-.SSheet.medium { max-width: 512px; }
-.SSheet.large  { max-width: 768px; }
+.close {
+  position: absolute;
+  top: 10px;
+  right: 4px;
+  z-index: 10;
+
+  @media (min-width: 512px) {
+    top: 14px;
+    right: 12px;
+  }
+}
+
+.close-button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 48px;
+  height: 48px;
+  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/SSheetFooter.vue

@@ -4,11 +4,13 @@
   </footer>
 </template>
 
-<style lang="postcss" scoped>
-@import "@/assets/styles/variables";
-
+<style scoped lang="postcss">
 .SSheetFooter {
   border-top: 1px solid var(--c-divider-light);
   padding: 0 16px;
+
+  @media (min-width: 512px) {
+    padding: 0 24px;
+  }
 }
 </style>

package/lib/components/SSheetFooterAction.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="SSheetFooterAction">
     <SButton
-      size="medium"
-      :type="type"
-      :mode="mode"
+      size="small"
+      :type="type ?? 'primary'"
+      :mode="mode ?? 'neutral'"
       :label="label"
       block
       @click="$emit('click')"
@@ -11,22 +11,17 @@
   </div>
 </template>
 
-<script lang="ts">
-import { PropType, defineComponent } from '@nuxtjs/composition-api'
+<script setup lang="ts">
 import SButton from './SButton.vue'
 
 type Type = 'primary' | 'secondary' | 'tertiary' | 'text' | 'mute'
 type Mode = 'neutral' | 'info' | 'success' | 'warning' | 'danger'
 
-export default defineComponent({
-  components: {
-    SButton
-  },
+defineProps<{
+  type?: Type
+  mode?: Mode
+  label?: string
+}>()
 
-  props: {
-    type: { type: String as PropType<Type>, default: 'primary' },
-    mode: { type: String as PropType<Mode>, default: 'neutral' },
-    label: { type: String, default: null }
-  }
-})
+defineEmits(['click'])
 </script>

package/lib/components/SSheetFooterActions.vue

@@ -5,15 +5,13 @@
 </template>
 
 <style lang="postcss" scoped>
-@import "@/assets/styles/variables";
-
 .SSheetFooterActions {
   display: flex;
   justify-content: flex-end;
-  padding: 12px 0 11px;
+  padding: 16px 0 15px;
 }
 
-.SSheetFooterActions >>> .SSheetFooterAction + .SSheetFooterAction {
+.SSheetFooterActions :deep(.SSheetFooterAction + .SSheetFooterAction) {
   padding-left: 8px;
 }
 </style>

package/lib/components/SSheetMedium.vue

@@ -5,38 +5,30 @@
 </template>
 
 <style lang="postcss" scoped>
-@import "@/assets/styles/variables";
-
 .SSheetMedium {
-  padding: 16px;
-}
-
-.SSheetMedium >>> h1 {
-  line-height: 32px;
-  font-size: 20px;
-  font-weight: 500;
-}
+  padding: 12px 16px 20px;
 
-.SSheetMedium >>> h1 + p {
-  margin-top: 8px;
+  @media (min-width: 512px) {
+    padding: 16px 24px 26px;
+  }
 }
 
-.SSheetMedium >>> p {
+.SSheetMedium :deep(p) {
   margin: 16px 0;
   line-height: 24px;
   font-size: 14px;
   font-weight: 400;
 }
 
-.SSheetMedium >>> p:first-child {
+.SSheetMedium :deep(p:first-child) {
   margin-top: 0;
 }
 
-.SSheetMedium >>> p:last-child {
+.SSheetMedium :deep(p:last-child) {
   margin-bottom: 0;
 }
 
-.SSheetMedium >>> a {
+.SSheetMedium :deep(a) {
   font-weight: 500;
   color: var(--c-info);
   transition: color .25s;
@@ -46,22 +38,22 @@
   }
 }
 
-.SSheetMedium >>> ul {
+.SSheetMedium :deep(ul) {
   margin: 16px 0;
 }
 
-.SSheetMedium >>> ul:last-child {
+.SSheetMedium :deep(ul:last-child) {
   margin-bottom: 0;
 }
 
-.SSheetMedium >>> li {
+.SSheetMedium :deep(li) {
   position: relative;
   padding-left: 20px;
   font-size: 14px;
   font-weight: 400;
 }
 
-.SSheetMedium >>> li::before {
+.SSheetMedium :deep(li::before) {
   position: absolute;
   top: 9px;
   left: 4px;
@@ -72,11 +64,11 @@
   content: "";
 }
 
-.SSheetMedium >>> li + li {
+.SSheetMedium :deep(li + li) {
   margin-top: 4px;
 }
 
-.SSheetMedium >>> li > ul {
+.SSheetMedium :deep(li > ul) {
   margin: 4px 0 0;
 }
 </style>

package/lib/components/SSheetTitle.vue

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