open-index/open-npm huggingface dataset:
npm package: @fktest/vue-file-preview
Description: 这是一个文件预览组件
Latest version: 1.0.1

# vue-file-preview

## Project setup
```
npm install
```

### Compiles and hot-reloads for development
```
npm run serve
```

### Compiles and minifies for production
```
npm run build
```

### Lints and fixes files
```
npm run lint
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).

node:14.17.5

packages：存放你所需要开发的所有组件的目录
lib：存放组件源码
packages/index.js:将组件注册为全局组件
examples：最初项目的src，我们可以一边开发一边调试

仓库：https://packages.aliyun.com/npm/npm-registry/guide

使用：
main.js中引入组件
import filePreview from 'vue-file-preview';
import 'vue-file-preview/lib/file-preview.css';
Vue.use(filePreview, 'name') // name为组件名称

```
    <file-preview extName="html" 
    :requestData="{
        schoolNum:15182,
        fileId:45317,
        randomDataId:'',
        token:'IrM6PSXZ/CKFgu2MWL3DqQ==',
        resName:'html',
        businessType:0,
        utId:''
        }"></file-preview>
```


```
extName: {
    type: String,
    default: 'pptx'
},
// 基础请求地址
baseUrl: {
    type: String,
    default: ''
},
// 请求接口地址
apiUrl: {
    type: String,
    default: ''
},
// 是否远程请求文件，默认是true
remote: {
    type: Boolean,
    default: true
},
// 文件请求参数
requestData: {
    type: Object,
    default () {
    return {
        schoolNum: '15182',
        fileId: '45320',
        randomDataId: '',
        token: 'IrM6PSXZ/CKFgu2MWL3DqQ==',
        resName: 'pptx',
        businessType: '0',
        utId: ''
    }
    }
},
// 预览数据
previewData: {
    type: Object,
    default () {
    return {}
    }
}

// 预览3d地址
threeUrl: {
    type: String,
    default: ''
},

// 请求头信息
headers: {
    type: Object,
    default () {
    return {}
    }
}
```


*   - 0: 文本文件（txt, TXT, log, LOG）
*   - 1: Word文档（doc, DOC, docx, DOCX）
*   - 2: Excel文件（xls, XLS, xlsx, XLSX）
*   - 3: PowerPoint文件（ppt, PPT, pptx, PPTX）
*   - 4: PDF文件（pdf, PDF）
*   - 5: 图片文件（png, PNG, jpg, JPG, jpeg, JPEG, gif, GIF, bmp, BMP）
*   - 6: Photoshop文件（psd, PSD）
*   - 7: 编程或配置文件（java, JAVA, c, C, cpp, CPP, cxx, CXX, sql, SQL, css, CSS, php, PHP, js, JS, jsp, JSP, py, PY, xml, XML, properties, PROPERTIES），但不包括crtx文件
*   - 8: 压缩文件（zip, ZIP）
*   - 9: 视频文件（mp4, MP4, mov, MOV, avi, AVI, flv, FLV, rmvb, RMVB, wmv, WMV, mpeg, MPEG, mkv, MKV, f4v, F4V, m4v, M4V, rm, RM, 3gp, 3GP, dat, DAT, ts, TS, mts, MTS, vob, VOB）
*   - 10: 其他未知文件类型
*   - 11: ai
*   - 12: 音频文件（aac, amr, ape, flac, m4r, mmf, mp2, mp3, MP3, ogg, wav, wma, wv）
*   - 13: 3D模型文件（obj, 3ds, stl, ply, gltf, off, 3dm, fbx, dae, wrl, 3mf, amf, ifc, brep, step, iges, fcstd, bim, igs, stp, glb）
*   - 14: XMind思维导图文件（xmind）
npm package: @fkui/font-default
Description: Försäkringskassan standardfont
Author: Försäkringskassan
Latest version: 6.42.0

# @fkui/font-default

Innehåller den standardfont och konfiguration som Försäkringskassan använder ([Inter][inter]).

[inter]: https://rsms.me/inter/

## Användning

För att använda standardfonten importera `@fkui/default-font` efter tema (exempelvis `@fkui/theme-default`):

```diff
 @use "@fkui/theme-default";
+@use "@fkui/font-default";
```

För att applicera CSS på en egen selector sätter du `$global: false` och använder den som en mixin istället:

```scss
@use "@fkui/font-default" with (
    $global: false
);

