update

2025-06-30 10:53:22 +00:00
parent 9a9aea56da
commit 60a811fd18
7 changed files with 1318 additions and 430 deletions
--- a/readme.md
+++ b/readme.md
@ -1,5 +1,5 @@
 # @design.estate/dees-catalog
-An extensive library for building modern web applications with dynamic components using Web Components, JavaScript, and TypeScript.
+A comprehensive web components library built with TypeScript and LitElement, providing 75+ UI components for building modern web applications with consistent design and behavior.

 ## Install
 To install the `@design.estate/dees-catalog` library, you can use npm or any other compatible JavaScript package manager:
@ -12,15 +12,16 @@ npm install @design.estate/dees-catalog

 | Category | Components |
 |----------|------------|
-| Core UI | `DeesButton`, `DeesButtonExit`, `DeesButtonGroup`, `DeesBadge`, `DeesChips`, `DeesHeading`, `DeesHint`, `DeesIcon`, `DeesLabel`, `DeesPanel`, `DeesSearchbar`, `DeesSpinner`, `DeesToast`, `DeesWindowcontrols` |
-| Forms | `DeesForm`, `DeesInputText`, `DeesInputCheckbox`, `DeesInputDropdown`, `DeesInputRadiogroup`, `DeesInputFileupload`, `DeesInputIban`, `DeesInputPhone`, `DeesInputQuantitySelector`, `DeesInputMultitoggle`, `DeesInputTags`, `DeesInputTypelist`, `DeesInputRichtext`, `DeesInputWysiwyg`, `DeesFormSubmit` |
-| Layout | `DeesAppuiBase`, `DeesAppuiMainmenu`, `DeesAppuiMainselector`, `DeesAppuiMaincontent`, `DeesAppuiAppbar`, `DeesAppuiActivitylog`, `DeesAppuiProfiledropdown`, `DeesAppuiTabs`, `DeesAppuiView`, `DeesMobileNavigation` |
-| Data Display | `DeesTable`, `DeesDataviewCodebox`, `DeesDataviewStatusobject`, `DeesPdf`, `DeesStatsGrid`, `DeesPagination` |
-| Visualization | `DeesChartArea`, `DeesChartLog` |
-| Dialogs & Overlays | `DeesModal`, `DeesContextmenu`, `DeesSpeechbubble`, `DeesWindowlayer` |
-| Navigation | `DeesStepper`, `DeesProgressbar`, `DeesMobileNavigation` |
-| Development | `DeesEditor`, `DeesEditorMarkdown`, `DeesEditorMarkdownoutlet`, `DeesTerminal`, `DeesUpdater` |
-| Auth & Utilities | `DeesSimpleAppdash`, `DeesSimpleLogin` |
+| Core UI | [`DeesButton`](#deesbutton), [`DeesButtonExit`](#deesbuttonexit), [`DeesButtonGroup`](#deesbuttongroup), [`DeesBadge`](#deesbadge), [`DeesChips`](#deeschips), [`DeesHeading`](#deesheading), [`DeesHint`](#deeshint), [`DeesIcon`](#deesicon), [`DeesLabel`](#deeslabel), [`DeesPanel`](#deespanel), [`DeesSearchbar`](#deessearchbar), [`DeesSpinner`](#deesspinner), [`DeesToast`](#deestoast), [`DeesWindowcontrols`](#deeswindowcontrols) |
+| Forms | [`DeesForm`](#deesform), [`DeesInputText`](#deesinputtext), [`DeesInputCheckbox`](#deesinputcheckbox), [`DeesInputDropdown`](#deesinputdropdown), [`DeesInputRadiogroup`](#deesinputradiogroup), [`DeesInputFileupload`](#deesinputfileupload), [`DeesInputIban`](#deesinputiban), [`DeesInputPhone`](#deesinputphone), [`DeesInputQuantitySelector`](#deesinputquantityselector), [`DeesInputMultitoggle`](#deesinputmultitoggle), [`DeesInputTags`](#deesinputtags), [`DeesInputTypelist`](#deesinputtypelist), [`DeesInputRichtext`](#deesinputrichtext), [`DeesInputWysiwyg`](#deesinputwysiwyg), [`DeesInputDatepicker`](#deesinputdatepicker), [`DeesInputSearchselect`](#deesinputsearchselect), [`DeesFormSubmit`](#deesformsubmit) |
+| Layout | [`DeesAppuiBase`](#deesappuibase), [`DeesAppuiMainmenu`](#deesappuimainmenu), [`DeesAppuiMainselector`](#deesappuimainselector), [`DeesAppuiMaincontent`](#deesappuimaincontent), [`DeesAppuiAppbar`](#deesappuiappbar), [`DeesAppuiActivitylog`](#deesappuiactivitylog), [`DeesAppuiProfiledropdown`](#deesappuiprofiledropdown), [`DeesAppuiTabs`](#deesappuitabs), [`DeesAppuiView`](#deesappuiview), [`DeesMobileNavigation`](#deesmobilenavigation), [`DeesDashboardGrid`](#deesdashboardgrid) |
+| Data Display | [`DeesTable`](#deestable), [`DeesDataviewCodebox`](#deesdataviewcodebox), [`DeesDataviewStatusobject`](#deesdataviewstatusobject), [`DeesPdf`](#deespdf), [`DeesStatsGrid`](#deesstatsgrid), [`DeesPagination`](#deespagination) |
+| Visualization | [`DeesChartArea`](#deeschartarea), [`DeesChartLog`](#deeschartlog) |
+| Dialogs & Overlays | [`DeesModal`](#deesmodal), [`DeesContextmenu`](#deescontextmenu), [`DeesSpeechbubble`](#deesspeechbubble), [`DeesWindowlayer`](#deeswindowlayer) |
+| Navigation | [`DeesStepper`](#deesstepper), [`DeesProgressbar`](#deesprogressbar) |
+| Development | [`DeesEditor`](#deeseditor), [`DeesEditorMarkdown`](#deeseditormarkdown), [`DeesEditorMarkdownoutlet`](#deeseditormarkdownoutlet), [`DeesTerminal`](#deesterminal), [`DeesUpdater`](#deesupdater) |
+| Auth & Utilities | [`DeesSimpleAppdash`](#deessimpleappdash), [`DeesSimpleLogin`](#deessimplelogin) |
+| Shopping | [`DeesShoppingProductcard`](#deesshoppingproductcard) |

 ## Detailed Component Documentation

@ -70,14 +71,36 @@ Interactive chips/tags with selection capabilities.
 ```

 #### `DeesIcon`
-Display icons from various icon sets including FontAwesome.
+Display icons from FontAwesome and Lucide icon libraries with library prefixes.

 ```typescript
+// FontAwesome icons - use 'fa:' prefix
 <dees-icon
-  icon="home"           // FontAwesome icon name
-  type="solid"          // Options: solid, regular, brands
-  size="1.5rem"         // Optional: custom size
+  icon="fa:check"       // FontAwesome icon with fa: prefix
+  iconSize="24"         // Size in pixels
+  color="#22c55e"       // Optional: custom color
+></dees-icon>
+
+// Lucide icons - use 'lucide:' prefix  
+<dees-icon
+  icon="lucide:menu"    // Lucide icon with lucide: prefix
+  iconSize="24"         // Size in pixels
  color="#007bff"       // Optional: custom color
+  strokeWidth="2"       // Optional: stroke width for Lucide icons
+></dees-icon>
+
+// Available FontAwesome icons include:
+// fa:check, fa:bell, fa:gear, fa:trash, fa:copy, fa:paste, fa:eye, fa:eyeSlash,
+// fa:plus, fa:minus, fa:circleInfo, fa:circleCheck, fa:circleXmark, fa:message,
+// fa:arrowRight, fa:facebook, fa:twitter, fa:linkedin, fa:instagram, etc.
+
+// Available Lucide icons include:
+// lucide:menu, lucide:settings, lucide:home, lucide:file, lucide:folder,
+// lucide:search, lucide:user, lucide:heart, lucide:star, lucide:download, etc.
+
+// Legacy API (deprecated but still supported)
+<dees-icon
+  iconFA="check"        // Without prefix - assumes FontAwesome
 ></dees-icon>
 ```

@ -431,6 +454,61 @@ Dynamic list input for managing arrays of typed values.
 ></dees-input-typelist>
 ```

+#### `DeesInputDatepicker`
+Date and time picker component with calendar interface.
+
+```typescript
+<dees-input-datepicker
+  key="eventDate"
+  label="Event Date"
+  placeholder="Select date"
+  value="2025-01-15T14:30:00Z"  // ISO string format
+  dateFormat="DD/MM/YYYY"        // Display format
+  enableTime={true}              // Enable time selection
+  timeFormat="24h"               // Options: 24h, 12h
+  minuteIncrement={15}           // Time step in minutes
+  minDate="2025-01-01"          // Minimum selectable date
+  maxDate="2025-12-31"          // Maximum selectable date
+  .disabledDates=${[            // Array of disabled dates
+    '2025-01-10', 
+    '2025-01-11'
+  ]}
+  weekStartsOn={1}              // 0 = Sunday, 1 = Monday
+  required
+  @change=${handleDateChange}
+></dees-input-datepicker>
+```
+
+Key Features:
+- Interactive calendar popup
+- Optional time selection
+- Configurable date format
+- Min/max date constraints
+- Disable specific dates
+- Keyboard navigation
+- Today button
+- Clear functionality
+- 12/24 hour time formats
+- Theme-aware styling
+
+#### `DeesInputSearchselect`
+Search-enabled dropdown selection component.
+
+```typescript
+<dees-input-searchselect
+  key="category"
+  label="Select Category"
+  placeholder="Search categories..."
+  .options=${[
+    { key: 'tech', label: 'Technology' },
+    { key: 'health', label: 'Healthcare' },
+    { key: 'finance', label: 'Finance' }
+  ]}
+  required
+  @change=${handleCategoryChange}
+></dees-input-searchselect>
+```
+
 #### `DeesInputRichtext`
 Rich text editor with formatting toolbar powered by TipTap.

@ -919,6 +997,100 @@ Responsive navigation component for mobile devices.
 ></dees-mobile-navigation>
 ```

+#### `DeesDashboardGrid`
+Drag-and-drop grid layout system for creating customizable dashboards.
+
+```typescript
+<dees-dashboardgrid
+  .widgets=${[
+    {
+      id: 'widget1',
+      x: 0,          // Grid column position
+      y: 0,          // Grid row position
+      w: 4,          // Width in grid units
+      h: 3,          // Height in grid units
+      minW: 2,       // Minimum width
+      minH: 2,       // Minimum height
+      maxW: 6,       // Maximum width
+      title: 'Sales Overview',
+      icon: 'fa:chart-line',
+      content: html`<div>Widget content here</div>`,
+      noMove: false,  // Allow moving
+      noResize: false // Allow resizing
+    },
+    {
+      id: 'widget2',
+      x: 4,
+      y: 0,
+      w: 4,
+      h: 3,
+      title: 'Recent Activity',
+      content: html`<dees-table .data=${activityData}></dees-table>`,
+      autoPosition: true  // Auto-find position
+    }
+  ]}
+  columns={12}         // Number of grid columns
+  cellHeight={80}      // Height of each grid cell in pixels
+  cellHeightUnit="px"  // Options: px, em, rem, auto
+  margin={10}          // Gap between widgets
+  editable={true}      // Enable drag and resize
+  showGridLines={false} // Show grid guidelines
+  enableAnimation={true} // Smooth transitions
+  rtl={false}          // Right-to-left support
+  @widget-move=${handleWidgetMove}
+  @widget-resize=${handleWidgetResize}
+></dees-dashboardgrid>
+
+// Programmatic methods
+const grid = document.querySelector('dees-dashboardgrid');
+
+// Add a new widget
+grid.addWidget({
+  id: 'newWidget',
+  x: 0,
+  y: 0,
+  w: 3,
+  h: 2,
+  content: html`<div>New widget</div>`
+}, true); // true = auto-position
+
+// Remove widget
+grid.removeWidget('widget1');
+
+// Update widget
+grid.updateWidget('widget2', { 
+  title: 'Updated Title',
+  w: 6 
+});
+
+// Get/set layout
+const layout = grid.getLayout(); // Returns position data
+grid.setLayout(savedLayout);      // Restore positions
+
+// Compact widgets
+grid.compact('vertical');  // Or 'horizontal'
+
+// Lock/unlock editing
+grid.lockGrid();
+grid.unlockGrid();
+```
+
+Key Features:
+- Drag-and-drop widget repositioning
+- Resize handles on edges and corners
+- Grid-based layout system
+- Collision detection
+- Auto-positioning for new widgets
+- Configurable constraints (min/max dimensions)
+- Lock individual widgets or entire grid
+- Compact layout algorithm
+- Save/restore layout positions
+- RTL layout support
+- Optional grid lines for alignment
+- Smooth animations
+- Responsive sizing
+- Empty state display
+
 ### Data Display Components

 #### `DeesTable`
@ -1913,6 +2085,69 @@ Key Features:
 - Responsive layout
 - Loading states

+### Shopping Components
+
+#### `DeesShoppingProductcard`
+Product card component for e-commerce applications.
+
+```typescript
+<dees-shopping-productcard
+  .productData=${{
+    name: 'Premium Headphones',
+    category: 'Electronics',
+    description: 'High-quality wireless headphones with noise cancellation',
+    price: 199.99,
+    originalPrice: 249.99,  // Shows strikethrough price
+    currency: '$',
+    inStock: true,
+    stockText: 'In Stock',  // Custom stock text
+    imageUrl: '/images/headphones.jpg',
+    iconName: 'lucide:headphones' // Fallback icon if no image
+  }}
+  quantity={1}               // Current quantity
+  showQuantitySelector={true} // Show quantity selector
+  selectable={false}         // Enable selection mode
+  selected={false}           // Selection state
+  @quantityChange=${(e) => handleQuantityChange(e.detail)}
+  @selectionChange=${(e) => handleSelectionChange(e.detail)}
+></dees-shopping-productcard>
+```
+
+Key Features:
+- Product image with fallback icon
+- Category label
+- Product name and description
+- Price display with original price strikethrough
+- Stock status indicator
+- Built-in quantity selector
+- Selection mode for bulk operations
+- Hover effects
+- Responsive design
+- Theme-aware styling
+
+Product Data Interface:
+```typescript
+interface IProductData {
+  name: string;
+  category?: string;
+  description?: string;
+  price: number;
+  originalPrice?: number;
+  currency?: string;
+  inStock?: boolean;
+  stockText?: string;
+  imageUrl?: string;
+  iconName?: string;
+}
+```
+
+Common Use Cases:
+- Product listings
+- Shopping carts
+- Order summaries
+- Product comparisons
+- Wishlist displays
+
 ## License and Legal Information

 This repository contains open-source code that is licensed under the MIT License. A copy of the MIT License can be found in the license file within this repository.