@teammodlr/ui-kit 2.1.65 → 2.1.68

package/src/components/dialog/style/Dialog.css.ts

@@ -35,9 +35,13 @@ export const wrapper = style({
     bottom: 0,
     outline: 0,
     overflow: 'auto',
-    boxSizing: 'border-box'
+    boxSizing: 'border-box',
 });
 
+export const notModal = style({
+    pointerEvents: 'none'
+})
+
 export const dialog = style({
     boxSizing: 'border-box',
     margin: '0 auto',
@@ -53,17 +57,21 @@ export const content = style({
     position: 'relative',
     backgroundColor: '#FFF',
     backgroundClip: 'padding-box',
-    border: 0,
-    borderRadius: themeVars.rounded.default,
+    border: `1px solid ${themeVars.color.gray[300]}`,
+    borderRadius: themeVars.rounded.medium,
     pointerEvents: 'auto',
-    padding: `20px 24px`,
-    boxShadow: `0 6px 16px 0 rgba(0,0,0,.08), 0 3px 6px -4px rgba(0,0,0,.12), 0 9px 28px 8px rgba(0,0,0,.05)`
+    boxShadow: `2px 2px 8px rgba(128, 128, 128, 0.1), 0 9px 28px 8px rgba(0,0,0,.05)`
 });
 
 export const header = style({
     color: themeVars.color.font.default,
     backgroundColor: '#FFF',
-    marginBottom: themeVars.space[2]
+    marginBottom: themeVars.space[2],
+    borderBottom: `1px solid ${themeVars.color.gray[300]}`,
+    height: `35px`,
+    display: `flex`,
+    alignItems: `center`,
+    padding: `0px ${themeVars.space[2]}`
 });
 
 export const footer = style({
@@ -80,21 +88,51 @@ export const title = style({
     wordWrap: 'break-word'
 });
 
-export const close = style({
-    position: 'absolute',
-    top: `17px`,
-    insetInlineEnd: `17px`,
-    padding: 0,
-    background: `0 0`,
-    borderRadius: themeVars.rounded.small,
-    width: `22px`,
-    height: `22px`,
-    border: 0,
-    outline: 0,
-    cursor: `pointer`,
-    selectors: {
-        '&:hover': {
-            backgroundColor: `hsla(0,0%,45.1%,0.1)`
+export const close = style([
+    {
+        outline: `none ${themeVars.color.gray[300]}`,
+        display: 'inline-block',
+        position: 'absolute',
+        top: themeVars.space[1.5],
+        right: themeVars.space[1.5],
+        width: '1.5rem',
+        height: '1.5rem',
+        backgroundColor: 'transparent',
+        border: 'none',
+        padding: 0,
+        cursor: 'pointer',
+        transition: 'all 0.2s',
+        borderRadius: themeVars.rounded.full,
+        marginLeft: themeVars.space[2],
+        ':hover': {
+            backgroundColor: themeVars.color.gray[150]
+        },
+        ':focus': {
+            backgroundColor: themeVars.color.gray[150]
+        },
+        '::before': {
+            content: '""',
+            position: 'absolute',
+            top: '50%',
+            left: '50%',
+            transform: 'translate(-50%, -50%) rotate(45deg)',
+            width: '0.8rem',
+            height: '2px',
+            backgroundColor: themeVars.color.gray[500],
+            transformOrigin: 'center',
+            transition: 'all 0.2s'
+        },
+        '::after': {
+            content: '""',
+            position: 'absolute',
+            top: '50%',
+            left: '50%',
+            transform: 'translate(-50%, -50%) rotate(-45deg)',
+            width: '0.8rem',
+            height: '2px',
+            backgroundColor: themeVars.color.gray[500],
+            transformOrigin: 'center',
+            transition: 'all 0.2s'
         }
     }
-});
+]);

package/src/components/slider/Slider.vue

@@ -1,76 +1,111 @@
-<template>
-    <div :class="style.slider">
-        <div :class="style.sliderTransparent">
-            <div ref="slider" @mousedown="handleMouseDown" :class="style.sliderBar" :style="{ background: background }">
-            </div>
-        </div>
-        
-        <div style="position: absolute; inset: 0px 9px;"  @mousedown="handleMouseDown">
-            <div draggable :class="style.hueSliderThumb" @mousedown="handleMouseDown" :style="{ left: `${modelValue}%` }"></div>
-        </div>
-    </div>
-</template>
-
-<script lang="ts">
-import { watch } from "vue";
-import { defineComponent, ref } from 'vue';
-import * as style from './style';
-import { useMouseInElement, useMousePressed } from '@vueuse/core';
-
-export default defineComponent({
-    name: "MSlider",
-    props: {
-        modelValue: {
-            type: Number,
-            required: true
-        },
-        background: {
-            type: String,
-            default: ""
-        }
-    },
-    components: {},
-    emits: ['update:modelValue'],
-    setup(props, { emit }) {
-        const slider = ref<HTMLElement>();
-
-        const { elementX } = useMouseInElement(slider);
-        const { pressed } = useMousePressed();
-
-        watch(() => pressed.value, () => {
-            if (!pressed.value) {
-                dragging.value = false;
-            }
-        });
-
-        watch(() => elementX.value, () => {
-            if (!dragging.value) {
-                return;
-            }
-
-            setThumbPosition();
-        });
-
-
-        const dragging = ref(false);
-
-        const setThumbPosition = () => {
-            emit('update:modelValue',  ((Math.min(Math.max(elementX.value, 0), slider.value?.clientWidth || 0) / (slider.value?.clientWidth || 0)) * 100));
-        };
-
-        const handleMouseDown = () => {
-            dragging.value = true;
-            setThumbPosition();
-        };
-
-        return {
-            setThumbPosition,
-            elementX,
-            pressed,
-            handleMouseDown,
-            slider,
-            style,
-        };
-    }
-})
-</script>
+<template>
+    <div :class="style.slider">
+        <div :class="style.sliderTransparent">
+            <div ref="slider" :class="style.sliderBar" :style="{ background: background }" @mousedown="handleMouseDown"
+                @touchstart.prevent="handleMouseDown">
+            </div>
+        </div>
+
+        <div style="position: absolute; inset: 0px 9px;" @mousedown="handleMouseDown"
+            @touchstart.prevent="handleMouseDown">
+            <div :class="style.hueSliderThumb" :style="{ left: `${modelValue}%` }"></div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, onMounted, onUnmounted } from 'vue';
+import * as style from './style';
+
+export default defineComponent({
+    name: 'MSlider',
+    props: {
+        modelValue: {
+            type: Number,
+            required: true,
+        },
+        background: {
+            type: String,
+            default: '',
+        },
+    },
+    emits: ['update:modelValue', 'change'],
+    setup(props, { emit }) {
+        const slider = ref<HTMLElement | null>(null);
+        const dragging = ref(false);
+
+        const handleMouseDown = (event: MouseEvent | TouchEvent) => {
+            dragging.value = true;
+            setThumbPosition(event);
+
+            document.addEventListener('mousemove', onMouseMove);
+            document.addEventListener('mouseup', onMouseUp);
+            document.addEventListener('touchmove', onTouchMove);
+            document.addEventListener('touchend', onTouchEnd);
+        };
+
+        const onMouseMove = (event: MouseEvent) => {
+            if (dragging.value) {
+                setThumbPosition(event);
+            }
+        };
+
+        const onMouseUp = () => {
+            if (dragging.value) {
+                dragging.value = false;
+                removeEventListeners();
+                emit('change', props.modelValue);
+            }
+        };
+
+        const onTouchMove = (event: TouchEvent) => {
+            if (dragging.value) {
+                setThumbPosition(event);
+            }
+        };
+
+        const onTouchEnd = () => {
+            if (dragging.value) {
+                dragging.value = false;
+                removeEventListeners();
+                emit('change', props.modelValue);
+            }
+        };
+
+        const setThumbPosition = (event: MouseEvent | TouchEvent) => {
+            const rect = slider.value?.getBoundingClientRect();
+            if (!rect) return;
+
+            let clientX;
+            if (event instanceof MouseEvent) {
+                clientX = event.clientX;
+            } else if (event instanceof TouchEvent) {
+                clientX = event.touches[0].clientX;
+            } else {
+                return;
+            }
+
+            const position = Math.min(Math.max(clientX - rect.left, 0), rect.width);
+            const value = (position / rect.width) * 100;
+            emit('update:modelValue', value);
+        };
+
+        const removeEventListeners = () => {
+            document.removeEventListener('mousemove', onMouseMove);
+            document.removeEventListener('mouseup', onMouseUp);
+            document.removeEventListener('touchmove', onTouchMove);
+            document.removeEventListener('touchend', onTouchEnd);
+        };
+
+        onUnmounted(() => {
+            removeEventListeners();
+        });
+
+        return {
+            handleMouseDown,
+            slider,
+            style,
+        };
+    },
+});
+</script>