@designcrowd/fe-shared-lib 1.0.16 → 1.0.17-fe-upgrade-rc

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designcrowd/fe-shared-lib",
-  "version": "1.0.16",
+  "version": "1.0.17-fe-upgrade-rc",
   "scripts": {
     "start": "npm run storybook",
     "build": "npm run build:css --production",
@@ -28,10 +28,10 @@
     "postcss-loader": "8.1.0",
     "swiper": "11.0.6",
     "tailwindcss": "3.4.1",
-    "vite": "5.2.3",
+    "vite": "6.2.3",
     "vite-plugin-eslint": "1.8.1",
     "vite-plugin-vue-devtools": "7.7.0",
-    "vue": "3.5.3",
+    "vue": "3.5.13",
     "vue-color": "2.8.1",
     "vue-cropperjs": "5.0.0",
     "vue-observe-visibility": "1.0.0",
@@ -39,15 +39,15 @@
     "yargs": "17.7.2"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "8.0.4",
-    "@storybook/addon-actions": "8.0.4",
-    "@storybook/addon-controls": "8.0.4",
-    "@storybook/addon-essentials": "8.0.4",
-    "@storybook/addon-links": "8.0.4",
-    "@storybook/addon-themes": "8.0.4",
-    "@storybook/vue3": "8.0.4",
-    "@storybook/vue3-vite": "8.0.4",
-    "@vitejs/plugin-vue": "5.0.4",
+    "@storybook/addon-a11y": "8.6.11",
+    "@storybook/addon-actions": "8.6.11",
+    "@storybook/addon-controls": "8.6.11",
+    "@storybook/addon-essentials": "8.6.11",
+    "@storybook/addon-links": "8.6.11",
+    "@storybook/addon-themes": "8.6.11",
+    "@storybook/vue3": "8.6.11",
+    "@storybook/vue3-vite": "8.6.11",
+    "@vitejs/plugin-vue": "5.2.3",
     "@vue/cli-plugin-eslint": "5.0.8",
     "@vue/cli-service": "5.0.8",
     "@vue/eslint-config-airbnb": "8.0.0",
@@ -68,7 +68,7 @@
     "postcss-import": "16.0.0",
     "postcss-nested": "6.0.1",
     "prettier": "3.2.4",
-    "storybook": "8.0.4",
+    "storybook": "8.6.11",
     "stylelint": "16.2.1",
     "stylelint-config-standard": "36.0.0",
     "tailwindcss": "3.4.1",

package/public/css/tailwind-brandCrowd.css

@@ -679,6 +679,9 @@ video {
 .theme-brandCrowd .tw-mb-1 {
   margin-bottom: 0.25rem;
 }
+.theme-brandCrowd .tw-mb-10 {
+  margin-bottom: 2.5rem;
+}
 .theme-brandCrowd .tw-mb-2 {
   margin-bottom: 0.5rem;
 }
@@ -835,6 +838,9 @@ video {
 .theme-brandCrowd .tw-max-h-screen {
   max-height: 100vh;
 }
+.theme-brandCrowd .tw-w-1\/3 {
+  width: 33.333333%;
+}
 .theme-brandCrowd .tw-w-10 {
   width: 2.5rem;
 }
@@ -1715,6 +1721,9 @@ video {
 .theme-brandCrowd .tw-text-center {
   text-align: center;
 }
+.theme-brandCrowd .tw-align-top {
+  vertical-align: top;
+}
 .theme-brandCrowd .tw-align-middle {
   vertical-align: middle;
 }
@@ -2197,6 +2206,9 @@ video {
 .theme-brandCrowd .md\:tw-grid {
     display: grid;
   }
+.theme-brandCrowd .md\:tw-hidden {
+    display: none;
+  }
 .theme-brandCrowd .md\:tw-h-10 {
     height: 2.5rem;
   }
@@ -2209,12 +2221,21 @@ video {
 .theme-brandCrowd .md\:tw-w-10 {
     width: 2.5rem;
   }
+.theme-brandCrowd .md\:tw-w-24 {
+    width: 6rem;
+  }
 .theme-brandCrowd .md\:tw-w-auto {
     width: auto;
   }
 .theme-brandCrowd .md\:tw-w-full {
     width: 100%;
   }
+.theme-brandCrowd .md\:tw-max-w-full {
+    max-width: 100%;
+  }
+.theme-brandCrowd .md\:tw-grow {
+    flex-grow: 1;
+  }
 .theme-brandCrowd .md\:tw-grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -2236,6 +2257,9 @@ video {
 .theme-brandCrowd .md\:tw-justify-start {
     justify-content: flex-start;
   }
+.theme-brandCrowd .md\:tw-justify-end {
+    justify-content: flex-end;
+  }
 .theme-brandCrowd .md\:tw-justify-center {
     justify-content: center;
   }
@@ -2278,6 +2302,9 @@ video {
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
   }
+.theme-brandCrowd .md\:tw-pl-4 {
+    padding-left: 1rem;
+  }
 .theme-brandCrowd .md\:tw-pr-2 {
     padding-right: 0.5rem;
   }

package/public/css/tailwind-brandPage.css

@@ -679,6 +679,9 @@ video {
 .theme-brandPage .tw-mb-1 {
   margin-bottom: 0.25rem;
 }
+.theme-brandPage .tw-mb-10 {
+  margin-bottom: 2.5rem;
+}
 .theme-brandPage .tw-mb-2 {
   margin-bottom: 0.5rem;
 }
@@ -835,6 +838,9 @@ video {
 .theme-brandPage .tw-max-h-screen {
   max-height: 100vh;
 }
+.theme-brandPage .tw-w-1\/3 {
+  width: 33.333333%;
+}
 .theme-brandPage .tw-w-10 {
   width: 2.5rem;
 }
@@ -1563,6 +1569,9 @@ video {
 .theme-brandPage .tw-text-center {
   text-align: center;
 }
+.theme-brandPage .tw-align-top {
+  vertical-align: top;
+}
 .theme-brandPage .tw-align-middle {
   vertical-align: middle;
 }
@@ -1885,6 +1894,9 @@ video {
 .theme-brandPage .md\:tw-grid {
     display: grid;
   }
+.theme-brandPage .md\:tw-hidden {
+    display: none;
+  }
 .theme-brandPage .md\:tw-h-10 {
     height: 2.5rem;
   }
@@ -1897,12 +1909,21 @@ video {
 .theme-brandPage .md\:tw-w-10 {
     width: 2.5rem;
   }
+.theme-brandPage .md\:tw-w-24 {
+    width: 6rem;
+  }
 .theme-brandPage .md\:tw-w-auto {
     width: auto;
   }
 .theme-brandPage .md\:tw-w-full {
     width: 100%;
   }
+.theme-brandPage .md\:tw-max-w-full {
+    max-width: 100%;
+  }
+.theme-brandPage .md\:tw-grow {
+    flex-grow: 1;
+  }
 .theme-brandPage .md\:tw-grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -1924,6 +1945,9 @@ video {
 .theme-brandPage .md\:tw-justify-start {
     justify-content: flex-start;
   }
+.theme-brandPage .md\:tw-justify-end {
+    justify-content: flex-end;
+  }
 .theme-brandPage .md\:tw-justify-center {
     justify-content: center;
   }
@@ -1966,6 +1990,9 @@ video {
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
   }
+.theme-brandPage .md\:tw-pl-4 {
+    padding-left: 1rem;
+  }
 .theme-brandPage .md\:tw-pr-2 {
     padding-right: 0.5rem;
   }

package/public/css/tailwind-crazyDomains.css

@@ -679,6 +679,9 @@ video {
 .theme-crazyDomains .tw-mb-1 {
   margin-bottom: 0.25rem;
 }
+.theme-crazyDomains .tw-mb-10 {
+  margin-bottom: 2.5rem;
+}
 .theme-crazyDomains .tw-mb-2 {
   margin-bottom: 0.5rem;
 }
@@ -835,6 +838,9 @@ video {
 .theme-crazyDomains .tw-max-h-screen {
   max-height: 100vh;
 }
+.theme-crazyDomains .tw-w-1\/3 {
+  width: 33.333333%;
+}
 .theme-crazyDomains .tw-w-10 {
   width: 2.5rem;
 }
@@ -1715,6 +1721,9 @@ video {
 .theme-crazyDomains .tw-text-center {
   text-align: center;
 }
+.theme-crazyDomains .tw-align-top {
+  vertical-align: top;
+}
 .theme-crazyDomains .tw-align-middle {
   vertical-align: middle;
 }
@@ -2197,6 +2206,9 @@ video {
 .theme-crazyDomains .md\:tw-grid {
     display: grid;
   }
+.theme-crazyDomains .md\:tw-hidden {
+    display: none;
+  }
 .theme-crazyDomains .md\:tw-h-10 {
     height: 2.5rem;
   }
@@ -2209,12 +2221,21 @@ video {
 .theme-crazyDomains .md\:tw-w-10 {
     width: 2.5rem;
   }
+.theme-crazyDomains .md\:tw-w-24 {
+    width: 6rem;
+  }
 .theme-crazyDomains .md\:tw-w-auto {
     width: auto;
   }
 .theme-crazyDomains .md\:tw-w-full {
     width: 100%;
   }
+.theme-crazyDomains .md\:tw-max-w-full {
+    max-width: 100%;
+  }
+.theme-crazyDomains .md\:tw-grow {
+    flex-grow: 1;
+  }
 .theme-crazyDomains .md\:tw-grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -2236,6 +2257,9 @@ video {
 .theme-crazyDomains .md\:tw-justify-start {
     justify-content: flex-start;
   }
+.theme-crazyDomains .md\:tw-justify-end {
+    justify-content: flex-end;
+  }
 .theme-crazyDomains .md\:tw-justify-center {
     justify-content: center;
   }
@@ -2278,6 +2302,9 @@ video {
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
   }
+.theme-crazyDomains .md\:tw-pl-4 {
+    padding-left: 1rem;
+  }
 .theme-crazyDomains .md\:tw-pr-2 {
     padding-right: 0.5rem;
   }

package/public/css/tailwind-designCom.css

@@ -679,6 +679,9 @@ video {
 .theme-designCom .tw-mb-1 {
   margin-bottom: 0.25rem;
 }
+.theme-designCom .tw-mb-10 {
+  margin-bottom: 2.5rem;
+}
 .theme-designCom .tw-mb-2 {
   margin-bottom: 0.5rem;
 }
@@ -835,6 +838,9 @@ video {
 .theme-designCom .tw-max-h-screen {
   max-height: 100vh;
 }
+.theme-designCom .tw-w-1\/3 {
+  width: 33.333333%;
+}
 .theme-designCom .tw-w-10 {
   width: 2.5rem;
 }
@@ -1715,6 +1721,9 @@ video {
 .theme-designCom .tw-text-center {
   text-align: center;
 }
+.theme-designCom .tw-align-top {
+  vertical-align: top;
+}
 .theme-designCom .tw-align-middle {
   vertical-align: middle;
 }
@@ -2197,6 +2206,9 @@ video {
 .theme-designCom .md\:tw-grid {
     display: grid;
   }
+.theme-designCom .md\:tw-hidden {
+    display: none;
+  }
 .theme-designCom .md\:tw-h-10 {
     height: 2.5rem;
   }
@@ -2209,12 +2221,21 @@ video {
 .theme-designCom .md\:tw-w-10 {
     width: 2.5rem;
   }
+.theme-designCom .md\:tw-w-24 {
+    width: 6rem;
+  }
 .theme-designCom .md\:tw-w-auto {
     width: auto;
   }
 .theme-designCom .md\:tw-w-full {
     width: 100%;
   }
+.theme-designCom .md\:tw-max-w-full {
+    max-width: 100%;
+  }
+.theme-designCom .md\:tw-grow {
+    flex-grow: 1;
+  }
 .theme-designCom .md\:tw-grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -2236,6 +2257,9 @@ video {
 .theme-designCom .md\:tw-justify-start {
     justify-content: flex-start;
   }
+.theme-designCom .md\:tw-justify-end {
+    justify-content: flex-end;
+  }
 .theme-designCom .md\:tw-justify-center {
     justify-content: center;
   }
@@ -2278,6 +2302,9 @@ video {
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
   }
+.theme-designCom .md\:tw-pl-4 {
+    padding-left: 1rem;
+  }
 .theme-designCom .md\:tw-pr-2 {
     padding-right: 0.5rem;
   }

package/public/css/tailwind-designCrowd.css

@@ -679,6 +679,9 @@ video {
 .theme-designCrowd .tw-mb-1 {
   margin-bottom: 0.25rem;
 }
+.theme-designCrowd .tw-mb-10 {
+  margin-bottom: 2.5rem;
+}
 .theme-designCrowd .tw-mb-2 {
   margin-bottom: 0.5rem;
 }
@@ -835,6 +838,9 @@ video {
 .theme-designCrowd .tw-max-h-screen {
   max-height: 100vh;
 }
+.theme-designCrowd .tw-w-1\/3 {
+  width: 33.333333%;
+}
 .theme-designCrowd .tw-w-10 {
   width: 2.5rem;
 }
@@ -1715,6 +1721,9 @@ video {
 .theme-designCrowd .tw-text-center {
   text-align: center;
 }
+.theme-designCrowd .tw-align-top {
+  vertical-align: top;
+}
 .theme-designCrowd .tw-align-middle {
   vertical-align: middle;
 }
@@ -2197,6 +2206,9 @@ video {
 .theme-designCrowd .md\:tw-grid {
     display: grid;
   }
+.theme-designCrowd .md\:tw-hidden {
+    display: none;
+  }
 .theme-designCrowd .md\:tw-h-10 {
     height: 2.5rem;
   }
@@ -2209,12 +2221,21 @@ video {
 .theme-designCrowd .md\:tw-w-10 {
     width: 2.5rem;
   }
+.theme-designCrowd .md\:tw-w-24 {
+    width: 6rem;
+  }
 .theme-designCrowd .md\:tw-w-auto {
     width: auto;
   }
 .theme-designCrowd .md\:tw-w-full {
     width: 100%;
   }
+.theme-designCrowd .md\:tw-max-w-full {
+    max-width: 100%;
+  }
+.theme-designCrowd .md\:tw-grow {
+    flex-grow: 1;
+  }
 .theme-designCrowd .md\:tw-grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -2236,6 +2257,9 @@ video {
 .theme-designCrowd .md\:tw-justify-start {
     justify-content: flex-start;
   }
+.theme-designCrowd .md\:tw-justify-end {
+    justify-content: flex-end;
+  }
 .theme-designCrowd .md\:tw-justify-center {
     justify-content: center;
   }
@@ -2278,6 +2302,9 @@ video {
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
   }
+.theme-designCrowd .md\:tw-pl-4 {
+    padding-left: 1rem;
+  }
 .theme-designCrowd .md\:tw-pr-2 {
     padding-right: 0.5rem;
   }

package/src/experiences/components/SellDomainNameModalApplication/SellDomainNameModalApplication.vue

@@ -1,36 +1,74 @@
 <template>
-  <Modal
-    classes="sell-domain-name-list-modal--modal tw-text-black"
-    close-on-esc
-    full-screen-breakpoint="md"
-    :visible="visible"
-    :hide-scrollbar="false"
-    :show-modal-background-image="false"
-    @close-modal="onCloseModal"
-  >
-    <template #header>
-      <SellDomainNameSearch
-        v-if="visible"
-        :is-design-com="isDesignCom"
-        :header-title="headerTitle"
-        :header-subtitle="headerSubtitle"
-        :initial-search-term="initialSearchTerm"
-        @onSearch="onSearchDomainName"
-        @onSearchTextInputChange="onSearchTextInputChange"
-      />
-    </template>
-    <template #default>
-      <SellDomainNameSearchResult
-        v-if="visible"
-        :is-design-com="isDesignCom"
-        :previous-search-text="previousSearchText"
-        :is-busy="isBusy"
-        :domain-name-items="domainNameItems"
-        :currency="userCurrency"
-        :model-value="modelValue"
-      />
-    </template>
-  </Modal>
+  <template v-if="!!this.$slots['header']">
+    <Modal
+      classes="sell-domain-name-list-modal--modal tw-text-black"
+      close-on-esc
+      full-screen-breakpoint="md"
+      :visible="visible"
+      :hide-scrollbar="false"
+      :show-modal-background-image="false"
+      @close-modal="onCloseModal"
+    >
+      <template #header>
+        <slot name="header" />
+        <hr class="tw-border-0 tw-border-b-2 tw-border-solid tw-border-grayscale-400 tw-py-2 header-divider" />
+      </template>
+      <template #default>
+        <h3 class="tw-text-center tw-text-2xl tw-font-bold tw-my-5 tw-mb-0">{{ headerTitle }}</h3>
+        <div class="tw-text-center tw-mb-8 tw-text-grayscale-600">{{ headerSubtitle }}</div>
+        <SellDomainNameSearch
+          v-if="visible"
+          :is-design-com="isDesignCom"
+          :initial-search-term="initialSearchTerm"
+          @onSearch="onSearchDomainName"
+          @onSearchTextInputChange="onSearchTextInputChange"
+        />
+        <SellDomainNameSearchResult
+          v-if="visible"
+          :is-design-com="isDesignCom"
+          :previous-search-text="previousSearchText"
+          :is-busy="isBusy"
+          :domain-name-items="domainNameItems"
+          :currency="userCurrency"
+          :model-value="modelValue"
+        />
+      </template>
+    </Modal>
+  </template>
+  <template v-else>
+    <Modal
+      classes="sell-domain-name-list-modal--modal tw-text-black"
+      close-on-esc
+      full-screen-breakpoint="md"
+      :visible="visible"
+      :hide-scrollbar="false"
+      :show-modal-background-image="false"
+      @close-modal="onCloseModal"
+    >
+      <template #header>
+        <SellDomainNameSearch
+          v-if="visible"
+          :is-design-com="isDesignCom"
+          :header-title="headerTitle"
+          :header-subtitle="headerSubtitle"
+          :initial-search-term="initialSearchTerm"
+          @onSearch="onSearchDomainName"
+          @onSearchTextInputChange="onSearchTextInputChange"
+        />
+      </template>
+      <template #default>
+        <SellDomainNameSearchResult
+          v-if="visible"
+          :is-design-com="isDesignCom"
+          :previous-search-text="previousSearchText"
+          :is-busy="isBusy"
+          :domain-name-items="domainNameItems"
+          :currency="userCurrency"
+          :model-value="modelValue"
+        />
+      </template>
+    </Modal>
+  </template>
 </template>
 <script>
 import Modal from '../../../../src/atoms/components/Modal/Modal.vue';
@@ -160,4 +198,8 @@ export default {
     width: 100%;
   }
 }
+
+.header-divider {
+  margin: 0 -1rem;
+}
 </style>