Refactor/pcollapsiblepanel logic

apps/web/src/services/ops-flow/components/BoardTaskDescriptionField.vue

@@ -25,6 +25,7 @@ const { editorContents } = useEditorContentTransformer({
     <p-collapsible-panel v-if="props.description"
                          class="task-desc-field"
                          :line-clamp="1"
+                         :enable-deep-clamp="true"
     >
         <text-editor-viewer :contents="editorContents"
                             contents-type="markdown"

apps/web/src/services/ops-flow/components/BoardTaskNameField.vue

@@ -15,6 +15,7 @@ const props = defineProps<{
 <template>
     <p-collapsible-panel class="task-name-field"
                          :line-clamp="1"
+                         :enable-deep-clamp="true"
     >
         <p-link :text="props.name"
                 :to="{

packages/mirinae/src/data-display/collapsible/collapsible-list/PCollapsibleList.vue

@@ -39,6 +39,7 @@
             <p-collapsible-panel v-show="togglePosition === COLLAPSIBLE_LIST_TOGGLE_POSITION.contents || proxyUnfoldedIndices.includes(idx)"
                                  :is-collapsed="!proxyUnfoldedIndices.includes(idx)"
                                  :line-clamp="togglePosition === COLLAPSIBLE_LIST_TOGGLE_POSITION.contents ? lineClamp : -1"
+                                 :enable-deep-clamp="item.enableDeepClamp"
                                  @update:isCollapsed="onUpdateCollapsed(idx, ...arguments)"
             >
                 <slot v-bind="{

packages/mirinae/src/data-display/collapsible/collapsible-list/type.ts

@@ -4,6 +4,7 @@ import type { COLLAPSIBLE_TOGGLE_TYPE } from '@/data-display/collapsible/collaps
 export interface CollapsibleItem<T = string> {
     name?: string;
     title?: string;
+    enableDeepClamp?: boolean;
     data: T;
 }
 

packages/mirinae/src/data-display/collapsible/collapsible-panel/PCollapsiblePanel.mdx

@@ -7,6 +7,16 @@ import * as PCollapsiblePanelStories from './PCollapsiblePanel.stories';
 <Meta of={PCollapsiblePanelStories} />
 
 # Collapsible Panel
+Collapsible Panel is a component that can be expanded or collapsed.
+
+<br/>
+<br/>
+
+# Types
+There are two types based on behavior:
+- [SimpleClamp](#line-clamp)
+- [DeepClamp](#deepclamp)
+
 <br/>
 <br/>
 
@@ -22,6 +32,44 @@ import * as PCollapsiblePanelStories from './PCollapsiblePanel.stories';
 <br/>
 <br/>
 
+## DeepClamp
+```DeepClamp (Boolean)```
+
+This prop controls the text clamping (truncation) method. <br/>
+When set to `true`, text clamping is applied recursively to nested elements, <br/>
+**treating text within both inline and block elements as a single line.** <br/>
+When set to `false`, text clamping only applies to the top-level element, improving performance.
+
+**Tip**: Use `enableDeepClamp: true` when dealing with nested text structures or multi-level elements to enforce text length constraints.
+**Motivation**: The simple clamping method had issues where clamping was not applied properly when multiple nested child elements were present.
+
+<br/>
+
+## DeepClamp Basic
+<Canvas of={PCollapsiblePanelStories.DeepClampBasic} />
+
+<br/>
+<br/>
+
+## Nested Elements
+<Canvas of={PCollapsiblePanelStories.NestedElements} />
+
+<br/>
+<br/>
+
+## Multi Inline Elements
+<Canvas of={PCollapsiblePanelStories.MultiInlineElements} />
+
+<br/>
+<br/>
+
+## Advanced
+The example below demonstrates how `CollapsiblePanel` integrates with `PLink` for interactive content
+<Canvas of={PCollapsiblePanelStories.Advance} />
+
+<br/>
+<br/>
+
 ## Playground
 <Canvas of={PCollapsiblePanelStories.Playground} />
 <Controls of={PCollapsiblePanelStories.Playground} />

packages/mirinae/src/data-display/collapsible/collapsible-panel/PCollapsiblePanel.stories.ts

@@ -5,7 +5,9 @@ import type { Meta, StoryObj } from '@storybook/vue';
 import type { ComponentProps } from 'vue-component-type-helpers';
 
 import { getCollapsiblePanelArgTypes, getCollapsiblePanelArgs, getCollapsiblePanelParameters } from '@/data-display/collapsible/collapsible-panel/story-helper';
+import PToolboxTable from '@/data-display/tables/toolbox-table/PToolboxTable.vue';
 import { useProxyValue } from '@/hooks';
+import PLink from '@/navigation/link/PLink.vue';
 import { I18nConnector } from '@/translations';
 
 import PCollapsiblePanel from './PCollapsiblePanel.vue';
@@ -29,7 +31,6 @@ const meta : Meta<PCollapsiblePanelPropsAndCustomArgs> = {
 export default meta;
 type Story = StoryObj<typeof PCollapsiblePanel>;
 
-
 const Template: Story = {
     render: (args, { argTypes }) => ({
         props: Object.keys(argTypes),
@@ -39,7 +40,6 @@ const Template: Story = {
             <div class="h-full w-full overflow p-8">
                 <p-collapsible-panel
                     v-model="proxyIsCollapsed"
-                    @update:isCollapsed="onUpdateIsCollapsed"
                     :line-clamp="lineClamp"
                 >
                     <div v-if="defaultSlot" v-html="defaultSlot"/>
@@ -123,6 +123,160 @@ export const LineClamp: Story = {
     }),
 };
 
+export const DeepClampBasic: Story = {
+    render: (args, { argTypes }) => ({
+        props: Object.keys(argTypes),
+        i18n: I18nConnector.i18n,
+        components: { PCollapsiblePanel, PLink, PToolboxTable },
+        template: `
+            <div class="h-full w-full overflow p-8">
+                <p-collapsible-panel
+                    v-model="proxyIsCollapsed"
+                    :enable-deep-clamp="true"
+                    :line-clamp="1"
+                >
+                  <div>
+                    <span>{{contents1}}</span>
+                    <span>{{contents2}}</span>
+                    <span>{{contents3}}</span>
+                  </div>
+                </p-collapsible-panel>
+            </div>
+        `,
+        setup(props, { emit }) {
+            const state = reactive({
+                proxyIsCollapsed: useProxyValue('isCollapsed', props, emit),
+                contents1: faker.lorem.sentence(50),
+                contents2: faker.lorem.sentence(10),
+                contents3: faker.lorem.sentence(10),
+            });
+            return {
+                ...toRefs(state),
+            };
+        },
+    }),
+};
+
+export const NestedElements: Story = {
+    render: (args, { argTypes }) => ({
+        props: Object.keys(argTypes),
+        i18n: I18nConnector.i18n,
+        components: { PCollapsiblePanel, PLink, PToolboxTable },
+        template: `
+                  <div class="h-full w-full overflow p-8">
+                    <div class="p-4 mb-8">
+                      <p class="text-xl font-bold mb-2 border-b">Line Clamp: 5</p>
+                      <p-collapsible-panel :line-clamp="5" :enable-deep-clamp="true">
+                        <div style=" height: 300px; border: 1px solid gray; padding: 20px;">
+                          <div class="target2">
+                            {{contents1}}
+                            <span >{{contents2}}</span>
+                          </div>
+                        </div>
+                        <div >
+                          <span>{{ contents3 }}</span>
+                        </div>
+                      </p-collapsible-panel>
+                    </div>
+                    <div class="p-4 mb-8">
+                      <p class="text-xl font-bold mb-2 border-b">Line Clamp: 7</p>
+                      <p-collapsible-panel :line-clamp="7" :enable-deep-clamp="true">
+                        <div style=" height: 300px; border: 1px solid gray; padding: 20px;">
+                          <div class="target2">
+                            {{contents1}}
+                            <span >{{contents2}}</span>
+                          </div>
+                        </div>
+                        <div>
+                          <span>{{ contents3 }}</span>
+                        </div>
+                      </p-collapsible-panel>
+                    </div>
+            </div>
+        `,
+        setup(props, { emit }) {
+            const state = reactive({
+                proxyIsCollapsed: useProxyValue('isCollapsed', props, emit),
+                contents1: faker.lorem.sentence(50),
+                contents2: faker.lorem.sentence(50),
+                contents3: faker.lorem.sentence(50),
+            });
+            return {
+                ...toRefs(state),
+            };
+        },
+    }),
+};
+
+
+export const MultiInlineElements: Story = {
+    render: (args, { argTypes }) => ({
+        props: Object.keys(argTypes),
+        i18n: I18nConnector.i18n,
+        components: { PCollapsiblePanel, PLink, PToolboxTable },
+        template: `
+            <div class="h-full w-full overflow p-8">
+                <p-collapsible-panel
+                    v-model="proxyIsCollapsed"
+                    :enable-deep-clamp="true"
+                    :line-clamp="2"
+                >
+                  <div>  
+                    <span>{{ contents1 }}
+                        <span>{{ contents2 }}</span>
+                        <span>{{ contents3 }}</span>
+                        <span>{{ contents4 }}</span>
+                    </span>
+                  </div>
+                </p-collapsible-panel>
+            </div>
+        `,
+        setup(props, { emit }) {
+            const state = reactive({
+                proxyIsCollapsed: useProxyValue('isCollapsed', props, emit),
+                contents1: faker.lorem.sentence(5),
+                contents2: faker.lorem.sentence(5),
+                contents3: faker.lorem.sentence(5),
+                contents4: faker.lorem.sentence(5),
+            });
+            return {
+                ...toRefs(state),
+            };
+        },
+    }),
+};
+
+export const Advance: Story = {
+    render: (args, { argTypes }) => ({
+        props: Object.keys(argTypes),
+        i18n: I18nConnector.i18n,
+        components: { PCollapsiblePanel, PLink, PToolboxTable },
+        template: `
+            <div class="h-full w-full overflow p-8">
+                <p-collapsible-panel
+                    v-model="proxyIsCollapsed"
+                    :enable-deep-clamp="true"
+                    :line-clamp="1"
+                >
+                  <p-link :text="contents"></p-link>
+                </p-collapsible-panel>
+            </div>
+        `,
+        setup(props, { emit }) {
+            const state = reactive({
+                proxyIsCollapsed: useProxyValue('isCollapsed', props, emit),
+                contents: faker.lorem.sentence(40),
+            });
+            return {
+                ...toRefs(state),
+            };
+        },
+    }),
+};
+
+
+
+
 export const Playground: Story = {
     ...Template,
 };