classcard-ui 0.2.1497 → 0.2.1498-beta.0

package/src/stories/CTokenEditor.stories.js

@@ -1,136 +1,136 @@
-import { EDITOR_FONT_WHITELIST } from "../components/CEditor/quill-font-setup.js";
-import CTokenEditor from "../components/CTokenEditor/CTokenEditor.vue";
-import "./utils.css";
-
-const TEMPLATE_VARIABLES = [
-  { value: "student.name", label: "Student Name", group: "Student" },
-  { value: "student.email", label: "Email", group: "Student" },
-  { value: "student.score", label: "Score", group: "Student" },
-  { value: "course.title", label: "Course Title", group: "Course" },
-  { value: "course.date", label: "Date", group: "Course" },
-];
-
-export default {
-  title: "CTokenEditor",
-  component: CTokenEditor,
-  argTypes: {
-    label: { control: "text" },
-    hint: { control: "text" },
-    helpText: { control: "text" },
-    placeholder: { control: "text" },
-    disabled: { control: "boolean" },
-    enableTokenChips: { control: "boolean" },
-    tokenSeparator: { control: "text" },
-    containerMinHeight: { control: "text" },
-    editorMaxHeight: { control: "text" },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { CTokenEditor },
-  template: '<c-token-editor v-bind="$props" />',
-});
-
-export const Default = Template.bind({});
-Default.args = {
-  label: "Message",
-  hint: "Optional",
-  helpText: "Type your message above.",
-  placeholder: "Start typing...",
-  content: "<p>Hello, welcome!</p>",
-  disabled: false,
-  enableTokenChips: false,
-  toolbarOptions: [
-    [{ font: EDITOR_FONT_WHITELIST }],
-    ["bold", "italic", "underline", "strike"],
-    [{ list: "ordered" }, { list: "bullet" }],
-    ["link", "image", "video"],
-  ],
-};
-
-export const WithTokenChips = () => ({
-  components: { CTokenEditor },
-  data() {
-    return {
-      content:
-        "Hello {{student.name}}, your score in {{course.title}} is {{student.score}}.",
-      output: "",
-      templateVariables: TEMPLATE_VARIABLES,
-    };
-  },
-  methods: {
-    insertToken(variable) {
-      this.$refs.tokenEditor.insertToken(variable);
-    },
-    onEditorChange({ rawText }) {
-      this.output = rawText;
-    },
-  },
-  template: `
-    <div style="max-width: 640px; padding: 24px; font-family: sans-serif;">
-      <c-token-editor
-        ref="tokenEditor"
-        label="Message template"
-        hint="Supports tokens"
-        help-text="Click a token button below to insert it at the cursor."
-        placeholder="Type your message..."
-        :content="content"
-        :template-variables="templateVariables"
-        :enable-token-chips="true"
-        @onEditorChange="onEditorChange"
-      />
-
-      <div style="margin-top: 12px;">
-        <p style="font-size: 12px; color: #6b7280; margin-bottom: 6px; font-weight: 500;">Insert token</p>
-        <div style="display: flex; flex-wrap: wrap; gap: 6px;">
-          <button
-            v-for="v in templateVariables"
-            :key="v.value"
-            @click="insertToken(v)"
-            style="padding: 3px 10px; font-size: 12px; border: 1px solid #e5e7eb; border-radius: 4px; background: #f9fafb; cursor: pointer; color: #374151;"
-          >
-            {{ v.group }} → {{ v.label }}
-          </button>
-        </div>
-      </div>
-
-      <div v-if="output" style="margin-top: 16px; padding: 12px; background: #f3f4f6; border-radius: 6px;">
-        <p style="font-size: 11px; font-weight: 600; color: #6b7280; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.05em;">Raw output</p>
-        <pre style="font-size: 12px; color: #111827; white-space: pre-wrap; word-break: break-all; margin: 0;">{{ output }}</pre>
-      </div>
-    </div>
-  `,
-});
-
-export const WithInvalidTokens = () => ({
-  components: { CTokenEditor },
-  data() {
-    return {
-      content: "Hi {{student.name}}, see you at {{unknown.token}}!",
-      templateVariables: [
-        { value: "student.name", label: "Student Name", group: "Student" },
-      ],
-    };
-  },
-  template: `
-    <div style="max-width: 640px; padding: 24px; font-family: sans-serif;">
-      <c-token-editor
-        label="Template with invalid token"
-        hint="One token is unknown"
-        help-text="Unknown tokens are highlighted in red."
-        :content="content"
-        :template-variables="templateVariables"
-        :enable-token-chips="true"
-      />
-    </div>
-  `,
-});
-
-export const Disabled = Template.bind({});
-Disabled.args = {
-  label: "Disabled editor",
-  content: "<p>This editor is read-only.</p>",
-  disabled: true,
-  enableTokenChips: false,
-};
+import { EDITOR_FONT_WHITELIST } from "../components/CEditor/quill-font-setup.js";
+import CTokenEditor from "../components/CTokenEditor/CTokenEditor.vue";
+import "./utils.css";
+
+const TEMPLATE_VARIABLES = [
+  { value: "student.name", label: "Student Name", group: "Student" },
+  { value: "student.email", label: "Email", group: "Student" },
+  { value: "student.score", label: "Score", group: "Student" },
+  { value: "course.title", label: "Course Title", group: "Course" },
+  { value: "course.date", label: "Date", group: "Course" },
+];
+
+export default {
+  title: "CTokenEditor",
+  component: CTokenEditor,
+  argTypes: {
+    label: { control: "text" },
+    hint: { control: "text" },
+    helpText: { control: "text" },
+    placeholder: { control: "text" },
+    disabled: { control: "boolean" },
+    enableTokenChips: { control: "boolean" },
+    tokenSeparator: { control: "text" },
+    containerMinHeight: { control: "text" },
+    editorMaxHeight: { control: "text" },
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { CTokenEditor },
+  template: '<c-token-editor v-bind="$props" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  label: "Message",
+  hint: "Optional",
+  helpText: "Type your message above.",
+  placeholder: "Start typing...",
+  content: "<p>Hello, welcome!</p>",
+  disabled: false,
+  enableTokenChips: false,
+  toolbarOptions: [
+    [{ font: EDITOR_FONT_WHITELIST }],
+    ["bold", "italic", "underline", "strike"],
+    [{ list: "ordered" }, { list: "bullet" }],
+    ["link", "image", "video"],
+  ],
+};
+
+export const WithTokenChips = () => ({
+  components: { CTokenEditor },
+  data() {
+    return {
+      content:
+        "Hello {{student.name}}, your score in {{course.title}} is {{student.score}}.",
+      output: "",
+      templateVariables: TEMPLATE_VARIABLES,
+    };
+  },
+  methods: {
+    insertToken(variable) {
+      this.$refs.tokenEditor.insertToken(variable);
+    },
+    onEditorChange({ rawText }) {
+      this.output = rawText;
+    },
+  },
+  template: `
+    <div style="max-width: 640px; padding: 24px; font-family: sans-serif;">
+      <c-token-editor
+        ref="tokenEditor"
+        label="Message template"
+        hint="Supports tokens"
+        help-text="Click a token button below to insert it at the cursor."
+        placeholder="Type your message..."
+        :content="content"
+        :template-variables="templateVariables"
+        :enable-token-chips="true"
+        @onEditorChange="onEditorChange"
+      />
+
+      <div style="margin-top: 12px;">
+        <p style="font-size: 12px; color: #6b7280; margin-bottom: 6px; font-weight: 500;">Insert token</p>
+        <div style="display: flex; flex-wrap: wrap; gap: 6px;">
+          <button
+            v-for="v in templateVariables"
+            :key="v.value"
+            @click="insertToken(v)"
+            style="padding: 3px 10px; font-size: 12px; border: 1px solid #e5e7eb; border-radius: 4px; background: #f9fafb; cursor: pointer; color: #374151;"
+          >
+            {{ v.group }} → {{ v.label }}
+          </button>
+        </div>
+      </div>
+
+      <div v-if="output" style="margin-top: 16px; padding: 12px; background: #f3f4f6; border-radius: 6px;">
+        <p style="font-size: 11px; font-weight: 600; color: #6b7280; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.05em;">Raw output</p>
+        <pre style="font-size: 12px; color: #111827; white-space: pre-wrap; word-break: break-all; margin: 0;">{{ output }}</pre>
+      </div>
+    </div>
+  `,
+});
+
+export const WithInvalidTokens = () => ({
+  components: { CTokenEditor },
+  data() {
+    return {
+      content: "Hi {{student.name}}, see you at {{unknown.token}}!",
+      templateVariables: [
+        { value: "student.name", label: "Student Name", group: "Student" },
+      ],
+    };
+  },
+  template: `
+    <div style="max-width: 640px; padding: 24px; font-family: sans-serif;">
+      <c-token-editor
+        label="Template with invalid token"
+        hint="One token is unknown"
+        help-text="Unknown tokens are highlighted in red."
+        :content="content"
+        :template-variables="templateVariables"
+        :enable-token-chips="true"
+      />
+    </div>
+  `,
+});
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  label: "Disabled editor",
+  content: "<p>This editor is read-only.</p>",
+  disabled: true,
+  enableTokenChips: false,
+};

