@demos-europe/demosplan-ui 0.4.21 → 0.4.22

package/storybook-static/assets/DpTimePicker-JnDQtvH1.js

@@ -1,27 +0,0 @@
-import{j as i,M as o,C as n}from"./blocks-kyJuz3C5.js";import{useMDXComponents as r}from"./index-BbC7EF1e.js";import{D as l,a as m,C as a,W as d,b as h,c as p}from"./DpTimePicker.stories-CMqNipv8.js";import"./iframe-KFxwsBtW.js";import"./_commonjsHelpers-CE1G-McA.js";import"./DpTimePicker-9Qy_qVnW.js";import"./DpInput-cN-WEvOL.js";import"./dayjs.min-C3DHb-Vr.js";import"./lengthHint-zGawKYxB.js";import"./translations-DDOZrg-p.js";import"./prefixClass-BBJiSKc2.js";import"./DpLabel-DFauD5I2.js";import"./DpContextualHelp-DnsCCoZB.js";import"./DpIcon-dOAQoUKG.js";import"./CleanHtml-CeG3Pc5D.js";import"./Tooltip-flnpMaRO.js";import"./DpResettableInput-nox0ihQv.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";import"./index-CTxdm8FW.js";function s(t){const e={h1:"h1",h2:"h2",h3:"h3",li:"li",p:"p",ul:"ul",...r(),...t.components};return i.jsxs(i.Fragment,{children:[i.jsx(o,{of:l}),`
-`,i.jsx(e.h1,{id:"timepicker",children:"TimePicker"}),`
-`,i.jsx(e.p,{children:"The TimePicker component allows users to enter a time value either by typing directly or by selecting hours and minutes from dropdown lists. It provides a user-friendly interface for time selection with keyboard navigation support."}),`
-`,i.jsx(e.h2,{id:"usage",children:"Usage"}),`
-`,i.jsx(e.h3,{id:"default",children:"Default"}),`
-`,i.jsx(e.p,{children:"Basic time picker with default settings (15-minute intervals)."}),`
-`,i.jsx(n,{of:m}),`
-`,i.jsx(e.h3,{id:"custom-minute-steps",children:"Custom Minute Steps"}),`
-`,i.jsx(e.p,{children:"Time picker with customized minute intervals."}),`
-`,i.jsx(n,{of:a}),`
-`,i.jsx(e.h3,{id:"with-label",children:"With Label"}),`
-`,i.jsx(e.p,{children:"Time picker with a descriptive label."}),`
-`,i.jsx(n,{of:d}),`
-`,i.jsx(e.h3,{id:"with-minimum-value",children:"With Minimum Value"}),`
-`,i.jsx(e.p,{children:"Time picker with a minimum allowed time value."}),`
-`,i.jsx(n,{of:h}),`
-`,i.jsx(e.h3,{id:"disabled",children:"Disabled"}),`
-`,i.jsx(e.p,{children:"Time picker in disabled state."}),`
-`,i.jsx(n,{of:p}),`
-`,i.jsx(e.h2,{id:"implementation-notes",children:"Implementation Notes"}),`
-`,i.jsxs(e.ul,{children:[`
-`,i.jsx(e.li,{children:"The component adapts to mobile devices by using the native time input"}),`
-`,i.jsx(e.li,{children:"Time format is 24-hour (00:00 to 23:59)"}),`
-`,i.jsx(e.li,{children:"Keyboard navigation is supported with arrow keys and Enter"}),`
-`,i.jsx(e.li,{children:"Click outside the component to close the dropdown"}),`
-`,i.jsx(e.li,{children:'Default value is "00:00" if no value is provided'}),`
-`]})]})}function X(t={}){const{wrapper:e}={...r(),...t.components};return e?i.jsx(e,{...t,children:i.jsx(s,{...t})}):s(t)}export{X as default};

package/storybook-static/assets/DpTimePicker.stories-CMqNipv8.js

