classcard-ui 0.2.974 → 0.2.976
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/classcard-ui.common.js +75 -57
- package/dist/classcard-ui.common.js.map +1 -1
- package/dist/classcard-ui.umd.js +75 -57
- package/dist/classcard-ui.umd.js.map +1 -1
- package/dist/classcard-ui.umd.min.js +1 -1
- package/dist/classcard-ui.umd.min.js.map +1 -1
- package/package.json +1 -1
- package/src/components/CTag/CTag.vue +15 -0
- package/src/icons.js +2 -0
- package/src/stories/CTag.stories.js +13 -2
package/package.json
CHANGED
|
@@ -4,19 +4,34 @@
|
|
|
4
4
|
:class="[colorClasses, tagClasses]"
|
|
5
5
|
class="inline-flex rounded-md px-2.5 py-0.5 text-sm leading-5"
|
|
6
6
|
>
|
|
7
|
+
<c-icon
|
|
8
|
+
v-if="showIcon"
|
|
9
|
+
:type="icon.type"
|
|
10
|
+
:class="icon.class"
|
|
11
|
+
:name="icon.name"
|
|
12
|
+
></c-icon>
|
|
7
13
|
{{ label }}
|
|
8
14
|
</span>
|
|
9
15
|
</div>
|
|
10
16
|
</template>
|
|
11
17
|
<script>
|
|
18
|
+
import CIcon from "../CIcon/CIcon.vue";
|
|
12
19
|
export default {
|
|
13
20
|
name: "CTag",
|
|
21
|
+
components: { CIcon },
|
|
14
22
|
props: {
|
|
15
23
|
label: { type: String },
|
|
16
24
|
color: { type: String, default: "green" },
|
|
17
25
|
tagClasses: {
|
|
18
26
|
type: String,
|
|
19
27
|
},
|
|
28
|
+
icon: {
|
|
29
|
+
type: Object,
|
|
30
|
+
},
|
|
31
|
+
showIcon: {
|
|
32
|
+
type: Boolean,
|
|
33
|
+
deafult: false,
|
|
34
|
+
},
|
|
20
35
|
},
|
|
21
36
|
computed: {
|
|
22
37
|
colorClasses() {
|
package/src/icons.js
CHANGED
|
@@ -357,6 +357,8 @@ export default {
|
|
|
357
357
|
"M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z",
|
|
358
358
|
"sun-outline":
|
|
359
359
|
"M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z",
|
|
360
|
+
"newspaper-outline":
|
|
361
|
+
"M12 7.5h1.5m-1.5 3h1.5m-7.5 3h7.5m-7.5 3h7.5m3-9h3.375c.621 0 1.125.504 1.125 1.125V18a2.25 2.25 0 01-2.25 2.25M16.5 7.5V18a2.25 2.25 0 002.25 2.25M16.5 7.5V4.875c0-.621-.504-1.125-1.125-1.125H4.125C3.504 3.75 3 4.254 3 4.875V18a2.25 2.25 0 002.25 2.25h13.5M6 7.5h3v3H6v-3z",
|
|
360
362
|
"minus-solid":
|
|
361
363
|
"M5.25 12a.75.75 0 01.75-.75h12a.75.75 0 010 1.5H6a.75.75 0 01-.75-.75z",
|
|
362
364
|
};
|
|
@@ -6,7 +6,12 @@ export default {
|
|
|
6
6
|
component: CTag,
|
|
7
7
|
argTypes: {
|
|
8
8
|
label: String,
|
|
9
|
-
color: {
|
|
9
|
+
color: {
|
|
10
|
+
control: {
|
|
11
|
+
type: "select",
|
|
12
|
+
options: ["gray", "red", "yellow", "green", "indigo", "purple", "pink"],
|
|
13
|
+
},
|
|
14
|
+
},
|
|
10
15
|
},
|
|
11
16
|
};
|
|
12
17
|
|
|
@@ -19,5 +24,11 @@ const Template = (args, { argTypes }) => ({
|
|
|
19
24
|
export const Default = Template.bind({});
|
|
20
25
|
Default.args = {
|
|
21
26
|
label: "Active",
|
|
22
|
-
color: "green"
|
|
27
|
+
color: "green",
|
|
28
|
+
icon: {
|
|
29
|
+
name: "newspaper-outline",
|
|
30
|
+
type: "outline",
|
|
31
|
+
class: "h-5 w-5 mr-2 text-green-400",
|
|
32
|
+
},
|
|
33
|
+
showIcon: true,
|
|
23
34
|
};
|