@globalbrain/sefirot 0.72.0 → 2.0.0-draft.4

package/lib/components/SWindow.vue

@@ -1,158 +0,0 @@
-<template>
-  <SModalBase :name="name" :closable="closable" @click.stop>
-    <div class="SWindow" @click.stop>
-      <button v-if="closable" class="close" @click="close">
-        <SIconX class="close-icon" />
-      </button>
-
-      <div v-if="showHeader" class="header">
-        <p class="title">{{ title }}</p>
-        <p v-if="lead" class="lead">{{ lead }}</p>
-      </div>
-
-      <div class="content">
-        <slot />
-      </div>
-
-      <div v-if="actions" class="actions">
-        <div v-for="(action, index) in actions" :key="index" class="action">
-          <SButton
-            :label="action.label"
-            :type="action.type"
-            :mode="action.mode"
-            size="large"
-            @click="action.callback"
-          />
-        </div>
-      </div>
-    </div>
-  </SModalBase>
-</template>
-
-<script lang="ts">
-import { PropType, computed, defineComponent } from '@vue/composition-api'
-import { ButtonAction } from '../composables/Action'
-import { useStore } from '../composables/Store'
-import SIconX from './icons/SIconX.vue'
-import SButton from './SButton.vue'
-import SModalBase from './SModalBase.vue'
-
-export default defineComponent({
-  components: {
-    SIconX,
-    SButton,
-    SModalBase
-  },
-
-  props: {
-    name: { type: String, required: true },
-    title: { type: String, default: null },
-    lead: { type: String, default: null },
-    actions: { type: Array as PropType<ButtonAction[]>, default: null },
-    closable: { type: Boolean, default: false }
-  },
-
-  setup(props) {
-    const store = useStore()
-
-    const showHeader = computed(() => !!props.title)
-
-    function close(): void {
-      store.dispatch('window/close')
-    }
-
-    return {
-      showHeader,
-      close
-    }
-  }
-})
-</script>
-
-<style lang="postcss" scoped>
-@import "@/assets/styles/variables";
-
-.SWindow {
-  position: relative;
-  margin: 48px 24px;
-  border-radius: 2px;
-  max-width: 768px;
-  background-color: var(--c-white);
-  box-shadow: var(--shadow-depth-5);
-  transition: opacity .25s, transform .25s;
-  transition-delay: .05s;
-
-  @media (min-width: 768px) {
-    margin: 96px auto;
-  }
-}
-
-.close {
-  position: absolute;
-  top: 0;
-  right: 0;
-  z-index: 10;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 64px;
-  height: 64px;
-
-  &:hover .close-icon {
-    fill: var(--c-black);
-  }
-}
-
-.close-icon {
-  width: 16px;
-  height: 16px;
-  fill: var(--c-gray);
-  transition: fill .25s;
-}
-
-.header {
-  border-radius: 2px 2px 0 0;
-  padding: 32px;
-  background-color: var(--c-white-soft);
-
-  @media (min-width: 768px) {
-    padding: 48px 64px 40px;
-  }
-}
-
-.title {
-  line-height: 32px;
-  text-align: center;
-  font-size: 24px;
-}
-
-.lead {
-  padding-top: 8px;
-  text-align: center;
-  color: var(--c-gray);
-}
-
-.content {
-  padding: 32px;
-
-  @media (min-width: 768px) {
-    padding: 48px 64px;
-  }
-}
-
-.actions {
-  display: flex;
-  justify-content: center;
-  padding: 32px;
-
-  @media (min-width: 768px) {
-    padding: 32px 64px 48px;
-  }
-}
-
-.action {
-  & + & {
-    padding-left: 16px;
-  }
-}
-</style>

package/lib/components/icons/SIconCopy.vue

@@ -1,6 +0,0 @@
-<template>
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-    <path d="M20,23H11a2.9,2.9,0,0,1-3-3V11a2.9,2.9,0,0,1,3-3h9a2.9,2.9,0,0,1,3,3v9A2.9,2.9,0,0,1,20,23ZM11,10a.9.9,0,0,0-1,1v9a.9.9,0,0,0,1,1h9a.9.9,0,0,0,1-1V11a.9.9,0,0,0-1-1Z" />
-    <path d="M5,16H4a2.9,2.9,0,0,1-3-3V4A2.9,2.9,0,0,1,4,1h9a2.9,2.9,0,0,1,3,3V5a1,1,0,0,1-2,0V4a.9.9,0,0,0-1-1H4A.9.9,0,0,0,3,4v9a.9.9,0,0,0,1,1H5a1,1,0,0,1,0,2Z" />
-  </svg>
-</template>

