@v-miniapp/ui-react 1.0.40 → 1.0.45
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.
- package/README.md +1 -1
- package/dist/components/icon/icon-mapping.d.ts +4 -0
- package/dist/components/navigation-bar/navigation-bar.d.ts +3 -1
- package/dist/external/index.js +2009 -2012
- package/dist/external/styles.css +1 -1
- package/dist/index.js +1029 -1032
- package/dist/styles.css +1 -1
- package/dist-storybook/assets/ANIMATION-CUdn1GTK.js +99 -0
- package/dist-storybook/assets/APP_FRAMEWORK-ljbIOHYd.js +197 -0
- package/dist-storybook/assets/BOTTOM_TAB_BAR-DxCwCfBK.js +175 -0
- package/dist-storybook/assets/CUSTOM_ERROR_BOUNDARY-B4wTQNZc.js +250 -0
- package/dist-storybook/assets/Color-AVL7NMMY-1_8XTICv.js +1 -0
- package/dist-storybook/assets/DARK_MODE-CoHseCDO.js +57 -0
- package/dist-storybook/assets/DocsRenderer-PQXLIZUC-BO86igwd.js +2 -0
- package/dist-storybook/assets/GETTING_STARTED-H_vVi5cv.js +77 -0
- package/dist-storybook/assets/INFINITE_SCROLL-BtM3uoX0.js +111 -0
- package/dist-storybook/assets/KEEP_ALIVE-CL2au0al.js +126 -0
- package/dist-storybook/assets/LOCALE-XTCey55y.js +465 -0
- package/dist-storybook/assets/MIGRATION_GUIDE-2LONslE4.js +449 -0
- package/dist-storybook/assets/MOBILE_BEHAVIOURS-DZ6alKTX.js +177 -0
- package/dist-storybook/assets/PAGE_LAYOUT-BuOpN-1Y.js +192 -0
- package/dist-storybook/assets/ROUTING_NAVIGATION-BCPHXNto.js +335 -0
- package/dist-storybook/assets/TAILWIND_INTEGRATION-_T-VfvkM.js +87 -0
- package/dist-storybook/assets/_setToString-CbM921C9.js +1 -0
- package/dist-storybook/assets/alert-DLW8CoyB.js +1 -0
- package/dist-storybook/assets/alert.stories-B-vuojPh.js +110 -0
- package/dist-storybook/assets/avatar-GxcYPA1p.js +1 -0
- package/dist-storybook/assets/avatar.stories-KYFztAc8.js +136 -0
- package/dist-storybook/assets/axe-CmvD4WV5.js +20 -0
- package/dist-storybook/assets/badge-D_LzMVtw.js +1 -0
- package/dist-storybook/assets/badge.stories-Be2ItCmQ.js +262 -0
- package/dist-storybook/assets/blocks-BuaOUtiH.js +1243 -0
- package/dist-storybook/assets/bottom-tab-bar-CtcTAxuI.js +115 -0
- package/dist-storybook/assets/bottom-tab-bar.stories-CDmEve6z.js +186 -0
- package/dist-storybook/assets/button-CL7GeC23.js +1 -0
- package/dist-storybook/assets/button.stories-CaqLWQiY.js +287 -0
- package/dist-storybook/assets/calendar-dOCsjhVU.js +1 -0
- package/dist-storybook/assets/calendar.stories-DLWZldet.js +189 -0
- package/dist-storybook/assets/carousel-1Kww3hIz.js +37 -0
- package/dist-storybook/assets/carousel.stories-B8YbGOOr.js +217 -0
- package/dist-storybook/assets/checkbox-MGytNNRt.js +1 -0
- package/dist-storybook/assets/checkbox.stories-CLvfZPiw.js +201 -0
- package/dist-storybook/assets/chip-kG4p82WT.js +247 -0
- package/dist-storybook/assets/chip.stories-BbwJb5eD.js +442 -0
- package/dist-storybook/assets/classname-CUR_zgkh.js +1 -0
- package/dist-storybook/assets/colors-_6nFGM3e.js +1 -0
- package/dist-storybook/assets/date-Cg-Uk_pp.js +1 -0
- package/dist-storybook/assets/date-field.stories-Diptwqfv.js +129 -0
- package/dist-storybook/assets/date-picker-Dnq_-0Md.js +1 -0
- package/dist-storybook/assets/date-picker.stories-BuGWvzFL.js +123 -0
- package/dist-storybook/assets/default-error-BcnD8fFO.png +0 -0
- package/dist-storybook/assets/dialog.stories-DJ0WsSkA.js +212 -0
- package/dist-storybook/assets/dropdown.stories-D6JUYP73.js +200 -0
- package/dist-storybook/assets/embla-carousel-react.esm-BYjpaHZ9.js +1 -0
- package/dist-storybook/assets/en-Cs9O0XWn.js +15 -0
- package/dist-storybook/assets/icon-DdQsMyRa.js +1 -0
- package/dist-storybook/assets/icon.stories-B-ZvRzFf.js +365 -0
- package/dist-storybook/assets/iframe-CQAwSt4E.js +1071 -0
- package/dist-storybook/assets/iframe-yMKl6hJA.css +1 -0
- package/dist-storybook/assets/image-C3EsNRhz.js +9 -0
- package/dist-storybook/assets/image.stories-C4l8D3ju.js +255 -0
- package/dist-storybook/assets/index-B-Ksafg0.js +1 -0
- package/dist-storybook/assets/index-BV0AJWP6.js +1 -0
- package/dist-storybook/assets/index-CgMRTj-o.js +1 -0
- package/dist-storybook/assets/index-DHiZ-gXR.js +1 -0
- package/dist-storybook/assets/input-wrapper-BKHgnPy6.js +1 -0
- package/dist-storybook/assets/label-DV2iCDmN.js +27 -0
- package/dist-storybook/assets/label.stories-BwTIPFXX.js +138 -0
- package/dist-storybook/assets/matchers-7Z3WT2CE-Dw4MQV_s.js +14 -0
- package/dist-storybook/assets/navigation-bar-vI-FPasP.js +79 -0
- package/dist-storybook/assets/navigation-bar.stories-DYuFaJFD.js +73 -0
- package/dist-storybook/assets/number-field-CXKmnfKe.js +1 -0
- package/dist-storybook/assets/number-field.stories--fn26TJu.js +167 -0
- package/dist-storybook/assets/omit-Bsx5nTI0.js +1 -0
- package/dist-storybook/assets/option-item-LRh_OyV4.js +1 -0
- package/dist-storybook/assets/option-item.stories-snjAvgay.js +66 -0
- package/dist-storybook/assets/pagination-DZHoBs_4.js +1 -0
- package/dist-storybook/assets/pagination.stories-BoEs0jzS.js +91 -0
- package/dist-storybook/assets/pick-BhmhLmLe.js +1 -0
- package/dist-storybook/assets/preload-helper-PPVm8Dsz.js +1 -0
- package/dist-storybook/assets/radio-B5NJxG_l.js +1 -0
- package/dist-storybook/assets/radio.stories-DuN-Awi_.js +183 -0
- package/dist-storybook/assets/rating-BdXViYBv.js +1 -0
- package/dist-storybook/assets/rating.stories-BCcQjMEx.js +117 -0
- package/dist-storybook/assets/react-18-CNyWQ7je.js +9 -0
- package/dist-storybook/assets/react-hufnxGVs.js +1 -0
- package/dist-storybook/assets/search-field-CQqgFbfg.js +1 -0
- package/dist-storybook/assets/search-field.stories-DiCZbhng.js +79 -0
- package/dist-storybook/assets/section-content-DGNB4eLN.js +1 -0
- package/dist-storybook/assets/section.stories-C2I_kKhu.js +69 -0
- package/dist-storybook/assets/sheet.stories-wk1JaKU5.js +152 -0
- package/dist-storybook/assets/skeleton-C91JgehG.js +1 -0
- package/dist-storybook/assets/skeleton.stories-BCmX-VNr.js +139 -0
- package/dist-storybook/assets/store-CPumdfcU.js +1 -0
- package/dist-storybook/assets/store-D2RudmNr.js +18 -0
- package/dist-storybook/assets/switch-p-aXI-ev.js +1 -0
- package/dist-storybook/assets/switch.stories-BqPLNKB9.js +250 -0
- package/dist-storybook/assets/tab-bar-CSeCmtIZ.js +31 -0
- package/dist-storybook/assets/tab-bar.stories-Cb6v8H2w.js +136 -0
- package/dist-storybook/assets/text-area-DwSXyqOe.js +1 -0
- package/dist-storybook/assets/text-area.stories-By8bCfgc.js +87 -0
- package/dist-storybook/assets/text-field-jK6rpOo2.js +1 -0
- package/dist-storybook/assets/text-field.stories-CrWBAhvI.js +92 -0
- package/dist-storybook/assets/toast-provider-DurnMJhd.js +9 -0
- package/dist-storybook/assets/toast.stories-iWAToAZA.js +201 -0
- package/dist-storybook/assets/tooltip-QDdel5My.js +1 -0
- package/dist-storybook/assets/tooltip.stories-RC6SuPPD.js +153 -0
- package/dist-storybook/assets/typography-DEpAJl_i.js +1 -0
- package/dist-storybook/assets/typography.stories-Bu8qFugR.js +202 -0
- package/dist-storybook/assets/uploader.stories-B2wW9qVy.js +65 -0
- package/dist-storybook/assets/use-app-pause-B_tWHKJK.js +29 -0
- package/dist-storybook/assets/use-app-resume--900G-dV.js +29 -0
- package/dist-storybook/assets/use-custom-icon-event-3VExRzvC.js +29 -0
- package/dist-storybook/assets/use-did-hide-BUsL73ab.js +48 -0
- package/dist-storybook/assets/use-did-show-C1-VLDxi.js +49 -0
- package/dist-storybook/assets/use-histories-E4E2jJEY.js +50 -0
- package/dist-storybook/assets/use-history-o1im8IDj.js +67 -0
- package/dist-storybook/assets/use-location-CUEaBO4P.js +56 -0
- package/dist-storybook/assets/use-navigate-C4CTuFSZ.js +84 -0
- package/dist-storybook/assets/use-navigation-type-Dcz4hgKo.js +44 -0
- package/dist-storybook/assets/use-page-config-DSJBVQbq.js +48 -0
- package/dist-storybook/assets/use-page-scroll-dY-U1Vv4.js +69 -0
- package/dist-storybook/assets/use-page-state-CtNpwGPN.js +79 -0
- package/dist-storybook/assets/use-settings-changed-BBJwIHTE.js +29 -0
- package/dist-storybook/assets/v-mini-icon-Dn1BmJzb.woff2 +0 -0
- package/dist-storybook/assets/visibility-sensor-CwrzJO06.js +1 -0
- package/dist-storybook/iframe.html +670 -0
- package/dist-storybook/index.html +132 -0
- package/dist-storybook/index.json +1 -0
- package/dist-storybook/project.json +1 -0
- package/dist-storybook/sb-addons/a11y-2/manager-bundle.js +5 -0
- package/dist-storybook/sb-addons/docs-1/manager-bundle.js +151 -0
- package/dist-storybook/sb-addons/storybook-build-3/manager-bundle.js +3 -0
- package/dist-storybook/sb-addons/storybook-core-server-presets-0/common-manager-bundle.js +971 -0
- package/dist-storybook/sb-manager/globals-module-info.js +799 -0
- package/dist-storybook/sb-manager/globals-runtime.js +69791 -0
- package/dist-storybook/sb-manager/globals.js +34 -0
- package/dist-storybook/sb-manager/runtime.js +13198 -0
- package/dist-storybook/stories-data.json +374 -0
- package/dist-storybook/vite-inject-mocker-entry.js +2 -0
- package/package.json +1 -1
|
@@ -0,0 +1,183 @@
|
|
|
1
|
+
import{j as o,r as h}from"./iframe-CQAwSt4E.js";import{T as g,S as b,M as y,P as k,a as v}from"./blocks-BuaOUtiH.js";import{t as e}from"./store-D2RudmNr.js";import{R as t}from"./radio-B5NJxG_l.js";import"./preload-helper-PPVm8Dsz.js";import"./index-DHiZ-gXR.js";import"./classname-CUR_zgkh.js";import"./index-BV0AJWP6.js";import"./index-B-Ksafg0.js";import"./typography-DEpAJl_i.js";import"./colors-_6nFGM3e.js";const f=()=>{const a=`
|
|
2
|
+
## ${e("common.table.title")}
|
|
3
|
+
|
|
4
|
+
| ${e("common.table.name")} | ${e("common.table.type")} | ${e("common.table.required")} | ${e("common.table.description")} |
|
|
5
|
+
| :--- | :--- | :--- | :--- |
|
|
6
|
+
| \`checked\` | \`boolean\` | ${e("common.table.no")} | ${e("components.radio.checkedDescription")} |
|
|
7
|
+
| \`onChange\` | \`(checked: boolean) => void\` | ${e("common.table.no")} | ${e("components.radio.onChangeDescription")} |
|
|
8
|
+
| \`disabled\` | \`boolean\` | ${e("common.table.no")} | ${e("components.radio.disabledDescription")} |
|
|
9
|
+
| \`theme\` | \`'default' | 'brand' | 'neutral'\` | ${e("common.table.no")} | ${e("components.radio.themeDescription")} |
|
|
10
|
+
| \`type\` | \`'checkbox' | 'radio'\` | ${e("common.table.no")} | ${e("components.radio.typeDescription")} |
|
|
11
|
+
| \`name\` | \`string\` | ${e("common.table.no")} | ${e("components.radio.nameDescription")} |
|
|
12
|
+
| \`value\` | \`string\` | ${e("common.table.no")} | ${e("components.radio.valueDescription")} |
|
|
13
|
+
| \`children\` | \`ReactNode\` | ${e("common.table.no")} | ${e("components.radio.childrenDescription")} |
|
|
14
|
+
| \`className\` | \`string\` | ${e("common.table.no")} | ${e("components.radio.classNameDescription")} |
|
|
15
|
+
| \`...props\` | \`ComponentProps<'input'>\` | ${e("common.table.no")} | ${e("components.radio.propsDescription")} |
|
|
16
|
+
`;return o.jsxs(o.Fragment,{children:[o.jsx(g,{}),o.jsx(b,{}),o.jsx(y,{children:e("components.radio.description")}),o.jsx(k,{}),o.jsx(y,{children:a}),o.jsx(v,{})]})},z={title:"Components/Radio",component:t,parameters:{layout:"padded",docs:{page:f}},tags:["autodocs"],argTypes:{checked:{control:"boolean",description:e("components.radio.argTypes.checkedDescription"),table:{type:{summary:"boolean"}}},onChange:{action:"changed",description:e("components.radio.argTypes.onChangeDescription"),table:{type:{summary:"(checked: boolean) => void"}}},disabled:{control:"boolean",description:e("components.radio.argTypes.disabledDescription"),table:{type:{summary:"boolean"}}},theme:{control:"select",options:["default","brand","neutral"],description:e("components.radio.argTypes.themeDescription"),table:{type:{summary:"IRadioTheme"},defaultValue:{summary:"default"}}},type:{control:"select",options:["checkbox","radio"],description:e("components.radio.argTypes.typeDescription"),table:{type:{summary:'"checkbox" | "radio"'},defaultValue:{summary:"radio"}}},name:{control:"text",description:e("components.radio.argTypes.nameDescription"),table:{type:{summary:"string"}}},value:{control:"text",description:e("components.radio.argTypes.valueDescription"),table:{type:{summary:"string"}}},children:{control:"text",description:e("components.radio.argTypes.childrenDescription"),table:{type:{summary:"ReactNode"}}},className:{control:"text",description:e("components.radio.argTypes.classNameDescription"),table:{type:{summary:"string"}}}}},r={storyName:e("components.radio.stories.default.storyName"),args:{name:"option",value:"option1",children:e("components.radio.stories.default.text")}},n={storyName:e("components.radio.stories.states.storyName"),render:()=>o.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"16px"},children:[o.jsx(t,{name:"states",value:"unchecked",checked:!1,children:e("components.radio.states.unchecked")}),o.jsx(t,{name:"states",value:"checked",checked:!0,children:e("components.radio.states.checked")}),o.jsx(t,{name:"states",value:"disabled-checked",checked:!0,disabled:!0,children:e("components.radio.states.disabledChecked")}),o.jsx(t,{name:"states",value:"disabled-unchecked",checked:!1,disabled:!0,children:e("components.radio.states.disabledUnchecked")})]})},i={storyName:e("components.radio.stories.radioGroup.storyName"),render:()=>{const[a,s]=h.useState("option1");return o.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"12px"},children:[o.jsx(t,{name:"group",value:"option1",checked:a==="option1",onChange:()=>s("option1"),children:e("components.radio.stories.radioGroup.option1")}),o.jsx(t,{name:"group",value:"option2",checked:a==="option2",onChange:()=>s("option2"),children:e("components.radio.stories.radioGroup.option2")}),o.jsx(t,{name:"group",value:"option3",checked:a==="option3",onChange:()=>s("option3"),children:e("components.radio.stories.radioGroup.option3")}),o.jsxs("p",{style:{fontSize:"14px",color:"#666",marginTop:"8px"},children:[e("components.radio.stories.radioGroup.selected"),": ",a]})]})}},c={storyName:e("components.radio.stories.themes.storyName"),render:()=>o.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"16px"},children:[o.jsx(t,{name:"themes",value:"brand",checked:!0,theme:"brand",children:e("components.radio.stories.themes.brand")}),o.jsx(t,{name:"themes",value:"neutral",checked:!0,theme:"neutral",children:e("components.radio.stories.themes.neutral")})]})},d={storyName:e("components.radio.stories.checkboxType.storyName"),render:()=>{const[a,s]=h.useState(!1),[u,x]=h.useState(!0);return o.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"16px"},children:[o.jsx(t,{type:"checkbox",checked:a,onChange:s,children:e("components.radio.stories.checkboxType.unchecked")}),o.jsx(t,{type:"checkbox",checked:u,onChange:x,children:e("components.radio.stories.checkboxType.checked")})]})}},p={storyName:e("components.radio.stories.typography.storyName"),render:()=>o.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"16px"},children:[o.jsx(t,{name:"typography",value:"default",checked:!0,typography:{size:"base",weight:"regular"},children:e("components.radio.stories.typography.default")}),o.jsx(t,{name:"typography",value:"large",checked:!0,typography:{size:"large",weight:"bold"},children:e("components.radio.stories.typography.large")}),o.jsx(t,{name:"typography",value:"small",checked:!0,typography:{size:"small",weight:"medium"},children:e("components.radio.stories.typography.small")})]})},m={storyName:e("components.radio.stories.completeExample.storyName"),render:()=>{const[a,s]=h.useState("credit");return o.jsx("div",{style:{display:"flex",flexDirection:"column",gap:"24px"},children:o.jsxs("div",{children:[o.jsx("h3",{style:{marginBottom:"12px"},children:e("components.radio.stories.completeExample.title")}),o.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"12px"},children:[o.jsx(t,{name:"payment",value:"credit",checked:a==="credit",onChange:()=>s("credit"),children:e("components.radio.stories.completeExample.creditCard")}),o.jsx(t,{name:"payment",value:"debit",checked:a==="debit",onChange:()=>s("debit"),children:e("components.radio.stories.completeExample.debitCard")}),o.jsx(t,{name:"payment",value:"paypal",checked:a==="paypal",onChange:()=>s("paypal"),children:e("components.radio.stories.completeExample.paypal")}),o.jsx(t,{name:"payment",value:"disabled",checked:a==="disabled",onChange:()=>s("disabled"),disabled:!0,children:e("components.radio.stories.completeExample.bankTransfer")})]}),o.jsxs("p",{style:{fontSize:"14px",color:"#666",marginTop:"8px"},children:[e("components.radio.stories.completeExample.selected"),":"," ",a]})]})})}},l={storyName:e("components.radio.stories.interactive.storyName"),args:{name:"interactive",value:"value1",children:e("components.radio.stories.interactive.text"),checked:!1,disabled:!1,theme:"default",type:"radio"}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
|
|
17
|
+
storyName: t('components.radio.stories.default.storyName'),
|
|
18
|
+
args: {
|
|
19
|
+
name: 'option',
|
|
20
|
+
value: 'option1',
|
|
21
|
+
children: t('components.radio.stories.default.text')
|
|
22
|
+
}
|
|
23
|
+
}`,...r.parameters?.docs?.source}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
|
|
24
|
+
storyName: t('components.radio.stories.states.storyName'),
|
|
25
|
+
render: () => <div style={{
|
|
26
|
+
display: 'flex',
|
|
27
|
+
flexDirection: 'column',
|
|
28
|
+
gap: '16px'
|
|
29
|
+
}}>
|
|
30
|
+
<Radio name="states" value="unchecked" checked={false}>
|
|
31
|
+
{t('components.radio.states.unchecked')}
|
|
32
|
+
</Radio>
|
|
33
|
+
<Radio name="states" value="checked" checked>
|
|
34
|
+
{t('components.radio.states.checked')}
|
|
35
|
+
</Radio>
|
|
36
|
+
<Radio name="states" value="disabled-checked" checked disabled>
|
|
37
|
+
{t('components.radio.states.disabledChecked')}
|
|
38
|
+
</Radio>
|
|
39
|
+
<Radio name="states" value="disabled-unchecked" checked={false} disabled>
|
|
40
|
+
{t('components.radio.states.disabledUnchecked')}
|
|
41
|
+
</Radio>
|
|
42
|
+
</div>
|
|
43
|
+
}`,...n.parameters?.docs?.source}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
|
|
44
|
+
storyName: t('components.radio.stories.radioGroup.storyName'),
|
|
45
|
+
render: () => {
|
|
46
|
+
const [selected, setSelected] = useState('option1');
|
|
47
|
+
return <div style={{
|
|
48
|
+
display: 'flex',
|
|
49
|
+
flexDirection: 'column',
|
|
50
|
+
gap: '12px'
|
|
51
|
+
}}>
|
|
52
|
+
<Radio name="group" value="option1" checked={selected === 'option1'} onChange={() => setSelected('option1')}>
|
|
53
|
+
{t('components.radio.stories.radioGroup.option1')}
|
|
54
|
+
</Radio>
|
|
55
|
+
<Radio name="group" value="option2" checked={selected === 'option2'} onChange={() => setSelected('option2')}>
|
|
56
|
+
{t('components.radio.stories.radioGroup.option2')}
|
|
57
|
+
</Radio>
|
|
58
|
+
<Radio name="group" value="option3" checked={selected === 'option3'} onChange={() => setSelected('option3')}>
|
|
59
|
+
{t('components.radio.stories.radioGroup.option3')}
|
|
60
|
+
</Radio>
|
|
61
|
+
<p style={{
|
|
62
|
+
fontSize: '14px',
|
|
63
|
+
color: '#666',
|
|
64
|
+
marginTop: '8px'
|
|
65
|
+
}}>
|
|
66
|
+
{t('components.radio.stories.radioGroup.selected')}: {selected}
|
|
67
|
+
</p>
|
|
68
|
+
</div>;
|
|
69
|
+
}
|
|
70
|
+
}`,...i.parameters?.docs?.source}}};c.parameters={...c.parameters,docs:{...c.parameters?.docs,source:{originalSource:`{
|
|
71
|
+
storyName: t('components.radio.stories.themes.storyName'),
|
|
72
|
+
render: () => <div style={{
|
|
73
|
+
display: 'flex',
|
|
74
|
+
flexDirection: 'column',
|
|
75
|
+
gap: '16px'
|
|
76
|
+
}}>
|
|
77
|
+
<Radio name="themes" value="brand" checked theme="brand">
|
|
78
|
+
{t('components.radio.stories.themes.brand')}
|
|
79
|
+
</Radio>
|
|
80
|
+
<Radio name="themes" value="neutral" checked theme="neutral">
|
|
81
|
+
{t('components.radio.stories.themes.neutral')}
|
|
82
|
+
</Radio>
|
|
83
|
+
</div>
|
|
84
|
+
}`,...c.parameters?.docs?.source}}};d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{
|
|
85
|
+
storyName: t('components.radio.stories.checkboxType.storyName'),
|
|
86
|
+
render: () => {
|
|
87
|
+
const [checked1, setChecked1] = useState(false);
|
|
88
|
+
const [checked2, setChecked2] = useState(true);
|
|
89
|
+
return <div style={{
|
|
90
|
+
display: 'flex',
|
|
91
|
+
flexDirection: 'column',
|
|
92
|
+
gap: '16px'
|
|
93
|
+
}}>
|
|
94
|
+
<Radio type="checkbox" checked={checked1} onChange={setChecked1}>
|
|
95
|
+
{t('components.radio.stories.checkboxType.unchecked')}
|
|
96
|
+
</Radio>
|
|
97
|
+
<Radio type="checkbox" checked={checked2} onChange={setChecked2}>
|
|
98
|
+
{t('components.radio.stories.checkboxType.checked')}
|
|
99
|
+
</Radio>
|
|
100
|
+
</div>;
|
|
101
|
+
}
|
|
102
|
+
}`,...d.parameters?.docs?.source}}};p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`{
|
|
103
|
+
storyName: t('components.radio.stories.typography.storyName'),
|
|
104
|
+
render: () => <div style={{
|
|
105
|
+
display: 'flex',
|
|
106
|
+
flexDirection: 'column',
|
|
107
|
+
gap: '16px'
|
|
108
|
+
}}>
|
|
109
|
+
<Radio name="typography" value="default" checked typography={{
|
|
110
|
+
size: 'base',
|
|
111
|
+
weight: 'regular'
|
|
112
|
+
}}>
|
|
113
|
+
{t('components.radio.stories.typography.default')}
|
|
114
|
+
</Radio>
|
|
115
|
+
<Radio name="typography" value="large" checked typography={{
|
|
116
|
+
size: 'large',
|
|
117
|
+
weight: 'bold'
|
|
118
|
+
}}>
|
|
119
|
+
{t('components.radio.stories.typography.large')}
|
|
120
|
+
</Radio>
|
|
121
|
+
<Radio name="typography" value="small" checked typography={{
|
|
122
|
+
size: 'small',
|
|
123
|
+
weight: 'medium'
|
|
124
|
+
}}>
|
|
125
|
+
{t('components.radio.stories.typography.small')}
|
|
126
|
+
</Radio>
|
|
127
|
+
</div>
|
|
128
|
+
}`,...p.parameters?.docs?.source}}};m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`{
|
|
129
|
+
storyName: t('components.radio.stories.completeExample.storyName'),
|
|
130
|
+
render: () => {
|
|
131
|
+
const [paymentMethod, setPaymentMethod] = useState('credit');
|
|
132
|
+
return <div style={{
|
|
133
|
+
display: 'flex',
|
|
134
|
+
flexDirection: 'column',
|
|
135
|
+
gap: '24px'
|
|
136
|
+
}}>
|
|
137
|
+
<div>
|
|
138
|
+
<h3 style={{
|
|
139
|
+
marginBottom: '12px'
|
|
140
|
+
}}>
|
|
141
|
+
{t('components.radio.stories.completeExample.title')}
|
|
142
|
+
</h3>
|
|
143
|
+
<div style={{
|
|
144
|
+
display: 'flex',
|
|
145
|
+
flexDirection: 'column',
|
|
146
|
+
gap: '12px'
|
|
147
|
+
}}>
|
|
148
|
+
<Radio name="payment" value="credit" checked={paymentMethod === 'credit'} onChange={() => setPaymentMethod('credit')}>
|
|
149
|
+
{t('components.radio.stories.completeExample.creditCard')}
|
|
150
|
+
</Radio>
|
|
151
|
+
<Radio name="payment" value="debit" checked={paymentMethod === 'debit'} onChange={() => setPaymentMethod('debit')}>
|
|
152
|
+
{t('components.radio.stories.completeExample.debitCard')}
|
|
153
|
+
</Radio>
|
|
154
|
+
<Radio name="payment" value="paypal" checked={paymentMethod === 'paypal'} onChange={() => setPaymentMethod('paypal')}>
|
|
155
|
+
{t('components.radio.stories.completeExample.paypal')}
|
|
156
|
+
</Radio>
|
|
157
|
+
<Radio name="payment" value="disabled" checked={paymentMethod === 'disabled'} onChange={() => setPaymentMethod('disabled')} disabled>
|
|
158
|
+
{t('components.radio.stories.completeExample.bankTransfer')}
|
|
159
|
+
</Radio>
|
|
160
|
+
</div>
|
|
161
|
+
<p style={{
|
|
162
|
+
fontSize: '14px',
|
|
163
|
+
color: '#666',
|
|
164
|
+
marginTop: '8px'
|
|
165
|
+
}}>
|
|
166
|
+
{t('components.radio.stories.completeExample.selected')}:{' '}
|
|
167
|
+
{paymentMethod}
|
|
168
|
+
</p>
|
|
169
|
+
</div>
|
|
170
|
+
</div>;
|
|
171
|
+
}
|
|
172
|
+
}`,...m.parameters?.docs?.source}}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
|
|
173
|
+
storyName: t('components.radio.stories.interactive.storyName'),
|
|
174
|
+
args: {
|
|
175
|
+
name: 'interactive',
|
|
176
|
+
value: 'value1',
|
|
177
|
+
children: t('components.radio.stories.interactive.text'),
|
|
178
|
+
checked: false,
|
|
179
|
+
disabled: false,
|
|
180
|
+
theme: 'default',
|
|
181
|
+
type: 'radio'
|
|
182
|
+
}
|
|
183
|
+
}`,...l.parameters?.docs?.source}}};const P=["Default","States","RadioGroup","Themes","CheckboxType","WithCustomTypography","CompleteExample","Interactive"];export{d as CheckboxType,m as CompleteExample,r as Default,l as Interactive,i as RadioGroup,n as States,c as Themes,p as WithCustomTypography,P as __namedExportsOrder,z as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as f,j as e}from"./iframe-CQAwSt4E.js";import{g as p,c as _}from"./classname-CUR_zgkh.js";import{u as j}from"./index-BV0AJWP6.js";const m=p("rating"),g=({value:r=0,...o})=>{const i=Math.max(Math.min(r,1),0)*100,s=f.useId(),t="M21.2849 7.66933C21.1676 7.308 20.8543 7.044 20.4783 6.98933L14.3183 6.09467L11.5636 0.512C11.2276 -0.170667 10.1063 -0.170667 9.77025 0.512L7.01559 6.09333L0.855586 6.988C0.479586 7.04267 0.166253 7.30667 0.0489193 7.668C-0.068414 8.02933 0.0289192 8.428 0.302253 8.69333L4.75959 13.0373L3.70625 19.172C3.64225 19.548 3.79559 19.9267 4.10359 20.1507C4.41159 20.3733 4.82092 20.4027 5.15692 20.2267L10.6663 17.3293L16.1756 20.2267C16.3223 20.304 16.4809 20.3413 16.6409 20.3413C16.8476 20.3413 17.0543 20.2773 17.2289 20.1507C17.5369 19.9267 17.6916 19.548 17.6263 19.172L16.5729 13.0373L21.0303 8.69333C21.3036 8.428 21.4009 8.02933 21.2836 7.668L21.2849 7.66933Z";return e.jsx("span",{className:`${m}__icon`,...o,children:e.jsxs("svg",{width:"100%",height:"100%",viewBox:"0 0 22 21",fill:"none",children:[e.jsx("defs",{children:e.jsx("clipPath",{id:s,children:e.jsx("path",{d:t})})}),e.jsx("path",{className:`${m}__icon-empty`,d:t}),e.jsx("rect",{className:`${m}__icon-filled`,width:`${i}%`,height:"100%",clipPath:`url(#${s})`})]})})};g.__docgenInfo={description:"",methods:[],displayName:"Star",props:{value:{defaultValue:{value:"0",computed:!1},required:!1}}};const v=5,d=p("rating"),L=r=>{const{size:o="medium",className:i,max:s=v,readonly:t=!1,defaultValue:$,onChange:M,value:P,...x}=r,[c,C]=j(r,{trigger:"onChange",valuePropName:"value",defaultValuePropName:"defaultValue"}),h=f.useMemo(()=>{const a=Math.max(Math.floor(s),0);if(a<=0)return[];const n=u=>{if(u+1<=c)return 1;const l=u+1-c;return l>1?0:1-l};return Array.from({length:a},(u,l)=>({value:n(l)}))},[c,s]),N=a=>{t||C(a+1)};return e.jsx("div",{className:_(d,{[`${d}--readonly`]:t,[`${d}--${o}`]:!0},i),...x,children:h.length?h.map((a,n)=>e.jsx(g,{value:a.value,onClick:()=>N(n)},n)):null})};L.__docgenInfo={description:"",methods:[],displayName:"Rating"};export{L as R};
|
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
import{j as t,r as g}from"./iframe-CQAwSt4E.js";import{t as e}from"./store-D2RudmNr.js";import{R as n}from"./rating-BdXViYBv.js";import{T as u,S as y,M as p,P as x,a as f}from"./blocks-BuaOUtiH.js";import"./preload-helper-PPVm8Dsz.js";import"./classname-CUR_zgkh.js";import"./index-BV0AJWP6.js";import"./index-B-Ksafg0.js";import"./index-DHiZ-gXR.js";const v=()=>{const l=`
|
|
2
|
+
## ${e("common.table.title")}
|
|
3
|
+
|
|
4
|
+
| ${e("common.table.name")} | ${e("common.table.type")} | ${e("common.table.required")} | ${e("common.table.description")} |
|
|
5
|
+
| :--- | :--- | :--- | :--- |
|
|
6
|
+
| \`value\` | \`number\` | ${e("common.table.no")} | ${e("components.rating.argTypes.valueDescription")} |
|
|
7
|
+
| \`defaultValue\` | \`number\` | ${e("common.table.no")} | ${e("components.rating.argTypes.defaultValueDescription")} |
|
|
8
|
+
| \`onChange\` | \`(value: number) => void\` | ${e("common.table.no")} | ${e("components.rating.argTypes.onChangeDescription")} |
|
|
9
|
+
| \`max\` | \`number\` | ${e("common.table.no")} | ${e("components.rating.argTypes.maxDescription")} |
|
|
10
|
+
| \`size\` | \`'medium' | 'large' | 'x-large'\` | ${e("common.table.no")} | ${e("components.rating.argTypes.sizeDescription")} |
|
|
11
|
+
| \`readonly\` | \`boolean\` | ${e("common.table.no")} | ${e("components.rating.argTypes.readOnlyDescription")} |
|
|
12
|
+
| \`allowHalf\` | \`boolean\` | ${e("common.table.no")} | ${e("components.rating.argTypes.allowHalfDescription")} |
|
|
13
|
+
| \`className\` | \`string\` | ${e("common.table.no")} | ${e("components.rating.argTypes.classNameDescription")} |
|
|
14
|
+
| \`count\` | \`number\` | ${e("common.table.no")} | ${e("components.rating.argTypes.countDescription")} |
|
|
15
|
+
| \`character\` | \`ReactNode\` | ${e("common.table.no")} | ${e("components.rating.argTypes.characterDescription")} |
|
|
16
|
+
| \`characterRender\` | \`(index: number) => ReactNode\` | ${e("common.table.no")} | ${e("components.rating.argTypes.characterRenderDescription")} |
|
|
17
|
+
| \`tooltips\` | \`string[]\` | ${e("common.table.no")} | ${e("components.rating.argTypes.tooltipsDescription")} |
|
|
18
|
+
| \`onHoverChange\` | \`(value: number) => void\` | ${e("common.table.no")} | ${e("components.rating.argTypes.onHoverChangeDescription")} |
|
|
19
|
+
| \`...props\` | \`ComponentPropsWithRef<'div'>\` | ${e("common.table.no")} | ${e("components.rating.argTypes.propsDescription")} |
|
|
20
|
+
`;return t.jsxs(t.Fragment,{children:[t.jsx(u,{}),t.jsx(y,{}),t.jsx(p,{children:e("components.rating.description")}),t.jsx(x,{}),t.jsx(p,{children:l}),t.jsx(f,{})]})},z={title:"Components/Rating",component:n,parameters:{layout:"padded",docs:{page:v}},tags:["autodocs"],argTypes:{value:{control:{type:"number",min:0,max:5,step:.5},description:e("components.rating.argTypes.valueDescription"),table:{type:{summary:"number"}}},defaultValue:{control:{type:"number",min:0,max:5,step:.5},description:e("components.rating.argTypes.defaultValueDescription"),table:{type:{summary:"number"}}},onChange:{action:"changed",description:e("components.rating.argTypes.onChangeDescription"),table:{type:{summary:"(value: number) => void"}}},max:{control:{type:"number",min:1,max:10,step:1},description:e("components.rating.argTypes.maxDescription"),table:{type:{summary:"number"},defaultValue:{summary:"5"}}},size:{control:"select",options:["medium","large","x-large"],description:e("components.rating.argTypes.sizeDescription"),table:{type:{summary:'"medium" | "large" | "x-large"'},defaultValue:{summary:"medium"}}},readonly:{control:"boolean",description:e("components.rating.argTypes.readOnlyDescription"),table:{type:{summary:"boolean"},defaultValue:{summary:"false"}}}}},o={storyName:e("components.rating.stories.default.storyName"),name:e("components.rating.stories.default.name"),args:{defaultValue:3}},r={storyName:e("components.rating.stories.controlled.storyName"),name:e("components.rating.stories.controlled.name"),render:()=>{const[l,d]=g.useState(0);return t.jsx(n,{value:l,onChange:d})}},a={storyName:e("components.rating.stories.readonly.storyName"),name:e("components.rating.stories.readonly.name"),args:{value:4.5,readonly:!0}},s={storyName:e("components.rating.stories.customMaximum.storyName"),name:e("components.rating.stories.customMaximum.name"),args:{max:10,defaultValue:7}},i={storyName:e("components.rating.stories.differentSizes.storyName"),render:()=>t.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"24px"},children:[t.jsxs("div",{children:[t.jsx("h3",{style:{marginBottom:"12px"},children:e("components.rating.stories.differentSizes.medium")}),t.jsx(n,{size:"medium",defaultValue:3})]}),t.jsxs("div",{children:[t.jsx("h3",{style:{marginBottom:"12px"},children:e("components.rating.stories.differentSizes.large")}),t.jsx(n,{size:"large",defaultValue:4})]}),t.jsxs("div",{children:[t.jsx("h3",{style:{marginBottom:"12px"},children:e("components.rating.stories.differentSizes.xlarge")}),t.jsx(n,{size:"x-large",defaultValue:5})]})]})},m={storyName:e("components.rating.stories.withHalfStars.storyName"),render:()=>t.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"16px"},children:[t.jsxs("div",{children:[t.jsx("p",{style:{marginBottom:"8px"},children:e("components.rating.stories.withHalfStars.threePointFive")}),t.jsx(n,{value:3.5,readonly:!0})]}),t.jsxs("div",{children:[t.jsx("p",{style:{marginBottom:"8px"},children:e("components.rating.stories.withHalfStars.fourPointTwo")}),t.jsx(n,{value:4.2,readonly:!0})]}),t.jsxs("div",{children:[t.jsx("p",{style:{marginBottom:"8px"},children:e("components.rating.stories.withHalfStars.twoPointSeven")}),t.jsx(n,{value:2.7,readonly:!0})]})]})},c={storyName:e("components.rating.stories.interactive.storyName"),name:e("components.rating.stories.interactive.name"),args:{defaultValue:0}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
|
|
21
|
+
storyName: t('components.rating.stories.default.storyName'),
|
|
22
|
+
name: t('components.rating.stories.default.name'),
|
|
23
|
+
args: {
|
|
24
|
+
defaultValue: 3
|
|
25
|
+
}
|
|
26
|
+
}`,...o.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
|
|
27
|
+
storyName: t('components.rating.stories.controlled.storyName'),
|
|
28
|
+
name: t('components.rating.stories.controlled.name'),
|
|
29
|
+
render: () => {
|
|
30
|
+
const [rating, setRating] = useState(0);
|
|
31
|
+
return <Rating value={rating} onChange={setRating} />;
|
|
32
|
+
}
|
|
33
|
+
}`,...r.parameters?.docs?.source}}};a.parameters={...a.parameters,docs:{...a.parameters?.docs,source:{originalSource:`{
|
|
34
|
+
storyName: t('components.rating.stories.readonly.storyName'),
|
|
35
|
+
name: t('components.rating.stories.readonly.name'),
|
|
36
|
+
args: {
|
|
37
|
+
value: 4.5,
|
|
38
|
+
readonly: true
|
|
39
|
+
}
|
|
40
|
+
}`,...a.parameters?.docs?.source}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
|
|
41
|
+
storyName: t('components.rating.stories.customMaximum.storyName'),
|
|
42
|
+
name: t('components.rating.stories.customMaximum.name'),
|
|
43
|
+
args: {
|
|
44
|
+
max: 10,
|
|
45
|
+
defaultValue: 7
|
|
46
|
+
}
|
|
47
|
+
}`,...s.parameters?.docs?.source}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
|
|
48
|
+
storyName: t('components.rating.stories.differentSizes.storyName'),
|
|
49
|
+
render: () => <div style={{
|
|
50
|
+
display: 'flex',
|
|
51
|
+
flexDirection: 'column',
|
|
52
|
+
gap: '24px'
|
|
53
|
+
}}>
|
|
54
|
+
<div>
|
|
55
|
+
<h3 style={{
|
|
56
|
+
marginBottom: '12px'
|
|
57
|
+
}}>
|
|
58
|
+
{t('components.rating.stories.differentSizes.medium')}
|
|
59
|
+
</h3>
|
|
60
|
+
<Rating size="medium" defaultValue={3} />
|
|
61
|
+
</div>
|
|
62
|
+
<div>
|
|
63
|
+
<h3 style={{
|
|
64
|
+
marginBottom: '12px'
|
|
65
|
+
}}>
|
|
66
|
+
{t('components.rating.stories.differentSizes.large')}
|
|
67
|
+
</h3>
|
|
68
|
+
<Rating size="large" defaultValue={4} />
|
|
69
|
+
</div>
|
|
70
|
+
<div>
|
|
71
|
+
<h3 style={{
|
|
72
|
+
marginBottom: '12px'
|
|
73
|
+
}}>
|
|
74
|
+
{t('components.rating.stories.differentSizes.xlarge')}
|
|
75
|
+
</h3>
|
|
76
|
+
<Rating size="x-large" defaultValue={5} />
|
|
77
|
+
</div>
|
|
78
|
+
</div>
|
|
79
|
+
}`,...i.parameters?.docs?.source}}};m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`{
|
|
80
|
+
storyName: t('components.rating.stories.withHalfStars.storyName'),
|
|
81
|
+
render: () => <div style={{
|
|
82
|
+
display: 'flex',
|
|
83
|
+
flexDirection: 'column',
|
|
84
|
+
gap: '16px'
|
|
85
|
+
}}>
|
|
86
|
+
<div>
|
|
87
|
+
<p style={{
|
|
88
|
+
marginBottom: '8px'
|
|
89
|
+
}}>
|
|
90
|
+
{t('components.rating.stories.withHalfStars.threePointFive')}
|
|
91
|
+
</p>
|
|
92
|
+
<Rating value={3.5} readonly />
|
|
93
|
+
</div>
|
|
94
|
+
<div>
|
|
95
|
+
<p style={{
|
|
96
|
+
marginBottom: '8px'
|
|
97
|
+
}}>
|
|
98
|
+
{t('components.rating.stories.withHalfStars.fourPointTwo')}
|
|
99
|
+
</p>
|
|
100
|
+
<Rating value={4.2} readonly />
|
|
101
|
+
</div>
|
|
102
|
+
<div>
|
|
103
|
+
<p style={{
|
|
104
|
+
marginBottom: '8px'
|
|
105
|
+
}}>
|
|
106
|
+
{t('components.rating.stories.withHalfStars.twoPointSeven')}
|
|
107
|
+
</p>
|
|
108
|
+
<Rating value={2.7} readonly />
|
|
109
|
+
</div>
|
|
110
|
+
</div>
|
|
111
|
+
}`,...m.parameters?.docs?.source}}};c.parameters={...c.parameters,docs:{...c.parameters?.docs,source:{originalSource:`{
|
|
112
|
+
storyName: t('components.rating.stories.interactive.storyName'),
|
|
113
|
+
name: t('components.rating.stories.interactive.name'),
|
|
114
|
+
args: {
|
|
115
|
+
defaultValue: 0
|
|
116
|
+
}
|
|
117
|
+
}`,...c.parameters?.docs?.source}}};const V=["Default","Controlled","Readonly","CustomMaximum","DifferentSizes","WithHalfStars","Interactive"];export{r as Controlled,s as CustomMaximum,o as Default,i as DifferentSizes,c as Interactive,a as Readonly,m as WithHalfStars,V as __namedExportsOrder,z as default};
|