@operato/input 8.0.0-alpha.10 → 8.0.0-alpha.19

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.
Files changed (15) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/dist/src/ox-select-floor.d.ts +38 -0
  3. package/dist/src/ox-select-floor.js +246 -0
  4. package/dist/src/ox-select-floor.js.map +1 -0
  5. package/dist/stories/image-for-select-floor.d.ts +1 -0
  6. package/dist/stories/image-for-select-floor.js +2 -0
  7. package/dist/stories/image-for-select-floor.js.map +1 -0
  8. package/dist/stories/ox-select-floor.stories.d.ts +41 -0
  9. package/dist/stories/ox-select-floor.stories.js +140 -0
  10. package/dist/stories/ox-select-floor.stories.js.map +1 -0
  11. package/dist/tsconfig.tsbuildinfo +1 -1
  12. package/package.json +6 -2
  13. package/src/ox-select-floor.ts +257 -0
  14. package/stories/image-for-select-floor.ts +2 -0
  15. package/stories/ox-select-floor.stories.ts +169 -0
package/stories/ox-select-floor.stories.ts ADDED
@@ -0,0 +1,169 @@
1
+ import '../src/ox-select-floor.js'
2
+
3
+ import { html, TemplateResult } from 'lit'
4
+ import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
5
+ import { IMAGE } from './image-for-select-floor.js'
6
+
7
+ export default {
8
+ title: 'ox-select-floor',
9
+ component: 'ox-select-floor',
10
+ argTypes: {
11
+ disabled: { control: 'boolean' },
12
+ value: { control: 'text' },
13
+ bottomLimit: { control: 'number' },
14
+ perspective: { control: 'number' },
15
+ rotateX: { control: 'number' },
16
+ rotateXForActive: { control: 'number' }
17
+ }
18
+ }
19
+
20
+ interface Story<T> {
21
+ (args: T): TemplateResult
22
+ args?: Partial<T>
23
+ argTypes?: Record<string, unknown>
24
+ }
25
+
26
+ interface ArgTypes {
27
+ value?: string
28
+ bottomLimit?: number
29
+ perspective?: number
30
+ rotateX?: number
31
+ rotateXForActive?: number
32
+ disabled?: boolean
33
+ }
34
+
35
+ const cards = new Array(10).fill({}).map((_, index) => {
36
+ return {
37
+ image: IMAGE,
38
+ name: index + 1 + '층'
39
+ }
40
+ })
41
+
42
+ const Template: Story<ArgTypes> = ({
43
+ value,
44
+ disabled,
45
+ bottomLimit = 70,
46
+ perspective = 1200,
47
+ rotateX = 60,
48
+ rotateXForActive = 40
49
+ }: ArgTypes) => html`
50
+ <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
51
+
52
+ <link href="/themes/light.css" rel="stylesheet" />
53
+ <link href="/themes/dark.css" rel="stylesheet" />
54
+ <link href="/themes/spacing.css" rel="stylesheet" />
55
+
56
+ <link
57
+ href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
58
+ rel="stylesheet"
59
+ />
60
+ <link
61
+ href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
62
+ rel="stylesheet"
63
+ />
64
+ <link
65
+ href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
66
+ rel="stylesheet"
67
+ />
68
+
69
+ <style>
70
+ ${MDTypeScaleStyles.cssText}
71
+ </style>
72
+
73
+ <style>
74
+ .container {
75
+ height: 1000px;
76
+ text-align: center;
77
+ padding: 20px;
78
+
79
+ background-color: var(--md-sys-color-primary-container);
80
+ color: var(--md-sys-color-on-primary-container);
81
+ }
82
+
83
+ div[status] {
84
+ display: flex;
85
+ position: absolute;
86
+ right: 0px;
87
+ bottom: 0px;
88
+ align-items: center;
89
+ z-index: 2;
90
+ right: 3%;
91
+
92
+ div[content] {
93
+ display: flex;
94
+ background-color: #4e5055;
95
+ color: #fff;
96
+ padding: 5px 7px;
97
+ border-radius: 7px;
98
+ gap: 10px;
99
+ font-size: 14px;
100
+
101
+ span {
102
+ display: flex;
103
+ align-items: center;
104
+ width: 48px;
105
+
106
+ md-icon {
107
+ width: 20px;
108
+ height: 20px;
109
+ margin-right: 4px;
110
+ border-radius: 5px;
111
+ font-size: 21px;
112
+ font-weight: 700;
113
+ }
114
+ md-icon[request] {
115
+ background-color: #f7f7f7;
116
+ color: #4e5055;
117
+ }
118
+ md-icon[pass] {
119
+ background-color: #4bbb4a;
120
+ }
121
+ md-icon[fail] {
122
+ background-color: #ff4444;
123
+ }
124
+ }
125
+ }
126
+ span[name] {
127
+ color: #4e5055;
128
+ margin-left: 6px;
129
+ width: 40px;
130
+ }
131
+ }
132
+
133
+ ox-select-floor {
134
+ --ox-select-floor-rotate-x: ${rotateX}deg;
135
+ --ox-select-floor-rotate-x-active: ${rotateXForActive}deg;
136
+ --ox-select-floor-perspective: ${perspective}px;
137
+ }
138
+ </style>
139
+
140
+ <div class="container md-typescale-body-large-prominent">
141
+ <ox-select-floor
142
+ .cards=${cards}
143
+ .bottomLimit=${bottomLimit}
144
+ ?disabled=${disabled}
145
+ @change=${(e: Event) => console.log(((e as CustomEvent).target as any)!.value)}
146
+ >
147
+ ${cards.map(
148
+ ({ image, name }, index) =>
149
+ html`<div slot="template-${index}" status>
150
+ <div content>
151
+ <span><md-icon request slot="icon">exclamation</md-icon>100</span>
152
+ <span><md-icon pass slot="icon">check</md-icon>50</span>
153
+ <span><md-icon fail slot="icon">close</md-icon>5</span>
154
+ </div>
155
+ <span name>${name}</span>
156
+ </div>`
157
+ )}
158
+ </ox-select-floor>
159
+ </div>
160
+ `
161
+
162
+ export const Regular = Template.bind({})
163
+ Regular.args = {
164
+ value: '1층',
165
+ bottomLimit: 70,
166
+ perspective: 1200,
167
+ rotateX: 40,
168
+ rotateXForActive: 60
169
+ }