classcard-ui 0.2.671 → 0.2.689

package/src/components/CPhoneNumber/CPhoneNumber.vue

@@ -0,0 +1,81 @@
+<template>
+  <div>
+    <div class="flex items-center">
+      <!-- label of phone field -->
+      <label class="text-sm text-gray-900">{{ label }}</label>
+      <!-- asterisk sign to render if field is required -->
+      <p v-if="isRequired" class="ml-1 text-red-600">*</p>
+    </div>
+    <div class="mt-1 w-full shadow-sm">
+      <vue-tel-input v-bind="bindProps" :autoFormat="false" v-model="value"></vue-tel-input>
+    </div>
+    <p v-if="!isValidate" class="mt-1 text-sm text-red-600">
+      {{ errorMessage }}
+    </p>
+  </div>
+</template>
+<script>
+import { VueTelInput } from "vue-tel-input";
+export default {
+  name: "CPhoneNumber",
+  components: {
+    VueTelInput,
+  },
+  props: {
+    // eslint-disable-next-line vue/require-prop-type-constructor
+    phone: {
+      type: String,
+    },
+    label: String,
+    isValidate: {
+      type: Boolean,
+      default: true,
+    },
+    isRequired: {
+      type: Boolean,
+      default: false,
+    },
+    errorMessage: {
+      type: String,
+    },
+  },
+  data() {
+    return {
+      value: this.phone,
+      bindProps: {
+        placeholder: "",
+        inputClasses: ["px-3", "py-2", "text-sm"],
+        inputId: "c-phone",
+        wrapperClasses: "c-phone-wrapper",
+        showDialCode: false,
+        enabledCountryCode: false,
+        mode: "international",
+        validCharactersOnly: true,
+      },
+    };
+  },
+  watch: {
+    value(newVal) {
+      this.$emit("onChange", newVal);
+    },
+  },
+};
+</script>
+<style>
+.vue-tel-input {
+  border: 1px solid #d1d5db !important;
+  @apply text-gray-900;
+}
+
+#c-phone {
+  border-top-right-radius: 0.375rem;
+  border-bottom-right-radius: 0.375rem;
+}
+.c-phone-wrapper {
+  border-radius: 0.375rem !important;
+}
+.vti__dropdown:hover {
+  border-top-left-radius: 0.375rem;
+  border-bottom-left-radius: 0.375rem;
+}
+</style>

package/src/components/CPhoneNumber/index.js

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

package/src/components/CRadio/CRadio.vue

@@ -0,0 +1,106 @@
+<template>
+  <div>
+    <div class="-space-y-px rounded-md bg-white" :class="customWrapperClasses">
+      <div
+        v-for="(item, index) in items"
+        class="relative pb-4 first:rounded-t-md last:rounded-b-md"
+        v-bind:key="item[labelName]"
+        :class="customClasses ? classes(item, index) : ''"
+      >
+        <div class="flex items-start">
+          <input
+            type="radio"
+            :value="item.value"
+            :name="name"
+            v-model="selectedItem"
+            @click="onChange(item.value)"
+            class="mt-0.5 h-4 w-4 cursor-pointer border-gray-300 text-indigo-600 focus:ring-indigo-500 disabled:opacity-50"
+            :disabled="isDisabled"
+          />
+          <label class="ml-3 flex cursor-pointer flex-col" @click="onChange(item.value)">
+            <span
+              class="block text-sm font-medium text-gray-900"
+              :class="customClasses && item.value === selectedItem ? 'text-indigo-900' : ''"
+            >
+              {{ item[labelName] }}
+            </span>
+            <span
+              class="block text-sm"
+              :class="
+                customClasses && item.value === selectedItem ? 'text-indigo-700' : 'text-gray-500'
+              "
+            >
+              {{ item.description }}
+            </span>
+          </label>
+        </div>
+        <slot v-if="item.value === selectedItem" :name="item.value" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "CRadio",
+  props: {
+    items: {
+      type: Array,
+      required: true,
+    },
+    selectedOption: {
+      type: String,
+    },
+    isDisabled: {
+      type: Boolean,
+    },
+    customClasses: {
+      type: Boolean,
+      default: false,
+    },
+    customWrapperClasses: {
+      type: String,
+    },
+    name: {
+      type: String,
+      required: true,
+    },
+    labelName: {
+      type: String,
+      default: "label",
+    },
+  },
+  data() {
+    return {
+      selectedItem: this.selectedOption,
+    };
+  },
+  methods: {
+    onChange(selectedValue) {
+      if (!this.isDisabled) {
+        this.$emit("onChange", selectedValue);
+        this.selectedItem = selectedValue;
+      }
+    },
+    classes(item, index) {
+      let classForRadio = "";
+      if (item.value === this.selectedItem && index === 0) {
+        classForRadio = "border p-4 border-indigo-200 rounded-t-md bg-indigo-50";
+      } else if (item.value === this.selectedItem && index === this.items.length - 1) {
+        classForRadio = "border p-4 border-indigo-200 rounded-b-md bg-indigo-50";
+      } else if (item.value === this.selectedItem && 0 < index < this.items.length - 1) {
+        classForRadio = "border p-4 border-indigo-200 bg-indigo-50";
+      } else {
+        classForRadio = "border p-4 border-gray-200";
+      }
+
+      return classForRadio;
+    },
+  },
+  watch: {
+    selectedOption() {
+      this.selectedItem = this.selectedOption;
+    },
+  },
+};
+</script>

