@v1nt1248/3nclient-lib 0.0.6 → 0.0.8

package/package.json

@@ -3,26 +3,23 @@
   "private": false,
   "license": "AGPL-3.0-or-later",
   "author": "v1nt1248",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "description": "Library for 3NWeb clients",
   "type": "module",
-  "files": [
-    "dist"
-  ],
-  "main": "./dist/ui-3n-lib.umd.cjs",
+  "files": ["dist", "src/components/"],
   "module": "./dist/ui-3n-lib.js",
-  "types": "./dist/types.d.ts",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "import": "./dist/ui-3n-lib.js",
-      "require": "./dist/ui-3n-lib.umd.cjs"
+      "import": "./dist/ui-3n-lib.js"
     },
     "./style.css": "./dist/style.css"
   },
   "scripts": {
     "dev": "vite",
     "generate:types": "vue-tsc --declaration --emitDeclarationOnly --outdir ./dist",
-    "build": "vite build && yarn generate:types",
+    "copy:dts": "cp ./src/types.d.ts ./dist",
+    "build": "vite build && yarn copy:dts",
     "preview": "vite preview",
     "stylelint": "stylelint --config .stylelint.config.cjs 'src/**/*.{vue,scss}'",
     "stylelint:fix": "stylelint --config .stylelint.config.cjs --fix 'src/**/*.{vue,scss}'",
@@ -37,7 +34,9 @@
     "dayjs": "^1.11.9",
     "lodash": "^4.17.21",
     "mitt": "^3.0.1",
-    "sanitize-html": "^2.11.0",
+    "sanitize-html": "^2.11.0"
+  },
+  "peerDependencies": {
     "vue": "^3.3.4"
   },
   "devDependencies": {
@@ -65,6 +64,8 @@
     "stylelint-scss": "^5.1.0",
     "typescript": "^5.2.2",
     "vite": "^4.4.5",
+    "vite-plugin-css-injected-by-js": "^3.3.0",
+    "vite-plugin-dts": "^3.5.3",
     "vue-tsc": "^1.8.5"
   }
 }

package/src/components/index.ts

@@ -0,0 +1,13 @@
+import Ui3nIcon from './ui3n-icon.vue'
+import type { Ui3nIconProps, Ui3nIconEmits } from './ui3n-icon.vue'
+import Ui3nButton from './ui3n-button.vue'
+import type { Ui3nButtonProps, Ui3nButtonEmits } from './ui3n-button.vue'
+
+export {
+  Ui3nIcon,
+  Ui3nIconProps,
+  Ui3nIconEmits,
+  Ui3nButton,
+  Ui3nButtonProps,
+  Ui3nButtonEmits,
+}

package/src/components/ui3n-button.vue

