playbook_ui 14.5.0.pre.alpha.PLAY15814066 → 14.5.0.pre.alpha.javascriptassets3926
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_advanced_table/index.js +0 -60
- data/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb +9 -1
- data/app/pb_kits/playbook/pb_advanced_table/table_subrow_header.html.erb +9 -1
- data/app/pb_kits/playbook/pb_card/_card.tsx +1 -5
- data/app/pb_kits/playbook/pb_dialog/_dialog.tsx +1 -5
- data/app/pb_kits/playbook/pb_flex/_flex.tsx +1 -3
- data/app/pb_kits/playbook/pb_flex/_flex_item.tsx +2 -8
- data/app/pb_kits/playbook/pb_flex/flex_item.html.erb +6 -3
- data/app/pb_kits/playbook/pb_flex/flex_item.rb +2 -7
- data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx +1 -9
- data/app/pb_kits/playbook/pb_form_pill/docs/example.yml +0 -2
- data/app/pb_kits/playbook/pb_form_pill/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +228 -195
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.jsx +1 -1
- data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +0 -3
- data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js +0 -2
- data/app/pb_kits/playbook/pb_popover/_popover.tsx +1 -1
- data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx +1 -4
- data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.tsx +1 -3
- data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +1 -3
- data/app/pb_kits/playbook/utilities/globalPropNames.mjs +0 -3
- data/app/pb_kits/playbook/utilities/globalProps.ts +2 -39
- data/dist/chunks/_typeahead-BYw0HEgO.js +22 -0
- data/dist/chunks/{_weekday_stacked-CaNCkN7U.js → _weekday_stacked-DumiyWjh.js} +1 -1
- data/dist/chunks/vendor.js +1 -1
- data/dist/mark.js +1 -0
- data/dist/playbook-doc.js +1 -1
- data/dist/playbook-rails-react-bindings.js +1 -1
- data/dist/playbook-rails.js +1 -1
- data/lib/playbook/kit_base.rb +0 -17
- data/lib/playbook/pb_doc_helper.rb +5 -5
- data/lib/playbook/version.rb +1 -1
- metadata +5 -13
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.html.erb +0 -19
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.jsx +0 -27
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.md +0 -1
- data/app/pb_kits/playbook/pb_multi_level_select/context/index.tsx +0 -5
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children.jsx +0 -105
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children.md +0 -1
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children_with_radios.jsx +0 -106
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children_with_radios.md +0 -1
- data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select_options.tsx +0 -149
- data/dist/chunks/_typeahead-D8vYsn7T.js +0 -22
@@ -1 +1 @@
|
|
1
|
-
import WebpackerReact from"webpacker-react";import{B as BarGraph,C as CircleChart,D as Dialog,a as DialogBody,b as DialogFooter,c as DialogHeader,d as DistributionBar,M as MultiLevelSelect,L as Legend,e as LineGraph,P as Passphrase,R as RichTextEditor,T as TreemapChart,f as Typeahead,G as Gauge,g as PhoneNumberInput}from"./chunks/_typeahead-
|
1
|
+
import WebpackerReact from"webpacker-react";import{B as BarGraph,C as CircleChart,D as Dialog,a as DialogBody,b as DialogFooter,c as DialogHeader,d as DistributionBar,M as MultiLevelSelect,L as Legend,e as LineGraph,P as Passphrase,R as RichTextEditor,T as TreemapChart,f as Typeahead,G as Gauge,g as PhoneNumberInput}from"./chunks/_typeahead-BYw0HEgO.js";import"react/jsx-runtime";import"react";import"./chunks/lib-CEpcaI8y.js";import"react-dom";import"react-trix";import"trix";import"react-is";var ujs$1={};Object.defineProperty(ujs$1,"__esModule",{value:true});var ujs={handleEvent:function handleEvent(eventName,callback){var _ref=arguments.length>2&&arguments[2]!==void 0?arguments[2]:{once:false},once=_ref.once;var $=typeof window.jQuery!=="undefined"&&window.jQuery;if($){if(once){$(document).one(eventName,callback)}else{$(document).on(eventName,callback)}}else{document.addEventListener(eventName,callback,{once:once})}},setup:function setup(onMount,onUnmount){var $=typeof window.jQuery!=="undefined"&&window.jQuery;var Turbolinks=window.Turbolinks;if(typeof Turbolinks!=="undefined"&&Turbolinks.supported){if(typeof Turbolinks.EVENTS!=="undefined"){this.turbolinksClassic(onMount,onUnmount)}else if(typeof Turbolinks.controller!=="undefined"){this.turbolinks5(onMount,onUnmount)}else{this.turbolinksClassicDeprecated(onMount,onUnmount)}}else if($&&typeof $.pjax==="function"){this.pjax(onMount,onUnmount)}else{this.native(onMount)}},turbolinks5:function turbolinks5(onMount,onUnmount){this.handleEvent("turbolinks:load",onMount,{once:true});this.handleEvent("turbolinks:render",onMount);this.handleEvent("turbolinks:before-render",onUnmount)},turbolinksClassic:function turbolinksClassic(onMount,onUnmount){var Turbolinks=window.Turbolinks;this.handleEvent(Turbolinks.EVENTS.CHANGE,onMount);this.handleEvent(Turbolinks.EVENTS.BEFORE_UNLOAD,onUnmount)},turbolinksClassicDeprecated:function turbolinksClassicDeprecated(onMount,onUnmount){var Turbolinks=window.Turbolinks;Turbolinks.pagesCached(0);this.handleEvent("page:change",onMount);this.handleEvent("page:receive",onUnmount)},pjax:function pjax(onMount,onUnmount){this.handleEvent("ready",onMount);this.handleEvent("pjax:end",onMount);this.handleEvent("pjax:beforeReplace",onUnmount)},native:function native(onMount){var $=typeof window.jQuery!=="undefined"&&window.jQuery;if($){$((function(){return onMount()}))}else if("addEventListener"in window){document.addEventListener("DOMContentLoaded",onMount)}else{window.attachEvent("onload",onMount)}}};var _default=ujs$1.default=ujs;WebpackerReact.registerComponents({BarGraph:BarGraph,CircleChart:CircleChart,Dialog:Dialog,DialogBody:DialogBody,DialogFooter:DialogFooter,DialogHeader:DialogHeader,DistributionBar:DistributionBar,MultiLevelSelect:MultiLevelSelect,Legend:Legend,LineGraph:LineGraph,Passphrase:Passphrase,RichTextEditor:RichTextEditor,TreemapChart:TreemapChart,Typeahead:Typeahead,Gauge:Gauge,PhoneNumberInput:PhoneNumberInput});_default.setup((()=>WebpackerReact.mountComponents()),(()=>WebpackerReact.unmountComponents()));
|
data/dist/playbook-rails.js
CHANGED
@@ -1 +1 @@
|
|
1
|
-
var __defProp=Object.defineProperty;var __defNormalProp=(obj,key,value)=>key in obj?__defProp(obj,key,{enumerable:true,configurable:true,writable:true,value:value}):obj[key]=value;var __publicField=(obj,key,value)=>__defNormalProp(obj,typeof key!=="symbol"?key+"":key,value);import"./chunks/pb_form_validation-D9zkwt2b.js";import{P as PbEnhancedElement,a as datePickerHelper,b as dialogHelper,c as PbPopover,e as PbTooltip,f as PbTypeahead,g as PbTable,h as PbTextarea}from"./chunks/lib-CEpcaI8y.js";import"./chunks/lazysizes-B7xYodB-.js";import"./playbook-rails-react-bindings.js";import"react";import"react/jsx-runtime";import"webpacker-react";import"./chunks/_typeahead-D8vYsn7T.js";import"react-dom";import"react-trix";import"trix";import"react-is";const MAIN_SELECTOR="[data-collapsible-main]";const CONTENT_SELECTOR$1="[data-collapsible-content]";const DOWN_ARROW_SELECTOR$2="#collapsible_open_icon";const UP_ARROW_SELECTOR$2="#collapsible_close_icon";class PbCollapsible extends PbEnhancedElement{static get selector(){return MAIN_SELECTOR}connect(){this.element.addEventListener("click",(()=>{this.toggleElement(this.target)}));if(this.target.classList.contains("is-visible")){this.displayUpArrow()}else{this.displayDownArrow()}document.addEventListener(`${this.target.id}`,(()=>{this.toggleElement(this.target)}))}get target(){return this.element.parentNode.querySelector(CONTENT_SELECTOR$1)}showElement(elem){const getHeight=()=>{elem.style.display="block";const height2=elem.scrollHeight+"px";elem.style.display="";return height2};const height=getHeight();elem.classList.add("is-visible");elem.style.height=height;elem.style.overflow="hidden";window.setTimeout((()=>{elem.style.height="";elem.style.overflow="visible"}),300)}hideElement(elem){elem.style.height=elem.scrollHeight+"px";window.setTimeout((()=>{elem.style.height="0";elem.style.paddingTop="0";elem.style.paddingBottom="0";elem.style.overflow="hidden"}),1);window.setTimeout((()=>{elem.classList.remove("is-visible");elem.style.overflow=""}),300)}toggleElement(elem){if(elem.classList.contains("is-visible")){this.hideElement(elem);this.displayDownArrow();return}this.showElement(elem);this.displayUpArrow()}toggleArrows(showDownArrow){const downArrow=this.element.querySelector(DOWN_ARROW_SELECTOR$2);const upArrow=this.element.querySelector(UP_ARROW_SELECTOR$2);if(downArrow){downArrow.style.display=showDownArrow?"inline-block":"none"}if(upArrow){upArrow.style.display=showDownArrow?"none":"inline-block"}}displayDownArrow(){this.toggleArrows(true)}displayUpArrow(){this.toggleArrows(false)}}class PbFixedConfirmationToast extends PbEnhancedElement{static get selector(){return".remove_toast"}connect(){this.self=this.element;this.autoCloseToast(this.self);this.self.addEventListener("click",(()=>{this.removeToast(this.self)}))}removeToast(elem){elem.parentNode.removeChild(elem)}autoCloseToast(element){const classListValues=element.classList.value;const hasAutoCloseClass=classListValues.includes("auto_close");if(hasAutoCloseClass){const classList=classListValues.split(" ");const autoCloseValue=classList[classList.length-1].split("_")[2];const autoCloseIntValue=parseInt(autoCloseValue);setTimeout((()=>{this.removeToast(element)}),autoCloseIntValue)}}}const OPTION_SELECTOR$1="[data-dropdown-option-label]";class PbDropdownKeyboard{constructor(dropdown){this.dropdown=dropdown;this.dropdownElement=dropdown.element;this.options=Array.from(this.dropdownElement.querySelectorAll(OPTION_SELECTOR$1));this.focusedOptionIndex=-1;this.init()}init(){this.dropdownElement.addEventListener("keydown",this.handleKeyDown.bind(this))}handleKeyDown(event){switch(event.key){case"ArrowDown":event.preventDefault();if(!this.dropdown.target.classList.contains("open")){this.dropdown.showElement(this.dropdown.target);this.dropdown.updateArrowDisplay(true)}this.moveFocus(1);break;case"ArrowUp":event.preventDefault();this.moveFocus(-1);break;case"Enter":event.preventDefault();if(this.focusedOptionIndex!==-1){this.selectOption()}else{if(!this.dropdown.target.classList.contains("open")){this.dropdown.showElement(this.dropdown.target);this.dropdown.updateArrowDisplay(true)}}break;case"Escape":this.dropdown.hideElement(this.dropdown.target);break;case"Tab":this.dropdown.hideElement(this.dropdown.target);this.dropdown.updateArrowDisplay(false);this.resetFocus();break}}moveFocus(direction){if(this.focusedOptionIndex!==-1){this.options[this.focusedOptionIndex].classList.remove("pb_dropdown_option_focused")}this.focusedOptionIndex=(this.focusedOptionIndex+direction+this.options.length)%this.options.length;this.options[this.focusedOptionIndex].classList.add("pb_dropdown_option_focused")}selectOption(){const option=this.options[this.focusedOptionIndex];this.dropdown.onOptionSelected(option.dataset.dropdownOptionLabel,option);this.dropdown.hideElement(this.dropdown.target)}}const DROPDOWN_SELECTOR="[data-pb-dropdown]";const TRIGGER_SELECTOR="[data-dropdown-trigger]";const CONTAINER_SELECTOR="[data-dropdown-container]";const DOWN_ARROW_SELECTOR$1="#dropdown_open_icon";const UP_ARROW_SELECTOR$1="#dropdown_close_icon";const OPTION_SELECTOR="[data-dropdown-option-label]";const CUSTOM_DISPLAY_SELECTOR="[data-dropdown-custom-trigger]";const DROPDOWN_TRIGGER_DISPLAY="#dropdown_trigger_display";const DROPDOWN_PLACEHOLDER="[data-dropdown-placeholder]";const DROPDOWN_INPUT="#dropdown-selected-option";class PbDropdown extends PbEnhancedElement{static get selector(){return DROPDOWN_SELECTOR}get target(){return this.element.parentNode.querySelector(CONTAINER_SELECTOR)}connect(){this.keyboardHandler=new PbDropdownKeyboard(this);this.setDefaultValue();this.bindEventListeners();this.updateArrowDisplay(false);this.handleFormValidation();this.handleFormReset()}bindEventListeners(){const customTrigger=this.element.querySelector(CUSTOM_DISPLAY_SELECTOR)||this.element;customTrigger.addEventListener("click",(()=>this.toggleElement(this.target)));this.target.addEventListener("click",this.handleOptionClick.bind(this));document.addEventListener("click",this.handleDocumentClick.bind(this),true)}handleOptionClick(event){const option=event.target.closest(OPTION_SELECTOR);const hiddenInput=this.element.querySelector(DROPDOWN_INPUT);if(option){const value=option.dataset.dropdownOptionLabel;hiddenInput.value=JSON.parse(value).id;this.clearFormValidation(hiddenInput);this.onOptionSelected(value,option)}}handleDocumentClick(event){if(this.isClickOutside(event)&&this.target.classList.contains("open")){this.hideElement(this.target);this.updateArrowDisplay(false)}}isClickOutside(event){const customTrigger=this.element.querySelector(CUSTOM_DISPLAY_SELECTOR);if(customTrigger){return!customTrigger.contains(event.target)}else{const triggerElement=this.element.querySelector(TRIGGER_SELECTOR);const containerElement=this.element.parentNode.querySelector(CONTAINER_SELECTOR);const isOutsideTrigger=triggerElement?!triggerElement.contains(event.target):true;const isOutsideContainer=containerElement?!containerElement.contains(event.target):true;return isOutsideTrigger&&isOutsideContainer}}onOptionSelected(value,selectedOption){const triggerElement=this.element.querySelector(DROPDOWN_TRIGGER_DISPLAY);const customDisplayElement=this.element.querySelector("#dropdown_trigger_custom_display");if(triggerElement){const selectedLabel=JSON.parse(value).label;triggerElement.textContent=selectedLabel;if(customDisplayElement){customDisplayElement.style.display="block";customDisplayElement.style.paddingRight="8px"}}const customTrigger=this.element.querySelector(CUSTOM_DISPLAY_SELECTOR);if(customTrigger){if(this.target.classList.contains("open")){this.hideElement(this.target);this.updateArrowDisplay(false)}}const options=this.element.querySelectorAll(OPTION_SELECTOR);options.forEach((option=>{option.classList.remove("pb_dropdown_option_selected")}));selectedOption.classList.add("pb_dropdown_option_selected")}showElement(elem){elem.classList.remove("close");elem.classList.add("open");elem.style.height=elem.scrollHeight+"px"}hideElement(elem){elem.style.height=elem.scrollHeight+"px";window.setTimeout((()=>{elem.classList.add("close");elem.classList.remove("open");this.resetFocus()}),0)}resetFocus(){if(this.keyboardHandler){this.keyboardHandler.focusedOptionIndex=-1;const options=this.element.querySelectorAll(OPTION_SELECTOR);options.forEach((option=>option.classList.remove("pb_dropdown_option_focused")))}}toggleElement(elem){if(elem.classList.contains("open")){this.hideElement(elem);this.updateArrowDisplay(false);return}this.showElement(elem);this.updateArrowDisplay(true)}updateArrowDisplay(isOpen){const downArrow=this.element.querySelector(DOWN_ARROW_SELECTOR$1);const upArrow=this.element.querySelector(UP_ARROW_SELECTOR$1);if(downArrow&&upArrow){downArrow.style.display=isOpen?"none":"inline-block";upArrow.style.display=isOpen?"inline-block":"none"}}handleFormValidation(){const hiddenInput=this.element.querySelector(DROPDOWN_INPUT);hiddenInput.addEventListener("invalid",(function(event){if(hiddenInput.hasAttribute("required")&&hiddenInput.value===""){event.preventDefault();hiddenInput.closest(".dropdown_wrapper").classList.add("error")}}),true)}clearFormValidation(input){if(input.checkValidity()){const dropdownWrapperElement=input.closest(".dropdown_wrapper");dropdownWrapperElement.classList.remove("error");const errorLabelElement=dropdownWrapperElement.querySelector(".pb_body_kit_negative");if(errorLabelElement){errorLabelElement.remove()}}}setDefaultValue(){const hiddenInput=this.element.querySelector(DROPDOWN_INPUT);const options=this.element.querySelectorAll(OPTION_SELECTOR);const defaultValue=hiddenInput.dataset.defaultValue||"";hiddenInput.value=defaultValue;if(defaultValue){const selectedOption=Array.from(options).find((option=>JSON.parse(option.dataset.dropdownOptionLabel).id===defaultValue));selectedOption.classList.add("pb_dropdown_option_selected");this.setTriggerElementText(JSON.parse(selectedOption.dataset.dropdownOptionLabel).label)}}handleFormReset(){const form=this.element.closest("form");if(form){form.addEventListener("reset",(()=>{this.resetDropdownValue()}))}}resetDropdownValue(){const hiddenInput=this.element.querySelector(DROPDOWN_INPUT);const options=this.element.querySelectorAll(OPTION_SELECTOR);options.forEach((option=>{option.classList.remove("pb_dropdown_option_selected")}));hiddenInput.value="";const defaultPlaceholder=this.element.querySelector(DROPDOWN_PLACEHOLDER);this.setTriggerElementText(defaultPlaceholder.dataset.dropdownPlaceholder)}setTriggerElementText(text){const triggerElement=this.element.querySelector(DROPDOWN_TRIGGER_DISPLAY);if(triggerElement){triggerElement.textContent=text}}}const ADVANCED_TABLE_SELECTOR="[data-advanced-table]";const CONTENT_SELECTOR='[data-advanced-table-content="id"]';const DOWN_ARROW_SELECTOR="#advanced-table_open_icon";const UP_ARROW_SELECTOR="#advanced-table_close_icon";const _PbAdvancedTable=class _PbAdvancedTable extends PbEnhancedElement{static get selector(){return ADVANCED_TABLE_SELECTOR}get target(){return document.querySelector(CONTENT_SELECTOR.replace("id",this.element.id))}connect(){this.element.addEventListener("click",(()=>{if(!_PbAdvancedTable.isCollapsing){const isExpanded=this.element.querySelector(UP_ARROW_SELECTOR).style.display==="inline-block";if(!isExpanded){_PbAdvancedTable.expandedRows.add(this.element.id)}else{_PbAdvancedTable.expandedRows.delete(this.element.id)}}this.toggleElement(this.target)}))}showElement(elem){const getHeight=()=>{elem.style.display="block";const height2=elem.scrollHeight+"px";elem.style.display="";return height2};const height=getHeight();elem.classList.add("is-visible");elem.style.height=height;elem.style.overflow="hidden";window.setTimeout((()=>{elem.style.height="";elem.style.overflow="visible"}),250)}hideElement(elem){elem.style.height=elem.scrollHeight+"px";window.setTimeout((()=>{elem.style.height="0";elem.style.paddingTop="0";elem.style.paddingBottom="0";elem.style.overflow="hidden"}),1);window.setTimeout((()=>{elem.classList.remove("is-visible");elem.style.overflow=""}),200)}toggleElement(elem){if(elem.classList.contains("is-visible")){this.hideElement(elem);this.displayDownArrow();return}this.showElement(elem);this.displayUpArrow()}displayDownArrow(){this.element.querySelector(DOWN_ARROW_SELECTOR).style.display="inline-block";this.element.querySelector(UP_ARROW_SELECTOR).style.display="none"}displayUpArrow(){this.element.querySelector(UP_ARROW_SELECTOR).style.display="inline-block";this.element.querySelector(DOWN_ARROW_SELECTOR).style.display="none"}static handleToggleAllHeaders(element){const table=element.closest(".pb_table");const firstLevelButtons=table.querySelectorAll(".pb_advanced_table_body > .pb_table_tr [data-advanced-table]");const expandedRows=Array.from(firstLevelButtons).filter((button=>button.querySelector(UP_ARROW_SELECTOR).style.display==="inline-block"));if(expandedRows.length===firstLevelButtons.length){expandedRows.forEach((button=>{button.click()}));this.expandedRows.clear()}else{firstLevelButtons.forEach((button=>{if(!this.expandedRows.has(button.id)){button.click()}}))}}static handleToggleAllSubRows(element,rowDepth){const parentElement=element.closest(".toggle-content");const subrowButtons=parentElement.querySelectorAll(".depth-sub-row-"+rowDepth+" [data-advanced-table]");const expandedSubRows=Array.from(subrowButtons).filter((button=>button.querySelector(UP_ARROW_SELECTOR).style.display==="inline-block"));if(expandedSubRows.length===subrowButtons.length){expandedSubRows.forEach((button=>{button.click()}))}else{subrowButtons.forEach((button=>{if(!this.expandedRows.has(button.id)){button.click()}}))}}};__publicField(_PbAdvancedTable,"expandedRows",new Set);__publicField(_PbAdvancedTable,"isCollapsing",false);let PbAdvancedTable=_PbAdvancedTable;window.expandAllRows=element=>{PbAdvancedTable.handleToggleAllHeaders(element)};window.expandAllSubRows=(element,rowDepth)=>{PbAdvancedTable.handleToggleAllSubRows(element,rowDepth)};const NAV_SELECTOR="[data-pb-nav-tab]";const NAV_ITEM_SELECTOR="[data-pb-tab-target]";class PbNav extends PbEnhancedElement{static get selector(){return NAV_SELECTOR}connect(){this.hideAndAddEventListeners()}hideAndAddEventListeners(){const navItems=this.element.querySelectorAll(NAV_ITEM_SELECTOR);navItems.forEach((navItem=>{if(!navItem.className.includes("active")){this.changeContentDisplay(navItem.dataset.pbTabTarget,"none")}navItem.addEventListener("click",(event=>this.handleNavItemClick(event)))}))}handleNavItemClick(event){event.preventDefault();const navItem=event.target.closest(NAV_ITEM_SELECTOR);this.changeContentDisplay(navItem.dataset.pbTabTarget,"block");const navItems=this.element.querySelectorAll(NAV_ITEM_SELECTOR);navItems.forEach((navItemSelected=>{if(navItem!==navItemSelected){this.changeContentDisplay(navItemSelected.dataset.pbTabTarget,"none")}}))}changeContentDisplay(contentId,display){const content=document.getElementById(contentId);content.style.display=display}}const STAR_RATING_WRAPPER_SELECTOR="[data-pb-star-rating-wrapper]";const STAR_RATING_SELECTOR="[data-pb-star-rating]";const STAR_RATING_INPUT_DATA_SELECTOR="[data-pb-star-rating-input]";class PbStarRating extends PbEnhancedElement{static get selector(){return STAR_RATING_WRAPPER_SELECTOR}connect(){this.addEventListeners();this.handleFormReset();this.setDefaultValue()}addEventListeners(){this.element.querySelectorAll(STAR_RATING_SELECTOR).forEach((star=>{star.addEventListener("click",(event=>{const clickedStarId=event.currentTarget.id;this.updateStarColors(clickedStarId);this.updateHiddenInputValue(clickedStarId);this.clearFormValidation()}));star.addEventListener("mouseenter",(event=>{const hoveredStarId=event.currentTarget.id;this.updateStarHoverColors(hoveredStarId)}));star.addEventListener("mouseleave",(()=>{this.removeStarHoverColors()}));star.addEventListener("keydown",(event=>{if(event.key==="Enter"||event.key===" "){event.preventDefault();this.handleStarClick(star.id)}}))}))}handleStarClick(starId){this.updateStarColors(starId);this.updateHiddenInputValue(starId)}updateStarColors(clickedStarId){const allStars=this.element.querySelectorAll(STAR_RATING_SELECTOR);allStars.forEach((star=>{const starId=star.id;const icon=star.querySelector(".interactive-star-icon");if(icon){if(starId<=clickedStarId){if(star.classList.contains("yellow_star")){icon.classList.add("yellow-star-selected")}else if(star.classList.contains("primary_star_light")){icon.classList.add("primary-star-selected")}else if(star.classList.contains("primary_star_dark")){icon.classList.add("primary-star-selected")}else if(star.classList.contains("subtle_star_light")){icon.classList.add("subtle-star-selected")}else if(star.classList.contains("subtle_star_dark")){icon.classList.add("subtle-star-selected")}else{icon.classList.add("yellow-star-selected")}}else{icon.classList.remove("yellow-star-selected","primary-star-selected","subtle-star-selected")}icon.classList.remove("star-hovered")}}))}updateHiddenInputValue(value){const hiddenInput=this.element.querySelector(STAR_RATING_INPUT_DATA_SELECTOR);if(hiddenInput){hiddenInput.value=value}}updateStarHoverColors(hoveredStarId){const allStars=this.element.querySelectorAll(STAR_RATING_SELECTOR);allStars.forEach((star=>{const starId=star.id;const icon=star.querySelector(".interactive-star-icon");if(icon){if(starId<=hoveredStarId){if(!icon.classList.contains("yellow-star-selected")&&!icon.classList.contains("primary-star-selected")&&!icon.classList.contains("subtle-star-selected")){icon.classList.add("star-hovered")}}else{icon.classList.remove("star-hovered")}}}))}removeStarHoverColors(){const allStars=this.element.querySelectorAll(STAR_RATING_SELECTOR);allStars.forEach((star=>{const icon=star.querySelector(".interactive-star-icon");if(icon){if(!icon.classList.contains("yellow-star-selected")&&!icon.classList.contains("primary-star-selected")&&!icon.classList.contains("subtle-star-selected")){icon.classList.remove("star-hovered")}}}))}isStarSelected(){return this.element.querySelectorAll(".yellow-star-selected, .primary-star-selected, .subtle-star-selected").length>0}handleFormReset(){const form=this.element.closest("form");if(form){form.addEventListener("reset",(()=>{var _a;(_a=this.element.querySelector(STAR_RATING_INPUT_DATA_SELECTOR))==null?void 0:_a.setAttribute("value","");this.resetStarRatingValues()}))}}resetStarRatingValues(){const allStars=this.element.querySelectorAll(STAR_RATING_SELECTOR);allStars.forEach((star=>{const icon=star.querySelector(".interactive-star-icon");if(icon){icon.classList.remove("yellow-star-selected","primary-star-selected","subtle-star-selected")}}))}clearFormValidation(){const hiddenInput=this.element.querySelector(STAR_RATING_INPUT_DATA_SELECTOR);if(hiddenInput.checkValidity()){const errorLabelElement=this.element.querySelector(".pb_body_kit_negative");if(errorLabelElement){errorLabelElement.remove()}}}setDefaultValue(){const hiddenInput=this.element.querySelector(STAR_RATING_INPUT_DATA_SELECTOR);const defaultValue=hiddenInput.value;if(defaultValue){this.updateStarColors(defaultValue)}}}const RADIO_SELECTOR="[data-pb-radio-children]";const RADIO_WRAPPER_SELECTOR="[data-pb-radio-children-wrapper]";class PbRadio extends PbEnhancedElement{static get selector(){return RADIO_SELECTOR}connect(){const radioWrapperElement=this.element.parentElement.querySelector(RADIO_WRAPPER_SELECTOR);radioWrapperElement.addEventListener("click",(()=>{this.element.querySelector("input[type='radio']").click()}))}}window.datePickerHelper=datePickerHelper;window.dialogHelper=dialogHelper;PbCollapsible.start();PbPopover.start();PbTooltip.start();PbFixedConfirmationToast.start();PbTypeahead.start();PbTable.start();PbTextarea.start();PbDropdown.start();PbAdvancedTable.start();PbNav.start();PbStarRating.start();PbRadio.start();
|
1
|
+
import"./chunks/pb_form_validation-D9zkwt2b.js";import{P as PbEnhancedElement,a as datePickerHelper,b as dialogHelper,c as PbPopover,e as PbTooltip,f as PbTypeahead,g as PbTable,h as PbTextarea}from"./chunks/lib-CEpcaI8y.js";import"./chunks/lazysizes-B7xYodB-.js";import"./playbook-rails-react-bindings.js";import"react";import"react/jsx-runtime";import"webpacker-react";import"./chunks/_typeahead-BYw0HEgO.js";import"react-dom";import"react-trix";import"trix";import"react-is";const MAIN_SELECTOR="[data-collapsible-main]";const CONTENT_SELECTOR$1="[data-collapsible-content]";const DOWN_ARROW_SELECTOR$2="#collapsible_open_icon";const UP_ARROW_SELECTOR$2="#collapsible_close_icon";class PbCollapsible extends PbEnhancedElement{static get selector(){return MAIN_SELECTOR}connect(){this.element.addEventListener("click",(()=>{this.toggleElement(this.target)}));if(this.target.classList.contains("is-visible")){this.displayUpArrow()}else{this.displayDownArrow()}document.addEventListener(`${this.target.id}`,(()=>{this.toggleElement(this.target)}))}get target(){return this.element.parentNode.querySelector(CONTENT_SELECTOR$1)}showElement(elem){const getHeight=()=>{elem.style.display="block";const height2=elem.scrollHeight+"px";elem.style.display="";return height2};const height=getHeight();elem.classList.add("is-visible");elem.style.height=height;elem.style.overflow="hidden";window.setTimeout((()=>{elem.style.height="";elem.style.overflow="visible"}),300)}hideElement(elem){elem.style.height=elem.scrollHeight+"px";window.setTimeout((()=>{elem.style.height="0";elem.style.paddingTop="0";elem.style.paddingBottom="0";elem.style.overflow="hidden"}),1);window.setTimeout((()=>{elem.classList.remove("is-visible");elem.style.overflow=""}),300)}toggleElement(elem){if(elem.classList.contains("is-visible")){this.hideElement(elem);this.displayDownArrow();return}this.showElement(elem);this.displayUpArrow()}toggleArrows(showDownArrow){const downArrow=this.element.querySelector(DOWN_ARROW_SELECTOR$2);const upArrow=this.element.querySelector(UP_ARROW_SELECTOR$2);if(downArrow){downArrow.style.display=showDownArrow?"inline-block":"none"}if(upArrow){upArrow.style.display=showDownArrow?"none":"inline-block"}}displayDownArrow(){this.toggleArrows(true)}displayUpArrow(){this.toggleArrows(false)}}class PbFixedConfirmationToast extends PbEnhancedElement{static get selector(){return".remove_toast"}connect(){this.self=this.element;this.autoCloseToast(this.self);this.self.addEventListener("click",(()=>{this.removeToast(this.self)}))}removeToast(elem){elem.parentNode.removeChild(elem)}autoCloseToast(element){const classListValues=element.classList.value;const hasAutoCloseClass=classListValues.includes("auto_close");if(hasAutoCloseClass){const classList=classListValues.split(" ");const autoCloseValue=classList[classList.length-1].split("_")[2];const autoCloseIntValue=parseInt(autoCloseValue);setTimeout((()=>{this.removeToast(element)}),autoCloseIntValue)}}}const OPTION_SELECTOR$1="[data-dropdown-option-label]";class PbDropdownKeyboard{constructor(dropdown){this.dropdown=dropdown;this.dropdownElement=dropdown.element;this.options=Array.from(this.dropdownElement.querySelectorAll(OPTION_SELECTOR$1));this.focusedOptionIndex=-1;this.init()}init(){this.dropdownElement.addEventListener("keydown",this.handleKeyDown.bind(this))}handleKeyDown(event){switch(event.key){case"ArrowDown":event.preventDefault();if(!this.dropdown.target.classList.contains("open")){this.dropdown.showElement(this.dropdown.target);this.dropdown.updateArrowDisplay(true)}this.moveFocus(1);break;case"ArrowUp":event.preventDefault();this.moveFocus(-1);break;case"Enter":event.preventDefault();if(this.focusedOptionIndex!==-1){this.selectOption()}else{if(!this.dropdown.target.classList.contains("open")){this.dropdown.showElement(this.dropdown.target);this.dropdown.updateArrowDisplay(true)}}break;case"Escape":this.dropdown.hideElement(this.dropdown.target);break;case"Tab":this.dropdown.hideElement(this.dropdown.target);this.dropdown.updateArrowDisplay(false);this.resetFocus();break}}moveFocus(direction){if(this.focusedOptionIndex!==-1){this.options[this.focusedOptionIndex].classList.remove("pb_dropdown_option_focused")}this.focusedOptionIndex=(this.focusedOptionIndex+direction+this.options.length)%this.options.length;this.options[this.focusedOptionIndex].classList.add("pb_dropdown_option_focused")}selectOption(){const option=this.options[this.focusedOptionIndex];this.dropdown.onOptionSelected(option.dataset.dropdownOptionLabel,option);this.dropdown.hideElement(this.dropdown.target)}}const DROPDOWN_SELECTOR="[data-pb-dropdown]";const TRIGGER_SELECTOR="[data-dropdown-trigger]";const CONTAINER_SELECTOR="[data-dropdown-container]";const DOWN_ARROW_SELECTOR$1="#dropdown_open_icon";const UP_ARROW_SELECTOR$1="#dropdown_close_icon";const OPTION_SELECTOR="[data-dropdown-option-label]";const CUSTOM_DISPLAY_SELECTOR="[data-dropdown-custom-trigger]";const DROPDOWN_TRIGGER_DISPLAY="#dropdown_trigger_display";const DROPDOWN_PLACEHOLDER="[data-dropdown-placeholder]";const DROPDOWN_INPUT="#dropdown-selected-option";class PbDropdown extends PbEnhancedElement{static get selector(){return DROPDOWN_SELECTOR}get target(){return this.element.parentNode.querySelector(CONTAINER_SELECTOR)}connect(){this.keyboardHandler=new PbDropdownKeyboard(this);this.setDefaultValue();this.bindEventListeners();this.updateArrowDisplay(false);this.handleFormValidation();this.handleFormReset()}bindEventListeners(){const customTrigger=this.element.querySelector(CUSTOM_DISPLAY_SELECTOR)||this.element;customTrigger.addEventListener("click",(()=>this.toggleElement(this.target)));this.target.addEventListener("click",this.handleOptionClick.bind(this));document.addEventListener("click",this.handleDocumentClick.bind(this),true)}handleOptionClick(event){const option=event.target.closest(OPTION_SELECTOR);const hiddenInput=this.element.querySelector(DROPDOWN_INPUT);if(option){const value=option.dataset.dropdownOptionLabel;hiddenInput.value=JSON.parse(value).id;this.clearFormValidation(hiddenInput);this.onOptionSelected(value,option)}}handleDocumentClick(event){if(this.isClickOutside(event)&&this.target.classList.contains("open")){this.hideElement(this.target);this.updateArrowDisplay(false)}}isClickOutside(event){const customTrigger=this.element.querySelector(CUSTOM_DISPLAY_SELECTOR);if(customTrigger){return!customTrigger.contains(event.target)}else{const triggerElement=this.element.querySelector(TRIGGER_SELECTOR);const containerElement=this.element.parentNode.querySelector(CONTAINER_SELECTOR);const isOutsideTrigger=triggerElement?!triggerElement.contains(event.target):true;const isOutsideContainer=containerElement?!containerElement.contains(event.target):true;return isOutsideTrigger&&isOutsideContainer}}onOptionSelected(value,selectedOption){const triggerElement=this.element.querySelector(DROPDOWN_TRIGGER_DISPLAY);const customDisplayElement=this.element.querySelector("#dropdown_trigger_custom_display");if(triggerElement){const selectedLabel=JSON.parse(value).label;triggerElement.textContent=selectedLabel;if(customDisplayElement){customDisplayElement.style.display="block";customDisplayElement.style.paddingRight="8px"}}const customTrigger=this.element.querySelector(CUSTOM_DISPLAY_SELECTOR);if(customTrigger){if(this.target.classList.contains("open")){this.hideElement(this.target);this.updateArrowDisplay(false)}}const options=this.element.querySelectorAll(OPTION_SELECTOR);options.forEach((option=>{option.classList.remove("pb_dropdown_option_selected")}));selectedOption.classList.add("pb_dropdown_option_selected")}showElement(elem){elem.classList.remove("close");elem.classList.add("open");elem.style.height=elem.scrollHeight+"px"}hideElement(elem){elem.style.height=elem.scrollHeight+"px";window.setTimeout((()=>{elem.classList.add("close");elem.classList.remove("open");this.resetFocus()}),0)}resetFocus(){if(this.keyboardHandler){this.keyboardHandler.focusedOptionIndex=-1;const options=this.element.querySelectorAll(OPTION_SELECTOR);options.forEach((option=>option.classList.remove("pb_dropdown_option_focused")))}}toggleElement(elem){if(elem.classList.contains("open")){this.hideElement(elem);this.updateArrowDisplay(false);return}this.showElement(elem);this.updateArrowDisplay(true)}updateArrowDisplay(isOpen){const downArrow=this.element.querySelector(DOWN_ARROW_SELECTOR$1);const upArrow=this.element.querySelector(UP_ARROW_SELECTOR$1);if(downArrow&&upArrow){downArrow.style.display=isOpen?"none":"inline-block";upArrow.style.display=isOpen?"inline-block":"none"}}handleFormValidation(){const hiddenInput=this.element.querySelector(DROPDOWN_INPUT);hiddenInput.addEventListener("invalid",(function(event){if(hiddenInput.hasAttribute("required")&&hiddenInput.value===""){event.preventDefault();hiddenInput.closest(".dropdown_wrapper").classList.add("error")}}),true)}clearFormValidation(input){if(input.checkValidity()){const dropdownWrapperElement=input.closest(".dropdown_wrapper");dropdownWrapperElement.classList.remove("error");const errorLabelElement=dropdownWrapperElement.querySelector(".pb_body_kit_negative");if(errorLabelElement){errorLabelElement.remove()}}}setDefaultValue(){const hiddenInput=this.element.querySelector(DROPDOWN_INPUT);const options=this.element.querySelectorAll(OPTION_SELECTOR);const defaultValue=hiddenInput.dataset.defaultValue||"";hiddenInput.value=defaultValue;if(defaultValue){const selectedOption=Array.from(options).find((option=>JSON.parse(option.dataset.dropdownOptionLabel).id===defaultValue));selectedOption.classList.add("pb_dropdown_option_selected");this.setTriggerElementText(JSON.parse(selectedOption.dataset.dropdownOptionLabel).label)}}handleFormReset(){const form=this.element.closest("form");if(form){form.addEventListener("reset",(()=>{this.resetDropdownValue()}))}}resetDropdownValue(){const hiddenInput=this.element.querySelector(DROPDOWN_INPUT);const options=this.element.querySelectorAll(OPTION_SELECTOR);options.forEach((option=>{option.classList.remove("pb_dropdown_option_selected")}));hiddenInput.value="";const defaultPlaceholder=this.element.querySelector(DROPDOWN_PLACEHOLDER);this.setTriggerElementText(defaultPlaceholder.dataset.dropdownPlaceholder)}setTriggerElementText(text){const triggerElement=this.element.querySelector(DROPDOWN_TRIGGER_DISPLAY);if(triggerElement){triggerElement.textContent=text}}}const ADVANCED_TABLE_SELECTOR="[data-advanced-table]";const CONTENT_SELECTOR='[data-advanced-table-content="id"]';const DOWN_ARROW_SELECTOR="#advanced-table_open_icon";const UP_ARROW_SELECTOR="#advanced-table_close_icon";class PbAdvancedTable extends PbEnhancedElement{static get selector(){return ADVANCED_TABLE_SELECTOR}get target(){return document.querySelector(CONTENT_SELECTOR.replace("id",this.element.id))}connect(){this.element.addEventListener("click",(()=>{this.toggleElement(this.target)}))}showElement(elem){const getHeight=()=>{elem.style.display="block";const height2=elem.scrollHeight+"px";elem.style.display="";return height2};const height=getHeight();elem.classList.add("is-visible");elem.style.height=height;elem.style.overflow="hidden";window.setTimeout((()=>{elem.style.height="";elem.style.overflow="visible"}),250)}hideElement(elem){elem.style.height=elem.scrollHeight+"px";window.setTimeout((()=>{elem.style.height="0";elem.style.paddingTop="0";elem.style.paddingBottom="0";elem.style.overflow="hidden"}),1);window.setTimeout((()=>{elem.classList.remove("is-visible");elem.style.overflow=""}),200)}toggleElement(elem){if(elem.classList.contains("is-visible")){this.hideElement(elem);this.displayDownArrow();return}this.showElement(elem);this.displayUpArrow()}displayDownArrow(){this.element.querySelector(DOWN_ARROW_SELECTOR).style.display="inline-block";this.element.querySelector(UP_ARROW_SELECTOR).style.display="none"}displayUpArrow(){this.element.querySelector(UP_ARROW_SELECTOR).style.display="inline-block";this.element.querySelector(DOWN_ARROW_SELECTOR).style.display="none"}}const NAV_SELECTOR="[data-pb-nav-tab]";const NAV_ITEM_SELECTOR="[data-pb-tab-target]";class PbNav extends PbEnhancedElement{static get selector(){return NAV_SELECTOR}connect(){this.hideAndAddEventListeners()}hideAndAddEventListeners(){const navItems=this.element.querySelectorAll(NAV_ITEM_SELECTOR);navItems.forEach((navItem=>{if(!navItem.className.includes("active")){this.changeContentDisplay(navItem.dataset.pbTabTarget,"none")}navItem.addEventListener("click",(event=>this.handleNavItemClick(event)))}))}handleNavItemClick(event){event.preventDefault();const navItem=event.target.closest(NAV_ITEM_SELECTOR);this.changeContentDisplay(navItem.dataset.pbTabTarget,"block");const navItems=this.element.querySelectorAll(NAV_ITEM_SELECTOR);navItems.forEach((navItemSelected=>{if(navItem!==navItemSelected){this.changeContentDisplay(navItemSelected.dataset.pbTabTarget,"none")}}))}changeContentDisplay(contentId,display){const content=document.getElementById(contentId);content.style.display=display}}const STAR_RATING_WRAPPER_SELECTOR="[data-pb-star-rating-wrapper]";const STAR_RATING_SELECTOR="[data-pb-star-rating]";const STAR_RATING_INPUT_DATA_SELECTOR="[data-pb-star-rating-input]";class PbStarRating extends PbEnhancedElement{static get selector(){return STAR_RATING_WRAPPER_SELECTOR}connect(){this.addEventListeners();this.handleFormReset();this.setDefaultValue()}addEventListeners(){this.element.querySelectorAll(STAR_RATING_SELECTOR).forEach((star=>{star.addEventListener("click",(event=>{const clickedStarId=event.currentTarget.id;this.updateStarColors(clickedStarId);this.updateHiddenInputValue(clickedStarId);this.clearFormValidation()}));star.addEventListener("mouseenter",(event=>{const hoveredStarId=event.currentTarget.id;this.updateStarHoverColors(hoveredStarId)}));star.addEventListener("mouseleave",(()=>{this.removeStarHoverColors()}));star.addEventListener("keydown",(event=>{if(event.key==="Enter"||event.key===" "){event.preventDefault();this.handleStarClick(star.id)}}))}))}handleStarClick(starId){this.updateStarColors(starId);this.updateHiddenInputValue(starId)}updateStarColors(clickedStarId){const allStars=this.element.querySelectorAll(STAR_RATING_SELECTOR);allStars.forEach((star=>{const starId=star.id;const icon=star.querySelector(".interactive-star-icon");if(icon){if(starId<=clickedStarId){if(star.classList.contains("yellow_star")){icon.classList.add("yellow-star-selected")}else if(star.classList.contains("primary_star_light")){icon.classList.add("primary-star-selected")}else if(star.classList.contains("primary_star_dark")){icon.classList.add("primary-star-selected")}else if(star.classList.contains("subtle_star_light")){icon.classList.add("subtle-star-selected")}else if(star.classList.contains("subtle_star_dark")){icon.classList.add("subtle-star-selected")}else{icon.classList.add("yellow-star-selected")}}else{icon.classList.remove("yellow-star-selected","primary-star-selected","subtle-star-selected")}icon.classList.remove("star-hovered")}}))}updateHiddenInputValue(value){const hiddenInput=this.element.querySelector(STAR_RATING_INPUT_DATA_SELECTOR);if(hiddenInput){hiddenInput.value=value}}updateStarHoverColors(hoveredStarId){const allStars=this.element.querySelectorAll(STAR_RATING_SELECTOR);allStars.forEach((star=>{const starId=star.id;const icon=star.querySelector(".interactive-star-icon");if(icon){if(starId<=hoveredStarId){if(!icon.classList.contains("yellow-star-selected")&&!icon.classList.contains("primary-star-selected")&&!icon.classList.contains("subtle-star-selected")){icon.classList.add("star-hovered")}}else{icon.classList.remove("star-hovered")}}}))}removeStarHoverColors(){const allStars=this.element.querySelectorAll(STAR_RATING_SELECTOR);allStars.forEach((star=>{const icon=star.querySelector(".interactive-star-icon");if(icon){if(!icon.classList.contains("yellow-star-selected")&&!icon.classList.contains("primary-star-selected")&&!icon.classList.contains("subtle-star-selected")){icon.classList.remove("star-hovered")}}}))}isStarSelected(){return this.element.querySelectorAll(".yellow-star-selected, .primary-star-selected, .subtle-star-selected").length>0}handleFormReset(){const form=this.element.closest("form");if(form){form.addEventListener("reset",(()=>{var _a;(_a=this.element.querySelector(STAR_RATING_INPUT_DATA_SELECTOR))==null?void 0:_a.setAttribute("value","");this.resetStarRatingValues()}))}}resetStarRatingValues(){const allStars=this.element.querySelectorAll(STAR_RATING_SELECTOR);allStars.forEach((star=>{const icon=star.querySelector(".interactive-star-icon");if(icon){icon.classList.remove("yellow-star-selected","primary-star-selected","subtle-star-selected")}}))}clearFormValidation(){const hiddenInput=this.element.querySelector(STAR_RATING_INPUT_DATA_SELECTOR);if(hiddenInput.checkValidity()){const errorLabelElement=this.element.querySelector(".pb_body_kit_negative");if(errorLabelElement){errorLabelElement.remove()}}}setDefaultValue(){const hiddenInput=this.element.querySelector(STAR_RATING_INPUT_DATA_SELECTOR);const defaultValue=hiddenInput.value;if(defaultValue){this.updateStarColors(defaultValue)}}}const RADIO_SELECTOR="[data-pb-radio-children]";const RADIO_WRAPPER_SELECTOR="[data-pb-radio-children-wrapper]";class PbRadio extends PbEnhancedElement{static get selector(){return RADIO_SELECTOR}connect(){const radioWrapperElement=this.element.parentElement.querySelector(RADIO_WRAPPER_SELECTOR);radioWrapperElement.addEventListener("click",(()=>{this.element.querySelector("input[type='radio']").click()}))}}window.datePickerHelper=datePickerHelper;window.dialogHelper=dialogHelper;PbCollapsible.start();PbPopover.start();PbTooltip.start();PbFixedConfirmationToast.start();PbTypeahead.start();PbTable.start();PbTextarea.start();PbDropdown.start();PbAdvancedTable.start();PbNav.start();PbStarRating.start();PbRadio.start();
|
data/lib/playbook/kit_base.rb
CHANGED
@@ -73,10 +73,6 @@ module Playbook
|
|
73
73
|
prop :aria, type: Playbook::Props::HashProp, default: {}
|
74
74
|
prop :html_options, type: Playbook::Props::HashProp, default: {}
|
75
75
|
prop :children, type: Playbook::Props::Proc
|
76
|
-
prop :style, type: Playbook::Props::HashProp, default: {}
|
77
|
-
prop :height
|
78
|
-
prop :min_height
|
79
|
-
prop :max_height
|
80
76
|
|
81
77
|
def object
|
82
78
|
self
|
@@ -86,14 +82,6 @@ module Playbook
|
|
86
82
|
default_html_options.merge(html_options.deep_merge(data_attributes))
|
87
83
|
end
|
88
84
|
|
89
|
-
def global_inline_props
|
90
|
-
{
|
91
|
-
height: height,
|
92
|
-
min_height: min_height,
|
93
|
-
max_height: max_height,
|
94
|
-
}.compact
|
95
|
-
end
|
96
|
-
|
97
85
|
# rubocop:disable Layout/CommentIndentation
|
98
86
|
# pb_content_tag information (potentially to be abstracted into its own dev doc in the future)
|
99
87
|
# The pb_content_tag generates HTML content tags for rails kits with flexible options.
|
@@ -130,7 +118,6 @@ module Playbook
|
|
130
118
|
data: data,
|
131
119
|
class: classname,
|
132
120
|
aria: aria,
|
133
|
-
style: inline_styles,
|
134
121
|
}
|
135
122
|
end
|
136
123
|
|
@@ -144,9 +131,5 @@ module Playbook
|
|
144
131
|
aria: aria,
|
145
132
|
}.transform_keys { |key| key.to_s.tr("_", "-").to_sym }
|
146
133
|
end
|
147
|
-
|
148
|
-
def inline_styles
|
149
|
-
global_inline_props.map { |key, value| "#{key.to_s.gsub('_', '-')}: #{value};" }.join(" ")
|
150
|
-
end
|
151
134
|
end
|
152
135
|
end
|
@@ -45,7 +45,7 @@ module Playbook
|
|
45
45
|
|
46
46
|
# rubocop:disable Naming/AccessorMethodName
|
47
47
|
def get_kits
|
48
|
-
menu =
|
48
|
+
menu = YAML.load_file(Playbook::Engine.root.join("dist/menu.yml"))
|
49
49
|
all_kits = []
|
50
50
|
menu["kits"].each do |kit|
|
51
51
|
kit_name = kit["name"]
|
@@ -61,7 +61,7 @@ module Playbook
|
|
61
61
|
end
|
62
62
|
|
63
63
|
def get_kits_pb_website
|
64
|
-
menu =
|
64
|
+
menu = YAML.load_file(Rails.root.join("config/menu.yml"))
|
65
65
|
menu["kits"]
|
66
66
|
end
|
67
67
|
# rubocop:enable Naming/AccessorMethodName
|
@@ -84,9 +84,9 @@ module Playbook
|
|
84
84
|
def pb_doc_kit_examples(kit, type)
|
85
85
|
example_file = pb_doc_kit_path(kit, "example.yml")
|
86
86
|
if File.exist?(example_file)
|
87
|
-
|
88
|
-
|
89
|
-
|
87
|
+
examples_list = YAML.load_file(example_file)
|
88
|
+
.inject({}) { |item, (k, v)| item[k.to_sym] = v; item }
|
89
|
+
examples_list.dig(:examples, type) || []
|
90
90
|
else
|
91
91
|
[]
|
92
92
|
end
|
data/lib/playbook/version.rb
CHANGED
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: playbook_ui
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 14.5.0.pre.alpha.
|
4
|
+
version: 14.5.0.pre.alpha.javascriptassets3926
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Power UX
|
@@ -9,7 +9,7 @@ authors:
|
|
9
9
|
autorequire:
|
10
10
|
bindir: bin
|
11
11
|
cert_chain: []
|
12
|
-
date: 2024-10-
|
12
|
+
date: 2024-10-01 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: actionpack
|
@@ -1364,9 +1364,6 @@ files:
|
|
1364
1364
|
- app/pb_kits/playbook/pb_form_pill/docs/_form_pill_size.jsx
|
1365
1365
|
- app/pb_kits/playbook/pb_form_pill/docs/_form_pill_tag.html.erb
|
1366
1366
|
- app/pb_kits/playbook/pb_form_pill/docs/_form_pill_tag.jsx
|
1367
|
-
- app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.html.erb
|
1368
|
-
- app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.jsx
|
1369
|
-
- app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.md
|
1370
1367
|
- app/pb_kits/playbook/pb_form_pill/docs/_form_pill_user.html.erb
|
1371
1368
|
- app/pb_kits/playbook/pb_form_pill/docs/_form_pill_user.jsx
|
1372
1369
|
- app/pb_kits/playbook/pb_form_pill/docs/example.yml
|
@@ -1796,7 +1793,6 @@ files:
|
|
1796
1793
|
- app/pb_kits/playbook/pb_multi_level_select/_helper_functions.tsx
|
1797
1794
|
- app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.scss
|
1798
1795
|
- app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx
|
1799
|
-
- app/pb_kits/playbook/pb_multi_level_select/context/index.tsx
|
1800
1796
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_color.html.erb
|
1801
1797
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_color.jsx
|
1802
1798
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_color_rails.md
|
@@ -1817,17 +1813,12 @@ files:
|
|
1817
1813
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single_children_only.html.erb
|
1818
1814
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single_children_only.jsx
|
1819
1815
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single_children_only.md
|
1820
|
-
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children.jsx
|
1821
|
-
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children.md
|
1822
|
-
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children_with_radios.jsx
|
1823
|
-
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children_with_radios.md
|
1824
1816
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_form.html.erb
|
1825
1817
|
- app/pb_kits/playbook/pb_multi_level_select/docs/example.yml
|
1826
1818
|
- app/pb_kits/playbook/pb_multi_level_select/docs/index.js
|
1827
1819
|
- app/pb_kits/playbook/pb_multi_level_select/multi_level_select.html.erb
|
1828
1820
|
- app/pb_kits/playbook/pb_multi_level_select/multi_level_select.rb
|
1829
1821
|
- app/pb_kits/playbook/pb_multi_level_select/multi_level_select.test.jsx
|
1830
|
-
- app/pb_kits/playbook/pb_multi_level_select/multi_level_select_options.tsx
|
1831
1822
|
- app/pb_kits/playbook/pb_multiple_users/_multiple_users.scss
|
1832
1823
|
- app/pb_kits/playbook/pb_multiple_users/_multiple_users.tsx
|
1833
1824
|
- app/pb_kits/playbook/pb_multiple_users/docs/_description.md
|
@@ -3079,12 +3070,13 @@ files:
|
|
3079
3070
|
- app/pb_kits/playbook/utilities/test/globalProps/truncate.test.js
|
3080
3071
|
- app/pb_kits/playbook/utilities/text.ts
|
3081
3072
|
- app/pb_kits/playbook/utilities/validEmojiChecker.ts
|
3082
|
-
- dist/chunks/_typeahead-
|
3083
|
-
- dist/chunks/_weekday_stacked-
|
3073
|
+
- dist/chunks/_typeahead-BYw0HEgO.js
|
3074
|
+
- dist/chunks/_weekday_stacked-DumiyWjh.js
|
3084
3075
|
- dist/chunks/lazysizes-B7xYodB-.js
|
3085
3076
|
- dist/chunks/lib-CEpcaI8y.js
|
3086
3077
|
- dist/chunks/pb_form_validation-D9zkwt2b.js
|
3087
3078
|
- dist/chunks/vendor.js
|
3079
|
+
- dist/mark.js
|
3088
3080
|
- dist/menu.yml
|
3089
3081
|
- dist/playbook-doc.js
|
3090
3082
|
- dist/playbook-rails-react-bindings.js
|
@@ -1,19 +0,0 @@
|
|
1
|
-
<%
|
2
|
-
names = [
|
3
|
-
{ label: 'Alexander Nathaniel Montgomery', value: 'Alexander Nathaniel Montgomery' },
|
4
|
-
{ label: 'Isabella Anastasia Wellington', value: 'Isabella Anastasia Wellington' },
|
5
|
-
{ label: 'Christopher Maximilian Harrington', value: 'Christopher Maximilian Harrington' },
|
6
|
-
{ label: 'Elizabeth Seraphina Kensington', value: 'Elizabeth Seraphina Kensington' },
|
7
|
-
{ label: 'Theodore Jonathan Abernathy', value: 'Theodore Jonathan Abernathy' },
|
8
|
-
]
|
9
|
-
%>
|
10
|
-
|
11
|
-
<%= pb_rails("typeahead", props: {
|
12
|
-
html_options: { style: { maxWidth: "240px" }},
|
13
|
-
id: "typeahead-form-pill",
|
14
|
-
is_multi: true,
|
15
|
-
options: names,
|
16
|
-
label: "Names",
|
17
|
-
pills: true,
|
18
|
-
truncate: 1,
|
19
|
-
}) %>
|
@@ -1,27 +0,0 @@
|
|
1
|
-
import React from 'react'
|
2
|
-
import Typeahead from '../../pb_typeahead/_typeahead'
|
3
|
-
|
4
|
-
const names = [
|
5
|
-
{ label: 'Alexander Nathaniel Montgomery', value: 'Alexander Nathaniel Montgomery' },
|
6
|
-
{ label: 'Isabella Anastasia Wellington', value: 'Isabella Anastasia Wellington' },
|
7
|
-
{ label: 'Christopher Maximilian Harrington', value: 'Christopher Maximilian Harrington' },
|
8
|
-
{ label: 'Elizabeth Seraphina Kensington', value: 'Elizabeth Seraphina Kensington' },
|
9
|
-
{ label: 'Theodore Jonathan Abernathy', value: 'Theodore Jonathan Abernathy' },
|
10
|
-
]
|
11
|
-
|
12
|
-
const FormPillTruncatedText = (props) => {
|
13
|
-
return (
|
14
|
-
<>
|
15
|
-
<Typeahead
|
16
|
-
htmlOptions={{ style: { maxWidth: "240px" }}}
|
17
|
-
isMulti
|
18
|
-
label="Names"
|
19
|
-
options={names}
|
20
|
-
truncate={1}
|
21
|
-
{...props}
|
22
|
-
/>
|
23
|
-
</>
|
24
|
-
)
|
25
|
-
}
|
26
|
-
|
27
|
-
export default FormPillTruncatedText
|
@@ -1 +0,0 @@
|
|
1
|
-
For pills with longer text, the `truncate` global prop can be used to truncate the label within each Form Pill. See [here](https://playbook.powerapp.cloud/visual_guidelines/truncate) for more information on the truncate global prop.
|
@@ -1,105 +0,0 @@
|
|
1
|
-
import React from "react";
|
2
|
-
import MultiLevelSelect from "../_multi_level_select";
|
3
|
-
import Badge from "../../pb_badge/_badge";
|
4
|
-
|
5
|
-
const treeData = [
|
6
|
-
{
|
7
|
-
label: "Power Home Remodeling",
|
8
|
-
value: "Power Home Remodeling",
|
9
|
-
id: "powerhome1",
|
10
|
-
expanded: true,
|
11
|
-
children: [
|
12
|
-
{
|
13
|
-
label: "People",
|
14
|
-
value: "People",
|
15
|
-
id: "people1",
|
16
|
-
expanded: true,
|
17
|
-
status: "active",
|
18
|
-
children: [
|
19
|
-
{
|
20
|
-
label: "Talent Acquisition",
|
21
|
-
value: "Talent Acquisition",
|
22
|
-
id: "talent1",
|
23
|
-
},
|
24
|
-
{
|
25
|
-
label: "Business Affairs",
|
26
|
-
value: "Business Affairs",
|
27
|
-
id: "business1",
|
28
|
-
status: "active",
|
29
|
-
variant: "primary",
|
30
|
-
|
31
|
-
children: [
|
32
|
-
{
|
33
|
-
label: "Initiatives",
|
34
|
-
value: "Initiatives",
|
35
|
-
id: "initiative1",
|
36
|
-
},
|
37
|
-
{
|
38
|
-
label: "Learning & Development",
|
39
|
-
value: "Learning & Development",
|
40
|
-
id: "development1",
|
41
|
-
status: "Inactive",
|
42
|
-
},
|
43
|
-
],
|
44
|
-
},
|
45
|
-
{
|
46
|
-
label: "People Experience",
|
47
|
-
value: "People Experience",
|
48
|
-
id: "experience1",
|
49
|
-
},
|
50
|
-
],
|
51
|
-
},
|
52
|
-
{
|
53
|
-
label: "Contact Center",
|
54
|
-
value: "Contact Center",
|
55
|
-
id: "contact1",
|
56
|
-
status: "Inactive",
|
57
|
-
variant: "error",
|
58
|
-
children: [
|
59
|
-
{
|
60
|
-
label: "Appointment Management",
|
61
|
-
value: "Appointment Management",
|
62
|
-
id: "appointment1",
|
63
|
-
},
|
64
|
-
{
|
65
|
-
label: "Customer Service",
|
66
|
-
value: "Customer Service",
|
67
|
-
id: "customer1",
|
68
|
-
},
|
69
|
-
{
|
70
|
-
label: "Energy",
|
71
|
-
value: "Energy",
|
72
|
-
id: "energy1",
|
73
|
-
},
|
74
|
-
],
|
75
|
-
},
|
76
|
-
],
|
77
|
-
},
|
78
|
-
];
|
79
|
-
|
80
|
-
const MultiLevelSelectWithChildren = (props) => {
|
81
|
-
return (
|
82
|
-
<div>
|
83
|
-
<MultiLevelSelect
|
84
|
-
id="multiselect-with-children"
|
85
|
-
onSelect={(selectedNodes) =>
|
86
|
-
console.log("Selected Items", selectedNodes)
|
87
|
-
}
|
88
|
-
treeData={treeData}
|
89
|
-
{...props}
|
90
|
-
>
|
91
|
-
<MultiLevelSelect.Options>
|
92
|
-
{(item) => (
|
93
|
-
<Badge
|
94
|
-
marginLeft="sm"
|
95
|
-
text={item.status}
|
96
|
-
variant={item.status === "active" ? "success" : "warning"}
|
97
|
-
/>
|
98
|
-
)}
|
99
|
-
</MultiLevelSelect.Options>
|
100
|
-
</MultiLevelSelect>
|
101
|
-
</div>
|
102
|
-
);
|
103
|
-
};
|
104
|
-
|
105
|
-
export default MultiLevelSelectWithChildren;
|
@@ -1 +0,0 @@
|
|
1
|
-
The MultiLevelSelect also provides a subcomponent structure which can be used to render children to the right of the Checkboxes and their labels. As seen in the code snippet below, these children have access to the current item being iterated over which can be used for conditional rendering.
|
@@ -1,106 +0,0 @@
|
|
1
|
-
import React from "react";
|
2
|
-
import MultiLevelSelect from "../_multi_level_select";
|
3
|
-
import Badge from "../../pb_badge/_badge";
|
4
|
-
|
5
|
-
const treeData = [
|
6
|
-
{
|
7
|
-
label: "Power Home Remodeling",
|
8
|
-
value: "Power Home Remodeling",
|
9
|
-
id: "powerhome1",
|
10
|
-
expanded: true,
|
11
|
-
children: [
|
12
|
-
{
|
13
|
-
label: "People",
|
14
|
-
value: "People",
|
15
|
-
id: "people1",
|
16
|
-
expanded: true,
|
17
|
-
status: "active",
|
18
|
-
children: [
|
19
|
-
{
|
20
|
-
label: "Talent Acquisition",
|
21
|
-
value: "Talent Acquisition",
|
22
|
-
id: "talent1",
|
23
|
-
},
|
24
|
-
{
|
25
|
-
label: "Business Affairs",
|
26
|
-
value: "Business Affairs",
|
27
|
-
id: "business1",
|
28
|
-
status: "active",
|
29
|
-
variant: "primary",
|
30
|
-
|
31
|
-
children: [
|
32
|
-
{
|
33
|
-
label: "Initiatives",
|
34
|
-
value: "Initiatives",
|
35
|
-
id: "initiative1",
|
36
|
-
},
|
37
|
-
{
|
38
|
-
label: "Learning & Development",
|
39
|
-
value: "Learning & Development",
|
40
|
-
id: "development1",
|
41
|
-
status: "Inactive",
|
42
|
-
},
|
43
|
-
],
|
44
|
-
},
|
45
|
-
{
|
46
|
-
label: "People Experience",
|
47
|
-
value: "People Experience",
|
48
|
-
id: "experience1",
|
49
|
-
},
|
50
|
-
],
|
51
|
-
},
|
52
|
-
{
|
53
|
-
label: "Contact Center",
|
54
|
-
value: "Contact Center",
|
55
|
-
id: "contact1",
|
56
|
-
status: "Inactive",
|
57
|
-
variant: "error",
|
58
|
-
children: [
|
59
|
-
{
|
60
|
-
label: "Appointment Management",
|
61
|
-
value: "Appointment Management",
|
62
|
-
id: "appointment1",
|
63
|
-
},
|
64
|
-
{
|
65
|
-
label: "Customer Service",
|
66
|
-
value: "Customer Service",
|
67
|
-
id: "customer1",
|
68
|
-
},
|
69
|
-
{
|
70
|
-
label: "Energy",
|
71
|
-
value: "Energy",
|
72
|
-
id: "energy1",
|
73
|
-
},
|
74
|
-
],
|
75
|
-
},
|
76
|
-
],
|
77
|
-
},
|
78
|
-
];
|
79
|
-
|
80
|
-
const MultiLevelSelectWithChildrenWithRadios = (props) => {
|
81
|
-
return (
|
82
|
-
<div>
|
83
|
-
<MultiLevelSelect
|
84
|
-
id="multiselect-with-children"
|
85
|
-
onSelect={(selectedNodes) =>
|
86
|
-
console.log("Selected Items", selectedNodes)
|
87
|
-
}
|
88
|
-
treeData={treeData}
|
89
|
-
variant="single"
|
90
|
-
{...props}
|
91
|
-
>
|
92
|
-
<MultiLevelSelect.Options>
|
93
|
-
{(item) => (
|
94
|
-
<Badge
|
95
|
-
marginLeft="sm"
|
96
|
-
text={item.status}
|
97
|
-
variant={item.status === "active" ? "success" : "warning"}
|
98
|
-
/>
|
99
|
-
)}
|
100
|
-
</MultiLevelSelect.Options>
|
101
|
-
</MultiLevelSelect>
|
102
|
-
</div>
|
103
|
-
);
|
104
|
-
};
|
105
|
-
|
106
|
-
export default MultiLevelSelectWithChildrenWithRadios;
|
@@ -1 +0,0 @@
|
|
1
|
-
The MultiLevelSelect subcomponent structure is also available in the 'Single Select' variant. In this variant, the children will be rendered to the right of the Radios and their labels.
|