@eturnity/eturnity_reusable_components 7.51.11 → 7.51.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.51.11",
+  "version": "7.51.12",
   "files": [
     "dist",
     "src"

package/src/components/tableDropdown/index.vue

@@ -14,6 +14,7 @@
           'table-dropdown-item': item.type !== 'input',
         }"
         :is-nested="isNested"
+        :show-archived="showArchived"
       >
         <NestedContainer :is-nested="isNested">
           <NestedIcon
@@ -31,6 +32,7 @@
               (item.value === '' || item.value === '-')
             "
             :key="index + '_button'"
+            :show-archived="showArchived"
             @click.stop="onTemplateClick(item.row)"
           >
             {{ $gettext('Use template...') }}
@@ -39,30 +41,38 @@
             v-else-if="
               item.type && item.type === 'template' && item.value !== ''
             "
+            :show-archived="showArchived"
             @click.stop="onSelectedTemplateClick(item.row)"
           >
-            <!-- <img :src="fileIcon" alt="icon" width="12" height="16" /> -->
             <Icon
-              :color="theme.colors.brightBlue"
+              :color="showArchived ? theme.colors.red : theme.colors.brightBlue"
               name="template_icon_not_clickable"
               size="14px"
             />
             <div>{{ item.value }}</div>
           </TemplateLink>
-          <NoTemplate v-if="item.type && item.type === 'no-template'">
+          <NoTemplate
+            v-if="item.type && item.type === 'no-template'"
+            :show-archived="showArchived"
+          >
             {{ $gettext('No main component template') }}
           </NoTemplate>
           <InputContainer
             v-if="item.type === 'input'"
             @click.stop="onInputClick()"
           >
-            <TextContainer v-if="customInputDisabled" class="input-placeholder">
+            <TextContainer
+              v-if="customInputDisabled"
+              class="input-placeholder"
+              :show-archived="showArchived"
+            >
               <span> {{ item.value }}</span>
             </TextContainer>
             <InputText
               v-else
               class="inputField"
               :disabled="customInputDisabled"
+              :font-color="showArchived ? theme.colors.red : 'black'"
               :min-width="item.value.length + 'ch'"
               :no-border="true"
               :value="item.value"
@@ -75,6 +85,7 @@
               item.type !== 'no-template' &&
               item.type !== 'template'
             "
+            :show-archived="showArchived"
           >
             <span> {{ item.value }}</span>
           </TextContainer>
@@ -200,12 +211,14 @@
     }
   `
 
-  const ItemAttrs = { isNested: Boolean }
+  const ItemAttrs = { isNested: Boolean, showArchived: Boolean }
   const ComponentItem = styled('td', ItemAttrs)`
     padding-left: ${(props) => (props.isNested ? '14px !important' : '0')};
     overflow: hidden;
     text-overflow: ellipsis;
     padding-right: 0 !important;
+    color: ${(props) =>
+      props.showArchived ? props.theme.colors.red : 'inherit'};
 
     &.table-dropdown-item {
       background-clip: content-box;
@@ -339,10 +352,12 @@
     height: 40px;
   `
 
-  const TemplateButton = styled.div`
+  const templateAttrs = { showArchived: Boolean }
+  const TemplateButton = styled('div', templateAttrs)`
     cursor: pointer;
     background-color: #263238;
-    color: ${(props) => props.theme.colors.white};
+    color: ${(props) =>
+      props.showArchived ? props.theme.colors.red : props.theme.colors.white};
     padding: 4px 10px;
     display: inline-block;
     border-radius: 4px;
@@ -350,16 +365,20 @@
     margin-left: 15px;
   `
 
-  const NoTemplate = styled.div`
-    color: ${(props) => props.theme.colors.gray1};
+  const NoTemplate = styled('div', templateAttrs)`
+    color: ${(props) =>
+      props.showArchived ? props.theme.colors.red : props.theme.colors.gray1};
     font-style: italic;
     overflow: hidden;
     text-overflow: ellipsis;
     padding-left: 15px;
   `
 
-  const TemplateLink = styled.div`
-    color: ${(props) => props.theme.colors.brightBlue};
+  const TemplateLink = styled('div', templateAttrs)`
+    color: ${(props) =>
+      props.showArchived
+        ? props.theme.colors.red
+        : props.theme.colors.brightBlue};
     cursor: pointer;
     display: grid;
     grid-template-columns: auto 1fr;
@@ -394,10 +413,12 @@
     color: ${(props) => props.theme.colors.grey3};
   `
 
-  const TextContainer = styled.div`
+  const TextContainer = styled('div', templateAttrs)`
     height: 100%;
     display: grid;
     align-items: center;
+    color: ${(props) =>
+      props.showArchived ? props.theme.colors.red : 'inherit'};
   `
 
   const NestedIcon = styled(SubpositionMarkerIcon)`