@@ -0,0 +1,156 @@
+<script lang="ts" setup>
+  import { computed, onMounted, ref, useSlots } from 'vue'
+  import { hasSlotContent } from '../tools/ui.helpers'
+  import Ui3nIcon from './ui3n-icon.vue'
+
+  export interface Ui3nButtonProps {
+    textColor?: string;
+    color?: string;
+    round?: boolean;
+    elevation?: boolean;
+    icon?: string;
+    iconSize?: string | number;
+    iconColor?: string;
+    disabled?: boolean;
+  }
+
+  export interface Ui3nButtonEmits {
+    (ev: 'click', value: Event): void;
+    (ev: 'focus', value: Event): void;
+    (ev: 'blur', value: Event): void;
+  }
+
+  const slots = useSlots()
+  const props = defineProps<Ui3nButtonProps>()
+  const emit = defineEmits<Ui3nButtonEmits>()
+
+  const buttonEl = ref<HTMLButtonElement | null>(null)
+  const isSlotEmpty = computed(() => !hasSlotContent(slots['default']))
+
+  onMounted(() => {
+    if (buttonEl.value) {
+      if (props.color) {
+        buttonEl.value.style.setProperty('--ui3n-button-background', props.color)
+      }
+      if (props.textColor) {
+        buttonEl.value.style.setProperty('--ui3n-button-text-color', props.textColor)
+      }
+    }
+  })
+</script>
+
+<template>
+  <button
+    ref="buttonEl"
+    :class="[
+      'ui3n-button',
+      { 'ui3n-button--round': props.round, 'ui3n-button--elevation': props.elevation },
+    ]"
+    type="button"
+    :disabled="props.disabled"
+    @click="emit('click', $event)"
+    @focusin="emit('focus', $event)"
+    @focusout="emit('blur', $event)"
+  >
+    <ui3n-icon
+      v-if="props.icon"
+      class="ui3n-button__icon"
+      :icon="props.icon"
+      :width="props.iconSize"
+      :height="props.iconSize"
+      :color="props.iconColor || 'var(--ui3n-button-text-color)'"
+    />
+    <span
+      :class="[
+        'ui3n-button__text',
+        { 'ui3n-button__text--margin': !isSlotEmpty && props.icon },
+      ]"
+    >
+      <slot />
+    </span>
+  </button>
+</template>
+
+<style lang="scss" scoped>
+  .ui3n-button {
+    --ui3n-button-text-size: 12px;
+    --ui3n-button-text-height: 16px;
+    --ui3n-button-text-color: var(--system-white, #fff);
+    --ui3n-button-background: var(--blue-main, #0090ec);
+    --ui3n-button-padding-vert: 8px;
+    --ui3n-button-padding-horiz: 16px;
+
+    display: flex;
+    align-items: center;
+    border: none;
+    outline: none;
+    padding: var(--ui3n-button-padding-vert) var(--ui3n-button-padding-horiz);
+    border-radius: 4px;
+    background: var(--ui3n-button-background);
+    font-size: var(--ui3n-button-text-size);
+    line-height: var(--ui3n-button-text-height);
+    font-weight: 600;
+    color: var(--ui3n-button-text-color);
+    background-position: center;
+    transition: background 0.5s ease-in-out;
+
+    &--round {
+      --ui3n-button-padding-vert: 4px;
+      --ui3n-button-padding-horiz: 4px;
+
+      border-radius: 50%;
+    }
+
+    &--elevation {
+      box-shadow:
+        rgba(0, 0, 0, 0.2) 0px 3px 1px -2px
+        rgba(0, 0, 0, 0.14) 0px 2px 2px 0px
+        rgba(0, 0, 0, 0.12) 0px 1px 5px 0px;
+    }
+
+    &:not([disabled]) {
+      cursor: pointer;
+
+      &:hover {
+        background:
+          var(--ui3n-button-background)
+          radial-gradient(circle, transparent 1%, var(--ui3n-button-background) 1%)
+          center/15000%;
+
+        .ui3n-button {
+          &__icon,
+          &__text {
+            opacity: 1;
+          }
+        }
+      }
+
+      &:active {
+        opacity: 1;
+        background-color: var(--gray-90, #444);
+        background-size: 100%;
+        transition: background 0s;
+      }
+    }
+
+    &__icon {
+      opacity: 0.85;
+      transition: opacity 0.2s ease-in-out;
+    }
+
+    &__text {
+      display: block;
+      opacity: 0.85;
+      transition: opacity 0.2s ease-in-out;
+
+      &--margin {
+        margin-left: 4px;
+      }
+    }
+
+    &[disabled] {
+      opacity: 0.7;
+    }
+  }
+</style>
+../tools/ui.helpers

package/src/components/ui3n-drop-files.vue

@@ -0,0 +1,171 @@
+<script lang="ts" setup>
+  import { computed, ref } from 'vue'
+
+  const props = defineProps<{
+    title?: string;
+    text?: string;
+    additionalText?: string;
+  }>()
+  const emit = defineEmits<{
+    (e: 'select', fileList: FileList): void;
+  }>()
+
+  const isOverDropPlace = ref(false)
+  const isOverDropZone = ref(false)
+  const params = computed(() => {
+    const {
+      title = 'Upload',
+    } = props
+
+    return {
+      title,
+    }
+  })
+
+  const onDragenter = (ev: MouseEvent) => {
+    ev.preventDefault()
+    isOverDropPlace.value = true
+  }
+  const onDragleave = (ev: MouseEvent) => {
+    ev.preventDefault()
+    isOverDropPlace.value = false
+  }
+  const onDropzoneDragover = (ev: MouseEvent) => {
+    ev.preventDefault()
+    ev.stopPropagation()
+  }
+  const onDropzoneDragenter = (ev: MouseEvent) => {
+    ev.preventDefault()
+    isOverDropZone.value = true
+  }
+  const onDropzoneDragleave = (ev: MouseEvent) => {
+    ev.preventDefault()
+    isOverDropZone.value = false
+  }
+  const onDrop = (ev: DragEvent) => {
+    ev.stopPropagation()
+    ev.preventDefault()
+    if (ev.dataTransfer!.files) {
+      emit('select', ev.dataTransfer!.files)
+    }
+    isOverDropPlace.value = false
+    isOverDropZone.value = false
+  }
+</script>
+
+<template>
+  <!-- eslint-disable max-len -->
+  <div
+    class="ui3n-drop-files"
+    @dragenter="onDragenter"
+    @dragleave="onDragleave"
+  >
+    <slot />
+
+    <div
+      v-if="isOverDropPlace || isOverDropZone"
+      class="ui3n-drop-files__dropzone"
+      @dragenter="onDropzoneDragenter"
+      @dragover="onDropzoneDragover"
+      @dragleave="onDropzoneDragleave"
+      @drop="onDrop"
+    >
+      <div class="ui3n-drop-files__dropzone-border" />
+      <h3 class="ui3n-drop-files__dropzone-title">
+        {{ params.title }}
+      </h3>
+      <div class="ui3n-drop-files__dropzone-icon">
+        <svg
+          width="192"
+          height="192"
+          viewBox="0 0 192 192"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M51 152C47.9333 152 45.3333 150.934 43.2 148.8C41.0667 146.667 40 144.067 40 141V119.8H46.2V141C46.2 142.2 46.7 143.3 47.7 144.3C48.7 145.3 49.8 145.8 51 145.8H141C142.2 145.8 143.3 145.3 144.3 144.3C145.3 143.3 145.8 142.2 145.8 141V119.8H152V141C152 144.067 150.933 146.667 148.8 148.8C146.667 150.934 144.067 152 141 152H51ZM93 122.4V49.2002L72.8 69.2002L68.4 65.0002L96 37.2002L123.6 65.0002L119.2 69.2002L99 49.2002V122.4H93Z"
+            fill="#212121"
+          />
+        </svg>
+      </div>
+      <div
+        v-if="props.text"
+        class="ui3n-drop-files__dropzone-text"
+      >
+        {{ props.text }}
+      </div>
+      <div
+        v-if="props.additionalText"
+        class="ui3n-drop-files__dropzone-additional"
+      >
+        {{ props.additionalText }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .ui3n-drop-files {
+    position: relative;
+    width: 100%;
+    height: 100%;
+
+    &__dropzone {
+      position: absolute;
+      background-color: var(--system-white, #fff);
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      inset: var(--half-size, 4px) var(--base-size, 8px);
+      border-radius: var(--base-size, 8px);
+      z-index: 5;
+
+      &-border {
+        position: absolute;
+        width: calc(100% - calc(var(--base-size, 8px) * 2));
+        height: calc(100% - calc(var(--base-size, 8px) * 2));
+        top: var(--base-size, 8px);
+        left: var(--base-size, 8px);
+        border-radius: var(--base-size, 8px);
+        border: 2px dashed var(--gray-50, #f2f2f2);
+        pointer-events: none;
+      }
+
+      &-title {
+        margin: 0 0 24px;
+        font-size: var(--font-24, 24px);
+        font-weight: 600;
+        color: var(--black-30, #b3b3b3);
+        pointer-events: none;
+      }
+
+      &-icon {
+        position: relative;
+        width: 160px;
+        height: 160px;
+        border-radius: 50%;
+        background-color: var(--gray-50, #f2f2f2);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        pointer-events: none;
+      }
+
+      &-text {
+        margin-top: calc(var(--base-size, 8px) * 3);
+        font-size: var(--font-12, 12px);
+        line-height: var(--font-16, 16px);
+        font-weight: 400;
+        color: var(--black-30, #b3b3b3);
+      }
+
+      &-additional {
+        margin-top: var(--half-size, 4px);
+        font-size: var(--font-12, 12px);
+        font-weight: 500;
+        color: var(--black-90, #212121);
+      }
+    }
+  }
+</style>

package/src/components/ui3n-emoji.vue

@@ -0,0 +1,64 @@
+<script lang="ts" setup>
+  import { computed, onMounted, ref } from 'vue'
+
+  const props = defineProps<{
+    emoji: string;
+    size?: string | number;
+    readonly?: boolean;
+  }>()
+  const emit = defineEmits<{
+    (ev: 'click', value: Event): void;
+  }>()
+
+  const emojiElement = ref<HTMLDivElement | null>(null)
+  const params = computed(() => {
+    const {
+      emoji,
+      size = 16,
+      readonly = false,
+    } = props
+
+    return { emoji, size, readonly }
+  })
+
+  onMounted(() => {
+    if (emojiElement.value) {
+      emojiElement.value.style.setProperty('--emoji-size', `${params.value.size}px`)
+    }
+  })
+
+  const onClick = (ev: Event) => {
+    ev.stopImmediatePropagation()
+    emit('click', ev)
+  }
+</script>
+
+<template>
+  <div
+    ref="emojiElement"
+    :class="[
+      'ui3n-emoji',
+      { 'ui3n-emoji--readonly': params.readonly },
+    ]"
+    v-on="readonly ? {} : { 'click': onClick }"
+  >
+    {{ emoji }}
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .ui3n-emoji {
+    --emoji-size: 16px;
+
+    display: flex;
+    width: var(--emoji-size);
+    height: var(--emoji-size);
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+
+    &--readonly {
+      cursor: default;
+    }
+  }
+</style>

package/src/components/ui3n-icon.vue

@@ -0,0 +1,51 @@
+<script lang="ts" setup>
+  /* eslint-disable @typescript-eslint/no-explicit-any */
+  import { Icon } from '@iconify/vue'
+
+  export interface Ui3nIconProps {
+    icon: string;
+    title?: string;
+    inline?: boolean;
+    width?: string | number;
+    height?: string | number;
+    horizontalFlip?: boolean;
+    verticalFlip?: boolean;
+    flip?: string;
+    rotate?: number;
+    color?: string;
+    onLoad?: Function;
+  }
+
+  export interface Ui3nIconEmits {
+    (ev: 'click', value: Event): void;
+  }
+
+  const props = defineProps<Ui3nIconProps>()
+  const emit = defineEmits<Ui3nIconEmits>()
+
+  const onLoad = (value: any) => {
+    if (props.onLoad) {
+      props.onLoad(value)
+    }
+  }
+  const onClick = (ev: Event) => {
+    emit('click', ev)
+  }
+</script>
+
+<template>
+  <icon
+    :icon="props.icon"
+    :title="props.title || ''"
+    :inline="props.inline"
+    :width="props.width || 16"
+    :height="props.height || 16"
+    :horizontal-flip="props.horizontalFlip"
+    :vertical-flip="props.verticalFlip"
+    :flip="props.flip"
+    :rotate="props.rotate || 0"
+    :color="props.color || 'var(--gray-90, #444)'"
+    :on-load="onLoad"
+    @click="onClick"
+  />
+</template>