vueless 0.0.10 → 0.0.12

package/ui.data-table/index.stories.js

@@ -0,0 +1,261 @@
+import { getArgTypes, getSlotNames } from "../service.storybook";
+import { getRandomId } from "../service.ui";
+
+import UTable from "../ui.data-table";
+import UTableCell from "../ui.data-table-cell";
+import UButton from "../ui.button";
+import ULink from "../ui.button-link";
+import UMoney from "../ui.text-money";
+import UBadge from "../ui.text-badge";
+
+export default {
+  id: "7010",
+  title: "Data / Table",
+  component: UTable,
+  argTypes: {
+    ...getArgTypes(UTable.name),
+    itemsRow: {
+      description:
+        "The row of the table. It's not a prop (it created for ease of work with storybook).",
+    },
+    numberOfRow: {
+      description:
+        "The number of table rows. It's not a prop (it created for ease of work with storybook).",
+    },
+  },
+  args: {
+    columns: [
+      { key: "key_1", label: "title 1", thClass: "w-2/5" },
+      { key: "key_2", label: "title 2" },
+      { key: "key_3", label: "title 3" },
+      { key: "key_4", label: "title 4" },
+    ],
+    itemsRow: {
+      id: getRandomId(),
+      isChecked: false,
+      key_1: {
+        primaryRow: "primaryRow",
+        secondaryRow: "secondaryRow",
+      },
+      key_2: {
+        primaryRow: "primaryRow",
+        secondaryRow: "secondaryRow",
+      },
+      key_3: {
+        primaryRow: "primaryRow",
+        secondaryRow: "secondaryRow",
+      },
+      key_4: {
+        primaryRow: "primaryRow",
+        secondaryRow: "secondaryRow",
+      },
+    },
+    numberOfRow: 5,
+  },
+};
+
+const DefaultTemplate = (args) => ({
+  components: { UTable },
+  setup() {
+    const slots = getSlotNames(UTable.name);
+
+    return { args, slots };
+  },
+  template: `
+    <UTable
+      v-bind="args"
+      :rows="itemsData"
+    >
+    </UTable>
+  `,
+  computed: {
+    itemsData() {
+      const rows = [];
+
+      for (let i = 0; i < args.numberOfRow; i++) rows.push(args.itemsRow);
+
+      return rows;
+    },
+  },
+});
+
+const SlotTemplate = (args) => ({
+  components: { UTable, UButton, UTableCell, ULink, UMoney, UBadge },
+  setup() {
+    return { args };
+  },
+  template: `
+    <UTable
+      v-bind="args"
+      :rows="itemsData"
+    >
+      ${args.slotTemplate}
+    </UTable>
+  `,
+  computed: {
+    itemsData() {
+      const rows = [];
+
+      for (let i = 0; i < args.numberOfRow; i++) rows.push(args.itemsRow);
+
+      return rows;
+    },
+  },
+});
+
+// TODO: Find how to interrupt styles inside a component for UMoney.
+export const Default = DefaultTemplate.bind({});
+Default.args = {};
+
+export const defaultCells = SlotTemplate.bind({});
+defaultCells.args = {
+  columns: [
+    { key: "link", label: "link" },
+    { key: "money", label: "money", thClass: "text-right" },
+    { key: "email", label: "email" },
+    { key: "tags", label: "tags" },
+  ],
+  itemsRow: {
+    link: "some link",
+    money: {
+      sum: 10,
+      currencySymbol: "$",
+    },
+    email: "some@email.ua",
+    tags: {
+      tags: { label: "some tag" },
+      variant: "orange",
+    },
+  },
+
+  slotTemplate: `
+    <template #cell-link="{ value }">
+      <ULink :url="value" size="value" :label="value" />
+    </template>
+
+    <template #cell-money="{ value }">
+      <UMoney :sum="value.sum" :symbol="value.currencySymbol" />
+    </template>
+
+    <template #cell-email="{ value }">
+      <ULink :label="value" :url="value" type="email" size="sm" />
+    </template>
+
+    <template #cell-tags="{ value }">
+      <div>
+        <UBadge
+          v-for="item in value.tags"
+          :key="item"
+          :label="item"
+          :color="value.variant"
+        />
+      </div>
+    </template>
+  `,
+};
+
+export const selectable = DefaultTemplate.bind({});
+selectable.args = { selectable: true };
+
+// TODO: Don't work fixed footer. Find how to fix it.
+export const fixedFooter = SlotTemplate.bind({});
+fixedFooter.args = {
+  fixedFooter: true,
+  selectable: true,
+  slotTemplate: `
+    <template #tfoot>
+      <UTableCell>
+        <p>
+          🤘🤘🤘
+          Lorem ipsum dolor sit amet.
+        </p>
+      </UTableCell>
+    </template>
+  `,
+};
+
+export const stickyHeader = DefaultTemplate.bind({});
+stickyHeader.args = { stickyHeader: true };
+
+export const compact = DefaultTemplate.bind({});
+compact.args = { compact: true };
+
+export const slotDefault = SlotTemplate.bind({});
+slotDefault.args = {
+  slotTemplate: `
+    <template #cell-key_3="{value}">
+      🤘🤘🤘
+    </template>
+  `,
+};
+
+export const slotTheadActions = SlotTemplate.bind({});
+slotTheadActions.args = {
+  selectable: true,
+  slotTemplate: `
+    <template #thead-actions>
+      <p>
+        🤘🤘🤘
+        Lorem ipsum dolor sit amet.
+      </p>
+
+      <UButton
+        size="sm"
+        variant="thirdary"
+        filled
+        label="some button"
+      />
+
+      <UButton
+        size="sm"
+        variant="thirdary"
+        filled
+        label="some button"
+      />
+    </template>
+  `,
+};
+
+export const slotBeforeFirstRow = SlotTemplate.bind({});
+slotBeforeFirstRow.args = {
+  slotTemplate: `
+    <template #before-first-row>
+      <p>
+        🤘🤘🤘
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+        sed do eiusmod tempor incididunt ut labore et dolore magna
+        aliqua.
+      </p>
+    </template>
+  `,
+};
+
+export const slotAfterLastRow = SlotTemplate.bind({});
+slotAfterLastRow.args = {
+  slotTemplate: `
+    <template #after-last-row>
+      <p>
+        🤘🤘🤘
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+        sed do eiusmod tempor incididunt ut labore et dolore magna
+        aliqua.
+      </p>
+    </template>
+  `,
+};
+
+export const slotTfoot = SlotTemplate.bind({});
+slotTfoot.args = {
+  slotTemplate: `
+    <template #tfoot>
+      <UTableCell>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+          sed do eiusmod tempor incididunt ut labore et dolore magna
+          aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+          ullamco laboris nisi ut aliquip ex ea commodo consequat.
+        </p>
+      </UTableCell>
+    </template>
+  `,
+};