|
1 | | -import{U as P,B as W,D as B,S as E,L as M}from"./laptop-icon-Crq8u9I_.js";import{g as z,r as $,h as T,i as Y,a as d,c as b,o as s,w as a,b as t,d as I,t as j,e as l,j as c,F as f,k as q,l as H,u as S,_ as J}from"./index-m4DBuZQx.js";const R=4,K=z({__name:"Alert.story",setup(Q){const L=$("Alert text"),C=T([]),m=T([]),v=T([]),p=A=>window.alert(A),u=()=>new Date().getTime(),x=T([]);let V;const N=()=>{clearInterval(V)},_=()=>{V=setInterval(()=>{x.push({title:`This is a async alert number ${x.length+1}`,variant:"info",liveRegion:!0,key:u()})},1500)},g=$(!1),U=()=>console.log("Overflow message clicked"),F=Y(()=>{const A=m.length-R;return A>0?`View ${A} more alerts`:""});return(A,e)=>{const y=d("component-info"),i=d("pf-alert"),r=d("story-canvas"),w=d("pf-alert-action-link"),o=d("pf-button"),k=d("pf-input-group"),h=d("pf-alert-group"),O=d("doc-page");return s(),b(O,{name:"Components/Alert.story.vue",title:"Alert"},{description:a(()=>[...e[18]||(e[18]=[l("An ",-1),I("b",null,"alert",-1),l(" is a notification that provides brief information to the user without blocking their workflow.",-1)])]),apidocs:a(()=>[t(y,{src:"packages/core/src/components/Alert/Alert.vue",doc:{name:"PfAlert",exportName:"default",displayName:"Alert",description:"",tags:{},props:[{name:"ouiaSafe",description:"Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false.",required:!1,type:{name:"boolean"}},{name:"ouiaId",description:"Value to overwrite the randomly generated data-ouia-component-id.",required:!1,type:{name:"OuiaId"}},{name:"ariaLabel",description:"Adds accessible text to the alert.",required:!1,type:{name:"string"}},{name:"id",description:"Uniquely identifies the alert.",required:!1,type:{name:"string"}},{name:"expandable",description:"Flag indicating that the alert is expandable.",required:!1,type:{name:"boolean"}},{name:"onClose",description:"Show close button",required:!1,type:{name:"TSFunctionType"}},{name:"inline",description:"Flag to indicate if the alert is inline.",required:!1,type:{name:"boolean"}},{name:"liveRegion",description:"Flag to indicate if the alert is in a live region.",required:!1,type:{name:"boolean"}},{name:"plain",description:"Flag to indicate if the alert is plain.",required:!1,type:{name:"boolean"}},{name:"timeout",description:`If set to true, the timeout is 8000 milliseconds. If a number is provided, alert will |
| 1 | +import{U as P,B as W,D as B,S as E,L as M}from"./laptop-icon-BM2PMj6O.js";import{g as z,r as $,h as T,i as Y,a as d,c as b,o as s,w as a,b as t,d as I,t as j,e as l,j as c,F as f,k as q,l as H,u as S,_ as J}from"./index-4O0pXY0z.js";const R=4,K=z({__name:"Alert.story",setup(Q){const L=$("Alert text"),C=T([]),m=T([]),v=T([]),p=A=>window.alert(A),u=()=>new Date().getTime(),x=T([]);let V;const N=()=>{clearInterval(V)},_=()=>{V=setInterval(()=>{x.push({title:`This is a async alert number ${x.length+1}`,variant:"info",liveRegion:!0,key:u()})},1500)},g=$(!1),U=()=>console.log("Overflow message clicked"),F=Y(()=>{const A=m.length-R;return A>0?`View ${A} more alerts`:""});return(A,e)=>{const y=d("component-info"),i=d("pf-alert"),r=d("story-canvas"),w=d("pf-alert-action-link"),o=d("pf-button"),k=d("pf-input-group"),h=d("pf-alert-group"),O=d("doc-page");return s(),b(O,{name:"Components/Alert.story.vue",title:"Alert"},{description:a(()=>[...e[18]||(e[18]=[l("An ",-1),I("b",null,"alert",-1),l(" is a notification that provides brief information to the user without blocking their workflow.",-1)])]),apidocs:a(()=>[t(y,{src:"packages/core/src/components/Alert/Alert.vue",doc:{name:"PfAlert",exportName:"default",displayName:"Alert",description:"",tags:{},props:[{name:"ouiaSafe",description:"Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false.",required:!1,type:{name:"boolean"}},{name:"ouiaId",description:"Value to overwrite the randomly generated data-ouia-component-id.",required:!1,type:{name:"OuiaId"}},{name:"ariaLabel",description:"Adds accessible text to the alert.",required:!1,type:{name:"string"}},{name:"id",description:"Uniquely identifies the alert.",required:!1,type:{name:"string"}},{name:"expandable",description:"Flag indicating that the alert is expandable.",required:!1,type:{name:"boolean"}},{name:"onClose",description:"Show close button",required:!1,type:{name:"TSFunctionType"}},{name:"inline",description:"Flag to indicate if the alert is inline.",required:!1,type:{name:"boolean"}},{name:"liveRegion",description:"Flag to indicate if the alert is in a live region.",required:!1,type:{name:"boolean"}},{name:"plain",description:"Flag to indicate if the alert is plain.",required:!1,type:{name:"boolean"}},{name:"timeout",description:`If set to true, the timeout is 8000 milliseconds. If a number is provided, alert will |
2 | 2 | be dismissed after that amount of time in milliseconds.`,required:!1,type:{name:"union",elements:[{name:"number"},{name:"boolean"}]}},{name:"timeoutAnimation",description:"If the user hovers over the alert and `timeout` expires, this is how long to wait\nbefore finally dismissing the alert.",required:!1,type:{name:"number"},defaultValue:{func:!1,value:"3000"}},{name:"title",description:"Title of the alert.",required:!1,type:{name:"string"}},{name:"component",description:"Sets the element to use as the alert title. Default is h4.",required:!1,type:{name:"union",elements:[{name:"string"},{name:"Component"}]},defaultValue:{func:!1,value:"'h4'"}},{name:"toggleAriaLabel",description:"Adds accessible text to the alert toggle.",required:!1,type:{name:"string"}},{name:"tooltipPosition",description:"Position of the tooltip which is displayed if text is truncated.",required:!1,type:{name:"Placement"},defaultValue:{func:!1,value:"'auto'"}},{name:"truncateTitle",description:"Truncate title to number of lines.",required:!1,type:{name:"number"},defaultValue:{func:!1,value:"0"}},{name:"variant",description:"Adds alert variant styles.",required:!1,type:{name:"TSTypeOperator"},defaultValue:{func:!1,value:"'custom'"}},{name:"variantLabel",description:"Variant label text for screen readers.",required:!1,type:{name:"string"}}],events:[{name:"mouseenter",type:{names:["Event"]}},{name:"mouseleave",type:{names:["Event"]}},{name:"timeout"}],slots:[{name:"custom-icon"},{name:"default"},{name:"action-links"}],sourceFiles:["../../packages/core/src/components/Alert/Alert.vue"]}}),t(y,{src:"packages/core/src/components/Alert/AlertActionLink.vue",doc:{name:"PfAlertActionLink",exportName:"default",displayName:"AlertActionLink",description:"",tags:{},slots:[{name:"default"}],sourceFiles:["../../packages/core/src/components/Alert/AlertActionLink.vue"]}}),t(y,{src:"packages/core/src/components/Alert/AlertGroup.vue",doc:{name:"PfAlertGroup",exportName:"default",displayName:"AlertGroup",description:"",tags:{},props:[{name:"toast",description:"Toast notifications are positioned at the top right corner of the viewport",required:!1,type:{name:"boolean"}},{name:"appendTo",description:"Determine where the alert is appended to",required:!1,type:{name:"union",elements:[{name:"string"},{name:"RendererElement"},{name:"null"},{name:"undefined"}]},defaultValue:{func:!1,value:"'body'"}}],slots:[{name:"default"}],sourceFiles:["../../packages/core/src/components/Alert/AlertGroup.vue"]}}),t(y,{src:"packages/core/src/components/Alert/AlertGroupInline.vue",doc:{name:"PfAlertGroupInline",exportName:"default",displayName:"AlertGroupInline",description:"",tags:{},props:[{name:"ouiaSafe",description:"Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false.",required:!1,type:{name:"boolean"}},{name:"ouiaId",description:"Value to overwrite the randomly generated data-ouia-component-id.",required:!1,type:{name:"OuiaId"}},{name:"toast",required:!1,type:{name:"boolean"}},{name:"liveRegion",required:!1,type:{name:"boolean"}},{name:"overflowMessage",required:!1,type:{name:"string"}}],events:[{name:"overflow-click",type:{names:["PointerEvent"]}}],slots:[{name:"default"}],sourceFiles:["../../packages/core/src/components/Alert/AlertGroupInline.vue"]}}),t(y,{src:"packages/core/src/components/Alert/AlertIcon.vue",doc:{name:"PfAlertIcon",exportName:"default",displayName:"AlertIcon",description:"",tags:{},props:[{name:"ouiaSafe",description:"Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false.",required:!1,type:{name:"boolean"}},{name:"ouiaId",description:"Value to overwrite the randomly generated data-ouia-component-id.",required:!1,type:{name:"OuiaId"}},{name:"variant",required:!1,type:{name:"TSTypeOperator"},defaultValue:{func:!1,value:"'custom'"}}],slots:[{name:"default"}],sourceFiles:["../../packages/core/src/components/Alert/AlertIcon.vue"]}})]),default:a(()=>[t(r,{title:"Types",source:`<pf-alert title="Custom alert title" /> |
3 | 3 | <pf-alert variant="info" title="Info alert title" /> |
4 | 4 | <pf-alert variant="success" title="Success alert title" /> |
|
0 commit comments