@v-miniapp/ui-react 1.0.41 → 1.0.45

package/dist-storybook/assets/icon.stories-B-ZvRzFf.js

@@ -0,0 +1,365 @@
+import{j as e}from"./iframe-CQAwSt4E.js";import{T as y,S as g,M as d,P as f,a as h}from"./blocks-BuaOUtiH.js";import{i as u,I as o}from"./icon-DdQsMyRa.js";import{t as s}from"./store-D2RudmNr.js";import"./preload-helper-PPVm8Dsz.js";import"./index-DHiZ-gXR.js";import"./colors-_6nFGM3e.js";import"./classname-CUR_zgkh.js";const v=()=>{const x=`
+## ${s("common.table.title")}
+
+| ${s("common.table.name")} | ${s("common.table.type")} | ${s("common.table.required")} | ${s("common.table.description")} |
+| :--- | :--- | :--- | :--- |
+| \`name\` | \`IIconName\` | ${s("common.table.yes")}* | ${s("components.icon.nameDescription")} |
+| \`type\` | \`'outline' | 'fill'\` | ${s("common.table.no")} | ${s("components.icon.typeDescription")} |
+| \`size\` | \`number | string\` | ${s("common.table.no")} | ${s("components.icon.sizeDescription")} |
+| \`color\` | \`IColor\` | ${s("common.table.no")} | ${s("components.icon.colorDescription")} |
+| \`animation\` | \`'spin' | 'ping' | 'pulse' | 'bounce'\` | ${s("common.table.no")} | ${s("components.icon.animationDescription")} |
+| \`children\` | \`ReactNode\` | ${s("common.table.no")} | ${s("components.icon.childrenDescription")} |
+| \`className\` | \`string\` | ${s("common.table.no")} | ${s("components.icon.classNameDescription")} |
+| \`style\` | \`React.CSSProperties\` | ${s("common.table.no")} | ${s("components.icon.styleDescription")} |
+| \`...props\` | \`Omit<ComponentProps<'svg'>, 'name' | 'type' | 'children'>\` | ${s("common.table.no")} | ${s("components.icon.propsDescription")} |
+  `;return e.jsxs(e.Fragment,{children:[e.jsx(y,{}),e.jsx(g,{}),e.jsx(d,{children:s("components.icon.description")}),e.jsx(f,{}),e.jsx(d,{children:x}),e.jsx(h,{})]})},$={title:"Components/Icon",component:o,parameters:{layout:"padded",docs:{page:v}},tags:["autodocs"],argTypes:{name:{control:"select",description:s("components.icon.argTypes.nameDescription"),table:{type:{summary:"IIconName"}},options:u},type:{control:"select",options:["outline","fill"],description:s("components.icon.argTypes.typeDescription"),table:{type:{summary:'"outline" | "fill"'},defaultValue:{summary:"outline"}}},size:{control:{type:"number",min:8,max:128,step:4},description:s("components.icon.argTypes.sizeDescription"),table:{type:{summary:"number | string"}}},color:{control:"text",description:s("components.icon.argTypes.colorDescription"),table:{type:{summary:"IColor"}}},animation:{control:"select",options:["spin","ping","pulse","bounce"],description:s("components.icon.argTypes.animationDescription"),table:{type:{summary:"IIconAnimation"}}},children:{control:!1,description:s("components.icon.argTypes.childrenDescription"),table:{type:{summary:"ReactNode"}}},className:{control:"text",description:s("components.icon.argTypes.classNameDescription"),table:{type:{summary:"string"}}},style:{control:"object",description:s("components.icon.argTypes.styleDescription"),table:{type:{summary:"React.CSSProperties"}}}}},n={storyName:s("components.icon.stories.default.storyName"),args:{name:"placeholder"}},i={storyName:s("components.icon.stories.iconTypes.storyName"),render:()=>e.jsxs("div",{style:{display:"flex",gap:"24px",alignItems:"center"},children:[e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"8px",alignItems:"center"},children:[e.jsx(o,{name:"placeholder",type:"outline",size:32}),e.jsx("span",{style:{fontSize:"12px"},children:s("components.icon.stories.iconTypes.outline")})]}),e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"8px",alignItems:"center"},children:[e.jsx(o,{name:"placeholder",type:"fill",size:32}),e.jsx("span",{style:{fontSize:"12px"},children:s("components.icon.stories.iconTypes.fill")})]})]})},t={storyName:s("components.icon.stories.sizes.storyName"),render:()=>e.jsxs("div",{style:{display:"flex",gap:"16px",alignItems:"center"},children:[e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"8px",alignItems:"center"},children:[e.jsx(o,{name:"placeholder",size:16}),e.jsx("span",{style:{fontSize:"12px"},children:"16px"})]}),e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"8px",alignItems:"center"},children:[e.jsx(o,{name:"placeholder",size:24}),e.jsx("span",{style:{fontSize:"12px"},children:"24px"})]}),e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"8px",alignItems:"center"},children:[e.jsx(o,{name:"placeholder",size:32}),e.jsx("span",{style:{fontSize:"12px"},children:"32px"})]}),e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"8px",alignItems:"center"},children:[e.jsx(o,{name:"placeholder",size:48}),e.jsx("span",{style:{fontSize:"12px"},children:"48px"})]}),e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"8px",alignItems:"center"},children:[e.jsx(o,{name:"placeholder",size:"2rem"}),e.jsx("span",{style:{fontSize:"12px"},children:"2rem"})]}),e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"8px",alignItems:"center"},children:[e.jsx(o,{name:"placeholder",size:"3em"}),e.jsx("span",{style:{fontSize:"12px"},children:"3em"})]})]})},l={storyName:s("components.icon.stories.colors.storyName"),render:()=>e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"16px"},children:[e.jsxs("div",{children:[e.jsx("h3",{style:{marginBottom:"12px"},children:s("components.icon.stories.colors.themeColors")}),e.jsxs("div",{style:{display:"flex",gap:"16px",alignItems:"center"},children:[e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"8px",alignItems:"center"},children:[e.jsx(o,{name:"placeholder",size:32,color:"alias-object-primary"}),e.jsx("span",{style:{fontSize:"12px"},children:"Primary"})]}),e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"8px",alignItems:"center"},children:[e.jsx(o,{name:"placeholder",size:32,color:"alias-support-positive"}),e.jsx("span",{style:{fontSize:"12px"},children:"Positive"})]}),e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"8px",alignItems:"center"},children:[e.jsx(o,{name:"placeholder",size:32,color:"alias-support-negative"}),e.jsx("span",{style:{fontSize:"12px"},children:"Negative"})]})]})]}),e.jsxs("div",{children:[e.jsx("h3",{style:{marginBottom:"12px"},children:s("components.icon.stories.colors.cssColors")}),e.jsxs("div",{style:{display:"flex",gap:"16px",alignItems:"center"},children:[e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"8px",alignItems:"center"},children:[e.jsx(o,{name:"placeholder",size:32,color:"#FF0000"}),e.jsx("span",{style:{fontSize:"12px"},children:"#FF0000"})]}),e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"8px",alignItems:"center"},children:[e.jsx(o,{name:"placeholder",size:32,color:"rgb(0, 102, 204)"}),e.jsx("span",{style:{fontSize:"12px"},children:"rgb(0, 102, 204)"})]}),e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"8px",alignItems:"center"},children:[e.jsx(o,{name:"placeholder",size:32,color:"#00AA00"}),e.jsx("span",{style:{fontSize:"12px"},children:"#00AA00"})]})]})]})]})},a={storyName:s("components.icon.stories.animations.storyName"),render:()=>e.jsxs("div",{style:{display:"flex",gap:"24px",alignItems:"center"},children:[e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"8px",alignItems:"center"},children:[e.jsx(o,{name:"loader",animation:"spin",size:32}),e.jsx("span",{style:{fontSize:"12px"},children:s("components.icon.stories.animations.spin")})]}),e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"8px",alignItems:"center"},children:[e.jsx(o,{name:"placeholder",animation:"ping",size:32}),e.jsx("span",{style:{fontSize:"12px"},children:s("components.icon.stories.animations.ping")})]}),e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"8px",alignItems:"center"},children:[e.jsx(o,{name:"placeholder",animation:"pulse",size:32}),e.jsx("span",{style:{fontSize:"12px"},children:s("components.icon.stories.animations.pulse")})]}),e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"8px",alignItems:"center"},children:[e.jsx(o,{name:"placeholder",animation:"bounce",size:32}),e.jsx("span",{style:{fontSize:"12px"},children:s("components.icon.stories.animations.bounce")})]})]})},r={storyName:s("components.icon.stories.customSVGIcon.storyName"),render:()=>e.jsxs("div",{style:{display:"flex",gap:"16px",alignItems:"center"},children:[e.jsx(o,{children:e.jsx("svg",{viewBox:"0 0 24 24",width:"24",height:"24",fill:"currentColor",children:e.jsx("path",{d:"M12 2L2 7v10l10 5 10-5V7l-10-5z"})})}),e.jsx(o,{size:32,color:"#4a90e2",children:e.jsx("svg",{viewBox:"0 0 24 24",width:"24",height:"24",fill:"currentColor",children:e.jsx("circle",{cx:"12",cy:"12",r:"10"})})}),e.jsx(o,{size:48,color:"alias-object-primary",children:e.jsx("svg",{viewBox:"0 0 24 24",width:"24",height:"24",fill:"currentColor",children:e.jsx("path",{d:"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"})})})]})},c={storyName:s("components.icon.stories.withSVGProps.storyName"),render:()=>e.jsxs("div",{style:{display:"flex",gap:"16px",alignItems:"center"},children:[e.jsx(o,{name:"placeholder",size:32,title:"Information",titleId:"info-title",desc:"This is an information icon"}),e.jsx(o,{name:"placeholder",type:"fill",size:32,color:"alias-object-primary",title:"Custom Icon"})]})},p={storyName:s("components.icon.stories.completeExample.storyName"),render:()=>e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"24px"},children:[e.jsxs("div",{children:[e.jsx("h3",{style:{marginBottom:"12px"},children:"Common Icons"}),e.jsxs("div",{style:{display:"flex",gap:"16px",alignItems:"center"},children:[e.jsx(o,{name:"placeholder",size:24}),e.jsx(o,{name:"placeholder",type:"fill",size:24,color:"alias-object-primary"}),e.jsx(o,{name:"placeholder",size:24,color:"alias-support-positive"}),e.jsx(o,{name:"placeholder",size:24,color:"alias-support-negative"})]})]}),e.jsxs("div",{children:[e.jsx("h3",{style:{marginBottom:"12px"},children:"Animated Icons"}),e.jsxs("div",{style:{display:"flex",gap:"16px",alignItems:"center"},children:[e.jsx(o,{name:"loader",animation:"spin",size:32,color:"alias-object-primary"}),e.jsx(o,{name:"placeholder",animation:"ping",size:32,color:"alias-support-positive"}),e.jsx(o,{name:"placeholder",animation:"pulse",size:32,color:"alias-support-negative"})]})]})]})},m={storyName:s("components.icon.stories.interactive.storyName"),args:{name:"placeholder",type:"outline",size:24}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.icon.stories.default.storyName'),
+  args: {
+    name: 'placeholder'
+  }
+}`,...n.parameters?.docs?.source}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.icon.stories.iconTypes.storyName'),
+  render: () => <div style={{
+    display: 'flex',
+    gap: '24px',
+    alignItems: 'center'
+  }}>
+      <div style={{
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '8px',
+      alignItems: 'center'
+    }}>
+        <Icon name="placeholder" type="outline" size={32} />
+        <span style={{
+        fontSize: '12px'
+      }}>
+          {t('components.icon.stories.iconTypes.outline')}
+        </span>
+      </div>
+      <div style={{
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '8px',
+      alignItems: 'center'
+    }}>
+        <Icon name="placeholder" type="fill" size={32} />
+        <span style={{
+        fontSize: '12px'
+      }}>
+          {t('components.icon.stories.iconTypes.fill')}
+        </span>
+      </div>
+    </div>
+}`,...i.parameters?.docs?.source}}};t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.icon.stories.sizes.storyName'),
+  render: () => <div style={{
+    display: 'flex',
+    gap: '16px',
+    alignItems: 'center'
+  }}>
+      <div style={{
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '8px',
+      alignItems: 'center'
+    }}>
+        <Icon name="placeholder" size={16} />
+        <span style={{
+        fontSize: '12px'
+      }}>16px</span>
+      </div>
+      <div style={{
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '8px',
+      alignItems: 'center'
+    }}>
+        <Icon name="placeholder" size={24} />
+        <span style={{
+        fontSize: '12px'
+      }}>24px</span>
+      </div>
+      <div style={{
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '8px',
+      alignItems: 'center'
+    }}>
+        <Icon name="placeholder" size={32} />
+        <span style={{
+        fontSize: '12px'
+      }}>32px</span>
+      </div>
+      <div style={{
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '8px',
+      alignItems: 'center'
+    }}>
+        <Icon name="placeholder" size={48} />
+        <span style={{
+        fontSize: '12px'
+      }}>48px</span>
+      </div>
+      <div style={{
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '8px',
+      alignItems: 'center'
+    }}>
+        <Icon name="placeholder" size="2rem" />
+        <span style={{
+        fontSize: '12px'
+      }}>2rem</span>
+      </div>
+      <div style={{
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '8px',
+      alignItems: 'center'
+    }}>
+        <Icon name="placeholder" size="3em" />
+        <span style={{
+        fontSize: '12px'
+      }}>3em</span>
+      </div>
+    </div>
+}`,...t.parameters?.docs?.source}}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.icon.stories.colors.storyName'),
+  render: () => <div style={{
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '16px'
+  }}>
+      <div>
+        <h3 style={{
+        marginBottom: '12px'
+      }}>
+          {t('components.icon.stories.colors.themeColors')}
+        </h3>
+        <div style={{
+        display: 'flex',
+        gap: '16px',
+        alignItems: 'center'
+      }}>
+          <div style={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '8px',
+          alignItems: 'center'
+        }}>
+            <Icon name="placeholder" size={32} color="alias-object-primary" />
+            <span style={{
+            fontSize: '12px'
+          }}>Primary</span>
+          </div>
+          <div style={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '8px',
+          alignItems: 'center'
+        }}>
+            <Icon name="placeholder" size={32} color="alias-support-positive" />
+            <span style={{
+            fontSize: '12px'
+          }}>Positive</span>
+          </div>
+          <div style={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '8px',
+          alignItems: 'center'
+        }}>
+            <Icon name="placeholder" size={32} color="alias-support-negative" />
+            <span style={{
+            fontSize: '12px'
+          }}>Negative</span>
+          </div>
+        </div>
+      </div>
+      <div>
+        <h3 style={{
+        marginBottom: '12px'
+      }}>
+          {t('components.icon.stories.colors.cssColors')}
+        </h3>
+        <div style={{
+        display: 'flex',
+        gap: '16px',
+        alignItems: 'center'
+      }}>
+          <div style={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '8px',
+          alignItems: 'center'
+        }}>
+            <Icon name="placeholder" size={32} color="#FF0000" />
+            <span style={{
+            fontSize: '12px'
+          }}>#FF0000</span>
+          </div>
+          <div style={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '8px',
+          alignItems: 'center'
+        }}>
+            <Icon name="placeholder" size={32} color="rgb(0, 102, 204)" />
+            <span style={{
+            fontSize: '12px'
+          }}>rgb(0, 102, 204)</span>
+          </div>
+          <div style={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '8px',
+          alignItems: 'center'
+        }}>
+            <Icon name="placeholder" size={32} color="#00AA00" />
+            <span style={{
+            fontSize: '12px'
+          }}>#00AA00</span>
+          </div>
+        </div>
+      </div>
+    </div>
+}`,...l.parameters?.docs?.source}}};a.parameters={...a.parameters,docs:{...a.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.icon.stories.animations.storyName'),
+  render: () => <div style={{
+    display: 'flex',
+    gap: '24px',
+    alignItems: 'center'
+  }}>
+      <div style={{
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '8px',
+      alignItems: 'center'
+    }}>
+        <Icon name="loader" animation="spin" size={32} />
+        <span style={{
+        fontSize: '12px'
+      }}>
+          {t('components.icon.stories.animations.spin')}
+        </span>
+      </div>
+      <div style={{
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '8px',
+      alignItems: 'center'
+    }}>
+        <Icon name="placeholder" animation="ping" size={32} />
+        <span style={{
+        fontSize: '12px'
+      }}>
+          {t('components.icon.stories.animations.ping')}
+        </span>
+      </div>
+      <div style={{
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '8px',
+      alignItems: 'center'
+    }}>
+        <Icon name="placeholder" animation="pulse" size={32} />
+        <span style={{
+        fontSize: '12px'
+      }}>
+          {t('components.icon.stories.animations.pulse')}
+        </span>
+      </div>
+      <div style={{
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '8px',
+      alignItems: 'center'
+    }}>
+        <Icon name="placeholder" animation="bounce" size={32} />
+        <span style={{
+        fontSize: '12px'
+      }}>
+          {t('components.icon.stories.animations.bounce')}
+        </span>
+      </div>
+    </div>
+}`,...a.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.icon.stories.customSVGIcon.storyName'),
+  render: () => <div style={{
+    display: 'flex',
+    gap: '16px',
+    alignItems: 'center'
+  }}>
+      <Icon>
+        <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor">
+          <path d="M12 2L2 7v10l10 5 10-5V7l-10-5z" />
+        </svg>
+      </Icon>
+      <Icon size={32} color="#4a90e2">
+        <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor">
+          <circle cx="12" cy="12" r="10" />
+        </svg>
+      </Icon>
+      <Icon size={48} color="alias-object-primary">
+        <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor">
+          <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
+        </svg>
+      </Icon>
+    </div>
+}`,...r.parameters?.docs?.source}}};c.parameters={...c.parameters,docs:{...c.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.icon.stories.withSVGProps.storyName'),
+  render: () => <div style={{
+    display: 'flex',
+    gap: '16px',
+    alignItems: 'center'
+  }}>
+      <Icon name="placeholder" size={32} title="Information" titleId="info-title" desc="This is an information icon" />
+      <Icon name="placeholder" type="fill" size={32} color="alias-object-primary" title="Custom Icon" />
+    </div>
+}`,...c.parameters?.docs?.source}}};p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.icon.stories.completeExample.storyName'),
+  render: () => <div style={{
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '24px'
+  }}>
+      <div>
+        <h3 style={{
+        marginBottom: '12px'
+      }}>Common Icons</h3>
+        <div style={{
+        display: 'flex',
+        gap: '16px',
+        alignItems: 'center'
+      }}>
+          <Icon name="placeholder" size={24} />
+          <Icon name="placeholder" type="fill" size={24} color="alias-object-primary" />
+          <Icon name="placeholder" size={24} color="alias-support-positive" />
+          <Icon name="placeholder" size={24} color="alias-support-negative" />
+        </div>
+      </div>
+      <div>
+        <h3 style={{
+        marginBottom: '12px'
+      }}>Animated Icons</h3>
+        <div style={{
+        display: 'flex',
+        gap: '16px',
+        alignItems: 'center'
+      }}>
+          <Icon name="loader" animation="spin" size={32} color="alias-object-primary" />
+          <Icon name="placeholder" animation="ping" size={32} color="alias-support-positive" />
+          <Icon name="placeholder" animation="pulse" size={32} color="alias-support-negative" />
+        </div>
+      </div>
+    </div>
+}`,...p.parameters?.docs?.source}}};m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.icon.stories.interactive.storyName'),
+  args: {
+    name: 'placeholder',
+    type: 'outline',
+    size: 24
+  }
+}`,...m.parameters?.docs?.source}}};const T=["Default","IconTypes","Sizes","Colors","Animations","CustomSVGIcon","WithSVGProps","CompleteExample","Interactive"];export{a as Animations,l as Colors,p as CompleteExample,r as CustomSVGIcon,n as Default,i as IconTypes,m as Interactive,t as Sizes,c as WithSVGProps,T as __namedExportsOrder,$ as default};