🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
Socket
DemoInstallSign in
Socket
DemoInstallSign in

@themesberg/flowbite

Package Overview
Dependencies
Maintainers
1
Versions
12
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@themesberg/flowbite - npm Package Compare versions

Comparing version

1.0.7
to
1.1.0

dist/datepicker.bundle.js
dist/datepicker.bundle.js.map
src/plugins/datepicker.js

15

package.json
{
"name": "@themesberg/flowbite",
"version": "1.0.7",
"version": "1.1.0",
"description": "Open-source library of Tailwind CSS components and elements.",

@@ -23,3 +23,3 @@ "keywords": [

"start": "NODE_ENV=development run-p start:*",
"start:hugo": "hugo server -D",
"start:hugo": "hugo server -D --bind=0.0.0.0 --baseURL=http://192.168.80.117:1313/docs/",
"start:webpack": "webpack --mode=development --watch",

@@ -31,3 +31,3 @@ "build": "NODE_ENV=production && HUGO_ENV=production && run-s build:webpack build:hugo",

"build:css": "NPM_ENV=development npx postcss src/flowbite.css > dist/flowbite.css",
"build:js": "run-s build:webpack && copyfiles --flat static/flowbite.bundle.js dist && copyfiles --flat static/flowbite.bundle.js.map dist",
"build:js": "run-s build:webpack && copyfiles --flat static/flowbite.bundle.js dist && copyfiles --flat static/flowbite.bundle.js.map dist && copyfiles --flat static/datepicker.bundle.js dist && copyfiles --flat static/datepicker.bundle.js.map dist",
"build:npm": "run-s build:css:min build:css build:js"

@@ -61,10 +61,9 @@ },

"webpack-dev-server": "^3.11.2",
"yarn": "^1.22.10"
"yarn": "^1.22.10",
"mini-svg-data-uri": "^1.2.3",
"@themesberg/tailwind-datepicker": "^1.0.1"
},
"dependencies": {
"@popperjs/core": "^2.9.3",
"@themesberg/tailwind-datepicker": "^1.0.1",
"tippy.js": "^6.3.1",
"mini-svg-data-uri": "^1.2.3"
"@popperjs/core": "^2.9.3"
}
}

163

plugin.js

@@ -5,2 +5,3 @@ const svgToDataUri = require('mini-svg-data-uri')

const colors = require('tailwindcss/colors')
const [baseFontSize, { lineHeight: baseLineHeight }] = defaultTheme.fontSize.base
const { spacing, borderWidth, borderRadius } = defaultTheme

@@ -11,2 +12,54 @@

