open-index/open-npm huggingface dataset:
npm package: @fanswoo/shop
Description: ## 介紹
Author: fansWoo
Latest version: 1.7.19

# `@fanswoo/shop`

## 介紹

本套件以敏捷開發購物車系統為目的，可以透過一系列相關組件達到購物車的快速開發。

---

> ### 補充說明
> 更多使用方式請參考 [fanswoo-framework 使用教程](https://fanswoo.atlassian.net/wiki/spaces/fanswooDevelopers)
npm package: @fanswoo/touch
Description: > TODO: description
Author: Yi Yang
Latest version: 1.7.19

# `@fanswoo/touch`

## 介紹

本套件用途是增加觸控及滑動事件。

---

## 使用方法
透過 import 語句引入 @fanswoo/swipe/main 即可使用事件。

```
import { SwipeEventRegister } from '@fanswoo/touch/main';

const swipeEventRegister = new SwipeEventRegister();
swipeEventRegister.regist();

document.addEventListener('swipeleft', (event) => {
  console.log('swipeleft');
});

document.addEventListener('panright', (event) => {
  console.log(event.detail.mouseX);
});
```

---

## 選用參數

<table>
  <thead>
    <th>事件</th>
    <th>說明</th>
  </thead>
  <tbody>
    <tr>
      <td>swipeleft</td>
      <td>向左滑動事件。手指滑過且離開螢幕才觸發此事件。</td>
    </tr>
    <tr>
      <td>swiperight</td>
      <td>向右滑動事件。手指滑過且離開螢幕才觸發此事件。</td>
    </tr>
    <tr>
      <td>swipeup</td>
      <td>向上滑動事件。手指滑過且離開螢幕才觸發此事件。</td>
    </tr>
    <tr>
      <td>swipedown</td>
      <td>向下滑動事件。手指滑過且離開螢幕才觸發此事件。</td>
    </tr>
    <tr>
      <td>panleft</td>
      <td>向左劃過事件。手指劃過但未離開螢幕即觸發此事件，可以偵測其 event.detail.mouseX 及 event.detail.mouseY 即時回饋滑鼠位置。</td>
    </tr>
    <tr>
      <td>panright</td>
      <td>向右劃過事件。手指劃過但未離開螢幕即觸發此事件，可以偵測其 event.detail.mouseX 及 event.detail.mouseY 即時回饋滑鼠位置。</td>
    </tr>
    <tr>
      <td>panup</td>
      <td>向上劃過事件。手指劃過但未離開螢幕即觸發此事件，可以偵測其 event.detail.mouseX 及 event.detail.mouseY 即時回饋滑鼠位置。</td>
    </tr>
    <tr>
      <td>pandown</td>
      <td>向下劃過事件。手指劃過但未離開螢幕即觸發此事件，可以偵測其 event.detail.mouseX 及 event.detail.mouseY 即時回饋滑鼠位置。</td>
    </tr>
  </tbody>
</table>

> ### 補充說明
> 更多使用方式請參考 [fanswoo-framework 使用教程](https://fanswoo.atlassian.net/wiki/spaces/fanswooDevelopers)
npm package: @fanswoo/workspace-environment
Description: > TODO: description
Author: Yi Yang
Latest version: 1.7.19

# `@fanswoo/workspace-environment`

## 介紹

本套件是 `TypeScript` + `Vue` + `Jest` + `Prettier` 的環境設定檔，讓使用者僅需套用此套件即可快速完成複雜的環境設置。

## 使用方法

### TypeScript 使用方法

直接於專案根目錄設置 `.tsconfig.json` 並引用 `extends` 屬性即可，若對於錯誤訊息有特殊需求，可以再根據需要覆寫需要的設定。

```
{
  "extends": "@fanswoo/workspace-environment/tsconfig.default.json",
  "compilerOptions": {
    "outDir": "public",
    "baseUrl": ".",
    "typeRoots": [
      "./node_modules/@types",
    ],
    "paths": {
      "@/*": [
        "./resources/js/*"
      ],
    }
  },
  "include": [
    "./node_modules/**/*.d.ts"
  ]
}
```

### Jest 使用方法

直接於專案根目錄設置 `jest.conf.js` 即可。

```
module.exports = {
  verbose: true,
  moduleFileExtensions: ['js', 'ts', 'json', 'vue'],
  transform: {
    '.*\\.(vue)$': 'vue-jest',
    '^.+\\.tsx?$': 'ts-jest',
    '^.+\\.js$': 'babel-jest',
  },
  testURL: 'http://localhost/',
  snapshotSerializers: ['jest-serializer-vue'],
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/resources/js/$1',
  },
};
```

### Prettier & Prettier PHP 使用方法

直接於專案根目錄設置 `.prettierrc.js` 即可，將會自動排版包含 JavaScript、TypeScript、PHP、CSS、JSON 等檔案。

```
module.exports = {
  singleQuote: true,
  trailingComma: 'all',
  phpVersion: '7.4',
  braceStyle: 'psr-2',
};
```

使用 Prettier 需要配合支援 Prettier 的編輯器，並應根據編輯器設定作設置調整，例如若使用 VSCode 作為編輯器，則應於 `.vscode/setting.json` 檔案進行如下設置：

```
{
  "files.autoSave": "onWindowChange",
  "editor.formatOnSave": true,
  "vetur.validation.template": false,
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[php]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}
```

> 若有需要略過排版的檔案，可以使用 `.prettierignore` 檔案作為略過檔案的規則設置，其設置規則與 .gitignore 相同。

---

> ### 補充說明
> 更多使用方式請參考 [fanswoo-framework 使用教程](https://fanswoo.atlassian.net/wiki/spaces/fanswooDevelopers)