@outs-tand-ing/ui 0.0.6 → 0.2.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (66) hide show
  1. package/README.md +7 -0
  2. package/dist/components/AccessWrapper.vue.d.ts +23 -0
  3. package/dist/components/AccessWrapper.vue.d.ts.map +1 -0
  4. package/dist/components/SVGShape.vue.d.ts +43 -0
  5. package/dist/components/SVGShape.vue.d.ts.map +1 -0
  6. package/dist/components/ScrollableArea.vue.d.ts +22 -0
  7. package/dist/components/ScrollableArea.vue.d.ts.map +1 -0
  8. package/dist/index.d.ts +8 -1
  9. package/dist/index.d.ts.map +1 -1
  10. package/dist/index.js +451 -49
  11. package/dist/seasons/24.js +4 -0
  12. package/dist/seasons/25.js +4 -0
  13. package/dist/seasons/26.js +4 -0
  14. package/dist/seasons/27.js +4 -0
  15. package/dist/seasons/fifawc26/index.d.ts +3 -0
  16. package/dist/seasons/fifawc26/index.d.ts.map +1 -0
  17. package/dist/seasons/season24/index.d.ts +3 -0
  18. package/dist/seasons/season24/index.d.ts.map +1 -0
  19. package/dist/seasons/season25/index.d.ts +3 -0
  20. package/dist/seasons/season25/index.d.ts.map +1 -0
  21. package/dist/seasons/season26/index.d.ts +3 -0
  22. package/dist/seasons/season26/index.d.ts.map +1 -0
  23. package/dist/seasons/season27/index.d.ts +3 -0
  24. package/dist/seasons/season27/index.d.ts.map +1 -0
  25. package/dist/seasons/wc26.js +4 -0
  26. package/dist/ui.css +2 -0
  27. package/dist/utils/cdn.d.ts +4 -0
  28. package/dist/utils/cdn.d.ts.map +1 -0
  29. package/dist/utils/shape-data.d.ts +4 -0
  30. package/dist/utils/shape-data.d.ts.map +1 -0
  31. package/dist/utils/svg-parse.d.ts +12 -0
  32. package/dist/utils/svg-parse.d.ts.map +1 -0
  33. package/package.json +33 -6
  34. package/src/assets/brand/icon.svg +12 -0
  35. package/src/assets/components.css +66 -0
  36. package/src/components/AccessWrapper.vue +54 -0
  37. package/src/components/SVGShape.vue +282 -0
  38. package/src/components/ScrollableArea.vue +85 -0
  39. package/src/index.ts +9 -1
  40. package/src/seasons/fifawc26/icon.svg +4 -0
  41. package/src/seasons/fifawc26/index.ts +2 -0
  42. package/src/seasons/fifawc26/logo.svg +10 -0
  43. package/src/seasons/fifawc26/style.css +26 -0
  44. package/src/seasons/season24/icon.svg +4 -0
  45. package/src/seasons/season24/index.ts +2 -0
  46. package/src/seasons/season24/logo.svg +10 -0
  47. package/src/seasons/season24/style.css +26 -0
  48. package/src/seasons/season25/icon.svg +4 -0
  49. package/src/seasons/season25/index.ts +2 -0
  50. package/src/seasons/season25/logo.svg +10 -0
  51. package/src/seasons/season25/style.css +26 -0
  52. package/src/seasons/season26/icon.svg +4 -0
  53. package/src/seasons/season26/index.ts +2 -0
  54. package/src/seasons/season26/logo.svg +10 -0
  55. package/src/seasons/season26/style.css +26 -0
  56. package/src/seasons/season27/icon.svg +4 -0
  57. package/src/seasons/season27/index.ts +2 -0
  58. package/src/seasons/season27/logo.svg +10 -0
  59. package/src/seasons/season27/style.css +26 -0
  60. package/src/svg.d.ts +4 -0
  61. package/src/utils/cdn.ts +14 -0
  62. package/src/utils/shape-data.ts +18 -0
  63. package/src/utils/svg-parse.ts +31 -0
  64. package/dist/components/PinkBox.vue.d.ts +0 -7
  65. package/dist/components/PinkBox.vue.d.ts.map +0 -1
  66. package/src/components/PinkBox.vue +0 -11
