@admin-layout/tailwind-design-pro 11.0.4-alpha.4 → 11.2.1-alpha.1

package/lib/components/SettingDrawer/components/NavigationsModes.js

@@ -0,0 +1,322 @@
+import*as React from'react';import {useMemo}from'react';import'@react-icons/all-files/fa/FaMoon.js';import'@react-icons/all-files/fa/FaSun.js';import {useMediaQuery}from'../../../hooks/useMediaQuery.js';import {getSettingValue}from'../../../utils/settingsUtils.js';const navigationModes = [{
+  key: 'sidebar',
+  title: 'Sidebar',
+  svg: React.createElement("svg", {
+    width: "58",
+    height: "50",
+    viewBox: "0 0 58 50",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, React.createElement("rect", {
+    width: "58",
+    height: "50",
+    rx: "8",
+    fill: "#ffffff"
+  }), React.createElement("rect", {
+    x: "4",
+    y: "0",
+    width: "16",
+    height: "50",
+    fill: "#f0f2f5"
+  }), React.createElement("rect", {
+    x: "6",
+    y: "8",
+    width: "12",
+    height: "4",
+    rx: "2",
+    fill: "#1890ff"
+  }), React.createElement("rect", {
+    x: "6",
+    y: "16",
+    width: "12",
+    height: "4",
+    rx: "2",
+    fill: "#000000",
+    opacity: "0.15"
+  }), React.createElement("rect", {
+    x: "6",
+    y: "24",
+    width: "12",
+    height: "4",
+    rx: "2",
+    fill: "#000000",
+    opacity: "0.15"
+  }))
+}, {
+  key: 'topbar',
+  title: 'Top Bar',
+  svg: React.createElement("svg", {
+    width: "58",
+    height: "50",
+    viewBox: "0 0 58 50",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, React.createElement("rect", {
+    width: "58",
+    height: "50",
+    rx: "8",
+    fill: "#ffffff"
+  }), React.createElement("rect", {
+    x: "0",
+    y: "0",
+    width: "58",
+    height: "14",
+    fill: "#f0f2f5"
+  }), React.createElement("rect", {
+    x: "8",
+    y: "5",
+    width: "12",
+    height: "4",
+    rx: "2",
+    fill: "#1890ff"
+  }), React.createElement("rect", {
+    x: "24",
+    y: "5",
+    width: "12",
+    height: "4",
+    rx: "2",
+    fill: "#000000",
+    opacity: "0.15"
+  }), React.createElement("rect", {
+    x: "40",
+    y: "5",
+    width: "12",
+    height: "4",
+    rx: "2",
+    fill: "#000000",
+    opacity: "0.15"
+  }))
+}, {
+  key: 'mixed',
+  title: 'Mixed',
+  svg: React.createElement("svg", {
+    width: "58",
+    height: "50",
+    viewBox: "0 0 58 50",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, React.createElement("rect", {
+    width: "58",
+    height: "50",
+    rx: "8",
+    fill: "#ffffff"
+  }), React.createElement("rect", {
+    x: "0",
+    y: "0",
+    width: "58",
+    height: "14",
+    fill: "#f0f2f5"
+  }), React.createElement("rect", {
+    x: "24",
+    y: "5",
+    width: "12",
+    height: "4",
+    rx: "2",
+    fill: "#000000",
+    opacity: "0.15"
+  }), React.createElement("rect", {
+    x: "40",
+    y: "5",
+    width: "12",
+    height: "4",
+    rx: "2",
+    fill: "#000000",
+    opacity: "0.15"
+  }), React.createElement("rect", {
+    x: "4",
+    y: "14",
+    width: "16",
+    height: "36",
+    fill: "#f0f2f5"
+  }), React.createElement("rect", {
+    x: "6",
+    y: "20",
+    width: "12",
+    height: "4",
+    rx: "2",
+    fill: "#1890ff"
+  }), React.createElement("rect", {
+    x: "6",
+    y: "28",
+    width: "12",
+    height: "4",
+    rx: "2",
+    fill: "#000000",
+    opacity: "0.15"
+  }))
+}];
+const menuTypes = [{
+  key: 'classic',
+  title: 'Classic',
+  svg: React.createElement("svg", {
+    width: "58",
+    height: "50",
+    viewBox: "0 0 58 50",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, React.createElement("rect", {
+    width: "58",
+    height: "50",
+    rx: "8",
+    fill: "#ffffff"
+  }), React.createElement("rect", {
+    x: "0",
+    y: "0",
+    width: "18",
+    height: "50",
+    fill: "#001529"
+  }), React.createElement("rect", {
+    x: "4",
+    y: "15",
+    width: "10",
+    height: "2",
+    rx: "1",
+    fill: "#ffffff",
+    opacity: "0.65"
+  }), React.createElement("rect", {
+    x: "4",
+    y: "25",
+    width: "10",
+    height: "2",
+    rx: "1",
+    fill: "#ffffff",
+    opacity: "0.65"
+  }))
+}, {
+  key: 'perplexLayout',
+  title: 'Perplex Layout',
+  svg: React.createElement("svg", {
+    width: "58",
+    height: "50",
+    viewBox: "0 0 80 60",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, React.createElement("rect", {
+    x: "1",
+    y: "1",
+    width: "78",
+    height: "58",
+    rx: "4",
+    fill: "white",
+    stroke: "#E5E7EB",
+    strokeWidth: "2"
+  }), React.createElement("rect", {
+    x: "1",
+    y: "1",
+    width: "20",
+    height: "58",
+    rx: "3",
+    fill: "#0F172A"
+  }), React.createElement("rect", {
+    x: "5",
+    y: "10",
+    width: "10",
+    height: "3",
+    rx: "1.5",
+    fill: "white",
+    opacity: "0.9"
+  }), React.createElement("rect", {
+    x: "5",
+    y: "20",
+    width: "10",
+    height: "3",
+    rx: "1.5",
+    fill: "white",
+    opacity: "0.6"
+  }), React.createElement("rect", {
+    x: "5",
+    y: "30",
+    width: "10",
+    height: "3",
+    rx: "1.5",
+    fill: "white",
+    opacity: "0.4"
+  }), React.createElement("rect", {
+    x: "25",
+    y: "10",
+    width: "40",
+    height: "3",
+    rx: "1.5",
+    fill: "#0F172A",
+    opacity: "0.7"
+  }), React.createElement("rect", {
+    x: "25",
+    y: "20",
+    width: "30",
+    height: "3",
+    rx: "1.5",
+    fill: "#0F172A",
+    opacity: "0.5"
+  }), React.createElement("rect", {
+    x: "25",
+    y: "35",
+    width: "45",
+    height: "3",
+    rx: "1.5",
+    fill: "#0F172A",
+    opacity: "0.4"
+  }), React.createElement("rect", {
+    x: "25",
+    y: "45",
+    width: "35",
+    height: "3",
+    rx: "1.5",
+    fill: "#0F172A",
+    opacity: "0.3"
+  }))
+}];
+function NavigationModes({
+  changeSetting,
+  settings,
+  location,
+  routePattern,
+  applyToAllRoutes = false
+}) {
+  const {
+    isMobile
+  } = useMediaQuery();
+  const currentRoute = routePattern || location?.pathname || '/';
+  const deviceType = isMobile ? 'mobile' : 'desktop';
+  // Get navigation values using the utility function
+  const navigationValues = useMemo(() => ({
+    navigationMode: getSettingValue(settings, 'navigationMode', applyToAllRoutes, currentRoute, deviceType, 'mixed'),
+    sideMenuType: getSettingValue(settings, 'sideMenuType', applyToAllRoutes, currentRoute, deviceType, 'expanded')
+  }), [settings, applyToAllRoutes, currentRoute, deviceType]);
+  return React.createElement("div", {
+    className: "space-y-8"
+  }, React.createElement("section", null, React.createElement("h3", {
+    className: "text-sm font-medium text-gray-700 dark:text-gray-200 mb-3"
+  }, deviceType === 'mobile' ? 'Mobile Navigation Mode' : 'Desktop Navigation Mode'), React.createElement("div", {
+    className: "flex flex-row gap-4"
+  }, navigationModes.map((mode, index) => React.createElement("div", {
+    key: `navMode_${index}`,
+    className: "relative cursor-pointer hover:opacity-80 transition-opacity shadow-sm dark:shadow-md rounded overflow-hidden",
+    onClick: () => {
+      // Pass simple key - handleSettingChange in SettingDrawer will decide if it's global or route-specific
+      changeSetting('navigationMode', mode.key);
+    }
+  }, React.createElement("div", {
+    className: "relative"
+  }, mode.svg, navigationValues.navigationMode === mode.key && React.createElement("svg", {
+    className: "absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-6 h-6 text-blue-500 pointer-events-none",
+    viewBox: "0 0 24 24",
+    fill: "currentColor"
+  }, React.createElement("path", {
+    d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
+  }))))))), React.createElement("section", null, React.createElement("h3", {
+    className: "text-sm font-medium text-gray-700 dark:text-gray-200 mb-3"
+  }, deviceType === 'mobile' ? 'Mobile Menu Type' : 'Desktop Menu Type'), React.createElement("div", {
+    className: "flex flex-row gap-4"
+  }, menuTypes.map((type, index) => React.createElement("div", {
+    key: `menuType_${index}`,
+    className: "relative cursor-pointer hover:opacity-80 transition-opacity shadow-sm dark:shadow-md rounded overflow-hidden",
+    onClick: () => {
+      // Pass simple key - handleSettingChange in SettingDrawer will decide if it's global or route-specific
+      changeSetting('sideMenuType', type.key);
+    }
+  }, React.createElement("div", {
+    className: "relative"
+  }, type.svg, navigationValues.sideMenuType === type.key && React.createElement("svg", {
+    className: "absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-6 h-6 text-blue-500 pointer-events-none",
+    viewBox: "0 0 24 24",
+    fill: "currentColor"
+  }, React.createElement("path", {
+    d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
+  }))))))));
+}export{NavigationModes};//# sourceMappingURL=NavigationsModes.js.map

package/lib/components/SettingDrawer/components/NavigationsModes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationsModes.js","sources":["../../../../src/components/SettingDrawer/components/NavigationsModes.tsx"],"sourcesContent":[null],"names":[],"mappings":"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"}

package/lib/components/SettingDrawer/components/RegionalSettings.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { IRegionalSettingsProps } from '../utils/types';
+export declare function RegionalSettings(props: IRegionalSettingsProps): React.JSX.Element;
+//# sourceMappingURL=RegionalSettings.d.ts.map

package/lib/components/SettingDrawer/components/RegionalSettings.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RegionalSettings.d.ts","sourceRoot":"","sources":["../../../../src/components/SettingDrawer/components/RegionalSettings.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,sBAAsB,EAAE,MAAM,gBAAgB,CAAC;AAMxD,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,sBAAsB,qBA4hB7D"}