@dative-gpi/foundation-shared-components 0.0.6 → 0.0.7

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 (2) hide show
  1. package/components/FSButton.vue +170 -164
  2. package/package.json +4 -4
package/components/FSButton.vue CHANGED
@@ -1,42 +1,42 @@
1
1
  <template>
2
- <v-btn
3
- v-if="!['icon'].includes($props.variant)"
4
- :ripple="false"
5
- :style="style"
6
- :class="classes"
7
- @click="onClick"
8
- v-bind="$attrs"
9
- >
10
- <FSRow :wrap="false">
11
- <slot name="prepend" v-bind="{ color, colors }">
12
- <FSIcon v-if="$props.prependIcon" size="m">
13
- {{ $props.prependIcon }}
14
- </FSIcon>
15
- </slot>
16
- <slot name="default" v-bind="{ color, colors }">
17
- <FSSpan v-if="$props.label" font="text-body">
18
- {{ $props.label }}
19
- </FSSpan>
20
- </slot>
21
- <slot name="append" v-bind="{ color, colors }">
22
- <FSIcon v-if="$props.appendIcon" size="m">
23
- {{ $props.appendIcon }}
24
- </FSIcon>
25
- </slot>
26
- </FSRow>
27
- </v-btn>
28
- <FSRow
29
- v-else-if="$props.icon"
30
- width="hug"
31
- :style="style"
32
- :class="classes"
33
- @click="onClick"
34
- v-bind="$attrs"
35
- >
36
- <FSIcon size="checkbox">
37
- {{ $props.icon }}
2
+ <v-btn
3
+ v-if="!['icon'].includes($props.variant!)"
4
+ :ripple="false"
5
+ :style="style"
6
+ :class="classes"
7
+ @click="onClick"
8
+ v-bind="$attrs"
9
+ >
10
+ <FSRow :wrap="false">
11
+ <slot name="prepend" v-bind="{ color, colors }">
12
+ <FSIcon v-if="$props.prependIcon" size="m">
13
+ {{ $props.prependIcon }}
38
14
  </FSIcon>
15
+ </slot>
16
+ <slot name="default" v-bind="{ color, colors }">
17
+ <FSSpan v-if="$props.label" font="text-body">
18
+ {{ $props.label }}
19
+ </FSSpan>
20
+ </slot>
21
+ <slot name="append" v-bind="{ color, colors }">
22
+ <FSIcon v-if="$props.appendIcon" size="m">
23
+ {{ $props.appendIcon }}
24
+ </FSIcon>
25
+ </slot>
39
26
  </FSRow>
27
+ </v-btn>
28
+ <FSRow
29
+ v-else-if="$props.icon"
30
+ width="hug"
31
+ :style="style"
32
+ :class="classes"
33
+ @click="onClick"
34
+ v-bind="$attrs"
35
+ >
36
+ <FSIcon size="checkbox">
37
+ {{ $props.icon }}
38
+ </FSIcon>
39
+ </FSRow>
40
40
  </template>
41
41
 
42
42
  <script lang="ts">
@@ -50,141 +50,147 @@ import FSIcon from "./FSIcon.vue";
50
50
  import FSRow from "./FSRow.vue";
51
51
 
