@ngockhoale/ukit 1.1.6

package/templates/.claude/skills/frontend-vue/SKILL.md

@@ -0,0 +1,127 @@
+---
+name: frontend-vue
+description: Vue 2 / Nuxt frontend skill pack for UKit projects. Options API, Bootstrap 5 + Ant Design Vue, predefined components (Control*, Grid*, Popup*), composables (request, session, translation, utils). Always reuse existing components before creating new ones.
+triggers:
+  - vue
+  - nuxt
+  - vue component
+  - vue form
+  - vue page
+  - control input
+  - control button
+  - control dropdown
+  - ag grid
+  - ant design
+  - frontend component
+  - form page
+  - data table
+  - popup modal
+  - file upload
+---
+
+Enabled: false
+
+# Vue.js & Nuxt.js Skill Pack
+
+Vue 2 Options API / Nuxt. Bootstrap 5 + Ant Design Vue. Separate backend via `composables/`.
+
+## Reference Files
+
+For full examples, read these files when needed (don't load unless working on that pattern):
+- `reference/form-example.vue` - Form with inputs, dropdowns, dates, buttons
+- `reference/grid-example.vue` - Data grid with AG Grid and filters
+- `reference/popup-example.vue` - Popup/modal usage
+- `reference/composables-example.vue` - Composables usage
+
+## Predefined Components (MUST USE)
+
+Always use these before creating new components. Read the actual `.vue` file for props/events.
+
+```
+Control/Input.vue          - Text, password, search, textarea, number
+Control/Datetime.vue       - Date/time picker
+Control/Dropdownlist.vue   - Select dropdown (single/multiple)
+Control/Button.vue         - Button with loading state
+Control/Checkbox.vue       - Checkbox
+Control/CheckButton.vue    - Check button toggle
+Control/Label.vue          - Form label
+Control/Box.vue            - Container box
+Control/ButtonBar.vue      - Button group
+Control/ButtonFloat.vue    - Floating action button
+Control/Tag.vue            - Tag/badge
+Control/Upload.vue         - File upload
+Control/Master/BoxColumn.vue - Column box layout
+Control/Popup/Info.vue     - Info popup
+Control/Popup/ModalInfo.vue - Large modal
+Control/Popup/Confirm.vue  - Confirmation dialog
+Control/Popup/Reject.vue   - Rejection dialog with reason
+ControlMobile/Dropdownlist.vue - Mobile dropdown
+ControlMobile/PagingBar.vue    - Mobile pagination
+ControlMobile/UploadImage.vue  - Mobile image upload
+Grid/AG.vue                - AG Grid (RECOMMENDED for tables)
+Grid/AntTable.vue          - Ant Design Table
+Grid/HtmlTable.vue         - Simple HTML table
+Panel/FormView.vue         - Form view wrapper
+Partial/Header.vue         - Page header
+Partial/Footer.vue         - Page footer
+Partial/Sidebar.vue        - Sidebar navigation
+```
+
+**Quick usage:**
+```vue
+<ControlInput v-model="form.name" name="Name" :required="true" />
+<ControlDatetime v-model="form.date" name="Date" :required="true" />
+<ControlDropdownlist v-model="form.status" name="Status" :list="status_list" />
+<ControlButton type="primary" name="Save" @onClick="onSave" />
+<ControlPopupConfirm :visible="show_confirm" :title="t('Confirm')" :message="t('Are you sure?')" @onClose="onClose" @onConfirm="onConfirm" />
+<GridAG id="my_grid" :columns="columns" :rows="rows" :can_add="true" :can_edit="true" :table="table_name" @onClickDetail="onClickDetail" @reloadData="get_data" />
+```
+
+No matching component? **Ask the user** before creating new ones.
+
+## Predefined Composables (auto-imported in Nuxt)
+
+Read the actual file in `composables/` for full API. Key functions:
+
+**utils.js:** `check_is_null_or_blank(val)`, `check_is_zero(val)`, `dayjs(date)`, `formatDate(date, type)`, `formatNumber(num, sep, dec)`, `convertToDropdownValue(list, val_col, label_col)`, `convertListToObject(list, key, val)`, `go_to_page(page, query)`, `go_back(fallback)`, `show_message(type, content)`, `bodautiengviet(str)`, `sleep(ms)`
+
+**useRequest.js:** `request(url, data, method)`, `requestForm(url, data)`, `requestLogin(data)`
+
+**useSession.js:** `getSession(key)`, `setSession(key, value)`, `clearSession()`
+
+**useTranslation.js:** `t(str)`, `translate(page)`
+
+**state.js:** `state` (global reactive), `get_schema()`, `baseurl()`, `menu()`
+
+## Core Rules
+
+1. **Vue 2 Options API only.** Order: `computed` → `data()` → `methods` → `mounted` → `watch`
+2. **CSS: NEVER use `<style scoped>`.** Use `assets/main.css` (preferred) or global `<style>`.
+3. **Bootstrap 5** for layout. **Ant Design Vue** for complex components. Both pre-installed.
+4. **All API calls** via `request()` from composables. Never use direct `fetch()`/`axios`.
+5. **Always include `schema: get_schema()`** in API payloads.
+6. **Reuse existing code** before creating new files. Ask user before creating components.
+
+## API Pattern
+
+```javascript
+async get_data() {
+  let conditions = { "(>=)date": this.from_date, "(<=)date": this.to_date };
+  let data = { schema: get_schema(), table: "v_table", conditions: JSON.stringify(conditions), order_by: ["date desc"] };
+  this.rows = await request("/select", data, "get");
+}
+```
+
+**Condition operators:** no bracket = equals, `(>)`, `(<)`, `(>=)`, `(<=)`, `(like)` = SQL LIKE, `(in)` = SQL IN
+
+## Folder Structure
+
+```
+pages/        - App pages (auto-routing)
+components/   - Reusable components (auto-imported)
+composables/  - Utility functions (auto-imported)
+layouts/      - Page layouts
+middleware/   - Route middleware
+plugins/      - Vue plugins
+assets/       - CSS, images, fonts
+```

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

@@ -0,0 +1,137 @@
+<!--  
+Sample Usage:
+<ControlBox title="This is new title" col="6" type="danger"> khoakhoakhoa the content of bođy will be adđe herre </ControlBox>
+-->
+<template>
+  <div :class="`col-md-${col.toString()}  mb-1`">
+    <div :class="`one-palette ${palette_type}`">
+      <div class="palette-header" v-if="title !== ''">
+        <div class="d-flex justify-content-between">
+          <div>
+            <h6 class="palette-title"><i class="fas fa-file"></i> {{ title }}</h6>
+          </div>
+          <div v-if="show_icon">
+            <!-- <span title="3 New Messages" class="badge badge-primary">3</span> -->
+            <!-- <button class="btn btn-tool"><i class="fas fa-comments"></i></button> -->
+            <!-- <button class="btn btn-tool"><minus-outlined /></button> -->
+            <!-- <button class="btn btn-tool"><close-outlined /></button> -->
+          </div>
+        </div>
+      </div>
+      <div class="palette-body"><slot /></div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      default: "",
+    },
+    show_icon: {
+      type: Boolean,
+      default: false,
+    },
+    col: {
+      type: [Number, String],
+      default: 12,
+    },
+    type: {
+      type: String,
+      default: "info",
+    },
+  },
+  data() {
+    return {
+      palette_type: "",
+    };
+  },
+  methods: {
+    update_palette() {
+      if (this.type == "success") {
+        this.palette_type = "success-palette";
+      } else if (this.type == "danger") {
+        this.palette_type = "danger-palette";
+      } else if (this.type == "info") {
+        this.palette_type = "info-palette";
+      } else if (this.type == "warning") {
+        this.palette_type = "warning-palette";
+      } else {
+        this.palette_type = "";
+      }
+    },
+  },
+  created() {
+    this.update_palette();
+  },
+  watch: {
+    type() {
+      this.update_palette();
+    },
+  },
+};
+</script>
+<style>
+.palette-box-wrapper {
+  position: relative;
+  display: flex;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  min-width: 0;
+  word-wrap: break-word;
+}
+.one-palette {
+  background-color: #fff;
+  background-clip: border-box;
+  margin-bottom: 1rem;
+  width: 100%;
+  border: 0 solid rgba(0, 0, 0, 0.125);
+  border-radius: 0.25rem;
+  box-shadow: 0 0 1px rgba(0, 0, 0, 0.125), 0 1px 3px rgba(0, 0, 0, 0.2);
+}
+.palette-header {
+  background-color: transparent;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
+  padding: 0.75rem 1rem;
+  position: relative;
+  border-top-left-radius: 0.25rem;
+  border-top-right-radius: 0.25rem;
+}
+.palette-body {
+  flex: 1 1 auto;
+  min-height: 1px;
+  padding: 1rem;
+}
+.palette-title {
+  font-size: 1.1rem;
+  font-weight: 600;
+  margin: 0;
+}
+.palette-body {
+  font-size: 0.9rem;
+}
+.btn-tool {
+  background-color: transparent;
+  color: #adb5bd;
+  font-size: 0.875rem;
+  margin: -0.75rem 0;
+  padding: 0.25rem 0.5rem;
+}
+.badge-primary {
+  color: #fff;
+  background-color: #007bff;
+}
+.success-palette {
+  border-top: 4px solid #229954;
+}
+.danger-palette {
+  border-top: 4px solid #e74c3c;
+}
+.info-palette {
+  border-top: 4px solid #3498db;
+}
+.warning-palette {
+  border-top: 4px solid #f1c40f;
+}
+</style>

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

