{"id":20669691,"url":"https://github.com/fox-one/finance-ui","last_synced_at":"2026-04-22T02:31:43.232Z","repository":{"id":40272771,"uuid":"372797649","full_name":"fox-one/finance-ui","owner":"fox-one","description":"The Financial UI Component Library","archived":false,"fork":false,"pushed_at":"2023-07-07T21:23:20.000Z","size":5888,"stargazers_count":1,"open_issues_count":8,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-10T16:42:44.615Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fox-one.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-06-01T10:59:09.000Z","updated_at":"2021-08-17T02:39:41.000Z","dependencies_parsed_at":"2025-01-17T13:30:50.052Z","dependency_job_id":"9f32d774-13e3-44b6-9a12-5cb060ac844b","html_url":"https://github.com/fox-one/finance-ui","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/fox-one/finance-ui","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fox-one%2Ffinance-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fox-one%2Ffinance-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fox-one%2Ffinance-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fox-one%2Ffinance-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fox-one","download_url":"https://codeload.github.com/fox-one/finance-ui/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fox-one%2Ffinance-ui/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32118075,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-22T00:31:26.853Z","status":"online","status_checked_at":"2026-04-22T02:00:05.693Z","response_time":58,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-16T20:15:36.572Z","updated_at":"2026-04-22T02:31:43.216Z","avatar_url":"https://github.com/fox-one.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# finance-ui\n\nEnglish | [简体中文](./README.zh-CN.md)\n\n[Demo](https://fox-one.github.io/finance-ui/?path=/story)\n\n## Quick start\n### Install\n\n```shell\nyarn add @foxone/finance-ui\n# or\nnpm i -S @foxone/finance-ui\n```\n\n### Global Usage\n`main.ts`:\n```typescript\nimport Vue from \"vue\";\nimport FinanceUI from \"@foxone/finance-ui\";\nimport \"@foxone/finance-ui/es/index.css\";\n\nVue.use(FinanceUI);\n\n// ……\n```\n\n`App.vue`:\n```vue\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    My Vue App With FinanceUI\n    \u003casset-range-input\n      v-model=\"amount\"\n      @input=\"onInput\"\n      :max=\"max\"\n      :inputTips=\"inputTips\"\n      :asset=\"asset\"\n      :selectable=\"false\"\n    /\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript lang=\"ts\"\u003e\n  import { Component, Vue } from 'vue-property-decorator';\n\n  @Component\n  export default class App extends Vue {\n    max = 50;\n    asset = {\n      chain: {\n        chain: null,\n        chain_id: \"43d61dcd-e413-450d-80b8-101d5e903357\",\n        id: \"43d61dcd-e413-450d-80b8-101d5e903357\",\n        logo: \"https://mixin-images.zeromesh.net/zVDjOxNTQvVsA8h2B4ZVxuHoCF3DJszufYKWpd9duXUSbSapoZadC7_13cnWBqg0EmwmRcKGbJaUpA8wFfpgZA=s128\",\n        name: \"Ether\",\n        price: \"2167.89\",\n        symbol: \"ETH\"\n      },\n      chain_id: \"43d61dcd-e413-450d-80b8-101d5e903357\",\n      id: \"965e5c6e-434c-3fa9-b780-c50f43cd955c\",\n      logo: \"https://mixin-images.zeromesh.net/0sQY63dDMkWTURkJVjowWY6Le4ICjAFuu3ANVyZA4uI3UdkbuOT5fjJUT82ArNYmZvVcxDXyNjxoOv0TAYbQTNKS=s128\",\n      name: \"Chui Niu Bi\",\n      price: \"0\",\n      symbol: \"CNB\"\n    }；\n    inputTips = {\n      amount: 50,\n      amountSymbol: 'CNB',\n      tipLeft: 'Collateral',\n      tipRight: '≈ $ 6456.54',\n    }；\n    amount = 30.21;\n\n    onInput() {\n      console.log('this.amount', this.amount);\n    }\n  }\n\u003c/script\u003e\n```\n\n### Local Usage\n`Component.vue`:\n```vue\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    It's Risk Slider\n    \u003crisk-slider\n      v-model=\"percent\"\n      :tips=\"tips\"\n      :scale=\"scale\"\n      ref=\"slider\"\n    /\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript lang=\"ts\"\u003e\n  import { Component, Vue } from 'vue-property-decorator';\n  import { RiskSlider } from '@foxone/finance-ui';\n  import \"@foxone/finance-ui/es/RiskSlider/style/css\";\n\n  @Component(\n    components: {\n      RiskSlider\n    }\n  )\n  export default class App extends Vue {\n    percent = 30;\n    tips = {\n      tip: 'Collateralization Ration reach',\n      highlight: `${(30.21 / 50 * 100).toFixed(2)}%, it’s in low-risk now.`\n    };\n    scale = {\n      low: 0.65,\n      mid: 0.2,\n      high: 0.15\n    };\n  }\n\u003c/script\u003e\n```\n\n\n\n## Dev\nFor debugging or maintenance, you can clone the whole git repository and run the project.\n\n```shell\ngit clone --depth 1 git@github.com:fox-one/finance-ui.git\n\ncd finance-ui\n\nyarn \u0026\u0026 yarn dev\n```\n\n[More Detials](./DEV.md)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffox-one%2Ffinance-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffox-one%2Ffinance-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffox-one%2Ffinance-ui/lists"}