@alxgrn/telefrag-ui 0.0.2 → 0.0.4
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/dist/assets/Button.css +1 -1
- package/dist/assets/DatePicker.css +1 -1
- package/dist/assets/Fieldset.css +1 -1
- package/dist/assets/Files.css +1 -1
- package/dist/assets/Form.css +1 -1
- package/dist/assets/Input.css +1 -1
- package/dist/assets/Label.css +1 -1
- package/dist/assets/Modal.css +1 -1
- package/dist/assets/Popup.css +1 -1
- package/dist/assets/RadioLabel.css +1 -1
- package/dist/assets/RequiredMark.css +1 -0
- package/dist/assets/Select.css +1 -1
- package/dist/components/{button → form/button}/Button.js +1 -1
- package/dist/components/{date → form/date}/Date.js +1 -1
- package/dist/components/form/date/DatePicker.js +60 -0
- package/dist/components/{fieldset → form/fieldset}/Fieldset.js +1 -1
- package/dist/components/{files → form/files}/Files.js +1 -1
- package/dist/components/form/{Form.js → form/Form.js} +13 -12
- package/dist/components/form/{FormCol.js → form/FormCol.js} +1 -1
- package/dist/components/form/{FormRow.js → form/FormRow.js} +1 -1
- package/dist/components/{input → form/input}/Input.js +10 -10
- package/dist/components/{label → form/label}/Label.js +1 -1
- package/dist/components/form/radio/RadioLabel.js +27 -0
- package/dist/components/form/required/RequiredMark.js +6 -0
- package/dist/components/{select → form/select}/Select.js +1 -1
- package/dist/components/{time → form/time}/Time.js +2 -2
- package/dist/components/icons/Asterisk.d.ts +2 -0
- package/dist/components/icons/Asterisk.js +23 -0
- package/dist/components/icons/ChevronLeft.d.ts +2 -0
- package/dist/components/icons/ChevronLeft.js +19 -0
- package/dist/components/icons/ChevronRight.d.ts +2 -0
- package/dist/components/icons/ChevronRight.js +19 -0
- package/dist/components/icons/index.d.ts +4 -0
- package/dist/components/icons/index.js +8 -0
- package/dist/components/ui/alert/Alert.d.ts +1 -1
- package/dist/components/ui/alert/Alert.js +1 -1
- package/dist/components/ui/confirm/Confirm.d.ts +1 -1
- package/dist/components/ui/confirm/Confirm.js +1 -1
- package/dist/components/ui/prompt/Prompt.d.ts +1 -1
- package/dist/components/ui/prompt/Prompt.js +2 -2
- package/dist/main.d.ts +16 -16
- package/dist/main.js +31 -31
- package/package.json +1 -1
- package/dist/components/date/DatePicker.js +0 -58
- package/dist/components/radio/RadioLabel.js +0 -27
- package/dist/components/required/RequiredMark.js +0 -5
- /package/dist/components/{button → form/button}/Button.d.ts +0 -0
- /package/dist/components/{checkbox → form/checkbox}/Checkbox.d.ts +0 -0
- /package/dist/components/{checkbox → form/checkbox}/Checkbox.js +0 -0
- /package/dist/components/{checkbox → form/checkbox}/CheckboxList.d.ts +0 -0
- /package/dist/components/{checkbox → form/checkbox}/CheckboxList.js +0 -0
- /package/dist/components/{date → form/date}/Date.d.ts +0 -0
- /package/dist/components/{date → form/date}/DatePicker.d.ts +0 -0
- /package/dist/components/{fieldset → form/fieldset}/Fieldset.d.ts +0 -0
- /package/dist/components/{files → form/files}/Files.d.ts +0 -0
- /package/dist/components/form/{Form.d.ts → form/Form.d.ts} +0 -0
- /package/dist/components/form/{FormCol.d.ts → form/FormCol.d.ts} +0 -0
- /package/dist/components/form/{FormRow.d.ts → form/FormRow.d.ts} +0 -0
- /package/dist/components/{hidden → form/hidden}/Hidden.d.ts +0 -0
- /package/dist/components/{hidden → form/hidden}/Hidden.js +0 -0
- /package/dist/components/{input → form/input}/Input.d.ts +0 -0
- /package/dist/components/{label → form/label}/Label.d.ts +0 -0
- /package/dist/components/{radio → form/radio}/Radio.d.ts +0 -0
- /package/dist/components/{radio → form/radio}/Radio.js +0 -0
- /package/dist/components/{radio → form/radio}/RadioLabel.d.ts +0 -0
- /package/dist/components/{radio → form/radio}/RadioList.d.ts +0 -0
- /package/dist/components/{radio → form/radio}/RadioList.js +0 -0
- /package/dist/components/{required → form/required}/RequiredMark.d.ts +0 -0
- /package/dist/components/{select → form/select}/Select.d.ts +0 -0
- /package/dist/components/{time → form/time}/Time.d.ts +0 -0
package/dist/assets/Button.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--alxgrn-button-bg: var(--alxgrn-
|
|
1
|
+
:root{--alxgrn-button-bg: var(--alxgrn-border-dark);--alxgrn-button-color: white;--alxgrn-button-border: var(--alxgrn-border-dark);--alxgrn-button-bg-error: var(--alxgrn-border-error);--alxgrn-button-color-error: white;--alxgrn-button-border-error: var(--alxgrn-border-error);--alxgrn-button-bg-success: var(--alxgrn-border-success);--alxgrn-button-color-success: white;--alxgrn-button-border-success: var(--alxgrn-border-success);--alxgrn-button-bg-accent: var(--alxgrn-border-accent);--alxgrn-button-color-accent: white;--alxgrn-button-border-accent: var(--alxgrn-border-accent)}[data-theme=dark]{--alxgrn-button-color: #ccc;--alxgrn-button-color-error: #ccc;--alxgrn-button-color-success: #ccc;--alxgrn-button-color-accent: #ccc}.Button,.Button.Default{cursor:pointer;color:var(--alxgrn-button-color);background-color:var(--alxgrn-button-bg);display:inline-block;margin:0;padding:var(--alxgrn-unit-half) var(--alxgrn-unit-double);text-align:center;width:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:var(--alxgrn-unit-small);opacity:.9}.Button:hover{opacity:1}.Button.Disabled,.Button.Disabled:hover{cursor:default;opacity:.5}.Button.Success{color:var(--alxgrn-button-color-success);border-color:var(--alxgrn-button-border-success);background-color:var(--alxgrn-button-bg-success)}.Button.Error{color:var(--alxgrn-button-color-error);border-color:var(--alxgrn-button-border-error);background-color:var(--alxgrn-button-bg-error)}.Button.Accent{color:var(--alxgrn-button-color-accent);border-color:var(--alxgrn-button-border-accent);background-color:var(--alxgrn-button-bg-accent)}.Button.Small{font-size:var(--alxgrn-font-small);padding:var(--alxgrn-unit-small) var(--alxgrn-unit)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--alxgrn-datepicker-bg: transparent;--alxgrn-datepicker-bg-day: var(--alxgrn-bg-light);--alxgrn-datepicker-bg-menu: var(--alxgrn-bg-
|
|
1
|
+
:root{--alxgrn-datepicker-bg: transparent;--alxgrn-datepicker-bg-day: var(--alxgrn-bg-light);--alxgrn-datepicker-bg-menu: var(--alxgrn-bg-light);--alxgrn-datepicker-bg-hover: var(--alxgrn-bg-active);--alxgrn-datepicker-bg-select: var(--alxgrn-bg-dark);--alxgrn-datepicker-color: var(--alxgrn-color-text);--alxgrn-datepicker-color-accent: var(--alxgrn-color-accent);--alxgrn-datepicker-color-select: white;--alxgrn-datepicker-border: transparent}.FormDatePicker{display:grid;gap:var(--alxgrn-unit-smallest);width:fit-content;overflow:hidden;border:1px solid var(--alxgrn-datepicker-border);border-radius:var(--alxgrn-unit-small);padding:var(--alxgrn-unit-small)}.FormDatePicker *{margin:0;padding:0;text-align:center;color:var(--alxgrn-datepicker-color);background-color:var(--alxgrn-datepicker-bg);line-height:var(--alxgrn-unit-double);-webkit-user-select:none;user-select:none}.FormDatePicker .FormDatePickerMenu{display:grid;grid-template-columns:repeat(7,var(--alxgrn-unit-double));text-transform:capitalize;background-color:var(--alxgrn-datepicker-bg-menu);gap:var(--alxgrn-unit-smallest);border-radius:var(--alxgrn-unit-small);overflow:hidden}.FormDatePicker .FormDatePickerMenu .FormDatePickerText{grid-column:span 5;font-size:smaller}.FormDatePicker .FormDatePickerMenu .FormDatePickerPrev,.FormDatePicker .FormDatePickerMenu .FormDatePickerNext{color:var(--alxgrn-datepicker-color-accent);cursor:pointer;display:flex;align-items:center;justify-content:center}.FormDatePicker .FormDatePickerMenu .FormDatePickerPrev:hover,.FormDatePicker .FormDatePickerMenu .FormDatePickerNext:hover{background-color:var(--alxgrn-datepicker-bg-hover)}.FormDatePicker .FormDatePickerDays{display:grid;grid-template-columns:repeat(7,var(--alxgrn-unit-double));gap:var(--alxgrn-unit-smallest);font-size:smaller}.FormDatePicker .FormDatePickerDays span{background-color:var(--alxgrn-datepicker-bg-day);overflow:hidden;cursor:pointer;border-radius:var(--alxgrn-unit-small)}.FormDatePicker .FormDatePickerDays span:hover{background-color:var(--alxgrn-datepicker-bg-hover)}.FormDatePicker .FormDatePickerDays span.Empty{cursor:default;background-color:var(--alxgrn-datepicker-bg)}.FormDatePicker .FormDatePickerDays span.Selected{color:var(--alxgrn-datepicker-color-select);background-color:var(--alxgrn-datepicker-bg-select)}.FormDatePicker .FormDatePickerDays span.Current{color:var(--alxgrn-datepicker-color-accent);font-weight:700}
|
package/dist/assets/Fieldset.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--alxgrn-fieldset-color: var(--alxgrn-color-accent);--alxgrn-fieldset-color-error: var(--alxgrn-color-error);--alxgrn-fieldset-color-top: var(--alxgrn-color-light);--alxgrn-fieldset-color-bottom: var(--alxgrn-color-light);--alxgrn-fieldset-color-disabled: var(--alxgrn-color-light);--alxgrn-fieldset-border: var(--alxgrn-
|
|
1
|
+
:root{--alxgrn-fieldset-color: var(--alxgrn-color-accent);--alxgrn-fieldset-color-error: var(--alxgrn-color-error);--alxgrn-fieldset-color-top: var(--alxgrn-color-light);--alxgrn-fieldset-color-bottom: var(--alxgrn-color-light);--alxgrn-fieldset-color-disabled: var(--alxgrn-color-light);--alxgrn-fieldset-border: var(--alxgrn-border-accent);--alxgrn-fieldset-border-error: var(--alxgrn-border-error);--alxgrn-fieldset-border-disabled: var(--alxgrn-border-light)}.Form .Fieldset{display:block;margin:var(--alxgrn-unit) 0;overflow:hidden}.Form .Fieldset .FormItem{margin:0 0 var(--alxgrn-unit-half) 0}.Form .Fieldset .FormItem:last-child{margin-bottom:0}.Form .Fieldset .Label{display:flex;align-items:center;color:var(--alxgrn-fieldset-color);margin-bottom:var(--alxgrn-unit-small)}.Form .Fieldset .Inner{border:1px solid var(--alxgrn-fieldset-border);padding:var(--alxgrn-unit-half);border-radius:var(--alxgrn-unit-small)}.Form .Fieldset .Top,.Form .Fieldset .Bottom{font-size:smaller}.Form .Fieldset .Top{color:var(--alxgrn-fieldset-color-top);margin-bottom:var(--alxgrn-unit-small)}.Form .Fieldset .Bottom{color:var(--alxgrn-fieldset-color-bottom);margin-top:var(--alxgrn-unit-small)}.Form .Fieldset.Disabled .Label,.Form .Fieldset.Disabled .Top,.Form .Fieldset.Disabled .Bottom{color:var(--alxgrn-fieldset-color-disabled)}.Form .Fieldset.Disabled .Inner{border-color:var(--alxgrn-fieldset-border-disabled)}.Form .Fieldset.Error .Label,.Form .Fieldset.Error .Top,.Form .Fieldset.Error .Bottom{color:var(--alxgrn-fieldset-color-error)}.Form .Fieldset.Error .Inner{border-color:var(--alxgrn-fieldset-border-error)}
|
package/dist/assets/Files.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--alxgrn-files-bg: var(--alxgrn-
|
|
1
|
+
:root{--alxgrn-files-bg: var(--alxgrn-border-accent);--alxgrn-files-color: white;--alxgrn-files-bg-error: var(--alxgrn-border-error)}[data-theme=dark]{--alxgrn-files-color: #ccc}.Form ul.FileList{color:var(--alxgrn-color-text);margin:0 0 var(--alxgrn-unit-half) 0;padding:0 0 0 var(--alxgrn-unit)}.Form ul.FileList li{cursor:pointer}.Form ul.FileList li div{display:flex;align-items:baseline;flex-wrap:nowrap;gap:var(--alxgrn-unit);justify-content:space-between;padding-left:var(--alxgrn-unit-small);margin-bottom:var(--alxgrn-unit-small)}.Form ul.FileList li div span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.Form ul.FileList li div span:last-child{white-space:nowrap;font-size:smaller;color:var(--alxgrn-color-light)}.Form ul.FileList.Disabled li{cursor:default}.Form ul.FileList.Disabled li div span{cursor:default;color:var(--alxgrn-color-light)}.Form ul.FileList li::marker{content:"■";color:var(--alxgrn-color-accent)}.Form ul.FileList li:hover::marker{content:"✖︎";color:var(--alxgrn-color-error)}.Form ul.FileList.Disabled li::marker{content:"■";color:var(--alxgrn-color-light)}.Form .FileLabel{display:flex;align-items:center;gap:var(--alxgrn-unit);flex-wrap:nowrap}.Form .FileLabel input[type=file]{display:none}.Form .FileLabel label{flex:0 0 auto;padding:var(--alxgrn-unit-half) var(--alxgrn-unit);border-radius:var(--alxgrn-unit-small);margin:0;cursor:pointer;color:var(--alxgrn-files-color);background-color:var(--alxgrn-files-bg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.Form .FileLabel span{flex:1 1 auto;color:var(--alxgrn-color-light);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.Form .FileLabel.Disabled label{cursor:default;opacity:.5}.Form .FileLabel.Disabled span{color:var(--alxgrn-color-light)}.Form .FileLabel.Error label{background-color:var(--alxgrn-files-bg-error)}
|
package/dist/assets/Form.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
*{box-sizing:border-box;overflow-wrap:anywhere}:root{--alxgrn-unit: 16px;--alxgrn-unit-half: 8px;--alxgrn-unit-small: 4px;--alxgrn-unit-double: 32px;--alxgrn-unit-smallest: 2px;--alxgrn-font-size: 16px;--alxgrn-font-small: 12px;--alxgrn-line-height: 1.3;--alxgrn-font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;--alxgrn-color-text: #555;--alxgrn-color-dark: var(--alxgrn-color-text);--alxgrn-color-light: lightslategrey;--alxgrn-color-error: firebrick;--alxgrn-color-accent: steelblue;--alxgrn-color-active:
|
|
1
|
+
*{box-sizing:border-box;overflow-wrap:anywhere}:root{--alxgrn-unit: 16px;--alxgrn-unit-half: 8px;--alxgrn-unit-small: 4px;--alxgrn-unit-double: 32px;--alxgrn-unit-smallest: 2px;--alxgrn-font-size: 16px;--alxgrn-font-small: 12px;--alxgrn-line-height: 1.3;--alxgrn-font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;--alxgrn-color-text: #555;--alxgrn-color-dark: var(--alxgrn-color-text);--alxgrn-color-light: lightslategrey;--alxgrn-color-error: firebrick;--alxgrn-color-accent: steelblue;--alxgrn-color-active: var(--alxgrn-color-text);--alxgrn-color-success: forestgreen;--alxgrn-bg-main: #eee;--alxgrn-bg-panel: #fff;--alxgrn-bg-modal: var(--alxgrn-bg-panel);--alxgrn-bg-popup: var(--alxgrn-bg-panel);--alxgrn-bg-dark: #888;--alxgrn-bg-light: rgba(119, 136, 153, .1);--alxgrn-bg-error: rgba(178, 34, 34, .1);--alxgrn-bg-accent: rgba(70, 130, 180, .1);--alxgrn-bg-active: moccasin;--alxgrn-bg-success: rgba(34, 139, 34, .1);--alxgrn-border-dark: rgba(136, 136, 136, 1);--alxgrn-border-light: rgba(119, 136, 153, 1);--alxgrn-border-error: rgba(178, 34, 34, 1);--alxgrn-border-accent: rgba(70, 130, 180, 1);--alxgrn-border-active: moccasin;--alxgrn-border-success: rgba(34, 139, 34, 1)}[data-theme=dark]{--alxgrn-color-text: #999;--alxgrn-color-light: #666;--alxgrn-bg-main: #111;--alxgrn-bg-panel: #222;--alxgrn-bg-modal: #222;--alxgrn-bg-popup: #333;--alxgrn-bg-active: #444;--alxgrn-border-dark: rgba(136, 136, 136, .5);--alxgrn-border-light: rgba(119, 136, 153, .5);--alxgrn-border-error: rgba(178, 34, 34, .5);--alxgrn-border-accent: rgba(70, 130, 180, .5);--alxgrn-border-active: rgba(255, 228, 181, .5);--alxgrn-border-success: rgba(34, 139, 34, .5)}:root{--alxgrn-form-width: 512px;--alxgrn-form-width-wide: 1024px}.Form{max-width:var(--alxgrn-form-width)}.Form.FormWide{max-width:var(--alxgrn-form-width-wide)}.Form *{font-size:inherit;line-height:inherit;font-family:inherit;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}.Form .FormItem{display:block;margin:var(--alxgrn-unit) 0}.FormSubmitButtons{margin-top:var(--alxgrn-unit-double);margin-bottom:0;display:flex;flex-wrap:nowrap;justify-content:space-between;gap:var(--alxgrn-unit)}
|
package/dist/assets/Input.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--alxgrn-input-bg: var(--alxgrn-bg-accent);--alxgrn-input-color: var(--alxgrn-color-text);--alxgrn-input-
|
|
1
|
+
:root{--alxgrn-input-bg: var(--alxgrn-bg-accent);--alxgrn-input-color: var(--alxgrn-color-text);--alxgrn-input-caret: var(--alxgrn-color-text);--alxgrn-input-border: var(--alxgrn-border-accent);--alxgrn-input-bg-focus: var(--alxgrn-bg-active);--alxgrn-input-color-focus: var(--alxgrn-color-text);--alxgrn-input-caret-focus: var(--alxgrn-color-accent);--alxgrn-input-border-focus: var(--alxgrn-border-accent);--alxgrn-input-bg-error: var(--alxgrn-bg-error);--alxgrn-input-color-error: var(--alxgrn-color-error);--alxgrn-input-caret-error: var(--alxgrn-color-error);--alxgrn-input-border-error: var(--alxgrn-border-error);--alxgrn-input-bg-success: var(--alxgrn-bg-success);--alxgrn-input-color-success: var(--alxgrn-color-success);--alxgrn-input-caret-success: var(--alxgrn-color-success);--alxgrn-input-border-success: var(--alxgrn-border-success);--alxgrn-input-bg-disabled: var(--alxgrn-bg-light);--alxgrn-input-color-disabled: var(--alxgrn-color-light);--alxgrn-input-caret-disabled: var(--alxgrn-color-light);--alxgrn-input-border-disabled: var(--alxgrn-border-light);--alxgrn-input-color-placeholder: lightslategrey}.FormItem input[type=text],.FormItem input[type=password],.FormItem textarea{color:var(--alxgrn-input-color);padding:var(--alxgrn-unit-half);margin:0;font-size:inherit;line-height:inherit;font-family:inherit;caret-color:var(--alxgrn-input-caret);border-radius:var(--alxgrn-unit-small);border:1px solid var(--alxgrn-input-border);width:100%;display:block;background-color:var(--alxgrn-input-bg);appearance:none;-moz-appearance:none;-webkit-appearance:none;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}.FormItem textarea{resize:vertical}.FormItem input[type=text]:focus,.FormItem input[type=password]:focus,.FormItem textarea:focus{outline:none;color:var(--alxgrn-input-color-focus);background-color:var(--alxgrn-input-bg-focus);border:1px solid var(--alxgrn-input-border-focus);caret-color:var(--alxgrn-input-caret-focus)}.FormItem input[type=text]::placeholder,.FormItem input[type=password]::placeholder,.FormItem textarea::placeholder{color:var(--alxgrn-input-color-placeholder);font-size:var(--alxgrn-unit)}.FormItem input[type=text]:disabled,.FormItem input[type=password]:disabled,.FormItem textarea:disabled{color:var(--alxgrn-input-color-disabled);border-color:var(--alxgrn-input-border-disabled);background-color:var(--alxgrn-input-bg-disabled);cursor:default;caret-color:var(--alxgrn-input-caret-disabled)}.FormItem input:read-only{cursor:pointer}
|
package/dist/assets/Label.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--alxgrn-label-color: var(--alxgrn-color-accent);--alxgrn-label-color-error: var(--alxgrn-color-error);--alxgrn-label-color-top: var(--alxgrn-color-light);--alxgrn-label-color-bottom: var(--alxgrn-color-light);--alxgrn-label-color-disabled: var(--alxgrn-color-light)}.FormItem label{color:var(--alxgrn-label-color);display:block;-webkit-user-select:none;user-select:none;padding:0}.FormItem label .Label{margin-bottom:var(--alxgrn-unit-small)}.FormItem label .Top,.FormItem label .Bottom{font-size:smaller}.FormItem label .Top{color:var(--alxgrn-label-color-top);margin-bottom:var(--alxgrn-unit-small)}.FormItem label .Bottom{color:var(--alxgrn-label-color-bottom);margin-top:var(--alxgrn-unit-small)}.FormItem label.Disabled,.FormItem label.Disabled .Top,.FormItem label.Disabled .Bottom{color:var(--alxgrn-label-color-disabled)}.FormItem label.Error,.FormItem label.Error .Top,.FormItem label.Error .Bottom{color:var(--alxgrn-label-color-error)}
|
|
1
|
+
:root{--alxgrn-label-color: var(--alxgrn-color-accent);--alxgrn-label-color-error: var(--alxgrn-color-error);--alxgrn-label-color-top: var(--alxgrn-color-light);--alxgrn-label-color-bottom: var(--alxgrn-color-light);--alxgrn-label-color-disabled: var(--alxgrn-color-light)}.FormItem label{color:var(--alxgrn-label-color);display:block;-webkit-user-select:none;user-select:none;padding:0}.FormItem label .Label{display:flex;align-items:center;margin-bottom:var(--alxgrn-unit-small)}.FormItem label .Top,.FormItem label .Bottom{font-size:smaller}.FormItem label .Top{color:var(--alxgrn-label-color-top);margin-bottom:var(--alxgrn-unit-small)}.FormItem label .Bottom{color:var(--alxgrn-label-color-bottom);margin-top:var(--alxgrn-unit-small)}.FormItem label.Disabled,.FormItem label.Disabled .Top,.FormItem label.Disabled .Bottom{color:var(--alxgrn-label-color-disabled)}.FormItem label.Error,.FormItem label.Error .Top,.FormItem label.Error .Bottom{color:var(--alxgrn-label-color-error)}
|
package/dist/assets/Modal.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--alxgrn-modal-zindex: 1000;--alxgrn-modal-shadow: 0 0 var(--alxgrn-unit-half) rgba(0,0,0,.1);--alxgrn-modal-bg-color: var(--alxgrn-bg-
|
|
1
|
+
:root{--alxgrn-modal-zindex: 1000;--alxgrn-modal-shadow: 0 0 var(--alxgrn-unit-half) rgba(0,0,0,.1);--alxgrn-modal-color: var(--alxgrn-color-text);--alxgrn-modal-bg-color: var(--alxgrn-bg-modal);--alxgrn-modal-animation-length: .1s;--alxgrn-modal-width: 512px;--alxgrn-modal-color-close: var(--alxgrn-color-light);--alxgrn-modal-color-accent: var(--alxgrn-color-accent);--alxgrn-modal-color-scroll: var(--alxgrn-color-light)}.Modal{z-index:var(--alxgrn-modal-zindex);position:fixed;top:0;left:0;right:0;bottom:0;padding:var(--alxgrn-unit);background-color:#00000080;overflow:hidden;display:flex;align-items:center;justify-content:center}.Modal *{color:var(--alxgrn-modal-color);font-size:inherit;line-height:inherit;font-family:inherit;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}.Modal .ModalInner{display:flex;padding:var(--alxgrn-unit-double) var(--alxgrn-unit) var(--alxgrn-unit-double) var(--alxgrn-unit-double);position:relative;background-color:var(--alxgrn-modal-bg-color);width:var(--alxgrn-modal-width);max-height:100%;border-radius:var(--alxgrn-unit-half);overflow:auto}.Modal .ModalInner .ModalContent{width:100%;overflow:auto;padding-right:var(--alxgrn-unit)}.Modal .ModalInner .ModalContent .Form{max-width:100%;margin-bottom:0}.Modal .ModalInner .ModalClose{position:absolute;top:var(--alxgrn-unit);right:var(--alxgrn-unit);width:var(--alxgrn-unit);height:var(--alxgrn-unit);cursor:pointer}.Modal .ModalInner .ModalClose span{position:absolute;background-color:var(--alxgrn-modal-color-close);display:inline-block;border-radius:2px;width:2px;height:var(--alxgrn-unit);top:0;left:0;transform:translate(var(--alxgrn-unit-half)) rotate(45deg)}.Modal .ModalInner .ModalClose span:nth-child(2){transform:translate(var(--alxgrn-unit-half)) rotate(135deg)}.Modal .ModalInner .ModalClose:hover span{background-color:var(--alxgrn-modal-color-accent)}@media (max-width: 512px){.Modal .ModalInner{width:100%;border-radius:var(--alxgrn-unit-half);padding:calc(var(--alxgrn-unit-half) * 3) var(--alxgrn-unit-half) var(--alxgrn-unit) var(--alxgrn-unit)}.Modal .ModalInner .ModalClose{top:var(--alxgrn-unit-half);right:var(--alxgrn-unit-half)}.Modal .ModalInner .ModalContent{padding-right:var(--alxgrn-unit-half)}}.Modal-enter{pointer-events:none;background-color:#0000}.Modal-enter-active{pointer-events:none;background-color:#00000080;transition:background-color var(--alxgrn-modal-animation-length) ease-in}.Modal-enter-done{pointer-events:auto;background-color:#00000080}.Modal-exit{pointer-events:none;background-color:#00000080}.Modal-exit-active{pointer-events:none;background-color:#0000;transition:background-color var(--alxgrn-modal-animation-length) ease-out}.Modal-exit-done{pointer-events:auto;background-color:#0000}.Modal-enter .ModalInner{pointer-events:none;opacity:0;transform:scale(.8)}.Modal-enter-active .ModalInner{pointer-events:none;opacity:1;transform:scale(1);transition:opacity var(--alxgrn-modal-animation-length) ease-in,transform var(--alxgrn-modal-animation-length) ease-in}.Modal-exit .ModalInner{pointer-events:none;opacity:1;transform:scale(1)}.Modal-exit-active .ModalInner{pointer-events:none;opacity:0;transform:scale(.8);transition:opacity var(--alxgrn-modal-animation-length) ease-out,transform var(--alxgrn-modal-animation-length) ease-out}.Modal .ModalInner .ModalContent{scrollbar-color:transparent var(--alxgrn-modal-color-scroll);scrollbar-width:thin}.Modal .ModalInner .ModalContent::-webkit-scrollbar{width:var(--alxgrn-unit-small);height:var(--alxgrn-unit-small)}.Modal .ModalInner .ModalContent::-webkit-scrollbar-track{background-color:transparent;border-radius:var(--alxgrn-unit-small)}.Modal .ModalInner .ModalContent::-webkit-scrollbar-thumb{background-color:var(--alxgrn-modal-color-scroll);border-radius:var(--alxgrn-unit-small)}.Modal .ModalInner .ModalContent::-webkit-scrollbar-corner{background-color:transparent}
|
package/dist/assets/Popup.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--alxgrn-popup-zindex: 2000;--alxgrn-popup-shadow: 0 0 var(--alxgrn-unit-half) rgba(0,0,0,.1);--alxgrn-popup-bg-color:
|
|
1
|
+
:root{--alxgrn-popup-zindex: 2000;--alxgrn-popup-shadow: 0 0 var(--alxgrn-unit-half) rgba(0,0,0,.1);--alxgrn-popup-color: var(--alxgrn-color-text);--alxgrn-popup-bg-color: var(--alxgrn-bg-popup);--alxgrn-popup-animation-length: .1s}.Popup{z-index:var(--alxgrn-popup-zindex);position:absolute}.Popup *{color:var(--alxgrn-popup-color);font-size:inherit;line-height:inherit;font-family:inherit;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}.Popup .PopupInner{position:absolute;background-color:var(--alxgrn-popup-bg-color);border-radius:var(--alxgrn-unit-half);box-shadow:var(--alxgrn-popup-shadow);overflow:hidden;display:flex}.Popup-enter{pointer-events:none;opacity:0;transform:scale(.8)}.Popup-enter-active{pointer-events:none;opacity:1;transform:scale(1);transition:opacity var(--alxgrn-popup-animation-length) ease-in,transform var(--alxgrn-popup-animation-length) ease-in}.Popup-exit{pointer-events:none;opacity:1;transform:scale(1)}.Popup-exit-active{pointer-events:none;opacity:0;transform:scale(.8);transition:opacity var(--alxgrn-popup-animation-length) ease-out,transform var(--alxgrn-popup-animation-length) ease-out}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.Form label.Radio{color:var(--alxgrn-color-text);width:auto;display:block;-webkit-user-select:none;user-select:none;padding:0;cursor:pointer;margin-bottom:var(--alxgrn-unit-half)}.Form label.Radio:last-child{margin-bottom:0}.Form label.Radio .Bottom{font-size:smaller;color:var(--alxgrn-color-light);cursor:default}.Form label.Radio.Disabled,.Form label.Radio.Disabled .Bottom{color:var(--alxgrn-color-light);cursor:default}.Form label.Radio.Error,.Form label.Radio.Error .Bottom{color:var(--alxgrn-color-error)}.Form label.Radio{display:flex;width:fit-content;align-items:flex-start}.Form label.Radio s,.Form label.Radio input{flex:0 0 auto}.Form label.Radio div{flex:1 1 auto}.Form label.Radio input{display:none}.Form label.Radio s{width:var(--alxgrn-unit);height:var(--alxgrn-unit);border:1px solid var(--alxgrn-color-accent);padding:2px;background-clip:content-box;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;margin:var(--alxgrn-unit-smallest) var(--alxgrn-unit-half) 0 0;text-decoration:none}.Form label.Radio input[type=radio]+s{border-radius:50%}.Form label.Radio input[type=checkbox]+s{border-radius:var(--alxgrn-unit-small)}.Form label.Radio.Disabled s{opacity:.5;border:1px solid var(--alxgrn-color-light)}.Form label.Radio.Disabled.Checked s{background-color:var(--alxgrn-color-light)}.Form label.Radio.Checked s{background-color:var(--alxgrn-color-accent)}.Form label.Radio.Error s{border:1px solid var(--alxgrn-color-error)}.Form label.Radio.Error.Checked s{background-color:var(--alxgrn-color-error)}
|
|
1
|
+
.Form label.Radio{color:var(--alxgrn-color-text);width:auto;display:block;-webkit-user-select:none;user-select:none;padding:0;cursor:pointer;margin-bottom:var(--alxgrn-unit-half)}.Form label.Radio:last-child{margin-bottom:0}.Form label.Radio .Label{display:flex;align-items:center}.Form label.Radio .Bottom{font-size:smaller;color:var(--alxgrn-color-light);cursor:default}.Form label.Radio.Disabled,.Form label.Radio.Disabled .Bottom{color:var(--alxgrn-color-light);cursor:default}.Form label.Radio.Error,.Form label.Radio.Error .Bottom{color:var(--alxgrn-color-error)}.Form label.Radio{display:flex;width:fit-content;align-items:flex-start}.Form label.Radio s,.Form label.Radio input{flex:0 0 auto}.Form label.Radio div{flex:1 1 auto}.Form label.Radio input{display:none}.Form label.Radio s{width:var(--alxgrn-unit);height:var(--alxgrn-unit);border:1px solid var(--alxgrn-color-accent);padding:2px;background-clip:content-box;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;margin:var(--alxgrn-unit-smallest) var(--alxgrn-unit-half) 0 0;text-decoration:none}.Form label.Radio input[type=radio]+s{border-radius:50%}.Form label.Radio input[type=checkbox]+s{border-radius:var(--alxgrn-unit-small)}.Form label.Radio.Disabled s{opacity:.5;border:1px solid var(--alxgrn-color-light)}.Form label.Radio.Disabled.Checked s{background-color:var(--alxgrn-color-light)}.Form label.Radio.Checked s{background-color:var(--alxgrn-color-accent)}.Form label.Radio.Error s{border:1px solid var(--alxgrn-color-error)}.Form label.Radio.Error.Checked s{background-color:var(--alxgrn-color-error)}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.RequiredMark{display:flex;color:var(--alxgrn-color-error)}
|
package/dist/assets/Select.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--alxgrn-select-bg: var(--alxgrn-bg-accent);--alxgrn-select-color: var(--alxgrn-color-text);--alxgrn-select-border: var(--alxgrn-
|
|
1
|
+
:root{--alxgrn-select-bg: var(--alxgrn-bg-accent);--alxgrn-select-color: var(--alxgrn-color-text);--alxgrn-select-border: var(--alxgrn-border-accent);--alxgrn-select-bg-focus: var(--alxgrn-bg-active);--alxgrn-select-color-focus: var(--alxgrn-color-text);--alxgrn-select-border-focus: var(--alxgrn-border-accent);--alxgrn-select-bg-error: var(--alxgrn-bg-error);--alxgrn-select-color-error: var(--alxgrn-color-error);--alxgrn-select-border-error: var(--alxgrn-border-error);--alxgrn-select-bg-success: var(--alxgrn-bg-success);--alxgrn-select-color-success: var(--alxgrn-color-success);--alxgrn-select-border-success: var(--alxgrn-border-success);--alxgrn-select-bg-disabled: var(--alxgrn-bg-light);--alxgrn-select-color-disabled: var(--alxgrn-color-light);--alxgrn-select-border-disabled: var(--alxgrn-border-light)}.FormItem select{color:var(--alxgrn-select-color);padding:var(--alxgrn-unit-half);margin:0;font-size:inherit;line-height:inherit;font-family:inherit;border-radius:var(--alxgrn-unit-small);border:1px solid var(--alxgrn-select-border);width:100%;display:block;background-color:var(--alxgrn-select-bg);appearance:none;-moz-appearance:none;-webkit-appearance:none;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}.FormItem select:focus{outline:none;color:var(--alxgrn-select-color-focus);background-color:var(--alxgrn-select-bg-focus);border:1px solid var(--alxgrn-select-border-focus)}.FormItem select:disabled{color:var(--alxgrn-select-color-disabled);border-color:var(--alxgrn-select-border-disabled);background-color:var(--alxgrn-select-bg-disabled);cursor:default}.FormItem select{padding-right:var(--alxgrn-unit-double);cursor:pointer}.FormItem .SelectWrap{position:relative}.FormItem .SelectWrap:before{content:"";position:absolute;width:0;height:0;border:var(--alxgrn-unit-small) solid transparent;border-top-color:var(--alxgrn-select-border);top:var(--alxgrn-unit);right:calc(var(--alxgrn-unit) - var(--alxgrn-unit-small));cursor:pointer;pointer-events:none}.FormItem .SelectWrap.Disabled:before{border-top-color:var(--alxgrn-select-border-disabled);cursor:default}.FormItem .SelectWrap.Error:before{border-top-color:var(--alxgrn-select-border-error)}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as f } from "react/jsx-runtime";
|
|
2
|
-
import '
|
|
2
|
+
import '../../../assets/Button.css';const u = ({ label: t, type: o = "Default", size: a = "Normal", disabled: n = !1, onClick: s }) => /* @__PURE__ */ f(
|
|
3
3
|
"span",
|
|
4
4
|
{
|
|
5
5
|
className: n ? `Button ${o} ${a} Disabled` : `Button ${o} ${a}`,
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsxs as b, jsx as l } from "react/jsx-runtime";
|
|
2
2
|
import { useRef as C, useState as k } from "react";
|
|
3
|
-
import { Popup as I } from "
|
|
3
|
+
import { Popup as I } from "../../ui/popup/Popup.js";
|
|
4
4
|
import $ from "../label/Label.js";
|
|
5
5
|
import D from "./DatePicker.js";
|
|
6
6
|
const z = ({
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
import { jsxs as u, jsx as n } from "react/jsx-runtime";
|
|
2
|
+
import { useState as m, useEffect as v } from "react";
|
|
3
|
+
import y from "../../icons/ChevronLeft.js";
|
|
4
|
+
import C from "../../icons/ChevronRight.js";
|
|
5
|
+
import '../../../assets/DatePicker.css';const B = ({ year: o, month: i, day: l, onChange: N }) => {
|
|
6
|
+
const Y = R(), D = /* @__PURE__ */ new Date(), f = D.getDate(), d = D.getMonth(), h = D.getFullYear(), [a, p] = m(h), [c, g] = m(d), [x, S] = m([]), [w, k] = m(0), [I, M] = m(0), [L, F] = m(0);
|
|
7
|
+
v(() => {
|
|
8
|
+
let e = o, t = i, r = l;
|
|
9
|
+
typeof e == "string" && (e = parseInt(e)), typeof t == "string" && (t = parseInt(t)), typeof r == "string" && (r = parseInt(r)), e !== void 0 && isNaN(e) && (e = h), t !== void 0 && isNaN(t) && (t = d), r !== void 0 && isNaN(r) && (r = f);
|
|
10
|
+
const s = new Date(e ?? h, t ? t - 1 : d, r ?? f);
|
|
11
|
+
p(s.getFullYear()), g(s.getMonth()), k(s.getDate()), M(s.getMonth()), F(s.getFullYear());
|
|
12
|
+
}, [o, i, l, h, d, f]), v(() => {
|
|
13
|
+
const e = T(c, a);
|
|
14
|
+
let t = new Date(a, c, 1).getDay();
|
|
15
|
+
t === 0 && (t = 7);
|
|
16
|
+
const r = [];
|
|
17
|
+
for (let s = 1; s < t; s++) r.push(0);
|
|
18
|
+
for (let s = 1; s <= e; s++) r.push(s);
|
|
19
|
+
S(r);
|
|
20
|
+
}, [c, a]);
|
|
21
|
+
const P = (e) => {
|
|
22
|
+
let t = c + e;
|
|
23
|
+
t < 0 && (t = 11), t > 11 && (t = 0), g(t);
|
|
24
|
+
}, j = (e) => {
|
|
25
|
+
e && (k(e), M(c), F(a), N && N({ day: e, month: c + 1, year: a }));
|
|
26
|
+
}, E = (e) => {
|
|
27
|
+
if (!e) return "Empty";
|
|
28
|
+
if (e === w && c === I && a === L) return "Selected";
|
|
29
|
+
if (e === f && c === d && a === h) return "Current";
|
|
30
|
+
};
|
|
31
|
+
return /* @__PURE__ */ u("div", { className: "FormDatePicker", children: [
|
|
32
|
+
/* @__PURE__ */ u("div", { className: "FormDatePickerMenu", children: [
|
|
33
|
+
/* @__PURE__ */ n("span", { className: "FormDatePickerPrev", onClick: () => P(-1), children: /* @__PURE__ */ n(y, {}) }),
|
|
34
|
+
/* @__PURE__ */ n("span", { className: "FormDatePickerText", children: Y[c] }),
|
|
35
|
+
/* @__PURE__ */ n("span", { className: "FormDatePickerNext", onClick: () => P(1), children: /* @__PURE__ */ n(C, {}) })
|
|
36
|
+
] }),
|
|
37
|
+
/* @__PURE__ */ n("div", { className: "FormDatePickerDays", children: x.map((e, t) => /* @__PURE__ */ n(
|
|
38
|
+
"span",
|
|
39
|
+
{
|
|
40
|
+
className: E(e),
|
|
41
|
+
onClick: () => j(e),
|
|
42
|
+
children: e || ""
|
|
43
|
+
},
|
|
44
|
+
t
|
|
45
|
+
)) }),
|
|
46
|
+
/* @__PURE__ */ u("div", { className: "FormDatePickerMenu", children: [
|
|
47
|
+
/* @__PURE__ */ n("span", { className: "FormDatePickerPrev", onClick: () => p(a - 1), children: /* @__PURE__ */ n(y, {}) }),
|
|
48
|
+
/* @__PURE__ */ n("span", { className: "FormDatePickerText", children: a }),
|
|
49
|
+
/* @__PURE__ */ n("span", { className: "FormDatePickerNext", onClick: () => p(a + 1), children: /* @__PURE__ */ n(C, {}) })
|
|
50
|
+
] })
|
|
51
|
+
] });
|
|
52
|
+
}, T = (o, i) => new Date(i, o + 1, 0).getDate(), R = () => {
|
|
53
|
+
let o = new Date(2e3, 0), i = [];
|
|
54
|
+
for (let l = 0; l < 12; l++)
|
|
55
|
+
i.push(o.toLocaleString("default", { month: "long" })), o.setMonth(l + 1);
|
|
56
|
+
return i;
|
|
57
|
+
};
|
|
58
|
+
export {
|
|
59
|
+
B as default
|
|
60
|
+
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsxs as i, jsx as l } from "react/jsx-runtime";
|
|
2
2
|
import { useState as L, useEffect as M } from "react";
|
|
3
3
|
import $ from "../fieldset/Fieldset.js";
|
|
4
|
-
import '
|
|
4
|
+
import '../../../assets/Files.css';const h = (t) => t > 1024 * 1024 ? Math.round(t / (1024 * 1024)) + " Mb" : t > 1024 ? Math.round(t / 1024) + " Kb" : t + " bytes", D = ({
|
|
5
5
|
id: t,
|
|
6
6
|
files: n,
|
|
7
7
|
onChange: c,
|
|
@@ -3,9 +3,13 @@ import { useState as g, useEffect as q } from "react";
|
|
|
3
3
|
import { deepForEach as y } from "react-children-utilities";
|
|
4
4
|
import x, { isValidDate as H } from "../date/Date.js";
|
|
5
5
|
import F from "../button/Button.js";
|
|
6
|
+
import '../../../assets/Editable.css';import '../../../assets/Message.css';import '../../../assets/Modal.css';import '../../../assets/Panel.css';import '../../../assets/FormCol.css';import '../../../assets/FormRow.css';import '../../../assets/Form.css';/* empty css */
|
|
7
|
+
/* empty css */
|
|
8
|
+
import "../date/DatePicker.js";
|
|
6
9
|
import R from "../time/Time.js";
|
|
7
10
|
import { Files as C } from "../files/Files.js";
|
|
8
11
|
import E from "../input/Input.js";
|
|
12
|
+
import "../required/RequiredMark.js";
|
|
9
13
|
import "../label/Label.js";
|
|
10
14
|
import { RadioList as D } from "../radio/RadioList.js";
|
|
11
15
|
import { Select as I } from "../select/Select.js";
|
|
@@ -13,19 +17,16 @@ import T from "../hidden/Hidden.js";
|
|
|
13
17
|
import B from "../checkbox/Checkbox.js";
|
|
14
18
|
import { CheckboxList as S } from "../checkbox/CheckboxList.js";
|
|
15
19
|
import "../fieldset/Fieldset.js";
|
|
16
|
-
import '../../assets/Editable.css';import '../../assets/Message.css';import '../../assets/Modal.css';import '../../assets/Panel.css';import '../../assets/FormCol.css';import '../../assets/FormRow.css';import '../../assets/Form.css';/* empty css */
|
|
17
|
-
/* empty css */
|
|
18
|
-
import "../date/DatePicker.js";
|
|
19
20
|
import "react-transition-group";
|
|
20
21
|
import "react-dom";
|
|
21
|
-
import "
|
|
22
|
-
import "
|
|
23
|
-
import l from "
|
|
24
|
-
/* empty css
|
|
25
|
-
/* empty css */
|
|
26
|
-
/* empty css */
|
|
22
|
+
import "../../ui/popup/Popup.js";
|
|
23
|
+
import "../../ui/menu/Menu.js";
|
|
24
|
+
import l from "../../ui/block/Block.js";
|
|
25
|
+
/* empty css */
|
|
27
26
|
/* empty css */
|
|
28
|
-
|
|
27
|
+
/* empty css */
|
|
28
|
+
/* empty css */
|
|
29
|
+
const ue = ({
|
|
29
30
|
info: u,
|
|
30
31
|
error: d,
|
|
31
32
|
success: k,
|
|
@@ -146,6 +147,6 @@ const le = ({
|
|
|
146
147
|
] });
|
|
147
148
|
};
|
|
148
149
|
export {
|
|
149
|
-
|
|
150
|
-
|
|
150
|
+
ue as Form,
|
|
151
|
+
ue as default
|
|
151
152
|
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as m } from "react/jsx-runtime";
|
|
2
|
-
import '
|
|
2
|
+
import '../../../assets/FormCol.css';/* empty css */
|
|
3
3
|
const t = ({ children: o }) => /* @__PURE__ */ m("div", { className: "FormCol", children: o });
|
|
4
4
|
export {
|
|
5
5
|
t as default
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as m } from "react/jsx-runtime";
|
|
2
|
-
import '
|
|
2
|
+
import '../../../assets/FormRow.css';/* empty css */
|
|
3
3
|
const t = ({ children: o }) => /* @__PURE__ */ m("div", { className: "FormRow", children: o });
|
|
4
4
|
export {
|
|
5
5
|
t as default
|
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
import { jsx as a, jsxs as
|
|
1
|
+
import { jsx as a, jsxs as b } from "react/jsx-runtime";
|
|
2
2
|
import C from "../label/Label.js";
|
|
3
|
-
import '
|
|
3
|
+
import '../../../assets/Input.css';const F = ({
|
|
4
4
|
id: s,
|
|
5
5
|
type: e = "text",
|
|
6
6
|
value: t,
|
|
7
7
|
onChange: x,
|
|
8
|
-
label:
|
|
8
|
+
label: h,
|
|
9
9
|
placeholder: n,
|
|
10
10
|
rows: l = 5,
|
|
11
|
-
top:
|
|
12
|
-
bottom:
|
|
11
|
+
top: m,
|
|
12
|
+
bottom: p,
|
|
13
13
|
autoFocus: u = !1,
|
|
14
14
|
required: f = !1,
|
|
15
15
|
disabled: o = !1,
|
|
@@ -17,19 +17,19 @@ import '../../assets/Input.css';const F = ({
|
|
|
17
17
|
}) => {
|
|
18
18
|
const i = () => !!(f && !t.trim().length), c = () => {
|
|
19
19
|
if (i()) return {
|
|
20
|
-
caretColor: "var(--alxgrn-input-
|
|
20
|
+
caretColor: "var(--alxgrn-input-caret-error)",
|
|
21
21
|
borderColor: "var(--alxgrn-input-border-error)",
|
|
22
22
|
backgroundColor: "var(--alxgrn-input-bg-error)"
|
|
23
23
|
};
|
|
24
24
|
}, d = (r) => {
|
|
25
25
|
g && (r = r.substring(0, g)), x(r);
|
|
26
26
|
};
|
|
27
|
-
return /* @__PURE__ */ a("div", { className: "FormItem", children: /* @__PURE__ */
|
|
27
|
+
return /* @__PURE__ */ a("div", { className: "FormItem", children: /* @__PURE__ */ b(
|
|
28
28
|
C,
|
|
29
29
|
{
|
|
30
|
-
top:
|
|
31
|
-
bottom:
|
|
32
|
-
label:
|
|
30
|
+
top: m,
|
|
31
|
+
bottom: p,
|
|
32
|
+
label: h,
|
|
33
33
|
required: f,
|
|
34
34
|
disabled: o,
|
|
35
35
|
error: i(),
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { jsxs as s, jsx as a } from "react/jsx-runtime";
|
|
2
|
+
import f from "../required/RequiredMark.js";
|
|
3
|
+
import '../../../assets/RadioLabel.css';const v = ({
|
|
4
|
+
label: l,
|
|
5
|
+
bottom: r,
|
|
6
|
+
required: c = !1,
|
|
7
|
+
error: i = !1,
|
|
8
|
+
disabled: d = !1,
|
|
9
|
+
checked: o = !1,
|
|
10
|
+
children: n
|
|
11
|
+
}) => /* @__PURE__ */ s("label", { className: (() => {
|
|
12
|
+
let e = "Radio";
|
|
13
|
+
return i && (e += " Error"), d && (e += " Disabled"), o && (e += " Checked"), e;
|
|
14
|
+
})(), children: [
|
|
15
|
+
n,
|
|
16
|
+
/* @__PURE__ */ a("s", {}),
|
|
17
|
+
/* @__PURE__ */ s("div", { children: [
|
|
18
|
+
l && /* @__PURE__ */ s("div", { className: "Label", children: [
|
|
19
|
+
/* @__PURE__ */ a(f, { required: c }),
|
|
20
|
+
/* @__PURE__ */ a("span", { style: i ? { color: "var(--alxgrn-color-error)" } : void 0, children: l })
|
|
21
|
+
] }),
|
|
22
|
+
r && /* @__PURE__ */ a("div", { className: "Bottom", children: r })
|
|
23
|
+
] })
|
|
24
|
+
] });
|
|
25
|
+
export {
|
|
26
|
+
v as default
|
|
27
|
+
};
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { jsx as r } from "react/jsx-runtime";
|
|
2
|
+
import s from "../../icons/Asterisk.js";
|
|
3
|
+
import '../../../assets/RequiredMark.css';const i = ({ required: e = !1 }) => e ? /* @__PURE__ */ r("span", { className: "RequiredMark", children: /* @__PURE__ */ r(s, {}) }) : null;
|
|
4
|
+
export {
|
|
5
|
+
i as default
|
|
6
|
+
};
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { jsxs as H, jsx as i } from "react/jsx-runtime";
|
|
2
2
|
import { useRef as O, useState as n, useEffect as k } from "react";
|
|
3
3
|
import L from "../label/Label.js";
|
|
4
|
-
import { Menu as y } from "
|
|
5
|
-
import '
|
|
4
|
+
import { Menu as y } from "../../ui/menu/Menu.js";
|
|
5
|
+
import '../../../assets/Time.css';const G = ({
|
|
6
6
|
id: u,
|
|
7
7
|
value: m,
|
|
8
8
|
step: p = 1,
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { jsxs as e, jsx as t } from "react/jsx-runtime";
|
|
2
|
+
const r = () => /* @__PURE__ */ e(
|
|
3
|
+
"svg",
|
|
4
|
+
{
|
|
5
|
+
stroke: "currentColor",
|
|
6
|
+
fill: "none",
|
|
7
|
+
strokeWidth: "2",
|
|
8
|
+
viewBox: "0 0 24 24",
|
|
9
|
+
strokeLinecap: "round",
|
|
10
|
+
strokeLinejoin: "round",
|
|
11
|
+
height: "1em",
|
|
12
|
+
width: "1em",
|
|
13
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
14
|
+
children: [
|
|
15
|
+
/* @__PURE__ */ t("path", { d: "M12 6v12" }),
|
|
16
|
+
/* @__PURE__ */ t("path", { d: "M17.196 9 6.804 15" }),
|
|
17
|
+
/* @__PURE__ */ t("path", { d: "m6.804 9 10.392 6" })
|
|
18
|
+
]
|
|
19
|
+
}
|
|
20
|
+
);
|
|
21
|
+
export {
|
|
22
|
+
r as default
|
|
23
|
+
};
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { jsx as e } from "react/jsx-runtime";
|
|
2
|
+
const t = () => /* @__PURE__ */ e(
|
|
3
|
+
"svg",
|
|
4
|
+
{
|
|
5
|
+
stroke: "currentColor",
|
|
6
|
+
fill: "none",
|
|
7
|
+
strokeWidth: "2",
|
|
8
|
+
viewBox: "0 0 24 24",
|
|
9
|
+
strokeLinecap: "round",
|
|
10
|
+
strokeLinejoin: "round",
|
|
11
|
+
height: "1em",
|
|
12
|
+
width: "1em",
|
|
13
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
14
|
+
children: /* @__PURE__ */ e("path", { d: "m15 18-6-6 6-6" })
|
|
15
|
+
}
|
|
16
|
+
);
|
|
17
|
+
export {
|
|
18
|
+
t as default
|
|
19
|
+
};
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { jsx as o } from "react/jsx-runtime";
|
|
2
|
+
const t = () => /* @__PURE__ */ o(
|
|
3
|
+
"svg",
|
|
4
|
+
{
|
|
5
|
+
stroke: "currentColor",
|
|
6
|
+
fill: "none",
|
|
7
|
+
strokeWidth: "2",
|
|
8
|
+
viewBox: "0 0 24 24",
|
|
9
|
+
strokeLinecap: "round",
|
|
10
|
+
strokeLinejoin: "round",
|
|
11
|
+
height: "1em",
|
|
12
|
+
width: "1em",
|
|
13
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
14
|
+
children: /* @__PURE__ */ o("path", { d: "m9 18 6-6-6-6" })
|
|
15
|
+
}
|
|
16
|
+
);
|
|
17
|
+
export {
|
|
18
|
+
t as default
|
|
19
|
+
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
2
|
import { MessageIconType } from '../message/Message';
|
|
3
|
-
import { ButtonType } from '../../button/Button';
|
|
3
|
+
import { ButtonType } from '../../form/button/Button';
|
|
4
4
|
export interface AlertProps {
|
|
5
5
|
icon?: string | null;
|
|
6
6
|
type?: MessageIconType;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsxs as u, jsx as t } from "react/jsx-runtime";
|
|
2
2
|
import a from "../message/Message.js";
|
|
3
3
|
import n from "../modal/Modal.js";
|
|
4
|
-
import { Form as b } from "../../form/Form.js";
|
|
4
|
+
import { Form as b } from "../../form/form/Form.js";
|
|
5
5
|
const c = "Ok", M = ({ icon: m, type: o, title: s, message: i, close: e, closeType: p, isOpen: f, onClose: r }) => /* @__PURE__ */ u(n, { isOpen: f, onClose: r, children: [
|
|
6
6
|
/* @__PURE__ */ t(
|
|
7
7
|
a,
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
2
|
import { MessageIconType } from '../message/Message';
|
|
3
|
-
import { ButtonType } from '../../button/Button';
|
|
3
|
+
import { ButtonType } from '../../form/button/Button';
|
|
4
4
|
export interface ModalConfirmProps {
|
|
5
5
|
icon?: string | null;
|
|
6
6
|
type?: MessageIconType;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsxs as a, jsx as r } from "react/jsx-runtime";
|
|
2
2
|
import l from "../message/Message.js";
|
|
3
3
|
import u from "../modal/Modal.js";
|
|
4
|
-
import { Form as b } from "../../form/Form.js";
|
|
4
|
+
import { Form as b } from "../../form/form/Form.js";
|
|
5
5
|
const d = "Cancel", x = "Confirm", g = ({
|
|
6
6
|
icon: m,
|
|
7
7
|
type: t,
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { jsxs as d, jsx as r } from "react/jsx-runtime";
|
|
2
2
|
import { useState as p, useEffect as h } from "react";
|
|
3
3
|
import x from "../modal/Modal.js";
|
|
4
|
-
import { Form as b } from "../../form/Form.js";
|
|
5
|
-
import j from "../../input/Input.js";
|
|
4
|
+
import { Form as b } from "../../form/form/Form.js";
|
|
5
|
+
import j from "../../form/input/Input.js";
|
|
6
6
|
const g = ({
|
|
7
7
|
value: o,
|
|
8
8
|
title: e,
|
package/dist/main.d.ts
CHANGED
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
import { Form, FormData } from './components/form/Form';
|
|
2
|
-
import { default as
|
|
3
|
-
import { default as
|
|
4
|
-
import { default as
|
|
5
|
-
import { default as
|
|
6
|
-
import { default as
|
|
7
|
-
import { default as
|
|
8
|
-
import { default as
|
|
9
|
-
import { default as
|
|
10
|
-
import { default as
|
|
11
|
-
import { default as
|
|
12
|
-
import { default as
|
|
13
|
-
import { default as
|
|
14
|
-
import { default as
|
|
15
|
-
import { default as
|
|
16
|
-
import { default as
|
|
1
|
+
import { Form, FormData } from './components/form/form/Form';
|
|
2
|
+
import { default as FormRow } from './components/form/form/FormRow';
|
|
3
|
+
import { default as FormCol } from './components/form/form/FormCol';
|
|
4
|
+
import { default as Date } from './components/form/date/Date';
|
|
5
|
+
import { default as DatePicker } from './components/form/date/DatePicker';
|
|
6
|
+
import { default as Time } from './components/form/time/Time';
|
|
7
|
+
import { default as Files } from './components/form/files/Files';
|
|
8
|
+
import { default as Input } from './components/form/input/Input';
|
|
9
|
+
import { default as Label } from './components/form/label/Label';
|
|
10
|
+
import { default as RadioList } from './components/form/radio/RadioList';
|
|
11
|
+
import { default as Button } from './components/form/button/Button';
|
|
12
|
+
import { default as Select } from './components/form/select/Select';
|
|
13
|
+
import { default as Hidden } from './components/form/hidden/Hidden';
|
|
14
|
+
import { default as Checkbox } from './components/form/checkbox/Checkbox';
|
|
15
|
+
import { default as CheckboxList } from './components/form/checkbox/CheckboxList';
|
|
16
|
+
import { default as Fieldset } from './components/form/fieldset/Fieldset';
|
|
17
17
|
import { Menu, MenuItem } from './components/ui/menu/Menu';
|
|
18
18
|
import { default as Block } from './components/ui/block/Block';
|
|
19
19
|
import { default as Panel } from './components/ui/panel/Panel';
|
package/dist/main.js
CHANGED
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
import { Form as r } from "./components/form/Form.js";
|
|
2
|
-
import { default as a } from "./components/
|
|
3
|
-
import { default as m } from "./components/
|
|
4
|
-
import {
|
|
5
|
-
import { default as d } from "./components/
|
|
6
|
-
import { default as u } from "./components/
|
|
7
|
-
import {
|
|
8
|
-
import { default as F } from "./components/
|
|
9
|
-
import {
|
|
10
|
-
import {
|
|
11
|
-
import { default as M } from "./components/
|
|
12
|
-
import {
|
|
13
|
-
import { default as R } from "./components/
|
|
14
|
-
import { default as w } from "./components/form/
|
|
15
|
-
import {
|
|
16
|
-
import { default as I } from "./components/
|
|
1
|
+
import { Form as r } from "./components/form/form/Form.js";
|
|
2
|
+
import { default as a } from "./components/form/form/FormRow.js";
|
|
3
|
+
import { default as m } from "./components/form/form/FormCol.js";
|
|
4
|
+
import { default as p } from "./components/form/date/Date.js";
|
|
5
|
+
import { default as d } from "./components/form/date/DatePicker.js";
|
|
6
|
+
import { default as u } from "./components/form/time/Time.js";
|
|
7
|
+
import { Files as n } from "./components/form/files/Files.js";
|
|
8
|
+
import { default as F } from "./components/form/input/Input.js";
|
|
9
|
+
import { default as b } from "./components/form/label/Label.js";
|
|
10
|
+
import { RadioList as C } from "./components/form/radio/RadioList.js";
|
|
11
|
+
import { default as M } from "./components/form/button/Button.js";
|
|
12
|
+
import { Select as B } from "./components/form/select/Select.js";
|
|
13
|
+
import { default as R } from "./components/form/hidden/Hidden.js";
|
|
14
|
+
import { default as w } from "./components/form/checkbox/Checkbox.js";
|
|
15
|
+
import { CheckboxList as E } from "./components/form/checkbox/CheckboxList.js";
|
|
16
|
+
import { default as I } from "./components/form/fieldset/Fieldset.js";
|
|
17
17
|
import { Menu as T } from "./components/ui/menu/Menu.js";
|
|
18
18
|
import { default as q } from "./components/ui/block/Block.js";
|
|
19
19
|
import { default as y } from "./components/ui/panel/Panel.js";
|
|
@@ -28,21 +28,21 @@ import { default as oo } from "./components/ui/editable/Editable.js";
|
|
|
28
28
|
export {
|
|
29
29
|
W as Alert,
|
|
30
30
|
q as Block,
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
31
|
+
M as Button,
|
|
32
|
+
w as Checkbox,
|
|
33
|
+
E as CheckboxList,
|
|
34
34
|
Y as Confirm,
|
|
35
|
-
|
|
36
|
-
|
|
35
|
+
p as Date,
|
|
36
|
+
d as DatePicker,
|
|
37
37
|
oo as Editable,
|
|
38
|
-
|
|
39
|
-
|
|
38
|
+
I as Fieldset,
|
|
39
|
+
n as Files,
|
|
40
40
|
r as Form,
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
41
|
+
m as FormCol,
|
|
42
|
+
a as FormRow,
|
|
43
|
+
R as Hidden,
|
|
44
|
+
F as Input,
|
|
45
|
+
b as Label,
|
|
46
46
|
T as Menu,
|
|
47
47
|
U as Message,
|
|
48
48
|
G as Modal,
|
|
@@ -50,7 +50,7 @@ export {
|
|
|
50
50
|
K as Popup,
|
|
51
51
|
O as Portal,
|
|
52
52
|
_ as Prompt,
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
53
|
+
C as RadioList,
|
|
54
|
+
B as Select,
|
|
55
|
+
u as Time
|
|
56
56
|
};
|
package/package.json
CHANGED
|
@@ -1,58 +0,0 @@
|
|
|
1
|
-
import { jsxs as u, jsx as c } from "react/jsx-runtime";
|
|
2
|
-
import { useState as m, useEffect as y } from "react";
|
|
3
|
-
import '../../assets/DatePicker.css';const q = ({ year: o, month: i, day: l, onChange: N }) => {
|
|
4
|
-
const v = L(), f = /* @__PURE__ */ new Date(), D = f.getDate(), d = f.getMonth(), h = f.getFullYear(), [a, p] = m(h), [r, g] = m(d), [Y, x] = m([]), [C, k] = m(0), [S, M] = m(0), [w, F] = m(0);
|
|
5
|
-
y(() => {
|
|
6
|
-
let e = o, t = i, n = l;
|
|
7
|
-
typeof e == "string" && (e = parseInt(e)), typeof t == "string" && (t = parseInt(t)), typeof n == "string" && (n = parseInt(n)), e !== void 0 && isNaN(e) && (e = h), t !== void 0 && isNaN(t) && (t = d), n !== void 0 && isNaN(n) && (n = D);
|
|
8
|
-
const s = new Date(e ?? h, t ? t - 1 : d, n ?? D);
|
|
9
|
-
p(s.getFullYear()), g(s.getMonth()), k(s.getDate()), M(s.getMonth()), F(s.getFullYear());
|
|
10
|
-
}, [o, i, l, h, d, D]), y(() => {
|
|
11
|
-
const e = E(r, a);
|
|
12
|
-
let t = new Date(a, r, 1).getDay();
|
|
13
|
-
t === 0 && (t = 7);
|
|
14
|
-
const n = [];
|
|
15
|
-
for (let s = 1; s < t; s++) n.push(0);
|
|
16
|
-
for (let s = 1; s <= e; s++) n.push(s);
|
|
17
|
-
x(n);
|
|
18
|
-
}, [r, a]);
|
|
19
|
-
const P = (e) => {
|
|
20
|
-
let t = r + e;
|
|
21
|
-
t < 0 && (t = 11), t > 11 && (t = 0), g(t);
|
|
22
|
-
}, I = (e) => {
|
|
23
|
-
e && (k(e), M(r), F(a), N && N({ day: e, month: r + 1, year: a }));
|
|
24
|
-
}, j = (e) => {
|
|
25
|
-
if (!e) return "Empty";
|
|
26
|
-
if (e === C && r === S && a === w) return "Selected";
|
|
27
|
-
if (e === D && r === d && a === h) return "Current";
|
|
28
|
-
};
|
|
29
|
-
return /* @__PURE__ */ u("div", { className: "FormDatePicker", children: [
|
|
30
|
-
/* @__PURE__ */ u("div", { className: "FormDatePickerMenu", children: [
|
|
31
|
-
/* @__PURE__ */ c("span", { className: "FormDatePickerPrev", onClick: () => P(-1), children: "«" }),
|
|
32
|
-
/* @__PURE__ */ c("span", { className: "FormDatePickerText", children: v[r] }),
|
|
33
|
-
/* @__PURE__ */ c("span", { className: "FormDatePickerNext", onClick: () => P(1), children: "»" })
|
|
34
|
-
] }),
|
|
35
|
-
/* @__PURE__ */ c("div", { className: "FormDatePickerDays", children: Y.map((e, t) => /* @__PURE__ */ c(
|
|
36
|
-
"span",
|
|
37
|
-
{
|
|
38
|
-
className: j(e),
|
|
39
|
-
onClick: () => I(e),
|
|
40
|
-
children: e || ""
|
|
41
|
-
},
|
|
42
|
-
t
|
|
43
|
-
)) }),
|
|
44
|
-
/* @__PURE__ */ u("div", { className: "FormDatePickerMenu", children: [
|
|
45
|
-
/* @__PURE__ */ c("span", { className: "FormDatePickerPrev", onClick: () => p(a - 1), children: "«" }),
|
|
46
|
-
/* @__PURE__ */ c("span", { className: "FormDatePickerText", children: a }),
|
|
47
|
-
/* @__PURE__ */ c("span", { className: "FormDatePickerNext", onClick: () => p(a + 1), children: "»" })
|
|
48
|
-
] })
|
|
49
|
-
] });
|
|
50
|
-
}, E = (o, i) => new Date(i, o + 1, 0).getDate(), L = () => {
|
|
51
|
-
let o = new Date(2e3, 0), i = [];
|
|
52
|
-
for (let l = 0; l < 12; l++)
|
|
53
|
-
i.push(o.toLocaleString("default", { month: "long" })), o.setMonth(l + 1);
|
|
54
|
-
return i;
|
|
55
|
-
};
|
|
56
|
-
export {
|
|
57
|
-
q as default
|
|
58
|
-
};
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
import { jsxs as a, jsx as r } from "react/jsx-runtime";
|
|
2
|
-
import f from "../required/RequiredMark.js";
|
|
3
|
-
import '../../assets/RadioLabel.css';const v = ({
|
|
4
|
-
label: s,
|
|
5
|
-
bottom: l,
|
|
6
|
-
required: c = !1,
|
|
7
|
-
error: i = !1,
|
|
8
|
-
disabled: d = !1,
|
|
9
|
-
checked: o = !1,
|
|
10
|
-
children: n
|
|
11
|
-
}) => /* @__PURE__ */ a("label", { className: (() => {
|
|
12
|
-
let e = "Radio";
|
|
13
|
-
return i && (e += " Error"), d && (e += " Disabled"), o && (e += " Checked"), e;
|
|
14
|
-
})(), children: [
|
|
15
|
-
n,
|
|
16
|
-
/* @__PURE__ */ r("s", {}),
|
|
17
|
-
/* @__PURE__ */ a("div", { children: [
|
|
18
|
-
s && /* @__PURE__ */ a("div", { children: [
|
|
19
|
-
/* @__PURE__ */ r(f, { required: c }),
|
|
20
|
-
/* @__PURE__ */ r("span", { style: i ? { color: "var(--alxgrn-color-error)" } : void 0, children: s })
|
|
21
|
-
] }),
|
|
22
|
-
l && /* @__PURE__ */ r("div", { className: "Bottom", children: l })
|
|
23
|
-
] })
|
|
24
|
-
] });
|
|
25
|
-
export {
|
|
26
|
-
v as default
|
|
27
|
-
};
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|