@strapi/plugin-color-picker 5.50.0 → 5.50.1
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.
- package/dist/admin/components/ColorPickerInput.js +2 -1
- package/dist/admin/components/ColorPickerInput.js.map +1 -1
- package/dist/admin/components/ColorPickerInput.mjs +2 -1
- package/dist/admin/components/ColorPickerInput.mjs.map +1 -1
- package/dist/admin/index.js +1 -0
- package/dist/admin/index.js.map +1 -1
- package/dist/admin/index.mjs +1 -0
- package/dist/admin/index.mjs.map +1 -1
- package/dist/admin/translations/pl.json.js +20 -0
- package/dist/admin/translations/pl.json.js.map +1 -0
- package/dist/admin/translations/pl.json.mjs +18 -0
- package/dist/admin/translations/pl.json.mjs.map +1 -0
- package/package.json +3 -3
|
@@ -91,6 +91,7 @@ const ColorPickerInput = /*#__PURE__*/ React__namespace.forwardRef(({ hint, disa
|
|
|
91
91
|
* The color that will show in the field. We can't presume to show black or something
|
|
92
92
|
* if no value is currently set (as `null` really corresponds to no color, not
|
|
93
93
|
* black), so default to empty string if nothing else is available. */ const color = field.value ?? props.placeholder ?? '';
|
|
94
|
+
const hasColor = field.value !== undefined && field.value !== null && field.value !== '';
|
|
94
95
|
const composedRefs = designSystem.useComposedRefs(forwardedRef, colorPickerButtonRef);
|
|
95
96
|
return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Field.Root, {
|
|
96
97
|
name: name,
|
|
@@ -134,7 +135,7 @@ const ColorPickerInput = /*#__PURE__*/ React__namespace.forwardRef(({ hint, disa
|
|
|
134
135
|
style: {
|
|
135
136
|
textTransform: 'uppercase'
|
|
136
137
|
},
|
|
137
|
-
textColor:
|
|
138
|
+
textColor: hasColor === true ? undefined : 'neutral500',
|
|
138
139
|
variant: "omega",
|
|
139
140
|
children: color
|
|
140
141
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColorPickerInput.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 { type InputProps, useField } 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 labelAction?: React.ReactNode;\n};\n\nexport const ColorPickerInput = React.forwardRef<HTMLButtonElement, ColorPickerInputProps>(\n ({ hint, disabled, labelAction, label, name, required, ...props }, forwardedRef) => {\n const [showColorPicker, setShowColorPicker] = React.useState(false);\n const colorPickerButtonRef = React.useRef<HTMLButtonElement>(null!);\n const { formatMessage } = useIntl();\n const field = useField(name);\n\n /**\n * The color that will show in the field. We can't presume to show black or something\n * if no value is currently set (as `null` really corresponds to no color, not\n * black), so default to empty string if nothing else is available. */\n const color = field.value ?? props.placeholder ?? '';\n\n const composedRefs = useComposedRefs(forwardedRef, colorPickerButtonRef);\n\n return (\n <Field.Root name={name} id={name} error={field.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={field.value ? undefined : 'neutral500'}\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) => field.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 name={name}\n // No default value. If nothing is selected, the input will be empty.\n defaultValue={field.value ?? ''}\n // Here we default to #000000 as the placeholder, because, absent a\n // user defined placeholder, we want to indicate the desired format.\n placeholder=\"#000000\"\n onChange={field.onChange}\n {...props}\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":["ColorPreview","styled","div","props","color","ColorPicker","HexColorPicker","theme","spaces","ColorPickerToggle","Button","colors","neutral500","ColorPickerPopover","Popover","Content","ColorPickerInput","React","forwardRef","hint","disabled","labelAction","label","name","required","forwardedRef","showColorPicker","setShowColorPicker","useState","colorPickerButtonRef","useRef","formatMessage","useIntl","field","useField","value","placeholder","composedRefs","useComposedRefs","_jsx","Field","Root","id","error","_jsxs","Flex","direction","alignItems","gap","Label","action","onOpenChange","Trigger","ref","aria-label","getTrad","defaultMessage","aria-controls","aria-haspopup","aria-expanded","aria-disabled","variant","size","Typography","style","textTransform","textColor","undefined","CaretDown","aria-hidden","sideOffset","onChange","hexValue","paddingTop","paddingLeft","justifyContent","Box","paddingRight","tag","Input","defaultValue","Hint","Error"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ColorPickerInput.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 { type InputProps, useField } 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 labelAction?: React.ReactNode;\n};\n\nexport const ColorPickerInput = React.forwardRef<HTMLButtonElement, ColorPickerInputProps>(\n ({ hint, disabled, labelAction, label, name, required, ...props }, forwardedRef) => {\n const [showColorPicker, setShowColorPicker] = React.useState(false);\n const colorPickerButtonRef = React.useRef<HTMLButtonElement>(null!);\n const { formatMessage } = useIntl();\n const field = useField<string>(name);\n\n /**\n * The color that will show in the field. We can't presume to show black or something\n * if no value is currently set (as `null` really corresponds to no color, not\n * black), so default to empty string if nothing else is available. */\n const color = field.value ?? props.placeholder ?? '';\n const hasColor = field.value !== undefined && field.value !== null && field.value !== '';\n\n const composedRefs = useComposedRefs(forwardedRef, colorPickerButtonRef);\n\n return (\n <Field.Root name={name} id={name} error={field.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={hasColor === true ? undefined : 'neutral500'}\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) => field.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 name={name}\n // No default value. If nothing is selected, the input will be empty.\n defaultValue={field.value ?? ''}\n // Here we default to #000000 as the placeholder, because, absent a\n // user defined placeholder, we want to indicate the desired format.\n placeholder=\"#000000\"\n onChange={field.onChange}\n {...props}\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":["ColorPreview","styled","div","props","color","ColorPicker","HexColorPicker","theme","spaces","ColorPickerToggle","Button","colors","neutral500","ColorPickerPopover","Popover","Content","ColorPickerInput","React","forwardRef","hint","disabled","labelAction","label","name","required","forwardedRef","showColorPicker","setShowColorPicker","useState","colorPickerButtonRef","useRef","formatMessage","useIntl","field","useField","value","placeholder","hasColor","undefined","composedRefs","useComposedRefs","_jsx","Field","Root","id","error","_jsxs","Flex","direction","alignItems","gap","Label","action","onOpenChange","Trigger","ref","aria-label","getTrad","defaultMessage","aria-controls","aria-haspopup","aria-expanded","aria-disabled","variant","size","Typography","style","textTransform","textColor","CaretDown","aria-hidden","sideOffset","onChange","hexValue","paddingTop","paddingLeft","justifyContent","Box","paddingRight","tag","Input","defaultValue","Hint","Error"],"mappings":"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"}
|
|
@@ -69,6 +69,7 @@ const ColorPickerInput = /*#__PURE__*/ React.forwardRef(({ hint, disabled, label
|
|
|
69
69
|
* The color that will show in the field. We can't presume to show black or something
|
|
70
70
|
* if no value is currently set (as `null` really corresponds to no color, not
|
|
71
71
|
* black), so default to empty string if nothing else is available. */ const color = field.value ?? props.placeholder ?? '';
|
|
72
|
+
const hasColor = field.value !== undefined && field.value !== null && field.value !== '';
|
|
72
73
|
const composedRefs = useComposedRefs(forwardedRef, colorPickerButtonRef);
|
|
73
74
|
return /*#__PURE__*/ jsx(Field.Root, {
|
|
74
75
|
name: name,
|
|
@@ -112,7 +113,7 @@ const ColorPickerInput = /*#__PURE__*/ React.forwardRef(({ hint, disabled, label
|
|
|
112
113
|
style: {
|
|
113
114
|
textTransform: 'uppercase'
|
|
114
115
|
},
|
|
115
|
-
textColor:
|
|
116
|
+
textColor: hasColor === true ? undefined : 'neutral500',
|
|
116
117
|
variant: "omega",
|
|
117
118
|
children: color
|
|
118
119
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColorPickerInput.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 { type InputProps, useField } 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 labelAction?: React.ReactNode;\n};\n\nexport const ColorPickerInput = React.forwardRef<HTMLButtonElement, ColorPickerInputProps>(\n ({ hint, disabled, labelAction, label, name, required, ...props }, forwardedRef) => {\n const [showColorPicker, setShowColorPicker] = React.useState(false);\n const colorPickerButtonRef = React.useRef<HTMLButtonElement>(null!);\n const { formatMessage } = useIntl();\n const field = useField(name);\n\n /**\n * The color that will show in the field. We can't presume to show black or something\n * if no value is currently set (as `null` really corresponds to no color, not\n * black), so default to empty string if nothing else is available. */\n const color = field.value ?? props.placeholder ?? '';\n\n const composedRefs = useComposedRefs(forwardedRef, colorPickerButtonRef);\n\n return (\n <Field.Root name={name} id={name} error={field.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={field.value ? undefined : 'neutral500'}\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) => field.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 name={name}\n // No default value. If nothing is selected, the input will be empty.\n defaultValue={field.value ?? ''}\n // Here we default to #000000 as the placeholder, because, absent a\n // user defined placeholder, we want to indicate the desired format.\n placeholder=\"#000000\"\n onChange={field.onChange}\n {...props}\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":["ColorPreview","styled","div","props","color","ColorPicker","HexColorPicker","theme","spaces","ColorPickerToggle","Button","colors","neutral500","ColorPickerPopover","Popover","Content","ColorPickerInput","React","forwardRef","hint","disabled","labelAction","label","name","required","forwardedRef","showColorPicker","setShowColorPicker","useState","colorPickerButtonRef","useRef","formatMessage","useIntl","field","useField","value","placeholder","composedRefs","useComposedRefs","_jsx","Field","Root","id","error","_jsxs","Flex","direction","alignItems","gap","Label","action","onOpenChange","Trigger","ref","aria-label","getTrad","defaultMessage","aria-controls","aria-haspopup","aria-expanded","aria-disabled","variant","size","Typography","style","textTransform","textColor","undefined","CaretDown","aria-hidden","sideOffset","onChange","hexValue","paddingTop","paddingLeft","justifyContent","Box","paddingRight","tag","Input","defaultValue","Hint","Error"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ColorPickerInput.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 { type InputProps, useField } 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 labelAction?: React.ReactNode;\n};\n\nexport const ColorPickerInput = React.forwardRef<HTMLButtonElement, ColorPickerInputProps>(\n ({ hint, disabled, labelAction, label, name, required, ...props }, forwardedRef) => {\n const [showColorPicker, setShowColorPicker] = React.useState(false);\n const colorPickerButtonRef = React.useRef<HTMLButtonElement>(null!);\n const { formatMessage } = useIntl();\n const field = useField<string>(name);\n\n /**\n * The color that will show in the field. We can't presume to show black or something\n * if no value is currently set (as `null` really corresponds to no color, not\n * black), so default to empty string if nothing else is available. */\n const color = field.value ?? props.placeholder ?? '';\n const hasColor = field.value !== undefined && field.value !== null && field.value !== '';\n\n const composedRefs = useComposedRefs(forwardedRef, colorPickerButtonRef);\n\n return (\n <Field.Root name={name} id={name} error={field.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={hasColor === true ? undefined : 'neutral500'}\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) => field.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 name={name}\n // No default value. If nothing is selected, the input will be empty.\n defaultValue={field.value ?? ''}\n // Here we default to #000000 as the placeholder, because, absent a\n // user defined placeholder, we want to indicate the desired format.\n placeholder=\"#000000\"\n onChange={field.onChange}\n {...props}\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":["ColorPreview","styled","div","props","color","ColorPicker","HexColorPicker","theme","spaces","ColorPickerToggle","Button","colors","neutral500","ColorPickerPopover","Popover","Content","ColorPickerInput","React","forwardRef","hint","disabled","labelAction","label","name","required","forwardedRef","showColorPicker","setShowColorPicker","useState","colorPickerButtonRef","useRef","formatMessage","useIntl","field","useField","value","placeholder","hasColor","undefined","composedRefs","useComposedRefs","_jsx","Field","Root","id","error","_jsxs","Flex","direction","alignItems","gap","Label","action","onOpenChange","Trigger","ref","aria-label","getTrad","defaultMessage","aria-controls","aria-haspopup","aria-expanded","aria-disabled","variant","size","Typography","style","textTransform","textColor","CaretDown","aria-hidden","sideOffset","onChange","hexValue","paddingTop","paddingLeft","justifyContent","Box","paddingRight","tag","Input","defaultValue","Hint","Error"],"mappings":"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"}
|
package/dist/admin/index.js
CHANGED
|
@@ -12,6 +12,7 @@ function __variableDynamicImportRuntime1__(path) {
|
|
|
12
12
|
case './translations/cs.json': return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespaceDefaultOnly(require('./translations/cs.json.js')); });
|
|
13
13
|
case './translations/en.json': return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespaceDefaultOnly(require('./translations/en.json.js')); });
|
|
14
14
|
case './translations/es.json': return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespaceDefaultOnly(require('./translations/es.json.js')); });
|
|
15
|
+
case './translations/pl.json': return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespaceDefaultOnly(require('./translations/pl.json.js')); });
|
|
15
16
|
case './translations/ru.json': return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespaceDefaultOnly(require('./translations/ru.json.js')); });
|
|
16
17
|
case './translations/sk.json': return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespaceDefaultOnly(require('./translations/sk.json.js')); });
|
|
17
18
|
case './translations/sv.json': return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespaceDefaultOnly(require('./translations/sv.json.js')); });
|
package/dist/admin/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../admin/src/index.ts"],"sourcesContent":["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":["register","app","customFields","name","pluginId","type","icon","ColorPickerIcon","intlLabel","id","getTrad","defaultMessage","intlDescription","components","Input","then","module","default","ColorPickerInput","options","advanced","defaultValue","description","sectionTitle","items","registerTrads","locales","importedTrads","Promise","all","map","locale","data","prefixPluginTranslations","catch","resolve"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../admin/src/index.ts"],"sourcesContent":["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":["register","app","customFields","name","pluginId","type","icon","ColorPickerIcon","intlLabel","id","getTrad","defaultMessage","intlDescription","components","Input","then","module","default","ColorPickerInput","options","advanced","defaultValue","description","sectionTitle","items","registerTrads","locales","importedTrads","Promise","all","map","locale","data","prefixPluginTranslations","catch","resolve"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA;AACA,YAAe;AACb;;AAEC;AAEDA,IAAAA,QAAAA,CAAAA,CAASC,GAAQ,EAAA;QACfA,GAAAA,CAAIC,YAAY,CAACF,QAAQ,CAAC;YACxBG,IAAAA,EAAM,OAAA;YACNC,QAAAA,EAAU,cAAA;YACVC,IAAAA,EAAM,QAAA;YACNC,IAAAA,EAAMC,+BAAAA;YACNC,SAAAA,EAAW;AACTC,gBAAAA,EAAAA,EAAIC,eAAAA,CAAQ,oBAAA,CAAA;gBACZC,cAAAA,EAAgB;AAClB,aAAA;YACAC,eAAAA,EAAiB;AACfH,gBAAAA,EAAAA,EAAIC,eAAAA,CAAQ,0BAAA,CAAA;gBACZC,cAAAA,EAAgB;AAClB,aAAA;YACAE,UAAAA,EAAY;gBACVC,KAAAA,EAAO,UACL,oDAAO,kCAAA,KAAA,CAAiCC,IAAI,CAAC,CAACC,UAAY;AACxDC,4BAAAA,OAAAA,EAASD,OAAOE;yBAClB,CAAA;AACJ,aAAA;YACAC,OAAAA,EAAS;gBACPC,QAAAA,EAAU;AACR,oBAAA;wBACEZ,SAAAA,EAAW;AACTC,4BAAAA,EAAAA,EAAIC,eAAAA,CAAQ,qCAAA,CAAA;4BACZC,cAAAA,EAAgB;AAClB,yBAAA;wBACAR,IAAAA,EAAM,OAAA;wBACNE,IAAAA,EAAM,MAAA;wBACNgB,YAAAA,EAAc,oCAAA;wBACdC,WAAAA,EAAa;AACXb,4BAAAA,EAAAA,EAAIC,eAAAA,CAAQ,iDAAA,CAAA;4BACZC,cAAAA,EAAgB;AAClB;AACF,qBAAA;AACA,oBAAA;wBACEY,YAAAA,EAAc;4BACZd,EAAAA,EAAI,iBAAA;4BACJE,cAAAA,EAAgB;AAClB,yBAAA;wBACAa,KAAAA,EAAO;AACL,4BAAA;gCACErB,IAAAA,EAAM,UAAA;gCACNE,IAAAA,EAAM,UAAA;gCACNG,SAAAA,EAAW;AACTC,oCAAAA,EAAAA,EAAIC,eAAAA,CAAQ,6CAAA,CAAA;oCACZC,cAAAA,EAAgB;AAClB,iCAAA;gCACAW,WAAAA,EAAa;AACXb,oCAAAA,EAAAA,EAAIC,eAAAA,CAAQ,yDAAA,CAAA;oCACZC,cAAAA,EAAgB;AAClB;AACF;AACD;AACH;AACD;AACH;AACF,SAAA,CAAA;AACF,IAAA,CAAA;IACA,MAAMc,aAAAA,CAAAA,CAAc,EAAEC,OAAO,EAAyB,EAAA;QACpD,MAAMC,aAAAA,GAAgB,MAAMC,OAAAA,CAAQC,GAAG,CACrCH,OAAAA,CAAQI,GAAG,CAAC,CAACC,MAAAA,GAAAA;AACX,YAAA,OAAO,iCAAM,CAAC,CAAC,eAAe,EAAEA,MAAAA,CAAO,KAAK,CAAC,CAAA,CAC1ChB,IAAI,CAAC,CAAC,EAAEE,OAAAA,EAASe,IAAI,EAAE,GAAA;gBACtB,OAAO;AACLA,oBAAAA,IAAAA,EAAMC,kDAAyBD,IAAAA,EAAM5B,iBAAAA,CAAAA;AACrC2B,oBAAAA;AACF,iBAAA;AACF,YAAA,CAAA,CAAA,CACCG,KAAK,CAAC,IAAA;gBACL,OAAO;AACLF,oBAAAA,IAAAA,EAAM,EAAC;AACPD,oBAAAA;AACF,iBAAA;AACF,YAAA,CAAA,CAAA;AACJ,QAAA,CAAA,CAAA,CAAA;QAGF,OAAOH,OAAAA,CAAQO,OAAO,CAACR,aAAAA,CAAAA;AACzB,IAAA;AACF,CAAA;;;;"}
|
package/dist/admin/index.mjs
CHANGED
|
@@ -8,6 +8,7 @@ function __variableDynamicImportRuntime1__(path) {
|
|
|
8
8
|
case './translations/cs.json': return import('./translations/cs.json.mjs');
|
|
9
9
|
case './translations/en.json': return import('./translations/en.json.mjs');
|
|
10
10
|
case './translations/es.json': return import('./translations/es.json.mjs');
|
|
11
|
+
case './translations/pl.json': return import('./translations/pl.json.mjs');
|
|
11
12
|
case './translations/ru.json': return import('./translations/ru.json.mjs');
|
|
12
13
|
case './translations/sk.json': return import('./translations/sk.json.mjs');
|
|
13
14
|
case './translations/sv.json': return import('./translations/sv.json.mjs');
|
package/dist/admin/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../admin/src/index.ts"],"sourcesContent":["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":["register","app","customFields","name","pluginId","type","icon","ColorPickerIcon","intlLabel","id","getTrad","defaultMessage","intlDescription","components","Input","then","module","default","ColorPickerInput","options","advanced","defaultValue","description","sectionTitle","items","registerTrads","locales","importedTrads","Promise","all","map","locale","data","prefixPluginTranslations","catch","resolve"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../admin/src/index.ts"],"sourcesContent":["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":["register","app","customFields","name","pluginId","type","icon","ColorPickerIcon","intlLabel","id","getTrad","defaultMessage","intlDescription","components","Input","then","module","default","ColorPickerInput","options","advanced","defaultValue","description","sectionTitle","items","registerTrads","locales","importedTrads","Promise","all","map","locale","data","prefixPluginTranslations","catch","resolve"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAKA;AACA,YAAe;AACb;;AAEC;AAEDA,IAAAA,QAAAA,CAAAA,CAASC,GAAQ,EAAA;QACfA,GAAAA,CAAIC,YAAY,CAACF,QAAQ,CAAC;YACxBG,IAAAA,EAAM,OAAA;YACNC,QAAAA,EAAU,cAAA;YACVC,IAAAA,EAAM,QAAA;YACNC,IAAAA,EAAMC,eAAAA;YACNC,SAAAA,EAAW;AACTC,gBAAAA,EAAAA,EAAIC,OAAAA,CAAQ,oBAAA,CAAA;gBACZC,cAAAA,EAAgB;AAClB,aAAA;YACAC,eAAAA,EAAiB;AACfH,gBAAAA,EAAAA,EAAIC,OAAAA,CAAQ,0BAAA,CAAA;gBACZC,cAAAA,EAAgB;AAClB,aAAA;YACAE,UAAAA,EAAY;gBACVC,KAAAA,EAAO,UACL,OAAO,mCAAA,CAAA,CAAiCC,IAAI,CAAC,CAACC,UAAY;AACxDC,4BAAAA,OAAAA,EAASD,OAAOE;yBAClB,CAAA;AACJ,aAAA;YACAC,OAAAA,EAAS;gBACPC,QAAAA,EAAU;AACR,oBAAA;wBACEZ,SAAAA,EAAW;AACTC,4BAAAA,EAAAA,EAAIC,OAAAA,CAAQ,qCAAA,CAAA;4BACZC,cAAAA,EAAgB;AAClB,yBAAA;wBACAR,IAAAA,EAAM,OAAA;wBACNE,IAAAA,EAAM,MAAA;wBACNgB,YAAAA,EAAc,oCAAA;wBACdC,WAAAA,EAAa;AACXb,4BAAAA,EAAAA,EAAIC,OAAAA,CAAQ,iDAAA,CAAA;4BACZC,cAAAA,EAAgB;AAClB;AACF,qBAAA;AACA,oBAAA;wBACEY,YAAAA,EAAc;4BACZd,EAAAA,EAAI,iBAAA;4BACJE,cAAAA,EAAgB;AAClB,yBAAA;wBACAa,KAAAA,EAAO;AACL,4BAAA;gCACErB,IAAAA,EAAM,UAAA;gCACNE,IAAAA,EAAM,UAAA;gCACNG,SAAAA,EAAW;AACTC,oCAAAA,EAAAA,EAAIC,OAAAA,CAAQ,6CAAA,CAAA;oCACZC,cAAAA,EAAgB;AAClB,iCAAA;gCACAW,WAAAA,EAAa;AACXb,oCAAAA,EAAAA,EAAIC,OAAAA,CAAQ,yDAAA,CAAA;oCACZC,cAAAA,EAAgB;AAClB;AACF;AACD;AACH;AACD;AACH;AACF,SAAA,CAAA;AACF,IAAA,CAAA;IACA,MAAMc,aAAAA,CAAAA,CAAc,EAAEC,OAAO,EAAyB,EAAA;QACpD,MAAMC,aAAAA,GAAgB,MAAMC,OAAAA,CAAQC,GAAG,CACrCH,OAAAA,CAAQI,GAAG,CAAC,CAACC,MAAAA,GAAAA;AACX,YAAA,OAAO,iCAAM,CAAC,CAAC,eAAe,EAAEA,MAAAA,CAAO,KAAK,CAAC,CAAA,CAC1ChB,IAAI,CAAC,CAAC,EAAEE,OAAAA,EAASe,IAAI,EAAE,GAAA;gBACtB,OAAO;AACLA,oBAAAA,IAAAA,EAAMC,yBAAyBD,IAAAA,EAAM5B,QAAAA,CAAAA;AACrC2B,oBAAAA;AACF,iBAAA;AACF,YAAA,CAAA,CAAA,CACCG,KAAK,CAAC,IAAA;gBACL,OAAO;AACLF,oBAAAA,IAAAA,EAAM,EAAC;AACPD,oBAAAA;AACF,iBAAA;AACF,YAAA,CAAA,CAAA;AACJ,QAAA,CAAA,CAAA,CAAA;QAGF,OAAOH,OAAAA,CAAQO,OAAO,CAACR,aAAAA,CAAAA;AACzB,IAAA;AACF,CAAA;;;;"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var pl = {
|
|
4
|
+
"color-picker.description": "Wybierz dowolny kolor",
|
|
5
|
+
"color-picker.input.aria-label": "Pole wyboru koloru",
|
|
6
|
+
"color-picker.input.format": "HEX",
|
|
7
|
+
"color-picker.label": "Kolor",
|
|
8
|
+
"color-picker.options.advanced.regex": "Wzorzec RegExp",
|
|
9
|
+
"color-picker.options.advanced.regex.description": "Podaj wyrażenie regularne, aby zwalidować wartość HEX",
|
|
10
|
+
"color-picker.options.advanced.requiredField": "Pole wymagane",
|
|
11
|
+
"color-picker.options.advanced.requiredField.description": "Nie będziesz mógł utworzyć wpisu, jeśli to pole jest puste",
|
|
12
|
+
"color-picker.settings": "Ustawienia",
|
|
13
|
+
"color-picker.toggle.aria-label": "Przełącznik wyboru koloru",
|
|
14
|
+
"plugin.description.long": "Pole niestandardowe wyboru koloru utrzymywane przez Strapi. Użyj suwaków nasycenia i odcienia, aby wybrać kolor i zapisać wartość jako ciąg HEX.",
|
|
15
|
+
"plugin.description.short": "Pole niestandardowe wyboru koloru utrzymywane przez Strapi.",
|
|
16
|
+
"plugin.name": "Wybór koloru"
|
|
17
|
+
};
|
|
18
|
+
|
|
19
|
+
module.exports = pl;
|
|
20
|
+
//# sourceMappingURL=pl.json.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"pl.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
var pl = {
|
|
2
|
+
"color-picker.description": "Wybierz dowolny kolor",
|
|
3
|
+
"color-picker.input.aria-label": "Pole wyboru koloru",
|
|
4
|
+
"color-picker.input.format": "HEX",
|
|
5
|
+
"color-picker.label": "Kolor",
|
|
6
|
+
"color-picker.options.advanced.regex": "Wzorzec RegExp",
|
|
7
|
+
"color-picker.options.advanced.regex.description": "Podaj wyrażenie regularne, aby zwalidować wartość HEX",
|
|
8
|
+
"color-picker.options.advanced.requiredField": "Pole wymagane",
|
|
9
|
+
"color-picker.options.advanced.requiredField.description": "Nie będziesz mógł utworzyć wpisu, jeśli to pole jest puste",
|
|
10
|
+
"color-picker.settings": "Ustawienia",
|
|
11
|
+
"color-picker.toggle.aria-label": "Przełącznik wyboru koloru",
|
|
12
|
+
"plugin.description.long": "Pole niestandardowe wyboru koloru utrzymywane przez Strapi. Użyj suwaków nasycenia i odcienia, aby wybrać kolor i zapisać wartość jako ciąg HEX.",
|
|
13
|
+
"plugin.description.short": "Pole niestandardowe wyboru koloru utrzymywane przez Strapi.",
|
|
14
|
+
"plugin.name": "Wybór koloru"
|
|
15
|
+
};
|
|
16
|
+
|
|
17
|
+
export { pl as default };
|
|
18
|
+
//# sourceMappingURL=pl.json.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"pl.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@strapi/plugin-color-picker",
|
|
3
|
-
"version": "5.50.
|
|
3
|
+
"version": "5.50.1",
|
|
4
4
|
"description": "Strapi maintained Custom Fields",
|
|
5
5
|
"homepage": "https://strapi.io",
|
|
6
6
|
"bugs": {
|
|
@@ -69,7 +69,7 @@
|
|
|
69
69
|
"react-intl": "6.6.2"
|
|
70
70
|
},
|
|
71
71
|
"devDependencies": {
|
|
72
|
-
"@strapi/strapi": "5.50.
|
|
72
|
+
"@strapi/strapi": "5.50.1",
|
|
73
73
|
"@testing-library/react": "16.3.2",
|
|
74
74
|
"@testing-library/user-event": "14.6.1",
|
|
75
75
|
"react": "18.3.1",
|
|
@@ -78,7 +78,7 @@
|
|
|
78
78
|
"styled-components": "6.4.1",
|
|
79
79
|
"typescript": "5.9.3",
|
|
80
80
|
"vitest": "catalog:",
|
|
81
|
-
"vitest-config": "5.50.
|
|
81
|
+
"vitest-config": "5.50.1"
|
|
82
82
|
},
|
|
83
83
|
"peerDependencies": {
|
|
84
84
|
"@strapi/strapi": "^5.0.0",
|