Merge branch 'develop'

Yegorich555 · Nov 21, 2023 · be8ee10 · be8ee10
2 parents 157243c + 4e6449a
commit be8ee10
Show file tree

Hide file tree

Showing 44 changed files with 47,901 additions and 47,457 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,23 @@
 <!-- markdownlint-disable MD024 -->
+
 # Changelog
 
+## 1.0.2 (\_\_\_)
+
+### New Features
+
+---
+
+- **Global**
+  - Add Preact tsx/jsx support
+- **Controls**
+  - Added `text-align: start` by default to avoid unexpected inheritance
+  - [RadioControl](src/controls/radio.ts). Added attribute `[checked]` to re-style whole item
+
+---
+
+---
+
 ## 1.0.1 (Nov 17, 2023)
 
 ### Fixes

diff --git a/README.md b/README.md
@@ -23,7 +23,7 @@ Template repo with React: [webpack-must-have](https://github.com/Yegorich555/web
 - Built-in css-variables to use custom color-themes with native ordinary styling (css, scss etc.)
 - Built-in dark color scheme. Add attribute `wupdark` (`<body wupdark>`) and define main background & text colors
 - Built-in Typescript (coverage types 100%)
-- Built-in `.jsx/.tsx` support (for React/Vue)
+- Built-in `.jsx/.tsx` support (for React/Preact)
 - Supports different locales (based on [localeInfo](src/objects/localeInfo.ts) helper). For changing built-in messages override global function `window.__wupln` (details you can find in your editor during the coding via built-in intellisense)
 - Well documented with JSDoc (use intellisense power of your editor to get details about each property/option/usage)
 - Optimized for webpack (build includes only used components and helpers via **side-effects** option)

diff --git a/demo/src/components/circleView.scss b/demo/src/components/circleView.scss
@@ -22,3 +22,56 @@
     transform: translateX(-50%);
   }
 }
+
+.complex {
+  margin: 10px auto auto;
+  max-width: 200px;
+  position: relative;
+  padding: 20px;
+
+  > wup-circle:first-child {
+    margin: 0;
+  }
+
+  > wup-circle:nth-child(2) {
+    width: 120px;
+    margin: 0;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  > wup-circle > strong {
+    font-size: 1em;
+    top: 0.5em;
+    transform: none;
+    left: initial;
+    right: calc(50% + 6px);
+  }
+
+  > ul {
+    position: absolute;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+
+    > li {
+      position: absolute;
+      top: 0;
+      left: 50%;
+      transform-origin: left;
+      width: 100%;
+      height: 100%;
+
+      > i {
+        font-style: normal;
+        position: absolute;
+      }
+    }
+  }
+}
diff --git a/demo/src/components/circleView.tsx b/demo/src/components/circleView.tsx
@@ -161,6 +161,46 @@ export default function CircleView() {
           }}
         />
       </section>
+      <section>
+        <h3>Complex view with labels</h3>
+        <small>Details see here: todo coming soon</small>
+        <div className={styles.complex}>
+          <wup-circle
+            w-from={0}
+            w-to={270}
+            w-min={0}
+            w-max={270}
+            w-width={15}
+            ref={(el) => {
+              if (el) {
+                el.$options.items = [{ value: 190 }];
+                el.renderLabel = (lbl) => (lbl.textContent = "Expected");
+              }
+            }}
+          />
+          <wup-circle
+            w-from={0}
+            w-to={270}
+            w-min={0}
+            w-max={270}
+            w-width={25}
+            ref={(el) => {
+              if (el) {
+                el.$options.items = [{ value: 60, color: "#19bdb5" }];
+                el.renderLabel = (lbl) => (lbl.textContent = "Actual");
+              }
+            }}
+          />
+          <ul>
+            {Array.from({ length: 11 }).map((_, i) => (
+              // eslint-disable-next-line react/no-array-index-key
+              <li key={`lbl${i}`} style={{ transform: `rotate(${(270 / 10) * i}deg)` }}>
+                <i style={{ transform: `rotate(-${(270 / 10) * i}deg)` }}>{i}</i>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </section>
     </Page>
   );
 }
diff --git a/demo/src/components/controls/radio.scss b/demo/src/components/controls/radio.scss
@@ -1,3 +1,4 @@
+/* stylelint-disable no-descending-specificity */
 .custom {
   --ctrl-radio-item-r: 16px;
 
@@ -16,3 +17,44 @@
     border: 4px solid var(--ctrl-selected);
   }
 }
