diff --git a/CLAUDE.md b/CLAUDE.md index f2aeb52..e37e047 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -30,25 +30,37 @@ ## Icon Naming -All icon props **must** use the `ph-` prefix. Phosphor Icons are the only supported icon set. +All icons **must** carry the `ph` class. Every icon — everywhere, always. Phosphor Icons are the only supported icon set. + +- In Vue `icon` props: always use the `ph-` prefix (`ph-house`, `ph-bold ph-spinner`). +- In raw HTML: always use `` (both `ph` and `ph-*`). ```js // Correct icon="ph-house" icon="ph-plus" -icon="ph-bold ph-spinner" // multiple classes allowed +icon="ph-bold ph-spinner" // Wrong — will trigger a dev warning and may not render icon="house" icon="plus" ``` +```html + + + + + +``` + ## Component Catalog | Need | Component | Props you will use | |------|-----------|-------------------| | Button | `GnButton` | `variant`, `size`, `icon`, `loading`, `disabled` | | Icon-only button | `GnIconButton` | `icon`, `label` | +| Copy button | `GnCopyButton` | `text`, `icon`, `successIcon`, `duration`, `label` | | Status label | `GnBadge` | `variant`, `outline` | | Message block | `GnAlert` | `variant` | | Card / panel | `GnCard` | `title` (slot), `footer` (slot) | diff --git a/README.md b/README.md index f63988b..be2f111 100644 --- a/README.md +++ b/README.md @@ -158,6 +158,7 @@ |------|-----------|-------------------| | Button | `GnButton` | `variant`, `size`, `icon`, `loading`, `disabled` | | Icon-only button | `GnIconButton` | `icon`, `label` | +| Copy button | `GnCopyButton` | `text`, `icon`, `successIcon`, `duration`, `label` | | Status label | `GnBadge` | `variant`, `outline` | | Message block | `GnAlert` | `variant` | | Card / panel | `GnCard` | `title` (slot), `footer` (slot) | diff --git a/demo/partials/buttons.html b/demo/partials/buttons.html index 9db63c4..fb4072e 100644 --- a/demo/partials/buttons.html +++ b/demo/partials/buttons.html @@ -33,6 +33,19 @@ +
+ Кнопка копирования на основе .btn-icon. В Vue-адаптере используй GnCopyButton.
+
+ Кнопка копирования на основе .btn-icon. В Vue-адаптере используй GnCopyButton.
+
C)for(;b<=O;)we(c[b],v,_,!0),b++;else{const M=b,U=b,$=new Map;for(b=U;b<=C;b++){const he=d[b]=S?Ne(d[b]):Ie(d[b]);he.key!=null&&$.set(he.key,b)}let W,ne=0;const se=C-U+1;let Te=!1,Ee=0;const _t=new Array(se);for(b=0;b {const{el:_,type:E,transition:w,children:S,shapeFlag:b}=c;if(b&6){Qe(c.component.subTree,d,g,y);return}if(b&128){c.suspense.move(d,g,y);return}if(b&64){E.move(c,d,g,vt);return}if(E===Ge){l(_,d,g);for(let O=0;O C)for(;b<=O;)we(c[b],v,_,!0),b++;else{const M=b,U=b,$=new Map;for(b=U;b<=C;b++){const he=d[b]=S?Ne(d[b]):Ie(d[b]);he.key!=null&&$.set(he.key,b)}let W,ne=0;const se=C-U+1;let Te=!1,Ee=0;const _t=new Array(se);for(b=0;b {const{el:_,type:E,transition:w,children:S,shapeFlag:b}=c;if(b&6){Qe(c.component.subTree,d,g,y);return}if(b&128){c.suspense.move(d,g,y);return}if(b&64){E.move(c,d,g,vt);return}if(E===Ge){l(_,d,g);for(let O=0;O