https://github.com/xuuui/v-dict

Vue3 Dict Manager
https://github.com/xuuui/v-dict

dict dictionary typescript v-dict vue vue3

Last synced: about 1 month ago
JSON representation

Vue3 Dict Manager

• Host: GitHub
• URL: https://github.com/xuuui/v-dict
• Owner: xuuui
• Created: 2024-01-11T18:57:59.000Z (12 months ago)
• Default Branch: main
• Last Pushed: 2024-08-14T08:28:27.000Z (5 months ago)
• Last Synced: 2024-11-01T05:18:16.931Z (2 months ago)
• Topics: dict, dictionary, typescript, v-dict, vue, vue3
• Language: TypeScript
• Homepage:
• Size: 171 KB
• Stars: 4
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

README

        


# Vue3 Dict Manager

## Installation

```sh

npm i v-dict

```

## Examples

### dict.ts

```ts

import { createDictManager, defineDictData } from 'v-dict'

export const dm = createDictManager({

  // method to fetch remote dict

  fetch: (code) =>

    Promise.resolve([

      { label: 'xx', value: 'xx' },

      { label: 'xx', value: 'xx' }

    ]),

  // extra attr

  extra: ({ loadPromise, load, list, map, E }) => {

    return {

      getLabel: (value: string) => map[value]?.label

    }

  }

})

// same api for local dict or remote dict

// local

export const useStatusDict = dm.defineDict('STATUS', {

  data: defineDictData({

    ENABLED: {

      label: 'Enabled',

      // extra attr

      color: 'green'

    },

    DISABLED: {

      label: 'Disabled',

      color: 'red'

    }

  })

})

// remote

export const useRemoteStatusDict = dm.defineDict('REMOTE_STATUS', {

  remote: true,

  // overwrite dm fetch

  fetch: (code) =>

   // code = 'REMOTE_STATUS'

    Promise.resolve([

      { label: 'Enabled', value: 'ENABLED', color: 'green' },

      { label: 'Disabled', value: 'DISABLED' color: 'red' }

    ]),

  // merge dm extra

  extra: ({ loadPromise, load, list, map, E }) => {

    return {

      getItem: (value: string) => map[value]

    }

  }

})

// clear dict data

// dm.clear('REMOTE_STATUS')

// clear all dict data

// dm.clear()

```

### xx.vue

```vue

  


    {{ statusDict.E }}

    {{ statusDict.map }}

    {{ statusDict.list }}

    {{ statusDict.getLabel(statusDict.E.ENABLED) }}

    {{ statusDict.getItem(statusDict.E.DISABLED) }}

  


import { useRemoteStatusDict } from './dict'

import { onMounted } from 'vue'

const statusDict = useRemoteStatusDict({

  // Data sharing by default, independent data source when clone is true

  clone: true,

  // Whether the remote dictionary loads data immediately

  immediate: false,

  // whether to reload

  refresh: false

}) // statusDict is reactive!!!

const { E, map, list } = statusDict

/* 

E: {

  ENABLED: 'ENABLED',

  DISABLED: 'DISABLED'

}

map: {

  ENABLED: {

    label: 'Enabled',

    value: 'ENABLED',

    color: 'green'

  },

  DISABLED: {

    label: 'Disabled',

    value: 'DISABLED',

    color: 'red'

  }

}

list: [

  {

    label: 'Enabled',

    value: 'ENABLED',

    color: 'green'

  },

  {

    label: 'Disabled',

    value: 'DISABLED',

    color: 'red'

  }

]

*/

onMounted(async () => {

  await statusDict.load()

  await statusDict.loadPromise // immediate = true, using loadPromise to wait load

  // do after dict load

  console.log(statusDict.list)

  // clear dict data

  // statusDict.clear()

})

```