BREAKING CHANGE: DropdownButton and DropdownMenuItem title now is ref

fix: typo MutliDropdownController to MultiDropdownController
build: v0.7.2

CHANGELOG.md

@@ -1,6 +1,6 @@
 ## 0.7.0
 
-### feat: MutliDropdownButton
+### feat: MultiDropdownButton
 
 Usage:
 
@@ -14,7 +14,7 @@ const IndexedText {
 }
 
 
-const multiDropdownController = new MutliDropdownFieldController<IndexedText>(
+const multiDropdownController = new MultiDropdownFieldController<IndexedText>(
   { keyofValue: 'id' }
 )
 ```

README.md

@@ -218,7 +218,7 @@ const IndexedText {
 }
 
 
-const multiDropdownController = new MutliDropdownFieldController<IndexedText>(
+const multiDropdownController = new MultiDropdownFieldController<IndexedText>(
   { keyofValue: 'id' }
 )
 ```

package.json

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

src/abstract/DropdownFieldController.ts

@@ -16,9 +16,9 @@ interface DropdownButtonAbstractI<TValue> {
 
 export interface MultiDropdownButtonI<
   TValue,
-  TKeyValue extends MutliDropdownSelectedItemI<TValue>
+  TKeyValue extends MultiDropdownSelectedItemI<TValue>
 > extends DropdownButtonAbstractI<TValue> {
-  controller: MutliDropdownFieldController<TValue, TKeyValue>
+  controller: MultiDropdownFieldController<TValue, TKeyValue>
   onCreateNew?: Maybe<
     ({ editingText }: { editingText: string }) => Promise<void>
   >
@@ -44,35 +44,35 @@ export interface DropdownFieldControllerI<I>
   value?: Maybe<I>
 }
 
-export interface MutliDropdownFieldControllerI<TValue>
+export interface MultiDropdownFieldControllerI<TValue>
   extends DropdownFieldControllerAbstractI {
   value?: Maybe<TValue>[]
   keyofValue: keyof TValue
 }
 /**
  * This class provides a way to create selected items from
- * outside for`{MutliDropdownFieldController.value}`
+ * outside for`{MultiDropdownFieldController.value}`
  */
-export type MutliDropdownSelectedItemI<TValue> = {
+export type MultiDropdownSelectedItemI<TValue> = {
   key: TValue[keyof TValue] | string
   value: TValue
 }
 /**
- * This is typeguard for MutliDropdownSelectedItemI interface
+ * This is typeguard for MultiDropdownSelectedItemI interface
  */
-export const isMutliDropdownSelectedItem = <
+export const isMultiDropdownSelectedItem = <
   TValue,
-  TKeyValue extends MutliDropdownSelectedItemI<TValue>
+  TKeyValue extends MultiDropdownSelectedItemI<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
- * `{ItemBuilder}` for``{MutliDropdown}``
+ * `{ItemBuilder}` for``{MultiDropdown}``
  */
-export interface MutliDropdownSelectedValueI<TValue> {
+export interface MultiDropdownSelectedValueI<TValue> {
   selected: boolean
   value: TValue
 }
@@ -135,9 +135,9 @@ export class DropdownFieldController<
 type TKeyValueIndex = number
 
 //  TODO: add properties
-export class MutliDropdownFieldController<
+export class MultiDropdownFieldController<
   TValue,
-  TKeyValue extends MutliDropdownSelectedItemI<TValue> = MutliDropdownSelectedItemI<TValue>
+  TKeyValue extends MultiDropdownSelectedItemI<TValue> = MultiDropdownSelectedItemI<TValue>
 > extends DropdownFieldControllerAbstract {
   private _reactVal: {
     val: Maybe<TKeyValue>[]
@@ -151,7 +151,7 @@ export class MutliDropdownFieldController<
     maxLines,
     maxLength,
     keyofValue,
-  }: MutliDropdownFieldControllerI<TValue>) {
+  }: MultiDropdownFieldControllerI<TValue>) {
     super({
       maxLength,
       maxLines,
@@ -167,11 +167,11 @@ export class MutliDropdownFieldController<
   toKeyValues({ values }: { values: Maybe<TValue>[] }): Maybe<TKeyValue>[] {
     return values.filter(isNotNull).map((value) => {
       const key = value[this.keyofValue]
-      const keyValue: MutliDropdownSelectedItemI<TValue> = {
+      const keyValue: MultiDropdownSelectedItemI<TValue> = {
         key,
         value,
       }
-      if (isMutliDropdownSelectedItem<TValue, TKeyValue>(keyValue)) {
+      if (isMultiDropdownSelectedItem<TValue, TKeyValue>(keyValue)) {
         return keyValue
       }
       return

src/abstract/DropdownMenuItem.ts

@@ -1,10 +1,10 @@
-import { Component } from 'vue'
+import { Component, Ref } from 'vue'
 import { Maybe } from './BasicTypes'
 
 // The key must be assigned to let compare items automatically
 export type DropdownMenuItemConstructor<I> = {
   widget: Component
   value?: Maybe<I>
   key: string
-  title: string
+  title: Ref<string>
 }

src/components/DropdownButton.tsx

@@ -43,7 +43,7 @@ export const DropdownButton = <
     items.find((el) => el.key == controller.key.value)
   )
   // init
-  textFieldController.text.value = selectedItem.value?.title ?? ''
+  textFieldController.text.value = selectedItem.value?.title.value ?? ''
   const isMenuOpened = ref(false)
 
   const itemsDropdown = defineComponent({
@@ -91,7 +91,7 @@ export const DropdownButton = <
                       if (item == null) return Container({})
                       controller.value = item.value
                       controller.key.value = item.key
-                      textFieldController.text.value = item.title
+                      textFieldController.text.value = item.title.value
                       isMenuOpened.value = false
                       if (onChanged && item.value) {
                         onChanged(item.value, oldValue)

src/components/DropdownMenuItem.tsx

@@ -1,4 +1,4 @@
-import { Component, defineComponent, h } from 'vue'
+import { Component, defineComponent, h, Ref } from 'vue'
 import { Alignment } from '../abstract/Alignment'
 import { Maybe } from '../abstract/BasicTypes'
 import { DropdownMenuItemConstructor } from '../abstract/DropdownMenuItem'
@@ -11,7 +11,7 @@ interface DropdownMenuItemI<I> {
   key: string
   onTap?: Maybe<CallableFunction>
   value: Maybe<I>
-  title: string
+  title: Ref<string>
 }
 
 export const DropdownMenuItem = <I extends unknown>({

src/components/MutliDropdownButton.tsx → src/components/MultiDropdownButton.tsx

@@ -4,10 +4,10 @@ import { BoxDecoration } from '../abstract/BoxDecoration'
 import { BoxShadow } from '../abstract/BoxShadow'
 import { Colors } from '../abstract/Colors'
 import {
-  isMutliDropdownSelectedItem,
+  isMultiDropdownSelectedItem,
   MultiDropdownButtonI,
-  MutliDropdownSelectedItemI,
-  MutliDropdownSelectedValueI,
+  MultiDropdownSelectedItemI,
+  MultiDropdownSelectedValueI,
 } from '../abstract/DropdownFieldController'
 import { DropdownMenuItemConstructor } from '../abstract/DropdownMenuItem'
 import { EdgeInsets, EdgeInsetsStep } from '../abstract/EdgeInsets'
@@ -46,7 +46,7 @@ import { Wrap } from './Wrap'
  * }
  *
  *
- * const multiDropdownController = new MutliDropdownFieldController<IndexedText>(
+ * const multiDropdownController = new MultiDropdownFieldController<IndexedText>(
  *   { keyofValue: 'id' }
  * )
  * ```
@@ -81,7 +81,7 @@ export const MultiDropdownButton = <
     | boolean
     | { [prop: string]: any }
     | { [prop: number]: any },
-  TKeyValue extends MutliDropdownSelectedItemI<TValue>
+  TKeyValue extends MultiDropdownSelectedItemI<TValue>
 >({
   items,
   elevation,
@@ -129,18 +129,18 @@ export const MultiDropdownButton = <
     item,
     key,
   }: {
-    item: MutliDropdownSelectedValueI<DropdownMenuItemConstructor<TValue>>
+    item: MultiDropdownSelectedValueI<DropdownMenuItemConstructor<TValue>>
     key: TKeyValue['key'] | string
   }) => {
     const val = item.value.value
     if (val != null) {
-      const selectedItem: MutliDropdownSelectedItemI<TValue> = {
+      const selectedItem: MultiDropdownSelectedItemI<TValue> = {
         key,
         value: val,
       }
 
       const selectedItemIndex = controller.valueIndexesByKeyMap.get(key)
-      if (isMutliDropdownSelectedItem<TValue, TKeyValue>(selectedItem)) {
+      if (isMultiDropdownSelectedItem<TValue, TKeyValue>(selectedItem)) {
         if (selectedItemIndex != null && selectedItemIndex >= 0) {
           controller.keyValue.splice(selectedItemIndex, 1, selectedItem)
         } else {
@@ -170,7 +170,7 @@ export const MultiDropdownButton = <
     },
     setup() {
       const effectiveItems = computed<
-        MutliDropdownSelectedValueI<DropdownMenuItemConstructor<TValue>>[]
+        MultiDropdownSelectedValueI<DropdownMenuItemConstructor<TValue>>[]
       >(() =>
         items
           .filter((el) => {

src/components/index.ts

@@ -28,7 +28,7 @@ export * from './ListViewItem'
 export * from './Margin'
 export * from './Material'
 export * from './MouseRegion'
-export * from './MutliDropdownButton'
+export * from './MultiDropdownButton'
 export * from './Navigation'
 export * from './Opacity'
 export * from './Padding'

src/example/App.tsx

@@ -26,7 +26,7 @@ import {
   ListView,
   MainAxisAlignment,
   MouseRegion,
-  MutliDropdownFieldController,
+  MultiDropdownFieldController,
   Padding,
   Row,
   Scaffold,
@@ -111,7 +111,7 @@ export const WrapperApp = () => {
         }),
         value: el,
         key: el.id.toString(),
-        title: el.text,
+        title: ref(el.text),
       })
     ),
     controller: dropdownFieldController,
@@ -181,7 +181,7 @@ export const WrapperApp = () => {
           })
         ),
       })
-      const multiDropdownController = new MutliDropdownFieldController<IndexedText>(
+      const multiDropdownController = new MultiDropdownFieldController<IndexedText>(
         { keyofValue: 'id' }
       )
       watch(
@@ -223,7 +223,7 @@ export const WrapperApp = () => {
                               }),
                               value: el,
                               key: el.id.toString(),
-                              title: el.text,
+                              title: ref(el.text),
                             })
                           ),
                         }),