classcard-ui 0.2.1489 → 0.2.1490-beta.0

package/src/components/CDualSelect/CDualSelect.vue

@@ -1,193 +1,193 @@
-<template>
-  <div>
-    <div class="flex">
-      <button
-        type="button"
-        aria-haspopup="listbox"
-        aria-expanded="true"
-        aria-labelledby="listbox-label"
-        @click="toggleFirstDropdown = !toggleFirstDropdown"
-        @blur="close()"
-        class="relative inline-flex items-center pl-3 pr-10 py-2 text-left rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-900 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 shadow-sm disabled:opacity-50"
-        :disabled="isDisabled"
-      >
-        <span class="block truncate">
-          {{ firstDropdownSelectedValue ? firstDropdownSelectedValue : "Select a option" }}
-        </span>
-        <span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
-          <c-icon name="chevron-down" type="solid" class="h-5 w-5 text-gray-400"></c-icon>
-        </span>
-      </button>
-      <button
-        type="button"
-        aria-haspopup="listbox"
-        aria-expanded="true"
-        aria-labelledby="listbox-label"
-        @click="toggleSecondDropdown = !toggleSecondDropdown"
-        @blur="close()"
-        class="relative items-center -ml-px pl-3 pr-10 py-2 text-left rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-900 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 shadow-sm disabled:opacity-50"
-        :disabled="isDisabled"
-      >
-        <span class="block truncate">
-          {{ secondDropdownSelectedValue ? secondDropdownSelectedValue : "Select a option" }}
-        </span>
-        <span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
-          <c-icon name="chevron-down" type="solid" class="h-5 w-5 text-gray-400"></c-icon>
-        </span>
-      </button>
-    </div>
-    <transition
-      enter-active-class="transition ease-out duration-100"
-      enter-class="transform opacity-0 scale-95"
-      enter-to-class="transform opacity-100 scale-100"
-      leave-active-class="transition ease-in duration-75"
-      leave-class="transform opacity-100 scale-100"
-      leave-to-class="transform opacity-0 scale-95"
-    >
-      <div
-        v-if="toggleFirstDropdown && !isDisabled"
-        class="origin-top-right absolute mt-2 -mr-1 w-56 rounded-md shadow-lg bg-white ring-1 ring-gray-900 ring-opacity-5 z-10"
-      >
-        <ul
-          tabindex="-1"
-          role="listbox"
-          aria-labelledby="listbox-label"
-          class="max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm"
-        >
-          <li
-            v-for="item in firstDropdownOptions"
-            v-bind:key="item.items"
-            role="menuitem"
-            class="text-gray-900 select-none relative px-3 py-2 cursor-pointer"
-            @mousedown="handleFirstClick(item)"
-          >
-            <span class="font-normal block truncate list-options">
-              {{ item.text }}
-            </span>
-          </li>
-        </ul>
-      </div>
-    </transition>
-    <transition
-      enter-active-class="transition ease-out duration-100"
-      enter-class="transform opacity-0 scale-95"
-      enter-to-class="transform opacity-100 scale-100"
-      leave-active-class="transition ease-in duration-75"
-      leave-class="transform opacity-100 scale-100"
-      leave-to-class="transform opacity-0 scale-95"
-    >
-      <div
-        v-if="toggleSecondDropdown && !isDisabled"
-        class="origin-top-right absolute mt-2 -mr-1 w-56 rounded-md shadow-lg bg-white ring-1 ring-gray-900 ring-opacity-5 z-10"
-      >
-        <ul
-          tabindex="-1"
-          role="listbox"
-          aria-labelledby="listbox-label"
-          class="max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm"
-        >
-          <li
-            v-for="item in secondDropdownOptions"
-            v-bind:key="item.items"
-            role="menuitem"
-            class="text-gray-900 select-none relative px-3 py-2 cursor-pointer"
-            @mousedown="handleSecondClick(item)"
-          >
-            <span class="font-normal block truncate list-options">
-              {{ item.text }}
-            </span>
-          </li>
-        </ul>
-      </div>
-    </transition>
-    <!-- validation error message -->
-    <p v-if="!isValidate" class="mt-2 text-sm text-red-600">
-      {{ errorMessage }}
-    </p>
-  </div>
-</template>
-
-<script>
-import CIcon from "../CIcon/CIcon.vue";
-export default {
-  name: "CDualSelect",
-  components: { CIcon },
-  props: {
-    // validation is passed or not
-    isValidate: { type: Boolean },
-    // validation error message
-    errorMessage: {
-      type: String,
-    },
-    label: {
-      type: String,
-      required: true,
-    },
-    firstDropdownValue: {
-      type: String,
-    },
-    secondDropdownValue: {
-      type: String,
-    },
-    firstDropdownOptions: {
-      type: Array,
-      required: true,
-    },
-    secondDropdownOptions: {
-      type: Array,
-    },
-    onChangeFirstOptions: {
-      type: Function,
-    },
-    onChangeSecondOptions: {
-      type: Function,
-    },
-    isDisabled: {
-      type: Boolean,
-    },
-  },
-  data() {
-    return {
-      toggleFirstDropdown: false,
-      toggleSecondDropdown: false,
-      firstDropdownSelectedValue: this.firstDropdownValue ? this.firstDropdownValue : "",
-      secondDropdownSelectedValue: this.secondDropdownValue ? this.secondDropdownValue : "",
-    };
-  },
-  methods: {
-    close() {
-      this.toggleFirstDropdown = false;
-      this.toggleSecondDropdown = false;
-    },
-    handleFirstClick(item) {
-      this.firstDropdownSelectedValue = item.text;
-      this.$emit("onChangeFirstOptions", item);
-    },
-    handleSecondClick(item) {
-      this.secondDropdownSelectedValue = item.text;
-      this.$emit("onChangeSecondOptions", item);
-    },
-  },
-  computed: {
-    classes() {
-      return {
-        "text-gray-700 border-gray-300 hover:bg-gray-50 focus:ring-indigo-600":
-          this.type == "secondary",
-        "text-white hover:bg-indigo-800 bg-indigo-700 focus:ring-indigo-600":
-          this.type == "primary",
-        "text-white hover:bg-red-800 bg-red-700 focus:ring-red-600": this.type == "danger",
-        "text-white hover:bg-green-800 bg-green-700 focus:ring-green-600": this.type == "success",
-        "cursor-default pointer-events-none": this.isLoading,
-      };
-    },
-  },
-  watch: {
-    firstDropdownValue() {
-      this.firstDropdownSelectedValue = this.firstDropdownValue;
-      this.secondDropdownSelectedValue = this.secondDropdownValue;
-    },
-  },
-};
-</script>
-
-<style></style>
+<template>
+  <div>
+    <div class="flex">
+      <button
+        type="button"
+        aria-haspopup="listbox"
+        aria-expanded="true"
+        aria-labelledby="listbox-label"
+        @click="toggleFirstDropdown = !toggleFirstDropdown"
+        @blur="close()"
+        class="relative inline-flex items-center pl-3 pr-10 py-2 text-left rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-900 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 shadow-sm disabled:opacity-50"
+        :disabled="isDisabled"
+      >
+        <span class="block truncate">
+          {{ firstDropdownSelectedValue ? firstDropdownSelectedValue : "Select a option" }}
+        </span>
+        <span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
+          <c-icon name="chevron-down" type="solid" class="h-5 w-5 text-gray-400"></c-icon>
+        </span>
+      </button>
+      <button
+        type="button"
+        aria-haspopup="listbox"
+        aria-expanded="true"
+        aria-labelledby="listbox-label"
+        @click="toggleSecondDropdown = !toggleSecondDropdown"
+        @blur="close()"
+        class="relative items-center -ml-px pl-3 pr-10 py-2 text-left rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-900 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 shadow-sm disabled:opacity-50"
+        :disabled="isDisabled"
+      >
+        <span class="block truncate">
+          {{ secondDropdownSelectedValue ? secondDropdownSelectedValue : "Select a option" }}
+        </span>
+        <span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
+          <c-icon name="chevron-down" type="solid" class="h-5 w-5 text-gray-400"></c-icon>
+        </span>
+      </button>
+    </div>
+    <transition
+      enter-active-class="transition ease-out duration-100"
+      enter-class="transform opacity-0 scale-95"
+      enter-to-class="transform opacity-100 scale-100"
+      leave-active-class="transition ease-in duration-75"
+      leave-class="transform opacity-100 scale-100"
+      leave-to-class="transform opacity-0 scale-95"
+    >
+      <div
+        v-if="toggleFirstDropdown && !isDisabled"
+        class="origin-top-right absolute mt-2 -mr-1 w-56 rounded-md shadow-lg bg-white ring-1 ring-gray-900 ring-opacity-5 z-10"
+      >
+        <ul
+          tabindex="-1"
+          role="listbox"
+          aria-labelledby="listbox-label"
+          class="max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm"
+        >
+          <li
+            v-for="item in firstDropdownOptions"
+            v-bind:key="item.items"
+            role="menuitem"
+            class="text-gray-900 select-none relative px-3 py-2 cursor-pointer"
+            @mousedown="handleFirstClick(item)"
+          >
+            <span class="font-normal block truncate list-options">
+              {{ item.text }}
+            </span>
+          </li>
+        </ul>
+      </div>
+    </transition>
+    <transition
+      enter-active-class="transition ease-out duration-100"
+      enter-class="transform opacity-0 scale-95"
+      enter-to-class="transform opacity-100 scale-100"
+      leave-active-class="transition ease-in duration-75"
+      leave-class="transform opacity-100 scale-100"
+      leave-to-class="transform opacity-0 scale-95"
+    >
+      <div
+        v-if="toggleSecondDropdown && !isDisabled"
+        class="origin-top-right absolute mt-2 -mr-1 w-56 rounded-md shadow-lg bg-white ring-1 ring-gray-900 ring-opacity-5 z-10"
+      >
+        <ul
+          tabindex="-1"
+          role="listbox"
+          aria-labelledby="listbox-label"
+          class="max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm"
+        >
+          <li
+            v-for="item in secondDropdownOptions"
+            v-bind:key="item.items"
+            role="menuitem"
+            class="text-gray-900 select-none relative px-3 py-2 cursor-pointer"
+            @mousedown="handleSecondClick(item)"
+          >
+            <span class="font-normal block truncate list-options">
+              {{ item.text }}
+            </span>
+          </li>
+        </ul>
+      </div>
+    </transition>
+    <!-- validation error message -->
+    <p v-if="!isValidate" class="mt-2 text-sm text-red-600">
+      {{ errorMessage }}
+    </p>
+  </div>
+</template>
+
+<script>
+import CIcon from "../CIcon/CIcon.vue";
+export default {
+  name: "CDualSelect",
+  components: { CIcon },
+  props: {
+    // validation is passed or not
+    isValidate: { type: Boolean },
+    // validation error message
+    errorMessage: {
+      type: String,
+    },
+    label: {
+      type: String,
+      required: true,
+    },
+    firstDropdownValue: {
+      type: String,
+    },
+    secondDropdownValue: {
+      type: String,
+    },
+    firstDropdownOptions: {
+      type: Array,
+      required: true,
+    },
+    secondDropdownOptions: {
+      type: Array,
+    },
+    onChangeFirstOptions: {
+      type: Function,
+    },
+    onChangeSecondOptions: {
+      type: Function,
+    },
+    isDisabled: {
+      type: Boolean,
+    },
+  },
+  data() {
+    return {
+      toggleFirstDropdown: false,
+      toggleSecondDropdown: false,
+      firstDropdownSelectedValue: this.firstDropdownValue ? this.firstDropdownValue : "",
+      secondDropdownSelectedValue: this.secondDropdownValue ? this.secondDropdownValue : "",
+    };
+  },
+  methods: {
+    close() {
+      this.toggleFirstDropdown = false;
+      this.toggleSecondDropdown = false;
+    },
+    handleFirstClick(item) {
+      this.firstDropdownSelectedValue = item.text;
+      this.$emit("onChangeFirstOptions", item);
+    },
+    handleSecondClick(item) {
+      this.secondDropdownSelectedValue = item.text;
+      this.$emit("onChangeSecondOptions", item);
+    },
+  },
+  computed: {
+    classes() {
+      return {
+        "text-gray-700 border-gray-300 hover:bg-gray-50 focus:ring-indigo-600":
+          this.type == "secondary",
+        "text-white hover:bg-indigo-800 bg-indigo-700 focus:ring-indigo-600":
+          this.type == "primary",
+        "text-white hover:bg-red-800 bg-red-700 focus:ring-red-600": this.type == "danger",
+        "text-white hover:bg-green-800 bg-green-700 focus:ring-green-600": this.type == "success",
+        "cursor-default pointer-events-none": this.isLoading,
+      };
+    },
+  },
+  watch: {
+    firstDropdownValue() {
+      this.firstDropdownSelectedValue = this.firstDropdownValue;
+      this.secondDropdownSelectedValue = this.secondDropdownValue;
+    },
+  },
+};
+</script>
+
+<style></style>

