krl-alfred 2.23.25 → 2.23.26
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Icon/iconList/DragMini.d.ts +3 -0
- package/dist/components/Icon/iconList/DragMini.js +40 -0
- package/dist/components/Icon/iconList/index.d.ts +5 -1
- package/dist/components/Icon/iconList/index.js +11 -5
- package/dist/components/Input/Input.styled.js +1 -1
- package/dist/components/Tag/Tag.d.ts +1 -1
- package/dist/components/Tag/Tag.js +6 -2
- package/dist/components/Tag/Tag.styled.d.ts +5 -2
- package/dist/components/Tag/Tag.styled.js +7 -6
- package/dist/components/Tag/Tag.test.d.ts +1 -0
- package/dist/components/Tag/Tag.test.js +152 -0
- package/dist/components/Tag/props.d.ts +7 -0
- package/dist/components/Tag/props.js +2 -0
- package/dist/components/Tag/stories/Tag.stories.d.ts +29 -0
- package/dist/components/Tag/stories/Tag.stories.js +37 -2
- package/package.json +1 -1
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
13
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
14
|
+
if (k2 === undefined) k2 = k;
|
|
15
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
16
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
17
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
18
|
+
}
|
|
19
|
+
Object.defineProperty(o, k2, desc);
|
|
20
|
+
}) : (function(o, m, k, k2) {
|
|
21
|
+
if (k2 === undefined) k2 = k;
|
|
22
|
+
o[k2] = m[k];
|
|
23
|
+
}));
|
|
24
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
25
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
26
|
+
}) : function(o, v) {
|
|
27
|
+
o["default"] = v;
|
|
28
|
+
});
|
|
29
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
30
|
+
if (mod && mod.__esModule) return mod;
|
|
31
|
+
var result = {};
|
|
32
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
33
|
+
__setModuleDefault(result, mod);
|
|
34
|
+
return result;
|
|
35
|
+
};
|
|
36
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
37
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
38
|
+
var React = __importStar(require("react"));
|
|
39
|
+
var SvgDragMini = function (props) { return ((0, jsx_runtime_1.jsxs)("svg", __assign({ width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M6.33399 5.83798C6.85675 5.83798 7.28053 5.41425 7.28053 4.89155C7.28053 4.36886 6.85675 3.94513 6.33399 3.94513C5.81123 3.94513 5.38745 4.36886 5.38745 4.89155C5.38745 5.41425 5.81123 5.83798 6.33399 5.83798Z", fill: "currentColor" }), (0, jsx_runtime_1.jsx)("path", { d: "M7.18953 4.89152C7.1868 5.24518 6.96403 5.5752 6.62761 5.69521C6.28663 5.81703 5.90566 5.71157 5.67289 5.43428C5.44193 5.15881 5.41738 4.7506 5.60378 4.44604C5.78654 4.14511 6.15116 3.98146 6.49758 4.05147C6.89675 4.13238 7.1868 4.48513 7.18953 4.89152C7.19044 5.0088 7.37229 5.0088 7.37138 4.89152C7.36865 4.45695 7.09496 4.06783 6.68762 3.916C6.28482 3.7669 5.80927 3.896 5.53741 4.22875C5.26099 4.56695 5.21826 5.05244 5.44739 5.42883C5.6747 5.80249 6.11933 5.9925 6.54668 5.90704C7.02404 5.81067 7.36865 5.37428 7.37229 4.89152C7.37229 4.77424 7.19044 4.77424 7.18953 4.89152Z", fill: "currentColor" }), (0, jsx_runtime_1.jsx)("path", { d: "M9.65625 5.83798C10.179 5.83798 10.6028 5.41425 10.6028 4.89155C10.6028 4.36886 10.179 3.94513 9.65625 3.94513C9.1335 3.94513 8.70972 4.36886 8.70972 4.89155C8.70972 5.41425 9.1335 5.83798 9.65625 5.83798Z", fill: "currentColor" }), (0, jsx_runtime_1.jsx)("path", { d: "M10.5118 4.89152C10.5091 5.24518 10.2863 5.5752 9.94987 5.69521C9.6089 5.81703 9.22792 5.71157 8.99515 5.43428C8.7642 5.15881 8.73965 4.7506 8.92605 4.44604C9.10881 4.14511 9.47342 3.98146 9.81985 4.05147C10.219 4.13238 10.5091 4.48513 10.5118 4.89152C10.5127 5.0088 10.6946 5.0088 10.6936 4.89152C10.6909 4.45695 10.4172 4.06783 10.0099 3.916C9.60708 3.7669 9.13154 3.896 8.85967 4.22875C8.58326 4.56695 8.54052 5.05244 8.76966 5.42883C8.99697 5.80249 9.4416 5.9925 9.86895 5.90704C10.3463 5.81067 10.6909 5.37428 10.6946 4.89152C10.6946 4.77424 10.5127 4.77424 10.5118 4.89152Z", fill: "currentColor" }), (0, jsx_runtime_1.jsx)("path", { d: "M6.33399 9.01614C6.85675 9.01614 7.28053 8.59241 7.28053 8.06971C7.28053 7.54702 6.85675 7.12329 6.33399 7.12329C5.81123 7.12329 5.38745 7.54702 5.38745 8.06971C5.38745 8.59241 5.81123 9.01614 6.33399 9.01614Z", fill: "currentColor" }), (0, jsx_runtime_1.jsx)("path", { d: "M7.18953 8.06974C7.1868 8.4234 6.96403 8.75342 6.62761 8.87343C6.28663 8.99526 5.90566 8.8898 5.67289 8.6125C5.44193 8.33703 5.41738 7.92882 5.60378 7.62426C5.78654 7.32333 6.15116 7.15968 6.49758 7.22969C6.89675 7.3106 7.1868 7.66335 7.18953 8.06974C7.19044 8.18702 7.37229 8.18702 7.37138 8.06974C7.36865 7.63517 7.09496 7.24605 6.68762 7.09423C6.28482 6.94513 5.80927 7.07422 5.53741 7.40697C5.26099 7.74518 5.21826 8.23066 5.44739 8.60705C5.6747 8.98071 6.11933 9.17072 6.54668 9.08526C7.02404 8.98889 7.36865 8.5525 7.37229 8.06974C7.37229 7.95246 7.19044 7.95246 7.18953 8.06974Z", fill: "currentColor" }), (0, jsx_runtime_1.jsx)("path", { d: "M9.65625 9.01614C10.179 9.01614 10.6028 8.59241 10.6028 8.06971C10.6028 7.54702 10.179 7.12329 9.65625 7.12329C9.1335 7.12329 8.70972 7.54702 8.70972 8.06971C8.70972 8.59241 9.1335 9.01614 9.65625 9.01614Z", fill: "currentColor" }), (0, jsx_runtime_1.jsx)("path", { d: "M10.5118 8.06974C10.5091 8.4234 10.2863 8.75342 9.94987 8.87343C9.6089 8.99526 9.22792 8.8898 8.99515 8.6125C8.7642 8.33703 8.73965 7.92882 8.92605 7.62426C9.10881 7.32333 9.47342 7.15968 9.81985 7.22969C10.219 7.3106 10.5091 7.66335 10.5118 8.06974C10.5127 8.18702 10.6946 8.18702 10.6936 8.06974C10.6909 7.63517 10.4172 7.24605 10.0099 7.09423C9.60708 6.94513 9.13154 7.07422 8.85967 7.40697C8.58326 7.74518 8.54052 8.23066 8.76966 8.60705C8.99697 8.98071 9.4416 9.17072 9.86895 9.08526C10.3463 8.98889 10.6909 8.5525 10.6946 8.06974C10.6946 7.95246 10.5127 7.95246 10.5118 8.06974Z", fill: "currentColor" }), (0, jsx_runtime_1.jsx)("path", { d: "M6.33399 12.1943C6.85675 12.1943 7.28053 11.7706 7.28053 11.2479C7.28053 10.7252 6.85675 10.3015 6.33399 10.3015C5.81123 10.3015 5.38745 10.7252 5.38745 11.2479C5.38745 11.7706 5.81123 12.1943 6.33399 12.1943Z", fill: "currentColor" }), (0, jsx_runtime_1.jsx)("path", { d: "M7.18953 11.2479C7.1868 11.6016 6.96403 11.9316 6.62761 12.0516C6.28663 12.1734 5.90566 12.068 5.67289 11.7907C5.44193 11.5152 5.41738 11.107 5.60378 10.8024C5.78654 10.5015 6.15116 10.3378 6.49758 10.4079C6.89675 10.4888 7.1868 10.8415 7.18953 11.2479C7.19044 11.3652 7.37229 11.3652 7.37138 11.2479C7.36865 10.8133 7.09496 10.4242 6.68762 10.2724C6.28482 10.1233 5.80927 10.2524 5.53741 10.5851C5.26099 10.9233 5.21826 11.4088 5.44739 11.7852C5.6747 12.1589 6.11933 12.3489 6.54668 12.2634C7.02404 12.1671 7.36865 11.7307 7.37229 11.2479C7.37229 11.1306 7.19044 11.1306 7.18953 11.2479Z", fill: "currentColor" }), (0, jsx_runtime_1.jsx)("path", { d: "M9.65625 12.1943C10.179 12.1943 10.6028 11.7706 10.6028 11.2479C10.6028 10.7252 10.179 10.3015 9.65625 10.3015C9.1335 10.3015 8.70972 10.7252 8.70972 11.2479C8.70972 11.7706 9.1335 12.1943 9.65625 12.1943Z", fill: "currentColor" }), (0, jsx_runtime_1.jsx)("path", { d: "M10.5118 11.2479C10.5091 11.6016 10.2863 11.9316 9.94987 12.0516C9.6089 12.1734 9.22792 12.068 8.99515 11.7907C8.7642 11.5152 8.73965 11.107 8.92605 10.8024C9.10881 10.5015 9.47342 10.3378 9.81985 10.4079C10.219 10.4888 10.5091 10.8415 10.5118 11.2479C10.5127 11.3652 10.6946 11.3652 10.6936 11.2479C10.6909 10.8133 10.4172 10.4242 10.0099 10.2724C9.60708 10.1233 9.13154 10.2524 8.85967 10.5851C8.58326 10.9233 8.54052 11.4088 8.76966 11.7852C8.99697 12.1589 9.4416 12.3489 9.86895 12.2634C10.3463 12.1671 10.6909 11.7307 10.6946 11.2479C10.6946 11.1306 10.5127 11.1306 10.5118 11.2479Z", fill: "currentColor" })] }))); };
|
|
40
|
+
exports.default = SvgDragMini;
|
|
@@ -275,6 +275,9 @@ export namespace iconList {
|
|
|
275
275
|
function Drag({ ...props }: {
|
|
276
276
|
[x: string]: any;
|
|
277
277
|
}): import("react").JSX.Element;
|
|
278
|
+
function DragMini({ ...props }: {
|
|
279
|
+
[x: string]: any;
|
|
280
|
+
}): import("react").JSX.Element;
|
|
278
281
|
function Dublearrrowrightbig({ ...props }: {
|
|
279
282
|
[x: string]: any;
|
|
280
283
|
}): import("react").JSX.Element;
|
|
@@ -896,6 +899,7 @@ import { default as Document } from "./Document";
|
|
|
896
899
|
import { default as Download } from "./Download";
|
|
897
900
|
import { default as DownloadMini } from "./DownloadMini";
|
|
898
901
|
import { default as Drag } from "./Drag";
|
|
902
|
+
import { default as DragMini } from "./DragMini";
|
|
899
903
|
import { default as Dublearrrowrightbig } from "./Dublearrrowrightbig";
|
|
900
904
|
import { default as Edit } from "./Edit";
|
|
901
905
|
import { default as EditSquare } from "./EditSquare";
|
|
@@ -1072,4 +1076,4 @@ import { default as UserPlusLg } from "./UserPlusLg";
|
|
|
1072
1076
|
import { default as Wphk } from "./Wphk";
|
|
1073
1077
|
import { default as Youtubehk } from "./Youtubehk";
|
|
1074
1078
|
import { default as Youtubewithfooter } from "./Youtubewithfooter";
|
|
1075
|
-
export { Activity, Announcement, ArrowDown, ArrowDownAnimate, ArrowDownBig, ArrowDownCircle, ArrowDownSquare, ArrowGoSmall, ArrowLeft, ArrowLeftAnimate, ArrowLeftBig, ArrowLeftCircle, ArrowLeftSquare, ArrowLeftXl, ArrowRight, ArrowRightAnimate, ArrowRightBig, ArrowRightCircle, ArrowRightSquare, ArrowShare, ArrowSharemini, ArrowSmallDown, ArrowSmallDownStroke, ArrowSmallLeft, ArrowSmallLeftStroke, ArrowSmallRight, ArrowSmallRightBackground, ArrowSmallRightStroke, ArrowSmallUp, ArrowUp, ArrowUpAnimate, ArrowUpBig, ArrowUpCircle, ArrowUpSquare, AskedQuestions, Baby, BackCargo2, BackCargosmall, Backcargo, Bag2, Bag, BagCircleFilled, BagStar, Bookmark, Box, Buy, BuyXl, Calendar, CalenderArrowleftsmall, Calenderarrowrightsmall, Call, CallMissed, CallSilent, Calling, Camera, Campaign, CampaignColorful, CarbonNautral, Cargo, Cargo2, Category, Chart, Chat, CheckMark, CheckMarkMd, CheckboxElementChecked, CheckboxElementDisabled, CheckboxElementInvalid, CheckboxElementUncheck, CihazTeslimAlindi, ClickOnclick, CloseMedium, CloseSmall, CloseSquare, Closebig, Closemini, Coffee, Completed, Copy, CreditCard, Danger, DarkBadge, Delete, DeleteSmall, Discount, Discovery, Dislike, DislikeLg, Document, Download, DownloadMini, Drag, Dublearrrowrightbig, Edit, EditSquare, ElSatis, Facebook, Filter, Filter2, FilterDown, FilterSmall, FilterUp, Flash, Folder, ForwardMd, Game, Gift, Graph, Heart, HeartLg, Hide, Home, House, Image, InfoCircle, InfoSquare, InfoSquareSmall, Instagram, InstagramNegative, Instagramwithfooter, Keyboard, KeyboardClose, Language2, Laptop, Like, LikeV1, Likesmall, Link, LinkSm, LinkedIn, Loading, LoadingDefault, Loadingsmall, Location, Lock, Login, Logout, MasterCard, Message, Minus, Money, MoneyBig, MoreCircle, MoreSquare, NegativeBig, NegativeSmall, Notification, NotificationBigwith16, NotificationBigwith24, NotificationSmallwith16, NotificationSmallwith24, Operation, OrderProgressIcons, Paper, PaperDownload, PaperFail, PaperNegative, PaperPlus, PaperUpload, Password, Pause, PauseMd, PlayMd, PlusBig, PlusCircle, PlusMd, PlusSmall, PlusSquare, PriceTag, Profile, RadioButtonElementChecked, RadioButtonElementDisabled, RadioButtonElementInvalid, RadioButtonElementUnchecked, Rectangle, RectanglePurple, RotateBig, Sandwatch, Scan, Search, Searchsmall, Security, Send, Setting, SettingCircle, ShieldDone, ShieldDoneLg, ShieldFail, Show, ShowSm, ShufflePlay, SignLanguage, Star, StarCircle, Starfull, StarfullSmall, StarfullXSmall, Subcategory, Swap, SwitchPassive, Tamamlarsin, ThumbCircleFilled, Tick, TickMd, TickSquare, TicketStar, Ticket, TimeCircle, TimeCircleMd, TimeSquare, Trash, Twitter, TwitterFilled, Twitterhk, Twitterwithfooter, Unlock, Upload, User2, User3, Valentine, Video, Visa, Voice, Voice2, VolumeDown, VolumeOff, VolumeOffSm, VolumeUp, VolumeUpSm, Wallet, Wallet2, Watch, WaveArrowDown, WaveArrowUp, Whatsapp, Work, Wp, Wpfooter, Youtube, CircleFilled, Clab1, ClabFilled, ClabHands, Dislikesmall, Dublearrowleftbig, Facebookhk, Facebookwithfooter, GiftCard, Grid, Instagramhk, Konfeti, Konfeti2, Linkedinhk, Linkedinwithfooter, List, Live, More, NewYear, Play, RotateRight, Subscription, TextLoading, Tiktok, UserPlus, UserPlusLg, Wphk, Youtubehk, Youtubewithfooter };
|
|
1079
|
+
export { Activity, Announcement, ArrowDown, ArrowDownAnimate, ArrowDownBig, ArrowDownCircle, ArrowDownSquare, ArrowGoSmall, ArrowLeft, ArrowLeftAnimate, ArrowLeftBig, ArrowLeftCircle, ArrowLeftSquare, ArrowLeftXl, ArrowRight, ArrowRightAnimate, ArrowRightBig, ArrowRightCircle, ArrowRightSquare, ArrowShare, ArrowSharemini, ArrowSmallDown, ArrowSmallDownStroke, ArrowSmallLeft, ArrowSmallLeftStroke, ArrowSmallRight, ArrowSmallRightBackground, ArrowSmallRightStroke, ArrowSmallUp, ArrowUp, ArrowUpAnimate, ArrowUpBig, ArrowUpCircle, ArrowUpSquare, AskedQuestions, Baby, BackCargo2, BackCargosmall, Backcargo, Bag2, Bag, BagCircleFilled, BagStar, Bookmark, Box, Buy, BuyXl, Calendar, CalenderArrowleftsmall, Calenderarrowrightsmall, Call, CallMissed, CallSilent, Calling, Camera, Campaign, CampaignColorful, CarbonNautral, Cargo, Cargo2, Category, Chart, Chat, CheckMark, CheckMarkMd, CheckboxElementChecked, CheckboxElementDisabled, CheckboxElementInvalid, CheckboxElementUncheck, CihazTeslimAlindi, ClickOnclick, CloseMedium, CloseSmall, CloseSquare, Closebig, Closemini, Coffee, Completed, Copy, CreditCard, Danger, DarkBadge, Delete, DeleteSmall, Discount, Discovery, Dislike, DislikeLg, Document, Download, DownloadMini, Drag, DragMini, Dublearrrowrightbig, Edit, EditSquare, ElSatis, Facebook, Filter, Filter2, FilterDown, FilterSmall, FilterUp, Flash, Folder, ForwardMd, Game, Gift, Graph, Heart, HeartLg, Hide, Home, House, Image, InfoCircle, InfoSquare, InfoSquareSmall, Instagram, InstagramNegative, Instagramwithfooter, Keyboard, KeyboardClose, Language2, Laptop, Like, LikeV1, Likesmall, Link, LinkSm, LinkedIn, Loading, LoadingDefault, Loadingsmall, Location, Lock, Login, Logout, MasterCard, Message, Minus, Money, MoneyBig, MoreCircle, MoreSquare, NegativeBig, NegativeSmall, Notification, NotificationBigwith16, NotificationBigwith24, NotificationSmallwith16, NotificationSmallwith24, Operation, OrderProgressIcons, Paper, PaperDownload, PaperFail, PaperNegative, PaperPlus, PaperUpload, Password, Pause, PauseMd, PlayMd, PlusBig, PlusCircle, PlusMd, PlusSmall, PlusSquare, PriceTag, Profile, RadioButtonElementChecked, RadioButtonElementDisabled, RadioButtonElementInvalid, RadioButtonElementUnchecked, Rectangle, RectanglePurple, RotateBig, Sandwatch, Scan, Search, Searchsmall, Security, Send, Setting, SettingCircle, ShieldDone, ShieldDoneLg, ShieldFail, Show, ShowSm, ShufflePlay, SignLanguage, Star, StarCircle, Starfull, StarfullSmall, StarfullXSmall, Subcategory, Swap, SwitchPassive, Tamamlarsin, ThumbCircleFilled, Tick, TickMd, TickSquare, TicketStar, Ticket, TimeCircle, TimeCircleMd, TimeSquare, Trash, Twitter, TwitterFilled, Twitterhk, Twitterwithfooter, Unlock, Upload, User2, User3, Valentine, Video, Visa, Voice, Voice2, VolumeDown, VolumeOff, VolumeOffSm, VolumeUp, VolumeUpSm, Wallet, Wallet2, Watch, WaveArrowDown, WaveArrowUp, Whatsapp, Work, Wp, Wpfooter, Youtube, CircleFilled, Clab1, ClabFilled, ClabHands, Dislikesmall, Dublearrowleftbig, Facebookhk, Facebookwithfooter, GiftCard, Grid, Instagramhk, Konfeti, Konfeti2, Linkedinhk, Linkedinwithfooter, List, Live, More, NewYear, Play, RotateRight, Subscription, TextLoading, Tiktok, UserPlus, UserPlusLg, Wphk, Youtubehk, Youtubewithfooter };
|
|
@@ -26,11 +26,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
26
26
|
};
|
|
27
27
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
28
28
|
exports.Calenderarrowrightsmall = exports.CalenderArrowleftsmall = exports.Calendar = exports.BuyXl = exports.Buy = exports.Box = exports.Bookmark = exports.BagStar = exports.BagCircleFilled = exports.Bag = exports.Bag2 = exports.Backcargo = exports.BackCargosmall = exports.BackCargo2 = exports.Baby = exports.AskedQuestions = exports.ArrowUpSquare = exports.ArrowUpCircle = exports.ArrowUpBig = exports.ArrowUpAnimate = exports.ArrowUp = exports.ArrowSmallUp = exports.ArrowSmallRightStroke = exports.ArrowSmallRightBackground = exports.ArrowSmallRight = exports.ArrowSmallLeftStroke = exports.ArrowSmallLeft = exports.ArrowSmallDownStroke = exports.ArrowSmallDown = exports.ArrowSharemini = exports.ArrowShare = exports.ArrowRightSquare = exports.ArrowRightCircle = exports.ArrowRightBig = exports.ArrowRightAnimate = exports.ArrowRight = exports.ArrowLeftXl = exports.ArrowLeftSquare = exports.ArrowLeftCircle = exports.ArrowLeftBig = exports.ArrowLeftAnimate = exports.ArrowLeft = exports.ArrowGoSmall = exports.ArrowDownSquare = exports.ArrowDownCircle = exports.ArrowDownBig = exports.ArrowDownAnimate = exports.ArrowDown = exports.Announcement = exports.Activity = void 0;
|
|
29
|
-
exports.
|
|
30
|
-
exports.
|
|
31
|
-
exports.
|
|
32
|
-
exports.
|
|
33
|
-
exports.iconList = exports.Youtubewithfooter = exports.Youtubehk = exports.Wphk = exports.UserPlusLg = exports.UserPlus = exports.Tiktok = exports.TextLoading = exports.Subscription = exports.RotateRight = exports.Play = exports.NewYear = exports.More = exports.Live = exports.List = exports.Linkedinwithfooter = exports.Linkedinhk = exports.Konfeti2 = exports.Konfeti = void 0;
|
|
29
|
+
exports.Filter2 = exports.Filter = exports.Facebook = exports.ElSatis = exports.EditSquare = exports.Edit = exports.Dublearrrowrightbig = exports.DragMini = exports.Drag = exports.DownloadMini = exports.Download = exports.Document = exports.DislikeLg = exports.Dislike = exports.Discovery = exports.Discount = exports.DeleteSmall = exports.Delete = exports.DarkBadge = exports.Danger = exports.CreditCard = exports.Copy = exports.Completed = exports.Coffee = exports.Closemini = exports.Closebig = exports.CloseSquare = exports.CloseSmall = exports.CloseMedium = exports.ClickOnclick = exports.CihazTeslimAlindi = exports.CheckboxElementUncheck = exports.CheckboxElementInvalid = exports.CheckboxElementDisabled = exports.CheckboxElementChecked = exports.CheckMarkMd = exports.CheckMark = exports.Chat = exports.Chart = exports.Category = exports.Cargo2 = exports.Cargo = exports.CarbonNautral = exports.CampaignColorful = exports.Campaign = exports.Camera = exports.Calling = exports.CallSilent = exports.CallMissed = exports.Call = void 0;
|
|
30
|
+
exports.NotificationBigwith24 = exports.NotificationBigwith16 = exports.Notification = exports.NegativeSmall = exports.NegativeBig = exports.MoreSquare = exports.MoreCircle = exports.MoneyBig = exports.Money = exports.Minus = exports.Message = exports.MasterCard = exports.Logout = exports.Login = exports.Lock = exports.Location = exports.Loadingsmall = exports.LoadingDefault = exports.Loading = exports.LinkedIn = exports.LinkSm = exports.Link = exports.Likesmall = exports.LikeV1 = exports.Like = exports.Laptop = exports.Language2 = exports.KeyboardClose = exports.Keyboard = exports.Instagramwithfooter = exports.InstagramNegative = exports.Instagram = exports.InfoSquareSmall = exports.InfoSquare = exports.InfoCircle = exports.Image = exports.House = exports.Home = exports.Hide = exports.HeartLg = exports.Heart = exports.Graph = exports.Gift = exports.Game = exports.ForwardMd = exports.Folder = exports.Flash = exports.FilterUp = exports.FilterSmall = exports.FilterDown = void 0;
|
|
31
|
+
exports.Swap = exports.Subcategory = exports.StarfullXSmall = exports.StarfullSmall = exports.Starfull = exports.StarCircle = exports.Star = exports.SignLanguage = exports.ShufflePlay = exports.ShowSm = exports.Show = exports.ShieldFail = exports.ShieldDoneLg = exports.ShieldDone = exports.SettingCircle = exports.Setting = exports.Send = exports.Security = exports.Searchsmall = exports.Search = exports.Scan = exports.Sandwatch = exports.RotateBig = exports.RectanglePurple = exports.Rectangle = exports.RadioButtonElementUnchecked = exports.RadioButtonElementInvalid = exports.RadioButtonElementDisabled = exports.RadioButtonElementChecked = exports.Profile = exports.PriceTag = exports.PlusSquare = exports.PlusSmall = exports.PlusMd = exports.PlusCircle = exports.PlusBig = exports.PlayMd = exports.PauseMd = exports.Pause = exports.Password = exports.PaperUpload = exports.PaperPlus = exports.PaperNegative = exports.PaperFail = exports.PaperDownload = exports.Paper = exports.OrderProgressIcons = exports.Operation = exports.NotificationSmallwith24 = exports.NotificationSmallwith16 = void 0;
|
|
32
|
+
exports.Grid = exports.GiftCard = exports.Facebookwithfooter = exports.Facebookhk = exports.Dublearrowleftbig = exports.Dislikesmall = exports.ClabHands = exports.ClabFilled = exports.Clab1 = exports.CircleFilled = exports.Youtube = exports.Wpfooter = exports.Wp = exports.Work = exports.Whatsapp = exports.WaveArrowUp = exports.WaveArrowDown = exports.Watch = exports.Wallet2 = exports.Wallet = exports.VolumeUpSm = exports.VolumeUp = exports.VolumeOffSm = exports.VolumeOff = exports.VolumeDown = exports.Voice2 = exports.Voice = exports.Visa = exports.Video = exports.Valentine = exports.User3 = exports.User2 = exports.Upload = exports.Unlock = exports.Twitterwithfooter = exports.Twitterhk = exports.TwitterFilled = exports.Twitter = exports.Trash = exports.TimeSquare = exports.TimeCircleMd = exports.TimeCircle = exports.Ticket = exports.TicketStar = exports.TickSquare = exports.TickMd = exports.Tick = exports.ThumbCircleFilled = exports.Tamamlarsin = exports.SwitchPassive = void 0;
|
|
33
|
+
exports.iconList = exports.Youtubewithfooter = exports.Youtubehk = exports.Wphk = exports.UserPlusLg = exports.UserPlus = exports.Tiktok = exports.TextLoading = exports.Subscription = exports.RotateRight = exports.Play = exports.NewYear = exports.More = exports.Live = exports.List = exports.Linkedinwithfooter = exports.Linkedinhk = exports.Konfeti2 = exports.Konfeti = exports.Instagramhk = void 0;
|
|
34
34
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
35
35
|
var Activity_1 = __importDefault(require("./Activity"));
|
|
36
36
|
Object.defineProperty(exports, "Activity", { enumerable: true, get: function () { return Activity_1.default; } });
|
|
@@ -216,6 +216,8 @@ var DownloadMini_1 = __importDefault(require("./DownloadMini"));
|
|
|
216
216
|
Object.defineProperty(exports, "DownloadMini", { enumerable: true, get: function () { return DownloadMini_1.default; } });
|
|
217
217
|
var Drag_1 = __importDefault(require("./Drag"));
|
|
218
218
|
Object.defineProperty(exports, "Drag", { enumerable: true, get: function () { return Drag_1.default; } });
|
|
219
|
+
var DragMini_1 = __importDefault(require("./DragMini"));
|
|
220
|
+
Object.defineProperty(exports, "DragMini", { enumerable: true, get: function () { return DragMini_1.default; } });
|
|
219
221
|
var Dublearrrowrightbig_1 = __importDefault(require("./Dublearrrowrightbig"));
|
|
220
222
|
Object.defineProperty(exports, "Dublearrrowrightbig", { enumerable: true, get: function () { return Dublearrrowrightbig_1.default; } });
|
|
221
223
|
var Edit_1 = __importDefault(require("./Edit"));
|
|
@@ -937,6 +939,10 @@ exports.iconList = {
|
|
|
937
939
|
var props = __rest(_a, []);
|
|
938
940
|
return (0, jsx_runtime_1.jsx)(Drag_1.default, __assign({}, props));
|
|
939
941
|
},
|
|
942
|
+
DragMini: function (_a) {
|
|
943
|
+
var props = __rest(_a, []);
|
|
944
|
+
return (0, jsx_runtime_1.jsx)(DragMini_1.default, __assign({}, props));
|
|
945
|
+
},
|
|
940
946
|
Dublearrrowrightbig: function (_a) {
|
|
941
947
|
var props = __rest(_a, []);
|
|
942
948
|
return (0, jsx_runtime_1.jsx)(Dublearrrowrightbig_1.default, __assign({}, props));
|
|
@@ -10,7 +10,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
10
10
|
exports.DatePickerWrapperStyled = exports.InputStyled = exports.FieldDescription = exports.CharCount = exports.FieldLabel = exports.FieldTopActions = exports.FieldTop = exports.Container = exports.PopupText = exports.FocusTooltip = exports.AlertStyled = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
exports.AlertStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: absolute;\n right: 8px;\n top: -20px;\n height: 28px;\n border-radius: 0.5rem;\n background-color: white;\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 1rem;\n user-select: none;\n pointer-events: none;\n transition: opacity .4s ease;\n opacity: ", ";\n font: var(--caption-medium-10-12);\n"], ["\n position: absolute;\n right: 8px;\n top: -20px;\n height: 28px;\n border-radius: 0.5rem;\n background-color: white;\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 1rem;\n user-select: none;\n pointer-events: none;\n transition: opacity .4s ease;\n opacity: ", ";\n font: var(--caption-medium-10-12);\n"])), function (props) { return props.$visible ? '1' : '0'; });
|
|
13
|
-
exports.FocusTooltip = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: absolute;\n left:
|
|
13
|
+
exports.FocusTooltip = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: absolute;\n left: 41px;\n bottom: calc(100% + 10px);\n max-width: ", ";\n width: max-content;\n padding: 10px;\n border-radius: 0.5rem;\n background-color: var(--primary-opacity-10);\n z-index: 99999;\n box-sizing: border-box;\n user-select: none;\n pointer-events: none;\n transition: all 0.15s ease;\n opacity: ", ";\n font: var(--caption-medium-11-13);\n\n &:before {\n content: '';\n position: absolute;\n left: 12px;\n bottom: -6px;\n transform: rotate(45deg);\n width: 12px;\n height: 12px;\n border-radius: 3px;\n background-color: var(--primary-opacity-10);\n }\n"], ["\n position: absolute;\n left: 41px;\n bottom: calc(100% + 10px);\n max-width: ", ";\n width: max-content;\n padding: 10px;\n border-radius: 0.5rem;\n background-color: var(--primary-opacity-10);\n z-index: 99999;\n box-sizing: border-box;\n user-select: none;\n pointer-events: none;\n transition: all 0.15s ease;\n opacity: ", ";\n font: var(--caption-medium-11-13);\n\n &:before {\n content: '';\n position: absolute;\n left: 12px;\n bottom: -6px;\n transform: rotate(45deg);\n width: 12px;\n height: 12px;\n border-radius: 3px;\n background-color: var(--primary-opacity-10);\n }\n"])), function (props) { return props.$maxWidth || '140px'; }, function (props) { return props.$isOpen ? '1' : '0'; });
|
|
14
14
|
exports.PopupText = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n font: var(--caption-semi-bold-11-13);\n text-align: center;\n white-space: pre-wrap;\n"], ["\n font: var(--caption-semi-bold-11-13);\n text-align: center;\n white-space: pre-wrap;\n"])));
|
|
15
15
|
exports.Container = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: ", ";\n\n .top {\n display: flex;\n margin-bottom: 16px;\n font: var(--caption-bold-12-15);\n\n &.justify-between {\n justify-content: space-between;\n }\n\n label {\n margin: 0;\n color: var(--dark-opacity-50);\n display: block;\n }\n }\n\n .input {\n position: relative;\n\n .inputIcon {\n position: absolute;\n width: 24px;\n height: 24px;\n top: 16px;\n right: 16px;\n cursor: pointer;\n\n &:not(.hasNoBg) {\n &:hover {\n background-color: var(--primary-opacity-5);\n }\n }\n &.hasNoCursor {\n user-select: none;\n pointer-events: none;\n }\n }\n\n .removeIcon {\n position: absolute;\n top: 16px;\n right: 1rem;\n cursor: pointer;\n *{\n display: block;\n }\n }\n }\n\n .error {\n display: flex;\n align-items: center;\n margin-top: 8px;\n color: var(--red);\n\n svg {\n margin-right: 8px;\n }\n\n p {\n margin: 0;\n font: var(--caption-semi-bold-11-13);\n }\n }\n"], ["\n display: flex;\n flex-direction: column;\n width: ", ";\n\n .top {\n display: flex;\n margin-bottom: 16px;\n font: var(--caption-bold-12-15);\n\n &.justify-between {\n justify-content: space-between;\n }\n\n label {\n margin: 0;\n color: var(--dark-opacity-50);\n display: block;\n }\n }\n\n .input {\n position: relative;\n\n .inputIcon {\n position: absolute;\n width: 24px;\n height: 24px;\n top: 16px;\n right: 16px;\n cursor: pointer;\n\n &:not(.hasNoBg) {\n &:hover {\n background-color: var(--primary-opacity-5);\n }\n }\n &.hasNoCursor {\n user-select: none;\n pointer-events: none;\n }\n }\n\n .removeIcon {\n position: absolute;\n top: 16px;\n right: 1rem;\n cursor: pointer;\n *{\n display: block;\n }\n }\n }\n\n .error {\n display: flex;\n align-items: center;\n margin-top: 8px;\n color: var(--red);\n\n svg {\n margin-right: 8px;\n }\n\n p {\n margin: 0;\n font: var(--caption-semi-bold-11-13);\n }\n }\n"])), function (props) { return props.$width || '370px'; });
|
|
16
16
|
exports.FieldTop = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 1rem;\n margin-bottom: 16px;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 1rem;\n margin-bottom: 16px;\n"])));
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { TagProps } from './props';
|
|
3
|
-
declare const Tag: ({ label, onRemove, onClick, hasStar, disabled, className, }: TagProps) => React.JSX.Element;
|
|
3
|
+
declare const Tag: ({ label, onRemove, onClick, hasStar, disabled, hasDragHandle, dragHandleProps, className, }: TagProps) => React.JSX.Element;
|
|
4
4
|
export default Tag;
|
|
@@ -19,7 +19,7 @@ var props_1 = require("./props");
|
|
|
19
19
|
var Tag_styled_1 = require("./Tag.styled");
|
|
20
20
|
var Icon_1 = __importDefault(require("../Icon/Icon"));
|
|
21
21
|
var Tag = function (_a) {
|
|
22
|
-
var label = _a.label, onRemove = _a.onRemove, onClick = _a.onClick, _b = _a.hasStar, hasStar = _b === void 0 ? props_1.TagDefault.hasStar : _b, _c = _a.disabled, disabled = _c === void 0 ? props_1.TagDefault.disabled : _c, className = _a.className;
|
|
22
|
+
var label = _a.label, onRemove = _a.onRemove, onClick = _a.onClick, _b = _a.hasStar, hasStar = _b === void 0 ? props_1.TagDefault.hasStar : _b, _c = _a.disabled, disabled = _c === void 0 ? props_1.TagDefault.disabled : _c, _d = _a.hasDragHandle, hasDragHandle = _d === void 0 ? props_1.TagDefault.hasDragHandle : _d, _e = _a.dragHandleProps, dragHandleProps = _e === void 0 ? props_1.TagDefault.dragHandleProps : _e, className = _a.className;
|
|
23
23
|
var isClickable = Boolean(onClick) && !disabled;
|
|
24
24
|
var handleClick = function () {
|
|
25
25
|
if (!isClickable)
|
|
@@ -30,6 +30,10 @@ var Tag = function (_a) {
|
|
|
30
30
|
event.stopPropagation();
|
|
31
31
|
onRemove === null || onRemove === void 0 ? void 0 : onRemove();
|
|
32
32
|
};
|
|
33
|
-
return ((0, jsx_runtime_1.jsxs)(Tag_styled_1.TagStyled, __assign({ className: className, "$disabled": disabled, "$clickable": isClickable,
|
|
33
|
+
return ((0, jsx_runtime_1.jsxs)(Tag_styled_1.TagStyled, __assign({ className: className, "$disabled": disabled, "$clickable": isClickable, "$hasDragHandle": hasDragHandle, onClick: handleClick }, { children: [hasDragHandle && ((0, jsx_runtime_1.jsx)(Tag_styled_1.TagDragHandle, __assign({ type: "button", "aria-label": "S\u00FCr\u00FCkle", disabled: disabled }, dragHandleProps, { onClick: function (e) {
|
|
34
|
+
var _a;
|
|
35
|
+
e.stopPropagation();
|
|
36
|
+
(_a = dragHandleProps === null || dragHandleProps === void 0 ? void 0 : dragHandleProps.onClick) === null || _a === void 0 ? void 0 : _a.call(dragHandleProps, e);
|
|
37
|
+
} }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "DragMini", width: "16", height: "16" }) }))), hasStar && ((0, jsx_runtime_1.jsx)(Tag_styled_1.TagStar, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Starfull", width: "1rem", height: "1rem", color: "var(--yellowDark)" }) })), (0, jsx_runtime_1.jsx)(Tag_styled_1.TagLabel, { children: label }), onRemove && ((0, jsx_runtime_1.jsx)(Tag_styled_1.TagRemoveButton, __assign({ type: "button", "aria-label": "".concat(label, " etiketini kald\u0131r"), disabled: disabled, onClick: handleRemove }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Closemini", width: "1rem", height: "1rem", color: "currentColor" }) })))] })));
|
|
34
38
|
};
|
|
35
39
|
exports.default = Tag;
|
|
@@ -1,11 +1,14 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
export declare const TagStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$disabled" | "$clickable"> & {
|
|
2
|
+
export declare const TagStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$disabled" | "$clickable" | "$hasDragHandle"> & {
|
|
3
3
|
$disabled?: boolean;
|
|
4
4
|
$clickable?: boolean;
|
|
5
|
-
|
|
5
|
+
$hasDragHandle?: boolean;
|
|
6
|
+
}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$disabled" | "$clickable" | "$hasDragHandle"> & {
|
|
6
7
|
$disabled?: boolean;
|
|
7
8
|
$clickable?: boolean;
|
|
9
|
+
$hasDragHandle?: boolean;
|
|
8
10
|
}, never>>> & string;
|
|
11
|
+
export declare const TagDragHandle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>>> & string;
|
|
9
12
|
export declare const TagStar: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>> & string;
|
|
10
13
|
export declare const TagLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>> & string;
|
|
11
14
|
export declare const TagRemoveButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>>> & string;
|
|
@@ -7,10 +7,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
7
7
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
8
8
|
};
|
|
9
9
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
|
-
exports.TagRemoveButton = exports.TagLabel = exports.TagStar = exports.TagStyled = void 0;
|
|
10
|
+
exports.TagRemoveButton = exports.TagLabel = exports.TagStar = exports.TagDragHandle = exports.TagStyled = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
|
-
exports.TagStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n max-width: 100%;\n padding: 0.5rem 1rem;\n border-radius: 0.25rem;\n border: 1px solid var(--grey-10);\n background-color: var(--dark-opacity-3);\n box-sizing: border-box;\n cursor: ", ";\n"], ["\n display: inline-flex;\n align-items: center;\n max-width: 100%;\n padding: 0.5rem 1rem;\n border-radius: 0.25rem;\n border: 1px solid var(--grey-10);\n background-color: var(--dark-opacity-3);\n box-sizing: border-box;\n cursor: ", ";\n"])), function (props) { return (props.$disabled ? 'not-allowed' : props.$clickable ? 'pointer' : 'default'); });
|
|
13
|
-
exports.
|
|
14
|
-
exports.
|
|
15
|
-
exports.
|
|
16
|
-
var
|
|
12
|
+
exports.TagStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n max-width: 100%;\n padding: 0.5rem 1rem 0.5rem ", ";\n border-radius: 0.25rem;\n border: 1px solid var(--grey-10);\n background-color: var(--dark-opacity-3);\n box-sizing: border-box;\n cursor: ", ";\n"], ["\n display: inline-flex;\n align-items: center;\n max-width: 100%;\n padding: 0.5rem 1rem 0.5rem ", ";\n border-radius: 0.25rem;\n border: 1px solid var(--grey-10);\n background-color: var(--dark-opacity-3);\n box-sizing: border-box;\n cursor: ", ";\n"])), function (props) { return (props.$hasDragHandle ? '0.5rem' : '1rem'); }, function (props) { return (props.$disabled ? 'not-allowed' : props.$clickable ? 'pointer' : 'default'); });
|
|
13
|
+
exports.TagDragHandle = styled_components_1.default.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: 16px;\n height: 16px;\n margin-right: 0.5rem;\n padding: 0;\n box-shadow: 0px 0px 16px 0px var(--dark-opacity-10);\n border-radius: 0.25rem;\n background-color: white;\n cursor: grab;\n color: var(--primary);\n touch-action: none;\n border: none;\n transition: all 0.2s ease-in-out;\n\n &:hover {\n background-color: var(--primary);\n color: white;\n }\n\n &:active {\n cursor: grabbing;\n background-color: var(--primary);\n color: white;\n }\n\n &:disabled {\n cursor: not-allowed;\n box-shadow: none;\n color: var(--dark-opacity-25);\n background-color: var(--dark-opacity-3);\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: 16px;\n height: 16px;\n margin-right: 0.5rem;\n padding: 0;\n box-shadow: 0px 0px 16px 0px var(--dark-opacity-10);\n border-radius: 0.25rem;\n background-color: white;\n cursor: grab;\n color: var(--primary);\n touch-action: none;\n border: none;\n transition: all 0.2s ease-in-out;\n\n &:hover {\n background-color: var(--primary);\n color: white;\n }\n\n &:active {\n cursor: grabbing;\n background-color: var(--primary);\n color: white;\n }\n\n &:disabled {\n cursor: not-allowed;\n box-shadow: none;\n color: var(--dark-opacity-25);\n background-color: var(--dark-opacity-3);\n }\n"])));
|
|
14
|
+
exports.TagStar = styled_components_1.default.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n margin-right: 0.25rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n margin-right: 0.25rem;\n"])));
|
|
15
|
+
exports.TagLabel = styled_components_1.default.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n font: var(--body-semi-bold-13-16);\n color: var(--dark);\n word-break: break-word;\n"], ["\n font: var(--body-semi-bold-13-16);\n color: var(--dark);\n word-break: break-word;\n"])));
|
|
16
|
+
exports.TagRemoveButton = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n border: none;\n background: transparent;\n color: var(--dark);\n cursor: pointer;\n flex-shrink: 0;\n margin-left: 0.5rem;\n &:disabled {\n cursor: not-allowed;\n color: var(--dark-opacity-25);\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n border: none;\n background: transparent;\n color: var(--dark);\n cursor: pointer;\n flex-shrink: 0;\n margin-left: 0.5rem;\n &:disabled {\n cursor: not-allowed;\n color: var(--dark-opacity-25);\n }\n"])));
|
|
17
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,152 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
13
|
+
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
14
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
15
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
|
16
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
17
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
18
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
19
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
20
|
+
});
|
|
21
|
+
};
|
|
22
|
+
var __generator = (this && this.__generator) || function (thisArg, body) {
|
|
23
|
+
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
|
|
24
|
+
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
|
|
25
|
+
function verb(n) { return function (v) { return step([n, v]); }; }
|
|
26
|
+
function step(op) {
|
|
27
|
+
if (f) throw new TypeError("Generator is already executing.");
|
|
28
|
+
while (g && (g = 0, op[0] && (_ = 0)), _) try {
|
|
29
|
+
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
|
|
30
|
+
if (y = 0, t) op = [op[0] & 2, t.value];
|
|
31
|
+
switch (op[0]) {
|
|
32
|
+
case 0: case 1: t = op; break;
|
|
33
|
+
case 4: _.label++; return { value: op[1], done: false };
|
|
34
|
+
case 5: _.label++; y = op[1]; op = [0]; continue;
|
|
35
|
+
case 7: op = _.ops.pop(); _.trys.pop(); continue;
|
|
36
|
+
default:
|
|
37
|
+
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
|
|
38
|
+
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
|
|
39
|
+
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
|
|
40
|
+
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
|
|
41
|
+
if (t[2]) _.ops.pop();
|
|
42
|
+
_.trys.pop(); continue;
|
|
43
|
+
}
|
|
44
|
+
op = body.call(thisArg, _);
|
|
45
|
+
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
|
|
46
|
+
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
|
47
|
+
}
|
|
48
|
+
};
|
|
49
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
50
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
51
|
+
};
|
|
52
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
53
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
54
|
+
var react_1 = require("@testing-library/react");
|
|
55
|
+
var user_event_1 = __importDefault(require("@testing-library/user-event"));
|
|
56
|
+
var Tag_1 = __importDefault(require("./Tag"));
|
|
57
|
+
var renderTag = function (props) {
|
|
58
|
+
if (props === void 0) { props = {}; }
|
|
59
|
+
return (0, react_1.render)((0, jsx_runtime_1.jsx)(Tag_1.default, __assign({ label: "Haftada bir" }, props)));
|
|
60
|
+
};
|
|
61
|
+
describe('Tag', function () {
|
|
62
|
+
it('renders the label as text, not HTML', function () {
|
|
63
|
+
renderTag({ label: '<script>alert(1)</script>' });
|
|
64
|
+
expect(react_1.screen.getByText('<script>alert(1)</script>')).toBeInTheDocument();
|
|
65
|
+
expect(document.querySelector('script')).not.toBeInTheDocument();
|
|
66
|
+
});
|
|
67
|
+
it('calls onClick when the tag is clicked', function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
68
|
+
var onClick;
|
|
69
|
+
return __generator(this, function (_a) {
|
|
70
|
+
switch (_a.label) {
|
|
71
|
+
case 0:
|
|
72
|
+
onClick = jest.fn();
|
|
73
|
+
renderTag({ onClick: onClick });
|
|
74
|
+
return [4 /*yield*/, user_event_1.default.click(react_1.screen.getByText('Haftada bir'))];
|
|
75
|
+
case 1:
|
|
76
|
+
_a.sent();
|
|
77
|
+
expect(onClick).toHaveBeenCalledTimes(1);
|
|
78
|
+
return [2 /*return*/];
|
|
79
|
+
}
|
|
80
|
+
});
|
|
81
|
+
}); });
|
|
82
|
+
it('calls onRemove without triggering onClick', function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
83
|
+
var onClick, onRemove;
|
|
84
|
+
return __generator(this, function (_a) {
|
|
85
|
+
switch (_a.label) {
|
|
86
|
+
case 0:
|
|
87
|
+
onClick = jest.fn();
|
|
88
|
+
onRemove = jest.fn();
|
|
89
|
+
renderTag({ onClick: onClick, onRemove: onRemove });
|
|
90
|
+
return [4 /*yield*/, user_event_1.default.click(react_1.screen.getByRole('button', { name: 'Haftada bir etiketini kaldır' }))];
|
|
91
|
+
case 1:
|
|
92
|
+
_a.sent();
|
|
93
|
+
expect(onRemove).toHaveBeenCalledTimes(1);
|
|
94
|
+
expect(onClick).not.toHaveBeenCalled();
|
|
95
|
+
return [2 /*return*/];
|
|
96
|
+
}
|
|
97
|
+
});
|
|
98
|
+
}); });
|
|
99
|
+
it('does not call onClick when disabled', function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
100
|
+
var onClick;
|
|
101
|
+
return __generator(this, function (_a) {
|
|
102
|
+
switch (_a.label) {
|
|
103
|
+
case 0:
|
|
104
|
+
onClick = jest.fn();
|
|
105
|
+
renderTag({ onClick: onClick, disabled: true });
|
|
106
|
+
return [4 /*yield*/, user_event_1.default.click(react_1.screen.getByText('Haftada bir'))];
|
|
107
|
+
case 1:
|
|
108
|
+
_a.sent();
|
|
109
|
+
expect(onClick).not.toHaveBeenCalled();
|
|
110
|
+
return [2 /*return*/];
|
|
111
|
+
}
|
|
112
|
+
});
|
|
113
|
+
}); });
|
|
114
|
+
it('hides the drag handle by default', function () {
|
|
115
|
+
renderTag();
|
|
116
|
+
expect(react_1.screen.queryByRole('button', { name: 'Sürükle' })).not.toBeInTheDocument();
|
|
117
|
+
});
|
|
118
|
+
it('renders a 16px drag handle and forwards consumer props', function () {
|
|
119
|
+
renderTag({
|
|
120
|
+
hasDragHandle: true,
|
|
121
|
+
dragHandleProps: { 'aria-roledescription': 'sortable' },
|
|
122
|
+
});
|
|
123
|
+
var handle = react_1.screen.getByRole('button', { name: 'Sürükle' });
|
|
124
|
+
expect(handle).toHaveStyle({ width: '16px', height: '16px' });
|
|
125
|
+
expect(handle).toHaveAttribute('aria-roledescription', 'sortable');
|
|
126
|
+
});
|
|
127
|
+
it('does not call onClick when the drag handle is clicked', function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
128
|
+
var onClick, onHandleClick;
|
|
129
|
+
return __generator(this, function (_a) {
|
|
130
|
+
switch (_a.label) {
|
|
131
|
+
case 0:
|
|
132
|
+
onClick = jest.fn();
|
|
133
|
+
onHandleClick = jest.fn();
|
|
134
|
+
renderTag({
|
|
135
|
+
onClick: onClick,
|
|
136
|
+
hasDragHandle: true,
|
|
137
|
+
dragHandleProps: { onClick: onHandleClick },
|
|
138
|
+
});
|
|
139
|
+
return [4 /*yield*/, user_event_1.default.click(react_1.screen.getByRole('button', { name: 'Sürükle' }))];
|
|
140
|
+
case 1:
|
|
141
|
+
_a.sent();
|
|
142
|
+
expect(onHandleClick).toHaveBeenCalledTimes(1);
|
|
143
|
+
expect(onClick).not.toHaveBeenCalled();
|
|
144
|
+
return [2 /*return*/];
|
|
145
|
+
}
|
|
146
|
+
});
|
|
147
|
+
}); });
|
|
148
|
+
it('disables the drag handle when the tag is disabled', function () {
|
|
149
|
+
renderTag({ hasDragHandle: true, disabled: true });
|
|
150
|
+
expect(react_1.screen.getByRole('button', { name: 'Sürükle' })).toBeDisabled();
|
|
151
|
+
});
|
|
152
|
+
});
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import React from 'react';
|
|
1
2
|
export interface TagProps {
|
|
2
3
|
label: string;
|
|
3
4
|
onRemove?: () => void;
|
|
@@ -5,9 +6,15 @@ export interface TagProps {
|
|
|
5
6
|
hasStar?: boolean;
|
|
6
7
|
disabled?: boolean;
|
|
7
8
|
className?: string;
|
|
9
|
+
/** true ise solda sürükle tutamacı gösterilir */
|
|
10
|
+
hasDragHandle?: boolean;
|
|
11
|
+
/** Tutamaca dnd-kit listener/attribute geçirmek için */
|
|
12
|
+
dragHandleProps?: React.HTMLAttributes<HTMLButtonElement>;
|
|
8
13
|
}
|
|
9
14
|
export declare const TagDefault: {
|
|
10
15
|
hasStar: boolean;
|
|
11
16
|
disabled: boolean;
|
|
17
|
+
hasDragHandle: boolean;
|
|
18
|
+
dragHandleProps: React.HTMLAttributes<HTMLButtonElement>;
|
|
12
19
|
};
|
|
13
20
|
export type TagComponentProps = TagProps;
|
|
@@ -13,12 +13,18 @@ declare const _default: {
|
|
|
13
13
|
disabled: {
|
|
14
14
|
control: string;
|
|
15
15
|
};
|
|
16
|
+
hasDragHandle: {
|
|
17
|
+
control: string;
|
|
18
|
+
};
|
|
16
19
|
onRemove: {
|
|
17
20
|
control: boolean;
|
|
18
21
|
};
|
|
19
22
|
onClick: {
|
|
20
23
|
control: boolean;
|
|
21
24
|
};
|
|
25
|
+
dragHandleProps: {
|
|
26
|
+
control: boolean;
|
|
27
|
+
};
|
|
22
28
|
};
|
|
23
29
|
};
|
|
24
30
|
export default _default;
|
|
@@ -27,6 +33,7 @@ export declare const Default: {
|
|
|
27
33
|
label: string;
|
|
28
34
|
hasStar: boolean;
|
|
29
35
|
disabled: boolean;
|
|
36
|
+
hasDragHandle: boolean;
|
|
30
37
|
};
|
|
31
38
|
};
|
|
32
39
|
export declare const Removable: {
|
|
@@ -35,6 +42,7 @@ export declare const Removable: {
|
|
|
35
42
|
onRemove: () => void;
|
|
36
43
|
hasStar: boolean;
|
|
37
44
|
disabled: boolean;
|
|
45
|
+
hasDragHandle: boolean;
|
|
38
46
|
};
|
|
39
47
|
};
|
|
40
48
|
export declare const WithStar: {
|
|
@@ -43,6 +51,7 @@ export declare const WithStar: {
|
|
|
43
51
|
hasStar: boolean;
|
|
44
52
|
onRemove: () => void;
|
|
45
53
|
disabled: boolean;
|
|
54
|
+
hasDragHandle: boolean;
|
|
46
55
|
};
|
|
47
56
|
};
|
|
48
57
|
export declare const StarOnly: {
|
|
@@ -50,6 +59,7 @@ export declare const StarOnly: {
|
|
|
50
59
|
label: string;
|
|
51
60
|
hasStar: boolean;
|
|
52
61
|
disabled: boolean;
|
|
62
|
+
hasDragHandle: boolean;
|
|
53
63
|
};
|
|
54
64
|
};
|
|
55
65
|
export declare const Clickable: {
|
|
@@ -58,6 +68,7 @@ export declare const Clickable: {
|
|
|
58
68
|
onClick: () => void;
|
|
59
69
|
hasStar: boolean;
|
|
60
70
|
disabled: boolean;
|
|
71
|
+
hasDragHandle: boolean;
|
|
61
72
|
};
|
|
62
73
|
};
|
|
63
74
|
export declare const ClickableRemovable: {
|
|
@@ -67,6 +78,7 @@ export declare const ClickableRemovable: {
|
|
|
67
78
|
onRemove: () => void;
|
|
68
79
|
hasStar: boolean;
|
|
69
80
|
disabled: boolean;
|
|
81
|
+
hasDragHandle: boolean;
|
|
70
82
|
};
|
|
71
83
|
};
|
|
72
84
|
export declare const Disabled: {
|
|
@@ -75,6 +87,7 @@ export declare const Disabled: {
|
|
|
75
87
|
disabled: boolean;
|
|
76
88
|
onRemove: () => void;
|
|
77
89
|
hasStar: boolean;
|
|
90
|
+
hasDragHandle: boolean;
|
|
78
91
|
};
|
|
79
92
|
};
|
|
80
93
|
export declare const DisabledWithStar: {
|
|
@@ -83,6 +96,7 @@ export declare const DisabledWithStar: {
|
|
|
83
96
|
hasStar: boolean;
|
|
84
97
|
disabled: boolean;
|
|
85
98
|
onRemove: () => void;
|
|
99
|
+
hasDragHandle: boolean;
|
|
86
100
|
};
|
|
87
101
|
};
|
|
88
102
|
export declare const LongLabel: {
|
|
@@ -91,6 +105,7 @@ export declare const LongLabel: {
|
|
|
91
105
|
onRemove: () => void;
|
|
92
106
|
hasStar: boolean;
|
|
93
107
|
disabled: boolean;
|
|
108
|
+
hasDragHandle: boolean;
|
|
94
109
|
};
|
|
95
110
|
};
|
|
96
111
|
export declare const TagList: {
|
|
@@ -100,10 +115,24 @@ export declare const ToggleStarOnClick: {
|
|
|
100
115
|
name: string;
|
|
101
116
|
render: () => React.JSX.Element;
|
|
102
117
|
};
|
|
118
|
+
export declare const WithDragHandle: {
|
|
119
|
+
args: {
|
|
120
|
+
label: string;
|
|
121
|
+
hasDragHandle: boolean;
|
|
122
|
+
onRemove: () => void;
|
|
123
|
+
hasStar: boolean;
|
|
124
|
+
disabled: boolean;
|
|
125
|
+
};
|
|
126
|
+
};
|
|
127
|
+
export declare const SortableList: {
|
|
128
|
+
name: string;
|
|
129
|
+
render: () => React.JSX.Element;
|
|
130
|
+
};
|
|
103
131
|
export declare const Complete: {
|
|
104
132
|
args: {
|
|
105
133
|
label: string;
|
|
106
134
|
hasStar: boolean;
|
|
135
|
+
hasDragHandle: boolean;
|
|
107
136
|
onClick: () => void;
|
|
108
137
|
onRemove: () => void;
|
|
109
138
|
disabled: boolean;
|
|
@@ -14,14 +14,19 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
14
14
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
15
15
|
};
|
|
16
16
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
-
exports.Complete = exports.ToggleStarOnClick = exports.TagList = exports.LongLabel = exports.DisabledWithStar = exports.Disabled = exports.ClickableRemovable = exports.Clickable = exports.StarOnly = exports.WithStar = exports.Removable = exports.Default = void 0;
|
|
17
|
+
exports.Complete = exports.SortableList = exports.WithDragHandle = exports.ToggleStarOnClick = exports.TagList = exports.LongLabel = exports.DisabledWithStar = exports.Disabled = exports.ClickableRemovable = exports.Clickable = exports.StarOnly = exports.WithStar = exports.Removable = exports.Default = void 0;
|
|
18
18
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
19
19
|
var react_1 = require("react");
|
|
20
|
+
var core_1 = require("@dnd-kit/core");
|
|
21
|
+
var modifiers_1 = require("@dnd-kit/modifiers");
|
|
22
|
+
var sortable_1 = require("@dnd-kit/sortable");
|
|
23
|
+
var utilities_1 = require("@dnd-kit/utilities");
|
|
20
24
|
var Tag_1 = __importDefault(require("../Tag"));
|
|
21
25
|
var baseArgs = {
|
|
22
26
|
label: "250 Gr",
|
|
23
27
|
hasStar: false,
|
|
24
28
|
disabled: false,
|
|
29
|
+
hasDragHandle: false,
|
|
25
30
|
};
|
|
26
31
|
exports.default = {
|
|
27
32
|
title: "Components/Tag",
|
|
@@ -31,8 +36,10 @@ exports.default = {
|
|
|
31
36
|
label: { control: "text" },
|
|
32
37
|
hasStar: { control: "boolean" },
|
|
33
38
|
disabled: { control: "boolean" },
|
|
39
|
+
hasDragHandle: { control: "boolean" },
|
|
34
40
|
onRemove: { control: false },
|
|
35
41
|
onClick: { control: false },
|
|
42
|
+
dragHandleProps: { control: false },
|
|
36
43
|
},
|
|
37
44
|
};
|
|
38
45
|
exports.Default = {
|
|
@@ -82,6 +89,34 @@ exports.ToggleStarOnClick = {
|
|
|
82
89
|
name: "Tıklayınca yıldız aç/kapa",
|
|
83
90
|
render: function () { return (0, jsx_runtime_1.jsx)(ToggleableStarStory, {}); },
|
|
84
91
|
};
|
|
92
|
+
var SortableTagItem = function (_a) {
|
|
93
|
+
var id = _a.id, label = _a.label, onRemove = _a.onRemove;
|
|
94
|
+
var _b = (0, sortable_1.useSortable)({ id: id }), attributes = _b.attributes, listeners = _b.listeners, setNodeRef = _b.setNodeRef, transform = _b.transform, transition = _b.transition, isDragging = _b.isDragging;
|
|
95
|
+
return ((0, jsx_runtime_1.jsx)("div", __assign({ ref: setNodeRef, style: {
|
|
96
|
+
transform: utilities_1.CSS.Transform.toString(transform),
|
|
97
|
+
transition: transition,
|
|
98
|
+
opacity: isDragging ? 0.6 : 1,
|
|
99
|
+
zIndex: isDragging ? 2 : undefined,
|
|
100
|
+
} }, { children: (0, jsx_runtime_1.jsx)(Tag_1.default, { label: label, hasDragHandle: true, dragHandleProps: __assign(__assign({}, attributes), listeners), onRemove: onRemove }) })));
|
|
101
|
+
};
|
|
102
|
+
var SortableTagListStory = function () {
|
|
103
|
+
var _a = (0, react_1.useState)(["Haftada bir", "İki haftada bir", "Ayda bir", "Üç ayda bir"]), tags = _a[0], setTags = _a[1];
|
|
104
|
+
var sensors = (0, core_1.useSensors)((0, core_1.useSensor)(core_1.PointerSensor, { activationConstraint: { distance: 5 } }), (0, core_1.useSensor)(core_1.KeyboardSensor, { coordinateGetter: sortable_1.sortableKeyboardCoordinates }));
|
|
105
|
+
var handleDragEnd = function (_a) {
|
|
106
|
+
var active = _a.active, over = _a.over;
|
|
107
|
+
if (!over || active.id === over.id)
|
|
108
|
+
return;
|
|
109
|
+
setTags(function (list) { return (0, sortable_1.arrayMove)(list, list.indexOf(String(active.id)), list.indexOf(String(over.id))); });
|
|
110
|
+
};
|
|
111
|
+
return ((0, jsx_runtime_1.jsx)(core_1.DndContext, __assign({ sensors: sensors, collisionDetection: core_1.closestCenter, modifiers: [modifiers_1.restrictToHorizontalAxis, modifiers_1.restrictToParentElement], onDragEnd: handleDragEnd }, { children: (0, jsx_runtime_1.jsx)(sortable_1.SortableContext, __assign({ items: tags, strategy: sortable_1.horizontalListSortingStrategy }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: { display: "flex", gap: "0.75rem", flexWrap: "wrap" } }, { children: tags.map(function (label) { return ((0, jsx_runtime_1.jsx)(SortableTagItem, { id: label, label: label, onRemove: function () { return setTags(function (list) { return list.filter(function (item) { return item !== label; }); }); } }, label)); }) })) })) })));
|
|
112
|
+
};
|
|
113
|
+
exports.WithDragHandle = {
|
|
114
|
+
args: __assign(__assign({}, baseArgs), { label: "İki haftada bir", hasDragHandle: true, onRemove: function () { return console.log("remove"); } }),
|
|
115
|
+
};
|
|
116
|
+
exports.SortableList = {
|
|
117
|
+
name: "Sıralanabilir liste (tüketici örneği)",
|
|
118
|
+
render: function () { return (0, jsx_runtime_1.jsx)(SortableTagListStory, {}); },
|
|
119
|
+
};
|
|
85
120
|
exports.Complete = {
|
|
86
|
-
args: __assign(__assign({}, baseArgs), { label: "Komple tag", hasStar: true, onClick: function () { return console.log("click"); }, onRemove: function () { return console.log("remove"); } }),
|
|
121
|
+
args: __assign(__assign({}, baseArgs), { label: "Komple tag", hasStar: true, hasDragHandle: true, onClick: function () { return console.log("click"); }, onRemove: function () { return console.log("remove"); } }),
|
|
87
122
|
};
|