@operato/input 1.5.22 → 1.5.24
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/CHANGELOG.md +19 -0
- package/dist/src/ox-input-duration.js +4 -4
- package/dist/src/ox-input-duration.js.map +1 -1
- package/dist/src/ox-input-permission.d.ts +29 -0
- package/dist/src/ox-input-permission.js +169 -0
- package/dist/src/ox-input-permission.js.map +1 -0
- package/dist/stories/ox-input-permission.stories.d.ts +36 -0
- package/dist/stories/ox-input-permission.stories.js +60 -0
- package/dist/stories/ox-input-permission.stories.js.map +1 -0
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +6 -2
- package/src/ox-input-duration.ts +5 -5
- package/src/ox-input-permission.ts +180 -0
- package/stories/ox-input-permission.stories.ts +80 -0
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,25 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
### [1.5.24](https://github.com/hatiolab/operato/compare/v1.5.23...v1.5.24) (2023-11-05)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### :bug: Bug Fix
|
|
10
|
+
|
|
11
|
+
* ox-input-permission and ox-grist-editor-permission ([3c36f61](https://github.com/hatiolab/operato/commit/3c36f617003fdccd5b38bb8f8f02fcdd4dff3f75))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
### [1.5.23](https://github.com/hatiolab/operato/compare/v1.5.22...v1.5.23) (2023-11-05)
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
### :bug: Bug Fix
|
|
19
|
+
|
|
20
|
+
* ox-input-permission ([9d40cfd](https://github.com/hatiolab/operato/commit/9d40cfdff5e8fd5dec6b5c3e562c81d0f3dd8c48))
|
|
21
|
+
* ox-input-permission and ox-grist-editor-permission ([e6cab98](https://github.com/hatiolab/operato/commit/e6cab98d3f745f29b8c17077a549891f59b442b9))
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
6
25
|
### [1.5.22](https://github.com/hatiolab/operato/compare/v1.5.21...v1.5.22) (2023-11-04)
|
|
7
26
|
|
|
8
27
|
|
|
@@ -90,16 +90,16 @@ let OxInputDuration = class OxInputDuration extends OxFormField {
|
|
|
90
90
|
const seconds = d - minutes * 60;
|
|
91
91
|
return html `
|
|
92
92
|
<form @change=${this.onChange.bind(this)}>
|
|
93
|
-
<input id="days" type="number" .value=${days} pattern="\\d*" />
|
|
93
|
+
<input id="days" type="number" .value=${String(days || 0)} pattern="\\d*" />
|
|
94
94
|
<label for="days">${i18next.t('label.days')}</label>
|
|
95
95
|
|
|
96
|
-
<input id="hours" type="number" .value=${hours} pattern="[01]?\\d|2[0-3]" />
|
|
96
|
+
<input id="hours" type="number" .value=${String(hours || 0)} pattern="[01]?\\d|2[0-3]" />
|
|
97
97
|
<label for="hour">${i18next.t('label.hours')}</label>
|
|
98
98
|
|
|
99
|
-
<input id="minutes" type="number" .value=${minutes} pattern="[0-5]?\\d" />
|
|
99
|
+
<input id="minutes" type="number" .value=${String(minutes || 0)} pattern="[0-5]?\\d" />
|
|
100
100
|
<label for="minute">${i18next.t('label.minutes')}</label>
|
|
101
101
|
|
|
102
|
-
<input id="seconds" type="number" .value=${seconds} pattern="[0-5]?\\d" />
|
|
102
|
+
<input id="seconds" type="number" .value=${String(seconds || 0)} pattern="[0-5]?\\d" />
|
|
103
103
|
<label for="second">${i18next.t('label.seconds')}</label>
|
|
104
104
|
|
|
105
105
|
<button
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-input-duration.js","sourceRoot":"","sources":["../../src/ox-input-duration.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,sBAAsB,CAAA;AAE7B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAEvC,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAGtC,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,WAAW;aACvC,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuElB,AAvEY,CAuEZ;IAID,MAAM;QACJ,IAAI,CAAC,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC,CAAA;QAE/B,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,IAAI,GAAG,EAAE,CAAC,CAAC,CAAA;QACxC,CAAC,IAAI,IAAI,GAAG,EAAE,GAAG,IAAI,CAAA;QACrB,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,IAAI,CAAC,CAAA;QAClC,CAAC,IAAI,KAAK,GAAG,IAAI,CAAA;QACjB,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,EAAE,CAAC,CAAA;QAClC,MAAM,OAAO,GAAG,CAAC,GAAG,OAAO,GAAG,EAAE,CAAA;QAEhC,OAAO,IAAI,CAAA;sBACO,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC;gDACE,IAAI;
|
|
1
|
+
{"version":3,"file":"ox-input-duration.js","sourceRoot":"","sources":["../../src/ox-input-duration.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/mwc-button'\n\nimport { css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\n\nimport { OxFormField } from './ox-form-field'\n\n@customElement('ox-input-duration')\nexport class OxInputDuration extends OxFormField {\n static styles = css`\n :host {\n text-align: center;\n padding: 10px;\n }\n\n :host * {\n box-sizing: border-box;\n }\n\n :host *:focus {\n outline: none;\n }\n\n form {\n width: 100%;\n height: 100%;\n justify-content: center;\n }\n\n input {\n border: 0;\n border-bottom: var(--border-dark-color);\n padding: var(--input-padding);\n padding-right: 0;\n max-width: 70px;\n font: var(--input-font);\n color: var(--primary-text-color);\n text-align: right;\n }\n\n input:focus {\n outline: none;\n border-bottom: 1px solid var(--primary-color);\n }\n\n input:invalid {\n border-bottom: 1px solid var(--status-danger-color);\n color: var(--status-danger-color);\n }\n\n label {\n width: 100%;\n margin-right: var(--margin-default);\n font: normal 0.8em var(--theme-font);\n color: var(--primary-color);\n }\n\n button {\n border: var(--button-border);\n border-radius: var(--border-radius);\n background-color: var(--button-background-color);\n padding: var(--padding-narrow) var(--padding-default);\n min-height: 35px;\n line-height: 0.8;\n color: var(--button-color);\n cursor: pointer;\n }\n button + button {\n margin-left: -5px;\n }\n button mwc-icon {\n font-size: var(--fontsize-default);\n }\n button:focus,\n button:hover,\n button:active {\n border: var(--button-activ-border);\n background-color: var(--button-background-focus-color);\n color: var(--theme-white-color);\n }\n `\n\n @property({ type: Number }) value?: number\n\n render() {\n var d = Number(this.value || 0)\n\n const days = Math.floor(d / (3600 * 24))\n d -= days * 24 * 3600\n const hours = Math.floor(d / 3600)\n d -= hours * 3600\n const minutes = Math.floor(d / 60)\n const seconds = d - minutes * 60\n\n return html`\n <form @change=${this.onChange.bind(this)}>\n <input id=\"days\" type=\"number\" .value=${String(days || 0)} pattern=\"\\\\d*\" />\n <label for=\"days\">${i18next.t('label.days')}</label>\n\n <input id=\"hours\" type=\"number\" .value=${String(hours || 0)} pattern=\"[01]?\\\\d|2[0-3]\" />\n <label for=\"hour\">${i18next.t('label.hours')}</label>\n\n <input id=\"minutes\" type=\"number\" .value=${String(minutes || 0)} pattern=\"[0-5]?\\\\d\" />\n <label for=\"minute\">${i18next.t('label.minutes')}</label>\n\n <input id=\"seconds\" type=\"number\" .value=${String(seconds || 0)} pattern=\"[0-5]?\\\\d\" />\n <label for=\"second\">${i18next.t('label.seconds')}</label>\n\n <button\n type=\"button\"\n @click=${(e: Event) => {\n e.preventDefault()\n e.stopPropagation()\n\n this.value = 0\n\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: this.value\n })\n )\n }}\n >\n <mwc-icon>backspace</mwc-icon>\n </button>\n </form>\n `\n }\n\n firstUpdated() {\n ;(this.renderRoot.querySelector('input') as HTMLInputElement).focus()\n }\n\n @query('#days') days!: HTMLInputElement\n @query('#hours') hours!: HTMLInputElement\n @query('#minutes') minutes!: HTMLInputElement\n @query('#seconds') seconds!: HTMLInputElement\n\n onChange(e: Event) {\n e.stopPropagation()\n\n var form = this.renderRoot.querySelector('form') as HTMLFormElement\n var valid = form.checkValidity()\n if (!valid) {\n form.reportValidity()\n return\n }\n\n const days = Number(this.days.value)\n const hours = Number(this.hours.value)\n const minutes = Number(this.minutes.value)\n const seconds = Number(this.seconds.value)\n\n this.value = (days || 0) * 24 * 60 * 60 + (hours || 0) * 60 * 60 + (minutes || 0) * 60 + (seconds || 0)\n\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: this.value\n })\n )\n }\n}\n"]}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license Copyright © HatioLab Inc. All rights reserved.
|
|
3
|
+
*/
|
|
4
|
+
import '@material/mwc-button';
|
|
5
|
+
import { OxFormField } from './ox-form-field';
|
|
6
|
+
export declare class OxInputPermission extends OxFormField {
|
|
7
|
+
static styles: import("lit").CSSResult;
|
|
8
|
+
value?: {
|
|
9
|
+
category: string;
|
|
10
|
+
privilege: string;
|
|
11
|
+
owner: boolean;
|
|
12
|
+
super: boolean;
|
|
13
|
+
} | null;
|
|
14
|
+
privileges: {
|
|
15
|
+
name: string;
|
|
16
|
+
category: string;
|
|
17
|
+
description: string;
|
|
18
|
+
}[];
|
|
19
|
+
private form;
|
|
20
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
21
|
+
buildValue(): {
|
|
22
|
+
category: string;
|
|
23
|
+
privilege: string;
|
|
24
|
+
owner: boolean;
|
|
25
|
+
super: boolean;
|
|
26
|
+
};
|
|
27
|
+
firstUpdated(): void;
|
|
28
|
+
onChange(e: Event): void;
|
|
29
|
+
}
|
|
@@ -0,0 +1,169 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license Copyright © HatioLab Inc. All rights reserved.
|
|
3
|
+
*/
|
|
4
|
+
import { __decorate } from "tslib";
|
|
5
|
+
import '@material/mwc-button';
|
|
6
|
+
import { css, html } from 'lit';
|
|
7
|
+
import { customElement, property, query } from 'lit/decorators.js';
|
|
8
|
+
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
9
|
+
import { i18next } from '@operato/i18n';
|
|
10
|
+
import { OxFormField } from './ox-form-field';
|
|
11
|
+
let OxInputPermission = class OxInputPermission extends OxFormField {
|
|
12
|
+
constructor() {
|
|
13
|
+
super(...arguments);
|
|
14
|
+
this.privileges = [];
|
|
15
|
+
}
|
|
16
|
+
static { this.styles = css `
|
|
17
|
+
:host {
|
|
18
|
+
text-align: center;
|
|
19
|
+
padding: 10px;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
:host * {
|
|
23
|
+
box-sizing: border-box;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
:host *:focus {
|
|
27
|
+
outline: none;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
form {
|
|
31
|
+
width: 100%;
|
|
32
|
+
height: 100%;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
div[values] {
|
|
36
|
+
display: grid;
|
|
37
|
+
grid-template-columns: 1fr 1fr;
|
|
38
|
+
grid-gap: 10px;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
div[values] > [col1] {
|
|
42
|
+
text-align: right;
|
|
43
|
+
align-self: center;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
div[values] > [col2] {
|
|
47
|
+
text-align: left;
|
|
48
|
+
align-self: center;
|
|
49
|
+
margin-right: auto;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
input {
|
|
53
|
+
border: 0;
|
|
54
|
+
border-bottom: var(--border-dark-color);
|
|
55
|
+
padding: var(--input-padding);
|
|
56
|
+
padding-right: 0;
|
|
57
|
+
max-width: 70px;
|
|
58
|
+
font: var(--input-font);
|
|
59
|
+
color: var(--primary-text-color);
|
|
60
|
+
text-align: right;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
input:focus {
|
|
64
|
+
outline: none;
|
|
65
|
+
border-bottom: 1px solid var(--primary-color);
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
input:invalid {
|
|
69
|
+
border-bottom: 1px solid var(--status-danger-color);
|
|
70
|
+
color: var(--status-danger-color);
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
label {
|
|
74
|
+
margin-right: var(--margin-default);
|
|
75
|
+
font: normal 0.8em var(--theme-font);
|
|
76
|
+
color: var(--primary-color);
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
div[buttons] {
|
|
80
|
+
display: flex;
|
|
81
|
+
flex-direction: row;
|
|
82
|
+
justify-content: left;
|
|
83
|
+
padding: 10px;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
button {
|
|
87
|
+
border: var(--button-border);
|
|
88
|
+
border-radius: var(--border-radius);
|
|
89
|
+
background-color: var(--button-background-color);
|
|
90
|
+
padding: var(--padding-narrow) var(--padding-default);
|
|
91
|
+
min-height: 35px;
|
|
92
|
+
line-height: 0.8;
|
|
93
|
+
color: var(--button-color);
|
|
94
|
+
cursor: pointer;
|
|
95
|
+
}
|
|
96
|
+
button:focus,
|
|
97
|
+
button:hover,
|
|
98
|
+
button:active {
|
|
99
|
+
border: var(--button-activ-border);
|
|
100
|
+
background-color: var(--button-background-focus-color);
|
|
101
|
+
color: var(--theme-white-color);
|
|
102
|
+
}
|
|
103
|
+
`; }
|
|
104
|
+
render() {
|
|
105
|
+
const { category, privilege, owner, super: superUser } = this.value || {};
|
|
106
|
+
const privileges = this.privileges || [];
|
|
107
|
+
return html `
|
|
108
|
+
<form @change=${this.onChange.bind(this)}>
|
|
109
|
+
<div values>
|
|
110
|
+
<label for="privilege" col1>${i18next.t('label.privilege')}</label>
|
|
111
|
+
<select id="privilege" name="privilege" value=${ifDefined(privilege)}>
|
|
112
|
+
<option value=""> </option>
|
|
113
|
+
${privileges.map(p => html `<option
|
|
114
|
+
value=${`${p.category}-${p.name}`}
|
|
115
|
+
?selected=${category == p.category && privilege == p.name}
|
|
116
|
+
>
|
|
117
|
+
${p.description}
|
|
118
|
+
</option>`)}
|
|
119
|
+
</select>
|
|
120
|
+
|
|
121
|
+
<label for="owner" col1>${i18next.t('label.domain-owner')}</label>
|
|
122
|
+
<input id="owner" type="checkbox" name="owner" ?checked=${owner} col2></input>
|
|
123
|
+
|
|
124
|
+
<label for="super" col1>${i18next.t('label.superuser')}</label>
|
|
125
|
+
<input id="super" type="checkbox" name="super" ?checked=${superUser} col2></input>
|
|
126
|
+
</div>
|
|
127
|
+
</form>
|
|
128
|
+
`;
|
|
129
|
+
}
|
|
130
|
+
buildValue() {
|
|
131
|
+
const formData = new FormData(this.form);
|
|
132
|
+
const [category = '', privilege = ''] = formData.get('privilege').split('-');
|
|
133
|
+
const owner = formData.get('owner');
|
|
134
|
+
const superUser = formData.get('super');
|
|
135
|
+
return {
|
|
136
|
+
category,
|
|
137
|
+
privilege,
|
|
138
|
+
owner: owner == 'on',
|
|
139
|
+
super: superUser == 'on'
|
|
140
|
+
};
|
|
141
|
+
}
|
|
142
|
+
firstUpdated() {
|
|
143
|
+
;
|
|
144
|
+
this.renderRoot.querySelector('input').focus();
|
|
145
|
+
}
|
|
146
|
+
onChange(e) {
|
|
147
|
+
e.stopPropagation();
|
|
148
|
+
this.value = this.buildValue();
|
|
149
|
+
this.dispatchEvent(new CustomEvent('change', {
|
|
150
|
+
bubbles: true,
|
|
151
|
+
composed: true,
|
|
152
|
+
detail: this.value
|
|
153
|
+
}));
|
|
154
|
+
}
|
|
155
|
+
};
|
|
156
|
+
__decorate([
|
|
157
|
+
property({ type: Object })
|
|
158
|
+
], OxInputPermission.prototype, "value", void 0);
|
|
159
|
+
__decorate([
|
|
160
|
+
property({ type: Array })
|
|
161
|
+
], OxInputPermission.prototype, "privileges", void 0);
|
|
162
|
+
__decorate([
|
|
163
|
+
query('form')
|
|
164
|
+
], OxInputPermission.prototype, "form", void 0);
|
|
165
|
+
OxInputPermission = __decorate([
|
|
166
|
+
customElement('ox-input-permission')
|
|
167
|
+
], OxInputPermission);
|
|
168
|
+
export { OxInputPermission };
|
|
169
|
+
//# sourceMappingURL=ox-input-permission.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ox-input-permission.js","sourceRoot":"","sources":["../../src/ox-input-permission.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/mwc-button'\n\nimport { css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { i18next } from '@operato/i18n'\n\nimport { OxFormField } from './ox-form-field'\n\n@customElement('ox-input-permission')\nexport class OxInputPermission extends OxFormField {\n static styles = css`\n :host {\n text-align: center;\n padding: 10px;\n }\n\n :host * {\n box-sizing: border-box;\n }\n\n :host *:focus {\n outline: none;\n }\n\n form {\n width: 100%;\n height: 100%;\n }\n\n div[values] {\n display: grid;\n grid-template-columns: 1fr 1fr;\n grid-gap: 10px;\n }\n\n div[values] > [col1] {\n text-align: right;\n align-self: center;\n }\n\n div[values] > [col2] {\n text-align: left;\n align-self: center;\n margin-right: auto;\n }\n\n input {\n border: 0;\n border-bottom: var(--border-dark-color);\n padding: var(--input-padding);\n padding-right: 0;\n max-width: 70px;\n font: var(--input-font);\n color: var(--primary-text-color);\n text-align: right;\n }\n\n input:focus {\n outline: none;\n border-bottom: 1px solid var(--primary-color);\n }\n\n input:invalid {\n border-bottom: 1px solid var(--status-danger-color);\n color: var(--status-danger-color);\n }\n\n label {\n margin-right: var(--margin-default);\n font: normal 0.8em var(--theme-font);\n color: var(--primary-color);\n }\n\n div[buttons] {\n display: flex;\n flex-direction: row;\n justify-content: left;\n padding: 10px;\n }\n\n button {\n border: var(--button-border);\n border-radius: var(--border-radius);\n background-color: var(--button-background-color);\n padding: var(--padding-narrow) var(--padding-default);\n min-height: 35px;\n line-height: 0.8;\n color: var(--button-color);\n cursor: pointer;\n }\n button:focus,\n button:hover,\n button:active {\n border: var(--button-activ-border);\n background-color: var(--button-background-focus-color);\n color: var(--theme-white-color);\n }\n `\n\n @property({ type: Object }) value?: {\n category: string\n privilege: string\n owner: boolean\n super: boolean\n } | null\n\n @property({ type: Array }) privileges: { name: string; category: string; description: string }[] = []\n\n @query('form') private form!: HTMLFormElement\n\n render() {\n const { category, privilege, owner, super: superUser } = this.value || {}\n const privileges = this.privileges || []\n\n return html`\n <form @change=${this.onChange.bind(this)}>\n <div values>\n <label for=\"privilege\" col1>${i18next.t('label.privilege')}</label>\n <select id=\"privilege\" name=\"privilege\" value=${ifDefined(privilege)}>\n <option value=\"\"> </option>\n ${privileges.map(\n p =>\n html`<option\n value=${`${p.category}-${p.name}`}\n ?selected=${category == p.category && privilege == p.name}\n >\n ${p.description}\n </option>`\n )}\n </select>\n\n <label for=\"owner\" col1>${i18next.t('label.domain-owner')}</label>\n <input id=\"owner\" type=\"checkbox\" name=\"owner\" ?checked=${owner} col2></input>\n\n <label for=\"super\" col1>${i18next.t('label.superuser')}</label>\n <input id=\"super\" type=\"checkbox\" name=\"super\" ?checked=${superUser} col2></input>\n </div>\n </form>\n `\n }\n\n buildValue() {\n const formData = new FormData(this.form)\n\n const [category = '', privilege = ''] = (formData.get('privilege') as string).split('-')\n const owner = formData.get('owner') as string\n const superUser = formData.get('super') as string\n\n return {\n category,\n privilege,\n owner: owner == 'on',\n super: superUser == 'on'\n }\n }\n\n firstUpdated() {\n ;(this.renderRoot.querySelector('input') as HTMLInputElement).focus()\n }\n\n onChange(e: Event) {\n e.stopPropagation()\n\n this.value = this.buildValue()\n\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: this.value\n })\n )\n }\n}\n"]}
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import '../src/ox-input-permission.js';
|
|
2
|
+
import '../src/locale/locale-picker.js';
|
|
3
|
+
import { TemplateResult } from 'lit';
|
|
4
|
+
declare const _default: {
|
|
5
|
+
title: string;
|
|
6
|
+
component: string;
|
|
7
|
+
argTypes: {
|
|
8
|
+
value: {
|
|
9
|
+
control: string;
|
|
10
|
+
};
|
|
11
|
+
name: {
|
|
12
|
+
control: string;
|
|
13
|
+
};
|
|
14
|
+
};
|
|
15
|
+
};
|
|
16
|
+
export default _default;
|
|
17
|
+
interface Story<T> {
|
|
18
|
+
(args: T): TemplateResult;
|
|
19
|
+
args?: Partial<T>;
|
|
20
|
+
argTypes?: Record<string, unknown>;
|
|
21
|
+
}
|
|
22
|
+
interface ArgTypes {
|
|
23
|
+
name?: string;
|
|
24
|
+
privileges: {
|
|
25
|
+
name: string;
|
|
26
|
+
category: string;
|
|
27
|
+
description: string;
|
|
28
|
+
}[];
|
|
29
|
+
value?: {
|
|
30
|
+
privilege: string;
|
|
31
|
+
category: string;
|
|
32
|
+
owner: boolean;
|
|
33
|
+
super: boolean;
|
|
34
|
+
} | null;
|
|
35
|
+
}
|
|
36
|
+
export declare const Regular: Story<ArgTypes>;
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
import '../src/ox-input-permission.js';
|
|
2
|
+
import '../src/locale/locale-picker.js';
|
|
3
|
+
import { html } from 'lit';
|
|
4
|
+
export default {
|
|
5
|
+
title: 'ox-input-permission',
|
|
6
|
+
component: 'ox-input-permission',
|
|
7
|
+
argTypes: {
|
|
8
|
+
value: { control: 'number' },
|
|
9
|
+
name: { control: 'text' }
|
|
10
|
+
}
|
|
11
|
+
};
|
|
12
|
+
const Template = ({ name = 'permission', value = null, privileges }) => html `
|
|
13
|
+
<link href="/themes/app-theme.css" rel="stylesheet" />
|
|
14
|
+
<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
|
|
15
|
+
<style>
|
|
16
|
+
body {
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
ox-input-permission {
|
|
20
|
+
width: 100%;
|
|
21
|
+
min-height: 500px;
|
|
22
|
+
}
|
|
23
|
+
</style>
|
|
24
|
+
|
|
25
|
+
<locale-picker></locale-picker>
|
|
26
|
+
<br /><br />
|
|
27
|
+
|
|
28
|
+
<ox-input-permission
|
|
29
|
+
@change=${(e) => {
|
|
30
|
+
console.log(e.target.value);
|
|
31
|
+
}}
|
|
32
|
+
name=${name}
|
|
33
|
+
.value=${value}
|
|
34
|
+
.privileges=${privileges}
|
|
35
|
+
>
|
|
36
|
+
</ox-input-permission>
|
|
37
|
+
`;
|
|
38
|
+
export const Regular = Template.bind({});
|
|
39
|
+
Regular.args = {
|
|
40
|
+
name: 'permission',
|
|
41
|
+
privileges: [
|
|
42
|
+
{
|
|
43
|
+
name: 'query',
|
|
44
|
+
category: 'aaa',
|
|
45
|
+
description: 'readable aaa'
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
name: 'mutation',
|
|
49
|
+
category: 'aaa',
|
|
50
|
+
description: 'writable aaa'
|
|
51
|
+
}
|
|
52
|
+
],
|
|
53
|
+
value: {
|
|
54
|
+
privilege: 'mutation',
|
|
55
|
+
category: 'aaa',
|
|
56
|
+
owner: true,
|
|
57
|
+
super: true
|
|
58
|
+
}
|
|
59
|
+
};
|
|
60
|
+
//# sourceMappingURL=ox-input-permission.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ox-input-permission.stories.js","sourceRoot":"","sources":["../../stories/ox-input-permission.stories.ts"],"names":[],"mappings":"AAAA,OAAO,+BAA+B,CAAA;AACtC,OAAO,gCAAgC,CAAA;AAEvC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,eAAe;IACb,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,qBAAqB;IAChC,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC5B,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;KAC1B;CACF,CAAA;AAmBD,MAAM,QAAQ,GAAoB,CAAC,EAAE,IAAI,GAAG,YAAY,EAAE,KAAK,GAAG,IAAI,EAAE,UAAU,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;cAiBzF,CAAC,CAAQ,EAAE,EAAE;IACrB,OAAO,CAAC,GAAG,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;AACnD,CAAC;WACM,IAAI;aACF,KAAK;kBACA,UAAU;;;CAG3B,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,YAAY;IAClB,UAAU,EAAE;QACV;YACE,IAAI,EAAE,OAAO;YACb,QAAQ,EAAE,KAAK;YACf,WAAW,EAAE,cAAc;SAC5B;QACD;YACE,IAAI,EAAE,UAAU;YAChB,QAAQ,EAAE,KAAK;YACf,WAAW,EAAE,cAAc;SAC5B;KACF;IACD,KAAK,EAAE;QACL,SAAS,EAAE,UAAU;QACrB,QAAQ,EAAE,KAAK;QACf,KAAK,EAAE,IAAI;QACX,KAAK,EAAE,IAAI;KACZ;CACF,CAAA","sourcesContent":["import '../src/ox-input-permission.js'\nimport '../src/locale/locale-picker.js'\n\nimport { html, TemplateResult } from 'lit'\n\nexport default {\n title: 'ox-input-permission',\n component: 'ox-input-permission',\n argTypes: {\n value: { control: 'number' },\n name: { control: 'text' }\n }\n}\n\ninterface Story<T> {\n (args: T): TemplateResult\n args?: Partial<T>\n argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n name?: string\n privileges: { name: string; category: string; description: string }[]\n value?: {\n privilege: string\n category: string\n owner: boolean\n super: boolean\n } | null\n}\n\nconst Template: Story<ArgTypes> = ({ name = 'permission', value = null, privileges }: ArgTypes) => html`\n <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n <link href=\"https://fonts.googleapis.com/css?family=Material+Icons&display=block\" rel=\"stylesheet\" />\n <style>\n body {\n }\n\n ox-input-permission {\n width: 100%;\n min-height: 500px;\n }\n </style>\n\n <locale-picker></locale-picker>\n <br /><br />\n\n <ox-input-permission\n @change=${(e: Event) => {\n console.log((e.target as HTMLInputElement).value)\n }}\n name=${name}\n .value=${value}\n .privileges=${privileges}\n >\n </ox-input-permission>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n name: 'permission',\n privileges: [\n {\n name: 'query',\n category: 'aaa',\n description: 'readable aaa'\n },\n {\n name: 'mutation',\n category: 'aaa',\n description: 'writable aaa'\n }\n ],\n value: {\n privilege: 'mutation',\n category: 'aaa',\n owner: true,\n super: true\n }\n}\n"]}
|