@lemonadejs/dropdown 3.1.12 → 3.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +172 -114
- package/dist/index.d.ts +84 -84
- package/dist/index.js +807 -805
- package/dist/react.d.ts +15 -15
- package/dist/react.js +36 -36
- package/dist/style.css +373 -307
- package/dist/vue.d.ts +14 -14
- package/dist/vue.js +45 -45
- package/package.json +23 -23
package/README.md
CHANGED
|
@@ -1,114 +1,172 @@
|
|
|
1
|
-
# LemonadeJS Dropdown
|
|
2
|
-
|
|
3
|
-
[Official website and documentation is here](https://lemonadejs.net/components/dropdown)
|
|
4
|
-
|
|
5
|
-
Compatible with Vanilla JavaScript, LemonadeJS, React, Vue or Angular.
|
|
6
|
-
|
|
7
|
-
The LemonadeJS Dropdown is a versatile solution for efficient option management. It is a framework-agnostic JavaScript plugin designed for seamless integration with Vue, React, and Angular. This feature-rich dropdown incorporates autocomplete for swift selections, grouping for organized options, and lazy loading for optimized performance, contributing to a smooth and improved user experience.
|
|
8
|
-
|
|
9
|
-
## Features
|
|
10
|
-
|
|
11
|
-
- Lightweight: The JavaScript Dropdown is only about 2 KBytes;
|
|
12
|
-
- Integration: It can be used as a standalone library or integrated with any modern framework;
|
|
13
|
-
|
|
14
|
-
## Getting Started
|
|
15
|
-
|
|
16
|
-
You can install using NPM or using directly from a CDN.
|
|
17
|
-
|
|
18
|
-
### npm Installation
|
|
19
|
-
|
|
20
|
-
To install it in your project using npm, run the following command:
|
|
21
|
-
|
|
22
|
-
```bash
|
|
23
|
-
$ npm install @lemonadejs/dropdown
|
|
24
|
-
```
|
|
25
|
-
|
|
26
|
-
### CDN
|
|
27
|
-
|
|
28
|
-
To use Dropdown via a CDN, include the following script tags in your HTML file:
|
|
29
|
-
|
|
30
|
-
```html
|
|
31
|
-
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
|
|
32
|
-
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@lemonadejs/modal/dist/index.min.js"></script>
|
|
33
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/modal/dist/style.min.css" />
|
|
34
|
-
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@lemonadejs/dropdown/dist/index.min.js"></script>
|
|
35
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/dropdown/dist/style.min.css" />
|
|
36
|
-
```
|
|
37
|
-
|
|
38
|
-
### Usage
|
|
39
|
-
|
|
40
|
-
Quick example with Lemonade
|
|
41
|
-
|
|
42
|
-
```javascript
|
|
43
|
-
import Dropdown from '@lemonadejs/dropdown';
|
|
44
|
-
import '@lemonadejs/dropdown/dist/style.css'
|
|
45
|
-
import '@lemonadejs/modal/dist/style.css';
|
|
46
|
-
|
|
47
|
-
export default function App() {
|
|
48
|
-
const self = this;
|
|
49
|
-
|
|
50
|
-
self.data = [
|
|
51
|
-
{ text: "Red", value: 1 },
|
|
52
|
-
{ text: "Blue", value: 2 },
|
|
53
|
-
{ text: "Green", value: 3 },
|
|
54
|
-
{ text: "Yellow", value: 4 },
|
|
55
|
-
{ text: "Purple", value: 5 },
|
|
56
|
-
{ text: "Gray", value: 6 },
|
|
57
|
-
]
|
|
58
|
-
|
|
59
|
-
return `<div>
|
|
60
|
-
<Dropdown :data="self.data" :value="1" />
|
|
61
|
-
</div>`
|
|
62
|
-
}
|
|
63
|
-
```
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
1
|
+
# LemonadeJS Dropdown
|
|
2
|
+
|
|
3
|
+
[Official website and documentation is here](https://lemonadejs.net/components/dropdown)
|
|
4
|
+
|
|
5
|
+
Compatible with Vanilla JavaScript, LemonadeJS, React, Vue or Angular.
|
|
6
|
+
|
|
7
|
+
The LemonadeJS Dropdown is a versatile solution for efficient option management. It is a framework-agnostic JavaScript plugin designed for seamless integration with Vue, React, and Angular. This feature-rich dropdown incorporates autocomplete for swift selections, grouping for organized options, and lazy loading for optimized performance, contributing to a smooth and improved user experience.
|
|
8
|
+
|
|
9
|
+
## Features
|
|
10
|
+
|
|
11
|
+
- Lightweight: The JavaScript Dropdown is only about 2 KBytes;
|
|
12
|
+
- Integration: It can be used as a standalone library or integrated with any modern framework;
|
|
13
|
+
|
|
14
|
+
## Getting Started
|
|
15
|
+
|
|
16
|
+
You can install using NPM or using directly from a CDN.
|
|
17
|
+
|
|
18
|
+
### npm Installation
|
|
19
|
+
|
|
20
|
+
To install it in your project using npm, run the following command:
|
|
21
|
+
|
|
22
|
+
```bash
|
|
23
|
+
$ npm install @lemonadejs/dropdown
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
### CDN
|
|
27
|
+
|
|
28
|
+
To use Dropdown via a CDN, include the following script tags in your HTML file:
|
|
29
|
+
|
|
30
|
+
```html
|
|
31
|
+
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
|
|
32
|
+
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@lemonadejs/modal/dist/index.min.js"></script>
|
|
33
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/modal/dist/style.min.css" />
|
|
34
|
+
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@lemonadejs/dropdown/dist/index.min.js"></script>
|
|
35
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/dropdown/dist/style.min.css" />
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
### Usage
|
|
39
|
+
|
|
40
|
+
Quick example with Lemonade
|
|
41
|
+
|
|
42
|
+
```javascript
|
|
43
|
+
import Dropdown from '@lemonadejs/dropdown';
|
|
44
|
+
import '@lemonadejs/dropdown/dist/style.css'
|
|
45
|
+
import '@lemonadejs/modal/dist/style.css';
|
|
46
|
+
|
|
47
|
+
export default function App() {
|
|
48
|
+
const self = this;
|
|
49
|
+
|
|
50
|
+
self.data = [
|
|
51
|
+
{ text: "Red", value: 1 },
|
|
52
|
+
{ text: "Blue", value: 2 },
|
|
53
|
+
{ text: "Green", value: 3 },
|
|
54
|
+
{ text: "Yellow", value: 4 },
|
|
55
|
+
{ text: "Purple", value: 5 },
|
|
56
|
+
{ text: "Gray", value: 6 },
|
|
57
|
+
]
|
|
58
|
+
|
|
59
|
+
return `<div>
|
|
60
|
+
<Dropdown :data="self.data" :value="1" />
|
|
61
|
+
</div>`
|
|
62
|
+
}
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
Quick example with React
|
|
66
|
+
|
|
67
|
+
```jsx
|
|
68
|
+
import React, { useRef } from 'react';
|
|
69
|
+
import Dropdown from '@lemonadejs/dropdown/dist/react';
|
|
70
|
+
import '@lemonadejs/dropdown/dist/style.css'
|
|
71
|
+
import '@lemonadejs/modal/dist/style.css';
|
|
72
|
+
|
|
73
|
+
const data = [
|
|
74
|
+
{ text: "Red", value: 1 },
|
|
75
|
+
{ text: "Blue", value: 2 },
|
|
76
|
+
{ text: "Green", value: 3 },
|
|
77
|
+
{ text: "Yellow", value: 4 },
|
|
78
|
+
{ text: "Purple", value: 5 },
|
|
79
|
+
{ text: "Gray", value: 6 },
|
|
80
|
+
]
|
|
81
|
+
export default function App() {
|
|
82
|
+
const dropdown = useRef();
|
|
83
|
+
return (
|
|
84
|
+
<div>
|
|
85
|
+
<Dropdown data={data} ref={dropdown} value={1} />
|
|
86
|
+
</div>);
|
|
87
|
+
}
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
Quick example with Vue
|
|
91
|
+
|
|
92
|
+
```vue
|
|
93
|
+
<template>
|
|
94
|
+
<Dropdown :data="data" :value="1" />
|
|
95
|
+
</template>
|
|
96
|
+
|
|
97
|
+
<script>
|
|
98
|
+
import Dropdown from '@lemonadejs/dropdown/dist/vue'
|
|
99
|
+
import '@lemonadejs/dropdown/dist/style.css'
|
|
100
|
+
import '@lemonadejs/modal/dist/style.css'
|
|
101
|
+
|
|
102
|
+
export default {
|
|
103
|
+
name: 'App',
|
|
104
|
+
components: {
|
|
105
|
+
Dropdown
|
|
106
|
+
},
|
|
107
|
+
data() {
|
|
108
|
+
return {
|
|
109
|
+
data: [
|
|
110
|
+
{ text: "Red", value: 1 },
|
|
111
|
+
{ text: "Blue", value: 2 },
|
|
112
|
+
{ text: "Green", value: 3 },
|
|
113
|
+
{ text: "Yellow", value: 4 },
|
|
114
|
+
{ text: "Purple", value: 5 },
|
|
115
|
+
{ text: "Gray", value: 6 },
|
|
116
|
+
]
|
|
117
|
+
};
|
|
118
|
+
},
|
|
119
|
+
}
|
|
120
|
+
</script>
|
|
121
|
+
```
|
|
122
|
+
|
|
123
|
+
### Settings
|
|
124
|
+
|
|
125
|
+
| Attribute | Description |
|
|
126
|
+
|------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
|
|
127
|
+
| data: Item[] | An array of options to be displayed. Each item should follow the structure defined in the 'Item Details' section. |
|
|
128
|
+
| multiple?: boolean | If provided, enables the multiple selection mode, allowing users to select more than one option simultaneously. |
|
|
129
|
+
| autocomplete?: boolean | If provided, enables the autocomplete feature, displaying an input field that allows users to filter and quickly find options in the Dropdown. |
|
|
130
|
+
| value?: string | Represents the current value or selected option in the Dropdown. |
|
|
131
|
+
| type?: string | Specifies the type of display the Dropdown will use. It can be "searchbar" for a search bar interface, "picker" for a selection picker, or "default" for the default dropdown appearance. |
|
|
132
|
+
| insert?: boolean | Enables the `insert` feature, allowing users to add a new option directly by typing the title text and clicking on the plus symbol. |
|
|
133
|
+
| format?: number | Data format type, usually in the form of { id: name } or { value: text } |
|
|
134
|
+
| width?: number | Specifies the width of the dropdown. |
|
|
135
|
+
| placeholder?: string | Placeholder text to guide users in the dropdown. |
|
|
136
|
+
| url?: string | Specifies the URL for fetching the data. Do not declare the `data` attribute for the url to function properly. |
|
|
137
|
+
|
|
138
|
+
### Item Details
|
|
139
|
+
|
|
140
|
+
| Attribute | Description |
|
|
141
|
+
|--------------------------|---------------------------------------------------------------------------------------------|
|
|
142
|
+
| value?: number or string | Represents the identifier or unique value associated with the option. |
|
|
143
|
+
| group?: string | Indicates the group to which the option belongs, allowing for segregation and organization. |
|
|
144
|
+
| text?: string | Displays the label or text associated with the option. |
|
|
145
|
+
| image?: string | Specifies the image URL to be displayed alongside the option. |
|
|
146
|
+
| synonyms?: string[] | Keywords for easier item identification |
|
|
147
|
+
| disabled?: boolean | Indicates whether the item is currently disabled |
|
|
148
|
+
| color?: string | Specifies the color associated with the item |
|
|
149
|
+
|
|
150
|
+
### Events
|
|
151
|
+
|
|
152
|
+
| Event | Trigger |
|
|
153
|
+
|-------------------------------------------|----------------------------------------------------------------------------|
|
|
154
|
+
| onclose?: () => void | Invoked when the dropdown modal is closed. |
|
|
155
|
+
| onbeforeinsert?: (instance, Item) => void | Invoked before an item is added to the options through the insert feature. |
|
|
156
|
+
| oninsert?: (instance, Item) => void | Invoked after an item is added to the options through the insert feature. |
|
|
157
|
+
| onchange?: (instance, Item) => void | Invoked when the value changes. |
|
|
158
|
+
| onload?: (instance, Item) => void | Invoked when appended to the DOM. |
|
|
159
|
+
| onsearch?: (instance, Item) => void | Invoked when searching for an item.
|
|
160
|
+
|
|
|
161
|
+
| onbeforesearch?: (instance, Item) => void | Invoked before initiating a search.
|
|
162
|
+
|
|
|
163
|
+
| onopen?: (instance) => void | Invoked when the dropdown is opened. |
|
|
164
|
+
|
|
165
|
+
## License
|
|
166
|
+
|
|
167
|
+
The [LemonadeJS](https://lemonadejs.net) LemonadeJS Dropdown is released under the MIT.
|
|
168
|
+
|
|
169
|
+
## Other Tools
|
|
170
|
+
|
|
171
|
+
- [jSuites](https://jsuites.net/docs)
|
|
172
|
+
- [Jspreadsheet Data Grid](https://jspreadsheet.com)
|
package/dist/index.d.ts
CHANGED
|
@@ -1,85 +1,85 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Official Type definitions for LemonadeJS plugins
|
|
3
|
-
* https://lemonadejs.net
|
|
4
|
-
* Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
|
|
5
|
-
*/
|
|
6
|
-
|
|
7
|
-
declare function Dropdown(el: HTMLElement, options?: Dropdown.Options): Dropdown.Instance;
|
|
8
|
-
|
|
9
|
-
declare namespace Dropdown {
|
|
10
|
-
interface Item {
|
|
11
|
-
/** Value of the selected item. */
|
|
12
|
-
value?: string | number;
|
|
13
|
-
/** Description of the item */
|
|
14
|
-
text?: string;
|
|
15
|
-
/** Icon of the item */
|
|
16
|
-
image?: string;
|
|
17
|
-
/** Name of the group where the item belongs to */
|
|
18
|
-
group?: string;
|
|
19
|
-
/** Keywords to help finding one item */
|
|
20
|
-
synonym?: string[];
|
|
21
|
-
/** Item is disabled */
|
|
22
|
-
disabled?: boolean;
|
|
23
|
-
/** Color for the item */
|
|
24
|
-
color?: string;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
interface Options {
|
|
28
|
-
/** Preloaded data items for the dropdown */
|
|
29
|
-
data?: Item[];
|
|
30
|
-
/** Format type of the data, typically { id: name } or { value: text } */
|
|
31
|
-
format?: number;
|
|
32
|
-
/** Indicates if multiple item selection is allowed */
|
|
33
|
-
multiple?: boolean;
|
|
34
|
-
/** Enables the autocomplete feature for user input */
|
|
35
|
-
autocomplete?: boolean;
|
|
36
|
-
/** Rendering style of the dropdown: 'default', 'picker', 'searchbar' or inline */
|
|
37
|
-
type?: 'default' | 'picker' | 'searchbar' | 'inline',
|
|
38
|
-
/** Defines the dropdown width */
|
|
39
|
-
width?: number;
|
|
40
|
-
/** The initial value of the dropdown */
|
|
41
|
-
value?: string | string[] | number | number[];
|
|
42
|
-
/** Placeholder text for the dropdown */
|
|
43
|
-
placeholder?: string;
|
|
44
|
-
/** Allow insert new items */
|
|
45
|
-
insert?: boolean;
|
|
46
|
-
/** Specifies the URL for fetching the data. */
|
|
47
|
-
url?: string;
|
|
48
|
-
/** Event handler for value changes */
|
|
49
|
-
onchange?: (obj: object, newValue: string|number) => void;
|
|
50
|
-
/** Event handler for when the dropdown is ready */
|
|
51
|
-
onload?: (obj: object) => void;
|
|
52
|
-
/** Event handler for when the dropdown opens */
|
|
53
|
-
onopen?: (obj: object) => void;
|
|
54
|
-
/** Event handler for when the dropdown closes */
|
|
55
|
-
onclose?: (obj: object) => void;
|
|
56
|
-
/**
|
|
57
|
-
* Event handler for just before a new option is added to the dropdown. This is an async function to handle ajax requests.
|
|
58
|
-
* Example:
|
|
59
|
-
* self.beforeInsert = async function(s, element) {
|
|
60
|
-
* let newId = await getTheNewItemIdFromDatabase(element.text);
|
|
61
|
-
* return {
|
|
62
|
-
* text: element.text,
|
|
63
|
-
* value: newId,
|
|
64
|
-
* };
|
|
65
|
-
* }
|
|
66
|
-
*
|
|
67
|
-
* */
|
|
68
|
-
onbeforeinsert?: (obj: object, item: Item) => void;
|
|
69
|
-
/** Event handler for when a new option is added to the dropdown */
|
|
70
|
-
oninsert?: (obj: object, item: Item) => void;
|
|
71
|
-
/** Before the search happens */
|
|
72
|
-
onbeforesearch?: (obj: object, ajaxRequest: object) => boolean | null;
|
|
73
|
-
/** Event handler for processing search results */
|
|
74
|
-
onsearch?: (obj: object, result: object) => void;
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
interface Instance {
|
|
78
|
-
/** Internal type */
|
|
79
|
-
type: 'dropdown';
|
|
80
|
-
/** Current internal value */
|
|
81
|
-
value: Record<number, string>;
|
|
82
|
-
}
|
|
83
|
-
}
|
|
84
|
-
|
|
1
|
+
/**
|
|
2
|
+
* Official Type definitions for LemonadeJS plugins
|
|
3
|
+
* https://lemonadejs.net
|
|
4
|
+
* Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
declare function Dropdown(el: HTMLElement, options?: Dropdown.Options): Dropdown.Instance;
|
|
8
|
+
|
|
9
|
+
declare namespace Dropdown {
|
|
10
|
+
interface Item {
|
|
11
|
+
/** Value of the selected item. */
|
|
12
|
+
value?: string | number;
|
|
13
|
+
/** Description of the item */
|
|
14
|
+
text?: string;
|
|
15
|
+
/** Icon of the item */
|
|
16
|
+
image?: string;
|
|
17
|
+
/** Name of the group where the item belongs to */
|
|
18
|
+
group?: string;
|
|
19
|
+
/** Keywords to help finding one item */
|
|
20
|
+
synonym?: string[];
|
|
21
|
+
/** Item is disabled */
|
|
22
|
+
disabled?: boolean;
|
|
23
|
+
/** Color for the item */
|
|
24
|
+
color?: string;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
interface Options {
|
|
28
|
+
/** Preloaded data items for the dropdown */
|
|
29
|
+
data?: Item[];
|
|
30
|
+
/** Format type of the data, typically { id: name } or { value: text } */
|
|
31
|
+
format?: number;
|
|
32
|
+
/** Indicates if multiple item selection is allowed */
|
|
33
|
+
multiple?: boolean;
|
|
34
|
+
/** Enables the autocomplete feature for user input */
|
|
35
|
+
autocomplete?: boolean;
|
|
36
|
+
/** Rendering style of the dropdown: 'default', 'picker', 'searchbar' or inline */
|
|
37
|
+
type?: 'default' | 'picker' | 'searchbar' | 'inline',
|
|
38
|
+
/** Defines the dropdown width */
|
|
39
|
+
width?: number;
|
|
40
|
+
/** The initial value of the dropdown */
|
|
41
|
+
value?: string | string[] | number | number[];
|
|
42
|
+
/** Placeholder text for the dropdown */
|
|
43
|
+
placeholder?: string;
|
|
44
|
+
/** Allow insert new items */
|
|
45
|
+
insert?: boolean;
|
|
46
|
+
/** Specifies the URL for fetching the data. */
|
|
47
|
+
url?: string;
|
|
48
|
+
/** Event handler for value changes */
|
|
49
|
+
onchange?: (obj: object, newValue: string|number) => void;
|
|
50
|
+
/** Event handler for when the dropdown is ready */
|
|
51
|
+
onload?: (obj: object) => void;
|
|
52
|
+
/** Event handler for when the dropdown opens */
|
|
53
|
+
onopen?: (obj: object) => void;
|
|
54
|
+
/** Event handler for when the dropdown closes */
|
|
55
|
+
onclose?: (obj: object) => void;
|
|
56
|
+
/**
|
|
57
|
+
* Event handler for just before a new option is added to the dropdown. This is an async function to handle ajax requests.
|
|
58
|
+
* Example:
|
|
59
|
+
* self.beforeInsert = async function(s, element) {
|
|
60
|
+
* let newId = await getTheNewItemIdFromDatabase(element.text);
|
|
61
|
+
* return {
|
|
62
|
+
* text: element.text,
|
|
63
|
+
* value: newId,
|
|
64
|
+
* };
|
|
65
|
+
* }
|
|
66
|
+
*
|
|
67
|
+
* */
|
|
68
|
+
onbeforeinsert?: (obj: object, item: Item) => void;
|
|
69
|
+
/** Event handler for when a new option is added to the dropdown */
|
|
70
|
+
oninsert?: (obj: object, item: Item) => void;
|
|
71
|
+
/** Before the search happens */
|
|
72
|
+
onbeforesearch?: (obj: object, ajaxRequest: object) => boolean | null;
|
|
73
|
+
/** Event handler for processing search results */
|
|
74
|
+
onsearch?: (obj: object, result: object) => void;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
interface Instance {
|
|
78
|
+
/** Internal type */
|
|
79
|
+
type: 'dropdown';
|
|
80
|
+
/** Current internal value */
|
|
81
|
+
value: Record<number, string>;
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
|
|
85
85
|
export default Dropdown;
|