package/src/components/CRadio/index.js

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

package/src/components/CRangeSlider/CRangeSlider.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="flex  w-64 m-auto items-center h-32 justify-center">
+    <div class="py-1 relative min-w-full">
+      <div class="h-2 bg-gray-200 rounded-full">
+        <div
+          class="absolute h-2 rounded-full bg-teal-600 w-0"
+          style="width: 58.5714%;"
+        ></div>
+        <div
+          class="absolute h-4 flex items-center justify-center w-4 rounded-full bg-white shadow border border-gray-300 -ml-2 top-0 cursor-pointer"
+          unselectable="on"
+          onselectstart="return false;"
+          style="left: 58.5714%;"
+        >
+          <div class="relative -mt-2 w-1">
+            <div
+              class="absolute z-40 opacity-100 bottom-100 mb-2 left-0 min-w-full"
+              style="margin-left: -20.5px;"
+            >
+              <div class="relative shadow-md">
+                <div
+                  class="bg-black -mt-8 text-white truncate text-xs rounded py-1 px-4"
+                >
+                  92
+                </div>
+                <svg
+                  class="absolute text-black w-full h-2 left-0 top-100"
+                  x="0px"
+                  y="0px"
+                  viewBox="0 0 255 255"
+                  xml:space="preserve"
+                >
+                  <polygon
+                    class="fill-current"
+                    points="0,0 127.5,127.5 255,0"
+                  ></polygon>
+                </svg>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="absolute text-gray-800 -ml-1 bottom-0 left-0 -mb-6">10</div>
+        <div class="absolute text-gray-800 -mr-1 bottom-0 right-0 -mb-6">
+          150
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "CRangeSlider",
+  props: {},
+};
+</script>

package/src/components/CRangeSlider/index.js

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

package/src/components/CReorderableStackedList/CReorderableStackedList.vue

