@ngockhoale/ukit 1.1.6

package/templates/.claude/skills/frontend-vue/components/Control/Tag.vue

@@ -0,0 +1,82 @@
+<!-- Example Hard code -->
+<!-- 
+<ControlTag
+  v-model="variable"
+  :required="true"
+  placeholder="Name"
+  :id="this_id"
+  :name="this_name"
+  :disable="true"
+/> 
+-->
+<template>
+  <ControlLabel :required="required" :name="name" :classes="label_classes" />
+  <a-select v-model:value="value" size="large" :disabled="disabled" mode="tags" style="width: 100%" :open="false" :placeholder="placeholder" @change="handleChange"> </a-select>
+</template>
+<style>
+input[disabled] {
+  color: black !important;
+}
+textarea[disabled] {
+  color: black !important;
+}
+</style>
+
+<script>
+import { v4 as uuidv4 } from "uuid";
+export default {
+  props: {
+    modelValue: {
+      type: [Array],
+      default: [],
+    },
+    required: {
+      type: Boolean,
+      default: false,
+    },
+    placeholder: {
+      type: String,
+      default: "",
+    },
+    id: {
+      type: String,
+      default: () => {
+        return uuidv4();
+      },
+    },
+    name: {
+      type: String,
+      default: "",
+    },
+    classes: {
+      type: String,
+      default: "",
+    },
+    label_classes: {
+      type: String,
+      default: "",
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ["update:modelValue"],
+  computed: {
+    value: {
+      get() {
+        return this.modelValue;
+      },
+      set(value) {
+        this.$emit("update:modelValue", value);
+      },
+    },
+  },
+  methods: {
+    handleChange(val) {
+      // Remove empty or whitespace-only values
+      this.value = val.filter((v) => v && v.trim() !== "");
+    },
+  },
+};
+</script>

package/templates/.claude/skills/frontend-vue/components/Control/Upload.vue

@@ -0,0 +1,61 @@
+<template>
+  <a-upload-dragger v-model:fileList="fileList" name="file" :customRequest="uploadfiles" :max-count="3" :multiple="true" @change="handleChange" @drop="handleDrop">
+    <p class="ant-upload-drag-icon">
+      <i class="fas fa-upload" style="font-size: 30px;"></i>
+    </p>
+    <p class="ant-upload-text">{{ label }}<span v-if="required" style="color: red">*</span></p>
+    <p class="ant-upload-hint">{{ hint }}</p>
+  </a-upload-dragger>
+</template>
+<script>
+export default {
+  props: {
+    modelValue: {
+      type: Array,
+      default: () => [],
+    },
+    required: {
+      type: Boolean,
+      default: false,
+    },
+    label: {
+      type: String,
+      default: t("Click or drag file to this area to upload"),
+    },
+    hint: {
+      type: String,
+      default: t("Maximal 1 files and Maximal 10Mb/File"),
+    },
+  },
+  data() {
+    return {
+      fileList: this.modelValue,
+    };
+  },
+  methods: {
+    uploadfiles({ file }) {
+      this.$emit("uploadFinish", file);
+    },
+    async handleChange(info) {
+      const status = info.file.status;
+      if (status !== "uploading") {
+        console.log(info.file, info.fileList);
+      }
+      if (status === "done") {
+        this.$emit("uploadFinish", info.file);
+      } else if (status === "error") {
+        console.log(`${info.file.name} file upload failed.`);
+      }
+    },
+
+    handleDrop(e) {
+      console.log("Dropped files", e.dataTransfer.files);
+    },
+  },
+};
+</script>
+<style>
+.ant-upload-list-item {
+  display: none;
+}
+</style>

package/templates/.claude/skills/frontend-vue/components/ControlMobile/Dropdownlist.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="control-mobile-dropdown">
+    <ControlDropdownlist
+      v-model="workingValue"
+      :name="name"
+      :show_key="show_key"
+      :required="required"
+      :id="id"
+      :classes="classes"
+      :placeholder="placeholder"
+      :icon="icon"
+      :multiple="multiple"
+      :list="list"
+      :disabled="disabled"
+    />
+  </div>
+</template>
+<script>
+import { v4 as uuidv4 } from "uuid";
+
+export default {
+  props: {
+    modelValue: {
+      type: [String, Array, Number],
+      default: "",
+    },
+    name: {
+      type: String,
+      default: "",
+    },
+    show_key: {
+      type: Boolean,
+      default: false,
+    },
+    required: {
+      type: Boolean,
+      default: false,
+    },
+    id: {
+      type: String,
+      default: () => {
+        return uuidv4();
+      },
+    },
+    classes: {
+      type: String,
+      default: "",
+    },
+    placeholder: {
+      type: String,
+      default: "",
+    },
+    icon: {
+      type: String,
+      default: "",
+    },
+    multiple: {
+      type: Boolean,
+      default: false,
+    },
+    list: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  computed: {
+    workingValue: {
+      get() {
+        return this.modelValue;
+      },
+      set(value) {
+        this.$emit("update:modelValue", value);
+      },
+    },
+  },
+};
+</script>
+<style>
+.control-mobile-dropdown .ant-select-selector {
+  min-height: 44px !important;
+  border-radius: 0.5rem !important;
+  display: flex !important;
+  align-items: center !important;
+}
+
+.control-mobile-dropdown .ant-select-selection-search-input,
+.control-mobile-dropdown .ant-select-selection-item,
+.control-mobile-dropdown .ant-select-selection-placeholder {
+  min-height: 40px;
+  line-height: 40px !important;
+}
+
+.control-mobile-dropdown .ant-select-selection-item-remove {
+  display: flex;
+  align-items: center;
+}
+</style>

package/templates/.claude/skills/frontend-vue/components/ControlMobile/PagingBar.vue

@@ -0,0 +1,108 @@
+<!-- 
+    Example:
+    <ControlMobilePagingBar :page="page" :total_records="total_records" :page_count="page_count" @setPage="setPage" /> 
+-->
+<template>
+  <div class="row mt-3 p-0">
+    <div class="col-12 mb-2 d-flex justify-content-center">
+      <nav aria-label="Page navigation example">
+        <ul class="pagination">
+          <li class="page-item" :class="page === 1 ? 'disabled' : ''">
+            <a class="page-link" @click="setPage(1)" :aria-disabled="page === 1"><<</a>
+          </li>
+          <li class="page-item" :class="page === 1 ? 'disabled' : ''">
+            <a
+              class="page-link"
+              @click="
+                if (page > 1) {
+                  setPage(page - 1);
+                }
+              "
+              :aria-disabled="page === 1"
+              ><</a
+            >
+          </li>
+          <template v-if="max_page <= 3">
+            <li v-for="n in max_page" @click="setPage(n)" class="page-item" :class="page === n ? 'disabled' : ''">
+              <a class="page-link">{{ n }}</a>
+            </li>
+          </template>
+          <template v-if="max_page > 3">
+            <li v-if="page > 2" @click="setPage(page - 2)" class="page-item">
+              <a class="page-link">{{ page - 2 }}</a>
+            </li>
+            <li v-if="page > 1" @click="setPage(page - 1)" class="page-item">
+              <a class="page-link">{{ page - 1 }}</a>
+            </li>
+            <li @click="setPage(page)" class="page-item disabled">
+              <a style="font-size: 1.1; font-weight: bold; color: red;" class="page-link">{{ page }}</a>
+            </li>
+            <li v-if="page < max_page" @click="setPage(page + 1)" class="page-item" :class="page === max_page ? 'disabled' : ''">
+              <a class="page-link">{{ page + 1 }}</a>
+            </li>
+            <li v-if="page < max_page - 1" @click="setPage(page + 2)" class="page-item" :class="page === max_page ? 'disabled' : ''">
+              <a class="page-link">{{ page + 2 }}</a>
+            </li>
+          </template>
+          <li
+            class="page-item"
+            @click="
+              if (page < max_page) {
+                setPage(page + 1);
+              }
+            "
+            :class="page === max_page ? 'disabled' : ''"
+          >
+            <a class="page-link" href="#">></a>
+          </li>
+          <li class="page-item" @click="setPage(max_page)" :class="page === max_page ? 'disabled' : ''">
+            <a class="page-link" href="#">>></a>
+          </li>
+        </ul>
+      </nav>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    page: {
+      type: Number,
+      default: 1,
+    },
+    total_records: {
+      type: Number,
+      default: 1,
+    },
+    page_count: {
+      type: Number,
+      default: 3,
+    },
+  },
+  computed: {
+    max_page() {
+      const max_page = Math.ceil(this.total_records / this.page_count);
+      return max_page;
+    },
+  },
+  data() {
+    return {
+      working_page: 1,
+    };
+  },
+  methods: {
+    setPage(pageNum) {
+      this.working_page = pageNum;
+      this.$emit("setPage", pageNum);
+    },
+  },
+  mounted() {
+    this.working_page = this.page;
+  },
+  watch: {
+    page() {
+      this.working_page = this.page;
+    },
+  },
+};
+</script>

package/templates/.claude/skills/frontend-vue/components/ControlMobile/UploadImage.vue

@@ -0,0 +1,137 @@
+<template>
+  <div class="row">
+    <div class="col-xs-12">
+      <ControlLabel v-if="name !== ''" :required="required" :name="name" :id="id" :classes="label_classes" />
+      <input type="file" class="form-control input-style" accept="image/*" @change="uploadFile" />
+    </div>
+  </div>
+</template>
+<script>
+import { v4 as uuidv4 } from "uuid";
+export default {
+  props: {
+    required: {
+      type: Boolean,
+      default: false,
+    },
+    id: {
+      type: String,
+      default: () => {
+        return uuidv4();
+      },
+    },
+    name: {
+      type: String,
+      default: "",
+    },
+    classes: {
+      type: String,
+      default: "",
+    },
+    label_classes: {
+      type: String,
+      default: "",
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      attFiles: null,
+    };
+  },
+  methods: {
+    async resizeAndConvertToJpeg(file) {
+      const maxSizeInBytes = 100000; // 100KB
+      const maxWidth = 800; // Maximum width for resized images
+      const maxHeight = 800; // Maximum height for resized images
+
+      return new Promise((resolve) => {
+        const img = new Image();
+        img.src = URL.createObjectURL(file);
+
+        img.onload = async () => {
+          const width = img.width;
+          const height = img.height;
+
+          // Resize the image if needed
+          let newWidth = width;
+          let newHeight = height;
+
+          if (width > maxWidth || height > maxHeight) {
+            if (width > height) {
+              newHeight = (height * maxWidth) / width;
+              newWidth = maxWidth;
+            } else {
+              newWidth = (width * maxHeight) / height;
+              newHeight = maxHeight;
+            }
+          }
+
+          const canvas = document.createElement("canvas");
+          canvas.width = newWidth;
+          canvas.height = newHeight;
+
+          const ctx = canvas.getContext("2d");
+          ctx.drawImage(img, 0, 0, newWidth, newHeight);
+
+          // Compress the canvas content to Blob until it fits the 50KB limit
+          let blob = await this.compressToSize(canvas, maxSizeInBytes);
+
+          // Get the file extension from the original file
+          const fileExtension = file.name.split(".").pop();
+
+          // Append the original file extension to the resized Blob
+          const resizedBlob = new Blob([blob], { type: `image/${fileExtension}` });
+
+          // Convert Blob to File and resolve
+          const imgFile = new File([resizedBlob], file.name, { type: "image/png" });
+          resolve(imgFile);
+        };
+      });
+    },
+
+    async compressToSize(canvas, maxSizeInBytes) {
+      let quality = 0.9;
+      let compressedBlob = null;
+
+      while (quality > 0.1) {
+        compressedBlob = await this.getBlobFromCanvas(canvas, quality);
+        if (compressedBlob.size <= maxSizeInBytes) {
+          return compressedBlob;
+        }
+        quality -= 0.1;
+      }
+
+      console.warn("Image compression reached minimum quality without fitting the size limit.");
+      return compressedBlob;
+    },
+
+    async getBlobFromCanvas(canvas, quality) {
+      return new Promise((resolve) => {
+        canvas.toBlob(
+          (blob) => {
+            resolve(blob);
+          },
+          "image/jpeg",
+          quality
+        );
+      });
+    },
+
+    async uploadFile(e) {
+      this.attFiles = e.target.files;
+      let tmp = [];
+      let arr = Array.from(this.attFiles);
+      for (let i = 0; i < arr.length; i++) {
+        let compress = await this.resizeAndConvertToJpeg(arr[i]);
+        tmp.push(compress);
+      }
+      this.attFiles = tmp;
+      this.$emit("uploadFile", this.attFiles);
+    },
+  },
+};
+</script>