@@ -1,92 +0,0 @@
-import{D as r}from"./DpTimePicker-9Qy_qVnW.js";const s={component:r,title:"Components/TimePicker",argTypes:{id:{control:"text",description:"ID attribute for the time picker element",table:{type:{summary:"String"},defaultValue:{summary:"undefined"}}},label:{control:"text",description:"Label text for the time picker",table:{type:{summary:"String"},defaultValue:{summary:'""'}}},value:{control:"text",description:"Current time value in HH:MM format",table:{type:{summary:"String"},defaultValue:{summary:'"00:00"'}}},minuteSteps:{control:{type:"number",min:1,max:60},description:"Interval between available minute options",table:{type:{summary:"Number"},defaultValue:{summary:"15"}}},minValue:{control:"text",description:"Minimum allowed time value in HH:MM format",table:{type:{summary:"String"},defaultValue:{summary:'""'}}},disabled:{control:"boolean",description:"Whether the time picker is disabled",table:{type:{summary:"Boolean"},defaultValue:{summary:"false"}}},dataCy:{control:"text",description:"Data-cy attribute for testing",table:{type:{summary:"String"},defaultValue:{summary:'"timePicker"'}}},input:{description:"Event emitted when the time value changes",table:{type:{summary:"event"}}}}},e={args:{id:"timePicker1",value:"09:00"},argTypes:{input:{action:"input"}},parameters:{docs:{description:{story:"Default time picker with 15-minute intervals"}}}},t={args:{id:"timePicker2",value:"10:30",minuteSteps:5},argTypes:{input:{action:"input"}},parameters:{docs:{description:{story:"Time picker with 5-minute intervals instead of the default 15 minutes"}}}},a={args:{id:"timePicker3",label:"Meeting Start Time",value:"14:00"},argTypes:{input:{action:"input"}},parameters:{docs:{description:{story:"Time picker with a descriptive label"}}}},i={args:{id:"timePicker4",label:"Select Time (after 13:30)",value:"14:00",minValue:"13:30"},argTypes:{input:{action:"input"}},parameters:{docs:{description:{story:"Time picker with a minimum allowed time value of 13:30"}}}},n={args:{id:"timePicker5",label:"Time (Disabled)",value:"16:45",disabled:!0},argTypes:{input:{action:"input"}},parameters:{docs:{description:{story:"Disabled time picker that cannot be edited"}}}};e.parameters={...e.parameters,docs:{...e.parameters?.docs,source:{originalSource:`{
-  args: {
-    id: 'timePicker1',
-    value: '09:00'
-  },
-  argTypes: {
-    input: {
-      action: 'input'
-    }
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Default time picker with 15-minute intervals'
-      }
-    }
-  }
-}`,...e.parameters?.docs?.source}}};t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:`{
-  args: {
-    id: 'timePicker2',
-    value: '10:30',
-    minuteSteps: 5
-  },
-  argTypes: {
-    input: {
-      action: 'input'
-    }
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Time picker with 5-minute intervals instead of the default 15 minutes'
-      }
-    }
-  }
-}`,...t.parameters?.docs?.source}}};a.parameters={...a.parameters,docs:{...a.parameters?.docs,source:{originalSource:`{
-  args: {
-    id: 'timePicker3',
-    label: 'Meeting Start Time',
-    value: '14:00'
-  },
-  argTypes: {
-    input: {
-      action: 'input'
-    }
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Time picker with a descriptive label'
-      }
-    }
-  }
-}`,...a.parameters?.docs?.source}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
-  args: {
-    id: 'timePicker4',
-    label: 'Select Time (after 13:30)',
-    value: '14:00',
-    minValue: '13:30'
-  },
-  argTypes: {
-    input: {
-      action: 'input'
-    }
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Time picker with a minimum allowed time value of 13:30'
-      }
-    }
-  }
-}`,...i.parameters?.docs?.source}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
-  args: {
-    id: 'timePicker5',
-    label: 'Time (Disabled)',
-    value: '16:45',
-    disabled: true
-  },
-  argTypes: {
-    input: {
-      action: 'input'
-    }
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Disabled time picker that cannot be edited'
-      }
-    }
-  }
-}`,...n.parameters?.docs?.source}}};const o=["Default","CustomMinuteSteps","WithLabel","WithMinValue","Disabled"],c=Object.freeze(Object.defineProperty({__proto__:null,CustomMinuteSteps:t,Default:e,Disabled:n,WithLabel:a,WithMinValue:i,__namedExportsOrder:o,default:s},Symbol.toStringTag,{value:"Module"}));export{t as C,c as D,a as W,e as a,i as b,n as c};

package/storybook-static/assets/DpToggle-BNgSF54s.js

@@ -1,10 +0,0 @@
-import{j as e,M as a,C as s}from"./blocks-kyJuz3C5.js";import{useMDXComponents as i}from"./index-BbC7EF1e.js";import{D as r,a as l,b as c}from"./DpToggle.stories-D3_9X7aB.js";import"./iframe-KFxwsBtW.js";import"./_commonjsHelpers-CE1G-McA.js";import"./DpToggle-BPqlzXQH.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";function o(n){const t={h1:"h1",h2:"h2",h3:"h3",p:"p",...i(),...n.components};return e.jsxs(e.Fragment,{children:[e.jsx(a,{of:r}),`
-`,e.jsx(t.h1,{id:"toggle",children:"Toggle"}),`
-`,e.jsx(t.p,{children:"The Toggle component provides a simple switch control that allows users to toggle between two states. It's commonly used for enabling or disabling features or settings in a user interface."}),`
-`,e.jsx(t.h2,{id:"usage",children:"Usage"}),`
-`,e.jsx(t.h3,{id:"default",children:"Default"}),`
-`,e.jsx(t.p,{children:"Basic toggle component in its default state (off)."}),`
-`,e.jsx(s,{of:l}),`
-`,e.jsx(t.h3,{id:"disabled",children:"Disabled"}),`
-`,e.jsx(t.p,{children:"Toggle component in disabled state, which prevents user interaction."}),`
-`,e.jsx(s,{of:c})]})}function x(n={}){const{wrapper:t}={...i(),...n.components};return t?e.jsx(t,{...n,children:e.jsx(o,{...n})}):o(n)}export{x as default};

package/storybook-static/assets/DpToggle-BPqlzXQH.js

@@ -1 +0,0 @@
-import{c as r,g as d,a as t,v as i,q as o,s as u,w as c,o as g}from"./iframe-KFxwsBtW.js";import{_ as f}from"./_plugin-vue_export-helper-DlAUqK2U.js";const n={name:"DpToggle",props:{value:{type:Boolean,required:!1,default:!1},disabled:{type:Boolean,required:!1,default:!1}},computed:{backgroundStyles(){return{backgroundColor:this.value?"#3490dc":"#dae1e7"}},indicatorStyles(){return{transform:this.value?"translateX(1rem)":"translateX(0)"}}},methods:{toggle(){this.disabled===!1&&this.$emit("input",!this.value)}}},p=["aria-checked","aria-disabled"],m={class:"toggle-disabled"};function b(v,a,l,y,h,e){return g(),r("span",{class:"toggle-wrapper",role:"checkbox","aria-checked":l.value.toString(),"aria-disabled":l.disabled?!0:null,tabindex:"0",onClick:a[0]||(a[0]=(...s)=>e.toggle&&e.toggle(...s)),onKeydown:a[1]||(a[1]=u(c((...s)=>e.toggle&&e.toggle(...s),["prevent"]),["space"]))},[d(t("div",m,null,512),[[i,l.disabled]]),t("span",{class:"toggle-background",style:o(e.backgroundStyles)},null,4),t("span",{class:"toggle-indicator",style:o(e.indicatorStyles)},null,4)],40,p)}const D=f(n,[["render",b]]);n.__docgenInfo={displayName:"DpToggle",exportName:"default",description:"",tags:{},props:[{name:"value",type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"false"}},{name:"disabled",type:{name:"boolean"},required:!1,defaultValue:{func:!1,value:"false"}}],events:[{name:"input",type:{names:["undefined"]}}],sourceFiles:["/home/florian/Dev/demosplan-ui/src/components/DpToggle/DpToggle.vue"]};export{D};