@@ -0,0 +1,94 @@
+<template>
+  <div>
+    <ul>
+      <li
+        v-for="items in listItems"
+        v-bind:key="items.size"
+        class="flex items-center py-3"
+        :class="{ 'cursor-pointer': items.collapse }"
+        v-on="items.collapse ? { click: () => collapseList() } : null"
+      >
+        <c-icon
+          v-if="items.collapse"
+          :name="showSection ? 'chevron-down' : 'chevron-right'"
+          type="solid"
+          class="mt-3 mr-3 h-5 w-5 flex-none text-gray-900"
+        ></c-icon>
+        <c-icon
+          v-if="items.reorder"
+          name="menu-solid"
+          type="solid"
+          :cursorType="cursorType"
+          class="handle mr-3 h-5 w-5 flex-none text-gray-500"
+        ></c-icon>
+        <c-avatar
+          :size="items.size"
+          :rounded="items.rounded"
+          :image="items.image"
+          :imageClasses="items.imageClasses"
+          class="flex-none"
+        ></c-avatar>
+        <div class="flex min-w-0 flex-1 items-center justify-between">
+          <div class="ml-3 min-w-0 flex-1">
+            <div>
+              <div class="-m-1 flex flex-wrap items-center">
+                <p class="m-1 text-sm font-medium text-gray-900">
+                  {{ items.heading }}
+                </p>
+                <c-tag v-if="items.tag" label="Active" class="m-1"></c-tag>
+                <c-tag v-if="items.tag" label="Inactive" class="m-1"></c-tag>
+                <c-tag v-if="items.tag" label="Tag 1" class="m-1"></c-tag>
+                <c-tag v-if="items.tag" label="Tag 2" class="m-1"></c-tag>
+              </div>
+              <p class="mt-1 text-sm text-gray-500">{{ items.description }}</p>
+              <div v-if="showSection" class="mt-3">
+                <slot></slot>
+              </div>
+            </div>
+          </div>
+          <div class="flex flex-none items-center">
+            <slot name="icons"></slot>
+            <button
+              type="button"
+              v-if="items.listIcon"
+              @click="$emit('remove')"
+              class="focus:outline-none"
+            >
+              <!-- slot for delete icons -->
+              <slot name="removeIcons"></slot>
+            </button>
+          </div>
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+<script>
+import CAvatar from "../CAvatar/CAvatar.vue";
+import CTag from "../CTag/CTag.vue";
+import CIcon from "../CIcon/CIcon.vue";
+export default {
+  name: "CReorderableStackedList",
+  components: { CAvatar, CTag, CIcon },
+  props: {
+    listItems: {
+      type: Array,
+      required: true,
+    },
+    cursorType: {
+      type: String,
+      default: "cursor-move",
+    },
+  },
+  data() {
+    return {
+      showSection: false,
+    };
+  },
+  methods: {
+    collapseList() {
+      this.showSection = !this.showSection;
+    },
+  },
+};
+</script>

package/src/components/CReorderableStackedList/index.js

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

package/src/components/CSelect/CSelect.vue

