@stephenchenorg/astro 3.1.1 → 4.0.1

package/dist/form-validator/components/FormField.vue

@@ -0,0 +1,29 @@
+<template>
+  <slot :error />
+</template>
+
+<script setup lang="ts">
+import type { Rule } from '../types'
+import { inject, ref } from 'vue'
+import { formValidatorInjectionKey } from '../injectionKey'
+
+const props = defineProps<{
+  id: string
+  rules?: Rule[]
+}>()
+
+const error = ref<string | undefined>(undefined)
+
+const formValidator = inject(formValidatorInjectionKey)
+if (!formValidator) {
+  throw new Error('FormValidator is not provided in the context.')
+}
+
+if (props.rules) {
+  formValidator.appendRules(props.id, props.rules)
+}
+
+formValidator.onErrorsUpdated(errors => {
+  error.value = errors[props.id]?.[0]
+})
+</script>

package/dist/form-validator/components/FormValidatorProvider.d.ts

@@ -0,0 +1,22 @@
+import type { PropType } from 'vue';
+import type { FormErrors } from '../types';
+import { FormValidator } from '../form-validator';
+export interface FormValidatorProviderExposed {
+    formValidator: () => FormValidator;
+}
+declare const FormValidatorProvider: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    errors: {
+        type: PropType<FormErrors>;
+        default: () => {};
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>[] | undefined, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    errors: {
+        type: PropType<FormErrors>;
+        default: () => {};
+    };
+}>> & Readonly<{}>, {
+    errors: FormErrors;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default FormValidatorProvider;

package/dist/form-validator/components/FormValidatorProvider.js

@@ -0,0 +1,24 @@
+import { defineComponent, onMounted, provide } from "vue";
+import { FormValidator } from "../form-validator.js";
+import { formValidatorInjectionKey } from "../injectionKey.js";
+const FormValidatorProvider = defineComponent({
+  name: "FormValidatorProvider",
+  props: {
+    errors: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  setup(props, { slots, expose }) {
+    const formValidator = new FormValidator();
+    provide(formValidatorInjectionKey, formValidator);
+    onMounted(() => {
+      formValidator.setErrors(props.errors);
+    });
+    expose({
+      formValidator: () => formValidator
+    });
+    return () => slots.default?.();
+  }
+});
+export default FormValidatorProvider;

package/dist/form-validator/form-validator.d.ts

@@ -0,0 +1,12 @@
+import type { FormErrors, Rule } from './types';
+export declare class FormValidator {
+    rules: Record<string, Rule[]>;
+    errors: FormErrors;
+    errorsUpdatedCallbacks: ((errors: FormErrors) => void)[];
+    validate(data: Record<string, any>): boolean;
+    prependRules(field: string, rules: Rule | Rule[]): void;
+    appendRules(field: string, rules: Rule | Rule[]): void;
+    setErrors(errors: FormErrors): void;
+    resetErrors(): void;
+    onErrorsUpdated(callback: (errors: FormErrors) => void): void;
+}

package/dist/form-validator/form-validator.js

@@ -0,0 +1,47 @@
+export class FormValidator {
+  rules = {};
+  errors = {};
+  errorsUpdatedCallbacks = [];
+  validate(data) {
+    const errors = {};
+    let isValid = true;
+    for (const field in this.rules) {
+      const fieldRules = this.rules[field];
+      const value = data[field];
+      for (const rule of fieldRules) {
+        if (!rule.validate(value)) {
+          isValid = false;
+          if (!errors[field]) {
+            errors[field] = [];
+          }
+          errors[field].push(rule.message);
+          break;
+        }
+      }
+    }
+    this.setErrors(errors);
+    return isValid;
+  }
+  prependRules(field, rules) {
+    if (!this.rules[field]) {
+      this.rules[field] = [];
+    }
+    this.rules[field].unshift(...Array.isArray(rules) ? rules : [rules]);
+  }
+  appendRules(field, rules) {
+    if (!this.rules[field]) {
+      this.rules[field] = [];
+    }
+    this.rules[field].push(...Array.isArray(rules) ? rules : [rules]);
+  }
+  setErrors(errors) {
+    this.errors = structuredClone(errors);
+    this.errorsUpdatedCallbacks.forEach((callback) => callback(this.errors));
+  }
+  resetErrors() {
+    this.setErrors({});
+  }
+  onErrorsUpdated(callback) {
+    this.errorsUpdatedCallbacks.push(callback);
+  }
+}

package/dist/form-validator/index.d.ts

@@ -0,0 +1,5 @@
+export { default as FormField } from './components/FormField.vue';
+export { default as FormValidatorProvider } from './components/FormValidatorProvider';
+export type { FormValidatorProviderExposed } from './components/FormValidatorProvider';
+export * from './form-validator';
+export * from './types';

package/dist/form-validator/index.js

@@ -0,0 +1,4 @@
+export { default as FormField } from "./components/FormField.vue";
+export { default as FormValidatorProvider } from "./components/FormValidatorProvider.js";
+export * from "./form-validator.js";
+export * from "./types.js";

package/dist/form-validator/injectionKey.d.ts

@@ -0,0 +1,3 @@
+import type { InjectionKey } from 'vue';
+import type { FormValidator } from './form-validator';
+export declare const formValidatorInjectionKey: InjectionKey<FormValidator>;

package/dist/form-validator/injectionKey.js

@@ -0,0 +1 @@
+export const formValidatorInjectionKey = Symbol("");

package/dist/form-validator/types.d.ts

@@ -0,0 +1,5 @@
+export type FormErrors = Record<string, string[]>;
+export interface Rule {
+    validate: (value: any) => boolean;
+    message: string;
+}

package/dist/image/index.d.ts

@@ -1,5 +1,4 @@
-import Image from './components/Image.astro';
-import ResponsiveImage from './components/ResponsiveImage.astro';
+export { default as Image } from './components/Image.astro';
+export { default as ResponsiveImage } from './components/ResponsiveImage.astro';
 export * from './fragments';
 export * from './types';
-export { Image, ResponsiveImage };

package/dist/image/index.js

@@ -1,5 +1,4 @@
-import Image from "./components/Image.astro";
-import ResponsiveImage from "./components/ResponsiveImage.astro";
+export { default as Image } from "./components/Image.astro";
+export { default as ResponsiveImage } from "./components/ResponsiveImage.astro";
 export * from "./fragments.js";
 export * from "./types.js";
-export { Image, ResponsiveImage };

package/dist/page/index.d.ts

@@ -1,5 +1,4 @@
-import PageFieldRender from './components/PageFieldRender.astro';
+export { default as PageFieldRender } from './components/PageFieldRender.astro';
 export * from './field';
 export * from './seo-meta';
 export * from './types';
-export { PageFieldRender };

package/dist/page/index.js

@@ -1,5 +1,4 @@
-import PageFieldRender from "./components/PageFieldRender.astro";
+export { default as PageFieldRender } from "./components/PageFieldRender.astro";
 export * from "./field/index.js";
 export * from "./seo-meta/index.js";
 export * from "./types.js";
-export { PageFieldRender };

package/dist/product-sku/index.d.ts

@@ -0,0 +1,2 @@
+export { ProductSkuManager } from './productSku';
+export * from './types';

package/dist/product-sku/index.js

@@ -0,0 +1,2 @@
+export { ProductSkuManager } from "./productSku.js";
+export * from "./types.js";

package/dist/product-sku/productSku.d.ts

@@ -0,0 +1,39 @@
+import type { ProductAttribute, ProductSpecification } from './types';
+export declare class ProductSkuManager {
+    /**
+     * 商品規格選項列表
+     */
+    attributes: ProductAttribute[];
+    /**
+     * 商品規格列表
+     */
+    specifications: ProductSpecification[];
+    /**
+     * 已經選中商品規格選項的參數 ID
+     */
+    selectedSkuAttrs: Record<number, {
+        itemId: number;
+        label: string;
+    }>;
+    /**
+     * 匹配到的商品規格 SKU 物件
+     */
+    specification: ProductSpecification | undefined;
+    constructor({ attributes, specifications }: {
+        attributes: ProductAttribute[];
+        specifications: ProductSpecification[];
+    });
+    /**
+     * 選擇商品規格選項
+     */
+    selectSkuAttr(skuAttrId: number, skuItemId: number, label: string): void;
+    getSpecificationLabel(): string;
+    /**
+     * 確認商品規格選項都已經選擇
+     */
+    areAllSkuAttrsSelected(): boolean;
+    /**
+     * 確認商品規格還有庫存
+     */
+    isSpecificationInStock(stock: number): boolean;
+}

package/dist/product-sku/productSku.js

@@ -0,0 +1,52 @@
+export class ProductSkuManager {
+  /**
+   * 商品規格選項列表
+   */
+  attributes = [];
+  /**
+   * 商品規格列表
+   */
+  specifications = [];
+  /**
+   * 已經選中商品規格選項的參數 ID
+   */
+  selectedSkuAttrs = {};
+  /**
+   * 匹配到的商品規格 SKU 物件
+   */
+  specification = void 0;
+  constructor({ attributes, specifications }) {
+    this.attributes = attributes;
+    this.specifications = specifications;
+    if (specifications.length === 1 && specifications[0].combination_key === null) {
+      this.specification = specifications[0];
+    }
+  }
+  /**
+   * 選擇商品規格選項
+   */
+  selectSkuAttr(skuAttrId, skuItemId, label) {
+    this.selectedSkuAttrs[skuAttrId] = {
+      itemId: skuItemId,
+      label
+    };
+    const skuAttrIds = Object.values(this.selectedSkuAttrs).map((attr) => attr.itemId).sort((a, b) => a - b);
+    this.specification = this.specifications.find((specification) => specification.combination_key === skuAttrIds.join("-"));
+  }
+  getSpecificationLabel() {
+    return Object.values(this.selectedSkuAttrs).map((attr) => attr.label).join(", ");
+  }
+  /**
+   * 確認商品規格選項都已經選擇
+   */
+  areAllSkuAttrsSelected() {
+    return Object.keys(this.selectedSkuAttrs).length === this.attributes.length;
+  }
+  /**
+   * 確認商品規格還有庫存
+   */
+  isSpecificationInStock(stock) {
+    const specificationStock = this.specification?.inventory || 0;
+    return specificationStock > 0 && specificationStock >= stock;
+  }
+}

package/dist/product-sku/types.d.ts

@@ -0,0 +1,20 @@
+export interface ProductAttribute {
+    id: number;
+    title: string;
+    items: ProductAttributeItem[];
+}
+export interface ProductAttributeItem {
+    id: number;
+    title: string;
+}
+export interface ProductSpecification {
+    id: number;
+    /** 商品規格 Key */
+    combination_key: string | null;
+    /** 原價 */
+    listing_price: string;
+    /** 實際售價 */
+    selling_price: string;
+    /** 商品庫存數量 */
+    inventory: number;
+}

package/dist/query-params/components/ProvideUrlConfig.astro

@@ -7,6 +7,7 @@ interface Props {
 
 const config: UrlConfig = {
   baseUrl: Astro.props.config.baseUrl,
+  hash: Astro.props.config.hash,
   params: Astro.props.config.params,
   defaultParams: Astro.props.config.defaultParams,
 }
@@ -22,8 +23,9 @@ import { urlConfigStore } from '@stephenchenorg/astro/query-params'
 const props = window.__astro_provide_url_config__
 
 const baseUrl: string = props?.baseUrl || location.pathname
+const hash: string = props?.hash || ''
 const params: Record<string, any> = props?.params || {}
 const defaultParams: Record<string, any> = props?.defaultParams || {}
 
-urlConfigStore.set({ baseUrl, params, defaultParams })
+urlConfigStore.set({ baseUrl, hash, params, defaultParams })
 </script>

package/dist/query-params/index.d.ts

@@ -1,7 +1,6 @@
-import ProvideUrlConfig from './components/ProvideUrlConfig.astro';
+export { default as ProvideUrlConfig } from './components/ProvideUrlConfig.astro';
 export * from './config';
 export * from './store';
 export * from './types';
 export * from './url';
 export * from './utils';
-export { ProvideUrlConfig };

package/dist/query-params/index.js

@@ -1,7 +1,6 @@
-import ProvideUrlConfig from "./components/ProvideUrlConfig.astro";
+export { default as ProvideUrlConfig } from "./components/ProvideUrlConfig.astro";
 export * from "./config.js";
 export * from "./store.js";
 export * from "./types.js";
 export * from "./url.js";
 export * from "./utils.js";
-export { ProvideUrlConfig };

package/dist/query-params/store.js

@@ -1,6 +1,7 @@
 import { atom } from "nanostores";
 export const urlConfigStore = atom({
   baseUrl: "",
+  hash: "",
   params: {},
   defaultParams: {}
 });

package/dist/query-params/types.d.ts

@@ -1,5 +1,6 @@
 export interface UrlConfig {
     baseUrl: string;
+    hash?: string;
     params: Record<string, any>;
     defaultParams?: Record<string, any>;
 }

package/dist/query-params/url.js

@@ -3,8 +3,7 @@ import { urlConfigStore } from "./store.js";
 import { cleanParams, mergeUrlParams } from "./utils.js";
 export function queryParamsUrl(additionalParams, urlConfig = {
   baseUrl: "",
-  params: {},
-  defaultParams: {}
+  params: {}
 }, options = {}) {
   const {
     clear = false,
@@ -24,7 +23,7 @@ export function queryParamsUrl(additionalParams, urlConfig = {
     skipNull: true,
     sort: false
   });
-  return `${config.baseUrl}${queryString ? "?" : ""}${queryString}`;
+  return `${config.baseUrl}${queryString ? "?" : ""}${queryString}${config.hash ? `#${config.hash}` : ""}`;
 }
 export function parseQueryParams(search) {
   return qs.parse(search);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stephenchenorg/astro",
   "type": "module",
-  "version": "3.1.1",
+  "version": "4.0.1",
   "description": "Stephenchenorg Astro 前端通用套件",
   "license": "MIT",
   "homepage": "https://stephenchenorg-astro.netlify.app",
@@ -21,6 +21,10 @@
       "types": "./dist/company-setting/index.d.ts",
       "import": "./dist/company-setting/index.js"
     },
+    "./form-validator": {
+      "types": "./dist/form-validator/index.d.ts",
+      "import": "./dist/form-validator/index.js"
+    },
     "./image": {
       "types": "./dist/image/index.d.ts",
       "import": "./dist/image/index.js"
@@ -37,6 +41,10 @@
       "types": "./dist/pagination-vue/index.d.ts",
       "import": "./dist/pagination-vue/index.js"
     },
+    "./product-sku": {
+      "types": "./dist/product-sku/index.d.ts",
+      "import": "./dist/product-sku/index.js"
+    },
     "./query-params": {
       "types": "./dist/query-params/index.d.ts",
       "import": "./dist/query-params/index.js"
@@ -85,6 +93,7 @@
   },
   "devDependencies": {
     "@astrojs/check": "^0.9.4",
+    "@astrojs/vue": "^5.1.0",
     "@ycs77/eslint-config": "^4.4.0",
     "astro": "^5.11.0",
     "bumpp": "^10.2.0",