@bit.rhplus/ui.f7.detail-item 0.0.4 → 0.0.5

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 export default DetailItem;
 export { Link } from "framework7-react";
-declare function DetailItem({ title, subtitle, footer, input, children, className, style, value, onChange, disabled, ...restProps }: {
+declare function DetailItem({ title, subtitle, footer, input, children, className, style, showValidationIcon, value, onChange, disabled, ...restProps }: {
     [x: string]: any;
     title: any;
     subtitle: any;
@@ -9,6 +9,7 @@ declare function DetailItem({ title, subtitle, footer, input, children, classNam
     children: any;
     className?: string | undefined;
     style: any;
+    showValidationIcon?: boolean | undefined;
     value: any;
     onChange: any;
     disabled: any;

package/dist/index.js

@@ -1,12 +1,24 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable */
 import React from 'react';
+import { Form } from '@bit.rhplus/ui.form';
+import { CircleAlert } from 'lucide-react';
 import ListItem from '@bit.rhplus/ui.f7.list-item';
 import './style.css';
-// Základní DetailItem komponenta s podporou Ant Design Form props
-const DetailItem = ({ title, subtitle, footer, input, children, className = '', style, 
+// Základní DetailItem komponenta s podporou Ant Design Form props a validační ikony
+const DetailItem = ({ title, subtitle, footer, input, children, className = '', style, showValidationIcon = false, // Nový prop pro aktivaci validační ikony
 // Ant Design Form props pro předání input komponentě
 value, onChange, disabled, ...restProps }) => {
+    // Získání validačního stavu pomocí useStatus hook
+    let hasValidationError = false;
+    try {
+        const formStatus = Form.Item?.useStatus?.();
+        hasValidationError = showValidationIcon && formStatus?.status === 'error';
+    }
+    catch (error) {
+        // useStatus může být nedostupný mimo Form.Item kontext
+        hasValidationError = false;
+    }
     // Použij buď input prop nebo children
     const content = input || children;
     // Předej Form.Item props do children bez cloneElement
@@ -20,7 +32,7 @@ value, onChange, disabled, ...restProps }) => {
             ...restProps,
         })
         : content;
-    return (_jsx(ListItem, { title: title, subtitle: subtitle, footer: footer, className: `detail-item no-ripple no-fastclick ${className}`, style: { ...style, pointerEvents: 'none' }, noChevron: true, link: false, after: enhancedContent && (_jsx("div", { className: "item-after", style: { pointerEvents: 'auto' }, children: enhancedContent })) }));
+    return (_jsx(ListItem, { title: title, subtitle: subtitle, footer: footer, className: `detail-item no-ripple no-fastclick ${className} ${hasValidationError ? 'has-validation-error' : ''}`, style: { ...style, pointerEvents: 'none' }, noChevron: true, link: false, after: enhancedContent && (_jsxs("div", { className: "item-after", style: { pointerEvents: 'auto', display: 'flex', alignItems: 'center', gap: '8px' }, children: [hasValidationError && (_jsx("div", { className: "validation-icon", children: _jsx(CircleAlert, { size: 18, color: "#DC2626" }) })), enhancedContent] })) }));
 };
 // Export všech komponent
 export default DetailItem;

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.jsx"],"names":[],"mappings":";AAAA,oBAAoB;AACpB,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,QAAQ,MAAM,6BAA6B,CAAC;AACnD,OAAO,aAAa,CAAC;AAErB,kEAAkE;AAClE,MAAM,UAAU,GAAG,CAAC,EAClB,KAAK,EACL,QAAQ,EACR,MAAM,EACN,KAAK,EACL,QAAQ,EACR,SAAS,GAAG,EAAE,EACd,KAAK;AACL,qDAAqD;AACrD,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,GAAG,SAAS,EACb,EAAE,EAAE;IACH,sCAAsC;IACtC,MAAM,OAAO,GAAG,KAAK,IAAI,QAAQ,CAAC;IAElC,sDAAsD;IACtD,MAAM,eAAe,GACnB,OAAO,IAAI,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC;QACtC,CAAC,CAAC,KAAK,CAAC,aAAa,CAAC,OAAO,CAAC,IAAI,EAAE;YAChC,GAAG,OAAO,CAAC,KAAK;YAChB,yBAAyB;YACzB,GAAG,CAAC,KAAK,KAAK,SAAS,IAAI,EAAE,KAAK,EAAE,CAAC;YACrC,GAAG,CAAC,QAAQ,IAAI,EAAE,QAAQ,EAAE,CAAC;YAC7B,GAAG,CAAC,QAAQ,KAAK,SAAS,IAAI,EAAE,QAAQ,EAAE,CAAC;YAC3C,GAAG,SAAS;SACb,CAAC;QACJ,CAAC,CAAC,OAAO,CAAC;IAEd,OAAO,CACL,KAAC,QAAQ,IACP,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,sCAAsC,SAAS,EAAE,EAC5D,KAAK,EAAE,EAAE,GAAG,KAAK,EAAE,aAAa,EAAE,MAAM,EAAE,EAC1C,SAAS,EAAE,IAAI,EACf,IAAI,EAAE,KAAK,EACX,KAAK,EACH,eAAe,IAAI,CACjB,cAAK,SAAS,EAAC,YAAY,EAAC,KAAK,EAAE,EAAE,aAAa,EAAE,MAAM,EAAE,YACzD,eAAe,GACZ,CACP,GAEH,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,yBAAyB;AACzB,eAAe,UAAU,CAAC;AAC1B,OAAO,EACL,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,WAAW,EACX,MAAM,EACN,MAAM,EACN,QAAQ,EACR,MAAM,EACN,IAAI,EACJ,OAAO,EACP,IAAI,EACJ,WAAW,EACZ,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.jsx"],"names":[],"mappings":";AAAA,oBAAoB;AACpB,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,QAAQ,MAAM,6BAA6B,CAAC;AACnD,OAAO,aAAa,CAAC;AAErB,oFAAoF;AACpF,MAAM,UAAU,GAAG,CAAC,EAClB,KAAK,EACL,QAAQ,EACR,MAAM,EACN,KAAK,EACL,QAAQ,EACR,SAAS,GAAG,EAAE,EACd,KAAK,EACL,kBAAkB,GAAG,KAAK,EAAE,yCAAyC;AACrE,qDAAqD;AACrD,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,GAAG,SAAS,EACb,EAAE,EAAE;IACH,kDAAkD;IAClD,IAAI,kBAAkB,GAAG,KAAK,CAAC;IAC/B,IAAI,CAAC;QACH,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,EAAE,SAAS,EAAE,EAAE,CAAC;QAC5C,kBAAkB,GAAG,kBAAkB,IAAI,UAAU,EAAE,MAAM,KAAK,OAAO,CAAC;IAC5E,CAAC;IAAC,OAAO,KAAK,EAAE,CAAC;QACf,uDAAuD;QACvD,kBAAkB,GAAG,KAAK,CAAC;IAC7B,CAAC;IAED,sCAAsC;IACtC,MAAM,OAAO,GAAG,KAAK,IAAI,QAAQ,CAAC;IAElC,sDAAsD;IACtD,MAAM,eAAe,GACnB,OAAO,IAAI,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC;QACtC,CAAC,CAAC,KAAK,CAAC,aAAa,CAAC,OAAO,CAAC,IAAI,EAAE;YAChC,GAAG,OAAO,CAAC,KAAK;YAChB,yBAAyB;YACzB,GAAG,CAAC,KAAK,KAAK,SAAS,IAAI,EAAE,KAAK,EAAE,CAAC;YACrC,GAAG,CAAC,QAAQ,IAAI,EAAE,QAAQ,EAAE,CAAC;YAC7B,GAAG,CAAC,QAAQ,KAAK,SAAS,IAAI,EAAE,QAAQ,EAAE,CAAC;YAC3C,GAAG,SAAS;SACb,CAAC;QACJ,CAAC,CAAC,OAAO,CAAC;IAEd,OAAO,CACL,KAAC,QAAQ,IACP,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,sCAAsC,SAAS,IAAI,kBAAkB,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,EAAE,EAAE,EAChH,KAAK,EAAE,EAAE,GAAG,KAAK,EAAE,aAAa,EAAE,MAAM,EAAE,EAC1C,SAAS,EAAE,IAAI,EACf,IAAI,EAAE,KAAK,EACX,KAAK,EACH,eAAe,IAAI,CACjB,eAAK,SAAS,EAAC,YAAY,EAAC,KAAK,EAAE,EAAE,aAAa,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,KAAK,EAAE,aAC5G,kBAAkB,IAAI,CACrB,cAAK,SAAS,EAAC,iBAAiB,YAC9B,KAAC,WAAW,IAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAC,SAAS,GAAG,GACrC,CACP,EACA,eAAe,IACZ,CACP,GAEH,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,yBAAyB;AACzB,eAAe,UAAU,CAAC;AAC1B,OAAO,EACL,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,WAAW,EACX,MAAM,EACN,MAAM,EACN,QAAQ,EACR,MAAM,EACN,IAAI,EACJ,OAAO,EACP,IAAI,EACJ,WAAW,EACZ,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/style.css

@@ -59,4 +59,55 @@
 /* Content animation */
 .f7-parallax .page-content {
   animation: slideUpFadeIn 0.5s ease-out 0.1s both;
+}
+
+/* Validační ikona styly */
+.validation-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: validationPulse 0.3s ease-out;
+  flex-shrink: 0;
+}
+
+.validation-icon svg {
+  color: #DC2626 !important; /* Červená barva ikony */
+}
+
+/* Animace pro smooth zobrazení validační ikony */
+@keyframes validationPulse {
+  0% {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+  50% {
+    transform: scale(1.1);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* Dodatečné styly pro DetailItem s chybou */
+.detail-item.has-validation-error {
+  border-left: 3px solid #DC2626;
+  background-color: #FEFEFE;
+}
+
+.detail-item.has-validation-error .item-title {
+  color: #DC2626;
+  font-weight: 600;
+}
+
+/* Skrytí validačních chyb pro DetailItem s validační ikonou */
+.detail-item.has-validation-error + .ant-form-item-explain,
+.detail-item.has-validation-error + .ant-form-item-extra {
+  display: none !important;
+}
+
+/* Alternativní způsob - skrytí přes parent Form.Item */
+.ant-form-item:has(.detail-item.has-validation-error) .ant-form-item-explain,
+.ant-form-item:has(.detail-item.has-validation-error) .ant-form-item-extra {
+  display: none !important;
 }

package/index.jsx

@@ -1,9 +1,11 @@
 /* eslint-disable */
 import React from 'react';
+import { Form } from '@bit.rhplus/ui.form';
+import { CircleAlert } from 'lucide-react';
 import ListItem from '@bit.rhplus/ui.f7.list-item';
 import './style.css';
 
-// Základní DetailItem komponenta s podporou Ant Design Form props
+// Základní DetailItem komponenta s podporou Ant Design Form props a validační ikony
 const DetailItem = ({
   title,
   subtitle,
@@ -12,12 +14,23 @@ const DetailItem = ({
   children,
   className = '',
   style,
+  showValidationIcon = false, // Nový prop pro aktivaci validační ikony
   // Ant Design Form props pro předání input komponentě
   value,
   onChange,
   disabled,
   ...restProps
 }) => {
+  // Získání validačního stavu pomocí useStatus hook
+  let hasValidationError = false;
+  try {
+    const formStatus = Form.Item?.useStatus?.();
+    hasValidationError = showValidationIcon && formStatus?.status === 'error';
+  } catch (error) {
+    // useStatus může být nedostupný mimo Form.Item kontext
+    hasValidationError = false;
+  }
+
   // Použij buď input prop nebo children
   const content = input || children;
 
@@ -39,13 +52,18 @@ const DetailItem = ({
       title={title}
       subtitle={subtitle}
       footer={footer}
-      className={`detail-item no-ripple no-fastclick ${className}`}
+      className={`detail-item no-ripple no-fastclick ${className} ${hasValidationError ? 'has-validation-error' : ''}`}
       style={{ ...style, pointerEvents: 'none' }}
       noChevron={true}
       link={false}
       after={
         enhancedContent && (
-          <div className="item-after" style={{ pointerEvents: 'auto' }}>
+          <div className="item-after" style={{ pointerEvents: 'auto', display: 'flex', alignItems: 'center', gap: '8px' }}>
+            {hasValidationError && (
+              <div className="validation-icon">
+                <CircleAlert size={18} color="#DC2626" />
+              </div>
+            )}
             {enhancedContent}
           </div>
         )

package/package.json

@@ -1,18 +1,19 @@
 {
   "name": "@bit.rhplus/ui.f7.detail-item",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "homepage": "https://bit.cloud/remote-scope/ui/f7/detail-item",
   "main": "dist/index.js",
   "componentId": {
     "scope": "remote-scope",
     "name": "ui/f7/detail-item",
-    "version": "0.0.4"
+    "version": "0.0.5"
   },
   "dependencies": {
     "lucide-react": "^0.503.0",
     "@bit.rhplus/ui.f7.list-item": "0.0.7",
+    "@bit.rhplus/ui.form": "0.1.8",
     "@bit.rhplus/ui.circle-button": "0.0.9",
-    "@bit.rhplus/ui.f7.save-button": "0.0.2",
+    "@bit.rhplus/ui.f7.save-button": "0.0.3",
     "@bit.rhplus/ui.grid": "0.0.42"
   },
   "devDependencies": {

package/style.css

@@ -59,4 +59,55 @@
 /* Content animation */
 .f7-parallax .page-content {
   animation: slideUpFadeIn 0.5s ease-out 0.1s both;
+}
+
+/* Validační ikona styly */
+.validation-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: validationPulse 0.3s ease-out;
+  flex-shrink: 0;
+}
+
+.validation-icon svg {
+  color: #DC2626 !important; /* Červená barva ikony */
+}
+
+/* Animace pro smooth zobrazení validační ikony */
+@keyframes validationPulse {
+  0% {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+  50% {
+    transform: scale(1.1);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* Dodatečné styly pro DetailItem s chybou */
+.detail-item.has-validation-error {
+  border-left: 3px solid #DC2626;
+  background-color: #FEFEFE;
+}
+
+.detail-item.has-validation-error .item-title {
+  color: #DC2626;
+  font-weight: 600;
+}
+
+/* Skrytí validačních chyb pro DetailItem s validační ikonou */
+.detail-item.has-validation-error + .ant-form-item-explain,
+.detail-item.has-validation-error + .ant-form-item-extra {
+  display: none !important;
+}
+
+/* Alternativní způsob - skrytí přes parent Form.Item */
+.ant-form-item:has(.detail-item.has-validation-error) .ant-form-item-explain,
+.ant-form-item:has(.detail-item.has-validation-error) .ant-form-item-extra {
+  display: none !important;
 }