@globalbrain/sefirot 2.0.0-draft.7 → 2.0.0

package/lib/components/SDialog.vue

@@ -1,140 +0,0 @@
-<template>
-  <div class="SDialog" :class="{ 'load-only': isLoadOnly }">
-    <p v-if="title" class="title">{{ title }}</p>
-    <p v-if="text" class="text">{{ text }}</p>
-
-    <div v-if="isTypeLoading" class="load">
-      <div class="load-icon">
-        <SIconPreloader class="load-svg" />
-      </div>
-    </div>
-
-    <div v-if="actions.length > 0" class="actions">
-      <div v-for="(action, index) in actions" :key="index" class="action">
-        <SButton
-          size="small"
-          :type="getActionType(action.type)"
-          :label="action.label"
-          @click="action.callback"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { PropType, computed } from 'vue'
-import { Action } from '../store/dialog'
-import SIconPreloader from './icons/SIconPreloader.vue'
-import SButton from './SButton.vue'
-
-const props = defineProps({
-  type: { type: String as PropType<'confirm' | 'loading'>, default: 'confirm' },
-  title: { type: String, default: null },
-  text: { type: String, default: null },
-  actions: { type: Array as PropType<Action[]>, default: () => [] }
-})
-
-const isTypeLoading = computed(() => props.type === 'loading')
-const isLoadOnly = computed(() => isTypeLoading.value && !props.title && !props.text)
-
-function getActionType(value?: 'text' | 'mute'): 'text' | 'mute' {
-  return value !== 'mute' ? 'text' : 'mute'
-}
-</script>
-
-<style lang="postcss" scoped>
-.SDialog {
-  margin: 96px 16px;
-  border: 1px solid var(--c-divider-light);
-  border-radius: 8px;
-  padding: 16px 16px 8px;
-  max-width: 392px;
-  background-color: var(--c-bg);
-  box-shadow: var(--shadow-depth-3);
-
-  @media (min-width: 424px) {
-    margin: 64px auto;
-    padding: 24px 24px 16px;
-  }
-}
-
-.SDialog.load-only {
-  margin: 128px auto;
-  padding: 0;
-  width: 80px;
-  height: 80px;
-
-  .load {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin: 0;
-    padding: 0;
-    width: 80px;
-    height: 80px;
-  }
-
-  .load-svg {
-    transform: translate(0);
-  }
-
-  @media (min-width: 424px) {
-    margin: 128px auto;
-  }
-}
-
-.title {
-  line-height: 28px;
-  font-size: 16px;
-  font-weight: 500;
-}
-
-.text {
-  line-height: 20px;
-  font-size: 14px;
-}
-
-.load {
-  margin-top: 2px;
-  transform: translateY(1px);
-}
-
-.load-svg {
-  width: 48px;
-  height: 48px;
-  transform: translate(-10px, 2px);
-
-  @media (min-width: 424px) {
-    transform: translate(-12px, 6px);
-  }
-}
-
-.progress {
-  padding-top: 14px;
-  padding-bottom: 8px;
-
-  @media (min-width: 424px) {
-    padding-top: 16px;
-    padding-bottom: 4px;
-  }
-}
-
-.actions {
-  display: flex;
-  justify-content: flex-end;
-  flex-wrap: wrap;
-  margin: 0 -8px;
-  padding-top: 12px;
-
-  @media (min-width: 424px) {
-    margin: 0 -10px;
-  }
-}
-
-.action {
-  @media (min-width: 424px) {
-    padding: 0 4px;
-  }
-}
-</style>

package/lib/components/SDropdownItem.vue

