feat(v1-components): UiCopyButton component

Author: cmath10

packages/v1-components/src/common/components/copy-button.ts

@@ -0,0 +1,16 @@
+import type { UiPopperProperties } from '@/common/components/popper'
+import type { SIZE } from '@/common/components/button'
+
+export type TooltipOptions = Omit<
+  UiPopperProperties,
+  | 'target'
+  | 'targetTriggers'
+  | 'popperTriggers'
+  | 'globalTriggers'
+>
+
+export type UiCopyButtonProperties = {
+  text: string;
+  size: SIZE;
+  tooltipOptions?: TooltipOptions;
+}

packages/v1-components/src/host.ts

@@ -2,6 +2,7 @@ export { default as UiAvatar } from '@/host/components/avatar/UiAvatar.vue'
 export { default as UiAvatarList } from '@/host/components/avatar/UiAvatarList.vue'
 export { default as UiButton } from '@/host/components/button/UiButton.vue'
 export { default as UiCheckbox } from '@/host/components/checkbox/UiCheckbox.vue'
+export { default as UiCopyButton } from '@/host/components/copy-button/UiCopyButton.vue'
 export { default as UiDate } from '@/host/components/date/UiDate.vue'
 export { default as UiError } from '@/host/components/error/UiError.vue'
 export { default as UiImage } from '@/host/components/image/UiImage.vue'

packages/v1-components/src/host/components/copy-button/UiCopyButton.vue

@@ -0,0 +1,141 @@
+<template>
+    <div
+        ref="root"
+        class="ui-v1-copy-button"
+        @mouseenter="onMouseEnter"
+        @mouseleave="onMouseLeave"
+        @click="copy"
+    >
+        <slot name="trigger">
+            <UiButton :size="size" appearance="tertiary">
+                <IconCopy />
+            </UiButton>
+        </slot>
+
+        <UiTooltip
+            v-model:visible="visible"
+            :target="rootTarget"
+            :target-triggers="[]"
+            v-bind="{
+                delay: { hide: 500 },
+                ...tooltipOptions,
+            }"
+        >
+            <div class="ui-v1-copy-button__tooltip">
+                <template v-if="copied">
+                    <div class="ui-v1-copy-button__icon">
+                        <IconCheckmarkCircleOutlined />
+                    </div>
+
+                    <div class="ui-v1-copy-button__text">
+                        <slot name="hint-copied" />
+                    </div>
+                </template>
+
+                <slot v-else name="hint" />
+            </div>
+        </UiTooltip>
+
+        <input
+           v-if="!clipboardAvailable"
+           ref="input"
+           :value="text"
+           class="ui-v1-copy-button__area"
+           type="text"
+        >
+    </div>
+</template>
+
+<script lang="ts" setup>
+import type { PropType } from 'vue'
+import type { TooltipOptions } from '@/common/components/copy-button'
+
+import IconCheckmarkCircleOutlined from '~assets/sprites/actions/checkmark-circle-outlined.svg'
+import IconCopy from '~assets/sprites/media-and-editing/copy.svg'
+import UiButton from '@/host/components/button/UiButton.vue'
+import UiTooltip from '@/host/components/tooltip/UiTooltip.vue'
+
+import {
+  computed,
+  onMounted,
+  ref,
+} from 'vue'
+
+import { SIZE } from '@/common/components/button'
+
+const props = defineProps({
+  /** Текст для копирования в буфер обмена */
+  text: {
+    type: String,
+    required: true,
+  },
+
+  /** Размер кнопки */
+  size: {
+    type: String as unknown as PropType<SIZE | `${SIZE}`>,
+    default: SIZE.XS,
+  },
+
+  /** Объект, содержащий параметры настройки Tooltip */
+  tooltipOptions: {
+    type: Object as PropType<TooltipOptions>,
+    default: () => ({}),
+  },
+})
+
+const root = ref<HTMLElement | null>(null)
+const rootTarget = computed(() => root)
+
+const input = ref<HTMLInputElement | null>(null)
+
+const visible = ref(false)
+const copied = ref(false)
+const clipboardAvailable = ref(false)
+
+let copyTimer = null as ReturnType<typeof setTimeout> | null
+
+const emit = defineEmits(['error'])
+
+onMounted(() => {
+  clipboardAvailable.value = navigator.clipboard && 'writeText' in navigator.clipboard
+})
+
+const copy = async () => {
+  try {
+    if (clipboardAvailable.value) {
+      await navigator.clipboard.writeText(props.text)
+
+      copied.value = true
+    } else {
+      input.value?.focus()
+      input.value?.select()
+
+      copied.value = document.execCommand('copy')
+    }
+  } catch (e) {
+    emit('error', e)
+  }
+}
+
+const onMouseEnter = () => {
+  visible.value = true
+
+  if (copyTimer) {
+    clearTimeout(copyTimer)
+    copyTimer = null
+  }
+}
+
+const onMouseLeave = () => {
+  visible.value = false
+
+  if (copyTimer) {
+    clearTimeout(copyTimer)
+    copyTimer = null
+  }
+
+  copyTimer = setTimeout(() => copied.value = false, 200)
+}
+</script>
+
+<style lang="less" src="./copy-button.less" />

packages/v1-components/src/host/components/copy-button/UiCopyButton.vue.d.ts

