sprintify-ui 0.6.53 → 0.6.55

package/src/components/BaseTable.stories.js

@@ -0,0 +1,108 @@
+import BaseTable from './BaseTable.vue';
+import BaseTableHead from './BaseTableHead.vue';
+import BaseTableBody from './BaseTableBody.vue';
+import BaseTableRow from './BaseTableRow.vue';
+import BaseTableCell from './BaseTableCell.vue';
+import BaseTableHeader from './BaseTableHeader.vue';
+import BaseBadge from './BaseBadge.vue';
+import { options } from '../../.storybook/utils';
+
+export default {
+  title: 'Data/BaseTable',
+  component: BaseTable,
+  args: {},
+  argTypes: {
+    spacing: {
+      control: {
+        type: 'select',
+      },
+      options: ['none', 'sm', 'md', 'lg'],
+    },
+  },
+};
+
+const headTemplate = `<BaseTableHead>
+<BaseTableRow>
+  <BaseTableHeader>Label</BaseTableHeader>
+  <BaseTableHeader>ID</BaseTableHeader>
+  <BaseTableHeader>Type</BaseTableHeader>
+</BaseTableRow>
+</BaseTableHead>`;
+
+const cellsTemplate = `<BaseTableCell class="font-medium">
+{{ option.label }}
+</BaseTableCell>
+<BaseTableCell>
+<BaseBadge class="font-mono">
+  {{ option.value ?? 'N/A' }}
+</BaseBadge>
+</BaseTableCell>
+<BaseTableCell>
+{{ option.type ?? 'N/A' }}
+</BaseTableCell>
+`;
+
+const components = {
+  BaseTable,
+  BaseTableHead,
+  BaseTableBody,
+  BaseTableRow,
+  BaseTableCell,
+  BaseTableHeader,
+  BaseBadge,
+};
+
+
+const Template = (args) => ({
+  components: components,
+  setup() {
+    return { args, options };
+  },
+  template: `
+  <div class="p-6">
+    <BaseTable class="" v-bind="args">
+      ${headTemplate}
+      <BaseTableBody>
+        <BaseTableRow 
+          v-for="option in options" 
+          :key="option.value"
+          :href="'https://www.google.com/search?q=' + option.label"
+          target="_blank"
+        >
+          ${cellsTemplate}
+        </BaseTableRow>
+      </BaseTableBody>
+    </BaseTable>
+  </div>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};
+
+const TemplateRouterLink = (args) => ({
+  components: components,
+  setup() {
+    return { args, options };
+  },
+  template: `
+  <div class="p-6">
+    <BaseTable class="" v-bind="args">
+      ${headTemplate}
+      <BaseTableBody>
+        <BaseTableRow 
+          v-for="option in options" 
+          :key="option.value"
+          :to="'/articles/' + option.value"
+          target="_blank"
+          :title="option.label"
+        >
+          ${cellsTemplate}
+        </BaseTableRow>
+      </BaseTableBody>
+    </BaseTable>
+  </div>`,
+});
+
+export const RouterLink = TemplateRouterLink.bind({});
+RouterLink.args = {};