build v0.7.0

CHANGELOG.md

@@ -1,3 +1,46 @@
+## 0.7.0
+
+### feat: MutliDropdownButton
+
+Usage:
+
+Create controller in setup or anywehere and
+give generic type to use
+
+```typescript
+const IndexedText {
+  id: string
+  text: string
+}
+
+
+const multiDropdownController = new MutliDropdownFieldController<IndexedText>(
+  { keyofValue: 'id' }
+)
+```
+
+Then use MultiDropdownButton with DropdownMenuItem in items
+to make it work
+
+```typescript
+MultiDropdownButton({
+  controller: multiDropdownController,
+  items: dropdownItems.map((el) =>
+    DropdownMenuItem({
+      child: Text({
+        text: ref(el.text),
+      }),
+      value: el,
+      key: el.id,
+      title: el.text,
+    })
+  ),
+}),
+```
+
+To get or change selected values use:
+`controller.value`
+
 ## 0.6.0
 
 ### feat: Provider

README.md

@@ -200,9 +200,51 @@ ElevatedButton({
 To close, just use `navigationController.pop()`
 
 - [x] Navigation & NavigationController
+
   - [x] Popup (with background) functionality
   - [x] Fullscreen functionality
 
+- [x] MultiDropdown Button
+
+Usage:
+
+Create controller in setup or anywehere and
+give generic type to use
+
+```typescript
+const IndexedText {
+  id: string
+  text: string
+}
+
+
+const multiDropdownController = new MutliDropdownFieldController<IndexedText>(
+  { keyofValue: 'id' }
+)
+```
+
+Then use MultiDropdownButton with DropdownMenuItem in items
+to make it work
+
+```typescript
+MultiDropdownButton({
+  controller: multiDropdownController,
+  items: dropdownItems.map((el) =>
+    DropdownMenuItem({
+      child: Text({
+        text: ref(el.text),
+      }),
+      value: el,
+      key: el.id,
+      title: el.text,
+    })
+  ),
+}),
+```
+
+To get or change selected values use:
+`controller.value`
+
 ### Usage:
 
 Add controller into MultiPorvider and Navigation widget below:
@@ -216,11 +258,9 @@ MultiProvider.create({
 })
 ```
 
-## WIP
-
-- [] DropdownButton, DropdownButtonItem
-  [x] functionality
-  [] decoration
+- [x] DropdownButton, DropdownButtonItem
+      [x] functionality
+      [] decoration
 
 - [] Visibility
   [x] functionality
@@ -236,6 +276,8 @@ MultiProvider.create({
       [x] Basic
       [] Style
 
+## WIP
+
 - [] GestureDetecture
   [x] click
   [] tap

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@xsoulspace/vue_flutter_tailwind",
   "description": "Vue3 styled like Flutter with Tailwind CSS",
-  "version": "0.6.16",
+  "version": "0.7.0",
   "private": false,
   "author": {
     "name": "Anton Malofeev",

src/abstract/DropdownFieldController.ts

@@ -16,7 +16,7 @@ interface DropdownButtonAbstractI<TValue> {
 
 export interface MultiDropdownButtonI<
   TValue,
-  TKeyValue extends MutliDropdownSelectedItem<TValue>
+  TKeyValue extends MutliDropdownSelectedItemI<TValue>
 > extends DropdownButtonAbstractI<TValue> {
   controller: MutliDropdownFieldController<TValue, TKeyValue>
   onCreateNew?: Maybe<
@@ -44,40 +44,29 @@ export interface DropdownFieldControllerI<I>
   value?: Maybe<I>
 }
 
-export interface MutliDropdownFieldControllerI<
-  TValue,
-  TKeyValue extends MutliDropdownSelectedItem<TValue>
-> extends DropdownFieldControllerAbstractI {
-  value?: Maybe<TKeyValue>[]
-}
-
-interface MutliDropdownSelectedItemI<TValue> {
-  key: string
-  value: TValue
+export interface MutliDropdownFieldControllerI<TValue>
+  extends DropdownFieldControllerAbstractI {
+  value?: Maybe<TValue>[]
+  keyofValue: keyof TValue
 }
 /**
  * This class provides a way to create selected items from
  * outside for`{MutliDropdownFieldController.value}`
  */
-export class MutliDropdownSelectedItem<
-  TValue extends
-    | string
-    | number
-    | boolean
-    | { [prop: string]: any }
-    | { [prop: number]: any }
-> {
-  key: string
+export type MutliDropdownSelectedItemI<TValue> = {
+  key: TValue[keyof TValue] | string
   value: TValue
-
-  constructor({ key, value }: MutliDropdownSelectedItemI<TValue>) {
-    this.key = key
-    this.value = value
-  }
-
-  static use<TValue>(arg: MutliDropdownSelectedItemI<TValue>) {
-    return new MutliDropdownSelectedItem<TValue>(arg)
-  }
+}
+/**
+ * This is typeguard for MutliDropdownSelectedItemI interface
+ */
+export const isMutliDropdownSelectedItem = <
+  TValue,
+  TKeyValue extends MutliDropdownSelectedItemI<TValue>
+>(
+  arg: Record<string, unknown>
+): arg is TKeyValue => {
+  return 'key' in arg && 'value' in arg
 }
 /**
  * This class provides a way to create selected items from
@@ -148,42 +137,73 @@ type TKeyValueIndex = number
 //  TODO: add properties
 export class MutliDropdownFieldController<
   TValue,
-  TKeyValue extends MutliDropdownSelectedItem<TValue> = MutliDropdownSelectedItem<TValue>
+  TKeyValue extends MutliDropdownSelectedItemI<TValue> = MutliDropdownSelectedItemI<TValue>
 > extends DropdownFieldControllerAbstract {
   private _reactVal: {
-    val: Maybe<MutliDropdownSelectedItem<TValue>>[]
+    val: Maybe<TKeyValue>[]
   } = reactive({
     val: [],
   })
+  keyofValue: keyof TValue
   constructor({
     value,
     readOnly,
     maxLines,
     maxLength,
-  }: MutliDropdownFieldControllerI<TValue, TKeyValue>) {
+    keyofValue,
+  }: MutliDropdownFieldControllerI<TValue>) {
     super({
       maxLength,
       maxLines,
       readOnly,
     })
-    this.value = value ?? []
+    this.keyofValue = keyofValue
+    const keyValues = this.toKeyValues({ values: value ?? [] })
+    this.keyValue = keyValues
+  }
+  toRawValues({ values }: { values: Maybe<TKeyValue>[] }): Maybe<TValue>[] {
+    return values.map((el) => el?.value)
+  }
+  toKeyValues({ values }: { values: Maybe<TValue>[] }): Maybe<TKeyValue>[] {
+    return values.filter(isNotNull).map((value) => {
+      const key = value[this.keyofValue]
+      const keyValue: MutliDropdownSelectedItemI<TValue> = {
+        key,
+        value,
+      }
+      if (isMutliDropdownSelectedItem<TValue, TKeyValue>(keyValue)) {
+        return keyValue
+      }
+      return
+    })
   }
+
   get valueIndexesByKeyMap() {
-    const map = new Map<TKeyValue['key'], TKeyValueIndex>()
+    const map = new Map<TKeyValue['key'] | string, TKeyValueIndex>()
 
-    const filteredValues = this.value.filter(isNotNull)
+    const filteredValues = this.keyValue.filter(isNotNull)
     for (let i = 0; i < filteredValues.length; i++) {
       const val = filteredValues[i]
       map.set(val.key, i)
     }
     return map
   }
-  set value(val: Maybe<MutliDropdownSelectedItem<TValue>>[]) {
+  set keyValue(val: Maybe<TKeyValue>[]) {
     this._reactVal.val = val
   }
-  get value() {
+  get keyValue() {
     return this._reactVal.val
   }
+  set value(val: Maybe<TValue>[]) {
+    this.keyValue = this.toKeyValues({
+      values: val,
+    })
+  }
+  get value() {
+    return this.toRawValues({
+      values: this.keyValue,
+    })
+  }
   get reactive() {
     return this._reactVal
   }

src/components/DropdownMenuItem.tsx

@@ -10,7 +10,7 @@ interface DropdownMenuItemI<I> {
   child: Component
   key: string
   onTap?: Maybe<CallableFunction>
-  value?: Maybe<I>
+  value: Maybe<I>
   title: string
 }