krl-alfred 2.23.7 → 2.23.9

package/dist/components/Uploader/Uploader.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { UploaderProps } from './props';
-declare const Uploader: ({ className, title, description, images, maxCount, columnCount, uploadLabel, coverBadgeText, variant, selectedIndex, showCoverBadge, accept, disabled, imagePadding, onUpload, onRemove, onSelect, }: UploaderProps) => React.JSX.Element;
+declare const Uploader: ({ className, title, description, images, maxCount, columnCount, uploadLabel, coverBadgeText, variant, selectedIndexes, selectedIndex, showCoverBadge, accept, disabled, imagePadding, imageFit, onUpload, onRemove, onSelect, }: UploaderProps) => React.JSX.Element;
 export default Uploader;

package/dist/components/Uploader/Uploader.js

@@ -21,13 +21,14 @@ var Uploader_styled_1 = require("./Uploader.styled");
 var Icon_1 = __importDefault(require("../Icon/Icon"));
 var Badges_1 = __importDefault(require("../Badges/Badges"));
 var Uploader = function (_a) {
-    var className = _a.className, title = _a.title, description = _a.description, _b = _a.images, images = _b === void 0 ? props_1.UploaderDefault.images : _b, _c = _a.maxCount, maxCount = _c === void 0 ? props_1.UploaderDefault.maxCount : _c, _d = _a.columnCount, columnCount = _d === void 0 ? props_1.UploaderDefault.columnCount : _d, _e = _a.uploadLabel, uploadLabel = _e === void 0 ? props_1.UploaderDefault.uploadLabel : _e, _f = _a.coverBadgeText, coverBadgeText = _f === void 0 ? props_1.UploaderDefault.coverBadgeText : _f, _g = _a.variant, variant = _g === void 0 ? props_1.UploaderDefault.variant : _g, _h = _a.selectedIndex, selectedIndex = _h === void 0 ? props_1.UploaderDefault.selectedIndex : _h, _j = _a.showCoverBadge, showCoverBadge = _j === void 0 ? props_1.UploaderDefault.showCoverBadge : _j, _k = _a.accept, accept = _k === void 0 ? props_1.UploaderDefault.accept : _k, _l = _a.disabled, disabled = _l === void 0 ? props_1.UploaderDefault.disabled : _l, _m = _a.imagePadding, imagePadding = _m === void 0 ? props_1.UploaderDefault.imagePadding : _m, onUpload = _a.onUpload, onRemove = _a.onRemove, onSelect = _a.onSelect;
+    var className = _a.className, title = _a.title, description = _a.description, _b = _a.images, images = _b === void 0 ? props_1.UploaderDefault.images : _b, _c = _a.maxCount, maxCount = _c === void 0 ? props_1.UploaderDefault.maxCount : _c, _d = _a.columnCount, columnCount = _d === void 0 ? props_1.UploaderDefault.columnCount : _d, _e = _a.uploadLabel, uploadLabel = _e === void 0 ? props_1.UploaderDefault.uploadLabel : _e, _f = _a.coverBadgeText, coverBadgeText = _f === void 0 ? props_1.UploaderDefault.coverBadgeText : _f, _g = _a.variant, variant = _g === void 0 ? props_1.UploaderDefault.variant : _g, selectedIndexes = _a.selectedIndexes, selectedIndex = _a.selectedIndex, _h = _a.showCoverBadge, showCoverBadge = _h === void 0 ? props_1.UploaderDefault.showCoverBadge : _h, _j = _a.accept, accept = _j === void 0 ? props_1.UploaderDefault.accept : _j, _k = _a.disabled, disabled = _k === void 0 ? props_1.UploaderDefault.disabled : _k, _l = _a.imagePadding, imagePadding = _l === void 0 ? props_1.UploaderDefault.imagePadding : _l, _m = _a.imageFit, imageFit = _m === void 0 ? props_1.UploaderDefault.imageFit : _m, onUpload = _a.onUpload, onRemove = _a.onRemove, onSelect = _a.onSelect;
     var fileInputRef = (0, react_1.useRef)(null);
     var uploadIndexRef = (0, react_1.useRef)(null);
     var localPreviewsRef = (0, react_1.useRef)({});
     var _o = (0, react_1.useState)({}), localPreviews = _o[0], setLocalPreviews = _o[1];
     var slots = Array.from({ length: maxCount }, function (_, index) { var _a, _b; return (_b = (_a = images[index]) !== null && _a !== void 0 ? _a : localPreviews[index]) !== null && _b !== void 0 ? _b : null; });
     var isCoverSelect = variant === 'coverSelect';
+    var activeSelectedIndexes = selectedIndexes !== null && selectedIndexes !== void 0 ? selectedIndexes : (selectedIndex !== undefined && selectedIndex !== null ? [selectedIndex] : props_1.UploaderDefault.selectedIndexes);
     localPreviewsRef.current = localPreviews;
     (0, react_1.useEffect)(function () {
         return function () {
@@ -107,10 +108,10 @@ var Uploader = function (_a) {
     return ((0, jsx_runtime_1.jsxs)(Uploader_styled_1.UploaderStyled, __assign({ className: className }, { children: [(title || description) && ((0, jsx_runtime_1.jsxs)(Uploader_styled_1.UploaderHeader, { children: [title && (0, jsx_runtime_1.jsx)(Uploader_styled_1.UploaderTitle, { children: title }), description && (0, jsx_runtime_1.jsx)(Uploader_styled_1.UploaderDescription, { children: description })] })), (0, jsx_runtime_1.jsx)(Uploader_styled_1.UploaderGrid, __assign({ "$columnCount": columnCount }, { children: slots.map(function (image, index) {
                     var _a, _b;
                     var isEmpty = !image;
-                    var isSelected = isCoverSelect && selectedIndex === index && !isEmpty;
+                    var isSelected = isCoverSelect && !isEmpty && activeSelectedIndexes.includes(index);
                     var showCoverOnSlot = !isCoverSelect && showCoverBadge && index === 0;
                     var showUploadContent = isEmpty || showCoverOnSlot;
-                    return ((0, jsx_runtime_1.jsxs)(Uploader_styled_1.UploaderSlot, __assign({ type: "button", "$isEmpty": isEmpty, "$isSelected": isSelected, "$disabled": disabled, disabled: disabled, onClick: function () { return handleSlotClick(index, image); } }, { children: [image && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Uploader_styled_1.UploaderSlotMedia, __assign({ "$padding": imagePadding }, { children: (0, jsx_runtime_1.jsx)(Uploader_styled_1.UploaderSlotImage, { src: image.src, alt: (_a = image.alt) !== null && _a !== void 0 ? _a : '' }) })), !isCoverSelect && ((0, jsx_runtime_1.jsx)(Uploader_styled_1.UploaderRemoveButton, __assign({ type: "button", "aria-label": "G\u00F6rseli kald\u0131r", onClick: function (event) { return handleRemove(event, index); } }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Closebig" }) })))] })), showUploadContent && ((0, jsx_runtime_1.jsxs)(Uploader_styled_1.UploaderUploadContent, __assign({ "$hasImage": !isEmpty }, { children: [showCoverOnSlot && ((0, jsx_runtime_1.jsx)(Uploader_styled_1.UploaderUploadBadgeWrapper, { children: renderCoverBadge() })), (0, jsx_runtime_1.jsx)(Uploader_styled_1.UploaderUploadLabel, __assign({ "$isHidden": !isEmpty && showCoverOnSlot }, { children: uploadLabel })), (0, jsx_runtime_1.jsx)(Uploader_styled_1.UploaderUploadIcon, __assign({ "$isHidden": !isEmpty && showCoverOnSlot }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "PlusMd", width: "1.5rem", height: "1.5rem", color: "var(--primary)" }) }))] })))] }), (_b = image === null || image === void 0 ? void 0 : image.id) !== null && _b !== void 0 ? _b : "slot-".concat(index)));
+                    return ((0, jsx_runtime_1.jsxs)(Uploader_styled_1.UploaderSlot, __assign({ type: "button", "$isEmpty": isEmpty, "$isSelected": isSelected, "$disabled": disabled, disabled: disabled, onClick: function () { return handleSlotClick(index, image); } }, { children: [image && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Uploader_styled_1.UploaderSlotMedia, __assign({ "$padding": imagePadding }, { children: (0, jsx_runtime_1.jsx)(Uploader_styled_1.UploaderSlotImage, { src: image.src, alt: (_a = image.alt) !== null && _a !== void 0 ? _a : '', "$fit": imageFit }) })), !isCoverSelect && ((0, jsx_runtime_1.jsx)(Uploader_styled_1.UploaderRemoveButton, __assign({ type: "button", "aria-label": "G\u00F6rseli kald\u0131r", onClick: function (event) { return handleRemove(event, index); } }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Closebig" }) })))] })), showUploadContent && ((0, jsx_runtime_1.jsxs)(Uploader_styled_1.UploaderUploadContent, __assign({ "$hasImage": !isEmpty }, { children: [showCoverOnSlot && ((0, jsx_runtime_1.jsx)(Uploader_styled_1.UploaderUploadBadgeWrapper, { children: renderCoverBadge() })), (0, jsx_runtime_1.jsx)(Uploader_styled_1.UploaderUploadLabel, __assign({ "$isHidden": !isEmpty && showCoverOnSlot }, { children: uploadLabel })), (0, jsx_runtime_1.jsx)(Uploader_styled_1.UploaderUploadIcon, __assign({ "$isHidden": !isEmpty && showCoverOnSlot }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "PlusMd", width: "1.5rem", height: "1.5rem", color: "var(--primary)" }) }))] })))] }), (_b = image === null || image === void 0 ? void 0 : image.id) !== null && _b !== void 0 ? _b : "slot-".concat(index)));
                 }) })), (0, jsx_runtime_1.jsx)(Uploader_styled_1.UploaderHiddenInput, { ref: fileInputRef, type: "file", accept: accept, onChange: handleFileChange })] })));
 };
 exports.default = Uploader;

package/dist/components/Uploader/Uploader.styled.d.ts

@@ -22,7 +22,11 @@ export declare const UploaderSlotMedia: import("styled-components/dist/types").I
 }, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$padding"> & {
     $padding?: string;
 }, never>>> & string;
-export declare const UploaderSlotImage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, never>>> & string;
+export declare const UploaderSlotImage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "$fit"> & {
+    $fit?: 'cover' | 'contain';
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "$fit"> & {
+    $fit?: 'cover' | 'contain';
+}, never>>> & string;
 export declare const UploaderUploadContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$hasImage"> & {
     $hasImage?: boolean;
 }, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$hasImage"> & {

package/dist/components/Uploader/Uploader.styled.js

@@ -45,7 +45,7 @@ exports.UploaderSlot = styled_components_1.default.button(templateObject_9 || (t
     return slotFilledStyles;
 });
 exports.UploaderSlotMedia = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    position: absolute;\n    inset: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: ", ";\n    box-sizing: border-box;\n"], ["\n    position: absolute;\n    inset: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: ", ";\n    box-sizing: border-box;\n"])), function (props) { return props.$padding || '1rem'; });
-exports.UploaderSlotImage = styled_components_1.default.img(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    box-sizing: border-box;\n    pointer-events: none;\n    border-radius: 0.5rem;\n"], ["\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    box-sizing: border-box;\n    pointer-events: none;\n    border-radius: 0.5rem;\n"])));
+exports.UploaderSlotImage = styled_components_1.default.img(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n    width: 100%;\n    height: 100%;\n    object-fit: ", ";\n    box-sizing: border-box;\n    pointer-events: none;\n    border-radius: 0.5rem;\n"], ["\n    width: 100%;\n    height: 100%;\n    object-fit: ", ";\n    box-sizing: border-box;\n    pointer-events: none;\n    border-radius: 0.5rem;\n"])), function (props) { return props.$fit || 'cover'; });
 exports.UploaderUploadContent = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    pointer-events: none;\n    position: ", ";\n    z-index: ", ";\n"], ["\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    pointer-events: none;\n    position: ", ";\n    z-index: ", ";\n"])), function (props) { return props.$hasImage ? 'relative' : 'static'; }, function (props) { return props.$hasImage ? 1 : 'auto'; });
 exports.UploaderUploadBadgeWrapper = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n    margin-bottom: 0.5rem;\n"], ["\n    margin-bottom: 0.5rem;\n"])));
 exports.UploaderUploadLabel = styled_components_1.default.span(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n    color: var(--primary);\n    font: var(--body-semi-bold-14-17);\n    visibility: ", ";\n"], ["\n    color: var(--primary);\n    font: var(--body-semi-bold-14-17);\n    visibility: ", ";\n"])), function (props) { return props.$isHidden ? 'hidden' : 'visible'; });

package/dist/components/Uploader/props.d.ts

@@ -4,6 +4,7 @@ export interface UploaderImage {
     alt?: string;
 }
 export type UploaderVariant = 'default' | 'coverSelect';
+export type UploaderImageFit = 'cover' | 'contain';
 export interface UploaderProps {
     className?: string;
     title?: string;
@@ -15,14 +16,20 @@ export interface UploaderProps {
     uploadLabel?: string;
     coverBadgeText?: string;
     variant?: UploaderVariant;
+    /** Seçili slot index'leri (birden fazla olabilir) */
+    selectedIndexes?: number[];
+    /** @deprecated `selectedIndexes` kullan. Tek seçim için `[index]` geç. */
     selectedIndex?: number;
     showCoverBadge?: boolean;
     accept?: string;
     disabled?: boolean;
     /** Slot görseli padding'i (`1.5rem`, `1rem`, `1.5rem 1rem` vb.) */
     imagePadding?: string;
+    /** Slot görseli object-fit değeri */
+    imageFit?: UploaderImageFit;
     onUpload?: (index: number, file: File) => void;
     onRemove?: (index: number) => void;
+    /** Slot seçildiğinde çağrılır; parent selectedIndexes'i yönetir */
     onSelect?: (index: number) => void;
 }
 export declare const UploaderDefault: {
@@ -32,9 +39,11 @@ export declare const UploaderDefault: {
     uploadLabel: string;
     coverBadgeText: string;
     variant: UploaderVariant;
+    selectedIndexes: number[];
     selectedIndex: number;
     showCoverBadge: boolean;
     accept: string;
     disabled: boolean;
     imagePadding: string;
+    imageFit: UploaderImageFit;
 };

package/dist/components/Uploader/props.js

@@ -8,9 +8,11 @@ exports.UploaderDefault = {
     uploadLabel: 'Yükle',
     coverBadgeText: 'Kapak',
     variant: 'default',
-    selectedIndex: 0,
+    selectedIndexes: [],
+    selectedIndex: undefined,
     showCoverBadge: true,
     accept: 'image/*',
     disabled: false,
     imagePadding: '1rem',
+    imageFit: 'cover',
 };

package/dist/components/Uploader/stories/Uploader.stories.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { UploaderImage } from '../props';
 declare const _default: {
     title: string;
-    component: ({ className, title, description, images, maxCount, columnCount, uploadLabel, coverBadgeText, variant, selectedIndex, showCoverBadge, accept, disabled, imagePadding, onUpload, onRemove, onSelect, }: import("../props").UploaderProps) => React.JSX.Element;
+    component: ({ className, title, description, images, maxCount, columnCount, uploadLabel, coverBadgeText, variant, selectedIndexes, selectedIndex, showCoverBadge, accept, disabled, imagePadding, imageFit, onUpload, onRemove, onSelect, }: import("../props").UploaderProps) => React.JSX.Element;
     tags: string[];
     argTypes: {
         variant: {
@@ -24,6 +24,13 @@ declare const _default: {
         imagePadding: {
             control: string;
         };
+        imageFit: {
+            control: string;
+            options: string[];
+        };
+        selectedIndexes: {
+            control: string;
+        };
     };
 };
 export default _default;
@@ -58,7 +65,7 @@ export declare const CoverSelect: {
         title: string;
         variant: string;
         images: UploaderImage[];
-        selectedIndex: number;
+        selectedIndexes: number[];
         maxCount: number;
     };
 };

package/dist/components/Uploader/stories/Uploader.stories.js

@@ -1,4 +1,15 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
         if (ar || !(i in from)) {
@@ -36,6 +47,8 @@ exports.default = {
         showCoverBadge: { control: 'boolean' },
         disabled: { control: 'boolean' },
         imagePadding: { control: 'text' },
+        imageFit: { control: 'select', options: ['cover', 'contain'] },
+        selectedIndexes: { control: 'object' },
     },
 };
 exports.Empty = {
@@ -69,7 +82,7 @@ exports.CoverSelect = {
         title: 'Ana görselden seç',
         variant: 'coverSelect',
         images: [sampleImage],
-        selectedIndex: 0,
+        selectedIndexes: [0],
         maxCount: 4,
     },
 };
@@ -94,8 +107,15 @@ exports.Interactive = {
     render: function () { return (0, jsx_runtime_1.jsx)(UploaderInteractiveStory, {}); },
 };
 var UploaderCoverSelectStory = function () {
-    var _a = (0, react_1.useState)(0), selectedIndex = _a[0], setSelectedIndex = _a[1];
-    return ((0, jsx_runtime_1.jsx)(Uploader_1.default, { title: "Ana g\u00F6rselden se\u00E7", variant: "coverSelect", images: [sampleImage], selectedIndex: selectedIndex, maxCount: 4, onSelect: setSelectedIndex }));
+    var _a = (0, react_1.useState)([0]), selectedIndexes = _a[0], setSelectedIndexes = _a[1];
+    var images = [sampleImage, __assign(__assign({}, sampleImage), { id: 'sample-2' }), __assign(__assign({}, sampleImage), { id: 'sample-3' })];
+    return ((0, jsx_runtime_1.jsx)(Uploader_1.default, { title: "Ana g\u00F6rselden se\u00E7", variant: "coverSelect", images: images, selectedIndexes: selectedIndexes, maxCount: 4, onSelect: function (index) {
+            setSelectedIndexes(function (prev) {
+                return prev.includes(index)
+                    ? prev.filter(function (item) { return item !== index; })
+                    : __spreadArray(__spreadArray([], prev, true), [index], false);
+            });
+        } }));
 };
 exports.CoverSelectInteractive = {
     render: function () { return (0, jsx_runtime_1.jsx)(UploaderCoverSelectStory, {}); },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "krl-alfred",
-  "version": "2.23.7",
+  "version": "2.23.9",
   "files": [
     "dist"
   ],