classcard-ui 0.2.1541 → 0.2.1543

package/package.json

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

package/src/components/CDatepicker/CDatepicker.vue

@@ -2,8 +2,11 @@
   <div>
     <div class="flex items-center justify-between">
       <div class="flex items-center">
-        <label v-if="label" class="block text-sm font-medium text-gray-900">
-          {{ label }}
+        <label
+          v-if="label"
+          class="block text-sm font-medium text-gray-900"
+          v-html="formattedLabel"
+        >
         </label>
         <p v-if="isRequired" class="ml-1 text-red-600">*</p>
       </div>
@@ -94,6 +97,7 @@
 import { COLOR_CONFIG } from "../../colorConfig";
 import CIcon from "../CIcon/CIcon.vue";
 import VDatePicker from "v-calendar/lib/components/date-picker.umd";
+import { linkifyText } from "../../helper.js";
 export default {
   name: "CDatepicker",
   components: {
@@ -221,6 +225,10 @@ export default {
     };
   },
   computed: {
+    // label with any URLs rendered as clickable links
+    formattedLabel() {
+      return linkifyText(this.label);
+    },
     computedStyles() {
       const colors = COLOR_CONFIG[this.preferredColor] || COLOR_CONFIG.indigo;
       return {

package/src/components/CInput/CInput.vue

@@ -6,8 +6,8 @@
         <label
           :for="controlId"
           class="block text-sm font-medium text-gray-900"
+          v-html="formattedLabel"
         >
-          {{ label }}
         </label>
         <!-- asterisk sign to render if field is required -->
         <p v-if="isRequired" class="ml-1 text-red-600">*</p>
@@ -104,6 +104,7 @@
 <script>
 import CIcon from "../CIcon/CIcon.vue";
 import CToolTip from "../CToolTip/CToolTip.vue";
+import { linkifyText } from "../../helper.js";
 export default {
   name: "CInput",
   components: { CIcon, CToolTip },
@@ -202,6 +203,10 @@ export default {
     },
   },
   computed: {
+    // label with any URLs rendered as clickable links
+    formattedLabel() {
+      return linkifyText(this.label);
+    },
     // Use the id prop when the parent gives one. If not, make a stable id.
     // The stable id links the label to the input control.
     controlId() {

package/src/components/CInputAddon/CInputAddon.vue

@@ -9,8 +9,8 @@
         <label
           :for="controlId"
           class="block text-sm font-medium text-gray-900"
+          v-html="formattedLabel"
         >
-          {{ label }}
         </label>
         <!-- asterisk sign to render if field is required -->
         <p v-if="isRequired" class="ml-1 text-red-600">*</p>
@@ -200,6 +200,7 @@
 
 <script>
 import CIcon from "../CIcon/CIcon.vue";
+import { linkifyText } from "../../helper.js";
 export default {
   name: "CInputAddon",
   components: { CIcon },
@@ -249,6 +250,10 @@ export default {
     },
   },
   computed: {
+    // label with any URLs rendered as clickable links
+    formattedLabel() {
+      return linkifyText(this.label);
+    },
     // Use the id prop when the parent gives one. If not, make a stable id.
     // The stable id links the label to the input control.
     controlId() {

package/src/components/CInputEmail/CInputEmail.vue

@@ -7,8 +7,8 @@
           v-if="label"
           :for="controlId"
           class="block text-sm font-medium text-gray-900"
+          v-html="formattedLabel"
         >
-          {{ label }}
         </label>
         <!-- asterisk sign to render if field is required -->
         <p v-if="isRequired" class="ml-1 text-red-600">*</p>
@@ -49,6 +49,7 @@
 
 <script>
 import CIcon from "../CIcon/CIcon.vue";
+import { linkifyText } from "../../helper.js";
 export default {
   name: "CInputEmail",
   components: { CIcon },
@@ -91,6 +92,10 @@ export default {
     };
   },
   computed: {
+    // label with any URLs rendered as clickable links
+    formattedLabel() {
+      return linkifyText(this.label);
+    },
     // Use the id prop when the parent gives one. If not, make a stable id.
     // The stable id links the label to the input control.
     controlId() {

package/src/components/CMultiselect/CMultiselect.vue

@@ -3,9 +3,11 @@
     <div class="mb-1 flex w-full items-center justify-between" v-if="label">
       <div class="flex items-center">
         <!-- label of multiselect field -->
-        <label v-if="label" class="text-sm font-medium text-gray-900">{{
-          label
-        }}</label>
+        <label
+          v-if="label"
+          class="text-sm font-medium text-gray-900"
+          v-html="formattedLabel"
+        ></label>
         <!-- asterisk sign to render if field is required -->
         <p v-if="isRequired" class="ml-1 text-red-600">*</p>
       </div>
@@ -541,7 +543,7 @@ import CIcon from "../CIcon/CIcon.vue";
 import CCheckbox from "../CCheckbox/CCheckbox.vue";
 import { debounce } from "lodash-es";
 import "vue-select/dist/vue-select.css";
-import { getActionID } from "../../helper";
+import { getActionID, linkifyText } from "../../helper";
 import CTag from "../CTag/CTag.vue";
 export default {
   name: "CMultiselect",
@@ -742,6 +744,10 @@ export default {
     },
   },
   computed: {
+    // label with any URLs rendered as clickable links
+    formattedLabel() {
+      return linkifyText(this.label);
+    },
     groupedArray() {
       const groups = {};
 

package/src/components/CPhoneNumber/CPhoneNumber.vue

@@ -6,8 +6,8 @@
         <label
           class="text-sm text-gray-900"
           :class="[isBlock ? ' font-medium' : '']"
-          >{{ label }}</label
-        >
+          v-html="formattedLabel"
+        ></label>
         <!-- asterisk sign to render if field is required -->
         <p v-if="isRequired" class="ml-1 text-red-600">*</p>
       </div>
@@ -52,6 +52,7 @@
 <script>
 import { VueTelInput } from "vue-tel-input";
 import CIcon from "../CIcon/CIcon.vue";
+import { linkifyText } from "../../helper.js";
 export default {
   name: "CPhoneNumber",
   components: {
@@ -123,6 +124,12 @@ export default {
       },
     };
   },
+  computed: {
+    // label with any URLs rendered as clickable links
+    formattedLabel() {
+      return linkifyText(this.label);
+    },
+  },
   methods: {
     handleBlur() {
       this.isFocused = false;

package/src/components/CRadio/CRadio.vue

@@ -7,14 +7,13 @@
       <div
         v-for="(item, index) in items"
         :class="[
-          'relative first:rounded-t-md last:rounded-b-md',
+          'relative cursor-pointer first:rounded-t-md last:rounded-b-md',
           index != items.length - 1
             ? useIncreasedPadding
               ? 'pb-6'
               : 'pb-4'
             : '',
           customClasses ? classes(item, index) : '',
-          isDisabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer',
         ]"
         v-bind:key="item[labelName]"
       >

package/src/components/CSelect/CSelect.vue

@@ -10,8 +10,8 @@
         <label
           :for="controlId"
           class="block text-sm font-medium text-gray-900"
+          v-html="formattedLabel"
         >
-          {{ label }}
         </label>
         <!-- asterisk sign to render if field is required -->
         <p v-if="isRequired" class="ml-1 text-red-600">*</p>
@@ -629,7 +629,7 @@
 <script>
 import { isNumber, isEmpty } from "lodash-es";
 import CIcon from "../CIcon/CIcon.vue";
-import { getActionID } from "../../helper";
+import { getActionID, linkifyText } from "../../helper";
 import CTag from "../CTag/CTag.vue";
 import CAvatar from "../CAvatar/CAvatar.vue";
 export default {
@@ -798,6 +798,10 @@ export default {
     };
   },
   computed: {
+    // label with any URLs rendered as clickable links
+    formattedLabel() {
+      return linkifyText(this.label);
+    },
     // Use the id prop when the parent gives one. If not, make a stable id.
     // The stable id links the label to the main trigger input.
     controlId() {

package/src/components/CTextarea/CTextarea.vue

@@ -7,8 +7,8 @@
           v-if="label"
           :for="controlId"
           class="block text-sm font-medium text-gray-900"
+          v-html="formattedLabel"
         >
-          {{ label }}
         </label>
         <!-- asterisk sign to render if field is required -->
         <p v-if="isRequired" class="ml-1 text-red-600">*</p>
@@ -46,6 +46,7 @@
 </template>
 <script>
 // import CIcon from "../CIcon/CIcon.vue";
+import { linkifyText } from "../../helper.js";
 export default {
   name: "CTextarea",
   // components: { CIcon },
@@ -94,6 +95,10 @@ export default {
     },
   },
   computed: {
+    // label with any URLs rendered as clickable links
+    formattedLabel() {
+      return linkifyText(this.label);
+    },
     // Use the id prop when the parent gives one. If not, make a stable id.
     // The stable id links the label to the textarea control.
     controlId() {

package/src/components/CUpload/CUpload.vue

@@ -3,9 +3,10 @@
     <div class="flex items-center justify-between">
       <div class="flex items-center">
         <!-- label of input field -->
-        <label class="block text-sm font-medium text-gray-900">{{
-          label
-        }}</label>
+        <label
+          class="block text-sm font-medium text-gray-900"
+          v-html="formattedLabel"
+        ></label>
         <!-- asterisk sign to render if field is required -->
         <p v-if="isRequired" class="ml-1 text-red-600">*</p>
       </div>
@@ -109,6 +110,7 @@
 import * as filestack from "filestack-js";
 import CIcon from "../CIcon/CIcon.vue";
 import CAvatar from "../CAvatar/CAvatar.vue";
+import { linkifyText } from "../../helper.js";
 
 export default {
   name: "CUpload",
@@ -308,6 +310,10 @@ export default {
     },
   },
   computed: {
+    // label with any URLs rendered as clickable links
+    formattedLabel() {
+      return linkifyText(this.label);
+    },
     errorClasses() {
       return {
         "border-red-300 text-red-900 placeholder-red-300 focus:ring-red-500 focus:border-red-500":

package/src/helper.js

@@ -1,3 +1,22 @@
+// Escapes HTML, then wraps any http(s) URL in a clickable anchor.
+// Safe to bind with v-html because the source text is escaped first.
+export const linkifyText = (text) => {
+  if (!text) {
+    return "";
+  }
+  const escaped = String(text)
+    .replace(/&/g, "&")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#39;");
+  return escaped.replace(
+    /(https?:\/\/[^\s]+)/g,
+    (url) =>
+      `<a href="${url}" target="_blank" rel="noopener noreferrer" class="text-indigo-600 hover:underline">${url}</a>`
+  );
+};
+
 export const getActionID = (name, id) => {
   if (name == null) {
     return "";

package/src/stories/CInput.stories.js

@@ -65,6 +65,14 @@ Default.args = {
   trailingIconClass: "h-5 w-5 text-gray-400",
 };
 
+export const LabelWithLink = Template.bind({});
+LabelWithLink.args = {
+  label: "I agree to the terms https://example.com/terms",
+  placeholder: "Enter your name",
+  isValidate: true,
+  type: "text",
+};
+
 export const TrailingIcon = Template.bind({});
 TrailingIcon.args = {
   label: "Email",