@flitsmeister/design-system 2.2.22 → 2.2.30

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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@flitsmeister/design-system",
3
- "version": "2.2.22",
3
+ "version": "2.2.30",
4
4
  "description": "Flitsmeister design system and demo site",
5
5
  "main": "index.js",
6
6
  "exports": {
@@ -1,5 +1,6 @@
1
1
  <template>
2
2
  <button
3
+ :type="type"
3
4
  :class="buttonClasses"
4
5
  :title="title"
5
6
  :href="href"
@@ -9,23 +10,26 @@
9
10
  :data-buttontype="buttontype"
10
11
  :data-size="size"
11
12
  >
12
- <span
13
+ <Icon
13
14
  v-if="icon && iconPosition === 'prepend'"
14
- class="icon"
15
- >{{ icon }}</span
16
- >
15
+ icon-class="mr-2"
16
+ :name="icon"
17
+ />
17
18
  <slot></slot>
18
- <span
19
+ <Icon
19
20
  v-if="icon && iconPosition === 'append'"
20
- class="icon"
21
- >{{ icon }}</span
22
- >
21
+ icon-class="ml-2"
22
+ :name="icon"
23
+ />
23
24
  </button>
24
25
  </template>
25
26
 
26
27
  <script>
28
+ import Icon from "./Icon.vue";
29
+
27
30
  export default {
28
31
  name: "fmxButton",
32
+ components: { Icon },
29
33
  props: {
30
34
  type: {
31
35
  type: String,
@@ -71,6 +75,10 @@
71
75
  validator: (value) =>
72
76
  ["filled", "text", "outline", "squared"].includes(value),
73
77
  },
78
+ /**
79
+ * Optional icon: symbol id for the SVG sprite.
80
+ * The consuming app must inject an SVG sprite containing symbols with these ids (e.g. via Vite/Webpack sprite plugin).
81
+ */
74
82
  icon: {
75
83
  type: String,
76
84
  default: "",
@@ -259,10 +267,6 @@
259
267
  }
260
268
  }
261
269
 
262
- .icon {
263
- margin: 0 0.5rem;
264
- }
265
-
266
270
  @keyframes horizontal-shaking {
267
271
  0% {
268
272
  transform: translateX(0);