ch3chi-commons-vue 0.1.0 → 0.1.2

package/dist/directive/CBootstrapDirective.js

@@ -0,0 +1,77 @@
+import { Dropdown, Tooltip } from 'bootstrap';
+import { CBSModalViewModel } from "../model/CBSModalViewModel";
+/**
+ * v-tooltip 指令
+ * 初始化 Bootstrap 的 Tooltip
+ * 使用方式：<button v-tooltip>Hover me</button>
+ */
+export const vdTooltip = {
+    mounted(el) {
+        new Tooltip(el);
+    },
+    unmounted(el) {
+        const tooltip = Tooltip.getInstance(el);
+        if (tooltip)
+            tooltip.dispose();
+    }
+};
+/**
+ * v-cbs-modal 指令
+ * binding.value 必須是 CBSModalViewModel 的實例
+ */
+export const vdCBSModal = {
+    mounted(elt, binding) {
+        if (!(binding.value instanceof CBSModalViewModel)) {
+            console.error('vdCBSModal directive requires binding.value to be an instance of CBSModalView');
+            return;
+        }
+        const viewModel = binding.value;
+        viewModel.init({ elt });
+    },
+    unmounted(elt, binding) {
+        if (!(binding.value instanceof CBSModalViewModel)) {
+            console.error('vdCBSModal directive requires binding.value to be an instance of CBSModalView');
+            return;
+        }
+        // 清理 Modal 實例
+        const viewModel = binding.value;
+        viewModel.unmount();
+    }
+};
+// 當點擊其他地方時，隱藏 Dropdown
+function hideDropdown(el, event) {
+    // 如果點擊的不是 Dropdown 元素或其子元素，則隱藏 Dropdown
+    if (!el.contains(event.target)) {
+        Dropdown.getInstance(el)?.hide();
+        return;
+    }
+}
+/**
+ * v-cbs-dropdown 指令
+ * 初始化 Bootstrap 的 Dropdown
+ */
+export const vdCBSDropdown = {
+    mounted(el) {
+        // 初始化 Bootstrap 的 Dropdown
+        const dropdown = Dropdown.getOrCreateInstance(el);
+        // click toggle dropdown
+        el.addEventListener('click', (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            // 顯示 Dropdown
+            dropdown.toggle();
+            return false;
+        });
+        const docListener = hideDropdown.bind(null, el);
+        // 點擊其他地方關閉 Dropdown
+        document.addEventListener('click', docListener);
+    },
+    unmounted(el) {
+        // 清理 Dropdown 實例
+        const dropdown = Dropdown.getInstance(el);
+        dropdown?.dispose();
+        const docListener = hideDropdown.bind(null, el);
+        // 移除點擊事件監聽器
+        document.removeEventListener('click', docListener);
+    }
+};

package/dist/directive/CDateFormatterDirective.js

@@ -0,0 +1,32 @@
+import dayjs from 'dayjs';
+import { isRef } from 'vue';
+function formatDateToElement(el, value) {
+    let date;
+    if (isRef(value)) {
+        date = value.value;
+    }
+    else if (value instanceof Date) {
+        date = value;
+    }
+    // 如果 el 有 data-date-format 屬性，則使用該格式化方式
+    const dateFormat = el.getAttribute('data-date-format') || 'YYYY-MM-DD';
+    const formatted = date ? dayjs(date).format(dateFormat) : '';
+    if (el.tagName === 'INPUT' && el.type === 'text') {
+        el.value = formatted;
+    }
+    else if (['SPAN', 'P', 'DIV'].includes(el.tagName)) {
+        el.innerHTML = formatted;
+    }
+}
+/**
+ * v-date-formatter 指令
+ * 解析 ref<Date> 並格式化為文字，根據元素型態輸出
+ */
+export const vdDateFormatter = {
+    mounted(el, binding) {
+        formatDateToElement(el, binding.value);
+    },
+    updated(el, binding) {
+        formatDateToElement(el, binding.value);
+    }
+};

package/dist/directive/CFTurnstileDirective.js

@@ -0,0 +1,29 @@
+import * as _ from 'lodash';
+export const CFTurnstileDirective = {
+    mounted(el, binding) {
+        const fieldContext = binding.value;
+        const siteKey = _.get(import.meta.env, 'VITE_CLOUDFLARE_TURNSTILE_SITE_KEY');
+        if (!siteKey) {
+            console.error('Cloudflare Turnstile site key is not defined.');
+            return;
+        }
+        const renderTurnstile = () => {
+            window.turnstile?.render(el, {
+                sitekey: siteKey,
+                callback: (token) => {
+                    fieldContext.value.value = token;
+                }
+            });
+        };
+        if (window.turnstile) {
+            renderTurnstile();
+            return;
+        }
+        const interval = setInterval(() => {
+            if (window.turnstile) {
+                clearInterval(interval);
+                renderTurnstile();
+            }
+        }, 100);
+    }
+};

package/dist/directive/CFormDirective.js

