sprintify-ui 0.2.17 → 0.2.18

package/src/components/BaseDataTable.stories.js

@@ -1,341 +1,341 @@
-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';
-
-export default {
-  title: 'Data/BaseDataTable',
-  component: BaseDataTable,
-  argTypes: {
-    layout: {
-      control: {
-        type: 'select',
-        options: ['default', 'compact'],
-      },
-    },
-  },
-  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>Last fetch: {{ lastFetch?.getTime() }} (should update on each fetch)</div>
-<br/>
-<BaseDataTable v-bind="args" @cell-click="onCellClick" @fetch="onFetch">
-  <BaseTableColumn
-    v-slot="{ row }"
-    label="Titre"
-    sortable
-    field="title->en"
-    :toggle="false"
-  >
-    <div class="max-w-[200px]">
-      <div class="font-medium text-slate-900 leading-tight truncate">
-        {{ row.title }}
-      </div>
-      <p class="text-xs leading-tight mt-1 text-slate-500 line-clamp-2">
-        {{ 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
-    custom-key="votes_avg_score"
-    :toggle="true"
-    :toggle-default="false"
-  >
-    <div class="whitespace-pre">
-      {{ Math.round(row.votes_avg_score) }} / 5
-    </div>
-  </BaseTableColumn>
-
-  <BaseTableColumn
-    v-slot="{ row }"
-    v-if="ownerIsVisible"
-    label="Owner"
-    custom-key="owner"
-    field="owner_id"
-    :toggle="true"
-    sortable
-  >
-    <BaseBadge>
-      <span class="whitespace-pre">{{ row.owner?.name }}</span>
-    </BaseBadge>
-  </BaseTableColumn>
-
-  <BaseTableColumn
-    v-slot="{ row }"
-    label="Select"
-    :clickable="false"
-    padding="0px"
-  >
-    <select class="select border border-slate-300 rounded text-xs">
-      <option>Option 1</option>
-    </select>
-  </BaseTableColumn>
-
-  <BaseTableColumn
-    v-slot="{ row }"
-    label="Access level"
-    field="access_level"
-    sortable
-  >
-    <BaseBadge>
-      {{ row.access_level }}
-    </BaseBadge>
-  </BaseTableColumn>
-
-  <template #detail="{ row }">
-    <div class="p-4 text-sm">
-      <p>ID : {{ row.id }}</p>
-      <p>Created at : {{ row.created_at }}</p>
-    </div>
-  </template>
-
-  <template #test>
-    <div>
-      Section Test
-    </div>
-  </template>
-
-  <template #filters="{ query, updateQueryValue }">
-    <div class="space-y-3">
-      <div>
-        <p class="mb-1 text-sm">
-          Type
-        </p>
-        <BaseSelect
-          :model-value="query.type ?? null"
-          class="w-full rounded border-slate-300 text-base sm:text-sm"
-          placeholder="-"
-          @update:model-value="updateQueryValue('type', $event)"
-        >
-          <option value="video">
-            Video
-          </option>
-          <option value="article">
-            Article
-          </option>
-        </BaseSelect>
-      </div>
-      <div>
-        <p class="mb-1 text-sm">
-          Access Level
-        </p>
-        <BaseSelect
-          :model-value="query.access_level ?? null"
-          class="w-full rounded border-slate-300 text-base sm:text-sm"
-          placeholder="-"
-          @update:model-value="updateQueryValue('access_level', $event)"
-        >
-          <option value="public">
-            Public
-          </option>
-          <option value="member">
-            Member
-          </option>
-          <option value="vip">
-            VIP
-          </option>
-        </BaseSelect>
-      </div>
-    </div>
-  </template>
-</BaseDataTable>
-<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 };
-};
-
-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',
-      href: 'https://google.com',
-    },
-    {
-      label: 'Export',
-      icon: 'heroicons:table-cells',
-      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',
-    },
-  ],
-};
-
-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';
+
+export default {
+  title: 'Data/BaseDataTable',
+  component: BaseDataTable,
+  argTypes: {
+    layout: {
+      control: {
+        type: 'select',
+        options: ['default', 'compact'],
+      },
+    },
+  },
+  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>Last fetch: {{ lastFetch?.getTime() }} (should update on each fetch)</div>
+<br/>
+<BaseDataTable v-bind="args" @cell-click="onCellClick" @fetch="onFetch">
+  <BaseTableColumn
+    v-slot="{ row }"
+    label="Titre"
+    sortable
+    field="title->en"
+    :toggle="false"
+  >
+    <div class="max-w-[200px]">
+      <div class="font-medium text-slate-900 leading-tight truncate">
+        {{ row.title }}
+      </div>
+      <p class="text-xs leading-tight mt-1 text-slate-500 line-clamp-2">
+        {{ 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
+    custom-key="votes_avg_score"
+    :toggle="true"
+    :toggle-default="false"
+  >
+    <div class="whitespace-pre">
+      {{ Math.round(row.votes_avg_score) }} / 5
+    </div>
+  </BaseTableColumn>
+
+  <BaseTableColumn
+    v-slot="{ row }"
+    v-if="ownerIsVisible"
+    label="Owner"
+    custom-key="owner"
+    field="owner_id"
+    :toggle="true"
+    sortable
+  >
+    <BaseBadge>
+      <span class="whitespace-pre">{{ row.owner?.name }}</span>
+    </BaseBadge>
+  </BaseTableColumn>
+
+  <BaseTableColumn
+    v-slot="{ row }"
+    label="Select"
+    :clickable="false"
+    padding="0px"
+  >
+    <select class="select border border-slate-300 rounded text-xs">
+      <option>Option 1</option>
+    </select>
+  </BaseTableColumn>
+
+  <BaseTableColumn
+    v-slot="{ row }"
+    label="Access level"
+    field="access_level"
+    sortable
+  >
+    <BaseBadge>
+      {{ row.access_level }}
+    </BaseBadge>
+  </BaseTableColumn>
+
+  <template #detail="{ row }">
+    <div class="p-4 text-sm">
+      <p>ID : {{ row.id }}</p>
+      <p>Created at : {{ row.created_at }}</p>
+    </div>
+  </template>
+
+  <template #test>
+    <div>
+      Section Test
+    </div>
+  </template>
+
+  <template #filters="{ query, updateQueryValue }">
+    <div class="space-y-3">
+      <div>
+        <p class="mb-1 text-sm">
+          Type
+        </p>
+        <BaseSelect
+          :model-value="query.type ?? null"
+          class="w-full rounded border-slate-300 text-base sm:text-sm"
+          placeholder="-"
+          @update:model-value="updateQueryValue('type', $event)"
+        >
+          <option value="video">
+            Video
+          </option>
+          <option value="article">
+            Article
+          </option>
+        </BaseSelect>
+      </div>
+      <div>
+        <p class="mb-1 text-sm">
+          Access Level
+        </p>
+        <BaseSelect
+          :model-value="query.access_level ?? null"
+          class="w-full rounded border-slate-300 text-base sm:text-sm"
+          placeholder="-"
+          @update:model-value="updateQueryValue('access_level', $event)"
+        >
+          <option value="public">
+            Public
+          </option>
+          <option value="member">
+            Member
+          </option>
+          <option value="vip">
+            VIP
+          </option>
+        </BaseSelect>
+      </div>
+    </div>
+  </template>
+</BaseDataTable>
+<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 };
+};
+
+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',
+      href: 'https://google.com',
+    },
+    {
+      label: 'Export',
+      icon: 'heroicons:table-cells',
+      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',
+    },
+  ],
+};
+
+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: [],
+};