classcard-ui 0.2.1475 → 0.2.1476

package/src/components/CRadio/CRadio.vue

@@ -1,197 +1,197 @@
-<template>
-  <div>
-    <div class="-space-y-px rounded-md bg-white" :class="customWrapperClasses">
-      <div
-        v-for="(item, index) in items"
-        :class="`relative ${
-          index != items.length - 1
-            ? useIncreasedPadding
-              ? 'pb-6'
-              : 'pb-4'
-            : ''
-        } ${
-          customClasses ? classes(item, index) : ''
-        } first:rounded-t-md last:rounded-b-md`"
-        v-bind:key="item[labelName]"
-      >
-        <div class="flex items-start">
-          <input
-            type="radio"
-            :value="item.value"
-            :name="name"
-            :id="id"
-            v-model="selectedItem"
-            @click="onChange(item.value)"
-            class="radio-state mt-0.5 h-4 w-4 cursor-pointer disabled:opacity-50"
-            :disabled="isDisabled"
-            :style="colorStyles"
-          />
-          <div
-            :class="`ml-3 flex cursor-pointer flex-col ${
-              isDisabled ? 'opacity-60' : ''
-            }`"
-            :id="id"
-            @click="onChange(item.value)"
-          >
-            <div class="flex items-center gap-2">
-              <p
-                class="text-sm font-medium text-gray-900"
-                :class="
-                  customClasses && item.value === selectedItem
-                    ? 'text-indigo-900'
-                    : ''
-                "
-              >
-                {{ item[labelName] }}
-              </p>
-              <c-tag
-                v-if="item.tag"
-                :label="item.tagLabel"
-                :color="item.tagColor"
-              ></c-tag>
-            </div>
-            <p
-              class="block text-sm"
-              :class="
-                customClasses && item.value === selectedItem
-                  ? 'text-indigo-700'
-                  : 'text-gray-500'
-              "
-            >
-              {{ item.description }}
-            </p>
-          </div>
-        </div>
-        <slot v-if="item.value === selectedItem" :name="item.value" />
-      </div>
-      <div
-        v-if="showClearSelection"
-        class="cursor-pointer pt-4 text-sm text-gray-400 hover:text-gray-700 hover:underline"
-        @click="clearSelection"
-      >
-        Clear selection
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import CTag from "../CTag/CTag.vue";
-import { COLOR_CONFIG } from "../../colorConfig";
-
-export default {
-  name: "CRadio",
-  components: { CTag },
-  props: {
-    id: {
-      type: String,
-    },
-    items: {
-      type: Array,
-      required: true,
-    },
-    selectedOption: {
-      type: [String, Number, Boolean],
-    },
-    isDisabled: {
-      type: Boolean,
-    },
-    customClasses: {
-      type: Boolean,
-      default: false,
-    },
-    customWrapperClasses: {
-      type: String,
-    },
-    name: {
-      type: String,
-      required: true,
-    },
-    labelName: {
-      type: String,
-      default: "label",
-    },
-    showClearSelection: {
-      type: Boolean,
-      default: false,
-    },
-    useIncreasedPadding: {
-      type: Boolean,
-      default: false,
-    },
-    preferredColor: {
-      type: String,
-      default: "indigo",
-    },
-  },
-  data() {
-    return {
-      selectedItem: this.selectedOption,
-    };
-  },
-  methods: {
-    clearSelection() {
-      this.$emit("onChange", null);
-      this.selectedItem = null;
-    },
-    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;
-    },
-  },
-  computed: {
-    colorStyles() {
-      const colors = COLOR_CONFIG[this.preferredColor] || COLOR_CONFIG.indigo;
-      return {
-        "--radio-enabled-color": colors.shade600,
-        "--radio-focus-color": colors.shade500,
-      };
-    },
-  },
-  watch: {
-    selectedOption() {
-      this.selectedItem = this.selectedOption;
-    },
-  },
-};
-</script>
-
-<style scoped>
-/* Unselected state: gray border */
-.radio-state {
-  border-color: #d1d5db !important;
-}
-/* Selected state: use theme color for fill and border */
-.radio-state:checked {
-  color: var(--radio-enabled-color) !important;
-  border-color: var(--radio-enabled-color) !important;
-}
-.radio-state:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px white, 0 0 0 4px var(--radio-focus-color) !important;
-}
-</style>
+<template>
+  <div>
+    <div class="-space-y-px rounded-md bg-white" :class="customWrapperClasses">
+      <div
+        v-for="(item, index) in items"
+        :class="`relative ${
+          index != items.length - 1
+            ? useIncreasedPadding
+              ? 'pb-6'
+              : 'pb-4'
+            : ''
+        } ${
+          customClasses ? classes(item, index) : ''
+        } first:rounded-t-md last:rounded-b-md`"
+        v-bind:key="item[labelName]"
+      >
+        <div class="flex items-start">
+          <input
+            type="radio"
+            :value="item.value"
+            :name="name"
+            :id="id"
+            v-model="selectedItem"
+            @click="onChange(item.value)"
+            class="radio-state mt-0.5 h-4 w-4 cursor-pointer disabled:opacity-50"
+            :disabled="isDisabled"
+            :style="colorStyles"
+          />
+          <div
+            :class="`ml-3 flex cursor-pointer flex-col ${
+              isDisabled ? 'opacity-60' : ''
+            }`"
+            :id="id"
+            @click="onChange(item.value)"
+          >
+            <div class="flex items-center gap-2">
+              <p
+                class="text-sm font-medium text-gray-900"
+                :class="
+                  customClasses && item.value === selectedItem
+                    ? 'text-indigo-900'
+                    : ''
+                "
+              >
+                {{ item[labelName] }}
+              </p>
+              <c-tag
+                v-if="item.tag"
+                :label="item.tagLabel"
+                :color="item.tagColor"
+              ></c-tag>
+            </div>
+            <p
+              class="block text-sm"
+              :class="
+                customClasses && item.value === selectedItem
+                  ? 'text-indigo-700'
+                  : 'text-gray-500'
+              "
+            >
+              {{ item.description }}
+            </p>
+          </div>
+        </div>
+        <slot v-if="item.value === selectedItem" :name="item.value" />
+      </div>
+      <div
+        v-if="showClearSelection"
+        class="cursor-pointer pt-4 text-sm text-gray-400 hover:text-gray-700 hover:underline"
+        @click="clearSelection"
+      >
+        Clear selection
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import CTag from "../CTag/CTag.vue";
+import { COLOR_CONFIG } from "../../colorConfig";
+
+export default {
+  name: "CRadio",
+  components: { CTag },
+  props: {
+    id: {
+      type: String,
+    },
+    items: {
+      type: Array,
+      required: true,
+    },
+    selectedOption: {
+      type: [String, Number, Boolean],
+    },
+    isDisabled: {
+      type: Boolean,
+    },
+    customClasses: {
+      type: Boolean,
+      default: false,
+    },
+    customWrapperClasses: {
+      type: String,
+    },
+    name: {
+      type: String,
+      required: true,
+    },
+    labelName: {
+      type: String,
+      default: "label",
+    },
+    showClearSelection: {
+      type: Boolean,
+      default: false,
+    },
+    useIncreasedPadding: {
+      type: Boolean,
+      default: false,
+    },
+    preferredColor: {
+      type: String,
+      default: "indigo",
+    },
+  },
+  data() {
+    return {
+      selectedItem: this.selectedOption,
+    };
+  },
+  methods: {
+    clearSelection() {
+      this.$emit("onChange", null);
+      this.selectedItem = null;
+    },
+    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;
+    },
+  },
+  computed: {
+    colorStyles() {
+      const colors = COLOR_CONFIG[this.preferredColor] || COLOR_CONFIG.indigo;
+      return {
+        "--radio-enabled-color": colors.shade600,
+        "--radio-focus-color": colors.shade500,
+      };
+    },
+  },
+  watch: {
+    selectedOption() {
+      this.selectedItem = this.selectedOption;
+    },
+  },
+};
+</script>
+
+<style scoped>
+/* Unselected state: gray border */
+.radio-state {
+  border-color: #d1d5db !important;
+}
+/* Selected state: use theme color for fill and border */
+.radio-state:checked {
+  color: var(--radio-enabled-color) !important;
+  border-color: var(--radio-enabled-color) !important;
+}
+.radio-state:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px white, 0 0 0 4px var(--radio-focus-color) !important;
+}
+</style>

package/src/components/CRadio/index.js

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

package/src/components/CRadioGroup/CRadioGroup.vue

@@ -1,97 +1,97 @@
-<template>
-  <fieldset :aria-label="ariaLabel">
-    <div class="flex flex-col gap-4">
-      <label
-        v-for="option in options"
-        :key="option.id"
-        :aria-label="option.name"
-        class="group relative px-5 py-4 flex items-center gap-2.5 rounded-md cursor-pointer border"
-        :class="
-          selectedOptionId === option.id
-            ? 'border-indigo-700 outline outline-1 outline-offset-0 outline-indigo-700'
-            : 'border-gray-300'
-        "
-      >
-        <input
-          type="radio"
-          :name="name"
-          :value="option.id"
-          :checked="selectedOptionId === option.id"
-          class="sr-only"
-          @change="handleSelectOption(option)"
-        />
-        <span
-          v-if="option.color"
-          class="w-2 h-6"
-          :style="{
-            backgroundColor: getBackgroundColor(option.color),
-          }"
-        />
-        <span class="text-sm text-gray-900">{{ option.name }}</span>
-      </label>
-    </div>
-  </fieldset>
-</template>
-  
-  <script>
-export default {
-  name: "CRadioGroup",
-  props: {
-    options: {
-      type: Array,
-      required: true,
-      default: () => [],
-    },
-    value: {
-      type: [String, Number],
-      default: null,
-    },
-    name: {
-      type: String,
-      default: "radio-group",
-    },
-    ariaLabel: {
-      type: String,
-      default: "Select an option",
-    },
-    colorMap: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-  data() {
-    return {
-      selectedOptionId: this.value,
-      defaultColorMap: {
-        blue: "#dbeafe#1d4ed8",
-        indigo: "#e0e7ff#247DAE",
-        yellow: "#fef9c3#a16207",
-        red: "#fee2e2#b91c1c",
-        pink: "#fce7f3#be185d",
-        green: "#dcfce7#15803d",
-        gray: "#f3f4f6#374151",
-      },
-    };
-  },
-  methods: {
-    handleSelectOption(option) {
-      if (this.selectedOptionId !== option.id) {
-        this.selectedOptionId = option.id;
-        this.$emit("onChange", option);
-      }
-    },
-    getColorCode(color) {
-      const colorCode = color.split("#")[2];
-      return `#${colorCode}`;
-    },
-    getBackgroundColor(color) {
-      const colorCode = this.colorMap[color]
-        ? this.colorMap[color]
-        : this.defaultColorMap[color.toLowerCase()];
-
-      const formattedColorCode = this.getColorCode(colorCode);
-      return formattedColorCode;
-    },
-  },
-};
+<template>
+  <fieldset :aria-label="ariaLabel">
+    <div class="flex flex-col gap-4">
+      <label
+        v-for="option in options"
+        :key="option.id"
+        :aria-label="option.name"
+        class="group relative px-5 py-4 flex items-center gap-2.5 rounded-md cursor-pointer border"
+        :class="
+          selectedOptionId === option.id
+            ? 'border-indigo-700 outline outline-1 outline-offset-0 outline-indigo-700'
+            : 'border-gray-300'
+        "
+      >
+        <input
+          type="radio"
+          :name="name"
+          :value="option.id"
+          :checked="selectedOptionId === option.id"
+          class="sr-only"
+          @change="handleSelectOption(option)"
+        />
+        <span
+          v-if="option.color"
+          class="w-2 h-6"
+          :style="{
+            backgroundColor: getBackgroundColor(option.color),
+          }"
+        />
+        <span class="text-sm text-gray-900">{{ option.name }}</span>
+      </label>
+    </div>
+  </fieldset>
+</template>
+  
+  <script>
+export default {
+  name: "CRadioGroup",
+  props: {
+    options: {
+      type: Array,
+      required: true,
+      default: () => [],
+    },
+    value: {
+      type: [String, Number],
+      default: null,
+    },
+    name: {
+      type: String,
+      default: "radio-group",
+    },
+    ariaLabel: {
+      type: String,
+      default: "Select an option",
+    },
+    colorMap: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  data() {
+    return {
+      selectedOptionId: this.value,
+      defaultColorMap: {
+        blue: "#dbeafe#1d4ed8",
+        indigo: "#e0e7ff#247DAE",
+        yellow: "#fef9c3#a16207",
+        red: "#fee2e2#b91c1c",
+        pink: "#fce7f3#be185d",
+        green: "#dcfce7#15803d",
+        gray: "#f3f4f6#374151",
+      },
+    };
+  },
+  methods: {
+    handleSelectOption(option) {
+      if (this.selectedOptionId !== option.id) {
+        this.selectedOptionId = option.id;
+        this.$emit("onChange", option);
+      }
+    },
+    getColorCode(color) {
+      const colorCode = color.split("#")[2];
+      return `#${colorCode}`;
+    },
+    getBackgroundColor(color) {
+      const colorCode = this.colorMap[color]
+        ? this.colorMap[color]
+        : this.defaultColorMap[color.toLowerCase()];
+
+      const formattedColorCode = this.getColorCode(colorCode);
+      return formattedColorCode;
+    },
+  },
+};
 </script>

package/src/components/CRadioGroup/index.js

@@ -1,3 +1,3 @@
-import CRadioGroup from './CRadioGroup.vue'
-
+import CRadioGroup from './CRadioGroup.vue'
+
 export default CRadioGroup;