classcard-ui 0.2.1489 → 0.2.1490-beta.0

package/src/components/CEditor/index.js

@@ -1,7 +1,7 @@
-import CEditor from "./CEditor.vue";
-
-export default CEditor;
-export {
-  EDITOR_FONT_WHITELIST,
-  EDITOR_FONT_FAMILIES,
+import CEditor from "./CEditor.vue";
+
+export default CEditor;
+export {
+  EDITOR_FONT_WHITELIST,
+  EDITOR_FONT_FAMILIES,
 } from "./quill-font-setup";

package/src/components/CEditor/quill-font-setup.js

@@ -1,134 +1,134 @@
-import { Quill } from "vue-quill-editor";
-
-/** Short keys used by your toolbar option arrays */
-export const EDITOR_FONT_WHITELIST = [
-  "sans-serif",
-  "serif",
-  "monospace",
-  "comic-sans",
-  "verdana",
-];
-
-/** Fully resolved font stacks mapped to each key */
-export const EDITOR_FONT_FAMILIES = {
-  "sans-serif": 'Arial, Helvetica, sans-serif',
-  "serif": 'Georgia, "Times New Roman", serif',
-  "monospace": '"Courier New", Courier, monospace',
-  "comic-sans": 'Comic Sans MS, cursive',
-  "verdana": 'Verdana, Geneva, sans-serif',
-};
-
-const cleanStack = (stack) => String(stack || "").replace(/["']/g, "");
-
-const CLEANED_FONT_STACKS = Object.fromEntries(
-  Object.entries(EDITOR_FONT_FAMILIES).map(([key, stack]) => [key, cleanStack(stack)])
-);
-
-const EXACT_KEY_BY_CLEAN_STACK = Object.fromEntries(
-  Object.entries(CLEANED_FONT_STACKS).map(([key, cleanedStack]) => [cleanedStack, key])
-);
-
-const FONT_KEY_LOWER = Object.fromEntries(
-  EDITOR_FONT_WHITELIST.map((key) => [key, key.toLowerCase()])
-);
-
-function primaryFontName(stack) {
-  return stack.split(",")[0].trim().replace(/^["']|["']$/g, "");
-}
-
-function formatFontLabel(key) {
-  return key
-    .split("-")
-    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-    .join(" ");
-}
-
-export function buildEditorFontCss() {
-  const editorRules = EDITOR_FONT_WHITELIST.map((key) => {
-    const stack = EDITOR_FONT_FAMILIES[key];
-    const primary = primaryFontName(stack);
-    return `
-.ql-snow .ql-editor .ql-font-${key},
-.ql-snow .ql-editor [style*="font-family: ${primary}"],
-.ql-snow .ql-editor [style*='font-family: "${primary}"'] {
-  font-family: ${stack} !important;
-}`;
-  }).join("\n");
-  const toolbarRules = EDITOR_FONT_WHITELIST.map((key) => {
-    const stack = EDITOR_FONT_FAMILIES[key];
-    const label = formatFontLabel(key);
-    return `
-.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="${key}"]::before,
-.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="${key}"]::before {
-  content: "${label}";
-  font-family: ${stack};
-}`;
-  }).join("\n");
-  return `
-.ql-snow .ql-picker.ql-font .ql-picker-label::before,
-.ql-snow .ql-picker.ql-font .ql-picker-item::before {
-  content: "Default";
-}
-${editorRules}
-${toolbarRules}`;
-}
-
-const Inline = Quill.import("blots/inline");
-
-// 1. Define a completely custom Font Format Blot instead of standard Class/Style overrides
-class CustomFontBlot extends Inline {
-  static create(value) {
-    const node = super.create();
-    
-    // Check if the incoming value is a shorthand key or a fully resolved font stack
-    if (EDITOR_FONT_FAMILIES[value]) {
-      node.style.fontFamily = EDITOR_FONT_FAMILIES[value];
-    } else if (Object.values(EDITOR_FONT_FAMILIES).includes(value)) {
-      node.style.fontFamily = value;
-    } else {
-      // Fallback fallback if an unknown value leaks through
-      node.style.fontFamily = value;
-    }
-    
-    return node;
-  }
-
-  static formats(node) {
-    const fontFamily = node.style.fontFamily || "";
-    const cleanFontFamily = cleanStack(fontFamily);
-  
-    // Fast path: exact match by cleaned stack
-    const exactKey = EXACT_KEY_BY_CLEAN_STACK[cleanFontFamily];
-    if (exactKey) return exactKey;
-  
-    // Fallback: preserve existing "includes(keyLower)" behavior
-    const lower = cleanFontFamily.toLowerCase();
-    const match = EDITOR_FONT_WHITELIST.find((key) =>
-      lower.includes(FONT_KEY_LOWER[key])
-    );
-  
-    return match || (typeof fontFamily === "string" ? fontFamily : undefined);
-  }
-
-  format(name, value) {
-    if (name === 'font' && value) {
-      if (EDITOR_FONT_FAMILIES[value]) {
-        this.domNode.style.fontFamily = EDITOR_FONT_FAMILIES[value];
-      } else {
-        this.domNode.style.fontFamily = value;
-      }
-    } else {
-      super.format(name, value);
-    }
-  }
-}
-
-// 2. Set the internal registration configurations for Quill
-CustomFontBlot.blotName = "font";
-CustomFontBlot.tagName = "span";
-CustomFontBlot.whitelist = EDITOR_FONT_WHITELIST;
-
-// 3. Register your new blot directly to overwrite Quill's standard 'formats/font' handle
-Quill.register(CustomFontBlot, true);
-
+import { Quill } from "vue-quill-editor";
+
+/** Short keys used by your toolbar option arrays */
+export const EDITOR_FONT_WHITELIST = [
+  "sans-serif",
+  "serif",
+  "monospace",
+  "comic-sans",
+  "verdana",
+];
+
+/** Fully resolved font stacks mapped to each key */
+export const EDITOR_FONT_FAMILIES = {
+  "sans-serif": 'Arial, Helvetica, sans-serif',
+  "serif": 'Georgia, "Times New Roman", serif',
+  "monospace": '"Courier New", Courier, monospace',
+  "comic-sans": 'Comic Sans MS, cursive',
+  "verdana": 'Verdana, Geneva, sans-serif',
+};
+
+const cleanStack = (stack) => String(stack || "").replace(/["']/g, "");
+
+const CLEANED_FONT_STACKS = Object.fromEntries(
+  Object.entries(EDITOR_FONT_FAMILIES).map(([key, stack]) => [key, cleanStack(stack)])
+);
+
+const EXACT_KEY_BY_CLEAN_STACK = Object.fromEntries(
+  Object.entries(CLEANED_FONT_STACKS).map(([key, cleanedStack]) => [cleanedStack, key])
+);
+
+const FONT_KEY_LOWER = Object.fromEntries(
+  EDITOR_FONT_WHITELIST.map((key) => [key, key.toLowerCase()])
+);
+
+function primaryFontName(stack) {
+  return stack.split(",")[0].trim().replace(/^["']|["']$/g, "");
+}
+
+function formatFontLabel(key) {
+  return key
+    .split("-")
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(" ");
+}
+
+export function buildEditorFontCss() {
+  const editorRules = EDITOR_FONT_WHITELIST.map((key) => {
+    const stack = EDITOR_FONT_FAMILIES[key];
+    const primary = primaryFontName(stack);
+    return `
+.ql-snow .ql-editor .ql-font-${key},
+.ql-snow .ql-editor [style*="font-family: ${primary}"],
+.ql-snow .ql-editor [style*='font-family: "${primary}"'] {
+  font-family: ${stack} !important;
+}`;
+  }).join("\n");
+  const toolbarRules = EDITOR_FONT_WHITELIST.map((key) => {
+    const stack = EDITOR_FONT_FAMILIES[key];
+    const label = formatFontLabel(key);
+    return `
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="${key}"]::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="${key}"]::before {
+  content: "${label}";
+  font-family: ${stack};
+}`;
+  }).join("\n");
+  return `
+.ql-snow .ql-picker.ql-font .ql-picker-label::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item::before {
+  content: "Default";
+}
+${editorRules}
+${toolbarRules}`;
+}
+
+const Inline = Quill.import("blots/inline");
+
+// 1. Define a completely custom Font Format Blot instead of standard Class/Style overrides
+class CustomFontBlot extends Inline {
+  static create(value) {
+    const node = super.create();
+    
+    // Check if the incoming value is a shorthand key or a fully resolved font stack
+    if (EDITOR_FONT_FAMILIES[value]) {
+      node.style.fontFamily = EDITOR_FONT_FAMILIES[value];
+    } else if (Object.values(EDITOR_FONT_FAMILIES).includes(value)) {
+      node.style.fontFamily = value;
+    } else {
+      // Fallback fallback if an unknown value leaks through
+      node.style.fontFamily = value;
+    }
+    
+    return node;
+  }
+
+  static formats(node) {
+    const fontFamily = node.style.fontFamily || "";
+    const cleanFontFamily = cleanStack(fontFamily);
+  
+    // Fast path: exact match by cleaned stack
+    const exactKey = EXACT_KEY_BY_CLEAN_STACK[cleanFontFamily];
+    if (exactKey) return exactKey;
+  
+    // Fallback: preserve existing "includes(keyLower)" behavior
+    const lower = cleanFontFamily.toLowerCase();
+    const match = EDITOR_FONT_WHITELIST.find((key) =>
+      lower.includes(FONT_KEY_LOWER[key])
+    );
+  
+    return match || (typeof fontFamily === "string" ? fontFamily : undefined);
+  }
+
+  format(name, value) {
+    if (name === 'font' && value) {
+      if (EDITOR_FONT_FAMILIES[value]) {
+        this.domNode.style.fontFamily = EDITOR_FONT_FAMILIES[value];
+      } else {
+        this.domNode.style.fontFamily = value;
+      }
+    } else {
+      super.format(name, value);
+    }
+  }
+}
+
+// 2. Set the internal registration configurations for Quill
+CustomFontBlot.blotName = "font";
+CustomFontBlot.tagName = "span";
+CustomFontBlot.whitelist = EDITOR_FONT_WHITELIST;
+
+// 3. Register your new blot directly to overwrite Quill's standard 'formats/font' handle
+Quill.register(CustomFontBlot, true);
+
 export default Quill;

package/src/components/CFormSectionHeading/CFormSectionHeading.vue

@@ -1,76 +1,76 @@
-<template>
-  <div>
-    <div :class="classes" class="border-gray-200">
-      <div class="flex items-center justify-between">
-        <div>
-          <h3 class="text-base font-semibold text-gray-900" :class="headingClass">
-            {{ heading }}
-          </h3>
-          <div class="flex items-center gap-1">
-            <c-icon
-            v-if="icon"
-            :name="icon.name"
-            :type="icon.type"
-            :class="icon.class"
-            :viewBox="icon.viewBox || '0 0 20 20'"
-            ></c-icon>
-            <p v-if="description" class="max-w-4xl text-sm text-gray-500">
-              {{ description }}
-            </p>
-          </div>
-        </div>
-        <c-button
-          v-if="tabAction"
-          :type="tabAction.type"
-          :label="tabAction.label"
-          :icon="tabAction.icon"
-          :id="id + '_action_button'"
-          @action="emitTabAction"
-        ></c-button>
-        <c-anchor-tag
-          v-if="tabLink"
-          :label="tabLink.label"
-          :action="emitTabLink"
-          :id="id + '_action_link'"
-        ></c-anchor-tag>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-import CAnchorTag from "../CAnchorTag/CAnchorTag.vue";
-import CButton from "../CButton/CButton.vue";
-import CIcon from '../CIcon/CIcon.vue';
-export default {
-  name: "CFormSectionHeading",
-  components: { CButton, CAnchorTag, CIcon },
-  props: {
-    heading: { type: String, required: true },
-    description: { type: String },
-    divider: { type: Boolean },
-    tabAction: { type: Object },
-    tabLink: { type: Object },
-    actionEvent: {
-      type: Function,
-    },
-    classes: {
-      type: String,
-    },
-    headingClass: {
-      type: String,
-      default: "",
-    },
-    icon: {
-      type: Object,
-    },
-  },
-  methods: {
-    emitTabAction() {
-      this.$emit("actionEvent");
-    },
-    emitTabLink() {
-      this.$emit("actionEvent");
-    },
-  },
-};
-</script>
+<template>
+  <div>
+    <div :class="classes" class="border-gray-200">
+      <div class="flex items-center justify-between">
+        <div>
+          <h3 class="text-base font-semibold text-gray-900" :class="headingClass">
+            {{ heading }}
+          </h3>
+          <div class="flex items-center gap-1">
+            <c-icon
+            v-if="icon"
+            :name="icon.name"
+            :type="icon.type"
+            :class="icon.class"
+            :viewBox="icon.viewBox || '0 0 20 20'"
+            ></c-icon>
+            <p v-if="description" class="max-w-4xl text-sm text-gray-500">
+              {{ description }}
+            </p>
+          </div>
+        </div>
+        <c-button
+          v-if="tabAction"
+          :type="tabAction.type"
+          :label="tabAction.label"
+          :icon="tabAction.icon"
+          :id="id + '_action_button'"
+          @action="emitTabAction"
+        ></c-button>
+        <c-anchor-tag
+          v-if="tabLink"
+          :label="tabLink.label"
+          :action="emitTabLink"
+          :id="id + '_action_link'"
+        ></c-anchor-tag>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import CAnchorTag from "../CAnchorTag/CAnchorTag.vue";
+import CButton from "../CButton/CButton.vue";
+import CIcon from '../CIcon/CIcon.vue';
+export default {
+  name: "CFormSectionHeading",
+  components: { CButton, CAnchorTag, CIcon },
+  props: {
+    heading: { type: String, required: true },
+    description: { type: String },
+    divider: { type: Boolean },
+    tabAction: { type: Object },
+    tabLink: { type: Object },
+    actionEvent: {
+      type: Function,
+    },
+    classes: {
+      type: String,
+    },
+    headingClass: {
+      type: String,
+      default: "",
+    },
+    icon: {
+      type: Object,
+    },
+  },
+  methods: {
+    emitTabAction() {
+      this.$emit("actionEvent");
+    },
+    emitTabLink() {
+      this.$emit("actionEvent");
+    },
+  },
+};
+</script>

package/src/components/CFormSectionHeading/index.js

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