package/src/stories/CToolTip.stories.js

@@ -1,27 +1,27 @@
-import CToolTip from "../components/CToolTip/CToolTip.vue";
-import "./utils.css";
-
-export default {
-  title: "CToolTip",
-  component: CToolTip,
-  argTypes: {
-    classes: String,
-    tooltipText: String,
-    color: String,
-    isTopAligned: Boolean,
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { CToolTip },
-  template: '<c-tool-tip v-bind="$props" />',
-});
-
-export const Default = Template.bind({});
-Default.args = {
-  classes: "text-white bg-gray-800 w-72",
-  tooltipText: "ToolTipText",
-  color: "#1f2937",
-  isTopAligned: false,
-};
+import CToolTip from "../components/CToolTip/CToolTip.vue";
+import "./utils.css";
+
+export default {
+  title: "CToolTip",
+  component: CToolTip,
+  argTypes: {
+    classes: String,
+    tooltipText: String,
+    color: String,
+    isTopAligned: Boolean,
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { CToolTip },
+  template: '<c-tool-tip v-bind="$props" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  classes: "text-white bg-gray-800 w-72",
+  tooltipText: "ToolTipText",
+  color: "#1f2937",
+  isTopAligned: false,
+};

package/src/stories/CUpload.stories.js

@@ -1,36 +1,36 @@
-import CUpload from "../components/CUpload/CUpload.vue";
-import "./utils.css";
-
-export default {
-  title: "CUpload",
-  component: CUpload,
-  argTypes: {
-    label: String,
-    hint: String,
-    fileSize: String,
-    isValidate: Boolean,
-    type: {
-      control: {
-        type: "inline-radio",
-        options: ["default", "filestack", "uppload"],
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { CUpload },
-  template: '<c-upload v-bind="$props" />',
-});
-
-export const Default = Template.bind({});
-Default.args = {
-  buttonText: "Select File",
-  hint: "Optional",
-  fileSize: "10",
-  isValidate: true,
-  type: "default",
-  filestackApiKey: "",
-  maxFiles: 1,
-};
+import CUpload from "../components/CUpload/CUpload.vue";
+import "./utils.css";
+
+export default {
+  title: "CUpload",
+  component: CUpload,
+  argTypes: {
+    label: String,
+    hint: String,
+    fileSize: String,
+    isValidate: Boolean,
+    type: {
+      control: {
+        type: "inline-radio",
+        options: ["default", "filestack", "uppload"],
+      },
+    },
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { CUpload },
+  template: '<c-upload v-bind="$props" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  buttonText: "Select File",
+  hint: "Optional",
+  fileSize: "10",
+  isValidate: true,
+  type: "default",
+  filestackApiKey: "",
+  maxFiles: 1,
+};