@ngockhoale/ukit 1.1.6

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

@@ -0,0 +1,148 @@
+<template>
+  <div>
+    <div><ControlLabel :required="required" :name="name" :classes="classes" /></div>
+    <div>
+      <a-date-picker 
+        :disabled="disabled" 
+        size="large" 
+        style="width: 100%" 
+        :class="classes" 
+        :show-time="show_time" 
+        :format="format" 
+        v-model:value="value" 
+        :picker="type"
+        :disabled-date="disabledDate"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import dayjs from "dayjs";
+import { v4 as uuidv4 } from "uuid";
+
+export default {
+  props: {
+    modelValue: {
+      type: [String, Date],
+      default: "",
+    },
+    name: {
+      type: String,
+      default: "",
+    },
+    type: {
+      type: String,
+      default: "date",
+    },
+    show_time: {
+      type: Boolean,
+      default: false,
+    },
+    required: {
+      type: Boolean,
+      default: false,
+    },
+    id: {
+      type: String,
+      default: () => {
+        return uuidv4();
+      },
+    },
+    classes: {
+      type: String,
+      default: "",
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    minDate: {
+      type: [String, Date],
+      default: null,
+    },
+    maxDate: {
+      type: [String, Date],
+      default: null,
+    },
+  },
+  data() {
+    return {
+      value: "",
+      format: "DD-MM-YYYY",
+    };
+  },
+  methods: {
+    disabledDate(current) {
+      if (!current) return false;
+      
+      const currentDate = dayjs(current).startOf('day');
+      let isDisabled = false;
+
+      if (this.minDate) {
+        const minDate = dayjs(this.minDate).startOf('day');
+        isDisabled = currentDate.isBefore(minDate);
+      }
+
+      if (this.maxDate && !isDisabled) {
+        const maxDate = dayjs(this.maxDate).endOf('day');
+        isDisabled = currentDate.isAfter(maxDate);
+      }
+
+      return isDisabled;
+    },
+    setFormat() {
+      if (this.type === "date") {
+        this.format = "DD-MM-YYYY";
+      }
+      if (this.type === "month") {
+        this.format = "MM-YYYY";
+      }
+      if (this.type === "year") {
+        this.format = "YYYY";
+      }
+    },
+    set_value() {
+      if (this.modelValue == null || this.modelValue == "") {
+        this.value = null;
+      } else {
+        if (!check_is_null_or_blank(this.modelValue)) {
+          if (this.modelValue.toLowerCase().includes("invalid")) {
+            this.value = dayjs(dayjs(), "YYYY-MM-DD");
+          } else {
+            this.value = dayjs(this.modelValue, "YYYY-MM-DD");
+          }
+        } else {
+          this.value = dayjs(dayjs(), "YYYY-MM-DD");
+        }
+      }
+    },
+  },
+  mounted() {
+    this.set_value();
+    this.setFormat();
+  },
+  watch: {
+    modelValue() {
+      this.set_value();
+    },
+    value() {
+      if (this.value == null) {
+        this.$emit("update:modelValue", null);
+      } else {
+        this.$emit("update:modelValue", this.value.format("YYYY-MM-DD"));
+      }
+    },
+    type() {
+      this.setFormat();
+    },
+  },
+};
+</script>
+
+<style>
+.ant-picker-body table {
+  box-shadow: none !important;
+  border-radius: 0;
+}
+</style>

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

@@ -0,0 +1,156 @@
+<template>
+  <div>
+    <ControlLabel :icon="icon" :required="required" :name="name" :classes="classes" />
+    <client-only>
+      <a-select
+        :disabled="disabled"
+        v-if="multiple"
+        size="large"
+        v-model:value="value"
+        :id="id"
+        :dropdownStyle="{ zIndex: 10000 }"
+        mode="multiple"
+        remove-icon=" X"
+        show-search
+        :filter-option="filterOption"
+        :options="option_list"
+        :placeholder="placeholder"
+        style="width: 100%"
+        allow-clear></a-select>
+      <a-select :disabled="disabled" v-if="!multiple" size="large" v-model:value="value" :dropdownStyle="{ zIndex: 10000 }" show-search :filter-option="filterOption" :options="option_list" :placeholder="placeholder" style="width: 100%" allow-clear></a-select>
+    </client-only>
+  </div>
+</template>
+<script>
+// list shoud have value and label { value: 'jack', label: 'Jack' }
+import { v4 as uuidv4 } from "uuid";
+export default {
+  setup() {
+    const filterOption = (input, option) => {
+      return option.label.toLowerCase().trim().includes(input.toLowerCase().trim()) || option.value.toLowerCase().trim().includes(input.toLowerCase().trim());
+    };
+    return {
+      filterOption,
+    };
+  },
+  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: {
+    value: {
+      get() {
+        if (this.multiple) {
+          if (this.modelValue === "") {
+            return [];
+          }
+          if (typeof this.modelValue === "string") {
+            if (this.modelValue.charAt(0) === "[") {
+              return JSON.parse(this.modelValue);
+            } else {
+              return [this.modelValue];
+            }
+          }
+          if (typeof this.modelValue === "object") {
+            return this.modelValue;
+          }
+        } else {
+          return this.modelValue;
+        }
+      },
+      set(value) {
+        this.$emit("update:modelValue", value);
+      },
+    },
+  },
+  data() {
+    return {
+      option_list: [{ value: "jack", label: "Jack" }],
+    };
+  },
+  methods: {
+    set_value() {
+      if (this.show_key) {
+        this.option_list = this.list.map((item) => {
+          return {
+            value: item.value,
+            label: item.value + " - " + item.label,
+          };
+        });
+      } else {
+        this.option_list = this.list;
+      }
+    },
+  },
+  mounted() {
+    this.set_value();
+  },
+  watch: {
+    value() {
+      this.$emit("update:modelValue", this.value);
+    },
+    list() {
+      this.set_value();
+    },
+    show_key() {
+      this.set_value();
+    },
+  },
+};
+</script>
+<style>
+.ant-select-disabled > .ant-select-selector {
+  color: black !important;
+}
+label {
+  margin-bottom: 2px;
+  margin-top: 2px;
+  font-weight: 600;
+}
+</style>

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

@@ -0,0 +1,106 @@
+<!-- Example Hard code -->
+<!-- 
+<ControlInput
+  type="text"
+  v-model="vairiable"
+  :required="true"
+  placeholder="Name"
+  :id="this_id"
+  :name="this_name"
+/> 
+-->
+<template>
+  <ControlLabel :required="required" :name="name" :classes="label_classes" />
+  <a-input-password size="large" :disabled="disabled" v-if="type === 'password'" v-model:value="value" :id="id" :name="name" :class="classes" :placeholder="placeholder" allow-clear />
+  <a-input-search size="large" :disabled="disabled" v-if="type === 'search'" v-model:value="value" :placeholder="placeholder" allow-clear :id="id" :name="name" :class="classes" enter-button @search="onSearch" />
+  <a-textarea :disabled="disabled" v-if="type === 'textarea'" v-model:value="value" :placeholder="placeholder" allow-clear :id="id" :name="name" :class="classes" :rows="parseInt(rows)" />
+  <ClientOnly>
+    <a-input-number
+      size="large"
+      v-if="type === 'number'"
+      :disabled="disabled"
+      v-model:value="value"
+      :formatter="(value) => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
+      :parser="(value) => value.replace(/\$\s?|(,*)/g, '')"
+      :id="id"
+      :name="name"
+      allow-clear
+      style="width: 100%"
+      :class="classes" />
+  </ClientOnly>
+  <a-input size="large" :disabled="disabled" v-if="!['password', 'search', 'textarea', 'number'].includes(type)" v-model:value="value" :id="id" :name="name" :class="classes" :placeholder="placeholder" allow-clear />
+</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: [String, Number],
+      default: "",
+    },
+    required: {
+      type: Boolean,
+      default: false,
+    },
+    type: {
+      type: String,
+      default: "text",
+    },
+    placeholder: {
+      type: String,
+      default: "",
+    },
+    id: {
+      type: String,
+      default: () => {
+        return uuidv4();
+      },
+    },
+    name: {
+      type: String,
+      default: "",
+    },
+    classes: {
+      type: String,
+      default: "",
+    },
+    label_classes: {
+      type: String,
+      default: "",
+    },
+    rows: {
+      type: String,
+      default: "3",
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ["update:modelValue", "onSearch"],
+  computed: {
+    value: {
+      get() {
+        return this.modelValue;
+      },
+      set(value) {
+        this.$emit("update:modelValue", value);
+      },
+    },
+  },
+  methods: {
+    onSearch() {
+      this.$emit("onSearch", this.value);
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,38 @@
+<template>
+  <label :class="classes">
+    <span v-if="icon !== ''" class="icon-style">
+      <i style="color: white" :class="icon"></i>
+    </span>
+    {{ name }} <span v-if="required" style="color: red">*</span>
+  </label>
+</template>
+<script>
+export default {
+  props: {
+    required: {
+      type: Boolean,
+      default: false,
+    },
+    classes: {
+      type: String,
+      default: "",
+    },
+    name: {
+      type: String,
+      default: "",
+    },
+    icon: {
+      type: String,
+      default: "",
+    },
+  },
+};
+</script>
+
+<style>
+.icon-style {
+  background-color: #2d82b5 !important;
+  border-radius: 50% !important;
+  padding: 3px 5px !important;
+}
+</style>

package/templates/.claude/skills/frontend-vue/components/Control/Master/BoxColumn.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="col-md-12" v-if="item['position'].length === 1">
+    <slot />
+  </div>
+  <div class="col-md-6" v-if="item['position'].length === 2">
+    <slot />
+  </div>
+  <div class="col-md-4" v-if="item['position'].length === 3">
+    <slot />
+  </div>
+  <div class="col-md-3" v-if="item['position'].length === 4">
+    <slot />
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    item: {
+      type: Object,
+      default: {},
+    },
+  },
+};
+</script>

package/templates/.claude/skills/frontend-vue/components/Control/Popup/Confirm.vue

@@ -0,0 +1,33 @@
+<template>
+  <ClientOnly>
+    <a-modal :visible="visible" :title="title" :ok-text="t('Confirm')" :cancel-text="t('Cancel')" @ok="confirmAction" @cancel="close">
+      <p v-html="message"></p>
+    </a-modal>
+  </ClientOnly>
+</template>
+<script>
+export default {
+  props: {
+    visible: {
+      type: Boolean,
+      default: true,
+    },
+    message: {
+      type: String,
+      default: true,
+    },
+    title: {
+      type: String,
+      default: true,
+    },
+  },
+  methods: {
+    confirmAction() {
+      this.$emit("onConfirm");
+    },
+    close() {
+      this.$emit("onClose");
+    },
+  },
+};
+</script>

package/templates/.claude/skills/frontend-vue/components/Control/Popup/Info.vue

@@ -0,0 +1,32 @@
+<template>
+  <a-modal v-model:visible="is_show_info">
+    <a-result :status="status" :title="title"></a-result>
+    <template #footer>
+      <a-button @click="onClose()" type="primary">Close</a-button>
+    </template>
+  </a-modal>
+</template>
+
+<script>
+export default {
+  props: ["status", "title", "visible"],
+  data() {
+    return {
+      is_show_info: false,
+    };
+  },
+  methods: {
+    onClose() {
+      this.is_show_info = false;
+    },
+  },
+  mounted() {
+    this.is_show_info = this.visible;
+  },
+  watch: {
+    visible() {
+      this.is_show_info = this.visible;
+    },
+  },
+};
+</script>

package/templates/.claude/skills/frontend-vue/components/Control/Popup/ModalInfo.vue

@@ -0,0 +1,39 @@
+<template>
+  <!-- Modal -->
+  <div class="modal fade" id="ControlPopupModalInfo" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
+    <div class="modal-dialog">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title">{{ t(title) }}</h5>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <div class="modal-body">
+          <div>
+            <ClientOnly>
+              <GridAG
+                id="gridagmodal"
+                ref="gridagmodal"
+                :columns="columns"
+                :rows="rows"
+                :can_add="false"
+                :can_edit="false"
+                :can_delete="false"
+                :can_sync="false"
+                :can_upload="false"
+                :height="screen_height() - 125"
+              />
+            </ClientOnly>
+          </div>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: ["rows", "columns", "title"],
+};
+</script>