@@ -0,0 +1,93 @@
+<template>
+  <button :loading="loading" :style="'min-width: 68px; background-color:' + color + ';'" type="button" :class="classes === '' ? 'button button-' + type : classes" @click.once="onClick()" :key="key">
+    <span v-if="loading" class="spinner-border spinner-border-sm" role="status"></span><span v-if="!loading">{{ name }}</span>
+  </button>
+</template>
+
+<script>
+export default {
+  props: {
+    type: {
+      type: String,
+      default: "primary",
+    },
+    name: {
+      type: String,
+      default: "Button",
+    },
+    color: {
+      type: String,
+      default: "",
+    },
+    classes: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      key: 0,
+      loading: false,
+    };
+  },
+  methods: {
+    updateKey() {
+      let self = this;
+      this.loading = true;
+      setTimeout(() => {
+        self.key += 1;
+        self.loading = false;
+      }, 1000);
+    },
+    onClick() {
+      this.$emit("onClick");
+      this.updateKey();
+    },
+  },
+};
+</script>
+<style scoped>
+.button {
+  min-width: 120px;
+  height: 40px;
+  border: none;
+  border-radius: 2px;
+  color: white;
+  font-weight: 600;
+  margin: 10px 5px;
+  font-size: 14px;
+}
+.button i {
+  margin-right: 5px;
+  font-size: 14px;
+}
+.button-small {
+  min-width: 100px;
+  height: 30px;
+  font-size: 12px;
+  box-shadow: none;
+  border-radius: none;
+}
+.button-primary {
+  background: #2e86c1;
+}
+.button-secondary {
+  background: #808080;
+}
+.button-success {
+  background: #3cb371;
+}
+.button-danger {
+  background: #ff6347;
+}
+.button-warning {
+  background: #ffa500;
+}
+.button-info {
+  background: #87ceeb;
+}
+.button-light {
+  background-color: #e9e9e9;
+  color: #696969;
+}
+</style>

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