package/storybook-static/assets/DpToggle.stories-D3_9X7aB.js

@@ -1,35 +0,0 @@
-import{D as a}from"./DpToggle-BPqlzXQH.js";const n={component:a,title:"Components/Toggle",argTypes:{value:{control:"boolean",description:"Current state of the toggle (true = on, false = off)",table:{type:{summary:"Boolean"},defaultValue:{summary:"false"}}},disabled:{control:"boolean",description:"Whether the toggle is disabled",table:{type:{summary:"Boolean"},defaultValue:{summary:"false"}}},input:{description:"Event emitted when the toggle state changes",table:{type:{summary:"event"}}}}},e={args:{value:!1,disabled:!1},argTypes:{input:{action:"input"}},parameters:{docs:{description:{story:"Default toggle component in the off state"}}}},t={args:{value:!1,disabled:!0},argTypes:{input:{action:"input"}},parameters:{docs:{description:{story:"Disabled toggle component that cannot be interacted with"}}}};e.parameters={...e.parameters,docs:{...e.parameters?.docs,source:{originalSource:`{
-  args: {
-    value: false,
-    disabled: false
-  },
-  argTypes: {
-    input: {
-      action: 'input'
-    }
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Default toggle component in the off state'
-      }
-    }
-  }
-}`,...e.parameters?.docs?.source}}};t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:`{
-  args: {
-    value: false,
-    disabled: true
-  },
-  argTypes: {
-    input: {
-      action: 'input'
-    }
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Disabled toggle component that cannot be interacted with'
-      }
-    }
-  }
-}`,...t.parameters?.docs?.source}}};const o=["Default","Disabled"],r=Object.freeze(Object.defineProperty({__proto__:null,Default:e,Disabled:t,__namedExportsOrder:o,default:n},Symbol.toStringTag,{value:"Module"}));export{r as D,e as a,t as b};

package/storybook-static/assets/DpTooltip-BwmuQSat.js

@@ -1,27 +0,0 @@
-import{j as e,M as r,C as o}from"./blocks-kyJuz3C5.js";import{useMDXComponents as s}from"./index-BbC7EF1e.js";import{D as a,a as l,P as c,W as h,b as p,C as d}from"./DpTooltip.stories-DbfOxsaF.js";import"./iframe-KFxwsBtW.js";import"./_commonjsHelpers-CE1G-McA.js";import"./DpTooltip-D8SOODgR.js";import"./Tooltip-flnpMaRO.js";import"./CleanHtml-CeG3Pc5D.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";import"./DpButton-BLywaapW.js";import"./DpIcon-dOAQoUKG.js";function i(t){const n={code:"code",h1:"h1",h2:"h2",h3:"h3",li:"li",ol:"ol",p:"p",...s(),...t.components};return e.jsxs(e.Fragment,{children:[e.jsx(r,{of:a}),`
-`,e.jsx(n.h1,{id:"tooltip",children:"Tooltip"}),`
-`,e.jsx(n.p,{children:`The Tooltip component displays additional information when a user hovers over or focuses on an element.
-It's useful for providing context, explanations, or extra details without cluttering the interface.`}),`
-`,e.jsx(n.h2,{id:"usage",children:"Usage"}),`
-`,e.jsx(n.h3,{id:"default",children:"Default"}),`
-`,e.jsx(n.p,{children:"Basic tooltip that appears on hover or focus."}),`
-`,e.jsx(o,{of:l}),`
-`,e.jsx(n.h3,{id:"different-placements",children:"Different Placements"}),`
-`,e.jsx(n.p,{children:"Tooltips can be positioned in different directions relative to the trigger element."}),`
-`,e.jsx(o,{of:c}),`
-`,e.jsx(n.h3,{id:"with-html-content",children:"With HTML Content"}),`
-`,e.jsx(n.p,{children:"Tooltips can contain rich HTML content including formatting and lists."}),`
-`,e.jsx(o,{of:h}),`
-`,e.jsx(n.h3,{id:"custom-container",children:"Custom Container"}),`
-`,e.jsx(n.p,{children:"Tooltips can be constrained to a specific container element."}),`
-`,e.jsx(o,{of:p}),`
-`,e.jsx(n.h3,{id:"custom-node-type",children:"Custom Node Type"}),`
-`,e.jsx(n.p,{children:"The tooltip trigger element can be customized to use a different HTML tag."}),`
-`,e.jsx(o,{of:d}),`
-`,e.jsx(n.h2,{id:"implementation-notes",children:"Implementation Notes"}),`
-`,e.jsx(n.p,{children:"The component can be used in two ways:"}),`
-`,e.jsxs(n.ol,{children:[`
-`,e.jsx(n.li,{children:"As a wrapper component (shown in these examples)"}),`
-`,e.jsxs(n.li,{children:["As a directive (",e.jsx(n.code,{children:"v-tooltip"}),") that can be applied to any element"]}),`
-`]}),`
-`,e.jsx(n.p,{children:"The tooltip is positioned using the Floating UI library, which ensures it stays within the viewport and adapts to available space."})]})}function y(t={}){const{wrapper:n}={...s(),...t.components};return n?e.jsx(n,{...t,children:e.jsx(i,{...t})}):i(t)}export{y as default};

