classcard-ui 0.2.1475 → 0.2.1476

package/src/stories/CStats.stories.js

@@ -1,53 +1,53 @@
-import CStats from "../components/CStats/CStats.vue";
-import "./utils.css";
-
-export default {
-  title: "CStats",
-  component: CStats,
-  argTypes: {
-    statsCount: { control: { type: "object" } },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { CStats },
-  template: '<c-stats v-bind="$props" />',
-});
-
-export const Default = Template.bind({});
-Default.args = {
-  statsCount: [
-    {
-      label: "Invoiced",
-      totalCount: "52145",
-      number: 4,
-      icon: { name: "check", type: "solid", class: "h-5 w-5" },
-      tag: {
-        label: "+10",
-        color: "green",
-        icon: {
-          name: "arrow-down-solid-v2",
-          type: "solid",
-          class: "h-5 w-5 text-green-500",
-          viewBox: "0 0 24 24",
-        },
-      },
-      days: "Last 7 days",
-      icon: {
-        name: "information-circle",
-        type: "solid",
-        class: "h-5 w-5 shrink-0 text-gray-400 hover:text-gray-500",
-        cursorType: "cursor-pointer",
-      },
-      toolTip: {
-        showToolTip: true,
-        text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
-        classes: "bottom-6",
-      },
-    },
-    { label: "Partially paid", totalCount: "66145", number: 2 },
-    { label: "Paid", totalCount: "88845", number: 4 },
-    // { label: "Overdue", totalCount: "$14545", number: 2 },
-  ],
-};
+import CStats from "../components/CStats/CStats.vue";
+import "./utils.css";
+
+export default {
+  title: "CStats",
+  component: CStats,
+  argTypes: {
+    statsCount: { control: { type: "object" } },
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { CStats },
+  template: '<c-stats v-bind="$props" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  statsCount: [
+    {
+      label: "Invoiced",
+      totalCount: "52145",
+      number: 4,
+      icon: { name: "check", type: "solid", class: "h-5 w-5" },
+      tag: {
+        label: "+10",
+        color: "green",
+        icon: {
+          name: "arrow-down-solid-v2",
+          type: "solid",
+          class: "h-5 w-5 text-green-500",
+          viewBox: "0 0 24 24",
+        },
+      },
+      days: "Last 7 days",
+      icon: {
+        name: "information-circle",
+        type: "solid",
+        class: "h-5 w-5 shrink-0 text-gray-400 hover:text-gray-500",
+        cursorType: "cursor-pointer",
+      },
+      toolTip: {
+        showToolTip: true,
+        text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+        classes: "bottom-6",
+      },
+    },
+    { label: "Partially paid", totalCount: "66145", number: 2 },
+    { label: "Paid", totalCount: "88845", number: 4 },
+    // { label: "Overdue", totalCount: "$14545", number: 2 },
+  ],
+};

package/src/stories/CSwitch.stories.js