package/src/components/CDualSelect/index.js

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

package/src/components/CEditor/CEditor.vue

@@ -1,138 +1,138 @@
-<template>
-  <div>
-    <div class="flex justify-between">
-      <p class="text-sm font-medium text-gray-900">{{ label }}</p>
-      <p class="text-sm text-gray-500" v-if="hint">{{ hint }}</p>
-    </div>
-    <quill-editor
-      ref="myQuillEditor"
-      :class="`mt-1 rounded-md bg-white ${
-        disabled ? 'cursor-not-allowed opacity-50' : ''
-      } text-sm shadow-sm`"
-      :value="content"
-      :options="editorOption"
-      :id="id"
-      @change="onChange($event)"
-      @ready="onReady($event)"
-      @focus="handleFocus"
-      @blur="onEditorBlur"
-      :disabled="disabled"
-    ></quill-editor>
-    <p v-if="helpText" class="mt-2 text-sm text-gray-500">
-      {{ helpText }}
-    </p>
-  </div>
-</template>
-
-<script>
-import "quill/dist/quill.core.css";
-import "quill/dist/quill.snow.css";
-import "quill/dist/quill.bubble.css";
-import { quillEditor } from "vue-quill-editor";
-import {
-  EDITOR_FONT_WHITELIST,
-  buildEditorFontCss,
-} from "./quill-font-setup";
-
-const FONT_STYLE_ID = "c-editor-font-styles";
-export { EDITOR_FONT_WHITELIST };
-
-export default {
-  name: "CEditor",
-  components: { quillEditor },
-  props: {
-    id: { type: String },
-    content: { type: String },
-    label: { type: String },
-    hint: { type: String },
-    helpText: { type: String },
-    toolbarOptions: { type: Array, default: () => [] },
-    onEditorChange: { type: Function },
-    placeholder: { type: String },
-    disabled: { type: Boolean, default: false },
-  },
-  methods: {
-    /**
-     * Quill toolbar font options are separate from the attributor whitelist.
-     * Sync any font control to EDITOR_FONT_WHITELIST so custom fonts appear and apply.
-     */
-    normalizeToolbarOptions(toolbarOptions) {
-      if (!Array.isArray(toolbarOptions) || !JSON.stringify(toolbarOptions).includes('"font"')) {
-        return toolbarOptions;
-      }
-
-      return toolbarOptions.map((group) => {
-        if (!Array.isArray(group)) return group;
-
-        return group.map((item) => {
-          if (item === "font") {
-            return { font: EDITOR_FONT_WHITELIST };
-          }
-          if (
-            item &&
-            typeof item === "object" &&
-            Object.prototype.hasOwnProperty.call(item, "font")
-          ) {
-            return { font: EDITOR_FONT_WHITELIST };
-          }
-          return item;
-        });
-      });
-    },
-    onChange(params) {
-      this.$emit("onEditorChange", params);
-    },
-    onReady(params) {
-      this.$emit("onEditorReady", params);
-    },
-    handleFocus() {
-      let quill = this.$refs.myQuillEditor.quill;
-      if (quill) {
-        this.$emit("handleFocus", quill);
-      }
-    },
-    onEditorBlur() {
-      this.$emit("onEditorBlur");
-    },
-  },
-  computed: {
-    editorOption() {
-      return {
-        modules: {
-          toolbar: {
-            container: this.normalizeToolbarOptions(this.toolbarOptions),
-          },
-        },
-        placeholder: this.placeholder,
-      };
-    },
-  },
-  mounted() {
-    if (document.getElementById(FONT_STYLE_ID)) return;
-
-    const style = document.createElement("style");
-    style.id = FONT_STYLE_ID;
-    style.textContent = buildEditorFontCss();
-    document.head.appendChild(style);
-  },
-};
-</script>
-
-<style>
-.ql-toolbar.ql-snow {
-  border-top-left-radius: 0.375rem;
-  border-top-right-radius: 0.375rem;
-}
-.ql-container.ql-snow {
-  border-bottom-left-radius: 0.375rem;
-  border-bottom-right-radius: 0.375rem;
-  min-height: 5rem;
-}
-.ql-editor {
-  @apply text-sm text-gray-900;
-  max-height: 150px;
-}
-.ql-editor.ql-blank::before {
-  @apply not-italic text-gray-500;
-}
+<template>
+  <div>
+    <div class="flex justify-between">
+      <p class="text-sm font-medium text-gray-900">{{ label }}</p>
+      <p class="text-sm text-gray-500" v-if="hint">{{ hint }}</p>
+    </div>
+    <quill-editor
+      ref="myQuillEditor"
+      :class="`mt-1 rounded-md bg-white ${
+        disabled ? 'cursor-not-allowed opacity-50' : ''
+      } text-sm shadow-sm`"
+      :value="content"
+      :options="editorOption"
+      :id="id"
+      @change="onChange($event)"
+      @ready="onReady($event)"
+      @focus="handleFocus"
+      @blur="onEditorBlur"
+      :disabled="disabled"
+    ></quill-editor>
+    <p v-if="helpText" class="mt-2 text-sm text-gray-500">
+      {{ helpText }}
+    </p>
+  </div>
+</template>
+
+<script>
+import "quill/dist/quill.core.css";
+import "quill/dist/quill.snow.css";
+import "quill/dist/quill.bubble.css";
+import { quillEditor } from "vue-quill-editor";
+import {
+  EDITOR_FONT_WHITELIST,
+  buildEditorFontCss,
+} from "./quill-font-setup";
+
+const FONT_STYLE_ID = "c-editor-font-styles";
+export { EDITOR_FONT_WHITELIST };
+
+export default {
+  name: "CEditor",
+  components: { quillEditor },
+  props: {
+    id: { type: String },
+    content: { type: String },
+    label: { type: String },
+    hint: { type: String },
+    helpText: { type: String },
+    toolbarOptions: { type: Array, default: () => [] },
+    onEditorChange: { type: Function },
+    placeholder: { type: String },
+    disabled: { type: Boolean, default: false },
+  },
+  methods: {
+    /**
+     * Quill toolbar font options are separate from the attributor whitelist.
+     * Sync any font control to EDITOR_FONT_WHITELIST so custom fonts appear and apply.
+     */
+    normalizeToolbarOptions(toolbarOptions) {
+      if (!Array.isArray(toolbarOptions) || !JSON.stringify(toolbarOptions).includes('"font"')) {
+        return toolbarOptions;
+      }
+
+      return toolbarOptions.map((group) => {
+        if (!Array.isArray(group)) return group;
+
+        return group.map((item) => {
+          if (item === "font") {
+            return { font: EDITOR_FONT_WHITELIST };
+          }
+          if (
+            item &&
+            typeof item === "object" &&
+            Object.prototype.hasOwnProperty.call(item, "font")
+          ) {
+            return { font: EDITOR_FONT_WHITELIST };
+          }
+          return item;
+        });
+      });
+    },
+    onChange(params) {
+      this.$emit("onEditorChange", params);
+    },
+    onReady(params) {
+      this.$emit("onEditorReady", params);
+    },
+    handleFocus() {
+      let quill = this.$refs.myQuillEditor.quill;
+      if (quill) {
+        this.$emit("handleFocus", quill);
+      }
+    },
+    onEditorBlur() {
+      this.$emit("onEditorBlur");
+    },
+  },
+  computed: {
+    editorOption() {
+      return {
+        modules: {
+          toolbar: {
+            container: this.normalizeToolbarOptions(this.toolbarOptions),
+          },
+        },
+        placeholder: this.placeholder,
+      };
+    },
+  },
+  mounted() {
+    if (document.getElementById(FONT_STYLE_ID)) return;
+
+    const style = document.createElement("style");
+    style.id = FONT_STYLE_ID;
+    style.textContent = buildEditorFontCss();
+    document.head.appendChild(style);
+  },
+};
+</script>
+
+<style>
+.ql-toolbar.ql-snow {
+  border-top-left-radius: 0.375rem;
+  border-top-right-radius: 0.375rem;
+}
+.ql-container.ql-snow {
+  border-bottom-left-radius: 0.375rem;
+  border-bottom-right-radius: 0.375rem;
+  min-height: 5rem;
+}
+.ql-editor {
+  @apply text-sm text-gray-900;
+  max-height: 150px;
+}
+.ql-editor.ql-blank::before {
+  @apply not-italic text-gray-500;
+}
 </style>