rc-dropdown

Project setup

npm i @vagrantir/rc-dropdown

Using component

1import DeviceTargeting from './components/DeviceTargeting.vue';
2
3Vue.component('DeviceTargeting', DeviceTargeting)

1<DeviceTargeting :value="targeting" :change="changeTargeting" :data-options="{disable_search: false}"/>

Properties

1const props = {
2                value: {
3                  type: [Array],
4                  default() {
5                    return [];
6                  },
7                },
8                targetings: {
9                  type: [Array],
10                  default() {
11                    return [
12                      {
13                        value: 1,
14                        name: 'Desktop',
15                        oses: [],
16                        enabled: true
17                      },
18                      {
19                        value: 2,
20                        name: 'Mobile',
21                        oses: [
22                          {
23                            value: 3,
24                            name: 'iOS',
25                            versions: [],
26                            enabled: true
27                          },
28                          {
29                            value: 2,
30                            name: 'Android',
31                            versions: [],
32                            enabled: true
33                          },
34                        ],
35                        enabled: true
36                      },
37                      {
38                        value: 3,
39                        name: 'Tablet',
40                        oses: [],
41                        enabled: true
42                      },
43                    ];
44                  },
45                },
46                settings: {
47                  type: [Object],
48                  default() {
49                    return {
50                    allOsText: 'All OS',
51                    onlyOsText: 'Only {{name}}',
52                    disabledHintText: 'Not allowed for editing',
53                    allowMultipleOsSelection: false,
54                    allowVersionSellection: false,
55                    zeroEqualAll: true,
56                    };
57                  },
58                },
59                disabled: {
60                  type: [Boolean],
61                  default() {
62                    return false;
63                  },
64                },
65              }             
66

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Run your unit tests

npm run test:unit