@exakt/ui 0.0.12 → 0.0.14

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "exakt-ui",
   "configKey": "exakt",
-  "version": "0.0.12"
+  "version": "0.0.14"
 }

package/dist/runtime/components/e/chat-bubble.vue

@@ -0,0 +1,200 @@
+<template>
+  <div
+    class="bubble"
+    :class="bubbleClasses"
+  >
+    <div
+      class="content"
+      :style="{textAlign}"
+    >
+      <slot />
+    </div>
+    <div
+      v-if="!hideStatus"
+      class="status text-secondary"
+    >
+      <slot name="status" />
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { computed } from "#imports";
+// Define props for the position and color of the bubble
+const props = withDefaults(
+    defineProps<{
+        posx?:
+        "left" | "right" | "center";
+        posy?: "top" | "bottom";
+        textAlign?: "left" | "right" | "center";
+        color?: string;
+        liveTyping?: boolean;
+        pointer?: boolean;
+        hideStatus?: boolean;
+    }>(),
+    {
+        posx: "left",
+        posy: "bottom",
+        color: "turquoise",
+        liveTyping: false,
+        pointer: true
+    }
+);
+
+const bubbleClasses = computed(() => {
+    const classes = [props.posx, props.posy];
+    if (props.liveTyping) {
+        classes.push("live-typing");
+    }
+    if (props.pointer === false) {
+        classes.push("no-pointer");
+    }
+    return classes;
+});
+</script>
+
+<style scoped lang="scss">
+$bottom-triangle-height: 0.3rem;
+
+.bubble {
+    --current-color: var(--e-color-elev);
+    --text-color: var(--e-color-dark);
+    position: relative;
+    font-family: sans-serif;
+    width: fit-content;
+    min-width: 0;
+    overflow-wrap: break-word;
+    padding: var(--e-core-padding-x);
+    background: var(--current-color);
+    //outline: 0.07rem solid var(--e-color-elev-2);
+
+    border-radius: 1rem;
+    color: rgb(var(--text-color));
+    margin-top: 0px;
+    max-width: 50%;
+    min-width: 10rem;
+    transition: transform 0.15s ease-in-out;
+
+    &:active {
+        transform: scale(0.95);
+    }
+
+    .overline {
+        font-weight: bold;
+        text-align: left;
+    }
+
+    .status {
+        text-align: right;
+        margin-top: 0.5rem;
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+    }
+
+    &:before {
+        content: "";
+        width: 0px;
+        height: 0px;
+        position: absolute;
+        animation: anim2 2s ease-in-out infinite;
+    }
+
+    &.no-pointer {
+        &:before {
+            display: none;
+        }
+
+        margin-bottom: 0.5rem !important;
+
+    }
+
+    &.right {
+        &:before {
+            left: unset;
+            right: calc($bottom-triangle-height * 2);
+            border-right: calc($bottom-triangle-height * 2) solid var(--current-color);
+            border-left: $bottom-triangle-height solid transparent;
+        }
+
+align-self: flex-end;
+        animation: enter-right 0.3s ease-in-out;
+    }
+
+    &.center{
+        align-self: center;
+    }
+
+    &.left {
+        &:before {
+            left: calc($bottom-triangle-height * 2);
+            border-left: calc($bottom-triangle-height * 2) solid var(--current-color);
+            border-right: $bottom-triangle-height solid transparent;
+        }
+
+        animation: enter-left 0.3s ease-in-out;
+    }
+
+    &.live-typing {
+        .content {
+            animation: live-typing 5s linear infinite;
+            background-clip: text;
+            background: linear-gradient(to right,
+                    rgba(var(--text-color), 1) 20%,
+                    rgba(var(--text-color), 0.5) 40%,
+                    rgba(var(--text-color), 0.5) 60%,
+                    rgba(var(--text-color), 1) 80%);
+            -webkit-background-clip: text;
+
+            background-size: 200% auto;
+            color: transparent;
+        }
+    }
+}
+
+.bottom {
+    margin-bottom: $bottom-triangle-height * 4;
+
+    &:before {
+        border-top: $bottom-triangle-height solid var(--current-color);
+        border-bottom: calc($bottom-triangle-height * 2) solid transparent;
+        left: calc($bottom-triangle-height * 2);
+        bottom: calc(-2.5 * $bottom-triangle-height);
+    }
+}
+
+.top {
+    margin-top: $bottom-triangle-height * 4;
+
+    &:before {
+        top: calc(-2.5 * $bottom-triangle-height);
+        border-bottom: $bottom-triangle-height solid var(--current-color);
+        border-top: calc($bottom-triangle-height * 2) solid transparent;
+    }
+}
+
+@keyframes enter-left {
+    from {
+        transform: scale(0.8) translateX(-30%) translateY(20%);
+    }
+
+    to {
+        transform: scale(1) translateX(0%) translateY(0%);
+    }
+}
+
+@keyframes enter-right {
+    from {
+        transform: scale(0.8) translateX(30%) translateY(20%);
+    }
+
+    to {
+        transform: scale(1) translateX(0%) translateY(0%);
+    }
+}
+
+@keyframes live-typing {
+    to {
+        background-position: -200% center;
+    }
+}
+</style>

