@eturnity/eturnity_reusable_components 8.19.8-EPDM-12618.6 → 8.19.8-EPDM-13618.0

package/src/components/selectedOptions/selectedOptions.stories.js

@@ -1,253 +1,253 @@
-import SelectedOptions from './index.vue'
-import theme from '@/assets/theme'
-
-export default {
-  title: 'SelectedOptions',
-  component: SelectedOptions,
-  tags: ['autodocs'],
-  argTypes: {
-    optionsList: {
-      control: 'object',
-      description:
-        'Array of options to display. Each option should have a type and name, and can optionally have a component, disabled state, hoverColor, and disabledInfo.',
-    },
-    numberSelected: {
-      control: 'number',
-      description: 'Number of items currently selected',
-    },
-    selectedLabel: {
-      control: 'text',
-      description:
-        'Custom label for the selected count (defaults to "selected")',
-    },
-    noBulkActionsLabel: {
-      control: 'text',
-      description:
-        'Custom label when no bulk actions are available (defaults to "no_batch_actions_available")',
-    },
-  },
-}
-
-const Template = (args) => ({
-  components: { SelectedOptions },
-  setup() {
-    return { args }
-  },
-  template: '<SelectedOptions v-bind="args" />',
-  provide: {
-    theme,
-  },
-})
-
-export const Default = Template.bind({})
-Default.args = {
-  optionsList: [
-    {
-      type: 'export',
-      name: 'Export',
-    },
-    {
-      type: 'delete',
-      name: 'Delete',
-      hoverColor: 'red',
-    },
-  ],
-  numberSelected: 5,
-}
-
-export const WithDisabledOptions = Template.bind({})
-WithDisabledOptions.args = {
-  optionsList: [
-    {
-      type: 'export',
-      name: 'Export',
-    },
-    {
-      type: 'delete',
-      name: 'Delete',
-      disabled: true,
-      disabledInfo: 'You do not have permission to delete these items',
-    },
-  ],
-  numberSelected: 3,
-}
-
-export const WithCustomComponent = Template.bind({})
-WithCustomComponent.args = {
-  optionsList: [
-    {
-      type: 'export',
-      name: 'Export',
-    },
-    {
-      type: 'set_supplier',
-      name: 'Set Supplier',
-      component: 'set_supplier',
-    },
-  ],
-  numberSelected: 2,
-}
-
-export const ManyOptions = Template.bind({})
-ManyOptions.args = {
-  optionsList: [
-    {
-      type: 'export',
-      name: 'Export',
-    },
-    {
-      type: 'delete',
-      name: 'Delete',
-      hoverColor: 'red',
-    },
-    {
-      type: 'archive',
-      name: 'Archive',
-    },
-    {
-      type: 'move',
-      name: 'Move',
-    },
-    {
-      type: 'copy',
-      name: 'Copy',
-    },
-  ],
-  numberSelected: 10,
-}
-
-export const NoOptions = Template.bind({})
-NoOptions.args = {
-  optionsList: [],
-  numberSelected: 0,
-}
-
-export const CustomLabels = Template.bind({})
-CustomLabels.args = {
-  optionsList: [
-    {
-      type: 'export',
-      name: 'Export',
-    },
-    {
-      type: 'delete',
-      name: 'Delete',
-      hoverColor: 'red',
-    },
-  ],
-  numberSelected: 1,
-  selectedLabel: 'item selected',
-  noBulkActionsLabel: 'No actions can be performed on selected items',
-}
-
-// How to use in your template
-// import SelectedOptions from "@eturnity/eturnity_reusable_components/src/components/selectedOptions"
-//
-// optionsList = [
-//   {
-//     type: 'close',
-//     name: 'Close'
-//   },
-//   {
-//     type: 'export',
-//     name: 'Export'
-//     ...
-//     add component parameter if we were passing a component to the selected options (see below)
-//     component: 'set_supplier'
-//   },
-//   {
-//     type: 'delete',
-//     name: 'Delete',
-//     hoverColor: 'red' // default is green
-//   }
-// ]
-//
-// @on-${type}="function" should $emit the callback for the 'type' in the optionsList
-//
-// <selected-options
-//   :numberSelected="numberSelected"
-//   :optionsList="optionsList"
-//   @on-close="onCloseFunction()"
-//   @on-export="function()" @on-delete="function()"
-// >
-//   add any custom components here that you want to pass to the expanded options
-//   <template v-slot:set_supplier>
-//     <CustomSelectComponent
-//       :option-list="suppliers"
-//       @set-supplier="checkboxBulkActions('setSupplier', $event)"
-//     />
-//   </template>
-// </SelectedOptions>
-
-export const Expanded = {
-  render: (args) => ({
-    components: { SelectedOptions },
-    setup() {
-      return { args }
-    },
-    template: `
-    <SelectedOptions v-bind="args">
-      <template v-slot:set_supplier>
-        <div>supplier</div>
-      </template>
-    </SelectedOptions>
-    `,
-  }),
-  args: {
-    ...Default.args,
-    //expanded options, this will display list of actions in the middle of the screen
-    expanded: true,
-
-    //optionsList, to be displayed when expanded is false and this will be filtered based on the optionLimit
-    optionsList: [
-      {
-        type: 'export',
-        name: 'Export',
-      },
-      {
-        type: 'export_page',
-        name: 'Export Page',
-      },
-      {
-        type: 'export_all',
-        name: 'Export All',
-      },
-      {
-        type: 'export_row',
-        name: 'Export Row',
-      },
-      {
-        type: 'set_supplier',
-        name: 'Set Supplier',
-        // add component parameter if we were passing a component to the selected options
-        component: 'set_supplier',
-      },
-    ],
-
-    //duplicate of optionsList, to be displayed when expanded is true
-    expandedOptions: [
-      {
-        type: 'export',
-        name: 'Export',
-      },
-      {
-        type: 'export_page',
-        name: 'Export Page',
-      },
-      {
-        type: 'export_all',
-        name: 'Export All',
-      },
-      {
-        type: 'export_row',
-        name: 'Export Row',
-      },
-      {
-        type: 'set_supplier',
-        name: 'Set Supplier',
-        // add component parameter if we were passing a component to the selected options
-        component: 'set_supplier',
-      },
-    ],
-  },
-}
+import SelectedOptions from './index.vue'
+import theme from '@/assets/theme'
+
+export default {
+  title: 'SelectedOptions',
+  component: SelectedOptions,
+  tags: ['autodocs'],
+  argTypes: {
+    optionsList: {
+      control: 'object',
+      description:
+        'Array of options to display. Each option should have a type and name, and can optionally have a component, disabled state, hoverColor, and disabledInfo.',
+    },
+    numberSelected: {
+      control: 'number',
+      description: 'Number of items currently selected',
+    },
+    selectedLabel: {
+      control: 'text',
+      description:
+        'Custom label for the selected count (defaults to "selected")',
+    },
+    noBulkActionsLabel: {
+      control: 'text',
+      description:
+        'Custom label when no bulk actions are available (defaults to "no_batch_actions_available")',
+    },
+  },
+}
+
+const Template = (args) => ({
+  components: { SelectedOptions },
+  setup() {
+    return { args }
+  },
+  template: '<SelectedOptions v-bind="args" />',
+  provide: {
+    theme,
+  },
+})
+
+export const Default = Template.bind({})
+Default.args = {
+  optionsList: [
+    {
+      type: 'export',
+      name: 'Export',
+    },
+    {
+      type: 'delete',
+      name: 'Delete',
+      hoverColor: 'red',
+    },
+  ],
+  numberSelected: 5,
+}
+
+export const WithDisabledOptions = Template.bind({})
+WithDisabledOptions.args = {
+  optionsList: [
+    {
+      type: 'export',
+      name: 'Export',
+    },
+    {
+      type: 'delete',
+      name: 'Delete',
+      disabled: true,
+      disabledInfo: 'You do not have permission to delete these items',
+    },
+  ],
+  numberSelected: 3,
+}
+
+export const WithCustomComponent = Template.bind({})
+WithCustomComponent.args = {
+  optionsList: [
+    {
+      type: 'export',
+      name: 'Export',
+    },
+    {
+      type: 'set_supplier',
+      name: 'Set Supplier',
+      component: 'set_supplier',
+    },
+  ],
+  numberSelected: 2,
+}
+
+export const ManyOptions = Template.bind({})
+ManyOptions.args = {
+  optionsList: [
+    {
+      type: 'export',
+      name: 'Export',
+    },
+    {
+      type: 'delete',
+      name: 'Delete',
+      hoverColor: 'red',
+    },
+    {
+      type: 'archive',
+      name: 'Archive',
+    },
+    {
+      type: 'move',
+      name: 'Move',
+    },
+    {
+      type: 'copy',
+      name: 'Copy',
+    },
+  ],
+  numberSelected: 10,
+}
+
+export const NoOptions = Template.bind({})
+NoOptions.args = {
+  optionsList: [],
+  numberSelected: 0,
+}
+
+export const CustomLabels = Template.bind({})
+CustomLabels.args = {
+  optionsList: [
+    {
+      type: 'export',
+      name: 'Export',
+    },
+    {
+      type: 'delete',
+      name: 'Delete',
+      hoverColor: 'red',
+    },
+  ],
+  numberSelected: 1,
+  selectedLabel: 'item selected',
+  noBulkActionsLabel: 'No actions can be performed on selected items',
+}
+
+// How to use in your template
+// import SelectedOptions from "@eturnity/eturnity_reusable_components/src/components/selectedOptions"
+//
+// optionsList = [
+//   {
+//     type: 'close',
+//     name: 'Close'
+//   },
+//   {
+//     type: 'export',
+//     name: 'Export'
+//     ...
+//     add component parameter if we were passing a component to the selected options (see below)
+//     component: 'set_supplier'
+//   },
+//   {
+//     type: 'delete',
+//     name: 'Delete',
+//     hoverColor: 'red' // default is green
+//   }
+// ]
+//
+// @on-${type}="function" should $emit the callback for the 'type' in the optionsList
+//
+// <selected-options
+//   :numberSelected="numberSelected"
+//   :optionsList="optionsList"
+//   @on-close="onCloseFunction()"
+//   @on-export="function()" @on-delete="function()"
+// >
+//   add any custom components here that you want to pass to the expanded options
+//   <template v-slot:set_supplier>
+//     <CustomSelectComponent
+//       :option-list="suppliers"
+//       @set-supplier="checkboxBulkActions('setSupplier', $event)"
+//     />
+//   </template>
+// </SelectedOptions>
+
+export const Expanded = {
+  render: (args) => ({
+    components: { SelectedOptions },
+    setup() {
+      return { args }
+    },
+    template: `
+    <SelectedOptions v-bind="args">
+      <template v-slot:set_supplier>
+        <div>supplier</div>
+      </template>
+    </SelectedOptions>
+    `,
+  }),
+  args: {
+    ...Default.args,
+    //expanded options, this will display list of actions in the middle of the screen
+    expanded: true,
+
+    //optionsList, to be displayed when expanded is false and this will be filtered based on the optionLimit
+    optionsList: [
+      {
+        type: 'export',
+        name: 'Export',
+      },
+      {
+        type: 'export_page',
+        name: 'Export Page',
+      },
+      {
+        type: 'export_all',
+        name: 'Export All',
+      },
+      {
+        type: 'export_row',
+        name: 'Export Row',
+      },
+      {
+        type: 'set_supplier',
+        name: 'Set Supplier',
+        // add component parameter if we were passing a component to the selected options
+        component: 'set_supplier',
+      },
+    ],
+
+    //duplicate of optionsList, to be displayed when expanded is true
+    expandedOptions: [
+      {
+        type: 'export',
+        name: 'Export',
+      },
+      {
+        type: 'export_page',
+        name: 'Export Page',
+      },
+      {
+        type: 'export_all',
+        name: 'Export All',
+      },
+      {
+        type: 'export_row',
+        name: 'Export Row',
+      },
+      {
+        type: 'set_supplier',
+        name: 'Set Supplier',
+        // add component parameter if we were passing a component to the selected options
+        component: 'set_supplier',
+      },
+    ],
+  },
+}