classcard-ui 0.2.129 → 0.2.137

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "classcard-ui",
-  "version": "0.2.129",
+  "version": "0.2.137",
   "main": "dist/classcard-ui.common.js",
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -15,12 +15,13 @@
     "src/*"
   ],
   "dependencies": {
-    "@shopify/draggable": "*",
+    "@shopify/draggable": "^1.0.0-beta.8",
     "@tailwindcss/forms": "^0.2.1",
     "core-js": "^3.18.0",
     "dayjs": "^1.10.7",
     "gridjs-selection": "^3.4.0",
     "gridjs-vue": "^3.4.0",
+    "lodash": "^4.17.21",
     "vue": "^2.6.14",
     "vue-good-table": "^2.21.8",
     "vue-multiselect": "^2.1.6",

package/src/components/CFormSectionHeading/CFormSectionHeading.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div :class="classes" class="border-gray-200">
-      <div class="flex justify-between">
+      <div class="flex justify-between items-center">
         <div>
           <h3 class="text-base font-semibold text-gray-900">
             {{ heading }}
@@ -10,8 +10,13 @@
             {{ description }}
           </p>
         </div>
-        <c-button v-if="tabAction" :type="tabAction.type" :label="tabAction.label"></c-button>
-        <c-anchor-tag v-if="tabLink" :label="tabLink.label"></c-anchor-tag>
+        <c-button
+          v-if="tabAction"
+          :type="tabAction.type"
+          :label="tabAction.label"
+          @action="emitTabAction"
+        ></c-button>
+        <c-anchor-tag v-if="tabLink" :label="tabLink.label" :action="emitTabLink"></c-anchor-tag>
       </div>
     </div>
   </div>
@@ -28,9 +33,20 @@ export default {
     divider: { type: Boolean },
     tabAction: { type: Object },
     tabLink: { type: Object },
+    actionEvent: {
+      type: Function,
+    },
     classes: {
       type: String,
     },
   },
+  methods: {
+    emitTabAction() {
+      this.$emit("actionEvent");
+    },
+    emitTabLink() {
+      this.$emit("actionEvent");
+    },
+  },
 };
 </script>

package/src/components/CGroupedSelect/CGroupedSelect.vue

@@ -0,0 +1,166 @@
+<template>
+  <div>
+    <label v-if="label" class="block text-sm font-medium text-gray-700">
+      {{ label }}
+    </label>
+    <div class="mt-1 relative">
+      <div class="relative">
+        <input
+          type="text"
+          class="bg-white relative w-full border border-gray-300 rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+          aria-haspopup="listbox"
+          aria-expanded="true"
+          aria-labelledby="listbox-label"
+          :value="inputValue"
+          :placeholder="placeholder"
+          @focus="showDropDown = true"
+          @blur="closeDropDown()"
+        />
+        <span
+          class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none"
+        >
+          <!-- Heroicon name: solid/selector -->
+          <svg
+            class="h-5 w-5 text-gray-400"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+            aria-hidden="true"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z"
+              clip-rule="evenodd"
+            />
+          </svg>
+        </span>
+      </div>
+      <!--
+      Select popover, show/hide based on select state.
+
+      Entering: ""
+        From: ""
+        To: ""
+      Leaving: "transition ease-in duration-100"
+        From: "opacity-100"
+        To: "opacity-0"
+    -->
+      <ul
+        class="absolute z-10 mt-1 w-full bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm"
+        tabindex="-1"
+        role="listbox"
+        aria-labelledby="listbox-label"
+        aria-activedescendant="listbox-option-3"
+        v-if="showDropDown && options.length > 0"
+      >
+        <!--
+        Select option, manage highlight styles based on mouseenter/mouseleave and keyboard navigation.
+
+        Highlighted: "text-white bg-indigo-600", Not Highlighted: "text-gray-900"
+      -->
+        <span v-for="option in options" :key="option.id">
+          <li
+            class="text-gray-900 cursor-default select-none relative py-2 pl-3 pr-9"
+            role="option"
+          >
+            <span class="font-bold italic block truncate">
+              {{ option.label }}
+            </span>
+          </li>
+          <li
+            class="text-gray-900 cursor-default select-none relative py-2 pl-3 pr-9 group hover:text-white hover:bg-indigo-600"
+            v-for="subOption in option.options"
+            :key="subOption.id"
+            role="option"
+            @click="handleOptionClick(subOption)"
+          >
+            <!-- Selected: "font-semibold", Not Selected: "font-normal" -->
+            <span
+              :class="[
+                subOption.label === value.label
+                  ? 'font-semibold'
+                  : 'font-normal',
+                ' block truncate',
+              ]"
+            >
+              {{ subOption.label }}
+            </span>
+
+            <!--
+          Checkmark, only display for selected option.
+
+          Highlighted: "text-white", Not Highlighted: "text-indigo-600"
+        -->
+            <span
+              class="text-indigo-600 absolute inset-y-0 right-0 flex items-center pr-4 group-hover:text-white"
+              v-if="subOption.label === value.label"
+            >
+              <!-- Heroicon name: solid/check -->
+              <svg
+                class="h-5 w-5"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+                aria-hidden="true"
+              >
+                <path
+                  fill-rule="evenodd"
+                  d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                  clip-rule="evenodd"
+                />
+              </svg>
+            </span>
+          </li>
+        </span>
+
+        <!-- More items... -->
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+import { debounce } from "lodash";
+
+export default {
+  name: "CGroupedSelect",
+  props: {
+    label: String,
+    options: Array,
+    value: Object,
+    placeholder: String,
+  },
+  data() {
+    return {
+      showDropDown: false,
+      inputValue: "",
+    };
+  },
+  methods: {
+    onInput(e) {
+      this.inputValue = e.target.value;
+      debounce(function () {
+        this.$emit("search", e.target.value);
+      }, 500);
+    },
+    handleOptionClick(option) {
+      this.$emit("input", option);
+      this.inputValue = option.label;
+    },
+    closeDropDown() {
+      this.inputValue = this.value.label;
+      this.showDropDown = false;
+    },
+  },
+  watch: {
+    value(newValue) {
+      this.inputValue = newValue.label;
+    },
+  },
+  mounted() {
+    this.inputValue = this.value.label;
+  },
+};
+</script>
+
+<style></style>

