@formixru/b2b-ui 1.8.0 → 1.10.0

package/.docker/dev/compose/docker-compose.yaml

@@ -0,0 +1,12 @@
+services:
+  web:
+    image: gitea.optiweb.ru/public/nginx-static
+    user: ${DOCKER_USER}
+    restart: always
+    volumes:
+      - ${HOST_DEST}:/app
+    labels:
+      - consul.meta.ingress=true
+      - consul.tags="www"
+    ports:
+      - :80

package/.docker/local/compose/docker-compose.yaml

@@ -0,0 +1,8 @@
+services:
+  php:
+    image: gitea.optiweb.ru/public/nginx-static
+    user: ${DOCKER_USER}
+    ports:
+      - 8080:80
+    volumes:
+      - ../../../:/app

package/.gitea/workflows/deploy.yaml

@@ -0,0 +1,237 @@
+name: deploy
+on:
+  push:
+    branches: ["**"]
+
+jobs:
+  deploy:
+    runs-on: dev.optiweb
+    env:
+      NODE_CONTAINER_LABEL: "20.12-2.0.0"
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Вычисление переменных
+        run: |
+          echo "BUILD_START=$(date +%s)" >> "$GITEA_ENV"
+
+          RAW="${{ gitea.ref_name }}"
+
+          if [[ "$RAW" =~ ^v[0-9]+(\.[0-9]+)+$ ]]; then
+            RAW="${RAW#v}"
+          fi
+
+          VERSION=$(echo "$RAW" | sed 's/[^a-zA-Z0-9]/-/g')
+          {
+            echo "VERSION=$VERSION"
+            echo "PROJECT=${{ gitea.event.repository.name }}"
+            echo "DEST=${DEPLOY_ROOT}/${{ gitea.event.repository.name }}/${VERSION}"
+            echo "HOST_DEST=${HOST_DEPLOY_ROOT}/${{ gitea.event.repository.name }}/${VERSION}"
+            echo "HOST_WORK_DIR=${HOST_WORK_ROOT}${{ gitea.workspace }}"
+            echo "COMPOSE_DIR=${DEPLOY_ROOT}/${{ gitea.event.repository.name }}/${VERSION}/.docker/${DEPLOY_TYPE}/compose"
+          } >> "$GITEA_ENV"
+
+          NODE_ADDR=$(curl -sS -H "X-Consul-Token: ${CONSUL_HTTP_TOKEN}" \
+          "${CONSUL_HTTP_ADDR}/v1/agent/self" | jq -r '.DebugConfig.AdvertiseAddrLAN')
+          if [ -z "$NODE_ADDR" ] || [ "$NODE_ADDR" = "null" ]; then
+            echo "::error::Не удалось получить адрес агента"
+            exit 1
+          fi
+          echo "NODE_ADDR=$NODE_ADDR" >> "$GITEA_ENV"
+
+      - name: Версии ПО и переменные с которыми выполняется сборка
+        run: |
+          echo 'PROJECT:' $PROJECT
+          echo 'VERSION:' $VERSION
+          echo 'DEST:' $DEST
+          echo 'HOST_DEST:' $HOST_DEST
+          echo 'HOST_WORK_DIR:' $HOST_WORK_DIR
+          echo 'PLACEHOLDER:' ${PLACEHOLDER}
+          echo 'BASE_DOMAIN:' ${BASE_DOMAIN}
+          echo 'DEPLOY_TYPE:' ${DEPLOY_TYPE}
+          echo 'COMPOSE_DIR:' ${COMPOSE_DIR}
+          echo 'NODE_ADDR:' ${NODE_ADDR}
+
+      - name: Запуск сборки
+        run: |
+          docker run --rm -i \
+          -e YARN_CACHE_FOLDER=/.yarn-cache \
+          -v $HOST_WORK_DIR:/app \
+          -v yarn-cache:/.yarn-cache \
+          --pull always gitea.optiweb.ru/public/node:${NODE_CONTAINER_LABEL} \
+          sh -c "yarn install && yarn build && yarn lint"
+
+      - name: Копирование собранных файлов
+        run: |
+          mkdir -p "$DEST"
+          rsync -a --info=copy,del --delete --exclude '.git' ./ "$DEST/"
+
+      - name: Запуск контейнеров
+        run: docker compose -f ${COMPOSE_DIR}/docker-compose.yaml -p "${PROJECT}_${VERSION}" up -d --pull always --remove-orphans
+
+      - name: Дерегистрация прежних записей версии
+        run: |
+          SVC_NAME="${VERSION}-${PROJECT}-${PLACEHOLDER}"
+          curl -sS -H "X-Consul-Token: ${CONSUL_HTTP_TOKEN}" \
+          "${CONSUL_HTTP_ADDR}/v1/agent/services" | \
+          jq -r --arg name "$SVC_NAME" \
+            'to_entries[] | select(.value.Service == $name) | .key' | \
+          while read -r sid; do
+            echo "Дерегистрирую прежнюю запись: $sid"
+            curl -sS -H "X-Consul-Token: ${CONSUL_HTTP_TOKEN}" \
+            -X PUT "${CONSUL_HTTP_ADDR}/v1/agent/service/deregister/${sid}"
+          done
+
+      - name: Регистрация сервисов в consul
+        run: |
+          cd "${COMPOSE_DIR}"
+          COMPOSE="docker compose -f docker-compose.yaml -p ${PROJECT}_${VERSION}"
+          SVC_NAME="${VERSION}-${PROJECT}-${PLACEHOLDER}"
+
+          ALL_TAGS=""     # накопитель всех тегов ingress-сервисов
+
+          for service in $($COMPOSE ps --services); do
+            for cid in $($COMPOSE ps -q "$service"); do
+              [ -z "$cid" ] && continue
+
+              tags=""; additional_meta=""; ingress=""; first=true
+              while IFS='=' read -r key value; do
+                key=$(echo "$key"   | sed 's/^[[:space:]]*//; s/[[:space:]]*$//')
+                value=$(echo "$value" | sed 's/^[[:space:]]*//; s/[[:space:]]*$//; s/^"\(.*\)"$/\1/')
+                case "$key" in
+                  consul.meta.ingress)
+                    ingress="$value" ;;
+                  consul.meta.*)
+                    mkey=$(echo "$key" | sed 's/^consul\.meta\.//')
+                    $first && first=false || additional_meta="${additional_meta},"
+                    additional_meta="${additional_meta}\"$mkey\":\"$value\"" ;;
+                  consul.tags)
+                    tags=$(echo "$value" | sed 's/[^,]*/"&"/g') ;;
+                esac
+              done < <(docker inspect --format='{{range $k,$v := .Config.Labels}}{{$k}}={{$v}}{{"\n"}}{{end}}' "$cid" | grep '^consul')
+
+              if [ -z "$tags" ]; then
+                echo "$service: без consul.tags, пропуск"; continue
+              fi
+              if [ "$ingress" != "true" ]; then
+                echo "$service: ingress не true (='$ingress'), пропуск роутинга"; continue
+              fi
+
+              pnum=$(docker inspect --format='{{range $p,$c := .NetworkSettings.Ports}}{{$p}} {{end}}' "$cid" | awk '{print $1}' | cut -d/ -f1)
+              [ -z "$pnum" ] && { echo "$service: нет портов, пропуск"; continue; }
+              pext=$($COMPOSE port "$service" "$pnum" | cut -d: -f2)
+              [ -z "$pext" ] && { echo "$service: порт не опубликован, пропуск"; continue; }
+
+              # накапливаем теги этого сервиса (снимаем кавычки, что sed навесил для JSON)
+              plain_tags=$(echo "$tags" | sed 's/"//g; s/,/ /g')
+              ALL_TAGS="${ALL_TAGS} ${plain_tags}"
+
+              meta="\"project\":\"${PROJECT}\",\"version\":\"${VERSION}\",\"placeholder\":\"${PLACEHOLDER}\",\"ingress\":\"${ingress}\""
+              [ -n "$additional_meta" ] && meta="${meta},${additional_meta}"
+
+              BODY="{
+                \"ID\": \"${cid}\",
+                \"Name\": \"${SVC_NAME}\",
+                \"Address\": \"${NODE_ADDR}\",
+                \"Port\": ${pext},
+                \"Tags\": [${tags}],
+                \"Meta\": {${meta}},
+                \"Check\": {
+                  \"TCP\": \"127.0.0.1:${pext}\",
+                  \"Interval\": \"10s\"
+                }
+              }"
+
+              echo "Регистрирую $service cid=${cid:0:12} порт=$pext теги=[$tags] ingress=$ingress"
+              RESP=$(curl -sS -w "\n%{http_code}" \
+                -H "X-Consul-Token: ${CONSUL_HTTP_TOKEN}" \
+                -H 'Content-Type: application/json' \
+                -X PUT --data "$BODY" \
+                "${CONSUL_HTTP_ADDR}/v1/agent/service/register")
+              CODE=$(echo "$RESP" | tail -n1)
+              if [ "$CODE" != "200" ]; then
+                echo "::warning::Регистрация $service вернула $CODE: $(echo "$RESP" | head -n-1)"
+              fi
+            done
+          done
+
+          # нормализуем список тегов (убираем лишние пробелы) и сохраняем для шага уведомления
+          ALL_TAGS=$(echo "$ALL_TAGS" | tr -s ' ' | sed 's/^ //; s/ $//')
+          echo "ALL_TAGS=$ALL_TAGS" >> "$GITEA_ENV"
+          echo "Собранные теги для уведомления: $ALL_TAGS"
+
+      - name: Уведомление в Telegram
+        if: always()
+        run: |
+          STATUS="${{ job.status }}"
+          case "$STATUS" in
+            success) ICON="✅"; WORD="успешно" ;;
+            failure) ICON="❌"; WORD="с ошибкой" ;;
+            *)       ICON="⚠️"; WORD="$STATUS" ;;
+          esac
+
+          # длительность сборки
+          if [ -n "$BUILD_START" ]; then
+            ELAPSED=$(( $(date +%s) - BUILD_START ))
+            MIN=$(( ELAPSED / 60 ))
+            SEC=$(( ELAPSED % 60 ))
+            if [ "$MIN" -gt 0 ]; then
+              DURATION="${MIN} м ${SEC} с"
+            else
+              DURATION="${SEC} с"
+            fi
+          else
+            DURATION="—"
+          fi
+
+          md_escape() {
+            printf '%s' "$1" | sed 's/[\\_*`\[]/\\&/g'
+          }
+
+          COMMIT_MSG_RAW=$(git log -1 --pretty=%s 2>/dev/null || echo "—")
+          COMMIT_MSG=$(md_escape "$COMMIT_MSG_RAW")
+          REF=$(md_escape "${{ gitea.ref_name }}")
+          ACTOR=$(md_escape "${{ gitea.actor }}")
+          PROJECT_ESC=$(md_escape "$PROJECT")
+
+          SHA_FULL="${{ gitea.sha }}"
+          SHA_SHORT="${SHA_FULL:0:8}"
+          COMMIT_URL="${{ gitea.server_url }}/${{ gitea.repository }}/commit/${SHA_FULL}"
+
+          DOMAINS=""
+          for tag in $ALL_TAGS; do
+            DOMAINS="${DOMAINS}\nhttp://${tag}.${VERSION}.${PROJECT}.${PLACEHOLDER}.${BASE_DOMAIN}"
+          done
+          [ -z "$ALL_TAGS" ] && DOMAINS="\n(нет ingress-сервисов)"
+
+          MESSAGE=$(printf '%s Деплой %s / %s завершён %s\nВетка: %s\nКоммит: [%s](%s)\nСообщение: %s\nАвтор: %s\nВремя сборки: %s\nПлощадка: %s.%s\nАдреса:%b' \
+            "$ICON" "$PROJECT_ESC" "$VERSION" "$WORD" \
+            "$REF" "$SHA_SHORT" "$COMMIT_URL" "$COMMIT_MSG" "$ACTOR" \
+            "$DURATION" "$PLACEHOLDER" "$BASE_DOMAIN" "$DOMAINS")
+
+          HTTP_BODY=$(curl -sS --max-time 15 \
+            -U "${TELEGRAM_PROXY_LOGIN}:${TELEGRAM_PROXY_PASS}" \
+            -x "${TELEGRAM_PROXY_ADDRESS}" \
+            -w "\nHTTP_CODE=%{http_code}" \
+            -X POST "https://api.telegram.org/bot${TELEGRAM_TOKEN}/sendMessage" \
+            --data-urlencode "chat_id=${TELEGRAM_CHAT_ID}" \
+            --data-urlencode "text=${MESSAGE}" \
+            --data-urlencode "parse_mode=Markdown" \
+            --data-urlencode "disable_web_page_preview=true" 2>&1)
+          RC=$?
+          echo "curl exit=$RC"
+          echo "response: $HTTP_BODY"
+          if [ $RC -ne 0 ]; then
+            echo "::warning::curl завершился с кодом $RC — $HTTP_BODY"
+          elif ! echo "$HTTP_BODY" | grep -q 'HTTP_CODE=200'; then
+            echo "::warning::Telegram API вернул не 200 — $HTTP_BODY"
+          else
+            echo "Уведомление отправлено"
+          fi
+        env:
+          TELEGRAM_TOKEN: ${{ secrets.TELEGRAM_TOKEN }}
+          TELEGRAM_CHAT_ID: ${{ secrets.TELEGRAM_CHAT_ID }}
+          TELEGRAM_PROXY_ADDRESS: ${{ secrets.TELEGRAM_PROXY_ADDRESS }}
+          TELEGRAM_PROXY_LOGIN: ${{ secrets.TELEGRAM_PROXY_LOGIN }}
+          TELEGRAM_PROXY_PASS: ${{ secrets.TELEGRAM_PROXY_PASS }}

