@globalbrain/sefirot - npm Package Compare versions

Comparing version 0.24.0 to 0.25.0

CHANGELOG.md

@@ -0,1 +1,8 @@
+# [0.25.0](https://github.com/globalbrain/sefirot/compare/v0.24.0...v0.25.0) (2021-01-15)
+
+### Features
+
+* **icon:** add more icons ([451c50b](https://github.com/globalbrain/sefirot/commit/451c50b39f90ce5ec78e181609b595c53683f28d))
+* **header:** add header component ([87e4aa6](https://github.com/globalbrain/sefirot/commit/87e4aa6a48a2d4223c58967837573b73bde34490))
+
 # [0.24.0](https://github.com/globalbrain/sefirot/compare/v0.23.0...v0.24.0) (2021-01-14)
@@ -2,0 +9,0 @@

lib/composables/Card.ts

@@ -0,10 +1,28 @@
+import { Values } from '../types/Utils'
+import { Header } from './Header'
+import { Action } from './Action'
+
+export * from './Header'
+export * from './Action'
+
 export interface Card {
-  collapsable: boolean
+  size?: Size
   header?: Header
+  modules?: Module[]
   footer?: Footer
+  round?: number
+  depth?: number
+  collapsable?: boolean
 }
 
-export interface Header {
-  title: string
-  actions?: Action[]
+export type Size = Values<typeof Sizes>
+
+export const Sizes = {
+  Compact: 'compact',
+  Wide: 'Wide'
+} as const
+
+export interface Module {
+  component: any
+  data?: Record<string, any>
 }
@@ -16,17 +34,12 @@
 
-export interface Action {
-  type?: 'primary' | 'text' | 'mute'
-  mode?: 'neutral' | 'info' | 'success' | 'warning' | 'danger'
-  icon?: string
-  label: string
-  link?: string
-  callback? (): void
+export function useCard(card: Card): Card {
+  return card
 }
 
-export function useHeader(options: Header): Header {
-  return options
+export function useModule(module: Module): Module {
+  return module
 }
 
-export function useFooter(options: Footer): Footer {
-  return options
+export function useFooter(footer: Footer): Footer {
+  return footer
 }

lib/composables/Form.ts

@@ -0,2 +1,5 @@
+export * from './FormData'
+export * from './FormValidation'
+
 export { useFormData as useData } from './FormData'
 export { useFormValidation as useValidation } from './FormValidation'

lib/composables/FormData.ts

 import { reactive } from '@vue/composition-api'
 
-export type Data = Record<string, any>
+export interface Data<T extends State> {
+  data: T
+  update: UpdateFunction
+}
 
-export function useFormData <T extends Data>(data: T) {
-  const wrapped = reactive(data)
+export type State = Record<string, any>
+export type UpdateFunction = (model: string, value: any) => void
 
+export function useFormData<T extends State>(data: T): Data<T> {
+  const state = reactive(data)
+
+  function update(model: string, value: any): void {
+    updateData(state, model, value)
+  }
+
   return {
-    data: wrapped
+    data: state as T,
+    update
   }
 }
+
+function updateData<T extends State>(data: T, model: string, value: any): void {
+  (data as any)[model] = value
+}

lib/composables/FormValidation.ts

 import { Ref, ComputedRef, ref, computed } from '@vue/composition-api'
 import { required } from '../validation/validators'
 import { Rule } from '../validation/rules'
-import { Data } from './FormData'
+import { State } from './FormData'
 
@@ -29,3 +29,3 @@ export interface Validation {
 
-export function useFormValidation(data: Data, rules: Rules, rootData?: Data): Validation {
+export function useFormValidation<T extends State>(data: T, rules: Rules, rootData?: T): Validation {
   const validation = {} as Validation
@@ -40,3 +40,3 @@
 
-function setValidations(validation: Validation, data: Data, rules: Rules, rootData: Data): void {
+function setValidations<T extends State>(validation: Validation, data: T, rules: Rules, rootData: T): void {
   for (const name in rules) {
@@ -51,3 +51,3 @@ const validatorsOrRules = rules[name]
 
-function createValidation(name: string, data: Data, rules: Rule[], rootData: Data): Validation {
+function createValidation<T extends State>(name: string, data: T, rules: Rule[], rootData: T): Validation {
   const isDirty = ref(false)
@@ -120,3 +120,3 @@ const isValid = computed(() => errors.value.length === 0)
 
-function getErrors(name: string, data: Data, rules: Rule[], rootData: Data): Error[] {
+function getErrors<T extends State>(name: string, data: T, rules: Rule[], rootData: T): Error[] {
   return rules.reduce<Error[]>((errors, rule) => {
@@ -123,0 +123,0 @@ const value = data[name]

lib/store/dialog/index.ts

@@ -25,9 +25,9 @@ import { ActionTree, ActionContext } from 'vuex'
   open(context: ActionContext<any, RootState>, { type = 'confirm', title, text, progress, actions = [] }: PayloadOpen): void {
-    context.dispatch('modal/open', {
-      name: 'dialog',
-      data: { type, title, text, progress, actions }
-    }, { root: true })
+    const data = { type, title, text, progress, actions }
+    const name = `dialog-${JSON.stringify(data)}`
+
+    context.dispatch('modal/open', { name, data }, { root: true })
   },
 
-  update(context: ActionContext<any, RootState>, data): void {
+  update(context: ActionContext<any, RootState>, data: PayloadOpen): void {
     context.dispatch('modal/update', data, { root: true })
@@ -34,0 +34,0 @@ },

lib/store/modal/index.ts

@@ -1,7 +0,12 @@
-import { ActionTree, ActionContext, MutationTree } from 'vuex'
+import { GetterTree, ActionTree, ActionContext, MutationTree } from 'vuex'
 import { State as RootState } from '../Sefirot'
 
 export interface State {
-  id: number
   name: string | null
+  history: Item[]
+  first: boolean
+}
+
+export interface Item {
+  name: string
   data: Record<string, any>
@@ -17,11 +22,21 @@ }
   return {
-    id: 0,
     name: null,
-    data: {}
+    history: [],
+    first: true
   }
 }
 
+export const getters: GetterTree<State, RootState> = {
+  active(state: State): Item | null {
+    if (state.name === null) {
+      return null
+    }
+
+    return state.history.find(h => h.name === state.name)!
+  }
+}
+
 export const actions: ActionTree<State, RootState> = {
-  open(context: ActionContext<State, RootState>, { name, data }: PayloadOpen): void {
-    context.commit('set', { name, data })
+  open(context: ActionContext<State, RootState>, item: PayloadOpen): void {
+    context.commit('push', item)
   },
@@ -34,3 +49,9 @@
   close(context: ActionContext<State, RootState>): void {
-    context.commit('delete')
+    context.commit('back')
+    setTimeout(() => { context.commit('pop') }, 250)
+  },
+
+  closeAll(context: ActionContext<State, RootState>): void {
+    context.commit('reset')
+    setTimeout(() => { context.commit('flush') }, 250)
   }
@@ -40,16 +61,30 @@ }
 export const mutations: MutationTree<State> = {
-  set(state: State, { name, data = {} }: PayloadOpen): void {
-    state.id++
+  push(state: State, { name, data = {} }: PayloadOpen): void {
+    state.name === null ? (state.first = true) : (state.first = false)
     state.name = name
-    state.data = data
+    state.history.push({ name, data })
   },
 
   update(state: State, data: Record<string, any>): void {
-    state.data = { ...state.data, ...data }
+    const item = state.history.find(h => h.name === state.name)
+
+    item && (item.data = { ...item.data, ...data })
   },
 
-  delete(state: State): void {
-    state.id = 0
+  back(state: State): void {
+    const latestItem = state.history[state.history.length - 2]
+
+    state.name = latestItem ? latestItem.name : null
+  },
+
+  reset(state: State): void {
     state.name = null
-    state.data = {}
+  },
+
+  pop(state: State): void {
+    state.history.pop()
+  },
+
+  flush(state: State): void {
+    state.history = []
   }
@@ -61,4 +96,5 @@ }
   state,
+  getters,
   actions,
   mutations
 }

package.json

 {
   "name": "@globalbrain/sefirot",
-  "version": "0.24.0",
+  "version": "0.25.0",
   "description": "Vue Components for Global Brain Design System.",
@@ -5,0 +5,0 @@ "files": [

No alert changes

Improved metrics

Total package byte prevSize

218503

increased by3.7%

Number of package files

167

increased by4.38%

Lines of code

1466

increased by11.23%

No dependency changes