@@ -1,78 +0,0 @@
-<template>
-  <li class="SDropdownItem" role="button" @click="$emit('click')">
-    <div v-if="item" class="content">
-      <component :is="component" :item="item" />
-    </div>
-
-    <div class="status">
-      <SIconCheck v-if="isActive" class="status-icon" />
-    </div>
-  </li>
-</template>
-
-<script setup lang="ts">
-import { ComputedRef, PropType, computed } from 'vue'
-import { isArray, isEqual } from '../support/Utils'
-import SIconCheck from './icons/SIconCheck.vue'
-import SDropdownItemText from './SDropdownItemText.vue'
-import SDropdownItemUser from './SDropdownItemUser.vue'
-
-const props = defineProps({
-  selected: { type: Object as PropType<ComputedRef<any>>, default: null },
-  item: { type: Object as PropType<any>, default: null }
-})
-
-defineEmits(['click'])
-
-const component = computed(() => {
-  if (props.item.type === 'text') {
-    return SDropdownItemText
-  }
-
-  if (props.item.type === 'user') {
-    return SDropdownItemUser
-  }
-
-  throw new Error('Invalid item type.')
-})
-
-const isActive = computed(() => {
-  if (!props.selected) {
-    return false
-  }
-
-  const selected = props.selected.value
-  const value = props.item.value
-
-  return isArray(selected)
-    ? !!selected.find(s => isEqual(s, value))
-    : isEqual(selected, value)
-})
-</script>
-
-<style lang="postcss" scoped>
-@import "@/assets/styles/variables";
-
-.SDropdownItem {
-  display: flex;
-  justify-content: space-between;
-  padding: 8px 12px 8px 16px;
-}
-
-.status {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-left: 8px;
-  width: 16px;
-  height: 16px;
-}
-
-.status-icon {
-  width: 16px;
-  height: 16px;
-  transform: translateY(1px);
-  fill: var(--c-text-1);
-  transition: fill .25s;
-}
-</style>

package/lib/components/SDropdownItemText.vue

@@ -1,22 +0,0 @@
-<template>
-  <div class="SDropdownItemText">
-    <p class="text">{{ item.text }}</p>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { PropType } from 'vue'
-
-defineProps({
-  item: { type: Object as PropType<any>, required: true }
-})
-</script>
-
-<style lang="postcss" scoped>
-.text {
-  margin: 0;
-  line-height: 16px;
-  font-size: 12px;
-  font-weight: 500;
-}
-</style>

package/lib/components/SDropdownItemUser.vue

@@ -1,40 +0,0 @@
-<template>
-  <div class="SDropdownItemUser">
-    <div class="avatar">
-      <SAvatar size="mini" :avatar="item.avatar" :name="item.name" />
-    </div>
-
-    <p class="name">{{ item.name }}</p>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { PropType } from 'vue'
-import { UserItem } from '../composables/Dropdown'
-import SAvatar from './SAvatar.vue'
-
-defineProps({
-  item: { type: Object as PropType<UserItem>, required: true }
-})
-</script>
-
-<style lang="postcss" scoped>
-.SDropdownItemUser {
-  position: relative;
-}
-
-.avatar {
-  position: absolute;
-  top: 0;
-  left: -4px;
-  width: 24px;
-  height: 24px;
-}
-
-.name {
-  padding-left: 32px;
-  line-height: 24px;
-  font-size: 12px;
-  font-weight: 500;
-}
-</style>

package/lib/components/SInputDropdownItemTextTag.vue

@@ -1,94 +0,0 @@
-<template>
-  <div class="SInputDropdownItemTextTag" :class="{ disabled }">
-    <p class="text">{{ item.text }}</p>
-
-    <div v-if="!disabled" class="remove" role="button" @click="$emit('remove')">
-      <div class="remove-box">
-        <SIconX class="remove-icon" />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { PropType } from 'vue'
-import SIconX from './icons/SIconX.vue'
-
-defineProps({
-  item: { type: Object as PropType<any>, required: true },
-  disabled: { type: Boolean, default: false }
-})
-
-defineEmits(['remove'])
-</script>
-
-<style lang="postcss" scoped>
-.SInputDropdownItemTextTag {
-  display: flex;
-  border-radius: 12px;
-  padding: 0 0 0 10px;
-  background-color: var(--c-white-mute);
-}
-
-.dark .SInputDropdownItemTextTag {
-  background-color: var(--c-black-mute);
-}
-
-.SInputDropdownItemTextTag.disabled {
-  padding: 0 10px 0;
-  background-color: var(--c-gray-light-4);
-
-  .text {
-    color: var(--c-text-2);
-  }
-}
-
-.dark .SInputDropdownItemTextTag.disabled {
-  background-color: var(--c-gray-dark-2);
-}
-
-.text {
-  margin: 0;
-  line-height: 24px;
-  font-size: 12px;
-  font-weight: 500;
-  white-space: nowrap;
-}
-
-.remove {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-left: 2px;
-  width: 24px;
-  height: 24px;
-
-  &:hover .remove-box {
-    color: var(--c-text-1);
-    background-color: var(--c-gray-light-4)
-  }
-}
-
-.dark .remove {
-  &:hover .remove-box {
-    background-color: var(--c-gray-dark-2)
-  }
-}
-
-.remove-box {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 50%;
-  width: 20px;
-  height: 20px;
-  color: var(--c-text-2);
-  transition: color .25s, background-color .25s;
-}
-
-.remove-icon {
-  width: 12px;
-  height: 12px;
-  fill: currentColor;
-}
-</style>

