revotech-ui-kit 0.0.0 → 0.0.2-beta
Sign up to get free protection for your applications and to get access to all the features.
- package/.github/workflows/deploy-storybook.yml +107 -0
- package/.storybook/main.ts +3 -3
- package/assume_role.sh +18 -0
- package/dist/183c6c38.js +1 -0
- package/dist/f28fd4b1.js +1 -0
- package/dist/index.ts +1 -0
- package/dist/public/globals.css +2215 -0
- package/dist/public/tailwind-lib.css +115 -0
- package/dist/src/assets/icons/arrows.icon.js +20 -0
- package/dist/src/assets/icons/arrows.icon.js.map +1 -0
- package/dist/src/assets/icons/index.js +4 -0
- package/dist/src/assets/icons/index.js.map +1 -0
- package/dist/src/assets/icons/search.icon.js +19 -0
- package/dist/src/assets/icons/search.icon.js.map +1 -0
- package/dist/src/assets/icons/tick.icon.js +20 -0
- package/dist/src/assets/icons/tick.icon.js.map +1 -0
- package/dist/src/components/atoms/alert/alert-description.js +18 -0
- package/dist/src/components/atoms/alert/alert-description.js.map +1 -0
- package/dist/src/components/atoms/alert/alert-title.js +20 -0
- package/dist/src/components/atoms/alert/alert-title.js.map +1 -0
- package/dist/src/components/atoms/alert/alert.atom.js +55 -0
- package/dist/src/components/atoms/alert/alert.atom.js.map +1 -0
- package/dist/src/components/atoms/alert/alert.stories.js +62 -0
- package/dist/src/components/atoms/alert/alert.stories.js.map +1 -0
- package/dist/src/components/atoms/alert/alert.styles.js +21 -0
- package/dist/src/components/atoms/alert/alert.styles.js.map +1 -0
- package/dist/src/components/atoms/alert/alert.types.js +2 -0
- package/dist/src/components/atoms/alert/alert.types.js.map +1 -0
- package/dist/src/components/atoms/badge/badge.atom.js +43 -0
- package/dist/src/components/atoms/badge/badge.atom.js.map +1 -0
- package/dist/src/components/atoms/badge/badge.stories.js +110 -0
- package/dist/src/components/atoms/badge/badge.stories.js.map +1 -0
- package/dist/src/components/atoms/badge/badge.style.js +17 -0
- package/dist/src/components/atoms/badge/badge.style.js.map +1 -0
- package/dist/src/components/atoms/badge/badge.type.js +2 -0
- package/dist/src/components/atoms/badge/badge.type.js.map +1 -0
- package/dist/src/components/atoms/button/button.atom.js +67 -0
- package/dist/src/components/atoms/button/button.atom.js.map +1 -0
- package/dist/src/components/atoms/button/button.stories.js +204 -0
- package/dist/src/components/atoms/button/button.stories.js.map +1 -0
- package/dist/src/components/atoms/button/button.style.js +24 -0
- package/dist/src/components/atoms/button/button.style.js.map +1 -0
- package/dist/src/components/atoms/button/button.type.js +2 -0
- package/dist/src/components/atoms/button/button.type.js.map +1 -0
- package/dist/src/components/atoms/card/card-content.js +17 -0
- package/dist/src/components/atoms/card/card-content.js.map +1 -0
- package/dist/src/components/atoms/card/card-description.js +17 -0
- package/dist/src/components/atoms/card/card-description.js.map +1 -0
- package/dist/src/components/atoms/card/card-footer.js +17 -0
- package/dist/src/components/atoms/card/card-footer.js.map +1 -0
- package/dist/src/components/atoms/card/card-header.js +17 -0
- package/dist/src/components/atoms/card/card-header.js.map +1 -0
- package/dist/src/components/atoms/card/card-title.js +17 -0
- package/dist/src/components/atoms/card/card-title.js.map +1 -0
- package/dist/src/components/atoms/card/card.atom.js +25 -0
- package/dist/src/components/atoms/card/card.atom.js.map +1 -0
- package/dist/src/components/atoms/card/card.stories.js +136 -0
- package/dist/src/components/atoms/card/card.stories.js.map +1 -0
- package/dist/src/components/atoms/checkbox/checkbox.atom.js +87 -0
- package/dist/src/components/atoms/checkbox/checkbox.atom.js.map +1 -0
- package/dist/src/components/atoms/checkbox/checkbox.stories.js +244 -0
- package/dist/src/components/atoms/checkbox/checkbox.stories.js.map +1 -0
- package/dist/src/components/atoms/checkbox/checkbox.style.js +3 -0
- package/dist/src/components/atoms/checkbox/checkbox.style.js.map +1 -0
- package/dist/src/components/atoms/checkbox/checkbox.type.js +2 -0
- package/dist/src/components/atoms/checkbox/checkbox.type.js.map +1 -0
- package/dist/src/components/atoms/combo-box/combo-box-input.js +47 -0
- package/dist/src/components/atoms/combo-box/combo-box-input.js.map +1 -0
- package/dist/src/components/atoms/combo-box/combo-box-item.js +85 -0
- package/dist/src/components/atoms/combo-box/combo-box-item.js.map +1 -0
- package/dist/src/components/atoms/combo-box/combo-box-list.js +67 -0
- package/dist/src/components/atoms/combo-box/combo-box-list.js.map +1 -0
- package/dist/src/components/atoms/combo-box/combo-box.atom.js +199 -0
- package/dist/src/components/atoms/combo-box/combo-box.atom.js.map +1 -0
- package/dist/src/components/atoms/combo-box/combo-box.stories.js +86 -0
- package/dist/src/components/atoms/combo-box/combo-box.stories.js.map +1 -0
- package/dist/src/components/atoms/command-empty/command-empty.atom.js +54 -0
- package/dist/src/components/atoms/command-empty/command-empty.atom.js.map +1 -0
- package/dist/src/components/atoms/command-group/command-group.atom.js +71 -0
- package/dist/src/components/atoms/command-group/command-group.atom.js.map +1 -0
- package/dist/src/components/atoms/command-item/command-item.atom.js +80 -0
- package/dist/src/components/atoms/command-item/command-item.atom.js.map +1 -0
- package/dist/src/components/atoms/command-list/command-list.atom.js +36 -0
- package/dist/src/components/atoms/command-list/command-list.atom.js.map +1 -0
- package/dist/src/components/atoms/command-separator/command-separator.atom.js +52 -0
- package/dist/src/components/atoms/command-separator/command-separator.atom.js.map +1 -0
- package/dist/src/components/atoms/dialog/dialog-close.js +47 -0
- package/dist/src/components/atoms/dialog/dialog-close.js.map +1 -0
- package/dist/src/components/atoms/dialog/dialog-content.js +72 -0
- package/dist/src/components/atoms/dialog/dialog-content.js.map +1 -0
- package/dist/src/components/atoms/dialog/dialog-footer.js +22 -0
- package/dist/src/components/atoms/dialog/dialog-footer.js.map +1 -0
- package/dist/src/components/atoms/dialog/dialog-header.js +40 -0
- package/dist/src/components/atoms/dialog/dialog-header.js.map +1 -0
- package/dist/src/components/atoms/dialog/dialog-overly.js +20 -0
- package/dist/src/components/atoms/dialog/dialog-overly.js.map +1 -0
- package/dist/src/components/atoms/dialog/dialog-trigger.js +54 -0
- package/dist/src/components/atoms/dialog/dialog-trigger.js.map +1 -0
- package/dist/src/components/atoms/dialog/dialog.atom.js +79 -0
- package/dist/src/components/atoms/dialog/dialog.atom.js.map +1 -0
- package/dist/src/components/atoms/dialog/dialog.stories.js +88 -0
- package/dist/src/components/atoms/dialog/dialog.stories.js.map +1 -0
- package/dist/src/components/atoms/dropdownMenu/dropdown-menu-checkbox-Item.js +117 -0
- package/dist/src/components/atoms/dropdownMenu/dropdown-menu-checkbox-Item.js.map +1 -0
- package/dist/src/components/atoms/dropdownMenu/dropdown-menu-content.js +81 -0
- package/dist/src/components/atoms/dropdownMenu/dropdown-menu-content.js.map +1 -0
- package/dist/src/components/atoms/dropdownMenu/dropdown-menu-group.js +71 -0
- package/dist/src/components/atoms/dropdownMenu/dropdown-menu-group.js.map +1 -0
- package/dist/src/components/atoms/dropdownMenu/dropdown-menu-item.js +80 -0
- package/dist/src/components/atoms/dropdownMenu/dropdown-menu-item.js.map +1 -0
- package/dist/src/components/atoms/dropdownMenu/dropdown-menu-radio-item.js +118 -0
- package/dist/src/components/atoms/dropdownMenu/dropdown-menu-radio-item.js.map +1 -0
- package/dist/src/components/atoms/dropdownMenu/dropdown-menu-seperator.js +52 -0
- package/dist/src/components/atoms/dropdownMenu/dropdown-menu-seperator.js.map +1 -0
- package/dist/src/components/atoms/dropdownMenu/dropdown-menu-shortcut.js +20 -0
- package/dist/src/components/atoms/dropdownMenu/dropdown-menu-shortcut.js.map +1 -0
- package/dist/src/components/atoms/dropdownMenu/dropdown-menu.atom.js +79 -0
- package/dist/src/components/atoms/dropdownMenu/dropdown-menu.atom.js.map +1 -0
- package/dist/src/components/atoms/dropdownMenu/dropdownMenu.stories.js +211 -0
- package/dist/src/components/atoms/dropdownMenu/dropdownMenu.stories.js.map +1 -0
- package/dist/src/components/atoms/dropdownMenu/dropdownMenu.style.js +4 -0
- package/dist/src/components/atoms/dropdownMenu/dropdownMenu.style.js.map +1 -0
- package/dist/src/components/atoms/index.js +14 -0
- package/dist/src/components/atoms/index.js.map +1 -0
- package/dist/src/components/atoms/input/input.atom.js +93 -0
- package/dist/src/components/atoms/input/input.atom.js.map +1 -0
- package/dist/src/components/atoms/input/input.stories.js +382 -0
- package/dist/src/components/atoms/input/input.stories.js.map +1 -0
- package/dist/src/components/atoms/input/input.styles.js +2 -0
- package/dist/src/components/atoms/input/input.styles.js.map +1 -0
- package/dist/src/components/atoms/input/input.type.js +2 -0
- package/dist/src/components/atoms/input/input.type.js.map +1 -0
- package/dist/src/components/atoms/label/label.atom.js +68 -0
- package/dist/src/components/atoms/label/label.atom.js.map +1 -0
- package/dist/src/components/atoms/label/label.stories.js +85 -0
- package/dist/src/components/atoms/label/label.stories.js.map +1 -0
- package/dist/src/components/atoms/label/label.style.js +3 -0
- package/dist/src/components/atoms/label/label.style.js.map +1 -0
- package/dist/src/components/atoms/popover/popover-content.js +64 -0
- package/dist/src/components/atoms/popover/popover-content.js.map +1 -0
- package/dist/src/components/atoms/popover/popover-trigger.js +51 -0
- package/dist/src/components/atoms/popover/popover-trigger.js.map +1 -0
- package/dist/src/components/atoms/popover/popover.atom.js +40 -0
- package/dist/src/components/atoms/popover/popover.atom.js.map +1 -0
- package/dist/src/components/atoms/popover/popover.stories.js +69 -0
- package/dist/src/components/atoms/popover/popover.stories.js.map +1 -0
- package/dist/src/components/atoms/popover/popover.style.js +21 -0
- package/dist/src/components/atoms/popover/popover.style.js.map +1 -0
- package/dist/src/components/atoms/popover/popover.types.js +4 -0
- package/dist/src/components/atoms/popover/popover.types.js.map +1 -0
- package/dist/src/components/atoms/toggle/defs.js +30 -0
- package/dist/src/components/atoms/toggle/defs.js.map +1 -0
- package/dist/src/components/atoms/toggle/toggle.atom.js +72 -0
- package/dist/src/components/atoms/toggle/toggle.atom.js.map +1 -0
- package/dist/src/components/atoms/toggle/toggle.stories.js +189 -0
- package/dist/src/components/atoms/toggle/toggle.stories.js.map +1 -0
- package/dist/src/components/atoms/toggle/toggle.style.js +19 -0
- package/dist/src/components/atoms/toggle/toggle.style.js.map +1 -0
- package/dist/src/components/command/command.js +410 -0
- package/dist/src/components/command/command.js.map +1 -0
- package/dist/src/components/command/command.stories.js +153 -0
- package/dist/src/components/command/command.stories.js.map +1 -0
- package/dist/src/components/index.js +3 -0
- package/dist/src/components/index.js.map +1 -0
- package/dist/src/components/molecules/command/command.molecules.js +27 -0
- package/dist/src/components/molecules/command/command.molecules.js.map +1 -0
- package/dist/src/components/molecules/command-input/command-input.atom.js +127 -0
- package/dist/src/components/molecules/command-input/command-input.atom.js.map +1 -0
- package/dist/src/components/molecules/dropdownMenu/dropdownMenu.molecules.js +2 -0
- package/dist/src/components/molecules/dropdownMenu/dropdownMenu.molecules.js.map +1 -0
- package/dist/src/components/molecules/index.js +2 -0
- package/dist/src/components/molecules/index.js.map +1 -0
- package/dist/src/helpers/base-element.js +64 -0
- package/dist/src/helpers/base-element.js.map +1 -0
- package/dist/src/helpers/index.js +4 -0
- package/dist/src/helpers/index.js.map +1 -0
- package/dist/src/helpers/mouse-conroller.helper.js +33 -0
- package/dist/src/helpers/mouse-conroller.helper.js.map +1 -0
- package/dist/src/helpers/style.helpers.js +6 -0
- package/dist/src/helpers/style.helpers.js.map +1 -0
- package/dist/src/index.js +2 -0
- package/dist/src/index.js.map +1 -0
- package/dist/src/interfaces/actionable.interface.js +2 -0
- package/dist/src/interfaces/actionable.interface.js.map +1 -0
- package/dist/src/interfaces/atomic.interface.js +2 -0
- package/dist/src/interfaces/atomic.interface.js.map +1 -0
- package/dist/src/interfaces/changeable.interface.js +2 -0
- package/dist/src/interfaces/changeable.interface.js.map +1 -0
- package/dist/src/interfaces/child-support-atomic.interface.js +2 -0
- package/dist/src/interfaces/child-support-atomic.interface.js.map +1 -0
- package/dist/src/interfaces/index.js +7 -0
- package/dist/src/interfaces/index.js.map +1 -0
- package/dist/src/interfaces/intractable.interface.js +2 -0
- package/dist/src/interfaces/intractable.interface.js.map +1 -0
- package/dist/src/interfaces/variant.interface.js +2 -0
- package/dist/src/interfaces/variant.interface.js.map +1 -0
- package/dist/src/lib/index.js +2 -0
- package/dist/src/lib/index.js.map +1 -0
- package/dist/src/lib/next/next.lib.js +2 -0
- package/dist/src/lib/next/next.lib.js.map +1 -0
- package/dist/src/lib/react/react.lib.js +16 -0
- package/dist/src/lib/react/react.lib.js.map +1 -0
- package/dist/src/lib/tw-styles.js +1956 -0
- package/dist/src/lib/tw-styles.js.map +1 -0
- package/dist/src/styles/index.js +2 -0
- package/dist/src/styles/index.js.map +1 -0
- package/dist/src/styles/tw.styles.js +2218 -0
- package/dist/src/styles/tw.styles.js.map +1 -0
- package/dist/src/wc-ui-app.js +88 -0
- package/dist/src/wc-ui-app.js.map +1 -0
- package/dist/sw.js +2 -0
- package/dist/sw.js.map +1 -0
- package/dist/test/wc-ui-app.test.js +18 -0
- package/dist/test/wc-ui-app.test.js.map +1 -0
- package/dist/tsconfig.tsbuildinfo +1 -0
- package/dist/workbox-a523fd56.js +2 -0
- package/dist/workbox-a523fd56.js.map +1 -0
- package/index.html +18 -66
- package/package.json +41 -18
- package/rollup.config.js +25 -13
- package/src/assets/icons/arrows.icon.ts +20 -0
- package/src/assets/icons/index.ts +3 -0
- package/src/assets/icons/search.icon.ts +19 -0
- package/src/assets/icons/tick.icon.ts +20 -0
- package/src/chai-custom.d.ts +0 -0
- package/src/components/atoms/alert/alert-description.ts +15 -0
- package/src/components/atoms/alert/alert-title.ts +17 -0
- package/src/components/atoms/alert/alert.atom.ts +51 -0
- package/src/components/atoms/alert/alert.stories.ts +71 -0
- package/src/components/atoms/alert/alert.styles.ts +21 -0
- package/src/components/atoms/alert/alert.types.ts +1 -0
- package/src/components/atoms/badge/badge.atom.ts +40 -0
- package/src/components/atoms/badge/badge.stories.ts +118 -0
- package/src/components/atoms/badge/badge.style.ts +24 -0
- package/src/components/atoms/badge/badge.type.ts +7 -0
- package/src/components/atoms/button/button.atom.ts +22 -8
- package/src/components/atoms/button/button.stories.ts +177 -139
- package/src/components/atoms/card/card-content.ts +15 -0
- package/src/components/atoms/card/card-description.ts +15 -0
- package/src/components/atoms/card/card-footer.ts +15 -0
- package/src/components/atoms/card/card-header.ts +15 -0
- package/src/components/atoms/card/card-title.ts +15 -0
- package/src/components/atoms/card/card.atom.ts +31 -0
- package/src/components/atoms/card/card.stories.ts +149 -0
- package/src/components/atoms/checkbox/checkbox.atom.ts +30 -16
- package/src/components/atoms/checkbox/checkbox.stories.ts +292 -25
- package/src/components/atoms/checkbox/checkbox.style.ts +5 -0
- package/src/components/atoms/checkbox/checkbox.type.ts +24 -0
- package/src/components/atoms/combo-box/combo-box-input.ts +33 -0
- package/src/components/atoms/combo-box/combo-box-item.ts +59 -0
- package/src/components/atoms/combo-box/combo-box-list.ts +57 -0
- package/src/components/atoms/combo-box/combo-box.atom.ts +187 -0
- package/src/components/atoms/combo-box/combo-box.stories.ts +95 -0
- package/src/components/atoms/command-empty/command-empty.atom.ts +2 -2
- package/src/components/atoms/command-group/command-group.atom.ts +1 -1
- package/src/components/atoms/command-item/command-item.atom.ts +2 -2
- package/src/components/atoms/command-list/command-list.atom.ts +2 -2
- package/src/components/atoms/command-separator/command-separator.atom.ts +2 -2
- package/src/components/atoms/dialog/dialog-close.ts +50 -0
- package/src/components/atoms/dialog/dialog-content.ts +71 -0
- package/src/components/atoms/dialog/dialog-footer.ts +22 -0
- package/src/components/atoms/dialog/dialog-header.ts +36 -0
- package/src/components/atoms/dialog/dialog-overly.ts +20 -0
- package/src/components/atoms/dialog/dialog-trigger.ts +54 -0
- package/src/components/atoms/dialog/dialog.atom.ts +3 -226
- package/src/components/atoms/dialog/dialog.stories.ts +11 -4
- package/src/components/atoms/dropdownMenu/dropdown-menu-checkbox-Item.ts +106 -0
- package/src/components/atoms/dropdownMenu/dropdown-menu-content.ts +79 -0
- package/src/components/atoms/dropdownMenu/dropdown-menu-group.ts +60 -0
- package/src/components/atoms/dropdownMenu/dropdown-menu-item.ts +74 -0
- package/src/components/atoms/dropdownMenu/dropdown-menu-radio-item.ts +107 -0
- package/src/components/atoms/dropdownMenu/dropdown-menu-seperator.ts +44 -0
- package/src/components/atoms/dropdownMenu/dropdown-menu-shortcut.ts +17 -0
- package/src/components/atoms/dropdownMenu/dropdown-menu.atom.ts +84 -0
- package/src/components/atoms/dropdownMenu/dropdownMenu.stories.ts +220 -0
- package/src/components/atoms/dropdownMenu/dropdownMenu.style.ts +7 -0
- package/src/components/atoms/index.ts +3 -0
- package/src/components/atoms/input/input.atom.ts +64 -10
- package/src/components/atoms/input/input.stories.ts +426 -64
- package/src/components/atoms/input/input.styles.ts +2 -0
- package/src/components/atoms/input/input.type.ts +42 -8
- package/src/components/atoms/label/label.atom.ts +31 -7
- package/src/components/atoms/label/label.stories.ts +87 -3
- package/src/components/atoms/popover/popover-content.ts +58 -0
- package/src/components/atoms/popover/popover-trigger.ts +50 -0
- package/src/components/atoms/popover/popover.atom.ts +34 -0
- package/src/components/atoms/popover/popover.stories.ts +79 -0
- package/src/components/atoms/popover/popover.style.ts +25 -0
- package/src/components/atoms/popover/popover.types.ts +3 -0
- package/src/components/atoms/toggle/defs.ts +29 -0
- package/src/components/atoms/toggle/toggle.atom.ts +58 -0
- package/src/components/atoms/toggle/toggle.stories.ts +204 -0
- package/src/components/atoms/toggle/toggle.style.ts +22 -0
- package/src/components/molecules/command/command.molecules.ts +2 -2
- package/src/components/molecules/command-input/command-input.atom.ts +3 -3
- package/src/components/molecules/dropdownMenu/dropdownMenu.molecules.ts +0 -0
- package/src/globals.css +475 -66
- package/src/helpers/base-element.ts +79 -0
- package/src/helpers/index.ts +1 -0
- package/src/index.ts +0 -0
- package/src/lib/react/react.lib.ts +18 -0
- package/src/lib/tw-styles.ts +1957 -0
- package/src/styles/tw.styles.ts +2051 -1699
- package/src/tailwind-lib.css +26 -6
- package/tailwind.config.js +174 -38
- package/tsconfig.json +6 -1
- package/src/components/popover.ts +0 -247
@@ -1,15 +1,7 @@
|
|
1
|
-
|
2
|
-
import {
|
3
|
-
LitElement,
|
4
|
-
html,
|
5
|
-
css,
|
6
|
-
PropertyValueMap,
|
7
|
-
nothing,
|
8
|
-
PropertyValues,
|
9
|
-
} from 'lit';
|
1
|
+
import { LitElement, html, css, nothing, PropertyValues } from 'lit';
|
10
2
|
import { customElement, property } from 'lit/decorators.js';
|
11
|
-
import {
|
12
|
-
import {
|
3
|
+
import { TWStyles } from '../../../styles';
|
4
|
+
import { DialogContent } from './dialog-content';
|
13
5
|
|
14
6
|
const STATE_OPEN = 'open';
|
15
7
|
const STATE_CLOSED = 'closed';
|
@@ -54,135 +46,6 @@ export class Dialog extends LitElement {
|
|
54
46
|
}
|
55
47
|
}
|
56
48
|
|
57
|
-
@customElement('rtg-dialog-content')
|
58
|
-
export class DialogContent extends LitElement {
|
59
|
-
static styles = [css``, TWStyles];
|
60
|
-
|
61
|
-
@property({ attribute: 'data-state', type: String }) state = STATE_CLOSED;
|
62
|
-
|
63
|
-
private get _dialog(): Dialog | null {
|
64
|
-
let parent = this.parentElement;
|
65
|
-
|
66
|
-
while (parent) {
|
67
|
-
if (parent instanceof Dialog) {
|
68
|
-
return parent;
|
69
|
-
}
|
70
|
-
parent = parent.parentElement;
|
71
|
-
}
|
72
|
-
return parent;
|
73
|
-
}
|
74
|
-
|
75
|
-
private handleCloseButtonClick = () => {
|
76
|
-
const dialog = this._dialog;
|
77
|
-
if (dialog) {
|
78
|
-
dialog.dataset.state = STATE_CLOSED;
|
79
|
-
}
|
80
|
-
};
|
81
|
-
|
82
|
-
render() {
|
83
|
-
return html`${this.state === STATE_OPEN
|
84
|
-
? html`
|
85
|
-
<div
|
86
|
-
class="${cn(
|
87
|
-
'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
|
88
|
-
this.className
|
89
|
-
)}"
|
90
|
-
rtgdlg-content
|
91
|
-
>
|
92
|
-
<slot></slot>
|
93
|
-
<button
|
94
|
-
type="button"
|
95
|
-
@click="${this.handleCloseButtonClick}"
|
96
|
-
class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
|
97
|
-
>
|
98
|
-
<svg
|
99
|
-
xmlns="http://www.w3.org/2000/svg"
|
100
|
-
width="24"
|
101
|
-
height="24"
|
102
|
-
viewBox="0 0 24 24"
|
103
|
-
fill="none"
|
104
|
-
stroke="currentColor"
|
105
|
-
stroke-width="2"
|
106
|
-
stroke-linecap="round"
|
107
|
-
stroke-linejoin="round"
|
108
|
-
class="h-4 w-4"
|
109
|
-
>
|
110
|
-
<path d="M18 6 6 18"></path>
|
111
|
-
<path d="m6 6 12 12"></path></svg
|
112
|
-
><span class="sr-only">Close</span>
|
113
|
-
</button>
|
114
|
-
</div>
|
115
|
-
`
|
116
|
-
: nothing}`;
|
117
|
-
}
|
118
|
-
}
|
119
|
-
|
120
|
-
@customElement('rtg-dialog-overlay')
|
121
|
-
export class DialogOverlay extends LitElement {
|
122
|
-
static styles = [css``, TWStyles];
|
123
|
-
|
124
|
-
render() {
|
125
|
-
return html`
|
126
|
-
<div
|
127
|
-
class="${cn(
|
128
|
-
'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
|
129
|
-
this.className
|
130
|
-
)}"
|
131
|
-
></div>
|
132
|
-
`;
|
133
|
-
}
|
134
|
-
}
|
135
|
-
|
136
|
-
@customElement('rtg-dialog-header')
|
137
|
-
export class DialogHeader extends LitElement {
|
138
|
-
static styles = [css``, TWStyles];
|
139
|
-
|
140
|
-
@property({ attribute: 'title', type: String }) _title = '';
|
141
|
-
|
142
|
-
@property({ type: String }) description = '';
|
143
|
-
|
144
|
-
render() {
|
145
|
-
return html`
|
146
|
-
<div
|
147
|
-
class="${cn(
|
148
|
-
'flex flex-col space-y-1.5 text-center sm:text-left',
|
149
|
-
this.className
|
150
|
-
)}"
|
151
|
-
>
|
152
|
-
<h2
|
153
|
-
class="${cn(
|
154
|
-
'text-lg font-semibold leading-none tracking-tight',
|
155
|
-
this.className
|
156
|
-
)}"
|
157
|
-
>
|
158
|
-
${this._title}
|
159
|
-
</h2>
|
160
|
-
<p class="${cn('text-sm text-muted-foreground', this.className)}">
|
161
|
-
${this.description}
|
162
|
-
</p>
|
163
|
-
</div>
|
164
|
-
`;
|
165
|
-
}
|
166
|
-
}
|
167
|
-
|
168
|
-
@customElement('rtg-dialog-footer')
|
169
|
-
export class DialogFooter extends LitElement {
|
170
|
-
static styles = [css``, TWStyles];
|
171
|
-
|
172
|
-
render() {
|
173
|
-
return html`
|
174
|
-
<div
|
175
|
-
class="${cn(
|
176
|
-
'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
|
177
|
-
this.className
|
178
|
-
)}"
|
179
|
-
>
|
180
|
-
<slot></slot>
|
181
|
-
</div>
|
182
|
-
`;
|
183
|
-
}
|
184
|
-
}
|
185
|
-
|
186
49
|
// @customElement('rtg-dialog-title')
|
187
50
|
// export class DialogTitle extends LitElement {
|
188
51
|
// static styles = [css``, TWStyles];
|
@@ -213,89 +76,3 @@ export class DialogFooter extends LitElement {
|
|
213
76
|
// `;
|
214
77
|
// }
|
215
78
|
// }
|
216
|
-
|
217
|
-
@customElement('rtg-dialog-trigger')
|
218
|
-
export class DialogTrigger extends LitElement {
|
219
|
-
static styles = [css``, TWStyles];
|
220
|
-
|
221
|
-
private get _dialog(): Dialog | null {
|
222
|
-
let parent = this.parentElement;
|
223
|
-
|
224
|
-
while (parent) {
|
225
|
-
if (parent instanceof Dialog) {
|
226
|
-
return parent;
|
227
|
-
}
|
228
|
-
parent = parent.parentElement;
|
229
|
-
}
|
230
|
-
return parent;
|
231
|
-
}
|
232
|
-
|
233
|
-
protected firstUpdated(
|
234
|
-
_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>
|
235
|
-
): void {
|
236
|
-
super.firstUpdated(_changedProperties);
|
237
|
-
const slot = this.shadowRoot?.querySelector('slot');
|
238
|
-
const children = slot?.assignedElements();
|
239
|
-
if (children && children.length > 0) {
|
240
|
-
const button = children[0];
|
241
|
-
|
242
|
-
button.addEventListener('click', () => {
|
243
|
-
const dialog = this._dialog;
|
244
|
-
if (dialog) {
|
245
|
-
dialog.dataset.state = STATE_OPEN;
|
246
|
-
}
|
247
|
-
});
|
248
|
-
}
|
249
|
-
}
|
250
|
-
|
251
|
-
render() {
|
252
|
-
return html`
|
253
|
-
<div>
|
254
|
-
<slot></slot>
|
255
|
-
</div>
|
256
|
-
`;
|
257
|
-
}
|
258
|
-
}
|
259
|
-
|
260
|
-
@customElement('rtg-dialog-close')
|
261
|
-
export class DialogClose extends LitElement {
|
262
|
-
static styles = [css``, TWStyles];
|
263
|
-
|
264
|
-
private get _dialog(): Dialog | null {
|
265
|
-
let parent = this.parentElement;
|
266
|
-
|
267
|
-
while (parent) {
|
268
|
-
if (parent instanceof Dialog) {
|
269
|
-
return parent;
|
270
|
-
}
|
271
|
-
parent = parent.parentElement;
|
272
|
-
}
|
273
|
-
return parent;
|
274
|
-
}
|
275
|
-
|
276
|
-
protected firstUpdated(
|
277
|
-
_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>
|
278
|
-
): void {
|
279
|
-
super.firstUpdated(_changedProperties);
|
280
|
-
const slot = this.shadowRoot?.querySelector('slot');
|
281
|
-
const children = slot?.assignedElements();
|
282
|
-
if (children && children.length > 0) {
|
283
|
-
const button = children[0];
|
284
|
-
|
285
|
-
button.addEventListener('click', () => {
|
286
|
-
const dialog = this._dialog;
|
287
|
-
if (dialog) {
|
288
|
-
dialog.dataset.state = STATE_CLOSED;
|
289
|
-
}
|
290
|
-
});
|
291
|
-
}
|
292
|
-
}
|
293
|
-
|
294
|
-
render() {
|
295
|
-
return html`
|
296
|
-
<div>
|
297
|
-
<slot></slot>
|
298
|
-
</div>
|
299
|
-
`;
|
300
|
-
}
|
301
|
-
}
|
@@ -2,7 +2,14 @@ import { html } from 'lit';
|
|
2
2
|
import { Meta, StoryObj } from '@storybook/web-components';
|
3
3
|
import '../input/input.atom';
|
4
4
|
import './dialog.atom';
|
5
|
-
|
5
|
+
import './dialog-close';
|
6
|
+
import './dialog-content';
|
7
|
+
import './dialog-footer';
|
8
|
+
import './dialog-header';
|
9
|
+
import './dialog-overly';
|
10
|
+
import './dialog-trigger';
|
11
|
+
import '../input/input.atom';
|
12
|
+
import '../button/button.atom';
|
6
13
|
const meta: Meta = {
|
7
14
|
component: 'components/dialog',
|
8
15
|
};
|
@@ -62,7 +69,7 @@ export const ModalForm: Story = {
|
|
62
69
|
<rtg-input
|
63
70
|
id="name"
|
64
71
|
defaultValue="Pedro Duarte"
|
65
|
-
|
72
|
+
style="width:280px"
|
66
73
|
>
|
67
74
|
</rtg-input>
|
68
75
|
</div>
|
@@ -73,13 +80,13 @@ export const ModalForm: Story = {
|
|
73
80
|
<rtg-input
|
74
81
|
id="username"
|
75
82
|
defaultValue="@peduarte"
|
76
|
-
|
83
|
+
style="width:280px"
|
77
84
|
>
|
78
85
|
</rtg-input>
|
79
86
|
</div>
|
80
87
|
</div>
|
81
88
|
<rtg-dialog-footer>
|
82
|
-
<rtg-button
|
89
|
+
<rtg-button>Save changes</rtg-button>
|
83
90
|
</rtg-dialog-content>
|
84
91
|
</rtg-dialog>
|
85
92
|
`,
|
@@ -0,0 +1,106 @@
|
|
1
|
+
import { LitElement, html, css, nothing } from 'lit';
|
2
|
+
import { property, customElement } from 'lit/decorators.js';
|
3
|
+
import { cn } from '../../../helpers';
|
4
|
+
import { TWStyles } from '../../../styles';
|
5
|
+
|
6
|
+
@customElement('rtg-dropdown-menu-checkbox-item')
|
7
|
+
export class DropdownMenuCheckboxItem extends LitElement {
|
8
|
+
@property({ type: String }) _id = '';
|
9
|
+
|
10
|
+
@property({ attribute: 'aria-hidden', type: String }) _hidden = '';
|
11
|
+
|
12
|
+
private static _counter = 0;
|
13
|
+
|
14
|
+
static styles = [
|
15
|
+
css`
|
16
|
+
.icon-space {
|
17
|
+
width: 16px; /* Fixed width to reserve space for the check icon */
|
18
|
+
height: 16px;
|
19
|
+
display: inline-block;
|
20
|
+
}
|
21
|
+
`,
|
22
|
+
TWStyles,
|
23
|
+
];
|
24
|
+
|
25
|
+
private get identifier() {
|
26
|
+
if (this._id !== '') {
|
27
|
+
return this._id;
|
28
|
+
}
|
29
|
+
const parent =
|
30
|
+
this.parentElement?.shadowRoot?.querySelector('div[rtgcmd-group]');
|
31
|
+
if (parent) {
|
32
|
+
this._id = `${parent.getAttribute(
|
33
|
+
'id'
|
34
|
+
)}li${DropdownMenuCheckboxItem._counter++}`;
|
35
|
+
} else {
|
36
|
+
this._id = `rtgcmdrxgxli${DropdownMenuCheckboxItem._counter++}`;
|
37
|
+
}
|
38
|
+
return this._id;
|
39
|
+
}
|
40
|
+
|
41
|
+
@property({ attribute: 'data-value', type: String })
|
42
|
+
public get value() {
|
43
|
+
return this.textContent?.trim() || '';
|
44
|
+
}
|
45
|
+
|
46
|
+
@property({ type: Boolean }) selected = false;
|
47
|
+
|
48
|
+
private handleMouseEvent(e: Event) {
|
49
|
+
if (e.type === 'mouseover' || e.type === 'focus') {
|
50
|
+
this.selected = true;
|
51
|
+
}
|
52
|
+
if (e.type === 'mouseleave') {
|
53
|
+
this.selected = false;
|
54
|
+
}
|
55
|
+
}
|
56
|
+
|
57
|
+
@property({ type: Boolean }) checked = false;
|
58
|
+
@property({ type: Boolean }) disabled = false;
|
59
|
+
|
60
|
+
toggleChecked() {
|
61
|
+
this.checked = !this.checked;
|
62
|
+
}
|
63
|
+
|
64
|
+
render() {
|
65
|
+
return html`
|
66
|
+
<div
|
67
|
+
class="${cn(
|
68
|
+
'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground',
|
69
|
+
this.disabled ? 'pointer-events-none opacity-50' : '',
|
70
|
+
this.className
|
71
|
+
)}"
|
72
|
+
@click=${this.toggleChecked}
|
73
|
+
@mouseover="${this.handleMouseEvent}"
|
74
|
+
@mouseleave="${this.handleMouseEvent}"
|
75
|
+
@focus="${this.handleMouseEvent}"
|
76
|
+
rtgcmd-item
|
77
|
+
role="option"
|
78
|
+
aria-selected="${this.selected}"
|
79
|
+
data-selected="${this.selected}"
|
80
|
+
data-value="${this.value}"
|
81
|
+
id="${this.identifier}"
|
82
|
+
aria-hidden="${this.hidden}"
|
83
|
+
>
|
84
|
+
<span
|
85
|
+
class="icon-space absolute left-2 flex items-center justify-center"
|
86
|
+
>
|
87
|
+
${this.checked
|
88
|
+
? html`
|
89
|
+
<svg
|
90
|
+
xmlns="http://www.w3.org/2000/svg"
|
91
|
+
viewBox="0 0 24 24"
|
92
|
+
width="16px"
|
93
|
+
height="16px"
|
94
|
+
>
|
95
|
+
<path
|
96
|
+
d="M 19.28125 5.28125 L 9 15.5625 L 4.71875 11.28125 L 3.28125 12.71875 L 8.28125 17.71875 L 9 18.40625 L 9.71875 17.71875 L 20.71875 6.71875 Z"
|
97
|
+
/>
|
98
|
+
</svg>
|
99
|
+
`
|
100
|
+
: nothing}
|
101
|
+
</span>
|
102
|
+
<slot></slot>
|
103
|
+
</div>
|
104
|
+
`;
|
105
|
+
}
|
106
|
+
}
|
@@ -0,0 +1,79 @@
|
|
1
|
+
import { LitElement, html, css, PropertyValues, nothing } from 'lit';
|
2
|
+
import { customElement, property, state } from 'lit/decorators.js';
|
3
|
+
import { cn } from '../../../helpers';
|
4
|
+
import { TWStyles } from '../../../styles';
|
5
|
+
import { DropdownMenu } from './dropdown-menu.atom';
|
6
|
+
import { dropdownMenuContentStyle } from './dropdownMenu.style';
|
7
|
+
import { STATE_CLOSED, STATE_OPEN } from '../popover/popover.types';
|
8
|
+
|
9
|
+
@customElement('rtg-dropdown-menu-content')
|
10
|
+
export class DropdownMenuContent extends LitElement {
|
11
|
+
static styles = [css``, TWStyles];
|
12
|
+
@property({ attribute: 'data-state', type: String }) state = STATE_CLOSED;
|
13
|
+
@state() isOpen = false;
|
14
|
+
|
15
|
+
get _dropdownMenu(): DropdownMenu | null {
|
16
|
+
let parent = this.parentElement;
|
17
|
+
// Traverse up the DOM tree to find the parent `Popover`
|
18
|
+
while (parent && !(parent instanceof DropdownMenu)) {
|
19
|
+
parent = parent.parentElement;
|
20
|
+
}
|
21
|
+
return parent;
|
22
|
+
}
|
23
|
+
|
24
|
+
connectedCallback() {
|
25
|
+
super.connectedCallback();
|
26
|
+
if (this.isOpen) {
|
27
|
+
document.addEventListener('mousedown', this.handleClickOutside);
|
28
|
+
}
|
29
|
+
}
|
30
|
+
|
31
|
+
disconnectedCallback() {
|
32
|
+
document.removeEventListener('mousedown', this.handleClickOutside);
|
33
|
+
super.disconnectedCallback();
|
34
|
+
}
|
35
|
+
|
36
|
+
updated(changedProps: PropertyValues) {
|
37
|
+
super.updated(changedProps);
|
38
|
+
// Check if the state is 'open'
|
39
|
+
if (this.state === 'open') {
|
40
|
+
this.isOpen = true;
|
41
|
+
} else {
|
42
|
+
this.isOpen = false;
|
43
|
+
}
|
44
|
+
|
45
|
+
if (changedProps.has('isOpen')) {
|
46
|
+
if (this.isOpen) {
|
47
|
+
document.addEventListener('mousedown', this.handleClickOutside);
|
48
|
+
} else {
|
49
|
+
document.removeEventListener('mousedown', this.handleClickOutside);
|
50
|
+
}
|
51
|
+
}
|
52
|
+
}
|
53
|
+
|
54
|
+
handleClickOutside(event: MouseEvent) {
|
55
|
+
const dropdownMenu = this.shadowRoot?.querySelector(
|
56
|
+
'rtg-dropdown-menu-content'
|
57
|
+
);
|
58
|
+
const dropdownButton = this.shadowRoot?.querySelector('button'); // Ensure this targets your open button
|
59
|
+
|
60
|
+
if (
|
61
|
+
dropdownMenu &&
|
62
|
+
!dropdownMenu.contains(event.target as Node) &&
|
63
|
+
!dropdownButton?.contains(event.target as Node)
|
64
|
+
) {
|
65
|
+
this.isOpen = false; // Only close if the click is outside both the menu and button
|
66
|
+
}
|
67
|
+
}
|
68
|
+
|
69
|
+
render() {
|
70
|
+
return html`
|
71
|
+
<div
|
72
|
+
class="max-h-[300px] overflow-y-auto overflow-x-hidden"
|
73
|
+
style="display: ${this.isOpen ? 'block' : 'none'}"
|
74
|
+
>
|
75
|
+
<slot></slot>
|
76
|
+
</div>
|
77
|
+
`;
|
78
|
+
}
|
79
|
+
}
|
@@ -0,0 +1,60 @@
|
|
1
|
+
import { LitElement, html, css, nothing } from 'lit';
|
2
|
+
import { property, customElement } from 'lit/decorators.js';
|
3
|
+
import { TWStyles } from '../../../styles';
|
4
|
+
|
5
|
+
@customElement('rtg-dropdown-menu-group')
|
6
|
+
export class DropdownMenuGroup extends LitElement {
|
7
|
+
@property({ type: String }) heading = '';
|
8
|
+
|
9
|
+
@property({ attribute: 'id', type: String }) _id = '';
|
10
|
+
|
11
|
+
@property({ attribute: 'aria-hidden', type: String }) _hidden = '';
|
12
|
+
|
13
|
+
private static _counter = 0;
|
14
|
+
|
15
|
+
static styles = [css``, TWStyles];
|
16
|
+
|
17
|
+
private get identifier() {
|
18
|
+
if (this._id !== '') {
|
19
|
+
return this._id;
|
20
|
+
}
|
21
|
+
const parent =
|
22
|
+
this.parentElement?.shadowRoot?.querySelector('div[rtgcmd-list]');
|
23
|
+
if (parent) {
|
24
|
+
this._id = `${parent.getAttribute('id')}g${DropdownMenuGroup._counter++}`;
|
25
|
+
} else {
|
26
|
+
this._id = `rtgcmdrxlxg${DropdownMenuGroup._counter++}`;
|
27
|
+
}
|
28
|
+
return this._id;
|
29
|
+
}
|
30
|
+
|
31
|
+
render() {
|
32
|
+
const className =
|
33
|
+
'overflow-hidden p-1 text-foreground [&_[rtgcmd-group-heading]]:px-2 [&_[rtgcmd-group-heading]]:py-1.5 [&_[rtgcmd-group-heading]]:text-xs [&_[rtgcmd-group-heading]]:font-medium [&_[rtgcmd-group-heading]]:text-muted-foreground';
|
34
|
+
return html`${this._hidden === 'true'
|
35
|
+
? nothing
|
36
|
+
: html`
|
37
|
+
<div
|
38
|
+
class="${className}"
|
39
|
+
rtgcmd-group
|
40
|
+
role="presentation"
|
41
|
+
id="${this.identifier}"
|
42
|
+
>
|
43
|
+
<div
|
44
|
+
rtgcmd-group-heading
|
45
|
+
aria-hidden="true"
|
46
|
+
id="${this.identifier}h"
|
47
|
+
>
|
48
|
+
${this.heading}
|
49
|
+
</div>
|
50
|
+
<div
|
51
|
+
rtgcmd-group-items
|
52
|
+
role="group"
|
53
|
+
aria-labelledby="${this.identifier}h"
|
54
|
+
>
|
55
|
+
<slot></slot>
|
56
|
+
</div>
|
57
|
+
</div>
|
58
|
+
`}`;
|
59
|
+
}
|
60
|
+
}
|
@@ -0,0 +1,74 @@
|
|
1
|
+
import { LitElement, html, css, nothing } from 'lit';
|
2
|
+
import {
|
3
|
+
property,
|
4
|
+
customElement,
|
5
|
+
queryAssignedElements,
|
6
|
+
} from 'lit/decorators.js';
|
7
|
+
import { cn } from '../../../helpers';
|
8
|
+
import { TWStyles } from '../../../styles';
|
9
|
+
|
10
|
+
@customElement('rtg-dropdown-menu-item')
|
11
|
+
export class DropdownMenuItem extends LitElement {
|
12
|
+
@property({ type: String }) _id = '';
|
13
|
+
|
14
|
+
@property({ attribute: 'aria-hidden', type: String }) _hidden = '';
|
15
|
+
|
16
|
+
private static _counter = 0;
|
17
|
+
|
18
|
+
static styles = [css``, TWStyles];
|
19
|
+
|
20
|
+
private get identifier() {
|
21
|
+
if (this._id !== '') {
|
22
|
+
return this._id;
|
23
|
+
}
|
24
|
+
const parent =
|
25
|
+
this.parentElement?.shadowRoot?.querySelector('div[rtgcmd-group]');
|
26
|
+
if (parent) {
|
27
|
+
this._id = `${parent.getAttribute('id')}li${DropdownMenuItem._counter++}`;
|
28
|
+
} else {
|
29
|
+
this._id = `rtgcmdrxgxli${DropdownMenuItem._counter++}`;
|
30
|
+
}
|
31
|
+
return this._id;
|
32
|
+
}
|
33
|
+
|
34
|
+
@property({ attribute: 'data-value', type: String })
|
35
|
+
public get value() {
|
36
|
+
return this.textContent?.trim() || '';
|
37
|
+
}
|
38
|
+
|
39
|
+
@property({ type: Boolean }) selected = false;
|
40
|
+
|
41
|
+
private handleMouseEvent(e: Event) {
|
42
|
+
if (e.type === 'mouseover' || e.type === 'focus') {
|
43
|
+
this.selected = true;
|
44
|
+
}
|
45
|
+
if (e.type === 'mouseleave') {
|
46
|
+
this.selected = false;
|
47
|
+
}
|
48
|
+
}
|
49
|
+
|
50
|
+
render() {
|
51
|
+
return html` ${this._hidden === 'true'
|
52
|
+
? nothing
|
53
|
+
: html`
|
54
|
+
<div
|
55
|
+
class="${cn(
|
56
|
+
'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
|
57
|
+
this.className
|
58
|
+
)}"
|
59
|
+
@mouseover="${this.handleMouseEvent}"
|
60
|
+
@mouseleave="${this.handleMouseEvent}"
|
61
|
+
@focus="${this.handleMouseEvent}"
|
62
|
+
rtgcmd-item
|
63
|
+
role="option"
|
64
|
+
aria-selected="${this.selected}"
|
65
|
+
data-selected="${this.selected}"
|
66
|
+
data-value="${this.value}"
|
67
|
+
id="${this.identifier}"
|
68
|
+
aria-hidden="${this.hidden}"
|
69
|
+
>
|
70
|
+
<slot></slot>
|
71
|
+
</div>
|
72
|
+
`}`;
|
73
|
+
}
|
74
|
+
}
|