classcard-ui 0.2.1539 → 0.2.1541

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "classcard-ui",
-  "version": "0.2.1539",
+  "version": "0.2.1541",
   "main": "dist/classcard-ui.umd.min.js",
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/components/CDatepicker/CDatepicker.vue

@@ -5,7 +5,6 @@
         <label v-if="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>
@@ -34,13 +33,18 @@
           <div v-if="showOnlyDatePickerIcon">
             <button
               type="button"
-              class="relative flex h-9 w-9 cursor-pointer items-center justify-center rounded focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 disabled:custom-disabled-state"
+              class="datepicker-button relative flex h-9 w-9 cursor-pointer items-center justify-center rounded focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 disabled:custom-disabled-state"
               :id="id + '_button_toggle_dropdown'"
               :disabled="disabled"
+              :style="computedStyles"
+              :aria-disabled="disabled"
+              :aria-label="disabled ? 'Disabled' : 'Open datepicker'"
+              :title="disabled ? 'Disabled' : 'Open datepicker'"
               @click="togglePopover()"
             >
               <c-icon
                 :name="calendarIcon.iconName"
+                :cursorType="disabled ? 'not-allowed' : 'pointer'"
                 class="text-gray-400 flex h-5 w-5 justify-center"
                 :type="calendarIcon.type ? calendarIcon.type : 'solid'"
                 :viewBox="calendarIcon.viewBox ? calendarIcon.viewBox : ''"
@@ -60,8 +64,9 @@
               <c-icon
                 :name="calendarIcon.iconName"
                 class="text-gray-400 h-5 w-5"
-                :type="calendarIcon.type ? calendarIcon.type : 'solid'"
                 :viewBox="calendarIcon.viewBox"
+                :cursorType="disabled ? 'not-allowed' : 'pointer'"
+                :type="calendarIcon.type ? calendarIcon.type : 'solid'"
               ></c-icon>
             </button>
             <input
@@ -77,7 +82,6 @@
         </template>
       </v-date-picker>
     </div>
-    <!-- validation error message -->
     <p v-if="!isValidate" class="mt-2 text-sm text-red-600">
       {{ errorMessage }}
     </p>
@@ -87,13 +91,12 @@
   </div>
 </template>
 <script>
+import { COLOR_CONFIG } from "../../colorConfig";
 import CIcon from "../CIcon/CIcon.vue";
-// import Calendar from "v-calendar/lib/components/calendar.umd";
 import VDatePicker from "v-calendar/lib/components/date-picker.umd";
 export default {
   name: "CDatepicker",
   components: {
-    // Calendar,
     VDatePicker,
     CIcon,
   },
@@ -188,6 +191,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    preferredColor: {
+      type: String,
+      default: "indigo",
+    },
   },
   data() {
     const masks = {
@@ -213,6 +220,14 @@ export default {
       ],
     };
   },
+  computed: {
+    computedStyles() {
+      const colors = COLOR_CONFIG[this.preferredColor] || COLOR_CONFIG.indigo;
+      return {
+        "--primary-ring-color": colors.shade600,
+      };
+    },
+  },
   methods: {
     onDayClick(date) {
       this.$emit("input", date);
@@ -233,3 +248,9 @@ export default {
   },
 };
 </script>
+
+<style scoped>
+.datepicker-button:focus {
+  outline-color: var(--primary-ring-color);
+}
+</style>

package/src/components/CMultiselect/CMultiselect.vue

@@ -180,9 +180,19 @@
             <div v-if="!isGrouped">
               <div v-if="option.hasNoData" class="dropdown-menu-bordered"></div>
               <div v-else class="group mt-1 flex h-full w-full items-center">
-                <div @click.stop v-if="addCheckBox" class="flex-shrink-0">
+                <div
+                  @click.stop
+                  v-if="addCheckBox"
+                  :class="[
+                    'flex-shrink-0',
+                    option.isDisabled || option.disabled
+                      ? 'pointer-events-none'
+                      : '',
+                  ]"
+                >
                   <c-checkbox
                     :value="isChecked(option)"
+                    :isDisabled="option.isDisabled || option.disabled"
                     @onChange="handleSingleSelect(option)"
                   />
                 </div>
@@ -298,9 +308,18 @@
                   option.description ? 'items-start' : 'items-center',
                 ]"
               >
-                <div @click.stop v-if="addCheckBox && !option.header">
+                <div
+                  @click.stop
+                  v-if="addCheckBox && !option.header"
+                  :class="
+                    option.isDisabled || option.disabled
+                      ? 'pointer-events-none'
+                      : ''
+                  "
+                >
                   <c-checkbox
                     :value="isChecked(option)"
