sprintify-ui 0.4.5 → 0.4.7

package/src/components/BaseDataTable.stories.js

@@ -1,227 +1,227 @@
-import BaseDataTable from './BaseDataTable.vue';
-import BaseTableColumn from './BaseTableColumn.vue';
-import BaseBoolean from './BaseBoolean.vue';
-import BaseSelect from './BaseSelect.vue';
-import BaseBadge from './BaseBadge.vue';
-import BaseAppNotifications from './BaseAppNotifications.vue';
-import BaseAppDialogs from './BaseAppDialogs.vue';
-import { onBeforeUnmount } from 'vue';
-import { DateTime } from 'luxon';
-import { templateDataTable } from '../../.storybook/utils';
-
-export default {
-  title: 'Data/BaseDataTable',
-  component: BaseDataTable,
-  argTypes: {
-    layout: {
-      control: { type: 'select' },
-      options: ['default', 'compact'],
-    },
-    size: {
-      control: { type: 'select' },
-      options: ['sm', 'md'],
-    }
-  },
-  args: {
-    url: 'https://effettandem.com/api/content/articles',
-    urlQuery: {
-      per_page: 10,
-    },
-    historyMode: false,
-  },
-};
-
-const templateComponents = {
-  BaseDataTable,
-  BaseTableColumn,
-  BaseBoolean,
-  BaseSelect,
-  BaseBadge,
-  BaseAppNotifications,
-  BaseAppDialogs,
-};
-
-const template = `
-<div class="font-mono text-sm bg-black px-2 py-1 rounded text-white">Last fetch: {{ lastFetch?.getTime() }} (should update on each fetch)</div>
-<br/>
-${templateDataTable}
-<BaseAppNotifications></BaseAppNotifications>
-<BaseAppDialogs></BaseAppDialogs>
-`;
-
-const templateSetup = (args) => {
-  function onCellClick() {
-    alert('cell click!');
-  }
-
-  const lastFetch = ref(null);
-
-  function onFetch() {
-    lastFetch.value = new Date();
-  }
-
-  return { args, onCellClick, ownerIsVisible: true, onFetch, lastFetch, DateTime };
-};
-
-const Template = (args) => ({
-  components: templateComponents,
-  setup() {
-    return templateSetup(args);
-  },
-  template: template,
-});
-
-export const Demo = Template.bind({});
-
-Demo.args = {
-  showUrl() {
-    return '/';
-  },
-  editUrl() {
-    return '/';
-  },
-  deleteUrl() {
-    return '/';
-  },
-  detailed: true,
-  searchable: true,
-  maxHeight: 300,
-  checkable: true,
-  actions: [
-    {
-      label: 'Open Google',
-      icon: 'heroicons:link-20-solid',
-      href: 'https://google.com',
-    },
-    {
-      label: 'Export',
-      icon: 'heroicons:arrow-down-tray',
-      action: () => alert('export!'),
-    },
-    { line: true },
-    {
-      label: 'Delete all',
-      icon: 'heroicons:trash',
-      action: () => alert('Delete All!'),
-      color: 'danger',
-    },
-  ],
-  checkableActions: [
-    {
-      label: 'Delete all',
-      action: () => {
-        alert('delete!');
-      },
-    },
-  ],
-  rowActions: [
-    {
-      label: 'Open Google',
-      icon: 'heroicons:link',
-      action() {
-        alert('hit');
-      },
-    },
-  ],
-  sections: [
-    {
-      name: 'test',
-      title: 'Section Test',
-      icon: 'heroicons:link',
-      closeText: 'Close',
-    },
-  ],
-};
-
-export const Small = Template.bind({});
-Small.args = {
-  editUrl() {
-    return '/';
-  },
-  deleteUrl() {
-    return '/';
-  },
-  size: 'sm',
-  searchable: true,
-  toggleable: true,
-  actions: [],
-};
-
-
-const VIfOnBaseTableColumn = (args) => ({
-  components: templateComponents,
-  setup() {
-    const ownerIsVisible = ref(true);
-
-    const intervalId = setInterval(() => {
-      ownerIsVisible.value = !ownerIsVisible.value;
-    }, 2000);
-
-    onBeforeUnmount(() => {
-      clearInterval(intervalId);
-    });
-
-    return Object.assign(templateSetup(args), { ownerIsVisible });
-  },
-  template: template,
-});
-
-export const VisibleColumns = VIfOnBaseTableColumn.bind({});
-
-const SimpleTemplate = (args) => ({
-  components: {
-    BaseDataTable,
-    BaseTableColumn,
-    BaseBoolean,
-  },
-  setup() {
-    return { args };
-  },
-  template: `
-  <BaseDataTable v-bind="args">
-    <BaseTableColumn
-      v-slot="{ row }"
-      label="Titre"
-      sortable
-      field="title->en"
-      :toggle="false"
-    >
-      <div class="max-w-sm">
-        <div class="font-medium text-slate-900">
-          {{ row.title }}
-        </div>
-        <p class="text-xs leading-tight text-slate-500">
-          {{ row.subtitle }}
-        </p>
-      </div>
-    </BaseTableColumn>
-  
-    <BaseTableColumn
-      v-slot="{ row }"
-      label="VIP"
-      field="access_level"
-      sortable
-    >
-      <BaseBoolean :model-value="row.access_level == 'vip'" />
-    </BaseTableColumn>
-  
-    <BaseTableColumn
-      v-slot="{ row }"
-      label="Vote"
-      field="votes_avg_score"
-      sortable
-    >
-      <div class="">
-        {{ Math.round(row.votes_avg_score) }} / 5
-      </div>
-    </BaseTableColumn>
-  </BaseDataTable>
-  `,
-});
-
-export const Simple = SimpleTemplate.bind({});
-Simple.args = {
-  searchable: false,
-  toggleable: false,
-  actions: [],
+import BaseDataTable from './BaseDataTable.vue';
+import BaseTableColumn from './BaseTableColumn.vue';
+import BaseBoolean from './BaseBoolean.vue';
+import BaseSelect from './BaseSelect.vue';
+import BaseBadge from './BaseBadge.vue';
+import BaseAppNotifications from './BaseAppNotifications.vue';
+import BaseAppDialogs from './BaseAppDialogs.vue';
+import { onBeforeUnmount } from 'vue';
+import { DateTime } from 'luxon';
+import { templateDataTable } from '../../.storybook/utils';
+
+export default {
+  title: 'Data/BaseDataTable',
+  component: BaseDataTable,
+  argTypes: {
+    layout: {
+      control: { type: 'select' },
+      options: ['default', 'compact'],
+    },
+    size: {
+      control: { type: 'select' },
+      options: ['sm', 'md'],
+    }
+  },
+  args: {
+    url: 'https://effettandem.com/api/content/articles',
+    urlQuery: {
+      per_page: 10,
+    },
+    historyMode: false,
+  },
+};
+
+const templateComponents = {
+  BaseDataTable,
+  BaseTableColumn,
+  BaseBoolean,
+  BaseSelect,
+  BaseBadge,
+  BaseAppNotifications,
+  BaseAppDialogs,
+};
+
+const template = `
+<div class="font-mono text-sm bg-black px-2 py-1 rounded text-white">Last fetch: {{ lastFetch?.getTime() }} (should update on each fetch)</div>
+<br/>
+${templateDataTable}
+<BaseAppNotifications></BaseAppNotifications>
+<BaseAppDialogs></BaseAppDialogs>
+`;
+
+const templateSetup = (args) => {
+  function onCellClick() {
+    alert('cell click!');
+  }
+
+  const lastFetch = ref(null);
+
+  function onFetch() {
+    lastFetch.value = new Date();
+  }
+
+  return { args, onCellClick, ownerIsVisible: true, onFetch, lastFetch, DateTime };
+};
+
+const Template = (args) => ({
+  components: templateComponents,
+  setup() {
+    return templateSetup(args);
+  },
+  template: template,
+});
+
+export const Demo = Template.bind({});
+
+Demo.args = {
+  showUrl() {
+    return '/';
+  },
+  editUrl() {
+    return '/';
+  },
+  deleteUrl() {
+    return '/';
+  },
+  detailed: true,
+  searchable: true,
+  maxHeight: 300,
+  checkable: true,
+  actions: [
+    {
+      label: 'Open Google',
+      icon: 'heroicons:link-20-solid',
+      href: 'https://google.com',
+    },
+    {
+      label: 'Export',
+      icon: 'heroicons:arrow-down-tray',
+      action: () => alert('export!'),
+    },
+    { line: true },
+    {
+      label: 'Delete all',
+      icon: 'heroicons:trash',
+      action: () => alert('Delete All!'),
+      color: 'danger',
+    },
+  ],
+  checkableActions: [
+    {
+      label: 'Delete all',
+      action: () => {
+        alert('delete!');
+      },
+    },
+  ],
+  rowActions: [
+    {
+      label: 'Open Google',
+      icon: 'heroicons:link',
+      action() {
+        alert('hit');
+      },
+    },
+  ],
+  sections: [
+    {
+      name: 'test',
+      title: 'Section Test',
+      icon: 'heroicons:link',
+      closeText: 'Close',
+    },
+  ],
+};
+
+export const Small = Template.bind({});
+Small.args = {
+  editUrl() {
+    return '/';
+  },
+  deleteUrl() {
+    return '/';
+  },
+  size: 'sm',
+  searchable: true,
+  toggleable: true,
+  actions: [],
+};
+
+
+const VIfOnBaseTableColumn = (args) => ({
+  components: templateComponents,
+  setup() {
+    const ownerIsVisible = ref(true);
+
+    const intervalId = setInterval(() => {
+      ownerIsVisible.value = !ownerIsVisible.value;
+    }, 2000);
+
+    onBeforeUnmount(() => {
+      clearInterval(intervalId);
+    });
+
+    return Object.assign(templateSetup(args), { ownerIsVisible });
+  },
+  template: template,
+});
+
+export const VisibleColumns = VIfOnBaseTableColumn.bind({});
+
+const SimpleTemplate = (args) => ({
+  components: {
+    BaseDataTable,
+    BaseTableColumn,
+    BaseBoolean,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+  <BaseDataTable v-bind="args">
+    <BaseTableColumn
+      v-slot="{ row }"
+      label="Titre"
+      sortable
+      field="title->en"
+      :toggle="false"
+    >
+      <div class="max-w-sm">
+        <div class="font-medium text-slate-900">
+          {{ row.title }}
+        </div>
+        <p class="text-xs leading-tight text-slate-500">
+          {{ row.subtitle }}
+        </p>
+      </div>
+    </BaseTableColumn>
+  
+    <BaseTableColumn
+      v-slot="{ row }"
+      label="VIP"
+      field="access_level"
+      sortable
+    >
+      <BaseBoolean :model-value="row.access_level == 'vip'" />
+    </BaseTableColumn>
+  
+    <BaseTableColumn
+      v-slot="{ row }"
+      label="Vote"
+      field="votes_avg_score"
+      sortable
+    >
+      <div class="">
+        {{ Math.round(row.votes_avg_score) }} / 5
+      </div>
+    </BaseTableColumn>
+  </BaseDataTable>
+  `,
+});
+
+export const Simple = SimpleTemplate.bind({});
+Simple.args = {
+  searchable: false,
+  toggleable: false,
+  actions: [],
 };