classcard-ui 0.2.666 → 0.2.671

package/src/components/CPhoneNumber/CPhoneNumber.vue

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

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

package/src/components/CRadio/CRadio.vue

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

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

package/src/components/CRangeSlider/CRangeSlider.vue

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

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

package/src/components/CReorderableStackedList/CReorderableStackedList.vue

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

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

package/src/components/CSelect/CSelect.vue

@@ -1,343 +0,0 @@
-<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 truncate" :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>