classcard-ui 0.2.666 → 0.2.671

package/src/components/CDualSelect/CDualSelect.vue

@@ -1,193 +0,0 @@
-<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

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

package/src/components/CEditor/CEditor.vue

@@ -1,96 +0,0 @@
-<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

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

package/src/components/CFormSectionHeading/CFormSectionHeading.vue

@@ -1,53 +0,0 @@
-<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

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

package/src/components/CGroupedSelect/CGroupedSelect.vue

@@ -1,217 +0,0 @@
-<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

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

package/src/components/CIcon/CIcon.vue

@@ -1,77 +0,0 @@
-<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

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