package/lib/composables/Action.ts

@@ -1,141 +0,0 @@
-import { Values, OmitType } from '../types/Utils'
-import { Refish } from './Utils'
-
-export type Action = Values<Actions>
-
-export interface Actions {
-  ButtonAction: ButtonAction
-  PillAction: PillAction
-  AvatarAction: AvatarAction
-  SwitchAction: SwitchAction
-}
-
-export interface ActionBase {
-  type: Type
-  size?: Size
-  gap?: number
-  callback?(): void
-}
-
-export type Type = Values<typeof Types>
-
-export const Types = {
-  Button: 'button',
-  Avatar: 'avatar',
-  Pill: 'pill',
-  Switch: 'switch'
-} as const
-
-export type Size = Values<typeof Sizes>
-
-export const Sizes = {
-  Small: 'small',
-  Medium: 'medium'
-} as const
-
-export interface ButtonAction extends ActionBase {
-  type: typeof Types.Button
-  kind?: ButtonActionKind
-  mode?: ButtonActionMode
-  icon?: any
-  label?: string
-  link?: string
-  rounded?: boolean
-  inverse?: boolean
-  loading?: boolean
-}
-
-export type ButtonActionKind = Values<typeof ButtonActionKinds>
-
-export const ButtonActionKinds = {
-  Primary: 'primary',
-  Secondary: 'secondary',
-  Tertiary: 'tertiary',
-  Text: 'text',
-  Mute: 'mute'
-} as const
-
-export type ButtonActionMode = Values<typeof ButtonActionModes>
-
-export const ButtonActionModes = {
-  Neutral: 'neutral',
-  Info: 'info',
-  Success: 'success',
-  Warning: 'warning',
-  Danger: 'danger'
-} as const
-
-export interface PillAction extends ActionBase {
-  type: typeof Types.Pill
-  mode?: PillActionMode
-  label: string
-}
-
-export type PillActionMode = Values<typeof PillActionModes>
-
-export const PillActionModes = {
-  Neutral: 'neutral',
-  Info: 'info',
-  Success: 'success',
-  Warning: 'warning',
-  Danger: 'danger'
-} as const
-
-export interface AvatarAction extends ActionBase {
-  type: typeof Types.Avatar
-  avatars: AvatarActionAvatar[]
-}
-
-export interface AvatarActionAvatar {
-  avatar: string
-  name?: string
-}
-
-export interface SwitchAction extends ActionBase {
-  type: typeof Types.Switch
-  value: Refish<boolean>
-  mode?: SwitchActionMode
-  text?: string
-  textMode?: SwitchActionTextMode
-}
-
-export type SwitchActionMode = Values<typeof SwitchActionModes>
-
-export const SwitchActionModes = {
-  Neutral: 'neutral',
-  Info: 'info',
-  Success: 'success',
-  Warning: 'warning',
-  Danger: 'danger'
-} as const
-
-export type SwitchActionTextMode = Values<typeof SwitchActionTextModes>
-
-export const SwitchActionTextModes = {
-  Neutral: 'neutral',
-  Mute: 'mute',
-  Info: 'info',
-  Success: 'success',
-  Warning: 'warning',
-  Danger: 'danger'
-} as const
-
-export function useAction<T extends Action>(action: T): T {
-  return action
-}
-
-export function useButtonAction(action: OmitType<ButtonAction>): ButtonAction {
-  return { type: Types.Button, ...action }
-}
-
-export function usePillAction(action: OmitType<PillAction>): PillAction {
-  return { type: Types.Pill, ...action }
-}
-
-export function useAvatarAction(action: OmitType<AvatarAction>): AvatarAction {
-  return { type: Types.Avatar, ...action }
-}
-
-export function useSwitchAction(action: OmitType<SwitchAction>): SwitchAction {
-  return { type: Types.Switch, ...action }
-}

package/lib/composables/Alert.ts

