@globalbrain/sefirot 0.71.0 → 2.0.0-draft.3

package/lib/components/SSnackbar.vue

@@ -12,49 +12,38 @@
           :type="action.type"
           :label="action.label"
           inverse
-          @click="action.callback"
+          @click="handleCallback(action)"
         />
       </div>
     </div>
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, PropType } from '@vue/composition-api'
-import { useStore } from '../composables/Store'
+<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'
 
-export default defineComponent({
-  components: {
-    SIconX,
-    SButton
-  },
-
-  props: {
-    id: { type: Number, required: true },
-    text: { type: String, required: true },
-    actions: { type: Array as PropType<Action[]>, default: null }
-  },
+const props = defineProps({
+  id: { type: Number, required: true },
+  text: { type: String, required: true },
+  actions: { type: Array as PropType<Action[]>, default: null }
+})
 
-  setup(props) {
-    const store = useStore()
+const store = useStore()
 
-    function close(): void {
-      store.dispatch('snackbars/pop', props.id)
-    }
+function close() {
+  store.dispatch('snackbars/pop', props.id)
+}
 
-    return {
-      close
-    }
-  }
-})
+function handleCallback(action: Action) {
+  action.callback()
+}
 </script>
 
 <style lang="postcss" scoped>
-@import "@/assets/styles/variables";
-
 .SSnackbar {
   position: relative;
   border: 1px solid transparent;
@@ -65,7 +54,7 @@ export default defineComponent({
   box-shadow: var(--shadow-depth-5);
 }
 
-.dark-mode .SSnackbar {
+.dark .SSnackbar {
   border-color: var(--c-divider-light);
 }
 
@@ -113,3 +102,4 @@ export default defineComponent({
   }
 }
 </style>
+

package/lib/composables/Dialog.ts

@@ -1,14 +1,13 @@
-import { Values } from '../types/Utils'
-import { useStore } from './Store'
-import { useModalUid } from './Modal'
+import { useStore } from 'vuex'
+import { useModalId } from './Modal'
 
 export interface Dialog {
-  open(dialog?: DialogOptions): Promise<any>
+  open(dialog?: Options): Promise<any>
   close(): Promise<any>
 }
 
-export interface DialogOptions {
-  type?: DialogType
+export interface Options {
+  type?: 'confirm' | 'loading'
   title?: string
   text?: string
   actions?: Action[]
@@ -20,23 +19,16 @@ export interface Action {
   callback(): void
 }
 
-export type DialogType = Values<typeof DialogTypes>
-
-export const DialogTypes = {
-  Confirm: 'confirm',
-  Loading: 'loading'
-} as const
-
 export function useDialog(): Dialog {
   const store = useStore()
-  const uid = useModalUid()
+  const id = useModalId()
 
-  function open(dialog?: DialogOptions) {
-    return store.dispatch('dialog/open', { ...dialog, uid })
+  function open(options?: Options) {
+    return store.dispatch('dialog/open', { ...options, id })
   }
 
   function close() {
-    return store.dispatch('dialog/close', uid)
+    return store.dispatch('dialog/close', id)
   }
 
   return {

package/lib/composables/Dropdown.ts

@@ -1,5 +1,5 @@
 import Fuse from 'fuse.js'
-import { Ref, ComputedRef, ref, computed, isRef } from '@vue/composition-api'
+import { Ref, ComputedRef, ref, computed, isRef } from 'vue'
 
 export interface Dropdown {
   title?: string
@@ -14,7 +14,7 @@ export interface Search {
   placeholder: string
   missing: string
   value: Ref<string>
-  onInput (text: string): void
+  onInput (text: string | null): void
 }
 
 export type Item = TextItem | UserItem

package/lib/composables/{Menu.ts → Flyout.ts}

@@ -1,18 +1,16 @@
-import { ref } from '@vue/composition-api'
+import { ref, watch } from 'vue'
 
-export function useMenu() {
+export function useFlyout() {
   const container = ref<any>(null)
 
   const isOpen = ref(false)
 
   function open(): void {
     isOpen.value = true
-    document.addEventListener('click', closeOnClickOutside)
   }
 
   function close(): void {
     isOpen.value = false
-    document.removeEventListener('click', closeOnClickOutside)
   }
 
   function toggle(): void {
@@ -29,6 +27,15 @@ export function useMenu() {
     return !!el && !!(el.offsetWidth || el.offsetHeight || el.getClientRects().length)
   }
 
+  watch(isOpen, (value) => {
+    if (value) {
+      document.addEventListener('click', closeOnClickOutside)
+      return
+    }
+
+    document.removeEventListener('click', closeOnClickOutside)
+  })
+
   return {
     container,
     isOpen,

package/lib/composables/Form.ts

@@ -1,66 +1,64 @@
-import { UnwrapRef, reactive } from '@vue/composition-api'
-import { WithRequired } from '../types/Utils'
-import { Validation, Rules, useFormValidation } from './FormValidation'
+import { Ref, ToRefs, reactive, computed } from 'vue'
+import { cloneDeep } from '../support/Utils'
+import { useSnackbar } from './Snackbar'
+import { Validation, ExtractState, ValidationArgs, useValidation } from './Validation'
 
-export * from './FormValidation'
-
-export interface Form<T extends Record<string, any>> {
-  data: Data<T>
-  validation?: Validation
+export interface Form<D> {
+  data: D
+  validation: Ref<Validation>
   init(): void
-  update: UpdateFunction<T>
+  reset(): void
+  validate(): Promise<boolean>
+  validateAndNotify(): Promise<boolean>
 }
 
-export interface UseFormOptions<T> {
-  data: T | (() => T)
-  rules?: Rules
+export interface UseFormOptions<D> {
+  data: D
+  rules?: Ref<any> | any
 }
 
-export type UpdateFunction<T extends Record<string, any> = Record<string, any>> = (
-  model: keyof Data<T>,
-  value: any
-) => void
-
-export type FormWithValidation<T, U extends Form<T> = Form<T>> = WithRequired<U, 'validation'>
-
-export type UseFormOptionsWithRules<T, U extends UseFormOptions<T> = UseFormOptions<T>> = WithRequired<U, 'rules'>
-
-type Data<T> = UnwrapRef<T>
+export function useForm<D>(options: UseFormOptions<D>): Form<D> {
+  const snackbar = useSnackbar()
 
-export function useForm<T extends Record<string, any>>(
-  options: UseFormOptionsWithRules<T>
-): FormWithValidation<T>
+  const initialData = cloneDeep(options.data)
 
-export function useForm<T extends Record<string, any>>(
-  options: UseFormOptions<T>
-): Form<T>
+  const data = reactive(options.data as any)
 
-export function useForm<T extends Record<string, any>>(
-  options: UseFormOptions<T> | UseFormOptionsWithRules<T>
-): Form<T> | FormWithValidation<T> {
-  const initialData = getData(options.data)
-  const rules = options.rules
+  const rules = options.rules ?? {}
 
-  const data = reactive(initialData)
-  const validation = rules ? useFormValidation(data, rules) : undefined
+  const validation = useValidation(data, rules as any)
 
   function init(): void {
     Object.assign(data, initialData)
-    validation?.$reset()
+    reset()
+  }
+
+  function reset(): void {
+    validation.value.$reset()
+  }
+
+  function validate(): Promise<boolean> {
+    return validation.value.$validate()
   }
 
-  function update(model: keyof Data<T>, value: any): void {
-    data[model] = value
+  async function validateAndNotify(): Promise<boolean> {
+    const result = await validate()
+
+    if (!result) {
+      snackbar.push({
+        text: 'Form contains errors. Please correct them and try again.'
+      })
+    }
+
+    return result
   }
 
   return {
     data,
-    validation,
     init,
-    update
+    reset,
+    validation,
+    validate,
+    validateAndNotify
   }
 }
-
-function getData<T extends Record<string, any>>(data: T | (() => T)): T {
-  return data instanceof Function ? data() : data
-}

package/lib/composables/Modal.ts

@@ -1,5 +1,5 @@
+import { useStore } from 'vuex'
 import { Options as ModalOptions } from '../store/modal'
-import { useStore } from './Store'
 
 export interface Modal {
   open(item?: OpenOptions): Promise<any>
@@ -7,28 +7,28 @@ export interface Modal {
 }
 
 export interface OpenOptions {
+  id?: number
   component?: any
-  uid?: number
   data?: Record<string, any>
   options?: ModalOptions
 }
 
-let modalUid = 0
+let modalId = 0
 
-export function useModal(component?: any): Modal {
+export function useModal(component: any): Modal {
   const store = useStore()
-  const uid = useModalUid()
+  const id = useModalId()
 
   function open(item: OpenOptions = {}) {
     return store.dispatch('modal/open', {
-      uid,
+      id,
       component,
       ...item
     })
   }
 
   function close() {
-    return store.dispatch('modal/close', uid)
+    return store.dispatch('modal/close', id)
   }
 
   return {
@@ -37,6 +37,6 @@ export function useModal(component?: any): Modal {
   }
 }
 
-export function useModalUid(): number {
-  return ++modalUid
+export function useModalId(): number {
+  return ++modalId
 }

package/lib/composables/Snackbar.ts

@@ -0,0 +1,18 @@
+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/composables/Validation.ts

@@ -0,0 +1,28 @@
+import { Ref, ToRefs } from 'vue'
+import useVuelidate, {
+  Validation,
+  ValidationArgs,
+  GlobalConfig,
+  ExtractState,
+  ErrorObject
+} from '@vuelidate/core'
+
+export type { Validation, ValidationArgs, GlobalConfig, ExtractState }
+
+export interface Validatable {
+  readonly $dirty: boolean
+  readonly $errors: ErrorObject[]
+  readonly $invalid: boolean
+  readonly $touch: () => void
+}
+
+export function useValidation<
+  T extends ExtractState<A>,
+  A extends ValidationArgs
+>(
+  state: T | Ref<T> | ToRefs<T>,
+  rules: Ref<A> | A,
+  config?: GlobalConfig
+): Ref<Validation<A>> {
+  return useVuelidate(rules, state, config)
+}

package/lib/mixins/Sheet.ts

@@ -1,4 +1,4 @@
-import { defineComponent } from '@vue/composition-api'
+import { App } from 'vue'
 import SSheet from '../components/SSheet.vue'
 import SSheetHeader from '../components/SSheetHeader.vue'
 import SSheetHeaderTitle from '../components/SSheetHeaderTitle.vue'
@@ -7,8 +7,8 @@ import SSheetFooter from '../components/SSheetFooter.vue'
 import SSheetFooterActions from '../components/SSheetFooterActions.vue'
 import SSheetFooterAction from '../components/SSheetFooterAction.vue'
 
-export default function Sheet() {
-  return defineComponent({
+export function mixin(app: App): void {
+  app.mixin({
     components: {
       SSheet,
       SSheetHeader,

package/lib/store/Sefirot.ts

@@ -1,22 +1,17 @@
 import { Store, Plugin } from 'vuex'
 import modal, { State as ModalState } from './modal'
 import dialog from './dialog'
-import alert from './alert'
-import screen, { State as ScreenState } from './screen'
-import snackbars, { State as SnackbarState } from './snackbars'
+import snackbars, { State as SnackbarsState } from './snackbars'
 
 export interface State {
   modal: ModalState
-  screen: ScreenState
-  snackbars: SnackbarState
+  snackbars: SnackbarsState
 }
 
-const Sefirot: Plugin<State> = <S = any> (store: Store<S & State>): void => {
-  store.registerModule('modal', modal)
-  store.registerModule('dialog', dialog)
-  store.registerModule('alert', alert)
-  store.registerModule('screen', screen)
-  store.registerModule('snackbars', snackbars)
+export function Sefirot<S = any>(): Plugin<S> {
+  return (store) => {
+    store.registerModule('modal', modal)
+    store.registerModule('dialog', dialog)
+    store.registerModule('snackbars', snackbars)
+  }
 }
-
-export default Sefirot

package/lib/store/dialog/index.ts

@@ -1,27 +1,37 @@
 import { ActionTree, ActionContext } from 'vuex'
 import SDialog from '../../components/SDialog.vue'
-import { Dialog } from '../../composables/Dialog'
-import { State as RootState } from '../Sefirot'
 
-export type DialogPayload = Dialog & { uid?: number }
+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, RootState> = {
-  open(context: ActionContext<any, RootState>, dialog: DialogPayload): void {
-    const { uid } = dialog
+export const actions: ActionTree<any, any> = {
+  open(context: ActionContext<any, any>, payload: OpenPayload): void {
+    const { id } = payload
 
-    delete dialog.uid
+    delete payload.id
 
     context.dispatch('modal/open', {
-      uid,
+      id,
       component: SDialog,
-      data: dialog,
+      data: payload,
       options: {
         closable: false
       }
     }, { root: true })
   },
 
-  close(context: ActionContext<any, RootState>, uid?: number): void {
+  close(context: ActionContext<any, any>, uid?: number): void {
     context.dispatch('modal/close', uid, { root: true })
   }
 }

package/lib/store/modal/index.ts

@@ -1,44 +1,42 @@
-import { shallowReactive, markRaw } from '@vue/composition-api'
+import { shallowReactive, markRaw } from 'vue'
 import { ActionTree, ActionContext, MutationTree } from 'vuex'
-import { State as RootState } from '../Sefirot'
 
 export interface State {
   items: Item[]
 }
 
 export interface Item {
+  id?: number
   component: any
-  uid?: number
   data?: Record<string, any>
   options?: Options
 }
 
 export interface Options {
-  width?: string
   closable?: boolean
 }
 
-export function state(): State {
+function state(): State {
   return {
     items: []
   }
 }
 
-export const actions: ActionTree<State, RootState> = {
-  open(context: ActionContext<State, RootState>, item: Item): void {
+const actions: ActionTree<State, any> = {
+  open(context: ActionContext<State, any>, item: Item): void {
     context.commit('push', item)
   },
 
-  close(context: ActionContext<State, RootState>, uid?: number): void {
-    uid ? context.commit('drop', uid) : context.commit('pop')
+  close(context: ActionContext<State, any>, id?: number): void {
+    id ? context.commit('drop', id) : context.commit('pop')
   },
 
-  closeAll(context: ActionContext<State, RootState>): void {
+  closeAll(context: ActionContext<State, any>): void {
     context.commit('flush')
   }
 }
 
-export const mutations: MutationTree<State> = {
+const mutations: MutationTree<State> = {
   push(state: State, item: Item): void {
     state.items.push({
       ...item,
@@ -51,8 +49,8 @@ export const mutations: MutationTree<State> = {
     state.items.pop()
   },
 
-  drop(state: State, uid: number) {
-    state.items = state.items.filter(item => item.uid !== uid)
+  drop(state: State, id: number) {
+    state.items = state.items.filter(item => item.id !== id)
   },
 
   flush(state: State): void {

package/lib/store/snackbars/index.ts

@@ -1,5 +1,4 @@
 import { ActionTree, ActionContext, MutationTree } from 'vuex'
-import { State as RootState } from '../Sefirot'
 
 let nextId: number = 0
 
@@ -31,8 +30,8 @@ export function state(): State {
   }
 }
 
-export const actions: ActionTree<State, RootState> = {
-  push(context: ActionContext<State, RootState>, payload: Snackbar): void {
+export const actions: ActionTree<State, any> = {
+  push(context: ActionContext<State, any>, payload: Snackbar): void {
     const id = nextId++
 
     context.commit('push', {
@@ -44,7 +43,7 @@ export const actions: ActionTree<State, RootState> = {
     setTimeout(() => { context.commit('pop', id) }, payload.timeout ?? 10000)
   },
 
-  pop(context: ActionContext<State, RootState>, id: number): void {
+  pop(context: ActionContext<State, any>, id: number): void {
     context.commit('pop', id)
   }
 }

package/lib/support/{Util.ts → Utils.ts}

@@ -1,7 +1,5 @@
 export { default as isEqual } from 'lodash-es/isEqual'
 export { default as cloneDeep } from 'lodash-es/cloneDeep'
-export { default as orderBy } from 'lodash-es/orderBy'
-export { default as groupBy } from 'lodash-es/groupBy'
 
 export function isNullish(value: unknown): value is undefined | null {
   return value === null || value === undefined

package/lib/types/Utils.ts

@@ -1,10 +1,3 @@
-export type Values<T> = T[keyof T]
-
-export type OmitType<T> = Omit<T, 'type'>
-
-export type WithRequired<T, K extends keyof T> = Exclude<T, K> & Required<Pick<T, K>>
-export type WithOptional<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>
-
 export type SyntheticEvent<E extends Event, T extends Element> = E & { target: T }
 export type SyntheticInputEvent<T extends Element = HTMLInputElement> = SyntheticEvent<InputEvent, T>
 export type SyntheticMouseEvent<T extends Element = HTMLElement> = SyntheticEvent<MouseEvent, T>

package/lib/types/vue-shims.d.ts

@@ -0,0 +1,7 @@
+declare module '*.vue' {
+  import { DefineComponent } from 'vue'
+
+  const component: DefineComponent<{}, {}, any>
+
+  export default component
+}

package/lib/validation/rules/checked.ts

@@ -1,11 +1,7 @@
-import { checked as baseChecked } from '../validators'
-import { Rule } from './'
+import { helpers } from '@vuelidate/validators'
+import { checked as baseChecked } from '../validators/checked'
 
-export default function checked(message?: string): Rule {
-  return {
-    name: 'checked',
-    message: message ?? 'You must check the field.',
-    optional: true,
-    validate: baseChecked
-  }
-}
+export const checked = helpers.withMessage(
+  'You must check the field.',
+  (value: boolean) => !helpers.req(value) || baseChecked(value)
+)

package/lib/validation/rules/fileExtension.ts

@@ -1,11 +1,11 @@
-import { fileExtension as baseFileExtension } from '../validators'
-import { Rule } from './'
+import { helpers } from '@vuelidate/validators'
+import { fileExtension as baseFileExtension } from '../validators/fileExtension'
 
-export default function hms(extensions: string[], message?: string): Rule {
-  return {
-    name: 'fileExtension',
-    message: message ?? 'The file extension is invalid.',
-    optional: true,
-    validate: v => baseFileExtension(v, extensions)
-  }
+export function fileExtension(extensions: string[], message?: string) {
+  return helpers.withMessage(
+    'The file extension is invalid.',
+    (value: File) => {
+      return !helpers.req(value) || baseFileExtension(value, extensions)
+    }
+  )
 }

package/lib/validation/rules/hms.ts

@@ -1,11 +1,11 @@
-import baseHMS, { HMSType } from '../validators/hms'
-import { Rule } from './'
+import { helpers } from '@vuelidate/validators'
+import { hms as baseHms, Hms, HmsType } from '../validators/hms'
 
-export default function hms(required?: HMSType[], message?: string): Rule {
-  return {
-    name: 'hms',
-    message: message ?? 'The time format is invalid',
-    optional: true,
-    validate: v => baseHMS(v, required)
-  }
+export function hms(required?: HmsType[]) {
+  return helpers.withMessage(
+    'The time is invalid.',
+    (value: Hms) => {
+      return !helpers.req(value) || baseHms(value, required)
+    }
+  )
 }