+
+.custom2 {
+  box-shadow: none !important;
+  padding: var(--ctrl-radio-gap);
+  padding-top: 0;
+  // padding: 0;
+  // background: none;
+
+  [icon] {
+    display: none;
+  }
+
+  legend {
+    transform: none;
+    position: static;
+    margin: 0;
+    padding: var(--ctrl-radio-gap) 0;
+  }
+
+  > fieldset {
+    flex-direction: column;
+    gap: var(--ctrl-radio-gap);
+    margin: 0;
+
+    > label {
+      // background: #fff;
+      box-shadow: 0 0 0 1px var(--ctrl-border);
+      border-radius: var(--ctrl-border-radius);
+      padding: 0.75em;
+      transition: color var(--anim), box-shadow var(--anim);
+
+      &:hover {
+        box-shadow: 0 0 2px 1px var(--ctrl-focus-border);
+      }
+
+      &[checked] {
+        box-shadow: 0 0 0 2px var(--ctrl-focus-border);
+      }
+    }
+  }
+}
diff --git a/demo/src/components/controls/radio.tsx b/demo/src/components/controls/radio.tsx
@@ -116,7 +116,19 @@ export default function RadioControlView() {
             w-initValue={items[1].value.toString()}
             w-items="storedRadioItems.items"
           />
-
+          <wup-radio
+            class={styles.custom2}
+            w-name="customViewNext"
+            w-initValue={items[1].value.toString()}
+            ref={(el) => {
+              if (el) {
+                el.$options.items = items.slice(0, 4);
+                setTimeout(() => {
+                  console.warn(el.$value);
+                });
+              }
+            }}
+          />
           <wup-radio
             ref={(el) => {
               if (el) {

diff --git a/demo/src/components/controls/select.tsx b/demo/src/components/controls/select.tsx
@@ -60,6 +60,8 @@ export default function SelectControlView() {
       }}
       features={[
         "Inheritted features from TextControl",
+        "Menu is opened outside parent with position: relative",
+        "Perfect keyboard support",
         "Pending state with spinner if $options.items is a function with promise-result",
         "Possible to customize render of items (via $options.items; see below...)",
         "Possible to create any value not pointed in items (via $options.allowNewValue)",

diff --git a/demo/src/main.tsx b/demo/src/main.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable jsx-a11y/anchor-has-content */
 import "./styles/main.scss";
 import React, { useEffect } from "react";
-import ReactDom from "react-dom";
+import ReactDOM from "react-dom/client";
 import { BrowserRouter, Routes, Route, Navigate, NavLink, useNavigate } from "react-router-dom";
 import { WUPHelpers, WUPSwitchControl } from "web-ui-pack";
 import { useBuiltinStyle, WUPcssButton, WUPcssScrollSmall } from "web-ui-pack/styles";
@@ -158,12 +158,10 @@ export default function AppContainer() {
   );
 }
 
-const el = document.getElementById("app")!;
-ReactDom.render(
+ReactDOM.createRoot(document.getElementById("app")!).render(
   <BrowserRouter>
     <AppContainer />
-  </BrowserRouter>,
-  el
+  </BrowserRouter>
 );
 
 useBuiltinStyle(

diff --git a/demo/tsconfig.json b/demo/tsconfig.json
@@ -7,6 +7,7 @@
       "web-ui-pack/*": ["../src/*"]
     },
     "jsx": "react-jsx",
+    // "jsxImportSource": "preact",
     "allowJs": true,
     "outDir": "",
     "noEmit": true, // exclude errors in console because it should be wrapped by webpack