@@ -0,0 +1,6 @@
+import type { DefineComponent } from '@/common/vue'
+import type { UiCopyButtonProperties } from '@/common/components/copy-button'
+
+declare const UiCopyButton: DefineComponent<UiCopyButtonProperties>
+
+export default UiCopyButton

packages/v1-components/src/host/components/copy-button/copy-button.less

@@ -0,0 +1,36 @@
+@import (reference) '../../../../assets/stylesheets/palette.less';
+
+.ui-v1-copy-button {
+  display: inline-block;
+  vertical-align: top;
+  position: relative;
+
+  &__tooltip {
+    display: flex;
+    align-items: center;
+  }
+
+  &__icon {
+    flex-shrink: 0;
+    width: 16px;
+    height: 16px;
+    color: @green-500;
+    margin-left: -2px;
+    margin-right: 4px;
+  }
+
+  &__text {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    min-width: 0;
+  }
+
+  &__area {
+    position: absolute;
+    left: -9999px;
+    opacity: 0;
+    width: 10px;
+    height: 10px;
+  }
+}

packages/v1-components/src/remote.ts

@@ -1,6 +1,7 @@
 export * from '@/remote/components/avatar'
 export * from '@/remote/components/button'
 export * from '@/remote/components/checkbox'
+export * from '@/remote/components/copy-button'
 export * from '@/remote/components/error'
 export * from '@/remote/components/link'
 export * from '@/remote/components/loader'

packages/v1-components/src/remote/components/copy-button.ts

@@ -0,0 +1,25 @@
+import type { RemoteProperties } from '@/remote/scaffolding'
+import type { SchemaType } from '@omnicajs/vue-remote/remote'
+
+import type {
+  SerializedEvent,
+  SerializedFocusEvent,
+} from '@omnicajs/vue-remote/types/events'
+
+import type { UiCopyButtonProperties } from '@/common/components/copy-button'
+
+import { defineRemoteComponent } from '@omnicajs/vue-remote/remote'
+
+export const UiCopyButtonType = 'UiCopyButton' as SchemaType<
+  'UiCopyButton',
+  RemoteProperties<UiCopyButtonProperties>
+>
+
+export const UiCopyButton = defineRemoteComponent(
+  UiCopyButtonType,
+  ['click', 'focus', 'blur'] as unknown as {
+    'click': (event: SerializedEvent) => boolean,
+    'focus': (event: SerializedFocusEvent) => boolean,
+    'blur': (event: SerializedEvent) => boolean,
+  }
+)

packages/v1-components/storybook/stories/UiCopyButton.mdx

@@ -0,0 +1,39 @@
+import ToReact from '../ToReact.ts'
+
+import ExampleBasic from './UiCopyButtonExamples/ExampleBasic.vue'
+
+# UiCopyButton
+
+Кнопки для копирования текста
+
+## Механика
+
+При клике на кнопку (по-умолчанию третичная) копируется заранее заготовленный текст. Кнопка при этом имеет всплывающую
+подсказку, контент которой на некоторое время меняется после копирования текста в буфер обмена (индикация, что текст
+скопирован).
+
+## Применение
+
+Код:
+
+```html
+<template>
+    <UiCopyButton text="test" size="sm">
+        <template #hint>
+            Скопировать
+        </template>
+
+        <template #hint-copied>
+            Скопировано
+        </template>
+    </UiCopyButton>
+</template>
+
+<script lang="ts" setup>
+import { UiCopyButton } from '@retailcrm/embed-ui-v1-components/remote'
+</script>
+```
+
+Результат:
+
+<ToReact is={ExampleBasic} />

packages/v1-components/storybook/stories/UiCopyButton.stories.ts

@@ -0,0 +1,57 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+
+import UiCopyButton from '@/host/components/copy-button/UiCopyButton.vue'
+
+import { SIZE } from '@/common/components/button'
+
+import page from './UiCopyButton.mdx'
+
+const meta = {
+  id: 'UiCopyButton',
+
+  title: 'Components/UiCopyButton',
+
+  component: UiCopyButton,
+
+  args: {
+    text: 'Long enough text worth to be copied',
+  },
+
+  argTypes: {
+    size: {
+      options: Object.values(SIZE),
+    },
+  },
+
+  render: (args) => ({
+    components: {
+      UiCopyButton,
+    },
+
+    setup: () => ({ args }),
+
+    template: `
+      <UiCopyButton v-bind="args">
+          <template #hint>
+              Скопировать
+          </template>
+
+          <template #hint-copied>
+              Скопировано
+          </template>
+      </UiCopyButton>
+    `,
+  }),
+
+  parameters: {
+    docs: { page },
+    layout: 'centered',
+  },
+} satisfies Meta<typeof UiCopyButton>
+
+// noinspection JSUnusedGlobalSymbols
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Sandbox: Story = {}

packages/v1-components/storybook/stories/UiCopyButtonExamples/ExampleBasic.vue

@@ -0,0 +1,15 @@
+<template>
+    <UiCopyButton text="test" size="sm">
+        <template #hint>
+            Скопировать
+        </template>
+
+        <template #hint-copied>
+            Скопировано
+        </template>
+    </UiCopyButton>
+</template>
+
+<script lang="ts" setup>
+import UiCopyButton from '@/host/components/copy-button/UiCopyButton.vue'
+</script>