package/src/components/CGroupedSelect/index.js

@@ -0,0 +1,3 @@
+import CGroupedSelect from "./CGroupedSelect.vue";
+
+export default CGroupedSelect;

package/src/components/CMultiselect/CMultiselect.vue

@@ -4,12 +4,14 @@
     <v-select
       class="text-sm mt-1"
       :placeholder="placeholder"
-      multiple
-      taggable
+      :multiple="isMultiple"
+      :taggable="isTaggable"
+      :push-tags="pushTags"
       :selectable="() => (limitSelection == true ? value.length < 1 : value)"
       :filterable="false"
       v-model="value"
       :options="options"
+      @input="setSelectedOptions"
       @search="fetchOptions"
       :label="optionLabel"
     >
@@ -49,28 +51,59 @@ export default {
     },
     label: String,
     placeholder: String,
+    // whether multiple fields are allowed or not
+    isMultiple: {
+      type: Boolean,
+    },
+    // append newly created tags in options
+    pushTags: {
+      type: Boolean,
+    },
+    // whether to allow user to create new options
+    isTaggable: {
+      type: Boolean,
+    },
     limitSelection: {
       type: Boolean,
     },
     getOptions: {
+      // function to emit on search{
       type: Function,
     },
     customiseOption: {
       type: Boolean,
     },
+    // the name of the option to render in the selectpicker
     optionLabel: {
       type: String,
     },
+    // action to trigger after selecting option from dropdown
+    onSelectOptions: {
+      type: Function,
+    },
+    optionsSelected: {
+      type: Array,
+    },
   },
   computed: {},
   data() {
     return {
-      value: [],
+      loaderSearching: true,
+      value: this.optionsSelected && this.optionsSelected.length ? this.optionsSelected : [],
     };
   },
   methods: {
-    fetchOptions(search, loading) {
-      this.$emit("getOptions", search, loading);
+    fetchOptions(search, loaderSearching) {
+      this.$emit("getOptions", search, loaderSearching);
+    },
+    setSelectedOptions(params) {
+      this.value = params;
+      this.$emit("onSelectOptions", params);
+    },
+  },
+  watch: {
+    optionsSelected() {
+      this.value = this.optionsSelected;
     },
   },
 };

package/src/components/CSelect/CSelect.vue

@@ -11,7 +11,7 @@
       </div>
       <span v-if="hint" class="text-sm text-gray-500">{{ hint }}</span>
     </div>
-    <div class="mt-1 relative">
+    <div class="relative" :class="label ? 'mt-1' : ''">
       <button
         type="button"
         @click="toggleDropdown = !toggleDropdown"

package/src/components/index.js

@@ -20,6 +20,7 @@ export { default as CDualSelect } from "./CEditor";
 export { default as CEditor } from "./CDualSelect";
 export { default as CFormSectionHeading } from "./CFormSectionHeading";
 export { default as CIcon } from "./CIcon";
+export { default as CGroupedSelect } from "./CGroupedSelect";
 export { default as CIconDropdown } from "./CIconDropdown";
 export { default as CInput } from "./CInput";
 export { default as CInputAddon } from "./CInputAddon";

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