remove component
This commit is contained in:
@@ -1,332 +0,0 @@
|
|||||||
<template>
|
|
||||||
<button
|
|
||||||
v-if="isEmpty(to)"
|
|
||||||
:disabled="disabled"
|
|
||||||
:class="[
|
|
||||||
'button',
|
|
||||||
classType,
|
|
||||||
props.size,
|
|
||||||
{
|
|
||||||
'button-block': block,
|
|
||||||
'button-dropdown': dropdown,
|
|
||||||
'button-loading': loading,
|
|
||||||
},
|
|
||||||
]"
|
|
||||||
ref="buttonRef"
|
|
||||||
:style="{ minWidth: minWidth }"
|
|
||||||
:type="buttonType"
|
|
||||||
@click.stop="handleClick">
|
|
||||||
<ul
|
|
||||||
v-if="dropdown != null"
|
|
||||||
ref="dropdownMenu"
|
|
||||||
@mouseleave="handleMouseLeave">
|
|
||||||
<li
|
|
||||||
v-for="(dropdownLabel, dropdownItem) in dropdown"
|
|
||||||
:key="dropdownItem"
|
|
||||||
@click.stop="handleClickItem(dropdownItem)">
|
|
||||||
{{ dropdownLabel }}
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<template v-if="!loading">
|
|
||||||
<span v-if="iconLocation.length > 0" class="button-label">
|
|
||||||
<ion-icon
|
|
||||||
v-if="icon && iconLocation == 'before'"
|
|
||||||
:icon="icon" />
|
|
||||||
{{ label }}
|
|
||||||
<ion-icon v-if="icon && iconLocation == 'after'" :icon="icon" />
|
|
||||||
</span>
|
|
||||||
<span
|
|
||||||
v-else-if="icon.length > 0"
|
|
||||||
class="button-label button-label-icon">
|
|
||||||
<ion-icon :icon="icon" />
|
|
||||||
</span>
|
|
||||||
<span v-else class="button-label">
|
|
||||||
{{ label }}
|
|
||||||
</span>
|
|
||||||
<ion-icon
|
|
||||||
v-if="dropdown != null"
|
|
||||||
name="chevron-down-outline"
|
|
||||||
class="button-icon-dropdown"
|
|
||||||
@click.stop="handleClickToggleDropdown" />
|
|
||||||
</template>
|
|
||||||
</button>
|
|
||||||
<a
|
|
||||||
v-else-if="!isEmpty(to) && typeof to == 'string'"
|
|
||||||
:href="to"
|
|
||||||
:disabled="disabled"
|
|
||||||
:class="['button', classType, props.size, { 'button-block': block }]"
|
|
||||||
:type="buttonType">
|
|
||||||
<span class="button-label">
|
|
||||||
<ion-icon v-if="icon && iconLocation == 'before'" :icon="icon" />
|
|
||||||
{{ label }}
|
|
||||||
<ion-icon v-if="icon && iconLocation == 'after'" :icon="icon" />
|
|
||||||
</span>
|
|
||||||
</a>
|
|
||||||
<router-link
|
|
||||||
v-else-if="!isEmpty(to) && typeof to == 'object'"
|
|
||||||
:to="to"
|
|
||||||
:disabled="disabled"
|
|
||||||
:class="['button', classType, props.size, { 'button-block': block }]">
|
|
||||||
<span class="button-label">
|
|
||||||
<ion-icon v-if="icon && iconLocation == 'before'" :icon="icon" />
|
|
||||||
{{ label }}
|
|
||||||
<ion-icon v-if="icon && iconLocation == 'after'" :icon="icon" />
|
|
||||||
</span>
|
|
||||||
</router-link>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { Ref, onMounted, ref, watch } from "vue";
|
|
||||||
import { isEmpty } from "../helpers/utils";
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
label: { type: String, default: "Button", required: false },
|
|
||||||
type: { type: String, default: "", required: false },
|
|
||||||
icon: {
|
|
||||||
type: String,
|
|
||||||
default: "",
|
|
||||||
required: false,
|
|
||||||
},
|
|
||||||
iconLocation: {
|
|
||||||
type: String,
|
|
||||||
default: "",
|
|
||||||
required: false,
|
|
||||||
validator: (value: string) => {
|
|
||||||
return ["before", "after", ""].includes(value);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
to: {
|
|
||||||
type: [String, Object],
|
|
||||||
default: null,
|
|
||||||
required: false,
|
|
||||||
validator: (prop) =>
|
|
||||||
typeof prop === "object" ||
|
|
||||||
prop === null ||
|
|
||||||
typeof prop === "string",
|
|
||||||
},
|
|
||||||
disabled: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
required: false,
|
|
||||||
},
|
|
||||||
block: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
required: false,
|
|
||||||
},
|
|
||||||
size: {
|
|
||||||
type: String,
|
|
||||||
default: "",
|
|
||||||
required: false,
|
|
||||||
},
|
|
||||||
dropdown: {
|
|
||||||
type: Object,
|
|
||||||
default: null,
|
|
||||||
required: false,
|
|
||||||
validator: (prop) => typeof prop === "object" || prop === null,
|
|
||||||
},
|
|
||||||
form: {
|
|
||||||
type: Object,
|
|
||||||
default: undefined,
|
|
||||||
required: false,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const buttonType: "submit" | "button" =
|
|
||||||
props.type == "submit" ? "submit" : "button";
|
|
||||||
const classType = props.type == "submit" ? "primary" : props.type;
|
|
||||||
const disabled = ref(props.disabled);
|
|
||||||
const dropdownMenu: Ref<HTMLElement | null> = ref(null);
|
|
||||||
const loading = ref(false);
|
|
||||||
const minWidth = ref("");
|
|
||||||
const buttonRef = ref(null);
|
|
||||||
|
|
||||||
const emits = defineEmits(["click"]);
|
|
||||||
|
|
||||||
if (props.form !== undefined) {
|
|
||||||
watch(
|
|
||||||
() => props.form.loading(),
|
|
||||||
(newValue) => {
|
|
||||||
disabled.value = newValue;
|
|
||||||
if (buttonType === "submit") {
|
|
||||||
loading.value = newValue;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (props.disabled !== undefined) {
|
|
||||||
watch(
|
|
||||||
() => props.disabled,
|
|
||||||
(newValue) => {
|
|
||||||
disabled.value = newValue;
|
|
||||||
}
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
if (buttonRef.value) {
|
|
||||||
minWidth.value = `${buttonRef.value.clientWidth}px`;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const handleClick = () => {
|
|
||||||
emits("click", "");
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleClickToggleDropdown = () => {
|
|
||||||
if (dropdownMenu.value) {
|
|
||||||
dropdownMenu.value.style.display = "block";
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleMouseLeave = () => {
|
|
||||||
if (dropdownMenu.value) {
|
|
||||||
dropdownMenu.value.style.display = "none";
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleClickItem = (item: string) => {
|
|
||||||
emits("click", item);
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
.button {
|
|
||||||
display: inline-block;
|
|
||||||
font-family: var(--button-font-family);
|
|
||||||
font-weight: var(--button-font-weight);
|
|
||||||
padding: 12px 32px 12px 32px;
|
|
||||||
border: 0;
|
|
||||||
color: var(--button-color-text);
|
|
||||||
background-color: var(--button-color);
|
|
||||||
text-decoration: none;
|
|
||||||
box-shadow: var(--base-shadow);
|
|
||||||
text-align: center;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
-moz-user-select: none;
|
|
||||||
-ms-user-select: none;
|
|
||||||
user-select: none;
|
|
||||||
white-space: nowrap;
|
|
||||||
|
|
||||||
.button-label {
|
|
||||||
display: inline-block;
|
|
||||||
padding: 2px 0 3px 0;
|
|
||||||
|
|
||||||
ion-icon {
|
|
||||||
display: inline-block;
|
|
||||||
width: 28px;
|
|
||||||
height: 28px;
|
|
||||||
margin: -8px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.button-label-icon {
|
|
||||||
margin: 0 -32px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.button-block {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.button-dropdown {
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
.button-icon-dropdown {
|
|
||||||
height: 18px;
|
|
||||||
width: 18px;
|
|
||||||
margin: -2px -18px -2px 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.medium .button-icon-dropdown {
|
|
||||||
height: 16px;
|
|
||||||
width: 16px;
|
|
||||||
margin: -4px -18px -4px 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul {
|
|
||||||
position: absolute;
|
|
||||||
list-style-type: none;
|
|
||||||
display: none;
|
|
||||||
z-index: 100;
|
|
||||||
top: 25%;
|
|
||||||
right: 0;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
background-color: inherit;
|
|
||||||
border-color: var(--button-dropdown-color-border);
|
|
||||||
box-shadow: var(--base-shadow);
|
|
||||||
|
|
||||||
li {
|
|
||||||
margin: 0;
|
|
||||||
padding: 16px 24px;
|
|
||||||
background-color: var(--button-dropdown-color);
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: var(--button-dropdown-color-hover);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover:not(:disabled):not(.disabled) {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover:not(:disabled):not(.disabled):not(.button-dropdown) {
|
|
||||||
filter: brightness(115%);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover:disabled,
|
|
||||||
&.disabled:hover {
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.disabled,
|
|
||||||
&:disabled {
|
|
||||||
color: var(--button-disabled-color-text) !important;
|
|
||||||
background-color: var(--button-disabled-color) !important;
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.medium {
|
|
||||||
padding: 8px 24px;
|
|
||||||
font-size: 80%;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.small {
|
|
||||||
padding: 4px 16px;
|
|
||||||
font-size: 70%;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.primary {
|
|
||||||
background-color: var(--button-primary-color);
|
|
||||||
color: var(--button-primary-color-text);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.secondary {
|
|
||||||
background-color: var(--button-secondary-color);
|
|
||||||
color: var(--button-secondary-color-text);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.danger {
|
|
||||||
background-color: var(--button-danger-color);
|
|
||||||
color: var(--button-danger-color-text);
|
|
||||||
}
|
|
||||||
|
|
||||||
& + .button {
|
|
||||||
margin-left: 1rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (max-width: 768px) {
|
|
||||||
.button {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Reference in New Issue
Block a user