@sellmate/design-system 0.0.17 → 0.0.18

package/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@sellmate/design-system",
- "version": "0.0.17",
+ "version": "0.0.18",
  "description": "Sellmate Design System - Web Components Library built with Stencil",
  "keywords": [
   "web-components",
@@ -90,5 +90,5 @@
   "@stencil/react-output-target": "^1.2.0",
   "@stencil/vue-output-target": "^0.11.8"
  },
- "gitHead": "3f24d3ff9d491887f7fbd3dc2619eff37c706861"
+ "gitHead": "73ed23ebe16ac99135bdb4b3075a3c9d18ff7988"
 }

package/dist/components/p-CjFMRk1X.js.map

@@ -1 +0,0 @@
-{"file":"p-CjFMRk1X.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-select-multiple-group/sd-select-option-group/sd-select-option-group.scss?tag=sd-select-option-group","src/components/sd-select-multiple-group/sd-select-option-group/sd-select-option-group.tsx"],"sourcesContent":["@import 'global';\r\n\r\n:host {\r\n display: block;\r\n height: fit-content;\r\n}\r\n\r\n.sd-select__option-group {\r\n display: flex;\r\n padding: 4px 12px;\r\n padding-left: 28px;\r\n font-size: 12px;\r\n line-height: 20px;\r\n\r\n &.sd-select__option-group--group,\r\n &.sd-select__option-group--subgroup {\r\n  &:not(.sd-select__option-group--use-checkbox) {\r\n   cursor: default;\r\n  }\r\n }\r\n\r\n &.sd-select__option-group--group {\r\n  padding-left: 12px;\r\n  background-color: $brilliantblue_05 !important;\r\n  color: $grey_90 !important;\r\n  font-weight: 700;\r\n }\r\n\r\n &.sd-select__option-group--subgroup {\r\n  padding-left: 20px;\r\n  background-color: $grey_05 !important;\r\n  color: $grey_90 !important;\r\n  font-weight: 500;\r\n }\r\n\r\n &__checkbox-wrapper {\r\n  display: flex;\r\n  width: 100%;\r\n  column-gap: 8px;\r\n  align-items: center;\r\n  overflow: hidden;\r\n  white-space: nowrap;\r\n  text-overflow: ellipsis;\r\n }\r\n\r\n &--focused {\r\n  background-color: $brilliantblue_20;\r\n }\r\n\r\n &--selected,\r\n &--focused {\r\n  &:not(:hover):not(.sd-select__option-group--use-checkbox) {\r\n   color: $brilliantblue_75;\r\n   font-weight: 700;\r\n  }\r\n }\r\n\r\n &--disabled {\r\n  color: $grey_55;\r\n  cursor: not-allowed;\r\n }\r\n\r\n &:hover {\r\n  &:not(.sd-select__option-group--disabled) {\r\n   background-color: $brilliantblue_75;\r\n   color: white;\r\n  }\r\n }\r\n}\r\n","import {\r\n Component,\r\n Element,\r\n Event,\r\n EventEmitter,\r\n h,\r\n Host,\r\n Method,\r\n Prop,\r\n State,\r\n} from '@stencil/core';\r\nimport { SelectOptionGroup } from '../../sd-select/sd-select';\r\n\r\n@Component({\r\n tag: 'sd-select-option-group',\r\n styleUrl: 'sd-select-option-group.scss',\r\n})\r\nexport class SdSelectOptionGroup {\r\n @Element() el!: HTMLElement;\r\n\r\n @Prop() option!: SelectOptionGroup;\r\n @Prop() index!: number;\r\n @Prop() isSelected: boolean | null = false;\r\n @Prop() isFocused: boolean = false;\r\n @Prop() optionStyle?: { [key: string]: string };\r\n @Prop() disabled: boolean = false;\r\n @Prop() useCheckbox: boolean = false;\r\n\r\n @State() isHovered: boolean = false;\r\n\r\n @Method()\r\n async isDisabled(): Promise<boolean> {\r\n  return !!this.option.disabled || this.option.type === 'group' || this.option.type === 'subgroup';\r\n }\r\n\r\n @Event() optionClick!: EventEmitter<{\r\n  option: SelectOptionGroup;\r\n  isSelected: boolean | null;\r\n  index: number;\r\n  event: MouseEvent;\r\n }>;\r\n\r\n private handleClick = (\r\n  option: SelectOptionGroup,\r\n  isSelected: boolean | null,\r\n  event: MouseEvent,\r\n ) => {\r\n  event.stopPropagation();\r\n\r\n  if (option.type === 'group' || option.type === 'subgroup') {\r\n   this.optionClick.emit({\r\n    option: this.option,\r\n    isSelected,\r\n    index: this.index,\r\n    event,\r\n   });\r\n   return;\r\n  }\r\n\r\n  if (!this.option.disabled && !this.disabled) {\r\n   this.optionClick.emit({\r\n    option: this.option,\r\n    isSelected,\r\n    index: this.index,\r\n    event,\r\n   });\r\n  }\r\n };\r\n\r\n render() {\r\n  return (\r\n   <Host>\r\n    <div\r\n     class={{\r\n      'sd-select__option-group': true,\r\n      'sd-select__option-group--selected': !!this.isSelected,\r\n      'sd-select__option-group--disabled': !!this.option.disabled,\r\n      'sd-select__option-group--focused': this.isFocused,\r\n      'sd-select__option-group--use-checkbox': this.useCheckbox,\r\n      'sd-select__option-group--group': this.option.type === 'group',\r\n      'sd-select__option-group--subgroup': this.option.type === 'subgroup',\r\n      'sd-select__option-group--item': this.option.type === 'item',\r\n     }}\r\n     onMouseEnter={() => (this.isHovered = true)}\r\n     onMouseLeave={() => (this.isHovered = false)}\r\n     style={this.optionStyle}\r\n     data-index={this.index}\r\n     onClick={event => this.handleClick(this.option, this.isSelected, event)}\r\n    >\r\n     {this.useCheckbox ? (\r\n      <div class=\"sd-select__option-group__checkbox-wrapper\">\r\n       <sd-checkbox\r\n        checked={this.isSelected}\r\n        disabled={this.option.disabled}\r\n        // checkboxStyle={\r\n        //  !this.isSelected\r\n        //   ? { borderColor: '#888' }\r\n        //   : this.isHovered\r\n        //     ? { borderColor: 'white' }\r\n        //     : { borderColor: '#0075ff' }\r\n        // }\r\n        onClick={e => {\r\n         e.preventDefault();\r\n         this.handleClick(this.option, this.isSelected, e);\r\n        }}\r\n       ></sd-checkbox>\r\n       <span class=\"sd-select__option-group-label\">{this.option.label}</span>\r\n      </div>\r\n     ) : (\r\n      this.option.label\r\n     )}\r\n    </div>\r\n   </Host>\r\n  );\r\n }\r\n}\r\n"],"version":3}