package/lib/components/SInputDropdownItemUser.vue

@@ -1,41 +0,0 @@
-<template>
-  <div class="SInputDropdownItemUser" :class="{ disabled }">
-    <div class="avatar">
-      <SAvatar size="mini" :avatar="item.avatar" :name="item.name" />
-    </div>
-
-    <p class="name">{{ item.name }}</p>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { PropType } from 'vue'
-import { UserItem } from '../composables/Dropdown'
-import SAvatar from './SAvatar.vue'
-
-defineProps({
-  item: { type: Object as PropType<UserItem>, required: true },
-  disabled: { type: Boolean, default: false }
-})
-</script>
-
-<style lang="postcss" scoped>
-.SInputDropdownItemUser {
-  position: relative;
-}
-
-.avatar {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 24px;
-  height: 24px;
-}
-
-.name {
-  padding-left: 32px;
-  line-height: 24px;
-  font-size: 12px;
-  font-weight: 500;
-}
-</style>

package/lib/components/SPortalModals.vue

@@ -1,74 +0,0 @@
-<template>
-  <transition name="fade">
-    <div v-if="isActive" class="SPortalModals">
-      <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 setup lang="ts">
-import { ref, computed, watch } from 'vue'
-import { useRoute } from 'vue-router'
-import { useStore } from 'vuex'
-import SModal from './SModal.vue'
-
-const route = useRoute()
-const store = useStore()
-
-const items = computed(() => store.state.modal.items)
-const hasItem = computed(() => items.value.length > 0)
-
-const isActive = ref(false)
-
-let timer: any
-
-watch(hasItem, (value) => {
-  clearTimeout(timer)
-
-  value
-    ? (isActive.value = true)
-    : (timer = setTimeout(() => { isActive.value = false }, 250))
-})
-
-watch(route, closeAll)
-
-function close(id?: number) {
-  store.dispatch('modal/close', id)
-}
-
-function closeAll() {
-  store.dispatch('modal/closeAll')
-}
-</script>
-
-<style scoped lang="postcss">
-.SPortalModals {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: var(--z-index-backdrop);
-  background-color: rgba(0, 0, 0, .8);
-}
-
-.SPortalModals.fade-enter-active,
-.SPortalModals.fade-leave-active {
-  transition: opacity .25s;
-}
-
-.SPortalModals.fade-enter-from,
-.SPortalModals.fade-leave-to {
-  opacity: 0;
-}
-</style>

package/lib/composables/Dialog.ts

@@ -1,38 +0,0 @@
-import { useStore } from 'vuex'
-import { useModalId } from './Modal'
-
-export interface Dialog {
-  open(dialog?: Options): Promise<any>
-  close(): Promise<any>
-}
-
-export interface Options {
-  type?: 'confirm' | 'loading'
-  title?: string
-  text?: string
-  actions?: Action[]
-}
-
-export interface Action {
-  type?: 'primary' | 'mute'
-  label: string
-  callback(): void
-}
-
-export function useDialog(): Dialog {
-  const store = useStore()
-  const id = useModalId()
-
-  function open(options?: Options) {
-    return store.dispatch('dialog/open', { ...options, id })
-  }
-
-  function close() {
-    return store.dispatch('dialog/close', id)
-  }
-
-  return {
-    open,
-    close
-  }
-}

package/lib/composables/Modal.ts

