@wavemaker/m3-custom-widgets
Version:
A collection of custom widgets
8 lines (7 loc) • 13.1 kB
JavaScript
export var checkboxset = {
markup: "%3Cwm-custom-widget-container%3E%0A++++%3Cwm-composite+name%3D%22composite%22%3E%0A++++++++%3Cwm-label+class%3D%22+control-label%22+notag%3D%22true%22+name%3D%22label1%22+caption%3D%22bind%3Aprops.label_text%22%3E%3C%2Fwm-label%3E%0A++++++++%3Cwm-container+name%3D%22container1%22%3E%0A++++++++++++%3Cwm-checkboxset+height%3D%22auto%22+name%3D%22checkboxset%22+dataset%3D%22bind%3Aprops.data_set%22+datafield%3D%22All+Fields%22+disabled%3D%22bind%3Aprops.state+%3D%3D+%26quot%3Bdisabled%26quot%3B%22+required%3D%22bind%3Aprops.required%22+datavalue%3D%22bind%3Aprops.default_value%22%3E%3C%2Fwm-checkboxset%3E%0A++++++++%3C%2Fwm-container%3E%0A++++%3C%2Fwm-composite%3E%0A%3C%2Fwm-custom-widget-container%3E",
script: "%2F*%0A+*+Use+App.getDependency+for+Dependency+Injection%0A+*+eg%3A+var+DialogService+%3D+App.getDependency%28%27DialogService%27%29%3B%0A+*%2F%0A%0A%2F*+perform+any+action+on+widgets%2Fvariables+within+this+block+*%2F%0AWidget.onReady+%3D+function%28%29+%7B%0A++++%2F*%0A+++++*+variables+can+be+accessed+through+%27Widget.Variables%27+property+here%0A+++++*+e.g.+to+get+dataSet+in+a+staticVariable+named+%27loggedInUser%27+use+following+script%0A+++++*+Widget.Variables.loggedInUser.getData%28%29%0A+++++*%0A+++++*+widgets+can+be+accessed+through+%27Widget.Widgets%27+property+here%0A+++++*+e.g.+to+get+value+of+text+widget+named+%27username%27+use+following+script%0A+++++*+%27Widget.Widgets.username.datavalue%27%0A+++++*%2F%0A++++if+%28Widget.props.show_intermediate.toString%28%29.toLowerCase%28%29+%3D%3D%3D+%27true%27%29+%7B%0A++++++++Widget.Widgets.checkboxset.class+%2B%3D+%27+intermediate-checkbox%27%3B%0A++++%7D%0A%0A++++if+%28Widget.props.layout+%3D%3D%3D+%22horizontal%22%29+%7B%0A++++++++Widget.Widgets.checkboxset.class+%2B%3D+%27+horizontal%27%3B%0A++++%7D+else+%7B%0A++++++++Widget.Widgets.checkboxset.class+%2B%3D+%27+vertical%27%3B%0A++++%7D%0A++++if+%28Widget.props.label_placement+%3D%3D%3D+%22top%22%29+%7B%0A++++++++Widget.Widgets.checkboxset.class+%2B%3D+%27+top-placement%27%3B%0A++++%7D+else+if+%28Widget.props.label_placement+%3D%3D%3D+%22bottom%22%29+%7B%0A++++++++Widget.Widgets.checkboxset.class+%2B%3D+%27+bottom-placement%27%3B%0A++++%7D+else+if+%28Widget.props.label_placement+%3D%3D%3D+%22start%22%29+%7B%0A++++++++Widget.Widgets.checkboxset.class+%2B%3D+%27+start-placement%27%3B%0A++++%7D+else+%7B%0A++++++++Widget.Widgets.checkboxset.class+%2B%3D+%27%27%3B%0A++++%7D%0A++++Widget.Widgets.composite.required+%3D+Widget.props.required%3B%0A%0A%7D%3B",
styles: ".app-checkboxset.vertical+%7B%0A++++flex-direction%3A+column%3B%0A%7D%0A%0A.app-checkboxset.intermediate-checkbox+.app-checkboxset-label%3E.caption%3A%3Aafter+%7B%0A++++top%3A+calc%28100%25+-+25px%29%3B%0A++++height%3A+0px%3B%0A++++transform%3A+translate%283px%2C+4px%29+rotate%280deg%29+%21important%3B%0A%7D%0A%0A%0A%2F*+start+label+placement+styles++*%2F%0A%0A.app-checkboxset.horizontal.start-placement+.app-checkboxset-label%3E.caption%2C%0A.app-checkboxset.vertical.start-placement+.app-checkboxset-label%3E.caption+%7B%0A++++padding-left%3A+unset%3B%0A++++padding-right%3A+32px%3B%0A%7D%0A%0A.app-checkboxset.horizontal.start-placement+.checkbox%3Elabel+.caption%3Abefore%2C%0A.app-checkboxset.vertical.start-placement+.checkbox%3Elabel+.caption%3Abefore+%7B%0A++++left%3A+unset%3B%0A++++right%3A+1px%3B%0A%7D%0A%0A.app-checkboxset.horizontal.start-placement+.checkbox%3Elabel+.caption%3Aafter%2C%0A.app-checkboxset.vertical.start-placement+.checkbox%3Elabel+.caption%3Aafter+%7B%0A++++left%3A+unset%3B%0A++++right%3A+7px%3B%0A%7D%0A%0A.app-checkboxset.horizontal.start-placement+.app-checkbox.checkbox%3Elabel%3Einput%5Btype%3D%22checkbox%22%5D%2C%0A.app-checkboxset.vertical.start-placement+.app-checkbox.checkbox%3Elabel%3Einput%5Btype%3D%22checkbox%22%5D+%7B%0A++++left%3A+unset%3B%0A++++right%3A+-10px%3B%0A%7D%0A%0A%0A%2F*+top+label+placement+styles++*%2F%0A%0A.app-checkboxset.horizontal.top-placement+.app-checkboxset-label%3E.caption+%7B%0A++++padding-left%3A+unset%3B%0A++++padding-bottom%3A+32px%3B%0A++++min-width%3A+20px%3B%0A++++justify-content%3A+center%3B%0A++++display%3A+inline-flex%3B%0A++++margin-top%3A+unset%3B%0A%7D%0A%0A.app-checkboxset.horizontal.top-placement+.app-checkbox.checkbox%3Elabel%3Einput%5Btype%3D%22checkbox%22%5D%3Achecked%2B.caption%3Aafter+%7B%0A++++left%3A+50%25%3B%0A++++transform%3A+translate%28-6px%2C+4px%29+rotate%28-45deg%29+scale%281%29%3B%0A++++top%3A+32px%3B%0A%7D%0A%0A.app-checkboxset.horizontal.top-placement+.app-checkboxset-label%3E.caption%3A%3Abefore+%7B%0A++++left%3A+50%25%3B%0A++++top%3A+32px%3B%0A++++transform%3A+translateX%28-50%25%29%3B%0A%7D%0A%0A.app-checkboxset.horizontal.top-placement+.app-checkbox.checkbox%3Elabel%3Einput%5Btype%3D%22checkbox%22%5D+%7B%0A++++left%3A+50%25%3B%0A++++top%3A+21px%3B%0A++++transform%3A+translateX%28-50%25%29%3B%0A%7D%0A%0A.app-checkboxset.vertical.top-placement+.app-checkboxset-label%3E.caption+%7B%0A++++padding-left%3A+unset%3B%0A++++padding-bottom%3A+unset%3B%0A++++padding-top%3A+32px%3B%0A%7D%0A%0A.app-checkboxset.vertical.top-placement+%7B%0A++++display%3A+flex%3B%0A++++min-width%3A+40px%3B%0A++++max-width%3A+max-content%3B%0A++++align-items%3A+center%3B%0A%7D%0A%0A.app-checkboxset.vertical.top-placement+.app-checkboxset-label%3E.caption%3A%3Abefore+%7B%0A++++left%3A+50%25%3B%0A++++transform%3A+translateX%28-50%25%29%3B%0A%7D%0A%0A.app-checkboxset.vertical.top-placement+.app-checkbox.checkbox%3Elabel%3Einput%5Btype%3D%22checkbox%22%5D+%7B%0A++++left%3A+50%25%3B%0A++++transform%3A+translateX%28-50%25%29%3B%0A%7D%0A%0A.wm-app+.app-checkboxset.vertical.top-placement%3E.app-checkbox.checkbox%3Elabel%3Einput%5Btype%3D%22checkbox%22%5D%3Achecked%2B.caption%3Aafter+%7B%0A++++left%3A+50%25%3B%0A++++transform%3A+translate%28-6px%2C+4px%29+rotate%28-45deg%29+scale%281%29%3B%0A%7D%0A%0A%0A%2F*+bottom+label+placement+style++*%2F%0A%0A.app-checkboxset.horizontal.bottom-placement+.app-checkboxset-label%3E.caption+%7B%0A++++padding-left%3A+unset%3B%0A++++padding-top%3A+32px%3B%0A++++min-width%3A+20px%3B%0A++++justify-content%3A+center%3B%0A++++display%3A+inline-flex%3B%0A++++margin-top%3A+unset%3B%0A%7D%0A%0A.app-checkboxset.horizontal.bottom-placement+.app-checkbox.checkbox%3Elabel%3Einput%5Btype%3D%22checkbox%22%5D%3Achecked%2B.caption%3Aafter+%7B%0A++++left%3A+50%25%3B%0A++++transform%3A+translate%28-6px%2C+4px%29+rotate%28-45deg%29+scale%281%29%3B%0A++++top%3A+8px%3B%0A%7D%0A%0A.app-checkboxset.horizontal.bottom-placement+.app-checkboxset-label%3E.caption%3A%3Abefore+%7B%0A++++left%3A+50%25%3B%0A++++top%3A+8px%3B%0A++++transform%3A+translateX%28-50%25%29%3B%0A%7D%0A%0A.app-checkboxset.horizontal.bottom-placement+.app-checkbox.checkbox%3Elabel%3Einput%5Btype%3D%22checkbox%22%5D+%7B%0A++++left%3A+50%25%3B%0A++++top%3A+-2px%3B%0A++++transform%3A+translateX%28-50%25%29%3B%0A%7D%0A%0A.app-checkboxset.vertical.bottom-placement+.app-checkboxset-label%3E.caption+%7B%0A++++padding-left%3A+unset%3B%0A++++padding-bottom%3A+unset%3B%0A++++padding-top%3A+32px%3B%0A%7D%0A%0A.app-checkboxset.vertical.bottom-placement+%7B%0A++++display%3A+flex%3B%0A++++min-width%3A+40px%3B%0A++++max-width%3A+max-content%3B%0A++++align-items%3A+center%3B%0A%7D%0A%0A.app-checkboxset.vertical.bottom-placement+.app-checkboxset-label%3E.caption%3A%3Abefore+%7B%0A++++left%3A+50%25%3B%0A++++transform%3A+translateX%28-50%25%29%3B%0A%7D%0A%0A.app-checkboxset.vertical.bottom-placement+.app-checkbox.checkbox%3Elabel%3Einput%5Btype%3D%22checkbox%22%5D+%7B%0A++++left%3A+50%25%3B%0A++++transform%3A+translateX%28-50%25%29%3B%0A%7D%0A%0A.wm-app+.app-checkboxset.vertical.bottom-placement%3E.app-checkbox.checkbox%3Elabel%3Einput%5Btype%3D%22checkbox%22%5D%3Achecked%2B.caption%3Aafter+%7B%0A++++left%3A+50%25%3B%0A++++transform%3A+translate%28-6px%2C+4px%29+rotate%28-45deg%29+scale%281%29%3B%0A%7D%0A%0A.app-checkboxset.horizontal+.app-checkboxset-label.disabled%3Einput%5Btype%3D%22checkbox%22%5D%3Achecked%2B.caption%3A%3Abefore%2C%0A.app-checkboxset.horizontal.intermediate-checkbox+.app-checkboxset-label.disabled%3Einput%5Btype%3D%22checkbox%22%5D%2B.caption%3A%3Abefore%2C%0A.app-checkboxset.vertical+.app-checkboxset-label.disabled%3Einput%5Btype%3D%22checkbox%22%5D%3Achecked%2B.caption%3A%3Abefore%2C%0A.app-checkboxset.vertical.intermediate-checkbox+.app-checkboxset-label.disabled%3Einput%5Btype%3D%22checkbox%22%5D%2B.caption%3A%3Abefore+%7B%0A++++border-color%3A+var%28--wm-checkbox-border-color%29%3B%0A++++background-color%3A+var%28--wm-checkbox-border-color%29%3B%0A%7D",
variables: "%7B+%7D",
config: "%7B%0A%20%20%22widgetType%22%20%3A%20%22wm-custom-widget%22%2C%0A%20%20%22properties%22%20%3A%20%7B%0A%20%20%20%20%22layout%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22string%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22layout%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22%20horizontal%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22horizontal%20%7C%20vertical%22%2C%0A%20%20%20%20%20%20%22show%22%20%3A%20true%2C%0A%20%20%20%20%20%20%22disabled%22%20%3A%20false%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22show_intermediate%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22boolean%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Intermediate%20checkbox%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22false%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Controls%20whether%20the%20checkbox%20shows%20an%20indeterminate%20state.%20True%20displays%20the%20intermediate%20state%22%2C%0A%20%20%20%20%20%20%22show%22%20%3A%20true%2C%0A%20%20%20%20%20%20%22disabled%22%20%3A%20false%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22state%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22string%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22State%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22enabled%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20whether%20the%20component%20is%20active%20or%20inactive.%20%27enabled%27%20means%20the%20component%20is%20interactive%20and%20functional%2C%20while%20%27disabled%27%20means%20it%20is%20non-interactive%20and%20inactive%22%2C%0A%20%20%20%20%20%20%22show%22%20%3A%20true%2C%0A%20%20%20%20%20%20%22disabled%22%20%3A%20false%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22label_placement%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22string%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Label%20placement%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22top%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20the%20label%27s%20position%20relative%20to%20the%20component%2C%20with%20options%3A%20%27top%27%20(Label%20appears%20above%20the%20component)%2C%20%27bottom%27%20(Label%20appears%20below%20the%20component)%2C%20%27start%27(Label%20appears%20left%20of%20the%20component)%22%2C%0A%20%20%20%20%20%20%22show%22%20%3A%20true%2C%0A%20%20%20%20%20%20%22disabled%22%20%3A%20false%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22label_text%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22string%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Label%20text%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22Label%20Text%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Label%20text%20informs%20users%20about%20what%20information%20is%20requested%20for%20a%20checkboxSet%22%2C%0A%20%20%20%20%20%20%22show%22%20%3A%20true%2C%0A%20%20%20%20%20%20%22disabled%22%20%3A%20false%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22data_set%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22string%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Data%20Set%20values%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22yes%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Defines%20the%20available%20options%20for%20the%20data%20set%2C%20typically%20a%20comma-separated%20list%20of%20labels%20such%20as%20%27yes%27%2C%20%27no%27%2C%20%27maybe%27%22%2C%0A%20%20%20%20%20%20%22show%22%20%3A%20true%2C%0A%20%20%20%20%20%20%22disabled%22%20%3A%20false%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22default_value%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22string%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Default%20Value%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22yes%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Specifies%20the%20default%20value%20for%20the%20checked%20attribute.%20Default%20is%20yes%22%2C%0A%20%20%20%20%20%20%22show%22%20%3A%20true%2C%0A%20%20%20%20%20%20%22disabled%22%20%3A%20false%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22required%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22boolean%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Required%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22false%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Indicates%20whether%20the%20radioSet%20label%20is%20mandatory.%20True%20makes%20it%20required%3B%20false%20means%20it%20is%20optional%22%2C%0A%20%20%20%20%20%20%22show%22%20%3A%20true%2C%0A%20%20%20%20%20%20%22disabled%22%20%3A%20false%0A%20%20%20%20%7D%0A%20%20%7D%2C%0A%20%20%22events%22%20%3A%20%7B%20%7D%0A%7D%0A"
};