package/dist/runtime/components/e/chat-renderer.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="d-flex flex-column">
+    <e-dropdown
+      :items="items"
+      width="13rem"
+      :visible="status.dropdown.visible"
+      fixed
+      :position="{ x: status.dropdown.x, y: status.dropdown.y }"
+      @update:visible="status.dropdown.visible = $event"
+    />
+
+    <slot
+      v-for="m in computedMessages"
+      :key="m.id"
+      v-bind="m"
+      :name="(m.status === 'system') ? 'system' : 'default'"
+      @click.right.prevent="openDropdown"
+    />
+  </div>
+</template>
+<script setup lang="ts">
+import { mdiDelete, mdiFlag, mdiMinusCircle } from "@mdi/js";
+import { reactive, computed } from "#imports";
+
+const status = reactive({ dropdown: { visible: false, x: 0, y: 0 } });
+const items = [{ icon: mdiDelete, name: "Delete" }, { icon: mdiMinusCircle, name: "Delete just for me" }, { icon: mdiFlag, name: "Dox" }];
+
+const openDropdown = ({ clientX, clientY }: MouseEvent) => {
+    status.dropdown.visible = true;
+    status.dropdown.x = clientX;
+    status.dropdown.y = clientY;
+
+}
+type MessageArray = {
+    liveTyping?: boolean;
+    pointer?: boolean;
+    id: string;
+    text: string;
+    date?: Date;
+    status: "sending" | "sent" | "read" | "received" | "system";
+    [key: string]: any;
+}[]
+const props = defineProps<{
+    messages: MessageArray
+}>()
+
+const computedMessages = computed(() => {
+    const newMessages = <MessageArray>[];
+    const msgs = props.messages;
+    const entries = props.messages.entries();
+    for (const [i, m] of entries ) {
+        if ((msgs[i + 1] != undefined) && (msgs[i + 1].status === msgs[i].status)) {
+            m.pointer = false;
+            const nextDate = msgs[i + 1].date;
+            const thisDate = msgs[i].date;
+            if (nextDate && thisDate && nextDate.getMinutes() == thisDate.getMinutes() && nextDate.getHours() == thisDate.getHours() && msgs[i + 1].status == msgs[i].status) {
+                m.hideStatus = true
+            }
+
+        } else {
+           m.pointer = true
+        }
+
+        switch (m.status) {
+            case "system":
+                m.hideStatus = true;
+                m.pointer = false;
+                m.posx = "center";
+                m.textAlign = "center";
+                break;
+            case "received":
+                m.posx = "left";
+                break;
+            default:
+                m.posx = "right";
+                break;
+        }
+
+        newMessages.push(m);
+
+    }
+
+    return newMessages
+})
+</script>

package/dist/runtime/components/e/dropdown.vue

@@ -13,6 +13,7 @@
         v-if="visibleComputed"
         ref="list"
         class="list rounded"
+        :style="{position:(fixed?'fixed':undefined)}"
       >
         <component
           :is="item.href ? 'a' : 'div'"
@@ -49,7 +50,7 @@
 </template>
 <script setup lang="ts">
 import { computed, ref, reactive, watch/*, nextTick*/ } from "#imports";
-import _ from "lodash";
+import * as _ from "lodash";
 
 interface DropdownItem {
   name: string;
@@ -68,6 +69,8 @@ const props = withDefaults(
     items: DropdownItem[];
     visible?: boolean | null;
     paddingY?: string;
+    position?: { x: number, y: number }
+    fixed?:boolean;
   }>(),
   { center: false, visible: null, paddingY: "", modelValue: undefined }
 );
