@operato/input 1.7.4 → 1.11.3
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/CHANGELOG.md +9 -0
- package/dist/stories/ox-input-multiple-colors.stories.js +4 -1
- package/dist/stories/ox-input-multiple-colors.stories.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +3 -3
- package/stories/ox-input-multiple-colors.stories.ts +4 -1
- package/themes/app-theme.css +4 -1
- package/yarn-error.log +17084 -0
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,15 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
### [1.11.3](https://github.com/hatiolab/operato/compare/v1.11.2...v1.11.3) (2023-12-14)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### :bug: Bug Fix
|
|
10
|
+
|
|
11
|
+
* app-theme for table ([dd55434](https://github.com/hatiolab/operato/commit/dd55434223e73c3d710d1df96ec151e9bd0756f1))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
6
15
|
### [1.7.4](https://github.com/hatiolab/operato/compare/v1.7.3...v1.7.4) (2023-12-11)
|
|
7
16
|
|
|
8
17
|
|
|
@@ -115,7 +115,7 @@ const Template = ({}) => html `
|
|
|
115
115
|
--button-primary-font: bold 16px var(--theme-font);
|
|
116
116
|
|
|
117
117
|
/* table style */
|
|
118
|
-
--th-padding: var(--padding-default)
|
|
118
|
+
--th-padding: var(--padding-default);
|
|
119
119
|
--th-border-top: 2px solid var(--secondary-color);
|
|
120
120
|
--th-text-transform: capitalize;
|
|
121
121
|
--th-font: bold var(--fontsize-small) var(--theme-font);
|
|
@@ -124,11 +124,14 @@ const Template = ({}) => html `
|
|
|
124
124
|
--tr-background-color: var(--theme-white-color);
|
|
125
125
|
--tr-background-odd-color: rgba(255, 255, 255, 0.4);
|
|
126
126
|
--tr-background-hover-color: #e1f5fe;
|
|
127
|
+
--td-border-line: 1px solid rgba(0, 0, 0, 0.05);
|
|
127
128
|
--td-border-bottom: 1px solid rgba(0, 0, 0, 0.09);
|
|
128
129
|
--td-padding: var(--padding-default);
|
|
129
130
|
--td-font: normal 13px var(--theme-font);
|
|
130
131
|
--td-color: var(--secondary-color);
|
|
131
132
|
|
|
133
|
+
--label-cell-background-color: #f6f6f6; /* th or td common background color */
|
|
134
|
+
|
|
132
135
|
/* form style */
|
|
133
136
|
--label-font: normal var(--fontsize-default) var(--theme-font);
|
|
134
137
|
--label-color: var(--secondary-color);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-input-multiple-colors.stories.js","sourceRoot":"","sources":["../../stories/ox-input-multiple-colors.stories.ts"],"names":[],"mappings":"AAAA,OAAO,oCAAoC,CAAA;AAE3C,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,eAAe;IACb,KAAK,EAAE,0BAA0B;IACjC,SAAS,EAAE,0BAA0B;IACrC,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;KAC5B;CACF,CAAA;AAUD,MAAM,QAAQ,GAAoB,CAAC,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA
|
|
1
|
+
{"version":3,"file":"ox-input-multiple-colors.stories.js","sourceRoot":"","sources":["../../stories/ox-input-multiple-colors.stories.ts"],"names":[],"mappings":"AAAA,OAAO,oCAAoC,CAAA;AAE3C,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,eAAe;IACb,KAAK,EAAE,0BAA0B;IACjC,SAAS,EAAE,0BAA0B;IACrC,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;KAC5B;CACF,CAAA;AAUD,MAAM,QAAQ,GAAoB,CAAC,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;aAwJ3C,CAAC,KAAK,EAAE,QAAQ,CAAC;cAChB,CAAC,CAAQ,EAAE,EAAE;IACrB,OAAO,CAAC,GAAG,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;AACnD,CAAC;;;CAGJ,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA","sourcesContent":["import '../src/ox-input-multiple-colors.js'\n\nimport { html, TemplateResult } from 'lit'\n\nexport default {\n title: 'ox-input-multiple-colors',\n component: 'ox-input-multiple-colors',\n argTypes: {\n value: { control: 'array' }\n }\n}\n\ninterface Story<T> {\n (args: T): TemplateResult\n args?: Partial<T>\n argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {}\n\nconst Template: Story<ArgTypes> = ({}: ArgTypes) => html`\n <link href=\"https://fonts.googleapis.com/css?family=Material+Icons&display=block\" rel=\"stylesheet\" />\n\n <style>\n body {\n /* theme color */\n --primary-color-rgb: 56, 162, 91;\n --primary-color: rgb(var(--primary-color-rgb));\n --secondary-color-rgb: 71, 97, 114;\n --secondary-color: rgb(var(--secondary-color-rgb));\n --focus-color: var(--theme-white-color);\n --primary-background-color: var(--secondary-color);\n --secondary-background-color: #183936;\n --main-section-background-color: #f7f6f4;\n --theme-white-color: #fff;\n --theme-black-color: rgba(0, 0, 0, 0.9);\n\n --focus-background-color: var(--primary-color);\n --primary-text-color: var(--theme-black-color);\n --secondary-text-color: #218f62;\n\n --opacity-dark-color: rgba(0, 0, 0, 0.4);\n --opacity-light-color: rgba(255, 255, 255, 0.8);\n\n /* status color */\n --status-success-color: #35a24a;\n --status-warning-color: #ee8d03;\n --status-danger-color: #d14946;\n --status-info-color: #398ace;\n\n /* common style */\n --border-radius: 4px;\n --border-dark-color: 1px solid rgba(0, 0, 0, 0.15);\n --border-light-color: 1px solid rgba(255, 255, 255, 0.3);\n\n --box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.1);\n\n --theme-font: 'Noto', Helvetica;\n\n --margin-default: 9px;\n --margin-narrow: 4px;\n --margin-wide: 15px;\n --padding-default: var(--margin-default);\n --padding-narrow: var(--margin-narrow);\n --padding-wide: var(--margin-wide);\n\n --scrollbar-thumb-color: rgba(57, 78, 100, 0.5);\n --scrollbar-thumb-hover-color: var(--primary-color);\n\n --fontsize-default: 14px;\n --fontsize-small: 13px;\n --fontsize-large: 16px;\n\n /* app layout style */\n --app-grid-template-area: 'header header header' 'nav main aside' 'nav footer aside';\n\n /* title & description style */\n --title-margin: var(--margin-narrow) 0;\n --title-font: bold 24px var(--theme-font);\n --title-text-color: var(--secondary-color);\n --title-font-mobile: bold 20px var(--theme-font);\n\n --page-description-margin: var(--margin-narrow) 0 var(--margin-wide) 0;\n --page-description-font: normal var(--fontsize-default) / 1.2rem var(--theme-font);\n --page-description-color: var(--secondary-text-color);\n\n --subtitle-padding: 12px 5px 3px 5px;\n --subtitle-font: bold 18px var(--theme-font);\n --subtitle-text-color: var(--primary-color);\n --subtitle-border-bottom: 1px solid var(--primary-color);\n\n /* icon style */\n --icon-tiny-size: 24px;\n --icon-default-size: 36px;\n --icon-big-size: 48px;\n --icon-default-color: var(--theme-white-color);\n\n /* material design component themes */\n --mdc-theme-on-primary: var(--theme-white-color);\n --mdc-theme-primary: var(--secondary-text-color);\n --mdc-theme-on-secondary: var(--theme-white-color);\n --mdc-theme-secondary: var(--primary-color);\n --mdc-button-outline-color: var(--primary-color);\n --mdc-danger-button-primary-color: var(--status-danger-color);\n --mdc-danger-button-outline-color: var(--status-danger-color);\n --mdc-button-outline-width: 1px;\n --mdc-button-horizontal-padding: 16px;\n\n /* button style */\n --button-background-color: #fafbfc;\n --button-background-focus-color: var(--primary-color);\n --button-border: var(--border-dark-color);\n --button-border-radius: var(--border-radius);\n --button-margin: var(--margin-default) var(--margin-default) var(--margin-default) 0;\n --button-padding: var(--padding-default);\n --button-color: var(--secondary-color);\n --button-font: normal 15px var(--theme-font);\n --button-text-transform: capitalize;\n --button-active-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.2);\n --button-activ-border: 1px solid var(--primary-color);\n\n --button-primary-background-color: var(--primary-color);\n --button-primary-active-background-color: var(--status-success-color);\n --button-primary-padding: var(--margin-default) var(--margin-wide);\n --button-primary-color: var(--theme-white-color);\n --button-primary-font: bold 16px var(--theme-font);\n\n /* table style */\n --th-padding: var(--padding-default);\n --th-border-top: 2px solid var(--secondary-color);\n --th-text-transform: capitalize;\n --th-font: bold var(--fontsize-small) var(--theme-font);\n --th-color: rgba(var(--secondary-color-rgb), 0.8);\n\n --tr-background-color: var(--theme-white-color);\n --tr-background-odd-color: rgba(255, 255, 255, 0.4);\n --tr-background-hover-color: #e1f5fe;\n --td-border-line: 1px solid rgba(0, 0, 0, 0.05);\n --td-border-bottom: 1px solid rgba(0, 0, 0, 0.09);\n --td-padding: var(--padding-default);\n --td-font: normal 13px var(--theme-font);\n --td-color: var(--secondary-color);\n\n --label-cell-background-color: #f6f6f6; /* th or td common background color */\n\n /* form style */\n --label-font: normal var(--fontsize-default) var(--theme-font);\n --label-color: var(--secondary-color);\n --label-text-transform: capitalize;\n --input-margin: var(--margin-narrow) 0;\n --input-padding: var(--padding-default);\n --input-min-width: 200px;\n --input-font: normal var(--fontsize-default) var(--theme-font);\n --input-hint-font: normal var(--fontsize-small) var(--theme-font);\n --input-hint-color: #666;\n --input-container-max-width: 900px;\n --fieldset-margin: var(--padding-wide) 0;\n --fieldset-padding: 0 var(--padding-wide) var(--padding-wide) var(--padding-wide);\n --legend-padding: var(--padding-default) 0;\n --legend-color: var(--secondary-text-color);\n --legend-font: bold 16px var(--theme-font);\n }\n\n @media only screen and (max-width: 460px) {\n body {\n /* subtitle style */\n --subtitle-margin: 0;\n }\n }\n </style>\n\n <ox-input-multiple-colors\n .value=${['red', 'yellow']}\n @change=${(e: Event) => {\n console.log((e.target as HTMLInputElement).value)\n }}\n >\n </ox-input-multiple-colors>\n`\n\nexport const Regular = Template.bind({})\n"]}
|