classcard-ui 0.2.705 → 0.2.708

package/src/stories/CIconDropdown.stories.js

@@ -1,40 +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'
-  }
+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

@@ -1,36 +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",
-};
+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

@@ -1,37 +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",
-};
+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

@@ -1,27 +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'
-};
+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

@@ -1,25 +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,
-};
+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

@@ -1,25 +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",
-};
+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

@@ -1,97 +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,
-};
+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

@@ -1,23 +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'
-// };
+// 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'
+// };