@@ -0,0 +1,343 @@
+<template>
+  <div>
+    <div class="flex w-full items-center justify-between" v-if="label">
+      <div class="flex items-center">
+        <!-- label of select field -->
+        <label class="block text-sm font-medium text-gray-900">
+          {{ label }}
+        </label>
+        <!-- asterisk sign to render if field is required -->
+        <p v-if="isRequired" class="ml-1 text-red-600">*</p>
+      </div>
+      <span v-if="hint" class="text-sm text-gray-500">{{ hint }}</span>
+    </div>
+
+    <div class="relative">
+      <div class="relative" :class="label ? 'mt-1' : ''">
+        <input
+          type="text"
+          v-model="selectSearch"
+          @click="toggleDropdown = !toggleDropdown"
+          @focus="type == 'tertiary' ? (showFocus = true) : ''"
+          @blur="close()"
+          @keyup="search()"
+          aria-haspopup="listbox"
+          aria-expanded="true"
+          aria-labelledby="listbox-label"
+          :class="{ ...classes, [inputClasses]: true }"
+          class="relative w-full cursor-pointer rounded-md py-2 pl-3 pr-10 text-left text-sm focus:outline-none disabled:opacity-50 sm:text-sm"
+          :disabled="isDisabled"
+          autocomplete="off"
+        />
+
+        <div
+          class="pointer-events-none absolute inset-0 left-3 flex h-[38px] items-center overflow-hidden pr-10"
+        >
+          <div class="flex items-center truncate" :style="selectedOptionStyles">
+            <div v-if="showImage && !selectSearch && value">
+              <c-avatar
+                v-if="value.photo"
+                size="extraextrasmall"
+                :image="value.photo"
+                :rounded="true"
+              ></c-avatar>
+              <c-avatar
+                v-else
+                size="extraextrasmall"
+                :nameInitials="value.initials"
+                :rounded="true"
+                :isDynamicallyColored="coloredAvatars"
+              ></c-avatar>
+            </div>
+            <c-icon
+              v-if="icon && !showImage"
+              :class="icon.class"
+              :name="icon.name"
+              :type="icon.type"
+            >
+            </c-icon>
+            <p :class="showImage ? 'ml-3' : ''" class="block truncate text-sm">
+              {{
+                selectedValue
+                  ? selectedValue
+                  : !selectSearch || selectSearch == ""
+                  ? placeholder
+                  : null
+              }}
+            </p>
+          </div>
+        </div>
+        <div class="pointer-events-none absolute top-2 right-3 flex">
+          <div
+            v-if="type == 'tertiary' ? showFocus : true"
+            class="pointer-events-none right-0 flex items-center"
+          >
+            <c-icon
+              name="selector"
+              type="solid"
+              class="h-5 w-5 text-gray-400"
+            ></c-icon>
+          </div>
+        </div>
+      </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="toggleDropdown && !isDisabled"
+          class="absolute z-10 mt-1 w-full rounded-md bg-white shadow-lg"
+        >
+          <ul
+            tabindex="-1"
+            role="listbox"
+            aria-labelledby="listbox-label"
+            class="max-h-60 overflow-auto rounded-md py-1 text-base ring-1 ring-gray-900 ring-opacity-5 focus:outline-none sm:text-sm"
+          >
+            <li
+              v-if="addAction"
+              @mousedown="actionEvent($event)"
+              class="relative flex cursor-pointer select-none py-2 pl-3 pr-9 text-indigo-500 hover:bg-indigo-100 hover:text-indigo-700"
+            >
+              <c-icon
+                type="outline"
+                class="mr-1 h-5 w-5 text-indigo-400 group-hover:text-indigo-500"
+                name="plus"
+              ></c-icon>
+              {{ addAction.label }}
+            </li>
+            <li
+              v-for="(option, index) in renderOptions"
+              :key="index"
+              id="listbox-option-0"
+              role="option"
+              :ref="`option-${String(index)}`"
+              @mousedown="handleSelect($event, option)"
+              class="relative cursor-pointer select-none py-2 pl-3 pr-9 text-gray-900 hover:bg-indigo-700 hover:text-white"
+              :class="option.isDisabled ? 'pointer-events-none opacity-50' : ''"
+            >
+              <span class="flex items-center">
+                <div v-if="option.showImage">
+                  <c-avatar
+                    v-if="option.photo"
+                    size="extraextrasmall"
+                    :image="option.photo"
+                    :rounded="true"
+                  ></c-avatar>
+                  <c-avatar
+                    v-else
+                    size="extraextrasmall"
+                    :nameInitials="option.initials"
+                    :rounded="true"
+                    :isDynamicallyColored="coloredAvatars"
+                  ></c-avatar>
+                </div>
+                <c-icon
+                  class="flex-none"
+                  v-if="option.showIcon && option.icon"
+                  :class="option.icon.class"
+                  :name="option.icon.name"
+                  :type="option.icon.type"
+                >
+                </c-icon>
+                <span
+                  :class="option.photo || option.initials ? 'ml-3' : ''"
+                  class="list-options block break-words font-normal"
+                  >{{ option[renderOptionName] }}
+                </span>
+              </span>
+
+              <span
+                class="absolute inset-y-0 right-0 flex items-center pr-4 text-indigo-600"
+              >
+                <c-icon
+                  id="list-icon"
+                  v-show="showSelectedValue"
+                  name="check"
+                  type="solid"
+                  class="h-5 w-5"
+                ></c-icon>
+              </span>
+            </li>
+          </ul>
+        </div>
+      </transition>
+      <!-- validation error message -->
+      <p v-if="!isValidate" class="mt-2 text-left text-sm text-red-600">
+        {{ errorMessage }}
+      </p>
+      <p v-if="helpText" class="mt-2 text-sm text-gray-500">
+        {{ helpText }}
+      </p>
+    </div>
+  </div>
+</template>
+<script>
+import CIcon from "../CIcon/CIcon.vue";
+import CAvatar from "../CAvatar/CAvatar.vue";
+import { isNumber } from "lodash";
+export default {
+  name: "CSelect",
+  components: { CIcon, CAvatar },
+  props: {
+    // label of selectpicker
+    label: {
+      type: String,
+    },
+    // placeholder in selectpicker
+    placeholder: {
+      type: String,
+    },
+    // list to render in dropdown
+    options: {
+      type: Array,
+      required: true,
+    },
+    // show the avatars with different colors
+    coloredAvatars: {
+      type: Boolean,
+    },
+    // text below dropdown to describe more about the field
+    helpText: {
+      type: String,
+    },
+    // text adjacent to label of dropdown to provide hint about field
+    hint: { type: String },
+    // to show if image is present along with dropdown option
+    showImage: { type: Boolean },
+    // whether the select field is mandatory or not
+    isRequired: {
+      type: Boolean,
+    },
+    // validation is passed or not
+    isValidate: { type: Boolean, default: true },
+    // will truncate the text in input field
+    selectedOptionStyles: {
+      type: String,
+    },
+    // validation error message
+    errorMessage: {
+      type: String,
+    },
+    // perform action on first option in dropdown
+    addAction: { type: Object },
+    // icons in dropdown list
+    icon: { type: Object },
+    // value to set as default option in dropdown
+    value: { type: [Object, String], default: null },
+    // type of dropdown - gray,tertiary or default
+    type: {
+      type: String,
+    },
+    //  name of the field in array to that contains text to render in dropdown
+    renderOptionName: {
+      type: String,
+      default: "option",
+    },
+    // whether to disable the selectpicker
+    isDisabled: {
+      type: Boolean,
+      default: false,
+    },
+    inputClasses: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      toggleDropdown: false,
+      selectedValue: null,
+      showSelectedValue: false,
+      showFocus: false,
+      selectSearch: null,
+      renderOptions: this.options,
+    };
+  },
+  computed: {
+    classes() {
+      return {
+        "text-gray-900 border border-gray-200 hover:bg-gray-200 bg-gray-100 focus:ring-2 focus:border-gray-200 focus:ring-gray-200 focus:ring-offset-2 shadow-sm":
+          this.type == "gray",
+        "bg-white border border-gray-200 hover:bg-indigo-100 text-indigo-600 hover:text-indigo-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-200":
+          this.type == "tertiary",
+        "border border-gray-300 focus:ring-indigo-500 focus:border-indigo-500 bg-white shadow-sm focus:ring-1":
+          this.type == null,
+      };
+    },
+  },
+  methods: {
+    handleSelect(event, option) {
+      this.selectSearch = null;
+      this.selectedValue = option[this.renderOptionName];
+      this.$emit("onChangeValue", option);
+      this.toggleDropdown = false;
+    },
+    actionEvent(event) {
+      this.$emit("listAction", event);
+    },
+    close() {
+      this.selectSearch = null;
+      this.toggleDropdown = false;
+      this.type === "tertiary" ? (this.showFocus = false) : "";
+      this.renderOptions = this.options;
+    },
+    search() {
+      this.selectedValue = null;
+      if (!this.selectSearch || this.selectSearch == "") {
+        this.renderOptions = this.options;
+        return;
+      }
+      let options = [...this.options];
+      this.renderOptions = options.filter((option) => {
+        isNumber(option[this.renderOptionName])
+          ? (option[this.renderOptionName] =
+              option[this.renderOptionName].toString())
+          : "";
+        return option[this.renderOptionName]
+          .toLowerCase()
+          .includes(this.selectSearch.toLowerCase());
+      });
+    },
+    async scrollOptionIntoView(refName) {
+      await this.$nextTick();
+      this.$refs[refName][0].scrollIntoView({
+        behavior: "smooth",
+        block: "center",
+      });
+    },
+  },
+  watch: {
+    value() {
+      this.selectedValue =
+        this.value !== null && this.value[this.renderOptionName]
+          ? this.value[this.renderOptionName]
+          : this.value;
+    },
+    options() {
+      this.renderOptions = this.options;
+    },
+    toggleDropdown(newValue) {
+      if (newValue) {
+        let index = this.renderOptions.findIndex(
+          (option) => option[this.renderOptionName] === this.selectedValue
+        );
+        if (index !== -1) {
+          let refName = `option-${String(index)}`;
+          this.scrollOptionIntoView(refName);
+        }
+      }
+    },
+  },
+  mounted() {
+    this.selectedValue =
+      this.value !== null && this.value[this.renderOptionName]
+        ? this.value[this.renderOptionName]
+        : this.value;
+  },
+};
+</script>