@@ -1,28 +1,28 @@
-import CSwitch from "../components/CSwitch/CSwitch.vue";
-import "./utils.css";
-
-export default {
-  title: "CSwitch",
-  component: CSwitch,
-  argTypes: {
-    label: String,
-    description: String,
-    classes: String,
-    value: Boolean,
-    disabled: Boolean,
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { CSwitch },
-  template: '<c-switch v-bind="$props" />',
-});
-
-export const Default = Template.bind({});
-Default.args = {
-  label: "Name",
-  description: "Nulla amet tempus sit accumsan. Aliquet turpis sed sit lacinia.",
-  value: 1,
-  direction: "left",
-};
+import CSwitch from "../components/CSwitch/CSwitch.vue";
+import "./utils.css";
+
+export default {
+  title: "CSwitch",
+  component: CSwitch,
+  argTypes: {
+    label: String,
+    description: String,
+    classes: String,
+    value: Boolean,
+    disabled: Boolean,
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { CSwitch },
+  template: '<c-switch v-bind="$props" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  label: "Name",
+  description: "Nulla amet tempus sit accumsan. Aliquet turpis sed sit lacinia.",
+  value: 1,
+  direction: "left",
+};

package/src/stories/CTabLazy.stories.js

@@ -1,42 +1,42 @@
-import CTabLazy from "../components/CTabLazy/CTabLazy.vue";
-
-import "./utils.css";
-
-export default {
-  title: "CTabLazy",
-  component: CTabLazy,
-  argTypes: {
-    tabs: { control: { type: "object" } },
-    currentTabComponent: String,
-    data: { control: { type: "object" } },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { CTabLazy },
-  template: '<c-tab-lazy v-bind="$props"/>',
-});
-
-export const Default = Template.bind({});
-Default.args = {
-  tabs: [
-    {
-      key: "tab1",
-      label: "Tab 1",
-      count: 7,
-    },
-    {
-      key: "tab2",
-      label: "Tab 2",
-      count: 3,
-    },
-    {
-      key: "tab3",
-      label: "Tab 3",
-      count: 3,
-    },
-  ],
-  currentTabComponent: "defualt",
-  data: { array: [1, 2, 3] },
-};
+import CTabLazy from "../components/CTabLazy/CTabLazy.vue";
+
+import "./utils.css";
+
+export default {
+  title: "CTabLazy",
+  component: CTabLazy,
+  argTypes: {
+    tabs: { control: { type: "object" } },
+    currentTabComponent: String,
+    data: { control: { type: "object" } },
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { CTabLazy },
+  template: '<c-tab-lazy v-bind="$props"/>',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  tabs: [
+    {
+      key: "tab1",
+      label: "Tab 1",
+      count: 7,
+    },
+    {
+      key: "tab2",
+      label: "Tab 2",
+      count: 3,
+    },
+    {
+      key: "tab3",
+      label: "Tab 3",
+      count: 3,
+    },
+  ],
+  currentTabComponent: "defualt",
+  data: { array: [1, 2, 3] },
+};

package/src/stories/CTable.stories.js

@@ -1,203 +1,203 @@
-import CTable from "../components/CTable/CTable.vue";
-// import draggable from "vuedraggable";
-import "./utils.css";
-
-export default {
-  title: "CTable",
-  component: CTable,
-  // subcomponents: { draggable },
-  argTypes: {
-    cols: { type: Array },
-    rows: { type: Array },
-    pagination: Boolean,
-    sorting: Boolean,
-    searching: Boolean,
-    enableSelection: Boolean,
-    initialSortField: { type: Object },
-    customizeColumn: Boolean,
-    tableActions: Boolean,
-    selectOnCheckBoxClickOnly: Boolean,
-    showNewShowHideColumnButton: Boolean,
-    disableDownloadButton: Boolean,
-    showTableActionsTooltip: Boolean,
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { CTable },
-  template:
-    '<c-table @hideCols="hideCols" @showCheckbox="showCheckbox" @reordered="handleReorder" v-bind="$props" />',
-});
-
-export const Default = Template.bind({});
-Default.args = {
-  cols: [
-    { label: "", field: "drag", hidden: false },
-    {
-      label: "Payment mode",
-      field: "mode",
-      hidden: false,
-      hasIcon: true,
-      showToolTipText: false,
-      tooltipText:
-        "Count of students marked present, absent billable and removed billable",
-      toolTipBoxClass: "-left-80 -ml-2",
-    },
-    {
-      label: "",
-      field: "menuOptions",
-      hidden: false,
-      customizeColumn: true,
-      width: "60px",
-    },
-  ],
-  showHideColumnList: [
-    {
-      label: "View columns",
-      field: "drag",
-      hidden: false,
-      isRowHeaderCol: true,
-    },
-    { label: "", field: "drag", hidden: false },
-    {
-      label: "Mode",
-      field: "mode",
-      hidden: false,
-      sortable: true,
-    },
-    {
-      label: "",
-      field: "drag",
-      hidden: false,
-      isActionColumn: true,
-      customClasses: "border-t py-1 mt-1 border-gray-200",
-      showActionIcon: true,
-      icon: {
-        name: "arrow-down-tray-solid-v2",
-        type: "solid",
-        class: "h-5 w-5 mr-2 text-gray-400",
-        viewBox: "0 0 24 24",
-      },
-      label: "Download",
-    },
-  ],
-  rows: [
-    {
-      id: 5,
-      mode: "ATM Machine 1",
-      sort_order: 2,
-      status: 2,
-      rcInstitutionID: 82,
-      created_at: "2020-09-02T12:53:09.000000Z",
-      updated_at: "2021-11-25T13:13:56.000000Z",
-    },
-    {
-      id: 11,
-      mode: "QA 1",
-      sort_order: 3,
-      status: 2,
-      rcInstitutionID: 82,
-      created_at: "2020-09-04T09:57:47.000000Z",
-      updated_at: "2021-11-25T13:13:56.000000Z",
-    },
-    {
-      id: 7,
-      mode: "ATM Machine 2",
-      sort_order: 4,
-      status: 1,
-      rcInstitutionID: 82,
-      created_at: "2020-09-04T09:45:47.000000Z",
-      updated_at: "2021-11-25T13:13:56.000000Z",
-    },
-    {
-      id: 18,
-      mode: "QA 3",
-      sort_order: 8,
-      status: 1,
-      rcInstitutionID: 82,
-      created_at: "2020-09-04T10:05:15.000000Z",
-      updated_at: "2021-11-25T13:13:56.000000Z",
-    },
-    {
-      id: 12,
-      mode: "QA 2",
-      sort_order: 21,
-      status: 1,
-      rcInstitutionID: 82,
-      created_at: "2020-09-04T09:57:55.000000Z",
-      updated_at: "2021-11-25T13:13:56.000000Z",
-    },
-    {
-      id: 15,
-      mode: "QA 4",
-      sort_order: 22,
-      status: 1,
-      rcInstitutionID: 82,
-      created_at: "2020-09-04T10:00:23.000000Z",
-      updated_at: "2021-11-25T13:13:56.000000Z",
-    },
-    {
-      id: 162,
-      mode: "Yes bank",
-      sort_order: 62,
-      status: 1,
-      rcInstitutionID: 82,
-      created_at: "2020-11-18T09:22:43.000000Z",
-      updated_at: "2021-11-25T13:13:56.000000Z",
-    },
-    {
-      id: 163,
-      mode: "SBI bank",
-      sort_order: 63,
-      status: 1,
-      rcInstitutionID: 82,
-      created_at: "2020-11-18T09:33:17.000000Z",
-      updated_at: "2021-11-25T13:13:56.000000Z",
-    },
-    {
-      id: 164,
-      mode: "BOB bank",
-      sort_order: 64,
-      status: 1,
-      rcInstitutionID: 82,
-      created_at: "2020-11-18T09:35:12.000000Z",
-      updated_at: "2021-11-25T13:13:56.000000Z",
-    },
-    {
-      id: 165,
-      mode: "PNB bank",
-      sort_order: 65,
-      status: 1,
-      rcInstitutionID: 82,
-      created_at: "2020-11-18T09:55:16.000000Z",
-      updated_at: "2021-11-25T13:13:56.000000Z",
-    },
-  ],
-  pagination: true,
-  sorting: false,
-  searching: true,
-  enableSelection: true,
-  tableActions: true,
-  initialSortField: { field: "modal", type: "asc" },
-  paginationData: { totalRecords: 200, currentPage: 13, lastPage: 20 },
-  isLoading: false,
-  hideCols(val, name) {
-    var getColumns = Default.args.cols;
-    var selectedCol = getColumns.find((col) => col.field == name);
-    selectedCol.hidden = !val;
-  },
-  showCheckbox(value) {
-    if (value == true) {
-      Default.args.cols[0].hidden = 0;
-    } else {
-      Default.args.cols[0].hidden = true;
-    }
-  },
-  handleReorder(val) {
-    Default.args.rows = val;
-    val.forEach((item) => {
-      console.log(item);
-    });
-  },
-};
+import CTable from "../components/CTable/CTable.vue";
+// import draggable from "vuedraggable";
+import "./utils.css";
+
+export default {
+  title: "CTable",
+  component: CTable,
+  // subcomponents: { draggable },
+  argTypes: {
+    cols: { type: Array },
+    rows: { type: Array },
+    pagination: Boolean,
+    sorting: Boolean,
+    searching: Boolean,
+    enableSelection: Boolean,
+    initialSortField: { type: Object },
+    customizeColumn: Boolean,
+    tableActions: Boolean,
+    selectOnCheckBoxClickOnly: Boolean,
+    showNewShowHideColumnButton: Boolean,
+    disableDownloadButton: Boolean,
+    showTableActionsTooltip: Boolean,
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { CTable },
+  template:
+    '<c-table @hideCols="hideCols" @showCheckbox="showCheckbox" @reordered="handleReorder" v-bind="$props" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  cols: [
+    { label: "", field: "drag", hidden: false },
+    {
+      label: "Payment mode",
+      field: "mode",
+      hidden: false,
+      hasIcon: true,
+      showToolTipText: false,
+      tooltipText:
+        "Count of students marked present, absent billable and removed billable",
+      toolTipBoxClass: "-left-80 -ml-2",
+    },
+    {
+      label: "",
+      field: "menuOptions",
+      hidden: false,
+      customizeColumn: true,
+      width: "60px",
+    },
+  ],
+  showHideColumnList: [
+    {
+      label: "View columns",
+      field: "drag",
+      hidden: false,
+      isRowHeaderCol: true,
+    },
+    { label: "", field: "drag", hidden: false },
+    {
+      label: "Mode",
+      field: "mode",
+      hidden: false,
+      sortable: true,
+    },
+    {
+      label: "",
+      field: "drag",
+      hidden: false,
+      isActionColumn: true,
+      customClasses: "border-t py-1 mt-1 border-gray-200",
+      showActionIcon: true,
+      icon: {
+        name: "arrow-down-tray-solid-v2",
+        type: "solid",
+        class: "h-5 w-5 mr-2 text-gray-400",
+        viewBox: "0 0 24 24",
+      },
+      label: "Download",
+    },
+  ],
+  rows: [
+    {
+      id: 5,
+      mode: "ATM Machine 1",
+      sort_order: 2,
+      status: 2,
+      rcInstitutionID: 82,
+      created_at: "2020-09-02T12:53:09.000000Z",
+      updated_at: "2021-11-25T13:13:56.000000Z",
+    },
+    {
+      id: 11,
+      mode: "QA 1",
+      sort_order: 3,
+      status: 2,
+      rcInstitutionID: 82,
+      created_at: "2020-09-04T09:57:47.000000Z",
+      updated_at: "2021-11-25T13:13:56.000000Z",
+    },
+    {
+      id: 7,
+      mode: "ATM Machine 2",
+      sort_order: 4,
+      status: 1,
+      rcInstitutionID: 82,
+      created_at: "2020-09-04T09:45:47.000000Z",
+      updated_at: "2021-11-25T13:13:56.000000Z",
+    },
+    {
+      id: 18,
+      mode: "QA 3",
+      sort_order: 8,
+      status: 1,
+      rcInstitutionID: 82,
+      created_at: "2020-09-04T10:05:15.000000Z",
+      updated_at: "2021-11-25T13:13:56.000000Z",
+    },
+    {
+      id: 12,
+      mode: "QA 2",
+      sort_order: 21,
+      status: 1,
+      rcInstitutionID: 82,
+      created_at: "2020-09-04T09:57:55.000000Z",
+      updated_at: "2021-11-25T13:13:56.000000Z",
+    },
+    {
+      id: 15,
+      mode: "QA 4",
+      sort_order: 22,
+      status: 1,
+      rcInstitutionID: 82,
+      created_at: "2020-09-04T10:00:23.000000Z",
+      updated_at: "2021-11-25T13:13:56.000000Z",
+    },
+    {
+      id: 162,
+      mode: "Yes bank",
+      sort_order: 62,
+      status: 1,
+      rcInstitutionID: 82,
+      created_at: "2020-11-18T09:22:43.000000Z",
+      updated_at: "2021-11-25T13:13:56.000000Z",
+    },
+    {
+      id: 163,
+      mode: "SBI bank",
+      sort_order: 63,
+      status: 1,
+      rcInstitutionID: 82,
+      created_at: "2020-11-18T09:33:17.000000Z",
+      updated_at: "2021-11-25T13:13:56.000000Z",
+    },
+    {
+      id: 164,
+      mode: "BOB bank",
+      sort_order: 64,
+      status: 1,
+      rcInstitutionID: 82,
+      created_at: "2020-11-18T09:35:12.000000Z",
+      updated_at: "2021-11-25T13:13:56.000000Z",
+    },
+    {
+      id: 165,
+      mode: "PNB bank",
+      sort_order: 65,
+      status: 1,
+      rcInstitutionID: 82,
+      created_at: "2020-11-18T09:55:16.000000Z",
+      updated_at: "2021-11-25T13:13:56.000000Z",
+    },
+  ],
+  pagination: true,
+  sorting: false,
+  searching: true,
+  enableSelection: true,
+  tableActions: true,
+  initialSortField: { field: "modal", type: "asc" },
+  paginationData: { totalRecords: 200, currentPage: 13, lastPage: 20 },
+  isLoading: false,
+  hideCols(val, name) {
+    var getColumns = Default.args.cols;
+    var selectedCol = getColumns.find((col) => col.field == name);
+    selectedCol.hidden = !val;
+  },
+  showCheckbox(value) {
+    if (value == true) {
+      Default.args.cols[0].hidden = 0;
+    } else {
+      Default.args.cols[0].hidden = true;
+    }
+  },
+  handleReorder(val) {
+    Default.args.rows = val;
+    val.forEach((item) => {
+      console.log(item);
+    });
+  },
+};