classcard-ui 0.2.671 → 0.2.689

package/src/stories/CConfirmActionModal.stories.js

@@ -0,0 +1,59 @@
+import { CConfirmActionModal, CButton } from "../components";
+import "./utils.css";
+
+export default {
+  title: "CConfirmActionModal",
+  component: CConfirmActionModal,
+  subcomponents: { CButton },
+  argTypes: {
+    actionOneType: {
+      control: {
+        type: "select",
+        options: [
+          "primary",
+          "secondary",
+          "white",
+          "danger",
+          "success",
+          "tertiary",
+          "secondary-gray",
+          "light-red",
+          "dark-blue",
+        ],
+      },
+    },
+    actionTwoType: {
+      control: {
+        type: "select",
+        options: [
+          "primary",
+          "secondary",
+          "white",
+          "danger",
+          "success",
+          "tertiary",
+          "secondary-gray",
+          "light-red",
+          "dark-blue",
+        ],
+      },
+    },
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { CConfirmActionModal },
+  template: '<c-confirm-action-modal v-bind="$props" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  title: "Are you sure?",
+  message: "This action cannot be undone.",
+  actionOneLabel: "Cancel",
+  actionTwoLabel: "Confirm",
+  actionOneType: "secondary-gray",
+  actionTwoType: "secondary-gray",
+  loadButton: "false"
+};

package/src/stories/CDatepicker.stories.js

@@ -0,0 +1,30 @@
+import CDatepicker from "../components/CDatepicker/CDatepicker.vue";
+import "./utils.css";
+
+export default {
+  title: "CDatepicker",
+  component: CDatepicker,
+  argTypes: {
+    date: String,
+    classes: String,
+    label: String,
+    helpText: String,
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { CDatepicker },
+  template: '<c-datepicker v-bind="$props" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  // date: "",
+  // classes: "",
+  label: "Date",
+  helpText: "Description",
+  value: new Date(),
+  disabled: false,
+  isExpanded: false,
+};

package/src/stories/CDualSelect.stories.js

@@ -0,0 +1,29 @@
+import CDualSelect from "../components/CDualSelect/CDualSelect.vue";
+import CIcon from "../components/CIcon/CIcon.vue";
+import "./utils.css";
+
+export default {
+  title: "CDualSelect",
+  component: CDualSelect,
+  subcomponents: { CIcon },
+  argTypes: {
+    // type: {
+    //   control: { type: "select", options: ["primary", "secondary", "success", "danger"] },
+    // },
+    items: { control: { type: "object" } },
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { CDualSelect },
+  template: '<c-dual-select v-bind="$props" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  firstDropdownOptions: [{ text: "one" }, { text: "two" }],
+  secondDropdownOptions: [{ text: "four" }, { text: "five" }],
+  //   type: 'primary',
+  label: "Button",
+};

package/src/stories/CEditor.stories.js

@@ -0,0 +1,30 @@
+import CEditor from "../components/CEditor/CEditor.vue";
+import "./utils.css";
+
+export default {
+  title: "CEditor",
+  component: CEditor,
+  argTypes: {
+    content: String,
+    label: String,
+    hint: String,
+    helpText: String,
+    toolbarOptions: Array,
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { CEditor },
+  template: '<c-editor v-bind="$props" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  content: "This is the editor",
+  label: "String",
+  hint: "String",
+  helpText: "String",
+  toolbarOptions: ["bold", "italic"],
+  placeholder: "Please enter your text here...",
+};

package/src/stories/CFormSectionHeading.stories.js

@@ -0,0 +1,34 @@
+import CFormSectionHeading from "../components/CFormSectionHeading/CFormSectionHeading.vue";
+import "./utils.css";
+
+export default {
+  title: "CFormSectionHeading",
+  component: CFormSectionHeading,
+  argTypes: {
+    heading: String,
+    description: String,
+    divider: Boolean,
+    tabAction:{ control: { type: "object" } },
+    tabLink: { control: { type: "object" } },
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { CFormSectionHeading },
+  template: '<c-form-section-heading v-bind="$props" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  heading: "Includes",
+  description: "Add subjects to include them in the package",
+  divider: false,
+  tabAction: {
+    label: 'Hide completed',
+    type: 'tertiary'
+  },
+  // tabLink: {
+  //   label: 'Hide completed'
+  // }
+};

package/src/stories/CGroupedSelect.stories.js

@@ -0,0 +1,69 @@
+import CGroupedSelect from "../components/CGroupedSelect/CGroupedSelect.vue";
+import "./utils.css";
+
+export default {
+  title: "CGroupedSelect",
+  component: CGroupedSelect,
+  argTypes: {
+    options: Array,
+    label: String,
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { CGroupedSelect },
+  template: '<c-grouped-select v-bind="$props" />',
+});
+
+export const Default = Template.bind({});
+
+Default.args = {
+  options: [
+    {
+      id: 0,
+      label: "fees",
+      options: [
+        {
+          id: 11751,
+          label: "Activity - Cricket - Flat Rate",
+        },
+        {
+          id: 13344,
+          label: "Cricket Kit",
+        },
+        {
+          id: 13407,
+          label: "Sports - Cricket - 60 mins",
+        },
+        {
+          id: 15370,
+          label: "Sports - Cricket - 60 mins",
+        },
+      ],
+    },
+    {
+      id: 1,
+      label: "packages",
+      options: [
+        {
+          id: 15664,
+          label: "Sports Cricket 4 Sessions",
+        },
+        {
+          id: 15663,
+          label: "Sports - Cricket 6 Sessions",
+        },
+      ],
+    },
+    {
+      id: 2,
+      label: "others",
+      options: [],
+    },
+  ],
+  value: {
+    id: 11751,
+    label: "Activity - Cricket - Flat Rate",
+  },
+};

package/src/stories/CIcon.stories.js

@@ -0,0 +1,26 @@
+import CIcon from '../components/CIcon/CIcon.vue';
+import './utils.css'
+
+export default {
+  title: 'CIcon',
+  component: CIcon,
+  argTypes: {
+    name: String,
+    classes: String,
+    type: { control: { type: 'select', options: ['solid', 'outline'] } },
+    viewBox: String,
+    dimensions: String
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { CIcon },
+  template: '<c-icon v-bind="$props" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+ name: 'bell',
+ classes: 'h-5 w-5'
+};

package/src/stories/CIconDropdown.stories.js

@@ -0,0 +1,40 @@
+import CIconDropdown from "../components/CIconDropdown/CIconDropdown.vue";
+import CIcon from "../components/CIcon/CIcon.vue";
+import "./utils.css";
+
+export default {
+  title: "CIconDropdown",
+  component: CIconDropdown,
+  subcomponents: { CIcon },
+  argTypes: {
+    items: { control: { type: "object" } },
+    icon: Object,
+    dropdownIcons: { type: Array }
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { CIconDropdown },
+  template: '<c-icon-dropdown v-bind="$props" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  items: [
+    { icon: true, text: "one", action:'alert', class:'hover:bg-red-100 hover:text-red-500 w-56' },
+    { text: "two" },
+  ],
+  dropdownIcons: [
+    {
+      name:'trash',
+      class:'mr-3 h-5 w-5 text-gray-400 hover:text-red-500',
+      type:'solid'
+    }
+  ],
+  icon:{
+      name:'dots-vertical-solid',
+      class:'h-5 w-5 text-gray-500',
+      type:'solid'
+  }
+};

package/src/stories/CInput.stories.js

@@ -0,0 +1,36 @@
+import CInput from "../components/CInput/CInput.vue";
+import "./utils.css";
+
+export default {
+  title: "CInput",
+  component: CInput,
+  argTypes: {
+    label: String,
+    placeholder: String,
+    addon: String,
+    hint: String,
+    helpText: String,
+    isValidate: Boolean,
+    value: String,
+    disabled: Boolean,
+    type: String,
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { CInput },
+  template: '<c-input v-bind="$props" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  label: "Name",
+  placeholder: "Enter your name",
+  addon: "AED",
+  hint: "Optional",
+  helpText: "Any message",
+  isValidate: true,
+  disabled: true,
+  type: "text",
+};

package/src/stories/CInputAddon.stories.js

@@ -0,0 +1,37 @@
+import CInputAddon from "../components/CInputAddon/CInputAddon.vue";
+import "./utils.css";
+
+export default {
+  title: "CInputAddon",
+  component: CInputAddon,
+  argTypes: {
+    addonType: {
+      control: { type: "select", options: ["leading", "trailing"] },
+    },
+    helpTextColor: {
+      control: { type: "select", options: ["gray", "red", "green"] },
+    },
+    disabled: Boolean,
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { CInputAddon },
+  template: '<c-input-addon v-bind="$props" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  label: "Name",
+  placeholder: "Enter your name",
+  addon: "AED",
+  hint: "Optional",
+  helpText: "Any message",
+  isValidate: true,
+  addonType: "leading",
+  helpTextColor: "gray",
+  inlineAddon: false,
+  disabled: true,
+  inputType: "text",
+};

package/src/stories/CInputEmail.stories.js

@@ -0,0 +1,27 @@
+import CInputEmail from '../components/CInputEmail/CInputEmail.vue';
+import './utils.css'
+
+export default {
+  title: 'CInputEmail',
+  component: CInputEmail,
+  argTypes: {
+    label: String,
+    placeholder: String,
+    hint:String,
+    helpText: String
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { CInputEmail },
+  template: '<c-input-email v-bind="$props" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+ label: 'Email',
+ placeholder: 'Enter email address',
+ hint:'Optional',
+ helpText: 'Any message'
+};

package/src/stories/CModalHeading.stories.js

@@ -0,0 +1,25 @@
+import CModalHeading from "../components/CModalHeading/CModalHeading.vue";
+import "./utils.css";
+
+export default {
+  title: "CModalHeading",
+  component: CModalHeading,
+  argTypes: {
+    title: String,
+    description: String,
+    divider: Boolean,
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { CModalHeading },
+  template: '<c-modal-heading v-bind="$props" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  title: "Includes",
+  description: "Add subjects to include them in the package",
+  divider: false,
+};

package/src/stories/CModuleHelpLinks.stories.js

@@ -0,0 +1,25 @@
+import CModuleHelpLinks from "../components/CModuleHelpLinks/CModuleHelpLinks.vue";
+import "./utils.css";
+
+export default {
+  title: "CModuleHelpLinks",
+  component: CModuleHelpLinks,
+  argTypes: {
+    description: String,
+    helpVideo: String,
+    helpArticle: String,
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { CModuleHelpLinks },
+  template: '<c-module-help-links v-bind="$props" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  description: "pp",
+  helpArticle: "iop",
+  helpVideo: "gueue",
+};

package/src/stories/CMultiselect.stories.js

@@ -0,0 +1,97 @@
+import CMultiselect from "../components/CMultiselect/CMultiselect.vue";
+import "./utils.css";
+
+export default {
+  title: "CMultiselect",
+  component: CMultiselect,
+  argTypes: {
+    options: Array,
+    label: String,
+    filterable: Boolean,
+    optionLabel: String,
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { CMultiselect },
+  template: '<c-multiselect v-bind="$props" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  options: [
+    {
+      text: "Subjects",
+      image:
+        "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
+      children: [
+        { id: "1426_Subject", text: "Math - Beginner - 120 mins" },
+        { id: "1427_Subject", text: "Math - Intermediate - 90 mins" },
+        { id: "1428_Subject", text: "Math - Advanced - 60 mins" },
+        { id: "2591_Subject", text: "Math - Beginners - 15 mins" },
+        { id: "15132_Subject", text: "Math - gxhghx - 15 mins" },
+        { id: "15132_Subject", text: "Math - gxhghx - 30 mins" },
+        { id: "15132_Subject", text: "Math - gxhghx - 35 mins" },
+        { id: "15133_Subject", text: "Math - gxhghx - 15 mins" },
+        { id: "15133_Subject", text: "Math - gxhghx - 30 mins" },
+        { id: "15133_Subject", text: "Math - gxhghx - 35 mins" },
+        { id: "15134_Subject", text: "Math - gxhghx - 15 mins" },
+        { id: "15134_Subject", text: "Math - gxhghx - 30 mins" },
+        { id: "15134_Subject", text: "Math - gxhghx - 35 mins" },
+        { id: "15137_Subject", text: "Math - check - 30 mins" },
+        { id: "15137_Subject", text: "Math - check - 40 mins" },
+        { id: "15138_Subject", text: "Math - check - 30 mins" },
+        { id: "15138_Subject", text: "Math - check - 40 mins" },
+        { id: "15141_Subject", text: "Math - bhy - 10 mins" },
+        { id: "15141_Subject", text: "Math - bhy - 20 mins" },
+        { id: "15142_Subject", text: "Math - bhy - 10 mins" },
+        { id: "15142_Subject", text: "Math - bhy - 20 mins" },
+        { id: "15143_Subject", text: "Math - now - 10 mins" },
+        { id: "15143_Subject", text: "Math - now - 15 mins" },
+        { id: "15144_Subject", text: "Math - now - 10 mins" },
+        { id: "15144_Subject", text: "Math - now - 15 mins" },
+        { id: "15189_Subject", text: "Math - M1 - 60 mins" },
+        { id: "15224_Subject", text: "Math - Hey - 10 mins" },
+        { id: "15224_Subject", text: "Math - Hey - 25 mins" },
+        { id: "15225_Subject", text: "Math - Hey - 10 mins" },
+        { id: "15225_Subject", text: "Math - Hey - 25 mins" },
+        { id: "15262_Subject", text: "Math - ty - 20 mins" },
+        { id: "15262_Subject", text: "Math - ty - 30 mins" },
+        { id: "15263_Subject", text: "Math - ty - 20 mins" },
+        { id: "15263_Subject", text: "Math - ty - 30 mins" },
+        { id: "15287_Subject", text: "Math - rt12 - 20 mins" },
+        { id: "15288_Subject", text: "Math - tky - 15 mins" },
+        { id: "15317_Subject", text: "Math - gmt - 10 mins" },
+        { id: "15317_Subject", text: "Math - gmt - 20 mins" },
+        { id: "15317_Subject", text: "Math - gmt - 30 mins" },
+        { id: "15317_Subject", text: "Math - gmt - 40 mins" },
+        { id: "15318_Subject", text: "Math - gmt - 10 mins" },
+        { id: "15318_Subject", text: "Math - gmt - 20 mins" },
+        { id: "15318_Subject", text: "Math - gmt - 30 mins" },
+        { id: "15318_Subject", text: "Math - gmt - 40 mins" },
+        { id: "15319_Subject", text: "Math - gmt - 10 mins" },
+        { id: "15319_Subject", text: "Math - gmt - 20 mins" },
+        { id: "15319_Subject", text: "Math - gmt - 30 mins" },
+        { id: "15319_Subject", text: "Math - gmt - 40 mins" },
+        { id: "15320_Subject", text: "Math - gmt - 10 mins" },
+        { id: "15320_Subject", text: "Math - gmt - 20 mins" },
+        { id: "15320_Subject", text: "Math - gmt - 30 mins" },
+        { id: "15320_Subject", text: "Math - gmt - 40 mins" },
+        { id: "15341_Subject", text: "Math - good - 15 mins" },
+        { id: "15341_Subject", text: "Math - good - 30 mins" },
+        { id: "15343_Subject", text: "Math - good - 15 mins" },
+        { id: "15343_Subject", text: "Math - good - 30 mins" },
+      ],
+    },
+    {
+      text: "Packages",
+      initials: "AS",
+      children: [{ id: "15820_Package", text: "Mathematics" }],
+    },
+  ],
+  optionLabel: "text",
+  label: "Active",
+  showOptionImage: true,
+  filterable: false,
+};

package/src/stories/CMultiselectr.stories.js

@@ -0,0 +1,23 @@
+// import CMultiselect from "../components/CMultiselect/CMultiselect.vue";
+// import "./utils.css";
+
+// export default {
+//   title: "CMultiselect",
+//   component: CMultiselect,
+//   argTypes: {
+//     options: Array,
+//     label:String
+//   },
+// };
+
+// const Template = (args, { argTypes }) => ({
+//   props: Object.keys(argTypes),
+//   components: { CMultiselect },
+//   template: '<c-multiselect v-bind="$props" />',
+// });
+
+// export const Default = Template.bind({});
+// Default.args = {
+//   options: ["list", "of", "options"],
+//   label:'Active'
+// };

package/src/stories/CPageHeading.stories.js

@@ -0,0 +1,32 @@
+import CPageHeading from "../components/CPageHeading/CPageHeading.vue";
+import "./utils.css";
+
+export default {
+  title: "CPageHeading",
+  component: CPageHeading,
+  argTypes: {
+    title: String,
+    description: String,
+    helpVideo: String,
+    helpArticle: String,
+    buttonType: { control: { type: "object" } },
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { CPageHeading },
+  template: '<c-page-heading @callAction="show" v-bind="$props" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  title: "Taxes",
+  description: "This text will explain the function of the module",
+  helpVideo: "https://www.google.com/",
+  helpArticle: "https://www.google.com/",
+  buttonType: { type: "primary", label: "Add new" },
+  show() {
+    //  console.log("called");
+  },
+};

package/src/stories/CPagination.stories.js

@@ -0,0 +1,30 @@
+import CPagination from "../components/CPagination/CPagination.vue";
+import "./utils.css";
+
+export default {
+  title: "CPagination",
+  component: CPagination,
+  argTypes: {
+    setPaginationRecords: {
+      currentPage: 1,
+      lastPage: 10,
+    }
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { CPagination },
+  template: '<c-pagination v-bind="$props" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  setPaginationRecords: {
+    currentPage: 1,
+    lastPage: 10,
+    from: 1,
+    to: 10,
+    totalRecords: 200,
+  }
+};