package/storybook-static/assets/DpTooltip-D8SOODgR.js

@@ -1 +0,0 @@
-import{d as i,i as s}from"./Tooltip-flnpMaRO.js";import{C as l}from"./CleanHtml-CeG3Pc5D.js";import{e as n,j as a,u as r,o as p,r as d}from"./iframe-KFxwsBtW.js";import{_ as c}from"./_plugin-vue_export-helper-DlAUqK2U.js";const t={name:"DpTooltip",directives:{cleanhtml:l},props:{container:{type:String,required:!1},placement:{type:String,required:!1,default:"top"},nodeType:{type:String,required:!1,default:"div"},text:{type:String,required:!0}},data(){return{tooltipHook:null}},mounted(){this.tooltipHook=this.$el,this.$el.hasChildNodes()&&this.$el.childNodes.length===1&&Object.keys(this.$el.childNodes[0]).length>0&&(this.tooltipHook=this.$el.childNodes[0]);const e=this.$slots.popover?this.$slots.popover()[0]:this.text;s(this.tooltipHook,e,{place:this.placement,container:this.container})},beforeUnmount(){i(this.tooltipHook)}};function u(e,m,o,f,h,y){return p(),n(r(o.nodeType),{class:"inline-block"},{default:a(()=>[d(e.$slots,"default")]),_:3})}const T=c(t,[["render",u]]);t.__docgenInfo={displayName:"DpTooltip",exportName:"default",description:"",tags:{},props:[{name:"container",type:{name:"string"},required:!1},{name:"placement",type:{name:"string"},required:!1,defaultValue:{func:!1,value:"'top'"}},{name:"nodeType",type:{name:"string"},required:!1,defaultValue:{func:!1,value:"'div'"}},{name:"text",type:{name:"string"},required:!0}],slots:[{name:"default"}],sourceFiles:["/home/florian/Dev/demosplan-ui/src/components/DpTooltip/DpTooltip.vue"]};export{T as D};

package/storybook-static/assets/DpTooltip.stories-DbfOxsaF.js

