@bethinkpl/design-system 26.2.1 → 26.2.3
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/dist/design-system.umd.cjs +10 -10
- package/dist/design-system.umd.cjs.map +1 -1
- package/dist/lib/js/components/RichList/BasicRichListItem/BasicRichListItem.vue.d.ts +3 -0
- package/dist/lib/js/components/RichList/RichListItem/RichListItem.consts.d.ts +1 -0
- package/dist/lib/js/components/RichList/RichListItem/RichListItem.vue.d.ts +2 -0
- package/docs/assets/{Banner-CrcVtTA6.js → Banner-CKP6QLq7.js} +1 -1
- package/docs/assets/{Banner.stories-DrJfhoQX.js → Banner.stories-CSclVk5l.js} +1 -1
- package/docs/assets/{BasicRichListItem-BI7N8gLp.js → BasicRichListItem-BGCsDKGm.js} +1 -1
- package/docs/assets/{BasicRichListItem.stories-Bx-Ny_JI.js → BasicRichListItem.stories-Bvcqo21m.js} +1 -1
- package/docs/assets/{Color-ERTF36HU-Dc5y5_V2.js → Color-ERTF36HU-BTmJnlle.js} +1 -1
- package/docs/assets/{DatePicker-DQP-efDm.js → DatePicker-CWG77CUI.js} +1 -1
- package/docs/assets/{DatePicker.stories-DN8CFRc5.js → DatePicker.stories-BBO6QILB.js} +1 -1
- package/docs/assets/{DateRangePicker-CofYgx_A.js → DateRangePicker-BJUFKwW_.js} +1 -1
- package/docs/assets/{DateRangePicker.stories-DdyCIzEg.js → DateRangePicker.stories-BqQbDydB.js} +1 -1
- package/docs/assets/{DocsRenderer-CFRXHY34-ue2fqW_7.js → DocsRenderer-CFRXHY34-DmepmTWQ.js} +5 -5
- package/docs/assets/GroupRichListItem-LQNLl-ci.js +1 -0
- package/docs/assets/{GroupRichListItem.stories-ClHv1fNz.js → GroupRichListItem.stories-DwQP_oqX.js} +1 -1
- package/docs/assets/{RichListItem.stories-BYvV97pJ.js → RichListItem.stories-CLQ5R7QL.js} +1 -1
- package/docs/assets/{SelectionTile-B6r-SAms.js → SelectionTile-sWtTU7bs.js} +1 -1
- package/docs/assets/{SelectionTile.stories-CZvWTZpw.js → SelectionTile.stories-Dt1QlDRy.js} +1 -1
- package/docs/assets/{iframe-pILTL9EM.js → iframe-CmkboxrT.js} +4 -4
- package/docs/assets/{index-t20SkCwm.js → index-B1zHWDht.js} +1 -1
- package/docs/assets/{index-qTJv4Z6R.js → index-Bd6wXhHD.js} +1 -1
- package/docs/assets/{preview-DrpGEWHQ.js → preview-Djir_xRj.js} +2 -2
- package/docs/assets/{preview-CAEPvBGu.js → preview-Z9cYybHQ.js} +1 -1
- package/docs/iframe.html +1 -1
- package/docs/project.json +1 -1
- package/lib/js/components/Banner/Banner.vue +3 -0
- package/lib/js/components/RichList/RichListItem/RichListItem.consts.ts +1 -0
- package/lib/js/components/RichList/RichListItem/RichListItem.vue +21 -2
- package/package.json +1 -1
- package/docs/assets/GroupRichListItem-DZzp4b-c.js +0 -1
package/docs/iframe.html
CHANGED
|
@@ -510,7 +510,7 @@
|
|
|
510
510
|
</script>
|
|
511
511
|
<link rel="stylesheet" href="./preview.css">
|
|
512
512
|
|
|
513
|
-
<script type="module" crossorigin src="./assets/iframe-
|
|
513
|
+
<script type="module" crossorigin src="./assets/iframe-CmkboxrT.js"></script>
|
|
514
514
|
</head>
|
|
515
515
|
|
|
516
516
|
<body>
|
package/docs/project.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"generatedAt":
|
|
1
|
+
{"generatedAt":1732264249194,"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":true,"hasStorybookEslint":true,"refCount":0,"testPackages":{"@types/jest":"29.5.13","@vue/vue3-jest":"29.2.2","jest":"29.7.0","jest-environment-jsdom":"29.7.0","ts-jest":"29.0.5"},"packageManager":{"type":"yarn","version":"1.22.22"},"preview":{"usesGlobals":false},"framework":{"name":"@storybook/vue3-vite","options":{}},"builder":"@storybook/builder-vite","renderer":"@storybook/vue3","portableStoriesFileCount":2,"storybookVersion":"8.3.4","storybookVersionSpecifier":"^8.3.4","language":"typescript","storybookPackages":{"@storybook/vue3":{"version":"8.3.4"},"@storybook/vue3-vite":{"version":"8.3.4"},"eslint-plugin-storybook":{"version":"0.8.0"},"storybook":{"version":"8.3.4"}},"addons":{"@storybook/addon-actions":{"version":"8.3.4"},"@storybook/addon-designs":{"version":"8.0.3"},"@storybook/addon-docs":{"version":"8.3.4"},"@storybook/addon-controls":{"version":"8.3.4"},"@storybook/addon-storysource":{"version":"8.3.4"},"@storybook/addon-viewport":{"version":"8.3.4"}}}
|
|
@@ -81,6 +81,9 @@
|
|
|
81
81
|
$self: &;
|
|
82
82
|
|
|
83
83
|
container-type: inline-size;
|
|
84
|
+
// We need to manually set width when using inline-size inside flex containers, otherwise it'll collapse to 0px width:
|
|
85
|
+
// https://stackoverflow.com/a/73980194
|
|
86
|
+
width: 100%;
|
|
84
87
|
|
|
85
88
|
&__inner {
|
|
86
89
|
border-radius: $radius-m;
|
|
@@ -7,6 +7,7 @@ export type RichListItemType = typeof RICH_LIST_ITEM_TYPE[keyof typeof RICH_LIST
|
|
|
7
7
|
export const RICH_LIST_ITEM_STATE = {
|
|
8
8
|
DEFAULT: 'default',
|
|
9
9
|
LOADING: 'loading',
|
|
10
|
+
DRAG: 'drag',
|
|
10
11
|
} as const;
|
|
11
12
|
export type RichListItemState = typeof RICH_LIST_ITEM_STATE[keyof typeof RICH_LIST_ITEM_STATE];
|
|
12
13
|
|
|
@@ -87,11 +87,13 @@ $rich-list-item-background-colors: (
|
|
|
87
87
|
default: $color-neutral-background,
|
|
88
88
|
hover: $color-neutral-background-hovered,
|
|
89
89
|
loading: $color-neutral-background,
|
|
90
|
+
drag: $color-neutral-background-hovered,
|
|
90
91
|
),
|
|
91
92
|
neutral-weak: (
|
|
92
93
|
default: $color-neutral-background-weak,
|
|
93
94
|
hover: $color-neutral-background-weak-hovered,
|
|
94
95
|
loading: $color-neutral-background-weak,
|
|
96
|
+
drag: $color-neutral-background-weak-hovered,
|
|
95
97
|
),
|
|
96
98
|
);
|
|
97
99
|
|
|
@@ -308,7 +310,7 @@ $rich-list-item-media-horizontal-height: 80px;
|
|
|
308
310
|
}
|
|
309
311
|
}
|
|
310
312
|
|
|
311
|
-
&.-ds-draggable {
|
|
313
|
+
&.-ds-draggable-without-handler {
|
|
312
314
|
&:hover {
|
|
313
315
|
cursor: grab;
|
|
314
316
|
}
|
|
@@ -333,6 +335,10 @@ $rich-list-item-media-horizontal-height: 80px;
|
|
|
333
335
|
#{$root}__wrapper {
|
|
334
336
|
border: none;
|
|
335
337
|
}
|
|
338
|
+
|
|
339
|
+
&.-ds-interactive.-ds-draggable.-ds-drag {
|
|
340
|
+
background: $color-neutral-background-ghost-hovered;
|
|
341
|
+
}
|
|
336
342
|
}
|
|
337
343
|
|
|
338
344
|
&.-ds-default {
|
|
@@ -345,6 +351,14 @@ $rich-list-item-media-horizontal-height: 80px;
|
|
|
345
351
|
}
|
|
346
352
|
}
|
|
347
353
|
|
|
354
|
+
&.-ds-interactive.-ds-draggable.-ds-drag {
|
|
355
|
+
@each $color, $value in $rich-list-item-background-colors {
|
|
356
|
+
&.-ds-background-#{$color} {
|
|
357
|
+
background-color: map-get($value, 'drag');
|
|
358
|
+
}
|
|
359
|
+
}
|
|
360
|
+
}
|
|
361
|
+
|
|
348
362
|
#{$root}__border {
|
|
349
363
|
@each $color, $value in $rich-list-item-border-colors {
|
|
350
364
|
&.-ds-border-#{$color} {
|
|
@@ -622,8 +636,10 @@ export default defineComponent({
|
|
|
622
636
|
this.type !== RICH_LIST_ITEM_TYPE.FLAT && {
|
|
623
637
|
[`-ds-elevation-${this.elevation}`]: true,
|
|
624
638
|
}),
|
|
625
|
-
'-ds-draggable': this.isDraggable
|
|
639
|
+
'-ds-draggable': this.isDraggable,
|
|
640
|
+
'-ds-draggable-without-handler': this.isDraggable && !this.hasDraggableHandler,
|
|
626
641
|
'-ds-has-media': this.hasMedia,
|
|
642
|
+
'-ds-drag': this.isDragging,
|
|
627
643
|
};
|
|
628
644
|
},
|
|
629
645
|
isHorizontal() {
|
|
@@ -663,6 +679,9 @@ export default defineComponent({
|
|
|
663
679
|
hasMedia() {
|
|
664
680
|
return !!this.$slots.media;
|
|
665
681
|
},
|
|
682
|
+
isDragging() {
|
|
683
|
+
return this.isDraggable && this.state === RICH_LIST_ITEM_STATE.DRAG;
|
|
684
|
+
},
|
|
666
685
|
},
|
|
667
686
|
});
|
|
668
687
|
</script>
|
package/package.json
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{d as y,t as M,c as o,f as l,h as s,a as n,g as f,n as i,u,s as p,b,r as C,o as t}from"./vue.esm-bundler-CzUSCRPq.js";import{D}from"./Checkbox-KYcZTLuT.js";import{D as V}from"./Divider-ClNbKvxH.js";import{a as $,I as v,c as U,b as z}from"./Icon-CQ850_cO.js";import{_ as R}from"./_plugin-vue_export-helper-DlAUqK2U.js";const r={DEFAULT:"default",FLAT:"flat"},c={DEFAULT:"default",LOADING:"loading"},m={SMALL:"small",MEDIUM:"medium"},E={DEFAULT:"default",PRIMARY:"primary",PRIMARY_WEAK:"primary-weak",NEUTRAL_HEAVY:"neutral-heavy",NEUTRAL_STRONG:"neutral-strong",NEUTRAL:"neutral",NEUTRAL_WEAK:"neutral-weak",NEUTRAL_GHOST:"neutral-ghost",DANGER:"danger",DANGER_WEAK:"danger-weak",FAIL:"fail",FAIL_WEAK:"fail-weak",WARNING:"warning",WARNING_WEAK:"warning-weak",SUCCESS:"success",SUCCESS_WEAK:"success-weak",INFO:"info",INFO_WEAK:"info-weak",ACCENT:"accent",ACCENT_WEAK:"accent-weak"},L={NEUTRAL:"neutral",NEUTRAL_WEAK:"neutral-weak"},B={SMALL:"small"},I={HORIZONTAL:"horizontal",VERTICAL:"vertical"},T=y({name:"RichListItem",components:{DsCheckbox:D,DsDivider:V,DsIcon:$},props:{type:{type:String,default:r.DEFAULT,validator(e){return Object.values(r).includes(e)}},layout:{type:String,default:I.HORIZONTAL,validator(e){return Object.values(I).includes(e)}},state:{type:String,default:c.DEFAULT,validator(e){return Object.values(c).includes(e)}},size:{type:String,default:m.MEDIUM,validator(e){return Object.values(m).includes(e)}},isInteractive:{type:Boolean,default:!0},isDimmed:{type:Boolean,default:!1},isDraggable:{type:Boolean,default:!0},icon:{type:Object,default:null,validator(e){return Object.values(v).includes(M(e))}},iconColor:{type:String,default:null,validator(e){return Object.values(U).includes(e)}},iconColorHex:{type:String,default:null},borderColor:{type:String,default:null,validator(e){return Object.values(E).includes(e)}},borderColorHex:{type:String,default:null},draggableIconClassName:{type:String,default:null},backgroundColor:{type:String,default:L.NEUTRAL,validator(e){return Object.values(L).includes(e)}},elevation:{type:String,default:null,validator(e){return Object.values(B).includes(e)}},hasDraggableHandler:{type:Boolean,default:!0},hasActionsSlotDivider:{type:Boolean,default:!0},isSelectable:{type:Boolean,default:!0},isSelected:{type:Boolean,default:!1}},emits:{"icon-click":()=>!0,click:()=>!0,"update:is-selected":e=>!0},data(){return{ICONS:Object.freeze(v),ICON_SIZES:Object.freeze(z),RICH_LIST_ITEM_TYPE:Object.freeze(r),RICH_LIST_ITEM_STATE:Object.freeze(c),RICH_LIST_ITEM_SIZE:Object.freeze(m)}},computed:{classList(){return{"-ds-default":this.type===r.DEFAULT,"-ds-flat":this.type===r.FLAT,"-ds-horizontal":this.isHorizontal,"-ds-verticalWithMedia":this.isVertical&&this.hasMedia,"-ds-vertical":this.isVertical,"-ds-loading":this.state===c.LOADING,"-ds-dimmed":this.isDimmed,"-ds-interactive":this.isInteractive,"-ds-small":this.size===m.SMALL,...this.backgroundColor&&this.type!==r.FLAT&&{[`-ds-background-${this.backgroundColor}`]:!0},...this.elevation&&this.type!==r.FLAT&&{[`-ds-elevation-${this.elevation}`]:!0},"-ds-draggable":this.isDraggable&&!this.hasDraggableHandler,"-ds-has-media":this.hasMedia}},isHorizontal(){return this.layout===I.HORIZONTAL},isVertical(){return this.layout===I.VERTICAL},iconColorClass(){if(!(!this.iconColor||this.iconColor&&this.iconColorHex))return`-ds-${this.iconColor}`},iconColorStyle(){if(!(!this.iconColor||!this.iconColorHex))return{color:this.iconColorHex}},borderColorClass(){if(!(!this.borderColor||this.borderColor&&this.borderColorHex))return`-ds-border-${this.borderColor}`},borderColorStyle(){if(!(!this.borderColor&&!this.borderColorHex))return{backgroundColor:this.borderColorHex}},hasMedia(){return!!this.$slots.media}}}),G={key:0,class:"ds-richListItem__mediaVertical -ds-dimmable"},j={class:"ds-richListItem__container -ds-dimmable"},F={key:0,class:"ds-richListItem__mediaHorizontal"},w={key:1,class:"ds-richListItem__dragAndDrop"},Z={key:2,class:"ds-richListItem__iconWrapper"},K={class:"ds-richListItem__content"},W={class:"ds-richListItem__rightContainer"},P={key:0,class:"ds-richListItem__metadata"},Y={key:2,class:"ds-richListItem__checkbox"},X={key:1,class:"ds-richListItem__metadata -ds-dimmable"};function q(e,a,A,O,k,N){const _=C("ds-icon"),h=C("ds-divider"),H=C("ds-checkbox");return t(),o("div",{class:i(["ds-richListItem",e.classList]),onClick:a[5]||(a[5]=d=>e.$emit("click",d))},[e.hasMedia&&e.isVertical?(t(),o("div",G,[l(e.$slots,"media",{},void 0,!0)])):s("",!0),n("div",j,[e.hasMedia&&e.isHorizontal?(t(),o("div",F,[l(e.$slots,"media",{},void 0,!0)])):s("",!0),e.isDraggable&&e.hasDraggableHandler?(t(),o("div",w,[f(_,{icon:e.ICONS.FA_BARS,class:i(["ds-richListItem__dragAndDropIcon",{[e.draggableIconClassName]:!!e.draggableIconClassName}]),size:e.size===e.RICH_LIST_ITEM_SIZE.SMALL?e.ICON_SIZES.XX_SMALL:e.ICON_SIZES.X_SMALL,onClick:a[0]||(a[0]=u(()=>{},["stop"]))},null,8,["icon","class","size"])])):s("",!0),e.icon?(t(),o("div",Z,[f(_,{icon:e.icon,class:i(["ds-richListItem__icon",e.iconColorClass]),size:e.size===e.RICH_LIST_ITEM_SIZE.SMALL?e.ICON_SIZES.XX_SMALL:e.ICON_SIZES.X_SMALL,style:p(e.iconColorStyle),onClick:a[1]||(a[1]=u(d=>e.$emit("icon-click"),["prevent"]))},null,8,["icon","size","class","style"])])):s("",!0),n("div",K,[l(e.$slots,"content",{},void 0,!0)]),n("div",W,[e.$slots.metadata&&e.isHorizontal?(t(),o("div",P,[l(e.$slots,"metadata",{},void 0,!0)])):s("",!0),e.$slots.actions?(t(),o("div",{key:1,class:"ds-richListItem__actionSlot",onClick:a[2]||(a[2]=u(()=>{},["stop"]))},[e.$slots.actions&&e.hasActionsSlotDivider&&e.isHorizontal?(t(),b(h,{key:0,"is-vertical":""})):s("",!0),l(e.$slots,"actions",{},void 0,!0)])):s("",!0),e.isSelectable?(t(),o("div",Y,[e.isHorizontal?(t(),b(h,{key:0,"is-vertical":""})):s("",!0),f(H,{"is-selected":e.isSelected,"onUpdate:isSelected":a[3]||(a[3]=d=>e.$emit("update:is-selected",d)),onClick:a[4]||(a[4]=u(()=>{},["stop"]))},null,8,["is-selected"])])):s("",!0)])]),e.$slots.metadata&&e.isVertical?(t(),o("div",X,[l(e.$slots,"metadata",{},void 0,!0)])):s("",!0),e.borderColorClass||e.borderColorStyle?(t(),o("div",{key:2,class:i(["ds-richListItem__border",e.borderColorClass]),style:p(e.borderColorStyle)},null,6)):s("",!0)],2)}const ie=R(T,[["render",q],["__scopeId","data-v-50869a1f"]]);T.__docgenInfo={displayName:"RichListItem",exportName:"default",description:"",tags:{},props:[{name:"type",type:{name:"RichListItemType"},defaultValue:{func:!1,value:"RICH_LIST_ITEM_TYPE.DEFAULT"}},{name:"layout",type:{name:"RichListItemLayout"},defaultValue:{func:!1,value:"RICH_LIST_ITEM_LAYOUT.HORIZONTAL"}},{name:"state",type:{name:"RichListItemState"},defaultValue:{func:!1,value:"RICH_LIST_ITEM_STATE.DEFAULT"}},{name:"size",type:{name:"RichListItemSize"},defaultValue:{func:!1,value:"RICH_LIST_ITEM_SIZE.MEDIUM"}},{name:"isInteractive",type:{name:"boolean"},defaultValue:{func:!1,value:"true"}},{name:"isDimmed",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"isDraggable",type:{name:"boolean"},defaultValue:{func:!1,value:"true"}},{name:"icon",type:{name:"IconItem"},defaultValue:{func:!1,value:"null"}},{name:"iconColor",type:{name:"IconColor"},defaultValue:{func:!1,value:"null"}},{name:"iconColorHex",type:{name:"string"},defaultValue:{func:!1,value:"null"}},{name:"borderColor",type:{name:"RichListItemBorderColor"},defaultValue:{func:!1,value:"null"}},{name:"borderColorHex",type:{name:"string"},defaultValue:{func:!1,value:"null"}},{name:"draggableIconClassName",type:{name:"string"},defaultValue:{func:!1,value:"null"}},{name:"backgroundColor",type:{name:"RichListItemBackgroundColor"},defaultValue:{func:!1,value:"RICH_LIST_ITEM_BACKGROUND_COLOR.NEUTRAL"}},{name:"elevation",type:{name:"RichListItemElevation"},defaultValue:{func:!1,value:"null"}},{name:"hasDraggableHandler",type:{name:"boolean"},defaultValue:{func:!1,value:"true"}},{name:"hasActionsSlotDivider",type:{name:"boolean"},defaultValue:{func:!1,value:"true"}},{name:"isSelectable",type:{name:"boolean"},defaultValue:{func:!1,value:"true"}},{name:"isSelected",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}}],events:[{name:"click"},{name:"icon-click"},{name:"update:is-selected"}],slots:[{name:"media"},{name:"content"},{name:"metadata"},{name:"actions"}],sourceFiles:["/home/runner/work/design-system/design-system/lib/js/components/RichList/RichListItem/RichListItem.vue"]};const J={...E},S={...L},g=y({name:"GroupRichListItem",props:{isExpanded:{type:Boolean,default:!1},borderColor:{type:String,default:null,validator(e){return Object.values(J).includes(e)}},borderColorHex:{type:String,default:null},backgroundColor:{type:String,default:S.NEUTRAL,validator(e){return Object.values(S).includes(e)}}},computed:{classList(){return{...this.backgroundColor&&{[`-ds-background-${this.backgroundColor}`]:!0}}},borderColorClass(){if(!(!this.borderColor||this.borderColor&&this.borderColorHex))return`-ds-border-${this.borderColor}`},borderColorStyle(){if(!(!this.borderColor||!this.borderColorHex))return{backgroundColor:this.borderColorHex}}}}),Q={class:"ds-groupRichListItem__wrapper"},x={class:"ds-groupRichListItem__parent"},ee={key:0,class:"ds-groupRichListItem__children"};function te(e,a,A,O,k,N){return t(),o("div",{class:i(["ds-groupRichListItem",e.classList])},[n("div",Q,[n("div",x,[l(e.$slots,"parent",{},void 0,!0)]),e.isExpanded?(t(),o("div",ee,[l(e.$slots,"children",{},void 0,!0)])):s("",!0)]),e.borderColorClass||e.borderColorStyle?(t(),o("div",{key:0,class:i(["ds-groupRichListItem__border",e.borderColorClass]),style:p(e.borderColorStyle)},null,6)):s("",!0)],2)}const ne=R(g,[["render",te],["__scopeId","data-v-46a9680f"]]);g.__docgenInfo={displayName:"GroupRichListItem",exportName:"default",description:"",tags:{},props:[{name:"isExpanded",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"borderColor",type:{name:"GroupRichListItemBorderColor"},defaultValue:{func:!1,value:"null"}},{name:"borderColorHex",type:{name:"string"},defaultValue:{func:!1,value:"null"}},{name:"backgroundColor",type:{name:"GroupRichListItemBackgroundColor"},defaultValue:{func:!1,value:"GROUP_RICH_LIST_ITEM_BACKGROUND_COLOR.NEUTRAL"}}],slots:[{name:"parent"},{name:"children"}],sourceFiles:["/home/runner/work/design-system/design-system/lib/js/components/RichList/GroupRichListItem/GroupRichListItem.vue"]};export{ne as G,r as R,m as a,I as b,c,E as d,L as e,B as f,S as g,J as h,ie as i};
|