.awesome-selector {
    @include font-default.font;
}
```

Om du inte använder Vite behöver du:

1. Manuellt kopiera över filer till den katalog som innehåller dina kompilerade css-filer.
2. Sätta `$asset-path` till en relativ sökväg från den byggda css-filen till katalogen som innehåller filerna.

```diff
 @use "@fkui/theme-default";
+@use "@fkui/font-default" with (
+  $asset-path: "./fonts"
+);
```

## Metadata

Paketet levererar metadata i `@fkui/font-default/metadata` med följande format:

```ts
export interface Asset {
    filename: string;
}

export declare const assets: Asset[];
```

Kan med fördel användas för att kopiera över samtliga fontfiler.
npm package: @fkui/i18next-translate
Description: i18next translation provider for FKUI TranslationService
Author: Försäkringskassan
Latest version: 6.42.0

# `@fkui/i18next-translate`

`i18next` translation provider for FKUI `TranslationService`.

## Usage

```ts
import { TranslationService } from "@fkui/logic";
import { i18nextProvider } from "@fkui/i18next-translate";

/* create a new 18next translation provider */
const provider = i18nextProvider({
    defaultLanguage: "sv",
    async loadLanguage(lang) {
        const response = await fetch(`/texts/${lang}.json`);
        return await response.json();
    },
});

/* use provider for TranslationService translations */
TranslationService.changeProvider(provider);
```

When using Vue and `@fkui/vue` remenber to enable `TranslationPlugin`:

```ts
import { createApp } from "vue";
import { TranslationPlugin } from "@fkui/vue";
import App from "./App.vue";

const app = createApp(App);

/* enable translation plugin */
app.use(TranslationPlugin);
```
npm package: @fkui/icon-lib-builder
Description: Icon library builder
Author: Försäkringskassan
Latest version: 6.42.0

# fkui/icon-lib-builder

Biblioteket innehåller skript för att bygga ett ikonbibliotek. Genererar spritesheet utifrån svg-filer

## Katalogstruktur

    biblioteknamn (exempelvis, f-social)
        index.scss - frivillig, möjliggör om ditt ikonbibliotek vill innehålla extra styling, tex sätta upp stackbara varianter
        icon1.svg
        icon2.svg
        ...
npm package: @fkui/logo-default
Description: Försäkringskassan logotyper
Author: Försäkringskassan
Latest version: 6.42.0

# @fkui/logo-default

Innehåller Försäkringskassan logotyp som SVG och som shim för att sätta rätt logotyp till `FLogo`-komponenten.

## SVG

| Logotyp                            | Förhandsgranskning                                                                    | Beskrivning                              |
| ---------------------------------- | ------------------------------------------------------------------------------------- | ---------------------------------------- |
| `assets/fk-logo-primary.svg`       | ![Logo primary](../../packages/logo-default/assets/fk-logo-primary.png)               | Logotyp i färg med text.                 |
| `assets/fk-logo-small.svg`         | ![Logo small](../../packages/logo-default/assets/fk-logo-small.png)                   | Logotyp i färg utan text.                |
| `assets/fk-logo-primary-large.svg` | ![Logo primary (large)](../../packages/logo-default/assets/fk-logo-primary-large.png) | Logotyp med vit förgrundsfärg och text.  |
| `assets/fk-logo-primary-small.svg` | ![Logo primary (small)](../../packages/logo-default/assets/fk-logo-primary-small.png) | Logotyp med vit förgrundsfärg utan text. |

Samtliga logotyper har transparent bakgrund men visas här med vit samt svart bakgrund för förhandsgranskning.

## FLogo

Du använder `FLogo`-komponenten från `@fkui/vue` genom att importera `@fkui/default-logo` efter tema (exempelvis `@fkui/theme-default`):

```diff
 @use "@fkui/theme-default";
+@use "@fkui/logo-default";
```

För att applicera CSS på en egen selector sätter du `$global: false` och använder den som en mixin istället:

```scss
@use "@fkui/logo-default" with (
    $global: false
);

.awesome-selector {
    @include logo-default.f-logo;
}
```

Om du inte använder Vite behöver du:

1. Manuellt kopiera över filer till den katalog som innehåller dina kompilerade css-filer.
2. Sätta `$asset-path` till en relativ sökväg från den byggda css-filen till katalogen som innehåller filerna.

```diff
 @use "@fkui/theme-default";
+@use "@fkui/logo-default" with (
+  $asset-path: "./assets"
+);
```

## Metadata

Paketet levererar metadata i `@fkui/logo-default/metadata.json` med följande format:

```ts
export interface Asset {
    filename: string;
    description: string;
    width: number;
    height: number;
}

