sprintify-ui 0.10.63 → 0.10.65

package/src/components/BaseDataTable.stories.js

@@ -1,393 +1,393 @@
-import BaseDataTable from "./BaseDataTable.vue";
-import BaseTableColumn from "./BaseTableColumn.vue";
-import BaseBoolean from "./BaseBoolean.vue";
-import BaseSelect from "./BaseSelect.vue";
-import BaseInput from "./BaseInput.vue";
-import BaseBadge from "./BaseBadge.vue";
-import BaseAppSnackbars from "./BaseAppSnackbars.vue";
-import BaseAppDialogs from "./BaseAppDialogs.vue";
-import { computed, onBeforeUnmount } from "vue";
-import { DateTime } from "luxon";
-import { optionsLarge, templateDataTable } from "../../.storybook/utils";
-import { cloneDeep } from "lodash";
-
-export default {
-  title: "Data/BaseDataTable",
-  component: BaseDataTable,
-  argTypes: {
-    layout: {
-      control: { type: "select" },
-      options: ["default", "compact"],
-    },
-    size: {
-      control: { type: "select" },
-      options: ["sm", "md"],
-    },
-    filtersPosition: {
-      control: { type: "select" },
-      options: ["top", "section"],
-    },
-  },
-  args: {
-    url: "https://effettandem.com/api/content/articles",
-    urlQuery: {
-      per_page: 32,
-    },
-    historyMode: false,
-  },
-};
-
-const templateComponents = {
-  BaseDataTable,
-  BaseTableColumn,
-  BaseBoolean,
-  BaseSelect,
-  BaseBadge,
-  BaseAppSnackbars,
-  BaseAppDialogs,
-  BaseInput,
-};
-
-const componentProps = {
-  rowTo(row) {
-    return `/articles/${row.id}`;
-  },
-  editUrl() {
-    return "/";
-  },
-  deleteUrl() {
-    return "/";
-  },
-  rowSelected(row) {
-    if (!row) {
-      return false;
-    }
-    if (!row.id) {
-      return false;
-    }
-    if (typeof row.id !== "string") {
-      return false;
-    }
-    return row.id.includes('9b7e6');
-  },
-  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!"),
-    },
-    { meta: { line: true } },
-    {
-      label: "Delete all",
-      icon: "heroicons:trash",
-      action: () => alert("Delete All!"),
-      color: "danger",
-    },
-  ],
-  checkableActions: [
-    {
-      label: "Close",
-      icon: "mdi:check",
-      color: 'primary',
-      action: () => {
-        alert("Close!");
-      },
-    },
-    {
-      label: "Duplicate",
-      icon: "mdi:content-copy",
-      action: () => {
-        alert("Duplicate!");
-      },
-    },
-    {
-      label: "Edit",
-      icon: "mdi:pencil",
-      action: () => {
-        alert("Edit!");
-      },
-    },
-    {
-      label: "Delete",
-      color: 'danger',
-      icon: "mdi:trash-can",
-      action: () => {
-        alert("Delete!");
-      },
-    },
-  ],
-  rowActions: [
-    {
-      label: "Href",
-      icon: "heroicons:link-20-solid",
-      href: () => "https://google.com",
-    },
-    {
-      label: "Action",
-      icon: "heroicons:arrow-right-20-solid",
-      action() {
-        alert("hit");
-      },
-    },
-  ],
-  sections: [
-    {
-      name: "test",
-      title: "Section Test",
-      icon: "heroicons:link",
-      closeText: "Close",
-    },
-  ],
-};
-
-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}
-<BaseAppSnackbars></BaseAppSnackbars>
-<BaseAppDialogs></BaseAppDialogs>
-`;
-
-const templateSetup = (args) => {
-  function onRowClick(...args) {
-    console.log("Row clicked!");
-    console.log(JSON.parse(JSON.stringify(args)));
-  }
-
-  const lastFetch = ref(null);
-
-  function onFetch() {
-    lastFetch.value = new Date();
-  }
-
-  return {
-    args,
-    onRowClick,
-    ownerIsVisible: true,
-    onFetch,
-    lastFetch,
-    DateTime,
-  };
-};
-
-const Template = (args) => ({
-  components: templateComponents,
-  setup() {
-    return templateSetup(args);
-  },
-  template: template,
-});
-
-export const Demo = Template.bind({});
-Demo.args = componentProps;
-
-export const Small = Template.bind({});
-Small.args = {
-  size: "sm",
-};
-
-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: [],
-};
-
-const LocalTemplate = (args) => ({
-  components: templateComponents,
-  setup() {
-    const baseDataTableRef = ref(null);
-
-    const onCellClick = (...args) => {
-      alert("Cell clicked! View console log for details.");
-      console.log(JSON.parse(JSON.stringify(args)));
-    };
-
-    const filteredItems = computed(() => {
-      return optionsLarge.filter((item) => {
-        const type = baseDataTableRef.value?.query.filter?.type ?? "";
-
-        if (!type) {
-          return true;
-        }
-
-        return item.type === type;
-      });
-    });
-
-    return { args, filteredItems, baseDataTableRef, onCellClick };
-  },
-  template: `<BaseDataTable ref="baseDataTableRef" v-bind="args" :items="filteredItems">
-  <BaseTableColumn
-    v-slot="{ row }"
-    label="Label"
-    sortable
-    field="label"
-    :toggle="false"
-    align="right"
-  >
-    <div class="max-w-sm">
-      <div class="font-medium text-slate-900">
-        {{ row.label }}
-      </div>
-      <p class="text-xs leading-tight text-slate-500">
-        {{ row.value ?? '-' }}
-      </p>
-    </div>
-  </BaseTableColumn>
-
-  <BaseTableColumn
-    v-slot="{ row }"
-    label="Size"
-    field="size"
-    sortable
-    numeric
-    align="right"
-  >
-    <p>{{ row.size }}</p>
-  </BaseTableColumn>
-
-  <BaseTableColumn
-    v-slot="{ row }"
-    label="Value"
-    field="value"
-    :toggle="true"
-    :toggle-default="false"
-    sortable
-    customKey="value"
-  >
-    <p>{{ row.value }}</p>
-  </BaseTableColumn>
-
-  <BaseTableColumn
-    v-slot="{ row }"
-    label="Type"
-    field="type"
-    sortable
-    @click="onCellClick"
-  >
-    <p>{{ row.type }}</p>
-  </BaseTableColumn>
-
-  <template #filters="{ query, updateQueryValue }">
-    <div class="space-y-3">
-      <div>
-        <p class="mb-1 text-sm">
-          Type
-        </p>
-        <BaseSelect
-          :model-value="query.filter.type ?? null"
-          class="w-full rounded border-slate-300"
-          placeholder="-"
-          @update:model-value="updateQueryValue('filter.type', $event)"
-        >
-          <option value="jedi">
-            Jedi
-          </option>
-          <option value="sith">
-            Sith
-          </option>
-        </BaseSelect>
-      </div>
-    </div>
-  </template>
-</BaseDataTable>`,
-});
-
-export const Local = LocalTemplate.bind({});
-const localProps = cloneDeep(componentProps);
-localProps.url = null;
-localProps.perPage = 10;
-localProps.rowTo = undefined;
-localProps.maxHeight = undefined;
-localProps.rowKey = (row) => row.value;
-Local.args = localProps;
-
-export const VirtualScrolling = LocalTemplate.bind({});
-const localProps2 = cloneDeep(componentProps);
-localProps2.url = null;
-localProps2.rowTo = undefined;
-localProps2.maxHeight = undefined;
-localProps2.rowKey = (row) => row.value;
-localProps2.virtualScrolling = true;
-VirtualScrolling.args = localProps2;
+import BaseDataTable from "./BaseDataTable.vue";
+import BaseTableColumn from "./BaseTableColumn.vue";
+import BaseBoolean from "./BaseBoolean.vue";
+import BaseSelect from "./BaseSelect.vue";
+import BaseInput from "./BaseInput.vue";
+import BaseBadge from "./BaseBadge.vue";
+import BaseAppSnackbars from "./BaseAppSnackbars.vue";
+import BaseAppDialogs from "./BaseAppDialogs.vue";
+import { computed, onBeforeUnmount } from "vue";
+import { DateTime } from "luxon";
+import { optionsLarge, templateDataTable } from "../../.storybook/utils";
+import { cloneDeep } from "lodash";
+
+export default {
+  title: "Data/BaseDataTable",
+  component: BaseDataTable,
+  argTypes: {
+    layout: {
+      control: { type: "select" },
+      options: ["default", "compact"],
+    },
+    size: {
+      control: { type: "select" },
+      options: ["sm", "md"],
+    },
+    filtersPosition: {
+      control: { type: "select" },
+      options: ["top", "section"],
+    },
+  },
+  args: {
+    url: "https://effettandem.com/api/content/articles",
+    urlQuery: {
+      per_page: 32,
+    },
+    historyMode: false,
+  },
+};
+
+const templateComponents = {
+  BaseDataTable,
+  BaseTableColumn,
+  BaseBoolean,
+  BaseSelect,
+  BaseBadge,
+  BaseAppSnackbars,
+  BaseAppDialogs,
+  BaseInput,
+};
+
+const componentProps = {
+  rowTo(row) {
+    return `/articles/${row.id}`;
+  },
+  editUrl() {
+    return "/";
+  },
+  deleteUrl() {
+    return "/";
+  },
+  rowSelected(row) {
+    if (!row) {
+      return false;
+    }
+    if (!row.id) {
+      return false;
+    }
+    if (typeof row.id !== "string") {
+      return false;
+    }
+    return row.id.includes('9b7e6');
+  },
+  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!"),
+    },
+    { meta: { line: true } },
+    {
+      label: "Delete all",
+      icon: "heroicons:trash",
+      action: () => alert("Delete All!"),
+      color: "danger",
+    },
+  ],
+  checkableActions: [
+    {
+      label: "Close",
+      icon: "mdi:check",
+      color: 'primary',
+      action: () => {
+        alert("Close!");
+      },
+    },
+    {
+      label: "Duplicate",
+      icon: "mdi:content-copy",
+      action: () => {
+        alert("Duplicate!");
+      },
+    },
+    {
+      label: "Edit",
+      icon: "mdi:pencil",
+      action: () => {
+        alert("Edit!");
+      },
+    },
+    {
+      label: "Delete",
+      color: 'danger',
+      icon: "mdi:trash-can",
+      action: () => {
+        alert("Delete!");
+      },
+    },
+  ],
+  rowActions: [
+    {
+      label: "Href",
+      icon: "heroicons:link-20-solid",
+      href: () => "https://google.com",
+    },
+    {
+      label: "Action",
+      icon: "heroicons:arrow-right-20-solid",
+      action() {
+        alert("hit");
+      },
+    },
+  ],
+  sections: [
+    {
+      name: "test",
+      title: "Section Test",
+      icon: "heroicons:link",
+      closeText: "Close",
+    },
+  ],
+};
+
+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}
+<BaseAppSnackbars></BaseAppSnackbars>
+<BaseAppDialogs></BaseAppDialogs>
+`;
+
+const templateSetup = (args) => {
+  function onRowClick(...args) {
+    console.log("Row clicked!");
+    console.log(JSON.parse(JSON.stringify(args)));
+  }
+
+  const lastFetch = ref(null);
+
+  function onFetch() {
+    lastFetch.value = new Date();
+  }
+
+  return {
+    args,
+    onRowClick,
+    ownerIsVisible: true,
+    onFetch,
+    lastFetch,
+    DateTime,
+  };
+};
+
+const Template = (args) => ({
+  components: templateComponents,
+  setup() {
+    return templateSetup(args);
+  },
+  template: template,
+});
+
+export const Demo = Template.bind({});
+Demo.args = componentProps;
+
+export const Small = Template.bind({});
+Small.args = {
+  size: "sm",
+};
+
+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: [],
+};
+
+const LocalTemplate = (args) => ({
+  components: templateComponents,
+  setup() {
+    const baseDataTableRef = ref(null);
+
+    const onCellClick = (...args) => {
+      alert("Cell clicked! View console log for details.");
+      console.log(JSON.parse(JSON.stringify(args)));
+    };
+
+    const filteredItems = computed(() => {
+      return optionsLarge.filter((item) => {
+        const type = baseDataTableRef.value?.query.filter?.type ?? "";
+
+        if (!type) {
+          return true;
+        }
+
+        return item.type === type;
+      });
+    });
+
+    return { args, filteredItems, baseDataTableRef, onCellClick };
+  },
+  template: `<BaseDataTable ref="baseDataTableRef" v-bind="args" :items="filteredItems">
+  <BaseTableColumn
+    v-slot="{ row }"
+    label="Label"
+    sortable
+    field="label"
+    :toggle="false"
+    align="right"
+  >
+    <div class="max-w-sm">
+      <div class="font-medium text-slate-900">
+        {{ row.label }}
+      </div>
+      <p class="text-xs leading-tight text-slate-500">
+        {{ row.value ?? '-' }}
+      </p>
+    </div>
+  </BaseTableColumn>
+
+  <BaseTableColumn
+    v-slot="{ row }"
+    label="Size"
+    field="size"
+    sortable
+    numeric
+    align="right"
+  >
+    <p>{{ row.size }}</p>
+  </BaseTableColumn>
+
+  <BaseTableColumn
+    v-slot="{ row }"
+    label="Value"
+    field="value"
+    :toggle="true"
+    :toggle-default="false"
+    sortable
+    customKey="value"
+  >
+    <p>{{ row.value }}</p>
+  </BaseTableColumn>
+
+  <BaseTableColumn
+    v-slot="{ row }"
+    label="Type"
+    field="type"
+    sortable
+    @click="onCellClick"
+  >
+    <p>{{ row.type }}</p>
+  </BaseTableColumn>
+
+  <template #filters="{ query, updateQueryValue }">
+    <div class="space-y-3">
+      <div>
+        <p class="mb-1 text-sm">
+          Type
+        </p>
+        <BaseSelect
+          :model-value="query.filter.type ?? null"
+          class="w-full rounded border-slate-300"
+          placeholder="-"
+          @update:model-value="updateQueryValue('filter.type', $event)"
+        >
+          <option value="jedi">
+            Jedi
+          </option>
+          <option value="sith">
+            Sith
+          </option>
+        </BaseSelect>
+      </div>
+    </div>
+  </template>
+</BaseDataTable>`,
+});
+
+export const Local = LocalTemplate.bind({});
+const localProps = cloneDeep(componentProps);
+localProps.url = null;
+localProps.perPage = 10;
+localProps.rowTo = undefined;
+localProps.maxHeight = undefined;
+localProps.rowKey = (row) => row.value;
+Local.args = localProps;
+
+export const VirtualScrolling = LocalTemplate.bind({});
+const localProps2 = cloneDeep(componentProps);
+localProps2.url = null;
+localProps2.rowTo = undefined;
+localProps2.maxHeight = undefined;
+localProps2.rowKey = (row) => row.value;
+localProps2.virtualScrolling = true;
+VirtualScrolling.args = localProps2;