@@ -1,34 +0,0 @@
-import { useStore } from 'vuex'
-
-export interface Modal {
-  open(data?: Record<string, any>): Promise<any>
-  close(): Promise<any>
-}
-
-let modalId = 0
-
-export function useModal(component: any): Modal {
-  const store = useStore()
-  const id = useModalId()
-
-  function open(data: Record<string, any> = {}): Promise<any> {
-    return store.dispatch('modal/open', {
-      id,
-      component,
-      data
-    })
-  }
-
-  function close() {
-    return store.dispatch('modal/close', id)
-  }
-
-  return {
-    open,
-    close
-  }
-}
-
-export function useModalId(): number {
-  return ++modalId
-}

package/lib/composables/Snackbar.ts

@@ -1,18 +0,0 @@
-import { useStore } from 'vuex'
-import { Snackbar as SnackbarOptions } from '../store/snackbars'
-
-export interface Snackbar {
-  push(options: SnackbarOptions): void
-}
-
-export function useSnackbar(): Snackbar {
-  const store = useStore()
-
-  function push(options: SnackbarOptions): void {
-    store.dispatch('snackbars/push', options)
-  }
-
-  return {
-    push
-  }
-}

package/lib/store/Sefirot.ts

@@ -1,17 +0,0 @@
-import { Store, Plugin } from 'vuex'
-import modal, { State as ModalState } from './modal'
-import dialog from './dialog'
-import snackbars, { State as SnackbarsState } from './snackbars'
-
-export interface State {
-  modal: ModalState
-  snackbars: SnackbarsState
-}
-
-export function Sefirot<S = any>(): Plugin<S> {
-  return (store) => {
-    store.registerModule('modal', modal)
-    store.registerModule('dialog', dialog)
-    store.registerModule('snackbars', snackbars)
-  }
-}

package/lib/store/dialog/index.ts

@@ -1,42 +0,0 @@
-import { ActionTree, ActionContext } from 'vuex'
-import SDialog from '../../components/SDialog.vue'
-
-export interface OpenPayload {
-  id?: number
-  type?: 'confirm' | 'loading'
-  title?: string
-  text?: string
-  actions?: Action[]
-}
-
-export interface Action {
-  type?: 'text' | 'mute'
-  label: string
-  callback(): void
-}
-
-export const actions: ActionTree<any, any> = {
-  open(context: ActionContext<any, any>, payload: OpenPayload): void {
-    const { id } = payload
-
-    delete payload.id
-
-    context.dispatch('modal/open', {
-      id,
-      component: SDialog,
-      data: payload,
-      options: {
-        closable: false
-      }
-    }, { root: true })
-  },
-
-  close(context: ActionContext<any, any>, uid?: number): void {
-    context.dispatch('modal/close', uid, { root: true })
-  }
-}
-
-export default {
-  namespaced: true,
-  actions
-}

package/lib/store/modal/index.ts

@@ -1,61 +0,0 @@
-import { shallowReactive, markRaw } from 'vue'
-import { ActionTree, ActionContext, MutationTree } from 'vuex'
-
-export interface State {
-  items: Item[]
-}
-
-export interface Item {
-  id?: number
-  component: any
-  data?: Record<string, any>
-}
-
-function state(): State {
-  return {
-    items: []
-  }
-}
-
-const actions: ActionTree<State, any> = {
-  open(context: ActionContext<State, any>, item: Item): void {
-    context.commit('push', item)
-  },
-
-  close(context: ActionContext<State, any>, id?: number): void {
-    id ? context.commit('drop', id) : context.commit('pop')
-  },
-
-  closeAll(context: ActionContext<State, any>): void {
-    context.commit('flush')
-  }
-}
-
-const mutations: MutationTree<State> = {
-  push(state: State, item: Item): void {
-    state.items.push({
-      ...item,
-      data: shallowReactive(item.data ?? {}),
-      component: markRaw(item.component)
-    })
-  },
-
-  pop(state: State): void {
-    state.items.pop()
-  },
-
-  drop(state: State, id: number) {
-    state.items = state.items.filter(item => item.id !== id)
-  },
-
-  flush(state: State): void {
-    state.items = []
-  }
-}
-
-export default {
-  namespaced: true,
-  state,
-  actions,
-  mutations
-}