+                    :isDisabled="option.isDisabled || option.disabled"
                     @onChange="handleSingleSelect(option)"
                   />
                 </div>

package/src/components/CRadio/CRadio.vue

@@ -1,17 +1,21 @@
 <template>
   <div>
-    <div class="-space-y-px rounded-md bg-white" :class="customWrapperClasses">
+    <div
+      class="-space-y-px rounded-md bg-white"
+      :class="customWrapperClasses"
+    >
       <div
         v-for="(item, index) in items"
-        :class="`relative ${
+        :class="[
+          'relative first:rounded-t-md last:rounded-b-md',
           index != items.length - 1
             ? useIncreasedPadding
               ? 'pb-6'
               : 'pb-4'
-            : ''
-        } ${
-          customClasses ? classes(item, index) : ''
-        } first:rounded-t-md last:rounded-b-md`"
+            : '',
+          customClasses ? classes(item, index) : '',
+          isDisabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer',
+        ]"
         v-bind:key="item[labelName]"
       >
         <div class="flex items-start">
@@ -19,22 +23,21 @@
             type="radio"
             :value="item.value"
             :name="name"
-            :id="id"
+            :id="id + '_input_' + item.value"
             v-model="selectedItem"
             @click="onChange(item.value)"
-            class="radio-state mt-0.5 h-4 w-4 cursor-pointer disabled:opacity-50"
+            class="radio-state mt-0.5 h-4 w-4 disabled:opacity-50 disabled:cursor-not-allowed"
             :disabled="isDisabled"
             :style="colorStyles"
           />
           <div
-            :class="`ml-3 flex cursor-pointer flex-col ${
-              isDisabled ? 'opacity-60' : ''
-            }`"
-            :id="id"
+            :id="id + '_label_' + item.value"
+            class="ml-3 flex flex-col"
             @click="onChange(item.value)"
           >
             <div class="flex items-center gap-2">
               <p
+                :id="id + '_label_text_' + item.value"
                 class="text-sm font-medium text-gray-900"
                 :class="
                   customClasses && item.value === selectedItem
@@ -43,7 +46,11 @@
                 "
               >
                 {{ item[labelName] }}
-                <span v-if="item.labelHelperText" :class="item.labelHelperTextClass">{{ item.labelHelperText }}</span>
+                <span
+                  v-if="item.labelHelperText"
+                  :class="item.labelHelperTextClass"
+                  >{{ item.labelHelperText }}</span
+                >
               </p>
               <c-tag
                 v-if="item.tag"
@@ -52,6 +59,7 @@
               ></c-tag>
             </div>
             <p
+              :id="id + '_description_' + item.value"
               class="block text-sm"
               :class="
                 customClasses && item.value === selectedItem
@@ -65,13 +73,14 @@
         </div>
         <slot v-if="item.value === selectedItem" :name="item.value" />
       </div>
-      <div
+      <button
         v-if="showClearSelection"
+        type="button"
         class="cursor-pointer pt-4 text-sm text-gray-400 hover:text-gray-700 hover:underline"
         @click="clearSelection"
       >
         Clear selection
-      </div>
+      </button>
     </div>
   </div>
 </template>
@@ -86,6 +95,7 @@ export default {
   props: {
     id: {
       type: String,
+      default: "c-radio",
     },
     items: {
       type: Array,

package/src/icons.js

@@ -900,5 +900,6 @@ export default {
   "arrows-pointing-in-solid-v2":
     "M3.22 3.22a.75.75 0 0 1 1.06 0l3.97 3.97V4.5a.75.75 0 0 1 1.5 0V9a.75.75 0 0 1-.75.75H4.5a.75.75 0 0 1 0-1.5h2.69L3.22 4.28a.75.75 0 0 1 0-1.06Zm17.56 0a.75.75 0 0 1 0 1.06l-3.97 3.97h2.69a.75.75 0 0 1 0 1.5H15a.75.75 0 0 1-.75-.75V4.5a.75.75 0 0 1 1.5 0v2.69l3.97-3.97a.75.75 0 0 1 1.06 0ZM3.75 15a.75.75 0 0 1 .75-.75H9a.75.75 0 0 1 .75.75v4.5a.75.75 0 0 1-1.5 0v-2.69l-3.97 3.97a.75.75 0 0 1-1.06-1.06l3.97-3.97H4.5a.75.75 0 0 1-.75-.75Zm10.5 0a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 0 1.5h-2.69l3.97 3.97a.75.75 0 1 1-1.06 1.06l-3.97-3.97v2.69a.75.75 0 0 1-1.5 0V15Z",
   "ticket-solid-v2": "M1.5 6.375c0-1.036.84-1.875 1.875-1.875h17.25c1.035 0 1.875.84 1.875 1.875v3.026a.75.75 0 0 1-.375.65 2.249 2.249 0 0 0 0 3.898.75.75 0 0 1 .375.65v3.026c0 1.035-.84 1.875-1.875 1.875H3.375A1.875 1.875 0 0 1 1.5 17.625v-3.026a.75.75 0 0 1 .374-.65 2.249 2.249 0 0 0 0-3.898.75.75 0 0 1-.374-.65V6.375Zm15-1.125a.75.75 0 0 1 .75.75v.75a.75.75 0 0 1-1.5 0V6a.75.75 0 0 1 .75-.75Zm.75 4.5a.75.75 0 0 0-1.5 0v.75a.75.75 0 0 0 1.5 0v-.75Zm-.75 3a.75.75 0 0 1 .75.75v.75a.75.75 0 0 1-1.5 0v-.75a.75.75 0 0 1 .75-.75Zm.75 4.5a.75.75 0 0 0-1.5 0V18a.75.75 0 0 0 1.5 0v-.75ZM6 12a.75.75 0 0 1 .75-.75H12a.75.75 0 0 1 0 1.5H6.75A.75.75 0 0 1 6 12Zm.75 2.25a.75.75 0 0 0 0 1.5h3a.75.75 0 0 0 0-1.5h-3Z",
-  "adjustments-horizontal-mini-v2": "M10 3.75a2 2 0 1 0-4 0 2 2 0 0 0 4 0ZM17.25 4.5a.75.75 0 0 0 0-1.5h-5.5a.75.75 0 0 0 0 1.5h5.5ZM5 3.75a.75.75 0 0 1-.75.75h-1.5a.75.75 0 0 1 0-1.5h1.5a.75.75 0 0 1 .75.75ZM4.25 17a.75.75 0 0 0 0-1.5h-1.5a.75.75 0 0 0 0 1.5h1.5ZM17.25 17a.75.75 0 0 0 0-1.5h-5.5a.75.75 0 0 0 0 1.5h5.5ZM9 10a.75.75 0 0 1-.75.75h-5.5a.75.75 0 0 1 0-1.5h5.5A.75.75 0 0 1 9 10ZM17.25 10.75a.75.75 0 0 0 0-1.5h-1.5a.75.75 0 0 0 0 1.5h1.5ZM14 10a2 2 0 1 0-4 0 2 2 0 0 0 4 0ZM10 16.25a2 2 0 1 0-4 0 2 2 0 0 0 4 0Z"
+  "adjustments-horizontal-mini-v2": "M10 3.75a2 2 0 1 0-4 0 2 2 0 0 0 4 0ZM17.25 4.5a.75.75 0 0 0 0-1.5h-5.5a.75.75 0 0 0 0 1.5h5.5ZM5 3.75a.75.75 0 0 1-.75.75h-1.5a.75.75 0 0 1 0-1.5h1.5a.75.75 0 0 1 .75.75ZM4.25 17a.75.75 0 0 0 0-1.5h-1.5a.75.75 0 0 0 0 1.5h1.5ZM17.25 17a.75.75 0 0 0 0-1.5h-5.5a.75.75 0 0 0 0 1.5h5.5ZM9 10a.75.75 0 0 1-.75.75h-5.5a.75.75 0 0 1 0-1.5h5.5A.75.75 0 0 1 9 10ZM17.25 10.75a.75.75 0 0 0 0-1.5h-1.5a.75.75 0 0 0 0 1.5h1.5ZM14 10a2 2 0 1 0-4 0 2 2 0 0 0 4 0ZM10 16.25a2 2 0 1 0-4 0 2 2 0 0 0 4 0Z",
+  "photo-solid-v2": "M1.5 6a2.25 2.25 0 0 1 2.25-2.25h16.5A2.25 2.25 0 0 1 22.5 6v12a2.25 2.25 0 0 1-2.25 2.25H3.75A2.25 2.25 0 0 1 1.5 18V6ZM3 16.06V18c0 .414.336.75.75.75h16.5A.75.75 0 0 0 21 18v-1.94l-2.69-2.689a1.5 1.5 0 0 0-2.12 0l-.88.879.97.97a.75.75 0 1 1-1.06 1.06l-5.16-5.159a1.5 1.5 0 0 0-2.12 0L3 16.061Zm10.125-7.81a1.125 1.125 0 1 1 2.25 0 1.125 1.125 0 0 1-2.25 0Z",
 };

package/src/stories/CDatepicker.stories.js

@@ -9,6 +9,12 @@ export default {
     classes: String,
     label: String,
     helpText: String,
+    preferredColor: {
+      control: {
+        type: "select",
+        options: ["red", "indigo", "yellow", "green", "purple", "gray"],
+      },
+    },
   },
 };