@nixweb/nixloc-ui 1.16.0 → 1.19.0

package/src/components/modules/rental/new-items-rent/GroupDraggable.vue

@@ -1,880 +0,0 @@
-<template>
-    <div>
-        <div class="gss-hint title">
-            Você pode <b>adicionar</b>, <b>editar</b> grupos/subgrupos e <b>arrastar para ordenar</b>
-        </div>
-        <ScrollBar :minHeight="550" :maxHeight="550">
-            <div class="draggable-wrap">
-                <div class="draggable-toolbar" v-if="isTwoLevels">
-                    <button class="draggable-add-btn" @click="addGroup">
-                        <i class="fa-solid fa-plus"></i>
-                        <span>Grupo</span>
-                    </button>
-                    <button v-if="isSubGroup" class="draggable-add-btn" @click="toggleAll">
-                        <i class="fa-solid" :class="allCollapsed ? 'fa-chevron-right' : 'fa-chevron-down'"></i>
-                        <span>{{ allCollapsed ? 'Expandir subgrupos' : 'Recolher subgrupos' }}</span>
-                    </button>
-                </div>
-
-                <div class="draggable-no-data" v-if="groups.length === 0">Nenhum registro encontrado!</div>
-
-                <template v-if="isTwoLevels">
-                    <draggable v-model="groups" group="groups" handle=".draggable-drag-handle" :disabled="isEditing"
-                        @end="onDragEndGroups">
-                        <div v-for="group in groups" :key="group.id" class="draggable-group">
-                            <div class="draggable-group-header" :class="{ 'no-border': !showGroups }">
-                                <div class="draggable-group-left">
-                                    <i class="fa-solid fa-grip-vertical draggable-drag-handle"></i>
-                                    <i class="fa-solid fa-layer-group draggable-icon-group"></i>
-
-                                    <div class="draggable-editable-wrap" @click="!group.editing">
-                                        <span v-if="!group.editing" class="draggable-editable">
-                                            <span v-if="group.name !== 'Sem grupo'" class="title">{{ group.name }}
-                                            </span>
-                                            <span v-else class="draggable-title-no-group">Sem grupo</span>
-                                            <i class="fa-regular fa-pen-to-square draggable-edit-icon"
-                                                @click="editGroup(group)"></i>
-
-                                            <i title="Adicionar subgrupo" class="fa-solid fa-plus draggable-edit-icon"
-                                                @click="addSubgroup(group)"
-                                                style="margin-left: 8px; color: rgb(22, 163, 74);"></i>
-                                        </span>
-
-                                        <div v-else class="input-with-icon">
-                                            <input v-model="group.name" @keyup.enter="finishGroupEdit(group)"
-                                                class="draggable-edit-input" autofocus />
-                                            <i class="fa-solid fa-check input-check"
-                                                @click.stop="finishGroupEdit(group)" title="Confirmar"></i>
-
-                                        </div>
-                                    </div>
-                                </div>
-
-                                <div class="draggable-group-actions">
-                                    <button v-if="group.subgroups.length > 0 && group.name != 'Sem grupo'"
-                                        class="draggable-btn-arrow" @click.stop="toggleGroup(group)"
-                                        :title="group.collapsed ? 'Expandir' : 'Recolher'">
-                                        <i class="fa-solid"
-                                            :class="group.collapsed ? 'fa-chevron-right' : 'fa-chevron-down'"></i>
-                                    </button>
-
-                                    <button class="draggable-del-btn" @click.stop="askRemoveGroup(group)">
-                                        <i class="fa-solid fa-trash-can"></i>
-                                    </button>
-                                </div>
-                            </div>
-
-                            <transition name="fade">
-                                <div v-show="showGroups && !group.collapsed">
-                                    <draggable v-model="group.subgroups" group="subgroups"
-                                        handle=".draggable-drag-handle" :disabled="isEditing"
-                                        @end="onDragEndSubs(group)">
-                                        <div v-for="sub in group.subgroups" :key="sub.id" class="draggable-subgroup">
-                                            <div class="draggable-subgroup-line">
-                                                <div class="draggable-subgroup-left draggable-editable-wrap">
-                                                    <i class="fa-solid fa-grip-lines draggable-drag-handle"></i>
-                                                    <i class="fa-regular fa-layer-group draggable-icon-subgroup"></i>
-
-                                                    <span v-if="!sub.editing" class="draggable-editable">
-                                                        <span class="draggable-editable-title">
-                                                            <span v-if="sub.name !== 'Sem grupo'" class="title">
-                                                                {{ sub.name }}
-                                                            </span>
-                                                            <span v-else class="draggable-title-no-group">Sem
-                                                                grupo</span>
-                                                        </span>
-                                                        <i class="fa-regular fa-pen-to-square draggable-edit-icon"
-                                                            @click="!sub.editing && editSubgroup(sub)"></i>
-                                                    </span>
-
-                                                    <div v-else class="input-with-icon">
-                                                        <input v-model="sub.name" @keyup.enter="finishSubgroupEdit(sub)"
-                                                            class="draggable-edit-input" autofocus />
-                                                        <i class="fa-solid fa-check input-check"
-                                                            @click.stop="finishSubgroupEdit(sub)" title="Confirmar"></i>
-                                                    </div>
-                                                </div>
-
-                                                <div class="draggable-subgroup-actions">
-                                                    <span class="draggable-badge">{{ sub.products.length || 0 }}</span>
-                                                    <button class="draggable-del-btn"
-                                                        @click.stop="askRemoveSubgroup(group, sub)">
-                                                        <i class="fa-solid fa-trash-can"></i>
-                                                    </button>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </draggable>
-                                </div>
-                            </transition>
-                        </div>
-                    </draggable>
-                </template>
-
-                <template v-else>
-                    <div class="draggable-toolbar">
-                        <button class="draggable-add-btn" @click="addSingleGroup">
-                            <i class="fa-solid fa-plus"></i>
-                            <span>Novo grupo</span>
-                        </button>
-                    </div>
-
-                    <draggable v-model="groups" group="single" handle=".draggable-drag-handle" :disabled="isEditing"
-                        @end="onDragEndGroups">
-                        <div v-for="g in groups" :key="g.id" class="draggable-group">
-                            <div class="draggable-group-header no-border">
-                                <div class="draggable-group-left">
-                                    <i class="fa-solid fa-grip-vertical draggable-drag-handle"></i>
-                                    <i class="fa-solid fa-layer-group draggable-icon-group"></i>
-
-                                    <div class="draggable-editable-wrap" @click="!g.editing && editGroup(g)">
-                                        <span v-if="!g.editing" class="draggable-editable">
-                                            {{ g.name }}
-                                            <i class="fa-regular fa-pen-to-square draggable-edit-icon"></i>
-                                        </span>
-
-                                        <div v-else class="input-with-icon">
-                                            <input v-model="g.name" @keyup.enter="finishGroupEdit(g)"
-                                                class="draggable-edit-input" autofocus />
-                                            <i class="fa-solid fa-check input-check" @click="finishGroupEdit(g)"
-                                                title="Confirmar"></i>
-                                        </div>
-                                    </div>
-                                </div>
-
-                                <div class="draggable-group-actions">
-                                    <span class="draggable-badge">{{ g.count || 0 }}</span>
-                                    <button class="draggable-del-btn" @click.stop="askRemoveGroup(g)">
-                                        <i class="fa-solid fa-trash-can"></i>
-                                    </button>
-                                </div>
-                            </div>
-                        </div>
-                    </draggable>
-                </template>
-
-                <div v-if="confirm.visible" class="confirm-backdrop" @click.self="closeConfirm">
-                    <div class="confirm-card" role="dialog" aria-modal="true">
-                        <div class="confirm-header">
-                            <h4>Tem certeza que deseja excluir?</h4>
-                        </div>
-                        <div class="confirm-body">
-                            <Alert type="warning">
-                                Exluir<b> {{ confirm.message }}</b>? Todos os registros relacionados
-                                também serão excluídos!
-                            </Alert>
-                            <div v-if="isDeleteSubgroupOrProducts" class="div-alert-delete">
-                                <Alert type="warning">
-                                    <b> ATENÇÃO</b>: Produtos que possuem movimentação de estoque não serão removidos.
-                                </Alert>
-                            </div>
-                            <div>
-                                <CheckboxSimple :markFormDirty="false"
-                                    title="Remover os produtos vinculados (se houver)"
-                                    v-model="isDeleteSubgroupOrProducts" />
-                            </div>
-                        </div>
-
-                        <div class="confirm-actions">
-                            <button class="btn-secondary" @click="closeConfirm">Cancelar</button>
-                            <Button _key="btnDelete" color="white" backGroundColor="#ef4444" title="Excluir"
-                                :clicked="confirmYes" />
-                        </div>
-                    </div>
-                </div>
-                <GroupTemplateModal :groups="groups" :visible.sync="showTemplateModal" v-model="selectedTemplate" />
-            </div>
-        </ScrollBar>
-
-        <div class="phrase" v-if="loadingMigrate">
-            <AnimatedPhrase :phrases="['Aguarde...',
-                'Estamos carregando os produtos...',
-                'Isso pode levar alguns ou vários segundos...'
-            ]" />
-        </div>
-        <div v-else class="text-center">
-            <Button _key="btnCancel" size="small" type="edit" title="Cancelar" :clicked="closeModal" />
-            <Button _key="btnOk" size="medium" type="primary" title="Confirmar" :clicked="createEditOrder" />
-        </div>
-    </div>
-</template>
-
-<script>
-import AnimatedPhrase from "@nixweb/nixloc-ui/src/component/layout/AnimatedPhrase";
-import Alert from "@nixweb/nixloc-ui/src/component/layout/Alert";
-import Button from "@nixweb/nixloc-ui/src/component/forms/Button";
-import CheckboxSimple from "@nixweb/nixloc-ui/src/component/forms/CheckboxSimple";
-import ScrollBar from "@nixweb/nixloc-ui/src/component/layout/ScrollBar.vue";
-
-import GroupTemplateModal from './GroupTemplateModal.vue'
-
-import draggable from "vuedraggable";
-import { mapActions, mapMutations } from "vuex";
-
-export default {
-    name: "GroupDraggable",
-    components: { AnimatedPhrase, Alert, Button, CheckboxSimple, ScrollBar, draggable, GroupTemplateModal },
-    props: {
-        levels: { type: Number, default: 2 },
-        items: { type: Array, default: () => [] },
-        operational: { type: Boolean, default: false },
-        migrate: { type: Boolean, default: false },
-        selectedPeriod: Object,
-        loadingCreateEditOrder: {
-            type: Boolean,
-            default: true
-        },
-        onChanged: Function,
-    },
-    data() {
-        return {
-            rentId: this.$route?.params?.id,
-            urlGetAll: "/api/v1/rental/group-subgroup-rent/get-all",
-            urlCreateEditOrder: "/api/v1/rental/group-subgroup-rent/create-edit-order",
-            urlDeleteGroup: "/api/v1/rental/group-subgroup-rent/delete-group",
-            urlDeleteSubgroup: "/api/v1/rental/group-subgroup-rent/delete-subgroup",
-            itemsLocal: [],
-            groups: [],
-            showGroups: true,
-            allCollapsed: false,
-            isDeleteSubgroupOrProducts: false,
-            loadingMigrate: false,
-            _seed: 1000,
-            confirm: {
-                visible: false,
-                type: null,
-                group: null,
-                sub: null,
-                message: ""
-            },
-            selectedTemplate: "",
-            showTemplateModal: false,
-            loading: false,
-        };
-    },
-    created() {
-        this.itemsLocal = JSON.parse(JSON.stringify(this.items || []));
-        this.buildData();
-
-        if (this.migrate) {
-            this.loadingMigrate = true;
-            this.createEditOrder();
-        }
-    },
-    computed: {
-        isTwoLevels() {
-            return Number(this.levels) === 2;
-        },
-        isEditing() {
-            return this.groups.some(
-                g => g.editing || (Array.isArray(g.subgroups) && g.subgroups.some(s => s.editing))
-            );
-        },
-        isSubGroup() {
-            return this.groups.some(g => Array.isArray(g.subgroups) && g.subgroups.length > 0);
-        }
-    },
-    methods: {
-        ...mapActions("generic", ["getApi", "deleteApi", "putApi"]),
-        ...mapMutations("generic", ["addEvent", "hideModal", "removeLoading"]),
-        buildData() {
-            this.groups = this.buildNestedTwoLevels(this.itemsLocal);
-            this.recalcOrders();
-        },
-        buildNestedTwoLevels(list) {
-            const data = [];
-            (list || []).forEach(group => {
-                const g = {
-                    id: group.groupId,
-                    name: (group.groupName ?? "").trim(),
-                    order: group.groupOrder ?? null,
-                    editing: false,
-                    collapsed: false,
-                    subgroups: []
-                };
-                (group.subGroups || []).forEach(sub => {
-                    g.subgroups.push({
-                        id: sub.groupId,
-                        name: (sub.groupName ?? "").trim(),
-                        order: sub.groupOrder ?? null,
-                        editing: false,
-                        products: Array.isArray(sub.products) ? sub.products : []
-                    });
-                });
-                data.push(g);
-            });
-            return data;
-        },
-        recalcOrders() {
-            this.groups.forEach((g, gi) => {
-                this.$set(g, "order", gi + 1);
-                if (Array.isArray(g.subgroups)) {
-                    g.subgroups.forEach((s, si) => {
-                        this.$set(s, "order", si + 1);
-                    });
-                }
-            });
-        },
-        nextSequentialName(list, baseName) {
-            const rx = new RegExp(`^${baseName}\\s+(\\d+)$`, "i");
-            let max = 0;
-            (list || []).forEach(it => {
-                const name = (it && it.name ? String(it.name) : "").trim();
-                const m = name.match(rx);
-                if (m) {
-                    const n = parseInt(m[1], 10);
-                    if (!isNaN(n) && n > max) max = n;
-                }
-            });
-            return `${baseName} ${max + 1}`;
-        },
-
-        async getAll() {
-            const response = await this.getApi({
-                url: this.urlGetAll,
-                obj: {
-                    any: this.rentId,
-                    id: this.selectedPeriod.period.id,
-                },
-            });
-            this.groups = this.buildNestedTwoLevels(response.content.data);
-            if (this.allCollapsed) {
-                this.groups.forEach(g => this.$set(g, "collapsed", true));
-            }
-            this.loadingMigrate = false;
-            this.loading = false;
-            return response;
-        },
-        async createEditOrder() {
-            this.loading = true;
-            const response = await this.putApi({
-                url: this.urlCreateEditOrder,
-                obj: {
-                    periodRentId: this.selectedPeriod.period.id,
-                    rentId: this.rentId,
-                    onlyStock: this.operational,
-                    groups: this.groups
-                },
-                notNotifyToast: true
-            });
-            this.onChanged();
-            this.removeLoading(["btnOk"]);
-            return response;
-        },
-        async deleteGroup(id) {
-            const response = await this.deleteApi({
-                url: `${this.urlDeleteGroup}?id=${id}&deleteSubgroups=${this.isDeleteSubgroupOrProducts}&operational=${this.operational}`,
-                notNotifyToast: true
-            });
-            this.removeLoading(["btnDelete"]);
-            await this.getAll();
-            return response;
-        },
-        async deleteSubgroup(id) {
-            const response = await this.deleteApi({
-                url: `${this.urlDeleteSubgroup}?id=${id}&deleteProducts=${this.isDeleteSubgroupOrProducts}&operational=${this.operational}`,
-                notNotifyToast: true
-            });
-            this.removeLoading(["btnDelete"]);
-            await this.getAll();
-            return response;
-        },
-        nextId() {
-            this._seed += 1;
-            return `id_${this._seed}`;
-        },
-        addGroup() {
-            const newId = this.nextId();
-            this.cancelAllEditing();
-
-            const nextName = this.nextSequentialName(this.groups, "Novo Grupo");
-
-            this.groups.unshift({
-                id: newId,
-                name: nextName, 
-                editing: true,
-                collapsed: false,
-                subgroups: [],
-                order: 1
-            });
-            this.recalcOrders();
-        },
-        addSubgroup(group, sub = null) {
-            if (!group.subgroups) this.$set(group, "subgroups", []);
-            const newId = this.nextId();
-            this.cancelAllEditing();
-
-            const lastOrder = group.subgroups.length
-                ? group.subgroups[group.subgroups.length - 1].order || 0
-                : 0;
-
-            const nextSubName = this.nextSequentialName(group.subgroups, "Novo Subgrupo");
-
-            const newSub = {
-                id: newId,
-                name: nextSubName, 
-                products: [],
-                editing: true,
-                order: lastOrder + 1
-            };
-
-            group.subgroups.push(newSub);
-
-            this.recalcOrders();
-        },
-        addSingleGroup() {
-            const newId = this.nextId();
-            this.cancelAllEditing();
-            this.groups.unshift({
-                id: newId,
-                name: "",
-                editing: true,
-                order: 1
-            });
-            this.recalcOrders();
-        },
-        editGroup(group) {
-            this.cancelAllEditing();
-            this.$set(group, "editing", true);
-        },
-        finishGroupEdit(group) {
-            const name = (group.name || "").trim();
-            if (!name) {
-                const idx = this.groups.findIndex(g => g.id === group.id);
-                if (idx > -1) this.groups.splice(idx, 1);
-                this.recalcOrders();
-                return;
-            }
-            group.name = name;
-            this.$set(group, "editing", false);
-            this.recalcOrders();
-        },
-        editSubgroup(sub) {
-            this.cancelAllEditing();
-            this.$set(sub, "editing", true);
-        },
-        finishSubgroupEdit(sub) {
-            const name = (sub.name || "").trim();
-            if (!name) {
-                const group = this.groups.find(g => Array.isArray(g.subgroups) && g.subgroups.some(s => s.id === sub.id));
-                if (group) {
-                    const idx = group.subgroups.findIndex(s => s.id === sub.id);
-                    if (idx > -1) group.subgroups.splice(idx, 1);
-                }
-                this.recalcOrders();
-                return;
-            }
-            sub.name = name;
-            this.$set(sub, "editing", false);
-            this.recalcOrders();
-        },
-        askRemoveGroup(group) {
-            this.isDeleteSubgroupOrProducts = false;
-            this.confirm.visible = true;
-            this.confirm.type = "group";
-            this.confirm.group = group;
-            this.confirm.sub = null;
-            const n = (group.name || "Sem grupo").toString();
-            this.confirm.message = `${n}`;
-        },
-        askRemoveSubgroup(group, sub) {
-            this.isDeleteSubgroupOrProducts = false;
-            this.confirm.visible = true;
-            this.confirm.type = "subgroup";
-            this.confirm.group = group;
-            this.confirm.sub = sub;
-            const n = (sub.name || "Sem grupo").toString();
-            this.confirm.message = `${n}`;
-        },
-        closeConfirm() {
-            this.confirm.visible = false;
-            this.confirm.type = null;
-            this.confirm.group = null;
-            this.confirm.sub = null;
-            this.confirm.message = "";
-        },
-        async confirmYes() {
-            if (this.confirm.type === "group" && this.confirm.group) {
-                const i = this.groups.findIndex(g => g.id === this.confirm.group.id);
-                if (i > -1) this.groups.splice(i, 1);
-                await this.deleteGroup(this.confirm.group.id);
-            }
-            if (this.confirm.type === "subgroup" && this.confirm.group && this.confirm.sub) {
-                const arr = this.confirm.group.subgroups || [];
-                const i = arr.findIndex(s => s.id === this.confirm.sub.id);
-                if (i > -1) arr.splice(i, 1);
-                await this.deleteSubgroup(this.confirm.sub.id);
-            }
-            this.recalcOrders();
-            this.closeConfirm();
-        },
-        cancelAllEditing() {
-            this.groups.forEach(g => {
-                this.$set(g, "editing", false);
-                if (Array.isArray(g.subgroups)) {
-                    g.subgroups.forEach(s => this.$set(s, "editing", false));
-                }
-            });
-        },
-        toggleGroup(group) {
-            this.$set(group, "collapsed", !group.collapsed);
-        },
-        toggleAll() {
-            this.allCollapsed = !this.allCollapsed;
-            const target = this.allCollapsed;
-            this.groups.forEach(g => this.$set(g, "collapsed", target));
-        },
-        onDragEndGroups() {
-            this.recalcOrders();
-        },
-        onDragEndSubs() {
-            this.recalcOrders();
-        },
-        closeModal() {
-            this.removeLoading(["btnCancel"]);
-            this.hideModal();
-        }
-    },
-    watch: {
-        items: {
-            handler(newVal) {
-                this.itemsLocal = JSON.parse(JSON.stringify(newVal || []));
-                this.buildData();
-            },
-            deep: true,
-            immediate: true
-        }
-    }
-};
-</script>
-
-<style scoped>
-.draggable-wrap {
-    width: 100%;
-    box-sizing: border-box;
-    min-height: 500px;
-}
-
-.draggable-toolbar {
-    display: flex;
-    justify-content: flex-start;
-    gap: 10px;
-    margin-bottom: 16px;
-}
-
-.draggable-add-btn,
-.draggable-add-sub-btn {
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-    padding: 7px 12px;
-    border-radius: 9999px;
-    border: 1px solid rgba(0, 0, 0, .06);
-    background: #2563EB;
-    color: #fff;
-    font-size: 13px;
-    line-height: 1;
-    cursor: pointer;
-}
-
-.draggable-add-btn:hover,
-.draggable-add-sub-btn:hover {
-    background: #0954f5;
-}
-
-.draggable-add-sub-btn-padrao {
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-    padding: 8px 10px;
-    border-radius: 50px;
-    border: 1px solid rgba(0, 0, 0, .06);
-    background: #009183;
-    color: #fff;
-    font-size: 13px;
-    line-height: 1;
-    cursor: pointer;
-}
-
-.draggable-del-btn {
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-    padding: 8px 10px;
-    border-radius: 50px;
-    border: 1px solid rgba(239, 68, 68, .15);
-    background: #ef4444;
-    color: #fff;
-    font-size: 12px;
-    line-height: 1;
-    cursor: pointer;
-    margin-left: 8px;
-}
-
-.draggable-del-btn:hover {
-    background: #dc2626;
-}
-
-.draggable-group {
-    border: 1px solid #e5e7eb;
-    border-radius: 5px;
-    background: #fff;
-    margin-bottom: 16px;
-}
-
-.draggable-group-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 10px;
-    padding: 10px 16px;
-    font-weight: 500;
-    border-bottom: 1px solid #FAFAFC;
-}
-
-.draggable-group-header.no-border {
-    border-bottom: 0 !important;
-}
-
-.draggable-group-left {
-    display: inline-flex;
-    align-items: center;
-    gap: 10px;
-}
-
-.draggable-subgroup {
-    padding: 10px 16px;
-}
-
-.draggable-subgroup:last-child {
-    border-bottom: none;
-}
-
-.draggable-subgroup-line {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 12px;
-    margin-left: 20px;
-}
-
-.draggable-subgroup-left {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-}
-
-.draggable-subgroup-actions {
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-}
-
-.draggable-drag-handle {
-    cursor: grab;
-    color: #9ca3af;
-}
-
-.draggable-title-no-group {
-    font-size: 13px;
-    font-style: italic;
-    color: grey;
-    font-weight: 500;
-}
-
-.draggable-icon-group {
-    color: #2563eb;
-}
-
-.draggable-icon-subgroup {
-    color: #009183;
-}
-
-.draggable-no-data {
-    border: 1px solid #e5e7eb;
-    padding: 20px 0px 20px 10px;
-    border-radius: 6px;
-    overflow: hidden;
-    background: transparent;
-    color: #757d8c;
-    font-style: italic;
-}
-
-.draggable-editable-wrap {
-    display: inline-flex;
-    align-items: center;
-    gap: 4px;
-    position: relative;
-}
-
-.draggable-editable {
-    font-size: 14px;
-}
-
-.draggable-edit-icon {
-    font-size: 13px;
-    margin-left: 6px;
-    color: #cbd5e1;
-    transition: color .2s;
-    cursor: pointer;
-}
-
-.draggable-add-icon {
-    font-size: 13px;
-    margin-left: 6px;
-    color: #577696;
-    transition: color .2s;
-    cursor: pointer;
-    opacity: 0.6;
-}
-
-.draggable-editable-wrap:hover .draggable-edit-icon {
-    color: #94a3b8;
-}
-
-.draggable-edit-input {
-    font-size: 14px;
-    padding: 4px 26px 4px 6px;
-    border: 1px solid #d1d5db;
-    border-radius: 6px;
-    width: 400px;
-}
-
-.draggable-btn-template {
-    margin-left: auto;
-    margin-right: 5px;
-}
-
-.input-with-icon {
-    position: relative;
-    display: inline-block;
-}
-
-.input-check {
-    position: absolute;
-    right: 10px;
-    top: 50%;
-    transform: translateY(-50%);
-    color: #009183;
-    font-size: 14px;
-    cursor: pointer;
-}
-
-.draggable-editable-title {
-    font-size: 13.5px;
-}
-
-.draggable-badge {
-    background: #f3f4f6;
-    color: #374151;
-    border: 1px solid #e6e7eb;
-    padding: 3px 12px;
-    border-radius: 999px;
-    font-size: 12px;
-}
-
-.draggable-btn-arrow {
-    margin-right: 10px;
-    padding: 8px 5px;
-    width: 30px;
-    height: 30px;
-    border-radius: 50px;
-    border: 1px solid rgba(0, 0, 0, .06);
-    background: #2563EB;
-    color: #fff;
-    font-size: 13px;
-    line-height: 1;
-    cursor: pointer;
-}
-
-.div-alert-delete {
-    margin-top: 10px;
-}
-
-.fade-enter-active,
-.fade-leave-active {
-    transition: opacity .2s ease;
-}
-
-.fade-enter,
-.fade-leave-to {
-    opacity: 0;
-}
-
-.confirm-backdrop {
-    position: fixed;
-    inset: 0;
-    display: grid;
-    place-items: center;
-    background: rgba(15, 23, 42, .45);
-    z-index: 9999;
-    padding: 20px;
-}
-
-.confirm-card {
-    width: min(500px, 100%);
-    background: #fff;
-    border-radius: 14px;
-    box-shadow: 0 20px 60px rgba(0, 0, 0, .2);
-    overflow: hidden;
-    border: 1px solid #e5e7eb;
-}
-
-.confirm-header {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    padding: 14px 16px;
-}
-
-.confirm-header h4 {
-    margin: 0;
-    font-size: 1rem;
-}
-
-.confirm-body {
-    padding: 16px;
-    color: #334155;
-}
-
-.confirm-actions {
-    display: flex;
-    justify-content: flex-end;
-    gap: 10px;
-    padding: 8px 12px;
-}
-
-.phrase {
-    margin-top: 50px;
-}
-
-.btn-secondary {
-    background: #939394;
-    color: #111827;
-    border: 0;
-    border-radius: 999px;
-    padding: -5px 12px;
-    width: 80px;
-    cursor: pointer;
-    color: white;
-}
-
-.btn-danger {
-    background: #ef4444;
-    color: #fff;
-    border: 0;
-    border-radius: 999px;
-    padding: 8px 14px;
-    cursor: pointer;
-}
-
-.btn-danger:hover {
-    background: #dc2626;
-}
-
-.gss-hint {
-    margin-top: -10px;
-    margin-bottom: 15px;
-    color: rgb(107, 107, 107);
-}
-</style>