tessl/npm-primeflex

PrimeFlex is a lightweight responsive CSS utility library to accompany Prime UI libraries and static webpages as well.

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview

Eval results

Files

User Select Utilities

Name: tessl/npm-primeflex
Author: tessl

User select utilities control text selection behavior within elements. These utilities are essential for creating polished user interfaces where certain content should or shouldn't be selectable.

Capabilities

User Selection Control

Control how users can select text within elements.

.select-none { user-select: none; }
.select-text { user-select: text; }
.select-all { user-select: all; }
.select-auto { user-select: auto; }

Usage Examples

UI Elements

<!-- Prevent selection on interactive elements -->
<button class="select-none p-2 bg-primary text-white border-round cursor-pointer">
  Click Me (text can't be selected)
</button>

<!-- Navigation items -->
<nav class="select-none">
  <ul class="list-none flex gap-3">
    <li><a href="#home" class="cursor-pointer">Home</a></li>
    <li><a href="#about" class="cursor-pointer">About</a></li>
    <li><a href="#contact" class="cursor-pointer">Contact</a></li>
  </ul>
</nav>

Code and Technical Content

<!-- Select all for easy copying -->
<div class="bg-gray-100 p-3 border-round">
  <label class="block mb-2 font-bold">Installation Command:</label>
  <code class="select-all bg-gray-800 text-white p-2 border-round block">
    npm install primeflex
  </code>
</div>

<!-- API keys and tokens -->
<div class="p-3 border-1 border-round">
  <label class="block mb-2">API Key:</label>
  <span class="select-all font-mono bg-gray-50 p-2 border-round">
    abc123def456ghi789
  </span>
</div>

Content Areas

<!-- Regular selectable content -->
<article class="select-text">
  <h2>Article Title</h2>
  <p>This paragraph content can be selected normally by the user.</p>
  <p>Users can highlight and copy this text as expected.</p>
</article>

<!-- Auto selection behavior -->
<div class="select-auto">
  <p>This content uses the browser's default selection behavior.</p>
</div>

Interactive Components

<!-- Card with non-selectable UI elements -->
<div class="border-1 border-round overflow-hidden">
  <div class="select-none p-3 bg-primary text-white flex justify-content-between align-items-center">
    <h3 class="m-0">Card Header</h3>
    <button class="p-1 text-white cursor-pointer">×</button>
  </div>
  <div class="select-text p-3">
    <p>This card content can be selected, but the header and controls cannot.</p>
  </div>
</div>

<!-- Draggable elements -->
<div class="select-none cursor-move p-3 bg-gray-100 border-round" draggable="true">
  <i class="pi pi-bars mr-2"></i>
  Drag handle (text not selectable)
</div>

Form Elements

<!-- Labels that shouldn't be selected -->
<div class="field">
  <label class="select-none block mb-2 font-bold">Username</label>
  <input type="text" class="select-text w-full p-2 border-1 border-round">
</div>

<!-- Help text -->
<div class="field">
  <label class="select-none block mb-2">Password</label>
  <input type="password" class="w-full p-2 border-1 border-round">
  <small class="select-none text-color-secondary mt-1 block">
    Must be at least 8 characters long
  </small>
</div>