Skip to content

Commit 39b07d4

Browse files
graphierosgraphieros
committed
Update user options menu
1 parent 1ba80d5 commit 39b07d4

38 files changed

+320
-538
lines changed

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
![GitHub issues](https://img.shields.io/github/issues/graphieros/vue-data-ui)
1515
![NPM](https://img.shields.io/npm/l/vue-data-ui)
1616
![npm](https://img.shields.io/npm/dt/vue-data-ui)
17-
![Static Badge](https://img.shields.io/badge/components-28-green)
17+
![Static Badge](https://img.shields.io/badge/components-29-green)
1818

1919
[Interactive documentation](https://vue-data-ui.graphieros.com/)
2020

‎package-lock.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "vue-data-ui",
33
"private": false,
4-
"version": "1.9.31",
4+
"version": "1.9.32",
55
"type": "module",
66
"description": "A user-empowering data visualization Vue components library",
77
"keywords": [

‎src/App.vue‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
import { ref, computed, onMounted } from "vue";
1313
import PROD_CONFIG from "./default_configs.json";
1414
import Box from "./Box.vue";
15+
import BaseIcon from "./atoms/BaseIcon.vue";
1516
import TableTest from "./components/vue-ui-table.vue";
1617
import DonutTest from "./components/vue-ui-donut.vue";
1718
import XyTest from "./components/vue-ui-xy.vue";
@@ -3540,7 +3541,23 @@ const tiremarksDataset = ref({
35403541
<h4 style="color: #5f8bee">Manual testing arena</h4>
35413542
</div>
35423543

3543-
<Box @copy="copyConfig(PROD_CONFIG.vue_ui_tiremarks)" open>
3544+
<Box open :misc="true">
3545+
<template #title>__Icons__</template>
3546+
<template #misc>
3547+
<BaseIcon name="pdf" />
3548+
<BaseIcon name="image" />
3549+
<BaseIcon name="excel" />
3550+
<BaseIcon name="tableOpen" />
3551+
<BaseIcon name="tableClose" />
3552+
<BaseIcon name="spin" />
3553+
<BaseIcon name="close" />
3554+
<BaseIcon name="labelOpen" />
3555+
<BaseIcon name="labelClose" />
3556+
<BaseIcon name="sort" />
3557+
</template>
3558+
</Box>
3559+
3560+
<Box @copy="copyConfig(PROD_CONFIG.vue_ui_tiremarks)">
35443561
<template #title>VueUiTiremarks</template>
35453562
<template #dev>
35463563
<TireTest

‎src/Box.vue‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,10 @@ const props = defineProps({
66
open: {
77
type: Boolean,
88
default: false
9+
},
10+
misc: {
11+
type: Boolean,
12+
default: false
913
}
1014
})
1115
@@ -31,7 +35,10 @@ function copy() {
3135
<slot name="title"></slot>
3236
</span>
3337
</summary>
34-
<div style="display: flex; flex-direction:column;">
38+
<div style="display: flex; flex-direction: row; gap: 24px; align-items:center;justify-content:center; padding: 24px">
39+
<slot name="misc"/>
40+
</div>
41+
<div style="display: flex; flex-direction:column;" v-if="!misc">
3542
<button class="btn" @click="showConfig = !showConfig">
3643
Config &nbsp;<span v-if="showConfig">&lt;</span><span v-else>&gt;</span>
3744
</button>
@@ -44,7 +51,7 @@ function copy() {
4451
<div style="padding-left:24px">
4552
<slot name="general"/>
4653
</div>
47-
<div style="display: flex;flex-direction:row; gap:12px; align-items:center;justify-content:center;background:#2A2A2A;padding:12px">
54+
<div style="display: flex;flex-direction:row; gap:12px; align-items:center;justify-content:center;background:#2A2A2A;padding:12px" v-if="!misc">
4855
<div style="width:100%;padding:12px;">
4956
<div style="width:100%;text-align:center;color: #ff6400;margin-bottom:12px">DEV</div>
5057

‎src/atoms/BaseIcon.vue‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<script setup>
2+
import { computed } from "vue";
3+
4+
const props = defineProps({
5+
name: String,
6+
size: {
7+
type: Number,
8+
default: 24
9+
},
10+
stroke: {
11+
type: String,
12+
default: "#CCCCCC"
13+
},
14+
strokeWidth: {
15+
type: Number,
16+
default: 1.5
17+
},
18+
isSpin: {
19+
type: Boolean,
20+
default: false
21+
}
22+
});
23+
24+
const icons = computed(() => {
25+
return {
26+
sort: `<path stroke-width="${props.strokeWidth}" fill="none" stroke="${props.stroke}" stroke-linecap="round" d="M1 15 5 18 9 15M5 5 5 18M15 15 15 2M11 5 15 2 19 5" />`,
27+
spin: `<path stroke-width="${props.strokeWidth}" fill="none" stroke="${props.stroke}" stroke-linecap="round" d="M1 10A1 1 0 0019 10 1 1 0 004 10 1 1 0 0016 10 1 1 0 007 10 1 1 0 0013 10 1 1 0 0010 10M1 10Q1 5 5 2" />`,
28+
close: `<path fill="none" stroke-width="${props.strokeWidth}" fill="none" stroke="${props.stroke}" stroke-linecap="round" d="M4 4 16 16M4 16 16 4" />`,
29+
menu: `<path stroke-width="${props.strokeWidth}" fill="none" stroke="${props.stroke}" stroke-linecap="round" d="M2 10 18 10M2 5 18 5M2 15 18 15" />`,
30+
tableOpen: `<path stroke-width="${props.strokeWidth}" fill="none" stroke-linecap="round" stroke="${props.stroke}" d="M4 1 4 1C2 1 1 2 1 4L1 16C1 18 2 19 4 19L7 19M4 1 16 1C18 1 19 2 19 4L19 14M18 16 14 19 10 16"/><line stroke-width="${props.strokeWidth}" stroke="${props.stroke}" x1="8" y1="1" x2="8" y2="19" stroke-linecap="round" /><line stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke="${props.stroke}" x1="1" y1="8" x2="19" y2="8" />`,
31+
tableClose: `<path stroke-width="${props.strokeWidth}" stroke-linecap="round" fill="none" stroke="${props.stroke}" d="M4 1 4 1C2 1 1 2 1 4L1 16C1 18 2 19 4 19L7 19M4 1 16 1C18 1 19 2 19 4L19 14M18 19 14 16 10 19"/><line stroke-width="${props.strokeWidth}" stroke="${props.stroke}" x1="8" y1="1" x2="8" y2="19" stroke-linecap="round" /><line stroke-width="${props.strokeWidth}" stroke="${props.stroke}" x1="1" y1="8" x2="19" y2="8" />`,
32+
image: `<path stroke-width="${props.strokeWidth}" fill="none" stroke="${props.stroke}" stroke-linecap="round" d="M4 1C2 1 1 2 1 4L1 16C1 18 2 19 4 19L16 19C18 19 19 18 19 16L19 6C15 6 14 5 14 1ZM1 16C3.3333 13.6667 3 10 8 12M7 14C8 13 9 5 19 11"/><circle r="1" cx="6" cy="5" stroke="none" fill="${props.stroke}"/>`,
33+
excel: `<path stroke-width="${props.strokeWidth}" fill="none" stroke="${props.stroke}" stroke-linejoin="round" d="M4 1C2 1 1 2 1 4L1 16C1 18 2 19 4 19L16 19C18 19 19 18 19 16L19 6C15 6 14 5 14 1ZM14 8C15 8 16 9 16 10L16 14C16 15 15 16 14 16L6 16C5 16 4 15 4 14L4 10C4 9 5 8 6 8Z"/><line stroke="${props.stroke}" stroke-width="${props.strokeWidth}" x1="9" x2="9" y1="8" y2="16" /><line stroke="${props.stroke}" stroke-width="${props.strokeWidth}" x1="4" x2="16" y1="12" y2="12" />`,
34+
pdf: `<path stroke-width="${props.strokeWidth}" fill="none" stroke="${props.stroke}" stroke-linecap="round" stroke-linejoin="round" d="M4 1C2 1 1 2 1 4L1 16C1 18 2 19 4 19L16 19C18 19 19 18 19 16L19 6C15 6 14 5 14 1ZM4 16 4 9 5 9Q7 9 7 11 7 13 5 13L4 13M9 16 9 9 9 9Q12 9 12 12L12 13Q12 16 9 16L9 16M14 16 14 9 16 9M14 12 16 12"/>`,
35+
labelOpen: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M2 8C1 9 1 11 2 12L5 16C6 17 6 17 7 17L17 17C19 17 19 16 19 15L19 5C19 5 19 3 17 3L7 3C6 3 6 3 5 4L2 8M7 7 13 7M7 10 15 10M7 13 16 13" />`,
36+
labelClose: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M2 8C1 9 1 11 2 12L5 16C6 17 6 17 7 17L17 17C19 17 19 15 19 15L19 5C19 5 19 3 17 3L12 3M7 10 15 10M7 13 16 13M9 6 4 1M4 6 9 1" />`
37+
}
38+
})
39+
40+
</script>
41+
42+
<template>
43+
<svg :class="{ 'spin ': isSpin }" viewBox="0 0 20 20" :height="size" :width="size" v-html="icons[name]" style="background:transparent" />
44+
</template>
45+
46+
<style scoped>
47+
svg * {
48+
all: unset;
49+
}
50+
51+
.spin {
52+
animation: smartspin 0.5s infinite linear;
53+
}
54+
@keyframes smartspin {
55+
from {
56+
transform: rotate(0deg);
57+
}
58+
to {
59+
transform: rotate(360deg);
60+
}
61+
}
62+
</style>

0 commit comments

Comments
 (0)