@@ -1,248 +0,0 @@
-import{D as o}from"./DpTooltip-D8SOODgR.js";import{_ as s}from"./DpButton-BLywaapW.js";const a={component:o,title:"Components/Tooltip",argTypes:{text:{control:"text",description:"Content displayed in the tooltip",table:{type:{summary:"String"}}},placement:{control:{type:"select"},options:["top","right","bottom","left"],description:"Position of the tooltip relative to the trigger element",table:{type:{summary:"String"},defaultValue:{summary:"top"}}},container:{control:"text",description:"CSS selector for the container element that the tooltip should be appended to",table:{type:{summary:"String"},defaultValue:{summary:"body"}}},nodeType:{control:{type:"select"},options:["div","span","button","a"],description:"HTML element type to use for the tooltip wrapper",table:{type:{summary:"String"},defaultValue:{summary:"div"}}}}},e={render:t=>({components:{DpTooltip:o},setup(){return{args:t}},template:`
-      <div style="padding: 50px; display: flex; justify-content: center;">
-        <dp-tooltip v-bind="args">
-          <span style="border-bottom: 1px dotted #000; cursor: help;">Hover me for information</span>
-        </dp-tooltip>
-      </div>
-    `}),args:{text:"This is a helpful tooltip that provides additional information."},parameters:{docs:{description:{story:"Basic tooltip that appears when hovering over the trigger element"}}}},p={render:t=>({components:{DpTooltip:o,DpButton:s},setup(){return{args:t}},template:`
-      <div style="padding: 80px; display: flex; justify-content: center; gap: 20px; flex-wrap: wrap;">
-        <dp-tooltip text="Tooltip on top" placement="top">
-          <dp-button>Top</dp-button>
-        </dp-tooltip>
-        <dp-tooltip text="Tooltip on right" placement="right">
-          <dp-button>Right</dp-button>
-        </dp-tooltip>
-        <dp-tooltip text="Tooltip on bottom" placement="bottom">
-          <dp-button>Bottom</dp-button>
-        </dp-tooltip>
-        <dp-tooltip text="Tooltip on left" placement="left">
-          <dp-button>Left</dp-button>
-        </dp-tooltip>
-      </div>
-    `}),parameters:{docs:{description:{story:"Tooltips can be positioned in different directions: top, right, bottom, or left"},source:{code:`
-<dp-tooltip text="Tooltip on top" placement="top">
-  <dp-button>Top</dp-button>
-</dp-tooltip>
-
-<dp-tooltip text="Tooltip on right" placement="right">
-  <dp-button>Right</dp-button>
-</dp-tooltip>
-
-<dp-tooltip text="Tooltip on bottom" placement="bottom">
-  <dp-button>Bottom</dp-button>
-</dp-tooltip>
-
-<dp-tooltip text="Tooltip on left" placement="left">
-  <dp-button>Left</dp-button>
-</dp-tooltip>
-`}}}},n={render:t=>({components:{DpTooltip:o},setup(){return{args:t}},template:`
-      <div style="padding: 50px; display: flex; justify-content: center;">
-        <dp-tooltip v-bind="args">
-          <span style="border-bottom: 1px dotted #000; cursor: help;">Hover for formatted content</span>
-        </dp-tooltip>
-      </div>
-    `}),args:{text:"This tooltip contains <strong>HTML</strong> content including: <ul><li>Formatted text</li><li>Lists</li><li>And more</li></ul>"},parameters:{docs:{description:{story:"Tooltips can contain rich HTML content with formatting and lists"}}}},i={render:t=>({components:{DpTooltip:o},setup(){return{args:t}},template:`
-      <div id="tooltip-container" style="padding: 50px; position: relative; border: 1px dashed #ccc; display: flex; justify-content: center;">
-        <dp-tooltip v-bind="args">
-          <span style="border-bottom: 1px dotted #000; cursor: help;">Tooltip constrained to container</span>
-        </dp-tooltip>
-      </div>
-    `}),args:{text:"This tooltip is constrained to its parent container",container:"#tooltip-container"},parameters:{docs:{description:{story:"Tooltips can be constrained to a specific container element"}}}},r={render:t=>({components:{DpTooltip:o},setup(){return{args:t}},template:`
-      <div style="padding: 50px; display: flex; justify-content: center;">
-        <dp-tooltip
-          v-bind="args"
-          href="https://example.com">
-          Click this link
-        </dp-tooltip>
-      </div>
-    `}),args:{text:"This tooltip is attached to a link element",nodeType:"a",placement:"bottom"},parameters:{docs:{description:{story:"The wrapper element can be customized to use a different HTML tag (div, span, a, button, etc.)"},source:{code:`
-<dp-tooltip
-  text="This tooltip is attached to a link element"
-  nodeType="a"
-  placement="bottom"
-  href="https://example.com">
-  Click this link
-</dp-tooltip>
-`}}}};e.parameters={...e.parameters,docs:{...e.parameters?.docs,source:{originalSource:`{
-  render: args => ({
-    components: {
-      DpTooltip
-    },
-    setup() {
-      return {
-        args
-      };
-    },
-    template: \`
-      <div style="padding: 50px; display: flex; justify-content: center;">
-        <dp-tooltip v-bind="args">
-          <span style="border-bottom: 1px dotted #000; cursor: help;">Hover me for information</span>
-        </dp-tooltip>
-      </div>
-    \`
-  }),
-  args: {
-    text: 'This is a helpful tooltip that provides additional information.'
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Basic tooltip that appears when hovering over the trigger element'
-      }
-    }
-  }
-}`,...e.parameters?.docs?.source}}};p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`{
-  render: args => ({
-    components: {
-      DpTooltip,
-      DpButton
-    },
-    setup() {
-      return {
-        args
-      };
-    },
-    template: \`
-      <div style="padding: 80px; display: flex; justify-content: center; gap: 20px; flex-wrap: wrap;">
-        <dp-tooltip text="Tooltip on top" placement="top">
-          <dp-button>Top</dp-button>
-        </dp-tooltip>
-        <dp-tooltip text="Tooltip on right" placement="right">
-          <dp-button>Right</dp-button>
-        </dp-tooltip>
-        <dp-tooltip text="Tooltip on bottom" placement="bottom">
-          <dp-button>Bottom</dp-button>
-        </dp-tooltip>
-        <dp-tooltip text="Tooltip on left" placement="left">
-          <dp-button>Left</dp-button>
-        </dp-tooltip>
-      </div>
-    \`
-  }),
-  parameters: {
-    docs: {
-      description: {
-        story: 'Tooltips can be positioned in different directions: top, right, bottom, or left'
-      },
-      source: {
-        code: \`
-<dp-tooltip text="Tooltip on top" placement="top">
-  <dp-button>Top</dp-button>
-</dp-tooltip>
-
-<dp-tooltip text="Tooltip on right" placement="right">
-  <dp-button>Right</dp-button>
-</dp-tooltip>
-
-<dp-tooltip text="Tooltip on bottom" placement="bottom">
-  <dp-button>Bottom</dp-button>
-</dp-tooltip>
-
-<dp-tooltip text="Tooltip on left" placement="left">
-  <dp-button>Left</dp-button>
-</dp-tooltip>
-\`
-      }
-    }
-  }
-}`,...p.parameters?.docs?.source}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
-  render: args => ({
-    components: {
-      DpTooltip
-    },
-    setup() {
-      return {
-        args
-      };
-    },
-    template: \`
-      <div style="padding: 50px; display: flex; justify-content: center;">
-        <dp-tooltip v-bind="args">
-          <span style="border-bottom: 1px dotted #000; cursor: help;">Hover for formatted content</span>
-        </dp-tooltip>
-      </div>
-    \`
-  }),
-  args: {
-    text: 'This tooltip contains <strong>HTML</strong> content including: <ul><li>Formatted text</li><li>Lists</li><li>And more</li></ul>'
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Tooltips can contain rich HTML content with formatting and lists'
-      }
-    }
-  }
-}`,...n.parameters?.docs?.source}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
-  render: args => ({
-    components: {
-      DpTooltip
-    },
-    setup() {
-      return {
-        args
-      };
-    },
-    template: \`
-      <div id="tooltip-container" style="padding: 50px; position: relative; border: 1px dashed #ccc; display: flex; justify-content: center;">
-        <dp-tooltip v-bind="args">
-          <span style="border-bottom: 1px dotted #000; cursor: help;">Tooltip constrained to container</span>
-        </dp-tooltip>
-      </div>
-    \`
-  }),
-  args: {
-    text: 'This tooltip is constrained to its parent container',
-    container: '#tooltip-container'
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Tooltips can be constrained to a specific container element'
-      }
-    }
-  }
-}`,...i.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
-  render: args => ({
-    components: {
-      DpTooltip
-    },
-    setup() {
-      return {
-        args
-      };
-    },
-    template: \`
-      <div style="padding: 50px; display: flex; justify-content: center;">
-        <dp-tooltip
-          v-bind="args"
-          href="https://example.com">
-          Click this link
-        </dp-tooltip>
-      </div>
-    \`
-  }),
-  args: {
-    text: 'This tooltip is attached to a link element',
-    nodeType: 'a',
-    placement: 'bottom'
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'The wrapper element can be customized to use a different HTML tag (div, span, a, button, etc.)'
-      },
-      source: {
-        code: \`
-<dp-tooltip
-  text="This tooltip is attached to a link element"
-  nodeType="a"
-  placement="bottom"
-  href="https://example.com">
-  Click this link
-</dp-tooltip>
-\`
-      }
-    }
-  }
-}`,...r.parameters?.docs?.source}}};const l=["Default","Placement","WithHTML","WithCustomContainer","CustomNodeType"],m=Object.freeze(Object.defineProperty({__proto__:null,CustomNodeType:r,Default:e,Placement:p,WithCustomContainer:i,WithHTML:n,__namedExportsOrder:l,default:a},Symbol.toStringTag,{value:"Module"}));export{r as C,m as D,p as P,n as W,e as a,i as b};

package/storybook-static/assets/DpTransitionExpand-C4Amyfxp.js

@@ -1,8 +0,0 @@
-import{j as t,M as m,C as n}from"./blocks-kyJuz3C5.js";import{useMDXComponents as p}from"./index-BbC7EF1e.js";import{Basic as e}from"./DpTransitionExpand.stories-DX9u7SiJ.js";import"./iframe-KFxwsBtW.js";import"./_commonjsHelpers-CE1G-McA.js";import"./DpAccordion-CKgNMMg7.js";import"./DpIcon-dOAQoUKG.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";import"./DpVideoPlayer-CnldmoEy.js";import"./Tooltip-flnpMaRO.js";import"./translations-DDOZrg-p.js";import"./CleanHtml-CeG3Pc5D.js";import"./DpButtonRow-DRRw4r4F.js";import"./DpButton-BLywaapW.js";import"./DpCheckbox-BdZqABk4.js";import"./DpLabel-DFauD5I2.js";import"./DpContextualHelp-DnsCCoZB.js";import"./dayjs.min-C3DHb-Vr.js";import"./prefixClass-BBJiSKc2.js";import"./prefixClassMixin-FjEzRm2G.js";import"./helpers-CdC6mcQu.js";import"./getScrollTop-CXy7CyEd.js";import"./DpInput-cN-WEvOL.js";import"./lengthHint-zGawKYxB.js";import"./DpModal-oGkhZvzT.js";import"./hasOwnProp-B0vmwdLB.js";import"./DpMultiselect-Bm5hUadB.js";import"./DpDataTable-f7CVMPNi.js";import"./DpDraggable-DLTo9Q5K.js";import"./DpLoading-rM7osZHK.js";import"./DpApi-BU9X0WT6.js";import"./index-CTxdm8FW.js";import"./DpAutocomplete-Ds8IvIaM.js";import"./DpBulkEditHeader-qNgl3Gdq.js";import"./DpBadge-mgPu9WO8.js";import"./DpCard-CNBkliZ1.js";import"./DpCheckboxGroup-CFaFEzrL.js";import"./DpColumnSelector-BjRvX20u.js";import"./DpFlyout-Dsx6KYUl.js";import"./DpDataTableExtended-mDxHCvB0.js";import"./DpSlidingPagination-BCXUgS46.js";import"./DpStickyElement-ClzY3p1-.js";import"./Stickier-DyqV0rTn.js";import"./DpDatepicker-CFlgW3DB.js";import"./DpDateRangePicker-D5652u0C.js";import"./DpDatetimePicker-DQokm861.js";import"./DpTimePicker-9Qy_qVnW.js";import"./DpResettableInput-nox0ihQv.js";import"./DpDetails-Do--n1SK.js";import"./DpConfirmDialog-CQYtFW-3.js";import"./DpEditableList-5FqvJbtx.js";import"./DpFormRow-BsMZgRL2.js";import"./DpInlineNotification-CEzn4Pqd.js";import"./DpMultistepNav-AnSXdU2J.js";import"./DpNotification-C1QXVdor.js";import"./DpPager-BaoMw4uo.js";import"./DpProgressBar-C0dbsdgz.js";import"./DpRadio-D2xw34qI.js";import"./DpSearchField-CFqegLRV.js";import"./DpSelect-BzmpttTu.js";import"./DpSkeletonBox-a5wBcRN-.js";import"./DpSlidebar-DtAyUisB.js";import"./DpTextArea-DoA63rHr.js";import"./DpToggle-BPqlzXQH.js";import"./DpTooltip-D8SOODgR.js";import"./DpTreeList-Cciwf3YU.js";function r(i){const o={code:"code",h1:"h1",h2:"h2",p:"p",...p(),...i.components};return t.jsxs(t.Fragment,{children:[t.jsx(m,{title:"Components/TransitionExpand"}),`
-`,t.jsx(o.h1,{id:"dptransitionexpand",children:"DpTransitionExpand"}),`
-`,t.jsx(o.p,{children:"A transition component that smoothly animates element height during expand and collapse operations."}),`
-`,t.jsx(o.h2,{id:"usage",children:"Usage"}),`
-`,t.jsxs(o.p,{children:["The DpTransitionExpand component is designed to be used as a wrapper around content that needs to be expanded or collapsed with animation. It's commonly used with ",t.jsx(o.code,{children:"v-show"})," or ",t.jsx(o.code,{children:"v-if"})," directives to toggle content visibility."]}),`
-`,t.jsx(o.h2,{id:"example",children:"Example"}),`
-`,t.jsx(o.p,{children:"A simple example showing the transition effect when toggling visibility."}),`
-`,t.jsx(n,{of:e})]})}function vt(i={}){const{wrapper:o}={...p(),...i.components};return o?t.jsx(o,{...i,children:t.jsx(r,{...i})}):r(i)}export{vt as default};

package/storybook-static/assets/DpTransitionExpand.stories-DX9u7SiJ.js

@@ -1,85 +0,0 @@
-import{l as n}from"./iframe-KFxwsBtW.js";import{_ as i}from"./DpAccordion-CKgNMMg7.js";import"./DpVideoPlayer-CnldmoEy.js";import"./DpAutocomplete-Ds8IvIaM.js";import"./DpBulkEditHeader-qNgl3Gdq.js";import"./DpButton-BLywaapW.js";import"./DpButtonRow-DRRw4r4F.js";import"./DpBadge-mgPu9WO8.js";import"./DpCard-CNBkliZ1.js";import"./DpCheckbox-BdZqABk4.js";import"./DpCheckboxGroup-CFaFEzrL.js";import"./DpColumnSelector-BjRvX20u.js";import"./DpContextualHelp-DnsCCoZB.js";import"./DpDataTable-f7CVMPNi.js";import"./DpDataTableExtended-mDxHCvB0.js";import"./DpDatepicker-CFlgW3DB.js";import"./DpDateRangePicker-D5652u0C.js";import"./DpDatetimePicker-DQokm861.js";import"./DpDetails-Do--n1SK.js";import"./DpConfirmDialog-CQYtFW-3.js";import"./DpDraggable-DLTo9Q5K.js";import"./DpEditableList-5FqvJbtx.js";import"./DpFlyout-Dsx6KYUl.js";import"./DpFormRow-BsMZgRL2.js";import"./DpApi-BU9X0WT6.js";import"./DpIcon-dOAQoUKG.js";import"./DpInlineNotification-CEzn4Pqd.js";import"./DpInput-cN-WEvOL.js";import"./DpLabel-DFauD5I2.js";import"./DpLoading-rM7osZHK.js";import"./DpModal-oGkhZvzT.js";import"./DpMultiselect-Bm5hUadB.js";import"./DpMultistepNav-AnSXdU2J.js";import"./DpNotification-C1QXVdor.js";import"./DpPager-BaoMw4uo.js";import"./DpProgressBar-C0dbsdgz.js";import"./DpRadio-D2xw34qI.js";import"./DpResettableInput-nox0ihQv.js";import"./DpSearchField-CFqegLRV.js";import"./DpSelect-BzmpttTu.js";import"./DpSkeletonBox-a5wBcRN-.js";import"./DpSlidebar-DtAyUisB.js";import"./DpSlidingPagination-BCXUgS46.js";import"./DpStickyElement-ClzY3p1-.js";import"./DpTextArea-DoA63rHr.js";import"./DpTimePicker-9Qy_qVnW.js";import"./DpToggle-BPqlzXQH.js";import"./DpTooltip-D8SOODgR.js";import"./DpTreeList-Cciwf3YU.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";import"./Tooltip-flnpMaRO.js";import"./_commonjsHelpers-CE1G-McA.js";import"./translations-DDOZrg-p.js";import"./CleanHtml-CeG3Pc5D.js";import"./dayjs.min-C3DHb-Vr.js";import"./helpers-CdC6mcQu.js";import"./getScrollTop-CXy7CyEd.js";import"./prefixClass-BBJiSKc2.js";import"./hasOwnProp-B0vmwdLB.js";import"./prefixClassMixin-FjEzRm2G.js";import"./lengthHint-zGawKYxB.js";import"./index-CTxdm8FW.js";import"./Stickier-DyqV0rTn.js";const ut={title:"Components/TransitionExpand",component:i,parameters:{layout:"centered"}},t={render:o=>({components:{DpTransitionExpand:i},setup(){return{isVisible:n(!1)}},template:`
-      <div class="w-[400px]">
-        <button
-          class="mb-4 px-4 py-2 bg-blue-500 text-white rounded"
-          @click="isVisible = !isVisible"
-        >
-          Toggle Content
-        </button>
-        <dp-transition-expand>
-          <div v-show="isVisible" class="p-4 bg-gray-100 rounded">
-            <p>This content expands and collapses with a smooth animation.</p>
-            <p class="mt-2">The height is calculated automatically based on the content.</p>
-          </div>
-        </dp-transition-expand>
-      </div>
-    `}),parameters:{docs:{source:{code:`
-<template>
-  <button @click="isVisible = !isVisible">Toggle Content</button>
-  <dp-transition-expand>
-    <div v-show="isVisible">
-      <p>This content expands and collapses with a smooth animation.</p>
-      <p>The height is calculated automatically based on the content.</p>
-    </div>
-  </dp-transition-expand>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import DpTransitionExpand from '~/components/DpTransitionExpand'
-
-const isVisible = ref(false)
-<\/script>
-`}}}};t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:`{
-  render: args => ({
-    components: {
-      DpTransitionExpand
-    },
-    setup() {
-      const isVisible = ref(false);
-      return {
-        isVisible
-      };
-    },
-    template: \`
-      <div class="w-[400px]">
-        <button
-          class="mb-4 px-4 py-2 bg-blue-500 text-white rounded"
-          @click="isVisible = !isVisible"
-        >
-          Toggle Content
-        </button>
-        <dp-transition-expand>
-          <div v-show="isVisible" class="p-4 bg-gray-100 rounded">
-            <p>This content expands and collapses with a smooth animation.</p>
-            <p class="mt-2">The height is calculated automatically based on the content.</p>
-          </div>
-        </dp-transition-expand>
-      </div>
-    \`
-  }),
-  parameters: {
-    docs: {
-      source: {
-        code: \`
-<template>
-  <button @click="isVisible = !isVisible">Toggle Content</button>
-  <dp-transition-expand>
-    <div v-show="isVisible">
-      <p>This content expands and collapses with a smooth animation.</p>
-      <p>The height is calculated automatically based on the content.</p>
-    </div>
-  </dp-transition-expand>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import DpTransitionExpand from '~/components/DpTransitionExpand'
-
-const isVisible = ref(false)
-<\/script>
-\`
-      }
-    }
-  }
-}`,...t.parameters?.docs?.source}}};const ht=["Basic"];export{t as Basic,ht as __namedExportsOrder,ut as default};