package/.gitea/workflows/teardown.yaml

@@ -0,0 +1,47 @@
+name: teardown
+on:
+  workflow_dispatch:
+
+jobs:
+  teardown:
+    runs-on: optiweb
+    steps:
+      - name: Вычисление переменных
+        run: |
+          RAW="${{ gitea.ref_name }}"
+
+          if [[ "$RAW" =~ ^v[0-9]+(\.[0-9]+)+$ ]]; then
+            RAW="${RAW#v}"
+          fi
+
+          VERSION=$(echo "$RAW" | sed 's/[^a-zA-Z0-9]/-/g')
+          {
+            echo "VERSION=$VERSION"
+            echo "PROJECT=${{ gitea.event.repository.name }}"
+            echo "DEST=${DEPLOY_ROOT}/${{ gitea.event.repository.name }}/${VERSION}"
+            echo "HOST_DEST=${HOST_DEPLOY_ROOT}/${{ gitea.event.repository.name }}/${VERSION}"
+            echo "COMPOSE_DIR=${DEPLOY_ROOT}/${{ gitea.event.repository.name }}/${VERSION}/.docker/${DEPLOY_TYPE}/compose"
+          } >> "$GITEA_ENV"
+
+      - name: Дерегистрация записей версии в consul
+        run: |
+          SVC_NAME="${VERSION}-${PROJECT}-${PLACEHOLDER}"
+          FOUND=0
+          curl -sS -H "X-Consul-Token: ${CONSUL_HTTP_TOKEN}" \
+          "${CONSUL_HTTP_ADDR}/v1/agent/services" | jq -r --arg name "$SVC_NAME" \
+            'to_entries[] | select(.value.Service == $name) | .key' | \
+          while read -r sid; do
+            echo "Дерегистрирую: $sid"
+            curl -sS -H "X-Consul-Token: ${CONSUL_HTTP_TOKEN}" \
+            -X PUT "${CONSUL_HTTP_ADDR}/v1/agent/service/deregister/${sid}"
+          done
+
+      - name: Остановка контейнеров
+        run: |
+          if [ -d "$COMPOSE_DIR" ]; then
+            docker compose -f "$COMPOSE_DIR/docker-compose.yaml" -p "${PROJECT}_${VERSION}" down --remove-orphans
+          else
+            echo "compose-каталог не найден, останавливаю по метке проекта"
+            docker ps -q --filter "label=com.docker.compose.project=${PROJECT}_${VERSION}" \
+              | xargs -r docker rm -f
+          fi

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## v1.10.0
+
+- Табы: атрибут data-tabs-native для нативных ссылок
+
+## v1.9.0
+
+- Табы: поддержка тегов кроме `button`
+
 ## v1.8.0
 
 - Возвращаем список файлов при событии upload в FileInput

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@formixru/b2b-ui",
-    "version": "1.8.0",
+    "version": "1.10.0",
     "type": "module",
     "repository": {
         "type": "git",

package/src/components/tabs/index.js

@@ -19,14 +19,25 @@ const setLeftWidth = async ($line, $el) => {
     }).finished;
 };
 