@@ -1,50 +0,0 @@
-import { Values } from '../types/Utils'
-import { useStore } from './Store'
-import { useModalUid } from './Modal'
-
-export interface Alert {
-  open(alert: AlertOptions): Promise<any>
-  close(): Promise<any>
-}
-
-export interface AlertOptions {
-  type?: AlertMode
-  title: string
-  text: string
-  actions: Action[]
-}
-
-export type AlertMode = Values<typeof AlertModes>
-
-export const AlertModes = {
-  Info: 'info',
-  Success: 'success',
-  Warning: 'warning',
-  Danger: 'danger'
-} as const
-
-export interface Action {
-  type: 'primary' | 'secondary' | 'tertiary' | 'text' | 'mute'
-  mode: 'neutral' | 'info' | 'success' | 'warning' | 'danger'
-  icon?: any
-  label: string
-  callback(): void
-}
-
-export function useAlert(): Alert {
-  const store = useStore()
-  const uid = useModalUid()
-
-  function open(alert: AlertOptions) {
-    return store.dispatch('alert/open', { ...alert, uid })
-  }
-
-  function close() {
-    return store.dispatch('alert/close', uid)
-  }
-
-  return {
-    open,
-    close
-  }
-}

package/lib/composables/Card.ts

@@ -1,46 +0,0 @@
-import { Values } from '../types/Utils'
-import { Refish } from './Utils'
-
-export interface Card {
-  header?: Header
-  footer?: Footer
-  mode?: Mode
-  round?: number
-  depth?: number
-  collapsable?: boolean
-}
-
-export interface Header {
-  title?: string
-  actions?: Refish<Action[]>
-}
-
-export interface Footer {
-  actions: Refish<Action[]>
-}
-
-export interface Action {
-  type: 'primary' | 'secondary' | 'tertiary' | 'text' | 'mute'
-  mode?: Mode
-  icon?: ActionIconType | object
-  label?: string
-  link?: string
-  disabled?: string | null
-  callback?(): void
-}
-
-export type ActionIconType = 'edit-3' | 'plus' | 'trash-2'
-
-export type Mode = Values<typeof Modes>
-
-export const Modes = {
-  Neutral: 'neutral',
-  Info: 'info',
-  Success: 'success',
-  Warning: 'warning',
-  Danger: 'danger'
-} as const
-
-export function useCard(card: Card): Card {
-  return card
-}

package/lib/composables/FormValidation.ts