package/storybook-static/assets/DpTreeList-C68TZVte.js

@@ -1,78 +0,0 @@
-import{j as e,M as l,C as i}from"./blocks-kyJuz3C5.js";import{useMDXComponents as s}from"./index-BbC7EF1e.js";import{Default as a,SelectableNodes as o,DraggableNodes as c,CustomRendering as d}from"./DpTreeList.stories-B_u3WNs8.js";import"./iframe-KFxwsBtW.js";import"./_commonjsHelpers-CE1G-McA.js";import"./DpTreeList-Cciwf3YU.js";import"./dayjs.min-C3DHb-Vr.js";import"./DpDraggable-DLTo9Q5K.js";import"./translations-DDOZrg-p.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";import"./DpIcon-dOAQoUKG.js";import"./CleanHtml-CeG3Pc5D.js";import"./Tooltip-flnpMaRO.js";import"./DpApi-BU9X0WT6.js";import"./hasOwnProp-B0vmwdLB.js";import"./Stickier-DyqV0rTn.js";import"./getScrollTop-CXy7CyEd.js";function r(t){const n={code:"code",h1:"h1",h2:"h2",h3:"h3",p:"p",pre:"pre",...s(),...t.components};return e.jsxs(e.Fragment,{children:[e.jsx(l,{title:"Components/TreeList"}),`
-`,e.jsx(n.h1,{id:"dptreelist",children:"DpTreeList"}),`
-`,e.jsx(n.p,{children:"The DpTreeList component displays data in a hierarchical, tree-like structure while providing functionalities similar to a list."}),`
-`,e.jsx(n.p,{children:`It is commonly used in various applications, such as file explorers, FAQ, and organizational charts,
-where data has a hierarchical relationship.`}),`
-`,e.jsx(n.h3,{id:"options-object",children:"Options Object"}),`
-`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-javascript",children:`{
-  // Selection options
-  branchesSelectable: true, // Allow selection of branches
-  leavesSelectable: true,   // Allow selection of leaves
-
-  // Drag options
-  rootDraggable: false,     // Allow dragging at root level
-  dragAcrossBranches: false, // Allow dragging nodes between branches
-  dragBranches: true,       // Allow dragging branch nodes
-  dragLeaves: true,         // Allow dragging leaf nodes
-
-  // Draggable configuration
-  draggable: {
-    handle: '.c-treelist__drag-handle',
-    ghostClass: 'c-treelist__node-ghost',
-    chosenClass: 'c-treelist__node-chosen'
-  },
-
-  // Checkbox identifier
-  checkboxIdentifier: {
-    branch: 'nodeSelected',
-    leaf: 'nodeSelected'
-  },
-
-  // Selection propagation options
-  selectOn: {
-    childSelect: false,     // Select parent when child is selected
-    parentSelect: false     // Select children when parent is selected
-  },
-
-  // Deselection propagation options
-  deselectOn: {
-    childDeselect: false,   // Deselect parent when child is deselected
-    parentDeselect: false   // Deselect children when parent is deselected
-  }
-}
-`})}),`
-`,e.jsx(n.h3,{id:"tree-data-structure",children:"Tree Data Structure"}),`
-`,e.jsx(n.p,{children:"The component expects a hierarchical data structure with the following format:"}),`
-`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-javascript",children:`[
-  {
-    id: 'node-1',           // Unique identifier
-    type: 'category',       // Node type (used by branchIdentifier)
-    attributes: {           // Custom attributes
-      title: 'Category 1'
-    },
-    children: [             // Child nodes
-      {
-        id: 'node-1-1',
-        type: 'item',
-        attributes: {
-          title: 'Item 1'
-        },
-        children: []
-      }
-    ]
-  }
-]
-`})}),`
-`,e.jsx(n.h2,{id:"examples",children:"Examples"}),`
-`,e.jsx(n.h3,{id:"basic-tree-list",children:"Basic Tree List"}),`
-`,e.jsx(n.p,{children:"A simple tree list with default options."}),`
-`,e.jsx(i,{of:a}),`
-`,e.jsx(n.h3,{id:"selectable-tree-list",children:"Selectable Tree List"}),`
-`,e.jsx(n.p,{children:"Tree list with selectable branches and leaves."}),`
-`,e.jsx(i,{of:o}),`
-`,e.jsx(n.h3,{id:"draggable-tree-list",children:"Draggable Tree List"}),`
-`,e.jsx(n.p,{children:"Tree list with draggable nodes for reordering."}),`
-`,e.jsx(i,{of:c}),`
-`,e.jsx(n.h3,{id:"custom-rendering",children:"Custom Rendering"}),`
-`,e.jsx(n.p,{children:"Tree list with custom node rendering."}),`
-`,e.jsx(i,{of:d})]})}function L(t={}){const{wrapper:n}={...s(),...t.components};return n?e.jsx(n,{...t,children:e.jsx(r,{...t})}):r(t)}export{L as default};