yuyeon 0.0.26 → 0.0.27

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.
Files changed (92) hide show
  1. package/dist/style.css +1 -1
  2. package/dist/yuyeon.js +5840 -5496
  3. package/dist/yuyeon.umd.cjs +3 -3
  4. package/lib/components/alert/YAlert.mjs +41 -6
  5. package/lib/components/alert/YAlert.mjs.map +1 -1
  6. package/lib/components/alert/YAlert.scss +25 -23
  7. package/lib/components/button/YButton.mjs +79 -74
  8. package/lib/components/button/YButton.mjs.map +1 -1
  9. package/lib/components/checkbox/YCheckbox.mjs.map +1 -1
  10. package/lib/components/checkbox/YCheckbox.scss +48 -48
  11. package/lib/components/index.mjs +1 -0
  12. package/lib/components/index.mjs.map +1 -1
  13. package/lib/components/tab/YTab.mjs +57 -7
  14. package/lib/components/tab/YTab.mjs.map +1 -1
  15. package/lib/components/tab/YTab.scss +59 -0
  16. package/lib/components/tab/YTabs.mjs +50 -8
  17. package/lib/components/tab/YTabs.mjs.map +1 -1
  18. package/lib/components/tab/YTabs.scss +10 -0
  19. package/lib/components/tab/index.mjs +1 -0
  20. package/lib/components/tab/index.mjs.map +1 -1
  21. package/lib/components/tab/shared.mjs +2 -0
  22. package/lib/components/tab/shared.mjs.map +1 -0
  23. package/lib/components/tab/types.mjs +2 -0
  24. package/lib/components/tab/types.mjs.map +1 -0
  25. package/lib/components/table/YTable.scss +2 -1
  26. package/lib/components/toggle-button/YToggleButton.mjs +2 -0
  27. package/lib/components/toggle-button/YToggleButton.mjs.map +1 -0
  28. package/lib/components/toggle-button/index.mjs +2 -0
  29. package/lib/components/toggle-button/index.mjs.map +1 -0
  30. package/lib/components/tooltip/YTooltip.mjs +3 -3
  31. package/lib/components/tooltip/YTooltip.mjs.map +1 -1
  32. package/lib/components/tree-view/YTreeView.mjs +1 -1
  33. package/lib/components/tree-view/YTreeView.mjs.map +1 -1
  34. package/lib/components/tree-view/YTreeViewNode.mjs.map +1 -1
  35. package/lib/composables/choice.mjs +1 -1
  36. package/lib/composables/choice.mjs.map +1 -1
  37. package/lib/composables/communication.mjs +1 -1
  38. package/lib/composables/communication.mjs.map +1 -1
  39. package/lib/composables/index.mjs +2 -0
  40. package/lib/composables/index.mjs.map +1 -0
  41. package/lib/composables/theme/setting.mjs.map +1 -1
  42. package/lib/composables/vue-router.mjs +32 -0
  43. package/lib/composables/vue-router.mjs.map +1 -0
  44. package/lib/styles/_variables.scss +2 -0
  45. package/lib/styles/theme/dark.scss +11 -11
  46. package/lib/styles/theme/light.scss +11 -11
  47. package/lib/util/index.mjs +16 -0
  48. package/lib/util/index.mjs.map +1 -0
  49. package/lib/util/reactivity.mjs +5 -0
  50. package/lib/util/reactivity.mjs.map +1 -1
  51. package/lib/util/vue-component.mjs +24 -0
  52. package/lib/util/vue-component.mjs.map +1 -1
  53. package/package.json +11 -1
  54. package/types/components/button/YButton.d.ts +96 -42
  55. package/types/components/checkbox/YInputCheckbox.d.ts +1 -1
  56. package/types/components/dropdown/YDropdown.d.ts +3 -3
  57. package/types/components/field-input/YFieldInput.d.ts +26 -44
  58. package/types/components/index.d.ts +1 -0
  59. package/types/components/input/YInput.d.ts +16 -16
  60. package/types/components/layer/YLayer.d.ts +8 -8
  61. package/types/components/list/YList.d.ts +2 -2
  62. package/types/components/list/YListItem.d.ts +3 -3
  63. package/types/components/pagination/YPagination.d.ts +6 -6
  64. package/types/components/select/YSelect.d.ts +35 -53
  65. package/types/components/tab/YTab.d.ts +282 -7
  66. package/types/components/tab/YTabs.d.ts +111 -3
  67. package/types/components/tab/index.d.ts +1 -0
  68. package/types/components/tab/shared.d.ts +3 -0
  69. package/types/components/tab/types.d.ts +4 -0
  70. package/types/components/table/YDataTable.d.ts +7 -7
  71. package/types/components/table/YDataTableHead.d.ts +3 -3
  72. package/types/components/table/YDataTableRow.d.ts +3 -3
  73. package/types/components/table/YDataTableServer.d.ts +7 -7
  74. package/types/components/table/composibles/items.d.ts +1 -1
  75. package/types/components/table/composibles/selection.d.ts +1 -1
  76. package/types/components/table/composibles/sorting.d.ts +1 -1
  77. package/types/components/toggle-button/YToggleButton.d.ts +3 -0
  78. package/types/components/toggle-button/index.d.ts +1 -0
  79. package/types/components/tree-view/YTreeViewNode.d.ts +6 -6
  80. package/types/composables/choice.d.ts +107 -0
  81. package/types/composables/dimension.d.ts +6 -6
  82. package/types/composables/focus.d.ts +2 -2
  83. package/types/composables/list-items.d.ts +1 -1
  84. package/types/composables/theme/index.d.ts +1 -1
  85. package/types/composables/vue-router.d.ts +43 -0
  86. package/types/shims.d.ts +81 -77
  87. package/types/util/collection.d.ts +1 -0
  88. package/types/util/frame-scheduler.d.ts +7 -0
  89. package/types/util/index.d.ts +15 -0
  90. package/types/util/reactivity.d.ts +4 -0
  91. package/types/util/validation.d.ts +3 -0
  92. package/types/util/vue-component.d.ts +8 -4
@@ -1,5 +1,5 @@
1
1
  import { withDirectives as _withDirectives, resolveDirective as _resolveDirective, createVNode as _createVNode } from "vue";
2
- import { defineComponent, ref } from 'vue';
2
+ import { computed, defineComponent, ref } from 'vue';
3
3
  import { useRender } from "../../composables/component.mjs";
4
4
  import { toKebabCase } from "../../util/string.mjs";
5
5
  import { YPlate } from "../plate/index.mjs";
@@ -14,24 +14,59 @@ const YAlertPropOptions = {
14
14
  outlineColor: String
15
15
  };
