classcard-ui 0.2.671 → 0.2.689

package/src/components/CDualSelect/CDualSelect.vue

@@ -0,0 +1,193 @@
+<template>
+  <div>
+    <div class="flex">
+      <button
+        type="button"
+        aria-haspopup="listbox"
+        aria-expanded="true"
+        aria-labelledby="listbox-label"
+        @click="toggleFirstDropdown = !toggleFirstDropdown"
+        @blur="close()"
+        class="relative inline-flex items-center pl-3 pr-10 py-2 text-left rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-900 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 shadow-sm disabled:opacity-50"
+        :disabled="isDisabled"
+      >
+        <span class="block truncate">
+          {{ firstDropdownSelectedValue ? firstDropdownSelectedValue : "Select a option" }}
+        </span>
+        <span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
+          <c-icon name="chevron-down" type="solid" class="h-5 w-5"></c-icon>
+        </span>
+      </button>
+      <button
+        type="button"
+        aria-haspopup="listbox"
+        aria-expanded="true"
+        aria-labelledby="listbox-label"
+        @click="toggleSecondDropdown = !toggleSecondDropdown"
+        @blur="close()"
+        class="relative items-center -ml-px pl-3 pr-10 py-2 text-left rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-900 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 shadow-sm disabled:opacity-50"
+        :disabled="isDisabled"
+      >
+        <span class="block truncate">
+          {{ secondDropdownSelectedValue ? secondDropdownSelectedValue : "Select a option" }}
+        </span>
+        <span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
+          <c-icon name="chevron-down" type="solid" class="h-5 w-5"></c-icon>
+        </span>
+      </button>
+    </div>
+    <transition
+      enter-active-class="transition ease-out duration-100"
+      enter-class="transform opacity-0 scale-95"
+      enter-to-class="transform opacity-100 scale-100"
+      leave-active-class="transition ease-in duration-75"
+      leave-class="transform opacity-100 scale-100"
+      leave-to-class="transform opacity-0 scale-95"
+    >
+      <div
+        v-if="toggleFirstDropdown && !isDisabled"
+        class="origin-top-right absolute mt-2 -mr-1 w-56 rounded-md shadow-lg bg-white ring-1 ring-gray-900 ring-opacity-5 z-10"
+      >
+        <ul
+          tabindex="-1"
+          role="listbox"
+          aria-labelledby="listbox-label"
+          class="max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm"
+        >
+          <li
+            v-for="item in firstDropdownOptions"
+            v-bind:key="item.items"
+            role="menuitem"
+            class="text-gray-900 select-none relative py-2 pl-3 pr-9 cursor-pointer"
+            @mousedown="handleFirstClick(item)"
+          >
+            <span class="font-normal block truncate list-options">
+              {{ item.text }}
+            </span>
+          </li>
+        </ul>
+      </div>
+    </transition>
+    <transition
+      enter-active-class="transition ease-out duration-100"
+      enter-class="transform opacity-0 scale-95"
+      enter-to-class="transform opacity-100 scale-100"
+      leave-active-class="transition ease-in duration-75"
+      leave-class="transform opacity-100 scale-100"
+      leave-to-class="transform opacity-0 scale-95"
+    >
+      <div
+        v-if="toggleSecondDropdown && !isDisabled"
+        class="origin-top-right absolute mt-2 -mr-1 w-56 rounded-md shadow-lg bg-white ring-1 ring-gray-900 ring-opacity-5 z-10"
+      >
+        <ul
+          tabindex="-1"
+          role="listbox"
+          aria-labelledby="listbox-label"
+          class="max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm"
+        >
+          <li
+            v-for="item in secondDropdownOptions"
+            v-bind:key="item.items"
+            role="menuitem"
+            class="text-gray-900 select-none relative py-2 pl-3 pr-9 cursor-pointer"
+            @mousedown="handleSecondClick(item)"
+          >
+            <span class="font-normal block truncate list-options">
+              {{ item.text }}
+            </span>
+          </li>
+        </ul>
+      </div>
+    </transition>
+    <!-- validation error message -->
+    <p v-if="!isValidate" class="mt-2 text-sm text-red-600">
+      {{ errorMessage }}
+    </p>
+  </div>
+</template>
+
+<script>
+import CIcon from "../CIcon/CIcon.vue";
+export default {
+  name: "CDualSelect",
+  components: { CIcon },
+  props: {
+    // validation is passed or not
+    isValidate: { type: Boolean },
+    // validation error message
+    errorMessage: {
+      type: String,
+    },
+    label: {
+      type: String,
+      required: true,
+    },
+    firstDropdownValue: {
+      type: String,
+    },
+    secondDropdownValue: {
+      type: String,
+    },
+    firstDropdownOptions: {
+      type: Array,
+      required: true,
+    },
+    secondDropdownOptions: {
+      type: Array,
+    },
+    onChangeFirstOptions: {
+      type: Function,
+    },
+    onChangeSecondOptions: {
+      type: Function,
+    },
+    isDisabled: {
+      type: Boolean,
+    },
+  },
+  data() {
+    return {
+      toggleFirstDropdown: false,
+      toggleSecondDropdown: false,
+      firstDropdownSelectedValue: this.firstDropdownValue ? this.firstDropdownValue : "",
+      secondDropdownSelectedValue: this.secondDropdownValue ? this.secondDropdownValue : "",
+    };
+  },
+  methods: {
+    close() {
+      this.toggleFirstDropdown = false;
+      this.toggleSecondDropdown = false;
+    },
+    handleFirstClick(item) {
+      this.firstDropdownSelectedValue = item.text;
+      this.$emit("onChangeFirstOptions", item);
+    },
+    handleSecondClick(item) {
+      this.secondDropdownSelectedValue = item.text;
+      this.$emit("onChangeSecondOptions", item);
+    },
+  },
+  computed: {
+    classes() {
+      return {
+        "text-gray-700 border-gray-300 hover:bg-gray-50 focus:ring-indigo-600":
+          this.type == "secondary",
+        "text-white hover:bg-indigo-800 bg-indigo-700 focus:ring-indigo-600":
+          this.type == "primary",
+        "text-white hover:bg-red-800 bg-red-700 focus:ring-red-600": this.type == "danger",
+        "text-white hover:bg-green-800 bg-green-700 focus:ring-green-600": this.type == "success",
+        "cursor-default pointer-events-none": this.isLoading,
+      };
+    },
+  },
+  watch: {
+    firstDropdownValue() {
+      this.firstDropdownSelectedValue = this.firstDropdownValue;
+      this.secondDropdownSelectedValue = this.secondDropdownValue;
+    },
+  },
+};
+</script>
+
+<style></style>

