@eturnity/eturnity_reusable_components 8.22.23-EPDM-15709.0 → 8.22.23-EPDM-13618.0

package/src/components/draggableCard/draggableCard.stories.js

@@ -1,135 +1,135 @@
-import DraggableCard from './index.vue'
-import theme from '@/assets/theme'
-
-export default {
-  title: 'DraggableCard',
-  component: DraggableCard,
-  tags: ['autodocs'],
-  argTypes: {
-    width: {
-      control: 'text',
-      description: 'Width of the card',
-    },
-    initialPosition: {
-      control: 'object',
-      description: 'Initial position of the card (top, right, bottom, left)',
-    },
-    title: {
-      control: 'text',
-      description: 'Title of the card',
-    },
-    titleDataId: {
-      control: 'text',
-      description: 'Data ID for the title',
-    },
-    isCollapsible: {
-      control: 'boolean',
-      description: 'Whether the card can be collapsed',
-    },
-    infoText: {
-      control: 'text',
-      description: 'Additional info text to display next to the title',
-    },
-    dragTargets: {
-      control: 'array',
-      description: 'Targets where the card can be dragged',
-    },
-    dragBounds: {
-      control: 'object',
-      description: 'Boundaries for dragging the card',
-    },
-  },
-}
-
-const Template = (args) => ({
-  components: { DraggableCard },
-  setup() {
-    return { args }
-  },
-  template: `
-    <DraggableCard v-bind="args">
-      <template #body>
-        <div style="color: white;">Card body content</div>
-      </template>
-      <template #footer>
-        <div style="color: white;">Card footer content</div>
-      </template>
-    </DraggableCard>
-  `,
-  provide: {
-    theme,
-  },
-})
-
-export const Default = Template.bind({})
-Default.args = {
-  width: '300px',
-  initialPosition: {
-    top: '20px',
-    left: '20px',
-  },
-  title: 'Default Card',
-  isCollapsible: true,
-}
-
-export const WithInfoText = Template.bind({})
-WithInfoText.args = {
-  width: '300px',
-  initialPosition: {
-    top: '20px',
-    left: '20px',
-  },
-  title: 'Card with Info',
-  infoText: 'This is some additional information',
-  isCollapsible: true,
-}
-
-export const NonCollapsible = Template.bind({})
-NonCollapsible.args = {
-  width: '300px',
-  initialPosition: {
-    top: '20px',
-    left: '20px',
-  },
-  title: 'Non-Collapsible Card',
-  isCollapsible: false,
-}
-
-export const WithDragBounds = Template.bind({})
-WithDragBounds.args = {
-  width: '300px',
-  initialPosition: {
-    top: '20px',
-    left: '20px',
-  },
-  title: 'Card with Drag Bounds',
-  dragBounds: {
-    min: { top: 0, left: 0 },
-    max: { top: 500, left: 500 },
-  },
-  isCollapsible: true,
-}
-
-export const WithCustomDragTargets = Template.bind({})
-WithCustomDragTargets.args = {
-  width: '300px',
-  initialPosition: {
-    top: '20px',
-    left: '20px',
-  },
-  title: 'Card with Custom Drag Targets',
-  dragTargets: ['document', 'parent'],
-  isCollapsible: true,
-}
-
-export const WithTitleDataId = Template.bind({})
-WithTitleDataId.args = {
-  width: '300px',
-  initialPosition: {
-    top: '20px',
-    left: '20px',
-  },
-  title: 'Card with Data ID',
-  titleDataId: 'custom-data-id',
-  isCollapsible: true,
-}
+import DraggableCard from './index.vue'
+import theme from '@/assets/theme'
+
+export default {
+  title: 'DraggableCard',
+  component: DraggableCard,
+  tags: ['autodocs'],
+  argTypes: {
+    width: {
+      control: 'text',
+      description: 'Width of the card',
+    },
+    initialPosition: {
+      control: 'object',
+      description: 'Initial position of the card (top, right, bottom, left)',
+    },
+    title: {
+      control: 'text',
+      description: 'Title of the card',
+    },
+    titleDataId: {
+      control: 'text',
+      description: 'Data ID for the title',
+    },
+    isCollapsible: {
+      control: 'boolean',
+      description: 'Whether the card can be collapsed',
+    },
+    infoText: {
+      control: 'text',
+      description: 'Additional info text to display next to the title',
+    },
+    dragTargets: {
+      control: 'array',
+      description: 'Targets where the card can be dragged',
+    },
+    dragBounds: {
+      control: 'object',
+      description: 'Boundaries for dragging the card',
+    },
+  },
+}
+
+const Template = (args) => ({
+  components: { DraggableCard },
+  setup() {
+    return { args }
+  },
+  template: `
+    <DraggableCard v-bind="args">
+      <template #body>
+        <div style="color: white;">Card body content</div>
+      </template>
+      <template #footer>
+        <div style="color: white;">Card footer content</div>
+      </template>
+    </DraggableCard>
+  `,
+  provide: {
+    theme,
+  },
+})
+
+export const Default = Template.bind({})
+Default.args = {
+  width: '300px',
+  initialPosition: {
+    top: '20px',
+    left: '20px',
+  },
+  title: 'Default Card',
+  isCollapsible: true,
+}
+
+export const WithInfoText = Template.bind({})
+WithInfoText.args = {
+  width: '300px',
+  initialPosition: {
+    top: '20px',
+    left: '20px',
+  },
+  title: 'Card with Info',
+  infoText: 'This is some additional information',
+  isCollapsible: true,
+}
+
+export const NonCollapsible = Template.bind({})
+NonCollapsible.args = {
+  width: '300px',
+  initialPosition: {
+    top: '20px',
+    left: '20px',
+  },
+  title: 'Non-Collapsible Card',
+  isCollapsible: false,
+}
+
+export const WithDragBounds = Template.bind({})
+WithDragBounds.args = {
+  width: '300px',
+  initialPosition: {
+    top: '20px',
+    left: '20px',
+  },
+  title: 'Card with Drag Bounds',
+  dragBounds: {
+    min: { top: 0, left: 0 },
+    max: { top: 500, left: 500 },
+  },
+  isCollapsible: true,
+}
+
+export const WithCustomDragTargets = Template.bind({})
+WithCustomDragTargets.args = {
+  width: '300px',
+  initialPosition: {
+    top: '20px',
+    left: '20px',
+  },
+  title: 'Card with Custom Drag Targets',
+  dragTargets: ['document', 'parent'],
+  isCollapsible: true,
+}
+
+export const WithTitleDataId = Template.bind({})
+WithTitleDataId.args = {
+  width: '300px',
+  initialPosition: {
+    top: '20px',
+    left: '20px',
+  },
+  title: 'Card with Data ID',
+  titleDataId: 'custom-data-id',
+  isCollapsible: true,
+}