52
52
  export default defineComponent({
53
- name: "FSButton",
54
- components: {
55
- FSSpan,
56
- FSIcon,
57
- FSRow
53
+ name: "FSButton",
54
+ components: {
55
+ FSSpan,
56
+ FSIcon,
57
+ FSRow,
58
+ },
59
+ props: {
60
+ prependIcon: {
61
+ type: String,
62
+ required: false,
63
+ default: null,
58
64
  },
59
- props: {
60
- prependIcon: {
61
- type: String,
62
- required: false,
63
- default: null
64
- },
65
- label: {
66
- type: String,
67
- required: false,
68
- default: null
69
- },
70
- appendIcon: {
71
- type: String,
72
- required: false,
73
- default: null
74
- },
75
- icon: {
76
- type: String,
77
- required: false,
78
- default: null
79
- },
80
- variant: {
81
- type: String as PropType<"standard" | "full" | "icon">,
82
- required: false,
83
- default: "standard"
84
- },
85
- color: {
86
- type: String as PropType<ColorBase>,
87
- required: false,
88
- default: ColorBase.Dark
89
- },
90
- editable: {
91
- type: Boolean,
92
- required: false,
93
- default: true
94
- }
65
+ label: {
66
+ type: String,
67
+ required: false,
68
+ default: null,
95
69
  },
96
- emts: ["click"],
97
- setup(props, { emit }) {
98
- const { label, variant, color, editable } = toRefs(props);
99
-
100
- const textColors = useColors().getContrasts(color.value);
101
- const colors = useColors().getColors(color.value);
102
- const slots = useSlots();
70
+ appendIcon: {
71
+ type: String,
72
+ required: false,
73
+ default: null,
74
+ },
75
+ icon: {
76
+ type: String,
77
+ required: false,
78
+ default: null,
79
+ },
80
+ variant: {
81
+ type: String as PropType<"standard" | "full" | "icon">,
82
+ required: false,
83
+ default: "standard",
84
+ },
85
+ color: {
86
+ type: String as PropType<ColorBase>,
87
+ required: false,
88
+ default: ColorBase.Dark,
89
+ },
90
+ editable: {
91
+ type: Boolean,
92
+ required: false,
93
+ default: true,
94
+ },
95
+ },
96
+ emts: ["click"],
97
+ setup(props, { emit }) {
98
+ const { label, variant, color, editable } = toRefs(props);
103
99
 
104
- const lights = useColors().getColors(ColorBase.Light);
100
+ const textColors = useColors().getContrasts(color.value);
101
+ const colors = useColors().getColors(color.value);
102
+ const slots = useSlots();
105
103
 
106
- const isEmpty = computed(() => {
107
- return !slots.default && !label.value;
108
- });
104
+ const lights = useColors().getColors(ColorBase.Light);
109
105
 
110
- const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
111
- if (!editable.value) {
112
- switch (variant.value) {
113
- case "standard":
114
- case "full": return {
115
- "--fs-button-padding": !isEmpty.value ? "0 16px" : "0",
116
- "--fs-button-background-color": lights.base,
117
- "--fs-button-border-color": lights.dark,
118
- "--fs-button-color": lights.dark
119
- }
120
- case "icon": return {
121
- "--fs-button-color": lights.dark
122
- }
123
- }
124
- }
125
- switch (variant.value) {
126
- case "standard": return {
127
- "--fs-button-padding": !isEmpty.value ? "0 16px" : "0",
128
- "--fs-button-background-color": colors.light,
129
- "--fs-button-border-color": colors.base,
130
- "--fs-button-color": textColors.base,
131
- "--fs-button-hover-background-color": colors.base,
132
- "--fs-button-hover-border-color": colors.base,
133
- "--fs-button-hover-color": textColors.light,
134
- "--fs-button-active-background-color": colors.dark,
135
- "--fs-button-active-border-color": colors.dark,
136
- "--fs-button-active-color": textColors.light
137
- };
138
- case "full": return {
139
- "--fs-button-padding" : !isEmpty.value ? "0 16px" : "0",
140
- "--fs-button-background-color": colors.base,
141
- "--fs-button-border-color": colors.base,
142
- "--fs-button-color": textColors.light,
143
- "--fs-button-hover-background-color": colors.base,
144
- "--fs-button-hover-border-color": colors.base,
145
- "--fs-button-hover-color": textColors.light,
146
- "--fs-button-active-background-color": colors.dark,
147
- "--fs-button-active-border-color": colors.dark,
148
- "--fs-button-active-color": textColors.light
106
+ const isEmpty = computed(() => {
107
+ return !slots.default && !label.value;
108
+ });
149
109
 
150
- };
151
- case "icon": return {
152
- "--fs-button-color": textColors.base,
153
- "--fs-button-hover-color" : textColors.dark
154
- };
155
- }
156
- });
110
+ const style = computed(
111
+ (): { [code: string]: string } & Partial<CSSStyleDeclaration> => {
112
+ if (!editable.value) {
113
+ switch (variant.value) {
114
+ case "standard":
115
+ case "full":
116
+ return {
117
+ "--fs-button-padding": !isEmpty.value ? "0 16px" : "0",
118
+ "--fs-button-background-color": lights.base,
119
+ "--fs-button-border-color": lights.dark,
120
+ "--fs-button-color": lights.dark,
121
+ };
122
+ case "icon":
123
+ return {
124
+ "--fs-button-color": lights.dark,
125
+ };
126
+ }
127
+ }
128
+ switch (variant.value) {
129
+ case "standard":
130
+ return {
131
+ "--fs-button-padding": !isEmpty.value ? "0 16px" : "0",
132
+ "--fs-button-background-color": colors.light,
133
+ "--fs-button-border-color": colors.base,
134
+ "--fs-button-color": textColors.base,
135
+ "--fs-button-hover-background-color": colors.base,
136
+ "--fs-button-hover-border-color": colors.base,
137
+ "--fs-button-hover-color": textColors.light,
138
+ "--fs-button-active-background-color": colors.dark,
139
+ "--fs-button-active-border-color": colors.dark,
140
+ "--fs-button-active-color": textColors.light,
141
+ };
142
+ case "full":
143
+ return {
144
+ "--fs-button-padding": !isEmpty.value ? "0 16px" : "0",
145
+ "--fs-button-background-color": colors.base,
146
+ "--fs-button-border-color": colors.base,
147
+ "--fs-button-color": textColors.light,
148
+ "--fs-button-hover-background-color": colors.base,
149
+ "--fs-button-hover-border-color": colors.base,
150
+ "--fs-button-hover-color": textColors.light,
151
+ "--fs-button-active-background-color": colors.dark,
152
+ "--fs-button-active-border-color": colors.dark,
153
+ "--fs-button-active-color": textColors.light,
154
+ };
155
+ case "icon":
156
+ return {
157
+ "--fs-button-color": textColors.base,
158
+ "--fs-button-hover-color": textColors.dark,
159
+ };
160
+ }
161
+ }
162
+ );
157
163
 
158
- const classes = computed((): string[] => {
159
- const classes = [];
160
- if (!editable.value) {
161
- classes.push("fs-button--disabled");
162
- }
163
- switch (variant.value) {
164
- case "icon":
165
- classes.push("fs-button-icon");
166
- break;
167
- default:
168
- classes.push("fs-button");
169
- break;
170
- }
171
- return classes;
172
- });
164
+ const classes = computed((): string[] => {
165
+ const classes = [];
166
+ if (!editable.value) {
167
+ classes.push("fs-button--disabled");
168
+ }
169
+ switch (variant.value) {
170
+ case "icon":
171
+ classes.push("fs-button-icon");
172
+ break;
173
+ default:
174
+ classes.push("fs-button");
175
+ break;
176
+ }
177
+ return classes;
178
+ });
173
179
 
174
- const onClick = () => {
175
- if (!editable.value) {
176
- return;
177
- }
178
- emit("click");
179
- }
180
+ const onClick = () => {
181
+ if (!editable.value) {
182
+ return;
183
+ }
184
+ emit("click");
185
+ };
180
186
 
181
- return {
182
- colors,
183
- color,
184
- style,
185
- classes,
186
- onClick
187
- };
188
- }
187
+ return {
188
+ colors,
189
+ color,
190
+ style,
191
+ classes,
192
+ onClick,
193
+ };
194
+ },
189
195
  });
190
- </script>
196
+ </script>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dative-gpi/foundation-shared-components",
3
- "version": "0.0.6",
3
+ "version": "0.0.7",
4
4
  "description": "",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -9,8 +9,8 @@
9
9
  "author": "",
10
10
  "license": "ISC",
11
11
  "dependencies": {
12
- "@dative-gpi/foundation-shared-domain": "0.0.6",
13
- "@dative-gpi/foundation-shared-services": "0.0.6",
12
+ "@dative-gpi/foundation-shared-domain": "0.0.7",
13
+ "@dative-gpi/foundation-shared-services": "0.0.7",
14
14
  "@fontsource/montserrat": "^5.0.16",
15
15
  "color": "^4.2.3",
16
16
  "vue": "^3.2.0"
@@ -20,5 +20,5 @@
20
20
  "sass": "^1.69.5",
21
21
  "sass-loader": "^13.3.2"
22
22
  },
23
- "gitHead": "01028b7e6c5cf14c8092999ccacfd68d08c5d2a9"
23
+ "gitHead": "970e56be5ba41712db154bd27ad98962dbeb802e"
24
24
  }