export declare const assets: Asset[];
```

Kan med fördel användas för att kopiera över samtliga logotyper.
npm package: @fkui/theme-builder
Description: Build script for FKUI theme
Author: Försäkringskassan
Latest version: 6.42.0

# fkui/theme-builder

Toolchain to build an FKUI theme.

## Usage

```
fkui-theme-builder [OPTIONS]

Options:
      --version  Show version number                                   [boolean]
  -o, --outdir   Output directory                     [string] [default: "dist"]
  -p, --prefix   Token prefix                         [string] [default: "fkds"]
      --help     Show help                                             [boolean]
```

### Semantic tokens

By default the semantic token prefix is `fkds`.

Any CSS-variable starting with this prefix is considered a semantic token.

```css
:root {
    --fkds-foobar: #fff;
    --something-else: #fff;
}
```

With `--prefix fkds` the `--fkds-foobar` would be a semantic token.

## File structure
npm package: @fkui/tsconfig
Description: Shared tsconfig.json presets for libraries and applications based on FKUI
Author: Försäkringskassan
Latest version: 6.42.0

# @fkui/tsconfig

Shared `tsconfig.json` presets for libraries and applications based on FKUI

## Recommended

The recommended `tsconfig.json` for general use.

Add to your `tsconfig.json`:

```
"extends": ["@fkui/tsconfig/recommended"]
```

## Cypress

Recommended configuration for Cypress, optionally combined with `recommended`:

Add to your `tsconfig.json`:

```
"extends": ["@fkui/tsconfig/recommended", "@fkui/tsconfig/cypress"]
```

## Vue

Recommended configuration for Vue, optionally combined with `recommended`:

Add to your `tsconfig.json`:

```
"extends": ["@fkui/tsconfig/recommended", "@fkui/tsconfig/vue"]
```
npm package: @fkui/vue-labs
Description: Experimental and unstable FKUI components
Author: Försäkringskassan
Latest version: 6.42.0

# fkui/vue-labs

Detta repo innehåller experimentversioner av komponenter och annan funktionalitet. Komponenterna är inte fullt ut testade, såväl enhetstest som tillgängligthet och SLA kan saknas. Konsumenten ansvarar för att själv testa komponenten. Komponenter i labs kan förändras och även försvinna.
npm package: @fkul/avg
Description: Helps at calculating an average of numbers
Author: Filip Kulpiński
Latest version: 1.0.1

# Avg

Helps at calculating an average of numbers.

## Getting started

```sh
yarn add @fkul/avg
```

## Interface

```ts
type Avg = {
  add(number: number): void
  get(): number
  getCount(): number
  setMaxCount(count: number): void
  reset(): void
}
```

- `add` - adds a number for calculation
- `get` - gets the calculated average of the previously added numbers
- `getCount` - gets the count of added numbers
- `setMaxCount` - limits the numbers count - adding new numbers will remove the oldest (default: 100)
- `reset` - resets all values to their defaults

## Example

```js
import { useAvg } from '@fkul/avg';

const avg = useAvg();

avg.add(10);
avg.add(30);

const result = avg.get() // 20
```

## Building

```sh
yarn build
```

## Testing

```sh
yarn test
```
npm package: @fkul/react-cf-ws-api
Description: React WebSocket API for Crypto Facilities
Author: Filip Kulpiński
Latest version: 1.0.3

# react-cf-ws-api

React WebSocket API for Crypto Facilities.

## Getting started

```sh
yarn add @fkul/react-cf-ws-api
```

## Interface

```ts
type CfWs = {
  subscribePub(
    feed: string,
    products: string[],
    callback: (data?: any) => void
  ): void
  unsubscribePub(feed: string, products: string[]): void
  getSubscriptionStatus(feed: string): string | null
}
```

- `subscribePub` - subscribes to a public feed
- `unsubscribePub` - unsubscribes from a public feed
- `updateSubscription` - updates an existing subscription
- `getSubscriptionStatus` - gets the status of a subscription

## Example

```js
import { useCfWs } from '@fkul/react-cf-ws-api';

const Component = () => {
  const ws = useCfWs()

  // the callback function
  const onFeedData = (data) => {}

  // subscribe
  ws.subscribePub("some_feed_name", ["som_product_id"], onFeedData)

  return <></>
}

export default Component
```

## Building

```sh
yarn build
```

## Testing

```sh
yarn test
```