package/dist/components/p-Ctp8Jcfa.js.map

@@ -1 +0,0 @@
-{"file":"p-Ctp8Jcfa.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-checkbox/sd-checkbox.scss?tag=sd-checkbox","src/components/sd-checkbox/sd-checkbox.tsx"],"sourcesContent":["@import '../../styles/global.scss';\r\n\r\n:host {\r\n display: inline-block;\r\n height: fit-content;\r\n line-height: 0;\r\n}\r\n\r\n.sd-checkbox {\r\n cursor: pointer;\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 8px;\r\n height: 20px;\r\n max-height: 20px;\r\n\r\n > input {\r\n  display: none;\r\n }\r\n\r\n &:hover {\r\n  &.sd-checkbox--checked,\r\n  &.sd-checkbox--indeterminate {\r\n   .sd-checkbox__bg {\r\n    border-color: 1px solid $brilliantblue_80;\r\n    background: $brilliantblue_80;\r\n   }\r\n  }\r\n\r\n  &.sd-checkbox--unchecked {\r\n   .sd-checkbox__bg {\r\n    border: 1px solid $brilliantblue_75;\r\n    background: $brilliantblue_25;\r\n   }\r\n  }\r\n\r\n  &.sd-checkbox--disabled {\r\n   .sd-checkbox__bg {\r\n    border: 1px solid transparent;\r\n    background: $grey_20;\r\n   }\r\n  }\r\n }\r\n\r\n &__bg {\r\n  width: 16px;\r\n  height: 16px;\r\n  border-radius: 2px;\r\n  border: 1px solid $grey_65;\r\n  box-sizing: border-box;\r\n  display: inline-flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  overflow: hidden;\r\n  line-height: 0;\r\n }\r\n\r\n &__label {\r\n  font-size: 12px;\r\n  color: $grey_90;\r\n  line-height: 20px;\r\n }\r\n\r\n &--checked,\r\n &--indeterminate {\r\n  &.sd-checkbox--disabled {\r\n   .sd-checkbox__bg {\r\n    background: $grey_20;\r\n    border: 1px solid $grey_45 !important;\r\n   }\r\n  }\r\n\r\n  .sd-checkbox__bg {\r\n   border: 1px solid $brilliantblue_75;\r\n   background: $brilliantblue_75;\r\n  }\r\n }\r\n\r\n &--unchecked {\r\n  .sd-checkbox__bg {\r\n   background: white;\r\n  }\r\n }\r\n\r\n &--disabled {\r\n  cursor: not-allowed;\r\n  .sd-checkbox__bg {\r\n   background: $grey_20;\r\n   border: 1px solid $grey_45 !important;\r\n  }\r\n }\r\n}\r\n","import {\r\n Component,\r\n Prop,\r\n h,\r\n Element,\r\n Event,\r\n EventEmitter,\r\n State,\r\n Watch,\r\n Host,\r\n} from '@stencil/core';\r\n\r\nexport type CheckedType = boolean | any[] | null;\r\n\r\n@Component({\r\n tag: 'sd-checkbox',\r\n styleUrl: 'sd-checkbox.scss',\r\n})\r\nexport class SdCheckbox {\r\n @Element() el!: HTMLElement;\r\n\r\n /** 현재 선택 상태 또는 배열 형태의 값 */\r\n @Prop() checked!: CheckedType;\r\n\r\n /** 배열 모드에서의 개별 값 */\r\n @Prop() val?: any;\r\n\r\n /** 비활성화 여부 */\r\n @Prop() disabled: boolean = false;\r\n\r\n /** 표시할 라벨 텍스트 */\r\n @Prop() label: string = '';\r\n\r\n /** 내부 체크 상태 */\r\n @State() private isChecked: boolean | null = false;\r\n\r\n /** 값 변경 이벤트 */\r\n @Event() sdChange!: EventEmitter<CheckedType>;\r\n\r\n componentWillLoad() {\r\n  this.updateCheckedState(this.checked);\r\n }\r\n\r\n componentWillRender() {\r\n  this.updateCheckedState(this.checked);\r\n }\r\n\r\n @Watch('checked')\r\n watchValueHandler(newValue: CheckedType) {\r\n  this.updateCheckedState(newValue);\r\n }\r\n\r\n private get checkboxClasses(): string {\r\n  const classes = [\r\n   'sd-checkbox',\r\n   `sd-checkbox--${this.isChecked ? 'checked' : this.isChecked === null ? 'indeterminate' : 'unchecked'}`,\r\n  ];\r\n\r\n  if (this.disabled) {\r\n   classes.push('sd-checkbox--disabled');\r\n  }\r\n\r\n  return classes.join(' ');\r\n }\r\n\r\n private updateCheckedState(value: CheckedType) {\r\n  if (value === null) {\r\n   this.isChecked = null;\r\n  } else if (typeof value === 'boolean') {\r\n   this.isChecked = value;\r\n  } else if (Array.isArray(value)) {\r\n   this.isChecked = this.val !== undefined && value.includes(this.val);\r\n  } else {\r\n   this.isChecked = false;\r\n  }\r\n }\r\n\r\n private handleChange = () => {\r\n  if (this.disabled) return;\r\n\r\n  let newValue: CheckedType;\r\n\r\n  if (typeof this.checked === 'boolean') {\r\n   newValue = !this.checked;\r\n  } else if (Array.isArray(this.checked)) {\r\n   if (this.val === undefined) {\r\n    console.warn('A \"val\" property is required when using an array for the \"value\" property.');\r\n   }\r\n\r\n   const valueSet = new Set(this.checked);\r\n   valueSet.has(this.val) ? valueSet.delete(this.val) : valueSet.add(this.val);\r\n   newValue = Array.from(valueSet);\r\n  } else {\r\n   newValue = !this.isChecked;\r\n  }\r\n\r\n  this.sdChange.emit(newValue);\r\n };\r\n\r\n render() {\r\n  return (\r\n   <Host>\r\n    <label\r\n     aria-checked={this.isChecked === null ? 'mixed' : this.isChecked.toString()}\r\n     aria-disabled={this.disabled.toString()}\r\n     role=\"checkbox\"\r\n     aria-label={this.label || 'checkbox'}\r\n     class={this.checkboxClasses}\r\n    >\r\n     <input\r\n      type=\"checkbox\"\r\n      value={this.val}\r\n      checked={!!this.isChecked}\r\n      disabled={this.disabled}\r\n      onChange={this.handleChange}\r\n      name={this.label || 'checkbox'}\r\n     />\r\n     <div class=\"sd-checkbox__bg\">\r\n      {this.isChecked !== false ? (\r\n       <sd-icon\r\n        name={this.isChecked === true ? 'check' : 'minus'}\r\n        size={12}\r\n        color={this.disabled ? '#888888' : 'white'}\r\n       />\r\n      ) : null}\r\n     </div>\r\n     {this.label && <span class=\"sd-checkbox__label\">{this.label}</span>}\r\n    </label>\r\n   </Host>\r\n  );\r\n }\r\n}\r\n"],"version":3}