Socket
Socket
Sign inDemoInstall

@mekari/pixel-utils

Package Overview
Dependencies
Maintainers
4
Versions
13
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@mekari/pixel-utils - npm Package Compare versions

Comparing version 0.1.0 to 0.1.1

2

dist/mekari-pixel-utils.cjs.dev.js

@@ -412,2 +412,3 @@ 'use strict';

const HTMLElement = canUseDOM ? window.HTMLElement : Object;
const SVGElement = canUseDOM ? window.SVGElement : Object;
/**

@@ -865,2 +866,3 @@ * Checks if a given element is an HTML element.

exports.SNA = SNA;
exports.SVGElement = SVGElement;
exports.StringArray = StringArray;

@@ -867,0 +869,0 @@ exports.StringNumber = StringNumber;

2

dist/mekari-pixel-utils.cjs.prod.js

@@ -393,2 +393,3 @@ 'use strict';

const HTMLElement = canUseDOM ? window.HTMLElement : Object;
const SVGElement = canUseDOM ? window.SVGElement : Object;
/**

@@ -846,2 +847,3 @@ * Checks if a given element is an HTML element.

exports.SNA = SNA;
exports.SVGElement = SVGElement;
exports.StringArray = StringArray;

@@ -848,0 +850,0 @@ exports.StringNumber = StringNumber;

3

dist/mekari-pixel-utils.esm.js

@@ -403,2 +403,3 @@ import { pickBy, startsWith, merge } from 'lodash-es';

const HTMLElement = canUseDOM ? window.HTMLElement : Object;
const SVGElement = canUseDOM ? window.SVGElement : Object;
/**

@@ -850,2 +851,2 @@ * Checks if a given element is an HTML element.

export { Css, HTMLElement, Logger, ObjectArray, ObjectFunction, SNA, StringArray, StringNumber, __get, addOpacity, camelize, canUseDOM, cleanChildren, cloneVNode, cloneVNodeElement, cloneVNodes, colorEmphasis, colorModeObserver, colorModeObserverEventBus, composeSystem, createChainedFunction, createStyledAttrsMixin, createWatcher, defineColorModeObserver, emitToggleColorMode, extractListeners, extractPixelAttrs, filterBaseStyles, filterPseudo, pickProperty as forwardProps, generateAlphas, generateStripe, get, getElById, getElement, getElementById, getFirstComponentChild, getFocusables, getSubstringAfterChar, getSubstringBeforeChar, hasOwn, isDarkColor, isDef, isEmpty, isNonNullObject, isUndef, isValidElement, isVueComponent, kebabify, mode, onUpdateColorMode, parsePackIcons, pickProperty, runIfFn, splitProps, useId, useVariantColorWarning, valueToPercent, wrapEvent };
export { Css, HTMLElement, Logger, ObjectArray, ObjectFunction, SNA, SVGElement, StringArray, StringNumber, __get, addOpacity, camelize, canUseDOM, cleanChildren, cloneVNode, cloneVNodeElement, cloneVNodes, colorEmphasis, colorModeObserver, colorModeObserverEventBus, composeSystem, createChainedFunction, createStyledAttrsMixin, createWatcher, defineColorModeObserver, emitToggleColorMode, extractListeners, extractPixelAttrs, filterBaseStyles, filterPseudo, pickProperty as forwardProps, generateAlphas, generateStripe, get, getElById, getElement, getElementById, getFirstComponentChild, getFocusables, getSubstringAfterChar, getSubstringBeforeChar, hasOwn, isDarkColor, isDef, isEmpty, isNonNullObject, isUndef, isValidElement, isVueComponent, kebabify, mode, onUpdateColorMode, parsePackIcons, pickProperty, runIfFn, splitProps, useId, useVariantColorWarning, valueToPercent, wrapEvent };

4

package.json
{
"name": "@mekari/pixel-utils",
"version": "0.1.0",
"version": "0.1.1",
"description": "Common utilties and types for Pixel",

@@ -43,2 +43,2 @@ "homepage": "https://bitbucket.org/mid-kelola-indonesia/pixel-next",

}
}
}

19

src/color-mode-observer.js
import Vue from 'vue'
export const defineColorModeObserver = ({ colorMode, theme, icons, toggleColorMode } = {}) => Vue.observable({
colorMode,
theme,
icons,
toggleColorMode
})
export const defineColorModeObserver = ({ colorMode, theme, icons, toggleColorMode } = {}) =>
Vue.observable({
colorMode,
theme,
icons,
toggleColorMode
})

@@ -36,9 +37,9 @@ /**

colorModeObserver.colorMode = newVal
changeColorModeListeners.forEach(handler => handler(newVal))
changeColorModeListeners.forEach((handler) => handler(newVal))
})
export function emitToggleColorMode () {
export function emitToggleColorMode() {
colorModeObserverEventBus.$emit('command:toggleColorMode')
}
export const onUpdateColorMode = fn => changeColorModeListeners.push(fn)
export const onUpdateColorMode = (fn) => changeColorModeListeners.push(fn)

18

src/color.js

@@ -25,3 +25,3 @@ import Color from 'color'

export const generateAlphas = color => ({
export const generateAlphas = (color) => ({
900: addOpacity(color, 0.92),

@@ -64,7 +64,5 @@ 800: addOpacity(color, 0.8),

*/
export const generateStripe = ({
size = '1rem',
color = 'rgba(255, 255, 255, 0.15)'
}) => css({
backgroundImage: `linear-gradient(
export const generateStripe = ({ size = '1rem', color = 'rgba(255, 255, 255, 0.15)' }) =>
css({
backgroundImage: `linear-gradient(
45deg,

@@ -79,4 +77,4 @@ ${color} 25%,

)`,
backgroundSize: `${size} ${size}`
})
backgroundSize: `${size} ${size}`
})

@@ -87,5 +85,5 @@ /**

*/
export const isDarkColor = color => Color(color).isDark()
export const isDarkColor = (color) => Color(color).isDark()
export function useVariantColorWarning (theme, componentName, variantColor) {
export function useVariantColorWarning(theme, componentName, variantColor) {
if (process.env.NODE_ENV === 'production') return

@@ -92,0 +90,0 @@ const variantColorIsDefined = isDef(variantColor)

6

src/component.testx.js

@@ -10,3 +10,3 @@ import defaultTheme from '@mekari/pixel-theme'

mixins: [createStyledAttrsMixin('FakeComponent', true)],
render (h) {
render(h) {
return h(

@@ -78,5 +78,3 @@ 'div',

border: `2px solid ${
colorMode === 'light'
? theme.colors.blue[600]
: theme.colors.blue[200]
colorMode === 'light' ? theme.colors.blue[600] : theme.colors.blue[200]
}`

@@ -83,0 +81,0 @@ })

42

src/components.js

@@ -18,5 +18,5 @@ import { css } from '@emotion/css'

*/
export function createWatcher (property) {
export function createWatcher(property) {
return {
handler (newVal, oldVal) {
handler(newVal, oldVal) {
for (const key in oldVal) {

@@ -39,7 +39,7 @@ if (!hasOwn(newVal, key)) {

*/
export const createStyledAttrsMixin = name => ({
export const createStyledAttrsMixin = (name) => ({
name,
inheritAttrs: false,
inject: ['$pixelTheme', '$pixelColorMode'],
data () {
data() {
return {

@@ -58,10 +58,10 @@ attrs$: {},

computed: {
colorMode () {
colorMode() {
return this.$pixelColorMode()
},
theme () {
theme() {
return this.$pixelTheme()
},
/** Split style attributes and native attributes */
splitProps () {
splitProps() {
const $attrs = this.$data.attrs$

@@ -75,17 +75,17 @@ const { styleAttrs, nativeAttrs } = extractPixelAttrs($attrs)

},
baseStyle () {
baseStyle() {
const componentBaseStyleObjectOrFunction = __get(this.theme, `baseStyles.${name}`)
return componentBaseStyleObjectOrFunction ? (
runIfFn(componentBaseStyleObjectOrFunction, {
...this.splitProps.styleAttrs,
...this.splitProps.nativeAttrs,
theme: this.theme,
colorMode: this.colorMode
})
) : {}
return componentBaseStyleObjectOrFunction
? runIfFn(componentBaseStyleObjectOrFunction, {
...this.splitProps.styleAttrs,
...this.splitProps.nativeAttrs,
theme: this.theme,
colorMode: this.colorMode
})
: {}
},
className () {
className() {
const { styleAttrs } = this.splitProps
const merged = {
...this.componentStyles || {},
...(this.componentStyles || {}),
...this.baseStyle,

@@ -99,3 +99,3 @@ ...styleAttrs

/** Computed attributes object */
computedAttrs () {
computedAttrs() {
return {

@@ -107,7 +107,7 @@ ...(name && { 'data-pixel-component': name }),

/** Computed listeners object */
computedListeners () {
computedListeners() {
return this.$data.listeners$
}
},
created () {
created() {
this.$watch('$attrs', createWatcher('attrs$'))

@@ -114,0 +114,0 @@ this.$watch('$listeners', createWatcher('listeners$'))

2

src/Css.js

@@ -8,2 +8,2 @@ import { css } from '@mekari/pixel-styled-system'

*/
export const Css = styleProps => css(styleProps)
export const Css = (styleProps) => css(styleProps)

16

src/dom.js

@@ -1,2 +0,1 @@

import { focusableElList, htmlElements } from './dom-elements'

@@ -10,7 +9,6 @@

export const HTMLElement =
canUseDOM
? window.HTMLElement
: Object
export const HTMLElement = canUseDOM ? window.HTMLElement : Object
export const SVGElement = canUseDOM ? window.SVGElement : Object
/**

@@ -21,3 +19,3 @@ * Checks if a given element is an HTML element.

*/
export function isValidElement (element) {
export function isValidElement(element) {
if (typeof element === 'string') {

@@ -36,3 +34,3 @@ return htmlElements.includes(element)

*/
export function getFocusables (element, keyboardOnly = false) {
export function getFocusables(element, keyboardOnly = false) {
let focusableEls = Array.from(element.querySelectorAll(focusableElSelector))

@@ -42,3 +40,3 @@

focusableEls = focusableEls.filter(
focusableEl => window.getComputedStyle(focusableEl).display !== 'none'
(focusableEl) => window.getComputedStyle(focusableEl).display !== 'none'
)

@@ -48,3 +46,3 @@

focusableEls = focusableEls.filter(
focusableEl => focusableEl.getAttribute('tabindex') !== '-1'
(focusableEl) => focusableEl.getAttribute('tabindex') !== '-1'
)

@@ -51,0 +49,0 @@ }

4

src/functions.js

@@ -5,3 +5,3 @@ /**

*/
export function createChainedFunction (...funcs) {
export function createChainedFunction(...funcs) {
return funcs.reduce(

@@ -13,3 +13,3 @@ (acc, func) => {

return function chainedFunction (...args) {
return function chainedFunction(...args) {
acc.apply(this, args)

@@ -16,0 +16,0 @@ func.apply(this, args)

2

src/generators.js

@@ -1,2 +0,2 @@

export function useId (size = 3) {
export function useId(size = 3) {
let uuid = ''

@@ -3,0 +3,0 @@ const dictionary = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'

6

src/icons.js

@@ -14,4 +14,4 @@ import { merge } from 'lodash-es'

: iconObject.prefix.startsWith('fe')
? content
: svg,
? content
: svg,
viewBox: `0 0 ${w} ${h}`,

@@ -27,3 +27,3 @@ attrs

const result = Object.values(iconSet)
.map(value => parseIcon(value))
.map((value) => parseIcon(value))
.reduce((target, source) => merge(target, source), {})

@@ -30,0 +30,0 @@

22

src/logger.js
export default class Logger {
constructor (options) {
constructor(options) {
this.isDebug = false

@@ -10,5 +10,3 @@

this.debug = (...payload) => {
const log = payload.length > 1
? payload
: payload[0]
const log = payload.length > 1 ? payload : payload[0]
console.log && console.log(log)

@@ -22,5 +20,3 @@ }

this.error = (...payload) => {
const log = payload.length > 1
? payload
: payload[0]
const log = payload.length > 1 ? payload : payload[0]
console.error && console.error(log)

@@ -34,5 +30,3 @@ }

this.warn = (...payload) => {
const log = payload.length > 1
? payload
: payload[0]
const log = payload.length > 1 ? payload : payload[0]
console.warn && console.warn(log)

@@ -46,5 +40,3 @@ }

this.info = (...payload) => {
const log = payload.length > 1
? payload
: payload[0]
const log = payload.length > 1 ? payload : payload[0]
console.info && console.info(log)

@@ -58,5 +50,3 @@ }

this.success = (...payload) => {
const log = payload.length > 1
? payload
: payload[0]
const log = payload.length > 1 ? payload : payload[0]
console.info && console.info(log)

@@ -63,0 +53,0 @@ }

14

src/object.js

@@ -10,3 +10,3 @@ import { pickBy, startsWith } from 'lodash-es'

*/
export function pickProperty (props) {
export function pickProperty(props) {
const pure = {}

@@ -26,3 +26,3 @@ for (const prop in props) {

*/
export function filterPseudo (props) {
export function filterPseudo(props) {
const pseudos = pickBy(props, (_value, key) => {

@@ -39,3 +39,3 @@ return startsWith(key, '_')

*/
export function filterBaseStyles (props) {
export function filterBaseStyles(props) {
const pseudos = pickBy(props, (_value, key) => {

@@ -47,3 +47,3 @@ return !startsWith(key, '_')

export function extractPixelAttrs (attrs) {
export function extractPixelAttrs(attrs) {
const styleAttrs = {}

@@ -68,3 +68,3 @@ const nativeAttrs = {}

*/
export function isNonNullObject (value) {
export function isNonNullObject(value) {
return typeof value === 'object' && value !== null

@@ -84,3 +84,3 @@ }

*/
export function isEmpty (object) {
export function isEmpty(object) {
for (const key in object) {

@@ -100,3 +100,3 @@ // Should iterate only once

*/
export function splitProps (props) {
export function splitProps(props) {
const baseStyles = {}

@@ -103,0 +103,0 @@ const pseudoStyles = {}

19

src/playground.storiesx.js

@@ -19,8 +19,7 @@ /* eslint import/namespace: [2, { allowComputed: true }] */

storiesOf('Playground', module)
.add('New', () => ({
components: {
CodeBlock: MDXCodeBlock({ live: true, lang: 'vue', className: 'lang-vue' })
},
template: `
storiesOf('Playground', module).add('New', () => ({
components: {
CodeBlock: MDXCodeBlock({ live: true, lang: 'vue', className: 'lang-vue' })
},
template: `
<c-box max-w="500px" h="100vh" mt="200px">

@@ -33,4 +32,4 @@ <h2 v-pixel font-weight="bold" font-size="xl">Pixel UI Vue Playground ⚡️</h2>

`,
data: () => ({
code: `
data: () => ({
code: `
<c-stack should-wrap-children>

@@ -53,3 +52,3 @@ <c-tooltip has-arrow label="left" placement="left">

</c-stack>`
})
}))
})
}))

20

src/strings.js

@@ -6,3 +6,3 @@ /**

*/
export function getSubstringAfterChar (string, char) {
export function getSubstringAfterChar(string, char) {
return string.slice(string.indexOf(char) + 1)

@@ -16,3 +16,3 @@ }

*/
export function getSubstringBeforeChar (string, char) {
export function getSubstringBeforeChar(string, char) {
return string.slice(0, string.indexOf(char))

@@ -25,8 +25,10 @@ }

*/
export function kebabify (text) {
return text &&
text
.match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g)
.map(x => x.toLowerCase())
.join('-')
export function kebabify(text) {
return (
text &&
text
.match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g)
.map((x) => x.toLowerCase())
.join('-')
)
}

@@ -38,3 +40,3 @@

*/
export function camelize (string) {
export function camelize(string) {
return string.replace(/[.-](\w|$)/g, function (_, x) {

@@ -41,0 +43,0 @@ return x.toUpperCase()

4

src/styled-system.js

@@ -6,7 +6,5 @@ import { css } from '@mekari/pixel-styled-system'

return (
keys.reduce((res, key) => res && res[key], obj) || def
)
return keys.reduce((res, key) => res && res[key], obj) || def
}
export const composeSystem = (props = {}, theme = {}) => css(props)(theme)

4

src/transform.js

@@ -8,3 +8,3 @@ /**

*/
export function valueToPercent (value, min, max) {
export function valueToPercent(value, min, max) {
return ((value - min) * 100) / (max - min)

@@ -20,4 +20,4 @@ }

*/
export function percentToValue (percent, min, max) {
export function percentToValue(percent, min, max) {
return (max - min) * percent + min
}

4

src/validators.js

@@ -6,3 +6,3 @@ /**

*/
export function isUndef (v) {
export function isUndef(v) {
return v === undefined || v === null

@@ -16,4 +16,4 @@ }

*/
export function isDef (v) {
export function isDef(v) {
return v !== undefined && v !== null
}

49

src/vdom.js

@@ -9,4 +9,5 @@ import { isDef } from './validators'

*/
export function cloneVNode (vnode, createElement) {
const clonedChildren = vnode.children && vnode.children.map(vnode => cloneVNode(vnode, createElement))
export function cloneVNode(vnode, createElement) {
const clonedChildren =
vnode.children && vnode.children.map((vnode) => cloneVNode(vnode, createElement))
const cloned = createElement(vnode.tag, vnode.data, clonedChildren)

@@ -33,4 +34,4 @@ cloned.text = vnode.text

*/
export function cloneVNodes (vnodes, createElement) {
const clonedVNodes = vnodes.map(vnode => cloneVNode(vnode, createElement))
export function cloneVNodes(vnodes, createElement) {
const clonedVNodes = vnodes.map((vnode) => cloneVNode(vnode, createElement))
return clonedVNodes

@@ -45,18 +46,22 @@ }

*/
export function cloneVNodeElement (vnode, { props, attrs, children, ...rest }, h) {
export function cloneVNodeElement(vnode, { props, attrs, children, ...rest }, h) {
const cloned = cloneVNode(vnode, h)
return h(cloned.componentOptions.Ctor, {
...cloned.data,
...(cloned.componentOptions.listeners || {}),
props: {
...(cloned.data.props || {}),
...cloned.componentOptions.propsData,
...props
return h(
cloned.componentOptions.Ctor,
{
...cloned.data,
...(cloned.componentOptions.listeners || {}),
props: {
...(cloned.data.props || {}),
...cloned.componentOptions.propsData,
...props
},
attrs: {
...(cloned.data.attrs || {}),
...attrs
},
...rest
},
attrs: {
...(cloned.data.attrs || {}),
...attrs
},
...rest
}, cloned.componentOptions.children || children)
cloned.componentOptions.children || children
)
}

@@ -69,3 +74,3 @@

*/
function isAsyncPlaceholder (node) {
function isAsyncPlaceholder(node) {
return node.isComment && node.asyncFactory

@@ -79,3 +84,3 @@ }

*/
export function getFirstComponentChild (children) {
export function getFirstComponentChild(children) {
if (Array.isArray(children)) {

@@ -96,5 +101,5 @@ for (let i = 0; i < children.length; i++) {

*/
export function cleanChildren (vnodes) {
export function cleanChildren(vnodes) {
if (!vnodes) return []
return vnodes.filter(vnode => vnode.tag)
return vnodes.filter((vnode) => vnode.tag)
}

@@ -101,0 +106,0 @@

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc