@globalbrain/sefirot - npm Package Compare versions

Comparing version 0.51.0 to 0.52.0

CHANGELOG.md

@@ -0,1 +1,8 @@
+# [0.52.0](https://github.com/globalbrain/sefirot/compare/v0.51.0...v0.52.0) (2021-05-07)
+
+### Features
+
+* **modal:** explicit modal toggling ([#66](https://github.com/globalbrain/sefirot/issues/66)) ([#67](https://github.com/globalbrain/sefirot/issues/67)) ([5a07160](https://github.com/globalbrain/sefirot/commit/5a07160824a7fcf51cd2dc41063afe0fd88595dd))
+* add tabindex to SInputSelent and SInputDropdown ([#65](https://github.com/globalbrain/sefirot/issues/65)) ([027f71c](https://github.com/globalbrain/sefirot/commit/027f71c89ba15fd488f410c7aec8319a03fc03f1))
+
 # [0.51.0](https://github.com/globalbrain/sefirot/compare/v0.50.0...v0.51.0) (2021-04-26)
@@ -2,0 +9,0 @@

lib/composables/Alert.ts

 import { Values } from '../types/Utils'
 import { useStore } from './Store'
+import { useModalUid } from './Modal'
 
 export interface Alert {
+  open(alert: AlertOptions): () => void
+  close(): void
+}
+
+export interface AlertOptions {
   type?: AlertMode
@@ -28,11 +34,14 @@ title: string
 
-export function useAlert(alert: Alert) {
+export function useAlert(): Alert {
   const store = useStore()
+  const uid = useModalUid()
 
-  function open(): void {
-    store.dispatch('alert/open', alert)
+  function open(alert: AlertOptions) {
+    store.dispatch('alert/open', { ...alert, uid })
+
+    return close
   }
 
-  function close(): void {
-    store.dispatch('alert/close')
+  function close() {
+    store.dispatch('alert/close', uid)
   }
@@ -39,0 +48,0 @@

lib/composables/Dialog.ts

 import { Values } from '../types/Utils'
+import { useStore } from './Store'
+import { useModalUid } from './Modal'
 
 export interface Dialog {
+  open(dialog: DialogOptions): () => void
+  close(): void
+}
+
+export interface DialogOptions {
   type?: DialogType
@@ -10,2 +17,8 @@ title?: string
 
+export interface Action {
+  type?: 'primary' | 'mute'
+  label: string
+  callback(): void
+}
+
 export type DialogType = Values<typeof DialogTypes>
@@ -18,6 +31,20 @@
 
-export interface Action {
-  type?: 'primary' | 'mute'
-  label: string
-  callback(): void
+export function useDialog(): Dialog {
+  const store = useStore()
+  const uid = useModalUid()
+
+  function open(dialog: DialogOptions) {
+    store.dispatch('dialog/open', { ...dialog, uid })
+
+    return close
+  }
+
+  function close() {
+    store.dispatch('dialog/close', uid)
+  }
+
+  return {
+    open,
+    close
+  }
 }

lib/store/alert/index.ts

 import { ActionTree, ActionContext } from 'vuex'
+import SAlert from '../../components/SAlert.vue'
 import { Alert } from '../../composables/Alert'
-import SAlert from '../../components/SAlert.vue'
 import { State as RootState } from '../Sefirot'
 
+export type AlertPayload = Alert & { uid?: number }
+
 export const actions: ActionTree<any, RootState> = {
-  open(context: ActionContext<any, RootState>, alert: Alert): void {
+  open(context: ActionContext<any, RootState>, alert: AlertPayload): void {
+    const { uid } = alert
+
+    delete alert.uid
+
     context.dispatch('modal/open', {
+      uid,
       component: SAlert,
@@ -17,4 +24,4 @@ data: alert,
 
-  close(context: ActionContext<any, RootState>): void {
-    context.dispatch('modal/close', null, { root: true })
+  close(context: ActionContext<any, RootState>, uid?: number): void {
+    context.dispatch('modal/close', uid, { root: true })
   }
@@ -21,0 +28,0 @@ }

lib/store/dialog/index.ts

 import { ActionTree, ActionContext } from 'vuex'
+import SDialog from '../../components/SDialog.vue'
 import { Dialog } from '../../composables/Dialog'
-import SDialog from '../../components/SDialog.vue'
 import { State as RootState } from '../Sefirot'
 
+export type DialogPayload = Dialog & { uid?: number }
+
 export const actions: ActionTree<any, RootState> = {
-  open(context: ActionContext<any, RootState>, dialog: Dialog): void {
+  open(context: ActionContext<any, RootState>, dialog: DialogPayload): void {
+    const { uid } = dialog
+
+    delete dialog.uid
+
     context.dispatch('modal/open', {
+      uid,
       component: SDialog,
@@ -17,4 +24,4 @@ data: dialog,
 
-  close(context: ActionContext<any, RootState>): void {
-    context.dispatch('modal/close', null, { root: true })
+  close(context: ActionContext<any, RootState>, uid?: number): void {
+    context.dispatch('modal/close', uid, { root: true })
   }
@@ -21,0 +28,0 @@ }

lib/store/modal/index.ts

@@ -11,2 +11,3 @@ import { shallowReactive, markRaw } from '@vue/composition-api'
   component: any
+  uid?: number
   data?: Record<string, any>
@@ -32,4 +33,4 @@ options?: Options
 
-  close(context: ActionContext<State, RootState>): void {
-    context.commit('pop')
+  close(context: ActionContext<State, RootState>, uid?: number): void {
+    uid ? context.commit('drop', uid) : context.commit('pop')
   },
@@ -55,2 +56,6 @@
 
+  drop(state: State, uid: number) {
+    state.items = state.items.filter(item => item.uid !== uid)
+  },
+
   flush(state: State): void {
@@ -57,0 +62,0 @@ state.items = []

package.json

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

No alert changes

Improved metrics

Lines of code

1984

increased by3.23%

Worsened metrics

Total package byte prevSize

274229

decreased by-5.02%

Number of package files

196

decreased by-1.01%

No dependency changes