@@ -0,0 +1,50 @@
+import _ from "lodash";
+/**
+ * 此指令用於當 FormField 有錯誤時，顯示錯誤樣式 'is-invalid'。
+ */
+export const CFormFieldErrorStyleDirective = {
+    mounted(el, binding) {
+        addErrorClassIfNeed(el, binding.value);
+    },
+    updated(el, binding) {
+        addErrorClassIfNeed(el, binding.value);
+    },
+};
+// 此函式用於檢查 FieldContext 的錯誤狀態，並根據錯誤狀態添加或移除 'is-invalid' 類別。
+function addErrorClassIfNeed(el, fieldContext) {
+    if (_.isNil(fieldContext) || !_.has(fieldContext, 'errors') || !_.isArray(fieldContext.errors.value)) {
+        el.classList.remove('is-invalid');
+        return;
+    }
+    if (_.isEmpty(fieldContext.errors.value)) {
+        el.classList.remove('is-invalid');
+    }
+    else {
+        el.classList.add('is-invalid');
+    }
+}
+/**
+ * 此指令用於當 Yup Schema 驗證失敗時，顯示錯誤樣式 'is-invalid'。
+ */
+export const CFormFieldErrorOnYupDirective = {
+    mounted(el, binding) {
+        addErrorClassIfNeedOnYup(el, binding.value);
+    },
+    updated(el, binding) {
+        addErrorClassIfNeedOnYup(el, binding.value);
+    },
+};
+function addErrorClassIfNeedOnYup(el, schema) {
+    if (_.isNil(schema) || !_.isFunction(schema.validateSync)) {
+        el.classList.remove('is-invalid');
+        return;
+    }
+    try {
+        const val = el.value || '';
+        schema.validateSync(val);
+        el.classList.remove('is-invalid');
+    }
+    catch (err) {
+        el.classList.add('is-invalid');
+    }
+}

package/dist/model/CBSModalViewModel.js

@@ -0,0 +1,72 @@
+import { ref } from 'vue';
+import { Modal } from 'bootstrap';
+import { v4 as uuid } from 'uuid';
+export var ICBSModalViewType;
+(function (ICBSModalViewType) {
+    ICBSModalViewType["Info"] = "infoModal";
+    ICBSModalViewType["Form"] = "formModal";
+    ICBSModalViewType["Table"] = "tableModal";
+})(ICBSModalViewType || (ICBSModalViewType = {}));
+export class CBSModalViewModel {
+    modalInstance = ref(null);
+    elt = null;
+    type;
+    modalId;
+    labelId;
+    title;
+    config; // 額外的配置選項與 Modal config 一致
+    onOpen;
+    onClose;
+    constructor(data) {
+        this.type = data?.type || ICBSModalViewType.Info;
+        this.modalId = `${this.type}-${uuid()}`;
+        this.labelId = `${this.modalId}-label`;
+        this.title = data?.title || this.defaultTitle();
+        this.onOpen = data?.onOpen;
+        this.onClose = data?.onClose;
+        this.config = Object.assign({
+            backdrop: 'static',
+            keyboard: false
+        }, data?.config);
+    }
+    defaultTitle() {
+        switch (this.type) {
+            case ICBSModalViewType.Info:
+                return '資訊';
+            case ICBSModalViewType.Form:
+                return '請填寫表單';
+            case ICBSModalViewType.Table:
+                return '請選擇';
+            default:
+                return '';
+        }
+    }
+    show() {
+        this.modalInstance.value?.show();
+    }
+    hide() {
+        this.modalInstance.value?.hide();
+    }
+    init({ elt }) {
+        if (!elt) {
+            return;
+        }
+        this.elt = elt;
+        this.modalInstance.value = new Modal(this.elt, {
+            ...this.config
+        });
+        this.elt.addEventListener('show.bs.modal', () => {
+            this.onOpen?.();
+        });
+        this.elt.addEventListener('hidden.bs.modal', () => {
+            this.onClose?.();
+        });
+    }
+    unmount() {
+        if (this.modalInstance.value) {
+            this.modalInstance.value.dispose();
+            this.modalInstance.value = null;
+        }
+        this.elt = null;
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ch3chi-commons-vue",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -12,9 +12,27 @@
   "scripts": {
     "build": "tsc"
   },
+  "peerDependencies": {
+    "bootstrap": "^5.3.7",
+    "dayjs": ">=1.11.13",
+    "lodash": ">=4.17.21",
+    "uuid": ">=11.1.0",
+    "vee-validate": ">=4.15.1",
+    "vue": "^3.5.18",
+    "yup": ">=1.7.1"
+  },
   "devDependencies": {
+    "@types/bootstrap": "^5.2.10",
+    "@types/lodash": "^4.17.20",
     "@types/node": "^24.10.0",
-    "typescript": "^5.9.3"
+    "bootstrap": "^5.3.7",
+    "dayjs": "^1.11.13",
+    "lodash": "^4.17.21",
+    "typescript": "^5.9.3",
+    "uuid": "^11.1.0",
+    "vee-validate": "^4.15.1",
+    "vue": "^3.5.23",
+    "yup": "^1.7.1"
   },
   "prepublishOnly": [
     "npm run build"