@wavemaker/m3-custom-widgets
Version:
A collection of custom widgets
8 lines (7 loc) • 4.51 kB
JavaScript
export var divider = {
markup: "%3Cwm-custom-widget-container%3E%0A++++%3Cwm-container+name%3D%22divider1%22+class%3D%22horizontal-divider+full-width%22+style%3D%22+%22%3E%3C%2Fwm-container%3E%0A%0A++++%3C%21--+Height+of+vertical+divider+will+be+supplied+using+inline+styles+and+the+value+can+be+picked+up+from+node+css.+%0A++++A+minimum+height+has+been+defined+in+the+event+that+the+user+uses+a+custom+widget+divider.+--%3E%0A%3C%2Fwm-custom-widget-container%3E",
script: "Widget.onReady+%3D+function%28%29+%7B%0A++++const+orientation_array+%3D+Widget.props.orientation.toLowerCase%28%29.split%28%22%2F%22%29%3B%0A++++const+orientation+%3D+orientation_array%5B0%5D%3B+%2F%2F+Vertical+or+Horizontal%0A++++const+length+%3D+orientation_array%5B1%5D%3B%0A%0A++++Widget.Widgets.divider1.class+%3D+%28%22+%22+%2B+orientation+%2B+%22-divider%22%29%3B%0A++++Widget.Widgets.divider1.class+%2B%3D+%28%22+%22+%2B+length%29%3B%0A++++let+divider1+%3D+Widget.Widgets.divider1%3B%0A%0A++++if+%28orientation+%3D%3D%3D+%22vertical%22+%26%26+length+%3D%3D%3D+%22full-width%22%29+%7B%0A++++++++let+vertical_height+%3D+%60%24%7BWidget.props.vertical_height%7Dpx%60%3B%0A++++++++divider1.%24element.css%28%7B%0A++++++++++++%27height%27%3A+%60%24%7Bvertical_height%7D%60%2C%0A++++++++%7D%29%3B%0A++++%7D+else+if+%28orientation+%3D%3D%3D+%22vertical%22+%26%26+length+%3D%3D%3D+%22inset%22%29+%7B%0A++++++++let+vertical_height+%3D+Widget.props.vertical_height+-+16%3B%0A++++++++vertical_height+%3D+%60%24%7Bvertical_height%7Dpx%60%3B%0A++++++++divider1.%24element.css%28%7B%0A++++++++++++%27height%27%3A+%60%24%7Bvertical_height%7D%60%2C%0A++++++++%7D%29%3B%0A++++%7D+else+if+%28orientation+%3D%3D%3D+%22vertical%22+%26%26+length+%3D%3D%3D+%22middle-inset%22%29+%7B%0A++++++++let+vertical_height+%3D+Widget.props.vertical_height+-+32%3B%0A++++++++vertical_height+%3D+%60%24%7Bvertical_height%7Dpx%60%3B%0A++++++++divider1.%24element.css%28%7B%0A++++++++++++%27height%27%3A+%60%24%7Bvertical_height%7D%60%2C%0A++++++++%7D%29%3B%0A++++%7D%0A%0A%7D",
styles: ".horizontal-divider+%7B%0A++++display%3A+flex%3B%0A++++border-top%3A+1px+solid+%23CAC4D0%3B%0A++++height%3A+1px+%21important%3B%0A%7D%0A%0A.app-container%3E.horizontal-divider.full-width+%7B%0A++++width%3A+100%25%3B%0A++++margin%3A+auto%3B%0A++++padding%3A+0px%3B%0A%7D%0A%0A.horizontal-divider.inset+%7B%0A++++margin-left%3A+16px%3B%0A%7D%0A%0A.horizontal-divider.middle-inset+%7B%0A++++display%3A+flex%3B%0A++++margin-left%3A+16px%3B%0A++++margin-right%3A+16px%3B%0A%7D%0A%0A.vertical-divider+%7B%0A++++width%3A+1px%3B%0A++++border-left%3A+1px+solid+%23CAC4D0%3B%0A++++min-height%3A+1px%3B%0A%7D%0A%0A.vertical-divider.full-width+%7B%0A++++margin-top%3A+0%3B%0A++++margin-bottom%3A+0%3B%0A%7D%0A%0A.vertical-divider.inset+%7B%0A++++margin-top%3A+16px%3B%0A++++box-sizing%3A+border-box%3B%0A%7D%0A%0A.vertical-divider.middle-inset+%7B%0A++++margin-top%3A+16px%3B%0A++++margin-bottom%3A+16px%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%22orientation%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22list%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Orientation%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Determines%20the%20style%20of%20the%20M3%20divider%20being%20used.%20Default%20value%20is%20horizontal%2Ffull-width.%22%2C%0A%20%20%20%20%20%20%22options%22%20%3A%20%5B%20%22horizontal%2Ffull-width%22%2C%20%22horizontal%2Fmiddle-inset%22%2C%20%22horizontal%2Finset%22%2C%20%22vertical%2Ffull-width%22%2C%20%22vertical%2Fmiddle-inset%22%2C%20%22vertical%2Finset%22%20%5D%2C%0A%20%20%20%20%20%20%22value%22%20%3A%20%22horizontal%2Ffull-width%22%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22vertical_height%22%20%3A%20%7B%0A%20%20%20%20%20%20%22type%22%20%3A%20%22integer%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Height%20(only%20for%20vertical)%22%2C%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Determines%20the%20height%20of%20the%20vertical%20divider%20(in%20px)%22%2C%0A%20%20%20%20%20%20%22value%22%20%3A%202%0A%20%20%20%20%7D%0A%20%20%7D%2C%0A%20%20%22events%22%20%3A%20%7B%0A%20%20%20%20%22onRender%22%20%3A%20%7B%0A%20%20%20%20%20%20%22description%22%20%3A%20%22Callback%20action%20to%20test%20event%20in%20the%20properties%20panel%22%2C%0A%20%20%20%20%20%20%22eventData%22%20%3A%20%22%22%2C%0A%20%20%20%20%20%20%22displayName%22%20%3A%20%22Render%22%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D"
};