package/templates/.claude/skills/frontend-vue/components/Control/Popup/Reject.vue

@@ -0,0 +1,64 @@
+<template>
+  <ClientOnly>
+    <a-modal :visible="visible" :title="title" :ok-text="t('Confirm')" :cancel-text="t('Cancel')" @ok="confirmAction" @cancel="close">
+      <div class="col-12">
+        <div class="col-12">
+          {{ t('Please confirm this Agreement is Adhoc or On Plan') }}
+        </div>
+        <div class="col-6">
+          <ControlCheckbox :label="t('Is Adhoc')" v-model="is_adhoc" />
+        </div>
+        <div class="col-6">
+          <ControlCheckbox :label="t('Is On Plan')" v-model="is_onplan" />
+        </div>
+      </div>
+      <ControlInput type="text" v-model="rejectReason" :name="t(message)" />
+    </a-modal>
+  </ClientOnly>
+</template>
+<script>
+export default {
+  props: {
+    visible: {
+      type: Boolean,
+      default: true,
+    },
+    message: {
+      type: String,
+      default: true,
+    },
+    title: {
+      type: String,
+      default: true,
+    },
+  },
+  data() {
+    return {
+      rejectReason: "",
+      is_adhoc: false,
+      is_onplan: true,
+    };
+  },
+  methods: {
+    confirmAction() {
+      if(!this.is_adhoc && !this.is_onplan) return;
+      this.$emit("onConfirm", this.rejectReason, this.is_adhoc, this.is_onplan);
+    },
+    close() {
+      this.$emit("onClose");
+    },
+  },
+  watch: {
+    is_adhoc() {
+      if(this.is_adhoc){
+        this.is_onplan = false;
+      }
+    },
+    is_onplan() {
+      if(this.is_onplan){
+        this.is_adhoc = false;
+      }
+    },
+  },
+};
+</script>