package/src/components/CDualSelect/index.js

@@ -0,0 +1,3 @@
+import CDualSelect from './CDualSelect.vue'
+
+export default CDualSelect

package/src/components/CEditor/CEditor.vue

@@ -0,0 +1,96 @@
+<template>
+  <div>
+    <div class="flex justify-between">
+      <p class="text-sm font-medium text-gray-900">{{ label }}</p>
+      <p class="text-sm text-gray-500" v-if="hint">{{ hint }}</p>
+    </div>
+    <quill-editor
+      class="mt-1 rounded-md bg-white text-sm shadow-sm"
+      :value="content"
+      :options="editorOption"
+      @change="onChange($event)"
+      @ready="onReady($event)"
+      :disabled="disabled"
+    ></quill-editor>
+    <p v-if="helpText" class="mt-2 text-sm text-gray-500">
+      {{ helpText }}
+    </p>
+  </div>
+</template>
+<script>
+import "quill/dist/quill.core.css";
+import "quill/dist/quill.snow.css";
+import "quill/dist/quill.bubble.css";
+import { quillEditor } from "vue-quill-editor";
+export default {
+  name: "CEditor",
+  components: { quillEditor },
+  props: {
+    content: {
+      type: String,
+    },
+    label: {
+      type: String,
+    },
+    hint: {
+      type: String,
+    },
+    helpText: {
+      type: String,
+    },
+    toolbarOptions: {
+      type: Array,
+    },
+    onEditorChange: {
+      type: Function,
+    },
+    placeholder: {
+      type: String,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  methods: {
+    onChange(params) {
+      this.$emit("onEditorChange", params);
+    },
+    onReady(params) {
+      this.$emit("onEditorReady", params);
+    },
+  },
+  computed: {
+    editorOption() {
+      return {
+        modules: {
+          toolbar: {
+            container: this.toolbarOptions,
+          },
+        },
+        placeholder: this.placeholder,
+      };
+    },
+  },
+};
+</script>
+<style>
+.ql-toolbar.ql-snow {
+  border-top-left-radius: 0.375rem;
+  border-top-right-radius: 0.375rem;
+}
+
+.ql-container.ql-snow {
+  border-bottom-left-radius: 0.375rem;
+  border-bottom-right-radius: 0.375rem;
+  min-height: 5rem;
+}
+
+.ql-editor {
+  @apply text-sm text-gray-900;
+  max-height: 150px;
+}
+.ql-editor.ql-blank::before {
+  @apply not-italic text-gray-500;
+}
+</style>

package/src/components/CEditor/index.js

@@ -0,0 +1,3 @@
+import CEditor from './CEditor.vue'
+
+export default CEditor

package/src/components/CFormSectionHeading/CFormSectionHeading.vue

@@ -0,0 +1,53 @@
+<template>
+  <div>
+    <div :class="classes" class="border-gray-200">
+      <div class="flex items-center justify-between">
+        <div>
+          <h3 class="text-base font-semibold text-gray-900">
+            {{ heading }}
+          </h3>
+          <p v-if="description" class="max-w-4xl text-sm text-gray-500">
+            {{ description }}
+          </p>
+        </div>
+        <c-button
+          v-if="tabAction"
+          :type="tabAction.type"
+          :label="tabAction.label"
+          :icon="tabAction.icon"
+          @action="emitTabAction"
+        ></c-button>
+        <c-anchor-tag v-if="tabLink" :label="tabLink.label" :action="emitTabLink"></c-anchor-tag>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import CAnchorTag from "../CAnchorTag/CAnchorTag.vue";
+import CButton from "../CButton/CButton.vue";
+export default {
+  name: "CFormSectionHeading",
+  components: { CButton, CAnchorTag },
+  props: {
+    heading: { type: String, required: true },
+    description: { type: String },
+    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/CFormSectionHeading/index.js

@@ -0,0 +1,3 @@
+import CFormSectionHeading from './CFormSectionHeading.vue'
+
+export default CFormSectionHeading

package/src/components/CGroupedSelect/CGroupedSelect.vue

@@ -0,0 +1,217 @@
+<template>
+  <div>
+    <div
+      v-if="showDropDown && options.length > 0"
+      class="fixed inset-0"
+      @click="closeDropDown()"
+      aria-hidden="true"
+    ></div>
+    <label v-if="label" class="block text-sm font-medium text-gray-700">
+      {{ label }}
+    </label>
+    <div class="relative mt-1">
+      <div class="relative">
+        <input
+          type="text"
+          class="relative w-full cursor-default rounded-md border border-gray-300 bg-white py-2 pl-3 pr-10 text-left shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 disabled:pointer-events-none disabled:opacity-50 sm:text-sm"
+          aria-haspopup="listbox"
+          aria-expanded="true"
+          aria-labelledby="listbox-label"
+          :value="inputValue"
+          :placeholder="placeholder"
+          @focus="openDropDown()"
+          @input="onInput"
+          :disabled="disabled"
+        />
+        <span
+          class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"
+        >
+          <svg
+            class="h-5 w-5 animate-spin text-gray-400"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            v-if="isSearching"
+          >
+            <circle
+              class="opacity-25"
+              cx="12"
+              cy="12"
+              r="10"
+              stroke="currentColor"
+              stroke-width="4"
+            ></circle>
+            <path
+              class="opacity-75"
+              fill="currentColor"
+              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+            ></path>
+          </svg>
+          <!-- 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"
+            v-if="!isSearching"
+          >
+            <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 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 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="relative cursor-default select-none bg-gray-100 py-2 pl-3 pr-9 text-left text-xs font-semibold text-gray-900"
+            role="option"
+          >
+            <span class="block truncate">
+              {{ option.label }}
+            </span>
+          </li>
+          <li
+            class="group relative cursor-default select-none py-2 pl-3 pr-9 text-left text-gray-900 hover:bg-indigo-600 hover:text-white"
+            v-for="subOption in option.options"
+            :key="subOption.id"
+            role="option"
+            @click="handleOptionClick(subOption)"
+          >
+            <!-- Selected: "font-semibold", Not Selected: "font-normal" -->
+            <span
+              :class="[
+                subOption[keyField] === value[keyField]
+                  ? 'font-semibold'
+                  : 'font-normal',
+                ' block break-words',
+              ]"
+            >
+              {{ subOption.label }}
+            </span>
+
+            <!--
+          Checkmark, only display for selected option.
+
+          Highlighted: "text-white", Not Highlighted: "text-indigo-600"
+        -->
+            <span
+              class="absolute inset-y-0 right-0 flex items-center pr-4 text-indigo-600 group-hover:text-white"
+              v-if="subOption[keyField] === value[keyField]"
+            >
+              <!-- 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>
+    <p v-if="isError" class="mt-2 text-left text-sm text-red-600">
+      {{ errorMessage }}
+    </p>
+  </div>
+</template>
+
+<script>
+import { debounce } from "lodash-es";
+
+export default {
+  name: "CGroupedSelect",
+  props: {
+    label: String,
+    options: Array,
+    value: Object,
+    placeholder: String,
+    isSearching: Boolean,
+    disabled: { type: Boolean, default: false },
+    isError: { type: Boolean, default: false },
+    errorMessage: {
+      type: String,
+      default: "This field cannot be empty",
+    },
+    keyField: { type: String, default: "label" },
+  },
+  data() {
+    return {
+      showDropDown: false,
+      inputValue: "",
+    };
+  },
+  methods: {
+    onInput(e) {
+      this.inputValue = e.target.value;
+      this.emitSearch(e.target.value);
+    },
+    emitSearch: debounce(function (value) {
+      if (value !== this.value.label) {
+        this.$emit("search", value);
+      } else {
+        this.$emit("search", "");
+      }
+    }, 500),
+    handleOptionClick(option) {
+      this.inputValue = option.label;
+      this.closeDropDown();
+      this.$emit("input", option);
+    },
+    closeDropDown() {
+      this.inputValue = this.value.label;
+      this.showDropDown = false;
+    },
+    openDropDown() {
+      this.showDropDown = true;
+      this.emitSearch("");
+    },
+  },
+  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/CIcon/CIcon.vue

@@ -0,0 +1,77 @@
+<template>
+  <div>
+    <svg
+      v-if="name == 'loader'"
+      :class="classes"
+      class="animate-spin"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+    >
+      <circle
+        class="opacity-25"
+        cx="12"
+        cy="12"
+        r="10"
+        stroke="currentColor"
+        stroke-width="4"
+      ></circle>
+      <path class="opacity-75" fill="currentColor" :d="path"></path>
+    </svg>
+    <svg
+      v-if="name !== 'loader' && type == 'solid'"
+      :class="(classes ? classes : '') + (cursorType ? cursorType : '')"
+      :viewBox="viewBox"
+      fill="currentColor"
+      fill-rule="evenodd"
+    >
+      <path :d="path" />
+    </svg>
+    <svg
+      v-if="name !== 'loader' && type == 'outline'"
+      :class="(classes ? classes : '') + (cursorType ? cursorType : '')"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        :d="path"
+      />
+    </svg>
+  </div>
+</template>
+
+<script>
+import icons from "../../icons.js";
+export default {
+  name: "CIcon",
+  props: {
+    name: {
+      type: String,
+      required: true,
+    },
+    classes: {
+      type: String,
+    },
+    type: {
+      type: String,
+    },
+    viewBox: {
+      type: String,
+      default: "0 0 20 20",
+    },
+    cursorType: {
+      type: String,
+      default: "cursor-default",
+    },
+  },
+  computed: {
+    path() {
+      return icons[this.name];
+    },
+  },
+};
+</script>

package/src/components/CIcon/index.js

@@ -0,0 +1,3 @@
+import CIcon from './CIcon.vue'
+
+export default CIcon