@@ -111,24 +114,36 @@ function computeWidth(input: string | number) {
 }
 
 const updatePosition = async () => {
-  if (
-    !visibleComputed.value ||
-    !activator.value ||
-    !activator.value.firstElementChild
-  ) {
+
+  if (!visibleComputed.value) {
     window.removeEventListener("resize", debouncedUpdatePosition);
     return;
   }
-  const activatorRect = activator.value.getBoundingClientRect();
 
-  if (props.width === "100%") {
-    state.width = activatorRect.width;
+  if (activator.value) {
+    const activatorRect = activator.value.getBoundingClientRect();
+
+    if (props.width === "100%") {
+      state.width = activatorRect.width;
+    } else {
+      state.width = computeWidth(props.width);
+    }
+
+    state.y = activatorRect.height;
+    state.x = 0;
+
   } else {
     state.width = computeWidth(props.width);
-  }
 
-  state.y = activatorRect.height;
+
+  }
+  if (props.position) {
+      state.x = props.position.x;
+      state.y = props.position.y;
+      return;
+    }
   state.x = 0;
+  state.y = 0;
 
   /* await nextTick();
   if (!list.value) return;
@@ -172,11 +187,12 @@ const onActivatorClick = () => {
 .t-dropdown {
   position: relative;
 }
+
 .list {
   position: absolute;
-  left: v-bind('state.x + "px"');
-  top: v-bind('state.y + "px"');
-  width: v-bind('state.width+"px"');
+  left: v-bind('(state.x) + "px"');
+  top: v-bind('(state.y) + "px"');
+  width: v-bind('state.width + "px"');
   display: flex;
 
   background-color: var(--e-color-elev-2);
@@ -199,8 +215,8 @@ const onActivatorClick = () => {
     &:hover {
       background-color: rgba(var(--e-color-dark-rgb), 0.2);
     }
-    &:focus {
-    }
+
+    &:focus {}
 
     &.active {
       background-color: rgba(var(--e-color-primary-rgb), 0.2);

package/dist/runtime/components/e/iconButton.vue

@@ -3,6 +3,7 @@
     class="a-btn"
     :loading="loading"
     :solid="false"
+    :type="type"
     background="transparent"
   >
     <e-icon
@@ -13,7 +14,7 @@
 </template>
 <script setup lang="ts">
 withDefaults(
-  defineProps<{ icon: string; size?: string; loading?: boolean }>(),
+  defineProps<{ icon: string; size?: string; loading?: boolean, type?: "button" | "submit" | "reset" }>(),
   { size: "21" }
 );
 </script>

package/dist/runtime/components/e/input/text.vue

@@ -3,7 +3,7 @@
   <div
     class="wrapper fullwidth"
     :style="inputState.overtakeStyle"
-    :class="{ rounded: solid, solid }"
+    :class="{ rounded: rounded==undefined?solid:rounded, solid }"
     @click="focus"
   >
     <e-icon
@@ -82,6 +82,7 @@ const props = withDefaults(
     label: string;
     modelValue?: string;
     solid?: boolean;
+    rounded?: boolean;
     type?: string;
     autocomplete?: string;
     disabled?: boolean;
@@ -98,6 +99,7 @@ const props = withDefaults(
     modelValue: "",
     autocomplete: "off",
     height: "unset",
+    rounded:undefined,
   }
 );
 

package/dist/runtime/css/util.scss

@@ -151,7 +151,10 @@ body {
 .text-center {
   text-align: center;
 }
-
+.text-secondary{
+  opacity: 0.8;
+  font-size: small;
+}
 .e-blur {
   background-color: rgba(0, 0, 0, 0.9);
 }
@@ -175,3 +178,16 @@ label {
   text-decoration: none !important;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
+
+.slide-up-enter-active,
+.slide-up-leave-active {
+  transition: all 0.5s ease-in-out;
+}
+
+.slide-up-enter-from {
+  transform: translateY(100%);
+}
+
+.slide-up-leave-to {
+  transform: translateY(-100%);
+}

package/dist/runtime/plugin.mjs

@@ -14,6 +14,17 @@ export default defineNuxtPlugin(() => {
             return result.concat(suffix ? "-".concat(suffix) : "", ")");
           }
           return p;
+        },
+        makeid: (length) => {
+          let result = "";
+          const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+          const charactersLength = characters.length;
+          let counter = 0;
+          while (counter < length) {
+            result += characters.charAt(Math.floor(Math.random() * charactersLength));
+            counter += 1;
+          }
+          return result;
         }
       }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@exakt/ui",
-  "version": "0.0.12",
+  "version": "0.0.14",
   "description": "A UI library for Nuxt.js",
   "license": "MIT",
   "type": "module",
@@ -42,8 +42,9 @@
     "@types/node": "^20.2.4",
     "changelogen": "^0.5.1",
     "eslint": "^8.35.0",
+    "eslint-plugin-unused-imports": "^3.0.0",
     "mkdist": "^1.2.0",
-    "nuxt": "^3.4.3",
+    "nuxt": "^3.7.1",
     "vitest": "^0.29.2"
   },
   "directories": {
@@ -69,4 +70,4 @@
   },
   "homepage": "https://github.com/wd-4000/exakt#readme",
   "packageManager": "yarn@3.5.1"
-}
+}