classcard-ui 0.2.134 → 0.2.135

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "classcard-ui",
-  "version": "0.2.134",
+  "version": "0.2.135",
   "main": "dist/classcard-ui.common.js",
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -21,6 +21,7 @@
     "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/CGroupedSelect/CGroupedSelect.vue

@@ -0,0 +1,164 @@
+<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"
+          @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"
+      >
+        <!--
+        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: Object,
+    value: Object,
+  },
+  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/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",
+  },
+};