@@ -0,0 +1,29 @@
+<template>
+  <div class="row">
+    <div class="d-flex justify-content-between text-center" v-if="button_list.length > 1">
+      <ControlButton v-for="btn in button_list" :type="btn.type" :name="btn.name" @onClick="clickFunc(btn.name)" />
+    </div>
+    <div class="text-center" v-if="button_list.length === 1">
+      <ControlButton v-for="btn in button_list" :type="btn.type" :name="btn.name" @onClick="clickFunc(btn.name)" />
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    button_list: {
+      type: Array,
+      default: () => [
+        { name: "Close", type: "secondary" },
+        { name: "Delete", type: "danger" },
+        { name: "Save", type: "success" },
+      ],
+    },
+  },
+  methods: {
+    clickFunc(btn_name) {
+      this.$emit("click" + btn_name.replaceAll(" ", ""));
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,62 @@
+<template>
+  <div class="bottom-0 end-0" style="z-index: 999; position: fixed; margin-right: 5px; margin-bottom: 38px">
+    <button type="button" class="button button-success" @click="clickButtonFloat()">
+      <span>{{ name }}</span>
+    </button>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    name: {
+      type: String,
+      default: "Button",
+    },
+  },
+  emits: ["clickButtonFloat"],
+  methods: {
+    clickButtonFloat() {
+      this.$emit("clickButtonFloat");
+    },
+  },
+};
+</script>
+<style scoped>
+.button {
+  min-width: 120px;
+  height: 40px;
+  border: none;
+  box-shadow: 3px 3px 5px #839192;
+  border-radius: 2px;
+  color: white;
+  font-weight: 600;
+  margin: 10px 5px;
+  font-size: 14px;
+}
+.button i {
+  margin-right: 5px;
+  font-size: 14px;
+}
+.button-primary {
+  background: #2e86c1;
+}
+.button-secondary {
+  background: #808080;
+}
+.button-success {
+  background: #3cb371;
+}
+.button-danger {
+  background: #ff6347;
+}
+.button-warning {
+  background: #ffa500;
+}
+.button-info {
+  background: #87ceeb;
+}
+.button-light {
+  background-color: #e9e9e9;
+  color: #696969;
+}
+</style>

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

