@it-enterprise/forcebpm-ui-kit 1.0.2-beta.3 → 1.0.2-beta.30

package/src/FShare.vue

@@ -0,0 +1,134 @@
+<script setup>
+// FShare
+import { ref, onBeforeMount, onBeforeUnmount, inject } from 'vue'
+
+const props = defineProps({
+  buttons: {
+    type: Array,
+    default: () => []
+  }
+})
+const modelValue = ref(false)
+const dataObj = ref(null)
+
+// Inject emitter and events from plugin
+const emitter = inject('fbpm-emitter', null)
+const events = inject('fbpm-events', {})
+
+const open = params => {
+  dataObj.value = params
+  modelValue.value = true
+}
+
+const close = () => {
+  dataObj.value = null
+  modelValue.value = false
+}
+
+const applyMethod = method => {
+  method(dataObj.value)
+  close()
+}
+
+onBeforeMount(() => {
+  if (emitter && events.share) {
+    emitter.on(events.share, open)
+  }
+})
+
+onBeforeUnmount(() => {
+  if (emitter && events.share) {
+    emitter.off(events.share, open)
+  }
+})
+</script>
+<template>
+  <v-dialog v-model="modelValue" min-width="350" content-class="f-dialog">
+    <!-- Header -->
+    <div class="f-dialog-header">
+      <!-- Title -->
+      <div class="f-dialog-header-title">{{ $t('buttons.share') }}</div>
+      <v-tooltip offset="10" :text="$t('buttons.close')">
+        <template #activator="{ props: tooltipProps }">
+          <v-btn v-bind="tooltipProps" variant="text" size="32" class="f-dialog-header-action f-dialog-header-action-close" @click="close">
+            <FIcon icon="times" size="18" color="fields-light" />
+          </v-btn>
+        </template>
+      </v-tooltip>
+    </div>
+
+    <!-- Body -->
+    <div class="f-dialog-body">
+      <div class="share-wrap">
+        <template v-for="(btn, idx) in props.buttons">
+          <v-btn v-if="!btn.hide" :key="idx" variant="text" class="share-btn" color="subTitle" @click="applyMethod(btn.action)">
+            <FIcon :icon="btn.icon" size="24" :color="btn.color" />
+            <!-- <FHtmlContent :data="btn.name" /> -->
+            <span v-if="btn.name" class="share-btn-name">{{ btn.name }}</span>
+          </v-btn>
+        </template>
+      </div>
+    </div>
+  </v-dialog>
+</template>
+<style lang="scss" scoped>
+:deep(.f-dialog) {
+  background: rgb(var(--v-theme-background));
+  box-shadow: 0px 4px 20px 0px rgb(var(--v-theme-title));
+  border-radius: 5.8px;
+  display: flex;
+  flex-direction: column;
+  max-height: 90vh; // Limit for the entire dialog
+  width: auto;
+  .f-dialog-header {
+    flex-shrink: 0; // Header does not shrink
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background: rgb(var(--v-theme-title-dark));
+    border-top-left-radius: 5px;
+    border-top-right-radius: 5px;
+
+    .f-dialog-header-title {
+      font-size: 1.15em;
+      line-height: 1.25em;
+      font-weight: 600;
+      color: rgb(var(--v-theme-fields-light));
+      padding: 12px 0px 10px 20px;
+    }
+  }
+  .f-dialog-body {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-height: 0; // Important for flexbox to work with overflow
+    .share-wrap {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 12px;
+      padding: 16px;
+      justify-content: center;
+      height: 90px;
+    }
+    .share-btn .v-btn__content {
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+      width: 100px;
+    }
+    .share-btn-name {
+      width: 100px;
+      text-wrap: initial;
+    }
+  }
+}
+
+.v-theme--dark {
+  :deep(.f-dialog) {
+    box-shadow: var(--f-box-shadow);
+    .f-dialog-header {
+      border-bottom: 1px solid rgb(var(--v-theme-line));
+    }
+  }
+}
+</style>

package/src/FTruncate.vue

@@ -0,0 +1,121 @@
+<script setup>
+// FTruncate
+import { ref, useTemplateRef, watch, useAttrs } from 'vue'
+import { useElementSize } from '@vueuse/core'
+
+const props = defineProps({
+  text: {
+    type: [String, Number],
+    default: ''
+  },
+  textClass: {
+    type: String,
+    default: ''
+  },
+  textStyle: {
+    type: String,
+    default: ''
+  },
+  lines: {
+    type: [String, Number],
+    default: 1,
+    validator: value => {
+      const num = Number(value)
+      return Number.isInteger(num) && num > 0
+    }
+  },
+  isHtml: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const truncateRef = useTemplateRef('truncate-text')
+const { width } = useElementSize(truncateRef)
+const disabled = ref(true)
+const menu = ref(false)
+const attrs = useAttrs()
+const isMouseLeave = ref(true)
+
+const mouseoverHandler = () => {
+  if (isMouseLeave.value) isMouseLeave.value = false
+  if (disabled.value) return
+  setTimeout(() => {
+    if (isMouseLeave.value) return
+    menu.value = true
+  }, attrs['open-delay'] || 300)
+}
+
+const mouseleaveHandler = () => {
+  if (disabled.value) return
+  menu.value = false
+  isMouseLeave.value = true
+}
+
+watch(
+  [() => width.value, () => props.text],
+  () => {
+    if (!truncateRef.value) return
+
+    const element = truncateRef.value
+    const style = window.getComputedStyle(element)
+    const lineHeight = parseFloat(style.lineHeight)
+    const maxHeight = lineHeight * Number(props.lines)
+
+    // Checking if text needs to be truncated
+    disabled.value = element.scrollHeight <= Math.round(maxHeight) + 1
+  },
+  { immediate: true }
+)
+</script>
+
+<template>
+  <v-menu
+    v-model="menu"
+    open-on-hover
+    z-index="1005"
+    offset="0, 6"
+    location="right"
+    max-height="500px"
+    content-class="f-truncate-menu-content"
+    :disabled="disabled"
+  >
+    <template #activator="{ props: activatorProps }">
+      <div
+        v-bind="activatorProps"
+        ref="truncate-text"
+        class="f-truncate"
+        :class="textClass"
+        :style="`-webkit-line-clamp: ${lines}; ${textStyle}`"
+        @mouseenter="mouseoverHandler"
+        @mouseleave="mouseleaveHandler"
+      >
+        <FHtmlContent v-if="isHtml" :data="text" />
+        <template v-else>{{ text }}</template>
+      </div>
+    </template>
+
+    <FHtmlContent v-if="isHtml" :data="text" />
+    <div v-else>{{ text }}</div>
+  </v-menu>
+</template>
+
+<style lang="scss" scoped>
+.f-truncate {
+  line-height: 1.1em;
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  cursor: inherit;
+}
+:deep(.f-truncate-menu-content) {
+  background: rgb(var(--v-theme-background));
+  line-height: 1em;
+  font-size: 0.9em;
+  color: rgb(var(--v-theme-subTitle));
+  padding: 8px;
+  overflow: auto;
+}
+</style>