16
16
 
17
- /**
18
- * # Component
17
+ /**
18
+ * # Component
19
19
  */
20
20
  export const YAlert = defineComponent({
21
21
  name: NAME,
22
22
  props: {
23
23
  ...YAlertPropOptions
24
24
  },
25
- setup(looseProps, _ref) {
25
+ setup(props, _ref) {
26
26
  let {
27
27
  slots
28
28
  } = _ref;
29
29
  const el$ = ref();
30
+ const variations = computed(() => {
31
+ const {
32
+ variation
33
+ } = props;
34
+ if (variation) {
35
+ return variation.split(',').map(value => {
36
+ return value.trim();
37
+ }).filter(v => !!v);
38
+ }
39
+ return [];
40
+ });
41
+ const cssVariables = computed(() => {
42
+ const ret = {};
43
+ if (props.color) {
44
+ ret['--y-alert-surface-color'] = props.color;
45
+ if (variations.value.includes('filled')) {
46
+ ret['--y-alert-surface-opacity'] = 1;
47
+ } else {
48
+ ret['--y-alert-text-color'] = props.color;
49
+ }
50
+ if (props.textColor) {
51
+ ret['--y-alert-text-color'] = props.textColor;
52
+ }
53
+ if (!props.outlineColor && !props.semantic) {
54
+ ret['--y-alert-outline-color'] = props.color;
55
+ }
56
+ }
57
+ if (props.outlineColor) {
58
+ ret['--y-alert-outline-color'] = props.outlineColor;
59
+ }
60
+ return ret;
61
+ });
30
62
  useRender(() => _withDirectives(_createVNode("div", {
31
63
  "ref": el$,
32
64
  "class": [KEBAB_NAME, {
33
- [`y-alert--${looseProps.semantic}`]: looseProps.semantic
34
- }]
65
+ [`y-alert--${props.semantic}`]: props.semantic,
66
+ 'y-alert--filled': variations.value.includes('filled'),
67
+ 'y-alert--outlined': variations.value.includes('outlined')
68
+ }],
69
+ "style": cssVariables.value
35
70
  }, [_createVNode(YPlate, null, null), slots.leading && _createVNode("div", {
36
71
  "class": ['y-alert__leading']
37
72
  }, [slots.leading()]), _createVNode("div", {
@@ -1 +1 @@
1
- {"version":3,"file":"YAlert.mjs","names":["defineComponent","ref","useRender","toKebabCase","YPlate","NAME","KEBAB_NAME","YAlertPropOptions","semantic","String","variation","color","textColor","outlineColor","YAlert","name","props","setup","looseProps","_ref","slots","el$","_withDirectives","_createVNode","leading","title","default","trailing","_resolveDirective"],"sources":["../../../src/components/alert/YAlert.tsx"],"sourcesContent":["import { PropType, defineComponent, ref } from 'vue';\n\nimport { useRender } from '../../composables/component';\nimport { toKebabCase } from '../../util/string';\nimport { YPlate } from '../plate';\n\nimport './YAlert.scss';\n\nconst NAME = 'YAlert';\nconst KEBAB_NAME = toKebabCase(NAME);\n\nconst YAlertPropOptions = {\n semantic: String as PropType<\n 'info' | 'warning' | 'success' | 'error' | string\n >,\n variation: String as PropType<'outlined' | 'filled' | string>,\n color: String as PropType<string>,\n textColor: String as PropType<string>,\n outlineColor: String as PropType<string>,\n};\n\n/**\n * # Component\n */\nexport const YAlert = defineComponent({\n name: NAME,\n props: {\n ...YAlertPropOptions,\n },\n setup(looseProps, { slots }) {\n const el$ = ref<HTMLElement>();\n\n useRender(() => (\n <div\n ref={el$}\n class={[\n KEBAB_NAME,\n { [`y-alert--${looseProps.semantic}`]: looseProps.semantic },\n ]}\n v-theme\n >\n <YPlate></YPlate>\n {slots.leading && (\n <div class={['y-alert__leading']}>{slots.leading()}</div>\n )}\n <div class={['y-alert__content']}>\n {slots.title && <div class={['y-alert__title']}>{slots.title()}</div>}\n {slots.default?.()}\n </div>\n {slots.trailing && (\n <div class={['y-alert__trailing']}>{slots.trailing()}</div>\n )}\n </div>\n ));\n },\n});\n\nexport type YAlert = InstanceType<typeof YAlert>;\n"],"mappings":";AAAA,SAAmBA,eAAe,EAAEC,GAAG,QAAQ,KAAK;AAAC,SAE5CC,SAAS;AAAA,SACTC,WAAW;AAAA,SACXC,MAAM;AAEf;AAEA,MAAMC,IAAI,GAAG,QAAQ;AACrB,MAAMC,UAAU,GAAGH,WAAW,CAACE,IAAI,CAAC;AAEpC,MAAME,iBAAiB,GAAG;EACxBC,QAAQ,EAAEC,MAET;EACDC,SAAS,EAAED,MAAkD;EAC7DE,KAAK,EAAEF,MAA0B;EACjCG,SAAS,EAAEH,MAA0B;EACrCI,YAAY,EAAEJ;AAChB,CAAC;;AAED;AACA;AACA;AACA,OAAO,MAAMK,MAAM,GAAGd,eAAe,CAAC;EACpCe,IAAI,EAAEV,IAAI;EACVW,KAAK,EAAE;IACL,GAAGT;EACL,CAAC;EACDU,KAAKA,CAACC,UAAU,EAAAC,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACzB,MAAME,GAAG,GAAGpB,GAAG,CAAc,CAAC;IAE9BC,SAAS,CAAC,MAAAoB,eAAA,CAAAC,YAAA;MAAA,OAEDF,GAAG;MAAA,SACD,CACLf,UAAU,EACV;QAAE,CAAE,YAAWY,UAAU,CAACV,QAAS,EAAC,GAAGU,UAAU,CAACV;MAAS,CAAC;IAC7D,IAAAe,YAAA,CAAAnB,MAAA,eAIAgB,KAAK,CAACI,OAAO,IAAAD,YAAA;MAAA,SACA,CAAC,kBAAkB;IAAC,IAAGH,KAAK,CAACI,OAAO,CAAC,CAAC,EACnD,EAAAD,YAAA;MAAA,SACW,CAAC,kBAAkB;IAAC,IAC7BH,KAAK,CAACK,KAAK,IAAAF,YAAA;MAAA,SAAgB,CAAC,gBAAgB;IAAC,IAAGH,KAAK,CAACK,KAAK,CAAC,CAAC,EAAO,EACpEL,KAAK,CAACM,OAAO,GAAG,CAAC,IAEnBN,KAAK,CAACO,QAAQ,IAAAJ,YAAA;MAAA,SACD,CAAC,mBAAmB;IAAC,IAAGH,KAAK,CAACO,QAAQ,CAAC,CAAC,EACrD,MAAAC,iBAAA,YAEJ,CAAC;EACJ;AACF,CAAC,CAAC"}
1
+ {"version":3,"file":"YAlert.mjs","names":["computed","defineComponent","ref","useRender","toKebabCase","YPlate","NAME","KEBAB_NAME","YAlertPropOptions","semantic","String","variation","color","textColor","outlineColor","YAlert","name","props","setup","_ref","slots","el$","variations","split","map","value","trim","filter","v","cssVariables","ret","includes","_withDirectives","_createVNode","leading","title","default","trailing","_resolveDirective"],"sources":["../../../src/components/alert/YAlert.tsx"],"sourcesContent":["import { PropType, computed, defineComponent, ref } from 'vue';\r\n\r\nimport { useRender } from '../../composables/component';\r\nimport { toKebabCase } from '../../util/string';\r\nimport { YPlate } from '../plate';\r\n\r\nimport './YAlert.scss';\r\n\r\nconst NAME = 'YAlert';\r\nconst KEBAB_NAME = toKebabCase(NAME);\r\n\r\nconst YAlertPropOptions = {\r\n semantic: String as PropType<\r\n 'info' | 'warning' | 'success' | 'error' | string\r\n >,\r\n variation: String as PropType<'outlined' | 'filled' | string>,\r\n color: String as PropType<string>,\r\n textColor: String as PropType<string>,\r\n outlineColor: String as PropType<string>,\r\n};\r\n\r\n/**\r\n * # Component\r\n */\r\nexport const YAlert = defineComponent({\r\n name: NAME,\r\n props: {\r\n ...YAlertPropOptions,\r\n },\r\n setup(props, { slots }) {\r\n const el$ = ref<HTMLElement>();\r\n\r\n const variations = computed(() => {\r\n const { variation } = props;\r\n if (variation) {\r\n return variation\r\n .split(',')\r\n .map((value) => {\r\n return value.trim();\r\n })\r\n .filter((v) => !!v);\r\n }\r\n return [];\r\n });\r\n\r\n const cssVariables = computed(() => {\r\n const ret: Record<string, string | number> = {};\r\n\r\n if (props.color) {\r\n ret['--y-alert-surface-color'] = props.color;\r\n if (variations.value.includes('filled')) {\r\n ret['--y-alert-surface-opacity'] = 1;\r\n } else {\r\n ret['--y-alert-text-color'] = props.color;\r\n }\r\n if (props.textColor) {\r\n ret['--y-alert-text-color'] = props.textColor;\r\n }\r\n if (!props.outlineColor && !props.semantic) {\r\n ret['--y-alert-outline-color'] = props.color;\r\n }\r\n }\r\n if (props.outlineColor) {\r\n ret['--y-alert-outline-color'] = props.outlineColor;\r\n }\r\n return ret;\r\n })\r\n\r\n useRender(() => (\r\n <div\r\n ref={el$}\r\n class={[\r\n KEBAB_NAME,\r\n {\r\n [`y-alert--${props.semantic}`]: props.semantic,\r\n 'y-alert--filled': variations.value.includes('filled'),\r\n 'y-alert--outlined': variations.value.includes('outlined'),\r\n },\r\n ]}\r\n style={cssVariables.value}\r\n v-theme\r\n >\r\n <YPlate></YPlate>\r\n {slots.leading && (\r\n <div class={['y-alert__leading']}>{slots.leading()}</div>\r\n )}\r\n <div class={['y-alert__content']}>\r\n {slots.title && <div class={['y-alert__title']}>{slots.title()}</div>}\r\n {slots.default?.()}\r\n </div>\r\n {slots.trailing && (\r\n <div class={['y-alert__trailing']}>{slots.trailing()}</div>\r\n )}\r\n </div>\r\n ));\r\n },\r\n});\r\n\r\nexport type YAlert = InstanceType<typeof YAlert>;\r\n"],"mappings":"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"}
@@ -22,10 +22,12 @@
22
22
  flex: 1 1;
23
23
  min-width: 0;
24
24
  padding-top: 2px;
25
+ position: relative;
25
26
  }
26
27
 
27
28
  &__leading, &__trailing {
28
29
  flex: 0 0 auto;
30
+ position: relative;
29
31
  }
30
32
 
31
33
  &__leading {
@@ -38,37 +40,37 @@
38
40
  }
39
41
 
40
42
  .y-plate {
41
- background: var(--y-alert-surface-color);
42
- opacity: var(--y-alert-surface-opacity);
43
+ &:before {
44
+ content: '';
45
+ position: absolute;
46
+ top: 0;
47
+ left: 0;
48
+ bottom: 0;
49
+ right: 0;
50
+ background: var(--y-alert-surface-color);
51
+ opacity: var(--y-alert-surface-opacity);
52
+ }
43
53
  }
44
54
 
45
- &--info {
46
- --y-alert-text-color: var(--y-theme-info);
47
- --y-alert-surface-color: var(--y-theme-info);
55
+ &--outlined {
56
+ .y-plate {
57
+ border: 1px solid var(--y-alert-outline-color);
58
+ }
48
59
  }
49
60
 
50
- &--success {
51
- --y-alert-text-color: var(--y-theme-success);
52
- --y-alert-surface-color: var(--y-theme-success);
53
- }
61
+ $semantics: ('info', 'success', 'warning', 'error');
54
62
 
55
- &--warning {
56
- --y-alert-text-color: var(--y-theme-warning);
57
- --y-alert-surface-color: var(--y-theme-warning);
63
+ @mixin defineSemantic($name) {
64
+ &--#{$name} {
65
+ --y-alert-text-color: var(--y-theme-#{$name});
66
+ --y-alert-surface-color: var(--y-theme-#{$name});
67
+ --y-alert-outline-color: var(--y-theme-#{$name});
68
+ }
58
69
  }
59
70
 
60
- &--error {
61
- --y-alert-text-color: var(--y-theme-error);
62
- --y-alert-surface-color: var(--y-theme-error);
71
+ @each $name in $semantics {
72
+ @include defineSemantic($name);
63
73
  }
64
74
 
65
- &--filled {
66
- --y-alert-surface-opacity: 1;
67
- }
68
75
 
69
- &--outlined {
70
- .y-plate {
71
- border: 1px solid var(--y-alert-outline-color);
72
- }
73
- }
74
76
  }
@@ -1,17 +1,27 @@
1
- import { defineComponent, h, withDirectives } from 'vue';
1
+ import { withDirectives as _withDirectives, resolveDirective as _resolveDirective, createVNode as _createVNode } from "vue";
2
+ import { computed, defineComponent, mergeProps } from 'vue';
3
+ import { pressChoiceItemPropsOptions, useChoiceItem } from "../../composables/choice.mjs";
4
+ import { useRender } from "../../composables/component.mjs";
5
+ import { pressVueRouterPropsOptions, useLink } from "../../composables/vue-router.mjs";
2
6
  import { PlateWave } from "../../directives/plate-wave/index.mjs";
3
7
  import { isColorValue } from "../../util/color/index.mjs";
4
- import { getSlot, propsFactory } from "../../util/vue-component.mjs";
8
+ import { propsFactory } from "../../util/vue-component.mjs";
5
9
  import { YSpinnerRing } from "../loading/YSpinnerRing.mjs";
6
- /**
7
- * Style
10
+ import { Y_TOGGLE_BUTTON_KEY } from "../toggle-button/index.mjs";
11
+ /**
12
+ * Style
8
13
  */
9
14
  import "./YButton.scss";
10
15
  const NAME = 'y-button';
11
16
  export const pressYButtonProps = propsFactory({
12
17
  loading: Boolean,
13
- disabled: {
14
- type: Boolean
18
+ active: {
19
+ type: Boolean,
20
+ default: undefined
21
+ },
22
+ injectSymbol: {
23
+ type: null,
24
+ default: Y_TOGGLE_BUTTON_KEY
15
25
  },
16
26
  //
17
27
  variation: {
@@ -31,9 +41,6 @@ export const pressYButtonProps = propsFactory({
31
41
  type: Boolean,
32
42
  default: false
33
43
  },
34
- text: {
35
- type: Boolean
36
- },
37
44
  //
38
45
  color: {
39
46
  type: String
@@ -41,108 +48,106 @@ export const pressYButtonProps = propsFactory({
41
48
  noWave: {
42
49
  type: Boolean,
43
50
  default: false
44
- }
51
+ },
52
+ ...pressVueRouterPropsOptions(),
53
+ ...pressChoiceItemPropsOptions()
45
54
  }, 'YButton');
46
55
  export const YButton = defineComponent({
47
56
  name: 'YButton',
48
57
  directives: {
49
58
  PlateWave
50
59
  },
51
- props: {
52
- ...pressYButtonProps()
60
+ props: pressYButtonProps(),
61
+ emits: {
62
+ 'choice:selected': choice => true
53
63
  },
54
- computed: {
55
- variations() {
64
+ setup(props, _ref) {
65
+ let {
66
+ attrs,
67
+ slots
68
+ } = _ref;
69
+ const choice = useChoiceItem(props, props.injectSymbol, false);
70
+ const link = useLink(props, attrs);
71
+ const isActive = computed(() => {
72
+ if (props.active !== undefined) {
73
+ return props.active;
74
+ }
75
+ if (link.isLink.value) {
76
+ return link.isActive?.value;
77
+ }
78
+ return choice?.isSelected.value;
79
+ });
80
+ const variations = computed(() => {
56
81
  const {
57
82
  variation
58
- } = this;
59
- if (variation) {
83
+ } = props;
84
+ if (typeof variation === 'string') {
60
85
  return variation.split(',').map(value => {
61
86
  return value.trim();
62
87
  });
63
88
  }
64
89
  return [];
65
- },
66
- //
67
- classes() {
90
+ });
91
+ const classes = computed(() => {
68
92
  const {
69
- variations,
70
93
  outlined,
71
94
  rounded,
72
95
  filled,
73
- text,
74
96
  small,
75
97
  icon
76
- } = this;
98
+ } = props;
77
99
  return {
78
- [`${NAME}--outlined`]: variations.includes('outlined') || outlined,
79
- [`${NAME}--rounded`]: variations.includes('rounded') || rounded,
80
- [`${NAME}--filled`]: variations.includes('filled') || filled,
81
- [`${NAME}--text`]: variations.includes('text') || text,
82
- [`${NAME}--small`]: variations.includes('small') || small,
83
- [`${NAME}--icon`]: variations.includes('icon') || icon,
84
- [`${NAME}--color`]: this.color,
85
- [`${NAME}--loading`]: this.loading,
86
- [`${NAME}--disabled`]: this.disabled
100
+ [`${NAME}--outlined`]: variations.value.includes('outlined') || outlined,
101
+ [`${NAME}--rounded`]: variations.value.includes('rounded') || rounded,
102
+ [`${NAME}--filled`]: variations.value.includes('filled') || filled,
103
+ [`${NAME}--text`]: variations.value.includes('text'),
104
+ [`${NAME}--small`]: variations.value.includes('small') || small,
105
+ [`${NAME}--icon`]: variations.value.includes('icon') || icon,
106
+ [`${NAME}--color`]: props.color,
107
+ [`${NAME}--loading`]: props.loading,
108
+ [`${NAME}--disabled`]: props.disabled,
109
+ [`${NAME}--active`]: isActive.value
87
110
  };
88
- },
89
- styles() {
111
+ });
112
+ const styles = computed(() => {
90
113
  let {
91
114
  color
92
- } = this;
115
+ } = props;
93
116
  let textColor;
94
117
  if (color && !isColorValue(color)) {
95
118
  color = `var(--y-theme-${color})`;
96
- textColor = `var(--y-theme-on-${this.color})`;
119
+ textColor = `var(--y-theme-on-${props.color})`;
97
120
  }
98
121
  return {
99
122
  [`--y-button__color`]: color,
100
123
  [`--y-button__text-color`]: textColor
101
124
  };
102
- }
103
- },
104
- methods: {
105
- createContent() {
106
- const defaultSlot = getSlot(this, 'default');
107
- const children = [];
108
- if (this.loading) {
109
- children.push(h(YSpinnerRing, {
110
- width: '24',
111
- height: '24'
112
- }));
113
- }
114
- children.push(defaultSlot);
115
- return h('span', {
116
- class: 'y-button__content'
117
- }, children);
118
- },
119
- getClasses() {
120
- return this.classes;
121
- },
125
+ });
126
+
122
127
  /// Events
123
- onClick(e) {
128
+ function onClick(e) {
124
129
  e.preventDefault();
125
- if (this.loading) {
130
+ if (props.loading) {
126
131
  return;
127
132
  }
133
+ link.navigate?.(e);
134
+ choice?.toggle();
128
135
  }
129
- },
130
- render() {
131
- const {
132
- onClick,
133
- styles,
134
- noWave,
135
- loading
136
- } = this;
137
- return withDirectives(h('button', {
138
- class: {
139
- ...this.getClasses(),
140
- [`${NAME}`]: true
141
- },
142
- style: styles,
143
- onClick,
144
- '^disabled': this.disabled ? true : undefined
145
- }, this.createContent()), [[PlateWave, !noWave && !loading]]);
136
+ useRender(() => {
137
+ return _withDirectives(_createVNode("button", {
138
+ "class": [`${NAME}`, choice?.selectedClass.value, {
139
+ ...classes.value
140
+ }],
141
+ "style": styles.value,
142
+ "onClick": onClick,
143
+ "disabled": props.disabled ? true : undefined
144
+ }, [_createVNode("span", {
145
+ "class": ['y-button__content']
146
+ }, [props.loading && _createVNode(YSpinnerRing, mergeProps({
147
+ width: '24',
148
+ height: '24'
149
+ }), null), slots.default?.()]), slots.append?.()]), [[_resolveDirective("plate-wave"), !props.noWave && !props.loading]]);
150
+ });
146
151
  }
147
152
  });
148
153
  //# sourceMappingURL=YButton.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"YButton.mjs","names":["defineComponent","h","withDirectives","PlateWave","isColorValue","getSlot","propsFactory","YSpinnerRing","NAME","pressYButtonProps","loading","Boolean","disabled","type","variation","String","small","icon","outlined","default","rounded","filled","text","color","noWave","YButton","name","directives","props","computed","variations","split","map","value","trim","classes","includes","styles","textColor","methods","createContent","defaultSlot","children","push","width","height","class","getClasses","onClick","e","preventDefault","render","style","undefined"],"sources":["../../../src/components/button/YButton.ts"],"sourcesContent":["import type { PropType, VNodeArrayChildren } from 'vue';\r\nimport { defineComponent, h, withDirectives } from 'vue';\r\n\r\nimport { PlateWave } from '../../directives/plate-wave';\r\nimport { isColorValue } from '../../util/color';\r\nimport { getSlot, propsFactory } from '../../util/vue-component';\r\nimport { YSpinnerRing } from '../loading/YSpinnerRing';\r\n\r\n/**\r\n * Style\r\n */\r\nimport './YButton.scss';\r\n\r\nconst NAME = 'y-button';\r\n\r\nexport const pressYButtonProps = propsFactory(\r\n {\r\n loading: Boolean,\r\n disabled: {\r\n type: Boolean,\r\n },\r\n //\r\n variation: {\r\n type: String as PropType<string>,\r\n },\r\n small: Boolean,\r\n icon: Boolean,\r\n outlined: {\r\n type: Boolean,\r\n default: false,\r\n },\r\n rounded: {\r\n type: Boolean,\r\n default: false,\r\n },\r\n filled: {\r\n type: Boolean,\r\n default: false,\r\n },\r\n text: {\r\n type: Boolean,\r\n },\r\n //\r\n color: {\r\n type: String,\r\n },\r\n noWave: {\r\n type: Boolean,\r\n default: false,\r\n },\r\n },\r\n 'YButton',\r\n);\r\n\r\nexport const YButton = defineComponent({\r\n name: 'YButton',\r\n directives: {\r\n PlateWave,\r\n },\r\n props: {\r\n ...pressYButtonProps(),\r\n },\r\n computed: {\r\n variations(): any[] {\r\n const { variation } = this;\r\n if (variation) {\r\n return variation.split(',').map((value) => {\r\n return value.trim();\r\n });\r\n }\r\n return [];\r\n },\r\n //\r\n classes() {\r\n const { variations, outlined, rounded, filled, text, small, icon } = this;\r\n return {\r\n [`${NAME}--outlined`]: variations.includes('outlined') || outlined,\r\n [`${NAME}--rounded`]: variations.includes('rounded') || rounded,\r\n [`${NAME}--filled`]: variations.includes('filled') || filled,\r\n [`${NAME}--text`]: variations.includes('text') || text,\r\n [`${NAME}--small`]: variations.includes('small') || small,\r\n [`${NAME}--icon`]: variations.includes('icon') || icon,\r\n [`${NAME}--color`]: this.color,\r\n [`${NAME}--loading`]: this.loading,\r\n [`${NAME}--disabled`]: this.disabled,\r\n };\r\n },\r\n styles(): Record<string, any> {\r\n let { color } = this;\r\n let textColor: string | undefined;\r\n if (color && !isColorValue(color)) {\r\n color = `var(--y-theme-${color})`;\r\n textColor = `var(--y-theme-on-${this.color})`;\r\n }\r\n return {\r\n [`--y-button__color`]: color,\r\n [`--y-button__text-color`]: textColor,\r\n };\r\n },\r\n },\r\n methods: {\r\n createContent() {\r\n const defaultSlot = getSlot(this, 'default');\r\n const children: VNodeArrayChildren = [];\r\n if (this.loading) {\r\n children.push(h(YSpinnerRing, { width: '24', height: '24' }));\r\n }\r\n children.push(defaultSlot);\r\n return h('span', { class: 'y-button__content' }, children);\r\n },\r\n getClasses() {\r\n return this.classes;\r\n },\r\n /// Events\r\n onClick(e: MouseEvent) {\r\n e.preventDefault();\r\n if (this.loading) {\r\n return;\r\n }\r\n },\r\n },\r\n render() {\r\n const { onClick, styles, noWave, loading } = this;\r\n return withDirectives(\r\n h(\r\n 'button',\r\n {\r\n class: {\r\n ...this.getClasses(),\r\n [`${NAME}`]: true,\r\n },\r\n style: styles,\r\n onClick,\r\n '^disabled': this.disabled ? true : undefined,\r\n },\r\n this.createContent(),\r\n ),\r\n [[PlateWave, !noWave && !loading]],\r\n );\r\n },\r\n});\r\n\r\nexport type YButton = InstanceType<typeof YButton>;\r\n"],"mappings":"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"}
1
+ {"version":3,"file":"YButton.mjs","names":["computed","defineComponent","mergeProps","pressChoiceItemPropsOptions","useChoiceItem","useRender","pressVueRouterPropsOptions","useLink","PlateWave","isColorValue","propsFactory","YSpinnerRing","Y_TOGGLE_BUTTON_KEY","NAME","pressYButtonProps","loading","Boolean","active","type","default","undefined","injectSymbol","variation","String","small","icon","outlined","rounded","filled","color","noWave","YButton","name","directives","props","emits","choice","setup","_ref","attrs","slots","link","isActive","isLink","value","isSelected","variations","split","map","trim","classes","includes","disabled","styles","textColor","onClick","e","preventDefault","navigate","toggle","_withDirectives","_createVNode","selectedClass","width","height","append","_resolveDirective"],"sources":["../../../src/components/button/YButton.tsx"],"sourcesContent":["import type { PropType } from 'vue';\nimport { computed, defineComponent, mergeProps } from 'vue';\n\nimport {\n pressChoiceItemPropsOptions,\n useChoiceItem,\n} from '../../composables/choice';\nimport { useRender } from '../../composables/component';\nimport {\n pressVueRouterPropsOptions,\n useLink,\n} from '../../composables/vue-router';\nimport { PlateWave } from '../../directives/plate-wave';\nimport { isColorValue } from '../../util/color';\nimport { propsFactory } from '../../util/vue-component';\nimport { YSpinnerRing } from '../loading/YSpinnerRing';\nimport { Y_TOGGLE_BUTTON_KEY } from '../toggle-button';\n\n/**\n * Style\n */\nimport './YButton.scss';\n\nconst NAME = 'y-button';\n\nexport const pressYButtonProps = propsFactory(\n {\n loading: Boolean,\n active: { type: Boolean, default: undefined },\n injectSymbol: { type: null, default: Y_TOGGLE_BUTTON_KEY },\n //\n variation: {\n type: String as PropType<string>,\n },\n small: Boolean,\n icon: Boolean,\n outlined: {\n type: Boolean,\n default: false,\n },\n rounded: {\n type: Boolean,\n default: false,\n },\n filled: {\n type: Boolean,\n default: false,\n },\n //\n color: {\n type: String,\n },\n noWave: {\n type: Boolean,\n default: false,\n },\n ...pressVueRouterPropsOptions(),\n ...pressChoiceItemPropsOptions(),\n },\n 'YButton',\n);\n\nexport const YButton = defineComponent({\n name: 'YButton',\n directives: {\n PlateWave,\n },\n props: pressYButtonProps(),\n emits: {\n 'choice:selected': (choice: { value: boolean }) => true,\n },\n setup(props, { attrs, slots }) {\n const choice = useChoiceItem(props, props.injectSymbol, false);\n const link = useLink(props, attrs);\n\n const isActive = computed(() => {\n if (props.active !== undefined) {\n return props.active;\n }\n if (link.isLink.value) {\n return link.isActive?.value;\n }\n return choice?.isSelected.value;\n });\n\n const variations = computed(() => {\n const { variation } = props;\n if (typeof variation === 'string') {\n return variation.split(',').map((value) => {\n return value.trim();\n });\n }\n return [];\n });\n\n const classes = computed(() => {\n const { outlined, rounded, filled, small, icon } = props;\n return {\n [`${NAME}--outlined`]:\n variations.value.includes('outlined') || outlined,\n [`${NAME}--rounded`]: variations.value.includes('rounded') || rounded,\n [`${NAME}--filled`]: variations.value.includes('filled') || filled,\n [`${NAME}--text`]: variations.value.includes('text'),\n [`${NAME}--small`]: variations.value.includes('small') || small,\n [`${NAME}--icon`]: variations.value.includes('icon') || icon,\n [`${NAME}--color`]: props.color,\n [`${NAME}--loading`]: props.loading,\n [`${NAME}--disabled`]: props.disabled,\n [`${NAME}--active`]: isActive.value,\n };\n });\n\n const styles = computed(() => {\n let { color } = props;\n let textColor: string | undefined;\n if (color && !isColorValue(color)) {\n color = `var(--y-theme-${color})`;\n textColor = `var(--y-theme-on-${props.color})`;\n }\n return {\n [`--y-button__color`]: color,\n [`--y-button__text-color`]: textColor,\n };\n });\n\n /// Events\n function onClick(e: MouseEvent) {\n e.preventDefault();\n if (props.loading) {\n return;\n }\n link.navigate?.(e);\n choice?.toggle();\n }\n\n useRender(() => {\n return (\n <button\n class={[\n `${NAME}`,\n choice?.selectedClass.value,\n {\n ...classes.value,\n },\n ]}\n style={styles.value}\n onClick={onClick}\n disabled={props.disabled ? true : undefined}\n v-plate-wave={!props.noWave && !props.loading}\n >\n <span class={['y-button__content']}>\n {props.loading && (\n <YSpinnerRing\n {...mergeProps({ width: '24', height: '24' })}\n ></YSpinnerRing>\n )}\n {slots.default?.()}\n </span>\n {slots.append?.()}\n </button>\n );\n });\n },\n});\n\nexport type YButton = InstanceType<typeof YButton>;\n"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"YCheckbox.mjs","names":["computed","defineComponent","ref","withModifiers","useRender","getUid","YInputCheckbox","name","components","model","prop","event","emits","props","inputValue","Boolean","Array","value","String","Number","Object","label","reverse","icon","type","color","default","disabled","readonly","setup","_ref","emit","slots","focused","innerValue","counterId","toString","inputId","onFocus","e","onBlur","onClick","inputByValue","isArray","found","find","inp","undefined","classes","computedIcon","isMultipleInput","multipleInputIndex","findIndex","v","_createVNode","leading","stopPropagation","_len","arguments","length","args","_key","_len2","_key2","trailing","created","watch","handler","immediate"],"sources":["../../../src/components/checkbox/YCheckbox.tsx"],"sourcesContent":["import { PropType, computed, defineComponent, ref, withModifiers } from 'vue';\n\nimport { useRender } from '../../composables/component';\nimport { getUid } from '../../util/vue-component';\n\nimport './YCheckbox.scss';\nimport YInputCheckbox from './YInputCheckbox';\n\nexport default defineComponent({\n name: 'YCheckbox',\n components: { YInputCheckbox },\n model: {\n prop: 'inputValue',\n event: 'change',\n },\n emits: ['focus', 'blur', 'change'],\n props: {\n inputValue: [Boolean, Array] as PropType<boolean | any[]>,\n value: [String, Number, Object] as PropType<any>,\n label: String as PropType<string>,\n reverse: Boolean as PropType<boolean>,\n icon: {\n type: [Object, String] as PropType<\n { checked?: string; unchecked?: string } | string\n >,\n },\n color: {\n type: String as PropType<string>,\n default: () => 'primary',\n },\n disabled: Boolean as PropType<boolean>,\n readonly: Boolean as PropType<boolean>,\n },\n setup(props, { emit, slots }) {\n const focused = ref(false);\n const innerValue = ref(false);\n const counterId = (getUid() ?? '').toString();\n const inputId = `input-${counterId}`;\n\n function onFocus(e: FocusEvent) {\n focused.value = true;\n emit('focus', e);\n }\n\n function onBlur(e: FocusEvent) {\n focused.value = false;\n emit('blur', e);\n }\n\n function onClick(e: Event, ...args: any[]) {\n if (props.disabled || props.readonly) return;\n innerValue.value = !innerValue.value;\n emit('change', innerValue.value, e);\n }\n\n function inputByValue() {\n if (Array.isArray(props.inputValue)) {\n const found = props.inputValue?.find((inp: any) => inp === props.value);\n\n if (found !== undefined) {\n innerValue.value = true;\n } else {\n innerValue.value = false;\n }\n } else if (typeof props.inputValue === 'boolean') {\n innerValue.value = props.inputValue;\n }\n }\n\n const classes = computed<Record<string, boolean>>(() => {\n const { reverse, disabled, readonly } = props;\n return {\n 'y-checkbox': true,\n 'y-checkbox--reverse': !!reverse,\n 'y-checkbox--focused': focused.value,\n 'y-checkbox--disabled': !!disabled,\n 'y-checkbox--readonly': !!readonly,\n };\n });\n\n const computedIcon = computed<string | undefined>(() => {\n if (typeof props.icon === 'string') {\n return props.icon;\n }\n return undefined;\n });\n\n const isMultipleInput = computed<boolean>(() => {\n return Array.isArray(props.inputValue);\n });\n\n const multipleInputIndex = computed<number>(() => {\n if (!isMultipleInput.value) {\n return -1;\n }\n return (props.inputValue as any[]).findIndex(\n (v: any) => v === props.value,\n );\n });\n\n useRender(() => {\n return (\n <div class={[{...classes.value}]}>\n {slots.leading?.()}\n <div class=\"y-checkbox__slot\">\n <YInputCheckbox\n onClick={(e: Event, ...args: any[]) => {\n e.stopPropagation();\n onClick(e, ...args);\n }}\n onFocus={onFocus}\n onBlur={onBlur}\n id={counterId}\n value={innerValue.value}\n icon={computedIcon.value}\n color={props.color}\n disabled={props.disabled}\n readonly={props.readonly}\n >\n {slots.icon && {\n icon: (...args: any[]) => slots.icon?.(...args),\n }}\n </YInputCheckbox>\n <label\n onClick={withModifiers(() => {}, ['stop'])}\n class=\"y-checkbox__label\"\n for={inputId}\n >\n {slots.label ? slots.label?.() : props.label}\n </label>\n </div>\n {slots.trailing?.()}\n </div>\n );\n });\n\n return {\n innerValue,\n inputByValue,\n };\n },\n created() {\n if (Array.isArray(this.inputValue)) {\n this.inputByValue();\n } else {\n this.innerValue = !!this.inputValue;\n }\n },\n watch: {\n inputValue: {\n handler() {\n this.inputByValue();\n },\n immediate: true,\n },\n },\n});\n"],"mappings":"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"}
1
+ {"version":3,"file":"YCheckbox.mjs","names":["computed","defineComponent","ref","withModifiers","useRender","getUid","YInputCheckbox","name","components","model","prop","event","emits","props","inputValue","Boolean","Array","value","String","Number","Object","label","reverse","icon","type","color","default","disabled","readonly","setup","_ref","emit","slots","focused","innerValue","counterId","toString","inputId","onFocus","e","onBlur","onClick","inputByValue","isArray","found","find","inp","undefined","classes","computedIcon","isMultipleInput","multipleInputIndex","findIndex","v","_createVNode","leading","stopPropagation","_len","arguments","length","args","_key","_len2","_key2","trailing","created","watch","handler","immediate"],"sources":["../../../src/components/checkbox/YCheckbox.tsx"],"sourcesContent":["import { PropType, computed, defineComponent, ref, withModifiers } from 'vue';\r\n\r\nimport { useRender } from '../../composables/component';\r\nimport { getUid } from '../../util/vue-component';\r\n\r\nimport './YCheckbox.scss';\r\nimport YInputCheckbox from './YInputCheckbox';\r\n\r\nexport default defineComponent({\r\n name: 'YCheckbox',\r\n components: { YInputCheckbox },\r\n model: {\r\n prop: 'inputValue',\r\n event: 'change',\r\n },\r\n emits: ['focus', 'blur', 'change'],\r\n props: {\r\n inputValue: [Boolean, Array] as PropType<boolean | any[]>,\r\n value: [String, Number, Object] as PropType<any>,\r\n label: String as PropType<string>,\r\n reverse: Boolean as PropType<boolean>,\r\n icon: {\r\n type: [Object, String] as PropType<\r\n { checked?: string; unchecked?: string } | string\r\n >,\r\n },\r\n color: {\r\n type: String as PropType<string>,\r\n default: () => 'primary',\r\n },\r\n disabled: Boolean as PropType<boolean>,\r\n readonly: Boolean as PropType<boolean>,\r\n },\r\n setup(props, { emit, slots }) {\r\n const focused = ref(false);\r\n const innerValue = ref(false);\r\n const counterId = (getUid() ?? '').toString();\r\n const inputId = `input-${counterId}`;\r\n\r\n function onFocus(e: FocusEvent) {\r\n focused.value = true;\r\n emit('focus', e);\r\n }\r\n\r\n function onBlur(e: FocusEvent) {\r\n focused.value = false;\r\n emit('blur', e);\r\n }\r\n\r\n function onClick(e: Event, ...args: any[]) {\r\n if (props.disabled || props.readonly) return;\r\n innerValue.value = !innerValue.value;\r\n emit('change', innerValue.value, e);\r\n }\r\n\r\n function inputByValue() {\r\n if (Array.isArray(props.inputValue)) {\r\n const found = props.inputValue?.find((inp: any) => inp === props.value);\r\n\r\n if (found !== undefined) {\r\n innerValue.value = true;\r\n } else {\r\n innerValue.value = false;\r\n }\r\n } else if (typeof props.inputValue === 'boolean') {\r\n innerValue.value = props.inputValue;\r\n }\r\n }\r\n\r\n const classes = computed<Record<string, boolean>>(() => {\r\n const { reverse, disabled, readonly } = props;\r\n return {\r\n 'y-checkbox': true,\r\n 'y-checkbox--reverse': !!reverse,\r\n 'y-checkbox--focused': focused.value,\r\n 'y-checkbox--disabled': !!disabled,\r\n 'y-checkbox--readonly': !!readonly,\r\n };\r\n });\r\n\r\n const computedIcon = computed<string | undefined>(() => {\r\n if (typeof props.icon === 'string') {\r\n return props.icon;\r\n }\r\n return undefined;\r\n });\r\n\r\n const isMultipleInput = computed<boolean>(() => {\r\n return Array.isArray(props.inputValue);\r\n });\r\n\r\n const multipleInputIndex = computed<number>(() => {\r\n if (!isMultipleInput.value) {\r\n return -1;\r\n }\r\n return (props.inputValue as any[]).findIndex(\r\n (v: any) => v === props.value,\r\n );\r\n });\r\n\r\n useRender(() => {\r\n return (\r\n <div class={[{...classes.value}]}>\r\n {slots.leading?.()}\r\n <div class=\"y-checkbox__slot\">\r\n <YInputCheckbox\r\n onClick={(e: Event, ...args: any[]) => {\r\n e.stopPropagation();\r\n onClick(e, ...args);\r\n }}\r\n onFocus={onFocus}\r\n onBlur={onBlur}\r\n id={counterId}\r\n value={innerValue.value}\r\n icon={computedIcon.value}\r\n color={props.color}\r\n disabled={props.disabled}\r\n readonly={props.readonly}\r\n >\r\n {slots.icon && {\r\n icon: (...args: any[]) => slots.icon?.(...args),\r\n }}\r\n </YInputCheckbox>\r\n <label\r\n onClick={withModifiers(() => {}, ['stop'])}\r\n class=\"y-checkbox__label\"\r\n for={inputId}\r\n >\r\n {slots.label ? slots.label?.() : props.label}\r\n </label>\r\n </div>\r\n {slots.trailing?.()}\r\n </div>\r\n );\r\n });\r\n\r\n return {\r\n innerValue,\r\n inputByValue,\r\n };\r\n },\r\n created() {\r\n if (Array.isArray(this.inputValue)) {\r\n this.inputByValue();\r\n } else {\r\n this.innerValue = !!this.inputValue;\r\n }\r\n },\r\n watch: {\r\n inputValue: {\r\n handler() {\r\n this.inputByValue();\r\n },\r\n immediate: true,\r\n },\r\n },\r\n});\r\n"],"mappings":"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"}
@@ -1,48 +1,48 @@
1
- .y-checkbox {
2
- display: flex;
3
- align-items: center;
4
-
5
- &__slot {
6
- display: flex;
7
- flex-direction: row;
8
- align-items: center;
9
- }
10
-
11
- .y-checkbox__label {
12
- cursor: pointer;
13
- font-weight: 400;
14
- color: var(--y-theme-on-surface-variant);
15
- font-size: 14px;
16
- }
17
-
18
- &--reverse .y-checkbox__slot {
19
- flex-direction: row-reverse;
20
- }
21
-
22
- &:not(&--reverse) .y-input--checkbox {
23
- margin-right: 8px;
24
- }
25
-
26
- .y-input--checkbox {
27
- cursor: pointer;
28
- }
29
-
30
- &--reverse .y-input--checkbox {
31
- margin-left: 8px;
32
- }
33
-
34
- &--readonly,
35
- &--disabled {
36
- .y-checkbox__label,
37
- .y-input--checkbox {
38
- cursor: default;
39
- }
40
- }
41
-
42
- &--disabled {
43
- .y-checkbox__slot {
44
- filter: grayscale(1);
45
- opacity: 0.4;
46
- }
47
- }
48
- }
1
+ .y-checkbox {
2
+ display: flex;
3
+ align-items: center;
4
+
5
+ &__slot {
6
+ display: flex;
7
+ flex-direction: row;
8
+ align-items: center;
9
+ }
10
+
11
+ .y-checkbox__label {
12
+ cursor: pointer;
13
+ font-weight: 400;
14
+ color: var(--y-theme-on-surface-variant);
15
+ font-size: 14px;
16
+ }
17
+
18
+ &--reverse .y-checkbox__slot {
19
+ flex-direction: row-reverse;
20
+ }
21
+
22
+ &:not(&--reverse) .y-input--checkbox {
23
+ margin-right: 8px;
24
+ }
25
+
26
+ .y-input--checkbox {
27
+ cursor: pointer;
28
+ }
29
+
30
+ &--reverse .y-input--checkbox {
31
+ margin-left: 8px;
32
+ }
33
+
34
+ &--readonly,
35
+ &--disabled {
36
+ .y-checkbox__label,
37
+ .y-input--checkbox {
38
+ cursor: default;
39
+ }
40
+ }
41
+
42
+ &--disabled {
43
+ .y-checkbox__slot {
44
+ filter: grayscale(1);
45
+ opacity: 0.4;
46
+ }
47
+ }
48
+ }
@@ -23,5 +23,6 @@ export * from "./pagination/index.mjs";
23
23
  export * from "./loading/index.mjs";
24
24
  export * from "./dropdown/index.mjs";
25
25
  export * from "./select/index.mjs";
26
+ export * from "./tab/index.mjs";
26
27
  export * from "./alert/index.mjs";
27
28
  //# sourceMappingURL=index.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.mjs","names":[],"sources":["../../src/components/index.ts"],"sourcesContent":["export * from './app';\r\nexport * from './button';\r\nexport * from './input';\r\nexport * from './field-input';\r\nexport * from './form';\r\nexport * from './progress-bar';\r\nexport * from './card';\r\nexport * from './chip';\r\nexport * from './switch';\r\nexport * from './layer';\r\nexport * from './dialog';\r\nexport * from './snackbar';\r\nexport * from './tooltip';\r\nexport * from './transitions';\r\nexport * from './panel';\r\nexport * from './tree-view';\r\nexport * from './list';\r\nexport * from './icons';\r\nexport * from './table';\r\nexport * from './menu';\r\nexport * from './checkbox';\r\nexport * from './pagination';\r\nexport * from './loading';\r\nexport * from './dropdown';\r\nexport * from './select';\r\nexport * from './alert';\r\n"],"mappings":""}
1
+ {"version":3,"file":"index.mjs","names":[],"sources":["../../src/components/index.ts"],"sourcesContent":["export * from './app';\r\nexport * from './button';\r\nexport * from './input';\r\nexport * from './field-input';\r\nexport * from './form';\r\nexport * from './progress-bar';\r\nexport * from './card';\r\nexport * from './chip';\r\nexport * from './switch';\r\nexport * from './layer';\r\nexport * from './dialog';\r\nexport * from './snackbar';\r\nexport * from './tooltip';\r\nexport * from './transitions';\r\nexport * from './panel';\r\nexport * from './tree-view';\r\nexport * from './list';\r\nexport * from './icons';\r\nexport * from './table';\r\nexport * from './menu';\r\nexport * from './checkbox';\r\nexport * from './pagination';\r\nexport * from './loading';\r\nexport * from './dropdown';\r\nexport * from './select';\r\nexport * from './tab';\r\nexport * from './alert';\r\n"],"mappings":""}