@@ -1,150 +0,0 @@
-import { Ref, ComputedRef, ref, computed } from '@vue/composition-api'
-import { required } from '../validation/validators'
-import { Rule } from '../validation/rules'
-
-export interface Validation {
-  $isValidation: boolean
-  $isDirty: Ref<boolean> | ComputedRef<boolean>
-  $isValid: ComputedRef<boolean>
-  $errors: ComputedRef<Error[]>
-  $touch (): void
-  $reset (): void
-  $validate (): boolean
-  [key: string]: any
-}
-
-export type Rules = NestedRules | Validators
-
-export interface NestedRules {
-  [key: string]: Rules | any
-}
-
-export interface Validators {
-  [key: string]: Rule[]
-}
-
-export type Error = [string, string]
-
-export function useFormValidation<T extends Record<string, any>>(data: T, rules: Rules, rootData?: T): Validation {
-  const validation = {} as Validation
-
-  setValidations(validation, data, rules, rootData ?? data)
-
-  setupValidation(validation)
-
-  return validation
-}
-
-function setValidations<T extends Record<string, any>>(validation: Validation, data: T, rules: Rules, rootData: T): void {
-  for (const name in rules) {
-    const rule = rules[name]
-
-    if (isValidation(rule)) {
-      validation[name] = rule
-      continue
-    }
-
-    if (Array.isArray(rule)) {
-      validation[name] = createValidation(name, data, rule, rootData)
-      continue
-    }
-
-    validation[name] = useFormValidation(data[name], rule, rootData)
-  }
-}
-
-function createValidation<T extends Record<string, any>>(name: string, data: T, rules: Rule[], rootData: T): Validation {
-  const isDirty = ref(false)
-  const isValid = computed(() => errors.value.length === 0)
-  const errors = computed(() => getErrors(name, data, rules, rootData))
-
-  function touch(): void {
-    isDirty.value = true
-  }
-
-  function reset(): void {
-    isDirty.value = false
-  }
-
-  function validate(): boolean {
-    touch()
-    return isValid.value
-  }
-
-  return {
-    $isValidation: true,
-    $isDirty: isDirty,
-    $isValid: isValid,
-    $errors: errors,
-    $touch: touch,
-    $reset: reset,
-    $validate: validate
-  }
-}
-
-function setupValidation(validation: Validation): void {
-  const isDirty = computed(() => {
-    return Object.keys(validation).every((field) => {
-      const v = validation[field]
-
-      return isValidation(v) ? v.$isDirty.value : true
-    })
-  })
-
-  const isValid = computed(() => errors.value.length === 0)
-
-  const errors = computed(() => {
-    return Object.keys(validation).reduce<Error[]>((errors, field) => {
-      const v = validation[field]
-      return isValidation(v) ? errors.concat(v.$errors.value) : errors
-    }, [])
-  })
-
-  function touch(): void {
-    callAll(validation, 'touch')
-  }
-
-  function reset(): void {
-    callAll(validation, 'reset')
-  }
-
-  const validate = () => {
-    touch()
-    return isValid.value
-  }
-
-  validation.$isValidation = true
-  validation.$isDirty = isDirty
-  validation.$errors = errors
-  validation.$isValid = isValid
-  validation.$touch = touch
-  validation.$reset = reset
-  validation.$validate = validate
-}
-
-function getErrors<T extends Record<string, any>>(name: string, data: T, rules: Rule[], rootData: T): Error[] {
-  return rules.reduce<Error[]>((errors, rule) => {
-    const value = data[name]
-
-    if (rule.optional && !required(value)) {
-      return errors
-    }
-
-    if (!rule.validate(value, rootData)) {
-      errors.push([rule.name, rule.message])
-    }
-
-    return errors
-  }, [])
-}
-
-function callAll(validation: Validation, method: 'touch' | 'reset'): void {
-  for (const field in validation) {
-    const v = validation[field]
-    isValidation(v) && v[`$${method}`]()
-  }
-}
-
-function isValidation(obj: any): obj is Validation {
-  return obj !== null && typeof obj === 'object' && !Array.isArray(obj) && !!obj.$isValidation
-}

package/lib/composables/Header.ts

@@ -1,72 +0,0 @@
-import { ComputedRef } from '@vue/composition-api'
-import { Values } from '../types/Utils'
-import { Refish } from './Utils'
-import { Action } from './Action'
-import { Tag } from './Tag'
-import { Dropdown, UseDropdownOptions, useDropdown } from './Dropdown'
-
-export * from './Action'
-export * from './Tag'
-
-export interface Header {
-  size?: Size
-  mode?: Mode
-  icon?: any
-  title?: Refish<string>
-  search?: Search
-  actions?: Refish<Action[]>
-  tags?: Refish<Tag[]>
-}
-
-export type Size = Values<typeof Sizes>
-
-export const Sizes = {
-  Small: 'small',
-  Medium: 'medium',
-  Large: 'large'
-} as const
-
-export type Mode = Values<typeof Modes>
-
-export const Modes = {
-  Neutral: 'neutral',
-  Info: 'info',
-  Success: 'success',
-  Warning: 'warning',
-  Danger: 'danger'
-} as const
-
-export interface Search {
-  placeholder: string
-  presets?: SearchPresets
-  value: ComputedRef<string>
-  onEnter(text: string): void
-}
-
-export interface SearchPresets {
-  title: string
-  dropdown: Dropdown
-}
-
-export interface UseSearchPresetsOptions {
-  title: string
-  dropdown: UseDropdownOptions
-}
-
-export function useHeader(header: Header): Header {
-  return header
-}
-
-export function useSearch(search: Search): Search {
-  return search
-}
-
-export function useSearchPresets(presets: UseSearchPresetsOptions): SearchPresets {
-  return {
-    title: presets.title,
-    dropdown: useDropdown({
-      closeOnClick: true,
-      ...presets.dropdown
-    })
-  }
-}

package/lib/composables/InputDropdown.ts

@@ -1,6 +0,0 @@
-export type { Search, Item, TextItem, UserItem } from './Dropdown'
-export {
-  useSearch,
-  useTextItem as useTextOption,
-  useUserItem as useUserOption
-} from './Dropdown'