@@ -0,0 +1,75 @@
+<template>
+  <div>
+    <input :disabled="disabled" type="checkbox" :checked="checked" v-model="checked" @change="onChange" @click="onChange" class="btn-check" :id="id" />
+    <label class="btn btn-outline-primary" @click="onChange">{{ label }}</label
+    ><br />
+  </div>
+</template>
+<script>
+import { v4 as uuidv4 } from "uuid";
+export default {
+  props: {
+    modelValue: {
+      type: Boolean,
+      default: false,
+    },
+    label: {
+      type: String,
+      default: "",
+    },
+    id: {
+      type: String,
+      default: () => {
+        return uuidv4();
+      },
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  computed: {
+    value: {
+      get() {
+        return this.modelValue;
+      },
+      set(value) {
+        this.$emit("update:modelValue", value);
+      },
+    },
+  },
+  data() {
+    return {
+      checked: this.modelValue,
+    };
+  },
+  methods: {
+    onChange(event) {
+      this.checked = event.target.checked;
+      this.$emit("update:modelValue", this.checked);
+    },
+  },
+  watch: {
+    value() {
+      this.checked = this.value;
+    },
+  },
+};
+</script>
+<style scoped>
+.btn {
+  color: #2e86c1;
+  border-color: #2e86c1;
+  box-shadow: 3px 3px 5px #839192;
+  border-radius: 2px;
+}
+.btn-check:checked + .btn,
+.btn.active,
+.btn.show,
+.btn:first-child:active,
+:not(.btn-check) + .btn:active {
+  color: #ffffff;
+  background: #2e86c1;
+  border-color: #2e86c1;
+}
+</style>

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

@@ -0,0 +1,58 @@
+<template>
+  <div>
+    <a-checkbox class="unic-custom-checkbox" :disabled="disabled" :checked="checked" v-model="checked" @change="onChange">{{ label }}</a-checkbox>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    modelValue: {
+      type: Boolean,
+      default: false,
+    },
+    label: {
+      type: String,
+      default: "",
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  computed: {
+    value: {
+      get() {
+        return this.modelValue;
+      },
+      set(value) {
+        this.$emit("update:modelValue", value);
+      },
+    },
+  },
+  data() {
+    return {
+      checked: this.modelValue,
+    };
+  },
+  methods: {
+    onChange(event) {
+      this.checked = event.target.checked;
+      this.$emit("update:modelValue", this.checked);
+    },
+  },
+  watch: {
+    value() {
+      this.checked = this.value;
+    },
+  },
+};
+</script>
+<style>
+.ant-checkbox-disabled + span {
+  color: black !important;
+  cursor: not-allowed;
+}
+.unic-custom-checkbox .ant-checkbox-checked .ant-checkbox-inner::after {
+  border-color: black; /* Change to the desired color */
+}
+</style>