@merchi/product-form 1.19.52 → 1.19.53

package/lib/styles/globals.scss

@@ -204,6 +204,170 @@
     }
   }
 
+  &_file-upload-box {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    padding: 0.75rem;
+    border: 1px dashed #c7d2e0;
+    border-radius: 0.75rem;
+
+    .merchi-embed-form_dropzone {
+      padding: 0.75rem 0.5rem;
+      border: none;
+      border-radius: 0;
+      background-color: transparent;
+      box-shadow: none;
+
+      &:hover {
+        box-shadow: none;
+        scale: 1;
+      }
+    }
+
+    .merchi-embed-form_dropzone-text-container {
+      align-items: center;
+      gap: 1.25rem;
+      text-align: left;
+
+      > div:last-child {
+        font-size: 1rem;
+        line-height: 1.4;
+        color: #3f3f46;
+
+        > div:last-child {
+          margin-top: 0.25rem;
+          font-size: 0.9375rem;
+          color: #94a3b8;
+        }
+      }
+    }
+
+    .merchi-embed-form_dropzone-icon-container {
+      flex-shrink: 0;
+      width: 4.5rem;
+      height: 4.5rem;
+      margin-right: 0;
+    }
+  }
+
+  &_uploaded-files-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  &_uploaded-file-row {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    padding: 0.625rem 1rem 0.625rem 0.75rem;
+    border: 1px solid #e4e4e7;
+    border-radius: 0.625rem;
+  }
+
+  &_uploaded-file-meta {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    gap: 0.125rem;
+    min-width: 0;
+  }
+
+  &_uploaded-file-name {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 1rem;
+    font-weight: 500;
+    line-height: 1.4;
+    color: #18181b;
+  }
+
+  &_uploaded-file-size {
+    font-size: 0.875rem;
+    line-height: 1.3;
+    color: #71717a;
+  }
+
+  &_uploaded-file-actions {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    gap: 0.25rem;
+    margin-left: auto;
+  }
+
+  &_uploaded-file-action {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    padding: 0;
+    border: none;
+    border-radius: 0.375rem;
+    background: transparent;
+    color: #64748b;
+    font-size: 1.125rem;
+    cursor: pointer;
+    transition: color 0.15s ease-in-out;
+
+    &:hover {
+      color: #18181b;
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+  }
+
+  &_uploaded-file-thumb {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    width: 3.75rem;
+    height: 3rem;
+    border-radius: 0.375rem;
+    overflow: hidden;
+    color: #52525b;
+
+    &--image {
+      background-size: cover;
+      background-position: center;
+      background-repeat: no-repeat;
+    }
+
+    &--icon {
+      font-size: 1.75rem;
+    }
+
+    &--pdf {
+      color: #e5252a;
+    }
+
+    &--ai {
+      width: 3rem;
+      margin: 0 0.375rem;
+      background: #330000;
+      color: #ff9a00;
+      font-size: 1.125rem;
+      font-weight: 700;
+      font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
+      letter-spacing: -0.02em;
+    }
+
+    &--loading {
+      font-size: 1.25rem;
+    }
+  }
+
   /* variation image select */
   &_image-select-option {
     &-container {
@@ -331,6 +495,10 @@
     }
   }
 
+  &_option-count {
+    display: none;
+  }
+
   /* variation checkbox and radio */
   &_checkbox_radio {
     &-container {
@@ -2190,3 +2358,107 @@
   font-weight: 600;
   line-height: 1.2;
 }
+
+@media (max-width: 767px) {
+  .d-flex:has(> .merchi-embed-form_option-count) {
+    display: flex !important;
+    flex-wrap: nowrap !important;
+    align-items: center !important;
+    gap: 0.75rem !important;
+    width: 100% !important;
+  }
+
+  .d-flex:has(> .merchi-embed-form_option-count) > :first-child {
+    flex: 1 1 auto !important;
+    min-width: 0 !important;
+  }
+
+  .d-flex > .merchi-embed-form_option-count {
+    display: inline;
+    flex: 0 0 auto;
+    margin-left: auto;
+    font-size: 0.8125rem;
+    font-weight: 400;
+    line-height: 1.25rem;
+    color: #71717a;
+    white-space: nowrap;
+  }
+
+  .merchi-embed-form_image-select-option-container.merchi-embed-form_options--grid[data-option-layout='grid'][data-option-count] {
+    display: grid !important;
+    flex-wrap: unset !important;
+    gap: 0.5rem !important;
+    width: 100% !important;
+  }
+
+  .merchi-embed-form_image-select-option-container.merchi-embed-form_options--grid[data-option-layout='grid'][data-option-count='1'] {
+    grid-template-columns: minmax(0, 1fr) !important;
+  }
+
+  .merchi-embed-form_image-select-option-container.merchi-embed-form_options--grid[data-option-layout='grid'][data-option-count='2'] {
+    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
+  }
+
+  .merchi-embed-form_image-select-option-container.merchi-embed-form_options--grid[data-option-layout='grid'][data-option-count='3'] {
+    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
+  }
+
+  .merchi-embed-form_image-select-option-container.merchi-embed-form_options--grid[data-option-layout='grid'][data-option-count] > .merchi-embed-form_image-select-option-item-container {
+    flex: unset !important;
+    width: 100% !important;
+    min-width: 0 !important;
+    max-width: none !important;
+  }
+
+  .merchi-embed-form_image-select-option-container.merchi-embed-form_options--scroll[data-option-layout='scroll'][data-option-count],
+  .merchi-embed-form_color-select-container.merchi-embed-form_options--scroll[data-option-layout='scroll'][data-option-count] {
+    display: flex !important;
+    flex-wrap: nowrap !important;
+    justify-content: flex-start !important;
+    justify-items: unset !important;
+    width: 100% !important;
+    max-width: 100% !important;
+    overflow-x: auto !important;
+    overflow-y: hidden !important;
+    overscroll-behavior-x: contain;
+    -webkit-overflow-scrolling: touch;
+    scroll-snap-type: x proximity;
+    scroll-padding-inline: 0.5rem;
+    scrollbar-width: none;
+  }
+
+  .merchi-embed-form_image-select-option-container.merchi-embed-form_options--scroll[data-option-layout='scroll'][data-option-count]::-webkit-scrollbar,
+  .merchi-embed-form_color-select-container.merchi-embed-form_options--scroll[data-option-layout='scroll'][data-option-count]::-webkit-scrollbar {
+    display: none;
+  }
+
+  .merchi-embed-form_image-select-option-container.merchi-embed-form_options--scroll[data-option-layout='scroll'][data-option-count] {
+    align-items: stretch !important;
+    gap: 0.5rem !important;
+  }
+
+  .merchi-embed-form_image-select-option-container.merchi-embed-form_options--scroll[data-option-layout='scroll'][data-option-count] > .merchi-embed-form_image-select-option-item-container {
+    flex: 0 0 38% !important;
+    width: 38% !important;
+    min-width: 38% !important;
+    max-width: none !important;
+    scroll-snap-align: start;
+  }
+
+  .merchi-embed-form_color-select-container.merchi-embed-form_options--scroll[data-option-layout='scroll'][data-option-count] {
+    align-items: flex-start !important;
+    gap: 0.375rem !important;
+  }
+
+  .merchi-embed-form_color-select-container.merchi-embed-form_options--scroll[data-option-layout='scroll'][data-option-count] > .merchi-embed-form_color-select-item {
+    flex: 0 0 calc((100% - 4 * 0.375rem) / 4.5) !important;
+    width: calc((100% - 4 * 0.375rem) / 4.5) !important;
+    min-width: 3.5rem !important;
+    max-width: none !important;
+    scroll-snap-align: start;
+  }
+
+  .merchi-embed-form_color-select-container.merchi-embed-form_options--scroll[data-option-layout='scroll'][data-option-count] > .merchi-embed-form_color-select-item svg {
+    right: 0.375rem !important;
+  }
+}

package/lib/utils/formatUploadFileSize.d.ts

@@ -0,0 +1,5 @@
+export declare function formatUploadFileSize(file: {
+    size?: number;
+    fileSize?: number;
+    bytes?: number;
+} | null | undefined): string;

package/lib/utils/formatUploadFileSize.js

@@ -0,0 +1,12 @@
+export function formatUploadFileSize(file) {
+  var _ref, _file$size;
+  var bytes = Number((_ref = (_file$size = file === null || file === void 0 ? void 0 : file.size) !== null && _file$size !== void 0 ? _file$size : file === null || file === void 0 ? void 0 : file.fileSize) !== null && _ref !== void 0 ? _ref : file === null || file === void 0 ? void 0 : file.bytes);
+  if (!Number.isFinite(bytes) || bytes <= 0) return null;
+  if (bytes < 1024) return "".concat(bytes, " B");
+  if (bytes < 1024 * 1024) {
+    var kb = bytes / 1024;
+    return kb < 10 ? "".concat(kb.toFixed(1), " KB") : "".concat(Math.round(kb), " KB");
+  }
+  return "".concat((bytes / (1024 * 1024)).toFixed(1), " MB");
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJuYW1lcyI6WyJmb3JtYXRVcGxvYWRGaWxlU2l6ZSIsImZpbGUiLCJfcmVmIiwiX2ZpbGUkc2l6ZSIsImJ5dGVzIiwiTnVtYmVyIiwic2l6ZSIsImZpbGVTaXplIiwiaXNGaW5pdGUiLCJjb25jYXQiLCJrYiIsInRvRml4ZWQiLCJNYXRoIiwicm91bmQiXSwic291cmNlcyI6WyIuLi8uLi9zcmMvdXRpbHMvZm9ybWF0VXBsb2FkRmlsZVNpemUudHMiXSwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0IGZ1bmN0aW9uIGZvcm1hdFVwbG9hZEZpbGVTaXplKGZpbGU6IHsgc2l6ZT86IG51bWJlcjsgZmlsZVNpemU/OiBudW1iZXI7IGJ5dGVzPzogbnVtYmVyIH0gfCBudWxsIHwgdW5kZWZpbmVkKSB7XG4gIGNvbnN0IGJ5dGVzID0gTnVtYmVyKGZpbGU/LnNpemUgPz8gZmlsZT8uZmlsZVNpemUgPz8gZmlsZT8uYnl0ZXMpO1xuICBpZiAoIU51bWJlci5pc0Zpbml0ZShieXRlcykgfHwgYnl0ZXMgPD0gMCkgcmV0dXJuIG51bGw7XG5cbiAgaWYgKGJ5dGVzIDwgMTAyNCkgcmV0dXJuIGAke2J5dGVzfSBCYDtcbiAgaWYgKGJ5dGVzIDwgMTAyNCAqIDEwMjQpIHtcbiAgICBjb25zdCBrYiA9IGJ5dGVzIC8gMTAyNDtcbiAgICByZXR1cm4ga2IgPCAxMCA/IGAke2tiLnRvRml4ZWQoMSl9IEtCYCA6IGAke01hdGgucm91bmQoa2IpfSBLQmA7XG4gIH1cblxuICByZXR1cm4gYCR7KGJ5dGVzIC8gKDEwMjQgKiAxMDI0KSkudG9GaXhlZCgxKX0gTUJgO1xufVxuIl0sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLFNBQVNBLG9CQUFvQkEsQ0FBQ0MsSUFBNkUsRUFBRTtFQUFBLElBQUFDLElBQUEsRUFBQUMsVUFBQTtFQUNsSCxJQUFNQyxLQUFLLEdBQUdDLE1BQU0sRUFBQUgsSUFBQSxJQUFBQyxVQUFBLEdBQUNGLElBQUksYUFBSkEsSUFBSSx1QkFBSkEsSUFBSSxDQUFFSyxJQUFJLGNBQUFILFVBQUEsY0FBQUEsVUFBQSxHQUFJRixJQUFJLGFBQUpBLElBQUksdUJBQUpBLElBQUksQ0FBRU0sUUFBUSxjQUFBTCxJQUFBLGNBQUFBLElBQUEsR0FBSUQsSUFBSSxhQUFKQSxJQUFJLHVCQUFKQSxJQUFJLENBQUVHLEtBQUssQ0FBQztFQUNqRSxJQUFJLENBQUNDLE1BQU0sQ0FBQ0csUUFBUSxDQUFDSixLQUFLLENBQUMsSUFBSUEsS0FBSyxJQUFJLENBQUMsRUFBRSxPQUFPLElBQUk7RUFFdEQsSUFBSUEsS0FBSyxHQUFHLElBQUksRUFBRSxVQUFBSyxNQUFBLENBQVVMLEtBQUs7RUFDakMsSUFBSUEsS0FBSyxHQUFHLElBQUksR0FBRyxJQUFJLEVBQUU7SUFDdkIsSUFBTU0sRUFBRSxHQUFHTixLQUFLLEdBQUcsSUFBSTtJQUN2QixPQUFPTSxFQUFFLEdBQUcsRUFBRSxNQUFBRCxNQUFBLENBQU1DLEVBQUUsQ0FBQ0MsT0FBTyxDQUFDLENBQUMsQ0FBQyxjQUFBRixNQUFBLENBQVdHLElBQUksQ0FBQ0MsS0FBSyxDQUFDSCxFQUFFLENBQUMsUUFBSztFQUNqRTtFQUVBLFVBQUFELE1BQUEsQ0FBVSxDQUFDTCxLQUFLLElBQUksSUFBSSxHQUFHLElBQUksQ0FBQyxFQUFFTyxPQUFPLENBQUMsQ0FBQyxDQUFDO0FBQzlDIiwiaWdub3JlTGlzdCI6W119

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@merchi/product-form",
-  "version": "1.19.52",
+  "version": "1.19.53",
   "description": "A React component for Merchi product forms",
   "main": "lib/index.js",
   "module": "lib/index.js",