+const setActive = ($el, active) => {
+    if ($el.tagName === 'BUTTON') {
+        $el.disabled = active;
+    } else if (active) {
+        $el.dataset.disabled = '';
+    } else {
+        delete $el.dataset.disabled;
+    }
+};
+
 export const setInitLineStyles = ($b) => {
     const $nav = $b.querySelector('.tabs__nav');
     const $item = $nav.querySelectorAll('.tabs__item');
     const $line = $nav.querySelector('.tabs__line');
 
-    const $el = [...$item].find((el) => {
-        return el.disabled || (el.tagName !== 'BUTTON' && !el.href);
-    });
+    const $el =
+        [...$item].find((el) => {
+            return el.tagName === 'BUTTON' ? el.disabled : el.dataset.disabled !== undefined;
+        }) || $item[0];
 
     setLeftWidth($line, $el);
     // Прокручиваем до нужного таба
@@ -54,83 +65,71 @@ export const init = async ($b) => {
     const handleItemClick = async (e) => {
         const $el = e.currentTarget;
         const index = [...$item].indexOf($el);
-        if ($el.tagName === 'BUTTON') {
-            if ($el.dataset.tabsFetch && $content[index].innerHTML.trim() === '') {
-                showLoader();
-                try {
-                    const response = await fetch($el.dataset.tabsFetch, {
-                        method: 'GET',
-                        headers: {
-                            'X-Requested-With': 'XMLHttpRequest',
-                            'X-Session-Id': BX.message('bitrix_sessid'),
-                        },
-                    });
-                    if (!response.ok) {
-                        throw response;
-                    }
-                    const data = await response.text();
-                    hideLoader();
-                    // Вставляем полученный HTML
-                    $content[index].innerHTML = data;
-                    // Переключаем таб
-                    for (const i of $item) i.disabled = false;
-                    $el.disabled = true;
-                    for (const [i, c] of $content.entries()) {
-                        if (i === index) {
-                            c.hidden = false;
-                            for (const swiperEl of c.querySelectorAll('.swiper')) {
-                                if (swiperEl.swiper) {
-                                    swiperEl.swiper.update();
-                                }
-                            }
-                            for (const tabsEl of c.querySelectorAll('.tabs')) {
-                                setInitLineStyles(tabsEl);
-                            }
-                            // Инициализируем полученный HTML
-                            initTabsContent($content[index]);
-                        } else {
-                            c.hidden = true;
-                        }
-                    }
-                } catch (error) {
-                    hideLoader();
-                    if (error.status === 401) {
-                        location.reload();
-                    } else {
-                        errorHandler(error);
-                    }
+
+        // Ссылка с нативным поведением — отдаём клик браузеру
+        if ($el.dataset.tabsNative !== undefined) return;
+
+        if ($el.tagName === 'A') {
+            e.preventDefault();
+        }
+
+        if ($el.dataset.tabsFetch && $content[index].innerHTML.trim() === '') {
+            showLoader();
+            try {
+                const response = await fetch($el.dataset.tabsFetch, {
+                    method: 'GET',
+                    headers: {
+                        'X-Requested-With': 'XMLHttpRequest',
+                        'X-Session-Id': BX.message('bitrix_sessid'),
+                    },
+                });
+                if (!response.ok) {
+                    throw response;
                 }
-            } else {
-                // Переключаем таб
-                for (const i of $item) i.disabled = false;
-                $el.disabled = true;
-                for (const [i, c] of $content.entries()) {
-                    if (i === index) {
-                        c.hidden = false;
-                        for (const swiperEl of c.querySelectorAll('.swiper')) {
-                            if (swiperEl.swiper) {
-                                swiperEl.swiper.update();
-                            }
-                        }
-                        for (const tabsEl of c.querySelectorAll('.tabs')) {
-                            setInitLineStyles(tabsEl);
-                        }
-                        // Инициализируем полученный HTML
-                        initTabsContent($content[index]);
-                    } else {
-                        c.hidden = true;
-                    }
+                const data = await response.text();
+                hideLoader();
+                // Вставляем полученный HTML
+                $content[index].innerHTML = data;
+            } catch (error) {
+                hideLoader();
+                if (error.status === 401) {
+                    location.reload();
+                } else {
+                    errorHandler(error);
                 }
+                return;
             }
+        }
 
-            if ($nav.swiper) {
-                $nav.swiper.slideTo(index);
-            }
+        // Переключаем таб
+        for (const i of $item) setActive(i, false);
+        setActive($el, true);
 
-            if ($line) {
-                setLeftWidth($line, $el);
+        for (const [i, c] of $content.entries()) {
+            if (i === index) {
+                c.hidden = false;
+                for (const swiperEl of c.querySelectorAll('.swiper')) {
+                    if (swiperEl.swiper) {
+                        swiperEl.swiper.update();
+                    }
+                }
+                for (const tabsEl of c.querySelectorAll('.tabs')) {
+                    setInitLineStyles(tabsEl);
+                }
+                // Инициализируем полученный HTML
+                initTabsContent($content[index]);
+            } else {
+                c.hidden = true;
             }
         }
+
+        if ($nav.swiper) {
+            $nav.swiper.slideTo(index);
+        }
+
+        if ($line) {
+            setLeftWidth($line, $el);
+        }
     };
 
     if ($nav.swiper) {

package/src/components/tabs/index.scss

@@ -102,6 +102,11 @@ $b: '.tabs';
         &.swiper-slide {
             width: auto;
         }
+
+        &[data-disabled] {
+            color: $font-color-primary;
+            pointer-events: none;
+        }
     }
 
     &__label {