addBase({
[[
"[type='text']",
"[type='email']",
"[type='url']",
"[type='password']",
"[type='number']",
"[type='date']",
"[type='datetime-local']",
"[type='month']",
"[type='search']",
"[type='tel']",
"[type='time']",
"[type='week']",
'[multiple]',
'textarea',
'select',
]]: {
appearance: 'none',
'background-color': '#fff',
'border-color': theme('colors.gray.500', colors.gray[500]),
'border-width': borderWidth['DEFAULT'],
'border-radius': borderRadius.none,
'padding-top': spacing[2],
'padding-right': spacing[3],
'padding-bottom': spacing[2],
'padding-left': spacing[3],
'font-size': baseFontSize,
'line-height': baseLineHeight,
'--tw-shadow': '0 0 #0000',
'&:focus': {
outline: '2px solid transparent',
'outline-offset': '2px',
'--tw-ring-inset': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-ring-offset-width': '0px',
'--tw-ring-offset-color': '#fff',
'--tw-ring-color': theme('colors.blue.600', colors.blue[600]),
'--tw-ring-offset-shadow': `var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)`,
'--tw-ring-shadow': `var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color)`,
'box-shadow': `var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)`,
'border-color': theme('colors.blue.600', colors.blue[600]),
}
},
[['input::placeholder', 'textarea::placeholder']]: {
color: theme('colors.gray.500', colors.gray[500]),
opacity: '1',
},
['::-webkit-datetime-edit-fields-wrapper']: {
padding: '0',
},
['::-webkit-date-and-time-value']: {
'min-height': '1.5em',
},
['select']: {

@@ -25,2 +78,10 @@ 'background-image': `url("${svgToDataUri(

},
['[multiple]']: {
'background-image': 'initial',
'background-position': 'initial',
'background-repeat': 'unset',
'background-size': 'initial',
'padding-right': spacing[3],
'color-adjust': 'unset',
},
[[`[type='checkbox']`, `[type='radio']`]]: {

@@ -94,2 +155,104 @@ appearance: 'none',

'background-color': 'currentColor',
},
[`[type='file']`]: {
background: 'unset',
'border-color': 'inherit',
'border-width': '0',
'border-radius': '0',
padding: '0',
'font-size': 'unset',
'line-height': 'inherit',
},
[`[type='file']:focus`]: {
outline: `1px solid ButtonText`,
outline: `1px auto -webkit-focus-ring-color`,
},
[[`input[type=file]::file-selector-button`]]: {
color: 'white',
background: theme('colors.gray.700', colors.gray[700]),
'font-weight': theme('fontWeight.medium'),
'font-size': theme('fontSize.sm'),
'cursor': 'pointer',
border: 0,
'padding-top': spacing[2.5],
'padding-bottom': spacing[2.5],
'padding-left': spacing[8],
'padding-right': spacing[4],
'margin-inline-start': '-1rem',
'margin-inline-end': '1rem',
'&:hover': {
background: theme('colors.gray.600', colors.gray[600])
}
},
['.toggle-bg:after']: {
content: '""',
position: 'absolute',
top: spacing[0.5],
left: spacing[0.5],
background: 'white',
'border-color': theme('colors.gray.300', colors.gray[300]),
'border-width': borderWidth['DEFAULT'],
'border-radius': borderRadius.full,
'height': theme('height.5'),
'width': theme('width.5'),
'transition-property': 'background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter',
'transition-duration': '.15s',
'box-shadow': 'var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color)'
},
['input:checked + .toggle-bg:after']: {
transform: 'translateX(100%);',
'border-color': 'white'
},
['input:checked + .toggle-bg']: {
background: theme('colors.blue.600', colors.gray[600]),
'border-color': theme('colors.blue.600', colors.gray[600])
},
[['.tooltip-arrow', '.tooltip-arrow:before']]: {
position: 'absolute',
width: '8px',
height: '8px',
background: 'inherit'
},
['.tooltip-arrow']: {
visibility: 'hidden',
},
['.tooltip-arrow:before']: {
content: '""',
visibility: 'visible',
transform: 'rotate(45deg)'
},
[`[data-tooltip-style^='light'] + .tooltip > .tooltip-arrow:before`]: {
'border-style': 'solid',
'border-color': colors.gray[200],
},
[`[data-tooltip-style^='light'] + .tooltip[data-popper-placement^='top'] > .tooltip-arrow:before`]: {
'border-bottom-width': '1px',
'border-right-width': '1px'
},
[`[data-tooltip-style^='light'] + .tooltip[data-popper-placement^='right'] > .tooltip-arrow:before`]: {
'border-bottom-width': '1px',
'border-left-width': '1px'
},
[`[data-tooltip-style^='light'] + .tooltip[data-popper-placement^='bottom'] > .tooltip-arrow:before`]: {
'border-top-width': '1px',
'border-left-width': '1px'
},
[`[data-tooltip-style^='light'] + .tooltip[data-popper-placement^='left'] > .tooltip-arrow:before`]: {
'border-top-width': '1px',
'border-right-width': '1px'
},
[`.tooltip[data-popper-placement^='top'] > .tooltip-arrow`]: {
bottom: '-4px'
},
[`.tooltip[data-popper-placement^='bottom'] > .tooltip-arrow`]: {
top: '-4px'
},
[`.tooltip[data-popper-placement^='left'] > .tooltip-arrow`]: {
right: '-4px'
},
[`.tooltip[data-popper-placement^='right'] > .tooltip-arrow`]: {
left: '-4px'
},
['.tooltip.invisible > .tooltip-arrow:before']: {
visibility: 'hidden'
}

@@ -96,0 +259,0 @@ })

12

src/components/dropdown.js

@@ -5,5 +5,8 @@ import { createPopper } from '@popperjs/core';

document.querySelectorAll('[data-dropdown-toggle]').forEach(function (dropdownToggleEl) {
var dropdownMenuId = dropdownToggleEl.getAttribute('data-dropdown-toggle');
var dropdownMenuEl = document.getElementById(dropdownMenuId);
const dropdownMenuId = dropdownToggleEl.getAttribute('data-dropdown-toggle');
const dropdownMenuEl = document.getElementById(dropdownMenuId);
// options
const placement = dropdownToggleEl.getAttribute('data-dropdown-placement');
dropdownToggleEl.addEventListener('click', function (event) {

@@ -14,4 +17,5 @@ var element = event.target;

}
createPopper(element, dropdownMenuEl, {
placement: 'bottom-start',
placement: placement ? placement : 'bottom-start',
modifiers: [

@@ -21,3 +25,3 @@ {

options: {
offset: [0, 10],
offset: [0, 10]
},

@@ -24,0 +28,0 @@ },

86

src/components/tooltip.js

@@ -1,7 +0,83 @@

import tippy from 'tippy.js';
import 'tippy.js/dist/tippy.css'; // optional for styling
import 'tippy.js/animations/scale.css';
import { createPopper } from '@popperjs/core';
document.addEventListener('DOMContentLoaded', function () {
tippy('[data-tippy-content]');
// Toggle dropdown elements using [data-dropdown-toggle]
document.querySelectorAll('[data-tooltip-target]').forEach(function (tooltipToggleEl) {
const tooltipEl = document.getElementById(tooltipToggleEl.getAttribute('data-tooltip-target'));
const placement = tooltipToggleEl.getAttribute('data-tooltip-placement');
const trigger = tooltipToggleEl.getAttribute('data-tooltip-trigger');
const popperInstance = createPopper(tooltipToggleEl, tooltipEl, {
placement: placement ? placement : 'top',
modifiers: [
{
name: 'offset',
options: {
offset: [0, 8],
},
},
],
});
function show() {
// Make the tooltip visible
tooltipEl.classList.remove('opacity-0');
tooltipEl.classList.add('opacity-100');
tooltipEl.classList.remove('invisible');
tooltipEl.classList.add('visible');
// Enable the event listeners
popperInstance.setOptions((options) => ({
...options,
modifiers: [
...options.modifiers,
{ name: 'eventListeners', enabled: true },
],
}));
// Update its position
popperInstance.update();
}
function hide() {
// Hide the tooltip
tooltipEl.classList.remove('opacity-100');
tooltipEl.classList.add('opacity-0');
tooltipEl.classList.remove('visible');
tooltipEl.classList.add('invisible');
// Disable the event listeners
popperInstance.setOptions((options) => ({
...options,
modifiers: [
...options.modifiers,
{ name: 'eventListeners', enabled: false },
],
}));
}
var showEvents = [];
var hideEvents = [];
switch(trigger) {
case 'hover':
showEvents = ['mouseenter', 'focus'];
hideEvents = ['mouseleave', 'blur'];
break;
case 'click':
showEvents = ['click', 'focus'];
hideEvents = ['focusout', 'blur'];
break;
default:
showEvents = ['mouseenter', 'focus'];
hideEvents = ['mouseleave', 'blur'];
}
showEvents.forEach((event) => {
tooltipToggleEl.addEventListener(event, show);
});
hideEvents.forEach((event) => {
tooltipToggleEl.addEventListener(event, hide);
});
});

5

src/flowbite.js
import './flowbite.css';
// core components
import './components/collapse';
import './components/dropdown';
import './components/modal';
import './components/datepicker';
import './components/tooltip';

3

tailwind.config.js
module.exports = {
purge: {
// enabled: process.env.NODE_ENV === "production" ? true : false,
enabled: true,
// enabled: true,
content: ["./layouts/**/*.html", "./content/**/*.md", "./content/**/*.html", "./src/**/*.js"],

@@ -13,2 +13,3 @@ },

'2xs': '16rem',
'8xl': '90rem'
},

@@ -15,0 +16,0 @@ fontFamily: {

1

webpack.config.js

@@ -8,2 +8,3 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');

entry: {
datepicker: path.resolve(__dirname, 'src/plugins/datepicker.js'),
flowbite: path.resolve(__dirname, 'src/flowbite.js'),

@@ -10,0 +11,0 @@ docs: path.resolve(__dirname, 'src/docs.js')

src/components/datepicker.js
dist/flowbite.bundle.js

Sorry, the diff of this file is too big to display

dist/flowbite.bundle.js.map

Sorry, the diff of this file is not supported yet

dist/flowbite.css

Sorry, the diff of this file is not supported yet

dist/flowbite.min.css

Sorry, the diff of this file is not supported yet

src/flowbite.css

Sorry, the diff of this file is not supported yet