Skip to content

Commit 015afa9

Browse files
VanishMaxVanishMax
authored
Merge pull request #25 from VanishMax/feature/context-menu
ContextMenu
2 parents a62a8cb + 68ed527 commit 015afa9

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+721
-281
lines changed

‎.eslintrc.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,9 @@ module.exports = {
6363
'vue/no-v-html': 0,
6464
'vue/no-unused-components': ['warn'],
6565

66+
// Import disables
67+
'import/extensions': 0,
68+
6669
// Typescript options
6770
'@typescript-eslint/no-explicit-any': 0,
6871
'@typescript-eslint/ban-ts-comment': 0,

‎README.md‎

Lines changed: 88 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,74 @@
11
# Industrial-ui Vue adaptation
22

3-
## Installation
3+
## Usage
4+
5+
### 1. UNPKG
6+
7+
You can install Industrial-ui straight into plain HTML file:
8+
9+
```html
10+
<!DOCTYPE html>
11+
<html>
12+
<head>
13+
<!-- Import your styles -->
14+
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
15+
</head>
16+
<body>
17+
<div id="app">
18+
<iui-button>Hello, world!</iui-button>
19+
</div>
20+
</body>
21+
<!-- Import Vue -->
22+
<script src="https://unpkg.com/vue/dist/vue.js"></script>
423

24+
<!--
25+
Create Industrial-ui configuration.
26+
It is important to have exactly IuiConfig variable name!
27+
-->
28+
<script>
29+
const IuiConfig = {
30+
globalClass: '',
31+
components: { ... },
32+
},
33+
};
34+
</script>
35+
36+
<!-- Import industrial-ui-vue and register as a Vue plugin -->
37+
<script src="https://unpkg.com/industrial-ui-vue"></script>
38+
39+
<!-- Initialize Vue app -->
40+
<script>
41+
new Vue({
42+
el: '#app',
43+
})
44+
</script>
45+
</html>
46+
```
47+
48+
### NPM
49+
50+
Firstly, install the library itself
551
```bash
652
npm i industrial-ui-vue
753
```
854

9-
## Usage
55+
**3. With local imports (recommended)**
56+
57+
You need to register the Industrial-ui plugin that would expose the
58+
$iui instance into Vue virtual machine. Create config file and install
59+
the plugin into the Vue entry:
1060

11-
Firstly, install the IUI plugin with your [configuration](https://industrial-ui.com/docs/configuration).
12-
For this, go to the main vue file and do:
1361
```js
1462
import Vue from 'vue';
1563
import config from './config';
16-
import { iui } from 'industrial-ui-vue';
64+
import {iui} from 'industrial-ui-vue';
1765

1866
Vue.use(iui, config);
1967
```
2068

21-
Now, you are ready to use components inside the app:
22-
69+
In any template file, you can now directly import needed components
70+
and use them as you like:
71+
2372
```html
2473
<template>
2574
<Dropdown>
@@ -31,9 +80,37 @@ Now, you are ready to use components inside the app:
3180
</template>
3281

3382
<script>
34-
import { Dropdown, Button } from 'industrial-ui-vue';
35-
export default {
36-
components: { Dropdown, Button },
37-
};
83+
import { IuiDropdown as Dropdown, IuiButton as Button } from 'industrial-ui-vue';
84+
export default {
85+
components: { Dropdown, Button },
86+
};
3887
</script>
88+
```
89+
90+
**3. As a global plugin**
91+
92+
In this case, Industrial-ui would be registered globally,
93+
and all components will be imported at once.
94+
95+
Install the IUI plugin with your [configuration](https://industrial-ui.com/docs/configuration).
96+
Go to the main vue file and do:
97+
```js
98+
import Vue from 'vue';
99+
import config from './config';
100+
import iui from 'industrial-ui-vue';
101+
102+
Vue.use(iui, config);
103+
```
104+
105+
Now, you are ready to use components inside the app:
106+
107+
```html
108+
<template>
109+
<iui-dropdown>
110+
<template #trigger>
111+
<iui-button>Click on me</iui-button>
112+
</template>
113+
Hello, world!
114+
</iui-dropdown>
115+
</template>
39116
```

‎demo/components/Counter.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
11
<template>
22
<div>
33
<h2>Hello, world</h2>
4-
<Button @click.native="counter++" is:primary>Increase counter</Button>
4+
<IuiButton @click.native="counter++" is:primary>Increase counter</IuiButton>
55
<p>Counter: {{ counter }}</p>
6-
<Button @click.native="close" is:danger>Close modal</Button>
6+
<IuiButton @click.native="close" is:danger>Close modal</IuiButton>
77
</div>
88
</template>
99

1010
<script lang="ts">
1111
import Vue from 'vue';
12-
import Button from '../../src/components/Button';
12+
import {IuiButton} from '@/main';
1313
1414
export default Vue.extend({
1515
name: 'Counter',
16-
components: {Button},
16+
components: {IuiButton},
1717
props: {
1818
close: Function,
1919
},

‎demo/containers/Buttons.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
<template>
22
<section class="w-full rounded shadow-lg p-4">
33
<h2 class="text-xl mb-2">Buttons</h2>
4-
<Button is:primary>LOOL!</Button>
5-
<Button is:danger class="ml-4">DANGEEER!</Button>
4+
<IuiButton is:primary>LOOL!</IuiButton>
5+
<IuiButton is:danger class="ml-4">DANGEEER!</IuiButton>
66
</section>
77
</template>
88

99
<script lang="ts">
1010
import Vue from 'vue';
11-
import Button from '../../src/components/Button';
11+
import {IuiButton} from '@/main';
1212
1313
export default Vue.extend({
1414
name: 'Buttons',
15-
components: {Button},
15+
components: {IuiButton},
1616
});
1717
</script>

‎demo/containers/Checkboxes.vue‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
<template>
22
<section class="w-full rounded shadow-lg p-4">
33
<h2 class="text-xl mb-2">Checkbox</h2>
4-
<Checkbox name="cbx1" id="opt1" label="Hello">
4+
<IuiCheckbox name="cbx1" id="opt1" label="Hello">
55
<span class="w-4 h-4 inline-block mr-6 rounded flex-no-shrink">
66
<svg viewBox="0 0 12 10">
77
<path d="M10 2L4.5 7.5L2 5" />
88
</svg>
99
</span>
1010
Hello
11-
</Checkbox>
11+
</IuiCheckbox>
1212

1313
<h2 class="text-xl mb-2">Checkbox group</h2>
14-
<CheckboxGroup
14+
<IuiCheckboxGroup
1515
:options="options"
1616
:values="[options[0], options[2]]"
1717
:max-amount="3"
@@ -25,18 +25,17 @@
2525
</span>
2626
<span class="whitespace-no-wrap">{{ option.label }}</span>
2727
</template>
28-
</CheckboxGroup>
28+
</IuiCheckboxGroup>
2929
</section>
3030
</template>
3131

3232
<script lang="ts">
3333
import Vue from 'vue';
34-
import Checkbox from '../../src/components/Checkbox';
35-
import CheckboxGroup from '../../src/components/CheckboxGroup';
34+
import {IuiCheckbox, IuiCheckboxGroup} from '@/main';
3635
3736
export default Vue.extend({
3837
name: 'Checkboxes',
39-
components: {Checkbox, CheckboxGroup},
38+
components: {IuiCheckbox, IuiCheckboxGroup},
4039
data () {
4140
return {
4241
options: [

‎demo/containers/ContextMenus.vue‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
<template>
2+
<section class="w-full rounded shadow-lg p-4">
3+
<h2 class="text-xl mb-2">Context menus</h2>
4+
5+
<IuiButton is:primary @contextmenu.native="(e) => $refs.cm.toggle(e)">Right click me</IuiButton>
6+
<IuiButton is:danger class="mt-4 block" @click.native="open = !open">Left click, v-model CM</IuiButton>
7+
<IuiButton is:danger class="mt-4 block" @click.native="(e) => $refs.cm1.toggle(e)">Left click, fixed position</IuiButton>
8+
<IuiButton is:primary class="mt-4 block" @click.native="(e) => $refs.cm.toggle(e)">Left click, relative position</IuiButton>
9+
<IuiButton is:danger class="mt-4 block" @click.native="(e) => $refs.cm2.toggle(e)">Left click, bottom position</IuiButton>
10+
11+
<IuiContextMenu
12+
ref="cm"
13+
tag="ul"
14+
class="bg-white w-32 py-2 px-0 m-0 list-none rounded z-50 shadow-lg"
15+
position="auto"
16+
position-relative="section"
17+
>
18+
<template #default="slotProps">
19+
<li class="py-1 px-2 hover:bg-blue-100 border-b cursor-pointer" @click="slotProps.close()">Hello</li>
20+
<li class="py-1 px-2 hover:bg-blue-100 cursor-pointer" @click="slotProps.close()">World</li>
21+
</template>
22+
</IuiContextMenu>
23+
24+
<IuiContextMenu
25+
v-model="open"
26+
:fixed-position="{x: 150, y: 10}"
27+
tag="ul"
28+
class="bg-white w-32 py-2 px-0 m-0 list-none rounded z-50 shadow-lg"
29+
>
30+
<template #default="slotProps">
31+
<li class="py-1 px-2 hover:bg-blue-100 border-b cursor-pointer" @click="slotProps.close()">Hello</li>
32+
<li class="py-1 px-2 hover:bg-blue-100 cursor-pointer" @click="slotProps.close()">World</li>
33+
</template>
34+
</IuiContextMenu>
35+
36+
<IuiContextMenu
37+
ref="cm1"
38+
tag="ul"
39+
fixed-position
40+
class="bg-white w-32 py-2 px-0 m-0 list-none rounded z-50 shadow-lg"
41+
>
42+
<template #default="slotProps">
43+
<li class="py-1 px-2 hover:bg-blue-100 border-b cursor-pointer" @click="slotProps.close()">Hello</li>
44+
<li class="py-1 px-2 hover:bg-blue-100 cursor-pointer" @click="slotProps.close()">World</li>
45+
</template>
46+
</IuiContextMenu>
47+
48+
<IuiContextMenu
49+
ref="cm2"
50+
tag="div"
51+
style="width: 150px"
52+
class="bg-white py-2 px-0 rounded z-50 shadow-lg"
53+
position="bottom left"
54+
>
55+
<template #default="slotProps">
56+
<ul class="p-0 m-0 list-none">
57+
<li class="py-1 px-2 hover:bg-blue-100 border-b cursor-pointer" @click="slotProps.close()">Hello</li>
58+
<li class="py-1 px-2 hover:bg-blue-100 cursor-pointer" @click="slotProps.close()">World</li>
59+
</ul>
60+
</template>
61+
</IuiContextMenu>
62+
</section>
63+
</template>
64+
65+
<script lang="ts">
66+
import Vue from 'vue';
67+
import {IuiContextMenu, IuiButton} from '@/main';
68+
69+
export default Vue.extend({
70+
name: 'Buttons',
71+
components: {IuiContextMenu, IuiButton},
72+
data () {
73+
return {
74+
open: false,
75+
};
76+
},
77+
});
78+
</script>

‎demo/containers/DropdownSelects.vue‎

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
<template>
22
<section class="w-full rounded shadow-lg p-4">
33
<h2 class="text-xl mb-2">Dropdown select</h2>
4-
<DropdownSelect
4+
<IuiDropdownSelect
55
v-model="values"
66
:options="options1"
77
group-name="dd-select-1"
88
:dropdown-props="{dropdownClass: 'mt-2 w-full'}"
99
>
1010
<template #trigger>
11-
<Button is:primary>Open multiselect</Button>
11+
<IuiButton is:primary>Open multiselect</IuiButton>
1212
</template>
1313
<template #option="option">
1414
<span class="w-4 h-4 inline-block mr-6 rounded flex-no-shrink">
@@ -18,11 +18,11 @@
1818
</span>
1919
<span class="whitespace-no-wrap">{{ option.label }}</span>
2020
</template>
21-
</DropdownSelect>
21+
</IuiDropdownSelect>
2222

2323
<br>
2424

25-
<DropdownSelect
25+
<IuiDropdownSelect
2626
v-model="value"
2727
:options="options1"
2828
:multiple="false"
@@ -32,26 +32,25 @@
3232
:dropdown-props="{dropdownClass: 'mt-2 w-full p-2'}"
3333
>
3434
<template #trigger>
35-
<Button is:danger>Open radio select</Button>
35+
<IuiButton is:danger>Open radio select</IuiButton>
3636
</template>
3737
<template #option="option">
3838
<span class="w-6 h-6 inline-block mr-2 rounded-full border border-grey flex-no-shrink" />
3939
{{ option.label }}
4040
</template>
41-
</DropdownSelect>
41+
</IuiDropdownSelect>
4242
</section>
4343
</template>
4444

4545
<script lang="ts">
4646
import Vue from 'vue';
47-
import DropdownSelect from '../../src/components/DropdownSelect';
48-
import Button from '../../src/components/Button';
47+
import {IuiDropdownSelect, IuiButton} from '@/main';
4948
5049
export default Vue.extend({
5150
name: 'Dropdowns',
5251
components: {
53-
Button,
54-
DropdownSelect,
52+
IuiButton,
53+
IuiDropdownSelect,
5554
},
5655
data () {
5756
return {

0 commit comments

Comments
 (0)