@strapi/plugin-color-picker 0.0.0-next.d65d44102fd32871728c0d74ec4f2519b7cc0a16 → 0.0.0-next.d6ed4fcf2c833656b8c91a90909c1e77c79379e5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColorPickerInput-B07RliGP.js","sources":["../../admin/src/components/ColorPickerInput.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n Button,\n Box,\n Field,\n Flex,\n Popover,\n Typography,\n useComposedRefs,\n} from '@strapi/design-system';\nimport { CaretDown } from '@strapi/icons';\nimport { useField, type InputProps, type FieldValue } from '@strapi/strapi/admin';\nimport { HexColorPicker } from 'react-colorful';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { getTrad } from '../utils/getTrad';\n\nconst ColorPreview = styled.div`\n border-radius: 50%;\n width: 20px;\n height: 20px;\n margin-right: 10px;\n background-color: ${(props) => props.color};\n border: 1px solid rgba(0, 0, 0, 0.1);\n`;\n\nconst ColorPicker = styled(HexColorPicker)`\n && {\n width: 100%;\n aspect-ratio: 1.5;\n }\n\n .react-colorful__pointer {\n width: ${({ theme }) => theme.spaces[3]};\n height: ${({ theme }) => theme.spaces[3]};\n }\n\n .react-colorful__saturation {\n border-radius: ${({ theme }) => theme.spaces[1]};\n border-bottom: none;\n }\n\n .react-colorful__hue {\n border-radius: 10px;\n height: ${({ theme }) => theme.spaces[3]};\n margin-top: ${({ theme }) => theme.spaces[2]};\n }\n`;\n\nconst ColorPickerToggle = styled(Button)`\n & > span {\n display: flex;\n justify-content: space-between;\n align-items: center;\n width: 100%;\n }\n\n svg {\n width: ${({ theme }) => theme.spaces[2]};\n height: ${({ theme }) => theme.spaces[2]};\n }\n\n svg > path {\n fill: ${({ theme }) => theme.colors.neutral500};\n justify-self: flex-end;\n }\n`;\n\nconst ColorPickerPopover = styled(Popover.Content)`\n padding: ${({ theme }) => theme.spaces[2]};\n min-height: 270px;\n`;\n\ntype ColorPickerInputProps = InputProps &\n FieldValue & {\n labelAction?: React.ReactNode;\n };\n\nexport const ColorPickerInput = React.forwardRef<HTMLButtonElement, ColorPickerInputProps>(\n (\n { hint, disabled = false, labelAction, label, name, required = false, onChange, value, error },\n forwardedRef\n ) => {\n const [showColorPicker, setShowColorPicker] = React.useState(false);\n const colorPickerButtonRef = React.useRef<HTMLButtonElement>(null!);\n const { formatMessage } = useIntl();\n const color = value || '#000000';\n\n const composedRefs = useComposedRefs(forwardedRef, colorPickerButtonRef);\n\n return (\n <Field.Root name={name} id={name} error={error} hint={hint} required={required}>\n <Flex direction=\"column\" alignItems=\"stretch\" gap={1}>\n <Field.Label action={labelAction}>{label}</Field.Label>\n <Popover.Root onOpenChange={setShowColorPicker}>\n <Popover.Trigger>\n <ColorPickerToggle\n ref={composedRefs}\n aria-label={formatMessage({\n id: getTrad('color-picker.toggle.aria-label'),\n defaultMessage: 'Color picker toggle',\n })}\n aria-controls=\"color-picker-value\"\n aria-haspopup=\"dialog\"\n aria-expanded={showColorPicker}\n aria-disabled={disabled}\n disabled={disabled}\n variant=\"tertiary\"\n size=\"L\"\n >\n <Flex>\n <ColorPreview color={color} />\n <Typography\n style={{ textTransform: 'uppercase' }}\n textColor={value ? undefined : 'neutral600'}\n variant=\"omega\"\n >\n {color}\n </Typography>\n </Flex>\n <CaretDown aria-hidden />\n </ColorPickerToggle>\n </Popover.Trigger>\n <ColorPickerPopover sideOffset={4}>\n <ColorPicker color={color} onChange={(hexValue) => onChange(name, hexValue)} />\n <Flex paddingTop={3} paddingLeft={4} justifyContent=\"flex-end\">\n <Box paddingRight={2}>\n <Typography variant=\"omega\" tag=\"label\" textColor=\"neutral600\">\n {formatMessage({\n id: getTrad('color-picker.input.format'),\n defaultMessage: 'HEX',\n })}\n </Typography>\n </Box>\n <Field.Root>\n <Field.Input\n aria-label={formatMessage({\n id: getTrad('color-picker.input.aria-label'),\n defaultMessage: 'Color picker input',\n })}\n style={{ textTransform: 'uppercase' }}\n value={value}\n placeholder=\"#000000\"\n onChange={onChange}\n />\n </Field.Root>\n </Flex>\n </ColorPickerPopover>\n </Popover.Root>\n <Field.Hint />\n <Field.Error />\n </Flex>\n </Field.Root>\n );\n }\n);\n"],"names":["styled","HexColorPicker","Button","Popover","React","useIntl","useComposedRefs","Field","Flex","jsx","jsxs","getTrad","Typography","CaretDown","Box"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBA,MAAM,eAAeA,iBAAO,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAKN,CAAC,UAAU,MAAM,KAAK;AAAA;AAAA;AAI5C,MAAM,cAAcA,
|
|
1
|
+
{"version":3,"file":"ColorPickerInput-B07RliGP.js","sources":["../../admin/src/components/ColorPickerInput.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n Button,\n Box,\n Field,\n Flex,\n Popover,\n Typography,\n useComposedRefs,\n} from '@strapi/design-system';\nimport { CaretDown } from '@strapi/icons';\nimport { useField, type InputProps, type FieldValue } from '@strapi/strapi/admin';\nimport { HexColorPicker } from 'react-colorful';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { getTrad } from '../utils/getTrad';\n\nconst ColorPreview = styled.div`\n border-radius: 50%;\n width: 20px;\n height: 20px;\n margin-right: 10px;\n background-color: ${(props) => props.color};\n border: 1px solid rgba(0, 0, 0, 0.1);\n`;\n\nconst ColorPicker = styled(HexColorPicker)`\n && {\n width: 100%;\n aspect-ratio: 1.5;\n }\n\n .react-colorful__pointer {\n width: ${({ theme }) => theme.spaces[3]};\n height: ${({ theme }) => theme.spaces[3]};\n }\n\n .react-colorful__saturation {\n border-radius: ${({ theme }) => theme.spaces[1]};\n border-bottom: none;\n }\n\n .react-colorful__hue {\n border-radius: 10px;\n height: ${({ theme }) => theme.spaces[3]};\n margin-top: ${({ theme }) => theme.spaces[2]};\n }\n`;\n\nconst ColorPickerToggle = styled(Button)`\n & > span {\n display: flex;\n justify-content: space-between;\n align-items: center;\n width: 100%;\n }\n\n svg {\n width: ${({ theme }) => theme.spaces[2]};\n height: ${({ theme }) => theme.spaces[2]};\n }\n\n svg > path {\n fill: ${({ theme }) => theme.colors.neutral500};\n justify-self: flex-end;\n }\n`;\n\nconst ColorPickerPopover = styled(Popover.Content)`\n padding: ${({ theme }) => theme.spaces[2]};\n min-height: 270px;\n`;\n\ntype ColorPickerInputProps = InputProps &\n FieldValue & {\n labelAction?: React.ReactNode;\n };\n\nexport const ColorPickerInput = React.forwardRef<HTMLButtonElement, ColorPickerInputProps>(\n (\n { hint, disabled = false, labelAction, label, name, required = false, onChange, value, error },\n forwardedRef\n ) => {\n const [showColorPicker, setShowColorPicker] = React.useState(false);\n const colorPickerButtonRef = React.useRef<HTMLButtonElement>(null!);\n const { formatMessage } = useIntl();\n const color = value || '#000000';\n\n const composedRefs = useComposedRefs(forwardedRef, colorPickerButtonRef);\n\n return (\n <Field.Root name={name} id={name} error={error} hint={hint} required={required}>\n <Flex direction=\"column\" alignItems=\"stretch\" gap={1}>\n <Field.Label action={labelAction}>{label}</Field.Label>\n <Popover.Root onOpenChange={setShowColorPicker}>\n <Popover.Trigger>\n <ColorPickerToggle\n ref={composedRefs}\n aria-label={formatMessage({\n id: getTrad('color-picker.toggle.aria-label'),\n defaultMessage: 'Color picker toggle',\n })}\n aria-controls=\"color-picker-value\"\n aria-haspopup=\"dialog\"\n aria-expanded={showColorPicker}\n aria-disabled={disabled}\n disabled={disabled}\n variant=\"tertiary\"\n size=\"L\"\n >\n <Flex>\n <ColorPreview color={color} />\n <Typography\n style={{ textTransform: 'uppercase' }}\n textColor={value ? undefined : 'neutral600'}\n variant=\"omega\"\n >\n {color}\n </Typography>\n </Flex>\n <CaretDown aria-hidden />\n </ColorPickerToggle>\n </Popover.Trigger>\n <ColorPickerPopover sideOffset={4}>\n <ColorPicker color={color} onChange={(hexValue) => onChange(name, hexValue)} />\n <Flex paddingTop={3} paddingLeft={4} justifyContent=\"flex-end\">\n <Box paddingRight={2}>\n <Typography variant=\"omega\" tag=\"label\" textColor=\"neutral600\">\n {formatMessage({\n id: getTrad('color-picker.input.format'),\n defaultMessage: 'HEX',\n })}\n </Typography>\n </Box>\n <Field.Root>\n <Field.Input\n aria-label={formatMessage({\n id: getTrad('color-picker.input.aria-label'),\n defaultMessage: 'Color picker input',\n })}\n style={{ textTransform: 'uppercase' }}\n value={value}\n placeholder=\"#000000\"\n onChange={onChange}\n />\n </Field.Root>\n </Flex>\n </ColorPickerPopover>\n </Popover.Root>\n <Field.Hint />\n <Field.Error />\n </Flex>\n </Field.Root>\n );\n }\n);\n"],"names":["styled","HexColorPicker","Button","Popover","React","useIntl","useComposedRefs","Field","Flex","jsx","jsxs","getTrad","Typography","CaretDown","Box"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColorPickerInput-CMg-0_-G.mjs","sources":["../../admin/src/components/ColorPickerInput.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n Button,\n Box,\n Field,\n Flex,\n Popover,\n Typography,\n useComposedRefs,\n} from '@strapi/design-system';\nimport { CaretDown } from '@strapi/icons';\nimport { useField, type InputProps, type FieldValue } from '@strapi/strapi/admin';\nimport { HexColorPicker } from 'react-colorful';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { getTrad } from '../utils/getTrad';\n\nconst ColorPreview = styled.div`\n border-radius: 50%;\n width: 20px;\n height: 20px;\n margin-right: 10px;\n background-color: ${(props) => props.color};\n border: 1px solid rgba(0, 0, 0, 0.1);\n`;\n\nconst ColorPicker = styled(HexColorPicker)`\n && {\n width: 100%;\n aspect-ratio: 1.5;\n }\n\n .react-colorful__pointer {\n width: ${({ theme }) => theme.spaces[3]};\n height: ${({ theme }) => theme.spaces[3]};\n }\n\n .react-colorful__saturation {\n border-radius: ${({ theme }) => theme.spaces[1]};\n border-bottom: none;\n }\n\n .react-colorful__hue {\n border-radius: 10px;\n height: ${({ theme }) => theme.spaces[3]};\n margin-top: ${({ theme }) => theme.spaces[2]};\n }\n`;\n\nconst ColorPickerToggle = styled(Button)`\n & > span {\n display: flex;\n justify-content: space-between;\n align-items: center;\n width: 100%;\n }\n\n svg {\n width: ${({ theme }) => theme.spaces[2]};\n height: ${({ theme }) => theme.spaces[2]};\n }\n\n svg > path {\n fill: ${({ theme }) => theme.colors.neutral500};\n justify-self: flex-end;\n }\n`;\n\nconst ColorPickerPopover = styled(Popover.Content)`\n padding: ${({ theme }) => theme.spaces[2]};\n min-height: 270px;\n`;\n\ntype ColorPickerInputProps = InputProps &\n FieldValue & {\n labelAction?: React.ReactNode;\n };\n\nexport const ColorPickerInput = React.forwardRef<HTMLButtonElement, ColorPickerInputProps>(\n (\n { hint, disabled = false, labelAction, label, name, required = false, onChange, value, error },\n forwardedRef\n ) => {\n const [showColorPicker, setShowColorPicker] = React.useState(false);\n const colorPickerButtonRef = React.useRef<HTMLButtonElement>(null!);\n const { formatMessage } = useIntl();\n const color = value || '#000000';\n\n const composedRefs = useComposedRefs(forwardedRef, colorPickerButtonRef);\n\n return (\n <Field.Root name={name} id={name} error={error} hint={hint} required={required}>\n <Flex direction=\"column\" alignItems=\"stretch\" gap={1}>\n <Field.Label action={labelAction}>{label}</Field.Label>\n <Popover.Root onOpenChange={setShowColorPicker}>\n <Popover.Trigger>\n <ColorPickerToggle\n ref={composedRefs}\n aria-label={formatMessage({\n id: getTrad('color-picker.toggle.aria-label'),\n defaultMessage: 'Color picker toggle',\n })}\n aria-controls=\"color-picker-value\"\n aria-haspopup=\"dialog\"\n aria-expanded={showColorPicker}\n aria-disabled={disabled}\n disabled={disabled}\n variant=\"tertiary\"\n size=\"L\"\n >\n <Flex>\n <ColorPreview color={color} />\n <Typography\n style={{ textTransform: 'uppercase' }}\n textColor={value ? undefined : 'neutral600'}\n variant=\"omega\"\n >\n {color}\n </Typography>\n </Flex>\n <CaretDown aria-hidden />\n </ColorPickerToggle>\n </Popover.Trigger>\n <ColorPickerPopover sideOffset={4}>\n <ColorPicker color={color} onChange={(hexValue) => onChange(name, hexValue)} />\n <Flex paddingTop={3} paddingLeft={4} justifyContent=\"flex-end\">\n <Box paddingRight={2}>\n <Typography variant=\"omega\" tag=\"label\" textColor=\"neutral600\">\n {formatMessage({\n id: getTrad('color-picker.input.format'),\n defaultMessage: 'HEX',\n })}\n </Typography>\n </Box>\n <Field.Root>\n <Field.Input\n aria-label={formatMessage({\n id: getTrad('color-picker.input.aria-label'),\n defaultMessage: 'Color picker input',\n })}\n style={{ textTransform: 'uppercase' }}\n value={value}\n placeholder=\"#000000\"\n onChange={onChange}\n />\n </Field.Root>\n </Flex>\n </ColorPickerPopover>\n </Popover.Root>\n <Field.Hint />\n <Field.Error />\n </Flex>\n </Field.Root>\n );\n }\n);\n"],"names":[],"mappings":";;;;;;;;AAmBA,MAAM,eAAe,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,sBAKN,CAAC,UAAU,MAAM,KAAK;AAAA;AAAA;AAI5C,MAAM,cAAc,OAAO,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAO5B,CAAC,EAAE,YAAY,MAAM,OAAO,CAAC,CAAC;AAAA,cAC7B,CAAC,EAAE,YAAY,MAAM,OAAO,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA,qBAIvB,CAAC,EAAE,YAAY,MAAM,OAAO,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAMrC,CAAC,EAAE,YAAY,MAAM,OAAO,CAAC,CAAC;AAAA,kBAC1B,CAAC,EAAE,YAAY,MAAM,OAAO,CAAC,CAAC;AAAA;AAAA;AAIhD,MAAM,oBAAoB,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAS1B,CAAC,EAAE,YAAY,MAAM,OAAO,CAAC,CAAC;AAAA,cAC7B,CAAC,EAAE,YAAY,MAAM,OAAO,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA,YAIhC,CAAC,EAAE,MAAA,MAAY,MAAM,OAAO,UAAU;AAAA;AAAA;AAAA;AAKlD,MAAM,qBAAqB,OAAO,QAAQ,OAAO;AAAA,aACpC,CAAC,EAAE,YAAY,MAAM,OAAO,CAAC,CAAC;AAAA;AAAA;AASpC,MAAM,mBAAmB,MAAM;AAAA,EACpC,CACE,EAAE,MAAM,WAAW,OAAO,aAAa,OAAO,MAAM,WAAW,OAAO,UAAU,OAAO,MAAA,GACvF,iBACG;AACH,UAAM,CAAC,iBAAiB,kBAAkB,IAAI,MAAM,SAAS,KAAK;AAC5D,UAAA,uBAAuB,MAAM,OAA0B,IAAK;AAC5D,UAAA,EAAE,
|
|
1
|
+
{"version":3,"file":"ColorPickerInput-CMg-0_-G.mjs","sources":["../../admin/src/components/ColorPickerInput.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n Button,\n Box,\n Field,\n Flex,\n Popover,\n Typography,\n useComposedRefs,\n} from '@strapi/design-system';\nimport { CaretDown } from '@strapi/icons';\nimport { useField, type InputProps, type FieldValue } from '@strapi/strapi/admin';\nimport { HexColorPicker } from 'react-colorful';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { getTrad } from '../utils/getTrad';\n\nconst ColorPreview = styled.div`\n border-radius: 50%;\n width: 20px;\n height: 20px;\n margin-right: 10px;\n background-color: ${(props) => props.color};\n border: 1px solid rgba(0, 0, 0, 0.1);\n`;\n\nconst ColorPicker = styled(HexColorPicker)`\n && {\n width: 100%;\n aspect-ratio: 1.5;\n }\n\n .react-colorful__pointer {\n width: ${({ theme }) => theme.spaces[3]};\n height: ${({ theme }) => theme.spaces[3]};\n }\n\n .react-colorful__saturation {\n border-radius: ${({ theme }) => theme.spaces[1]};\n border-bottom: none;\n }\n\n .react-colorful__hue {\n border-radius: 10px;\n height: ${({ theme }) => theme.spaces[3]};\n margin-top: ${({ theme }) => theme.spaces[2]};\n }\n`;\n\nconst ColorPickerToggle = styled(Button)`\n & > span {\n display: flex;\n justify-content: space-between;\n align-items: center;\n width: 100%;\n }\n\n svg {\n width: ${({ theme }) => theme.spaces[2]};\n height: ${({ theme }) => theme.spaces[2]};\n }\n\n svg > path {\n fill: ${({ theme }) => theme.colors.neutral500};\n justify-self: flex-end;\n }\n`;\n\nconst ColorPickerPopover = styled(Popover.Content)`\n padding: ${({ theme }) => theme.spaces[2]};\n min-height: 270px;\n`;\n\ntype ColorPickerInputProps = InputProps &\n FieldValue & {\n labelAction?: React.ReactNode;\n };\n\nexport const ColorPickerInput = React.forwardRef<HTMLButtonElement, ColorPickerInputProps>(\n (\n { hint, disabled = false, labelAction, label, name, required = false, onChange, value, error },\n forwardedRef\n ) => {\n const [showColorPicker, setShowColorPicker] = React.useState(false);\n const colorPickerButtonRef = React.useRef<HTMLButtonElement>(null!);\n const { formatMessage } = useIntl();\n const color = value || '#000000';\n\n const composedRefs = useComposedRefs(forwardedRef, colorPickerButtonRef);\n\n return (\n <Field.Root name={name} id={name} error={error} hint={hint} required={required}>\n <Flex direction=\"column\" alignItems=\"stretch\" gap={1}>\n <Field.Label action={labelAction}>{label}</Field.Label>\n <Popover.Root onOpenChange={setShowColorPicker}>\n <Popover.Trigger>\n <ColorPickerToggle\n ref={composedRefs}\n aria-label={formatMessage({\n id: getTrad('color-picker.toggle.aria-label'),\n defaultMessage: 'Color picker toggle',\n })}\n aria-controls=\"color-picker-value\"\n aria-haspopup=\"dialog\"\n aria-expanded={showColorPicker}\n aria-disabled={disabled}\n disabled={disabled}\n variant=\"tertiary\"\n size=\"L\"\n >\n <Flex>\n <ColorPreview color={color} />\n <Typography\n style={{ textTransform: 'uppercase' }}\n textColor={value ? undefined : 'neutral600'}\n variant=\"omega\"\n >\n {color}\n </Typography>\n </Flex>\n <CaretDown aria-hidden />\n </ColorPickerToggle>\n </Popover.Trigger>\n <ColorPickerPopover sideOffset={4}>\n <ColorPicker color={color} onChange={(hexValue) => onChange(name, hexValue)} />\n <Flex paddingTop={3} paddingLeft={4} justifyContent=\"flex-end\">\n <Box paddingRight={2}>\n <Typography variant=\"omega\" tag=\"label\" textColor=\"neutral600\">\n {formatMessage({\n id: getTrad('color-picker.input.format'),\n defaultMessage: 'HEX',\n })}\n </Typography>\n </Box>\n <Field.Root>\n <Field.Input\n aria-label={formatMessage({\n id: getTrad('color-picker.input.aria-label'),\n defaultMessage: 'Color picker input',\n })}\n style={{ textTransform: 'uppercase' }}\n value={value}\n placeholder=\"#000000\"\n onChange={onChange}\n />\n </Field.Root>\n </Flex>\n </ColorPickerPopover>\n </Popover.Root>\n <Field.Hint />\n <Field.Error />\n </Flex>\n </Field.Root>\n );\n }\n);\n"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index-B9LkgZbo.mjs","sources":["../../admin/src/components/ColorPickerIcon.tsx","../../admin/src/pluginId.ts","../../admin/src/utils/getTrad.ts","../../admin/src/utils/prefixPluginTranslations.ts","../../admin/src/index.ts"],"sourcesContent":["import { Flex } from '@strapi/design-system';\nimport { PaintBrush } from '@strapi/icons';\nimport { styled } from 'styled-components';\n\nconst IconBox = styled(Flex)`\n /* Hard code color values */\n /* to stay consistent between themes */\n background-color: #f0f0ff; /* primary100 */\n border: 1px solid #d9d8ff; /* primary200 */\n\n svg > path {\n fill: #4945ff; /* primary600 */\n }\n`;\n\nexport const ColorPickerIcon = () => {\n return (\n <IconBox justifyContent=\"center\" alignItems=\"center\" width={7} height={6} hasRadius aria-hidden>\n <PaintBrush />\n </IconBox>\n );\n};\n","export const pluginId = 'color-picker';\n","import { pluginId } from '../pluginId';\n\nexport const getTrad = (id: string) => `${pluginId}.${id}`;\n","type TradOptions = Record<string, string>;\n\nconst prefixPluginTranslations = (trad: TradOptions, pluginId: string): TradOptions => {\n if (!pluginId) {\n throw new TypeError(\"pluginId can't be empty\");\n }\n return Object.keys(trad).reduce((acc, current) => {\n acc[`${pluginId}.${current}`] = trad[current];\n return acc;\n }, {} as TradOptions);\n};\n\nexport { prefixPluginTranslations };\n","import { ColorPickerIcon } from './components/ColorPickerIcon';\nimport { pluginId } from './pluginId';\nimport { getTrad } from './utils/getTrad';\nimport { prefixPluginTranslations } from './utils/prefixPluginTranslations';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n /**\n * TODO: we need to have the type for StrapiApp done from `@strapi/admin` package.\n */\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n register(app: any) {\n app.customFields.register({\n name: 'color',\n pluginId: 'color-picker',\n type: 'string',\n icon: ColorPickerIcon,\n intlLabel: {\n id: getTrad('color-picker.label'),\n defaultMessage: 'Color',\n },\n intlDescription: {\n id: getTrad('color-picker.description'),\n defaultMessage: 'Select any color',\n },\n components: {\n Input: async () =>\n import('./components/ColorPickerInput').then((module) => ({\n default: module.ColorPickerInput,\n })),\n },\n options: {\n advanced: [\n {\n intlLabel: {\n id: getTrad('color-picker.options.advanced.regex'),\n defaultMessage: 'RegExp pattern',\n },\n name: 'regex',\n type: 'text',\n defaultValue: '^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$',\n description: {\n id: getTrad('color-picker.options.advanced.regex.description'),\n defaultMessage: 'The text of the regular expression',\n },\n },\n {\n sectionTitle: {\n id: 'global.settings',\n defaultMessage: 'Settings',\n },\n items: [\n {\n name: 'required',\n type: 'checkbox',\n intlLabel: {\n id: getTrad('color-picker.options.advanced.requiredField'),\n defaultMessage: 'Required field',\n },\n description: {\n id: getTrad('color-picker.options.advanced.requiredField.description'),\n defaultMessage: \"You won't be able to create an entry if this field is empty\",\n },\n },\n ],\n },\n ],\n },\n });\n },\n async registerTrads({ locales }: { locales: string[] }) {\n const importedTrads = await Promise.all(\n locales.map((locale) => {\n return import(`./translations/${locale}.json`)\n .then(({ default: data }) => {\n return {\n data: prefixPluginTranslations(data, pluginId),\n locale,\n };\n })\n .catch(() => {\n return {\n data: {},\n locale,\n };\n });\n })\n );\n\n return Promise.resolve(importedTrads);\n },\n};\n"],"names":["pluginId"],"mappings":";;;;;;;;;;;;;AAIA,MAAM,UAAU,OAAO,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWpB,MAAM,kBAAkB,MAAM;AACnC,6BACG,SAAQ,EAAA,gBAAe,UAAS,YAAW,UAAS,OAAO,GAAG,QAAQ,GAAG,WAAS,MAAC,eAAW,MAC7F,UAAA,oBAAC,
|
|
1
|
+
{"version":3,"file":"index-B9LkgZbo.mjs","sources":["../../admin/src/components/ColorPickerIcon.tsx","../../admin/src/pluginId.ts","../../admin/src/utils/getTrad.ts","../../admin/src/utils/prefixPluginTranslations.ts","../../admin/src/index.ts"],"sourcesContent":["import { Flex } from '@strapi/design-system';\nimport { PaintBrush } from '@strapi/icons';\nimport { styled } from 'styled-components';\n\nconst IconBox = styled(Flex)`\n /* Hard code color values */\n /* to stay consistent between themes */\n background-color: #f0f0ff; /* primary100 */\n border: 1px solid #d9d8ff; /* primary200 */\n\n svg > path {\n fill: #4945ff; /* primary600 */\n }\n`;\n\nexport const ColorPickerIcon = () => {\n return (\n <IconBox justifyContent=\"center\" alignItems=\"center\" width={7} height={6} hasRadius aria-hidden>\n <PaintBrush />\n </IconBox>\n );\n};\n","export const pluginId = 'color-picker';\n","import { pluginId } from '../pluginId';\n\nexport const getTrad = (id: string) => `${pluginId}.${id}`;\n","type TradOptions = Record<string, string>;\n\nconst prefixPluginTranslations = (trad: TradOptions, pluginId: string): TradOptions => {\n if (!pluginId) {\n throw new TypeError(\"pluginId can't be empty\");\n }\n return Object.keys(trad).reduce((acc, current) => {\n acc[`${pluginId}.${current}`] = trad[current];\n return acc;\n }, {} as TradOptions);\n};\n\nexport { prefixPluginTranslations };\n","import { ColorPickerIcon } from './components/ColorPickerIcon';\nimport { pluginId } from './pluginId';\nimport { getTrad } from './utils/getTrad';\nimport { prefixPluginTranslations } from './utils/prefixPluginTranslations';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n /**\n * TODO: we need to have the type for StrapiApp done from `@strapi/admin` package.\n */\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n register(app: any) {\n app.customFields.register({\n name: 'color',\n pluginId: 'color-picker',\n type: 'string',\n icon: ColorPickerIcon,\n intlLabel: {\n id: getTrad('color-picker.label'),\n defaultMessage: 'Color',\n },\n intlDescription: {\n id: getTrad('color-picker.description'),\n defaultMessage: 'Select any color',\n },\n components: {\n Input: async () =>\n import('./components/ColorPickerInput').then((module) => ({\n default: module.ColorPickerInput,\n })),\n },\n options: {\n advanced: [\n {\n intlLabel: {\n id: getTrad('color-picker.options.advanced.regex'),\n defaultMessage: 'RegExp pattern',\n },\n name: 'regex',\n type: 'text',\n defaultValue: '^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$',\n description: {\n id: getTrad('color-picker.options.advanced.regex.description'),\n defaultMessage: 'The text of the regular expression',\n },\n },\n {\n sectionTitle: {\n id: 'global.settings',\n defaultMessage: 'Settings',\n },\n items: [\n {\n name: 'required',\n type: 'checkbox',\n intlLabel: {\n id: getTrad('color-picker.options.advanced.requiredField'),\n defaultMessage: 'Required field',\n },\n description: {\n id: getTrad('color-picker.options.advanced.requiredField.description'),\n defaultMessage: \"You won't be able to create an entry if this field is empty\",\n },\n },\n ],\n },\n ],\n },\n });\n },\n async registerTrads({ locales }: { locales: string[] }) {\n const importedTrads = await Promise.all(\n locales.map((locale) => {\n return import(`./translations/${locale}.json`)\n .then(({ default: data }) => {\n return {\n data: prefixPluginTranslations(data, pluginId),\n locale,\n };\n })\n .catch(() => {\n return {\n data: {},\n locale,\n };\n });\n })\n );\n\n return Promise.resolve(importedTrads);\n },\n};\n"],"names":["pluginId"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index-BeQLcDEb.js","sources":["../../admin/src/components/ColorPickerIcon.tsx","../../admin/src/pluginId.ts","../../admin/src/utils/getTrad.ts","../../admin/src/utils/prefixPluginTranslations.ts","../../admin/src/index.ts"],"sourcesContent":["import { Flex } from '@strapi/design-system';\nimport { PaintBrush } from '@strapi/icons';\nimport { styled } from 'styled-components';\n\nconst IconBox = styled(Flex)`\n /* Hard code color values */\n /* to stay consistent between themes */\n background-color: #f0f0ff; /* primary100 */\n border: 1px solid #d9d8ff; /* primary200 */\n\n svg > path {\n fill: #4945ff; /* primary600 */\n }\n`;\n\nexport const ColorPickerIcon = () => {\n return (\n <IconBox justifyContent=\"center\" alignItems=\"center\" width={7} height={6} hasRadius aria-hidden>\n <PaintBrush />\n </IconBox>\n );\n};\n","export const pluginId = 'color-picker';\n","import { pluginId } from '../pluginId';\n\nexport const getTrad = (id: string) => `${pluginId}.${id}`;\n","type TradOptions = Record<string, string>;\n\nconst prefixPluginTranslations = (trad: TradOptions, pluginId: string): TradOptions => {\n if (!pluginId) {\n throw new TypeError(\"pluginId can't be empty\");\n }\n return Object.keys(trad).reduce((acc, current) => {\n acc[`${pluginId}.${current}`] = trad[current];\n return acc;\n }, {} as TradOptions);\n};\n\nexport { prefixPluginTranslations };\n","import { ColorPickerIcon } from './components/ColorPickerIcon';\nimport { pluginId } from './pluginId';\nimport { getTrad } from './utils/getTrad';\nimport { prefixPluginTranslations } from './utils/prefixPluginTranslations';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n /**\n * TODO: we need to have the type for StrapiApp done from `@strapi/admin` package.\n */\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n register(app: any) {\n app.customFields.register({\n name: 'color',\n pluginId: 'color-picker',\n type: 'string',\n icon: ColorPickerIcon,\n intlLabel: {\n id: getTrad('color-picker.label'),\n defaultMessage: 'Color',\n },\n intlDescription: {\n id: getTrad('color-picker.description'),\n defaultMessage: 'Select any color',\n },\n components: {\n Input: async () =>\n import('./components/ColorPickerInput').then((module) => ({\n default: module.ColorPickerInput,\n })),\n },\n options: {\n advanced: [\n {\n intlLabel: {\n id: getTrad('color-picker.options.advanced.regex'),\n defaultMessage: 'RegExp pattern',\n },\n name: 'regex',\n type: 'text',\n defaultValue: '^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$',\n description: {\n id: getTrad('color-picker.options.advanced.regex.description'),\n defaultMessage: 'The text of the regular expression',\n },\n },\n {\n sectionTitle: {\n id: 'global.settings',\n defaultMessage: 'Settings',\n },\n items: [\n {\n name: 'required',\n type: 'checkbox',\n intlLabel: {\n id: getTrad('color-picker.options.advanced.requiredField'),\n defaultMessage: 'Required field',\n },\n description: {\n id: getTrad('color-picker.options.advanced.requiredField.description'),\n defaultMessage: \"You won't be able to create an entry if this field is empty\",\n },\n },\n ],\n },\n ],\n },\n });\n },\n async registerTrads({ locales }: { locales: string[] }) {\n const importedTrads = await Promise.all(\n locales.map((locale) => {\n return import(`./translations/${locale}.json`)\n .then(({ default: data }) => {\n return {\n data: prefixPluginTranslations(data, pluginId),\n locale,\n };\n })\n .catch(() => {\n return {\n data: {},\n locale,\n };\n });\n })\n );\n\n return Promise.resolve(importedTrads);\n },\n};\n"],"names":["styled","Flex","jsx","PaintBrush","pluginId","module"],"mappings":";;;;;;;;;;;;;;AAIA,MAAM,UAAUA,
|
|
1
|
+
{"version":3,"file":"index-BeQLcDEb.js","sources":["../../admin/src/components/ColorPickerIcon.tsx","../../admin/src/pluginId.ts","../../admin/src/utils/getTrad.ts","../../admin/src/utils/prefixPluginTranslations.ts","../../admin/src/index.ts"],"sourcesContent":["import { Flex } from '@strapi/design-system';\nimport { PaintBrush } from '@strapi/icons';\nimport { styled } from 'styled-components';\n\nconst IconBox = styled(Flex)`\n /* Hard code color values */\n /* to stay consistent between themes */\n background-color: #f0f0ff; /* primary100 */\n border: 1px solid #d9d8ff; /* primary200 */\n\n svg > path {\n fill: #4945ff; /* primary600 */\n }\n`;\n\nexport const ColorPickerIcon = () => {\n return (\n <IconBox justifyContent=\"center\" alignItems=\"center\" width={7} height={6} hasRadius aria-hidden>\n <PaintBrush />\n </IconBox>\n );\n};\n","export const pluginId = 'color-picker';\n","import { pluginId } from '../pluginId';\n\nexport const getTrad = (id: string) => `${pluginId}.${id}`;\n","type TradOptions = Record<string, string>;\n\nconst prefixPluginTranslations = (trad: TradOptions, pluginId: string): TradOptions => {\n if (!pluginId) {\n throw new TypeError(\"pluginId can't be empty\");\n }\n return Object.keys(trad).reduce((acc, current) => {\n acc[`${pluginId}.${current}`] = trad[current];\n return acc;\n }, {} as TradOptions);\n};\n\nexport { prefixPluginTranslations };\n","import { ColorPickerIcon } from './components/ColorPickerIcon';\nimport { pluginId } from './pluginId';\nimport { getTrad } from './utils/getTrad';\nimport { prefixPluginTranslations } from './utils/prefixPluginTranslations';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n /**\n * TODO: we need to have the type for StrapiApp done from `@strapi/admin` package.\n */\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n register(app: any) {\n app.customFields.register({\n name: 'color',\n pluginId: 'color-picker',\n type: 'string',\n icon: ColorPickerIcon,\n intlLabel: {\n id: getTrad('color-picker.label'),\n defaultMessage: 'Color',\n },\n intlDescription: {\n id: getTrad('color-picker.description'),\n defaultMessage: 'Select any color',\n },\n components: {\n Input: async () =>\n import('./components/ColorPickerInput').then((module) => ({\n default: module.ColorPickerInput,\n })),\n },\n options: {\n advanced: [\n {\n intlLabel: {\n id: getTrad('color-picker.options.advanced.regex'),\n defaultMessage: 'RegExp pattern',\n },\n name: 'regex',\n type: 'text',\n defaultValue: '^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$',\n description: {\n id: getTrad('color-picker.options.advanced.regex.description'),\n defaultMessage: 'The text of the regular expression',\n },\n },\n {\n sectionTitle: {\n id: 'global.settings',\n defaultMessage: 'Settings',\n },\n items: [\n {\n name: 'required',\n type: 'checkbox',\n intlLabel: {\n id: getTrad('color-picker.options.advanced.requiredField'),\n defaultMessage: 'Required field',\n },\n description: {\n id: getTrad('color-picker.options.advanced.requiredField.description'),\n defaultMessage: \"You won't be able to create an entry if this field is empty\",\n },\n },\n ],\n },\n ],\n },\n });\n },\n async registerTrads({ locales }: { locales: string[] }) {\n const importedTrads = await Promise.all(\n locales.map((locale) => {\n return import(`./translations/${locale}.json`)\n .then(({ default: data }) => {\n return {\n data: prefixPluginTranslations(data, pluginId),\n locale,\n };\n })\n .catch(() => {\n return {\n data: {},\n locale,\n };\n });\n })\n );\n\n return Promise.resolve(importedTrads);\n },\n};\n"],"names":["styled","Flex","jsx","PaintBrush","pluginId","module"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@strapi/plugin-color-picker",
|
|
3
|
-
"version": "0.0.0-next.
|
|
3
|
+
"version": "0.0.0-next.d6ed4fcf2c833656b8c91a90909c1e77c79379e5",
|
|
4
4
|
"description": "Strapi maintained Custom Fields",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -60,7 +60,7 @@
|
|
|
60
60
|
},
|
|
61
61
|
"devDependencies": {
|
|
62
62
|
"@strapi/sdk-plugin": "^5.0.0",
|
|
63
|
-
"@strapi/strapi": "0.0.0-next.
|
|
63
|
+
"@strapi/strapi": "0.0.0-next.d6ed4fcf2c833656b8c91a90909c1e77c79379e5",
|
|
64
64
|
"@testing-library/react": "15.0.7",
|
|
65
65
|
"@testing-library/user-event": "14.5.2",
|
|
66
66
|
"react": "18.3.1",
|
|
@@ -86,5 +86,5 @@
|
|
|
86
86
|
"kind": "plugin",
|
|
87
87
|
"displayName": "Color Picker"
|
|
88
88
|
},
|
|
89
|
-
"gitHead": "
|
|
89
|
+
"gitHead": "d6ed4fcf2c833656b8c91a90909c1e77c79379e5"
|
|
90
90
|
}
|