@nethserver/ns8-ui-lib 0.1.21 → 0.1.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nethserver/ns8-ui-lib",
-  "version": "0.1.21",
+  "version": "0.1.23",
   "description": "Vue.js library for NethServer 8 UI",
   "keywords": [
     "nethserver",

package/src/lib-components/NsBackupCard.vue

@@ -1,3 +1,7 @@
+<!--
+  Copyright (C) 2023 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
 <template>
   <cv-tile kind="standard" :light="light" class="ns-backup-card ns-card">
     <!-- icon -->

package/src/lib-components/NsBackupCardDetails.vue

@@ -1,3 +1,7 @@
+<!--
+  Copyright (C) 2023 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
 <template>
   <div class="ns-backup-card-details">
     <!-- repository -->

package/src/lib-components/NsButton.vue

@@ -1,3 +1,7 @@
+<!--
+  Copyright (C) 2023 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
 <template>
   <button
     class="cv-button"

package/src/lib-components/NsByteSlider.vue

@@ -1,3 +1,7 @@
+<!--
+  Copyright (C) 2023 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
 <template>
   <div :class="`ns-byte-slider cv-slider ${carbonPrefix}--form-item`">
     <div class="wrapper" :data-invalid="isInvalid">

package/src/lib-components/NsCheckbox.vue

@@ -1,3 +1,7 @@
+<!--
+  Copyright (C) 2023 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
 <template>
   <div
     class="ns-checkbox cv-checkbox"

package/src/lib-components/NsCircleTimer.vue

@@ -1,3 +1,7 @@
+<!--
+  Copyright (C) 2023 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
 <template>
   <div class="base-timer" :style="{ height: size + 'px', width: size + 'px' }">
     <svg

package/src/lib-components/NsCodeSnippet.vue

@@ -1,3 +1,7 @@
+<!--
+  Copyright (C) 2023 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
 <template>
   <div class="cv-code-snippet-multiline" :class="classes" data-code-snippet>
     <div

package/src/lib-components/NsComboBox.vue

@@ -1,3 +1,7 @@
+<!--
+  Copyright (C) 2023 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
 <template>
   <div
     :class="[

package/src/lib-components/NsDangerDeleteModal.vue

@@ -1,3 +1,7 @@
+<!--
+  Copyright (C) 2023 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
 <template>
   <NsModal
     kind="danger"
@@ -5,7 +9,7 @@
     :visible="isShown"
     @modal-hidden="onModalHidden"
     @primary-click="confirmDelete"
-    :primary-button-disabled="name !== userInput"
+    :primary-button-disabled="name !== userInput || loading"
   >
     <template slot="title">{{ title }}</template>
     <template slot="content">
@@ -93,6 +97,10 @@ export default {
       type: String,
       default: "",
     },
+    loading: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {

package/src/lib-components/NsDataTable.vue

@@ -1,3 +1,7 @@
+<!--
+  Copyright (C) 2023 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
 <template>
   <div class="ns-data-table">
     <cv-search

package/src/lib-components/NsDropdownAction.vue

@@ -1,3 +1,7 @@
+<!--
+  Copyright (C) 2023 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
 <template>
   <div data-overflow-menu :class="[`cv-overflow-menu`]" :id="uid">
     <button

package/src/lib-components/NsEmptyState.vue

@@ -1,3 +1,7 @@
+<!--
+  Copyright (C) 2023 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
 <template>
   <div class="empty-state">
     <NsLottieAnimation

package/src/lib-components/NsIconMenu.vue

@@ -1,3 +1,7 @@
+<!--
+  Copyright (C) 2023 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
 <template>
   <div
     data-overflow-menu

package/src/lib-components/NsInfoCard.vue

@@ -1,3 +1,7 @@
+<!--
+  Copyright (C) 2023 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
 <template>
   <cv-tile kind="standard" :light="light" class="info-card ns-card">
     <!-- overflow menu -->
@@ -18,24 +22,26 @@
       <cv-skeleton-text
         :paragraph="true"
         :line-count="3"
+        heading
         class="skeleton"
       ></cv-skeleton-text>
     </div>
     <template v-else>
       <div v-if="title" class="row">
-        <!-- title tooltip -->
-        <cv-tooltip
+        <h3 class="title">{{ title }}</h3>
+        <cv-interactive-tooltip
           v-if="titleTooltip"
-          alignment="center"
-          direction="bottom"
-          :tip="titleTooltip"
+          :alignment="titleTooltipAlignment"
+          :direction="titleTooltipDirection"
+          class="info title-tooltip"
         >
-          <h3 class="title">
-            {{ title }}
-          </h3>
-        </cv-tooltip>
-        <!-- no title tooltip -->
-        <h3 v-else class="title">{{ title }}</h3>
+          <template slot="trigger">
+            <Information16 />
+          </template>
+          <template slot="content">
+            <div v-html="titleTooltip"></div>
+          </template>
+        </cv-interactive-tooltip>
       </div>
       <div v-if="description" class="row">
         <div class="description">{{ description }}</div>
@@ -51,10 +57,11 @@
 <script>
 import NsSvg from "./NsSvg.vue";
 import NsInlineNotification from "./NsInlineNotification.vue";
+import Information16 from "@carbon/icons-vue/es/information/16";
 
 export default {
   name: "NsInfoCard",
-  components: { NsSvg, NsInlineNotification },
+  components: { NsSvg, NsInlineNotification, Information16 },
   props: {
     title: {
       type: String,
@@ -68,6 +75,18 @@ export default {
       type: String,
       required: false,
     },
+    titleTooltipAlignment: {
+      type: String,
+      required: false,
+      default: "center",
+      validator: (val) => ["start", "center", "end"].includes(val),
+    },
+    titleTooltipDirection: {
+      type: String,
+      required: false,
+      default: "bottom",
+      validator: (val) => ["top", "right", "bottom", "left"].includes(val),
+    },
     icon: {
       type: [String, Object],
       default: undefined,
@@ -127,6 +146,11 @@ export default {
   white-space: nowrap;
 }
 
+.title-tooltip {
+  position: relative;
+  top: -2px;
+}
+
 .description {
   margin-left: 0.25rem;
   margin-right: 0.25rem;
@@ -135,4 +159,4 @@ export default {
 .slot {
   margin-top: 0.5rem;
 }
-</style>
+</style>

package/src/lib-components/NsInlineNotification.vue

@@ -1,3 +1,7 @@
+<!--
+  Copyright (C) 2023 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
 <template>
   <div
     data-notification
@@ -20,6 +24,7 @@
       />
       <div :class="`${carbonPrefix}--inline-notification__text-wrapper`">
         <p
+          v-if="title"
           :class="`${carbonPrefix}--inline-notification__title title`"
           v-html="title"
         ></p>

package/src/lib-components/NsLottieAnimation.vue

@@ -1,3 +1,7 @@
+<!--
+  Copyright (C) 2023 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
 <template>
   <div class="ns-lottie-animation" @mouseover="onMouseOver">
     <LottieAnimation

package/src/lib-components/NsMenuDivider.vue

@@ -1,3 +1,7 @@
+<!--
+  Copyright (C) 2023 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
 <template>
   <cv-side-nav-divider />
 </template>

package/src/lib-components/NsMenuItem.vue

@@ -1,3 +1,7 @@
+<!--
+  Copyright (C) 2023 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
 <template>
   <div class="ns-menu-item">
     <span v-if="icon" class="icon"><NsSvg :svg="icon" /></span>

package/src/lib-components/NsMeterChart.vue

@@ -1,3 +1,7 @@
+<!--
+  Copyright (C) 2023 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
 <template>
   <div>
     <div class="mg-bottom-sm">

package/src/lib-components/NsModal.vue

@@ -1,3 +1,7 @@
+<!--
+  Copyright (C) 2023 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
 <template>
   <div
     data-modal

package/src/lib-components/NsMultiSelect.vue

@@ -1,3 +1,7 @@
+<!--
+  Copyright (C) 2023 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
 <template>
   <div
     :class="[

package/src/lib-components/NsPagination.vue

@@ -1,3 +1,7 @@
+<!--
+  Copyright (C) 2023 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
 <script>
 import { CvPagination } from "@carbon/vue";
 

package/src/lib-components/NsPasswordInput.vue

@@ -1,3 +1,7 @@
+<!--
+  Copyright (C) 2023 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
 <template>
   <div class="ns-password-input">
     <div class="new-password-container">

package/src/lib-components/NsPictogram.vue

@@ -1,3 +1,7 @@
+<!--
+  Copyright (C) 2023 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
 <template>
   <svg
     xmlns="http://www.w3.org/2000/svg"

package/src/lib-components/NsProgressBar.vue

@@ -1,3 +1,7 @@
+<!--
+  Copyright (C) 2023 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
 <template>
   <!-- indeterminate -->
   <div class="progress-bar-container" :style="heightStyle">

package/src/lib-components/NsSlider.vue

@@ -1,3 +1,7 @@
+<!--
+  Copyright (C) 2023 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
 <template>
   <div :class="`ns-slider cv-slider ${carbonPrefix}--form-item`">
     <div class="wrapper" :data-invalid="isInvalid">

package/src/lib-components/NsStatusCard.vue

@@ -1,3 +1,7 @@
+<!--
+  Copyright (C) 2023 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
 <template>
   <cv-tile kind="standard" :light="light" class="status-card ns-card">
     <!-- icon -->

package/src/lib-components/NsSvg.vue

@@ -1,3 +1,7 @@
+<!--
+  Copyright (C) 2023 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
 <script>
 export default {
   name: "NsSvg",

package/src/lib-components/NsSystemLogsCard.vue

@@ -1,3 +1,7 @@
+<!--
+  Copyright (C) 2023 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
 <template>
   <NsInfoCard
     :title="title"

package/src/lib-components/NsSystemdServiceCard.vue

@@ -1,3 +1,7 @@
+<!--
+  Copyright (C) 2023 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
 <template>
   <cv-tile kind="standard" :light="light" class="service-card ns-card">
     <!-- icon -->

package/src/lib-components/NsTabs.vue

@@ -1,3 +1,7 @@
+<!--
+  Copyright (C) 2023 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
 <script>
 import { CvTabs } from "@carbon/vue";
 

package/src/lib-components/NsTag.vue

@@ -1,3 +1,7 @@
+<!--
+  Copyright (C) 2023 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
 <template>
   <component
     :is="!isFilter && hasClickListener ? 'button' : 'div'"

package/src/lib-components/NsTextInput.vue

@@ -1,3 +1,7 @@
+<!--
+  Copyright (C) 2023 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
 <template>
   <div
     :class="[

package/src/lib-components/NsTile.vue

@@ -1,3 +1,7 @@
+<!--
+  Copyright (C) 2023 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
 <template>
   <component
     :is="tagType"

package/src/lib-components/NsTimePicker.vue

@@ -1,3 +1,7 @@
+<!--
+  Copyright (C) 2023 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
 <template>
   <div :class="`ns-time-picker cv-time-picker ${carbonPrefix}--form-item`">
     <div

package/src/lib-components/NsToastNotification.vue

@@ -1,3 +1,7 @@
+<!--
+  Copyright (C) 2023 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
 <template>
   <div>
     <div

package/src/lib-components/NsToggle.vue

@@ -1,3 +1,7 @@
+<!--
+  Copyright (C) 2023 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
 <template>
   <div :class="['ns-toggle', { [`${carbonPrefix}--form-item`]: formItem }]">
     <input

package/src/lib-components/NsWizard.vue

@@ -1,3 +1,7 @@
+<!--
+  Copyright (C) 2023 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
 <template>
   <div
     data-modal

package/src/lib-components/pictograms/BulldozerPictogram.vue

@@ -1,3 +1,7 @@
+<!--
+  Copyright (C) 2023 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
 <template>
   <path
     id="bulldozer_1_"

package/src/lib-components/pictograms/ExclamationMarkPictogram.vue

@@ -1,3 +1,7 @@
+<!--
+  Copyright (C) 2023 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
 <template>
   <path
     id="warning--02_1_"

package/src/lib-components/pictograms/FaceSatisfiedPictogram.vue

@@ -0,0 +1,15 @@
+<!--
+  Copyright (C) 2023 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+<template>
+  <path
+    id="face--satisfied_1_"
+    d="M10.75,13c0,0.414-0.336,0.75-0.75,0.75S9.25,13.414,9.25,13s0.336-0.75,0.75-0.75
+	S10.75,12.586,10.75,13z M22,12.25c-0.414,0-0.75,0.336-0.75,0.75s0.336,0.75,0.75,0.75s0.75-0.336,0.75-0.75S22.414,12.25,22,12.25
+	z M16,31.36C7.53,31.36,0.64,24.47,0.64,16S7.53,0.64,16,0.64S31.36,7.53,31.36,16S24.47,31.36,16,31.36z M16,1.36
+	C7.927,1.36,1.36,7.927,1.36,16c0,8.072,6.567,14.64,14.64,14.64c8.072,0,14.64-6.567,14.64-14.64S24.072,1.36,16,1.36z M16,23.36
+	c-4.145,0-6.213-3.031-6.299-3.161L10.3,19.8c0.019,0.028,1.952,2.84,5.701,2.84s5.682-2.812,5.701-2.84l0.599,0.399
+	C22.214,20.329,20.145,23.36,16,23.36z"
+  />
+</template>

package/src/lib-components/pictograms/FolderPictogram.vue

@@ -0,0 +1,13 @@
+<!--
+  Copyright (C) 2023 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+<template>
+  <path
+    id="folder"
+    d="M30,27.36H2c-0.75,0-1.36-0.61-1.36-1.36V4c0-0.75,0.61-1.36,1.36-1.36h8.5c0.425,0,0.833,0.203,1.088,0.543
+	l1.416,2.223C13.108,5.544,13.299,5.64,13.5,5.64H30c0.75,0,1.36,0.61,1.36,1.36v19C31.36,26.75,30.75,27.36,30,27.36z M2,3.36
+	C1.647,3.36,1.36,3.647,1.36,4v22c0,0.353,0.287,0.64,0.64,0.64h28c0.353,0,0.64-0.287,0.64-0.64V7c0-0.353-0.287-0.64-0.64-0.64
+	H13.5c-0.426,0-0.833-0.203-1.088-0.544l-1.416-2.223C10.892,3.456,10.7,3.36,10.5,3.36H2z"
+  />
+</template>

package/src/lib-components/pictograms/GearPictogram.vue

@@ -1,3 +1,7 @@
+<!--
+  Copyright (C) 2023 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
 <template>
   <path
     id="gear_2_"

package/src/lib-components/pictograms/GroupPictogram.vue

@@ -1,3 +1,7 @@
+<!--
+  Copyright (C) 2023 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
 <template>
   <path
     id="group"

package/src/lib-components/pictograms/HardDrivePictogram.vue

@@ -1,3 +1,7 @@
+<!--
+  Copyright (C) 2023 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
 <template>
   <path
     id="hard--drive"

package/src/lib-components/pictograms/LovePictogram.vue

@@ -1,3 +1,7 @@
+<!--
+  Copyright (C) 2023 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
 <template>
   <path
     id="love_1_"

package/src/lib-components/pictograms/UserPictogram.vue

@@ -1,3 +1,7 @@
+<!--
+  Copyright (C) 2023 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
 <template>
   <path
     id="user_1_"

package/src/lib-components/pictograms/UserProfilePictogram.vue

@@ -1,3 +1,7 @@
+<!--
+  Copyright (C) 2023 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
 <template>
   <path
     id="user--profile_1_"

package/src/lib-components/pictograms/WarningPictogram.vue

@@ -1,3 +1,7 @@
+<!--
+  Copyright (C) 2023 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
 <template>
   <path
     id="warning--01_1_"