@@ -0,0 +1,4 @@
1
+ <svg width="703" height="400" viewBox="0 0 703 400" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M187.975 0C220.033 0 246.626 5.46442 267.755 16.3933C289.248 27.3222 305.278 42.0768 315.842 60.656C326.771 79.235 332.235 99.8177 332.235 122.404C332.235 149.362 326.953 171.949 316.388 190.164C306.188 208.379 290.705 223.679 269.941 236.065C249.54 248.451 223.676 259.381 192.347 268.853L170.489 275.41C152.639 280.874 138.613 289.071 128.413 300L122.265 308.196H301.635L284.149 400H2.18575C1.45716 395.264 0 381.42 0 378.142C5.16966e-06 332.24 11.4755 293.807 34.426 262.842C57.3764 231.512 94.7163 208.014 146.446 192.349L168.303 185.792C186.882 180.328 200.179 173.77 208.194 166.12C216.572 158.469 220.761 147.54 220.761 133.333C220.761 121.311 215.661 111.475 205.461 103.825C195.261 95.8104 179.232 91.8029 157.375 91.8029C140.981 91.8029 125.134 93.9892 109.834 98.3608C94.8982 102.732 83.0584 107.104 74.3153 111.476H67.7581L86.3369 17.4861C100.909 12.0216 116.21 7.83258 132.239 4.91819C148.632 1.63956 167.211 0 187.975 0Z" fill="#7174FF" fill-opacity="0.31"/>
3
+ <path d="M701.907 13.1148C701.911 13.142 703 21.2596 703 26.7756C703 36.6116 700.814 47.1771 696.443 58.4704C692.436 69.7635 686.243 82.332 677.864 96.1751L498.632 400H378.415V393.442L575.089 100.546H404.645L422.131 6.55692H695.35L701.907 13.1148Z" fill="#7174FF" fill-opacity="0.31"/>
4
+ </svg>
@@ -0,0 +1,2 @@
1
+ export { default as logoRaw } from './logo.svg?raw'
2
+ export { default as iconRaw } from './icon.svg?raw'
@@ -0,0 +1,10 @@
1
+ <svg width="3000" height="400" viewBox="0 0 3000 400" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M18.2784 279.57H24.7296C37.632 288.172 54.4769 295.341 75.2641 301.075C96.4097 306.81 120.423 309.677 147.303 309.677C159.488 309.677 170.061 308.961 179.021 307.527C187.981 305.735 194.97 303.047 199.987 299.462C205.005 295.52 207.514 290.323 207.514 283.871C207.514 276.344 204.647 271.147 198.912 268.28C193.178 265.412 183.143 262.724 168.807 260.215L145.152 255.914C120.781 251.254 99.6353 244.265 81.7153 234.946C64.1537 225.269 50.5345 213.082 40.8577 198.387C31.5392 183.692 26.88 166.308 26.88 146.237C26.88 117.563 33.8688 92.2939 47.8465 70.4301C62.1825 48.2079 84.4033 31.0036 114.509 18.8172C144.973 6.27241 184.576 0 233.319 0C246.938 0 261.274 0.716847 276.327 2.15054C291.38 3.58424 305.357 5.73478 318.26 8.60217C331.162 11.1111 341.197 13.9785 348.365 17.2043L330.087 111.828H323.636C312.884 106.452 298.548 101.613 280.628 97.3119C262.708 92.6523 241.92 90.3226 218.266 90.3226C201.779 90.3226 187.802 91.9355 176.333 95.1613C164.864 98.3871 156.083 103.226 149.991 109.677C143.898 116.129 140.851 124.014 140.851 133.333C140.851 143.011 144.256 150.358 151.066 155.376C158.234 160.394 170.599 164.516 188.16 167.742L211.815 172.043C230.81 175.269 248.551 180.645 265.037 188.172C281.882 195.341 295.501 205.735 305.895 219.355C316.288 232.975 321.485 250.896 321.485 273.118C321.485 296.774 316.468 316.846 306.432 333.333C296.756 349.462 283.136 362.366 265.575 372.043C248.372 381.72 228.48 388.889 205.901 393.548C183.68 397.849 159.847 400 134.4 400C109.671 400 85.2993 397.67 61.2865 393.011C37.2737 387.993 16.8448 381.72 0 374.194L18.2784 279.57Z" fill="#ACFF71" fill-opacity="0.31"/>
3
+ <path d="M1105.14 279.57H1111.59C1124.49 288.172 1141.34 295.341 1162.13 301.075C1183.27 306.81 1207.28 309.677 1234.16 309.677C1246.35 309.677 1256.92 308.961 1265.88 307.527C1274.84 305.735 1281.83 303.047 1286.85 299.462C1291.87 295.52 1294.38 290.323 1294.38 283.871C1294.38 276.344 1291.51 271.147 1285.77 268.28C1280.04 265.412 1270 262.724 1255.67 260.215L1232.01 255.914C1207.64 251.254 1186.5 244.265 1168.58 234.946C1151.02 225.269 1137.4 213.082 1127.72 198.387C1118.4 183.692 1113.74 166.308 1113.74 146.237C1113.74 117.563 1120.73 92.2939 1134.71 70.4301C1149.04 48.2079 1171.26 31.0036 1201.37 18.8172C1231.83 6.27241 1271.44 0 1320.18 0C1333.8 0 1348.14 0.716847 1363.19 2.15054C1378.24 3.58424 1392.22 5.73478 1405.12 8.60217C1418.02 11.1111 1428.06 13.9785 1435.23 17.2043L1416.95 111.828H1410.5C1399.75 106.452 1385.41 101.613 1367.49 97.3119C1349.57 92.6523 1328.78 90.3226 1305.13 90.3226C1288.64 90.3226 1274.66 91.9355 1263.19 95.1613C1251.73 98.3871 1242.94 103.226 1236.85 109.677C1230.76 116.129 1227.71 124.014 1227.71 133.333C1227.71 143.011 1231.12 150.358 1237.93 155.376C1245.1 160.394 1257.46 164.516 1275.02 167.742L1298.68 172.043C1317.67 175.269 1335.41 180.645 1351.9 188.172C1368.74 195.341 1382.36 205.735 1392.76 219.355C1403.15 232.975 1408.35 250.896 1408.35 273.118C1408.35 296.774 1403.33 316.846 1393.29 333.333C1383.62 349.462 1370 362.366 1352.44 372.043C1335.23 381.72 1315.34 388.889 1292.76 393.548C1270.54 397.849 1246.71 400 1221.26 400C1196.53 400 1172.16 397.67 1148.15 393.011C1124.14 387.993 1103.71 381.72 1086.86 374.194L1105.14 279.57Z" fill="#ACFF71" fill-opacity="0.31"/>
4
+ <path d="M1460.2 230.108C1460.2 199.283 1465.4 170.072 1475.79 142.473C1486.54 114.875 1501.96 90.5018 1522.03 69.3548C1542.45 47.8495 1567 31.0036 1595.68 18.8172C1624.35 6.27241 1656.61 0 1692.45 0C1731.15 0 1764.3 6.98925 1791.9 20.9678C1819.5 34.9462 1840.64 54.6595 1855.34 80.1075C1870.03 105.556 1877.38 135.484 1877.38 169.892C1877.38 195.341 1873.97 219.534 1867.17 242.473C1860.36 265.412 1850.32 286.559 1837.06 305.914C1824.16 324.91 1808.21 341.577 1789.21 355.914C1770.22 369.892 1748.53 380.824 1724.16 388.71C1700.15 396.237 1673.81 400 1645.14 400C1606.43 400 1573.28 393.369 1545.68 380.108C1518.08 366.487 1496.94 347.133 1482.24 322.043C1467.55 296.595 1460.2 265.95 1460.2 230.108ZM1576.32 223.656C1576.32 251.613 1583.13 272.222 1596.75 285.484C1610.73 298.746 1629.01 305.376 1651.59 305.376C1670.58 305.376 1686.89 301.254 1700.51 293.011C1714.13 284.409 1725.42 273.477 1734.38 260.215C1743.7 246.953 1750.51 232.975 1754.81 218.28C1759.11 203.226 1761.26 189.247 1761.26 176.344C1761.26 148.387 1754.27 127.778 1740.29 114.516C1726.67 101.254 1708.57 94.6236 1685.99 94.6236C1667.36 94.6236 1651.05 98.9247 1637.07 107.527C1623.45 115.771 1611.98 126.523 1602.67 139.785C1593.71 153.047 1587.08 167.204 1582.77 182.258C1578.47 196.953 1576.32 210.753 1576.32 223.656Z" fill="#ACFF71" fill-opacity="0.31"/>
5
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M667.733 393.548L758.05 141.935C769.16 111.111 782.421 86.3799 797.832 67.742C813.602 49.104 830.984 35.1255 849.979 25.8065C869.333 16.129 890.12 9.85664 912.341 6.98925C934.562 3.76345 957.679 2.15054 981.692 2.15054C1002.12 2.15054 1020.94 3.58424 1038.14 6.45163C1055.7 9.31902 1071.83 12.9032 1086.52 17.2043L1090.82 23.6559C1086.52 33.3334 1082.4 45.3405 1078.46 59.6774C1074.88 73.6559 1072.01 86.0215 1069.86 96.7742L1011.8 393.548H897.826L915.658 303.408H816.158L783.855 393.548H667.733ZM957.658 98.408C957.658 98.408 951.586 119.713 949.436 131.183L933.359 212.908H848.253L872.021 146.237C876.322 134.767 881.34 125.448 887.074 118.28C892.808 111.111 900.156 105.735 909.116 102.151C918.076 98.5663 929.365 96.7742 942.984 96.7742C945.852 96.7742 957.658 98.408 957.658 98.408Z" fill="#ACFF71" fill-opacity="0.31"/>
6
+ <path d="M2207.09 6.45163H2321.07L2247.95 393.548H2133.98L2152.16 299.908L2051.31 169.892L2009.26 393.548H1895.29L1968.4 6.45163H2058.72L2178.66 160.908L2207.09 6.45163Z" fill="#ACFF71" fill-opacity="0.31"/>
7
+ <path d="M2310.52 393.548C2309.8 388.889 2308.37 375.269 2308.37 372.043C2308.37 326.882 2319.66 289.068 2342.24 258.602C2364.82 227.778 2401.55 204.66 2452.45 189.247L2473.95 182.796C2492.23 177.419 2505.31 170.968 2513.2 163.441C2521.44 155.914 2525.56 145.161 2525.56 131.183C2525.56 119.355 2520.54 109.677 2510.51 102.151C2500.47 94.2652 2484.7 90.3226 2463.2 90.3226C2447.07 90.3226 2431.48 92.4731 2416.43 96.7742C2401.73 101.075 2390.09 105.376 2381.48 109.677H2375.03L2393.31 17.2043C2407.65 11.828 2422.7 7.7061 2438.47 4.83871C2454.6 1.6129 2472.88 0 2493.31 0C2524.84 0 2551.01 5.37635 2571.8 16.129C2592.94 26.8817 2608.71 41.3979 2619.1 59.6774C2629.86 77.957 2635.23 98.2079 2635.23 120.43C2635.23 146.953 2630.04 169.176 2619.64 187.097C2609.61 205.018 2594.37 220.072 2573.95 232.258C2553.88 244.444 2528.43 255.197 2497.61 264.516L2476.1 270.968C2458.54 276.344 2444.74 284.409 2434.71 295.161L2428.66 303.226H2605.13L2587.92 393.548H2310.52Z" fill="#ACFF71" fill-opacity="0.31"/>
8
+ <path d="M2680.67 393.548V387.097L2874.16 98.9247H2706.47L2723.67 6.45163H2992.47L2998.92 12.9033C2998.92 12.9033 3000 20.908 3000 26.3441C3000 36.0215 2997.85 46.4158 2993.55 57.5269C2989.61 68.638 2983.51 81.0036 2975.27 94.6236L2798.94 393.548H2680.67Z" fill="#ACFF71" fill-opacity="0.31"/>
9
+ <path d="M351.987 393.548L427.251 6.45163H687.45L669.172 105.376H521.989L512.158 156.908L631.54 156.989L614.336 249.462L494.158 249.408L485.193 294.624H634.765L616.487 393.548H351.987Z" fill="#ACFF71" fill-opacity="0.31"/>
10
+ </svg>
@@ -0,0 +1,26 @@
1
+ :root[data-season='27'] {
2
+ --font-heading: 'Kufam', sans-serif;
3
+ --color-season: #f5f0e0;
4
+ --color-season-text: #422006;
5
+ --color-accent: #ca8a04;
6
+ --color-accent-hover: #a16207;
7
+ --color-contrast: #ffffff;
8
+ --color-surface: #fefce8;
9
+ --color-surface-alt: #fef9c3;
10
+ --color-border: #e2d6a4;
11
+ --color-border-strong: #c5b078;
12
+ --logo-stroke-color: var(--color-season);
13
+ }
14
+
15
+ :root[data-season='27'][data-theme='dark'] {
16
+ --color-season: #0f0f0f;
17
+ --color-season-text: #fde047;
18
+ --color-accent: #facc15;
19
+ --color-accent-hover: #eab308;
20
+ --color-contrast: #ffffff;
21
+ --color-surface: #1c1917;
22
+ --color-surface-alt: #292524;
23
+ --color-border: #44403c;
24
+ --color-border-strong: #57534e;
25
+ --logo-stroke-color: var(--color-season);
26
+ }
package/src/svg.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ declare module '*.svg?raw' {
2
+ const content: string
3
+ export default content
4
+ }
@@ -0,0 +1,14 @@
1
+ export const CDN_BASE = 'https://cdn.tand.ing/seasons'
2
+
3
+ export const seasonSlugMap: Record<string, string> = {
4
+ '24': 'season/24',
5
+ '25': 'season/25',
6
+ '26': 'season/26',
7
+ wc26: 'worldcup26',
8
+ '27': 'season/27',
9
+ }
10
+
11
+ export const seasonAssetUrl = (bpShortName: string, file: string) => {
12
+ const slug = seasonSlugMap[bpShortName]
13
+ return slug ? `${CDN_BASE}/${slug}/${file}` : ''
14
+ }
@@ -0,0 +1,18 @@
1
+ import type { LogoData } from './svg-parse'
2
+
3
+ export type ShapeData = LogoData
4
+
5
+ export const shapes: Record<string, ShapeData> = {
6
+ squircle: {
7
+ width: 100,
8
+ height: 100,
9
+ viewBox: '0 0 100 100',
10
+ paths: [{ d: 'M50,0 C10,0 0,10 0,50 0,90 10,100 50,100 90,100 100,90 100,50 100,10 90,0 50,0 Z', fill: '#ffffff' }],
11
+ },
12
+ circle: {
13
+ width: 100,
14
+ height: 100,
15
+ viewBox: '0 0 100 100',
16
+ paths: [{ d: 'M100,50 C100,77.6 77.6,100 50,100 C22.4,100 0,77.6 0,50 C0,22.4 22.4,0 50,0 C77.6,0 100,22.4 100,50 Z', fill: '#ffffff' }],
17
+ },
18
+ }
@@ -0,0 +1,31 @@
1
+ export interface LogoPath {
2
+ d: string
3
+ fill: string
4
+ }
5
+
6
+ export interface LogoData {
7
+ width: number
8
+ height: number
9
+ paths: LogoPath[]
10
+ viewBox: string
11
+ }
12
+
13
+ export function parseLogoSvg(rawSvg: string): LogoData {
14
+ const parser = new DOMParser()
15
+ const doc = parser.parseFromString(rawSvg, 'image/svg+xml')
16
+ const svg = doc.querySelector('svg')
17
+ if (!svg) return { viewBox: '0 0 3000 400', width: 3000, height: 400, paths: [] }
18
+
19
+ const viewBox = svg.getAttribute('viewBox') || `0 0 ${svg.getAttribute('width') || 3000} ${svg.getAttribute('height') || 400}`
20
+ const parts = viewBox.split(/\s+/).map((n) => Number(n))
21
+ const w = parts[2] ?? 0
22
+ const h = parts[3] ?? 0
23
+ const width = Number.isFinite(w) && w > 0 ? w : 3000
24
+ const height = Number.isFinite(h) && h > 0 ? h : 400
25
+
26
+ const paths = [...svg.querySelectorAll('path')]
27
+ .map((node) => ({ d: node.getAttribute('d') || '', fill: node.getAttribute('fill') || '#ffffff' }))
28
+ .filter((p) => Boolean(p.d))
29
+
30
+ return { viewBox, width, height, paths }
31
+ }
@@ -1,7 +0,0 @@
1
- type __VLS_Props = {
2
- label?: string;
3
- };
4
- declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
5
- declare const _default: typeof __VLS_export;
6
- export default _default;
7
- //# sourceMappingURL=PinkBox.vue.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"PinkBox.vue.d.ts","sourceRoot":"","sources":["../../src/components/PinkBox.vue"],"names":[],"mappings":"AAcA,KAAK,WAAW,GAAG;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAC;AA6BF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
@@ -1,11 +0,0 @@
1
- <script setup lang="ts">
2
- defineProps<{
3
- label?: string
4
- }>()
5
- </script>
6
-
7
- <template>
8
- <div class="bg-pink-500 text-white rounded-lg p-4 font-medium">
9
- {{ label ?? 'PinkBox' }}
10
- </div>
11
- </template>